silver-ui 0.1.0

package/dist/chunk-YOWRLFMF.cjs

@@ -0,0 +1,128 @@
+'use strict';
+
+var chunkJAX62FUE_cjs = require('./chunk-JAX62FUE.cjs');
+var chunkSPDVNY2Z_cjs = require('./chunk-SPDVNY2Z.cjs');
+var chunkAZDWQGAX_cjs = require('./chunk-AZDWQGAX.cjs');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/Divider/Divider.recipe.ts
+var dividerRecipe = chunkJAX62FUE_cjs.cva({
+  base: {
+    color: "fg.muted"
+  },
+  variants: {
+    orientation: {
+      horizontal: {
+        display: "flex",
+        alignItems: "center",
+        w: "100%"
+      },
+      vertical: {
+        display: "inline-flex",
+        flexDirection: "column",
+        alignItems: "center",
+        h: "100%"
+      }
+    },
+    variant: {
+      subtle: {},
+      strong: {}
+    }
+  },
+  defaultVariants: {
+    orientation: "horizontal",
+    variant: "subtle"
+  }
+});
+var styles = {
+  line: chunkAZDWQGAX_cjs.css({
+    bg: "border"
+  }),
+  lineStrong: chunkAZDWQGAX_cjs.css({
+    bg: "border.emphasized"
+  }),
+  horizontalLine: chunkAZDWQGAX_cjs.css({
+    h: "1px",
+    flex: 1
+  }),
+  verticalLine: chunkAZDWQGAX_cjs.css({
+    w: "1px",
+    flex: 1
+  }),
+  label: chunkAZDWQGAX_cjs.css({
+    flexShrink: 0,
+    px: "3",
+    fontFamily: "body",
+    fontSize: "sm",
+    color: "fg.muted"
+  }),
+  verticalLabel: chunkAZDWQGAX_cjs.css({
+    px: 0,
+    py: "3"
+  }),
+  fullBleedHorizontal: chunkAZDWQGAX_cjs.css({
+    mx: "calc(-1 * var(--card-padding, 0px))",
+    w: "calc(100% + var(--card-padding, 0px) * 2)"
+  }),
+  fullBleedVertical: chunkAZDWQGAX_cjs.css({
+    my: "calc(-1 * var(--card-padding, 0px))",
+    h: "calc(100% + var(--card-padding, 0px) * 2)"
+  })
+};
+function Divider({
+  "aria-label": ariaLabel,
+  className,
+  "data-testid": dataTestId,
+  isFullBleed = false,
+  label,
+  orientation = "horizontal",
+  ref,
+  style,
+  variant = "subtle"
+}) {
+  const isHorizontal = orientation === "horizontal";
+  const labelId = react.useId();
+  const lineClassName = chunkSPDVNY2Z_cjs.cx(
+    styles.line,
+    variant === "strong" && styles.lineStrong,
+    isHorizontal ? styles.horizontalLine : styles.verticalLine
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "aria-label": ariaLabel,
+      "aria-labelledby": label != null && ariaLabel == null ? labelId : void 0,
+      "aria-orientation": orientation,
+      className: chunkSPDVNY2Z_cjs.cx(
+        dividerRecipe({ orientation, variant }),
+        isFullBleed && (isHorizontal ? styles.fullBleedHorizontal : styles.fullBleedVertical),
+        className
+      ),
+      "data-testid": dataTestId,
+      ref,
+      role: "separator",
+      style,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: lineClassName }),
+        label != null ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: chunkSPDVNY2Z_cjs.cx(styles.label, !isHorizontal && styles.verticalLabel),
+              id: labelId,
+              children: label
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: lineClassName })
+        ] }) : null
+      ]
+    }
+  );
+}
+Divider.displayName = "Divider";
+
+exports.Divider = Divider;
+exports.dividerRecipe = dividerRecipe;
+//# sourceMappingURL=chunk-YOWRLFMF.cjs.map
+//# sourceMappingURL=chunk-YOWRLFMF.cjs.map

