@charcoal-ui/react 2.6.0 → 3.0.0-beta.0

package/dist/components/Button/index.d.ts

@@ -14,7 +14,7 @@ interface StyledProps {
     /**
      * 幅を最大まで広げて描画
      */
-    fixed: boolean;
+    fullWidth: boolean;
 }
 export type ButtonProps = Partial<StyledProps> & ClickableProps;
 declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<ClickableElement>>;

package/dist/components/Button/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Button/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,OAAkB,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,cAAc,CAAA;AAE1E,KAAK,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,YAAY,CAAA;AAC1E,KAAK,IAAI,GAAG,GAAG,GAAG,GAAG,CAAA;AAErB,UAAU,WAAW;IACnB;;OAEG;IACH,OAAO,EAAE,OAAO,CAAA;IAChB;;OAEG;IACH,IAAI,EAAE,IAAI,CAAA;IACV;;OAEG;IACH,KAAK,EAAE,OAAO,CAAA;CACf;AAED,MAAM,MAAM,WAAW,GAAG,OAAO,CAAC,WAAW,CAAC,GAAG,cAAc,CAAA;AAE/D,QAAA,MAAM,MAAM,sFAuBV,CAAA;AACF,eAAe,MAAM,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Button/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsB,MAAM,OAAO,CAAA;AAI1C,OAAkB,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,cAAc,CAAA;AAE1E,KAAK,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,YAAY,CAAA;AAC1E,KAAK,IAAI,GAAG,GAAG,GAAG,GAAG,CAAA;AAErB,UAAU,WAAW;IACnB;;OAEG;IACH,OAAO,EAAE,OAAO,CAAA;IAChB;;OAEG;IACH,IAAI,EAAE,IAAI,CAAA;IACV;;OAEG;IACH,SAAS,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,MAAM,WAAW,GAAG,OAAO,CAAC,WAAW,CAAC,GAAG,cAAc,CAAA;AAE/D,QAAA,MAAM,MAAM,sFAuBV,CAAA;AACF,eAAe,MAAM,CAAA"}

package/dist/components/Modal/ModalPlumbing.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ModalPlumbing.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/ModalPlumbing.tsx"],"names":[],"mappings":"AAMA,wBAAgB,WAAW,gBAM1B;AAaD,eAAO,MAAM,UAAU,yGAMtB,CAAA;AAED,eAAO,MAAM,SAAS,yGAErB,CAAA;AAED,eAAO,MAAM,YAAY,yGASxB,CAAA"}
+{"version":3,"file":"ModalPlumbing.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/ModalPlumbing.tsx"],"names":[],"mappings":"AAKA,wBAAgB,WAAW,gBAM1B;AAaD,eAAO,MAAM,UAAU,yGAEtB,CAAA;AAED,eAAO,MAAM,SAAS,yGAErB,CAAA;AAED,eAAO,MAAM,YAAY,yGAMxB,CAAA"}

package/dist/components/Radio/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Radio/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkC,MAAM,OAAO,CAAA;AAMtD,MAAM,MAAM,UAAU,GAAG,KAAK,CAAC,iBAAiB,CAAC;IAC/C,KAAK,EAAE,MAAM,CAAA;IACb,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAC,CAAA;AAEF,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAC5B,KAAK,EACL,YAAoB,EACpB,QAAgB,EAChB,QAAQ,GACT,EAAE,UAAU,eAwCZ;AAYD,eAAO,MAAM,UAAU;;;;UA4CtB,CAAA;AAMD,MAAM,MAAM,eAAe,GAAG,KAAK,CAAC,iBAAiB,CAAC;IACpD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAAA;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAC,CAAA;AA+BF,wBAAgB,UAAU,CAAC,EACzB,SAAS,EACT,KAAK,EACL,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,QAAQ,GACT,EAAE,eAAe,eA8BjB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Radio/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkC,MAAM,OAAO,CAAA;AAMtD,MAAM,MAAM,UAAU,GAAG,KAAK,CAAC,iBAAiB,CAAC;IAC/C,KAAK,EAAE,MAAM,CAAA;IACb,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAC,CAAA;AAEF,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAC5B,KAAK,EACL,YAAoB,EACpB,QAAgB,EAChB,QAAQ,GACT,EAAE,UAAU,eAwCZ;AAYD,eAAO,MAAM,UAAU;;;;UA+CtB,CAAA;AAMD,MAAM,MAAM,eAAe,GAAG,KAAK,CAAC,iBAAiB,CAAC;IACpD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAAA;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAC,CAAA;AA+BF,wBAAgB,UAAU,CAAC,EACzB,SAAS,EACT,KAAK,EACL,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,QAAQ,GACT,EAAE,eAAe,eA8BjB"}

