@spark-ui/components 10.22.1 → 11.0.1

package/dist/tabs/index.js

@@ -1,1376 +0,0 @@
-"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/tabs/index.ts
-var tabs_exports = {};
-__export(tabs_exports, {
-  Tabs: () => Tabs2
-});
-module.exports = __toCommonJS(tabs_exports);
-
-// src/tabs/Tabs.tsx
-var import_radix_ui = require("radix-ui");
-
-// src/tabs/TabsContext.tsx
-var import_react = require("react");
-var TabsContext = (0, import_react.createContext)({});
-var useTabsContext = () => {
-  const context = (0, import_react.useContext)(TabsContext);
-  if (!context) {
-    throw Error("useTabsContext must be used within a TabsContext Provider");
-  }
-  return context;
-};
-
-// src/tabs/TabsRoot.styles.ts
-var import_class_variance_authority = require("class-variance-authority");
-var rootStyles = (0, import_class_variance_authority.cva)([
-  "flex",
-  "data-[orientation=horizontal]:flex-col",
-  "data-[orientation=vertical]:flex-row",
-  "max-w-full"
-]);
-
-// src/tabs/Tabs.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
-var Tabs = ({
-  intent = "basic",
-  size = "md",
-  /**
-   * Default Radix Primitive values
-   * see https://www.radix-ui.com/docs/primitives/components/tabs#root
-   */
-  asChild = false,
-  forceMount = false,
-  orientation = "horizontal",
-  children,
-  className,
-  ref,
-  ...rest
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    TabsContext.Provider,
-    {
-      value: {
-        intent,
-        size,
-        orientation,
-        forceMount
-      },
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_radix_ui.Tabs.Root,
-        {
-          ref,
-          asChild,
-          orientation,
-          className: rootStyles({ className }),
-          "data-spark-component": "tabs",
-          activationMode: "automatic",
-          ...rest,
-          children
-        }
-      )
-    }
-  );
-};
-Tabs.displayName = "Tabs";
-
-// src/tabs/TabsContent.tsx
-var import_radix_ui2 = require("radix-ui");
-
-// src/tabs/TabsContent.styles.ts
-var import_class_variance_authority2 = require("class-variance-authority");
-var contentStyles = (0, import_class_variance_authority2.cva)(["w-full p-lg", "focus-visible:u-outline-inset"], {
-  variants: {
-    forceMount: {
-      true: "data-[state=inactive]:hidden",
-      false: ""
-    }
-  }
-});
-
-// src/tabs/TabsContent.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var TabsContent = ({
-  /**
-   * Default Radix Primitive values
-   * see https://www.radix-ui.com/docs/primitives/components/tabs#content
-   */
-  children,
-  asChild = false,
-  className,
-  ref,
-  ...rest
-}) => {
-  const { forceMount } = useTabsContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-    import_radix_ui2.Tabs.Content,
-    {
-      "data-spark-component": "tabs-content",
-      ref,
-      forceMount: forceMount || rest.forceMount,
-      className: contentStyles({ className, forceMount }),
-      asChild,
-      ...rest,
-      children
-    }
-  );
-};
-TabsContent.displayName = "Tabs.Content";
-
-// src/tabs/TabsList.tsx
-var import_ArrowVerticalLeft = require("@spark-ui/icons/ArrowVerticalLeft");
-var import_ArrowVerticalRight = require("@spark-ui/icons/ArrowVerticalRight");
-var import_radix_ui4 = require("radix-ui");
-var import_react6 = require("react");
-
-// src/button/Button.tsx
-var import_class_variance_authority5 = require("class-variance-authority");
-var import_react3 = require("react");
-
-// src/slot/Slot.tsx
-var import_radix_ui3 = require("radix-ui");
-var import_react2 = require("react");
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var Slottable = import_radix_ui3.Slot.Slottable;
-var Slot = ({ ref, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_radix_ui3.Slot.Root, { ref, ...props });
-};
-var wrapPolymorphicSlot = (asChild, children, callback) => {
-  if (!asChild) return callback(children);
-  return (0, import_react2.isValidElement)(children) ? (0, import_react2.cloneElement)(
-    children,
-    void 0,
-    callback(children.props.children)
-  ) : null;
-};
-
-// src/visually-hidden/VisuallyHidden.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var VisuallyHidden = ({ asChild = false, ref, ...props }) => {
-  const Component = asChild ? Slot : "span";
-  return /* @__PURE__ */ (0, import_jsx_runtime4.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_authority3 = require("class-variance-authority");
-var defaultVariants = {
-  intent: "current",
-  size: "current",
-  isBackgroundVisible: false
-};
-var spinnerStyles = (0, import_class_variance_authority3.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_runtime5 = require("react/jsx-runtime");
-var Spinner = ({
-  className,
-  size = "current",
-  intent = "current",
-  label,
-  isBackgroundVisible,
-  ref,
-  ...others
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-    "span",
-    {
-      role: "status",
-      "data-spark-component": "spinner",
-      ref,
-      className: spinnerStyles({ className, size, intent, isBackgroundVisible }),
-      ...others,
-      children: label && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(VisuallyHidden, { children: label })
-    }
-  );
-};
-
-// src/button/Button.styles.tsx
-var import_internal_utils7 = require("@spark-ui/internal-utils");
-var import_class_variance_authority4 = require("class-variance-authority");
-
-// src/button/variants/filled.ts
-var import_internal_utils2 = require("@spark-ui/internal-utils");
-var filledVariants = [
-  // 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 tintedVariants = [
-  {
-    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_authority4.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: [
-      ...filledVariants,
-      ...outlinedVariants,
-      ...tintedVariants,
-      ...ghostVariants,
-      ...contrastVariants
-    ],
-    defaultVariants: {
-      design: "filled",
-      intent: "main",
-      size: "md",
-      shape: "rounded"
-    }
-  }
-);
-
-// src/button/Button.tsx
-var import_jsx_runtime6 = 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_react3.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_runtime6.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_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Spinner, { ...spinnerProps }),
-          loadingText && loadingText,
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-            "div",
-            {
-              "aria-hidden": true,
-              className: (0, import_class_variance_authority5.cx)("gap-md", loadingText ? "hidden" : "inline-flex opacity-0"),
-              children: slotted
-            }
-          )
-        ] }) : slotted
-      )
-    }
-  );
-};
-Button.displayName = "Button";
-
-// 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_runtime7 = 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_runtime7.jsxs)(import_jsx_runtime7.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_runtime7.jsx)(VisuallyHidden, { children: label })
-  ] });
-};
-Icon.displayName = "Icon";
-
-// src/tabs/TabsList.styles.ts
-var import_class_variance_authority7 = require("class-variance-authority");
-var wrapperStyles = (0, import_class_variance_authority7.cva)(["relative flex"]);
-var listStyles = (0, import_class_variance_authority7.cva)([
-  "flex w-full",
-  "data-[orientation=horizontal]:flex-row",
-  "data-[orientation=vertical]:flex-col",
-  "overflow-y-hidden u-no-scrollbar data-[orientation=vertical]:overflow-x-hidden",
-  "after:flex after:shrink after:grow after:border-outline",
-  "data-[orientation=horizontal]:after:border-b-sm",
-  "data-[orientation=vertical]:after:border-r-sm"
-]);
-var navigationArrowStyles = (0, import_class_variance_authority7.cva)([
-  "h-auto! flex-none",
-  "border-b-sm border-outline",
-  "outline-hidden",
-  "focus-visible:border-none focus-visible:bg-surface-hovered focus-visible:u-outline-inset!"
-]);
-
-// src/tabs/useResizeObserver.ts
-var import_react5 = require("react");
-var useResizeObserver = (target, onResize) => {
-  const [size, setSize] = (0, import_react5.useState)({ width: void 0, height: void 0 });
-  const resizeObserverRef = (0, import_react5.useRef)(null);
-  const resizeCallbackRef = (0, import_react5.useRef)(onResize);
-  (0, import_react5.useEffect)(() => {
-    resizeCallbackRef.current = onResize;
-  }, [onResize]);
-  (0, import_react5.useEffect)(() => {
-    const targetElm = target && "current" in target ? target.current : target;
-    if (!targetElm || resizeObserverRef.current) {
-      return;
-    }
-    resizeObserverRef.current = new ResizeObserver(([entry]) => {
-      const { inlineSize: width, blockSize: height } = entry?.borderBoxSize?.[0] ?? {};
-      resizeCallbackRef.current?.(entry);
-      setSize({ width, height });
-    });
-    resizeObserverRef.current.observe(targetElm);
-    return () => {
-      resizeObserverRef.current && resizeObserverRef.current.unobserve(targetElm);
-    };
-  }, [target, resizeObserverRef, resizeCallbackRef]);
-  return size;
-};
-
-// src/tabs/TabsList.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var TabsList = ({
-  /**
-   * Default Radix Primitive values
-   * see https://www.radix-ui.com/docs/primitives/components/tabs#list
-   */
-  asChild = false,
-  loop = false,
-  children,
-  className,
-  ref,
-  ...rest
-}) => {
-  const wrapperRef = (0, import_react6.useRef)(null);
-  const innerRef = (0, import_react6.useRef)(null);
-  const listRef = ref || innerRef;
-  const { orientation } = useTabsContext();
-  const { width } = useResizeObserver(wrapperRef);
-  const [arrows, setArrows] = (0, import_react6.useState)({
-    prev: "hidden",
-    next: "hidden"
-  });
-  (0, import_react6.useEffect)(() => {
-    if (typeof listRef === "function" || !listRef.current) {
-      return;
-    }
-    if (orientation !== "horizontal") {
-      setArrows({ prev: "hidden", next: "hidden" });
-    } else {
-      setArrows({
-        prev: listRef.current.scrollWidth > listRef.current.clientWidth ? "visible" : "hidden",
-        next: listRef.current.scrollWidth > listRef.current.clientWidth ? "visible" : "hidden"
-      });
-    }
-  }, [orientation, listRef, width]);
-  (0, import_react6.useEffect)(() => {
-    if (typeof listRef === "function" || !listRef.current || arrows.prev === "hidden" || loop) {
-      return;
-    }
-    const toggleArrowsVisibility = (target) => {
-      setArrows({
-        prev: target.scrollLeft > 0 ? "visible" : "disabled",
-        next: target.scrollLeft + target.clientWidth < target.scrollWidth ? "visible" : "disabled"
-      });
-    };
-    const currentList = listRef.current;
-    toggleArrowsVisibility(currentList);
-    currentList.addEventListener(
-      "scroll",
-      ({ target }) => toggleArrowsVisibility(target)
-    );
-    return () => currentList.removeEventListener(
-      "scroll",
-      ({ target }) => toggleArrowsVisibility(target)
-    );
-  }, [listRef, arrows.prev, loop]);
-  const handlePrevClick = () => {
-    if (typeof listRef === "function" || !listRef.current) {
-      return;
-    }
-    const shouldLoopForward = loop && listRef.current.scrollLeft <= 0;
-    listRef.current.scrollTo({
-      left: shouldLoopForward ? listRef.current.scrollLeft + listRef.current.scrollWidth - listRef.current.clientWidth : listRef.current.scrollLeft - listRef.current.clientWidth,
-      behavior: "smooth"
-    });
-  };
-  const handleNextClick = () => {
-    if (typeof listRef === "function" || !listRef.current) {
-      return;
-    }
-    const shouldLoopBackward = loop && listRef.current.scrollLeft + listRef.current.clientWidth >= listRef.current.scrollWidth;
-    listRef.current.scrollTo({
-      left: shouldLoopBackward ? 0 : listRef.current.scrollLeft + listRef.current.clientWidth,
-      behavior: "smooth"
-    });
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: wrapperStyles({ className }), ref: wrapperRef, children: [
-    arrows.prev !== "hidden" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-      Button,
-      {
-        shape: "square",
-        intent: "surface",
-        size: "sm",
-        className: navigationArrowStyles(),
-        onClick: handlePrevClick,
-        disabled: arrows.prev === "disabled",
-        "aria-label": "Scroll left",
-        children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_ArrowVerticalLeft.ArrowVerticalLeft, {}) })
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-      import_radix_ui4.Tabs.List,
-      {
-        "data-spark-component": "tabs-list",
-        ref: listRef,
-        className: listStyles(),
-        asChild,
-        loop,
-        ...rest,
-        children
-      }
-    ),
-    arrows.next !== "hidden" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-      Button,
-      {
-        shape: "square",
-        intent: "surface",
-        size: "sm",
-        className: navigationArrowStyles(),
-        onClick: handleNextClick,
-        disabled: arrows.next === "disabled",
-        "aria-label": "Scroll right",
-        children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_ArrowVerticalRight.ArrowVerticalRight, {}) })
-      }
-    )
-  ] });
-};
-TabsList.displayName = "Tabs.List";
-
-// src/tabs/TabsTrigger.tsx
-var import_radix_ui5 = require("radix-ui");
-
-// src/tabs/TabsTrigger.styles.ts
-var import_internal_utils9 = require("@spark-ui/internal-utils");
-var import_class_variance_authority8 = require("class-variance-authority");
-var triggerVariants = (0, import_class_variance_authority8.cva)(
-  [
-    "px-md",
-    "relative flex flex-none items-center",
-    "border-outline",
-    "hover:not-disabled:bg-surface-hovered",
-    "after:absolute",
-    "data-[state=active]:font-bold",
-    "data-[state=inactive]:not-disabled:cursor-pointer",
-    "data-[orientation=horizontal]:border-b-sm data-[orientation=horizontal]:after:inset-x-0 data-[orientation=horizontal]:after:bottom-[-1px] data-[orientation=horizontal]:after:h-sz-2",
-    "data-[orientation=vertical]:border-r-sm data-[orientation=vertical]:after:inset-y-0 data-[orientation=vertical]:after:right-[-1px] data-[orientation=vertical]:after:w-sz-2",
-    "focus-visible:border-none focus-visible:bg-surface-hovered focus-visible:u-outline-inset",
-    "disabled:cursor-not-allowed disabled:opacity-dim-3",
-    "gap-md [&>*:first-child]:ml-md [&>*:last-child]:mr-md",
-    "[&>svg:last-child:first-child]:mx-auto"
-  ],
-  {
-    variants: {
-      /**
-       * Change the color scheme of the tabs
-       * @default basic
-       */
-      intent: (0, import_internal_utils9.makeVariants)({
-        main: ["data-[state=active]:text-main data-[state=active]:after:bg-main"],
-        support: ["data-[state=active]:text-support data-[state=active]:after:bg-support"],
-        basic: ["data-[state=active]:text-basic data-[state=active]:after:bg-basic"]
-      }),
-      /**
-       * Change the size of the tabs
-       * @default md
-       */
-      size: {
-        xs: ["h-sz-32 min-w-sz-32 text-caption"],
-        sm: ["h-sz-36 min-w-sz-36 text-body-2"],
-        md: ["h-sz-40 min-w-sz-40 text-body-1"]
-      }
-    },
-    defaultVariants: {
-      intent: "basic",
-      size: "md"
-    }
-  }
-);
-
-// src/tabs/TabsTrigger.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
-var TabsTrigger = ({
-  /**
-   * Default Radix Primitive values
-   * see https://www.radix-ui.com/docs/primitives/components/tabs#trigger
-   */
-  asChild = false,
-  value,
-  disabled = false,
-  children,
-  className,
-  ref,
-  ...rest
-}) => {
-  const { intent, size } = useTabsContext();
-  const scrollToFocusedElement = ({ target }) => target.scrollIntoView({
-    behavior: "smooth",
-    block: "nearest",
-    inline: "nearest"
-  });
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-    import_radix_ui5.Tabs.Trigger,
-    {
-      "data-spark-component": "tabs-trigger",
-      ref,
-      className: triggerVariants({ intent, size, className }),
-      asChild,
-      disabled,
-      value,
-      onFocus: scrollToFocusedElement,
-      ...rest,
-      children
-    }
-  );
-};
-TabsTrigger.displayName = "Tabs.Trigger";
-
-// src/tabs/index.ts
-var Tabs2 = Object.assign(Tabs, {
-  List: TabsList,
-  Trigger: TabsTrigger,
-  Content: TabsContent
-});
-Tabs2.displayName = "Tabs";
-TabsList.displayName = "Tabs.List";
-TabsTrigger.displayName = "Tabs.Trigger";
-TabsContent.displayName = "Tabs.Content";
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  Tabs
-});
-//# sourceMappingURL=index.js.map