@discourser/design-system 0.5.0 → 0.7.0

package/dist/index.cjs

@@ -3,23 +3,24 @@
 var factory = require('@ark-ui/react/factory');
 var utils = require('@ark-ui/react/utils');
 var react$1 = require('react');
+var css = require('@discourser/design-system/styled-system/css');
 var jsx = require('@discourser/design-system/styled-system/jsx');
 var recipes = require('@discourser/design-system/styled-system/recipes');
 var react = require('@ark-ui/react');
 var jsxRuntime = require('react/jsx-runtime');
+var field = require('@ark-ui/react/field');
+var portal = require('@ark-ui/react/portal');
+var toast = require('@ark-ui/react/toast');
 var dialog = require('@ark-ui/react/dialog');
 var _switch = require('@ark-ui/react/switch');
 var accordion = require('@ark-ui/react/accordion');
 var tabs = require('@ark-ui/react/tabs');
-var field = require('@ark-ui/react/field');
 var checkbox = require('@ark-ui/react/checkbox');
 var radioGroup = require('@ark-ui/react/radio-group');
 var select = require('@ark-ui/react/select');
 var slider = require('@ark-ui/react/slider');
 var avatar = require('@ark-ui/react/avatar');
 var progress = require('@ark-ui/react/progress');
-var portal = require('@ark-ui/react/portal');
-var toast = require('@ark-ui/react/toast');
 var popover = require('@ark-ui/react/popover');
 var tooltip = require('@ark-ui/react/tooltip');
 var clsx = require('clsx');
@@ -30,13 +31,6 @@ var __export = (target, all) => {
     __defProp(target, name, { get: all[name], enumerable: true });
 };
 
