@salt-ds/core 1.44.0 → 1.45.0

package/dist-cjs/stepper/Step.js

@@ -0,0 +1,166 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var clsx = require('clsx');
+var React = require('react');
+var makePrefixer = require('../utils/makePrefixer.js');
+var useControlled = require('../utils/useControlled.js');
+require('../utils/useFloatingUI/useFloatingUI.js');
+var useId = require('../utils/useId.js');
+require('../salt-provider/SaltProvider.js');
+require('../viewport/ViewportProvider.js');
+var Step$1 = require('./Step.css.js');
+var Stepper = require('./Stepper.js');
+var StepConnector = require('./internal/StepConnector.js');
+var StepExpandTrigger = require('./internal/StepExpandTrigger.js');
+var StepIcon = require('./internal/StepIcon.js');
+var StepScreenReaderOnly = require('./internal/StepScreenReaderOnly.js');
+var StepText = require('./internal/StepText.js');
+var StepperProvider = require('./internal/StepperProvider.js');
+
+const withBaseName = makePrefixer.makePrefixer("saltStep");
+function Step({
+  id: idProp,
+  label,
+  description,
+  status,
+  stage = "pending",
+  expanded: expandedProp,
+  defaultExpanded,
+  onToggle,
+  className,
+  style,
+  children,
+  ...rest
+}) {
+  const id = useId.useId(idProp);
+  const targetWindow = window.useWindow();
+  const depth = React.useContext(StepperProvider.StepDepthContext);
+  const orientation = React.useContext(StepperProvider.StepperOrientationContext);
+  const hasNestedSteps = !!children;
+  const [expanded, setExpanded] = useControlled.useControlled({
+    name: "Step",
+    state: "expanded",
+    controlled: expandedProp,
+    default: Boolean(defaultExpanded)
+  });
+  styles.useComponentCssInjection({
+    testId: "salt-step",
+    css: Step$1,
+    window: targetWindow
+  });
+  React.useEffect(() => {
+    if (process.env.NODE_ENV !== "production") {
+      if (depth === -1) {
+        console.warn("<Step /> should be used within a <Stepper /> component!");
+      }
+      if (depth > 2) {
+        console.warn("<Step /> should not be nested more than 2 levels deep!");
+      }
+      if (orientation === "horizontal" && hasNestedSteps) {
+        console.warn(
+          "<Stepper /> does not support nested steps in horizontal orientation!"
+        );
+      }
+    }
+  }, [depth, orientation]);
+  const ariaCurrent = stage === "active" ? "step" : void 0;
+  const iconSizeMultiplier = depth === 0 ? 1.5 : 1;
+  const stageText = stage === "inprogress" ? "in progress" : stage;
+  const state = status || stageText;
+  const labelId = `${id}-label`;
+  const descriptionId = `${id}-description`;
+  const expandTriggerId = `${id}-expand-trigger`;
+  const nestedStepperId = `${id}-nested-stepper`;
+  const screenReaderOnly = {
+    stateId: `${id}-sr-only-state`,
+    stateText: state !== "active" ? state : "",
+    substepsId: `${id}-sr-only-substeps`,
+    substepsText: "substeps",
+    toggleSubstepsId: `${id}-sr-only-toggle-substeps`,
+    toggleSubstepsText: "toggle substeps"
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "li",
+    {
+      id,
+      "aria-current": ariaCurrent,
+      className: clsx(
+        withBaseName(),
+        withBaseName(`stage-${stage}`),
+        withBaseName(`depth-${depth}`),
+        status && withBaseName(`status-${status}`),
+        !hasNestedSteps && withBaseName("terminal"),
+        hasNestedSteps && expanded && withBaseName("expanded"),
+        hasNestedSteps && !expanded && withBaseName("collapsed"),
+        className
+      ),
+      style: {
+        "--saltStep-depth": depth,
+        ...style
+      },
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(StepScreenReaderOnly.StepScreenReaderOnly, { children: `${label} ${description !== void 0 ? description : ""} ${screenReaderOnly.stateText}` }),
+        hasNestedSteps && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            StepScreenReaderOnly.StepScreenReaderOnly,
+            {
+              id: screenReaderOnly.toggleSubstepsId,
+              "aria-hidden": true,
+              children: screenReaderOnly.toggleSubstepsText
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(StepScreenReaderOnly.StepScreenReaderOnly, { id: screenReaderOnly.substepsId, "aria-hidden": true, children: screenReaderOnly.substepsText }),
+          /* @__PURE__ */ jsxRuntime.jsx(StepScreenReaderOnly.StepScreenReaderOnly, { id: screenReaderOnly.stateId, "aria-hidden": true, children: screenReaderOnly.stateText })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(StepConnector.StepConnector, {}),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          StepIcon.StepIcon,
+          {
+            stage,
+            status,
+            sizeMultiplier: iconSizeMultiplier,
+            "aria-hidden": true
+          }
+        ),
+        label && /* @__PURE__ */ jsxRuntime.jsx(StepText.StepText, { id: labelId, purpose: "label", "aria-hidden": true, children: label }),
+        description && /* @__PURE__ */ jsxRuntime.jsx(StepText.StepText, { id: descriptionId, purpose: "description", "aria-hidden": true, children: description }),
+        hasNestedSteps && orientation === "vertical" && /* @__PURE__ */ jsxRuntime.jsx(
+          StepExpandTrigger.StepExpandTrigger,
+          {
+            id: expandTriggerId,
+            "aria-expanded": expanded,
+            "aria-controls": nestedStepperId,
+            "aria-labelledby": [
+              labelId,
+              descriptionId,
+              screenReaderOnly.stateId,
+              screenReaderOnly.toggleSubstepsId
+            ].join(" "),
+            expanded,
+            onClick: (event) => {
+              onToggle == null ? void 0 : onToggle(event);
+              setExpanded(!expanded);
+            }
+          }
+        ),
+        hasNestedSteps && orientation === "vertical" && /* @__PURE__ */ jsxRuntime.jsx(
+          Stepper.Stepper,
+          {
+            id: nestedStepperId,
+            "aria-labelledby": [labelId, screenReaderOnly.substepsId].join(" "),
+            "aria-hidden": !expanded,
+            hidden: !expanded,
+            children
+          }
+        )
+      ]
+    }
+  );
+}
+
+exports.Step = Step;
+//# sourceMappingURL=Step.js.map

