@servicetitan/anvil2 1.44.2 → 1.45.0

package/dist/{Stepper-BtbDBIzz.js → Stepper-D-fOH9TF.js}

@@ -1,29 +1,69 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { forwardRef, useContext, createContext, useRef, useState, useEffect, useMemo } from 'react';
-import { useTrackingId } from './useTrackingId.js';
+import { createContext, forwardRef, useContext, useRef, useState, useEffect, useMemo } from 'react';
 import { c as cx } from './index-tZvMCc77.js';
-import { a as Overflow } from './Overflow-CFClqFVC-BKqOBCan.js';
-import { m as motion } from './proxy-CreWmH-e.js';
-import { e as DurationSlow } from './primitive-BoyEHaOo.js';
-import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-DWACCL8v-CZNrcQT-.js';
-import { B as Button } from './Button-BaHFf1AT-BQy-PFB5.js';
-import { u as useMergeRefs } from './useMergeRefs-Bde85AWI-Bde85AWI.js';
-import { I as Icon } from './Icon-B6HmlQiR-BxQkO3X5.js';
 import { S as SvgCheck } from './check-Cf67OWrZ.js';
+import { I as Icon } from './Icon-D8SPKeO4.js';
+import { u as useMergeRefs } from './useMergeRefs-Bde85AWI.js';
+import { e as DurationSlow } from './primitive-BoyEHaOo.js';
+import { Overflow } from './Overflow.js';
+import { m as motion } from './proxy-CreWmH-e.js';
+import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-DjD5IMh0.js';
+import { B as Button } from './Button-BxFXQ0-n.js';
+import { useTrackingId } from './useTrackingId.js';
 
-import './Stepper.css';const bar = "_bar_txl4u_26";
-const label$1 = "_label_txl4u_42";
-const circle = "_circle_txl4u_49";
+import './Stepper.css';const StepperContext = createContext({
+  current: 0,
+  currentId: "",
+  focus: 0,
+  setFocus: () => void 0,
+  setCurrent: () => void 0,
+  setCurrentId: () => void 0
+});
+
+const label$1 = "_label_qeq4d_33";
 const styles$3 = {
+	"stepper-list": "_stepper-list_qeq4d_2",
+	"stepper-steps": "_stepper-steps_qeq4d_24",
+	label: label$1
+};
+
+const StepperList = 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;
+    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("span", { className: styles$3.label, children: currentLabel })
+        ]
+      }
+    );
+  }
+);
+StepperList.displayName = "StepperList";
+
+const bar = "_bar_txl4u_26";
+const label = "_label_txl4u_42";
+const circle = "_circle_txl4u_49";
+const styles$2 = {
 	"stepper-step": "_stepper-step_txl4u_2",
 	bar: bar,
-	label: label$1,
+	label: label,
 	circle: circle,
 	"all-completed": "_all-completed_txl4u_80",
 	"can-navigate": "_can-navigate_txl4u_83"
 };
 
