@blockle/blocks 0.8.10 → 0.9.1

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

@@ -5,11 +5,11 @@ import { getAtomsAndProps } from "../../../lib/utils/atom-props.mjs";
 import { atoms } from "../../../lib/css/atoms/sprinkles.css.mjs";
 const BlocksProviderContext = createContext(null);
 const useTheme = () => {
-  const theme = useContext(BlocksProviderContext);
-  if (!theme) {
+  const context = useContext(BlocksProviderContext);
+  if (!context) {
     throw new Error("useTheme must be used within a BlocksProvider");
   }
-  return theme;
+  return context.theme;
 };
 function useComponentStyles(name, props, useDefaultVariants = true) {
   const { components } = useTheme();

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

@@ -7,7 +7,7 @@ const divider = css.style({
   "@layer": {
     [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {
       clear: "both",
-      height: "1px"
+      blockSize: "1px"
     }
   }
 }, "divider");

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

@@ -6,7 +6,7 @@ const divider = style({
   "@layer": {
     [blocksLayer]: {
       clear: "both",
-      height: "1px"
+      blockSize: "1px"
     }
   }
 }, "divider");

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

@@ -33,7 +33,7 @@ const Checkbox = react.forwardRef(function Checkbox2({ name, label, required, cl
   const labelClassName = styles_components_display_Divider_Divider_cjs.useComponentStyles("checkbox", { label: true }, false);
   const input = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles_components_display_Divider_Divider_cjs.classnames(styles_components_form_Checkbox_checkbox_css_cjs.container, containerClassName, className), children: [
     /* @__PURE__ */ jsxRuntime.jsx("input", { ref, type: "checkbox", name, className: styles_components_form_Checkbox_checkbox_css_cjs.input, ...restProps }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles_components_display_Divider_Divider_cjs.classnames(styles_components_form_Checkbox_checkbox_css_cjs.icon, iconClassName) })
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles_components_display_Divider_Divider_cjs.classnames(styles_components_form_Checkbox_checkbox_css_cjs.icon, iconClassName), role: "presentation", "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx(DefaultIcon, {}) })
   ] });
   if (!label) {
     return input;
@@ -43,5 +43,21 @@ const Checkbox = react.forwardRef(function Checkbox2({ name, label, required, cl
     label && /* @__PURE__ */ jsxRuntime.jsx(Label, { asSpan: true, required, children: label })
   ] });
 });
+const DefaultIcon = () => {
+  return (
+    // TOOD - replace with actual icon component renderer
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "svg",
+      {
+        viewBox: "0 0 24 24",
+        fill: "none",
+        strokeWidth: "1.5",
+        stroke: "currentColor",
+        style: { width: "1rem", height: "1rem", display: "block" },
+        children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "m4.5 12.75 6 6 9-13.5" })
+      }
+    )
+  );
+};
 exports.Checkbox = Checkbox;
 exports.Label = Label;

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

@@ -32,7 +32,7 @@ const Checkbox = forwardRef(function Checkbox2({ name, label, required, classNam
   const labelClassName = useComponentStyles("checkbox", { label: true }, false);
   const input$1 = /* @__PURE__ */ jsxs("div", { className: classnames(container, containerClassName, className), children: [
     /* @__PURE__ */ jsx("input", { ref, type: "checkbox", name, className: input, ...restProps }),
-    /* @__PURE__ */ jsx("div", { className: classnames(icon, iconClassName) })
+    /* @__PURE__ */ jsx("div", { className: classnames(icon, iconClassName), role: "presentation", "aria-hidden": true, children: /* @__PURE__ */ jsx(DefaultIcon, {}) })
   ] });
   if (!label) {
     return input$1;
@@ -42,6 +42,22 @@ const Checkbox = forwardRef(function Checkbox2({ name, label, required, classNam
     label && /* @__PURE__ */ jsx(Label, { asSpan: true, required, children: label })
   ] });
 });
+const DefaultIcon = () => {
+  return (
+    // TOOD - replace with actual icon component renderer
+    /* @__PURE__ */ jsx(
+      "svg",
+      {
+        viewBox: "0 0 24 24",
+        fill: "none",
+        strokeWidth: "1.5",
+        stroke: "currentColor",
+        style: { width: "1rem", height: "1rem", display: "block" },
+        children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "m4.5 12.75 6 6 9-13.5" })
+      }
+    )
+  );
+};
 export {
   Checkbox,
   Label

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

@@ -0,0 +1,40 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const styles_components_display_Divider_Divider_cjs = require("../../display/Divider/Divider.cjs");
+const styles_components_form_Select_select_css_cjs = require("./select.css.cjs");
+const Select = react.forwardRef(function Select2({ children, placeholder, className, ...restProps }, ref) {
+  const wrapperClassName = styles_components_display_Divider_Divider_cjs.useComponentStyles("select", { wrapper: true }, false);
+  const selectClassName = styles_components_display_Divider_Divider_cjs.useComponentStyles("select", { select: true });
+  const iconClassName = styles_components_display_Divider_Divider_cjs.useComponentStyles("select", { icon: true }, false);
+  return /* @__PURE__ */ jsxRuntime.jsxs(styles_components_display_Divider_Divider_cjs.Box, { className: styles_components_display_Divider_Divider_cjs.classnames(styles_components_form_Select_select_css_cjs.wrapper, wrapperClassName), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "select",
+      {
+        ref,
+        className: styles_components_display_Divider_Divider_cjs.classnames(styles_components_form_Select_select_css_cjs.select, selectClassName, className),
+        ...restProps,
+        children: [
+          placeholder && /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", children: placeholder }),
+          children
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(styles_components_display_Divider_Divider_cjs.Box, { className: styles_components_display_Divider_Divider_cjs.classnames(styles_components_form_Select_select_css_cjs.icon, iconClassName), role: "presentation", "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx(DefaultIcon, {}) })
+  ] });
+});
+const DefaultIcon = () => {
+  return (
+    // TOOD - replace with actual icon component renderer
+    /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", style: { width: "1rem", height: "1rem" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        fill: "currentColor",
+        fillRule: "evenodd",
+        d: "m11.625 14.3666 7.9365-7.653c.5241-.5055 1.3133-.4372 1.7625.1525.4493.5897.3886 1.4774-.1355 1.9829l-8.75 8.4375c-.4681.4513-1.1589.4513-1.627 0l-8.75-8.4375c-.5241-.5055-.5848-1.3932-.1356-1.9829.4493-.5897 1.2385-.658 1.7626-.1525l7.9365 7.653Z",
+        clipRule: "evenodd"
+      }
+    ) })
+  );
+};
+exports.Select = Select;

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

@@ -0,0 +1,41 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useComponentStyles, Box, classnames } from "../../display/Divider/Divider.mjs";
+import { wrapper, select, icon } from "./select.css.mjs";
+const Select = forwardRef(function Select2({ children, placeholder, className, ...restProps }, ref) {
+  const wrapperClassName = useComponentStyles("select", { wrapper: true }, false);
+  const selectClassName = useComponentStyles("select", { select: true });
+  const iconClassName = useComponentStyles("select", { icon: true }, false);
+  return /* @__PURE__ */ jsxs(Box, { className: classnames(wrapper, wrapperClassName), children: [
+    /* @__PURE__ */ jsxs(
+      "select",
+      {
+        ref,
+        className: classnames(select, selectClassName, className),
+        ...restProps,
+        children: [
+          placeholder && /* @__PURE__ */ jsx("option", { value: "", children: placeholder }),
+          children
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(Box, { className: classnames(icon, iconClassName), role: "presentation", "aria-hidden": true, children: /* @__PURE__ */ jsx(DefaultIcon, {}) })
+  ] });
+});
+const DefaultIcon = () => {
+  return (
+    // TOOD - replace with actual icon component renderer
+    /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", style: { width: "1rem", height: "1rem" }, children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        fill: "currentColor",
+        fillRule: "evenodd",
+        d: "m11.625 14.3666 7.9365-7.653c.5241-.5055 1.3133-.4372 1.7625.1525.4493.5897.3886 1.4774-.1355 1.9829l-8.75 8.4375c-.4681.4513-1.1589.4513-1.627 0l-8.75-8.4375c-.5241-.5055-.5848-1.3932-.1356-1.9829.4493-.5897 1.2385-.658 1.7626-.1525l7.9365 7.653Z",
+        clipRule: "evenodd"
+      }
+    ) })
+  );
+};
+export {
+  Select
+};

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

@@ -0,0 +1,37 @@
+"use strict";
+const fileScope = require("@vanilla-extract/css/fileScope");
+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", "blocks");
+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;
+exports.wrapper = wrapper;

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

@@ -0,0 +1,38 @@
+import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
+import { style } from "@vanilla-extract/css";
+import { blocksLayer } from "../../../lib/css/layers/layers.css.mjs";
+setFileScope("src/components/form/Select/select.css.ts", "blocks");
+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,
+  select,
+  wrapper
+};

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

@@ -16,8 +16,8 @@ const input = css.style({
   "@layer": {
     [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {
       opacity: 0,
-      maxHeight: 0,
-      maxWidth: 0
+      maxBlockSize: 0,
+      maxInlineSize: 0
     }
   }
 }, "input");

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

@@ -15,8 +15,8 @@ const input = style({
   "@layer": {
     [blocksLayer]: {
       opacity: 0,
-      maxHeight: 0,
-      maxWidth: 0
+      maxBlockSize: 0,
+      maxInlineSize: 0
     }
   }
 }, "input");

package/dist/styles/components/other/BlocksProvider/BlocksProvider.cjs

@@ -1,5 +1,6 @@
 "use strict";
 const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
 const styles_lib_css_atoms_sprinkles_css_cjs = require("../../../lib/css/atoms/sprinkles.css.cjs");
 const styles_components_display_Divider_Divider_cjs = require("../../display/Divider/Divider.cjs");
 const BlocksProvider = ({
@@ -8,10 +9,29 @@ const BlocksProvider = ({
   className,
   ...restProps
 }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(styles_components_display_Divider_Divider_cjs.BlocksProviderContext.Provider, { value: theme, children: /* @__PURE__ */ jsxRuntime.jsx(
+  const ref = react.useRef(null);
+  const [ariaHidden, setAriaHidden] = react.useState(false);
+  const contextValue = react.useMemo(
+    () => ({
+      theme,
+      setAriaHidden
+    }),
+    [theme, setAriaHidden]
+  );
+  react.useEffect(() => {
+    var _a, _b;
+    if (ariaHidden) {
+      (_a = ref.current) == null ? void 0 : _a.setAttribute("inert", "");
+    } else {
+      (_b = ref.current) == null ? void 0 : _b.removeAttribute("inert");
+    }
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(styles_components_display_Divider_Divider_cjs.BlocksProviderContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
+      ref,
       className: styles_components_display_Divider_Divider_cjs.classnames(theme.vars, styles_lib_css_atoms_sprinkles_css_cjs.atoms({ fontFamily: "primary" }), className),
+      "aria-hidden": ariaHidden,
       ...restProps,
       children
     }

package/dist/styles/components/other/BlocksProvider/BlocksProvider.mjs

@@ -1,4 +1,5 @@
 import { jsx } from "react/jsx-runtime";
+import { useRef, useState, useMemo, useEffect } from "react";
 import { atoms } from "../../../lib/css/atoms/sprinkles.css.mjs";
 import { BlocksProviderContext, classnames } from "../../display/Divider/Divider.mjs";
 const BlocksProvider = ({
@@ -7,10 +8,29 @@ const BlocksProvider = ({
   className,
   ...restProps
 }) => {
-  return /* @__PURE__ */ jsx(BlocksProviderContext.Provider, { value: theme, children: /* @__PURE__ */ jsx(
+  const ref = useRef(null);
+  const [ariaHidden, setAriaHidden] = useState(false);
+  const contextValue = useMemo(
+    () => ({
+      theme,
+      setAriaHidden
+    }),
+    [theme, setAriaHidden]
+  );
+  useEffect(() => {
+    var _a, _b;
+    if (ariaHidden) {
+      (_a = ref.current) == null ? void 0 : _a.setAttribute("inert", "");
+    } else {
+      (_b = ref.current) == null ? void 0 : _b.removeAttribute("inert");
+    }
+  });
+  return /* @__PURE__ */ jsx(BlocksProviderContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
     "div",
     {
+      ref,
       className: classnames(theme.vars, atoms({ fontFamily: "primary" }), className),
+      "aria-hidden": ariaHidden,
       ...restProps,
       children
     }

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

@@ -118,6 +118,13 @@ const useRestoreFocus = (active) => {
     }
   }, [active]);
 };
+const useRootAriaHidden = (hidden) => {
+  const context = react.useContext(styles_components_display_Divider_Divider_cjs.BlocksProviderContext);
+  if (!context) {
+    throw new Error("useRootAriaHidden must be used within a BlocksProvider");
+  }
+  context.setAriaHidden(hidden);
+};
 const useVisibilityState = (open) => {
   const [visible, setVisible] = react.useState(open);
   const hide = react.useCallback(() => {
@@ -179,6 +186,7 @@ const Dialog = ({
   const isNested = useNestedDialog(visible);
   usePreventBodyScroll(visible && !isNested);
   useKeyboard("Escape", onRequestClose, { enabled: open && enabled });
+  useRootAriaHidden(visible);
   useIsomorphicLayoutEffect(() => {
     var _a, _b;
     if (!open) {
@@ -243,3 +251,4 @@ exports.Portal = Portal;
 exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect;
 exports.useKeyboard = useKeyboard;
 exports.usePreventBodyScroll = usePreventBodyScroll;
+exports.useRootAriaHidden = useRootAriaHidden;

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

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
-import { useEffect, useLayoutEffect, useRef, useState, useCallback, createContext, useContext } from "react";
-import { useTheme, useComponentStyles, Box, classnames } from "../../display/Divider/Divider.mjs";
+import { useEffect, useLayoutEffect, useRef, useContext, useState, useCallback, createContext } from "react";
+import { useTheme, BlocksProviderContext, useComponentStyles, Box, classnames } from "../../display/Divider/Divider.mjs";
 import { backdrop } from "./dialog.css.mjs";
 import { createPortal } from "react-dom";
 import { BlocksProvider } from "../../other/BlocksProvider/BlocksProvider.mjs";
@@ -117,6 +117,13 @@ const useRestoreFocus = (active) => {
     }
   }, [active]);
 };
+const useRootAriaHidden = (hidden) => {
+  const context = useContext(BlocksProviderContext);
+  if (!context) {
+    throw new Error("useRootAriaHidden must be used within a BlocksProvider");
+  }
+  context.setAriaHidden(hidden);
+};
 const useVisibilityState = (open) => {
   const [visible, setVisible] = useState(open);
   const hide = useCallback(() => {
@@ -178,6 +185,7 @@ const Dialog = ({
   const isNested = useNestedDialog(visible);
   usePreventBodyScroll(visible && !isNested);
   useKeyboard("Escape", onRequestClose, { enabled: open && enabled });
+  useRootAriaHidden(visible);
   useIsomorphicLayoutEffect(() => {
     var _a, _b;
     if (!open) {
@@ -242,5 +250,6 @@ export {
   Portal,
   useIsomorphicLayoutEffect,
   useKeyboard,
-  usePreventBodyScroll
+  usePreventBodyScroll,
+  useRootAriaHidden
 };

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

@@ -10,10 +10,10 @@ const backdrop = css.style({
       display: "flex",
       placeItems: "center",
       position: "fixed",
-      width: "100%",
-      height: "100%",
-      left: 0,
-      top: 0,
+      inlineSize: "100%",
+      blockSize: "100%",
+      insetInlineStart: 0,
+      insetBlockStart: 0,
       overflow: "hidden",
       zIndex: 1e3
     }

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

@@ -9,10 +9,10 @@ const backdrop = style({
       display: "flex",
       placeItems: "center",
       position: "fixed",
-      width: "100%",
-      height: "100%",
-      left: 0,
-      top: 0,
+      inlineSize: "100%",
+      blockSize: "100%",
+      insetInlineStart: 0,
+      insetBlockStart: 0,
       overflow: "hidden",
       zIndex: 1e3
     }

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

@@ -1,38 +1,41 @@
 "use strict";
 const styles_lib_theme_vars_css_cjs = require("../../theme/vars.css.cjs");
-const colorWithCurrentColor = { ...styles_lib_theme_vars_css_cjs.vars.color, currentColor: "currentColor" };
+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: colorWithCurrentColor,
-  borderColor: colorWithCurrentColor,
+  backgroundColor: colorsWithCurrentColor,
+  borderColor: colorsWithCurrentColor,
   borderRadius: styles_lib_theme_vars_css_cjs.vars.borderRadius,
   borderWidth: styles_lib_theme_vars_css_cjs.vars.borderWidth,
   border: ["none"],
-  bottom: [0],
+  insetBlock: [0],
+  insetBlockStart: [0],
+  insetBlockEnd: [0],
+  insetInline: [0],
+  insetInlineStart: [0],
+  insetInlineEnd: [0],
   boxShadow: styles_lib_theme_vars_css_cjs.vars.shadow,
-  color: colorWithCurrentColor,
+  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,
-  height: { auto: "auto", full: "100%" },
-  left: [0],
   lineHeight: styles_lib_theme_vars_css_cjs.vars.lineHeight,
-  maxHeight: { full: "100%" },
-  maxWidth: { full: "100%" },
+  blockSize: size,
+  maxBlockSize: size,
+  inlineSize: size,
+  maxInlineSize: size,
   opacity: [0, 1],
   overflow: ["hidden", "scroll", "visible", "auto"],
-  overflowX: ["hidden", "scroll", "visible", "auto"],
-  overflowY: ["hidden", "scroll", "visible", "auto"],
+  overflowBlock: ["hidden", "scroll", "visible", "auto"],
+  overflowInline: ["hidden", "scroll", "visible", "auto"],
   pointerEvents: ["none"],
-  right: [0],
   textDecoration: ["overline", "line-through", "underline", "none"],
   textTransform: ["lowercase", "uppercase", "capitalize"],
   textWrap: ["balance", "wrap"],
-  top: [0],
   transition: styles_lib_theme_vars_css_cjs.vars.transition,
   userSelect: ["none"],
   whiteSpace: ["nowrap", "pre", "pre-line", "pre-wrap"],
-  width: { auto: "auto", full: "100%", "fit-content": "fit-content" },
   wordBreak: ["break-word"],
   wordWrap: ["break-word"]
 };
@@ -60,15 +63,18 @@ const responsiveProperties = {
   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"],
-  marginBottom: marginSpace,
-  marginLeft: marginSpace,
-  marginRight: marginSpace,
-  marginTop: marginSpace,
+  marginBlockStart: marginSpace,
+  marginBlockEnd: marginSpace,
+  marginInlineStart: marginSpace,
+  marginInlineEnd: marginSpace,
   outline: ["none"],
-  paddingBottom: styles_lib_theme_vars_css_cjs.vars.space,
-  paddingLeft: styles_lib_theme_vars_css_cjs.vars.space,
-  paddingRight: styles_lib_theme_vars_css_cjs.vars.space,
-  paddingTop: styles_lib_theme_vars_css_cjs.vars.space,
+  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"]

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

@@ -1,37 +1,40 @@
 import { vars } from "../../theme/vars.css.mjs";
-const colorWithCurrentColor = { ...vars.color, currentColor: "currentColor" };
+const colorsWithCurrentColor = { ...vars.color, currentColor: "currentColor" };
+const size = { auto: "auto", full: "100%", "fit-content": "fit-content" };
 const unresponsiveProperties = {
-  backgroundColor: colorWithCurrentColor,
-  borderColor: colorWithCurrentColor,
+  backgroundColor: colorsWithCurrentColor,
+  borderColor: colorsWithCurrentColor,
   borderRadius: vars.borderRadius,
   borderWidth: vars.borderWidth,
   border: ["none"],
-  bottom: [0],
+  insetBlock: [0],
+  insetBlockStart: [0],
+  insetBlockEnd: [0],
+  insetInline: [0],
+  insetInlineStart: [0],
+  insetInlineEnd: [0],
   boxShadow: vars.shadow,
-  color: colorWithCurrentColor,
+  color: colorsWithCurrentColor,
   cursor: ["auto", "pointer"],
   fontFamily: vars.fontFamily,
   fontStyle: ["normal", "italic", "oblique"],
   fontWeight: vars.fontWeight,
-  height: { auto: "auto", full: "100%" },
-  left: [0],
   lineHeight: vars.lineHeight,
-  maxHeight: { full: "100%" },
-  maxWidth: { full: "100%" },
+  blockSize: size,
+  maxBlockSize: size,
+  inlineSize: size,
+  maxInlineSize: size,
   opacity: [0, 1],
   overflow: ["hidden", "scroll", "visible", "auto"],
-  overflowX: ["hidden", "scroll", "visible", "auto"],
-  overflowY: ["hidden", "scroll", "visible", "auto"],
+  overflowBlock: ["hidden", "scroll", "visible", "auto"],
+  overflowInline: ["hidden", "scroll", "visible", "auto"],
   pointerEvents: ["none"],
-  right: [0],
   textDecoration: ["overline", "line-through", "underline", "none"],
   textTransform: ["lowercase", "uppercase", "capitalize"],
   textWrap: ["balance", "wrap"],
-  top: [0],
   transition: vars.transition,
   userSelect: ["none"],
   whiteSpace: ["nowrap", "pre", "pre-line", "pre-wrap"],
-  width: { auto: "auto", full: "100%", "fit-content": "fit-content" },
   wordBreak: ["break-word"],
   wordWrap: ["break-word"]
 };
@@ -59,15 +62,18 @@ const responsiveProperties = {
   fontSize: vars.fontSize,
   gap: vars.space,
   justifyContent: ["flex-start", "flex-end", "center", "space-between", "space-around"],
-  marginBottom: marginSpace,
-  marginLeft: marginSpace,
-  marginRight: marginSpace,
-  marginTop: marginSpace,
+  marginBlockStart: marginSpace,
+  marginBlockEnd: marginSpace,
+  marginInlineStart: marginSpace,
+  marginInlineEnd: marginSpace,
   outline: ["none"],
-  paddingBottom: vars.space,
-  paddingLeft: vars.space,
-  paddingRight: vars.space,
-  paddingTop: vars.space,
+  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"]

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

@@ -7,7 +7,7 @@ fileScope.setFileScope("src/lib/css/atoms/sprinkles.css.ts", "blocks");
 const unresponsiveAtomicProperties = sprinkles.defineProperties({
   properties: styles_lib_css_atoms_atomicProperties_cjs.unresponsiveProperties,
   shorthands: {
-    inset: ["top", "bottom", "left", "right"]
+    inset: ["insetBlockStart", "insetBlockEnd", "insetInlineStart", "insetInlineEnd"]
   }
 });
 const responsiveAtomicProperties = sprinkles.defineProperties({
@@ -27,12 +27,9 @@ const responsiveAtomicProperties = sprinkles.defineProperties({
   responsiveArray: styles_lib_css_atoms_breakpoints_cjs.breakpointNames,
   properties: styles_lib_css_atoms_atomicProperties_cjs.responsiveProperties,
   shorthands: {
-    margin: ["marginTop", "marginBottom", "marginLeft", "marginRight"],
-    marginX: ["marginLeft", "marginRight"],
-    marginY: ["marginTop", "marginBottom"],
-    padding: ["paddingTop", "paddingBottom", "paddingLeft", "paddingRight"],
-    paddingX: ["paddingLeft", "paddingRight"],
-    paddingY: ["paddingTop", "paddingBottom"],
+    margin: ["marginBlockStart", "marginBlockEnd", "marginInlineStart", "marginInlineEnd"],
+    marginBlock: ["marginBlockStart", "marginBlockEnd"],
+    marginInline: ["marginInlineStart", "marginInlineEnd"],
     placeItems: ["justifyContent", "alignItems"]
   }
 });