@vygruppen/spor-react 12.24.11 → 12.24.12

package/dist/index.cjs

@@ -93,7 +93,7 @@ var warnAboutMismatchingIcon = ({
 };
 var Accordion = React20.forwardRef(
   (props, ref) => {
-    const { variant = "core", children, gap = 2, ...rest } = props;
+    const { variant = "core", children, gap = 2, css, ...rest } = props;
     const recipe = react.useSlotRecipe({ key: "accordion" });
     const styles = recipe({ variant });
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -101,7 +101,7 @@ var Accordion = React20.forwardRef(
       {
         ...rest,
         ref,
-        css: styles.root,
+        css: { ...styles.root, ...css },
         variant,
         children: /* @__PURE__ */ jsxRuntime.jsx(react.Stack, { gap, children })
       }
@@ -113,28 +113,42 @@ var AccordionItemTrigger = React20.forwardRef(function AccordionItemTrigger2(pro
     startElement,
     children,
     headingLevel,
+    css,
     showChevron = true,
     ...rest
   } = props;
   warnAboutMismatchingIcon({ icon: startElement });
   const recipe = react.useSlotRecipe({ key: "accordion" });
   const styles = recipe();
-  return /* @__PURE__ */ jsxRuntime.jsx(react.Box, { as: headingLevel, children: /* @__PURE__ */ jsxRuntime.jsxs(react.Accordion.ItemTrigger, { ...rest, ref, css: styles.itemTrigger, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(react.HStack, { flex: "1", gap: 1, textAlign: "start", width: "full", children: [
-      startElement && startElement,
-      children
-    ] }),
-    showChevron && /* @__PURE__ */ jsxRuntime.jsx(react.Accordion.ItemIndicator, { children: /* @__PURE__ */ jsxRuntime.jsx(spor_icon_react_star.DropdownDownFill24Icon, {}) })
-  ] }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(react.Box, { as: headingLevel, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    react.Accordion.ItemTrigger,
+    {
+      ...rest,
+      ref,
+      css: { ...styles.itemTrigger, ...css },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(react.HStack, { flex: "1", gap: 1, textAlign: "start", width: "full", children: [
+          startElement && startElement,
+          children
+        ] }),
+        showChevron && /* @__PURE__ */ jsxRuntime.jsx(react.Accordion.ItemIndicator, { children: /* @__PURE__ */ jsxRuntime.jsx(spor_icon_react_star.DropdownDownFill24Icon, {}) })
+      ]
+    }
+  ) });
 });
 var AccordionItemContent = React20.forwardRef(function AccordionItemContent2(props, ref) {
-  const { children, "aria-labelledby": ariaLabelledBy, ...otherProps } = props;
+  const {
+    children,
+    css,
+    "aria-labelledby": ariaLabelledBy,
+    ...otherProps
+  } = props;
   const recipe = react.useSlotRecipe({ key: "accordion" });
   const styles = recipe();
   return /* @__PURE__ */ jsxRuntime.jsx(
     react.Accordion.ItemContent,
     {
-      css: styles.itemContent,
+      css: { ...styles.itemContent, ...css },
       "aria-labelledby": ariaLabelledBy,
       children: /* @__PURE__ */ jsxRuntime.jsx(react.Accordion.ItemBody, { ...otherProps, ref, children })
     }
@@ -344,6 +358,7 @@ var ProgressBar = React20.forwardRef(
     isActive = true,
     showValueText = false,
     height = "0.5rem",
+    css,
     ...rest
   }, ref) => {
     const recipe = react.useSlotRecipe({ key: "progressbar" });
@@ -352,21 +367,30 @@ var ProgressBar = React20.forwardRef(
       label,
       delay: labelRotationDelay
     });
-    return /* @__PURE__ */ jsxRuntime.jsxs(react.Progress.Root, { css: styles.container, ref, value, ...rest, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        react.Progress.Track,
-        {
-          height,
-          css: isActive ? styles.background : styles.disabledBackground,
-          children: /* @__PURE__ */ jsxRuntime.jsx(react.Progress.Range, { css: styles.progress })
-        }
-      ),
-      label && /* @__PURE__ */ jsxRuntime.jsx(react.Progress.Label, { css: styles.description, children: currentLoadingText }),
-      showValueText && /* @__PURE__ */ jsxRuntime.jsxs(react.Progress.ValueText, { children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      react.Progress.Root,
+      {
+        css: { ...styles.container, ...css },
+        ref,
         value,
-        "%"
-      ] })
-    ] });
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            react.Progress.Track,
+            {
+              height,
+              css: isActive ? styles.background : styles.disabledBackground,
+              children: /* @__PURE__ */ jsxRuntime.jsx(react.Progress.Range, { css: styles.progress })
+            }
+          ),
+          label && /* @__PURE__ */ jsxRuntime.jsx(react.Progress.Label, { css: styles.description, children: currentLoadingText }),
+          showValueText && /* @__PURE__ */ jsxRuntime.jsxs(react.Progress.ValueText, { children: [
+            value,
+            "%"
+          ] })
+        ]
+      }
+    );
   }
 );
 ProgressBar.displayName = "ProgressBar";
