@blockle/blocks-core 0.21.3 → 0.21.5

package/dist/atoms/atoms.css.js

@@ -0,0 +1,119 @@
+import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
+import { minMediaQuery } from "../css/breakpoint/breakpoint.js";
+import { vars } from "../css/vars.css.js";
+import { defineProperties } from "./defineProperties.js";
+setFileScope("src/atoms/atoms.css.ts", "@blockle/blocks-core");
+const colorsWithCurrentColor = { ...vars.color, currentColor: "currentColor" };
+const size = { auto: "auto", full: "100%", "fit-content": "fit-content" };
+const marginSpace = { auto: "auto", ...vars.space };
+const unresponsiveAtomicProperties = defineProperties({
+  properties: {
+    appearance: ["none"],
+    backgroundColor: colorsWithCurrentColor,
+    blockSize: size,
+    border: ["none"],
+    borderColor: colorsWithCurrentColor,
+    borderRadius: vars.borderRadius,
+    borderWidth: vars.borderWidth,
+    boxShadow: vars.shadow,
+    color: colorsWithCurrentColor,
+    cursor: ["auto", "pointer"],
+    fontFamily: vars.fontFamily,
+    fontStyle: ["normal", "italic", "oblique"],
+    fontWeight: vars.fontWeight,
+    inlineSize: size,
+    insetBlock: [0],
+    insetBlockEnd: [0],
+    insetBlockStart: [0],
+    insetInline: [0],
+    insetInlineEnd: [0],
+    insetInlineStart: [0],
+    lineHeight: vars.lineHeight,
+    maxBlockSize: size,
+    maxInlineSize: size,
+    opacity: [0, 1],
+    outline: ["none"],
+    overflow: ["hidden", "scroll", "visible", "auto"],
+    overflowBlock: ["hidden", "scroll", "visible", "auto"],
+    overflowInline: ["hidden", "scroll", "visible", "auto"],
+    pointerEvents: ["none"],
+    textDecoration: ["overline", "line-through", "underline", "none"],
+    textTransform: ["lowercase", "uppercase", "capitalize"],
+    textWrap: ["balance", "wrap"],
+    transition: vars.transition,
+    userSelect: ["none"],
+    whiteSpace: ["nowrap", "pre", "pre-line", "pre-wrap"],
+    wordBreak: ["break-word"],
+    wordWrap: ["break-word"],
+    textAlign: ["center", "left", "right", "justify"]
+  }
+});
+const responsiveAtomicProperties = defineProperties({
+  conditions: [
+    {},
+    {
+      "@media": minMediaQuery("tablet")
+    },
+    {
+      "@media": minMediaQuery("desktop")
+    },
+    {
+      "@media": minMediaQuery("wide")
+    }
+  ],
+  properties: {
+    alignContent: ["stretch", "center", "flex-start", "flex-end"],
+    alignItems: ["stretch", "center", "flex-start", "flex-end"],
+    alignSelf: ["stretch", "center", "flex-start", "flex-end"],
+    placeItems: ["stretch", "center", "flex-start", "flex-end"],
+    columnGap: vars.space,
+    display: [
+      "none",
+      "flex",
+      "inline-flex",
+      "block",
+      "inline",
+      "inline-block",
+      "grid",
+      "inline-grid"
+    ],
+    flex: [1],
+    flexDirection: ["row", "row-reverse", "column", "column-reverse"],
+    flexGrow: [0, 1],
+    flexShrink: [0, 1],
+    flexWrap: ["nowrap", "wrap"],
+    fontSize: vars.fontSize,
+    gap: vars.space,
+    justifyContent: [
+      "flex-start",
+      "flex-end",
+      "center",
+      "space-between",
+      "space-around"
+    ],
+    margin: marginSpace,
+    marginBlock: marginSpace,
+    marginBlockEnd: marginSpace,
+    marginBlockStart: marginSpace,
+    marginInline: marginSpace,
+    marginInlineEnd: marginSpace,
+    marginInlineStart: marginSpace,
+    padding: vars.space,
+    paddingBlock: vars.space,
+    paddingBlockEnd: vars.space,
+    paddingBlockStart: vars.space,
+    paddingInline: vars.space,
+    paddingInlineEnd: vars.space,
+    paddingInlineStart: vars.space,
+    position: ["relative", "fixed", "absolute", "sticky", "static"],
+    rowGap: vars.space
+  }
+});
+const atomicProperties = {
+  ...responsiveAtomicProperties,
+  ...unresponsiveAtomicProperties
+};
+endFileScope();
+export {
+  atomicProperties
+};