package/dist-cjs/stepper/Step.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Step.js","sources":["../src/stepper/Step.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport clsx from \"clsx\";\nimport {\n  type CSSProperties,\n  type ComponentPropsWithoutRef,\n  type ReactNode,\n  useContext,\n  useEffect,\n} from \"react\";\nimport { makePrefixer, useControlled, useId } from \"../utils\";\n\nimport type { ButtonProps } from \"../button\";\nimport stepCSS from \"./Step.css\";\nimport { Stepper } from \"./Stepper\";\nimport { StepConnector } from \"./internal/StepConnector\";\nimport { StepExpandTrigger } from \"./internal/StepExpandTrigger\";\nimport { StepIcon } from \"./internal/StepIcon\";\nimport { StepScreenReaderOnly } from \"./internal/StepScreenReaderOnly\";\nimport { StepText } from \"./internal/StepText\";\nimport {\n  StepDepthContext,\n  StepperOrientationContext,\n} from \"./internal/StepperProvider\";\n\nexport interface StepProps\n  extends Omit<ComponentPropsWithoutRef<\"li\">, \"onToggle\"> {\n  /**\n   * The label of the step\n   */\n  label?: ReactNode;\n  /**\n   * Description text is displayed just below the label\n   **/\n  description?: ReactNode;\n  /**\n   * Optional string to determine the status of the step.\n   */\n  status?: StepStatus;\n  /**\n   * The stage of the step\n   */\n  stage?: StepStage;\n  /**\n   * Whether the step item is expanded.\n   */\n  expanded?: boolean;\n  /**\n   * Initial expanded state of the step.\n   */\n  defaultExpanded?: boolean;\n  /**\n   * Callback fired when the step is toggled.\n   */\n  onToggle?: ButtonProps[\"onClick\"];\n}\n\nexport type StepId = string;\n\nexport type StepStatus = \"warning\" | \"error\";\n\nexport type StepStage =\n  | \"pending\"\n  | \"locked\"\n  | \"completed\"\n  | \"inprogress\"\n  | \"active\";\n\nexport type StepDepth = number;\n\nexport interface StepProps\n  extends Omit<ComponentPropsWithoutRef<\"li\">, \"onToggle\"> {\n  label?: ReactNode;\n  description?: ReactNode;\n  status?: StepStatus;\n  stage?: StepStage;\n  expanded?: boolean;\n  defaultExpanded?: boolean;\n  onToggle?: ButtonProps[\"onClick\"];\n}\n\nconst withBaseName = makePrefixer(\"saltStep\");\n\nexport function Step({\n  id: idProp,\n  label,\n  description,\n  status,\n  stage = \"pending\",\n  expanded: expandedProp,\n  defaultExpanded,\n  onToggle,\n  className,\n  style,\n  children,\n  ...rest\n}: StepProps) {\n  const id = useId(idProp);\n  const targetWindow = useWindow();\n  const depth = useContext(StepDepthContext);\n  const orientation = useContext(StepperOrientationContext);\n\n  const hasNestedSteps = !!children;\n\n  const [expanded, setExpanded] = useControlled({\n    name: \"Step\",\n    state: \"expanded\",\n    controlled: expandedProp,\n    default: Boolean(defaultExpanded),\n  });\n\n  useComponentCssInjection({\n    testId: \"salt-step\",\n    css: stepCSS,\n    window: targetWindow,\n  });\n\n  useEffect(() => {\n    if (process.env.NODE_ENV !== \"production\") {\n      if (depth === -1) {\n        console.warn(\"<Step /> should be used within a <Stepper /> component!\");\n      }\n      if (depth > 2) {\n        console.warn(\"<Step /> should not be nested more than 2 levels deep!\");\n      }\n      if (orientation === \"horizontal\" && hasNestedSteps) {\n        console.warn(\n          \"<Stepper /> does not support nested steps in horizontal orientation!\",\n        );\n      }\n    }\n  }, [depth, orientation]);\n\n  const ariaCurrent = stage === \"active\" ? \"step\" : undefined;\n  const iconSizeMultiplier = depth === 0 ? 1.5 : 1;\n  const stageText = stage === \"inprogress\" ? \"in progress\" : stage;\n  const state = status || stageText;\n\n  const labelId = `${id}-label`;\n  const descriptionId = `${id}-description`;\n  const expandTriggerId = `${id}-expand-trigger`;\n  const nestedStepperId = `${id}-nested-stepper`;\n\n  const screenReaderOnly = {\n    stateId: `${id}-sr-only-state`,\n    stateText: state !== \"active\" ? state : \"\",\n    substepsId: `${id}-sr-only-substeps`,\n    substepsText: \"substeps\",\n    toggleSubstepsId: `${id}-sr-only-toggle-substeps`,\n    toggleSubstepsText: \"toggle substeps\",\n  };\n\n  return (\n    <li\n      id={id}\n      aria-current={ariaCurrent}\n      className={clsx(\n        withBaseName(),\n        withBaseName(`stage-${stage}`),\n        withBaseName(`depth-${depth}`),\n        status && withBaseName(`status-${status}`),\n        !hasNestedSteps && withBaseName(\"terminal\"),\n        hasNestedSteps && expanded && withBaseName(\"expanded\"),\n        hasNestedSteps && !expanded && withBaseName(\"collapsed\"),\n        className,\n      )}\n      style={\n        {\n          \"--saltStep-depth\": depth,\n          ...style,\n        } as CSSProperties\n      }\n      {...rest}\n    >\n      <StepScreenReaderOnly>\n        {`${label} ${description !== undefined ? description : \"\"} ${screenReaderOnly.stateText}`}\n      </StepScreenReaderOnly>\n      {hasNestedSteps && (\n        <>\n          <StepScreenReaderOnly\n            id={screenReaderOnly.toggleSubstepsId}\n            aria-hidden\n          >\n            {screenReaderOnly.toggleSubstepsText}\n          </StepScreenReaderOnly>\n          <StepScreenReaderOnly id={screenReaderOnly.substepsId} aria-hidden>\n            {screenReaderOnly.substepsText}\n          </StepScreenReaderOnly>\n          <StepScreenReaderOnly id={screenReaderOnly.stateId} aria-hidden>\n            {screenReaderOnly.stateText}\n          </StepScreenReaderOnly>\n        </>\n      )}\n      <StepConnector />\n      <StepIcon\n        stage={stage}\n        status={status}\n        sizeMultiplier={iconSizeMultiplier}\n        aria-hidden\n      />\n      {label && (\n        <StepText id={labelId} purpose=\"label\" aria-hidden>\n          {label}\n        </StepText>\n      )}\n      {description && (\n        <StepText id={descriptionId} purpose=\"description\" aria-hidden>\n          {description}\n        </StepText>\n      )}\n      {hasNestedSteps && orientation === \"vertical\" && (\n        <StepExpandTrigger\n          id={expandTriggerId}\n          aria-expanded={expanded}\n          aria-controls={nestedStepperId}\n          aria-labelledby={[\n            labelId,\n            descriptionId,\n            screenReaderOnly.stateId,\n            screenReaderOnly.toggleSubstepsId,\n          ].join(\" \")}\n          expanded={expanded}\n          onClick={(event) => {\n            onToggle?.(event);\n            setExpanded(!expanded);\n          }}\n        />\n      )}\n      {hasNestedSteps && orientation === \"vertical\" && (\n        <Stepper\n          id={nestedStepperId}\n          aria-labelledby={[labelId, screenReaderOnly.substepsId].join(\" \")}\n          aria-hidden={!expanded}\n          hidden={!expanded}\n        >\n          {children}\n        </Stepper>\n      )}\n    </li>\n  );\n}\n"],"names":["makePrefixer","useId","useWindow","useContext","StepDepthContext","StepperOrientationContext","useControlled","useComponentCssInjection","stepCSS","useEffect","jsxs","jsx","StepScreenReaderOnly","Fragment","StepConnector","StepIcon","StepText","StepExpandTrigger","Stepper"],"mappings":"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"}