@@ -1167,24 +1191,40 @@ var Alert = React20.forwardRef((props, ref) => {
   if (!open)
     return null;
   return /* @__PURE__ */ jsxRuntime.jsxs(react.Alert.Root, { ref, ...props, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(react.Alert.Content, { flexDirection: title ? "column" : "row", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(react.HStack, { gap: "1", alignItems: "flex-start", children: [
-        showIndicator && /* @__PURE__ */ jsxRuntime.jsx(react.Alert.Indicator, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(AlertIcon, { variant: props.variant ?? "info", customIcon: icon }) }),
-        title && /* @__PURE__ */ jsxRuntime.jsx(react.Alert.Title, { paddingRight: closable ? 6 : 0, children: title })
-      ] }),
-      children && /* @__PURE__ */ jsxRuntime.jsx(
-        react.Alert.Description,
-        {
-          width: "100%",
-          paddingLeft: title ? 0.5 : 0,
-          paddingRight: closable ? 6 : 0,
-          children
-        }
-      )
-    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      react.Alert.Content,
+      {
+        flexDirection: title ? "column" : "row",
+        "data-part": "content",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(react.HStack, { gap: "1", alignItems: "flex-start", children: [
+            showIndicator && /* @__PURE__ */ jsxRuntime.jsx(react.Alert.Indicator, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(AlertIcon, { variant: props.variant ?? "info", customIcon: icon }) }),
+            title && /* @__PURE__ */ jsxRuntime.jsx(
+              react.Alert.Title,
+              {
+                paddingRight: closable ? 6 : 0,
+                "data-part": "title",
+                children: title
+              }
+            )
+          ] }),
+          children && /* @__PURE__ */ jsxRuntime.jsx(
+            react.Alert.Description,
+            {
+              width: "100%",
+              paddingLeft: title ? 0.5 : 0,
+              paddingRight: closable ? 6 : 0,
+              "data-part": "description",
+              children
+            }
+          )
+        ]
+      }
+    ),
     closable && /* @__PURE__ */ jsxRuntime.jsx(
       CloseButton,
       {
+        "data-part": "close-button",
         size: "xs",
         position: "absolute",
         top: "1.5",
@@ -1352,15 +1392,22 @@ var texts6 = createTexts({
   }
 });
 var Breadcrumb = React20.forwardRef(
-  ({ children, ...props }, ref) => {
+  ({ children, css, ...props }, ref) => {
     const validChildren = React20__namespace.default.Children.toArray(children).filter(
       (element) => React20__namespace.default.isValidElement(element)
     );
-    return /* @__PURE__ */ jsxRuntime.jsx(react.Breadcrumb.Root, { ref, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(react.Breadcrumb.List, { children: validChildren.map((child, index) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(react.Breadcrumb.Root, { ref, ...props, css, children: /* @__PURE__ */ jsxRuntime.jsx(react.Breadcrumb.List, { "data-part": "list", children: validChildren.map((child, index) => {
       const isLast = index === validChildren.length - 1;
       return /* @__PURE__ */ jsxRuntime.jsxs(React20__namespace.default.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(react.Breadcrumb.Item, { children: child }),
-        !isLast && /* @__PURE__ */ jsxRuntime.jsx(react.Breadcrumb.Separator, { "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(spor_icon_react_star.DropdownRightFill18Icon, {}) })
+        /* @__PURE__ */ jsxRuntime.jsx(react.Breadcrumb.Item, { "data-part": "item", children: child }),
+        !isLast && /* @__PURE__ */ jsxRuntime.jsx(
+          react.Breadcrumb.Separator,
+          {
+            "aria-hidden": "true",
+            "data-part": "separator",
+            children: /* @__PURE__ */ jsxRuntime.jsx(spor_icon_react_star.DropdownRightFill18Icon, {})
+          }
+        )
       ] }, index);
     }) }) });
   }
@@ -1622,6 +1669,7 @@ function CalendarCell({ date: date$1, currentMonth }) {
           children: /* @__PURE__ */ jsxRuntime.jsx(
             react.Box,
             {
+              "data-part": "calendar-cell",
               width: "100%",
               height: "100%",
               display: "flex",
@@ -1682,7 +1730,7 @@ function CalendarGrid({ offset = {} }) {
     state
   );
   const weeksInMonth = date.getWeeksInMonth(startDate, locale);
-  return /* @__PURE__ */ jsxRuntime.jsxs("table", { ...gridProps, cellPadding: "0", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("table", { ...gridProps, cellPadding: "0", "data-part": "calendar-grid", children: [
     /* @__PURE__ */ jsxRuntime.jsx("thead", { ...headerProps, children: /* @__PURE__ */ jsxRuntime.jsx("tr", { children: weekDays[language].map((day, index) => /* @__PURE__ */ jsxRuntime.jsx("th", { children: /* @__PURE__ */ jsxRuntime.jsx(
       Text3,
       {
@@ -1699,6 +1747,7 @@ function CalendarGrid({ offset = {} }) {
         paddingTop: 0.5,
         textAlign: "center",
         fontWeight: "bold",
+        "data-part": "calendar-table-heading",
         children: day
       },
       index
@@ -1733,63 +1782,72 @@ function CalendarHeader({ dualView }) {
   function handleNext() {
     state.focusNextPage();
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs(react.Flex, { flex: 1, alignItems: "center", paddingBottom: 4, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(reactAria.VisuallyHidden, { children: /* @__PURE__ */ jsxRuntime.jsx("h2", { children: calendarProps["aria-label"] }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      IconButton,
-      {
-        size: "md",
-        onClick: handlePrevious,
-        variant: "ghost",
-        marginLeft: 1,
-        disabled: prevButtonProps.isDisabled,
-        "aria-label": t(texts7.previousMonth),
-        icon: /* @__PURE__ */ jsxRuntime.jsx(icons_exports.DropdownLeftFill24Icon, {})
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
+    react.Flex,
+    {
+      flex: 1,
+      alignItems: "center",
+      paddingBottom: 4,
+      "data-part": "calendar-header",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(reactAria.VisuallyHidden, { children: /* @__PURE__ */ jsxRuntime.jsx("h2", { children: calendarProps["aria-label"] }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          IconButton,
+          {
+            size: "md",
+            onClick: handlePrevious,
+            variant: "ghost",
+            marginLeft: 1,
+            disabled: prevButtonProps.isDisabled,
+            "aria-label": t(texts7.previousMonth),
+            icon: /* @__PURE__ */ jsxRuntime.jsx(icons_exports.DropdownLeftFill24Icon, {})
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+          IconButton,
+          {
+            size: "md",
+            onClick: handleNext,
+            marginRight: 1,
+            variant: "ghost",
+            disabled: nextButtonProps.isDisabled,
+            "aria-label": t(texts7.nextMonth),
+            icon: /* @__PURE__ */ jsxRuntime.jsx(icons_exports.DropdownRightFill24Icon, {})
+          }
         )
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      IconButton,
-      {
-        size: "md",
-        onClick: handleNext,
-        marginRight: 1,
-        variant: "ghost",
-        disabled: nextButtonProps.isDisabled,
-        "aria-label": t(texts7.nextMonth),
-        icon: /* @__PURE__ */ jsxRuntime.jsx(icons_exports.DropdownRightFill24Icon, {})
-      }
-    )
-  ] });
+      ]
+    }
+  );
 }
 var texts7 = createTexts({
   previousMonth: {
@@ -1805,22 +1863,32 @@ var texts7 = createTexts({
     sv: "N\xE4sta m\xE5nad"
   }
 });
-function Calendar({ dualView }) {
+function Calendar({ dualView, css }) {
   const { calendarProps, ref } = useCalendar();
-  return /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { width: "fit-content", ref, ...calendarProps, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(CalendarHeader, { dualView }),
-    /* @__PURE__ */ jsxRuntime.jsxs(react.Flex, { alignItems: "flex-start", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(react.Box, { paddingRight: dualView ? 4 : 0, children: /* @__PURE__ */ jsxRuntime.jsx(CalendarGrid, {}) }),
-      dualView && /* @__PURE__ */ jsxRuntime.jsx(
-        react.Box,
-        {
-          paddingLeft: 4,
-          borderLeft: ["1px solid var(--spor-colors-outline-disabled)"],
-          children: /* @__PURE__ */ jsxRuntime.jsx(CalendarGrid, { offset: { months: 1 } })
-        }
-      )
-    ] })
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    react.Box,
+    {
+      width: "fit-content",
+      ref,
+      ...calendarProps,
+      css,
+      "data-part": "root",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(CalendarHeader, { dualView }),
+        /* @__PURE__ */ jsxRuntime.jsxs(react.Flex, { alignItems: "flex-start", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(react.Box, { paddingRight: dualView ? 4 : 0, children: /* @__PURE__ */ jsxRuntime.jsx(CalendarGrid, {}) }),
+          dualView && /* @__PURE__ */ jsxRuntime.jsx(
+            react.Box,
+            {
+              paddingLeft: 4,
+              borderLeft: ["1px solid var(--spor-colors-outline-disabled)"],
+              children: /* @__PURE__ */ jsxRuntime.jsx(CalendarGrid, { offset: { months: 1 } })
+            }
+          )
+        ] })
+      ]
+    }
+  );
 }
 function ScrollCalendar(boxProps) {
   const { state, calendarProps, ref, startValue } = useCalendar();
@@ -2099,6 +2167,7 @@ function CalendarCell2({
       ref,
       css: styles.dateCell,
       hidden: isOutsideVisibleRange,
+      "data-part": "calendar-cell",
       children: date$1.day
     }
   ) });
@@ -2131,8 +2200,8 @@ function CalendarGrid2({
     key: "datePicker"
   });
   const styles = recipe({ variant });
-  return /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { as: "table", ...gridProps, css: styles.box, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("thead", { ...headerProps, children: /* @__PURE__ */ jsxRuntime.jsx("tr", { children: weekDays2[language].map((day, index) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { as: "table", ...gridProps, css: styles.box, "data-part": "calendar-grid", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("thead", { ...headerProps, children: /* @__PURE__ */ jsxRuntime.jsx("tr", { "data-part": "calendar-table-heading", children: weekDays2[language].map((day, index) => {
       return /* @__PURE__ */ jsxRuntime.jsx(
         Text3,
         {
@@ -2197,30 +2266,39 @@ function CalendarHeader2({
   );
   const areAllOtherYearsDisabled = isPreviousYearDisabled && isNextYearDisabled;
   const isYearPickerVisible = showYearNavigation && !areAllOtherYearsDisabled;
-  return /* @__PURE__ */ jsxRuntime.jsxs(react.Flex, { alignItems: "center", paddingBottom: "4", justifyContent: "space-between", children: [
-    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
+    react.Flex,
+    {
+      alignItems: "center",
+      paddingBottom: "4",
+      justifyContent: "space-between",
+      "data-part": "calendar-header",
+      children: [
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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 = ({
@@ -2294,6 +2372,7 @@ var texts8 = createTexts({
 function Calendar2({
   showYearNavigation,
   variant,
+  css,
   ...props
 }) {
   const { t } = useTranslation();
@@ -2310,10 +2389,18 @@ function Calendar2({
   const { calendarProps } = reactAria.useCalendar(props, state);
   const calendarAriaLabel = calendarProps["aria-label"];
   const ariaLabel = t(texts9.calendar) + (calendarAriaLabel ? ` ${calendarAriaLabel}` : "");
-  return /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { ...calendarProps, "aria-label": ariaLabel, css: styles.box, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(CalendarHeader2, { state, showYearNavigation }),
-    /* @__PURE__ */ jsxRuntime.jsx(CalendarGrid2, { variant, state })
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    react.Box,
+    {
+      ...calendarProps,
+      "aria-label": ariaLabel,
+      css: { ...styles.box, ...css },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(CalendarHeader2, { state, showYearNavigation }),
+        /* @__PURE__ */ jsxRuntime.jsx(CalendarGrid2, { variant, state })
+      ]
+    }
+  );
 }
 var texts9 = createTexts({
   calendar: {
@@ -2527,6 +2614,7 @@ var DatePicker = React20.forwardRef(
     invalid = false,
     helperText,
     positioning,
+    css,
     ...props
   }, externalRef) => {
     const chakraFieldProps = react.useFieldContext();
@@ -2564,7 +2652,8 @@ var DatePicker = React20.forwardRef(
       {
         ...calendarProps,
         variant,
-        showYearNavigation
+        showYearNavigation,
+        css
       }
     ) }) }) });
     return /* @__PURE__ */ jsxRuntime.jsx(reactAria.I18nProvider, { locale, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -2574,6 +2663,7 @@ var DatePicker = React20.forwardRef(
         display: "inline-flex",
         flexDirection: "column",
         width,
+        css,
         children: /* @__PURE__ */ jsxRuntime.jsxs(react.Popover.Root, { ...dialogProps, positioning, children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             Field3,
@@ -4633,6 +4723,7 @@ var Switch = React20.forwardRef(
       invalid,
       errorText,
       helperText,
+      css,
       ...rest
     } = props;
     const recipe = react.useSlotRecipe({ key: "switch" });
@@ -4646,6 +4737,7 @@ var Switch = React20.forwardRef(
         helperText,
         required: props.required,
         id: rest.id,
+        css,
         children: /* @__PURE__ */ jsxRuntime.jsxs(
           react.Switch.Root,
           {
@@ -5983,7 +6075,7 @@ var ProgressDot = ({ isActive }) => {
     }
   );
 };
-var ProgressIndicator = React20.forwardRef(({ numberOfSteps, activeStep }, ref) => {
+var ProgressIndicator = React20.forwardRef(({ numberOfSteps, activeStep, css }, ref) => {
   const { t } = useTranslation();
   const recipe = react.useSlotRecipe({
     key: "progressIndicator"
@@ -5992,18 +6084,24 @@ var ProgressIndicator = React20.forwardRef(({ numberOfSteps, activeStep }, ref)
   return /* @__PURE__ */ jsxRuntime.jsx(
     react.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__ */ jsxRuntime.jsx(react.Box, { css: styles.container, children: Array.from({ length: numberOfSteps }, (_, index) => /* @__PURE__ */ jsxRuntime.jsx(
-        ProgressDot,
+      children: /* @__PURE__ */ jsxRuntime.jsx(react.Box, { css: { ...styles.container, ...css }, children: Array.from({ length: numberOfSteps }, (_, index) => /* @__PURE__ */ jsxRuntime.jsx(
+        react.Box,
         {
-          "aria-valuenow": index + 1,
-          isActive: activeStep === index + 1
+          "data-part": activeStep === index + 1 ? "current-step" : "step",
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            ProgressDot,
+            {
+              "aria-valuenow": index + 1,
+              isActive: activeStep === index + 1
+            }
+          )
         },
         index
       )) })
@@ -6162,7 +6260,8 @@ var Stepper = React20.forwardRef(
       heading,
       headingLevel,
       variant,
-      disabled
+      disabled,
+      css
     } = props;
     const recipe = react.useSlotRecipe({ key: "stepper" });
     const style = recipe({ variant });
@@ -6170,14 +6269,14 @@ var Stepper = React20.forwardRef(
     const activeStep = Number(activeStepAsStringOrNumber);
     const { t } = useTranslation();
     const hideBackButtonOnFirstStep = activeStep === 1 && !onBackButtonClick;
-    return /* @__PURE__ */ jsxRuntime.jsx(react.Box, { css: style.root, ref, children: /* @__PURE__ */ jsxRuntime.jsx(
+    return /* @__PURE__ */ jsxRuntime.jsx(react.Box, { css: { ...style.root, ...css }, ref, children: /* @__PURE__ */ jsxRuntime.jsx(
       StepperProvider,
       {
         onClick,
         activeStep,
         variant,
         numberOfSteps,
-        children: /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { css: style.container, children: [
+        children: /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { css: style.container, "data-part": "root", children: [
           /* @__PURE__ */ jsxRuntime.jsx(react.Box, { css: style.innerContainer, children: /* @__PURE__ */ jsxRuntime.jsxs(
             react.Flex,
             {
@@ -6203,8 +6302,17 @@ var Stepper = React20.forwardRef(
                     }
                   }
                 ),
-                heading && /* @__PURE__ */ jsxRuntime.jsx(Text3, { variant: "sm", as: headingLevel, css: style.title, children: heading }),
-                /* @__PURE__ */ jsxRuntime.jsx(react.Box, { css: style.stepCounter, children: t(texts27.stepsOf(activeStep, numberOfSteps)) })
+                heading && /* @__PURE__ */ jsxRuntime.jsx(
+                  Text3,
+                  {
+                    variant: "sm",
+                    as: headingLevel,
+                    css: style.title,
+                    "data-part": "title",
+                    children: heading
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(react.Box, { css: style.stepCounter, "data-part": "step-counter", children: t(texts27.stepsOf(activeStep, numberOfSteps)) })
               ]
             }
           ) }),
@@ -6254,7 +6362,7 @@ var StepperStep = ({
     _dark: "whiteAlpha.200"
   };
   const disabled = state !== "active" && disabledOverride || state === "disabled";
-  return /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { css: style.stepContainer, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { css: style.stepContainer, "data-part": "step-container", children: [
     stepNumber > 1 && /* @__PURE__ */ jsxRuntime.jsx(
       spor_icon_react_star.DropdownRightFill18Icon,
       {
@@ -6284,6 +6392,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
       }
     )