@sitecore/blok-theme/dist/index.esm.js

The Sitecore theme for Chakra-UI components

// src/index.ts
import { extendTheme } from "@chakra-ui/react";

// src/foundations/colors.ts
var basePalette = {
  colors: {
    gray: {
      50: "#F7F7F7",
      100: "#E9E9E9",
      200: "#D8D8D8",
      300: "#B5B5B5",
      400: "#8E8E8E",
      500: "#717171",
      600: "#535353",
      700: "#3B3B3B",
      800: "#282828",
      900: "#212121"
    },
    blackAlpha: {
      50: "rgba(0,0,0, 0.04)",
      100: "rgba(0,0,0,0.06)",
      200: "rgba(0,0,0,0.11)",
      300: "rgba(0,0,0,0.29)",
      400: "rgba(0,0,0,0.42)",
      500: "rgba(0,0,0,0.55)",
      600: "rgba(0,0,0,0.68)",
      700: "rgba(0,0,0,0.76)",
      800: "rgba(0,0,0,0.78)",
      900: "rgba(0,0,0,0.94)"
    },
    whiteAlpha: {
      50: "rgba(255,255,255, 0.04)",
      100: "rgba(255,255,255,0.06)",
      200: "rgba(255,255,255,0.11)",
      300: "rgba(255,255,255,0.29)",
      400: "rgba(255,255,255,0.42)",
      500: "rgba(255,255,255,0.55)",
      600: "rgba(255,255,255,0.68)",
      700: "rgba(255,255,255,0.76)",
      800: "rgba(255,255,255,0.78)",
      900: "rgba(255,255,255,0.94)"
    },
    red: {
      50: "#FFF5F4",
      100: "#FFE4E2",
      200: "#FFCCC8",
      300: "#FF9A94",
      400: "#F4595A",
      500: "#D92739",
      600: "#B30426",
      700: "#92001F",
      800: "#730019",
      900: "#580113"
    },
    orange: {
      50: "#FFF6E7",
      100: "#FFE6BD",
      200: "#FDD291",
      300: "#FFA037",
      400: "#E26E00",
      500: "#BA5200",
      600: "#953D00",
      700: "#7A2F00",
      800: "#612300",
      900: "#491901"
    },
    yellow: {
      50: "#FDF8D2",
      100: "#FAEC79",
      200: "#F8D904",
      300: "#D7B300",
      400: "#AE8A00",
      500: "#8B6B00",
      600: "#705300",
      700: "#5B4300",
      800: "#483300",
      900: "#362500"
    },
    green: {
      50: "#E8FCF5",
      100: "#BEF6E3",
      200: "#8BEBD0",
      300: "#44CBAC",
      400: "#0EA184",
      500: "#007F66",
      600: "#006450",
      700: "#085040",
      800: "#0D3E31",
      900: "#0F2D25"
    },
    teal: {
      50: "#E7FBFB",
      100: "#BBF4F3",
      200: "#8BE9E8",
      300: "#3CC8CB",
      400: "#019EA5",
      500: "#007C85",
      600: "#00626B",
      700: "#0A4E57",
      800: "#103B44",
      900: "#102C33"
    },
    cyan: {
      50: "#EAFAFF",
      100: "#C6F1FF",
      200: "#A0E3FD",
      300: "#5CC0F1",
      400: "#2695DE",
      500: "#0873C8",
      600: "#0059A1",
      700: "#004783",
      800: "#003767",
      900: "#00294D"
    },
    blue: {
      50: "#F4F7FF",
      100: "#E1EAFF",
      200: "#C9D8FF",
      300: "#9CB3FD",
      400: "#6987F9",
      500: "#4A65E8",
      600: "#344BC3",
      700: "#293BA1",
      800: "#1F2D7F",
      900: "#16215F"
    },
    purple: {
      50: "#F7F6FF",
      100: "#EAE7FF",
      200: "#D9D4FF",
      300: "#B8A9FF",
      400: "#9373FF",
      500: "#6E3FFF",
      600: "#5319E0",
      700: "#4715AF",
      800: "#401791",
      900: "#2F1469"
    },
    pink: {
      50: "#FFF4FE",
      100: "#FFE2FB",
      200: "#FEC7F8",
      300: "#F592F3",
      400: "#DE53E0",
      500: "#BC29BD",
      600: "#9D039E",
      700: "#800081",
      800: "#640664",
      900: "#470E46"
    }
  }
};
var colors = {
  primary: basePalette.colors.purple,
  danger: basePalette.colors.red,
  warning: basePalette.colors.orange,
  success: basePalette.colors.green,
  info: basePalette.colors.purple,
  ...basePalette.colors
};
var colors_default = colors;

// src/foundations/shadows.ts
var shadows = {
  outline: "0 0 0 3px rgba(110, 63, 255, 0.6)"
};
var shadows_default = shadows;

// src/foundations/typography.ts
var typography = {
  fontSizes: {
    "3xs": "0.625rem",
    "2xs": "0.6875rem",
    xs: "0.75rem",
    sm: "0.8125rem",
    md: "0.875rem",
    lg: "1rem",
    xl: "1.125rem",
    "2xl": "1.25rem",
    "3xl": "1.5rem",
    "4xl": "1.875rem",
    "5xl": "2.25rem",
    "6xl": "3rem",
    "7xl": "3.75rem",
    "8xl": "4.5rem",
    "9xl": "6rem"
  }
};
var typography_default = typography;

// src/foundations/sizes.ts
var sizes = {
  icon: {
    default: "1.571428571428571em",
    "3xs": "1rem",
    "2xs": "1.25rem",
    xs: "1.5rem",
    sm: "1.75rem",
    md: "2rem",
    lg: "2.25rem",
    xl: "2.5rem",
    "2xl": "3rem",
    "3xl": "3.5rem",
    "4xl": "4rem",
    "5xl": "5rem",
    "6xl": "6rem",
    "7xl": "7rem",
    "8xl": "8rem"
  },
  container: {
    "2xl": "1536px",
    "3xl": "1792px",
    "4xl": "2048px"
  }
};
var sizes_default = sizes;

// src/foundations/index.ts
var foundations = {
  colors: colors_default,
  ...typography_default,
  sizes: sizes_default,
  shadows: shadows_default
};
var foundations_default = foundations;

// src/components/accordion.ts
var Accordion = {
  baseStyle: {
    icon: {
      "&.chakra-accordion__icon": {
        boxSize: "1em"
      }
    },
    button: {
      py: "3"
    },
    panel: {
      pt: "3"
    }
  }
};
var accordion_default = Accordion;