-// src/components/Button.tsx
-var Button_exports = {};
-__export(Button_exports, {
-  Button: () => Button,
-  ButtonGroup: () => ButtonGroup
-});
-
 // src/components/Group.tsx
 var Group_exports = {};
 __export(Group_exports, {
@@ -50,12 +44,6 @@ __export(AbsoluteCenter_exports, {
   AbsoluteCenter: () => AbsoluteCenter
 });
 var AbsoluteCenter = jsx.styled(factory.ark.div, recipes.absoluteCenter);
-
-// src/components/Spinner.tsx
-var Spinner_exports = {};
-__export(Spinner_exports, {
-  Spinner: () => Spinner
-});
 var Spinner = jsx.styled(factory.ark.span, recipes.spinner);
 var Span = jsx.styled("span");
 var Loader = react$1.forwardRef(function Loader2(props, ref) {
@@ -84,28 +72,53 @@ var Loader = react$1.forwardRef(function Loader2(props, ref) {
   return /* @__PURE__ */ jsxRuntime.jsx(Span, { ref, display: "contents", ...rest, children });
 });
 var BaseButton = jsx.styled(factory.ark.button, recipes.button);
-var Button = react$1.forwardRef(function Button2(props, ref) {
-  const propsContext = useButtonPropsContext();
-  const buttonProps = react$1.useMemo(
-    () => utils.mergeProps(propsContext, props),
-    [propsContext, props]
-  );
-  const { loading, loadingText, children, spinner: spinner2, spinnerPlacement, ...rest } = buttonProps;
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    BaseButton,
-    {
-      type: "button",
-      ref,
-      ...rest,
-      "data-loading": loading ? "" : void 0,
-      disabled: loading || rest.disabled,
-      children: !props.asChild && loading ? /* @__PURE__ */ jsxRuntime.jsx(Loader, { spinner: spinner2, text: loadingText, spinnerPlacement, children }) : children
-    }
-  );
-});
+var Button = react$1.forwardRef(
+  function Button2(props, ref) {
+    const propsContext = useButtonPropsContext();
+    const buttonProps = react$1.useMemo(
+      () => utils.mergeProps(propsContext, props),
+      [propsContext, props]
+    );
+    const {
+      loading,
+      loadingText,
+      children,
+      spinner: spinner2,
+      spinnerPlacement,
+      colorPalette = "primary",
+      className,
+      ...rest
+    } = buttonProps;
+    const colorPaletteClass = `color-palette_${colorPalette}`;
+    const mergedClassName = css.cx(colorPaletteClass, className);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      BaseButton,
+      {
+        type: "button",
+        ref,
+        ...rest,
+        className: mergedClassName,
+        "data-loading": loading ? "" : void 0,
+        disabled: loading || rest.disabled,
+        children: !props.asChild && loading ? /* @__PURE__ */ jsxRuntime.jsx(
+          Loader,
+          {
+            spinner: spinner2,
+            text: loadingText,
+            spinnerPlacement,
+            children
+          }
+        ) : children
+      }
+    );
+  }
+);
 var ButtonGroup = react$1.forwardRef(
   function ButtonGroup2(props, ref) {
-    const [variantProps, otherProps] = react$1.useMemo(() => recipes.button.splitVariantProps(props), [props]);
+    const [variantProps, otherProps] = react$1.useMemo(
+      () => recipes.button.splitVariantProps(props),
+      [props]
+    );
     return /* @__PURE__ */ jsxRuntime.jsx(ButtonPropsProvider, { value: variantProps, children: /* @__PURE__ */ jsxRuntime.jsx(Group, { ref, ...otherProps }) });
   }
 );
@@ -115,32 +128,140 @@ var [ButtonPropsProvider, useButtonPropsContext] = utils.createContext({
   providerName: "<PropsProvider />",
   strict: false
 });
+var IconButton = react$1.forwardRef(
+  function IconButton2(props, ref) {
+    return /* @__PURE__ */ jsxRuntime.jsx(Button, { px: "0", py: "0", ref, ...props });
+  }
+);
+var Input = jsx.styled(field.Field.Input, recipes.input);
+var InputAddon = jsx.styled(factory.ark.div, recipes.inputAddon);
+var { withProvider, withContext } = jsx.createStyleContext(recipes.inputGroup);
+var Root = withProvider(factory.ark.div, "root");
+var Element = withContext(factory.ark.div, "element");
+var InputGroupRoot = react$1.forwardRef(
+  function InputGroup(props, ref) {
+    const { startElement, endElement, children, ...rest } = props;
+    return /* @__PURE__ */ jsxRuntime.jsxs(Root, { ref, ...rest, children: [
+      startElement && /* @__PURE__ */ jsxRuntime.jsx(Element, { insetInlineStart: "0", top: "0", children: startElement }),
+      children,
+      endElement && /* @__PURE__ */ jsxRuntime.jsx(Element, { insetInlineEnd: "0", top: "0", children: endElement })
+    ] });
+  }
+);
+var InputGroup2 = Object.assign(InputGroupRoot, {
+  Root,
+  Element
+});
+var Textarea = jsx.styled(field.Field.Textarea, recipes.textarea);
+var Heading = jsx.styled("h2", recipes.heading);
+var BaseBadge = jsx.styled(factory.ark.div, recipes.badge);
+var Badge = react$1.forwardRef(
+  function Badge2(props, ref) {
+    const { colorPalette = "primary", className, ...rest } = props;
+    const colorPaletteClass = css.css({ colorPalette });
+    const mergedClassName = css.cx(colorPaletteClass, className);
+    return /* @__PURE__ */ jsxRuntime.jsx(BaseBadge, { ref, ...rest, className: mergedClassName });
+  }
+);
+
+// src/components/CloseButton.tsx
+var CloseButton_exports = {};
+__export(CloseButton_exports, {
+  CloseButton: () => CloseButton
+});
+var XIcon = () => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 6 6 18" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m6 6 12 12" })
+] });
+var CloseButton = react$1.forwardRef(
+  function CloseButton2(props, ref) {
+    return /* @__PURE__ */ jsxRuntime.jsx(IconButton, { variant: "plain", colorPalette: "gray", "aria-label": "Close", ref, ...props, children: props.children ?? /* @__PURE__ */ jsxRuntime.jsx(XIcon, {}) });
+  }
+);
+
+// src/components/Icon.tsx
+var Icon_exports = {};
+__export(Icon_exports, {
+  Icon: () => Icon
+});
+var Icon = jsx.styled(factory.ark.svg);
+var CheckCircleIcon = () => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M22 11.08V12a10 10 0 1 1-5.93-9.14" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m9 11 3 3L22 4" })
+] });
+var CircleAlertIcon = () => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10" }),
+  /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", x2: "12", y1: "8", y2: "12" }),
+  /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", x2: "12.01", y1: "16", y2: "16" })
+] });
+var CircleXIcon = () => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m15 9-6 6" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m9 9 6 6" })
+] });
+var { withProvider: withProvider2, withContext: withContext2 } = jsx.createStyleContext(recipes.toast);
+var Root2 = withProvider2(toast.Toast.Root, "root");
+var Title = withContext2(toast.Toast.Title, "title");
+var Description = withContext2(toast.Toast.Description, "description");
+var ActionTrigger = withContext2(toast.Toast.ActionTrigger, "actionTrigger");
+var CloseTrigger = withContext2(toast.Toast.CloseTrigger, "closeTrigger");
+var StyledToaster = jsx.styled(toast.Toaster);
+var iconMap = {
+  warning: CircleAlertIcon,
+  success: CheckCircleIcon,
+  error: CircleXIcon
+};
+var Indicator = react$1.forwardRef(function ToastIndicator(props, ref) {
+  const toast2 = toast.useToastContext();
+  const StatusIcon = iconMap[toast2.type];
+  if (!StatusIcon) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(Icon, { ref, "data-type": toast2.type, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(StatusIcon, {}) });
+});
+var toaster = toast.createToaster({
+  placement: "bottom-end",
+  pauseOnPageIdle: true,
+  overlap: true,
+  max: 5
+});
+var Toaster = () => {
+  return /* @__PURE__ */ jsxRuntime.jsx(portal.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(StyledToaster, { toaster, insetInline: { mdDown: "4" }, children: (toast2) => /* @__PURE__ */ jsxRuntime.jsxs(Root2, { children: [
+    toast2.type === "loading" ? /* @__PURE__ */ jsxRuntime.jsx(Spinner, { color: "colorPalette.plain.fg" }) : /* @__PURE__ */ jsxRuntime.jsx(Indicator, {}),
+    /* @__PURE__ */ jsxRuntime.jsxs(jsx.Stack, { gap: "3", alignItems: "start", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(jsx.Stack, { gap: "1", children: [
+        toast2.title && /* @__PURE__ */ jsxRuntime.jsx(Title, { children: toast2.title }),
+        toast2.description && /* @__PURE__ */ jsxRuntime.jsx(Description, { children: toast2.description })
+      ] }),
+      toast2.action && /* @__PURE__ */ jsxRuntime.jsx(ActionTrigger, { children: toast2.action.label })
+    ] }),
+    toast2.closable && /* @__PURE__ */ jsxRuntime.jsx(CloseTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(CloseButton, { size: "sm" }) })
+  ] }) }) });
+};
 
 // src/components/Card.tsx
 var Card_exports = {};
 __export(Card_exports, {
   Body: () => Body,
   Card: () => Card,
-  Description: () => Description,
+  Description: () => Description2,
   Footer: () => Footer,
   Header: () => Header,
-  Root: () => Root,
-  Title: () => Title
+  Root: () => Root3,
+  Title: () => Title2
 });
