@blockle/blocks 0.11.0 → 0.11.2

package/dist/styles/components/overlay/Dialog/dialog.css.cjs

@@ -1,8 +1,23 @@
 "use strict";
 const fileScope = require("@vanilla-extract/css/fileScope");
-require("../../../lib/css/layers/layers.css.ts.vanilla.cjs");
-require("./dialog.css.ts.vanilla.cjs");
+const css = require("@vanilla-extract/css");
+const styles_lib_css_layers_layers_css_cjs = require("../../../lib/css/layers/layers.css.cjs");
 fileScope.setFileScope("src/components/overlay/Dialog/dialog.css.ts", "@blockle/blocks");
-var backdrop = "_1j8hm8d0";
+const backdrop = css.style({
+  "@layer": {
+    [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {
+      contain: "layout",
+      display: "flex",
+      placeItems: "center",
+      position: "fixed",
+      inlineSize: "100%",
+      blockSize: "100%",
+      insetInlineStart: 0,
+      insetBlockStart: 0,
+      overflow: "hidden",
+      zIndex: 1e3
+    }
+  }
+}, "backdrop");
 fileScope.endFileScope();
 exports.backdrop = backdrop;

package/dist/styles/components/overlay/Dialog/dialog.css.mjs

@@ -1,8 +1,23 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import "../../../lib/css/layers/layers.css.ts.vanilla.mjs";
-import "./dialog.css.ts.vanilla.mjs";
+import { style } from "@vanilla-extract/css";
+import { blocksLayer } from "../../../lib/css/layers/layers.css.mjs";
 setFileScope("src/components/overlay/Dialog/dialog.css.ts", "@blockle/blocks");
-var backdrop = "_1j8hm8d0";
+const backdrop = style({
+  "@layer": {
+    [blocksLayer]: {
+      contain: "layout",
+      display: "flex",
+      placeItems: "center",
+      position: "fixed",
+      inlineSize: "100%",
+      blockSize: "100%",
+      insetInlineStart: 0,
+      insetBlockStart: 0,
+      overflow: "hidden",
+      zIndex: 1e3
+    }
+  }
+}, "backdrop");
 endFileScope();
 export {
   backdrop

package/dist/styles/components/typography/Heading/heading.css.cjs

@@ -1,8 +1,15 @@
 "use strict";
 const fileScope = require("@vanilla-extract/css/fileScope");
-require("../../../lib/css/layers/layers.css.ts.vanilla.cjs");
-require("./heading.css.ts.vanilla.cjs");
+const css = require("@vanilla-extract/css");
+const styles_lib_css_layers_layers_css_cjs = require("../../../lib/css/layers/layers.css.cjs");
 fileScope.setFileScope("src/components/typography/Heading/heading.css.ts", "@blockle/blocks");
-var heading = "_176zl350";
+const heading = css.style({
+  "@layer": {
+    [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {
+      margin: 0,
+      padding: 0
+    }
+  }
+}, "heading");
 fileScope.endFileScope();
 exports.heading = heading;

package/dist/styles/components/typography/Heading/heading.css.mjs

@@ -1,8 +1,15 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import "../../../lib/css/layers/layers.css.ts.vanilla.mjs";
-import "./heading.css.ts.vanilla.mjs";
+import { style } from "@vanilla-extract/css";
+import { blocksLayer } from "../../../lib/css/layers/layers.css.mjs";
 setFileScope("src/components/typography/Heading/heading.css.ts", "@blockle/blocks");
-var heading = "_176zl350";
+const heading = style({
+  "@layer": {
+    [blocksLayer]: {
+      margin: 0,
+      padding: 0
+    }
+  }
+}, "heading");
 endFileScope();
 export {
   heading

package/dist/styles/components/typography/Text/Text.cjs

@@ -1,9 +1,9 @@
 "use strict";
 const jsxRuntime = require("react/jsx-runtime");
-const react = require("react");
+const require$$0 = require("react");
 const styles_components_display_Divider_Divider_cjs = require("../../display/Divider/Divider.cjs");
 const styles_components_typography_Text_text_css_cjs = require("./text.css.cjs");
-const Text = react.forwardRef(function Text2({ tag: Tag = "span", asChild, children, className, ...restProps }, ref) {
+const Text = require$$0.forwardRef(function Text2({ tag: Tag = "span", asChild, children, className, ...restProps }, ref) {
   return /* @__PURE__ */ jsxRuntime.jsx(styles_components_display_Divider_Divider_cjs.Box, { ref, asChild: true, className: styles_components_display_Divider_Divider_cjs.classnames(styles_components_typography_Text_text_css_cjs.text, className), ...restProps, children: asChild ? children : /* @__PURE__ */ jsxRuntime.jsx(Tag, { children }) });
 });
 exports.Text = Text;

package/dist/styles/components/typography/Text/text.css.cjs

@@ -1,8 +1,15 @@
 "use strict";
 const fileScope = require("@vanilla-extract/css/fileScope");
-require("../../../lib/css/layers/layers.css.ts.vanilla.cjs");
-require("./text.css.ts.vanilla.cjs");
+const css = require("@vanilla-extract/css");
+const styles_lib_css_layers_layers_css_cjs = require("../../../lib/css/layers/layers.css.cjs");
 fileScope.setFileScope("src/components/typography/Text/text.css.ts", "@blockle/blocks");
-var text = "tiyd9n0";
+const text = css.style({
+  "@layer": {
+    [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {
+      margin: 0,
+      padding: 0
+    }
+  }
+}, "text");
 fileScope.endFileScope();
 exports.text = text;

package/dist/styles/components/typography/Text/text.css.mjs

@@ -1,8 +1,15 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import "../../../lib/css/layers/layers.css.ts.vanilla.mjs";
-import "./text.css.ts.vanilla.mjs";
+import { style } from "@vanilla-extract/css";
+import { blocksLayer } from "../../../lib/css/layers/layers.css.mjs";
 setFileScope("src/components/typography/Text/text.css.ts", "@blockle/blocks");
-var text = "tiyd9n0";
+const text = style({
+  "@layer": {
+    [blocksLayer]: {
+      margin: 0,
+      padding: 0
+    }
+  }
+}, "text");
 endFileScope();
 export {
   text

package/dist/styles/lib/css/atoms/atomicProperties.cjs

@@ -0,0 +1,83 @@
+"use strict";
+const styles_lib_theme_vars_css_cjs = require("../../theme/vars.css.cjs");
+const colorsWithCurrentColor = { ...styles_lib_theme_vars_css_cjs.vars.color, currentColor: "currentColor" };
+const size = { auto: "auto", full: "100%", "fit-content": "fit-content" };
+const unresponsiveProperties = {
+  backgroundColor: colorsWithCurrentColor,
+  borderColor: colorsWithCurrentColor,
+  borderRadius: styles_lib_theme_vars_css_cjs.vars.borderRadius,
+  borderWidth: styles_lib_theme_vars_css_cjs.vars.borderWidth,
+  border: ["none"],
+  insetBlock: [0],
+  insetBlockStart: [0],
+  insetBlockEnd: [0],
+  insetInline: [0],
+  insetInlineStart: [0],
+  insetInlineEnd: [0],
+  boxShadow: styles_lib_theme_vars_css_cjs.vars.shadow,
+  color: colorsWithCurrentColor,
+  cursor: ["auto", "pointer"],
+  fontFamily: styles_lib_theme_vars_css_cjs.vars.fontFamily,
+  fontStyle: ["normal", "italic", "oblique"],
+  fontWeight: styles_lib_theme_vars_css_cjs.vars.fontWeight,
+  lineHeight: styles_lib_theme_vars_css_cjs.vars.lineHeight,
+  blockSize: size,
+  maxBlockSize: size,
+  inlineSize: size,
+  maxInlineSize: size,
+  opacity: [0, 1],
+  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: styles_lib_theme_vars_css_cjs.vars.transition,
+  userSelect: ["none"],
+  whiteSpace: ["nowrap", "pre", "pre-line", "pre-wrap"],
+  wordBreak: ["break-word"],
+  wordWrap: ["break-word"]
+};
+const marginSpace = { auto: "auto", ...styles_lib_theme_vars_css_cjs.vars.space };
+const responsiveProperties = {
+  alignContent: ["stretch", "center", "flex-start", "flex-end"],
+  alignItems: ["stretch", "center", "flex-start", "flex-end"],
+  alignSelf: ["stretch", "center", "flex-start", "flex-end"],
+  columnGap: styles_lib_theme_vars_css_cjs.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: styles_lib_theme_vars_css_cjs.vars.fontSize,
+  gap: styles_lib_theme_vars_css_cjs.vars.space,
+  justifyContent: ["flex-start", "flex-end", "center", "space-between", "space-around"],
+  marginBlockStart: marginSpace,
+  marginBlockEnd: marginSpace,
+  marginInlineStart: marginSpace,
+  marginInlineEnd: marginSpace,
+  outline: ["none"],
+  padding: styles_lib_theme_vars_css_cjs.vars.space,
+  paddingBlock: styles_lib_theme_vars_css_cjs.vars.space,
+  paddingBlockStart: styles_lib_theme_vars_css_cjs.vars.space,
+  paddingBlockEnd: styles_lib_theme_vars_css_cjs.vars.space,
+  paddingInline: styles_lib_theme_vars_css_cjs.vars.space,
+  paddingInlineStart: styles_lib_theme_vars_css_cjs.vars.space,
+  paddingInlineEnd: styles_lib_theme_vars_css_cjs.vars.space,
+  position: ["relative", "fixed", "absolute", "sticky", "static"],
+  rowGap: styles_lib_theme_vars_css_cjs.vars.space,
+  textAlign: ["center", "left", "right", "justify"]
+};
+exports.responsiveProperties = responsiveProperties;
+exports.unresponsiveProperties = unresponsiveProperties;

package/dist/styles/lib/css/atoms/atomicProperties.mjs

@@ -0,0 +1,84 @@
+import { vars } from "../../theme/vars.css.mjs";
+const colorsWithCurrentColor = { ...vars.color, currentColor: "currentColor" };
+const size = { auto: "auto", full: "100%", "fit-content": "fit-content" };
+const unresponsiveProperties = {
+  backgroundColor: colorsWithCurrentColor,
+  borderColor: colorsWithCurrentColor,
+  borderRadius: vars.borderRadius,
+  borderWidth: vars.borderWidth,
+  border: ["none"],
+  insetBlock: [0],
+  insetBlockStart: [0],
+  insetBlockEnd: [0],
+  insetInline: [0],
+  insetInlineStart: [0],
+  insetInlineEnd: [0],
+  boxShadow: vars.shadow,
+  color: colorsWithCurrentColor,
+  cursor: ["auto", "pointer"],
+  fontFamily: vars.fontFamily,
+  fontStyle: ["normal", "italic", "oblique"],
+  fontWeight: vars.fontWeight,
+  lineHeight: vars.lineHeight,
+  blockSize: size,
+  maxBlockSize: size,
+  inlineSize: size,
+  maxInlineSize: size,
+  opacity: [0, 1],
+  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"]
+};
+const marginSpace = { auto: "auto", ...vars.space };
+const responsiveProperties = {
+  alignContent: ["stretch", "center", "flex-start", "flex-end"],
+  alignItems: ["stretch", "center", "flex-start", "flex-end"],
+  alignSelf: ["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"],
+  marginBlockStart: marginSpace,
+  marginBlockEnd: marginSpace,
+  marginInlineStart: marginSpace,
+  marginInlineEnd: marginSpace,
+  outline: ["none"],
+  padding: vars.space,
+  paddingBlock: vars.space,
+  paddingBlockStart: vars.space,
+  paddingBlockEnd: vars.space,
+  paddingInline: vars.space,
+  paddingInlineStart: vars.space,
+  paddingInlineEnd: vars.space,
+  position: ["relative", "fixed", "absolute", "sticky", "static"],
+  rowGap: vars.space,
+  textAlign: ["center", "left", "right", "justify"]
+};
+export {
+  responsiveProperties,
+  unresponsiveProperties
+};

package/dist/styles/lib/css/atoms/breakpoints.cjs

@@ -0,0 +1,11 @@
+"use strict";
+const breakpointNames = ["mobile", "tablet", "desktop", "wide"];
+const breakpoints = {
+  mobile: 0,
+  tablet: 740,
+  desktop: 992,
+  wide: 1200
+};
+const breakpointQuery = (key) => `screen and (min-width: ${breakpoints[key]}px)`;
+exports.breakpointNames = breakpointNames;
+exports.breakpointQuery = breakpointQuery;

package/dist/styles/lib/css/atoms/breakpoints.mjs

@@ -0,0 +1,12 @@
+const breakpointNames = ["mobile", "tablet", "desktop", "wide"];
+const breakpoints = {
+  mobile: 0,
+  tablet: 740,
+  desktop: 992,
+  wide: 1200
+};
+const breakpointQuery = (key) => `screen and (min-width: ${breakpoints[key]}px)`;
+export {
+  breakpointNames,
+  breakpointQuery
+};