@telepix-lab/telepix-ui 0.7.1 → 0.8.1

package/dist/cjs/client.d.ts

@@ -32,3 +32,4 @@ export type { AutocompleteProps } from "./autocomplete";
 export { Switch } from "./switch";
 export { SWITCH_SIZES, SWITCH_VARIANTS } from "./switch/types";
 export type { SwitchSize, SwitchVariant } from "./switch/types";
+export { getColorHex } from "./lib/color-utils";

package/dist/cjs/client.js

@@ -13068,7 +13068,7 @@ const MultipleSelect = React.forwardRef(({ open, onOpenChange, disabled, value,
 });
 const MultipleSelectTrigger = React.forwardRef(({ size = "regular", children, ...rest }, ref) => {
     const { className, onClick, ...otherProps } = rest;
-    const { disabled, values, isOpen, setIsOpen } = React.useContext(MultipleSelectContext);
+    const { disabled, isOpen, setIsOpen } = React.useContext(MultipleSelectContext);
     const handleTriggerClick = (e) => {
         e.stopPropagation();
         if (disabled)
@@ -13716,6 +13716,135 @@ const Switch = (props) => {
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [props.variant === SWITCH_VARIANTS.FILLED && (jsxRuntime.jsx(FilledSwitch, { checked: defaultChecked ? checked : isChecked, onCheckedChange: handleCheckedChange, ...props })), props.variant === SWITCH_VARIANTS.OUTLINED && (jsxRuntime.jsx(OutlinedSwitch, { checked: defaultChecked ? checked : isChecked, onCheckedChange: handleCheckedChange, ...props })), props.variant === SWITCH_VARIANTS.SLIDE && (jsxRuntime.jsx(SlideSwitch, { checked: defaultChecked ? checked : isChecked, onCheckedChange: handleCheckedChange, ...props }))] }));
 };
 
+var colorCss = "@theme {\n  --color-pure-black: rgba(0, 0, 0, 1);\n  --color-pure-black-5: rgba(0, 0, 0, 0.05);\n  --color-pure-black-15: rgba(0, 0, 0, 0.15);\n  --color-pure-black-30: rgba(0, 0, 0, 0.3);\n  --color-pure-black-50: rgba(0, 0, 0, 0.5);\n  --color-pure-black-75: rgba(0, 0, 0, 0.75);\n  --color-pure-white: rgba(255, 255, 255, 1);\n  --color-pure-white-2: rgba(255, 255, 255, 0.02);\n  --color-pure-white-5: rgba(255, 255, 255, 0.05);\n  --color-pure-white-15: rgba(255, 255, 255, 0.15);\n  --color-pure-white-30: rgba(255, 255, 25 5, 0.3);\n  --color-pure-white-50: rgba(255, 255, 255, 0.5);\n  --color-pure-white-75: rgba(255, 255, 255, 0.75);\n  --color-pure-transparent: rgba(255, 255, 255, 0);\n  --color-pure-near-transparent: rgba(152, 152, 152, 0.001);\n\n  --color-neutral-10: #fbfbfbff;\n  --color-neutral-25: #f9f9f9ff;\n  --color-neutral-50: #f3f3f3ff;\n  --color-neutral-75: #edededff;\n  --color-neutral-100: #e5e5e5ff;\n  --color-neutral-150: #d9d9d9ff;\n  --color-neutral-200: #ccccccff;\n  --color-neutral-250: #bfbfbfff;\n  --color-neutral-300: #b2b2b2ff;\n  --color-neutral-350: #a6a6a6ff;\n  --color-neutral-400: #999999ff;\n  --color-neutral-450: #8c8c8cff;\n  --color-neutral-500: #808080ff;\n  --color-neutral-550: #6e6e6eff;\n  --color-neutral-600: #616161ff;\n  --color-neutral-650: #545454ff;\n  --color-neutral-700: #474747ff;\n  --color-neutral-750: #383838ff;\n  --color-neutral-800: #2e2e2eff;\n  --color-neutral-825: #292929ff;\n  --color-neutral-850: #212121ff;\n  --color-neutral-875: #1d1d1dff;\n  --color-neutral-900: #1a1a1aff;\n  --color-neutral-950: #0d0d0dff;\n\n  --color-telepix-red-100: #fce8ebff;\n  --color-telepix-red-200: #f7bbc3ff;\n  --color-telepix-red-300: #f28d9aff;\n  --color-telepix-red-400: #ec5f72ff;\n  --color-telepix-red-500: #e7344cff;\n  --color-telepix-red-600: #cd1831ff;\n  --color-telepix-red-700: #a01326ff;\n  --color-telepix-red-800: #720d1bff;\n  --color-telepix-red-900: #37060dff;\n\n  --color-red-100: #faccccff;\n  --color-red-200: #f59999ff;\n  --color-red-300: #ef6666ff;\n  --color-red-400: #ea3333ff;\n  --color-red-500: #e50000ff;\n  --color-red-600: #b70000ff;\n  --color-red-700: #890000ff;\n  --color-red-800: #5c0000ff;\n  --color-red-900: #2e0000ff;\n\n  --color-orange-100: #ffe6ccff;\n  --color-orange-200: #ffcc99ff;\n  --color-orange-300: #ffb366ff;\n  --color-orange-400: #ff9933ff;\n  --color-orange-500: #ff8000ff;\n  --color-orange-600: #cc6600ff;\n  --color-orange-700: #994d00ff;\n  --color-orange-800: #663300ff;\n  --color-orange-900: #331a00ff;\n\n  --color-yellow-100: #fff5ccff;\n  --color-yellow-200: #ffeb99ff;\n  --color-yellow-300: #ffe066ff;\n  --color-yellow-400: #ffd633ff;\n  --color-yellow-500: #ffcc00ff;\n  --color-yellow-600: #cca300ff;\n  --color-yellow-700: #997a00ff;\n  --color-yellow-800: #665200ff;\n  --color-yellow-900: #332900ff;\n\n  --color-green-100: #ccebd6ff;\n  --color-green-200: #99d6adff;\n  --color-green-300: #66c285ff;\n  --color-green-400: #33ad5cff;\n  --color-green-500: #009933ff;\n  --color-green-600: #007a29ff;\n  --color-green-700: #005c1fff;\n  --color-green-800: #003d14ff;\n  --color-green-900: #001f0aff;\n\n  --color-teal-100: #ccf5f5ff;\n  --color-teal-200: #99ebebff;\n  --color-teal-300: #66e0e0ff;\n  --color-teal-400: #33d6d6ff;\n  --color-teal-500: #00ccccff;\n  --color-teal-600: #00a3a3ff;\n  --color-teal-700: #007a7aff;\n  --color-teal-800: #005252ff;\n  --color-teal-900: #002929ff;\n\n  --color-cyan-100: #cceeffff;\n  --color-cyan-200: #99ddffff;\n  --color-cyan-300: #66ccffff;\n  --color-cyan-400: #33bbffff;\n  --color-cyan-500: #00aaffff;\n  --color-cyan-600: #0088ccff;\n  --color-cyan-700: #006699ff;\n  --color-cyan-800: #004466ff;\n  --color-cyan-900: #002233ff;\n\n  --color-blue-100: #d6ddffff;\n  --color-blue-200: #adbbffff;\n  --color-blue-300: #8599ffff;\n  --color-blue-400: #5c77ffff;\n  --color-blue-500: #3355ffff;\n  --color-blue-600: #2944ccff;\n  --color-blue-700: #1f3399ff;\n  --color-blue-800: #142266ff;\n  --color-blue-900: #0a1133ff;\n\n  --color-purple-100: #e4d6ffff;\n  --color-purple-200: #c9adffff;\n  --color-purple-300: #ad85ffff;\n  --color-purple-400: #925cffff;\n  --color-purple-500: #7733ffff;\n  --color-purple-600: #5f29ccff;\n  --color-purple-700: #471f99ff;\n  --color-purple-800: #301466ff;\n  --color-purple-900: #180a33ff;\n\n  --color-violet-100: #f1d6ffff;\n  --color-violet-200: #e4adffff;\n  --color-violet-300: #d685ffff;\n  --color-violet-400: #c95cffff;\n  --color-violet-500: #bb33ffff;\n  --color-violet-600: #9629ccff;\n  --color-violet-700: #701f99ff;\n  --color-violet-800: #4b1466ff;\n  --color-violet-900: #250a33ff;\n\n  --color-pink-100: #ffd6ddff;\n  --color-pink-200: #ffadbbff;\n  --color-pink-300: #ff8599ff;\n  --color-pink-400: #ff5c77ff;\n  --color-pink-500: #ff3355ff;\n  --color-pink-600: #cc2944ff;\n  --color-pink-700: #991f33ff;\n  --color-pink-800: #661422ff;\n  --color-pink-900: #330a11ff;\n\n  --color-magenta-100: #feebfbff;\n  --color-magenta-200: #fdc4f2ff;\n  --color-magenta-300: #fb92e7ff;\n  --color-magenta-400: #fa65ddff;\n  --color-magenta-500: #f939d3ff;\n  --color-magenta-600: #ed08c0ff;\n  --color-magenta-700: #940578ff;\n  --color-magenta-800: #5e034cff;\n  --color-magenta-900: #190114ff;\n\n  --color-dark-opacity-10: rgba(0, 0, 0, 0.01);\n  --color-dark-opacity-20: rgba(0, 0, 0, 0.02);\n  --color-dark-opacity-30: rgba(0, 0, 0, 0.03);\n  --color-dark-opacity-40: rgba(0, 0, 0, 0.04);\n  --color-dark-opacity-50: rgba(0, 0, 0, 0.05);\n  --color-dark-opacity-70: rgba(0, 0, 0, 0.07);\n  --color-dark-opacity-100: rgba(0, 0, 0, 0.1);\n  --color-dark-opacity-150: rgba(0, 0, 0, 0.15);\n  --color-dark-opacity-200: rgba(0, 0, 0, 0.2);\n  --color-dark-opacity-250: rgba(0, 0, 0, 0.25);\n  --color-dark-opacity-300: rgba(0, 0, 0, 0.3);\n  --color-dark-opacity-350: rgba(0, 0, 0, 0.35);\n  --color-dark-opacity-400: rgba(0, 0, 0, 0.4);\n  --color-dark-opacity-450: rgba(0, 0, 0, 0.46);\n  --color-dark-opacity-500: rgba(0, 0, 0, 0.51);\n  --color-dark-opacity-550: rgba(0, 0, 0, 0.58);\n  --color-dark-opacity-600: rgba(0, 0, 0, 0.63);\n  --color-dark-opacity-650: rgba(0, 0, 0, 0.68);\n  --color-dark-opacity-700: rgba(0, 0, 0, 0.73);\n  --color-dark-opacity-750: rgba(0, 0, 0, 0.8);\n  --color-dark-opacity-800: rgba(0, 0, 0, 0.84);\n  --color-dark-opacity-850: rgba(0, 0, 0, 0.89);\n  --color-dark-opacity-900: rgba(0, 0, 0, 0.92);\n\n  --color-light-opacity-10: rgba(255, 255, 255, 0.01);\n  --color-light-opacity-20: rgba(255, 255, 255, 0.02);\n  --color-light-opacity-30: rgba(255, 255, 255, 0.03);\n  --color-light-opacity-40: rgba(255, 255, 255, 0.04);\n  --color-light-opacity-50: rgba(255, 255, 255, 0.05);\n  --color-light-opacity-70: rgba(255, 255, 255, 0.07);\n  --color-light-opacity-100: rgba(255, 255, 255, 0.09);\n  --color-light-opacity-150: rgba(255, 255, 255, 0.14);\n  --color-light-opacity-200: rgba(255, 255, 255, 0.18);\n  --color-light-opacity-250: rgba(255, 255, 255, 0.24);\n  --color-light-opacity-300: rgba(255, 255, 255, 0.3);\n  --color-light-opacity-350: rgba(255, 255, 255, 0.35);\n  --color-light-opacity-400: rgba(255, 255, 255, 0.4);\n  --color-light-opacity-450: rgba(255, 255, 255, 0.48);\n  --color-light-opacity-500: rgba(255, 255, 255, 0.53);\n  --color-light-opacity-550: rgba(255, 255, 255, 0.58);\n  --color-light-opacity-600: rgba(255, 255, 255, 0.63);\n  --color-light-opacity-650: rgba(255, 255, 255, 0.68);\n  --color-light-opacity-700: rgba(255, 255, 255, 0.73);\n  --color-light-opacity-750: rgba(255, 255, 255, 0.79);\n  --color-light-opacity-800: rgba(255, 255, 255, 0.84);\n  --color-light-opacity-850: rgba(255, 255, 255, 0.89);\n  --color-light-opacity-900: rgba(255, 255, 255, 0.94);\n\n  --text-xsmall: 0.625rem; /* 10px */\n  --text-label: 0.75rem; /* 12px */\n  --text-body: 0.875rem; /* 14px */\n  --text-base: 1rem; /* 16px */\n  --text-large: 1.125rem; /* 18px */\n  --text-xl: 1.25rem; /* 20px */\n  --text-xxl: 1.5rem; /* 24px */\n  --text-xxxl: 1.875rem; /* 30px */\n  --text-xxxxl: 2.25rem; /* 36px */\n  --text-size-inherit: inherit;\n\n  --font-weight-thin: 100;\n  --font-weight-extralight: 200;\n  --font-weight-light: 300;\n  --font-weight-normal: 400;\n  --font-weight-medium: 500;\n  --font-weight-semibold: 600;\n  --font-weight-bold: 700;\n  --font-weight-extrabold: 800;\n  --font-weight-black: 900;\n  --font-weight-inherit: inherit;\n\n  --spacing-xsmall: 0.875rem; /** 14px */\n  --spacing-label: 1.3125rem; /** 21px */\n  --spacing-label-compact: 0.75rem; /** 12px */\n  --spacing-body: 1.5rem; /** 24px */\n  --spacing-body-compact: 0.875rem; /** 14px */\n  --spacing-base: 1.75rem; /** 28px */\n  --spacing-base-compact: 1rem; /** 16px */\n  --spacing-large: 2rem; /** 32px */\n  --spacing-large-compact: 1.125rem; /** 18px */\n  --spacing-xl: 2.25rem; /** 36px */\n  --spacing-xl-compact: 1.25rem; /** 20px */\n  --spacing-xxl: 2.625rem; /** 42px */\n  --spacing-xxl-compact: 1.5rem; /** 24px */\n  --spacing-xxxl: 3.25rem; /** 52px */\n  --spacing-inherit: inherit;\n\n  --shadow-small: 0 1px 1px 0 rgba(0, 0, 0, 0.2);\n  --shadow-basic:\n    0 1px 1px 0 rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.1);\n  --shadow-medium:\n    0 1px 2px 0 rgba(0, 0, 0, 0.4), 0 3px 4px 2px rgba(0, 0, 0, 0.15);\n  --shadow-large:\n    0 1px 4px -1px rgba(0, 0, 0, 0.6), 0 6px 8px 2px rgba(0, 0, 0, 0.2);\n  --shadow-xlarge:\n    0px 20px 25px -5px rgba(0, 0, 0, 0.1), 0px 8px 10px -6px rgba(0, 0, 0, 0.1);\n  --shadow-xxlarge: 0px 25px 50px -12px rgba(0, 0, 0, 0.25);\n  --shadow-inner: 0px 2px 4px 0px rgba(0, 0, 0, 0.3) inset;\n  --shadow-none: 0px 0px 0px 0px rgba(0, 0, 0, 0);\n  --shadow-glass-basic:\n    0 1px 1px 0 rgba(0, 0, 0, 0.3), 0 1px 3px 0 rgba(0, 0, 0, 0.1);\n  --shadow-glass-medium:\n    0 1px 2px -1px rgba(0, 0, 0, 0.5), 0 2px 4px 1px rgba(0, 0, 0, 0.25);\n  --blur-glass: blur(8px);\n\n  @keyframes fade-in {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n\n  @keyframes content-fade-in {\n    0% {\n      transform: translate(-50%, -53%);\n      opacity: 0;\n    }\n    100% {\n      transform: translate(-50%, -50%);\n      opacity: 1;\n    }\n  }\n\n  @keyframes toast-slide-in-top {\n    0% {\n      opacity: 0;\n      transform: translateY(-0.75rem) scale(0.96);\n    }\n    100% {\n      opacity: 1;\n      transform: translateY(0) scale(1);\n    }\n  }\n\n  @keyframes toast-slide-in-bottom {\n    0% {\n      opacity: 0;\n      transform: translateY(0.75rem) scale(0.96);\n    }\n    100% {\n      opacity: 1;\n      transform: translateY(0) scale(1);\n    }\n  }\n\n  @keyframes toast-slide-out-top {\n    0% {\n      opacity: 1;\n      transform: translateY(0) scale(1);\n    }\n    100% {\n      opacity: 0;\n      transform: translateY(-0.5rem) scale(0.96);\n    }\n  }\n\n  @keyframes toast-slide-out-bottom {\n    0% {\n      opacity: 1;\n      transform: translateY(0) scale(1);\n    }\n    100% {\n      opacity: 0;\n      transform: translateY(0.5rem) scale(0.96);\n    }\n  }\n\n  --animate-fade-in: fade-in 150ms ease-in-out forwards;\n  --animate-content-fade-in: content-fade-in 150ms ease-in-out forwards;\n  --animate-toast-slide-in-top: toast-slide-in-top 250ms\n    cubic-bezier(0.21, 1.02, 0.73, 1) forwards;\n  --animate-toast-slide-in-bottom: toast-slide-in-bottom 250ms\n    cubic-bezier(0.21, 1.02, 0.73, 1) forwards;\n  --animate-toast-slide-out-top: toast-slide-out-top 180ms\n    cubic-bezier(0.06, 0.71, 0.55, 1) forwards;\n  --animate-toast-slide-out-bottom: toast-slide-out-bottom 180ms\n    cubic-bezier(0.06, 0.71, 0.55, 1) forwards;\n}\n";
+
+var themeCss = ":root {\n  --page-l-null: var(--color-pure-near-transparent);\n  --page-l0: var(--color-pure-white);\n  --page-l1: var(--color-neutral-10);\n  --page-l2: var(--color-neutral-25);\n  --page-l3: var(--color-neutral-50);\n  --page-l4: var(--color-neutral-75);\n  --page-fade: var(--color-pure-black-50);\n\n  --page-l0-transparent: rgba(255, 255, 255, 0);\n  --page-l1-transparent: rgba(251, 251, 251, 0);\n\n  --page-chroma-warning: var(--color-orange-500);\n  --page-chroma-error: var(--color-red-400);\n  --page-chroma-positive: var(--color-green-400);\n  --page-chroma-cloud: var(--color-blue-500);\n  --page-chroma-onpremise: var(--color-orange-400);\n  --page-chroma-highlight-yellow: var(--color-yellow-500);\n\n  --page-accent-l0: var(--color-neutral-850);\n  --page-accent-l1: var(--color-neutral-800);\n\n  --page-translucent-l0: rgba(255, 255, 255, 0.88);\n  --page-translucent-l1: rgba(251, 251, 251, 0.88);\n  --page-translucent-l2: rgba(249, 249, 249, 0.88);\n  --page-translucent-l3: rgba(243, 243, 243, 0.88);\n  --page-translucent-l4: rgba(237, 237, 237, 0.88);\n\n  --comp-disabled: var(--color-dark-opacity-450);\n\n  --comp-mono-default: var(--color-dark-opacity-800);\n\n  --comp-mono-subtle-default: var(--color-dark-opacity-600);\n\n  --comp-chroma-warning: var(--color-orange-500);\n  --comp-chroma-error: var(--color-red-400);\n  --comp-chroma-error-subtle: var(--color-telepix-red-400);\n  --comp-chroma-positive: var(--color-green-400);\n  --comp-chroma-cloud: var(--color-blue-500);\n  --comp-chroma-onpremise: var(--color-orange-400);\n  --comp-chroma-highlight-yellow: var(--color-yellow-500);\n\n  --comp-accent-default: var(--color-light-opacity-900);\n\n  --fill-default: var(--color-pure-transparent);\n  --fill-hovered: var(--color-dark-opacity-50);\n  --fill-pressed: var(--color-dark-opacity-150);\n  --fill-selected: var(--color-dark-opacity-100);\n  --fill-disabled: var(--color-pure-transparent);\n\n  --fill-invert-default: var(--color-pure-transparent);\n  --fill-invert-hovered: var(--color-light-opacity-70);\n  --fill-invert-pressed: var(--color-light-opacity-300);\n  --fill-invert-selected: var(--color-light-opacity-200);\n  --fill-invert-disabled: var(--color-pure-transparent);\n\n  --border-bound: var(--color-dark-opacity-200);\n  --border-focused: var(--color-dark-opacity-550);\n  --border-selected: var(--color-dark-opacity-400);\n  --border-divider: var(--color-neutral-200);\n  --border-overlay: var(--color-pure-transparent);\n\n  --border-accent-bound: var(--color-light-opacity-300);\n  --border-accent-selected: var(--color-light-opacity-550);\n}\n\n[data-theme=\"dark\"],\n.dark {\n  --page-l-null: var(--color-pure-near-transparent);\n  --page-l0: var(--color-neutral-900);\n  --page-l1: var(--color-neutral-875);\n  --page-l2: var(--color-neutral-850);\n  --page-l3: var(--color-neutral-825);\n  --page-l4: var(--color-neutral-800);\n  --page-fade: var(--color-pure-black-75);\n\n  --page-l0-transparent: rgba(26, 26, 26, 0);\n  --page-l1-transparent: rgba(29, 29, 29, 0);\n\n  --page-chroma-warning: var(--color-orange-600);\n  --page-chroma-error: var(--color-red-500);\n  --page-chroma-positive: var(--color-green-500);\n  --page-chroma-cloud: var(--color-blue-500);\n  --page-chroma-onpremise: var(--color-orange-500);\n  --page-chroma-highlight-yellow: var(--color-yellow-600);\n\n  --page-accent-l0: var(--color-neutral-100);\n  --page-accent-l1: var(--color-neutral-150);\n\n  --page-translucent-l0: rgba(26, 26, 26, 0.8);\n  --page-translucent-l1: rgba(29, 29, 29, 0.8);\n  --page-translucent-l2: rgba(33, 33, 33, 0.8);\n  --page-translucent-l3: rgba(41, 41, 41, 0.8);\n  --page-translucent-l4: rgba(46, 46, 46, 0.8);\n\n  --comp-disabled: var(--color-light-opacity-350);\n\n  --comp-mono-default: var(--color-light-opacity-800);\n\n  --comp-mono-subtle-default: var(--color-light-opacity-600);\n\n  --comp-chroma-warning: var(--color-orange-500);\n  --comp-chroma-error: var(--color-red-400);\n  --comp-chroma-error-subtle: var(--color-red-300);\n  --comp-chroma-positive: var(--color-green-400);\n  --comp-chroma-cloud: var(--color-blue-500);\n  --comp-chroma-onpremise: var(--color-orange-400);\n  --comp-chroma-highlight-yellow: var(--color-yellow-500);\n\n  --comp-accent-default: var(--color-dark-opacity-800);\n\n  --fill-default: var(--color-pure-transparent);\n  --fill-hovered: var(--color-light-opacity-50);\n  --fill-pressed: var(--color-light-opacity-150);\n  --fill-selected: var(--color-light-opacity-100);\n  --fill-disabled: var(--color-pure-transparent);\n\n  --fill-invert-default: var(--color-pure-transparent);\n  --fill-invert-hovered: var(--color-dark-opacity-100);\n  --fill-invert-pressed: var(--color-dark-opacity-300);\n  --fill-invert-selected: var(--color-dark-opacity-200);\n  --fill-invert-disabled: var(--color-pure-transparent);\n\n  --border-bound: var(--color-light-opacity-250);\n  --border-focused: var(--color-light-opacity-700);\n  --border-selected: var(--color-light-opacity-450);\n  --border-divider: var(--color-neutral-750);\n  --border-overlay: var(--color-light-opacity-50);\n\n  --border-accent-bound: var(--color-dark-opacity-400);\n  --border-accent-selected: var(--color-dark-opacity-650);\n}\n\n@theme inline {\n  --color-page-l-null: var(--page-l-null);\n  --color-page-l0: var(--page-l0);\n  --color-page-l1: var(--page-l1);\n  --color-page-l2: var(--page-l2);\n  --color-page-l3: var(--page-l3);\n  --color-page-l4: var(--page-l4);\n  --color-page-fade: var(--page-fade);\n\n  --color-page-l0-transparent: var(--page-l0-transparent);\n  --color-page-l1-transparent: var(--page-l1-transparent);\n\n  --color-page-chroma-warning: var(--page-chroma-warning);\n  --color-page-chroma-error: var(--page-chroma-error);\n  --color-page-chroma-positive: var(--page-chroma-positive);\n  --color-page-chroma-cloud: var(--page-chroma-cloud);\n  --color-page-chroma-onpremise: var(--page-chroma-onpremise);\n  --color-page-chroma-highlight-yellow: var(--page-chroma-highlight-yellow);\n\n  --color-page-accent-l0: var(--page-accent-l0);\n  --color-page-accent-l1: var(--page-accent-l1);\n\n  --color-page-translucent-l0: var(--page-translucent-l0);\n  --color-page-translucent-l1: var(--page-translucent-l1);\n  --color-page-translucent-l2: var(--page-translucent-l2);\n  --color-page-translucent-l3: var(--page-translucent-l3);\n  --color-page-translucent-l4: var(--page-translucent-l4);\n\n  --color-comp-disabled: var(--comp-disabled);\n\n  --color-comp-mono-default: var(--comp-mono-default);\n\n  --color-comp-mono-subtle-default: var(--comp-mono-subtle-default);\n\n  --color-comp-chroma-warning: var(--comp-chroma-warning);\n  --color-comp-chroma-error: var(--comp-chroma-error);\n  --color-comp-chroma-error-subtle: var(--comp-chroma-error-subtle);\n  --color-comp-chroma-positive: var(--comp-chroma-positive);\n  --color-comp-chroma-cloud: var(--comp-chroma-cloud);\n  --color-comp-chroma-onpremise: var(--comp-chroma-onpremise);\n  --color-comp-chroma-highlight-yellow: var(--comp-chroma-highlight-yellow);\n\n  --color-comp-accent-default: var(--comp-accent-default);\n\n  --color-fill-default: var(--fill-default);\n  --color-fill-hovered: var(--fill-hovered);\n  --color-fill-pressed: var(--fill-pressed);\n  --color-fill-selected: var(--fill-selected);\n  --color-fill-disabled: var(--fill-disabled);\n\n  --color-fill-invert-default: var(--fill-invert-default);\n  --color-fill-invert-hovered: var(--fill-invert-hovered);\n  --color-fill-invert-pressed: var(--fill-invert-pressed);\n  --color-fill-invert-selected: var(--fill-invert-selected);\n  --color-fill-invert-disabled: var(--fill-invert-disabled);\n\n  --color-border-bound: var(--border-bound);\n  --color-border-focused: var(--border-focused);\n  --color-border-selected: var(--border-selected);\n  --color-border-divider: var(--border-divider);\n  --color-border-overlay: var(--border-overlay);\n\n  --color-border-accent-bound: var(--border-accent-bound);\n  --color-border-accent-selected: var(--border-accent-selected);\n}\n";
+
+// @ts-ignore
+/**
+ * RGB 또는 RGBA 문자열을 Hex 문자열로 변환합니다.
+ * @param rgb - RGB/RGBA 문자열 (예: "rgb(255, 0, 0)" 또는 "rgba(255, 0, 0, 0.5)")
+ * @returns Hex 문자열 (예: "#ff0000" 또는 "#ff000080") 또는 유효하지 않은 경우 null.
+ */
+const rgbaToHex = (rgb) => {
+    const match = rgb.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([^)]+))?\)$/);
+    if (!match)
+        return null;
+    const r = parseInt(match[1], 10);
+    const g = parseInt(match[2], 10);
+    const b = parseInt(match[3], 10);
+    const a = match[4] !== undefined ? parseFloat(match[4]) : 1;
+    const clamp = (val) => Math.round(Math.max(0, Math.min(255, val)));
+    const toHex = (n) => clamp(n).toString(16).padStart(2, "0");
+    const getHexAlpha = (alpha) => {
+        if (alpha === undefined || alpha === 1)
+            return "";
+        const alphaVal = Math.round(Math.max(0, Math.min(1, alpha)) * 255);
+        return alphaVal.toString(16).padStart(2, "0");
+    };
+    const hexA = getHexAlpha(a);
+    return `#${toHex(r)}${toHex(g)}${toHex(b)}${hexA}`;
+};
+/**
+ * 원본 CSS 문자열에서 변수 정의를 찾기 위한 헬퍼 함수입니다.
+ */
+const findVarInCssString = (cssContent, varName) => {
+    // Regex 설명:
+    // 1. 변수 이름을 찾되, 만약을 대비해 이스케이프 처리합니다.
+    // 2. 공백을 허용하고, 그 다음 콜론을 찾습니다.
+    // 3. 다음 세미콜론이나 닫는 중괄호까지 캡처합니다.
+    const escapedName = varName.replace(/[-\/\\^$*+?.()|[\]{}]/g, "\\$&");
+    const regex = new RegExp(`${escapedName}\\s*:\\s*([^;}\\n]+)`, "i");
+    const match = cssContent.match(regex);
+    if (match && match[1]) {
+        return match[1].trim();
+    }
+    return null;
+};
+/**
+ * 현재 문서 상태가 다크 모드인지 확인합니다.
+ */
+const isDarkMode = () => {
+    if (typeof document === "undefined")
+        return false;
+    return (document.documentElement.classList.contains("dark") ||
+        document.documentElement.getAttribute("data-theme") === "dark");
+};
+/**
+ * CSS 문자열에서 다크 모드 블록(.dark { ... } 등)을 추출합니다.
+ */
+const extractDarkBlock = (cssContent) => {
+    // .dark 또는 [data-theme="dark"]로 시작하고 중괄호로 묶인 블록을 찾음
+    const regex = /(?:\[data-theme="?dark"?\]|(?:\.dark))[\s\S]*?{([^}]+)}/i;
+    const match = cssContent.match(regex);
+    if (match && match[1]) {
+        return match[1];
+    }
+    return null;
+};
+/**
+ * 주어진 CSS 변수 이름에 대한 Hex 코드를 반환합니다.
+ *
+ * @param variable - CSS 변수 이름 (예: "--color-neutral-10").
+ * @returns Hex 코드 (예: "#fbfbfbff") 또는 변수가 유효한 색상이 아니거나 찾을 수 없는 경우 null.
+ */
+const getColorHex = (variable) => {
+    if (typeof document === "undefined") {
+        return null;
+    }
+    const varQuery = variable.startsWith("--") ? variable : `--${variable}`;
+    // 값을 해결하기 위한 헬퍼 함수
+    const resolveValue = (val) => {
+        if (!val)
+            return null;
+        if (val.startsWith("#"))
+            return val;
+        if (val.startsWith("rgb"))
+            return rgbaToHex(val);
+        if (val.startsWith("var(")) {
+            const match = val.match(/var\(([^)]+)\)/);
+            if (match && match[1]) {
+                return getColorHex(match[1]);
+            }
+        }
+        return null;
+    };
+    // 1. 브라우저 계산 스타일 시도
+    const style = getComputedStyle(document.documentElement);
+    const computedValue = style.getPropertyValue(varQuery).trim();
+    if (computedValue) {
+        const resolved = resolveValue(computedValue);
+        if (resolved)
+            return resolved;
+    }
+    // 2. Fallback: 원본 CSS 파일 파싱
+    // 다크 모드일 경우 theme.css의 다크 모드 블록을 최우선으로 검색
+    if (isDarkMode() && typeof themeCss === "string") {
+        const darkBlock = extractDarkBlock(themeCss);
+        if (darkBlock) {
+            const rawValue = findVarInCssString(darkBlock, varQuery);
+            if (rawValue) {
+                const resolved = resolveValue(rawValue);
+                if (resolved)
+                    return resolved;
+            }
+        }
+    }
+    // 그 다음 theme.css 전체(root 및 기본값), 마지막으로 color.css 검색
+    const rawSources = [themeCss, colorCss];
+    for (const source of rawSources) {
+        if (typeof source === "string") {
+            const rawValue = findVarInCssString(source, varQuery);
+            if (rawValue) {
+                const resolved = resolveValue(rawValue);
+                if (resolved)
+                    return resolved;
+            }
+        }
+    }
+    return null;
+};
+
 exports.Autocomplete = Autocomplete;
 exports.Calendar = Calendar;
 exports.Checkbox = Checkbox;
@@ -13792,3 +13921,4 @@ exports.VERTICAL_MENU_SIZES = VERTICAL_MENU_SIZES;
 exports.VERTICAL_MENU_VARIANTS = VERTICAL_MENU_VARIANTS;
 exports.VerticalMenu = VerticalMenu;
 exports.VerticalMenus = VerticalMenus;
+exports.getColorHex = getColorHex;

package/dist/cjs/icons/Icon.d.ts

@@ -0,0 +1,2 @@
+import type { IconProps } from "./icon-types";
+export declare const Icon: import("react").ForwardRefExoticComponent<IconProps & import("react").RefAttributes<SVGSVGElement>>;