@react95/core 8.0.0-alpha.1 → 8.0.0-alpha.11

package/esm/themes/bee.css.mjs

@@ -0,0 +1,2 @@
+import './bee.css.ts.vanilla.css';
+/* empty css                         */

package/esm/themes/blackAndWhite.css.mjs

@@ -0,0 +1,2 @@
+import './blackAndWhite.css.ts.vanilla.css';
+/* empty css                                   */

package/esm/themes/brick.css.mjs

@@ -0,0 +1,2 @@
+import './brick.css.ts.vanilla.css';
+/* empty css                           */

package/esm/themes/candy.css.mjs

@@ -0,0 +1,2 @@
+import './candy.css.ts.vanilla.css';
+/* empty css                           */

package/esm/themes/coldGray.css.mjs

@@ -0,0 +1,2 @@
+import './coldGray.css.ts.vanilla.css';
+/* empty css                              */

package/esm/themes/counterStrike.css.mjs

@@ -0,0 +1,2 @@
+import './counterStrike.css.ts.vanilla.css';
+/* empty css                                   */

package/esm/themes/eggplant.css.mjs

@@ -0,0 +1,2 @@
+import './eggplant.css.ts.vanilla.css';
+/* empty css                              */

package/esm/themes/highContrast.css.mjs

@@ -0,0 +1,2 @@
+import './highContrast.css.ts.vanilla.css';
+/* empty css                                  */

package/esm/themes/lilac.css.mjs

@@ -0,0 +1,2 @@
+import './lilac.css.ts.vanilla.css';
+/* empty css                           */

package/esm/themes/lilacRoseDark.css.mjs

@@ -0,0 +1,2 @@
+import './lilacRoseDark.css.ts.vanilla.css';
+/* empty css                                   */

package/esm/themes/maple.css.mjs

@@ -0,0 +1,2 @@
+import './maple.css.ts.vanilla.css';
+/* empty css                           */

package/esm/themes/marine.css.mjs

@@ -0,0 +1,2 @@
+import './marine.css.ts.vanilla.css';
+/* empty css                            */

package/esm/themes/matrix.css.mjs

@@ -0,0 +1,2 @@
+import './matrix.css.ts.vanilla.css';
+/* empty css                            */

package/esm/themes/millenium.css.mjs

@@ -0,0 +1,2 @@
+import './millenium.css.ts.vanilla.css';
+/* empty css                               */

package/esm/themes/modernDark.css.mjs

@@ -0,0 +1,2 @@
+import './modernDark.css.ts.vanilla.css';
+/* empty css                                */

package/esm/themes/molecule.css.mjs

@@ -0,0 +1,2 @@
+import './molecule.css.ts.vanilla.css';
+/* empty css                              */

package/esm/themes/ninjaTurtles.css.mjs

@@ -0,0 +1,2 @@
+import './ninjaTurtles.css.ts.vanilla.css';
+/* empty css                                  */

package/esm/themes/olive.css.mjs

@@ -0,0 +1,2 @@
+import './olive.css.ts.vanilla.css';
+/* empty css                           */

package/esm/themes/pamelaAnderson.css.mjs

@@ -0,0 +1,2 @@
+import './pamelaAnderson.css.ts.vanilla.css';
+/* empty css                                    */

package/esm/themes/plum.css.mjs

@@ -0,0 +1,2 @@
+import './plum.css.ts.vanilla.css';
+/* empty css                          */

package/esm/themes/rainyDay.css.mjs

@@ -0,0 +1,2 @@
+import './rainyDay.css.ts.vanilla.css';
+/* empty css                              */

package/esm/themes/rose.css.mjs

@@ -0,0 +1,2 @@
+import './rose.css.ts.vanilla.css';
+/* empty css                          */

package/esm/themes/slate.css.mjs

@@ -0,0 +1,2 @@
+import './slate.css.ts.vanilla.css';
+/* empty css                           */

package/esm/themes/spruce.css.mjs

@@ -0,0 +1,2 @@
+import './spruce.css.ts.vanilla.css';
+/* empty css                            */

package/esm/themes/storm.css.mjs

@@ -0,0 +1,2 @@
+import './storm.css.ts.vanilla.css';
+/* empty css                           */

package/esm/themes/theSixtiesUSA.css.mjs

