@vygruppen/spor-react 7.0.0 → 7.0.1

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @vygruppen/spor-react@7.0.0 build
+> @vygruppen/spor-react@7.0.1 build
 > tsup src/index.tsx --dts --treeshake --format cjs,esm
 
 CLI Building entry: src/index.tsx
@@ -8,15 +8,15 @@
 CLI Target: node16
 CJS Build start
 ESM Build start
-"Collapse" is imported from external module "@chakra-ui/react" but never used in "dist/chunk-CYU6YFQK.mjs".
 "Collapse" is imported from external module "@chakra-ui/react" but never used in "dist/index.js".
+"Collapse" is imported from external module "@chakra-ui/react" but never used in "dist/chunk-CSCLMQYA.mjs".
 DTS Build start
+CJS dist/index.js 493.23 KB
+CJS ⚡️ Build success in 2280ms
 ESM dist/index.mjs                      2.16 KB
-ESM dist/CountryCodeSelect-OK6RZ6AY.mjs 1.19 KB
-ESM dist/chunk-CYU6YFQK.mjs             385.72 KB
-ESM ⚡️ Build success in 2175ms
-CJS dist/index.js 492.77 KB
-CJS ⚡️ Build success in 2175ms
-DTS ⚡️ Build success in 10809ms
-DTS dist/index.d.ts  262.80 KB
-DTS dist/index.d.mts 262.80 KB
+ESM dist/CountryCodeSelect-EKQUBVBJ.mjs 1.19 KB
+ESM dist/chunk-CSCLMQYA.mjs             386.09 KB
+ESM ⚡️ Build success in 2281ms
+DTS ⚡️ Build success in 10981ms
+DTS dist/index.d.ts  263.56 KB
+DTS dist/index.d.mts 263.56 KB

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @vygruppen/spor-react
 
+## 7.0.1
+
+### Patch Changes
+
+- 1e960e1: Button, FAB: Tweak disabled state
+- a7590c8: ProgressIndicator: Change colors of inactive dots
+- 0ccf0c5: Stepper: Change the breakpoint for when the stepper changes from one design to another
+
 ## 7.0.0
 
 ### Major Changes

package/dist/{CountryCodeSelect-OK6RZ6AY.mjs → CountryCodeSelect-EKQUBVBJ.mjs}

@@ -1,4 +1,4 @@
-import { createTexts, useTranslation, InfoSelect, Item } from './chunk-CYU6YFQK.mjs';
+import { createTexts, useTranslation, InfoSelect, Item } from './chunk-CSCLMQYA.mjs';
 import React from 'react';
 import { getSupportedCallingCodes } from 'awesome-phonenumber';
 

package/dist/{chunk-CYU6YFQK.mjs → chunk-CSCLMQYA.mjs}

@@ -3417,7 +3417,7 @@ var texts14 = createTexts({
     sv: "Telefonnummer"
   }
 });
-var LazyCountryCodeSelect = React69__default.lazy(() => import('./CountryCodeSelect-OK6RZ6AY.mjs'));
+var LazyCountryCodeSelect = React69__default.lazy(() => import('./CountryCodeSelect-EKQUBVBJ.mjs'));
 var Radio = forwardRef((props, ref) => {
   return /* @__PURE__ */ React69__default.createElement(Radio$1, { ...props, ref });
 });
@@ -4310,7 +4310,7 @@ var Stepper = ({
         },
         step
       ))
