@bestow-ui/react 0.2.0 → 0.2.1

package/dist/index.cjs

@@ -226,19 +226,7 @@ var TextField = (0, import_react5.forwardRef)(function TextField2({ label: label
 
 // 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" }) });
-}
+var import_icons = require("@bestow-ui/icons");
 
 // src/components/Modal/Modal.css.ts
 var import_createRuntimeFn4 = require("@vanilla-extract/recipes/createRuntimeFn");
@@ -253,7 +241,7 @@ var overlay = "_1pdsmv00";
 var title = "_1pdsmv07";
 
 // src/components/Modal/Modal.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 function Modal({
   open,
   defaultOpen,
@@ -269,26 +257,26 @@ function Modal({
   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)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(Dialog.Root, { open, defaultOpen, onOpenChange, children: [
+    trigger2 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Dialog.Trigger, { asChild: true, children: trigger2 }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(Dialog.Portal, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Dialog.Overlay, { className: cx(portalClassName, overlay) }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.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 })
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: header, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: headings, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Dialog.Title, { className: title, children: title3 }),
+                description3 && /* @__PURE__ */ (0, import_jsx_runtime6.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, {}) })
+              !hideCloseButton && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Dialog.Close, { className: closeButton, "aria-label": "\uB2EB\uAE30", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_icons.XIcon, { size: 16 }) })
             ] }),
-            children && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: body, children }),
-            footer2 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: footer, children: footer2 })
+            children && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: body, children }),
+            footer2 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: footer, children: footer2 })
           ]
         }
       )
@@ -300,6 +288,7 @@ var ModalClose = Dialog.Close;
 // src/components/Select/Select.tsx
 var RadixSelect = __toESM(require("@radix-ui/react-select"), 1);
 var import_react6 = require("react");
+var import_icons2 = require("@bestow-ui/icons");
 
 // src/components/Select/Select.css.ts
 var content2 = "_1kx81e83";
@@ -311,7 +300,7 @@ var value = "_1kx81e81";
 var viewport = "_1kx81e84";
 
 // src/components/Select/Select.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var Select = (0, import_react6.forwardRef)(function Select2({
   options,
   value: value2,
@@ -334,12 +323,12 @@ var Select = (0, import_react6.forwardRef)(function Select2({
   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: [
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: cx(field, fullWidth && fieldFullWidth), children: [
+    label2 && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("label", { htmlFor: triggerId, className: label, children: [
       label2,
-      required && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: requiredMark, "aria-hidden": true, children: "*" })
+      required && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: requiredMark, "aria-hidden": true, children: "*" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
       RadixSelect.Root,
       {
         value: value2,
@@ -349,7 +338,7 @@ var Select = (0, import_react6.forwardRef)(function Select2({
         required,
         name,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
             RadixSelect.Trigger,
             {
               ref,
@@ -360,27 +349,27 @@ var Select = (0, import_react6.forwardRef)(function Select2({
               "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_runtime7.jsx)("span", { className: value, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(RadixSelect.Value, { placeholder }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(RadixSelect.Icon, { className: icon2, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_icons2.ChevronDownIcon, { size: 16 }) })
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(RadixSelect.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(RadixSelect.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime7.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)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(RadixSelect.Viewport, { className: viewport, children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime7.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, {}) })
+                    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(RadixSelect.ItemText, { children: option.label }),
+                    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(RadixSelect.ItemIndicator, { className: itemIndicator, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_icons2.CheckIcon, { size: 16 }) })
                   ]
                 },
                 option.value
@@ -390,7 +379,7 @@ var Select = (0, import_react6.forwardRef)(function Select2({
         ]
       }
     ),
-    helperText2 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { id: helperId, className: helperText({ error }), children: helperText2 })
+    helperText2 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { id: helperId, className: helperText({ error }), children: helperText2 })
   ] });
 });
 
@@ -402,9 +391,9 @@ 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 import_jsx_runtime8 = 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)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     Component,
     {
       ref,
@@ -417,6 +406,7 @@ var Stack = (0, import_react7.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");
+var import_icons3 = require("@bestow-ui/icons");
 
 // src/components/Toast/Toast.css.ts
 var import_createRuntimeFn6 = require("@vanilla-extract/recipes/createRuntimeFn");
@@ -428,7 +418,7 @@ var toast = (0, import_createRuntimeFn6.createRuntimeFn)({ defaultClassName: "_1
 var viewport2 = "_1g11zvx0";
 
 // src/components/Toast/Toast.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var REMOVE_DELAY = 500;
 var ToastContext = (0, import_react8.createContext)(null);
 function ToastProvider({ children, duration = 5e3, label: label2 = "\uC54C\uB9BC" }) {
@@ -446,9 +436,9 @@ function ToastProvider({ children, duration = 5e3, label: label2 = "\uC54C\uB9BC
     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: [
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ToastContext.Provider, { value: value2, children: /* @__PURE__ */ (0, import_jsx_runtime9.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)(
+    toasts.map(({ id, open, title: title3, description: description3, variant, duration: itemDuration, action: action2 }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
       RadixToast.Root,
       {
         open,
@@ -458,15 +448,15 @@ function ToastProvider({ children, duration = 5e3, label: label2 = "\uC54C\uB9BC
         },
         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, {}) })
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(RadixToast.Title, { className: title2, children: title3 }),
+          description3 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(RadixToast.Description, { className: description2, children: description3 }),
+          action2 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(RadixToast.Action, { asChild: true, altText: action2.altText ?? action2.label, className: action, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Button, { size: "sm", variant: "soft", color: "neutral", onClick: action2.onClick, children: action2.label }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(RadixToast.Close, { className: close, "aria-label": "\uB2EB\uAE30", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_icons3.XIcon, { size: 16 }) })
         ]
       },
       id
     )),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(RadixToast.Viewport, { className: cx(portalClassName, viewport2) })
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(RadixToast.Viewport, { className: cx(portalClassName, viewport2) })
   ] }) });
 }
 function useToast() {
@@ -483,7 +473,7 @@ var arrow = "z7rufs1";
 var content3 = "z7rufs0";
 
 // src/components/Tooltip/Tooltip.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 function Tooltip({
   content: content4,
   children,
@@ -498,9 +488,9 @@ function Tooltip({
 }) {
   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)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(RadixTooltip.Provider, { delayDuration: delay, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(RadixTooltip.Root, { open, defaultOpen, onOpenChange, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(RadixTooltip.Trigger, { asChild: true, children }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(RadixTooltip.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
       RadixTooltip.Content,
       {
         side,
@@ -510,7 +500,7 @@ function Tooltip({
         className: cx(portalClassName, content3, className),
         children: [
           content4,
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(RadixTooltip.Arrow, { className: arrow, width: 10, height: 5 })
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(RadixTooltip.Arrow, { className: arrow, width: 10, height: 5 })
         ]
       }
     ) })
@@ -525,7 +515,7 @@ 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 import_jsx_runtime11 = require("react/jsx-runtime");
 var defaultElement = {
   display: "h1",
   h1: "h1",
@@ -539,7 +529,7 @@ var defaultElement = {
 };
 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)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     Component,
     {
       ref,