@servicetitan/anvil2 1.44.2 → 1.45.1

package/dist/Stepper-D-fOH9TF.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stepper-D-fOH9TF.js","sources":["../src/components/Stepper/internal/StepperContext.ts","../src/components/Stepper/StepperList.tsx","../src/components/Stepper/StepperStep.tsx","../src/components/Stepper/StepperPanel.tsx","../src/components/Stepper/StepperFinalPanel.tsx","../src/components/Stepper/StepperNextButton.tsx","../src/components/Stepper/StepperPrevButton.tsx","../src/components/Stepper/Stepper.tsx"],"sourcesContent":["import { Dispatch, SetStateAction, createContext } from \"react\";\n\nexport type StepperContextProps = {\n  current: number;\n  setCurrent: Dispatch<SetStateAction<number>>;\n  currentId: string;\n  setCurrentId: Dispatch<SetStateAction<string>>;\n  focus: number;\n  setFocus: Dispatch<SetStateAction<number>>;\n  onComplete?: () => void;\n  items?: NodeListOf<HTMLElement>;\n  allCompleted?: boolean;\n  setAllCompleted?: Dispatch<SetStateAction<boolean>>;\n  allowNavigateToPrevStep?: boolean;\n};\n\nexport const StepperContext = createContext<StepperContextProps>({\n  current: 0,\n  currentId: \"\",\n  focus: 0,\n  setFocus: () => undefined,\n  setCurrent: () => undefined,\n  setCurrentId: () => undefined,\n});\n","import { ComponentPropsWithoutRef, forwardRef, useContext } from \"react\";\nimport cx from \"classnames\";\n\nimport { StepperContext } from \"./internal/StepperContext\";\n\nimport styles from \"./StepperList.module.scss\";\n\n/**\n * Props for the StepperList component\n * @extends ComponentPropsWithoutRef<\"div\">\n */\nexport type StepperListProps = ComponentPropsWithoutRef<\"div\">;\n\n/**\n * Container component for organizing and displaying stepper steps.\n *\n * Features:\n * - Groups multiple stepper steps together\n * - Displays current step label\n * - Responsive design with mobile-friendly layout\n * - Accessible with proper ARIA roles\n * - Automatic step organization\n * - Visual step indicators\n * - Context-based current step display\n * - Flexible layout with CSS Grid/Flexbox\n * - Container queries for responsive behavior\n *\n * @example\n * <Stepper.List>\n *   <Stepper.Step controls=\"step1\">Step 1</Stepper.Step>\n *   <Stepper.Step controls=\"step2\">Step 2</Stepper.Step>\n *   <Stepper.Step controls=\"step3\">Step 3</Stepper.Step>\n * </Stepper.List>\n */\nexport const StepperList = forwardRef<HTMLDivElement, StepperListProps>(\n  (props, ref) => {\n    const { className, children, onKeyDown, ...rest } = props;\n    const { current, items } = useContext(StepperContext);\n\n    const tabListClassNames = cx(styles[\"stepper-list\"], className);\n    const currentLabel =\n      items?.[current].querySelectorAll(\"span\")[1].textContent;\n\n    return (\n      <div\n        {...rest}\n        className={tabListClassNames}\n        data-anv=\"stepper-list\"\n        ref={ref}\n        role=\"tablist\"\n      >\n        <div className={styles[\"stepper-steps\"]}>{children}</div>\n        <span className={styles.label}>{currentLabel}</span>\n      </div>\n    );\n  },\n);\n\nStepperList.displayName = \"StepperList\";\n","import {\n  forwardRef,\n  useContext,\n  MouseEvent,\n  useRef,\n  ComponentPropsWithoutRef,\n  useEffect,\n  useState,\n  KeyboardEvent,\n} from \"react\";\nimport cx from \"classnames\";\nimport Check from \"@servicetitan/hammer-icon/mdi/round/check.svg\";\n\nimport { Icon } from \"../Icon\";\nimport { StepperContext } from \"./internal/StepperContext\";\nimport { useMergeRefs } from \"../../hooks\";\n\nimport styles from \"./StepperStep.module.scss\";\n\n/**\n * Props for the StepperStep component\n * @extends ComponentPropsWithoutRef<\"button\">\n */\nexport type StepperStepProps = Omit<\n  ComponentPropsWithoutRef<\"button\">,\n  \"onClick\" | \"disabled\"\n> & {\n  /**\n   * ID of the panel that this step is controlling.\n   * Must match the id prop of the corresponding Stepper.Panel.\n   */\n  controls: string;\n\n  /**\n   * Called when the step is clicked.\n   * @param e Mouse event object\n   * @param index Index of the step in the stepper\n   */\n  onClick?: (e: MouseEvent<HTMLButtonElement>, index?: number) => void;\n};\n\n/**\n * Individual step component for the Stepper.\n *\n * Features:\n * - Visual progress indicator with animated bar\n * - Check icon for completed steps\n * - Keyboard navigation support\n * - Accessible with proper ARIA attributes\n * - Click handling for step navigation\n * - Visual states for current, completed, and future steps\n * - Responsive design with mobile-friendly layout\n * - Focus management for keyboard users\n * - Custom styling support\n *\n * @example\n * <Stepper.Step controls=\"step1\">\n *   Personal Information\n * </Stepper.Step>\n *\n * @example\n * <Stepper.Step\n *   controls=\"step2\"\n *   onClick={(e, index) => console.log(`Clicked step ${index}`)}\n * >\n *   Contact Details\n * </Stepper.Step>\n */\nexport const StepperStep = forwardRef<HTMLButtonElement, StepperStepProps>(\n  (props, ref) => {\n    const stepRef = useRef<HTMLButtonElement>(null);\n    const {\n      current,\n      items,\n      setCurrent,\n      focus,\n      setFocus,\n      allCompleted,\n      allowNavigateToPrevStep,\n    } = useContext(StepperContext);\n    const {\n      onClick,\n      children,\n      onFocus,\n      onKeyDown,\n      controls,\n      className,\n      ...rest\n    } = props;\n\n    const index = useRef<number>();\n    const [selected, setSelected] = useState(false);\n    const [completed, setCompleted] = useState(\n      // Below is to be used for custom overriding\n      // completed state for a step\n      // Check Stepper.stories.tsx#103 for the use case\n      stepRef.current?.getAttribute(\"data-completed\") === \"true\"\n        ? true\n        : undefined,\n    );\n\n    useEffect(() => {\n      if (!items) return;\n      index.current = Array.prototype.indexOf.call(items, stepRef.current);\n\n      setCompleted(index.current < current);\n      setSelected(index.current === current);\n    }, [current, items]);\n\n    const stepClassNames = cx(styles[\"stepper-step\"], className, {\n      [styles[\"can-navigate\"]]: allowNavigateToPrevStep,\n      [styles[\"all-completed\"]]: allCompleted,\n    });\n\n    const onClickHandler = (e: MouseEvent<HTMLButtonElement>) => {\n      onClick?.(e, index.current);\n      if (\n        !allowNavigateToPrevStep ||\n        selected ||\n        index.current === undefined ||\n        !items ||\n        index.current > current\n      ) {\n        return;\n      }\n      setCurrent(index.current ?? 0);\n      setFocus(index.current);\n      items[index.current].focus();\n    };\n\n    const onKeyDownHandler = (e: KeyboardEvent<HTMLButtonElement>) => {\n      onKeyDown?.(e);\n      const focusableItems = Array.prototype.filter.call(\n        items,\n        (item) =>\n          item.getAttribute(\"data-completed\") === \"true\" ||\n          item.getAttribute(\"aria-selected\") === \"true\",\n      );\n      const prevFocus = focus - 1;\n      const nextFocus = focus + 1;\n      switch (e.code) {\n        case \"Enter\":\n        case \"Space\":\n          e.preventDefault();\n          setCurrent(focus);\n          break;\n        case \"ArrowRight\":\n          e.preventDefault();\n          if (nextFocus === focusableItems.length) {\n            setFocus(0);\n            focusableItems[0].focus();\n            focusableItems[0].setAttribute(\"tabindex\", \"0\");\n            stepRef.current?.setAttribute(\"tabindex\", \"-1\");\n            return;\n          }\n          stepRef.current?.setAttribute(\"tabindex\", \"-1\");\n          setFocus(nextFocus);\n          focusableItems[nextFocus].focus();\n          focusableItems[nextFocus].setAttribute(\"tabindex\", \"0\");\n          break;\n        case \"ArrowLeft\":\n          e.preventDefault();\n          if (focus === 0) {\n            const lastItemIndex = focusableItems.length - 1;\n            setFocus(lastItemIndex);\n            focusableItems[lastItemIndex].focus();\n            focusableItems[lastItemIndex].setAttribute(\"tabindex\", \"0\");\n            stepRef.current?.setAttribute(\"tabindex\", \"-1\");\n            return;\n          }\n          stepRef.current?.setAttribute(\"tabindex\", \"-1\");\n          setFocus(prevFocus);\n          focusableItems[prevFocus].focus();\n          focusableItems[prevFocus].setAttribute(\"tabindex\", \"0\");\n          break;\n      }\n    };\n\n    return (\n      <button\n        type=\"button\"\n        role=\"tab\"\n        data-anv=\"stepper-step\"\n        className={stepClassNames}\n        aria-selected={selected}\n        aria-controls={controls}\n        tabIndex={allowNavigateToPrevStep && selected ? 0 : -1}\n        data-completed={completed}\n        onClick={onClickHandler}\n        onKeyDown={allowNavigateToPrevStep ? onKeyDownHandler : onKeyDown}\n        {...rest}\n        ref={useMergeRefs([stepRef, ref])}\n      >\n        <span className={styles.bar} />\n        <span className={styles.label}>\n          <span className={styles.circle}>\n            <Icon svg={Check} inherit aria-hidden />\n          </span>\n\n          {children}\n        </span>\n      </button>\n    );\n  },\n);\n\nStepperStep.displayName = \"StepperStep\";\n","import {\n  ComponentPropsWithoutRef,\n  forwardRef,\n  useContext,\n  useEffect,\n} from \"react\";\nimport cx from \"classnames\";\nimport { core } from \"@servicetitan/hammer-token\";\nimport { motion } from \"motion/react\";\n\nimport { LayoutUtilProps } from \"../../types\";\nimport { useLayoutPropsUtil } from \"../../internal/hooks\";\nimport { Overflow } from \"../Overflow\";\nimport { StepperContext } from \"./internal/StepperContext\";\n\nimport styles from \"./StepperPanel.module.scss\";\n\n/**\n * Props for the StepperPanel component\n * @extends ComponentPropsWithoutRef<\"div\">\n * @extends LayoutUtilProps\n */\nexport type StepperPanelProps = Omit<\n  ComponentPropsWithoutRef<\"div\">,\n  \"onAnimationStart\" | \"onDragStart\" | \"onDragEnd\" | \"onDrag\"\n> &\n  LayoutUtilProps & {\n    /**\n     * Unique identifier for the panel.\n     * Must match the controls prop of the corresponding Stepper.Step.\n     */\n    id: string;\n  };\n\n/**\n * Content panel component for displaying step content in the Stepper.\n *\n * Features:\n * - Displays content for the current step only\n * - Smooth fade-in/fade-out animations\n * - Automatic overflow handling with scroll support\n * - Accessible with proper ARIA roles\n * - Layout utilities for positioning and spacing\n * - Motion animations for smooth transitions\n * - Focus management for keyboard navigation\n * - Responsive design with flexible layout\n * - Context-based visibility control\n *\n * @example\n * <Stepper.Panel id=\"step1\">\n *   <h2>Personal Information</h2>\n *   <form>\n *     <label htmlFor=\"name\">Name:</label>\n *     <input id=\"name\" type=\"text\" />\n *   </form>\n * </Stepper.Panel>\n *\n * @example\n * <Stepper.Panel id=\"step2\" className=\"custom-panel\">\n *   <div className=\"step-content\">\n *     <h2>Contact Details</h2>\n *     <p>Please provide your contact information.</p>\n *   </div>\n * </Stepper.Panel>\n */\nexport const StepperPanel = forwardRef<HTMLDivElement, StepperPanelProps>(\n  (props, ref) => {\n    const { layoutStyles, componentProps } = useLayoutPropsUtil(props);\n    const { id, className, style, children, ...rest } = componentProps;\n    const { current, items, allCompleted, setCurrentId } =\n      useContext(StepperContext);\n\n    const currentId = items?.[current].getAttribute(\"aria-controls\");\n    const isCurrent = currentId === id;\n\n    useEffect(() => {\n      if (isCurrent && !allCompleted) {\n        setCurrentId(currentId ?? \"\");\n      }\n    }, [allCompleted, isCurrent, currentId, setCurrentId]);\n\n    const tabPanelClassNames = cx(styles[\"stepper-panel\"], className);\n    const styleCombined = {\n      ...style,\n      ...layoutStyles,\n    };\n\n    if (isCurrent && !allCompleted) {\n      return (\n        <motion.div\n          style={styleCombined}\n          className={tabPanelClassNames}\n          transition={{\n            opacity: {\n              duration:\n                +core.primitive.DurationSlow.value.replace(\"ms\", \"\") / 1000,\n            },\n          }}\n          initial={{ opacity: 0 }}\n          animate={{ opacity: 1 }}\n          exit={{ opacity: 0 }}\n          layout\n          {...rest}\n          role=\"tabpanel\"\n          data-anv=\"stepper-panel\"\n          id={id}\n          ref={ref}\n        >\n          <Overflow flexGrow={1}>{children}</Overflow>\n        </motion.div>\n      );\n    }\n    return <></>;\n  },\n);\n\nStepperPanel.displayName = \"StepperPanel\";\n","import {\n  ComponentPropsWithoutRef,\n  forwardRef,\n  useContext,\n  useEffect,\n} from \"react\";\nimport cx from \"classnames\";\nimport { core } from \"@servicetitan/hammer-token\";\nimport { motion } from \"motion/react\";\n\nimport { LayoutUtilProps } from \"../../types\";\nimport { Overflow } from \"../Overflow\";\nimport { StepperContext } from \"./internal/StepperContext\";\nimport { useLayoutPropsUtil } from \"../../internal/hooks\";\n\nimport styles from \"./StepperPanel.module.scss\";\n\n/**\n * Props for the StepperFinalPanel component\n * @extends ComponentPropsWithoutRef<\"div\">\n * @extends LayoutUtilProps\n */\nexport type StepperFinalPanelProps = Omit<\n  ComponentPropsWithoutRef<\"div\">,\n  \"onAnimationStart\" | \"onDragStart\" | \"onDragEnd\" | \"onDrag\"\n> &\n  LayoutUtilProps;\n\n/**\n * Final panel component displayed when all stepper steps are completed.\n *\n * Features:\n * - Displays only when all steps are completed\n * - Smooth fade-in animation on completion\n * - Automatic overflow handling with scroll support\n * - Accessible with proper ARIA roles\n * - Layout utilities for positioning and spacing\n * - Motion animations for smooth transitions\n * - Focus management for keyboard navigation\n * - Responsive design with flexible layout\n * - Context-based visibility control\n *\n * @example\n * <Stepper.FinalPanel>\n *   <h2>Congratulations!</h2>\n *   <p>You have successfully completed all steps.</p>\n *   <Button onClick={handleSubmit}>Submit</Button>\n * </Stepper.FinalPanel>\n */\nexport const StepperFinalPanel = forwardRef<\n  HTMLDivElement,\n  StepperFinalPanelProps\n>((props, ref) => {\n  const { layoutStyles, componentProps } = useLayoutPropsUtil(props);\n  const { id, className, style, children, ...rest } = componentProps;\n  const { allCompleted, setCurrentId } = useContext(StepperContext);\n\n  useEffect(() => {\n    if (allCompleted) {\n      setCurrentId(\"final-panel\");\n    }\n  }, [allCompleted, setCurrentId]);\n\n  const tabPanelClassNames = cx(styles[\"stepper-panel\"], className);\n  const styleCombined = {\n    ...style,\n    ...layoutStyles,\n  };\n\n  if (allCompleted) {\n    return (\n      <motion.div\n        style={styleCombined}\n        className={tabPanelClassNames}\n        transition={{\n          opacity: {\n            duration:\n              +core.primitive.DurationSlow.value.replace(\"ms\", \"\") / 1000,\n          },\n        }}\n        initial={{ opacity: 0 }}\n        animate={{ opacity: 1 }}\n        exit={{ opacity: 0 }}\n        layout\n        {...rest}\n        role=\"tabpanel\"\n        data-anv=\"stepper-final-panel\"\n        tabIndex={0}\n        ref={ref}\n      >\n        <Overflow>{children}</Overflow>\n      </motion.div>\n    );\n  }\n  return null;\n});\n\nStepperFinalPanel.displayName = \"StepperFinalPanel\";\n","import { forwardRef, useContext, MouseEvent } from \"react\";\n\nimport { Button, ButtonProps } from \"../Button\";\nimport { DataTrackingId } from \"../../types\";\nimport { useTrackingId } from \"../../hooks\";\n\nimport { StepperContext } from \"./internal/StepperContext\";\n\n/**\n * Props for the StepperNextButton component\n * @extends ButtonProps\n */\nexport type StepperNextButtonProps = Omit<ButtonProps, \"children\"> & {\n  /**\n   * Label for the next button.\n   * @default \"Next\"\n   */\n  nextLabel?: string;\n\n  /**\n   * Label for the complete button (shown on the last step).\n   * @default \"Complete\"\n   */\n  completeLabel?: string;\n\n  /**\n   * Called when the \"Next\" button is clicked.\n   * @param e MouseEvent<HTMLButtonElement>\n   * @returns If the function returns `false`, or a Promise that resolves to `false`, the next step will not be executed.\n   */\n  onClick?: (\n    e: MouseEvent<HTMLButtonElement>,\n  ) => void | boolean | Promise<boolean>;\n} & DataTrackingId;\n\n/**\n * Next button component for navigating to the next step in the Stepper.\n *\n * Features:\n * - Automatically advances to the next step\n * - Changes label to \"Complete\" on the final step\n * - Supports async validation with Promise return\n * - Prevents navigation when validation fails\n * - Hides when all steps are completed\n * - Accessible with proper button semantics\n * - Customizable appearance and styling\n * - Integration with stepper context\n * - Automatic completion handling\n * - Automatic tracking ID generation for analytics\n *\n * @example\n * <Stepper.NextButton\n *   nextLabel=\"Continue\"\n *   completeLabel=\"Finish\"\n * />\n *\n * @example\n * <Stepper.NextButton\n *   onClick={async (e) => {\n *     const isValid = await validateForm();\n *     return isValid;\n *   }}\n *   appearance=\"primary\"\n * />\n */\nexport const StepperNextButton = forwardRef<\n  HTMLButtonElement,\n  StepperNextButtonProps\n>((props, ref) => {\n  const {\n    setAllCompleted,\n    onComplete,\n    setCurrent,\n    setFocus,\n    items,\n    current,\n    allCompleted,\n  } = useContext(StepperContext);\n  const {\n    onClick,\n    onFocus,\n    nextLabel = \"Next\",\n    completeLabel = \"Complete\",\n    appearance = \"primary\",\n    ...rest\n  } = props;\n\n  const proceedToNextStep = () => {\n    if (items && current === items.length - 1) {\n      items.forEach((item) => item.setAttribute(\"tabindex\", \"-1\"));\n      setAllCompleted?.(true);\n      onComplete?.();\n      return;\n    }\n    setCurrent(current + 1);\n    setFocus(current + 1);\n  };\n\n  const onClickHandler = (e: MouseEvent<HTMLButtonElement>) => {\n    const onClickResult = onClick?.(e);\n\n    // check if onClick returns a Promise\n    if (\n      onClickResult !== undefined &&\n      !!onClickResult &&\n      (onClickResult as unknown) instanceof Promise\n    ) {\n      (onClickResult as unknown as Promise<boolean>).then((result) => {\n        if (result === false) return;\n        proceedToNextStep();\n      });\n\n      // otherwise, onClick returns a boolean or void\n    } else {\n      if ((onClickResult as void | boolean) === false) return;\n      proceedToNextStep();\n    }\n  };\n\n  const data = {\n    nextLabel: props.nextLabel,\n    completeLabel: props.completeLabel,\n  };\n\n  const trackingId = useTrackingId({\n    name: \"StepperNextButton\",\n    data,\n    hasOverride: !!props[\"data-tracking-id\"],\n  });\n\n  return allCompleted ? null : (\n    <Button\n      data-anv=\"stepper-next-button\"\n      data-tracking-id={trackingId}\n      onClick={onClickHandler}\n      appearance={appearance}\n      ref={ref}\n      {...rest}\n    >\n      {items && current === items.length - 1 ? completeLabel : nextLabel}\n    </Button>\n  );\n});\n\nStepperNextButton.displayName = \"StepperNextButton\";\n","import { forwardRef, useContext, MouseEvent } from \"react\";\n\nimport { DataTrackingId } from \"../../types\";\nimport { Button, ButtonProps } from \"../Button\";\nimport { useTrackingId } from \"../../hooks\";\n\nimport { StepperContext } from \"./internal/StepperContext\";\n\n/**\n * Props for the StepperPrevButton component\n * @extends ButtonProps\n */\nexport type StepperPrevButtonProps = Omit<ButtonProps, \"children\"> & {\n  /**\n   * Label for the previous button.\n   * @default \"Previous\"\n   */\n  label?: string;\n} & DataTrackingId;\n\n/**\n * Previous button component for navigating to the previous step in the Stepper.\n *\n * Features:\n * - Navigates to the previous step when available\n * - Hides when on the first step\n * - Restores navigation when returning from completion\n * - Accessible with proper button semantics\n * - Customizable label and styling\n * - Integration with stepper context\n * - Automatic focus management\n * - Support for completion state handling\n * - Automatic tracking ID generation for analytics\n *\n * @example\n * <Stepper.PrevButton label=\"Go Back\" />\n *\n * @example\n * <Stepper.PrevButton\n *   label=\"Previous Step\"\n *   appearance=\"secondary\"\n *   onClick={(e) => console.log('Going back')}\n * />\n */\nexport const StepperPrevButton = forwardRef<\n  HTMLButtonElement,\n  StepperPrevButtonProps\n>((props, ref) => {\n  const {\n    setCurrent,\n    setFocus,\n    allCompleted,\n    setAllCompleted,\n    items,\n    current,\n    allowNavigateToPrevStep,\n  } = useContext(StepperContext);\n  const { onClick, label = \"Previous\", onFocus, ...rest } = props;\n\n  const onClickHandler = (e: MouseEvent<HTMLButtonElement>) => {\n    if (allCompleted) {\n      setAllCompleted?.(false);\n      if (allowNavigateToPrevStep) {\n        items?.[current].setAttribute(\"tabindex\", \"0\");\n      }\n    } else {\n      setCurrent(current - 1);\n      setFocus(current - 1);\n    }\n\n    onClick?.(e);\n  };\n\n  const data = {\n    label: props.label,\n  };\n\n  const trackingId = useTrackingId({\n    name: \"StepperPrevButton\",\n    data,\n    hasOverride: !!props[\"data-tracking-id\"],\n  });\n\n  return current === 0 ? null : (\n    <Button\n      data-anv=\"stepper-prev-button\"\n      data-tracking-id={trackingId}\n      onClick={onClickHandler}\n      ref={ref}\n      {...rest}\n    >\n      {label}\n    </Button>\n  );\n});\n\nStepperPrevButton.displayName = \"StepperPrevButton\";\n","import {\n  ComponentPropsWithoutRef,\n  forwardRef,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport cx from \"classnames\";\nimport { motion } from \"motion/react\";\n\nimport { useMergeRefs } from \"../../hooks\";\nimport { LayoutUtilProps } from \"../../types\";\nimport { useLayoutPropsUtil } from \"../../internal/hooks\";\n\nimport { StepperList } from \"./StepperList\";\nimport { StepperStep } from \"./StepperStep\";\nimport { StepperPanel } from \"./StepperPanel\";\nimport { StepperFinalPanel } from \"./StepperFinalPanel\";\nimport { StepperNextButton } from \"./StepperNextButton\";\nimport { StepperPrevButton } from \"./StepperPrevButton\";\nimport { StepperContext } from \"./internal/StepperContext\";\n\nimport styles from \"./Stepper.module.scss\";\n\n/**\n * Props for the Stepper component\n * @extends ComponentPropsWithoutRef<\"div\">\n * @extends LayoutUtilProps\n */\nexport type StepperProps = Omit<\n  ComponentPropsWithoutRef<\"div\">,\n  \"onAnimationStart\" | \"onDragStart\" | \"onDragEnd\" | \"onDrag\" | \"onChange\"\n> &\n  LayoutUtilProps & {\n    /**\n     * Default step to start on.\n     * @default undefined\n     */\n    defaultIndex?: number;\n\n    /**\n     * Allows users to navigate to previous steps.\n     * @default undefined\n     */\n    allowNavigateToPrevStep?: boolean;\n\n    /**\n     * Returns current step data when step changes.\n     * @param data Object containing currentStepId and currentStepIndex\n     * @param data.currentStepId ID given to Stepper.Panel, or \"final-panel\"\n     * @param data.currentStepIndex Index of current step, or undefined on final panel\n     */\n    onChange?: (data: {\n      currentStepId: string | \"final-panel\";\n      currentStepIndex?: number;\n    }) => void;\n\n    /**\n     * Called when all steps are completed.\n     */\n    onComplete?: () => void;\n  };\n\nconst StepperElement = forwardRef<HTMLDivElement, StepperProps>(\n  (props, ref) => {\n    const { layoutStyles, componentProps } = useLayoutPropsUtil(props);\n    const {\n      defaultIndex,\n      className,\n      allowNavigateToPrevStep,\n      children,\n      onChange,\n      onComplete,\n      style,\n      ...rest\n    } = componentProps;\n    const tabRef = useRef<HTMLDivElement>(null);\n    const [items, setItems] = useState<NodeListOf<HTMLElement>>();\n    const [allCompleted, setAllCompleted] = useState(false);\n    const [current, setCurrent] = useState<number>(defaultIndex ?? 0);\n    const [currentId, setCurrentId] = useState<string>(\"\");\n    const [focus, setFocus] = useState<number>(defaultIndex ?? 0);\n    const stepperClassNames = cx(styles[\"stepper\"], className);\n\n    useEffect(() => {\n      setItems(tabRef.current?.querySelectorAll(\"[role=tab]:not([disabled])\"));\n    }, []);\n\n    useEffect(() => {\n      onChange?.({\n        currentStepId: currentId,\n        currentStepIndex: allCompleted ? undefined : current,\n      });\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [allCompleted, currentId, onChange]);\n\n    const styleCombined = { ...style, ...layoutStyles };\n\n    const value = useMemo(\n      () => ({\n        current,\n        setCurrent,\n        currentId,\n        setCurrentId,\n        focus,\n        setFocus,\n        onComplete,\n        items,\n        allCompleted,\n        setAllCompleted,\n        allowNavigateToPrevStep,\n      }),\n      [\n        current,\n        currentId,\n        focus,\n        onComplete,\n        items,\n        allCompleted,\n        setAllCompleted,\n        allowNavigateToPrevStep,\n      ],\n    );\n\n    return (\n      <StepperContext.Provider value={value}>\n        <motion.div\n          transition={{ duration: 0 }}\n          layout\n          className={stepperClassNames}\n          data-anv=\"stepper\"\n          style={styleCombined}\n          {...rest}\n          ref={useMergeRefs([tabRef, ref])}\n        >\n          {children}\n        </motion.div>\n      </StepperContext.Provider>\n    );\n  },\n);\n\nStepperElement.displayName = \"Stepper\";\n\n/**\n * Stepper component for creating multi-step workflows and forms.\n *\n * Features:\n * - Multi-step navigation with visual progress indicators\n * - Keyboard navigation support with arrow keys\n * - Optional navigation to previous steps\n * - Smooth animations and transitions\n * - Accessible with proper ARIA roles and attributes\n * - Customizable step labels and content\n * - Completion state handling\n * - Layout utilities for positioning and spacing\n * - Motion animations for step transitions\n * - Context-based state management\n *\n * @example\n * <Stepper defaultIndex={0} allowNavigateToPrevStep>\n *   <Stepper.List>\n *     <Stepper.Step controls=\"step1\">Step 1</Stepper.Step>\n *     <Stepper.Step controls=\"step2\">Step 2</Stepper.Step>\n *     <Stepper.Step controls=\"step3\">Step 3</Stepper.Step>\n *   </Stepper.List>\n *\n *   <Stepper.Panel id=\"step1\">\n *     <h2>Step 1 Content</h2>\n *     <p>This is the first step content.</p>\n *   </Stepper.Panel>\n *\n *   <Stepper.Panel id=\"step2\">\n *     <h2>Step 2 Content</h2>\n *     <p>This is the second step content.</p>\n *   </Stepper.Panel>\n *\n *   <Stepper.Panel id=\"step3\">\n *     <h2>Step 3 Content</h2>\n *     <p>This is the final step content.</p>\n *   </Stepper.Panel>\n *\n *   <Stepper.FinalPanel>\n *     <h2>Completed!</h2>\n *     <p>All steps have been completed successfully.</p>\n *   </Stepper.FinalPanel>\n *\n *   <Stepper.PrevButton />\n *   <Stepper.NextButton />\n * </Stepper>\n */\nexport const Stepper = Object.assign(StepperElement, {\n  /**\n   * Individual step component for the Stepper.\n   *\n   * Features:\n   * - Visual progress indicator with animated bar\n   * - Check icon for completed steps\n   * - Keyboard navigation support\n   * - Accessible with proper ARIA attributes\n   * - Click handling for step navigation\n   * - Visual states for current, completed, and future steps\n   * - Responsive design with mobile-friendly layout\n   * - Focus management for keyboard users\n   * - Custom styling support\n   *\n   * @example\n   * <Stepper.Step controls=\"step1\">\n   *   Personal Information\n   * </Stepper.Step>\n   *\n   * @example\n   * <Stepper.Step\n   *   controls=\"step2\"\n   *   onClick={(e, index) => console.log(`Clicked step ${index}`)}\n   * >\n   *   Contact Details\n   * </Stepper.Step>\n   */\n  Step: StepperStep,\n\n  /**\n   * Container component for organizing and displaying stepper steps.\n   *\n   * Features:\n   * - Groups multiple stepper steps together\n   * - Displays current step label\n   * - Responsive design with mobile-friendly layout\n   * - Accessible with proper ARIA roles\n   * - Automatic step organization\n   * - Visual step indicators\n   * - Context-based current step display\n   * - Flexible layout with CSS Grid/Flexbox\n   * - Container queries for responsive behavior\n   *\n   * @example\n   * <Stepper.List>\n   *   <Stepper.Step controls=\"step1\">Step 1</Stepper.Step>\n   *   <Stepper.Step controls=\"step2\">Step 2</Stepper.Step>\n   *   <Stepper.Step controls=\"step3\">Step 3</Stepper.Step>\n   * </Stepper.List>\n   */\n  List: StepperList,\n\n  /**\n   * Content panel component for displaying step content in the Stepper.\n   *\n   * Features:\n   * - Displays content for the current step only\n   * - Smooth fade-in/fade-out animations\n   * - Automatic overflow handling with scroll support\n   * - Accessible with proper ARIA roles\n   * - Layout utilities for positioning and spacing\n   * - Motion animations for smooth transitions\n   * - Focus management for keyboard navigation\n   * - Responsive design with flexible layout\n   * - Context-based visibility control\n   *\n   * @example\n   * <Stepper.Panel id=\"step1\">\n   *   <h2>Personal Information</h2>\n   *   <form>\n   *     <label htmlFor=\"name\">Name:</label>\n   *     <input id=\"name\" type=\"text\" />\n   *   </form>\n   * </Stepper.Panel>\n   */\n  Panel: StepperPanel,\n\n  /**\n   * Next button component for navigating to the next step in the Stepper.\n   *\n   * Features:\n   * - Automatically advances to the next step\n   * - Changes label to \"Complete\" on the final step\n   * - Supports async validation with Promise return\n   * - Prevents navigation when validation fails\n   * - Hides when all steps are completed\n   * - Accessible with proper button semantics\n   * - Customizable appearance and styling\n   * - Integration with stepper context\n   * - Automatic completion handling\n   *\n   * @example\n   * <Stepper.NextButton\n   *   nextLabel=\"Continue\"\n   *   completeLabel=\"Finish\"\n   * />\n   *\n   * @example\n   * <Stepper.NextButton\n   *   onClick={async (e) => {\n   *     const isValid = await validateForm();\n   *     return isValid;\n   *   }}\n   *   appearance=\"primary\"\n   * />\n   */\n  NextButton: StepperNextButton,\n\n  /**\n   * Previous button component for navigating to the previous step in the Stepper.\n   *\n   * Features:\n   * - Navigates to the previous step when available\n   * - Hides when on the first step\n   * - Restores navigation when returning from completion\n   * - Accessible with proper button semantics\n   * - Customizable label and styling\n   * - Integration with stepper context\n   * - Automatic focus management\n   * - Support for completion state handling\n   *\n   * @example\n   * <Stepper.PrevButton label=\"Go Back\" />\n   *\n   * @example\n   * <Stepper.PrevButton\n   *   label=\"Previous Step\"\n   *   appearance=\"secondary\"\n   *   onClick={(e) => console.log('Going back')}\n   * />\n   */\n  PrevButton: StepperPrevButton,\n\n  /**\n   * Final panel component displayed when all stepper steps are completed.\n   *\n   * Features:\n   * - Displays only when all steps are completed\n   * - Smooth fade-in animation on completion\n   * - Automatic overflow handling with scroll support\n   * - Accessible with proper ARIA roles\n   * - Layout utilities for positioning and spacing\n   * - Motion animations for smooth transitions\n   * - Focus management for keyboard navigation\n   * - Responsive design with flexible layout\n   * - Context-based visibility control\n   *\n   * @example\n   * <Stepper.FinalPanel>\n   *   <h2>Congratulations!</h2>\n   *   <p>You have successfully completed all steps.</p>\n   *   <Button onClick={handleSubmit}>Submit</Button>\n   * </Stepper.FinalPanel>\n   */\n  FinalPanel: StepperFinalPanel,\n});\n"],"names":["styles","Check","core.primitive.DurationSlow"],"mappings":"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"}

