@vygruppen/spor-react 12.24.11 → 12.24.12

package/dist/index.mjs

@@ -73,7 +73,7 @@ var warnAboutMismatchingIcon = ({
 };
 var Accordion = forwardRef(
   (props, ref) => {
-    const { variant = "core", children, gap = 2, ...rest } = props;
+    const { variant = "core", children, gap = 2, css, ...rest } = props;
     const recipe = useSlotRecipe({ key: "accordion" });
     const styles = recipe({ variant });
     return /* @__PURE__ */ jsx(
@@ -81,7 +81,7 @@ var Accordion = forwardRef(
       {
         ...rest,
         ref,
-        css: styles.root,
+        css: { ...styles.root, ...css },
         variant,
         children: /* @__PURE__ */ jsx(Stack, { gap, children })
       }
@@ -93,28 +93,42 @@ var AccordionItemTrigger = forwardRef(function AccordionItemTrigger2(props, ref)
     startElement,
     children,
     headingLevel,
+    css,
     showChevron = true,
     ...rest
   } = props;
   warnAboutMismatchingIcon({ icon: startElement });
   const recipe = useSlotRecipe({ key: "accordion" });
   const styles = recipe();
-  return /* @__PURE__ */ jsx(Box, { as: headingLevel, children: /* @__PURE__ */ jsxs(Accordion$1.ItemTrigger, { ...rest, ref, css: styles.itemTrigger, children: [
-    /* @__PURE__ */ jsxs(HStack, { flex: "1", gap: 1, textAlign: "start", width: "full", children: [
-      startElement && startElement,
-      children
-    ] }),
-    showChevron && /* @__PURE__ */ jsx(Accordion$1.ItemIndicator, { children: /* @__PURE__ */ jsx(DropdownDownFill24Icon, {}) })
-  ] }) });
+  return /* @__PURE__ */ jsx(Box, { as: headingLevel, children: /* @__PURE__ */ jsxs(
+    Accordion$1.ItemTrigger,
+    {
+      ...rest,
+      ref,
+      css: { ...styles.itemTrigger, ...css },
+      children: [
+        /* @__PURE__ */ jsxs(HStack, { flex: "1", gap: 1, textAlign: "start", width: "full", children: [
+          startElement && startElement,
+          children
+        ] }),
+        showChevron && /* @__PURE__ */ jsx(Accordion$1.ItemIndicator, { children: /* @__PURE__ */ jsx(DropdownDownFill24Icon, {}) })
+      ]
+    }
+  ) });
 });
 var AccordionItemContent = forwardRef(function AccordionItemContent2(props, ref) {
-  const { children, "aria-labelledby": ariaLabelledBy, ...otherProps } = props;
+  const {
+    children,
+    css,
+    "aria-labelledby": ariaLabelledBy,
+    ...otherProps
+  } = props;
   const recipe = useSlotRecipe({ key: "accordion" });
   const styles = recipe();
   return /* @__PURE__ */ jsx(
     Accordion$1.ItemContent,
     {
-      css: styles.itemContent,
+      css: { ...styles.itemContent, ...css },
       "aria-labelledby": ariaLabelledBy,
       children: /* @__PURE__ */ jsx(Accordion$1.ItemBody, { ...otherProps, ref, children })
     }
@@ -324,6 +338,7 @@ var ProgressBar = forwardRef(
     isActive = true,
     showValueText = false,
     height = "0.5rem",
+    css,
     ...rest
   }, ref) => {
     const recipe = useSlotRecipe({ key: "progressbar" });
@@ -332,21 +347,30 @@ var ProgressBar = forwardRef(
       label,
       delay: labelRotationDelay
     });
-    return /* @__PURE__ */ jsxs(Progress.Root, { css: styles.container, ref, value, ...rest, children: [
-      /* @__PURE__ */ jsx(
-        Progress.Track,
-        {
-          height,
-          css: isActive ? styles.background : styles.disabledBackground,
-          children: /* @__PURE__ */ jsx(Progress.Range, { css: styles.progress })
-        }
-      ),
-      label && /* @__PURE__ */ jsx(Progress.Label, { css: styles.description, children: currentLoadingText }),
-      showValueText && /* @__PURE__ */ jsxs(Progress.ValueText, { children: [
+    return /* @__PURE__ */ jsxs(
+      Progress.Root,
+      {
+        css: { ...styles.container, ...css },
+        ref,
         value,
-        "%"
-      ] })
-    ] });
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx(
+            Progress.Track,
+            {
+              height,
+              css: isActive ? styles.background : styles.disabledBackground,
+              children: /* @__PURE__ */ jsx(Progress.Range, { css: styles.progress })
+            }
+          ),
+          label && /* @__PURE__ */ jsx(Progress.Label, { css: styles.description, children: currentLoadingText }),
+          showValueText && /* @__PURE__ */ jsxs(Progress.ValueText, { children: [
+            value,
+            "%"
+          ] })
+        ]
+      }
+    );
   }
 );
 ProgressBar.displayName = "ProgressBar";
@@ -1147,24 +1171,40 @@ var Alert = forwardRef((props, ref) => {
   if (!open)
     return null;
   return /* @__PURE__ */ jsxs(Alert$1.Root, { ref, ...props, children: [
-    /* @__PURE__ */ jsxs(Alert$1.Content, { flexDirection: title ? "column" : "row", children: [
-      /* @__PURE__ */ jsxs(HStack, { gap: "1", alignItems: "flex-start", children: [
-        showIndicator && /* @__PURE__ */ jsx(Alert$1.Indicator, { asChild: true, children: /* @__PURE__ */ jsx(AlertIcon, { variant: props.variant ?? "info", customIcon: icon }) }),
-        title && /* @__PURE__ */ jsx(Alert$1.Title, { paddingRight: closable ? 6 : 0, children: title })
-      ] }),
-      children && /* @__PURE__ */ jsx(
-        Alert$1.Description,
-        {
-          width: "100%",
-          paddingLeft: title ? 0.5 : 0,
-          paddingRight: closable ? 6 : 0,
-          children
-        }
-      )
-    ] }),
+    /* @__PURE__ */ jsxs(
+      Alert$1.Content,
+      {
+        flexDirection: title ? "column" : "row",
+        "data-part": "content",
+        children: [
+          /* @__PURE__ */ jsxs(HStack, { gap: "1", alignItems: "flex-start", children: [
+            showIndicator && /* @__PURE__ */ jsx(Alert$1.Indicator, { asChild: true, children: /* @__PURE__ */ jsx(AlertIcon, { variant: props.variant ?? "info", customIcon: icon }) }),
+            title && /* @__PURE__ */ jsx(
+              Alert$1.Title,
+              {
+                paddingRight: closable ? 6 : 0,
+                "data-part": "title",
+                children: title
+              }
+            )
+          ] }),
+          children && /* @__PURE__ */ jsx(
+            Alert$1.Description,
+            {
+              width: "100%",
+              paddingLeft: title ? 0.5 : 0,
+              paddingRight: closable ? 6 : 0,
+              "data-part": "description",
+              children
+            }
+          )
+        ]
+      }
+    ),
     closable && /* @__PURE__ */ jsx(
       CloseButton,
       {
+        "data-part": "close-button",
         size: "xs",
         position: "absolute",
         top: "1.5",
@@ -1332,15 +1372,22 @@ var texts6 = createTexts({
   }
 });
 var Breadcrumb = forwardRef(
-  ({ children, ...props }, ref) => {
+  ({ children, css, ...props }, ref) => {
     const validChildren = React20__default.Children.toArray(children).filter(
       (element) => React20__default.isValidElement(element)
     );
-    return /* @__PURE__ */ jsx(Breadcrumb$1.Root, { ref, ...props, children: /* @__PURE__ */ jsx(Breadcrumb$1.List, { children: validChildren.map((child, index) => {
+    return /* @__PURE__ */ jsx(Breadcrumb$1.Root, { ref, ...props, css, children: /* @__PURE__ */ jsx(Breadcrumb$1.List, { "data-part": "list", children: validChildren.map((child, index) => {
       const isLast = index === validChildren.length - 1;
       return /* @__PURE__ */ jsxs(React20__default.Fragment, { children: [
-        /* @__PURE__ */ jsx(Breadcrumb$1.Item, { children: child }),
-        !isLast && /* @__PURE__ */ jsx(Breadcrumb$1.Separator, { "aria-hidden": "true", children: /* @__PURE__ */ jsx(DropdownRightFill18Icon, {}) })
+        /* @__PURE__ */ jsx(Breadcrumb$1.Item, { "data-part": "item", children: child }),
+        !isLast && /* @__PURE__ */ jsx(
+          Breadcrumb$1.Separator,
+          {
+            "aria-hidden": "true",
+            "data-part": "separator",
+            children: /* @__PURE__ */ jsx(DropdownRightFill18Icon, {})
+          }
+        )
       ] }, index);
     }) }) });
   }
@@ -1602,6 +1649,7 @@ function CalendarCell({ date, currentMonth }) {
           children: /* @__PURE__ */ jsx(
             Box,
             {
+              "data-part": "calendar-cell",
               width: "100%",
               height: "100%",
               display: "flex",
@@ -1662,7 +1710,7 @@ function CalendarGrid({ offset = {} }) {
     state
   );
   const weeksInMonth = getWeeksInMonth(startDate, locale);
-  return /* @__PURE__ */ jsxs("table", { ...gridProps, cellPadding: "0", children: [
+  return /* @__PURE__ */ jsxs("table", { ...gridProps, cellPadding: "0", "data-part": "calendar-grid", children: [
     /* @__PURE__ */ jsx("thead", { ...headerProps, children: /* @__PURE__ */ jsx("tr", { children: weekDays[language].map((day, index) => /* @__PURE__ */ jsx("th", { children: /* @__PURE__ */ jsx(
       Text3,
       {
@@ -1679,6 +1727,7 @@ function CalendarGrid({ offset = {} }) {
         paddingTop: 0.5,
         textAlign: "center",
         fontWeight: "bold",
+        "data-part": "calendar-table-heading",
         children: day
       },
       index
@@ -1713,63 +1762,72 @@ function CalendarHeader({ dualView }) {
   function handleNext() {
     state.focusNextPage();
   }
-  return /* @__PURE__ */ jsxs(Flex, { flex: 1, alignItems: "center", paddingBottom: 4, children: [
-    /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx("h2", { children: calendarProps["aria-label"] }) }),
-    /* @__PURE__ */ jsx(
-      IconButton,
-      {
-        size: "md",
-        onClick: handlePrevious,
-        variant: "ghost",
-        marginLeft: 1,
-        disabled: prevButtonProps.isDisabled,
-        "aria-label": t(texts7.previousMonth),
-        icon: /* @__PURE__ */ jsx(icons_exports.DropdownLeftFill24Icon, {})
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      Text3,
-      {
-        "aria-hidden": true,
-        flex: 1,
-        fontWeight: "bold",
-        fontSize: "sm",
-        textAlign: "center",
-        children: capitalizeFirstLetter(
-          monthDateFormatter.format(
-            state.visibleRange.start.toDate(state.timeZone)
-          )
-        )
-      }
-    ),
-    dualView && /* @__PURE__ */ jsx(
-      Text3,
-      {
-        "aria-hidden": true,
-        flex: 1,
-        fontWeight: "bold",
-        fontSize: "sm",
-        textAlign: "center",
-        children: capitalizeFirstLetter(
-          monthDateFormatter.format(
-            state.visibleRange.start.add({ months: 1 }).toDate(state.timeZone)
-          )
+  return /* @__PURE__ */ jsxs(
+    Flex,
+    {
+      flex: 1,
+      alignItems: "center",
+      paddingBottom: 4,
+      "data-part": "calendar-header",
+      children: [
+        /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx("h2", { children: calendarProps["aria-label"] }) }),
+        /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            size: "md",
+            onClick: handlePrevious,
+            variant: "ghost",
+            marginLeft: 1,
+            disabled: prevButtonProps.isDisabled,
+            "aria-label": t(texts7.previousMonth),
+            icon: /* @__PURE__ */ jsx(icons_exports.DropdownLeftFill24Icon, {})
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Text3,
+          {
+            "aria-hidden": true,
+            flex: 1,
+            fontWeight: "bold",
+            fontSize: "sm",
+            textAlign: "center",
+            children: capitalizeFirstLetter(
+              monthDateFormatter.format(
+                state.visibleRange.start.toDate(state.timeZone)
+              )
+            )
+          }
+        ),
+        dualView && /* @__PURE__ */ jsx(
+          Text3,
+          {
+            "aria-hidden": true,
+            flex: 1,
+            fontWeight: "bold",
+            fontSize: "sm",
+            textAlign: "center",
+            children: capitalizeFirstLetter(
+              monthDateFormatter.format(
+                state.visibleRange.start.add({ months: 1 }).toDate(state.timeZone)
+              )
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            size: "md",
+            onClick: handleNext,
+            marginRight: 1,
+            variant: "ghost",
+            disabled: nextButtonProps.isDisabled,
+            "aria-label": t(texts7.nextMonth),
+            icon: /* @__PURE__ */ jsx(icons_exports.DropdownRightFill24Icon, {})
+          }
         )
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      IconButton,
-      {
-        size: "md",
-        onClick: handleNext,
-        marginRight: 1,
-        variant: "ghost",
-        disabled: nextButtonProps.isDisabled,
-        "aria-label": t(texts7.nextMonth),
-        icon: /* @__PURE__ */ jsx(icons_exports.DropdownRightFill24Icon, {})
-      }
-    )
-  ] });
+      ]
+    }
+  );
 }
 var texts7 = createTexts({
   previousMonth: {
@@ -1785,22 +1843,32 @@ var texts7 = createTexts({
     sv: "N\xE4sta m\xE5nad"
   }
 });
-function Calendar({ dualView }) {
+function Calendar({ dualView, css }) {
   const { calendarProps, ref } = useCalendar();
-  return /* @__PURE__ */ jsxs(Box, { width: "fit-content", ref, ...calendarProps, children: [
-    /* @__PURE__ */ jsx(CalendarHeader, { dualView }),
-    /* @__PURE__ */ jsxs(Flex, { alignItems: "flex-start", children: [
-      /* @__PURE__ */ jsx(Box, { paddingRight: dualView ? 4 : 0, children: /* @__PURE__ */ jsx(CalendarGrid, {}) }),
-      dualView && /* @__PURE__ */ jsx(
-        Box,
-        {
-          paddingLeft: 4,
-          borderLeft: ["1px solid var(--spor-colors-outline-disabled)"],
-          children: /* @__PURE__ */ jsx(CalendarGrid, { offset: { months: 1 } })
-        }
-      )
-    ] })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      width: "fit-content",
+      ref,
+      ...calendarProps,
+      css,
+      "data-part": "root",
+      children: [
+        /* @__PURE__ */ jsx(CalendarHeader, { dualView }),
+        /* @__PURE__ */ jsxs(Flex, { alignItems: "flex-start", children: [
+          /* @__PURE__ */ jsx(Box, { paddingRight: dualView ? 4 : 0, children: /* @__PURE__ */ jsx(CalendarGrid, {}) }),
+          dualView && /* @__PURE__ */ jsx(
+            Box,
+            {
+              paddingLeft: 4,
+              borderLeft: ["1px solid var(--spor-colors-outline-disabled)"],
+              children: /* @__PURE__ */ jsx(CalendarGrid, { offset: { months: 1 } })
+            }
+          )
+        ] })
+      ]
+    }
+  );
 }
 function ScrollCalendar(boxProps) {
   const { state, calendarProps, ref, startValue } = useCalendar();
@@ -2079,6 +2147,7 @@ function CalendarCell2({
       ref,
       css: styles.dateCell,
       hidden: isOutsideVisibleRange,
+      "data-part": "calendar-cell",
       children: date.day
     }
   ) });
@@ -2111,8 +2180,8 @@ function CalendarGrid2({
     key: "datePicker"
   });
   const styles = recipe({ variant });
-  return /* @__PURE__ */ jsxs(Box, { as: "table", ...gridProps, css: styles.box, children: [
-    /* @__PURE__ */ jsx("thead", { ...headerProps, children: /* @__PURE__ */ jsx("tr", { children: weekDays2[language].map((day, index) => {
+  return /* @__PURE__ */ jsxs(Box, { as: "table", ...gridProps, css: styles.box, "data-part": "calendar-grid", children: [
+    /* @__PURE__ */ jsx("thead", { ...headerProps, children: /* @__PURE__ */ jsx("tr", { "data-part": "calendar-table-heading", children: weekDays2[language].map((day, index) => {
       return /* @__PURE__ */ jsx(
         Text3,
         {
@@ -2177,30 +2246,39 @@ function CalendarHeader2({
   );
   const areAllOtherYearsDisabled = isPreviousYearDisabled && isNextYearDisabled;
   const isYearPickerVisible = showYearNavigation && !areAllOtherYearsDisabled;
-  return /* @__PURE__ */ jsxs(Flex, { alignItems: "center", paddingBottom: "4", justifyContent: "space-between", children: [
-    /* @__PURE__ */ jsx(
-      CalendarNavigator,
-      {
-        title: title || (isYearPickerVisible ? monthTitle : monthAndYearTitle),
-        unit: "month",
-        onPrevious: () => state.setFocusedDate(state.focusedDate.subtract({ months: 1 })),
-        onNext: () => state.setFocusedDate(state.focusedDate.add({ months: 1 })),
-        isNextDisabled: !state.isPreviousVisibleRangeInvalid,
-        isPreviousDisabled: !state.isNextVisibleRangeInvalid
-      }
-    ),
-    isYearPickerVisible && /* @__PURE__ */ jsx(
-      CalendarNavigator,
-      {
-        title: jsDate.getFullYear().toString(),
-        unit: "year",
-        onPrevious: () => state.setFocusedDate(state.focusedDate.subtract({ years: 1 })),
-        onNext: () => state.setFocusedDate(state.focusedDate.add({ years: 1 })),
-        isPreviousDisabled: isPreviousYearDisabled,
-        isNextDisabled: isNextYearDisabled
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsxs(
+    Flex,
+    {
+      alignItems: "center",
+      paddingBottom: "4",
+      justifyContent: "space-between",
+      "data-part": "calendar-header",
+      children: [
+        /* @__PURE__ */ jsx(
+          CalendarNavigator,
+          {
+            title: title || (isYearPickerVisible ? monthTitle : monthAndYearTitle),
+            unit: "month",
+            onPrevious: () => state.setFocusedDate(state.focusedDate.subtract({ months: 1 })),
+            onNext: () => state.setFocusedDate(state.focusedDate.add({ months: 1 })),
+            isNextDisabled: !state.isPreviousVisibleRangeInvalid,
+            isPreviousDisabled: !state.isNextVisibleRangeInvalid
+          }
+        ),
+        isYearPickerVisible && /* @__PURE__ */ jsx(
+          CalendarNavigator,
+          {
+            title: jsDate.getFullYear().toString(),
+            unit: "year",
+            onPrevious: () => state.setFocusedDate(state.focusedDate.subtract({ years: 1 })),
+            onNext: () => state.setFocusedDate(state.focusedDate.add({ years: 1 })),
+            isPreviousDisabled: isPreviousYearDisabled,
+            isNextDisabled: isNextYearDisabled
+          }
+        )
+      ]
+    }
+  );
 }
 var capitalize = (string_ = "") => string_.charAt(0).toUpperCase() + string_.slice(1);
 var CalendarNavigator = ({
@@ -2274,6 +2352,7 @@ var texts8 = createTexts({
 function Calendar2({
   showYearNavigation,
   variant,
+  css,
   ...props
 }) {
   const { t } = useTranslation();
@@ -2290,10 +2369,18 @@ function Calendar2({
   const { calendarProps } = useCalendar$1(props, state);
   const calendarAriaLabel = calendarProps["aria-label"];
   const ariaLabel = t(texts9.calendar) + (calendarAriaLabel ? ` ${calendarAriaLabel}` : "");
-  return /* @__PURE__ */ jsxs(Box, { ...calendarProps, "aria-label": ariaLabel, css: styles.box, children: [
-    /* @__PURE__ */ jsx(CalendarHeader2, { state, showYearNavigation }),
-    /* @__PURE__ */ jsx(CalendarGrid2, { variant, state })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      ...calendarProps,
+      "aria-label": ariaLabel,
+      css: { ...styles.box, ...css },
+      children: [
+        /* @__PURE__ */ jsx(CalendarHeader2, { state, showYearNavigation }),
+        /* @__PURE__ */ jsx(CalendarGrid2, { variant, state })
+      ]
+    }
+  );
 }
 var texts9 = createTexts({
   calendar: {
@@ -2507,6 +2594,7 @@ var DatePicker = forwardRef(
     invalid = false,
     helperText,
     positioning,
+    css,
     ...props
   }, externalRef) => {
     const chakraFieldProps = useFieldContext();
@@ -2544,7 +2632,8 @@ var DatePicker = forwardRef(
       {
         ...calendarProps,
         variant,
-        showYearNavigation
+        showYearNavigation,
+        css
       }
     ) }) }) });
     return /* @__PURE__ */ jsx(I18nProvider, { locale, children: /* @__PURE__ */ jsx(
@@ -2554,6 +2643,7 @@ var DatePicker = forwardRef(
         display: "inline-flex",
         flexDirection: "column",
         width,
+        css,
         children: /* @__PURE__ */ jsxs(Popover$1.Root, { ...dialogProps, positioning, children: [
           /* @__PURE__ */ jsx(
             Field3,
@@ -4613,6 +4703,7 @@ var Switch = forwardRef(
       invalid,
       errorText,
       helperText,
+      css,
       ...rest
     } = props;
     const recipe = useSlotRecipe({ key: "switch" });
@@ -4626,6 +4717,7 @@ var Switch = forwardRef(
         helperText,
         required: props.required,
         id: rest.id,
+        css,
         children: /* @__PURE__ */ jsxs(
           Switch$1.Root,
           {
@@ -5963,7 +6055,7 @@ var ProgressDot = ({ isActive }) => {
     }
   );
 };
-var ProgressIndicator = forwardRef(({ numberOfSteps, activeStep }, ref) => {
+var ProgressIndicator = forwardRef(({ numberOfSteps, activeStep, css }, ref) => {
   const { t } = useTranslation();
   const recipe = useSlotRecipe({
     key: "progressIndicator"
@@ -5972,18 +6064,24 @@ var ProgressIndicator = forwardRef(({ numberOfSteps, activeStep }, ref) => {
   return /* @__PURE__ */ jsx(
     Box,
     {
-      css: styles.root,
+      css: { ...styles.root, ...css },
       role: "progressbar",
       "aria-valuemin": 1,
       "aria-valuemax": numberOfSteps,
       "aria-valuenow": activeStep,
       "aria-valuetext": t(texts26.stepsOf(activeStep, numberOfSteps)),
       ref,
-      children: /* @__PURE__ */ jsx(Box, { css: styles.container, children: Array.from({ length: numberOfSteps }, (_, index) => /* @__PURE__ */ jsx(
-        ProgressDot,
+      children: /* @__PURE__ */ jsx(Box, { css: { ...styles.container, ...css }, children: Array.from({ length: numberOfSteps }, (_, index) => /* @__PURE__ */ jsx(
+        Box,
         {
-          "aria-valuenow": index + 1,
-          isActive: activeStep === index + 1
+          "data-part": activeStep === index + 1 ? "current-step" : "step",
+          children: /* @__PURE__ */ jsx(
+            ProgressDot,
+            {
+              "aria-valuenow": index + 1,
+              isActive: activeStep === index + 1
+            }
+          )
         },
         index
       )) })
@@ -6142,7 +6240,8 @@ var Stepper = forwardRef(
       heading,
       headingLevel,
       variant,
-      disabled
+      disabled,
+      css
     } = props;
     const recipe = useSlotRecipe({ key: "stepper" });
     const style = recipe({ variant });
@@ -6150,14 +6249,14 @@ var Stepper = forwardRef(
     const activeStep = Number(activeStepAsStringOrNumber);
     const { t } = useTranslation();
     const hideBackButtonOnFirstStep = activeStep === 1 && !onBackButtonClick;
-    return /* @__PURE__ */ jsx(Box, { css: style.root, ref, children: /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx(Box, { css: { ...style.root, ...css }, ref, children: /* @__PURE__ */ jsx(
       StepperProvider,
       {
         onClick,
         activeStep,
         variant,
         numberOfSteps,
-        children: /* @__PURE__ */ jsxs(Box, { css: style.container, children: [
+        children: /* @__PURE__ */ jsxs(Box, { css: style.container, "data-part": "root", children: [
           /* @__PURE__ */ jsx(Box, { css: style.innerContainer, children: /* @__PURE__ */ jsxs(
             Flex,
             {
@@ -6183,8 +6282,17 @@ var Stepper = forwardRef(
                     }
                   }
                 ),
-                heading && /* @__PURE__ */ jsx(Text3, { variant: "sm", as: headingLevel, css: style.title, children: heading }),
-                /* @__PURE__ */ jsx(Box, { css: style.stepCounter, children: t(texts27.stepsOf(activeStep, numberOfSteps)) })
+                heading && /* @__PURE__ */ jsx(
+                  Text3,
+                  {
+                    variant: "sm",
+                    as: headingLevel,
+                    css: style.title,
+                    "data-part": "title",
+                    children: heading
+                  }
+                ),
+                /* @__PURE__ */ jsx(Box, { css: style.stepCounter, "data-part": "step-counter", children: t(texts27.stepsOf(activeStep, numberOfSteps)) })
               ]
             }
           ) }),
@@ -6234,7 +6342,7 @@ var StepperStep = ({
     _dark: "whiteAlpha.200"
   };
   const disabled = state !== "active" && disabledOverride || state === "disabled";
-  return /* @__PURE__ */ jsxs(Box, { css: style.stepContainer, children: [
+  return /* @__PURE__ */ jsxs(Box, { css: style.stepContainer, "data-part": "step-container", children: [
     stepNumber > 1 && /* @__PURE__ */ jsx(
       DropdownRightFill18Icon,
       {
@@ -6264,6 +6372,7 @@ var StepperStep = ({
         "aria-current": state === "active" ? "step" : void 0,
         css: state === "active" ? style.stepButton._currentStep : style.stepButton,
         fontWeight: state === "active" ? "bold" : void 0,
+        "data-part": "step-button",
         children
       }
     )