package/dist/atoms/atoms.d.ts

@@ -0,0 +1,10 @@
+import { atomicProperties } from './atoms.css';
+export type AtomicProperties = typeof atomicProperties;
+export type AtomProperties = {
+    [K in keyof AtomicProperties]?: AtomicProperties[K]['values'] extends Record<string, {
+        defaultClass: string;
+        conditions: string[];
+    }> ? keyof AtomicProperties[K]['values'] | (keyof AtomicProperties[K]['values'])[] : keyof AtomicProperties[K]['values'];
+};
+export declare function atoms(properties: AtomProperties): string;
+export type Atoms = Parameters<typeof atoms>[0];

package/dist/atoms/atoms.js

@@ -0,0 +1,28 @@
+import { atomicProperties } from "./atoms.css.js";
+function atoms(properties) {
+  const classList = [];
+  for (const property in properties) {
+    const value = properties[property];
+    const target = atomicProperties[property];
+    if (typeof value === "string") {
+      if (target.values[value]) {
+        classList.push(target.values[value].defaultClass);
+      }
+    } else if (Array.isArray(value)) {
+      value.forEach((val, i) => {
+        var _a;
+        if (i === 0) {
+          if (target.values[val]) {
+            classList.push(target.values[val].defaultClass);
+          }
+        } else {
+          classList.push(((_a = target.values[val]) == null ? void 0 : _a.conditions[i]) ?? "");
+        }
+      });
+    }
+  }
+  return classList.join(" ");
+}
+export {
+  atoms
+};

package/dist/atoms/defineProperties.cjs

@@ -0,0 +1,80 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const css = require("@vanilla-extract/css");
+function defineProperties({
+  properties,
+  conditions
+}) {
+  const result = {};
+  for (const property in properties) {
+    const values = properties[property];
+    result[property] = {
+      values: {}
+    };
+    const ref = result[property];
+    if (!ref || !ref.values) {
+      throw new Error(`Invalid property definition for ${property}`);
+    }
+    if (Array.isArray(values)) {
+      for (const value of values) {
+        const defaultClass = css.style({
+          [property]: value
+        });
+        ref.values[value] = {
+          defaultClass,
+          conditions: conditions == null ? void 0 : conditions.map((condition, i) => {
+            if (i === 0 && Object.keys(condition).length === 0) {
+              return defaultClass;
+            }
+            if (typeof condition === "object" && condition["@media"]) {
+              return css.style({
+                "@media": {
+                  [condition["@media"]]: {
+                    [property]: value
+                  }
+                }
+              });
+            }
+            throw new Error(
+              `Invalid condition for ${property}: ${JSON.stringify(condition)}`
+            );
+          })
+        };
+        if (!conditions && "conditions" in ref.values) {
+          delete ref.values.conditions;
+        }
+      }
+      continue;
+    }
+    for (const value in values) {
+      const defaultClass = css.style({
+        [property]: values[value]
+      });
+      ref.values[value] = {
+        defaultClass,
+        conditions: conditions == null ? void 0 : conditions.map((condition, i) => {
+          if (i === 0 && Object.keys(condition).length === 0) {
+            return defaultClass;
+          }
+          if (typeof condition === "object" && condition["@media"]) {
+            return css.style({
+              "@media": {
+                [condition["@media"]]: {
+                  [property]: value
+                }
+              }
+            });
+          }
+          throw new Error(
+            `Invalid condition for ${property}: ${JSON.stringify(condition)}`
+          );
+        })
+      };
+      if (!conditions && "conditions" in ref.values) {
+        delete ref.values.conditions;
+      }
+    }
+  }
+  return result;
+}
+exports.defineProperties = defineProperties;

package/dist/atoms/defineProperties.d.ts

