@spark-ui/components 11.1.0 → 11.1.1

package/dist/snackbar/index.js

@@ -0,0 +1,1756 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/snackbar/index.ts
+var snackbar_exports = {};
+__export(snackbar_exports, {
+  Snackbar: () => Snackbar2,
+  addSnackbar: () => addSnackbar,
+  clearSnackbarQueue: () => clearSnackbarQueue
+});
+module.exports = __toCommonJS(snackbar_exports);
+
+// src/snackbar/Snackbar.tsx
+var import_toast3 = require("@react-stately/toast");
+var import_react9 = require("react");
+var import_react_dom = require("react-dom");
+
+// src/snackbar/SnackbarRegion.tsx
+var import_toast2 = require("@react-aria/toast");
+var import_react7 = require("react");
+
+// src/snackbar/SnackbarItem.tsx
+var import_toast = require("@react-aria/toast");
+var import_react6 = require("react");
+
+// src/snackbar/SnackbarItem.styles.ts
+var import_class_variance_authority = require("class-variance-authority");
+
+// src/snackbar/snackbarVariants.ts
+var filledVariants = [
+  {
+    design: "filled",
+    intent: "success",
+    class: ["bg-success text-on-success"]
+  },
+  {
+    design: "filled",
+    intent: "alert",
+    class: ["bg-alert text-on-alert"]
+  },
+  {
+    design: "filled",
+    intent: "error",
+    class: ["bg-error text-on-error"]
+  },
+  {
+    design: "filled",
+    intent: "info",
+    class: ["bg-info text-on-info"]
+  },
+  {
+    design: "filled",
+    intent: "neutral",
+    class: ["bg-neutral text-on-neutral"]
+  },
+  {
+    design: "filled",
+    intent: "main",
+    class: ["bg-main text-on-main"]
+  },
+  {
+    design: "filled",
+    intent: "basic",
+    class: ["bg-basic text-on-basic"]
+  },
+  {
+    design: "filled",
+    intent: "support",
+    class: ["bg-support text-on-support"]
+  },
+  {
+    design: "filled",
+    intent: "accent",
+    class: ["bg-accent text-on-accent"]
+  },
+  {
+    design: "filled",
+    intent: "inverse",
+    class: ["bg-surface-inverse text-on-surface-inverse"]
+  }
+];
+var tintedVariants = [
+  {
+    design: "tinted",
+    intent: "success",
+    class: ["bg-success-container text-on-success-container"]
+  },
+  {
+    design: "tinted",
+    intent: "alert",
+    class: ["bg-alert-container text-on-alert-container"]
+  },
+  {
+    design: "tinted",
+    intent: "error",
+    class: ["bg-error-container text-on-error-container"]
+  },
+  {
+    design: "tinted",
+    intent: "info",
+    class: ["bg-info-container text-on-info-container"]
+  },
+  {
+    design: "tinted",
+    intent: "neutral",
+    class: ["bg-neutral-container text-on-neutral-container"]
+  },
+  {
+    design: "tinted",
+    intent: "main",
+    class: ["bg-main-container text-on-main-container"]
+  },
+  {
+    design: "tinted",
+    intent: "basic",
+    class: ["bg-basic-container text-on-basic-container"]
+  },
+  {
+    design: "tinted",
+    intent: "support",
+    class: ["bg-support-container text-on-support-container"]
+  },
+  {
+    design: "tinted",
+    intent: "accent",
+    class: ["bg-accent-container text-on-accent-container"]
+  },
+  {
+    design: "tinted",
+    intent: "inverse",
+    class: ["bg-surface-inverse text-on-surface-inverse"]
+  }
+];
+
+// src/snackbar/SnackbarItem.styles.ts
+var snackbarItemVariant = (0, import_class_variance_authority.cva)(
+  [
+    "rounded-md shadow-sm",
+    "max-w-[600px]",
+    "cursor-default pointer-events-auto touch-none select-none",
+    "absolute",
+    /**
+     * Focus
+     */
+    "group-focus-visible:outline-hidden group-focus-visible:u-outline group-not-focus-visible:ring-inset",
+    /**
+     * Positionning
+     */
+    "group-data-[position=bottom]:bottom-0 group-data-[position=bottom-left]:bottom-0 group-data-[position=bottom-right]:bottom-0",
+    "group-data-[position=top]:top-0 group-data-[position=top-left]:top-0 group-data-[position=top-right]:top-0",
+    /**
+     * Animation and opacity
+     */
+    "animation-duration-400",
+    "[animation-fill-mode: forwards]!",
+    "data-[animation=queued]:animate-fade-in",
+    "data-[animation=entering]:animation-ease-decelerate-back",
+    "data-[animation=exiting]:animation-ease-accelerate",
+    // Parent position bottom|bottom-left|bottom-right
+    "data-[animation=entering]:group-data-[position=bottom]:[&:not([data-swipe])]:animate-slide-in-bottom",
+    "data-[animation=exiting]:opacity-0 data-[animation=exiting]:transition-opacity",
+    "data-[animation=exiting]:group-data-[position=bottom]:[&:not([data-swipe])]:animate-slide-out-bottom",
+    "data-[animation=entering]:group-data-[position=bottom-left]:[&:not([data-swipe])]:animate-slide-in-bottom",
+    "data-[animation=exiting]:group-data-[position=bottom-left]:[&:not([data-swipe])]:animate-slide-out-bottom",
+    "data-[animation=entering]:group-data-[position=bottom-right]:[&:not([data-swipe])]:animate-slide-in-bottom",
+    "data-[animation=exiting]:group-data-[position=bottom-right]:[&:not([data-swipe])]:animate-slide-out-bottom",
+    // Parent position top|top-left|top-right
+    "data-[animation=entering]:group-data-[position=top]:[&:not([data-swipe])]:animate-slide-in-top",
+    "data-[animation=exiting]:group-data-[position=top]:[&:not([data-swipe])]:animate-slide-out-top",
+    "data-[animation=entering]:group-data-[position=top-left]:[&:not([data-swipe])]:animate-slide-in-top",
+    "data-[animation=exiting]:group-data-[position=top-left]:[&:not([data-swipe])]:animate-slide-out-top",
+    "data-[animation=entering]:group-data-[position=top-right]:[&:not([data-swipe])]:animate-slide-in-top",
+    "data-[animation=exiting]:group-data-[position=top-right]:[&:not([data-swipe])]:animate-slide-out-top",
+    /**
+     * Swipe
+     */
+    "data-[swipe=move]:data-[swipe-direction=right]:translate-x-(--swipe-position-x)",
+    "data-[swipe=move]:data-[swipe-direction=left]:translate-x-(--swipe-position-x)",
+    "data-[swipe=cancel]:translate-x-0",
+    "data-[swipe=end]:data-[swipe-direction=right]:animate-standalone-swipe-out-right",
+    "data-[swipe=end]:data-[swipe-direction=left]:animate-standalone-swipe-out-left"
+  ],
+  {
+    variants: {
+      /**
+       * Set different look and feel
+       * @default 'filled'
+       */
+      design: {
+        filled: "",
+        tinted: ""
+      },
+      /**
+       * Set color intent
+       * @default 'neutral'
+       */
+      intent: {
+        success: "",
+        alert: "",
+        error: "",
+        info: "",
+        neutral: "",
+        main: "",
+        basic: "",
+        support: "",
+        accent: "",
+        inverse: ""
+      }
+    },
+    compoundVariants: [...filledVariants, ...tintedVariants],
+    defaultVariants: {
+      design: "filled",
+      intent: "neutral"
+    }
+  }
+);
+var snackbarItemVariantContent = (0, import_class_variance_authority.cva)(
+  [
+    "inline-grid items-center",
+    "col-start-1 row-start-1",
+    "pl-md pr-lg"
+    // applying padding on the parent prevents VoiceOver on Safari from reading snackbar content 🤷
+  ],
+  {
+    variants: {
+      /**
+       * Force action button displaying on a new line
+       * @default false
+       */
+      actionOnNewline: {
+        true: [
+          "grid-rows-[52px_1fr_52px]",
+          "grid-cols-[min-content_1fr_min-content]",
+          "[grid-template-areas:'icon_message_close'_'._message_.'_'action_action_action']"
+        ],
+        false: [
+          "grid-cols-[min-content_1fr_min-content_min-content]",
+          "[grid-template-areas:'icon_message_action_close']"
+        ]
+      }
+    },
+    defaultVariants: {
+      actionOnNewline: false
+    }
+  }
+);
+
+// src/snackbar/SnackbarItemAction.tsx
+var import_class_variance_authority5 = require("class-variance-authority");
+
+// src/button/Button.tsx
+var import_class_variance_authority4 = require("class-variance-authority");
+var import_react2 = require("react");
+
+// src/slot/Slot.tsx
+var import_radix_ui = require("radix-ui");
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var Slottable = import_radix_ui.Slot.Slottable;
+var Slot = ({ ref, ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_radix_ui.Slot.Root, { ref, ...props });
+};
+var wrapPolymorphicSlot = (asChild, children, callback) => {
+  if (!asChild) return callback(children);
+  return (0, import_react.isValidElement)(children) ? (0, import_react.cloneElement)(
+    children,
+    void 0,
+    callback(children.props.children)
+  ) : null;
+};
+
+// src/visually-hidden/VisuallyHidden.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var VisuallyHidden = ({ asChild = false, ref, ...props }) => {
+  const Component = asChild ? Slot : "span";
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    Component,
+    {
+      ...props,
+      ref,
+      style: {
+        // See: https://github.com/twbs/bootstrap/blob/main/scss/mixins/_visually-hidden.scss
+        position: "absolute",
+        border: 0,
+        width: 1,
+        height: 1,
+        padding: 0,
+        margin: -1,
+        overflow: "hidden",
+        clip: "rect(0, 0, 0, 0)",
+        whiteSpace: "nowrap",
+        wordWrap: "normal",
+        ...props.style
+      }
+    }
+  );
+};
+VisuallyHidden.displayName = "VisuallyHidden";
+
+// src/spinner/Spinner.styles.tsx
+var import_internal_utils = require("@spark-ui/internal-utils");
+var import_class_variance_authority2 = require("class-variance-authority");
+var defaultVariants = {
+  intent: "current",
+  size: "current",
+  isBackgroundVisible: false
+};
+var spinnerStyles = (0, import_class_variance_authority2.cva)(
+  ["inline-block", "border-solid", "rounded-full", "border-md", "animate-spin"],
+  {
+    variants: {
+      /**
+       * Use `size` prop to set the size of the spinner. If you want to set the full size for the spinner, don't forget to add a wrapping container with its own size.
+       */
+      size: {
+        current: ["u-current-font-size"],
+        sm: ["w-sz-20", "h-sz-20"],
+        md: ["w-sz-28", "h-sz-28"],
+        full: ["w-full", "h-full"]
+      },
+      /**
+       * Color scheme of the spinner.
+       */
+      intent: (0, import_internal_utils.makeVariants)({
+        current: ["border-current"],
+        main: ["border-main"],
+        support: ["border-support"],
+        accent: ["border-accent"],
+        basic: ["border-basic"],
+        success: ["border-success"],
+        alert: ["border-alert"],
+        error: ["border-error"],
+        info: ["border-info"],
+        neutral: ["border-neutral"]
+      }),
+      /**
+       * Size of the button.
+       */
+      isBackgroundVisible: {
+        true: ["border-b-neutral-container", "border-l-neutral-container"],
+        false: ["border-b-transparent", "border-l-transparent"]
+      }
+    },
+    defaultVariants
+  }
+);
+
+// src/spinner/Spinner.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var Spinner = ({
+  className,
+  size = "current",
+  intent = "current",
+  label,
+  isBackgroundVisible,
+  ref,
+  ...others
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "span",
+    {
+      role: "status",
+      "data-spark-component": "spinner",
+      ref,
+      className: spinnerStyles({ className, size, intent, isBackgroundVisible }),
+      ...others,
+      children: label && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(VisuallyHidden, { children: label })
+    }
+  );
+};
+
+// src/button/Button.styles.tsx
+var import_internal_utils7 = require("@spark-ui/internal-utils");
+var import_class_variance_authority3 = require("class-variance-authority");
+
+// src/button/variants/filled.ts
+var import_internal_utils2 = require("@spark-ui/internal-utils");
+var filledVariants2 = [
+  // Main
+  {
+    intent: "main",
+    design: "filled",
+    class: (0, import_internal_utils2.tw)([
+      "bg-main",
+      "text-on-main",
+      "hover:bg-main-hovered",
+      "enabled:active:bg-main-hovered",
+      "focus-visible:bg-main-hovered"
+    ])
+  },
+  // Support
+  {
+    intent: "support",
+    design: "filled",
+    class: (0, import_internal_utils2.tw)([
+      "bg-support",
+      "text-on-support",
+      "hover:bg-support-hovered",
+      "enabled:active:bg-support-hovered",
+      "focus-visible:bg-support-hovered"
+    ])
+  },
+  // Accent
+  {
+    intent: "accent",
+    design: "filled",
+    class: (0, import_internal_utils2.tw)([
+      "bg-accent",
+      "text-on-accent",
+      "hover:bg-accent-hovered",
+      "enabled:active:bg-accent-hovered",
+      "focus-visible:bg-accent-hovered"
+    ])
+  },
+  // Basic
+  {
+    intent: "basic",
+    design: "filled",
+    class: (0, import_internal_utils2.tw)([
+      "bg-basic",
+      "text-on-basic",
+      "hover:bg-basic-hovered",
+      "enabled:active:bg-basic-hovered",
+      "focus-visible:bg-basic-hovered"
+    ])
+  },
+  // Success
+  {
+    intent: "success",
+    design: "filled",
+    class: (0, import_internal_utils2.tw)([
+      "bg-success",
+      "text-on-success",
+      "hover:bg-success-hovered",
+      "enabled:active:bg-success-hovered",
+      "focus-visible:bg-success-hovered"
+    ])
+  },
+  // Alert
+  {
+    intent: "alert",
+    design: "filled",
+    class: (0, import_internal_utils2.tw)([
+      "bg-alert",
+      "text-on-alert",
+      "hover:bg-alert-hovered",
+      "enabled:active:bg-alert-hovered",
+      "focus-visible:bg-alert-hovered"
+    ])
+  },
+  // Danger
+  {
+    intent: "danger",
+    design: "filled",
+    class: (0, import_internal_utils2.tw)([
+      "text-on-error bg-error",
+      "hover:bg-error-hovered enabled:active:bg-error-hovered",
+      "focus-visible:bg-error-hovered"
+    ])
+  },
+  // Info
+  {
+    intent: "info",
+    design: "filled",
+    class: (0, import_internal_utils2.tw)([
+      "text-on-error bg-info",
+      "hover:bg-info-hovered enabled:active:bg-info-hovered",
+      "focus-visible:bg-info-hovered"
+    ])
+  },
+  // Neutral
+  {
+    intent: "neutral",
+    design: "filled",
+    class: (0, import_internal_utils2.tw)([
+      "bg-neutral",
+      "text-on-neutral",
+      "hover:bg-neutral-hovered",
+      "enabled:active:bg-neutral-hovered",
+      "focus-visible:bg-neutral-hovered"
+    ])
+  },
+  // Surface
+  {
+    intent: "surface",
+    design: "filled",
+    class: (0, import_internal_utils2.tw)([
+      "bg-surface",
+      "text-on-surface",
+      "hover:bg-surface-hovered",
+      "enabled:active:bg-surface-hovered",
+      "focus-visible:bg-surface-hovered"
+    ])
+  },
+  {
+    intent: "surfaceInverse",
+    design: "filled",
+    class: (0, import_internal_utils2.tw)([
+      "bg-surface-inverse",
+      "text-on-surface-inverse",
+      "hover:bg-surface-inverse-hovered",
+      "enabled:active:bg-surface-inverse-hovered",
+      "focus-visible:bg-surface-inverse-hovered"
+    ])
+  }
+];
+
+// src/button/variants/ghost.ts
+var import_internal_utils3 = require("@spark-ui/internal-utils");
+var ghostVariants = [
+  {
+    intent: "main",
+    design: "ghost",
+    class: (0, import_internal_utils3.tw)([
+      "text-on-main-container",
+      "hover:bg-main/dim-5",
+      "enabled:active:bg-main/dim-5",
+      "focus-visible:bg-main/dim-5"
+    ])
+  },
+  {
+    intent: "support",
+    design: "ghost",
+    class: (0, import_internal_utils3.tw)([
+      "text-on-support-container",
+      "hover:bg-support/dim-5",
+      "enabled:active:bg-support/dim-5",
+      "focus-visible:bg-support/dim-5"
+    ])
+  },
+  {
+    intent: "accent",
+    design: "ghost",
+    class: (0, import_internal_utils3.tw)([
+      "text-on-accent-container",
+      "hover:bg-accent/dim-5",
+      "enabled:active:bg-accent/dim-5",
+      "focus-visible:bg-accent/dim-5"
+    ])
+  },
+  {
+    intent: "basic",
+    design: "ghost",
+    class: (0, import_internal_utils3.tw)([
+      "text-on-basic-container",
+      "hover:bg-basic/dim-5",
+      "enabled:active:bg-basic/dim-5",
+      "focus-visible:bg-basic/dim-5"
+    ])
+  },
+  {
+    intent: "success",
+    design: "ghost",
+    class: (0, import_internal_utils3.tw)([
+      "text-on-success-container",
+      "hover:bg-success/dim-5",
+      "enabled:active:bg-success/dim-5",
+      "focus-visible:bg-success/dim-5"
+    ])
+  },
+  {
+    intent: "alert",
+    design: "ghost",
+    class: (0, import_internal_utils3.tw)([
+      "text-on-alert-container",
+      "hover:bg-alert/dim-5",
+      "enabled:active:bg-alert/dim-5",
+      "focus-visible:bg-alert/dim-5"
+    ])
+  },
+  {
+    intent: "danger",
+    design: "ghost",
+    class: (0, import_internal_utils3.tw)([
+      "text-on-error-container",
+      "hover:bg-error/dim-5",
+      "enabled:active:bg-error/dim-5",
+      "focus-visible:bg-error/dim-5"
+    ])
+  },
+  {
+    intent: "info",
+    design: "ghost",
+    class: (0, import_internal_utils3.tw)([
+      "text-on-info-container",
+      "hover:bg-info/dim-5",
+      "enabled:active:bg-info/dim-5",
+      "focus-visible:bg-info/dim-5"
+    ])
+  },
+  {
+    intent: "neutral",
+    design: "ghost",
+    class: (0, import_internal_utils3.tw)([
+      "text-on-neutral-container",
+      "hover:bg-neutral/dim-5",
+      "enabled:active:bg-neutral/dim-5",
+      "focus-visible:bg-neutral/dim-5"
+    ])
+  },
+  {
+    intent: "surface",
+    design: "ghost",
+    class: (0, import_internal_utils3.tw)([
+      "text-surface",
+      "hover:bg-surface/dim-5",
+      "enabled:active:bg-surface/dim-5",
+      "focus-visible:bg-surface/dim-5"
+    ])
+  },
+  {
+    intent: "surfaceInverse",
+    design: "ghost",
+    class: (0, import_internal_utils3.tw)([
+      "text-surface-inverse",
+      "hover:bg-surface-inverse/dim-5",
+      "enabled:active:bg-surface-inverse/dim-5",
+      "focus-visible:bg-surface-inverse/dim-5"
+    ])
+  }
+];
+
+// src/button/variants/outlined.ts
+var import_internal_utils4 = require("@spark-ui/internal-utils");
+var outlinedVariants = [
+  {
+    intent: "main",
+    design: "outlined",
+    class: (0, import_internal_utils4.tw)([
+      "hover:bg-main/dim-5",
+      "enabled:active:bg-main/dim-5",
+      "focus-visible:bg-main/dim-5",
+      "text-main"
+    ])
+  },
+  {
+    intent: "support",
+    design: "outlined",
+    class: (0, import_internal_utils4.tw)([
+      "hover:bg-support/dim-5",
+      "enabled:active:bg-support/dim-5",
+      "focus-visible:bg-support/dim-5",
+      "text-support"
+    ])
+  },
+  {
+    intent: "accent",
+    design: "outlined",
+    class: (0, import_internal_utils4.tw)([
+      "hover:bg-accent/dim-5",
+      "enabled:active:bg-accent/dim-5",
+      "focus-visible:bg-accent/dim-5",
+      "text-accent"
+    ])
+  },
+  {
+    intent: "basic",
+    design: "outlined",
+    class: (0, import_internal_utils4.tw)([
+      "hover:bg-basic/dim-5",
+      "enabled:active:bg-basic/dim-5",
+      "focus-visible:bg-basic/dim-5",
+      "text-basic"
+    ])
+  },
+  {
+    intent: "success",
+    design: "outlined",
+    class: (0, import_internal_utils4.tw)([
+      "hover:bg-success/dim-5",
+      "enabled:active:bg-success/dim-5",
+      "focus-visible:bg-success/dim-5",
+      "text-success"
+    ])
+  },
+  {
+    intent: "alert",
+    design: "outlined",
+    class: (0, import_internal_utils4.tw)([
+      "hover:bg-alert/dim-5",
+      "enabled:active:bg-alert/dim-5",
+      "focus-visible:bg-alert/dim-5",
+      "text-alert"
+    ])
+  },
+  {
+    intent: "danger",
+    design: "outlined",
+    class: (0, import_internal_utils4.tw)([
+      "hover:bg-error/dim-5",
+      "enabled:active:bg-error/dim-5",
+      "focus-visible:bg-error/dim-5",
+      "text-error"
+    ])
+  },
+  {
+    intent: "info",
+    design: "outlined",
+    class: (0, import_internal_utils4.tw)([
+      "hover:bg-info/dim-5",
+      "enabled:active:bg-info/dim-5",
+      "focus-visible:bg-info/dim-5",
+      "text-info"
+    ])
+  },
+  {
+    intent: "neutral",
+    design: "outlined",
+    class: (0, import_internal_utils4.tw)([
+      "hover:bg-neutral/dim-5",
+      "enabled:active:bg-neutral/dim-5",
+      "focus-visible:bg-neutral/dim-5",
+      "text-neutral"
+    ])
+  },
+  {
+    intent: "surface",
+    design: "outlined",
+    class: (0, import_internal_utils4.tw)([
+      "hover:bg-surface/dim-5",
+      "enabled:active:bg-surface/dim-5",
+      "focus-visible:bg-surface/dim-5",
+      "text-surface"
+    ])
+  },
+  {
+    intent: "surfaceInverse",
+    design: "outlined",
+    class: (0, import_internal_utils4.tw)([
+      "hover:bg-surface-inverse/dim-5",
+      "enabled:active:bg-surface-inverse/dim-5",
+      "focus-visible:bg-surface-inverse/dim-5",
+      "text-surface-inverse"
+    ])
+  }
+];
+
+// src/button/variants/tinted.ts
+var import_internal_utils5 = require("@spark-ui/internal-utils");
+var tintedVariants2 = [
+  {
+    intent: "main",
+    design: "tinted",
+    class: (0, import_internal_utils5.tw)([
+      "bg-main-container",
+      "text-on-main-container",
+      "hover:bg-main-container-hovered",
+      "enabled:active:bg-main-container-hovered",
+      "focus-visible:bg-main-container-hovered"
+    ])
+  },
+  {
+    intent: "support",
+    design: "tinted",
+    class: (0, import_internal_utils5.tw)([
+      "bg-support-container",
+      "text-on-support-container",
+      "hover:bg-support-container-hovered",
+      "enabled:active:bg-support-container-hovered",
+      "focus-visible:bg-support-container-hovered"
+    ])
+  },
+  {
+    intent: "accent",
+    design: "tinted",
+    class: (0, import_internal_utils5.tw)([
+      "bg-accent-container",
+      "text-on-accent-container",
+      "hover:bg-accent-container-hovered",
+      "enabled:active:bg-accent-container-hovered",
+      "focus-visible:bg-accent-container-hovered"
+    ])
+  },
+  {
+    intent: "basic",
+    design: "tinted",
+    class: (0, import_internal_utils5.tw)([
+      "bg-basic-container",
+      "text-on-basic-container",
+      "hover:bg-basic-container-hovered",
+      "enabled:active:bg-basic-container-hovered",
+      "focus-visible:bg-basic-container-hovered"
+    ])
+  },
+  {
+    intent: "success",
+    design: "tinted",
+    class: (0, import_internal_utils5.tw)([
+      "bg-success-container",
+      "text-on-success-container",
+      "hover:bg-success-container-hovered",
+      "enabled:active:bg-success-container-hovered",
+      "focus-visible:bg-success-container-hovered"
+    ])
+  },
+  {
+    intent: "alert",
+    design: "tinted",
+    class: (0, import_internal_utils5.tw)([
+      "bg-alert-container",
+      "text-on-alert-container",
+      "hover:bg-alert-container-hovered",
+      "enabled:active:bg-alert-container-hovered",
+      "focus-visible:bg-alert-container-hovered"
+    ])
+  },
+  {
+    intent: "danger",
+    design: "tinted",
+    class: (0, import_internal_utils5.tw)([
+      "bg-error-container",
+      "text-on-error-container",
+      "hover:bg-error-container-hovered",
+      "enabled:active:bg-error-container-hovered",
+      "focus-visible:bg-error-container-hovered"
+    ])
+  },
+  {
+    intent: "info",
+    design: "tinted",
+    class: (0, import_internal_utils5.tw)([
+      "bg-info-container",
+      "text-on-info-container",
+      "hover:bg-info-container-hovered",
+      "enabled:active:bg-info-container-hovered",
+      "focus-visible:bg-info-container-hovered"
+    ])
+  },
+  {
+    intent: "neutral",
+    design: "tinted",
+    class: (0, import_internal_utils5.tw)([
+      "bg-neutral-container",
+      "text-on-neutral-container",
+      "hover:bg-neutral-container-hovered",
+      "enabled:active:bg-neutral-container-hovered",
+      "focus-visible:bg-neutral-container-hovered"
+    ])
+  },
+  {
+    intent: "surface",
+    design: "tinted",
+    class: (0, import_internal_utils5.tw)([
+      "bg-surface",
+      "text-on-surface",
+      "hover:bg-surface-hovered",
+      "enabled:active:bg-surface-hovered",
+      "focus-visible:bg-surface-hovered"
+    ])
+  },
+  {
+    intent: "surfaceInverse",
+    design: "tinted",
+    class: (0, import_internal_utils5.tw)([
+      "bg-surface-inverse",
+      "text-on-surface-inverse",
+      "hover:bg-surface-inverse-hovered",
+      "enabled:active:bg-surface-inverse-hovered",
+      "focus-visible:bg-surface-inverse-hovered"
+    ])
+  }
+];
+
+// src/button/variants/contrast.ts
+var import_internal_utils6 = require("@spark-ui/internal-utils");
+var contrastVariants = [
+  {
+    intent: "main",
+    design: "contrast",
+    class: (0, import_internal_utils6.tw)([
+      "text-on-main-contaier bg-surface",
+      "hover:bg-main-container-hovered",
+      "enabled:active:bg-main-container-hovered",
+      "focus-visible:bg-main-container-hovered"
+    ])
+  },
+  {
+    intent: "support",
+    design: "contrast",
+    class: (0, import_internal_utils6.tw)([
+      "text-on-support-container bg-surface",
+      "hover:bg-support-container-hovered",
+      "enabled:active:bg-support-container-hovered",
+      "focus-visible:bg-support-container-hovered"
+    ])
+  },
+  {
+    intent: "accent",
+    design: "contrast",
+    class: (0, import_internal_utils6.tw)([
+      "text-on-accent-container bg-surface",
+      "hover:bg-accent-container-hovered",
+      "enabled:active:bg-accent-container-hovered",
+      "focus-visible:bg-accent-container-hovered"
+    ])
+  },
+  {
+    intent: "basic",
+    design: "contrast",
+    class: (0, import_internal_utils6.tw)([
+      "text-on-basic-container bg-surface",
+      "hover:bg-basic-container-hovered",
+      "enabled:active:bg-basic-container-hovered",
+      "focus-visible:bg-basic-container-hovered"
+    ])
+  },
+  {
+    intent: "success",
+    design: "contrast",
+    class: (0, import_internal_utils6.tw)([
+      "text-on-success-container bg-surface",
+      "hover:bg-success-container-hovered",
+      "enabled:active:bg-success-container-hovered",
+      "focus-visible:bg-success-container-hovered"
+    ])
+  },
+  {
+    intent: "alert",
+    design: "contrast",
+    class: (0, import_internal_utils6.tw)([
+      "text-on-alert-container bg-surface",
+      "hover:bg-alert-container-hovered",
+      "enabled:active:bg-alert-container-hovered",
+      "focus-visible:bg-alert-container-hovered"
+    ])
+  },
+  {
+    intent: "danger",
+    design: "contrast",
+    class: (0, import_internal_utils6.tw)([
+      "text-on-error-container bg-surface",
+      "hover:bg-error-container-hovered",
+      "enabled:active:bg-error-container-hovered",
+      "focus-visible:bg-error-container-hovered"
+    ])
+  },
+  {
+    intent: "info",
+    design: "contrast",
+    class: (0, import_internal_utils6.tw)([
+      "text-on-info-container bg-surface",
+      "hover:bg-info-container-hovered",
+      "enabled:active:bg-info-container-hovered",
+      "focus-visible:bg-info-container-hovered"
+    ])
+  },
+  {
+    intent: "neutral",
+    design: "contrast",
+    class: (0, import_internal_utils6.tw)([
+      "text-on-neutral-container bg-surface",
+      "hover:bg-neutral-container-hovered",
+      "enabled:active:bg-neutral-container-hovered",
+      "focus-visible:bg-neutral-container-hovered"
+    ])
+  },
+  {
+    intent: "surface",
+    design: "contrast",
+    class: (0, import_internal_utils6.tw)([
+      "text-on-surface bg-surface",
+      "hover:bg-surface-hovered",
+      "enabled:active:bg-surface-hovered",
+      "focus-visible:bg-surface-hovered"
+    ])
+  },
+  {
+    intent: "surfaceInverse",
+    design: "contrast",
+    class: (0, import_internal_utils6.tw)([
+      "text-on-surface-inverse bg-surface-inverse",
+      "hover:bg-surface-inverse-hovered",
+      "enabled:active:bg-surface-inverse-hovered",
+      "focus-visible:bg-surface-inverse-hovered"
+    ])
+  }
+];
+
+// src/button/Button.styles.tsx
+var buttonStyles = (0, import_class_variance_authority3.cva)(
+  [
+    "u-shadow-border-transition",
+    "box-border inline-flex items-center justify-center gap-md whitespace-nowrap",
+    "default:px-lg",
+    "text-body-1 font-bold",
+    "focus-visible:u-outline"
+  ],
+  {
+    variants: {
+      /**
+       * Main style of the button.
+       *
+       * - `filled`: Button will be plain.
+       *
+       * - `outlined`: Button will be transparent with an outline.
+       *
+       * - `tinted`: Button will be filled but using a lighter color scheme.
+       *
+       * - `ghost`: Button will look like a link. No borders, plain text.
+       *
+       * - `contrast`: Button will be surface filled. No borders, plain text.
+       *
+       */
+      design: (0, import_internal_utils7.makeVariants)({
+        filled: [],
+        outlined: ["bg-transparent", "border-sm", "border-current"],
+        tinted: [],
+        ghost: ["default:-mx-md px-md hover:bg-main/dim-5"],
+        contrast: []
+      }),
+      underline: {
+        true: ["underline"]
+      },
+      /**
+       * Color scheme of the button.
+       */
+      intent: (0, import_internal_utils7.makeVariants)({
+        main: [],
+        support: [],
+        accent: [],
+        basic: [],
+        success: [],
+        alert: [],
+        danger: [],
+        info: [],
+        neutral: [],
+        surface: [],
+        surfaceInverse: []
+      }),
+      /**
+       * Size of the button.
+       */
+      size: (0, import_internal_utils7.makeVariants)({
+        sm: ["min-w-sz-32", "h-sz-32"],
+        md: ["min-w-sz-44", "h-sz-44"],
+        lg: ["min-w-sz-56", "h-sz-56"]
+      }),
+      /**
+       * Shape of the button.
+       */
+      shape: (0, import_internal_utils7.makeVariants)({
+        rounded: ["rounded-lg"],
+        square: ["rounded-0"],
+        pill: ["rounded-full"]
+      }),
+      /**
+       * Disable the button, preventing user interaction and adding opacity.
+       */
+      disabled: {
+        true: ["cursor-not-allowed", "opacity-dim-3"],
+        false: ["cursor-pointer"]
+      }
+    },
+    compoundVariants: [
+      ...filledVariants2,
+      ...outlinedVariants,
+      ...tintedVariants2,
+      ...ghostVariants,
+      ...contrastVariants
+    ],
+    defaultVariants: {
+      design: "filled",
+      intent: "main",
+      size: "md",
+      shape: "rounded"
+    }
+  }
+);
+
+// src/button/Button.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var blockedEventHandlers = [
+  "onClick",
+  "onMouseDown",
+  "onMouseUp",
+  "onMouseEnter",
+  "onMouseLeave",
+  "onMouseOver",
+  "onMouseOut",
+  "onKeyDown",
+  "onKeyPress",
+  "onKeyUp",
+  "onSubmit"
+];
+var Button = ({
+  children,
+  design = "filled",
+  disabled = false,
+  intent = "main",
+  isLoading = false,
+  loadingLabel,
+  loadingText,
+  shape = "rounded",
+  size = "md",
+  asChild,
+  className,
+  underline = false,
+  ref,
+  ...others
+}) => {
+  const Component = asChild ? Slot : "button";
+  const shouldNotInteract = !!disabled || isLoading;
+  const disabledEventHandlers = (0, import_react2.useMemo)(() => {
+    const result = {};
+    if (shouldNotInteract) {
+      blockedEventHandlers.forEach((eventHandler) => result[eventHandler] = void 0);
+    }
+    return result;
+  }, [shouldNotInteract]);
+  const spinnerProps = {
+    size: "current",
+    className: loadingText ? "inline-block" : "absolute",
+    ...loadingLabel && { "aria-label": loadingLabel }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    Component,
+    {
+      "data-spark-component": "button",
+      ...Component === "button" && { type: "button" },
+      ref,
+      className: buttonStyles({
+        className,
+        design,
+        disabled: shouldNotInteract,
+        intent,
+        shape,
+        size,
+        underline
+      }),
+      disabled: !!disabled,
+      "aria-busy": isLoading,
+      "aria-live": isLoading ? "assertive" : "off",
+      ...others,
+      ...disabledEventHandlers,
+      children: wrapPolymorphicSlot(
+        asChild,
+        children,
+        (slotted) => isLoading ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Spinner, { ...spinnerProps }),
+          loadingText && loadingText,
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "div",
+            {
+              "aria-hidden": true,
+              className: (0, import_class_variance_authority4.cx)("gap-md", loadingText ? "hidden" : "inline-flex opacity-0"),
+              children: slotted
+            }
+          )
+        ] }) : slotted
+      )
+    }
+  );
+};
+Button.displayName = "Button";
+
+// src/snackbar/SnackbarItemContext.tsx
+var import_react3 = require("react");
+var SnackbarItemContext = (0, import_react3.createContext)({});
+var useSnackbarItemContext = () => (0, import_react3.useContext)(SnackbarItemContext);
+
+// src/snackbar/SnackbarItemAction.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var SnackbarItemAction = ({
+  design: designProp = "filled",
+  intent: intentProp = "neutral",
+  onClick,
+  children,
+  className,
+  ref,
+  ...rest
+}) => {
+  const { toast, state } = useSnackbarItemContext();
+  const intent = intentProp ?? toast.content.intent;
+  const design = designProp ?? toast.content.design;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    Button,
+    {
+      "data-spark-component": "snackbar-item-action",
+      ref,
+      size: "md",
+      shape: "rounded",
+      ...intent === "inverse" ? {
+        design: "ghost",
+        intent: "surface"
+      } : {
+        design,
+        intent: intent === "error" ? "danger" : intent
+      },
+      onClick: (e) => {
+        onClick?.(e);
+        state.close(toast.key);
+      },
+      style: { gridArea: "action", ...rest.style },
+      className: (0, import_class_variance_authority5.cx)("ml-md justify-self-end", className),
+      ...rest,
+      children
+    }
+  );
+};
+SnackbarItemAction.displayName = "Snackbar.ItemAction";
+
+// src/snackbar/SnackbarItemClose.tsx
+var import_Close = require("@spark-ui/icons/Close");
+var import_class_variance_authority8 = require("class-variance-authority");
+
+// src/icon/Icon.tsx
+var import_react4 = require("react");
+
+// src/icon/Icon.styles.tsx
+var import_internal_utils8 = require("@spark-ui/internal-utils");
+var import_class_variance_authority6 = require("class-variance-authority");
+var iconStyles = (0, import_class_variance_authority6.cva)(["fill-current shrink-0"], {
+  variants: {
+    /**
+     * Color scheme of the icon.
+     */
+    intent: (0, import_internal_utils8.makeVariants)({
+      current: ["text-current"],
+      main: ["text-main"],
+      support: ["text-support"],
+      accent: ["text-accent"],
+      basic: ["text-basic"],
+      success: ["text-success"],
+      alert: ["text-alert"],
+      error: ["text-error"],
+      info: ["text-info"],
+      neutral: ["text-neutral"]
+    }),
+    /**
+     * Sets the size of the icon.
+     */
+    size: (0, import_internal_utils8.makeVariants)({
+      current: ["u-current-font-size"],
+      sm: ["w-sz-16", "h-sz-16"],
+      md: ["w-sz-24", "h-sz-24"],
+      lg: ["w-sz-32", "h-sz-32"],
+      xl: ["w-sz-40", "h-sz-40"]
+    })
+  }
+});
+
+// src/icon/Icon.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var Icon = ({
+  label,
+  className,
+  size = "current",
+  intent = "current",
+  children,
+  ...others
+}) => {
+  const child = import_react4.Children.only(children);
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+    (0, import_react4.cloneElement)(child, {
+      className: iconStyles({ className, size, intent }),
+      "data-spark-component": "icon",
+      "aria-hidden": "true",
+      focusable: "false",
+      ...others
+    }),
+    label && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(VisuallyHidden, { children: label })
+  ] });
+};
+Icon.displayName = "Icon";
+
+// src/icon-button/IconButton.styles.tsx
+var import_internal_utils9 = require("@spark-ui/internal-utils");
+var import_class_variance_authority7 = require("class-variance-authority");
+var iconButtonStyles = (0, import_class_variance_authority7.cva)(["pl-0 pr-0"], {
+  variants: {
+    /**
+     * Sets the size of the icon.
+     */
+    size: (0, import_internal_utils9.makeVariants)({
+      sm: ["text-body-1"],
+      md: ["text-body-1"],
+      lg: ["text-display-3"]
+    })
+  }
+});
+
+// src/icon-button/IconButton.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var IconButton = ({
+  design = "filled",
+  disabled = false,
+  intent = "main",
+  shape = "rounded",
+  size = "md",
+  className,
+  ref,
+  ...others
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    Button,
+    {
+      "data-spark-component": "icon-button",
+      ref,
+      className: iconButtonStyles({ size, className }),
+      design,
+      disabled,
+      intent,
+      shape,
+      size,
+      ...others
+    }
+  );
+};
+IconButton.displayName = "IconButton";
+
+// src/snackbar/SnackbarItemClose.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var SnackbarItemClose = ({
+  design: designProp = "filled",
+  intent: intentProp = "neutral",
+  "aria-label": ariaLabel,
+  onClick,
+  className,
+  ref,
+  ...rest
+}) => {
+  const { toast, state } = useSnackbarItemContext();
+  const intent = intentProp ?? toast.content.intent;
+  const design = designProp ?? toast.content.design;
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    IconButton,
+    {
+      "data-spark-component": "snackbar-item-close",
+      ref,
+      size: "md",
+      shape: "rounded",
+      ...intent === "inverse" ? {
+        design: "ghost",
+        intent: "surface"
+      } : {
+        design,
+        intent: intent === "error" ? "danger" : intent
+      },
+      "aria-label": ariaLabel,
+      onClick: (e) => {
+        onClick?.(e);
+        state.close(toast.key);
+      },
+      style: { gridArea: "close", ...rest.style },
+      className: (0, import_class_variance_authority8.cx)("ml-md justify-self-end", className),
+      ...rest,
+      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon, { size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_Close.Close, {}) })
+    }
+  );
+};
+SnackbarItemClose.displayName = "Snackbar.ItemClose";
+
+// src/snackbar/SnackbarItemIcon.tsx
+var import_class_variance_authority9 = require("class-variance-authority");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var SnackbarItemIcon = ({
+  children,
+  className,
+  ...rest
+}) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  Icon,
+  {
+    size: "md",
+    className: (0, import_class_variance_authority9.cx)("mx-md", className),
+    style: { gridArea: "icon", ...rest.style },
+    ...rest,
+    children
+  }
+);
+SnackbarItemIcon.displayName = "Snackbar.ItemIcon";
+
+// src/snackbar/useSwipe.ts
+var import_react5 = require("react");
+var SWIPE_THRESHOLD = 75;
+var useSwipe = ({
+  swipeRef,
+  onSwipeStart,
+  onSwipeMove,
+  onSwipeCancel,
+  onSwipeEnd,
+  threshold = 10
+}) => {
+  const [state, setState] = (0, import_react5.useState)();
+  const direction = (0, import_react5.useRef)(null);
+  const origin = (0, import_react5.useRef)(null);
+  const delta = (0, import_react5.useRef)(null);
+  const handleSwipeStart = (evt) => {
+    origin.current = { x: evt.clientX, y: evt.clientY };
+    document.addEventListener("selectstart", (e) => e.preventDefault());
+  };
+  const handleSwipeMove = (evt) => {
+    if (!origin.current) return;
+    const deltaX = Math.abs(evt.clientX - origin.current.x);
+    const deltaY = Math.abs(evt.clientY - origin.current.y);
+    let moveState;
+    if (deltaX > deltaY && deltaX > threshold) {
+      direction.current = evt.clientX > origin.current.x ? "right" : "left";
+    } else if (deltaY > threshold) {
+      direction.current = evt.clientY > origin.current.y ? "down" : "up";
+    }
+    if (!direction.current) return;
+    if (!delta.current) {
+      moveState = "start";
+      delta.current = { x: deltaX, y: deltaY };
+      onSwipeStart?.({ state: moveState, direction: direction.current });
+    } else {
+      moveState = "move";
+      delta.current = { x: deltaX, y: deltaY };
+      swipeRef.current.style.setProperty(
+        "--swipe-position-x",
+        `${deltaX > deltaY ? evt.clientX - origin.current.x : 0}px`
+      );
+      swipeRef.current.style.setProperty(
+        "--swipe-position-y",
+        `${!(deltaX > deltaY) ? evt.clientY - origin.current.y : 0}px`
+      );
+      onSwipeMove?.({ state: moveState, direction: direction.current });
+    }
+    setState(moveState);
+  };
+  const handleSwipeEnd = () => {
+    const proxyDelta = delta.current;
+    origin.current = null;
+    delta.current = null;
+    if (proxyDelta) {
+      const { x: deltaX, y: deltaY } = proxyDelta;
+      let endState;
+      if (deltaX > deltaY) {
+        if (deltaX > SWIPE_THRESHOLD) {
+          endState = "end";
+          onSwipeEnd?.({ state: endState, direction: direction.current });
+        } else {
+          endState = "cancel";
+          onSwipeCancel?.({ state: endState, direction: direction.current });
+        }
+      } else {
+        if (deltaY > SWIPE_THRESHOLD) {
+          endState = "end";
+          onSwipeEnd?.({ state: endState, direction: direction.current });
+        } else {
+          endState = "cancel";
+          onSwipeCancel?.({ state: endState, direction: direction.current });
+        }
+      }
+      setState(endState);
+      document.removeEventListener("selectstart", (e) => e.preventDefault());
+    }
+  };
+  (0, import_react5.useEffect)(() => {
+    if (!swipeRef.current) return;
+    const swipeElement = swipeRef.current;
+    swipeElement.addEventListener("pointerdown", handleSwipeStart);
+    document.addEventListener("pointermove", handleSwipeMove);
+    document.addEventListener("pointerup", handleSwipeEnd);
+    return () => {
+      swipeElement.removeEventListener("pointerdown", handleSwipeStart);
+      document.removeEventListener("pointermove", handleSwipeMove);
+      document.removeEventListener("pointerup", handleSwipeEnd);
+    };
+  }, []);
+  return {
+    state,
+    direction: direction.current
+  };
+};
+
+// src/snackbar/SnackbarItem.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var SnackbarItem = ({
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledby,
+  "aria-describedby": ariaDescribedby,
+  "aria-details": ariaDetails,
+  design: designProp,
+  intent: intentProp,
+  actionOnNewline: actionOnNewlineProp,
+  className,
+  children,
+  ref: forwardedRef,
+  ...rest
+}) => {
+  const innerRef = (0, import_react6.useRef)(null);
+  const ref = typeof forwardedRef !== "function" ? forwardedRef || innerRef : innerRef;
+  const { toast, state } = useSnackbarItemContext();
+  const { state: swipeState, direction: swipeDirection } = useSwipe({
+    swipeRef: ref,
+    onSwipeStart: state.pauseAll,
+    onSwipeCancel: state.resumeAll,
+    onSwipeEnd: ({ direction }) => {
+      ;
+      ["left", "right"].includes(`${direction}`) && state.close(toast.key);
+    }
+  });
+  const { message, icon, isClosable, onAction, actionLabel } = toast.content;
+  const intent = intentProp ?? toast.content.intent;
+  const design = designProp ?? toast.content.design;
+  const actionOnNewline = actionOnNewlineProp ?? toast.content.actionOnNewline;
+  const ariaProps = {
+    ariaLabel,
+    ariaLabelledby,
+    ariaDescribedby,
+    ariaDetails
+  };
+  const { toastProps, titleProps, closeButtonProps, contentProps } = (0, import_toast.useToast)(
+    { toast, ...ariaProps },
+    state,
+    ref
+  );
+  const findElement = (0, import_react6.useCallback)(
+    (elementDisplayName) => {
+      const childrenArray = import_react6.Children.toArray(children);
+      const match = childrenArray.filter(import_react6.isValidElement).find(
+        (child) => !!child.type.displayName?.includes(
+          elementDisplayName
+        )
+      );
+      return match;
+    },
+    [children]
+  );
+  const iconFromChildren = findElement("Snackbar.ItemIcon");
+  const actionBtnFromChildren = findElement("Snackbar.ItemAction");
+  const closeBtnFromChildren = findElement("Snackbar.ItemClose");
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    "div",
+    {
+      "data-spark-component": "snackbar-item",
+      className: snackbarItemVariant({ design, intent, className }),
+      "data-animation": toast.animation,
+      ...!(swipeState === "cancel" && toast.animation === "exiting") && {
+        "data-swipe": swipeState,
+        "data-swipe-direction": swipeDirection
+      },
+      ...toast.animation === "exiting" && {
+        // Remove snackbar when the exiting animation completes
+        onAnimationEnd: () => state.remove(toast.key)
+      },
+      ref,
+      ...toastProps,
+      ...rest,
+      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: snackbarItemVariantContent({ actionOnNewline }), ...contentProps, children: [
+        renderSubComponent(iconFromChildren, icon ? SnackbarItemIcon : null, {
+          children: icon
+        }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          "p",
+          {
+            className: "px-md py-lg text-body-2 row-span-3",
+            style: { gridArea: "message" },
+            ...titleProps,
+            children: message
+          }
+        ),
+        renderSubComponent(
+          actionBtnFromChildren,
+          actionLabel && onAction ? SnackbarItemAction : null,
+          { intent, design, onClick: onAction, children: actionLabel }
+        ),
+        renderSubComponent(closeBtnFromChildren, isClosable ? SnackbarItemClose : null, {
+          intent,
+          design,
+          /**
+           * React Spectrum typing of aria-label is inaccurate, and aria-label value should never be undefined.
+           * See https://github.com/adobe/react-spectrum/blob/main/packages/%40react-aria/i18n/src/useLocalizedStringFormatter.ts#L40
+           */
+          "aria-label": closeButtonProps["aria-label"]
+        })
+      ] })
+    }
+  );
+};
+SnackbarItem.displayName = "Snackbar.Item";
+var renderSubComponent = (childItem, defaultItem, props) => {
+  if (childItem) {
+    return (0, import_react6.cloneElement)(childItem, { ...props, ...childItem.props });
+  } else if (defaultItem) {
+    const Item = defaultItem;
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Item, { ...props });
+  } else {
+    return null;
+  }
+};
+
+// src/snackbar/SnackbarRegion.styles.ts
+var import_class_variance_authority10 = require("class-variance-authority");
+var snackbarRegionVariant = (0, import_class_variance_authority10.cva)(
+  [
+    "fixed inset-x-lg z-toast group",
+    "outline-hidden pointer-events-none",
+    "grid grid-rows-1 grid-cols-1 gap-lg"
+  ],
+  {
+    variants: {
+      /**
+       * Set snackbar item position
+       * @default 'bottom'
+       */
+      position: {
+        top: "top-lg justify-items-center",
+        "top-right": "top-lg justify-items-end",
+        "top-left": "top-lg justify-items-start",
+        bottom: "bottom-lg justify-items-center",
+        "bottom-right": "bottom-lg justify-items-end",
+        "bottom-left": "bottom-lg justify-items-start"
+      }
+    },
+    defaultVariants: {
+      position: "bottom"
+    }
+  }
+);
+
+// src/snackbar/SnackbarRegion.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var SnackbarRegion = ({
+  children = /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SnackbarItem, {}),
+  state,
+  position = "bottom",
+  className,
+  ref: forwardedRef,
+  ...rest
+}) => {
+  const innerRef = (0, import_react7.useRef)(null);
+  const ref = forwardedRef && typeof forwardedRef !== "function" ? forwardedRef : innerRef;
+  const { regionProps } = (0, import_toast2.useToastRegion)(rest, state, ref);
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    "div",
+    {
+      ...regionProps,
+      ref,
+      "data-position": position,
+      className: snackbarRegionVariant({ position, className }),
+      children: state.visibleToasts.map((toast) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SnackbarItemContext.Provider, { value: { toast, state }, children: (0, import_react7.cloneElement)(children, { key: toast.key }) }, toast.key))
+    }
+  );
+};
+
+// src/snackbar/useSnackbarGlobalStore.ts
+var import_react8 = require("react");
+var useSnackbarGlobalStore = ({
+  providers,
+  subscriptions
+}) => {
+  const subscribe = (0, import_react8.useCallback)(
+    (listener) => {
+      subscriptions.add(listener);
+      return () => subscriptions.delete(listener);
+    },
+    [subscriptions]
+  );
+  const getLastSnackbarProvider = (0, import_react8.useCallback)(() => [...providers].reverse()[0], [providers]);
+  const addProvider = (0, import_react8.useCallback)(
+    (provider2) => {
+      providers.add(provider2);
+      for (const subscribeFn of subscriptions) {
+        subscribeFn();
+      }
+    },
+    [providers, subscriptions]
+  );
+  const deleteProvider = (0, import_react8.useCallback)(
+    (provider2) => {
+      providers.delete(provider2);
+      for (const subscribeFn of subscriptions) {
+        subscribeFn();
+      }
+    },
+    [providers, subscriptions]
+  );
+  const provider = (0, import_react8.useSyncExternalStore)(subscribe, getLastSnackbarProvider, getLastSnackbarProvider);
+  return {
+    provider,
+    addProvider,
+    deleteProvider
+  };
+};
+
+// src/snackbar/Snackbar.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var GLOBAL_SNACKBAR_QUEUE = null;
+var getGlobalSnackBarQueue = () => {
+  if (!GLOBAL_SNACKBAR_QUEUE) {
+    GLOBAL_SNACKBAR_QUEUE = new import_toast3.ToastQueue({
+      maxVisibleToasts: 1,
+      hasExitAnimation: true
+    });
+  }
+  return GLOBAL_SNACKBAR_QUEUE;
+};
+var clearSnackbarQueue = () => {
+  GLOBAL_SNACKBAR_QUEUE = null;
+};
+var GLOBAL_SNACKBAR_STORE = {
+  providers: /* @__PURE__ */ new Set(),
+  subscriptions: /* @__PURE__ */ new Set()
+};
+var Snackbar = ({ ref: forwardedRef, ...props }) => {
+  const ref = (0, import_react9.useRef)(null);
+  const state = (0, import_toast3.useToastQueue)(getGlobalSnackBarQueue());
+  const { provider, addProvider, deleteProvider } = useSnackbarGlobalStore(GLOBAL_SNACKBAR_STORE);
+  (0, import_react9.useEffect)(() => {
+    addProvider(ref);
+    return () => {
+      for (const toast of getGlobalSnackBarQueue().visibleToasts) {
+        toast.animation = void 0;
+      }
+      deleteProvider(ref);
+    };
+  }, []);
+  return ref === provider && state.visibleToasts.length > 0 ? (0, import_react_dom.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SnackbarRegion, { ref: forwardedRef, state, ...props }), document.body) : null;
+};
+Snackbar.displayName = "Snackbar";
+var addSnackbar = ({ onClose, timeout = 5e3, priority, ...content }) => {
+  const queue = getGlobalSnackBarQueue();
+  queue.add(content, {
+    onClose,
+    timeout: timeout && !content.onAction ? Math.max(timeout, 5e3) : void 0,
+    priority
+  });
+};
+
+// src/snackbar/index.ts
+var Snackbar2 = Object.assign(Snackbar, {
+  Item: SnackbarItem,
+  ItemAction: SnackbarItemAction,
+  ItemClose: SnackbarItemClose,
+  ItemIcon: SnackbarItemIcon
+});
+Snackbar2.displayName = "Snackbar";
+SnackbarItem.displayName = "Snackbar.Item";
+SnackbarItemAction.displayName = "Snackbar.ItemAction";
+SnackbarItemClose.displayName = "Snackbar.ItemClose";
+SnackbarItemIcon.displayName = "Snackbar.ItemIcon";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Snackbar,
+  addSnackbar,
+  clearSnackbarQueue
+});
+//# sourceMappingURL=index.js.map