@vygruppen/spor-react 9.11.3 → 9.12.0

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, RadioCardGroupContext, 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-D4Z4Q4GJ.mjs';

package/package.json

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

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/layout/RadioCard.tsx

@@ -1,34 +1,19 @@
 import {
   Box,
   BoxProps,
-  UseRadioProps,
   chakra,
   forwardRef,
   useMultiStyleConfig,
 } from "@chakra-ui/react";
-import React, { useId } from "react";
+import React, { useContext, useEffect, useId } from "react";
+import { RadioCardGroupContext } from "./RadioCardGroup";
 
 /**
  * Radio cards are used to present a set of options where only one option can be selected.
  *
- * The most basic version looks like this:
- *
- * ```tsx
- * <RadioCard>
- *   Content
- * </RadioCard>
- * ```
- *
- * In order to use RadioCard outside a RadioCardGroup, you need to pass the `isChecked` and `onChange` props.
- *
- * ```tsx
- * <RadioCard isChecked={true} onChange={(e) => console.log(e.target.value)}>
- *  Content
- * </RadioCard>
- * ```
- *
- * In order to use RadioCard, you typically want to place these components in a group with several other RadioCards.
+ * RadioCard components must be wrapped in a RadioCardGroup component.
  *
+ * @example
  * ```tsx
  * <RadioCardGroup name="ticket">
  *   <RadioCard value="economy">Economy</RadioCard>
@@ -37,65 +22,84 @@ import React, { useId } from "react";
  * </RadioCardGroup>
  * ```
  *
- * You can add styling to each card seperately, or you can add a common style to the group.
- * Group styling overrides single styling if both are present.
+ * RadioCard inherits props from Box.
  *
- * This example shows how to style all cards in a group:
- *
- * ```tsx
- * <RadioCardGroup name="ticket" variant="floating" padding={3}>
- *  <RadioCard value="economy">Economy</RadioCard>
- *  <RadioCard value="business">Business</RadioCard>
- *  <RadioCard value="first-class">First Class</RadioCard>
- * </RadioCardGroup>
- * ```
+ * Be advised to not use the `name` prop on the RadioCard component.
  *
- * This example shows how to style a single card:
+ * Changing the semantics may also cause the component to not work as expected.
  *
- * ```tsx
- * <RadioCard variant="floating" padding={3}>
- *  Economy
- * </RadioCard>
- * ```
+ * @see Docs https://spor.vy.no/components/radiocard
  */
 