package/dist/Stepper.css

@@ -1,5 +1,47 @@
 @layer starter, reset, base, state, application;
-@layer starter, reset, base, state, application;
+@layer reset {
+  ._stepper-list_qeq4d_2 {
+    all: unset;
+    font-family: var(--font-family-base, "Nunito Sans", sans-serif);
+    font-size: 100%;
+    color: var(--foreground-color, #141414);
+    margin: 0;
+    padding: 0;
+    border-style: none;
+    border-width: 0;
+    border-color: transparent;
+    box-sizing: border-box;
+    display: flex;
+  }
+}
+@layer base {
+  ._stepper-list_qeq4d_2 {
+    justify-content: flex-start;
+    position: relative;
+    gap: 0.5rem;
+    flex-direction: column;
+    font-size: 1rem;
+  }
+  ._stepper-steps_qeq4d_24 {
+    justify-content: flex-start;
+    position: relative;
+    gap: 0.5rem;
+    flex-direction: column;
+    flex-direction: row;
+    display: flex;
+    font-size: 1rem;
+  }
+  ._label_qeq4d_33 {
+    font-weight: bold;
+  }
+}
+@layer state {
+  @container stepper (width > 768px) {
+    ._label_qeq4d_33 {
+      display: none;
+    }
+  }
+}@layer starter, reset, base, state, application;
 @layer reset {
   ._stepper-step_txl4u_2 {
     all: unset;
@@ -140,49 +182,6 @@
     }
   }
 }@layer starter, reset, base, state, application;
