@charcoal-ui/react 3.5.0 → 3.7.0

package/dist/index.cjs.js

@@ -110,7 +110,6 @@ function CharcoalProvider({
 
 // src/components/Button/index.tsx
 var import_react2 = require("react");
-var import_styled_components4 = __toESM(require("styled-components"));
 
 // src/_lib/index.ts
 function unreachable(value) {
@@ -134,14 +133,48 @@ function countCodePointsInString(string) {
   return Array.from(string).length;
 }
 
-// src/styled.ts
-var import_styled_components2 = __toESM(require("styled-components"));
-var import_styled2 = require("@charcoal-ui/styled");
-var theme = (0, import_styled2.createTheme)(import_styled_components2.default);
+// 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/components/Button/StyledButton.tsx
+var import_styled_components3 = __toESM(require("styled-components"));
 
 // src/components/Clickable/index.tsx
 var React2 = __toESM(require("react"));
-var import_styled_components3 = __toESM(require("styled-components"));
+var import_styled_components2 = __toESM(require("styled-components"));
 var import_utils = require("@charcoal-ui/utils");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var Clickable = React2.forwardRef(
@@ -167,7 +200,7 @@ var Clickable = React2.forwardRef(
   }
 );
 var Clickable_default = Clickable;
-var StyledClickableDiv = import_styled_components3.default.div`
+var StyledClickableDiv = import_styled_components2.default.div`
   cursor: pointer;
 
   ${import_utils.disabledSelector} {
@@ -184,6 +217,7 @@ var StyledClickableDiv = import_styled_components3.default.div`
   text-rendering: inherit;
   letter-spacing: inherit;
   word-spacing: inherit;
+  text-decoration: none;
 
   &:focus {
     outline: none;
@@ -208,6 +242,59 @@ var StyledClickableDiv = import_styled_components3.default.div`
   }
 `;
 
+// src/components/Button/StyledButton.tsx
+var horizontalPaddingSmall = import_styled_components3.css`
+  padding-right: 16px;
+  padding-left: 16px;
+`;
+var horizontalPaddingMedium = import_styled_components3.css`
+  padding-right: 24px;
+  padding-left: 24px;
+`;
+var StyledButton = (0, import_styled_components3.default)(Clickable_default)`
+  width: ${(p) => p.$fullWidth ? "stretch" : "min-content"};
+  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;
+
+  ${(p) => p.$size === "M" ? horizontalPaddingMedium : horizontalPaddingSmall}
+  color: var(--charcoal-${(p) => p.$color});
+  background-color: var(--charcoal-${(p) => p.$background});
+  transition: 0.2s color, 0.2s background-color, 0.2s box-shadow;
+
+  &:not(:disabled):not([aria-disabled]),
+  &[aria-disabled='false'] {
+    &:active,
+    &:focus,
+    &:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
+    }
+
+    &:hover {
+      color: var(--charcoal-${(p) => p.$color}-hover);
+      background-color: var(--charcoal-${(p) => p.$background}-hover);
+    }
+    &:active {
+      color: var(--charcoal-${(p) => p.$color}-press);
+      background-color: var(--charcoal-${(p) => p.$background}-press);
+    }
+  }
+
+  &:disabled,
+  &[aria-disabled]:not([aria-disabled='false']) {
+    opacity: 0.32;
+  }
+  height: ${(p) => p.$size === "M" ? 40 : 32}px;
+`;
+
 // src/components/Button/index.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var Button = (0, import_react2.forwardRef)(function Button2({
@@ -223,7 +310,8 @@ var Button = (0, import_react2.forwardRef)(function Button2({
     {
       ...rest,
       disabled,
-      $variant: variant,
+      $background: variantToBackground(variant),
+      $color: variantToFont(variant),
       $size: size,
       $fullWidth: fixed,
       ref,
@@ -232,120 +320,86 @@ var Button = (0, import_react2.forwardRef)(function Button2({
   );
 });
 var Button_default = Button;
-var StyledButton = (0, import_styled_components4.default)(Clickable_default)`
-  width: ${(p) => p.$fullWidth ? "stretch" : "min-content"};
-  display: inline-grid;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  user-select: none;
-  white-space: nowrap;
-
-  ${(p) => theme((o) => [
-  o.font[variantToFont(p.$variant)].hover.press,
-  o.bg[variantToBackground(p.$variant)].hover.press,
-  o.typography(14).bold.preserveHalfLeading,
-  o.padding.horizontal(p.$size === "M" ? 24 : 16),
-  o.disabled,
-  o.borderRadius("oval"),
-  o.outline.default.focus
-])}
-
-  /* よく考えたらheight=32って定義が存在しないな... */
-  height: ${(p) => p.$size === "M" ? 40 : 32}px;
-`;
-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);
-  }
-}
-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/IconButton/index.tsx
 var import_react3 = require("react");
-var import_styled_components5 = __toESM(require("styled-components"));
+var import_styled_components4 = __toESM(require("styled-components"));
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var IconButton = (0, import_react3.forwardRef)(
   function IconButtonInner({ variant = "Default", size = "M", icon, ...rest }, ref) {
     validateIconSize(size, icon);
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(StyledIconButton, { ...rest, ref, variant, size, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("pixiv-icon", { name: icon }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(StyledIconButton, { ...rest, ref, $size: size, $variant: variant, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("pixiv-icon", { name: icon }) });
   }
 );
 var IconButton_default = IconButton;
-var StyledIconButton = (0, import_styled_components5.default)(Clickable_default).attrs(styledProps)`
+var StyledIconButton = (0, import_styled_components4.default)(Clickable_default).attrs(styledProps)`
   user-select: none;
 
-  width: ${(p) => p.width}px;
-  height: ${(p) => p.height}px;
+  width: ${(p) => p.$width}px;
+  height: ${(p) => p.$height}px;
   display: flex;
   align-items: center;
   justify-content: center;
+  color: var(${({ $font }) => `--charcoal-${$font}`});
+  background-color: var(${({ $background }) => `--charcoal-${$background}`});
+  border-radius: 999999px;
+  transition: 0.2s background-color, 0.2s box-shadow;
+
+  &:not(:disabled):not([aria-disabled]),
+  &[aria-disabled='false'] {
+    &:hover {
+      background-color: var(
+        ${({ $background }) => `--charcoal-${$background}-hover`}
+      );
+    }
+    &:active {
+      background-color: var(
+        ${({ $background }) => `--charcoal-${$background}-press`}
+      );
+    }
+    &:focus,
+    &:active,
+    &:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
+    }
+  }
 
-  ${({ font, background }) => theme((o) => [
-  o.font[font],
-  o.bg[background].hover.press,
-  o.disabled,
-  o.borderRadius("oval"),
-  o.outline.default.focus
-])}
+  &:disabled,
+  &[aria-disabled]:not([aria-disabled='false']) {
+    opacity: 0.32;
+  }
 `;
-function styledProps(props) {
+function styledProps({ $size, $variant }) {
   return {
-    ...props,
-    ...variantToProps(props.variant),
-    ...sizeToProps(props.size)
+    ...variantToProps($variant),
+    ...sizeToProps($size)
   };
 }
 function variantToProps(variant) {
   switch (variant) {
     case "Default":
-      return { font: "text3", background: "transparent" };
+      return { $font: "text3", $background: "transparent" };
     case "Overlay":
-      return { font: "text5", background: "surface4" };
+      return { $font: "text5", $background: "surface4" };
   }
 }
 function sizeToProps(size) {
   switch (size) {
     case "XS":
       return {
-        width: 20,
-        height: 20
+        $width: 20,
+        $height: 20
       };
     case "S":
       return {
-        width: 32,
-        height: 32
+        $width: 32,
+        $height: 32
       };
     case "M":
       return {
-        width: 40,
-        height: 40
+        $width: 40,
+        $height: 40
       };
   }
 }
@@ -375,9 +429,8 @@ function validateIconSize(size, icon) {
 // src/components/Radio/index.tsx
 var import_react4 = require("react");
 var React3 = __toESM(require("react"));
-var import_styled_components6 = __toESM(require("styled-components"));
+var import_styled_components5 = __toESM(require("styled-components"));
 var import_warning = __toESM(require("warning"));
-var import_utils2 = require("@charcoal-ui/utils");
 var import_jsx_runtime6 = require("react/jsx-runtime");
 var Radio = (0, import_react4.forwardRef)(function RadioInner({ value, disabled = false, children, className }, ref) {
   const {
@@ -418,16 +471,19 @@ var Radio = (0, import_react4.forwardRef)(function RadioInner({ value, disabled
   ] });
 });
 var Radio_default = (0, import_react4.memo)(Radio);
-var RadioRoot = import_styled_components6.default.label`
+var RadioRoot = import_styled_components5.default.label`
   display: grid;
   grid-template-columns: auto 1fr;
-  grid-gap: ${({ theme: theme3 }) => (0, import_utils2.px)(theme3.spacing[4])};
+  grid-gap: 4px;
   align-items: center;
   cursor: pointer;
 
-  ${theme((o) => [o.disabled])}
+  &:disabled,
+  &[aria-disabled]:not([aria-disabled='false']) {
+    opacity: 0.32;
+  }
 `;
-var RadioInput = import_styled_components6.default.input.attrs({ type: "radio" })`
+var RadioInput = import_styled_components5.default.input.attrs({ type: "radio" })`
   /** Make prior to browser default style */
   &[type='radio'] {
     appearance: none;
@@ -440,46 +496,92 @@ var RadioInput = import_styled_components6.default.input.attrs({ type: "radio" }
     width: 20px;
     height: 20px;
     cursor: pointer;
+    border-radius: 999999px;
+    background-color: var(--charcoal-surface1);
+    transition: 0.2s background-color, 0.2s box-shadow;
+
+    &:not(:disabled):not([aria-disabled]),
+    &[aria-disabled='false'] {
+      ${({ invalid = false }) => invalid && import_styled_components5.css`
+          box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
+        `}
 
-    ${({ invalid = false }) => theme((o) => [
-  o.borderRadius("oval"),
-  o.bg.surface1.hover.press,
-  invalid && o.outline.assertive
-])};
+      &:hover {
+        background-color: var(--charcoal-surface1-hover);
+      }
+      &:active {
+        background-color: var(--charcoal-surface1-press);
+      }
+      &:focus,
+      &:active,
+      &:focus-visible {
+        outline: none;
+        box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
+      }
+    }
 
     &:not(:checked) {
       border-width: 2px;
       border-style: solid;
-      border-color: ${({ theme: theme3 }) => theme3.color.text3};
+      border-color: var(--charcoal-text3);
     }
 
     &:checked {
-      ${theme((o) => o.bg.brand.hover.press)}
-
+      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;
+      }
 
-        ${theme((o) => [o.bg.text5.hover.press, o.borderRadius("oval")])}
+      &: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);
+          }
+        }
       }
     }
-
-    ${theme((o) => o.outline.default.focus)}
-
-    /* FIXME: o.outline.default.focus の transition に o.bg.brand の transition が打ち消されてしまう */
-    transition: all 0.2s !important;
   }
 `;
-var RadioLabel = import_styled_components6.default.div`
-  ${theme((o) => [o.typography(14), o.font.text2])}
+var RadioLabel = import_styled_components5.default.div`
+  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 = import_styled_components6.default.div`
+var StyledRadioGroup = import_styled_components5.default.div`
   display: grid;
   grid-template-columns: 1fr;
-  grid-gap: ${({ theme: theme3 }) => (0, import_utils2.px)(theme3.spacing[8])};
+  grid-gap: 8px;
 `;
 var RadioGroupContext = React3.createContext({
   name: void 0,
@@ -538,9 +640,9 @@ function RadioGroup({
 
 // src/components/MultiSelect/index.tsx
 var import_react6 = require("react");
-var import_styled_components7 = __toESM(require("styled-components"));
+var import_styled_components6 = __toESM(require("styled-components"));
 var import_warning2 = __toESM(require("warning"));
-var import_utils3 = require("@charcoal-ui/utils");
+var import_utils2 = require("@charcoal-ui/utils");
 
 // src/components/MultiSelect/context.ts
 var import_react5 = require("react");
@@ -624,44 +726,96 @@ var MultiSelect = (0, import_react6.forwardRef)(
   }
 );
 var MultiSelect_default = (0, import_react6.memo)(MultiSelect);
-var MultiSelectRoot = import_styled_components7.default.label`
+var MultiSelectRoot = import_styled_components6.default.label`
   display: grid;
   grid-template-columns: auto 1fr;
   align-items: center;
   position: relative;
   cursor: pointer;
-  ${import_utils3.disabledSelector} {
+  gap: ${({ theme }) => (0, import_utils2.px)(theme.spacing[4])};
+  &:disabled,
+  &[aria-disabled]:not([aria-disabled='false']) {
+    opacity: 0.32;
     cursor: default;
   }
-  gap: ${({ theme: theme3 }) => (0, import_utils3.px)(theme3.spacing[4])};
-  ${theme((o) => o.disabled)}
 `;
-var MultiSelectLabel = import_styled_components7.default.div`
+var MultiSelectLabel = import_styled_components6.default.div`
   display: flex;
   align-items: center;
-  ${theme((o) => [o.typography(14), o.font.text2])}
+  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 = import_styled_components7.default.input.attrs({ type: "checkbox" })`
+var MultiSelectInput = import_styled_components6.default.input.attrs({ type: "checkbox" })`
   &[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 {
-      ${theme((o) => o.bg.brand.hover.press)}
+      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);
+        }
+      }
     }
 
-    ${({ invalid, overlay }) => theme((o) => [
-  o.bg.text3.hover.press,
-  o.borderRadius("oval"),
-  invalid && !overlay && o.outline.assertive,
-  overlay && o.bg.surface4
-])};
+    &: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);
+      }
+    }
+
+    ${({ invalid, overlay }) => invalid && !overlay && import_styled_components6.css`
+        &:not(:disabled):not([aria-disabled]),
+        &[aria-disabled='false'] {
+          box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
+        }
+      `}
+    ${({ overlay }) => overlay && import_styled_components6.css`
+        background-color: var(--charcoal-surface4);
+      `}
   }
 `;
-var MultiSelectInputOverlay = import_styled_components7.default.div`
+var MultiSelectInputOverlay = import_styled_components6.default.div`
   position: absolute;
   top: -2px;
   left: -2px;
@@ -669,17 +823,20 @@ var MultiSelectInputOverlay = import_styled_components7.default.div`
   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 && import_styled_components6.css`
+      &:not(:disabled):not([aria-disabled]),
+      &[aria-disabled='false'] {
+        box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
+      }
+    `}
 