@@ -0,0 +1,32 @@
+import { Properties as CSSProperties } from 'csstype';
+type MapArray<T extends any[], V> = {
+    [Index in keyof T]: V;
+};
+type AtomicPrimitiveValue = string | number;
+type AtomicProperty = AtomicPrimitiveValue[] | Record<string, AtomicPrimitiveValue>;
+type Properties = Partial<Record<keyof CSSProperties, AtomicProperty>>;
+type PropertyCondition = {
+    '@media'?: string;
+};
+type PropertyConditions = PropertyCondition[];
+type PropertyDefinition<TProperties, TConditions> = {
+    properties: TProperties;
+    conditions?: TConditions;
+};
+type PropertyResultValue<TConditions> = TConditions extends any[] ? {
+    defaultClass: string;
+    conditions: TConditions extends any[] ? MapArray<TConditions, string> : never;
+} : {
+    defaultClass: string;
+};
+type PropertyResult<TProperties extends Properties, TConditions> = {
+    [K in keyof TProperties]: {
+        values: TProperties[K] extends any[] ? {
+            [V in TProperties[K][number]]: PropertyResultValue<TConditions>;
+        } : {
+            [V in keyof TProperties[K]]: PropertyResultValue<TConditions>;
+        };
+    };
+};
+export declare function defineProperties<const TProperties extends Properties, const TConditions extends PropertyConditions>({ properties, conditions, }: PropertyDefinition<TProperties, TConditions>): PropertyResult<TProperties, TConditions>;
+export {};

package/dist/atoms/defineProperties.js

@@ -0,0 +1,80 @@
+import { style } from "@vanilla-extract/css";
+function defineProperties({
+  properties,
+  conditions
+}) {
+  const result = {};
+  for (const property in properties) {
+    const values = properties[property];
+    result[property] = {
+      values: {}
+    };
+    const ref = result[property];
+    if (!ref || !ref.values) {
+      throw new Error(`Invalid property definition for ${property}`);
+    }
+    if (Array.isArray(values)) {
+      for (const value of values) {
+        const defaultClass = style({
+          [property]: value
+        });
+        ref.values[value] = {
+          defaultClass,
+          conditions: conditions == null ? void 0 : conditions.map((condition, i) => {
+            if (i === 0 && Object.keys(condition).length === 0) {
+              return defaultClass;
+            }
+            if (typeof condition === "object" && condition["@media"]) {
+              return style({
+                "@media": {
+                  [condition["@media"]]: {
+                    [property]: value
+                  }
+                }
+              });
+            }
+            throw new Error(
+              `Invalid condition for ${property}: ${JSON.stringify(condition)}`
+            );
+          })
+        };
+        if (!conditions && "conditions" in ref.values) {
+          delete ref.values.conditions;
+        }
+      }
+      continue;
+    }
+    for (const value in values) {
+      const defaultClass = style({
+        [property]: values[value]
+      });
+      ref.values[value] = {
+        defaultClass,
+        conditions: conditions == null ? void 0 : conditions.map((condition, i) => {
+          if (i === 0 && Object.keys(condition).length === 0) {
+            return defaultClass;
+          }
+          if (typeof condition === "object" && condition["@media"]) {
+            return style({
+              "@media": {
+                [condition["@media"]]: {
+                  [property]: value
+                }
+              }
+            });
+          }
+          throw new Error(
+            `Invalid condition for ${property}: ${JSON.stringify(condition)}`
+          );
+        })
+      };
+      if (!conditions && "conditions" in ref.values) {
+        delete ref.values.conditions;
+      }
+    }
+  }
+  return result;
+}
+export {
+  defineProperties
+};

package/dist/{sprinkles → atoms}/getAtomsAndProps.cjs