-    )), title && /* @__PURE__ */ React69__default.createElement(Box, { as: "h3", __css: style.title }, title)), /* @__PURE__ */ React69__default.createElement(Flex, { justifyContent: "center", display: ["none", "flex"] }, steps.map((step, index) => /* @__PURE__ */ React69__default.createElement(StepperStep, { key: index, stepNumber: index + 1, variant }, step))))
+    )), title && /* @__PURE__ */ React69__default.createElement(Box, { as: "h3", __css: style.title }, title)), /* @__PURE__ */ React69__default.createElement(Flex, { justifyContent: "center", display: ["none", null, "flex"] }, steps.map((step, index) => /* @__PURE__ */ React69__default.createElement(StepperStep, { key: index, stepNumber: index + 1, variant }, step))))
   ));
 };
 var texts22 = createTexts({
@@ -10095,12 +10095,12 @@ var config6 = defineStyleConfig$1({
     _disabled: {
       cursor: "not-allowed",
       boxShadow: "none",
-      backgroundColor: "silver",
-      color: "dimGrey"
+      backgroundColor: mode("blackAlpha.100", "whiteAlpha.100")(props),
+      color: mode("blackAlpha.400", "whiteAlpha.400")(props)
     },
     _hover: {
       _disabled: {
-        background: "silver"
+        background: mode("blackAlpha.100", "whiteAlpha.100")(props)
       }
     }
   }),
@@ -11240,12 +11240,16 @@ var config15 = helpers8.defineMultiStyleConfig({
       position: "fixed",
       ...getPositionProps(props),
       _disabled: {
-        backgroundColor: "whiteAlpha.400",
-        color: "white"
+        backgroundColor: mode("blackAlpha.100", "whiteAlpha.100")(props),
+        color: mode("blackAlpha.400", "whiteAlpha.400")(props)
       },
       ...focusVisibleStyles(props),
       _hover: {
-        backgroundColor: "seaMist"
+        backgroundColor: "seaMist",
+        _disabled: {
+          backgroundColor: mode("blackAlpha.100", "whiteAlpha.100")(props),
+          color: mode("blackAlpha.400", "whiteAlpha.400")(props)
+        }
       },
       zIndex: "sticky"
     },
@@ -12435,7 +12439,7 @@ var config28 = helpers19.defineMultiStyleConfig({
         }
       },
       circle: {
-        fill: mode("blackAlpha.400", "whiteAlpha.400")(props)
+        fill: mode("blackAlpha.200", "whiteAlpha.200")(props)
       }
     }
   }),