-  ${({ invalid, overlay }) => theme((o) => [
-  o.width.px(24),
-  o.height.px(24),
-  o.borderRadius("oval"),
-  o.font.text5,
-  invalid && overlay && o.outline.assertive
-])}
-
-  ${({ overlay }) => overlay && import_styled_components7.css`
-      border-color: ${({ theme: theme3 }) => theme3.color.text5};
+  ${({ overlay }) => overlay && import_styled_components6.css`
+      border-color: var(--charcoal-text5);
       border-width: 2px;
       border-style: solid;
     `}
@@ -730,9 +887,8 @@ function MultiSelectGroup({
 var import_switch = require("@react-aria/switch");
 var import_react7 = require("react");
 var import_react_stately = require("react-stately");
-var import_styled_components8 = __toESM(require("styled-components"));
-var import_utils4 = require("@charcoal-ui/utils");
-var import_utils5 = require("@react-aria/utils");
+var import_styled_components7 = __toESM(require("styled-components"));
+var import_utils3 = require("@react-aria/utils");
 var import_jsx_runtime8 = require("react/jsx-runtime");
 var SwitchCheckbox = (0, import_react7.forwardRef)(
   function SwitchCheckboxInner(props, external) {
@@ -747,7 +903,7 @@ var SwitchCheckbox = (0, import_react7.forwardRef)(
       [props]
     );
     const state = (0, import_react_stately.useToggleState)(ariaSwitchProps);
-    const ref = (0, import_utils5.useObjectRef)(external);
+    const ref = (0, import_utils3.useObjectRef)(external);
     const {
       inputProps: { className: _className, type: _type, ...rest }
     } = (0, import_switch.useSwitch)(ariaSwitchProps, state, ref);
@@ -758,33 +914,30 @@ var SwitchCheckbox = (0, import_react7.forwardRef)(
   }
 );
 var Switch_default = (0, import_react7.memo)(SwitchCheckbox);
-var Label = import_styled_components8.default.label`
+var Label = import_styled_components7.default.label`
   display: inline-grid;
   grid-template-columns: auto 1fr;
   align-items: center;
   cursor: pointer;
   outline: 0;
 
-  ${theme((o) => o.disabled)}
+  &:disabled,
+  &[aria-disabled]:not([aria-disabled='false']) {
+    opacity: 0.32;
+    cursor: default;
+  }
 
   :active > input {
     box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
   }
-
-  ${import_utils4.disabledSelector} {
-    cursor: default;
-  }
 `;
-var LabelInner = import_styled_components8.default.div`
-  ${theme((o) => [
-  o.typography(14).preserveHalfLeading,
-  o.font.text2,
-  o.margin.left(4)
-])}
+var LabelInner = import_styled_components7.default.div`
+  font-size: 14px;
+  line-height: 22px;
+  color: var(--charcoal-text2);
+  margin-left: 4px;
 `;
-var SwitchInput = import_styled_components8.default.input.attrs({
-  type: "checkbox"
-})`
+var SwitchInput = import_styled_components7.default.input.attrs({ type: "checkbox" })`
   appearance: none;
   display: inline-flex;
   position: relative;
@@ -851,12 +1004,11 @@ var import_textfield = require("@react-aria/textfield");
 var import_visually_hidden = require("@react-aria/visually-hidden");
 var import_react9 = require("react");
 var React5 = __toESM(require("react"));
-var import_styled_components10 = __toESM(require("styled-components"));
+var import_styled_components9 = __toESM(require("styled-components"));
 
 // src/components/FieldLabel/index.tsx
 var React4 = __toESM(require("react"));
-var import_styled_components9 = __toESM(require("styled-components"));
-var import_styled8 = require("@charcoal-ui/styled");
+var import_styled_components8 = __toESM(require("styled-components"));
 var import_jsx_runtime9 = require("react/jsx-runtime");
 var FieldLabel = React4.forwardRef(
   function FieldLabel2({
@@ -876,30 +1028,97 @@ var FieldLabel = React4.forwardRef(
   }
 );
 var FieldLabel_default = FieldLabel;
-var theme2 = (0, import_styled8.createTheme)(import_styled_components9.default);
-var Label2 = import_styled_components9.default.label`
-  ${theme2((o) => [o.typography(14).bold, o.font.text1])}
+var Label2 = import_styled_components8.default.label`
+  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 = import_styled_components9.default.span`
-  ${theme2((o) => [o.typography(14), o.font.text2])}
+var RequiredText = import_styled_components8.default.span`
+  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 = import_styled_components9.default.div`
-  ${theme2((o) => [
-  o.typography(14),
-  o.font.text3.hover.press,
-  o.outline.default.focus
-])}
+var SubLabelClickable = import_styled_components8.default.div`
+  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 = import_styled_components9.default.div`
+var FieldLabelWrapper = import_styled_components8.default.div`
   display: inline-flex;
   align-items: center;
 
   > ${RequiredText} {
-    ${theme2((o) => o.margin.left(4))}
+    margin-left: 4px;
   }
 
   > ${SubLabelClickable} {
-    ${theme2((o) => o.margin.left("auto"))}
+    margin-left: auto;
   }
 `;
 
@@ -1027,16 +1246,16 @@ var TextField = React5.forwardRef(
   }
 );
 var TextField_default = TextField;