-export type RadioCardProps = UseRadioProps &
-  BoxProps & {
-    children: React.ReactNode;
-    /** Defaults to "base" */
-    variant?: "floating" | "base";
-    /** Needs to be defined if RadioCard is used outside RadioCardGroup */
-    isChecked?: boolean;
-    /** Needs to be defined if RadioCard is used outside RadioCardGroup */
-    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-  };
+export type RadioCardProps = BoxProps & {
+  value: string;
+  children: React.ReactNode;
+  isDisabled?: boolean;
+};
+
+export const RadioCard = forwardRef(
+  ({ children, value = "base", isDisabled, ...props }: RadioCardProps, ref) => {
+    const context = useContext(RadioCardGroupContext);
+
+    if (!context) {
+      throw new Error(
+        "RadioCard components must be wrapped in a RadioCardGroup component",
+      );
+    }
+
+    const { name, selectedValue, onChange, variant } = context;
 
-export const RadioCard = forwardRef<RadioCardProps, "div">(
-  ({ children, variant = "base", isChecked, onChange, ...props }, ref) => {
     const styles = useMultiStyleConfig("RadioCard", { variant });
 
-    const id = `radio-card-${useId()}`;
+    const isChecked = selectedValue === value;
+
+    const radioCardId = `radio-card-${useId()}`;
 
-    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-      onChange && onChange(event);
+    useEffect(() => {
+      if (isChecked && typeof ref !== "function" && ref?.current) {
+        ref.current.focus();
+      }
+    }, [isChecked]);
+
+    const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+      if (event.key === "Enter" || event.key === " ") {
+        onChange(value);
+      }
+      if (
+        event.key === "ArrowRight" ||
+        event.key === "ArrowDown" ||
+        event.key === "ArrowLeft" ||
+        event.key === "ArrowUp"
+      ) {
+        const nextRadioCard = event.currentTarget
+          .nextElementSibling as HTMLElement;
+        nextRadioCard.focus();
+      }
     };
 
     return (
-      <Box as="label" htmlFor={id} aria-label={String(children)} ref={ref}>
+      <Box as="label" aria-label={String(children)} onKeyDown={handleKeyDown}>
         <chakra.input
           type="radio"
-          id={id}
+          id={radioCardId}
+          ref={ref}
+          value={value}
+          name={name}
           checked={isChecked}
-          onChange={handleChange}
-          {...props}
-          sx={styles.radioInput}
+          onChange={() => onChange(value)}
+          disabled={isDisabled}
+          __css={styles.radioInput}
         />
         <Box
           {...props}
-          __css={{
-            ...styles.container,
-            ...(isChecked && styles.checked),
-          }}
+          tabIndex={0}
+          ref={ref}
+          role="radio"
+          aria-checked={isChecked}
+          aria-labelledby={radioCardId}
+          __css={{ ...styles.container, ...(isChecked && styles.checked) }}
+          data-checked={isChecked}
+          data-disabled={isDisabled}
         >
           {children}
         </Box>

package/src/layout/RadioCardGroup.tsx

@@ -1,120 +1,76 @@
-import {
-  useRadioGroup,
-  RadioGroupProps,
-  StackDirection,
-  Stack,
-} from "@chakra-ui/react";
-import React from "react";
-import { RadioCard, RadioCardProps } from "./RadioCard";
-
-type RadioCardGroupProps = RadioGroupProps & {
-  children: React.ReactNode;
-  props?: RadioGroupProps;
-  /** Defaults to "row" */
-  direction?: StackDirection;
-  /** Defaults to "base" */
-  variant?: string;
-  /** The name of the radio group */
-  name?: string;
-  /** The default value of the radio group */
-  defaultValue?: string;
-  /** The callback function to be called when the radio group value changes */
-  onChange?: (value: string) => void;
-};
+import { BoxProps, Stack } from "@chakra-ui/react";
+import React, { useState } from "react";
+import { FormLabel } from "../input";
+import { RadioCard } from "./RadioCard";
 
 /**
- * Radio card groups are used to group several radio cards together.
- *
- * You can and should pass the common `name` prop to the `RadioGroup`, instead of to each `Radio` component.
- *
- * ```tsx
- * <RadioCardGroup name="ticket">
- *   <RadioCard>Economy</RadioCard>
- *   <RadioCard>Business</RadioCard>
- *   <RadioCard>First Class</RadioCard>
- * </RadioCardGroup>
- * ```
+ * RadioCardGroupContext is used to pass down the state and handlers to the RadioCard components.
  *
- * By default, radio cards show up horizontally. If you want them to show up vertically, please specify the `direction="column"` prop.
- *
- * ```tsx
- * <RadioCardGroup name="ticket" direction="column">
- *   <RadioCard>Economy</RadioCard>
- *   <RadioCard>Business</RadioCard>
- *   <RadioCard>First Class</RadioCard>
- * </RadioCardGroup>
- * ```
- *
- * You can also specify the `defaultValue` prop to set the default value of the radio group.
- *
- * ```tsx
- * <RadioCardGroup name="ticket" defaultValue="Economy">
- *    <RadioCard>Economy</RadioCard>
- *    <RadioCard>Business</RadioCard>
- *    <RadioCard>First Class</RadioCard>
- * </RadioCardGroup>
- * ```
- *
- * Check out RadioCard for more information on how to style the radio cards.
  * @see RadioCard
  */
 
-export const RadioCardGroup = ({
+type RadioGroupContextProps = {
+  name: string;
+  selectedValue: string;
+  onChange: (value: string) => void;
+  variant?: "base" | "floating";
+  defaultValue?: string;
+};
+
+export const RadioCardGroupContext =
+  React.createContext<RadioGroupContextProps | null>(null);
+
+type RadioCardGroupProps = BoxProps & {
+  name: string;
+  children: React.ReactNode;
+  variant?: "base" | "floating";
+  direction?: "row" | "column";
+  groupLabel?: string;
+  defaultValue?: string;
+};
+
+export const RadioCardGroup: React.FC<RadioCardGroupProps> = ({
   children,
   name,
+  variant = "base",
   direction = "row",
-  onChange,
+  groupLabel,
   defaultValue,
-  variant = "base",
   ...props
 }: RadioCardGroupProps) => {
-  const { getRootProps, getRadioProps } = useRadioGroup({
-    defaultValue: defaultValue,
-    name: name,
-    onChange: onChange,
-    ...props,
-  });
+  const [selectedValue, setSelectedValue] = useState<string>(
+    defaultValue || "",
+  );
 
-  const rootProps = getRootProps();
+  const handleChange = (value: string) => {
+    setSelectedValue(value);
+  };
 
   return (
-    <Stack direction={direction} {...rootProps}>
-      {recursiveMap(children, (child: React.ReactElement) => {
-        if (child.type === RadioCard) {
-          const radioProps = getRadioProps({ value: child.props.value });
-          const variantValue = variant as "base" | "floating" | undefined;
-          return React.cloneElement(
-            child as React.ReactElement<RadioCardProps>,
-            {
-              ...radioProps,
-              variant: variantValue,
-              ...props,
-            },
-          );
-        }
-        return child;
-      })}
-    </Stack>
+    <RadioCardGroupContext.Provider
+      value={{
+        name,
+        selectedValue,
+        onChange: handleChange,
+        variant,
+        defaultValue: defaultValue || "",
+      }}
+    >
+      <Stack
+        as="fieldset"
+        direction={direction}
+        aria-labelledby={groupLabel || name}
+        role="radiogroup"
+        tabIndex={0}
+        {...props}
+      >
+        {groupLabel && (
+          <FormLabel as="legend" id={groupLabel}>
+            {groupLabel}
+          </FormLabel>
+        )}
+        {children}
+      </Stack>
+    </RadioCardGroupContext.Provider>
   );
 };
-
-function recursiveMap(
-  children: React.ReactNode,
-  fn: (child: React.ReactElement) => React.ReactElement,
-): React.ReactNode {
-  return React.Children.map(children, (child) => {
-    // If this child is a React element and has children, recurse
-    if (React.isValidElement(child) && child.props.children) {
-      child = React.cloneElement(child as React.ReactElement<any>, {
-        children: recursiveMap(child.props.children, fn),
-      });
-    }
-
-    // Apply the function to the child (if it's a React element)
-    if (React.isValidElement(child)) {
-      return fn(child);
-    }
-
-    return child;
-  });
-}

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),
           },
         },
       },

package/src/theme/components/button.ts

@@ -93,26 +93,26 @@ const config = defineStyleConfig({
     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",
     },
   },

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

@@ -15,9 +15,10 @@ const config = helpers.defineMultiStyleConfig({
     container: {
       display: "inline-flex",
       alignItems: "center",
-      fontSize: "16px",
+      fontSize: "xs",
       cursor: "pointer",
       transitionProperty: "all",
+      borderRadius: "xl",
       transitionDuration: "fast",
       _checked: {
         outlineColor: "transparent",
@@ -117,42 +118,38 @@ const config = helpers.defineMultiStyleConfig({
   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,
       },
     },
   },

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

@@ -1,6 +1,7 @@
 import { defineStyleConfig } from "@chakra-ui/react";
 import { cssVar, mode } from "@chakra-ui/theme-tools";
 import { focusVisibleStyles } from "../utils/focus-utils";
+import { ghostBackground } from "../utils/ghost-utils";
 
 const $size = cssVar("close-button-size");
 
@@ -16,27 +17,27 @@ const config = defineStyleConfig({
     fontWeight: "normal",
     ...focusVisibleStyles(props),
     _hover: {
-      backgroundColor: mode("seaMist", "whiteAlpha.100")(props),
+      ...ghostBackground("hover", props),
       _disabled: {
         color: "dimGrey",
       },
     },
     _active: {
-      backgroundColor: mode("mint", "whiteAlpha.200")(props),
+      ...ghostBackground("active", props),
     },
   }),
   sizes: {
     lg: {
       [$size.variable]: "40px",
-      fontSize: "16px",
+      fontSize: "xs",
     },
     md: {
       [$size.variable]: "32px",
-      fontSize: "12px",
+      fontSize: "0.75rem",
     },
     sm: {
       [$size.variable]: "24px",
-      fontSize: "10px",
+      fontSize: "0.625rem",
     },
   },
   defaultProps: {