@bestow-ui/react 0.2.0 → 0.3.0

package/dist/index.js

@@ -1,11 +1,163 @@
 "use client";
 
 // src/theme/contract.css.ts
-var themeClass = { light: "tkagtb29", dark: "tkagtb2a" };
-var vars = { space: { "0": "var(--tkagtb0)", "1": "var(--tkagtb1)", "2": "var(--tkagtb2)", "3": "var(--tkagtb3)", "4": "var(--tkagtb4)", "5": "var(--tkagtb5)", "6": "var(--tkagtb6)", "8": "var(--tkagtb7)", "10": "var(--tkagtb8)", "12": "var(--tkagtb9)", "16": "var(--tkagtba)" }, radius: { none: "var(--tkagtbb)", sm: "var(--tkagtbc)", md: "var(--tkagtbd)", lg: "var(--tkagtbe)", xl: "var(--tkagtbf)", full: "var(--tkagtbg)" }, font: { family: { sans: "var(--tkagtbh)", mono: "var(--tkagtbi)" }, size: { xs: "var(--tkagtbj)", sm: "var(--tkagtbk)", md: "var(--tkagtbl)", lg: "var(--tkagtbm)", xl: "var(--tkagtbn)", "2xl": "var(--tkagtbo)", "3xl": "var(--tkagtbp)", "4xl": "var(--tkagtbq)" }, weight: { regular: "var(--tkagtbr)", medium: "var(--tkagtbs)", semibold: "var(--tkagtbt)", bold: "var(--tkagtbu)" }, lineHeight: { tight: "var(--tkagtbv)", normal: "var(--tkagtbw)", relaxed: "var(--tkagtbx)" } }, shadow: { sm: "var(--tkagtby)", md: "var(--tkagtbz)", lg: "var(--tkagtb10)" }, duration: { fast: "var(--tkagtb11)", normal: "var(--tkagtb12)", slow: "var(--tkagtb13)" }, zIndex: { dropdown: "var(--tkagtb14)", overlay: "var(--tkagtb15)", modal: "var(--tkagtb16)", toast: "var(--tkagtb17)", tooltip: "var(--tkagtb18)" }, color: { bg: { "default": "var(--tkagtb19)", subtle: "var(--tkagtb1a)", muted: "var(--tkagtb1b)", inverse: "var(--tkagtb1c)", overlay: "var(--tkagtb1d)" }, fg: { "default": "var(--tkagtb1e)", muted: "var(--tkagtb1f)", subtle: "var(--tkagtb1g)", inverse: "var(--tkagtb1h)" }, border: { "default": "var(--tkagtb1i)", strong: "var(--tkagtb1j)", focus: "var(--tkagtb1k)" }, primary: { solid: "var(--tkagtb1l)", solidHover: "var(--tkagtb1m)", contrast: "var(--tkagtb1n)", subtle: "var(--tkagtb1o)", subtleHover: "var(--tkagtb1p)", text: "var(--tkagtb1q)" }, neutral: { solid: "var(--tkagtb1r)", solidHover: "var(--tkagtb1s)", contrast: "var(--tkagtb1t)", subtle: "var(--tkagtb1u)", subtleHover: "var(--tkagtb1v)", text: "var(--tkagtb1w)" }, danger: { solid: "var(--tkagtb1x)", solidHover: "var(--tkagtb1y)", contrast: "var(--tkagtb1z)", subtle: "var(--tkagtb20)", subtleHover: "var(--tkagtb21)", text: "var(--tkagtb22)" }, success: { solid: "var(--tkagtb23)", solidHover: "var(--tkagtb24)", contrast: "var(--tkagtb25)", subtle: "var(--tkagtb26)", subtleHover: "var(--tkagtb27)", text: "var(--tkagtb28)" } } };
+var themeClass = { light: "tkagtb0", dark: "tkagtb1" };
+var vars = { space: { "0": "var(--bestow-space-0)", "1": "var(--bestow-space-1)", "2": "var(--bestow-space-2)", "3": "var(--bestow-space-3)", "4": "var(--bestow-space-4)", "5": "var(--bestow-space-5)", "6": "var(--bestow-space-6)", "8": "var(--bestow-space-8)", "10": "var(--bestow-space-10)", "12": "var(--bestow-space-12)", "16": "var(--bestow-space-16)" }, radius: { none: "var(--bestow-radius-none)", sm: "var(--bestow-radius-sm)", md: "var(--bestow-radius-md)", lg: "var(--bestow-radius-lg)", xl: "var(--bestow-radius-xl)", full: "var(--bestow-radius-full)" }, font: { family: { sans: "var(--bestow-font-family-sans)", mono: "var(--bestow-font-family-mono)" }, size: { xs: "var(--bestow-font-size-xs)", sm: "var(--bestow-font-size-sm)", md: "var(--bestow-font-size-md)", lg: "var(--bestow-font-size-lg)", xl: "var(--bestow-font-size-xl)", "2xl": "var(--bestow-font-size-2xl)", "3xl": "var(--bestow-font-size-3xl)", "4xl": "var(--bestow-font-size-4xl)" }, weight: { regular: "var(--bestow-font-weight-regular)", medium: "var(--bestow-font-weight-medium)", semibold: "var(--bestow-font-weight-semibold)", bold: "var(--bestow-font-weight-bold)" }, lineHeight: { tight: "var(--bestow-font-line-height-tight)", normal: "var(--bestow-font-line-height-normal)", relaxed: "var(--bestow-font-line-height-relaxed)" } }, shadow: { sm: "var(--bestow-shadow-sm)", md: "var(--bestow-shadow-md)", lg: "var(--bestow-shadow-lg)" }, duration: { fast: "var(--bestow-duration-fast)", normal: "var(--bestow-duration-normal)", slow: "var(--bestow-duration-slow)" }, zIndex: { dropdown: "var(--bestow-z-index-dropdown)", overlay: "var(--bestow-z-index-overlay)", modal: "var(--bestow-z-index-modal)", toast: "var(--bestow-z-index-toast)", tooltip: "var(--bestow-z-index-tooltip)" }, color: { bg: { "default": "var(--bestow-color-bg-default)", subtle: "var(--bestow-color-bg-subtle)", muted: "var(--bestow-color-bg-muted)", inverse: "var(--bestow-color-bg-inverse)", overlay: "var(--bestow-color-bg-overlay)" }, fg: { "default": "var(--bestow-color-fg-default)", muted: "var(--bestow-color-fg-muted)", subtle: "var(--bestow-color-fg-subtle)", inverse: "var(--bestow-color-fg-inverse)" }, border: { "default": "var(--bestow-color-border-default)", strong: "var(--bestow-color-border-strong)", focus: "var(--bestow-color-border-focus)" }, primary: { solid: "var(--bestow-color-primary-solid)", solidHover: "var(--bestow-color-primary-solid-hover)", contrast: "var(--bestow-color-primary-contrast)", subtle: "var(--bestow-color-primary-subtle)", subtleHover: "var(--bestow-color-primary-subtle-hover)", text: "var(--bestow-color-primary-text)" }, neutral: { solid: "var(--bestow-color-neutral-solid)", solidHover: "var(--bestow-color-neutral-solid-hover)", contrast: "var(--bestow-color-neutral-contrast)", subtle: "var(--bestow-color-neutral-subtle)", subtleHover: "var(--bestow-color-neutral-subtle-hover)", text: "var(--bestow-color-neutral-text)" }, danger: { solid: "var(--bestow-color-danger-solid)", solidHover: "var(--bestow-color-danger-solid-hover)", contrast: "var(--bestow-color-danger-contrast)", subtle: "var(--bestow-color-danger-subtle)", subtleHover: "var(--bestow-color-danger-subtle-hover)", text: "var(--bestow-color-danger-text)" }, success: { solid: "var(--bestow-color-success-solid)", solidHover: "var(--bestow-color-success-solid-hover)", contrast: "var(--bestow-color-success-contrast)", subtle: "var(--bestow-color-success-subtle)", subtleHover: "var(--bestow-color-success-subtle-hover)", text: "var(--bestow-color-success-text)" } } };
+
+// src/theme/color.ts
+import { darkColors, lightColors, palette } from "@bestow-ui/tokens";
+function parseHex(hex) {
+  const m = /^#?([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(hex.trim());
+  if (!m) throw new Error(`\uC62C\uBC14\uB978 hex \uC0C9\uC774 \uC544\uB2C8\uC5D0\uC694: "${hex}" (\uC608: "#7c3aed")`);
+  let h = m[1];
+  if (h.length === 3) h = h.replace(/./g, (c) => c + c);
+  return [0, 2, 4].map((i) => parseInt(h.slice(i, i + 2), 16) / 255);
+}
+function toHex(rgb) {
+  return `#${rgb.map((v) => Math.round(Math.min(1, Math.max(0, v)) * 255).toString(16).padStart(2, "0")).join("")}`;
+}
+var toLinear = (c) => c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
+var fromLinear = (c) => c <= 31308e-7 ? 12.92 * c : 1.055 * c ** (1 / 2.4) - 0.055;
+function rgbToOklch([r, g, b]) {
+  const [lr, lg, lb] = [toLinear(r), toLinear(g), toLinear(b)];
+  const l_ = Math.cbrt(0.4122214708 * lr + 0.5363325363 * lg + 0.0514459929 * lb);
+  const m_ = Math.cbrt(0.2119034982 * lr + 0.6806995451 * lg + 0.1073969566 * lb);
+  const s_ = Math.cbrt(0.0883024619 * lr + 0.2817188376 * lg + 0.6299787005 * lb);
+  const L = 0.2104542553 * l_ + 0.793617785 * m_ - 0.0040720468 * s_;
+  const a = 1.9779984951 * l_ - 2.428592205 * m_ + 0.4505937099 * s_;
+  const bb = 0.0259040371 * l_ + 0.7827717662 * m_ - 0.808675766 * s_;
+  return { l: L, c: Math.hypot(a, bb), h: Math.atan2(bb, a) };
+}
+function oklchToRgbUnclamped({ l, c, h }) {
+  const a = c * Math.cos(h);
+  const b = c * Math.sin(h);
+  const l_ = (l + 0.3963377774 * a + 0.2158037573 * b) ** 3;
+  const m_ = (l - 0.1055613458 * a - 0.0638541728 * b) ** 3;
+  const s_ = (l - 0.0894841775 * a - 1.291485548 * b) ** 3;
+  return [
+    fromLinear(4.0767416621 * l_ - 3.3077115913 * m_ + 0.2309699292 * s_),
+    fromLinear(-1.2684380046 * l_ + 2.6097574011 * m_ - 0.3413193965 * s_),
+    fromLinear(-0.0041960863 * l_ - 0.7034186147 * m_ + 1.707614701 * s_)
+  ];
+}
+var inGamut = (rgb) => rgb.every((v) => v >= -1e-4 && v <= 1 + 1e-4);
+function oklchToRgb(color) {
+  const l = Math.min(1, Math.max(0, color.l));
+  let rgb = oklchToRgbUnclamped({ ...color, l });
+  if (inGamut(rgb)) return rgb;
+  let lo = 0;
+  let hi = color.c;
+  for (let i = 0; i < 20; i++) {
+    const mid = (lo + hi) / 2;
+    if (inGamut(oklchToRgbUnclamped({ l, c: mid, h: color.h }))) lo = mid;
+    else hi = mid;
+  }
+  rgb = oklchToRgbUnclamped({ l, c: lo, h: color.h });
+  return rgb;
+}
+function luminance([r, g, b]) {
+  return 0.2126 * toLinear(r) + 0.7152 * toLinear(g) + 0.0722 * toLinear(b);
+}
+function contrastRatio(a, b) {
+  const [la, lb] = [luminance(parseHex(a)), luminance(parseHex(b))];
+  return (Math.max(la, lb) + 0.05) / (Math.min(la, lb) + 0.05);
+}
+function blend(fg, alpha, bg) {
+  const [f, b] = [parseHex(fg), parseHex(bg)];
+  return toHex(f.map((v, i) => v * alpha + b[i] * (1 - alpha)));
+}
+var withL = (base, l, c = base.c) => toHex(oklchToRgb({ l, c, h: base.h }));
+function findReadable(base, startL, step, backgrounds) {
+  let l = startL;
+  for (let i = 0; i < 40; i++) {
+    const hex = withL(base, l);
+    if (backgrounds.every((bg) => contrastRatio(hex, bg) >= 4.5)) return hex;
+    l = Math.min(1, Math.max(0, l + step));
+  }
+  return step < 0 ? palette.black : palette.white;
+}
+function pickContrast(solid) {
+  const white = palette.white;
+  const dark = palette.gray[900];
+  if (contrastRatio(white, solid) >= 4.5) return white;
+  return contrastRatio(dark, solid) >= contrastRatio(white, solid) ? dark : white;
+}
+var rgba = (hex, alpha) => {
+  const [r, g, b] = parseHex(hex).map((v) => Math.round(v * 255));
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+};
+function createIntentColors(intent, color) {
+  const solid = toHex(parseHex(color));
+  const base = rgbToOklch(parseHex(solid));
+  const lightSubtle = withL(base, 0.97, Math.min(base.c, 0.12) * 0.3);
+  const lightSubtleHover = withL(base, 0.93, Math.min(base.c, 0.12) * 0.45);
+  const light = {
+    solid,
+    solidHover: withL(base, Math.max(0, base.l - 0.06)),
+    contrast: pickContrast(solid),
+    subtle: lightSubtle,
+    subtleHover: lightSubtleHover,
+    text: findReadable(base, Math.min(base.l, 0.55), -0.02, [lightColors.bg.default, lightSubtle, lightSubtleHover])
+  };
+  const darkBg = darkColors.bg.default;
+  const darkSolid = base.l < 0.5 ? withL(base, 0.55) : solid;
+  const darkBase = rgbToOklch(parseHex(darkSolid));
+  const darkSubtleOnBg = blend(darkSolid, 0.16, darkBg);
+  const darkSubtleHoverOnBg = blend(darkSolid, 0.26, darkBg);
+  const dark = {
+    solid: darkSolid,
+    solidHover: withL(darkBase, Math.min(1, darkBase.l + 0.06)),
+    contrast: pickContrast(darkSolid),
+    subtle: rgba(darkSolid, 0.16),
+    subtleHover: rgba(darkSolid, 0.26),
+    text: findReadable(darkBase, Math.max(darkBase.l, 0.75), 0.02, [darkBg, darkSubtleOnBg, darkSubtleHoverOnBg])
+  };
+  return { light: { color: { [intent]: light } }, dark: { color: { [intent]: dark } } };
+}
+
+// src/theme/createTheme.ts
+import { assignInlineVars } from "@vanilla-extract/dynamic";
+function deepMerge(target, source) {
+  if (!source) return target;
+  const out = { ...target };
+  for (const [key, value2] of Object.entries(source)) {
+    if (value2 === void 0) continue;
+    const prev = out[key];
+    out[key] = typeof value2 === "object" && typeof prev === "object" ? deepMerge(prev, value2) : value2;
+  }
+  return out;
+}
+function createTheme(...inputs) {
+  let light = {};
+  let dark = {};
+  for (const input3 of inputs) {
+    light = deepMerge(deepMerge(light, input3.common), input3.light);
+    dark = deepMerge(deepMerge(dark, input3.common), input3.dark);
+  }
+  return Object.freeze({ light, dark });
+}
+function mergeThemes(a, b) {
+  if (!a) return b;
+  if (!b) return a;
+  return createTheme(a, b);
+}
+function flatten(partial, contract, out) {
+  for (const [key, value2] of Object.entries(partial)) {
+    const target = contract[key];
+    if (target === void 0) continue;
+    if (typeof target === "string" && typeof value2 === "string") out[target] = value2;
+    else if (typeof target === "object" && typeof value2 === "object") flatten(value2, target, out);
+  }
+  return out;
+}
+function themeToStyle(theme, mode) {
+  if (!theme) return void 0;
+  const map = flatten(theme[mode], vars, {});
+  return Object.keys(map).length ? assignInlineVars(map) : void 0;
+}
 
 // src/theme/ThemeProvider.tsx
