@purpur/library 9.8.1 → 9.10.0

package/dist/select-XNPtpZhh.mjs

@@ -0,0 +1,171 @@
+import { jsxs as f, jsx as t } from "react/jsx-runtime";
+import { forwardRef as F, useId as I } from "react";
+import { F as S } from "./field-error-text-CBSX8dGx.mjs";
+import { F as j } from "./field-helper-text-C5ee4SFV.mjs";
+import { r as z } from "./check-circle-filled.es-umBwOv5_.mjs";
+import { l as L } from "./chevron-down.es-PCIIj6oG.mjs";
+import { L as q } from "./label-7sJe5-pX.mjs";
+import { a as E } from "./spinner-DRQN6YdK.mjs";
+import { c as H } from "./bind-CU-R61T-.mjs";
+const K = {
+  "purpur-select": "_purpur-select_1gf3p_1",
+  "purpur-select__label": "_purpur-select__label_1gf3p_7",
+  "purpur-select__field-row": "_purpur-select__field-row_1gf3p_12",
+  "purpur-select__frame": "_purpur-select__frame_1gf3p_16",
+  "purpur-select__frame--negative": "_purpur-select__frame--negative_1gf3p_23",
+  "purpur-select__select-container": "_purpur-select__select-container_1gf3p_26",
+  "purpur-select__select-container--disabled": "_purpur-select__select-container--disabled_1gf3p_33",
+  "purpur-select__select": "_purpur-select__select_1gf3p_26",
+  "purpur-select__select-container--readonly": "_purpur-select__select-container--readonly_1gf3p_33",
+  "purpur-select__select-container--negative": "_purpur-select__select-container--negative_1gf3p_41",
+  "purpur-select__select--error": "_purpur-select__select--error_1gf3p_91",
+  "purpur-select__select--is-valid": "_purpur-select__select--is-valid_1gf3p_97",
+  "purpur-select__select--negative": "_purpur-select__select--negative_1gf3p_103",
+  "purpur-select__end-adornments": "_purpur-select__end-adornments_1gf3p_120",
+  "purpur-select__select-icon": "_purpur-select__select-icon_1gf3p_130",
+  "purpur-select__select-icon--readonly": "_purpur-select__select-icon--readonly_1gf3p_133",
+  "purpur-select__select-icon--disabled": "_purpur-select__select-icon--disabled_1gf3p_133",
+  "purpur-select__select-icon--negative": "_purpur-select__select-icon--negative_1gf3p_136",
+  "purpur-select__valid-icon": "_purpur-select__valid-icon_1gf3p_142"
+}, a = H.bind(K), e = "purpur-select", R = F(
+  ({
+    label: r,
+    options: n,
+    className: p,
+    errorText: s,
+    helperText: u,
+    negative: l = !1,
+    placeholder: c,
+    readOnly: d = !1,
+    ["data-testid"]: b,
+    valid: N,
+    loading: y,
+    ..._
+  }, w) => {
+    const i = (m) => b ? `${b}-${m}` : void 0, g = N && !s, x = I(), o = _.id ?? x, v = u ? `${o}-helper-text` : void 0, C = a(`${e}__select-container`, {
+      [`${e}__select-container--disabled`]: _.disabled,
+      [`${e}__select-container--readonly`]: d && !_.disabled,
+      [`${e}__select-container--negative`]: l
+    });
+    return /* @__PURE__ */ f(
+      "div",
+      {
+        className: a(e, p, {
+          [`${e}--negative`]: l
+        }),
+        "data-testid": b,
+        children: [
+          r && /* @__PURE__ */ f(
+            q,
+            {
+              htmlFor: o,
+              className: a(`${e}__label`),
+              "data-testid": i("label"),
+              disabled: _.disabled,
+              negative: l,
+              children: [
+                _.required && /* @__PURE__ */ t("span", { "aria-hidden": !0, children: "*" }),
+                r
+              ]
+            }
+          ),
+          /* @__PURE__ */ t("div", { className: a(`${e}__field-row`), children: /* @__PURE__ */ f("div", { className: C, children: [
+            /* @__PURE__ */ f(
+              "select",
+              {
+                ..._,
+                onChange: d ? void 0 : _?.onChange,
+                id: o,
+                ref: w,
+                "data-testid": i("select"),
+                "aria-describedby": _["aria-describedby"] || v,
+                "aria-invalid": _["aria-invalid"] || !!s,
+                "aria-disabled": _["aria-disabled"] || _.disabled,
+                "aria-readonly": _["aria-readonly"] || d && !_.disabled,
+                className: a(`${e}__select`, {
+                  [`${e}__select--error`]: !!s,
+                  [`${e}__select--is-valid`]: g,
+                  [`${e}__select--negative`]: l
+                }),
+                children: [
+                  c && /* @__PURE__ */ t("option", { value: c.value ?? c.label, disabled: !0, children: c.label }),
+                  n.map(
+                    (m, $) => V(m) ? k(m, o, $, d) : h(m, o, $, d)
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ f("div", { className: a(`${e}__end-adornments`), children: [
+              y ? /* @__PURE__ */ t(
+                E,
+                {
+                  disabled: _.disabled,
+                  size: "xxs",
+                  negative: l,
+                  "data-testid": i("spinner")
+                },
+                "spinner"
+              ) : /* @__PURE__ */ t(
+                L,
+                {
+                  className: a(`${e}__select-icon`, {
+                    [`${e}__select-icon--disabled`]: _.disabled,
+                    [`${e}__select-icon--readonly`]: d && !_.disabled,
+                    [`${e}__select-icon--is-valid`]: g,
+                    [`${e}__select-icon--negative`]: l
+                  }),
+                  "data-testid": i("dropdown-icon"),
+                  size: "sm"
+                },
+                "chevron-down-icon"
+              ),
+              g && /* @__PURE__ */ t(
+                z,
+                {
+                  "data-testid": i("valid-icon"),
+                  className: a(`${e}__valid-icon`)
+                },
+                "valid-icon"
+              )
+            ] }),
+            /* @__PURE__ */ t(
+              "div",
+              {
+                className: a(`${e}__frame`, {
+                  [`${e}__frame--negative`]: l
+                })
+              }
+            )
+          ] }) }),
+          v && /* @__PURE__ */ t(
+            j,
+            {
+              disabled: _.disabled,
+              "data-testid": i("helper-text"),
+              id: v,
+              negative: l,
+              children: u
+            }
+          ),
+          s && /* @__PURE__ */ t(S, { negative: l, "data-testid": i("error-text"), children: s })
+        ]
+      }
+    );
+  }
+), V = (r) => r.hasOwnProperty("options"), k = (r, n, p, s) => {
+  const u = `${n}--group--${p}`;
+  return /* @__PURE__ */ t("optgroup", { label: r.label, children: r.options.map((l, c) => h(l, u, c, s)) }, u);
+}, h = (r, n, p, s) => /* @__PURE__ */ t(
+  "option",
+  {
+    value: r.value ?? r.label,
+    disabled: s,
+    children: r.label
+  },
+  `${n}--option--${p}`
+);
+R.displayName = "Select";
+export {
+  R as S
+};
+//# sourceMappingURL=select-XNPtpZhh.mjs.map

package/dist/select-XNPtpZhh.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-XNPtpZhh.mjs","sources":["../../../components/select/src/select.tsx"],"sourcesContent":["import React, { forwardRef, useId } from \"react\";\nimport type { BaseProps } from \"@purpur/common-types\";\nimport { FieldErrorText } from \"@purpur/field-error-text\";\nimport { FieldHelperText } from \"@purpur/field-helper-text\";\nimport { IconCheckCircleFilled } from \"@purpur/icon/check-circle-filled\";\nimport { IconChevronDown } from \"@purpur/icon/chevron-down\";\nimport { Label } from \"@purpur/label\";\nimport { Spinner } from \"@purpur/spinner\";\nimport c from \"classnames/bind\";\n\nimport styles from \"./select.module.scss\";\n\nexport type SelectProps = Omit<BaseProps<\"select\">, \"multiple\" | \"children\"> & {\n  label?: string;\n  /**\n   * Options which will be available in the select input's dropdown menu.\n   *\n   * For single options:\n   *\n   * ```\n   * [\n   *   {\n   *     label: \"Option 1\",\n   *     value: \"Option 1\"\n   *   },\n   *   {\n   *     label: \"Option 2\",\n   *     value: \"Option 2\"\n   *   }\n   * ]\n   * ```\n   * For option groups:\n   *\n   * ```\n   *\n   * [\n   *   {\n   *     label: \"Option group 1\"\n   *     options: [\n   *       {\n   *         label: \"Group 1 option 1\",\n   *         value: \"group 1 option 1\"\n   *       },\n   *       {\n   *         label: \"Group 1 option 2\",\n   *         value: \"Group 1 option 2\"\n   *       }\n   *     ]\n   *   }\n   * ]\n   * ```\n   *\n   * _Note! When no value is provided for the option, the label of the option is used as a fallback._\n   */\n  options: (SelectOption | SelectOptionGroup)[];\n  /**\n   * Placeholder option for the dropdown (e.g \"Select\" / \"Choose\").\n   *\n   * Use the following format when providing a placeholder:\n   *\n   * ```\n   * {\n   *   label: \"Placeholder option\",\n   *   value: \"Placeholder value\"\n   * }\n   * ```\n   */\n  placeholder?: SelectOption;\n  readOnly?: boolean;\n  errorText?: string;\n  helperText?: string;\n  /**\n   * Use to render select with valid appearance. A check\n   * icon will render at the start inside of the input.\n   */\n  valid?: boolean;\n  loading?: boolean;\n  negative?: boolean;\n};\n\nexport type SelectOption = {\n  label: string;\n  value?: string;\n};\n\nexport type SelectOptionGroup = {\n  label: string;\n  options: SelectOption[];\n};\n\nconst cx = c.bind(styles);\nconst rootClassName = \"purpur-select\";\n\nexport const Select = forwardRef<HTMLSelectElement, SelectProps>(\n  (\n    {\n      label,\n      options,\n      className,\n      errorText,\n      helperText,\n      negative = false,\n      placeholder,\n      readOnly = false,\n      [\"data-testid\"]: dataTestId,\n      valid,\n      loading,\n      ...selectProps\n    },\n    ref\n  ) => {\n    const getTestId = (name: string) => (dataTestId ? `${dataTestId}-${name}` : undefined);\n    const isValid = valid && !errorText;\n    const randomId = useId();\n    const fieldId = selectProps.id ?? randomId;\n\n    const helperTextId = helperText ? `${fieldId}-helper-text` : undefined;\n\n    const selectContainerClassnames = cx(`${rootClassName}__select-container`, {\n      [`${rootClassName}__select-container--disabled`]: selectProps.disabled,\n      [`${rootClassName}__select-container--readonly`]: readOnly && !selectProps.disabled,\n      [`${rootClassName}__select-container--negative`]: negative,\n    });\n\n    return (\n      <div\n        className={cx(rootClassName, className, {\n          [`${rootClassName}--negative`]: negative,\n        })}\n        data-testid={dataTestId}\n      >\n        {label && (\n          <Label\n            htmlFor={fieldId}\n            className={cx(`${rootClassName}__label`)}\n            data-testid={getTestId(\"label\")}\n            disabled={selectProps.disabled}\n            negative={negative}\n          >\n            {selectProps.required && <span aria-hidden>*</span>}\n            {label}\n          </Label>\n        )}\n        <div className={cx(`${rootClassName}__field-row`)}>\n          <div className={selectContainerClassnames}>\n            <select\n              {...selectProps}\n              onChange={readOnly ? undefined : selectProps?.onChange}\n              id={fieldId}\n              ref={ref}\n              data-testid={getTestId(\"select\")}\n              aria-describedby={selectProps[\"aria-describedby\"] || helperTextId}\n              aria-invalid={selectProps[\"aria-invalid\"] || !!errorText}\n              aria-disabled={selectProps[\"aria-disabled\"] || selectProps.disabled}\n              aria-readonly={selectProps[\"aria-readonly\"] || (readOnly && !selectProps.disabled)}\n              className={cx(`${rootClassName}__select`, {\n                [`${rootClassName}__select--error`]: !!errorText,\n                [`${rootClassName}__select--is-valid`]: isValid,\n                [`${rootClassName}__select--negative`]: negative,\n              })}\n            >\n              {placeholder && (\n                <option value={placeholder.value ?? placeholder.label} disabled>\n                  {placeholder.label}\n                </option>\n              )}\n              {options.map((optionOrOptionGroup, index) =>\n                isOptionGroup(optionOrOptionGroup)\n                  ? renderOptionGroup(optionOrOptionGroup, fieldId, index, readOnly)\n                  : renderOptionItem(optionOrOptionGroup, fieldId, index, readOnly)\n              )}\n            </select>\n            <div className={cx(`${rootClassName}__end-adornments`)}>\n              {loading ? (\n                <Spinner\n                  key=\"spinner\"\n                  disabled={selectProps.disabled}\n                  size=\"xxs\"\n                  negative={negative}\n                  data-testid={getTestId(\"spinner\")}\n                />\n              ) : (\n                <IconChevronDown\n                  key=\"chevron-down-icon\"\n                  className={cx(`${rootClassName}__select-icon`, {\n                    [`${rootClassName}__select-icon--disabled`]: selectProps.disabled,\n                    [`${rootClassName}__select-icon--readonly`]: readOnly && !selectProps.disabled,\n                    [`${rootClassName}__select-icon--is-valid`]: isValid,\n                    [`${rootClassName}__select-icon--negative`]: negative,\n                  })}\n                  data-testid={getTestId(\"dropdown-icon\")}\n                  size=\"sm\"\n                />\n              )}\n              {isValid && (\n                <IconCheckCircleFilled\n                  key=\"valid-icon\"\n                  data-testid={getTestId(\"valid-icon\")}\n                  className={cx(`${rootClassName}__valid-icon`)}\n                />\n              )}\n            </div>\n            <div\n              className={cx(`${rootClassName}__frame`, {\n                [`${rootClassName}__frame--negative`]: negative,\n              })}\n            />\n          </div>\n        </div>\n        {helperTextId && (\n          <FieldHelperText\n            disabled={selectProps.disabled}\n            data-testid={getTestId(\"helper-text\")}\n            id={helperTextId}\n            negative={negative}\n          >\n            {helperText}\n          </FieldHelperText>\n        )}\n        {errorText && (\n          <FieldErrorText negative={negative} data-testid={getTestId(\"error-text\")}>\n            {errorText}\n          </FieldErrorText>\n        )}\n      </div>\n    );\n  }\n);\n\nconst isOptionGroup = (option: SelectOption | SelectOptionGroup): option is SelectOptionGroup => {\n  // eslint-disable-next-line no-prototype-builtins\n  return option.hasOwnProperty(\"options\");\n};\n\nconst renderOptionGroup = (\n  optionGroup: SelectOptionGroup,\n  fieldId: string,\n  index: number,\n  disableOption: boolean\n) => {\n  const groupKey = `${fieldId}--group--${index}`;\n\n  return (\n    <optgroup key={groupKey} label={optionGroup.label}>\n      {optionGroup.options.map((option, index) => {\n        return renderOptionItem(option, groupKey, index, disableOption);\n      })}\n    </optgroup>\n  );\n};\n\nconst renderOptionItem = (option: SelectOption, key: string, index: number, disabled: boolean) => {\n  return (\n    <option\n      key={`${key}--option--${index}`}\n      value={option.value ?? option.label}\n      disabled={disabled}\n    >\n      {option.label}\n    </option>\n  );\n};\n\nSelect.displayName = \"Select\";\n"],"names":["cx","c","styles","rootClassName","Select","forwardRef","label","options","className","errorText","helperText","negative","placeholder","readOnly","dataTestId","valid","loading","selectProps","ref","getTestId","name","isValid","randomId","useId","fieldId","helperTextId","selectContainerClassnames","jsxs","Label","jsx","optionOrOptionGroup","index","isOptionGroup","renderOptionGroup","renderOptionItem","Spinner","IconChevronDown","IconCheckCircleFilled","FieldHelperText","FieldErrorText","option","optionGroup","disableOption","groupKey","key","disabled"],"mappings":"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"}

package/dist/select.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./select-DOqTJgTj.js");exports.Select=e.Select;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./select-D6R7I5b5.js");exports.Select=e.Select;
 //# sourceMappingURL=select.cjs.js.map

package/dist/select.es.js

@@ -1,4 +1,4 @@
-import { S as r } from "./select-BEmu_fh9.mjs";
+import { S as r } from "./select-XNPtpZhh.mjs";
 export {
   r as Select
 };

package/dist/stepper-20s8dnPA.mjs

@@ -0,0 +1,449 @@
+import { jsx as r, jsxs as w, Fragment as Z } from "react/jsx-runtime";
+import { forwardRef as P, isValidElement as x, useRef as S, useEffect as H, useState as Y, Children as I } from "react";
+import { b as V, a as z } from "./button-4-yWOgtD.mjs";
+import { l as rr } from "./chevron-left.es-UFhf3v35.mjs";
+import { n as tr } from "./chevron-right.es-D7aVK4ER.mjs";
+import { I as er, R as D } from "./index-IpWiejWQ.mjs";
+import { R as sr, V as nr, S as pr, T as or } from "./index-B8Mazo6u.mjs";
+import { c as L } from "./bind-CU-R61T-.mjs";
+import { b as ir } from "./tooltip-DngYHn5W.mjs";
+import { a as lr } from "./checkmark.es-DdgIZN2R.mjs";
+const ur = {
+  PRIMARY: "primary"
+}, A = {
+  SMALL_SCREEN: "small-screen",
+  LARGE_SCREEN: "large-screen",
+  ALWAYS: "always"
+}, ar = {
+  "purpur-stepper__nav-container": "_purpur-stepper__nav-container_1rouo_1",
+  "purpur-stepper__nav": "_purpur-stepper__nav_1rouo_1",
+  "purpur-stepper": "_purpur-stepper_1rouo_1",
+  "purpur-stepper__scroll-button": "_purpur-stepper__scroll-button_1rouo_7",
+  "purpur-stepper__scroll-button--left": "_purpur-stepper__scroll-button--left_1rouo_18",
+  "purpur-stepper__scroll-button--right": "_purpur-stepper__scroll-button--right_1rouo_21",
+  "purpur-stepper__scroll-button-icon": "_purpur-stepper__scroll-button-icon_1rouo_24",
+  "purpur-stepper__hidden": "_purpur-stepper__hidden_1rouo_27"
+}, _r = {
+  "purpur-stepper-container": "_purpur-stepper-container_162zw_1",
+  "purpur-stepper-container__inner--align-with-grid": "_purpur-stepper-container__inner--align-with-grid_162zw_5",
+  "purpur-stepper-container--primary": "_purpur-stepper-container--primary_162zw_18",
+  "purpur-stepper-container--secondary": "_purpur-stepper-container--secondary_162zw_21"
+}, F = L.bind(_r), v = "purpur-stepper-container", cr = ({
+  ["data-testid"]: t = "purpur-stepper-container",
+  children: e,
+  className: s,
+  alignWithGrid: n,
+  variant: i,
+  ...p
+}) => {
+  const b = F(s, v, {
+    [`${v}--${i}`]: i,
+    [`${v}--align-with-grid`]: n
+  });
+  return /* @__PURE__ */ r("div", { className: b, "data-testid": t, ...p, children: /* @__PURE__ */ r(
+    "div",
+    {
+      className: F(`${v}__inner`, {
+        [`${v}__inner--align-with-grid`]: n
+      }),
+      children: e
+    }
+  ) });
+}, dr = P(
+  ({ children: t, ...e }, s) => {
+    const { finished: n, ...i } = e;
+    return /* @__PURE__ */ r("div", { ...i, ref: s, children: t });
+  }
+), br = (t) => !!t && x(t) && !!t.props.label, mr = {
+  "purpur-stepper-button": "_purpur-stepper-button_162is_1",
+  "purpur-stepper-button__trigger-outline": "_purpur-stepper-button__trigger-outline_162is_21",
+  "purpur-stepper-button--first": "_purpur-stepper-button--first_162is_33",
+  "purpur-stepper-button--current": "_purpur-stepper-button--current_162is_33",
+  "purpur-stepper-button--middle": "_purpur-stepper-button--middle_162is_38",
+  "purpur-stepper-button--last": "_purpur-stepper-button--last_162is_48",
+  "purpur-stepper-button--visibility-small-screen": "_purpur-stepper-button--visibility-small-screen_162is_58",
+  "purpur-stepper-button--visibility-large-screen": "_purpur-stepper-button--visibility-large-screen_162is_66",
+  "purpur-stepper-button__icon": "_purpur-stepper-button__icon_162is_90",
+  "purpur-stepper-button__step-number": "_purpur-stepper-button__step-number_162is_100",
+  "purpur-stepper-button__step-number--current": "_purpur-stepper-button__step-number--current_162is_111",
+  "purpur-stepper-button__step-number--disabled": "_purpur-stepper-button__step-number--disabled_162is_115",
+  "purpur-stepper-button__step-label": "_purpur-stepper-button__step-label_162is_120",
+  "arrow-forward": "_arrow-forward_162is_124",
+  "purpur-stepper-button--primary": "_purpur-stepper-button--primary_162is_136",
+  "purpur-stepper-button--disabled": "_purpur-stepper-button--disabled_162is_139",
+  "purpur-stepper-button--secondary": "_purpur-stepper-button--secondary_162is_145",
+  "arrow-tail": "_arrow-tail_162is_155",
+  "sr-only--lg-down": "_sr-only--lg-down_162is_174"
+}, N = L.bind(mr), c = "purpur-stepper-button", fr = ({
+  ["data-testid"]: t,
+  current: e,
+  disabled: s,
+  stepNumber: n
+}) => /* @__PURE__ */ r(
+  "div",
+  {
+    "data-testid": t,
+    className: N([
+      `${c}__step-number`,
+      {
+        [`${c}__step-number--current`]: e
+      },
+      {
+        [`${c}__step-number--disabled`]: s
+      }
+    ]),
+    children: n
+  }
+), B = P(
+  ({
+    className: t,
+    ["data-testid"]: e,
+    variant: s,
+    step: n,
+    indexOfLastItem: i,
+    index: p,
+    currentStepIndex: b,
+    whenToBeVisible: m,
+    handleStepChange: l,
+    handleStepFocus: a,
+    completedStepLabel: o,
+    ...u
+  }, d) => {
+    const $ = p === 0 ? "first" : p === i ? "last" : "middle", h = p === b;
+    return /* @__PURE__ */ r(er, { asChild: !0, children: /* @__PURE__ */ r(
+      V,
+      {
+        ...u,
+        ref: d,
+        className: N(
+          t,
+          c,
+          `${c}--${$}`,
+          `${c}--${s}`,
+          `${c}--visibility-${m}`,
+          {
+            [`${c}--current`]: h
+          },
+          {
+            [`${c}--disabled`]: n.disabled
+          },
+          {
+            "arrow-tail": $ !== "first"
+          },
+          {
+            "arrow-forward": $ !== "last"
+          }
+        ),
+        id: `stepper-trigger-button-${p}`,
+        variant: z.TERTIARY_PURPLE,
+        "data-testid": `${e}-step-trigger-item-${p}`,
+        disabled: n.disabled,
+        "aria-current": h && "step",
+        "aria-label": n.finished && !h ? [n.label, o].filter(Boolean).join(", ") : void 0,
+        onClick: (T) => l(T, p),
+        onFocus: a,
+        children: /* @__PURE__ */ w("span", { className: N(`${c}__trigger-outline`), children: [
+          n.finished && !h ? /* @__PURE__ */ r(
+            lr,
+            {
+              className: N(`${c}__icon`),
+              "data-testid": `${e}-step-finished-icon`,
+              size: "sm"
+            }
+          ) : /* @__PURE__ */ r(
+            fr,
+            {
+              "data-testid": `${e}-step-number`,
+              current: h,
+              disabled: n.disabled,
+              stepNumber: p + 1
+            }
+          ),
+          /* @__PURE__ */ r(
+            "span",
+            {
+              className: N(`${c}__step-label`, {
+                "sr-only--lg-down": !h
+              }),
+              children: n.label
+            }
+          )
+        ] })
+      }
+    ) });
+  }
+), hr = {
+  "purpur-stepper-nav-items__list": "_purpur-stepper-nav-items__list_lgkh0_1",
+  "purpur-stepper-nav-items__list-item": "_purpur-stepper-nav-items__list-item_lgkh0_7",
+  "purpur-stepper-nav-items__list-item--current": "_purpur-stepper-nav-items__list-item--current_lgkh0_25",
+  "purpur-stepper-nav-items__tooltip-content": "_purpur-stepper-nav-items__tooltip-content_lgkh0_31",
+  "purpur-stepper-nav-items__tooltip-trigger-item-container": "_purpur-stepper-nav-items__tooltip-trigger-item-container_lgkh0_34"
+}, C = L.bind(hr), y = "purpur-stepper-nav-items", gr = P(
+  ({
+    ["data-testid"]: t,
+    variant: e,
+    handleStepChange: s,
+    handleStepFocus: n,
+    steps: i,
+    firstStepRef: p,
+    lastStepRef: b,
+    currentStepIndex: m,
+    completedStepLabel: l
+  }, a) => {
+    const o = i.map((u, d) => {
+      const $ = /* @__PURE__ */ r("span", { className: C(`${y}__tooltip-trigger-item-container`), children: /* @__PURE__ */ r(
+        B,
+        {
+          "data-testid": `${t}-disabled-sm`,
+          variant: e,
+          step: u,
+          indexOfLastItem: i.length - 1,
+          index: d,
+          currentStepIndex: m,
+          whenToBeVisible: A.SMALL_SCREEN,
+          completedStepLabel: l,
+          handleStepChange: s,
+          handleStepFocus: n
+        }
+      ) });
+      return /* @__PURE__ */ r(
+        "li",
+        {
+          className: C(`${y}__list-item`, {
+            [`${y}__list-item--current`]: d === m
+          }),
+          ref: d === 0 ? p : d === i.length - 1 ? b : null,
+          children: u.disabled ? /* @__PURE__ */ w(Z, { children: [
+            /* @__PURE__ */ r(
+              ir,
+              {
+                contentClassName: C(`${y}__tooltip-content`),
+                triggerElement: $,
+                children: u.label
+              }
+            ),
+            /* @__PURE__ */ r(
+              B,
+              {
+                "data-testid": `${t}-disabled-lg`,
+                variant: e,
+                step: u,
+                indexOfLastItem: i.length - 1,
+                index: d,
+                currentStepIndex: m,
+                whenToBeVisible: A.LARGE_SCREEN,
+                completedStepLabel: l,
+                handleStepChange: s,
+                handleStepFocus: n
+              }
+            )
+          ] }) : /* @__PURE__ */ r(
+            B,
+            {
+              "data-testid": t,
+              variant: e,
+              step: u,
+              indexOfLastItem: i.length - 1,
+              index: d,
+              currentStepIndex: m,
+              whenToBeVisible: A.ALWAYS,
+              completedStepLabel: l,
+              handleStepChange: s,
+              handleStepFocus: n
+            }
+          )
+        },
+        u.label
+      );
+    });
+    return /* @__PURE__ */ r(D, { loop: !1, dir: "ltr", children: /* @__PURE__ */ r("ol", { ref: a, className: C(`${y}__list`), children: o }) });
+  }
+), $r = (t) => {
+  const e = S(!0), s = S(null);
+  return H(() => {
+    !e.current && s.current !== null && s.current.focus(), e.current = !1;
+  }, [t]), {
+    contentRef: s
+  };
+}, E = {
+  LEFT: "left",
+  RIGHT: "right"
+}, Rr = () => {
+  const t = S(null), e = S(null), s = S(null), [n, i] = Y(!1), [p, b] = Y(!1), m = (l) => {
+    if (!t.current)
+      return;
+    const a = t.current, o = a.clientWidth, u = a.scrollLeft;
+    l === E.LEFT && a.scroll({
+      behavior: "smooth",
+      left: u - o / 2
+    }), l === E.RIGHT && a.scroll({
+      behavior: "smooth",
+      left: u + o / 2
+    });
+  };
+  return H(() => {
+    if (e.current && s.current && t.current) {
+      const l = new IntersectionObserver(
+        (a) => {
+          for (const o of a) {
+            if (o.target === e.current) {
+              o.isIntersecting ? i(!1) : i(!0);
+              continue;
+            }
+            o.target === s.current && (o.isIntersecting ? b(!1) : b(!0));
+          }
+        },
+        {
+          root: t.current,
+          threshold: 0.95
+        }
+      );
+      return l.observe(e.current), l.observe(s.current), () => l.disconnect();
+    }
+  }, [e, s, t]), {
+    scrollContainer: t,
+    firstStepRef: e,
+    lastStepRef: s,
+    displayLeftScrollButton: n,
+    displayRightScrollButton: p,
+    handleHorizontalScroll: m
+  };
+}, g = L.bind(ar), _ = "purpur-stepper", G = ({
+  ["aria-label"]: t,
+  ["data-testid"]: e,
+  children: s,
+  className: n,
+  completedStepLabel: i,
+  currentStepIndex: p = 0,
+  onStepChange: b,
+  alignWithGrid: m = !1,
+  leftScrollButtonAriaLabel: l,
+  rightScrollButtonAriaLabel: a,
+  variant: o = ur.PRIMARY,
+  ...u
+}) => {
+  const d = I.toArray(s).filter(br), $ = I.map(d, (f) => {
+    const { disabled: R, finished: Q, label: X } = f.props;
+    return {
+      disabled: R ?? !1,
+      finished: Q ?? !1,
+      label: X
+    };
+  }), { contentRef: h } = $r(p), {
+    scrollContainer: T,
+    firstStepRef: M,
+    lastStepRef: U,
+    displayLeftScrollButton: j,
+    displayRightScrollButton: W,
+    handleHorizontalScroll: k
+  } = Rr(), q = g([
+    n,
+    _,
+    {
+      [`${_}--${o}`]: o
+    }
+  ]), O = (f) => {
+    f.target.scrollIntoView({
+      behavior: "smooth",
+      block: "nearest",
+      inline: "center"
+    });
+  }, J = (f, R) => {
+    f.preventDefault(), O(f), b(R);
+  }, K = (f) => {
+    O(f);
+  };
+  return /* @__PURE__ */ w("div", { className: q, ...u, children: [
+    /* @__PURE__ */ r(cr, { variant: o, alignWithGrid: m, children: /* @__PURE__ */ w("div", { className: g(`${_}__nav-container`), children: [
+      /* @__PURE__ */ w(sr, { children: [
+        /* @__PURE__ */ r(nr, { ref: T, children: /* @__PURE__ */ r(
+          "div",
+          {
+            "aria-label": t,
+            "data-testid": e,
+            className: g([
+              `${_}__nav`,
+              {
+                [`${_}__nav--${o}`]: o
+              }
+            ]),
+            children: /* @__PURE__ */ r(D, { loop: !1, dir: "ltr", children: /* @__PURE__ */ r(
+              gr,
+              {
+                "data-testid": e,
+                variant: o,
+                firstStepRef: M,
+                lastStepRef: U,
+                steps: $,
+                currentStepIndex: p,
+                handleStepChange: J,
+                handleStepFocus: K,
+                completedStepLabel: i
+              }
+            ) })
+          }
+        ) }),
+        /* @__PURE__ */ r(pr, { orientation: "horizontal", children: /* @__PURE__ */ r(or, {}) })
+      ] }),
+      j && /* @__PURE__ */ r(
+        V,
+        {
+          "aria-label": l,
+          className: g([
+            `${_}__scroll-button`,
+            `${_}__scroll-button--left`
+          ]),
+          variant: z.TERTIARY_PURPLE,
+          tabIndex: -1,
+          iconOnly: !0,
+          onClick: () => {
+            k(E.LEFT);
+          },
+          children: /* @__PURE__ */ r(rr, { className: g(`${_}__scroll-button-icon`), size: "md" })
+        }
+      ),
+      W && /* @__PURE__ */ r(
+        V,
+        {
+          "aria-label": a,
+          className: g([
+            `${_}__scroll-button`,
+            `${_}__scroll-button--right`
+          ]),
+          variant: z.TERTIARY_PURPLE,
+          tabIndex: -1,
+          iconOnly: !0,
+          onClick: () => {
+            k(E.RIGHT);
+          },
+          children: /* @__PURE__ */ r(tr, { className: g(`${_}__scroll-button-icon`), size: "md" })
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ r(
+      "div",
+      {
+        tabIndex: -1,
+        "aria-labelledby": `stepper-trigger-button-${p}`,
+        ref: h,
+        style: { outline: "none" },
+        children: /* @__PURE__ */ r("div", { "aria-live": "polite", children: I.map(d, (f, R) => /* @__PURE__ */ r(
+          "div",
+          {
+            className: g({
+              [`${_}__hidden`]: R !== p
+            }),
+            hidden: R !== p,
+            children: f
+          }
+        )) })
+      }
+    )
+  ] });
+};
+G.Content = dr;
+G.displayName = "Stepper";
+export {
+  G as S
+};
+//# sourceMappingURL=stepper-20s8dnPA.mjs.map