package/dist/chunk-YOWRLFMF.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Divider/Divider.recipe.ts","../src/components/Divider/Divider.tsx"],"names":["cva","css","useId","cx","jsxs","jsx","Fragment"],"mappings":";;;;;;;;;AAEO,IAAM,gBAAgBA,qBAAA,CAAI;AAAA,EAC/B,IAAA,EAAM;AAAA,IACJ,KAAA,EAAO;AAAA,GACT;AAAA,EACA,QAAA,EAAU;AAAA,IACR,WAAA,EAAa;AAAA,MACX,UAAA,EAAY;AAAA,QACV,OAAA,EAAS,MAAA;AAAA,QACT,UAAA,EAAY,QAAA;AAAA,QACZ,CAAA,EAAG;AAAA,OACL;AAAA,MACA,QAAA,EAAU;AAAA,QACR,OAAA,EAAS,aAAA;AAAA,QACT,aAAA,EAAe,QAAA;AAAA,QACf,UAAA,EAAY,QAAA;AAAA,QACZ,CAAA,EAAG;AAAA;AACL,KACF;AAAA,IACA,OAAA,EAAS;AAAA,MACP,QAAQ,EAAC;AAAA,MACT,QAAQ;AAAC;AACX,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,WAAA,EAAa,YAAA;AAAA,IACb,OAAA,EAAS;AAAA;AAEb,CAAC;ACsBD,IAAM,MAAA,GAAS;AAAA,EACb,MAAMC,qBAAA,CAAI;AAAA,IACR,EAAA,EAAI;AAAA,GACL,CAAA;AAAA,EACD,YAAYA,qBAAA,CAAI;AAAA,IACd,EAAA,EAAI;AAAA,GACL,CAAA;AAAA,EACD,gBAAgBA,qBAAA,CAAI;AAAA,IAClB,CAAA,EAAG,KAAA;AAAA,IACH,IAAA,EAAM;AAAA,GACP,CAAA;AAAA,EACD,cAAcA,qBAAA,CAAI;AAAA,IAChB,CAAA,EAAG,KAAA;AAAA,IACH,IAAA,EAAM;AAAA,GACP,CAAA;AAAA,EACD,OAAOA,qBAAA,CAAI;AAAA,IACT,UAAA,EAAY,CAAA;AAAA,IACZ,EAAA,EAAI,GAAA;AAAA,IACJ,UAAA,EAAY,MAAA;AAAA,IACZ,QAAA,EAAU,IAAA;AAAA,IACV,KAAA,EAAO;AAAA,GACR,CAAA;AAAA,EACD,eAAeA,qBAAA,CAAI;AAAA,IACjB,EAAA,EAAI,CAAA;AAAA,IACJ,EAAA,EAAI;AAAA,GACL,CAAA;AAAA,EACD,qBAAqBA,qBAAA,CAAI;AAAA,IACvB,EAAA,EAAI,qCAAA;AAAA,IACJ,CAAA,EAAG;AAAA,GACJ,CAAA;AAAA,EACD,mBAAmBA,qBAAA,CAAI;AAAA,IACrB,EAAA,EAAI,qCAAA;AAAA,IACJ,CAAA,EAAG;AAAA,GACJ;AACH,CAAA;AAEO,SAAS,OAAA,CAAQ;AAAA,EACtB,YAAA,EAAc,SAAA;AAAA,EACd,SAAA;AAAA,EACA,aAAA,EAAe,UAAA;AAAA,EACf,WAAA,GAAc,KAAA;AAAA,EACd,KAAA;AAAA,EACA,WAAA,GAAc,YAAA;AAAA,EACd,GAAA;AAAA,EACA,KAAA;AAAA,EACA,OAAA,GAAU;AACZ,CAAA,EAAoC;AAClC,EAAA,MAAM,eAAe,WAAA,KAAgB,YAAA;AACrC,EAAA,MAAM,UAAUC,WAAA,EAAM;AACtB,EAAA,MAAM,aAAA,GAAgBC,oBAAA;AAAA,IACpB,MAAA,CAAO,IAAA;AAAA,IACP,OAAA,KAAY,YAAY,MAAA,CAAO,UAAA;AAAA,IAC/B,YAAA,GAAe,MAAA,CAAO,cAAA,GAAiB,MAAA,CAAO;AAAA,GAChD;AAEA,EAAA,uBACEC,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,YAAA,EAAY,SAAA;AAAA,MACZ,iBAAA,EAAiB,KAAA,IAAS,IAAA,IAAQ,SAAA,IAAa,OAAO,OAAA,GAAU,MAAA;AAAA,MAChE,kBAAA,EAAkB,WAAA;AAAA,MAClB,SAAA,EAAWD,oBAAA;AAAA,QACT,aAAA,CAAc,EAAC,WAAA,EAAa,OAAA,EAAQ,CAAA;AAAA,QACpC,WAAA,KACG,YAAA,GACG,MAAA,CAAO,mBAAA,GACP,MAAA,CAAO,iBAAA,CAAA;AAAA,QACb;AAAA,OACF;AAAA,MACA,aAAA,EAAa,UAAA;AAAA,MACb,GAAA;AAAA,MACA,IAAA,EAAK,WAAA;AAAA,MACL,KAAA;AAAA,MACA,QAAA,EAAA;AAAA,wBAAAE,cAAA,CAAC,KAAA,EAAA,EAAI,WAAW,aAAA,EAAe,CAAA;AAAA,QAC9B,KAAA,IAAS,uBACRD,eAAA,CAAAE,mBAAA,EAAA,EACE,QAAA,EAAA;AAAA,0BAAAD,cAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,WAAWF,oBAAA,CAAG,MAAA,CAAO,OAAO,CAAC,YAAA,IAAgB,OAAO,aAAa,CAAA;AAAA,cACjE,EAAA,EAAI,OAAA;AAAA,cACH,QAAA,EAAA;AAAA;AAAA,WACH;AAAA,0BACAE,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,aAAA,EAAe;AAAA,SAAA,EACjC,CAAA,GACE;AAAA;AAAA;AAAA,GACN;AAEJ;AAEA,OAAA,CAAQ,WAAA,GAAc,SAAA","file":"chunk-YOWRLFMF.cjs","sourcesContent":["import {cva, type RecipeVariantProps} from 'styled-system/css';\n\nexport const dividerRecipe = cva({\n  base: {\n    color: 'fg.muted',\n  },\n  variants: {\n    orientation: {\n      horizontal: {\n        display: 'flex',\n        alignItems: 'center',\n        w: '100%',\n      },\n      vertical: {\n        display: 'inline-flex',\n        flexDirection: 'column',\n        alignItems: 'center',\n        h: '100%',\n      },\n    },\n    variant: {\n      subtle: {},\n      strong: {},\n    },\n  },\n  defaultVariants: {\n    orientation: 'horizontal',\n    variant: 'subtle',\n  },\n});\n\nexport type DividerVariants = RecipeVariantProps<typeof dividerRecipe>;\n","import {useId, type CSSProperties, type ReactNode, type Ref} from 'react';\nimport {css} from 'styled-system/css';\nimport {cx} from '../../internal/cx';\nimport {dividerRecipe} from './Divider.recipe';\n\nexport type DividerOrientation = 'horizontal' | 'vertical';\nexport type DividerVariant = 'subtle' | 'strong';\n\n/**\n * Visual separator for grouping content.\n */\nexport interface DividerProps {\n  /**\n   * Accessible label for the separator. Use when the divider conveys\n   * meaning beyond a visual break (e.g., separating named sections).\n   */\n  'aria-label'?: string;\n  /**\n   * Additional CSS class names applied to the root element.\n   */\n  className?: string;\n  /**\n   * Test ID applied to the root element.\n   */\n  'data-testid'?: string;\n  /**\n   * Whether the divider should escape container padding.\n   */\n  isFullBleed?: boolean;\n  /**\n   * Optional label rendered in the divider.\n   */\n  label?: ReactNode;\n  /**\n   * Divider orientation. Default is `horizontal`.\n   */\n  orientation?: DividerOrientation;\n  /**\n   * Ref forwarded to the root element.\n   */\n  ref?: Ref<HTMLDivElement>;\n  /**\n   * Inline styles applied to the root element.\n   */\n  style?: CSSProperties;\n  /**\n   * Visual weight of the divider. Default is `subtle`.\n   */\n  variant?: DividerVariant;\n}\n\nconst styles = {\n  line: css({\n    bg: 'border',\n  }),\n  lineStrong: css({\n    bg: 'border.emphasized',\n  }),\n  horizontalLine: css({\n    h: '1px',\n    flex: 1,\n  }),\n  verticalLine: css({\n    w: '1px',\n    flex: 1,\n  }),\n  label: css({\n    flexShrink: 0,\n    px: '3',\n    fontFamily: 'body',\n    fontSize: 'sm',\n    color: 'fg.muted',\n  }),\n  verticalLabel: css({\n    px: 0,\n    py: '3',\n  }),\n  fullBleedHorizontal: css({\n    mx: 'calc(-1 * var(--card-padding, 0px))',\n    w: 'calc(100% + var(--card-padding, 0px) * 2)',\n  }),\n  fullBleedVertical: css({\n    my: 'calc(-1 * var(--card-padding, 0px))',\n    h: 'calc(100% + var(--card-padding, 0px) * 2)',\n  }),\n};\n\nexport function Divider({\n  'aria-label': ariaLabel,\n  className,\n  'data-testid': dataTestId,\n  isFullBleed = false,\n  label,\n  orientation = 'horizontal',\n  ref,\n  style,\n  variant = 'subtle',\n}: DividerProps): React.JSX.Element {\n  const isHorizontal = orientation === 'horizontal';\n  const labelId = useId();\n  const lineClassName = cx(\n    styles.line,\n    variant === 'strong' && styles.lineStrong,\n    isHorizontal ? styles.horizontalLine : styles.verticalLine,\n  );\n\n  return (\n    <div\n      aria-label={ariaLabel}\n      aria-labelledby={label != null && ariaLabel == null ? labelId : undefined}\n      aria-orientation={orientation}\n      className={cx(\n        dividerRecipe({orientation, variant}),\n        isFullBleed &&\n          (isHorizontal\n            ? styles.fullBleedHorizontal\n            : styles.fullBleedVertical),\n        className,\n      )}\n      data-testid={dataTestId}\n      ref={ref}\n      role=\"separator\"\n      style={style}>\n      <div className={lineClassName} />\n      {label != null ? (\n        <>\n          <div\n            className={cx(styles.label, !isHorizontal && styles.verticalLabel)}\n            id={labelId}>\n            {label}\n          </div>\n          <div className={lineClassName} />\n        </>\n      ) : null}\n    </div>\n  );\n}\n\nDivider.displayName = 'Divider';\n"]}

package/dist/chunk-YQJJCYJP.js