package/dist-cjs/stepper/Stepper.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = ".saltStepper {\n  grid-area: stepper;\n  width: 100%;\n  height: 100%;\n\n  margin: 0;\n  padding: 0;\n  list-style-type: none;\n  transition-duration: var(--salt-duration-perceptible);\n  transition-timing-function: ease-in-out;\n  transition-property: opacity, visibility;\n}\n\n@media (prefers-reduced-motion) {\n  .saltStepper {\n    transition-duration: var(--salt-duration-instant);\n  }\n}\n\n.saltStepper-horizontal {\n  display: flex;\n  flex-direction: row;\n}\n\n.saltStepper-vertical {\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n\n.saltStepper-vertical > .saltStep.saltStep-expanded > .saltStepper {\n  opacity: 1;\n  visibility: visible;\n}\n\n.saltStepper-vertical > .saltStep.saltStep-collapsed > .saltStepper {\n  opacity: 0;\n  visibility: hidden;\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=Stepper.css.js.map

package/dist-cjs/stepper/Stepper.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stepper.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist-cjs/stepper/Stepper.js

@@ -0,0 +1,40 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var clsx = require('clsx');
+var React = require('react');
+var makePrefixer = require('../utils/makePrefixer.js');
+require('../utils/useFloatingUI/useFloatingUI.js');
+require('../utils/useId.js');
+require('../salt-provider/SaltProvider.js');
+require('../viewport/ViewportProvider.js');
+var Stepper$1 = require('./Stepper.css.js');
+var StepperProvider = require('./internal/StepperProvider.js');
+
+const withBaseName = makePrefixer.makePrefixer("saltStepper");
+const Stepper = React.forwardRef(
+  function Stepper2({ orientation: orientationProp, children, className, ...props }, ref) {
+    const targetWindow = window.useWindow();
+    const orientationContext = React.useContext(StepperProvider.StepperOrientationContext);
+    const orientation = orientationProp || orientationContext;
+    styles.useComponentCssInjection({
+      testId: "salt-Stepper",
+      css: Stepper$1,
+      window: targetWindow
+    });
+    return /* @__PURE__ */ jsxRuntime.jsx(StepperProvider.StepperProvider, { orientation, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "ol",
+      {
+        className: clsx.clsx(withBaseName(), withBaseName(orientation), className),
+        ref,
+        ...props,
+        children
+      }
+    ) });
+  }
+);
+
+exports.Stepper = Stepper;
+//# sourceMappingURL=Stepper.js.map

