@charcoal-ui/react 2.4.0 → 2.5.0

package/dist/index.esm.js

@@ -1459,8 +1459,8 @@ var LoadingSpinnerIcon = React14.forwardRef(function LoadingSpinnerIcon2({ once
 });
 
 // src/components/DropdownSelector/index.tsx
-import React17, { useMemo as useMemo3, useRef as useRef7 } from "react";
-import styled15 from "styled-components";
+import React19, { useMemo as useMemo3, useRef as useRef8 } from "react";
+import styled18 from "styled-components";
 import { Item, useSelectState } from "react-stately";
 import { disabledSelector as disabledSelector4 } from "@charcoal-ui/utils";
 import { useVisuallyHidden as useVisuallyHidden2 } from "@react-aria/visually-hidden";
@@ -1468,18 +1468,108 @@ import { useSelect, HiddenSelect } from "@react-aria/select";
 import { useButton } from "@react-aria/button";
 
 // src/components/DropdownSelector/Listbox.tsx
-import React15, { memo, useRef as useRef5, Fragment, useMemo as useMemo2 } from "react";
-import styled13 from "styled-components";
-import { useListBox, useOption } from "@react-aria/listbox";
+import React17, { memo, useRef as useRef6, Fragment, useMemo as useMemo2 } from "react";
+import styled16 from "styled-components";
+import { useListBox } from "@react-aria/listbox";
+
+// src/components/DropdownSelector/ListBoxSection.tsx
+import { useListBoxSection } from "@react-aria/listbox";
+import { useSeparator } from "@react-aria/separator";
+import React16 from "react";
+import styled15 from "styled-components";
+
+// src/components/DropdownSelector/Option.tsx
+import React15, { useRef as useRef5 } from "react";
+import styled13, { css as css5 } from "styled-components";
+import { useOption } from "@react-aria/listbox";
 import { mergeProps } from "@react-aria/utils";
 import { useFocusRing } from "@react-aria/focus";
 import { px as px3 } from "@charcoal-ui/utils";
+function Option({ item, state, mode }) {
+  const ref = useRef5(null);
+  const { optionProps, isSelected } = useOption(item, state, ref);
+  const { focusProps } = useFocusRing();
+  return /* @__PURE__ */ React15.createElement(OptionRoot, { ...mergeProps(optionProps, focusProps), ref, mode }, /* @__PURE__ */ React15.createElement(OptionCheckIcon, { name: "16/Check", isSelected }), /* @__PURE__ */ React15.createElement(OptionText, null, item.rendered));
+}
+var OptionRoot = styled13.li`
+  display: flex;
+  align-items: center;
+  gap: ${({ theme: theme4 }) => px3(theme4.spacing[4])};
+  height: 40px;
+  cursor: pointer;
+  outline: none;
+
+  ${({ mode }) => theme((o) => [
+  o.padding.horizontal(8),
+  mode === "separator" && o.padding.vertical(4)
+])}
+
+  &:focus {
+    ${theme((o) => [o.bg.surface3])}
+  }
+`;
+var OptionCheckIcon = styled13(Icon_default)`
+  visibility: hidden;
+  ${theme((o) => [o.font.text2])}
+
+  ${({ isSelected }) => isSelected && css5`
+      visibility: visible;
+    `}
+`;
+var OptionText = styled13.span`
+  display: block;
+  ${theme((o) => [o.typography(14), o.font.text2])}
+`;
+
+// src/components/DropdownSelector/Divider.tsx
+import styled14 from "styled-components";
+var Divider = styled14.div.attrs({ role: "separator" })`
+  display: flex;
+
+  &:before {
+    content: '';
+    display: block;
+    width: 100%;
+    height: 1px;
+    background: #00000014;
+  }
+`;
+
+// src/components/DropdownSelector/ListBoxSection.tsx
+function ListBoxSection(props) {
+  const { state } = props;
+  const { itemProps, headingProps, groupProps } = useListBoxSection({
+    heading: props.section.rendered,
+    "aria-label": props.section["aria-label"]
+  });
+  const { separatorProps } = useSeparator({
+    elementType: "li"
+  });
+  return /* @__PURE__ */ React16.createElement(React16.Fragment, null, props.section.key !== props.state.collection.getFirstKey() && /* @__PURE__ */ React16.createElement(Divider, { ...separatorProps, role: "separator" }), /* @__PURE__ */ React16.createElement(StyledLi, { ...itemProps }, props.section.rendered != null && /* @__PURE__ */ React16.createElement(SectionSpan, { ...headingProps }, props.section.rendered), /* @__PURE__ */ React16.createElement(StyledUl, { ...groupProps }, [...props.section.childNodes].map((node) => /* @__PURE__ */ React16.createElement(Option, { key: node.key, item: node, state })))));
+}
+var SectionSpan = styled15.span`
+  ${theme((o) => [
+  o.font.text3,
+  o.typography(12).bold,
+  o.margin.bottom(8).left(16).top(16)
+])}
+`;
+var StyledUl = styled15.ul`
+  padding-left: 0;
+  margin: 0;
+  box-sizing: border-box;
+  list-style: none;
+  overflow: hidden;
+`;
+var StyledLi = styled15.li``;
+
+// src/components/DropdownSelector/Listbox.tsx
 var Listbox = ({
   state,
   mode = "default",
   ...props
 }) => {
-  const ref = useRef5(null);
+  const ref = useRef6(null);
   const { listBoxProps } = useListBox(props, state, ref);
   const collection = useMemo2(
     () => [...state.collection].map((node, index, self) => ({
@@ -1489,10 +1579,10 @@ var Listbox = ({
     })),
     [state.collection]
   );
-  return /* @__PURE__ */ React15.createElement(ListboxRoot, { ref, ...listBoxProps }, collection.map(({ node, last }) => /* @__PURE__ */ React15.createElement(Fragment, { key: node.key }, /* @__PURE__ */ React15.createElement(Option, { item: node, state, mode }), !last && mode === "separator" && /* @__PURE__ */ React15.createElement(Divider, null))));
+  return /* @__PURE__ */ React17.createElement(ListboxRoot, { ref, ...listBoxProps }, collection.map(({ node, last }) => /* @__PURE__ */ React17.createElement(Fragment, { key: node.key }, node.type === "section" ? /* @__PURE__ */ React17.createElement(ListBoxSection, { section: node, state }) : /* @__PURE__ */ React17.createElement(Option, { item: node, state, mode }), !last && mode === "separator" && /* @__PURE__ */ React17.createElement(Divider, null))));
 };
 var Listbox_default = memo(Listbox);
-var ListboxRoot = styled13.ul`
+var ListboxRoot = styled16.ul`
   padding-left: 0;
   margin: 0;
   box-sizing: border-box;
@@ -1504,71 +1594,25 @@ var ListboxRoot = styled13.ul`
   o.bg.background1,
   o.border.default,
   o.borderRadius(8),
+  o.padding.vertical(8),
   o.outline.default.focus
 ])}
 `;
-var Divider = styled13.div.attrs({ role: "separator" })`
-  display: flex;
-  ${theme((o) => [o.padding.horizontal(8)])}
-
-  &:before {
-    content: '';
-    display: block;
-    width: 100%;
-    height: 1px;
-    background: #00000014;
-  }
-`;
-var Option = ({ item, state, mode }) => {
-  const ref = useRef5(null);
-  const { optionProps, isSelected } = useOption(item, state, ref);
-  const { focusProps } = useFocusRing();
-  return /* @__PURE__ */ React15.createElement(OptionRoot, { ...mergeProps(optionProps, focusProps), ref, mode }, isSelected && /* @__PURE__ */ React15.createElement(OptionCheckIcon, { name: "16/Check" }), /* @__PURE__ */ React15.createElement(OptionText, { isSelected }, item.rendered));
-};
-var OptionRoot = styled13.li`
-  display: flex;
-  align-items: center;
-  gap: ${({ theme: theme4 }) => px3(theme4.spacing[4])};
-  height: 40px;
-  cursor: pointer;
-  outline: none;
-
-  ${({ mode }) => theme((o) => [
-  o.padding.horizontal(8),
-  mode === "separator" && o.padding.vertical(4)
-])}
-
-  &:focus {
-    ${theme((o) => [o.bg.surface3])}
-  }
-`;
-var OptionCheckIcon = styled13(Icon_default)`
-  ${theme((o) => [o.font.text2])}
-`;
-var OptionText = styled13.span`
-  display: block;
-  ${({ isSelected }) => theme((o) => [
-  o.typography(14),
-  o.font.text2,
-  isSelected ? void 0 : o.margin.left(16),
-  isSelected ? void 0 : o.padding.left(4)
-])}
-`;
 
 // src/components/DropdownSelector/DropdownPopover.tsx
-import React16, { useEffect as useEffect2, useRef as useRef6 } from "react";
+import React18, { useEffect as useEffect2, useRef as useRef7 } from "react";
 import {
   DismissButton,
   Overlay as Overlay2,
   usePopover
 } from "@react-aria/overlays";
-import styled14 from "styled-components";
-var DropdownPopoverDiv = styled14.div`
+import styled17 from "styled-components";
+var DropdownPopoverDiv = styled17.div`
   width: 100%;
   ${theme((o) => o.margin.top(4).bottom(4))}
 `;
 function DropdownPopover({ children, state, ...props }) {
-  const ref = useRef6(null);
+  const ref = useRef7(null);
   const { popoverProps, underlayProps } = usePopover(
     {
       ...props,
@@ -1597,7 +1641,7 @@ function DropdownPopover({ children, state, ...props }) {
       });
     }
   }, [props.value, state.isOpen]);
-  return /* @__PURE__ */ React16.createElement(Overlay2, null, /* @__PURE__ */ React16.createElement("div", { ...underlayProps, style: { position: "fixed", inset: 0 } }), /* @__PURE__ */ React16.createElement(DropdownPopoverDiv, { ...popoverProps, ref }, /* @__PURE__ */ React16.createElement(DismissButton, { onDismiss: () => state.close() }), children, /* @__PURE__ */ React16.createElement(DismissButton, { onDismiss: () => state.close() })));
+  return /* @__PURE__ */ React18.createElement(Overlay2, { portalContainer: document.body }, /* @__PURE__ */ React18.createElement("div", { ...underlayProps, style: { position: "fixed", inset: 0 } }), /* @__PURE__ */ React18.createElement(DropdownPopoverDiv, { ...popoverProps, ref }, /* @__PURE__ */ React18.createElement(DismissButton, { onDismiss: () => state.close() }), children, /* @__PURE__ */ React18.createElement(DismissButton, { onDismiss: () => state.close() })));
 }
 
 // src/components/DropdownSelector/index.tsx
@@ -1617,7 +1661,7 @@ var DropdownSelector = ({
   ...props
 }) => {
   const { visuallyHiddenProps } = useVisuallyHidden2();
-  const triggerRef = useRef7(null);
+  const triggerRef = useRef8(null);
   const selectProps = useMemo3(
     () => ({
       ...props,
@@ -1644,7 +1688,7 @@ var DropdownSelector = ({
   } = useSelect(selectProps, state, triggerRef);
   const { buttonProps } = useButton(triggerProps, triggerRef);
   const hasAssertiveText = assertiveText !== void 0 && assertiveText.length > 0;
-  return /* @__PURE__ */ React17.createElement(DropdownSelectorRoot, { "aria-disabled": disabled, className }, /* @__PURE__ */ React17.createElement(
+  return /* @__PURE__ */ React19.createElement(DropdownSelectorRoot, { "aria-disabled": disabled, className }, /* @__PURE__ */ React19.createElement(
     DropdownFieldLabel,
     {
       label,
@@ -1654,7 +1698,7 @@ var DropdownSelector = ({
       ...labelProps,
       ...!showLabel ? visuallyHiddenProps : {}
     }
-  ), /* @__PURE__ */ React17.createElement(
+  ), /* @__PURE__ */ React19.createElement(
     HiddenSelect,
     {
       state,
@@ -1664,15 +1708,15 @@ var DropdownSelector = ({
       isDisabled: disabled,
       autoComplete
     }
-  ), /* @__PURE__ */ React17.createElement(DropdownButtonWrapper, null, /* @__PURE__ */ React17.createElement(DropdownButton, { ...buttonProps, ref: triggerRef, invalid }, /* @__PURE__ */ React17.createElement(DropdownButtonText, { ...valueProps }, state.selectedItem ? state.selectedItem.rendered : props.placeholder), /* @__PURE__ */ React17.createElement(DropdownButtonIcon, { name: "16/Menu" })), state.isOpen && /* @__PURE__ */ React17.createElement(
+  ), /* @__PURE__ */ React19.createElement(DropdownButtonWrapper, null, /* @__PURE__ */ React19.createElement(DropdownButton, { ...buttonProps, ref: triggerRef, invalid }, /* @__PURE__ */ React19.createElement(DropdownButtonText, { ...valueProps }, state.selectedItem ? state.selectedItem.rendered : props.placeholder), /* @__PURE__ */ React19.createElement(DropdownButtonIcon, { name: "16/Menu" })), state.isOpen && /* @__PURE__ */ React19.createElement(
     DropdownPopover,
     {
       state,
       triggerRef,
       value: props.value ?? props.defaultValue
     },
-    /* @__PURE__ */ React17.createElement(Listbox_default, { ...menuProps, state, mode })
-  )), hasAssertiveText && /* @__PURE__ */ React17.createElement(
+    /* @__PURE__ */ React19.createElement(Listbox_default, { ...menuProps, state, mode })
+  )), hasAssertiveText && /* @__PURE__ */ React19.createElement(
     AssertiveText,
     {
       invalid,
@@ -1683,7 +1727,7 @@ var DropdownSelector = ({
 };
 var DropdownSelector_default = DropdownSelector;
 var DropdownSelectorItem = Item;
-var DropdownSelectorRoot = styled15.div`
+var DropdownSelectorRoot = styled18.div`
   position: relative;
   display: inline-block;
   width: 100%;
@@ -1693,15 +1737,15 @@ var DropdownSelectorRoot = styled15.div`
     ${theme((o) => o.disabled)}
   }
 `;
-var DropdownFieldLabel = styled15(FieldLabel_default)`
+var DropdownFieldLabel = styled18(FieldLabel_default)`
   width: 100%;
 
   ${theme((o) => o.margin.bottom(8))}
 `;
-var DropdownButtonWrapper = styled15.div`
+var DropdownButtonWrapper = styled18.div`
   position: relative;
 `;
-var DropdownButton = styled15.button`
+var DropdownButton = styled18.button`
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -1724,15 +1768,15 @@ var DropdownButton = styled15.button`
   invalid && o.outline.assertive
 ])}
 `;
-var DropdownButtonText = styled15.span`
+var DropdownButtonText = styled18.span`
   text-align: left;
 
   ${theme((o) => [o.typography(14), o.font.text2])}
 `;
