@charcoal-ui/react 3.7.0 → 3.8.0

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;;;;;AAGzC,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"}
+{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/components/Switch/index.story.tsx"],"names":[],"mappings":"AACA,OAAO,MAAM,MAAM,GAAG,CAAA;AACtB,OAAO,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAA;;AAEjD,wBAUwB;AAExB,eAAO,MAAM,KAAK,EAAE,QAAQ,CAAC,OAAO,MAAM,CAgBzC,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAC,OAAO,MAAM,CAgB3C,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,QAAQ,CAAC,OAAO,MAAM,CAe5C,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,QAAQ,CAAC,OAAO,MAAM,CAgB5C,CAAA"}

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,EAA6B,wBAAwB,EAAE,MAAM,OAAO,CAAA;AAO3E,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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/TagItem/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA6B,wBAAwB,EAAE,MAAM,OAAO,CAAA;AAQ3E,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

@@ -1,26 +1,16 @@
-import { TagItemProps } from '.';
-import { Story } from '../../_lib/compat';
-declare const _default: {
-    title: string;
-    component: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<{
-        label: string;
-        translatedLabel?: string | undefined;
-        bgColor?: string | undefined;
-        bgImage?: string | undefined;
-        status?: "default" | "active" | "inactive" | undefined;
-        size?: "S" | "M" | undefined;
-        disabled?: boolean | undefined;
-        className?: string | undefined;
-    } & Pick<Pick<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "key" | "css" | keyof import("react").AnchorHTMLAttributes<HTMLAnchorElement>>, "href" | "rel" | "target" | "onClick"> & import("react").RefAttributes<HTMLAnchorElement>>>;
-    argTypes: {
-        bgColor: {
-            control: {
-                type: string;
-            };
-        };
-    };
-};
+import TagItem from '.';
+import { StoryObj } from '@storybook/react';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, {
+    label: string;
+    translatedLabel?: string | undefined;
+    bgColor?: string | undefined;
+    bgImage?: string | undefined;
+    status?: "default" | "active" | "inactive" | undefined;
+    size?: "S" | "M" | undefined;
+    disabled?: boolean | undefined;
+    className?: string | undefined;
+} & Pick<Pick<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "key" | "css" | keyof import("react").AnchorHTMLAttributes<HTMLAnchorElement>>, "href" | "rel" | "target" | "onClick"> & import("react").RefAttributes<HTMLAnchorElement>>;
 export default _default;
-export declare const Default: Story<TagItemProps>;
-export declare const Playground: Story<TagItemProps>;
+export declare const Default: StoryObj<typeof TagItem>;
+export declare const Playground: StoryObj<typeof TagItem>;
 //# sourceMappingURL=index.story.d.ts.map

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":"AAEA,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"}
+{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/components/TagItem/index.story.tsx"],"names":[],"mappings":"AAEA,OAAO,OAAO,MAAM,GAAG,CAAA;AACvB,OAAO,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAA;;;;;;;;;;;AAEjD,wBAayB;AAEzB,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAC,OAAO,OAAO,CAK5C,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,QAAQ,CAAC,OAAO,OAAO,CA+I/C,CAAA"}

package/dist/components/TextArea/TextArea.story.d.ts

@@ -1,27 +1,9 @@
-import { Story } from '../../_lib/compat';
-import { TextAreaProps } from '.';
-declare const _default: {
-    title: string;
-    component: import("react").ForwardRefExoticComponent<TextAreaProps & import("react").RefAttributes<HTMLTextAreaElement>>;
-    argTypes: {};
-    args: {
-        showLabel: boolean;
-        label: string;
-        assistiveText: string;
-        disabled: boolean;
-        required: boolean;
-        invalid: boolean;
-    };
-};
+import TextArea from '.';
+import { StoryObj } from '@storybook/react';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import(".").TextAreaProps & import("react").RefAttributes<HTMLTextAreaElement>>;
 export default _default;
-export declare const Default: import("react").FunctionComponent<Partial<TextAreaProps>> & {
-    args?: Partial<TextAreaProps> | undefined;
-};
-export declare const HasLabel: import("react").FunctionComponent<Partial<TextAreaProps>> & {
-    args?: Partial<TextAreaProps> | undefined;
-};
-export declare const HasCount: import("react").FunctionComponent<Partial<TextAreaProps>> & {
-    args?: Partial<TextAreaProps> | undefined;
-};
-export declare const AutoHeight: Story<Partial<TextAreaProps>>;
+export declare const Default: StoryObj<typeof TextArea>;
+export declare const HasLabel: StoryObj<typeof TextArea>;
+export declare const HasCount: StoryObj<typeof TextArea>;
+export declare const AutoHeight: StoryObj<typeof TextArea>;
 //# sourceMappingURL=TextArea.story.d.ts.map

package/dist/components/TextArea/TextArea.story.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextArea.story.d.ts","sourceRoot":"","sources":["../../../src/components/TextArea/TextArea.story.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAEzC,OAAiB,EAAE,aAAa,EAAE,MAAM,GAAG,CAAA;;;;;;;;;;;;;;AAG3C,wBAYC;AAqBD,eAAO,MAAM,OAAO;;CAAoB,CAAA;AAExC,eAAO,MAAM,QAAQ;;CAAoB,CAAA;AAOzC,eAAO,MAAM,QAAQ;;CAAoB,CAAA;AAMzC,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,OAAO,CAAC,aAAa,CAAC,CAEpD,CAAA"}
+{"version":3,"file":"TextArea.story.d.ts","sourceRoot":"","sources":["../../../src/components/TextArea/TextArea.story.tsx"],"names":[],"mappings":"AAGA,OAAO,QAAQ,MAAM,GAAG,CAAA;AAExB,OAAO,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAA;;AAEjD,wBAsB0B;AAO1B,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAC,OAAO,QAAQ,CAAM,CAAA;AAEpD,eAAO,MAAM,QAAQ,EAAE,QAAQ,CAAC,OAAO,QAAQ,CAM9C,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,QAAQ,CAAC,OAAO,QAAQ,CAK9C,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,QAAQ,CAAC,OAAO,QAAQ,CAIhD,CAAA"}

package/dist/components/TextField/TextField.story.d.ts

@@ -1,28 +1,21 @@
-import { Story } from '../../_lib/compat';
-import { TextFieldProps } from '.';
-declare const _default: {
-    title: string;
-    component: import("react").ForwardRefExoticComponent<TextFieldProps & import("react").RefAttributes<HTMLInputElement>>;
-    argTypes: {};
+import TextField from '.';
+import { StoryObj } from '@storybook/react';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import(".").TextFieldProps & import("react").RefAttributes<HTMLInputElement>>;
+export default _default;
+export declare const Default: {};
+export declare const HasLabel: {
     args: {
         showLabel: boolean;
-        label: string;
         assistiveText: string;
-        disabled: boolean;
         required: boolean;
-        invalid: boolean;
     };
 };
-export default _default;
-export declare const Default: import("react").FunctionComponent<Partial<TextFieldProps>> & {
-    args?: Partial<TextFieldProps> | undefined;
-};
-export declare const HasLabel: import("react").FunctionComponent<Partial<TextFieldProps>> & {
-    args?: Partial<TextFieldProps> | undefined;
-};
-export declare const HasCount: import("react").FunctionComponent<Partial<TextFieldProps>> & {
-    args?: Partial<TextFieldProps> | undefined;
+export declare const HasCount: {
+    args: {
+        showCount: boolean;
+        maxLength: number;
+    };
 };
-export declare const HasAffix: Story<Partial<TextFieldProps>>;
-export declare const PrefixIcon: Story<Partial<TextFieldProps>>;
+export declare const HasAffix: StoryObj<typeof TextField>;
+export declare const PrefixIcon: StoryObj<typeof TextField>;
 //# sourceMappingURL=TextField.story.d.ts.map

package/dist/components/TextField/TextField.story.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.story.d.ts","sourceRoot":"","sources":["../../../src/components/TextField/TextField.story.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAEzC,OAAkB,EAAE,cAAc,EAAE,MAAM,GAAG,CAAA;;;;;;;;;;;;;;AAK7C,wBAYC;AAmBD,eAAO,MAAM,OAAO;;CAAoB,CAAA;AAExC,eAAO,MAAM,QAAQ;;CAAoB,CAAA;AAOzC,eAAO,MAAM,QAAQ;;CAAoB,CAAA;AAMzC,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc,CAAC,CAEnD,CAAA;AAQD,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc,CAAC,CA8BrD,CAAA"}
+{"version":3,"file":"TextField.story.d.ts","sourceRoot":"","sources":["../../../src/components/TextField/TextField.story.tsx"],"names":[],"mappings":"AAEA,OAAO,SAAS,MAAM,GAAG,CAAA;AAIzB,OAAO,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAA;;AAEjD,wBAsB2B;AAO3B,eAAO,MAAM,OAAO,IAAK,CAAA;AAEzB,eAAO,MAAM,QAAQ;;;;;;CAMpB,CAAA;AAED,eAAO,MAAM,QAAQ;;;;;CAKpB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,QAAQ,CAAC,OAAO,SAAS,CAO/C,CAAA;AAQD,eAAO,MAAM,UAAU,EAAE,QAAQ,CAAC,OAAO,SAAS,CAgCjD,CAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/TextField/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAA4C,MAAM,OAAO,CAAA;AAC3E,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAmB,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AAE3D,OAAO,EAAE,2BAA2B,EAAE,MAAM,mBAAmB,CAAA;AAG/D,KAAK,QAAQ,GAAG,IAAI,CAClB,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAEzC,UAAU,GAIV,QAAQ,GAGR,MAAM,2BAA2B,CACpC,CAAA;AAED,MAAM,WAAW,cACf,SAAQ,IAAI,CAAC,eAAe,EAAE,OAAO,GAAG,cAAc,GAAG,UAAU,CAAC,EAClE,QAAQ,EACR,2BAA2B;IAC7B,QAAQ,CAAC,MAAM,CAAC,EAAE,SAAS,CAAA;IAC3B,QAAQ,CAAC,MAAM,CAAC,EAAE,SAAS,CAAA;IAG3B,QAAQ,CAAC,YAAY,CAAC,EAAE,MAAM,CAAA;IAC9B,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAA;IACvB,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAG3C,QAAQ,CAAC,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC,OAAO,CAAC,KAAK,IAAI,CAAA;IAClE,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,OAAO,CAAC,KAAK,IAAI,CAAA;IAC7D,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,OAAO,CAAC,KAAK,IAAI,CAAA;IAE5D,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAA;IAC5B,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAA;IAC5B,QAAQ,CAAC,aAAa,CAAC,EAAE,MAAM,CAAA;IAC/B,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAA;CAC3B;AAED,QAAA,MAAM,SAAS,yFA2Gd,CAAA;AAED,eAAe,SAAS,CAAA;AASxB,eAAO,MAAM,cAAc,4LAE1B,CAAA;AA6FD,eAAO,MAAM,aAAa;aAAuB,OAAO;SAMvD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/TextField/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAA4C,MAAM,OAAO,CAAA;AAC3E,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAmB,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AAE3D,OAAO,EAAE,2BAA2B,EAAE,MAAM,mBAAmB,CAAA;AAG/D,KAAK,QAAQ,GAAG,IAAI,CAClB,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAEzC,UAAU,GAIV,QAAQ,GAGR,MAAM,2BAA2B,CACpC,CAAA;AAED,MAAM,WAAW,cACf,SAAQ,IAAI,CAAC,eAAe,EAAE,OAAO,GAAG,cAAc,GAAG,UAAU,CAAC,EAClE,QAAQ,EACR,2BAA2B;IAC7B,QAAQ,CAAC,MAAM,CAAC,EAAE,SAAS,CAAA;IAC3B,QAAQ,CAAC,MAAM,CAAC,EAAE,SAAS,CAAA;IAG3B,QAAQ,CAAC,YAAY,CAAC,EAAE,MAAM,CAAA;IAC9B,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAA;IACvB,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAG3C,QAAQ,CAAC,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC,OAAO,CAAC,KAAK,IAAI,CAAA;IAClE,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,OAAO,CAAC,KAAK,IAAI,CAAA;IAC7D,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,OAAO,CAAC,KAAK,IAAI,CAAA;IAE5D,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAA;IAC5B,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAA;IAC5B,QAAQ,CAAC,aAAa,CAAC,EAAE,MAAM,CAAA;IAC/B,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAA;CAC3B;AAED,QAAA,MAAM,SAAS,yFA2Gd,CAAA;AAED,eAAe,SAAS,CAAA;AASxB,eAAO,MAAM,cAAc,4LAE1B,CAAA;AAsFD,eAAO,MAAM,aAAa;aAAuB,OAAO;SAMvD,CAAA"}

package/dist/index.cjs.js

@@ -243,6 +243,7 @@ var StyledClickableDiv = import_styled_components2.default.div`
 `;
 
 // src/components/Button/StyledButton.tsx
+var import_styled2 = require("@charcoal-ui/styled");
 var horizontalPaddingSmall = import_styled_components3.css`
   padding-right: 16px;
   padding-left: 16px;
@@ -271,21 +272,21 @@ var StyledButton = (0, import_styled_components3.default)(Clickable_default)`
 
   &: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);
-    }
+    ${import_styled2.focusVisibleFocusRingCss}
+
+    ${({ $isActive: $active, $color, $background }) => $active ? import_styled_components3.css`
+            color: var(--charcoal-${$color}-press);
+            background-color: var(--charcoal-${$background}-press);
+          ` : import_styled_components3.css`
+            &:hover {
+              color: var(--charcoal-${$color}-hover);
+              background-color: var(--charcoal-${$background}-hover);
+            }
+            &:active {
+              color: var(--charcoal-${$color}-press);
+              background-color: var(--charcoal-${$background}-press);
+            }
+          `}
   }
 
   &:disabled,
@@ -303,6 +304,7 @@ var Button = (0, import_react2.forwardRef)(function Button2({
   size = "M",
   fullWidth: fixed = false,
   disabled = false,
+  isActive = false,
   ...rest
 }, ref) {
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
@@ -314,6 +316,7 @@ var Button = (0, import_react2.forwardRef)(function Button2({
       $color: variantToFont(variant),
       $size: size,
       $fullWidth: fixed,
+      $isActive: isActive,
       ref,
       children
     }
@@ -324,11 +327,28 @@ var Button_default = Button;
 // src/components/IconButton/index.tsx
 var import_react3 = require("react");
 var import_styled_components4 = __toESM(require("styled-components"));
+var import_styled3 = require("@charcoal-ui/styled");
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var IconButton = (0, import_react3.forwardRef)(
-  function IconButtonInner({ variant = "Default", size = "M", icon, ...rest }, ref) {
+  function IconButtonInner({
+    variant = "Default",
+    size = "M",
+    icon,
+    isActive = false,
+    ...rest
+  }, ref) {
     validateIconSize(size, 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 }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      StyledIconButton,
+      {
+        ...rest,
+        ref,
+        $size: size,
+        $variant: variant,
+        $isActive: isActive,
+        children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("pixiv-icon", { name: icon })
+      }
+    );
   }
 );
 var IconButton_default = IconButton;
@@ -347,22 +367,17 @@ var StyledIconButton = (0, import_styled_components4.default)(Clickable_default)
 
   &: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);
-    }
+    ${({ $isActive, $background }) => $isActive ? import_styled_components4.css`
+            background-color: var(--charcoal-${$background}-press);
+          ` : import_styled_components4.css`
+            &:hover {
+              background-color: var(--charcoal-${$background}-hover);
+            }
+            &:active {
+              background-color: var(--charcoal-${$background}-press);
+            }
+          `}
+    ${import_styled3.focusVisibleFocusRingCss}
   }
 
   &:disabled,
@@ -431,6 +446,7 @@ var import_react4 = require("react");
 var React3 = __toESM(require("react"));
 var import_styled_components5 = __toESM(require("styled-components"));
 var import_warning = __toESM(require("warning"));
+var import_styled4 = require("@charcoal-ui/styled");
 var import_jsx_runtime6 = require("react/jsx-runtime");
 var Radio = (0, import_react4.forwardRef)(function RadioInner({ value, disabled = false, children, className }, ref) {
   const {
@@ -461,7 +477,7 @@ var Radio = (0, import_react4.forwardRef)(function RadioInner({ value, disabled
         name,
         value,
         checked: isSelected,
-        invalid,
+        "aria-invalid": invalid,
         onChange: handleChange,
         disabled: isDisabled || isReadonly,
         ref
@@ -502,21 +518,18 @@ var RadioInput = import_styled_components5.default.input.attrs({ type: "radio" }
 
     &: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);
-        `}
-
       &: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);
+      ${import_styled4.focusVisibleFocusRingCss}
+      &[aria-invalid='true'] {
+        box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
+        &:focus {
+          box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
+        }
       }
     }
 
@@ -660,6 +673,7 @@ var MultiSelectGroupContext = (0, import_react5.createContext)({
 });
 
 // src/components/MultiSelect/index.tsx
+var import_styled5 = require("@charcoal-ui/styled");
 var import_jsx_runtime7 = require("react/jsx-runtime");
 var MultiSelect = (0, import_react6.forwardRef)(
   function MultiSelectInner({
@@ -804,6 +818,8 @@ var MultiSelectInput = import_styled_components6.default.input.attrs({ type: "ch
       }
     }
 
+    ${import_styled5.focusVisibleFocusRingCss}
+
     ${({ invalid, overlay }) => invalid && !overlay && import_styled_components6.css`
         &:not(:disabled):not([aria-disabled]),
         &[aria-disabled='false'] {
@@ -889,6 +905,7 @@ var import_react7 = require("react");
 var import_react_stately = require("react-stately");
 var import_styled_components7 = __toESM(require("styled-components"));
 var import_utils3 = require("@react-aria/utils");
+var import_styled6 = require("@charcoal-ui/styled");
 var import_jsx_runtime8 = require("react/jsx-runtime");
 var SwitchCheckbox = (0, import_react7.forwardRef)(
   function SwitchCheckboxInner(props, external) {
@@ -926,10 +943,6 @@ var Label = import_styled_components7.default.label`
     opacity: 0.32;
     cursor: default;
   }
-
-  :active > input {
-    box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
-  }
 `;
 var LabelInner = import_styled_components7.default.div`
   font-size: 14px;
@@ -960,9 +973,7 @@ var SwitchInput = import_styled_components7.default.input.attrs({ type: "checkbo
   :active {
     background-color: var(--charcoal-text4-press);
   }
-  :focus {
-    box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
-  }
+  ${import_styled6.focusVisibleFocusRingCss}
 
   &::after {
     content: '';
@@ -1273,13 +1284,6 @@ var StyledInputContainer = import_styled_components9.default.div`
     background-color: var(--charcoal-surface3-hover);
   }
 
-  :not(:disabled):not([aria-disabled]):active,
-  [aria-disabled='false']:active {
-    outline: none;
-    box-shadow: 0 0 0 4px
-      ${(p) => p.invalid ? `rgba(255,43,0,0.32)` : `rgba(0, 150, 250, 0.32);`};
-  }
-
   :focus-within {
     outline: none;
     box-shadow: 0 0 0 4px
@@ -1559,7 +1563,7 @@ var React9 = __toESM(require("react"));
 var import_overlays2 = require("@react-aria/overlays");
 var import_styled_components12 = __toESM(require("styled-components"));
 var import_utils5 = require("@charcoal-ui/utils");
-var import_styled2 = require("@charcoal-ui/styled");
+var import_styled7 = require("@charcoal-ui/styled");
 var import_react_spring2 = require("react-spring");
 var import_utils6 = require("@react-aria/utils");
 
@@ -1697,7 +1701,7 @@ var Modal = (0, import_react12.forwardRef)(function ModalInner({ children, zInde
     ref
   );
   const theme = (0, import_styled_components12.useTheme)();
-  const isMobile = (0, import_styled2.useMedia)((0, import_utils5.maxWidth)(theme.breakpoint.screen1)) ?? false;
+  const isMobile = (0, import_styled7.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, {
@@ -2161,6 +2165,7 @@ var StyledUl = import_styled_components16.default.ul`
 `;
 
 // src/components/DropdownSelector/index.tsx
+var import_styled8 = require("@charcoal-ui/styled");
 var import_jsx_runtime20 = require("react/jsx-runtime");
 var defaultRequiredText = "*\u5FC5\u9808";
 function DropdownSelector(props) {
@@ -2189,6 +2194,7 @@ function DropdownSelector(props) {
         },
         ref: triggerRef,
         type: "button",
+        $active: isOpen,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(DropdownButtonText, { children: props.placeholder !== void 0 && preview === void 0 ? props.placeholder : preview }),
           /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(DropdownButtonIcon, { name: "16/Menu" })
@@ -2256,15 +2262,17 @@ var DropdownButton = import_styled_components17.default.button`
 
   &: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);
-    }
+    ${import_styled8.focusVisibleFocusRingCss}
+    ${({ $active }) => $active === true ? import_styled_components17.css`
+            background-color: var(--charcoal-surface3-press);
+          ` : import_styled_components17.css`
+            &:hover {
+              background-color: var(--charcoal-surface3-hover);
+            }
+            &:active {
+              background-color: var(--charcoal-surface3-press);
+            }
+          `}
   }
 
   ${({ invalid }) => invalid === true && import_styled_components17.css`
@@ -2891,6 +2899,7 @@ var import_checkbox = require("@react-aria/checkbox");
 var import_utils10 = require("@react-aria/utils");
 var import_react_stately2 = require("react-stately");
 var import_utils11 = require("@charcoal-ui/utils");
+var import_styled9 = require("@charcoal-ui/styled");
 var import_jsx_runtime27 = require("react/jsx-runtime");
 var Checkbox = (0, import_react28.forwardRef)(
   function CheckboxInner({ invalid = false, ...props }, ref) {
@@ -2968,18 +2977,7 @@ var CheckboxInput = import_styled_components22.default.input`
 
     &: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);
-      }
+      ${import_styled9.focusVisibleFocusRingCss}
       &[aria-invalid='true'] {
         box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
       }
@@ -3019,6 +3017,7 @@ 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_styled10 = require("@charcoal-ui/styled");
 var import_jsx_runtime28 = require("react/jsx-runtime");
 var sizeMap = {
   S: 32,
@@ -3102,12 +3101,7 @@ var TagItemRoot = import_styled_components23.default.a`
 
   &: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);
-    }
+    ${import_styled10.focusVisibleFocusRingCss}
   }
 
   &:disabled,