@vygruppen/spor-react 4.0.2 → 4.1.0

package/dist/index.js

@@ -360,7 +360,9 @@ var init_DarkSpinner = __esm({
       maxWidth,
       ...props
     }) => {
-      return /* @__PURE__ */ React69__namespace.default.createElement(react.Center, { flexDirection: "column", ...props }, /* @__PURE__ */ React69__namespace.default.createElement(react.Box, { width, maxWidth }, /* @__PURE__ */ React69__namespace.default.createElement(ClientOnly, null, () => /* @__PURE__ */ React69__namespace.default.createElement(Lottie, { animationData: sporLoader.spinnerDarkData }))), children && /* @__PURE__ */ React69__namespace.default.createElement(react.Box, { marginTop: 3, fontWeight: "bold" }, children));
+      const { colorMode } = react.useColorMode();
+      const spinnerData = colorMode === "dark" ? sporLoader.spinnerLightData : sporLoader.spinnerDarkData;
+      return /* @__PURE__ */ React69__namespace.default.createElement(react.Center, { flexDirection: "column", ...props }, /* @__PURE__ */ React69__namespace.default.createElement(react.Box, { width, maxWidth }, /* @__PURE__ */ React69__namespace.default.createElement(ClientOnly, null, () => /* @__PURE__ */ React69__namespace.default.createElement(Lottie, { animationData: spinnerData }))), children && /* @__PURE__ */ React69__namespace.default.createElement(react.Box, { marginTop: 3, fontWeight: "bold" }, children));
     };
   }
 });
