@nation-a/ui 0.9.1 → 0.10.0

package/dist/index.cjs

@@ -790,12 +790,23 @@ var isString = (v2) => typeof v2 === "string";
 var isFunction = (v2) => typeof v2 === "function";
 var fnToString = Function.prototype.toString;
 fnToString.call(Object);
+var runIfFn = (v2, ...a) => {
+  const res = typeof v2 === "function" ? v2(...a) : v2;
+  return res ?? void 0;
+};
 var identity = (v2) => v2();
 var callAll = (...fns2) => (...a) => {
   fns2.forEach(function(fn) {
     fn == null ? void 0 : fn(...a);
   });
 };
+var uuid = /* @__PURE__ */ (() => {
+  let id = 0;
+  return () => {
+    id++;
+    return id.toString(36);
+  };
+})();
 function compact(obj) {
   if (!isPlainObject2(obj) || obj === void 0) return obj;
   const keys = Reflect.ownKeys(obj).filter((key) => typeof key === "string");
@@ -811,6 +822,19 @@ function compact(obj) {
 var isPlainObject2 = (v2) => {
   return v2 && typeof v2 === "object" && v2.constructor === Object;
 };
+function setRafTimeout(callback, delay2) {
+  const start2 = performance.now();
+  let handle;
+  function loop2(now) {
+    handle = requestAnimationFrame(loop2);
+    const delta = now - start2;
+    if (delta >= delay2) {
+      callback();
+    }
+  }
+  handle = requestAnimationFrame(loop2);
+  return () => cancelAnimationFrame(handle);
+}
 function warn(...a) {
   const m2 = a.length === 1 ? a[0] : a[1];
   const c = a.length === 2 ? a[0] : true;
@@ -821,7 +845,16 @@ function warn(...a) {
 function ensure(c, m2) {
   if (c == null) throw new Error(m2);
 }
+function ensureProps(props, keys, scope) {
+  let missingKeys = [];
+  for (const key of keys) {
+    if (props[key] == null) missingKeys.push(key);
+  }
+  if (missingKeys.length > 0)
+    throw new Error(`[zag-js${` > ${scope}`}] missing required props: ${missingKeys.join(", ")}`);
+}
 var isObject = (v2) => typeof v2 === "object" && v2 !== null;
+var MAX_Z_INDEX = 2147483647;
 var dataAttr = (guard) => guard ? "" : void 0;
 var ELEMENT_NODE = 1;
 var DOCUMENT_NODE = 9;
@@ -2096,6 +2129,27 @@ function trackDismissableElement(nodeOrFn, options) {
     cleanups2.forEach((fn) => fn == null ? void 0 : fn());
   };
 }
+function trackDismissableBranch(nodeOrFn, options = {}) {
+  const { defer } = options;
+  const func = defer ? raf$2 : (v2) => v2();
+  const cleanups2 = [];
+  cleanups2.push(
+    func(() => {
+      const node = isFunction(nodeOrFn) ? nodeOrFn() : nodeOrFn;
+      if (!node) {
+        warn("[@zag-js/dismissable] branch node is `null` or `undefined`");
+        return;
+      }
+      layerStack.addBranch(node);
+      cleanups2.push(() => {
+        layerStack.removeBranch(node);
+      });
+    })
+  );
+  return () => {
+    cleanups2.forEach((fn) => fn == null ? void 0 : fn());
+  };
+}
 const [RenderStrategyPropsProvider, useRenderStrategyPropsContext] = createContext({
   name: "RenderStrategyContext",
   hookName: "useRenderStrategyContext",
@@ -2129,7 +2183,7 @@ const [PresenceProvider, usePresenceContext] = createContext({
   providerName: "<PresenceProvider />"
 });
 const splitPresenceProps = (props) => createSplitProps()(props, ["immediate", "lazyMount", "onExitComplete", "present", "unmountOnExit"]);
-function connect$2(service, _normalize) {
+function connect$3(service, _normalize) {
   const { state, send, context: context2 } = service;
   const present = state.matches("mounted", "unmountSuspended");
   return {
@@ -2144,7 +2198,7 @@ function connect$2(service, _normalize) {
     }
   };
 }
-var machine$2 = createMachine({
+var machine$3 = createMachine({
   props({ props: props2 }) {
     return { ...props2, present: !!props2.present };
   },
@@ -2311,8 +2365,8 @@ const usePresence = (props = {}) => {
     present,
     onExitComplete: useEvent(props.onExitComplete)
   };
-  const service = useMachine(machine$2, machineProps);
-  const api = connect$2(service);
+  const service = useMachine(machine$3, machineProps);
+  const api = connect$3(service);
   if (api.present) {
     wasEverPresent.current = true;
   }
@@ -2928,7 +2982,7 @@ var FocusTrap = class {
         nextTabbableNode
       };
     });
-    this.state.tabbableGroups = this.state.containerGroups.filter((group) => group.tabbableNodes.length > 0);
+    this.state.tabbableGroups = this.state.containerGroups.filter((group2) => group2.tabbableNodes.length > 0);
     if (this.state.tabbableGroups.length <= 0 && !this.getNodeForOption("fallbackFocus")) {
       throw new Error(
         "Your focus-trap must have at least one container with at least one tabbable node in it at all times"
@@ -3091,7 +3145,7 @@ function preventBodyScroll(_document) {
     body.removeAttribute(LOCK_CLASSNAME);
   };
 }
-var anatomy$1 = createAnatomy("dialog").parts(
+var anatomy$2 = createAnatomy("dialog").parts(
   "trigger",
   "backdrop",
   "positioner",
@@ -3100,7 +3154,7 @@ var anatomy$1 = createAnatomy("dialog").parts(
   "description",
   "closeTrigger"
 );
-var parts$1 = anatomy$1.build();
+var parts$2 = anatomy$2.build();
 var getPositionerId = (ctx2) => {
   var _a;
   return ((_a = ctx2.ids) == null ? void 0 : _a.positioner) ?? `dialog:${ctx2.id}:positioner`;
@@ -3117,15 +3171,15 @@ var getTriggerId$1 = (ctx2) => {
   var _a;
   return ((_a = ctx2.ids) == null ? void 0 : _a.trigger) ?? `dialog:${ctx2.id}:trigger`;
 };
-var getTitleId = (ctx2) => {
+var getTitleId$1 = (ctx2) => {
   var _a;
   return ((_a = ctx2.ids) == null ? void 0 : _a.title) ?? `dialog:${ctx2.id}:title`;
 };
-var getDescriptionId = (ctx2) => {
+var getDescriptionId$1 = (ctx2) => {
   var _a;
   return ((_a = ctx2.ids) == null ? void 0 : _a.description) ?? `dialog:${ctx2.id}:description`;
 };
-var getCloseTriggerId = (ctx2) => {
+var getCloseTriggerId$1 = (ctx2) => {
   var _a;
   return ((_a = ctx2.ids) == null ? void 0 : _a.closeTrigger) ?? `dialog:${ctx2.id}:close`;
 };
@@ -3133,10 +3187,10 @@ var getContentEl$1 = (ctx2) => ctx2.getById(getContentId$1(ctx2));
 var getPositionerEl = (ctx2) => ctx2.getById(getPositionerId(ctx2));
 var getBackdropEl = (ctx2) => ctx2.getById(getBackdropId(ctx2));
 var getTriggerEl$1 = (ctx2) => ctx2.getById(getTriggerId$1(ctx2));
-var getTitleEl = (ctx2) => ctx2.getById(getTitleId(ctx2));
-var getDescriptionEl = (ctx2) => ctx2.getById(getDescriptionId(ctx2));
-var getCloseTriggerEl = (ctx2) => ctx2.getById(getCloseTriggerId(ctx2));
-function connect$1(service, normalize) {
+var getTitleEl = (ctx2) => ctx2.getById(getTitleId$1(ctx2));
+var getDescriptionEl = (ctx2) => ctx2.getById(getDescriptionId$1(ctx2));
+var getCloseTriggerEl = (ctx2) => ctx2.getById(getCloseTriggerId$1(ctx2));
+function connect$2(service, normalize) {
   const { state, send, context: context2, prop, scope } = service;
   const ariaLabel = prop("aria-label");
   const open = state.matches("open");
@@ -3149,7 +3203,7 @@ function connect$1(service, normalize) {
     },
     getTriggerProps() {
       return normalize.button({
-        ...parts$1.trigger.attrs,
+        ...parts$2.trigger.attrs,
         dir: prop("dir"),
         id: getTriggerId$1(scope),
         "aria-haspopup": "dialog",
@@ -3165,7 +3219,7 @@ function connect$1(service, normalize) {
     },
     getBackdropProps() {
       return normalize.element({
-        ...parts$1.backdrop.attrs,
+        ...parts$2.backdrop.attrs,
         dir: prop("dir"),
         hidden: !open,
         id: getBackdropId(scope),
@@ -3174,7 +3228,7 @@ function connect$1(service, normalize) {
     },
     getPositionerProps() {
       return normalize.element({
-        ...parts$1.positioner.attrs,
+        ...parts$2.positioner.attrs,
         dir: prop("dir"),
         id: getPositionerId(scope),
         style: {
@@ -3185,7 +3239,7 @@ function connect$1(service, normalize) {
     getContentProps() {
       const rendered = context2.get("rendered");
       return normalize.element({
-        ...parts$1.content.attrs,
+        ...parts$2.content.attrs,
         dir: prop("dir"),
         role: prop("role"),
         hidden: !open,
@@ -3194,29 +3248,29 @@ function connect$1(service, normalize) {
         "data-state": open ? "open" : "closed",
         "aria-modal": true,
         "aria-label": ariaLabel || void 0,
-        "aria-labelledby": ariaLabel || !rendered.title ? void 0 : getTitleId(scope),
-        "aria-describedby": rendered.description ? getDescriptionId(scope) : void 0
+        "aria-labelledby": ariaLabel || !rendered.title ? void 0 : getTitleId$1(scope),
+        "aria-describedby": rendered.description ? getDescriptionId$1(scope) : void 0
       });
     },
     getTitleProps() {
       return normalize.element({
-        ...parts$1.title.attrs,
+        ...parts$2.title.attrs,
         dir: prop("dir"),
-        id: getTitleId(scope)
+        id: getTitleId$1(scope)
       });
     },
     getDescriptionProps() {
       return normalize.element({
-        ...parts$1.description.attrs,
+        ...parts$2.description.attrs,
         dir: prop("dir"),
-        id: getDescriptionId(scope)
+        id: getDescriptionId$1(scope)
       });
     },
     getCloseTriggerProps() {
       return normalize.button({
-        ...parts$1.closeTrigger.attrs,
+        ...parts$2.closeTrigger.attrs,
         dir: prop("dir"),
-        id: getCloseTriggerId(scope),
+        id: getCloseTriggerId$1(scope),
         type: "button",
         onClick(event) {
           if (event.defaultPrevented) return;
@@ -3227,7 +3281,7 @@ function connect$1(service, normalize) {
     }
   };
 }
-var machine$1 = createMachine({
+var machine$2 = createMachine({
   props({ props: props2, scope }) {
     const alertDialog = props2.role === "alertdialog";
     const initialFocusEl = alertDialog ? () => getCloseTriggerEl(scope) : void 0;
@@ -3446,8 +3500,8 @@ const useDialog = (props) => {
     dir,
     ...props
   };
-  const service = useMachine(machine$1, machineProps);
-  return connect$1(service, normalizeProps);
+  const service = useMachine(machine$2, machineProps);
+  return connect$2(service, normalizeProps);
 };
 const DialogRoot = (props) => {
   const [presenceProps, { children, ...localProps }] = splitPresenceProps(props);
@@ -3521,9 +3575,9 @@ const TabTrigger = React.forwardRef((props, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(ark.button, { ...mergedProps, ref });
 });
 TabTrigger.displayName = "TabTrigger";
-var anatomy = createAnatomy("tabs").parts("root", "list", "trigger", "content", "indicator");
-var parts = anatomy.build();
-var getRootId = (ctx2) => {
+var anatomy$1 = createAnatomy("tabs").parts("root", "list", "trigger", "content", "indicator");
+var parts$1 = anatomy$1.build();
+var getRootId$1 = (ctx2) => {
   var _a;
   return ((_a = ctx2.ids) == null ? void 0 : _a.root) ?? `tabs:${ctx2.id}`;
 };
@@ -3574,7 +3628,7 @@ var resolveRect = (rect) => ({
   left: `${rect.left}px`,
   top: `${rect.top}px`
 });
-function connect(service, normalize) {
+function connect$1(service, normalize) {
   const { state, send, context: context2, prop, scope } = service;
   const translations = prop("translations");
   const focused = state.matches("focused");
@@ -3620,8 +3674,8 @@ function connect(service, normalize) {
     },
     getRootProps() {
       return normalize.element({
-        ...parts.root.attrs,
-        id: getRootId(scope),
+        ...parts$1.root.attrs,
+        id: getRootId$1(scope),
         "data-orientation": prop("orientation"),
         "data-focus": dataAttr(focused),
         dir: prop("dir")
@@ -3629,7 +3683,7 @@ function connect(service, normalize) {
     },
     getListProps() {
       return normalize.element({
-        ...parts.list.attrs,
+        ...parts$1.list.attrs,
         id: getListId(scope),
         role: "tablist",
         dir: prop("dir"),
@@ -3685,7 +3739,7 @@ function connect(service, normalize) {
       const { value, disabled } = props2;
       const triggerState = getTriggerState(props2);
       return normalize.button({
-        ...parts.trigger.attrs,
+        ...parts$1.trigger.attrs,
         role: "tab",
         type: "button",
         disabled,
@@ -3725,7 +3779,7 @@ function connect(service, normalize) {
       const { value } = props2;
       const selected = context2.get("value") === value;
       return normalize.element({
-        ...parts.content.attrs,
+        ...parts$1.content.attrs,
         dir: prop("dir"),
         id: getContentId(scope, value),
         tabIndex: composite ? 0 : -1,
@@ -3742,7 +3796,7 @@ function connect(service, normalize) {
       const indicatorTransition = context2.get("indicatorTransition");
       return normalize.element({
         id: getIndicatorId(scope),
-        ...parts.indicator.attrs,
+        ...parts$1.indicator.attrs,
         dir: prop("dir"),
         "data-orientation": prop("orientation"),
         style: {
@@ -3762,8 +3816,8 @@ function connect(service, normalize) {
     }
   };
 }
-var { not } = createGuards();
-var machine = createMachine({
+var { not: not$1 } = createGuards();
+var machine$1 = createMachine({
   props({ props: props2 }) {
     return {
       dir: "ltr",
@@ -3886,7 +3940,7 @@ var machine = createMachine({
           }
         ],
         ENTER: {
-          guard: not("selectOnFocus"),
+          guard: not$1("selectOnFocus"),
           actions: ["selectFocusedTab"]
         },
         TAB_FOCUS: {
@@ -4067,8 +4121,8 @@ const useTabs = (props) => {
     getRootNode,
     ...props
   };
-  const service = useMachine(machine, machineProps);
-  return connect(service, normalizeProps);
+  const service = useMachine(machine$1, machineProps);
+  return connect$1(service, normalizeProps);
 };
 const TabsRoot = React.forwardRef((props, ref) => {
   const [renderStrategyProps, tabsProps] = splitRenderStrategyProps(props);
@@ -4092,135 +4146,1218 @@ const TabsRoot = React.forwardRef((props, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(TabsProvider, { value: tabs, children: /* @__PURE__ */ jsxRuntime.jsx(RenderStrategyPropsProvider, { value: renderStrategyProps, children: /* @__PURE__ */ jsxRuntime.jsx(ark.div, { ...mergedProps, ref }) }) });
 });
 TabsRoot.displayName = "TabsRoot";
-const spinnerRecipe = cva({
-  base: {
-    display: "inline-block",
-    borderWidth: "md",
-    borderStyle: "solid",
-    borderStartEndRadius: "full",
-    borderEndStartRadius: "full",
-    borderRadius: "full",
-    animation: "spin",
-    animationDuration: "slowest"
-  },
-  defaultVariants: {
-    size: "md"
-  },
-  variants: {
-    size: {
-      sm: { width: 4, height: 4 },
-      md: { width: 6, height: 6 },
-      lg: { width: 12, height: 12 },
-      xl: { width: 24, height: 24 }
+var anatomy = createAnatomy("toast").parts(
+  "group",
+  "root",
+  "title",
+  "description",
+  "actionTrigger",
+  "closeTrigger"
+);
+var parts = anatomy.build();
+var getRegionId = (placement) => `toast-group:${placement}`;
+var getRegionEl = (ctx2, placement) => ctx2.getById(`toast-group:${placement}`);
+var getRootId = (ctx2) => `toast:${ctx2.id}`;
+var getRootEl = (ctx2) => ctx2.getById(getRootId(ctx2));
+var getTitleId = (ctx2) => `toast:${ctx2.id}:title`;
+var getDescriptionId = (ctx2) => `toast:${ctx2.id}:description`;
+var getCloseTriggerId = (ctx2) => `toast${ctx2.id}:close`;
+var defaultTimeouts = {
+  info: 5e3,
+  error: 5e3,
+  success: 2e3,
+  loading: Infinity,
+  DEFAULT: 5e3
+};
+function getToastDuration(duration, type) {
+  return duration ?? defaultTimeouts[type] ?? defaultTimeouts.DEFAULT;
+}
+var getOffsets = (offsets) => typeof offsets === "string" ? { left: offsets, right: offsets, bottom: offsets, top: offsets } : offsets;
+function getGroupPlacementStyle(service, placement) {
+  var _a;
+  const { prop, computed, context: context2 } = service;
+  const { offsets, gap } = prop("store").attrs;
+  const heights = context2.get("heights");
+  const computedOffset = getOffsets(offsets);
+  const rtl = prop("dir") === "rtl";
+  const computedPlacement = placement.replace("-start", rtl ? "-right" : "-left").replace("-end", rtl ? "-left" : "-right");
+  const isRighty = computedPlacement.includes("right");
+  const isLefty = computedPlacement.includes("left");
+  const styles = {
+    position: "fixed",
+    pointerEvents: computed("count") > 0 ? void 0 : "none",
+    display: "flex",
+    flexDirection: "column",
+    "--gap": `${gap}px`,
+    "--first-height": `${((_a = heights[0]) == null ? void 0 : _a.height) || 0}px`,
+    zIndex: MAX_Z_INDEX
+  };
+  let alignItems = "center";
+  if (isRighty) alignItems = "flex-end";
+  if (isLefty) alignItems = "flex-start";
+  styles.alignItems = alignItems;
+  if (computedPlacement.includes("top")) {
+    const offset = computedOffset.top;
+    styles.top = `max(env(safe-area-inset-top, 0px), ${offset})`;
+  }
+  if (computedPlacement.includes("bottom")) {
+    const offset = computedOffset.bottom;
+    styles.bottom = `max(env(safe-area-inset-bottom, 0px), ${offset})`;
+  }
+  if (!computedPlacement.includes("left")) {
+    const offset = computedOffset.right;
+    styles.insetInlineEnd = `calc(env(safe-area-inset-right, 0px) + ${offset})`;
+  }
+  if (!computedPlacement.includes("right")) {
+    const offset = computedOffset.left;
+    styles.insetInlineStart = `calc(env(safe-area-inset-left, 0px) + ${offset})`;
+  }
+  return styles;
+}
+function getPlacementStyle(service, visible) {
+  const { prop, context: context2, computed } = service;
+  const parent = prop("parent");
+  const placement = parent.computed("placement");
+  const { gap } = parent.prop("store").attrs;
+  const [side] = placement.split("-");
+  const mounted = context2.get("mounted");
+  const remainingTime = context2.get("remainingTime");
+  const height = computed("height");
+  const frontmost = computed("frontmost");
+  const sibling = !frontmost;
+  const overlap = !prop("stacked");
+  const stacked = prop("stacked");
+  const type = prop("type");
+  const duration = type === "loading" ? Number.MAX_SAFE_INTEGER : remainingTime;
+  const offset = computed("heightIndex") * gap + computed("heightBefore");
+  const styles = {
+    position: "absolute",
+    pointerEvents: "auto",
+    "--opacity": "0",
+    "--remove-delay": `${prop("removeDelay")}ms`,
+    "--duration": `${duration}ms`,
+    "--initial-height": `${height}px`,
+    "--offset": `${offset}px`,
+    "--index": prop("index"),
+    "--z-index": computed("zIndex"),
+    "--lift-amount": "calc(var(--lift) * var(--gap))",
+    "--y": "100%",
+    "--x": "0"
+  };
+  const assign2 = (overrides) => Object.assign(styles, overrides);
+  if (side === "top") {
+    assign2({
+      top: "0",
+      "--sign": "-1",
+      "--y": "-100%",
+      "--lift": "1"
+    });
+  } else if (side === "bottom") {
+    assign2({
+      bottom: "0",
+      "--sign": "1",
+      "--y": "100%",
+      "--lift": "-1"
+    });
+  }
+  if (mounted) {
+    assign2({
+      "--y": "0",
+      "--opacity": "1"
+    });
+    if (stacked) {
+      assign2({
+        "--y": "calc(var(--lift) * var(--offset))",
+        "--height": "var(--initial-height)"
+      });
     }
   }
-});
-const Spinner = React.forwardRef((props, ref) => {
-  const { color, ...rest } = props;
-  const StyledSpinner = styled(ark.div, spinnerRecipe);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    StyledSpinner,
-    {
-      ref,
-      ...rest,
-      css: {
-        borderColor: "inherit",
-        borderBottomColor: "transparent",
-        borderLeftColor: "transparent"
-      }
+  if (!visible) {
+    assign2({
+      "--opacity": "0",
+      pointerEvents: "none"
+    });
+  }
+  if (sibling && overlap) {
+    assign2({
+      "--base-scale": "var(--index) * 0.05 + 1",
+      "--y": "calc(var(--lift-amount) * var(--index))",
+      "--scale": "calc(-1 * var(--base-scale))",
+      "--height": "var(--first-height)"
+    });
+    if (!visible) {
+      assign2({
+        "--y": "calc(var(--sign) * 40%)"
+      });
     }
-  );
-});
-Spinner.displayName = "Spinner";
-const buttonRecipe = cva({
-  base: {
-    alignItems: "center",
-    appearance: "none",
-    cursor: "pointer",
-    display: "inline-flex",
-    fontWeight: "semibold",
-    isolation: "isolate",
-    minWidth: "0",
-    justifyContent: "center",
-    outline: "none",
-    position: "relative",
-    transitionDuration: "normal",
-    transitionProperty: "background, border-color, color, box-shadow",
-    transitionTimingFunction: "default",
-    userSelect: "none",
-    verticalAlign: "middle",
-    whiteSpace: "nowrap",
-    _hidden: {
-      display: "none"
+  }
+  if (sibling && stacked && !visible) {
+    assign2({
+      "--y": "calc(var(--lift) * var(--offset) + var(--lift) * -100%)"
+    });
+  }
+  if (frontmost && !visible) {
+    assign2({
+      "--y": "calc(var(--lift) * -100%)"
+    });
+  }
+  return styles;
+}
+function getGhostBeforeStyle(service, visible) {
+  const { computed } = service;
+  const styles = {
+    position: "absolute",
+    inset: "0",
+    scale: "1 2",
+    pointerEvents: visible ? "none" : "auto"
+  };
+  const assign2 = (overrides) => Object.assign(styles, overrides);
+  if (computed("frontmost") && !visible) {
+    assign2({
+      height: "calc(var(--initial-height) + 80%)"
+    });
+  }
+  return styles;
+}
+function getGhostAfterStyle() {
+  return {
+    position: "absolute",
+    left: "0",
+    height: "calc(var(--gap) + 2px)",
+    bottom: "100%",
+    width: "100%"
+  };
+}
+function groupConnect(service, normalize) {
+  const { context: context2, prop, send, refs, computed } = service;
+  return {
+    getCount() {
+      return context2.get("toasts").length;
+    },
+    getToasts() {
+      return context2.get("toasts");
+    },
+    getGroupProps(options = {}) {
+      const { label = "Notifications" } = options;
+      const { hotkey } = prop("store").attrs;
+      const hotkeyLabel = hotkey.join("+").replace(/Key/g, "").replace(/Digit/g, "");
+      const placement = computed("placement");
+      const [side, align = "center"] = placement.split("-");
+      return normalize.element({
+        ...parts.group.attrs,
+        dir: prop("dir"),
+        tabIndex: -1,
+        "aria-label": `${placement} ${label} ${hotkeyLabel}`,
+        id: getRegionId(placement),
+        "data-placement": placement,
+        "data-side": side,
+        "data-align": align,
+        "aria-live": "polite",
+        role: "region",
+        style: getGroupPlacementStyle(service, placement),
+        onMouseMove() {
+          send({ type: "REGION.POINTER_ENTER", placement });
+        },
+        onMouseLeave() {
+          send({ type: "REGION.POINTER_LEAVE", placement });
+        },
+        onFocus(event) {
+          send({ type: "REGION.FOCUS", target: event.relatedTarget });
+        },
+        onBlur(event) {
+          if (refs.get("isFocusWithin") && !contains(event.currentTarget, event.relatedTarget)) {
+            queueMicrotask(() => send({ type: "REGION.BLUR" }));
+          }
+        }
+      });
+    },
+    subscribe(fn) {
+      const store = prop("store");
+      return store.subscribe(() => fn(context2.get("toasts")));
     }
+  };
+}
+var groupMachine = createMachine({
+  props({ props }) {
+    return {
+      dir: "ltr",
+      id: uuid(),
+      ...props,
+      store: props.store
+    };
   },
-  defaultVariants: {
-    variant: "solid",
-    size: "md",
-    radius: "full",
-    color: "neutral"
+  initialState({ prop }) {
+    return prop("store").attrs.overlap ? "overlap" : "stack";
   },
-  variants: {
-    variant: {
-      solid: {
-        _disabled: {
-          background: "background.neutral.disabled",
-          color: "content.neutral.disabled",
-          cursor: "not-allowed",
-          pointerEvents: "none"
-        }
-      },
-      outline: {
-        background: "transparent",
-        borderWidth: "1px",
-        borderStyle: "solid",
-        borderColor: "border.neutral.default",
-        _disabled: {
-          background: "transparent",
-          color: "content.neutral.disabled",
-          borderColor: "border.neutral.disabled",
-          cursor: "not-allowed",
-          pointerEvents: "none"
-        }
+  refs() {
+    return {
+      lastFocusedEl: null,
+      isFocusWithin: false,
+      dismissableCleanup: void 0
+    };
+  },
+  context({ bindable }) {
+    return {
+      toasts: bindable(() => ({
+        defaultValue: [],
+        sync: true,
+        hash: (toasts) => toasts.map((t) => t.id).join(",")
+      })),
+      heights: bindable(() => ({
+        defaultValue: [],
+        sync: true
+      }))
+    };
+  },
+  computed: {
+    count: ({ context: context2 }) => context2.get("toasts").length,
+    overlap: ({ prop }) => prop("store").attrs.overlap,
+    placement: ({ prop }) => prop("store").attrs.placement
+  },
+  effects: ["subscribeToStore", "trackDocumentVisibility", "trackHotKeyPress"],
+  watch({ track, context: context2, action }) {
+    track([() => context2.hash("toasts")], () => {
+      queueMicrotask(() => {
+        action(["collapsedIfEmpty", "setDismissableBranch"]);
+      });
+    });
+  },
+  exit: ["clearDismissableBranch", "clearLastFocusedEl"],
+  on: {
+    "DOC.HOTKEY": {
+      actions: ["focusRegionEl"]
+    },
+    "REGION.BLUR": [
+      {
+        guard: "isOverlapping",
+        target: "overlap",
+        actions: ["collapseToasts", "resumeToasts", "restoreLastFocusedEl"]
       },
-      light: {
-        background: "transparent",
-        _disabled: {
-          background: "transparent",
-          color: "content.neutral.disabled",
-          cursor: "not-allowed",
-          pointerEvents: "none"
-        }
+      {
+        target: "stack",
+        actions: ["resumeToasts", "restoreLastFocusedEl"]
       }
+    ],
+    "TOAST.REMOVE": {
+      actions: ["removeToast", "removeHeight"]
     },
-    color: {
-      neuroid_primary: {},
-      neuroid_secondary: {},
-      zoltarina_primary: {},
-      zoltarina_secondary: {},
-      heyd_primary: {},
-      heyd_secondary: {},
-      heybee_primary: {},
-      neutral: {},
-      danger: {},
-      warning: {},
-      success: {},
-      informative: {}
+    "TOAST.PAUSE": {
+      actions: ["pauseToasts"]
+    }
+  },
+  states: {
+    stack: {
+      on: {
+        "REGION.POINTER_LEAVE": [
+          {
+            guard: "isOverlapping",
+            target: "overlap",
+            actions: ["resumeToasts", "collapseToasts"]
+          },
+          {
+            actions: ["resumeToasts"]
+          }
+        ],
+        "REGION.OVERLAP": {
+          target: "overlap",
+          actions: ["collapseToasts"]
+        },
+        "REGION.FOCUS": {
+          actions: ["setLastFocusedEl", "pauseToasts"]
+        },
+        "REGION.POINTER_ENTER": {
+          actions: ["pauseToasts"]
+        }
+      }
     },
-    size: {
-      xs: {
-        h: 7,
-        textStyle: "label.sm",
-        px: "8px",
-        gap: 1,
-        "& :where(svg)": {
-          width: "20px",
-          height: "20px"
+    overlap: {
+      on: {
+        "REGION.STACK": {
+          target: "stack",
+          actions: ["expandToasts"]
+        },
+        "REGION.POINTER_ENTER": {
+          target: "stack",
+          actions: ["pauseToasts", "expandToasts"]
+        },
+        "REGION.FOCUS": {
+          target: "stack",
+          actions: ["setLastFocusedEl", "pauseToasts", "expandToasts"]
         }
-      },
-      sm: {
-        h: 8,
-        textStyle: "label.sm",
+      }
+    }
+  },
+  implementations: {
+    guards: {
+      isOverlapping: ({ computed }) => computed("overlap")
+    },
+    effects: {
+      subscribeToStore({ context: context2, prop }) {
+        return prop("store").subscribe((toast2) => {
+          if (toast2.dismiss) {
+            context2.set("toasts", (prev) => prev.filter((t) => t.id !== toast2.id));
+            return;
+          }
+          context2.set("toasts", (prev) => {
+            const index2 = prev.findIndex((t) => t.id === toast2.id);
+            if (index2 !== -1) {
+              return [...prev.slice(0, index2), { ...prev[index2], ...toast2 }, ...prev.slice(index2 + 1)];
+            }
+            return [toast2, ...prev];
+          });
+        });
+      },
+      trackHotKeyPress({ prop, send }) {
+        const handleKeyDown = (event) => {
+          const { hotkey } = prop("store").attrs;
+          const isHotkeyPressed = hotkey.every((key) => event[key] || event.code === key);
+          if (!isHotkeyPressed) return;
+          send({ type: "DOC.HOTKEY" });
+        };
+        return addDomEvent(document, "keydown", handleKeyDown, { capture: true });
+      },
+      trackDocumentVisibility({ prop, send, scope }) {
+        const { pauseOnPageIdle } = prop("store").attrs;
+        if (!pauseOnPageIdle) return;
+        const doc = scope.getDoc();
+        return addDomEvent(doc, "visibilitychange", () => {
+          const isHidden = doc.visibilityState === "hidden";
+          send({ type: isHidden ? "PAUSE_ALL" : "RESUME_ALL" });
+        });
+      }
+    },
+    actions: {
+      setDismissableBranch({ refs, context: context2, computed, scope }) {
+        var _a;
+        const toasts = context2.get("toasts");
+        const placement = computed("placement");
+        const hasToasts = toasts.length > 0;
+        if (!hasToasts) {
+          (_a = refs.get("dismissableCleanup")) == null ? void 0 : _a();
+          return;
+        }
+        if (hasToasts && refs.get("dismissableCleanup")) {
+          return;
+        }
+        const groupEl = () => getRegionEl(scope, placement);
+        const cleanup = trackDismissableBranch(groupEl, { defer: true });
+        refs.set("dismissableCleanup", cleanup);
+      },
+      clearDismissableBranch({ refs }) {
+        var _a;
+        (_a = refs.get("dismissableCleanup")) == null ? void 0 : _a();
+      },
+      focusRegionEl({ scope, computed }) {
+        queueMicrotask(() => {
+          var _a;
+          (_a = getRegionEl(scope, computed("placement"))) == null ? void 0 : _a.focus();
+        });
+      },
+      pauseToasts({ prop }) {
+        prop("store").pause();
+      },
+      resumeToasts({ prop }) {
+        prop("store").resume();
+      },
+      expandToasts({ prop }) {
+        prop("store").expand();
+      },
+      collapseToasts({ prop }) {
+        prop("store").collapse();
+      },
+      removeToast({ prop, event }) {
+        prop("store").remove(event.id);
+      },
+      removeHeight({ event, context: context2 }) {
+        if ((event == null ? void 0 : event.id) == null) return;
+        queueMicrotask(() => {
+          context2.set("heights", (heights) => heights.filter((height) => height.id !== event.id));
+        });
+      },
+      collapsedIfEmpty({ send, computed }) {
+        if (!computed("overlap") || computed("count") > 1) return;
+        send({ type: "REGION.OVERLAP" });
+      },
+      setLastFocusedEl({ refs, event }) {
+        if (refs.get("isFocusWithin") || !event.target) return;
+        refs.set("isFocusWithin", true);
+        refs.set("lastFocusedEl", event.target);
+      },
+      restoreLastFocusedEl({ refs }) {
+        var _a;
+        if (!refs.get("lastFocusedEl")) return;
+        (_a = refs.get("lastFocusedEl")) == null ? void 0 : _a.focus({ preventScroll: true });
+        refs.set("lastFocusedEl", null);
+        refs.set("isFocusWithin", false);
+      },
+      clearLastFocusedEl({ refs }) {
+        var _a;
+        if (!refs.get("lastFocusedEl")) return;
+        (_a = refs.get("lastFocusedEl")) == null ? void 0 : _a.focus({ preventScroll: true });
+        refs.set("lastFocusedEl", null);
+        refs.set("isFocusWithin", false);
+      }
+    }
+  }
+});
+function connect(service, normalize) {
+  const { state, send, prop, scope, context: context2, computed } = service;
+  const visible = state.hasTag("visible");
+  const paused = state.hasTag("paused");
+  const mounted = context2.get("mounted");
+  const frontmost = computed("frontmost");
+  const placement = prop("parent").computed("placement");
+  const type = prop("type");
+  const stacked = prop("stacked");
+  const title = prop("title");
+  const description = prop("description");
+  const action = prop("action");
+  const [side, align = "center"] = placement.split("-");
+  return {
+    type,
+    title,
+    description,
+    placement,
+    visible,
+    paused,
+    closable: !!prop("closable"),
+    pause() {
+      send({ type: "PAUSE" });
+    },
+    resume() {
+      send({ type: "RESUME" });
+    },
+    dismiss() {
+      send({ type: "DISMISS", src: "programmatic" });
+    },
+    getRootProps() {
+      return normalize.element({
+        ...parts.root.attrs,
+        dir: prop("dir"),
+        id: getRootId(scope),
+        "data-state": visible ? "open" : "closed",
+        "data-type": type,
+        "data-placement": placement,
+        "data-align": align,
+        "data-side": side,
+        "data-mounted": dataAttr(mounted),
+        "data-paused": dataAttr(paused),
+        "data-first": dataAttr(frontmost),
+        "data-sibling": dataAttr(!frontmost),
+        "data-stack": dataAttr(stacked),
+        "data-overlap": dataAttr(!stacked),
+        role: "status",
+        "aria-atomic": "true",
+        "aria-describedby": description ? getDescriptionId(scope) : void 0,
+        "aria-labelledby": title ? getTitleId(scope) : void 0,
+        tabIndex: 0,
+        style: getPlacementStyle(service, visible),
+        onKeyDown(event) {
+          if (event.defaultPrevented) return;
+          if (event.key == "Escape") {
+            send({ type: "DISMISS", src: "keyboard" });
+            event.preventDefault();
+          }
+        }
+      });
+    },
+    /* Leave a ghost div to avoid setting hover to false when transitioning out */
+    getGhostBeforeProps() {
+      return normalize.element({
+        "data-ghost": "before",
+        style: getGhostBeforeStyle(service, visible)
+      });
+    },
+    /* Needed to avoid setting hover to false when in between toasts */
+    getGhostAfterProps() {
+      return normalize.element({
+        "data-ghost": "after",
+        style: getGhostAfterStyle()
+      });
+    },
+    getTitleProps() {
+      return normalize.element({
+        ...parts.title.attrs,
+        id: getTitleId(scope)
+      });
+    },
+    getDescriptionProps() {
+      return normalize.element({
+        ...parts.description.attrs,
+        id: getDescriptionId(scope)
+      });
+    },
+    getActionTriggerProps() {
+      return normalize.button({
+        ...parts.actionTrigger.attrs,
+        type: "button",
+        onClick(event) {
+          var _a;
+          if (event.defaultPrevented) return;
+          (_a = action == null ? void 0 : action.onClick) == null ? void 0 : _a.call(action);
+          send({ type: "DISMISS", src: "user" });
+        }
+      });
+    },
+    getCloseTriggerProps() {
+      return normalize.button({
+        id: getCloseTriggerId(scope),
+        ...parts.closeTrigger.attrs,
+        type: "button",
+        "aria-label": "Dismiss notification",
+        onClick(event) {
+          if (event.defaultPrevented) return;
+          send({ type: "DISMISS", src: "user" });
+        }
+      });
+    }
+  };
+}
+var { not } = createGuards();
+var machine = createMachine({
+  props({ props }) {
+    ensureProps(props, ["id", "type", "parent", "removeDelay"], "toast");
+    return {
+      closable: true,
+      ...props,
+      duration: getToastDuration(props.duration, props.type)
+    };
+  },
+  initialState({ prop }) {
+    const persist = prop("type") === "loading" || prop("duration") === Infinity;
+    return persist ? "visible:persist" : "visible";
+  },
+  context({ prop, bindable }) {
+    return {
+      remainingTime: bindable(() => ({
+        defaultValue: getToastDuration(prop("duration"), prop("type"))
+      })),
+      createdAt: bindable(() => ({
+        defaultValue: Date.now()
+      })),
+      mounted: bindable(() => ({
+        defaultValue: false
+      })),
+      initialHeight: bindable(() => ({
+        defaultValue: 0
+      }))
+    };
+  },
+  refs() {
+    return {
+      closeTimerStartTime: Date.now(),
+      lastCloseStartTimerStartTime: 0
+    };
+  },
+  computed: {
+    zIndex: ({ prop }) => {
+      const toasts = prop("parent").context.get("toasts");
+      const index2 = toasts.findIndex((toast2) => toast2.id === prop("id"));
+      return toasts.length - index2;
+    },
+    height: ({ prop }) => {
+      const heights = prop("parent").context.get("heights");
+      const height = heights.find((height2) => height2.id === prop("id"));
+      return (height == null ? void 0 : height.height) ?? 0;
+    },
+    heightIndex: ({ prop }) => {
+      const heights = prop("parent").context.get("heights");
+      return heights.findIndex((height) => height.id === prop("id"));
+    },
+    frontmost: ({ prop }) => prop("index") === 0,
+    heightBefore: ({ prop }) => {
+      const heights = prop("parent").context.get("heights");
+      const heightIndex = heights.findIndex((height) => height.id === prop("id"));
+      return heights.reduce((prev, curr, reducerIndex) => {
+        if (reducerIndex >= heightIndex) return prev;
+        return prev + curr.height;
+      }, 0);
+    },
+    shouldPersist: ({ prop }) => prop("type") === "loading" || prop("duration") === Infinity
+  },
+  watch({ track, prop, send }) {
+    track([() => prop("message")], () => {
+      const message = prop("message");
+      if (message) send({ type: message, src: "programmatic" });
+    });
+    track([() => prop("type"), () => prop("duration")], () => {
+      send({ type: "UPDATE" });
+    });
+  },
+  on: {
+    UPDATE: [
+      {
+        guard: "shouldPersist",
+        target: "visible:persist",
+        actions: ["resetCloseTimer"]
+      },
+      {
+        target: "visible:updating",
+        actions: ["resetCloseTimer"]
+      }
+    ],
+    MEASURE: {
+      actions: ["measureHeight"]
+    }
+  },
+  entry: ["setMounted", "measureHeight", "invokeOnVisible"],
+  effects: ["trackHeight"],
+  states: {
+    "visible:updating": {
+      tags: ["visible", "updating"],
+      effects: ["waitForNextTick"],
+      on: {
+        SHOW: {
+          target: "visible"
+        }
+      }
+    },
+    "visible:persist": {
+      tags: ["visible", "paused"],
+      on: {
+        RESUME: {
+          guard: not("isLoadingType"),
+          target: "visible",
+          actions: ["setCloseTimer"]
+        },
+        DISMISS: {
+          target: "dismissing"
+        }
+      }
+    },
+    visible: {
+      tags: ["visible"],
+      effects: ["waitForDuration"],
+      on: {
+        DISMISS: {
+          target: "dismissing"
+        },
+        PAUSE: {
+          target: "visible:persist",
+          actions: ["syncRemainingTime"]
+        }
+      }
+    },
+    dismissing: {
+      entry: ["invokeOnDismiss"],
+      effects: ["waitForRemoveDelay"],
+      on: {
+        REMOVE: {
+          target: "unmounted",
+          actions: ["notifyParentToRemove"]
+        }
+      }
+    },
+    unmounted: {
+      entry: ["invokeOnUnmount"]
+    }
+  },
+  implementations: {
+    effects: {
+      waitForRemoveDelay({ prop, send }) {
+        return setRafTimeout(() => {
+          send({ type: "REMOVE", src: "timer" });
+        }, prop("removeDelay"));
+      },
+      waitForDuration({ send, context: context2, computed }) {
+        if (computed("shouldPersist")) return;
+        return setRafTimeout(() => {
+          send({ type: "DISMISS", src: "timer" });
+        }, context2.get("remainingTime"));
+      },
+      waitForNextTick({ send }) {
+        return setRafTimeout(() => {
+          send({ type: "SHOW", src: "timer" });
+        }, 0);
+      },
+      trackHeight({ scope, prop }) {
+        let cleanup;
+        raf$2(() => {
+          const rootEl = getRootEl(scope);
+          if (!rootEl) return;
+          const syncHeight = () => {
+            const originalHeight = rootEl.style.height;
+            rootEl.style.height = "auto";
+            const height = rootEl.getBoundingClientRect().height;
+            rootEl.style.height = originalHeight;
+            const item = { id: prop("id"), height };
+            setHeight(prop("parent"), item);
+          };
+          const win = scope.getWin();
+          const observer = new win.MutationObserver(syncHeight);
+          observer.observe(rootEl, {
+            childList: true,
+            subtree: true,
+            characterData: true
+          });
+          cleanup = () => observer.disconnect();
+        });
+        return () => cleanup == null ? void 0 : cleanup();
+      }
+    },
+    guards: {
+      isLoadingType: ({ prop }) => prop("type") === "loading",
+      shouldPersist: ({ computed }) => computed("shouldPersist")
+    },
+    actions: {
+      setMounted({ context: context2 }) {
+        raf$2(() => {
+          context2.set("mounted", true);
+        });
+      },
+      measureHeight({ scope, prop, context: context2 }) {
+        queueMicrotask(() => {
+          const rootEl = getRootEl(scope);
+          if (!rootEl) return;
+          const originalHeight = rootEl.style.height;
+          rootEl.style.height = "auto";
+          const height = rootEl.getBoundingClientRect().height;
+          rootEl.style.height = originalHeight;
+          context2.set("initialHeight", height);
+          const item = { id: prop("id"), height };
+          setHeight(prop("parent"), item);
+        });
+      },
+      setCloseTimer({ refs }) {
+        refs.set("closeTimerStartTime", Date.now());
+      },
+      resetCloseTimer({ context: context2, refs, prop }) {
+        refs.set("closeTimerStartTime", Date.now());
+        context2.set("remainingTime", getToastDuration(prop("duration"), prop("type")));
+      },
+      syncRemainingTime({ context: context2, refs }) {
+        context2.set("remainingTime", (prev) => {
+          const closeTimerStartTime = refs.get("closeTimerStartTime");
+          const elapsedTime = Date.now() - closeTimerStartTime;
+          refs.set("lastCloseStartTimerStartTime", Date.now());
+          return prev - elapsedTime;
+        });
+      },
+      notifyParentToRemove({ prop }) {
+        const parent = prop("parent");
+        parent.send({ type: "TOAST.REMOVE", id: prop("id") });
+      },
+      invokeOnDismiss({ prop, event }) {
+        var _a;
+        (_a = prop("onStatusChange")) == null ? void 0 : _a({ status: "dismissing", src: event.src });
+      },
+      invokeOnUnmount({ prop }) {
+        var _a;
+        (_a = prop("onStatusChange")) == null ? void 0 : _a({ status: "unmounted" });
+      },
+      invokeOnVisible({ prop }) {
+        var _a;
+        (_a = prop("onStatusChange")) == null ? void 0 : _a({ status: "visible" });
+      }
+    }
+  }
+});
+function setHeight(parent, item) {
+  const { id, height } = item;
+  parent.context.set("heights", (prev) => {
+    const alreadyExists = prev.find((i) => i.id === id);
+    if (!alreadyExists) {
+      return [{ id, height }, ...prev];
+    } else {
+      return prev.map((i) => i.id === id ? { ...i, height } : i);
+    }
+  });
+}
+var withDefaults = (options, defaults2) => {
+  return { ...defaults2, ...options };
+};
+function createToastStore(props) {
+  const attrs = withDefaults(props, {
+    placement: "bottom",
+    overlap: false,
+    max: 24,
+    gap: 16,
+    offsets: "1rem",
+    hotkey: ["altKey", "KeyT"],
+    removeDelay: 200,
+    pauseOnPageIdle: true
+  });
+  let subscribers = [];
+  let toasts = [];
+  let dismissedToasts = /* @__PURE__ */ new Set();
+  const subscribe2 = (subscriber) => {
+    subscribers.push(subscriber);
+    return () => {
+      const index2 = subscribers.indexOf(subscriber);
+      subscribers.splice(index2, 1);
+    };
+  };
+  const publish = (data) => {
+    subscribers.forEach((subscriber) => subscriber(data));
+    return data;
+  };
+  const addToast = (data) => {
+    if (toasts.length >= attrs.max) return;
+    publish(data);
+    toasts.unshift(data);
+  };
+  const create = (data) => {
+    const id = data.id ?? `toast:${uuid()}`;
+    const exists = toasts.find((toast2) => toast2.id === id);
+    if (dismissedToasts.has(id)) dismissedToasts.delete(id);
+    if (exists) {
+      toasts = toasts.map((toast2) => {
+        if (toast2.id === id) {
+          return publish({ ...toast2, ...data, id });
+        }
+        return toast2;
+      });
+    } else {
+      addToast({
+        id,
+        duration: attrs.duration,
+        removeDelay: attrs.removeDelay,
+        type: "info",
+        ...data,
+        stacked: !attrs.overlap,
+        gap: attrs.gap
+      });
+    }
+    return id;
+  };
+  const remove = (id) => {
+    dismissedToasts.add(id);
+    if (!id) {
+      toasts.forEach((toast2) => {
+        subscribers.forEach((subscriber) => subscriber({ id: toast2.id, dismiss: true }));
+      });
+      toasts = [];
+    } else {
+      subscribers.forEach((subscriber) => subscriber({ id, dismiss: true }));
+      toasts = toasts.filter((toast2) => toast2.id !== id);
+    }
+    return id;
+  };
+  const error = (data) => {
+    return create({ ...data, type: "error" });
+  };
+  const success = (data) => {
+    return create({ ...data, type: "success" });
+  };
+  const info = (data) => {
+    return create({ ...data, type: "info" });
+  };
+  const warning = (data) => {
+    return create({ ...data, type: "warning" });
+  };
+  const loading = (data) => {
+    return create({ ...data, type: "loading" });
+  };
+  const getVisibleToasts = () => {
+    return toasts.filter((toast2) => !dismissedToasts.has(toast2.id));
+  };
+  const getCount = () => {
+    return toasts.length;
+  };
+  const promise = (promise2, options, shared = {}) => {
+    if (!options) return;
+    let id = void 0;
+    if (options.loading !== void 0) {
+      id = create({
+        ...shared,
+        ...options.loading,
+        promise: promise2,
+        type: "loading"
+      });
+    }
+    let removable = id !== void 0;
+    let result;
+    const prom = runIfFn(promise2).then(async (response) => {
+      result = ["resolve", response];
+      if (isHttpResponse(response) && !response.ok) {
+        removable = false;
+        const errorOptions = runIfFn(options.error, `HTTP Error! status: ${response.status}`);
+        create({ ...shared, ...errorOptions, id, type: "error" });
+      } else if (options.success !== void 0) {
+        removable = false;
+        const successOptions = runIfFn(options.success, response);
+        create({ ...shared, ...successOptions, id, type: "success" });
+      }
+    }).catch(async (error2) => {
+      result = ["reject", error2];
+      if (options.error !== void 0) {
+        removable = false;
+        const errorOptions = runIfFn(options.error, error2);
+        create({ ...shared, ...errorOptions, id, type: "error" });
+      }
+    }).finally(() => {
+      var _a;
+      if (removable) {
+        remove(id);
+        id = void 0;
+      }
+      (_a = options.finally) == null ? void 0 : _a.call(options);
+    });
+    const unwrap = () => new Promise(
+      (resolve, reject) => prom.then(() => result[0] === "reject" ? reject(result[1]) : resolve(result[1])).catch(reject)
+    );
+    return { id, unwrap };
+  };
+  const update2 = (id, data) => {
+    return create({ id, ...data });
+  };
+  const pause = (id) => {
+    if (id != null) {
+      toasts = toasts.map((toast2) => {
+        if (toast2.id === id) return publish({ ...toast2, message: "PAUSE" });
+        return toast2;
+      });
+    } else {
+      toasts = toasts.map((toast2) => publish({ ...toast2, message: "PAUSE" }));
+    }
+  };
+  const resume = (id) => {
+    if (id != null) {
+      toasts = toasts.map((toast2) => {
+        if (toast2.id === id) return publish({ ...toast2, message: "RESUME" });
+        return toast2;
+      });
+    } else {
+      toasts = toasts.map((toast2) => publish({ ...toast2, message: "RESUME" }));
+    }
+  };
+  const dismiss = (id) => {
+    if (id != null) {
+      toasts = toasts.map((toast2) => {
+        if (toast2.id === id) return publish({ ...toast2, message: "DISMISS" });
+        return toast2;
+      });
+    } else {
+      toasts = toasts.map((toast2) => publish({ ...toast2, message: "DISMISS" }));
+    }
+  };
+  const isVisible = (id) => {
+    return !dismissedToasts.has(id) && !!toasts.find((toast2) => toast2.id === id);
+  };
+  const isDismissed = (id) => {
+    return dismissedToasts.has(id);
+  };
+  const expand = () => {
+    toasts = toasts.map((toast2) => publish({ ...toast2, stacked: true }));
+  };
+  const collapse = () => {
+    toasts = toasts.map((toast2) => publish({ ...toast2, stacked: false }));
+  };
+  return {
+    attrs,
+    subscribe: subscribe2,
+    create,
+    update: update2,
+    remove,
+    dismiss,
+    error,
+    success,
+    info,
+    warning,
+    loading,
+    getVisibleToasts,
+    getCount,
+    promise,
+    pause,
+    resume,
+    isVisible,
+    isDismissed,
+    expand,
+    collapse
+  };
+}
+var isHttpResponse = (data) => {
+  return data && typeof data === "object" && "ok" in data && typeof data.ok === "boolean" && "status" in data && typeof data.status === "number";
+};
+var group = {
+  connect: groupConnect,
+  machine: groupMachine
+};
+const createToaster = (props) => {
+  return createToastStore(props);
+};
+const [ToastProvider$1, useToastContext] = createContext({
+  name: "ToastContext",
+  hookName: "useToastContext",
+  providerName: "<ToastProvider />"
+});
+const ToastActionTrigger = React.forwardRef((props, ref) => {
+  const toast2 = useToastContext();
+  const mergedProps = mergeProps(toast2.getActionTriggerProps(), props);
+  return /* @__PURE__ */ jsxRuntime.jsx(ark.button, { ...mergedProps, ref });
+});
+ToastActionTrigger.displayName = "ToastActionTrigger";
+const ToastDescription = React.forwardRef((props, ref) => {
+  const toast2 = useToastContext();
+  const mergedProps = mergeProps(toast2.getDescriptionProps(), props);
+  return /* @__PURE__ */ jsxRuntime.jsx(ark.div, { ...mergedProps, ref });
+});
+ToastDescription.displayName = "ToastDescription";
+const ToastRoot = React.forwardRef((props, ref) => {
+  const toast2 = useToastContext();
+  const mergedProps = mergeProps(toast2.getRootProps(), props);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...mergedProps, ref, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { ...toast2.getGhostBeforeProps() }),
+    props.children,
+    /* @__PURE__ */ jsxRuntime.jsx("div", { ...toast2.getGhostAfterProps() })
+  ] });
+});
+ToastRoot.displayName = "ToastRoot";
+const Toaster = React.forwardRef((props, ref) => {
+  const { toaster, children, ...localProps } = props;
+  const locale = useLocaleContext();
+  const env = useEnvironmentContext();
+  const service = useMachine(group.machine, {
+    store: toaster,
+    id: React.useId(),
+    dir: locale == null ? void 0 : locale.dir,
+    getRootNode: () => env == null ? void 0 : env.getDocument()
+  });
+  const api = group.connect(service, normalizeProps);
+  const mergedProps = mergeProps(api.getGroupProps(), localProps);
+  return /* @__PURE__ */ jsxRuntime.jsx(ark.div, { ...mergedProps, ref, children: api.getToasts().map((toast2, index2) => /* @__PURE__ */ jsxRuntime.jsx(ToastActor, { value: toast2, parent: service, index: index2, children: (ctx2) => children(ctx2) }, toast2.id)) });
+});
+Toaster.displayName = "Toaster";
+const ToastActor = (props) => {
+  const localProps = {
+    ...props.value,
+    parent: props.parent,
+    index: props.index
+  };
+  const service = useMachine(machine, { ...localProps });
+  const api = connect(service, normalizeProps);
+  return /* @__PURE__ */ jsxRuntime.jsx(ToastProvider$1, { value: api, children: props.children(props.value) });
+};
+ToastActor.displayName = "ToastActor";
+const spinnerRecipe = cva({
+  base: {
+    display: "inline-block",
+    borderWidth: "md",
+    borderStyle: "solid",
+    borderStartEndRadius: "full",
+    borderEndStartRadius: "full",
+    borderRadius: "full",
+    animation: "spin",
+    animationDuration: "slowest"
+  },
+  defaultVariants: {
+    size: "md"
+  },
+  variants: {
+    size: {
+      sm: { width: 4, height: 4 },
+      md: { width: 6, height: 6 },
+      lg: { width: 12, height: 12 },
+      xl: { width: 24, height: 24 }
+    }
+  }
+});
+const Spinner = React.forwardRef((props, ref) => {
+  const StyledSpinner = styled(ark.div, spinnerRecipe);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    StyledSpinner,
+    {
+      ref,
+      ...props,
+      css: {
+        borderColor: "inherit",
+        borderBottomColor: "transparent",
+        borderLeftColor: "transparent",
+        ...props.css
+      }
+    }
+  );
+});
+Spinner.displayName = "Spinner";
+const buttonRecipe = cva({
+  base: {
+    alignItems: "center",
+    appearance: "none",
+    cursor: "pointer",
+    display: "inline-flex",
+    fontWeight: "semibold",
+    isolation: "isolate",
+    minWidth: "0",
+    justifyContent: "center",
+    outline: "none",
+    position: "relative",
+    transitionDuration: "normal",
+    transitionProperty: "background, border-color, color, box-shadow",
+    transitionTimingFunction: "default",
+    userSelect: "none",
+    verticalAlign: "middle",
+    whiteSpace: "nowrap",
+    _hidden: {
+      display: "none"
+    }
+  },
+  defaultVariants: {
+    variant: "solid",
+    size: "md",
+    radius: "full",
+    color: "neutral"
+  },
+  variants: {
+    variant: {
+      solid: {
+        _disabled: {
+          background: "background.neutral.disabled",
+          color: "content.neutral.disabled",
+          cursor: "not-allowed",
+          pointerEvents: "none"
+        }
+      },
+      outline: {
+        background: "transparent",
+        borderWidth: "1px",
+        borderStyle: "solid",
+        borderColor: "border.neutral.default",
+        _disabled: {
+          background: "transparent",
+          color: "content.neutral.disabled",
+          borderColor: "border.neutral.disabled",
+          cursor: "not-allowed",
+          pointerEvents: "none"
+        }
+      },
+      light: {
+        background: "transparent",
+        _disabled: {
+          background: "transparent",
+          color: "content.neutral.disabled",
+          cursor: "not-allowed",
+          pointerEvents: "none"
+        }
+      }
+    },
+    color: {
+      neuroid_primary: {},
+      neuroid_secondary: {},
+      zoltarina_primary: {},
+      zoltarina_secondary: {},
+      heyd_primary: {},
+      heyd_secondary: {},
+      heybee_primary: {},
+      neutral: {},
+      danger: {},
+      warning: {},
+      success: {},
+      informative: {}
+    },
+    size: {
+      xs: {
+        h: 7,
+        textStyle: "label.sm",
+        px: "8px",
+        gap: 1,
+        "& :where(svg)": {
+          width: "20px",
+          height: "20px"
+        }
+      },
+      sm: {
+        h: 8,
+        textStyle: "label.sm",
         px: "16px",
         gap: 1,
         "& :where(svg)": {
@@ -4708,7 +5845,7 @@ const createStyleContext = (recipe) => {
     };
     return StyledComponent;
   };
-  const withProvider = (Component, slot, options) => {
+  const withProvider2 = (Component, slot, options) => {
     const StyledComponent = styled(
       Component,
       {},
@@ -4735,24 +5872,21 @@ const createStyleContext = (recipe) => {
   };
   return {
     withRootProvider: withRootProvider2,
-    withProvider,
+    withProvider: withProvider2,
     withContext: withContext2
   };
 };
 const dialogRecipe = sva({
   className: "dialog",
-  slots: [...anatomy$1.keys(), "header", "footer", "body"],
+  slots: [...anatomy$2.keys(), "header", "footer", "body"],
   base: {
     backdrop: {
-      backdropFilter: "blur(4px)",
-      background: {
-        _light: "white.100A",
-        _dark: "black.100A"
-      },
+      backdropFilter: "blur(3px)",
+      background: "shadow.overlay",
       height: "100vh",
-      left: "0",
       position: "fixed",
       top: "0",
+      left: "0",
       width: "100vw",
       zIndex: "overlay",
       _open: {
@@ -4826,16 +5960,16 @@ const dialogRecipe = sva({
     }
   }
 });
-const { withRootProvider: withRootProvider$1, withContext: withContext$1 } = createStyleContext(dialogRecipe);
-const Root$1 = withRootProvider$1(DialogRoot);
-const Backdrop$1 = withContext$1(DialogBackdrop, "backdrop");
-const Trigger$1 = withContext$1(DialogTrigger, "trigger");
-const Content = withContext$1(DialogContent, "content");
-const Title = withContext$1(DialogTitle, "title");
-const Description$1 = withContext$1(DialogDescription, "description");
-const Positioner = withContext$1(DialogPositioner, "positioner");
-const Header = withContext$1(ark.header, "header");
-const Footer = withContext$1(
+const { withRootProvider: withRootProvider$1, withContext: withContext$2 } = createStyleContext(dialogRecipe);
+const Root$2 = withRootProvider$1(DialogRoot);
+const Backdrop$1 = withContext$2(DialogBackdrop, "backdrop");
+const Trigger$1 = withContext$2(DialogTrigger, "trigger");
+const Content$1 = withContext$2(DialogContent, "content");
+const Title = withContext$2(DialogTitle, "title");
+const Description$1 = withContext$2(DialogDescription, "description");
+const Positioner = withContext$2(DialogPositioner, "positioner");
+const Header = withContext$2(ark.header, "header");
+const Footer = withContext$2(
   ({ orientation = "horizontal", className, ...props }) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
       ark.footer,
@@ -4853,13 +5987,13 @@ const Footer = withContext$1(
   },
   "footer"
 );
-const Body = withContext$1(ark.main, "body");
-const CloseTrigger = withContext$1(DialogCloseTrigger, "closeTrigger");
+const Body = withContext$2(ark.main, "body");
+const CloseTrigger = withContext$2(DialogCloseTrigger, "closeTrigger");
 const Dialog = {
-  Root: Root$1,
+  Root: Root$2,
   Backdrop: Backdrop$1,
   Trigger: Trigger$1,
-  Content,
+  Content: Content$1,
   Title,
   Description: Description$1,
   Positioner,
@@ -8705,7 +9839,7 @@ BottomSheetFrame.displayName = "BottomSheetFrame";
 Backdrop.displayName = "Backdrop";
 const navigationRecipe = sva({
   className: "navigation",
-  slots: anatomy.keys(),
+  slots: anatomy$1.keys(),
   base: {
     root: {
       bg: "surface.layer_1",
@@ -8746,18 +9880,18 @@ const navigationRecipe = sva({
     }
   }
 });
-const { withRootProvider, withContext } = createStyleContext(navigationRecipe);
-const Root = withRootProvider(TabsRoot);
-const Trigger = withContext(
+const { withRootProvider, withContext: withContext$1 } = createStyleContext(navigationRecipe);
+const Root$1 = withRootProvider(TabsRoot);
+const Trigger = withContext$1(
   ({ icon, label, ...props }) => /* @__PURE__ */ jsxRuntime.jsxs(TabTrigger, { ...props, children: [
     icon,
     label
   ] }),
   "trigger"
 );
-const List = withContext(TabList, "list");
+const List = withContext$1(TabList, "list");
 const Navigation = {
-  Root,
+  Root: Root$1,
   Item: Trigger,
   List
 };
@@ -8916,21 +10050,43 @@ const Tag = React.forwardRef(({ imageSrc, text, onDeleteClick, ...rest }, ref) =
       styled.img,
       {
         src: imageSrc,
-        width: 8,
-        height: 8,
-        className: css$1({ borderRadius: "full", overflow: "hidden" }),
+        className: css$1({ borderRadius: "full", overflow: "hidden", width: 8, height: 8 }),
         alt: "avatar thumbnail"
       }
-    ) : null,
-    text,
-    onDeleteClick ? /* @__PURE__ */ jsxRuntime.jsx(P, { size: 12, onClick: onDeleteClick, cursor: "pointer" }) : null
-  ] });
-});
-Tag.displayName = "Tag";
-const inputSlotRecipe = sva({
-  className: "input",
-  slots: ["requiredStar", "description", "textLengthIndicator"],
-  base: {
+    ) : null,
+    text,
+    onDeleteClick ? /* @__PURE__ */ jsxRuntime.jsx(P, { size: 12, onClick: onDeleteClick, cursor: "pointer" }) : null
+  ] });
+});
+Tag.displayName = "Tag";
+const inputRecipe = sva({
+  className: "input",
+  slots: ["inputContainer", "requiredStar", "description", "label", "textLengthIndicator"],
+  base: {
+    inputContainer: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      justifyContent: "center",
+      width: "100%",
+      textStyle: "body.md",
+      cursor: "text",
+      color: "content.neutral.bold",
+      gap: 1,
+      borderStyle: "solid",
+      border: 1,
+      outline: "none",
+      p: 2,
+      "& input, & textarea": {
+        outline: "none",
+        width: "100%",
+        height: "100%"
+      },
+      _groupDisabled: {
+        cursor: "not-allowed",
+        color: "content.neutral.disabled"
+      }
+    },
     requiredStar: {
       color: "content.danger.default",
       paddingLeft: 1
@@ -8942,196 +10098,147 @@ const inputSlotRecipe = sva({
       width: "100%",
       textAlign: "start"
     },
+    label: {
+      textStyle: "label.sm",
+      textAlign: "start",
+      width: "100%",
+      display: "inline-block"
+    },
     textLengthIndicator: {
       display: "inline-block",
       width: "100%",
       textAlign: "end",
       paddingRight: 1,
       marginTop: -0.5,
-      textStyle: "label.sm"
-    }
-  }
-});
-const inputRecipe = cva({
-  base: {
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "center",
-    justifyContent: "center",
-    width: "100%",
-    textStyle: "body.md",
-    cursor: "text",
-    color: "content.neutral.bold",
-    gap: 1,
-    borderStyle: "solid",
-    border: 1,
-    outline: "none",
-    p: 2,
-    "& textarea, & input": {
-      outline: "none",
-      width: "100%",
-      height: "100%"
+      textStyle: "label.sm",
+      color: "content.neutral.subtlest",
+      _groupDisabled: { color: "content.neutral.disabled" }
     }
   },
   variants: {
     isTextArea: {
       true: {
-        minHeight: "56px",
-        "& textarea": {
-          background: "transparent",
-          height: "100%",
-          resize: "none",
-          overflowY: "auto"
+        inputContainer: {
+          minHeight: "56px",
+          "& textarea": {
+            background: "transparent",
+            resize: "none",
+            overflowY: "auto"
+          }
         }
       },
       false: {
-        minHeight: "48px",
-        maxHeight: "60px"
+        inputContainer: {
+          minHeight: "48px",
+          maxHeight: "60px"
+        }
       }
     },
     variant: {
       solid: {
-        borderColor: "transparent"
+        inputContainer: {
+          borderColor: "transparent",
+          _focusWithin: {
+            borderColor: "border.neutral.default"
+          }
+        }
       },
       line: {
-        background: "transparent"
+        inputContainer: {
+          background: "transparent",
+          border: 1,
+          borderColor: "border.neutral.subtle",
+          _focusWithin: {
+            borderColor: "border.neutral.default"
+          },
+          _groupDisabled: {
+            borderColor: "border.neutral.disabled"
+          }
+        }
       }
     },
     color: {
       alpha: {
-        "&::placeholder": {
-          color: "content.static.white.subtlest"
+        inputContainer: {
+          _placeholder: {
+            color: "content.static.white.subtlest",
+            _groupDisabled: {
+              color: "content.static.white.disabled"
+            }
+          }
+        },
+        label: {
+          color: "content.neutral.default",
+          _groupDisabled: {
+            color: "content.neutral.disabled"
+          }
         }
       },
       neutral: {
-        "&::placeholder": {
-          color: "content.neutral.subtlest"
+        inputContainer: {
+          _placeholder: {
+            color: "content.neutral.subtlest",
+            _groupDisabled: {
+              color: "content.neutral.disabled"
+            }
+          }
+        },
+        label: {
+          color: "content.neutral.subtle",
+          _groupDisabled: {
+            color: "content.neutral.disabled"
+          }
         }
       }
     },
     radius: {
       md: {
-        borderRadius: 8,
-        px: 2
+        inputContainer: {
+          borderRadius: 8,
+          px: 2
+        }
       },
       lg: {
-        borderRadius: 16,
-        px: 2
+        inputContainer: {
+          borderRadius: 16,
+          px: 2
+        }
       },
       full: {
-        borderRadius: 9999,
-        px: 4
+        inputContainer: {
+          borderRadius: 9999,
+          px: 4
+        }
       }
     },
-    state: {
-      // state: Input 컴포넌트 내부 로직, 외부 노출 X (외부에선 disabled만 제어)
-      default: {
-        color: "content.neutral.bold"
-      },
-      selected: {
-        color: "content.neutral.bold"
-      },
-      disabled: {
-        color: "content.neutral.disabled"
+    disabled: {
+      true: {
+        inputContainer: {
+          _groupDisabled: {}
+        }
       }
     }
   },
   compoundVariants: [
-    {
-      color: "alpha",
-      state: "disabled",
-      css: {
-        "&::placeholder": {
-          color: "content.static.white.disabled"
-        }
-      }
-    },
-    {
-      color: "neutral",
-      state: "disabled",
-      css: {
-        "&::placeholder": {
-          color: "content.neutral.disabled"
-        }
-      }
-    },
-    {
-      variant: "solid",
-      color: "alpha",
-      state: "default",
-      css: {
-        background: "black.500A"
-      }
-    },
-    {
-      variant: "solid",
-      color: "alpha",
-      state: "selected",
-      css: {
-        background: "black.500A",
-        border: 1,
-        borderColor: "border.neutral.default"
-      }
-    },
     {
       variant: "solid",
       color: "alpha",
-      state: "disabled",
-      css: {
-        background: "black.500A"
-      }
-    },
-    {
-      variant: "solid",
-      color: "neutral",
-      state: "default",
-      css: {
-        background: "background.neutral.default"
-      }
-    },
-    {
-      variant: "solid",
-      color: "neutral",
-      state: "selected",
       css: {
-        background: "background.neutral.default",
-        border: 1,
-        borderColor: "border.neutral.default"
+        inputContainer: {
+          background: "black.500A"
+        }
       }
     },
     {
       variant: "solid",
       color: "neutral",
-      state: "disabled",
-      css: {
-        background: "background.neutral.disabled"
-      }
-    },
-    {
-      variant: "line",
-      state: "default",
-      css: {
-        background: "transparent",
-        border: 1,
-        borderColor: "border.neutral.subtle"
-      }
-    },
-    {
-      variant: "line",
-      state: "selected",
-      css: {
-        background: "transparent",
-        border: 1,
-        borderColor: "border.neutral.default"
-      }
-    },
-    {
-      variant: "line",
-      state: "disabled",
       css: {
-        background: "transparent",
-        border: 1,
-        borderColor: "border.neutral.disabled"
+        inputContainer: {
+          background: "background.neutral.default",
+          _groupDisabled: {
+            background: "background.neutral.disabled"
+          }
+        }
       }
     }
   ],
@@ -9139,58 +10246,11 @@ const inputRecipe = cva({
     isTextArea: false,
     variant: "solid",
     color: "neutral",
-    state: "default",
-    radius: "md"
-  }
-});
-const labelRecipe = cva({
-  base: {
-    textStyle: "label.sm",
-    textAlign: "start",
-    width: "100%",
-    display: "inline-block"
-  },
-  variants: {
-    state: {
-      default: {},
-      selected: {},
-      disabled: {}
-    },
-    color: {
-      alpha: {
-        color: "content.static.white.bold"
-      },
-      neutral: {
-        color: "content.neutral.subtle"
-      }
-    },
-    radius: {
-      md: {},
-      lg: {},
-      full: {}
-    }
-  },
-  compoundVariants: [
-    {
-      state: "disabled",
-      css: {
-        color: "content.neutral.disabled"
-      }
-    }
-  ],
-  defaultVariants: {
-    color: "neutral",
-    state: "default",
     radius: "md"
   }
 });
-const StyledInputWrapper = styled(ark.div, inputRecipe);
-const StyledLabel$1 = styled(ark.label, labelRecipe);
-const RequiredStar = () => /* @__PURE__ */ jsxRuntime.jsx(ark.span, { className: inputSlotRecipe().requiredStar, "aria-hidden": "true", children: "*" });
-const Description = ({ children }) => /* @__PURE__ */ jsxRuntime.jsx(ark.span, { className: inputSlotRecipe().description, children });
 const Input = React.forwardRef(
   ({
-    value,
     required,
     disabled,
     label,
@@ -9202,74 +10262,59 @@ const Input = React.forwardRef(
     radius,
     onChange,
     className,
+    css: css2,
     ...rest
   }, ref) => {
-    const [state, setState] = React.useState(disabled ? "disabled" : "default");
-    React.useEffect(() => {
-      setState(disabled ? "disabled" : "default");
-    }, [disabled]);
-    const handleInputChange = (e) => {
+    const recipe = inputRecipe({
+      variant,
+      color,
+      radius
+    });
+    const innerRef = React.useRef(null);
+    const inputRef = ref || innerRef;
+    const handleInputChange = React.useCallback(
+      (e) => {
+        if (disabled) return;
+        const { value } = e.target;
+        e.target.value = value.slice(0, textLimit);
+        onChange == null ? void 0 : onChange(e);
+      },
+      [disabled, onChange, textLimit]
+    );
+    const handleContainerClick = React.useCallback(() => {
       if (disabled) return;
-      const value2 = e.target.value;
-      if (textLimit && value2.length > textLimit) return;
-      setState(value2 ? "selected" : "default");
-      onChange == null ? void 0 : onChange(e);
-    };
-    const Label = ({ visible, children }) => {
-      console.log("color", color);
-      return visible ? /* @__PURE__ */ jsxRuntime.jsxs(StyledLabel$1, { state, color, radius, children: [
-        children,
-        required && /* @__PURE__ */ jsxRuntime.jsx(RequiredStar, {})
-      ] }) : null;
-    };
-    return /* @__PURE__ */ jsxRuntime.jsxs(VStack$1, { gap: 1, children: [
+      if (inputRef.current) {
+        inputRef.current.focus();
+      }
+    }, [disabled, inputRef]);
+    const RequiredStar = React.useCallback(
+      () => /* @__PURE__ */ jsxRuntime.jsx("span", { className: recipe.requiredStar, "aria-hidden": "true", children: "*" }),
+      [recipe.requiredStar]
+    );
+    const Description2 = React.useCallback(
+      ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: recipe.description, children }),
+      [recipe.description]
+    );
+    const Label = React.useCallback(
+      ({ visible, children }) => {
+        return visible ? /* @__PURE__ */ jsxRuntime.jsxs("label", { className: recipe.label, children: [
+          children,
+          required && /* @__PURE__ */ jsxRuntime.jsx(RequiredStar, {})
+        ] }) : null;
+      },
+      [recipe.label, required, RequiredStar]
+    );
+    return /* @__PURE__ */ jsxRuntime.jsxs(VStack2, { gap: 1, className: "group", "data-disabled": disabled || void 0, children: [
       /* @__PURE__ */ jsxRuntime.jsx(Label, { visible: !!(label && labelPosition === "outside"), children: label }),
-      /* @__PURE__ */ jsxRuntime.jsxs(
-        StyledInputWrapper,
-        {
-          state,
-          variant,
-          color,
-          radius,
-          className: cx(css$1({ display: "flex", flexDirection: "column", gap: 1 }), className),
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(Label, { visible: !!(label && labelPosition === "inside"), children: label }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "input",
-              {
-                value,
-                disabled,
-                onFocus: () => !disabled && setState("selected"),
-                onBlur: () => !disabled && setState("default"),
-                onChange: handleInputChange,
-                ref,
-                ...rest
-              }
-            )
-          ]
-        }
-      ),
-      description && /* @__PURE__ */ jsxRuntime.jsx(Description, { children: description })
+      /* @__PURE__ */ jsxRuntime.jsxs(Stack2, { gap: 1, className: cx(recipe.inputContainer, className), onClick: handleContainerClick, css: css2, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Label, { visible: !!(label && labelPosition === "inside"), children: label }),
+        /* @__PURE__ */ jsxRuntime.jsx(styled.input, { ref: inputRef, disabled, onChange: handleInputChange, ...rest })
+      ] }),
+      description && /* @__PURE__ */ jsxRuntime.jsx(Description2, { children: description })
     ] });
   }
 );
 Input.displayName = "Input";
-const StyledTextAreaWrapper = styled(ark.div, inputRecipe);
-const StyledLabel = styled(ark.label, labelRecipe);
-const TextLengthIndicator = ({ count, limit, disabled }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    ark.span,
-    {
-      className: cx(
-        inputSlotRecipe().textLengthIndicator,
-        css$1({
-          color: disabled ? "content.neutral.disabled" : "content.neutral.subtlest"
-        })
-      ),
-      children: `${count}${limit ? ` / ${limit}` : ""}`
-    }
-  );
-};
 const Textarea = React.forwardRef(
   ({
     value,
@@ -9280,62 +10325,70 @@ const Textarea = React.forwardRef(
     labelPosition = "outside",
     textLimit,
     showTextCount = false,
-    isTextArea,
     color,
     radius,
     variant,
     onChange,
     className,
+    css: css2,
     ...rest
   }, ref) => {
-    const [state, setState] = React.useState(disabled ? "disabled" : "default");
-    React.useEffect(() => {
-      setState(disabled ? "disabled" : "default");
-    }, [disabled]);
-    const handleTextareaChange = (e) => {
+    const [count, setCount] = React.useState((value == null ? void 0 : value.toString().length) || 0);
+    const recipe = inputRecipe({
+      variant,
+      color,
+      radius,
+      isTextArea: true
+    });
+    const innerRef = React.useRef(null);
+    const inputRef = ref || innerRef;
+    const handleTextareaChange = React.useCallback(
+      (e) => {
+        if (disabled) return;
+        const { value: value2 } = e.target;
+        e.target.value = value2.slice(0, textLimit);
+        onChange == null ? void 0 : onChange(e);
+        if (showTextCount) setCount(value2.length);
+      },
+      [disabled, onChange, textLimit, showTextCount]
+    );
+    const handleContainerClick = React.useCallback(() => {
       if (disabled) return;
-      const value2 = e.target.value;
-      if (textLimit && value2.length > textLimit) return;
-      setState(value2 ? "selected" : "default");
-      onChange == null ? void 0 : onChange(e);
-      e.target.scrollTop = e.target.scrollHeight;
-    };
-    const Label = ({ visible, children }) => {
-      return visible ? /* @__PURE__ */ jsxRuntime.jsxs(StyledLabel, { state, color, radius, children: [
-        children,
-        required && /* @__PURE__ */ jsxRuntime.jsx(RequiredStar, {})
-      ] }) : null;
-    };
-    return /* @__PURE__ */ jsxRuntime.jsxs(VStack$1, { gap: 1, children: [
+      if (inputRef.current) {
+        inputRef.current.focus();
+      }
+    }, [disabled, inputRef]);
+    const RequiredStar = React.useCallback(
+      () => /* @__PURE__ */ jsxRuntime.jsx("span", { className: recipe.requiredStar, "aria-hidden": "true", children: "*" }),
+      [recipe.requiredStar]
+    );
+    const Description2 = React.useCallback(
+      ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: recipe.description, children }),
+      [recipe.description]
+    );
+    const Label = React.useCallback(
+      ({ visible, children }) => {
+        return visible ? /* @__PURE__ */ jsxRuntime.jsxs("label", { className: recipe.label, children: [
+          children,
+          required && /* @__PURE__ */ jsxRuntime.jsx(RequiredStar, {})
+        ] }) : null;
+      },
+      [recipe.label, required, RequiredStar]
+    );
+    const TextLengthIndicator = React.useCallback(
+      ({ count: count2, limit }) => {
+        return /* @__PURE__ */ jsxRuntime.jsx("span", { className: recipe.textLengthIndicator, children: `${count2}${limit ? ` / ${limit}` : ""}` });
+      },
+      [recipe.textLengthIndicator]
+    );
+    return /* @__PURE__ */ jsxRuntime.jsxs(VStack2, { gap: 1, className: "group", "data-disabled": disabled || void 0, children: [
       /* @__PURE__ */ jsxRuntime.jsx(Label, { visible: !!(label && labelPosition === "outside"), children: label }),
-      /* @__PURE__ */ jsxRuntime.jsxs(
-        StyledTextAreaWrapper,
-        {
-          isTextArea: true,
-          state,
-          color,
-          radius,
-          variant,
-          className: cx(css$1({ position: "relative", display: "flex", flexDirection: "column", gap: 1 }), className),
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(Label, { visible: !!(label && labelPosition === "inside"), children: label }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "textarea",
-              {
-                value,
-                disabled,
-                onChange: handleTextareaChange,
-                onFocus: () => !disabled && setState("selected"),
-                onBlur: () => !disabled && setState("default"),
-                ref,
-                ...rest
-              }
-            ),
-            showTextCount && /* @__PURE__ */ jsxRuntime.jsx(TextLengthIndicator, { count: value.length, limit: textLimit, disabled })
-          ]
-        }
-      ),
-      description && /* @__PURE__ */ jsxRuntime.jsx(Description, { children: description })
+      /* @__PURE__ */ jsxRuntime.jsxs(Stack2, { gap: 1, className: cx(recipe.inputContainer, className), onClick: handleContainerClick, css: css2, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Label, { visible: !!(label && labelPosition === "inside"), children: label }),
+        /* @__PURE__ */ jsxRuntime.jsx("textarea", { ref: inputRef, value, disabled, onChange: handleTextareaChange, ...rest }),
+        showTextCount && /* @__PURE__ */ jsxRuntime.jsx(TextLengthIndicator, { count, limit: textLimit })
+      ] }),
+      description && /* @__PURE__ */ jsxRuntime.jsx(Description2, { children: description })
     ] });
   }
 );
@@ -9424,7 +10477,7 @@ const keyframes = defineKeyframes({
     "100%": { transform: "rotate(360deg)" }
   }
 });
-var m = { colors: { content: { neutral: { bold: { value: { base: "{colors.neutral.0}", _dark: "{colors.neutral.1100}" } }, default: { value: { base: "{colors.neutral.300}", _dark: "{colors.neutral.1000}" } }, subtle: { value: { base: "{colors.neutral.600}", _dark: "{colors.neutral.900}" } }, subtlest: { value: { base: "{colors.neutral.900}", _dark: "{colors.neutral.500}" } }, disabled: { value: { base: "{colors.neutral.800}", _dark: "{colors.neutral.600}" } }, default_inverse: { value: { base: "{colors.neutral.1100}", _dark: "{colors.neutral.0}" } } }, neuroidPrimary: { default: { value: { base: "{colors.purple.500}", _dark: "{colors.purple.400}" } }, default_inverse: { value: { base: "{colors.purple.800}", _dark: "{colors.purple.800}" } } }, danger: { default: { value: { base: "{colors.red.600}", _dark: "{colors.red.400}" } } }, warning: { default: { value: { base: "{colors.orange.600}", _dark: "{colors.orange.400}" } } }, success: { default: { value: { base: "{colors.green.600}", _dark: "{colors.green.400}" } } }, informative: { default: { value: { base: "{colors.blue.600}", _dark: "{colors.blue.400}" } } }, zoltarinaPrimary: { default: { value: { base: "{colors.ohre.800}", _dark: "{colors.ohre.400}" } }, defult_inverse: { value: { base: "{colors.ohre.1000}", _dark: "{colors.ohre.1000}" } } }, heydPrimary: { default: { value: { base: "{colors.cyan.800}", _dark: "{colors.cyan.400}" } }, defult_inverse: { value: { base: "{colors.cyan.1000}", _dark: "{colors.cyan.1000}" } } }, static: { white: { bold: { value: { base: "{colors.neutral.1200}", _dark: "{colors.neutral.1200}" } }, default: { value: { base: "{colors.neutral.1050}", _dark: "{colors.neutral.1050}" } }, subtle: { value: { base: "{colors.neutral.1000}", _dark: "{colors.neutral.1000}" } }, subtlest: { value: { base: "{colors.neutral.900}", _dark: "{colors.neutral.900}" } }, disabled: { value: { base: "{colors.neutral.800}", _dark: "{colors.neutral.800}" } } }, black: { bold: { value: { base: "{colors.neutral.0}", _dark: "{colors.neutral.0}" } }, default: { value: { base: "{colors.neutral.200}", _dark: "{colors.neutral.200}" } }, subtle: { value: { base: "{colors.neutral.400}", _dark: "{colors.neutral.400}" } }, subtlest: { value: { base: "{colors.neutral.600}", _dark: "{colors.neutral.600}" } }, disabled: { value: { base: "{colors.neutral.800}", _dark: "{colors.neutral.800}" } } } }, heybeePrimary: { default: { value: { base: "{colors.yellow.800}", _dark: "{colors.yellow.500}" } }, default_inverse: { value: { base: "{colors.yellow.1000}", _dark: "{colors.yellow.1000}" } } } }, background: { neutral: { default: { value: { base: "{colors.neutral.1050}", _dark: "{colors.neutral.200}" } }, selected: { value: { base: "{colors.neutral.1000}", _dark: "{colors.neutral.300}" } }, disabled: { value: { base: "{colors.neutral.1000}", _dark: "{colors.neutral.400}" } } }, neuroidPrimary: { default: { value: { base: "{colors.purple.300}", _dark: "{colors.purple.600}" } }, selected: { value: { base: "{colors.purple.400}", _dark: "{colors.purple.700}" } } }, neuroidSecondary: { default: { value: { base: "{colors.purple.200}", _dark: "{colors.purple.300}" } }, selected: { value: { base: "{colors.purple.300}", _dark: "{colors.purple.400}" } } }, danger: { default: { value: { base: "{colors.red.300}", _dark: "{colors.red.700}" } }, selected: { value: { base: "{colors.red.400}", _dark: "{colors.red.800}" } } }, warning: { default: { value: { base: "{colors.orange.300}", _dark: "{colors.orange.700}" } }, selected: { value: { base: "{colors.orange.400}", _dark: "{colors.orange.800}" } } }, success: { default: { value: { base: "{colors.green.300}", _dark: "{colors.green.700}" } }, selected: { value: { base: "{colors.green.400}", _dark: "{colors.green.800}" } } }, informative: { default: { value: { base: "{colors.blue.300}", _dark: "{colors.blue.700}" } }, selected: { value: { base: "{colors.blue.400}", _dark: "{colors.blue.800}" } } }, zoltarinaPrimary: { default: { value: { base: "{colors.ohre.400}", _dark: "{colors.ohre.400}" } }, selected: { value: { base: "{colors.ohre.500}", _dark: "{colors.ohre.500}" } } }, zoltarinaSecondary: { default: { value: { base: "{colors.ohre.200}", _dark: "{colors.ohre.200}" } }, selected: { value: { base: "{colors.ohre.300}", _dark: "{colors.ohre.300}" } } }, heydPrimary: { default: { value: { base: "{colors.cyan.500}", _dark: "{colors.cyan.500}" } }, selected: { value: { base: "{colors.cyan.600}", _dark: "{colors.cyan.600}" } } }, heydSecondary: { default: { value: { base: "{colors.cyan.200}", _dark: "{colors.cyan.200}" } }, selected: { value: { base: "{colors.cyan.300}", _dark: "{colors.cyan.300}" } } }, static: { whiteAlpha: { bold: { value: { base: "{colors.white.700A}", _dark: "{colors.white.700A}" } }, default: { value: { base: "{colors.white.500A}", _dark: "{colors.white.500A}" } }, selected: { value: { base: "{colors.white.600A}", _dark: "{colors.white.600A}" } }, disabled: { value: { base: "{colors.white.500A}", _dark: "{colors.white.500A}" } } }, blackAlpha: { bold: { value: { base: "{colors.black.700A}", _dark: "{colors.black.700A}" } }, default: { value: { base: "{colors.black.500A}", _dark: "{colors.black.500A}" } }, selected: { value: { base: "{colors.black.600A}", _dark: "{colors.black.600A}" } }, disabled: { value: { base: "{colors.black.500A}", _dark: "{colors.black.500A}" } } } }, heybeePrimary: { default: { value: { base: "{colors.yellow.500}", _dark: "{colors.yellow.500}" } }, selected: { value: { base: "{colors.yellow.600}", _dark: "{colors.yellow.600}" } } } }, surface: { base: { value: { base: "{colors.neutral.1100}", _dark: "{colors.neutral.0}" } }, layer_1: { value: { base: "{colors.neutral.1100}", _dark: "{colors.neutral.100}" } }, layer_2: { value: { base: "{colors.neutral.1050}", _dark: "{colors.neutral.200}" } } }, shadow: { overlay: { value: { base: "{colors.black.100A}", _dark: "{colors.black.400A}" } }, raised: { value: { base: "{colors.black.400A}", _dark: "{colors.black.600A}" } } }, scrim: { default: { value: { base: "{colors.black.600A}", _dark: "{colors.black.600A}" } } }, skeleton: { default: { value: { base: "{colors.neutral.800}", _dark: "{colors.neutral.100}" } }, subtle: { value: { base: "{colors.neutral.700}", _dark: "{colors.neutral.200}" } } }, border: { neutral: { default: { value: { base: "{colors.neutral.700}", _dark: "{colors.neutral.400}" } }, subtle: { value: { base: "{colors.neutral.900}", _dark: "{colors.neutral.300}" } }, disabled: { value: { base: "{colors.neutral.1000}", _dark: "{colors.neutral.200}" } } }, neuroidPrimary: { default: { value: { base: "{colors.purple.500}", _dark: "{colors.purple.400}" } } }, danger: { default: { value: { base: "{colors.red.500}", _dark: "{colors.red.400}" } } }, warning: { default: { value: { base: "{colors.orange.500}", _dark: "{colors.orange.400}" } } }, success: { default: { value: { base: "{colors.green.500}", _dark: "{colors.green.400}" } } }, informative: { default: { value: { base: "{colors.blue.500}", _dark: "{colors.blue.400}" } } }, zoltarinaPrimary: { default: { value: { base: "{colors.ohre.800}", _dark: "{colors.ohre.400}" } } }, heydPrimary: { default: { value: { base: "{colors.cyan.800}", _dark: "{colors.cyan.400}" } } }, heybeePrimary: { default: { value: { base: "{colors.yellow.800}", _dark: "{colors.yellow.500}" } } } } }, shadows: { raised: { value: "0px 1px 3px 0px {colors.shadow.raised}" }, overlay: { value: "0px 20px 25px -5px {colors.shadow.overlay}" } } }, v = { colors: { neutral: { 0: { value: "#080A0E" }, 100: { value: "#101216" }, 200: { value: "#181A1E" }, 300: { value: "#282A2E" }, 400: { value: "#383A3E" }, 500: { value: "#505256" }, 600: { value: "#64666A" }, 700: { value: "#787A7E" }, 800: { value: "#A0A2A6" }, 900: { value: "#B4B6BA" }, 1e3: { value: "#F2F4F8" }, 1050: { value: "#EDEEF1" }, 1100: { value: "#FAFCFF" }, 1200: { value: "#F8F9FF" } }, black: { "700A": { value: "rgba(0,0,0,0.8)" }, "600A": { value: "rgba(0,0,0,0.6)" }, "500A": { value: "rgba(0,0,0,0.4)" }, "400A": { value: "rgba(0,0,0,0.32)" }, "300A": { value: "rgba(0,0,0,0.2)" }, "200A": { value: "rgba(0,0,0,0.12)" }, "100A": { value: "rgba(0,0,0,0.08)" } }, white: { "700A": { value: "rgba(255,255,255,0.8)" }, "600A": { value: "rgba(255,255,255,0.6)" }, "500A": { value: "rgba(255,255,255,0.4)" }, "400A": { value: "rgba(255,255,255,0.32)" }, "300A": { value: "rgba(255,255,255,0.2)" }, "200A": { value: "rgba(255,255,255,0.12)" }, "100A": { value: "rgba(255,255,255,0.08)" } }, red: { 100: { value: "#ffeceb" }, 200: { value: "#ffd5d2" }, 300: { value: "#fd9891" }, 400: { value: "#f87168" }, 500: { value: "#f15b50" }, 600: { value: "#e2483d" }, 700: { value: "#c9372c" }, 800: { value: "#87241c" }, 900: { value: "#5d1f1a" }, 1e3: { value: "#42221f" } }, orange: { 100: { value: "#fff5eb" }, 200: { value: "#ffe9d2" }, 300: { value: "#fdc991" }, 400: { value: "#f8b268" }, 500: { value: "#f1a350" }, 600: { value: "#e2923d" }, 700: { value: "#c97d2c" }, 800: { value: "#87531c" }, 900: { value: "#5d3d1a" }, 1e3: { value: "#42311f" } }, blue: { 100: { value: "#ebf2ff" }, 200: { value: "#d2e1ff" }, 300: { value: "#91b5fd" }, 400: { value: "#6898f8" }, 500: { value: "#5086f1" }, 600: { value: "#3d74e2" }, 700: { value: "#2c60c9" }, 800: { value: "#1c4087" }, 900: { value: "#1a305d" }, 1e3: { value: "#1f2b42" } }, green: { 100: { value: "#ebfff5" }, 200: { value: "#9cfccc" }, 300: { value: "#47EB99" }, 400: { value: "#26d980" }, 500: { value: "#14b866" }, 600: { value: "#10934c" }, 700: { value: "#147042" }, 800: { value: "#125433" }, 900: { value: "#104129" }, 1e3: { value: "#0b2819" } }, purple: { 100: { value: "#f3ebff" }, 200: { value: "#e9ddfd" }, 300: { value: "#cbacfb" }, 400: { value: "#ac7cf8" }, 500: { value: "#8d4bf6" }, 600: { value: "#6d19f5" }, 700: { value: "#570ad1" }, 800: { value: "#4308a0" }, 900: { value: "#2f0670" }, 1e3: { value: "#1a033f" } }, ohre: { 100: { value: "#FFF8F1" }, 200: { value: "#FFE6C8" }, 300: { value: "#FFD3A0" }, 400: { value: "#FFC077" }, 500: { value: "#E2A763" }, 600: { value: "#C58F50" }, 700: { value: "#A8773F" }, 800: { value: "#8A6030" }, 900: { value: "#6D4B22" }, 1e3: { value: "#503617" } }, cyan: { 100: { value: "#ecffff" }, 200: { value: "#c1feff" }, 300: { value: "#96feff" }, 400: { value: "#6bfdff" }, 500: { value: "#3df1f3" }, 600: { value: "#2acfd1" }, 700: { value: "#1aadaf" }, 800: { value: "#0e8c8d" }, 900: { value: "#056a6b" }, 1e3: { value: "#004849" } }, yellow: { 100: { value: "#FFFBED" }, 200: { value: "#FFF3C5" }, 300: { value: "#FFEB9D" }, 400: { value: "#FFE375" }, 500: { value: "#FFDB4D" }, 600: { value: "#DDBC38" }, 700: { value: "#BB9D27" }, 800: { value: "#997F19" }, 900: { value: "#77620E" }, 1e3: { value: "#554506" } } }, borderWidths: { none: { value: "0px" }, sm: { value: "1px" }, md: { value: "2px" }, lg: { value: "4px" } }, spacing: { 0: { value: "0rem" }, 1: { value: "0.25rem" }, 2: { value: "0.5rem" }, 3: { value: "0.75rem" }, 4: { value: "1rem" }, 6: { value: "1.5rem" }, 8: { value: "2rem" }, 12: { value: "3rem" }, 20: { value: "5rem" }, 30: { value: "7.5rem" }, 56: { value: "14rem" }, 72: { value: "18rem" }, 98: { value: "24rem" }, 128: { value: "32rem" }, 160: { value: "40rem" } }, radii: { none: { value: "0px" }, xs: { value: "2px" }, sm: { value: "4px" }, md: { value: "8px" }, lg: { value: "16px" }, full: { value: "9999px" } }, fontSizes: { xs: { value: "0.75rem" }, sm: { value: "0.875rem" }, md: { value: "1rem" }, lg: { value: "1.25rem" }, xl: { value: "1.5rem" }, "2xl": { value: "2rem" }, "3xl": { value: "2.5rem" }, "4xl": { value: "3rem" } }, letterSpacings: { xs: { value: "-1.5px" }, sm: { value: "-1.2px" }, md: { value: "-1px" }, lg: { value: "-0.8px" }, xl: { value: "-0.6px" }, "2xl": { value: "-0.4px" }, "3xl": { value: "-0.2px" } }, lineHeights: { md: { value: "1rem" }, lg: { value: "1.25rem" }, xl: { value: "1.5rem" }, "2xl": { value: "1.75rem" }, "3xl": { value: "2.25rem" }, "4xl": { value: "2.75rem" }, "5xl": { value: "3rem" } }, fontWeights: { regular: { value: "400" }, medium: { value: "500" }, semibold: { value: "600" }, bold: { value: "700" }, regularItalic: { value: "Italic" }, mediumItalic: { value: "Medium Italic" } }, fonts: { inter: { value: "Inter" }, notoSans: { value: "Noto Sans" } } }, $ = { body: { md: { value: { fontFamily: "notoSans", fontWeight: "regular", fontSize: "sm", lineHeight: "lg", letterSpacing: "3xl" } }, lg: { value: { fontFamily: "notoSans", fontWeight: "regular", fontSize: "md", lineHeight: "xl", letterSpacing: "3xl" } }, sm: { value: { fontSize: "xs", fontWeight: "regular", fontFamily: "notoSans", lineHeight: "md", letterSpacing: "3xl" } } }, label: { sm: { value: { fontFamily: "notoSans", fontWeight: "medium", fontSize: "xs", lineHeight: "md", letterSpacing: "3xl" } }, md: { value: { fontFamily: "notoSans", fontWeight: "medium", fontSize: "sm", lineHeight: "lg", letterSpacing: "3xl" } } }, title: { sm: { value: { fontFamily: "notoSans", fontWeight: "medium", fontSize: "sm", lineHeight: "lg", letterSpacing: "2xl" } }, md: { value: { fontFamily: "notoSans", fontWeight: "medium", fontSize: "md", lineHeight: "xl", letterSpacing: "xl" } }, lg: { value: { fontFamily: "notoSans", fontWeight: "semibold", fontSize: "lg", lineHeight: "2xl", letterSpacing: "xl" } } }, headline: { sm: { value: { fontFamily: "inter", fontWeight: "semibold", fontSize: "xl", lineHeight: "2xl", letterSpacing: "lg" } }, md: { value: { fontFamily: "inter", fontWeight: "bold", fontSize: "2xl", lineHeight: "3xl", letterSpacing: "md" } } }, display: { md: { value: { fontFamily: "inter", fontWeight: "bold", fontSize: "3xl", lineHeight: "4xl", letterSpacing: "sm" } }, lg: { value: { fontFamily: "inter", fontWeight: "bold", fontSize: "4xl", lineHeight: "5xl", letterSpacing: "xs" } } } }, g = { semantic: m, primitive: v, textStyles: $ };
+var m = { colors: { content: { neutral: { bold: { value: { base: "{colors.neutral.0}", _dark: "{colors.neutral.1100}" } }, default: { value: { base: "{colors.neutral.300}", _dark: "{colors.neutral.1000}" } }, subtle: { value: { base: "{colors.neutral.600}", _dark: "{colors.neutral.900}" } }, subtlest: { value: { base: "{colors.neutral.900}", _dark: "{colors.neutral.500}" } }, disabled: { value: { base: "{colors.neutral.800}", _dark: "{colors.neutral.600}" } }, default_inverse: { value: { base: "{colors.neutral.1100}", _dark: "{colors.neutral.0}" } } }, neuroidPrimary: { default: { value: { base: "{colors.purple.500}", _dark: "{colors.purple.400}" } }, default_inverse: { value: { base: "{colors.purple.800}", _dark: "{colors.purple.800}" } } }, danger: { default: { value: { base: "{colors.red.600}", _dark: "{colors.red.400}" } } }, warning: { default: { value: { base: "{colors.orange.600}", _dark: "{colors.orange.400}" } } }, success: { default: { value: { base: "{colors.green.600}", _dark: "{colors.green.400}" } } }, informative: { default: { value: { base: "{colors.blue.600}", _dark: "{colors.blue.400}" } } }, zoltarinaPrimary: { default: { value: { base: "{colors.ohre.800}", _dark: "{colors.ohre.400}" } }, default_inverse: { value: { base: "{colors.ohre.1000}", _dark: "{colors.ohre.1000}" } } }, heydPrimary: { default: { value: { base: "{colors.cyan.800}", _dark: "{colors.cyan.400}" } }, default_inverse: { value: { base: "{colors.cyan.1000}", _dark: "{colors.cyan.1000}" } } }, static: { white: { bold: { value: { base: "{colors.neutral.1200}", _dark: "{colors.neutral.1200}" } }, default: { value: { base: "{colors.neutral.1050}", _dark: "{colors.neutral.1050}" } }, subtle: { value: { base: "{colors.neutral.1000}", _dark: "{colors.neutral.1000}" } }, subtlest: { value: { base: "{colors.neutral.900}", _dark: "{colors.neutral.900}" } }, disabled: { value: { base: "{colors.neutral.800}", _dark: "{colors.neutral.800}" } } }, black: { bold: { value: { base: "{colors.neutral.0}", _dark: "{colors.neutral.0}" } }, default: { value: { base: "{colors.neutral.200}", _dark: "{colors.neutral.200}" } }, subtle: { value: { base: "{colors.neutral.400}", _dark: "{colors.neutral.400}" } }, subtlest: { value: { base: "{colors.neutral.600}", _dark: "{colors.neutral.600}" } }, disabled: { value: { base: "{colors.neutral.800}", _dark: "{colors.neutral.800}" } } } }, heybeePrimary: { default: { value: { base: "{colors.yellow.800}", _dark: "{colors.yellow.500}" } }, default_inverse: { value: { base: "{colors.yellow.1000}", _dark: "{colors.yellow.1000}" } } }, neutralInverse: { bold: { value: { base: "{colors.neutral.1100}", _dark: "{colors.neutral.0}" } }, default: { value: { base: "{colors.neutral.1000}", _dark: "{colors.neutral.300}" } }, subtle: { value: { base: "{colors.neutral.900}", _dark: "{colors.neutral.600}" } }, subtlest: { value: { base: "{colors.neutral.500}", _dark: "{colors.neutral.900}" } }, disabled: { value: { base: "{colors.neutral.600}", _dark: "{colors.neutral.800}" } }, default_inverse: { value: { base: "{colors.neutral.0}", _dark: "{colors.neutral.1100}" } } } }, background: { neutral: { default: { value: { base: "{colors.neutral.1050}", _dark: "{colors.neutral.200}" } }, selected: { value: { base: "{colors.neutral.1000}", _dark: "{colors.neutral.300}" } }, disabled: { value: { base: "{colors.neutral.1000}", _dark: "{colors.neutral.400}" } } }, neuroidPrimary: { default: { value: { base: "{colors.purple.300}", _dark: "{colors.purple.600}" } }, selected: { value: { base: "{colors.purple.400}", _dark: "{colors.purple.700}" } } }, neuroidSecondary: { default: { value: { base: "{colors.purple.200}", _dark: "{colors.purple.300}" } }, selected: { value: { base: "{colors.purple.300}", _dark: "{colors.purple.400}" } } }, danger: { default: { value: { base: "{colors.red.300}", _dark: "{colors.red.700}" } }, selected: { value: { base: "{colors.red.400}", _dark: "{colors.red.800}" } } }, warning: { default: { value: { base: "{colors.orange.300}", _dark: "{colors.orange.700}" } }, selected: { value: { base: "{colors.orange.400}", _dark: "{colors.orange.800}" } } }, success: { default: { value: { base: "{colors.green.300}", _dark: "{colors.green.700}" } }, selected: { value: { base: "{colors.green.400}", _dark: "{colors.green.800}" } } }, informative: { default: { value: { base: "{colors.blue.300}", _dark: "{colors.blue.700}" } }, selected: { value: { base: "{colors.blue.400}", _dark: "{colors.blue.800}" } } }, zoltarinaPrimary: { default: { value: { base: "{colors.ohre.400}", _dark: "{colors.ohre.400}" } }, selected: { value: { base: "{colors.ohre.500}", _dark: "{colors.ohre.500}" } } }, zoltarinaSecondary: { default: { value: { base: "{colors.ohre.200}", _dark: "{colors.ohre.200}" } }, selected: { value: { base: "{colors.ohre.300}", _dark: "{colors.ohre.300}" } } }, heydPrimary: { default: { value: { base: "{colors.cyan.500}", _dark: "{colors.cyan.500}" } }, selected: { value: { base: "{colors.cyan.600}", _dark: "{colors.cyan.600}" } } }, heydSecondary: { default: { value: { base: "{colors.cyan.200}", _dark: "{colors.cyan.200}" } }, selected: { value: { base: "{colors.cyan.300}", _dark: "{colors.cyan.300}" } } }, static: { whiteAlpha: { bold: { value: { base: "{colors.white.700A}", _dark: "{colors.white.700A}" } }, default: { value: { base: "{colors.white.500A}", _dark: "{colors.white.500A}" } }, selected: { value: { base: "{colors.white.600A}", _dark: "{colors.white.600A}" } }, disabled: { value: { base: "{colors.white.500A}", _dark: "{colors.white.500A}" } } }, blackAlpha: { bold: { value: { base: "{colors.black.700A}", _dark: "{colors.black.700A}" } }, default: { value: { base: "{colors.black.500A}", _dark: "{colors.black.500A}" } }, selected: { value: { base: "{colors.black.600A}", _dark: "{colors.black.600A}" } }, disabled: { value: { base: "{colors.black.500A}", _dark: "{colors.black.500A}" } } } }, heybeePrimary: { default: { value: { base: "{colors.yellow.500}", _dark: "{colors.yellow.500}" } }, selected: { value: { base: "{colors.yellow.600}", _dark: "{colors.yellow.600}" } } }, neutralInverse: { default: { value: { base: "{colors.neutral.200}", _dark: "{colors.neutral.1050}" } }, selected: { value: { base: "{colors.neutral.300}", _dark: "{colors.neutral.1000}" } }, disabled: { value: { base: "{colors.neutral.400}", _dark: "{colors.neutral.1000}" } } } }, surface: { base: { value: { base: "{colors.neutral.1100}", _dark: "{colors.neutral.0}" } }, layer_1: { value: { base: "{colors.neutral.1100}", _dark: "{colors.neutral.100}" } }, layer_2: { value: { base: "{colors.neutral.1050}", _dark: "{colors.neutral.200}" } } }, shadow: { overlay: { value: { base: "{colors.black.100A}", _dark: "{colors.black.400A}" } }, raised: { value: { base: "{colors.black.400A}", _dark: "{colors.black.600A}" } } }, scrim: { default: { value: { base: "{colors.black.600A}", _dark: "{colors.black.600A}" } } }, skeleton: { default: { value: { base: "{colors.neutral.800}", _dark: "{colors.neutral.100}" } }, subtle: { value: { base: "{colors.neutral.700}", _dark: "{colors.neutral.200}" } } }, border: { neutral: { default: { value: { base: "{colors.neutral.700}", _dark: "{colors.neutral.400}" } }, subtle: { value: { base: "{colors.neutral.900}", _dark: "{colors.neutral.300}" } }, disabled: { value: { base: "{colors.neutral.1000}", _dark: "{colors.neutral.200}" } } }, neuroidPrimary: { default: { value: { base: "{colors.purple.500}", _dark: "{colors.purple.400}" } } }, danger: { default: { value: { base: "{colors.red.500}", _dark: "{colors.red.400}" } } }, warning: { default: { value: { base: "{colors.orange.500}", _dark: "{colors.orange.400}" } } }, success: { default: { value: { base: "{colors.green.500}", _dark: "{colors.green.400}" } } }, informative: { default: { value: { base: "{colors.blue.500}", _dark: "{colors.blue.400}" } } }, zoltarinaPrimary: { default: { value: { base: "{colors.ohre.800}", _dark: "{colors.ohre.400}" } } }, heydPrimary: { default: { value: { base: "{colors.cyan.800}", _dark: "{colors.cyan.400}" } } }, heybeePrimary: { default: { value: { base: "{colors.yellow.800}", _dark: "{colors.yellow.500}" } } } } }, shadows: { raised: { value: "0px 1px 3px 0px {colors.shadow.raised}" }, overlay: { value: "0px 20px 25px -5px {colors.shadow.overlay}" } } }, v = { colors: { neutral: { 0: { value: "#080A0E" }, 100: { value: "#101216" }, 200: { value: "#181A1E" }, 300: { value: "#282A2E" }, 400: { value: "#383A3E" }, 500: { value: "#505256" }, 600: { value: "#64666A" }, 700: { value: "#787A7E" }, 800: { value: "#A0A2A6" }, 900: { value: "#B4B6BA" }, 1e3: { value: "#F2F4F8" }, 1050: { value: "#EDEEF1" }, 1100: { value: "#FAFCFF" }, 1200: { value: "#F8F9FF" } }, black: { "700A": { value: "rgba(0,0,0,0.8)" }, "600A": { value: "rgba(0,0,0,0.6)" }, "500A": { value: "rgba(0,0,0,0.4)" }, "400A": { value: "rgba(0,0,0,0.32)" }, "300A": { value: "rgba(0,0,0,0.2)" }, "200A": { value: "rgba(0,0,0,0.12)" }, "100A": { value: "rgba(0,0,0,0.08)" } }, white: { "700A": { value: "rgba(255,255,255,0.8)" }, "600A": { value: "rgba(255,255,255,0.6)" }, "500A": { value: "rgba(255,255,255,0.4)" }, "400A": { value: "rgba(255,255,255,0.32)" }, "300A": { value: "rgba(255,255,255,0.2)" }, "200A": { value: "rgba(255,255,255,0.12)" }, "100A": { value: "rgba(255,255,255,0.08)" } }, red: { 100: { value: "#ffeceb" }, 200: { value: "#ffd5d2" }, 300: { value: "#fd9891" }, 400: { value: "#f87168" }, 500: { value: "#f15b50" }, 600: { value: "#e2483d" }, 700: { value: "#c9372c" }, 800: { value: "#87241c" }, 900: { value: "#5d1f1a" }, 1e3: { value: "#42221f" } }, orange: { 100: { value: "#fff5eb" }, 200: { value: "#ffe9d2" }, 300: { value: "#fdc991" }, 400: { value: "#f8b268" }, 500: { value: "#f1a350" }, 600: { value: "#e2923d" }, 700: { value: "#c97d2c" }, 800: { value: "#87531c" }, 900: { value: "#5d3d1a" }, 1e3: { value: "#42311f" } }, blue: { 100: { value: "#ebf2ff" }, 200: { value: "#d2e1ff" }, 300: { value: "#91b5fd" }, 400: { value: "#6898f8" }, 500: { value: "#5086f1" }, 600: { value: "#3d74e2" }, 700: { value: "#2c60c9" }, 800: { value: "#1c4087" }, 900: { value: "#1a305d" }, 1e3: { value: "#1f2b42" } }, green: { 100: { value: "#ebfff5" }, 200: { value: "#9cfccc" }, 300: { value: "#47EB99" }, 400: { value: "#26d980" }, 500: { value: "#14b866" }, 600: { value: "#10934c" }, 700: { value: "#147042" }, 800: { value: "#125433" }, 900: { value: "#104129" }, 1e3: { value: "#0b2819" } }, purple: { 100: { value: "#f3ebff" }, 200: { value: "#e9ddfd" }, 300: { value: "#cbacfb" }, 400: { value: "#ac7cf8" }, 500: { value: "#8d4bf6" }, 600: { value: "#6d19f5" }, 700: { value: "#570ad1" }, 800: { value: "#4308a0" }, 900: { value: "#2f0670" }, 1e3: { value: "#1a033f" } }, ohre: { 100: { value: "#FFF8F1" }, 200: { value: "#FFE6C8" }, 300: { value: "#FFD3A0" }, 400: { value: "#FFC077" }, 500: { value: "#E2A763" }, 600: { value: "#C58F50" }, 700: { value: "#A8773F" }, 800: { value: "#8A6030" }, 900: { value: "#6D4B22" }, 1e3: { value: "#503617" } }, cyan: { 100: { value: "#ecffff" }, 200: { value: "#c1feff" }, 300: { value: "#96feff" }, 400: { value: "#6bfdff" }, 500: { value: "#3df1f3" }, 600: { value: "#2acfd1" }, 700: { value: "#1aadaf" }, 800: { value: "#0e8c8d" }, 900: { value: "#056a6b" }, 1e3: { value: "#004849" } }, yellow: { 100: { value: "#FFFBED" }, 200: { value: "#FFF3C5" }, 300: { value: "#FFEB9D" }, 400: { value: "#FFE375" }, 500: { value: "#FFDB4D" }, 600: { value: "#DDBC38" }, 700: { value: "#BB9D27" }, 800: { value: "#997F19" }, 900: { value: "#77620E" }, 1e3: { value: "#554506" } } }, borderWidths: { none: { value: "0px" }, sm: { value: "1px" }, md: { value: "2px" }, lg: { value: "4px" } }, spacing: { 0: { value: "0rem" }, 1: { value: "0.25rem" }, 2: { value: "0.5rem" }, 3: { value: "0.75rem" }, 4: { value: "1rem" }, 6: { value: "1.5rem" }, 8: { value: "2rem" }, 12: { value: "3rem" }, 20: { value: "5rem" }, 30: { value: "7.5rem" }, 56: { value: "14rem" }, 72: { value: "18rem" }, 98: { value: "24rem" }, 128: { value: "32rem" }, 160: { value: "40rem" } }, radii: { none: { value: "0px" }, xs: { value: "2px" }, sm: { value: "4px" }, md: { value: "8px" }, lg: { value: "16px" }, full: { value: "9999px" } }, fontSizes: { xs: { value: "0.75rem" }, sm: { value: "0.875rem" }, md: { value: "1rem" }, lg: { value: "1.25rem" }, xl: { value: "1.5rem" }, "2xl": { value: "2rem" }, "3xl": { value: "2.5rem" }, "4xl": { value: "3rem" } }, letterSpacings: { xs: { value: "-1.5px" }, sm: { value: "-1.2px" }, md: { value: "-1px" }, lg: { value: "-0.8px" }, xl: { value: "-0.6px" }, "2xl": { value: "-0.4px" }, "3xl": { value: "-0.2px" } }, lineHeights: { md: { value: "1rem" }, lg: { value: "1.25rem" }, xl: { value: "1.5rem" }, "2xl": { value: "1.75rem" }, "3xl": { value: "2.25rem" }, "4xl": { value: "2.75rem" }, "5xl": { value: "3rem" } }, fontWeights: { regular: { value: "400" }, medium: { value: "500" }, semibold: { value: "600" }, bold: { value: "700" }, regularItalic: { value: "Italic" }, mediumItalic: { value: "Medium Italic" } }, fonts: { inter: { value: "Inter" }, notoSans: { value: "Noto Sans" } } }, $ = { body: { md: { value: { fontFamily: "notoSans", fontWeight: "regular", fontSize: "sm", lineHeight: "lg", letterSpacing: "3xl" } }, lg: { value: { fontFamily: "notoSans", fontWeight: "regular", fontSize: "md", lineHeight: "xl", letterSpacing: "3xl" } }, sm: { value: { fontSize: "xs", fontWeight: "regular", fontFamily: "notoSans", lineHeight: "md", letterSpacing: "3xl" } } }, label: { sm: { value: { fontFamily: "notoSans", fontWeight: "medium", fontSize: "xs", lineHeight: "md", letterSpacing: "3xl" } }, md: { value: { fontFamily: "notoSans", fontWeight: "medium", fontSize: "sm", lineHeight: "lg", letterSpacing: "3xl" } } }, title: { sm: { value: { fontFamily: "notoSans", fontWeight: "medium", fontSize: "sm", lineHeight: "lg", letterSpacing: "2xl" } }, md: { value: { fontFamily: "notoSans", fontWeight: "medium", fontSize: "md", lineHeight: "xl", letterSpacing: "xl" } }, lg: { value: { fontFamily: "notoSans", fontWeight: "semibold", fontSize: "lg", lineHeight: "2xl", letterSpacing: "xl" } } }, headline: { sm: { value: { fontFamily: "inter", fontWeight: "semibold", fontSize: "xl", lineHeight: "2xl", letterSpacing: "lg" } }, md: { value: { fontFamily: "inter", fontWeight: "bold", fontSize: "2xl", lineHeight: "3xl", letterSpacing: "md" } } }, display: { md: { value: { fontFamily: "inter", fontWeight: "bold", fontSize: "3xl", lineHeight: "4xl", letterSpacing: "sm" } }, lg: { value: { fontFamily: "inter", fontWeight: "bold", fontSize: "4xl", lineHeight: "5xl", letterSpacing: "xs" } } } }, g = { semantic: m, primitive: v, textStyles: $ };
 const conditions = {
   extend: {
     collapsed: '&:is([aria-collapsed=true], [data-collapsed], [data-state="collapsed"])',
@@ -9649,6 +10702,261 @@ const preset = definePreset({
     }
   }
 });
+const toastRecipe = sva({
+  className: "toast",
+  slots: [...anatomy.keys(), "content", "icon"],
+  base: {
+    root: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      backgroundColor: "background.neutralInverse.default",
+      borderRadius: 16,
+      height: "fit-content",
+      minHeight: "48px",
+      width: "fit-content",
+      maxWidth: "328px",
+      overflowWrap: "anywhere",
+      zIndex: "overlay",
+      fontStyle: "body.md",
+      color: "content.neutralInverse.bold",
+      pr: 4,
+      pl: 3,
+      py: 2,
+      boxShadow: "0px 4px 12px rgba(0, 0, 0, 0.1)",
+      animation: "fadeIn 0.25s ease-out",
+      transform: "translateY(20px)",
+      shadow: "overlay",
+      transition: "transform 0.25s ease-out",
+      '&[data-state="open"]': {
+        animation: "slide-in 0.4s cubic-bezier(0.05, 0.7, 0.1, 1.0)",
+        transform: "translateY(0px)"
+      },
+      '&[data-state="closed"]': {
+        animation: "slide-out 0.2s cubic-bezier(0.3, 0.0, 0.8, 0.15)",
+        transform: "translateY(64px)"
+      }
+    },
+    content: {
+      display: "inline-flex",
+      alignItems: "center"
+    },
+    description: {
+      textStyle: "body.md",
+      marginLeft: 2
+    },
+    actionTrigger: {
+      height: "100%",
+      width: "fit-content",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      textStyle: "title.sm",
+      cursor: "pointer",
+      px: 4,
+      pr: 1,
+      whiteSpace: "nowrap",
+      transition: "opacity 0.2s ease",
+      color: "content.neutralInverse.bold",
+      "&:hover": {
+        opacity: 0.8
+      }
+    },
+    icon: {
+      width: 6,
+      height: 6,
+      minWidth: 6,
+      minHeight: 6,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center"
+    }
+  },
+  variants: {
+    width: {
+      full: {
+        root: {
+          width: "100%",
+          justifyContent: "space-between"
+        }
+      },
+      fit: {
+        root: {
+          width: "fit-content"
+        }
+      }
+    },
+    asLink: {
+      true: {
+        actionTrigger: {
+          textDecoration: "underline",
+          cursor: "pointer"
+        }
+      }
+    }
+  }
+});
+const { withProvider, withContext } = createStyleContext(toastRecipe);
+const OriginalRoot = withProvider(ToastRoot, "root");
+const Root = React.forwardRef((props, ref) => {
+  const { children, width, ...rest } = props;
+  const hasActionTrigger = React.Children.toArray(children).some((child) => {
+    if (React.isValidElement(child)) {
+      if (child.type === ActionTrigger) {
+        return true;
+      }
+      if (child.type === React.Fragment && child.props.children) {
+        return React.Children.toArray(child.props.children).some(
+          (fragmentChild) => React.isValidElement(fragmentChild) && fragmentChild.type === ActionTrigger
+        );
+      }
+    }
+    return false;
+  });
+  const widthValue = width !== void 0 ? width : hasActionTrigger ? "full" : "fit";
+  return /* @__PURE__ */ jsxRuntime.jsx(OriginalRoot, { ref, width: widthValue, ...rest, children });
+});
+Root.displayName = "Toast.Root";
+const OriginalActionTrigger = withContext(
+  ToastActionTrigger,
+  "actionTrigger"
+);
+const OriginalActionTriggerAsLink = withContext(ark.a, "actionTrigger");
+const ActionTrigger = React.forwardRef((props, ref) => {
+  const { asLink, ...rest } = props;
+  return asLink ? /* @__PURE__ */ jsxRuntime.jsx(OriginalActionTriggerAsLink, { ref, ...rest }) : /* @__PURE__ */ jsxRuntime.jsx(OriginalActionTrigger, { ref, ...rest });
+});
+ActionTrigger.displayName = "Toast.ActionTrigger";
+const Description = withContext(
+  ToastDescription,
+  "description"
+);
+const Content = withContext(ark.div, "content");
+const Icon = withContext(ark.div, "icon");
+const Toast = {
+  Root,
+  ActionTrigger,
+  Content,
+  Description,
+  Icon
+};
+const toast = {
+  queue: [],
+  // ToastProvider에서 호출
+  _getQueue: () => {
+    const queue = [...toast.queue];
+    toast.queue = [];
+    return queue;
+  },
+  // render toast
+  show: (message, options) => {
+    const toastData = {
+      description: message,
+      action: (options == null ? void 0 : options.actionLabel) ? {
+        label: options.actionLabel,
+        onClick: options.onActionClick
+      } : void 0,
+      icon: options == null ? void 0 : options.icon,
+      asLink: options == null ? void 0 : options.asLink,
+      duration: options == null ? void 0 : options.duration
+    };
+    toast.queue.push(toastData);
+    if (typeof window !== "undefined") {
+      window.dispatchEvent(new CustomEvent("toast-queue-updated"));
+    }
+  },
+  success: (message, options) => {
+    toast.show(message, { ...options });
+  },
+  error: (message, options) => {
+    toast.show(message, { ...options });
+  },
+  warning: (message, options) => {
+    toast.show(message, { ...options });
+  },
+  info: (message, options) => {
+    toast.show(message, { ...options });
+  }
+};
+const DURATION = {
+  DEFAULT: 2500,
+  HAS_ACTION: 5500
+};
+const ToastProvider = ({ children }) => {
+  const toaster = createToaster({
+    placement: "bottom",
+    duration: DURATION.DEFAULT,
+    offsets: {
+      bottom: "55px",
+      top: "0px",
+      left: "0px",
+      right: "0px"
+    },
+    overlap: true
+  });
+  React.useEffect(() => {
+    let currentZIndexCounter = 1300;
+    const showToasts = () => {
+      const queuedToasts = toast._getQueue();
+      queuedToasts.forEach((toastData) => {
+        try {
+          const options = {
+            description: toastData.description,
+            zIndex: currentZIndexCounter++
+            // 증가된 zIndex 값 사용
+          };
+          options.data = {
+            icon: toastData.icon ? toastData.icon : null,
+            asLink: toastData.asLink,
+            zIndex: options.zIndex
+            // zIndex를 data에도 저장
+          };
+          if (toastData.action) {
+            options.action = {
+              label: toastData.action.label,
+              onClick: toastData.action.onClick ?? (() => {
+              }),
+              duration: DURATION.HAS_ACTION
+            };
+          }
+          if (toastData.duration) {
+            options.duration = toastData.duration;
+          }
+          toaster.create(options);
+        } catch (error) {
+          console.error("Error creating toast:", error);
+        }
+      });
+    };
+    showToasts();
+    const handleToastQueue = () => showToasts();
+    window.addEventListener("toast-queue-updated", handleToastQueue);
+    return () => {
+      window.removeEventListener("toast-queue-updated", handleToastQueue);
+    };
+  }, [toaster]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    children,
+    /* @__PURE__ */ jsxRuntime.jsx(Toaster, { toaster, children: (toast2) => {
+      var _a, _b, _c, _d, _e;
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        Toast.Root,
+        {
+          asLink: (_a = toast2.data) == null ? void 0 : _a.asLink,
+          style: { zIndex: ((_b = toast2.data) == null ? void 0 : _b.zIndex) || 1e3 },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(Toast.Content, { children: [
+              ((_c = toast2.data) == null ? void 0 : _c.icon) && /* @__PURE__ */ jsxRuntime.jsx(Toast.Icon, { children: toast2.data.icon }),
+              toast2.description && /* @__PURE__ */ jsxRuntime.jsx(Toast.Description, { children: toast2.description })
+            ] }),
+            toast2.action && /* @__PURE__ */ jsxRuntime.jsx(Toast.ActionTrigger, { onClick: (_d = toast2.action) == null ? void 0 : _d.onClick, children: (_e = toast2.action) == null ? void 0 : _e.label })
+          ]
+        },
+        toast2.id
+      );
+    } })
+  ] });
+};
 exports.BottomSheet = BottomSheet;
 exports.Box = Box2;
 exports.Button = index$1;
@@ -9667,6 +10975,8 @@ exports.Stack = Stack2;
 exports.Tag = Tag;
 exports.Text = Text;
 exports.TextArea = Textarea;
+exports.ToastProvider = ToastProvider;
 exports.VStack = VStack2;
 exports.preset = preset;
+exports.toast = toast;
 //# sourceMappingURL=index.cjs.map