@charcoal-ui/react 4.0.0-beta.2 → 4.0.0-beta.4

package/dist/index.esm.js

@@ -68,11 +68,12 @@ var Button = forwardRef2(function Button2({
   className,
   as,
   isActive,
+  componentAs,
   ...props
 }, ref) {
   const Component = useMemo2(() => as ?? "button", [as]);
   const classNames = useClassNames("charcoal-button", className);
-  return /* @__PURE__ */ jsx3(Component, { ...props, className: classNames, "data-variant": variant, "data-size": size, "data-full-width": fullWidth, "data-active": isActive, ref });
+  return /* @__PURE__ */ jsx3(Component, { ...props, as: componentAs, className: classNames, "data-variant": variant, "data-size": size, "data-full-width": fullWidth, "data-active": isActive, ref });
 });
 var Button_default = Button;
 
@@ -279,7 +280,7 @@ function RadioGroup({
 }
 
 // src/components/MultiSelect/index.tsx
-import { useCallback as useCallback2, useContext as useContext3, forwardRef as forwardRef6, memo as memo2 } from "react";
+import { useCallback as useCallback2, useContext as useContext3, forwardRef as forwardRef7, memo as memo2 } from "react";
 import styled4, { css as css2 } from "styled-components";
 import warning2 from "warning";
 import { px } from "@charcoal-ui/utils";
@@ -299,8 +300,25 @@ var MultiSelectGroupContext = createContext3({
 
 // src/components/MultiSelect/index.tsx
 import { focusVisibleFocusRingCss as focusVisibleFocusRingCss3 } from "@charcoal-ui/styled";
-import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
-var MultiSelect = forwardRef6(function MultiSelectInner({
+
+// src/components/Icon/index.tsx
+import * as React5 from "react";
+import "@charcoal-ui/icons";
+import { jsx as jsx7 } from "react/jsx-runtime";
+var Icon = React5.forwardRef(function IconInner({
+  name,
+  scale,
+  unsafeNonGuidelineScale,
+  className,
+  ...rest
+}, ref) {
+  return /* @__PURE__ */ jsx7("pixiv-icon", { ref, name, scale, "unsafe-non-guideline-scale": unsafeNonGuidelineScale, class: className, ...rest });
+});
+var Icon_default = Icon;
+
+// src/components/MultiSelect/index.tsx
+import { jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
+var MultiSelect = forwardRef7(function MultiSelectInner({
   value,
   disabled = false,
   onChange,
@@ -337,13 +355,13 @@ var MultiSelect = forwardRef6(function MultiSelectInner({
     });
   }, [onChange, parentOnChange, value]);
   return /* @__PURE__ */ jsxs3(MultiSelectRoot, { "aria-disabled": isDisabled, className, children: [
-    /* @__PURE__ */ jsx7(MultiSelectInput, { ...{
+    /* @__PURE__ */ jsx8(MultiSelectInput, { ...{
       name,
       value,
       invalid
     }, checked: isSelected, disabled: isDisabled, onChange: handleChange, overlay: variant === "overlay", "aria-invalid": invalid, ref }),
-    /* @__PURE__ */ jsx7(MultiSelectInputOverlay, { overlay: variant === "overlay", invalid, "aria-hidden": true, children: /* @__PURE__ */ jsx7("pixiv-icon", { name: "24/Check", "unsafe-non-guideline-scale": 16 / 24 }) }),
-    Boolean(children) && /* @__PURE__ */ jsx7(MultiSelectLabel, { children })
+    /* @__PURE__ */ jsx8(MultiSelectInputOverlay, { overlay: variant === "overlay", invalid, "aria-hidden": true, children: /* @__PURE__ */ jsx8(Icon_default, { name: "24/Check", "unsafe-non-guideline-scale": 16 / 24 }) }),
+    Boolean(children) && /* @__PURE__ */ jsx8(MultiSelectLabel, { children })
   ] });
 });
 var MultiSelect_default = memo2(MultiSelect);
@@ -396,25 +414,25 @@ function MultiSelectGroup({
       }
     }
   }, [onChange, selected]);
-  return /* @__PURE__ */ jsx7(MultiSelectGroupContext.Provider, { value: {
+  return /* @__PURE__ */ jsx8(MultiSelectGroupContext.Provider, { value: {
     name,
     selected: Array.from(new Set(selected)),
     disabled,
     readonly,
     invalid,
     onChange: handleChange
-  }, children: /* @__PURE__ */ jsx7("div", { className, "aria-label": label, "data-testid": "SelectGroup", children }) });
+  }, children: /* @__PURE__ */ jsx8("div", { className, "aria-label": label, "data-testid": "SelectGroup", children }) });
 }
 
 // src/components/Switch/index.tsx
 import { useSwitch } from "@react-aria/switch";
-import { useMemo as useMemo3, memo as memo3, forwardRef as forwardRef7 } from "react";
+import { useMemo as useMemo3, memo as memo3, forwardRef as forwardRef8 } from "react";
 import { useToggleState } from "react-stately";
 import styled5 from "styled-components";
 import { useObjectRef } from "@react-aria/utils";
 import { focusVisibleFocusRingCss as focusVisibleFocusRingCss4 } from "@charcoal-ui/styled";
-import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
-var SwitchCheckbox = forwardRef7(function SwitchCheckboxInner(props, external) {
+import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
+var SwitchCheckbox = forwardRef8(function SwitchCheckboxInner(props, external) {
   const {
     disabled,
     className
@@ -435,8 +453,8 @@ var SwitchCheckbox = forwardRef7(function SwitchCheckboxInner(props, external) {
     }
   } = useSwitch(ariaSwitchProps, state, ref);
   return /* @__PURE__ */ jsxs4(Label, { className, "aria-disabled": disabled, children: [
-    /* @__PURE__ */ jsx8(SwitchInput, { ...rest, ref }),
-    "children" in props ? /* @__PURE__ */ jsx8(LabelInner, { children: props.children }) : void 0
+    /* @__PURE__ */ jsx9(SwitchInput, { ...rest, ref }),
+    "children" in props ? /* @__PURE__ */ jsx9(LabelInner, { children: props.children }) : void 0
   ] });
 });
 var Switch_default = memo3(SwitchCheckbox);
@@ -456,14 +474,14 @@ var SwitchInput = styled5.input.attrs({
 import { useTextField } from "@react-aria/textfield";
 import { useVisuallyHidden } from "@react-aria/visually-hidden";
 import { useCallback as useCallback3, useEffect as useEffect2, useRef, useState } from "react";
-import * as React6 from "react";
+import * as React7 from "react";
 import styled7, { css as css3 } from "styled-components";
 
 // src/components/FieldLabel/index.tsx
-import * as React5 from "react";
+import * as React6 from "react";
 import styled6 from "styled-components";
-import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
-var FieldLabel = React5.forwardRef(function FieldLabel2({
+import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
+var FieldLabel = React6.forwardRef(function FieldLabel2({
   style,
   className,
   label,
@@ -473,9 +491,9 @@ var FieldLabel = React5.forwardRef(function FieldLabel2({
   ...labelProps
 }, ref) {
   return /* @__PURE__ */ jsxs5(FieldLabelWrapper, { style, className, children: [
-    /* @__PURE__ */ jsx9(Label2, { ref, ...labelProps, children: label }),
-    required && /* @__PURE__ */ jsx9(RequiredText, { children: requiredText }),
-    /* @__PURE__ */ jsx9(SubLabelClickable, { children: /* @__PURE__ */ jsx9("span", { children: subLabel }) })
+    /* @__PURE__ */ jsx10(Label2, { ref, ...labelProps, children: label }),
+    required && /* @__PURE__ */ jsx10(RequiredText, { children: requiredText }),
+    /* @__PURE__ */ jsx10(SubLabelClickable, { children: /* @__PURE__ */ jsx10("span", { children: subLabel }) })
   ] });
 });
 var FieldLabel_default = FieldLabel;
@@ -533,11 +551,11 @@ function useFocusWithClick(containerRef, inputRef) {
 
 // src/components/TextField/index.tsx
 import { mergeProps } from "@react-aria/utils";
-import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
-var TextField = React6.forwardRef(function SingleLineTextFieldInner({
+import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
+var TextField = React7.forwardRef(function SingleLineTextFieldInner({
   onChange,
   ...props
-}, forwardRef18) {
+}, forwardRef19) {
   const {
     className,
     showLabel = false,
@@ -548,6 +566,7 @@ var TextField = React6.forwardRef(function SingleLineTextFieldInner({
     disabled = false,
     required,
     invalid = false,
+    readOnly = false,
     assistiveText,
     maxLength,
     prefix = null,
@@ -582,6 +601,7 @@ var TextField = React6.forwardRef(function SingleLineTextFieldInner({
     inputElementType: "input",
     isDisabled: disabled,
     isRequired: required,
+    isReadOnly: readOnly,
     validationState: invalid ? "invalid" : "valid",
     description: !invalid && assistiveText,
     errorMessage: invalid && assistiveText,
@@ -592,16 +612,16 @@ var TextField = React6.forwardRef(function SingleLineTextFieldInner({
   useFocusWithClick(containerRef, ariaRef);
   const inputProps = mergeProps(restProps, ariaInputProps);
   return /* @__PURE__ */ jsxs6(TextFieldRoot, { className, isDisabled: disabled, children: [
-    /* @__PURE__ */ jsx10(TextFieldLabel, { label, requiredText, required, subLabel, ...labelProps, ...!showLabel ? visuallyHiddenProps : {} }),
+    /* @__PURE__ */ jsx11(TextFieldLabel, { label, requiredText, required, subLabel, ...labelProps, ...!showLabel ? visuallyHiddenProps : {} }),
     /* @__PURE__ */ jsxs6(StyledInputContainer, { ref: containerRef, invalid, "aria-disabled": disabled === true ? true : void 0, hasPrefix: prefix != null, hasSuffix: suffix != null || showCount, children: [
-      prefix && /* @__PURE__ */ jsx10(PrefixContainer, { children: prefix }),
-      /* @__PURE__ */ jsx10(StyledInput, { ref: mergeRefs(forwardRef18, ariaRef), invalid, ...inputProps }),
+      prefix && /* @__PURE__ */ jsx11(PrefixContainer, { children: prefix }),
+      /* @__PURE__ */ jsx11(StyledInput, { ref: mergeRefs(forwardRef19, ariaRef), invalid, ...inputProps }),
       (suffix || showCount) && /* @__PURE__ */ jsxs6(SuffixContainer, { children: [
         suffix,
-        showCount && /* @__PURE__ */ jsx10(SingleLineCounter, { children: maxLength !== void 0 ? `${count}/${maxLength}` : count })
+        showCount && /* @__PURE__ */ jsx11(SingleLineCounter, { children: maxLength !== void 0 ? `${count}/${maxLength}` : count })
       ] })
     ] }),
-    assistiveText != null && assistiveText.length !== 0 && /* @__PURE__ */ jsx10(AssistiveText, { invalid, ...invalid ? errorMessageProps : descriptionProps, children: assistiveText })
+    assistiveText != null && assistiveText.length !== 0 && /* @__PURE__ */ jsx11(AssistiveText, { invalid, ...invalid ? errorMessageProps : descriptionProps, children: assistiveText })
   ] });
 });
 var TextField_default = TextField;
@@ -635,14 +655,14 @@ var AssistiveText = styled7.p.withConfig({
 // src/components/TextArea/index.tsx
 import { useTextField as useTextField2 } from "@react-aria/textfield";
 import { useVisuallyHidden as useVisuallyHidden2 } from "@react-aria/visually-hidden";
-import { forwardRef as forwardRef10, useCallback as useCallback4, useEffect as useEffect3, useRef as useRef2, useState as useState2 } from "react";
+import { forwardRef as forwardRef11, useCallback as useCallback4, useEffect as useEffect3, useRef as useRef2, useState as useState2 } from "react";
 import styled8, { css as css4 } from "styled-components";
 import { mergeProps as mergeProps2 } from "@react-aria/utils";
-import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
-var TextArea = forwardRef10(function TextAreaInner({
+import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
+var TextArea = forwardRef11(function TextAreaInner({
   onChange,
   ...props
-}, forwardRef18) {
+}, forwardRef19) {
   const {
     className,
     showCount = false,
@@ -653,6 +673,7 @@ var TextArea = forwardRef10(function TextAreaInner({
     disabled = false,
     required,
     invalid = false,
+    readOnly = false,
     assistiveText,
     maxLength,
     autoHeight = false,
@@ -697,6 +718,7 @@ var TextArea = forwardRef10(function TextAreaInner({
     inputElementType: "textarea",
     isDisabled: disabled,
     isRequired: required,
+    isReadOnly: readOnly,
     validationState: invalid ? "invalid" : "valid",
     description: !invalid && assistiveText,
     errorMessage: invalid && assistiveText,
@@ -712,12 +734,12 @@ var TextArea = forwardRef10(function TextAreaInner({
   useFocusWithClick(containerRef, ariaRef);
   const inputProps = mergeProps2(restProps, ariaInputProps);
   return /* @__PURE__ */ jsxs7(TextFieldRoot2, { className, isDisabled: disabled, children: [
-    /* @__PURE__ */ jsx11(TextFieldLabel, { label, requiredText, required, subLabel, ...labelProps, ...!showLabel ? visuallyHiddenProps : {} }),
+    /* @__PURE__ */ jsx12(TextFieldLabel, { label, requiredText, required, subLabel, ...labelProps, ...!showLabel ? visuallyHiddenProps : {} }),
     /* @__PURE__ */ jsxs7(StyledTextareaContainer, { ref: containerRef, invalid, rows: showCount ? rows + 1 : rows, "aria-disabled": disabled === true ? "true" : void 0, children: [
-      /* @__PURE__ */ jsx11(StyledTextarea, { ref: mergeRefs(textareaRef, forwardRef18, ariaRef), rows, noBottomPadding: showCount, ...inputProps }),
-      showCount && /* @__PURE__ */ jsx11(MultiLineCounter, { children: maxLength !== void 0 ? `${count}/${maxLength}` : count })
+      /* @__PURE__ */ jsx12(StyledTextarea, { ref: mergeRefs(textareaRef, forwardRef19, ariaRef), rows, noBottomPadding: showCount, ...inputProps }),
+      showCount && /* @__PURE__ */ jsx12(MultiLineCounter, { children: maxLength !== void 0 ? `${count}/${maxLength}` : count })
     ] }),
-    assistiveText != null && assistiveText.length !== 0 && /* @__PURE__ */ jsx11(AssistiveText, { invalid, ...invalid ? errorMessageProps : descriptionProps, children: assistiveText })
+    assistiveText != null && assistiveText.length !== 0 && /* @__PURE__ */ jsx12(AssistiveText, { invalid, ...invalid ? errorMessageProps : descriptionProps, children: assistiveText })
   ] });
 });
 var TextArea_default = TextArea;
@@ -741,21 +763,6 @@ var MultiLineCounter = styled8.span.withConfig({
   componentId: "ccl__sc-58waht-3"
 })(["position:absolute;bottom:9px;right:8px;line-height:22px;font-size:14px;color:var(--charcoal-text3);"]);
 
-// src/components/Icon/index.tsx
-import * as React7 from "react";
-import "@charcoal-ui/icons";
-import { jsx as jsx12 } from "react/jsx-runtime";
-var Icon = React7.forwardRef(function IconInner({
-  name,
-  scale,
-  unsafeNonGuidelineScale,
-  className,
-  ...rest
-}, ref) {
-  return /* @__PURE__ */ jsx12("pixiv-icon", { ref, name, scale, "unsafe-non-guideline-scale": unsafeNonGuidelineScale, class: className, ...rest });
-});
-var Icon_default = Icon;
-
 // src/components/Modal/index.tsx
 import { useContext as useContext4, forwardRef as forwardRef13, memo as memo4 } from "react";
 import * as React11 from "react";
@@ -770,15 +777,7 @@ import { useObjectRef as useObjectRef2 } from "@react-aria/utils";
 import { forwardRef as forwardRef12 } from "react";
 import styled9, { css as css5 } from "styled-components";
 import { useDialog } from "@react-aria/dialog";
-
-// ../foundation/src/grid.ts
-var COLUMN_UNIT = 80;
-var GUTTER_UNIT = 24;
-function columnSystem(span, column, gutter) {
-  return span * column + (span - 1) * gutter;
-}
-
-// src/components/Modal/Dialog/index.tsx
+import { columnSystem, COLUMN_UNIT, GUTTER_UNIT } from "@charcoal-ui/foundation";
 import { maxWidth } from "@charcoal-ui/utils";
 import { animated } from "react-spring";
 
@@ -800,8 +799,8 @@ function useForwardedRef(ref) {
 
 // src/components/Modal/Dialog/index.tsx
 import { jsx as jsx13 } from "react/jsx-runtime";
-var Dialog = forwardRef12(function Dialog2(props, forwardRef18) {
-  const ref = useForwardedRef(forwardRef18);
+var Dialog = forwardRef12(function Dialog2(props, forwardRef19) {
+  const ref = useForwardedRef(forwardRef19);
   const {
     dialogProps
   } = useDialog({
@@ -836,7 +835,26 @@ var ModalBackgroundContext = React9.createContext(null);
 
 // src/components/Modal/useCustomModalOverlay.tsx
 import * as React10 from "react";
-import { ariaHideOutside, useOverlay, useOverlayFocusContain, usePreventScroll } from "@react-aria/overlays";
+import { ariaHideOutside, useOverlay, useOverlayFocusContain } from "@react-aria/overlays";
+
+// src/components/DropdownSelector/Popover/usePreventScroll.tsx
+import { useEffect as useEffect5 } from "react";
+function usePreventScroll(element, isOpen) {
+  useEffect5(() => {
+    if (isOpen && element) {
+      const defaultPaddingRight = element.style.paddingRight;
+      const defaultOverflow = element.style.overflow;
+      element.style.paddingRight = `${window.innerWidth - element.clientWidth}px`;
+      element.style.overflow = "hidden";
+      return () => {
+        element.style.paddingRight = defaultPaddingRight;
+        element.style.overflow = defaultOverflow;
+      };
+    }
+  }, [element, isOpen]);
+}
+
+// src/components/Modal/useCustomModalOverlay.tsx
 function useCharcoalModalOverlay(props, state, ref) {
   const {
     overlayProps,
@@ -847,9 +865,7 @@ function useCharcoalModalOverlay(props, state, ref) {
     onClose: state.onClose,
     shouldCloseOnInteractOutside: () => false
   }, ref);
-  usePreventScroll({
-    isDisabled: !state.isOpen
-  });
+  usePreventScroll(typeof document !== "undefined" ? document.body : null, state.isOpen);
   useOverlayFocusContain();
   React10.useEffect(() => {
     if (state.isOpen && ref.current) {
@@ -1046,7 +1062,7 @@ var LoadingSpinnerIcon = forwardRef14(function LoadingSpinnerIcon2({
 });
 
 // src/components/DropdownSelector/index.tsx
-import { useState as useState3, useRef as useRef9, useMemo as useMemo5 } from "react";
+import { useState as useState3, useRef as useRef9, useMemo as useMemo5, useCallback as useCallback6 } from "react";
 import styled15, { css as css8 } from "styled-components";
 import { disabledSelector as disabledSelector2 } from "@charcoal-ui/utils";
 
@@ -1057,25 +1073,6 @@ import { useEffect as useEffect7, useRef as useRef7 } from "react";
 import { useContext as useContext6, useRef as useRef6 } from "react";
 import { DismissButton, Overlay as Overlay2, usePopover } from "@react-aria/overlays";
 import styled13 from "styled-components";
-
-// src/components/DropdownSelector/Popover/usePreventScroll.tsx
-import { useEffect as useEffect6 } from "react";
-function usePreventScroll2(element, isOpen) {
-  useEffect6(() => {
-    if (isOpen && element) {
-      const defaultPaddingRight = element.style.paddingRight;
-      const defaultOverflow = element.style.overflow;
-      element.style.paddingRight = `${window.innerWidth - element.clientWidth}px`;
-      element.style.overflow = "hidden";
-      return () => {
-        element.style.paddingRight = defaultPaddingRight;
-        element.style.overflow = defaultOverflow;
-      };
-    }
-  }, [element, isOpen]);
-}
-
-// src/components/DropdownSelector/Popover/index.tsx
 import { jsx as jsx17, jsxs as jsxs9 } from "react/jsx-runtime";
 var _empty = () => null;
 function Popover(props) {
@@ -1096,7 +1093,7 @@ function Popover(props) {
     toggle: _empty
   });
   const modalBackground = useContext6(ModalBackgroundContext);
-  usePreventScroll2(modalBackground, props.isOpen);
+  usePreventScroll(modalBackground, props.isOpen);
   if (!props.isOpen)
     return null;
   return /* @__PURE__ */ jsxs9(Overlay2, { portalContainer: document.body, children: [
@@ -1224,7 +1221,10 @@ import { focusVisibleFocusRingCss as focusVisibleFocusRingCss5 } from "@charcoal
 import { useVisuallyHidden as useVisuallyHidden3 } from "@react-aria/visually-hidden";
 import { jsx as jsx20, jsxs as jsxs10 } from "react/jsx-runtime";
 var defaultRequiredText = "*\u5FC5\u9808";
-function DropdownSelector(props) {
+function DropdownSelector({
+  onChange,
+  ...props
+}) {
   const triggerRef = useRef9(null);
   const [isOpen, setIsOpen] = useState3(false);
   const preview = findPreviewRecursive(props.children, props.value);
@@ -1233,9 +1233,12 @@ function DropdownSelector(props) {
   const {
     visuallyHiddenProps
   } = useVisuallyHidden3();
+  const handleChange = useCallback6((e) => {
+    onChange(e.target.value);
+  }, [onChange]);
   return /* @__PURE__ */ jsxs10(DropdownSelectorRoot, { "aria-disabled": props.disabled, children: [
     props.showLabel === true && /* @__PURE__ */ jsx20(DropdownFieldLabel, { label: props.label, required: props.required, requiredText: props.requiredText ?? defaultRequiredText, subLabel: props.subLabel }),
-    /* @__PURE__ */ jsx20("div", { ...visuallyHiddenProps, "aria-hidden": "true", children: /* @__PURE__ */ jsx20("select", { name: props.name, value: props.value, tabIndex: -1, children: propsArray.map((itemProps) => {
+    /* @__PURE__ */ jsx20("div", { ...visuallyHiddenProps, "aria-hidden": "true", children: /* @__PURE__ */ jsx20("select", { name: props.name, value: props.value, onChange: handleChange, tabIndex: -1, children: propsArray.map((itemProps) => {
       return /* @__PURE__ */ jsx20("option", { value: itemProps.value, disabled: itemProps.disabled, children: itemProps.value }, itemProps.value);
     }) }) }),
     /* @__PURE__ */ jsxs10(DropdownButton, { invalid: props.invalid, disabled: props.disabled, onClick: () => {
@@ -1247,7 +1250,7 @@ function DropdownSelector(props) {
       /* @__PURE__ */ jsx20(DropdownButtonIcon, { name: "16/Menu" })
     ] }),
     isOpen && /* @__PURE__ */ jsx20(DropdownPopover, { isOpen, onClose: () => setIsOpen(false), triggerRef, value: props.value, children: /* @__PURE__ */ jsx20(MenuList, { value: props.value, onChange: (v) => {
-      props.onChange(v);
+      onChange(v);
       setIsOpen(false);
     }, children: props.children }) }),
     props.assistiveText !== void 0 && /* @__PURE__ */ jsx20(AssertiveText, { invalid: props.invalid, children: props.assistiveText })
@@ -1299,7 +1302,7 @@ var ItemDiv = styled16.div.withConfig({
 })(["display:flex;align-items:center;min-height:40px;cursor:pointer;outline:none;padding-right:16px;padding-left:16px;transition:background-color 0.2s;&:disabled,&[aria-disabled]:not([aria-disabled='false']){opacity:0.32;cursor:default;}:hover,:focus,:focus-within{&:not(disabled):not([aria-disabled='true']){background-color:var(--charcoal-surface3);}}"]);
 
 // src/components/DropdownSelector/MenuItem/internals/useMenuItemHandleKeyDown.tsx
-import { useCallback as useCallback6, useContext as useContext7 } from "react";
+import { useCallback as useCallback7, useContext as useContext7 } from "react";
 
 // src/components/DropdownSelector/MenuItem/internals/handleFocusByKeyBoard.tsx
 function handleFocusByKeyBoard(element, parent) {
@@ -1337,11 +1340,11 @@ function useMenuItemHandleKeyDown(value) {
     root,
     propsArray
   } = useContext7(MenuListContext);
-  const setContextValue = useCallback6(() => {
+  const setContextValue = useCallback7(() => {
     if (value !== void 0)
       setValue(value);
   }, [value, setValue]);
-  const handleKeyDown = useCallback6((e) => {
+  const handleKeyDown = useCallback7((e) => {
     if (e.key === "Enter") {
       setContextValue();
     } else if (e.key === "ArrowUp" || e.key === "ArrowDown") {
@@ -1434,232 +1437,7 @@ var StyledLi2 = styled18.li.withConfig({
 
 // src/components/SegmentedControl/index.tsx
 import { forwardRef as forwardRef15, memo as memo6, useMemo as useMemo6, useRef as useRef10 } from "react";
-
-// ../../node_modules/@react-stately/form/dist/import.mjs
-import { createContext as $jcIOw$createContext, useMemo as $jcIOw$useMemo, useContext as $jcIOw$useContext, useState as $jcIOw$useState, useRef as $jcIOw$useRef, useEffect as $jcIOw$useEffect } from "react";
-var $e5be200c675c3b3a$export$aca958c65c314e6c = {
-  badInput: false,
-  customError: false,
-  patternMismatch: false,
-  rangeOverflow: false,
-  rangeUnderflow: false,
-  stepMismatch: false,
-  tooLong: false,
-  tooShort: false,
-  typeMismatch: false,
-  valueMissing: false,
-  valid: true
-};
-var $e5be200c675c3b3a$var$CUSTOM_VALIDITY_STATE = {
-  ...$e5be200c675c3b3a$export$aca958c65c314e6c,
-  customError: true,
-  valid: false
-};
-var $e5be200c675c3b3a$export$dad6ae84456c676a = {
-  isInvalid: false,
-  validationDetails: $e5be200c675c3b3a$export$aca958c65c314e6c,
-  validationErrors: []
-};
-var $e5be200c675c3b3a$export$571b5131b7e65c11 = (0, $jcIOw$createContext)({});
-var $e5be200c675c3b3a$export$a763b9476acd3eb = "__formValidationState" + Date.now();
-function $e5be200c675c3b3a$export$fc1a364ae1f3ff10(props) {
-  if (props[$e5be200c675c3b3a$export$a763b9476acd3eb]) {
-    let {
-      realtimeValidation,
-      displayValidation,
-      updateValidation,
-      resetValidation,
-      commitValidation
-    } = props[$e5be200c675c3b3a$export$a763b9476acd3eb];
-    return {
-      realtimeValidation,
-      displayValidation,
-      updateValidation,
-      resetValidation,
-      commitValidation
-    };
-  }
-  return $e5be200c675c3b3a$var$useFormValidationStateImpl(props);
-}
-function $e5be200c675c3b3a$var$useFormValidationStateImpl(props) {
-  let {
-    isInvalid,
-    validationState,
-    name,
-    value,
-    builtinValidation,
-    validate,
-    validationBehavior = "aria"
-  } = props;
-  if (validationState)
-    isInvalid || (isInvalid = validationState === "invalid");
-  let controlledError = isInvalid ? {
-    isInvalid: true,
-    validationErrors: [],
-    validationDetails: $e5be200c675c3b3a$var$CUSTOM_VALIDITY_STATE
-  } : null;
-  let clientError = (0, $jcIOw$useMemo)(() => $e5be200c675c3b3a$var$getValidationResult($e5be200c675c3b3a$var$runValidate(validate, value)), [validate, value]);
-  if (builtinValidation === null || builtinValidation === void 0 ? void 0 : builtinValidation.validationDetails.valid)
-    builtinValidation = null;
-  let serverErrors = (0, $jcIOw$useContext)($e5be200c675c3b3a$export$571b5131b7e65c11);
-  let serverErrorMessages = (0, $jcIOw$useMemo)(() => {
-    if (name)
-      return Array.isArray(name) ? name.flatMap((name2) => $e5be200c675c3b3a$var$asArray(serverErrors[name2])) : $e5be200c675c3b3a$var$asArray(serverErrors[name]);
-    return [];
-  }, [serverErrors, name]);
-  let [lastServerErrors, setLastServerErrors] = (0, $jcIOw$useState)(serverErrors);
-  let [isServerErrorCleared, setServerErrorCleared] = (0, $jcIOw$useState)(false);
-  if (serverErrors !== lastServerErrors) {
-    setLastServerErrors(serverErrors);
-    setServerErrorCleared(false);
-  }
-  let serverError = (0, $jcIOw$useMemo)(() => $e5be200c675c3b3a$var$getValidationResult(isServerErrorCleared ? [] : serverErrorMessages), [isServerErrorCleared, serverErrorMessages]);
-  let nextValidation = (0, $jcIOw$useRef)($e5be200c675c3b3a$export$dad6ae84456c676a);
-  let [currentValidity, setCurrentValidity] = (0, $jcIOw$useState)($e5be200c675c3b3a$export$dad6ae84456c676a);
-  let lastError = (0, $jcIOw$useRef)($e5be200c675c3b3a$export$dad6ae84456c676a);
-  let commitValidation = () => {
-    if (!commitQueued)
-      return;
-    setCommitQueued(false);
-    let error = clientError || builtinValidation || nextValidation.current;
-    if (!$e5be200c675c3b3a$var$isEqualValidation(error, lastError.current)) {
-      lastError.current = error;
-      setCurrentValidity(error);
-    }
-  };
-  let [commitQueued, setCommitQueued] = (0, $jcIOw$useState)(false);
-  (0, $jcIOw$useEffect)(commitValidation);
-  let realtimeValidation = controlledError || serverError || clientError || builtinValidation || $e5be200c675c3b3a$export$dad6ae84456c676a;
-  let displayValidation = validationBehavior === "native" ? controlledError || serverError || currentValidity : controlledError || serverError || clientError || builtinValidation || currentValidity;
-  return {
-    realtimeValidation,
-    displayValidation,
-    updateValidation(value2) {
-      if (validationBehavior === "aria" && !$e5be200c675c3b3a$var$isEqualValidation(currentValidity, value2))
-        setCurrentValidity(value2);
-      else
-        nextValidation.current = value2;
-    },
-    resetValidation() {
-      let error = $e5be200c675c3b3a$export$dad6ae84456c676a;
-      if (!$e5be200c675c3b3a$var$isEqualValidation(error, lastError.current)) {
-        lastError.current = error;
-        setCurrentValidity(error);
-      }
-      if (validationBehavior === "native")
-        setCommitQueued(false);
-      setServerErrorCleared(true);
-    },
-    commitValidation() {
-      if (validationBehavior === "native")
-        setCommitQueued(true);
-      setServerErrorCleared(true);
-    }
-  };
-}
-function $e5be200c675c3b3a$var$asArray(v) {
-  if (!v)
-    return [];
-  return Array.isArray(v) ? v : [v];
-}
-function $e5be200c675c3b3a$var$runValidate(validate, value) {
-  if (typeof validate === "function") {
-    let e = validate(value);
-    if (e && typeof e !== "boolean")
-      return $e5be200c675c3b3a$var$asArray(e);
-  }
-  return [];
-}
-function $e5be200c675c3b3a$var$getValidationResult(errors) {
-  return errors.length ? {
-    isInvalid: true,
-    validationErrors: errors,
-    validationDetails: $e5be200c675c3b3a$var$CUSTOM_VALIDITY_STATE
-  } : null;
-}
-function $e5be200c675c3b3a$var$isEqualValidation(a, b) {
-  if (a === b)
-    return true;
-  return a && b && a.isInvalid === b.isInvalid && a.validationErrors.length === b.validationErrors.length && a.validationErrors.every((a2, i) => a2 === b.validationErrors[i]) && Object.entries(a.validationDetails).every(([k, v]) => b.validationDetails[k] === v);
-}
-
-// ../../node_modules/@react-stately/utils/dist/import.mjs
-import { useState as $6imuh$useState, useRef as $6imuh$useRef, useEffect as $6imuh$useEffect, useCallback as $6imuh$useCallback } from "react";
-function $458b0a5536c1a7cf$export$40bfa8c7b0832715(value, defaultValue, onChange) {
-  let [stateValue, setStateValue] = (0, $6imuh$useState)(value || defaultValue);
-  let isControlledRef = (0, $6imuh$useRef)(value !== void 0);
-  let isControlled = value !== void 0;
-  (0, $6imuh$useEffect)(() => {
-    let wasControlled = isControlledRef.current;
-    if (wasControlled !== isControlled)
-      console.warn(`WARN: A component changed from ${wasControlled ? "controlled" : "uncontrolled"} to ${isControlled ? "controlled" : "uncontrolled"}.`);
-    isControlledRef.current = isControlled;
-  }, [isControlled]);
-  let currentValue = isControlled ? value : stateValue;
-  let setValue = (0, $6imuh$useCallback)((value2, ...args) => {
-    let onChangeCaller = (value3, ...onChangeArgs) => {
-      if (onChange) {
-        if (!Object.is(currentValue, value3))
-          onChange(value3, ...onChangeArgs);
-      }
-      if (!isControlled)
-        currentValue = value3;
-    };
-    if (typeof value2 === "function") {
-      console.warn("We can not support a function callback. See Github Issues for details https://github.com/adobe/react-spectrum/issues/2320");
-      let updateFunction = (oldValue, ...functionArgs) => {
-        let interceptedValue = value2(isControlled ? currentValue : oldValue, ...functionArgs);
-        onChangeCaller(interceptedValue, ...args);
-        if (!isControlled)
-          return interceptedValue;
-        return oldValue;
-      };
-      setStateValue(updateFunction);
-    } else {
-      if (!isControlled)
-        setStateValue(value2);
-      onChangeCaller(value2, ...args);
-    }
-  }, [isControlled, currentValue, onChange]);
-  return [currentValue, setValue];
-}
-
-// ../../node_modules/@react-stately/radio/dist/import.mjs
-import { useMemo as $fQ2SF$useMemo, useState as $fQ2SF$useState } from "react";
-var $a54cdc5c1942b639$var$instance = Math.round(Math.random() * 1e10);
-var $a54cdc5c1942b639$var$i = 0;
-function $a54cdc5c1942b639$export$bca9d026f8e704eb(props) {
-  let name = (0, $fQ2SF$useMemo)(() => props.name || `radio-group-${$a54cdc5c1942b639$var$instance}-${++$a54cdc5c1942b639$var$i}`, [props.name]);
-  var _props_defaultValue;
-  let [selectedValue, setSelected] = (0, $458b0a5536c1a7cf$export$40bfa8c7b0832715)(props.value, (_props_defaultValue = props.defaultValue) !== null && _props_defaultValue !== void 0 ? _props_defaultValue : null, props.onChange);
-  let [lastFocusedValue, setLastFocusedValue] = (0, $fQ2SF$useState)(null);
-  let validation = (0, $e5be200c675c3b3a$export$fc1a364ae1f3ff10)({
-    ...props,
-    value: selectedValue
-  });
-  let setSelectedValue = (value) => {
-    if (!props.isReadOnly && !props.isDisabled) {
-      setSelected(value);
-      validation.commitValidation();
-    }
-  };
-  let isInvalid = validation.displayValidation.isInvalid;
-  return {
-    ...validation,
-    name,
-    selectedValue,
-    setSelectedValue,
-    lastFocusedValue,
-    setLastFocusedValue,
-    isDisabled: props.isDisabled || false,
-    isReadOnly: props.isReadOnly || false,
-    isRequired: props.isRequired || false,
-    validationState: props.validationState || (isInvalid ? "invalid" : null),
-    isInvalid
-  };
-}
-
-// src/components/SegmentedControl/index.tsx
+import { useRadioGroupState } from "@react-stately/radio";
 import { useRadio, useRadioGroup } from "@react-aria/radio";
 import styled19, { css as css9 } from "styled-components";
 
@@ -1690,7 +1468,7 @@ var SegmentedControl = forwardRef15(function SegmentedControlInner(props, ref) {
     isRequired: props.required,
     "aria-label": props.name
   }), [props]);
-  const state = $a54cdc5c1942b639$export$bca9d026f8e704eb(ariaRadioGroupProps);
+  const state = useRadioGroupState(ariaRadioGroupProps);
   const {
     radioGroupProps
   } = useRadioGroup(ariaRadioGroupProps, state);
@@ -1740,73 +1518,65 @@ var SegmentedLabelInner = styled19.div.withConfig({
 })(["font-size:14px;line-height:22px;display:flow-root;&::before{display:block;width:0;height:0;content:'';margin-top:-4px;}&::after{display:block;width:0;height:0;content:'';margin-bottom:-4px;}"]);
 
 // src/components/Checkbox/index.tsx
-import { forwardRef as forwardRef16, memo as memo7, useMemo as useMemo7 } from "react";
-import styled20, { css as css10 } from "styled-components";
-import { useCheckbox } from "@react-aria/checkbox";
-import { useObjectRef as useObjectRef3 } from "@react-aria/utils";
-import { useToggleState as useToggleState2 } from "react-stately";
-import { focusVisibleFocusRingCss as focusVisibleFocusRingCss6 } from "@charcoal-ui/styled";
+import { forwardRef as forwardRef17, memo as memo8 } from "react";
+import { useId } from "@react-aria/utils";
+
+// src/components/CheckboxInput/index.tsx
+import { forwardRef as forwardRef16, memo as memo7, useCallback as useCallback8 } from "react";
 import { jsx as jsx27, jsxs as jsxs14 } from "react/jsx-runtime";
-var Checkbox = forwardRef16(function CheckboxInner({
-  invalid = false,
+var CheckboxInput = forwardRef16(function CheckboxInput2({
+  onChange,
+  checked,
+  invalid,
   ...props
 }, ref) {
-  const ariaCheckboxProps = useMemo7(() => ({
-    ...props,
-    isInValid: invalid,
-    isSelected: props.checked,
-    defaultSelected: props.defaultChecked,
-    validationState: invalid ? "invalid" : "valid",
-    "aria-label": "children" in props ? void 0 : props.label,
-    isDisabled: props.disabled
-  }), [invalid, props]);
-  const state = useToggleState2(ariaCheckboxProps);
-  const objectRef = useObjectRef3(ref);
-  const {
-    inputProps
-  } = useCheckbox(ariaCheckboxProps, state, objectRef);
-  const isDisabled = (props.disabled ?? false) || (props.readonly ?? false);
-  return /* @__PURE__ */ jsxs14(InputRoot, { "aria-disabled": isDisabled, className: props.className, children: [
-    /* @__PURE__ */ jsxs14(CheckboxRoot, { children: [
-      /* @__PURE__ */ jsx27(CheckboxInput, { type: "checkbox", ...inputProps, readOnly: props.readonly }),
-      /* @__PURE__ */ jsx27(CheckboxInputOverlay, { "aria-hidden": true, checked: inputProps.checked, children: /* @__PURE__ */ jsx27(Icon_default, { name: "24/Check", unsafeNonGuidelineScale: 2 / 3 }) })
-    ] }),
-    "children" in props && /* @__PURE__ */ jsx27(InputLabel, { children: props.children })
+  const handleChange = useCallback8((e) => {
+    const el = e.currentTarget;
+    onChange?.(el.checked);
+  }, [onChange]);
+  const classNames = useClassNames("charcoal-checkbox-input__root", props.className);
+  return /* @__PURE__ */ jsxs14("div", { className: classNames, children: [
+    /* @__PURE__ */ jsx27("input", { ref, className: "charcoal-checkbox-input__input", type: "checkbox", onChange: handleChange, "aria-invalid": invalid, checked, ...props }),
+    /* @__PURE__ */ jsx27("div", { className: "charcoal-checkbox-input__overlay", "aria-hidden": true, "data-checked": checked, children: /* @__PURE__ */ jsx27(Icon_default, { name: "24/Check", unsafeNonGuidelineScale: 2 / 3 }) })
+  ] });
+});
+var CheckboxInput_default = memo7(CheckboxInput);
+
+// src/components/Checkbox/index.tsx
+import { jsx as jsx28, jsxs as jsxs15 } from "react/jsx-runtime";
+var Checkbox = forwardRef17(function CheckboxInner({
+  disabled,
+  className,
+  id,
+  children,
+  ...props
+}, ref) {
+  const classNames = useClassNames("charcoal-checkbox__label", className);
+  const htmlId = useId(id);
+  const input = /* @__PURE__ */ jsx28(CheckboxInput_default, { ...props, id: htmlId, disabled, ref });
+  if (children === void 0) {
+    return input;
+  }
+  return /* @__PURE__ */ jsxs15("label", { htmlFor: htmlId, "aria-disabled": disabled, className: classNames, children: [
+    input,
+    /* @__PURE__ */ jsx28("div", { className: "charcoal-checkbox__text", children })
   ] });
 });
-var Checkbox_default = memo7(Checkbox);
-var hiddenCss = css10(["visibility:hidden;"]);
-var InputRoot = styled20.label.withConfig({
-  componentId: "ccl__sc-wrdmwj-0"
-})(["position:relative;display:flex;cursor:pointer;gap:4px;&:disabled,&[aria-disabled]:not([aria-disabled='false']){cursor:default;opacity:0.32;}"]);
-var CheckboxRoot = styled20.div.withConfig({
-  componentId: "ccl__sc-wrdmwj-1"
-})(["position:relative;"]);
-var CheckboxInput = styled20.input.withConfig({
-  componentId: "ccl__sc-wrdmwj-2"
-})(["&[type='checkbox']{appearance:none;display:block;cursor:pointer;margin:0;width:20px;height:20px;border-radius:4px;transition:0.2s box-shadow,0.2s background-color;&:disabled{cursor:default;}&:read-only{cursor:default;}&:checked{background-color:var(--charcoal-brand);&:not(:disabled):not([aria-disabled]),&[aria-disabled='false']{&:hover{background-color:var(--charcoal-brand-hover);}&:active{background-color:var(--charcoal-brand-press);}}}&:not(:disabled):not([aria-disabled]),&[aria-disabled='false']{", " &[aria-invalid='true']{box-shadow:0 0 0 4px rgba(255,43,0,0.32);}}&:not(:checked){border-width:2px;border-style:solid;border-color:var(--charcoal-text4);}}"], focusVisibleFocusRingCss6);
-var CheckboxInputOverlay = styled20.div.withConfig({
-  componentId: "ccl__sc-wrdmwj-3"
-})(["position:absolute;top:-2px;left:-2px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:24px;height:24px;color:var(--charcoal-text5);", ";"], ({
-  checked
-}) => checked !== true && hiddenCss);
-var InputLabel = styled20.div.withConfig({
-  componentId: "ccl__sc-wrdmwj-4"
-})(["color:var(--charcoal-text2);font-size:14px;line-height:20px;"]);
+var Checkbox_default = memo8(Checkbox);
 
 // src/components/TagItem/index.tsx
-import { forwardRef as forwardRef17, memo as memo8, useMemo as useMemo8 } from "react";
-import { useObjectRef as useObjectRef4 } from "@react-aria/utils";
-import styled21, { css as css11 } from "styled-components";
+import { forwardRef as forwardRef18, memo as memo9, useMemo as useMemo7 } from "react";
+import { useObjectRef as useObjectRef3 } from "@react-aria/utils";
+import styled20, { css as css10 } from "styled-components";
 import { px as px2 } from "@charcoal-ui/utils";
 import { useButton } from "@react-aria/button";
-import { focusVisibleFocusRingCss as focusVisibleFocusRingCss7 } from "@charcoal-ui/styled";
-import { jsx as jsx28, jsxs as jsxs15 } from "react/jsx-runtime";
+import { focusVisibleFocusRingCss as focusVisibleFocusRingCss6 } from "@charcoal-ui/styled";
+import { jsx as jsx29, jsxs as jsxs16 } from "react/jsx-runtime";
 var sizeMap = {
   S: 32,
   M: 40
 };
-var TagItem = forwardRef17(function TagItemInner({
+var TagItem = forwardRef18(function TagItemInner({
   label,
   translatedLabel,
   bgColor = "#7ACCB1",
@@ -1817,8 +1587,8 @@ var TagItem = forwardRef17(function TagItemInner({
   className,
   ...props
 }, _ref) {
-  const ref = useObjectRef4(_ref);
-  const ariaButtonProps = useMemo8(() => ({
+  const ref = useObjectRef3(_ref);
+  const ariaButtonProps = useMemo7(() => ({
     elementType: "a",
     isDisabled: disabled,
     ...props
@@ -1827,22 +1597,22 @@ var TagItem = forwardRef17(function TagItemInner({
     buttonProps
   } = useButton(ariaButtonProps, ref);
   const hasTranslatedLabel = translatedLabel !== void 0 && translatedLabel.length > 0;
-  return /* @__PURE__ */ jsxs15(TagItemRoot, { ref, size: hasTranslatedLabel ? "M" : size, status, ...buttonProps, className, children: [
-    /* @__PURE__ */ jsx28(Background, { bgColor, bgImage, status }),
-    /* @__PURE__ */ jsxs15(Inner, { children: [
-      /* @__PURE__ */ jsxs15(LabelWrapper, { isTranslate: hasTranslatedLabel, children: [
-        hasTranslatedLabel && /* @__PURE__ */ jsx28(TranslatedLabel, { children: /* @__PURE__ */ jsx28(Label3, { children: translatedLabel }) }),
-        /* @__PURE__ */ jsx28(Label3, { children: label })
+  return /* @__PURE__ */ jsxs16(TagItemRoot, { ref, size: hasTranslatedLabel ? "M" : size, status, ...buttonProps, className, children: [
+    /* @__PURE__ */ jsx29(Background, { bgColor, bgImage, status }),
+    /* @__PURE__ */ jsxs16(Inner, { children: [
+      /* @__PURE__ */ jsxs16(LabelWrapper, { isTranslate: hasTranslatedLabel, children: [
+        hasTranslatedLabel && /* @__PURE__ */ jsx29(TranslatedLabel, { children: /* @__PURE__ */ jsx29(Label3, { children: translatedLabel }) }),
+        /* @__PURE__ */ jsx29(Label3, { children: label })
       ] }),
-      status === "active" && /* @__PURE__ */ jsx28(Icon_default, { name: "16/Remove" })
+      status === "active" && /* @__PURE__ */ jsx29(Icon_default, { name: "16/Remove" })
     ] })
   ] });
 });
-var TagItem_default = memo8(TagItem);
+var TagItem_default = memo9(TagItem);
 var horizontalPadding = ({
   left,
   right
-}) => css11(["padding-right:", ";padding-left:", ";"], px2(right), px2(left));
+}) => css10(["padding-right:", ";padding-left:", ";"], px2(right), px2(left));
 var tagItemRootSize = (size) => {
   switch (size) {
     case "M":
@@ -1861,7 +1631,7 @@ var activeTagItemRoot = horizontalPadding({
   left: 16,
   right: 8
 });
-var TagItemRoot = styled21.a.withConfig({
+var TagItemRoot = styled20.a.withConfig({
   componentId: "ccl__sc-11j9pu2-0"
 })(["isolation:isolate;position:relative;height:", "px;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;cursor:pointer;overflow:hidden;border-radius:4px;", " ", " color:", ";transition:0.2s box-shadow;&:not(:disabled):not([aria-disabled]),&[aria-disabled='false']{", "}&:disabled,&[aria-disabled]:not([aria-disabled='false']){opacity:0.32;cursor:default;}"], ({
   size
@@ -1872,30 +1642,30 @@ var TagItemRoot = styled21.a.withConfig({
   status
 }) => status === "active" && activeTagItemRoot, ({
   status
-}) => status === "inactive" ? "var(--charcoal-text2)" : "var(--charcoal-text5)", focusVisibleFocusRingCss7);
-var Background = styled21.div.withConfig({
+}) => status === "inactive" ? "var(--charcoal-text2)" : "var(--charcoal-text5)", focusVisibleFocusRingCss6);
+var Background = styled20.div.withConfig({
   componentId: "ccl__sc-11j9pu2-1"
 })(["position:absolute;z-index:1;top:0;left:0;width:100%;height:100%;background-color:", ";", " ", ""], ({
   bgColor
 }) => bgColor, ({
   status
-}) => status === "inactive" && css11(["background-color:var(--charcoal-surface3);"]), ({
+}) => status === "inactive" && css10(["background-color:var(--charcoal-surface3);"]), ({
   bgImage
-}) => bgImage !== void 0 && css11(["background-color:var(--charcoal-surface4);&::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background-position:center;background-size:cover;background-image:url(", ");mix-blend-mode:overlay;}"], bgImage));
-var Inner = styled21.div.withConfig({
+}) => bgImage !== void 0 && css10(["background-color:var(--charcoal-surface4);&::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background-position:center;background-size:cover;background-image:url(", ");mix-blend-mode:overlay;}"], bgImage));
+var Inner = styled20.div.withConfig({
   componentId: "ccl__sc-11j9pu2-2"
 })(["display:inline-flex;gap:8px;align-items:center;z-index:2;"]);
-var labelCSS = css11(["font-size:14px;line-height:22px;font-weight:bold;display:flow-root;&::before{display:block;width:0;height:0;content:'';margin-top:-4px;}&::after{display:block;width:0;height:0;content:'';margin-bottom:-4px;}"]);
-var translateLabelCSS = css11(["display:flex;align-items:center;flex-direction:column;font-size:10px;"]);
-var LabelWrapper = styled21.div.withConfig({
+var labelCSS = css10(["font-size:14px;line-height:22px;font-weight:bold;display:flow-root;&::before{display:block;width:0;height:0;content:'';margin-top:-4px;}&::after{display:block;width:0;height:0;content:'';margin-bottom:-4px;}"]);
+var translateLabelCSS = css10(["display:flex;align-items:center;flex-direction:column;font-size:10px;"]);
+var LabelWrapper = styled20.div.withConfig({
   componentId: "ccl__sc-11j9pu2-3"
 })(["", ""], ({
   isTranslate
 }) => isTranslate ?? false ? translateLabelCSS : labelCSS);
-var Label3 = styled21.span.withConfig({
+var Label3 = styled20.span.withConfig({
   componentId: "ccl__sc-11j9pu2-4"
 })(["max-width:152px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:inherit;color:inherit;line-height:inherit;"]);
-var TranslatedLabel = styled21.div.withConfig({
+var TranslatedLabel = styled20.div.withConfig({
   componentId: "ccl__sc-11j9pu2-5"
 })(["font-size:12px;line-height:20px;font-weight:bold;display:flow-root;&::before{display:block;width:0;height:0;content:'';margin-top:-4px;}&::after{display:block;width:0;height:0;content:'';margin-bottom:-4px;}"]);
 export {