@charcoal-ui/react 3.10.1-beta.1 → 4.0.0-beta.0

package/dist/index.esm.js

@@ -51,73 +51,37 @@ function CharcoalProvider({
 }
 
 // src/components/Button/index.tsx
-import { forwardRef as forwardRef3 } from "react";
+import { forwardRef as forwardRef2, useMemo as useMemo2 } from "react";
 
-// src/_lib/index.ts
-function unreachable(value) {
-  throw new Error(arguments.length === 0 ? "unreachable" : `unreachable (${JSON.stringify(value)})`);
-}
-function mergeRefs(...refs) {
-  return (value) => {
-    for (const ref of refs) {
-      if (typeof ref === "function") {
-        ref(value);
-      } else if (ref !== null) {
-        ;
-        ref.current = value;
-      }
-    }
-  };
-}
-function countCodePointsInString(string) {
-  return Array.from(string).length;
-}
-
-// src/components/Button/lib/variantToFont.tsx
-function variantToFont(variant) {
-  switch (variant) {
-    case "Overlay":
-      return "text5";
-    case "Default":
-      return "text2";
-    case "Primary":
-      return "text5";
-    case "Navigation":
-      return "text5";
-    case "Danger":
-      return "text5";
-    default:
-      return unreachable(variant);
-  }
-}
-
-// src/components/Button/lib/variantToBackground.tsx
-function variantToBackground(variant) {
-  switch (variant) {
-    case "Overlay":
-      return "surface4";
-    case "Default":
-      return "surface3";
-    case "Primary":
-      return "brand";
-    case "Navigation":
-      return "surface6";
-    case "Danger":
-      return "assertive";
-    default:
-      return unreachable(variant);
-  }
+// src/_lib/useClassNames.ts
+import { useMemo } from "react";
+function useClassNames(defaultClassName, propsClassName) {
+  return useMemo(() => [defaultClassName, propsClassName].filter((v) => v).join(" "), [defaultClassName, propsClassName]);
 }
 
-// src/components/Button/StyledButton.tsx
-import styled2, { css } from "styled-components";
+// src/components/Button/index.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var Button = forwardRef2(function Button2({
+  variant,
+  fullWidth,
+  size,
+  className,
+  as,
+  isActive,
+  ...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 });
+});
+var Button_default = Button;
 
 // src/components/Clickable/index.tsx
-import * as React2 from "react";
+import * as React3 from "react";
 import styled from "styled-components";
 import { disabledSelector } from "@charcoal-ui/utils";