@@ -0,0 +1,2 @@
+import './theSixtiesUSA.css.ts.vanilla.css';
+/* empty css                                   */

package/esm/themes/tokyoDark.css.mjs

@@ -0,0 +1,2 @@
+import './tokyoDark.css.ts.vanilla.css';
+/* empty css                               */

package/esm/themes/tooSexy.css.mjs

@@ -0,0 +1,2 @@
+import './tooSexy.css.ts.vanilla.css';
+/* empty css                             */

package/esm/themes/travel.css.mjs

@@ -0,0 +1,2 @@
+import './travel.css.ts.vanilla.css';
+/* empty css                            */

package/esm/themes/vaporTeal.css.mjs

@@ -0,0 +1,2 @@
+import './vaporTeal.css.ts.vanilla.css';
+/* empty css                               */

package/esm/themes/vermillion.css.mjs

@@ -0,0 +1,2 @@
+import './vermillion.css.ts.vanilla.css';
+/* empty css                                */

package/esm/themes/violetDark.css.mjs

@@ -0,0 +1,2 @@
+import './violetDark.css.ts.vanilla.css';
+/* empty css                                */

package/esm/themes/water.css.mjs

@@ -0,0 +1,2 @@
+import './water.css.ts.vanilla.css';
+/* empty css                           */

package/esm/themes/win95.css.mjs

@@ -0,0 +1,2 @@
+import './win95.css.ts.vanilla.css';
+/* empty css                           */

package/esm/themes.mjs

@@ -0,0 +1,72 @@
+import * as azureOrange_css from "./themes/azureOrange.css.mjs";
+import * as bee_css from "./themes/bee.css.mjs";
+import * as blackAndWhite_css from "./themes/blackAndWhite.css.mjs";
+import * as brick_css from "./themes/brick.css.mjs";
+import * as candy_css from "./themes/candy.css.mjs";
+import * as coldGray_css from "./themes/coldGray.css.mjs";
+import * as counterStrike_css from "./themes/counterStrike.css.mjs";
+import * as eggplant_css from "./themes/eggplant.css.mjs";
+import * as highContrast_css from "./themes/highContrast.css.mjs";
+import * as lilac_css from "./themes/lilac.css.mjs";
+import * as lilacRoseDark_css from "./themes/lilacRoseDark.css.mjs";
+import * as maple_css from "./themes/maple.css.mjs";
+import * as marine_css from "./themes/marine.css.mjs";
+import * as matrix_css from "./themes/matrix.css.mjs";
+import * as millenium_css from "./themes/millenium.css.mjs";
+import * as modernDark_css from "./themes/modernDark.css.mjs";
+import * as molecule_css from "./themes/molecule.css.mjs";
+import * as ninjaTurtles_css from "./themes/ninjaTurtles.css.mjs";
+import * as olive_css from "./themes/olive.css.mjs";
+import * as pamelaAnderson_css from "./themes/pamelaAnderson.css.mjs";
+import * as plum_css from "./themes/plum.css.mjs";
+import * as rainyDay_css from "./themes/rainyDay.css.mjs";
+import * as rose_css from "./themes/rose.css.mjs";
+import * as slate_css from "./themes/slate.css.mjs";
+import * as spruce_css from "./themes/spruce.css.mjs";
+import * as storm_css from "./themes/storm.css.mjs";
+import * as theSixtiesUSA_css from "./themes/theSixtiesUSA.css.mjs";
+import * as tokyoDark_css from "./themes/tokyoDark.css.mjs";
+import * as tooSexy_css from "./themes/tooSexy.css.mjs";
+import * as travel_css from "./themes/travel.css.mjs";
+import * as vaporTeal_css from "./themes/vaporTeal.css.mjs";
+import * as vermillion_css from "./themes/vermillion.css.mjs";
+import * as violetDark_css from "./themes/violetDark.css.mjs";
+import * as water_css from "./themes/water.css.mjs";
+import * as win95_css from "./themes/win95.css.mjs";
+export {
+  azureOrange_css as azureOrange,
+  bee_css as bee,
+  blackAndWhite_css as blackAndWhite,
+  brick_css as brick,
+  candy_css as candy,
+  coldGray_css as coldGray,
+  counterStrike_css as counterStrike,
+  eggplant_css as eggplant,
+  highContrast_css as highContrast,
+  lilac_css as lilac,
+  lilacRoseDark_css as lilacRoseDark,
+  maple_css as maple,
+  marine_css as marine,
+  matrix_css as matrix,
+  millenium_css as millenium,
+  modernDark_css as modernDark,
+  molecule_css as molecule,
+  ninjaTurtles_css as ninjaTurtles,
+  olive_css as olive,
+  pamelaAnderson_css as pamelaAnderson,
+  plum_css as plum,
+  rainyDay_css as rainyDay,
+  rose_css as rose,
+  slate_css as slate,
+  spruce_css as spruce,
+  storm_css as storm,
+  theSixtiesUSA_css as theSixtiesUSA,
+  tokyoDark_css as tokyoDark,
+  tooSexy_css as tooSexy,
+  travel_css as travel,
+  vaporTeal_css as vaporTeal,
+  vermillion_css as vermillion,
+  violetDark_css as violetDark,
+  water_css as water,
+  win95_css as win95
+};

