@aivenio/aquarium 6.3.0 → 6.5.0

package/dist/system.mjs

@@ -1813,9 +1813,9 @@ var tokens_default = {
     }
   },
   code: {
-    background: "rgba(250,250,250,1)",
+    background: "rgba(255,255,255,1)",
     text: "rgba(45,46,48,1)",
-    variable: "rgba(123,45,139,1)",
+    variable: "rgba(91,30,103,1)",
     keyword: "rgba(202, 33, 101, 1)",
     string: "rgba(0, 127, 115, 1)",
     function: "rgba(9, 128, 193, 1)",
@@ -2281,7 +2281,7 @@ import React6 from "react";
 import { useFocusWithin } from "@react-aria/interactions";
 import { OverlayContainer, useOverlayPosition } from "@react-aria/overlays";
 import { useTooltip, useTooltipTrigger } from "@react-aria/tooltip";
-import { mergeProps } from "@react-aria/utils";
+import { isFocusable, mergeProps } from "@react-aria/utils";
 
 // src/molecules/Tooltip/useTooltipTriggerState.ts
 import { useEffect as useEffect2, useMemo, useRef } from "react";
@@ -2417,6 +2417,14 @@ var Tooltip = ({ delay = 200, ...props }) => {
     shouldFlip,
     offset: ARROW_OFFSET
   });
+  const [containsFocusable, setContainsFocusable] = React6.useState(false);
+  React6.useLayoutEffect(() => {
+    if (triggerRef.current) {
+      const elements = Array.from(triggerRef.current.querySelectorAll("*"));
+      const hasFocusable = elements.some((el) => isFocusable(el));
+      setContainsFocusable(hasFocusable);
+    }
+  });
   const { focusWithinProps } = useFocusWithin({
     onFocusWithinChange: (isFocusWithin) => isFocusWithin ? state.open() : state.close()
   });
