@blockle/blocks 0.11.0 → 0.11.1

package/dist/reset.css.cjs

@@ -1,6 +1,4 @@
 "use strict";
 const fileScope = require("@vanilla-extract/css/fileScope");
-require("./styles/lib/css/reset/reset.css.ts.vanilla.cjs");
-require("./styles/entries/reset.css.ts.vanilla.cjs");
 fileScope.setFileScope("src/entries/reset.css.ts", "@blockle/blocks");
 fileScope.endFileScope();

package/dist/reset.css.mjs

@@ -1,5 +1,3 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import "./styles/lib/css/reset/reset.css.ts.vanilla.mjs";
-import "./styles/entries/reset.css.ts.vanilla.mjs";
 setFileScope("src/entries/reset.css.ts", "@blockle/blocks");
 endFileScope();

package/dist/styles/components/display/Divider/divider.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("./divider.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/display/Divider/divider.css.ts", "@blockle/blocks");
-var divider = "_8au4lu0";
+const divider = css.style({
+  "@layer": {
+    [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {
+      clear: "both",
+      blockSize: "1px"
+    }
+  }
+}, "divider");
 fileScope.endFileScope();
 exports.divider = divider;

package/dist/styles/components/display/Divider/divider.css.mjs

@@ -1,8 +1,15 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import "../../../lib/css/layers/layers.css.ts.vanilla.mjs";
-import "./divider.css.ts.vanilla.mjs";
+import { style } from "@vanilla-extract/css";
+import { blocksLayer } from "../../../lib/css/layers/layers.css.mjs";
 setFileScope("src/components/display/Divider/divider.css.ts", "@blockle/blocks");
-var divider = "_8au4lu0";
+const divider = style({
+  "@layer": {
+    [blocksLayer]: {
+      clear: "both",
+      blockSize: "1px"
+    }
+  }
+}, "divider");
 endFileScope();
 export {
   divider

package/dist/styles/components/form/Button/Button.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("./Button.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/form/Button/Button.css.ts", "@blockle/blocks");
-var buttonReset = "_97x9530";
+const buttonReset = css.style({
+  "@layer": {
+    [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {
+      all: "unset",
+      cursor: "pointer"
+    }
+  }
+}, "buttonReset");
 fileScope.endFileScope();
 exports.buttonReset = buttonReset;

package/dist/styles/components/form/Button/Button.css.mjs

@@ -1,8 +1,15 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import "../../../lib/css/layers/layers.css.ts.vanilla.mjs";
-import "./Button.css.ts.vanilla.mjs";
+import { style } from "@vanilla-extract/css";
+import { blocksLayer } from "../../../lib/css/layers/layers.css.mjs";
 setFileScope("src/components/form/Button/Button.css.ts", "@blockle/blocks");
-var buttonReset = "_97x9530";
+const buttonReset = style({
+  "@layer": {
+    [blocksLayer]: {
+      all: "unset",
+      cursor: "pointer"
+    }
+  }
+}, "buttonReset");
 endFileScope();
 export {
   buttonReset

package/dist/styles/components/form/Checkbox/checkbox.css.cjs

@@ -1,11 +1,30 @@
 "use strict";
 const fileScope = require("@vanilla-extract/css/fileScope");
-require("../../../lib/css/layers/layers.css.ts.vanilla.cjs");
-require("./checkbox.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/form/Checkbox/checkbox.css.ts", "@blockle/blocks");
-var container = "_1t2nsd0";
-var input = "_1t2nsd1";
-var icon = "_1t2nsd2";
+const container = css.style({
+  "@layer": {
+    [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {
+      position: "relative",
+      cursor: "pointer",
+      overflow: "hidden"
+    }
+  }
+}, "container");
+const input = css.style({
+  position: "absolute",
+  inset: 0,
+  opacity: 0,
+  "@layer": {
+    [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {
+      all: "unset"
+    }
+  }
+}, "input");
+const icon = css.style({
+  pointerEvents: "none"
+}, "icon");
 fileScope.endFileScope();
 exports.container = container;
 exports.icon = icon;

package/dist/styles/components/form/Checkbox/checkbox.css.mjs

@@ -1,10 +1,29 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import "../../../lib/css/layers/layers.css.ts.vanilla.mjs";
-import "./checkbox.css.ts.vanilla.mjs";
+import { style } from "@vanilla-extract/css";
+import { blocksLayer } from "../../../lib/css/layers/layers.css.mjs";
 setFileScope("src/components/form/Checkbox/checkbox.css.ts", "@blockle/blocks");
-var container = "_1t2nsd0";
-var input = "_1t2nsd1";
-var icon = "_1t2nsd2";
+const container = style({
+  "@layer": {
+    [blocksLayer]: {
+      position: "relative",
+      cursor: "pointer",
+      overflow: "hidden"
+    }
+  }
+}, "container");
+const input = style({
+  position: "absolute",
+  inset: 0,
+  opacity: 0,
+  "@layer": {
+    [blocksLayer]: {
+      all: "unset"
+    }
+  }
+}, "input");
+const icon = style({
+  pointerEvents: "none"
+}, "icon");
 endFileScope();
 export {
   container,

package/dist/styles/components/form/Input/input.css.cjs

@@ -1,8 +1,19 @@
 "use strict";
 const fileScope = require("@vanilla-extract/css/fileScope");
-require("../../../lib/css/layers/layers.css.ts.vanilla.cjs");
-require("./input.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/form/Input/input.css.ts", "@blockle/blocks");
-var input = "hjmnu0";
+const input = css.style({
+  "@layer": {
+    [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {
+      appearance: "none",
+      selectors: {
+        "&:-webkit-autofill": {
+          transitionDelay: "9999s"
+        }
+      }
+    }
+  }
+}, "input");
 fileScope.endFileScope();
 exports.input = input;

package/dist/styles/components/form/Input/input.css.mjs

@@ -1,8 +1,19 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import "../../../lib/css/layers/layers.css.ts.vanilla.mjs";
-import "./input.css.ts.vanilla.mjs";
+import { style } from "@vanilla-extract/css";
+import { blocksLayer } from "../../../lib/css/layers/layers.css.mjs";
 setFileScope("src/components/form/Input/input.css.ts", "@blockle/blocks");
-var input = "hjmnu0";
+const input = style({
+  "@layer": {
+    [blocksLayer]: {
+      appearance: "none",
+      selectors: {
+        "&:-webkit-autofill": {
+          transitionDelay: "9999s"
+        }
+      }
+    }
+  }
+}, "input");
 endFileScope();
 export {
   input

package/dist/styles/components/form/Radio/radio.css.cjs

@@ -1,11 +1,30 @@
 "use strict";
 const fileScope = require("@vanilla-extract/css/fileScope");
-require("../../../lib/css/layers/layers.css.ts.vanilla.cjs");
-require("./radio.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/form/Radio/radio.css.ts", "@blockle/blocks");
-var container = "dh2y4e0";
-var input = "dh2y4e1";
-var icon = "dh2y4e2";
+const container = css.style({
+  "@layer": {
+    [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {
+      position: "relative",
+      cursor: "pointer",
+      overflow: "hidden"
+    }
+  }
+}, "container");
+const input = css.style({
+  position: "absolute",
+  inset: 0,
+  opacity: 0,
+  "@layer": {
+    [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {
+      all: "unset"
+    }
+  }
+}, "input");
+const icon = css.style({
+  pointerEvents: "none"
+}, "icon");
 fileScope.endFileScope();
 exports.container = container;
 exports.icon = icon;

package/dist/styles/components/form/Radio/radio.css.mjs

@@ -1,10 +1,29 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import "../../../lib/css/layers/layers.css.ts.vanilla.mjs";
-import "./radio.css.ts.vanilla.mjs";
+import { style } from "@vanilla-extract/css";
+import { blocksLayer } from "../../../lib/css/layers/layers.css.mjs";
 setFileScope("src/components/form/Radio/radio.css.ts", "@blockle/blocks");
-var container = "dh2y4e0";
-var input = "dh2y4e1";
-var icon = "dh2y4e2";
+const container = style({
+  "@layer": {
+    [blocksLayer]: {
+      position: "relative",
+      cursor: "pointer",
+      overflow: "hidden"
+    }
+  }
+}, "container");
+const input = style({
+  position: "absolute",
+  inset: 0,
+  opacity: 0,
+  "@layer": {
+    [blocksLayer]: {
+      all: "unset"
+    }
+  }
+}, "input");
+const icon = style({
+  pointerEvents: "none"
+}, "icon");
 endFileScope();
 export {
   container,

package/dist/styles/components/form/Select/select.css.cjs

@@ -1,11 +1,36 @@
 "use strict";
 const fileScope = require("@vanilla-extract/css/fileScope");
-require("../../../lib/css/layers/layers.css.ts.vanilla.cjs");
-require("./select.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/form/Select/select.css.ts", "@blockle/blocks");
-var wrapper = "_1tosed90";
-var select = "_1tosed91";
-var icon = "_1tosed92";
+const wrapper = css.style({
+  "@layer": {
+    [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {
+      position: "relative"
+    }
+  }
+}, "wrapper");
+const select = css.style({
+  "@layer": {
+    [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {
+      appearance: "none",
+      inlineSize: "100%"
+    }
+  }
+}, "select");
+const icon = css.style({
+  "@layer": {
+    [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {
+      position: "absolute",
+      right: 0,
+      top: 0,
+      bottom: 0,
+      pointerEvents: "none",
+      display: "flex",
+      alignItems: "center"
+    }
+  }
+}, "icon");
 fileScope.endFileScope();
 exports.icon = icon;
 exports.select = select;

package/dist/styles/components/form/Select/select.css.mjs

@@ -1,10 +1,35 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import "../../../lib/css/layers/layers.css.ts.vanilla.mjs";
-import "./select.css.ts.vanilla.mjs";
+import { style } from "@vanilla-extract/css";
+import { blocksLayer } from "../../../lib/css/layers/layers.css.mjs";
 setFileScope("src/components/form/Select/select.css.ts", "@blockle/blocks");
-var wrapper = "_1tosed90";
-var select = "_1tosed91";
-var icon = "_1tosed92";
+const wrapper = style({
+  "@layer": {
+    [blocksLayer]: {
+      position: "relative"
+    }
+  }
+}, "wrapper");
+const select = style({
+  "@layer": {
+    [blocksLayer]: {
+      appearance: "none",
+      inlineSize: "100%"
+    }
+  }
+}, "select");
+const icon = style({
+  "@layer": {
+    [blocksLayer]: {
+      position: "absolute",
+      right: 0,
+      top: 0,
+      bottom: 0,
+      pointerEvents: "none",
+      display: "flex",
+      alignItems: "center"
+    }
+  }
+}, "icon");
 endFileScope();
 export {
   icon,

package/dist/styles/components/form/Slider/slider.css.cjs

@@ -1,13 +1,70 @@
 "use strict";
 const fileScope = require("@vanilla-extract/css/fileScope");
-require("../../../lib/css/layers/layers.css.ts.vanilla.cjs");
-require("./slider.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/form/Slider/slider.css.ts", "@blockle/blocks");
-var container = "_11vw2ud0";
-var containerVertical = "_11vw2ud1";
-var track = "_11vw2ud2";
-var filledTrack = "_11vw2ud3";
-var thumb = "_11vw2ud4";
+const container = css.style({
+  "@layer": {
+    [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {
+      position: "relative",
+      writingMode: "horizontal-tb"
+    }
+  }
+}, "container");
+const containerVertical = css.style({
+  "@layer": {
+    [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {
+      writingMode: "vertical-lr"
+    }
+  }
+}, "containerVertical");
+const track = css.style({
+  "@layer": {
+    [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {
+      cursor: "pointer",
+      position: "absolute",
+      inlineSize: "100%",
+      insetBlockStart: "50%",
+      transform: "translateY(-50%)",
+      selectors: {
+        [`${containerVertical} &`]: {
+          transform: "translateX(-50%)"
+        }
+      }
+    }
+  }
+}, "track");
+const filledTrack = css.style({
+  "@layer": {
+    [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {
+      position: "absolute",
+      blockSize: "100%",
+      borderRadius: "inherit",
+      selectors: {
+        [`${containerVertical} &`]: {
+          insetInlineEnd: "0%"
+        }
+      }
+    }
+  }
+}, "filledTrack");
+const thumb = css.style({
+  "@layer": {
+    [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {
+      cursor: "pointer",
+      position: "absolute",
+      blockSize: "100%",
+      insetBlockStart: "50%",
+      transform: "translate(-50%, -50%)",
+      touchAction: "none",
+      selectors: {
+        [`${containerVertical} &`]: {
+          transform: "translate(-50%, 50%)"
+        }
+      }
+    }
+  }
+}, "thumb");
 fileScope.endFileScope();
 exports.container = container;
 exports.containerVertical = containerVertical;

package/dist/styles/components/form/Slider/slider.css.mjs

@@ -1,12 +1,69 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import "../../../lib/css/layers/layers.css.ts.vanilla.mjs";
-import "./slider.css.ts.vanilla.mjs";
+import { style } from "@vanilla-extract/css";
+import { blocksLayer } from "../../../lib/css/layers/layers.css.mjs";
 setFileScope("src/components/form/Slider/slider.css.ts", "@blockle/blocks");
-var container = "_11vw2ud0";
-var containerVertical = "_11vw2ud1";
-var track = "_11vw2ud2";
-var filledTrack = "_11vw2ud3";
-var thumb = "_11vw2ud4";
+const container = style({
+  "@layer": {
+    [blocksLayer]: {
+      position: "relative",
+      writingMode: "horizontal-tb"
+    }
+  }
+}, "container");
+const containerVertical = style({
+  "@layer": {
+    [blocksLayer]: {
+      writingMode: "vertical-lr"
+    }
+  }
+}, "containerVertical");
+const track = style({
+  "@layer": {
+    [blocksLayer]: {
+      cursor: "pointer",
+      position: "absolute",
+      inlineSize: "100%",
+      insetBlockStart: "50%",
+      transform: "translateY(-50%)",
+      selectors: {
+        [`${containerVertical} &`]: {
+          transform: "translateX(-50%)"
+        }
+      }
+    }
+  }
+}, "track");
+const filledTrack = style({
+  "@layer": {
+    [blocksLayer]: {
+      position: "absolute",
+      blockSize: "100%",
+      borderRadius: "inherit",
+      selectors: {
+        [`${containerVertical} &`]: {
+          insetInlineEnd: "0%"
+        }
+      }
+    }
+  }
+}, "filledTrack");
+const thumb = style({
+  "@layer": {
+    [blocksLayer]: {
+      cursor: "pointer",
+      position: "absolute",
+      blockSize: "100%",
+      insetBlockStart: "50%",
+      transform: "translate(-50%, -50%)",
+      touchAction: "none",
+      selectors: {
+        [`${containerVertical} &`]: {
+          transform: "translate(-50%, 50%)"
+        }
+      }
+    }
+  }
+}, "thumb");
 endFileScope();
 export {
   container,

package/dist/styles/components/form/Switch/switch.css.cjs

@@ -1,10 +1,26 @@
 "use strict";
 const fileScope = require("@vanilla-extract/css/fileScope");
-require("../../../lib/css/layers/layers.css.ts.vanilla.cjs");
-require("./switch.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/form/Switch/switch.css.ts", "@blockle/blocks");
-var container = "tbb26a0";
-var input = "tbb26a1";
+const container = css.style({
+  "@layer": {
+    [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {
+      cursor: "pointer",
+      userSelect: "none",
+      position: "relative"
+    }
+  }
+}, "container");
+const input = css.style({
+  "@layer": {
+    [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {
+      opacity: 0,
+      maxBlockSize: 0,
+      maxInlineSize: 0
+    }
+  }
+}, "input");
 fileScope.endFileScope();
 exports.container = container;
 exports.input = input;

package/dist/styles/components/form/Switch/switch.css.mjs

@@ -1,9 +1,25 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import "../../../lib/css/layers/layers.css.ts.vanilla.mjs";
-import "./switch.css.ts.vanilla.mjs";
+import { style } from "@vanilla-extract/css";
+import { blocksLayer } from "../../../lib/css/layers/layers.css.mjs";
 setFileScope("src/components/form/Switch/switch.css.ts", "@blockle/blocks");
-var container = "tbb26a0";
-var input = "tbb26a1";
+const container = style({
+  "@layer": {
+    [blocksLayer]: {
+      cursor: "pointer",
+      userSelect: "none",
+      position: "relative"
+    }
+  }
+}, "container");
+const input = style({
+  "@layer": {
+    [blocksLayer]: {
+      opacity: 0,
+      maxBlockSize: 0,
+      maxInlineSize: 0
+    }
+  }
+}, "input");
 endFileScope();
 export {
   container,

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;