@vygruppen/spor-react 6.2.3 → 7.0.1

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-YFZOYRGT.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": "6.2.3",
+  "version": "7.0.1",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",

package/src/button/Button.tsx

@@ -115,19 +115,19 @@ export const Button = forwardRef<ButtonProps, "button">((props, ref) => {
         </Center>
       )}
       <Flex
-        justifyContent="space-between"
+        gap={1}
         flex={1}
         alignItems="center"
-        gap={1}
+        justifyContent={rightIcon ? "space-between" : "center"}
         visibility={isLoading ? "hidden" : "visible"}
         aria-hidden={isLoading}
       >
-        <Flex justifyContent="center" alignItems="center" gap={1}>
+        <Flex gap={1}>
           {leftIcon}
           <Box
             visibility={isLoading ? "hidden" : "visible"}
             whiteSpace="normal"
-            textAlign="left"
+            textAlign="center"
           >
             {children}
           </Box>

package/src/input/NumericStepper.tsx

@@ -196,10 +196,6 @@ const VerySmallButton = (props: VerySmallButtonProps) => {
       size="xs"
       minWidth="24px"
       minHeight="24px"
-      _focusVisible={{
-        boxShadow:
-          "inset 0 0 0 2px var(--spor-colors-pine), inset 0 0 0 3px white",
-      }}
       {...props}
     />
   );

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/accordion.ts

@@ -1,9 +1,9 @@
 import { accordionAnatomy as parts } from "@chakra-ui/anatomy";
 import { createMultiStyleConfigHelpers } from "@chakra-ui/styled-system";
+import { mode } from "@chakra-ui/theme-tools";
 import { colors, shadows } from "../foundations";
 import { getBoxShadowString } from "../utils/box-shadow-utils";
