@dmsi/wedgekit-react 0.0.5 → 0.0.7

package/dist/chunk-4TH2SUHQ.js

@@ -1,145 +0,0 @@
-import {
-  baseTransition,
-  componentGap,
-  componentPaddingMinus2pxBorder,
-  componentPaddingXUsingComponentGap,
-  paddingUsingComponentGap,
-  typography
-} from "./chunk-6XDXJ3Z3.js";
-import {
-  __objRest,
-  __spreadProps,
-  __spreadValues
-} from "./chunk-ORMEWXMH.js";
-
-// src/components/Button.tsx
-import clsx from "clsx";
-import { jsx, jsxs } from "react/jsx-runtime";
-var Button = (_a) => {
-  var _b = _a, {
-    variant = "primary",
-    as = "button",
-    block,
-    leftIcon,
-    rightIcon,
-    className,
-    classNameLabel,
-    disabled = false,
-    children
-  } = _b, props = __objRest(_b, [
-    "variant",
-    "as",
-    "block",
-    "leftIcon",
-    "rightIcon",
-    "className",
-    "classNameLabel",
-    "disabled",
-    "children"
-  ]);
-  const primaryVariantStyles = variant === "primary" && clsx(
-    "bg-background-action-primary-normal border-background-action-primary-normal text-text-on-action-primary-normal",
-    "hover:bg-background-action-primary-hover hover:border-background-action-primary-hover",
-    "focus:bg-background-action-primary-hover focus:border-background-action-primary-hover focus:outline-0",
-    "active:bg-background-action-primary-active active:border-background-action-primary-active",
-    "disabled:bg-background-action-primary-disabled disabled:border-background-action-primary-disabled disabled:text-text-on-action-primary-disabled"
-  );
-  const secondaryVariantStyles = variant === "secondary" && clsx(
-    "bg-background-action-secondary-normal border-border-action-normal text-text-action-primary-normal",
-    "hover:bg-background-action-secondary-hover hover:border-border-action-hover hover:text-text-action-primary-hover",
-    "focus:bg-background-action-secondary-hover focus:border-border-action-hover focus:text-text-action-primary-hover focus:outline-0",
-    "active:bg-background-action-secondary-active active:border-border-action-active active:text-text-action-primary-active",
-    "disabled:bg-background-action-primary-disabled disabled:border-border-action-disabled disabled:text-text-action-primary-disabled"
-  );
-  const tertiaryVariantStyles = variant === "tertiary" && clsx(
-    "bg-transparent border-transparent text-text-action-primary-normal",
-    "hover:bg-background-action-secondary-hover hover:border-background-action-secondary-hover hover:text-text-action-primary-hover",
-    "focus:bg-background-action-secondary-hover focus:border-background-action-secondary-hover focus:text-text-action-primary-hover focus:outline-0",
-    "active:bg-background-action-secondary-active active:border-transparent active:text-text-action-primary-active",
-    "disabled:bg-transparent disabled:border-transparent disabled:text-text-action-primary-disabled"
-  );
-  const primaryCriticalVariantStyles = variant === "primary-critical" && clsx(
-    "bg-background-action-critical-primary-normal border-background-action-critical-primary-normal text-text-on-action-primary-normal",
-    "hover:bg-background-action-critical-primary-hover hover:border-background-action-critical-primary-hover",
-    "focus:bg-background-action-critical-primary-hover focus:border-background-action-critical-primary-hover focus:outline-0",
-    "active:bg-background-action-critical-primary-active active:border-background-action-critical-primary-active",
-    "disabled:bg-background-action-critical-primary-disabled disabled:border-background-action-critical-primary-disabled disabled:text-text-on-action-primary-disabled"
-  );
-  const secondaryCriticalVariantStyles = variant === "secondary-critical" && clsx(
-    "bg-background-action-critical-secondary-normal border-border-action-critical-normal text-text-action-critical-normal",
-    "hover:bg-background-action-critical-secondary-hover hover:border-border-action-critical-hover hover:text-text-action-critical-hover",
-    "focus:bg-background-action-critical-secondary-hover focus:border-border-action-critical-hover focus:text-text-action-critical-hover focus:outline-0",
-    "active:bg-background-action-critical-secondary-active active:border-border-action-critical-active active:text-text-action-critical-active",
-    "disabled:bg-background-action-critical-disabled disabled:border-border-action-critical-disabled disabled:text-text-action-critical-disabled"
-  );
-  const tertiaryCriticalVariantStyles = variant === "tertiary-critical" && clsx(
-    "bg-transparent border-transparent text-text-action-critical-normal",
-    "hover:bg-background-action-critical-secondary-hover hover:border-background-action-critical-secondary-hover hover:text-text-action-critical-hover",
-    "focus:bg-background-action-critical-secondary-hover focus:border-background-action-critical-secondary-hover focus:text-text-action-critical-hover focus:outline-0",
-    "active:bg-background-action-critical-secondary-active active:border-background-action-critical-secondary-active active:text-text-action-critical-active",
-    "disabled:bg-transparent disabled:border-transparent disabled:text-text-action-critical-disabled"
-  );
-  const iconOnlyVariantStyles = variant === "icon-only" && clsx(
-    "bg-transparent border-transparent text-icon-action-primary-normal",
-    "hover:bg-background-action-secondary-hover hover:border-background-action-secondary-hover hover:text-icon-action-primary-hover",
-    "focus:bg-background-action-secondary-hover focus:border-background-action-secondary-hover focus:text-icon-action-primary-hover focus:outline-0",
-    "active:bg-background-action-secondary-active active:border-background-action-secondary-active active:text-icon-action-primary-active",
-    "disabled:bg-transparent disabled:border-transparent disabled:text-icon-action-primary-disabled"
-  );
-  const navigationVarianStyles = variant === "navigation" && clsx(
-    "bg-transparent text-text-on-action-primary-normal",
-    "hover:bg-background-on-action-secondary-hover hover:text-text-on-action-primary-hover",
-    "focus:bg-background-on-action-secondary-hover focus:text-text-on-action-primary-hover focus:outline-0",
-    "active:bg-background-on-action-secondary-active active:text-text-on-action-primary-active",
-    "disabled:bg-transparent disabled:text-text-on-action-primary-disabled",
-    "flex-col",
-    paddingUsingComponentGap
-  );
-  const notNavigationVariantStyles = variant !== "navigation" && clsx(
-    "border-2 flex-row",
-    componentPaddingMinus2pxBorder,
-    componentGap
-  );
-  const buttonClasses = clsx(
-    disabled ? "cursor-default" : "cursor-pointer",
-    block ? "w-full" : "w-fit",
-    baseTransition,
-    "rounded-sm whitespace-nowrap inline-flex items-center justify-center group/btn",
-    primaryVariantStyles,
-    secondaryVariantStyles,
-    tertiaryVariantStyles,
-    primaryCriticalVariantStyles,
-    secondaryCriticalVariantStyles,
-    tertiaryCriticalVariantStyles,
-    iconOnlyVariantStyles,
-    navigationVarianStyles,
-    notNavigationVariantStyles,
-    className
-  );
-  const labelClasses = clsx(
-    "min-h-6 flex items-center justify-center",
-    classNameLabel,
-    componentPaddingXUsingComponentGap,
-    typography.buttonLabel
-  );
-  const Element = as;
-  return /* @__PURE__ */ jsxs(
-    Element,
-    __spreadProps(__spreadValues({
-      type: "button",
-      className: buttonClasses
-    }, props), {
-      disabled,
-      children: [
-        leftIcon && leftIcon,
-        variant !== "icon-only" && children && /* @__PURE__ */ jsx("span", { className: labelClasses, children }),
-        rightIcon && rightIcon
-      ]
-    })
-  );
-};
-Button.displayName = "Button";
-
-export {
-  Button
-};