@@ -0,0 +1,449 @@
+import { Text } from './chunk-PZO5MZ46.js';
+import { Icon } from './chunk-4W7L63LH.js';
+import { cva } from './chunk-NAELQLZN.js';
+import { cx } from './chunk-PPNETWIP.js';
+import { css } from './chunk-UHQRL4OA.js';
+import { Check, TriangleAlert } from 'lucide-react';
+import { createContext, use, useMemo } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/components/Stepper/Step.recipe.ts
+var stepIndicatorRecipe = cva({
+  base: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    w: "7",
+    h: "7",
+    borderRadius: "full",
+    fontFamily: "body",
+    fontSize: "sm",
+    fontWeight: "semibold",
+    lineHeight: "none",
+    transitionProperty: "background-color, color, border-color, opacity",
+    transitionDuration: "fast",
+    transitionTimingFunction: "default",
+    flexShrink: 0,
+    userSelect: "none",
+    borderWidth: "emphasized",
+    borderStyle: "solid"
+  },
+  variants: {
+    state: {
+      active: {
+        bg: "primary",
+        borderColor: "primary",
+        color: "fg.onPrimary"
+      },
+      completed: {
+        bg: "primary",
+        borderColor: "primary",
+        color: "fg.onPrimary"
+      },
+      upcoming: {
+        bg: "transparent",
+        borderColor: "border.emphasized",
+        color: "fg.muted"
+      },
+      disabled: {
+        bg: "transparent",
+        borderColor: "border",
+        color: "fg.disabled"
+      },
+      error: {
+        bg: "status.error.solid",
+        borderColor: "status.error.solid",
+        color: "status.error.solidFg"
+      }
+    },
+    isClickable: {
+      true: {
+        cursor: "pointer",
+        _hover: {
+          opacity: 0.85
+        },
+        _focusVisible: {
+          outlineWidth: "focus",
+          outlineStyle: "solid",
+          outlineColor: "primary",
+          outlineOffset: "focusOffset"
+        }
+      },
+      false: {}
+    }
+  },
+  defaultVariants: {
+    state: "upcoming",
+    isClickable: false
+  }
+});
+var stepLabelRecipe = cva({
+  base: {
+    textAlign: "center"
+  },
+  variants: {
+    state: {
+      active: {
+        color: "fg",
+        fontWeight: "semibold"
+      },
+      completed: {
+        color: "fg"
+      },
+      upcoming: {
+        color: "fg.muted"
+      },
+      disabled: {
+        color: "fg.disabled"
+      },
+      error: {
+        color: "status.error.fg"
+      }
+    },
+    orientation: {
+      horizontal: {},
+      vertical: {
+        textAlign: "start"
+      }
+    }
+  },
+  defaultVariants: {
+    state: "upcoming",
+    orientation: "horizontal"
+  }
+});
+var stepConnectorRecipe = cva({
+  base: {
+    borderRadius: "full",
+    transitionProperty: "background-color",
+    transitionDuration: "fast",
+    transitionTimingFunction: "default"
+  },
+  variants: {
+    isCompleted: {
+      true: {
+        bg: "primary"
+      },
+      false: {
+        bg: "track.emphasized"
+      }
+    },
+    orientation: {
+      horizontal: {
+        h: "0.5",
+        w: "full"
+      },
+      vertical: {
+        w: "0.5",
+        h: "full"
+      }
+    }
+  },
+  defaultVariants: {
+    isCompleted: false,
+    orientation: "horizontal"
+  }
+});
+var StepperContext = createContext(null);
+StepperContext.displayName = "StepperContext";
+function useStepperContext() {
+  const context = use(StepperContext);
+  if (context == null) {
+    throw new Error("Step must be used within a Stepper.");
+  }
+  return context;
+}
+var styles = {
+  horizontalRoot: css({
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "flex-start",
+    flex: 1,
+    position: "relative",
+    _last: {
+      flex: "none"
+    },
+    "&:last-child [data-step-connector]": {
+      display: "none"
+    }
+  }),
+  horizontalContent: css({
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    position: "relative",
+    zIndex: 1
+  }),
+  horizontalConnector: css({
+    flex: 1,
+    display: "flex",
+    alignItems: "center",
+    px: "2",
+    minW: "6",
+    h: "7"
+  }),
+  verticalRoot: css({
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "stretch",
+    position: "relative",
+    minH: "12",
+    "&:last-child [data-step-connector]": {
+      display: "none"
+    }
+  }),
+  verticalIndicatorColumn: css({
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    w: "7",
+    flexShrink: 0
+  }),
+  verticalConnector: css({
+    flex: 1,
+    display: "flex",
+    justifyContent: "center",
+    py: "1"
+  }),
+  verticalContent: css({
+    display: "flex",
+    flexDirection: "column",
+    ps: "3",
+    pb: "6",
+    flex: 1
+  }),
+  labelRow: css({
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    pt: "1",
+    maxW: "120px"
+  }),
+  labelRowVertical: css({
+    alignItems: "flex-start",
+    maxW: "none",
+    pt: "0.5"
+  }),
+  description: css({
+    textAlign: "center"
+  }),
+  descriptionVertical: css({
+    textAlign: "start"
+  }),
+  descriptionError: css({
+    color: "status.error.fg"
+  }),
+  buttonReset: css({
+    bg: "none",
+    borderWidth: 0,
+    p: 0,
+    m: 0,
+    font: "inherit"
+  }),
+  stepContent: css({
+    pt: "3"
+  })
+};
+function getStepState({
+  hasError,
+  isActive,
+  isCompleted,
+  isDisabled
+}) {
+  if (hasError) {
+    return "error";
+  }
+  if (isDisabled) {
+    return "disabled";
+  }
+  if (isActive) {
+    return "active";
+  }
+  if (isCompleted) {
+    return "completed";
+  }
+  return "upcoming";
+}
+function Step({
+  children,
+  className,
+  "data-testid": dataTestId,
+  description,
+  hasError = false,
+  icon,
+  isCompleted: isCompletedFromProps,
+  isDisabled = false,
+  label,
+  ref,
+  step,
+  style
+}) {
+  const { activeStep, orientation, isNonLinear, onStepClick } = useStepperContext();
+  const isActive = step === activeStep;
+  const isCompleted = isCompletedFromProps ?? step < activeStep;
+  const isVertical = orientation === "vertical";
+  const isClickable = isNonLinear && !isDisabled && (isCompleted || isActive);
+  const state = getStepState({ hasError, isActive, isCompleted, isDisabled });
+  const connectorClassName = stepConnectorRecipe({
+    isCompleted,
+    orientation
+  });
+  const defaultIndicatorContent = isCompleted ? /* @__PURE__ */ jsx(Icon, { color: "inherit", icon: Check, size: "sm" }) : /* @__PURE__ */ jsx("span", { children: step + 1 });
+  const indicatorContent = hasError ? /* @__PURE__ */ jsx(Icon, { color: "inherit", icon: TriangleAlert, size: "sm" }) : icon ?? defaultIndicatorContent;
+  const handleClick = () => {
+    if (isClickable) {
+      onStepClick?.(step);
+    }
+  };
+  const stepLabel = hasError ? `Go to step ${step + 1}: ${label} (error)` : `Go to step ${step + 1}: ${label}`;
+  const indicator = isClickable ? /* @__PURE__ */ jsx(
+    "button",
+    {
+      "aria-label": stepLabel,
+      className: cx(
+        styles.buttonReset,
+        stepIndicatorRecipe({ state, isClickable: true })
+      ),
+      onClick: handleClick,
+      type: "button",
+      children: indicatorContent
+    }
+  ) : /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-hidden": "true",
+      className: stepIndicatorRecipe({ state, isClickable: false }),
+      children: indicatorContent
+    }
+  );
+  const labelNode = /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cx(
+        styles.labelRow,
+        isVertical ? styles.labelRowVertical : void 0
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          Text,
+          {
+            as: "span",
+            className: stepLabelRecipe({ state, orientation }),
+            color: "inherit",
+            type: "label",
+            children: label
+          }
+        ),
+        description != null ? /* @__PURE__ */ jsx(
+          Text,
+          {
+            as: "span",
+            className: cx(
+              styles.description,
+              isVertical ? styles.descriptionVertical : void 0,
+              state === "error" ? styles.descriptionError : void 0
+            ),
+            color: "secondary",
+            type: "supporting",
+            children: description
+          }
+        ) : null
+      ]
+    }
+  );
+  if (isVertical) {
+    return /* @__PURE__ */ jsxs(
+      "li",
+      {
+        "aria-current": isActive ? "step" : void 0,
+        className: cx(styles.verticalRoot, className),
+        "data-testid": dataTestId,
+        ref,
+        style,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: styles.verticalIndicatorColumn, children: [
+            indicator,
+            /* @__PURE__ */ jsx("div", { className: styles.verticalConnector, "data-step-connector": "", children: /* @__PURE__ */ jsx("div", { className: connectorClassName }) })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: styles.verticalContent, children: [
+            labelNode,
+            children != null ? /* @__PURE__ */ jsx("div", { className: styles.stepContent, children }) : null
+          ] })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "li",
+    {
+      "aria-current": isActive ? "step" : void 0,
+      className: cx(styles.horizontalRoot, className),
+      "data-testid": dataTestId,
+      ref,
+      style,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: styles.horizontalContent, children: [
+          indicator,
+          labelNode
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: styles.horizontalConnector, "data-step-connector": "", children: /* @__PURE__ */ jsx("div", { className: connectorClassName }) })
+      ]
+    }
+  );
+}
+Step.displayName = "Step";
+var styles2 = {
+  root: css({
+    display: "flex",
+    w: "full",
+    m: 0,
+    p: 0,
+    listStyleType: "none"
+  }),
+  horizontal: css({
+    flexDirection: "row",
+    alignItems: "flex-start"
+  }),
+  vertical: css({
+    flexDirection: "column"
+  })
+};
+function Stepper({
+  activeStep,
+  children,
+  className,
+  "data-testid": dataTestId,
+  label = "Progress",
+  onStepClick,
+  orientation = "horizontal",
+  ref,
+  style
+}) {
+  const contextValue = useMemo(
+    () => ({
+      activeStep,
+      isNonLinear: onStepClick != null,
+      onStepClick: onStepClick ?? null,
+      orientation
+    }),
+    [activeStep, onStepClick, orientation]
+  );
+  return /* @__PURE__ */ jsx(StepperContext, { value: contextValue, children: /* @__PURE__ */ jsx("nav", { "aria-label": label, ref, children: /* @__PURE__ */ jsx(
+    "ol",
+    {
+      className: cx(
+        styles2.root,
+        orientation === "horizontal" ? styles2.horizontal : styles2.vertical,
+        className
+      ),
+      "data-testid": dataTestId,
+      style,
+      children
+    }
+  ) }) });
+}
+Stepper.displayName = "Stepper";
+
+export { Step, Stepper, useStepperContext };
+//# sourceMappingURL=chunk-YQJJCYJP.js.map
+//# sourceMappingURL=chunk-YQJJCYJP.js.map

