@bestow-ui/react 0.0.0-stage → 0.2.0

package/dist/index.js

@@ -0,0 +1,519 @@
+"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)" } } };
+
+// src/theme/ThemeProvider.tsx
+import { createContext, forwardRef, useContext } from "react";
+
+// src/utils/cx.ts
+function cx(...classNames) {
+  return classNames.filter(Boolean).join(" ");
+}
+
+// src/theme/ThemeProvider.css.ts
+var portal = "sfyhlv0";
+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 }) });
+});
+function useTheme() {
+  return useContext(ThemeContext);
+}
+function usePortalClassName() {
+  return cx(themeClass[useTheme()], portal);
+}
+
+// src/components/Button/Button.tsx
+import { forwardRef as forwardRef2 } from "react";
+
+// src/components/Button/Button.css.ts
+import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
+var button = _7a468({ defaultClassName: "xcekda6", variantClassNames: { variant: { solid: "xcekda7", soft: "xcekda8", outline: "xcekda9", ghost: "xcekdaa" }, color: { primary: "xcekdab", neutral: "xcekdac", danger: "xcekdad" }, size: { sm: "xcekdae", md: "xcekdaf", lg: "xcekdag" }, fullWidth: { true: "xcekdah" } }, defaultVariants: { variant: "solid", color: "primary", size: "md" }, compoundVariants: [] });
+var icon = "xcekdai";
+
+// src/components/Button/Button.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var Button = forwardRef2(function Button2({ variant, color, size, fullWidth, startIcon, endIcon, className, type = "button", children, ...rest }, ref) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ref,
+      type,
+      className: cx(button({ variant, color, size, fullWidth }), className),
+      ...rest,
+      children: [
+        startIcon && /* @__PURE__ */ jsx2("span", { className: icon, children: startIcon }),
+        children,
+        endIcon && /* @__PURE__ */ jsx2("span", { className: icon, children: endIcon })
+      ]
+    }
+  );
+});
+
+// src/components/Checkbox/Checkbox.tsx
+import { forwardRef as forwardRef3, useEffect, useRef } from "react";
+
+// src/utils/mergeRefs.ts
+function mergeRefs(...refs) {
+  return (value2) => {
+    for (const ref of refs) {
+      if (typeof ref === "function") ref(value2);
+      else if (ref) ref.current = value2;
+    }
+  };
+}
+
+// src/components/Checkbox/Checkbox.css.ts
+import { createRuntimeFn as _7a4682 } from "@vanilla-extract/recipes/createRuntimeFn";
+var checkIcon = "_1y7mzsn8 _1y7mzsn7";
+var control = _7a4682({ defaultClassName: "_1y7mzsn3", variantClassNames: { size: { sm: "_1y7mzsn4", md: "_1y7mzsn5" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
+var indeterminateIcon = "_1y7mzsn9 _1y7mzsn7";
+var input = "_1y7mzsn6";
+var root2 = _7a4682({ defaultClassName: "_1y7mzsn0", variantClassNames: { size: { sm: "_1y7mzsn1", md: "_1y7mzsn2" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
+
+// src/components/Checkbox/Checkbox.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var Checkbox = forwardRef3(function Checkbox2({ label: label2, size, indeterminate = false, invalid, disabled, className, ...rest }, ref) {
+  const innerRef = useRef(null);
+  useEffect(() => {
+    if (innerRef.current) innerRef.current.indeterminate = indeterminate;
+  }, [indeterminate]);
+  return /* @__PURE__ */ jsxs2("label", { className: cx(root2({ size }), className), "data-disabled": disabled || void 0, children: [
+    /* @__PURE__ */ jsxs2("span", { className: control({ size }), children: [
+      /* @__PURE__ */ jsx3(
+        "input",
+        {
+          ref: mergeRefs(innerRef, ref),
+          type: "checkbox",
+          className: input,
+          disabled,
+          "aria-invalid": invalid || void 0,
+          ...rest
+        }
+      ),
+      /* @__PURE__ */ jsx3("svg", { className: checkIcon, viewBox: "0 0 20 20", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ jsx3("path", { d: "M5 10.5l3.2 3L15 7", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }),
+      /* @__PURE__ */ jsx3("svg", { className: indeterminateIcon, viewBox: "0 0 20 20", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ jsx3("path", { d: "M6 10h8", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) })
+    ] }),
+    label2
+  ] });
+});
+
+// src/components/Input/Input.tsx
+import { forwardRef as forwardRef4 } from "react";
+
+// src/components/Input/Input.css.ts
+import { createRuntimeFn as _7a4683 } from "@vanilla-extract/recipes/createRuntimeFn";
+var adornment = "_19p5zvh6";
+var field = "_19p5zvh7";
+var fieldFullWidth = "_19p5zvh8";
+var helperText = _7a4683({ defaultClassName: "_19p5zvhb", variantClassNames: { error: { true: "_19p5zvhc" } }, defaultVariants: {}, compoundVariants: [] });
+var input2 = "_19p5zvh5";
+var label = "_19p5zvh9";
+var requiredMark = "_19p5zvha";
+var root3 = _7a4683({ defaultClassName: "_19p5zvh0", variantClassNames: { size: { sm: "_19p5zvh1", md: "_19p5zvh2", lg: "_19p5zvh3" }, fullWidth: { true: "_19p5zvh4" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
+
+// src/components/Input/Input.tsx
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var Input = forwardRef4(function Input2({ size, invalid, fullWidth, startAdornment, endAdornment, rootClassName, className, disabled, ...rest }, ref) {
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      className: cx(root3({ size, fullWidth }), rootClassName),
+      "data-invalid": invalid || void 0,
+      "data-disabled": disabled || void 0,
+      children: [
+        startAdornment && /* @__PURE__ */ jsx4("span", { className: adornment, children: startAdornment }),
+        /* @__PURE__ */ jsx4(
+          "input",
+          {
+            ref,
+            className: cx(input2, className),
+            disabled,
+            "aria-invalid": invalid || void 0,
+            ...rest
+          }
+        ),
+        endAdornment && /* @__PURE__ */ jsx4("span", { className: adornment, children: endAdornment })
+      ]
+    }
+  );
+});
+
+// src/components/Input/TextField.tsx
+import { forwardRef as forwardRef5, useId } from "react";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+var TextField = forwardRef5(function TextField2({ label: label2, helperText: helperText2, error, required, fullWidth, id, "aria-describedby": ariaDescribedBy, ...rest }, ref) {
+  const generatedId = useId();
+  const inputId = id ?? generatedId;
+  const helperId = helperText2 ? `${inputId}-helper` : void 0;
+  return /* @__PURE__ */ jsxs4("div", { className: cx(field, fullWidth && fieldFullWidth), children: [
+    label2 && /* @__PURE__ */ jsxs4("label", { htmlFor: inputId, className: label, children: [
+      label2,
+      required && /* @__PURE__ */ jsx5("span", { className: requiredMark, "aria-hidden": true, children: "*" })
+    ] }),
+    /* @__PURE__ */ jsx5(
+      Input,
+      {
+        ref,
+        id: inputId,
+        invalid: error,
+        required,
+        fullWidth,
+        "aria-describedby": cx(helperId, ariaDescribedBy) || void 0,
+        ...rest
+      }
+    ),
+    helperText2 && /* @__PURE__ */ jsx5("p", { id: helperId, className: helperText({ error }), children: helperText2 })
+  ] });
+});
+
+// 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" }) });
+}
+
+// src/components/Modal/Modal.css.ts
+import { createRuntimeFn as _7a4684 } from "@vanilla-extract/recipes/createRuntimeFn";
+var body = "_1pdsmv0a";
+var closeButton = "_1pdsmv09";
+var content = _7a4684({ defaultClassName: "_1pdsmv01", variantClassNames: { size: { sm: "_1pdsmv02", md: "_1pdsmv03", lg: "_1pdsmv04" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
+var description = "_1pdsmv08";
+var footer = "_1pdsmv0b";
+var header = "_1pdsmv05";
+var headings = "_1pdsmv06";
+var overlay = "_1pdsmv00";
+var title = "_1pdsmv07";
+
+// src/components/Modal/Modal.tsx
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+function Modal({
+  open,
+  defaultOpen,
+  onOpenChange,
+  trigger: trigger2,
+  title: title3,
+  description: description3,
+  children,
+  footer: footer2,
+  size,
+  hideCloseButton = false,
+  closeOnOverlayClick = true,
+  className
+}) {
+  const portalClassName = usePortalClassName();
+  return /* @__PURE__ */ jsxs5(Dialog.Root, { open, defaultOpen, onOpenChange, children: [
+    trigger2 && /* @__PURE__ */ jsx7(Dialog.Trigger, { asChild: true, children: trigger2 }),
+    /* @__PURE__ */ jsxs5(Dialog.Portal, { children: [
+      /* @__PURE__ */ jsx7(Dialog.Overlay, { className: cx(portalClassName, overlay) }),
+      /* @__PURE__ */ jsxs5(
+        Dialog.Content,
+        {
+          className: cx(portalClassName, content({ size }), className),
+          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 })
+              ] }),
+              !hideCloseButton && /* @__PURE__ */ jsx7(Dialog.Close, { className: closeButton, "aria-label": "\uB2EB\uAE30", children: /* @__PURE__ */ jsx7(CloseIcon, {}) })
+            ] }),
+            children && /* @__PURE__ */ jsx7("div", { className: body, children }),
+            footer2 && /* @__PURE__ */ jsx7("div", { className: footer, children: footer2 })
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+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";
+
+// src/components/Select/Select.css.ts
+var content2 = "_1kx81e83";
+var icon2 = "_1kx81e82";
+var item = "_1kx81e85";
+var itemIndicator = "_1kx81e86";
+var trigger = "_1kx81e80";
+var value = "_1kx81e81";
+var viewport = "_1kx81e84";
+
+// src/components/Select/Select.tsx
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+var Select = forwardRef6(function Select2({
+  options,
+  value: value2,
+  defaultValue,
+  onValueChange,
+  placeholder,
+  label: label2,
+  helperText: helperText2,
+  error,
+  size,
+  fullWidth,
+  disabled,
+  required,
+  name,
+  id,
+  "aria-label": ariaLabel,
+  className
+}, ref) {
+  const generatedId = useId2();
+  const triggerId = id ?? generatedId;
+  const helperId = helperText2 ? `${triggerId}-helper` : void 0;
+  const portalClassName = usePortalClassName();
+  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: "*" })
+    ] }),
+    /* @__PURE__ */ jsxs6(
+      RadixSelect.Root,
+      {
+        value: value2,
+        defaultValue,
+        onValueChange,
+        disabled,
+        required,
+        name,
+        children: [
+          /* @__PURE__ */ jsxs6(
+            RadixSelect.Trigger,
+            {
+              ref,
+              id: triggerId,
+              "aria-label": ariaLabel,
+              "aria-invalid": error || void 0,
+              "aria-describedby": helperId,
+              "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__ */ jsx8(RadixSelect.Portal, { children: /* @__PURE__ */ jsx8(
+            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(
+                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, {}) })
+                  ]
+                },
+                option.value
+              )) })
+            }
+          ) })
+        ]
+      }
+    ),
+    helperText2 && /* @__PURE__ */ jsx8("p", { id: helperId, className: helperText({ error }), children: helperText2 })
+  ] });
+});
+
+// src/components/Stack/Stack.tsx
+import { forwardRef as forwardRef7 } from "react";
+
+// src/components/Stack/Stack.css.ts
+import { createRuntimeFn as _7a4685 } from "@vanilla-extract/recipes/createRuntimeFn";
+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";
+var Stack = forwardRef7(function Stack2({ as: Component = "div", direction, gap, align, justify, wrap, className, ...rest }, ref) {
+  return /* @__PURE__ */ jsx9(
+    Component,
+    {
+      ref,
+      className: cx(stack({ direction, gap, align, justify, wrap }), className),
+      ...rest
+    }
+  );
+});
+
+// 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";
+
+// src/components/Toast/Toast.css.ts
+import { createRuntimeFn as _7a4686 } from "@vanilla-extract/recipes/createRuntimeFn";
+var action = "_1g11zvx7";
+var close = "_1g11zvx8";
+var description2 = "_1g11zvx6";
+var title2 = "_1g11zvx5";
+var toast = _7a4686({ defaultClassName: "_1g11zvx1", variantClassNames: { variant: { "default": "_1g11zvx2", success: "_1g11zvx3", danger: "_1g11zvx4" } }, defaultVariants: { variant: "default" }, compoundVariants: [] });
+var viewport2 = "_1g11zvx0";
+
+// src/components/Toast/Toast.tsx
+import { jsx as jsx10, 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 toast2 = useCallback((options) => {
+    const id = nextId.current++;
+    setToasts((prev) => [...prev, { ...options, id, open: true }]);
+    return id;
+  }, []);
+  const dismiss = useCallback((id) => {
+    const isTarget = (t) => id === void 0 || t.id === id;
+    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: [
+    children,
+    toasts.map(({ id, open, title: title3, description: description3, variant, duration: itemDuration, action: action2 }) => /* @__PURE__ */ jsxs7(
+      RadixToast.Root,
+      {
+        open,
+        duration: itemDuration,
+        onOpenChange: (nextOpen) => {
+          if (!nextOpen) dismiss(id);
+        },
+        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, {}) })
+        ]
+      },
+      id
+    )),
+    /* @__PURE__ */ jsx10(RadixToast.Viewport, { className: cx(portalClassName, viewport2) })
+  ] }) });
+}
+function useToast() {
+  const context = useContext2(ToastContext);
+  if (!context) throw new Error("useToast \uB294 ToastProvider \uC548\uC5D0\uC11C \uC0AC\uC6A9\uD574\uC57C \uD569\uB2C8\uB2E4.");
+  return context;
+}
+
+// src/components/Tooltip/Tooltip.tsx
+import * as RadixTooltip from "@radix-ui/react-tooltip";
+
+// src/components/Tooltip/Tooltip.css.ts
+var arrow = "z7rufs1";
+var content3 = "z7rufs0";
+
+// src/components/Tooltip/Tooltip.tsx
+import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
+function Tooltip({
+  content: content4,
+  children,
+  side = "top",
+  align = "center",
+  delay = 300,
+  open,
+  defaultOpen,
+  onOpenChange,
+  disabled,
+  className
+}) {
+  const portalClassName = usePortalClassName();
+  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(
+      RadixTooltip.Content,
+      {
+        side,
+        align,
+        sideOffset: 6,
+        collisionPadding: 8,
+        className: cx(portalClassName, content3, className),
+        children: [
+          content4,
+          /* @__PURE__ */ jsx11(RadixTooltip.Arrow, { className: arrow, width: 10, height: 5 })
+        ]
+      }
+    ) })
+  ] }) });
+}
+
+// src/components/Typography/Typography.tsx
+import { forwardRef as forwardRef8 } from "react";
+
+// src/components/Typography/Typography.css.ts
+import { createRuntimeFn as _7a4687 } from "@vanilla-extract/recipes/createRuntimeFn";
+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";
+var defaultElement = {
+  display: "h1",
+  h1: "h1",
+  h2: "h2",
+  h3: "h3",
+  h4: "h4",
+  "body-lg": "p",
+  body: "p",
+  "body-sm": "p",
+  caption: "span"
+};
+var Typography = forwardRef8(function Typography2({ variant = "body", as, color, weight, align, truncate, className, ...rest }, ref) {
+  const Component = as ?? defaultElement[variant];
+  return /* @__PURE__ */ jsx12(
+    Component,
+    {
+      ref,
+      className: cx(typography({ variant, color, weight, align, truncate }), className),
+      ...rest
+    }
+  );
+});
+export {
+  Button,
+  Checkbox,
+  Input,
+  Modal,
+  ModalClose,
+  Select,
+  Stack,
+  TextField,
+  ThemeProvider,
+  ToastProvider,
+  Tooltip,
+  Typography,
+  themeClass,
+  usePortalClassName,
+  useTheme,
+  useToast,
+  vars
+};
+//# sourceMappingURL=index.js.map