-import { createContext, forwardRef, useContext } from "react";
+import { createContext, forwardRef, useContext, useMemo } from "react";
 
 // src/utils/cx.ts
 function cx(...classNames) {
@@ -18,15 +170,36 @@ var root = "sfyhlv1 sfyhlv0";
 
 // src/theme/ThemeProvider.tsx
 import { jsx } from "react/jsx-runtime";
-var ThemeContext = createContext("light");
-var ThemeProvider = forwardRef(function ThemeProvider2({ theme = "light", className, children, ...rest }, ref) {
-  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value: theme, children: /* @__PURE__ */ jsx("div", { ref, "data-theme": theme, className: cx(themeClass[theme], root, className), ...rest, children }) });
+var ThemeContext = createContext({ theme: "light" });
+var ThemeProvider = forwardRef(function ThemeProvider2({ theme: themeProp, overrides, className, style, children, ...rest }, ref) {
+  const parent = useContext(ThemeContext);
+  const theme = themeProp ?? parent.theme;
+  const merged = useMemo(() => mergeThemes(parent.overrides, overrides), [parent.overrides, overrides]);
+  const value2 = useMemo(
+    () => ({ theme, overrides: merged, style: themeToStyle(merged, theme) }),
+    [theme, merged]
+  );
+  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value: value2, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      "data-theme": theme,
+      className: cx(themeClass[theme], root, className),
+      style: value2.style ? { ...value2.style, ...style } : style,
+      ...rest,
+      children
+    }
+  ) });
 });
 function useTheme() {
-  return useContext(ThemeContext);
+  return useContext(ThemeContext).theme;
+}
+function usePortalProps() {
+  const { theme, style } = useContext(ThemeContext);
+  return { className: cx(themeClass[theme], portal), style };
 }
 function usePortalClassName() {
-  return cx(themeClass[useTheme()], portal);
+  return usePortalProps().className;
 }
 
 // src/components/Button/Button.tsx
