@charcoal-ui/react 2.0.0 → 2.1.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.0",
+  "version": "2.1.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,24 +40,25 @@
     "@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.0",
-    "@charcoal-ui/styled": "^2.0.0",
-    "@charcoal-ui/theme": "^2.0.0",
-    "@charcoal-ui/utils": "^2.0.0",
-    "@react-aria/button": "^3.6.2",
+    "@charcoal-ui/icons": "^2.1.0",
+    "@charcoal-ui/styled": "^2.1.0",
+    "@charcoal-ui/theme": "^2.1.0",
+    "@charcoal-ui/utils": "^2.1.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",
-    "@react-aria/overlays": "3.9.1",
+    "@react-aria/overlays": "^3.12.1",
     "@react-aria/radio": "^3.4.0",
     "@react-aria/select": "^3.8.2",
     "@react-aria/ssr": "^3.3.0",
@@ -84,5 +86,5 @@
     "url": "https://github.com/pixiv/charcoal.git",
     "directory": "packages/react"
   },
-  "gitHead": "db7ac924cf629faa2913b68e9df440c0127d3d7c"
+  "gitHead": "ad3c5f816dfc2ad8b5d6e3a4102fc664db1d9606"
 }

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

@@ -46,10 +46,10 @@ const DefaultStory = (args: ModalProps) => {
       <Button onClick={() => state.open()}>Open Modal</Button>
 
       <Modal
+        {...args}
         isOpen={state.isOpen}
         onClose={() => state.close()}
         isDismissable
-        {...args}
       >
         <ModalHeader />
         <ModalBody>
@@ -109,11 +109,11 @@ const FullBottomSheetStory = (args: ModalProps) => {
       <Button onClick={() => state.open()}>Open Modal</Button>
 
       <Modal
-        isOpen={state.isOpen}
-        onClose={() => state.close()}
+        {...args}
         isDismissable
         bottomSheet="full"
-        {...args}
+        isOpen={state.isOpen}
+        onClose={() => state.close()}
       >
         <ModalHeader />
         <ModalBody>
@@ -164,11 +164,11 @@ const BottomSheetStory = (args: ModalProps) => {
       <Button onClick={() => state.open()}>Open Modal</Button>
 
       <Modal
+        {...args}
         isOpen={state.isOpen}
         onClose={() => state.close()}
         bottomSheet
         isDismissable
-        {...args}
       >
         <ModalHeader />
         <ModalBody>

package/src/components/Modal/index.tsx

@@ -1,8 +1,8 @@
 import React, { useContext, useRef } from 'react'
 import {
-  OverlayContainer,
-  OverlayProps,
-  useModal,
+  AriaModalOverlayProps,
+  Overlay,
+  useModalOverlay,
   useOverlay,
   usePreventScroll,
 } from '@react-aria/overlays'
@@ -19,13 +19,15 @@ import { animated, useTransition, easings } from 'react-spring'
 import Button, { ButtonProps } from '../Button'
 import IconButton from '../IconButton'
 
-export type ModalProps = OverlayProps &
+export type ModalProps = AriaModalOverlayProps &
   AriaDialogProps & {
     children: React.ReactNode
     zIndex?: number
     title: string
     size?: 'S' | 'M' | 'L'
     bottomSheet?: boolean | 'full'
+    isOpen: boolean
+    onClose: () => void
 
     // NOTICE: デフォルト値を与えてはならない
     // （たとえば document.body をデフォルト値にすると SSR できなくなる）
@@ -34,6 +36,30 @@ export type ModalProps = OverlayProps &
 
 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,
@@ -53,7 +79,25 @@ export default function Modal({
   const { overlayProps, underlayProps } = useOverlay(props, ref)
 
   usePreventScroll()
-  const { modalProps } = useModal()
+  const { modalProps } = useModalOverlay(
+    props,
+    {
+      close: onClose,
+      isOpen: isOpen,
+      // these props are not used actually.
+      // https://github.com/adobe/react-spectrum/blob/df14e3fb129b94b310f0397a701b83f006b51dfe/packages/%40react-aria/overlays/src/useModalOverlay.ts
+      open: () => {
+        // nope
+      },
+      setOpen: () => {
+        // nope
+      },
+      toggle: () => {
+        // nope
+      },
+    },
+    ref
+  )
 
   const { dialogProps, titleProps } = useDialog(props, ref)
 
@@ -82,7 +126,7 @@ export default function Modal({
   return transition(
     ({ backgroundColor, transform }, item) =>
       item && (
-        <OverlayContainer portalContainer={portalContainer}>
+        <Overlay>
           <ModalBackground
             zIndex={zIndex}
             {...underlayProps}
@@ -113,7 +157,7 @@ export default function Modal({
               </ModalDialog>
             </FocusScope>
           </ModalBackground>
-        </OverlayContainer>
+        </Overlay>
       )
   )
 }

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',
+}