-var TextFieldRoot = import_styled_components10.default.div`
+var TextFieldRoot = import_styled_components9.default.div`
   display: flex;
   flex-direction: column;
 
   ${(p) => p.isDisabled && { opacity: p.theme.elementEffect.disabled.opacity }}
 `;
-var TextFieldLabel = (0, import_styled_components10.default)(FieldLabel_default)`
+var TextFieldLabel = (0, import_styled_components9.default)(FieldLabel_default)`
   margin-bottom: 8px;
 `;
-var StyledInputContainer = import_styled_components10.default.div`
+var StyledInputContainer = import_styled_components9.default.div`
   display: grid;
   grid-template-columns: ${(p) => [p.hasPrefix && "auto", "1fr", p.hasSuffix && "auto"].filter(Boolean).join(" ")};
   height: 40px;
@@ -1067,21 +1286,20 @@ var StyledInputContainer = import_styled_components10.default.div`
       ${(p) => p.invalid ? `rgba(255,43,0,0.32)` : `rgba(0, 150, 250, 0.32);`};
   }
 
-  ${(p) => p.invalid && import_styled_components10.css`
+  ${(p) => p.invalid && import_styled_components9.css`
       box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
     `}
 `;
-var PrefixContainer = import_styled_components10.default.div`
+var PrefixContainer = import_styled_components9.default.div`
   display: flex;
-  padding-left: 8px;
   align-items: center;
 `;
-var SuffixContainer = import_styled_components10.default.span`
+var SuffixContainer = import_styled_components9.default.span`
   display: flex;
   align-items: center;
   gap: 8px;
 `;
-var StyledInput = import_styled_components10.default.input`
+var StyledInput = import_styled_components9.default.input`
   border: none;
   box-sizing: border-box;
   outline: none;
@@ -1107,12 +1325,12 @@ var StyledInput = import_styled_components10.default.input`
     color: var(--charcoal-text3);
   }
 `;
-var SingleLineCounter = import_styled_components10.default.span`
+var SingleLineCounter = import_styled_components9.default.span`
   line-height: 22px;
   font-size: 14px;
   color: var(--charcoal-text3);
 `;
-var AssistiveText = import_styled_components10.default.p`
+var AssistiveText = import_styled_components9.default.p`
   font-size: 14px;
   line-height: 22px;
   margin-top: 4px;
@@ -1124,7 +1342,7 @@ var AssistiveText = import_styled_components10.default.p`
 var import_textfield2 = require("@react-aria/textfield");
 var import_visually_hidden2 = require("@react-aria/visually-hidden");
 var import_react10 = require("react");
-var import_styled_components11 = __toESM(require("styled-components"));
+var import_styled_components10 = __toESM(require("styled-components"));
 var import_jsx_runtime11 = require("react/jsx-runtime");
 var TextArea = (0, import_react10.forwardRef)(
   function TextAreaInner({ onChange, ...props }, forwardRef18) {
@@ -1243,13 +1461,13 @@ var TextArea = (0, import_react10.forwardRef)(
   }
 );
 var TextArea_default = TextArea;
-var TextFieldRoot2 = import_styled_components11.default.div`
+var TextFieldRoot2 = import_styled_components10.default.div`
   display: flex;
   flex-direction: column;
 
   ${(p) => p.isDisabled && { opacity: p.theme.elementEffect.disabled.opacity }}
 `;
-var StyledTextareaContainer = import_styled_components11.default.div`
+var StyledTextareaContainer = import_styled_components10.default.div`
   position: relative;
   overflow: hidden;
 
@@ -1258,7 +1476,7 @@ var StyledTextareaContainer = import_styled_components11.default.div`
   border-radius: 4px;
   transition: 0.2s background-color, 0.2s box-shadow;
 
-  ${({ rows }) => import_styled_components11.css`
+  ${({ rows }) => import_styled_components10.css`
     height: calc(22px * ${rows} + 18px);
   `};
 
@@ -1272,11 +1490,11 @@ var StyledTextareaContainer = import_styled_components11.default.div`
       ${(p) => p.invalid ? `rgba(255,43,0,0.32)` : `rgba(0, 150, 250, 0.32);`};
   }
 
-  ${(p) => p.invalid && import_styled_components11.css`
+  ${(p) => p.invalid && import_styled_components10.css`
       box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
     `}
 `;
-var StyledTextarea = import_styled_components11.default.textarea`
+var StyledTextarea = import_styled_components10.default.textarea`
   border: none;
   outline: none;
   resize: none;
@@ -1293,7 +1511,7 @@ var StyledTextarea = import_styled_components11.default.textarea`
   padding: calc(9px / 0.875) calc(8px / 0.875)
     ${(p) => p.noBottomPadding ? 0 : ""};
 
