@servicetitan/anvil2 3.11.1 → 3.12.0

package/dist/{Stepper-z1y9AfaJ.js → Stepper-CCKHWlUr.js}

@@ -1,5 +1,5 @@
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { createContext, forwardRef, useContext, useRef, useState, useEffect, useMemo } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { createContext, useContext, useRef, forwardRef, useLayoutEffect, useId, useState, useEffect, useCallback, useMemo } from 'react';
 import { c as cx } from './index-De1g9FRV.js';
 import { S as SvgCheck } from './check-Cf67OWrZ.js';
 import { I as Icon } from './Icon-B5zwN7GD.js';
@@ -10,15 +10,44 @@ import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-DjqeAJZ9.js';
 import { m as motion } from './proxy-DEehATlA.js';
 import { B as Button } from './Button-Dwh_Nd4l.js';
 import { useTrackingId } from './useTrackingId.js';
+import { u as useOptionallyControlledState } from './useOptionallyControlledState-DbDuos5L.js';
 
-import './Stepper.css';const StepperContext = createContext({
-  current: 0,
-  currentId: "",
-  focus: 0,
-  setFocus: () => void 0,
-  setCurrent: () => void 0,
-  setCurrentId: () => void 0
+import './Stepper.css';const StepperBaseContext = createContext({
+  currentIndex: 0,
+  interactive: false,
+  focusIndex: 0,
+  setFocusIndex: () => void 0,
+  requestIndexChange: () => void 0,
+  registerStep: () => () => void 0,
+  getStep: () => void 0,
+  getCurrentStep: () => void 0,
+  getPanelId: () => void 0,
+  registerPanel: () => () => void 0
 });
+const StepperBaseStepIndexPassContext = createContext(null);
+function useStepperStepIndex() {
+  const pass = useContext(StepperBaseStepIndexPassContext);
+  const allocated = useRef(null);
+  if (!pass) return void 0;
+  if (allocated.current?.pass !== pass) {
+    allocated.current = { pass, index: pass.allocate() };
+  }
+  return allocated.current.index;
+}
+
+function startIndexPass() {
+  let nextIndex = 0;
+  return {
+    allocate: () => {
+      const index = nextIndex;
+      nextIndex += 1;
+      return index;
+    }
+  };
+}
+function StepperStepIndexScope({ children }) {
+  return /* @__PURE__ */ jsx(StepperBaseStepIndexPassContext.Provider, { value: startIndexPass(), children });
+}
 
 const label$1 = "_label_iy9bb_28";
 const styles$3 = {
@@ -27,48 +56,415 @@ const styles$3 = {
 	label: label$1
 };
 
-const StepperList = forwardRef(
+const StepperBaseList = forwardRef(
   (props, ref) => {
-    const { className, children, onKeyDown, ...rest } = props;
-    const { current, items } = useContext(StepperContext);
-    const tabListClassNames = cx(styles$3["stepper-list"], className);
-    const currentLabel = items?.[current].querySelectorAll("span")[1].textContent;
+    const { className, children, ...rest } = props;
+    const { getCurrentStep } = useContext(StepperBaseContext);
+    const currentLabel = getCurrentStep()?.label;
     return /* @__PURE__ */ jsxs(
       "div",
       {
         ...rest,
-        className: tabListClassNames,
-        "data-anv": "stepper-list",
+        className: cx(styles$3["stepper-list"], className),
+        "data-anv": "stepper-base-list",
         ref,
         role: "tablist",
         children: [
-          /* @__PURE__ */ jsx("div", { className: styles$3["stepper-steps"], children }),
+          /* @__PURE__ */ jsx("div", { className: styles$3["stepper-steps"], children: /* @__PURE__ */ jsx(StepperStepIndexScope, { children }) }),
           /* @__PURE__ */ jsx("span", { className: styles$3.label, children: currentLabel })
         ]
       }
     );
   }
 );
-StepperList.displayName = "StepperList";
+StepperBaseList.displayName = "StepperBaseList";
 
-const bar = "_bar_1p8ur_30";
-const label = "_label_1p8ur_49";
-const circle = "_circle_1p8ur_62";
+const bar = "_bar_rf27i_30";
+const label = "_label_rf27i_49";
+const circle = "_circle_rf27i_62";
 const styles$2 = {
-	"stepper-step": "_stepper-step_1p8ur_1",
+	"stepper-step": "_stepper-step_rf27i_1",
 	bar: bar,
 	label: label,
 	circle: circle,
-	"all-completed": "_all-completed_1p8ur_87",
-	"can-navigate": "_can-navigate_1p8ur_91"
+	"all-completed": "_all-completed_rf27i_87",
+	"can-navigate": "_can-navigate_rf27i_91"
 };
 
+const StepperBaseStep = forwardRef((props, ref) => {
+  const stepRef = useRef(null);
+  const index = useStepperStepIndex();
+  const {
+    currentIndex,
+    interactive,
+    focusIndex,
+    setFocusIndex,
+    requestIndexChange,
+    registerStep,
+    getStep,
+    getPanelId
+  } = useContext(StepperBaseContext);
+  const {
+    state = "not started",
+    id,
+    disabled = false,
+    onClick,
+    children,
+    onKeyDown,
+    className,
+    "aria-label": ariaLabel,
+    ...rest
+  } = props;
+  const childrenText = typeof children === "string" ? children : typeof children === "number" ? String(children) : void 0;
+  const label = childrenText || ariaLabel || "";
+  useLayoutEffect(() => {
+    if (index === void 0) return;
+    return registerStep({
+      index,
+      id,
+      label,
+      disabled,
+      node: stepRef
+    });
+  }, [disabled, id, index, label, registerStep]);
+  const selected = index === currentIndex;
+  const completed = state === "complete";
+  const panelId = id ? getPanelId(id) : void 0;
+  const onClickHandler = (e) => {
+    onClick?.(e, index);
+    if (index === void 0) return;
+    requestIndexChange(index);
+  };
+  const onKeyDownHandler = (e) => {
+    onKeyDown?.(e);
+    if (!interactive || index === void 0) return;
+    const activatable = [];
+    for (let i = 0; ; i += 1) {
+      const step = getStep(i);
+      if (!step) break;
+      if (!step.disabled) activatable.push(i);
+    }
+    if (activatable.length === 0) return;
+    const currentPos = activatable.indexOf(focusIndex);
+    const safePos = currentPos === -1 ? 0 : currentPos;
+    switch (e.code) {
+      case "Enter":
+      case "Space":
+        e.preventDefault();
+        requestIndexChange(focusIndex);
+        break;
+      case "ArrowRight": {
+        e.preventDefault();
+        const next = activatable[(safePos + 1) % activatable.length];
+        setFocusIndex(next);
+        getStep(next)?.node.current?.focus();
+        break;
+      }
+      case "ArrowLeft": {
+        e.preventDefault();
+        const prev = activatable[(safePos - 1 + activatable.length) % activatable.length];
+        setFocusIndex(prev);
+        getStep(prev)?.node.current?.focus();
+        break;
+      }
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      role: "tab",
+      "data-anv": "stepper-base-step",
+      "data-state": state,
+      "data-completed": completed,
+      className: cx(styles$2["stepper-step"], className, {
+        [styles$2["can-navigate"]]: interactive
+      }),
+      "aria-selected": selected,
+      "aria-controls": panelId,
+      "aria-disabled": disabled || void 0,
+      "aria-label": childrenText || ariaLabel,
+      tabIndex: interactive && index === focusIndex && !disabled ? 0 : -1,
+      onClick: onClickHandler,
+      onKeyDown: interactive ? onKeyDownHandler : onKeyDown,
+      ...rest,
+      id,
+      ref: useMergeRefs([stepRef, ref]),
+      children: [
+        /* @__PURE__ */ jsx("span", { className: styles$2.bar }),
+        /* @__PURE__ */ jsxs("span", { className: styles$2.label, children: [
+          /* @__PURE__ */ jsx("span", { className: styles$2.circle, children: /* @__PURE__ */ jsx(Icon, { svg: SvgCheck, inherit: true, "aria-hidden": true }) }),
+          children
+        ] })
+      ]
+    }
+  );
+});
+StepperBaseStep.displayName = "StepperBaseStep";
+
+const styles$1 = {
+	"stepper-panel": "_stepper-panel_14tpv_1"
+};
+
+const StepperBasePanel = forwardRef((props, ref) => {
+  const { layoutStyles, componentProps } = useLayoutPropsUtil(props);
+  const {
+    step,
+    id: idProp,
+    className,
+    style,
+    children,
+    ...rest
+  } = componentProps;
+  const generatedId = useId();
+  const id = idProp ?? generatedId;
+  const { getCurrentStep, registerPanel } = useContext(StepperBaseContext);
+  const currentStep = getCurrentStep();
+  const isCurrent = currentStep?.id === step;
+  useLayoutEffect(() => {
+    return registerPanel(step, id);
+  }, [id, registerPanel, step]);
+  const styleCombined = {
+    ...style,
+    ...layoutStyles
+  };
+  if (!isCurrent) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      style: styleCombined,
+      className: cx(styles$1["stepper-panel"], className),
+      transition: {
+        opacity: {
+          duration: +DurationSlow.value.replace("ms", "") / 1e3
+        }
+      },
+      initial: { opacity: 0 },
+      animate: { opacity: 1 },
+      exit: { opacity: 0 },
+      layout: true,
+      ...rest,
+      role: "tabpanel",
+      "data-anv": "stepper-base-panel",
+      id,
+      ref,
+      children: /* @__PURE__ */ jsx(Overflow, { flexGrow: 1, children })
+    }
+  );
+});
+StepperBasePanel.displayName = "StepperBasePanel";
+
+const stepper = "_stepper_4q6gk_1";
+const styles = {
+	stepper: stepper
+};
+
+const StepperBase = Object.assign(
+  forwardRef(
+    function StepperBaseInner(props, ref) {
+      const { layoutStyles, componentProps } = useLayoutPropsUtil(props);
+      const {
+        index,
+        defaultIndex = 0,
+        onIndexChange,
+        interactive = false,
+        className,
+        children,
+        style,
+        ...rest
+      } = componentProps;
+      const rootRef = useRef(null);
+      const [currentIndex, setCurrentIndex] = useOptionallyControlledState({
+        controlledValue: index,
+        defaultValue: defaultIndex,
+        onChange: onIndexChange
+      });
+      const [focusIndex, setFocusIndex] = useState(index ?? defaultIndex);
+      useEffect(() => {
+        setFocusIndex(currentIndex);
+      }, [currentIndex]);
+      const stepsRef = useRef(/* @__PURE__ */ new Map());
+      const [stepsVersion, setStepsVersion] = useState(0);
+      const panelsRef = useRef(/* @__PURE__ */ new Map());
+      const [panelsVersion, setPanelsVersion] = useState(0);
+      const bumpSteps = useCallback(() => {
+        setStepsVersion((value2) => value2 + 1);
+      }, []);
+      const bumpPanels = useCallback(() => {
+        setPanelsVersion((value2) => value2 + 1);
+      }, []);
+      const registerStep = useCallback(
+        (info) => {
+          stepsRef.current.set(info.index, info);
+          bumpSteps();
+          return () => {
+            const current = stepsRef.current.get(info.index);
+            if (current === info) {
+              stepsRef.current.delete(info.index);
+              bumpSteps();
+            }
+          };
+        },
+        [bumpSteps]
+      );
+      const getStep = useCallback((stepIndex) => {
+        return stepsRef.current.get(stepIndex);
+      }, []);
+      const getCurrentStep = useCallback(() => {
+        return stepsRef.current.get(currentIndex);
+      }, [currentIndex]);
+      const requestIndexChange = useCallback(
+        (nextIndex) => {
+          if (!interactive) return;
+          const target = stepsRef.current.get(nextIndex);
+          if (target?.disabled) return;
+          setCurrentIndex(nextIndex);
+          setFocusIndex(nextIndex);
+        },
+        [interactive, setCurrentIndex]
+      );
+      const registerPanel = useCallback(
+        (stepId, panelId) => {
+          panelsRef.current.set(stepId, panelId);
+          bumpPanels();
+          return () => {
+            if (panelsRef.current.get(stepId) === panelId) {
+              panelsRef.current.delete(stepId);
+              bumpPanels();
+            }
+          };
+        },
+        [bumpPanels]
+      );
+      const getPanelId = useCallback((stepId) => {
+        return panelsRef.current.get(stepId);
+      }, []);
+      const value = useMemo(
+        () => ({
+          currentIndex,
+          interactive,
+          focusIndex,
+          setFocusIndex,
+          requestIndexChange,
+          registerStep,
+          getStep,
+          getCurrentStep,
+          getPanelId,
+          registerPanel
+        }),
+        [
+          currentIndex,
+          interactive,
+          focusIndex,
+          requestIndexChange,
+          registerStep,
+          getStep,
+          getCurrentStep,
+          getPanelId,
+          registerPanel,
+          stepsVersion,
+          panelsVersion
+        ]
+      );
+      const styleCombined = { ...style, ...layoutStyles };
+      return /* @__PURE__ */ jsx(StepperBaseContext.Provider, { value, children: /* @__PURE__ */ jsx(
+        motion.div,
+        {
+          transition: { duration: 0 },
+          layout: true,
+          className: cx(styles.stepper, className),
+          "data-anv": "stepper-base",
+          style: styleCombined,
+          ...rest,
+          ref: useMergeRefs([rootRef, ref]),
+          children
+        }
+      ) });
+    }
+  ),
+  {
+    /**
+     * Individual step. Outcome is independent of whether the step is current.
+     *
+     * Features:
+     * - state: not started, started, or complete
+     * - Optional id when a panel points at this step
+     * - Check icon when complete
+     *
+     * @example
+     * <StepperBase.Step state="complete">Approved</StepperBase.Step>
+     */
+    Step: StepperBaseStep,
+    /**
+     * Track of steps plus the compact label on small widths.
+     *
+     * Features:
+     * - Lays out StepperBase.Step children
+     * - Shows the current step label when the track is narrow
+     *
+     * @example
+     * <StepperBase.List>
+     *   <StepperBase.Step>Scheduled</StepperBase.Step>
+     * </StepperBase.List>
+     */
+    List: StepperBaseList,
+    /**
+     * Content for one step. Visible when that step is current.
+     *
+     * Features:
+     * - step is required and must match a Step id
+     * - id is optional and generated when omitted
+     *
+     * @example
+     * <StepperBase.Panel step="approved">Details</StepperBase.Panel>
+     */
+    Panel: StepperBasePanel
+  }
+);
+StepperBase.displayName = "StepperBase";
+
+const StepperList = forwardRef(
+  (props, ref) => {
+    const { className, children, onKeyDown: _onKeyDown, ...rest } = props;
+    const { getCurrentStep } = useContext(StepperBaseContext);
+    const currentLabel = getCurrentStep()?.label;
+    const tabListClassNames = cx(styles$3["stepper-list"], className);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ...rest,
+        className: tabListClassNames,
+        "data-anv": "stepper-list",
+        ref,
+        role: "tablist",
+        children: [
+          /* @__PURE__ */ jsx("div", { className: styles$3["stepper-steps"], children: /* @__PURE__ */ jsx(StepperStepIndexScope, { children }) }),
+          /* @__PURE__ */ jsx("span", { className: styles$3.label, children: currentLabel })
+        ]
+      }
+    );
+  }
+);
+StepperList.displayName = "StepperList";
+
+const StepperContext = createContext({
+  current: 0,
+  currentId: "",
+  focus: 0,
+  setFocus: () => void 0,
+  setCurrent: () => void 0,
+  setCurrentId: () => void 0
+});
+
 const StepperStep = forwardRef(
   (props, ref) => {
     const stepRef = useRef(null);
+    const index = useStepperStepIndex();
+    const { registerStep, getStep } = useContext(StepperBaseContext);
     const {
       current,
-      items,
       setCurrent,
       focus,
       setFocus,
@@ -85,39 +481,40 @@ const StepperStep = forwardRef(
       "aria-label": ariaLabel,
       ...rest
     } = props;
-    const index = useRef();
-    const [selected, setSelected] = useState(false);
-    const [completed, setCompleted] = useState(
-      // Below is to be used for custom overriding
-      // completed state for a step
-      // Check Stepper.stories.tsx#103 for the use case
-      stepRef.current?.getAttribute("data-completed") === "true" ? true : void 0
-    );
-    useEffect(() => {
-      if (!items) return;
-      index.current = Array.prototype.indexOf.call(items, stepRef.current);
-      setCompleted(index.current < current);
-      setSelected(index.current === current);
-    }, [current, items]);
+    const childrenText = typeof children === "string" ? children : typeof children === "number" ? String(children) : void 0;
+    const label = childrenText || ariaLabel || "";
+    useLayoutEffect(() => {
+      if (index === void 0) return;
+      return registerStep({
+        index,
+        id: controls,
+        label,
+        disabled: false,
+        node: stepRef
+      });
+    }, [controls, index, label, registerStep]);
+    const selected = index === current;
+    const completed = index !== void 0 && index < current;
     const stepClassNames = cx(styles$2["stepper-step"], className, {
       [styles$2["can-navigate"]]: allowNavigateToPrevStep,
       [styles$2["all-completed"]]: allCompleted
     });
     const onClickHandler = (e) => {
-      onClick?.(e, index.current);
-      if (!allowNavigateToPrevStep || selected || index.current === void 0 || !items || index.current > current) {
+      onClick?.(e, index);
+      if (!allowNavigateToPrevStep || selected || index === void 0 || index > current) {
         return;
       }
-      setCurrent(index.current ?? 0);
-      setFocus(index.current);
-      items[index.current].focus();
+      setCurrent(index);
+      setFocus(index);
+      stepRef.current?.focus();
     };
     const onKeyDownHandler = (e) => {
       onKeyDown?.(e);
-      const focusableItems = Array.prototype.filter.call(
-        items,
-        (item) => item.getAttribute("data-completed") === "true" || item.getAttribute("aria-selected") === "true"
-      );
+      const focusableItems = [];
+      for (let i = 0; i <= current; i += 1) {
+        const node = getStep(i)?.node.current;
+        if (node) focusableItems.push(node);
+      }
       const prevFocus = focus - 1;
       const nextFocus = focus + 1;
       switch (e.code) {
@@ -131,14 +528,10 @@ const StepperStep = forwardRef(
           if (nextFocus === focusableItems.length) {
             setFocus(0);
             focusableItems[0].focus();
-            focusableItems[0].setAttribute("tabindex", "0");
-            stepRef.current?.setAttribute("tabindex", "-1");
             return;
           }
-          stepRef.current?.setAttribute("tabindex", "-1");
           setFocus(nextFocus);
           focusableItems[nextFocus].focus();
-          focusableItems[nextFocus].setAttribute("tabindex", "0");
           break;
         case "ArrowLeft":
           e.preventDefault();
@@ -146,18 +539,13 @@ const StepperStep = forwardRef(
             const lastItemIndex = focusableItems.length - 1;
             setFocus(lastItemIndex);
             focusableItems[lastItemIndex].focus();
-            focusableItems[lastItemIndex].setAttribute("tabindex", "0");
-            stepRef.current?.setAttribute("tabindex", "-1");
             return;
           }
-          stepRef.current?.setAttribute("tabindex", "-1");
           setFocus(prevFocus);
           focusableItems[prevFocus].focus();
-          focusableItems[prevFocus].setAttribute("tabindex", "0");
           break;
       }
     };
-    const childrenText = typeof children === "string" ? children : typeof children === "number" ? String(children) : void 0;
     return /* @__PURE__ */ jsxs(
       "button",
       {
@@ -168,7 +556,7 @@ const StepperStep = forwardRef(
         "aria-selected": selected,
         "aria-controls": controls,
         "aria-label": childrenText || ariaLabel,
-        tabIndex: allowNavigateToPrevStep && selected ? 0 : -1,
+        tabIndex: allowNavigateToPrevStep && index === focus && !allCompleted ? 0 : -1,
         "data-completed": completed,
         onClick: onClickHandler,
         onKeyDown: allowNavigateToPrevStep ? onKeyDownHandler : onKeyDown,
@@ -187,22 +575,19 @@ const StepperStep = forwardRef(
 );
 StepperStep.displayName = "StepperStep";
 
-const styles$1 = {
-	"stepper-panel": "_stepper-panel_14tpv_1"
-};
-
 const StepperPanel = forwardRef(
   (props, ref) => {
     const { layoutStyles, componentProps } = useLayoutPropsUtil(props);
     const { id, className, style, children, ...rest } = componentProps;
-    const { current, items, allCompleted, setCurrentId } = useContext(StepperContext);
-    const currentId = items?.[current].getAttribute("aria-controls");
-    const isCurrent = currentId === id;
+    const { allCompleted, setCurrentId } = useContext(StepperContext);
+    const { getCurrentStep } = useContext(StepperBaseContext);
+    const currentStepId = getCurrentStep()?.id;
+    const isCurrent = currentStepId === id;
     useEffect(() => {
       if (isCurrent && !allCompleted) {
-        setCurrentId(currentId ?? "");
+        setCurrentId(currentStepId ?? "");
       }
-    }, [allCompleted, isCurrent, currentId, setCurrentId]);
+    }, [allCompleted, isCurrent, currentStepId, setCurrentId]);
     const tabPanelClassNames = cx(styles$1["stepper-panel"], className);
     const styleCombined = {
       ...style,
@@ -279,16 +664,24 @@ const StepperFinalPanel = forwardRef((props, ref) => {
 });
 StepperFinalPanel.displayName = "StepperFinalPanel";
 
+function countRegisteredSteps(getStep) {
+  let count = 0;
+  while (getStep(count)) count += 1;
+  return count;
+}
+
 const StepperNextButton = forwardRef((props, ref) => {
   const {
     setAllCompleted,
     onComplete,
     setCurrent,
     setFocus,
-    items,
     current,
     allCompleted
   } = useContext(StepperContext);
+  const { getStep } = useContext(StepperBaseContext);
+  const stepCount = countRegisteredSteps(getStep);
+  const isLastStep = stepCount > 0 && current === stepCount - 1;
   const {
     onClick,
     onFocus,
@@ -298,8 +691,7 @@ const StepperNextButton = forwardRef((props, ref) => {
     ...rest
   } = props;
   const proceedToNextStep = () => {
-    if (items && current === items.length - 1) {
-      items.forEach((item) => item.setAttribute("tabindex", "-1"));
+    if (isLastStep) {
       setAllCompleted?.(true);
       onComplete?.();
       return;
@@ -337,29 +729,18 @@ const StepperNextButton = forwardRef((props, ref) => {
       appearance,
       ref,
       ...rest,
-      children: items && current === items.length - 1 ? completeLabel : nextLabel
+      children: isLastStep ? completeLabel : nextLabel
     }
   );
 });
 StepperNextButton.displayName = "StepperNextButton";
 
 const StepperPrevButton = forwardRef((props, ref) => {
-  const {
-    setCurrent,
-    setFocus,
-    allCompleted,
-    setAllCompleted,
-    items,
-    current,
-    allowNavigateToPrevStep
-  } = useContext(StepperContext);
+  const { setCurrent, setFocus, allCompleted, setAllCompleted, current } = useContext(StepperContext);
   const { onClick, label = "Previous", onFocus, ...rest } = props;
   const onClickHandler = (e) => {
     if (allCompleted) {
       setAllCompleted?.(false);
-      if (allowNavigateToPrevStep) {
-        items?.[current].setAttribute("tabindex", "0");
-      }
     } else {
       setCurrent(current - 1);
       setFocus(current - 1);
@@ -388,50 +769,47 @@ const StepperPrevButton = forwardRef((props, ref) => {
 });
 StepperPrevButton.displayName = "StepperPrevButton";
 
-const stepper = "_stepper_4q6gk_1";
-const styles = {
-	stepper: stepper
-};
+function StepperWizardBootstrap({
+  defaultIndex
+}) {
+  const { getStep } = useContext(StepperBaseContext);
+  const { setAllCompleted, setCurrent, setFocus } = useContext(StepperContext);
+  const didBootstrap = useRef(false);
+  const hasSteps = !!getStep(0);
+  useEffect(() => {
+    if (didBootstrap.current || !hasSteps) return;
+    didBootstrap.current = true;
+    const stepCount = countRegisteredSteps(getStep);
+    if (defaultIndex !== void 0 && defaultIndex >= stepCount) {
+      const lastIndex = stepCount - 1;
+      setAllCompleted?.(true);
+      setCurrent(lastIndex);
+      setFocus(lastIndex);
+    }
+  }, [defaultIndex, getStep, hasSteps, setAllCompleted, setCurrent, setFocus]);
+  return null;
+}
 
 const Stepper = Object.assign(
   forwardRef(function StepperInner(props, ref) {
-    const { layoutStyles, componentProps } = useLayoutPropsUtil(props);
     const {
       defaultIndex,
-      className,
       allowNavigateToPrevStep,
       children,
       onChange,
       onComplete,
-      style,
       ...rest
-    } = componentProps;
-    const tabRef = useRef(null);
-    const [items, setItems] = useState();
+    } = props;
     const [allCompleted, setAllCompleted] = useState(false);
     const [current, setCurrent] = useState(defaultIndex ?? 0);
     const [currentId, setCurrentId] = useState("");
     const [focus, setFocus] = useState(defaultIndex ?? 0);
-    const stepperClassNames = cx(styles["stepper"], className);
-    useEffect(() => {
-      const newItems = tabRef.current?.querySelectorAll(
-        "[role=tab]:not([disabled])"
-      );
-      setItems(newItems);
-      if (defaultIndex !== void 0 && newItems && newItems.length > 0 && defaultIndex >= newItems.length) {
-        const lastIndex = newItems.length - 1;
-        setAllCompleted(true);
-        setCurrent(lastIndex);
-        setFocus(lastIndex);
-      }
-    }, []);
     useEffect(() => {
       onChange?.({
         currentStepId: currentId,
         currentStepIndex: allCompleted ? void 0 : current
       });
     }, [allCompleted, currentId, onChange]);
-    const styleCombined = { ...style, ...layoutStyles };
     const value = useMemo(
       () => ({
         current,
@@ -441,7 +819,6 @@ const Stepper = Object.assign(
         focus,
         setFocus,
         onComplete,
-        items,
         allCompleted,
         setAllCompleted,
         allowNavigateToPrevStep
@@ -451,25 +828,24 @@ const Stepper = Object.assign(
         currentId,
         focus,
         onComplete,
-        items,
         allCompleted,
-        setAllCompleted,
         allowNavigateToPrevStep
       ]
     );
-    return /* @__PURE__ */ jsx(StepperContext.Provider, { value, children: /* @__PURE__ */ jsx(
-      motion.div,
+    return /* @__PURE__ */ jsx(
+      StepperBase,
       {
-        transition: { duration: 0 },
-        layout: true,
-        className: stepperClassNames,
+        index: current,
+        interactive: false,
         "data-anv": "stepper",
-        style: styleCombined,
         ...rest,
-        ref: useMergeRefs([tabRef, ref]),
-        children
+        ref,
+        children: /* @__PURE__ */ jsxs(StepperContext.Provider, { value, children: [
+          /* @__PURE__ */ jsx(StepperWizardBootstrap, { defaultIndex }),
+          children
+        ] })
       }
-    ) });
+    );
   }),
   {
     /**
@@ -626,5 +1002,5 @@ const Stepper = Object.assign(
 );
 Stepper.displayName = "Stepper";
 
-export { Stepper as S };
-//# sourceMappingURL=Stepper-z1y9AfaJ.js.map
+export { Stepper as S, StepperBase as a };
+//# sourceMappingURL=Stepper-CCKHWlUr.js.map