package/dist-cjs/stepper/Stepper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stepper.js","sources":["../src/stepper/Stepper.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ComponentPropsWithoutRef, forwardRef, useContext } from \"react\";\nimport { makePrefixer } from \"../utils\";\nimport StepperCSS from \"./Stepper.css\";\nimport {\n  StepperOrientationContext,\n  StepperProvider,\n} from \"./internal/StepperProvider\";\n\nconst withBaseName = makePrefixer(\"saltStepper\");\n\nexport type StepperOrientation = \"horizontal\" | \"vertical\";\n\nexport interface StepperProps extends ComponentPropsWithoutRef<\"ol\"> {\n  /**\n   * The orientation of the stepper: defaults to horizontal.\n   */\n  orientation?: StepperOrientation;\n}\n\nexport const Stepper = forwardRef<HTMLOListElement, StepperProps>(\n  function Stepper(\n    { orientation: orientationProp, children, className, ...props },\n    ref,\n  ) {\n    const targetWindow = useWindow();\n    const orientationContext = useContext(StepperOrientationContext);\n    const orientation = orientationProp || orientationContext;\n\n    useComponentCssInjection({\n      testId: \"salt-Stepper\",\n      css: StepperCSS,\n      window: targetWindow,\n    });\n\n    return (\n      <StepperProvider orientation={orientation}>\n        <ol\n          className={clsx(withBaseName(), withBaseName(orientation), className)}\n          ref={ref}\n          {...props}\n        >\n          {children}\n        </ol>\n      </StepperProvider>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","Stepper","useWindow","useContext","StepperOrientationContext","useComponentCssInjection","StepperCSS","jsx","StepperProvider","clsx"],"mappings":";;;;;;;;;;;;;;;AAWA,MAAM,YAAA,GAAeA,0BAAa,aAAa,CAAA;AAWxC,MAAM,OAAU,GAAAC,gBAAA;AAAA,EACrB,SAASC,QACP,CAAA,EAAE,WAAa,EAAA,eAAA,EAAiB,UAAU,SAAW,EAAA,GAAG,KAAM,EAAA,EAC9D,GACA,EAAA;AACA,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAM,MAAA,kBAAA,GAAqBC,iBAAWC,yCAAyB,CAAA;AAC/D,IAAA,MAAM,cAAc,eAAmB,IAAA,kBAAA;AAEvC,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,cAAA;AAAA,MACR,GAAK,EAAAC,SAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IACE,uBAAAC,cAAA,CAACC,mCAAgB,WACf,EAAA,QAAA,kBAAAD,cAAA;AAAA,MAAC,IAAA;AAAA,MAAA;AAAA,QACC,WAAWE,SAAK,CAAA,YAAA,IAAgB,YAAa,CAAA,WAAW,GAAG,SAAS,CAAA;AAAA,QACpE,GAAA;AAAA,QACC,GAAG,KAAA;AAAA,QAEH;AAAA;AAAA,KAEL,EAAA,CAAA;AAAA;AAGN;;;;"}

package/dist-cjs/stepper/internal/StepConnector.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = ".saltStepConnector {\n  grid-area: connector;\n\n  transition-duration: inherit;\n  transition-timing-function: inherit;\n  transition-property: opacity, min-height;\n}\n\n.saltStepper-horizontal .saltStepConnector {\n  position: absolute;\n  transform: translateY(-100%);\n  top: calc(var(--step-icon-size) / 2);\n  left: calc(50% + calc(var(--step-icon-size) / 2 + var(--salt-spacing-100)));\n  right: calc(-50% + calc(var(--step-icon-size) / 2 + var(--salt-spacing-100)));\n\n  border-top-width: var(--salt-size-border-strong);\n  border-top-style: var(--salt-track-borderStyle-incomplete);\n  border-top-color: var(--salt-track-borderColor);\n}\n\n.saltStepper-horizontal .saltStep-stage-completed > .saltStepConnector,\n.saltStepper-horizontal .saltStep-stage-inprogress > .saltStepConnector {\n  border-top-style: var(--salt-track-borderStyle-complete);\n}\n\n.saltStepper-vertical .saltStepConnector {\n  min-height: var(--salt-size-base);\n  align-self: stretch;\n  justify-self: center;\n\n  border-left-width: var(--salt-size-border-strong);\n  border-left-style: var(--salt-track-borderStyle-incomplete);\n  border-left-color: var(--salt-track-borderColor);\n}\n\n.saltStepper-vertical .saltStep-stage-completed > .saltStepConnector,\n.saltStepper-vertical .saltStep-stage-inprogress > .saltStepConnector {\n  border-left-style: var(--salt-track-borderStyle-complete);\n}\n\n.saltStep-depth-0.saltStep:not(.saltStep-expanded):last-child > .saltStepConnector {\n  opacity: 0;\n  min-height: 0;\n}\n\n.saltStep-depth-0.saltStep-expanded:last-child .saltStep:not(.saltStep-expanded):last-child .saltStepConnector {\n  opacity: 0;\n  min-height: 0;\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=StepConnector.css.js.map

package/dist-cjs/stepper/internal/StepConnector.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepConnector.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist-cjs/stepper/internal/StepConnector.js

@@ -0,0 +1,27 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+require('react');
+var makePrefixer = require('../../utils/makePrefixer.js');
+require('clsx');
+require('../../utils/useFloatingUI/useFloatingUI.js');
+require('../../utils/useId.js');
+require('../../salt-provider/SaltProvider.js');
+require('../../viewport/ViewportProvider.js');
+var StepConnector$1 = require('./StepConnector.css.js');
+
+const withBaseName = makePrefixer.makePrefixer("saltStepConnector");
+function StepConnector() {
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "salt-step-connector",
+    css: StepConnector$1,
+    window: targetWindow
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-hidden": true, className: withBaseName() });
+}
+
+exports.StepConnector = StepConnector;
+//# sourceMappingURL=StepConnector.js.map

