@vygruppen/spor-react 4.0.2 → 4.1.0

package/dist/{chunk-MGJQOEU2.mjs → chunk-FPWAXD72.mjs}

@@ -1,4 +1,4 @@
-import { forwardRef, Divider as Divider$1, Stack as Stack$1, Accordion as Accordion$1, Skeleton as Skeleton$1, useButtonGroup, Button as Button$1, Box, Center, ButtonGroup as ButtonGroup$1, IconButton as IconButton$1, useMultiStyleConfig, useStyleConfig, Badge as Badge$1, Code as Code$1, Text, PopoverAnchor, FormLabel, Flex, useFormControlContext, PopoverContent, PopoverArrow, PopoverBody, FocusLock, Popover, InputGroup, PopoverTrigger, Portal, chakra, Checkbox as Checkbox$1, useCheckbox, FormControl as FormControl$1, InputLeftElement, Input as Input$1, InputRightElement, Select, useDisclosure, useControllableState, Radio as Radio$1, RadioGroup as RadioGroup$1, Switch as Switch$1, Textarea as Textarea$1, Link, ModalHeader as ModalHeader$1, useModalContext, DrawerContent as DrawerContent$1, Tabs as Tabs$1, Table as Table$1, defineStyleConfig as defineStyleConfig$1, createMultiStyleConfigHelpers as createMultiStyleConfigHelpers$1, AccordionItem, AccordionButton, AccordionIcon, AccordionPanel, SkeletonCircle as SkeletonCircle$1, SkeletonText as SkeletonText$1, Breadcrumb as Breadcrumb$1, BreadcrumbItem as BreadcrumbItem$1, BreadcrumbLink as BreadcrumbLink$1, Heading as Heading$1, CheckboxGroup as CheckboxGroup$1, List, ListItem, useColorModeValue, useFormControlProps, useFormControl, Drawer as Drawer$1, DrawerOverlay, DrawerCloseButton, DrawerBody, usePopoverContext, DarkMode, PopoverCloseButton, ChakraProvider, HStack, useToast as useToast$1, useInterval } from '@chakra-ui/react';
+import { forwardRef, Divider as Divider$1, Stack as Stack$1, Accordion as Accordion$1, Skeleton as Skeleton$1, useButtonGroup, Button as Button$1, Box, Center, ButtonGroup as ButtonGroup$1, IconButton as IconButton$1, useMultiStyleConfig, useStyleConfig, Badge as Badge$1, Code as Code$1, Text, PopoverAnchor, FormLabel, Flex, useFormControlContext, PopoverContent, PopoverArrow, PopoverBody, FocusLock, Popover, InputGroup, PopoverTrigger, Portal, chakra, Checkbox as Checkbox$1, useCheckbox, FormControl as FormControl$1, InputLeftElement, Input as Input$1, InputRightElement, Select, useDisclosure, useControllableState, Radio as Radio$1, RadioGroup as RadioGroup$1, Switch as Switch$1, Textarea as Textarea$1, Link, ModalHeader as ModalHeader$1, useModalContext, DrawerContent as DrawerContent$1, Tabs as Tabs$1, Table as Table$1, defineStyleConfig as defineStyleConfig$1, createMultiStyleConfigHelpers as createMultiStyleConfigHelpers$1, AccordionItem, AccordionButton, AccordionIcon, AccordionPanel, useColorMode, SkeletonCircle as SkeletonCircle$1, SkeletonText as SkeletonText$1, Breadcrumb as Breadcrumb$1, BreadcrumbItem as BreadcrumbItem$1, BreadcrumbLink as BreadcrumbLink$1, Heading as Heading$1, CheckboxGroup as CheckboxGroup$1, List, ListItem, useColorModeValue, useFormControlProps, useFormControl, Drawer as Drawer$1, DrawerOverlay, DrawerCloseButton, DrawerBody, usePopoverContext, DarkMode, PopoverCloseButton, ChakraProvider, HStack, useToast as useToast$1, useInterval } from '@chakra-ui/react';
 export { AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, Box, Center, Collapse, Container, DarkMode, DrawerBody, DrawerCloseButton, DrawerFooter, DrawerOverlay, Fade, Flex, FormHelperText, Grid, GridItem, HStack, Image, Img, InputGroup, LightMode, ListItem, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalOverlay, OrderedList, Popover, PopoverAnchor, PopoverArrow, PopoverBody, PopoverCloseButton, PopoverContent, PopoverFooter, PopoverHeader, PopoverTrigger, Portal, ScaleFade, SimpleGrid, Slide, SlideFade, Spacer, Tab, TabList, TabPanel, TabPanels, TableCaption, Tbody, Td, Tfoot, Th, Thead, Tr, UnorderedList, VStack, Wrap, WrapItem, extendTheme, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useTheme, useToken } from '@chakra-ui/react';
 import tokens10__default from '@vygruppen/spor-design-tokens';
 import * as tokens10 from '@vygruppen/spor-design-tokens';
