@heymantle/litho 0.0.15 → 0.0.16

package/dist/cjs/stories/Stack.stories.js

@@ -18,6 +18,9 @@ _export(exports, {
     get Default () {
         return Default;
     },
+    get FillChildren () {
+        return FillChildren;
+    },
     get FormLayout () {
         return FormLayout;
     },
@@ -39,6 +42,12 @@ _export(exports, {
     get ProductCard () {
         return ProductCard;
     },
+    get ResponsiveBreakpoint () {
+        return ResponsiveBreakpoint;
+    },
+    get ResponsiveFill () {
+        return ResponsiveFill;
+    },
     get StatusDashboard () {
         return StatusDashboard;
     },
@@ -137,15 +146,29 @@ var _default = {
         gap: 'md',
         align: 'start',
         horizontal: false,
-        wrap: false
+        wrap: false,
+        fill: true
     },
     tags: [
         'autodocs'
     ],
     argTypes: {
         horizontal: {
+            control: 'select',
+            options: [
+                false,
+                true,
+                'xs',
+                'sm',
+                'md',
+                'lg',
+                'xl'
+            ],
+            description: 'Direction control. `true` for always horizontal. A breakpoint string (e.g. `"md"`) makes it vertical below and horizontal at/above that breakpoint.'
+        },
+        fill: {
             control: 'boolean',
-            description: 'If true, renders a horizontal stack (flex-row). Defaults to vertical (flex-col).'
+            description: 'When true and horizontal is active, children fill equal space. Defaults to true.'
         },
         gap: {
             control: 'select',
@@ -175,32 +198,21 @@ var _default = {
                 'start',
                 'center',
                 'end',
-                'space-between',
-                'space-evenly',
-                'space-around',
-                'spaceBetween'
+                'between'
             ],
             description: 'Main axis alignment (horizontal for horizontal stacks, vertical for vertical stacks)'
         },
-        blockAlign: {
-            control: 'select',
-            options: [
-                'start',
-                'center',
-                'end',
-                'stretch'
-            ],
-            description: 'Cross-axis alignment for horizontal stacks (vertical alignment)'
-        },
-        inlineAlign: {
+        justify: {
             control: 'select',
             options: [
                 'start',
                 'center',
                 'end',
-                'stretch'
+                'between',
+                'around',
+                'evenly'
             ],
-            description: 'Cross-axis alignment for vertical stacks (horizontal alignment)'
+            description: 'Main axis justification (horizontal for horizontal stacks, vertical for vertical stacks)'
         },
         wrap: {
             control: 'boolean',
@@ -439,7 +451,6 @@ var VerticalAlignment = {
                             border: "dashed",
                             padding: "4",
                             children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
-                                align: "start",
                                 gap: "sm",
                                 children: [
                                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
@@ -545,7 +556,7 @@ var VerticalAlignment = {
                             padding: "4",
                             minHeight: "200px",
                             children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
-                                align: "space-between",
+                                justify: "between",
                                 gap: "sm",
                                 children: [
                                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
@@ -597,7 +608,6 @@ var HorizontalAlignment = {
                             padding: "4",
                             children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
                                 horizontal: true,
-                                align: "start",
                                 gap: "sm",
                                 children: [
                                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
@@ -675,7 +685,7 @@ var HorizontalAlignment = {
                             padding: "4",
                             children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
                                 horizontal: true,
-                                align: "space-between",
+                                justify: "between",
                                 gap: "sm",
                                 children: [
                                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
@@ -719,7 +729,7 @@ var CrossAxisAlignment = {
                             border: "dashed",
                             padding: "4",
                             children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
-                                inlineAlign: "start",
+                                align: "start",
                                 gap: "sm",
                                 children: [
                                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
@@ -756,7 +766,7 @@ var CrossAxisAlignment = {
                             border: "dashed",
                             padding: "4",
                             children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
-                                inlineAlign: "center",
+                                align: "center",
                                 gap: "sm",
                                 children: [
                                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
@@ -795,7 +805,7 @@ var CrossAxisAlignment = {
                             minHeight: "100px",
                             children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
                                 horizontal: true,
-                                blockAlign: "center",
+                                align: "center",
                                 gap: "sm",
                                 children: [
                                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
@@ -830,7 +840,7 @@ var CrossAxisAlignment = {
                             minHeight: "100px",
                             children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
                                 horizontal: true,
-                                blockAlign: "stretch",
+                                align: "stretch",
                                 gap: "sm",
                                 children: [
                                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
@@ -860,7 +870,7 @@ var CrossAxisAlignment = {
     parameters: {
         docs: {
             description: {
-                story: 'Cross-axis alignment: use `inlineAlign` for vertical stacks (horizontal alignment) and `blockAlign` for horizontal stacks (vertical alignment).'
+                story: 'Use `align` for vertical alignment and `justify` for horizontal alignment.'
             }
         }
     }
@@ -923,7 +933,6 @@ var Wrapping = {
                             overflowX: "auto",
                             children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
                                 horizontal: true,
-                                wrap: false,
                                 gap: "sm",
                                 children: [
                                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
@@ -967,13 +976,13 @@ var ActionBar = {
             padded: true,
             children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
                 horizontal: true,
-                align: "space-between",
-                blockAlign: "center",
+                justify: "between",
+                align: "center",
                 children: [
                     /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
                         horizontal: true,
                         gap: "sm",
-                        blockAlign: "center",
+                        align: "center",
                         children: [
                             /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
                                 variant: "headingSm",
@@ -1020,12 +1029,12 @@ var NavigationMenu = {
                 borderBlockEnd: "divider",
                 children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
                     horizontal: true,
-                    align: "space-between",
-                    blockAlign: "center",
+                    justify: "between",
+                    align: "center",
                     children: [
                         /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
                             horizontal: true,
-                            blockAlign: "center",
+                            align: "center",
                             children: [
                                 /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
                                     variant: "headingMd",
@@ -1090,7 +1099,7 @@ var IconAndText = {
                 /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
                     horizontal: true,
                     gap: "sm",
-                    blockAlign: "center",
+                    align: "center",
                     children: [
                         /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
                             source: _polarisicons.HomeMinor,
@@ -1104,7 +1113,7 @@ var IconAndText = {
                 /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
                     horizontal: true,
                     gap: "sm",
-                    blockAlign: "center",
+                    align: "center",
                     children: [
                         /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
                             source: _polarisicons.ProductsMinor,
@@ -1121,7 +1130,7 @@ var IconAndText = {
                 /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
                     horizontal: true,
                     gap: "sm",
-                    blockAlign: "center",
+                    align: "center",
                     children: [
                         /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
                             source: _polarisicons.CustomersMinor,
@@ -1219,8 +1228,8 @@ var StatusDashboard = {
                 children: [
                     /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
                         horizontal: true,
-                        align: "space-between",
-                        blockAlign: "center",
+                        justify: "between",
+                        align: "center",
                         children: [
                             /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
                                 children: "Database Connection"
@@ -1228,7 +1237,7 @@ var StatusDashboard = {
                             /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
                                 horizontal: true,
                                 gap: "xs",
-                                blockAlign: "center",
+                                align: "center",
                                 children: [
                                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
                                         width: "8px",
@@ -1246,8 +1255,8 @@ var StatusDashboard = {
                     }),
                     /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
                         horizontal: true,
-                        align: "space-between",
-                        blockAlign: "center",
+                        justify: "between",
+                        align: "center",
                         children: [
                             /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
                                 children: "API Service"
@@ -1255,7 +1264,7 @@ var StatusDashboard = {
                             /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
                                 horizontal: true,
                                 gap: "xs",
-                                blockAlign: "center",
+                                align: "center",
                                 children: [
                                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
                                         width: "8px",
@@ -1273,8 +1282,8 @@ var StatusDashboard = {
                     }),
                     /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
                         horizontal: true,
-                        align: "space-between",
-                        blockAlign: "center",
+                        justify: "between",
+                        align: "center",
                         children: [
                             /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
                                 children: "Cache System"
@@ -1282,7 +1291,7 @@ var StatusDashboard = {
                             /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
                                 horizontal: true,
                                 gap: "xs",
-                                blockAlign: "center",
+                                align: "center",
                                 children: [
                                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
                                         width: "8px",
@@ -1317,7 +1326,7 @@ var ProductCard = {
             padded: true,
             children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
                 horizontal: true,
-                blockAlign: "start",
+                align: "start",
                 wrap: true,
                 children: [
                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
@@ -1352,8 +1361,8 @@ var ProductCard = {
                                 /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
                                     horizontal: true,
                                     gap: "sm",
-                                    align: "space-between",
-                                    blockAlign: "center",
+                                    justify: "between",
+                                    align: "center",
                                     wrap: true,
                                     children: [
                                         /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
@@ -1386,7 +1395,180 @@ var ProductCard = {
     parameters: {
         docs: {
             description: {
-                story: 'Responsive product card layout using nested vertical and horizontal Stacks.'
+                story: 'Responsive product card layout using nested vertical and horizontal Stacks with to let children size naturally.'
+            }
+        }
+    }
+};
+var ResponsiveBreakpoint = {
+    render: function(args) {
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, _object_spread_props(_object_spread({
+            horizontal: "md"
+        }, args), {
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                    padding: "4",
+                    background: "primary-subdued",
+                    borderRadius: "default",
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                        children: "Column 1"
+                    })
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                    padding: "4",
+                    background: "subdued",
+                    borderRadius: "default",
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                        children: "Column 2"
+                    })
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                    padding: "4",
+                    background: "success-subdued",
+                    borderRadius: "default",
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                        children: "Column 3"
+                    })
+                })
+            ]
+        }));
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Stack is vertical on small screens and becomes horizontal with equal-width children at the `md` (800px) breakpoint. Resize the browser to see the switch.'
+            }
+        }
+    }
+};
+var FillChildren = {
+    render: function(args) {
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+            gap: "lg",
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+                    gap: "sm",
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                            variant: "headingSm",
+                            children: "Fill enabled (default)"
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, _object_spread_props(_object_spread({
+                            horizontal: true
+                        }, args), {
+                            children: [
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                                    padding: "4",
+                                    background: "primary-subdued",
+                                    borderRadius: "default",
+                                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                        children: "Equal Width 1"
+                                    })
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                                    padding: "4",
+                                    background: "subdued",
+                                    borderRadius: "default",
+                                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                        children: "Equal Width 2"
+                                    })
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                                    padding: "4",
+                                    background: "success-subdued",
+                                    borderRadius: "default",
+                                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                        children: "Equal Width 3"
+                                    })
+                                })
+                            ]
+                        }))
+                    ]
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+                    gap: "sm",
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                            variant: "headingSm",
+                            children: "Fill disabled"
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
+                            horizontal: true,
+                            children: [
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                                    padding: "4",
+                                    background: "primary-subdued",
+                                    borderRadius: "default",
+                                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                        children: "Natural Width 1"
+                                    })
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                                    padding: "4",
+                                    background: "subdued",
+                                    borderRadius: "default",
+                                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                        children: "Natural Width 2"
+                                    })
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+                                    padding: "4",
+                                    background: "success-subdued",
+                                    borderRadius: "default",
+                                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                                        children: "Natural Width 3"
+                                    })
+                                })
+                            ]
+                        })
+                    ]
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Comparison of `fill={true}` (default, children fill equal space) vs `fill={false}` (children size naturally).'
+            }
+        }
+    }
+};
+var ResponsiveFill = {
+    render: function(args) {
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, _object_spread_props(_object_spread({
+            horizontal: "md",
+            fill: true
+        }, args), {
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
+                    title: "Plan A",
+                    padded: true,
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                        children: "Basic features for small teams."
+                    })
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
+                    title: "Plan B",
+                    padded: true,
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                        children: "Pro features for growing businesses."
+                    })
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
+                    title: "Plan C",
+                    padded: true,
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
+                        children: "Enterprise features for large organizations."
+                    })
+                })
+            ]
+        }));
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Stacks vertically on mobile, then fills equal-width columns at the `md` breakpoint. A common pattern for pricing cards or feature comparisons.'
             }
         }
     }

package/dist/cjs/stories/Tabs.stories.js

@@ -648,8 +648,8 @@ var NavigationExample = {
                                     borderRadius: "default",
                                     children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
                                         horizontal: true,
-                                        align: "space-between",
-                                        blockAlign: "center",
+                                        justify: "between",
+                                        align: "center",
                                         children: [
                                             /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
                                                 children: order

package/dist/cjs/stories/Tag.stories.js

@@ -425,7 +425,7 @@ var FilterTags = {
             children: [
                 /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
                     horizontal: true,
-                    blockAlign: "center",
+                    align: "center",
                     gap: "sm",
                     children: [
                         /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {

package/dist/cjs/stories/Thumbnail.stories.js

@@ -238,11 +238,11 @@ var Sizes = {
     render: function() {
         return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
             horizontal: true,
-            blockAlign: "center",
+            align: "center",
             children: [
                 /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
                     gap: "sm",
-                    inlineAlign: "center",
+                    align: "center",
                     children: [
                         /*#__PURE__*/ (0, _jsxruntime.jsx)(_Thumbnail.default, {
                             size: "small",
@@ -257,7 +257,7 @@ var Sizes = {
                 }),
                 /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
                     gap: "sm",
-                    inlineAlign: "center",
+                    align: "center",
                     children: [
                         /*#__PURE__*/ (0, _jsxruntime.jsx)(_Thumbnail.default, {
                             size: "medium",
@@ -272,7 +272,7 @@ var Sizes = {
                 }),
                 /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
                     gap: "sm",
-                    inlineAlign: "center",
+                    align: "center",
                     children: [
                         /*#__PURE__*/ (0, _jsxruntime.jsx)(_Thumbnail.default, {
                             size: "large",
@@ -300,11 +300,11 @@ var CustomSize = {
     render: function() {
         return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
             horizontal: true,
-            blockAlign: "center",
+            align: "center",
             children: [
                 /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
                     gap: "sm",
-                    inlineAlign: "center",
+                    align: "center",
                     children: [
                         /*#__PURE__*/ (0, _jsxruntime.jsx)(_Thumbnail.default, {
                             size: 32,
@@ -319,7 +319,7 @@ var CustomSize = {
                 }),
                 /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
                     gap: "sm",
-                    inlineAlign: "center",
+                    align: "center",
                     children: [
                         /*#__PURE__*/ (0, _jsxruntime.jsx)(_Thumbnail.default, {
                             size: 64,
@@ -334,7 +334,7 @@ var CustomSize = {
                 }),
                 /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
                     gap: "sm",
-                    inlineAlign: "center",
+                    align: "center",
                     children: [
                         /*#__PURE__*/ (0, _jsxruntime.jsx)(_Thumbnail.default, {
                             size: 80,
@@ -349,7 +349,7 @@ var CustomSize = {
                 }),
                 /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
                     gap: "sm",
-                    inlineAlign: "center",
+                    align: "center",
                     children: [
                         /*#__PURE__*/ (0, _jsxruntime.jsx)(_Thumbnail.default, {
                             size: 120,
@@ -425,7 +425,6 @@ var ProductGallery = {
             padded: true,
             children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Grid.default, {
                 columns: "auto-fill",
-                gap: "4",
                 minItemWidth: "120px",
                 children: products.map(function(product) {
                     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
@@ -434,7 +433,7 @@ var ProductGallery = {
                         borderRadius: "lg",
                         children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
                             gap: "sm",
-                            inlineAlign: "center",
+                            align: "center",
                             children: [
                                 /*#__PURE__*/ (0, _jsxruntime.jsx)(_Thumbnail.default, {
                                     size: "large",
@@ -501,7 +500,7 @@ var UserAvatars = {
                         borderRadius: "lg",
                         children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
                             horizontal: true,
-                            blockAlign: "center",
+                            align: "center",
                             children: [
                                 /*#__PURE__*/ (0, _jsxruntime.jsx)(_Thumbnail.default, {
                                     size: "medium",
@@ -655,11 +654,11 @@ var LoadingStates = {
                     }),
                     /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
                         horizontal: true,
-                        blockAlign: "center",
+                        align: "center",
                         children: [
                             /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
                                 gap: "sm",
-                                inlineAlign: "center",
+                                align: "center",
                                 children: [
                                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_Thumbnail.default, {
                                         size: "large",
@@ -675,7 +674,7 @@ var LoadingStates = {
                             }),
                             /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
                                 gap: "sm",
-                                inlineAlign: "center",
+                                align: "center",
                                 children: [
                                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_Thumbnail.default, {
                                         size: "large",
@@ -691,7 +690,7 @@ var LoadingStates = {
                             }),
                             /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
                                 gap: "sm",
-                                inlineAlign: "center",
+                                align: "center",
                                 children: [
                                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_Thumbnail.default, {
                                         size: "large",
@@ -793,7 +792,7 @@ var MediaLibrary = {
                         children: [
                             /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
                                 gap: "3",
-                                inlineAlign: "center",
+                                align: "center",
                                 as: _Box.default,
                                 padding: "4",
                                 children: [
@@ -804,7 +803,7 @@ var MediaLibrary = {
                                     }),
                                     /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Stack.default, {
                                         gap: "xs",
-                                        inlineAlign: "center",
+                                        align: "center",
                                         children: [
                                             /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
                                                 style: {