package/dist-cjs/stepper/internal/StepConnector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepConnector.js","sources":["../src/stepper/internal/StepConnector.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { makePrefixer } from \"../../utils\";\n\nimport stepConnectorCSS from \"./StepConnector.css\";\n\nconst withBaseName = makePrefixer(\"saltStepConnector\");\n\nexport function StepConnector() {\n  const targetWindow = useWindow();\n\n  useComponentCssInjection({\n    testId: \"salt-step-connector\",\n    css: stepConnectorCSS,\n    window: targetWindow,\n  });\n\n  return <div aria-hidden className={withBaseName()} />;\n}\n"],"names":["makePrefixer","useWindow","useComponentCssInjection","stepConnectorCSS"],"mappings":";;;;;;;;;;;;;;AAMA,MAAM,YAAA,GAAeA,0BAAa,mBAAmB,CAAA;AAE9C,SAAS,aAAgB,GAAA;AAC9B,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAE/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,qBAAA;AAAA,IACR,GAAK,EAAAC,eAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,sCAAQ,KAAI,EAAA,EAAA,aAAA,EAAW,IAAC,EAAA,SAAA,EAAW,cAAgB,EAAA,CAAA;AACrD;;;;"}

package/dist-cjs/stepper/internal/StepExpandTrigger.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = ".saltStepExpandTrigger {\n  grid-area: expand;\n}\n\n.saltButton.saltStepExpandTrigger:focus-visible {\n  outline-offset: calc(-1 * var(--salt-focused-outlineWidth));\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=StepExpandTrigger.css.js.map

package/dist-cjs/stepper/internal/StepExpandTrigger.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepExpandTrigger.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist-cjs/stepper/internal/StepExpandTrigger.js

@@ -0,0 +1,45 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var clsx = require('clsx');
+var Button = require('../../button/Button.js');
+require('react');
+var SemanticIconProvider = require('../../semantic-icon-provider/SemanticIconProvider.js');
+var makePrefixer = require('../../utils/makePrefixer.js');
+require('../../utils/useFloatingUI/useFloatingUI.js');
+require('../../utils/useId.js');
+require('../../salt-provider/SaltProvider.js');
+require('../../viewport/ViewportProvider.js');
+var StepExpandTrigger$1 = require('./StepExpandTrigger.css.js');
+
+const withBaseName = makePrefixer.makePrefixer("saltStepExpandTrigger");
+function StepExpandTrigger({
+  id,
+  expanded,
+  className,
+  ...props
+}) {
+  const { CollapseIcon, ExpandIcon } = SemanticIconProvider.useIcon();
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "salt-step-expand-trigger",
+    css: StepExpandTrigger$1,
+    window: targetWindow
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Button.Button,
+    {
+      id,
+      sentiment: "neutral",
+      appearance: "transparent",
+      className: clsx(withBaseName(), className),
+      ...props,
+      children: expanded ? /* @__PURE__ */ jsxRuntime.jsx(CollapseIcon, { "aria-hidden": true }) : /* @__PURE__ */ jsxRuntime.jsx(ExpandIcon, { "aria-hidden": true })
+    }
+  );
+}
+
+exports.StepExpandTrigger = StepExpandTrigger;
+//# sourceMappingURL=StepExpandTrigger.js.map

package/dist-cjs/stepper/internal/StepExpandTrigger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepExpandTrigger.js","sources":["../src/stepper/internal/StepExpandTrigger.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport clsx from \"clsx\";\nimport { Button, type ButtonProps } from \"../../button\";\nimport { useIcon } from \"../../semantic-icon-provider\";\nimport { makePrefixer } from \"../../utils\";\n\nimport stepExpandTriggerCSS from \"./StepExpandTrigger.css\";\n\nexport interface StepExpandTriggerProps extends ButtonProps {\n  expanded: boolean;\n}\n\nconst withBaseName = makePrefixer(\"saltStepExpandTrigger\");\n\nexport function StepExpandTrigger({\n  id,\n  expanded,\n  className,\n  ...props\n}: StepExpandTriggerProps) {\n  const { CollapseIcon, ExpandIcon } = useIcon();\n  const targetWindow = useWindow();\n\n  useComponentCssInjection({\n    testId: \"salt-step-expand-trigger\",\n    css: stepExpandTriggerCSS,\n    window: targetWindow,\n  });\n\n  return (\n    <Button\n      id={id}\n      sentiment=\"neutral\"\n      appearance=\"transparent\"\n      className={clsx(withBaseName(), className)}\n      {...props}\n    >\n      {expanded ? <CollapseIcon aria-hidden /> : <ExpandIcon aria-hidden />}\n    </Button>\n  );\n}\n"],"names":["makePrefixer","useIcon","useWindow","useComponentCssInjection","stepExpandTriggerCSS","jsx","Button"],"mappings":";;;;;;;;;;;;;;;;AAaA,MAAM,YAAA,GAAeA,0BAAa,uBAAuB,CAAA;AAElD,SAAS,iBAAkB,CAAA;AAAA,EAChC,EAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG;AACL,CAA2B,EAAA;AACzB,EAAA,MAAM,EAAE,YAAA,EAAc,UAAW,EAAA,GAAIC,4BAAQ,EAAA;AAC7C,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAE/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,0BAAA;AAAA,IACR,GAAK,EAAAC,mBAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EACE,uBAAAC,cAAA;AAAA,IAACC,aAAA;AAAA,IAAA;AAAA,MACC,EAAA;AAAA,MACA,SAAU,EAAA,SAAA;AAAA,MACV,UAAW,EAAA,aAAA;AAAA,MACX,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACxC,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA,QAAA,kCAAY,YAAa,EAAA,EAAA,aAAA,EAAW,MAAC,CAAK,mBAAAD,cAAA,CAAC,UAAW,EAAA,EAAA,aAAA,EAAW,IAAC,EAAA;AAAA;AAAA,GACrE;AAEJ;;;;"}