-  ${({ rows = 1, noBottomPadding }) => import_styled_components11.css`
+  ${({ rows = 1, noBottomPadding }) => import_styled_components10.css`
     height: calc(22px / 0.875 * ${rows} + ${noBottomPadding ? 9 : 20}px);
   `};
 
@@ -1306,7 +1524,7 @@ var StyledTextarea = import_styled_components11.default.textarea`
     color: var(--charcoal-text3);
   }
 `;
-var MultiLineCounter = import_styled_components11.default.span`
+var MultiLineCounter = import_styled_components10.default.span`
   position: absolute;
   bottom: 9px;
   right: 8px;
@@ -1339,15 +1557,15 @@ var Icon_default = Icon;
 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_styled10 = require("@charcoal-ui/styled");
+var import_styled_components12 = __toESM(require("styled-components"));
+var import_utils5 = require("@charcoal-ui/utils");
+var import_styled2 = require("@charcoal-ui/styled");
 var import_react_spring2 = require("react-spring");
-var import_utils8 = require("@react-aria/utils");
+var import_utils6 = require("@react-aria/utils");
 
 // src/components/Modal/Dialog/index.tsx
 var import_react11 = require("react");
-var import_styled_components12 = __toESM(require("styled-components"));
+var import_styled_components11 = __toESM(require("styled-components"));
 var import_dialog = require("@react-aria/dialog");
 
 // ../foundation/src/grid.ts
@@ -1358,7 +1576,7 @@ function columnSystem(span, column, gutter) {
 }
 
 // src/components/Modal/Dialog/index.tsx
-var import_utils6 = require("@charcoal-ui/utils");
+var import_utils4 = require("@charcoal-ui/utils");
 var import_react_spring = require("react-spring");
 
 // src/_lib/useForwardedRef.tsx
@@ -1399,7 +1617,7 @@ var Dialog = (0, import_react11.forwardRef)(function Dialog2(props, forwardRef18
     }
   );
 });
-var AnimatedStyledDialogDiv = (0, import_react_spring.animated)(import_styled_components12.default.div`
+var AnimatedStyledDialogDiv = (0, import_react_spring.animated)(import_styled_components11.default.div`
   margin: auto;
   position: relative;
   height: fit-content;
@@ -1420,18 +1638,18 @@ var AnimatedStyledDialogDiv = (0, import_react_spring.animated)(import_styled_co
   }
 }}px;
 
-  background-color: ${({ theme: theme3 }) => theme3.color.background1};
+  background-color: var(--charcoal-surface1);
   border-radius: 24px;
 
-  @media ${({ theme: theme3 }) => (0, import_utils6.maxWidth)(theme3.breakpoint.screen1)} {
+  @media ${({ theme }) => (0, import_utils4.maxWidth)(theme.breakpoint.screen1)} {
     max-width: 440px;
     width: calc(100% - 48px);
-    ${(p) => p.bottomSheet !== false && import_styled_components12.css`
+    ${(p) => p.bottomSheet !== false && import_styled_components11.css`
         max-width: unset;
         width: 100%;
         border-radius: 0;
         margin: auto 0 0 0;
-        ${p.bottomSheet === "full" && import_styled_components12.css`
+        ${p.bottomSheet === "full" && import_styled_components11.css`
           min-height: 100%;
         `}
       `}
@@ -1460,9 +1678,12 @@ var Modal = (0, import_react12.forwardRef)(function ModalInner({ children, zInde
     className,
     isOpen = false
   } = props;
-  const ref = (0, import_utils8.useObjectRef)(external);
+  const ref = (0, import_utils6.useObjectRef)(external);
   const { modalProps, underlayProps } = (0, import_overlays2.useModalOverlay)(
-    props,
+    {
+      ...props,
+      isKeyboardDismissDisabled: isDismissable === void 0 || isDismissable === false
+    },
     {
       close: onClose,
       isOpen,
@@ -1475,8 +1696,8 @@ var Modal = (0, import_react12.forwardRef)(function ModalInner({ children, zInde
     },
     ref
   );
-  const theme3 = (0, import_styled_components13.useTheme)();
-  const isMobile = (0, import_styled10.useMedia)((0, import_utils7.maxWidth)(theme3.breakpoint.screen1)) ?? false;
+  const theme = (0, import_styled_components12.useTheme)();
+  const isMobile = (0, import_styled2.useMedia)((0, import_utils5.maxWidth)(theme.breakpoint.screen1)) ?? false;
   const transitionEnabled = isMobile && bottomSheet !== false;
   const showDismiss = !isMobile || bottomSheet !== true;
   const transition = (0, import_react_spring2.useTransition)(isOpen, {
@@ -1555,7 +1776,7 @@ var ModalContext = React9.createContext({
   showDismiss: true,
   bottomSheet: false
 });
-var ModalBackground = (0, import_react_spring2.animated)(import_styled_components13.default.div`
+var ModalBackground = (0, import_react_spring2.animated)(import_styled_components12.default.div`
   z-index: ${({ zIndex }) => zIndex};
   overflow: auto;
   display: flex;
@@ -1569,71 +1790,104 @@ var ModalBackground = (0, import_react_spring2.animated)(import_styled_component
   padding: 40px 0;
   box-sizing: border-box;
 
-  background-color: ${({ theme: theme3 }) => theme3.color.surface4};
+  background-color: var(--charcoal-surface4);
 
-  @media ${({ theme: theme3 }) => (0, import_utils7.maxWidth)(theme3.breakpoint.screen1)} {
-    ${(p) => p.$bottomSheet !== false && import_styled_components13.css`
+  @media ${({ theme }) => (0, import_utils5.maxWidth)(theme.breakpoint.screen1)} {
+    ${(p) => p.$bottomSheet !== false && import_styled_components12.css`
         padding: 0;
       `}
   }
 `);
-var ModalCrossButton = (0, import_styled_components13.default)(IconButton_default)`
+var ModalCrossButton = (0, import_styled_components12.default)(IconButton_default)`
   position: absolute;
   top: 8px;
   right: 8px;
 
-  ${theme((o) => [o.font.text3.hover.press])}
+  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) {
   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`
+var ModalHeading = import_styled_components12.default.h3`
   margin: 0;
   font-weight: inherit;
   font-size: inherit;
 `;
 
 // src/components/Modal/ModalPlumbing.tsx
-var import_styled_components14 = __toESM(require("styled-components"));
+var import_styled_components13 = __toESM(require("styled-components"));
 var import_react13 = require("react");
-var import_utils9 = require("@charcoal-ui/utils");
+var import_utils7 = require("@charcoal-ui/utils");
 var import_jsx_runtime15 = require("react/jsx-runtime");
 function ModalHeader() {
   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`
+var ModalHeaderRoot = import_styled_components13.default.div`
   height: 64px;
   display: grid;
   align-content: center;
   justify-content: center;
-  @media ${({ theme: theme3 }) => (0, import_utils9.maxWidth)(theme3.breakpoint.screen1)} {
-    ${(p) => p.$bottomSheet !== false && import_styled_components14.css`
+  @media ${({ theme }) => (0, import_utils7.maxWidth)(theme.breakpoint.screen1)} {
+    ${(p) => p.$bottomSheet !== false && import_styled_components13.css`
         height: 48px;
       `}
   }
 `;
-var StyledModalTitle = (0, import_styled_components14.default)(ModalTitle)`
-  ${theme((o) => [o.font.text1, o.typography(16).bold])}
+var StyledModalTitle = (0, import_styled_components13.default)(ModalTitle)`
+  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 = import_styled_components14.default.div`
-  ${theme((o) => [o.padding.horizontal(16)])}
+var ModalAlign = import_styled_components13.default.div`
+  padding-left: 16px;
+  padding-right: 16px;
 `;
-var ModalBody = import_styled_components14.default.div`
-  ${theme((o) => [o.padding.bottom(40)])}
+var ModalBody = import_styled_components13.default.div`
+  padding-bottom: 40px;
 `;
-var ModalButtons = import_styled_components14.default.div`
+var ModalButtons = import_styled_components13.default.div`
   display: grid;
   grid-auto-flow: row;
   grid-row-gap: 8px;
 
-  ${theme((o) => [o.padding.horizontal(16).top(16)])}
+  padding-top: 16px;
+  padding-left: 16px;
+  padding-right: 16px;
 `;
 
 // src/components/LoadingSpinner/index.tsx
 var import_react14 = require("react");
-var import_styled_components15 = __toESM(require("styled-components"));
+var import_styled_components14 = __toESM(require("styled-components"));
 var import_jsx_runtime16 = require("react/jsx-runtime");
 var LoadingSpinner = (0, import_react14.forwardRef)(
   function LoadingSpinnerInner({ size = 48, padding = 16, transparent = false, className }, ref) {
@@ -1651,7 +1905,7 @@ var LoadingSpinner = (0, import_react14.forwardRef)(
   }
 );
 var LoadingSpinner_default = (0, import_react14.memo)(LoadingSpinner);
-var LoadingSpinnerRoot = import_styled_components15.default.div.attrs({ role: "progressbar" })`
+var LoadingSpinnerRoot = import_styled_components14.default.div.attrs({ role: "progressbar" })`
   box-sizing: content-box;
   margin: auto;
   padding: ${(props) => props.padding}px;
@@ -1660,12 +1914,10 @@ var LoadingSpinnerRoot = import_styled_components15.default.div.attrs({ role: "p
   width: ${(props) => props.size}px;
   height: ${(props) => props.size}px;
   opacity: 0.84;
-  ${({ transparent }) => theme((o) => [
-  o.font.text4,
-  transparent ? o.bg.transparent : o.bg.background1
-])}
+  color: var(--charcoal-text4);
+  background-color: ${({ transparent }) => `var(--charcoal-${transparent ? "transparent" : "background1"})`};
 `;
-var scaleOut = import_styled_components15.keyframes`
+var scaleOut = import_styled_components14.keyframes`
   from {
     transform: scale(0);
     opacity: 1;
@@ -1676,7 +1928,7 @@ var scaleOut = import_styled_components15.keyframes`
     opacity: 0;
   }
 `;
-var Icon2 = import_styled_components15.default.div.attrs({ role: "presentation" })`
+var Icon2 = import_styled_components14.default.div.attrs({ role: "presentation" })`
   width: 1em;
   height: 1em;
   border-radius: 1em;
@@ -1707,8 +1959,8 @@ var LoadingSpinnerIcon = (0, import_react14.forwardRef)(
 
 // src/components/DropdownSelector/index.tsx
 var import_react20 = require("react");
-var import_styled_components18 = __toESM(require("styled-components"));
-var import_utils10 = require("@charcoal-ui/utils");
+var import_styled_components17 = __toESM(require("styled-components"));
+var import_utils8 = require("@charcoal-ui/utils");
 
 // src/components/DropdownSelector/DropdownPopover.tsx
 var import_react17 = require("react");
@@ -1716,7 +1968,7 @@ var import_react17 = require("react");
 // src/components/DropdownSelector/Popover/index.tsx
 var import_react16 = require("react");
 var import_overlays3 = require("@react-aria/overlays");
-var import_styled_components16 = __toESM(require("styled-components"));
+var import_styled_components15 = __toESM(require("styled-components"));
 
 // src/components/DropdownSelector/Popover/usePreventScroll.tsx
 var import_react15 = require("react");
@@ -1778,18 +2030,16 @@ function Popover(props) {
     ] })
   ] });
 }
-var DropdownPopoverDiv = import_styled_components16.default.div`
+var DropdownPopoverDiv = import_styled_components15.default.div`
   margin: 4px 0;
   list-style: none;
   overflow: auto;
   max-height: inherit;
-
-  ${theme((o) => [
-  o.bg.background1,
-  o.border.default,
-  o.borderRadius(8),
-  o.padding.vertical(8)
-])}
+  background-color: var(--charcoal-background1);
+  border: solid 1px var(--charcoal-border-default);
+  border-radius: 8px;
+  padding-top: 8px;
+  padding-bottom: 8px;
 `;
 
 // src/components/DropdownSelector/DropdownPopover.tsx
@@ -1853,7 +2103,7 @@ function findPreviewRecursive(children, value) {
 
 // src/components/DropdownSelector/MenuList/index.tsx
 var import_react19 = require("react");
-var import_styled_components17 = __toESM(require("styled-components"));
+var import_styled_components16 = __toESM(require("styled-components"));
 
 // src/components/DropdownSelector/MenuList/MenuListContext.ts
 var import_react18 = require("react");
@@ -1905,7 +2155,7 @@ function MenuList(props) {
     }
   ) });
 }
-var StyledUl = import_styled_components17.default.ul`
+var StyledUl = import_styled_components16.default.ul`
   padding: 0;
   margin: 0;
 `;
@@ -1968,21 +2218,20 @@ function DropdownSelector(props) {
     props.assistiveText !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(AssertiveText, { invalid: props.invalid, children: props.assistiveText })
   ] });
 }