-var DropdownButtonIcon = styled15(Icon_default)`
+var DropdownButtonIcon = styled18(Icon_default)`
   ${theme((o) => [o.font.text2])}
 `;
-var AssertiveText = styled15.div`
+var AssertiveText = styled18.div`
   ${({ invalid }) => theme((o) => [
   o.typography(14),
   o.margin.top(8),
@@ -1741,23 +1785,23 @@ var AssertiveText = styled15.div`
 `;
 
 // src/components/SegmentedControl/index.tsx
-import React19, { forwardRef, memo as memo2, useMemo as useMemo4, useRef as useRef8 } from "react";
+import React21, { forwardRef, memo as memo2, useMemo as useMemo4, useRef as useRef9 } from "react";
 import { useRadioGroupState } from "react-stately";
 import {
   useRadio,
   useRadioGroup
 } from "@react-aria/radio";
-import styled16 from "styled-components";
+import styled19 from "styled-components";
 import { disabledSelector as disabledSelector5 } from "@charcoal-ui/utils";
 
 // src/components/SegmentedControl/RadioGroupContext.tsx
-import React18, { createContext as createContext2, useContext as useContext5 } from "react";
+import React20, { createContext as createContext2, useContext as useContext5 } from "react";
 var RadioContext = createContext2(null);
 var RadioProvider = ({
   value,
   children
 }) => {
-  return /* @__PURE__ */ React18.createElement(RadioContext.Provider, { value }, children);
+  return /* @__PURE__ */ React20.createElement(RadioContext.Provider, { value }, children);
 };
 var useRadioContext = () => {
   const state = useContext5(RadioContext);
@@ -1785,7 +1829,7 @@ var SegmentedControl = forwardRef(
         (d) => typeof d === "string" ? { value: d, label: d } : d
       );
     }, [props.data]);
-    return /* @__PURE__ */ React19.createElement(SegmentedControlRoot, { ref, ...radioGroupProps }, /* @__PURE__ */ React19.createElement(RadioProvider, { value: state }, segmentedControlItems.map((item) => /* @__PURE__ */ React19.createElement(
+    return /* @__PURE__ */ React21.createElement(SegmentedControlRoot, { ref, ...radioGroupProps }, /* @__PURE__ */ React21.createElement(RadioProvider, { value: state }, segmentedControlItems.map((item) => /* @__PURE__ */ React21.createElement(
       Segmented,
       {
         key: item.value,
@@ -1799,7 +1843,7 @@ var SegmentedControl = forwardRef(
 var SegmentedControl_default = memo2(SegmentedControl);
 var Segmented = ({ children, ...props }) => {
   const state = useRadioContext();
-  const ref = useRef8(null);
+  const ref = useRef9(null);
   const ariaRadioProps = useMemo4(
     () => ({ ...props, isDisabled: props.disabled }),
     [props]
@@ -1809,23 +1853,23 @@ var Segmented = ({ children, ...props }) => {
     state,
     ref
   );
-  return /* @__PURE__ */ React19.createElement(
+  return /* @__PURE__ */ React21.createElement(
     SegmentedRoot,
     {
       "aria-disabled": isDisabled || state.isReadOnly,
       checked: isSelected
     },
-    /* @__PURE__ */ React19.createElement(SegmentedInput, { ...inputProps, ref }),
-    /* @__PURE__ */ React19.createElement(RadioLabel2, null, /* @__PURE__ */ React19.createElement(SegmentedLabelInner, null, children))
+    /* @__PURE__ */ React21.createElement(SegmentedInput, { ...inputProps, ref }),
+    /* @__PURE__ */ React21.createElement(RadioLabel2, null, /* @__PURE__ */ React21.createElement(SegmentedLabelInner, null, children))
   );
 };
-var SegmentedControlRoot = styled16.div`
+var SegmentedControlRoot = styled19.div`
   display: inline-flex;
   align-items: center;
 
   ${theme((o) => [o.bg.surface3, o.borderRadius(16)])}
 `;
