@blockle/blocks 0.11.0 → 0.11.1

package/dist/index.cjs

@@ -1,10 +1,12 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const css = require("@vanilla-extract/css");
-const styles_lib_css_atoms_sprinkles_css_cjs = require("./styles/lib/css/atoms/sprinkles.css.cjs");
+const styles_lib_css_atoms_breakpoints_cjs = require("./styles/lib/css/atoms/breakpoints.cjs");
+const styles_lib_css_style_style_cjs = require("./styles/lib/css/style/style.cjs");
+const styles_lib_theme_makeComponentTheme_cjs = require("./styles/lib/theme/makeComponentTheme.cjs");
 const styles_lib_theme_makeTheme_cjs = require("./styles/lib/theme/makeTheme.cjs");
 const styles_lib_theme_vars_css_cjs = require("./styles/lib/theme/vars.css.cjs");
 const styles_components_display_Divider_Divider_cjs = require("./styles/components/display/Divider/Divider.cjs");
+const styles_lib_css_atoms_sprinkles_css_cjs = require("./styles/lib/css/atoms/sprinkles.css.cjs");
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
 const styles_components_form_Button_Button_cjs = require("./styles/components/form/Button/Button.cjs");
@@ -18,40 +20,6 @@ const styles_components_other_BlocksProvider_BlocksProvider_cjs = require("./sty
 const styles_components_overlay_Dialog_Dialog_cjs = require("./styles/components/overlay/Dialog/Dialog.cjs");
 const styles_components_typography_Heading_Heading_cjs = require("./styles/components/typography/Heading/Heading.cjs");
 const styles_components_typography_Text_Text_cjs = require("./styles/components/typography/Text/Text.cjs");
-const breakpoints = {
-  mobile: 0,
-  tablet: 740,
-  desktop: 992,
-  wide: 1200
-};
-const breakpointQuery = (key) => `screen and (min-width: ${breakpoints[key]}px)`;
-function style(props) {
-  const styleRule = {};
-  const atomClassNames = [];
-  if (Array.isArray(props)) {
-    return props.map((rule) => {
-      if (typeof rule === "string") {
-        return rule;
-      }
-      return style(rule);
-    }).join(" ");
-  }
-  for (const [name, value] of Object.entries(props)) {
-    if (styles_lib_css_atoms_sprinkles_css_cjs.atoms.properties.has(name)) {
-      try {
-        atomClassNames.push(styles_lib_css_atoms_sprinkles_css_cjs.atoms({ [name]: value }));
-      } catch {
-        styleRule[name] = value;
-      }
-    } else {
-      styleRule[name] = value;
-    }
-  }
-  return css.style([styleRule, ...atomClassNames]);
-}
-function makeComponentTheme(component, componentTheme) {
-  return componentTheme;
-}
 const Progress = react.forwardRef(function Progress2({ value, max = 100, className, ...restProps }, ref) {
   const containerClassName = styles_components_display_Divider_Divider_cjs.useComponentStyles(
     "progress",
@@ -236,7 +204,7 @@ const Dropdown = ({
   onRequestClose,
   open,
   repositionOnScroll,
-  style: style2,
+  style,
   variant,
   ...restProps
 }) => {
@@ -316,7 +284,7 @@ const Dropdown = ({
       className: styles_components_display_Divider_Divider_cjs.classnames(containerClassName, className),
       position: "absolute",
       style: {
-        ...style2,
+        ...style,
         // TODO Think about how to handle this, perhaps we could add a custom class to the dropdown
         // Or we remove it from getDropdownPosition?
         // "horizontal" ? "vertical"
@@ -383,7 +351,9 @@ const Tooltip = ({ align = "top", children, label }) => {
     )
   ] });
 };
-exports.atoms = styles_lib_css_atoms_sprinkles_css_cjs.atoms;
+exports.breakpointQuery = styles_lib_css_atoms_breakpoints_cjs.breakpointQuery;
+exports.style = styles_lib_css_style_style_cjs.style;
+exports.makeComponentTheme = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme;
 exports.makeTheme = styles_lib_theme_makeTheme_cjs.makeTheme;
 exports.vars = styles_lib_theme_vars_css_cjs.vars;
 exports.Box = styles_components_display_Divider_Divider_cjs.Box;
@@ -393,6 +363,7 @@ exports.classnames = styles_components_display_Divider_Divider_cjs.classnames;
 exports.createSlottable = styles_components_display_Divider_Divider_cjs.createSlottable;
 exports.useComponentStyleDefaultProps = styles_components_display_Divider_Divider_cjs.useComponentStyleDefaultProps;
 exports.useComponentStyles = styles_components_display_Divider_Divider_cjs.useComponentStyles;
+exports.atoms = styles_lib_css_atoms_sprinkles_css_cjs.atoms;
 exports.Button = styles_components_form_Button_Button_cjs.Button;
 exports.Spinner = styles_components_form_Button_Button_cjs.Spinner;
 exports.Checkbox = styles_components_form_Checkbox_Checkbox_cjs.Checkbox;
@@ -416,6 +387,3 @@ exports.Link = Link;
 exports.Progress = Progress;
 exports.Stack = Stack;
 exports.Tooltip = Tooltip;
-exports.breakpointQuery = breakpointQuery;
-exports.makeComponentTheme = makeComponentTheme;
-exports.style = style;

package/dist/index.mjs

@@ -1,11 +1,13 @@
 'use client';
 
-import { style as style$1 } from "@vanilla-extract/css";
-import { atoms } from "./styles/lib/css/atoms/sprinkles.css.mjs";
+import { breakpointQuery } from "./styles/lib/css/atoms/breakpoints.mjs";
+import { style } from "./styles/lib/css/style/style.mjs";
+import { makeComponentTheme } from "./styles/lib/theme/makeComponentTheme.mjs";
 import { makeTheme } from "./styles/lib/theme/makeTheme.mjs";
 import { vars } from "./styles/lib/theme/vars.css.mjs";
 import { useComponentStyles, Box, classnames, createSlottable, composeRefs } from "./styles/components/display/Divider/Divider.mjs";
 import { Divider, Slot, useComponentStyleDefaultProps } from "./styles/components/display/Divider/Divider.mjs";
+import { atoms } from "./styles/lib/css/atoms/sprinkles.css.mjs";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { forwardRef, useEffect, useState, useRef, useLayoutEffect, useCallback, useId, Children, isValidElement, cloneElement } from "react";
 import { Button, Spinner } from "./styles/components/form/Button/Button.mjs";
@@ -20,40 +22,6 @@ import { useLayer, useVisibilityState, useIsomorphicLayoutEffect, hasAnimationDu
 import { Dialog, usePreventBodyScroll, useRootAriaHidden } from "./styles/components/overlay/Dialog/Dialog.mjs";
 import { Heading } from "./styles/components/typography/Heading/Heading.mjs";
 import { Text } from "./styles/components/typography/Text/Text.mjs";
-const breakpoints = {
-  mobile: 0,
-  tablet: 740,
-  desktop: 992,
-  wide: 1200
-};
-const breakpointQuery = (key) => `screen and (min-width: ${breakpoints[key]}px)`;
-function style(props) {
-  const styleRule = {};
-  const atomClassNames = [];
-  if (Array.isArray(props)) {
-    return props.map((rule) => {
-      if (typeof rule === "string") {
-        return rule;
-      }
-      return style(rule);
-    }).join(" ");
-  }
-  for (const [name, value] of Object.entries(props)) {
-    if (atoms.properties.has(name)) {
-      try {
-        atomClassNames.push(atoms({ [name]: value }));
-      } catch {
-        styleRule[name] = value;
-      }
-    } else {
-      styleRule[name] = value;
-    }
-  }
-  return style$1([styleRule, ...atomClassNames]);
-}
-function makeComponentTheme(component, componentTheme) {
-  return componentTheme;
-}
 const Progress = forwardRef(function Progress2({ value, max = 100, className, ...restProps }, ref) {
   const containerClassName = useComponentStyles(
     "progress",