// node_modules/@chakra-ui/anatomy/dist/chunk-OA3DH5LS.mjs
function anatomy(name, map = {}) {
  let called = false;
  function assert() {
    if (!called) {
      called = true;
      return;
    }
    throw new Error(
      "[anatomy] .part(...) should only be called once. Did you mean to use .extend(...) ?"
    );
  }
  function parts2(...values) {
    assert();
    for (const part of values) {
      ;
      map[part] = toPart(part);
    }
    return anatomy(name, map);
  }
  function extend(...parts22) {
    for (const part of parts22) {
      if (part in map)
        continue;
      map[part] = toPart(part);
    }
    return anatomy(name, map);
  }
  function selectors() {
    const value = Object.fromEntries(
      Object.entries(map).map(([key, part]) => [key, part.selector])
    );
    return value;
  }
  function classnames() {
    const value = Object.fromEntries(
      Object.entries(map).map(([key, part]) => [key, part.className])
    );
    return value;
  }
  function toPart(part) {
    const el = ["container", "root"].includes(part != null ? part : "") ? [name] : [name, part];
    const attr = el.filter(Boolean).join("__");
    const className = `chakra-${attr}`;
    const partObj = {
      className,
      selector: `.${className}`,
      toString: () => part
    };
    return partObj;
  }
  const __type = {};
  return {
    parts: parts2,
    toPart,
    extend,
    selectors,
    classnames,
    get keys() {
      return Object.keys(map);
    },
    __type
  };
}

// node_modules/@chakra-ui/anatomy/dist/chunk-GSYRQO2U.mjs
var accordionAnatomy = anatomy("accordion").parts("root", "container", "button", "panel").extend("icon");
var alertAnatomy = anatomy("alert").parts("title", "description", "container").extend("icon", "spinner");
var avatarAnatomy = anatomy("avatar").parts("label", "badge", "container").extend("excessLabel", "group");
var breadcrumbAnatomy = anatomy("breadcrumb").parts("link", "item", "container").extend("separator");
var buttonAnatomy = anatomy("button").parts();
var checkboxAnatomy = anatomy("checkbox").parts("control", "icon", "container").extend("label");
var circularProgressAnatomy = anatomy("progress").parts("track", "filledTrack").extend("label");
var drawerAnatomy = anatomy("drawer").parts("overlay", "dialogContainer", "dialog").extend("header", "closeButton", "body", "footer");
var editableAnatomy = anatomy("editable").parts(
  "preview",
  "input",
  "textarea"
);
var formAnatomy = anatomy("form").parts(
  "container",
  "requiredIndicator",
  "helperText"
);
var formErrorAnatomy = anatomy("formError").parts("text", "icon");
var inputAnatomy = anatomy("input").parts(
  "addon",
  "field",
  "element",
  "group"
);
var listAnatomy = anatomy("list").parts("container", "item", "icon");
var menuAnatomy = anatomy("menu").parts("button", "list", "item").extend("groupTitle", "icon", "command", "divider");
var modalAnatomy = anatomy("modal").parts("overlay", "dialogContainer", "dialog").extend("header", "closeButton", "body", "footer");
var numberInputAnatomy = anatomy("numberinput").parts(
  "root",
  "field",
  "stepperGroup",
  "stepper"
);
var pinInputAnatomy = anatomy("pininput").parts("field");
var popoverAnatomy = anatomy("popover").parts("content", "header", "body", "footer").extend("popper", "arrow", "closeButton");
var progressAnatomy = anatomy("progress").parts(
  "label",
  "filledTrack",
  "track"
);
var radioAnatomy = anatomy("radio").parts(
  "container",
  "control",
  "label"
);
var selectAnatomy = anatomy("select").parts("field", "icon");
var sliderAnatomy = anatomy("slider").parts(
  "container",
  "track",
  "thumb",
  "filledTrack",
  "mark"
);
var statAnatomy = anatomy("stat").parts(
  "container",
  "label",
  "helpText",
  "number",
  "icon"
);
var switchAnatomy = anatomy("switch").parts(
  "container",
  "track",
  "thumb"
);
var tableAnatomy = anatomy("table").parts(
  "table",
  "thead",
  "tbody",
  "tr",
  "th",
  "td",
  "tfoot",
  "caption"
);
var tabsAnatomy = anatomy("tabs").parts(
  "root",
  "tab",
  "tablist",
  "tabpanel",
  "tabpanels",
  "indicator"
);
var tagAnatomy = anatomy("tag").parts(
  "container",
  "label",
  "closeButton"
);
var cardAnatomy = anatomy("card").parts(
  "container",
  "header",
  "body",
  "footer"
);

// src/components/alert.ts
import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
var { definePartsStyle, defineMultiStyleConfig } = createMultiStyleConfigHelpers(alertAnatomy.keys);
var baseStyle = definePartsStyle((props) => {
  const { status, colorScheme } = props;
  const shouldDefault = status == void 0 || status == "loading";
  const reservedColorSchemes = colorScheme == "red" || colorScheme == "orange" || colorScheme == "green" || colorScheme == "purple" || colorScheme == "blue";
  if (!reservedColorSchemes) {
    return {
      container: {
        alignItems: "start",
        borderRadius: "md",
        py: "3.5",
        gap: "3.5",
        lineHeight: "6"
      },
      icon: {
        m: "0"
      },
      title: {
        fontWeight: "semibold"
      },
      description: {
        mr: "2"
      }
    };
  }
  return {
    container: {
      alignItems: "start",
      borderRadius: "md",
      background: `${shouldDefault ? "info" : status}-bg`,
      py: "3.5",
      gap: "3.5",
      lineHeight: "6"
    },
    icon: {
      color: `${shouldDefault ? "info" : status}`,
      m: "0"
    },
    spinner: {
      color: `${status == "loading" && "info"}`,
      my: "0.5",
      mx: "0"
    },
    title: {
      fontWeight: "semibold"
    },
    description: {
      mr: "1.5"
    }
  };
});
var Alert = defineMultiStyleConfig({
  baseStyle
});

// src/components/avatar.ts
var Avatar = {
  defaultProps: {
    size: "sm"
  }
};
var avatar_default = Avatar;

// src/components/badge.ts
var Badge = {
  defaultProps: {
    colorScheme: "neutral"
  },
  baseStyle: {
    lineHeight: "base",
    rounded: "base"
  }
};
var badge_default = Badge;

// src/components/breadcrumb.ts
import { createMultiStyleConfigHelpers as createMultiStyleConfigHelpers2 } from "@chakra-ui/react";
var { definePartsStyle: definePartsStyle2, defineMultiStyleConfig: defineMultiStyleConfig2 } = createMultiStyleConfigHelpers2(breadcrumbAnatomy.keys);
var baseStyle2 = definePartsStyle2({
  link: {
    color: "chakra-subtle-text"
  },
  separator: {
    color: "chakra-subtle-text"
  }
});
var Breadcrumb = defineMultiStyleConfig2({ baseStyle: baseStyle2 });

// src/components/button.ts
import { defineStyle, defineStyleConfig } from "@chakra-ui/styled-system";
import { mode, transparentize } from "@chakra-ui/theme-tools";

// node_modules/@chakra-ui/utils/dist/chunk-Y5FGD7DM.mjs
function isFunction(value) {
  return typeof value === "function";
}
var __DEV__ = process.env.NODE_ENV !== "production";
var __TEST__ = process.env.NODE_ENV === "test";

// node_modules/@chakra-ui/utils/dist/chunk-M3TFMUOL.mjs
function runIfFn(valueOrFn, ...args) {
  return isFunction(valueOrFn) ? valueOrFn(...args) : valueOrFn;
}

