@charcoal-ui/react 2.0.1 → 2.2.0

package/dist/styled.d.ts

@@ -1,93 +1,93 @@
-export declare const theme: (spec: (o: Record<string, unknown> & Readonly<{
-    bg: Record<string, unknown> & {
-        readonly transparent: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
-        readonly background1: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
-        readonly background2: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
-        readonly surface1: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
-        readonly surface2: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
-        readonly surface3: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
-        readonly surface4: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
-        readonly surface6: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
-        readonly surface7: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
-        readonly surface8: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
-        readonly surface9: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
-        readonly surface10: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
-        readonly link1: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
-        readonly link2: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
-        readonly text1: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
-        readonly text2: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
-        readonly text3: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
-        readonly text4: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
-        readonly text5: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
-        readonly icon6: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
-        readonly brand: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
-        readonly assertive: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
-        readonly warning: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
-        readonly success: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
-        readonly updatedItem: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
-        readonly border: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
-    } & {
-        readonly surface5: (direction: "to top" | "to bottom" | "to left" | "to right") => import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
-        readonly callToAction: (direction: "to top" | "to bottom" | "to left" | "to right") => import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
-    };
-    font: {
-        readonly transparent: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
-        readonly background1: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
-        readonly background2: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
-        readonly surface1: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
-        readonly surface2: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
-        readonly surface3: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
-        readonly surface4: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
-        readonly surface6: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
-        readonly surface7: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
-        readonly surface8: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
-        readonly surface9: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
-        readonly surface10: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
-        readonly link1: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
-        readonly link2: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
-        readonly text1: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
-        readonly text2: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
-        readonly text3: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
-        readonly text4: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
-        readonly text5: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
-        readonly icon6: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
-        readonly brand: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
-        readonly assertive: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
-        readonly warning: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
-        readonly success: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
-        readonly updatedItem: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
-        readonly border: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
-    };
-}> & {
-    readonly typography: (size: keyof import("@charcoal-ui/theme").Typography) => import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, "bold" | "monospace" | "preserveHalfLeading">;
-} & {
-    readonly margin: import("@charcoal-ui/styled").ModifiedArgumented<import("@charcoal-ui/styled").Internal, "left" | "right" | "top" | "bottom" | "horizontal" | "vertical" | "all", [0 | "auto" | 4 | 8 | 16 | 24 | 40 | 64 | 104 | 168 | 272 | 440]>;
-    readonly padding: import("@charcoal-ui/styled").ModifiedArgumented<import("@charcoal-ui/styled").Internal, "left" | "right" | "top" | "bottom" | "horizontal" | "vertical" | "all", [0 | "auto" | 4 | 8 | 16 | 24 | 40 | 64 | 104 | 168 | 272 | 440]>;
-} & {
-    readonly width: Readonly<{
-        px: (size: 0 | "auto" | 4 | 8 | 16 | 24 | 40 | 64 | 104 | 168 | 272 | 440) => import("@charcoal-ui/styled").Internal;
-        column: (span: number) => import("@charcoal-ui/styled").Internal;
-        auto: import("@charcoal-ui/styled").Internal;
-        full: import("@charcoal-ui/styled").Internal;
-    }>;
-    readonly height: Readonly<{
-        px: (size: 0 | "auto" | 4 | 8 | 16 | 24 | 40 | 64 | 104 | 168 | 272 | 440) => import("@charcoal-ui/styled").Internal;
-        column: (span: number) => import("@charcoal-ui/styled").Internal;
-        auto: import("@charcoal-ui/styled").Internal;
-        full: import("@charcoal-ui/styled").Internal;
-    }>;
-} & import("@charcoal-ui/styled").Internal & {
-    readonly disabled: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, never>;
-} & Readonly<{
-    border: {
-        readonly default: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, "left" | "right" | "top" | "bottom">;
-    };
-}> & Readonly<{
-    borderRadius: (radius: "none" | 4 | 8 | 16 | 24 | "oval") => import("@charcoal-ui/styled").Internal;
-}> & Readonly<{
-    outline: {
-        readonly default: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, "focus">;
-        readonly assertive: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, "focus">;
-    };
-}>) => import("@charcoal-ui/styled").Internal | (false | null | undefined) | (import("@charcoal-ui/styled").Internal | (false | null | undefined))[]) => import("@charcoal-ui/styled").ThemeProp<import("styled-components").DefaultTheme>;
+export declare const theme: (spec: (o: Record<string, unknown> & Readonly<{
+    bg: Record<string, unknown> & {
+        readonly transparent: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
+        readonly background1: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
+        readonly background2: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
+        readonly surface1: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
+        readonly surface2: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
+        readonly surface3: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
+        readonly surface4: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
+        readonly surface6: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
+        readonly surface7: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
+        readonly surface8: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
+        readonly surface9: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
+        readonly surface10: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
+        readonly link1: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
+        readonly link2: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
+        readonly text1: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
+        readonly text2: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
+        readonly text3: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
+        readonly text4: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
+        readonly text5: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
+        readonly icon6: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
+        readonly brand: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
+        readonly assertive: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
+        readonly warning: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
+        readonly success: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
+        readonly updatedItem: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
+        readonly border: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
+    } & {
+        readonly surface5: (direction: "to top" | "to bottom" | "to left" | "to right") => import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
+        readonly callToAction: (direction: "to top" | "to bottom" | "to left" | "to right") => import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
+    };
+    font: {
+        readonly transparent: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
+        readonly background1: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
+        readonly background2: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
+        readonly surface1: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
+        readonly surface2: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
+        readonly surface3: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
+        readonly surface4: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
+        readonly surface6: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
+        readonly surface7: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
+        readonly surface8: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
+        readonly surface9: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
+        readonly surface10: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
+        readonly link1: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
+        readonly link2: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
+        readonly text1: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
+        readonly text2: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
+        readonly text3: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
+        readonly text4: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
+        readonly text5: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
+        readonly icon6: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
+        readonly brand: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
+        readonly assertive: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
+        readonly warning: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
+        readonly success: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
+        readonly updatedItem: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
+        readonly border: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, keyof import("@charcoal-ui/theme").ThemeEffect>;
+    };
+}> & {
+    readonly typography: (size: keyof import("@charcoal-ui/theme").Typography) => import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, "bold" | "monospace" | "preserveHalfLeading">;
+} & {
+    readonly margin: import("@charcoal-ui/styled").ModifiedArgumented<import("@charcoal-ui/styled").Internal, "horizontal" | "vertical" | "all" | "left" | "right" | "top" | "bottom", [0 | "auto" | 4 | 8 | 16 | 24 | 40 | 64 | 104 | 168 | 272 | 440]>;
+    readonly padding: import("@charcoal-ui/styled").ModifiedArgumented<import("@charcoal-ui/styled").Internal, "horizontal" | "vertical" | "all" | "left" | "right" | "top" | "bottom", [0 | "auto" | 4 | 8 | 16 | 24 | 40 | 64 | 104 | 168 | 272 | 440]>;
+} & {
+    readonly width: Readonly<{
+        px: (size: 0 | "auto" | 4 | 8 | 16 | 24 | 40 | 64 | 104 | 168 | 272 | 440) => import("@charcoal-ui/styled").Internal;
+        column: (span: number) => import("@charcoal-ui/styled").Internal;
+        auto: import("@charcoal-ui/styled").Internal;
+        full: import("@charcoal-ui/styled").Internal;
+    }>;
+    readonly height: Readonly<{
+        px: (size: 0 | "auto" | 4 | 8 | 16 | 24 | 40 | 64 | 104 | 168 | 272 | 440) => import("@charcoal-ui/styled").Internal;
+        column: (span: number) => import("@charcoal-ui/styled").Internal;
+        auto: import("@charcoal-ui/styled").Internal;
+        full: import("@charcoal-ui/styled").Internal;
+    }>;
+} & import("@charcoal-ui/styled").Internal & {
+    readonly disabled: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, never>;
+} & Readonly<{
+    border: {
+        readonly default: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, "left" | "right" | "top" | "bottom">;
+    };
+}> & Readonly<{
+    borderRadius: (radius: "none" | 4 | 8 | 16 | 24 | "oval") => import("@charcoal-ui/styled").Internal;
+}> & Readonly<{
+    outline: {
+        readonly default: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, "focus">;
+        readonly assertive: import("@charcoal-ui/styled").Modified<import("@charcoal-ui/styled").Internal, "focus">;
+    };
+}>) => import("@charcoal-ui/styled").Internal | (false | null | undefined) | (import("@charcoal-ui/styled").Internal | (false | null | undefined))[]) => import("@charcoal-ui/styled").ThemeProp<import("styled-components").DefaultTheme>;
 //# sourceMappingURL=styled.d.ts.map