-@layer reset {
-  ._stepper-list_qeq4d_2 {
-    all: unset;
-    font-family: var(--font-family-base, "Nunito Sans", sans-serif);
-    font-size: 100%;
-    color: var(--foreground-color, #141414);
-    margin: 0;
-    padding: 0;
-    border-style: none;
-    border-width: 0;
-    border-color: transparent;
-    box-sizing: border-box;
-    display: flex;
-  }
-}
-@layer base {
-  ._stepper-list_qeq4d_2 {
-    justify-content: flex-start;
-    position: relative;
-    gap: 0.5rem;
-    flex-direction: column;
-    font-size: 1rem;
-  }
-  ._stepper-steps_qeq4d_24 {
-    justify-content: flex-start;
-    position: relative;
-    gap: 0.5rem;
-    flex-direction: column;
-    flex-direction: row;
-    display: flex;
-    font-size: 1rem;
-  }
-  ._label_qeq4d_33 {
-    font-weight: bold;
-  }
-}
-@layer state {
-  @container stepper (width > 768px) {
-    ._label_qeq4d_33 {
-      display: none;
-    }
-  }
-}@layer starter, reset, base, state, application;
 @layer reset {
   ._stepper-panel_4h550_2 {
     all: unset;

package/dist/Stepper.js

@@ -1,2 +1,2 @@
-export { S as Stepper, d as StepperFinalPanel, a as StepperList, e as StepperNextButton, c as StepperPanel, f as StepperPrevButton, b as StepperStep, S as default } from './Stepper-BtbDBIzz.js';
+export { S as Stepper, a as StepperFinalPanel, b as StepperList, c as StepperNextButton, d as StepperPanel, e as StepperPrevButton, f as StepperStep, S as default } from './Stepper-D-fOH9TF.js';
 //# sourceMappingURL=Stepper.js.map

package/dist/{Switch-DAQFzi-X.js → Switch-C2ddZcr9.js}

@@ -1,13 +1,13 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef, useId } from 'react';
-import { useTrackingId } from './useTrackingId.js';
-import { c as childrenToString } from './childrenToString-Bz9MqbHb-Bz9MqbHb.js';
-import { c as cx } from './index-tZvMCc77.js';
-import { I as Icon } from './Icon-B6HmlQiR-BxQkO3X5.js';
 import { S as SvgCheck } from './check-Cf67OWrZ.js';
-import { F as Flex } from './Flex-CiK7uNUu-BfxHG4L0.js';
-import { H as Helper } from './Helper-h7k80qls-DHPFHTvI.js';
-import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-DWACCL8v-CZNrcQT-.js';
+import { I as Icon } from './Icon-D8SPKeO4.js';
+import { F as Flex } from './Flex-BdQMekvA.js';
+import { c as cx } from './index-tZvMCc77.js';
+import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-DjD5IMh0.js';
+import { c as childrenToString } from './childrenToString-Bz9MqbHb.js';
+import { useTrackingId } from './useTrackingId.js';
+import { H as Helper } from './Helper-BkIDJqgA.js';
 
 import './Switch.css';const toggle = "_toggle_142h4_23";
 const indicator = "_indicator_142h4_37";
@@ -19,7 +19,7 @@ const styles = {
 	check: check
 };
 
-const Switch$1 = forwardRef(
+const Switch = forwardRef(
   (props, ref) => {
     const { layoutStyles, componentProps } = useLayoutPropsUtil(props);
     const {
@@ -37,6 +37,17 @@ const Switch$1 = forwardRef(
     const onChangeHandler = (e) => {
       onChange?.(e, { value, checked: e.target.checked });
     };
+    const data = {
+      label: childrenToString(label),
+      ariaLabel: rest["aria-label"],
+      ariaLabelledBy: rest["aria-labelledby"],
+      value
+    };
+    const trackingId = useTrackingId({
+      name: "Switch",
+      data,
+      hasOverride: !!rest["data-tracking-id"]
+    });
     const switchClassNames = cx(styles["switch"], className);
     const styleCombined = {
       ...style,
@@ -47,6 +58,7 @@ const Switch$1 = forwardRef(
       /* @__PURE__ */ jsx(
         "input",
         {
+          "data-tracking-id": trackingId,
           "data-anv": "switch",
           ref,
           type: "checkbox",
@@ -67,25 +79,7 @@ const Switch$1 = forwardRef(
     ] });
   }
 );
-Switch$1.displayName = "Switch";
-
-const Switch = forwardRef(
-  (props, ref) => {
-    const data = {
-      label: childrenToString(props.label),
-      ariaLabel: props["aria-label"],
-      ariaLabelledBy: props["aria-labelledby"],
-      value: props.value
-    };
-    const trackingId = useTrackingId({
-      name: "Switch",
-      data,
-      hasOverride: !!props["data-tracking-id"]
-    });
-    return /* @__PURE__ */ jsx(Switch$1, { ref, "data-tracking-id": trackingId, ...props });
-  }
-);
-Switch.displayName = Switch$1.displayName;
+Switch.displayName = "Switch";
 
 export { Switch as S };
-//# sourceMappingURL=Switch-DAQFzi-X.js.map
+//# sourceMappingURL=Switch-C2ddZcr9.js.map

package/dist/Switch-C2ddZcr9.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Switch-C2ddZcr9.js","sources":["../src/components/Switch/Switch.tsx"],"sourcesContent":["import {\n  ChangeEvent,\n  ComponentPropsWithoutRef,\n  ReactElement,\n  Ref,\n  forwardRef,\n  useId,\n} from \"react\";\nimport { useTrackingId } from \"../../hooks\";\nimport { DataTrackingId, LayoutUtilProps } from \"../../types\";\nimport { childrenToString } from \"../../internal/functions\";\nimport { useLayoutPropsUtil } from \"../../internal/hooks\";\nimport Check from \"@servicetitan/hammer-icon/mdi/round/check.svg\";\nimport Icon from \"../Icon\";\nimport Flex from \"../Flex\";\nimport { Helper } from \"../../internal/components\";\n\nimport cx from \"classnames\";\nimport styles from \"./Switch.module.scss\";\n\n/**\n * State object returned by the Switch onChange callback\n */\nexport type SwitchState = {\n  /**\n   * Whether the switch is currently checked\n   */\n  checked: boolean;\n  /**\n   * The value of the switch input\n   */\n  value?: string | number | readonly string[];\n};\n\n/**\n * Props for the Switch component\n * @extends ComponentPropsWithoutRef<\"input\">\n * @extends LayoutUtilProps\n */\nexport type SwitchProps = Omit<ComponentPropsWithoutRef<\"input\">, \"onChange\"> &\n  LayoutUtilProps & {\n    /**\n     * Callback when switch is changed.\n     * @param e Change event object\n     * @param state Current switch state with checked status and value\n     */\n    onChange?: (e: ChangeEvent<HTMLInputElement>, state: SwitchState) => void;\n\n    /**\n     * Label for the switch.\n     * @remarks This should either be a string or have text content inside for accessibility\n     */\n    label?: ReactElement | string;\n\n    /**\n     * Description text to display below the label\n     */\n    description?: string;\n  } & DataTrackingId;\n\n/**\n * Switch component for toggling between on/off states.\n *\n * Features:\n * - Toggle switch with smooth animations\n * - Check icon indicator when active\n * - Accessible with proper ARIA roles and attributes\n * - Keyboard navigation support (Space/Enter)\n * - Controlled and uncontrolled state management\n * - Customizable label and styling\n * - Layout utilities for positioning and spacing\n * - Focus management with visible focus indicators\n * - Hover states and visual feedback\n * - Disabled state support\n * - Automatic tracking ID generation for analytics\n *\n * @example\n * <Switch\n *   label=\"Enable notifications\"\n *   onChange={(e, state) => console.log('Switch toggled:', state.checked)}\n * />\n */\nexport const Switch = forwardRef(\n  (props: SwitchProps, ref: Ref<HTMLInputElement>) => {\n    const { layoutStyles, componentProps } = useLayoutPropsUtil(props);\n    const {\n      label,\n      description,\n      className,\n      onChange,\n      checked,\n      defaultChecked,\n      value,\n      style,\n      ...rest\n    } = componentProps;\n\n    const helperUid = useId();\n\n    const onChangeHandler = (e: ChangeEvent<HTMLInputElement>) => {\n      onChange?.(e, { value, checked: e.target.checked });\n    };\n\n    const data = {\n      label: childrenToString(label),\n      ariaLabel: rest[\"aria-label\"],\n      ariaLabelledBy: rest[\"aria-labelledby\"],\n      value,\n    };\n\n    const trackingId = useTrackingId({\n      name: \"Switch\",\n      data,\n      hasOverride: !!rest[\"data-tracking-id\"],\n    });\n\n    const switchClassNames = cx(styles[\"switch\"], className);\n\n    const styleCombined = {\n      ...style,\n      ...layoutStyles,\n      alignItems: description ? \"flex-start\" : \"center\",\n    };\n\n    return (\n      <label className={switchClassNames} style={styleCombined}>\n        <input\n          data-tracking-id={trackingId}\n          data-anv=\"switch\"\n          ref={ref}\n          type=\"checkbox\"\n          role=\"switch\"\n          value={value}\n          aria-checked={checked ?? defaultChecked}\n          checked={checked}\n          defaultChecked={defaultChecked}\n          onChange={onChangeHandler}\n          {...rest}\n        />\n        <span aria-hidden className={styles[\"toggle\"]}>\n          <span className={styles[\"indicator\"]}>\n            <Icon svg={Check} className={styles[\"check\"]} />\n          </span>\n        </span>\n        {label || description ? (\n          <Flex direction=\"column\" gap={1}>\n            {label && label}\n            {description && <Helper id={helperUid} description={description} />}\n          </Flex>\n        ) : null}\n      </label>\n    );\n  },\n);\n\nSwitch.displayName = \"Switch\";\n"],"names":["Check"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAkFO,MAAM,MAAS,GAAA,UAAA;AAAA,EACpB,CAAC,OAAoB,GAA+B,KAAA;AAClD,IAAA,MAAM,EAAE,YAAA,EAAc,cAAe,EAAA,GAAI,mBAAmB,KAAK,CAAA;AACjE,IAAM,MAAA;AAAA,MACJ,KAAA;AAAA,MACA,WAAA;AAAA,MACA,SAAA;AAAA,MACA,QAAA;AAAA,MACA,OAAA;AAAA,MACA,cAAA;AAAA,MACA,KAAA;AAAA,MACA,KAAA;AAAA,MACA,GAAG;AAAA,KACD,GAAA,cAAA;AAEJ,IAAA,MAAM,YAAY,KAAM,EAAA;AAExB,IAAM,MAAA,eAAA,GAAkB,CAAC,CAAqC,KAAA;AAC5D,MAAA,QAAA,GAAW,GAAG,EAAE,KAAA,EAAO,SAAS,CAAE,CAAA,MAAA,CAAO,SAAS,CAAA;AAAA,KACpD;AAEA,IAAA,MAAM,IAAO,GAAA;AAAA,MACX,KAAA,EAAO,iBAAiB,KAAK,CAAA;AAAA,MAC7B,SAAA,EAAW,KAAK,YAAY,CAAA;AAAA,MAC5B,cAAA,EAAgB,KAAK,iBAAiB,CAAA;AAAA,MACtC;AAAA,KACF;AAEA,IAAA,MAAM,aAAa,aAAc,CAAA;AAAA,MAC/B,IAAM,EAAA,QAAA;AAAA,MACN,IAAA;AAAA,MACA,WAAa,EAAA,CAAC,CAAC,IAAA,CAAK,kBAAkB;AAAA,KACvC,CAAA;AAED,IAAA,MAAM,gBAAmB,GAAA,EAAA,CAAG,MAAO,CAAA,QAAQ,GAAG,SAAS,CAAA;AAEvD,IAAA,MAAM,aAAgB,GAAA;AAAA,MACpB,GAAG,KAAA;AAAA,MACH,GAAG,YAAA;AAAA,MACH,UAAA,EAAY,cAAc,YAAe,GAAA;AAAA,KAC3C;AAEA,IAAA,uBACG,IAAA,CAAA,OAAA,EAAA,EAAM,SAAW,EAAA,gBAAA,EAAkB,OAAO,aACzC,EAAA,QAAA,EAAA;AAAA,sBAAA,GAAA;AAAA,QAAC,OAAA;AAAA,QAAA;AAAA,UACC,kBAAkB,EAAA,UAAA;AAAA,UAClB,UAAS,EAAA,QAAA;AAAA,UACT,GAAA;AAAA,UACA,IAAK,EAAA,UAAA;AAAA,UACL,IAAK,EAAA,QAAA;AAAA,UACL,KAAA;AAAA,UACA,gBAAc,OAAW,IAAA,cAAA;AAAA,UACzB,OAAA;AAAA,UACA,cAAA;AAAA,UACA,QAAU,EAAA,eAAA;AAAA,UACT,GAAG;AAAA;AAAA,OACN;AAAA,sBACA,GAAA,CAAC,UAAK,aAAW,EAAA,IAAA,EAAC,WAAW,MAAO,CAAA,QAAQ,CAC1C,EAAA,QAAA,kBAAA,GAAA,CAAC,MAAK,EAAA,EAAA,SAAA,EAAW,OAAO,WAAW,CAAA,EACjC,QAAC,kBAAA,GAAA,CAAA,IAAA,EAAA,EAAK,GAAK,EAAAA,QAAA,EAAO,WAAW,MAAO,CAAA,OAAO,CAAG,EAAA,CAAA,EAChD,CACF,EAAA,CAAA;AAAA,MACC,SAAS,WACR,mBAAA,IAAA,CAAC,QAAK,SAAU,EAAA,QAAA,EAAS,KAAK,CAC3B,EAAA,QAAA,EAAA;AAAA,QAAS,KAAA,IAAA,KAAA;AAAA,QACT,WAAe,oBAAA,GAAA,CAAC,MAAO,EAAA,EAAA,EAAA,EAAI,WAAW,WAA0B,EAAA;AAAA,OAAA,EACnE,CACE,GAAA;AAAA,KACN,EAAA,CAAA;AAAA;AAGN;AAEA,MAAA,CAAO,WAAc,GAAA,QAAA;;;;"}

package/dist/Switch.css

@@ -1,5 +1,4 @@
 @layer starter, reset, base, state, application;
-@layer starter, reset, base, state, application;
 @layer reset {
   ._switch_142h4_2 {
     all: unset;

package/dist/Switch.js

@@ -1,2 +1,2 @@
-export { S as Switch, S as default } from './Switch-DAQFzi-X.js';
+export { S as Switch, S as default } from './Switch-C2ddZcr9.js';
 //# sourceMappingURL=Switch.js.map

package/dist/{Tab-BSC7e4rM.js → Tab-wNucMTgo.js}

@@ -1,14 +1,14 @@
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import * as React from 'react';
-import { useId, useRef, useContext, useInsertionEffect, useCallback, useMemo, Children, isValidElement, useState, forwardRef, createContext, useLayoutEffect, useEffect } from 'react';
-import { useTrackingId } from './useTrackingId.js';
+import { useId, useRef, useContext, useInsertionEffect, useCallback, useMemo, Children, isValidElement, useState, createContext, forwardRef, useLayoutEffect, useEffect } from 'react';
+import { D as Duration, e as DurationSlow } from './primitive-BoyEHaOo.js';
 import { c as cx } from './index-tZvMCc77.js';
-import { I as Icon } from './Icon-B6HmlQiR-BxQkO3X5.js';
-import { M as MotionConfigContext, u as useConstant, P as PresenceContext, a as usePresence, b as useIsomorphicLayoutEffect, L as LayoutGroupContext, m as motion } from './proxy-CreWmH-e.js';
 import { u as useReducedMotion } from './use-reduced-motion-znCm41qB.js';
-import { D as Duration, e as DurationSlow } from './primitive-BoyEHaOo.js';
-import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-DWACCL8v-CZNrcQT-.js';
-import { u as useMergeRefs } from './useMergeRefs-Bde85AWI-Bde85AWI.js';
+import { M as MotionConfigContext, u as useConstant, P as PresenceContext, a as usePresence, b as useIsomorphicLayoutEffect, L as LayoutGroupContext, m as motion } from './proxy-CreWmH-e.js';
+import { useTrackingId } from './useTrackingId.js';
+import { u as useMergeRefs } from './useMergeRefs-Bde85AWI.js';
+import { I as Icon } from './Icon-D8SPKeO4.js';
+import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-DjD5IMh0.js';
 
 import './Tab.css';/**
  * Measurement functionality has to be within a separate component
@@ -303,9 +303,11 @@ const AnimatePresence = ({ children, custom, initial = true, onExitComplete, pre
         }) }));
 };
 
-const SvgArrowBack = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M19 11H7.83l4.88-4.88c.39-.39.39-1.03 0-1.42a.996.996 0 0 0-1.41 0l-6.59 6.59a.996.996 0 0 0 0 1.41l6.59 6.59a.996.996 0 1 0 1.41-1.41L7.83 13H19c.55 0 1-.45 1-1s-.45-1-1-1z" }));
-
-const SvgArrowForward = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M5 13h11.17l-4.88 4.88c-.39.39-.39 1.03 0 1.42.39.39 1.02.39 1.41 0l6.59-6.59a.996.996 0 0 0 0-1.41l-6.58-6.6a.996.996 0 1 0-1.41 1.41L16.17 11H5c-.55 0-1 .45-1 1s.45 1 1 1z" }));
+const initialValue = {
+  current: 0,
+  focus: 0
+};
+const TabContext = createContext(initialValue);
 
 const tab = "_tab_1854k_2";
 const inner = "_inner_1854k_70";
@@ -329,7 +331,7 @@ const styles = {
 	fill: fill
 };
 
-const TabButton$1 = forwardRef(
+const TabButton = forwardRef(
   (props, ref) => {
     const buttonRef = useRef(null);
     const shouldReduceMotion = useReducedMotion();
@@ -365,10 +367,20 @@ const TabButton$1 = forwardRef(
       focusController?.(e);
       onKeyDown?.(e);
     };
+    const data = {
+      id,
+      controls
+    };
+    const trackingId = useTrackingId({
+      name: "TabButton",
+      data,
+      hasOverride: !!rest["data-tracking-id"]
+    });
     const tabButtonClassNames = cx(styles["tab-button"], className);
     return /* @__PURE__ */ jsxs(
       "button",
       {
+        "data-tracking-id": trackingId,
         type: "button",
         role: "tab",
         "data-anv": "tab-button",
@@ -398,9 +410,13 @@ const TabButton$1 = forwardRef(
     );
   }
 );
-TabButton$1.displayName = "TabButton";
+TabButton.displayName = "TabButton";
+
+const SvgArrowBack = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M19 11H7.83l4.88-4.88c.39-.39.39-1.03 0-1.42a.996.996 0 0 0-1.41 0l-6.59 6.59a.996.996 0 0 0 0 1.41l6.59 6.59a.996.996 0 1 0 1.41-1.41L7.83 13H19c.55 0 1-.45 1-1s-.45-1-1-1z" }));
 
-const TabList$1 = forwardRef(
+const SvgArrowForward = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M5 13h11.17l-4.88 4.88c-.39.39-.39 1.03 0 1.42.39.39 1.02.39 1.41 0l6.59-6.59a.996.996 0 0 0 0-1.41l-6.58-6.6a.996.996 0 1 0-1.41 1.41L16.17 11H5c-.55 0-1 .45-1 1s.45 1 1 1z" }));
+
+const TabList = forwardRef(
   (props, ref) => {
     const { className, children, onKeyDown, ...rest } = props;
     const { goToPrev, gotoNext, dir } = useContext(TabContext);
@@ -494,9 +510,9 @@ const TabList$1 = forwardRef(
     );
   }
 );
-TabList$1.displayName = "TabList";
+TabList.displayName = "TabList";
 
-const TabPanel$1 = forwardRef(
+const TabPanel = forwardRef(
   (props, ref) => {
     const { id, className, style, ...rest } = props;
     const { current, items } = useContext(TabContext);
@@ -535,14 +551,9 @@ const TabPanel$1 = forwardRef(
     );
   }
 );
-TabPanel$1.displayName = "TabPanel";
+TabPanel.displayName = "TabPanel";
 
-const initialValue = {
-  current: 0,
-  focus: 0
-};
-const TabContext = createContext(initialValue);
-const TabElement$1 = forwardRef((props, ref) => {
+const TabElement = forwardRef((props, ref) => {
   const { layoutStyles, componentProps } = useLayoutPropsUtil(props);
   const { defaultIndex, className, style, fill, ...rest } = componentProps;
   const tabRef = useRef(null);
@@ -550,9 +561,6 @@ const TabElement$1 = forwardRef((props, ref) => {
   const [current, setCurrent] = useState(defaultIndex ?? 0);
   const [focus, setFocus] = useState(defaultIndex ?? 0);
   const [dir, setDir] = useState("ltr");
-  const tabClassNames = cx(styles["tab"], className, {
-    [styles["fill"]]: fill
-  });
   const uid = useId();
   useEffect(() => {
     setItems(tabRef.current?.querySelectorAll("[role=tab]:not([disabled])"));
@@ -584,10 +592,6 @@ const TabElement$1 = forwardRef((props, ref) => {
       observer.disconnect();
     };
   }, []);
-  const styleCombined = {
-    ...style,
-    ...layoutStyles
-  };
   const focusScroller = (node) => {
     node?.scrollIntoView({
       behavior: "smooth",
@@ -666,6 +670,13 @@ const TabElement$1 = forwardRef((props, ref) => {
     }),
     [current, focus, goToPrev, gotoNext, items, onKeyDownHandler, uid, dir]
   );
+  const tabClassNames = cx(styles["tab"], className, {
+    [styles["fill"]]: fill
+  });
+  const styleCombined = {
+    ...style,
+    ...layoutStyles
+  };
   return /* @__PURE__ */ jsx(TabContext.Provider, { value, children: /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: /* @__PURE__ */ jsx(
     motion.div,
     {
@@ -679,96 +690,7 @@ const TabElement$1 = forwardRef((props, ref) => {
     }
   ) }) });
 });
-TabElement$1.displayName = "Tab";
-const Tab$1 = Object.assign(TabElement$1, {
-  /**
-   * TabButton component for individual tab navigation buttons.
-   *
-   * Features:
-   * - Automatic ARIA attributes for accessibility
-   * - Visual indicator for active state
-   * - Keyboard navigation support
-   * - Smooth animations with reduced motion support
-   * - Proper focus management
-   * - RTL language support
-   *
-   * @example
-   * <Tab.Button id="tab1" controls="panel1" onClick={(e, index) => console.log('Tab clicked:', index)}>
-   *   First Tab
-   * </Tab.Button>
-   */
-  Button: TabButton$1,
-  /**
-   * TabList component for containing and managing tab buttons.
-   *
-   * Features:
-   * - Horizontal scrolling for overflow tabs
-   * - Navigation arrows for overflow content
-   * - RTL language support
-   * - Automatic overflow detection
-   * - Proper ARIA roles for accessibility
-   * - Smooth scrolling behavior
-   * - Visual indicator positioning
-   *
-   * @example
-   * <Tab.List>
-   *   <Tab.Button id="tab1" controls="panel1">First Tab</Tab.Button>
-   *   <Tab.Button id="tab2" controls="panel2">Second Tab</Tab.Button>
-   *   <Tab.Button id="tab3" controls="panel3">Third Tab</Tab.Button>
-   * </Tab.List>
-   */
-  List: TabList$1,
-  /**
-   * TabPanel component for displaying tab content.
-   *
-   * Features:
-   * - Automatic visibility based on active tab
-   * - Smooth fade animations
-   * - Proper ARIA attributes for accessibility
-   * - Automatic association with tab buttons
-   * - Focus management
-   * - Layout animations
-   *
-   * @example
-   * <Tab.Panel id="panel1">
-   *   <h2>First Tab Content</h2>
-   *   <p>This is the content for the first tab.</p>
-   * </Tab.Panel>
-   */
-  Panel: TabPanel$1
-});
-
-const TabElement = forwardRef((props, ref) => {
-  return /* @__PURE__ */ jsx(Tab$1, { ref, ...props });
-});
-TabElement.displayName = Tab$1.displayName;
-const TabButton = forwardRef(
-  (props, ref) => {
-    const data = {
-      id: props.id,
-      controls: props.controls
-    };
-    const trackingId = useTrackingId({
-      name: "TabButton",
-      data,
-      hasOverride: !!props["data-tracking-id"]
-    });
-    return /* @__PURE__ */ jsx(TabButton$1, { ref, "data-tracking-id": trackingId, ...props });
-  }
-);
-TabButton.displayName = TabButton$1.displayName;
-const TabList = forwardRef(
-  (props, ref) => {
-    return /* @__PURE__ */ jsx(TabList$1, { ref, ...props });
-  }
-);
-TabList.displayName = TabList$1.displayName;
-const TabPanel = forwardRef(
-  (props, ref) => {
-    return /* @__PURE__ */ jsx(TabPanel$1, { ref, ...props });
-  }
-);
-TabPanel.displayName = TabPanel$1.displayName;
+TabElement.displayName = "Tab";
 const Tab = Object.assign(TabElement, {
   /**
    * TabButton component for individual tab navigation buttons.
@@ -829,4 +751,4 @@ const Tab = Object.assign(TabElement, {
 });
 
 export { Tab as T, TabButton as a, TabList as b, TabPanel as c };
-//# sourceMappingURL=Tab-BSC7e4rM.js.map
+//# sourceMappingURL=Tab-wNucMTgo.js.map