@spark-ui/components 13.1.4 → 13.2.0

package/dist/tabs/index.js

@@ -1,1830 +1,2 @@
-"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_use_merge_refs2 = require("@spark-ui/hooks/use-merge-refs");
-var import_radix_ui12 = require("radix-ui");
-var import_react10 = require("react");
-
-// src/tabs/TabsPopoverAbstraction.tsx
-var import_use_merge_refs = require("@spark-ui/hooks/use-merge-refs");
-var import_MoreMenuHorizontal = require("@spark-ui/icons/MoreMenuHorizontal");
-var import_class_variance_authority13 = require("class-variance-authority");
-var import_react9 = require("react");
-
-// src/icon-button/IconButton.styles.tsx
-var import_internal_utils9 = require("@spark-ui/internal-utils");
-var import_class_variance_authority8 = require("class-variance-authority");
-var iconButtonStyles = (0, import_class_variance_authority8.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_runtime9 = require("react/jsx-runtime");
-var IconButton = ({
-  design = "filled",
-  disabled = false,
-  intent = "main",
-  shape = "rounded",
-  size = "md",
-  className,
-  ref,
-  ...others
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-    Button,
-    {
-      "data-spark-component": "icon-button",
-      ref,
-      className: iconButtonStyles({ size, className }),
-      design,
-      disabled,
-      intent,
-      shape,
-      size,
-      ...others
-    }
-  );
-};
-IconButton.displayName = "IconButton";
-
-// src/popover/Popover.tsx
-var import_radix_ui5 = require("radix-ui");
-
-// src/popover/PopoverContext.tsx
-var import_react7 = require("react");
-var import_jsx_runtime10 = require("react/jsx-runtime");
-var PopoverContext = (0, import_react7.createContext)(null);
-var ID_PREFIX = ":popover";
-var PopoverProvider = ({
-  children,
-  intent
-}) => {
-  const [headerId, setHeaderId] = (0, import_react7.useState)(null);
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-    PopoverContext.Provider,
-    {
-      value: {
-        headerId,
-        setHeaderId,
-        intent
-      },
-      children
-    }
-  );
-};
-var usePopover = () => {
-  const context = (0, import_react7.useContext)(PopoverContext);
-  if (!context) {
-    throw Error("usePopover must be used within a Popover provider");
-  }
-  return context;
-};
-
-// src/popover/Popover.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
-var Popover = ({ children, intent = "surface", modal = false, ...rest }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(PopoverProvider, { intent, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_radix_ui5.Popover.Root, { "data-spark-component": "popover", modal, ...rest, children }) });
-};
-Popover.displayName = "Popover";
-
-// src/popover/PopoverAnchor.tsx
-var import_radix_ui6 = require("radix-ui");
-var import_jsx_runtime12 = require("react/jsx-runtime");
-var Anchor = ({ asChild = false, children, ref, ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_radix_ui6.Popover.Anchor, { "data-spark-component": "popover-anchor", ref, asChild, ...rest, children });
-Anchor.displayName = "Popover.Anchor";
-
-// src/popover/PopoverArrow.tsx
-var import_class_variance_authority9 = require("class-variance-authority");
-var import_radix_ui7 = require("radix-ui");
-var import_jsx_runtime13 = require("react/jsx-runtime");
-var Arrow = ({
-  asChild = false,
-  width = 16,
-  height = 8,
-  className,
-  ref,
-  ...rest
-}) => {
-  const { intent } = usePopover();
-  const styles2 = (0, import_class_variance_authority9.cva)("visible", {
-    variants: {
-      intent: {
-        surface: "fill-surface",
-        main: "fill-main-container",
-        support: "fill-support-container",
-        accent: "fill-accent-container",
-        basic: "fill-basic-container",
-        success: "fill-success-container",
-        alert: "fill-alert-container",
-        danger: "fill-error-container",
-        info: "fill-info-container",
-        neutral: "fill-neutral-container"
-      }
-    },
-    defaultVariants: {
-      intent: "surface"
-    }
-  });
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-    import_radix_ui7.Popover.Arrow,
-    {
-      "data-spark-component": "popover-arrow",
-      ref,
-      className: styles2({ intent, className }),
-      asChild,
-      width,
-      height,
-      ...rest
-    }
-  );
-};
-Arrow.displayName = "Popover.Arrow";
-
-// src/popover/PopoverCloseButton.tsx
-var import_Close = require("@spark-ui/icons/Close");
-var import_class_variance_authority10 = require("class-variance-authority");
-var import_radix_ui8 = require("radix-ui");
-var import_jsx_runtime14 = require("react/jsx-runtime");
-var CloseButton = ({
-  "aria-label": ariaLabel,
-  className,
-  ref,
-  ...rest
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-    import_radix_ui8.Popover.Close,
-    {
-      "data-spark-component": "popover-close-button",
-      ref,
-      className: (0, import_class_variance_authority10.cx)("right-lg top-md absolute", className),
-      asChild: true,
-      ...rest,
-      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(IconButton, { size: "sm", intent: "neutral", design: "ghost", "aria-label": ariaLabel, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Icon, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_Close.Close, {}) }) })
-    }
-  );
-};
-CloseButton.displayName = "Popover.CloseButton";
-
-// src/popover/PopoverContent.tsx
-var import_radix_ui9 = require("radix-ui");
-
-// src/popover/PopoverContent.styles.ts
-var import_class_variance_authority11 = require("class-variance-authority");
-var styles = (0, import_class_variance_authority11.cva)(
-  [
-    "rounded-md",
-    "shadow-sm",
-    "focus-visible:outline-hidden focus-visible:u-outline",
-    "max-h-(--radix-popper-available-height) overflow-y-auto"
-  ],
-  {
-    variants: {
-      intent: {
-        surface: "bg-surface text-on-surface",
-        main: "bg-main-container text-on-main-container",
-        support: "bg-support-container text-on-support-container",
-        accent: "bg-accent-container text-on-accent-container",
-        basic: "bg-basic-container text-on-basic-container",
-        success: "bg-success-container text-on-success-container",
-        alert: "bg-alert-container text-on-alert-container",
-        danger: "bg-error-container text-on-error-container",
-        info: "bg-info-container text-on-info-container",
-        neutral: "bg-neutral-container text-on-neutral-container"
-      },
-      matchTriggerWidth: {
-        true: "w-(--radix-popper-anchor-width)"
-      },
-      enforceBoundaries: {
-        true: ["max-w-(--radix-popper-available-width)"]
-      },
-      inset: {
-        true: "overflow-hidden",
-        false: "p-lg"
-      },
-      elevation: {
-        dropdown: "z-dropdown",
-        popover: "z-popover"
-      }
-    },
-    compoundVariants: [
-      {
-        inset: false,
-        /**
-         * When there is a close button, padding to the right side must be adjusted to avoid content overlapping with it.
-         */
-        class: "has-data-[spark-component=popover-close-button]:pr-3xl"
-      },
-      {
-        enforceBoundaries: false,
-        matchTriggerWidth: false,
-        class: "max-w-[min(var(--spacing-sz-384),100vw)]"
-      }
-    ],
-    defaultVariants: {
-      matchTriggerWidth: false,
-      enforceBoundaries: false,
-      inset: false,
-      intent: "surface",
-      elevation: "popover"
-    }
-  }
-);
-
-// src/popover/PopoverContent.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
-var Content = ({
-  // Spark props
-  className,
-  children,
-  matchTriggerWidth = false,
-  // Radix props
-  align = "center",
-  arrowPadding = 16,
-  // In order not to overlap the arrow on the rounded corners of the popover.
-  asChild = false,
-  avoidCollisions = true,
-  "aria-labelledby": ariaLabelledBy,
-  collisionBoundary,
-  collisionPadding = 0,
-  hideWhenDetached = false,
-  side = "bottom",
-  sideOffset = 8,
-  sticky = "partial",
-  inset = false,
-  elevation = "popover",
-  ref,
-  ...rest
-}) => {
-  const { headerId, intent } = usePopover();
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-    import_radix_ui9.Popover.Content,
-    {
-      "aria-labelledby": headerId || ariaLabelledBy,
-      className: styles({
-        enforceBoundaries: !!collisionBoundary,
-        matchTriggerWidth,
-        inset,
-        elevation,
-        intent,
-        className
-      }),
-      "data-spark-component": "popover-content",
-      ref,
-      ...{
-        align,
-        arrowPadding,
-        asChild,
-        avoidCollisions,
-        collisionBoundary,
-        collisionPadding,
-        hideWhenDetached,
-        side,
-        sideOffset,
-        sticky
-      },
-      ...rest,
-      children
-    }
-  );
-};
-Content.displayName = "Popover.Content";
-
-// src/popover/PopoverHeader.tsx
-var import_class_variance_authority12 = require("class-variance-authority");
-var import_react8 = require("react");
-var import_jsx_runtime16 = require("react/jsx-runtime");
-var Header = ({ children, className, ref, ...rest }) => {
-  const id = `${ID_PREFIX}-header-${(0, import_react8.useId)()}`;
-  const { setHeaderId } = usePopover();
-  (0, import_react8.useLayoutEffect)(() => {
-    setHeaderId(id);
-    return () => setHeaderId(null);
-  }, [id, setHeaderId]);
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("header", { id, ref, className: (0, import_class_variance_authority12.cx)("mb-md text-headline-2", className), ...rest, children });
-};
-Header.displayName = "Popover.Header";
-
-// src/popover/PopoverPortal.tsx
-var import_radix_ui10 = require("radix-ui");
-var import_jsx_runtime17 = require("react/jsx-runtime");
-var Portal = ({ children, ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_radix_ui10.Popover.Portal, { ...rest, children });
-Portal.displayName = "Popover.Portal";
-
-// src/popover/PopoverTrigger.tsx
-var import_radix_ui11 = require("radix-ui");
-var import_jsx_runtime18 = require("react/jsx-runtime");
-var Trigger = ({ asChild = false, children, ref, ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-  import_radix_ui11.Popover.Trigger,
-  {
-    "data-spark-component": "popover-trigger",
-    ref,
-    asChild,
-    ...rest,
-    children
-  }
-);
-Trigger.displayName = "Popover.Trigger";
-
-// src/popover/index.ts
-var Popover2 = Object.assign(Popover, {
-  Anchor,
-  Arrow,
-  CloseButton,
-  Content,
-  Header,
-  Portal,
-  Trigger
-});
-Popover2.displayName = "Popover";
-Anchor.displayName = "Popover.Anchor";
-Arrow.displayName = "Popover.Arrow";
-CloseButton.displayName = "Popover.CloseButton";
-Content.displayName = "Popover.Content";
-Header.displayName = "Popover.Header";
-Portal.displayName = "Popover.Portal";
-Trigger.displayName = "Popover.Trigger";
-
-// src/tabs/TabsPopoverAbstraction.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
-var TabsPopoverContext = (0, import_react9.createContext)(void 0);
-var useTabsPopoverContext = () => {
-  const context = (0, import_react9.useContext)(TabsPopoverContext);
-  if (!context) {
-    throw new Error("TabsPopover components must be used within TabsPopover");
-  }
-  return context;
-};
-var TabsPopoverTrigger = (0, import_react9.forwardRef)(
-  ({ "aria-label": ariaLabel, children: iconChildren, ...triggerProps }, forwardedRef) => {
-    const { popoverTriggerRef } = useTabsPopoverContext();
-    const mergedRef = (0, import_use_merge_refs.useMergeRefs)(forwardedRef, popoverTriggerRef);
-    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Popover2.Trigger, { asChild: true, ...triggerProps, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-      IconButton,
-      {
-        ref: mergedRef,
-        size: "sm",
-        intent: "surfaceInverse",
-        design: "ghost",
-        "aria-label": ariaLabel,
-        tabIndex: -1,
-        children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Icon, { children: iconChildren || /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_MoreMenuHorizontal.MoreMenuHorizontal, {}) })
-      }
-    ) });
-  }
-);
-TabsPopoverTrigger.displayName = "Popover.Trigger";
-var TabsPopoverContent = (0, import_react9.forwardRef)(
-  ({ side, align = "start", className, ...contentProps }, ref) => {
-    const { popoverSide } = useTabsPopoverContext();
-    const mergedClassName = (0, import_class_variance_authority13.cx)("gap-sm flex flex-col", className);
-    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-      Popover2.Content,
-      {
-        ref,
-        ...contentProps,
-        side: side ?? popoverSide,
-        align,
-        className: mergedClassName
-      }
-    );
-  }
-);
-TabsPopoverContent.displayName = "Popover.Content";
-var Popover3 = ({ popoverSide, popoverTriggerRef, children }) => {
-  const contextValue = (0, import_react9.useMemo)(
-    () => ({ popoverSide, popoverTriggerRef }),
-    [popoverSide, popoverTriggerRef]
-  );
-  const PopoverWrapper = ((props) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(TabsPopoverContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Popover2, { ...props, children: props.children }) }));
-  const PopoverComponent = Object.assign(PopoverWrapper, Popover2, {
-    Content: TabsPopoverContent,
-    Trigger: TabsPopoverTrigger
-  });
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(TabsPopoverContext.Provider, { value: contextValue, children: children(PopoverComponent) });
-};
-Popover3.displayName = "Popover";
-
-// src/tabs/TabsTrigger.styles.ts
-var import_internal_utils10 = require("@spark-ui/internal-utils");
-var import_class_variance_authority14 = require("class-variance-authority");
-var triggerVariants = (0, import_class_variance_authority14.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_utils10.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"]
-      },
-      hasMenu: {
-        true: "pr-3xl"
-      },
-      orientation: {
-        horizontal: "",
-        vertical: ""
-      }
-    },
-    compoundVariants: [
-      {
-        hasMenu: true,
-        orientation: "vertical",
-        class: "w-full"
-      }
-    ],
-    defaultVariants: {
-      intent: "basic",
-      size: "md",
-      hasMenu: false,
-      orientation: "horizontal"
-    }
-  }
-);
-
-// src/tabs/TabsTrigger.tsx
-var import_jsx_runtime20 = 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,
-  onKeyDown,
-  renderMenu,
-  ...rest
-}) => {
-  const { intent, size, orientation } = useTabsContext();
-  const popoverTriggerRef = (0, import_react10.useRef)(null);
-  const tabsTriggerRef = (0, import_react10.useRef)(null);
-  const mergedRef = (0, import_use_merge_refs2.useMergeRefs)(ref, tabsTriggerRef);
-  const handleKeyDown = (e) => {
-    if (e.key === "F10" && e.shiftKey && renderMenu && popoverTriggerRef.current) {
-      e.preventDefault();
-      popoverTriggerRef.current.click();
-    }
-    onKeyDown?.(e);
-  };
-  const hasMenu = !!renderMenu;
-  const popoverSide = orientation === "vertical" ? "right" : "bottom";
-  const trigger = /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-    import_radix_ui12.Tabs.Trigger,
-    {
-      "data-spark-component": "tabs-trigger",
-      ref: mergedRef,
-      className: triggerVariants({
-        intent,
-        size,
-        hasMenu,
-        orientation: orientation ?? "horizontal",
-        className
-      }),
-      asChild,
-      disabled,
-      value,
-      onFocus: ({ target }) => target.scrollIntoView({
-        behavior: "smooth",
-        block: "nearest",
-        inline: "nearest"
-      }),
-      onKeyDown: handleKeyDown,
-      "aria-haspopup": hasMenu ? "true" : void 0,
-      ...rest,
-      children
-    }
-  );
-  if (!hasMenu) {
-    return trigger;
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: orientation === "vertical" ? "relative w-full" : "relative", children: [
-    trigger,
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "right-md mr-md pointer-events-auto absolute top-1/2 -translate-y-1/2", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Popover3, { popoverSide, popoverTriggerRef, children: (PopoverAbstraction) => renderMenu?.({ Popover: PopoverAbstraction }) }) })
-  ] });
-};
-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
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),T=require("radix-ui"),s=require("react"),m=require("class-variance-authority"),D=require("@spark-ui/icons/ArrowVerticalLeft"),F=require("@spark-ui/icons/ArrowVerticalRight"),M=require("../Button-B6rA3-e5.js"),j=require("../Icon-CF0W0LKr.js"),q=require("@spark-ui/hooks/use-merge-refs"),K=require("@spark-ui/icons/MoreMenuHorizontal"),H=require("../IconButton-D3g86WpZ.js"),g=require("../popover/index.js"),U=require("@spark-ui/internal-utils"),W=s.createContext({}),R=()=>{const t=s.useContext(W);if(!t)throw Error("useTabsContext must be used within a TabsContext Provider");return t},$=m.cva(["flex","data-[orientation=horizontal]:flex-col","data-[orientation=vertical]:flex-row","max-w-full"]),V=({intent:t="basic",size:o="md",asChild:c=!1,forceMount:i=!1,orientation:n="horizontal",children:a,className:l,ref:d,...e})=>r.jsx(W.Provider,{value:{intent:t,size:o,orientation:n,forceMount:i},children:r.jsx(T.Tabs.Root,{ref:d,asChild:c,orientation:n,className:$({className:l}),"data-spark-component":"tabs",activationMode:"automatic",...e,children:a})});V.displayName="Tabs";const G=m.cva(["w-full p-lg","focus-visible:u-outline-inset"],{variants:{forceMount:{true:"data-[state=inactive]:hidden",false:""}}}),P=({children:t,asChild:o=!1,className:c,ref:i,...n})=>{const{forceMount:a}=R();return r.jsx(T.Tabs.Content,{"data-spark-component":"tabs-content",ref:i,forceMount:a||n.forceMount,className:G({className:c,forceMount:a}),asChild:o,...n,children:t})};P.displayName="Tabs.Content";const J=m.cva(["relative flex"]),Q=m.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"]),S=m.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!"]),X=(t,o)=>{const[c,i]=s.useState({width:void 0,height:void 0}),n=s.useRef(null),a=s.useRef(o);return s.useEffect(()=>{a.current=o},[o]),s.useEffect(()=>{const l=t&&"current"in t?t.current:t;if(!(!l||n.current))return n.current=new ResizeObserver(([d])=>{const{inlineSize:e,blockSize:x}=d?.borderBoxSize?.[0]??{};a.current?.(d),i({width:e,height:x})}),n.current.observe(l),()=>{n.current&&n.current.unobserve(l)}},[t,n,a]),c},N=({asChild:t=!1,loop:o=!1,children:c,className:i,ref:n,...a})=>{const l=s.useRef(null),d=s.useRef(null),e=n||d,{orientation:x}=R(),{width:w}=X(l),[u,h]=s.useState({prev:"hidden",next:"hidden"});s.useEffect(()=>{typeof e=="function"||!e.current||h(x!=="horizontal"?{prev:"hidden",next:"hidden"}:{prev:e.current.scrollWidth>e.current.clientWidth?"visible":"hidden",next:e.current.scrollWidth>e.current.clientWidth?"visible":"hidden"})},[x,e,w]),s.useEffect(()=>{if(typeof e=="function"||!e.current||u.prev==="hidden"||o)return;const v=f=>{h({prev:f.scrollLeft>0?"visible":"disabled",next:f.scrollLeft+f.clientWidth<f.scrollWidth?"visible":"disabled"})},p=e.current;return v(p),p.addEventListener("scroll",({target:f})=>v(f)),()=>p.removeEventListener("scroll",({target:f})=>v(f))},[e,u.prev,o]);const z=()=>{if(typeof e=="function"||!e.current)return;const v=o&&e.current.scrollLeft<=0;e.current.scrollTo({left:v?e.current.scrollLeft+e.current.scrollWidth-e.current.clientWidth:e.current.scrollLeft-e.current.clientWidth,behavior:"smooth"})},y=()=>{if(typeof e=="function"||!e.current)return;const v=o&&e.current.scrollLeft+e.current.clientWidth>=e.current.scrollWidth;e.current.scrollTo({left:v?0:e.current.scrollLeft+e.current.clientWidth,behavior:"smooth"})};return r.jsxs("div",{className:J({className:i}),ref:l,children:[u.prev!=="hidden"&&r.jsx(M.Button,{shape:"square",intent:"surface",size:"sm",className:S(),onClick:z,disabled:u.prev==="disabled","aria-label":"Scroll left",children:r.jsx(j.Icon,{children:r.jsx(D.ArrowVerticalLeft,{})})}),r.jsx(T.Tabs.List,{"data-spark-component":"tabs-list",ref:e,className:Q(),asChild:t,loop:o,...a,children:c}),u.next!=="hidden"&&r.jsx(M.Button,{shape:"square",intent:"surface",size:"sm",className:S(),onClick:y,disabled:u.next==="disabled","aria-label":"Scroll right",children:r.jsx(j.Icon,{children:r.jsx(F.ArrowVerticalRight,{})})})]})};N.displayName="Tabs.List";const C=s.createContext(void 0),E=()=>{const t=s.useContext(C);if(!t)throw new Error("TabsPopover components must be used within TabsPopover");return t},I=s.forwardRef(({"aria-label":t,children:o,...c},i)=>{const{popoverTriggerRef:n}=E(),a=q.useMergeRefs(i,n);return r.jsx(g.Popover.Trigger,{asChild:!0,...c,children:r.jsx(H.IconButton,{ref:a,size:"sm",intent:"surfaceInverse",design:"ghost","aria-label":t,tabIndex:-1,children:r.jsx(j.Icon,{children:o||r.jsx(K.MoreMenuHorizontal,{})})})})});I.displayName="Popover.Trigger";const A=s.forwardRef(({side:t,align:o="start",className:c,...i},n)=>{const{popoverSide:a}=E(),l=m.cx("gap-sm flex flex-col",c);return r.jsx(g.Popover.Content,{ref:n,...i,side:t??a,align:o,className:l})});A.displayName="Popover.Content";const B=({popoverSide:t,popoverTriggerRef:o,children:c})=>{const i=s.useMemo(()=>({popoverSide:t,popoverTriggerRef:o}),[t,o]),a=Object.assign((l=>r.jsx(C.Provider,{value:i,children:r.jsx(g.Popover,{...l,children:l.children})})),g.Popover,{Content:A,Trigger:I});return r.jsx(C.Provider,{value:i,children:c(a)})};B.displayName="Popover";const Y=m.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:{intent:U.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"]}),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"]},hasMenu:{true:"pr-3xl"},orientation:{horizontal:"",vertical:""}},compoundVariants:[{hasMenu:!0,orientation:"vertical",class:"w-full"}],defaultVariants:{intent:"basic",size:"md",hasMenu:!1,orientation:"horizontal"}}),L=({asChild:t=!1,value:o,disabled:c=!1,children:i,className:n,ref:a,onKeyDown:l,renderMenu:d,...e})=>{const{intent:x,size:w,orientation:u}=R(),h=s.useRef(null),z=s.useRef(null),y=q.useMergeRefs(a,z),v=b=>{b.key==="F10"&&b.shiftKey&&d&&h.current&&(b.preventDefault(),h.current.click()),l?.(b)},p=!!d,f=u==="vertical"?"right":"bottom",k=r.jsx(T.Tabs.Trigger,{"data-spark-component":"tabs-trigger",ref:y,className:Y({intent:x,size:w,hasMenu:p,orientation:u??"horizontal",className:n}),asChild:t,disabled:c,value:o,onFocus:({target:b})=>b.scrollIntoView({behavior:"smooth",block:"nearest",inline:"nearest"}),onKeyDown:v,"aria-haspopup":p?"true":void 0,...e,children:i});return p?r.jsxs("div",{className:u==="vertical"?"relative w-full":"relative",children:[k,r.jsx("div",{className:"right-md mr-md pointer-events-auto absolute top-1/2 -translate-y-1/2",children:r.jsx(B,{popoverSide:f,popoverTriggerRef:h,children:b=>d?.({Popover:b})})})]}):k};L.displayName="Tabs.Trigger";const O=Object.assign(V,{List:N,Trigger:L,Content:P});O.displayName="Tabs";N.displayName="Tabs.List";L.displayName="Tabs.Trigger";P.displayName="Tabs.Content";exports.Tabs=O;
+//# sourceMappingURL=index.js.map