@@ -175,19 +348,7 @@ var TextField = forwardRef5(function TextField2({ label: label2, helperText: hel
 
 // src/components/Modal/Modal.tsx
 import * as Dialog from "@radix-ui/react-dialog";
-
-// src/icons/index.tsx
-import { jsx as jsx6 } from "react/jsx-runtime";
-var base = { width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", "aria-hidden": true };
-function CloseIcon(props) {
-  return /* @__PURE__ */ jsx6("svg", { ...base, ...props, children: /* @__PURE__ */ jsx6("path", { d: "M4 4l8 8M12 4l-8 8", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) });
-}
-function ChevronDownIcon(props) {
-  return /* @__PURE__ */ jsx6("svg", { ...base, ...props, children: /* @__PURE__ */ jsx6("path", { d: "M4 6l4 4 4-4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
-}
-function CheckIcon(props) {
-  return /* @__PURE__ */ jsx6("svg", { ...base, ...props, children: /* @__PURE__ */ jsx6("path", { d: "M3.5 8.5l3 3 6-7", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
-}
+import { XIcon } from "@bestow-ui/icons";
 
 // src/components/Modal/Modal.css.ts
 import { createRuntimeFn as _7a4684 } from "@vanilla-extract/recipes/createRuntimeFn";
@@ -202,7 +363,7 @@ var overlay = "_1pdsmv00";
 var title = "_1pdsmv07";
 
 // src/components/Modal/Modal.tsx
-import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 function Modal({
   open,
   defaultOpen,
@@ -217,27 +378,28 @@ function Modal({
   closeOnOverlayClick = true,
   className
 }) {
-  const portalClassName = usePortalClassName();
+  const portal2 = usePortalProps();
   return /* @__PURE__ */ jsxs5(Dialog.Root, { open, defaultOpen, onOpenChange, children: [
-    trigger2 && /* @__PURE__ */ jsx7(Dialog.Trigger, { asChild: true, children: trigger2 }),
+    trigger2 && /* @__PURE__ */ jsx6(Dialog.Trigger, { asChild: true, children: trigger2 }),
     /* @__PURE__ */ jsxs5(Dialog.Portal, { children: [
-      /* @__PURE__ */ jsx7(Dialog.Overlay, { className: cx(portalClassName, overlay) }),
+      /* @__PURE__ */ jsx6(Dialog.Overlay, { className: cx(portal2.className, overlay), style: portal2.style }),
       /* @__PURE__ */ jsxs5(
         Dialog.Content,
         {
-          className: cx(portalClassName, content({ size }), className),
+          className: cx(portal2.className, content({ size }), className),
+          style: portal2.style,
           onPointerDownOutside: closeOnOverlayClick ? void 0 : (event) => event.preventDefault(),
           ...description3 ? {} : { "aria-describedby": void 0 },
           children: [
             /* @__PURE__ */ jsxs5("div", { className: header, children: [
               /* @__PURE__ */ jsxs5("div", { className: headings, children: [
-                /* @__PURE__ */ jsx7(Dialog.Title, { className: title, children: title3 }),
-                description3 && /* @__PURE__ */ jsx7(Dialog.Description, { className: description, children: description3 })
+                /* @__PURE__ */ jsx6(Dialog.Title, { className: title, children: title3 }),
+                description3 && /* @__PURE__ */ jsx6(Dialog.Description, { className: description, children: description3 })
               ] }),
-              !hideCloseButton && /* @__PURE__ */ jsx7(Dialog.Close, { className: closeButton, "aria-label": "\uB2EB\uAE30", children: /* @__PURE__ */ jsx7(CloseIcon, {}) })
+              !hideCloseButton && /* @__PURE__ */ jsx6(Dialog.Close, { className: closeButton, "aria-label": "\uB2EB\uAE30", children: /* @__PURE__ */ jsx6(XIcon, { size: 16 }) })
             ] }),
-            children && /* @__PURE__ */ jsx7("div", { className: body, children }),
-            footer2 && /* @__PURE__ */ jsx7("div", { className: footer, children: footer2 })
+            children && /* @__PURE__ */ jsx6("div", { className: body, children }),
+            footer2 && /* @__PURE__ */ jsx6("div", { className: footer, children: footer2 })
           ]
         }
       )
@@ -249,6 +411,7 @@ var ModalClose = Dialog.Close;
 // src/components/Select/Select.tsx
 import * as RadixSelect from "@radix-ui/react-select";
 import { forwardRef as forwardRef6, useId as useId2 } from "react";
+import { CheckIcon, ChevronDownIcon } from "@bestow-ui/icons";
 
 // src/components/Select/Select.css.ts
 var content2 = "_1kx81e83";
@@ -260,7 +423,7 @@ var value = "_1kx81e81";
 var viewport = "_1kx81e84";
 
 // src/components/Select/Select.tsx
-import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 var Select = forwardRef6(function Select2({
   options,
   value: value2,
@@ -282,11 +445,11 @@ var Select = forwardRef6(function Select2({
   const generatedId = useId2();
   const triggerId = id ?? generatedId;
   const helperId = helperText2 ? `${triggerId}-helper` : void 0;
-  const portalClassName = usePortalClassName();
+  const portal2 = usePortalProps();
   return /* @__PURE__ */ jsxs6("div", { className: cx(field, fullWidth && fieldFullWidth), children: [
     label2 && /* @__PURE__ */ jsxs6("label", { htmlFor: triggerId, className: label, children: [
       label2,
-      required && /* @__PURE__ */ jsx8("span", { className: requiredMark, "aria-hidden": true, children: "*" })
+      required && /* @__PURE__ */ jsx7("span", { className: requiredMark, "aria-hidden": true, children: "*" })
     ] }),
     /* @__PURE__ */ jsxs6(
       RadixSelect.Root,
@@ -309,27 +472,28 @@ var Select = forwardRef6(function Select2({
               "data-invalid": error || void 0,
               className: cx(root3({ size, fullWidth }), trigger, className),
               children: [
-                /* @__PURE__ */ jsx8("span", { className: value, children: /* @__PURE__ */ jsx8(RadixSelect.Value, { placeholder }) }),
-                /* @__PURE__ */ jsx8(RadixSelect.Icon, { className: icon2, children: /* @__PURE__ */ jsx8(ChevronDownIcon, {}) })
+                /* @__PURE__ */ jsx7("span", { className: value, children: /* @__PURE__ */ jsx7(RadixSelect.Value, { placeholder }) }),
+                /* @__PURE__ */ jsx7(RadixSelect.Icon, { className: icon2, children: /* @__PURE__ */ jsx7(ChevronDownIcon, { size: 16 }) })
               ]
             }
           ),
-          /* @__PURE__ */ jsx8(RadixSelect.Portal, { children: /* @__PURE__ */ jsx8(
+          /* @__PURE__ */ jsx7(RadixSelect.Portal, { children: /* @__PURE__ */ jsx7(
             RadixSelect.Content,
             {
               position: "popper",
               sideOffset: 4,
               collisionPadding: 8,
-              className: cx(portalClassName, content2),
-              children: /* @__PURE__ */ jsx8(RadixSelect.Viewport, { className: viewport, children: options.map((option) => /* @__PURE__ */ jsxs6(
+              className: cx(portal2.className, content2),
+              style: portal2.style,
+              children: /* @__PURE__ */ jsx7(RadixSelect.Viewport, { className: viewport, children: options.map((option) => /* @__PURE__ */ jsxs6(
                 RadixSelect.Item,
                 {
                   value: option.value,
                   disabled: option.disabled,
                   className: item,
                   children: [
-                    /* @__PURE__ */ jsx8(RadixSelect.ItemText, { children: option.label }),
-                    /* @__PURE__ */ jsx8(RadixSelect.ItemIndicator, { className: itemIndicator, children: /* @__PURE__ */ jsx8(CheckIcon, {}) })
+                    /* @__PURE__ */ jsx7(RadixSelect.ItemText, { children: option.label }),
+                    /* @__PURE__ */ jsx7(RadixSelect.ItemIndicator, { className: itemIndicator, children: /* @__PURE__ */ jsx7(CheckIcon, { size: 16 }) })
                   ]
                 },
                 option.value
@@ -339,7 +503,7 @@ var Select = forwardRef6(function Select2({
         ]
       }
     ),
-    helperText2 && /* @__PURE__ */ jsx8("p", { id: helperId, className: helperText({ error }), children: helperText2 })
+    helperText2 && /* @__PURE__ */ jsx7("p", { id: helperId, className: helperText({ error }), children: helperText2 })
   ] });
 });
 
@@ -351,9 +515,9 @@ import { createRuntimeFn as _7a4685 } from "@vanilla-extract/recipes/createRunti
 var stack = _7a4685({ defaultClassName: "_1jz9hj90", variantClassNames: { direction: { row: "_1jz9hj91", column: "_1jz9hj92", "row-reverse": "_1jz9hj93", "column-reverse": "_1jz9hj94" }, gap: { "0": "_1jz9hj95", "1": "_1jz9hj96", "2": "_1jz9hj97", "3": "_1jz9hj98", "4": "_1jz9hj99", "5": "_1jz9hj9a", "6": "_1jz9hj9b", "8": "_1jz9hj9c", "10": "_1jz9hj9d", "12": "_1jz9hj9e", "16": "_1jz9hj9f" }, align: { start: "_1jz9hj9g", center: "_1jz9hj9h", end: "_1jz9hj9i", stretch: "_1jz9hj9j", baseline: "_1jz9hj9k" }, justify: { start: "_1jz9hj9l", center: "_1jz9hj9m", end: "_1jz9hj9n", between: "_1jz9hj9o", around: "_1jz9hj9p", evenly: "_1jz9hj9q" }, wrap: { true: "_1jz9hj9r" } }, defaultVariants: { direction: "column" }, compoundVariants: [] });
 
 // src/components/Stack/Stack.tsx
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { jsx as jsx8 } from "react/jsx-runtime";
 var Stack = forwardRef7(function Stack2({ as: Component = "div", direction, gap, align, justify, wrap, className, ...rest }, ref) {
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx8(
     Component,
     {
       ref,
@@ -365,7 +529,8 @@ var Stack = forwardRef7(function Stack2({ as: Component = "div", direction, gap,
 
 // src/components/Toast/Toast.tsx
 import * as RadixToast from "@radix-ui/react-toast";
-import { createContext as createContext2, useCallback, useContext as useContext2, useMemo, useRef as useRef2, useState } from "react";
+import { createContext as createContext2, useCallback, useContext as useContext2, useMemo as useMemo2, useRef as useRef2, useState } from "react";
+import { XIcon as XIcon2 } from "@bestow-ui/icons";
 
 // src/components/Toast/Toast.css.ts
 import { createRuntimeFn as _7a4686 } from "@vanilla-extract/recipes/createRuntimeFn";
@@ -377,13 +542,13 @@ var toast = _7a4686({ defaultClassName: "_1g11zvx1", variantClassNames: { varian
 var viewport2 = "_1g11zvx0";
 
 // src/components/Toast/Toast.tsx
-import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
 var REMOVE_DELAY = 500;
 var ToastContext = createContext2(null);
 function ToastProvider({ children, duration = 5e3, label: label2 = "\uC54C\uB9BC" }) {
   const [toasts, setToasts] = useState([]);
   const nextId = useRef2(0);
-  const portalClassName = usePortalClassName();
+  const portal2 = usePortalProps();
   const toast2 = useCallback((options) => {
     const id = nextId.current++;
     setToasts((prev) => [...prev, { ...options, id, open: true }]);
@@ -394,8 +559,8 @@ function ToastProvider({ children, duration = 5e3, label: label2 = "\uC54C\uB9BC
     setToasts((prev) => prev.map((t) => isTarget(t) ? { ...t, open: false } : t));
     setTimeout(() => setToasts((prev) => prev.filter((t) => t.open || !isTarget(t))), REMOVE_DELAY);
   }, []);
-  const value2 = useMemo(() => ({ toast: toast2, dismiss }), [toast2, dismiss]);
-  return /* @__PURE__ */ jsx10(ToastContext.Provider, { value: value2, children: /* @__PURE__ */ jsxs7(RadixToast.Provider, { duration, label: label2, swipeDirection: "right", children: [
+  const value2 = useMemo2(() => ({ toast: toast2, dismiss }), [toast2, dismiss]);
+  return /* @__PURE__ */ jsx9(ToastContext.Provider, { value: value2, children: /* @__PURE__ */ jsxs7(RadixToast.Provider, { duration, label: label2, swipeDirection: "right", children: [
     children,
     toasts.map(({ id, open, title: title3, description: description3, variant, duration: itemDuration, action: action2 }) => /* @__PURE__ */ jsxs7(
       RadixToast.Root,
@@ -407,15 +572,15 @@ function ToastProvider({ children, duration = 5e3, label: label2 = "\uC54C\uB9BC
         },
         className: toast({ variant }),
         children: [
-          /* @__PURE__ */ jsx10(RadixToast.Title, { className: title2, children: title3 }),
-          description3 && /* @__PURE__ */ jsx10(RadixToast.Description, { className: description2, children: description3 }),
-          action2 && /* @__PURE__ */ jsx10(RadixToast.Action, { asChild: true, altText: action2.altText ?? action2.label, className: action, children: /* @__PURE__ */ jsx10(Button, { size: "sm", variant: "soft", color: "neutral", onClick: action2.onClick, children: action2.label }) }),
-          /* @__PURE__ */ jsx10(RadixToast.Close, { className: close, "aria-label": "\uB2EB\uAE30", children: /* @__PURE__ */ jsx10(CloseIcon, {}) })
+          /* @__PURE__ */ jsx9(RadixToast.Title, { className: title2, children: title3 }),
+          description3 && /* @__PURE__ */ jsx9(RadixToast.Description, { className: description2, children: description3 }),
+          action2 && /* @__PURE__ */ jsx9(RadixToast.Action, { asChild: true, altText: action2.altText ?? action2.label, className: action, children: /* @__PURE__ */ jsx9(Button, { size: "sm", variant: "soft", color: "neutral", onClick: action2.onClick, children: action2.label }) }),
+          /* @__PURE__ */ jsx9(RadixToast.Close, { className: close, "aria-label": "\uB2EB\uAE30", children: /* @__PURE__ */ jsx9(XIcon2, { size: 16 }) })
         ]
       },
       id
     )),
-    /* @__PURE__ */ jsx10(RadixToast.Viewport, { className: cx(portalClassName, viewport2) })
+    /* @__PURE__ */ jsx9(RadixToast.Viewport, { className: cx(portal2.className, viewport2), style: portal2.style })
   ] }) });
 }
 function useToast() {
@@ -432,7 +597,7 @@ var arrow = "z7rufs1";
 var content3 = "z7rufs0";
 
 // src/components/Tooltip/Tooltip.tsx
-import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
 function Tooltip({
   content: content4,
   children,
@@ -445,21 +610,22 @@ function Tooltip({
   disabled,
   className
 }) {
-  const portalClassName = usePortalClassName();
+  const portal2 = usePortalProps();
   if (disabled || content4 == null || content4 === "") return children;
-  return /* @__PURE__ */ jsx11(RadixTooltip.Provider, { delayDuration: delay, children: /* @__PURE__ */ jsxs8(RadixTooltip.Root, { open, defaultOpen, onOpenChange, children: [
-    /* @__PURE__ */ jsx11(RadixTooltip.Trigger, { asChild: true, children }),
-    /* @__PURE__ */ jsx11(RadixTooltip.Portal, { children: /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsx10(RadixTooltip.Provider, { delayDuration: delay, children: /* @__PURE__ */ jsxs8(RadixTooltip.Root, { open, defaultOpen, onOpenChange, children: [
+    /* @__PURE__ */ jsx10(RadixTooltip.Trigger, { asChild: true, children }),
+    /* @__PURE__ */ jsx10(RadixTooltip.Portal, { children: /* @__PURE__ */ jsxs8(
       RadixTooltip.Content,
       {
         side,
         align,
         sideOffset: 6,
         collisionPadding: 8,
-        className: cx(portalClassName, content3, className),
+        className: cx(portal2.className, content3, className),
+        style: portal2.style,
         children: [
           content4,
-          /* @__PURE__ */ jsx11(RadixTooltip.Arrow, { className: arrow, width: 10, height: 5 })
+          /* @__PURE__ */ jsx10(RadixTooltip.Arrow, { className: arrow, width: 10, height: 5 })
         ]
       }
     ) })
@@ -474,7 +640,7 @@ import { createRuntimeFn as _7a4687 } from "@vanilla-extract/recipes/createRunti
 var typography = _7a4687({ defaultClassName: "kiolio0", variantClassNames: { variant: { display: "kiolio1", h1: "kiolio2", h2: "kiolio3", h3: "kiolio4", h4: "kiolio5", "body-lg": "kiolio6", body: "kiolio7", "body-sm": "kiolio8", caption: "kiolio9" }, color: { "default": "kiolioa", muted: "kioliob", subtle: "kiolioc", primary: "kioliod", danger: "kiolioe", success: "kioliof", inherit: "kioliog" }, weight: { regular: "kiolioh", medium: "kiolioi", semibold: "kiolioj", bold: "kioliok" }, align: { start: "kioliol", center: "kioliom", end: "kiolion" }, truncate: { true: "kiolioo" } }, defaultVariants: { variant: "body", color: "default" }, compoundVariants: [] });
 
 // src/components/Typography/Typography.tsx
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 var defaultElement = {
   display: "h1",
   h1: "h1",
@@ -488,7 +654,7 @@ var defaultElement = {
 };
 var Typography = forwardRef8(function Typography2({ variant = "body", as, color, weight, align, truncate, className, ...rest }, ref) {
   const Component = as ?? defaultElement[variant];
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx11(
     Component,
     {
       ref,
@@ -510,8 +676,12 @@ export {
   ToastProvider,
   Tooltip,
   Typography,
+  contrastRatio,
+  createIntentColors,
+  createTheme,
   themeClass,
   usePortalClassName,
+  usePortalProps,
   useTheme,
   useToast,
   vars