@@ -957,7 +959,11 @@ var init_AlertIcon = __esm({
 var BaseAlert;
 var init_BaseAlert = __esm({
   "src/alert/BaseAlert.tsx"() {
-    BaseAlert = ({ variant, children, ...boxProps }) => {
+    BaseAlert = ({
+      variant,
+      children,
+      ...boxProps
+    }) => {
       const styles3 = react.useMultiStyleConfig("Alert", { variant });
       return /* @__PURE__ */ React69__namespace.default.createElement(react.Box, { __css: styles3.container, ...boxProps }, children);
     };
@@ -2931,7 +2937,12 @@ var init_typography = __esm({
     init_Text();
   }
 });
-function CalendarCell({ state: state2, date: date$1, currentMonth, variant }) {
+function CalendarCell({
+  state: state2,
+  date: date$1,
+  currentMonth,
+  variant
+}) {
   const ref = React69.useRef(null);
   const {
     cellProps,
@@ -3037,7 +3048,11 @@ var init_utils = __esm({
     };
   }
 });
-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);
@@ -3231,7 +3246,11 @@ var init_CalendarHeader = __esm({
     });
   }
 });
-function Calendar({ showYearNavigation, variant, ...props }) {
+function Calendar({
+  showYearNavigation,
+  variant,
+  ...props
+}) {
   const { t: t2 } = useTranslation();
   const locale = useCurrentLocale();
   const state2 = $131cf43a05231e1e$export$6d095e787d2b5e1f({
@@ -3545,7 +3564,14 @@ function RangeCalendar(props) {
   });
   const ref = React69.useRef(null);
   const { calendarProps, title } = reactAria.useRangeCalendar(props, state2, ref);
-  return /* @__PURE__ */ React69__namespace.default.createElement(react.Box, { ...calendarProps, ref }, /* @__PURE__ */ React69__namespace.default.createElement(CalendarHeader, { state: state2, title }), /* @__PURE__ */ React69__namespace.default.createElement(react.Box, { display: "flex", gap: "8" }, /* @__PURE__ */ React69__namespace.default.createElement(CalendarGrid, { variant: props.variant, state: state2 }), /* @__PURE__ */ React69__namespace.default.createElement(CalendarGrid, { variant: props.variant, state: state2, offset: { months: 1 } })));
+  return /* @__PURE__ */ React69__namespace.default.createElement(react.Box, { ...calendarProps, ref }, /* @__PURE__ */ React69__namespace.default.createElement(CalendarHeader, { state: state2, title }), /* @__PURE__ */ React69__namespace.default.createElement(react.Box, { display: "flex", gap: "8" }, /* @__PURE__ */ React69__namespace.default.createElement(CalendarGrid, { variant: props.variant, state: state2 }), /* @__PURE__ */ React69__namespace.default.createElement(
+    CalendarGrid,
+    {
+      variant: props.variant,
+      state: state2,
+      offset: { months: 1 }
+    }
+  )));
 }
 var init_RangeCalendar = __esm({
   "src/datepicker/RangeCalendar.tsx"() {
@@ -5708,8 +5734,15 @@ var init_PhoneNumberInput = __esm({
     init_src();
     init_AttachedInputs();
     exports.PhoneNumberInput = react.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(texts15.phoneNumber);
         const [value, onChange] = react.useControllableState({
           value: externalValue,
           onChange: externalOnChange,
@@ -5751,7 +5784,7 @@ var init_PhoneNumberInput = __esm({
           {
             ref,
             type: "tel",
-            label: t2(texts15.phoneNumber),
+            label,
             value: value.nationalNumber,
             name: name ? `${name}-phone-number` : "phone-number",
             onChange: (e) => {
@@ -6743,13 +6776,13 @@ var init_StepperContext = __esm({
       activeStep,
       children,
       onClick,
-      colorScheme,
-      numberOfSteps
+      numberOfSteps,
+      variant
     }) => {
       return /* @__PURE__ */ React69__namespace.default.createElement(
         StepperContext.Provider,
         {
-          value: { activeStep, onClick, colorScheme, numberOfSteps }
+          value: { activeStep, onClick, numberOfSteps, variant }
         },
         children
       );
@@ -6777,9 +6810,9 @@ var init_Stepper = __esm({
       steps,
       activeStep: activeStepAsStringOrNumber,
       title,
-      colorScheme
+      variant
     }) => {
-      const style = react.useMultiStyleConfig("Stepper", { colorScheme });
+      const style = react.useMultiStyleConfig("Stepper", { variant });
       const numberOfSteps = steps.length;
       const activeStep = Number(activeStepAsStringOrNumber);
       const { t: t2 } = useTranslation();
@@ -6788,7 +6821,7 @@ var init_Stepper = __esm({
         {
           onClick,
           activeStep,
-          colorScheme,
+          variant,
           numberOfSteps
         },
         /* @__PURE__ */ React69__namespace.default.createElement(react.Box, { __css: style.container }, /* @__PURE__ */ React69__namespace.default.createElement(react.Box, { __css: style.innerContainer }, /* @__PURE__ */ React69__namespace.default.createElement(react.HStack, null, activeStep > 1 && /* @__PURE__ */ React69__namespace.default.createElement(
@@ -6807,8 +6840,16 @@ var init_Stepper = __esm({
             triggerElement: /* @__PURE__ */ React69__namespace.default.createElement(react.Box, { as: "button", __css: style.stepCounter }, t2(texts22.stepsOf(activeStep, numberOfSteps))),
             borderRadius: "xs"
           },
-          steps.map((step, index) => /* @__PURE__ */ React69__namespace.default.createElement(exports.StepperStep, { key: step, stepNumber: index + 1 }, step))
-        )), title && /* @__PURE__ */ React69__namespace.default.createElement(react.Box, { as: "h3", __css: style.title }, title)), /* @__PURE__ */ React69__namespace.default.createElement(react.Flex, { justifyContent: "center", display: ["none", "flex"] }, steps.map((step, index) => /* @__PURE__ */ React69__namespace.default.createElement(exports.StepperStep, { key: index, stepNumber: index + 1 }, step))))
+          steps.map((step, index) => /* @__PURE__ */ React69__namespace.default.createElement(
+            exports.StepperStep,
+            {
+              key: step,
+              stepNumber: index + 1,
+              variant
+            },
+            step
+          ))
+        )), title && /* @__PURE__ */ React69__namespace.default.createElement(react.Box, { as: "h3", __css: style.title }, title)), /* @__PURE__ */ React69__namespace.default.createElement(react.Flex, { justifyContent: "center", display: ["none", "flex"] }, steps.map((step, index) => /* @__PURE__ */ React69__namespace.default.createElement(exports.StepperStep, { key: index, stepNumber: index + 1, variant }, step))))
       ));
     };
     texts22 = createTexts({
@@ -6827,33 +6868,62 @@ var init_Stepper = __esm({
     });
   }
 });
-exports.StepperStep = void 0; var getVariant;
+exports.StepperStep = void 0; var getButtonStylesForState, getState;
 var init_StepperStep = __esm({
   "src/stepper/StepperStep.tsx"() {
     init_src();
     init_StepperContext();
-    exports.StepperStep = ({ children, stepNumber }) => {
-      const { activeStep, onClick, colorScheme } = useStepper();
-      const variant = getVariant(stepNumber, activeStep);
+    exports.StepperStep = ({
+      children,
+      stepNumber,
+      variant
+    }) => {
+      const { activeStep, onClick } = useStepper();
+      const state2 = getState(stepNumber, activeStep);
       const style = react.useMultiStyleConfig("Stepper", {
-        variant,
-        colorScheme
+        state: state2,
+        variant
       });
+      const adjustedProps = getButtonStylesForState(state2);
       return /* @__PURE__ */ React69__namespace.default.createElement(react.Box, { __css: style.stepContainer }, stepNumber > 1 && /* @__PURE__ */ React69__namespace.default.createElement(sporIconReact.DropdownRightFill18Icon, { marginX: 5, display: ["none", "block"] }), /* @__PURE__ */ React69__namespace.default.createElement(
-        react.Flex,
+        exports.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__namespace.default.createElement(react.Box, { __css: style.stepNumber }, stepNumber),
-        /* @__PURE__ */ React69__namespace.default.createElement(react.Box, { __css: style.stepTitle }, children)
+        children
       ));
     };
-    getVariant = (stepNumber, activeStep) => {
+    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 {};
+      }
+    };
+    getState = (stepNumber, activeStep) => {
       if (stepNumber < activeStep) {
         return "completed";
       }
@@ -12969,30 +13039,11 @@ var init_button2 = __esm({
         }
       },
       variants: {
-        control: (props) => ({
-          backgroundColor: themeTools.mode("darkTeal", "mint")(props),
-          color: themeTools.mode("white", "darkTeal")(props),
-          ...focusVisible({
-            focus: {
-              boxShadow: `inset 0 0 0 4px ${themeTools.mode(
-                colors.darkTeal,
-                colors.seaMist
-              )(props)}, inset 0 0 0 6px currentColor`
-            },
-            notFocus: { boxShadow: "none" }
-          }),
-          _hover: {
-            backgroundColor: themeTools.mode("night", "coralGreen")(props)
-          },
-          _active: {
-            backgroundColor: themeTools.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: themeTools.mode("primaryGreen", "coralGreen")(props),
+          color: themeTools.mode("white", "darkTeal")(props),
           ...focusVisible({
             focus: {
               boxShadow: `inset 0 0 0 2px ${themeTools.mode(
@@ -13006,28 +13057,28 @@ var init_button2 = __esm({
             notFocus: { boxShadow: "none" }
           }),
           _hover: {
-            backgroundColor: "pine"
+            backgroundColor: themeTools.mode("darkTeal", "blueGreen")(props)
           },
           _active: {
-            backgroundColor: "azure"
+            backgroundColor: themeTools.mode("greenHaze", "seaMist")(props)
           }
         }),
         secondary: (props) => ({
           // FIXME: Update to use global defined background color for darkMode whenever it is available instead of alpha
-          backgroundColor: themeTools.mode("seaMist", "whiteAlpha.100")(props),
+          backgroundColor: themeTools.mode("seaMist", "primaryGreen")(props),
           color: themeTools.mode("darkTeal", "white")(props),
           // order is important here for now while we do not have global defined background color for darkMode
           _hover: {
-            backgroundColor: themeTools.mode("coralGreen", "whiteAlpha.200")(props)
+            backgroundColor: themeTools.mode("coralGreen", "greenHaze")(props)
           },
           ...focusVisible({
             focus: {
               boxShadow: `inset 0 0 0 2px ${themeTools.mode(
                 colors.greenHaze,
-                colors.azure
+                colors.primaryGreen
               )(props)}, inset 0 0 0 4px ${themeTools.mode(
                 colors.white,
-                colors.blackAlpha[300]
+                colors.darkTeal
               )(props)}`,
               _hover: {
                 boxShadow: `inset 0 0 0 2px ${themeTools.mode(
@@ -13044,7 +13095,7 @@ var init_button2 = __esm({
             }
           }),
           _active: {
-            backgroundColor: themeTools.mode("mint", "whiteAlpha.300")(props),
+            backgroundColor: themeTools.mode("mint", "darkTeal")(props),
             boxShadow: `inset 0 0 0 2px ${themeTools.mode(
               colors.greenHaze,
               colors.azure
@@ -13063,7 +13114,7 @@ var init_button2 = __esm({
             }
           }
         }),
-        additional: (props) => ({
+        tertiary: (props) => ({
           backgroundColor: "transparent",
           color: themeTools.mode("darkGrey", "white")(props),
           fontWeight: "normal",
@@ -13075,7 +13126,7 @@ var init_button2 = __esm({
             focus: {
               boxShadow: getBoxShadowString({
                 borderWidth: 2,
-                borderColor: "greenHaze"
+                borderColor: "azure"
               })
             },
             notFocus: {
@@ -13112,13 +13163,13 @@ var init_button2 = __esm({
             }
           }),
           _hover: {
-            backgroundColor: themeTools.mode("seaMist", "pine")(props),
+            backgroundColor: themeTools.mode("seaMist", "whiteAlpha.200")(props),
             _disabled: {
               color: "blackAlpha.300"
             }
           },
           _active: {
-            backgroundColor: themeTools.mode("mint", "whiteAlpha.200")(props)
+            backgroundColor: themeTools.mode("mint", "whiteAlpha.100")(props)
           }
         }),
         floating: (props) => ({
@@ -13128,7 +13179,7 @@ var init_button2 = __esm({
             baseShadow: "sm"
           }),
           _active: {
-            backgroundColor: themeTools.mode("mint", "whiteAlpha.300")(props)
+            backgroundColor: themeTools.mode("mint", "whiteAlpha.400")(props)
           },
           _hover: {
             backgroundColor: themeTools.mode("white", "whiteAlpha.200")(props),
@@ -13294,6 +13345,11 @@ var init_card2 = __esm({
             backgroundColor: "seaMist"
           };
         }
+        case "red": {
+          return {
+            backgroundColor: "pink"
+          };
+        }
         default:
           return {
             backgroundColor: ((_a6 = colors[colorScheme]) == null ? void 0 : _a6[100]) ?? "platinum"
@@ -13720,7 +13776,9 @@ var init_close_button = __esm({
         ...focusVisible({
           focus: {
             outline: "none",
-            boxShadow: getBoxShadowString({ borderColor: themeTools.mode("greenHaze", "azure")(props) }),
+            boxShadow: getBoxShadowString({
+              borderColor: themeTools.mode("greenHaze", "azure")(props)
+            }),
             outlineOffset: "2px"
           },
           notFocus: {
@@ -14385,7 +14443,10 @@ var init_fab = __esm({
             },
             _hover: {
               backgroundColor: themeTools.mode("white", "transparent")(props),
-              boxShadow: themeTools.mode(`inset 0 0 0 2px ${props.theme.colors.darkGrey}`, `inset 0 0 0 2px ${props.theme.colors.white}`)(props),
+              boxShadow: themeTools.mode(
+                `inset 0 0 0 2px ${props.theme.colors.darkGrey}`,
+                `inset 0 0 0 2px ${props.theme.colors.white}`
+              )(props),
               color: themeTools.mode("darkGrey", "white")(props)
             },
             ...focusVisible({
@@ -14979,7 +15040,7 @@ var init_info_tag = __esm({
         size: "md"
       },
       variants: {
-        "walk": (props) => ({
+        walk: (props) => ({
           iconContainer: {
             backgroundColor: themeTools.mode("white", "transparent")(props),
             boxShadow: themeTools.mode(
@@ -15038,7 +15099,9 @@ var init_input2 = __esm({
               })
             },
             notFocus: {
-              boxShadow: getBoxShadowString({ borderColor: themeTools.mode("darkGrey", "white")(props) })
+              boxShadow: getBoxShadowString({
+                borderColor: themeTools.mode("darkGrey", "white")(props)
+              })
             }
           }),
           _disabled: {
@@ -15870,7 +15933,7 @@ var init_skeleton = __esm({
     skeleton_default = config30;
   }
 });
-var parts13, helpers21, config31, stepper_default, getRootBackgroundColor, getColor5, getStepNumberStyles, getDisabledColor, getHoverStyles, getFocusStyles, getActiveStyles;
+var parts13, helpers21, config31, stepper_default;
 var init_stepper2 = __esm({
   "src/theme/components/stepper.ts"() {
     parts13 = themeTools.anatomy("stepper").parts(
@@ -15890,7 +15953,6 @@ var init_stepper2 = __esm({
     config31 = helpers21.defineMultiStyleConfig({
       baseStyle: (props) => ({
         root: {
-          backgroundColor: getRootBackgroundColor(props),
           display: "flex",
           alignItems: "center",
           justifyContent: ["space-between", "center"],
@@ -15908,8 +15970,7 @@ var init_stepper2 = __esm({
           overflow: "hidden",
           display: ["flex", "none"],
           alignItems: "center",
-          justifyContent: "space-between",
-          color: getColor5(props)
+          justifyContent: "space-between"
         },
         backButton: {
           borderRadius: "xs",
@@ -15926,170 +15987,32 @@ var init_stepper2 = __esm({
           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: themeTools.mode("seaMist", "pine")(props)
           }
         })
       },
       defaultProps: {
-        colorScheme: "green"
+        variant: "base"
       }
     });
     stepper_default = config31;
-    getRootBackgroundColor = (props) => {
-      switch (props.colorScheme) {
-        case "light":
-          return "white";
-        case "dark":
-          return "darkTeal";
-        case "green":
-        default:
-          return "seaMist";
-      }
-    };
-    getColor5 = (props) => {
-      switch (props.colorScheme) {
-        case "light":
-          return themeTools.mode("darkGrey", "white")(props);
-        case "dark":
-          return "white";
-        case "green":
-        default:
-          return themeTools.mode("darkTeal", "white")(props);
-      }
-    };
-    getStepNumberStyles = (props) => {
-      switch (props.colorScheme) {
-        case "dark":
-          return {
-            backgroundColor: "white",
-            color: "darkTeal"
-          };
-        case "light":
-        case "green":
-        default:
-          return {
-            backgroundColor: themeTools.mode("darkTeal", "white")(props),
-            color: themeTools.mode("white", "darkTeal")(props)
-          };
-      }
-    };
-    getDisabledColor = (props) => {
-      switch (props.colorScheme) {
-        case "dark":
-          return "whiteAlpha.400";
-        case "green":
-          return "dimGrey";
-        case "light":
-        default:
-          return "osloGrey";
-      }
-    };
-    getHoverStyles = (props) => {
-      switch (props.colorScheme) {
-        case "dark":
-          return { backgroundColor: "pine" };
-        case "green":
-          return {
-            backgroundColor: themeTools.mode("coralGreen", "primaryGreen")(props)
-          };
-        case "light":
-        default:
-          return {
-            backgroundColor: themeTools.mode("seaMist", "primaryGreen")(props)
-          };
-      }
-    };
-    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}`
-          };
-      }
-    };
-    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, $height3, $diff2, diffValue2, $translateX2, helpers22, config32, switch_default;
@@ -16720,7 +16643,10 @@ var init_tabs = __esm({
           };
         case "base":
           return {
-            boxShadow: themeTools.mode(`inset 0 0 0 2px ${props.theme.colors.darkGrey}`, `inset 0 0 0 2px ${props.theme.colors.white}`)(props),
+            boxShadow: themeTools.mode(
+              `inset 0 0 0 2px ${props.theme.colors.darkGrey}`,
+              `inset 0 0 0 2px ${props.theme.colors.white}`
+            )(props),
             color: themeTools.mode("darkGrey", "white")(props)
           };
         case "accent":
@@ -16819,7 +16745,10 @@ var init_tabs = __esm({
           return {
             backgroundColor: themeTools.mode("white", "transparent")(props),
             color: "darkGrey",
-            boxShadow: themeTools.mode(`inset 0 0 0 1px ${props.theme.colors.blackAlpha["400"]}`, `inset 0 0 0 1px ${props.theme.colors.whiteAlpha["400"]}`)(props)
+            boxShadow: themeTools.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 {

package/dist/index.mjs

@@ -1 +1 @@
-export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, 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, Grid, GridItem, HStack, Heading, IconButton, Image, Img, InfoSelect, InfoTag, Input, InputGroup, InputLeftElement, InputRightElement, Item, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightMode, LightSpinner, LineIcon, ListBox, ListItem, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, NativeSelect, NumericStepper, OrderedList, PasswordInput, PhoneNumberInput, PlayPauseButton, Popover, PopoverAnchor, PopoverArrow, PopoverBody, PopoverCloseButton, PopoverContent, PopoverFooter, PopoverHeader, PopoverTrigger, PopoverWizardBody, Portal, ProgressBar, ProgressLoader, Radio, RadioGroup, ScaleFade, SearchInput, Section, SimpleDrawer, SimpleGrid, SimplePopover, Skeleton, SkeletonCircle, SkeletonText, SkipButton, Slide, SlideFade, Spacer, SporProvider, Stack, StaticAlert, Stepper, StepperStep, Switch, Tab, TabList, TabPanel, TabPanels, Table, TableCaption, Tabs, Tbody, Td, Text, TextLink, Textarea, Tfoot, Th, Thead, Time, TimePicker, Tr, TravelTag, UnorderedList, VStack, VyLogo, WizardPopover, Wrap, WrapItem, createTexts, extendTheme, fontFaces, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useTheme, useToast, useToken, useTranslation } from './chunk-MGJQOEU2.mjs';
+export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, 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, Grid, GridItem, HStack, Heading, IconButton, Image, Img, InfoSelect, InfoTag, Input, InputGroup, InputLeftElement, InputRightElement, Item, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightMode, LightSpinner, LineIcon, ListBox, ListItem, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, NativeSelect, NumericStepper, OrderedList, PasswordInput, PhoneNumberInput, PlayPauseButton, Popover, PopoverAnchor, PopoverArrow, PopoverBody, PopoverCloseButton, PopoverContent, PopoverFooter, PopoverHeader, PopoverTrigger, PopoverWizardBody, Portal, ProgressBar, ProgressLoader, Radio, RadioGroup, ScaleFade, SearchInput, Section, SimpleDrawer, SimpleGrid, SimplePopover, Skeleton, SkeletonCircle, SkeletonText, SkipButton, Slide, SlideFade, Spacer, SporProvider, Stack, StaticAlert, Stepper, StepperStep, Switch, Tab, TabList, TabPanel, TabPanels, Table, TableCaption, Tabs, Tbody, Td, Text, TextLink, Textarea, Tfoot, Th, Thead, Time, TimePicker, Tr, TravelTag, UnorderedList, VStack, VyLogo, WizardPopover, Wrap, WrapItem, createTexts, extendTheme, fontFaces, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useTheme, useToast, useToken, useTranslation } from './chunk-FPWAXD72.mjs';

package/package.json

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

package/src/accordion/Accordion.test.tsx

@@ -9,7 +9,7 @@ describe("<Accordion />", () => {
     const { container, getByRole } = render(
       <Accordion>
         <ExpandableItem title="Title">Content</ExpandableItem>
-      </Accordion>
+      </Accordion>,
     );
     await act(async () => {
       expect(await axe(container)).toHaveNoViolations();

package/src/accordion/Accordion.tsx

@@ -64,5 +64,5 @@ export const Accordion = forwardRef<AccordionProps, "div">(
         </ChakraAccordion>
       </AccordionProvider>
     );
-  }
+  },
 );