@charcoal-ui/react 3.5.0 → 3.6.0

package/dist/index.esm.js

@@ -50,7 +50,7 @@ function CharcoalProvider({
 
 // src/components/Button/index.tsx
 import { forwardRef as forwardRef3 } from "react";
-import styled3 from "styled-components";
+import styled2, { css } from "styled-components";
 
 // src/_lib/index.ts
 function unreachable(value) {
@@ -74,14 +74,9 @@ function countCodePointsInString(string) {
   return Array.from(string).length;
 }
 
-// src/styled.ts
-import styled from "styled-components";
-import { createTheme } from "@charcoal-ui/styled";
-var theme = createTheme(styled);
-
 // src/components/Clickable/index.tsx
 import * as React2 from "react";
-import styled2 from "styled-components";
+import styled from "styled-components";
 import { disabledSelector } from "@charcoal-ui/utils";
 import { jsx as jsx3 } from "react/jsx-runtime";
 var Clickable = React2.forwardRef(
@@ -107,7 +102,7 @@ var Clickable = React2.forwardRef(
   }
 );
 var Clickable_default = Clickable;
-var StyledClickableDiv = styled2.div`
+var StyledClickableDiv = styled.div`
   cursor: pointer;
 
   ${disabledSelector} {
@@ -124,6 +119,7 @@ var StyledClickableDiv = styled2.div`
   text-rendering: inherit;
   letter-spacing: inherit;
   word-spacing: inherit;
+  text-decoration: none;
 
   &:focus {
     outline: none;
@@ -163,7 +159,8 @@ var Button = forwardRef3(function Button2({
     {
       ...rest,
       disabled,
-      $variant: variant,
+      $background: variantToBackground(variant),
+      $color: variantToFont(variant),
       $size: size,
       $fullWidth: fixed,
       ref,
@@ -172,7 +169,15 @@ var Button = forwardRef3(function Button2({
   );
 });
 var Button_default = Button;
-var StyledButton = styled3(Clickable_default)`
+var horizontalPaddingSmall = css`
+  padding-right: 16px;
+  padding-left: 16px;
+`;
+var horizontalPaddingMedium = css`
+  padding-right: 24px;
+  padding-left: 24px;
+`;
+var StyledButton = styled2(Clickable_default)`
   width: ${(p) => p.$fullWidth ? "stretch" : "min-content"};
   display: inline-grid;
   align-items: center;
@@ -180,16 +185,40 @@ var StyledButton = styled3(Clickable_default)`
   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);
+    }
+  }
 
-  ${(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
-])}
+  &:disabled,
+  &[aria-disabled]:not([aria-disabled='false']) {
+    opacity: 0.32;
+  }
 
   /* よく考えたらheight=32って定義が存在しないな... */
   height: ${(p) => p.$size === "M" ? 40 : 32}px;