-var { withProvider, withContext } = jsx.createStyleContext(recipes.card);
-var Root = withProvider(factory.ark.div, "root");
-var Header = withContext(factory.ark.div, "header");
-var Body = withContext(factory.ark.div, "body");
-var Footer = withContext(factory.ark.div, "footer");
-var Title = withContext(factory.ark.h3, "title");
-var Description = withContext(factory.ark.div, "description");
+var { withProvider: withProvider3, withContext: withContext3 } = jsx.createStyleContext(recipes.card);
+var Root3 = withProvider3(factory.ark.div, "root");
+var Header = withContext3(factory.ark.div, "header");
+var Body = withContext3(factory.ark.div, "body");
+var Footer = withContext3(factory.ark.div, "footer");
+var Title2 = withContext3(factory.ark.h3, "title");
+var Description2 = withContext3(factory.ark.div, "description");
 var Card = {
-  Root,
+  Root: Root3,
   Header,
   Body,
   Footer,
-  Title,
-  Description
+  Title: Title2,
+  Description: Description2
 };
 
 // src/components/Dialog.tsx
@@ -148,42 +269,31 @@ var Dialog_exports = {};
 __export(Dialog_exports, {
   Backdrop: () => Backdrop,
   Body: () => Body2,
-  CloseTrigger: () => CloseTrigger,
+  CloseTrigger: () => CloseTrigger2,
   Content: () => Content,
   Context: () => dialog.DialogContext,
-  Description: () => Description2,
+  Description: () => Description3,
   Footer: () => Footer2,
   Header: () => Header2,
   Positioner: () => Positioner,
-  Root: () => Root2,
-  Title: () => Title2,
+  Root: () => Root4,
+  Title: () => Title3,
   Trigger: () => Trigger
 });