// src/components/button.ts
var parts = ["button", "icon"];
var baseStyle3 = defineStyle({
  rounded: "full"
});
var variantGhost = defineStyle((props) => {
  const { colorScheme: c, theme: theme2 } = props;
  if (c === "gray" || c === null) {
    return {
      color: "neutral-fg",
      _hover: {
        bg: "neutral-bg"
      },
      _active: { bg: "neutral-bg-active" }
    };
  }
  if (c === "neutralInverse") {
    return {
      color: "chakra-inverse-text",
      borderColor: "whiteAlpha.300",
      _hover: {
        bg: "whiteAlpha.200"
      },
      _active: { bg: "whiteAlpha.300" },
      _dark: {
        borderColor: "blackAlpha.200",
        _hover: {
          bg: "blackAlpha.100"
        },
        _active: { bg: "blackAlpha.200" }
      }
    };
  }
  const darkHoverBg = transparentize(`${c}.200`, 0.12)(theme2);
  const darkActiveBg = transparentize(`${c}.200`, 0.24)(theme2);
  return {
    color: mode(`${c}.600`, `${c}.200`)(props),
    bg: "transparent",
    _hover: {
      bg: mode(`${c}.100`, darkHoverBg)(props)
    },
    _active: {
      bg: mode(`${c}.200`, darkActiveBg)(props)
    }
  };
});
var variantOutline = defineStyle((props) => {
  const { colorScheme: c } = props;
  const borderColor = "chakra-border-color";
  return {
    border: "1px solid",
    textDecoration: "none",
    "&:hover": {
      textDecoration: "none !important"
    },
    borderColor: "chakra-border-color",
    ".chakra-button__group[data-attached][data-orientation=horizontal] > &:not(:last-of-type)": { marginEnd: "-1px" },
    ".chakra-button__group[data-attached][data-orientation=vertical] > &:not(:last-of-type)": { marginBottom: "-1px" },
    ...runIfFn(variantGhost, props)
  };
});
var accessibleColorMap = {
  yellow: {
    bg: "yellow.300",
    color: "chakra-body-text",
    hoverBg: "yellow.400",
    activeBg: "yellow.500"
  },
  cyan: {
    bg: "cyan.300",
    color: "chakra-body-text",
    hoverBg: "cyan.400",
    activeBg: "cyan.500"
  },
  orange: {
    bg: "orange.300",
    color: "chakra-body-text",
    hoverBg: "orange.400",
    activeBg: "orange.500"
  },
  warning: {
    bg: "warning.300",
    color: "chakra-body-text",
    hoverBg: "warning.400",
    activeBg: "warning.500"
  }
};
var variantSolid = defineStyle((props) => {
  const { colorScheme: c } = props;
  if (c === "gray") {
    const bg2 = mode(`gray.100`, `whiteAlpha.200`)(props);
    return {
      bg: bg2,
      color: "chakra-body-text",
      _hover: {
        bg: mode(`gray.200`, `whiteAlpha.300`)(props),
        _disabled: {
          bg: bg2
        }
      },
      _active: { bg: mode(`gray.300`, `whiteAlpha.400`)(props) }
    };
  }
  if (c === "neutralInverse") {
    return {
      color: "chakra-body-text",
      bg: "whiteAlpha.600",
      _hover: {
        bg: "whiteAlpha.800"
      },
      _active: { bg: "whiteAlpha.900" },
      _dark: {
        bg: "blackAlpha.500",
        _hover: {
          bg: "blackAlpha.600"
        },
        _active: { bg: "blackAlpha.700" }
      }
    };
  }
  if (c === null) {
    const bg2 = mode(`primary.500`, `primary.200`)(props);
    return {
      bg: bg2,
      color: "chakra-inverse-text",
      _hover: {
        bg: mode(`primary.600`, `primary.300`)(props),
        _disabled: {
          bg: bg2
        }
      },
      _active: { bg: mode(`primary.700`, `primary.400`)(props) }
    };
  }
  const {
    bg = `${c}.500`,
    color = "white",
    hoverBg = `${c}.600`,
    activeBg = `${c}.700`
  } = accessibleColorMap[c] ?? {};
  const background2 = mode(bg, `${c}.200`)(props);
  return {
    bg: background2,
    color: mode(color, `blackAlpha.900`)(props),
    _hover: {
      bg: mode(hoverBg, `${c}.300`)(props),
      _disabled: {
        bg: background2
      }
    },
    _active: { bg: mode(activeBg, `${c}.400`)(props) }
  };
});
var variantLink = defineStyle((props) => {
  const { colorScheme: c } = props;
  if (c === "gray" || c === null) {
    return {
      color: mode(`primary.500`, `primary.200`)(props),
      lineHeight: "inherit",
      _hover: {
        textDecoration: "underline",
        _disabled: {
          textDecoration: "none"
        }
      },
      _active: {
        color: mode(`primary.700`, `primary.400`)(props)
      }
    };
  }
  return {
    padding: 0,
    height: "auto",
    lineHeight: "inherit",
    verticalAlign: "baseline",
    color: mode(`${c}.500`, `${c}.200`)(props),
    _hover: {
      textDecoration: "underline",
      _disabled: {
        textDecoration: "none"
      }
    },
    _active: {
      color: mode(`${c}.700`, `${c}.500`)(props)
    }
  };
});
var variantGhostColorOnHover = defineStyle((props) => {
  const { colorScheme: c, theme: theme2 } = props;
  const darkHoverBg = transparentize(`${c}.200`, 0.12)(theme2);
  const darkActiveBg = transparentize(`${c}.200`, 0.24)(theme2);
  return {
    color: "neutral-fg",
    bg: "transparent",
    _hover: {
      color: mode(`${c}.600`, `${c}.200`)(props),
      bg: mode(`${c}.100`, darkHoverBg)(props),
      _disabled: {
        bg: "none",
        color: "neutral-fg"
      }
    },
    _active: {
      color: mode(`${c}.600`, `${c}.200`)(props),
      bg: mode(`${c}.200`, darkActiveBg)(props),
      _disabled: {
        bg: "none",
        color: "neutral-fg"
      }
    }
  };
});
var variantNavigation = defineStyle((props) => {
  const { colorScheme: c, theme: theme2 } = props;
  const darkActiveBg = transparentize(`${c}.200`, 0.12)(theme2);
  if (c === null) {
    return {
      fontWeight: "medium",
      px: "2.5",
      justifyContent: "none",
      rounded: "md",
      color: "neutral-fg",
      _hover: {
        bg: "neutral-bg",
        _disabled: {
          bg: "none",
          color: "neutral-fg"
        }
      },
      _active: {
        color: "primary-fg",
        bg: "primary-bg",
        _disabled: {
          bg: "none",
          color: "neutral-fg"
        }
      }
    };
  }
  return {
    fontWeight: "medium",
    px: "2.5",
    justifyContent: "none",
    rounded: "md",
    color: "neutral-fg",
    _hover: {
      bg: "neutral-bg",
      _disabled: {
        bg: "none",
        color: "neutral-fg"
      }
    },
    _active: {
      color: mode(`${c}.600`, `${c}.200`)(props),
      bg: mode(`${c}.100`, darkActiveBg)(props),
      _disabled: {
        bg: "none",
        color: "neutral-fg"
      }
    }
  };
});
var variantNavigationStacked = defineStyle((props) => {
  const { colorScheme: c, theme: theme2 } = props;
  const darkActiveBg = transparentize(`${c}.200`, 0.12)(theme2);
  const darkActiveHoverBg = transparentize(`${c}.200`, 0.24)(theme2);
  if (c === null) {
    return {
      fontWeight: "medium",
      px: "2.5",
      textAlign: "center",
      justifyContent: "center",
      alignItems: "stretch",
      alignContent: "stretch",
      rounded: "md",
      color: "neutral-fg",
      flexDirection: "column",
      fontSize: "3xs",
      gap: "1",
      h: "14",
      minW: "16",
      maxW: "24",
      "& .chakra-icon": {
        boxSize: "1.375rem",
        alignSelf: "center"
      },
      _hover: {
        bg: "neutral-bg",
        _disabled: {
          bg: "none",
          color: "neutral-fg"
        }
      },
      _active: {
        color: mode("primary.600", "primary.200")(props),
        bg: mode("primary.100", darkActiveBg)(props),
        _hover: {
          bg: mode("primary.200", darkActiveHoverBg)(props)
        },
        _disabled: {
          bg: "none",
          color: "neutral-fg"
        }
      }
    };
  }
  return {
    fontWeight: "medium",
    px: "2.5",
    textAlign: "center",
    justifyContent: "center",
    alignItems: "stretch",
    alignContent: "stretch",
    rounded: "md",
    color: "neutral-fg",
    flexDirection: "column",
    fontSize: "3xs",
    gap: "1",
    h: "14",
    minW: "16",
    maxW: "24",
    "& .chakra-icon": {
      boxSize: "1.375rem",
      alignSelf: "center"
    },
    _hover: {
      bg: "neutral-bg",
      _disabled: {
        bg: "none",
        color: "neutral-fg"
      }
    },
    _active: {
      color: mode(`${c}.600`, `${c}.200`)(props),
      bg: mode(`${c}.100`, darkActiveBg)(props),
      _hover: {
        bg: mode(`${c}.200`, darkActiveHoverBg)(props)
      },
      _disabled: {
        bg: "none",
        color: "neutral-fg"
      }
    }
  };
});
var variants = {
  ghost: variantGhost,
  outline: variantOutline,
  solid: variantSolid,
  link: variantLink,
  ghostColorOnHover: variantGhostColorOnHover,
  navigation: variantNavigation,
  navigationStacked: variantNavigationStacked,
  toggle: {
    color: "neutral-fg",
    _hover: {
      bg: "neutral-bg",
      _disabled: {
        bg: "none",
        color: "neutral-fg"
      }
    },
    _active: {
      color: "primary-fg",
      bg: "primary-bg",
      _disabled: {
        bg: "none",
        color: "neutral-fg"
      }
    }
  },
  toggleOutline: {
    color: "neutral-fg",
    border: "1px solid",
    borderColor: "chakra-border-color",
    ".chakra-button__group[data-attached][data-orientation=horizontal] > &:not(:last-of-type)": { marginEnd: "-1px" },
    ".chakra-button__group[data-attached][data-orientation=vertical] > &:not(:last-of-type)": { marginBottom: "-1px" },
    _hover: {
      bg: "neutral-bg",
      _disabled: {
        bg: "none",
        color: "neutral-fg"
      }
    },
    _active: {
      color: "primary-fg",
      bg: "primary-bg",
      _disabled: {
        bg: "none",
        color: "neutral-fg"
      }
    }
  },
  pagination: {
    fontWeight: "medium",
    px: "1.5",
    color: "neutral-fg",
    _hover: {
      bg: "neutral-bg",
      _disabled: {
        bg: "none",
        color: "neutral-fg"
      }
    },
    _active: {
      color: "primary-fg",
      bg: "primary-bg",
      _disabled: {
        bg: "none",
        color: "neutral-fg"
      }
    }
  },
  toggleSquare: {
    color: "neutral-fg",
    rounded: "md",
    _hover: {
      bg: "neutral-bg",
      _disabled: {
        bg: "none",
        color: "neutral-fg"
      }
    },
    _active: {
      color: "primary-fg",
      bg: "primary-bg",
      _disabled: {
        bg: "none",
        color: "neutral-fg"
      }
    }
  },
  filter: {
    bg: "chakra-body-bg",
    px: "3",
    color: "neutral-fg",
    rounded: "md",
    border: "1px solid",
    borderColor: "chakra-border-color",
    _hover: {
      bg: "gray.100",
      _disabled: {
        bg: "none",
        color: "neutral-fg"
      }
    },
    _active: {
      bg: "primary.100",
      color: "primary-fg",
      rounded: "md",
      _disabled: {
        bg: "none",
        color: "gray.100"
      }
    }
  },
  ai: {
    transitionProperty: "background-position",
    color: "chakra-inverse-text",
    bgGradient: "linear(to-tr, purple, red)",
    backgroundSize: "250% 100%",
    _hover: {
      backgroundPosition: "100% 0%",
      _disabled: {
        bgGradient: "linear(to-tr, purple, red)",
        backgroundSize: "250% 100%"
      }
    },
    _active: {
      bgGradient: "linear(to-tr, purple.700, red.700)",
      backgroundPosition: "100% 0%",
      _disabled: {
        bgGradient: "linear(to-tr, purple, red)",
        backgroundSize: "250% 100%"
      }
    },
    _dark: {
      _hover: {
        bgGradient: "linear(to-tr, purple.300, red.300)",
        backgroundPosition: "100% 0%",
        _disabled: {
          bgGradient: "linear(to-tr, purple, red)",
          backgroundSize: "250% 100%"
        }
      },
      _active: {
        bgGradient: "linear(to-tr, purple.400, red.400)",
        backgroundPosition: "100% 0%",
        _disabled: {
          bgGradient: "linear(to-tr, purple, red)",
          backgroundSize: "250% 100%"
        }
      }
    }
  }
};
var Button = defineStyleConfig({
  ...parts,
  baseStyle: baseStyle3,
  variants,
  defaultProps: {
    colorScheme: null
  },
  sizes: {
    sm: {
      fontSize: "md"
    },
    lg: {
      fontSize: "md"
    }
  }
});