-var SegmentedRoot = styled16.label`
+var SegmentedRoot = styled19.label`
   position: relative;
   display: flex;
   align-items: center;
@@ -1844,7 +1888,7 @@ var SegmentedRoot = styled16.label`
   checked === true ? o.font.text5 : o.font.text2
 ])}
 `;
-var SegmentedInput = styled16.input`
+var SegmentedInput = styled19.input`
   position: absolute;
 
   height: 0px;
@@ -1858,19 +1902,19 @@ var SegmentedInput = styled16.input`
   white-space: nowrap;
   opacity: 0;
 `;
-var RadioLabel2 = styled16.div`
+var RadioLabel2 = styled19.div`
   background: transparent;
   display: flex;
   align-items: center;
   height: 22px;
 `;
-var SegmentedLabelInner = styled16.div`
+var SegmentedLabelInner = styled19.div`
   ${theme((o) => [o.typography(14)])}
 `;
 
 // src/components/Checkbox/index.tsx
-import React20, { forwardRef as forwardRef2, memo as memo3, useMemo as useMemo5 } from "react";
-import styled17, { css as css5 } from "styled-components";
+import React22, { forwardRef as forwardRef2, memo as memo3, useMemo as useMemo5 } from "react";
+import styled20, { css as css6 } from "styled-components";
 import { useCheckbox } from "@react-aria/checkbox";
 import { useObjectRef } from "@react-aria/utils";
 import { useToggleState as useToggleState2 } from "react-stately";