-var { withRootProvider, withContext: withContext2 } = jsx.createStyleContext(recipes.dialog);
-var Root2 = withRootProvider(dialog.Dialog.Root, {
+var { withRootProvider, withContext: withContext4 } = jsx.createStyleContext(recipes.dialog);
+var Root4 = withRootProvider(dialog.Dialog.Root, {
   defaultProps: { unmountOnExit: true, lazyMount: true }
 });
-var Backdrop = withContext2(dialog.Dialog.Backdrop, "backdrop");
-var CloseTrigger = withContext2(dialog.Dialog.CloseTrigger, "closeTrigger");
-var Content = withContext2(dialog.Dialog.Content, "content");
-var Description2 = withContext2(dialog.Dialog.Description, "description");
-var Positioner = withContext2(dialog.Dialog.Positioner, "positioner");
-var Title2 = withContext2(dialog.Dialog.Title, "title");
-var Trigger = withContext2(dialog.Dialog.Trigger, "trigger");
-var Body2 = withContext2(factory.ark.div, "body");
-var Header2 = withContext2(factory.ark.div, "header");
-var Footer2 = withContext2(factory.ark.div, "footer");
-
-// src/components/IconButton.tsx
-var IconButton_exports = {};
-__export(IconButton_exports, {
-  IconButton: () => IconButton
-});
-var IconButton = react$1.forwardRef(
-  function IconButton2(props, ref) {
-    return /* @__PURE__ */ jsxRuntime.jsx(Button, { px: "0", py: "0", ref, ...props });
-  }
-);
+var Backdrop = withContext4(dialog.Dialog.Backdrop, "backdrop");
+var CloseTrigger2 = withContext4(dialog.Dialog.CloseTrigger, "closeTrigger");
+var Content = withContext4(dialog.Dialog.Content, "content");
+var Description3 = withContext4(dialog.Dialog.Description, "description");
+var Positioner = withContext4(dialog.Dialog.Positioner, "positioner");
+var Title3 = withContext4(dialog.Dialog.Title, "title");
+var Trigger = withContext4(dialog.Dialog.Trigger, "trigger");
+var Body2 = withContext4(factory.ark.div, "body");
+var Header2 = withContext4(factory.ark.div, "header");
+var Footer2 = withContext4(factory.ark.div, "footer");
 
 // src/components/Switch.tsx
 var Switch_exports = {};
@@ -192,15 +302,15 @@ __export(Switch_exports, {
   Control: () => Control,
   HiddenInput: () => HiddenInput,
   Label: () => Label,
-  Root: () => Root3,
+  Root: () => Root5,
   Thumb: () => Thumb
 });
-var { withProvider: withProvider2, withContext: withContext3 } = jsx.createStyleContext(recipes.switchComponent);
-var Root3 = withProvider2(_switch.Switch.Root, "root");
-var Label = withContext3(_switch.Switch.Label, "label");
-var Thumb = withContext3(_switch.Switch.Thumb, "thumb");
+var { withProvider: withProvider4, withContext: withContext5 } = jsx.createStyleContext(recipes.switchComponent);
+var Root5 = withProvider4(_switch.Switch.Root, "root");
+var Label = withContext5(_switch.Switch.Label, "label");
+var Thumb = withContext5(_switch.Switch.Thumb, "thumb");
 var HiddenInput = _switch.Switch.HiddenInput;
-var Control = withContext3(_switch.Switch.Control, "control", {
+var Control = withContext5(_switch.Switch.Control, "control", {
   defaultProps: { children: /* @__PURE__ */ jsxRuntime.jsx(Thumb, {}) }
 });
 
@@ -213,94 +323,74 @@ __export(Accordion_exports, {
   ItemContent: () => ItemContent,
   ItemIndicator: () => ItemIndicator,
   ItemTrigger: () => ItemTrigger,
-  Root: () => Root4,
+  Root: () => Root6,
   RootProvider: () => RootProvider
 });
 var ChevronDownIcon = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m6 9 6 6 6-6" }) });
-var { withProvider: withProvider3, withContext: withContext4 } = jsx.createStyleContext(recipes.accordion);
-var Root4 = withProvider3(accordion.Accordion.Root, "root");
-var RootProvider = withProvider3(accordion.Accordion.RootProvider, "root");
-var Item = withContext4(accordion.Accordion.Item, "item");
-var ItemContent = withContext4(accordion.Accordion.ItemContent, "itemContent");
-var ItemIndicator = withContext4(accordion.Accordion.ItemIndicator, "itemIndicator", {
+var { withProvider: withProvider5, withContext: withContext6 } = jsx.createStyleContext(recipes.accordion);
+var Root6 = withProvider5(accordion.Accordion.Root, "root");
+var RootProvider = withProvider5(accordion.Accordion.RootProvider, "root");
+var Item = withContext6(accordion.Accordion.Item, "item");
+var ItemContent = withContext6(accordion.Accordion.ItemContent, "itemContent");
+var ItemIndicator = withContext6(accordion.Accordion.ItemIndicator, "itemIndicator", {
   defaultProps: { children: /* @__PURE__ */ jsxRuntime.jsx(ChevronDownIcon, {}) }
 });
-var ItemTrigger = withContext4(accordion.Accordion.ItemTrigger, "itemTrigger");
-var ItemBody = withContext4(factory.ark.div, "itemBody");
+var ItemTrigger = withContext6(accordion.Accordion.ItemTrigger, "itemTrigger");
+var ItemBody = withContext6(factory.ark.div, "itemBody");
 
 // src/components/Drawer.tsx
 var Drawer_exports = {};
 __export(Drawer_exports, {
   Backdrop: () => Backdrop2,
   Body: () => Body3,
-  CloseTrigger: () => CloseTrigger2,
+  CloseTrigger: () => CloseTrigger3,
   Content: () => Content2,
   Context: () => dialog.DialogContext,
-  Description: () => Description3,
+  Description: () => Description4,
   Footer: () => Footer3,
   Header: () => Header3,
   Positioner: () => Positioner2,
-  Root: () => Root5,
+  Root: () => Root7,
   RootProvider: () => RootProvider2,
-  Title: () => Title3,
+  Title: () => Title4,
   Trigger: () => Trigger2
 });
-var { withRootProvider: withRootProvider2, withContext: withContext5 } = jsx.createStyleContext(recipes.drawer);
-var Root5 = withRootProvider2(dialog.Dialog.Root, {
+var { withRootProvider: withRootProvider2, withContext: withContext7 } = jsx.createStyleContext(recipes.drawer);
+var Root7 = withRootProvider2(dialog.Dialog.Root, {
   defaultProps: { unmountOnExit: true, lazyMount: true }
 });
 var RootProvider2 = withRootProvider2(dialog.Dialog.Root, {
   defaultProps: { unmountOnExit: true, lazyMount: true }
 });
-var Backdrop2 = withContext5(dialog.Dialog.Backdrop, "backdrop");
-var Positioner2 = withContext5(dialog.Dialog.Positioner, "positioner");
-var CloseTrigger2 = withContext5(dialog.Dialog.CloseTrigger, "closeTrigger");
-var Content2 = withContext5(dialog.Dialog.Content, "content");
-var Description3 = withContext5(dialog.Dialog.Description, "description");
-var Title3 = withContext5(dialog.Dialog.Title, "title");
-var Trigger2 = withContext5(dialog.Dialog.Trigger, "trigger");
-var Body3 = withContext5(factory.ark.div, "body");
-var Header3 = withContext5(factory.ark.div, "header");
-var Footer3 = withContext5(factory.ark.div, "footer");
+var Backdrop2 = withContext7(dialog.Dialog.Backdrop, "backdrop");
+var Positioner2 = withContext7(dialog.Dialog.Positioner, "positioner");
+var CloseTrigger3 = withContext7(dialog.Dialog.CloseTrigger, "closeTrigger");
+var Content2 = withContext7(dialog.Dialog.Content, "content");
+var Description4 = withContext7(dialog.Dialog.Description, "description");
+var Title4 = withContext7(dialog.Dialog.Title, "title");
+var Trigger2 = withContext7(dialog.Dialog.Trigger, "trigger");
+var Body3 = withContext7(factory.ark.div, "body");
+var Header3 = withContext7(factory.ark.div, "header");
+var Footer3 = withContext7(factory.ark.div, "footer");
 
 // src/components/Tabs.tsx
 var Tabs_exports = {};
 __export(Tabs_exports, {
   Content: () => Content3,
   Context: () => tabs.TabsContext,
-  Indicator: () => Indicator,
+  Indicator: () => Indicator2,
   List: () => List,
-  Root: () => Root6,
+  Root: () => Root8,
   RootProvider: () => RootProvider3,
   Trigger: () => Trigger3
 });
-var { withProvider: withProvider4, withContext: withContext6 } = jsx.createStyleContext(recipes.tabs);
-var Root6 = withProvider4(tabs.Tabs.Root, "root");
-var RootProvider3 = withProvider4(tabs.Tabs.RootProvider, "root");
-var List = withContext6(tabs.Tabs.List, "list");
-var Trigger3 = withContext6(tabs.Tabs.Trigger, "trigger");
-var Content3 = withContext6(tabs.Tabs.Content, "content");
-var Indicator = withContext6(tabs.Tabs.Indicator, "indicator");
-var Input = jsx.styled(field.Field.Input, recipes.input);
-var InputAddon = jsx.styled(factory.ark.div, recipes.inputAddon);
-var { withProvider: withProvider5, withContext: withContext7 } = jsx.createStyleContext(recipes.inputGroup);
-var Root7 = withProvider5(factory.ark.div, "root");
-var Element = withContext7(factory.ark.div, "element");
-var InputGroupRoot = react$1.forwardRef(
-  function InputGroup(props, ref) {
-    const { startElement, endElement, children, ...rest } = props;
-    return /* @__PURE__ */ jsxRuntime.jsxs(Root7, { ref, ...rest, children: [
-      startElement && /* @__PURE__ */ jsxRuntime.jsx(Element, { insetInlineStart: "0", top: "0", children: startElement }),
-      children,
-      endElement && /* @__PURE__ */ jsxRuntime.jsx(Element, { insetInlineEnd: "0", top: "0", children: endElement })
-    ] });
-  }
-);
-var InputGroup2 = Object.assign(InputGroupRoot, {
-  Root: Root7,
-  Element
-});
-var Textarea = jsx.styled(field.Field.Textarea, recipes.textarea);
+var { withProvider: withProvider6, withContext: withContext8 } = jsx.createStyleContext(recipes.tabs);
+var Root8 = withProvider6(tabs.Tabs.Root, "root");
+var RootProvider3 = withProvider6(tabs.Tabs.RootProvider, "root");
+var List = withContext8(tabs.Tabs.List, "list");
+var Trigger3 = withContext8(tabs.Tabs.Trigger, "trigger");
+var Content3 = withContext8(tabs.Tabs.Content, "content");
+var Indicator2 = withContext8(tabs.Tabs.Indicator, "indicator");
 
 // src/components/Checkbox.tsx
 var Checkbox_exports = {};
@@ -309,20 +399,20 @@ __export(Checkbox_exports, {
   Group: () => Group2,
   GroupProvider: () => checkbox.CheckboxGroupProvider,
   HiddenInput: () => HiddenInput2,
-  Indicator: () => Indicator2,
+  Indicator: () => Indicator3,
   Label: () => Label2,
-  Root: () => Root8,
+  Root: () => Root9,
   RootProvider: () => RootProvider4
 });
-var { withProvider: withProvider6, withContext: withContext8 } = jsx.createStyleContext(recipes.checkbox);
-var Root8 = withProvider6(checkbox.Checkbox.Root, "root");
-var RootProvider4 = withProvider6(checkbox.Checkbox.RootProvider, "root");
-var Control2 = withContext8(checkbox.Checkbox.Control, "control");
-var Group2 = withProvider6(checkbox.Checkbox.Group, "group");
-var Label2 = withContext8(checkbox.Checkbox.Label, "label");
+var { withProvider: withProvider7, withContext: withContext9 } = jsx.createStyleContext(recipes.checkbox);
+var Root9 = withProvider7(checkbox.Checkbox.Root, "root");
+var RootProvider4 = withProvider7(checkbox.Checkbox.RootProvider, "root");
+var Control2 = withContext9(checkbox.Checkbox.Control, "control");
+var Group2 = withProvider7(checkbox.Checkbox.Group, "group");
+var Label2 = withContext9(checkbox.Checkbox.Label, "label");
 var HiddenInput2 = checkbox.Checkbox.HiddenInput;
-var Indicator2 = react$1.forwardRef(
-  function Indicator3(props, ref) {
+var Indicator3 = react$1.forwardRef(
+  function Indicator4(props, ref) {
     const { indeterminate, checked } = checkbox.useCheckboxContext();
     return /* @__PURE__ */ jsxRuntime.jsx(checkbox.Checkbox.Indicator, { indeterminate, asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
       jsx.styled.svg,
@@ -348,23 +438,23 @@ var Indicator2 = react$1.forwardRef(
 var RadioGroup_exports = {};
 __export(RadioGroup_exports, {
   Context: () => radioGroup.RadioGroupContext,
-  Indicator: () => Indicator4,
+  Indicator: () => Indicator5,
   Item: () => Item2,
   ItemControl: () => ItemControl,
   ItemHiddenInput: () => ItemHiddenInput,
   ItemText: () => ItemText,
   Label: () => Label3,
-  Root: () => Root9,
+  Root: () => Root10,
   RootProvider: () => RootProvider5
 });
-var { withProvider: withProvider7, withContext: withContext9 } = jsx.createStyleContext(recipes.radioGroup);
-var Root9 = withProvider7(radioGroup.RadioGroup.Root, "root");
-var RootProvider5 = withProvider7(radioGroup.RadioGroup.RootProvider, "root");
-var Indicator4 = withContext9(radioGroup.RadioGroup.Indicator, "indicator");
-var Item2 = withContext9(radioGroup.RadioGroup.Item, "item");
-var ItemControl = withContext9(radioGroup.RadioGroup.ItemControl, "itemControl");
-var ItemText = withContext9(radioGroup.RadioGroup.ItemText, "itemText");
-var Label3 = withContext9(radioGroup.RadioGroup.Label, "label");
+var { withProvider: withProvider8, withContext: withContext10 } = jsx.createStyleContext(recipes.radioGroup);
+var Root10 = withProvider8(radioGroup.RadioGroup.Root, "root");
+var RootProvider5 = withProvider8(radioGroup.RadioGroup.RootProvider, "root");
+var Indicator5 = withContext10(radioGroup.RadioGroup.Indicator, "indicator");
+var Item2 = withContext10(radioGroup.RadioGroup.Item, "item");
+var ItemControl = withContext10(radioGroup.RadioGroup.ItemControl, "itemControl");
+var ItemText = withContext10(radioGroup.RadioGroup.ItemText, "itemText");
+var Label3 = withContext10(radioGroup.RadioGroup.Label, "label");
 var ItemHiddenInput = radioGroup.RadioGroup.ItemHiddenInput;
 
 // src/components/Select.tsx
@@ -375,7 +465,7 @@ __export(Select_exports, {
   Context: () => select.SelectContext,
   Control: () => Control3,
   HiddenSelect: () => HiddenSelect,
-  Indicator: () => Indicator5,
+  Indicator: () => Indicator6,
   IndicatorGroup: () => IndicatorGroup,
   Item: () => Item3,
   ItemContext: () => select.SelectItemContext,
@@ -386,35 +476,35 @@ __export(Select_exports, {
   Label: () => Label4,
   List: () => List2,
   Positioner: () => Positioner3,
-  Root: () => Root10,
+  Root: () => Root11,
   Trigger: () => Trigger4,
   ValueText: () => ValueText
 });
-var { withProvider: withProvider8, withContext: withContext10 } = jsx.createStyleContext(recipes.select);
+var { withProvider: withProvider9, withContext: withContext11 } = jsx.createStyleContext(recipes.select);
 var CheckIcon = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "20 6 9 17 4 12" }) });
 var ChevronsUpDownIcon = () => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
   /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m7 15 5 5 5-5" }),
   /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m7 9 5-5 5 5" })
 ] });
-var Root10 = withProvider8(select.Select.Root, "root");
-var ClearTrigger = withContext10(select.Select.ClearTrigger, "clearTrigger");
-var Content4 = withContext10(select.Select.Content, "content");
-var Control3 = withContext10(select.Select.Control, "control");
-var IndicatorGroup = withContext10(factory.ark.div, "indicatorGroup");
-var Item3 = withContext10(select.Select.Item, "item");
-var ItemGroup = withContext10(select.Select.ItemGroup, "itemGroup");
-var ItemGroupLabel = withContext10(select.Select.ItemGroupLabel, "itemGroupLabel");
-var ItemText2 = withContext10(select.Select.ItemText, "itemText");
-var Label4 = withContext10(select.Select.Label, "label");
-var List2 = withContext10(select.Select.List, "list");
-var Positioner3 = withContext10(select.Select.Positioner, "positioner");
-var Trigger4 = withContext10(select.Select.Trigger, "trigger");
-var ValueText = withContext10(select.Select.ValueText, "valueText");
-var Indicator5 = withContext10(select.Select.Indicator, "indicator", {
+var Root11 = withProvider9(select.Select.Root, "root");
+var ClearTrigger = withContext11(select.Select.ClearTrigger, "clearTrigger");
+var Content4 = withContext11(select.Select.Content, "content");
+var Control3 = withContext11(select.Select.Control, "control");
+var IndicatorGroup = withContext11(factory.ark.div, "indicatorGroup");
+var Item3 = withContext11(select.Select.Item, "item");
+var ItemGroup = withContext11(select.Select.ItemGroup, "itemGroup");
+var ItemGroupLabel = withContext11(select.Select.ItemGroupLabel, "itemGroupLabel");
+var ItemText2 = withContext11(select.Select.ItemText, "itemText");
+var Label4 = withContext11(select.Select.Label, "label");
+var List2 = withContext11(select.Select.List, "list");
+var Positioner3 = withContext11(select.Select.Positioner, "positioner");
+var Trigger4 = withContext11(select.Select.Trigger, "trigger");
+var ValueText = withContext11(select.Select.ValueText, "valueText");
+var Indicator6 = withContext11(select.Select.Indicator, "indicator", {
   defaultProps: { children: /* @__PURE__ */ jsxRuntime.jsx(ChevronsUpDownIcon, {}) }
 });
 var HiddenSelect = select.Select.HiddenSelect;
-var StyledItemIndicator = withContext10(select.Select.ItemIndicator, "itemIndicator");
+var StyledItemIndicator = withContext11(select.Select.ItemIndicator, "itemIndicator");
 var ItemIndicator2 = react$1.forwardRef(
   function ItemIndicator3(props, ref) {
     const item = select.useSelectItemContext();
@@ -435,14 +525,14 @@ __export(Slider_exports, {
   MarkerIndicator: () => MarkerIndicator,
   Marks: () => Marks,
   Range: () => Range,
-  Root: () => Root11,
+  Root: () => Root12,
   Thumb: () => Thumb2,
   Thumbs: () => Thumbs,
   Track: () => Track,
   ValueText: () => ValueText2
 });
 var StyleContextInternal = react$1.createContext(null);
-var Root11 = react$1.forwardRef(
+var Root12 = react$1.forwardRef(
   function SliderRoot(props, ref) {
     const { orientation, size, variant, colorPalette, className, ...arkProps } = props;
     const styles = recipes.slider({ orientation, size, variant });
@@ -545,23 +635,23 @@ __export(Avatar_exports, {
   Context: () => avatar.AvatarContext,
   Fallback: () => Fallback,
   Image: () => Image,
-  Root: () => Root12,
+  Root: () => Root13,
   RootProvider: () => RootProvider6
 });
 var UserIcon = () => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
   /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" }),
   /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "7", r: "4" })
 ] });
-var { withProvider: withProvider9, withContext: withContext11 } = jsx.createStyleContext(recipes.avatar);
-var Root12 = withProvider9(avatar.Avatar.Root, "root");
-var RootProvider6 = withProvider9(avatar.Avatar.RootProvider, "root");
-var Image = withContext11(avatar.Avatar.Image, "image", {
+var { withProvider: withProvider10, withContext: withContext12 } = jsx.createStyleContext(recipes.avatar);
+var Root13 = withProvider10(avatar.Avatar.Root, "root");
+var RootProvider6 = withProvider10(avatar.Avatar.RootProvider, "root");
+var Image = withContext12(avatar.Avatar.Image, "image", {
   defaultProps: {
     draggable: "false",
     referrerPolicy: "no-referrer"
   }
 });
-var StyledFallback = withContext11(avatar.Avatar.Fallback, "fallback");
+var StyledFallback = withContext12(avatar.Avatar.Fallback, "fallback");
 var Fallback = react$1.forwardRef(function Fallback2(props, ref) {
   const { name, children, asChild, ...rest } = props;
   const fallbackContent = children || asChild ? children : name ? getInitials(name) : /* @__PURE__ */ jsxRuntime.jsx(UserIcon, {});
@@ -574,13 +664,6 @@ var getInitials = (name) => {
   return firstName && lastName ? `${firstName[0]}${lastName[0]}` : firstName[0];
 };
 
-// src/components/Badge.tsx
-var Badge_exports = {};
-__export(Badge_exports, {
-  Badge: () => Badge
-});
-var Badge = jsx.styled(factory.ark.div, recipes.badge);
-
 // src/components/Progress.tsx
 var Progress_exports = {};
 __export(Progress_exports, {
@@ -589,23 +672,23 @@ __export(Progress_exports, {
   CircleTrack: () => CircleTrack,
   Label: () => Label6,
   Range: () => Range2,
-  Root: () => Root13,
+  Root: () => Root14,
   RootProvider: () => RootProvider7,
   Track: () => Track2,
   ValueText: () => ValueText3,
   View: () => View
 });
-var { withProvider: withProvider10, withContext: withContext12 } = jsx.createStyleContext(recipes.progress);
-var Root13 = withProvider10(progress.Progress.Root, "root");
-var RootProvider7 = withProvider10(progress.Progress.RootProvider, "root");
-var Circle = withContext12(progress.Progress.Circle, "circle");
-var CircleRange = withContext12(progress.Progress.CircleRange, "circleRange");
-var CircleTrack = withContext12(progress.Progress.CircleTrack, "circleTrack");
-var Label6 = withContext12(progress.Progress.Label, "label");
-var Range2 = withContext12(progress.Progress.Range, "range");
-var Track2 = withContext12(progress.Progress.Track, "track");
-var ValueText3 = withContext12(progress.Progress.ValueText, "valueText");
-var View = withContext12(progress.Progress.View, "view");
+var { withProvider: withProvider11, withContext: withContext13 } = jsx.createStyleContext(recipes.progress);
+var Root14 = withProvider11(progress.Progress.Root, "root");
+var RootProvider7 = withProvider11(progress.Progress.RootProvider, "root");
+var Circle = withContext13(progress.Progress.Circle, "circle");
+var CircleRange = withContext13(progress.Progress.CircleRange, "circleRange");
+var CircleTrack = withContext13(progress.Progress.CircleTrack, "circleTrack");
+var Label6 = withContext13(progress.Progress.Label, "label");
+var Range2 = withContext13(progress.Progress.Range, "range");
+var Track2 = withContext13(progress.Progress.Track, "track");
+var ValueText3 = withContext13(progress.Progress.ValueText, "valueText");
+var View = withContext13(progress.Progress.View, "view");
 
 // src/components/Skeleton.tsx
 var Skeleton_exports = {};
@@ -631,79 +714,6 @@ var SkeletonText = react$1.forwardRef(
   }
 );
 
-// src/components/CloseButton.tsx
-var CloseButton_exports = {};
-__export(CloseButton_exports, {
-  CloseButton: () => CloseButton
-});
-var XIcon = () => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 6 6 18" }),
-  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m6 6 12 12" })
-] });
-var CloseButton = react$1.forwardRef(
-  function CloseButton2(props, ref) {
-    return /* @__PURE__ */ jsxRuntime.jsx(IconButton, { variant: "plain", colorPalette: "gray", "aria-label": "Close", ref, ...props, children: props.children ?? /* @__PURE__ */ jsxRuntime.jsx(XIcon, {}) });
-  }
-);
-
-// src/components/Icon.tsx
-var Icon_exports = {};
-__export(Icon_exports, {
-  Icon: () => Icon
-});
-var Icon = jsx.styled(factory.ark.svg);
-var CheckCircleIcon = () => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M22 11.08V12a10 10 0 1 1-5.93-9.14" }),
-  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m9 11 3 3L22 4" })
-] });
-var CircleAlertIcon = () => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-  /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10" }),
-  /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", x2: "12", y1: "8", y2: "12" }),
-  /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", x2: "12.01", y1: "16", y2: "16" })
-] });
-var CircleXIcon = () => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-  /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10" }),
-  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m15 9-6 6" }),
-  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m9 9 6 6" })
-] });
-var { withProvider: withProvider11, withContext: withContext13 } = jsx.createStyleContext(recipes.toast);
-var Root14 = withProvider11(toast.Toast.Root, "root");
-var Title4 = withContext13(toast.Toast.Title, "title");
-var Description4 = withContext13(toast.Toast.Description, "description");
-var ActionTrigger = withContext13(toast.Toast.ActionTrigger, "actionTrigger");
-var CloseTrigger3 = withContext13(toast.Toast.CloseTrigger, "closeTrigger");
-var StyledToaster = jsx.styled(toast.Toaster);
-var iconMap = {
-  warning: CircleAlertIcon,
-  success: CheckCircleIcon,
-  error: CircleXIcon
-};
-var Indicator6 = react$1.forwardRef(function ToastIndicator(props, ref) {
-  const toast2 = toast.useToastContext();
-  const StatusIcon = iconMap[toast2.type];
-  if (!StatusIcon) return null;
-  return /* @__PURE__ */ jsxRuntime.jsx(Icon, { ref, "data-type": toast2.type, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(StatusIcon, {}) });
-});
-var toaster = toast.createToaster({
-  placement: "bottom-end",
-  pauseOnPageIdle: true,
-  overlap: true,
-  max: 5
-});
-var Toaster = () => {
-  return /* @__PURE__ */ jsxRuntime.jsx(portal.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(StyledToaster, { toaster, insetInline: { mdDown: "4" }, children: (toast2) => /* @__PURE__ */ jsxRuntime.jsxs(Root14, { children: [
-    toast2.type === "loading" ? /* @__PURE__ */ jsxRuntime.jsx(Spinner, { color: "colorPalette.plain.fg" }) : /* @__PURE__ */ jsxRuntime.jsx(Indicator6, {}),
-    /* @__PURE__ */ jsxRuntime.jsxs(jsx.Stack, { gap: "3", alignItems: "start", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(jsx.Stack, { gap: "1", children: [
-        toast2.title && /* @__PURE__ */ jsxRuntime.jsx(Title4, { children: toast2.title }),
-        toast2.description && /* @__PURE__ */ jsxRuntime.jsx(Description4, { children: toast2.description })
-      ] }),
-      toast2.action && /* @__PURE__ */ jsxRuntime.jsx(ActionTrigger, { children: toast2.action.label })
-    ] }),
-    toast2.closable && /* @__PURE__ */ jsxRuntime.jsx(CloseTrigger3, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(CloseButton, { size: "sm" }) })
-  ] }) }) });
-};
-
 // src/components/Popover.tsx
 var Popover_exports = {};
 __export(Popover_exports, {
@@ -782,7 +792,6 @@ var Tooltip = react$1.forwardRef(function Tooltip2(props, ref) {
     ] }) }) })
   ] });
 });