-const StepperStep$1 = forwardRef(
+const StepperStep = forwardRef(
   (props, ref) => {
     const stepRef = useRef(null);
     const {
@@ -58,9 +98,9 @@ const StepperStep$1 = forwardRef(
       setCompleted(index.current < current);
       setSelected(index.current === current);
     }, [current, items]);
-    const stepClassNames = cx(styles$3["stepper-step"], className, {
-      [styles$3["can-navigate"]]: allowNavigateToPrevStep,
-      [styles$3["all-completed"]]: allCompleted
+    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);
@@ -132,9 +172,9 @@ const StepperStep$1 = forwardRef(
         ...rest,
         ref: useMergeRefs([stepRef, ref]),
         children: [
-          /* @__PURE__ */ jsx("span", { className: styles$3.bar }),
-          /* @__PURE__ */ jsxs("span", { className: styles$3.label, children: [
-            /* @__PURE__ */ jsx("span", { className: styles$3.circle, children: /* @__PURE__ */ jsx(Icon, { svg: SvgCheck, inherit: true, "aria-hidden": true }) }),
+          /* @__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
           ] })
         ]
@@ -142,44 +182,13 @@ const StepperStep$1 = forwardRef(
     );
   }
 );
-StepperStep$1.displayName = "StepperStep";
-
-const label = "_label_qeq4d_33";
-const styles$2 = {
-	"stepper-list": "_stepper-list_qeq4d_2",
-	"stepper-steps": "_stepper-steps_qeq4d_24",
-	label: label
-};
-
-const StepperList$1 = forwardRef(
-  (props, ref) => {
-    const { className, children, onKeyDown, ...rest } = props;
-    const { current, items } = useContext(StepperContext);
-    const tabListClassNames = cx(styles$2["stepper-list"], className);
-    const currentLabel = items?.[current].querySelectorAll("span")[1].textContent;
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        ...rest,
-        className: tabListClassNames,
-        "data-anv": "stepper-list",
-        ref,
-        role: "tablist",
-        children: [
-          /* @__PURE__ */ jsx("div", { className: styles$2["stepper-steps"], children }),
-          /* @__PURE__ */ jsx("span", { className: styles$2.label, children: currentLabel })
-        ]
-      }
-    );
-  }
-);
-StepperList$1.displayName = "StepperList";
+StepperStep.displayName = "StepperStep";
 
 const styles$1 = {
 	"stepper-panel": "_stepper-panel_4h550_2"
 };
 
-const StepperPanel$1 = forwardRef(
+const StepperPanel = forwardRef(
   (props, ref) => {
     const { layoutStyles, componentProps } = useLayoutPropsUtil(props);
     const { id, className, style, children, ...rest } = componentProps;
@@ -223,14 +232,51 @@ const StepperPanel$1 = forwardRef(
     return /* @__PURE__ */ jsx(Fragment, {});
   }
 );
-StepperPanel$1.displayName = "StepperPanel";
+StepperPanel.displayName = "StepperPanel";
 
-const stepper = "_stepper_1czb4_2";
-const styles = {
-	stepper: stepper
-};
+const StepperFinalPanel = forwardRef((props, ref) => {
+  const { layoutStyles, componentProps } = useLayoutPropsUtil(props);
+  const { id, className, style, children, ...rest } = componentProps;
+  const { allCompleted, setCurrentId } = useContext(StepperContext);
+  useEffect(() => {
+    if (allCompleted) {
+      setCurrentId("final-panel");
+    }
+  }, [allCompleted, setCurrentId]);
+  const tabPanelClassNames = cx(styles$1["stepper-panel"], className);
+  const styleCombined = {
+    ...style,
+    ...layoutStyles
+  };
+  if (allCompleted) {
+    return /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        style: styleCombined,
+        className: tabPanelClassNames,
+        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-final-panel",
+        tabIndex: 0,
+        ref,
+        children: /* @__PURE__ */ jsx(Overflow, { children })
+      }
+    );
+  }
+  return null;
+});
+StepperFinalPanel.displayName = "StepperFinalPanel";
 
-const StepperNextButton$1 = forwardRef((props, ref) => {
+const StepperNextButton = forwardRef((props, ref) => {
   const {
     setAllCompleted,
     onComplete,
@@ -270,10 +316,20 @@ const StepperNextButton$1 = forwardRef((props, ref) => {
       proceedToNextStep();
     }
   };
+  const data = {
+    nextLabel: props.nextLabel,
+    completeLabel: props.completeLabel
+  };
+  const trackingId = useTrackingId({
+    name: "StepperNextButton",
+    data,
+    hasOverride: !!props["data-tracking-id"]
+  });
   return allCompleted ? null : /* @__PURE__ */ jsx(
     Button,
     {
       "data-anv": "stepper-next-button",
+      "data-tracking-id": trackingId,
       onClick: onClickHandler,
       appearance,
       ref,
@@ -282,9 +338,9 @@ const StepperNextButton$1 = forwardRef((props, ref) => {
     }
   );
 });
-StepperNextButton$1.displayName = "StepperNextButton";
+StepperNextButton.displayName = "StepperNextButton";
 
-const StepperPrevButton$1 = forwardRef((props, ref) => {
+const StepperPrevButton = forwardRef((props, ref) => {
   const {
     setCurrent,
     setFocus,
@@ -307,10 +363,19 @@ const StepperPrevButton$1 = forwardRef((props, ref) => {
     }
     onClick?.(e);
   };
+  const data = {
+    label: props.label
+  };
+  const trackingId = useTrackingId({
+    name: "StepperPrevButton",
+    data,
+    hasOverride: !!props["data-tracking-id"]
+  });
   return current === 0 ? null : /* @__PURE__ */ jsx(
     Button,
     {
       "data-anv": "stepper-prev-button",
+      "data-tracking-id": trackingId,
       onClick: onClickHandler,
       ref,
       ...rest,
@@ -318,59 +383,14 @@ const StepperPrevButton$1 = forwardRef((props, ref) => {
     }
   );
 });
-StepperPrevButton$1.displayName = "StepperPrevButton";
+StepperPrevButton.displayName = "StepperPrevButton";
 
-const StepperFinalPanel$1 = forwardRef((props, ref) => {
-  const { layoutStyles, componentProps } = useLayoutPropsUtil(props);
-  const { id, className, style, children, ...rest } = componentProps;
-  const { allCompleted, setCurrentId } = useContext(StepperContext);
-  useEffect(() => {
-    if (allCompleted) {
-      setCurrentId("final-panel");
-    }
-  }, [allCompleted, setCurrentId]);
-  const tabPanelClassNames = cx(styles$1["stepper-panel"], className);
-  const styleCombined = {
-    ...style,
-    ...layoutStyles
-  };
-  if (allCompleted) {
-    return /* @__PURE__ */ jsx(
-      motion.div,
-      {
-        style: styleCombined,
-        className: tabPanelClassNames,
-        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-final-panel",
-        tabIndex: 0,
-        ref,
-        children: /* @__PURE__ */ jsx(Overflow, { children })
-      }
-    );
-  }
-  return null;
-});
-StepperFinalPanel$1.displayName = "StepperFinalPanel";
+const stepper = "_stepper_1czb4_2";
+const styles = {
+	stepper: stepper
+};
 
-const StepperContext = createContext({
-  current: 0,
-  currentId: "",
-  focus: 0,
-  setFocus: () => void 0,
-  setCurrent: () => void 0,
-  setCurrentId: () => void 0
-});
-const StepperElement$1 = forwardRef(
+const StepperElement = forwardRef(
   (props, ref) => {
     const { layoutStyles, componentProps } = useLayoutPropsUtil(props);
     const {
@@ -440,8 +460,8 @@ const StepperElement$1 = forwardRef(
     ) });
   }
 );
-StepperElement$1.displayName = "Stepper";
-const Stepper$1 = Object.assign(StepperElement$1, {
+StepperElement.displayName = "Stepper";
+const Stepper = Object.assign(StepperElement, {
   /**
    * Individual step component for the Stepper.
    *
@@ -469,7 +489,7 @@ const Stepper$1 = Object.assign(StepperElement$1, {
    *   Contact Details
    * </Stepper.Step>
    */
-  Step: StepperStep$1,
+  Step: StepperStep,
   /**
    * Container component for organizing and displaying stepper steps.
    *
@@ -491,7 +511,7 @@ const Stepper$1 = Object.assign(StepperElement$1, {
    *   <Stepper.Step controls="step3">Step 3</Stepper.Step>
    * </Stepper.List>
    */
-  List: StepperList$1,
+  List: StepperList,
   /**
    * Content panel component for displaying step content in the Stepper.
    *
@@ -515,7 +535,7 @@ const Stepper$1 = Object.assign(StepperElement$1, {
    *   </form>
    * </Stepper.Panel>
    */
-  Panel: StepperPanel$1,
+  Panel: StepperPanel,
   /**
    * Next button component for navigating to the next step in the Stepper.
    *
@@ -545,7 +565,7 @@ const Stepper$1 = Object.assign(StepperElement$1, {
    *   appearance="primary"
    * />
    */
-  NextButton: StepperNextButton$1,
+  NextButton: StepperNextButton,
   /**
    * Previous button component for navigating to the previous step in the Stepper.
    *
@@ -569,7 +589,7 @@ const Stepper$1 = Object.assign(StepperElement$1, {
    *   onClick={(e) => console.log('Going back')}
    * />
    */
-  PrevButton: StepperPrevButton$1,
+  PrevButton: StepperPrevButton,
   /**
    * Final panel component displayed when all stepper steps are completed.
    *
@@ -591,212 +611,8 @@ const Stepper$1 = Object.assign(StepperElement$1, {
    *   <Button onClick={handleSubmit}>Submit</Button>
    * </Stepper.FinalPanel>
    */
-  FinalPanel: StepperFinalPanel$1
-});
-
-const StepperElement = forwardRef(
-  (props, ref) => {
-    return /* @__PURE__ */ jsx(Stepper$1, { ref, ...props });
-  }
-);
-StepperElement.displayName = Stepper$1.displayName;
-const StepperList = forwardRef(
-  (props, ref) => {
-    return /* @__PURE__ */ jsx(StepperList$1, { ref, ...props });
-  }
-);
-StepperList.displayName = StepperList$1.displayName;
-const StepperStep = forwardRef(
-  (props, ref) => {
-    return /* @__PURE__ */ jsx(StepperStep$1, { ref, ...props });
-  }
-);
-StepperStep.displayName = StepperStep$1.displayName;
-const StepperPanel = forwardRef(
-  (props, ref) => {
-    return /* @__PURE__ */ jsx(StepperPanel$1, { ref, ...props });
-  }
-);
-StepperPanel.displayName = StepperPanel$1.displayName;
-const StepperFinalPanel = forwardRef(
-  (props, ref) => {
-    return /* @__PURE__ */ jsx(StepperFinalPanel$1, { ref, ...props });
-  }
-);
-StepperFinalPanel.displayName = StepperFinalPanel$1.displayName;
-const StepperNextButton = forwardRef(
-  (props, ref) => {
-    const data = {
-      nextLabel: props.nextLabel,
-      completeLabel: props.completeLabel
-    };
-    const trackingId = useTrackingId({
-      name: "StepperNextButton",
-      data,
-      hasOverride: !!props["data-tracking-id"]
-    });
-    return /* @__PURE__ */ jsx(
-      StepperNextButton$1,
-      {
-        ref,
-        "data-tracking-id": trackingId,
-        ...props
-      }
-    );
-  }
-);
-StepperNextButton.displayName = StepperNextButton$1.displayName;
-const StepperPrevButton = forwardRef(
-  (props, ref) => {
-    const data = {
-      label: props.label
-    };
-    const trackingId = useTrackingId({
-      name: "StepperPrevButton",
-      data,
-      hasOverride: !!props["data-tracking-id"]
-    });
-    return /* @__PURE__ */ jsx(
-      StepperPrevButton$1,
-      {
-        ref,
-        "data-tracking-id": trackingId,
-        ...props
-      }
-    );
-  }
-);
-StepperPrevButton.displayName = StepperPrevButton$1.displayName;
-const Stepper = Object.assign(StepperElement, {
-  /**
-   * Container component for organizing and displaying stepper steps.
-   *
-   * Features:
-   * - Groups multiple stepper steps together
-   * - Displays current step label
-   * - Responsive design with mobile-friendly layout
-   * - Accessible with proper ARIA roles
-   * - Automatic step organization
-   * - Visual step indicators
-   * - Context-based current step display
-   * - Flexible layout with CSS Grid/Flexbox
-   * - Container queries for responsive behavior
-   *
-   * @example
-   * <Stepper.List>
-   *   <Stepper.Step controls="step1">Step 1</Stepper.Step>
-   *   <Stepper.Step controls="step2">Step 2</Stepper.Step>
-   *   <Stepper.Step controls="step3">Step 3</Stepper.Step>
-   * </Stepper.List>
-   */
-  List: StepperList,
-  /**
-   * Individual step component for the Stepper.
-   *
-   * Features:
-   * - Visual progress indicator with animated bar
-   * - Check icon for completed steps
-   * - Keyboard navigation support
-   * - Accessible with proper ARIA attributes
-   * - Click handling for step navigation
-   * - Visual states for current, completed, and future steps
-   * - Responsive design with mobile-friendly layout
-   * - Focus management for keyboard users
-   * - Custom styling support
-   *
-   * @example
-   * <Stepper.Step controls="step1">
-   *   Personal Information
-   * </Stepper.Step>
-   */
-  Step: StepperStep,
-  /**
-   * Content panel component for displaying step content in the Stepper.
-   *
-   * Features:
-   * - Displays content for the current step only
-   * - Smooth fade-in/fade-out animations
-   * - Automatic overflow handling with scroll support
-   * - Accessible with proper ARIA roles
-   * - Layout utilities for positioning and spacing
-   * - Motion animations for smooth transitions
-   * - Focus management for keyboard navigation
-   * - Responsive design with flexible layout
-   * - Context-based visibility control
-   *
-   * @example
-   * <Stepper.Panel id="step1">
-   *   <h2>Personal Information</h2>
-   *   <form>
-   *     <label htmlFor="name">Name:</label>
-   *     <input id="name" type="text" />
-   *   </form>
-   * </Stepper.Panel>
-   */
-  Panel: StepperPanel,
-  /**
-   * Final panel component displayed when all stepper steps are completed.
-   *
-   * Features:
-   * - Displays only when all steps are completed
-   * - Smooth fade-in animation on completion
-   * - Automatic overflow handling with scroll support
-   * - Accessible with proper ARIA roles
-   * - Layout utilities for positioning and spacing
-   * - Motion animations for smooth transitions
-   * - Focus management for keyboard navigation
-   * - Responsive design with flexible layout
-   * - Context-based visibility control
-   *
-   * @example
-   * <Stepper.FinalPanel>
-   *   <h2>Congratulations!</h2>
-   *   <p>You have successfully completed all steps.</p>
-   *   <Button onClick={handleSubmit}>Submit</Button>
-   * </Stepper.FinalPanel>
-   */
-  FinalPanel: StepperFinalPanel,
-  /**
-   * Next button component for navigating to the next step in the Stepper.
-   *
-   * Features:
-   * - Automatically advances to the next step
-   * - Changes label to "Complete" on the final step
-   * - Supports async validation with Promise return
-   * - Prevents navigation when validation fails
-   * - Hides when all steps are completed
-   * - Accessible with proper button semantics
-   * - Customizable appearance and styling
-   * - Integration with stepper context
-   * - Automatic completion handling
-   * - Automatic tracking ID generation for analytics
-   *
-   * @example
-   * <Stepper.NextButton
-   *   nextLabel="Continue"
-   *   completeLabel="Finish"
-   * />
-   */
-  NextButton: StepperNextButton,
-  /**
-   * Previous button component for navigating to the previous step in the Stepper.
-   *
-   * Features:
-   * - Navigates to the previous step when available
-   * - Hides when on the first step
-   * - Restores navigation when returning from completion
-   * - Accessible with proper button semantics
-   * - Customizable label and styling
-   * - Integration with stepper context
-   * - Automatic focus management
-   * - Support for completion state handling
-   * - Automatic tracking ID generation for analytics
-   *
-   * @example
-   * <Stepper.PrevButton label="Go Back" />
-   */
-  PrevButton: StepperPrevButton
+  FinalPanel: StepperFinalPanel
 });
 
-export { Stepper as S, StepperList as a, StepperStep as b, StepperPanel as c, StepperFinalPanel as d, StepperNextButton as e, StepperPrevButton as f };
-//# sourceMappingURL=Stepper-BtbDBIzz.js.map
+export { Stepper as S, StepperFinalPanel as a, StepperList as b, StepperNextButton as c, StepperPanel as d, StepperPrevButton as e, StepperStep as f };
+//# sourceMappingURL=Stepper-D-fOH9TF.js.map