package/dist/components/Switch/index.story.d.ts

@@ -9,6 +9,7 @@ interface Props {
     checked: boolean;
     disabled: boolean;
 }
+export declare const Playground: Story<Props>;
 export declare const Labelled: Story<Props>;
 export declare const Unlabelled: Story<Props>;
 //# sourceMappingURL=index.story.d.ts.map

package/dist/components/Switch/index.story.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/components/Switch/index.story.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AACzC,OAAO,MAAM,MAAM,GAAG,CAAA;;;;;AAEtB,wBAGC;AAED,UAAU,KAAK;IACb,OAAO,EAAE,OAAO,CAAA;IAChB,QAAQ,EAAE,OAAO,CAAA;CAClB;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,KAAK,CAMjC,CAAA;AAOD,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,KAAK,CASnC,CAAA"}
+{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/components/Switch/index.story.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AACzC,OAAO,MAAM,MAAM,GAAG,CAAA;;;;;AAEtB,wBAGC;AAED,UAAU,KAAK;IACb,OAAO,EAAE,OAAO,CAAA;IAChB,QAAQ,EAAE,OAAO,CAAA;CAClB;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,KAAK,CAiBnC,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,KAAK,CAMjC,CAAA;AAOD,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,KAAK,CASnC,CAAA"}

package/dist/components/TagItem/index.d.ts

@@ -11,6 +11,7 @@ export type TagItemProps = {
     status?: 'default' | 'active' | 'inactive';
     size?: keyof typeof sizeMap;
     disabled?: boolean;
+    className?: string;
 } & Pick<ComponentPropsWithoutRef<'a'>, 'href' | 'target' | 'rel' | 'onClick'>;
 declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<{
     label: string;
@@ -20,6 +21,7 @@ declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponen
     status?: "default" | "active" | "inactive" | undefined;
     size?: "S" | "M" | undefined;
     disabled?: boolean | undefined;
+    className?: string | undefined;
 } & Pick<Pick<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "key" | "css" | keyof React.AnchorHTMLAttributes<HTMLAnchorElement>>, "href" | "rel" | "target" | "onClick"> & React.RefAttributes<HTMLAnchorElement>>>;
 export default _default;
 //# sourceMappingURL=index.d.ts.map

package/dist/components/TagItem/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/TagItem/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAIZ,wBAAwB,EACzB,MAAM,OAAO,CAAA;AAQd,QAAA,MAAM,OAAO;;;CAGZ,CAAA;AAED,MAAM,MAAM,YAAY,GAAG;IACzB,KAAK,EAAE,MAAM,CAAA;IACb,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,MAAM,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,UAAU,CAAA;IAC1C,IAAI,CAAC,EAAE,MAAM,OAAO,OAAO,CAAA;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,GAAG,IAAI,CAAC,wBAAwB,CAAC,GAAG,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC,CAAA;;;;;;;;;;AAuD9E,wBAA4B"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/TagItem/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAIZ,wBAAwB,EACzB,MAAM,OAAO,CAAA;AAQd,QAAA,MAAM,OAAO;;;CAGZ,CAAA;AAED,MAAM,MAAM,YAAY,GAAG;IACzB,KAAK,EAAE,MAAM,CAAA;IACb,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,MAAM,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,UAAU,CAAA;IAC1C,IAAI,CAAC,EAAE,MAAM,OAAO,OAAO,CAAA;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,GAAG,IAAI,CAAC,wBAAwB,CAAC,GAAG,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC,CAAA;;;;;;;;;;;AAyD9E,wBAA4B"}

package/dist/components/TagItem/index.story.d.ts