-import { focusVisible } from "../utils/focus-utils";
-import { mode } from "@chakra-ui/theme-tools";
+import { focusVisibleStyles } from "../utils/focus-util";
 
 const helpers = createMultiStyleConfigHelpers(parts.keys);
 const config = helpers.defineMultiStyleConfig({
@@ -18,25 +18,14 @@ const config = helpers.defineMultiStyleConfig({
       transitionDuration: "normal",
       border: "none",
       borderRadius: "sm",
+      borderColor: "osloGrey",
       display: "flex",
       justifyContent: "space-between",
       color: mode("darkGrey", "white")(props),
       textAlign: "left",
       fontFamily: "body",
       fontWeight: "bold",
-      ...focusVisible({
-        notFocus: {
-          boxShadow: getBoxShadowString({
-            borderColor: "osloGrey",
-          }),
-        },
-        focus: {
-          boxShadow: getBoxShadowString({
-            borderColor: mode("greenHaze", "azure")(props),
-            borderWidth: 2,
-          }),
-        },
-      }),
+      ...focusVisibleStyles(props),
       _disabled: {
         opacity: 0.4,
         cursor: "not-allowed",

package/src/theme/components/breadcrumb.ts

@@ -4,8 +4,7 @@ import {
   defineStyle,
 } from "@chakra-ui/styled-system";
 import { mode } from "@chakra-ui/theme-tools";
-import { getBoxShadowString } from "../utils/box-shadow-utils";
-import { focusVisible } from "../utils/focus-utils";
+import { focusVisibleStyles } from "../utils/focus-util";
 
 const { defineMultiStyleConfig, definePartsStyle } =
   createMultiStyleConfigHelpers(parts.keys);
@@ -14,7 +13,6 @@ const baseStyleLink = defineStyle((props) => ({
   transitionProperty: "common",
   transitionDuration: "fast",
   transitionTimingFunction: "ease-out",
-  outline: "none",
   color: "inherit",
   textDecoration: "none",
   textStyle: "xs",
@@ -25,17 +23,7 @@ const baseStyleLink = defineStyle((props) => ({
     _hover: {
       backgroundColor: mode("seaMist", "pine")(props),
     },
-    ...focusVisible({
-      focus: {
-        boxShadow: getBoxShadowString({
-          borderColor: mode("greenHaze", "azure")(props),
-          borderWidth: 2,
-        }),
-      },
-      notFocus: {
-        boxShadow: "none",
-      },
-    }),
+    ...focusVisibleStyles(props),
     _active: {
       backgroundColor: mode("mint", "whiteAlpha.200")(props),
     },

package/src/theme/components/button.ts

@@ -2,13 +2,15 @@ import { defineStyleConfig } from "@chakra-ui/react";
 import { mode } from "@chakra-ui/theme-tools";
 import { colors } from "../foundations";
 import { getBoxShadowString } from "../utils/box-shadow-utils";
+import { focusVisibleStyles } from "../utils/focus-util";
 
 const config = defineStyleConfig({
-  baseStyle: {
+  baseStyle: (props) => ({
     border: 0,
     borderRadius: "xl",
     display: "flex",
     alignItems: "center",
+    justifyContent: "center",
     transitionProperty: "common",
     transitionDuration: "normal",
     textWrap: "wrap",
@@ -18,33 +20,25 @@ const config = defineStyleConfig({
       boxShadow: 0,
       outline: 0,
     },
+    ...focusVisibleStyles(props),
     _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),
       },
     },
-  },
+  }),
   variants: {
     primary: (props) => ({
       // FIXME: Update to use a global defined background color for darkMode whenever it is available.
       // hardcoded background color as alpha-"hack" below is not feasible for dark mode with solid background color
       backgroundColor: mode("pine", "coralGreen")(props),
       color: mode("white", "darkTeal")(props),
-      _focusVisible: {
-        boxShadow: `inset 0 0 0 2px ${mode(
-          colors.greenHaze,
-          colors.azure,
-        )(props)}, inset 0 0 0 4px ${mode(
-          colors.white,
-          colors.darkGrey,
-        )(props)}`,
-      },
       _hover: {
         backgroundColor: mode("darkTeal", "blueGreen")(props),
       },
@@ -60,24 +54,6 @@ const config = defineStyleConfig({
       _hover: {
         backgroundColor: mode("coralGreen", "greenHaze")(props),
       },
-      _focusVisible: {
-        boxShadow: `inset 0 0 0 2px ${mode(
-          colors.greenHaze,
-          colors.primaryGreen,
-        )(props)}, inset 0 0 0 4px ${mode(
-          colors.white,
-          colors.darkTeal,
-        )(props)}`,
-        _hover: {
-          boxShadow: `inset 0 0 0 2px ${mode(
-            colors.greenHaze,
-            colors.azure,
-          )(props)}, inset 0 0 0 4px ${mode(
-            colors.white,
-            colors.blackAlpha[500],
-          )(props)}`,
-        },
-      },
       _active: {
         backgroundColor: mode("mint", "darkTeal")(props),
         boxShadow: `inset 0 0 0 2px ${mode(
@@ -105,12 +81,6 @@ const config = defineStyleConfig({
         colors.blackAlpha[400],
         colors.whiteAlpha[400],
       )(props)}`,
-      _focusVisible: {
-        boxShadow: getBoxShadowString({
-          borderWidth: 2,
-          borderColor: "azure",
-        }),
-      },
       _hover: {
         boxShadow: `inset 0 0 0 2px currentColor`,
       },
@@ -125,12 +95,6 @@ const config = defineStyleConfig({
     ghost: (props) => ({
       backgroundColor: "transparent",
       color: mode("darkGrey", "white")(props),
-      _focusVisible: {
-        boxShadow: getBoxShadowString({
-          borderColor: mode("greenHaze", "azure")(props),
-          borderWidth: 2,
-        }),
-      },
       _hover: {
         backgroundColor: mode("seaMist", "whiteAlpha.200")(props),
         _disabled: {
@@ -158,20 +122,6 @@ const config = defineStyleConfig({
           borderWidth: 2,
         }),
       },
-      _focusVisible: {
-        boxShadow: getBoxShadowString({
-          borderColor: mode("greenHaze", "azure")(props),
-          borderWidth: 2,
-          baseShadow: "sm",
-        }),
-        _hover: {
-          boxShadow: getBoxShadowString({
-            borderColor: mode("greenHaze", "azure")(props),
-            borderWidth: 2,
-            baseShadow: "md",
-          }),
-        },
-      },
     }),
   },
   sizes: {

package/src/theme/components/card-select.ts

@@ -1,13 +1,13 @@
 import { anatomy } from "@chakra-ui/anatomy";
 import { createMultiStyleConfigHelpers } from "@chakra-ui/styled-system";
-import { StyleFunctionProps, mode } from "@chakra-ui/theme-tools";
-import { getBoxShadowString } from "../utils/box-shadow-utils";
-import { focusVisible } from "../utils/focus-utils";
+import { mode } from "@chakra-ui/theme-tools";
 import {
   baseBackground,
   floatingBackground,
   ghostBackground,
 } from "../utils/background-utils";
+import { getBoxShadowString } from "../utils/box-shadow-utils";
+import { focusVisibleStyles } from "../utils/focus-util";
 
 const parts = anatomy("card-select").parts("trigger", "card");
 
@@ -18,16 +18,7 @@ const config = helpers.defineMultiStyleConfig({
       appearance: "none",
       display: "flex",
       alignItems: "center",
-      ...focusVisible({
-        notFocus: {},
-        focus: {
-          boxShadow: getBoxShadowString({
-            borderColor: "greenHaze",
-            borderWidth: 3,
-          }),
-          outline: "none",
-        },
-      }),
+      ...focusVisibleStyles(props),
     },
     card: {
       borderRadius: "sm",
@@ -43,20 +34,10 @@ const config = helpers.defineMultiStyleConfig({
         boxShadow: getBoxShadowString({
           borderColor: mode("blackAlpha.400", "whiteAlpha.400")(props),
         }),
-        ...focusVisible({
-          notFocus: { boxShadow: "none" },
-          focus: {
-            boxShadow: getBoxShadowString({
-              borderColor: "greenHaze",
-              borderWidth: 3,
-            }),
-            outline: "none",
-          },
-        }),
         _hover: {
           boxShadow: getBoxShadowString({
             borderColor: mode("darkGrey", "white")(props),
-            borderWidth: 3,
+            borderWidth: 2,
           }),
         },
         _active: {
@@ -98,13 +79,17 @@ const config = helpers.defineMultiStyleConfig({
     floating: (props) => ({
       trigger: {
         ...floatingBackground("default", props),
-        boxShadow: "sm",
+        boxShadow: getBoxShadowString({
+          borderColor: mode("silver", "whiteAlpha.400")(props),
+          borderWidth: 1,
+          baseShadow: "sm",
+        }),
         transition: "all .1s ease-out",
         _hover: {
           ...floatingBackground("hover", props),
           boxShadow: getBoxShadowString({
             borderColor: mode("silver", "whiteAlpha.400")(props),
-            borderWidth: 1,
+            borderWidth: 2,
             baseShadow: "sm",
           }),
         },

package/src/theme/components/card.ts

@@ -2,6 +2,7 @@ import { defineStyleConfig } from "@chakra-ui/react";
 import { mode } from "@chakra-ui/theme-tools";
 import { colors } from "../foundations";
 import { getBoxShadowString } from "../utils/box-shadow-utils";
+import { focusVisibleStyles } from "../utils/focus-util";
 
 const config = defineStyleConfig({
   baseStyle: (props: any) => ({
@@ -18,16 +19,8 @@ const config = defineStyleConfig({
     "button&, a&, label&, &.is-clickable": {
       ...getColorSchemeClickableProps(props),
       _hover: getColorSchemeHoverProps(props),
+      ...focusVisibleStyles(props),
       _active: getColorSchemeActiveProps(props),
-      _focusVisible: {
-        boxShadow: getBoxShadowString({
-          borderColor: mode("greenHaze", "azure")(props),
-          borderWidth: 2,
-          isInset: false,
-        }),
-        outline: "none",
-        _active: getColorSchemeActiveProps(props),
-      },
       _disabled: {
         backgroundColor: "platinum",
         boxShadow: getBoxShadowString({
@@ -98,7 +91,6 @@ function getColorSchemeClickableProps({ colorScheme, size }: CardThemeProps) {
         boxShadow: getBoxShadowString({
           baseShadow,
           borderColor: "silver",
-          isInset: false,
         }),
       };
     case "grey":
@@ -106,7 +98,6 @@ function getColorSchemeClickableProps({ colorScheme, size }: CardThemeProps) {
         boxShadow: getBoxShadowString({
           baseShadow,
           borderColor: "steel",
-          isInset: false,
         }),
       };
     default:
@@ -115,7 +106,6 @@ function getColorSchemeClickableProps({ colorScheme, size }: CardThemeProps) {
         boxShadow: getBoxShadowString({
           baseShadow,
           borderColor: colors[colorScheme]?.[200] ?? "silver",
-          isInset: false,
         }),
       };
   }
@@ -131,7 +121,6 @@ const getColorSchemeHoverProps = (props: CardThemeProps) => {
         boxShadow: getBoxShadowString({
           baseShadow,
           borderColor: colors.steel,
-          isInset: false,
         }),
       };
     case "grey":
@@ -139,7 +128,6 @@ const getColorSchemeHoverProps = (props: CardThemeProps) => {
         boxShadow: getBoxShadowString({
           baseShadow,
           borderColor: colors.osloGrey,
-          isInset: false,
         }),
       };
     default:
@@ -148,7 +136,6 @@ const getColorSchemeHoverProps = (props: CardThemeProps) => {
         boxShadow: getBoxShadowString({
           baseShadow,
           borderColor: colors[colorScheme]?.[400] ?? colors.silver,
-          isInset: false,
         }),
       };
   }
@@ -163,7 +150,6 @@ const getColorSchemeActiveProps = (props: CardThemeProps) => {
         boxShadow: getBoxShadowString({
           baseShadow,
           borderColor: colors.silver,
-          isInset: false,
         }),
       };
     case "grey":
@@ -172,7 +158,6 @@ const getColorSchemeActiveProps = (props: CardThemeProps) => {
         boxShadow: getBoxShadowString({
           baseShadow,
           borderColor: colors.steel,
-          isInset: false,
         }),
       };
     default:
@@ -181,7 +166,6 @@ const getColorSchemeActiveProps = (props: CardThemeProps) => {
         boxShadow: getBoxShadowString({
           baseShadow,
           borderColor: colors[colorScheme]?.[100] ?? colors.silver,
-          isInset: false,
         }),
       };
   }

package/src/theme/components/checkbox.ts

@@ -1,10 +1,11 @@
 import { checkboxAnatomy as parts } from "@chakra-ui/anatomy";
 import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
+import { focusVisibleStyles } from "../utils/focus-util";
 
 const helpers = createMultiStyleConfigHelpers(parts.keys);
 
 const config = helpers.defineMultiStyleConfig({
-  baseStyle: {
+  baseStyle: (props) => ({
     container: {
       _hover: {
         "input:enabled:not([aria-invalid]) + .chakra-checkbox__control": {
@@ -48,10 +49,7 @@ const config = helpers.defineMultiStyleConfig({
         borderColor: "primaryGreen",
         color: "white",
 
-        _focus: {
-          backgroundColor: "primaryGreen",
-          borderColor: "azure",
-        },
+        ...focusVisibleStyles(props),
 
         _disabled: {
           backgroundColor: "lightGrey",
@@ -69,12 +67,6 @@ const config = helpers.defineMultiStyleConfig({
         backgroundColor: "lightGrey",
         borderColor: "steel",
       },
-
-      _focus: {
-        backgroundColor: "white",
-        borderColor: "azure",
-      },
-
       _invalid: {
         backgroundColor: "white",
         borderColor: "brightRed",
@@ -84,7 +76,7 @@ const config = helpers.defineMultiStyleConfig({
       userSelect: "none",
       _disabled: { opacity: 0.4 },
     },
-  },
+  }),
 });
 
 export default config;

package/src/theme/components/choice-chip.ts

@@ -1,8 +1,7 @@
 import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
 import { anatomy, mode } from "@chakra-ui/theme-tools";
 import { getBoxShadowString } from "../utils/box-shadow-utils";
-import { colors } from "../foundations";
-import { focusVisible } from "../utils/focus-utils";
+import { focusVisibleStyles } from "../utils/focus-util";
 
 const parts = anatomy("choice-chip").parts("container", "icon", "label");
 
@@ -23,15 +22,7 @@ const config = helpers.defineMultiStyleConfig({
         background: "pine",
         boxShadow: getBoxShadowString({ borderColor: "celadon" }),
       },
-      "input:focus-visible + &": {
-        boxShadow: `inset 0 0 0 2px ${mode(
-          colors.greenHaze,
-          colors.azure,
-        )(props)}, inset 0 0 0 4px ${mode(
-          colors.white,
-          colors.darkGrey,
-        )(props)}`,
-      },
+      "input:focus-visible + &": focusVisibleStyles(props)._focusVisible,
       "@media (hover:hover)": {
         _hover: {
           color: mode("darkTeal", "white")(props),

package/src/theme/components/close-button.ts

@@ -1,7 +1,6 @@
 import { defineStyleConfig } from "@chakra-ui/react";
 import { cssVar, mode } from "@chakra-ui/theme-tools";
-import { getBoxShadowString } from "../utils/box-shadow-utils";
-import { focusVisible } from "../utils/focus-utils";
+import { focusVisibleStyles } from "../utils/focus-util";
 
 const $size = cssVar("close-button-size");
 
@@ -15,18 +14,7 @@ const config = defineStyleConfig({
     backgroundColor: "transparent",
     color: mode("darkGrey", "white")(props),
     fontWeight: "normal",
-    ...focusVisible({
-      focus: {
-        outline: "none",
-        boxShadow: getBoxShadowString({
-          borderColor: mode("greenHaze", "azure")(props),
-        }),
-        outlineOffset: "2px",
-      },
-      notFocus: {
-        boxShadow: "none",
-      },
-    }),
+    ...focusVisibleStyles(props),
     _hover: {
       backgroundColor: mode("seaMist", "whiteAlpha.100")(props),
       _disabled: {

package/src/theme/components/code.ts

@@ -8,7 +8,7 @@ const config = defineStyleConfig({
     fontFamily: "monospace",
     fontSize: ["mobile.xs", "desktop.xs"],
     borderRadius: "xs",
-    px: 1,
+    paddingX: 1,
   },
   variants,
   defaultProps,