taxonium-component/dist/Stepper-C7kahSTG.js

React component for exploring large phylogenetic trees in the browser

import { p as N, c as I } from "./index-DvVXAaWp.js";
import * as c from "react";
import e from "prop-types";
import { A as j, z as $, G as z, H as S, I as E, c5 as J, X, c6 as re, J as D, b5 as F, aC as q } from "./JBrowsePanel-ClL6pWQW.js";
import { jsxs as _, jsx as b } from "react/jsx-runtime";
import { C as K } from "./Collapse-CYovcWx9.js";
const U = /* @__PURE__ */ c.createContext({});
N.env.NODE_ENV !== "production" && (U.displayName = "StepperContext");
const A = /* @__PURE__ */ c.createContext({});
N.env.NODE_ENV !== "production" && (A.displayName = "StepContext");
function ae(t) {
  return j("MuiStep", t);
}
$("MuiStep", ["root", "horizontal", "vertical", "alternativeLabel", "completed"]);
const se = (t) => {
  const {
    classes: o,
    orientation: n,
    alternativeLabel: r,
    completed: a
  } = t;
  return E({
    root: ["root", n, r && "alternativeLabel", a && "completed"]
  }, ae, o);
}, le = S("div", {
  name: "MuiStep",
  slot: "Root",
  overridesResolver: (t, o) => {
    const {
      ownerState: n
    } = t;
    return [o.root, o[n.orientation], n.alternativeLabel && o.alternativeLabel, n.completed && o.completed];
  }
})({
  variants: [{
    props: {
      orientation: "horizontal"
    },
    style: {
      paddingLeft: 8,
      paddingRight: 8
    }
  }, {
    props: {
      alternativeLabel: !0
    },
    style: {
      flex: 1,
      position: "relative"
    }
  }]
}), ie = /* @__PURE__ */ c.forwardRef(function(o, n) {
  const r = z({
    props: o,
    name: "MuiStep"
  }), {
    active: a,
    children: l,
    className: p,
    component: i = "div",
    completed: u,
    disabled: f,
    expanded: d = !1,
    index: s,
    last: v,
    ...w
  } = r, {
    activeStep: g,
    connector: y,
    alternativeLabel: C,
    orientation: h,
    nonLinear: L
  } = c.useContext(U);
  let [m = !1, M = !1, x = !1] = [a, u, f];
  g === s ? m = a !== void 0 ? a : !0 : !L && g > s ? M = u !== void 0 ? u : !0 : !L && g < s && (x = f !== void 0 ? f : !0);
  const V = c.useMemo(() => ({
    index: s,
    last: v,
    expanded: d,
    icon: s + 1,
    active: m,
    completed: M,
    disabled: x
  }), [s, v, d, m, M, x]), T = {
    ...r,
    active: m,
    orientation: h,
    alternativeLabel: C,
    completed: M,
    disabled: x,
    expanded: d,
    component: i
  }, P = se(T), R = /* @__PURE__ */ _(le, {
    as: i,
    className: I(P.root, p),
    ref: n,
    ownerState: T,
    ...w,
    children: [y && C && s !== 0 ? y : null, l]
  });
  return /* @__PURE__ */ b(A.Provider, {
    value: V,
    children: y && !C && s !== 0 ? /* @__PURE__ */ _(c.Fragment, {
      children: [y, R]
    }) : R
  });
});
N.env.NODE_ENV !== "production" && (ie.propTypes = {
  // ┌────────────────────────────── Warning ──────────────────────────────┐
  // │ These PropTypes are generated from the TypeScript type definitions. │
  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
  // └─────────────────────────────────────────────────────────────────────┘
  /**
   * Sets the step as active. Is passed to child components.
   */
  active: e.bool,
  /**
   * Should be `Step` sub-components such as `StepLabel`, `StepContent`.
   */
  children: e.node,
  /**
   * Override or extend the styles applied to the component.
   */
  classes: e.object,
  /**
   * @ignore
   */
  className: e.string,
  /**
   * Mark the step as completed. Is passed to child components.
   */
  completed: e.bool,
  /**
   * The component used for the root node.
   * Either a string to use a HTML element or a component.
   */
  component: e.elementType,
  /**
   * If `true`, the step is disabled, will also disable the button if
   * `StepButton` is a child of `Step`. Is passed to child components.
   */
  disabled: e.bool,
  /**
   * Expand the step.
   * @default false
   */
  expanded: e.bool,
  /**
   * The position of the step.
   * The prop defaults to the value inherited from the parent Stepper component.
   */
  index: J,
  /**
   * If `true`, the Step is displayed as rendered last.
   * The prop defaults to the value inherited from the parent Stepper component.
   */
  last: e.bool,
  /**
   * The system prop that allows defining system overrides as well as additional CSS styles.
   */
  sx: e.oneOfType([e.arrayOf(e.oneOfType([e.func, e.object, e.bool])), e.func, e.object])
});
const ce = X(/* @__PURE__ */ b("path", {
  d: "M12 0a12 12 0 1 0 0 24 12 12 0 0 0 0-24zm-2 17l-5-5 1.4-1.4 3.6 3.6 7.6-7.6L19 8l-9 9z"
}), "CheckCircle"), pe = X(/* @__PURE__ */ b("path", {
  d: "M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"
}), "Warning");
function de(t) {
  return j("MuiStepIcon", t);
}
const W = $("MuiStepIcon", ["root", "active", "completed", "error", "text"]);
var G;
const ue = (t) => {
  const {
    classes: o,
    active: n,
    completed: r,
    error: a
  } = t;
  return E({
    root: ["root", n && "active", r && "completed", a && "error"],
    text: ["text"]
  }, de, o);
}, H = S(re, {
  name: "MuiStepIcon",
  slot: "Root"
})(D(({
  theme: t
}) => ({
  display: "block",
  transition: t.transitions.create("color", {
    duration: t.transitions.duration.shortest
  }),
  color: (t.vars || t).palette.text.disabled,
  [`&.${W.completed}`]: {
    color: (t.vars || t).palette.primary.main
  },
  [`&.${W.active}`]: {
    color: (t.vars || t).palette.primary.main
  },
  [`&.${W.error}`]: {
    color: (t.vars || t).palette.error.main
  }
}))), be = S("text", {
  name: "MuiStepIcon",
  slot: "Text"
})(D(({
  theme: t
}) => ({
  fill: (t.vars || t).palette.primary.contrastText,
  fontSize: t.typography.caption.fontSize,
  fontFamily: t.typography.fontFamily
}))), Q = /* @__PURE__ */ c.forwardRef(function(o, n) {
  const r = z({
    props: o,
    name: "MuiStepIcon"
  }), {
    active: a = !1,
    className: l,
    completed: p = !1,
    error: i = !1,
    icon: u,
    ...f
  } = r, d = {
    ...r,
    active: a,
    completed: p,
    error: i
  }, s = ue(d);
  if (typeof u == "number" || typeof u == "string") {
    const v = I(l, s.root);
    return i ? /* @__PURE__ */ b(H, {
      as: pe,
      className: v,
      ref: n,
      ownerState: d,
      ...f
    }) : p ? /* @__PURE__ */ b(H, {
      as: ce,
      className: v,
      ref: n,
      ownerState: d,
      ...f
    }) : /* @__PURE__ */ _(H, {
      className: v,
      ref: n,
      ownerState: d,
      ...f,
      children: [G || (G = /* @__PURE__ */ b("circle", {
        cx: "12",
        cy: "12",
        r: "12"
      })), /* @__PURE__ */ b(be, {
        className: s.text,
        x: "12",
        y: "12",
        textAnchor: "middle",
        dominantBaseline: "central",
        ownerState: d,
        children: u
      })]
    });
  }
  return u;
});
N.env.NODE_ENV !== "production" && (Q.propTypes = {
  // ┌────────────────────────────── Warning ──────────────────────────────┐
  // │ These PropTypes are generated from the TypeScript type definitions. │
  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
  // └─────────────────────────────────────────────────────────────────────┘
  /**
   * Whether this step is active.
   * @default false
   */
  active: e.bool,
  /**
   * Override or extend the styles applied to the component.
   */
  classes: e.object,
  /**
   * @ignore
   */
  className: e.string,
  /**
   * Mark the step as completed. Is passed to child components.
   * @default false
   */
  completed: e.bool,
  /**
   * If `true`, the step is marked as failed.
   * @default false
   */
  error: e.bool,
  /**
   * The label displayed in the step icon.
   */
  icon: e.node,
  /**
   * The system prop that allows defining system overrides as well as additional CSS styles.
   */
  sx: e.oneOfType([e.arrayOf(e.oneOfType([e.func, e.object, e.bool])), e.func, e.object])
});
function fe(t) {
  return j("MuiStepLabel", t);
}
const O = $("MuiStepLabel", ["root", "horizontal", "vertical", "label", "active", "completed", "error", "disabled", "iconContainer", "alternativeLabel", "labelContainer"]), ve = (t) => {
  const {
    classes: o,
    orientation: n,
    active: r,
    completed: a,
    error: l,
    disabled: p,
    alternativeLabel: i
  } = t;
  return E({
    root: ["root", n, l && "error", p && "disabled", i && "alternativeLabel"],
    label: ["label", r && "active", a && "completed", l && "error", p && "disabled", i && "alternativeLabel"],
    iconContainer: ["iconContainer", r && "active", a && "completed", l && "error", p && "disabled", i && "alternativeLabel"],
    labelContainer: ["labelContainer", i && "alternativeLabel"]
  }, fe, o);
}, me = S("span", {
  name: "MuiStepLabel",
  slot: "Root",
  overridesResolver: (t, o) => {
    const {
      ownerState: n
    } = t;
    return [o.root, o[n.orientation]];
  }
})({
  display: "flex",
  alignItems: "center",
  [`&.${O.alternativeLabel}`]: {
    flexDirection: "column"
  },
  [`&.${O.disabled}`]: {
    cursor: "default"
  },
  variants: [{
    props: {
      orientation: "vertical"
    },
    style: {
      textAlign: "left",
      padding: "8px 0"
    }
  }]
}), Se = S("span", {
  name: "MuiStepLabel",
  slot: "Label"
})(D(({
  theme: t
}) => ({
  ...t.typography.body2,
  display: "block",
  transition: t.transitions.create("color", {
    duration: t.transitions.duration.shortest
  }),
  [`&.${O.active}`]: {
    color: (t.vars || t).palette.text.primary,
    fontWeight: 500
  },
  [`&.${O.completed}`]: {
    color: (t.vars || t).palette.text.primary,
    fontWeight: 500
  },
  [`&.${O.alternativeLabel}`]: {
    marginTop: 16
  },
  [`&.${O.error}`]: {
    color: (t.vars || t).palette.error.main
  }
}))), ye = S("span", {
  name: "MuiStepLabel",
  slot: "IconContainer"
})({
  flexShrink: 0,
  display: "flex",
  paddingRight: 8,
  [`&.${O.alternativeLabel}`]: {
    paddingRight: 0
  }
}), Ce = S("span", {
  name: "MuiStepLabel",
  slot: "LabelContainer"
})(D(({
  theme: t
}) => ({
  width: "100%",
  color: (t.vars || t).palette.text.secondary,
  [`&.${O.alternativeLabel}`]: {
    textAlign: "center"
  }
}))), Y = /* @__PURE__ */ c.forwardRef(function(o, n) {
  const r = z({
    props: o,
    name: "MuiStepLabel"
  }), {
    children: a,
    className: l,
    componentsProps: p = {},
    error: i = !1,
    icon: u,
    optional: f,
    slots: d = {},
    slotProps: s = {},
    StepIconComponent: v,
    StepIconProps: w,
    ...g
  } = r, {
    alternativeLabel: y,
    orientation: C
  } = c.useContext(U), {
    active: h,
    disabled: L,
    completed: m,
    icon: M
  } = c.useContext(A), x = u || M;
  let V = v;
  x && !V && (V = Q);
  const T = {
    ...r,
    active: h,
    alternativeLabel: y,
    completed: m,
    disabled: L,
    error: i,
    orientation: C
  }, P = ve(T), R = {
    slots: d,
    slotProps: {
      stepIcon: w,
      ...p,
      ...s
    }
  }, [ee, te] = F("root", {
    elementType: me,
    externalForwardedProps: {
      ...R,
      ...g
    },
    ownerState: T,
    ref: n,
    className: I(P.root, l)
  }), [oe, k] = F("label", {
    elementType: Se,
    externalForwardedProps: R,
    ownerState: T
  }), [B, ne] = F("stepIcon", {
    elementType: V,
    externalForwardedProps: R,
    ownerState: T
  });
  return /* @__PURE__ */ _(ee, {
    ...te,
    children: [x || B ? /* @__PURE__ */ b(ye, {
      className: P.iconContainer,
      ownerState: T,
      children: /* @__PURE__ */ b(B, {
        completed: m,
        active: h,
        error: i,
        icon: x,
        ...ne
      })
    }) : null, /* @__PURE__ */ _(Ce, {
      className: P.labelContainer,
      ownerState: T,
      children: [a ? /* @__PURE__ */ b(oe, {
        ...k,
        className: I(P.label, k == null ? void 0 : k.className),
        children: a
      }) : null, f]
    })]
  });
});
N.env.NODE_ENV !== "production" && (Y.propTypes = {
  // ┌────────────────────────────── Warning ──────────────────────────────┐
  // │ These PropTypes are generated from the TypeScript type definitions. │
  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
  // └─────────────────────────────────────────────────────────────────────┘
  /**
   * In most cases will simply be a string containing a title for the label.
   */
  children: e.node,
  /**
   * Override or extend the styles applied to the component.
   */
  classes: e.object,
  /**
   * @ignore
   */
  className: e.string,
  /**
   * The props used for each slot inside.
   * @default {}
   * @deprecated use the `slotProps` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
   */
  componentsProps: e.shape({
    label: e.object
  }),
  /**
   * If `true`, the step is marked as failed.
   * @default false
   */
  error: e.bool,
  /**
   * Override the default label of the step icon.
   */
  icon: e.node,
  /**
   * The optional node to display.
   */
  optional: e.node,
  /**
   * The props used for each slot inside.
   * @default {}
   */
  slotProps: e.shape({
    label: e.oneOfType([e.func, e.object]),
    root: e.oneOfType([e.func, e.object]),
    stepIcon: e.oneOfType([e.func, e.object])
  }),
  /**
   * The components used for each slot inside.
   * @default {}
   */
  slots: e.shape({
    label: e.elementType,
    root: e.elementType,
    stepIcon: e.elementType
  }),
  /**
   * The component to render in place of the [`StepIcon`](https://mui.com/material-ui/api/step-icon/).
   * @deprecated Use `slots.stepIcon` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
   */
  StepIconComponent: e.elementType,
  /**
   * Props applied to the [`StepIcon`](https://mui.com/material-ui/api/step-icon/) element.
   * @deprecated Use `slotProps.stepIcon` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
   */
  StepIconProps: e.object,
  /**
   * The system prop that allows defining system overrides as well as additional CSS styles.
   */
  sx: e.oneOfType([e.arrayOf(e.oneOfType([e.func, e.object, e.bool])), e.func, e.object])
});
Y.muiName = "StepLabel";
function Le(t) {
  return j("MuiStepConnector", t);
}
$("MuiStepConnector", ["root", "horizontal", "vertical", "alternativeLabel", "active", "completed", "disabled", "line", "lineHorizontal", "lineVertical"]);
const xe = (t) => {
  const {
    classes: o,
    orientation: n,
    alternativeLabel: r,
    active: a,
    completed: l,
    disabled: p
  } = t, i = {
    root: ["root", n, r && "alternativeLabel", a && "active", l && "completed", p && "disabled"],
    line: ["line", `line${q(n)}`]
  };
  return E(i, Le, o);
}, ge = S("div", {
  name: "MuiStepConnector",
  slot: "Root",
  overridesResolver: (t, o) => {
    const {
      ownerState: n
    } = t;
    return [o.root, o[n.orientation], n.alternativeLabel && o.alternativeLabel, n.completed && o.completed];
  }
})({
  flex: "1 1 auto",
  variants: [{
    props: {
      orientation: "vertical"
    },
    style: {
      marginLeft: 12
      // half icon
    }
  }, {
    props: {
      alternativeLabel: !0
    },
    style: {
      position: "absolute",
      top: 12,
      left: "calc(-50% + 20px)",
      right: "calc(50% + 20px)"
    }
  }]
}), he = S("span", {
  name: "MuiStepConnector",
  slot: "Line",
  overridesResolver: (t, o) => {
    const {
      ownerState: n
    } = t;
    return [o.line, o[`line${q(n.orientation)}`]];
  }
})(D(({
  theme: t
}) => {
  const o = t.palette.mode === "light" ? t.palette.grey[400] : t.palette.grey[600];
  return {
    display: "block",
    borderColor: t.vars ? t.vars.palette.StepConnector.border : o,
    variants: [{
      props: {
        orientation: "horizontal"
      },
      style: {
        borderTopStyle: "solid",
        borderTopWidth: 1
      }
    }, {
      props: {
        orientation: "vertical"
      },
      style: {
        borderLeftStyle: "solid",
        borderLeftWidth: 1,
        minHeight: 24
      }
    }]
  };
})), Z = /* @__PURE__ */ c.forwardRef(function(o, n) {
  const r = z({
    props: o,
    name: "MuiStepConnector"
  }), {
    className: a,
    ...l
  } = r, {
    alternativeLabel: p,
    orientation: i = "horizontal"
  } = c.useContext(U), {
    active: u,
    disabled: f,
    completed: d
  } = c.useContext(A), s = {
    ...r,
    alternativeLabel: p,
    orientation: i,
    active: u,
    completed: d,
    disabled: f
  }, v = xe(s);
  return /* @__PURE__ */ b(ge, {
    className: I(v.root, a),
    ref: n,
    ownerState: s,
    ...l,
    children: /* @__PURE__ */ b(he, {
      className: v.line,
      ownerState: s
    })
  });
});
N.env.NODE_ENV !== "production" && (Z.propTypes = {
  // ┌────────────────────────────── Warning ──────────────────────────────┐
  // │ These PropTypes are generated from the TypeScript type definitions. │
  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
  // └─────────────────────────────────────────────────────────────────────┘
  /**
   * Override or extend the styles applied to the component.
   */
  classes: e.object,
  /**
   * @ignore
   */
  className: e.string,
  /**
   * The system prop that allows defining system overrides as well as additional CSS styles.
   */
  sx: e.oneOfType([e.arrayOf(e.oneOfType([e.func, e.object, e.bool])), e.func, e.object])
});
function Te(t) {
  return j("MuiStepContent", t);
}
$("MuiStepContent", ["root", "last", "transition"]);
const Ne = (t) => {
  const {
    classes: o,
    last: n
  } = t;
  return E({
    root: ["root", n && "last"],
    transition: ["transition"]
  }, Te, o);
}, we = S("div", {
  name: "MuiStepContent",
  slot: "Root",
  overridesResolver: (t, o) => {
    const {
      ownerState: n
    } = t;
    return [o.root, n.last && o.last];
  }
})(D(({
  theme: t
}) => ({
  marginLeft: 12,
  // half icon
  paddingLeft: 20,
  // margin + half icon
  paddingRight: 8,
  borderLeft: t.vars ? `1px solid ${t.vars.palette.StepContent.border}` : `1px solid ${t.palette.mode === "light" ? t.palette.grey[400] : t.palette.grey[600]}`,
  variants: [{
    props: {
      last: !0
    },
    style: {
      borderLeft: "none"
    }
  }]
}))), Me = S(K, {
  name: "MuiStepContent",
  slot: "Transition"
})({}), Oe = /* @__PURE__ */ c.forwardRef(function(o, n) {
  const r = z({
    props: o,
    name: "MuiStepContent"
  }), {
    children: a,
    className: l,
    TransitionComponent: p = K,
    transitionDuration: i = "auto",
    TransitionProps: u,
    slots: f = {},
    slotProps: d = {},
    ...s
  } = r, {
    orientation: v
  } = c.useContext(U), {
    active: w,
    last: g,
    expanded: y
  } = c.useContext(A), C = {
    ...r,
    last: g
  }, h = Ne(C);
  N.env.NODE_ENV !== "production" && v !== "vertical" && console.error("MUI: <StepContent /> is only designed for use with the vertical stepper.");
  let L = i;
  i === "auto" && !p.muiSupportAuto && (L = void 0);
  const m = {
    slots: f,
    slotProps: {
      transition: u,
      ...d
    }
  }, [M, x] = F("transition", {
    elementType: Me,
    externalForwardedProps: m,
    ownerState: C,
    className: h.transition,
    additionalProps: {
      in: w || y,
      timeout: L,
      unmountOnExit: !0
    }
  });
  return /* @__PURE__ */ b(we, {
    className: I(h.root, l),
    ref: n,
    ownerState: C,
    ...s,
    children: /* @__PURE__ */ b(M, {
      as: p,
      ...x,
      children: a
    })
  });
});
N.env.NODE_ENV !== "production" && (Oe.propTypes = {
  // ┌────────────────────────────── Warning ──────────────────────────────┐
  // │ These PropTypes are generated from the TypeScript type definitions. │
  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
  // └─────────────────────────────────────────────────────────────────────┘
  /**
   * The content of the component.
   */
  children: e.node,
  /**
   * Override or extend the styles applied to the component.
   */
  classes: e.object,
  /**
   * @ignore
   */
  className: e.string,
  /**
   * The props used for each slot inside.
   * @default {}
   */
  slotProps: e.shape({
    transition: e.oneOfType([e.func, e.object])
  }),
  /**
   * The components used for each slot inside.
   * @default {}
   */
  slots: e.shape({
    transition: e.elementType
  }),
  /**
   * The system prop that allows defining system overrides as well as additional CSS styles.
   */
  sx: e.oneOfType([e.arrayOf(e.oneOfType([e.func, e.object, e.bool])), e.func, e.object]),
  /**
   * The component used for the transition.
   * [Follow this guide](https://mui.com/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
   * @default Collapse
   * @deprecated Use `slots.transition` instead. This prop will be removed in a future major release. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
   */
  TransitionComponent: e.elementType,
  /**
   * Adjust the duration of the content expand transition.
   * Passed as a prop to the transition component.
   *
   * Set to 'auto' to automatically calculate transition time based on height.
   * @default 'auto'
   */
  transitionDuration: e.oneOfType([e.oneOf(["auto"]), e.number, e.shape({
    appear: e.number,
    enter: e.number,
    exit: e.number
  })]),
  /**
   * Props applied to the transition element.
   * By default, the element is based on this [`Transition`](https://reactcommunity.org/react-transition-group/transition/) component.
   * @deprecated Use `slotProps.transition` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
   */
  TransitionProps: e.object
});
function Ie(t) {
  return j("MuiStepper", t);
}
$("MuiStepper", ["root", "horizontal", "vertical", "nonLinear", "alternativeLabel"]);
const Pe = (t) => {
  const {
    orientation: o,
    nonLinear: n,
    alternativeLabel: r,
    classes: a
  } = t;
  return E({
    root: ["root", o, n && "nonLinear", r && "alternativeLabel"]
  }, Ie, a);
}, Re = S("div", {
  name: "MuiStepper",
  slot: "Root",
  overridesResolver: (t, o) => {
    const {
      ownerState: n
    } = t;
    return [o.root, o[n.orientation], n.alternativeLabel && o.alternativeLabel, n.nonLinear && o.nonLinear];
  }
})({
  display: "flex",
  variants: [{
    props: {
      orientation: "horizontal"
    },
    style: {
      flexDirection: "row",
      alignItems: "center"
    }
  }, {
    props: {
      orientation: "vertical"
    },
    style: {
      flexDirection: "column"
    }
  }, {
    props: {
      alternativeLabel: !0
    },
    style: {
      alignItems: "flex-start"
    }
  }]
}), je = /* @__PURE__ */ b(Z, {}), $e = /* @__PURE__ */ c.forwardRef(function(o, n) {
  const r = z({
    props: o,
    name: "MuiStepper"
  }), {
    activeStep: a = 0,
    alternativeLabel: l = !1,
    children: p,
    className: i,
    component: u = "div",
    connector: f = je,
    nonLinear: d = !1,
    orientation: s = "horizontal",
    ...v
  } = r, w = {
    ...r,
    nonLinear: d,
    alternativeLabel: l,
    orientation: s,
    component: u
  }, g = Pe(w), y = c.Children.toArray(p).filter(Boolean), C = y.map((L, m) => /* @__PURE__ */ c.cloneElement(L, {
    index: m,
    last: m + 1 === y.length,
    ...L.props
  })), h = c.useMemo(() => ({
    activeStep: a,
    alternativeLabel: l,
    connector: f,
    nonLinear: d,
    orientation: s
  }), [a, l, f, d, s]);
  return /* @__PURE__ */ b(U.Provider, {
    value: h,
    children: /* @__PURE__ */ b(Re, {
      as: u,
      ownerState: w,
      className: I(g.root, i),
      ref: n,
      ...v,
      children: C
    })
  });
});
N.env.NODE_ENV !== "production" && ($e.propTypes = {
  // ┌────────────────────────────── Warning ──────────────────────────────┐
  // │ These PropTypes are generated from the TypeScript type definitions. │
  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
  // └─────────────────────────────────────────────────────────────────────┘
  /**
   * Set the active step (zero based index).
   * Set to -1 to disable all the steps.
   * @default 0
   */
  activeStep: J,
  /**
   * If set to 'true' and orientation is horizontal,
   * then the step label will be positioned under the icon.
   * @default false
   */
  alternativeLabel: e.bool,
  /**
   * Two or more `<Step />` components.
   */
  children: e.node,
  /**
   * Override or extend the styles applied to the component.
   */
  classes: e.object,
  /**
   * @ignore
   */
  className: e.string,
  /**
   * The component used for the root node.
   * Either a string to use a HTML element or a component.
   */
  component: e.elementType,
  /**
   * An element to be placed between each step.
   * @default <StepConnector />
   */
  connector: e.element,
  /**
   * If set the `Stepper` will not assist in controlling steps for linear flow.
   * @default false
   */
  nonLinear: e.bool,
  /**
   * The component orientation (layout flow direction).
   * @default 'horizontal'
   */
  orientation: e.oneOf(["horizontal", "vertical"]),
  /**
   * The system prop that allows defining system overrides as well as additional CSS styles.
   */
  sx: e.oneOfType([e.arrayOf(e.oneOfType([e.func, e.object, e.bool])), e.func, e.object])
});
export {
  $e as S,
  ie as a,
  Y as b,
  Oe as c
};
//# sourceMappingURL=Stepper-C7kahSTG.js.map