@@ -2445,6 +2453,7 @@ var Tooltip = ({ delay = 200, ...props }) => {
     {
       className: display,
       ...triggerProps,
+      tabIndex: containsFocusable ? -1 : triggerProps.tabIndex,
       onFocus: (e) => {
         triggerProps.onFocus?.(e);
         focusWithinProps.onFocus?.(e);
@@ -6081,15 +6090,7 @@ Modal.TitleContainer = ({ children, className, ...rest }) => {
   const { titleContainer: titleContainer2 } = modalStyles();
   return /* @__PURE__ */ React59.createElement("div", { ...rest, className: titleContainer2({ className }) }, children);
 };
-var ModalBody = ({
-  children,
-  className,
-  noFooter = false,
-  maxHeight,
-  style,
-  size,
-  ...rest
-}) => {
+var ModalBody = ({ children, className, contentClassName, noFooter = false, maxHeight, style, size, ...rest }) => {
   const { body, bodyContent } = modalStyles({ size });
   const { containerRef, topSentinelRef, bottomSentinelRef, showTopFade, showBottomFade } = useScrollFade();
   return /* @__PURE__ */ React59.createElement(
@@ -6101,7 +6102,7 @@ var ModalBody = ({
       style: { maxHeight, ...style }
     },
     /* @__PURE__ */ React59.createElement("div", { ref: topSentinelRef, "aria-hidden": "true", className: "h-1px" }),
-    /* @__PURE__ */ React59.createElement("div", { className: bodyContent({ noFooter }) }, children),
+    /* @__PURE__ */ React59.createElement("div", { className: bodyContent({ noFooter, className: contentClassName }) }, children),
     /* @__PURE__ */ React59.createElement("div", { ref: bottomSentinelRef, "aria-hidden": "true", className: "h-1px -mt-1px" })
   );
 };
@@ -8076,11 +8077,6 @@ var useDataListContext = () => {
 // src/molecules/DataList/DataListGroup.tsx
 import React80 from "react";
 import { isFunction as isFunction2, noop } from "lodash-es";
-
-// src/molecules/DataList/utils.ts
-var flattenRows = (rows) => areRowsGrouped(rows) ? Object.values(rows).flatMap(flattenRows) : rows;
-
-// src/molecules/DataList/DataListGroup.tsx
 var GAP = 8;
 var INDENTATION = 28;
 var sortGroupKeys = (groupKeys) => [...groupKeys].sort((a) => a === "undefined" ? -1 : 1);
@@ -8111,6 +8107,7 @@ var DataListGroup = ({
     rows,
     selectable,
     selectedRows,
+    statsByNode,
     getOnSelectionChangeForId,
     selectionDisabled = () => false,
     getRowSelectionLabel = getDefaultRowSelectionLabel,
@@ -8139,8 +8136,8 @@ var DataListGroup = ({
         items: groups,
         renderItem: (row, index) => {
           const isSelected = selectedRows?.includes(row.id) ?? false;
-          const isDisabled = disabled?.(row, index, rows);
-          const isSelectionDisabled = selectionDisabled(row, index, rows);
+          const isDisabled = disabled?.(row, index, groups);
+          const isSelectionDisabled = selectionDisabled(row, index, groups);
           const isLastRow = isLastGroup && index === groups.length - 1;
           return /* @__PURE__ */ React80.createElement(
             DataListRow,
@@ -8150,7 +8147,7 @@ var DataListGroup = ({
               row,
               index,
               isLast: isLastRow,
-              rows,
+              rows: groups,
               active: selectable && isSelected,
               menu: /* @__PURE__ */ React80.createElement(
                 DataListRowMenu,
@@ -8179,7 +8176,7 @@ var DataListGroup = ({
                   RadioButton,
                   {
                     value: row2.id.toString(),
-                    "aria-label": getRowSelectionLabel(row2, index2, isSelected, rows),
+                    "aria-label": getRowSelectionLabel(row2, index2, isSelected, groups),
                     onChange: noop,
                     checked: isSelected,
                     disabled: isDisabled || isSelectionDisabled
@@ -8187,7 +8184,7 @@ var DataListGroup = ({
                 ), isMultiSelectionMode && /* @__PURE__ */ React80.createElement(
                   Checkbox,
                   {
-                    "aria-label": getRowSelectionLabel(row2, index2, isSelected, rows),
+                    "aria-label": getRowSelectionLabel(row2, index2, isSelected, groups),
                     onChange: getOnSelectionChangeForId(row2.id),
                     checked: isSelected,
                     disabled: isDisabled || isSelectionDisabled
@@ -8224,10 +8221,12 @@ var DataListGroup = ({
           );
         }
         const openPanelId = expandedGroupIds ? expandedGroupIds.find((id) => id === key) ?? null : void 0;
-        const nestedRowIds = flattenRows(group).map((row) => row.id);
-        const nestedSelectedIds = selectedRows?.filter((id) => nestedRowIds.includes(id)) ?? [];
-        const allSelected = nestedRowIds.length === nestedSelectedIds.length;
-        const isChecked = nestedSelectedIds.length > 0;
+        const { selectableIds, allSelected, isChecked, isDisabled } = statsByNode.get(group) ?? {
+          selectableIds: [],
+          allSelected: false,
+          isChecked: false,
+          isDisabled: true
+        };
         const isActiveRow = !!openPanelId || selectable && isChecked;
         const isLastRow = isLastGroup && index === groupKeys.length - 1 && !openPanelId;
         return /* @__PURE__ */ React80.createElement(Accordion, { key, openPanelId }, hasCustomRowForGroup && /* @__PURE__ */ React80.createElement(DataList.Row, { active: isActiveRow, noDivider: isLastRow }, selectable && /* @__PURE__ */ React80.createElement(DataList.Cell, null, isMultiSelectionMode && /* @__PURE__ */ React80.createElement(
@@ -8236,8 +8235,8 @@ var DataListGroup = ({
             "aria-label": getGroupCheckboxLabel(key, group, index, isChecked, rows),
             checked: isChecked,
             indeterminate: isChecked && !allSelected,
-            disabled: group.length === 0,
-            onChange: getOnSelectionChangeForId(nestedRowIds)
+            disabled: isDisabled,
+            onChange: getOnSelectionChangeForId(selectableIds)
           }
         )), /* @__PURE__ */ React80.createElement(
           List,
@@ -8271,8 +8270,8 @@ var DataListGroup = ({
             "aria-label": getGroupCheckboxLabel(key, group, index, isChecked, rows),
             checked: isChecked,
             indeterminate: isChecked && !allSelected,
-            disabled: group.length === 0,
-            onChange: getOnSelectionChangeForId(nestedRowIds)
+            disabled: isDisabled,
+            onChange: getOnSelectionChangeForId(selectableIds)
           }
         )), /* @__PURE__ */ React80.createElement(
           DataList.Cell,
@@ -8410,6 +8409,7 @@ var DataList2 = ({
   const [sort, updateSort] = useTableSort({ ...initialSortState, onSortChanged });
   const sortedRows = isArray2(rows) ? sortRowsBy(rows, sort) : [];
   const groups = areRowsGrouped(rows) ? rows : group ? isFunction3(group) ? group(sortedRows) : groupBy2(sortedRows, group) : void 0;
+  const rootNode = groups ?? sortedRows;
   const isCollapsible = isFunction3(rowDetails);
   const templateColumns = compact([
     selectable ? "fit-content(28px)" : void 0,
@@ -8432,26 +8432,37 @@ var DataList2 = ({
     }
   };
   const isMultiSelectionMode = selectable === "multiple" || selectable === "multiple-not-all";
-  const allRows = flattenRows(rows);
-  const totalSelected = selected?.length ?? 0;
-  const allEnabledRowIds = compact(
-    allRows.map(
-      (row, index) => disabled?.(row, index, sortedRows) || selectionDisabled(row, index, sortedRows) ? void 0 : row.id
-    )
-  );
-  const allRowsSelected = totalSelected >= allEnabledRowIds.length;
+  const selectedIds = new Set(selected);
+  const buildSelectionStats = (root) => {
+    const statsByNode2 = /* @__PURE__ */ new Map();
+    const recordStats = (node) => {
+      const selectableIds2 = areRowsGrouped(node) ? Object.values(node).flatMap((child) => recordStats(child).selectableIds) : node.filter((row, i) => !disabled?.(row, i, node) && !selectionDisabled(row, i, node)).map((row) => row.id);
+      const selectedSelectableCount = selectableIds2.filter((id) => selectedIds.has(id)).length;
+      const stats = {
+        selectableIds: selectableIds2,
+        selectedSelectableCount,
+        allSelected: selectableIds2.length > 0 && selectedSelectableCount === selectableIds2.length,
+        isChecked: selectedSelectableCount > 0,
+        isDisabled: selectableIds2.length === 0
+      };
+      statsByNode2.set(node, stats);
+      return stats;
+    };
+    return { statsByNode: statsByNode2, rootStats: recordStats(root) };
+  };
+  const { statsByNode, rootStats } = buildSelectionStats(rootNode);
+  const { selectableIds, isChecked, allSelected, isDisabled } = rootStats;
   const componentContent = /* @__PURE__ */ React83.createElement(Template, { className: "Aquarium-DataList", columns: templateColumns, role: "table", "aria-label": ariaLabel }, !hideHeader && /* @__PURE__ */ React83.createElement(React83.Fragment, null, /* @__PURE__ */ React83.createElement(DataList.Row, { header: true }, selectable && /* @__PURE__ */ React83.createElement(DataList.HeadCell, { align: "left", sticky }, selectable === "multiple" && /* @__PURE__ */ React83.createElement(
     Checkbox,
     {
       "aria-label": "Select all rows",
-      indeterminate: totalSelected > 0 && totalSelected < allRows.length,
-      checked: totalSelected > 0,
+      indeterminate: isChecked && !allSelected,
+      checked: isChecked,
+      disabled: isDisabled,
       onChange: () => {
-        if (!allRowsSelected) {
-          setSelected(allEnabledRowIds);
-        } else {
-          setSelected([]);
-        }
+        const enabledSet = new Set(selectableIds);
+        const keptSelection = (selected ?? []).filter((id) => !enabledSet.has(id));
+        setSelected(allSelected ? keptSelection : [...keptSelection, ...selectableIds]);
       }
     }
   )), isCollapsible && /* @__PURE__ */ React83.createElement(DataList.HeadCell, { align: "left", sticky }), columns.map((column) => {
@@ -8496,6 +8507,7 @@ var DataList2 = ({
       getGroupCheckboxLabel,
       rows,
       groups,
+      statsByNode,
       groupKey: void 0,
       level: 0,
       isLastGroup: true
@@ -8510,7 +8522,7 @@ var DataList2 = ({
         const details = rowDetails?.(row, index, sortedRows);
         const isSelected = selected?.includes(row.id) ?? false;
         const isSelectionDisabled = selectionDisabled(row, index, sortedRows);
-        const isDisabled = disabled?.(row, index, sortedRows);
+        const isDisabled2 = disabled?.(row, index, sortedRows);
         const openPanelId = expandedGroupIds.find((id) => id === row.id.toString()) || null;
         const isLastRow = index === sortedRows.length - 1;
         const content = /* @__PURE__ */ React83.createElement(
@@ -8533,7 +8545,7 @@ var DataList2 = ({
                 onAction,
                 onMenuOpenChange,
                 menuAriaLabel,
-                disabled: isDisabled
+                disabled: isDisabled2
               }
             ),
             disabled,
@@ -8550,7 +8562,7 @@ var DataList2 = ({
                   "aria-label": getRowSelectionLabel(row2, index2, isSelected, sortedRows),
                   onChange: noop2,
                   checked: isSelected,
-                  disabled: isDisabled || isSelectionDisabled
+                  disabled: isDisabled2 || isSelectionDisabled
                 }
               ), isMultiSelectionMode && /* @__PURE__ */ React83.createElement(
                 Checkbox,
@@ -8558,7 +8570,7 @@ var DataList2 = ({
                   "aria-label": getRowSelectionLabel(row2, index2, isSelected, sortedRows),
                   onChange: getOnSelectionChangeForId(row2.id),
                   checked: isSelected,
-                  disabled: isDisabled || isSelectionDisabled
+                  disabled: isDisabled2 || isSelectionDisabled
                 }
               )), rowDetails !== void 0 && /* @__PURE__ */ React83.createElement(DataList.Cell, null, details && /* @__PURE__ */ React83.createElement(Accordion.Toggle, { panelId: row2.id.toString(), onChange: onGroupToggled })));
             },
@@ -11766,7 +11778,7 @@ var Dialog2 = (props) => {
   if (!state.isOpen) {
     return null;
   }
-  return /* @__PURE__ */ React96.createElement(Overlay, null, /* @__PURE__ */ React96.createElement(Modal, { className: "Aquarium-Dialog", open: true }, /* @__PURE__ */ React96.createElement(Modal.BackDrop, { ...underlayProps }), /* @__PURE__ */ React96.createElement(Modal.Dialog, { ref, size: "sm", isResponsive: false, ...modalProps }, /* @__PURE__ */ React96.createElement(DialogWrapper, { ...props }))));
+  return /* @__PURE__ */ React96.createElement(Overlay, null, /* @__PURE__ */ React96.createElement(Modal, { className: "Aquarium-Dialog", open: true }, /* @__PURE__ */ React96.createElement(Modal.BackDrop, { ...underlayProps }), /* @__PURE__ */ React96.createElement(Modal.Dialog, { ref, size: "sm", isResponsive: false, className: "sm:max-w-[520px]", ...modalProps }, /* @__PURE__ */ React96.createElement(DialogWrapper, { ...props }))));
 };
 var DialogWrapper = ({
   title,
@@ -11786,7 +11798,7 @@ var DialogWrapper = ({
     },
     ref
   );
-  return /* @__PURE__ */ React96.createElement("div", { ref, ...dialogProps, className: "outline-none" }, /* @__PURE__ */ React96.createElement(Modal.Header, { className: "icon-stroke-2" }, /* @__PURE__ */ React96.createElement(Icon, { icon: DIALOG_ICONS_AND_COLORS[type].icon, color: DIALOG_ICONS_AND_COLORS[type].color, fontSize: 20 }), /* @__PURE__ */ React96.createElement(Modal.Title, { id: labelledBy, variant: "large", color: DIALOG_ICONS_AND_COLORS[type].color }, title)), /* @__PURE__ */ React96.createElement(Modal.Body, { id: describedBy }, /* @__PURE__ */ React96.createElement(Typography2.Default, null, children)), /* @__PURE__ */ React96.createElement(Modal.Footer, null, /* @__PURE__ */ React96.createElement(Modal.Actions, { className: "gap-4" }, secondaryAction && /* @__PURE__ */ React96.createElement(Button2.Ghost, { key: secondaryAction.text, ...omit10(secondaryAction, "text") }, secondaryAction.text), /* @__PURE__ */ React96.createElement(Button2.Secondary, { key: primaryAction.text, ...omit10(primaryAction, "text") }, primaryAction.text))));
+  return /* @__PURE__ */ React96.createElement("div", { ref, ...dialogProps, className: "outline-none" }, /* @__PURE__ */ React96.createElement(Modal.Header, { className: "icon-stroke-2 px-6 pr-6" }, /* @__PURE__ */ React96.createElement(Icon, { icon: DIALOG_ICONS_AND_COLORS[type].icon, color: DIALOG_ICONS_AND_COLORS[type].color, fontSize: 20 }), /* @__PURE__ */ React96.createElement(Modal.Title, { id: labelledBy, variant: "large", color: "default" }, title)), /* @__PURE__ */ React96.createElement(Modal.Body, { id: describedBy, contentClassName: "px-6" }, /* @__PURE__ */ React96.createElement(Typography2.Default, null, children)), /* @__PURE__ */ React96.createElement(Modal.Footer, { className: "px-6" }, /* @__PURE__ */ React96.createElement(Modal.Actions, { className: "gap-4" }, secondaryAction && /* @__PURE__ */ React96.createElement(Button2.Ghost, { key: secondaryAction.text, ...omit10(secondaryAction, "text") }, secondaryAction.text), /* @__PURE__ */ React96.createElement(Button2.Secondary, { key: primaryAction.text, ...omit10(primaryAction, "text") }, primaryAction.text))));
 };
 
 // src/molecules/Drawer/Drawer.tsx
@@ -13955,30 +13967,84 @@ import React128 from "react";
 import { tv as tv34 } from "tailwind-variants";
 var connectorStyles = tv34({
   slots: {
-    container: "absolute w-full -left-1/2",
-    connector: "w-full"
+    container: "absolute",
+    connector: ""
   },
   variants: {
     completed: {
       true: { connector: "bg-success-graphic" },
-      false: { connector: "bg-intense" }
+      false: { connector: "bg-muted" }
     },
-    dense: {
-      true: {
-        container: "top-[3px] px-[14px]",
-        connector: "h-[3px]"
+    direction: {
+      horizontal: {
+        container: "w-full -left-1/2"
       },
-      false: {
-        container: "top-[14px] px-[20px]",
-        connector: "h-[2px]"
+      vertical: {
+        container: "h-full -top-2/3"
       }
+    },
+    dense: {
+      true: {},
+      false: {}
     }
-  }
+  },
+  compoundSlots: [
+    // Horizontal layout - horizontal connectors between side-by-side steps
+    {
+      slots: ["container"],
+      direction: "horizontal",
+      dense: true,
+      class: "top-[3px] px-[14px]"
+    },
+    {
+      slots: ["container"],
+      direction: "horizontal",
+      dense: false,
+      class: "top-[14px] px-[20px]"
+    },
+    {
+      slots: ["connector"],
+      direction: "horizontal",
+      dense: true,
+      class: "w-full h-[3px]"
+    },
+    {
+      slots: ["connector"],
+      direction: "horizontal",
+      dense: false,
+      class: "w-full h-[2px]"
+    },
+    // Vertical layout - vertical connectors between stacked steps
+    {
+      slots: ["container"],
+      direction: "vertical",
+      dense: true,
+      class: "left-[3px] pt-[4px] pb-[24px]"
+    },
+    {
+      slots: ["container"],
+      direction: "vertical",
+      dense: false,
+      class: "left-[16px] pt-[12px] pb-[30px]"
+    },
+    {
+      slots: ["connector"],
+      direction: "vertical",
+      dense: true,
+      class: "h-full w-[3px]"
+    },
+    {
+      slots: ["connector"],
+      direction: "vertical",
+      dense: false,
+      class: "h-full w-[2px]"
+    }
+  ]
 });
 var stepStyles = tv34({
   slots: {
-    step: "flex flex-col items-center relative text-center",
-    indicator: "Aquarium-Stepper-Indicator rounded-full flex justify-center items-center mx-2 mb-3"
+    step: "flex relative text-center",
+    indicator: "Aquarium-Stepper-Indicator rounded-full flex justify-center items-center"
   },
   variants: {
     state: {
@@ -13986,6 +14052,16 @@ var stepStyles = tv34({
       completed: { step: "text-intense" },
       inactive: { step: "text-inactive" }
     },
+    direction: {
+      vertical: {
+        step: "flex-row items-center pb-8",
+        indicator: "mr-l1"
+      },
+      horizontal: {
+        step: "flex-col items-center",
+        indicator: "mx-2 mb-3"
+      }
+    },
     dense: {
       true: { indicator: "h-[8px] w-[8px]" },
       false: { indicator: "h-[32px] w-[32px]" }
@@ -14003,7 +14079,7 @@ var stepStyles = tv34({
       slots: ["indicator"],
       dense: false,
       state: "inactive",
-      class: "border-2 border-default"
+      class: "border-2 border-muted"
     },
     {
       slots: ["indicator"],
@@ -14036,22 +14112,42 @@ var Stepper = ({ className, ...rest }) => /* @__PURE__ */ React128.createElement
 var ConnectorContainer = ({
   className,
   dense = false,
+  direction = "horizontal",
   ...rest
 }) => {
-  const { container: container2 } = connectorStyles({ dense });
+  const { container: container2 } = connectorStyles({ dense, direction });
   return /* @__PURE__ */ React128.createElement("div", { ...rest, className: container2({ className }) });
 };
-var Connector = ({ children, className, completed = false, dense = false, ...rest }) => {
-  const { connector } = connectorStyles({ completed, dense });
+var Connector = ({
+  children,
+  className,
+  completed = false,
+  dense = false,
+  direction = "horizontal",
+  ...rest
+}) => {
+  const { connector } = connectorStyles({ completed, dense, direction });
   return /* @__PURE__ */ React128.createElement("div", { ...rest, className: connector({ className }) });
 };
-var Step = ({ className, state, ...rest }) => {
-  const { step } = stepStyles({ state });
+var Step = ({
+  className,
+  state,
+  direction = "horizontal",
+  ...rest
+}) => {
+  const { step } = stepStyles({ state, direction });
   return /* @__PURE__ */ React128.createElement("div", { ...rest, className: step({ className }) });
 };
-var Indicator = ({ children, className, state, dense = false, ...rest }) => {
-  const { indicator } = stepStyles({ state, dense });
-  return /* @__PURE__ */ React128.createElement("div", { ...rest, className: indicator({ className }) }, state === "completed" ? /* @__PURE__ */ React128.createElement(InlineIcon, { icon: tick_default }) : dense ? null : children);
+var Indicator = ({
+  children,
+  className,
+  state,
+  dense = false,
+  direction = "horizontal",
+  ...rest
+}) => {
+  const { indicator } = stepStyles({ state, dense, direction });
+  return /* @__PURE__ */ React128.createElement("div", { ...rest, className: indicator({ className }) }, state === "completed" ? /* @__PURE__ */ React128.createElement(InlineIcon, { icon: tick_default, className: dense ? "scale-125" : void 0 }) : dense ? null : children);
 };
 Step.Indicator = Indicator;
 Stepper.Step = Step;
@@ -14059,14 +14155,37 @@ ConnectorContainer.Connector = Connector;
 Stepper.ConnectorContainer = ConnectorContainer;
 
 // src/molecules/Stepper/Stepper.tsx
-var Stepper2 = ({ children, activeIndex, dense }) => {
+var Stepper2 = ({
+  children,
+  activeIndex,
+  dense,
+  direction = "horizontal"
+}) => {
   const steps = React129.Children.count(children);
-  return /* @__PURE__ */ React129.createElement(Stepper, { role: "list", className: "Aquarium-Stepper" }, /* @__PURE__ */ React129.createElement(Template, { columns: steps }, React129.Children.map(children, (child, index) => {
+  return /* @__PURE__ */ React129.createElement(Stepper, { role: "list", className: "Aquarium-Stepper" }, /* @__PURE__ */ React129.createElement(Template, { columns: direction === "horizontal" ? steps : 1 }, React129.Children.map(children, (child, index) => {
     if (!isComponentType(child, Step2)) {
       throw new Error("<Stepper> can only have <Stepper.Step> components as children");
     } else {
       const state = index > activeIndex ? "inactive" : index === activeIndex ? "active" : "completed";
-      return /* @__PURE__ */ React129.createElement(Stepper.Step, { state, "aria-current": state === "active" ? "step" : false, role: "listitem" }, index > 0 && index <= steps && /* @__PURE__ */ React129.createElement(Stepper.ConnectorContainer, { dense }, /* @__PURE__ */ React129.createElement(Stepper.ConnectorContainer.Connector, { completed: state === "completed" || state === "active" })), /* @__PURE__ */ React129.createElement(Stepper.Step.Indicator, { state, dense }, index + 1), child.props.children);
+      return /* @__PURE__ */ React129.createElement(
+        Stepper.Step,
+        {
+          state,
+          "aria-current": state === "active" ? "step" : false,
+          direction,
+          role: "listitem"
+        },
+        index > 0 && index <= steps && /* @__PURE__ */ React129.createElement(Stepper.ConnectorContainer, { dense, direction }, /* @__PURE__ */ React129.createElement(
+          Stepper.ConnectorContainer.Connector,
+          {
+            completed: state === "completed" || state === "active",
+            dense,
+            direction
+          }
+        )),
+        /* @__PURE__ */ React129.createElement(Stepper.Step.Indicator, { state, dense, direction }, index + 1),
+        child.props.children
+      );
     }
   })));
 };

package/dist/tokens.json

@@ -187,9 +187,9 @@
     }
   },
   "code": {
-    "background": "rgba(250,250,250,1)",
+    "background": "rgba(255,255,255,1)",
     "text": "rgba(45,46,48,1)",
-    "variable": "rgba(123,45,139,1)",
+    "variable": "rgba(91,30,103,1)",
     "keyword": "rgba(202, 33, 101, 1)",
     "string": "rgba(0, 127, 115, 1)",
     "function": "rgba(9, 128, 193, 1)",