@@ -6,7 +6,7 @@ export { tokens10 as tokens };
 import * as React69 from 'react';
 import React69__default, { createContext, useEffect, forwardRef as forwardRef$1, useRef, useState, useId, Suspense, useMemo, useContext, useCallback } from 'react';
 import { CloseFill30Icon, CloseFill24Icon, CloseFill18Icon, CalendarOutline24Icon, CloseOutline24Icon, SearchOutline24Icon, InformationFill24Icon, InformationFill18Icon, WarningFill24Icon, WarningFill18Icon, ErrorFill24Icon, ErrorFill18Icon, LinkOutOutline24Icon, DropdownRightFill18Icon, DropdownLeftFill18Icon, DropdownDownFill18Icon, DropdownDownFill24Icon, DropdownUpFill24Icon, ArrowRightFill18Icon, DropdownLeftFill24Icon, ArrowLeftOutline24Icon, ArrowRightOutline24Icon, ErrorOutline24Icon, AltTransportOutline24Icon, WarningOutline24Icon, SuccessOutline24Icon, InformationOutline24Icon, TrainFill18Icon, TrainFill24Icon, TrainFill30Icon, ExpressBusFill18Icon, ExpressBusFill24Icon, ExpressBusFill30Icon, BusFill18Icon, BusFill24Icon, BusFill30Icon, FerryFill18Icon, FerryFill24Icon, FerryFill30Icon, SubwayFill18Icon, SubwayFill24Icon, SubwayFill30Icon, TramFill18Icon, TramFill24Icon, TramFill30Icon, AltTransportFill18Icon, AltTransportFill24Icon, AltTransportFill30Icon, WalkFill18Icon, WalkFill24Icon, WalkFill30Icon } from '@vygruppen/spor-icon-react';
-import { inlineLoaderColorData, spinnerColorData, contentLoaderData, fullScreenLoaderWhiteData, inlineLoaderDarkData, spinnerDarkData, fullScreenLoaderBlackData, inlineLoaderLightData, spinnerLightData } from '@vygruppen/spor-loader';
+import { inlineLoaderColorData, spinnerColorData, contentLoaderData, fullScreenLoaderWhiteData, inlineLoaderDarkData, fullScreenLoaderBlackData, inlineLoaderLightData, spinnerLightData, spinnerDarkData } from '@vygruppen/spor-loader';
 import { useLottie } from 'lottie-react';
 import { useDateSegment, useDateField, useDatePicker, I18nProvider, usePopover, DismissButton, Overlay, useOverlayTrigger, useButton, useProgressBar, useCalendar, useDateRangePicker, useDialog, useFilter, useComboBox, useListBox, useOption, useListBoxSection, useSelect, HiddenSelect, useCalendarGrid, useRangeCalendar, useTimeField, useCalendarCell } from 'react-aria';
 import { motion } from 'framer-motion';
