@bestow-ui/react 0.1.0 → 0.2.1

package/dist/index.js

@@ -1,8 +1,8 @@
 "use client";
 
 // src/theme/contract.css.ts
-var themeClass = { light: "tkagtb23", dark: "tkagtb24" };
-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)" }, color: { bg: { "default": "var(--tkagtb14)", subtle: "var(--tkagtb15)", muted: "var(--tkagtb16)", inverse: "var(--tkagtb17)" }, fg: { "default": "var(--tkagtb18)", muted: "var(--tkagtb19)", subtle: "var(--tkagtb1a)", inverse: "var(--tkagtb1b)" }, border: { "default": "var(--tkagtb1c)", strong: "var(--tkagtb1d)", focus: "var(--tkagtb1e)" }, primary: { solid: "var(--tkagtb1f)", solidHover: "var(--tkagtb1g)", contrast: "var(--tkagtb1h)", subtle: "var(--tkagtb1i)", subtleHover: "var(--tkagtb1j)", text: "var(--tkagtb1k)" }, neutral: { solid: "var(--tkagtb1l)", solidHover: "var(--tkagtb1m)", contrast: "var(--tkagtb1n)", subtle: "var(--tkagtb1o)", subtleHover: "var(--tkagtb1p)", text: "var(--tkagtb1q)" }, danger: { solid: "var(--tkagtb1r)", solidHover: "var(--tkagtb1s)", contrast: "var(--tkagtb1t)", subtle: "var(--tkagtb1u)", subtleHover: "var(--tkagtb1v)", text: "var(--tkagtb1w)" }, success: { solid: "var(--tkagtb1x)", solidHover: "var(--tkagtb1y)", contrast: "var(--tkagtb1z)", subtle: "var(--tkagtb20)", subtleHover: "var(--tkagtb21)", text: "var(--tkagtb22)" } } };
+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";
@@ -13,7 +13,8 @@ function cx(...classNames) {
 }
 
 // src/theme/ThemeProvider.css.ts
-var root = "sfyhlv0";
+var portal = "sfyhlv0";
+var root = "sfyhlv1 sfyhlv0";
 
 // src/theme/ThemeProvider.tsx
 import { jsx } from "react/jsx-runtime";
@@ -24,6 +25,9 @@ var ThemeProvider = forwardRef(function ThemeProvider2({ theme = "light", classN
 function useTheme() {
   return useContext(ThemeContext);
 }
+function usePortalClassName() {
+  return cx(themeClass[useTheme()], portal);
+}
 
 // src/components/Button/Button.tsx
 import { forwardRef as forwardRef2 } from "react";
@@ -57,10 +61,10 @@ import { forwardRef as forwardRef3, useEffect, useRef } from "react";
 
 // src/utils/mergeRefs.ts
 function mergeRefs(...refs) {
-  return (value) => {
+  return (value2) => {
     for (const ref of refs) {
-      if (typeof ref === "function") ref(value);
-      else if (ref) ref.current = value;
+      if (typeof ref === "function") ref(value2);
+      else if (ref) ref.current = value2;
     }
   };
 }
@@ -169,17 +173,176 @@ var TextField = forwardRef5(function TextField2({ label: label2, helperText: hel
   ] });
 });
 
+// src/components/Modal/Modal.tsx
+import * as Dialog from "@radix-ui/react-dialog";
+import { XIcon } from "@bestow-ui/icons";
+
+// 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 jsx6, 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__ */ jsx6(Dialog.Trigger, { asChild: true, children: trigger2 }),
+    /* @__PURE__ */ jsxs5(Dialog.Portal, { children: [
+      /* @__PURE__ */ jsx6(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__ */ jsx6(Dialog.Title, { className: title, children: title3 }),
+                description3 && /* @__PURE__ */ jsx6(Dialog.Description, { className: description, children: description3 })
+              ] }),
+              !hideCloseButton && /* @__PURE__ */ jsx6(Dialog.Close, { className: closeButton, "aria-label": "\uB2EB\uAE30", children: /* @__PURE__ */ jsx6(XIcon, { size: 16 }) })
+            ] }),
+            children && /* @__PURE__ */ jsx6("div", { className: body, children }),
+            footer2 && /* @__PURE__ */ jsx6("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";
+import { CheckIcon, ChevronDownIcon } from "@bestow-ui/icons";
+
+// 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 jsx7, 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__ */ jsx7("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__ */ jsx7("span", { className: value, children: /* @__PURE__ */ jsx7(RadixSelect.Value, { placeholder }) }),
+                /* @__PURE__ */ jsx7(RadixSelect.Icon, { className: icon2, children: /* @__PURE__ */ jsx7(ChevronDownIcon, { size: 16 }) })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx7(RadixSelect.Portal, { children: /* @__PURE__ */ jsx7(
+            RadixSelect.Content,
+            {
+              position: "popper",
+              sideOffset: 4,
+              collisionPadding: 8,
+              className: cx(portalClassName, content2),
+              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__ */ jsx7(RadixSelect.ItemText, { children: option.label }),
+                    /* @__PURE__ */ jsx7(RadixSelect.ItemIndicator, { className: itemIndicator, children: /* @__PURE__ */ jsx7(CheckIcon, { size: 16 }) })
+                  ]
+                },
+                option.value
+              )) })
+            }
+          ) })
+        ]
+      }
+    ),
+    helperText2 && /* @__PURE__ */ jsx7("p", { id: helperId, className: helperText({ error }), children: helperText2 })
+  ] });
+});
+
 // src/components/Stack/Stack.tsx