package/package.json

@@ -1,21 +1,23 @@
 {
   "name": "@react95/core",
-  "version": "8.0.0-alpha.1",
+  "version": "8.0.0-alpha.11",
   "description": "Windows 95 styleguide",
-  "main": "./cjs",
+  "main": "cjs/index.cjs",
+  "type": "module",
   "exports": {
     ".": {
+      "types": "./types/index.d.ts",
       "import": "./esm",
-      "require": "./cjs",
-      "types": "./@types/index.d.ts"
+      "require": "./cjs"
     },
     "./themes/*.css": {
-      "import": "./esm/themes/*.css.js",
-      "require": "./cjs/themes/*.css.js"
+      "types": "./types/themes/all.d.ts",
+      "import": "./esm/themes/*.css.mjs",
+      "require": "./cjs/themes/*.css.cjs"
     },
     "./GlobalStyle": {
-      "import": "./esm/GlobalStyle.js",
-      "require": "./cjs/GlobalStyle.js"
+      "import": "./esm/GlobalStyle.mjs",
+      "require": "./cjs/GlobalStyle.cjs"
     }
   },
   "repository": {
@@ -46,8 +48,15 @@
   "sideEffects": [
     "**/*.{woff2,woff,ttf,eot}"
   ],
-  "gitHead": "2f2d14dbd8ee63309cbe57fe1f6cdb715421898b",
-  "module": "./esm",
+  "keywords": [
+    "React95",
+    "windows95",
+    "w95",
+    "nostalgic",
+    "design-system"
+  ],
+  "gitHead": "f6a0e8d85480ee86cab55bea9d73fbb448fa1517",
+  "module": "esm/index.mjs",
   "private": false,
-  "types": "@types"
+  "types": "types/index.d.ts"
 }

package/types/Avatar/Avatar.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { ElementType, ReactElement, ElementRef, ForwardedRef, ImgHTMLAttributes } from 'react';
+import { FrameProps } from '../Frame/Frame';
+export type AvatarProps<TAs extends ElementType> = Omit<ImgHTMLAttributes<HTMLDivElement>, 'width' | 'color' | 'height'> & FrameProps<TAs> & {
+    circle?: boolean;
+};
+export declare const Avatar: <TAs extends React.ElementType = "div">(props: AvatarProps<TAs> & {
+    ref?: ForwardedRef<ElementRef<TAs>>;
+}) => ReactElement;

package/types/Button/Button.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { ElementType, ReactElement, ElementRef, ForwardedRef, ButtonHTMLAttributes } from 'react';
+import { FrameProps } from '../Frame/Frame';
+export type ButtonProps<TAs extends ElementType> = ButtonHTMLAttributes<HTMLButtonElement> & FrameProps<TAs>;
+export declare const Button: <TAs extends React.ElementType = "button">(props: ButtonProps<TAs> & {
+    ref?: ForwardedRef<ElementRef<TAs>>;
+}) => ReactElement;

package/{@types → types}/Checkbox/Checkbox.d.ts

@@ -1,10 +1,11 @@
 import React from 'react';
+import type { CSSProperties, HTMLProps } from 'react';
 export type LabelProps = {
     disabled?: boolean;
 };
 export type CheckboxProps = {
     label?: string;
     children?: string;
-    style?: React.CSSProperties;
-} & LabelProps & React.HTMLProps<HTMLInputElement>;
+    style?: CSSProperties;
+} & LabelProps & HTMLProps<HTMLInputElement>;
 export declare const Checkbox: React.ForwardRefExoticComponent<Omit<CheckboxProps, "ref"> & React.RefAttributes<HTMLInputElement>>;