// src/components/card.ts
var Card = {
  sizes: {
    lg: {
      container: {
        rounded: "lg"
      }
    }
  },
  variants: {
    filled: {
      container: {
        bg: "neutral-color.50"
      }
    },
    flat: {
      container: {
        shadow: "sm"
      }
    },
    outlineRaised: {
      container: {
        shadow: "sm",
        borderWidth: "1px",
        borderColor: "chakra-border-color"
      }
    }
  }
};

// src/components/checkbox.ts
var Checkbox = {
  baseStyle: {
    control: {
      borderColor: "border-color-a11y",
      bg: "chakra-body-bg",
      _disabled: {
        bg: "neutral-color.200",
        borderColor: "transparent"
      },
      _checked: {
        _disabled: {
          bg: "neutral-color.200",
          borderColor: "transparent",
          color: "chakra-subtle-text"
        }
      }
    }
  },
  defaultProps: {
    colorScheme: "primary",
    size: "lg"
  },
  sizes: {
    lg: {
      label: { fontSize: "md" }
    },
    xl: {
      control: {
        boxSize: "6"
      },
      icon: {
        fontSize: "xs"
      }
    }
  },
  variants: {
    round: {
      control: {
        rounded: "full"
      }
    }
  }
};
var checkbox_default = Checkbox;