-import { forwardRef as forwardRef6 } from "react";
+import { forwardRef as forwardRef7 } from "react";
 
 // src/components/Stack/Stack.css.ts
-import { createRuntimeFn as _7a4684 } from "@vanilla-extract/recipes/createRuntimeFn";
-var stack = _7a4684({ 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: [] });
+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 jsx6 } from "react/jsx-runtime";
-var Stack = forwardRef6(function Stack2({ as: Component = "div", direction, gap, align, justify, wrap, className, ...rest }, ref) {
-  return /* @__PURE__ */ jsx6(
+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__ */ jsx8(
     Component,
     {
       ref,
@@ -189,15 +352,119 @@ var Stack = forwardRef6(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 { XIcon as XIcon2 } from "@bestow-ui/icons";
+
+// 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 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 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__ */ 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,
+      {
+        open,
+        duration: itemDuration,
+        onOpenChange: (nextOpen) => {
+          if (!nextOpen) dismiss(id);
+        },
+        className: toast({ variant }),
+        children: [
+          /* @__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__ */ jsx9(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 jsx10, 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__ */ 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),
+        children: [
+          content4,
+          /* @__PURE__ */ jsx10(RadixTooltip.Arrow, { className: arrow, width: 10, height: 5 })
+        ]
+      }
+    ) })
+  ] }) });
+}
+
 // src/components/Typography/Typography.tsx
-import { forwardRef as forwardRef7 } from "react";
+import { forwardRef as forwardRef8 } from "react";
 
 // src/components/Typography/Typography.css.ts
-import { createRuntimeFn as _7a4685 } from "@vanilla-extract/recipes/createRuntimeFn";
-var typography = _7a4685({ 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: [] });
+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 jsx7 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 var defaultElement = {
   display: "h1",
   h1: "h1",
@@ -209,9 +476,9 @@ var defaultElement = {
   "body-sm": "p",
   caption: "span"
 };
-var Typography = forwardRef7(function Typography2({ variant = "body", as, color, weight, align, truncate, className, ...rest }, ref) {
+var Typography = forwardRef8(function Typography2({ variant = "body", as, color, weight, align, truncate, className, ...rest }, ref) {
   const Component = as ?? defaultElement[variant];
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx11(
     Component,
     {
       ref,
@@ -224,12 +491,19 @@ export {
   Button,
   Checkbox,
   Input,
+  Modal,
+  ModalClose,
+  Select,
   Stack,
   TextField,
   ThemeProvider,
+  ToastProvider,
+  Tooltip,
   Typography,
   themeClass,
+  usePortalClassName,
   useTheme,
+  useToast,
   vars
 };
 //# sourceMappingURL=index.js.map