-var Heading = jsx.styled("h2", recipes.heading);
 
 // node_modules/.pnpm/@pandacss+dev@1.8.0_hono@4.11.3_jsdom@27.4.0_typescript@5.9.3/node_modules/@pandacss/dev/dist/index.mjs
 function defineRecipe(config) {
@@ -1867,8 +1876,9 @@ function cn(...inputs) {
 exports.AbsoluteCenter = AbsoluteCenter_exports;
 exports.Accordion = Accordion_exports;
 exports.Avatar = Avatar_exports;
-exports.Badge = Badge_exports;
-exports.Button = Button_exports;
+exports.Badge = Badge;
+exports.Button = Button;
+exports.ButtonGroup = ButtonGroup;
 exports.Card = Card_exports;
 exports.Checkbox = Checkbox_exports;
 exports.CloseButton = CloseButton_exports;
@@ -1877,7 +1887,7 @@ exports.Drawer = Drawer_exports;
 exports.Group = Group_exports;
 exports.Heading = Heading;
 exports.Icon = Icon_exports;
-exports.IconButton = IconButton_exports;
+exports.IconButton = IconButton;
 exports.Input = Input;
 exports.InputAddon = InputAddon;
 exports.InputGroup = InputGroup2;
@@ -1887,7 +1897,7 @@ exports.RadioGroup = RadioGroup_exports;
 exports.Select = Select_exports;
 exports.Skeleton = Skeleton_exports;
 exports.Slider = Slider_exports;
-exports.Spinner = Spinner_exports;
+exports.Spinner = Spinner;
 exports.Switch = Switch_exports;
 exports.Tabs = Tabs_exports;
 exports.Textarea = Textarea;