@bestow-ui/react 0.1.0 → 0.2.0

package/dist/index.cjs

@@ -1,8 +1,10 @@
 "use client";
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -16,6 +18,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
@@ -24,19 +34,26 @@ __export(index_exports, {
   Button: () => Button,
   Checkbox: () => Checkbox,
   Input: () => Input,
+  Modal: () => Modal,
+  ModalClose: () => ModalClose,
+  Select: () => Select,
   Stack: () => Stack,
   TextField: () => TextField,
   ThemeProvider: () => ThemeProvider,
+  ToastProvider: () => ToastProvider,
+  Tooltip: () => Tooltip,
   Typography: () => Typography,
   themeClass: () => themeClass,
+  usePortalClassName: () => usePortalClassName,
   useTheme: () => useTheme,
+  useToast: () => useToast,
   vars: () => vars
 });
 module.exports = __toCommonJS(index_exports);
 
 // 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
 var import_react = require("react");
@@ -47,7 +64,8 @@ function cx(...classNames) {
 }
 
 // src/theme/ThemeProvider.css.ts
-var root = "sfyhlv0";
+var portal = "sfyhlv0";
+var root = "sfyhlv1 sfyhlv0";
 
 // src/theme/ThemeProvider.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -58,6 +76,9 @@ var ThemeProvider = (0, import_react.forwardRef)(function ThemeProvider2({ theme
 function useTheme() {
   return (0, import_react.useContext)(ThemeContext);
 }
+function usePortalClassName() {
+  return cx(themeClass[useTheme()], portal);
+}
 
 // src/components/Button/Button.tsx
 var import_react2 = require("react");
@@ -91,10 +112,10 @@ var import_react3 = require("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;
     }
   };
 }
@@ -203,17 +224,187 @@ var TextField = (0, import_react5.forwardRef)(function TextField2({ label: label
   ] });
 });
 
-// src/components/Stack/Stack.tsx
+// src/components/Modal/Modal.tsx
+var Dialog = __toESM(require("@radix-ui/react-dialog"), 1);
+
+// src/icons/index.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var base = { width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", "aria-hidden": true };
+function CloseIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("svg", { ...base, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M4 4l8 8M12 4l-8 8", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) });
+}
+function ChevronDownIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("svg", { ...base, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M4 6l4 4 4-4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
+}
+function CheckIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("svg", { ...base, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M3.5 8.5l3 3 6-7", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
+}
+
+// src/components/Modal/Modal.css.ts
+var import_createRuntimeFn4 = require("@vanilla-extract/recipes/createRuntimeFn");
+var body = "_1pdsmv0a";
+var closeButton = "_1pdsmv09";
+var content = (0, import_createRuntimeFn4.createRuntimeFn)({ 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
+var import_jsx_runtime7 = require("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__ */ (0, import_jsx_runtime7.jsxs)(Dialog.Root, { open, defaultOpen, onOpenChange, children: [
+    trigger2 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Dialog.Trigger, { asChild: true, children: trigger2 }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Dialog.Portal, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Dialog.Overlay, { className: cx(portalClassName, overlay) }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+        Dialog.Content,
+        {
+          className: cx(portalClassName, content({ size }), className),
+          onPointerDownOutside: closeOnOverlayClick ? void 0 : (event) => event.preventDefault(),
+          ...description3 ? {} : { "aria-describedby": void 0 },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: header, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: headings, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Dialog.Title, { className: title, children: title3 }),
+                description3 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Dialog.Description, { className: description, children: description3 })
+              ] }),
+              !hideCloseButton && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Dialog.Close, { className: closeButton, "aria-label": "\uB2EB\uAE30", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CloseIcon, {}) })
+            ] }),
+            children && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: body, children }),
+            footer2 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: footer, children: footer2 })
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+var ModalClose = Dialog.Close;
+
+// src/components/Select/Select.tsx
+var RadixSelect = __toESM(require("@radix-ui/react-select"), 1);
 var import_react6 = require("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
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var Select = (0, import_react6.forwardRef)(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 = (0, import_react6.useId)();
+  const triggerId = id ?? generatedId;
+  const helperId = helperText2 ? `${triggerId}-helper` : void 0;
+  const portalClassName = usePortalClassName();
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: cx(field, fullWidth && fieldFullWidth), children: [
+    label2 && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("label", { htmlFor: triggerId, className: label, children: [
+      label2,
+      required && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: requiredMark, "aria-hidden": true, children: "*" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+      RadixSelect.Root,
+      {
+        value: value2,
+        defaultValue,
+        onValueChange,
+        disabled,
+        required,
+        name,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+            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__ */ (0, import_jsx_runtime8.jsx)("span", { className: value, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(RadixSelect.Value, { placeholder }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(RadixSelect.Icon, { className: icon2, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ChevronDownIcon, {}) })
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(RadixSelect.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            RadixSelect.Content,
+            {
+              position: "popper",
+              sideOffset: 4,
+              collisionPadding: 8,
+              className: cx(portalClassName, content2),
+              children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(RadixSelect.Viewport, { className: viewport, children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+                RadixSelect.Item,
+                {
+                  value: option.value,
+                  disabled: option.disabled,
+                  className: item,
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(RadixSelect.ItemText, { children: option.label }),
+                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(RadixSelect.ItemIndicator, { className: itemIndicator, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CheckIcon, {}) })
+                  ]
+                },
+                option.value
+              )) })
+            }
+          ) })
+        ]
+      }
+    ),
+    helperText2 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { id: helperId, className: helperText({ error }), children: helperText2 })
+  ] });
+});
+
+// src/components/Stack/Stack.tsx
+var import_react7 = require("react");
+
 // src/components/Stack/Stack.css.ts
