@telepix-lab/telepix-ui 0.8.1 → 0.8.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/cjs/client.js +0 -68
  2. package/dist/color.css +1 -1
  3. package/dist/esm/client.js +0 -68
  4. package/package.json +1 -1
package/dist/cjs/client.js CHANGED
@@ -13716,11 +13716,6 @@ const Switch = (props) => {
13716
13716
  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 }))] }));
13717
13717
  };
13718
13718
 
13719
- 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";
13720
-
13721
- 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";
13722
-
13723
- // @ts-ignore
13724
13719
  /**
13725
13720
  * RGB 또는 RGBA 문자열을 Hex 문자열로 변환합니다.
13726
13721
  * @param rgb - RGB/RGBA 문자열 (예: "rgb(255, 0, 0)" 또는 "rgba(255, 0, 0, 0.5)")
@@ -13745,43 +13740,6 @@ const rgbaToHex = (rgb) => {
13745
13740
  const hexA = getHexAlpha(a);
13746
13741
  return `#${toHex(r)}${toHex(g)}${toHex(b)}${hexA}`;
13747
13742
  };
13748
- /**
13749
- * 원본 CSS 문자열에서 변수 정의를 찾기 위한 헬퍼 함수입니다.
13750
- */
13751
- const findVarInCssString = (cssContent, varName) => {
13752
- // Regex 설명:
13753
- // 1. 변수 이름을 찾되, 만약을 대비해 이스케이프 처리합니다.
13754
- // 2. 공백을 허용하고, 그 다음 콜론을 찾습니다.
13755
- // 3. 다음 세미콜론이나 닫는 중괄호까지 캡처합니다.
13756
- const escapedName = varName.replace(/[-\/\\^$*+?.()|[\]{}]/g, "\\$&");
13757
- const regex = new RegExp(`${escapedName}\\s*:\\s*([^;}\\n]+)`, "i");
13758
- const match = cssContent.match(regex);
13759
- if (match && match[1]) {
13760
- return match[1].trim();
13761
- }
13762
- return null;
13763
- };
13764
- /**
13765
- * 현재 문서 상태가 다크 모드인지 확인합니다.
13766
- */
13767
- const isDarkMode = () => {
13768
- if (typeof document === "undefined")
13769
- return false;
13770
- return (document.documentElement.classList.contains("dark") ||
13771
- document.documentElement.getAttribute("data-theme") === "dark");
13772
- };
13773
- /**
13774
- * CSS 문자열에서 다크 모드 블록(.dark { ... } 등)을 추출합니다.
13775
- */
13776
- const extractDarkBlock = (cssContent) => {
13777
- // .dark 또는 [data-theme="dark"]로 시작하고 중괄호로 묶인 블록을 찾음
13778
- const regex = /(?:\[data-theme="?dark"?\]|(?:\.dark))[\s\S]*?{([^}]+)}/i;
13779
- const match = cssContent.match(regex);
13780
- if (match && match[1]) {
13781
- return match[1];
13782
- }
13783
- return null;
13784
- };
13785
13743
  /**
13786
13744
  * 주어진 CSS 변수 이름에 대한 Hex 코드를 반환합니다.
13787
13745
  *
@@ -13809,7 +13767,6 @@ const getColorHex = (variable) => {
13809
13767
  }
13810
13768
  return null;
13811
13769
  };
13812
- // 1. 브라우저 계산 스타일 시도
13813
13770
  const style = getComputedStyle(document.documentElement);
13814
13771
  const computedValue = style.getPropertyValue(varQuery).trim();
13815
13772
  if (computedValue) {
@@ -13817,31 +13774,6 @@ const getColorHex = (variable) => {
13817
13774
  if (resolved)
13818
13775
  return resolved;
13819
13776
  }
13820
- // 2. Fallback: 원본 CSS 파일 파싱
13821
- // 다크 모드일 경우 theme.css의 다크 모드 블록을 최우선으로 검색
13822
- if (isDarkMode() && typeof themeCss === "string") {
13823
- const darkBlock = extractDarkBlock(themeCss);
13824
- if (darkBlock) {
13825
- const rawValue = findVarInCssString(darkBlock, varQuery);
13826
- if (rawValue) {
13827
- const resolved = resolveValue(rawValue);
13828
- if (resolved)
13829
- return resolved;
13830
- }
13831
- }
13832
- }
13833
- // 그 다음 theme.css 전체(root 및 기본값), 마지막으로 color.css 검색
13834
- const rawSources = [themeCss, colorCss];
13835
- for (const source of rawSources) {
13836
- if (typeof source === "string") {
13837
- const rawValue = findVarInCssString(source, varQuery);
13838
- if (rawValue) {
13839
- const resolved = resolveValue(rawValue);
13840
- if (resolved)
13841
- return resolved;
13842
- }
13843
- }
13844
- }
13845
13777
  return null;
13846
13778
  };
13847
13779
 
package/dist/color.css CHANGED
@@ -1 +1 @@
1
- /*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */
1
+ :root{--color-pure-black:#000;--color-pure-black-5:rgba(0,0,0,.05);--color-pure-black-15:rgba(0,0,0,.15);--color-pure-black-30:rgba(0,0,0,.3);--color-pure-black-50:rgba(0,0,0,.5);--color-pure-black-75:rgba(0,0,0,.75);--color-pure-white:#fff;--color-pure-white-2:hsla(0,0%,100%,.02);--color-pure-white-5:hsla(0,0%,100%,.05);--color-pure-white-15:hsla(0,0%,100%,.15);--color-pure-white-30:rgba(255,255,25 5,0.3);--color-pure-white-50:hsla(0,0%,100%,.5);--color-pure-white-75:hsla(0,0%,100%,.75);--color-pure-transparent:hsla(0,0%,100%,0);--color-pure-near-transparent:hsla(0,0%,60%,.001);--color-neutral-10:#fbfbfb;--color-neutral-25:#f9f9f9;--color-neutral-50:#f3f3f3;--color-neutral-75:#ededed;--color-neutral-100:#e5e5e5;--color-neutral-150:#d9d9d9;--color-neutral-200:#ccc;--color-neutral-250:#bfbfbf;--color-neutral-300:#b2b2b2;--color-neutral-350:#a6a6a6;--color-neutral-400:#999;--color-neutral-450:#8c8c8c;--color-neutral-500:grey;--color-neutral-550:#6e6e6e;--color-neutral-600:#616161;--color-neutral-650:#545454;--color-neutral-700:#474747;--color-neutral-750:#383838;--color-neutral-800:#2e2e2e;--color-neutral-825:#292929;--color-neutral-850:#212121;--color-neutral-875:#1d1d1d;--color-neutral-900:#1a1a1a;--color-neutral-950:#0d0d0d;--color-telepix-red-100:#fce8eb;--color-telepix-red-200:#f7bbc3;--color-telepix-red-300:#f28d9a;--color-telepix-red-400:#ec5f72;--color-telepix-red-500:#e7344c;--color-telepix-red-600:#cd1831;--color-telepix-red-700:#a01326;--color-telepix-red-800:#720d1b;--color-telepix-red-900:#37060d;--color-red-100:#facccc;--color-red-200:#f59999;--color-red-300:#ef6666;--color-red-400:#ea3333;--color-red-500:#e50000;--color-red-600:#b70000;--color-red-700:#890000;--color-red-800:#5c0000;--color-red-900:#2e0000;--color-orange-100:#ffe6cc;--color-orange-200:#fc9;--color-orange-300:#ffb366;--color-orange-400:#f93;--color-orange-500:#ff8000;--color-orange-600:#c60;--color-orange-700:#994d00;--color-orange-800:#630;--color-orange-900:#331a00;--color-yellow-100:#fff5cc;--color-yellow-200:#ffeb99;--color-yellow-300:#ffe066;--color-yellow-400:#ffd633;--color-yellow-500:#fc0;--color-yellow-600:#cca300;--color-yellow-700:#997a00;--color-yellow-800:#665200;--color-yellow-900:#332900;--color-green-100:#ccebd6;--color-green-200:#99d6ad;--color-green-300:#66c285;--color-green-400:#33ad5c;--color-green-500:#093;--color-green-600:#007a29;--color-green-700:#005c1f;--color-green-800:#003d14;--color-green-900:#001f0a;--color-teal-100:#ccf5f5;--color-teal-200:#99ebeb;--color-teal-300:#66e0e0;--color-teal-400:#33d6d6;--color-teal-500:#0cc;--color-teal-600:#00a3a3;--color-teal-700:#007a7a;--color-teal-800:#005252;--color-teal-900:#002929;--color-cyan-100:#cef;--color-cyan-200:#9df;--color-cyan-300:#6cf;--color-cyan-400:#3bf;--color-cyan-500:#0af;--color-cyan-600:#08c;--color-cyan-700:#069;--color-cyan-800:#046;--color-cyan-900:#023;--color-blue-100:#d6ddff;--color-blue-200:#adbbff;--color-blue-300:#8599ff;--color-blue-400:#5c77ff;--color-blue-500:#35f;--color-blue-600:#2944cc;--color-blue-700:#1f3399;--color-blue-800:#142266;--color-blue-900:#0a1133;--color-purple-100:#e4d6ff;--color-purple-200:#c9adff;--color-purple-300:#ad85ff;--color-purple-400:#925cff;--color-purple-500:#73f;--color-purple-600:#5f29cc;--color-purple-700:#471f99;--color-purple-800:#301466;--color-purple-900:#180a33;--color-violet-100:#f1d6ff;--color-violet-200:#e4adff;--color-violet-300:#d685ff;--color-violet-400:#c95cff;--color-violet-500:#b3f;--color-violet-600:#9629cc;--color-violet-700:#701f99;--color-violet-800:#4b1466;--color-violet-900:#250a33;--color-pink-100:#ffd6dd;--color-pink-200:#ffadbb;--color-pink-300:#ff8599;--color-pink-400:#ff5c77;--color-pink-500:#f35;--color-pink-600:#cc2944;--color-pink-700:#991f33;--color-pink-800:#661422;--color-pink-900:#330a11;--color-magenta-100:#feebfb;--color-magenta-200:#fdc4f2;--color-magenta-300:#fb92e7;--color-magenta-400:#fa65dd;--color-magenta-500:#f939d3;--color-magenta-600:#ed08c0;--color-magenta-700:#940578;--color-magenta-800:#5e034c;--color-magenta-900:#190114;--color-dark-opacity-10:rgba(0,0,0,.01);--color-dark-opacity-20:rgba(0,0,0,.02);--color-dark-opacity-30:rgba(0,0,0,.03);--color-dark-opacity-40:rgba(0,0,0,.04);--color-dark-opacity-50:rgba(0,0,0,.05);--color-dark-opacity-70:rgba(0,0,0,.07);--color-dark-opacity-100:rgba(0,0,0,.1);--color-dark-opacity-150:rgba(0,0,0,.15);--color-dark-opacity-200:rgba(0,0,0,.2);--color-dark-opacity-250:rgba(0,0,0,.25);--color-dark-opacity-300:rgba(0,0,0,.3);--color-dark-opacity-350:rgba(0,0,0,.35);--color-dark-opacity-400:rgba(0,0,0,.4);--color-dark-opacity-450:rgba(0,0,0,.46);--color-dark-opacity-500:rgba(0,0,0,.51);--color-dark-opacity-550:rgba(0,0,0,.58);--color-dark-opacity-600:rgba(0,0,0,.63);--color-dark-opacity-650:rgba(0,0,0,.68);--color-dark-opacity-700:rgba(0,0,0,.73);--color-dark-opacity-750:rgba(0,0,0,.8);--color-dark-opacity-800:rgba(0,0,0,.84);--color-dark-opacity-850:rgba(0,0,0,.89);--color-dark-opacity-900:rgba(0,0,0,.92);--color-light-opacity-10:hsla(0,0%,100%,.01);--color-light-opacity-20:hsla(0,0%,100%,.02);--color-light-opacity-30:hsla(0,0%,100%,.03);--color-light-opacity-40:hsla(0,0%,100%,.04);--color-light-opacity-50:hsla(0,0%,100%,.05);--color-light-opacity-70:hsla(0,0%,100%,.07);--color-light-opacity-100:hsla(0,0%,100%,.09);--color-light-opacity-150:hsla(0,0%,100%,.14);--color-light-opacity-200:hsla(0,0%,100%,.18);--color-light-opacity-250:hsla(0,0%,100%,.24);--color-light-opacity-300:hsla(0,0%,100%,.3);--color-light-opacity-350:hsla(0,0%,100%,.35);--color-light-opacity-400:hsla(0,0%,100%,.4);--color-light-opacity-450:hsla(0,0%,100%,.48);--color-light-opacity-500:hsla(0,0%,100%,.53);--color-light-opacity-550:hsla(0,0%,100%,.58);--color-light-opacity-600:hsla(0,0%,100%,.63);--color-light-opacity-650:hsla(0,0%,100%,.68);--color-light-opacity-700:hsla(0,0%,100%,.73);--color-light-opacity-750:hsla(0,0%,100%,.79);--color-light-opacity-800:hsla(0,0%,100%,.84);--color-light-opacity-850:hsla(0,0%,100%,.89);--color-light-opacity-900:hsla(0,0%,100%,.94);--text-xsmall:0.625rem;--text-label:0.75rem;--text-body:0.875rem;--text-base:1rem;--text-large:1.125rem;--text-xl:1.25rem;--text-xxl:1.5rem;--text-xxxl:1.875rem;--text-xxxxl:2.25rem;--text-size-inherit:inherit;--font-weight-thin:100;--font-weight-extralight:200;--font-weight-light:300;--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--font-weight-extrabold:800;--font-weight-black:900;--font-weight-inherit:inherit;--spacing-xsmall:0.875rem;--spacing-label:1.3125rem;--spacing-label-compact:0.75rem;--spacing-body:1.5rem;--spacing-body-compact:0.875rem;--spacing-base:1.75rem;--spacing-base-compact:1rem;--spacing-large:2rem;--spacing-large-compact:1.125rem;--spacing-xl:2.25rem;--spacing-xl-compact:1.25rem;--spacing-xxl:2.625rem;--spacing-xxl-compact:1.5rem;--spacing-xxxl:3.25rem;--spacing-inherit:inherit;--shadow-small:0 1px 1px 0 rgba(0,0,0,.2);--shadow-basic:0 1px 1px 0 rgba(0,0,0,.3),0 1px 3px 1px rgba(0,0,0,.1);--shadow-medium:0 1px 2px 0 rgba(0,0,0,.4),0 3px 4px 2px rgba(0,0,0,.15);--shadow-large:0 1px 4px -1px rgba(0,0,0,.6),0 6px 8px 2px rgba(0,0,0,.2);--shadow-xlarge:0px 20px 25px -5px rgba(0,0,0,.1),0px 8px 10px -6px rgba(0,0,0,.1);--shadow-xxlarge:0px 25px 50px -12px rgba(0,0,0,.25);--shadow-inner:0px 2px 4px 0px rgba(0,0,0,.3) inset;--shadow-none:0px 0px 0px 0px transparent;--shadow-glass-basic:0 1px 1px 0 rgba(0,0,0,.3),0 1px 3px 0 rgba(0,0,0,.1);--shadow-glass-medium:0 1px 2px -1px rgba(0,0,0,.5),0 2px 4px 1px rgba(0,0,0,.25);--blur-glass:blur(8px);@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes content-fade-in{0%{opacity:0;transform:translate(-50%,-53%)}to{opacity:1;transform:translate(-50%,-50%)}}@keyframes toast-slide-in-top{0%{opacity:0;transform:translateY(-.75rem) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes toast-slide-in-bottom{0%{opacity:0;transform:translateY(.75rem) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes toast-slide-out-top{0%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(-.5rem) scale(.96)}}@keyframes toast-slide-out-bottom{0%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(.5rem) scale(.96)}}--animate-fade-in:fade-in 150ms ease-in-out forwards;--animate-content-fade-in:content-fade-in 150ms ease-in-out forwards;--animate-toast-slide-in-top:toast-slide-in-top 250ms cubic-bezier(0.21,1.02,0.73,1) forwards;--animate-toast-slide-in-bottom:toast-slide-in-bottom 250ms cubic-bezier(0.21,1.02,0.73,1) forwards;--animate-toast-slide-out-top:toast-slide-out-top 180ms cubic-bezier(0.06,0.71,0.55,1) forwards;--animate-toast-slide-out-bottom:toast-slide-out-bottom 180ms cubic-bezier(0.06,0.71,0.55,1) forwards}
package/dist/esm/client.js CHANGED
@@ -13696,11 +13696,6 @@ const Switch = (props) => {
13696
13696
  return (jsxs(Fragment, { children: [props.variant === SWITCH_VARIANTS.FILLED && (jsx(FilledSwitch, { checked: defaultChecked ? checked : isChecked, onCheckedChange: handleCheckedChange, ...props })), props.variant === SWITCH_VARIANTS.OUTLINED && (jsx(OutlinedSwitch, { checked: defaultChecked ? checked : isChecked, onCheckedChange: handleCheckedChange, ...props })), props.variant === SWITCH_VARIANTS.SLIDE && (jsx(SlideSwitch, { checked: defaultChecked ? checked : isChecked, onCheckedChange: handleCheckedChange, ...props }))] }));
13697
13697
  };
13698
13698
 
13699
- 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";
13700
-
13701
- 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";
13702
-
13703
- // @ts-ignore
13704
13699
  /**
13705
13700
  * RGB 또는 RGBA 문자열을 Hex 문자열로 변환합니다.
13706
13701
  * @param rgb - RGB/RGBA 문자열 (예: "rgb(255, 0, 0)" 또는 "rgba(255, 0, 0, 0.5)")
@@ -13725,43 +13720,6 @@ const rgbaToHex = (rgb) => {
13725
13720
  const hexA = getHexAlpha(a);
13726
13721
  return `#${toHex(r)}${toHex(g)}${toHex(b)}${hexA}`;
13727
13722
  };
13728
- /**
13729
- * 원본 CSS 문자열에서 변수 정의를 찾기 위한 헬퍼 함수입니다.
13730
- */
13731
- const findVarInCssString = (cssContent, varName) => {
13732
- // Regex 설명:
13733
- // 1. 변수 이름을 찾되, 만약을 대비해 이스케이프 처리합니다.
13734
- // 2. 공백을 허용하고, 그 다음 콜론을 찾습니다.
13735
- // 3. 다음 세미콜론이나 닫는 중괄호까지 캡처합니다.
13736
- const escapedName = varName.replace(/[-\/\\^$*+?.()|[\]{}]/g, "\\$&");
13737
- const regex = new RegExp(`${escapedName}\\s*:\\s*([^;}\\n]+)`, "i");
13738
- const match = cssContent.match(regex);
13739
- if (match && match[1]) {
13740
- return match[1].trim();
13741
- }
13742
- return null;
13743
- };
13744
- /**
13745
- * 현재 문서 상태가 다크 모드인지 확인합니다.
13746
- */
13747
- const isDarkMode = () => {
13748
- if (typeof document === "undefined")
13749
- return false;
13750
- return (document.documentElement.classList.contains("dark") ||
13751
- document.documentElement.getAttribute("data-theme") === "dark");
13752
- };
13753
- /**
13754
- * CSS 문자열에서 다크 모드 블록(.dark { ... } 등)을 추출합니다.
13755
- */
13756
- const extractDarkBlock = (cssContent) => {
13757
- // .dark 또는 [data-theme="dark"]로 시작하고 중괄호로 묶인 블록을 찾음
13758
- const regex = /(?:\[data-theme="?dark"?\]|(?:\.dark))[\s\S]*?{([^}]+)}/i;
13759
- const match = cssContent.match(regex);
13760
- if (match && match[1]) {
13761
- return match[1];
13762
- }
13763
- return null;
13764
- };
13765
13723
  /**
13766
13724
  * 주어진 CSS 변수 이름에 대한 Hex 코드를 반환합니다.
13767
13725
  *
@@ -13789,7 +13747,6 @@ const getColorHex = (variable) => {
13789
13747
  }
13790
13748
  return null;
13791
13749
  };
13792
- // 1. 브라우저 계산 스타일 시도
13793
13750
  const style = getComputedStyle(document.documentElement);
13794
13751
  const computedValue = style.getPropertyValue(varQuery).trim();
13795
13752
  if (computedValue) {
@@ -13797,31 +13754,6 @@ const getColorHex = (variable) => {
13797
13754
  if (resolved)
13798
13755
  return resolved;
13799
13756
  }
13800
- // 2. Fallback: 원본 CSS 파일 파싱
13801
- // 다크 모드일 경우 theme.css의 다크 모드 블록을 최우선으로 검색
13802
- if (isDarkMode() && typeof themeCss === "string") {
13803
- const darkBlock = extractDarkBlock(themeCss);
13804
- if (darkBlock) {
13805
- const rawValue = findVarInCssString(darkBlock, varQuery);
13806
- if (rawValue) {
13807
- const resolved = resolveValue(rawValue);
13808
- if (resolved)
13809
- return resolved;
13810
- }
13811
- }
13812
- }
13813
- // 그 다음 theme.css 전체(root 및 기본값), 마지막으로 color.css 검색
13814
- const rawSources = [themeCss, colorCss];
13815
- for (const source of rawSources) {
13816
- if (typeof source === "string") {
13817
- const rawValue = findVarInCssString(source, varQuery);
13818
- if (rawValue) {
13819
- const resolved = resolveValue(rawValue);
13820
- if (resolved)
13821
- return resolved;
13822
- }
13823
- }
13824
- }
13825
13757
  return null;
13826
13758
  };
13827
13759
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@telepix-lab/telepix-ui",
3
- "version": "0.8.1",
3
+ "version": "0.8.2",
4
4
  "description": "A UI kit for TelePIX",
5
5
  "types": "./dist/index.d.ts",
6
6
  "exports": {