@vygruppen/spor-react 7.0.0 → 7.1.0

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @vygruppen/spor-react@7.0.0 build
+> @vygruppen/spor-react@7.1.0 build
 > tsup src/index.tsx --dts --treeshake --format cjs,esm
 
 CLI Building entry: src/index.tsx
@@ -8,15 +8,15 @@
 CLI Target: node16
 CJS Build start
 ESM Build start
-"Collapse" is imported from external module "@chakra-ui/react" but never used in "dist/chunk-CYU6YFQK.mjs".
 "Collapse" is imported from external module "@chakra-ui/react" but never used in "dist/index.js".
+"Collapse" is imported from external module "@chakra-ui/react" but never used in "dist/chunk-UQDHT6S5.mjs".
 DTS Build start
+CJS dist/index.js 494.15 KB
+CJS ⚡️ Build success in 2222ms
 ESM dist/index.mjs                      2.16 KB
-ESM dist/CountryCodeSelect-OK6RZ6AY.mjs 1.19 KB
-ESM dist/chunk-CYU6YFQK.mjs             385.72 KB
-ESM ⚡️ Build success in 2175ms
-CJS dist/index.js 492.77 KB
-CJS ⚡️ Build success in 2175ms
-DTS ⚡️ Build success in 10809ms
-DTS dist/index.d.ts  262.80 KB
-DTS dist/index.d.mts 262.80 KB
+ESM dist/CountryCodeSelect-NMBC7YLP.mjs 1.19 KB
+ESM dist/chunk-UQDHT6S5.mjs             386.88 KB
+ESM ⚡️ Build success in 2223ms
+DTS ⚡️ Build success in 11100ms
+DTS dist/index.d.ts  264.83 KB
+DTS dist/index.d.mts 264.83 KB

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @vygruppen/spor-react
 
+## 7.1.0
+
+### Minor Changes
+
+- cd07ee5: Stepper: Redesign and re-implement the Stepper component.
+
+  This change also introduces a new prop – onBackButtonClick – which is called whenever the back button is clicked on smaller screen. It receives a boolean argument outlining whether or not the current step is the first one or not. If you don't pass this prop, the back button will be hidden on the first step.
+
+## 7.0.1
+
+### Patch Changes
+
+- 1e960e1: Button, FAB: Tweak disabled state
+- a7590c8: ProgressIndicator: Change colors of inactive dots
+- 0ccf0c5: Stepper: Change the breakpoint for when the stepper changes from one design to another
+
 ## 7.0.0
 
 ### Major Changes

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

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

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

@@ -1,11 +1,11 @@
 import tokens10__default from '@vygruppen/spor-design-tokens';
 import * as tokens10 from '@vygruppen/spor-design-tokens';
 export { tokens10 as tokens };