// src/components/close-button.ts
var CloseButton = {
  baseStyle: {
    rounded: "full",
    opacity: "0.75",
    _hover: { opacity: "1" }
  },
  sizes: {
    sm: { fontSize: "3xs" }
  }
};

// src/components/code.ts
import {
  defineCssVars,
  defineStyle as defineStyle2,
  defineStyleConfig as defineStyleConfig2
} from "@chakra-ui/styled-system";
import { transparentize as transparentize2 } from "@chakra-ui/theme-tools";
var vars = defineCssVars("badge", ["bg", "color", "shadow"]);
var variantSubtle = defineStyle2((props) => {
  const { colorScheme: c, theme: theme2 } = props;
  const darkBg = transparentize2(`${c}.200`, 0.16)(theme2);
  return {
    [vars.bg.variable]: `colors.${c}.50`,
    [vars.color.variable]: `colors.${c}.900`,
    _dark: {
      [vars.bg.variable]: darkBg,
      [vars.color.variable]: `colors.${c}.200`
    }
  };
});
var variants2 = {
  subtle: variantSubtle
};
var Code = defineStyleConfig2({
  variants: variants2,
  defaultProps: {
    variant: "subtle",
    colorScheme: "neutral"
  }
});

// src/components/container.ts
var Container = {
  baseStyle: {
    p: "0"
  }
};
var container_default = Container;

// src/components/divider.ts
var Divider = {
  baseStyle: {
    opacity: "1"
  }
};
var divider_default = Divider;

// src/components/drawer.ts
var Drawer = {
  defaultProps: {
    size: "md"
  },
  baseStyle: {
    header: {
      py: "5",
      px: "7"
    },
    body: {
      px: "7"
    },
    footer: {
      py: "5",
      px: "7",
      gap: "2"
    },
    closeButton: {
      top: "3",
      insetEnd: "3"
    },
    overlay: {
      bg: "blackAlpha.500"
    }
  }
};
var drawer_default = Drawer;

// src/components/form.ts
var Form = {
  parts: ["helperText"],
  baseStyle: (props) => ({
    helperText: {
      color: "chakra-subtle-text"
    }
  })
};
var form_default = Form;

// src/components/form-error.ts
import { createMultiStyleConfigHelpers as createMultiStyleConfigHelpers3 } from "@chakra-ui/styled-system";
var { definePartsStyle: definePartsStyle3, defineMultiStyleConfig: defineMultiStyleConfig3 } = createMultiStyleConfigHelpers3(formErrorAnatomy.keys);
var FormError = defineMultiStyleConfig3({
  baseStyle: {
    icon: {
      "&.chakra-form__error-icon": {
        boxSize: "1em"
      }
    }
  }
});

// src/components/form-label.ts
var FormLabel = {
  baseStyle: {
    color: "neutral-fg"
  },
  variants: {
    small: { fontSize: "sm", mb: "1" }
  }
};
var form_label_default = FormLabel;

// src/components/heading.ts
import { defineStyleConfig as defineStyleConfig3 } from "@chakra-ui/react";
var Heading = defineStyleConfig3({
  baseStyle: {
    fontWeight: "semibold"
  },
  sizes: {
    sm: {
      fontSize: "lg"
    }
  },
  variants: {
    section: {
      color: "chakra-subtle-text",
      textTransform: "uppercase",
      fontSize: "sm"
    }
  }
});

// src/components/input.ts
var Input = {
  baseStyle: {
    element: {
      color: "neutral-fg",
      minW: "10",
      w: "auto",
      px: "1",
      gap: "1"
    }
  },
  sizes: {
    sm: {
      field: { fontSize: "md", rounded: "md" },
      addon: { fontSize: "md", rounded: "md" }
    },
    lg: { field: { fontSize: "md" }, addon: { fontSize: "md" } }
  },
  variants: {
    outline: {
      field: {
        borderColor: "border-color-a11y",
        bg: "chakra-body-bg",
        _hover: {
          borderColor: "neutral-color.600"
        },
        _focusVisible: {
          borderColor: "primary.500",
          boxShadow: "0 0 0 1px var(--colors-primary-500)",
          _dark: {
            borderColor: "primary.300",
            boxShadow: "0 0 0 1px var(--colors-primary-300)"
          }
        },
        _readOnly: {
          borderColor: "chakra-border-color"
        }
      },
      addon: {
        bg: "chakra-subtle-bg",
        borderColor: "border-color-a11y"
      }
    },
    filled: {
      field: {
        bg: "neutral-color.100",
        _hover: {
          bg: "neutral-color.200"
        },
        _focusVisible: {
          borderColor: "primary.500",
          _dark: {
            borderColor: "primary.300"
          }
        }
      }
    },
    flushed: {
      field: {
        borderColor: "border-color-a11y",
        _hover: {
          borderColor: "neutral-color.600"
        },
        _focusVisible: {
          borderColor: "primary.500",
          boxShadow: "0 1px 0 0 var(--colors-primary-500)",
          _dark: {
            borderColor: "primary.300",
            boxShadow: "0 1px 0 0 var(--colors-primary-300)"
          },
          _hover: {
            borderColor: "primary.500"
          }
        }
      }
    }
  },
  defaultProps: {
    focusBorderColor: "primary.500"
  }
};

// src/components/link.ts
var Link = {
  baseStyle: {
    color: "primary"
  }
};
var link_default = Link;

// src/components/list.ts
var List = {
  baseStyle: {
    icon: {
      color: "chakra-subtle-text",
      verticalAlign: "middle",
      mt: "-0.5"
    }
  }
};
var list_default = List;

// src/components/menu.ts
import { createMultiStyleConfigHelpers as createMultiStyleConfigHelpers4 } from "@chakra-ui/react";
var { definePartsStyle: definePartsStyle4, defineMultiStyleConfig: defineMultiStyleConfig4 } = createMultiStyleConfigHelpers4(menuAnatomy.keys);
var baseStyle4 = definePartsStyle4({
  button: {},
  list: {
    shadow: "md",
    _dark: {
      shadow: "dark-lg"
    }
  },
  item: {
    py: "2",
    px: "3.5",
    ".chakra-menu__icon-wrapper": {
      fontSize: "inherit",
      color: "neutral-fg"
    }
  },
  groupTitle: {
    color: "chakra-subtle-text",
    textTransform: "uppercase",
    mx: "none",
    my: "none",
    py: "2",
    px: "3.5"
  },
  command: {},
  divider: {}
});
var Menu = defineMultiStyleConfig4({ baseStyle: baseStyle4 });
var menu_default = Menu;

// src/components/modal.ts
var Modal = {
  baseStyle: {
    dialogContainer: {},
    dialog: {
      rounded: "lg"
    },
    header: {
      py: "5",
      px: "7"
    },
    body: {
      px: "7"
    },
    footer: {
      py: "5",
      px: "7",
      gap: "2"
    },
    closeButton: {
      top: "3",
      insetEnd: "3"
    },
    overlay: {
      bg: "blackAlpha.500"
    }
  },
  sizes: {
    max: {
      dialog: {
        maxW: "100vw",
        minH: "full",
        my: "0",
        rounded: ["none", "lg"]
      },
      dialogContainer: {
        p: ["none", "4"]
      }
    },
    full: {
      dialog: {
        rounded: "none"
      }
    }
  }
};
var modal_default = Modal;