package/dist/chunk-YQJJCYJP.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Stepper/Step.recipe.ts","../src/components/Stepper/StepperContext.ts","../src/components/Stepper/Step.tsx","../src/components/Stepper/Stepper.tsx"],"names":["styles","jsx"],"mappings":";;;;;;;;;;AAGO,IAAM,sBAAsB,GAAA,CAAI;AAAA,EACrC,IAAA,EAAM;AAAA,IACJ,OAAA,EAAS,MAAA;AAAA,IACT,UAAA,EAAY,QAAA;AAAA,IACZ,cAAA,EAAgB,QAAA;AAAA,IAChB,CAAA,EAAG,GAAA;AAAA,IACH,CAAA,EAAG,GAAA;AAAA,IACH,YAAA,EAAc,MAAA;AAAA,IACd,UAAA,EAAY,MAAA;AAAA,IACZ,QAAA,EAAU,IAAA;AAAA,IACV,UAAA,EAAY,UAAA;AAAA,IACZ,UAAA,EAAY,MAAA;AAAA,IACZ,kBAAA,EAAoB,gDAAA;AAAA,IACpB,kBAAA,EAAoB,MAAA;AAAA,IACpB,wBAAA,EAA0B,SAAA;AAAA,IAC1B,UAAA,EAAY,CAAA;AAAA,IACZ,UAAA,EAAY,MAAA;AAAA,IACZ,WAAA,EAAa,YAAA;AAAA,IACb,WAAA,EAAa;AAAA,GACf;AAAA,EACA,QAAA,EAAU;AAAA,IACR,KAAA,EAAO;AAAA,MACL,MAAA,EAAQ;AAAA,QACN,EAAA,EAAI,SAAA;AAAA,QACJ,WAAA,EAAa,SAAA;AAAA,QACb,KAAA,EAAO;AAAA,OACT;AAAA,MACA,SAAA,EAAW;AAAA,QACT,EAAA,EAAI,SAAA;AAAA,QACJ,WAAA,EAAa,SAAA;AAAA,QACb,KAAA,EAAO;AAAA,OACT;AAAA,MACA,QAAA,EAAU;AAAA,QACR,EAAA,EAAI,aAAA;AAAA,QACJ,WAAA,EAAa,mBAAA;AAAA,QACb,KAAA,EAAO;AAAA,OACT;AAAA,MACA,QAAA,EAAU;AAAA,QACR,EAAA,EAAI,aAAA;AAAA,QACJ,WAAA,EAAa,QAAA;AAAA,QACb,KAAA,EAAO;AAAA,OACT;AAAA,MACA,KAAA,EAAO;AAAA,QACL,EAAA,EAAI,oBAAA;AAAA,QACJ,WAAA,EAAa,oBAAA;AAAA,QACb,KAAA,EAAO;AAAA;AACT,KACF;AAAA,IACA,WAAA,EAAa;AAAA,MACX,IAAA,EAAM;AAAA,QACJ,MAAA,EAAQ,SAAA;AAAA,QACR,MAAA,EAAQ;AAAA,UACN,OAAA,EAAS;AAAA,SACX;AAAA,QACA,aAAA,EAAe;AAAA,UACb,YAAA,EAAc,OAAA;AAAA,UACd,YAAA,EAAc,OAAA;AAAA,UACd,YAAA,EAAc,SAAA;AAAA,UACd,aAAA,EAAe;AAAA;AACjB,OACF;AAAA,MACA,OAAO;AAAC;AACV,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,KAAA,EAAO,UAAA;AAAA,IACP,WAAA,EAAa;AAAA;AAEjB,CAAC,CAAA;AAEM,IAAM,kBAAkB,GAAA,CAAI;AAAA,EACjC,IAAA,EAAM;AAAA,IACJ,SAAA,EAAW;AAAA,GACb;AAAA,EACA,QAAA,EAAU;AAAA,IACR,KAAA,EAAO;AAAA,MACL,MAAA,EAAQ;AAAA,QACN,KAAA,EAAO,IAAA;AAAA,QACP,UAAA,EAAY;AAAA,OACd;AAAA,MACA,SAAA,EAAW;AAAA,QACT,KAAA,EAAO;AAAA,OACT;AAAA,MACA,QAAA,EAAU;AAAA,QACR,KAAA,EAAO;AAAA,OACT;AAAA,MACA,QAAA,EAAU;AAAA,QACR,KAAA,EAAO;AAAA,OACT;AAAA,MACA,KAAA,EAAO;AAAA,QACL,KAAA,EAAO;AAAA;AACT,KACF;AAAA,IACA,WAAA,EAAa;AAAA,MACX,YAAY,EAAC;AAAA,MACb,QAAA,EAAU;AAAA,QACR,SAAA,EAAW;AAAA;AACb;AACF,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,KAAA,EAAO,UAAA;AAAA,IACP,WAAA,EAAa;AAAA;AAEjB,CAAC,CAAA;AAEM,IAAM,sBAAsB,GAAA,CAAI;AAAA,EACrC,IAAA,EAAM;AAAA,IACJ,YAAA,EAAc,MAAA;AAAA,IACd,kBAAA,EAAoB,kBAAA;AAAA,IACpB,kBAAA,EAAoB,MAAA;AAAA,IACpB,wBAAA,EAA0B;AAAA,GAC5B;AAAA,EACA,QAAA,EAAU;AAAA,IACR,WAAA,EAAa;AAAA,MACX,IAAA,EAAM;AAAA,QACJ,EAAA,EAAI;AAAA,OACN;AAAA,MACA,KAAA,EAAO;AAAA,QACL,EAAA,EAAI;AAAA;AACN,KACF;AAAA,IACA,WAAA,EAAa;AAAA,MACX,UAAA,EAAY;AAAA,QACV,CAAA,EAAG,KAAA;AAAA,QACH,CAAA,EAAG;AAAA,OACL;AAAA,MACA,QAAA,EAAU;AAAA,QACR,CAAA,EAAG,KAAA;AAAA,QACH,CAAA,EAAG;AAAA;AACL;AACF,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,WAAA,EAAa,KAAA;AAAA,IACb,WAAA,EAAa;AAAA;AAEjB,CAAC,CAAA;ACjIM,IAAM,cAAA,GAAiB,cAA0C,IAAI,CAAA;AAC5E,cAAA,CAAe,WAAA,GAAc,gBAAA;AAEtB,SAAS,iBAAA,GAAyC;AACvD,EAAA,MAAM,OAAA,GAAU,IAAI,cAAc,CAAA;AAElC,EAAA,IAAI,WAAW,IAAA,EAAM;AACnB,IAAA,MAAM,IAAI,MAAM,qCAAqC,CAAA;AAAA,EACvD;AAEA,EAAA,OAAO,OAAA;AACT;ACmDA,IAAM,MAAA,GAAS;AAAA,EACb,gBAAgB,GAAA,CAAI;AAAA,IAClB,OAAA,EAAS,MAAA;AAAA,IACT,aAAA,EAAe,KAAA;AAAA,IACf,UAAA,EAAY,YAAA;AAAA,IACZ,IAAA,EAAM,CAAA;AAAA,IACN,QAAA,EAAU,UAAA;AAAA,IACV,KAAA,EAAO;AAAA,MACL,IAAA,EAAM;AAAA,KACR;AAAA,IACA,oCAAA,EAAsC;AAAA,MACpC,OAAA,EAAS;AAAA;AACX,GACD,CAAA;AAAA,EACD,mBAAmB,GAAA,CAAI;AAAA,IACrB,OAAA,EAAS,MAAA;AAAA,IACT,aAAA,EAAe,QAAA;AAAA,IACf,UAAA,EAAY,QAAA;AAAA,IACZ,QAAA,EAAU,UAAA;AAAA,IACV,MAAA,EAAQ;AAAA,GACT,CAAA;AAAA,EACD,qBAAqB,GAAA,CAAI;AAAA,IACvB,IAAA,EAAM,CAAA;AAAA,IACN,OAAA,EAAS,MAAA;AAAA,IACT,UAAA,EAAY,QAAA;AAAA,IACZ,EAAA,EAAI,GAAA;AAAA,IACJ,IAAA,EAAM,GAAA;AAAA,IACN,CAAA,EAAG;AAAA,GACJ,CAAA;AAAA,EACD,cAAc,GAAA,CAAI;AAAA,IAChB,OAAA,EAAS,MAAA;AAAA,IACT,aAAA,EAAe,KAAA;AAAA,IACf,UAAA,EAAY,SAAA;AAAA,IACZ,QAAA,EAAU,UAAA;AAAA,IACV,IAAA,EAAM,IAAA;AAAA,IACN,oCAAA,EAAsC;AAAA,MACpC,OAAA,EAAS;AAAA;AACX,GACD,CAAA;AAAA,EACD,yBAAyB,GAAA,CAAI;AAAA,IAC3B,OAAA,EAAS,MAAA;AAAA,IACT,aAAA,EAAe,QAAA;AAAA,IACf,UAAA,EAAY,QAAA;AAAA,IACZ,CAAA,EAAG,GAAA;AAAA,IACH,UAAA,EAAY;AAAA,GACb,CAAA;AAAA,EACD,mBAAmB,GAAA,CAAI;AAAA,IACrB,IAAA,EAAM,CAAA;AAAA,IACN,OAAA,EAAS,MAAA;AAAA,IACT,cAAA,EAAgB,QAAA;AAAA,IAChB,EAAA,EAAI;AAAA,GACL,CAAA;AAAA,EACD,iBAAiB,GAAA,CAAI;AAAA,IACnB,OAAA,EAAS,MAAA;AAAA,IACT,aAAA,EAAe,QAAA;AAAA,IACf,EAAA,EAAI,GAAA;AAAA,IACJ,EAAA,EAAI,GAAA;AAAA,IACJ,IAAA,EAAM;AAAA,GACP,CAAA;AAAA,EACD,UAAU,GAAA,CAAI;AAAA,IACZ,OAAA,EAAS,MAAA;AAAA,IACT,aAAA,EAAe,QAAA;AAAA,IACf,UAAA,EAAY,QAAA;AAAA,IACZ,EAAA,EAAI,GAAA;AAAA,IACJ,IAAA,EAAM;AAAA,GACP,CAAA;AAAA,EACD,kBAAkB,GAAA,CAAI;AAAA,IACpB,UAAA,EAAY,YAAA;AAAA,IACZ,IAAA,EAAM,MAAA;AAAA,IACN,EAAA,EAAI;AAAA,GACL,CAAA;AAAA,EACD,aAAa,GAAA,CAAI;AAAA,IACf,SAAA,EAAW;AAAA,GACZ,CAAA;AAAA,EACD,qBAAqB,GAAA,CAAI;AAAA,IACvB,SAAA,EAAW;AAAA,GACZ,CAAA;AAAA,EACD,kBAAkB,GAAA,CAAI;AAAA,IACpB,KAAA,EAAO;AAAA,GACR,CAAA;AAAA,EACD,aAAa,GAAA,CAAI;AAAA,IACf,EAAA,EAAI,MAAA;AAAA,IACJ,WAAA,EAAa,CAAA;AAAA,IACb,CAAA,EAAG,CAAA;AAAA,IACH,CAAA,EAAG,CAAA;AAAA,IACH,IAAA,EAAM;AAAA,GACP,CAAA;AAAA,EACD,aAAa,GAAA,CAAI;AAAA,IACf,EAAA,EAAI;AAAA,GACL;AACH,CAAA;AAEA,SAAS,YAAA,CAAa;AAAA,EACpB,QAAA;AAAA,EACA,QAAA;AAAA,EACA,WAAA;AAAA,EACA;AACF,CAAA,EAKc;AACZ,EAAA,IAAI,QAAA,EAAU;AACZ,IAAA,OAAO,OAAA;AAAA,EACT;AACA,EAAA,IAAI,UAAA,EAAY;AACd,IAAA,OAAO,UAAA;AAAA,EACT;AACA,EAAA,IAAI,QAAA,EAAU;AACZ,IAAA,OAAO,QAAA;AAAA,EACT;AACA,EAAA,IAAI,WAAA,EAAa;AACf,IAAA,OAAO,WAAA;AAAA,EACT;AACA,EAAA,OAAO,UAAA;AACT;AAKO,SAAS,IAAA,CAAK;AAAA,EACnB,QAAA;AAAA,EACA,SAAA;AAAA,EACA,aAAA,EAAe,UAAA;AAAA,EACf,WAAA;AAAA,EACA,QAAA,GAAW,KAAA;AAAA,EACX,IAAA;AAAA,EACA,WAAA,EAAa,oBAAA;AAAA,EACb,UAAA,GAAa,KAAA;AAAA,EACb,KAAA;AAAA,EACA,GAAA;AAAA,EACA,IAAA;AAAA,EACA;AACF,CAAA,EAAiC;AAC/B,EAAA,MAAM,EAAC,UAAA,EAAY,WAAA,EAAa,WAAA,EAAa,WAAA,KAC3C,iBAAA,EAAkB;AACpB,EAAA,MAAM,WAAW,IAAA,KAAS,UAAA;AAC1B,EAAA,MAAM,WAAA,GAAc,wBAAwB,IAAA,GAAO,UAAA;AACnD,EAAA,MAAM,aAAa,WAAA,KAAgB,UAAA;AACnC,EAAA,MAAM,WAAA,GAAc,WAAA,IAAe,CAAC,UAAA,KAAe,WAAA,IAAe,QAAA,CAAA;AAClE,EAAA,MAAM,QAAQ,YAAA,CAAa,EAAC,UAAU,QAAA,EAAU,WAAA,EAAa,YAAW,CAAA;AAExE,EAAA,MAAM,qBAAqB,mBAAA,CAAoB;AAAA,IAC7C,WAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EAAA,MAAM,uBAAA,GAA0B,WAAA,mBAC9B,GAAA,CAAC,IAAA,EAAA,EAAK,OAAM,SAAA,EAAU,IAAA,EAAM,KAAA,EAAO,IAAA,EAAK,IAAA,EAAK,CAAA,mBAE7C,GAAA,CAAC,MAAA,EAAA,EAAM,iBAAO,CAAA,EAAE,CAAA;AAElB,EAAA,MAAM,gBAAA,GAAmB,QAAA,mBACvB,GAAA,CAAC,IAAA,EAAA,EAAK,KAAA,EAAM,SAAA,EAAU,IAAA,EAAM,aAAA,EAAe,IAAA,EAAK,IAAA,EAAK,CAAA,GAEpD,IAAA,IAAQ,uBAAA;AAGX,EAAA,MAAM,cAAc,MAAM;AACxB,IAAA,IAAI,WAAA,EAAa;AACf,MAAA,WAAA,GAAc,IAAI,CAAA;AAAA,IACpB;AAAA,EACF,CAAA;AAEA,EAAA,MAAM,SAAA,GAAY,QAAA,GACd,CAAA,WAAA,EAAc,IAAA,GAAO,CAAC,CAAA,EAAA,EAAK,KAAK,CAAA,QAAA,CAAA,GAChC,CAAA,WAAA,EAAc,IAAA,GAAO,CAAC,CAAA,EAAA,EAAK,KAAK,CAAA,CAAA;AAEpC,EAAA,MAAM,YAAY,WAAA,mBAChB,GAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,YAAA,EAAY,SAAA;AAAA,MACZ,SAAA,EAAW,EAAA;AAAA,QACT,MAAA,CAAO,WAAA;AAAA,QACP,mBAAA,CAAoB,EAAC,KAAA,EAAO,WAAA,EAAa,MAAK;AAAA,OAChD;AAAA,MACA,OAAA,EAAS,WAAA;AAAA,MACT,IAAA,EAAK,QAAA;AAAA,MACJ,QAAA,EAAA;AAAA;AAAA,GACH,mBAEA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,aAAA,EAAY,MAAA;AAAA,MACZ,WAAW,mBAAA,CAAoB,EAAC,KAAA,EAAO,WAAA,EAAa,OAAM,CAAA;AAAA,MACzD,QAAA,EAAA;AAAA;AAAA,GACH;AAGF,EAAA,MAAM,SAAA,mBACJ,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAA;AAAA,QACT,MAAA,CAAO,QAAA;AAAA,QACP,UAAA,GAAa,OAAO,gBAAA,GAAmB;AAAA,OACzC;AAAA,MACA,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,IAAA;AAAA,UAAA;AAAA,YACC,EAAA,EAAG,MAAA;AAAA,YACH,SAAA,EAAW,eAAA,CAAgB,EAAC,KAAA,EAAO,aAAY,CAAA;AAAA,YAC/C,KAAA,EAAM,SAAA;AAAA,YACN,IAAA,EAAK,OAAA;AAAA,YACJ,QAAA,EAAA;AAAA;AAAA,SACH;AAAA,QACC,eAAe,IAAA,mBACd,GAAA;AAAA,UAAC,IAAA;AAAA,UAAA;AAAA,YACC,EAAA,EAAG,MAAA;AAAA,YACH,SAAA,EAAW,EAAA;AAAA,cACT,MAAA,CAAO,WAAA;AAAA,cACP,UAAA,GAAa,OAAO,mBAAA,GAAsB,MAAA;AAAA,cAC1C,KAAA,KAAU,OAAA,GAAU,MAAA,CAAO,gBAAA,GAAmB;AAAA,aAChD;AAAA,YACA,KAAA,EAAM,WAAA;AAAA,YACN,IAAA,EAAK,YAAA;AAAA,YACJ,QAAA,EAAA;AAAA;AAAA,SACH,GACE;AAAA;AAAA;AAAA,GACN;AAGF,EAAA,IAAI,UAAA,EAAY;AACd,IAAA,uBACE,IAAA;AAAA,MAAC,IAAA;AAAA,MAAA;AAAA,QACC,cAAA,EAAc,WAAW,MAAA,GAAS,MAAA;AAAA,QAClC,SAAA,EAAW,EAAA,CAAG,MAAA,CAAO,YAAA,EAAc,SAAS,CAAA;AAAA,QAC5C,aAAA,EAAa,UAAA;AAAA,QACb,GAAA;AAAA,QACA,KAAA;AAAA,QACA,QAAA,EAAA;AAAA,0BAAA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,uBAAA,EACpB,QAAA,EAAA;AAAA,YAAA,SAAA;AAAA,4BACD,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,iBAAA,EAAmB,qBAAA,EAAoB,EAAA,EAC5D,QAAA,kBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,kBAAA,EAAoB,CAAA,EACtC;AAAA,WAAA,EACF,CAAA;AAAA,0BACA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,eAAA,EACpB,QAAA,EAAA;AAAA,YAAA,SAAA;AAAA,YACA,QAAA,IAAY,uBACX,GAAA,CAAC,KAAA,EAAA,EAAI,WAAW,MAAA,CAAO,WAAA,EAAc,UAAS,CAAA,GAC5C;AAAA,WAAA,EACN;AAAA;AAAA;AAAA,KACF;AAAA,EAEJ;AAEA,EAAA,uBACE,IAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,cAAA,EAAc,WAAW,MAAA,GAAS,MAAA;AAAA,MAClC,SAAA,EAAW,EAAA,CAAG,MAAA,CAAO,cAAA,EAAgB,SAAS,CAAA;AAAA,MAC9C,aAAA,EAAa,UAAA;AAAA,MACb,GAAA;AAAA,MACA,KAAA;AAAA,MACA,QAAA,EAAA;AAAA,wBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,iBAAA,EACpB,QAAA,EAAA;AAAA,UAAA,SAAA;AAAA,UACA;AAAA,SAAA,EACH,CAAA;AAAA,wBACA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,mBAAA,EAAqB,qBAAA,EAAoB,EAAA,EAC9D,QAAA,kBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,kBAAA,EAAoB,CAAA,EACtC;AAAA;AAAA;AAAA,GACF;AAEJ;AAEA,IAAA,CAAK,WAAA,GAAc,MAAA;ACxRnB,IAAMA,OAAAA,GAAS;AAAA,EACb,MAAM,GAAA,CAAI;AAAA,IACR,OAAA,EAAS,MAAA;AAAA,IACT,CAAA,EAAG,MAAA;AAAA,IACH,CAAA,EAAG,CAAA;AAAA,IACH,CAAA,EAAG,CAAA;AAAA,IACH,aAAA,EAAe;AAAA,GAChB,CAAA;AAAA,EACD,YAAY,GAAA,CAAI;AAAA,IACd,aAAA,EAAe,KAAA;AAAA,IACf,UAAA,EAAY;AAAA,GACb,CAAA;AAAA,EACD,UAAU,GAAA,CAAI;AAAA,IACZ,aAAA,EAAe;AAAA,GAChB;AACH,CAAA;AAKO,SAAS,OAAA,CAAQ;AAAA,EACtB,UAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,aAAA,EAAe,UAAA;AAAA,EACf,KAAA,GAAQ,UAAA;AAAA,EACR,WAAA;AAAA,EACA,WAAA,GAAc,YAAA;AAAA,EACd,GAAA;AAAA,EACA;AACF,CAAA,EAAoC;AAClC,EAAA,MAAM,YAAA,GAAe,OAAA;AAAA,IACnB,OAAO;AAAA,MACL,UAAA;AAAA,MACA,aAAa,WAAA,IAAe,IAAA;AAAA,MAC5B,aAAa,WAAA,IAAe,IAAA;AAAA,MAC5B;AAAA,KACF,CAAA;AAAA,IACA,CAAC,UAAA,EAAY,WAAA,EAAa,WAAW;AAAA,GACvC;AAEA,EAAA,uBACEC,GAAAA,CAAC,cAAA,EAAA,EAAe,KAAA,EAAO,YAAA,EACrB,QAAA,kBAAAA,GAAAA,CAAC,KAAA,EAAA,EAAI,YAAA,EAAY,KAAA,EAAO,GAAA,EACtB,QAAA,kBAAAA,GAAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAA;AAAA,QACTD,OAAAA,CAAO,IAAA;AAAA,QACP,WAAA,KAAgB,YAAA,GAAeA,OAAAA,CAAO,UAAA,GAAaA,OAAAA,CAAO,QAAA;AAAA,QAC1D;AAAA,OACF;AAAA,MACA,aAAA,EAAa,UAAA;AAAA,MACb,KAAA;AAAA,MACC;AAAA;AAAA,KAEL,CAAA,EACF,CAAA;AAEJ;AAEA,OAAA,CAAQ,WAAA,GAAc,SAAA","file":"chunk-YQJJCYJP.js","sourcesContent":["import {cva, type RecipeVariantProps} from 'styled-system/css';\nimport type {StepState} from './Step';\n\nexport const stepIndicatorRecipe = cva({\n  base: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    w: '7',\n    h: '7',\n    borderRadius: 'full',\n    fontFamily: 'body',\n    fontSize: 'sm',\n    fontWeight: 'semibold',\n    lineHeight: 'none',\n    transitionProperty: 'background-color, color, border-color, opacity',\n    transitionDuration: 'fast',\n    transitionTimingFunction: 'default',\n    flexShrink: 0,\n    userSelect: 'none',\n    borderWidth: 'emphasized',\n    borderStyle: 'solid',\n  },\n  variants: {\n    state: {\n      active: {\n        bg: 'primary',\n        borderColor: 'primary',\n        color: 'fg.onPrimary',\n      },\n      completed: {\n        bg: 'primary',\n        borderColor: 'primary',\n        color: 'fg.onPrimary',\n      },\n      upcoming: {\n        bg: 'transparent',\n        borderColor: 'border.emphasized',\n        color: 'fg.muted',\n      },\n      disabled: {\n        bg: 'transparent',\n        borderColor: 'border',\n        color: 'fg.disabled',\n      },\n      error: {\n        bg: 'status.error.solid',\n        borderColor: 'status.error.solid',\n        color: 'status.error.solidFg',\n      },\n    } satisfies Record<StepState, object>,\n    isClickable: {\n      true: {\n        cursor: 'pointer',\n        _hover: {\n          opacity: 0.85,\n        },\n        _focusVisible: {\n          outlineWidth: 'focus',\n          outlineStyle: 'solid',\n          outlineColor: 'primary',\n          outlineOffset: 'focusOffset',\n        },\n      },\n      false: {},\n    },\n  },\n  defaultVariants: {\n    state: 'upcoming',\n    isClickable: false,\n  },\n});\n\nexport const stepLabelRecipe = cva({\n  base: {\n    textAlign: 'center',\n  },\n  variants: {\n    state: {\n      active: {\n        color: 'fg',\n        fontWeight: 'semibold',\n      },\n      completed: {\n        color: 'fg',\n      },\n      upcoming: {\n        color: 'fg.muted',\n      },\n      disabled: {\n        color: 'fg.disabled',\n      },\n      error: {\n        color: 'status.error.fg',\n      },\n    } satisfies Record<StepState, object>,\n    orientation: {\n      horizontal: {},\n      vertical: {\n        textAlign: 'start',\n      },\n    },\n  },\n  defaultVariants: {\n    state: 'upcoming',\n    orientation: 'horizontal',\n  },\n});\n\nexport const stepConnectorRecipe = cva({\n  base: {\n    borderRadius: 'full',\n    transitionProperty: 'background-color',\n    transitionDuration: 'fast',\n    transitionTimingFunction: 'default',\n  },\n  variants: {\n    isCompleted: {\n      true: {\n        bg: 'primary',\n      },\n      false: {\n        bg: 'track.emphasized',\n      },\n    },\n    orientation: {\n      horizontal: {\n        h: '0.5',\n        w: 'full',\n      },\n      vertical: {\n        w: '0.5',\n        h: 'full',\n      },\n    },\n  },\n  defaultVariants: {\n    isCompleted: false,\n    orientation: 'horizontal',\n  },\n});\n\nexport type StepIndicatorVariants = RecipeVariantProps<\n  typeof stepIndicatorRecipe\n>;\nexport type StepLabelVariants = RecipeVariantProps<typeof stepLabelRecipe>;\nexport type StepConnectorVariants = RecipeVariantProps<\n  typeof stepConnectorRecipe\n>;\n","import {createContext, use} from 'react';\n\nexport type StepperOrientation = 'horizontal' | 'vertical';\n\nexport interface StepperContextValue {\n  activeStep: number;\n  isNonLinear: boolean;\n  onStepClick: ((index: number) => void) | null;\n  orientation: StepperOrientation;\n}\n\nexport const StepperContext = createContext<StepperContextValue | null>(null);\nStepperContext.displayName = 'StepperContext';\n\nexport function useStepperContext(): StepperContextValue {\n  const context = use(StepperContext);\n\n  if (context == null) {\n    throw new Error('Step must be used within a Stepper.');\n  }\n\n  return context;\n}\n","import {Check, TriangleAlert} from 'lucide-react';\nimport type {CSSProperties, ReactNode, Ref} from 'react';\nimport {css} from 'styled-system/css';\nimport {cx} from '../../internal/cx';\nimport {Icon} from '../Icon';\nimport {Text} from '../Text';\nimport {\n  stepConnectorRecipe,\n  stepIndicatorRecipe,\n  stepLabelRecipe,\n} from './Step.recipe';\nimport {useStepperContext} from './StepperContext';\n\nexport type StepState =\n  | 'active'\n  | 'completed'\n  | 'disabled'\n  | 'error'\n  | 'upcoming';\n\nexport interface StepProps {\n  /**\n   * Content rendered below the label and description in vertical steppers.\n   */\n  children?: ReactNode;\n  /**\n   * Additional CSS class names applied to the step.\n   */\n  className?: string;\n  /**\n   * Test ID applied to the step.\n   */\n  'data-testid'?: string;\n  /**\n   * Optional supporting text.\n   */\n  description?: string;\n  /**\n   * Whether the step has an error.\n   * @default false\n   */\n  hasError?: boolean;\n  /**\n   * Custom indicator content replacing the number or check icon.\n   */\n  icon?: ReactNode;\n  /**\n   * Override the automatically computed completed state.\n   */\n  isCompleted?: boolean;\n  /**\n   * Whether the step is disabled.\n   * @default false\n   */\n  isDisabled?: boolean;\n  /**\n   * Step label.\n   */\n  label: string;\n  /**\n   * Ref forwarded to the list item.\n   */\n  ref?: Ref<HTMLLIElement>;\n  /**\n   * Zero-based index of this step.\n   */\n  step: number;\n  /**\n   * Inline styles applied to the step.\n   */\n  style?: CSSProperties;\n}\n\nconst styles = {\n  horizontalRoot: css({\n    display: 'flex',\n    flexDirection: 'row',\n    alignItems: 'flex-start',\n    flex: 1,\n    position: 'relative',\n    _last: {\n      flex: 'none',\n    },\n    '&:last-child [data-step-connector]': {\n      display: 'none',\n    },\n  }),\n  horizontalContent: css({\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'center',\n    position: 'relative',\n    zIndex: 1,\n  }),\n  horizontalConnector: css({\n    flex: 1,\n    display: 'flex',\n    alignItems: 'center',\n    px: '2',\n    minW: '6',\n    h: '7',\n  }),\n  verticalRoot: css({\n    display: 'flex',\n    flexDirection: 'row',\n    alignItems: 'stretch',\n    position: 'relative',\n    minH: '12',\n    '&:last-child [data-step-connector]': {\n      display: 'none',\n    },\n  }),\n  verticalIndicatorColumn: css({\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'center',\n    w: '7',\n    flexShrink: 0,\n  }),\n  verticalConnector: css({\n    flex: 1,\n    display: 'flex',\n    justifyContent: 'center',\n    py: '1',\n  }),\n  verticalContent: css({\n    display: 'flex',\n    flexDirection: 'column',\n    ps: '3',\n    pb: '6',\n    flex: 1,\n  }),\n  labelRow: css({\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'center',\n    pt: '1',\n    maxW: '120px',\n  }),\n  labelRowVertical: css({\n    alignItems: 'flex-start',\n    maxW: 'none',\n    pt: '0.5',\n  }),\n  description: css({\n    textAlign: 'center',\n  }),\n  descriptionVertical: css({\n    textAlign: 'start',\n  }),\n  descriptionError: css({\n    color: 'status.error.fg',\n  }),\n  buttonReset: css({\n    bg: 'none',\n    borderWidth: 0,\n    p: 0,\n    m: 0,\n    font: 'inherit',\n  }),\n  stepContent: css({\n    pt: '3',\n  }),\n} as const;\n\nfunction getStepState({\n  hasError,\n  isActive,\n  isCompleted,\n  isDisabled,\n}: {\n  hasError: boolean;\n  isActive: boolean;\n  isCompleted: boolean;\n  isDisabled: boolean;\n}): StepState {\n  if (hasError) {\n    return 'error';\n  }\n  if (isDisabled) {\n    return 'disabled';\n  }\n  if (isActive) {\n    return 'active';\n  }\n  if (isCompleted) {\n    return 'completed';\n  }\n  return 'upcoming';\n}\n\n/**\n * Individual step within a `Stepper`.\n */\nexport function Step({\n  children,\n  className,\n  'data-testid': dataTestId,\n  description,\n  hasError = false,\n  icon,\n  isCompleted: isCompletedFromProps,\n  isDisabled = false,\n  label,\n  ref,\n  step,\n  style,\n}: StepProps): React.JSX.Element {\n  const {activeStep, orientation, isNonLinear, onStepClick} =\n    useStepperContext();\n  const isActive = step === activeStep;\n  const isCompleted = isCompletedFromProps ?? step < activeStep;\n  const isVertical = orientation === 'vertical';\n  const isClickable = isNonLinear && !isDisabled && (isCompleted || isActive);\n  const state = getStepState({hasError, isActive, isCompleted, isDisabled});\n\n  const connectorClassName = stepConnectorRecipe({\n    isCompleted,\n    orientation,\n  });\n\n  const defaultIndicatorContent = isCompleted ? (\n    <Icon color=\"inherit\" icon={Check} size=\"sm\" />\n  ) : (\n    <span>{step + 1}</span>\n  );\n  const indicatorContent = hasError ? (\n    <Icon color=\"inherit\" icon={TriangleAlert} size=\"sm\" />\n  ) : (\n    (icon ?? defaultIndicatorContent)\n  );\n\n  const handleClick = () => {\n    if (isClickable) {\n      onStepClick?.(step);\n    }\n  };\n\n  const stepLabel = hasError\n    ? `Go to step ${step + 1}: ${label} (error)`\n    : `Go to step ${step + 1}: ${label}`;\n\n  const indicator = isClickable ? (\n    <button\n      aria-label={stepLabel}\n      className={cx(\n        styles.buttonReset,\n        stepIndicatorRecipe({state, isClickable: true}),\n      )}\n      onClick={handleClick}\n      type=\"button\">\n      {indicatorContent}\n    </button>\n  ) : (\n    <div\n      aria-hidden=\"true\"\n      className={stepIndicatorRecipe({state, isClickable: false})}>\n      {indicatorContent}\n    </div>\n  );\n\n  const labelNode = (\n    <div\n      className={cx(\n        styles.labelRow,\n        isVertical ? styles.labelRowVertical : undefined,\n      )}>\n      <Text\n        as=\"span\"\n        className={stepLabelRecipe({state, orientation})}\n        color=\"inherit\"\n        type=\"label\">\n        {label}\n      </Text>\n      {description != null ? (\n        <Text\n          as=\"span\"\n          className={cx(\n            styles.description,\n            isVertical ? styles.descriptionVertical : undefined,\n            state === 'error' ? styles.descriptionError : undefined,\n          )}\n          color=\"secondary\"\n          type=\"supporting\">\n          {description}\n        </Text>\n      ) : null}\n    </div>\n  );\n\n  if (isVertical) {\n    return (\n      <li\n        aria-current={isActive ? 'step' : undefined}\n        className={cx(styles.verticalRoot, className)}\n        data-testid={dataTestId}\n        ref={ref}\n        style={style}>\n        <div className={styles.verticalIndicatorColumn}>\n          {indicator}\n          <div className={styles.verticalConnector} data-step-connector=\"\">\n            <div className={connectorClassName} />\n          </div>\n        </div>\n        <div className={styles.verticalContent}>\n          {labelNode}\n          {children != null ? (\n            <div className={styles.stepContent}>{children}</div>\n          ) : null}\n        </div>\n      </li>\n    );\n  }\n\n  return (\n    <li\n      aria-current={isActive ? 'step' : undefined}\n      className={cx(styles.horizontalRoot, className)}\n      data-testid={dataTestId}\n      ref={ref}\n      style={style}>\n      <div className={styles.horizontalContent}>\n        {indicator}\n        {labelNode}\n      </div>\n      <div className={styles.horizontalConnector} data-step-connector=\"\">\n        <div className={connectorClassName} />\n      </div>\n    </li>\n  );\n}\n\nStep.displayName = 'Step';\n","import {useMemo, type CSSProperties, type ReactNode, type Ref} from 'react';\nimport {css} from 'styled-system/css';\nimport {cx} from '../../internal/cx';\nimport {\n  StepperContext,\n  type StepperContextValue,\n  type StepperOrientation,\n} from './StepperContext';\n\nexport type {StepperOrientation};\n\nexport interface StepperProps {\n  /**\n   * Zero-based index of the active step.\n   */\n  activeStep: number;\n  /**\n   * Step elements to render.\n   */\n  children: ReactNode;\n  /**\n   * Additional CSS class names applied to the ordered list.\n   */\n  className?: string;\n  /**\n   * Test ID applied to the ordered list.\n   */\n  'data-testid'?: string;\n  /**\n   * Accessible label for the navigation landmark.\n   * @default 'Progress'\n   */\n  label?: string;\n  /**\n   * Called when a completed or active step indicator is clicked.\n   */\n  onStepClick?: (index: number) => void;\n  /**\n   * Layout direction.\n   * @default 'horizontal'\n   */\n  orientation?: StepperOrientation;\n  /**\n   * Ref forwarded to the navigation element.\n   */\n  ref?: Ref<HTMLElement>;\n  /**\n   * Inline styles applied to the ordered list.\n   */\n  style?: CSSProperties;\n}\n\nconst styles = {\n  root: css({\n    display: 'flex',\n    w: 'full',\n    m: 0,\n    p: 0,\n    listStyleType: 'none',\n  }),\n  horizontal: css({\n    flexDirection: 'row',\n    alignItems: 'flex-start',\n  }),\n  vertical: css({\n    flexDirection: 'column',\n  }),\n} as const;\n\n/**\n * Displays progress through a sequence of logical steps.\n */\nexport function Stepper({\n  activeStep,\n  children,\n  className,\n  'data-testid': dataTestId,\n  label = 'Progress',\n  onStepClick,\n  orientation = 'horizontal',\n  ref,\n  style,\n}: StepperProps): React.JSX.Element {\n  const contextValue = useMemo<StepperContextValue>(\n    () => ({\n      activeStep,\n      isNonLinear: onStepClick != null,\n      onStepClick: onStepClick ?? null,\n      orientation,\n    }),\n    [activeStep, onStepClick, orientation],\n  );\n\n  return (\n    <StepperContext value={contextValue}>\n      <nav aria-label={label} ref={ref}>\n        <ol\n          className={cx(\n            styles.root,\n            orientation === 'horizontal' ? styles.horizontal : styles.vertical,\n            className,\n          )}\n          data-testid={dataTestId}\n          style={style}>\n          {children}\n        </ol>\n      </nav>\n    </StepperContext>\n  );\n}\n\nStepper.displayName = 'Stepper';\n"]}