@@ -229,63 +258,83 @@ function variantToFont(variant) {
 
 // src/components/IconButton/index.tsx
 import { forwardRef as forwardRef4 } from "react";
-import styled4 from "styled-components";
+import styled3 from "styled-components";
 import { jsx as jsx5 } from "react/jsx-runtime";
 var IconButton = forwardRef4(
   function IconButtonInner({ variant = "Default", size = "M", icon, ...rest }, ref) {
     validateIconSize(size, icon);
-    return /* @__PURE__ */ jsx5(StyledIconButton, { ...rest, ref, variant, size, children: /* @__PURE__ */ jsx5("pixiv-icon", { name: icon }) });
+    return /* @__PURE__ */ jsx5(StyledIconButton, { ...rest, ref, $size: size, $variant: variant, children: /* @__PURE__ */ jsx5("pixiv-icon", { name: icon }) });
   }
 );
 var IconButton_default = IconButton;
-var StyledIconButton = styled4(Clickable_default).attrs(styledProps)`
+var StyledIconButton = styled3(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
       };
   }
 }
@@ -315,9 +364,8 @@ 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 styled5 from "styled-components";
+import styled4, { css as css2 } from "styled-components";
 import warning from "warning";
-import { px } from "@charcoal-ui/utils";
 import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
 var Radio = forwardRef5(function RadioInner({ value, disabled = false, children, className }, ref) {
   const {
@@ -358,16 +406,19 @@ var Radio = forwardRef5(function RadioInner({ value, disabled = false, children,
   ] });
 });
 var Radio_default = memo(Radio);
-var RadioRoot = styled5.label`
+var RadioRoot = styled4.label`
   display: grid;
   grid-template-columns: auto 1fr;
-  grid-gap: ${({ theme: theme3 }) => 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 = styled5.input.attrs({ type: "radio" })`
+var RadioInput = styled4.input.attrs({ type: "radio" })`
   /** Make prior to browser default style */
   &[type='radio'] {
     appearance: none;
@@ -380,46 +431,92 @@ var RadioInput = styled5.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 && css2`
+          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 = styled5.div`
-  ${theme((o) => [o.typography(14), o.font.text2])}
+var RadioLabel = styled4.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 = styled5.div`
+var StyledRadioGroup = styled4.div`
   display: grid;
   grid-template-columns: 1fr;
-  grid-gap: ${({ theme: theme3 }) => px(theme3.spacing[8])};
+  grid-gap: 8px;
 `;
 var RadioGroupContext = React3.createContext({
   name: void 0,
@@ -478,9 +575,9 @@ function RadioGroup({
 
 // src/components/MultiSelect/index.tsx
 import { useCallback as useCallback2, useContext as useContext3, forwardRef as forwardRef6, memo as memo2 } from "react";
-import styled6, { css } from "styled-components";
+import styled5, { css as css3 } from "styled-components";
 import warning2 from "warning";
-import { disabledSelector as disabledSelector2, px as px2 } from "@charcoal-ui/utils";
+import { px } from "@charcoal-ui/utils";
 
 // src/components/MultiSelect/context.ts
 import { createContext as createContext3 } from "react";
@@ -564,44 +661,96 @@ var MultiSelect = forwardRef6(
   }
 );
 var MultiSelect_default = memo2(MultiSelect);
-var MultiSelectRoot = styled6.label`
+var MultiSelectRoot = styled5.label`
   display: grid;
   grid-template-columns: auto 1fr;
   align-items: center;
   position: relative;
   cursor: pointer;
-  ${disabledSelector2} {
+  gap: ${({ theme }) => px(theme.spacing[4])};
+  &:disabled,
+  &[aria-disabled]:not([aria-disabled='false']) {
+    opacity: 0.32;
     cursor: default;
   }
-  gap: ${({ theme: theme3 }) => px2(theme3.spacing[4])};
-  ${theme((o) => o.disabled)}
 `;
-var MultiSelectLabel = styled6.div`
+var MultiSelectLabel = styled5.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 = styled6.input.attrs({ type: "checkbox" })`
+var MultiSelectInput = styled5.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);
+        }
+      }
+    }
+
+    &:hover {
+      &:not(:disabled):not([aria-disabled]),
+      &[aria-disabled='false'] {
+        background-color: var(--charcoal-text3-hover);
+      }
     }
 
-    ${({ invalid, overlay }) => theme((o) => [
-  o.bg.text3.hover.press,
-  o.borderRadius("oval"),
-  invalid && !overlay && o.outline.assertive,
-  overlay && o.bg.surface4
-])};
+    &:active {
+      &:not(:disabled):not([aria-disabled]),
+      &[aria-disabled='false'] {
+        background-color: var(--charcoal-text3-press);
+      }
+    }
+
+    ${({ 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);
+        }
+      `}
+    ${({ overlay }) => overlay && css3`
+        background-color: var(--charcoal-surface4);
+      `}
   }
 `;
-var MultiSelectInputOverlay = styled6.div`
+var MultiSelectInputOverlay = styled5.div`
   position: absolute;
   top: -2px;
   left: -2px;
@@ -609,17 +758,20 @@ var MultiSelectInputOverlay = styled6.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 && css3`
+      &: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 && css`
-      border-color: ${({ theme: theme3 }) => theme3.color.text5};
+  ${({ overlay }) => overlay && css3`
+      border-color: var(--charcoal-text5);
       border-width: 2px;
       border-style: solid;
     `}
@@ -670,8 +822,7 @@ function MultiSelectGroup({
 import { useSwitch } from "@react-aria/switch";
 import { useMemo, memo as memo3, forwardRef as forwardRef7 } from "react";
 import { useToggleState } from "react-stately";
-import styled7 from "styled-components";
-import { disabledSelector as disabledSelector3 } from "@charcoal-ui/utils";
+import styled6 from "styled-components";
 import { useObjectRef } from "@react-aria/utils";
 import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
 var SwitchCheckbox = forwardRef7(
@@ -698,33 +849,30 @@ var SwitchCheckbox = forwardRef7(
   }
 );
 var Switch_default = memo3(SwitchCheckbox);
-var Label = styled7.label`
+var Label = styled6.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);
   }
-
-  ${disabledSelector3} {
-    cursor: default;
-  }
 `;
-var LabelInner = styled7.div`
-  ${theme((o) => [
-  o.typography(14).preserveHalfLeading,
-  o.font.text2,
-  o.margin.left(4)
-])}
+var LabelInner = styled6.div`
+  font-size: 14px;
+  line-height: 22px;
+  color: var(--charcoal-text2);
+  margin-left: 4px;
 `;
-var SwitchInput = styled7.input.attrs({
-  type: "checkbox"
-})`
+var SwitchInput = styled6.input.attrs({ type: "checkbox" })`
   appearance: none;
   display: inline-flex;
   position: relative;
@@ -791,12 +939,11 @@ 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 styled9, { css as css2 } from "styled-components";
+import styled8, { css as css4 } from "styled-components";
 
 // src/components/FieldLabel/index.tsx
 import * as React4 from "react";
-import styled8 from "styled-components";
-import { createTheme as createTheme2 } from "@charcoal-ui/styled";
+import styled7 from "styled-components";
 import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
 var FieldLabel = React4.forwardRef(
   function FieldLabel2({
@@ -816,30 +963,97 @@ var FieldLabel = React4.forwardRef(
   }
 );
 var FieldLabel_default = FieldLabel;
-var theme2 = createTheme2(styled8);
-var Label2 = styled8.label`
-  ${theme2((o) => [o.typography(14).bold, o.font.text1])}
+var Label2 = styled7.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 = styled8.span`
-  ${theme2((o) => [o.typography(14), o.font.text2])}
+var RequiredText = styled7.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 = styled8.div`
-  ${theme2((o) => [
-  o.typography(14),
-  o.font.text3.hover.press,
-  o.outline.default.focus
-])}
+var SubLabelClickable = styled7.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 = styled8.div`
+var FieldLabelWrapper = styled7.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;
   }
 `;
 
@@ -967,16 +1181,16 @@ var TextField = React5.forwardRef(
   }
 );
 var TextField_default = TextField;
-var TextFieldRoot = styled9.div`
+var TextFieldRoot = styled8.div`
   display: flex;
   flex-direction: column;
 
   ${(p) => p.isDisabled && { opacity: p.theme.elementEffect.disabled.opacity }}
 `;
-var TextFieldLabel = styled9(FieldLabel_default)`
+var TextFieldLabel = styled8(FieldLabel_default)`
   margin-bottom: 8px;
 `;
-var StyledInputContainer = styled9.div`
+var StyledInputContainer = styled8.div`
   display: grid;
   grid-template-columns: ${(p) => [p.hasPrefix && "auto", "1fr", p.hasSuffix && "auto"].filter(Boolean).join(" ")};
   height: 40px;
@@ -1007,21 +1221,20 @@ var StyledInputContainer = styled9.div`
       ${(p) => p.invalid ? `rgba(255,43,0,0.32)` : `rgba(0, 150, 250, 0.32);`};
   }
 
-  ${(p) => p.invalid && css2`
+  ${(p) => p.invalid && css4`
       box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
     `}
 `;
-var PrefixContainer = styled9.div`
+var PrefixContainer = styled8.div`
   display: flex;
-  padding-left: 8px;
   align-items: center;
 `;
-var SuffixContainer = styled9.span`
+var SuffixContainer = styled8.span`
   display: flex;
   align-items: center;
   gap: 8px;
 `;
-var StyledInput = styled9.input`
+var StyledInput = styled8.input`
   border: none;
   box-sizing: border-box;
   outline: none;
@@ -1047,12 +1260,12 @@ var StyledInput = styled9.input`
     color: var(--charcoal-text3);
   }
 `;
-var SingleLineCounter = styled9.span`
+var SingleLineCounter = styled8.span`
   line-height: 22px;
   font-size: 14px;
   color: var(--charcoal-text3);
 `;
-var AssistiveText = styled9.p`
+var AssistiveText = styled8.p`
   font-size: 14px;
   line-height: 22px;
   margin-top: 4px;
@@ -1064,7 +1277,7 @@ var AssistiveText = styled9.p`
 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 styled10, { css as css3 } from "styled-components";
+import styled9, { css as css5 } from "styled-components";
 import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
 var TextArea = forwardRef10(
   function TextAreaInner({ onChange, ...props }, forwardRef18) {
@@ -1183,13 +1396,13 @@ var TextArea = forwardRef10(
   }
 );
 var TextArea_default = TextArea;
-var TextFieldRoot2 = styled10.div`
+var TextFieldRoot2 = styled9.div`
   display: flex;
   flex-direction: column;
 
   ${(p) => p.isDisabled && { opacity: p.theme.elementEffect.disabled.opacity }}
 `;
-var StyledTextareaContainer = styled10.div`
+var StyledTextareaContainer = styled9.div`
   position: relative;
   overflow: hidden;
 
@@ -1198,7 +1411,7 @@ var StyledTextareaContainer = styled10.div`
   border-radius: 4px;
   transition: 0.2s background-color, 0.2s box-shadow;
 
-  ${({ rows }) => css3`
+  ${({ rows }) => css5`
     height: calc(22px * ${rows} + 18px);
   `};
 
@@ -1212,11 +1425,11 @@ var StyledTextareaContainer = styled10.div`
       ${(p) => p.invalid ? `rgba(255,43,0,0.32)` : `rgba(0, 150, 250, 0.32);`};
   }
 
-  ${(p) => p.invalid && css3`
+  ${(p) => p.invalid && css5`
       box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
     `}
 `;
-var StyledTextarea = styled10.textarea`
+var StyledTextarea = styled9.textarea`
   border: none;
   outline: none;
   resize: none;
@@ -1233,7 +1446,7 @@ var StyledTextarea = styled10.textarea`
   padding: calc(9px / 0.875) calc(8px / 0.875)
     ${(p) => p.noBottomPadding ? 0 : ""};
 
-  ${({ rows = 1, noBottomPadding }) => css3`
+  ${({ rows = 1, noBottomPadding }) => css5`
     height: calc(22px / 0.875 * ${rows} + ${noBottomPadding ? 9 : 20}px);
   `};
 
@@ -1246,7 +1459,7 @@ var StyledTextarea = styled10.textarea`
     color: var(--charcoal-text3);
   }
 `;
-var MultiLineCounter = styled10.span`
+var MultiLineCounter = styled9.span`
   position: absolute;
   bottom: 9px;
   right: 8px;
@@ -1282,7 +1495,7 @@ import {
   Overlay,
   useModalOverlay
 } from "@react-aria/overlays";
-import styled12, { css as css5, useTheme } from "styled-components";
+import styled11, { css as css7, 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";
@@ -1290,7 +1503,7 @@ import { useObjectRef as useObjectRef2 } from "@react-aria/utils";
 
 // src/components/Modal/Dialog/index.tsx
 import { forwardRef as forwardRef12 } from "react";
-import styled11, { css as css4 } from "styled-components";
+import styled10, { css as css6 } from "styled-components";
 import { useDialog } from "@react-aria/dialog";
 
 // ../foundation/src/grid.ts
@@ -1342,7 +1555,7 @@ var Dialog = forwardRef12(function Dialog2(props, forwardRef18) {
     }
   );
 });
-var AnimatedStyledDialogDiv = animated(styled11.div`
+var AnimatedStyledDialogDiv = animated(styled10.div`
   margin: auto;
   position: relative;
   height: fit-content;
@@ -1363,18 +1576,18 @@ var AnimatedStyledDialogDiv = animated(styled11.div`
   }
 }}px;
 
-  background-color: ${({ theme: theme3 }) => theme3.color.background1};
+  background-color: var(--charcoal-surface1);
   border-radius: 24px;
 
-  @media ${({ theme: theme3 }) => maxWidth(theme3.breakpoint.screen1)} {
+  @media ${({ theme }) => maxWidth(theme.breakpoint.screen1)} {
     max-width: 440px;
     width: calc(100% - 48px);
-    ${(p) => p.bottomSheet !== false && css4`
+    ${(p) => p.bottomSheet !== false && css6`
         max-width: unset;
         width: 100%;
         border-radius: 0;
         margin: auto 0 0 0;
-        ${p.bottomSheet === "full" && css4`
+        ${p.bottomSheet === "full" && css6`
           min-height: 100%;
         `}
       `}
@@ -1405,7 +1618,10 @@ var Modal = forwardRef13(function ModalInner({ children, zIndex = DEFAULT_Z_INDE
   } = props;
   const ref = useObjectRef2(external);
   const { modalProps, underlayProps } = useModalOverlay(
-    props,
+    {
+      ...props,
+      isKeyboardDismissDisabled: isDismissable === void 0 || isDismissable === false
+    },
     {
       close: onClose,
       isOpen,
@@ -1418,8 +1634,8 @@ var Modal = forwardRef13(function ModalInner({ children, zIndex = DEFAULT_Z_INDE
     },
     ref
   );
-  const theme3 = useTheme();
-  const isMobile = useMedia(maxWidth2(theme3.breakpoint.screen1)) ?? false;
+  const theme = useTheme();
+  const isMobile = useMedia(maxWidth2(theme.breakpoint.screen1)) ?? false;
   const transitionEnabled = isMobile && bottomSheet !== false;
   const showDismiss = !isMobile || bottomSheet !== true;
   const transition = useTransition(isOpen, {
@@ -1498,7 +1714,7 @@ var ModalContext = React9.createContext({
   showDismiss: true,
   bottomSheet: false
 });
-var ModalBackground = animated2(styled12.div`
+var ModalBackground = animated2(styled11.div`
   z-index: ${({ zIndex }) => zIndex};
   overflow: auto;
   display: flex;
@@ -1512,33 +1728,44 @@ var ModalBackground = animated2(styled12.div`
   padding: 40px 0;
   box-sizing: border-box;
 
-  background-color: ${({ theme: theme3 }) => theme3.color.surface4};
+  background-color: var(--charcoal-surface4);
 
-  @media ${({ theme: theme3 }) => maxWidth2(theme3.breakpoint.screen1)} {
-    ${(p) => p.$bottomSheet !== false && css5`
+  @media ${({ theme }) => maxWidth2(theme.breakpoint.screen1)} {
+    ${(p) => p.$bottomSheet !== false && css7`
         padding: 0;
       `}
   }
 `);
-var ModalCrossButton = styled12(IconButton_default)`
+var ModalCrossButton = styled11(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 } = useContext4(ModalContext);
   return /* @__PURE__ */ jsx14(ModalHeading, { ...titleProps, ...props, children: title });
 }
-var ModalHeading = styled12.h3`
+var ModalHeading = styled11.h3`
   margin: 0;
   font-weight: inherit;
   font-size: inherit;
 `;
 
 // src/components/Modal/ModalPlumbing.tsx
-import styled13, { css as css6 } from "styled-components";
+import styled12, { css as css8 } 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";
@@ -1546,37 +1773,59 @@ function ModalHeader() {
   const modalCtx = useContext5(ModalContext);
   return /* @__PURE__ */ jsx15(ModalHeaderRoot, { $bottomSheet: modalCtx.bottomSheet, children: /* @__PURE__ */ jsx15(StyledModalTitle, {}) });
 }
-var ModalHeaderRoot = styled13.div`
+var ModalHeaderRoot = styled12.div`
   height: 64px;
   display: grid;
   align-content: center;
   justify-content: center;
-  @media ${({ theme: theme3 }) => maxWidth3(theme3.breakpoint.screen1)} {
-    ${(p) => p.$bottomSheet !== false && css6`
+  @media ${({ theme }) => maxWidth3(theme.breakpoint.screen1)} {
+    ${(p) => p.$bottomSheet !== false && css8`
         height: 48px;
       `}
   }
 `;
-var StyledModalTitle = styled13(ModalTitle)`
-  ${theme((o) => [o.font.text1, o.typography(16).bold])}
+var StyledModalTitle = styled12(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 = styled13.div`
-  ${theme((o) => [o.padding.horizontal(16)])}
+var ModalAlign = styled12.div`
+  padding-left: 16px;
+  padding-right: 16px;
 `;
-var ModalBody = styled13.div`
-  ${theme((o) => [o.padding.bottom(40)])}
+var ModalBody = styled12.div`
+  padding-bottom: 40px;
 `;
-var ModalButtons = styled13.div`
+var ModalButtons = styled12.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
 import { forwardRef as forwardRef14, useImperativeHandle, useRef as useRef5, memo as memo5 } from "react";
-import styled14, { keyframes } from "styled-components";
+import styled13, { keyframes } from "styled-components";
 import { jsx as jsx16 } from "react/jsx-runtime";
 var LoadingSpinner = forwardRef14(
   function LoadingSpinnerInner({ size = 48, padding = 16, transparent = false, className }, ref) {
@@ -1594,7 +1843,7 @@ var LoadingSpinner = forwardRef14(
   }
 );
 var LoadingSpinner_default = memo5(LoadingSpinner);
-var LoadingSpinnerRoot = styled14.div.attrs({ role: "progressbar" })`
+var LoadingSpinnerRoot = styled13.div.attrs({ role: "progressbar" })`
   box-sizing: content-box;
   margin: auto;
   padding: ${(props) => props.padding}px;
@@ -1603,10 +1852,8 @@ var LoadingSpinnerRoot = styled14.div.attrs({ role: "progressbar" })`
   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 = keyframes`
   from {
@@ -1619,7 +1866,7 @@ var scaleOut = keyframes`
     opacity: 0;
   }
 `;
-var Icon2 = styled14.div.attrs({ role: "presentation" })`
+var Icon2 = styled13.div.attrs({ role: "presentation" })`
   width: 1em;
   height: 1em;
   border-radius: 1em;
@@ -1650,8 +1897,8 @@ var LoadingSpinnerIcon = forwardRef14(
 
 // src/components/DropdownSelector/index.tsx
 import { useState as useState3, useRef as useRef9 } from "react";
-import styled17 from "styled-components";
-import { disabledSelector as disabledSelector4 } from "@charcoal-ui/utils";
+import styled16, { css as css9 } from "styled-components";
+import { disabledSelector as disabledSelector2 } from "@charcoal-ui/utils";
 
 // src/components/DropdownSelector/DropdownPopover.tsx
 import { useEffect as useEffect6, useRef as useRef7 } from "react";
@@ -1659,7 +1906,7 @@ import { useEffect as useEffect6, 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 styled15 from "styled-components";
+import styled14 from "styled-components";
 
 // src/components/DropdownSelector/Popover/usePreventScroll.tsx
 import { useEffect as useEffect5 } from "react";
@@ -1721,18 +1968,16 @@ function Popover(props) {
     ] })
   ] });
 }
-var DropdownPopoverDiv = styled15.div`
+var DropdownPopoverDiv = styled14.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
@@ -1796,7 +2041,7 @@ function findPreviewRecursive(children, value) {
 
 // src/components/DropdownSelector/MenuList/index.tsx
 import { useRef as useRef8 } from "react";
-import styled16 from "styled-components";
+import styled15 from "styled-components";
 
 // src/components/DropdownSelector/MenuList/MenuListContext.ts
 import { createContext as createContext6 } from "react";
@@ -1848,7 +2093,7 @@ function MenuList(props) {
     }
   ) });
 }
-var StyledUl = styled16.ul`
+var StyledUl = styled15.ul`
   padding: 0;
   margin: 0;
 `;
@@ -1911,21 +2156,20 @@ function DropdownSelector(props) {
     props.assistiveText !== void 0 && /* @__PURE__ */ jsx20(AssertiveText, { invalid: props.invalid, children: props.assistiveText })
   ] });
 }
-var DropdownSelectorRoot = styled17.div`
+var DropdownSelectorRoot = styled16.div`
   display: inline-block;
   width: 100%;
 
-  ${disabledSelector4} {
+  ${disabledSelector2} {
     cursor: default;
-    ${theme((o) => o.disabled)}
+    opacity: 0.32;
   }
 `;
-var DropdownFieldLabel = styled17(FieldLabel_default)`
+var DropdownFieldLabel = styled16(FieldLabel_default)`
   width: 100%;
-
-  ${theme((o) => o.margin.bottom(8))}
+  margin-bottom: 8px;
 `;
-var DropdownButton = styled17.button`
+var DropdownButton = styled16.button`
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -1936,64 +2180,117 @@ var DropdownButton = styled17.button`
   border: none;
   cursor: pointer;
 
-  ${disabledSelector4} {
+  ${disabledSelector2} {
     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;
+
+  &: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);
+    }
+  }
+
+  ${({ 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 = styled17.span`
+var DropdownButtonText = styled16.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);
+  &::before {
+    display: block;
+    width: 0;
+    height: 0;
+    content: '';
+    margin-top: -4px;
+  }
+  &::after {
+    display: block;
+    width: 0;
+    height: 0;
+    content: '';
+    margin-bottom: -4px;
+  }
 `;
-var DropdownButtonIcon = styled17(Icon_default)`
-  ${theme((o) => [o.font.text2])}
+var DropdownButtonIcon = styled16(Icon_default)`
+  color: var(--charcoal-text2);
 `;
-var AssertiveText = styled17.div`
-  ${({ invalid }) => theme((o) => [
-  o.typography(14),
-  o.margin.top(8),
-  invalid === true ? o.font.assertive : o.font.text2
-])}
+var AssertiveText = styled16.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 && css9`
+      color: var(--charcoal-assertive);
+    `}
 `;
 
 // src/components/DropdownSelector/DropdownMenuItem.tsx
-import styled19 from "styled-components";
+import styled18 from "styled-components";
 
 // src/components/DropdownSelector/ListItem/index.tsx
-import styled18 from "styled-components";
+import styled17 from "styled-components";
 import { jsx as jsx21 } from "react/jsx-runtime";
 function ListItem(props) {
   const { children, ...rest } = props;
   return /* @__PURE__ */ jsx21(StyledLi, { role: "option", children: /* @__PURE__ */ jsx21(ItemDiv, { ...rest, children: props.children }) });
 }
-var StyledLi = styled18.li`
+var StyledLi = styled17.li`
   list-style: none;
 `;
-var ItemDiv = styled18.div`
+var ItemDiv = styled17.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);
   }
 `;
 
@@ -2094,20 +2391,37 @@ function DropdownMenuItem(props) {
     /* @__PURE__ */ jsx23(StyledSpan, { isSelected, children: props.children })
   ] });
 }
-var StyledSpan = styled19.span`
-  ${theme((o) => [o.typography(14), o.font.text2])};
+var StyledSpan = styled18.span`
+  font-size: 14px;
+  line-height: 22px;
+  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;
+  }
+
   display: flex;
   align-items: center;
   width: 100%;
   margin-left: ${({ isSelected }) => isSelected === true ? 0 : 20}px;
 `;
-var Text2ColorIcon = styled19(Icon_default)`
-  ${theme((o) => [o.font.text2])}
+var Text2ColorIcon = styled18(Icon_default)`
+  color: var(--charcoal-text2);
   padding-right: 4px;
 `;
 
 // src/components/DropdownSelector/MenuItemGroup/index.tsx
-import styled20 from "styled-components";
+import styled19 from "styled-components";
 import { jsx as jsx24, jsxs as jsxs12 } from "react/jsx-runtime";
 function MenuItemGroup(props) {
   return /* @__PURE__ */ jsxs12(StyledLi2, { role: "presentation", children: [
@@ -2115,21 +2429,21 @@ function MenuItemGroup(props) {
     /* @__PURE__ */ jsx24(StyledUl2, { role: "group", children: props.children })
   ] });
 }
-var TextSpan = styled20.span`
+var TextSpan = styled19.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 = styled20.ul`
+var StyledUl2 = styled19.ul`
   padding-left: 0;
   margin: 0;
   box-sizing: border-box;
   list-style: none;
   overflow: hidden;
 `;
-var StyledLi2 = styled20.li`
+var StyledLi2 = styled19.li`
   display: block;
 `;
 
@@ -2140,8 +2454,7 @@ import {
   useRadio,
   useRadioGroup
 } from "@react-aria/radio";
-import styled21 from "styled-components";
-import { disabledSelector as disabledSelector5 } from "@charcoal-ui/utils";
+import styled20, { css as css10 } from "styled-components";
 
 // src/components/SegmentedControl/RadioGroupContext.tsx
 import { createContext as createContext7, useContext as useContext9 } from "react";
@@ -2229,32 +2542,36 @@ var Segmented = (props) => {
     }
   );
 };
-var SegmentedControlRoot = styled21.div`
+var SegmentedControlRoot = styled20.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 = styled21.label`
+var SegmentedRoot = styled20.label`
   position: relative;
   display: flex;
   align-items: center;
   cursor: pointer;
   height: 32px;
 
-  ${disabledSelector5} {
+  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 && css10`
+      background-color: var(--charcoal-brand);
+      color: var(--charcoal-text5);
+    `}
 `;
-var SegmentedInput = styled21.input`
+var SegmentedInput = styled20.input`
   position: absolute;
 
   height: 0px;
@@ -2268,29 +2585,47 @@ var SegmentedInput = styled21.input`
   white-space: nowrap;
   opacity: 0;
 `;
-var RadioLabel2 = styled21.div`
+var RadioLabel2 = styled20.div`
   background: transparent;
   display: flex;
   align-items: center;
   height: 22px;
 `;
-var SegmentedLabelInner = styled21.div`
-  ${theme((o) => [o.typography(14)])}
+var SegmentedLabelInner = styled20.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
 import { forwardRef as forwardRef16, memo as memo7, useMemo as useMemo3 } from "react";
-import styled22, { css as css7 } from "styled-components";
+import styled21, { css as css11 } 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 { disabledSelector as disabledSelector6, px as px3 } from "@charcoal-ui/utils";
+import { disabledSelector as disabledSelector3 } from "@charcoal-ui/utils";
 import { jsx as jsx27, jsxs as jsxs14 } from "react/jsx-runtime";
 var Checkbox = forwardRef16(
   function CheckboxInner({ invalid = false, ...props }, ref) {
     const ariaCheckboxProps = useMemo3(
       () => ({
         ...props,
+        isInValid: invalid,
         isSelected: props.checked,
         defaultSelected: props.defaultChecked,
         validationState: invalid ? "invalid" : "valid",
@@ -2305,7 +2640,7 @@ var Checkbox = forwardRef16(
     const isDisabled = (props.disabled ?? false) || (props.readonly ?? false);
     return /* @__PURE__ */ jsxs14(InputRoot, { "aria-disabled": isDisabled, className: props.className, children: [
       /* @__PURE__ */ jsxs14(CheckboxRoot, { children: [
-        /* @__PURE__ */ jsx27(CheckboxInput, { type: "checkbox", ...inputProps, invalid }),
+        /* @__PURE__ */ jsx27(CheckboxInput, { type: "checkbox", ...inputProps }),
         /* @__PURE__ */ jsx27(CheckboxInputOverlay, { "aria-hidden": true, checked: inputProps.checked, children: /* @__PURE__ */ jsx27(Icon_default, { name: "24/Check", unsafeNonGuidelineScale: 2 / 3 }) })
       ] }),
       "children" in props && /* @__PURE__ */ jsx27(InputLabel, { children: props.children })
@@ -2313,25 +2648,28 @@ var Checkbox = forwardRef16(
   }
 );
 var Checkbox_default = memo7(Checkbox);
-var hiddenCss = css7`
+var hiddenCss = css11`
   visibility: hidden;
 `;
-var InputRoot = styled22.label`
+var InputRoot = styled21.label`
   position: relative;
   display: flex;
 
   cursor: pointer;
-  ${disabledSelector6} {
+  ${disabledSelector3} {
     cursor: default;
   }
 
-  gap: ${({ theme: theme3 }) => px3(theme3.spacing[4])};
-  ${theme((o) => [o.disabled])}
+  gap: 4px;
+  &:disabled,
+  &[aria-disabled]:not([aria-disabled='false']) {
+    opacity: 0.32;
+  }
 `;
-var CheckboxRoot = styled22.div`
+var CheckboxRoot = styled21.div`
   position: relative;
 `;
-var CheckboxInput = styled22.input`
+var CheckboxInput = styled21.input`
   &[type='checkbox'] {
     appearance: none;
     display: block;
@@ -2339,23 +2677,50 @@ var CheckboxInput = styled22.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 = styled22.div`
+var CheckboxInputOverlay = styled21.div`
   position: absolute;
   top: -2px;
   left: -2px;
@@ -2363,14 +2728,14 @@ var CheckboxInputOverlay = styled22.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 = styled22.div`
-  ${theme((o) => [o.font.text2])}
-
+var InputLabel = styled21.div`
+  color: var(--charcoal-text2);
   font-size: 14px;
   /** checkbox の height が 20px なのでcheckbox と text が揃っているように見せるために行ボックスの高さを 20px にしている */
   line-height: 20px;
@@ -2379,8 +2744,8 @@ var InputLabel = styled22.div`
 // src/components/TagItem/index.tsx
 import { forwardRef as forwardRef17, memo as memo8, useMemo as useMemo4 } from "react";
 import { useObjectRef as useObjectRef4 } from "@react-aria/utils";
-import styled23, { css as css8 } from "styled-components";
-import { disabledSelector as disabledSelector7, px as px4 } from "@charcoal-ui/utils";
+import styled22, { css as css12 } from "styled-components";
+import { px as px2 } from "@charcoal-ui/utils";
 import { useButton } from "@react-aria/button";
 import { jsx as jsx28, jsxs as jsxs15 } from "react/jsx-runtime";
 var sizeMap = {
@@ -2433,7 +2798,20 @@ var TagItem = forwardRef17(
   }
 );
 var TagItem_default = memo8(TagItem);
-var TagItemRoot = styled23.a`
+var horizontalPadding = ({ left, right }) => css12`
+  padding-right: ${px2(right)};
+  padding-left: ${px2(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 = styled22.a`
   isolation: isolate;
   position: relative;
   height: ${({ size }) => sizeMap[size]}px;
@@ -2443,22 +2821,30 @@ var TagItemRoot = styled23.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)] : []
-])}
-
-  ${disabledSelector7} {
-    ${theme((o) => [o.disabled])}
+  &:disabled,
+  &[aria-disabled]:not([aria-disabled='false']) {
+    opacity: 0.32;
     cursor: default;
   }
 `;
-var Background = styled23.div`
+var Background = styled22.div`
   position: absolute;
   z-index: 1;
   top: 0;
@@ -2467,10 +2853,13 @@ var Background = styled23.div`
   height: 100%;
 
   background-color: ${({ bgColor }) => bgColor};
-  ${({ status }) => status === "inactive" && theme((o) => o.bg.surface3)}
+  ${({ status }) => status === "inactive" && css12`
+      background-color: var(--charcoal-surface3);
+    `}
+
+  ${({ bgImage }) => bgImage !== void 0 && css12`
+      background-color: var(--charcoal-surface4);
 
-  ${({ bgImage }) => bgImage !== void 0 && css8`
-      ${theme((o) => [o.bg.surface4])}
       &::before {
         content: '';
         position: absolute;
@@ -2485,25 +2874,43 @@ var Background = styled23.div`
       }
     `}
 `;
-var Inner = styled23.div`
+var Inner = styled22.div`
   display: inline-flex;
-  gap: ${({ theme: theme3 }) => px4(theme3.spacing[8])};
+  gap: 8px;
   align-items: center;
   z-index: 2;
 `;
-var labelCSS = css8`
-  ${theme((o) => [o.typography(14).bold])}
+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 = css8`
+var translateLabelCSS = css12`
   display: flex;
   align-items: center;
   flex-direction: column;
   font-size: 10px;
 `;
-var LabelWrapper = styled23.div`
+var LabelWrapper = styled22.div`
   ${({ isTranslate }) => isTranslate ?? false ? translateLabelCSS : labelCSS}
 `;
-var Label3 = styled23.span`
+var Label3 = styled22.span`
   max-width: 152px;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -2512,8 +2919,25 @@ var Label3 = styled23.span`
   color: inherit;
   line-height: inherit;
 `;
-var TranslatedLabel = styled23.div`
-  ${theme((o) => [o.typography(12).bold])}
+var TranslatedLabel = styled22.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;
+  }
 `;
 export {
   Button_default as Button,