package/dist/chunk-56ORPWGF.js

@@ -1,148 +0,0 @@
-import {
-  baseTransition,
-  componentGap,
-  componentPaddingMinus2pxBorder,
-  componentPaddingXUsingComponentGap,
-  paddingUsingComponentGap,
-  typography
-} from "./chunk-JDHZQIFC.js";
-import {
-  __objRest,
-  __spreadProps,
-  __spreadValues
-} from "./chunk-ORMEWXMH.js";
-
-// src/components/Button.tsx
-import clsx from "clsx";
-import { jsx, jsxs } from "react/jsx-runtime";
-var Button = (_a) => {
-  var _b = _a, {
-    variant = "primary",
-    as = "button",
-    block,
-    leftIcon,
-    rightIcon,
-    className,
-    classNameLabel,
-    disabled = false,
-    children,
-    iconOnly = false,
-    colorClassName,
-    href
-  } = _b, props = __objRest(_b, [
-    "variant",
-    "as",
-    "block",
-    "leftIcon",
-    "rightIcon",
-    "className",
-    "classNameLabel",
-    "disabled",
-    "children",
-    "iconOnly",
-    "colorClassName",
-    "href"
-  ]);
-  const primaryVariantStyles = variant === "primary" && clsx(
-    (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-on-action-primary-normal",
-    "bg-background-action-primary-normal border-background-action-primary-normal",
-    "hover:bg-background-action-primary-hover hover:border-background-action-primary-hover",
-    "focus:bg-background-action-primary-hover focus:border-background-action-primary-hover focus:outline-0",
-    "active:bg-background-action-primary-active active:border-background-action-primary-active",
-    "disabled:bg-background-action-primary-disabled disabled:border-background-action-primary-disabled disabled:text-text-on-action-primary-disabled"
-  );
-  const secondaryVariantStyles = variant === "secondary" && clsx(
-    (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-action-primary-normal",
-    "bg-background-action-secondary-normal border-border-action-normal",
-    "hover:bg-background-action-secondary-hover hover:border-border-action-hover hover:text-text-action-primary-hover",
-    "focus:bg-background-action-secondary-hover focus:border-border-action-hover focus:text-text-action-primary-hover focus:outline-0",
-    "active:bg-background-action-secondary-active active:border-border-action-active active:text-text-action-primary-active",
-    "disabled:bg-background-action-primary-disabled disabled:border-border-action-disabled disabled:text-text-action-primary-disabled"
-  );
-  const tertiaryVariantStyles = variant === "tertiary" && clsx(
-    "bg-transparent border-transparent",
-    iconOnly ? (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-icon-action-primary-normal" : (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-action-primary-normal",
-    "bg-transparent border-transparent",
-    "hover:bg-background-action-secondary-hover hover:border-background-action-secondary-hover hover:text-text-action-primary-hover",
-    "focus:bg-background-action-secondary-hover focus:border-background-action-secondary-hover focus:text-text-action-primary-hover focus:outline-0",
-    "active:bg-background-action-secondary-active active:border-transparent active:text-text-action-primary-active",
-    "disabled:bg-transparent disabled:border-transparent disabled:text-text-action-primary-disabled"
-  );
-  const primaryCriticalVariantStyles = variant === "primary-critical" && clsx(
-    (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-on-action-primary-normal",
-    "bg-background-action-critical-primary-normal border-background-action-critical-primary-normal",
-    "hover:bg-background-action-critical-primary-hover hover:border-background-action-critical-primary-hover",
-    "focus:bg-background-action-critical-primary-hover focus:border-background-action-critical-primary-hover focus:outline-0",
-    "active:bg-background-action-critical-primary-active active:border-background-action-critical-primary-active",
-    "disabled:bg-background-action-critical-primary-disabled disabled:border-background-action-critical-primary-disabled disabled:text-text-on-action-primary-disabled"
-  );
-  const secondaryCriticalVariantStyles = variant === "secondary-critical" && clsx(
-    (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-action-critical-normal",
-    "bg-background-action-critical-secondary-normal border-border-action-critical-normal",
-    "hover:bg-background-action-critical-secondary-hover hover:border-border-action-critical-hover hover:text-text-action-critical-hover",
-    "focus:bg-background-action-critical-secondary-hover focus:border-border-action-critical-hover focus:text-text-action-critical-hover focus:outline-0",
-    "active:bg-background-action-critical-secondary-active active:border-border-action-critical-active active:text-text-action-critical-active",
-    "disabled:bg-background-action-critical-disabled disabled:border-border-action-critical-disabled disabled:text-text-action-critical-disabled"
-  );
-  const tertiaryCriticalVariantStyles = variant === "tertiary-critical" && clsx(
-    (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-action-critical-normal",
-    "bg-transparent border-transparent text-text-action-critical-normal",
-    "hover:bg-background-action-critical-secondary-hover hover:border-background-action-critical-secondary-hover hover:text-text-action-critical-hover",
-    "focus:bg-background-action-critical-secondary-hover focus:border-background-action-critical-secondary-hover focus:text-text-action-critical-hover focus:outline-0",
-    "active:bg-background-action-critical-secondary-active active:border-background-action-critical-secondary-active active:text-text-action-critical-active",
-    "disabled:bg-transparent disabled:border-transparent disabled:text-text-action-critical-disabled"
-  );
-  const navigationVarianStyles = variant === "navigation" && clsx(
-    (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-on-action-primary-normal",
-    "bg-transparent",
-    "hover:bg-background-on-action-secondary-hover hover:text-text-on-action-primary-hover",
-    "focus:bg-background-on-action-secondary-hover focus:text-text-on-action-primary-hover focus:outline-0",
-    "active:bg-background-on-action-secondary-active active:text-text-on-action-primary-active",
-    "disabled:bg-transparent disabled:text-text-on-action-primary-disabled",
-    "flex-col",
-    paddingUsingComponentGap
-  );
-  const notNavigationVariantStyles = variant !== "navigation" && clsx("border-2 flex-row", componentPaddingMinus2pxBorder, componentGap);
-  const buttonClasses = clsx(
-    disabled ? "cursor-default" : "cursor-pointer",
-    block ? "w-full" : "w-fit",
-    baseTransition,
-    "rounded-sm whitespace-nowrap inline-flex items-center justify-center group/btn",
-    primaryVariantStyles,
-    secondaryVariantStyles,
-    tertiaryVariantStyles,
-    primaryCriticalVariantStyles,
-    secondaryCriticalVariantStyles,
-    tertiaryCriticalVariantStyles,
-    navigationVarianStyles,
-    notNavigationVariantStyles,
-    className
-  );
-  const labelClasses = clsx(
-    "min-h-6 flex items-center justify-center",
-    classNameLabel,
-    componentPaddingXUsingComponentGap,
-    typography.buttonLabel
-  );
-  const Element = href ? "a" : as;
-  return /* @__PURE__ */ jsxs(
-    Element,
-    __spreadProps(__spreadValues({
-      type: Element === "button" ? "button" : void 0,
-      className: buttonClasses
-    }, props), {
-      disabled,
-      href,
-      children: [
-        leftIcon && leftIcon,
-        !iconOnly && children && /* @__PURE__ */ jsx("span", { className: labelClasses, children }),
-        rightIcon && rightIcon
-      ]
-    })
-  );
-};
-Button.displayName = "Button";
-
-export {
-  Button
-};

package/dist/chunk-5HIUW5CM.js

@@ -1,128 +0,0 @@
-import {
-  Paragraph
-} from "./chunk-IJ6AAL4W.js";
-import {
-  Label
-} from "./chunk-BENTHNAQ.js";
-import {
-  baseTransition,
-  componentGap,
-  componentPadding
-} from "./chunk-6XDXJ3Z3.js";
-import {
-  __spreadProps,
-  __spreadValues
-} from "./chunk-ORMEWXMH.js";
-
-// src/components/MenuOption.tsx
-import clsx from "clsx";
-import { useId, useRef } from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var MenuOption = ({
-  children,
-  disabled = false,
-  variant = "normal",
-  value,
-  before,
-  after,
-  subMenu,
-  onClick,
-  selected,
-  ref,
-  subMenuSystem,
-  menuLevel = 0
-}) => {
-  const uniqueId = useId();
-  const internalRef = useRef(null);
-  const actualRef = ref || internalRef;
-  const menuId = useRef(`menu-${uniqueId}`);
-  const hoverTimeout = useRef(null);
-  const hasSubMenu = typeof subMenu === "function";
-  const handleMouseEnter = () => {
-    if (disabled || !subMenuSystem || !hasSubMenu) return;
-    if (hoverTimeout.current) {
-      clearTimeout(hoverTimeout.current);
-      hoverTimeout.current = null;
-    }
-    subMenuSystem.toggleMenu(menuId.current, menuLevel + 1);
-  };
-  const handleMouseLeave = () => {
-    if (disabled || !subMenuSystem || !hasSubMenu) return;
-    if (hoverTimeout.current) {
-      clearTimeout(hoverTimeout.current);
-    }
-    hoverTimeout.current = setTimeout(() => {
-      subMenuSystem.closeSubMenuLevel(menuLevel + 1);
-    }, 200);
-  };
-  const additionalAttributes = {
-    "data-selected": selected || null
-  };
-  const svgStyles = clsx(
-    "[&>svg]:shrink-0 [&>svg]:fill-icon-action-primary-normal"
-  );
-  const textLabelStyles = clsx("w-full whitespace-nowrap !leading-6");
-  const normalStyles = variant === "normal" && !disabled && clsx(
-    "bg-transparent text-text-primary-normal",
-    "hover:bg-background-action-secondary-hover",
-    "focus:bg-background-action-secondary-hover",
-    "data-selected:bg-background-action-secondary-hover",
-    "active:bg-background-action-secondary-active"
-  );
-  const normalDisabledStyles = variant === "normal" && disabled && clsx("text-text-primary-disabled");
-  const actionStyles = variant === "action" && !disabled && clsx(
-    "text-action-400 bg-transparent",
-    "hover:bg-background-action-secondary-hover hover:text-text-action-hover",
-    "focus:bg-background-action-secondary-hover focus:text-text-action-hover",
-    "data-selected:bg-background-action-secondary-active data-selected:text-text-action-active",
-    "active:bg-background-action-secondary-active active:text-text-action-active"
-  );
-  const actionDisabledStyles = variant === "action" && disabled && clsx("text-text-action-disabled");
-  const disabledStyles = disabled && clsx("bg-transparent cursor-default pointer-events-none");
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(
-      "div",
-      __spreadProps(__spreadValues({
-        ref: actualRef,
-        className: clsx(
-          "flex items-center cursor-pointer w-full text-left relative outline-none",
-          svgStyles,
-          componentGap,
-          componentPadding,
-          baseTransition,
-          normalStyles,
-          normalDisabledStyles,
-          actionStyles,
-          actionDisabledStyles,
-          disabledStyles
-        ),
-        "data-value": value || children,
-        onClick: () => {
-          onClick == null ? void 0 : onClick(menuId.current, value || children);
-        },
-        onMouseEnter: handleMouseEnter,
-        onMouseLeave: handleMouseLeave
-      }, additionalAttributes), {
-        tabIndex: -1,
-        children: [
-          before,
-          variant === "action" ? /* @__PURE__ */ jsx(Label, { padded: true, className: textLabelStyles, children }) : /* @__PURE__ */ jsx(Paragraph, { padded: true, className: textLabelStyles, children }),
-          after
-        ]
-      })
-    ),
-    hasSubMenu && subMenuSystem ? subMenu(
-      menuId.current,
-      actualRef,
-      {
-        subMenuSystem,
-        menuLevel: menuLevel + 1
-      }
-    ) : subMenu == null ? void 0 : subMenu(menuId.current, actualRef)
-  ] });
-};
-MenuOption.displayName = "MenuOption";
-
-export {
-  MenuOption
-};

package/dist/chunk-5K3U4IUW.js

@@ -1,34 +0,0 @@
-import {
-  __objRest,
-  __spreadProps,
-  __spreadValues
-} from "./chunk-ORMEWXMH.js";
-
-// src/components/Icon.tsx
-import clsx from "clsx";
-import { jsx } from "react/jsx-runtime";
-function Icon(_a) {
-  var _b = _a, {
-    name,
-    size = 24
-  } = _b, props = __objRest(_b, [
-    "name",
-    "size"
-  ]);
-  return /* @__PURE__ */ jsx(
-    "span",
-    __spreadProps(__spreadValues({}, props), {
-      className: clsx(
-        "icon",
-        `icon-${size}`,
-        size === 16 ? "font-normal" : "font-light",
-        props.className
-      ),
-      children: name
-    })
-  );
-}
-
-export {
-  Icon
-};

package/dist/chunk-5KOZKEEM.js

@@ -1,91 +0,0 @@
-import {
-  Icon
-} from "./chunk-DZLUR2I7.js";
-import {
-  Button
-} from "./chunk-4M7CJVTZ.js";
-import {
-  __objRest,
-  __spreadProps,
-  __spreadValues
-} from "./chunk-ORMEWXMH.js";
-
-// src/components/NavigationTab.tsx
-import clsx from "clsx";
-import { jsx } from "react/jsx-runtime";
-var NavigationTab = (_a) => {
-  var _b = _a, {
-    label,
-    onClick,
-    selected = false,
-    className,
-    disabled = false,
-    colorPrimitives = "dmsi"
-  } = _b, props = __objRest(_b, [
-    "label",
-    "onClick",
-    "selected",
-    "className",
-    "disabled",
-    "colorPrimitives"
-  ]);
-  const textClassName = clsx(
-    "!text-text-on-action-primary-normal",
-    "hover:!text-text-on-action-primary-hover",
-    "active:!text-text-on-action-primary-active",
-    "disabled:!text-text-on-action-primary-disabled"
-  );
-  const disabledClassName = clsx(
-    "disabled:!bg-background-on-action-primary-disabled disabled:pointer-events-none"
-  );
-  const paddigClassName = clsx(
-    "p-mobile-component-padding desktop:p-desktop-component-padding compact:p-desktop-compact-component-padding"
-  );
-  const unselectedClassName = clsx(
-    "!bg-background-on-action-primary-normal",
-    "hover:!bg-background-on-action-primary-hover",
-    "active:!bg-background-on-action-primary-active",
-    "shadow-nav-tab"
-  );
-  const selectedClassName = clsx(
-    "!bg-background-on-action-secondary-normal",
-    "hover:!bg-background-on-action-primary-hover",
-    "active:!bg-background-on-action-primary-active"
-  );
-  const tokenOverrides = colorPrimitives === "dmsi" ? {
-    "--color-text-on-action-primary-normal": "var(--color-brand-500)",
-    "--color-text-on-action-primary-hover": "var(--color-brand-500)",
-    "--color-text-on-action-primary-active": "var(--color-brand-300)"
-  } : {
-    "--color-background-on-action-primary-normal": "#D0DDE4",
-    "--color-text-on-action-primary-normal": "#002131",
-    "--color-text-on-action-primary-hover": "#002131",
-    "--color-text-on-action-primary-active": "#1a6280"
-  };
-  return /* @__PURE__ */ jsx("div", { style: tokenOverrides, children: /* @__PURE__ */ jsx(
-    Button,
-    __spreadProps(__spreadValues({
-      variant: "tertiary-critical",
-      className: clsx(
-        "!border-0 !rounded-b-none h-10 min-w-20 relative",
-        paddigClassName,
-        textClassName,
-        disabledClassName,
-        !selected && unselectedClassName,
-        selected && selectedClassName,
-        className
-      ),
-      classNameLabel: "px-1",
-      rightIcon: /* @__PURE__ */ jsx(Icon, { name: "close", size: 16 }),
-      onClick,
-      disabled
-    }, props), {
-      children: label
-    })
-  ) });
-};
-NavigationTab.displayName = "NavigationTab";
-
-export {
-  NavigationTab
-};

package/dist/chunk-5OIRPFRD.js

@@ -1,114 +0,0 @@
-import {
-  Label
-} from "./chunk-BENTHNAQ.js";
-import {
-  Icon
-} from "./chunk-DZLUR2I7.js";
-import {
-  Button
-} from "./chunk-FQVCRL3Z.js";
-import {
-  baseTransition,
-  componentGap,
-  componentPadding,
-  componentPaddingMinusBorder,
-  componentPaddingYUsingComponentGap
-} from "./chunk-6XDXJ3Z3.js";
-import {
-  __objRest,
-  __spreadProps,
-  __spreadValues
-} from "./chunk-ORMEWXMH.js";
-
-// src/components/OptionPill.tsx
-import clsx from "clsx";
-import { jsx, jsxs } from "react/jsx-runtime";
-var OptionPill = (_a) => {
-  var _b = _a, {
-    selected = false,
-    onClick,
-    onRemove,
-    removable = false,
-    disabled = false,
-    children,
-    className
-  } = _b, props = __objRest(_b, [
-    "selected",
-    "onClick",
-    "onRemove",
-    "removable",
-    "disabled",
-    "children",
-    "className"
-  ]);
-  const additionalAttributes = {
-    "data-disabled": disabled || null,
-    "data-selected": selected || null
-  };
-  const classNames = clsx(
-    {
-      "hover:border-border-action-hover active:border-border-action-active": !disabled,
-      "data-disabled:cursor-default data-disabled:border-border-primary-normal": disabled,
-      "data-selected:border-transparent data-selected:bg-background-action-secondary-hover data-selected:outline-border-action-normal data-selected:hover:outline-border-action-hover data-selected:active:outline-border-action-active": selected,
-      "data-selected:data-disabled:bg-background-action-secondary-disabled data-selected:data-disabled:border-border-action-disabled data-selected:data-disabled:outline-transparent": disabled && selected
-    },
-    !removable && componentPadding,
-    removable && "pl-mobile-component-padding desktop:pl-desktop-component-padding compact:pl-desktop-compact-component-padding"
-  );
-  const textColor = clsx(
-    !disabled && "text-text-primary-normal",
-    disabled && !selected && "text-text-primary-disabled",
-    disabled && selected && "text-text-on-action-primary-disabled"
-  );
-  return /* @__PURE__ */ jsxs(
-    "div",
-    __spreadProps(__spreadValues(__spreadValues({
-      onClick: handleOnClick
-    }, props), additionalAttributes), {
-      className: clsx(
-        "flex items-center justify-between cursor-pointer w-max",
-        "border border-border-primary-normal rounded-base",
-        "outline-2 outline-transparent",
-        componentGap,
-        baseTransition,
-        classNames,
-        className,
-        textColor
-      ),
-      children: [
-        /* @__PURE__ */ jsx(Label, { padded: true, className: componentPaddingYUsingComponentGap, children }),
-        removable && /* @__PURE__ */ jsx(
-          Button,
-          {
-            onClick: handleOnRemove,
-            disabled,
-            className: clsx(
-              "mx-0 h-full w-10 !border-0",
-              componentPaddingMinusBorder
-            ),
-            iconOnly: true,
-            variant: "tertiary",
-            leftIcon: /* @__PURE__ */ jsx(Icon, { name: "close" })
-          }
-        )
-      ]
-    })
-  );
-  function handleOnClick() {
-    if (disabled) {
-      return;
-    }
-    onClick == null ? void 0 : onClick();
-  }
-  function handleOnRemove() {
-    if (!removable || !onRemove) {
-      return;
-    }
-    onRemove();
-  }
-};
-OptionPill.displayName = "OptionPill";
-
-export {
-  OptionPill
-};