@@ -961,7 +961,9 @@ var DarkSpinner = ({
   maxWidth,
   ...props
 }) => {
-  return /* @__PURE__ */ React69__default.createElement(Center, { flexDirection: "column", ...props }, /* @__PURE__ */ React69__default.createElement(Box, { width, maxWidth }, /* @__PURE__ */ React69__default.createElement(ClientOnly, null, () => /* @__PURE__ */ React69__default.createElement(Lottie, { animationData: spinnerDarkData }))), children && /* @__PURE__ */ React69__default.createElement(Box, { marginTop: 3, fontWeight: "bold" }, children));
+  const { colorMode } = useColorMode();
+  const spinnerData = colorMode === "dark" ? spinnerLightData : spinnerDarkData;
+  return /* @__PURE__ */ React69__default.createElement(Center, { flexDirection: "column", ...props }, /* @__PURE__ */ React69__default.createElement(Box, { width, maxWidth }, /* @__PURE__ */ React69__default.createElement(ClientOnly, null, () => /* @__PURE__ */ React69__default.createElement(Lottie, { animationData: spinnerData }))), children && /* @__PURE__ */ React69__default.createElement(Box, { marginTop: 3, fontWeight: "bold" }, children));
 };
 var LightFullScreenLoader = ({
   width,
@@ -1437,7 +1439,11 @@ var texts5 = createTexts({
     en: "Alternative transport"
   }
 });
-var BaseAlert = ({ variant, children, ...boxProps }) => {
+var BaseAlert = ({
+  variant,
+  children,
+  ...boxProps
+}) => {
   const styles3 = useMultiStyleConfig("Alert", { variant });
   return /* @__PURE__ */ React69__default.createElement(Box, { __css: styles3.container, ...boxProps }, children);
 };
@@ -3301,7 +3307,12 @@ var Text4 = forwardRef(
     return /* @__PURE__ */ React69__default.createElement(Text, { ...props, textStyle: variant, ref });
   }
 );
-function CalendarCell({ state: state2, date, currentMonth, variant }) {
+function CalendarCell({
+  state: state2,
+  date,
+  currentMonth,
+  variant
+}) {
   const ref = useRef(null);
   const {
     cellProps,
@@ -3403,7 +3414,11 @@ var weekDays = {
   sv: ["M\xE5", "Ti", "On", "To", "Fr", "L\xF6", "S\xF6"],
   en: ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"]
 };
-function CalendarGrid({ state: state2, variant, offset = {} }) {
+function CalendarGrid({
+  state: state2,
+  variant,
+  offset = {}
+}) {
   const { language } = useTranslation();
   const locale = useCurrentLocale();
   const startDate = state2.visibleRange.start.add(offset);
@@ -3572,7 +3587,11 @@ var texts7 = createTexts({
 });
 
 // src/datepicker/Calendar.tsx
-function Calendar({ showYearNavigation, variant, ...props }) {
+function Calendar({
+  showYearNavigation,
+  variant,
+  ...props
+}) {
   const { t: t2 } = useTranslation();
   const locale = useCurrentLocale();
   const state2 = $131cf43a05231e1e$export$6d095e787d2b5e1f({
@@ -3844,7 +3863,14 @@ function RangeCalendar(props) {
   });
   const ref = useRef(null);
   const { calendarProps, title } = useRangeCalendar(props, state2, ref);
-  return /* @__PURE__ */ React69__default.createElement(Box, { ...calendarProps, ref }, /* @__PURE__ */ React69__default.createElement(CalendarHeader, { state: state2, title }), /* @__PURE__ */ React69__default.createElement(Box, { display: "flex", gap: "8" }, /* @__PURE__ */ React69__default.createElement(CalendarGrid, { variant: props.variant, state: state2 }), /* @__PURE__ */ React69__default.createElement(CalendarGrid, { variant: props.variant, state: state2, offset: { months: 1 } })));
+  return /* @__PURE__ */ React69__default.createElement(Box, { ...calendarProps, ref }, /* @__PURE__ */ React69__default.createElement(CalendarHeader, { state: state2, title }), /* @__PURE__ */ React69__default.createElement(Box, { display: "flex", gap: "8" }, /* @__PURE__ */ React69__default.createElement(CalendarGrid, { variant: props.variant, state: state2 }), /* @__PURE__ */ React69__default.createElement(
+    CalendarGrid,
+    {
+      variant: props.variant,
+      state: state2,
+      offset: { months: 1 }
+    }
+  )));
 }
 
 // src/datepicker/DateRangePicker.tsx
@@ -5044,8 +5070,15 @@ var texts13 = createTexts({
   }
 });
 var PhoneNumberInput = forwardRef(
-  ({ name, value: externalValue, onChange: externalOnChange, ...boxProps }, ref) => {
+  ({
+    label: externalLabel,
+    name,
+    value: externalValue,
+    onChange: externalOnChange,
+    ...boxProps
+  }, ref) => {
     const { t: t2 } = useTranslation();
+    const label = externalLabel ?? t2(texts14.phoneNumber);
     const [value, onChange] = useControllableState({
       value: externalValue,
       onChange: externalOnChange,
@@ -5087,7 +5120,7 @@ var PhoneNumberInput = forwardRef(
       {
         ref,
         type: "tel",
-        label: t2(texts14.phoneNumber),
+        label,
         value: value.nationalNumber,
         name: name ? `${name}-phone-number` : "phone-number",
         onChange: (e) => {
@@ -5111,7 +5144,7 @@ var texts14 = createTexts({
     sv: "Telefonnummer"
   }
 });
-var LazyCountryCodeSelect = React69__default.lazy(() => import('./CountryCodeSelect-WSPQNU6B.mjs'));
+var LazyCountryCodeSelect = React69__default.lazy(() => import('./CountryCodeSelect-FBKDO5JS.mjs'));
 var Radio = forwardRef((props, ref) => {
   return /* @__PURE__ */ React69__default.createElement(Radio$1, { ...props, ref });
 });
@@ -5864,13 +5897,13 @@ var StepperProvider = ({
   activeStep,
   children,
   onClick,
-  colorScheme,
-  numberOfSteps
+  numberOfSteps,
+  variant
 }) => {
   return /* @__PURE__ */ React69__default.createElement(
     StepperContext.Provider,
     {
-      value: { activeStep, onClick, colorScheme, numberOfSteps }
+      value: { activeStep, onClick, numberOfSteps, variant }
     },
     children
   );
@@ -5892,9 +5925,9 @@ var Stepper = ({
   steps,
   activeStep: activeStepAsStringOrNumber,
   title,
-  colorScheme
+  variant
 }) => {
-  const style = useMultiStyleConfig("Stepper", { colorScheme });
+  const style = useMultiStyleConfig("Stepper", { variant });
   const numberOfSteps = steps.length;
   const activeStep = Number(activeStepAsStringOrNumber);
   const { t: t2 } = useTranslation();
@@ -5903,7 +5936,7 @@ var Stepper = ({
     {
       onClick,
       activeStep,
-      colorScheme,
+      variant,
       numberOfSteps
     },
     /* @__PURE__ */ React69__default.createElement(Box, { __css: style.container }, /* @__PURE__ */ React69__default.createElement(Box, { __css: style.innerContainer }, /* @__PURE__ */ React69__default.createElement(HStack, null, activeStep > 1 && /* @__PURE__ */ React69__default.createElement(
@@ -5922,8 +5955,16 @@ var Stepper = ({
         triggerElement: /* @__PURE__ */ React69__default.createElement(Box, { as: "button", __css: style.stepCounter }, t2(texts21.stepsOf(activeStep, numberOfSteps))),
         borderRadius: "xs"
       },
-      steps.map((step, index) => /* @__PURE__ */ React69__default.createElement(StepperStep, { key: step, stepNumber: index + 1 }, 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 }, step))))
+      steps.map((step, index) => /* @__PURE__ */ React69__default.createElement(
+        StepperStep,
+        {
+          key: step,
+          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", "flex"] }, steps.map((step, index) => /* @__PURE__ */ React69__default.createElement(StepperStep, { key: index, stepNumber: index + 1, variant }, step))))
   ));
 };
 var texts21 = createTexts({
@@ -5940,28 +5981,57 @@ var texts21 = createTexts({
     en: "Back"
   }
 });
-var StepperStep = ({ children, stepNumber }) => {
-  const { activeStep, onClick, colorScheme } = useStepper();
-  const variant = getVariant(stepNumber, activeStep);
+var StepperStep = ({
+  children,
+  stepNumber,
+  variant
+}) => {
+  const { activeStep, onClick } = useStepper();
+  const state2 = getState(stepNumber, activeStep);
   const style = useMultiStyleConfig("Stepper", {
-    variant,
-    colorScheme
+    state: state2,
+    variant
   });
+  const adjustedProps = getButtonStylesForState(state2);
   return /* @__PURE__ */ React69__default.createElement(Box, { __css: style.stepContainer }, stepNumber > 1 && /* @__PURE__ */ React69__default.createElement(DropdownRightFill18Icon, { marginX: 5, display: ["none", "block"] }), /* @__PURE__ */ React69__default.createElement(
-    Flex,
+    Button,
     {
-      __css: style.stepButton,
-      alignItems: "center",
-      as: "button",
-      type: "button",
-      disabled: variant === "disabled" || variant === "active",
+      size: "xs",
+      variant: state2 === "active" ? "primary" : state2 === "completed" ? "additional" : "ghost",
+      ...adjustedProps,
       onClick: () => onClick(stepNumber)
     },
-    /* @__PURE__ */ React69__default.createElement(Box, { __css: style.stepNumber }, stepNumber),
-    /* @__PURE__ */ React69__default.createElement(Box, { __css: style.stepTitle }, children)
+    children
   ));
 };
-var getVariant = (stepNumber, activeStep) => {
+var getButtonStylesForState = (state2) => {
+  switch (state2) {
+    case "active":
+      return {
+        _hover: {},
+        boxShadow: "none",
+        _focus: {},
+        _active: {},
+        cursor: "auto"
+      };
+    case "completed":
+      return {
+        boxShadow: "none"
+      };
+    case "disabled":
+      return {
+        _disabled: {},
+        _hover: {},
+        _focus: {},
+        _active: {},
+        color: "dimGrey",
+        cursor: "auto"
+      };
+    default:
+      return {};
+  }
+};
+var getState = (stepNumber, activeStep) => {
   if (stepNumber < activeStep) {
     return "completed";
   }
@@ -11454,30 +11524,11 @@ var config6 = defineStyleConfig$1({
     }
   },
   variants: {
-    control: (props) => ({
-      backgroundColor: mode("darkTeal", "mint")(props),
-      color: mode("white", "darkTeal")(props),
-      ...focusVisible({
-        focus: {
-          boxShadow: `inset 0 0 0 4px ${mode(
-            colors.darkTeal,
-            colors.seaMist
-          )(props)}, inset 0 0 0 6px currentColor`
-        },
-        notFocus: { boxShadow: "none" }
-      }),
-      _hover: {
-        backgroundColor: mode("night", "coralGreen")(props)
-      },
-      _active: {
-        backgroundColor: mode("pine", "white")(props)
-      }
-    }),
     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: "primaryGreen",
-      color: "white",
+      backgroundColor: mode("primaryGreen", "coralGreen")(props),
+      color: mode("white", "darkTeal")(props),
       ...focusVisible({
         focus: {
           boxShadow: `inset 0 0 0 2px ${mode(
@@ -11491,28 +11542,28 @@ var config6 = defineStyleConfig$1({
         notFocus: { boxShadow: "none" }
       }),
       _hover: {
-        backgroundColor: "pine"
+        backgroundColor: mode("darkTeal", "blueGreen")(props)
       },
       _active: {
-        backgroundColor: "azure"
+        backgroundColor: mode("greenHaze", "seaMist")(props)
       }
     }),
     secondary: (props) => ({
       // FIXME: Update to use global defined background color for darkMode whenever it is available instead of alpha
-      backgroundColor: mode("seaMist", "whiteAlpha.100")(props),
+      backgroundColor: mode("seaMist", "primaryGreen")(props),
       color: mode("darkTeal", "white")(props),
       // order is important here for now while we do not have global defined background color for darkMode
       _hover: {
-        backgroundColor: mode("coralGreen", "whiteAlpha.200")(props)
+        backgroundColor: mode("coralGreen", "greenHaze")(props)
       },
       ...focusVisible({
         focus: {
           boxShadow: `inset 0 0 0 2px ${mode(
             colors.greenHaze,
-            colors.azure
+            colors.primaryGreen
           )(props)}, inset 0 0 0 4px ${mode(
             colors.white,
-            colors.blackAlpha[300]
+            colors.darkTeal
           )(props)}`,
           _hover: {
             boxShadow: `inset 0 0 0 2px ${mode(
@@ -11529,7 +11580,7 @@ var config6 = defineStyleConfig$1({
         }
       }),
       _active: {
-        backgroundColor: mode("mint", "whiteAlpha.300")(props),
+        backgroundColor: mode("mint", "darkTeal")(props),
         boxShadow: `inset 0 0 0 2px ${mode(
           colors.greenHaze,
           colors.azure
@@ -11548,7 +11599,7 @@ var config6 = defineStyleConfig$1({
         }
       }
     }),
-    additional: (props) => ({
+    tertiary: (props) => ({
       backgroundColor: "transparent",
       color: mode("darkGrey", "white")(props),
       fontWeight: "normal",
@@ -11560,7 +11611,7 @@ var config6 = defineStyleConfig$1({
         focus: {
           boxShadow: getBoxShadowString({
             borderWidth: 2,
-            borderColor: "greenHaze"
+            borderColor: "azure"
           })
         },
         notFocus: {
@@ -11597,13 +11648,13 @@ var config6 = defineStyleConfig$1({
         }
       }),
       _hover: {
-        backgroundColor: mode("seaMist", "pine")(props),
+        backgroundColor: mode("seaMist", "whiteAlpha.200")(props),
         _disabled: {
           color: "blackAlpha.300"
         }
       },
       _active: {
-        backgroundColor: mode("mint", "whiteAlpha.200")(props)
+        backgroundColor: mode("mint", "whiteAlpha.100")(props)
       }
     }),
     floating: (props) => ({
@@ -11613,7 +11664,7 @@ var config6 = defineStyleConfig$1({
         baseShadow: "sm"
       }),
       _active: {
-        backgroundColor: mode("mint", "whiteAlpha.300")(props)
+        backgroundColor: mode("mint", "whiteAlpha.400")(props)
       },
       _hover: {
         backgroundColor: mode("white", "whiteAlpha.200")(props),
@@ -11740,6 +11791,11 @@ var getColorSchemeBaseProps = (props) => {
         backgroundColor: "seaMist"
       };
     }
+    case "red": {
+      return {
+        backgroundColor: "pink"
+      };
+    }
     default:
       return {
         backgroundColor: ((_a6 = colors[colorScheme]) == null ? void 0 : _a6[100]) ?? "platinum"
@@ -12168,7 +12224,9 @@ var config11 = defineStyleConfig$1({
     ...focusVisible({
       focus: {
         outline: "none",
-        boxShadow: getBoxShadowString({ borderColor: mode("greenHaze", "azure")(props) }),
+        boxShadow: getBoxShadowString({
+          borderColor: mode("greenHaze", "azure")(props)
+        }),
         outlineOffset: "2px"
       },
       notFocus: {
@@ -12800,7 +12858,10 @@ var config15 = helpers8.defineMultiStyleConfig({
         },
         _hover: {
           backgroundColor: mode("white", "transparent")(props),
-          boxShadow: mode(`inset 0 0 0 2px ${props.theme.colors.darkGrey}`, `inset 0 0 0 2px ${props.theme.colors.white}`)(props),
+          boxShadow: mode(
+            `inset 0 0 0 2px ${props.theme.colors.darkGrey}`,
+            `inset 0 0 0 2px ${props.theme.colors.white}`
+          )(props),
           color: mode("darkGrey", "white")(props)
         },
         ...focusVisible({
@@ -13350,7 +13411,7 @@ var config20 = helpers12.defineMultiStyleConfig({
     size: "md"
   },
   variants: {
-    "walk": (props) => ({
+    walk: (props) => ({
       iconContainer: {
         backgroundColor: mode("white", "transparent")(props),
         boxShadow: mode(
@@ -13401,7 +13462,9 @@ var config21 = helpers13.defineMultiStyleConfig({
           })
         },
         notFocus: {
-          boxShadow: getBoxShadowString({ borderColor: mode("darkGrey", "white")(props) })
+          boxShadow: getBoxShadowString({
+            borderColor: mode("darkGrey", "white")(props)
+          })
         }
       }),
       _disabled: {
@@ -14167,7 +14230,6 @@ var helpers21 = createMultiStyleConfigHelpers$1(parts13.keys);
 var config31 = helpers21.defineMultiStyleConfig({
   baseStyle: (props) => ({
     root: {
-      backgroundColor: getRootBackgroundColor(props),
       display: "flex",
       alignItems: "center",
       justifyContent: ["space-between", "center"],
@@ -14185,8 +14247,7 @@ var config31 = helpers21.defineMultiStyleConfig({
       overflow: "hidden",
       display: ["flex", "none"],
       alignItems: "center",
-      justifyContent: "space-between",
-      color: getColor5(props)
+      justifyContent: "space-between"
     },
     backButton: {
       borderRadius: "xs",
@@ -14203,170 +14264,32 @@ var config31 = helpers21.defineMultiStyleConfig({
       ml: 2,
       textAlign: "right"
     },
-    stepCounter: {
-      whiteSpace: "nowrap",
-      textDecoration: "underline"
-    },
     stepContainer: {
       display: "flex",
       alignItems: "center"
     },
-    stepButton: {
-      color: "inherit",
-      display: "flex",
-      alignItems: "center",
-      padding: 1,
-      borderRadius: "xs"
-    },
-    stepNumber: {
-      borderRadius: "round",
-      border: "sm",
-      borderColor: "currentColor",
-      width: 4,
-      height: 4,
-      mr: 1,
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center",
-      fontSize: ["mobile.xs", "desktop.xs"]
-    },
     stepTitle: {
       textStyle: "sm",
       whiteSpace: "nowrap"
     }
   }),
   variants: {
-    completed: (props) => ({
-      stepContainer: {
-        color: getColor5(props)
-      },
-      stepButton: {
-        _hover: getHoverStyles(props),
-        _focus: getFocusStyles(props),
-        "&:focus:not(:focus-visible)": {
-          boxShadow: "none"
-        },
-        _focusVisible: getFocusStyles(props),
-        _active: getActiveStyles(props)
-      }
-    }),
-    active: (props) => ({
-      stepContainer: {
-        color: getColor5(props)
-      },
-      stepButton: {
-        pointerEvents: "none"
-      },
-      stepNumber: getStepNumberStyles(props),
-      stepTitle: {
-        fontWeight: "bold"
+    base: (props) => ({
+      root: {
+        backgroundColor: "transparent"
       }
     }),
-    disabled: (props) => ({
-      stepContainer: {
-        color: getDisabledColor(props)
-      },
-      stepButton: {
-        pointerEvents: "none"
+    accent: (props) => ({
+      root: {
+        backgroundColor: mode("seaMist", "pine")(props)
       }
     })
   },
   defaultProps: {
-    colorScheme: "green"
+    variant: "base"
   }
 });
 var stepper_default = config31;
-var getRootBackgroundColor = (props) => {
-  switch (props.colorScheme) {
-    case "light":
-      return "white";
-    case "dark":
-      return "darkTeal";
-    case "green":
-    default:
-      return "seaMist";
-  }
-};
-var getColor5 = (props) => {
-  switch (props.colorScheme) {
-    case "light":
-      return mode("darkGrey", "white")(props);
-    case "dark":
-      return "white";
-    case "green":
-    default:
-      return mode("darkTeal", "white")(props);
-  }
-};
-var getStepNumberStyles = (props) => {
-  switch (props.colorScheme) {
-    case "dark":
-      return {
-        backgroundColor: "white",
-        color: "darkTeal"
-      };
-    case "light":
-    case "green":
-    default:
-      return {
-        backgroundColor: mode("darkTeal", "white")(props),
-        color: mode("white", "darkTeal")(props)
-      };
-  }
-};
-var getDisabledColor = (props) => {
-  switch (props.colorScheme) {
-    case "dark":
-      return "whiteAlpha.400";
-    case "green":
-      return "dimGrey";
-    case "light":
-    default:
-      return "osloGrey";
-  }
-};
-var getHoverStyles = (props) => {
-  switch (props.colorScheme) {
-    case "dark":
-      return { backgroundColor: "pine" };
-    case "green":
-      return {
-        backgroundColor: mode("coralGreen", "primaryGreen")(props)
-      };
-    case "light":
-    default:
-      return {
-        backgroundColor: mode("seaMist", "primaryGreen")(props)
-      };
-  }
-};
-var getFocusStyles = (props) => {
-  switch (props.colorScheme) {
-    case "dark":
-      return {
-        outline: "none",
-        boxShadow: `inset 0 0 0 2px ${props.theme.colors.white}`
-      };
-    case "light":
-    case "green":
-    default:
-      return {
-        outline: "none",
-        boxShadow: `inset 0 0 0 2px ${props.theme.colors.greenHaze}`
-      };
-  }
-};
-var getActiveStyles = (props) => {
-  switch (props.colorScheme) {
-    case "light":
-      return { backgroundColor: "mint" };
-    case "dark":
-      return { backgroundColor: "celadon" };
-    case "green":
-    default:
-      return { color: "azure", backgroundColor: "transparent" };
-  }
-};
 var $width2 = cssVar$1("switch-track-width");
 var $height3 = cssVar$1("switch-track-height");
 var $diff2 = cssVar$1("switch-track-diff");
@@ -14975,7 +14898,10 @@ var getTabColorSchemeHoverProps = (props) => {
       };
     case "base":
       return {
-        boxShadow: mode(`inset 0 0 0 2px ${props.theme.colors.darkGrey}`, `inset 0 0 0 2px ${props.theme.colors.white}`)(props),
+        boxShadow: mode(
+          `inset 0 0 0 2px ${props.theme.colors.darkGrey}`,
+          `inset 0 0 0 2px ${props.theme.colors.white}`
+        )(props),
         color: mode("darkGrey", "white")(props)
       };
     case "accent":
@@ -15074,7 +15000,10 @@ var getTablistColorSchemeProps = (props) => {
       return {
         backgroundColor: mode("white", "transparent")(props),
         color: "darkGrey",
-        boxShadow: mode(`inset 0 0 0 1px ${props.theme.colors.blackAlpha["400"]}`, `inset 0 0 0 1px ${props.theme.colors.whiteAlpha["400"]}`)(props)
+        boxShadow: mode(
+          `inset 0 0 0 1px ${props.theme.colors.blackAlpha["400"]}`,
+          `inset 0 0 0 1px ${props.theme.colors.whiteAlpha["400"]}`
+        )(props)
       };
     case "accent":
       return {