-import { jsx as jsx3 } from "react/jsx-runtime";
-var Clickable = React2.forwardRef(function Clickable2(props, ref) {
+import { jsx as jsx4 } from "react/jsx-runtime";
+var Clickable = React3.forwardRef(function Clickable2(props, ref) {
   const {
     Link
   } = useComponentAbstraction();
@@ -132,44 +96,17 @@ var Clickable = React2.forwardRef(function Clickable2(props, ref) {
     } = props;
     rest = _rest;
   }
-  return /* @__PURE__ */ jsx3(StyledClickableDiv, { ...rest, ref, as, "aria-disabled": ariaDisabled });
+  return /* @__PURE__ */ jsx4(StyledClickableDiv, { ...rest, ref, as, "aria-disabled": ariaDisabled });
 });
 var Clickable_default = Clickable;
 var StyledClickableDiv = styled.div.withConfig({
   componentId: "ccl__sc-1lxyknw-0"
 })(["cursor:pointer;", "{cursor:default;}appearance:none;background:transparent;padding:0;border-style:none;outline:none;color:inherit;text-rendering:inherit;letter-spacing:inherit;word-spacing:inherit;text-decoration:none;&:focus{outline:none;}font:inherit;margin:0;overflow:visible;text-transform:none;&::-moz-focus-inner{border-style:none;padding:0;}"], disabledSelector);
 
-// src/components/Button/StyledButton.tsx
-import { focusVisibleFocusRingCss } from "@charcoal-ui/styled";
-var horizontalPaddingSmall = css(["padding-right:16px;padding-left:16px;"]);
-var horizontalPaddingMedium = css(["padding-right:24px;padding-left:24px;"]);
-var StyledButton = styled2(Clickable_default).withConfig({
-  componentId: "ccl__sc-19qkngs-0"
-})(["width:", ";display:inline-grid;align-items:center;justify-content:center;cursor:pointer;user-select:none;white-space:nowrap;border-radius:999999px;font-size:14px;line-height:22px;font-weight:bold;", " color:var(--charcoal-", ");background-color:var(--charcoal-", ");transition:0.2s color,0.2s background-color,0.2s box-shadow;&:not(:disabled):not([aria-disabled]),&[aria-disabled='false']{", " ", "}&:disabled,&[aria-disabled]:not([aria-disabled='false']){opacity:0.32;}height:", "px;"], (p) => p.$fullWidth ? "stretch" : "min-content", (p) => p.$size === "M" ? horizontalPaddingMedium : horizontalPaddingSmall, (p) => p.$color, (p) => p.$background, focusVisibleFocusRingCss, ({
-  $isActive: $active,
-  $color,
-  $background
-}) => $active ? css(["color:var(--charcoal-", "-press);background-color:var(--charcoal-", "-press);"], $color, $background) : css(["&:hover{color:var(--charcoal-", "-hover);background-color:var(--charcoal-", "-hover);}&:active{color:var(--charcoal-", "-press);background-color:var(--charcoal-", "-press);}"], $color, $background, $color, $background), (p) => p.$size === "M" ? 40 : 32);
-
-// src/components/Button/index.tsx
-import { jsx as jsx4 } from "react/jsx-runtime";
-var Button = forwardRef3(function Button2({
-  children,
-  variant = "Default",
-  size = "M",
-  fullWidth: fixed = false,
-  disabled = false,
-  isActive = false,
-  ...rest
-}, ref) {
-  return /* @__PURE__ */ jsx4(StyledButton, { ...rest, disabled, $background: variantToBackground(variant), $color: variantToFont(variant), $size: size, $fullWidth: fixed, $isActive: isActive, ref, children });
-});
-var Button_default = Button;
-
 // src/components/IconButton/index.tsx
 import { forwardRef as forwardRef4 } from "react";
-import styled3, { css as css2 } from "styled-components";
-import { focusVisibleFocusRingCss as focusVisibleFocusRingCss2 } from "@charcoal-ui/styled";
+import styled2, { css } from "styled-components";
+import { focusVisibleFocusRingCss } from "@charcoal-ui/styled";
 import { jsx as jsx5 } from "react/jsx-runtime";
 var IconButton = forwardRef4(function IconButtonInner({
   variant = "Default",
@@ -182,7 +119,7 @@ var IconButton = forwardRef4(function IconButtonInner({
   return /* @__PURE__ */ jsx5(StyledIconButton, { ...rest, ref, $size: size, $variant: variant, $isActive: isActive, children: /* @__PURE__ */ jsx5("pixiv-icon", { name: icon }) });
 });
 var IconButton_default = IconButton;
-var StyledIconButton = styled3(Clickable_default).attrs(styledProps).withConfig({
+var StyledIconButton = styled2(Clickable_default).attrs(styledProps).withConfig({
   componentId: "ccl__sc-zssehl-0"
 })(["user-select:none;width:", "px;height:", "px;display:flex;align-items:center;justify-content:center;color:var(", ");background-color:var(", ");border-radius:999999px;transition:0.2s background-color,0.2s box-shadow;&:not(:disabled):not([aria-disabled]),&[aria-disabled='false']{", " ", "}&:disabled,&[aria-disabled]:not([aria-disabled='false']){opacity:0.32;}"], (p) => p.$width, (p) => p.$height, ({
   $font
@@ -192,7 +129,7 @@ var StyledIconButton = styled3(Clickable_default).attrs(styledProps).withConfig(
   $isActive,
   $background,
   $font
-}) => $isActive ? css2(["color:var(--charcoal-", "-press);background-color:var(--charcoal-", "-press);"], $font, $background) : css2(["&:hover{color:var(--charcoal-", "-hover);background-color:var(--charcoal-", "-hover);}&:active{color:var(--charcoal-", "-press);background-color:var(--charcoal-", "-press);}"], $font, $background, $font, $background), focusVisibleFocusRingCss2);
+}) => $isActive ? css(["color:var(--charcoal-", "-press);background-color:var(--charcoal-", "-press);"], $font, $background) : css(["&:hover{color:var(--charcoal-", "-hover);background-color:var(--charcoal-", "-hover);}&:active{color:var(--charcoal-", "-press);background-color:var(--charcoal-", "-press);}"], $font, $background, $font, $background), focusVisibleFocusRingCss);
 function styledProps({
   $size,
   $variant
@@ -258,10 +195,10 @@ function validateIconSize(size, icon) {
 
 // src/components/Radio/index.tsx
 import { memo, forwardRef as forwardRef5, useCallback, useContext as useContext2 } from "react";
-import * as React3 from "react";
-import styled4 from "styled-components";
+import * as React4 from "react";
+import styled3 from "styled-components";
 import warning from "warning";
-import { focusVisibleFocusRingCss as focusVisibleFocusRingCss3 } from "@charcoal-ui/styled";
+import { focusVisibleFocusRingCss as focusVisibleFocusRingCss2 } from "@charcoal-ui/styled";
 import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
 var Radio = forwardRef5(function RadioInner({
   value,
@@ -293,21 +230,21 @@ var Radio = forwardRef5(function RadioInner({
   ] });
 });
 var Radio_default = memo(Radio);
-var RadioRoot = styled4.label.withConfig({
+var RadioRoot = styled3.label.withConfig({
   componentId: "ccl__sc-1hitkzn-0"
 })(["display:grid;grid-template-columns:auto 1fr;grid-gap:4px;align-items:center;cursor:pointer;&[aria-disabled]:not([aria-disabled='false']){opacity:0.32;cursor:default;}"]);
-var RadioInput = styled4.input.attrs({
+var RadioInput = styled3.input.attrs({
   type: "radio"
 }).withConfig({
   componentId: "ccl__sc-1hitkzn-1"
-})(["&[type='radio']{appearance:none;display:block;box-sizing:border-box;margin:0;padding:6px;width:20px;height:20px;cursor:pointer;border-radius:999999px;background-color:var(--charcoal-surface1);transition:0.2s background-color,0.2s box-shadow;:disabled{cursor:default;}&:not(:disabled):not([aria-disabled]),&[aria-disabled='false']{&:hover{background-color:var(--charcoal-surface1-hover);}&:active{background-color:var(--charcoal-surface1-press);}", " &[aria-invalid='true']{box-shadow:0 0 0 4px rgba(255,43,0,0.32);&:focus{box-shadow:0 0 0 4px rgba(255,43,0,0.32);}}}&:not(:checked){border-width:2px;border-style:solid;border-color:var(--charcoal-text3);}&:checked{background-color:var(--charcoal-brand);&::after{content:'';display:block;width:8px;height:8px;pointer-events:none;background-color:var(--charcoal-text5);border-radius:999999px;transition:0.2s background-color,0.2s box-shadow;}&:not(:disabled):not([aria-disabled]),&[aria-disabled='false']{&:hover{background-color:var(--charcoal-brand-hover);&::after{background-color:var(--charcoal-text5-hover);}}&:active{background-color:var(--charcoal-brand-press);&::after{background-color:var(--charcoal-text5-press);}}}}}"], focusVisibleFocusRingCss3);
-var RadioLabel = styled4.div.withConfig({
+})(["&[type='radio']{appearance:none;display:block;box-sizing:border-box;margin:0;padding:6px;width:20px;height:20px;cursor:pointer;border-radius:999999px;background-color:var(--charcoal-surface1);transition:0.2s background-color,0.2s box-shadow;:disabled{cursor:default;}&:not(:disabled):not([aria-disabled]),&[aria-disabled='false']{&:hover{background-color:var(--charcoal-surface1-hover);}&:active{background-color:var(--charcoal-surface1-press);}", " &[aria-invalid='true']{box-shadow:0 0 0 4px rgba(255,43,0,0.32);&:focus{box-shadow:0 0 0 4px rgba(255,43,0,0.32);}}}&:not(:checked){border-width:2px;border-style:solid;border-color:var(--charcoal-text3);}&:checked{background-color:var(--charcoal-brand);&::after{content:'';display:block;width:8px;height:8px;pointer-events:none;background-color:var(--charcoal-text5);border-radius:999999px;transition:0.2s background-color,0.2s box-shadow;}&:not(:disabled):not([aria-disabled]),&[aria-disabled='false']{&:hover{background-color:var(--charcoal-brand-hover);&::after{background-color:var(--charcoal-text5-hover);}}&:active{background-color:var(--charcoal-brand-press);&::after{background-color:var(--charcoal-text5-press);}}}}}"], focusVisibleFocusRingCss2);
+var RadioLabel = styled3.div.withConfig({
   componentId: "ccl__sc-1hitkzn-2"
 })(["font-size:14px;line-height:22px;display:flow-root;color:var(--charcoal-text2);&::before{display:block;width:0;height:0;content:'';margin-top:-4px;}&::after{display:block;width:0;height:0;content:'';margin-bottom:-4px;}"]);
-var StyledRadioGroup = styled4.div.withConfig({
+var StyledRadioGroup = styled3.div.withConfig({
   componentId: "ccl__sc-1hitkzn-3"
 })(["display:grid;grid-template-columns:1fr;grid-gap:8px;"]);
-var RadioGroupContext = React3.createContext({
+var RadioGroupContext = React4.createContext({
   name: void 0,
   selected: void 0,
   disabled: false,
@@ -343,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 styled5, { css as css3 } from "styled-components";
+import styled4, { css as css2 } from "styled-components";
 import warning2 from "warning";
 import { px } from "@charcoal-ui/utils";
 
@@ -361,7 +298,7 @@ var MultiSelectGroupContext = createContext3({
 });
 
 // src/components/MultiSelect/index.tsx
-import { focusVisibleFocusRingCss as focusVisibleFocusRingCss4 } from "@charcoal-ui/styled";
+import { focusVisibleFocusRingCss as focusVisibleFocusRingCss3 } from "@charcoal-ui/styled";
 import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
 var MultiSelect = forwardRef6(function MultiSelectInner({
   value,
@@ -410,32 +347,32 @@ var MultiSelect = forwardRef6(function MultiSelectInner({
   ] });
 });
 var MultiSelect_default = memo2(MultiSelect);
-var MultiSelectRoot = styled5.label.withConfig({
+var MultiSelectRoot = styled4.label.withConfig({
   componentId: "ccl__sc-wpr5y9-0"
 })(["display:grid;grid-template-columns:auto 1fr;align-items:center;position:relative;cursor:pointer;gap:", ";&:disabled,&[aria-disabled]:not([aria-disabled='false']){opacity:0.32;cursor:default;}"], ({
   theme
 }) => px(theme.spacing[4]));
-var MultiSelectLabel = styled5.div.withConfig({
+var MultiSelectLabel = styled4.div.withConfig({
   componentId: "ccl__sc-wpr5y9-1"
 })(["display:flex;align-items:center;font-size:14px;line-height:22px;display:flow-root;color:var(--charcoal-text2);&::before{display:block;width:0;height:0;content:'';margin-top:-4px;}&::after{display:block;width:0;height:0;content:'';margin-bottom:-4px;}"]);
-var MultiSelectInput = styled5.input.attrs({
+var MultiSelectInput = styled4.input.attrs({
   type: "checkbox"
 }).withConfig({
   componentId: "ccl__sc-wpr5y9-2"
-})(["&[type='checkbox']{appearance:none;display:block;width:20px;height:20px;margin:0;background-color:var(--charcoal-text3);border-radius:999999px;transition:0.2s background-color,0.2s box-shadow;&:checked{background-color:var(--charcoal-brand);&:hover{&:not(:disabled):not([aria-disabled]),&[aria-disabled='false']{background-color:var(--charcoal-brand-hover);}}&:active{&:not(:disabled):not([aria-disabled]),&[aria-disabled='false']{background-color:var(--charcoal-brand-press);}}}&:hover{&:not(:disabled):not([aria-disabled]),&[aria-disabled='false']{background-color:var(--charcoal-text3-hover);}}&:active{&:not(:disabled):not([aria-disabled]),&[aria-disabled='false']{background-color:var(--charcoal-text3-press);}}", " ", " ", "}"], focusVisibleFocusRingCss4, ({
+})(["&[type='checkbox']{appearance:none;display:block;width:20px;height:20px;margin:0;background-color:var(--charcoal-text3);border-radius:999999px;transition:0.2s background-color,0.2s box-shadow;&:checked{background-color:var(--charcoal-brand);&:hover{&:not(:disabled):not([aria-disabled]),&[aria-disabled='false']{background-color:var(--charcoal-brand-hover);}}&:active{&:not(:disabled):not([aria-disabled]),&[aria-disabled='false']{background-color:var(--charcoal-brand-press);}}}&:hover{&:not(:disabled):not([aria-disabled]),&[aria-disabled='false']{background-color:var(--charcoal-text3-hover);}}&:active{&:not(:disabled):not([aria-disabled]),&[aria-disabled='false']{background-color:var(--charcoal-text3-press);}}", " ", " ", "}"], focusVisibleFocusRingCss3, ({
   invalid,
   overlay
-}) => invalid && !overlay && css3(["&:not(:disabled):not([aria-disabled]),&[aria-disabled='false']{box-shadow:0 0 0 4px rgba(255,43,0,0.32);}"]), ({
+}) => invalid && !overlay && css2(["&:not(:disabled):not([aria-disabled]),&[aria-disabled='false']{box-shadow:0 0 0 4px rgba(255,43,0,0.32);}"]), ({
   overlay
-}) => overlay && css3(["background-color:var(--charcoal-surface4);"]));
-var MultiSelectInputOverlay = styled5.div.withConfig({
+}) => overlay && css2(["background-color:var(--charcoal-surface4);"]));
+var MultiSelectInputOverlay = styled4.div.withConfig({
   componentId: "ccl__sc-wpr5y9-3"
 })(["position:absolute;top:-2px;left:-2px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:999999px;color:var(--charcoal-text5);transition:0.2s box-shadow;", " ", ""], ({
   invalid,
   overlay
-}) => invalid && overlay && css3(["&:not(:disabled):not([aria-disabled]),&[aria-disabled='false']{box-shadow:0 0 0 4px rgba(255,43,0,0.32);}"]), ({
+}) => invalid && overlay && css2(["&:not(:disabled):not([aria-disabled]),&[aria-disabled='false']{box-shadow:0 0 0 4px rgba(255,43,0,0.32);}"]), ({
   overlay
-}) => overlay && css3(["border-color:var(--charcoal-text5);border-width:2px;border-style:solid;"]));
+}) => overlay && css2(["border-color:var(--charcoal-text5);border-width:2px;border-style:solid;"]));
 function MultiSelectGroup({
   className,
   name,
@@ -471,18 +408,18 @@ function MultiSelectGroup({
 
 // src/components/Switch/index.tsx
 import { useSwitch } from "@react-aria/switch";
-import { useMemo, memo as memo3, forwardRef as forwardRef7 } from "react";
+import { useMemo as useMemo3, memo as memo3, forwardRef as forwardRef7 } from "react";
 import { useToggleState } from "react-stately";
-import styled6 from "styled-components";
+import styled5 from "styled-components";
 import { useObjectRef } from "@react-aria/utils";
-import { focusVisibleFocusRingCss as focusVisibleFocusRingCss5 } from "@charcoal-ui/styled";
+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) {
   const {
     disabled,
     className
   } = props;
-  const ariaSwitchProps = useMemo(() => ({
+  const ariaSwitchProps = useMemo3(() => ({
     ...props,
     "aria-label": "children" in props ? void 0 : props.label,
     isDisabled: props.disabled,
@@ -503,30 +440,30 @@ var SwitchCheckbox = forwardRef7(function SwitchCheckboxInner(props, external) {
   ] });
 });
 var Switch_default = memo3(SwitchCheckbox);
-var Label = styled6.label.withConfig({
+var Label = styled5.label.withConfig({
   componentId: "ccl__sc-1wy6z5h-0"
 })(["display:inline-grid;grid-template-columns:auto 1fr;align-items:center;cursor:pointer;outline:0;&:disabled,&[aria-disabled]:not([aria-disabled='false']){opacity:0.32;cursor:default;}"]);
-var LabelInner = styled6.div.withConfig({
+var LabelInner = styled5.div.withConfig({
   componentId: "ccl__sc-1wy6z5h-1"
 })(["font-size:14px;line-height:22px;color:var(--charcoal-text2);margin-left:4px;"]);
-var SwitchInput = styled6.input.attrs({
+var SwitchInput = styled5.input.attrs({
   type: "checkbox"
 }).withConfig({
   componentId: "ccl__sc-1wy6z5h-2"
-})(["appearance:none;display:inline-flex;position:relative;box-sizing:border-box;width:28px;border:2px solid transparent;transition-property:background-color,box-shadow;transition-duration:0.2s;cursor:inherit;outline:none;border-radius:16px;height:16px;margin:0;background-color:var(--charcoal-text4);:hover{background-color:var(--charcoal-text4-hover);}:active{background-color:var(--charcoal-text4-press);}", " &::after{content:'';position:absolute;display:block;top:0;left:0;width:12px;height:12px;transform:translateX(0);transition:transform 0.2s;border-radius:1024px;background-color:var(--charcoal-text5);:hover{background-color:var(--charcoal-text5-hover);}:active{background-color:var(--charcoal-text5-press);}}&:checked{background-color:var(--charcoal-brand);:hover{background-color:var(--charcoal-brand-hover);}:active{background-color:var(--charcoal-brand-press);}&::after{transform:translateX(12px);transition:transform 0.2s;}}"], focusVisibleFocusRingCss5);
+})(["appearance:none;display:inline-flex;position:relative;box-sizing:border-box;width:28px;border:2px solid transparent;transition-property:background-color,box-shadow;transition-duration:0.2s;cursor:inherit;outline:none;border-radius:16px;height:16px;margin:0;background-color:var(--charcoal-text4);:hover{background-color:var(--charcoal-text4-hover);}:active{background-color:var(--charcoal-text4-press);}", " &::after{content:'';position:absolute;display:block;top:0;left:0;width:12px;height:12px;transform:translateX(0);transition:transform 0.2s;border-radius:1024px;background-color:var(--charcoal-text5);:hover{background-color:var(--charcoal-text5-hover);}:active{background-color:var(--charcoal-text5-press);}}&:checked{background-color:var(--charcoal-brand);:hover{background-color:var(--charcoal-brand-hover);}:active{background-color:var(--charcoal-brand-press);}&::after{transform:translateX(12px);transition:transform 0.2s;}}"], focusVisibleFocusRingCss4);
 
 // src/components/TextField/index.tsx
 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 React5 from "react";
-import styled8, { css as css4 } from "styled-components";
+import * as React6 from "react";
+import styled7, { css as css3 } from "styled-components";
 
 // src/components/FieldLabel/index.tsx
-import * as React4 from "react";
-import styled7 from "styled-components";
+import * as React5 from "react";
+import styled6 from "styled-components";
 import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
-var FieldLabel = React4.forwardRef(function FieldLabel2({
+var FieldLabel = React5.forwardRef(function FieldLabel2({
   style,
   className,
   label,
@@ -542,19 +479,39 @@ var FieldLabel = React4.forwardRef(function FieldLabel2({
   ] });
 });
 var FieldLabel_default = FieldLabel;
-var Label2 = styled7.label.withConfig({
+var Label2 = styled6.label.withConfig({
   componentId: "ccl__sc-1iotshb-0"
 })(["font-size:14px;line-height:22px;font-weight:bold;display:flow-root;color:var(--charcoal-text1);&::before{display:block;width:0;height:0;content:'';margin-top:-4px;}&::after{display:block;width:0;height:0;content:'';margin-bottom:-4px;}"]);
-var RequiredText = styled7.span.withConfig({
+var RequiredText = styled6.span.withConfig({
   componentId: "ccl__sc-1iotshb-1"
 })(["font-size:14px;line-height:22px;display:flow-root;color:var(--charcoal-text2);&::before{display:block;width:0;height:0;content:'';margin-top:-4px;}&::after{display:block;width:0;height:0;content:'';margin-bottom:-4px;}"]);
-var SubLabelClickable = styled7.div.withConfig({
+var SubLabelClickable = styled6.div.withConfig({
   componentId: "ccl__sc-1iotshb-2"
 })(["font-size:14px;line-height:22px;display:flow-root;color:var(--charcoal-text3);transition:0.2s color,0.2s box-shadow;&::before{display:block;width:0;height:0;content:'';margin-top:-4px;}&::after{display:block;width:0;height:0;content:'';margin-bottom:-4px;}&:not(:disabled):not([aria-disabled]),&[aria-disabled='false']{&:hover{color:var(--charcoal-text3-hover);}&:active{color:var(--charcoal-text3-press);}&:active,&:focus,&:focus-visible{outline:none;box-shadow:0 0 0 4px rgba(0,150,250,0.32);}}"]);
-var FieldLabelWrapper = styled7.div.withConfig({
+var FieldLabelWrapper = styled6.div.withConfig({
   componentId: "ccl__sc-1iotshb-3"
 })(["display:inline-flex;align-items:center;> ", "{margin-left:4px;}> ", "{margin-left:auto;}"], RequiredText, SubLabelClickable);
 
+// src/_lib/index.ts
+function unreachable(value) {
+  throw new Error(arguments.length === 0 ? "unreachable" : `unreachable (${JSON.stringify(value)})`);
+}
+function mergeRefs(...refs) {
+  return (value) => {
+    for (const ref of refs) {
+      if (typeof ref === "function") {
+        ref(value);
+      } else if (ref !== null) {
+        ;
+        ref.current = value;
+      }
+    }
+  };
+}
+function countCodePointsInString(string) {
+  return Array.from(string).length;
+}
+
 // src/components/TextField/useFocusWithClick.tsx
 import { useEffect } from "react";
 function useFocusWithClick(containerRef, inputRef) {
@@ -577,7 +534,7 @@ 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 = React5.forwardRef(function SingleLineTextFieldInner({
+var TextField = React6.forwardRef(function SingleLineTextFieldInner({
   onChange,
   ...props
 }, forwardRef18) {
@@ -648,30 +605,30 @@ var TextField = React5.forwardRef(function SingleLineTextFieldInner({
   ] });
 });
 var TextField_default = TextField;
-var TextFieldRoot = styled8.div.withConfig({
+var TextFieldRoot = styled7.div.withConfig({
   componentId: "ccl__sc-3dd0tt-0"
 })(["display:flex;flex-direction:column;", ""], (p) => p.isDisabled && {
   opacity: p.theme.elementEffect.disabled.opacity
 });
-var TextFieldLabel = styled8(FieldLabel_default).withConfig({
+var TextFieldLabel = styled7(FieldLabel_default).withConfig({
   componentId: "ccl__sc-3dd0tt-1"
 })(["margin-bottom:8px;"]);
-var StyledInputContainer = styled8.div.withConfig({
+var StyledInputContainer = styled7.div.withConfig({
   componentId: "ccl__sc-3dd0tt-2"
-})(["display:grid;grid-template-columns:", ";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);}:focus-within{outline:none;box-shadow:0 0 0 4px ", ";}", ""], (p) => [p.hasPrefix && "auto", "1fr", p.hasSuffix && "auto"].filter(Boolean).join(" "), (p) => p.invalid ? `rgba(255,43,0,0.32)` : `rgba(0, 150, 250, 0.32);`, (p) => p.invalid && css4(["box-shadow:0 0 0 4px rgba(255,43,0,0.32);"]));
-var PrefixContainer = styled8.div.withConfig({
+})(["display:grid;grid-template-columns:", ";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);}:focus-within{outline:none;box-shadow:0 0 0 4px ", ";}", ""], (p) => [p.hasPrefix && "auto", "1fr", p.hasSuffix && "auto"].filter(Boolean).join(" "), (p) => p.invalid ? `rgba(255,43,0,0.32)` : `rgba(0, 150, 250, 0.32);`, (p) => p.invalid && css3(["box-shadow:0 0 0 4px rgba(255,43,0,0.32);"]));
+var PrefixContainer = styled7.div.withConfig({
   componentId: "ccl__sc-3dd0tt-3"
 })(["display:flex;align-items:center;"]);
-var SuffixContainer = styled8.span.withConfig({
+var SuffixContainer = styled7.span.withConfig({
   componentId: "ccl__sc-3dd0tt-4"
 })(["display:flex;align-items:center;gap:8px;"]);
-var StyledInput = styled8.input.withConfig({
+var StyledInput = styled7.input.withConfig({
   componentId: "ccl__sc-3dd0tt-5"
 })(["border:none;box-sizing:border-box;outline:none;font-family:inherit;transform-origin:top left;transform:scale(0.875);width:calc(100% / 0.875);height:calc(100% / 0.875);font-size:calc(14px / 0.875);line-height:calc(22px / 0.875);padding-left:0;padding-right:0;border-radius:calc(4px / 0.875);appearance:none;background:transparent;color:var(--charcoal-text2);&::placeholder{color:var(--charcoal-text3);}"]);
-var SingleLineCounter = styled8.span.withConfig({
+var SingleLineCounter = styled7.span.withConfig({
   componentId: "ccl__sc-3dd0tt-6"
 })(["line-height:22px;font-size:14px;color:var(--charcoal-text3);"]);
-var AssistiveText = styled8.p.withConfig({
+var AssistiveText = styled7.p.withConfig({
   componentId: "ccl__sc-3dd0tt-7"
 })(["font-size:14px;line-height:22px;margin-top:4px;margin-bottom:-4px;color:", ";"], (p) => `var(--charcoal-${p.invalid ? `assertive` : `text2`})`);
 
@@ -679,7 +636,7 @@ var AssistiveText = styled8.p.withConfig({
 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 styled9, { css as css5 } from "styled-components";
+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({
@@ -764,31 +721,31 @@ var TextArea = forwardRef10(function TextAreaInner({
   ] });
 });
 var TextArea_default = TextArea;
-var TextFieldRoot2 = styled9.div.withConfig({
+var TextFieldRoot2 = styled8.div.withConfig({
   componentId: "ccl__sc-58waht-0"
 })(["display:flex;flex-direction:column;", ""], (p) => p.isDisabled && {
   opacity: p.theme.elementEffect.disabled.opacity
 });
-var StyledTextareaContainer = styled9.div.withConfig({
+var StyledTextareaContainer = styled8.div.withConfig({
   componentId: "ccl__sc-58waht-1"
 })(["position:relative;overflow:hidden;color:var(--charcoal-text2);background-color:var(--charcoal-surface3);border-radius:4px;transition:0.2s background-color,0.2s box-shadow;", ";:not([aria-disabled]):hover,[aria-disabled='false']:hover{background-color:var(--charcoal-surface3-hover);}:focus-within{outline:none;box-shadow:0 0 0 4px ", ";}", ""], ({
   rows
-}) => css5(["height:calc(22px * ", " + 18px);"], rows), (p) => p.invalid ? `rgba(255,43,0,0.32)` : `rgba(0, 150, 250, 0.32);`, (p) => p.invalid && css5(["box-shadow:0 0 0 4px rgba(255,43,0,0.32);"]));
-var StyledTextarea = styled9.textarea.withConfig({
+}) => css4(["height:calc(22px * ", " + 18px);"], rows), (p) => p.invalid ? `rgba(255,43,0,0.32)` : `rgba(0, 150, 250, 0.32);`, (p) => p.invalid && css4(["box-shadow:0 0 0 4px rgba(255,43,0,0.32);"]));
+var StyledTextarea = styled8.textarea.withConfig({
   componentId: "ccl__sc-58waht-2"
 })(["border:none;outline:none;resize:none;font-family:inherit;color:inherit;box-sizing:border-box;transform-origin:top left;transform:scale(0.875);width:calc(100% / 0.875);font-size:calc(14px / 0.875);line-height:calc(22px / 0.875);padding:calc(9px / 0.875) calc(8px / 0.875) ", ";", ";appearance:none;background:none;&::placeholder{color:var(--charcoal-text3);}"], (p) => p.noBottomPadding ? 0 : "", ({
   rows = 1,
   noBottomPadding
-}) => css5(["height:calc(22px / 0.875 * ", " + ", "px);"], rows, noBottomPadding ? 9 : 20));
-var MultiLineCounter = styled9.span.withConfig({
+}) => css4(["height:calc(22px / 0.875 * ", " + ", "px);"], rows, noBottomPadding ? 9 : 20));
+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 React6 from "react";
+import * as React7 from "react";
 import "@charcoal-ui/icons";
 import { jsx as jsx12 } from "react/jsx-runtime";
-var Icon = React6.forwardRef(function IconInner({
+var Icon = React7.forwardRef(function IconInner({
   name,
   scale,
   unsafeNonGuidelineScale,
@@ -801,9 +758,9 @@ var Icon_default = Icon;
 
 // src/components/Modal/index.tsx
 import { useContext as useContext4, forwardRef as forwardRef13, memo as memo4 } from "react";
-import * as React10 from "react";
+import * as React11 from "react";
 import { Overlay } from "@react-aria/overlays";
-import styled11, { css as css7, useTheme } from "styled-components";
+import styled10, { css as css6, useTheme } from "styled-components";
 import { maxWidth as maxWidth2 } from "@charcoal-ui/utils";
 import { useMedia } from "@charcoal-ui/styled";
 import { animated as animated2, useTransition, easings } from "react-spring";
@@ -811,7 +768,7 @@ import { useObjectRef as useObjectRef2 } from "@react-aria/utils";
 
 // src/components/Modal/Dialog/index.tsx
 import { forwardRef as forwardRef12 } from "react";
-import styled10, { css as css6 } from "styled-components";
+import styled9, { css as css5 } from "styled-components";
 import { useDialog } from "@react-aria/dialog";
 
 // ../foundation/src/grid.ts
@@ -826,10 +783,10 @@ import { maxWidth } from "@charcoal-ui/utils";
 import { animated } from "react-spring";
 
 // src/_lib/useForwardedRef.tsx
-import * as React7 from "react";
+import * as React8 from "react";
 function useForwardedRef(ref) {
-  const innerRef = React7.useRef(null);
-  React7.useEffect(() => {
+  const innerRef = React8.useRef(null);
+  React8.useEffect(() => {
     if (!ref)
       return;
     if (typeof ref === "function") {
@@ -852,7 +809,7 @@ var Dialog = forwardRef12(function Dialog2(props, forwardRef18) {
   }, ref);
   return /* @__PURE__ */ jsx13(AnimatedStyledDialogDiv, { ...props, role: dialogProps.role, tabIndex: dialogProps.tabIndex, "aria-labelledby": dialogProps["aria-labelledby"], onBlur: dialogProps.onBlur, ref });
 });
-var AnimatedStyledDialogDiv = animated(styled10.div.withConfig({
+var AnimatedStyledDialogDiv = animated(styled9.div.withConfig({
   componentId: "ccl__sc-1ep4f6v-0"
 })(["margin:auto;position:relative;height:fit-content;width:", "px;background-color:var(--charcoal-surface1);border-radius:24px;@media ", "{max-width:440px;width:calc(100% - 48px);", "}:focus{outline:none;}"], (p) => {
   switch (p.size) {
@@ -871,14 +828,14 @@ var AnimatedStyledDialogDiv = animated(styled10.div.withConfig({
   }
 }, ({
   theme
-}) => maxWidth(theme.breakpoint.screen1), (p) => p.bottomSheet !== false && css6(["max-width:unset;width:100%;border-radius:0;margin:auto 0 0 0;", ""], p.bottomSheet === "full" && css6(["min-height:100%;"]))));
+}) => maxWidth(theme.breakpoint.screen1), (p) => p.bottomSheet !== false && css5(["max-width:unset;width:100%;border-radius:0;margin:auto 0 0 0;", ""], p.bottomSheet === "full" && css5(["min-height:100%;"]))));
 
 // src/components/Modal/ModalBackgroundContext.tsx
-import * as React8 from "react";
-var ModalBackgroundContext = React8.createContext(null);
+import * as React9 from "react";
+var ModalBackgroundContext = React9.createContext(null);
 
 // src/components/Modal/useCustomModalOverlay.tsx
-import * as React9 from "react";
+import * as React10 from "react";
 import { ariaHideOutside, useOverlay, useOverlayFocusContain, usePreventScroll } from "@react-aria/overlays";
 function useCharcoalModalOverlay(props, state, ref) {
   const {
@@ -894,7 +851,7 @@ function useCharcoalModalOverlay(props, state, ref) {
     isDisabled: !state.isOpen
   });
   useOverlayFocusContain();
-  React9.useEffect(() => {
+  React10.useEffect(() => {
     if (state.isOpen && ref.current) {
       return ariaHideOutside([ref.current]);
     }
@@ -963,8 +920,8 @@ var Modal = forwardRef13(function ModalInner({
       duration: 0
     }
   });
-  const bgRef = React10.useRef(null);
-  const handleClick = React10.useCallback((e) => {
+  const bgRef = React11.useRef(null);
+  const handleClick = React11.useCallback((e) => {
     if (e.currentTarget === e.target) {
       onClose();
     }
@@ -990,21 +947,21 @@ var Modal = forwardRef13(function ModalInner({
   ] }) }) }) }) }));
 });
 var Modal_default = memo4(Modal);
-var ModalContext = React10.createContext({
+var ModalContext = React11.createContext({
   titleProps: {},
   title: "",
   close: void 0,
   showDismiss: true,
   bottomSheet: false
 });
-var ModalBackground = animated2(styled11.div.withConfig({
+var ModalBackground = animated2(styled10.div.withConfig({
   componentId: "ccl__sc-h2bc55-0"
 })(["z-index:", ";overflow:auto;display:flex;position:fixed;top:0;left:0;width:-webkit-fill-available;width:-moz-available;height:100%;justify-content:center;padding:40px 0;box-sizing:border-box;background-color:var(--charcoal-surface4);@media ", "{", "}"], ({
   zIndex
 }) => zIndex, ({
   theme
-}) => maxWidth2(theme.breakpoint.screen1), (p) => p.$bottomSheet !== false && css7(["padding:0;"])));
-var ModalCrossButton = styled11(IconButton_default).withConfig({
+}) => maxWidth2(theme.breakpoint.screen1), (p) => p.$bottomSheet !== false && css6(["padding:0;"])));
+var ModalCrossButton = styled10(IconButton_default).withConfig({
   componentId: "ccl__sc-h2bc55-1"
 })(["position:absolute;top:8px;right:8px;color:var(--charcoal-text3);transition:0.2s color;&:not(:disabled):not([aria-disabled]),&[aria-disabled='false']{&:hover{color:var(--charcoal-text3-hover);}&:active{color:var(--charcoal-text3-press);}}"]);
 function ModalTitle(props) {
@@ -1014,12 +971,12 @@ function ModalTitle(props) {
   } = useContext4(ModalContext);
   return /* @__PURE__ */ jsx14(ModalHeading, { ...titleProps, ...props, children: title });
 }
-var ModalHeading = styled11.h3.withConfig({
+var ModalHeading = styled10.h3.withConfig({
   componentId: "ccl__sc-h2bc55-2"
 })(["margin:0;font-weight:inherit;font-size:inherit;"]);
 
 // src/components/Modal/ModalPlumbing.tsx
-import styled12, { css as css8 } from "styled-components";
+import styled11, { css as css7 } from "styled-components";
 import { useContext as useContext5 } from "react";
 import { maxWidth as maxWidth3 } from "@charcoal-ui/utils";
 import { jsx as jsx15 } from "react/jsx-runtime";
@@ -1027,27 +984,27 @@ function ModalHeader() {
   const modalCtx = useContext5(ModalContext);
   return /* @__PURE__ */ jsx15(ModalHeaderRoot, { $bottomSheet: modalCtx.bottomSheet, children: /* @__PURE__ */ jsx15(StyledModalTitle, {}) });
 }
-var ModalHeaderRoot = styled12.div.withConfig({
+var ModalHeaderRoot = styled11.div.withConfig({
   componentId: "ccl__sc-1k33wze-0"
 })(["height:64px;display:grid;align-content:center;justify-content:center;@media ", "{", "}"], ({
   theme
-}) => maxWidth3(theme.breakpoint.screen1), (p) => p.$bottomSheet !== false && css8(["height:48px;"]));
-var StyledModalTitle = styled12(ModalTitle).withConfig({
+}) => maxWidth3(theme.breakpoint.screen1), (p) => p.$bottomSheet !== false && css7(["height:48px;"]));
+var StyledModalTitle = styled11(ModalTitle).withConfig({
   componentId: "ccl__sc-1k33wze-1"
 })(["color:var(--charcoal-text1);font-size:16px;line-height:24px;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 ModalAlign = styled12.div.withConfig({
+var ModalAlign = styled11.div.withConfig({
   componentId: "ccl__sc-1k33wze-2"
 })(["padding-left:16px;padding-right:16px;"]);
-var ModalBody = styled12.div.withConfig({
+var ModalBody = styled11.div.withConfig({
   componentId: "ccl__sc-1k33wze-3"
 })(["padding-bottom:40px;"]);
-var ModalButtons = styled12.div.withConfig({
+var ModalButtons = styled11.div.withConfig({
   componentId: "ccl__sc-1k33wze-4"
 })(["display:grid;grid-auto-flow:row;grid-row-gap:8px;padding-top:16px;padding-left:16px;padding-right:16px;"]);
 
 // src/components/LoadingSpinner/index.tsx
 import { forwardRef as forwardRef14, useImperativeHandle, useRef as useRef5, memo as memo5 } from "react";
-import styled13, { keyframes } from "styled-components";
+import styled12, { keyframes } from "styled-components";
 import { jsx as jsx16 } from "react/jsx-runtime";
 var LoadingSpinner = forwardRef14(function LoadingSpinnerInner({
   size = 48,
@@ -1058,7 +1015,7 @@ var LoadingSpinner = forwardRef14(function LoadingSpinnerInner({
   return /* @__PURE__ */ jsx16(LoadingSpinnerRoot, { size, padding, transparent, className, ref, children: /* @__PURE__ */ jsx16(LoadingSpinnerIcon, {}) });
 });
 var LoadingSpinner_default = memo5(LoadingSpinner);
-var LoadingSpinnerRoot = styled13.div.attrs({
+var LoadingSpinnerRoot = styled12.div.attrs({
   role: "progressbar"
 }).withConfig({
   componentId: "ccl__sc-1id6yz4-0"
@@ -1066,7 +1023,7 @@ var LoadingSpinnerRoot = styled13.div.attrs({
   transparent
 }) => `var(--charcoal-${transparent ? "transparent" : "background1"})`);
 var scaleOut = keyframes(["from{transform:scale(0);opacity:1;}to{transform:scale(1);opacity:0;}"]);
-var Icon2 = styled13.div.attrs({
+var Icon2 = styled12.div.attrs({
   role: "presentation"
 }).withConfig({
   componentId: "ccl__sc-1id6yz4-1"
@@ -1089,8 +1046,8 @@ var LoadingSpinnerIcon = forwardRef14(function LoadingSpinnerIcon2({
 });
 
 // src/components/DropdownSelector/index.tsx
-import { useState as useState3, useRef as useRef9, useMemo as useMemo3 } from "react";
-import styled16, { css as css9 } from "styled-components";
+import { useState as useState3, useRef as useRef9, useMemo as useMemo5 } from "react";
+import styled15, { css as css8 } from "styled-components";
 import { disabledSelector as disabledSelector2 } from "@charcoal-ui/utils";
 
 // src/components/DropdownSelector/DropdownPopover.tsx
@@ -1099,7 +1056,7 @@ import { useEffect as useEffect7, useRef as useRef7 } from "react";
 // src/components/DropdownSelector/Popover/index.tsx
 import { useContext as useContext6, useRef as useRef6 } from "react";
 import { DismissButton, Overlay as Overlay2, usePopover } from "@react-aria/overlays";
-import styled14 from "styled-components";
+import styled13 from "styled-components";
 
 // src/components/DropdownSelector/Popover/usePreventScroll.tsx
 import { useEffect as useEffect6 } from "react";
@@ -1155,7 +1112,7 @@ function Popover(props) {
     ] })
   ] });
 }
-var DropdownPopoverDiv = styled14.div.withConfig({
+var DropdownPopoverDiv = styled13.div.withConfig({
   componentId: "ccl__sc-jwnoy6-0"
 })(["margin:4px 0;list-style:none;overflow:auto;max-height:inherit;background-color:var(--charcoal-background1);border:solid 1px var(--charcoal-border-default);border-radius:8px;padding-top:8px;padding-bottom:8px;"]);
 
@@ -1184,12 +1141,12 @@ function DropdownPopover({
 }
 
 // src/components/DropdownSelector/utils/findPreviewRecursive.tsx
-import * as React11 from "react";
+import * as React12 from "react";
 function findPreviewRecursive(children, value) {
-  const childArray = React11.Children.toArray(children);
+  const childArray = React12.Children.toArray(children);
   for (let i = 0; i < childArray.length; i++) {
     const child = childArray[i];
-    if (React11.isValidElement(child)) {
+    if (React12.isValidElement(child)) {
       if ("value" in child.props) {
         const childValue = child.props.value;
         if (childValue === value && "children" in child.props) {
@@ -1208,8 +1165,8 @@ function findPreviewRecursive(children, value) {
 }
 
 // src/components/DropdownSelector/MenuList/index.tsx
-import { useMemo as useMemo2, useRef as useRef8 } from "react";
-import styled15 from "styled-components";
+import { useMemo as useMemo4, useRef as useRef8 } from "react";
+import styled14 from "styled-components";
 
 // src/components/DropdownSelector/MenuList/MenuListContext.ts
 import { createContext as createContext6 } from "react";
@@ -1222,13 +1179,13 @@ var MenuListContext = createContext6({
 });
 
 // src/components/DropdownSelector/MenuList/internals/getValuesRecursive.tsx
-import * as React12 from "react";
+import * as React13 from "react";
 function getValuesRecursive(children) {
-  const childArray = React12.Children.toArray(children);
+  const childArray = React13.Children.toArray(children);
   const propsArray = [];
   for (let i = 0; i < childArray.length; i++) {
     const child = childArray[i];
-    if (React12.isValidElement(child)) {
+    if (React13.isValidElement(child)) {
       const props = child.props;
       if ("value" in props && typeof props.value === "string") {
         propsArray.push({
@@ -1248,7 +1205,7 @@ function getValuesRecursive(children) {
 import { jsx as jsx19 } from "react/jsx-runtime";
 function MenuList(props) {
   const root = useRef8(null);
-  const propsArray = useMemo2(() => getValuesRecursive(props.children), [props.children]);
+  const propsArray = useMemo4(() => getValuesRecursive(props.children), [props.children]);
   return /* @__PURE__ */ jsx19(StyledUl, { ref: root, children: /* @__PURE__ */ jsx19(MenuListContext.Provider, { value: {
     value: props.value ?? "",
     root,
@@ -1258,12 +1215,12 @@ function MenuList(props) {
     }
   }, children: props.children }) });
 }
-var StyledUl = styled15.ul.withConfig({
+var StyledUl = styled14.ul.withConfig({
   componentId: "ccl__sc-1y72v02-0"
 })(["padding:0;margin:0;"]);
 
 // src/components/DropdownSelector/index.tsx
-import { focusVisibleFocusRingCss as focusVisibleFocusRingCss6 } from "@charcoal-ui/styled";
+import { focusVisibleFocusRingCss as focusVisibleFocusRingCss5 } from "@charcoal-ui/styled";
 import { useVisuallyHidden as useVisuallyHidden3 } from "@react-aria/visually-hidden";
 import { jsx as jsx20, jsxs as jsxs10 } from "react/jsx-runtime";
 var defaultRequiredText = "*\u5FC5\u9808";
@@ -1271,7 +1228,7 @@ function DropdownSelector(props) {
   const triggerRef = useRef9(null);
   const [isOpen, setIsOpen] = useState3(false);
   const preview = findPreviewRecursive(props.children, props.value);
-  const isPlaceholder = useMemo3(() => props.placeholder !== void 0 && preview === void 0, [preview, props.placeholder]);
+  const isPlaceholder = useMemo5(() => props.placeholder !== void 0 && preview === void 0, [preview, props.placeholder]);
   const propsArray = getValuesRecursive(props.children);
   const {
     visuallyHiddenProps
@@ -1296,36 +1253,36 @@ function DropdownSelector(props) {
     props.assistiveText !== void 0 && /* @__PURE__ */ jsx20(AssertiveText, { invalid: props.invalid, children: props.assistiveText })
   ] });
 }
-var DropdownSelectorRoot = styled16.div.withConfig({
+var DropdownSelectorRoot = styled15.div.withConfig({
   componentId: "ccl__sc-1vnxmc8-0"
 })(["display:inline-block;width:100%;", "{cursor:default;opacity:0.32;}"], disabledSelector2);
-var DropdownFieldLabel = styled16(FieldLabel_default).withConfig({
+var DropdownFieldLabel = styled15(FieldLabel_default).withConfig({
   componentId: "ccl__sc-1vnxmc8-1"
 })(["width:100%;margin-bottom:8px;"]);
-var DropdownButton = styled16.button.withConfig({
+var DropdownButton = styled15.button.withConfig({
   componentId: "ccl__sc-1vnxmc8-2"
-})(["display:flex;justify-content:space-between;align-items:center;height:40px;width:100%;box-sizing:border-box;border:none;cursor:pointer;gap:4px;", "{cursor:default;}padding-right:8px;padding-left:8px;background-color:var(--charcoal-surface3);border-radius:4px;transition:0.2s box-shadow,0.2s background-color;&:not(:disabled):not([aria-disabled]),&[aria-disabled='false']{", " ", "}", ""], disabledSelector2, focusVisibleFocusRingCss6, ({
+})(["display:flex;justify-content:space-between;align-items:center;height:40px;width:100%;box-sizing:border-box;border:none;cursor:pointer;gap:4px;", "{cursor:default;}padding-right:8px;padding-left:8px;background-color:var(--charcoal-surface3);border-radius:4px;transition:0.2s box-shadow,0.2s background-color;&:not(:disabled):not([aria-disabled]),&[aria-disabled='false']{", " ", "}", ""], disabledSelector2, focusVisibleFocusRingCss5, ({
   $active
-}) => $active === true ? css9(["background-color:var(--charcoal-surface3-press);"]) : css9(["&:hover{background-color:var(--charcoal-surface3-hover);}&:active{background-color:var(--charcoal-surface3-press);}"]), ({
+}) => $active === true ? css8(["background-color:var(--charcoal-surface3-press);"]) : css8(["&:hover{background-color:var(--charcoal-surface3-hover);}&:active{background-color:var(--charcoal-surface3-press);}"]), ({
   invalid
-}) => invalid === true && css9(["&:not(:disabled):not([aria-disabled]),&[aria-disabled='false']{box-shadow:0 0 0 4px rgba(255,43,0,0.32);}"]));
-var DropdownButtonText = styled16.span.withConfig({
+}) => invalid === true && css8(["&:not(:disabled):not([aria-disabled]),&[aria-disabled='false']{box-shadow:0 0 0 4px rgba(255,43,0,0.32);}"]));
+var DropdownButtonText = styled15.span.withConfig({
   componentId: "ccl__sc-1vnxmc8-3"
 })(["text-align:left;font-size:14px;line-height:22px;display:flow-root;color:var(--charcoal-", ");overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"], (p) => p.$isText3 ? "text3" : "text2");
-var DropdownButtonIcon = styled16(Icon_default).withConfig({
+var DropdownButtonIcon = styled15(Icon_default).withConfig({
   componentId: "ccl__sc-1vnxmc8-4"
 })(["color:var(--charcoal-text2);"]);
-var AssertiveText = styled16.div.withConfig({
+var AssertiveText = styled15.div.withConfig({
   componentId: "ccl__sc-1vnxmc8-5"
 })(["margin-top:8px;font-size:14px;color:var(--charcoal-text2);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;}", ""], ({
   invalid
-}) => invalid === true && css9(["color:var(--charcoal-assertive);"]));
+}) => invalid === true && css8(["color:var(--charcoal-assertive);"]));
 
 // src/components/DropdownSelector/DropdownMenuItem.tsx
-import styled18 from "styled-components";
+import styled17 from "styled-components";
 
 // src/components/DropdownSelector/ListItem/index.tsx
-import styled17 from "styled-components";
+import styled16 from "styled-components";
 import { jsx as jsx21 } from "react/jsx-runtime";
 function ListItem(props) {
   const {
@@ -1334,10 +1291,10 @@ function ListItem(props) {
   } = props;
   return /* @__PURE__ */ jsx21(StyledLi, { role: "option", children: /* @__PURE__ */ jsx21(ItemDiv, { ...rest, children: props.children }) });
 }
-var StyledLi = styled17.li.withConfig({
+var StyledLi = styled16.li.withConfig({
   componentId: "ccl__sc-p1vs75-0"
 })(["list-style:none;"]);
-var ItemDiv = styled17.div.withConfig({
+var ItemDiv = styled16.div.withConfig({
   componentId: "ccl__sc-p1vs75-1"
 })(["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);}}"]);
 
@@ -1447,17 +1404,17 @@ function DropdownMenuItem(props) {
     /* @__PURE__ */ jsx23(StyledSpan, { isSelected, children: props.children })
   ] });
 }
-var StyledSpan = styled18.span.withConfig({
+var StyledSpan = styled17.span.withConfig({
   componentId: "ccl__sc-108wg2j-0"
 })(["font-size:14px;line-height:22px;color:var(--charcoal-text2);padding:9px 0;display:flex;align-items:center;width:100%;margin-left:", "px;"], ({
   isSelected
 }) => isSelected === true ? 0 : 20);
-var Text2ColorIcon = styled18(Icon_default).withConfig({
+var Text2ColorIcon = styled17(Icon_default).withConfig({
   componentId: "ccl__sc-108wg2j-1"
 })(["color:var(--charcoal-text2);padding-right:4px;"]);
 
 // src/components/DropdownSelector/MenuItemGroup/index.tsx
-import styled19 from "styled-components";
+import styled18 from "styled-components";
 import { jsx as jsx24, jsxs as jsxs12 } from "react/jsx-runtime";
 function MenuItemGroup(props) {
   return /* @__PURE__ */ jsxs12(StyledLi2, { role: "presentation", children: [
@@ -1465,18 +1422,18 @@ function MenuItemGroup(props) {
     /* @__PURE__ */ jsx24(StyledUl2, { role: "group", children: props.children })
   ] });
 }
-var TextSpan = styled19.span.withConfig({
+var TextSpan = styled18.span.withConfig({
   componentId: "ccl__sc-1ubjfz7-0"
 })(["display:block;color:var(--charcoal-text3);font-size:12px;font-weight:bold;padding:12px 0 8px 16px;"]);
-var StyledUl2 = styled19.ul.withConfig({
+var StyledUl2 = styled18.ul.withConfig({
   componentId: "ccl__sc-1ubjfz7-1"
 })(["padding-left:0;margin:0;box-sizing:border-box;list-style:none;overflow:hidden;"]);
-var StyledLi2 = styled19.li.withConfig({
+var StyledLi2 = styled18.li.withConfig({
   componentId: "ccl__sc-1ubjfz7-2"
 })(["display:block;"]);
 
 // src/components/SegmentedControl/index.tsx
-import { forwardRef as forwardRef15, memo as memo6, useMemo as useMemo4, useRef as useRef10 } from "react";
+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";
@@ -1704,7 +1661,7 @@ function $a54cdc5c1942b639$export$bca9d026f8e704eb(props) {
 
 // src/components/SegmentedControl/index.tsx
 import { useRadio, useRadioGroup } from "@react-aria/radio";
-import styled20, { css as css10 } from "styled-components";
+import styled19, { css as css9 } from "styled-components";
 
 // src/components/SegmentedControl/RadioGroupContext.tsx
 import { createContext as createContext7, useContext as useContext9 } from "react";
@@ -1726,7 +1683,7 @@ var useRadioContext = () => {
 // src/components/SegmentedControl/index.tsx
 import { jsx as jsx26, jsxs as jsxs13 } from "react/jsx-runtime";
 var SegmentedControl = forwardRef15(function SegmentedControlInner(props, ref) {
-  const ariaRadioGroupProps = useMemo4(() => ({
+  const ariaRadioGroupProps = useMemo6(() => ({
     ...props,
     isDisabled: props.disabled,
     isReadOnly: props.readonly,
@@ -1737,7 +1694,7 @@ var SegmentedControl = forwardRef15(function SegmentedControlInner(props, ref) {
   const {
     radioGroupProps
   } = useRadioGroup(ariaRadioGroupProps, state);
-  const segmentedControlItems = useMemo4(() => {
+  const segmentedControlItems = useMemo6(() => {
     return props.data.map((d) => typeof d === "string" ? {
       value: d,
       label: d
@@ -1749,7 +1706,7 @@ var SegmentedControl_default = memo6(SegmentedControl);
 var Segmented = (props) => {
   const state = useRadioContext();
   const ref = useRef10(null);
-  const ariaRadioProps = useMemo4(() => ({
+  const ariaRadioProps = useMemo6(() => ({
     value: props.value,
     isDisabled: props.disabled,
     children: props.children
@@ -1764,37 +1721,37 @@ var Segmented = (props) => {
     /* @__PURE__ */ jsx26(RadioLabel2, { children: /* @__PURE__ */ jsx26(SegmentedLabelInner, { children: props.children }) })
   ] });
 };
-var SegmentedControlRoot = styled20.div.withConfig({
+var SegmentedControlRoot = styled19.div.withConfig({
   componentId: "ccl__sc-1xmkkqt-0"
 })(["display:inline-flex;align-items:center;background-color:var(--charcoal-surface3);border-radius:16px;"]);
-var SegmentedRoot = styled20.label.withConfig({
+var SegmentedRoot = styled19.label.withConfig({
   componentId: "ccl__sc-1xmkkqt-1"
 })(["position:relative;display:flex;align-items:center;cursor:pointer;height:32px;padding-right:16px;padding-left:16px;border-radius:16px;&:disabled,&[aria-disabled]:not([aria-disabled='false']){cursor:default;opacity:0.32;}color:var(--charcoal-text2);", ""], ({
   checked = false
-}) => checked && css10(["background-color:var(--charcoal-brand);color:var(--charcoal-text5);"]));
-var SegmentedInput = styled20.input.withConfig({
+}) => checked && css9(["background-color:var(--charcoal-brand);color:var(--charcoal-text5);"]));
+var SegmentedInput = styled19.input.withConfig({
   componentId: "ccl__sc-1xmkkqt-2"
 })(["position:absolute;height:0px;width:0px;padding:0;margin:0;appearance:none;box-sizing:border-box;overflow:hidden;white-space:nowrap;opacity:0;"]);
-var RadioLabel2 = styled20.div.withConfig({
+var RadioLabel2 = styled19.div.withConfig({
   componentId: "ccl__sc-1xmkkqt-3"
 })(["background:transparent;display:flex;align-items:center;height:22px;"]);
-var SegmentedLabelInner = styled20.div.withConfig({
+var SegmentedLabelInner = styled19.div.withConfig({
   componentId: "ccl__sc-1xmkkqt-4"
 })(["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 useMemo5 } from "react";
-import styled21, { css as css11 } from "styled-components";
+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 focusVisibleFocusRingCss7 } from "@charcoal-ui/styled";
+import { focusVisibleFocusRingCss as focusVisibleFocusRingCss6 } from "@charcoal-ui/styled";
 import { jsx as jsx27, jsxs as jsxs14 } from "react/jsx-runtime";
 var Checkbox = forwardRef16(function CheckboxInner({
   invalid = false,
   ...props
 }, ref) {
-  const ariaCheckboxProps = useMemo5(() => ({
+  const ariaCheckboxProps = useMemo7(() => ({
     ...props,
     isInValid: invalid,
     isSelected: props.checked,
@@ -1818,32 +1775,32 @@ var Checkbox = forwardRef16(function CheckboxInner({
   ] });
 });
 var Checkbox_default = memo7(Checkbox);
-var hiddenCss = css11(["visibility:hidden;"]);
-var InputRoot = styled21.label.withConfig({
+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 = styled21.div.withConfig({
+var CheckboxRoot = styled20.div.withConfig({
   componentId: "ccl__sc-wrdmwj-1"
 })(["position:relative;"]);
-var CheckboxInput = styled21.input.withConfig({
+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);}}"], focusVisibleFocusRingCss7);
-var CheckboxInputOverlay = styled21.div.withConfig({
+})(["&[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 = styled21.div.withConfig({
+var InputLabel = styled20.div.withConfig({
   componentId: "ccl__sc-wrdmwj-4"
 })(["color:var(--charcoal-text2);font-size:14px;line-height:20px;"]);
 
 // src/components/TagItem/index.tsx
-import { forwardRef as forwardRef17, memo as memo8, useMemo as useMemo6 } from "react";
+import { forwardRef as forwardRef17, memo as memo8, useMemo as useMemo8 } from "react";
 import { useObjectRef as useObjectRef4 } from "@react-aria/utils";
-import styled22, { css as css12 } from "styled-components";
+import styled21, { css as css11 } from "styled-components";
 import { px as px2 } from "@charcoal-ui/utils";
 import { useButton } from "@react-aria/button";
-import { focusVisibleFocusRingCss as focusVisibleFocusRingCss8 } from "@charcoal-ui/styled";
+import { focusVisibleFocusRingCss as focusVisibleFocusRingCss7 } from "@charcoal-ui/styled";
 import { jsx as jsx28, jsxs as jsxs15 } from "react/jsx-runtime";
 var sizeMap = {
   S: 32,
@@ -1861,7 +1818,7 @@ var TagItem = forwardRef17(function TagItemInner({
   ...props
 }, _ref) {
   const ref = useObjectRef4(_ref);
-  const ariaButtonProps = useMemo6(() => ({
+  const ariaButtonProps = useMemo8(() => ({
     elementType: "a",
     isDisabled: disabled,
     ...props
@@ -1885,7 +1842,7 @@ var TagItem_default = memo8(TagItem);
 var horizontalPadding = ({
   left,
   right
-}) => css12(["padding-right:", ";padding-left:", ";"], px2(right), px2(left));
+}) => css11(["padding-right:", ";padding-left:", ";"], px2(right), px2(left));
 var tagItemRootSize = (size) => {
   switch (size) {
     case "M":
@@ -1904,7 +1861,7 @@ var activeTagItemRoot = horizontalPadding({
   left: 16,
   right: 8
 });
-var TagItemRoot = styled22.a.withConfig({
+var TagItemRoot = styled21.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
@@ -1915,30 +1872,30 @@ var TagItemRoot = styled22.a.withConfig({
   status
 }) => status === "active" && activeTagItemRoot, ({
   status
-}) => status === "inactive" ? "var(--charcoal-text2)" : "var(--charcoal-text5)", focusVisibleFocusRingCss8);
-var Background = styled22.div.withConfig({
+}) => status === "inactive" ? "var(--charcoal-text2)" : "var(--charcoal-text5)", focusVisibleFocusRingCss7);
+var Background = styled21.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" && css12(["background-color:var(--charcoal-surface3);"]), ({
+}) => status === "inactive" && css11(["background-color:var(--charcoal-surface3);"]), ({
   bgImage
-}) => bgImage !== void 0 && css12(["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 = styled22.div.withConfig({
+}) => 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({
   componentId: "ccl__sc-11j9pu2-2"
 })(["display:inline-flex;gap:8px;align-items:center;z-index:2;"]);
-var labelCSS = css12(["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 = css12(["display:flex;align-items:center;flex-direction:column;font-size:10px;"]);
-var LabelWrapper = styled22.div.withConfig({
+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({
   componentId: "ccl__sc-11j9pu2-3"
 })(["", ""], ({
   isTranslate
 }) => isTranslate ?? false ? translateLabelCSS : labelCSS);
-var Label3 = styled22.span.withConfig({
+var Label3 = styled21.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 = styled22.div.withConfig({
+var TranslatedLabel = styled21.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 {