package/package.json

@@ -1,21 +1,22 @@
 {
   "name": "@charcoal-ui/react",
-  "version": "2.0.1",
+  "version": "2.2.0",
   "license": "Apache-2.0",
   "type": "module",
-  "source": "./src/index.ts",
   "main": "./dist/index.cjs",
-  "module": "./dist/index.module.js",
+  "module": "./dist/index.js",
   "exports": {
     "require": "./dist/index.cjs",
-    "default": "./dist/index.modern.js"
+    "default": "./dist/index.js"
   },
   "types": "./dist/index.d.ts",
   "sideEffects": false,
   "scripts": {
-    "build": "microbundle --compress=false -f modern,esm,cjs --tsconfig tsconfig.build.json --jsx React.createElement --jsxFragment React.Fragment",
-    "typecheck": "tsc --noEmit --project tsconfig.build.json",
-    "clean": "rimraf dist"
+    "build": "run-p --print-label 'build:*'",
+    "build:bundle": "FORCE_COLOR=1 tsup",
+    "build:dts": "tsc --project tsconfig.build.json --pretty --emitDeclarationOnly",
+    "typecheck": "tsc --project tsconfig.build.json --pretty --noEmit",
+    "clean": "rimraf dist .tsbuildinfo"
   },
   "devDependencies": {
     "@react-types/switch": "^3.1.2",
@@ -39,20 +40,21 @@
     "@types/warning": "^3.0.0",
     "jest-axe": "^5.0.1",
     "jest-styled-components": "^7.0.8",
-    "microbundle": "^0.14.2",
+    "npm-run-all": "^4.1.5",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-router-dom": "^6.2.1",
     "rimraf": "^3.0.2",
     "styled-components": "^5.3.3",
+    "tsup": "^6.5.0",
     "typescript": "^4.5.5"
   },
   "dependencies": {
-    "@charcoal-ui/icons": "^2.0.1",
-    "@charcoal-ui/styled": "^2.0.1",
-    "@charcoal-ui/theme": "^2.0.1",
-    "@charcoal-ui/utils": "^2.0.1",
-    "@react-aria/button": "^3.6.2",
+    "@charcoal-ui/icons": "^2.2.0",
+    "@charcoal-ui/styled": "^2.2.0",
+    "@charcoal-ui/theme": "^2.2.0",
+    "@charcoal-ui/utils": "^2.2.0",
+    "@react-aria/button": "^3.6.3",
     "@react-aria/checkbox": "^3.2.3",
     "@react-aria/dialog": "^3.2.1",
     "@react-aria/focus": "^3.6.1",
@@ -84,5 +86,5 @@
     "url": "https://github.com/pixiv/charcoal.git",
     "directory": "packages/react"
   },
-  "gitHead": "0e44e748ea47f54d7ddf6717d0abfd631d8705d6"
+  "gitHead": "d68878ef133ffc28dd29e0a7dc497594e71da417"
 }