-import { forwardRef, Divider as Divider$1, Stack as Stack$1, Accordion as Accordion$1, Skeleton as Skeleton$1, useButtonGroup, useStyleConfig, Box, Center, Flex, ButtonGroup as ButtonGroup$1, IconButton as IconButton$1, useMultiStyleConfig, Badge as Badge$1, Code as Code$1, Text, PopoverAnchor, FormLabel, 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, Button as Button$1, 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, useColorModeValue, Breadcrumb as Breadcrumb$1, BreadcrumbItem as BreadcrumbItem$1, BreadcrumbLink as BreadcrumbLink$1, Heading as Heading$1, CheckboxGroup as CheckboxGroup$1, List, ListItem, 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, useStyleConfig, Box, Center, Flex, ButtonGroup as ButtonGroup$1, IconButton as IconButton$1, useMultiStyleConfig, Badge as Badge$1, Code as Code$1, Text, PopoverAnchor, FormLabel, 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, Button as Button$1, 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, useColorModeValue, Breadcrumb as Breadcrumb$1, BreadcrumbItem as BreadcrumbItem$1, BreadcrumbLink as BreadcrumbLink$1, Heading as Heading$1, CheckboxGroup as CheckboxGroup$1, List, ListItem, useFormControlProps, useFormControl, Drawer as Drawer$1, DrawerOverlay, DrawerCloseButton, DrawerBody, usePopoverContext, DarkMode, PopoverCloseButton, ChakraProvider, useToast as useToast$1, useInterval } from '@chakra-ui/react';
 export { AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, Box, Center, 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, defineStyleConfig, extendTheme, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useTheme, useToken } from '@chakra-ui/react';
 import * as React69 from 'react';
 import React69__default, { createContext, useEffect, forwardRef as forwardRef$1, useRef, useState, useId, Suspense, useContext, useCallback, useMemo, useLayoutEffect } 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 { CloseFill30Icon, CloseFill24Icon, CloseFill18Icon, CalendarOutline24Icon, CloseOutline24Icon, SearchOutline24Icon, InformationFill24Icon, InformationFill18Icon, WarningFill24Icon, WarningFill18Icon, ErrorFill24Icon, ErrorFill18Icon, LinkOutOutline24Icon, DropdownRightFill18Icon, DropdownLeftFill18Icon, DropdownDownFill18Icon, DropdownDownFill24Icon, DropdownUpFill24Icon, ArrowRightFill18Icon, ArrowLeftFill24Icon, 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, 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';
@@ -3417,7 +3417,7 @@ var texts14 = createTexts({
     sv: "Telefonnummer"
   }
 });
-var LazyCountryCodeSelect = React69__default.lazy(() => import('./CountryCodeSelect-OK6RZ6AY.mjs'));
+var LazyCountryCodeSelect = React69__default.lazy(() => import('./CountryCodeSelect-NMBC7YLP.mjs'));
 var Radio = forwardRef((props, ref) => {
   return /* @__PURE__ */ React69__default.createElement(Radio$1, { ...props, ref });
 });