-var DropdownSelectorRoot = import_styled_components18.default.div`
+var DropdownSelectorRoot = import_styled_components17.default.div`
   display: inline-block;
   width: 100%;
 
-  ${import_utils10.disabledSelector} {
+  ${import_utils8.disabledSelector} {
     cursor: default;
-    ${theme((o) => o.disabled)}
+    opacity: 0.32;
   }
 `;
-var DropdownFieldLabel = (0, import_styled_components18.default)(FieldLabel_default)`
+var DropdownFieldLabel = (0, import_styled_components17.default)(FieldLabel_default)`
   width: 100%;
-
-  ${theme((o) => o.margin.bottom(8))}
+  margin-bottom: 8px;
 `;
-var DropdownButton = import_styled_components18.default.button`
+var DropdownButton = import_styled_components17.default.button`
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -1992,65 +2241,111 @@ var DropdownButton = import_styled_components18.default.button`
   box-sizing: border-box;
   border: none;
   cursor: pointer;
+  gap: 4px;
 
-  ${import_utils10.disabledSelector} {
+  ${import_utils8.disabledSelector} {
     cursor: default;
   }
 
-  ${({ invalid }) => theme((o) => [
-  o.padding.horizontal(8),
-  o.outline.default.focus,
-  o.bg.surface3,
-  o.borderRadius(4),
-  invalid === true && o.outline.assertive
-])}
+  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'] {
+    &:focus,
+    &:active,
+    &:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
+    }
+    &:hover {
+      background-color: var(--charcoal-surface3-hover);
+    }
+  }
+
+  ${({ invalid }) => invalid === true && import_styled_components17.css`
+      &:not(:disabled):not([aria-disabled]),
+      &[aria-disabled='false'] {
+        box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
+      }
+    `}
 `;
-var DropdownButtonText = import_styled_components18.default.span`
+var DropdownButtonText = import_styled_components17.default.span`
   text-align: left;
-
-  ${theme((o) => [o.typography(14), o.font.text2])}
+  font-size: 14px;
+  line-height: 22px;
+  display: flow-root;
+  color: var(--charcoal-text2);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 `;
-var DropdownButtonIcon = (0, import_styled_components18.default)(Icon_default)`
-  ${theme((o) => [o.font.text2])}
+var DropdownButtonIcon = (0, import_styled_components17.default)(Icon_default)`
+  color: var(--charcoal-text2);
 `;
-var AssertiveText = import_styled_components18.default.div`
-  ${({ invalid }) => theme((o) => [
-  o.typography(14),
-  o.margin.top(8),
-  invalid === true ? o.font.assertive : o.font.text2
-])}
+var AssertiveText = import_styled_components17.default.div`
+  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 && import_styled_components17.css`
+      color: var(--charcoal-assertive);
+    `}
 `;
 
 // src/components/DropdownSelector/DropdownMenuItem.tsx
-var import_styled_components20 = __toESM(require("styled-components"));
+var import_styled_components19 = __toESM(require("styled-components"));
 
 // src/components/DropdownSelector/ListItem/index.tsx
-var import_styled_components19 = __toESM(require("styled-components"));
+var import_styled_components18 = __toESM(require("styled-components"));
 var import_jsx_runtime21 = require("react/jsx-runtime");
 function ListItem(props) {
   const { children, ...rest } = props;
   return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(StyledLi, { role: "option", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ItemDiv, { ...rest, children: props.children }) });
 }
-var StyledLi = import_styled_components19.default.li`
+var StyledLi = import_styled_components18.default.li`
   list-style: none;
 `;
-var ItemDiv = import_styled_components19.default.div`
+var ItemDiv = import_styled_components18.default.div`
   display: flex;
   align-items: center;
   min-height: 40px;
   cursor: pointer;
   outline: none;
 
-  ${theme((o) => [o.padding.horizontal(16), o.disabled])}
+  padding-right: 16px;
+  padding-left: 16px;
 
