@blockle/blocks-core 0.21.12 → 0.23.0

package/dist/atoms/atomTypes.d.ts

@@ -1,4 +1,4 @@
-import { Atoms } from './atoms';
+import { Atoms } from './atoms.js';
 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 MarginAtoms = {

package/dist/atoms/atoms.d.ts

@@ -1,4 +1,4 @@
-import { atomicProperties } from './atoms.css';
+import { atomicProperties } from './atoms.css.js';
 export type AtomicProperties = typeof atomicProperties;
 export type AtomProperties = {
     [K in keyof AtomicProperties]?: AtomicProperties[K]['values'] extends Record<string, {

package/dist/config/componentThemes.d.ts

@@ -1,5 +1,5 @@
-import { Atoms } from '../atoms/atoms';
-import { RecordLike } from '../utils/typing/helpers';
+import { Atoms } from '../atoms/atoms.js';
+import { RecordLike } from '../utils/typing/helpers.js';
 /**
  * Theming options for components.
  */

package/dist/css/tokens.d.ts

@@ -1,2 +1,2 @@
-import { ThemeTokens } from '../config/themeTokens';
+import { ThemeTokens } from '../config/themeTokens.js';
 export declare const tokens: ThemeTokens;

package/dist/index.d.ts

@@ -1,22 +1,22 @@
-export type { ComponentThemes, ComponentThemesProps, } from './config/componentThemes';
-export type { ThemeTokens } from './config/themeTokens';
-export { breakpointNames, minMediaQuery } from './css/breakpoint/breakpoint';
-export { blocksLayer, blocksLayerAtom, blocksLayerComponent, } from './css/layers.css';
-export { rem } from './css/rem';
-export { vars } from './css/vars.css';
-export { makeComponentTheme } from './theme/makeComponentTheme';
-export type { ComponentTheme, ThemeComponentsStyles, } from './theme/makeComponentTheme';
-export { makeTheme } from './theme/makeTheme';
-export type { Theme } from './theme/makeTheme';
-export { classnames } from './utils/classnames/classnames';
-export { hasAnimationDuration } from './utils/dom/hasAnimationDuration';
-export { alignItemsMap, justifyContentMap, type AlignItemsMap, type JustifyContentMap, } from './utils/flexbox/flexbox';
-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';
-export { cssValueToNumber, getCSSScale, getOriginalElementSize, parseCSSTransform, } from './css/cssMatrixUtils';
+export type { ComponentThemes, ComponentThemesProps, } from './config/componentThemes.js';
+export type { ThemeTokens } from './config/themeTokens.js';
+export { breakpointNames, minMediaQuery } from './css/breakpoint/breakpoint.js';
+export { blocksLayer, blocksLayerAtom, blocksLayerComponent, } from './css/layers.css.js';
+export { rem } from './css/rem.js';
+export { vars } from './css/vars.css.js';
+export { makeComponentTheme } from './theme/makeComponentTheme.js';
+export type { ComponentTheme, ThemeComponentsStyles, } from './theme/makeComponentTheme.js';
+export { makeTheme } from './theme/makeTheme.js';
+export type { Theme } from './theme/makeTheme.js';
+export { classnames } from './utils/classnames/classnames.js';
+export { hasAnimationDuration } from './utils/dom/hasAnimationDuration.js';
+export { alignItemsMap, justifyContentMap, type AlignItemsMap, type JustifyContentMap, } from './utils/flexbox/flexbox.js';
+export { clampAndRoundValue } from './utils/math/math.js';
+export { mergeProps } from './utils/react/mergeProps.js';
+export { composeRefs } from './utils/react/refs.js';
+export { isObjectLike, type AnyString, type HTMLElementProps, type IsNumberUnion, type IsStringUnion, type IsUnion, type OptionalLiteral, type RecordLike, } from './utils/typing/helpers.js';
+export { atomicProperties } from './atoms/atoms.css.js';
+export { atoms, type Atoms } from './atoms/atoms.js';
+export type { MarginAtoms, PaddingAtoms, TextAtoms, } from './atoms/atomTypes.js';
+export { getAtomsAndProps } from './atoms/getAtomsAndProps.js';
+export { cssValueToNumber, getCSSScale, getOriginalElementSize, parseCSSTransform, } from './css/cssMatrixUtils.js';

package/dist/index.js

@@ -7,12 +7,12 @@ import { makeTheme } from "./theme/makeTheme.js";
 import { classnames } from "./utils/classnames/classnames.js";
 import { hasAnimationDuration } from "./utils/dom/hasAnimationDuration.js";
 import { alignItemsMap, justifyContentMap } from "./utils/flexbox/flexbox.js";
-import { getBoundValue, roundToPrecision } from "./utils/math/math.js";
+import { clampAndRoundValue } 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 { atoms } from "./atoms/atoms.js";
 import { getAtomsAndProps } from "./atoms/getAtomsAndProps.js";
 import { cssValueToNumber, getCSSScale, getOriginalElementSize, parseCSSTransform } from "./css/cssMatrixUtils.js";
 export {
@@ -23,11 +23,11 @@ export {
   blocksLayerAtom,
   blocksLayerComponent,
   breakpointNames,
+  clampAndRoundValue,
   classnames,
   composeRefs,
   cssValueToNumber,
   getAtomsAndProps,
-  getBoundValue,
   getCSSScale,
   getOriginalElementSize,
   hasAnimationDuration,
@@ -39,6 +39,5 @@ export {
   minMediaQuery,
   parseCSSTransform,
   rem,
-  roundToPrecision,
   vars
 };

package/dist/theme/makeComponentTheme.d.ts

@@ -1,5 +1,5 @@
-import { ComponentThemes } from '../config/componentThemes';
-import { RecordLike } from '../utils/typing/helpers';
+import { ComponentThemes } from '../config/componentThemes.js';
+import { RecordLike } from '../utils/typing/helpers.js';
 type VariantsToStyle<T extends RecordLike> = {
     [K in keyof T]?: T[K] extends string | number ? Partial<Record<T[K], string>> : T[K] extends boolean ? string : never;
 };

package/dist/theme/makeTheme.d.ts

@@ -1,5 +1,5 @@
-import { ThemeTokens } from '../config/themeTokens';
-import { ThemeComponentsStyles } from './makeComponentTheme';
+import { ThemeTokens } from '../config/themeTokens.js';
+import { ThemeComponentsStyles } from './makeComponentTheme.js';
 type ThemeInput = {
     name: string;
     tokens: ThemeTokens;

package/dist/theme/makeVanillaTheme.d.ts

@@ -1,4 +1,4 @@
-import { ThemeTokens } from '../config/themeTokens';
+import { ThemeTokens } from '../config/themeTokens.js';
 export declare const makeVanillaTheme: (tokens: ThemeTokens) => {
     space: Record<keyof typeof tokens.spacing, string>;
     borderRadius: Record<keyof typeof tokens.border.radius, string>;

package/dist/theme/theme.d.ts

@@ -1,3 +1,3 @@
-import { Theme } from './makeTheme';
+import { Theme } from './makeTheme.js';
 export declare const setTheme: (theme: Theme) => void;
 export declare const getTheme: () => Theme;

package/dist/utils/math/math.d.ts

@@ -1,2 +1 @@
-export declare function roundToPrecision(value: number, precision: number): number;
-export declare function getBoundValue(newValue: number, min: number, max: number, step: number): number;
+export declare function clampAndRoundValue(newValue: number, min: number, max: number, step: number): number;

package/dist/utils/math/math.js

@@ -1,13 +1,7 @@
-function roundToPrecision(value, precision) {
-  const factor = 10 ** precision;
-  return Math.round(value * factor) / factor;
-}
-function getBoundValue(newValue, min, max, step) {
-  let value = Math.round(newValue / step) * step;
-  value = Math.max(min, Math.min(max, value));
-  return value;
+function clampAndRoundValue(newValue, min, max, step) {
+  const value = Math.round(newValue / step) * step;
+  return Math.max(min, Math.min(max, value));
 }
 export {
-  getBoundValue,
-  roundToPrecision
+  clampAndRoundValue
 };

package/dist/utils/math/math.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -1,3 +1,4 @@
+import { default as React } from 'react';
 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 { Atoms } from '../../atoms/atoms';
+import { Atoms } from '../../atoms/atoms.js';
 export type AnyString = string & {};
 /**
  * Suggest a type for a string literal but also allow any string.

package/package.json

@@ -1,25 +1,18 @@
 {
   "name": "@blockle/blocks-core",
-  "version": "0.21.12",
+  "version": "0.23.0",
   "description": "Core for Blocks",
   "type": "module",
   "sideEffects": false,
   "exports": {
     ".": {
-      "types": {
-        "import": "./dist/index.d.mts",
-        "require": "./dist/index.d.ts"
-      },
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs"
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
     }
   },
   "files": [
     "dist"
   ],
-  "main": "./dist/index.cjs",
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
   "scripts": {
     "build": "vite build",
     "test": "vitest ",
@@ -41,7 +34,6 @@
     "@vanilla-extract/css": "^1.17.1"
   },
   "peerDependencies": {
-    "react": "^19",
-    "react-dom": "^19"
+    "@vanilla-extract/css": ">= 1.17.1"
   }
 }

package/dist/atoms/atoms.cjs

@@ -1,34 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const atoms_css = require("./atoms.css.cjs");
-function atoms(properties) {
-  const classList = [];
-  for (const property in properties) {
-    const value = properties[property];
-    const target = atoms_css.atomicProperties[property];
-    if (!target) {
-      continue;
-    }
-    if (typeof value === "string" || typeof value === "number") {
-      if (target.values[value] !== void 0) {
-        classList.push(target.values[value].defaultClass);
-      }
-    } else if (Array.isArray(value)) {
-      value.forEach((val, i) => {
-        const atomicValue = target.values[val];
-        if (i === 0) {
-          if (atomicValue) {
-            classList.push(atomicValue.defaultClass);
-          }
-          return;
-        }
-        if (!(atomicValue == null ? void 0 : atomicValue.conditions[i])) {
-          return;
-        }
-        classList.push(atomicValue == null ? void 0 : atomicValue.conditions[i]);
-      });
-    }
-  }
-  return classList.join(" ");
-}
-exports.atoms = atoms;

package/dist/atoms/atoms.css.cjs

@@ -1,119 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const fileScope = require("@vanilla-extract/css/fileScope");
-const breakpoint = require("../css/breakpoint/breakpoint.cjs");
-const vars_css = require("../css/vars.css.cjs");
-const defineProperties = require("./defineProperties.cjs");
-fileScope.setFileScope("src/atoms/atoms.css.ts", "@blockle/blocks-core");
-const colorsWithCurrentColor = { ...vars_css.vars.color, currentColor: "currentColor" };
-const size = { auto: "auto", full: "100%", "fit-content": "fit-content" };
-const marginSpace = { auto: "auto", ...vars_css.vars.space };
-const unresponsiveAtomicProperties = defineProperties.defineProperties({
-  properties: {
-    appearance: ["none"],
-    backgroundColor: colorsWithCurrentColor,
-    blockSize: size,
-    border: ["none"],
-    borderColor: colorsWithCurrentColor,
-    borderRadius: vars_css.vars.borderRadius,
-    borderWidth: vars_css.vars.borderWidth,
-    boxShadow: vars_css.vars.shadow,
-    color: colorsWithCurrentColor,
-    cursor: ["auto", "pointer"],
-    fontFamily: vars_css.vars.fontFamily,
-    fontStyle: ["normal", "italic", "oblique"],
-    fontWeight: vars_css.vars.fontWeight,
-    inlineSize: size,
-    insetBlock: [0],
-    insetBlockEnd: [0],
-    insetBlockStart: [0],
-    insetInline: [0],
-    insetInlineEnd: [0],
-    insetInlineStart: [0],
-    lineHeight: vars_css.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_css.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.defineProperties({
-  conditions: [
-    {},
-    {
-      "@media": breakpoint.minMediaQuery("tablet")
-    },
-    {
-      "@media": breakpoint.minMediaQuery("desktop")
-    },
-    {
-      "@media": breakpoint.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_css.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_css.vars.fontSize,
-    gap: vars_css.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_css.vars.space,
-    paddingBlock: vars_css.vars.space,
-    paddingBlockEnd: vars_css.vars.space,
-    paddingBlockStart: vars_css.vars.space,
-    paddingInline: vars_css.vars.space,
-    paddingInlineEnd: vars_css.vars.space,
-    paddingInlineStart: vars_css.vars.space,
-    position: ["relative", "fixed", "absolute", "sticky", "static"],
-    rowGap: vars_css.vars.space
-  }
-});
-const atomicProperties = {
-  ...responsiveAtomicProperties,
-  ...unresponsiveAtomicProperties
-};
-fileScope.endFileScope();
-exports.atomicProperties = atomicProperties;

package/dist/atoms/defineProperties.cjs

@@ -1,94 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const css = require("@vanilla-extract/css");
-const layers_css = require("../css/layers.css.cjs");
-function defineProperties({
-  properties,
-  conditions
-}) {
-  const result = {};
-  for (const property in properties) {
-    const values = properties[property];
-    const propertyResult = {
-      values: {}
-    };
-    if (Array.isArray(values)) {
-      for (const value of values) {
-        const defaultClass = css.style({
-          "@layer": {
-            [layers_css.blocksLayerAtom]: {
-              [property]: value
-            }
-          }
-        });
-        const propResult = {
-          defaultClass
-        };
-        if (isValidConditionList(conditions)) {
-          propResult.conditions = conditions.map((condition, i) => {
-            if (i === 0 && Object.keys(condition).length === 0) {
-              return defaultClass;
-            }
-            if (typeof condition === "object" && condition["@media"]) {
-              return css.style({
-                "@layer": {
-                  [layers_css.blocksLayerAtom]: {
-                    "@media": {
-                      [condition["@media"]]: {
-                        [property]: value
-                      }
-                    }
-                  }
-                }
-              });
-            }
-            throw new Error(
-              `Invalid condition for ${property}: ${JSON.stringify(condition)}`
-            );
-          });
-        }
-        propertyResult.values[value] = propResult;
-      }
-      result[property] = propertyResult;
-      continue;
-    }
-    for (const value in values) {
-      const defaultClass = css.style({
-        "@layer": {
-          [layers_css.blocksLayerAtom]: {
-            [property]: values[value]
-          }
-        }
-      });
-      const propResult = {
-        defaultClass
-      };
-      if (isValidConditionList(conditions)) {
-        propResult.conditions = 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]: values[value]
-                }
-              }
-            });
-          }
-          throw new Error(
-            `Invalid condition for ${property}: ${JSON.stringify(condition)}`
-          );
-        });
-      }
-      propertyResult.values[value] = propResult;
-    }
-    result[property] = propertyResult;
-  }
-  return result;
-}
-function isValidConditionList(condition) {
-  return Array.isArray(condition) && condition.length > 0;
-}
-exports.defineProperties = defineProperties;

package/dist/atoms/getAtomsAndProps.cjs

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

package/dist/css/breakpoint/breakpoint.cjs

@@ -1,15 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const breakpointNames = ["mobile", "tablet", "desktop", "wide"];
-const breakpoints = {
-  mobile: 0,
-  tablet: 740,
-  desktop: 992,
-  wide: 1200
-};
-function minMediaQuery(breakpoint) {
-  return `screen and (min-width: ${breakpoints[breakpoint]}px)`;
-}
-exports.breakpointNames = breakpointNames;
-exports.breakpoints = breakpoints;
-exports.minMediaQuery = minMediaQuery;

package/dist/css/cssMatrixUtils.cjs

@@ -1,64 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const CSSMatrixValuePattern = /matrix\((.*?)\)/;
-function parseCSSTransform(styleDeclaration) {
-  const transform = styleDeclaration.getPropertyValue("transform");
-  if (!transform || !CSSMatrixValuePattern.test(transform)) {
-    return {
-      a: 1,
-      b: 0,
-      c: 0,
-      d: 1,
-      tx: 0,
-      ty: 0
-    };
-  }
-  const matrixMatch = transform.match(CSSMatrixValuePattern);
-  if (!matrixMatch || !matrixMatch[1]) {
-    throw new Error(`Invalid matrix value: ${transform}`);
-  }
-  const matrixValues = matrixMatch[1].split(",").map((value) => cssValueToNumber(value.trim()));
-  if (matrixValues.length !== 6) {
-    throw new Error("Invalid matrix value");
-  }
-  return {
-    a: matrixValues[0],
-    b: matrixValues[1],
-    c: matrixValues[2],
-    d: matrixValues[3],
-    tx: matrixValues[4],
-    ty: matrixValues[5]
-  };
-}
-function getCSSScale(styleDeclaration) {
-  const scale = styleDeclaration.getPropertyValue("scale");
-  if (!scale || scale === "none") {
-    const matrix2d = parseCSSTransform(styleDeclaration);
-    const scaleX = Math.sqrt(matrix2d.a * matrix2d.a + matrix2d.b * matrix2d.b);
-    const scaleY = Math.sqrt(matrix2d.c * matrix2d.c + matrix2d.d * matrix2d.d);
-    return [scaleX, scaleY];
-  }
-  if (scale.includes(" ")) {
-    return scale.split(" ").map((value) => cssValueToNumber(value));
-  }
-  const scaleValue = cssValueToNumber(scale);
-  return [scaleValue, scaleValue];
-}
-function getOriginalElementSize(styleDeclaration, width, height) {
-  const [scaleX, scaleY] = getCSSScale(styleDeclaration);
-  return [width / scaleX, height / scaleY];
-}
-function cssValueToNumber(value) {
-  if (!value) {
-    return 0;
-  }
-  const parsedValue = Number.parseFloat(value);
-  if (Number.isNaN(parsedValue)) {
-    return 0;
-  }
-  return parsedValue;
-}
-exports.cssValueToNumber = cssValueToNumber;
-exports.getCSSScale = getCSSScale;
-exports.getOriginalElementSize = getOriginalElementSize;
-exports.parseCSSTransform = parseCSSTransform;

package/dist/css/layers.css.cjs

@@ -1,18 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const fileScope = require("@vanilla-extract/css/fileScope");
-const css = require("@vanilla-extract/css");
-fileScope.setFileScope("src/css/layers.css.ts", "@blockle/blocks-core");
-const blocksLayerAtom = css.layer("blocks-atom");
-const blocksLayerComponent = css.layer(
-  { parent: blocksLayerAtom },
-  "blocks-component"
-);
-const blocksLayer = css.layer(
-  { parent: blocksLayerComponent },
-  "blockle-blocks"
-);
-fileScope.endFileScope();
-exports.blocksLayer = blocksLayer;
-exports.blocksLayerAtom = blocksLayerAtom;
-exports.blocksLayerComponent = blocksLayerComponent;

package/dist/css/rem.cjs

@@ -1,6 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-function rem(value) {
-  return `${value / 16}rem`;
-}
-exports.rem = rem;

package/dist/css/tokens.cjs

@@ -1,82 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const tokens = {
-  typography: {
-    fontFamily: {
-      body: "Roboto, sans-serif",
-      primary: "Roboto, sans-serif",
-      secondary: "Roboto, sans-serif"
-    },
-    fontSize: {
-      xsmall: "0.75rem",
-      small: "0.875rem",
-      medium: "1rem",
-      large: "1.125rem",
-      xlarge: "1.25rem"
-    },
-    fontWeight: {
-      regular: 400,
-      medium: 500,
-      strong: 700
-    },
-    lineHeight: {
-      xsmall: "1rem",
-      small: "1.25rem",
-      medium: "1.5rem",
-      large: "1.75rem",
-      xlarge: "2rem"
-    }
-  },
-  spacing: {
-    none: 0,
-    gutter: "1rem",
-    xsmall: "0.25rem",
-    small: "0.5rem",
-    medium: "1rem",
-    large: "1.5rem",
-    xlarge: "2rem"
-  },
-  transition: {
-    slow: "500ms",
-    normal: "300ms",
-    fast: "100ms"
-  },
-  border: {
-    radius: {
-      small: "0.25rem",
-      medium: "0.5rem",
-      large: "1rem",
-      xlarge: "2rem"
-    },
-    width: {
-      small: "1px",
-      medium: "2px",
-      large: "4px"
-    }
-  },
-  shadow: {
-    small: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
-    medium: "0 2px 4px 0 rgba(0, 0, 0, 0.05)",
-    large: "0 4px 8px 0 rgba(0, 0, 0, 0.05)"
-  },
-  focus: {
-    boxShadow: "0 0 0 2px #AF8EFF"
-  },
-  color: {
-    black: "#000000",
-    white: "#ffffff",
-    body: "#ffffff",
-    primaryLight: "#f5f5f5",
-    primary: "#e0e0e0",
-    primaryDark: "#aeaeae",
-    secondaryLight: "#f5f5f5",
-    secondary: "#e0e0e0",
-    secondaryDark: "#aeaeae",
-    text: "#000000",
-    textLight: "#ffffff",
-    textDark: "#aeaeae",
-    danger: "#ff0000",
-    link: "#0000ff"
-  }
-};
-exports.tokens = tokens;

package/dist/css/vars.css.cjs

@@ -1,10 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const fileScope = require("@vanilla-extract/css/fileScope");
-const css = require("@vanilla-extract/css");
-const makeVanillaTheme = require("../theme/makeVanillaTheme.cjs");
-const tokens = require("./tokens.cjs");
-fileScope.setFileScope("src/css/vars.css.ts", "@blockle/blocks-core");
-const vars = css.createThemeContract(makeVanillaTheme.makeVanillaTheme(tokens.tokens));
-fileScope.endFileScope();
-exports.vars = vars;

package/dist/index.cjs

@@ -1,44 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-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 makeComponentTheme = require("./theme/makeComponentTheme.cjs");
-const makeTheme = require("./theme/makeTheme.cjs");
-const classnames = require("./utils/classnames/classnames.cjs");
-const hasAnimationDuration = require("./utils/dom/hasAnimationDuration.cjs");
-const flexbox = require("./utils/flexbox/flexbox.cjs");
-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");
-const cssMatrixUtils = require("./css/cssMatrixUtils.cjs");
-exports.breakpointNames = breakpoint.breakpointNames;
-exports.minMediaQuery = breakpoint.minMediaQuery;
-exports.blocksLayer = layers_css.blocksLayer;
-exports.blocksLayerAtom = layers_css.blocksLayerAtom;
-exports.blocksLayerComponent = layers_css.blocksLayerComponent;
-exports.rem = rem.rem;
-exports.vars = vars_css.vars;
-exports.makeComponentTheme = makeComponentTheme.makeComponentTheme;
-exports.makeTheme = makeTheme.makeTheme;
-exports.classnames = classnames.classnames;
-exports.hasAnimationDuration = hasAnimationDuration.hasAnimationDuration;
-exports.alignItemsMap = flexbox.alignItemsMap;
-exports.justifyContentMap = flexbox.justifyContentMap;
-exports.getBoundValue = math.getBoundValue;
-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;
-exports.cssValueToNumber = cssMatrixUtils.cssValueToNumber;
-exports.getCSSScale = cssMatrixUtils.getCSSScale;
-exports.getOriginalElementSize = cssMatrixUtils.getOriginalElementSize;
-exports.parseCSSTransform = cssMatrixUtils.parseCSSTransform;

package/dist/theme/makeComponentTheme.cjs

@@ -1,6 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-function makeComponentTheme(component, componentTheme) {
-  return componentTheme;
-}
-exports.makeComponentTheme = makeComponentTheme;

package/dist/theme/makeTheme.cjs

@@ -1,13 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const css = require("@vanilla-extract/css");
-const vars_css = require("../css/vars.css.cjs");
-const makeVanillaTheme = require("./makeVanillaTheme.cjs");
-function makeTheme(theme) {
-  return {
-    name: theme.name,
-    vars: css.createTheme(vars_css.vars, makeVanillaTheme.makeVanillaTheme(theme.tokens)),
-    components: theme.components
-  };
-}
-exports.makeTheme = makeTheme;

package/dist/theme/makeVanillaTheme.cjs

@@ -1,20 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const makeVanillaTheme = (tokens) => {
-  return {
-    space: tokens.spacing,
-    borderRadius: tokens.border.radius,
-    color: tokens.color,
-    borderWidth: tokens.border.width,
-    fontFamily: tokens.typography.fontFamily,
-    fontSize: tokens.typography.fontSize,
-    fontWeight: tokens.typography.fontWeight,
-    lineHeight: tokens.typography.lineHeight,
-    transition: tokens.transition,
-    shadow: tokens.shadow,
-    focus: {
-      boxShadow: tokens.focus.boxShadow
-    }
-  };
-};
-exports.makeVanillaTheme = makeVanillaTheme;

package/dist/utils/classnames/classnames.cjs

@@ -1,7 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const classnames = (...args) => {
-  const className = args.filter((arg) => arg && typeof arg === "string").join(" ");
-  return className || void 0;
-};
-exports.classnames = classnames;

package/dist/utils/dom/hasAnimationDuration.cjs

@@ -1,13 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-function hasAnimationDuration(element) {
-  if (!element) {
-    return false;
-  }
-  const style = window.getComputedStyle(element);
-  return hasDuration(style.transitionDuration) || hasDuration(style.animationDuration);
-}
-function hasDuration(duration) {
-  return duration.split(",").map((part) => Number.parseFloat(part.trim())).some((part) => part > 0);
-}
-exports.hasAnimationDuration = hasAnimationDuration;

package/dist/utils/flexbox/flexbox.cjs

@@ -1,17 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const justifyContentMap = {
-  left: "flex-start",
-  right: "flex-end",
-  center: "center",
-  between: "space-between",
-  around: "space-around"
-};
-const alignItemsMap = {
-  left: "flex-start",
-  right: "flex-end",
-  center: "center",
-  stretch: "stretch"
-};
-exports.alignItemsMap = alignItemsMap;
-exports.justifyContentMap = justifyContentMap;

package/dist/utils/math/math.cjs

@@ -1,13 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-function roundToPrecision(value, precision) {
-  const factor = 10 ** precision;
-  return Math.round(value * factor) / factor;
-}
-function getBoundValue(newValue, min, max, step) {
-  let value = Math.round(newValue / step) * step;
-  value = Math.max(min, Math.min(max, value));
-  return value;
-}
-exports.getBoundValue = getBoundValue;
-exports.roundToPrecision = roundToPrecision;

package/dist/utils/react/mergeProps.cjs

@@ -1,47 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const classnames = require("../classnames/classnames.cjs");
-const refs = require("./refs.cjs");
-function mergeProps(slotProps, childProps) {
-  const overrideProps = {};
-  for (const propName in childProps) {
-    const slotPropValue = slotProps[propName];
-    const childPropValue = childProps[propName];
-    if (childPropValue === void 0) {
-      continue;
-    }
-    if (slotPropValue === void 0) {
-      overrideProps[propName] = childPropValue;
-      continue;
-    }
-    if (typeof slotPropValue === "function" && typeof childPropValue === "function") {
-      overrideProps[propName] = (...args) => {
-        childPropValue(...args);
-        slotPropValue(...args);
-      };
-    } else {
-      switch (propName) {
-        case "style": {
-          overrideProps[propName] = { ...slotPropValue, ...childPropValue };
-          break;
-        }
-        case "className": {
-          overrideProps[propName] = classnames.classnames(slotPropValue, childPropValue);
-          break;
-        }
-        case "ref": {
-          overrideProps[propName] = refs.composeRefs(
-            slotPropValue,
-            childPropValue
-          );
-          break;
-        }
-        default: {
-          overrideProps[propName] = childPropValue;
-        }
-      }
-    }
-  }
-  return { ...slotProps, ...overrideProps };
-}
-exports.mergeProps = mergeProps;

package/dist/utils/react/refs.cjs

@@ -1,17 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-function setRef(ref, value) {
-  if (typeof ref === "function") {
-    ref(value);
-  } else if (ref !== null && ref !== void 0) {
-    ref.current = value;
-  }
-}
-function composeRefs(...refs) {
-  return (node) => {
-    for (const ref of refs) {
-      setRef(ref, node);
-    }
-  };
-}
-exports.composeRefs = composeRefs;

package/dist/utils/typing/helpers.cjs

@@ -1,6 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-function isObjectLike(value) {
-  return typeof value === "object" && value !== null;
-}
-exports.isObjectLike = isObjectLike;