package/{@types → types}/Dropdown/Dropdown.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
+import type { HTMLProps } from 'react';
 import { FrameProps } from '../Frame/Frame';
 export type DropdownProps = {
     options?: Array<string | number>;
-} & React.HTMLProps<HTMLSelectElement> & Omit<FrameProps<'select'>, 'as'>;
+} & HTMLProps<HTMLSelectElement> & Omit<FrameProps<'select'>, 'as'>;
 export declare const Dropdown: React.ForwardRefExoticComponent<Omit<DropdownProps, "ref"> & React.RefAttributes<HTMLSelectElement>>;

package/{@types → types}/Fieldset/Fieldset.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
+import type { HTMLProps } from 'react';
 import { FrameProps } from '../Frame/Frame';
 export type FieldSetProps = {
     legend?: string;
-} & React.HTMLProps<HTMLFieldSetElement> & FrameProps;
+} & HTMLProps<HTMLFieldSetElement> & Omit<FrameProps<'fieldset'>, 'as'>;
 export declare const Fieldset: React.ForwardRefExoticComponent<Omit<FieldSetProps, "ref"> & React.RefAttributes<HTMLFieldSetElement>>;

package/{@types/Frame/sprinkles.css.d.ts → types/Frame/Frame.css.d.ts}

@@ -1,111 +1,5 @@
-export declare const sprinkles: import("rainbow-sprinkles/dist/declarations/src/createRuntimeFn").SprinklesFn<[{
-    config: {
-        readonly backgroundColor: {
-            dynamic: {
-                default: string;
-            };
-            dynamicScale: {
-                anchor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                anchorVisited: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                borderDark: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                borderDarkest: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                borderLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                borderLighter: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                borderLightest: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                canvas: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                canvasText: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                headerBackground: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                headerNotActiveBackground: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                headerNotActiveText: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                headerText: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                material: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                materialText: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                materialTextDisabled: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                materialTextDisabledShadow: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                materialTextInvert: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                progress: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                inputBackground: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                inputBackgroundDisabled: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            };
-            name: "backgroundColor";
-            vars: {
-                default: string;
-            };
-        };
-        readonly colors: {
-            dynamic: {
-                default: string;
-            };
-            dynamicScale: {
-                anchor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                anchorVisited: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                borderDark: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                borderDarkest: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                borderLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                borderLighter: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                borderLightest: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                canvas: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                canvasText: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                headerBackground: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                headerNotActiveBackground: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                headerNotActiveText: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                headerText: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                material: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                materialText: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                materialTextDisabled: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                materialTextDisabledShadow: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                materialTextInvert: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                progress: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                inputBackground: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                inputBackgroundDisabled: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            };
-            name: "colors";
-            vars: {
-                default: string;
-            };
-        };
-    };
-} & {
-    config: {
-        bgColor: {
-            mappings: "backgroundColor"[];
-        };
-    };
-}, {
-    config: {
-        readonly boxShadow: {
-            dynamic: {
-                default: string;
-            };
-            dynamicScale: {
-                out: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                in: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                input: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            };
-            name: "boxShadow";
-            vars: {
-                default: string;
-            };
-        };
-    };
-}, {
-    config: {
-        readonly zIndex: {
-            dynamic: {
-                default: string;
-            };
-            dynamicScale: {
-                modal: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                tooltip: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                taskbar: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            };
-            name: "zIndex";
-            vars: {
-                default: string;
-            };
-        };
-    };
-}, {
+import type { SprinklesFn } from 'rainbow-sprinkles/createRuntimeFn';
+declare const displayAndBoxModelAtomicProps: {
     config: {
         readonly display: {
             dynamic: {
@@ -1418,7 +1312,8 @@ export declare const sprinkles: import("rainbow-sprinkles/dist/declarations/src/
             mappings: ("paddingBottom" | "paddingTop")[];
         };
     };
-}, {
+};
+declare const positioningAtomicProps: {
     config: {
         readonly position: {
             dynamic: {
@@ -1481,7 +1376,82 @@ export declare const sprinkles: import("rainbow-sprinkles/dist/declarations/src/
             };
         };
     };
-}, {
+};
+declare const colorsAtomicProps: {
+    config: {
+        readonly backgroundColor: {
+            dynamic: {
+                default: string;
+            };
+            dynamicScale: {
+                anchor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                anchorVisited: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                borderDark: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                borderDarkest: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                borderLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                borderLighter: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                borderLightest: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                canvas: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                canvasText: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                headerBackground: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                headerNotActiveBackground: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                headerNotActiveText: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                headerText: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                material: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                materialText: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                materialTextDisabled: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                materialTextDisabledShadow: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                materialTextInvert: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                progress: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                inputBackground: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                inputBackgroundDisabled: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+            name: "backgroundColor";
+            vars: {
+                default: string;
+            };
+        };
+        readonly color: {
+            dynamic: {
+                default: string;
+            };
+            dynamicScale: {
+                anchor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                anchorVisited: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                borderDark: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                borderDarkest: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                borderLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                borderLighter: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                borderLightest: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                canvas: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                canvasText: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                headerBackground: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                headerNotActiveBackground: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                headerNotActiveText: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                headerText: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                material: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                materialText: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                materialTextDisabled: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                materialTextDisabledShadow: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                materialTextInvert: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                progress: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                inputBackground: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                inputBackgroundDisabled: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+            name: "color";
+            vars: {
+                default: string;
+            };
+        };
+    };
+} & {
+    config: {
+        bgColor: {
+            mappings: "backgroundColor"[];
+        };
+    };
+};
+declare const backgroundAtomicProps: {
     config: {
         readonly background: {
             dynamic: {
@@ -1570,7 +1540,8 @@ export declare const sprinkles: import("rainbow-sprinkles/dist/declarations/src/
             mappings: "background"[];
         };
     };
-}, {
+};
+declare const bordersAtomicProps: {
     config: {
         readonly border: {
             dynamic: {
@@ -1883,7 +1854,8 @@ export declare const sprinkles: import("rainbow-sprinkles/dist/declarations/src/
             };
         };
     };
-}, {
+};
+declare const borderRadiusAtomicProps: {
     config: {
         readonly borderBottomLeftRadius: {
             dynamic: {
@@ -1996,7 +1968,26 @@ export declare const sprinkles: import("rainbow-sprinkles/dist/declarations/src/
             };
         };
     };
-}, {
+};
+declare const shadowsAtomicProps: {
+    config: {
+        readonly boxShadow: {
+            dynamic: {
+                default: string;
+            };
+            dynamicScale: {
+                out: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                in: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                input: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+            name: "boxShadow";
+            vars: {
+                default: string;
+            };
+        };
+    };
+};
+declare const outlineAtomicProps: {
     config: {
         readonly outline: {
             dynamic: {
@@ -2039,7 +2030,8 @@ export declare const sprinkles: import("rainbow-sprinkles/dist/declarations/src/
             };
         };
     };
-}, {
+};
+declare const fontAtomicProps: {
     config: {
         readonly font: {
             dynamic: {
@@ -2112,7 +2104,8 @@ export declare const sprinkles: import("rainbow-sprinkles/dist/declarations/src/
             };
         };
     };
-}, {
+};
+declare const textAtomicProps: {
     config: {
         readonly color: {
             dynamic: {
@@ -2267,5 +2260,37 @@ export declare const sprinkles: import("rainbow-sprinkles/dist/declarations/src/
             };
         };
     };
-}]>;
+};
+declare const zIndicesAtomicProps: {
+    config: {
+        readonly zIndex: {
+            dynamic: {
+                default: string;
+            };
+            dynamicScale: {
+                modal: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                tooltip: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                taskbar: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+            name: "zIndex";
+            vars: {
+                default: string;
+            };
+        };
+    };
+};
+export declare const sprinkles: SprinklesFn<[
+    typeof colorsAtomicProps,
+    typeof shadowsAtomicProps,
+    typeof zIndicesAtomicProps,
+    typeof displayAndBoxModelAtomicProps,
+    typeof positioningAtomicProps,
+    typeof backgroundAtomicProps,
+    typeof bordersAtomicProps,
+    typeof borderRadiusAtomicProps,
+    typeof outlineAtomicProps,
+    typeof fontAtomicProps,
+    typeof textAtomicProps
+]>;
 export type Sprinkles = Parameters<typeof sprinkles>[0];
+export {};