-  &[aria-disabled="true"] {
+  &:disabled,
+  &[aria-disabled]:not([aria-disabled='false']) {
+    opacity: 0.32;
     cursor: default;
   }
 
   :hover,
   :focus,
   :focus-within {
-    ${theme((o) => [o.bg.surface3])}
+    background-color: var(--charcoal-surface3);
   }
 `;
 
@@ -2151,20 +2446,24 @@ function DropdownMenuItem(props) {
     /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(StyledSpan, { isSelected, children: props.children })
   ] });
 }
-var StyledSpan = import_styled_components20.default.span`
-  ${theme((o) => [o.typography(14), o.font.text2])};
+var StyledSpan = import_styled_components19.default.span`
+  font-size: 14px;
+  line-height: 22px;
+  color: var(--charcoal-text2);
+  padding: 9px 0;
+
   display: flex;
   align-items: center;
   width: 100%;
   margin-left: ${({ isSelected }) => isSelected === true ? 0 : 20}px;
 `;
-var Text2ColorIcon = (0, import_styled_components20.default)(Icon_default)`
-  ${theme((o) => [o.font.text2])}
+var Text2ColorIcon = (0, import_styled_components19.default)(Icon_default)`
+  color: var(--charcoal-text2);
   padding-right: 4px;
 `;
 
 // src/components/DropdownSelector/MenuItemGroup/index.tsx
-var import_styled_components21 = __toESM(require("styled-components"));
+var import_styled_components20 = __toESM(require("styled-components"));
 var import_jsx_runtime24 = require("react/jsx-runtime");
 function MenuItemGroup(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(StyledLi2, { role: "presentation", children: [
@@ -2172,35 +2471,267 @@ function MenuItemGroup(props) {
     /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(StyledUl2, { role: "group", children: props.children })
   ] });
 }
-var TextSpan = import_styled_components21.default.span`
+var TextSpan = import_styled_components20.default.span`
   display: block;
-  color: ${({ theme: theme3 }) => theme3.color.text3};
+  color: var(--charcoal-text3);
   font-size: 12px;
   font-weight: bold;
   padding: 12px 0 8px 16px;
 `;
-var StyledUl2 = import_styled_components21.default.ul`
+var StyledUl2 = import_styled_components20.default.ul`
   padding-left: 0;
   margin: 0;
   box-sizing: border-box;
   list-style: none;
   overflow: hidden;
 `;
-var StyledLi2 = import_styled_components21.default.li`
+var StyledLi2 = import_styled_components20.default.li`
   display: block;
 `;
 
 // src/components/SegmentedControl/index.tsx
+var import_react27 = require("react");
+
+// ../../node_modules/@react-stately/form/dist/import.mjs
+var import_react23 = require("react");
+var $e5be200c675c3b3a$export$aca958c65c314e6c = {
+  badInput: false,
+  customError: false,
+  patternMismatch: false,
+  rangeOverflow: false,
+  rangeUnderflow: false,
+  stepMismatch: false,
+  tooLong: false,
+  tooShort: false,
+  typeMismatch: false,
+  valueMissing: false,
+  valid: true
+};
+var $e5be200c675c3b3a$var$CUSTOM_VALIDITY_STATE = {
+  ...$e5be200c675c3b3a$export$aca958c65c314e6c,
+  customError: true,
+  valid: false
+};
+var $e5be200c675c3b3a$export$dad6ae84456c676a = {
+  isInvalid: false,
+  validationDetails: $e5be200c675c3b3a$export$aca958c65c314e6c,
+  validationErrors: []
+};
+var $e5be200c675c3b3a$export$571b5131b7e65c11 = (0, import_react23.createContext)({});
+var $e5be200c675c3b3a$export$a763b9476acd3eb = "__formValidationState" + Date.now();
+function $e5be200c675c3b3a$export$fc1a364ae1f3ff10(props) {
+  if (props[$e5be200c675c3b3a$export$a763b9476acd3eb]) {
+    let { realtimeValidation, displayValidation, updateValidation, resetValidation, commitValidation } = props[$e5be200c675c3b3a$export$a763b9476acd3eb];
+    return {
+      realtimeValidation,
+      displayValidation,
+      updateValidation,
+      resetValidation,
+      commitValidation
+    };
+  }
+  return $e5be200c675c3b3a$var$useFormValidationStateImpl(props);
+}
+function $e5be200c675c3b3a$var$useFormValidationStateImpl(props) {
+  let { isInvalid, validationState, name, value, builtinValidation, validate, validationBehavior = "aria" } = props;
+  if (validationState)
+    isInvalid || (isInvalid = validationState === "invalid");
+  let controlledError = isInvalid ? {
+    isInvalid: true,
+    validationErrors: [],
+    validationDetails: $e5be200c675c3b3a$var$CUSTOM_VALIDITY_STATE
+  } : null;
+  let clientError = (0, import_react23.useMemo)(() => $e5be200c675c3b3a$var$getValidationResult($e5be200c675c3b3a$var$runValidate(validate, value)), [
+    validate,
+    value
+  ]);
+  if (builtinValidation === null || builtinValidation === void 0 ? void 0 : builtinValidation.validationDetails.valid)
+    builtinValidation = null;
+  let serverErrors = (0, import_react23.useContext)($e5be200c675c3b3a$export$571b5131b7e65c11);
+  let serverErrorMessages = (0, import_react23.useMemo)(() => {
+    if (name)
+      return Array.isArray(name) ? name.flatMap((name2) => $e5be200c675c3b3a$var$asArray(serverErrors[name2])) : $e5be200c675c3b3a$var$asArray(serverErrors[name]);
+    return [];
+  }, [
+    serverErrors,
+    name
+  ]);
+  let [lastServerErrors, setLastServerErrors] = (0, import_react23.useState)(serverErrors);
+  let [isServerErrorCleared, setServerErrorCleared] = (0, import_react23.useState)(false);
+  if (serverErrors !== lastServerErrors) {
+    setLastServerErrors(serverErrors);
+    setServerErrorCleared(false);
+  }
+  let serverError = (0, import_react23.useMemo)(() => $e5be200c675c3b3a$var$getValidationResult(isServerErrorCleared ? [] : serverErrorMessages), [
+    isServerErrorCleared,
+    serverErrorMessages
+  ]);
+  let nextValidation = (0, import_react23.useRef)($e5be200c675c3b3a$export$dad6ae84456c676a);
+  let [currentValidity, setCurrentValidity] = (0, import_react23.useState)($e5be200c675c3b3a$export$dad6ae84456c676a);
+  let lastError = (0, import_react23.useRef)($e5be200c675c3b3a$export$dad6ae84456c676a);
+  let commitValidation = () => {
+    if (!commitQueued)
+      return;
+    setCommitQueued(false);
+    let error = clientError || builtinValidation || nextValidation.current;
+    if (!$e5be200c675c3b3a$var$isEqualValidation(error, lastError.current)) {
+      lastError.current = error;
+      setCurrentValidity(error);
+    }
+  };
+  let [commitQueued, setCommitQueued] = (0, import_react23.useState)(false);
+  (0, import_react23.useEffect)(commitValidation);
+  let realtimeValidation = controlledError || serverError || clientError || builtinValidation || $e5be200c675c3b3a$export$dad6ae84456c676a;
+  let displayValidation = validationBehavior === "native" ? controlledError || serverError || currentValidity : controlledError || serverError || clientError || builtinValidation || currentValidity;
+  return {
+    realtimeValidation,
+    displayValidation,
+    updateValidation(value2) {
+      if (validationBehavior === "aria" && !$e5be200c675c3b3a$var$isEqualValidation(currentValidity, value2))
+        setCurrentValidity(value2);
+      else
+        nextValidation.current = value2;
+    },
+    resetValidation() {
+      let error = $e5be200c675c3b3a$export$dad6ae84456c676a;
+      if (!$e5be200c675c3b3a$var$isEqualValidation(error, lastError.current)) {
+        lastError.current = error;
+        setCurrentValidity(error);
+      }
+      if (validationBehavior === "native")
+        setCommitQueued(false);
+      setServerErrorCleared(true);
+    },
+    commitValidation() {
+      if (validationBehavior === "native")
+        setCommitQueued(true);
+      setServerErrorCleared(true);
+    }
+  };
+}
+function $e5be200c675c3b3a$var$asArray(v) {
+  if (!v)
+    return [];
+  return Array.isArray(v) ? v : [
+    v
+  ];
+}
+function $e5be200c675c3b3a$var$runValidate(validate, value) {
+  if (typeof validate === "function") {
+    let e = validate(value);
+    if (e && typeof e !== "boolean")
+      return $e5be200c675c3b3a$var$asArray(e);
+  }
+  return [];
+}
+function $e5be200c675c3b3a$var$getValidationResult(errors) {
+  return errors.length ? {
+    isInvalid: true,
+    validationErrors: errors,
+    validationDetails: $e5be200c675c3b3a$var$CUSTOM_VALIDITY_STATE
+  } : null;
+}
+function $e5be200c675c3b3a$var$isEqualValidation(a, b) {
+  if (a === b)
+    return true;
+  return a && b && a.isInvalid === b.isInvalid && a.validationErrors.length === b.validationErrors.length && a.validationErrors.every((a2, i) => a2 === b.validationErrors[i]) && Object.entries(a.validationDetails).every(([k, v]) => b.validationDetails[k] === v);
+}
+
+// ../../node_modules/@react-stately/utils/dist/import.mjs
 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");
+function $458b0a5536c1a7cf$export$40bfa8c7b0832715(value, defaultValue, onChange) {
+  let [stateValue, setStateValue] = (0, import_react24.useState)(value || defaultValue);
+  let isControlledRef = (0, import_react24.useRef)(value !== void 0);
+  let isControlled = value !== void 0;
+  (0, import_react24.useEffect)(() => {
+    let wasControlled = isControlledRef.current;
+    if (wasControlled !== isControlled)
+      console.warn(`WARN: A component changed from ${wasControlled ? "controlled" : "uncontrolled"} to ${isControlled ? "controlled" : "uncontrolled"}.`);
+    isControlledRef.current = isControlled;
+  }, [
+    isControlled
+  ]);
+  let currentValue = isControlled ? value : stateValue;
+  let setValue = (0, import_react24.useCallback)((value2, ...args) => {
+    let onChangeCaller = (value3, ...onChangeArgs) => {
+      if (onChange) {
+        if (!Object.is(currentValue, value3))
+          onChange(value3, ...onChangeArgs);
+      }
+      if (!isControlled)
+        currentValue = value3;
+    };
+    if (typeof value2 === "function") {
+      console.warn("We can not support a function callback. See Github Issues for details https://github.com/adobe/react-spectrum/issues/2320");
+      let updateFunction = (oldValue, ...functionArgs) => {
+        let interceptedValue = value2(isControlled ? currentValue : oldValue, ...functionArgs);
+        onChangeCaller(interceptedValue, ...args);
+        if (!isControlled)
+          return interceptedValue;
+        return oldValue;
+      };
+      setStateValue(updateFunction);
+    } else {
+      if (!isControlled)
+        setStateValue(value2);
+      onChangeCaller(value2, ...args);
+    }
+  }, [
+    isControlled,
+    currentValue,
+    onChange
+  ]);
+  return [
+    currentValue,
+    setValue
+  ];
+}
+
+// ../../node_modules/@react-stately/radio/dist/import.mjs
+var import_react25 = require("react");
+var $a54cdc5c1942b639$var$instance = Math.round(Math.random() * 1e10);
+var $a54cdc5c1942b639$var$i = 0;
+function $a54cdc5c1942b639$export$bca9d026f8e704eb(props) {
+  let name = (0, import_react25.useMemo)(() => props.name || `radio-group-${$a54cdc5c1942b639$var$instance}-${++$a54cdc5c1942b639$var$i}`, [
+    props.name
+  ]);
+  var _props_defaultValue;
+  let [selectedValue, setSelected] = (0, $458b0a5536c1a7cf$export$40bfa8c7b0832715)(props.value, (_props_defaultValue = props.defaultValue) !== null && _props_defaultValue !== void 0 ? _props_defaultValue : null, props.onChange);
+  let [lastFocusedValue, setLastFocusedValue] = (0, import_react25.useState)(null);
+  let validation = (0, $e5be200c675c3b3a$export$fc1a364ae1f3ff10)({
+    ...props,
+    value: selectedValue
+  });
+  let setSelectedValue = (value) => {
+    if (!props.isReadOnly && !props.isDisabled) {
+      setSelected(value);
+      validation.commitValidation();
+    }
+  };
+  let isInvalid = validation.displayValidation.isInvalid;
+  return {
+    ...validation,
+    name,
+    selectedValue,
+    setSelectedValue,
+    lastFocusedValue,
+    setLastFocusedValue,
+    isDisabled: props.isDisabled || false,
+    isReadOnly: props.isReadOnly || false,
+    isRequired: props.isRequired || false,
+    validationState: props.validationState || (isInvalid ? "invalid" : null),
+    isInvalid
+  };
+}
+
+// src/components/SegmentedControl/index.tsx
+var import_radio2 = require("@react-aria/radio");
+var import_styled_components21 = __toESM(require("styled-components"));
 
 // src/components/SegmentedControl/RadioGroupContext.tsx
-var import_react23 = require("react");
+var import_react26 = require("react");
 var import_jsx_runtime25 = require("react/jsx-runtime");
-var RadioContext = (0, import_react23.createContext)(null);
+var RadioContext = (0, import_react26.createContext)(null);
 var RadioProvider = ({
   value,
   children
@@ -2208,7 +2739,7 @@ var RadioProvider = ({
   return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(RadioContext.Provider, { value, children });
 };
 var useRadioContext = () => {
-  const state = (0, import_react23.useContext)(RadioContext);
+  const state = (0, import_react26.useContext)(RadioContext);
   if (state === null)
     throw new Error("`<RadioProvider>` is not likely mounted.");
   return state;
@@ -2216,9 +2747,9 @@ var useRadioContext = () => {
 
 // src/components/SegmentedControl/index.tsx
 var import_jsx_runtime26 = require("react/jsx-runtime");
-var SegmentedControl = (0, import_react24.forwardRef)(
+var SegmentedControl = (0, import_react27.forwardRef)(
   function SegmentedControlInner(props, ref) {
-    const ariaRadioGroupProps = (0, import_react24.useMemo)(
+    const ariaRadioGroupProps = (0, import_react27.useMemo)(
       () => ({
         ...props,
         isDisabled: props.disabled,
@@ -2228,9 +2759,9 @@ var SegmentedControl = (0, import_react24.forwardRef)(
       }),
       [props]
     );
-    const state = (0, import_react_stately2.useRadioGroupState)(ariaRadioGroupProps);
-    const { radioGroupProps } = (0, import_radio.useRadioGroup)(ariaRadioGroupProps, state);
-    const segmentedControlItems = (0, import_react24.useMemo)(() => {
+    const state = $a54cdc5c1942b639$export$bca9d026f8e704eb(ariaRadioGroupProps);
+    const { radioGroupProps } = (0, import_radio2.useRadioGroup)(ariaRadioGroupProps, state);
+    const segmentedControlItems = (0, import_react27.useMemo)(() => {
       return props.data.map(
         (d) => typeof d === "string" ? { value: d, label: d } : d
       );
@@ -2254,11 +2785,11 @@ var SegmentedControl = (0, import_react24.forwardRef)(
     );
   }
 );
-var SegmentedControl_default = (0, import_react24.memo)(SegmentedControl);
+var SegmentedControl_default = (0, import_react27.memo)(SegmentedControl);
 var Segmented = (props) => {
   const state = useRadioContext();
-  const ref = (0, import_react24.useRef)(null);
-  const ariaRadioProps = (0, import_react24.useMemo)(
+  const ref = (0, import_react27.useRef)(null);
+  const ariaRadioProps = (0, import_react27.useMemo)(
     () => ({
       value: props.value,
       isDisabled: props.disabled,
@@ -2266,7 +2797,7 @@ var Segmented = (props) => {
     }),
     [props]
   );
-  const { inputProps, isDisabled, isSelected } = (0, import_radio.useRadio)(
+  const { inputProps, isDisabled, isSelected } = (0, import_radio2.useRadio)(
     ariaRadioProps,
     state,
     ref
@@ -2283,32 +2814,36 @@ var Segmented = (props) => {
     }
   );
 };
-var SegmentedControlRoot = import_styled_components22.default.div`
+var SegmentedControlRoot = import_styled_components21.default.div`
   display: inline-flex;
   align-items: center;
 
-  ${theme((o) => [o.bg.surface3, o.borderRadius(16)])}
+  background-color: var(--charcoal-surface3);
+  border-radius: 16px;
 `;
-var SegmentedRoot = import_styled_components22.default.label`
+var SegmentedRoot = import_styled_components21.default.label`
   position: relative;
   display: flex;
   align-items: center;
   cursor: pointer;
   height: 32px;
 
-  ${import_utils11.disabledSelector} {
+  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 }) => theme((o) => [
-  o.padding.horizontal(16),
-  o.borderRadius(16),
-  o.disabled,
-  checked === true && o.bg.brand,
-  checked === true ? o.font.text5 : o.font.text2
-])}
+  ${({ checked = false }) => checked && import_styled_components21.css`
+      background-color: var(--charcoal-brand);
+      color: var(--charcoal-text5);
+    `}
 `;
-var SegmentedInput = import_styled_components22.default.input`
+var SegmentedInput = import_styled_components21.default.input`
   position: absolute;
 
   height: 0px;
@@ -2322,29 +2857,47 @@ var SegmentedInput = import_styled_components22.default.input`
   white-space: nowrap;
   opacity: 0;
 `;
-var RadioLabel2 = import_styled_components22.default.div`
+var RadioLabel2 = import_styled_components21.default.div`
   background: transparent;
   display: flex;
   align-items: center;
   height: 22px;
 `;
-var SegmentedLabelInner = import_styled_components22.default.div`
-  ${theme((o) => [o.typography(14)])}
+var SegmentedLabelInner = import_styled_components21.default.div`
+  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
-var import_react25 = require("react");
-var import_styled_components23 = __toESM(require("styled-components"));
+var import_react28 = require("react");
+var import_styled_components22 = __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_utils10 = require("@react-aria/utils");
+var import_react_stately2 = require("react-stately");
+var import_utils11 = require("@charcoal-ui/utils");
 var import_jsx_runtime27 = require("react/jsx-runtime");
-var Checkbox = (0, import_react25.forwardRef)(
+var Checkbox = (0, import_react28.forwardRef)(
   function CheckboxInner({ invalid = false, ...props }, ref) {
-    const ariaCheckboxProps = (0, import_react25.useMemo)(
+    const ariaCheckboxProps = (0, import_react28.useMemo)(
       () => ({
         ...props,
+        isInValid: invalid,
         isSelected: props.checked,
         defaultSelected: props.defaultChecked,
         validationState: invalid ? "invalid" : "valid",
@@ -2353,39 +2906,42 @@ var Checkbox = (0, import_react25.forwardRef)(
       }),
       [invalid, props]
     );
-    const state = (0, import_react_stately3.useToggleState)(ariaCheckboxProps);
-    const objectRef = (0, import_utils12.useObjectRef)(ref);
+    const state = (0, import_react_stately2.useToggleState)(ariaCheckboxProps);
+    const objectRef = (0, import_utils10.useObjectRef)(ref);
     const { inputProps } = (0, import_checkbox.useCheckbox)(ariaCheckboxProps, state, objectRef);
     const isDisabled = (props.disabled ?? false) || (props.readonly ?? false);
     return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(InputRoot, { "aria-disabled": isDisabled, className: props.className, children: [
       /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(CheckboxRoot, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(CheckboxInput, { type: "checkbox", ...inputProps, invalid }),
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(CheckboxInput, { type: "checkbox", ...inputProps }),
         /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(CheckboxInputOverlay, { "aria-hidden": true, checked: inputProps.checked, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Icon_default, { name: "24/Check", unsafeNonGuidelineScale: 2 / 3 }) })
       ] }),
       "children" in props && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(InputLabel, { children: props.children })
     ] });
   }
 );
-var Checkbox_default = (0, import_react25.memo)(Checkbox);
-var hiddenCss = import_styled_components23.css`
+var Checkbox_default = (0, import_react28.memo)(Checkbox);
+var hiddenCss = import_styled_components22.css`
   visibility: hidden;
 `;
-var InputRoot = import_styled_components23.default.label`
+var InputRoot = import_styled_components22.default.label`
   position: relative;
   display: flex;
 
   cursor: pointer;
-  ${import_utils13.disabledSelector} {
+  ${import_utils11.disabledSelector} {
     cursor: default;
   }
 
-  gap: ${({ theme: theme3 }) => (0, import_utils13.px)(theme3.spacing[4])};
-  ${theme((o) => [o.disabled])}
+  gap: 4px;
+  &:disabled,
+  &[aria-disabled]:not([aria-disabled='false']) {
+    opacity: 0.32;
+  }
 `;
-var CheckboxRoot = import_styled_components23.default.div`
+var CheckboxRoot = import_styled_components22.default.div`
   position: relative;
 `;
-var CheckboxInput = import_styled_components23.default.input`
+var CheckboxInput = import_styled_components22.default.input`
   &[type='checkbox'] {
     appearance: none;
     display: block;
@@ -2393,23 +2949,50 @@ var CheckboxInput = import_styled_components23.default.input`
     margin: 0;
     width: 20px;
     height: 20px;
+    border-radius: 4px;
+    transition: 0.2s box-shadow, 0.2s background-color;
 
     &:checked {
-      ${theme((o) => o.bg.brand.hover.press)}
+      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'] {
+      &:focus,
+      &:active {
+        outline: none;
+        box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
+        &:not(:focus-visible) {
+          outline: none;
+        }
+      }
+      &:focus-visible {
+        outline: none;
+        box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
+      }
+      &[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: ${({ theme: theme3 }) => theme3.color.text4};
+      border-color: var(--charcoal-text4);
     }
-    ${theme((o) => [o.outline.default.focus, o.borderRadius(4)])}
-    ${(p) => p.invalid && theme((o) => [o.outline.assertive])}
-
-    /* FIXME: o.outline.default.focus の transition に o.bg.brand の transition が打ち消されてしまう */
-    transition: all 0.2s !important;
   }
 `;
-var CheckboxInputOverlay = import_styled_components23.default.div`
+var CheckboxInputOverlay = import_styled_components22.default.div`
   position: absolute;
   top: -2px;
   left: -2px;
@@ -2417,31 +3000,31 @@ var CheckboxInputOverlay = import_styled_components23.default.div`
   display: flex;
   align-items: center;
   justify-content: center;
-
-  ${theme((o) => [o.width.px(24), o.height.px(24), o.font.text5])}
+  width: 24px;
+  height: 24px;
+  color: var(--charcoal-text5);
 
   ${({ checked }) => checked !== true && hiddenCss};
 `;
-var InputLabel = import_styled_components23.default.div`
-  ${theme((o) => [o.font.text2])}
-
+var InputLabel = import_styled_components22.default.div`
+  color: var(--charcoal-text2);
   font-size: 14px;
   /** checkbox の height が 20px なのでcheckbox と text が揃っているように見せるために行ボックスの高さを 20px にしている */
   line-height: 20px;
 `;
 
 // src/components/TagItem/index.tsx
-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");
+var import_react29 = require("react");
+var import_utils12 = require("@react-aria/utils");
+var import_styled_components23 = __toESM(require("styled-components"));
+var import_utils13 = require("@charcoal-ui/utils");
 var import_button = require("@react-aria/button");
 var import_jsx_runtime28 = require("react/jsx-runtime");
 var sizeMap = {
   S: 32,
   M: 40
 };
-var TagItem = (0, import_react26.forwardRef)(
+var TagItem = (0, import_react29.forwardRef)(
   function TagItemInner({
     label,
     translatedLabel,
@@ -2453,8 +3036,8 @@ var TagItem = (0, import_react26.forwardRef)(
     className,
     ...props
   }, _ref) {
-    const ref = (0, import_utils14.useObjectRef)(_ref);
-    const ariaButtonProps = (0, import_react26.useMemo)(
+    const ref = (0, import_utils12.useObjectRef)(_ref);
+    const ariaButtonProps = (0, import_react29.useMemo)(
       () => ({
         elementType: "a",
         isDisabled: disabled,
@@ -2486,8 +3069,21 @@ var TagItem = (0, import_react26.forwardRef)(
     );
   }
 );
-var TagItem_default = (0, import_react26.memo)(TagItem);
-var TagItemRoot = import_styled_components24.default.a`
+var TagItem_default = (0, import_react29.memo)(TagItem);
+var horizontalPadding = ({ left, right }) => import_styled_components23.css`
+  padding-right: ${(0, import_utils13.px)(right)};
+  padding-left: ${(0, import_utils13.px)(left)};
+`;
+var tagItemRootSize = (size) => {
+  switch (size) {
+    case "M":
+      return horizontalPadding({ left: 24, right: 24 });
+    case "S":
+      return horizontalPadding({ left: 16, right: 16 });
+  }
+};
+var activeTagItemRoot = horizontalPadding({ left: 16, right: 8 });
+var TagItemRoot = import_styled_components23.default.a`
   isolation: isolate;
   position: relative;
   height: ${({ size }) => sizeMap[size]}px;
@@ -2497,22 +3093,30 @@ var TagItemRoot = import_styled_components24.default.a`
   text-decoration: none;
   cursor: pointer;
   overflow: hidden;
+  border-radius: 4px;
+  ${({ size, status }) => status !== "active" && tagItemRootSize(size)}
+  ${({ status }) => status === "active" && activeTagItemRoot}
+  color: ${({ status }) => status === "inactive" ? "var(--charcoal-text2)" : "var(--charcoal-text5)"};
+
+  transition: 0.2s box-shadow;
+
+  &:not(:disabled):not([aria-disabled]),
+  &[aria-disabled='false'] {
+    &:focus,
+    &:active,
+    &:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
+    }
+  }
 
-  ${({ size, status }) => theme((o) => [
-  o.outline.default.focus,
-  o.borderRadius(4),
-  status !== "active" && size === "M" && o.padding.horizontal(24),
-  status !== "active" && size === "S" && o.padding.horizontal(16),
-  status === "inactive" ? o.font.text2 : o.font.text5,
-  ...status === "active" ? [o.padding.left(16), o.padding.right(8)] : []
-])}
-
-  ${import_utils15.disabledSelector} {
-    ${theme((o) => [o.disabled])}
+  &:disabled,
+  &[aria-disabled]:not([aria-disabled='false']) {
+    opacity: 0.32;
     cursor: default;
   }
 `;
-var Background = import_styled_components24.default.div`
+var Background = import_styled_components23.default.div`
   position: absolute;
   z-index: 1;
   top: 0;
@@ -2521,10 +3125,13 @@ var Background = import_styled_components24.default.div`
   height: 100%;
 
   background-color: ${({ bgColor }) => bgColor};
-  ${({ status }) => status === "inactive" && theme((o) => o.bg.surface3)}
+  ${({ status }) => status === "inactive" && import_styled_components23.css`
+      background-color: var(--charcoal-surface3);
+    `}
+
+  ${({ bgImage }) => bgImage !== void 0 && import_styled_components23.css`
+      background-color: var(--charcoal-surface4);
 
-  ${({ bgImage }) => bgImage !== void 0 && import_styled_components24.css`
-      ${theme((o) => [o.bg.surface4])}
       &::before {
         content: '';
         position: absolute;
@@ -2539,25 +3146,43 @@ var Background = import_styled_components24.default.div`
       }
     `}
 `;
-var Inner = import_styled_components24.default.div`
+var Inner = import_styled_components23.default.div`
   display: inline-flex;
-  gap: ${({ theme: theme3 }) => (0, import_utils15.px)(theme3.spacing[8])};
+  gap: 8px;
   align-items: center;
   z-index: 2;
 `;
-var labelCSS = import_styled_components24.css`
-  ${theme((o) => [o.typography(14).bold])}
+var labelCSS = import_styled_components23.css`
+  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 = import_styled_components24.css`
+var translateLabelCSS = import_styled_components23.css`
   display: flex;
   align-items: center;
   flex-direction: column;
   font-size: 10px;
 `;
-var LabelWrapper = import_styled_components24.default.div`
+var LabelWrapper = import_styled_components23.default.div`
   ${({ isTranslate }) => isTranslate ?? false ? translateLabelCSS : labelCSS}
 `;
-var Label3 = import_styled_components24.default.span`
+var Label3 = import_styled_components23.default.span`
   max-width: 152px;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -2566,8 +3191,25 @@ var Label3 = import_styled_components24.default.span`
   color: inherit;
   line-height: inherit;
 `;
-var TranslatedLabel = import_styled_components24.default.div`
-  ${theme((o) => [o.typography(12).bold])}
+var TranslatedLabel = import_styled_components23.default.div`
+  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;
+  }
 `;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {