@vinyasa/layout 1.0.22 → 1.0.24

package/dist/cjs/stack.cjs

@@ -91,13 +91,13 @@ var __webpack_modules__ = {
             c: ()=>createRuntimeFn
         });
     },
-    646 (__unused_rspack_module, __webpack_exports__, __webpack_require__) {
+    74 (__unused_rspack_module, __webpack_exports__, __webpack_require__) {
         __webpack_require__.d(__webpack_exports__, {
             A: ()=>flex_Flex
         });
         var jsx_runtime_ = __webpack_require__(732);
         var external_react_ = __webpack_require__(15);
-        var spacing = __webpack_require__(153);
+        var spacing = __webpack_require__(977);
         var createRuntimeFn_62c9670f_esm = __webpack_require__(400);
         var flex = (0, createRuntimeFn_62c9670f_esm.c)({
             defaultClassName: '_2mmdgz0',
@@ -110,26 +110,28 @@ var __webpack_modules__ = {
                     start: '_2mmdgz3',
                     center: '_2mmdgz4',
                     end: '_2mmdgz5',
-                    stretch: '_2mmdgz6'
+                    stretch: '_2mmdgz6',
+                    baseline: '_2mmdgz7'
                 },
                 justify: {
-                    start: '_2mmdgz7',
-                    center: '_2mmdgz8',
-                    end: '_2mmdgz9',
-                    between: '_2mmdgza',
-                    around: '_2mmdgzb'
+                    start: '_2mmdgz8',
+                    center: '_2mmdgz9',
+                    end: '_2mmdgza',
+                    between: '_2mmdgzb',
+                    around: '_2mmdgzc',
+                    evenly: '_2mmdgzd'
                 },
                 wrap: {
-                    nowrap: '_2mmdgzc',
-                    wrap: '_2mmdgzd'
+                    nowrap: '_2mmdgze',
+                    wrap: '_2mmdgzf'
                 },
                 gap: {
-                    1: '_2mmdgze',
-                    2: '_2mmdgzf',
-                    3: '_2mmdgzg',
-                    4: '_2mmdgzh',
-                    5: '_2mmdgzi',
-                    6: '_2mmdgzj'
+                    1: '_2mmdgzg',
+                    2: '_2mmdgzh',
+                    3: '_2mmdgzi',
+                    4: '_2mmdgzj',
+                    5: '_2mmdgzk',
+                    6: '_2mmdgzl'
                 }
             },
             defaultVariants: {
@@ -285,18 +287,15 @@ var __webpack_modules__ = {
         Flex.displayName = 'Flex';
         const flex_Flex = Flex;
     },
-    153 (__unused_rspack_module, __webpack_exports__, __webpack_require__) {
-        __webpack_require__.d(__webpack_exports__, {
-            v: ()=>resolveSpacingStyle
-        });
-        const tokens_namespaceObject = require("@vinyasa/tokens");
+    977 (__unused_rspack_module, __webpack_exports__, __webpack_require__) {
+        var _vinyasa_tokens__rspack_import_0 = __webpack_require__(242);
         const space = {
-            1: tokens_namespaceObject.themeContract.space1,
-            2: tokens_namespaceObject.themeContract.space2,
-            3: tokens_namespaceObject.themeContract.space3,
-            4: tokens_namespaceObject.themeContract.space4,
-            5: tokens_namespaceObject.themeContract.space5,
-            6: tokens_namespaceObject.themeContract.space6
+            1: _vinyasa_tokens__rspack_import_0.themeContract.space1,
+            2: _vinyasa_tokens__rspack_import_0.themeContract.space2,
+            3: _vinyasa_tokens__rspack_import_0.themeContract.space3,
+            4: _vinyasa_tokens__rspack_import_0.themeContract.space4,
+            5: _vinyasa_tokens__rspack_import_0.themeContract.space5,
+            6: _vinyasa_tokens__rspack_import_0.themeContract.space6
         };
         const spacingPropertyMap = [
             [
@@ -364,6 +363,12 @@ var __webpack_modules__ = {
             }
             return style;
         };
+        __webpack_require__.d(__webpack_exports__, {}, {
+            v: resolveSpacingStyle
+        });
+    },
+    242 (module) {
+        module.exports = require("@vinyasa/tokens");
     },
     15 (module) {
         module.exports = require("react");
@@ -382,6 +387,15 @@ function __webpack_require__(moduleId) {
     __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
     return module.exports;
 }
+(()=>{
+    __webpack_require__.n = (module)=>{
+        var getter = module && module.__esModule ? ()=>module['default'] : ()=>module;
+        __webpack_require__.d(getter, {
+            a: getter
+        });
+        return getter;
+    };
+})();
 (()=>{
     __webpack_require__.d = (exports1, getters, values)=>{
         var define = (defs, kind)=>{
@@ -415,7 +429,7 @@ var __webpack_exports__ = {};
     });
     var jsx_runtime_ = __webpack_require__(732);
     var external_react_ = __webpack_require__(15);
-    var Flex = __webpack_require__(646);
+    var Flex = __webpack_require__(74);
     function _define_property(obj, key, value) {
         if (key in obj) Object.defineProperty(obj, key, {
             value: value,

package/dist/cjs/stack.css

@@ -27,54 +27,62 @@
 }
 
 ._2mmdgz7 {
-  justify-content: flex-start;
+  align-items: baseline;
 }
 
 ._2mmdgz8 {
-  justify-content: center;
+  justify-content: flex-start;
 }
 
 ._2mmdgz9 {
-  justify-content: flex-end;
+  justify-content: center;
 }
 
 ._2mmdgza {
-  justify-content: space-between;
+  justify-content: flex-end;
 }
 
 ._2mmdgzb {
-  justify-content: space-around;
+  justify-content: space-between;
 }
 
 ._2mmdgzc {
-  flex-wrap: nowrap;
+  justify-content: space-around;
 }
 
 ._2mmdgzd {
-  flex-wrap: wrap;
+  justify-content: space-evenly;
 }
 
 ._2mmdgze {
-  gap: var(--vinyasa-space1);
+  flex-wrap: nowrap;
 }
 
 ._2mmdgzf {
-  gap: var(--vinyasa-space2);
+  flex-wrap: wrap;
 }
 
 ._2mmdgzg {
-  gap: var(--vinyasa-space3);
+  gap: var(--vinyasa-space1);
 }
 
 ._2mmdgzh {
-  gap: var(--vinyasa-space4);
+  gap: var(--vinyasa-space2);
 }
 
 ._2mmdgzi {
-  gap: var(--vinyasa-space5);
+  gap: var(--vinyasa-space3);
 }
 
 ._2mmdgzj {
+  gap: var(--vinyasa-space4);
+}
+
+._2mmdgzk {
+  gap: var(--vinyasa-space5);
+}
+
+._2mmdgzl {
   gap: var(--vinyasa-space6);
 }
 

package/dist/cjs/surface.cjs

@@ -91,18 +91,15 @@ var __webpack_modules__ = {
             c: ()=>createRuntimeFn
         });
     },
-    153 (__unused_rspack_module, __webpack_exports__, __webpack_require__) {
-        __webpack_require__.d(__webpack_exports__, {
-            v: ()=>resolveSpacingStyle
-        });
-        const tokens_namespaceObject = require("@vinyasa/tokens");
+    977 (__unused_rspack_module, __webpack_exports__, __webpack_require__) {
+        var _vinyasa_tokens__rspack_import_0 = __webpack_require__(242);
         const space = {
-            1: tokens_namespaceObject.themeContract.space1,
-            2: tokens_namespaceObject.themeContract.space2,
-            3: tokens_namespaceObject.themeContract.space3,
-            4: tokens_namespaceObject.themeContract.space4,
-            5: tokens_namespaceObject.themeContract.space5,
-            6: tokens_namespaceObject.themeContract.space6
+            1: _vinyasa_tokens__rspack_import_0.themeContract.space1,
+            2: _vinyasa_tokens__rspack_import_0.themeContract.space2,
+            3: _vinyasa_tokens__rspack_import_0.themeContract.space3,
+            4: _vinyasa_tokens__rspack_import_0.themeContract.space4,
+            5: _vinyasa_tokens__rspack_import_0.themeContract.space5,
+            6: _vinyasa_tokens__rspack_import_0.themeContract.space6
         };
         const spacingPropertyMap = [
             [
@@ -170,6 +167,12 @@ var __webpack_modules__ = {
             }
             return style;
         };
+        __webpack_require__.d(__webpack_exports__, {}, {
+            v: resolveSpacingStyle
+        });
+    },
+    242 (module) {
+        module.exports = require("@vinyasa/tokens");
     },
     15 (module) {
         module.exports = require("react");
@@ -188,6 +191,15 @@ function __webpack_require__(moduleId) {
     __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
     return module.exports;
 }
+(()=>{
+    __webpack_require__.n = (module)=>{
+        var getter = module && module.__esModule ? ()=>module['default'] : ()=>module;
+        __webpack_require__.d(getter, {
+            a: getter
+        });
+        return getter;
+    };
+})();
 (()=>{
     __webpack_require__.d = (exports1, getters, values)=>{
         var define = (defs, kind)=>{
@@ -221,7 +233,7 @@ var __webpack_exports__ = {};
     });
     var jsx_runtime_ = __webpack_require__(732);
     var external_react_ = __webpack_require__(15);
-    var spacing = __webpack_require__(153);
+    var spacing = __webpack_require__(977);
     var createRuntimeFn_62c9670f_esm = __webpack_require__(400);
     var surface = (0, createRuntimeFn_62c9670f_esm.c)({
         defaultClassName: '_1b2xjv10',

package/dist/esm/207.css

@@ -27,54 +27,62 @@
 }
 
 ._2mmdgz7 {
-  justify-content: flex-start;
+  align-items: baseline;
 }
 
 ._2mmdgz8 {
-  justify-content: center;
+  justify-content: flex-start;
 }
 
 ._2mmdgz9 {
-  justify-content: flex-end;
+  justify-content: center;
 }
 
 ._2mmdgza {
-  justify-content: space-between;
+  justify-content: flex-end;
 }
 
 ._2mmdgzb {
-  justify-content: space-around;
+  justify-content: space-between;
 }
 
 ._2mmdgzc {
-  flex-wrap: nowrap;
+  justify-content: space-around;
 }
 
 ._2mmdgzd {
-  flex-wrap: wrap;
+  justify-content: space-evenly;
 }
 
 ._2mmdgze {
-  gap: var(--vinyasa-space1);
+  flex-wrap: nowrap;
 }
 
 ._2mmdgzf {
-  gap: var(--vinyasa-space2);
+  flex-wrap: wrap;
 }
 
 ._2mmdgzg {
-  gap: var(--vinyasa-space3);
+  gap: var(--vinyasa-space1);
 }
 
 ._2mmdgzh {
-  gap: var(--vinyasa-space4);
+  gap: var(--vinyasa-space2);
 }
 
 ._2mmdgzi {
-  gap: var(--vinyasa-space5);
+  gap: var(--vinyasa-space3);
 }
 
 ._2mmdgzj {
+  gap: var(--vinyasa-space4);
+}
+
+._2mmdgzk {
+  gap: var(--vinyasa-space5);
+}
+
+._2mmdgzl {
   gap: var(--vinyasa-space6);
 }
 

package/dist/esm/207.js

@@ -14,26 +14,28 @@ var flex = createRuntimeFn({
             start: '_2mmdgz3',
             center: '_2mmdgz4',
             end: '_2mmdgz5',
-            stretch: '_2mmdgz6'
+            stretch: '_2mmdgz6',
+            baseline: '_2mmdgz7'
         },
         justify: {
-            start: '_2mmdgz7',
-            center: '_2mmdgz8',
-            end: '_2mmdgz9',
-            between: '_2mmdgza',
-            around: '_2mmdgzb'
+            start: '_2mmdgz8',
+            center: '_2mmdgz9',
+            end: '_2mmdgza',
+            between: '_2mmdgzb',
+            around: '_2mmdgzc',
+            evenly: '_2mmdgzd'
         },
         wrap: {
-            nowrap: '_2mmdgzc',
-            wrap: '_2mmdgzd'
+            nowrap: '_2mmdgze',
+            wrap: '_2mmdgzf'
         },
         gap: {
-            1: '_2mmdgze',
-            2: '_2mmdgzf',
-            3: '_2mmdgzg',
-            4: '_2mmdgzh',
-            5: '_2mmdgzi',
-            6: '_2mmdgzj'
+            1: '_2mmdgzg',
+            2: '_2mmdgzh',
+            3: '_2mmdgzi',
+            4: '_2mmdgzj',
+            5: '_2mmdgzk',
+            6: '_2mmdgzl'
         }
     },
     defaultVariants: {

package/dist/esm/box.js

@@ -1,7 +1,9 @@
 import { jsx } from "react/jsx-runtime";
+import { useThemedRef } from "@vinyasa/tokens";
 import { forwardRef } from "react";
 import { resolveSpacingStyle } from "./474.js";
 const Box = /*#__PURE__*/ forwardRef(({ as: Component = 'div', m, mt, mr, mb, ml, mx, my, p, pt, pr, pb, pl, px, py, style, children, ...rest }, ref)=>{
+    const themedRef = useThemedRef(ref);
     const computedStyle = {
         ...resolveSpacingStyle({
             m,
@@ -22,7 +24,7 @@ const Box = /*#__PURE__*/ forwardRef(({ as: Component = 'div', m, mt, mr, mb, ml
         ...style
     };
     return /*#__PURE__*/ jsx(Component, {
-        ref: ref,
+        ref: themedRef,
         style: computedStyle,
         ...rest,
         children: children

package/dist/esm/components/flex/Flex.css.d.ts

@@ -20,6 +20,9 @@ export declare const flex: import("@vanilla-extract/recipes").RuntimeFn<{
         stretch: {
             alignItems: "stretch";
         };
+        baseline: {
+            alignItems: "baseline";
+        };
     };
     justify: {
         start: {
@@ -37,6 +40,9 @@ export declare const flex: import("@vanilla-extract/recipes").RuntimeFn<{
         around: {
             justifyContent: "space-around";
         };
+        evenly: {
+            justifyContent: "space-evenly";
+        };
     };
     wrap: {
         nowrap: {

package/dist/esm/components/flex/Flex.d.ts

@@ -6,8 +6,8 @@ type FlexVariants = RecipeVariants<typeof flex>;
 export type FlexProps = PolymorphicProps & FlexVariants & SpacingProps;
 declare const Flex: import("react").ForwardRefExoticComponent<PolymorphicProps & {
     direction?: "column" | "row" | undefined;
-    align?: "center" | "stretch" | "end" | "start" | undefined;
-    justify?: "center" | "end" | "start" | "between" | "around" | undefined;
+    align?: "center" | "stretch" | "end" | "start" | "baseline" | undefined;
+    justify?: "center" | "end" | "start" | "between" | "around" | "evenly" | undefined;
     wrap?: "nowrap" | "wrap" | undefined;
     gap?: 1 | 2 | 3 | 4 | 5 | 6 | undefined;
 } & SpacingProps & import("react").RefAttributes<HTMLElement>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vinyasa/layout",
-  "version": "1.0.22",
+  "version": "1.0.24",
   "private": false,
   "type": "module",
   "sideEffects": [
@@ -119,7 +119,7 @@
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
-    "@vinyasa/tokens": "^1.0.22"
+    "@vinyasa/tokens": "^1.0.24"
   },
   "dependencies": {
     "@radix-ui/react-scroll-area": "^1.2.18"
@@ -136,7 +136,7 @@
     "@vanilla-extract/vite-plugin": "^5.2.3",
     "@vanilla-extract/webpack-plugin": "^2.3.27",
     "typescript": "^5.7.3",
-    "@vinyasa/tokens": "1.0.22"
+    "@vinyasa/tokens": "1.0.24"
   },
   "scripts": {
     "build": "rslib build && node ../../scripts/postbuild-package.mjs",