package/dist-cjs/stepper/internal/StepIcon.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = ".saltStepIcon {\n  grid-area: icon;\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  justify-self: center;\n}\n\n.saltStepper-vertical .saltStepIcon {\n  height: var(--salt-size-base);\n}\n\n.saltStep-stage-pending > .saltStepIcon {\n  --saltIcon-color: var(--salt-status-static-foreground);\n}\n\n.saltStep-stage-locked > .saltStepIcon {\n  --saltIcon-color: var(--salt-status-static-foreground);\n}\n\n.saltStep-stage-inprogress > .saltStepIcon {\n  --saltIcon-color: var(--salt-status-info-foreground-decorative);\n}\n\n.saltStep-stage-active > .saltStepIcon {\n  --saltIcon-color: var(--salt-status-info-foreground-decorative);\n}\n\n.saltStep-stage-completed > .saltStepIcon {\n  --saltIcon-color: var(--salt-status-success-foreground-decorative);\n}\n\n.saltStep-status-warning > .saltStepIcon {\n  --saltIcon-color: var(--salt-status-warning-foreground-decorative);\n}\n\n.saltStep-status-error > .saltStepIcon {\n  --saltIcon-color: var(--salt-status-error-foreground-decorative);\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=StepIcon.css.js.map

package/dist-cjs/stepper/internal/StepIcon.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepIcon.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist-cjs/stepper/internal/StepIcon.js

@@ -0,0 +1,62 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var clsx = require('clsx');
+var React = require('react');
+var SemanticIconProvider = require('../../semantic-icon-provider/SemanticIconProvider.js');
+var makePrefixer = require('../../utils/makePrefixer.js');
+require('../../utils/useFloatingUI/useFloatingUI.js');
+require('../../utils/useId.js');
+require('../../salt-provider/SaltProvider.js');
+require('../../viewport/ViewportProvider.js');
+var StepIcon$1 = require('./StepIcon.css.js');
+
+const withBaseName = makePrefixer.makePrefixer("saltStepIcon");
+function StepIcon({
+  status,
+  stage,
+  size,
+  sizeMultiplier = size || 1.5,
+  className,
+  ...props
+}) {
+  const targetWindow = window.useWindow();
+  const IconComponent = useStepIcon({ stage, status });
+  styles.useComponentCssInjection({
+    testId: "salt-step-icon",
+    css: StepIcon$1,
+    window: targetWindow
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    IconComponent,
+    {
+      size: sizeMultiplier,
+      className: clsx(withBaseName(), className),
+      ...props
+    }
+  );
+}
+function useStepIcon({
+  stage,
+  status
+}) {
+  const icons = SemanticIconProvider.useIcon();
+  const stateToIcon = React.useMemo(
+    () => ({
+      error: icons.ErrorIcon,
+      warning: icons.WarningIcon,
+      active: icons.ActiveIcon,
+      completed: icons.CompletedIcon,
+      pending: icons.PendingIcon,
+      inprogress: icons.InProgressIcon,
+      locked: icons.LockedIcon
+    }),
+    [icons]
+  );
+  return stateToIcon[status || stage];
+}
+
+exports.StepIcon = StepIcon;
+//# sourceMappingURL=StepIcon.js.map

package/dist-cjs/stepper/internal/StepIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepIcon.js","sources":["../src/stepper/internal/StepIcon.tsx"],"sourcesContent":["import type { IconProps } from \"@salt-ds/icons\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport clsx from \"clsx\";\nimport { useMemo } from \"react\";\nimport { useIcon } from \"../../semantic-icon-provider\";\nimport { makePrefixer } from \"../../utils\";\n\nimport stepIconCSS from \"./StepIcon.css\";\n\nimport type { StepStage, StepStatus } from \"../Step\";\n\nexport interface StepIconProps extends IconProps {\n  stage: StepStage;\n  status?: StepStatus;\n  sizeMultiplier?: IconProps[\"size\"];\n}\n\nconst withBaseName = makePrefixer(\"saltStepIcon\");\n\nexport function StepIcon({\n  status,\n  stage,\n  size,\n  sizeMultiplier = size || 1.5,\n  className,\n  ...props\n}: StepIconProps) {\n  const targetWindow = useWindow();\n  const IconComponent = useStepIcon({ stage, status });\n\n  useComponentCssInjection({\n    testId: \"salt-step-icon\",\n    css: stepIconCSS,\n    window: targetWindow,\n  });\n\n  return (\n    <IconComponent\n      size={sizeMultiplier}\n      className={clsx(withBaseName(), className)}\n      {...props}\n    />\n  );\n}\n\nfunction useStepIcon({\n  stage,\n  status,\n}: Pick<StepIconProps, \"stage\" | \"status\">) {\n  const icons = useIcon();\n\n  const stateToIcon = useMemo(\n    () => ({\n      error: icons.ErrorIcon,\n      warning: icons.WarningIcon,\n      active: icons.ActiveIcon,\n      completed: icons.CompletedIcon,\n      pending: icons.PendingIcon,\n      inprogress: icons.InProgressIcon,\n      locked: icons.LockedIcon,\n    }),\n    [icons],\n  );\n\n  return stateToIcon[status || stage];\n}\n"],"names":["makePrefixer","useWindow","useComponentCssInjection","stepIconCSS","jsx","useIcon","useMemo"],"mappings":";;;;;;;;;;;;;;;AAkBA,MAAM,YAAA,GAAeA,0BAAa,cAAc,CAAA;AAEzC,SAAS,QAAS,CAAA;AAAA,EACvB,MAAA;AAAA,EACA,KAAA;AAAA,EACA,IAAA;AAAA,EACA,iBAAiB,IAAQ,IAAA,GAAA;AAAA,EACzB,SAAA;AAAA,EACA,GAAG;AACL,CAAkB,EAAA;AAChB,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAA,MAAM,aAAgB,GAAA,WAAA,CAAY,EAAE,KAAA,EAAO,QAAQ,CAAA;AAEnD,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,gBAAA;AAAA,IACR,GAAK,EAAAC,UAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EACE,uBAAAC,cAAA;AAAA,IAAC,aAAA;AAAA,IAAA;AAAA,MACC,IAAM,EAAA,cAAA;AAAA,MACN,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACxC,GAAG;AAAA;AAAA,GACN;AAEJ;AAEA,SAAS,WAAY,CAAA;AAAA,EACnB,KAAA;AAAA,EACA;AACF,CAA4C,EAAA;AAC1C,EAAA,MAAM,QAAQC,4BAAQ,EAAA;AAEtB,EAAA,MAAM,WAAc,GAAAC,aAAA;AAAA,IAClB,OAAO;AAAA,MACL,OAAO,KAAM,CAAA,SAAA;AAAA,MACb,SAAS,KAAM,CAAA,WAAA;AAAA,MACf,QAAQ,KAAM,CAAA,UAAA;AAAA,MACd,WAAW,KAAM,CAAA,aAAA;AAAA,MACjB,SAAS,KAAM,CAAA,WAAA;AAAA,MACf,YAAY,KAAM,CAAA,cAAA;AAAA,MAClB,QAAQ,KAAM,CAAA;AAAA,KAChB,CAAA;AAAA,IACA,CAAC,KAAK;AAAA,GACR;AAEA,EAAO,OAAA,WAAA,CAAY,UAAU,KAAK,CAAA;AACpC;;;;"}