// src/components/number-input.ts
import { createMultiStyleConfigHelpers as createMultiStyleConfigHelpers5 } from "@chakra-ui/react";
var { definePartsStyle: definePartsStyle5, defineMultiStyleConfig: defineMultiStyleConfig5 } = createMultiStyleConfigHelpers5(numberInputAnatomy.keys);
var baseStyle5 = definePartsStyle5({
  stepper: {
    "& svg": {
      boxSize: "1em"
    }
  }
});
var outline = definePartsStyle5({
  field: {
    borderColor: "border-color-a11y",
    bg: "chakra-body-bg",
    _hover: {
      borderColor: "neutral-color.600"
    },
    _focusVisible: {
      borderColor: "primary.500",
      boxShadow: "0 0 0 1px var(--colors-primary-500)",
      _dark: {
        borderColor: "primary.300",
        boxShadow: "0 0 0 1px var(--colors-primary-300)"
      }
    }
  }
});
var NumberInput = defineMultiStyleConfig5({
  baseStyle: baseStyle5,
  variants: { outline }
});

// src/components/progress.ts
import {
  createMultiStyleConfigHelpers as createMultiStyleConfigHelpers6,
  defineStyle as defineStyle3
} from "@chakra-ui/styled-system";
import { generateStripe, getColor, mode as mode2 } from "@chakra-ui/theme-tools";
var { defineMultiStyleConfig: defineMultiStyleConfig6, definePartsStyle: definePartsStyle6 } = createMultiStyleConfigHelpers6(progressAnatomy.keys);
var filledStyle = defineStyle3((props) => {
  const { colorScheme: c, theme: t, isIndeterminate, hasStripe } = props;
  const stripeStyle = mode2(
    generateStripe(),
    generateStripe("1rem", "rgba(0,0,0,0.1)")
  )(props);
  const bgColor = mode2(`${c}.500`, `${c}.200`)(props);
  const gradient = `linear-gradient(
    to right,
    ${getColor(t, bgColor)} 0%,
    ${getColor(t, bgColor)} 50%,
    ${getColor(t, bgColor)} 100%
  )`;
  const addStripe = !isIndeterminate && hasStripe;
  return {
    ...addStripe && stripeStyle,
    ...isIndeterminate ? { bgImage: gradient } : { bgColor }
  };
});
var baseStyleLabel = defineStyle3({
  lineHeight: "1",
  fontSize: "0.25em",
  fontWeight: "bold",
  color: "white",
  borderRadius: "full"
});
var baseStyleTrack = defineStyle3((props) => {
  return {
    bg: "neutral-color.100",
    borderRadius: "full"
  };
});
var baseStyleFilledTrack = defineStyle3((props) => {
  return {
    transitionProperty: "common",
    transitionDuration: "slow",
    ...filledStyle(props),
    borderRadius: "full",
    _indeterminate: {
      animationDuration: "2s"
    }
  };
});
var baseStyle6 = definePartsStyle6((props) => ({
  label: baseStyleLabel,
  filledTrack: baseStyleFilledTrack(props),
  track: baseStyleTrack(props)
}));
var variants3 = {
  ai: {
    filledTrack: {
      bgGradient: "linear(to-r, purple, red)"
    }
  }
};
var Progress = defineMultiStyleConfig6({
  baseStyle: baseStyle6,
  variants: variants3,
  defaultProps: {
    colorScheme: "primary"
  }
});

// src/components/radio.ts
var Radio = {
  baseStyle: {
    control: {
      borderColor: "border-color-a11y",
      bg: "chakra-body-bg",
      _disabled: {
        bg: "neutral-color.200",
        borderColor: "transparent"
      },
      _checked: {
        _disabled: {
          bg: "neutral-color.200",
          borderColor: "transparent",
          color: "chakra-subtle-text"
        }
      }
    }
  },
  defaultProps: {
    colorScheme: "primary",
    size: "lg"
  },
  sizes: {
    lg: {
      label: { fontSize: "md" }
    },
    xl: {
      control: {
        boxSize: "6"
      }
    }
  }
};
var radio_default = Radio;

// src/components/select.ts
var Select = {
  sizes: {
    sm: { field: { fontSize: "md", rounded: "md" } },
    lg: { field: { fontSize: "md" } }
  },
  variants: {
    outline: {
      field: {
        borderColor: "border-color-a11y",
        bg: "chakra-body-bg",
        _hover: {
          borderColor: "neutral-color.600"
        },
        _focusVisible: {
          borderColor: "primary.500",
          boxShadow: "0 0 0 1px var(--colors-primary-500)",
          _dark: {
            borderColor: "primary.300",
            boxShadow: "0 0 0 1px var(--colors-primary-300)"
          }
        }
      }
    },
    filled: {
      field: {
        _focusVisible: {
          borderColor: "primary.500",
          _dark: {
            borderColor: "primary.300"
          }
        }
      }
    }
  }
};
var select_default = Select;

// src/components/skeleton.ts
import { cssVar, defineStyle as defineStyle4, defineStyleConfig as defineStyleConfig4 } from "@chakra-ui/react";
var $startColor = cssVar("skeleton-start-color");
var $endColor = cssVar("skeleton-end-color");
var baseStyle7 = defineStyle4({
  rounded: "md",
  _light: {
    [$startColor.variable]: "colors.blackAlpha.100",
    [$endColor.variable]: "colors.blackAlpha.200"
  },
  _dark: {
    [$startColor.variable]: "colors.whiteAlpha.100",
    [$endColor.variable]: "colors.whiteAlpha.200"
  }
});
var Skeleton = defineStyleConfig4({ baseStyle: baseStyle7 });

// src/components/slider.ts
var Slider = {
  defaultProps: {
    colorScheme: "primary"
  },
  baseStyle: {
    track: {
      bg: "neutral-color.200"
    },
    thumb: {
      outline: "1px solid",
      outlineColor: "border-color-a11y"
    }
  }
};
var slider_default = Slider;

// src/components/spinner.ts
var Spinner = {};
var spinner_default = Spinner;

// src/components/stepper.ts
var Stepper = {
  defaultProps: {
    colorScheme: "primary"
  }
};
var stepper_default = Stepper;

// src/components/switch.ts
import { createMultiStyleConfigHelpers as createMultiStyleConfigHelpers7, defineStyle as defineStyle5 } from "@chakra-ui/react";
var { definePartsStyle: definePartsStyle7, defineMultiStyleConfig: defineMultiStyleConfig7 } = createMultiStyleConfigHelpers7(switchAnatomy.keys);
var baseStyleTrack2 = defineStyle5((props) => {
  const { colorScheme: c } = props;
  return {
    bg: `border-color-a11y`,
    _checked: {
      bg: `${c}.500`
    },
    _dark: {
      bg: `whiteAlpha.400`,
      _checked: {
        bg: `${c}.200`
      }
    }
  };
});
var baseStyle8 = definePartsStyle7((props) => ({
  container: {},
  thumb: {},
  track: baseStyleTrack2(props)
}));
var defaultProps = {
  colorScheme: "success"
};
var Switch = defineMultiStyleConfig7({ baseStyle: baseStyle8, defaultProps });
var switch_default = Switch;

