@heymantle/litho 0.0.4 → 0.0.5

package/dist/esm/stories/Tabs.stories.js

@@ -99,13 +99,12 @@ function _unsupported_iterable_to_array(o, minLen) {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { transformStorySource } from "../utilities/transformers.js";
+import Stack from "../components/Stack.js";
 import Tabs from "../components/Tabs.js";
 import Text from "../components/Text.js";
 import Card from "../components/Card.js";
 import Button from "../components/Button.js";
 import TextField from "../components/TextField.js";
-import VerticalStack from "../components/VerticalStack.js";
-import HorizontalStack from "../components/HorizontalStack.js";
 import Box from "../components/Box.js";
 export default {
     title: 'Litho/Tabs',

package/dist/esm/stories/Tag.stories.js

@@ -111,11 +111,12 @@ function _unsupported_iterable_to_array(o, minLen) {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { transformStorySource } from "../utilities/transformers.js";
+import Stack from "../components/Stack.js";
 import Tag from "../components/Tag.js";
 import Text from "../components/Text.js";
 import Card from "../components/Card.js";
 import Button from "../components/Button.js";
-import { HorizontalStack, VerticalStack, Box } from "../dist/esm/index.js";
+import Box from "../components/Box.js";
 export default {
     title: 'Litho/Tag',
     component: Tag,
@@ -247,8 +248,9 @@ export var TagList = {
                 return tag !== tagToRemove;
             }));
         };
-        return /*#__PURE__*/ _jsx(HorizontalStack, {
-            gap: "2",
+        return /*#__PURE__*/ _jsx(Stack, {
+            horizontal: true,
+            gap: "sm",
             wrap: true,
             children: tags.map(function(tag) {
                 return /*#__PURE__*/ _jsx(Tag, {
@@ -305,8 +307,9 @@ export var CategorizationExample = {
                 }),
                 /*#__PURE__*/ _jsx(Box, {
                     paddingBlockEnd: "6",
-                    children: /*#__PURE__*/ _jsx(HorizontalStack, {
-                        gap: "2",
+                    children: /*#__PURE__*/ _jsx(Stack, {
+                        horizontal: true,
+                        gap: "sm",
                         wrap: true,
                         children: categories.map(function(category) {
                             return /*#__PURE__*/ _jsx(Tag, _object_spread_props(_object_spread({
@@ -371,12 +374,13 @@ export var FilterTags = {
         var clearAllFilters = function() {
             setActiveFilters([]);
         };
-        return /*#__PURE__*/ _jsxs(VerticalStack, {
-            gap: "4",
+        return /*#__PURE__*/ _jsxs(Stack, {
+            gap: "md",
             children: [
-                /*#__PURE__*/ _jsxs(HorizontalStack, {
+                /*#__PURE__*/ _jsxs(Stack, {
+                    horizontal: true,
                     blockAlign: "center",
-                    gap: "2",
+                    gap: "sm",
                     children: [
                         /*#__PURE__*/ _jsx(Text, {
                             variant: "headingSm",
@@ -390,8 +394,9 @@ export var FilterTags = {
                         })
                     ]
                 }),
-                activeFilters.length > 0 ? /*#__PURE__*/ _jsx(HorizontalStack, {
-                    gap: "2",
+                activeFilters.length > 0 ? /*#__PURE__*/ _jsx(Stack, {
+                    horizontal: true,
+                    gap: "sm",
                     wrap: true,
                     children: activeFilters.map(function(filter) {
                         return /*#__PURE__*/ _jsx(Tag, {
@@ -419,8 +424,8 @@ export var FilterTags = {
 };
 export var StatusTags = {
     render: function() {
-        return /*#__PURE__*/ _jsxs(VerticalStack, {
-            gap: "6",
+        return /*#__PURE__*/ _jsxs(Stack, {
+            gap: "md",
             children: [
                 /*#__PURE__*/ _jsxs(Box, {
                     children: [
@@ -431,8 +436,9 @@ export var StatusTags = {
                                 children: "Order Status"
                             })
                         }),
-                        /*#__PURE__*/ _jsxs(HorizontalStack, {
-                            gap: "2",
+                        /*#__PURE__*/ _jsxs(Stack, {
+                            horizontal: true,
+                            gap: "sm",
                             children: [
                                 /*#__PURE__*/ _jsx(Box, {
                                     as: "span",
@@ -480,8 +486,9 @@ export var StatusTags = {
                                 children: "Priority Levels"
                             })
                         }),
-                        /*#__PURE__*/ _jsxs(HorizontalStack, {
-                            gap: "2",
+                        /*#__PURE__*/ _jsxs(Stack, {
+                            horizontal: true,
+                            gap: "sm",
                             children: [
                                 /*#__PURE__*/ _jsx(Box, {
                                     as: "span",
@@ -529,8 +536,9 @@ export var StatusTags = {
                                 children: "User Roles"
                             })
                         }),
-                        /*#__PURE__*/ _jsxs(HorizontalStack, {
-                            gap: "2",
+                        /*#__PURE__*/ _jsxs(Stack, {
+                            horizontal: true,
+                            gap: "sm",
                             children: [
                                 /*#__PURE__*/ _jsx(Box, {
                                     as: "span",

package/dist/esm/stories/Thumbnail.stories.js

@@ -98,12 +98,11 @@ function _unsupported_iterable_to_array(o, minLen) {
 }
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { transformStorySource } from "../utilities/transformers.js";
+import Stack from "../components/Stack.js";
 import Thumbnail from "../components/Thumbnail.js";
 import Text from "../components/Text.js";
 import Card from "../components/Card.js";
 import Button from "../components/Button.js";
-import HorizontalStack from "../components/HorizontalStack.js";
-import VerticalStack from "../components/VerticalStack.js";
 import Grid from "../components/Grid.js";
 import Box from "../components/Box.js";
 import { useState } from "react";
@@ -184,12 +183,13 @@ export var Placeholder = {
 };
 export var Sizes = {
     render: function() {
-        return /*#__PURE__*/ _jsxs(HorizontalStack, {
-            gap: "4",
+        return /*#__PURE__*/ _jsxs(Stack, {
+            horizontal: true,
+            gap: "md",
             blockAlign: "center",
             children: [
-                /*#__PURE__*/ _jsxs(VerticalStack, {
-                    gap: "2",
+                /*#__PURE__*/ _jsxs(Stack, {
+                    gap: "sm",
                     inlineAlign: "center",
                     children: [
                         /*#__PURE__*/ _jsx(Thumbnail, {
@@ -203,8 +203,8 @@ export var Sizes = {
                         })
                     ]
                 }),
-                /*#__PURE__*/ _jsxs(VerticalStack, {
-                    gap: "2",
+                /*#__PURE__*/ _jsxs(Stack, {
+                    gap: "sm",
                     inlineAlign: "center",
                     children: [
                         /*#__PURE__*/ _jsx(Thumbnail, {
@@ -218,8 +218,8 @@ export var Sizes = {
                         })
                     ]
                 }),
-                /*#__PURE__*/ _jsxs(VerticalStack, {
-                    gap: "2",
+                /*#__PURE__*/ _jsxs(Stack, {
+                    gap: "sm",
                     inlineAlign: "center",
                     children: [
                         /*#__PURE__*/ _jsx(Thumbnail, {
@@ -246,12 +246,13 @@ export var Sizes = {
 };
 export var CustomSize = {
     render: function() {
-        return /*#__PURE__*/ _jsxs(HorizontalStack, {
-            gap: "4",
+        return /*#__PURE__*/ _jsxs(Stack, {
+            horizontal: true,
+            gap: "md",
             blockAlign: "center",
             children: [
-                /*#__PURE__*/ _jsxs(VerticalStack, {
-                    gap: "2",
+                /*#__PURE__*/ _jsxs(Stack, {
+                    gap: "sm",
                     inlineAlign: "center",
                     children: [
                         /*#__PURE__*/ _jsx(Thumbnail, {
@@ -265,8 +266,8 @@ export var CustomSize = {
                         })
                     ]
                 }),
-                /*#__PURE__*/ _jsxs(VerticalStack, {
-                    gap: "2",
+                /*#__PURE__*/ _jsxs(Stack, {
+                    gap: "sm",
                     inlineAlign: "center",
                     children: [
                         /*#__PURE__*/ _jsx(Thumbnail, {
@@ -280,8 +281,8 @@ export var CustomSize = {
                         })
                     ]
                 }),
-                /*#__PURE__*/ _jsxs(VerticalStack, {
-                    gap: "2",
+                /*#__PURE__*/ _jsxs(Stack, {
+                    gap: "sm",
                     inlineAlign: "center",
                     children: [
                         /*#__PURE__*/ _jsx(Thumbnail, {
@@ -295,8 +296,8 @@ export var CustomSize = {
                         })
                     ]
                 }),
-                /*#__PURE__*/ _jsxs(VerticalStack, {
-                    gap: "2",
+                /*#__PURE__*/ _jsxs(Stack, {
+                    gap: "sm",
                     inlineAlign: "center",
                     children: [
                         /*#__PURE__*/ _jsx(Thumbnail, {
@@ -380,8 +381,8 @@ export var ProductGallery = {
                         padding: "4",
                         border: "default",
                         borderRadius: "lg",
-                        children: /*#__PURE__*/ _jsxs(VerticalStack, {
-                            gap: "2",
+                        children: /*#__PURE__*/ _jsxs(Stack, {
+                            gap: "sm",
                             inlineAlign: "center",
                             children: [
                                 /*#__PURE__*/ _jsx(Thumbnail, {
@@ -441,15 +442,16 @@ export var UserAvatars = {
         return /*#__PURE__*/ _jsx(Card, {
             title: "Team Members",
             padded: true,
-            children: /*#__PURE__*/ _jsx(VerticalStack, {
-                gap: "4",
+            children: /*#__PURE__*/ _jsx(Stack, {
+                gap: "md",
                 children: users.map(function(user) {
                     return /*#__PURE__*/ _jsx(Box, {
                         padding: "3",
                         border: "default",
                         borderRadius: "lg",
-                        children: /*#__PURE__*/ _jsxs(HorizontalStack, {
-                            gap: "4",
+                        children: /*#__PURE__*/ _jsxs(Stack, {
+                            horizontal: true,
+                            gap: "md",
                             blockAlign: "center",
                             children: [
                                 /*#__PURE__*/ _jsx(Thumbnail, {
@@ -573,11 +575,12 @@ export var LoadingStates = {
         return /*#__PURE__*/ _jsx(Card, {
             title: "Image Loading Demo",
             padded: true,
-            children: /*#__PURE__*/ _jsxs(VerticalStack, {
-                gap: "8",
+            children: /*#__PURE__*/ _jsxs(Stack, {
+                gap: "lg",
                 children: [
-                    /*#__PURE__*/ _jsxs(HorizontalStack, {
-                        gap: "4",
+                    /*#__PURE__*/ _jsxs(Stack, {
+                        horizontal: true,
+                        gap: "md",
                         children: [
                             /*#__PURE__*/ _jsx(Button, {
                                 size: "small",
@@ -602,12 +605,13 @@ export var LoadingStates = {
                             })
                         ]
                     }),
-                    /*#__PURE__*/ _jsxs(HorizontalStack, {
-                        gap: "4",
+                    /*#__PURE__*/ _jsxs(Stack, {
+                        horizontal: true,
+                        gap: "md",
                         blockAlign: "center",
                         children: [
-                            /*#__PURE__*/ _jsxs(VerticalStack, {
-                                gap: "2",
+                            /*#__PURE__*/ _jsxs(Stack, {
+                                gap: "sm",
                                 inlineAlign: "center",
                                 children: [
                                     /*#__PURE__*/ _jsx(Thumbnail, {
@@ -622,8 +626,8 @@ export var LoadingStates = {
                                     })
                                 ]
                             }),
-                            /*#__PURE__*/ _jsxs(VerticalStack, {
-                                gap: "2",
+                            /*#__PURE__*/ _jsxs(Stack, {
+                                gap: "sm",
                                 inlineAlign: "center",
                                 children: [
                                     /*#__PURE__*/ _jsx(Thumbnail, {
@@ -638,8 +642,8 @@ export var LoadingStates = {
                                     })
                                 ]
                             }),
-                            /*#__PURE__*/ _jsxs(VerticalStack, {
-                                gap: "2",
+                            /*#__PURE__*/ _jsxs(Stack, {
+                                gap: "sm",
                                 inlineAlign: "center",
                                 children: [
                                     /*#__PURE__*/ _jsx(Thumbnail, {

package/dist/esm/stories/TimePicker.stories.js

@@ -111,12 +111,11 @@ function _unsupported_iterable_to_array(o, minLen) {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { transformStorySource } from "../utilities/transformers.js";
+import Stack from "../components/Stack.js";
 import TimePicker from "../components/TimePicker.js";
 import Text from "../components/Text.js";
 import Card from "../components/Card.js";
 import Button from "../components/Button.js";
-import VerticalStack from "../components/VerticalStack.js";
-import HorizontalStack from "../components/HorizontalStack.js";
 import Grid from "../components/Grid.js";
 import Box from "../components/Box.js";
 export default {
@@ -342,8 +341,8 @@ export var SchedulingForm = {
         return /*#__PURE__*/ _jsx(Card, {
             title: "Work Schedule",
             padded: true,
-            children: /*#__PURE__*/ _jsxs(VerticalStack, {
-                gap: "6",
+            children: /*#__PURE__*/ _jsxs(Stack, {
+                gap: "md",
                 children: [
                     /*#__PURE__*/ _jsxs(Grid, {
                         columns: 2,
@@ -390,8 +389,8 @@ export var SchedulingForm = {
                         padding: "4",
                         borderRadius: "default",
                         paddingBlockStart: "4",
-                        children: /*#__PURE__*/ _jsxs(VerticalStack, {
-                            gap: "2",
+                        children: /*#__PURE__*/ _jsxs(Stack, {
+                            gap: "sm",
                             children: [
                                 /*#__PURE__*/ _jsx(Text, {
                                     variant: "headingSm",
@@ -489,8 +488,8 @@ export var EventPlanning = {
         return /*#__PURE__*/ _jsx(Card, {
             title: "Event Timeline",
             padded: true,
-            children: /*#__PURE__*/ _jsxs(VerticalStack, {
-                gap: "6",
+            children: /*#__PURE__*/ _jsxs(Stack, {
+                gap: "md",
                 children: [
                     events.map(function(event) {
                         return /*#__PURE__*/ _jsx(Box, {
@@ -498,8 +497,8 @@ export var EventPlanning = {
                             border: "default",
                             borderRadius: "default",
                             background: "subdued",
-                            children: /*#__PURE__*/ _jsxs(VerticalStack, {
-                                gap: "4",
+                            children: /*#__PURE__*/ _jsxs(Stack, {
+                                gap: "md",
                                 children: [
                                     /*#__PURE__*/ _jsx(Text, {
                                         variant: "headingSm",
@@ -534,8 +533,9 @@ export var EventPlanning = {
                     /*#__PURE__*/ _jsx(Box, {
                         paddingBlockStart: "4",
                         borderBlockStart: "divider",
-                        children: /*#__PURE__*/ _jsxs(HorizontalStack, {
-                            gap: "2",
+                        children: /*#__PURE__*/ _jsxs(Stack, {
+                            horizontal: true,
+                            gap: "sm",
                             children: [
                                 /*#__PURE__*/ _jsx(Button, {
                                     onClick: addEvent,
@@ -587,15 +587,15 @@ export var AppointmentBooking = {
         return /*#__PURE__*/ _jsx(Card, {
             title: "Book Appointment",
             padded: true,
-            children: /*#__PURE__*/ _jsxs(VerticalStack, {
-                gap: "8",
+            children: /*#__PURE__*/ _jsxs(Stack, {
+                gap: "lg",
                 children: [
                     /*#__PURE__*/ _jsxs(Grid, {
                         columns: 2,
                         gap: "4",
                         children: [
-                            /*#__PURE__*/ _jsxs(VerticalStack, {
-                                gap: "2",
+                            /*#__PURE__*/ _jsxs(Stack, {
+                                gap: "sm",
                                 children: [
                                     /*#__PURE__*/ _jsx(Text, {
                                         variant: "headingSm",
@@ -616,8 +616,8 @@ export var AppointmentBooking = {
                                     })
                                 ]
                             }),
-                            /*#__PURE__*/ _jsxs(VerticalStack, {
-                                gap: "2",
+                            /*#__PURE__*/ _jsxs(Stack, {
+                                gap: "sm",
                                 children: [
                                     /*#__PURE__*/ _jsx(Text, {
                                         variant: "headingSm",
@@ -657,8 +657,8 @@ export var AppointmentBooking = {
                             })
                         ]
                     }),
-                    /*#__PURE__*/ _jsxs(VerticalStack, {
-                        gap: "4",
+                    /*#__PURE__*/ _jsxs(Stack, {
+                        gap: "md",
                         children: [
                             /*#__PURE__*/ _jsx(Text, {
                                 variant: "headingSm",
@@ -702,8 +702,8 @@ export var AppointmentBooking = {
                         background: "success-subdued",
                         borderRadius: "default",
                         border: "success",
-                        children: /*#__PURE__*/ _jsxs(VerticalStack, {
-                            gap: "2",
+                        children: /*#__PURE__*/ _jsxs(Stack, {
+                            gap: "sm",
                             children: [
                                 /*#__PURE__*/ _jsx(Text, {
                                     variant: "headingSm",
@@ -771,8 +771,8 @@ export var RestaurantReservation = {
         return /*#__PURE__*/ _jsx(Card, {
             title: "Make a Reservation",
             padded: true,
-            children: /*#__PURE__*/ _jsxs(VerticalStack, {
-                gap: "6",
+            children: /*#__PURE__*/ _jsxs(Stack, {
+                gap: "md",
                 children: [
                     /*#__PURE__*/ _jsxs(Grid, {
                         columns: "2fr 1fr",
@@ -786,8 +786,8 @@ export var RestaurantReservation = {
                                 helpText: "Select your preferred dining time",
                                 placeholder: "Choose time..."
                             }),
-                            /*#__PURE__*/ _jsxs(VerticalStack, {
-                                gap: "2",
+                            /*#__PURE__*/ _jsxs(Stack, {
+                                gap: "sm",
                                 children: [
                                     /*#__PURE__*/ _jsx(Text, {
                                         variant: "headingSm",
@@ -828,8 +828,8 @@ export var RestaurantReservation = {
                             })
                         ]
                     }),
-                    /*#__PURE__*/ _jsxs(VerticalStack, {
-                        gap: "2",
+                    /*#__PURE__*/ _jsxs(Stack, {
+                        gap: "sm",
                         children: [
                             /*#__PURE__*/ _jsx(Text, {
                                 variant: "headingSm",
@@ -857,15 +857,16 @@ export var RestaurantReservation = {
                         background: "subdued",
                         borderRadius: "default",
                         border: "primary",
-                        children: /*#__PURE__*/ _jsxs(VerticalStack, {
-                            gap: "2",
+                        children: /*#__PURE__*/ _jsxs(Stack, {
+                            gap: "sm",
                             children: [
                                 /*#__PURE__*/ _jsx(Text, {
                                     variant: "headingSm",
                                     children: "Available Times Tonight"
                                 }),
-                                /*#__PURE__*/ _jsx(HorizontalStack, {
-                                    gap: "1",
+                                /*#__PURE__*/ _jsx(Stack, {
+                                    horizontal: true,
+                                    gap: "xs",
                                     wrap: true,
                                     children: dinnerSlots.map(function(slot) {
                                         return /*#__PURE__*/ _jsx("span", {

package/dist/esm/stories/Tip.stories.js

@@ -99,13 +99,12 @@ function _unsupported_iterable_to_array(o, minLen) {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { transformStorySource } from "../utilities/transformers.js";
+import Stack from "../components/Stack.js";
 import Tip from "../components/Tip.js";
 import Text from "../components/Text.js";
 import Card from "../components/Card.js";
 import Button from "../components/Button.js";
 import Link from "../components/Link.js";
-import VerticalStack from "../components/VerticalStack.js";
-import HorizontalStack from "../components/HorizontalStack.js";
 import Box from "../components/Box.js";
 import Grid from "../components/Grid.js";
 import { QuestionMarkMinor, MobileAcceptMajor, QuestionMarkMajor } from "@shopify/polaris-icons";
@@ -183,8 +182,8 @@ export var Default = {
 };
 export var StatusVariants = {
     render: function() {
-        return /*#__PURE__*/ _jsxs(VerticalStack, {
-            gap: "1",
+        return /*#__PURE__*/ _jsxs(Stack, {
+            gap: "xs",
             children: [
                 /*#__PURE__*/ _jsx(Tip, {
                     status: "info",
@@ -264,8 +263,8 @@ export var DismissibleTips = {
                 tip3: true
             });
         };
-        return /*#__PURE__*/ _jsxs(VerticalStack, {
-            gap: "4",
+        return /*#__PURE__*/ _jsxs(Stack, {
+            gap: "md",
             children: [
                 visibleTips.tip1 && /*#__PURE__*/ _jsx(Tip, {
                     status: "info",
@@ -296,7 +295,7 @@ export var DismissibleTips = {
                 }),
                 !Object.values(visibleTips).some(Boolean) && /*#__PURE__*/ _jsx(Box, {
                     padding: "2",
-                    children: /*#__PURE__*/ _jsxs(VerticalStack, {
+                    children: /*#__PURE__*/ _jsxs(Stack, {
                         inlineAlign: "center",
                         children: [
                             /*#__PURE__*/ _jsx(Text, {
@@ -325,8 +324,8 @@ export var DismissibleTips = {
 };
 export var WithCustomIcons = {
     render: function() {
-        return /*#__PURE__*/ _jsxs(VerticalStack, {
-            gap: "4",
+        return /*#__PURE__*/ _jsxs(Stack, {
+            gap: "md",
             children: [
                 /*#__PURE__*/ _jsx(Tip, {
                     status: "info",
@@ -377,8 +376,8 @@ export var InteractiveTips = {
             });
             setLastClicked(tipName);
         };
-        return /*#__PURE__*/ _jsxs(VerticalStack, {
-            gap: "4",
+        return /*#__PURE__*/ _jsxs(Stack, {
+            gap: "md",
             children: [
                 /*#__PURE__*/ _jsx(Tip, {
                     status: "info",
@@ -435,8 +434,8 @@ export var InteractiveTips = {
 };
 export var WithLinks = {
     render: function() {
-        return /*#__PURE__*/ _jsxs(VerticalStack, {
-            gap: "4",
+        return /*#__PURE__*/ _jsxs(Stack, {
+            gap: "md",
             children: [
                 /*#__PURE__*/ _jsx(Tip, {
                     status: "info",
@@ -512,8 +511,8 @@ export var WithLinks = {
 };
 export var AlignmentVariants = {
     render: function() {
-        return /*#__PURE__*/ _jsxs(VerticalStack, {
-            gap: "4",
+        return /*#__PURE__*/ _jsxs(Stack, {
+            gap: "md",
             children: [
                 /*#__PURE__*/ _jsx(Tip, {
                     status: "info",
@@ -549,8 +548,8 @@ export var AlignmentVariants = {
 };
 export var WithBorders = {
     render: function() {
-        return /*#__PURE__*/ _jsxs(VerticalStack, {
-            gap: "4",
+        return /*#__PURE__*/ _jsxs(Stack, {
+            gap: "md",
             children: [
                 /*#__PURE__*/ _jsx(Tip, {
                     status: "info",
@@ -602,8 +601,8 @@ export var InContextUsage = {
         return /*#__PURE__*/ _jsx(Card, {
             title: "Dashboard",
             padded: true,
-            children: /*#__PURE__*/ _jsxs(VerticalStack, {
-                gap: "2",
+            children: /*#__PURE__*/ _jsxs(Stack, {
+                gap: "sm",
                 children: [
                     showTips.onboarding && /*#__PURE__*/ _jsx(Tip, {
                         status: "info",
@@ -668,8 +667,9 @@ export var InContextUsage = {
                             children: "✨ New feature: Click on any metric above to see detailed analytics and trends over time."
                         })
                     }),
-                    /*#__PURE__*/ _jsxs(HorizontalStack, {
-                        gap: "2",
+                    /*#__PURE__*/ _jsxs(Stack, {
+                        horizontal: true,
+                        gap: "sm",
                         children: [
                             /*#__PURE__*/ _jsx(Button, {
                                 primary: true,

package/dist/esm/stories/TopBar.stories.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { transformStorySource } from "../utilities/transformers.js";
 import { TopBar, Button, TextField } from "../dist/esm/index.js";
-import HorizontalStack from "../components/HorizontalStack.js";
+import Stack from "../components/Stack.js";
 export default {
     title: 'Litho/TopBar',
     component: TopBar,
@@ -56,8 +56,9 @@ export var WithSearchTrigger = {
 };
 export var WithHeaderAccessory = {
     args: {
-        headerAccessory: /*#__PURE__*/ _jsxs(HorizontalStack, {
-            gap: "0.5",
+        headerAccessory: /*#__PURE__*/ _jsxs(Stack, {
+            horizontal: true,
+            gap: "xs",
             align: "center",
             children: [
                 /*#__PURE__*/ _jsx(Button, {
@@ -84,8 +85,9 @@ export var FullExample = {
             plain: true,
             children: "John Doe"
         }),
-        headerAccessory: /*#__PURE__*/ _jsxs(HorizontalStack, {
-            gap: "0.5",
+        headerAccessory: /*#__PURE__*/ _jsxs(Stack, {
+            horizontal: true,
+            gap: "xs",
             align: "center",
             children: [
                 /*#__PURE__*/ _jsx(Button, {