package/dist-cjs/stepper/internal/StepScreenReaderOnly.js

@@ -0,0 +1,13 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+
+function StepScreenReaderOnly({
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "salt-visuallyHidden", ...props, children });
+}
+
+exports.StepScreenReaderOnly = StepScreenReaderOnly;
+//# sourceMappingURL=StepScreenReaderOnly.js.map

package/dist-cjs/stepper/internal/StepScreenReaderOnly.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepScreenReaderOnly.js","sources":["../src/stepper/internal/StepScreenReaderOnly.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, ReactNode } from \"react\";\n\nexport interface StepScreenReaderOnlyProps\n  extends ComponentPropsWithoutRef<\"div\"> {\n  children?: ReactNode;\n}\n\nexport function StepScreenReaderOnly({\n  children,\n  ...props\n}: StepScreenReaderOnlyProps) {\n  return (\n    <div className=\"salt-visuallyHidden\" {...props}>\n      {children}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;AAOO,SAAS,oBAAqB,CAAA;AAAA,EACnC,QAAA;AAAA,EACA,GAAG;AACL,CAA8B,EAAA;AAC5B,EAAA,sCACG,KAAI,EAAA,EAAA,SAAA,EAAU,qBAAuB,EAAA,GAAG,OACtC,QACH,EAAA,CAAA;AAEJ;;;;"}

package/dist-cjs/stepper/internal/StepText.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = ".saltStepText-label {\n  grid-area: label;\n}\n\n.saltStepper-horizontal .saltStepText-label {\n  margin-top: var(--salt-spacing-50);\n}\n\n.saltStepper-vertical .saltStepText-label {\n  padding-top: calc((var(--salt-size-base) - var(--salt-text-label-lineHeight)) / 2);\n  padding-bottom: calc((var(--salt-size-base) - var(--salt-text-label-lineHeight)) / 2);\n  padding-left: calc((var(--step-depth)) * var(--salt-spacing-100));\n}\n\n.saltStep-depth-0 > .saltText.saltStepText-label {\n  font-weight: var(--salt-text-fontWeight-strong);\n}\n\n.saltStep-depth-0 > .saltText.saltStepText-label {\n  font-weight: var(--salt-text-fontWeight-strong);\n}\n\n.saltStepText-description {\n  grid-area: description;\n}\n\n.saltStepper-vertical .saltStepText-description {\n  padding-bottom: var(--salt-spacing-300);\n  padding-left: calc((var(--step-depth)) * var(--salt-spacing-100));\n}\n\n.saltStep-status-warning > .saltStepText-description {\n  color: var(--salt-status-warning-foreground-informative);\n}\n\n.saltStep-status-error > .saltStepText-description {\n  color: var(--salt-status-error-foreground-informative);\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=StepText.css.js.map

package/dist-cjs/stepper/internal/StepText.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepText.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist-cjs/stepper/internal/StepText.js

