@charcoal-ui/react 3.4.0 → 3.5.0

package/dist/index.cjs.js

@@ -849,7 +849,7 @@ var SwitchInput = import_styled_components8.default.input.attrs({
 // src/components/TextField/index.tsx
 var import_textfield = require("@react-aria/textfield");
 var import_visually_hidden = require("@react-aria/visually-hidden");
-var import_react8 = require("react");
+var import_react9 = require("react");
 var React5 = __toESM(require("react"));
 var import_styled_components10 = __toESM(require("styled-components"));
 
@@ -903,6 +903,25 @@ var FieldLabelWrapper = import_styled_components9.default.div`
   }
 `;
 
+// src/components/TextField/useFocusWithClick.tsx
+var import_react8 = require("react");
+function useFocusWithClick(containerRef, inputRef) {
+  (0, import_react8.useEffect)(() => {
+    const el = containerRef.current;
+    if (el) {
+      const handleDown = (e) => {
+        if (e.target !== inputRef.current) {
+          inputRef.current?.focus();
+        }
+      };
+      el.addEventListener("click", handleDown);
+      return () => {
+        el.removeEventListener("click", handleDown);
+      };
+    }
+  });
+}
+
 // src/components/TextField/index.tsx
 var import_jsx_runtime10 = require("react/jsx-runtime");
 var TextField = React5.forwardRef(
@@ -923,16 +942,12 @@ var TextField = React5.forwardRef(
       suffix = null
     } = props;
     const { visuallyHiddenProps } = (0, import_visually_hidden.useVisuallyHidden)();
-    const ariaRef = (0, import_react8.useRef)(null);
-    const prefixRef = (0, import_react8.useRef)(null);
-    const suffixRef = (0, import_react8.useRef)(null);
-    const [count, setCount] = (0, import_react8.useState)(
+    const ariaRef = (0, import_react9.useRef)(null);
+    const [count, setCount] = (0, import_react9.useState)(
       countCodePointsInString(props.value ?? "")
     );
-    const [prefixWidth, setPrefixWidth] = (0, import_react8.useState)(0);
-    const [suffixWidth, setSuffixWidth] = (0, import_react8.useState)(0);
     const nonControlled = props.value === void 0;
-    const handleChange = (0, import_react8.useCallback)(
+    const handleChange = (0, import_react9.useCallback)(
       (value) => {
         const count2 = countCodePointsInString(value);
         if (maxLength !== void 0 && count2 > maxLength) {
@@ -945,7 +960,7 @@ var TextField = React5.forwardRef(
       },
       [maxLength, nonControlled, onChange]
     );
-    (0, import_react8.useEffect)(() => {
+    (0, import_react9.useEffect)(() => {
       setCount(countCodePointsInString(props.value ?? ""));
     }, [props.value]);
     const { inputProps, labelProps, descriptionProps, errorMessageProps } = (0, import_textfield.useTextField)(
@@ -961,24 +976,8 @@ var TextField = React5.forwardRef(
       },
       ariaRef
     );
-    (0, import_react8.useEffect)(() => {
-      const prefixObserver = new ResizeObserver((entries) => {
-        setPrefixWidth(entries[0].contentRect.width);
-      });
-      const suffixObserver = new ResizeObserver((entries) => {
-        setSuffixWidth(entries[0].contentRect.width);
-      });
-      if (prefixRef.current !== null) {
-        prefixObserver.observe(prefixRef.current);
-      }
-      if (suffixRef.current !== null) {
-        suffixObserver.observe(suffixRef.current);
-      }
-      return () => {
-        suffixObserver.disconnect();
-        prefixObserver.disconnect();
-      };
-    }, []);
+    const containerRef = (0, import_react9.useRef)(null);
+    useFocusWithClick(containerRef, ariaRef);
     return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(TextFieldRoot, { className, isDisabled: disabled, children: [
       /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
         TextFieldLabel,
@@ -991,23 +990,31 @@ var TextField = React5.forwardRef(
           ...!showLabel ? visuallyHiddenProps : {}
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(StyledInputContainer, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(PrefixContainer, { ref: prefixRef, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Affix, { children: prefix }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-          StyledInput,
-          {
-            ref: mergeRefs(forwardRef18, ariaRef),
-            invalid,
-            extraLeftPadding: prefixWidth,
-            extraRightPadding: suffixWidth,
-            ...inputProps
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(SuffixContainer, { ref: suffixRef, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Affix, { children: suffix }),
-          showCount && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SingleLineCounter, { children: maxLength !== void 0 ? `${count}/${maxLength}` : count })
-        ] })
-      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+        StyledInputContainer,
+        {
+          ref: containerRef,
+          invalid,
+          "aria-disabled": disabled === true ? true : void 0,
+          hasPrefix: prefix != null,
+          hasSuffix: suffix != null || showCount,
+          children: [
+            prefix && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(PrefixContainer, { children: prefix }),
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+              StyledInput,
+              {
+                ref: mergeRefs(forwardRef18, ariaRef),
+                invalid,
+                ...inputProps
+              }
+            ),
+            (suffix || showCount) && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(SuffixContainer, { children: [
+              suffix,
+              showCount && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SingleLineCounter, { children: maxLength !== void 0 ? `${count}/${maxLength}` : count })
+            ] })
+          ]
+        }
+      ),
       assistiveText != null && assistiveText.length !== 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
         AssistiveText,
         {
@@ -1027,34 +1034,53 @@ var TextFieldRoot = import_styled_components10.default.div`
   ${(p) => p.isDisabled && { opacity: p.theme.elementEffect.disabled.opacity }}
 `;
 var TextFieldLabel = (0, import_styled_components10.default)(FieldLabel_default)`
-  ${theme((o) => o.margin.bottom(8))}
+  margin-bottom: 8px;
 `;
 var StyledInputContainer = import_styled_components10.default.div`
-  height: 40px;
   display: grid;
-  position: relative;
+  grid-template-columns: ${(p) => [p.hasPrefix && "auto", "1fr", p.hasSuffix && "auto"].filter(Boolean).join(" ")};
+  height: 40px;
+  transition: 0.2s background-color, 0.2s box-shadow;
+  color: var(--charcoal-text2);
+  background-color: var(--charcoal-surface3);
+  border-radius: 4px;
+  gap: 4px;
+  padding: 0 8px;
+  line-height: 22px;
+  font-size: 14px;
+
+  :not(:disabled):not([aria-disabled]):hover,
+  [aria-disabled='false']:hover {
+    background-color: var(--charcoal-surface3-hover);
+  }
+
+  :not(:disabled):not([aria-disabled]):active,
+  [aria-disabled='false']:active {
+    outline: none;
+    box-shadow: 0 0 0 4px
+      ${(p) => p.invalid ? `rgba(255,43,0,0.32)` : `rgba(0, 150, 250, 0.32);`};
+  }
+
+  :focus-within {
+    outline: none;
+    box-shadow: 0 0 0 4px
+      ${(p) => p.invalid ? `rgba(255,43,0,0.32)` : `rgba(0, 150, 250, 0.32);`};
+  }
+
+  ${(p) => p.invalid && import_styled_components10.css`
+      box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
+    `}
 `;
-var PrefixContainer = import_styled_components10.default.span`
-  position: absolute;
-  top: 50%;
-  left: 8px;
-  transform: translateY(-50%);
-  z-index: 1;
+var PrefixContainer = import_styled_components10.default.div`
+  display: flex;
+  padding-left: 8px;
+  align-items: center;
 `;
 var SuffixContainer = import_styled_components10.default.span`
-  position: absolute;
-  top: 50%;
-  right: 8px;
-  transform: translateY(-50%);
-
   display: flex;
+  align-items: center;
   gap: 8px;
 `;
-var Affix = import_styled_components10.default.span`
-  user-select: none;
-
-  ${theme((o) => [o.typography(14).preserveHalfLeading, o.font.text2])}
-`;
 var StyledInput = import_styled_components10.default.input`
   border: none;
   box-sizing: border-box;
@@ -1068,43 +1094,39 @@ var StyledInput = import_styled_components10.default.input`
   height: calc(100% / 0.875);
   font-size: calc(14px / 0.875);
   line-height: calc(22px / 0.875);
-  padding-left: calc((8px + ${(p) => p.extraLeftPadding}px) / 0.875);
-  padding-right: calc((8px + ${(p) => p.extraRightPadding}px) / 0.875);
+  padding-left: 0;
+  padding-right: 0;
   border-radius: calc(4px / 0.875);
 
   /* Display box-shadow for iOS Safari */
   appearance: none;
+  background: transparent;
 
-  ${(p) => theme((o) => [
-  o.bg.surface3.hover,
-  o.outline.default.focus,
-  p.invalid && o.outline.assertive,
-  o.font.text2
-])}
-
+  color: var(--charcoal-text2);
   &::placeholder {
-    ${theme((o) => o.font.text3)}
+    color: var(--charcoal-text3);
   }
 `;
 var SingleLineCounter = import_styled_components10.default.span`
-  ${theme((o) => [o.typography(14).preserveHalfLeading, o.font.text3])}
+  line-height: 22px;
+  font-size: 14px;
+  color: var(--charcoal-text3);
 `;
 var AssistiveText = import_styled_components10.default.p`
-  ${(p) => theme((o) => [
-  o.typography(14),
-  o.margin.top(8),
-  o.margin.bottom(0),
-  o.font[p.invalid ? "assertive" : "text1"]
-])}
+  font-size: 14px;
+  line-height: 22px;
+  margin-top: 4px;
+  margin-bottom: -4px;
+  color: ${(p) => `var(--charcoal-${p.invalid ? `assertive` : `text2`})`};
 `;
 
 // src/components/TextArea/index.tsx
 var import_textfield2 = require("@react-aria/textfield");
 var import_visually_hidden2 = require("@react-aria/visually-hidden");
-var import_react9 = require("react");
+var import_react10 = require("react");
 var import_styled_components11 = __toESM(require("styled-components"));
 var import_jsx_runtime11 = require("react/jsx-runtime");
-var TextArea = (0, import_react9.forwardRef)(
+var TextArea = (0, import_react10.forwardRef)(
   function TextAreaInner({ onChange, ...props }, forwardRef18) {
     const {
       className,
@@ -1122,13 +1144,13 @@ var TextArea = (0, import_react9.forwardRef)(
       rows: initialRows = 4
     } = props;
     const { visuallyHiddenProps } = (0, import_visually_hidden2.useVisuallyHidden)();
-    const textareaRef = (0, import_react9.useRef)(null);
-    const ariaRef = (0, import_react9.useRef)(null);
-    const [count, setCount] = (0, import_react9.useState)(
+    const textareaRef = (0, import_react10.useRef)(null);
+    const ariaRef = (0, import_react10.useRef)(null);
+    const [count, setCount] = (0, import_react10.useState)(
       countCodePointsInString(props.value ?? "")
     );
-    const [rows, setRows] = (0, import_react9.useState)(initialRows);
-    const syncHeight = (0, import_react9.useCallback)(
+    const [rows, setRows] = (0, import_react10.useState)(initialRows);
+    const syncHeight = (0, import_react10.useCallback)(
       (textarea) => {
         const rows2 = (`${textarea.value}
 `.match(/\n/gu)?.length ?? 0) || 1;
@@ -1137,7 +1159,7 @@ var TextArea = (0, import_react9.forwardRef)(
       [initialRows]
     );
     const nonControlled = props.value === void 0;
-    const handleChange = (0, import_react9.useCallback)(
+    const handleChange = (0, import_react10.useCallback)(
       (value) => {
         const count2 = countCodePointsInString(value);
         if (maxLength !== void 0 && count2 > maxLength) {
@@ -1153,7 +1175,7 @@ var TextArea = (0, import_react9.forwardRef)(
       },
       [autoHeight, maxLength, nonControlled, onChange, syncHeight]
     );
-    (0, import_react9.useEffect)(() => {
+    (0, import_react10.useEffect)(() => {
       setCount(countCodePointsInString(props.value ?? ""));
     }, [props.value]);
     const { inputProps, labelProps, descriptionProps, errorMessageProps } = (0, import_textfield2.useTextField)(
@@ -1169,14 +1191,16 @@ var TextArea = (0, import_react9.forwardRef)(
       },
       ariaRef
     );
-    (0, import_react9.useEffect)(() => {
+    (0, import_react10.useEffect)(() => {
       if (autoHeight && textareaRef.current !== null) {
         syncHeight(textareaRef.current);
       }
     }, [autoHeight, syncHeight]);
+    const containerRef = (0, import_react10.useRef)(null);
+    useFocusWithClick(containerRef, ariaRef);
     return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(TextFieldRoot2, { className, isDisabled: disabled, children: [
       /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-        TextFieldLabel2,
+        TextFieldLabel,
         {
           label,
           requiredText,
@@ -1189,8 +1213,10 @@ var TextArea = (0, import_react9.forwardRef)(
       /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
         StyledTextareaContainer,
         {
+          ref: containerRef,
           invalid,
           rows: showCount ? rows + 1 : rows,
+          "aria-disabled": disabled === true ? "true" : void 0,
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
               StyledTextarea,
@@ -1206,7 +1232,7 @@ var TextArea = (0, import_react9.forwardRef)(
         }
       ),
       assistiveText != null && assistiveText.length !== 0 && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-        AssistiveText2,
+        AssistiveText,
         {
           invalid,
           ...invalid ? errorMessageProps : descriptionProps,
@@ -1223,29 +1249,32 @@ var TextFieldRoot2 = import_styled_components11.default.div`
 
   ${(p) => p.isDisabled && { opacity: p.theme.elementEffect.disabled.opacity }}
 `;
-var TextFieldLabel2 = (0, import_styled_components11.default)(FieldLabel_default)`
-  ${theme((o) => o.margin.bottom(8))}
-`;
 var StyledTextareaContainer = import_styled_components11.default.div`
   position: relative;
   overflow: hidden;
-  padding: 0 8px;
 
-  ${(p) => theme((o) => [
-  o.bg.surface3.hover,
-  o.outline.default.focus,
-  p.invalid && o.outline.assertive,
-  o.font.text2,
-  o.borderRadius(4)
-])}
-
-  &:focus-within {
-    ${(p) => theme((o) => p.invalid ? o.outline.assertive : o.outline.default)}
-  }
+  color: var(--charcoal-text2);
+  background-color: var(--charcoal-surface3);
+  border-radius: 4px;
+  transition: 0.2s background-color, 0.2s box-shadow;
 
   ${({ rows }) => import_styled_components11.css`
     height: calc(22px * ${rows} + 18px);
   `};
+
+  :not([aria-disabled]):hover,
+  [aria-disabled='false']:hover {
+    background-color: var(--charcoal-surface3-hover);
+  }
+  :focus-within {
+    outline: none;
+    box-shadow: 0 0 0 4px
+      ${(p) => p.invalid ? `rgba(255,43,0,0.32)` : `rgba(0, 150, 250, 0.32);`};
+  }
+
+  ${(p) => p.invalid && import_styled_components11.css`
+      box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
+    `}
 `;
 var StyledTextarea = import_styled_components11.default.textarea`
   border: none;
@@ -1253,6 +1282,7 @@ var StyledTextarea = import_styled_components11.default.textarea`
   resize: none;
   font-family: inherit;
   color: inherit;
+  box-sizing: border-box;
 
   /* Prevent zooming for iOS Safari */
   transform-origin: top left;
@@ -1260,10 +1290,11 @@ var StyledTextarea = import_styled_components11.default.textarea`
   width: calc(100% / 0.875);
   font-size: calc(14px / 0.875);
   line-height: calc(22px / 0.875);
-  padding: calc(9px / 0.875) 0 ${(p) => p.noBottomPadding ? 0 : ""};
+  padding: calc(9px / 0.875) calc(8px / 0.875)
+    ${(p) => p.noBottomPadding ? 0 : ""};
 
-  ${({ rows = 1 }) => import_styled_components11.css`
-    height: calc(22px / 0.875 * ${rows});
+  ${({ rows = 1, noBottomPadding }) => import_styled_components11.css`
+    height: calc(22px / 0.875 * ${rows} + ${noBottomPadding ? 9 : 20}px);
   `};
 
   /* Display box-shadow for iOS Safari */
@@ -1272,31 +1303,17 @@ var StyledTextarea = import_styled_components11.default.textarea`
   background: none;
 
   &::placeholder {
-    ${theme((o) => o.font.text3)}
-  }
-
-  /* Hide scrollbar for Chrome, Safari and Opera */
-  &::-webkit-scrollbar {
-    display: none;
+    color: var(--charcoal-text3);
   }
-  /* Hide scrollbar for IE, Edge and Firefox */
-  -ms-overflow-style: none; /* IE and Edge */
-  scrollbar-width: none; /* Firefox */
 `;
 var MultiLineCounter = import_styled_components11.default.span`
   position: absolute;
   bottom: 9px;
   right: 8px;
 
-  ${theme((o) => [o.typography(14).preserveHalfLeading, o.font.text3])}
-`;
-var AssistiveText2 = import_styled_components11.default.p`
-  ${(p) => theme((o) => [
-  o.typography(14),
-  o.margin.top(8),
-  o.margin.bottom(0),
-  o.font[p.invalid ? "assertive" : "text1"]
-])}
+  line-height: 22px;
+  font-size: 14px;
+  color: var(--charcoal-text3);
 `;
 
 // src/components/Icon/index.tsx
@@ -1319,17 +1336,17 @@ var Icon = React6.forwardRef(function IconInner({ name, scale, unsafeNonGuidelin
 var Icon_default = Icon;
 
 // src/components/Modal/index.tsx
-var import_react11 = require("react");
+var import_react12 = require("react");
 var React9 = __toESM(require("react"));
 var import_overlays2 = require("@react-aria/overlays");
 var import_styled_components13 = __toESM(require("styled-components"));
 var import_utils7 = require("@charcoal-ui/utils");
-var import_styled12 = require("@charcoal-ui/styled");
+var import_styled10 = require("@charcoal-ui/styled");
 var import_react_spring2 = require("react-spring");
 var import_utils8 = require("@react-aria/utils");
 
 // src/components/Modal/Dialog/index.tsx
-var import_react10 = require("react");
+var import_react11 = require("react");
 var import_styled_components12 = __toESM(require("styled-components"));
 var import_dialog = require("@react-aria/dialog");
 
@@ -1362,7 +1379,7 @@ function useForwardedRef(ref) {
 
 // src/components/Modal/Dialog/index.tsx
 var import_jsx_runtime13 = require("react/jsx-runtime");
-var Dialog = (0, import_react10.forwardRef)(function Dialog2(props, forwardRef18) {
+var Dialog = (0, import_react11.forwardRef)(function Dialog2(props, forwardRef18) {
   const ref = useForwardedRef(forwardRef18);
   const { dialogProps } = (0, import_dialog.useDialog)(
     {
@@ -1433,7 +1450,7 @@ var ModalBackgroundContext = React8.createContext(
 // src/components/Modal/index.tsx
 var import_jsx_runtime14 = require("react/jsx-runtime");
 var DEFAULT_Z_INDEX = 10;
-var Modal = (0, import_react11.forwardRef)(function ModalInner({ children, zIndex = DEFAULT_Z_INDEX, portalContainer, ...props }, external) {
+var Modal = (0, import_react12.forwardRef)(function ModalInner({ children, zIndex = DEFAULT_Z_INDEX, portalContainer, ...props }, external) {
   const {
     title,
     size = "M",
@@ -1459,7 +1476,7 @@ var Modal = (0, import_react11.forwardRef)(function ModalInner({ children, zInde
     ref
   );
   const theme3 = (0, import_styled_components13.useTheme)();
-  const isMobile = (0, import_styled12.useMedia)((0, import_utils7.maxWidth)(theme3.breakpoint.screen1)) ?? false;
+  const isMobile = (0, import_styled10.useMedia)((0, import_utils7.maxWidth)(theme3.breakpoint.screen1)) ?? false;
   const transitionEnabled = isMobile && bottomSheet !== false;
   const showDismiss = !isMobile || bottomSheet !== true;
   const transition = (0, import_react_spring2.useTransition)(isOpen, {
@@ -1530,7 +1547,7 @@ var Modal = (0, import_react11.forwardRef)(function ModalInner({ children, zInde
     ) })
   );
 });
-var Modal_default = (0, import_react11.memo)(Modal);
+var Modal_default = (0, import_react12.memo)(Modal);
 var ModalContext = React9.createContext({
   titleProps: {},
   title: "",
@@ -1568,7 +1585,7 @@ var ModalCrossButton = (0, import_styled_components13.default)(IconButton_defaul
   ${theme((o) => [o.font.text3.hover.press])}
 `;
 function ModalTitle(props) {
-  const { titleProps, title } = (0, import_react11.useContext)(ModalContext);
+  const { titleProps, title } = (0, import_react12.useContext)(ModalContext);
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ModalHeading, { ...titleProps, ...props, children: title });
 }
 var ModalHeading = import_styled_components13.default.h3`
@@ -1579,11 +1596,11 @@ var ModalHeading = import_styled_components13.default.h3`
 
 // src/components/Modal/ModalPlumbing.tsx
 var import_styled_components14 = __toESM(require("styled-components"));
-var import_react12 = require("react");
+var import_react13 = require("react");
 var import_utils9 = require("@charcoal-ui/utils");
 var import_jsx_runtime15 = require("react/jsx-runtime");
 function ModalHeader() {
-  const modalCtx = (0, import_react12.useContext)(ModalContext);
+  const modalCtx = (0, import_react13.useContext)(ModalContext);
   return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ModalHeaderRoot, { $bottomSheet: modalCtx.bottomSheet, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(StyledModalTitle, {}) });
 }
 var ModalHeaderRoot = import_styled_components14.default.div`
@@ -1615,10 +1632,10 @@ var ModalButtons = import_styled_components14.default.div`
 `;
 
 // src/components/LoadingSpinner/index.tsx
-var import_react13 = require("react");
+var import_react14 = require("react");
 var import_styled_components15 = __toESM(require("styled-components"));
 var import_jsx_runtime16 = require("react/jsx-runtime");
-var LoadingSpinner = (0, import_react13.forwardRef)(
+var LoadingSpinner = (0, import_react14.forwardRef)(
   function LoadingSpinnerInner({ size = 48, padding = 16, transparent = false, className }, ref) {
     return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       LoadingSpinnerRoot,
@@ -1633,7 +1650,7 @@ var LoadingSpinner = (0, import_react13.forwardRef)(
     );
   }
 );
-var LoadingSpinner_default = (0, import_react13.memo)(LoadingSpinner);
+var LoadingSpinner_default = (0, import_react14.memo)(LoadingSpinner);
 var LoadingSpinnerRoot = import_styled_components15.default.div.attrs({ role: "progressbar" })`
   box-sizing: content-box;
   margin: auto;
@@ -1671,10 +1688,10 @@ var Icon2 = import_styled_components15.default.div.attrs({ role: "presentation"
     animation: none;
   }
 `;
-var LoadingSpinnerIcon = (0, import_react13.forwardRef)(
+var LoadingSpinnerIcon = (0, import_react14.forwardRef)(
   function LoadingSpinnerIcon2({ once = false }, ref) {
-    const iconRef = (0, import_react13.useRef)(null);
-    (0, import_react13.useImperativeHandle)(ref, () => ({
+    const iconRef = (0, import_react14.useRef)(null);
+    (0, import_react14.useImperativeHandle)(ref, () => ({
       restart: () => {
         if (!iconRef.current) {
           return;
@@ -1689,22 +1706,22 @@ var LoadingSpinnerIcon = (0, import_react13.forwardRef)(
 );
 
 // src/components/DropdownSelector/index.tsx
-var import_react19 = require("react");
+var import_react20 = require("react");
 var import_styled_components18 = __toESM(require("styled-components"));
 var import_utils10 = require("@charcoal-ui/utils");
 
 // src/components/DropdownSelector/DropdownPopover.tsx
-var import_react16 = require("react");
+var import_react17 = require("react");
 
 // src/components/DropdownSelector/Popover/index.tsx
-var import_react15 = require("react");
+var import_react16 = require("react");
 var import_overlays3 = require("@react-aria/overlays");
 var import_styled_components16 = __toESM(require("styled-components"));
 
 // src/components/DropdownSelector/Popover/usePreventScroll.tsx
-var import_react14 = require("react");
+var import_react15 = require("react");
 function usePreventScroll(element, isOpen) {
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     if (isOpen && element) {
       const defaultPaddingRight = element.style.paddingRight;
       const defaultOverflow = element.style.overflow;
@@ -1722,7 +1739,7 @@ function usePreventScroll(element, isOpen) {
 var import_jsx_runtime17 = require("react/jsx-runtime");
 var _empty = () => null;
 function Popover(props) {
-  const defaultPopoverRef = (0, import_react15.useRef)(null);
+  const defaultPopoverRef = (0, import_react16.useRef)(null);
   const finalPopoverRef = props.popoverRef === void 0 ? defaultPopoverRef : props.popoverRef;
   const { popoverProps, underlayProps } = (0, import_overlays3.usePopover)(
     {
@@ -1738,7 +1755,7 @@ function Popover(props) {
       toggle: _empty
     }
   );
-  const modalBackground = (0, import_react15.useContext)(ModalBackgroundContext);
+  const modalBackground = (0, import_react16.useContext)(ModalBackgroundContext);
   usePreventScroll(modalBackground, props.isOpen);
   if (!props.isOpen)
     return null;
@@ -1778,13 +1795,13 @@ var DropdownPopoverDiv = import_styled_components16.default.div`
 // src/components/DropdownSelector/DropdownPopover.tsx
 var import_jsx_runtime18 = require("react/jsx-runtime");
 function DropdownPopover({ children, ...props }) {
-  const ref = (0, import_react16.useRef)(null);
-  (0, import_react16.useEffect)(() => {
+  const ref = (0, import_react17.useRef)(null);
+  (0, import_react17.useEffect)(() => {
     if (props.isOpen && ref.current && props.triggerRef.current) {
       ref.current.style.width = `${props.triggerRef.current.clientWidth}px`;
     }
   }, [props.triggerRef, props.isOpen]);
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (props.isOpen && props.value !== void 0) {
       const windowScrollY = window.scrollY;
       const windowScrollX = window.scrollX;
@@ -1835,12 +1852,12 @@ function findPreviewRecursive(children, value) {
 }
 
 // src/components/DropdownSelector/MenuList/index.tsx
-var import_react18 = require("react");
+var import_react19 = require("react");
 var import_styled_components17 = __toESM(require("styled-components"));
 
 // src/components/DropdownSelector/MenuList/MenuListContext.ts
-var import_react17 = require("react");
-var MenuListContext = (0, import_react17.createContext)({
+var import_react18 = require("react");
+var MenuListContext = (0, import_react18.createContext)({
   root: void 0,
   value: "",
   values: [],
@@ -1870,7 +1887,7 @@ function getValuesRecursive(children, values = []) {
 // src/components/DropdownSelector/MenuList/index.tsx
 var import_jsx_runtime19 = require("react/jsx-runtime");
 function MenuList(props) {
-  const root = (0, import_react18.useRef)(null);
+  const root = (0, import_react19.useRef)(null);
   const values = [];
   getValuesRecursive(props.children, values);
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(StyledUl, { ref: root, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
@@ -1897,8 +1914,8 @@ var StyledUl = import_styled_components17.default.ul`
 var import_jsx_runtime20 = require("react/jsx-runtime");
 var defaultRequiredText = "*\u5FC5\u9808";
 function DropdownSelector(props) {
-  const triggerRef = (0, import_react19.useRef)(null);
-  const [isOpen, setIsOpen] = (0, import_react19.useState)(false);
+  const triggerRef = (0, import_react20.useRef)(null);
+  const [isOpen, setIsOpen] = (0, import_react20.useState)(false);
   const preview = findPreviewRecursive(props.children, props.value);
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(DropdownSelectorRoot, { "aria-disabled": props.disabled, children: [
     props.showLabel === true && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
@@ -2038,7 +2055,7 @@ var ItemDiv = import_styled_components19.default.div`
 `;
 
 // src/components/DropdownSelector/MenuItem/internals/useMenuItemHandleKeyDown.tsx
-var import_react20 = require("react");
+var import_react21 = require("react");
 
 // src/components/DropdownSelector/MenuItem/internals/handleFocusByKeyBoard.tsx
 function handleFocusByKeyBoard(element, parent) {
@@ -2071,12 +2088,12 @@ function scrollIfNeeded(element) {
 
 // src/components/DropdownSelector/MenuItem/internals/useMenuItemHandleKeyDown.tsx
 function useMenuItemHandleKeyDown(value) {
-  const { setValue, root, values } = (0, import_react20.useContext)(MenuListContext);
-  const setContextValue = (0, import_react20.useCallback)(() => {
+  const { setValue, root, values } = (0, import_react21.useContext)(MenuListContext);
+  const setContextValue = (0, import_react21.useCallback)(() => {
     if (value !== void 0)
       setValue(value);
   }, [value, setValue]);
-  const handleKeyDown = (0, import_react20.useCallback)(
+  const handleKeyDown = (0, import_react21.useCallback)(
     (e) => {
       if (e.key === "Enter") {
         setContextValue();
@@ -2123,10 +2140,10 @@ function MenuItem(props) {
 }
 
 // src/components/DropdownSelector/DropdownMenuItem.tsx
-var import_react21 = require("react");
+var import_react22 = require("react");
 var import_jsx_runtime23 = require("react/jsx-runtime");
 function DropdownMenuItem(props) {
-  const { value: ctxValue } = (0, import_react21.useContext)(MenuListContext);
+  const { value: ctxValue } = (0, import_react22.useContext)(MenuListContext);
   const isSelected = props.value === ctxValue;
   const { children, ...rest } = props;
   return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(MenuItem, { ...rest, children: [
@@ -2174,16 +2191,16 @@ var StyledLi2 = import_styled_components21.default.li`
 `;
 
 // src/components/SegmentedControl/index.tsx
-var import_react23 = require("react");
+var import_react24 = require("react");
 var import_react_stately2 = require("react-stately");
 var import_radio = require("@react-aria/radio");
 var import_styled_components22 = __toESM(require("styled-components"));
 var import_utils11 = require("@charcoal-ui/utils");
 
 // src/components/SegmentedControl/RadioGroupContext.tsx
-var import_react22 = require("react");
+var import_react23 = require("react");
 var import_jsx_runtime25 = require("react/jsx-runtime");
-var RadioContext = (0, import_react22.createContext)(null);
+var RadioContext = (0, import_react23.createContext)(null);
 var RadioProvider = ({
   value,
   children
@@ -2191,7 +2208,7 @@ var RadioProvider = ({
   return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(RadioContext.Provider, { value, children });
 };
 var useRadioContext = () => {
-  const state = (0, import_react22.useContext)(RadioContext);
+  const state = (0, import_react23.useContext)(RadioContext);
   if (state === null)
     throw new Error("`<RadioProvider>` is not likely mounted.");
   return state;
@@ -2199,9 +2216,9 @@ var useRadioContext = () => {
 
 // src/components/SegmentedControl/index.tsx
 var import_jsx_runtime26 = require("react/jsx-runtime");
-var SegmentedControl = (0, import_react23.forwardRef)(
+var SegmentedControl = (0, import_react24.forwardRef)(
   function SegmentedControlInner(props, ref) {
-    const ariaRadioGroupProps = (0, import_react23.useMemo)(
+    const ariaRadioGroupProps = (0, import_react24.useMemo)(
       () => ({
         ...props,
         isDisabled: props.disabled,
@@ -2213,7 +2230,7 @@ var SegmentedControl = (0, import_react23.forwardRef)(
     );
     const state = (0, import_react_stately2.useRadioGroupState)(ariaRadioGroupProps);
     const { radioGroupProps } = (0, import_radio.useRadioGroup)(ariaRadioGroupProps, state);
-    const segmentedControlItems = (0, import_react23.useMemo)(() => {
+    const segmentedControlItems = (0, import_react24.useMemo)(() => {
       return props.data.map(
         (d) => typeof d === "string" ? { value: d, label: d } : d
       );
@@ -2237,11 +2254,11 @@ var SegmentedControl = (0, import_react23.forwardRef)(
     );
   }
 );
-var SegmentedControl_default = (0, import_react23.memo)(SegmentedControl);
+var SegmentedControl_default = (0, import_react24.memo)(SegmentedControl);
 var Segmented = (props) => {
   const state = useRadioContext();
-  const ref = (0, import_react23.useRef)(null);
-  const ariaRadioProps = (0, import_react23.useMemo)(
+  const ref = (0, import_react24.useRef)(null);
+  const ariaRadioProps = (0, import_react24.useMemo)(
     () => ({
       value: props.value,
       isDisabled: props.disabled,
@@ -2316,16 +2333,16 @@ var SegmentedLabelInner = import_styled_components22.default.div`
 `;
 
 // src/components/Checkbox/index.tsx
-var import_react24 = require("react");
+var import_react25 = require("react");
 var import_styled_components23 = __toESM(require("styled-components"));
 var import_checkbox = require("@react-aria/checkbox");
 var import_utils12 = require("@react-aria/utils");
 var import_react_stately3 = require("react-stately");
 var import_utils13 = require("@charcoal-ui/utils");
 var import_jsx_runtime27 = require("react/jsx-runtime");
-var Checkbox = (0, import_react24.forwardRef)(
+var Checkbox = (0, import_react25.forwardRef)(
   function CheckboxInner({ invalid = false, ...props }, ref) {
-    const ariaCheckboxProps = (0, import_react24.useMemo)(
+    const ariaCheckboxProps = (0, import_react25.useMemo)(
       () => ({
         ...props,
         isSelected: props.checked,
@@ -2349,7 +2366,7 @@ var Checkbox = (0, import_react24.forwardRef)(
     ] });
   }
 );
-var Checkbox_default = (0, import_react24.memo)(Checkbox);
+var Checkbox_default = (0, import_react25.memo)(Checkbox);
 var hiddenCss = import_styled_components23.css`
   visibility: hidden;
 `;
@@ -2414,7 +2431,7 @@ var InputLabel = import_styled_components23.default.div`
 `;
 
 // src/components/TagItem/index.tsx
-var import_react25 = require("react");
+var import_react26 = require("react");
 var import_utils14 = require("@react-aria/utils");
 var import_styled_components24 = __toESM(require("styled-components"));
 var import_utils15 = require("@charcoal-ui/utils");
@@ -2424,7 +2441,7 @@ var sizeMap = {
   S: 32,
   M: 40
 };
-var TagItem = (0, import_react25.forwardRef)(
+var TagItem = (0, import_react26.forwardRef)(
   function TagItemInner({
     label,
     translatedLabel,
@@ -2437,7 +2454,7 @@ var TagItem = (0, import_react25.forwardRef)(
     ...props
   }, _ref) {
     const ref = (0, import_utils14.useObjectRef)(_ref);
-    const ariaButtonProps = (0, import_react25.useMemo)(
+    const ariaButtonProps = (0, import_react26.useMemo)(
       () => ({
         elementType: "a",
         isDisabled: disabled,
@@ -2469,7 +2486,7 @@ var TagItem = (0, import_react25.forwardRef)(
     );
   }
 );
-var TagItem_default = (0, import_react25.memo)(TagItem);
+var TagItem_default = (0, import_react26.memo)(TagItem);
 var TagItemRoot = import_styled_components24.default.a`
   isolation: isolate;
   position: relative;