@xenide-io/the-old-ui-theme 0.5.2 → 0.5.4

package/dist/{chunk-G53YLHVE.mjs → chunk-E5ZBQYEX.mjs}

@@ -596,7 +596,14 @@ function DropdownContent({
       sticky: "partial",
       children: [
         children,
-        /* @__PURE__ */ jsx5(DropdownPrimitive.Arrow, { className: "ph-dropdown-arrow", width: 12, height: 6 })
+        /* @__PURE__ */ jsx5(
+          DropdownPrimitive.Arrow,
+          {
+            className: "ph-dropdown-arrow",
+            width: 12,
+            height: 6
+          }
+        )
       ]
     }
   ) });
@@ -604,6 +611,8 @@ function DropdownContent({
 function DropdownMenu(_a) {
   var _b = _a, {
     trigger,
+    triggerId,
+    triggerDataTest,
     children,
     align,
     side,
@@ -621,6 +630,8 @@ function DropdownMenu(_a) {
     disabled
   } = _b, props = __objRest(_b, [
     "trigger",
+    "triggerId",
+    "triggerDataTest",
     "children",
     "align",
     "side",
@@ -645,7 +656,17 @@ function DropdownMenu(_a) {
       onOpenChange,
       modal,
       children: [
-        /* @__PURE__ */ jsx5(DropdownPrimitive.Trigger, { asChild: true, disabled, children: /* @__PURE__ */ jsx5("button", { type: "button", className: "ph-dropdown-trigger", "aria-label": ariaLabel, children: trigger }) }),
+        /* @__PURE__ */ jsx5(DropdownPrimitive.Trigger, { asChild: true, disabled, children: /* @__PURE__ */ jsx5(
+          "button",
+          {
+            type: "button",
+            id: triggerId,
+            "data-test": triggerDataTest,
+            className: "ph-dropdown-trigger",
+            "aria-label": ariaLabel,
+            children: trigger
+          }
+        ) }),
         /* @__PURE__ */ jsx5(
           DropdownContent,
           {
@@ -733,7 +754,15 @@ function DropdownButton(_a) {
               split && "ph-btn-split"
             ),
             "aria-label": ariaLabel,
-            children: /* @__PURE__ */ jsx5(ButtonChrome, { label, icon, sideIcon: trailing, split })
+            children: /* @__PURE__ */ jsx5(
+              ButtonChrome,
+              {
+                label,
+                icon,
+                sideIcon: trailing,
+                split
+              }
+            )
           }
         ) }),
         /* @__PURE__ */ jsx5(
@@ -754,7 +783,15 @@ function DropdownButton(_a) {
   ) }));
 }
 function DropdownItem(_a) {
-  var _b = _a, { className, children, disabled } = _b, props = __objRest(_b, ["className", "children", "disabled"]);
+  var _b = _a, {
+    className,
+    children,
+    disabled
+  } = _b, props = __objRest(_b, [
+    "className",
+    "children",
+    "disabled"
+  ]);
   return /* @__PURE__ */ jsx5(DropdownPrimitive.Item, { asChild: true, disabled, children: /* @__PURE__ */ jsx5(
     "button",
     __spreadProps(__spreadValues({
@@ -770,11 +807,24 @@ function DropdownRadioGroup(props) {
   return /* @__PURE__ */ jsx5(DropdownPrimitive.RadioGroup, __spreadValues({}, props));
 }
 function DropdownRadioItem(_a) {
-  var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
-  return /* @__PURE__ */ jsxs3(DropdownPrimitive.RadioItem, __spreadProps(__spreadValues({ className: cn("ph-dropdown-item ph-dropdown-radio-item", className) }, props), { children: [
-    /* @__PURE__ */ jsx5("span", { className: "ph-dropdown-item-indicator", "aria-hidden": true, children: /* @__PURE__ */ jsx5(DropdownPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx5(IconCheck, { className: "h-3.5 w-3.5" }) }) }),
-    /* @__PURE__ */ jsx5("span", { children })
-  ] }));
+  var _b = _a, {
+    className,
+    children
+  } = _b, props = __objRest(_b, [
+    "className",
+    "children"
+  ]);
+  return /* @__PURE__ */ jsxs3(
+    DropdownPrimitive.RadioItem,
+    __spreadProps(__spreadValues({
+      className: cn("ph-dropdown-item ph-dropdown-radio-item", className)
+    }, props), {
+      children: [
+        /* @__PURE__ */ jsx5("span", { className: "ph-dropdown-item-indicator", "aria-hidden": true, children: /* @__PURE__ */ jsx5(DropdownPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx5(IconCheck, { className: "h-3.5 w-3.5" }) }) }),
+        /* @__PURE__ */ jsx5("span", { children })
+      ]
+    })
+  );
 }
 
 // src/components/ui/Tooltip.tsx

package/dist/{chunk-RZXHZWUB.mjs → chunk-SBBKXV35.mjs}

@@ -19,7 +19,7 @@ import {
   IconStar,
   IconTuning,
   cn
-} from "./chunk-G53YLHVE.mjs";
+} from "./chunk-E5ZBQYEX.mjs";
 import {
   __objRest,
   __spreadProps,
@@ -553,7 +553,12 @@ function SettingsNav(_a) {
       "a",
       {
         href: item.href,
-        className: cn("ph-settings-nav__item", item.active && "ph-settings-nav__item--active"),
+        id: `settings-nav-${item.id}`,
+        "data-test": `settings-nav-${item.id}`,
+        className: cn(
+          "ph-settings-nav__item",
+          item.active && "ph-settings-nav__item--active"
+        ),
         "aria-current": item.active ? "page" : void 0,
         children: [
           item.icon ? /* @__PURE__ */ jsx9("span", { className: "ph-settings-nav__icon", children: item.icon }) : null,
@@ -1471,177 +1476,65 @@ var THEMES = [
     colorScheme: "dark",
     group: "HedgeHog"
   },
-  {
-    id: "catppuccin-light",
-    name: "Catppuccin Light",
-    description: "Catppuccin Latte \u2014 soft pastels and mauve accent.",
-    colorScheme: "light",
-    group: "Catppuccin"
-  },
-  {
-    id: "catppuccin-dark",
-    name: "Catppuccin Dark",
-    description: "Catppuccin Mocha \u2014 deep base and lavender peach.",
-    colorScheme: "dark",
-    group: "Catppuccin"
-  },
-  {
-    id: "sheets",
-    name: "Sheets",
-    description: "Spreadsheet green on office neutrals.",
-    colorScheme: "light",
-    group: "Productivity"
-  },
-  {
-    id: "sheets-dark",
-    name: "Sheets Dark",
-    description: "Dark shell with spreadsheet green accent.",
-    colorScheme: "dark",
-    group: "Productivity"
-  },
   {
     id: "note",
-    name: "Note",
+    name: "Note Light",
     description: "Notebook purple on lavender-white chrome.",
     colorScheme: "light",
-    group: "Productivity"
+    group: "Note"
   },
   {
     id: "note-dark",
     name: "Note Dark",
     description: "Dark notebook purple \u2014 night reading mode.",
     colorScheme: "dark",
-    group: "Productivity"
-  },
-  {
-    id: "presentation",
-    name: "Presentation",
-    description: "Orange-red on office neutrals.",
-    colorScheme: "light",
-    group: "Productivity"
-  },
-  {
-    id: "presentation-dark",
-    name: "Presentation Dark",
-    description: "Dark shell with orange-red accent.",
-    colorScheme: "dark",
-    group: "Productivity"
-  },
-  {
-    id: "socials",
-    name: "Socials",
-    description: "Meta blue accent on familiar social greys.",
-    colorScheme: "light",
-    group: "Social"
-  },
-  {
-    id: "socials-dark",
-    name: "Socials Dark",
-    description: "Social dark mode \u2014 #18191A base and Meta blue.",
-    colorScheme: "dark",
-    group: "Social"
-  },
-  {
-    id: "chats-light",
-    name: "Chats Light",
-    description: "Aubergine brand on clean workspace neutrals.",
-    colorScheme: "light",
-    group: "Chats"
-  },
-  {
-    id: "chats-dark",
-    name: "Chats Dark",
-    description: "Dark sidebar \u2014 #1A1D21 base and green highlights.",
-    colorScheme: "dark",
-    group: "Chats"
-  },
-  {
-    id: "xenide-light",
-    name: "Xenide Light",
-    description: "xenide.io light \u2014 Excel green + purple on neutral greys.",
-    colorScheme: "light",
-    group: "Xenide"
-  },
-  {
-    id: "xenide-dark",
-    name: "Xenide Dark",
-    description: "xenide.io dark \u2014 #0A0A0F base, emerald green + violet.",
-    colorScheme: "dark",
-    group: "Xenide"
-  },
-  {
-    id: "bikini-bottom",
-    name: "Bikini Bottom",
-    description: "SpongeBob palette \u2014 ocean canvas, readable surfaces, character accents.",
-    colorScheme: "light",
-    group: "Fun"
-  },
-  {
-    id: "bikini-bottom-dark",
-    name: "Bikini Bottom Dark",
-    description: "Bikini Bottom at night \u2014 deep ocean with neon character accents.",
-    colorScheme: "dark",
-    group: "Fun"
+    group: "Note"
   },
   {
     id: "turtletime",
-    name: "TurtleTime",
+    name: "TurtleTime Light",
     description: "Turtle mascot palette \u2014 shell orange, leaf green, and warm cream.",
     colorScheme: "light",
-    group: "Fun"
+    group: "TurtleTime"
   },
   {
     id: "turtletime-dark",
     name: "TurtleTime Dark",
     description: "TurtleTime after dusk \u2014 dark olive shell with bright orange clock accents.",
     colorScheme: "dark",
-    group: "Fun"
-  },
-  {
-    id: "github-light",
-    name: "GitHub Light",
-    description: "GitHub Primer \u2014 #f6f8fa canvas and emphasis blue accents.",
-    colorScheme: "light",
-    group: "GitHub"
-  },
-  {
-    id: "github-dark",
-    name: "GitHub Dark",
-    description: "GitHub dark dimmed \u2014 #0d1117 base and #4493f8 links.",
-    colorScheme: "dark",
-    group: "GitHub"
+    group: "TurtleTime"
   },
   {
     id: "rosepine-light",
-    name: "Ros\xE9 Pine Dawn",
+    name: "Ros\xE9 Pine Light",
     description: "Ros\xE9 Pine Dawn \u2014 warm paper base with muted iris accents.",
     colorScheme: "light",
     group: "Ros\xE9 Pine"
   },
   {
     id: "rosepine-dark",
-    name: "Ros\xE9 Pine",
+    name: "Ros\xE9 Pine Dark",
     description: "Ros\xE9 Pine Main \u2014 moonlit base with iris and love accents.",
     colorScheme: "dark",
     group: "Ros\xE9 Pine"
   },
   {
-    id: "notion",
-    name: "Notion",
-    description: "Notion light \u2014 warm off-white canvas, Notion blue accent, signature dark text.",
+    id: "kraken-light",
+    name: "Kraken Light",
+    description: "Medium-inspired warm paper, editorial black actions, and publication yellow.",
     colorScheme: "light",
-    group: "Productivity"
+    group: "Kraken"
   },
   {
-    id: "notion-dark",
-    name: "Notion Dark",
-    description: "Notion dark mode \u2014 dark charcoal canvas with blue accent and clean typography.",
+    id: "kraken-dark",
+    name: "Kraken Dark",
+    description: "Medium-inspired night reading canvas with white actions and publication yellow.",
     colorScheme: "dark",
-    group: "Productivity"
+    group: "Kraken"
   },
   {
     id: "deepsea-light",
-    name: "Tokyo Night Day",
+    name: "Tokyo Day",
     description: "Tokyo Night Day \u2014 soft bluish greys with vivid blue and purple accents.",
     colorScheme: "light",
     group: "Tokyo Night"
@@ -1654,21 +1547,23 @@ var THEMES = [
     group: "Tokyo Night"
   },
   {
-    id: "kraken-light",
-    name: "Kraken Light",
-    description: "Medium-inspired warm paper, editorial black actions, and classic publication yellow.",
+    id: "malibu-light",
+    name: "Malibu Light",
+    description: "Sun-bleached GTA San Andreas palette with hot pink, sunset orange, and lime signals.",
     colorScheme: "light",
-    group: "Kraken"
+    group: "Malibu"
   },
   {
-    id: "kraken-dark",
-    name: "Kraken Dark",
-    description: "Medium-inspired night reading canvas with white actions and classic publication yellow.",
+    id: "malibu-dark",
+    name: "Malibu Dark",
+    description: "Deep plum command deck with hot pink, lime, cyan, and sunset signals.",
     colorScheme: "dark",
-    group: "Kraken"
+    group: "Malibu"
   }
 ];
-var THEME_GROUPS = Array.from(new Set(THEMES.map((theme) => theme.group)));
+var THEME_GROUPS = Array.from(
+  new Set(THEMES.map((theme) => theme.group))
+);
 function isThemeId(value) {
   return THEMES.some((theme) => theme.id === value);
 }
@@ -1679,7 +1574,7 @@ function getTheme(id) {
 // src/themes/init-theme.ts
 var STORAGE_KEY = "ph-theme";
 var VALID_THEMES = THEMES.map((theme) => theme.id);
-var THEME_INIT_SCRIPT = `(function(){try{var k="${STORAGE_KEY}",d="${DEFAULT_THEME_ID}",v=${JSON.stringify(VALID_THEMES)},t=localStorage.getItem(k);if(t==="xenide")t="xenide-light";if(!t||v.indexOf(t)<0)t=d;document.documentElement.setAttribute("data-theme",t)}catch(e){document.documentElement.setAttribute("data-theme","${DEFAULT_THEME_ID}")}})();`;
+var THEME_INIT_SCRIPT = `(function(){try{var k="${STORAGE_KEY}",d="${DEFAULT_THEME_ID}",v=${JSON.stringify(VALID_THEMES)},t=localStorage.getItem(k);if(!t||v.indexOf(t)<0)t=d;document.documentElement.setAttribute("data-theme",t)}catch(e){document.documentElement.setAttribute("data-theme","${DEFAULT_THEME_ID}")}})();`;
 function persistTheme(themeId) {
   if (typeof window === "undefined") {
     return;
@@ -1695,9 +1590,6 @@ function readStoredTheme() {
     return DEFAULT_THEME_ID;
   }
   const stored = localStorage.getItem(STORAGE_KEY);
-  if (stored === "xenide") {
-    return "xenide-light";
-  }
   return stored && isThemeId(stored) ? stored : DEFAULT_THEME_ID;
 }
 
@@ -1723,7 +1615,7 @@ function ThemeManager({ children }) {
 import { useEffect, useState } from "react";
 import { jsx as jsx22, jsxs as jsxs19 } from "react/jsx-runtime";
 function ThemeSwitcher({ className }) {
-  const [themeId, setThemeId] = useState("hedgehog-light");
+  const [themeId, setThemeId] = useState(DEFAULT_THEME_ID);
   useEffect(() => {
     const id = readStoredTheme();
     persistTheme(id);
@@ -1874,9 +1766,10 @@ function SegmentedControl({ options, value, onChange, className }) {
         "button",
         {
           type: "button",
+          "aria-pressed": value === option.value,
           onClick: () => onChange(option.value),
           className: cn(
-            "relative flex items-center gap-1.5 rounded-md px-3.5 py-1.5 text-sm font-medium transition-all",
+            "relative flex min-h-11 items-center gap-1.5 rounded-md px-3.5 py-1.5 text-sm font-medium transition-all sm:min-h-9",
             value === option.value ? "bg-ph-surface text-ph-ink shadow-ph" : "text-ph-subtle hover:text-ph-ink"
           ),
           children: [
@@ -1898,32 +1791,44 @@ function CommandPalette({
   isOpen,
   onClose,
   placeholder = "Type a command or search...",
-  className
+  className,
+  id,
+  dataTest,
+  inputId,
+  inputDataTest
 }) {
   const [query, setQuery] = useState3("");
   const [selectedIndex, setSelectedIndex] = useState3(0);
   const inputRef = useRef2(null);
+  const panelRef = useRef2(null);
+  const previousFocusRef = useRef2(null);
   const filtered = items.filter(
     (item) => item.label.toLowerCase().includes(query.toLowerCase())
   );
   useEffect2(() => {
     var _a;
-    if (isOpen) {
-      setQuery("");
-      setSelectedIndex(0);
-      (_a = inputRef.current) == null ? void 0 : _a.focus();
-    }
+    if (!isOpen) return;
+    previousFocusRef.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+    setQuery("");
+    setSelectedIndex(0);
+    (_a = inputRef.current) == null ? void 0 : _a.focus();
+    return () => {
+      var _a2;
+      return (_a2 = previousFocusRef.current) == null ? void 0 : _a2.focus();
+    };
   }, [isOpen]);
   useEffect2(() => {
     const handleKeyDown = (e) => {
-      var _a;
+      var _a, _b;
       if (!isOpen) return;
       switch (e.key) {
         case "ArrowDown":
+          if (!filtered.length) break;
           e.preventDefault();
           setSelectedIndex((i) => (i + 1) % filtered.length);
           break;
         case "ArrowUp":
+          if (!filtered.length) break;
           e.preventDefault();
           setSelectedIndex((i) => (i - 1 + filtered.length) % filtered.length);
           break;
@@ -1935,62 +1840,98 @@ function CommandPalette({
         case "Escape":
           onClose();
           break;
+        case "Tab": {
+          const focusable = (_b = panelRef.current) == null ? void 0 : _b.querySelectorAll(
+            'input, button, [href], [tabindex]:not([tabindex="-1"])'
+          );
+          if (!(focusable == null ? void 0 : focusable.length)) break;
+          const first = focusable[0];
+          const last = focusable[focusable.length - 1];
+          if (e.shiftKey && document.activeElement === first) {
+            e.preventDefault();
+            last.focus();
+          } else if (!e.shiftKey && document.activeElement === last) {
+            e.preventDefault();
+            first.focus();
+          }
+          break;
+        }
       }
     };
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [isOpen, filtered, selectedIndex, onClose]);
   if (!isOpen) return null;
-  return /* @__PURE__ */ jsx26("div", { className: "fixed inset-0 z-50 flex items-start justify-center bg-black/40 pt-[20vh] backdrop-blur-sm", children: /* @__PURE__ */ jsxs23(
+  return /* @__PURE__ */ jsx26(
     "div",
     {
-      className: cn(
-        "w-full max-w-xl overflow-hidden rounded-xl border border-ph-border bg-ph-surface shadow-ph-md",
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsxs23("div", { className: "flex items-center gap-3 border-b border-ph-border px-4 py-3", children: [
-          /* @__PURE__ */ jsx26(IconSearch, { className: "h-5 w-5 text-ph-mutedtext" }),
-          /* @__PURE__ */ jsx26(
-            "input",
-            {
-              ref: inputRef,
-              type: "text",
-              value: query,
-              onChange: (e) => {
-                setQuery(e.target.value);
-                setSelectedIndex(0);
-              },
-              placeholder,
-              className: "flex-1 bg-transparent text-ph-ink outline-none placeholder:text-ph-mutedtext"
-            }
+      id,
+      "data-test": dataTest,
+      className: "fixed inset-0 z-50 flex items-start justify-center bg-black/40 pt-[20vh] backdrop-blur-sm",
+      onMouseDown: (event) => {
+        if (event.target === event.currentTarget) onClose();
+      },
+      children: /* @__PURE__ */ jsxs23(
+        "div",
+        {
+          ref: panelRef,
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-label": "Command palette",
+          className: cn(
+            "w-full max-w-xl overflow-hidden rounded-xl border border-ph-border bg-ph-surface shadow-ph-md",
+            className
           ),
-          /* @__PURE__ */ jsx26("kbd", { className: "rounded border border-ph-border bg-ph-muted px-1.5 py-0.5 text-xs text-ph-mutedtext", children: "ESC" })
-        ] }),
-        /* @__PURE__ */ jsx26("div", { className: "max-h-[50vh] overflow-y-auto py-2", children: filtered.length === 0 ? /* @__PURE__ */ jsx26("div", { className: "px-4 py-8 text-center text-sm text-ph-mutedtext", children: "No results found." }) : filtered.map((item, index) => /* @__PURE__ */ jsxs23(
-          "button",
-          {
-            type: "button",
-            onClick: () => {
-              item.onSelect();
-              onClose();
-            },
-            onMouseEnter: () => setSelectedIndex(index),
-            className: cn(
-              "flex w-full items-center gap-3 px-4 py-2.5 text-left text-sm transition-colors",
-              index === selectedIndex ? "bg-ph-muted text-ph-ink" : "text-ph-subtle"
-            ),
-            children: [
-              item.icon && /* @__PURE__ */ jsx26("span", { className: "h-5 w-5", children: item.icon }),
-              /* @__PURE__ */ jsx26("span", { className: "flex-1", children: item.label }),
-              item.shortcut && /* @__PURE__ */ jsx26("kbd", { className: "rounded border border-ph-border bg-ph-surface px-1.5 py-0.5 text-xs text-ph-mutedtext", children: item.shortcut })
-            ]
-          },
-          item.id
-        )) })
-      ]
+          children: [
+            /* @__PURE__ */ jsxs23("div", { className: "flex items-center gap-3 border-b border-ph-border px-4 py-3", children: [
+              /* @__PURE__ */ jsx26(IconSearch, { className: "h-5 w-5 text-ph-mutedtext" }),
+              /* @__PURE__ */ jsx26(
+                "input",
+                {
+                  ref: inputRef,
+                  id: inputId,
+                  "data-test": inputDataTest,
+                  type: "text",
+                  "aria-label": "Search commands",
+                  value: query,
+                  onChange: (e) => {
+                    setQuery(e.target.value);
+                    setSelectedIndex(0);
+                  },
+                  placeholder,
+                  className: "flex-1 bg-transparent text-ph-ink outline-none placeholder:text-ph-mutedtext"
+                }
+              ),
+              /* @__PURE__ */ jsx26("kbd", { className: "rounded border border-ph-border bg-ph-muted px-1.5 py-0.5 text-xs text-ph-mutedtext", children: "ESC" })
+            ] }),
+            /* @__PURE__ */ jsx26("div", { className: "max-h-[50vh] overflow-y-auto py-2", children: filtered.length === 0 ? /* @__PURE__ */ jsx26("div", { className: "px-4 py-8 text-center text-sm text-ph-mutedtext", children: "No results found." }) : filtered.map((item, index) => /* @__PURE__ */ jsxs23(
+              "button",
+              {
+                type: "button",
+                id: `command-${item.id}`,
+                "data-test": `command-${item.id}`,
+                onClick: () => {
+                  item.onSelect();
+                  onClose();
+                },
+                onMouseEnter: () => setSelectedIndex(index),
+                className: cn(
+                  "flex w-full items-center gap-3 px-4 py-2.5 text-left text-sm transition-colors",
+                  index === selectedIndex ? "bg-ph-muted text-ph-ink" : "text-ph-subtle"
+                ),
+                children: [
+                  item.icon && /* @__PURE__ */ jsx26("span", { className: "h-5 w-5", children: item.icon }),
+                  /* @__PURE__ */ jsx26("span", { className: "flex-1", children: item.label }),
+                  item.shortcut && /* @__PURE__ */ jsx26("kbd", { className: "rounded border border-ph-border bg-ph-surface px-1.5 py-0.5 text-xs text-ph-mutedtext", children: item.shortcut })
+                ]
+              },
+              item.id
+            )) })
+          ]
+        }
+      )
     }
-  ) });
+  );
 }
 
 // src/components/ui/Calendar.tsx
@@ -4288,34 +4229,45 @@ var Chip = forwardRef13(function Chip2(_a, ref) {
     "children",
     "className"
   ]);
-  return /* @__PURE__ */ jsxs60(
+  const chipClassName = cn(
+    "ph-chip",
+    selected && "ph-chip--selected",
+    className
+  );
+  if (onRemove) {
+    const removeLabel = typeof children === "string" ? `Remove ${children}` : "Remove";
+    return /* @__PURE__ */ jsxs60("span", { className: chipClassName, children: [
+      /* @__PURE__ */ jsx72(
+        "button",
+        __spreadProps(__spreadValues({
+          ref,
+          type: "button",
+          className: "min-w-0 bg-transparent p-0 text-inherit"
+        }, props), {
+          children: /* @__PURE__ */ jsx72("span", { className: "ph-chip__text", children })
+        })
+      ),
+      /* @__PURE__ */ jsx72(
+        "button",
+        {
+          type: "button",
+          onClick: onRemove,
+          disabled: props.disabled,
+          className: "ph-chip__remove",
+          "aria-label": removeLabel,
+          children: /* @__PURE__ */ jsx72("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx72("path", { d: "M2 2l6 6M8 2l-6 6" }) })
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsx72(
     "button",
     __spreadProps(__spreadValues({
       ref,
       type: "button",
-      className: cn(
-        "ph-chip",
-        selected && "ph-chip--selected",
-        className
-      )
+      className: chipClassName
     }, props), {
-      children: [
-        /* @__PURE__ */ jsx72("span", { className: "ph-chip__text", children }),
-        onRemove && /* @__PURE__ */ jsx72(
-          "span",
-          {
-            role: "button",
-            tabIndex: -1,
-            onClick: (e) => {
-              e.stopPropagation();
-              onRemove();
-            },
-            className: "ph-chip__remove",
-            "aria-label": "Remove",
-            children: /* @__PURE__ */ jsx72("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: /* @__PURE__ */ jsx72("path", { d: "M2 2l6 6M8 2l-6 6" }) })
-          }
-        )
-      ]
+      children: /* @__PURE__ */ jsx72("span", { className: "ph-chip__text", children })
     })
   );
 });