@vygruppen/spor-react 9.11.2 → 9.11.4

package/dist/index.js

@@ -3537,44 +3537,20 @@ function CalendarCell({
       { passive: false, once: true }
     );
   }, []);
-  return /* @__PURE__ */ React88__namespace.default.createElement(
+  return /* @__PURE__ */ React88__namespace.default.createElement(react.Box, { as: "td", ...cellProps, textAlign: "center", sx: styles3.cell }, /* @__PURE__ */ React88__namespace.default.createElement(
     react.Box,
     {
-      as: "td",
-      ...cellProps,
-      textAlign: "center",
-      sx: {
-        '&[aria-selected="true"] + [aria-selected="true"] > button': {
-          "&::before": {
-            content: '""',
-            display: "block",
-            width: "100%",
-            height: "100%",
-            backgroundColor: "darkTeal",
-            position: "absolute",
-            left: "-50%",
-            top: 0,
-            bottom: 0,
-            zIndex: -1
-          }
-        }
-      }
+      as: "button",
+      type: "button",
+      ...buttonProps,
+      ...stateProps,
+      ref,
+      sx: styles3.dateCell,
+      hidden: isOutsideVisibleRange,
+      width: "100%"
     },
-    /* @__PURE__ */ React88__namespace.default.createElement(
-      react.Box,
-      {
-        as: "button",
-        type: "button",
-        ...buttonProps,
-        ...stateProps,
-        ref,
-        sx: styles3.dateCell,
-        hidden: isOutsideVisibleRange,
-        width: "100%"
-      },
-      date$1.day
-    )
-  );
+    date$1.day
+  ));
 }
 var init_CalendarCell = __esm({
   "src/datepicker/CalendarCell.tsx"() {
@@ -3736,7 +3712,6 @@ var capitalize, CalendarNavigator, texts13;
 var init_CalendarHeader = __esm({
   "src/datepicker/CalendarHeader.tsx"() {
     init_i18n();
-    init_typography();
     init_CalendarNavigationButton();
     init_utils();
     capitalize = (str = "") => str.charAt(0).toUpperCase() + str.slice(1);
@@ -3758,11 +3733,10 @@ var init_CalendarHeader = __esm({
           "aria-label": `${t2(texts13.previous)} ${t2(texts13[unit])}`
         }
       ), /* @__PURE__ */ React88__namespace.default.createElement(
-        exports.Heading,
+        react.Box,
         {
-          as: "div",
           role: "heading",
-          variant: "sm",
+          fontSize: "sm",
           fontWeight: "bold",
           flex: "1",
           textAlign: "center"
@@ -3909,11 +3883,7 @@ var init_DateTimeSegment = __esm({
             outline: "none",
             borderRadius: "xs",
             fontSize: ["mobile.sm", "desktop.sm"],
-            sx: styles3.dateTimeSegment,
-            _focus: {
-              backgroundColor: "darkTeal",
-              color: "white"
-            }
+            sx: styles3.dateTimeSegment
           },
           isPaddable(segment.type) ? segment.text.padStart(2, "0") : segment.text
         );
@@ -12078,41 +12048,17 @@ var init_badge = __esm({
     };
   }
 });
-var defineMultiStyleConfig27, definePartsStyle27, baseStyleLink2, breadcrumb_default;
+
+// src/theme/components/breadcrumb.ts
+var defineMultiStyleConfig27, definePartsStyle27, breadcrumb_default;
 var init_breadcrumb2 = __esm({
   "src/theme/components/breadcrumb.ts"() {
     init_dist4();
     init_dist3();
     init_base_utils();
     init_focus_utils();
+    init_ghost_utils();
     ({ defineMultiStyleConfig: defineMultiStyleConfig27, definePartsStyle: definePartsStyle27 } = createMultiStyleConfigHelpers(breadcrumbAnatomy.keys));
-    baseStyleLink2 = defineStyle((props) => ({
-      transitionProperty: "common",
-      transitionDuration: "fast",
-      transitionTimingFunction: "ease-out",
-      color: "inherit",
-      textDecoration: "none",
-      textStyle: "xs",
-      paddingX: 0.5,
-      borderRadius: "xs",
-      "&:not([aria-current=page])": {
-        cursor: "pointer",
-        _hover: {
-          ...baseBackground("hover", props)
-        },
-        _active: {
-          ...baseBackground("active", props)
-        },
-        ...focusVisibleStyles(props)
-      }
-    }));
-    definePartsStyle27((props) => ({
-      link: baseStyleLink2(props),
-      list: {
-        flexWrap: "wrap",
-        alignItems: "flex-start"
-      }
-    }));
     breadcrumb_default = defineMultiStyleConfig27({
       baseStyle: definePartsStyle27((props) => ({
         link: {
@@ -12151,16 +12097,10 @@ var init_breadcrumb2 = __esm({
           link: {
             "&:not([aria-current=page])": {
               _hover: {
-                backgroundColor: themeTools.mode(
-                  "ghost.surface.hover.light",
-                  "ghost.surface.hover.dark"
-                )(props)
+                ...ghostBackground("hover", props)
               },
               _active: {
-                backgroundColor: themeTools.mode(
-                  "ghost.surface.active.light",
-                  "ghost.surface.active.dark"
-                )(props)
+                ...ghostBackground("active", props)
               }
             }
           }
@@ -12312,26 +12252,26 @@ var init_button2 = __esm({
         lg: {
           minHeight: 8,
           minWidth: 8,
-          fontSize: "18px",
+          fontSize: "sm",
           fontWeight: "bold"
         },
         md: {
           minHeight: 7,
           minWidth: 7,
-          fontSize: "18px",
+          fontSize: "sm",
           fontWeight: "bold"
         },
         sm: {
           minHeight: 6,
           minWidth: 6,
-          fontSize: "16px",
+          fontSize: "xs",
           fontWeight: "normal"
         },
         xs: {
           minHeight: 5,
           minWidth: 5,
           paddingY: 0.5,
-          fontSize: "16px",
+          fontSize: "xs",
           fontWeight: "normal"
         }
       },
@@ -13052,9 +12992,10 @@ var init_choice_chip = __esm({
         container: {
           display: "inline-flex",
           alignItems: "center",
-          fontSize: "16px",
+          fontSize: "xs",
           cursor: "pointer",
           transitionProperty: "all",
+          borderRadius: "xl",
           transitionDuration: "fast",
           _checked: {
             outlineColor: "transparent",
@@ -13154,42 +13095,38 @@ var init_choice_chip = __esm({
       sizes: {
         xs: {
           container: {
-            borderRadius: "30px",
             _checked: {
-              borderRadius: "9px"
+              borderRadius: "0.563rem"
             },
-            height: "30px",
+            height: 5,
             paddingX: 1.5
           }
         },
         sm: {
           container: {
-            borderRadius: "30px",
             _checked: {
-              borderRadius: "12px"
+              borderRadius: "sm"
             },
-            height: "36px",
+            height: 6,
             paddingX: 2
           }
         },
         md: {
           container: {
-            borderRadius: "30px",
             _checked: {
-              borderRadius: "12px"
+              borderRadius: "sm"
             },
-            height: "42px",
+            height: 7,
             paddingX: 2
           }
         },
         lg: {
           container: {
-            borderRadius: "30px",
             _checked: {
-              borderRadius: "18px"
+              borderRadius: "md"
             },
-            height: "54px",
-            px: 3
+            height: 8,
+            paddingX: 3
           }
         }
       },
@@ -13204,6 +13141,7 @@ var $size6, config12, close_button_default;
 var init_close_button = __esm({
   "src/theme/components/close-button.ts"() {
     init_focus_utils();
+    init_ghost_utils();
     $size6 = themeTools.cssVar("close-button-size");
     config12 = react.defineStyleConfig({
       baseStyle: (props) => ({
@@ -13217,27 +13155,27 @@ var init_close_button = __esm({
         fontWeight: "normal",
         ...focusVisibleStyles(props),
         _hover: {
-          backgroundColor: themeTools.mode("seaMist", "whiteAlpha.100")(props),
+          ...ghostBackground("hover", props),
           _disabled: {
             color: "dimGrey"
           }
         },
         _active: {
-          backgroundColor: themeTools.mode("mint", "whiteAlpha.200")(props)
+          ...ghostBackground("active", props)
         }
       }),
       sizes: {
         lg: {
           [$size6.variable]: "40px",
-          fontSize: "16px"
+          fontSize: "xs"
         },
         md: {
           [$size6.variable]: "32px",
-          fontSize: "12px"
+          fontSize: "0.75rem"
         },
         sm: {
           [$size6.variable]: "24px",
-          fontSize: "10px"
+          fontSize: "0.625rem"
         }
       },
       defaultProps: {
@@ -13286,7 +13224,8 @@ var init_datepicker2 = __esm({
       "weekend",
       "dateCell",
       "inputLabel",
-      "dateTimeSegment"
+      "dateTimeSegment",
+      "cell"
     );
     $arrowBackground = themeTools.cssVar("popper-arrow-bg");
     helpers7 = react.createMultiStyleConfigHelpers(parts5.keys);
@@ -13321,7 +13260,11 @@ var init_datepicker2 = __esm({
           color: themeTools.mode(
             "darkGrey",
             props.isPlaceholder ? "whiteAlpha.400" : "white"
-          )(props)
+          )(props),
+          _focus: {
+            ...brandBackground("hover", props),
+            color: "white"
+          }
         },
         calendarTriggerButton: {
           width: 8,
@@ -13362,6 +13305,22 @@ var init_datepicker2 = __esm({
         weekend: {
           ...accentText("default", props)
         },
+        cell: {
+          '&[aria-selected="true"] + [aria-selected="true"] > button': {
+            "&::before": {
+              content: '""',
+              display: "block",
+              width: "100%",
+              height: "100%",
+              position: "absolute",
+              left: "-50%",
+              top: 0,
+              bottom: 0,
+              zIndex: -1,
+              ...brandBackground("default", props)
+            }
+          }
+        },
         dateCell: {
           ...ghostBackground("default", props),
           ...baseText("default", props),
@@ -13450,11 +13409,11 @@ var init_datepicker2 = __esm({
     datepicker_default = config14;
   }
 });
-var baseStyle44, variantSolid5, variantDashed2, variants14, sizes25, divider_default;
+var baseStyle43, variantSolid5, variantDashed2, variants14, sizes25, divider_default;
 var init_divider = __esm({
   "src/theme/components/divider.ts"() {
     init_dist3();
-    baseStyle44 = defineStyle((props) => ({
+    baseStyle43 = defineStyle((props) => ({
       borderColor: themeTools.mode("blackAlpha.300", "whiteAlpha.300")(props)
     }));
     variantSolid5 = defineStyle({
@@ -13482,7 +13441,7 @@ var init_divider = __esm({
       }
     };
     divider_default = defineStyleConfig({
-      baseStyle: baseStyle44,
+      baseStyle: baseStyle43,
       variants: variants14,
       sizes: sizes25,
       defaultProps: {
@@ -13808,7 +13767,7 @@ var init_info_select = __esm({
           display: "flex",
           appearance: "none",
           width: "100%",
-          height: "54px",
+          height: 8,
           borderTopRadius: "sm",
           borderBottomRadius: props.isOpen ? 0 : "sm",
           paddingY: 1.5,
@@ -14195,7 +14154,7 @@ var init_input2 = __esm({
           transitionDuration: "fast",
           position: "relative",
           paddingX: 3,
-          height: "54px",
+          height: 8,
           fontSize: "mobile.md",
           ...baseBackground("default", props),
           ...baseBorder("default", props),
@@ -14233,7 +14192,7 @@ var init_input2 = __esm({
             cursor: "text"
           },
           "&:not(:placeholder-shown)": {
-            paddingTop: "16px",
+            paddingTop: "1rem",
             "& + label": {
               transform: "scale(0.825) translateY(-10px)"
             }
@@ -14456,13 +14415,13 @@ var init_link2 = __esm({
 });
 
 // src/theme/components/list.ts
-var defineMultiStyleConfig28, definePartsStyle28, baseStyle45, list_default;
+var defineMultiStyleConfig28, definePartsStyle28, baseStyle44, list_default;
 var init_list2 = __esm({
   "src/theme/components/list.ts"() {
     init_dist4();
     init_dist3();
     ({ defineMultiStyleConfig: defineMultiStyleConfig28, definePartsStyle: definePartsStyle28 } = createMultiStyleConfigHelpers(listAnatomy.keys));
-    baseStyle45 = definePartsStyle28({
+    baseStyle44 = definePartsStyle28({
       container: {
         fontSize: ["mobile.sm", "desktop.sm"]
       },
@@ -14476,7 +14435,7 @@ var init_list2 = __esm({
       }
     });
     list_default = defineMultiStyleConfig28({
-      baseStyle: baseStyle45
+      baseStyle: baseStyle44
     });
   }
 });
@@ -14946,8 +14905,10 @@ var init_progress_bar = __esm({
         },
         background: {
           display: "flex",
-          backgroundColor: themeTools.mode("coralGreen", "pine")(props),
-          // TODO: Replace with semantic tokens
+          backgroundColor: themeTools.mode(
+            "brand.surface.default.dark",
+            "brand.surface.default.light"
+          )(props),
           borderRadius: "sm",
           justifyContent: "flex-start",
           marginX: "auto"
@@ -15177,7 +15138,10 @@ var init_radio = __esm({
             ...baseText("disabled", props)
           },
           _checked: {
-            color: themeTools.mode("pine", "coralGreen")(props),
+            color: themeTools.mode(
+              "brand.surface.default.light",
+              "brand.surface.default.dark"
+            )(props),
             borderColor: "currentColor",
             _before: {
               content: `""`,
@@ -15232,17 +15196,17 @@ var init_select = __esm({
         field: {
           ...input_default.baseStyle(props).field,
           appearance: "none",
-          paddingTop: "16px",
+          paddingTop: "1rem",
           "option, optgroup": {}
         },
         icon: {
-          width: "30px",
-          height: "30px",
+          width: 5,
+          height: 5,
           insetEnd: "0.5rem",
           position: "relative",
           color: "currentColor",
           strokeLinecap: "round",
-          fontSize: "1.125rem",
+          fontSize: "sm",
           _disabled: {
             ...baseText("disabled", props)
           }
@@ -15750,7 +15714,7 @@ var init_tabs = __esm({
       sizes: {
         xs: {
           tablist: {
-            height: "30px",
+            height: 5,
             padding: "2px"
           },
           tab: {
@@ -15760,7 +15724,7 @@ var init_tabs = __esm({
         },
         sm: {
           tablist: {
-            height: "36px",
+            height: 6,
             padding: 0.5
           },
           tab: {
@@ -15769,7 +15733,7 @@ var init_tabs = __esm({
         },
         md: {
           tablist: {
-            height: "42px",
+            height: 7,
             padding: 0.5
           },
           tab: {
@@ -15779,7 +15743,7 @@ var init_tabs = __esm({
         },
         lg: {
           tablist: {
-            height: "54px",
+            height: 8,
             padding: "4px"
           },
           tab: {
@@ -15959,6 +15923,7 @@ var init_pressable_card = __esm({
           }
         }),
         accent: (props) => ({
+          ...accentText("default", props),
           ...accentBackground("default", props),
           boxShadow: "sm",
           _hover: {

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, Collapse, 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, FullScreenDrawer, 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, Nudge, NumericStepper, OrderedList, Pagination, PasswordInput, PhoneNumberInput, PlayPauseButton, Portal, PressableCard, PrideProvider, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioCard, RadioCardGroup, RadioGroup, ScaleFade, SearchInput, Section, SimpleDrawer, SimpleGrid, Skeleton, SkeletonCircle, SkeletonText, SkipButton, Slide, SlideFade, Spacer, SporProvider, Stack, StaticAlert, StaticCard, Stepper, StepperStep, Switch, Tab, TabList, TabPanel, TabPanels, Table, TableCaption, Tabs, Tbody, Td, Text, TextLink, Textarea, Tfoot, Th, Thead, Time, TimePicker, TogglePride, Tooltip, Tr, TravelTag, UnorderedList, VStack, VyLogo, VyLogoDefault, VyLogoPride, WizardNudge, Wrap, WrapItem, brandTheme, createTexts, defineStyleConfig, extendTheme, fontFaces, slugify, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, usePride, useSize, useTheme, useToast, useToken, useTranslation } from './chunk-PA6EOPOZ.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, Collapse, 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, FullScreenDrawer, 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, Nudge, NumericStepper, OrderedList, Pagination, PasswordInput, PhoneNumberInput, PlayPauseButton, Portal, PressableCard, PrideProvider, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioCard, RadioCardGroup, RadioGroup, ScaleFade, SearchInput, Section, SimpleDrawer, SimpleGrid, Skeleton, SkeletonCircle, SkeletonText, SkipButton, Slide, SlideFade, Spacer, SporProvider, Stack, StaticAlert, StaticCard, Stepper, StepperStep, Switch, Tab, TabList, TabPanel, TabPanels, Table, TableCaption, Tabs, Tbody, Td, Text, TextLink, Textarea, Tfoot, Th, Thead, Time, TimePicker, TogglePride, Tooltip, Tr, TravelTag, UnorderedList, VStack, VyLogo, VyLogoDefault, VyLogoPride, WizardNudge, Wrap, WrapItem, brandTheme, createTexts, defineStyleConfig, extendTheme, fontFaces, slugify, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, usePride, useSize, useTheme, useToast, useToken, useTranslation } from './chunk-WCPDJEIZ.mjs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vygruppen/spor-react",
-  "version": "9.11.2",
+  "version": "9.11.4",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -24,7 +24,7 @@
     "@internationalized/date": "^3.0.1",
     "@vygruppen/spor-design-tokens": ">3.6.0",
     "@vygruppen/spor-icon-react": ">3.6.0",
-    "@vygruppen/spor-loader": ">0.3.0",
+    "@vygruppen/spor-loader": ">0.3.1",
     "awesome-phonenumber": "^5.10.0",
     "deepmerge": "^4.3.1",
     "framer-motion": "^9.1.7",

package/src/datepicker/CalendarCell.tsx

@@ -64,27 +64,7 @@ export function CalendarCell({
   }, []);
 
   return (
-    <Box
-      as="td"
-      {...cellProps}
-      textAlign="center"
-      sx={{
-        '&[aria-selected="true"] + [aria-selected="true"] > button': {
-          "&::before": {
-            content: '""',
-            display: "block",
-            width: "100%",
-            height: "100%",
-            backgroundColor: "darkTeal",
-            position: "absolute",
-            left: "-50%",
-            top: 0,
-            bottom: 0,
-            zIndex: -1,
-          },
-        },
-      }}
-    >
+    <Box as="td" {...cellProps} textAlign="center" sx={styles.cell}>
       <Box
         as="button"
         type="button"

package/src/datepicker/CalendarHeader.tsx

@@ -1,4 +1,4 @@
-import { Flex } from "@chakra-ui/react";
+import { Box, Flex } from "@chakra-ui/react";
 import { getLocalTimeZone } from "@internationalized/date";
 import {
   ArrowLeftOutline24Icon,
@@ -7,7 +7,6 @@ import {
 import React from "react";
 import { CalendarState, RangeCalendarState } from "react-stately";
 import { createTexts, useTranslation } from "../i18n";
-import { Heading } from "../typography";
 import { CalendarNavigationButton } from "./CalendarNavigationButton";
 import { useCurrentLocale } from "./utils";
 
@@ -105,16 +104,15 @@ export const CalendarNavigator = ({
         icon={<ArrowLeftOutline24Icon />}
         aria-label={`${t(texts.previous)} ${t(texts[unit])}`}
       />
-      <Heading
-        as="div"
+      <Box
         role="heading"
-        variant="sm"
+        fontSize="sm"
         fontWeight="bold"
         flex="1"
         textAlign="center"
       >
         {capitalize(title)}
-      </Heading>
+      </Box>
       <CalendarNavigationButton
         onPress={onNext}
         isDisabled={isNextDisabled}

package/src/datepicker/CalendarTriggerButton.tsx

@@ -7,7 +7,7 @@ import {
   ResponsiveValue,
 } from "@chakra-ui/react";
 import { CalendarOutline24Icon } from "@vygruppen/spor-icon-react";
-import React, { useEffect } from "react";
+import React from "react";
 import { AriaButtonProps } from "react-aria";
 import { createTexts, useTranslation } from "..";
 

package/src/datepicker/DateTimeSegment.tsx

@@ -42,10 +42,6 @@ export const DateTimeSegment = forwardRef<HTMLDivElement, DateTimeSegmentProps>(
         borderRadius="xs"
         fontSize={["mobile.sm", "desktop.sm"]}
         sx={styles.dateTimeSegment}
-        _focus={{
-          backgroundColor: "darkTeal",
-          color: "white",
-        }}
       >
         {isPaddable(segment.type)
           ? segment.text.padStart(2, "0")

package/src/input/Radio.tsx

@@ -1,5 +1,4 @@
 import {
-  As,
   Radio as ChakraRadio,
   RadioProps as ChakraRadioProps,
   forwardRef,

package/src/theme/components/breadcrumb.ts

@@ -1,44 +1,12 @@
 import { breadcrumbAnatomy as parts } from "@chakra-ui/anatomy";
-import {
-  createMultiStyleConfigHelpers,
-  defineStyle,
-} from "@chakra-ui/styled-system";
-import { mode } from "@chakra-ui/theme-tools";
+import { createMultiStyleConfigHelpers } from "@chakra-ui/styled-system";
 import { baseBackground, baseBorder } from "../utils/base-utils";
 import { focusVisibleStyles } from "../utils/focus-utils";
+import { ghostBackground } from "../utils/ghost-utils";
 
 const { defineMultiStyleConfig, definePartsStyle } =
   createMultiStyleConfigHelpers(parts.keys);
 
-const baseStyleLink = defineStyle((props) => ({
-  transitionProperty: "common",
-  transitionDuration: "fast",
-  transitionTimingFunction: "ease-out",
-  color: "inherit",
-  textDecoration: "none",
-  textStyle: "xs",
-  paddingX: 0.5,
-  borderRadius: "xs",
-  "&:not([aria-current=page])": {
-    cursor: "pointer",
-    _hover: {
-      ...baseBackground("hover", props),
-    },
-    _active: {
-      ...baseBackground("active", props),
-    },
-    ...focusVisibleStyles(props),
-  },
-}));
-
-const baseStyle = definePartsStyle((props) => ({
-  link: baseStyleLink(props),
-  list: {
-    flexWrap: "wrap",
-    alignItems: "flex-start",
-  },
-}));
-
 export default defineMultiStyleConfig({
   baseStyle: definePartsStyle((props) => ({
     link: {
@@ -77,16 +45,10 @@ export default defineMultiStyleConfig({
       link: {
         "&:not([aria-current=page])": {
           _hover: {
-            backgroundColor: mode(
-              "ghost.surface.hover.light",
-              "ghost.surface.hover.dark",
-            )(props),
+            ...ghostBackground("hover", props),
           },
           _active: {
-            backgroundColor: mode(
-              "ghost.surface.active.light",
-              "ghost.surface.active.dark",
-            )(props),
+            ...ghostBackground("active", props),
           },
         },
       },