@stella-source/stellasource-dsl 3.5.0 → 3.5.2

package/dist/cjs/index.js

@@ -23084,65 +23084,69 @@ const Tabs = ({ id, className, tabs, htmlProps, onTabClick, defaultActiveTab, va
     return (a$m.createElement(TabsBar, { "$variant": variant, "$isPill": isPill, id: id, className: className, ...htmlProps }, tabs.map((tab) => (a$m.createElement(Tab, { key: `${id}-${tab.label}`, id: `${id}-${tab.label}`, label: tab.label, active: tab.label === activeTab, variant: variant, onClick: () => handleClick(tab.label), notifications: tab.notifications })))));
 };
 
-const SelectorChipComponent = styled.button `
+const SelectorChipWrapper = styled.div `
+  position: relative;
   display: inline-flex;
   align-items: center;
-  justify-content: center;
   gap: 5px;
   height: 24px;
-  padding: 2px 8px;
-  border-radius: 4px;
+  border-radius: 5px;
   border: 1px solid var(--grey200);
   font-size: 14px;
   line-height: 1;
   font-weight: 500;
   font-family: "inter";
-  cursor: pointer;
   transition: 0.15s ease;
   background-color: var(--white);
   color: var(--charcoal);
 
-  ${({ $selected }) => $selected
-    ? styled.css `
-          background-color: var(--grey700);
-          border-color: var(--grey700);
-          color: var(--white);
-        `
-    : styled.css `
-          &:hover {
-            background: var(--grey50);
-          }
-        `}
+  ${({ $selected }) => $selected &&
+    styled.css `
+      background-color: ${Styles.color.core.primary};
+      border-color: var(--grey700);
+      color: var(--white);
+      cursor: default;
+    `}
 
-  &:disabled {
-    background-color: var(--light-grey);
-    border-color: var(--light-grey);
-    color: var(--smoke);
-    cursor: not-allowed;
-  }
+  ${({ $disabled }) => $disabled &&
+    styled.css `
+      background-color: var(--light-grey);
+      border-color: var(--light-grey);
+      color: var(--smoke);
+      cursor: not-allowed;
+      pointer-events: none;
+    `}
+`;
+const SelectorChipComponent = styled.button `
+  all: unset;
+  display: flex;
+  align-items: center;
+  height: 100%;
+  cursor: ${({ $selected }) => ($selected ? "default" : "pointer")};
 `;
-const SelectorChipLabel = styled.span `
+const SelectorChipLabel = styled.label `
   display: flex;
   align-items: center;
+  padding: 2px 8px;
+  cursor: ${({ $selected }) => ($selected ? "default" : "pointer")};
 `;
 const SelectorChipClose = styled.button `
   display: flex;
   align-items: center;
+  height: 100%;
   justify-content: center;
-
+  padding: 0px 8px 0px 0px;
   border: none;
   background: transparent;
-  padding: 0;
-
   cursor: pointer;
   color: inherit;
 `;
 
 const SelectorChip = ({ id, className, label, selected = false, disabled = false, onClick, onClose, }) => {
-    return (a$m.createElement(SelectorChipComponent, { id: id, className: className, "$selected": selected, disabled: disabled, onClick: onClick },
-        a$m.createElement(SelectorChipLabel, null, label),
+    return (a$m.createElement(SelectorChipWrapper, { className: className, "$selected": selected, "$disabled": disabled, onClick: onClick, id: id },
+        a$m.createElement(SelectorChipComponent, { "$selected": selected, id: id, type: "button" },
+            a$m.createElement(SelectorChipLabel, { "$selected": selected }, label)),
         selected && (a$m.createElement(SelectorChipClose, { type: "button", "aria-label": "Remove chip", disabled: disabled, onClick: (e) => {
-                e.stopPropagation();
                 onClose?.();
             } },
             a$m.createElement(e, { size: 16 })))));