// src/components/table.ts
var Table = {
  baseStyle: {
    tr: {
      th: {
        fontSize: "sm",
        textTransform: "none",
        letterSpacing: "normal",
        fontWeight: "semibold",
        color: "neutral-fg"
      },
      td: {
        fontSize: "md"
      },
      "&[href]:hover": {
        td: {
          backgroundColor: "neutral-color.50"
        }
      }
    }
  },
  defaultProps: {
    colorScheme: "neutral"
  },
  variants: {
    striped: {
      tr: {
        td: {
          border: "none"
        }
      }
    }
  },
  sizes: {
    sm: {
      th: { py: "2.5" }
    },
    md: {
      th: { py: "3" }
    }
  }
};
var table_default = Table;

// src/components/tabs.ts
import { createMultiStyleConfigHelpers as createMultiStyleConfigHelpers8, theme } from "@chakra-ui/react";
var { definePartsStyle: definePartsStyle8, defineMultiStyleConfig: defineMultiStyleConfig8 } = createMultiStyleConfigHelpers8(tabsAnatomy.keys);
var baseStyle9 = definePartsStyle8({
  tablist: {
    color: "neutral-fg"
  },
  tab: {
    fontWeight: "semibold"
  },
  tabpanel: { pt: "6", pb: "0", px: "0" }
});
var softRounded = definePartsStyle8((props) => {
  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
  return {
    ...(_d = (_c = (_b = (_a = theme) == null ? void 0 : _a.components) == null ? void 0 : _b.Tabs) == null ? void 0 : _c.variants) == null ? void 0 : _d["soft-rounded"](props),
    tab: {
      ...(_h = (_g = (_f = (_e = theme) == null ? void 0 : _e.components) == null ? void 0 : _f.Tabs) == null ? void 0 : _g.variants) == null ? void 0 : _h["soft-rounded"](props).tab,
      color: "neutral-fg",
      _selected: {
        ...(_l = (_k = (_j = (_i = theme) == null ? void 0 : _i.components) == null ? void 0 : _j.Tabs) == null ? void 0 : _k.variants) == null ? void 0 : _l["soft-rounded"](props).tab._selected
      }
    }
  };
});
var solidRounded = definePartsStyle8((props) => {
  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
  return {
    ...(_d = (_c = (_b = (_a = theme) == null ? void 0 : _a.components) == null ? void 0 : _b.Tabs) == null ? void 0 : _c.variants) == null ? void 0 : _d["solid-rounded"](props),
    tab: {
      ...(_h = (_g = (_f = (_e = theme) == null ? void 0 : _e.components) == null ? void 0 : _f.Tabs) == null ? void 0 : _g.variants) == null ? void 0 : _h["solid-rounded"](props).tab,
      color: "neutral-fg",
      _selected: {
        ...(_l = (_k = (_j = (_i = theme) == null ? void 0 : _i.components) == null ? void 0 : _j.Tabs) == null ? void 0 : _k.variants) == null ? void 0 : _l["solid-rounded"](props).tab._selected,
        color: "white"
      }
    }
  };
});
var variants4 = {
  "soft-rounded": softRounded,
  "solid-rounded": solidRounded
};
var Tabs = defineMultiStyleConfig8({
  baseStyle: baseStyle9,
  variants: variants4,
  defaultProps: {
    colorScheme: "primary"
  }
});

// src/components/tag.ts
import { createMultiStyleConfigHelpers as createMultiStyleConfigHelpers9 } from "@chakra-ui/react";
var { definePartsStyle: definePartsStyle9, defineMultiStyleConfig: defineMultiStyleConfig9 } = createMultiStyleConfigHelpers9(tagAnatomy.keys);
var baseStyle10 = definePartsStyle9({
  container: {
    fontWeight: "normal",
    "& .chakra-icon": {
      boxSize: "1.25em"
    }
  },
  closeButton: {
    w: "auto",
    h: "auto",
    fontSize: "1em",
    "& .chakra-icon": {
      boxSize: "1.25em"
    }
  }
});
var sizes2 = {
  sm: {
    container: {
      fontSize: "sm",
      px: "1",
      rounded: "base",
      minH: "1.125rem"
    }
  },
  md: {
    container: {
      fontSize: "md",
      px: "1.5",
      rounded: "base",
      minH: "5"
    }
  },
  lg: {
    container: {
      fontSize: "md",
      px: "2",
      rounded: "base",
      minH: "6"
    }
  }
};
var Tag = defineMultiStyleConfig9({
  baseStyle: baseStyle10,
  sizes: sizes2,
  defaultProps: {
    colorScheme: "neutral"
  }
});

// src/components/text.ts
var Text = {
  variants: {
    strong: {
      fontWeight: "semibold"
    },
    subtle: {
      color: "chakra-subtle-text"
    },
    small: {
      color: "chakra-subtle-text",
      fontSize: "sm"
    },
    tiny: {
      color: "chakra-subtle-text",
      fontSize: "xs"
    },
    large: {
      fontSize: "lg"
    }
  }
};
var text_default = Text;

// src/components/textarea.ts
var Textarea = {
  sizes: {
    sm: { fontSize: "md", rounded: "md" },
    lg: { fontSize: "md" }
  },
  variants: {
    outline: {
      borderColor: "border-color-a11y",
      bg: "chakra-body-bg",
      _hover: {
        borderColor: "neutral-color.600"
      },
      _focusVisible: {
        borderColor: "primary.500",
        boxShadow: "0 0 0 1px var(--colors-primary-500)",
        _dark: {
          borderColor: "primary.300",
          boxShadow: "0 0 0 1px var(--colors-primary-300)"
        }
      },
      _readOnly: {
        borderColor: "chakra-border-color"
      }
    }
  }
};
var textarea_default = Textarea;

// src/components/icon.ts
import { defineStyle as defineStyle6, defineStyleConfig as defineStyleConfig5 } from "@chakra-ui/styled-system";
import { mode as mode3, transparentize as transparentize3 } from "@chakra-ui/theme-tools";
var baseStyle11 = defineStyle6((props) => {
  const { color: c, layerStyle: ls, boxSize: bs } = props;
  const stripColorRange = (c == null ? void 0 : c.replace(/\..*/, "")) !== void 0 ? c == null ? void 0 : c.replace(/\..*/, "") : c;
  const stylesBasedOnLayerStyle = {
    "icon.solid": {
      bgColor: mode3(
        `${stripColorRange}.500`,
        `${stripColorRange}.200`
      )(props),
      color: "chakra-inverse-text"
    },
    "icon.subtle": {
      bgColor: mode3(
        `${stripColorRange}.100`,
        transparentize3(stripColorRange + ".200", 0.12)
      )(props),
      color: mode3(
        `${stripColorRange}.600`,
        `${stripColorRange}.200`
      )(props)
    }
  };
  const stylesBasedOnSize = {
    "icon.3xs": { rounded: "sm", padding: 0.5 },
    "icon.2xs": { rounded: "base", padding: 0.5 },
    "icon.xs": { rounded: "base", padding: 0.5 },
    "icon.sm": { rounded: "base", padding: 1 },
    "icon.md": { rounded: "base", padding: 1 },
    "icon.lg": { rounded: "md", padding: 1.5 },
    "icon.xl": { rounded: "md", padding: 1.5 },
    "icon.2xl": { rounded: "md", padding: 2 },
    "icon.3xl": { rounded: "lg", padding: 2.5 },
    "icon.4xl": { rounded: "lg", padding: 3 },
    "icon.5xl": { rounded: "xl", padding: 3.5 },
    "icon.6xl": { rounded: "xl", padding: 4 },
    "icon.7xl": { rounded: "2xl", padding: 5 },
    "icon.8xl": { rounded: "2xl", padding: 6 }
  };
  return {
    ...stylesBasedOnSize[bs],
    ...stylesBasedOnLayerStyle[ls],
    boxSize: "icon.default",
    "& path": {
      fill: "currentColor"
    }
  };
});
var Icon = defineStyleConfig5({
  baseStyle: baseStyle11
});