@@ -0,0 +1,50 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var clsx = require('clsx');
+var Text = require('../../text/Text.js');
+require('../../text/Code.js');
+require('../../text/Display.js');
+require('../../text/Headings.js');
+require('../../text/Label.js');
+require('../../text/TextAction.js');
+require('../../text/TextNotation.js');
+require('react');
+var makePrefixer = require('../../utils/makePrefixer.js');
+require('../../utils/useFloatingUI/useFloatingUI.js');
+require('../../utils/useId.js');
+require('../../salt-provider/SaltProvider.js');
+require('../../viewport/ViewportProvider.js');
+var StepText$1 = require('./StepText.css.js');
+
+const withBaseName = makePrefixer.makePrefixer("saltStepText");
+function StepText({
+  id,
+  purpose,
+  className,
+  styleAs = "label",
+  children,
+  ...props
+}) {
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "salt-step-text",
+    css: StepText$1,
+    window: targetWindow
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Text.Text,
+    {
+      id,
+      styleAs: "label",
+      className: clsx(withBaseName(), withBaseName(purpose), className),
+      ...props,
+      children
+    }
+  );
+}
+
+exports.StepText = StepText;
+//# sourceMappingURL=StepText.js.map

package/dist-cjs/stepper/internal/StepText.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepText.js","sources":["../src/stepper/internal/StepText.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport clsx from \"clsx\";\n\nimport { Text, type TextProps } from \"../../text\";\nimport { makePrefixer } from \"../../utils\";\nimport stepTextCSS from \"./StepText.css\";\n\nexport interface StepTextProps extends TextProps<\"div\"> {\n  purpose: \"label\" | \"description\";\n}\n\nconst withBaseName = makePrefixer(\"saltStepText\");\n\nexport function StepText({\n  id,\n  purpose,\n  className,\n  styleAs = \"label\",\n  children,\n  ...props\n}: StepTextProps) {\n  const targetWindow = useWindow();\n\n  useComponentCssInjection({\n    testId: \"salt-step-text\",\n    css: stepTextCSS,\n    window: targetWindow,\n  });\n\n  return (\n    <Text\n      id={id}\n      styleAs=\"label\"\n      className={clsx(withBaseName(), withBaseName(purpose), className)}\n      {...props}\n    >\n      {children}\n    </Text>\n  );\n}\n"],"names":["makePrefixer","useWindow","useComponentCssInjection","stepTextCSS","jsx","Text"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAYA,MAAM,YAAA,GAAeA,0BAAa,cAAc,CAAA;AAEzC,SAAS,QAAS,CAAA;AAAA,EACvB,EAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA;AAAA,EACA,OAAU,GAAA,OAAA;AAAA,EACV,QAAA;AAAA,EACA,GAAG;AACL,CAAkB,EAAA;AAChB,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAE/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,gBAAA;AAAA,IACR,GAAK,EAAAC,UAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EACE,uBAAAC,cAAA;AAAA,IAACC,SAAA;AAAA,IAAA;AAAA,MACC,EAAA;AAAA,MACA,OAAQ,EAAA,OAAA;AAAA,MACR,WAAW,IAAK,CAAA,YAAA,IAAgB,YAAa,CAAA,OAAO,GAAG,SAAS,CAAA;AAAA,MAC/D,GAAG,KAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ;;;;"}

package/dist-cjs/stepper/internal/StepperProvider.js

@@ -0,0 +1,19 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+
+const StepperOrientationContext = React.createContext("horizontal");
+const StepDepthContext = React.createContext(-1);
+function StepperProvider({
+  orientation: orientationProp,
+  children
+}) {
+  const depth = React.useContext(StepDepthContext);
+  return /* @__PURE__ */ jsxRuntime.jsx(StepperOrientationContext.Provider, { value: orientationProp, children: /* @__PURE__ */ jsxRuntime.jsx(StepDepthContext.Provider, { value: depth + 1, children }) });
+}
+
+exports.StepDepthContext = StepDepthContext;
+exports.StepperOrientationContext = StepperOrientationContext;
+exports.StepperProvider = StepperProvider;
+//# sourceMappingURL=StepperProvider.js.map

package/dist-cjs/stepper/internal/StepperProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepperProvider.js","sources":["../src/stepper/internal/StepperProvider.tsx"],"sourcesContent":["import { type ReactNode, createContext, useContext } from \"react\";\n\nimport type { StepDepth } from \"../Step\";\nimport type { StepperOrientation } from \"../Stepper\";\n\nexport const StepperOrientationContext =\n  createContext<StepperOrientation>(\"horizontal\");\nexport const StepDepthContext = createContext<StepDepth>(-1);\n\nexport interface StepperProviderProps {\n  orientation: StepperOrientation;\n  children: ReactNode;\n}\n\nexport function StepperProvider({\n  orientation: orientationProp,\n  children,\n}: StepperProviderProps) {\n  const depth = useContext(StepDepthContext);\n\n  return (\n    <StepperOrientationContext.Provider value={orientationProp}>\n      <StepDepthContext.Provider value={depth + 1}>\n        {children}\n      </StepDepthContext.Provider>\n    </StepperOrientationContext.Provider>\n  );\n}\n"],"names":["createContext","useContext","jsx"],"mappings":";;;;;AAKa,MAAA,yBAAA,GACXA,oBAAkC,YAAY;AACnC,MAAA,gBAAA,GAAmBA,oBAAyB,CAAE,CAAA;AAOpD,SAAS,eAAgB,CAAA;AAAA,EAC9B,WAAa,EAAA,eAAA;AAAA,EACb;AACF,CAAyB,EAAA;AACvB,EAAM,MAAA,KAAA,GAAQC,iBAAW,gBAAgB,CAAA;AAEzC,EAAA,uBACGC,cAAA,CAAA,yBAAA,CAA0B,QAA1B,EAAA,EAAmC,OAAO,eACzC,EAAA,QAAA,kBAAAA,cAAA,CAAC,gBAAiB,CAAA,QAAA,EAAjB,EAA0B,KAAA,EAAO,KAAQ,GAAA,CAAA,EACvC,UACH,CACF,EAAA,CAAA;AAEJ;;;;;;"}