@bestow-ui/react 0.0.0-stage → 0.2.0

package/dist/index.cjs

@@ -0,0 +1,571 @@
+"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)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  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
+var index_exports = {};
+__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: "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");
+
+// 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
+var import_jsx_runtime = require("react/jsx-runtime");
+var ThemeContext = (0, import_react.createContext)("light");
+var ThemeProvider = (0, import_react.forwardRef)(function ThemeProvider2({ theme = "light", className, children, ...rest }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ThemeContext.Provider, { value: theme, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref, "data-theme": theme, className: cx(themeClass[theme], root, className), ...rest, children }) });
+});
+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");
+
+// src/components/Button/Button.css.ts
+var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
+var button = (0, import_createRuntimeFn.createRuntimeFn)({ 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
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var Button = (0, import_react2.forwardRef)(function Button2({ variant, color, size, fullWidth, startIcon, endIcon, className, type = "button", children, ...rest }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "button",
+    {
+      ref,
+      type,
+      className: cx(button({ variant, color, size, fullWidth }), className),
+      ...rest,
+      children: [
+        startIcon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: icon, children: startIcon }),
+        children,
+        endIcon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: icon, children: endIcon })
+      ]
+    }
+  );
+});
+
+// src/components/Checkbox/Checkbox.tsx
+var import_react3 = require("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
+var import_createRuntimeFn2 = require("@vanilla-extract/recipes/createRuntimeFn");
+var checkIcon = "_1y7mzsn8 _1y7mzsn7";
+var control = (0, import_createRuntimeFn2.createRuntimeFn)({ defaultClassName: "_1y7mzsn3", variantClassNames: { size: { sm: "_1y7mzsn4", md: "_1y7mzsn5" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
+var indeterminateIcon = "_1y7mzsn9 _1y7mzsn7";
+var input = "_1y7mzsn6";
+var root2 = (0, import_createRuntimeFn2.createRuntimeFn)({ defaultClassName: "_1y7mzsn0", variantClassNames: { size: { sm: "_1y7mzsn1", md: "_1y7mzsn2" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
+
+// src/components/Checkbox/Checkbox.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var Checkbox = (0, import_react3.forwardRef)(function Checkbox2({ label: label2, size, indeterminate = false, invalid, disabled, className, ...rest }, ref) {
+  const innerRef = (0, import_react3.useRef)(null);
+  (0, import_react3.useEffect)(() => {
+    if (innerRef.current) innerRef.current.indeterminate = indeterminate;
+  }, [indeterminate]);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("label", { className: cx(root2({ size }), className), "data-disabled": disabled || void 0, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: control({ size }), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "input",
+        {
+          ref: mergeRefs(innerRef, ref),
+          type: "checkbox",
+          className: input,
+          disabled,
+          "aria-invalid": invalid || void 0,
+          ...rest
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { className: checkIcon, viewBox: "0 0 20 20", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M5 10.5l3.2 3L15 7", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { className: indeterminateIcon, viewBox: "0 0 20 20", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M6 10h8", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) })
+    ] }),
+    label2
+  ] });
+});
+
+// src/components/Input/Input.tsx
+var import_react4 = require("react");
+
+// src/components/Input/Input.css.ts
+var import_createRuntimeFn3 = require("@vanilla-extract/recipes/createRuntimeFn");
+var adornment = "_19p5zvh6";
+var field = "_19p5zvh7";
+var fieldFullWidth = "_19p5zvh8";
+var helperText = (0, import_createRuntimeFn3.createRuntimeFn)({ defaultClassName: "_19p5zvhb", variantClassNames: { error: { true: "_19p5zvhc" } }, defaultVariants: {}, compoundVariants: [] });
+var input2 = "_19p5zvh5";
+var label = "_19p5zvh9";
+var requiredMark = "_19p5zvha";
+var root3 = (0, import_createRuntimeFn3.createRuntimeFn)({ defaultClassName: "_19p5zvh0", variantClassNames: { size: { sm: "_19p5zvh1", md: "_19p5zvh2", lg: "_19p5zvh3" }, fullWidth: { true: "_19p5zvh4" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
+
+// src/components/Input/Input.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var Input = (0, import_react4.forwardRef)(function Input2({ size, invalid, fullWidth, startAdornment, endAdornment, rootClassName, className, disabled, ...rest }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    "div",
+    {
+      className: cx(root3({ size, fullWidth }), rootClassName),
+      "data-invalid": invalid || void 0,
+      "data-disabled": disabled || void 0,
+      children: [
+        startAdornment && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: adornment, children: startAdornment }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "input",
+          {
+            ref,
+            className: cx(input2, className),
+            disabled,
+            "aria-invalid": invalid || void 0,
+            ...rest
+          }
+        ),
+        endAdornment && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: adornment, children: endAdornment })
+      ]
+    }
+  );
+});
+
+// src/components/Input/TextField.tsx
+var import_react5 = require("react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var TextField = (0, import_react5.forwardRef)(function TextField2({ label: label2, helperText: helperText2, error, required, fullWidth, id, "aria-describedby": ariaDescribedBy, ...rest }, ref) {
+  const generatedId = (0, import_react5.useId)();
+  const inputId = id ?? generatedId;
+  const helperId = helperText2 ? `${inputId}-helper` : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: cx(field, fullWidth && fieldFullWidth), children: [
+    label2 && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("label", { htmlFor: inputId, className: label, children: [
+      label2,
+      required && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: requiredMark, "aria-hidden": true, children: "*" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      Input,
+      {
+        ref,
+        id: inputId,
+        invalid: error,
+        required,
+        fullWidth,
+        "aria-describedby": cx(helperId, ariaDescribedBy) || void 0,
+        ...rest
+      }
+    ),
+    helperText2 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { id: helperId, className: helperText({ error }), children: helperText2 })
+  ] });
+});
+
+// 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_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_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,
+      className: cx(stack({ direction, gap, align, justify, wrap }), className),
+      ...rest
+    }
+  );
+});
+
+// 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_react9 = require("react");
+
+// src/components/Typography/Typography.css.ts
+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_runtime12 = require("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 = (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_runtime12.jsx)(
+    Component,
+    {
+      ref,
+      className: cx(typography({ variant, color, weight, align, truncate }), className),
+      ...rest
+    }
+  );
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Button,
+  Checkbox,
+  Input,
+  Modal,
+  ModalClose,
+  Select,
+  Stack,
+  TextField,
+  ThemeProvider,
+  ToastProvider,
+  Tooltip,
+  Typography,
+  themeClass,
+  usePortalClassName,
+  useTheme,
+  useToast,
+  vars
+});
+//# sourceMappingURL=index.cjs.map