@@ -1,11 +1,11 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const sprinkles_css = require("./sprinkles.css.cjs");
+const atoms_css = require("./atoms.css.cjs");
 function getAtomsAndProps(props) {
   const atomProps = {};
   const otherProps = {};
   for (const [name, value] of Object.entries(props)) {
-    if (sprinkles_css.sprinkles.properties.has(name)) {
+    if (atoms_css.atomicProperties.hasOwnProperty(name)) {
       atomProps[name] = value;
     } else {
       otherProps[name] = value;

package/dist/atoms/getAtomsAndProps.d.ts

@@ -0,0 +1 @@
+export declare function getAtomsAndProps(props: Record<string, unknown>): [atomsClassNames: Record<string, unknown>, props: Record<string, unknown>];

package/dist/{sprinkles → atoms}/getAtomsAndProps.js

@@ -1,9 +1,9 @@
-import { sprinkles } from "./sprinkles.css.js";
+import { atomicProperties } from "./atoms.css.js";
 function getAtomsAndProps(props) {
   const atomProps = {};
   const otherProps = {};
   for (const [name, value] of Object.entries(props)) {
-    if (sprinkles.properties.has(name)) {
+    if (atomicProperties.hasOwnProperty(name)) {
       atomProps[name] = value;
     } else {
       otherProps[name] = value;

package/dist/config/componentThemes.d.ts

@@ -1,4 +1,4 @@
-import { Sprinkles } from '../sprinkles/sprinkles.css';
+import { Atoms } from '../atoms/atoms';
 import { RecordLike } from '../utils/typing/helpers';
 /**
  * Theming options for components.
@@ -24,13 +24,13 @@ export type SpinnerTheme = {
     base: string;
     variants: {
         size: 'small' | 'medium' | 'large';
-        color: Exclude<Sprinkles['color'], undefined>;
+        color: Exclude<Atoms['color'], undefined>;
     };
 };
 export type DividerTheme = {
     base?: string;
     variants: {
-        color: Exclude<Sprinkles['color'], undefined>;
+        color: Exclude<Atoms['color'], undefined>;
     };
 };
 export type DialogTheme = {

package/dist/index.cjs

@@ -4,9 +4,6 @@ const breakpoint = require("./css/breakpoint/breakpoint.cjs");
 const layers_css = require("./css/layers.css.cjs");
 const rem = require("./css/rem.cjs");
 const vars_css = require("./css/vars.css.cjs");
-const atomicProperties = require("./sprinkles/atomicProperties.cjs");
-const getAtomsAndProps = require("./sprinkles/getAtomsAndProps.cjs");
-const sprinkles_css = require("./sprinkles/sprinkles.css.cjs");
 const makeComponentTheme = require("./theme/makeComponentTheme.cjs");
 const makeTheme = require("./theme/makeTheme.cjs");
 const classnames = require("./utils/classnames/classnames.cjs");
@@ -16,14 +13,14 @@ const math = require("./utils/math/math.cjs");
 const mergeProps = require("./utils/react/mergeProps.cjs");
 const refs = require("./utils/react/refs.cjs");
 const helpers = require("./utils/typing/helpers.cjs");
+const atoms = require("./atoms/atoms.cjs");
+const atoms_css = require("./atoms/atoms.css.cjs");
+const getAtomsAndProps = require("./atoms/getAtomsAndProps.cjs");
+exports.breakpointNames = breakpoint.breakpointNames;
 exports.minMediaQuery = breakpoint.minMediaQuery;
 exports.blocksLayer = layers_css.blocksLayer;
 exports.rem = rem.rem;
 exports.vars = vars_css.vars;
-exports.responsiveProperties = atomicProperties.responsiveProperties;
-exports.unresponsiveProperties = atomicProperties.unresponsiveProperties;
-exports.getAtomsAndProps = getAtomsAndProps.getAtomsAndProps;
-exports.sprinkles = sprinkles_css.sprinkles;
 exports.makeComponentTheme = makeComponentTheme.makeComponentTheme;
 exports.makeTheme = makeTheme.makeTheme;
 exports.classnames = classnames.classnames;
@@ -35,3 +32,6 @@ exports.roundToPrecision = math.roundToPrecision;
 exports.mergeProps = mergeProps.mergeProps;
 exports.composeRefs = refs.composeRefs;
 exports.isObjectLike = helpers.isObjectLike;
+exports.atoms = atoms.atoms;
+exports.atomicProperties = atoms_css.atomicProperties;
+exports.getAtomsAndProps = getAtomsAndProps.getAtomsAndProps;

package/dist/index.d.ts

@@ -1,13 +1,9 @@
 export type { ComponentThemes, ComponentThemesProps, } from './config/componentThemes';
 export type { ThemeTokens } from './config/themeTokens';
-export { minMediaQuery } from './css/breakpoint/breakpoint';
+export { breakpointNames, minMediaQuery } from './css/breakpoint/breakpoint';
 export { blocksLayer } from './css/layers.css';
 export { rem } from './css/rem';
 export { vars } from './css/vars.css';
-export { responsiveProperties, unresponsiveProperties, } from './sprinkles/atomicProperties';
-export type { MarginSprinkles, PaddingSprinkles, ResponsiveDisplayFlex, ResponsiveValue, TextSprinkles, } from './sprinkles/atomTypes';
-export { getAtomsAndProps } from './sprinkles/getAtomsAndProps';
-export { sprinkles, type Sprinkles } from './sprinkles/sprinkles.css';
 export { makeComponentTheme } from './theme/makeComponentTheme';
 export type { ComponentTheme, ThemeComponentsStyles, } from './theme/makeComponentTheme';
 export { makeTheme } from './theme/makeTheme';
@@ -19,3 +15,7 @@ export { getBoundValue, roundToPrecision } from './utils/math/math';
 export { mergeProps } from './utils/react/mergeProps';
 export { composeRefs } from './utils/react/refs';
 export { isObjectLike, type AnyString, type HTMLElementProps, type IsNumberUnion, type IsStringUnion, type IsUnion, type OptionalLiteral, type RecordLike, } from './utils/typing/helpers';
+export { atoms, type Atoms } from './atoms/atoms';
+export { atomicProperties } from './atoms/atoms.css';
+export type { MarginAtoms, PaddingAtoms, TextAtoms } from './atoms/atomTypes';
+export { getAtomsAndProps } from './atoms/getAtomsAndProps';

package/dist/index.js

@@ -1,10 +1,7 @@
-import { minMediaQuery } from "./css/breakpoint/breakpoint.js";
+import { breakpointNames, minMediaQuery } from "./css/breakpoint/breakpoint.js";
 import { blocksLayer } from "./css/layers.css.js";
 import { rem } from "./css/rem.js";
 import { vars } from "./css/vars.css.js";
-import { responsiveProperties, unresponsiveProperties } from "./sprinkles/atomicProperties.js";
-import { getAtomsAndProps } from "./sprinkles/getAtomsAndProps.js";
-import { sprinkles } from "./sprinkles/sprinkles.css.js";
 import { makeComponentTheme } from "./theme/makeComponentTheme.js";
 import { makeTheme } from "./theme/makeTheme.js";
 import { classnames } from "./utils/classnames/classnames.js";
@@ -14,9 +11,15 @@ import { getBoundValue, roundToPrecision } from "./utils/math/math.js";
 import { mergeProps } from "./utils/react/mergeProps.js";
 import { composeRefs } from "./utils/react/refs.js";
 import { isObjectLike } from "./utils/typing/helpers.js";
+import { atoms } from "./atoms/atoms.js";
+import { atomicProperties } from "./atoms/atoms.css.js";
+import { getAtomsAndProps } from "./atoms/getAtomsAndProps.js";
 export {
   alignItemsMap,
+  atomicProperties,
+  atoms,
   blocksLayer,
+  breakpointNames,
   classnames,
   composeRefs,
   getAtomsAndProps,
@@ -29,9 +32,6 @@ export {
   mergeProps,
   minMediaQuery,
   rem,
-  responsiveProperties,
   roundToPrecision,
-  sprinkles,
-  unresponsiveProperties,
   vars
 };

package/dist/utils/react/mergeProps.cjs

@@ -19,7 +19,7 @@ function mergeProps(slotProps, childProps) {
         childPropValue(...args);
         slotPropValue(...args);
       };
-    } else
+    } else {
       switch (propName) {
         case "style": {
           overrideProps[propName] = { ...slotPropValue, ...childPropValue };
@@ -30,13 +30,17 @@ function mergeProps(slotProps, childProps) {
           break;
         }
         case "ref": {
-          overrideProps[propName] = refs.composeRefs(slotPropValue, childPropValue);
+          overrideProps[propName] = refs.composeRefs(
+            slotPropValue,
+            childPropValue
+          );
           break;
         }
         default: {
           overrideProps[propName] = childPropValue;
         }
       }
+    }
   }
   return { ...slotProps, ...overrideProps };
 }

package/dist/utils/react/mergeProps.d.ts

@@ -1,4 +1,4 @@
-export type UknownRecord = Record<string, unknown>;
-export declare function mergeProps(slotProps: UknownRecord, childProps: UknownRecord): {
+export type UnknownRecord = Record<string, unknown>;
+export declare function mergeProps(slotProps: UnknownRecord, childProps: UnknownRecord): {
     [x: string]: unknown;
 };

package/dist/utils/react/mergeProps.js

@@ -17,7 +17,7 @@ function mergeProps(slotProps, childProps) {
         childPropValue(...args);
         slotPropValue(...args);
       };
-    } else
+    } else {
       switch (propName) {
         case "style": {
           overrideProps[propName] = { ...slotPropValue, ...childPropValue };
@@ -28,13 +28,17 @@ function mergeProps(slotProps, childProps) {
           break;
         }
         case "ref": {
-          overrideProps[propName] = composeRefs(slotPropValue, childPropValue);
+          overrideProps[propName] = composeRefs(
+            slotPropValue,
+            childPropValue
+          );
           break;
         }
         default: {
           overrideProps[propName] = childPropValue;
         }
       }
+    }
   }
   return { ...slotProps, ...overrideProps };
 }

package/dist/utils/react/refs.d.ts

@@ -1,3 +1,3 @@
-type PossibleRef<T> = React.Ref<T> | undefined | unknown;
+type PossibleRef<T> = React.Ref<T> | undefined | null;
 export declare function composeRefs<T>(...refs: PossibleRef<T>[]): (node: T) => void;
 export {};

package/dist/utils/typing/helpers.d.ts

@@ -1,4 +1,4 @@
-import { Sprinkles } from '../../sprinkles/sprinkles.css';
+import { Atoms } from '../../atoms/atoms';
 export type AnyString = string & {};
 /**
  * Suggest a type for a string literal but also allow any string.
@@ -9,4 +9,4 @@ export declare function isObjectLike<T extends RecordLike>(value: T): value is T
 export type IsStringUnion<T> = T extends string ? string extends T ? false : true : false;
 export type IsNumberUnion<T> = T extends number ? number extends T ? false : true : false;
 export type IsUnion<T> = IsStringUnion<T> extends true ? true : IsNumberUnion<T> extends true ? true : false;
-export type HTMLElementProps<E extends Element> = Omit<React.HTMLProps<E>, keyof Sprinkles | 'ref'>;
+export type HTMLElementProps<E extends Element> = Omit<React.HTMLProps<E>, keyof Atoms | 'ref'>;

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "@blockle/blocks-core",
-  "version": "0.21.3",
+  "version": "0.21.5",
   "description": "Core for Blocks",
   "type": "module",
+  "sideEffects": false,
   "exports": {
     ".": {
       "types": {
@@ -37,8 +38,7 @@
   },
   "homepage": "https://github.com/Blockle/blocks#readme",
   "dependencies": {
-    "@vanilla-extract/css": "^1.17.1",
-    "@vanilla-extract/sprinkles": "^1.6.3"
+    "@vanilla-extract/css": "^1.17.1"
   },
   "peerDependencies": {
     "react": "^19",

package/dist/sprinkles/atomTypes.d.ts

@@ -1,36 +0,0 @@
-import { Sprinkles } from './sprinkles.css';
-export type ResponsiveValue<T> = T | [T] | [T, T] | [T, T, T] | [T, T, T, T];
-export type ResponsiveDisplayFlex = ResponsiveValue<'none' | 'flex' | 'inline-flex'>;
-export type MarginSprinkles = {
-    margin?: Sprinkles['margin'];
-    marginBlock?: Sprinkles['marginBlock'];
-    marginBlockStart?: Sprinkles['marginBlockStart'];
-    marginBlockEnd?: Sprinkles['marginBlockEnd'];
-    marginInline?: Sprinkles['marginInline'];
-    marginInlineStart?: Sprinkles['marginInlineStart'];
-    marginInlineEnd?: Sprinkles['marginInlineEnd'];
-};
-export type PaddingSprinkles = {
-    padding?: Sprinkles['padding'];
-    paddingBlock?: Sprinkles['paddingBlock'];
-    paddingBlockStart?: Sprinkles['paddingBlockStart'];
-    paddingBlockEnd?: Sprinkles['paddingBlockEnd'];
-    paddingInline?: Sprinkles['paddingInline'];
-    paddingInlineStart?: Sprinkles['paddingInlineStart'];
-    paddingInlineEnd?: Sprinkles['paddingInlineEnd'];
-};
-export type TextSprinkles = {
-    color?: Sprinkles['color'];
-    fontFamily?: Sprinkles['fontFamily'];
-    fontSize?: Sprinkles['fontSize'];
-    fontStyle?: Sprinkles['fontStyle'];
-    fontWeight?: Sprinkles['fontWeight'];
-    lineHeight?: Sprinkles['lineHeight'];
-    textAlign?: Sprinkles['textAlign'];
-    textDecoration?: Sprinkles['textDecoration'];
-    textTransform?: Sprinkles['textTransform'];
-    textWrap?: Sprinkles['textWrap'];
-    whiteSpace?: Sprinkles['whiteSpace'];
-    wordBreak?: Sprinkles['wordBreak'];
-    wordWrap?: Sprinkles['wordWrap'];
-};