-var import_createRuntimeFn4 = require("@vanilla-extract/recipes/createRuntimeFn");
-var stack = (0, import_createRuntimeFn4.createRuntimeFn)({ 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: [] });
+var import_createRuntimeFn5 = require("@vanilla-extract/recipes/createRuntimeFn");
+var stack = (0, import_createRuntimeFn5.createRuntimeFn)({ 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
-var import_jsx_runtime6 = require("react/jsx-runtime");
-var Stack = (0, import_react6.forwardRef)(function Stack2({ as: Component = "div", direction, gap, align, justify, wrap, className, ...rest }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var Stack = (0, import_react7.forwardRef)(function Stack2({ as: Component = "div", direction, gap, align, justify, wrap, className, ...rest }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     Component,
     {
       ref,
@@ -223,15 +414,118 @@ var Stack = (0, import_react6.forwardRef)(function Stack2({ as: Component = "div
   );
 });
 
+// src/components/Toast/Toast.tsx
+var RadixToast = __toESM(require("@radix-ui/react-toast"), 1);
+var import_react8 = require("react");
+
+// src/components/Toast/Toast.css.ts
+var import_createRuntimeFn6 = require("@vanilla-extract/recipes/createRuntimeFn");
+var action = "_1g11zvx7";
+var close = "_1g11zvx8";
+var description2 = "_1g11zvx6";
+var title2 = "_1g11zvx5";
+var toast = (0, import_createRuntimeFn6.createRuntimeFn)({ defaultClassName: "_1g11zvx1", variantClassNames: { variant: { "default": "_1g11zvx2", success: "_1g11zvx3", danger: "_1g11zvx4" } }, defaultVariants: { variant: "default" }, compoundVariants: [] });
+var viewport2 = "_1g11zvx0";
+
+// src/components/Toast/Toast.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var REMOVE_DELAY = 500;
+var ToastContext = (0, import_react8.createContext)(null);
+function ToastProvider({ children, duration = 5e3, label: label2 = "\uC54C\uB9BC" }) {
+  const [toasts, setToasts] = (0, import_react8.useState)([]);
+  const nextId = (0, import_react8.useRef)(0);
+  const portalClassName = usePortalClassName();
+  const toast2 = (0, import_react8.useCallback)((options) => {
+    const id = nextId.current++;
+    setToasts((prev) => [...prev, { ...options, id, open: true }]);
+    return id;
+  }, []);
+  const dismiss = (0, import_react8.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 = (0, import_react8.useMemo)(() => ({ toast: toast2, dismiss }), [toast2, dismiss]);
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ToastContext.Provider, { value: value2, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(RadixToast.Provider, { duration, label: label2, swipeDirection: "right", children: [
+    children,
+    toasts.map(({ id, open, title: title3, description: description3, variant, duration: itemDuration, action: action2 }) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+      RadixToast.Root,
+      {
+        open,
+        duration: itemDuration,
+        onOpenChange: (nextOpen) => {
+          if (!nextOpen) dismiss(id);
+        },
+        className: toast({ variant }),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(RadixToast.Title, { className: title2, children: title3 }),
+          description3 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(RadixToast.Description, { className: description2, children: description3 }),
+          action2 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(RadixToast.Action, { asChild: true, altText: action2.altText ?? action2.label, className: action, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Button, { size: "sm", variant: "soft", color: "neutral", onClick: action2.onClick, children: action2.label }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(RadixToast.Close, { className: close, "aria-label": "\uB2EB\uAE30", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(CloseIcon, {}) })
+        ]
+      },
+      id
+    )),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(RadixToast.Viewport, { className: cx(portalClassName, viewport2) })
+  ] }) });
+}
+function useToast() {
+  const context = (0, import_react8.useContext)(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
+var RadixTooltip = __toESM(require("@radix-ui/react-tooltip"), 1);
+
+// src/components/Tooltip/Tooltip.css.ts
+var arrow = "z7rufs1";
+var content3 = "z7rufs0";
+
+// src/components/Tooltip/Tooltip.tsx
+var import_jsx_runtime11 = require("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__ */ (0, import_jsx_runtime11.jsx)(RadixTooltip.Provider, { delayDuration: delay, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(RadixTooltip.Root, { open, defaultOpen, onOpenChange, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(RadixTooltip.Trigger, { asChild: true, children }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(RadixTooltip.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+      RadixTooltip.Content,
+      {
+        side,
+        align,
+        sideOffset: 6,
+        collisionPadding: 8,
+        className: cx(portalClassName, content3, className),
+        children: [
+          content4,
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(RadixTooltip.Arrow, { className: arrow, width: 10, height: 5 })
+        ]
+      }
+    ) })
+  ] }) });
+}
+
 // src/components/Typography/Typography.tsx
-var import_react7 = require("react");
+var import_react9 = require("react");
 
 // src/components/Typography/Typography.css.ts
-var import_createRuntimeFn5 = require("@vanilla-extract/recipes/createRuntimeFn");
-var typography = (0, import_createRuntimeFn5.createRuntimeFn)({ 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: [] });
+var import_createRuntimeFn7 = require("@vanilla-extract/recipes/createRuntimeFn");
+var typography = (0, import_createRuntimeFn7.createRuntimeFn)({ 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
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var defaultElement = {
   display: "h1",
   h1: "h1",
@@ -243,9 +537,9 @@ var defaultElement = {
   "body-sm": "p",
   caption: "span"
 };
-var Typography = (0, import_react7.forwardRef)(function Typography2({ variant = "body", as, color, weight, align, truncate, className, ...rest }, ref) {
+var Typography = (0, import_react9.forwardRef)(function Typography2({ variant = "body", as, color, weight, align, truncate, className, ...rest }, ref) {
   const Component = as ?? defaultElement[variant];
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
     Component,
     {
       ref,
@@ -259,12 +553,19 @@ var Typography = (0, import_react7.forwardRef)(function Typography2({ variant =
   Button,
   Checkbox,
   Input,
+  Modal,
+  ModalClose,
+  Select,
   Stack,
   TextField,
   ThemeProvider,
+  ToastProvider,
+  Tooltip,
   Typography,
   themeClass,
+  usePortalClassName,
   useTheme,
+  useToast,
   vars
 });
 //# sourceMappingURL=index.cjs.map