// src/components/index.ts
var components = {
  Accordion: accordion_default,
  Alert,
  Avatar: avatar_default,
  Badge: badge_default,
  Breadcrumb,
  Button,
  Card,
  Checkbox: checkbox_default,
  CloseButton,
  Code,
  Container: container_default,
  Divider: divider_default,
  Drawer: drawer_default,
  Form: form_default,
  FormError,
  FormLabel: form_label_default,
  Heading,
  Icon,
  Input,
  Link: link_default,
  List: list_default,
  Menu: menu_default,
  Modal: modal_default,
  NumberInput,
  Progress,
  Radio: radio_default,
  Select: select_default,
  Skeleton,
  Slider: slider_default,
  Spinner: spinner_default,
  Stepper: stepper_default,
  Switch: switch_default,
  Table: table_default,
  Tabs,
  Tag,
  Textarea: textarea_default,
  Text: text_default
};
var components_default = components;

// src/styles.ts
var styles = {
  global: {
    body: {
      fontSize: "md"
    },
    strong: {
      fontWeight: "semibold"
    }
  }
};
var styles_default = styles;

// src/layer-styles.ts
var layerStyles = {
  section: {
    topbar: {
      bg: "chakra-body-bg",
      px: "4",
      h: "14",
      shadow: "base",
      zIndex: "sticky",
      overflow: "hidden"
    },
    main: {
      w: "full",
      bg: "chakra-body-bg",
      pt: ["5", "6", "8"],
      px: ["6", "8", "10"],
      pb: ["7", "9", "12"]
    },
    sidebar: {
      bg: "chakra-subtle-bg",
      padding: "5",
      bgGradient: "linear(to-r, transparent calc(100% - 4px), rgba(0,0,0,0.01) calc(100% - 1px),  blackAlpha.100)"
    }
  },
  interactive: {
    raise: {
      cursor: "pointer",
      transitionProperty: "common",
      transitionDuration: "normal",
      _hover: { shadow: "md" },
      _active: { shadow: "base" }
    },
    fill: {
      cursor: "pointer",
      transitionProperty: "common",
      transitionDuration: "normal",
      _hover: {
        bgGradient: "linear(neutral-color.50, neutral-color.50)"
      },
      _active: {
        bgGradient: "linear(neutral-color.100, neutral-color.100)"
      }
    }
  },
  bg: {
    powerGradient: {
      backgroundImage: "https://delivery-sitecore.sitecorecontenthub.cloud/api/public/content/bg-power-gradient"
    },
    subtleGradient: {
      background: "linear-gradient(51deg,#dedbff -10%,#f9f9f9 40%,#f9f9f9 70%,#ffcfcf 120%)"
    }
  },
  menuButtonIcon: {
    mx: "-1.5",
    p: "0.5"
  },
  toggleGroup: {
    border: "1px solid",
    borderColor: "chakra-border-color",
    rounded: "full",
    p: "0.1875rem",
    gap: "1",
    ".chakra-button": {
      m: "0"
    }
  },
  toggleGroupSquare: {
    border: "1px solid",
    borderColor: "chakra-border-color",
    rounded: "md",
    p: "0.1875rem",
    gap: "1",
    ".chakra-button": {
      m: "0"
    }
  },
  actionBar: {
    bg: "primary",
    p: "3",
    m: "7",
    rounded: "lg",
    shadow: "lg",
    maxW: "4xl",
    display: "inline-flex",
    flexWrap: "wrap",
    alignItems: "center",
    columnGap: "8",
    rowGap: "2",
    zIndex: "banner"
  }
};
var layer_styles_default = layerStyles;

// node_modules/@ctrl/tinycolor/dist/module/util.js
function bound01(n, max) {
  if (isOnePointZero(n)) {
    n = "100%";
  }
  const isPercent = isPercentage(n);
  n = max === 360 ? n : Math.min(max, Math.max(0, parseFloat(n)));
  if (isPercent) {
    n = parseInt(String(n * max), 10) / 100;
  }
  if (Math.abs(n - max) < 1e-6) {
    return 1;
  }
  if (max === 360) {
    n = (n < 0 ? n % max + max : n % max) / parseFloat(String(max));
  } else {
    n = n % max / parseFloat(String(max));
  }
  return n;
}
function clamp01(val) {
  return Math.min(1, Math.max(0, val));
}
function isOnePointZero(n) {
  return typeof n === "string" && n.indexOf(".") !== -1 && parseFloat(n) === 1;
}
function isPercentage(n) {
  return typeof n === "string" && n.indexOf("%") !== -1;
}
function boundAlpha(a) {
  a = parseFloat(a);
  if (isNaN(a) || a < 0 || a > 1) {
    a = 1;
  }
  return a;
}
function convertToPercentage(n) {
  if (Number(n) <= 1) {
    return `${Number(n) * 100}%`;
  }
  return n;
}
function pad2(c) {
  return c.length === 1 ? "0" + c : String(c);
}

// node_modules/@ctrl/tinycolor/dist/module/conversion.js
function rgbToRgb(r, g, b) {
  return {
    r: bound01(r, 255) * 255,
    g: bound01(g, 255) * 255,
    b: bound01(b, 255) * 255
  };
}
function rgbToHsl(r, g, b) {
  r = bound01(r, 255);
  g = bound01(g, 255);
  b = bound01(b, 255);
  const max = Math.max(r, g, b);
  const min = Math.min(r, g, b);
  let h = 0;
  let s = 0;
  const l = (max + min) / 2;
  if (max === min) {
    s = 0;
    h = 0;
  } else {
    const d = max - min;
    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
    switch (max) {
      case r:
        h = (g - b) / d + (g < b ? 6 : 0);
        break;
      case g:
        h = (b - r) / d + 2;
        break;
      case b:
        h = (r - g) / d + 4;
        break;
      default:
        break;
    }
    h /= 6;
  }
  return { h, s, l };
}
function hue2rgb(p, q, t) {
  if (t < 0) {
    t += 1;
  }
  if (t > 1) {
    t -= 1;
  }
  if (t < 1 / 6) {
    return p + (q - p) * (6 * t);
  }
  if (t < 1 / 2) {
    return q;
  }
  if (t < 2 / 3) {
    return p + (q - p) * (2 / 3 - t) * 6;
  }
  return p;
}
function hslToRgb(h, s, l) {
  let r;
  let g;
  let b;
  h = bound01(h, 360);
  s = bound01(s, 100);
  l = bound01(l, 100);
  if (