@liner-fe/prism 2.6.25 → 2.6.31

package/lib/index.js

@@ -39,7 +39,7 @@ __export(index_exports, {
   DefaultButton: () => DefaultButton,
   Display: () => Display,
   Heading: () => Heading,
-  Icon: () => Icon,
+  Icon: () => Icon2,
   IconButton: () => IconButton,
   Label: () => Label,
   List: () => List,
@@ -13690,7 +13690,7 @@ var arrayToStyleObject = /* @__PURE__ */ __name((colorKeys, style, prefix) => co
 var isEmptyObject = /* @__PURE__ */ __name((obj) => Object.getOwnPropertyNames(obj).length === 0, "isEmptyObject");
 
 // src/components/Button/index.tsx
-var import_react2 = require("react");
+var import_react = require("react");
 
 // src/components/Button/style.module.scss
 var style_module_default = {
@@ -13722,220 +13722,12 @@ var style_module_default = {
 };
 
 // src/components/Button/index.tsx
-var import_cva3 = require("cva");
-var import_clsx2 = __toESM(require("clsx"));
-
-// src/components/Icon/index.tsx
-var import_cva = require("cva");
+var import_cva2 = require("cva");
 var import_clsx = __toESM(require("clsx"));
-var import_react = require("react");
-
-// src/components/Icon/style.module.scss
-var style_module_default2 = {
-  "icon": "_icon_1g8e0_1",
-  "neutral-label-primary": "_neutral-label-primary_1g8e0_8",
-  "neutral-label-secondary": "_neutral-label-secondary_1g8e0_13",
-  "neutral-label-tertiary": "_neutral-label-tertiary_1g8e0_18",
-  "neutral-label-quaternary": "_neutral-label-quaternary_1g8e0_23",
-  "neutral-label-static-primary": "_neutral-label-static-primary_1g8e0_28",
-  "neutral-label-static-secondary": "_neutral-label-static-secondary_1g8e0_33",
-  "inverse-label-primary": "_inverse-label-primary_1g8e0_38",
-  "inverse-label-secondary": "_inverse-label-secondary_1g8e0_43",
-  "inverse-label-tertiary": "_inverse-label-tertiary_1g8e0_48",
-  "inverse-label-quaternary": "_inverse-label-quaternary_1g8e0_53",
-  "inverse-label-static-primary": "_inverse-label-static-primary_1g8e0_58",
-  "inverse-label-static-secondary": "_inverse-label-static-secondary_1g8e0_63",
-  "brand-label-primary": "_brand-label-primary_1g8e0_68",
-  "brand-label-secondary": "_brand-label-secondary_1g8e0_73",
-  "function-label-positive": "_function-label-positive_1g8e0_78",
-  "function-label-negative": "_function-label-negative_1g8e0_83",
-  "function-label-caution": "_function-label-caution_1g8e0_88",
-  "accent-yellow": "_accent-yellow_1g8e0_93",
-  "accent-mint": "_accent-mint_1g8e0_98",
-  "accent-cyan": "_accent-cyan_1g8e0_103",
-  "accent-purple": "_accent-purple_1g8e0_108",
-  "accent-pink": "_accent-pink_1g8e0_113",
-  "fill-neutral-label-primary": "_fill-neutral-label-primary_1g8e0_118",
-  "fill-neutral-label-secondary": "_fill-neutral-label-secondary_1g8e0_122",
-  "fill-neutral-label-tertiary": "_fill-neutral-label-tertiary_1g8e0_126",
-  "fill-neutral-label-quaternary": "_fill-neutral-label-quaternary_1g8e0_130",
-  "fill-neutral-label-static-primary": "_fill-neutral-label-static-primary_1g8e0_134",
-  "fill-neutral-label-static-secondary": "_fill-neutral-label-static-secondary_1g8e0_138",
-  "fill-inverse-label-primary": "_fill-inverse-label-primary_1g8e0_142",
-  "fill-inverse-label-secondary": "_fill-inverse-label-secondary_1g8e0_146",
-  "fill-inverse-label-tertiary": "_fill-inverse-label-tertiary_1g8e0_150",
-  "fill-inverse-label-quaternary": "_fill-inverse-label-quaternary_1g8e0_154",
-  "fill-inverse-label-static-primary": "_fill-inverse-label-static-primary_1g8e0_158",
-  "fill-inverse-label-static-secondary": "_fill-inverse-label-static-secondary_1g8e0_162",
-  "fill-brand-label-primary": "_fill-brand-label-primary_1g8e0_166",
-  "fill-brand-label-secondary": "_fill-brand-label-secondary_1g8e0_170",
-  "fill-function-label-positive": "_fill-function-label-positive_1g8e0_174",
-  "fill-function-label-negative": "_fill-function-label-negative_1g8e0_178",
-  "fill-function-label-caution": "_fill-function-label-caution_1g8e0_182",
-  "fill-accent-yellow": "_fill-accent-yellow_1g8e0_186",
-  "fill-accent-mint": "_fill-accent-mint_1g8e0_190",
-  "fill-accent-cyan": "_fill-accent-cyan_1g8e0_194",
-  "fill-accent-purple": "_fill-accent-purple_1g8e0_198",
-  "fill-accent-pink": "_fill-accent-pink_1g8e0_202"
-};
-
-// src/constants/color.ts
-var colorOptions = [
-  "neutral-container-variation-lowest",
-  "neutral-container-lowest-hover",
-  "neutral-container-lowest",
-  "neutral-container-low",
-  "neutral-container-low-hover",
-  "neutral-container-mid",
-  "neutral-container-mid-hover",
-  "neutral-container-high",
-  "neutral-container-high-hover",
-  "neutral-container-highest",
-  "neutral-container-static-lowest",
-  "neutral-container-static-lowest-hover",
-  "neutral-fill-overlay-lowest",
-  "neutral-fill-overlay-lowest-hover",
-  "neutral-fill-overlay-low",
-  "neutral-fill-overlay-low-hover",
-  "neutral-fill-overlay-mid",
-  "neutral-fill-overlay-mid-hover",
-  "neutral-fill-overlay-high",
-  "neutral-fill-overlay-high-hover",
-  "neutral-fill-overlay-highest",
-  "neutral-fill-opaque-lowest",
-  "neutral-fill-opaque-lowest-hover",
-  "neutral-fill-opaque-low",
-  "neutral-fill-opaque-low-hover",
-  "neutral-fill-opaque-static-lowest",
-  "neutral-label-primary",
-  "neutral-label-secondary",
-  "neutral-label-tertiary",
-  "neutral-label-quaternary",
-  "neutral-label-static-primary",
-  "neutral-label-static-secondary",
-  "neutral-border-overlay-strong",
-  "neutral-border-overlay-normal",
-  "neutral-border-overlay-subtle",
-  "neutral-border-overlay-hint",
-  "neutral-border-opaque-strong",
-  "neutral-border-opaque-normal",
-  "neutral-border-opaque-subtle",
-  "inverse-container-lowest",
-  "inverse-container-lowest-hover",
-  "inverse-container-low",
-  "inverse-container-low-hover",
-  "inverse-container-mid",
-  "inverse-container-mid-hover",
-  "inverse-container-high",
-  "inverse-container-high-hover",
-  "inverse-container-static-high",
-  "inverse-container-static-high-hover",
-  "inverse-fill-mid",
-  "inverse-fill-mid-hover",
-  "inverse-fill-opaque-lowest",
-  "inverse-fill-opaque-lowest-hover",
-  "inverse-fill-opaque-low",
-  "inverse-fill-opaque-low-hover",
-  "inverse-fill-opaque-mid",
-  "inverse-label-primary",
-  "inverse-label-static-primary",
-  "inverse-label-static-secondary",
-  "inverse-label-secondary",
-  "inverse-label-tertiary",
-  "inverse-label-quaternary",
-  "inverse-border-overlay-strong",
-  "inverse-border-overlay-normal",
-  "inverse-border-overlay-subtle",
-  "inverse-border-overlay-hint",
-  "inverse-border-opaque-strong",
-  "inverse-border-opaque-normal",
-  "inverse-border-opaque-subtle",
-  "brand-container-mid",
-  "brand-container-mid-hover",
-  "brand-container-high",
-  "brand-fill-mid",
-  "brand-fill-mid-hover",
-  "brand-fill-low",
-  "brand-fill-low-hover",
-  "brand-label-primary",
-  "brand-label-secondary",
-  "brand-label-variation-secondary",
-  "brand-border-opaque-normal",
-  "brand-border-opaque-strong",
-  "brandinverse-label-primary",
-  "brandinverse-label-secondary",
-  "brandinverse-label-static-primary",
-  "accent-label-primary",
-  "accent-label-yellow",
-  "accent-label-mint",
-  "accent-label-cyan",
-  "accent-label-purple",
-  "accent-label-pink",
-  "accent-fill-primary",
-  "function-fill-positive-mid",
-  "function-fill-positive-low",
-  "function-fill-negative-mid",
-  "function-fill-negative-low",
-  "function-fill-negative-mid-hover",
-  "function-fill-caution",
-  "function-fill-highlight",
-  "function-fill-selection",
-  "function-fill-drag",
-  "function-label-positive",
-  "function-label-negative",
-  "function-label-caution",
-  "function-label-link",
-  "inverse-container-highest",
-  "cover-dim-page"
-];
-
-// src/components/Icon/index.tsx
-var import_jsx_runtime180 = require("react/jsx-runtime");
-var iconSizeMap = {
-  xs: 16,
-  s: 20,
-  m: 24,
-  l: 32,
-  xl: 40
-};
-var iconKeyOptions = Object.keys(iconMap).sort();
-var iconVariants = (0, import_cva.cva)({
-  base: style_module_default2.icon,
-  variants: {
-    type: arrayToStyleObject(colorOptions, style_module_default2),
-    fillType: arrayToStyleObject(colorOptions, style_module_default2, "fill")
-  }
-});
-var getIconComponent = /* @__PURE__ */ __name((iconKey, map) => map[iconKey], "getIconComponent");
-var Icon = (0, import_react.forwardRef)((props, ref) => {
-  const {
-    name,
-    type = "neutral-label-primary",
-    fillType,
-    size: size4 = "m",
-    thick = false,
-    fill = false,
-    className,
-    ...rest
-  } = props;
-  const IconComponent = getIconComponent(name, iconMap);
-  const iconSize = iconSizeMap[size4];
-  const iconProps = {
-    ...rest,
-    className: (0, import_clsx.default)(iconVariants({ type, fillType }), className),
-    size: iconSize,
-    thick,
-    fill
-  };
-  const isForwardRef = "$$typeof" in IconComponent && IconComponent.$$typeof === Symbol.for("react.forward_ref");
-  if (isForwardRef && ref) {
-    return /* @__PURE__ */ (0, import_jsx_runtime180.jsx)(IconComponent, { ...iconProps, ref });
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime180.jsx)(IconComponent, { ...iconProps });
-});
+var import_icon = require("@liner-fe/icon");
 
 // src/components/Loading/style.module.scss
-var style_module_default3 = {
+var style_module_default2 = {
   "dots-loader-container": "_dots-loader-container_7yn2t_4",
   "dots-loader": "_dots-loader_7yn2t_4",
   "loadingFade": "_loadingFade_7yn2t_1",
@@ -13955,53 +13747,53 @@ var style_module_default3 = {
 };
 
 // src/components/Loading/index.tsx
-var import_cva2 = require("cva");
-var import_jsx_runtime181 = require("react/jsx-runtime");
+var import_cva = require("cva");
+var import_jsx_runtime180 = require("react/jsx-runtime");
 var Loading = /* @__PURE__ */ __name(({ type = "dots", ...props }) => {
-  return type === "dots" ? /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(DotsLoader, { ...props }) : /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(SpinnerLoader, { ...props });
+  return type === "dots" ? /* @__PURE__ */ (0, import_jsx_runtime180.jsx)(DotsLoader, { ...props }) : /* @__PURE__ */ (0, import_jsx_runtime180.jsx)(SpinnerLoader, { ...props });
 }, "Loading");
-var dotsLoaderVariants = (0, import_cva2.cva)({
-  base: [style_module_default3["dots-loader"]],
+var dotsLoaderVariants = (0, import_cva.cva)({
+  base: [style_module_default2["dots-loader"]],
   variants: {
     size: {
-      xl: style_module_default3["xl"],
-      l: style_module_default3["l"],
-      m: style_module_default3["m"],
-      s: style_module_default3["s"],
-      xs: style_module_default3["xs"]
+      xl: style_module_default2["xl"],
+      l: style_module_default2["l"],
+      m: style_module_default2["m"],
+      s: style_module_default2["s"],
+      xs: style_module_default2["xs"]
     },
     level: {
-      "brand-label-primary": style_module_default3["brand-label-primary"],
-      "neutral-label-primary": style_module_default3["neutral-label-primary"],
-      "neutral-label-static-primary": style_module_default3["neutral-label-static-primary"],
-      "inverse-label-primary": style_module_default3["inverse-label-primary"],
-      "inverse-label-static-primary": style_module_default3["inverse-label-static-primary"]
+      "brand-label-primary": style_module_default2["brand-label-primary"],
+      "neutral-label-primary": style_module_default2["neutral-label-primary"],
+      "neutral-label-static-primary": style_module_default2["neutral-label-static-primary"],
+      "inverse-label-primary": style_module_default2["inverse-label-primary"],
+      "inverse-label-static-primary": style_module_default2["inverse-label-static-primary"]
     }
   }
 });
 var DotsLoader = /* @__PURE__ */ __name(({ size: size4 = "m", level = "inverse-label-static-primary" }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime181.jsxs)("div", { className: style_module_default3["dots-loader-container"], children: [
-    /* @__PURE__ */ (0, import_jsx_runtime181.jsx)("div", { className: dotsLoaderVariants({ size: size4, level }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime181.jsx)("div", { className: dotsLoaderVariants({ size: size4, level }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime181.jsx)("div", { className: dotsLoaderVariants({ size: size4, level }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime180.jsxs)("div", { className: style_module_default2["dots-loader-container"], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime180.jsx)("div", { className: dotsLoaderVariants({ size: size4, level }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime180.jsx)("div", { className: dotsLoaderVariants({ size: size4, level }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime180.jsx)("div", { className: dotsLoaderVariants({ size: size4, level }) })
   ] });
 }, "DotsLoader");
-var spinnerLoaderVariants = (0, import_cva2.cva)({
-  base: [style_module_default3["spinner-loader"]],
+var spinnerLoaderVariants = (0, import_cva.cva)({
+  base: [style_module_default2["spinner-loader"]],
   variants: {
     size: {
-      xl: style_module_default3["xl"],
-      l: style_module_default3["l"],
-      m: style_module_default3["m"],
-      s: style_module_default3["s"],
-      xs: style_module_default3["xs"]
+      xl: style_module_default2["xl"],
+      l: style_module_default2["l"],
+      m: style_module_default2["m"],
+      s: style_module_default2["s"],
+      xs: style_module_default2["xs"]
     },
     level: {
-      "brand-label-primary": style_module_default3["brand-label-primary"],
-      "neutral-label-primary": style_module_default3["neutral-label-primary"],
-      "neutral-label-static-primary": style_module_default3["neutral-label-static-primary"],
-      "inverse-label-primary": style_module_default3["inverse-label-primary"],
-      "inverse-label-static-primary": style_module_default3["inverse-label-static-primary"]
+      "brand-label-primary": style_module_default2["brand-label-primary"],
+      "neutral-label-primary": style_module_default2["neutral-label-primary"],
+      "neutral-label-static-primary": style_module_default2["neutral-label-static-primary"],
+      "inverse-label-primary": style_module_default2["inverse-label-primary"],
+      "inverse-label-static-primary": style_module_default2["inverse-label-static-primary"]
     }
   }
 });
@@ -14009,11 +13801,11 @@ var SpinnerLoader = /* @__PURE__ */ __name(({
   size: size4 = "m",
   level = "inverse-label-static-primary"
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime181.jsx)("span", { className: spinnerLoaderVariants({ size: size4, level }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime180.jsx)("span", { className: spinnerLoaderVariants({ size: size4, level }) });
 }, "SpinnerLoader");
 
 // src/components/Button/index.tsx
-var import_jsx_runtime182 = require("react/jsx-runtime");
+var import_jsx_runtime181 = require("react/jsx-runtime");
 var buttonIconSizeMap = {
   cta: "m",
   l: "s",
@@ -14087,7 +13879,7 @@ var buttonFillLevelIconFillTypeMap = {
     "inverse-static": void 0
   }
 };
-var defaultButtonVariants = (0, import_cva3.cva)({
+var defaultButtonVariants = (0, import_cva2.cva)({
   base: [style_module_default.button, style_module_default.default],
   variants: {
     level: {
@@ -14120,7 +13912,7 @@ var defaultButtonVariants = (0, import_cva3.cva)({
     }
   }
 });
-var defaultButtonChildrenVariants = (0, import_cva3.cva)({
+var defaultButtonChildrenVariants = (0, import_cva2.cva)({
   base: style_module_default.children,
   variants: {
     size: {
@@ -14131,7 +13923,7 @@ var defaultButtonChildrenVariants = (0, import_cva3.cva)({
     }
   }
 });
-var DefaultButton = (0, import_react2.forwardRef)(
+var DefaultButton = (0, import_react.forwardRef)(
   ({
     asChild = false,
     level = "primary",
@@ -14152,33 +13944,33 @@ var DefaultButton = (0, import_react2.forwardRef)(
       type: buttonFillLevelIconTypeMap[`${fill}`][level],
       fillType: buttonFillLevelIconFillTypeMap[`${fill}`][level]
     };
-    const renderContent = /* @__PURE__ */ __name((children2) => /* @__PURE__ */ (0, import_jsx_runtime182.jsxs)("span", { className: (0, import_clsx2.default)(defaultButtonChildrenVariants({ size: size4 })), children: [
-      !!leftIcon && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(Icon, { ...iconProps, ...leftIcon }),
-      isLoading ? !!leftIcon || !!rightIcon ? /* @__PURE__ */ (0, import_jsx_runtime182.jsxs)(import_jsx_runtime182.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(Loading, { size: buttonLoadingSizeMap[size4], level: buttonLoadingLevelMap[level] }),
-        /* @__PURE__ */ (0, import_jsx_runtime182.jsx)("p", { className: style_module_default.content, children: children2 })
-      ] }) : /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(Loading, { size: buttonLoadingSizeMap[size4], level: buttonLoadingLevelMap[level] }) : /* @__PURE__ */ (0, import_jsx_runtime182.jsx)("p", { className: style_module_default.content, children: children2 }),
-      !!rightIcon && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(Icon, { ...iconProps, ...rightIcon })
+    const renderContent = /* @__PURE__ */ __name((children2) => /* @__PURE__ */ (0, import_jsx_runtime181.jsxs)("span", { className: (0, import_clsx.default)(defaultButtonChildrenVariants({ size: size4 })), children: [
+      !!leftIcon && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(import_icon.Icon, { ...iconProps, ...leftIcon }),
+      isLoading ? !!leftIcon || !!rightIcon ? /* @__PURE__ */ (0, import_jsx_runtime181.jsxs)(import_jsx_runtime181.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(Loading, { size: buttonLoadingSizeMap[size4], level: buttonLoadingLevelMap[level] }),
+        /* @__PURE__ */ (0, import_jsx_runtime181.jsx)("p", { className: style_module_default.content, children: children2 })
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(Loading, { size: buttonLoadingSizeMap[size4], level: buttonLoadingLevelMap[level] }) : /* @__PURE__ */ (0, import_jsx_runtime181.jsx)("p", { className: style_module_default.content, children: children2 }),
+      !!rightIcon && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(import_icon.Icon, { ...iconProps, ...rightIcon })
     ] }), "renderContent");
     if (asChild) {
-      const parent = import_react2.Children.only(children);
+      const parent = import_react.Children.only(children);
       const newChildren = parent.props.children;
-      const ParentClone = (0, import_react2.cloneElement)(
+      const ParentClone = (0, import_react.cloneElement)(
         parent,
         {
           ...rest,
-          className: (0, import_clsx2.default)(defaultButtonVariants({ level, fill, align, size: size4, width }), className),
+          className: (0, import_clsx.default)(defaultButtonVariants({ level, fill, align, size: size4, width }), className),
           ref
         },
         renderContent(newChildren)
       );
       return ParentClone;
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(
       "button",
       {
         ...rest,
-        className: (0, import_clsx2.default)(defaultButtonVariants({ level, fill, align, size: size4, width }), className),
+        className: (0, import_clsx.default)(defaultButtonVariants({ level, fill, align, size: size4, width }), className),
         ref,
         "aria-label": rest["aria-label"] || "button",
         role: "button",
@@ -14189,7 +13981,7 @@ var DefaultButton = (0, import_react2.forwardRef)(
   }
 );
 DefaultButton.displayName = "DefaultButton";
-var Button = (0, import_react2.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(DefaultButton, { ...props, ref }));
+var Button = (0, import_react.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(DefaultButton, { ...props, ref }));
 Button.displayName = "Button";
 
 // src/hooks/useToast.ts
@@ -14280,11 +14072,11 @@ function useComposedRefs(...refs) {
 __name(useComposedRefs, "useComposedRefs");
 
 // ../../node_modules/@radix-ui/react-collection/dist/index.mjs
-var import_react3 = __toESM(require("react"), 1);
+var import_react2 = __toESM(require("react"), 1);
 
 // ../../node_modules/@radix-ui/react-context/dist/index.mjs
 var React2 = __toESM(require("react"), 1);
-var import_jsx_runtime183 = require("react/jsx-runtime");
+var import_jsx_runtime182 = require("react/jsx-runtime");
 function createContextScope(scopeName, createContextScopeDeps = []) {
   let defaultContexts = [];
   function createContext32(rootComponentName, defaultContext) {
@@ -14295,7 +14087,7 @@ function createContextScope(scopeName, createContextScopeDeps = []) {
       const { scope, children, ...context } = props;
       const Context = scope?.[scopeName]?.[index2] || BaseContext;
       const value = React2.useMemo(() => context, Object.values(context));
-      return /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(Context.Provider, { value, children });
+      return /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(Context.Provider, { value, children });
     }, "Provider");
     Provider3.displayName = rootComponentName + "Provider";
     function useContext22(consumerName, scope) {
@@ -14349,7 +14141,7 @@ __name(composeContextScopes, "composeContextScopes");
 
 // ../../node_modules/@radix-ui/react-slot/dist/index.mjs
 var React3 = __toESM(require("react"), 1);
-var import_jsx_runtime184 = require("react/jsx-runtime");
+var import_jsx_runtime183 = require("react/jsx-runtime");
 // @__NO_SIDE_EFFECTS__
 function createSlot(ownerName) {
   const SlotClone = /* @__PURE__ */ createSlotClone(ownerName);
@@ -14367,9 +14159,9 @@ function createSlot(ownerName) {
           return child;
         }
       });
-      return /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(SlotClone, { ...slotProps, ref: forwardedRef, children: React3.isValidElement(newElement) ? React3.cloneElement(newElement, void 0, newChildren) : null });
+      return /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(SlotClone, { ...slotProps, ref: forwardedRef, children: React3.isValidElement(newElement) ? React3.cloneElement(newElement, void 0, newChildren) : null });
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(SlotClone, { ...slotProps, ref: forwardedRef, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(SlotClone, { ...slotProps, ref: forwardedRef, children });
   });
   Slot22.displayName = `${ownerName}.Slot`;
   return Slot22;
@@ -14440,9 +14232,9 @@ function getElementRef(element) {
 __name(getElementRef, "getElementRef");
 
 // ../../node_modules/@radix-ui/react-collection/dist/index.mjs
+var import_jsx_runtime184 = require("react/jsx-runtime");
+var import_react3 = __toESM(require("react"), 1);
 var import_jsx_runtime185 = require("react/jsx-runtime");
-var import_react4 = __toESM(require("react"), 1);
-var import_jsx_runtime186 = require("react/jsx-runtime");
 function createCollection(name) {
   const PROVIDER_NAME2 = name + "CollectionProvider";
   const [createCollectionContext, createCollectionScope2] = createContextScope(PROVIDER_NAME2);
@@ -14452,42 +14244,42 @@ function createCollection(name) {
   );
   const CollectionProvider2 = /* @__PURE__ */ __name((props) => {
     const { scope, children } = props;
-    const ref = import_react3.default.useRef(null);
-    const itemMap = import_react3.default.useRef(/* @__PURE__ */ new Map()).current;
-    return /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(CollectionProviderImpl, { scope, itemMap, collectionRef: ref, children });
+    const ref = import_react2.default.useRef(null);
+    const itemMap = import_react2.default.useRef(/* @__PURE__ */ new Map()).current;
+    return /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(CollectionProviderImpl, { scope, itemMap, collectionRef: ref, children });
   }, "CollectionProvider");
   CollectionProvider2.displayName = PROVIDER_NAME2;
   const COLLECTION_SLOT_NAME = name + "CollectionSlot";
   const CollectionSlotImpl = createSlot(COLLECTION_SLOT_NAME);
-  const CollectionSlot = import_react3.default.forwardRef(
+  const CollectionSlot = import_react2.default.forwardRef(
     (props, forwardedRef) => {
       const { scope, children } = props;
       const context = useCollectionContext2(COLLECTION_SLOT_NAME, scope);
       const composedRefs = useComposedRefs(forwardedRef, context.collectionRef);
-      return /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(CollectionSlotImpl, { ref: composedRefs, children });
+      return /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(CollectionSlotImpl, { ref: composedRefs, children });
     }
   );
   CollectionSlot.displayName = COLLECTION_SLOT_NAME;
   const ITEM_SLOT_NAME = name + "CollectionItemSlot";
   const ITEM_DATA_ATTR = "data-radix-collection-item";
   const CollectionItemSlotImpl = createSlot(ITEM_SLOT_NAME);
-  const CollectionItemSlot = import_react3.default.forwardRef(
+  const CollectionItemSlot = import_react2.default.forwardRef(
     (props, forwardedRef) => {
       const { scope, children, ...itemData } = props;
-      const ref = import_react3.default.useRef(null);
+      const ref = import_react2.default.useRef(null);
       const composedRefs = useComposedRefs(forwardedRef, ref);
       const context = useCollectionContext2(ITEM_SLOT_NAME, scope);
-      import_react3.default.useEffect(() => {
+      import_react2.default.useEffect(() => {
         context.itemMap.set(ref, { ref, ...itemData });
         return () => void context.itemMap.delete(ref);
       });
-      return /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(CollectionItemSlotImpl, { ...{ [ITEM_DATA_ATTR]: "" }, ref: composedRefs, children });
+      return /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(CollectionItemSlotImpl, { ...{ [ITEM_DATA_ATTR]: "" }, ref: composedRefs, children });
     }
   );
   CollectionItemSlot.displayName = ITEM_SLOT_NAME;
   function useCollection2(scope) {
     const context = useCollectionContext2(name + "CollectionConsumer", scope);
-    const getItems = import_react3.default.useCallback(() => {
+    const getItems = import_react2.default.useCallback(() => {
       const collectionNode = context.collectionRef.current;
       if (!collectionNode) return [];
       const orderedNodes = Array.from(collectionNode.querySelectorAll(`[${ITEM_DATA_ATTR}]`));
@@ -14514,7 +14306,7 @@ var React8 = __toESM(require("react"), 1);
 // ../../node_modules/@radix-ui/react-primitive/dist/index.mjs
 var React5 = __toESM(require("react"), 1);
 var ReactDOM = __toESM(require("react-dom"), 1);
-var import_jsx_runtime187 = require("react/jsx-runtime");
+var import_jsx_runtime186 = require("react/jsx-runtime");
 var NODES = [
   "a",
   "button",
@@ -14542,7 +14334,7 @@ var Primitive = NODES.reduce((primitive, node) => {
     if (typeof window !== "undefined") {
       window[Symbol.for("radix-ui")] = true;
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime187.jsx)(Comp, { ...primitiveProps, ref: forwardedRef });
+    return /* @__PURE__ */ (0, import_jsx_runtime186.jsx)(Comp, { ...primitiveProps, ref: forwardedRef });
   });
   Node2.displayName = `Primitive.${node}`;
   return { ...primitive, [node]: Node2 };
@@ -14580,7 +14372,7 @@ function useEscapeKeydown(onEscapeKeyDownProp, ownerDocument = globalThis?.docum
 __name(useEscapeKeydown, "useEscapeKeydown");
 
 // ../../node_modules/@radix-ui/react-dismissable-layer/dist/index.mjs
-var import_jsx_runtime188 = require("react/jsx-runtime");
+var import_jsx_runtime187 = require("react/jsx-runtime");
 var DISMISSABLE_LAYER_NAME = "DismissableLayer";
 var CONTEXT_UPDATE = "dismissableLayer.update";
 var POINTER_DOWN_OUTSIDE = "dismissableLayer.pointerDownOutside";
@@ -14668,7 +14460,7 @@ var DismissableLayer = React8.forwardRef(
       document.addEventListener(CONTEXT_UPDATE, handleUpdate);
       return () => document.removeEventListener(CONTEXT_UPDATE, handleUpdate);
     }, []);
-    return /* @__PURE__ */ (0, import_jsx_runtime188.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime187.jsx)(
       Primitive.div,
       {
         ...layerProps,
@@ -14702,7 +14494,7 @@ var DismissableLayerBranch = React8.forwardRef((props, forwardedRef) => {
       };
     }
   }, [context.branches]);
-  return /* @__PURE__ */ (0, import_jsx_runtime188.jsx)(Primitive.div, { ...props, ref: composedRefs });
+  return /* @__PURE__ */ (0, import_jsx_runtime187.jsx)(Primitive.div, { ...props, ref: composedRefs });
 });
 DismissableLayerBranch.displayName = BRANCH_NAME;
 function usePointerDownOutside(onPointerDownOutside, ownerDocument = globalThis?.document) {
@@ -14800,14 +14592,14 @@ var useLayoutEffect2 = globalThis?.document ? React9.useLayoutEffect : () => {
 };
 
 // ../../node_modules/@radix-ui/react-portal/dist/index.mjs
-var import_jsx_runtime189 = require("react/jsx-runtime");
+var import_jsx_runtime188 = require("react/jsx-runtime");
 var PORTAL_NAME = "Portal";
 var Portal = React10.forwardRef((props, forwardedRef) => {
   const { container: containerProp, ...portalProps } = props;
   const [mounted, setMounted] = React10.useState(false);
   useLayoutEffect2(() => setMounted(true), []);
   const container = containerProp || mounted && globalThis?.document?.body;
-  return container ? import_react_dom.default.createPortal(/* @__PURE__ */ (0, import_jsx_runtime189.jsx)(Primitive.div, { ...portalProps, ref: forwardedRef }), container) : null;
+  return container ? import_react_dom.default.createPortal(/* @__PURE__ */ (0, import_jsx_runtime188.jsx)(Primitive.div, { ...portalProps, ref: forwardedRef }), container) : null;
 });
 Portal.displayName = PORTAL_NAME;
 
@@ -15015,7 +14807,7 @@ var SYNC_STATE = Symbol("RADIX:SYNC_STATE");
 
 // ../../node_modules/@radix-ui/react-visually-hidden/dist/index.mjs
 var React13 = __toESM(require("react"), 1);
-var import_jsx_runtime190 = require("react/jsx-runtime");
+var import_jsx_runtime189 = require("react/jsx-runtime");
 var VISUALLY_HIDDEN_STYLES = Object.freeze({
   // See: https://github.com/twbs/bootstrap/blob/main/scss/mixins/_visually-hidden.scss
   position: "absolute",
@@ -15032,7 +14824,7 @@ var VISUALLY_HIDDEN_STYLES = Object.freeze({
 var NAME = "VisuallyHidden";
 var VisuallyHidden = React13.forwardRef(
   (props, forwardedRef) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime190.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(
       Primitive.span,
       {
         ...props,
@@ -15045,7 +14837,7 @@ var VisuallyHidden = React13.forwardRef(
 VisuallyHidden.displayName = NAME;
 
 // ../../node_modules/@radix-ui/react-toast/dist/index.mjs
-var import_jsx_runtime191 = require("react/jsx-runtime");
+var import_jsx_runtime190 = require("react/jsx-runtime");
 var PROVIDER_NAME = "ToastProvider";
 var [Collection, useCollection, createCollectionScope] = createCollection("Toast");
 var [createToastContext, createToastScope] = createContextScope("Toast", [createCollectionScope]);
@@ -15068,7 +14860,7 @@ var ToastProvider = /* @__PURE__ */ __name((props) => {
       `Invalid prop \`label\` supplied to \`${PROVIDER_NAME}\`. Expected non-empty \`string\`.`
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(Collection.Provider, { scope: __scopeToast, children: /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime190.jsx)(Collection.Provider, { scope: __scopeToast, children: /* @__PURE__ */ (0, import_jsx_runtime190.jsx)(
     ToastProviderProvider,
     {
       scope: __scopeToast,
@@ -15199,7 +14991,7 @@ var ToastViewport = React14.forwardRef(
         return () => viewport.removeEventListener("keydown", handleKeyDown);
       }
     }, [getItems, getSortedTabbableCandidates]);
-    return /* @__PURE__ */ (0, import_jsx_runtime191.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime190.jsxs)(
       Branch,
       {
         ref: wrapperRef,
@@ -15208,7 +15000,7 @@ var ToastViewport = React14.forwardRef(
         tabIndex: -1,
         style: { pointerEvents: hasToasts ? void 0 : "none" },
         children: [
-          hasToasts && /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(
+          hasToasts && /* @__PURE__ */ (0, import_jsx_runtime190.jsx)(
             FocusProxy,
             {
               ref: headFocusProxyRef,
@@ -15220,8 +15012,8 @@ var ToastViewport = React14.forwardRef(
               }, "onFocusFromOutsideViewport")
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(Collection.Slot, { scope: __scopeToast, children: /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(Primitive.ol, { tabIndex: -1, ...viewportProps, ref: composedRefs }) }),
-          hasToasts && /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime190.jsx)(Collection.Slot, { scope: __scopeToast, children: /* @__PURE__ */ (0, import_jsx_runtime190.jsx)(Primitive.ol, { tabIndex: -1, ...viewportProps, ref: composedRefs }) }),
+          hasToasts && /* @__PURE__ */ (0, import_jsx_runtime190.jsx)(
             FocusProxy,
             {
               ref: tailFocusProxyRef,
@@ -15244,7 +15036,7 @@ var FocusProxy = React14.forwardRef(
   (props, forwardedRef) => {
     const { __scopeToast, onFocusFromOutsideViewport, ...proxyProps } = props;
     const context = useToastProviderContext(FOCUS_PROXY_NAME, __scopeToast);
-    return /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime190.jsx)(
       VisuallyHidden,
       {
         "aria-hidden": true,
@@ -15276,7 +15068,7 @@ var Toast = React14.forwardRef(
       onChange: onOpenChange,
       caller: TOAST_NAME
     });
-    return /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(Presence, { present: forceMount || open, children: /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime190.jsx)(Presence, { present: forceMount || open, children: /* @__PURE__ */ (0, import_jsx_runtime190.jsx)(
       ToastImpl,
       {
         open,
@@ -15392,8 +15184,8 @@ var ToastImpl = React14.forwardRef(
       return node ? getAnnounceTextContent(node) : null;
     }, [node]);
     if (!context.viewport) return null;
-    return /* @__PURE__ */ (0, import_jsx_runtime191.jsxs)(import_jsx_runtime191.Fragment, { children: [
-      announceTextContent && /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime190.jsxs)(import_jsx_runtime190.Fragment, { children: [
+      announceTextContent && /* @__PURE__ */ (0, import_jsx_runtime190.jsx)(
         ToastAnnounce,
         {
           __scopeToast,
@@ -15403,8 +15195,8 @@ var ToastImpl = React14.forwardRef(
           children: announceTextContent
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(ToastInteractiveProvider, { scope: __scopeToast, onClose: handleClose, children: ReactDOM3.createPortal(
-        /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(Collection.ItemSlot, { scope: __scopeToast, children: /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime190.jsx)(ToastInteractiveProvider, { scope: __scopeToast, onClose: handleClose, children: ReactDOM3.createPortal(
+        /* @__PURE__ */ (0, import_jsx_runtime190.jsx)(Collection.ItemSlot, { scope: __scopeToast, children: /* @__PURE__ */ (0, import_jsx_runtime190.jsx)(
           Root,
           {
             asChild: true,
@@ -15412,7 +15204,7 @@ var ToastImpl = React14.forwardRef(
               if (!context.isFocusedToastEscapeKeyDownRef.current) handleClose();
               context.isFocusedToastEscapeKeyDownRef.current = false;
             }),
-            children: /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime190.jsx)(
               Primitive.li,
               {
                 role: "status",
@@ -15512,7 +15304,7 @@ var ToastAnnounce = /* @__PURE__ */ __name((props) => {
     const timer = window.setTimeout(() => setIsAnnounced(true), 1e3);
     return () => window.clearTimeout(timer);
   }, []);
-  return isAnnounced ? null : /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(Portal, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(VisuallyHidden, { ...announceProps, children: renderAnnounceText && /* @__PURE__ */ (0, import_jsx_runtime191.jsxs)(import_jsx_runtime191.Fragment, { children: [
+  return isAnnounced ? null : /* @__PURE__ */ (0, import_jsx_runtime190.jsx)(Portal, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime190.jsx)(VisuallyHidden, { ...announceProps, children: renderAnnounceText && /* @__PURE__ */ (0, import_jsx_runtime190.jsxs)(import_jsx_runtime190.Fragment, { children: [
     context.label,
     " ",
     children
@@ -15522,7 +15314,7 @@ var TITLE_NAME = "ToastTitle";
 var ToastTitle = React14.forwardRef(
   (props, forwardedRef) => {
     const { __scopeToast, ...titleProps } = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(Primitive.div, { ...titleProps, ref: forwardedRef });
+    return /* @__PURE__ */ (0, import_jsx_runtime190.jsx)(Primitive.div, { ...titleProps, ref: forwardedRef });
   }
 );
 ToastTitle.displayName = TITLE_NAME;
@@ -15530,7 +15322,7 @@ var DESCRIPTION_NAME = "ToastDescription";
 var ToastDescription = React14.forwardRef(
   (props, forwardedRef) => {
     const { __scopeToast, ...descriptionProps } = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(Primitive.div, { ...descriptionProps, ref: forwardedRef });
+    return /* @__PURE__ */ (0, import_jsx_runtime190.jsx)(Primitive.div, { ...descriptionProps, ref: forwardedRef });
   }
 );
 ToastDescription.displayName = DESCRIPTION_NAME;
@@ -15544,7 +15336,7 @@ var ToastAction = React14.forwardRef(
       );
       return null;
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(ToastAnnounceExclude, { altText, asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(ToastClose, { ...actionProps, ref: forwardedRef }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime190.jsx)(ToastAnnounceExclude, { altText, asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime190.jsx)(ToastClose, { ...actionProps, ref: forwardedRef }) });
   }
 );
 ToastAction.displayName = ACTION_NAME;
@@ -15553,7 +15345,7 @@ var ToastClose = React14.forwardRef(
   (props, forwardedRef) => {
     const { __scopeToast, ...closeProps } = props;
     const interactiveContext = useToastInteractiveContext(CLOSE_NAME, __scopeToast);
-    return /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(ToastAnnounceExclude, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime190.jsx)(ToastAnnounceExclude, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime190.jsx)(
       Primitive.button,
       {
         type: "button",
@@ -15567,7 +15359,7 @@ var ToastClose = React14.forwardRef(
 ToastClose.displayName = CLOSE_NAME;
 var ToastAnnounceExclude = React14.forwardRef((props, forwardedRef) => {
   const { __scopeToast, altText, ...announceExcludeProps } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime190.jsx)(
     Primitive.div,
     {
       "data-radix-toast-announce-exclude": "",
@@ -15665,7 +15457,7 @@ var Root2 = Toast;
 var Title = ToastTitle;
 
 // src/components/Toast/style.module.scss
-var style_module_default4 = {
+var style_module_default3 = {
   "Icon": "_Icon_sbycv_25",
   "TitleText": "_TitleText_sbycv_31",
   "ToastViewport": "_ToastViewport_sbycv_36",
@@ -15680,10 +15472,10 @@ var style_module_default4 = {
 var import_react6 = require("react");
 
 // src/components/Typography/Set/Paragraph.tsx
-var import_clsx3 = __toESM(require("clsx"));
-var import_react5 = require("react");
-var import_jsx_runtime192 = require("react/jsx-runtime");
-var Paragraph = (0, import_react5.forwardRef)(
+var import_clsx2 = __toESM(require("clsx"));
+var import_react4 = require("react");
+var import_jsx_runtime191 = require("react/jsx-runtime");
+var Paragraph = (0, import_react4.forwardRef)(
   ({
     size: size4,
     type,
@@ -15694,11 +15486,11 @@ var Paragraph = (0, import_react5.forwardRef)(
     as: Element2 = "p",
     ...rest
   }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime192.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(
       Element2,
       {
         ...rest,
-        className: (0, import_clsx3.default)(`lp-sys-typo-paragraph${size4}-${type}-${weight}`, className),
+        className: (0, import_clsx2.default)(`lp-sys-typo-paragraph${size4}-${type}-${weight}`, className),
         ref,
         style: {
           color: `var(--${color})`
@@ -15709,6 +15501,215 @@ var Paragraph = (0, import_react5.forwardRef)(
   }
 );
 
+// src/components/Icon/index.tsx
+var import_cva3 = require("cva");
+var import_clsx3 = __toESM(require("clsx"));
+var import_react5 = require("react");
+
+// src/components/Icon/style.module.scss
+var style_module_default4 = {
+  "icon": "_icon_1g8e0_1",
+  "neutral-label-primary": "_neutral-label-primary_1g8e0_8",
+  "neutral-label-secondary": "_neutral-label-secondary_1g8e0_13",
+  "neutral-label-tertiary": "_neutral-label-tertiary_1g8e0_18",
+  "neutral-label-quaternary": "_neutral-label-quaternary_1g8e0_23",
+  "neutral-label-static-primary": "_neutral-label-static-primary_1g8e0_28",
+  "neutral-label-static-secondary": "_neutral-label-static-secondary_1g8e0_33",
+  "inverse-label-primary": "_inverse-label-primary_1g8e0_38",
+  "inverse-label-secondary": "_inverse-label-secondary_1g8e0_43",
+  "inverse-label-tertiary": "_inverse-label-tertiary_1g8e0_48",
+  "inverse-label-quaternary": "_inverse-label-quaternary_1g8e0_53",
+  "inverse-label-static-primary": "_inverse-label-static-primary_1g8e0_58",
+  "inverse-label-static-secondary": "_inverse-label-static-secondary_1g8e0_63",
+  "brand-label-primary": "_brand-label-primary_1g8e0_68",
+  "brand-label-secondary": "_brand-label-secondary_1g8e0_73",
+  "function-label-positive": "_function-label-positive_1g8e0_78",
+  "function-label-negative": "_function-label-negative_1g8e0_83",
+  "function-label-caution": "_function-label-caution_1g8e0_88",
+  "accent-yellow": "_accent-yellow_1g8e0_93",
+  "accent-mint": "_accent-mint_1g8e0_98",
+  "accent-cyan": "_accent-cyan_1g8e0_103",
+  "accent-purple": "_accent-purple_1g8e0_108",
+  "accent-pink": "_accent-pink_1g8e0_113",
+  "fill-neutral-label-primary": "_fill-neutral-label-primary_1g8e0_118",
+  "fill-neutral-label-secondary": "_fill-neutral-label-secondary_1g8e0_122",
+  "fill-neutral-label-tertiary": "_fill-neutral-label-tertiary_1g8e0_126",
+  "fill-neutral-label-quaternary": "_fill-neutral-label-quaternary_1g8e0_130",
+  "fill-neutral-label-static-primary": "_fill-neutral-label-static-primary_1g8e0_134",
+  "fill-neutral-label-static-secondary": "_fill-neutral-label-static-secondary_1g8e0_138",
+  "fill-inverse-label-primary": "_fill-inverse-label-primary_1g8e0_142",
+  "fill-inverse-label-secondary": "_fill-inverse-label-secondary_1g8e0_146",
+  "fill-inverse-label-tertiary": "_fill-inverse-label-tertiary_1g8e0_150",
+  "fill-inverse-label-quaternary": "_fill-inverse-label-quaternary_1g8e0_154",
+  "fill-inverse-label-static-primary": "_fill-inverse-label-static-primary_1g8e0_158",
+  "fill-inverse-label-static-secondary": "_fill-inverse-label-static-secondary_1g8e0_162",
+  "fill-brand-label-primary": "_fill-brand-label-primary_1g8e0_166",
+  "fill-brand-label-secondary": "_fill-brand-label-secondary_1g8e0_170",
+  "fill-function-label-positive": "_fill-function-label-positive_1g8e0_174",
+  "fill-function-label-negative": "_fill-function-label-negative_1g8e0_178",
+  "fill-function-label-caution": "_fill-function-label-caution_1g8e0_182",
+  "fill-accent-yellow": "_fill-accent-yellow_1g8e0_186",
+  "fill-accent-mint": "_fill-accent-mint_1g8e0_190",
+  "fill-accent-cyan": "_fill-accent-cyan_1g8e0_194",
+  "fill-accent-purple": "_fill-accent-purple_1g8e0_198",
+  "fill-accent-pink": "_fill-accent-pink_1g8e0_202"
+};
+
+// src/constants/color.ts
+var colorOptions = [
+  "neutral-container-variation-lowest",
+  "neutral-container-lowest-hover",
+  "neutral-container-lowest",
+  "neutral-container-low",
+  "neutral-container-low-hover",
+  "neutral-container-mid",
+  "neutral-container-mid-hover",
+  "neutral-container-high",
+  "neutral-container-high-hover",
+  "neutral-container-highest",
+  "neutral-container-static-lowest",
+  "neutral-container-static-lowest-hover",
+  "neutral-fill-overlay-lowest",
+  "neutral-fill-overlay-lowest-hover",
+  "neutral-fill-overlay-low",
+  "neutral-fill-overlay-low-hover",
+  "neutral-fill-overlay-mid",
+  "neutral-fill-overlay-mid-hover",
+  "neutral-fill-overlay-high",
+  "neutral-fill-overlay-high-hover",
+  "neutral-fill-overlay-highest",
+  "neutral-fill-opaque-lowest",
+  "neutral-fill-opaque-lowest-hover",
+  "neutral-fill-opaque-low",
+  "neutral-fill-opaque-low-hover",
+  "neutral-fill-opaque-static-lowest",
+  "neutral-label-primary",
+  "neutral-label-secondary",
+  "neutral-label-tertiary",
+  "neutral-label-quaternary",
+  "neutral-label-static-primary",
+  "neutral-label-static-secondary",
+  "neutral-border-overlay-strong",
+  "neutral-border-overlay-normal",
+  "neutral-border-overlay-subtle",
+  "neutral-border-overlay-hint",
+  "neutral-border-opaque-strong",
+  "neutral-border-opaque-normal",
+  "neutral-border-opaque-subtle",
+  "inverse-container-lowest",
+  "inverse-container-lowest-hover",
+  "inverse-container-low",
+  "inverse-container-low-hover",
+  "inverse-container-mid",
+  "inverse-container-mid-hover",
+  "inverse-container-high",
+  "inverse-container-high-hover",
+  "inverse-container-static-high",
+  "inverse-container-static-high-hover",
+  "inverse-fill-mid",
+  "inverse-fill-mid-hover",
+  "inverse-fill-opaque-lowest",
+  "inverse-fill-opaque-lowest-hover",
+  "inverse-fill-opaque-low",
+  "inverse-fill-opaque-low-hover",
+  "inverse-fill-opaque-mid",
+  "inverse-label-primary",
+  "inverse-label-static-primary",
+  "inverse-label-static-secondary",
+  "inverse-label-secondary",
+  "inverse-label-tertiary",
+  "inverse-label-quaternary",
+  "inverse-border-overlay-strong",
+  "inverse-border-overlay-normal",
+  "inverse-border-overlay-subtle",
+  "inverse-border-overlay-hint",
+  "inverse-border-opaque-strong",
+  "inverse-border-opaque-normal",
+  "inverse-border-opaque-subtle",
+  "brand-container-mid",
+  "brand-container-mid-hover",
+  "brand-container-high",
+  "brand-fill-mid",
+  "brand-fill-mid-hover",
+  "brand-fill-low",
+  "brand-fill-low-hover",
+  "brand-label-primary",
+  "brand-label-secondary",
+  "brand-label-variation-secondary",
+  "brand-border-opaque-normal",
+  "brand-border-opaque-strong",
+  "brandinverse-label-primary",
+  "brandinverse-label-secondary",
+  "brandinverse-label-static-primary",
+  "accent-label-primary",
+  "accent-label-yellow",
+  "accent-label-mint",
+  "accent-label-cyan",
+  "accent-label-purple",
+  "accent-label-pink",
+  "accent-fill-primary",
+  "function-fill-positive-mid",
+  "function-fill-positive-low",
+  "function-fill-negative-mid",
+  "function-fill-negative-low",
+  "function-fill-negative-mid-hover",
+  "function-fill-caution",
+  "function-fill-highlight",
+  "function-fill-selection",
+  "function-fill-drag",
+  "function-label-positive",
+  "function-label-negative",
+  "function-label-caution",
+  "function-label-link",
+  "inverse-container-highest",
+  "cover-dim-page"
+];
+
+// src/components/Icon/index.tsx
+var import_jsx_runtime192 = require("react/jsx-runtime");
+var iconSizeMap = {
+  xs: 16,
+  s: 20,
+  m: 24,
+  l: 32,
+  xl: 40
+};
+var iconKeyOptions = Object.keys(iconMap).sort();
+var iconVariants = (0, import_cva3.cva)({
+  base: style_module_default4.icon,
+  variants: {
+    type: arrayToStyleObject(colorOptions, style_module_default4),
+    fillType: arrayToStyleObject(colorOptions, style_module_default4, "fill")
+  }
+});
+var getIconComponent = /* @__PURE__ */ __name((iconKey, map) => map[iconKey], "getIconComponent");
+var Icon2 = (0, import_react5.forwardRef)((props, ref) => {
+  const {
+    name,
+    type = "neutral-label-primary",
+    fillType,
+    size: size4 = "m",
+    thick = false,
+    fill = false,
+    className,
+    ...rest
+  } = props;
+  const IconComponent = getIconComponent(name, iconMap);
+  const iconSize = iconSizeMap[size4];
+  const iconProps = {
+    ...rest,
+    className: (0, import_clsx3.default)(iconVariants({ type, fillType }), className),
+    size: iconSize,
+    thick,
+    fill
+  };
+  const isForwardRef = "$$typeof" in IconComponent && IconComponent.$$typeof === Symbol.for("react.forward_ref");
+  if (isForwardRef && ref) {
+    return /* @__PURE__ */ (0, import_jsx_runtime192.jsx)(IconComponent, { ...iconProps, ref });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime192.jsx)(IconComponent, { ...iconProps });
+});
+
 // src/components/Toast/index.tsx
 var import_recoil2 = require("recoil");
 var import_lottie_web = __toESM(require("lottie-web"));
@@ -16194,7 +16195,7 @@ var Toaster = /* @__PURE__ */ __name(() => {
   const list = (0, import_recoil2.useRecoilValue)(toastAtom);
   return /* @__PURE__ */ (0, import_jsx_runtime193.jsxs)(Provider, { children: [
     list.map((props) => /* @__PURE__ */ (0, import_react7.createElement)(SingleToast, { ...props, key: props.toastId })),
-    /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(Viewport, { className: style_module_default4.ToastViewport })
+    /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(Viewport, { className: style_module_default3.ToastViewport })
   ] });
 }, "Toaster");
 var SingleToast = /* @__PURE__ */ __name((props) => {
@@ -16236,15 +16237,15 @@ var SingleToast = /* @__PURE__ */ __name((props) => {
   }, [isLoading]);
   const renderIcon = /* @__PURE__ */ __name(() => {
     if (!icon) return null;
-    return /* @__PURE__ */ (0, import_jsx_runtime193.jsx)("i", { className: style_module_default4.Icon, children: /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(Icon, { ...icon, size: "m" }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime193.jsx)("i", { className: style_module_default3.Icon, children: /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(Icon2, { ...icon, size: "m" }) });
   }, "renderIcon");
-  return /* @__PURE__ */ (0, import_jsx_runtime193.jsxs)(Root2, { className: style_module_default4.ToastRoot, open: isOpen, ...props, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime193.jsxs)(Root2, { className: style_module_default3.ToastRoot, open: isOpen, ...props, children: [
     isLoading && !toastSuccess.current ? /* @__PURE__ */ (0, import_jsx_runtime193.jsx)("div", { ref: lottieRef, style: { width: "24px", height: "24px" } }) : renderIcon(),
-    /* @__PURE__ */ (0, import_jsx_runtime193.jsxs)(Title, { className: style_module_default4.ToastTitle, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime193.jsxs)(Title, { className: style_module_default3.ToastTitle, children: [
       /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(
         Paragraph,
         {
-          className: style_module_default4.TitleText,
+          className: style_module_default3.TitleText,
           type: "normal",
           weight: "medium",
           size: 3,
@@ -16522,6 +16523,7 @@ var import_cva6 = require("cva");
 var import_clsx9 = require("clsx");
 
 // src/components/TextButton/index.tsx
+var import_icon3 = require("@liner-fe/icon");
 var import_cva5 = require("cva");
 
 // src/components/TextButton/style.module.scss
@@ -16601,9 +16603,9 @@ var TextButton = (0, import_react13.forwardRef)(
       ...icon
     }), "getIconProps");
     const renderContent = /* @__PURE__ */ __name((children2) => /* @__PURE__ */ (0, import_jsx_runtime199.jsxs)("span", { className: style_module_default7["text-children"], children: [
-      leftIcon && /* @__PURE__ */ (0, import_jsx_runtime199.jsx)(Icon, { ...getIconProps(leftIcon) }),
+      leftIcon && /* @__PURE__ */ (0, import_jsx_runtime199.jsx)(import_icon3.Icon, { ...getIconProps(leftIcon) }),
       /* @__PURE__ */ (0, import_jsx_runtime199.jsx)("p", { children: children2 }),
-      rightIcon && /* @__PURE__ */ (0, import_jsx_runtime199.jsx)(Icon, { ...getIconProps(rightIcon) })
+      rightIcon && /* @__PURE__ */ (0, import_jsx_runtime199.jsx)(import_icon3.Icon, { ...getIconProps(rightIcon) })
     ] }), "renderContent");
     if (asChild) {
       const parent = import_react13.Children.only(children);
@@ -16712,7 +16714,7 @@ var PopoverContent = React17.forwardRef(
           /* @__PURE__ */ (0, import_jsx_runtime200.jsxs)("div", { className: style_module_default6.contentContainer, children: [
             (tag || icon || onClose) && /* @__PURE__ */ (0, import_jsx_runtime200.jsxs)("div", { className: style_module_default6.heading, children: [
               tag && /* @__PURE__ */ (0, import_jsx_runtime200.jsx)("span", { className: popoverTagVariants(), children: tag }),
-              icon && /* @__PURE__ */ (0, import_jsx_runtime200.jsx)(Icon, { name: icon.name, size: "xs", thick: icon.thick, fill: icon.fill }),
+              icon && /* @__PURE__ */ (0, import_jsx_runtime200.jsx)(Icon2, { name: icon.name, size: "xs", thick: icon.thick, fill: icon.fill }),
               /* @__PURE__ */ (0, import_jsx_runtime200.jsx)("p", { className: popoverTitleVariants(), children: title }),
               onClose && /* @__PURE__ */ (0, import_jsx_runtime200.jsx)(
                 import_radix_ui.Popover.PopoverClose,
@@ -16722,7 +16724,7 @@ var PopoverContent = React17.forwardRef(
                     onClose();
                   },
                   children: /* @__PURE__ */ (0, import_jsx_runtime200.jsx)(
-                    Icon,
+                    Icon2,
                     {
                       name: "close-fill",
                       size: "s",
@@ -16810,6 +16812,7 @@ var Tooltip = Object.assign(TooltipRoot, {
 // src/components/IconButton/index.tsx
 var import_cva8 = require("cva");
 var import_react15 = require("react");
+var import_icon4 = require("@liner-fe/icon");
 var import_clsx11 = __toESM(require("clsx"));
 
 // src/components/IconButton/style.module.scss
@@ -16927,7 +16930,7 @@ var IconButton = (0, import_react15.forwardRef)(
         "aria-label": icon.name,
         role: "button",
         children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime202.jsx)(Loading, { size: iconButtonLoadingSizeMap[size4], level: iconButtonLoadingLevelMap[level] }) : /* @__PURE__ */ (0, import_jsx_runtime202.jsx)(
-          Icon,
+          import_icon4.Icon,
           {
             size: iconButtonSizeIconSizeMap[size4],
             type: iconButtonLevelIconTypeMap[fill ? "fill" : "ghost"][level],
@@ -17046,7 +17049,7 @@ var Checkbox = (0, import_react17.forwardRef)(
       ] }),
       children
     ] }) : /* @__PURE__ */ (0, import_jsx_runtime204.jsx)(import_jsx_runtime204.Fragment, { children }), "CheckboxWrapper");
-    return /* @__PURE__ */ (0, import_jsx_runtime204.jsx)(CheckboxWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime204.jsx)(import_radix_ui5.Checkbox.Root, { className: (0, import_clsx13.default)(style_module_default10.checkbox, className), ref, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime204.jsx)(import_radix_ui5.Checkbox.Indicator, { className: style_module_default10["checkbox-indicator"], children: /* @__PURE__ */ (0, import_jsx_runtime204.jsx)(Icon, { name: "check-mark", thick: true, size: "xs", type: "inverse-label-primary" }) }) }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime204.jsx)(CheckboxWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime204.jsx)(import_radix_ui5.Checkbox.Root, { className: (0, import_clsx13.default)(style_module_default10.checkbox, className), ref, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime204.jsx)(import_radix_ui5.Checkbox.Indicator, { className: style_module_default10["checkbox-indicator"], children: /* @__PURE__ */ (0, import_jsx_runtime204.jsx)(Icon2, { name: "check-mark", thick: true, size: "xs", type: "inverse-label-primary" }) }) }) });
   }
 );
 
@@ -17274,7 +17277,7 @@ var Textfield = (0, import_react19.forwardRef)((props, ref) => {
     displayFooter && /* @__PURE__ */ (0, import_jsx_runtime206.jsxs)("div", { className: style_module_default13.footer, children: [
       /* @__PURE__ */ (0, import_jsx_runtime206.jsx)("div", { className: style_module_default13["error-wrapper"], children: error && /* @__PURE__ */ (0, import_jsx_runtime206.jsxs)(import_jsx_runtime206.Fragment, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(
-          Icon,
+          Icon2,
           {
             name: "exclamationmark-fill",
             fill: true,
@@ -17433,7 +17436,7 @@ var SelectRoot = (0, import_react20.forwardRef)(
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime207.jsxs)(import_radix_ui7.Select.Trigger, { className: style_module_default14.trigger, ref, id, children: [
               /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(import_radix_ui7.Select.Value, { className: style_module_default14.placeholder, placeholder }),
-              /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(import_radix_ui7.Select.Icon, { className: style_module_default14.openIcon, children: /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(Icon, { name: "arrow-drop-down", fill: true, thick: true, size: "xs" }) })
+              /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(import_radix_ui7.Select.Icon, { className: style_module_default14.openIcon, children: /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(Icon2, { name: "arrow-drop-down", fill: true, thick: true, size: "xs" }) })
             ] }),
             /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(SelectContent, { ...contentProps })
           ]
@@ -17454,8 +17457,8 @@ var SelectItem = /* @__PURE__ */ __name(({ value, text, disabled, icon, onClick
     },
     children: [
       /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(import_radix_ui7.Select.ItemText, { children: /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(Paragraph, { size: 3, type: "normal", weight: "medium", children: text ?? value }) }),
-      icon && /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(import_radix_ui7.Select.Icon, { className: style_module_default14.icon, children: /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(Icon, { size: "xs", ...icon }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(import_radix_ui7.Select.ItemIndicator, { className: style_module_default14.itemIndicator, children: /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(Icon, { fill: false, thick: true, size: "xs", name: "check-mark", type: "brand-label-primary" }) })
+      icon && /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(import_radix_ui7.Select.Icon, { className: style_module_default14.icon, children: /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(Icon2, { size: "xs", ...icon }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(import_radix_ui7.Select.ItemIndicator, { className: style_module_default14.itemIndicator, children: /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(Icon2, { fill: false, thick: true, size: "xs", name: "check-mark", type: "brand-label-primary" }) })
     ]
   }
 ), "SelectItem");
@@ -17519,7 +17522,7 @@ var Item = /* @__PURE__ */ __name(({ value, text, disabled, icon, onClick }) =>
       },
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime209.jsx)(Paragraph, { size: 3, type: "normal", weight: "medium", children: text }),
-        (icon || isSelected) && /* @__PURE__ */ (0, import_jsx_runtime209.jsx)(Icon, { className: style_module_default15.icon, size: "xs", ...iconProps })
+        (icon || isSelected) && /* @__PURE__ */ (0, import_jsx_runtime209.jsx)(Icon2, { className: style_module_default15.icon, size: "xs", ...iconProps })
       ]
     }
   );
@@ -17580,7 +17583,7 @@ var import_jsx_runtime210 = require("react/jsx-runtime");
 var SnackbarIcon = /* @__PURE__ */ __name((props) => {
   const { icon } = props;
   if (!icon) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime210.jsx)(Icon, { ...icon, size: "m", className: style_module_default17.container });
+  return /* @__PURE__ */ (0, import_jsx_runtime210.jsx)(Icon2, { ...icon, size: "m", className: style_module_default17.container });
 }, "SnackbarIcon");
 
 // src/components/Snackbar/SnackbarTitle/index.tsx
@@ -17713,7 +17716,7 @@ var SingleSnackbar = /* @__PURE__ */ __name((props) => {
             /* @__PURE__ */ (0, import_jsx_runtime215.jsx)(SnackbarDescription, { description })
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime215.jsx)(
-            Icon,
+            Icon2,
             {
               name: "arrow-forward",
               fill: true,
@@ -22270,7 +22273,7 @@ var CoachMarkContent = (0, import_react29.forwardRef)(
                 }
               ),
               icon && /* @__PURE__ */ (0, import_jsx_runtime225.jsx)(
-                Icon,
+                Icon2,
                 {
                   name: icon.name,
                   size: "xs",