@@ -11,6 +11,7 @@ declare const _default: {
         status?: "default" | "active" | "inactive" | undefined;
         size?: "S" | "M" | undefined;
         disabled?: boolean | undefined;
+        className?: string | undefined;
     } & Pick<Pick<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "key" | "css" | keyof React.AnchorHTMLAttributes<HTMLAnchorElement>>, "href" | "rel" | "target" | "onClick"> & React.RefAttributes<HTMLAnchorElement>>>;
     argTypes: {
         bgColor: {

package/dist/components/TagItem/index.story.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/components/TagItem/index.story.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAgB,EAAE,YAAY,EAAE,MAAM,GAAG,CAAA;AACzC,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;;;;;;;;;;;;;;;;;;;;AAEzC,wBAUC;AAED,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,YAAY,CAEvC,CAAA;AASD,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,YAAY,CA4I1C,CAAA"}
+{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/components/TagItem/index.story.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAgB,EAAE,YAAY,EAAE,MAAM,GAAG,CAAA;AACzC,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;;;;;;;;;;;;;;;;;;;;;AAEzC,wBAUC;AAED,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,YAAY,CAEvC,CAAA;AAUD,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,YAAY,CA4I1C,CAAA"}

package/dist/index.cjs.js

@@ -205,7 +205,7 @@ var Button2 = import_react4.default.forwardRef(function Button3({
   children,
   variant = "Default",
   size = "M",
-  fixed = false,
+  fullWidth: fixed = false,
   disabled = false,
   ...rest
 }, ref) {
@@ -216,7 +216,7 @@ var Button2 = import_react4.default.forwardRef(function Button3({
       disabled,
       variant,
       size,
-      fixed,
+      fullWidth: fixed,
       ref
     },
     children
@@ -225,10 +225,10 @@ var Button2 = import_react4.default.forwardRef(function Button3({
 var Button_default = Button2;
 var StyledButton = (0, import_styled_components4.default)(Clickable_default).withConfig({
   shouldForwardProp(prop) {
-    return prop !== "fixed";
+    return prop !== "fullWidth";
   }
 }).attrs(styledProps)`
-  width: ${(p) => p.fixed ? "stretch" : "min-content"};
+  width: ${(p) => p.fullWidth ? "stretch" : "min-content"};
   display: inline-grid;
   align-items: center;
   justify-content: center;
@@ -464,6 +464,9 @@ var RadioInput = import_styled_components6.default.input.attrs({ type: "radio" }
     }
 
     ${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`
@@ -751,6 +754,10 @@ var Label = import_styled_components8.default.label`
 
   ${theme((o) => o.disabled)}
 
+  :active > input {
+    box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
+  }
+
   ${import_utils4.disabledSelector} {
     cursor: default;
   }
@@ -765,42 +772,63 @@ var LabelInner = import_styled_components8.default.div`
 var SwitchInput = import_styled_components8.default.input.attrs({
   type: "checkbox"
 })`
-  &[type='checkbox'] {
-    appearance: none;
-    display: inline-flex;
-    position: relative;
-    box-sizing: border-box;
-    width: 28px;
-    border: 2px solid transparent;
-    transition: box-shadow 0.2s, background-color 0.2s;
-    cursor: inherit;
-    ${theme((o) => [
-  o.borderRadius(16),
-  o.height.px(16),
-  o.bg.text4.hover.press,
-  o.outline.default.focus,
-  o.margin.all(0)
-])}
+  appearance: none;
+  display: inline-flex;
+  position: relative;
+  box-sizing: border-box;
+  width: 28px;
+  border: 2px solid transparent;
 
-    &::after {
-      content: '';
-      position: absolute;
-      display: block;
-      top: 0;
-      left: 0;
-      width: 12px;
-      height: 12px;
-      transform: translateX(0);
-      transition: transform 0.2s;
-      ${theme((o) => [o.bg.text5.hover.press, o.borderRadius("oval")])}
-    }
+  transition-property: background-color, box-shadow;
+  transition-duration: 0.2s;
+  cursor: inherit;
 
-    &:checked {
-      ${theme((o) => o.bg.brand.hover.press)}
+  outline: none;
+  border-radius: 16px;
+  height: 16px;
+  margin: 0;
+  background-color: var(--charcoal-text4);
+  :hover {
+    background-color: var(--charcoal-text4-hover);
+  }
+  :active {
+    background-color: var(--charcoal-text4-press);
+  }
+  :focus {
+    box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
+  }
 
-      &::after {
-        transform: translateX(12px);
-      }
+  &::after {
+    content: '';
+    position: absolute;
+    display: block;
+    top: 0;
+    left: 0;
+    width: 12px;
+    height: 12px;
+    transform: translateX(0);
+    transition: transform 0.2s;
+    border-radius: 1024px;
+    background-color: var(--charcoal-text5);
+    :hover {
+      background-color: var(--charcoal-text5-hover);
+    }
+    :active {
+      background-color: var(--charcoal-text5-press);
+    }
+  }
+
+  &:checked {
+    background-color: var(--charcoal-brand);
+    :hover {
+      background-color: var(--charcoal-brand-hover);
+    }
+    :active {
+      background-color: var(--charcoal-brand-press);
+    }
+    &::after {
+      transform: translateX(12px);
+      transition: transform 0.2s;
     }
   }
 `;
@@ -1158,6 +1186,13 @@ var StyledTextareaContainer = import_styled_components10.default.div`
   o.borderRadius(4)
 ])}
 
+  /**
+   * FIXME: o.outline.default を &:focus-within 内に書いてると、外れるときに transition が効かない
+   * 本来 o.outline.default.focus と書けば足してくれるような transition の内容を一旦明示している
+   * o.outline.default.focusWithin のようなものがあればこの行は不要になるはず
+   */
+  transition: box-shadow 0.2s;
+
   &:focus-within {
     ${(p) => theme3((o) => p.invalid ? o.outline.assertive : o.outline.default)}
   }
@@ -1412,7 +1447,6 @@ var ModalHeading = import_styled_components11.default.h3`
 // src/components/Modal/ModalPlumbing.tsx
 var import_react14 = __toESM(require("react"));
 var import_styled_components12 = __toESM(require("styled-components"));
-var import_utils6 = require("@charcoal-ui/utils");
 function ModalHeader() {
   return /* @__PURE__ */ import_react14.default.createElement(ModalHeaderRoot, null, /* @__PURE__ */ import_react14.default.createElement(StyledModalTitle, null));
 }
@@ -1426,11 +1460,7 @@ var StyledModalTitle = (0, import_styled_components12.default)(ModalTitle)`
   ${theme((o) => [o.font.text1, o.typography(16).bold])}
 `;
 var ModalAlign = import_styled_components12.default.div`
-  ${theme((o) => [o.padding.horizontal(24)])}
-
-  @media ${({ theme: theme4 }) => (0, import_utils6.maxWidth)(theme4.breakpoint.screen1)} {
-    ${theme((o) => [o.padding.horizontal(16)])}
-  }
+  ${theme((o) => [o.padding.horizontal(16)])}
 `;
 var ModalBody = import_styled_components12.default.div`
   ${theme((o) => [o.padding.bottom(40)])}
@@ -1439,11 +1469,8 @@ var ModalButtons = import_styled_components12.default.div`
   display: grid;
   grid-auto-flow: row;
   grid-row-gap: 8px;
-  ${theme((o) => [o.padding.horizontal(24).top(16)])}
 
-  @media ${({ theme: theme4 }) => (0, import_utils6.maxWidth)(theme4.breakpoint.screen1)} {
-    ${theme((o) => [o.padding.horizontal(16)])}
-  }
+  ${theme((o) => [o.padding.horizontal(16).top(16)])}
 `;
 
 // src/components/LoadingSpinner/index.tsx
@@ -1511,7 +1538,7 @@ var LoadingSpinnerIcon = import_react15.default.forwardRef(function LoadingSpinn
 var import_react20 = __toESM(require("react"));
 var import_styled_components19 = __toESM(require("styled-components"));
 var import_react_stately2 = require("react-stately");
-var import_utils9 = require("@charcoal-ui/utils");
+var import_utils8 = require("@charcoal-ui/utils");
 var import_visually_hidden2 = require("@react-aria/visually-hidden");
 var import_select = require("@react-aria/select");
 var import_button = require("@react-aria/button");
@@ -1531,19 +1558,19 @@ var import_styled_components16 = __toESM(require("styled-components"));
 var import_react16 = __toESM(require("react"));
 var import_styled_components14 = __toESM(require("styled-components"));
 var import_listbox = require("@react-aria/listbox");
-var import_utils7 = require("@react-aria/utils");
+var import_utils6 = require("@react-aria/utils");
 var import_focus2 = require("@react-aria/focus");
-var import_utils8 = require("@charcoal-ui/utils");
+var import_utils7 = require("@charcoal-ui/utils");
 function Option({ item, state, mode }) {
   const ref = (0, import_react16.useRef)(null);
   const { optionProps, isSelected } = (0, import_listbox.useOption)(item, state, ref);
   const { focusProps } = (0, import_focus2.useFocusRing)();
-  return /* @__PURE__ */ import_react16.default.createElement(OptionRoot, { ...(0, import_utils7.mergeProps)(optionProps, focusProps), ref, mode }, /* @__PURE__ */ import_react16.default.createElement(OptionCheckIcon, { name: "16/Check", isSelected }), /* @__PURE__ */ import_react16.default.createElement(OptionText, null, item.rendered));
+  return /* @__PURE__ */ import_react16.default.createElement(OptionRoot, { ...(0, import_utils6.mergeProps)(optionProps, focusProps), ref, mode }, /* @__PURE__ */ import_react16.default.createElement(OptionCheckIcon, { name: "16/Check", isSelected }), /* @__PURE__ */ import_react16.default.createElement(OptionText, null, item.rendered));
 }
 var OptionRoot = import_styled_components14.default.li`
   display: flex;
   align-items: center;
-  gap: ${({ theme: theme4 }) => (0, import_utils8.px)(theme4.spacing[4])};
+  gap: ${({ theme: theme4 }) => (0, import_utils7.px)(theme4.spacing[4])};
   height: 40px;
   cursor: pointer;
   outline: none;
@@ -1777,7 +1804,7 @@ var DropdownSelectorRoot = import_styled_components19.default.div`
   display: inline-block;
   width: 100%;
 
-  ${import_utils9.disabledSelector} {
+  ${import_utils8.disabledSelector} {
     cursor: default;
     ${theme((o) => o.disabled)}
   }
@@ -1800,7 +1827,7 @@ var DropdownButton = import_styled_components19.default.button`
   box-sizing: border-box;
   cursor: pointer;
 
-  ${import_utils9.disabledSelector} {
+  ${import_utils8.disabledSelector} {
     cursor: default;
   }
 
@@ -1834,7 +1861,7 @@ var import_react22 = __toESM(require("react"));
 var import_react_stately3 = require("react-stately");
 var import_radio = require("@react-aria/radio");
 var import_styled_components20 = __toESM(require("styled-components"));
-var import_utils10 = require("@charcoal-ui/utils");
+var import_utils9 = require("@charcoal-ui/utils");
 
 // src/components/SegmentedControl/RadioGroupContext.tsx
 var import_react21 = __toESM(require("react"));
@@ -1918,7 +1945,7 @@ var SegmentedRoot = import_styled_components20.default.label`
   cursor: pointer;
   height: 32px;
 
-  ${import_utils10.disabledSelector} {
+  ${import_utils9.disabledSelector} {
     cursor: default;
   }
 
@@ -1958,9 +1985,9 @@ var SegmentedLabelInner = import_styled_components20.default.div`
 var import_react23 = __toESM(require("react"));
 var import_styled_components21 = __toESM(require("styled-components"));
 var import_checkbox = require("@react-aria/checkbox");
-var import_utils11 = require("@react-aria/utils");
+var import_utils10 = require("@react-aria/utils");
 var import_react_stately4 = require("react-stately");
-var import_utils12 = require("@charcoal-ui/utils");
+var import_utils11 = require("@charcoal-ui/utils");
 var Checkbox = (0, import_react23.forwardRef)(
   function CheckboxInner(props, ref) {
     const ariaCheckboxProps = (0, import_react23.useMemo)(
@@ -1974,7 +2001,7 @@ var Checkbox = (0, import_react23.forwardRef)(
       [props]
     );
     const state = (0, import_react_stately4.useToggleState)(ariaCheckboxProps);
-    const objectRef = (0, import_utils11.useObjectRef)(ref);
+    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__ */ import_react23.default.createElement(InputRoot, { "aria-disabled": isDisabled }, /* @__PURE__ */ import_react23.default.createElement(CheckboxRoot, null, /* @__PURE__ */ import_react23.default.createElement(CheckboxInput, { type: "checkbox", ...inputProps }), /* @__PURE__ */ import_react23.default.createElement(CheckboxInputOverlay, { "aria-hidden": true, checked: inputProps.checked }, /* @__PURE__ */ import_react23.default.createElement(Icon_default, { name: "24/Check", unsafeNonGuidelineScale: 2 / 3 }))), "children" in props && /* @__PURE__ */ import_react23.default.createElement(InputLabel, null, props.children));
@@ -1989,11 +2016,11 @@ var InputRoot = import_styled_components21.default.label`
   display: flex;
 
   cursor: pointer;
-  ${import_utils12.disabledSelector} {
+  ${import_utils11.disabledSelector} {
     cursor: default;
   }
 
-  gap: ${({ theme: theme4 }) => (0, import_utils12.px)(theme4.spacing[4])};
+  gap: ${({ theme: theme4 }) => (0, import_utils11.px)(theme4.spacing[4])};
   ${theme((o) => [o.disabled])}
 `;
 var CheckboxRoot = import_styled_components21.default.div`
@@ -2017,6 +2044,9 @@ var CheckboxInput = import_styled_components21.default.input`
       border-color: ${({ theme: theme4 }) => theme4.color.text4};
     }
     ${theme((o) => [o.outline.default.focus, o.borderRadius(4)])}
+
+    /* FIXME: o.outline.default.focus の transition に o.bg.brand の transition が打ち消されてしまう */
+    transition: all 0.2s !important;
   }
 `;
 var CheckboxInputOverlay = import_styled_components21.default.div`
@@ -2042,9 +2072,9 @@ var InputLabel = import_styled_components21.default.div`
 
 // src/components/TagItem/index.tsx
 var import_react24 = __toESM(require("react"));
-var import_utils13 = require("@react-aria/utils");
+var import_utils12 = require("@react-aria/utils");
 var import_styled_components22 = __toESM(require("styled-components"));
-var import_utils14 = require("@charcoal-ui/utils");
+var import_utils13 = require("@charcoal-ui/utils");
 var import_button2 = require("@react-aria/button");
 var sizeMap = {
   S: 32,
@@ -2059,9 +2089,10 @@ var TagItem = (0, import_react24.forwardRef)(
     size = "M",
     disabled,
     status = "default",
+    className,
     ...props
   }, _ref) {
-    const ref = (0, import_utils13.useObjectRef)(_ref);
+    const ref = (0, import_utils12.useObjectRef)(_ref);
     const ariaButtonProps = (0, import_react24.useMemo)(
       () => ({
         elementType: "a",
@@ -2078,7 +2109,8 @@ var TagItem = (0, import_react24.forwardRef)(
         ref,
         size: hasTranslatedLabel ? "M" : size,
         status,
-        ...buttonProps
+        ...buttonProps,
+        className
       },
       /* @__PURE__ */ import_react24.default.createElement(Background, { bgColor, bgImage, status }),
       /* @__PURE__ */ import_react24.default.createElement(Inner, null, /* @__PURE__ */ import_react24.default.createElement(LabelWrapper, { isTranslate: hasTranslatedLabel }, hasTranslatedLabel && /* @__PURE__ */ import_react24.default.createElement(TranslatedLabel, null, /* @__PURE__ */ import_react24.default.createElement(Label3, null, translatedLabel)), /* @__PURE__ */ import_react24.default.createElement(Label3, null, label)), status === "active" && /* @__PURE__ */ import_react24.default.createElement(Icon_default, { name: "16/Remove" }))
@@ -2106,7 +2138,7 @@ var TagItemRoot = import_styled_components22.default.a`
   ...status === "active" ? [o.padding.left(16), o.padding.right(8)] : []
 ])}
 
-  ${import_utils14.disabledSelector} {
+  ${import_utils13.disabledSelector} {
     ${theme((o) => [o.disabled])}
     cursor: default;
   }
@@ -2140,7 +2172,7 @@ var Background = import_styled_components22.default.div`
 `;
 var Inner = import_styled_components22.default.div`
   display: inline-flex;
-  gap: ${({ theme: theme4 }) => (0, import_utils14.px)(theme4.spacing[8])};
+  gap: ${({ theme: theme4 }) => (0, import_utils13.px)(theme4.spacing[8])};
   align-items: center;
   z-index: 2;
 `;