@spark-ui/components 10.22.1 → 11.0.1

package/dist/chip/index.js

@@ -1,908 +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/chip/index.ts
-var chip_exports = {};
-__export(chip_exports, {
-  Chip: () => Chip2
-});
-module.exports = __toCommonJS(chip_exports);
-
-// src/chip/Chip.styles.tsx
-var import_internal_utils4 = require("@spark-ui/internal-utils");
-var import_class_variance_authority = require("class-variance-authority");
-
-// src/chip/variants/outlined.ts
-var import_internal_utils = require("@spark-ui/internal-utils");
-var outlinedVariants = [
-  /** Intents **/
-  {
-    design: "outlined",
-    intent: "main",
-    class: (0, import_internal_utils.tw)([
-      "enabled:hover:bg-main/dim-5",
-      "enabled:active:bg-main/dim-5",
-      "focus-visible:bg-main/dim-5",
-      "aria-pressed:bg-main-container aria-pressed:text-on-main-container aria-pressed:enabled:hover:bg-main-container/dim-1",
-      "text-main"
-    ])
-  },
-  {
-    design: "outlined",
-    intent: "support",
-    class: (0, import_internal_utils.tw)([
-      "enabled:hover:bg-support/dim-5",
-      "enabled:active:bg-support/dim-5",
-      "focus-visible:bg-support/dim-5",
-      "aria-pressed:bg-support-container aria-pressed:text-on-support-container aria-pressed:enabled:hover:bg-support-container/dim-1",
-      "text-support"
-    ])
-  },
-  {
-    design: "outlined",
-    intent: "basic",
-    class: (0, import_internal_utils.tw)([
-      "enabled:hover:bg-basic/dim-5",
-      "enabled:active:bg-basic/dim-5",
-      "focus-visible:bg-basic/dim-5",
-      "aria-pressed:bg-basic-container aria-pressed:text-on-basic-container aria-pressed:enabled:hover:bg-basic-container/dim-1",
-      "text-basic"
-    ])
-  },
-  {
-    intent: "accent",
-    design: "outlined",
-    class: (0, import_internal_utils.tw)([
-      "enabled:hover:bg-accent/dim-5",
-      "enabled:active:bg-accent/dim-5",
-      "focus-visible:bg-accent/dim-5",
-      "aria-pressed:bg-accent-container",
-      "aria-pressed:bg-accent-container aria-pressed:text-on-accent-container aria-pressed:enabled:hover:bg-accent-container/dim-1",
-      "text-accent"
-    ])
-  },
-  {
-    design: "outlined",
-    intent: "success",
-    class: (0, import_internal_utils.tw)([
-      "enabled:hover:bg-success/dim-5",
-      "enabled:active:bg-success/dim-5",
-      "focus-visible:bg-success/dim-5",
-      "aria-pressed:bg-success-container aria-pressed:text-on-success-container aria-pressed:enabled:hover:bg-success-container/dim-1",
-      "text-success"
-    ])
-  },
-  {
-    intent: "alert",
-    design: "outlined",
-    class: (0, import_internal_utils.tw)([
-      "enabled:hover:bg-alert/dim-5",
-      "enabled:active:bg-alert/dim-5",
-      "focus-visible:bg-alert/dim-5",
-      "aria-pressed:bg-alert-container aria-pressed:text-on-alert-container aria-pressed:enabled:hover:bg-alert-container/dim-1",
-      "text-alert"
-    ])
-  },
-  {
-    design: "outlined",
-    intent: "danger",
-    class: (0, import_internal_utils.tw)([
-      "enabled:hover:bg-error/dim-5",
-      "enabled:active:bg-error/dim-5",
-      "focus-visible:bg-error/dim-5",
-      "aria-pressed:bg-error-container aria-pressed:text-on-error-container aria-pressed:enabled:hover:bg-error-container/dim-1",
-      "text-error"
-    ])
-  },
-  {
-    design: "outlined",
-    intent: "info",
-    class: (0, import_internal_utils.tw)([
-      "enabled:hover:bg-info/dim-5",
-      "enabled:active:bg-info/dim-5",
-      "focus-visible:bg-info/dim-5",
-      "aria-pressed:bg-info-container aria-pressed:text-on-info-container aria-pressed:enabled:hover:bg-info-container/dim-1",
-      "text-info"
-    ])
-  },
-  {
-    design: "outlined",
-    intent: "neutral",
-    class: (0, import_internal_utils.tw)([
-      "enabled:hover:bg-neutral/dim-5",
-      "enabled:active:bg-neutral/dim-5",
-      "focus-visible:bg-neutral/dim-5",
-      "aria-pressed:bg-neutral-container aria-pressed:text-on-neutral-container aria-pressed:enabled:hover:bg-neutral-container/dim-1",
-      "text-neutral"
-    ])
-  },
-  {
-    design: "outlined",
-    intent: "surface",
-    class: (0, import_internal_utils.tw)([
-      "enabled:hover:bg-surface/dim-5",
-      "enabled:active:bg-surface/dim-5",
-      "focus-visible:bg-surface/dim-5",
-      "aria-pressed:bg-surface aria-pressed:text-on-surface aria-pressed:enabled:hover:bg-surface-hovered",
-      "text-surface"
-    ])
-  },
-  /** Spacings **/
-  {
-    design: "outlined",
-    hasClearButton: false,
-    class: (0, import_internal_utils.tw)(["px-[calc(var(--spacing-md)-var(--border-width-sm))]"])
-  },
-  {
-    design: "outlined",
-    hasClearButton: true,
-    class: (0, import_internal_utils.tw)(["pl-[calc(var(--spacing-md)-var(--border-width-sm))]"])
-  }
-];
-
-// src/chip/variants/tinted.ts
-var import_internal_utils2 = require("@spark-ui/internal-utils");
-var tintedVariants = [
-  /** Intents **/
-  {
-    intent: "main",
-    design: "tinted",
-    class: (0, import_internal_utils2.tw)([
-      "bg-main-container",
-      "enabled:hover:bg-main-container-hovered",
-      "enabled:active:bg-main-container-hovered",
-      "focus-visible:bg-main-container-hovered",
-      "aria-pressed:bg-main aria-pressed:text-on-main aria-pressed:enabled:hover:bg-main/dim-1",
-      "text-on-main-container"
-    ])
-  },
-  {
-    intent: "support",
-    design: "tinted",
-    class: (0, import_internal_utils2.tw)([
-      "bg-support-container",
-      "enabled:hover:bg-support-container-hovered",
-      "enabled:active:bg-support-container-hovered",
-      "focus-visible:bg-support-container-hovered",
-      "aria-pressed:bg-support aria-pressed:text-on-support aria-pressed:enabled:hover:bg-support/dim-1",
-      "text-on-support-container"
-    ])
-  },
-  {
-    intent: "basic",
-    design: "tinted",
-    class: (0, import_internal_utils2.tw)([
-      "bg-basic-container",
-      "enabled:hover:bg-basic-container-hovered",
-      "enabled:active:bg-basic-container-hovered",
-      "focus-visible:bg-basic-container-hovered",
-      "aria-pressed:bg-basic aria-pressed:text-on-basic aria-pressed:enabled:hover:bg-basic/dim-1",
-      "text-on-basic-container"
-    ])
-  },
-  {
-    intent: "accent",
-    design: "tinted",
-    class: (0, import_internal_utils2.tw)([
-      "bg-accent-container",
-      "enabled:hover:bg-accent-container-hovered",
-      "enabled:active:bg-accent-container-hovered",
-      "focus-visible:bg-accent-container-hovered",
-      "aria-pressed:bg-accent aria-pressed:text-on-accent aria-pressed:enabled:hover:bg-accent/dim-1",
-      "text-on-accent-container"
-    ])
-  },
-  {
-    intent: "success",
-    design: "tinted",
-    class: (0, import_internal_utils2.tw)([
-      "bg-success-container",
-      "enabled:hover:bg-success-container-hovered",
-      "enabled:active:bg-success-container-hovered",
-      "focus-visible:bg-success-container-hovered",
-      "aria-pressed:bg-success aria-pressed:text-on-success aria-pressed:enabled:hover:bg-success/dim-1",
-      "text-on-success-container"
-    ])
-  },
-  {
-    intent: "alert",
-    design: "tinted",
-    class: (0, import_internal_utils2.tw)([
-      "bg-alert-container",
-      "enabled:hover:bg-alert-container-hovered",
-      "enabled:active:bg-alert-container-hovered",
-      "focus-visible:bg-alert-container-hovered",
-      "aria-pressed:bg-alert aria-pressed:text-on-alert aria-pressed:enabled:hover:bg-alert/dim-1",
-      "text-on-alert-container"
-    ])
-  },
-  {
-    intent: "danger",
-    design: "tinted",
-    class: (0, import_internal_utils2.tw)([
-      "bg-error-container",
-      "enabled:hover:bg-error-container-hovered",
-      "enabled:active:bg-error-container-hovered",
-      "focus-visible:bg-error-container-hovered",
-      "aria-pressed:bg-error aria-pressed:text-on-error aria-pressed:enabled:hover:bg-error/dim-1",
-      "text-on-error-container"
-    ])
-  },
-  {
-    intent: "info",
-    design: "tinted",
-    class: (0, import_internal_utils2.tw)([
-      "bg-info-container",
-      "enabled:hover:bg-info-container-hovered",
-      "enabled:active:bg-info-container-hovered",
-      "focus-visible:bg-info-container-hovered",
-      "aria-pressed:bg-info aria-pressed:text-on-info aria-pressed:enabled:hover:bg-info/dim-1",
-      "text-on-info-container"
-    ])
-  },
-  {
-    intent: "neutral",
-    design: "tinted",
-    class: (0, import_internal_utils2.tw)([
-      "bg-neutral-container",
-      "enabled:hover:bg-neutral-container-hovered",
-      "enabled:active:bg-neutral-container-hovered",
-      "focus-visible:bg-neutral-container-hovered",
-      "aria-pressed:bg-neutral aria-pressed:text-on-neutral aria-pressed:enabled:hover:bg-neutral/dim-1",
-      "text-on-neutral-container"
-    ])
-  },
-  {
-    intent: "surface",
-    design: "tinted",
-    class: (0, import_internal_utils2.tw)([
-      "bg-surface/dim-1",
-      "enabled:hover:bg-surface-hovered/dim-1",
-      "enabled:active:bg-surface-hovered/dim-1",
-      "focus-visible:bg-surface-hovered/dim-1",
-      "aria-pressed:bg-surface aria-pressed:text-on-surface aria-pressed:enabled:hover:bg-surface-hovered",
-      "text-on-surface/dim-1"
-    ])
-  },
-  /** Spacings **/
-  {
-    design: "tinted",
-    hasClearButton: false,
-    class: (0, import_internal_utils2.tw)(["px-md"])
-  },
-  {
-    design: "tinted",
-    hasClearButton: true,
-    class: (0, import_internal_utils2.tw)(["pl-md"])
-  }
-];
-
-// src/chip/variants/dashed.ts
-var import_internal_utils3 = require("@spark-ui/internal-utils");
-var dashedVariants = [
-  /** Intents **/
-  {
-    intent: "main",
-    design: "dashed",
-    class: (0, import_internal_utils3.tw)([
-      "enabled:hover:bg-main/dim-5",
-      "enabled:active:bg-main/dim-5",
-      "focus-visible:bg-main/dim-5",
-      "aria-pressed:bg-main-container aria-pressed:text-on-main-container aria-pressed:enabled:hover:bg-main-container/dim-1",
-      "text-main"
-    ])
-  },
-  {
-    intent: "support",
-    design: "dashed",
-    class: (0, import_internal_utils3.tw)([
-      "enabled:hover:bg-support/dim-5",
-      "enabled:active:bg-support/dim-5",
-      "focus-visible:bg-support/dim-5",
-      "aria-pressed:bg-support-container aria-pressed:text-on-support-container aria-pressed:enabled:hover:bg-support-container/dim-1",
-      "text-support"
-    ])
-  },
-  {
-    intent: "basic",
-    design: "dashed",
-    class: (0, import_internal_utils3.tw)([
-      "enabled:hover:bg-basic/dim-5",
-      "enabled:active:bg-basic/dim-5",
-      "focus-visible:bg-basic/dim-5",
-      "aria-pressed:bg-basic-container aria-pressed:text-on-basic-container aria-pressed:enabled:hover:bg-basic-container/dim-1",
-      "text-basic"
-    ])
-  },
-  {
-    intent: "accent",
-    design: "dashed",
-    class: (0, import_internal_utils3.tw)([
-      "enabled:hover:bg-accent/dim-5",
-      "enabled:active:bg-accent/dim-5",
-      "focus-visible:bg-accent/dim-5",
-      "aria-pressed:bg-accent-container aria-pressed:text-on-accent-container aria-pressed:enabled:hover:bg-accent-container/dim-1",
-      "text-accent"
-    ])
-  },
-  {
-    intent: "success",
-    design: "dashed",
-    class: (0, import_internal_utils3.tw)([
-      "enabled:hover:bg-success/dim-5",
-      "enabled:active:bg-success/dim-5",
-      "focus-visible:bg-success/dim-5",
-      "aria-pressed:bg-success-container aria-pressed:text-on-success-container aria-pressed:enabled:hover:bg-success-container/dim-1",
-      "text-success"
-    ])
-  },
-  {
-    intent: "alert",
-    design: "dashed",
-    class: (0, import_internal_utils3.tw)([
-      "enabled:hover:bg-alert/dim-5",
-      "enabled:active:bg-alert/dim-5",
-      "focus-visible:bg-alert/dim-5",
-      "aria-pressed:bg-alert-container aria-pressed:text-on-alert-container aria-pressed:enabled:hover:bg-alert-container/dim-1",
-      "text-alert"
-    ])
-  },
-  {
-    intent: "danger",
-    design: "dashed",
-    class: (0, import_internal_utils3.tw)([
-      "enabled:hover:bg-error/dim-5",
-      "enabled:active:bg-error/dim-5",
-      "focus-visible:bg-error/dim-5",
-      "aria-pressed:bg-error-container aria-pressed:text-on-error-container aria-pressed:enabled:hover:bg-error-container/dim-1",
-      "text-error"
-    ])
-  },
-  {
-    intent: "info",
-    design: "dashed",
-    class: (0, import_internal_utils3.tw)([
-      "enabled:hover:bg-info/dim-5",
-      "enabled:active:bg-info/dim-5",
-      "focus-visible:bg-info/dim-5",
-      "aria-pressed:bg-info-container aria-pressed:text-on-info-container aria-pressed:enabled:hover:bg-info-container/dim-1",
-      "text-info"
-    ])
-  },
-  {
-    intent: "neutral",
-    design: "dashed",
-    class: (0, import_internal_utils3.tw)([
-      "enabled:hover:bg-neutral/dim-5",
-      "enabled:active:bg-neutral/dim-5",
-      "focus-visible:bg-neutral/dim-5",
-      "aria-pressed:bg-neutral-container aria-pressed:text-on-neutral-container aria-pressed:enabled:hover:bg-neutral-container/dim-1",
-      "text-neutral"
-    ])
-  },
-  {
-    intent: "surface",
-    design: "dashed",
-    class: (0, import_internal_utils3.tw)([
-      "enabled:hover:bg-surface/dim-5",
-      "enabled:active:bg-surface/dim-5",
-      "focus-visible:bg-surface/dim-5",
-      "aria-pressed:bg-surface aria-pressed:text-on-surface aria-pressed:enabled:hover:bg-surface-hovered",
-      "text-surface"
-    ])
-  },
-  /** Spacings **/
-  {
-    design: "dashed",
-    hasClearButton: false,
-    class: (0, import_internal_utils3.tw)(["px-[calc(var(--spacing-md)-var(--border-width-sm))]"])
-  },
-  {
-    design: "dashed",
-    hasClearButton: true,
-    class: (0, import_internal_utils3.tw)(["pl-[calc(var(--spacing-md)-var(--border-width-sm))]"])
-  }
-];
-
-// src/chip/Chip.styles.tsx
-var chipStyles = (0, import_class_variance_authority.cva)(
-  [
-    "box-border inline-flex h-sz-32 flex-nowrap items-center justify-center rounded-md text-body-1 font-regular",
-    "focus-visible:u-outline",
-    "ease-out duration-150"
-  ],
-  {
-    variants: {
-      /**
-       * Main style of the chip.
-       *
-       * - `filled`: Chip will be plain.
-       *
-       * - `outlined`: Chip will be transparent with an outline.
-       *
-       * - `tinted`: Chip will be filled but using a lighter color scheme.
-       *
-       * - `dashed`: Chip will be transparent with an outline dashed.
-       */
-      design: (0, import_internal_utils4.makeVariants)({
-        outlined: ["bg-transparent border-sm border-solid border-current"],
-        tinted: [""],
-        dashed: [
-          "bg-transparent border-sm border-dashed shadow-none focus-visible:border-outline-high"
-        ]
-      }),
-      /**
-       * Color scheme of the chip.
-       */
-      intent: (0, import_internal_utils4.makeVariants)({
-        main: [],
-        support: [],
-        basic: [],
-        accent: [],
-        success: [],
-        alert: [],
-        danger: [],
-        info: [],
-        neutral: [],
-        surface: []
-      }),
-      /**
-       * Disable the chip, preventing user interaction and adding opacity.
-       */
-      disabled: {
-        true: ["cursor-not-allowed", "opacity-dim-3"]
-      },
-      hasClearButton: {
-        true: [],
-        false: []
-      }
-      // 'pl-[calc(var(--spacing-md)-(var(--border-width-sm)))]'
-    },
-    compoundVariants: [...outlinedVariants, ...tintedVariants, ...dashedVariants],
-    defaultVariants: {
-      design: "outlined",
-      intent: "basic"
-    }
-  }
-);
-
-// src/chip/useChipContext.tsx
-var import_react = require("react");
-var ChipContext = (0, import_react.createContext)({});
-var useChipContext = () => (0, import_react.useContext)(ChipContext) || {};
-
-// src/chip/useChipElement.tsx
-var import_use_combined_state = require("@spark-ui/hooks/use-combined-state");
-var import_emulate_tab = require("emulate-tab");
-var import_react3 = require("react");
-
-// src/slot/Slot.tsx
-var import_radix_ui = require("radix-ui");
-var import_react2 = require("react");
-var import_jsx_runtime = require("react/jsx-runtime");
-var Slottable = import_radix_ui.Slot.Slottable;
-var Slot = ({ ref, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_radix_ui.Slot.Root, { ref, ...props });
-};
-
-// src/chip/useChipElement.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var getDisplayName = (element) => {
-  return element ? element.type.displayName : "";
-};
-var findElement = (children) => (...values) => {
-  const validChildren = import_react3.Children.toArray(children).filter(import_react3.isValidElement);
-  return validChildren.find((child) => {
-    const displayName = getDisplayName(child);
-    return values.includes(displayName || "");
-  });
-};
-var useChipElement = ({
-  onClick,
-  asChild,
-  pressed,
-  defaultPressed,
-  disabled,
-  value,
-  defaultValue,
-  children,
-  onClear
-}) => {
-  const [isPressed, setIsPressed] = (0, import_use_combined_state.useCombinedState)(pressed, defaultPressed);
-  const [innerValue] = (0, import_use_combined_state.useCombinedState)(
-    value,
-    defaultValue
-  );
-  const findChipElement = findElement(children);
-  const leadingIcon = findChipElement("Chip.LeadingIcon");
-  const trailingIcon = findChipElement("Chip.TrailingIcon");
-  const content = findChipElement("Chip.Content");
-  const clearButton = findChipElement("Chip.ClearButton");
-  const isButton = (onClick || isPressed) !== void 0;
-  const formattedChildren = [leadingIcon, content, clearButton].every(
-    (element) => element === void 0
-  ) ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "inline-block grow truncate", children }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
-    leadingIcon,
-    content,
-    leadingIcon === void 0 ? trailingIcon : null,
-    clearButton
-  ] });
-  const onKeyDown = (event) => {
-    if (!!clearButton && !disabled && ["Delete", "Backspace"].includes(event.key)) {
-      if (onClear) {
-        onClear();
-        event.key === "Delete" && (0, import_emulate_tab.emulateTab)();
-        event.key === "Backspace" && import_emulate_tab.emulateTab.backwards();
-      }
-    }
-  };
-  if (isButton) {
-    return {
-      Element: asChild ? Slot : "button",
-      chipProps: {
-        type: "button",
-        ...isPressed !== void 0 && {
-          "aria-pressed": isPressed,
-          "data-state": isPressed ? "on" : "off"
-        },
-        onClick: (event) => {
-          isPressed !== void 0 && setIsPressed(!isPressed);
-          onClick && onClick(event, { pressed: isPressed, value: innerValue });
-        },
-        onKeyDown,
-        disabled,
-        children: formattedChildren
-      },
-      compoundElements: {
-        leadingIcon,
-        trailingIcon,
-        content,
-        clearButton
-      }
-    };
-  }
-  return {
-    Element: asChild ? Slot : "div",
-    chipProps: {
-      "aria-disabled": disabled,
-      children: formattedChildren,
-      onKeyDown
-    },
-    compoundElements: {
-      leadingIcon,
-      trailingIcon,
-      content,
-      clearButton
-    }
-  };
-};
-
-// src/chip/Chip.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var Chip = ({
-  design = "outlined",
-  disabled,
-  children,
-  intent = "basic",
-  defaultPressed,
-  pressed,
-  asChild,
-  className,
-  onClick,
-  onClear,
-  ref: forwardedRef,
-  ...otherProps
-}) => {
-  const {
-    Element: ChipElement,
-    chipProps: { children: formattedChildren, ...chipProps },
-    compoundElements
-  } = useChipElement({
-    asChild,
-    pressed,
-    defaultPressed,
-    onClick,
-    disabled: !!disabled,
-    value: otherProps.value,
-    defaultValue: otherProps.defaultValue,
-    children,
-    onClear
-  });
-  const { clearButton } = compoundElements;
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ChipContext.Provider, { value: { disabled, design, intent, onClear }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-    ChipElement,
-    {
-      ref: forwardedRef,
-      className: chipStyles({
-        className,
-        design,
-        disabled,
-        intent,
-        hasClearButton: !!clearButton
-      }),
-      ...{
-        ...chipProps,
-        ...otherProps
-      },
-      "data-spark-component": "chip",
-      children: formattedChildren
-    }
-  ) });
-};
-Chip.displayName = "Chip";
-
-// src/chip/ChipClearButton.tsx
-var import_Close = require("@spark-ui/icons/Close");
-var import_react5 = require("react");
-
-// src/icon/Icon.tsx
-var import_react4 = require("react");
-
-// 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/icon/Icon.styles.tsx
-var import_internal_utils5 = require("@spark-ui/internal-utils");
-var import_class_variance_authority2 = require("class-variance-authority");
-var iconStyles = (0, import_class_variance_authority2.cva)(["fill-current shrink-0"], {
-  variants: {
-    /**
-     * Color scheme of the icon.
-     */
-    intent: (0, import_internal_utils5.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_utils5.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_runtime5 = 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_runtime5.jsxs)(import_jsx_runtime5.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_runtime5.jsx)(VisuallyHidden, { children: label })
-  ] });
-};
-Icon.displayName = "Icon";
-
-// src/chip/ChipClearButton.styles.tsx
-var import_internal_utils6 = require("@spark-ui/internal-utils");
-var import_class_variance_authority3 = require("class-variance-authority");
-var chipClearButtonWrapperStyles = (0, import_class_variance_authority3.cva)(
-  ["ml-md flex h-full items-center justify-center focus-visible:outline-hidden"],
-  {
-    variants: {
-      disabled: {
-        false: ["cursor-pointer"],
-        true: ["cursor-not-allowed"]
-      },
-      isBordered: {
-        false: ["pr-md"],
-        true: ["pr-[7px]"]
-      },
-      design: {
-        outlined: [],
-        tinted: [],
-        dashed: []
-      }
-    },
-    compoundVariants: [
-      {
-        design: "outlined",
-        disabled: false,
-        class: (0, import_internal_utils6.tw)(["hover:opacity-dim-1"])
-      },
-      {
-        design: "outlined",
-        disabled: true,
-        class: (0, import_internal_utils6.tw)(["opacity-dim-3"])
-      },
-      {
-        design: "tinted",
-        disabled: false,
-        class: (0, import_internal_utils6.tw)(["hover:opacity-dim-1"])
-      },
-      {
-        design: "tinted",
-        disabled: true,
-        class: (0, import_internal_utils6.tw)(["opacity-dim-3"])
-      },
-      {
-        design: "dashed",
-        disabled: false,
-        class: (0, import_internal_utils6.tw)(["hover:opacity-dim-1"])
-      },
-      {
-        design: "dashed",
-        disabled: true,
-        class: (0, import_internal_utils6.tw)(["opacity-dim-3"])
-      }
-    ]
-  }
-);
-var chipClearButtonStyles = (0, import_class_variance_authority3.cva)(
-  ["rounded-full p-sz-2 [font-size:var(--spacing-sz-8)] border-sm", "focus-visible:u-outline"],
-  {
-    variants: {
-      disabled: {
-        true: ["cursor-not-allowed"],
-        false: ["cursor-pointer"]
-      }
-    },
-    defaultVariants: {
-      disabled: false
-    }
-  }
-);
-
-// src/chip/ChipClearButton.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
-var ChipClearButton = ({
-  children = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_Close.Close, {}) }),
-  tabIndex = 0,
-  label,
-  ref: forwardedRef
-}) => {
-  const { design, disabled, onClear } = useChipContext();
-  const onClearHandler = (0, import_react5.useCallback)(
-    (event) => {
-      event.stopPropagation();
-      !disabled && onClear && onClear(event);
-    },
-    [disabled, onClear]
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-    "span",
-    {
-      className: chipClearButtonWrapperStyles({
-        isBordered: ["outline", "dashed"].includes(`${design}`),
-        disabled: !!disabled,
-        design
-      }),
-      onClick: onClearHandler,
-      ref: forwardedRef,
-      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-        "button",
-        {
-          tabIndex,
-          type: "button",
-          disabled: !!disabled,
-          className: chipClearButtonStyles({ disabled }),
-          "aria-label": label,
-          children: children && (0, import_react5.cloneElement)(children, { ariaLabel: label })
-        }
-      )
-    }
-  );
-};
-ChipClearButton.displayName = "Chip.ClearButton";
-
-// src/chip/ChipContent.tsx
-var import_class_variance_authority4 = require("class-variance-authority");
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var ChipContent = ({ children, className, ref: forwardedRef }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: (0, import_class_variance_authority4.cx)("inline-block grow truncate", className), ref: forwardedRef, children });
-};
-ChipContent.displayName = "Chip.Content";
-
-// src/chip/ChipLeadingIcon.tsx
-var import_class_variance_authority6 = require("class-variance-authority");
-
-// src/chip/ChipIcon.tsx
-var import_class_variance_authority5 = require("class-variance-authority");
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var ChipIcon = ({ children, className, ref: forwardedRef }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: (0, import_class_variance_authority5.cx)("flex h-full items-center justify-center", className), ref: forwardedRef, children });
-};
-ChipIcon.displayName = "Chip.Icon";
-
-// src/chip/ChipLeadingIcon.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
-var ChipLeadingIcon = ({
-  className,
-  ref: forwardedRef,
-  ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ChipIcon, { className: (0, import_class_variance_authority6.cx)("mr-sm", className), ref: forwardedRef, ...props });
-ChipLeadingIcon.displayName = "Chip.LeadingIcon";
-
-// src/chip/ChipTrailingIcon.tsx
-var import_class_variance_authority7 = require("class-variance-authority");
-var import_jsx_runtime10 = require("react/jsx-runtime");
-var ChipTrailingIcon = ({
-  className,
-  ref: forwardedRef,
-  ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ChipIcon, { className: (0, import_class_variance_authority7.cx)("ml-md", className), ref: forwardedRef, ...props });
-ChipTrailingIcon.displayName = "Chip.TrailingIcon";
-
-// src/chip/index.ts
-var Chip2 = Object.assign(Chip, {
-  Content: ChipContent,
-  LeadingIcon: ChipLeadingIcon,
-  TrailingIcon: ChipTrailingIcon,
-  ClearButton: ChipClearButton
-});
-Chip2.displayName = "Chip";
-Chip2.ClearButton.displayName = "Chip.ClearButton";
-Chip2.Content.displayName = "Chip.Content";
-Chip2.LeadingIcon.displayName = "Chip.LeadingIcon";
-Chip2.TrailingIcon.displayName = "Chip.TrailingIcon";
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  Chip
-});
-//# sourceMappingURL=index.js.map