@@ -12585,24 +12589,24 @@ var parts14 = anatomy$1("stepper").parts(
 );
 var helpers22 = createMultiStyleConfigHelpers$1(parts14.keys);
 var config32 = helpers22.defineMultiStyleConfig({
-  baseStyle: (props) => ({
+  baseStyle: {
     root: {
       display: "flex",
       alignItems: "center",
-      justifyContent: ["space-between", "center"],
-      minHeight: ["48px", "60px"],
+      justifyContent: ["space-between", null, "center"],
+      minHeight: ["48px", null, "60px"],
       overflowX: "auto",
       width: "100%"
     },
     container: {
-      paddingX: [2, 2, 0],
+      paddingX: [2, null, null, 0],
       maxWidth: "container.lg",
       marginX: "auto",
       width: "100%"
     },
     innerContainer: {
       overflow: "hidden",
-      display: ["flex", "none"],
+      display: ["flex", null, "none"],
       alignItems: "center",
       justifyContent: "space-between"
     },
@@ -12629,7 +12633,7 @@ var config32 = helpers22.defineMultiStyleConfig({
       textStyle: "sm",
       whiteSpace: "nowrap"
     }
-  }),
+  },
   variants: {
     base: () => ({
       root: {

package/dist/index.d.mts

@@ -3312,6 +3312,10 @@ declare const theme: {
                 container: {
                     _hover: {
                         backgroundColor: string;
+                        _disabled: {
+                            backgroundColor: string;
+                            color: string;
+                        };
                     };
                     zIndex: string;
                     _focusVisible: {
@@ -3340,6 +3344,10 @@ declare const theme: {
                 } | {
                     _hover: {
                         backgroundColor: string;
+                        _disabled: {
+                            backgroundColor: string;
+                            color: string;
+                        };
                     };
                     zIndex: string;
                     _focusVisible: {
@@ -3372,6 +3380,10 @@ declare const theme: {
                 } | {
                     _hover: {
                         backgroundColor: string;
+                        _disabled: {
+                            backgroundColor: string;
+                            color: string;
+                        };
                     };
                     zIndex: string;
                     _focusVisible: {
@@ -3404,6 +3416,10 @@ declare const theme: {
                 } | {
                     _hover: {
                         backgroundColor: string;
+                        _disabled: {
+                            backgroundColor: string;
+                            color: string;
+                        };
                     };
                     zIndex: string;
                     _focusVisible: {
@@ -3436,6 +3452,10 @@ declare const theme: {
                 } | {
                     _hover: {
                         backgroundColor: string;
+                        _disabled: {
+                            backgroundColor: string;
+                            color: string;
+                        };
                     };
                     zIndex: string;
                     _focusVisible: {
@@ -4693,24 +4713,24 @@ declare const theme: {
             } | undefined;
         };
         Stepper: {
-            baseStyle?: ((props: _chakra_ui_styled_system.StyleFunctionProps) => {
+            baseStyle?: {
                 root: {
                     display: string;
                     alignItems: string;
-                    justifyContent: ("center" | "space-between")[];
-                    minHeight: ("48px" | "60px")[];
+                    justifyContent: ("center" | "space-between" | null)[];
+                    minHeight: ("48px" | "60px" | null)[];
                     overflowX: string;
                     width: string;
                 };
                 container: {
-                    paddingX: number[];
+                    paddingX: (number | null)[];
                     maxWidth: string;
                     marginX: string;
                     width: string;
                 };
                 innerContainer: {
                     overflow: string;
-                    display: ("flex" | "none")[];
+                    display: ("flex" | "none" | null)[];
                     alignItems: string;
                     justifyContent: string;
                 };
@@ -4737,7 +4757,7 @@ declare const theme: {
                     textStyle: string;
                     whiteSpace: string;
                 };
-            }) | undefined;
+            } | undefined;
             sizes?: {
                 [key: string]: _chakra_ui_styled_system.PartsStyleInterpolation<{
                     keys: ("title" | "container" | "closeButton" | "root" | "innerContainer" | "backButton" | "stepCounter" | "stepContainer" | "stepButton" | "stepNumber" | "stepTitle")[];

package/dist/index.d.ts

@@ -3312,6 +3312,10 @@ declare const theme: {
                 container: {
                     _hover: {
                         backgroundColor: string;
+                        _disabled: {
+                            backgroundColor: string;
+                            color: string;
+                        };
                     };
                     zIndex: string;
                     _focusVisible: {
@@ -3340,6 +3344,10 @@ declare const theme: {
                 } | {
                     _hover: {
                         backgroundColor: string;
+                        _disabled: {
+                            backgroundColor: string;
+                            color: string;
+                        };
                     };
                     zIndex: string;
                     _focusVisible: {
@@ -3372,6 +3380,10 @@ declare const theme: {
                 } | {
                     _hover: {
                         backgroundColor: string;
+                        _disabled: {
+                            backgroundColor: string;
+                            color: string;
+                        };
                     };
                     zIndex: string;
                     _focusVisible: {
@@ -3404,6 +3416,10 @@ declare const theme: {
                 } | {
                     _hover: {
                         backgroundColor: string;
+                        _disabled: {
+                            backgroundColor: string;
+                            color: string;
+                        };
                     };
                     zIndex: string;
                     _focusVisible: {
@@ -3436,6 +3452,10 @@ declare const theme: {
                 } | {
                     _hover: {
                         backgroundColor: string;
+                        _disabled: {
+                            backgroundColor: string;
+                            color: string;
+                        };
                     };
                     zIndex: string;
                     _focusVisible: {
@@ -4693,24 +4713,24 @@ declare const theme: {
             } | undefined;
         };
         Stepper: {
-            baseStyle?: ((props: _chakra_ui_styled_system.StyleFunctionProps) => {
+            baseStyle?: {
                 root: {
                     display: string;
                     alignItems: string;
-                    justifyContent: ("center" | "space-between")[];
-                    minHeight: ("48px" | "60px")[];
+                    justifyContent: ("center" | "space-between" | null)[];
+                    minHeight: ("48px" | "60px" | null)[];
                     overflowX: string;
                     width: string;
                 };
                 container: {
-                    paddingX: number[];
+                    paddingX: (number | null)[];
                     maxWidth: string;
                     marginX: string;
                     width: string;
                 };
                 innerContainer: {
                     overflow: string;
-                    display: ("flex" | "none")[];
+                    display: ("flex" | "none" | null)[];
                     alignItems: string;
                     justifyContent: string;
                 };
@@ -4737,7 +4757,7 @@ declare const theme: {
                     textStyle: string;
                     whiteSpace: string;
                 };
-            }) | undefined;
+            } | undefined;
             sizes?: {
                 [key: string]: _chakra_ui_styled_system.PartsStyleInterpolation<{
                     keys: ("title" | "container" | "closeButton" | "root" | "innerContainer" | "backButton" | "stepCounter" | "stepContainer" | "stepButton" | "stepNumber" | "stepTitle")[];

package/dist/index.js

@@ -5182,7 +5182,7 @@ var init_Stepper = __esm({
             },
             step
           ))
-        )), title && /* @__PURE__ */ React69__namespace.default.createElement(react.Box, { as: "h3", __css: style.title }, title)), /* @__PURE__ */ React69__namespace.default.createElement(react.Flex, { justifyContent: "center", display: ["none", "flex"] }, steps.map((step, index) => /* @__PURE__ */ React69__namespace.default.createElement(exports.StepperStep, { key: index, stepNumber: index + 1, variant }, step))))
+        )), title && /* @__PURE__ */ React69__namespace.default.createElement(react.Box, { as: "h3", __css: style.title }, title)), /* @__PURE__ */ React69__namespace.default.createElement(react.Flex, { justifyContent: "center", display: ["none", null, "flex"] }, steps.map((step, index) => /* @__PURE__ */ React69__namespace.default.createElement(exports.StepperStep, { key: index, stepNumber: index + 1, variant }, step))))
       ));
     };
     texts23 = createTexts({
@@ -11536,12 +11536,12 @@ var init_button2 = __esm({
         _disabled: {
           cursor: "not-allowed",
           boxShadow: "none",
-          backgroundColor: "silver",
-          color: "dimGrey"
+          backgroundColor: themeTools.mode("blackAlpha.100", "whiteAlpha.100")(props),
+          color: themeTools.mode("blackAlpha.400", "whiteAlpha.400")(props)
         },
         _hover: {
           _disabled: {
-            background: "silver"
+            background: themeTools.mode("blackAlpha.100", "whiteAlpha.100")(props)
           }
         }
       }),
@@ -12754,12 +12754,16 @@ var init_fab = __esm({
           position: "fixed",
           ...getPositionProps(props),
           _disabled: {
-            backgroundColor: "whiteAlpha.400",
-            color: "white"
+            backgroundColor: themeTools.mode("blackAlpha.100", "whiteAlpha.100")(props),
+            color: themeTools.mode("blackAlpha.400", "whiteAlpha.400")(props)
           },
           ...focusVisibleStyles(props),
           _hover: {
-            backgroundColor: "seaMist"
+            backgroundColor: "seaMist",
+            _disabled: {
+              backgroundColor: themeTools.mode("blackAlpha.100", "whiteAlpha.100")(props),
+              color: themeTools.mode("blackAlpha.400", "whiteAlpha.400")(props)
+            }
           },
           zIndex: "sticky"
         },
@@ -14048,7 +14052,7 @@ var init_progress_indicator2 = __esm({
             }
           },
           circle: {
-            fill: themeTools.mode("blackAlpha.400", "whiteAlpha.400")(props)
+            fill: themeTools.mode("blackAlpha.200", "whiteAlpha.200")(props)
           }
         }
       }),
@@ -14236,24 +14240,24 @@ var init_stepper2 = __esm({
     );
     helpers22 = react.createMultiStyleConfigHelpers(parts14.keys);
     config32 = helpers22.defineMultiStyleConfig({
-      baseStyle: (props) => ({
+      baseStyle: {
         root: {
           display: "flex",
           alignItems: "center",
-          justifyContent: ["space-between", "center"],
-          minHeight: ["48px", "60px"],
+          justifyContent: ["space-between", null, "center"],
+          minHeight: ["48px", null, "60px"],
           overflowX: "auto",
           width: "100%"
         },
         container: {
-          paddingX: [2, 2, 0],
+          paddingX: [2, null, null, 0],
           maxWidth: "container.lg",
           marginX: "auto",
           width: "100%"
         },
         innerContainer: {
           overflow: "hidden",
-          display: ["flex", "none"],
+          display: ["flex", null, "none"],
           alignItems: "center",
           justifyContent: "space-between"
         },
@@ -14280,7 +14284,7 @@ var init_stepper2 = __esm({
           textStyle: "sm",
           whiteSpace: "nowrap"
         }
-      }),
+      },
       variants: {
         base: () => ({
           root: {

package/dist/index.mjs

@@ -1 +1 @@
-export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, Card, CardSelect, Center, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, ColorInlineLoader, ColorSpinner, Combobox, Container, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkMode, DarkSpinner, DatePicker, DateRangePicker, Divider, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerFooter, ModalHeader as DrawerHeader, DrawerOverlay, Expandable, ExpandableAlert, ExpandableItem, Fade, Flex, FloatingActionButton, FormControl, FormErrorMessage, FormHelperText, FormLabel, Grid, GridItem, HStack, Heading, IconButton, Image, Img, InfoSelect, InfoTag, Input, InputGroup, InputLeftElement, InputRightElement, Item, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightMode, LightSpinner, LineIcon, ListBox, ListItem, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, NativeSelect, NumericStepper, OrderedList, PasswordInput, PhoneNumberInput, PlayPauseButton, Popover, PopoverAnchor, PopoverArrow, PopoverBody, PopoverCloseButton, PopoverContent, PopoverFooter, PopoverHeader, PopoverTrigger, PopoverWizardBody, Portal, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioGroup, ScaleFade, SearchInput, Section, SimpleDrawer, SimpleGrid, SimplePopover, Skeleton, SkeletonCircle, SkeletonText, SkipButton, Slide, SlideFade, Spacer, SporProvider, Stack, StaticAlert, Stepper, StepperStep, Switch, Tab, TabList, TabPanel, TabPanels, Table, TableCaption, Tabs, Tbody, Td, Text, TextLink, Textarea, Tfoot, Th, Thead, Time, TimePicker, Tr, TravelTag, UnorderedList, VStack, VyLogo, WizardPopover, Wrap, WrapItem, brandTheme, createTexts, defineStyleConfig, extendTheme, fontFaces, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useSize, useTheme, useToast, useToken, useTranslation } from './chunk-CYU6YFQK.mjs';
+export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, Card, CardSelect, Center, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, ColorInlineLoader, ColorSpinner, Combobox, Container, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkMode, DarkSpinner, DatePicker, DateRangePicker, Divider, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerFooter, ModalHeader as DrawerHeader, DrawerOverlay, Expandable, ExpandableAlert, ExpandableItem, Fade, Flex, FloatingActionButton, FormControl, FormErrorMessage, FormHelperText, FormLabel, Grid, GridItem, HStack, Heading, IconButton, Image, Img, InfoSelect, InfoTag, Input, InputGroup, InputLeftElement, InputRightElement, Item, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightMode, LightSpinner, LineIcon, ListBox, ListItem, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, NativeSelect, NumericStepper, OrderedList, PasswordInput, PhoneNumberInput, PlayPauseButton, Popover, PopoverAnchor, PopoverArrow, PopoverBody, PopoverCloseButton, PopoverContent, PopoverFooter, PopoverHeader, PopoverTrigger, PopoverWizardBody, Portal, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioGroup, ScaleFade, SearchInput, Section, SimpleDrawer, SimpleGrid, SimplePopover, Skeleton, SkeletonCircle, SkeletonText, SkipButton, Slide, SlideFade, Spacer, SporProvider, Stack, StaticAlert, Stepper, StepperStep, Switch, Tab, TabList, TabPanel, TabPanels, Table, TableCaption, Tabs, Tbody, Td, Text, TextLink, Textarea, Tfoot, Th, Thead, Time, TimePicker, Tr, TravelTag, UnorderedList, VStack, VyLogo, WizardPopover, Wrap, WrapItem, brandTheme, createTexts, defineStyleConfig, extendTheme, fontFaces, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useSize, useTheme, useToast, useToken, useTranslation } from './chunk-CSCLMQYA.mjs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vygruppen/spor-react",
-  "version": "7.0.0",
+  "version": "7.0.1",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",

package/src/stepper/Stepper.tsx

@@ -90,7 +90,7 @@ export const Stepper = ({
               </Box>
             )}
           </Box>
-          <Flex justifyContent="center" display={["none", "flex"]}>
+          <Flex justifyContent="center" display={["none", null, "flex"]}>
             {steps.map((step, index) => (
               <StepperStep key={index} stepNumber={index + 1} variant={variant}>
                 {step}

package/src/stepper/StepperStep.tsx

@@ -30,7 +30,7 @@ export const StepperStep = ({
       )}
 
       <Button
-        size={"xs"}
+        size="xs"
         variant={
           state === "active"
             ? "primary"

package/src/theme/components/button.ts

@@ -24,12 +24,12 @@ const config = defineStyleConfig({
     _disabled: {
       cursor: "not-allowed",
       boxShadow: "none",
-      backgroundColor: "silver",
-      color: "dimGrey",
+      backgroundColor: mode("blackAlpha.100", "whiteAlpha.100")(props),
+      color: mode("blackAlpha.400", "whiteAlpha.400")(props),
     },
     _hover: {
       _disabled: {
-        background: "silver",
+        background: mode("blackAlpha.100", "whiteAlpha.100")(props),
       },
     },
   }),

package/src/theme/components/fab.ts

@@ -23,12 +23,16 @@ const config = helpers.defineMultiStyleConfig({
       position: "fixed",
       ...getPositionProps(props),
       _disabled: {
-        backgroundColor: "whiteAlpha.400",
-        color: "white",
+        backgroundColor: mode("blackAlpha.100", "whiteAlpha.100")(props),
+        color: mode("blackAlpha.400", "whiteAlpha.400")(props),
       },
       ...focusVisibleStyles(props),
       _hover: {
         backgroundColor: "seaMist",
+        _disabled: {
+          backgroundColor: mode("blackAlpha.100", "whiteAlpha.100")(props),
+          color: mode("blackAlpha.400", "whiteAlpha.400")(props),
+        },
       },
       zIndex: "sticky",
     },

package/src/theme/components/progress-indicator.ts

@@ -29,7 +29,7 @@ const config = helpers.defineMultiStyleConfig({
         },
       },
       circle: {
-        fill: mode("blackAlpha.400", "whiteAlpha.400")(props),
+        fill: mode("blackAlpha.200", "whiteAlpha.200")(props),
       },
     },
   }),

package/src/theme/components/stepper.ts

@@ -18,24 +18,24 @@ const parts = anatomy("stepper").parts(
 const helpers = createMultiStyleConfigHelpers(parts.keys);
 
 const config = helpers.defineMultiStyleConfig({
-  baseStyle: (props) => ({
+  baseStyle: {
     root: {
       display: "flex",
       alignItems: "center",
-      justifyContent: ["space-between", "center"],
-      minHeight: ["48px", "60px"],
+      justifyContent: ["space-between", null, "center"],
+      minHeight: ["48px", null, "60px"],
       overflowX: "auto",
       width: "100%",
     },
     container: {
-      paddingX: [2, 2, 0],
+      paddingX: [2, null, null, 0],
       maxWidth: "container.lg",
       marginX: "auto",
       width: "100%",
     },
     innerContainer: {
       overflow: "hidden",
-      display: ["flex", "none"],
+      display: ["flex", null, "none"],
       alignItems: "center",
       justifyContent: "space-between",
     },
@@ -62,7 +62,7 @@ const config = helpers.defineMultiStyleConfig({
       textStyle: "sm",
       whiteSpace: "nowrap",
     },
-  }),
+  },
   variants: {
     base: () => ({
       root: {