@@ -4268,16 +4268,22 @@ var useStepper = () => {
 var Stepper = ({
   onClick = () => {
   },
+  onBackButtonClick,
   steps,
   activeStep: activeStepAsStringOrNumber,
   title,
-  variant
+  heading,
+  headingLevel,
+  variant,
+  isDisabled
 }) => {
   const style = useMultiStyleConfig("Stepper", { variant });
   const numberOfSteps = steps.length;
   const activeStep = Number(activeStepAsStringOrNumber);
   const { t: t2 } = useTranslation();
-  return /* @__PURE__ */ React69__default.createElement(Box, { __css: style.root }, /* @__PURE__ */ React69__default.createElement(
+  const hideBackButtonOnFirstStep = activeStep === 1 && !onBackButtonClick;
+  const shownHeading = heading || title;
+  return /* @__PURE__ */ React69__default.createElement(Box, { sx: style.root }, /* @__PURE__ */ React69__default.createElement(
     StepperProvider,
     {
       onClick,
@@ -4285,40 +4291,51 @@ var Stepper = ({
       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(
-      IconButton,
-      {
-        "aria-label": t2(texts22.back),
-        icon: /* @__PURE__ */ React69__default.createElement(DropdownLeftFill24Icon, null),
-        variant: "ghost",
-        size: "sm",
-        onClick: () => onClick(activeStep - 1),
-        __css: style.backButton
-      }
-    ), /* @__PURE__ */ React69__default.createElement(
-      SimplePopover,
+    /* @__PURE__ */ React69__default.createElement(Box, { sx: style.container }, /* @__PURE__ */ React69__default.createElement(Box, { sx: style.innerContainer }, /* @__PURE__ */ React69__default.createElement(
+      Flex,
       {
-        triggerElement: /* @__PURE__ */ React69__default.createElement(Box, { as: "button", __css: style.stepCounter }, t2(texts22.stepsOf(activeStep, numberOfSteps))),
-        borderRadius: "xs"
+        justifyContent: "space-between",
+        alignItems: "center",
+        gap: 2,
+        flex: 1
       },
-      steps.map((step, index) => /* @__PURE__ */ React69__default.createElement(
-        StepperStep,
+      /* @__PURE__ */ React69__default.createElement(
+        IconButton,
         {
-          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))))
+          "aria-label": t2(texts22.back),
+          icon: /* @__PURE__ */ React69__default.createElement(ArrowLeftFill24Icon, null),
+          variant: "ghost",
+          size: "sm",
+          visibility: hideBackButtonOnFirstStep ? "hidden" : "visible",
+          onClick: () => {
+            if (onBackButtonClick) {
+              onBackButtonClick(activeStep === 1);
+            }
+            onClick(activeStep - 1);
+          }
+        }
+      ),
+      shownHeading && /* @__PURE__ */ React69__default.createElement(Text4, { flex: 1, variant: "sm", as: headingLevel, sx: style.title }, shownHeading),
+      /* @__PURE__ */ React69__default.createElement(Box, { sx: style.stepCounter }, t2(texts22.stepsOf(activeStep, numberOfSteps)))
+    )), /* @__PURE__ */ React69__default.createElement(Flex, { justifyContent: "center", display: ["none", null, "flex"] }, steps.map((step, index) => /* @__PURE__ */ React69__default.createElement(
+      StepperStep,
+      {
+        key: index,
+        stepNumber: index + 1,
+        variant,
+        "aria-current": index + 1 === activeStep ? "step" : void 0,
+        isDisabled
+      },
+      step
+    ))))
   ));
 };
 var texts22 = createTexts({
   stepsOf: (activeStep, numberOfSteps) => ({
-    nb: `Steg ${activeStep} av ${numberOfSteps}`,
-    nn: `Steg ${activeStep} av ${numberOfSteps}`,
-    sv: `Steg ${activeStep} av ${numberOfSteps}`,
-    en: `Step ${activeStep} of ${numberOfSteps}`
+    nb: `Steg ${activeStep}/${numberOfSteps}`,
+    nn: `Steg ${activeStep}/${numberOfSteps}`,
+    sv: `Steg ${activeStep}/${numberOfSteps}`,
+    en: `Step ${activeStep}/${numberOfSteps}`
   }),
   back: {
     nb: "Tilbake",
@@ -4330,7 +4347,8 @@ var texts22 = createTexts({
 var StepperStep = ({
   children,
   stepNumber,
-  variant
+  variant,
+  isDisabled: isDisabledOverride
 }) => {
   const { activeStep, onClick } = useStepper();
   const state2 = getState(stepNumber, activeStep);
@@ -4338,45 +4356,42 @@ var StepperStep = ({
     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(
+  const disabledTextColor = useColorModeValue(
+    "blackAlpha.400",
+    "whiteAlpha.400"
+  );
+  const iconColor = useColorModeValue("blackAlpha.200", "whiteAlpha.200");
+  const isDisabled = state2 !== "active" && isDisabledOverride || state2 === "disabled";
+  return /* @__PURE__ */ React69__default.createElement(Box, { sx: style.stepContainer }, stepNumber > 1 && /* @__PURE__ */ React69__default.createElement(
+    DropdownRightFill18Icon,
+    {
+      marginX: 5,
+      display: ["none", null, "block"],
+      color: iconColor
+    }
+  ), isDisabled ? /* @__PURE__ */ React69__default.createElement(
+    Text4,
+    {
+      variant: "xs",
+      fontSize: "16px",
+      color: disabledTextColor,
+      cursor: "default",
+      paddingX: 2
+    },
+    children
+  ) : /* @__PURE__ */ React69__default.createElement(
     Button,
     {
       size: "xs",
-      variant: state2 === "active" ? "primary" : state2 === "completed" ? "tertiary" : "ghost",
-      ...adjustedProps,
-      onClick: () => onClick(stepNumber)
+      variant: state2 === "active" ? "primary" : "ghost",
+      onClick: state2 === "completed" ? () => onClick(stepNumber) : void 0,
+      pointerEvents: state2 === "active" ? "none" : "auto",
+      tabIndex: state2 === "active" ? -1 : void 0,
+      sx: style.stepButton
     },
     children
   ));
 };
-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";
@@ -10095,12 +10110,12 @@ var config6 = defineStyleConfig$1({
     _disabled: {
       cursor: "not-allowed",
       boxShadow: "none",
-      backgroundColor: "silver",
-      color: "dimGrey"
+      backgroundColor: mode("blackAlpha.100", "whiteAlpha.100")(props),
+      color: mode("blackAlpha.400", "whiteAlpha.400")(props)
     },
     _hover: {
       _disabled: {
-        background: "silver"
+        background: mode("blackAlpha.100", "whiteAlpha.100")(props)
       }
     }
   }),
@@ -11240,12 +11255,16 @@ var config15 = helpers8.defineMultiStyleConfig({
       position: "fixed",
       ...getPositionProps(props),
       _disabled: {
-        backgroundColor: "whiteAlpha.400",
-        color: "white"
+        backgroundColor: mode("blackAlpha.100", "whiteAlpha.100")(props),
+        color: mode("blackAlpha.400", "whiteAlpha.400")(props)
       },
       ...focusVisibleStyles(props),
       _hover: {
-        backgroundColor: "seaMist"
+        backgroundColor: "seaMist",
+        _disabled: {
+          backgroundColor: mode("blackAlpha.100", "whiteAlpha.100")(props),
+          color: mode("blackAlpha.400", "whiteAlpha.400")(props)
+        }
       },
       zIndex: "sticky"
     },
@@ -12435,7 +12454,7 @@ var config28 = helpers19.defineMultiStyleConfig({
         }
       },
       circle: {
-        fill: mode("blackAlpha.400", "whiteAlpha.400")(props)
+        fill: mode("blackAlpha.200", "whiteAlpha.200")(props)
       }
     }
   }),
@@ -12574,7 +12593,6 @@ var parts14 = anatomy$1("stepper").parts(
   "root",
   "container",
   "innerContainer",
-  "backButton",
   "title",
   "stepCounter",
   "stepContainer",
@@ -12585,32 +12603,27 @@ var parts14 = anatomy$1("stepper").parts(
 );
 var helpers22 = createMultiStyleConfigHelpers$1(parts14.keys);
 var config32 = helpers22.defineMultiStyleConfig({
-  baseStyle: (props) => ({
+  baseStyle: {
     root: {
       display: "flex",
       alignItems: "center",
-      justifyContent: ["space-between", "center"],
-      minHeight: ["48px", "60px"],
+      justifyContent: ["space-between", null, "center"],
+      minHeight: ["48px", null, "60px"],
       overflowX: "auto",
       width: "100%"
     },
     container: {
-      paddingX: [2, 2, 0],
+      paddingX: [2, null, null, 0],
       maxWidth: "container.lg",
       marginX: "auto",
       width: "100%"
     },
     innerContainer: {
       overflow: "hidden",
-      display: ["flex", "none"],
+      display: ["flex", null, "none"],
       alignItems: "center",
-      justifyContent: "space-between"
-    },
-    backButton: {
-      borderRadius: "xs",
-      paddingX: 0,
-      width: "auto",
-      minWidth: "auto"
+      justifyContent: "space-between",
+      gap: 3
     },
     title: {
       overflow: "hidden",
@@ -12618,8 +12631,8 @@ var config32 = helpers22.defineMultiStyleConfig({
       WebkitLineClamp: 2,
       display: "-webkit-box",
       WebkitBoxOrient: "vertical",
-      marginLeft: 2,
-      textAlign: "right"
+      textAlign: "center",
+      maxWidth: "80%"
     },
     stepContainer: {
       display: "flex",
@@ -12629,7 +12642,7 @@ var config32 = helpers22.defineMultiStyleConfig({
       textStyle: "sm",
       whiteSpace: "nowrap"
     }
-  }),
+  },
   variants: {
     base: () => ({
       root: {
@@ -12638,7 +12651,19 @@ var config32 = helpers22.defineMultiStyleConfig({
     }),
     accent: (props) => ({
       root: {
-        backgroundColor: mode("seaMist", "pine")(props)
+        backgroundColor: mode("seaMist", "pine")(props),
+        color: mode("darkTeal", "seaMist")(props)
+      },
+      stepButton: {
+        color: props.state === "disabled" ? mode("blackAlpha.400", "whiteAlpha.400")(props) : props.state === "completed" ? mode("darkTeal", "white")(props) : mode("white", "darkTeal")(props),
+        _hover: {
+          backgroundColor: props.state === "disabled" ? "transparent" : mode("coralGreen", "greenHaze")(props)
+        }
+      },
+      backButton: {
+        _hover: {
+          backgroundColor: mode("coralGreen", "greenHaze")(props)
+        }
       }
     })
   },

package/dist/index.d.mts

@@ -1953,11 +1953,37 @@ type SporProviderProps = ChakraProviderProps & {
 declare const SporProvider: ({ theme, language, brand, children, ...props }: SporProviderProps) => React__default.JSX.Element;
 
 type StepperProps = {
+    /** Callback for when a step is clicked */
     onClick: (clickedStep: number) => void;
+    /** Callback for when the back button is clicked (on smaller screens).
+     * A boolean indicating whether or not the user is on the first step is passed as an argument.
+     *
+     * If this is not provided, the back button will not be shown on smaller screens on the first step.
+     */
+    onBackButtonClick?: (isFirstStep: boolean) => void;
+    /**
+     * Heading shown on smaller devices
+     * @deprecated Use `heading` instead
+     */
     title?: string;
+    /** Heading shown on smaller devices */
+    heading?: string;
+    /**
+     * The heading level rendered for the heading shown on smaller devices.
+     *
+     * Defaults to h2
+     * */
+    headingLevel?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p";
+    /** The currently active step */
     activeStep: number;
+    /** The labels of each step */
     steps: string[];
+    /** The variant.
+     * "base" has a transparent background,
+     * while "accent" has a slight accent color  */
     variant: "base" | "accent";
+    /** Disables all clicks */
+    isDisabled?: boolean;
 };
 /**
  * A stepper is used to show which step of a process a user is currently in.
@@ -1966,21 +1992,22 @@ type StepperProps = {
  *
  * ```tsx
  * <Stepper
- *   title="Eksempel"
+ *   title="Example"
  *   onClick={handleStepClick}
  *   activeStep={2}
- *   steps={['Velg hvor', 'Velg når', 'Velg hvordan']}
+ *   steps={['Where', 'When', 'How']}
  * />
  * ```
  **/
-declare const Stepper: ({ onClick, steps, activeStep: activeStepAsStringOrNumber, title, variant, }: StepperProps) => React__default.JSX.Element;
+declare const Stepper: ({ onClick, onBackButtonClick, steps, activeStep: activeStepAsStringOrNumber, title, heading, headingLevel, variant, isDisabled, }: StepperProps) => React__default.JSX.Element;
 
 type StepperStepProps = {
     children: React__default.ReactNode;
     stepNumber: number;
     variant: "base" | "accent";
+    isDisabled?: boolean;
 };
-declare const StepperStep: ({ children, stepNumber, variant, }: StepperStepProps) => React__default.JSX.Element;
+declare const StepperStep: ({ children, stepNumber, variant, isDisabled: isDisabledOverride, }: StepperStepProps) => React__default.JSX.Element;
 
 type TabsProps = Exclude<TabsProps$1, "colorScheme" | "variant" | "orientation" | "size"> & {
     colorScheme: "base" | "accent";
@@ -3312,6 +3339,10 @@ declare const theme: {
                 container: {
                     _hover: {
                         backgroundColor: string;
+                        _disabled: {
+                            backgroundColor: string;
+                            color: string;
+                        };
                     };
                     zIndex: string;
                     _focusVisible: {
@@ -3340,6 +3371,10 @@ declare const theme: {
                 } | {
                     _hover: {
                         backgroundColor: string;
+                        _disabled: {
+                            backgroundColor: string;
+                            color: string;
+                        };
                     };
                     zIndex: string;
                     _focusVisible: {
@@ -3372,6 +3407,10 @@ declare const theme: {
                 } | {
                     _hover: {
                         backgroundColor: string;
+                        _disabled: {
+                            backgroundColor: string;
+                            color: string;
+                        };
                     };
                     zIndex: string;
                     _focusVisible: {
@@ -3404,6 +3443,10 @@ declare const theme: {
                 } | {
                     _hover: {
                         backgroundColor: string;
+                        _disabled: {
+                            backgroundColor: string;
+                            color: string;
+                        };
                     };
                     zIndex: string;
                     _focusVisible: {
@@ -3436,6 +3479,10 @@ declare const theme: {
                 } | {
                     _hover: {
                         backgroundColor: string;
+                        _disabled: {
+                            backgroundColor: string;
+                            color: string;
+                        };
                     };
                     zIndex: string;
                     _focusVisible: {
@@ -4693,32 +4740,27 @@ declare const theme: {
             } | undefined;
         };
         Stepper: {
-            baseStyle?: ((props: _chakra_ui_styled_system.StyleFunctionProps) => {
+            baseStyle?: {
                 root: {
                     display: string;
                     alignItems: string;
-                    justifyContent: ("center" | "space-between")[];
-                    minHeight: ("48px" | "60px")[];
+                    justifyContent: ("center" | "space-between" | null)[];
+                    minHeight: ("48px" | "60px" | null)[];
                     overflowX: string;
                     width: string;
                 };
                 container: {
-                    paddingX: number[];
+                    paddingX: (number | null)[];
                     maxWidth: string;
                     marginX: string;
                     width: string;
                 };
                 innerContainer: {
                     overflow: string;
-                    display: ("flex" | "none")[];
+                    display: ("flex" | "none" | null)[];
                     alignItems: string;
                     justifyContent: string;
-                };
-                backButton: {
-                    borderRadius: string;
-                    paddingX: number;
-                    width: string;
-                    minWidth: string;
+                    gap: number;
                 };
                 title: {
                     overflow: string;
@@ -4726,8 +4768,8 @@ declare const theme: {
                     WebkitLineClamp: number;
                     display: string;
                     WebkitBoxOrient: string;
-                    marginLeft: number;
                     textAlign: string;
+                    maxWidth: string;
                 };
                 stepContainer: {
                     display: string;
@@ -4737,10 +4779,10 @@ declare const theme: {
                     textStyle: string;
                     whiteSpace: string;
                 };
-            }) | undefined;
+            } | undefined;
             sizes?: {
                 [key: string]: _chakra_ui_styled_system.PartsStyleInterpolation<{
-                    keys: ("title" | "container" | "closeButton" | "root" | "innerContainer" | "backButton" | "stepCounter" | "stepContainer" | "stepButton" | "stepNumber" | "stepTitle")[];
+                    keys: ("title" | "container" | "closeButton" | "root" | "innerContainer" | "stepCounter" | "stepContainer" | "stepButton" | "stepNumber" | "stepTitle")[];
                 }>;
             } | undefined;
             variants?: {
@@ -4752,6 +4794,18 @@ declare const theme: {
                 accent: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
                     root: {
                         backgroundColor: string;
+                        color: string;
+                    };
+                    stepButton: {
+                        color: string;
+                        _hover: {
+                            backgroundColor: string;
+                        };
+                    };
+                    backButton: {
+                        _hover: {
+                            backgroundColor: string;
+                        };
                     };
                 };
             } | undefined;
@@ -4760,7 +4814,7 @@ declare const theme: {
                 variant?: "base" | "accent" | undefined;
                 colorScheme?: string | undefined;
             } | undefined;
-            parts: ("title" | "container" | "closeButton" | "root" | "innerContainer" | "backButton" | "stepCounter" | "stepContainer" | "stepButton" | "stepNumber" | "stepTitle")[];
+            parts: ("title" | "container" | "closeButton" | "root" | "innerContainer" | "stepCounter" | "stepContainer" | "stepButton" | "stepNumber" | "stepTitle")[];
         };
         Switch: {
             baseStyle?: {