@liner-fe/prism 2.7.7 → 2.7.9

package/lib/index.js

@@ -205,9 +205,9 @@ var buttonIconSizeMap = {
 };
 var buttonSizeIconThickMap = {
   cta: true,
-  l: false,
-  m: false,
-  s: false
+  l: void 0,
+  m: void 0,
+  s: void 0
 };
 var buttonLoadingSizeMap = {
   cta: "m",
@@ -1884,7 +1884,8 @@ var Paragraph = (0, import_react4.forwardRef)(
         className: (0, import_clsx2.default)(`lp-sys-typo-paragraph${size4}-${type}-${weight}`, className),
         ref,
         style: {
-          color: `var(--${color})`
+          color: `var(--${color})`,
+          ...rest.style
         },
         children
       }
@@ -2460,135 +2461,6 @@ var SingleToast = /* @__PURE__ */ __name((props) => {
 // src/components/Typography/Set/Heading.tsx
 var import_react7 = require("react");
 var import_clsx3 = __toESM(require("clsx"));
-
-// src/components/Typography/utils.ts
-var import_cva3 = require("cva");
-
-// src/components/Typography/Set/style.module.scss
-var style_module_default4 = {
-  "caption": "_caption_2vn3a_1",
-  "typography": "_typography_2vn3a_6"
-};
-
-// 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/Typography/utils.ts
-var colorVariants = (0, import_cva3.cva)({
-  base: style_module_default4.typography,
-  variants: {
-    type: arrayToStyleObject(colorOptions, style_module_default4)
-  }
-});
-
-// src/components/Typography/Set/Heading.tsx
 var import_jsx_runtime14 = require("react/jsx-runtime");
 var Heading = (0, import_react7.forwardRef)(
   ({ size: size4, children, type, className, color = "neutral-label-primary", as, ...rest }, ref) => {
@@ -2597,12 +2469,12 @@ var Heading = (0, import_react7.forwardRef)(
       Element2,
       {
         ...rest,
-        className: (0, import_clsx3.default)(
-          `lp-sys-typo-heading${size4}-${type}`,
-          colorVariants({ type: color }),
-          className
-        ),
+        className: (0, import_clsx3.default)(`lp-sys-typo-heading${size4}-${type}`, className),
         ref,
+        style: {
+          color: `var(--${color})`,
+          ...rest.style
+        },
         children
       }
     );
@@ -2611,6 +2483,14 @@ var Heading = (0, import_react7.forwardRef)(
 
 // src/components/Typography/Set/Caption.tsx
 var import_clsx4 = __toESM(require("clsx"));
+
+// src/components/Typography/Set/style.module.scss
+var style_module_default4 = {
+  "caption": "_caption_2vn3a_1",
+  "typography": "_typography_2vn3a_6"
+};
+
+// src/components/Typography/Set/Caption.tsx
 var import_react8 = require("react");
 var import_jsx_runtime15 = require("react/jsx-runtime");
 var Caption = (0, import_react8.forwardRef)(
@@ -2631,7 +2511,8 @@ var Caption = (0, import_react8.forwardRef)(
         className: (0, import_clsx4.default)(`lp-sys-typo-caption${size4}-${type}-${weight}`, style_module_default4.caption, className),
         ref,
         style: {
-          color: `var(--${color})`
+          color: `var(--${color})`,
+          ...rest.style
         },
         children
       }
@@ -2662,7 +2543,8 @@ var Title2 = (0, import_react9.forwardRef)(
         className: (0, import_clsx5.default)(`lp-sys-typo-title${size4}-${type}-${weight}`, className),
         ref,
         style: {
-          color: `var(--${color})`
+          color: `var(--${color})`,
+          ...rest.style
         },
         children
       }
@@ -2692,7 +2574,8 @@ var Display = (0, import_react10.forwardRef)(
         ref,
         className: (0, import_clsx6.default)(`lp-sys-typo-display${size4}-${type}-${weight}`, className),
         style: {
-          color: `var(--${color})`
+          color: `var(--${color})`,
+          ...rest.style
         },
         children
       }
@@ -2812,13 +2695,13 @@ var style_module_default5 = {
 };
 
 // src/components/Popover/index.tsx
-var import_cva5 = require("cva");
+var import_cva4 = require("cva");
 var import_clsx8 = require("clsx");
 var import_icon4 = require("@liner-fe/icon");
 
 // src/components/TextButton/index.tsx
 var import_icon3 = require("@liner-fe/icon");
-var import_cva4 = require("cva");
+var import_cva3 = require("cva");
 
 // src/components/TextButton/style.module.scss
 var style_module_default6 = {
@@ -2854,7 +2737,7 @@ var textButtonLevelIconFillTypeMap = {
   inverse: "neutral-label-primary",
   "inverse-static": "neutral-label-static-primary"
 };
-var textButtonVariants = (0, import_cva4.cva)({
+var textButtonVariants = (0, import_cva3.cva)({
   base: [style_module_default6.button, style_module_default6.text],
   variants: {
     level: {
@@ -2929,7 +2812,7 @@ TextButton.displayName = "TextButton";
 // src/components/Popover/index.tsx
 var import_jsx_runtime20 = require("react/jsx-runtime");
 var DEFAULT_OFFSET = -6;
-var popoverVariants = (0, import_cva5.cva)({
+var popoverVariants = (0, import_cva4.cva)({
   base: style_module_default5.content,
   variants: {
     level: {
@@ -2938,7 +2821,7 @@ var popoverVariants = (0, import_cva5.cva)({
     }
   }
 });
-var popoverAnchorVariants = (0, import_cva5.cva)({
+var popoverAnchorVariants = (0, import_cva4.cva)({
   base: style_module_default5.anchor,
   variants: {
     level: {
@@ -2947,12 +2830,12 @@ var popoverAnchorVariants = (0, import_cva5.cva)({
     }
   }
 });
-var popoverTagVariants = (0, import_cva5.cva)({ base: [style_module_default5.tag, "lp-sys-typo-caption3-normal-bold"] });
-var popoverTitleVariants = (0, import_cva5.cva)({ base: [style_module_default5.title, "lp-sys-typo-paragraph3-normal-bold"] });
-var popoverDescriptionVariants = (0, import_cva5.cva)({
+var popoverTagVariants = (0, import_cva4.cva)({ base: [style_module_default5.tag, "lp-sys-typo-caption3-normal-bold"] });
+var popoverTitleVariants = (0, import_cva4.cva)({ base: [style_module_default5.title, "lp-sys-typo-paragraph3-normal-bold"] });
+var popoverDescriptionVariants = (0, import_cva4.cva)({
   base: [style_module_default5.description, "lp-sys-typo-caption1-normal-regular"]
 });
-var popoverFooterVariants = (0, import_cva5.cva)({ base: [style_module_default5.footer, "lp-sys-typo-caption1-normal-medium"] });
+var popoverFooterVariants = (0, import_cva4.cva)({ base: [style_module_default5.footer, "lp-sys-typo-caption1-normal-medium"] });
 var PopoverRoot = /* @__PURE__ */ __name(({ isOpen, children, onChange }) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_radix_ui.Popover.Root, { open: isOpen, onOpenChange: onChange, children }), "PopoverRoot");
 var PopoverTrigger = /* @__PURE__ */ __name(({ by }) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_radix_ui.Popover.Trigger, { asChild: true, children: by }), "PopoverTrigger");
 var PopoverAnchor = /* @__PURE__ */ __name(({ className }) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
@@ -3068,11 +2951,11 @@ var style_module_default7 = {
 };
 
 // src/components/Tooltip/index.tsx
-var import_cva6 = require("cva");
+var import_cva5 = require("cva");
 var import_clsx9 = __toESM(require("clsx"));
 var import_jsx_runtime21 = require("react/jsx-runtime");
 var DEFAULT_OFFSET2 = "medium";
-var tooltipVariants = (0, import_cva6.cva)({ base: [style_module_default7.tooltip, "lp-sys-typo-caption1-normal-medium"] });
+var tooltipVariants = (0, import_cva5.cva)({ base: [style_module_default7.tooltip, "lp-sys-typo-caption1-normal-medium"] });
 var TooltipProvider = import_radix_ui2.Tooltip.Provider;
 var TooltipRoot = /* @__PURE__ */ __name(({ children, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_radix_ui2.Tooltip.Root, { delayDuration: 0, ...props, children }), "TooltipRoot");
 var TooltipTrigger = /* @__PURE__ */ __name(({ by }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_radix_ui2.Tooltip.Trigger, { asChild: true, children: by }), "TooltipTrigger");
@@ -3104,7 +2987,7 @@ var Tooltip = Object.assign(TooltipRoot, {
 });
 
 // src/components/IconButton/index.tsx
-var import_cva7 = require("cva");
+var import_cva6 = require("cva");
 var import_react14 = require("react");
 var import_icon5 = require("@liner-fe/icon");
 var import_clsx10 = __toESM(require("clsx"));
@@ -3176,7 +3059,7 @@ var iconButtonLevelIconTypeMap = {
     "inverse-static": "inverse-label-static-primary"
   }
 };
-var iconButtonVariants = (0, import_cva7.cva)({
+var iconButtonVariants = (0, import_cva6.cva)({
   base: [style_module_default8.iconButton],
   variants: {
     level: {
@@ -3276,9 +3159,9 @@ var style_module_default10 = {
 };
 
 // src/components/Label/index.tsx
-var import_cva8 = require("cva");
+var import_cva7 = require("cva");
 var import_jsx_runtime23 = require("react/jsx-runtime");
-var defaultLabelVariants = (0, import_cva8.cva)({
+var defaultLabelVariants = (0, import_cva7.cva)({
   base: ["lp-sys-typo-paragraph2-normal-medium", style_module_default10.label],
   variants: {
     level: {
@@ -3418,12 +3301,12 @@ var style_module_default12 = {
 };
 
 // src/components/Textfield/index.tsx
-var import_cva9 = require("cva");
+var import_cva8 = require("cva");
 var import_clsx14 = __toESM(require("clsx"));
 var import_icon7 = require("@liner-fe/icon");
 var import_react_dom2 = require("react-dom");
 var import_jsx_runtime26 = require("react/jsx-runtime");
-var defaultTextfieldVariants = (0, import_cva9.cva)({
+var defaultTextfieldVariants = (0, import_cva8.cva)({
   base: style_module_default12.textfield,
   variants: {
     color: {
@@ -3755,7 +3638,7 @@ var SelectItem = /* @__PURE__ */ __name(({ value, text, disabled, icon, onClick
     children: [
       /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_radix_ui7.Select.ItemText, { children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Paragraph, { size: 3, type: "normal", weight: "medium", children: text ?? value }) }),
       icon && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_radix_ui7.Select.Icon, { className: style_module_default13.icon, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_icon8.Icon, { size: "xs", ...icon }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_radix_ui7.Select.ItemIndicator, { className: style_module_default13.itemIndicator, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_icon8.Icon, { fill: false, thick: true, size: "xs", name: "check-mark", type: "brand-label-primary" }) })
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_radix_ui7.Select.ItemIndicator, { className: style_module_default13.itemIndicator, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_icon8.Icon, { thick: true, size: "xs", name: "check-mark", type: "brand-label-primary" }) })
     ]
   }
 ), "SelectItem");
@@ -8078,7 +7961,7 @@ var Close = PopoverClose;
 var Arrow22 = PopoverArrow;
 
 // src/components/coach-mark/primitive/index.tsx
-var import_cva10 = require("cva");
+var import_cva9 = require("cva");
 var import_clsx19 = __toESM(require("clsx"));
 var import_react25 = require("react");
 
@@ -8091,10 +7974,10 @@ var style_module_default18 = {
 
 // src/components/coach-mark/primitive/index.tsx
 var import_jsx_runtime41 = require("react/jsx-runtime");
-var primitiveCoachMarkVariants = (0, import_cva10.cva)({
+var primitiveCoachMarkVariants = (0, import_cva9.cva)({
   base: style_module_default18.content
 });
-var primitiveCoachMarkAnchorVariants = (0, import_cva10.cva)({
+var primitiveCoachMarkAnchorVariants = (0, import_cva9.cva)({
   base: style_module_default18.anchor
 });
 var PrimitiveCoachMarkTrigger = /* @__PURE__ */ __name(({ by }) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Trigger, { asChild: true, children: by }), "PrimitiveCoachMarkTrigger");
@@ -8155,241 +8038,159 @@ var style_module_default19 = {
 
 // src/components/coach-mark/compact/index.tsx
 var import_clsx20 = __toESM(require("clsx"));
-var import_cva12 = require("cva");
+var import_cva11 = require("cva");
 
 // src/components/Tag/index.tsx
 var import_react26 = require("react");
 
 // src/components/Tag/style.module.scss
 var style_module_default20 = {
-  "tag": "_tag_148vi_2",
-  "s": "_s_148vi_12",
-  "m": "_m_148vi_18",
-  "l": "_l_148vi_24",
-  "thick": "_thick_148vi_30",
-  "square": "_square_148vi_34",
-  "rounded": "_rounded_148vi_38",
-  "bg-neutral-label-primary": "_bg-neutral-label-primary_148vi_47",
-  "bg-neutral-label-secondary": "_bg-neutral-label-secondary_148vi_51",
-  "bg-neutral-label-tertiary": "_bg-neutral-label-tertiary_148vi_55",
-  "bg-neutral-label-quaternary": "_bg-neutral-label-quaternary_148vi_59",
-  "bg-neutral-label-static-primary": "_bg-neutral-label-static-primary_148vi_63",
-  "bg-neutral-label-static-secondary": "_bg-neutral-label-static-secondary_148vi_67",
-  "bg-inverse-label-primary": "_bg-inverse-label-primary_148vi_71",
-  "bg-inverse-label-secondary": "_bg-inverse-label-secondary_148vi_75",
-  "bg-inverse-label-tertiary": "_bg-inverse-label-tertiary_148vi_79",
-  "bg-inverse-label-quaternary": "_bg-inverse-label-quaternary_148vi_83",
-  "bg-inverse-label-static-primary": "_bg-inverse-label-static-primary_148vi_87",
-  "bg-inverse-label-static-secondary": "_bg-inverse-label-static-secondary_148vi_91",
-  "bg-brand-label-primary": "_bg-brand-label-primary_148vi_95",
-  "bg-brand-label-secondary": "_bg-brand-label-secondary_148vi_99",
-  "bg-brand-label-variation-secondary": "_bg-brand-label-variation-secondary_148vi_103",
-  "bg-brandinverse-label-primary": "_bg-brandinverse-label-primary_148vi_107",
-  "bg-brandinverse-label-secondary": "_bg-brandinverse-label-secondary_148vi_111",
-  "bg-brandinverse-label-static-primary": "_bg-brandinverse-label-static-primary_148vi_115",
-  "bg-function-label-positive": "_bg-function-label-positive_148vi_119",
-  "bg-function-label-negative": "_bg-function-label-negative_148vi_123",
-  "bg-function-label-caution": "_bg-function-label-caution_148vi_127",
-  "bg-function-label-link": "_bg-function-label-link_148vi_131",
-  "bg-accent-label-primary": "_bg-accent-label-primary_148vi_135",
-  "bg-accent-label-yellow": "_bg-accent-label-yellow_148vi_139",
-  "bg-accent-label-mint": "_bg-accent-label-mint_148vi_143",
-  "bg-accent-label-cyan": "_bg-accent-label-cyan_148vi_147",
-  "bg-accent-label-purple": "_bg-accent-label-purple_148vi_151",
-  "bg-accent-label-pink": "_bg-accent-label-pink_148vi_155",
-  "bg-neutral-container-variation-lowest": "_bg-neutral-container-variation-lowest_148vi_159",
-  "bg-neutral-container-lowest-hover": "_bg-neutral-container-lowest-hover_148vi_163",
-  "bg-neutral-container-lowest": "_bg-neutral-container-lowest_148vi_163",
-  "bg-neutral-container-low": "_bg-neutral-container-low_148vi_163",
-  "bg-neutral-container-low-hover": "_bg-neutral-container-low-hover_148vi_175",
-  "bg-neutral-container-mid": "_bg-neutral-container-mid_148vi_179",
-  "bg-neutral-container-mid-hover": "_bg-neutral-container-mid-hover_148vi_183",
-  "bg-neutral-container-high": "_bg-neutral-container-high_148vi_187",
-  "bg-neutral-container-high-hover": "_bg-neutral-container-high-hover_148vi_191",
-  "bg-neutral-container-highest": "_bg-neutral-container-highest_148vi_195",
-  "bg-neutral-container-static-lowest": "_bg-neutral-container-static-lowest_148vi_199",
-  "bg-neutral-container-static-lowest-hover": "_bg-neutral-container-static-lowest-hover_148vi_203",
-  "bg-inverse-container-lowest": "_bg-inverse-container-lowest_148vi_207",
-  "bg-inverse-container-lowest-hover": "_bg-inverse-container-lowest-hover_148vi_211",
-  "bg-inverse-container-low": "_bg-inverse-container-low_148vi_207",
-  "bg-inverse-container-low-hover": "_bg-inverse-container-low-hover_148vi_219",
-  "bg-inverse-container-mid": "_bg-inverse-container-mid_148vi_223",
-  "bg-inverse-container-mid-hover": "_bg-inverse-container-mid-hover_148vi_227",
-  "bg-inverse-container-high": "_bg-inverse-container-high_148vi_231",
-  "bg-inverse-container-high-hover": "_bg-inverse-container-high-hover_148vi_235",
-  "bg-inverse-container-static-high": "_bg-inverse-container-static-high_148vi_239",
-  "bg-inverse-container-static-high-hover": "_bg-inverse-container-static-high-hover_148vi_243",
-  "bg-inverse-container-highest": "_bg-inverse-container-highest_148vi_247",
-  "bg-brand-container-mid": "_bg-brand-container-mid_148vi_251",
-  "bg-brand-container-mid-hover": "_bg-brand-container-mid-hover_148vi_255",
-  "bg-brand-container-high": "_bg-brand-container-high_148vi_259",
-  "bg-neutral-fill-overlay-lowest": "_bg-neutral-fill-overlay-lowest_148vi_263",
-  "bg-neutral-fill-overlay-lowest-hover": "_bg-neutral-fill-overlay-lowest-hover_148vi_267",
-  "bg-neutral-fill-overlay-low": "_bg-neutral-fill-overlay-low_148vi_263",
-  "bg-neutral-fill-overlay-low-hover": "_bg-neutral-fill-overlay-low-hover_148vi_275",
-  "bg-neutral-fill-overlay-mid": "_bg-neutral-fill-overlay-mid_148vi_279",
-  "bg-neutral-fill-overlay-mid-hover": "_bg-neutral-fill-overlay-mid-hover_148vi_283",
-  "bg-neutral-fill-overlay-high": "_bg-neutral-fill-overlay-high_148vi_287",
-  "bg-neutral-fill-overlay-high-hover": "_bg-neutral-fill-overlay-high-hover_148vi_291",
-  "bg-neutral-fill-overlay-highest": "_bg-neutral-fill-overlay-highest_148vi_295",
-  "bg-neutral-fill-opaque-lowest": "_bg-neutral-fill-opaque-lowest_148vi_299",
-  "bg-neutral-fill-opaque-lowest-hover": "_bg-neutral-fill-opaque-lowest-hover_148vi_303",
-  "bg-neutral-fill-opaque-low": "_bg-neutral-fill-opaque-low_148vi_299",
-  "bg-neutral-fill-opaque-low-hover": "_bg-neutral-fill-opaque-low-hover_148vi_311",
-  "bg-neutral-fill-opaque-static-lowest": "_bg-neutral-fill-opaque-static-lowest_148vi_315",
-  "bg-inverse-fill-mid": "_bg-inverse-fill-mid_148vi_319",
-  "bg-inverse-fill-mid-hover": "_bg-inverse-fill-mid-hover_148vi_323",
-  "bg-inverse-fill-opaque-lowest": "_bg-inverse-fill-opaque-lowest_148vi_327",
-  "bg-inverse-fill-opaque-lowest-hover": "_bg-inverse-fill-opaque-lowest-hover_148vi_331",
-  "bg-inverse-fill-opaque-low": "_bg-inverse-fill-opaque-low_148vi_327",
-  "bg-inverse-fill-opaque-low-hover": "_bg-inverse-fill-opaque-low-hover_148vi_339",
-  "bg-inverse-fill-opaque-mid": "_bg-inverse-fill-opaque-mid_148vi_343",
-  "bg-brand-fill-mid": "_bg-brand-fill-mid_148vi_347",
-  "bg-brand-fill-mid-hover": "_bg-brand-fill-mid-hover_148vi_351",
-  "bg-brand-fill-low": "_bg-brand-fill-low_148vi_355",
-  "bg-brand-fill-low-hover": "_bg-brand-fill-low-hover_148vi_359",
-  "bg-accent-fill-primary": "_bg-accent-fill-primary_148vi_363",
-  "bg-function-fill-positive-mid": "_bg-function-fill-positive-mid_148vi_367",
-  "bg-function-fill-positive-low": "_bg-function-fill-positive-low_148vi_371",
-  "bg-function-fill-negative-mid": "_bg-function-fill-negative-mid_148vi_375",
-  "bg-function-fill-negative-low": "_bg-function-fill-negative-low_148vi_379",
-  "bg-function-fill-negative-mid-hover": "_bg-function-fill-negative-mid-hover_148vi_383",
-  "bg-function-fill-caution": "_bg-function-fill-caution_148vi_387",
-  "bg-function-fill-highlight": "_bg-function-fill-highlight_148vi_391",
-  "bg-function-fill-selection": "_bg-function-fill-selection_148vi_395",
-  "bg-function-fill-drag": "_bg-function-fill-drag_148vi_399",
-  "bg-cover-dim-page": "_bg-cover-dim-page_148vi_403",
-  "color-neutral-label-primary": "_color-neutral-label-primary_148vi_410",
-  "color-neutral-label-secondary": "_color-neutral-label-secondary_148vi_414",
-  "color-neutral-label-tertiary": "_color-neutral-label-tertiary_148vi_418",
-  "color-neutral-label-quaternary": "_color-neutral-label-quaternary_148vi_422",
-  "color-neutral-label-static-primary": "_color-neutral-label-static-primary_148vi_426",
-  "color-neutral-label-static-secondary": "_color-neutral-label-static-secondary_148vi_430",
-  "color-inverse-label-primary": "_color-inverse-label-primary_148vi_434",
-  "color-inverse-label-secondary": "_color-inverse-label-secondary_148vi_438",
-  "color-inverse-label-tertiary": "_color-inverse-label-tertiary_148vi_442",
-  "color-inverse-label-quaternary": "_color-inverse-label-quaternary_148vi_446",
-  "color-inverse-label-static-primary": "_color-inverse-label-static-primary_148vi_450",
-  "color-inverse-label-static-secondary": "_color-inverse-label-static-secondary_148vi_454",
-  "color-brand-label-primary": "_color-brand-label-primary_148vi_458",
-  "color-brand-label-secondary": "_color-brand-label-secondary_148vi_462",
-  "color-brand-label-variation-secondary": "_color-brand-label-variation-secondary_148vi_466",
-  "color-brandinverse-label-primary": "_color-brandinverse-label-primary_148vi_470",
-  "color-brandinverse-label-secondary": "_color-brandinverse-label-secondary_148vi_474",
-  "color-brandinverse-label-static-primary": "_color-brandinverse-label-static-primary_148vi_478",
-  "color-function-label-positive": "_color-function-label-positive_148vi_482",
-  "color-function-label-negative": "_color-function-label-negative_148vi_486",
-  "color-function-label-caution": "_color-function-label-caution_148vi_490",
-  "color-function-label-link": "_color-function-label-link_148vi_494",
-  "color-accent-label-primary": "_color-accent-label-primary_148vi_498",
-  "color-accent-label-yellow": "_color-accent-label-yellow_148vi_502",
-  "color-accent-label-mint": "_color-accent-label-mint_148vi_506",
-  "color-accent-label-cyan": "_color-accent-label-cyan_148vi_510",
-  "color-accent-label-purple": "_color-accent-label-purple_148vi_514",
-  "color-accent-label-pink": "_color-accent-label-pink_148vi_518",
-  "color-neutral-container-variation-lowest": "_color-neutral-container-variation-lowest_148vi_522",
-  "color-neutral-container-lowest-hover": "_color-neutral-container-lowest-hover_148vi_526",
-  "color-neutral-container-lowest": "_color-neutral-container-lowest_148vi_526",
-  "color-neutral-container-low": "_color-neutral-container-low_148vi_526",
-  "color-neutral-container-low-hover": "_color-neutral-container-low-hover_148vi_538",
-  "color-neutral-container-mid": "_color-neutral-container-mid_148vi_542",
-  "color-neutral-container-mid-hover": "_color-neutral-container-mid-hover_148vi_546",
-  "color-neutral-container-high": "_color-neutral-container-high_148vi_550",
-  "color-neutral-container-high-hover": "_color-neutral-container-high-hover_148vi_554",
-  "color-neutral-container-highest": "_color-neutral-container-highest_148vi_558",
-  "color-neutral-container-static-lowest": "_color-neutral-container-static-lowest_148vi_562",
-  "color-neutral-container-static-lowest-hover": "_color-neutral-container-static-lowest-hover_148vi_566",
-  "color-inverse-container-lowest": "_color-inverse-container-lowest_148vi_570",
-  "color-inverse-container-lowest-hover": "_color-inverse-container-lowest-hover_148vi_574",
-  "color-inverse-container-low": "_color-inverse-container-low_148vi_570",
-  "color-inverse-container-low-hover": "_color-inverse-container-low-hover_148vi_582",
-  "color-inverse-container-mid": "_color-inverse-container-mid_148vi_586",
-  "color-inverse-container-mid-hover": "_color-inverse-container-mid-hover_148vi_590",
-  "color-inverse-container-high": "_color-inverse-container-high_148vi_594",
-  "color-inverse-container-high-hover": "_color-inverse-container-high-hover_148vi_598",
-  "color-inverse-container-static-high": "_color-inverse-container-static-high_148vi_602",
-  "color-inverse-container-static-high-hover": "_color-inverse-container-static-high-hover_148vi_606",
-  "color-inverse-container-highest": "_color-inverse-container-highest_148vi_610",
-  "color-brand-container-mid": "_color-brand-container-mid_148vi_614",
-  "color-brand-container-mid-hover": "_color-brand-container-mid-hover_148vi_618",
-  "color-brand-container-high": "_color-brand-container-high_148vi_622",
-  "color-neutral-fill-overlay-lowest": "_color-neutral-fill-overlay-lowest_148vi_626",
-  "color-neutral-fill-overlay-lowest-hover": "_color-neutral-fill-overlay-lowest-hover_148vi_630",
-  "color-neutral-fill-overlay-low": "_color-neutral-fill-overlay-low_148vi_626",
-  "color-neutral-fill-overlay-low-hover": "_color-neutral-fill-overlay-low-hover_148vi_638",
-  "color-neutral-fill-overlay-mid": "_color-neutral-fill-overlay-mid_148vi_642",
-  "color-neutral-fill-overlay-mid-hover": "_color-neutral-fill-overlay-mid-hover_148vi_646",
-  "color-neutral-fill-overlay-high": "_color-neutral-fill-overlay-high_148vi_650",
-  "color-neutral-fill-overlay-high-hover": "_color-neutral-fill-overlay-high-hover_148vi_654",
-  "color-neutral-fill-overlay-highest": "_color-neutral-fill-overlay-highest_148vi_658",
-  "color-neutral-fill-opaque-lowest": "_color-neutral-fill-opaque-lowest_148vi_662",
-  "color-neutral-fill-opaque-lowest-hover": "_color-neutral-fill-opaque-lowest-hover_148vi_666",
-  "color-neutral-fill-opaque-low": "_color-neutral-fill-opaque-low_148vi_662",
-  "color-neutral-fill-opaque-low-hover": "_color-neutral-fill-opaque-low-hover_148vi_674",
-  "color-neutral-fill-opaque-static-lowest": "_color-neutral-fill-opaque-static-lowest_148vi_678",
-  "color-inverse-fill-mid": "_color-inverse-fill-mid_148vi_682",
-  "color-inverse-fill-mid-hover": "_color-inverse-fill-mid-hover_148vi_686",
-  "color-inverse-fill-opaque-lowest": "_color-inverse-fill-opaque-lowest_148vi_690",
-  "color-inverse-fill-opaque-lowest-hover": "_color-inverse-fill-opaque-lowest-hover_148vi_694",
-  "color-inverse-fill-opaque-low": "_color-inverse-fill-opaque-low_148vi_690",
-  "color-inverse-fill-opaque-low-hover": "_color-inverse-fill-opaque-low-hover_148vi_702",
-  "color-inverse-fill-opaque-mid": "_color-inverse-fill-opaque-mid_148vi_706",
-  "color-brand-fill-mid": "_color-brand-fill-mid_148vi_710",
-  "color-brand-fill-mid-hover": "_color-brand-fill-mid-hover_148vi_714",
-  "color-brand-fill-low": "_color-brand-fill-low_148vi_718",
-  "color-brand-fill-low-hover": "_color-brand-fill-low-hover_148vi_722",
-  "color-accent-fill-primary": "_color-accent-fill-primary_148vi_726",
-  "color-function-fill-positive-mid": "_color-function-fill-positive-mid_148vi_730",
-  "color-function-fill-positive-low": "_color-function-fill-positive-low_148vi_734",
-  "color-function-fill-negative-mid": "_color-function-fill-negative-mid_148vi_738",
-  "color-function-fill-negative-low": "_color-function-fill-negative-low_148vi_742",
-  "color-function-fill-negative-mid-hover": "_color-function-fill-negative-mid-hover_148vi_746",
-  "color-function-fill-caution": "_color-function-fill-caution_148vi_750",
-  "color-function-fill-highlight": "_color-function-fill-highlight_148vi_754",
-  "color-function-fill-selection": "_color-function-fill-selection_148vi_758",
-  "color-function-fill-drag": "_color-function-fill-drag_148vi_762",
-  "color-cover-dim-page": "_color-cover-dim-page_148vi_766",
-  "border-neutral-border-overlay-strong": "_border-neutral-border-overlay-strong_148vi_773",
-  "border-neutral-border-overlay-normal": "_border-neutral-border-overlay-normal_148vi_777",
-  "border-neutral-border-overlay-subtle": "_border-neutral-border-overlay-subtle_148vi_781",
-  "border-neutral-border-overlay-hint": "_border-neutral-border-overlay-hint_148vi_785",
-  "border-neutral-border-opaque-strong": "_border-neutral-border-opaque-strong_148vi_789",
-  "border-neutral-border-opaque-normal": "_border-neutral-border-opaque-normal_148vi_793",
-  "border-neutral-border-opaque-subtle": "_border-neutral-border-opaque-subtle_148vi_797",
-  "border-inverse-border-overlay-strong": "_border-inverse-border-overlay-strong_148vi_801",
-  "border-inverse-border-overlay-normal": "_border-inverse-border-overlay-normal_148vi_805",
-  "border-inverse-border-overlay-subtle": "_border-inverse-border-overlay-subtle_148vi_809",
-  "border-inverse-border-overlay-hint": "_border-inverse-border-overlay-hint_148vi_813",
-  "border-inverse-border-opaque-strong": "_border-inverse-border-opaque-strong_148vi_817",
-  "border-inverse-border-opaque-normal": "_border-inverse-border-opaque-normal_148vi_821",
-  "border-inverse-border-opaque-subtle": "_border-inverse-border-opaque-subtle_148vi_825",
-  "border-brand-border-opaque-normal": "_border-brand-border-opaque-normal_148vi_829",
-  "border-brand-border-opaque-strong": "_border-brand-border-opaque-strong_148vi_833",
-  "bg-accent-yellow": "_bg-accent-yellow_148vi_837",
-  "bg-accent-mint": "_bg-accent-mint_148vi_841",
-  "bg-accent-cyan": "_bg-accent-cyan_148vi_845",
-  "bg-accent-purple": "_bg-accent-purple_148vi_849",
-  "bg-accent-pink": "_bg-accent-pink_148vi_853",
-  "color-accent-yellow": "_color-accent-yellow_148vi_857",
-  "color-accent-mint": "_color-accent-mint_148vi_861",
-  "color-accent-cyan": "_color-accent-cyan_148vi_865",
-  "color-accent-purple": "_color-accent-purple_148vi_869",
-  "color-accent-pink": "_color-accent-pink_148vi_873",
-  "border-accent-yellow": "_border-accent-yellow_148vi_877",
-  "border-accent-mint": "_border-accent-mint_148vi_881",
-  "border-accent-cyan": "_border-accent-cyan_148vi_885",
-  "border-accent-purple": "_border-accent-purple_148vi_889",
-  "border-accent-pink": "_border-accent-pink_148vi_893"
+  "tag": "_tag_xyr7c_2",
+  "s": "_s_xyr7c_12",
+  "m": "_m_xyr7c_18",
+  "l": "_l_xyr7c_24",
+  "thick": "_thick_xyr7c_30",
+  "square": "_square_xyr7c_34",
+  "rounded": "_rounded_xyr7c_38",
+  "border-neutral-border-overlay-strong": "_border-neutral-border-overlay-strong_xyr7c_47",
+  "border-neutral-border-overlay-normal": "_border-neutral-border-overlay-normal_xyr7c_51",
+  "border-neutral-border-overlay-subtle": "_border-neutral-border-overlay-subtle_xyr7c_55",
+  "border-neutral-border-overlay-hint": "_border-neutral-border-overlay-hint_xyr7c_59",
+  "border-neutral-border-opaque-strong": "_border-neutral-border-opaque-strong_xyr7c_63",
+  "border-neutral-border-opaque-normal": "_border-neutral-border-opaque-normal_xyr7c_67",
+  "border-neutral-border-opaque-subtle": "_border-neutral-border-opaque-subtle_xyr7c_71",
+  "border-inverse-border-overlay-strong": "_border-inverse-border-overlay-strong_xyr7c_75",
+  "border-inverse-border-overlay-normal": "_border-inverse-border-overlay-normal_xyr7c_79",
+  "border-inverse-border-overlay-subtle": "_border-inverse-border-overlay-subtle_xyr7c_83",
+  "border-inverse-border-overlay-hint": "_border-inverse-border-overlay-hint_xyr7c_87",
+  "border-inverse-border-opaque-strong": "_border-inverse-border-opaque-strong_xyr7c_91",
+  "border-inverse-border-opaque-normal": "_border-inverse-border-opaque-normal_xyr7c_95",
+  "border-inverse-border-opaque-subtle": "_border-inverse-border-opaque-subtle_xyr7c_99",
+  "border-brand-border-opaque-normal": "_border-brand-border-opaque-normal_xyr7c_103",
+  "border-brand-border-opaque-strong": "_border-brand-border-opaque-strong_xyr7c_107",
+  "border-accent-yellow": "_border-accent-yellow_xyr7c_111",
+  "border-accent-mint": "_border-accent-mint_xyr7c_115",
+  "border-accent-cyan": "_border-accent-cyan_xyr7c_119",
+  "border-accent-purple": "_border-accent-purple_xyr7c_123",
+  "border-accent-pink": "_border-accent-pink_xyr7c_127"
 };
 
+// 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/Tag/index.tsx
-var import_cva11 = require("cva");
+var import_cva10 = require("cva");
 var import_jsx_runtime42 = require("react/jsx-runtime");
-var tagVariants = (0, import_cva11.cva)({
+var tagVariants = (0, import_cva10.cva)({
   base: style_module_default20.tag,
   variants: {
-    color: arrayToStyleObject(colorOptions, style_module_default20, "color"),
-    backgroundColor: arrayToStyleObject(colorOptions, style_module_default20, "bg"),
     borderColor: arrayToStyleObject(colorOptions, style_module_default20, "border"),
     size: {
       s: style_module_default20.s,
@@ -8423,8 +8224,9 @@ var Tag = (0, import_react26.forwardRef)(
         size: 3,
         type: "normal",
         weight: "bold",
-        className: tagVariants({ color, backgroundColor, borderColor, size: size4, thick, radius }),
+        className: tagVariants({ borderColor, size: size4, thick, radius }),
         color,
+        style: { backgroundColor: `var(--${backgroundColor})` },
         ...rest,
         children
       }
@@ -8434,7 +8236,7 @@ var Tag = (0, import_react26.forwardRef)(
 
 // src/components/coach-mark/compact/index.tsx
 var import_jsx_runtime43 = require("react/jsx-runtime");
-var compactCoachMarkVariants = (0, import_cva12.cva)({
+var compactCoachMarkVariants = (0, import_cva11.cva)({
   base: style_module_default19.content,
   variants: {
     level: {
@@ -8494,7 +8296,7 @@ var style_module_default21 = {
 // src/components/coach-mark/main/index.tsx
 var import_react28 = require("react");
 var import_icon12 = require("@liner-fe/icon");
-var import_cva13 = require("cva");
+var import_cva12 = require("cva");
 var import_clsx21 = __toESM(require("clsx"));
 
 // src/constants/illust/size.ts
@@ -8588,7 +8390,7 @@ var Illust = /* @__PURE__ */ __name((props) => {
 
 // src/components/coach-mark/main/index.tsx
 var import_jsx_runtime45 = require("react/jsx-runtime");
-var coachMarkVariants = (0, import_cva13.cva)({
+var coachMarkVariants = (0, import_cva12.cva)({
   base: style_module_default21.content,
   variants: {
     level: {