package/src/components/Checkbox/index.tsx

@@ -118,5 +118,5 @@ const CheckboxInputOverlay = styled.div<{ checked?: boolean }>`
 `
 
 const InputLabel = styled.div`
-  ${theme((o) => [o.typography(14)])}
+  ${theme((o) => [o.typography(14), o.font.text2])}
 `

package/src/components/DropdownSelector/Listbox.tsx

@@ -114,6 +114,7 @@ const OptionRoot = styled.li<{ mode?: ListMode }>`
 `
 const OptionCheckIcon = styled(Icon)<{ isSelected: boolean }>`
   visibility: hidden;
+  ${theme((o) => [o.font.text2])}
 
   ${({ isSelected }) =>
     isSelected &&
@@ -123,5 +124,5 @@ const OptionCheckIcon = styled(Icon)<{ isSelected: boolean }>`
 `
 const OptionText = styled.span`
   display: block;
-  ${theme((o) => [o.typography(14)])}
+  ${theme((o) => [o.typography(14), o.font.text2])}
 `

package/src/components/DropdownSelector/index.tsx

@@ -121,7 +121,7 @@ const DropdownSelector = <T extends Record<string, unknown>>({
               : props.placeholder}
           </DropdownButtonText>
 
-          <Icon name="16/Menu" />
+          <DropdownButtonIcon name="16/Menu" />
         </DropdownButton>
         {state.isOpen && (
           <DropdownPopover open={state.isOpen} onClose={() => state.close()}>
@@ -196,12 +196,16 @@ const DropdownButtonText = styled.span`
   ${theme((o) => [o.typography(14), o.font.text2])}
 `
 
+const DropdownButtonIcon = styled(Icon)`
+  ${theme((o) => [o.font.text2])}
+`
+
 const AssertiveText = styled.div<{ invalid: boolean }>`
   ${({ invalid }) =>
     theme((o) => [
       o.typography(14),
       o.margin.top(8),
-      invalid && o.font.assertive,
+      invalid ? o.font.assertive : o.font.text2,
     ])}
 `
 

package/src/components/LoadingSpinner/index.tsx

@@ -1,6 +1,6 @@
-import { transparentize } from 'polished'
 import React, { useImperativeHandle, useRef } from 'react'
 import styled, { keyframes } from 'styled-components'
+import { theme } from '../../styled'
 
 export default function LoadingSpinner({
   size = 48,
@@ -25,11 +25,12 @@ const LoadingSpinnerRoot = styled.div.attrs({ role: 'progressbar' })<{
   font-size: ${(props) => props.size}px;
   width: ${(props) => props.size}px;
   height: ${(props) => props.size}px;
-  background-color: ${({ theme, transparent }) =>
-    transparent
-      ? 'transparent'
-      : transparentize(0.32, theme.color.background1)};
-  color: ${({ theme }) => theme.color.text4};
+  opacity: 0.84;
+  ${({ transparent }) =>
+    theme((o) => [
+      o.font.text4,
+      transparent ? o.bg.transparent : o.bg.background1,
+    ])}
 `
 
 const scaleout = keyframes`

package/src/components/Modal/index.tsx

@@ -36,6 +36,30 @@ export type ModalProps = AriaModalOverlayProps &
 
 const DEFAULT_Z_INDEX = 10
 
+/**
+ * モーダルコンポーネント。
+ *
+ * @example アプリケーションルートで `<OverlayProvider>` で囲った上で利用する
+ * ```tsx
+ * import {
+ *   OverlayProvider,
+ *   Modal,
+ *   ModalHeader,
+ *   ModalBody,
+ *   ModalButtons
+ * } from '@charcoal-ui/react'
+ *
+ * <OverlayProvider>
+ *   <App>
+ *     <Modal isOpen={state.isOpen} onClose={() => state.close()} isDismissable>
+ *       <ModalHeader />
+ *       <ModalBody>...</ModalBody>
+ *       <ModalButtons>...</ModalButtons>
+ *     </Modal>
+ *   </App>
+ * </OverlayProvider>
+ * ```
+ */
 export default function Modal({
   children,
   zIndex = DEFAULT_Z_INDEX,

package/src/components/MultiSelect/index.tsx

@@ -93,7 +93,7 @@ const MultiSelectRoot = styled.label`
 const MultiSelectLabel = styled.div`
   display: flex;
   align-items: center;
-  ${theme((o) => [o.typography(14), o.font.text1])}
+  ${theme((o) => [o.typography(14), o.font.text2])}
 `
 
 const MultiSelectInput = styled.input.attrs({ type: 'checkbox' })<{

package/src/components/Radio/index.tsx

@@ -76,6 +76,7 @@ export const RadioInput = styled.input.attrs({ type: 'radio' })<{
     display: block;
     box-sizing: border-box;
 
+    margin: 0;
     padding: 6px;
 
     width: 20px;
@@ -84,14 +85,14 @@ export const RadioInput = styled.input.attrs({ type: 'radio' })<{
     ${({ hasError = false }) =>
       theme((o) => [
         o.borderRadius('oval'),
-        o.bg.text5.hover.press,
+        o.bg.surface1.hover.press,
         hasError && o.outline.assertive,
       ])};
 
     &:not(:checked) {
       border-width: 2px;
       border-style: solid;
-      border-color: ${({ theme }) => theme.color.text4};
+      border-color: ${({ theme }) => theme.color.text3};
     }
 
     &:checked {
@@ -113,7 +114,7 @@ export const RadioInput = styled.input.attrs({ type: 'radio' })<{
 `
 
 const RadioLabel = styled.div`
-  ${theme((o) => [o.typography(14)])}
+  ${theme((o) => [o.typography(14), o.font.text2])}
 `
 
 export type RadioGroupProps = React.PropsWithChildren<{

package/src/components/Switch/index.tsx

@@ -58,6 +58,7 @@ export default function SwitchCheckbox(props: SwitchProps) {
 const Label = styled.label`
   display: inline-grid;
   grid-template-columns: auto 1fr;
+  align-items: center;
   gap: ${({ theme }) => px(theme.spacing[4])};
   cursor: pointer;
   outline: 0;
@@ -70,7 +71,7 @@ const Label = styled.label`
 `
 
 const LabelInner = styled.div`
-  ${theme((o) => o.typography(14))}
+  ${theme((o) => [o.typography(14), o.font.text2])}
 `
 
 const SwitchInput = styled.input.attrs({

package/src/components/TagItem/index.story.tsx

@@ -0,0 +1,188 @@
+import { action } from '@storybook/addon-actions'
+import React from 'react'
+import styled from 'styled-components'
+import TagItem, { TagItemProps } from '.'
+import { Story } from '../../_lib/compat'
+
+export default {
+  title: 'TagItem',
+  component: TagItem,
+  argTypes: {
+    bgColor: {
+      control: {
+        type: 'color',
+      },
+    },
+  },
+}
+
+export const Default: Story<TagItemProps> = (props) => {
+  return <TagItem {...props} onClick={action('click')} />
+}
+Default.args = {
+  label: '#女の子',
+  bgColor: '#7ACCB1',
+  href: '',
+  rel: '',
+  target: '',
+}
+
+export const Playground: Story<TagItemProps> = ({
+  bgColor,
+  label,
+  translatedLabel,
+}) => {
+  return (
+    <div>
+      <Container>
+        <div>
+          <TagItem
+            label={label}
+            size="M"
+            status="default"
+            bgColor={bgColor}
+            onClick={action('click')}
+          />
+        </div>
+        <div />
+        <div>
+          <TagItem
+            label={label}
+            translatedLabel={translatedLabel}
+            size="M"
+            status="default"
+            bgColor={bgColor}
+            onClick={action('click')}
+          />
+        </div>
+        <div />
+      </Container>
+      <Container>
+        <div>
+          <TagItem
+            label={label}
+            size="M"
+            status="active"
+            bgColor={bgColor}
+            onClick={action('click')}
+          />
+        </div>
+        <div />
+        <div>
+          <TagItem
+            label={label}
+            translatedLabel={translatedLabel}
+            size="M"
+            status="active"
+            bgColor={bgColor}
+            onClick={action('click')}
+          />
+        </div>
+        <div />
+      </Container>
+      <Container>
+        <div>
+          <TagItem
+            label={label}
+            size="M"
+            status="inactive"
+            bgColor={bgColor}
+            onClick={action('click')}
+          />
+        </div>
+        <div>
+          <TagItem
+            label={label}
+            size="M"
+            status="inactive"
+            disabled
+            bgColor={bgColor}
+            onClick={action('click')}
+          />
+        </div>
+        <div>
+          <TagItem
+            label={label}
+            translatedLabel={translatedLabel}
+            size="M"
+            status="inactive"
+            bgColor={bgColor}
+            onClick={action('click')}
+          />
+        </div>
+        <div>
+          <TagItem
+            label={label}
+            translatedLabel={translatedLabel}
+            size="M"
+            status="inactive"
+            disabled
+            bgColor={bgColor}
+            onClick={action('click')}
+          />
+        </div>
+      </Container>
+      <Container>
+        <div>
+          <TagItem
+            label={label}
+            size="S"
+            status="default"
+            bgColor={bgColor}
+            onClick={action('click')}
+          />
+        </div>
+      </Container>
+      <Container>
+        <div>
+          <TagItem
+            label={label}
+            size="S"
+            status="active"
+            bgColor={bgColor}
+            onClick={action('click')}
+          />
+        </div>
+      </Container>
+      <Container>
+        <div>
+          <TagItem
+            label={label}
+            size="S"
+            status="inactive"
+            bgColor={bgColor}
+            onClick={action('click')}
+          />
+        </div>
+        <div>
+          <TagItem
+            label={label}
+            size="S"
+            status="inactive"
+            disabled
+            bgColor={bgColor}
+            onClick={action('click')}
+          />
+        </div>
+      </Container>
+    </div>
+  )
+}
+
+const Container = styled.div`
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+
+  & > div {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 1em;
+  }
+`
+
+Playground.args = {
+  label: '#女の子',
+  translatedLabel: 'girl',
+  bgColor: '#7ACCB1',
+}