@@ -1891,14 +1935,14 @@ var Checkbox = forwardRef2(
     const objectRef = useObjectRef(ref);
     const { inputProps } = useCheckbox(ariaCheckboxProps, state, objectRef);
     const isDisabled = (props.disabled ?? false) || (props.readonly ?? false);
-    return /* @__PURE__ */ React20.createElement(InputRoot, { "aria-disabled": isDisabled }, /* @__PURE__ */ React20.createElement(CheckboxRoot, null, /* @__PURE__ */ React20.createElement(CheckboxInput, { type: "checkbox", ...inputProps }), /* @__PURE__ */ React20.createElement(CheckboxInputOverlay, { "aria-hidden": true, checked: inputProps.checked }, /* @__PURE__ */ React20.createElement(Icon_default, { name: "24/Check", unsafeNonGuidelineScale: 2 / 3 }))), "children" in props && /* @__PURE__ */ React20.createElement(InputLabel, null, props.children));
+    return /* @__PURE__ */ React22.createElement(InputRoot, { "aria-disabled": isDisabled }, /* @__PURE__ */ React22.createElement(CheckboxRoot, null, /* @__PURE__ */ React22.createElement(CheckboxInput, { type: "checkbox", ...inputProps }), /* @__PURE__ */ React22.createElement(CheckboxInputOverlay, { "aria-hidden": true, checked: inputProps.checked }, /* @__PURE__ */ React22.createElement(Icon_default, { name: "24/Check", unsafeNonGuidelineScale: 2 / 3 }))), "children" in props && /* @__PURE__ */ React22.createElement(InputLabel, null, props.children));
   }
 );
 var Checkbox_default = memo3(Checkbox);
