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

package/README.md

@@ -12,60 +12,36 @@ React95 will be available via either npm and yarn.
 npm install @react95/core
 # or
 yarn add @react95/core
+# or
+pnpm add @react95/core
 ```
 
-You'll also need to add the [`@react95/icons/icons.css`](../icons) file
-
 ## Usage
 
-After installation, you can use any React95 component in your React application:
+The easiest way to check how the React95 components work altogether is by
+checking [the StackBlitz starter](https://stackblitz.com/edit/react95-vite-starter).
 
-```js
-import { Button, ThemeProvider } from '@react95/core';
-import '@react95/icons/icons.css';
+For a better look and usage of React95, we strongly recommend you choose and
+import a theme in your app. Optionally, you can add the GlobalStyle to style
+fonts, scrollbars, and links.
 
-const MyApp = () => (
-  <ThemeProvider>
-    <Button>Click me!</Button>
-  </ThemeProvider>
-);
+```js
+import '@react95/core/GlobalStyle';
+import '@react95/core/themes/win95.css';
 ```
 
-## Typescript
+After setting, you can use any React95 component in your React application:
 
-React95 has built-in TS support!
-
-make sure to install the types properly for `styled-components` and `xstyled`
+```js
+import { Button } from '@react95/core';
 
-```shell
-npm install @types/styled-components @types/xstyled__styled-components
-# or
-yarn add @types/styled-components @types/xstyled__styled-components
+export const MyApp = () => {
+  return <Button>Click me!</Button>;
+};
 ```
 
-You can find a list of all available components at our [Storybook](https://react95.github.io/React95/)
+You can find a list of all available components on our [Storybook page](https://react95.github.io/React95/)
 
 ### Next.JS
 
-If you want to use React95 on a NextJS project, you will need to do the follow
-steps:
-
-- Add `next-transpile-modules` and `next-fonts` dependencies:
-
-```
-  npm install --save-dev next-transpile-modules next-fonts
-  // or
-  yarn add next-transpile-modules next-fonts
-```
-
-- Edit your `next.config.js` file to something like:
-
-```javascript
-const withFonts = require('next-fonts');
-const withTM = require('next-transpile-modules')([
-  '@react95/core',
-  '@react95/icons',
-]);
-
-module.exports = withTM(withFonts());
-```
+If you want to use React95 on a NextJS project, check the [NextJS template](https://github.com/React95/nextjs-template)

package/cjs/Alert/{Alert.js → Alert.cjs}

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
 const icons = require("@react95/icons");
-const Alert_css = require("./Alert.css.js");
-const Modal = require("../Modal/Modal.js");
-const chord = require("./assets/chord.mp3.js");
+const Alert_css = require("./Alert.css.cjs");
+const Modal = require("../Modal/Modal.cjs");
+const chord = require("./assets/chord.mp3.cjs");
 const RenderImage = ({ option }) => {
   switch (option) {
     case "info":

package/cjs/Alert/{Alert.css.js → Alert.css.cjs}

@@ -1,7 +1,7 @@
 require('./Alert.css.ts.vanilla.css');
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-/* empty css                            */var dialog = "r95_lcz1rw2";
+/* empty css                             */var dialog = "r95_lcz1rw2";
 var icon = "r95_lcz1rw1";
 var message = "r95_lcz1rw0";
 exports.dialog = dialog;

package/cjs/Avatar/Avatar.cjs

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const Avatar_css = require("./Avatar.css.cjs");
+const Frame = require("../Frame/Frame.cjs");
+const Avatar = React.forwardRef(
+  ({ src, srcSet, alt, circle, children, size = "48px", ...otherProps }, ref) => /* @__PURE__ */ React.createElement(Frame.Frame, { className: Avatar_css.avatar({ circle }), ref, ...otherProps, size }, src || srcSet ? /* @__PURE__ */ React.createElement("img", { className: Avatar_css.imgStyle, src, srcSet, alt }) : children)
+);
+exports.Avatar = Avatar;

package/cjs/Avatar/{Avatar.css.js → Avatar.css.cjs}

@@ -1,7 +1,7 @@
 require('./Avatar.css.ts.vanilla.css');
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-/* empty css                             */const createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
+/* empty css                              */const createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
 var avatar = createRuntimeFn.createRuntimeFn({ defaultClassName: "r95_vljy2n0", variantClassNames: { circle: { true: "r95_vljy2n1" } }, defaultVariants: {}, compoundVariants: [] });
 var imgStyle = "r95_vljy2n2";
 exports.avatar = avatar;

package/cjs/Button/{Button.js → Button.cjs}

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
 const cn = require("classnames");
-const Button_css = require("./Button.css.js");
-const Frame = require("../Frame/Frame.js");
-const Button = React.forwardRef(
+const Button_css = require("./Button.css.cjs");
+const Frame = require("../Frame/Frame.cjs");
+const Button = Frame.fixedForwardRef(
   (props, ref) => {
     return /* @__PURE__ */ React.createElement(
       Frame.Frame,

package/cjs/Button/{Button.css.js → Button.css.cjs}

@@ -1,5 +1,5 @@
 require('./Button.css.ts.vanilla.css');
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-/* empty css                             */var button = "r95_1bzq74l0";
+/* empty css                              */var button = "r95_1bzq74l0";
 exports.button = button;

package/cjs/Checkbox/{Checkbox.js → Checkbox.cjs}

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
-const Checkbox_css = require("./Checkbox.css.js");
+const Checkbox_css = require("./Checkbox.css.cjs");
 const Checkbox = React.forwardRef(
   ({ children, style, label, disabled = false, ...rest }, ref) => /* @__PURE__ */ React.createElement("label", { style, className: Checkbox_css.label }, /* @__PURE__ */ React.createElement(
     "input",

package/cjs/Checkbox/{Checkbox.css.js → Checkbox.css.cjs}

@@ -1,7 +1,7 @@
 require('./Checkbox.css.ts.vanilla.css');
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-/* empty css                               */var field = "r95_6vt7xv2";
+/* empty css                                */var field = "r95_6vt7xv2";
 var icon = "r95_6vt7xv0";
 var label = "r95_6vt7xv3";
 var text = "r95_6vt7xv1";

package/cjs/Cursor/Cursor.css.cjs

@@ -0,0 +1,5 @@
+require('./Cursor.css.ts.vanilla.css');
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+/* empty css                              */var Cursor = { Auto: "r95_22fi80", Text: "r95_22fi81", VerticalText: "r95_22fi82", Help: "r95_22fi83", Crosshair: "r95_22fi84", Pointer: "r95_22fi85", Progress: "r95_22fi86", Wait: "r95_22fi87", Alias: "r95_22fi88", Copy: "r95_22fi89", Move: "r95_22fi8a", None: "r95_22fi8b", NoDrop: "r95_22fi8c", NotAllowed: "r95_22fi8d", Grab: "r95_22fi8e", Grabbing: "r95_22fi8f", ColResize: "r95_22fi8g", RowResize: "r95_22fi8h", NResize: "r95_22fi8i", EResize: "r95_22fi8j", SResize: "r95_22fi8k", WResize: "r95_22fi8l", NsResize: "r95_22fi8m", EwResize: "r95_22fi8n", NeResize: "r95_22fi8o", NwResize: "r95_22fi8p", SeResize: "r95_22fi8q", SwResize: "r95_22fi8r", NeswResize: "r95_22fi8s", NwseResize: "r95_22fi8t", ZoomIn: "r95_22fi8u", ZoomOut: "r95_22fi8v" };
+exports.Cursor = Cursor;

package/cjs/Dropdown/{Dropdown.js → Dropdown.cjs}

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
 const cn = require("classnames");
-const Dropdown_css = require("./Dropdown.css.js");
-const Frame = require("../Frame/Frame.js");
-const sprinkles_css = require("../Frame/sprinkles.css.js");
+const Dropdown_css = require("./Dropdown.css.cjs");
+const Frame = require("../Frame/Frame.cjs");
+const Frame_css = require("../Frame/Frame.css.cjs");
 const defaultOptions = [
   "",
   "C:\\Documents and Settings",
@@ -13,7 +13,7 @@ const defaultOptions = [
 ];
 const Dropdown = React.forwardRef(
   ({ options = defaultOptions, ...rest }, ref) => {
-    const { style, otherProps, className } = sprinkles_css.sprinkles(rest);
+    const { style, otherProps, className } = Frame_css.sprinkles(rest);
     return /* @__PURE__ */ React.createElement(Frame.Frame, { style, className: cn(Dropdown_css.wrapper, className) }, /* @__PURE__ */ React.createElement("select", { ...otherProps, className: cn(Dropdown_css.select), ref }, options && options.map((option) => /* @__PURE__ */ React.createElement("option", { key: option, value: option }, option))));
   }
 );

package/cjs/Dropdown/{Dropdown.css.js → Dropdown.css.cjs}

@@ -1,7 +1,7 @@
 require('./Dropdown.css.ts.vanilla.css');
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-/* empty css                               */var select = "r95_z1k3bs1";
+/* empty css                                */var select = "r95_z1k3bs1";
 var wrapper = "r95_z1k3bs0";
 exports.select = select;
 exports.wrapper = wrapper;

package/cjs/Fieldset/{Fieldset.js → Fieldset.cjs}

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
-const Fieldset_css = require("./Fieldset.css.js");
-const Frame = require("../Frame/Frame.js");
+const Fieldset_css = require("./Fieldset.css.cjs");
+const Frame = require("../Frame/Frame.cjs");
 const Fieldset = React.forwardRef(
-  ({ legend, children, ...rest }, ref) => /* @__PURE__ */ React.createElement(Frame.Frame, { as: "fieldset", ...rest, ref, className: Fieldset_css.field }, legend && /* @__PURE__ */ React.createElement("legend", { className: Fieldset_css.legend }, legend), children)
+  ({ legend, children, ...rest }, ref) => /* @__PURE__ */ React.createElement(Frame.Frame, { ...rest, as: "fieldset", ref, className: Fieldset_css.field }, legend && /* @__PURE__ */ React.createElement("legend", { className: Fieldset_css.legend }, legend), children)
 );
 exports.Fieldset = Fieldset;

package/cjs/Fieldset/{Fieldset.css.js → Fieldset.css.cjs}

@@ -1,7 +1,7 @@
 require('./Fieldset.css.ts.vanilla.css');
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-/* empty css                               */var field = "r95_bt4hec0";
+/* empty css                                */var field = "r95_bt4hec0";
 var legend = "r95_bt4hec1";
 exports.field = field;
 exports.legend = legend;

package/cjs/Frame/{Frame.js → Frame.cjs}

@@ -1,13 +1,13 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
-const sprinkles_css = require("./sprinkles.css.js");
+const Frame_css = require("./Frame.css.cjs");
 const cn = require("classnames");
 const fixedForwardRef = React.forwardRef;
 const FrameComponent = (props, ref) => {
   const { as, children, ...rest } = props;
   const Component = as || "div";
-  const { className, style, otherProps } = sprinkles_css.sprinkles(rest);
+  const { className, style, otherProps } = Frame_css.sprinkles(rest);
   return /* @__PURE__ */ React.createElement(
     Component,
     {
@@ -21,3 +21,4 @@ const FrameComponent = (props, ref) => {
 };
 const Frame = fixedForwardRef(FrameComponent);
 exports.Frame = Frame;
+exports.fixedForwardRef = fixedForwardRef;

package/cjs/Frame/Frame.css.cjs

@@ -0,0 +1,48 @@
+require('./Frame.css.ts.vanilla.css');
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+/* empty css                             */const createRuntimeFn = require("rainbow-sprinkles/createRuntimeFn");
+var sprinkles = createRuntimeFn.createRuntimeFn(function() {
+  var x = { config: { bgColor: { mappings: ["backgroundColor"] }, backgroundColor: { vars: { "default": "var(--r95_iuzg893o)" }, dynamic: { "default": "r95_iuzg893p" }, dynamicScale: { anchor: "var(--r95-color-anchor)", anchorVisited: "var(--r95-color-anchorVisited)", borderDark: "var(--r95-color-borderDark)", borderDarkest: "var(--r95-color-borderDarkest)", borderLight: "var(--r95-color-borderLight)", borderLighter: "var(--r95-color-borderLighter)", borderLightest: "var(--r95-color-borderLightest)", canvas: "var(--r95-color-canvas)", canvasText: "var(--r95-color-canvasText)", headerBackground: "var(--r95-color-headerBackground)", headerNotActiveBackground: "var(--r95-color-headerNotActiveBackground)", headerNotActiveText: "var(--r95-color-headerNotActiveText)", headerText: "var(--r95-color-headerText)", material: "var(--r95-color-material)", materialText: "var(--r95-color-materialText)", materialTextDisabled: "var(--r95-color-materialTextDisabled)", materialTextDisabledShadow: "var(--r95-color-materialTextDisabledShadow)", materialTextInvert: "var(--r95-color-materialTextInvert)", progress: "var(--r95-color-progress)", inputBackground: "var(--r95-color-inputBackground)", inputBackgroundDisabled: "var(--r95-color-inputBackgroundDisabled)" }, name: "backgroundColor" }, color: { vars: { "default": "var(--r95_iuzg893q)" }, dynamic: { "default": "r95_iuzg893r" }, dynamicScale: void 0, name: "color" } } };
+  x.config.color.dynamicScale = x.config.backgroundColor.dynamicScale;
+  return x;
+}(), { config: { boxShadow: { vars: { "default": "var(--r95_iuzg895y)" }, dynamic: { "default": "r95_iuzg895z" }, dynamicScale: { out: "var(--r95-shadow-out)", "in": "var(--r95-shadow-in)", input: "var(--r95-shadow-input)" }, name: "boxShadow" } } }, { config: { zIndex: { vars: { "default": "var(--r95_iuzg897c)" }, dynamic: { "default": "r95_iuzg897d" }, dynamicScale: { modal: "var(--r95-zIndex-modal)", tooltip: "var(--r95-zIndex-tooltip)", taskbar: "var(--r95-zIndex-taskbar)" }, name: "zIndex" } } }, function() {
+  var x = { config: { size: { mappings: ["height", "width"] }, h: { mappings: ["height"] }, w: { mappings: ["width"] }, minH: { mappings: ["minHeight"] }, minW: { mappings: ["minWidth"] }, m: { mappings: ["margin"] }, mr: { mappings: ["marginRight"] }, ml: { mappings: ["marginLeft"] }, mt: { mappings: ["marginTop"] }, mb: { mappings: ["marginBottom"] }, marginX: { mappings: ["marginLeft", "marginRight"] }, marginY: { mappings: ["marginTop", "marginBottom"] }, mx: { mappings: ["marginLeft", "marginRight"] }, my: { mappings: ["marginTop", "marginBottom"] }, p: { mappings: ["padding"] }, pr: { mappings: ["paddingRight"] }, pl: { mappings: ["paddingLeft"] }, pt: { mappings: ["paddingTop"] }, pb: { mappings: ["paddingBottom"] }, paddingX: { mappings: ["paddingLeft", "paddingRight"] }, paddingY: { mappings: ["paddingTop", "paddingBottom"] }, px: { mappings: ["paddingLeft", "paddingRight"] }, py: { mappings: ["paddingTop", "paddingBottom"] }, display: { vars: { "default": "var(--r95_iuzg890)" }, dynamic: { "default": "r95_iuzg891" }, dynamicScale: true, name: "display" }, overflow: { vars: { "default": "var(--r95_iuzg892)" }, dynamic: { "default": "r95_iuzg893" }, dynamicScale: true, name: "overflow" }, boxSizing: { vars: { "default": "var(--r95_iuzg894)" }, dynamic: { "default": "r95_iuzg895" }, dynamicScale: true, name: "boxSizing" }, grid: { vars: { "default": "var(--r95_iuzg896)" }, dynamic: { "default": "r95_iuzg897" }, dynamicScale: true, name: "grid" }, gridArea: { vars: { "default": "var(--r95_iuzg898)" }, dynamic: { "default": "r95_iuzg899" }, dynamicScale: true, name: "gridArea" }, gridAutoColumns: { vars: { "default": "var(--r95_iuzg89a)" }, dynamic: { "default": "r95_iuzg89b" }, dynamicScale: true, name: "gridAutoColumns" }, gridAutoFlow: { vars: { "default": "var(--r95_iuzg89c)" }, dynamic: { "default": "r95_iuzg89d" }, dynamicScale: true, name: "gridAutoFlow" }, gridAutoRows: { vars: { "default": "var(--r95_iuzg89e)" }, dynamic: { "default": "r95_iuzg89f" }, dynamicScale: true, name: "gridAutoRows" }, gridColumn: { vars: { "default": "var(--r95_iuzg89g)" }, dynamic: { "default": "r95_iuzg89h" }, dynamicScale: true, name: "gridColumn" }, gridColumnEnd: { vars: { "default": "var(--r95_iuzg89i)" }, dynamic: { "default": "r95_iuzg89j" }, dynamicScale: true, name: "gridColumnEnd" }, gridColumnStart: { vars: { "default": "var(--r95_iuzg89k)" }, dynamic: { "default": "r95_iuzg89l" }, dynamicScale: true, name: "gridColumnStart" }, gridRow: { vars: { "default": "var(--r95_iuzg89m)" }, dynamic: { "default": "r95_iuzg89n" }, dynamicScale: true, name: "gridRow" }, gridRowEnd: { vars: { "default": "var(--r95_iuzg89o)" }, dynamic: { "default": "r95_iuzg89p" }, dynamicScale: true, name: "gridRowEnd" }, gridRowStart: { vars: { "default": "var(--r95_iuzg89q)" }, dynamic: { "default": "r95_iuzg89r" }, dynamicScale: true, name: "gridRowStart" }, gridTemplate: { vars: { "default": "var(--r95_iuzg89s)" }, dynamic: { "default": "r95_iuzg89t" }, dynamicScale: true, name: "gridTemplate" }, gridTemplateAreas: { vars: { "default": "var(--r95_iuzg89u)" }, dynamic: { "default": "r95_iuzg89v" }, dynamicScale: true, name: "gridTemplateAreas" }, gridTemplateColumns: { vars: { "default": "var(--r95_iuzg89w)" }, dynamic: { "default": "r95_iuzg89x" }, dynamicScale: true, name: "gridTemplateColumns" }, gridTemplateRows: { vars: { "default": "var(--r95_iuzg89y)" }, dynamic: { "default": "r95_iuzg89z" }, dynamicScale: true, name: "gridTemplateRows" }, flex: { vars: { "default": "var(--r95_iuzg8910)" }, dynamic: { "default": "r95_iuzg8911" }, dynamicScale: true, name: "flex" }, flexBasis: { vars: { "default": "var(--r95_iuzg8912)" }, dynamic: { "default": "r95_iuzg8913" }, dynamicScale: true, name: "flexBasis" }, flexDirection: { vars: { "default": "var(--r95_iuzg8914)" }, dynamic: { "default": "r95_iuzg8915" }, dynamicScale: true, name: "flexDirection" }, flexFlow: { vars: { "default": "var(--r95_iuzg8916)" }, dynamic: { "default": "r95_iuzg8917" }, dynamicScale: true, name: "flexFlow" }, flexGrow: { vars: { "default": "var(--r95_iuzg8918)" }, dynamic: { "default": "r95_iuzg8919" }, dynamicScale: true, name: "flexGrow" }, flexShrink: { vars: { "default": "var(--r95_iuzg891a)" }, dynamic: { "default": "r95_iuzg891b" }, dynamicScale: true, name: "flexShrink" }, flexWrap: { vars: { "default": "var(--r95_iuzg891c)" }, dynamic: { "default": "r95_iuzg891d" }, dynamicScale: true, name: "flexWrap" }, justifyContent: { vars: { "default": "var(--r95_iuzg891e)" }, dynamic: { "default": "r95_iuzg891f" }, dynamicScale: true, name: "justifyContent" }, justifyItems: { vars: { "default": "var(--r95_iuzg891g)" }, dynamic: { "default": "r95_iuzg891h" }, dynamicScale: true, name: "justifyItems" }, justifySelf: { vars: { "default": "var(--r95_iuzg891i)" }, dynamic: { "default": "r95_iuzg891j" }, dynamicScale: true, name: "justifySelf" }, alignContent: { vars: { "default": "var(--r95_iuzg891k)" }, dynamic: { "default": "r95_iuzg891l" }, dynamicScale: true, name: "alignContent" }, alignItems: { vars: { "default": "var(--r95_iuzg891m)" }, dynamic: { "default": "r95_iuzg891n" }, dynamicScale: true, name: "alignItems" }, alignSelf: { vars: { "default": "var(--r95_iuzg891o)" }, dynamic: { "default": "r95_iuzg891p" }, dynamicScale: true, name: "alignSelf" }, gap: { vars: { "default": "var(--r95_iuzg891q)" }, dynamic: { "default": "r95_iuzg891r" }, dynamicScale: { "0": "var(--r95-space-0)", "1": "var(--r95-space-1)", "2": "var(--r95-space-2)", "3": "var(--r95-space-3)", "4": "var(--r95-space-4)", "5": "var(--r95-space-5)", "6": "var(--r95-space-6)", "7": "var(--r95-space-7)", "8": "var(--r95-space-8)", "9": "var(--r95-space-9)", "10": "var(--r95-space-10)", "11": "var(--r95-space-11)", "12": "var(--r95-space-12)", "13": "var(--r95-space-13)", "14": "var(--r95-space-14)", "15": "var(--r95-space-15)", "16": "var(--r95-space-16)", "17": "var(--r95-space-17)", "18": "var(--r95-space-18)", "19": "var(--r95-space-19)", "20": "var(--r95-space-20)" }, name: "gap" }, width: { vars: { "default": "var(--r95_iuzg891s)" }, dynamic: { "default": "r95_iuzg891t" }, dynamicScale: void 0, name: "width" }, maxWidth: { vars: { "default": "var(--r95_iuzg891u)" }, dynamic: { "default": "r95_iuzg891v" }, dynamicScale: void 0, name: "maxWidth" }, minWidth: { vars: { "default": "var(--r95_iuzg891w)" }, dynamic: { "default": "r95_iuzg891x" }, dynamicScale: void 0, name: "minWidth" }, height: { vars: { "default": "var(--r95_iuzg891y)" }, dynamic: { "default": "r95_iuzg891z" }, dynamicScale: void 0, name: "height" }, maxHeight: { vars: { "default": "var(--r95_iuzg8920)" }, dynamic: { "default": "r95_iuzg8921" }, dynamicScale: void 0, name: "maxHeight" }, minHeight: { vars: { "default": "var(--r95_iuzg8922)" }, dynamic: { "default": "r95_iuzg8923" }, dynamicScale: void 0, name: "minHeight" }, margin: { vars: { "default": "var(--r95_iuzg8924)" }, dynamic: { "default": "r95_iuzg8925" }, dynamicScale: void 0, name: "margin" }, marginBlock: { vars: { "default": "var(--r95_iuzg8926)" }, dynamic: { "default": "r95_iuzg8927" }, dynamicScale: void 0, name: "marginBlock" }, marginBlockEnd: { vars: { "default": "var(--r95_iuzg8928)" }, dynamic: { "default": "r95_iuzg8929" }, dynamicScale: void 0, name: "marginBlockEnd" }, marginBlockStart: { vars: { "default": "var(--r95_iuzg892a)" }, dynamic: { "default": "r95_iuzg892b" }, dynamicScale: void 0, name: "marginBlockStart" }, marginBottom: { vars: { "default": "var(--r95_iuzg892c)" }, dynamic: { "default": "r95_iuzg892d" }, dynamicScale: void 0, name: "marginBottom" }, marginInline: { vars: { "default": "var(--r95_iuzg892e)" }, dynamic: { "default": "r95_iuzg892f" }, dynamicScale: void 0, name: "marginInline" }, marginInlineEnd: { vars: { "default": "var(--r95_iuzg892g)" }, dynamic: { "default": "r95_iuzg892h" }, dynamicScale: void 0, name: "marginInlineEnd" }, marginInlineStart: { vars: { "default": "var(--r95_iuzg892i)" }, dynamic: { "default": "r95_iuzg892j" }, dynamicScale: void 0, name: "marginInlineStart" }, marginLeft: { vars: { "default": "var(--r95_iuzg892k)" }, dynamic: { "default": "r95_iuzg892l" }, dynamicScale: void 0, name: "marginLeft" }, marginRight: { vars: { "default": "var(--r95_iuzg892m)" }, dynamic: { "default": "r95_iuzg892n" }, dynamicScale: void 0, name: "marginRight" }, marginTop: { vars: { "default": "var(--r95_iuzg892o)" }, dynamic: { "default": "r95_iuzg892p" }, dynamicScale: void 0, name: "marginTop" }, padding: { vars: { "default": "var(--r95_iuzg892q)" }, dynamic: { "default": "r95_iuzg892r" }, dynamicScale: void 0, name: "padding" }, paddingBlock: { vars: { "default": "var(--r95_iuzg892s)" }, dynamic: { "default": "r95_iuzg892t" }, dynamicScale: void 0, name: "paddingBlock" }, paddingBlockEnd: { vars: { "default": "var(--r95_iuzg892u)" }, dynamic: { "default": "r95_iuzg892v" }, dynamicScale: void 0, name: "paddingBlockEnd" }, paddingBlockStart: { vars: { "default": "var(--r95_iuzg892w)" }, dynamic: { "default": "r95_iuzg892x" }, dynamicScale: void 0, name: "paddingBlockStart" }, paddingBottom: { vars: { "default": "var(--r95_iuzg892y)" }, dynamic: { "default": "r95_iuzg892z" }, dynamicScale: void 0, name: "paddingBottom" }, paddingInline: { vars: { "default": "var(--r95_iuzg8930)" }, dynamic: { "default": "r95_iuzg8931" }, dynamicScale: void 0, name: "paddingInline" }, paddingInlineEnd: { vars: { "default": "var(--r95_iuzg8932)" }, dynamic: { "default": "r95_iuzg8933" }, dynamicScale: void 0, name: "paddingInlineEnd" }, paddingInlineStart: { vars: { "default": "var(--r95_iuzg8934)" }, dynamic: { "default": "r95_iuzg8935" }, dynamicScale: void 0, name: "paddingInlineStart" }, paddingLeft: { vars: { "default": "var(--r95_iuzg8936)" }, dynamic: { "default": "r95_iuzg8937" }, dynamicScale: void 0, name: "paddingLeft" }, paddingRight: { vars: { "default": "var(--r95_iuzg8938)" }, dynamic: { "default": "r95_iuzg8939" }, dynamicScale: void 0, name: "paddingRight" }, paddingTop: { vars: { "default": "var(--r95_iuzg893a)" }, dynamic: { "default": "r95_iuzg893b" }, dynamicScale: void 0, name: "paddingTop" } } };
+  x.config.width.dynamicScale = x.config.gap.dynamicScale;
+  x.config.maxWidth.dynamicScale = x.config.gap.dynamicScale;
+  x.config.minWidth.dynamicScale = x.config.gap.dynamicScale;
+  x.config.height.dynamicScale = x.config.gap.dynamicScale;
+  x.config.maxHeight.dynamicScale = x.config.gap.dynamicScale;
+  x.config.minHeight.dynamicScale = x.config.gap.dynamicScale;
+  x.config.margin.dynamicScale = x.config.gap.dynamicScale;
+  x.config.marginBlock.dynamicScale = x.config.gap.dynamicScale;
+  x.config.marginBlockEnd.dynamicScale = x.config.gap.dynamicScale;
+  x.config.marginBlockStart.dynamicScale = x.config.gap.dynamicScale;
+  x.config.marginBottom.dynamicScale = x.config.gap.dynamicScale;
+  x.config.marginInline.dynamicScale = x.config.gap.dynamicScale;
+  x.config.marginInlineEnd.dynamicScale = x.config.gap.dynamicScale;
+  x.config.marginInlineStart.dynamicScale = x.config.gap.dynamicScale;
+  x.config.marginLeft.dynamicScale = x.config.gap.dynamicScale;
+  x.config.marginRight.dynamicScale = x.config.gap.dynamicScale;
+  x.config.marginTop.dynamicScale = x.config.gap.dynamicScale;
+  x.config.padding.dynamicScale = x.config.gap.dynamicScale;
+  x.config.paddingBlock.dynamicScale = x.config.gap.dynamicScale;
+  x.config.paddingBlockEnd.dynamicScale = x.config.gap.dynamicScale;
+  x.config.paddingBlockStart.dynamicScale = x.config.gap.dynamicScale;
+  x.config.paddingBottom.dynamicScale = x.config.gap.dynamicScale;
+  x.config.paddingInline.dynamicScale = x.config.gap.dynamicScale;
+  x.config.paddingInlineEnd.dynamicScale = x.config.gap.dynamicScale;
+  x.config.paddingInlineStart.dynamicScale = x.config.gap.dynamicScale;
+  x.config.paddingLeft.dynamicScale = x.config.gap.dynamicScale;
+  x.config.paddingRight.dynamicScale = x.config.gap.dynamicScale;
+  x.config.paddingTop.dynamicScale = x.config.gap.dynamicScale;
+  return x;
+}(), { config: { position: { vars: { "default": "var(--r95_iuzg893c)" }, dynamic: { "default": "r95_iuzg893d" }, dynamicScale: true, name: "position" }, top: { vars: { "default": "var(--r95_iuzg893e)" }, dynamic: { "default": "r95_iuzg893f" }, dynamicScale: true, name: "top" }, right: { vars: { "default": "var(--r95_iuzg893g)" }, dynamic: { "default": "r95_iuzg893h" }, dynamicScale: true, name: "right" }, bottom: { vars: { "default": "var(--r95_iuzg893i)" }, dynamic: { "default": "r95_iuzg893j" }, dynamicScale: true, name: "bottom" }, left: { vars: { "default": "var(--r95_iuzg893k)" }, dynamic: { "default": "r95_iuzg893l" }, dynamicScale: true, name: "left" }, pointerEvents: { vars: { "default": "var(--r95_iuzg893m)" }, dynamic: { "default": "r95_iuzg893n" }, dynamicScale: true, name: "pointerEvents" } } }, { config: { bg: { mappings: ["background"] }, background: { vars: { "default": "var(--r95_iuzg893s)" }, dynamic: { "default": "r95_iuzg893t" }, dynamicScale: true, name: "background" }, backgroundAttachment: { vars: { "default": "var(--r95_iuzg893u)" }, dynamic: { "default": "r95_iuzg893v" }, dynamicScale: true, name: "backgroundAttachment" }, backgroundImage: { vars: { "default": "var(--r95_iuzg893w)" }, dynamic: { "default": "r95_iuzg893x" }, dynamicScale: true, name: "backgroundImage" }, backgroundPosition: { vars: { "default": "var(--r95_iuzg893y)" }, dynamic: { "default": "r95_iuzg893z" }, dynamicScale: true, name: "backgroundPosition" }, backgroundRepeat: { vars: { "default": "var(--r95_iuzg8940)" }, dynamic: { "default": "r95_iuzg8941" }, dynamicScale: true, name: "backgroundRepeat" }, backgroundSize: { vars: { "default": "var(--r95_iuzg8942)" }, dynamic: { "default": "r95_iuzg8943" }, dynamicScale: true, name: "backgroundSize" }, backgroundOrigin: { vars: { "default": "var(--r95_iuzg8944)" }, dynamic: { "default": "r95_iuzg8945" }, dynamicScale: true, name: "backgroundOrigin" }, backgroundClip: { vars: { "default": "var(--r95_iuzg8946)" }, dynamic: { "default": "r95_iuzg8947" }, dynamicScale: true, name: "backgroundClip" } } }, function() {
+  var x = { config: { border: { vars: { "default": "var(--r95_iuzg8948)" }, dynamic: { "default": "r95_iuzg8949" }, dynamicScale: true, name: "border" }, borderStyle: { vars: { "default": "var(--r95_iuzg894a)" }, dynamic: { "default": "r95_iuzg894b" }, dynamicScale: true, name: "borderStyle" }, borderWidth: { vars: { "default": "var(--r95_iuzg894c)" }, dynamic: { "default": "r95_iuzg894d" }, dynamicScale: true, name: "borderWidth" }, borderColor: { vars: { "default": "var(--r95_iuzg894e)" }, dynamic: { "default": "r95_iuzg894f" }, dynamicScale: { anchor: "var(--r95-color-anchor)", anchorVisited: "var(--r95-color-anchorVisited)", borderDark: "var(--r95-color-borderDark)", borderDarkest: "var(--r95-color-borderDarkest)", borderLight: "var(--r95-color-borderLight)", borderLighter: "var(--r95-color-borderLighter)", borderLightest: "var(--r95-color-borderLightest)", canvas: "var(--r95-color-canvas)", canvasText: "var(--r95-color-canvasText)", headerBackground: "var(--r95-color-headerBackground)", headerNotActiveBackground: "var(--r95-color-headerNotActiveBackground)", headerNotActiveText: "var(--r95-color-headerNotActiveText)", headerText: "var(--r95-color-headerText)", material: "var(--r95-color-material)", materialText: "var(--r95-color-materialText)", materialTextDisabled: "var(--r95-color-materialTextDisabled)", materialTextDisabledShadow: "var(--r95-color-materialTextDisabledShadow)", materialTextInvert: "var(--r95-color-materialTextInvert)", progress: "var(--r95-color-progress)", inputBackground: "var(--r95-color-inputBackground)", inputBackgroundDisabled: "var(--r95-color-inputBackgroundDisabled)" }, name: "borderColor" }, borderTop: { vars: { "default": "var(--r95_iuzg894g)" }, dynamic: { "default": "r95_iuzg894h" }, dynamicScale: true, name: "borderTop" }, borderTopColor: { vars: { "default": "var(--r95_iuzg894i)" }, dynamic: { "default": "r95_iuzg894j" }, dynamicScale: void 0, name: "borderTopColor" }, borderTopStyle: { vars: { "default": "var(--r95_iuzg894k)" }, dynamic: { "default": "r95_iuzg894l" }, dynamicScale: true, name: "borderTopStyle" }, borderTopWidth: { vars: { "default": "var(--r95_iuzg894m)" }, dynamic: { "default": "r95_iuzg894n" }, dynamicScale: true, name: "borderTopWidth" }, borderRight: { vars: { "default": "var(--r95_iuzg894o)" }, dynamic: { "default": "r95_iuzg894p" }, dynamicScale: true, name: "borderRight" }, borderRightColor: { vars: { "default": "var(--r95_iuzg894q)" }, dynamic: { "default": "r95_iuzg894r" }, dynamicScale: void 0, name: "borderRightColor" }, borderRightStyle: { vars: { "default": "var(--r95_iuzg894s)" }, dynamic: { "default": "r95_iuzg894t" }, dynamicScale: true, name: "borderRightStyle" }, borderRightWidth: { vars: { "default": "var(--r95_iuzg894u)" }, dynamic: { "default": "r95_iuzg894v" }, dynamicScale: true, name: "borderRightWidth" }, borderBottom: { vars: { "default": "var(--r95_iuzg894w)" }, dynamic: { "default": "r95_iuzg894x" }, dynamicScale: true, name: "borderBottom" }, borderBottomColor: { vars: { "default": "var(--r95_iuzg894y)" }, dynamic: { "default": "r95_iuzg894z" }, dynamicScale: void 0, name: "borderBottomColor" }, borderBottomStyle: { vars: { "default": "var(--r95_iuzg8950)" }, dynamic: { "default": "r95_iuzg8951" }, dynamicScale: true, name: "borderBottomStyle" }, borderBottomWidth: { vars: { "default": "var(--r95_iuzg8952)" }, dynamic: { "default": "r95_iuzg8953" }, dynamicScale: true, name: "borderBottomWidth" }, borderLeft: { vars: { "default": "var(--r95_iuzg8954)" }, dynamic: { "default": "r95_iuzg8955" }, dynamicScale: true, name: "borderLeft" }, borderLeftColor: { vars: { "default": "var(--r95_iuzg8956)" }, dynamic: { "default": "r95_iuzg8957" }, dynamicScale: void 0, name: "borderLeftColor" }, borderLeftStyle: { vars: { "default": "var(--r95_iuzg8958)" }, dynamic: { "default": "r95_iuzg8959" }, dynamicScale: true, name: "borderLeftStyle" }, borderLeftWidth: { vars: { "default": "var(--r95_iuzg895a)" }, dynamic: { "default": "r95_iuzg895b" }, dynamicScale: true, name: "borderLeftWidth" } } };
+  x.config.borderTopColor.dynamicScale = x.config.borderColor.dynamicScale;
+  x.config.borderRightColor.dynamicScale = x.config.borderColor.dynamicScale;
+  x.config.borderBottomColor.dynamicScale = x.config.borderColor.dynamicScale;
+  x.config.borderLeftColor.dynamicScale = x.config.borderColor.dynamicScale;
+  return x;
+}(), { config: { borderBottomLeftRadius: { vars: { "default": "var(--r95_iuzg895c)" }, dynamic: { "default": "r95_iuzg895d" }, dynamicScale: true, name: "borderBottomLeftRadius" }, borderBottomRightRadius: { vars: { "default": "var(--r95_iuzg895e)" }, dynamic: { "default": "r95_iuzg895f" }, dynamicScale: true, name: "borderBottomRightRadius" }, borderImage: { vars: { "default": "var(--r95_iuzg895g)" }, dynamic: { "default": "r95_iuzg895h" }, dynamicScale: true, name: "borderImage" }, borderImageOutset: { vars: { "default": "var(--r95_iuzg895i)" }, dynamic: { "default": "r95_iuzg895j" }, dynamicScale: true, name: "borderImageOutset" }, borderImageRepeat: { vars: { "default": "var(--r95_iuzg895k)" }, dynamic: { "default": "r95_iuzg895l" }, dynamicScale: true, name: "borderImageRepeat" }, borderImageSlice: { vars: { "default": "var(--r95_iuzg895m)" }, dynamic: { "default": "r95_iuzg895n" }, dynamicScale: true, name: "borderImageSlice" }, borderImageSource: { vars: { "default": "var(--r95_iuzg895o)" }, dynamic: { "default": "r95_iuzg895p" }, dynamicScale: true, name: "borderImageSource" }, borderImageWidth: { vars: { "default": "var(--r95_iuzg895q)" }, dynamic: { "default": "r95_iuzg895r" }, dynamicScale: true, name: "borderImageWidth" }, borderRadius: { vars: { "default": "var(--r95_iuzg895s)" }, dynamic: { "default": "r95_iuzg895t" }, dynamicScale: true, name: "borderRadius" }, borderTopLeftRadius: { vars: { "default": "var(--r95_iuzg895u)" }, dynamic: { "default": "r95_iuzg895v" }, dynamicScale: true, name: "borderTopLeftRadius" }, borderTopRightRadius: { vars: { "default": "var(--r95_iuzg895w)" }, dynamic: { "default": "r95_iuzg895x" }, dynamicScale: true, name: "borderTopRightRadius" } } }, { config: { outline: { vars: { "default": "var(--r95_iuzg8960)" }, dynamic: { "default": "r95_iuzg8961" }, dynamicScale: true, name: "outline" }, outlineColor: { vars: { "default": "var(--r95_iuzg8962)" }, dynamic: { "default": "r95_iuzg8963" }, dynamicScale: true, name: "outlineColor" }, outlineStyle: { vars: { "default": "var(--r95_iuzg8964)" }, dynamic: { "default": "r95_iuzg8965" }, dynamicScale: true, name: "outlineStyle" }, outlineWidth: { vars: { "default": "var(--r95_iuzg8966)" }, dynamic: { "default": "r95_iuzg8967" }, dynamicScale: true, name: "outlineWidth" } } }, { config: { font: { vars: { "default": "var(--r95_iuzg8968)" }, dynamic: { "default": "r95_iuzg8969" }, dynamicScale: true, name: "font" }, fontFamily: { vars: { "default": "var(--r95_iuzg896a)" }, dynamic: { "default": "r95_iuzg896b" }, dynamicScale: true, name: "fontFamily" }, fontStyle: { vars: { "default": "var(--r95_iuzg896c)" }, dynamic: { "default": "r95_iuzg896d" }, dynamicScale: true, name: "fontStyle" }, fontSize: { vars: { "default": "var(--r95_iuzg896e)" }, dynamic: { "default": "r95_iuzg896f" }, dynamicScale: true, name: "fontSize" }, fontWeight: { vars: { "default": "var(--r95_iuzg896g)" }, dynamic: { "default": "r95_iuzg896h" }, dynamicScale: true, name: "fontWeight" }, fontVariant: { vars: { "default": "var(--r95_iuzg896i)" }, dynamic: { "default": "r95_iuzg896j" }, dynamicScale: true, name: "fontVariant" }, fontSizeAdjust: { vars: { "default": "var(--r95_iuzg896k)" }, dynamic: { "default": "r95_iuzg896l" }, dynamicScale: true, name: "fontSizeAdjust" } } }, { config: { color: { vars: { "default": "var(--r95_iuzg896m)" }, dynamic: { "default": "r95_iuzg896n" }, dynamicScale: { anchor: "var(--r95-color-anchor)", anchorVisited: "var(--r95-color-anchorVisited)", borderDark: "var(--r95-color-borderDark)", borderDarkest: "var(--r95-color-borderDarkest)", borderLight: "var(--r95-color-borderLight)", borderLighter: "var(--r95-color-borderLighter)", borderLightest: "var(--r95-color-borderLightest)", canvas: "var(--r95-color-canvas)", canvasText: "var(--r95-color-canvasText)", headerBackground: "var(--r95-color-headerBackground)", headerNotActiveBackground: "var(--r95-color-headerNotActiveBackground)", headerNotActiveText: "var(--r95-color-headerNotActiveText)", headerText: "var(--r95-color-headerText)", material: "var(--r95-color-material)", materialText: "var(--r95-color-materialText)", materialTextDisabled: "var(--r95-color-materialTextDisabled)", materialTextDisabledShadow: "var(--r95-color-materialTextDisabledShadow)", materialTextInvert: "var(--r95-color-materialTextInvert)", progress: "var(--r95-color-progress)", inputBackground: "var(--r95-color-inputBackground)", inputBackgroundDisabled: "var(--r95-color-inputBackgroundDisabled)" }, name: "color" }, direction: { vars: { "default": "var(--r95_iuzg896o)" }, dynamic: { "default": "r95_iuzg896p" }, dynamicScale: true, name: "direction" }, letterSpacing: { vars: { "default": "var(--r95_iuzg896q)" }, dynamic: { "default": "r95_iuzg896r" }, dynamicScale: true, name: "letterSpacing" }, lineHeight: { vars: { "default": "var(--r95_iuzg896s)" }, dynamic: { "default": "r95_iuzg896t" }, dynamicScale: true, name: "lineHeight" }, textAlign: { vars: { "default": "var(--r95_iuzg896u)" }, dynamic: { "default": "r95_iuzg896v" }, dynamicScale: true, name: "textAlign" }, textDecoration: { vars: { "default": "var(--r95_iuzg896w)" }, dynamic: { "default": "r95_iuzg896x" }, dynamicScale: true, name: "textDecoration" }, textIndent: { vars: { "default": "var(--r95_iuzg896y)" }, dynamic: { "default": "r95_iuzg896z" }, dynamicScale: true, name: "textIndent" }, textShadow: { vars: { "default": "var(--r95_iuzg8970)" }, dynamic: { "default": "r95_iuzg8971" }, dynamicScale: true, name: "textShadow" }, textTransform: { vars: { "default": "var(--r95_iuzg8972)" }, dynamic: { "default": "r95_iuzg8973" }, dynamicScale: true, name: "textTransform" }, verticalAlign: { vars: { "default": "var(--r95_iuzg8974)" }, dynamic: { "default": "r95_iuzg8975" }, dynamicScale: true, name: "verticalAlign" }, whiteSpace: { vars: { "default": "var(--r95_iuzg8976)" }, dynamic: { "default": "r95_iuzg8977" }, dynamicScale: true, name: "whiteSpace" }, wordSpacing: { vars: { "default": "var(--r95_iuzg8978)" }, dynamic: { "default": "r95_iuzg8979" }, dynamicScale: true, name: "wordSpacing" }, wordBreak: { vars: { "default": "var(--r95_iuzg897a)" }, dynamic: { "default": "r95_iuzg897b" }, dynamicScale: true, name: "wordBreak" } } });
+exports.sprinkles = sprinkles;