-var hiddenCss = css5`
+var hiddenCss = css6`
   visibility: hidden;
 `;
-var InputRoot = styled17.label`
+var InputRoot = styled20.label`
   position: relative;
   display: flex;
 
@@ -1910,10 +1954,10 @@ var InputRoot = styled17.label`
   gap: ${({ theme: theme4 }) => px4(theme4.spacing[4])};
   ${theme((o) => [o.disabled])}
 `;
-var CheckboxRoot = styled17.div`
+var CheckboxRoot = styled20.div`
   position: relative;
 `;
-var CheckboxInput = styled17.input`
+var CheckboxInput = styled20.input`
   &[type='checkbox'] {
     appearance: none;
     display: block;
@@ -1933,7 +1977,7 @@ var CheckboxInput = styled17.input`
     ${theme((o) => [o.outline.default.focus, o.borderRadius(4)])}
   }
 `;
-var CheckboxInputOverlay = styled17.div`
+var CheckboxInputOverlay = styled20.div`
   position: absolute;
   top: -2px;
   left: -2px;
@@ -1946,7 +1990,7 @@ var CheckboxInputOverlay = styled17.div`
 
   ${({ checked }) => checked !== true && hiddenCss};
 `;
-var InputLabel = styled17.div`
+var InputLabel = styled20.div`
   ${theme((o) => [o.font.text2])}
 
   font-size: 14px;
@@ -1955,13 +1999,13 @@ var InputLabel = styled17.div`
 `;
 
 // src/components/TagItem/index.tsx
-import React21, {
+import React23, {
   forwardRef as forwardRef3,
   memo as memo4,
   useMemo as useMemo6
 } from "react";
 import { useObjectRef as useObjectRef2 } from "@react-aria/utils";
-import styled18, { css as css6 } from "styled-components";
+import styled21, { css as css7 } from "styled-components";
 import { disabledSelector as disabledSelector7, px as px5 } from "@charcoal-ui/utils";
 import { useButton as useButton2 } from "@react-aria/button";
 var sizeMap = {
@@ -1990,7 +2034,7 @@ var TagItem = forwardRef3(
     );
     const { buttonProps } = useButton2(ariaButtonProps, ref);
     const hasTranslatedLabel = translatedLabel !== void 0 && translatedLabel.length > 0;
-    return /* @__PURE__ */ React21.createElement(
+    return /* @__PURE__ */ React23.createElement(
       TagItemRoot,
       {
         ref,
@@ -1998,13 +2042,13 @@ var TagItem = forwardRef3(
         status,
         ...buttonProps
       },
-      /* @__PURE__ */ React21.createElement(Background, { bgColor, bgImage }),
-      /* @__PURE__ */ React21.createElement(Inner, null, /* @__PURE__ */ React21.createElement(LabelWrapper, { isTranslate: hasTranslatedLabel }, hasTranslatedLabel && /* @__PURE__ */ React21.createElement(TranslatedLabel, null, /* @__PURE__ */ React21.createElement(Label3, null, translatedLabel)), /* @__PURE__ */ React21.createElement(Label3, null, label)), status === "active" && /* @__PURE__ */ React21.createElement(Icon_default, { name: "16/Remove" }))
+      /* @__PURE__ */ React23.createElement(Background, { bgColor, bgImage, status }),
+      /* @__PURE__ */ React23.createElement(Inner, null, /* @__PURE__ */ React23.createElement(LabelWrapper, { isTranslate: hasTranslatedLabel }, hasTranslatedLabel && /* @__PURE__ */ React23.createElement(TranslatedLabel, null, /* @__PURE__ */ React23.createElement(Label3, null, translatedLabel)), /* @__PURE__ */ React23.createElement(Label3, null, label)), status === "active" && /* @__PURE__ */ React23.createElement(Icon_default, { name: "16/Remove" }))
     );
   }
 );
 var TagItem_default = memo4(TagItem);
-var TagItemRoot = styled18.a`
+var TagItemRoot = styled21.a`
   isolation: isolate;
   position: relative;
   height: ${({ size }) => sizeMap[size]}px;
@@ -2020,7 +2064,6 @@ var TagItemRoot = styled18.a`
   o.borderRadius(4),
   status !== "active" && size === "M" && o.padding.horizontal(24),
   status !== "active" && size === "S" && o.padding.horizontal(16),
-  status === "inactive" && o.bg.surface3,
   status === "inactive" ? o.font.text2 : o.font.text5,
   ...status === "active" ? [o.padding.left(16), o.padding.right(8)] : []
 ])}
@@ -2030,7 +2073,7 @@ var TagItemRoot = styled18.a`
     cursor: default;
   }
 `;
-var Background = styled18.div`
+var Background = styled21.div`
   position: absolute;
   z-index: 1;
   top: 0;
@@ -2039,8 +2082,9 @@ var Background = styled18.div`
   height: 100%;
 
   background-color: ${({ bgColor }) => bgColor};
+  ${({ status }) => status === "inactive" && theme((o) => o.bg.surface3)}
 
-  ${({ bgImage }) => bgImage !== void 0 && css6`
+  ${({ bgImage }) => bgImage !== void 0 && css7`
       ${theme((o) => [o.bg.surface4])}
       &::before {
         content: '';
@@ -2056,25 +2100,25 @@ var Background = styled18.div`
       }
     `}
 `;
-var Inner = styled18.div`
+var Inner = styled21.div`
   display: inline-flex;
   gap: ${({ theme: theme4 }) => px5(theme4.spacing[8])};
   align-items: center;
   z-index: 2;
 `;
-var labelCSS = css6`
+var labelCSS = css7`
   ${theme((o) => [o.typography(14).bold])}
 `;
-var translateLabelCSS = css6`
+var translateLabelCSS = css7`
   display: flex;
   align-items: center;
   flex-direction: column;
   font-size: 10px;
 `;
-var LabelWrapper = styled18.div`
+var LabelWrapper = styled21.div`
   ${({ isTranslate }) => isTranslate ?? false ? translateLabelCSS : labelCSS}
 `;
-var Label3 = styled18.span`
+var Label3 = styled21.span`
   max-width: 152px;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -2083,7 +2127,7 @@ var Label3 = styled18.span`
   color: inherit;
   line-height: inherit;
 `;
-var TranslatedLabel = styled18.div`
+var TranslatedLabel = styled21.div`
   ${theme((o) => [o.typography(12).bold])}
 `;
 export {