@elliemae/ds-wizard 3.21.2 → 3.22.0-next.1

package/dist/cjs/WizardStep.js

@@ -35,58 +35,45 @@ module.exports = __toCommonJS(WizardStep_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
-var import_ds_classnames = require("@elliemae/ds-classnames");
-var import_ds_utilities = require("@elliemae/ds-utilities");
 var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
-var import_ds_icons = require("@elliemae/ds-icons");
-var import_blockNames = require("./blockNames.js");
-const Item = (0, import_ds_classnames.aggregatedClasses)("div")(`${import_blockNames.indicatorItemBlockName}`, null, ({ active, completed }) => ({
-  active,
-  completed
-}));
-const Wrapper = (0, import_ds_classnames.aggregatedClasses)("div")(`${import_blockNames.indicatorItemBlockName}-wrapper`);
-const Label = (0, import_ds_classnames.aggregatedClasses)("span")(import_blockNames.indicatorItemBlockName, "label");
-const Bullet = (0, import_ds_classnames.aggregatedClasses)("div")(import_blockNames.indicatorItemBlockName, "bullet");
-const BulletWrapper = (0, import_ds_classnames.aggregatedClasses)("div")(import_blockNames.indicatorItemBlockName, "bullet-wrapper");
-const WizardStep = ({
-  label = "",
-  icon = null,
-  iconCompleted = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.Checkmark, {}),
-  iconActive = null,
-  active = false,
-  completed = false,
-  index = 0
-}) => {
+var import_react_desc_prop_types = require("./react-desc-prop-types.js");
+var import_styled = require("./styled.js");
+const WizardStep = (props) => {
+  const { label, icon, iconCompleted, iconActive, active, completed, index } = (0, import_ds_props_helpers.useMemoMergePropsWithDefault)(
+    props,
+    import_react_desc_prop_types.defaultStepProps
+  );
   const currentIcon = (0, import_react.useMemo)(() => {
-    if (active)
+    if (active && iconActive)
       return iconActive;
-    if (completed)
+    if (completed && iconCompleted)
       return iconCompleted;
     return icon;
-  }, [active, completed, icon, iconActive, iconCompleted]) || icon;
+  }, [active, completed, icon, iconActive, iconCompleted]);
   const iconWithOptions = (0, import_react.useMemo)(
     () => (0, import_react.isValidElement)(currentIcon) ? (0, import_react.cloneElement)(currentIcon, {
-      color: (0, import_ds_utilities.get)(currentIcon, ["props", "color"]) || ["brand-primary", completed ? 600 : 500]
+      color: currentIcon?.props?.color ?? [
+        "brand-primary",
+        completed ? "600" : "500"
+      ]
     }) : currentIcon || index + 1,
     [completed, currentIcon, index]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Item, { classProps: { active, completed }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Wrapper, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BulletWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Bullet, { children: iconWithOptions }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Label, { children: label })
+  const itemClassName = (0, import_react.useMemo)(() => {
+    let className = "em-ds-wizard-steps-indicator-step em-ds-wizard-steps-indicator-step--default";
+    if (active)
+      className += " em-ds-wizard-steps-indicator-step--active";
+    if (completed)
+      className += " em-ds-wizard-steps-indicator-step--completed";
+    return className;
+  }, [active, completed]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledItem, { className: itemClassName, active, completed, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styled.StyledWrapper, { className: "em-ds-wizard-steps-indicator-step-wrapper", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledBulletWrapper, { className: "em-ds-wizard-steps-indicator-step__bullet-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledBullet, { className: "em-ds-wizard-steps-indicator-step__bullet", children: iconWithOptions }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledLabel, { className: "em-ds-wizard-steps-indicator-step__label", children: label })
   ] }) });
 };
-const wizzardStepProps = {
-  label: import_ds_props_helpers.PropTypes.string.description("Step label"),
-  icon: import_ds_props_helpers.PropTypes.oneOfType([import_ds_props_helpers.PropTypes.element, import_ds_props_helpers.PropTypes.string]).description("Default icon or number"),
-  iconCompleted: import_ds_props_helpers.PropTypes.element.description("Icon when the step is completed").defaultValue(import_ds_icons.Checkmark),
-  iconActive: import_ds_props_helpers.PropTypes.element.description("Icon when the step is active"),
-  active: import_ds_props_helpers.PropTypes.bool.description("Whether the step is active or not").defaultValue(false),
-  completed: import_ds_props_helpers.PropTypes.bool.description("Whether the step is completed or not").defaultValue(false),
-  index: import_ds_props_helpers.PropTypes.number.description("Current item index")
-};
-WizardStep.propTypes = wizzardStepProps;
 WizardStep.displayName = "WizardStep";
 const WizzardStepWithSchema = (0, import_ds_props_helpers.describe)(WizardStep);
-WizzardStepWithSchema.propTypes = wizzardStepProps;
+WizzardStepWithSchema.propTypes = import_react_desc_prop_types.DSWizardStepPropsTypesSchema;
 var WizardStep_default = WizardStep;
 //# sourceMappingURL=WizardStep.js.map

package/dist/cjs/WizardStep.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/WizardStep.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable indent */\nimport React, { cloneElement, useMemo, isValidElement } from 'react';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport { get } from '@elliemae/ds-utilities';\nimport { describe, PropTypes } from '@elliemae/ds-props-helpers';\nimport { Checkmark } from '@elliemae/ds-icons';\nimport { indicatorItemBlockName } from './blockNames.js';\n\nconst Item = aggregatedClasses('div')(`${indicatorItemBlockName}`, null, ({ active, completed }) => ({\n  active,\n  completed,\n}));\nconst Wrapper = aggregatedClasses('div')(`${indicatorItemBlockName}-wrapper`);\nconst Label = aggregatedClasses('span')(indicatorItemBlockName, 'label');\nconst Bullet = aggregatedClasses('div')(indicatorItemBlockName, 'bullet');\nconst BulletWrapper = aggregatedClasses('div')(indicatorItemBlockName, 'bullet-wrapper');\n\ninterface WizardStepProps {\n  label?: string;\n  icon?: React.ReactNode;\n  iconCompleted?: React.ReactNode;\n  iconActive?: React.ReactNode;\n  active?: boolean;\n  completed?: boolean;\n  index?: number;\n}\n\nconst WizardStep = ({\n  label = '',\n  icon = null,\n  iconCompleted = <Checkmark />,\n  iconActive = null,\n  active = false,\n  completed = false,\n  index = 0,\n}: WizardStepProps) => {\n  const currentIcon =\n    useMemo(() => {\n      if (active) return iconActive;\n      if (completed) return iconCompleted;\n      return icon;\n    }, [active, completed, icon, iconActive, iconCompleted]) || icon;\n\n  const iconWithOptions = useMemo(\n    () =>\n      isValidElement(currentIcon)\n        ? cloneElement(currentIcon, {\n            color: get(currentIcon, ['props', 'color']) || ['brand-primary', completed ? 600 : 500],\n          })\n        : currentIcon || index + 1,\n    [completed, currentIcon, index],\n  );\n\n  return (\n    <Item classProps={{ active, completed }}>\n      <Wrapper>\n        <BulletWrapper>\n          <Bullet>{iconWithOptions}</Bullet>\n        </BulletWrapper>\n        <Label>{label}</Label>\n      </Wrapper>\n    </Item>\n  );\n};\n\nconst wizzardStepProps = {\n  label: PropTypes.string.description('Step label'),\n  icon: PropTypes.oneOfType([PropTypes.element, PropTypes.string]).description('Default icon or number'),\n  iconCompleted: PropTypes.element.description('Icon when the step is completed').defaultValue(Checkmark),\n  iconActive: PropTypes.element.description('Icon when the step is active'),\n  active: PropTypes.bool.description('Whether the step is active or not').defaultValue(false),\n  completed: PropTypes.bool.description('Whether the step is completed or not').defaultValue(false),\n  index: PropTypes.number.description('Current item index'),\n};\n\nWizardStep.propTypes = wizzardStepProps;\nWizardStep.displayName = 'WizardStep';\nconst WizzardStepWithSchema = describe(WizardStep);\nWizzardStepWithSchema.propTypes = wizzardStepProps;\n\nexport { WizzardStepWithSchema };\nexport default WizardStep;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD8BL;AA7BlB,mBAA6D;AAC7D,2BAAkC;AAClC,0BAAoB;AACpB,8BAAoC;AACpC,sBAA0B;AAC1B,wBAAuC;AAEvC,MAAM,WAAO,wCAAkB,KAAK,EAAE,GAAG,4CAA0B,MAAM,CAAC,EAAE,QAAQ,UAAU,OAAO;AAAA,EACnG;AAAA,EACA;AACF,EAAE;AACF,MAAM,cAAU,wCAAkB,KAAK,EAAE,GAAG,kDAAgC;AAC5E,MAAM,YAAQ,wCAAkB,MAAM,EAAE,0CAAwB,OAAO;AACvE,MAAM,aAAS,wCAAkB,KAAK,EAAE,0CAAwB,QAAQ;AACxE,MAAM,oBAAgB,wCAAkB,KAAK,EAAE,0CAAwB,gBAAgB;AAYvF,MAAM,aAAa,CAAC;AAAA,EAClB,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,gBAAgB,4CAAC,6BAAU;AAAA,EAC3B,aAAa;AAAA,EACb,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,QAAQ;AACV,MAAuB;AACrB,QAAM,kBACJ,sBAAQ,MAAM;AACZ,QAAI;AAAQ,aAAO;AACnB,QAAI;AAAW,aAAO;AACtB,WAAO;AAAA,EACT,GAAG,CAAC,QAAQ,WAAW,MAAM,YAAY,aAAa,CAAC,KAAK;AAE9D,QAAM,sBAAkB;AAAA,IACtB,UACE,6BAAe,WAAW,QACtB,2BAAa,aAAa;AAAA,MACxB,WAAO,yBAAI,aAAa,CAAC,SAAS,OAAO,CAAC,KAAK,CAAC,iBAAiB,YAAY,MAAM,GAAG;AAAA,IACxF,CAAC,IACD,eAAe,QAAQ;AAAA,IAC7B,CAAC,WAAW,aAAa,KAAK;AAAA,EAChC;AAEA,SACE,4CAAC,QAAK,YAAY,EAAE,QAAQ,UAAU,GACpC,uDAAC,WACC;AAAA,gDAAC,iBACC,sDAAC,UAAQ,2BAAgB,GAC3B;AAAA,IACA,4CAAC,SAAO,iBAAM;AAAA,KAChB,GACF;AAEJ;AAEA,MAAM,mBAAmB;AAAA,EACvB,OAAO,kCAAU,OAAO,YAAY,YAAY;AAAA,EAChD,MAAM,kCAAU,UAAU,CAAC,kCAAU,SAAS,kCAAU,MAAM,CAAC,EAAE,YAAY,wBAAwB;AAAA,EACrG,eAAe,kCAAU,QAAQ,YAAY,iCAAiC,EAAE,aAAa,yBAAS;AAAA,EACtG,YAAY,kCAAU,QAAQ,YAAY,8BAA8B;AAAA,EACxE,QAAQ,kCAAU,KAAK,YAAY,mCAAmC,EAAE,aAAa,KAAK;AAAA,EAC1F,WAAW,kCAAU,KAAK,YAAY,sCAAsC,EAAE,aAAa,KAAK;AAAA,EAChG,OAAO,kCAAU,OAAO,YAAY,oBAAoB;AAC1D;AAEA,WAAW,YAAY;AACvB,WAAW,cAAc;AACzB,MAAM,4BAAwB,kCAAS,UAAU;AACjD,sBAAsB,YAAY;AAGlC,IAAO,qBAAQ;",
+  "sourcesContent": ["import React, { cloneElement, useMemo, isValidElement } from 'react';\nimport { describe, useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport { DSWizardStepPropsTypesSchema, defaultStepProps, type DSWizardT } from './react-desc-prop-types.js';\nimport { StyledBullet, StyledBulletWrapper, StyledItem, StyledLabel, StyledWrapper } from './styled.js';\n\nconst WizardStep = (props: DSWizardT.StepProps) => {\n  const { label, icon, iconCompleted, iconActive, active, completed, index } = useMemoMergePropsWithDefault(\n    props,\n    defaultStepProps,\n  );\n\n  const currentIcon = useMemo(() => {\n    if (active && iconActive) return iconActive;\n    if (completed && iconCompleted) return iconCompleted;\n    return icon;\n  }, [active, completed, icon, iconActive, iconCompleted]);\n\n  const iconWithOptions = useMemo(\n    () =>\n      isValidElement<{ color: [string, string] }>(currentIcon)\n        ? cloneElement(currentIcon, {\n            color: ((currentIcon?.props as Record<string, unknown>)?.color as [string, string]) ?? [\n              'brand-primary',\n              completed ? '600' : '500',\n            ],\n          })\n        : currentIcon || index + 1,\n    [completed, currentIcon, index],\n  );\n\n  const itemClassName = useMemo(() => {\n    let className = 'em-ds-wizard-steps-indicator-step em-ds-wizard-steps-indicator-step--default';\n    if (active) className += ' em-ds-wizard-steps-indicator-step--active';\n    if (completed) className += ' em-ds-wizard-steps-indicator-step--completed';\n    return className;\n  }, [active, completed]);\n\n  return (\n    <StyledItem className={itemClassName} active={active} completed={completed}>\n      <StyledWrapper className=\"em-ds-wizard-steps-indicator-step-wrapper\">\n        <StyledBulletWrapper className=\"em-ds-wizard-steps-indicator-step__bullet-wrapper\">\n          <StyledBullet className=\"em-ds-wizard-steps-indicator-step__bullet\">{iconWithOptions}</StyledBullet>\n        </StyledBulletWrapper>\n        <StyledLabel className=\"em-ds-wizard-steps-indicator-step__label\">{label}</StyledLabel>\n      </StyledWrapper>\n    </StyledItem>\n  );\n};\n\nWizardStep.displayName = 'WizardStep';\nconst WizzardStepWithSchema = describe(WizardStep);\nWizzardStepWithSchema.propTypes = DSWizardStepPropsTypesSchema;\n\nexport { WizzardStepWithSchema };\nexport default WizardStep;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADuCjB;AAvCN,mBAA6D;AAC7D,8BAAuD;AACvD,mCAA+E;AAC/E,oBAA0F;AAE1F,MAAM,aAAa,CAAC,UAA+B;AACjD,QAAM,EAAE,OAAO,MAAM,eAAe,YAAY,QAAQ,WAAW,MAAM,QAAI;AAAA,IAC3E;AAAA,IACA;AAAA,EACF;AAEA,QAAM,kBAAc,sBAAQ,MAAM;AAChC,QAAI,UAAU;AAAY,aAAO;AACjC,QAAI,aAAa;AAAe,aAAO;AACvC,WAAO;AAAA,EACT,GAAG,CAAC,QAAQ,WAAW,MAAM,YAAY,aAAa,CAAC;AAEvD,QAAM,sBAAkB;AAAA,IACtB,UACE,6BAA4C,WAAW,QACnD,2BAAa,aAAa;AAAA,MACxB,OAAS,aAAa,OAAmC,SAA8B;AAAA,QACrF;AAAA,QACA,YAAY,QAAQ;AAAA,MACtB;AAAA,IACF,CAAC,IACD,eAAe,QAAQ;AAAA,IAC7B,CAAC,WAAW,aAAa,KAAK;AAAA,EAChC;AAEA,QAAM,oBAAgB,sBAAQ,MAAM;AAClC,QAAI,YAAY;AAChB,QAAI;AAAQ,mBAAa;AACzB,QAAI;AAAW,mBAAa;AAC5B,WAAO;AAAA,EACT,GAAG,CAAC,QAAQ,SAAS,CAAC;AAEtB,SACE,4CAAC,4BAAW,WAAW,eAAe,QAAgB,WACpD,uDAAC,+BAAc,WAAU,6CACvB;AAAA,gDAAC,qCAAoB,WAAU,qDAC7B,sDAAC,8BAAa,WAAU,6CAA6C,2BAAgB,GACvF;AAAA,IACA,4CAAC,6BAAY,WAAU,4CAA4C,iBAAM;AAAA,KAC3E,GACF;AAEJ;AAEA,WAAW,cAAc;AACzB,MAAM,4BAAwB,kCAAS,UAAU;AACjD,sBAAsB,YAAY;AAGlC,IAAO,qBAAQ;",
   "names": []
 }

package/dist/cjs/WizardSteps.js

@@ -36,30 +36,31 @@ var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = __toESM(require("react"));
 var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
-var import_ds_classnames = require("@elliemae/ds-classnames");
 var import_WizardStep = __toESM(require("./WizardStep.js"));
-var import_blockNames = require("./blockNames.js");
-const StepsWrapper = (0, import_ds_classnames.aggregatedClasses)("div")(import_blockNames.indicatorBlockName);
-const WizardSteps = ({ current = 0, steps, children, ...otherProps }) => {
+var import_react_desc_prop_types = require("./react-desc-prop-types.js");
+var import_styled = require("./styled.js");
+const WizardSteps = (props) => {
+  const propsWithDefault = (0, import_ds_props_helpers.useMemoMergePropsWithDefault)(props, import_react_desc_prop_types.defaultProps);
+  const xstyledProps = (0, import_ds_props_helpers.useGetXstyledProps)(propsWithDefault);
+  const globalAttributes = (0, import_ds_props_helpers.useGetGlobalAttributes)(propsWithDefault);
+  const { children, steps, current } = propsWithDefault;
   const items = (0, import_react.useMemo)(() => {
-    const mergeStepProps = (step, index) => ({
+    const mergeStepProps = (index) => ({
       index,
       active: current === index,
       completed: index < current
     });
-    return steps ? steps.map((step, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_WizardStep.default, { ...step, ...mergeStepProps(step, index) }, index)) : import_react.default.Children.map(children, (item, index) => (0, import_react.cloneElement)(item, mergeStepProps(item, index)));
+    return steps ? steps.map((step, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_WizardStep.default, { ...step, ...mergeStepProps(index) }, index)) : import_react.default.Children.map(children, (item, index) => {
+      if (item === void 0)
+        return null;
+      return (0, import_react.cloneElement)(item, mergeStepProps(index));
+    });
   }, [current, children, steps]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StepsWrapper, { ...otherProps, children: items });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledStepsWrapper, { className: "em-ds-wizard-steps-indicator", ...xstyledProps, ...globalAttributes, children: items });
 };
 WizardSteps.Item = import_WizardStep.default;
-const wizzardProps = {
-  current: import_ds_props_helpers.PropTypes.number.description("Current active state index").defaultValue(0),
-  steps: import_ds_props_helpers.PropTypes.arrayOf(import_ds_props_helpers.PropTypes.shape({})).description("Array of steps objects").defaultValue([]).isRequired,
-  children: import_ds_props_helpers.PropTypes.arrayOf(import_ds_props_helpers.PropTypes.instanceOf(import_WizardStep.default)).description("List of WizardStep components")
-};
-WizardSteps.propTypes = wizzardProps;
 WizardSteps.displayName = "WizardSteps";
 const WizzardWithSchema = (0, import_ds_props_helpers.describe)(WizardSteps);
-WizzardWithSchema.propTypes = wizzardProps;
+WizzardWithSchema.propTypes = import_react_desc_prop_types.DSWizardPropTypesSchema;
 var WizardSteps_default = WizardSteps;
 //# sourceMappingURL=WizardSteps.js.map

package/dist/cjs/WizardSteps.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/WizardSteps.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable indent */\n/* eslint-disable react/no-array-index-key */\nimport React, { cloneElement, useMemo } from 'react';\nimport { describe, PropTypes } from '@elliemae/ds-props-helpers';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport WizardStep from './WizardStep.js';\nimport { indicatorBlockName } from './blockNames.js';\n\nconst StepsWrapper = aggregatedClasses('div')(indicatorBlockName);\n\nconst WizardSteps = ({ current = 0, steps, children, ...otherProps }) => {\n  const items = useMemo(() => {\n    const mergeStepProps = (step, index) => ({\n      index,\n      active: current === index,\n      completed: index < current,\n    });\n\n    return steps\n      ? steps.map((step, index) => <WizardStep key={index} {...step} {...mergeStepProps(step, index)} />)\n      : React.Children.map(children, (item, index) => cloneElement(item, mergeStepProps(item, index)));\n  }, [current, children, steps]);\n\n  return <StepsWrapper {...otherProps}>{items}</StepsWrapper>;\n};\n\nWizardSteps.Item = WizardStep;\n\nconst wizzardProps = {\n  current: PropTypes.number.description('Current active state index').defaultValue(0),\n  steps: PropTypes.arrayOf(PropTypes.shape({})).description('Array of steps objects').defaultValue([]).isRequired,\n  children: PropTypes.arrayOf(PropTypes.instanceOf(WizardStep)).description('List of WizardStep components'),\n};\n\nWizardSteps.propTypes = wizzardProps;\nWizardSteps.displayName = 'WizardSteps';\nconst WizzardWithSchema = describe(WizardSteps);\nWizzardWithSchema.propTypes = wizzardProps;\n\nexport { WizzardWithSchema };\nexport default WizardSteps;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADmBY;AAjBnC,mBAA6C;AAC7C,8BAAoC;AACpC,2BAAkC;AAClC,wBAAuB;AACvB,wBAAmC;AAEnC,MAAM,mBAAe,wCAAkB,KAAK,EAAE,oCAAkB;AAEhE,MAAM,cAAc,CAAC,EAAE,UAAU,GAAG,OAAO,UAAU,GAAG,WAAW,MAAM;AACvE,QAAM,YAAQ,sBAAQ,MAAM;AAC1B,UAAM,iBAAiB,CAAC,MAAM,WAAW;AAAA,MACvC;AAAA,MACA,QAAQ,YAAY;AAAA,MACpB,WAAW,QAAQ;AAAA,IACrB;AAEA,WAAO,QACH,MAAM,IAAI,CAAC,MAAM,UAAU,4CAAC,kBAAAA,SAAA,EAAwB,GAAG,MAAO,GAAG,eAAe,MAAM,KAAK,KAA/C,KAAkD,CAAE,IAChG,aAAAC,QAAM,SAAS,IAAI,UAAU,CAAC,MAAM,cAAU,2BAAa,MAAM,eAAe,MAAM,KAAK,CAAC,CAAC;AAAA,EACnG,GAAG,CAAC,SAAS,UAAU,KAAK,CAAC;AAE7B,SAAO,4CAAC,gBAAc,GAAG,YAAa,iBAAM;AAC9C;AAEA,YAAY,OAAO,kBAAAD;AAEnB,MAAM,eAAe;AAAA,EACnB,SAAS,kCAAU,OAAO,YAAY,4BAA4B,EAAE,aAAa,CAAC;AAAA,EAClF,OAAO,kCAAU,QAAQ,kCAAU,MAAM,CAAC,CAAC,CAAC,EAAE,YAAY,wBAAwB,EAAE,aAAa,CAAC,CAAC,EAAE;AAAA,EACrG,UAAU,kCAAU,QAAQ,kCAAU,WAAW,kBAAAA,OAAU,CAAC,EAAE,YAAY,+BAA+B;AAC3G;AAEA,YAAY,YAAY;AACxB,YAAY,cAAc;AAC1B,MAAM,wBAAoB,kCAAS,WAAW;AAC9C,kBAAkB,YAAY;AAG9B,IAAO,sBAAQ;",
+  "sourcesContent": ["import React, { cloneElement, useMemo } from 'react';\nimport {\n  describe,\n  useGetGlobalAttributes,\n  useGetXstyledProps,\n  useMemoMergePropsWithDefault,\n} from '@elliemae/ds-props-helpers';\nimport WizardStep from './WizardStep.js';\nimport { DSWizardPropTypesSchema, defaultProps, type DSWizardT } from './react-desc-prop-types.js';\nimport { StyledStepsWrapper } from './styled.js';\n\nconst WizardSteps = (props: DSWizardT.Props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault<DSWizardT.InternalProps>(props, defaultProps);\n\n  const xstyledProps = useGetXstyledProps(propsWithDefault);\n\n  const globalAttributes = useGetGlobalAttributes(propsWithDefault);\n\n  const { children, steps, current } = propsWithDefault;\n\n  const items = useMemo(() => {\n    const mergeStepProps = (index: number) => ({\n      index,\n      active: current === index,\n      completed: index < current,\n    });\n\n    return steps\n      ? steps.map((step, index) => <WizardStep key={index} {...step} {...mergeStepProps(index)} />)\n      : React.Children.map(children, (item, index) => {\n          if (item === undefined) return null;\n          return cloneElement(item, mergeStepProps(index));\n        });\n  }, [current, children, steps]);\n\n  return (\n    <StyledStepsWrapper className=\"em-ds-wizard-steps-indicator\" {...xstyledProps} {...globalAttributes}>\n      {items}\n    </StyledStepsWrapper>\n  );\n};\n\nWizardSteps.Item = WizardStep;\n\nWizardSteps.displayName = 'WizardSteps';\nconst WizzardWithSchema = describe(WizardSteps);\nWizzardWithSchema.propTypes = DSWizardPropTypesSchema;\n\nexport { WizzardWithSchema };\nexport default WizardSteps;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD4BY;AA5BnC,mBAA6C;AAC7C,8BAKO;AACP,wBAAuB;AACvB,mCAAsE;AACtE,oBAAmC;AAEnC,MAAM,cAAc,CAAC,UAA2B;AAC9C,QAAM,uBAAmB,sDAAsD,OAAO,yCAAY;AAElG,QAAM,mBAAe,4CAAmB,gBAAgB;AAExD,QAAM,uBAAmB,gDAAuB,gBAAgB;AAEhE,QAAM,EAAE,UAAU,OAAO,QAAQ,IAAI;AAErC,QAAM,YAAQ,sBAAQ,MAAM;AAC1B,UAAM,iBAAiB,CAAC,WAAmB;AAAA,MACzC;AAAA,MACA,QAAQ,YAAY;AAAA,MACpB,WAAW,QAAQ;AAAA,IACrB;AAEA,WAAO,QACH,MAAM,IAAI,CAAC,MAAM,UAAU,4CAAC,kBAAAA,SAAA,EAAwB,GAAG,MAAO,GAAG,eAAe,KAAK,KAAzC,KAA4C,CAAE,IAC1F,aAAAC,QAAM,SAAS,IAAI,UAAU,CAAC,MAAM,UAAU;AAC5C,UAAI,SAAS;AAAW,eAAO;AAC/B,iBAAO,2BAAa,MAAM,eAAe,KAAK,CAAC;AAAA,IACjD,CAAC;AAAA,EACP,GAAG,CAAC,SAAS,UAAU,KAAK,CAAC;AAE7B,SACE,4CAAC,oCAAmB,WAAU,gCAAgC,GAAG,cAAe,GAAG,kBAChF,iBACH;AAEJ;AAEA,YAAY,OAAO,kBAAAD;AAEnB,YAAY,cAAc;AAC1B,MAAM,wBAAoB,kCAAS,WAAW;AAC9C,kBAAkB,YAAY;AAG9B,IAAO,sBAAQ;",
   "names": ["WizardStep", "React"]
 }

package/dist/cjs/react-desc-prop-types.js

@@ -0,0 +1,73 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var react_desc_prop_types_exports = {};
+__export(react_desc_prop_types_exports, {
+  DSWizardPropTypes: () => DSWizardPropTypes,
+  DSWizardPropTypesSchema: () => DSWizardPropTypesSchema,
+  DSWizardStepPropsTypes: () => DSWizardStepPropsTypes,
+  DSWizardStepPropsTypesSchema: () => DSWizardStepPropsTypesSchema,
+  defaultProps: () => defaultProps,
+  defaultStepProps: () => defaultStepProps
+});
+module.exports = __toCommonJS(react_desc_prop_types_exports);
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
+var import_ds_icons = require("@elliemae/ds-icons");
+const defaultProps = {
+  current: 0
+};
+const defaultStepProps = {
+  label: "",
+  icon: null,
+  iconCompleted: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.Checkmark, {}),
+  iconActive: null,
+  active: false,
+  completed: false,
+  index: 0
+};
+const DSWizardPropTypes = {
+  ...import_ds_props_helpers.globalAttributesPropTypes,
+  ...import_ds_props_helpers.xstyledPropTypes,
+  current: import_ds_props_helpers.PropTypes.number.description("Current active state index").defaultValue(0),
+  steps: import_ds_props_helpers.PropTypes.arrayOf(import_ds_props_helpers.PropTypes.shape({})).description("Array of steps objects"),
+  children: import_ds_props_helpers.PropTypes.arrayOf(import_ds_props_helpers.PropTypes.node).description("List of WizardStep components")
+};
+const DSWizardPropTypesSchema = DSWizardPropTypes;
+const DSWizardStepPropsTypes = {
+  label: import_ds_props_helpers.PropTypes.string.description("Step label"),
+  icon: import_ds_props_helpers.PropTypes.oneOfType([import_ds_props_helpers.PropTypes.element, import_ds_props_helpers.PropTypes.string]).description("Default icon or number"),
+  iconCompleted: import_ds_props_helpers.PropTypes.element.description("Icon when the step is completed").defaultValue("Checkmark"),
+  iconActive: import_ds_props_helpers.PropTypes.element.description("Icon when the step is active"),
+  active: import_ds_props_helpers.PropTypes.bool.description("Whether the step is active or not").defaultValue(false),
+  completed: import_ds_props_helpers.PropTypes.bool.description("Whether the step is completed or not").defaultValue(false),
+  index: import_ds_props_helpers.PropTypes.number.description("Current item index")
+};
+const DSWizardStepPropsTypesSchema = DSWizardStepPropsTypes;
+//# sourceMappingURL=react-desc-prop-types.js.map

package/dist/cjs/react-desc-prop-types.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/react-desc-prop-types.tsx", "../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-empty-interface */\nimport React from 'react';\nimport type { GlobalAttributesT, XstyledProps, DSPropTypesSchema } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport { Checkmark } from '@elliemae/ds-icons';\nimport type { WeakValidationMap } from 'react';\n\nexport declare namespace DSWizardT {\n  export interface WizardStep {\n    content: React.ComponentType;\n  }\n\n  export interface RequiredProps {}\n\n  export interface DefaultProps {\n    current: number;\n  }\n\n  export interface OptionalProps {\n    steps?: WizardStep[];\n    children?: React.ReactElement[];\n  }\n\n  export interface Props\n    extends Partial<DefaultProps>,\n      OptionalProps,\n      Omit<\n        GlobalAttributesT<HTMLDivElement>,\n        keyof DefaultProps | keyof OptionalProps | keyof RequiredProps | keyof XstyledProps\n      >,\n      XstyledProps,\n      RequiredProps {}\n\n  export interface InternalProps\n    extends DefaultProps,\n      OptionalProps,\n      Omit<\n        GlobalAttributesT<HTMLDivElement>,\n        keyof DefaultProps | keyof OptionalProps | keyof RequiredProps | keyof XstyledProps\n      >,\n      XstyledProps,\n      RequiredProps {}\n\n  export interface StepProps {\n    label?: string;\n    icon?: React.ReactNode;\n    iconCompleted?: React.ReactNode;\n    iconActive?: React.ReactNode;\n    active?: boolean;\n    completed?: boolean;\n    index?: number;\n  }\n}\n\nexport const defaultProps: DSWizardT.DefaultProps = {\n  current: 0,\n};\n\nexport const defaultStepProps: Required<DSWizardT.StepProps> = {\n  label: '',\n  icon: null,\n  iconCompleted: <Checkmark />,\n  iconActive: null,\n  active: false,\n  completed: false,\n  index: 0,\n};\n\nexport const DSWizardPropTypes: DSPropTypesSchema<DSWizardT.Props> = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  current: PropTypes.number.description('Current active state index').defaultValue(0),\n  steps: PropTypes.arrayOf(PropTypes.shape({})).description('Array of steps objects'),\n  children: PropTypes.arrayOf(PropTypes.node).description('List of WizardStep components'),\n};\n\nexport const DSWizardPropTypesSchema = DSWizardPropTypes as unknown as WeakValidationMap<DSWizardT.Props>;\n\nexport const DSWizardStepPropsTypes = {\n  label: PropTypes.string.description('Step label'),\n  icon: PropTypes.oneOfType([PropTypes.element, PropTypes.string]).description('Default icon or number'),\n  iconCompleted: PropTypes.element.description('Icon when the step is completed').defaultValue('Checkmark'),\n  iconActive: PropTypes.element.description('Icon when the step is active'),\n  active: PropTypes.bool.description('Whether the step is active or not').defaultValue(false),\n  completed: PropTypes.bool.description('Whether the step is completed or not').defaultValue(false),\n  index: PropTypes.number.description('Current item index'),\n};\n\nexport const DSWizardStepPropsTypesSchema = DSWizardStepPropsTypes as unknown as WeakValidationMap<DSWizardT.StepProps>;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD6DN;AA1DjB,8BAAuE;AACvE,sBAA0B;AAkDnB,MAAM,eAAuC;AAAA,EAClD,SAAS;AACX;AAEO,MAAM,mBAAkD;AAAA,EAC7D,OAAO;AAAA,EACP,MAAM;AAAA,EACN,eAAe,4CAAC,6BAAU;AAAA,EAC1B,YAAY;AAAA,EACZ,QAAQ;AAAA,EACR,WAAW;AAAA,EACX,OAAO;AACT;AAEO,MAAM,oBAAwD;AAAA,EACnE,GAAG;AAAA,EACH,GAAG;AAAA,EACH,SAAS,kCAAU,OAAO,YAAY,4BAA4B,EAAE,aAAa,CAAC;AAAA,EAClF,OAAO,kCAAU,QAAQ,kCAAU,MAAM,CAAC,CAAC,CAAC,EAAE,YAAY,wBAAwB;AAAA,EAClF,UAAU,kCAAU,QAAQ,kCAAU,IAAI,EAAE,YAAY,+BAA+B;AACzF;AAEO,MAAM,0BAA0B;AAEhC,MAAM,yBAAyB;AAAA,EACpC,OAAO,kCAAU,OAAO,YAAY,YAAY;AAAA,EAChD,MAAM,kCAAU,UAAU,CAAC,kCAAU,SAAS,kCAAU,MAAM,CAAC,EAAE,YAAY,wBAAwB;AAAA,EACrG,eAAe,kCAAU,QAAQ,YAAY,iCAAiC,EAAE,aAAa,WAAW;AAAA,EACxG,YAAY,kCAAU,QAAQ,YAAY,8BAA8B;AAAA,EACxE,QAAQ,kCAAU,KAAK,YAAY,mCAAmC,EAAE,aAAa,KAAK;AAAA,EAC1F,WAAW,kCAAU,KAAK,YAAY,sCAAsC,EAAE,aAAa,KAAK;AAAA,EAChG,OAAO,kCAAU,OAAO,YAAY,oBAAoB;AAC1D;AAEO,MAAM,+BAA+B;",
+  "names": []
+}

package/dist/cjs/styled.js

@@ -0,0 +1,145 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var styled_exports = {};
+__export(styled_exports, {
+  StyledBullet: () => StyledBullet,
+  StyledBulletWrapper: () => StyledBulletWrapper,
+  StyledItem: () => StyledItem,
+  StyledLabel: () => StyledLabel,
+  StyledStepsWrapper: () => StyledStepsWrapper,
+  StyledWrapper: () => StyledWrapper
+});
+module.exports = __toCommonJS(styled_exports);
+var React = __toESM(require("react"));
+var import_ds_system = require("@elliemae/ds-system");
+const StyledWrapper = import_ds_system.styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+`;
+const StyledLabel = import_ds_system.styled.span`
+  font-size: 1.0769rem;
+  line-height: normal;
+  font-weight: 400;
+  color: neutral-500;
+  transition: all 200ms cubic-bezier(0.36, 0, 1, 1);
+  text-align: center;
+  width: 100%;
+  max-height: 36px;
+`;
+const StyledBulletWrapper = import_ds_system.styled.div`
+  display: flex;
+  justify-content: center;
+  position: relative;
+  width: 100%;
+`;
+const StyledBullet = import_ds_system.styled.div`
+  margin: space(xs);
+  width: 2.46154rem;
+  height: 2.46154rem;
+  border-radius: 50%;
+  font-size: font-size(600);
+  border: 1px solid #cbcfd7;
+  color: brand-600;
+  position: relative;
+  transition: all 200ms cubic-bezier(0.36, 0, 1, 1);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+const StyledItem = import_ds_system.styled.div`
+  display: flex;
+  justify-content: center;
+  flex: 1 1 0px;
+  min-width: 96px;
+  max-width: 144px;
+  margin: 0 8px;
+
+  &:not(:last-child) {
+    ${StyledBulletWrapper}::after {
+      margin: 0 5px;
+      position: absolute;
+      top: 50%;
+      left: calc(62%);
+      display: block;
+      width: 80%;
+      content: '';
+      transition: all 300ms cubic-bezier(0.36, 0, 1, 1);
+      height: 1px;
+      background-image: linear-gradient(to right, #cbcfd7 40%, rgba(255, 255, 255, 0) 0%);
+      background-position: top;
+      background-size: 3px 1px;
+      background-repeat: repeat-x;
+    }
+  }
+
+  ${({ active, theme }) => {
+  if (!active)
+    return "";
+  return `
+    ${StyledBullet} {
+      border-color: ${import_ds_system.th.color("brand-700")({ theme })};
+      color: ${import_ds_system.th.color("brand-700")({ theme })};
+      font-weight: bold;
+      border-width: 1.5px;
+    }
+    ${StyledLabel} {
+      color: ${import_ds_system.th.color("brand-700")({ theme })};
+      font-weight: bold;
+    }
+    `;
+}}
+
+  ${({ completed, theme }) => {
+  if (!completed)
+    return "";
+  return `
+      ${StyledBullet} {
+        border-color: ${import_ds_system.th.color("brand-600")({ theme })};
+      }
+      ${StyledLabel} {
+        color: ${import_ds_system.th.color("neutral-800")({ theme })};
+      }
+      &:not(:last-child) {
+        ${StyledBulletWrapper}::after {
+          background: ${import_ds_system.th.color("brand-700")({ theme })};
+          background-size: initial;
+        }
+      }
+    `;
+}}
+`;
+const StyledStepsWrapper = import_ds_system.styled.div`
+  display: flex;
+  justify-content: center;
+  overflow: hidden;
+  ${import_ds_system.xStyledCommonProps}
+`;
+//# sourceMappingURL=styled.js.map

package/dist/cjs/styled.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/styled.tsx", "../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import { styled, th, xStyledCommonProps } from '@elliemae/ds-system';\n\nexport const StyledWrapper = styled.div`\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  width: 100%;\n`;\nexport const StyledLabel = styled.span`\n  font-size: 1.0769rem;\n  line-height: normal;\n  font-weight: 400;\n  color: neutral-500;\n  transition: all 200ms cubic-bezier(0.36, 0, 1, 1);\n  text-align: center;\n  width: 100%;\n  max-height: 36px;\n`;\nexport const StyledBulletWrapper = styled.div`\n  display: flex;\n  justify-content: center;\n  position: relative;\n  width: 100%;\n`;\nexport const StyledBullet = styled.div`\n  margin: space(xs);\n  width: 2.46154rem;\n  height: 2.46154rem;\n  border-radius: 50%;\n  font-size: font-size(600);\n  border: 1px solid #cbcfd7;\n  color: brand-600;\n  position: relative;\n  transition: all 200ms cubic-bezier(0.36, 0, 1, 1);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n`;\nexport const StyledItem = styled.div<{ active: boolean; completed: boolean }>`\n  display: flex;\n  justify-content: center;\n  flex: 1 1 0px;\n  min-width: 96px;\n  max-width: 144px;\n  margin: 0 8px;\n\n  &:not(:last-child) {\n    ${StyledBulletWrapper}::after {\n      margin: 0 5px;\n      position: absolute;\n      top: 50%;\n      left: calc(62%);\n      display: block;\n      width: 80%;\n      content: '';\n      transition: all 300ms cubic-bezier(0.36, 0, 1, 1);\n      height: 1px;\n      background-image: linear-gradient(to right, #cbcfd7 40%, rgba(255, 255, 255, 0) 0%);\n      background-position: top;\n      background-size: 3px 1px;\n      background-repeat: repeat-x;\n    }\n  }\n\n  ${({ active, theme }) => {\n    if (!active) return '';\n    return `\n    ${StyledBullet} {\n      border-color: ${th.color('brand-700')({ theme })};\n      color: ${th.color('brand-700')({ theme })};\n      font-weight: bold;\n      border-width: 1.5px;\n    }\n    ${StyledLabel} {\n      color: ${th.color('brand-700')({ theme })};\n      font-weight: bold;\n    }\n    `;\n  }}\n\n  ${({ completed, theme }) => {\n    if (!completed) return '';\n    return `\n      ${StyledBullet} {\n        border-color: ${th.color('brand-600')({ theme })};\n      }\n      ${StyledLabel} {\n        color: ${th.color('neutral-800')({ theme })};\n      }\n      &:not(:last-child) {\n        ${StyledBulletWrapper}::after {\n          background: ${th.color('brand-700')({ theme })};\n          background-size: initial;\n        }\n      }\n    `;\n  }}\n`;\n\nexport const StyledStepsWrapper = styled.div`\n  display: flex;\n  justify-content: center;\n  overflow: hidden;\n  ${xStyledCommonProps}\n`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAA+C;AAExC,MAAM,gBAAgB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAM7B,MAAM,cAAc,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAU3B,MAAM,sBAAsB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAMnC,MAAM,eAAe,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAc5B,MAAM,aAAa,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAS3B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAiBF,CAAC,EAAE,QAAQ,MAAM,MAAM;AACvB,MAAI,CAAC;AAAQ,WAAO;AACpB,SAAO;AAAA,MACL;AAAA,sBACgB,oBAAG,MAAM,WAAW,EAAE,EAAE,MAAM,CAAC;AAAA,eACtC,oBAAG,MAAM,WAAW,EAAE,EAAE,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA,MAIxC;AAAA,eACS,oBAAG,MAAM,WAAW,EAAE,EAAE,MAAM,CAAC;AAAA;AAAA;AAAA;AAI5C;AAAA;AAAA,IAEE,CAAC,EAAE,WAAW,MAAM,MAAM;AAC1B,MAAI,CAAC;AAAW,WAAO;AACvB,SAAO;AAAA,QACH;AAAA,wBACgB,oBAAG,MAAM,WAAW,EAAE,EAAE,MAAM,CAAC;AAAA;AAAA,QAE/C;AAAA,iBACS,oBAAG,MAAM,aAAa,EAAE,EAAE,MAAM,CAAC;AAAA;AAAA;AAAA,UAGxC;AAAA,wBACc,oBAAG,MAAM,WAAW,EAAE,EAAE,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA;AAKrD;AAAA;AAGK,MAAM,qBAAqB,wBAAO;AAAA;AAAA;AAAA;AAAA,IAIrC;AAAA;",
+  "names": []
+}

package/dist/cjs/useWizard.js

@@ -33,10 +33,9 @@ __export(useWizard_exports, {
 module.exports = __toCommonJS(useWizard_exports);
 var React = __toESM(require("react"));
 var import_react = require("react");
-var import_ds_utilities = require("@elliemae/ds-utilities");
 const checkCanNext = (prevIndex, array) => array.length > prevIndex + 1;
 const checkCanPrevious = (prevIndex) => prevIndex - 1 >= 0;
-const noop = (currentStep) => null;
+const noop = () => null;
 function useWizard({
   steps: wizardSteps,
   current,
@@ -67,7 +66,7 @@ function useWizard({
     previous: handlePrevious,
     canNext: checkCanNext(currentStep, wizardSteps),
     canPrevious: checkCanPrevious(currentStep),
-    WizardCurrentContent: (0, import_ds_utilities.get)(wizardSteps, [currentStep, "content"], () => null)
+    WizardCurrentContent: wizardSteps[currentStep]?.content
   };
 }
 //# sourceMappingURL=useWizard.js.map

package/dist/cjs/useWizard.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/useWizard.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { useEffect, useCallback, useState } from 'react';\nimport { get, useDerivedStateFromProps } from '@elliemae/ds-utilities';\n\nconst checkCanNext = (prevIndex: number, array: any[]): boolean => array.length > prevIndex + 1;\nconst checkCanPrevious = (prevIndex: number): boolean => prevIndex - 1 >= 0;\n\nconst noop = (currentStep: number) => null;\n\ninterface WizardConfig {\n  steps: any[];\n  current?: number;\n  onNext?: (currentStep: number) => void;\n  onPrevious?: (currentStep: number) => void;\n  initial?: number;\n}\n\nexport default function useWizard({\n  steps: wizardSteps,\n  current,\n  onNext = noop,\n  onPrevious = noop,\n  initial = 0,\n}: WizardConfig) {\n  const [currentStep, setCurrentStep] = useState(initial);\n\n  useEffect(() => {\n    if (typeof current !== 'undefined') setCurrentStep(current);\n  }, [current]);\n\n  const handleNext = useCallback(() => {\n    if (checkCanNext(currentStep, wizardSteps)) {\n      onNext(currentStep);\n      setCurrentStep(currentStep + 1);\n    }\n  }, [currentStep, wizardSteps, onNext]);\n\n  const handlePrevious = useCallback(() => {\n    if (checkCanPrevious(currentStep)) {\n      onPrevious(currentStep);\n      setCurrentStep(currentStep - 1);\n    }\n  }, [currentStep, onPrevious]);\n\n  return {\n    current: currentStep,\n    next: handleNext,\n    previous: handlePrevious,\n    canNext: checkCanNext(currentStep, wizardSteps),\n    canPrevious: checkCanPrevious(currentStep),\n    WizardCurrentContent: get(wizardSteps, [currentStep, 'content'], () => null),\n  };\n}\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAiD;AACjD,0BAA8C;AAE9C,MAAM,eAAe,CAAC,WAAmB,UAA0B,MAAM,SAAS,YAAY;AAC9F,MAAM,mBAAmB,CAAC,cAA+B,YAAY,KAAK;AAE1E,MAAM,OAAO,CAAC,gBAAwB;AAUvB,SAAR,UAA2B;AAAA,EAChC,OAAO;AAAA,EACP;AAAA,EACA,SAAS;AAAA,EACT,aAAa;AAAA,EACb,UAAU;AACZ,GAAiB;AACf,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAS,OAAO;AAEtD,8BAAU,MAAM;AACd,QAAI,OAAO,YAAY;AAAa,qBAAe,OAAO;AAAA,EAC5D,GAAG,CAAC,OAAO,CAAC;AAEZ,QAAM,iBAAa,0BAAY,MAAM;AACnC,QAAI,aAAa,aAAa,WAAW,GAAG;AAC1C,aAAO,WAAW;AAClB,qBAAe,cAAc,CAAC;AAAA,IAChC;AAAA,EACF,GAAG,CAAC,aAAa,aAAa,MAAM,CAAC;AAErC,QAAM,qBAAiB,0BAAY,MAAM;AACvC,QAAI,iBAAiB,WAAW,GAAG;AACjC,iBAAW,WAAW;AACtB,qBAAe,cAAc,CAAC;AAAA,IAChC;AAAA,EACF,GAAG,CAAC,aAAa,UAAU,CAAC;AAE5B,SAAO;AAAA,IACL,SAAS;AAAA,IACT,MAAM;AAAA,IACN,UAAU;AAAA,IACV,SAAS,aAAa,aAAa,WAAW;AAAA,IAC9C,aAAa,iBAAiB,WAAW;AAAA,IACzC,0BAAsB,yBAAI,aAAa,CAAC,aAAa,SAAS,GAAG,MAAM,IAAI;AAAA,EAC7E;AACF;",
+  "sourcesContent": ["import { useEffect, useCallback, useState } from 'react';\nimport type { DSWizardT } from './react-desc-prop-types.js';\n\nconst checkCanNext = (prevIndex: number, array: DSWizardT.WizardStep[]): boolean => array.length > prevIndex + 1;\nconst checkCanPrevious = (prevIndex: number): boolean => prevIndex - 1 >= 0;\n\nconst noop = () => null;\n\ninterface WizardConfig<T extends DSWizardT.WizardStep> {\n  steps: T[];\n  current?: number;\n  onNext?: (currentStep: number) => void;\n  onPrevious?: (currentStep: number) => void;\n  initial?: number;\n}\n\nexport default function useWizard<T extends DSWizardT.WizardStep>({\n  steps: wizardSteps,\n  current,\n  onNext = noop,\n  onPrevious = noop,\n  initial = 0,\n}: WizardConfig<T>) {\n  const [currentStep, setCurrentStep] = useState(initial);\n\n  useEffect(() => {\n    if (typeof current !== 'undefined') setCurrentStep(current);\n  }, [current]);\n\n  const handleNext = useCallback(() => {\n    if (checkCanNext(currentStep, wizardSteps)) {\n      onNext(currentStep);\n      setCurrentStep(currentStep + 1);\n    }\n  }, [currentStep, wizardSteps, onNext]);\n\n  const handlePrevious = useCallback(() => {\n    if (checkCanPrevious(currentStep)) {\n      onPrevious(currentStep);\n      setCurrentStep(currentStep - 1);\n    }\n  }, [currentStep, onPrevious]);\n\n  return {\n    current: currentStep,\n    next: handleNext,\n    previous: handlePrevious,\n    canNext: checkCanNext(currentStep, wizardSteps),\n    canPrevious: checkCanPrevious(currentStep),\n    WizardCurrentContent: wizardSteps[currentStep]?.content,\n  };\n}\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAiD;AAGjD,MAAM,eAAe,CAAC,WAAmB,UAA2C,MAAM,SAAS,YAAY;AAC/G,MAAM,mBAAmB,CAAC,cAA+B,YAAY,KAAK;AAE1E,MAAM,OAAO,MAAM;AAUJ,SAAR,UAA2D;AAAA,EAChE,OAAO;AAAA,EACP;AAAA,EACA,SAAS;AAAA,EACT,aAAa;AAAA,EACb,UAAU;AACZ,GAAoB;AAClB,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAS,OAAO;AAEtD,8BAAU,MAAM;AACd,QAAI,OAAO,YAAY;AAAa,qBAAe,OAAO;AAAA,EAC5D,GAAG,CAAC,OAAO,CAAC;AAEZ,QAAM,iBAAa,0BAAY,MAAM;AACnC,QAAI,aAAa,aAAa,WAAW,GAAG;AAC1C,aAAO,WAAW;AAClB,qBAAe,cAAc,CAAC;AAAA,IAChC;AAAA,EACF,GAAG,CAAC,aAAa,aAAa,MAAM,CAAC;AAErC,QAAM,qBAAiB,0BAAY,MAAM;AACvC,QAAI,iBAAiB,WAAW,GAAG;AACjC,iBAAW,WAAW;AACtB,qBAAe,cAAc,CAAC;AAAA,IAChC;AAAA,EACF,GAAG,CAAC,aAAa,UAAU,CAAC;AAE5B,SAAO;AAAA,IACL,SAAS;AAAA,IACT,MAAM;AAAA,IACN,UAAU;AAAA,IACV,SAAS,aAAa,aAAa,WAAW;AAAA,IAC9C,aAAa,iBAAiB,WAAW;AAAA,IACzC,sBAAsB,YAAY,WAAW,GAAG;AAAA,EAClD;AACF;",
   "names": []
 }

package/dist/esm/WizardStep.js

@@ -1,59 +1,46 @@
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cloneElement, useMemo, isValidElement } from "react";
-import { aggregatedClasses } from "@elliemae/ds-classnames";
-import { get } from "@elliemae/ds-utilities";
-import { describe, PropTypes } from "@elliemae/ds-props-helpers";
-import { Checkmark } from "@elliemae/ds-icons";
-import { indicatorItemBlockName } from "./blockNames.js";
-const Item = aggregatedClasses("div")(`${indicatorItemBlockName}`, null, ({ active, completed }) => ({
-  active,
-  completed
-}));
-const Wrapper = aggregatedClasses("div")(`${indicatorItemBlockName}-wrapper`);
-const Label = aggregatedClasses("span")(indicatorItemBlockName, "label");
-const Bullet = aggregatedClasses("div")(indicatorItemBlockName, "bullet");
-const BulletWrapper = aggregatedClasses("div")(indicatorItemBlockName, "bullet-wrapper");
-const WizardStep = ({
-  label = "",
-  icon = null,
-  iconCompleted = /* @__PURE__ */ jsx(Checkmark, {}),
-  iconActive = null,
-  active = false,
-  completed = false,
-  index = 0
-}) => {
+import { describe, useMemoMergePropsWithDefault } from "@elliemae/ds-props-helpers";
+import { DSWizardStepPropsTypesSchema, defaultStepProps } from "./react-desc-prop-types.js";
+import { StyledBullet, StyledBulletWrapper, StyledItem, StyledLabel, StyledWrapper } from "./styled.js";
+const WizardStep = (props) => {
+  const { label, icon, iconCompleted, iconActive, active, completed, index } = useMemoMergePropsWithDefault(
+    props,
+    defaultStepProps
+  );
   const currentIcon = useMemo(() => {
-    if (active)
+    if (active && iconActive)
       return iconActive;
-    if (completed)
+    if (completed && iconCompleted)
       return iconCompleted;
     return icon;
-  }, [active, completed, icon, iconActive, iconCompleted]) || icon;
+  }, [active, completed, icon, iconActive, iconCompleted]);
   const iconWithOptions = useMemo(
     () => isValidElement(currentIcon) ? cloneElement(currentIcon, {
-      color: get(currentIcon, ["props", "color"]) || ["brand-primary", completed ? 600 : 500]
+      color: currentIcon?.props?.color ?? [
+        "brand-primary",
+        completed ? "600" : "500"
+      ]
     }) : currentIcon || index + 1,
     [completed, currentIcon, index]
   );
-  return /* @__PURE__ */ jsx(Item, { classProps: { active, completed }, children: /* @__PURE__ */ jsxs(Wrapper, { children: [
-    /* @__PURE__ */ jsx(BulletWrapper, { children: /* @__PURE__ */ jsx(Bullet, { children: iconWithOptions }) }),
-    /* @__PURE__ */ jsx(Label, { children: label })
+  const itemClassName = useMemo(() => {
+    let className = "em-ds-wizard-steps-indicator-step em-ds-wizard-steps-indicator-step--default";
+    if (active)
+      className += " em-ds-wizard-steps-indicator-step--active";
+    if (completed)
+      className += " em-ds-wizard-steps-indicator-step--completed";
+    return className;
+  }, [active, completed]);
+  return /* @__PURE__ */ jsx(StyledItem, { className: itemClassName, active, completed, children: /* @__PURE__ */ jsxs(StyledWrapper, { className: "em-ds-wizard-steps-indicator-step-wrapper", children: [
+    /* @__PURE__ */ jsx(StyledBulletWrapper, { className: "em-ds-wizard-steps-indicator-step__bullet-wrapper", children: /* @__PURE__ */ jsx(StyledBullet, { className: "em-ds-wizard-steps-indicator-step__bullet", children: iconWithOptions }) }),
+    /* @__PURE__ */ jsx(StyledLabel, { className: "em-ds-wizard-steps-indicator-step__label", children: label })
   ] }) });
 };
-const wizzardStepProps = {
-  label: PropTypes.string.description("Step label"),
-  icon: PropTypes.oneOfType([PropTypes.element, PropTypes.string]).description("Default icon or number"),
-  iconCompleted: PropTypes.element.description("Icon when the step is completed").defaultValue(Checkmark),
-  iconActive: PropTypes.element.description("Icon when the step is active"),
-  active: PropTypes.bool.description("Whether the step is active or not").defaultValue(false),
-  completed: PropTypes.bool.description("Whether the step is completed or not").defaultValue(false),
-  index: PropTypes.number.description("Current item index")
-};
-WizardStep.propTypes = wizzardStepProps;
 WizardStep.displayName = "WizardStep";
 const WizzardStepWithSchema = describe(WizardStep);
-WizzardStepWithSchema.propTypes = wizzardStepProps;
+WizzardStepWithSchema.propTypes = DSWizardStepPropsTypesSchema;
 var WizardStep_default = WizardStep;
 export {
   WizzardStepWithSchema,

package/dist/esm/WizardStep.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/WizardStep.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable indent */\nimport React, { cloneElement, useMemo, isValidElement } from 'react';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport { get } from '@elliemae/ds-utilities';\nimport { describe, PropTypes } from '@elliemae/ds-props-helpers';\nimport { Checkmark } from '@elliemae/ds-icons';\nimport { indicatorItemBlockName } from './blockNames.js';\n\nconst Item = aggregatedClasses('div')(`${indicatorItemBlockName}`, null, ({ active, completed }) => ({\n  active,\n  completed,\n}));\nconst Wrapper = aggregatedClasses('div')(`${indicatorItemBlockName}-wrapper`);\nconst Label = aggregatedClasses('span')(indicatorItemBlockName, 'label');\nconst Bullet = aggregatedClasses('div')(indicatorItemBlockName, 'bullet');\nconst BulletWrapper = aggregatedClasses('div')(indicatorItemBlockName, 'bullet-wrapper');\n\ninterface WizardStepProps {\n  label?: string;\n  icon?: React.ReactNode;\n  iconCompleted?: React.ReactNode;\n  iconActive?: React.ReactNode;\n  active?: boolean;\n  completed?: boolean;\n  index?: number;\n}\n\nconst WizardStep = ({\n  label = '',\n  icon = null,\n  iconCompleted = <Checkmark />,\n  iconActive = null,\n  active = false,\n  completed = false,\n  index = 0,\n}: WizardStepProps) => {\n  const currentIcon =\n    useMemo(() => {\n      if (active) return iconActive;\n      if (completed) return iconCompleted;\n      return icon;\n    }, [active, completed, icon, iconActive, iconCompleted]) || icon;\n\n  const iconWithOptions = useMemo(\n    () =>\n      isValidElement(currentIcon)\n        ? cloneElement(currentIcon, {\n            color: get(currentIcon, ['props', 'color']) || ['brand-primary', completed ? 600 : 500],\n          })\n        : currentIcon || index + 1,\n    [completed, currentIcon, index],\n  );\n\n  return (\n    <Item classProps={{ active, completed }}>\n      <Wrapper>\n        <BulletWrapper>\n          <Bullet>{iconWithOptions}</Bullet>\n        </BulletWrapper>\n        <Label>{label}</Label>\n      </Wrapper>\n    </Item>\n  );\n};\n\nconst wizzardStepProps = {\n  label: PropTypes.string.description('Step label'),\n  icon: PropTypes.oneOfType([PropTypes.element, PropTypes.string]).description('Default icon or number'),\n  iconCompleted: PropTypes.element.description('Icon when the step is completed').defaultValue(Checkmark),\n  iconActive: PropTypes.element.description('Icon when the step is active'),\n  active: PropTypes.bool.description('Whether the step is active or not').defaultValue(false),\n  completed: PropTypes.bool.description('Whether the step is completed or not').defaultValue(false),\n  index: PropTypes.number.description('Current item index'),\n};\n\nWizardStep.propTypes = wizzardStepProps;\nWizardStep.displayName = 'WizardStep';\nconst WizzardStepWithSchema = describe(WizardStep);\nWizzardStepWithSchema.propTypes = wizzardStepProps;\n\nexport { WizzardStepWithSchema };\nexport default WizardStep;\n"],
-  "mappings": "AAAA,YAAY,WAAW;AC8BL,cAyBZ,YAzBY;AA7BlB,SAAgB,cAAc,SAAS,sBAAsB;AAC7D,SAAS,yBAAyB;AAClC,SAAS,WAAW;AACpB,SAAS,UAAU,iBAAiB;AACpC,SAAS,iBAAiB;AAC1B,SAAS,8BAA8B;AAEvC,MAAM,OAAO,kBAAkB,KAAK,EAAE,GAAG,0BAA0B,MAAM,CAAC,EAAE,QAAQ,UAAU,OAAO;AAAA,EACnG;AAAA,EACA;AACF,EAAE;AACF,MAAM,UAAU,kBAAkB,KAAK,EAAE,GAAG,gCAAgC;AAC5E,MAAM,QAAQ,kBAAkB,MAAM,EAAE,wBAAwB,OAAO;AACvE,MAAM,SAAS,kBAAkB,KAAK,EAAE,wBAAwB,QAAQ;AACxE,MAAM,gBAAgB,kBAAkB,KAAK,EAAE,wBAAwB,gBAAgB;AAYvF,MAAM,aAAa,CAAC;AAAA,EAClB,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,gBAAgB,oBAAC,aAAU;AAAA,EAC3B,aAAa;AAAA,EACb,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,QAAQ;AACV,MAAuB;AACrB,QAAM,cACJ,QAAQ,MAAM;AACZ,QAAI;AAAQ,aAAO;AACnB,QAAI;AAAW,aAAO;AACtB,WAAO;AAAA,EACT,GAAG,CAAC,QAAQ,WAAW,MAAM,YAAY,aAAa,CAAC,KAAK;AAE9D,QAAM,kBAAkB;AAAA,IACtB,MACE,eAAe,WAAW,IACtB,aAAa,aAAa;AAAA,MACxB,OAAO,IAAI,aAAa,CAAC,SAAS,OAAO,CAAC,KAAK,CAAC,iBAAiB,YAAY,MAAM,GAAG;AAAA,IACxF,CAAC,IACD,eAAe,QAAQ;AAAA,IAC7B,CAAC,WAAW,aAAa,KAAK;AAAA,EAChC;AAEA,SACE,oBAAC,QAAK,YAAY,EAAE,QAAQ,UAAU,GACpC,+BAAC,WACC;AAAA,wBAAC,iBACC,8BAAC,UAAQ,2BAAgB,GAC3B;AAAA,IACA,oBAAC,SAAO,iBAAM;AAAA,KAChB,GACF;AAEJ;AAEA,MAAM,mBAAmB;AAAA,EACvB,OAAO,UAAU,OAAO,YAAY,YAAY;AAAA,EAChD,MAAM,UAAU,UAAU,CAAC,UAAU,SAAS,UAAU,MAAM,CAAC,EAAE,YAAY,wBAAwB;AAAA,EACrG,eAAe,UAAU,QAAQ,YAAY,iCAAiC,EAAE,aAAa,SAAS;AAAA,EACtG,YAAY,UAAU,QAAQ,YAAY,8BAA8B;AAAA,EACxE,QAAQ,UAAU,KAAK,YAAY,mCAAmC,EAAE,aAAa,KAAK;AAAA,EAC1F,WAAW,UAAU,KAAK,YAAY,sCAAsC,EAAE,aAAa,KAAK;AAAA,EAChG,OAAO,UAAU,OAAO,YAAY,oBAAoB;AAC1D;AAEA,WAAW,YAAY;AACvB,WAAW,cAAc;AACzB,MAAM,wBAAwB,SAAS,UAAU;AACjD,sBAAsB,YAAY;AAGlC,IAAO,qBAAQ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { cloneElement, useMemo, isValidElement } from 'react';\nimport { describe, useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport { DSWizardStepPropsTypesSchema, defaultStepProps, type DSWizardT } from './react-desc-prop-types.js';\nimport { StyledBullet, StyledBulletWrapper, StyledItem, StyledLabel, StyledWrapper } from './styled.js';\n\nconst WizardStep = (props: DSWizardT.StepProps) => {\n  const { label, icon, iconCompleted, iconActive, active, completed, index } = useMemoMergePropsWithDefault(\n    props,\n    defaultStepProps,\n  );\n\n  const currentIcon = useMemo(() => {\n    if (active && iconActive) return iconActive;\n    if (completed && iconCompleted) return iconCompleted;\n    return icon;\n  }, [active, completed, icon, iconActive, iconCompleted]);\n\n  const iconWithOptions = useMemo(\n    () =>\n      isValidElement<{ color: [string, string] }>(currentIcon)\n        ? cloneElement(currentIcon, {\n            color: ((currentIcon?.props as Record<string, unknown>)?.color as [string, string]) ?? [\n              'brand-primary',\n              completed ? '600' : '500',\n            ],\n          })\n        : currentIcon || index + 1,\n    [completed, currentIcon, index],\n  );\n\n  const itemClassName = useMemo(() => {\n    let className = 'em-ds-wizard-steps-indicator-step em-ds-wizard-steps-indicator-step--default';\n    if (active) className += ' em-ds-wizard-steps-indicator-step--active';\n    if (completed) className += ' em-ds-wizard-steps-indicator-step--completed';\n    return className;\n  }, [active, completed]);\n\n  return (\n    <StyledItem className={itemClassName} active={active} completed={completed}>\n      <StyledWrapper className=\"em-ds-wizard-steps-indicator-step-wrapper\">\n        <StyledBulletWrapper className=\"em-ds-wizard-steps-indicator-step__bullet-wrapper\">\n          <StyledBullet className=\"em-ds-wizard-steps-indicator-step__bullet\">{iconWithOptions}</StyledBullet>\n        </StyledBulletWrapper>\n        <StyledLabel className=\"em-ds-wizard-steps-indicator-step__label\">{label}</StyledLabel>\n      </StyledWrapper>\n    </StyledItem>\n  );\n};\n\nWizardStep.displayName = 'WizardStep';\nconst WizzardStepWithSchema = describe(WizardStep);\nWizzardStepWithSchema.propTypes = DSWizardStepPropsTypesSchema;\n\nexport { WizzardStepWithSchema };\nexport default WizardStep;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACuCjB,SAEI,KAFJ;AAvCN,SAAgB,cAAc,SAAS,sBAAsB;AAC7D,SAAS,UAAU,oCAAoC;AACvD,SAAS,8BAA8B,wBAAwC;AAC/E,SAAS,cAAc,qBAAqB,YAAY,aAAa,qBAAqB;AAE1F,MAAM,aAAa,CAAC,UAA+B;AACjD,QAAM,EAAE,OAAO,MAAM,eAAe,YAAY,QAAQ,WAAW,MAAM,IAAI;AAAA,IAC3E;AAAA,IACA;AAAA,EACF;AAEA,QAAM,cAAc,QAAQ,MAAM;AAChC,QAAI,UAAU;AAAY,aAAO;AACjC,QAAI,aAAa;AAAe,aAAO;AACvC,WAAO;AAAA,EACT,GAAG,CAAC,QAAQ,WAAW,MAAM,YAAY,aAAa,CAAC;AAEvD,QAAM,kBAAkB;AAAA,IACtB,MACE,eAA4C,WAAW,IACnD,aAAa,aAAa;AAAA,MACxB,OAAS,aAAa,OAAmC,SAA8B;AAAA,QACrF;AAAA,QACA,YAAY,QAAQ;AAAA,MACtB;AAAA,IACF,CAAC,IACD,eAAe,QAAQ;AAAA,IAC7B,CAAC,WAAW,aAAa,KAAK;AAAA,EAChC;AAEA,QAAM,gBAAgB,QAAQ,MAAM;AAClC,QAAI,YAAY;AAChB,QAAI;AAAQ,mBAAa;AACzB,QAAI;AAAW,mBAAa;AAC5B,WAAO;AAAA,EACT,GAAG,CAAC,QAAQ,SAAS,CAAC;AAEtB,SACE,oBAAC,cAAW,WAAW,eAAe,QAAgB,WACpD,+BAAC,iBAAc,WAAU,6CACvB;AAAA,wBAAC,uBAAoB,WAAU,qDAC7B,8BAAC,gBAAa,WAAU,6CAA6C,2BAAgB,GACvF;AAAA,IACA,oBAAC,eAAY,WAAU,4CAA4C,iBAAM;AAAA,KAC3E,GACF;AAEJ;AAEA,WAAW,cAAc;AACzB,MAAM,wBAAwB,SAAS,UAAU;AACjD,sBAAsB,YAAY;AAGlC,IAAO,qBAAQ;",
   "names": []
 }

package/dist/esm/WizardSteps.js

@@ -1,32 +1,38 @@
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 import React2, { cloneElement, useMemo } from "react";
-import { describe, PropTypes } from "@elliemae/ds-props-helpers";
-import { aggregatedClasses } from "@elliemae/ds-classnames";
+import {
+  describe,
+  useGetGlobalAttributes,
+  useGetXstyledProps,
+  useMemoMergePropsWithDefault
+} from "@elliemae/ds-props-helpers";
 import WizardStep from "./WizardStep.js";
-import { indicatorBlockName } from "./blockNames.js";
-const StepsWrapper = aggregatedClasses("div")(indicatorBlockName);
-const WizardSteps = ({ current = 0, steps, children, ...otherProps }) => {
+import { DSWizardPropTypesSchema, defaultProps } from "./react-desc-prop-types.js";
+import { StyledStepsWrapper } from "./styled.js";
+const WizardSteps = (props) => {
+  const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);
+  const xstyledProps = useGetXstyledProps(propsWithDefault);
+  const globalAttributes = useGetGlobalAttributes(propsWithDefault);
+  const { children, steps, current } = propsWithDefault;
   const items = useMemo(() => {
-    const mergeStepProps = (step, index) => ({
+    const mergeStepProps = (index) => ({
       index,
       active: current === index,
       completed: index < current
     });
-    return steps ? steps.map((step, index) => /* @__PURE__ */ jsx(WizardStep, { ...step, ...mergeStepProps(step, index) }, index)) : React2.Children.map(children, (item, index) => cloneElement(item, mergeStepProps(item, index)));
+    return steps ? steps.map((step, index) => /* @__PURE__ */ jsx(WizardStep, { ...step, ...mergeStepProps(index) }, index)) : React2.Children.map(children, (item, index) => {
+      if (item === void 0)
+        return null;
+      return cloneElement(item, mergeStepProps(index));
+    });
   }, [current, children, steps]);
-  return /* @__PURE__ */ jsx(StepsWrapper, { ...otherProps, children: items });
+  return /* @__PURE__ */ jsx(StyledStepsWrapper, { className: "em-ds-wizard-steps-indicator", ...xstyledProps, ...globalAttributes, children: items });
 };
 WizardSteps.Item = WizardStep;
-const wizzardProps = {
-  current: PropTypes.number.description("Current active state index").defaultValue(0),
-  steps: PropTypes.arrayOf(PropTypes.shape({})).description("Array of steps objects").defaultValue([]).isRequired,
-  children: PropTypes.arrayOf(PropTypes.instanceOf(WizardStep)).description("List of WizardStep components")
-};
-WizardSteps.propTypes = wizzardProps;
 WizardSteps.displayName = "WizardSteps";
 const WizzardWithSchema = describe(WizardSteps);
-WizzardWithSchema.propTypes = wizzardProps;
+WizzardWithSchema.propTypes = DSWizardPropTypesSchema;
 var WizardSteps_default = WizardSteps;
 export {
   WizzardWithSchema,

package/dist/esm/WizardSteps.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/WizardSteps.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable indent */\n/* eslint-disable react/no-array-index-key */\nimport React, { cloneElement, useMemo } from 'react';\nimport { describe, PropTypes } from '@elliemae/ds-props-helpers';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport WizardStep from './WizardStep.js';\nimport { indicatorBlockName } from './blockNames.js';\n\nconst StepsWrapper = aggregatedClasses('div')(indicatorBlockName);\n\nconst WizardSteps = ({ current = 0, steps, children, ...otherProps }) => {\n  const items = useMemo(() => {\n    const mergeStepProps = (step, index) => ({\n      index,\n      active: current === index,\n      completed: index < current,\n    });\n\n    return steps\n      ? steps.map((step, index) => <WizardStep key={index} {...step} {...mergeStepProps(step, index)} />)\n      : React.Children.map(children, (item, index) => cloneElement(item, mergeStepProps(item, index)));\n  }, [current, children, steps]);\n\n  return <StepsWrapper {...otherProps}>{items}</StepsWrapper>;\n};\n\nWizardSteps.Item = WizardStep;\n\nconst wizzardProps = {\n  current: PropTypes.number.description('Current active state index').defaultValue(0),\n  steps: PropTypes.arrayOf(PropTypes.shape({})).description('Array of steps objects').defaultValue([]).isRequired,\n  children: PropTypes.arrayOf(PropTypes.instanceOf(WizardStep)).description('List of WizardStep components'),\n};\n\nWizardSteps.propTypes = wizzardProps;\nWizardSteps.displayName = 'WizardSteps';\nconst WizzardWithSchema = describe(WizardSteps);\nWizzardWithSchema.propTypes = wizzardProps;\n\nexport { WizzardWithSchema };\nexport default WizardSteps;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACmBY;AAjBnC,OAAOA,UAAS,cAAc,eAAe;AAC7C,SAAS,UAAU,iBAAiB;AACpC,SAAS,yBAAyB;AAClC,OAAO,gBAAgB;AACvB,SAAS,0BAA0B;AAEnC,MAAM,eAAe,kBAAkB,KAAK,EAAE,kBAAkB;AAEhE,MAAM,cAAc,CAAC,EAAE,UAAU,GAAG,OAAO,UAAU,GAAG,WAAW,MAAM;AACvE,QAAM,QAAQ,QAAQ,MAAM;AAC1B,UAAM,iBAAiB,CAAC,MAAM,WAAW;AAAA,MACvC;AAAA,MACA,QAAQ,YAAY;AAAA,MACpB,WAAW,QAAQ;AAAA,IACrB;AAEA,WAAO,QACH,MAAM,IAAI,CAAC,MAAM,UAAU,oBAAC,cAAwB,GAAG,MAAO,GAAG,eAAe,MAAM,KAAK,KAA/C,KAAkD,CAAE,IAChGA,OAAM,SAAS,IAAI,UAAU,CAAC,MAAM,UAAU,aAAa,MAAM,eAAe,MAAM,KAAK,CAAC,CAAC;AAAA,EACnG,GAAG,CAAC,SAAS,UAAU,KAAK,CAAC;AAE7B,SAAO,oBAAC,gBAAc,GAAG,YAAa,iBAAM;AAC9C;AAEA,YAAY,OAAO;AAEnB,MAAM,eAAe;AAAA,EACnB,SAAS,UAAU,OAAO,YAAY,4BAA4B,EAAE,aAAa,CAAC;AAAA,EAClF,OAAO,UAAU,QAAQ,UAAU,MAAM,CAAC,CAAC,CAAC,EAAE,YAAY,wBAAwB,EAAE,aAAa,CAAC,CAAC,EAAE;AAAA,EACrG,UAAU,UAAU,QAAQ,UAAU,WAAW,UAAU,CAAC,EAAE,YAAY,+BAA+B;AAC3G;AAEA,YAAY,YAAY;AACxB,YAAY,cAAc;AAC1B,MAAM,oBAAoB,SAAS,WAAW;AAC9C,kBAAkB,YAAY;AAG9B,IAAO,sBAAQ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { cloneElement, useMemo } from 'react';\nimport {\n  describe,\n  useGetGlobalAttributes,\n  useGetXstyledProps,\n  useMemoMergePropsWithDefault,\n} from '@elliemae/ds-props-helpers';\nimport WizardStep from './WizardStep.js';\nimport { DSWizardPropTypesSchema, defaultProps, type DSWizardT } from './react-desc-prop-types.js';\nimport { StyledStepsWrapper } from './styled.js';\n\nconst WizardSteps = (props: DSWizardT.Props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault<DSWizardT.InternalProps>(props, defaultProps);\n\n  const xstyledProps = useGetXstyledProps(propsWithDefault);\n\n  const globalAttributes = useGetGlobalAttributes(propsWithDefault);\n\n  const { children, steps, current } = propsWithDefault;\n\n  const items = useMemo(() => {\n    const mergeStepProps = (index: number) => ({\n      index,\n      active: current === index,\n      completed: index < current,\n    });\n\n    return steps\n      ? steps.map((step, index) => <WizardStep key={index} {...step} {...mergeStepProps(index)} />)\n      : React.Children.map(children, (item, index) => {\n          if (item === undefined) return null;\n          return cloneElement(item, mergeStepProps(index));\n        });\n  }, [current, children, steps]);\n\n  return (\n    <StyledStepsWrapper className=\"em-ds-wizard-steps-indicator\" {...xstyledProps} {...globalAttributes}>\n      {items}\n    </StyledStepsWrapper>\n  );\n};\n\nWizardSteps.Item = WizardStep;\n\nWizardSteps.displayName = 'WizardSteps';\nconst WizzardWithSchema = describe(WizardSteps);\nWizzardWithSchema.propTypes = DSWizardPropTypesSchema;\n\nexport { WizzardWithSchema };\nexport default WizardSteps;\n"],
+  "mappings": "AAAA,YAAY,WAAW;AC4BY;AA5BnC,OAAOA,UAAS,cAAc,eAAe;AAC7C;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,OAAO,gBAAgB;AACvB,SAAS,yBAAyB,oBAAoC;AACtE,SAAS,0BAA0B;AAEnC,MAAM,cAAc,CAAC,UAA2B;AAC9C,QAAM,mBAAmB,6BAAsD,OAAO,YAAY;AAElG,QAAM,eAAe,mBAAmB,gBAAgB;AAExD,QAAM,mBAAmB,uBAAuB,gBAAgB;AAEhE,QAAM,EAAE,UAAU,OAAO,QAAQ,IAAI;AAErC,QAAM,QAAQ,QAAQ,MAAM;AAC1B,UAAM,iBAAiB,CAAC,WAAmB;AAAA,MACzC;AAAA,MACA,QAAQ,YAAY;AAAA,MACpB,WAAW,QAAQ;AAAA,IACrB;AAEA,WAAO,QACH,MAAM,IAAI,CAAC,MAAM,UAAU,oBAAC,cAAwB,GAAG,MAAO,GAAG,eAAe,KAAK,KAAzC,KAA4C,CAAE,IAC1FA,OAAM,SAAS,IAAI,UAAU,CAAC,MAAM,UAAU;AAC5C,UAAI,SAAS;AAAW,eAAO;AAC/B,aAAO,aAAa,MAAM,eAAe,KAAK,CAAC;AAAA,IACjD,CAAC;AAAA,EACP,GAAG,CAAC,SAAS,UAAU,KAAK,CAAC;AAE7B,SACE,oBAAC,sBAAmB,WAAU,gCAAgC,GAAG,cAAe,GAAG,kBAChF,iBACH;AAEJ;AAEA,YAAY,OAAO;AAEnB,YAAY,cAAc;AAC1B,MAAM,oBAAoB,SAAS,WAAW;AAC9C,kBAAkB,YAAY;AAG9B,IAAO,sBAAQ;",
   "names": ["React"]
 }

package/dist/esm/react-desc-prop-types.js

@@ -0,0 +1,43 @@
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+import { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from "@elliemae/ds-props-helpers";
+import { Checkmark } from "@elliemae/ds-icons";
+const defaultProps = {
+  current: 0
+};
+const defaultStepProps = {
+  label: "",
+  icon: null,
+  iconCompleted: /* @__PURE__ */ jsx(Checkmark, {}),
+  iconActive: null,
+  active: false,
+  completed: false,
+  index: 0
+};
+const DSWizardPropTypes = {
+  ...globalAttributesPropTypes,
+  ...xstyledPropTypes,
+  current: PropTypes.number.description("Current active state index").defaultValue(0),
+  steps: PropTypes.arrayOf(PropTypes.shape({})).description("Array of steps objects"),
+  children: PropTypes.arrayOf(PropTypes.node).description("List of WizardStep components")
+};
+const DSWizardPropTypesSchema = DSWizardPropTypes;
+const DSWizardStepPropsTypes = {
+  label: PropTypes.string.description("Step label"),
+  icon: PropTypes.oneOfType([PropTypes.element, PropTypes.string]).description("Default icon or number"),
+  iconCompleted: PropTypes.element.description("Icon when the step is completed").defaultValue("Checkmark"),
+  iconActive: PropTypes.element.description("Icon when the step is active"),
+  active: PropTypes.bool.description("Whether the step is active or not").defaultValue(false),
+  completed: PropTypes.bool.description("Whether the step is completed or not").defaultValue(false),
+  index: PropTypes.number.description("Current item index")
+};
+const DSWizardStepPropsTypesSchema = DSWizardStepPropsTypes;
+export {
+  DSWizardPropTypes,
+  DSWizardPropTypesSchema,
+  DSWizardStepPropsTypes,
+  DSWizardStepPropsTypesSchema,
+  defaultProps,
+  defaultStepProps
+};
+//# sourceMappingURL=react-desc-prop-types.js.map

package/dist/esm/react-desc-prop-types.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-empty-interface */\nimport React from 'react';\nimport type { GlobalAttributesT, XstyledProps, DSPropTypesSchema } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport { Checkmark } from '@elliemae/ds-icons';\nimport type { WeakValidationMap } from 'react';\n\nexport declare namespace DSWizardT {\n  export interface WizardStep {\n    content: React.ComponentType;\n  }\n\n  export interface RequiredProps {}\n\n  export interface DefaultProps {\n    current: number;\n  }\n\n  export interface OptionalProps {\n    steps?: WizardStep[];\n    children?: React.ReactElement[];\n  }\n\n  export interface Props\n    extends Partial<DefaultProps>,\n      OptionalProps,\n      Omit<\n        GlobalAttributesT<HTMLDivElement>,\n        keyof DefaultProps | keyof OptionalProps | keyof RequiredProps | keyof XstyledProps\n      >,\n      XstyledProps,\n      RequiredProps {}\n\n  export interface InternalProps\n    extends DefaultProps,\n      OptionalProps,\n      Omit<\n        GlobalAttributesT<HTMLDivElement>,\n        keyof DefaultProps | keyof OptionalProps | keyof RequiredProps | keyof XstyledProps\n      >,\n      XstyledProps,\n      RequiredProps {}\n\n  export interface StepProps {\n    label?: string;\n    icon?: React.ReactNode;\n    iconCompleted?: React.ReactNode;\n    iconActive?: React.ReactNode;\n    active?: boolean;\n    completed?: boolean;\n    index?: number;\n  }\n}\n\nexport const defaultProps: DSWizardT.DefaultProps = {\n  current: 0,\n};\n\nexport const defaultStepProps: Required<DSWizardT.StepProps> = {\n  label: '',\n  icon: null,\n  iconCompleted: <Checkmark />,\n  iconActive: null,\n  active: false,\n  completed: false,\n  index: 0,\n};\n\nexport const DSWizardPropTypes: DSPropTypesSchema<DSWizardT.Props> = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  current: PropTypes.number.description('Current active state index').defaultValue(0),\n  steps: PropTypes.arrayOf(PropTypes.shape({})).description('Array of steps objects'),\n  children: PropTypes.arrayOf(PropTypes.node).description('List of WizardStep components'),\n};\n\nexport const DSWizardPropTypesSchema = DSWizardPropTypes as unknown as WeakValidationMap<DSWizardT.Props>;\n\nexport const DSWizardStepPropsTypes = {\n  label: PropTypes.string.description('Step label'),\n  icon: PropTypes.oneOfType([PropTypes.element, PropTypes.string]).description('Default icon or number'),\n  iconCompleted: PropTypes.element.description('Icon when the step is completed').defaultValue('Checkmark'),\n  iconActive: PropTypes.element.description('Icon when the step is active'),\n  active: PropTypes.bool.description('Whether the step is active or not').defaultValue(false),\n  completed: PropTypes.bool.description('Whether the step is completed or not').defaultValue(false),\n  index: PropTypes.number.description('Current item index'),\n};\n\nexport const DSWizardStepPropsTypesSchema = DSWizardStepPropsTypes as unknown as WeakValidationMap<DSWizardT.StepProps>;\n"],
+  "mappings": "AAAA,YAAY,WAAW;AC6DN;AA1DjB,SAAS,WAAW,2BAA2B,wBAAwB;AACvE,SAAS,iBAAiB;AAkDnB,MAAM,eAAuC;AAAA,EAClD,SAAS;AACX;AAEO,MAAM,mBAAkD;AAAA,EAC7D,OAAO;AAAA,EACP,MAAM;AAAA,EACN,eAAe,oBAAC,aAAU;AAAA,EAC1B,YAAY;AAAA,EACZ,QAAQ;AAAA,EACR,WAAW;AAAA,EACX,OAAO;AACT;AAEO,MAAM,oBAAwD;AAAA,EACnE,GAAG;AAAA,EACH,GAAG;AAAA,EACH,SAAS,UAAU,OAAO,YAAY,4BAA4B,EAAE,aAAa,CAAC;AAAA,EAClF,OAAO,UAAU,QAAQ,UAAU,MAAM,CAAC,CAAC,CAAC,EAAE,YAAY,wBAAwB;AAAA,EAClF,UAAU,UAAU,QAAQ,UAAU,IAAI,EAAE,YAAY,+BAA+B;AACzF;AAEO,MAAM,0BAA0B;AAEhC,MAAM,yBAAyB;AAAA,EACpC,OAAO,UAAU,OAAO,YAAY,YAAY;AAAA,EAChD,MAAM,UAAU,UAAU,CAAC,UAAU,SAAS,UAAU,MAAM,CAAC,EAAE,YAAY,wBAAwB;AAAA,EACrG,eAAe,UAAU,QAAQ,YAAY,iCAAiC,EAAE,aAAa,WAAW;AAAA,EACxG,YAAY,UAAU,QAAQ,YAAY,8BAA8B;AAAA,EACxE,QAAQ,UAAU,KAAK,YAAY,mCAAmC,EAAE,aAAa,KAAK;AAAA,EAC1F,WAAW,UAAU,KAAK,YAAY,sCAAsC,EAAE,aAAa,KAAK;AAAA,EAChG,OAAO,UAAU,OAAO,YAAY,oBAAoB;AAC1D;AAEO,MAAM,+BAA+B;",
+  "names": []
+}

package/dist/esm/styled.js

@@ -0,0 +1,115 @@
+import * as React from "react";
+import { styled, th, xStyledCommonProps } from "@elliemae/ds-system";
+const StyledWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+`;
+const StyledLabel = styled.span`
+  font-size: 1.0769rem;
+  line-height: normal;
+  font-weight: 400;
+  color: neutral-500;
+  transition: all 200ms cubic-bezier(0.36, 0, 1, 1);
+  text-align: center;
+  width: 100%;
+  max-height: 36px;
+`;
+const StyledBulletWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  position: relative;
+  width: 100%;
+`;
+const StyledBullet = styled.div`
+  margin: space(xs);
+  width: 2.46154rem;
+  height: 2.46154rem;
+  border-radius: 50%;
+  font-size: font-size(600);
+  border: 1px solid #cbcfd7;
+  color: brand-600;
+  position: relative;
+  transition: all 200ms cubic-bezier(0.36, 0, 1, 1);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+const StyledItem = styled.div`
+  display: flex;
+  justify-content: center;
+  flex: 1 1 0px;
+  min-width: 96px;
+  max-width: 144px;
+  margin: 0 8px;
+
+  &:not(:last-child) {
+    ${StyledBulletWrapper}::after {
+      margin: 0 5px;
+      position: absolute;
+      top: 50%;
+      left: calc(62%);
+      display: block;
+      width: 80%;
+      content: '';
+      transition: all 300ms cubic-bezier(0.36, 0, 1, 1);
+      height: 1px;
+      background-image: linear-gradient(to right, #cbcfd7 40%, rgba(255, 255, 255, 0) 0%);
+      background-position: top;
+      background-size: 3px 1px;
+      background-repeat: repeat-x;
+    }
+  }
+
+  ${({ active, theme }) => {
+  if (!active)
+    return "";
+  return `
+    ${StyledBullet} {
+      border-color: ${th.color("brand-700")({ theme })};
+      color: ${th.color("brand-700")({ theme })};
+      font-weight: bold;
+      border-width: 1.5px;
+    }
+    ${StyledLabel} {
+      color: ${th.color("brand-700")({ theme })};
+      font-weight: bold;
+    }
+    `;
+}}
+
+  ${({ completed, theme }) => {
+  if (!completed)
+    return "";
+  return `
+      ${StyledBullet} {
+        border-color: ${th.color("brand-600")({ theme })};
+      }
+      ${StyledLabel} {
+        color: ${th.color("neutral-800")({ theme })};
+      }
+      &:not(:last-child) {
+        ${StyledBulletWrapper}::after {
+          background: ${th.color("brand-700")({ theme })};
+          background-size: initial;
+        }
+      }
+    `;
+}}
+`;
+const StyledStepsWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  overflow: hidden;
+  ${xStyledCommonProps}
+`;
+export {
+  StyledBullet,
+  StyledBulletWrapper,
+  StyledItem,
+  StyledLabel,
+  StyledStepsWrapper,
+  StyledWrapper
+};
+//# sourceMappingURL=styled.js.map

package/dist/esm/styled.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/styled.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled, th, xStyledCommonProps } from '@elliemae/ds-system';\n\nexport const StyledWrapper = styled.div`\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  width: 100%;\n`;\nexport const StyledLabel = styled.span`\n  font-size: 1.0769rem;\n  line-height: normal;\n  font-weight: 400;\n  color: neutral-500;\n  transition: all 200ms cubic-bezier(0.36, 0, 1, 1);\n  text-align: center;\n  width: 100%;\n  max-height: 36px;\n`;\nexport const StyledBulletWrapper = styled.div`\n  display: flex;\n  justify-content: center;\n  position: relative;\n  width: 100%;\n`;\nexport const StyledBullet = styled.div`\n  margin: space(xs);\n  width: 2.46154rem;\n  height: 2.46154rem;\n  border-radius: 50%;\n  font-size: font-size(600);\n  border: 1px solid #cbcfd7;\n  color: brand-600;\n  position: relative;\n  transition: all 200ms cubic-bezier(0.36, 0, 1, 1);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n`;\nexport const StyledItem = styled.div<{ active: boolean; completed: boolean }>`\n  display: flex;\n  justify-content: center;\n  flex: 1 1 0px;\n  min-width: 96px;\n  max-width: 144px;\n  margin: 0 8px;\n\n  &:not(:last-child) {\n    ${StyledBulletWrapper}::after {\n      margin: 0 5px;\n      position: absolute;\n      top: 50%;\n      left: calc(62%);\n      display: block;\n      width: 80%;\n      content: '';\n      transition: all 300ms cubic-bezier(0.36, 0, 1, 1);\n      height: 1px;\n      background-image: linear-gradient(to right, #cbcfd7 40%, rgba(255, 255, 255, 0) 0%);\n      background-position: top;\n      background-size: 3px 1px;\n      background-repeat: repeat-x;\n    }\n  }\n\n  ${({ active, theme }) => {\n    if (!active) return '';\n    return `\n    ${StyledBullet} {\n      border-color: ${th.color('brand-700')({ theme })};\n      color: ${th.color('brand-700')({ theme })};\n      font-weight: bold;\n      border-width: 1.5px;\n    }\n    ${StyledLabel} {\n      color: ${th.color('brand-700')({ theme })};\n      font-weight: bold;\n    }\n    `;\n  }}\n\n  ${({ completed, theme }) => {\n    if (!completed) return '';\n    return `\n      ${StyledBullet} {\n        border-color: ${th.color('brand-600')({ theme })};\n      }\n      ${StyledLabel} {\n        color: ${th.color('neutral-800')({ theme })};\n      }\n      &:not(:last-child) {\n        ${StyledBulletWrapper}::after {\n          background: ${th.color('brand-700')({ theme })};\n          background-size: initial;\n        }\n      }\n    `;\n  }}\n`;\n\nexport const StyledStepsWrapper = styled.div`\n  display: flex;\n  justify-content: center;\n  overflow: hidden;\n  ${xStyledCommonProps}\n`;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,QAAQ,IAAI,0BAA0B;AAExC,MAAM,gBAAgB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAM7B,MAAM,cAAc,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAU3B,MAAM,sBAAsB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAMnC,MAAM,eAAe,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAc5B,MAAM,aAAa,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAS3B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAiBF,CAAC,EAAE,QAAQ,MAAM,MAAM;AACvB,MAAI,CAAC;AAAQ,WAAO;AACpB,SAAO;AAAA,MACL;AAAA,sBACgB,GAAG,MAAM,WAAW,EAAE,EAAE,MAAM,CAAC;AAAA,eACtC,GAAG,MAAM,WAAW,EAAE,EAAE,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA,MAIxC;AAAA,eACS,GAAG,MAAM,WAAW,EAAE,EAAE,MAAM,CAAC;AAAA;AAAA;AAAA;AAI5C;AAAA;AAAA,IAEE,CAAC,EAAE,WAAW,MAAM,MAAM;AAC1B,MAAI,CAAC;AAAW,WAAO;AACvB,SAAO;AAAA,QACH;AAAA,wBACgB,GAAG,MAAM,WAAW,EAAE,EAAE,MAAM,CAAC;AAAA;AAAA,QAE/C;AAAA,iBACS,GAAG,MAAM,aAAa,EAAE,EAAE,MAAM,CAAC;AAAA;AAAA;AAAA,UAGxC;AAAA,wBACc,GAAG,MAAM,WAAW,EAAE,EAAE,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA;AAKrD;AAAA;AAGK,MAAM,qBAAqB,OAAO;AAAA;AAAA;AAAA;AAAA,IAIrC;AAAA;",
+  "names": []
+}

package/dist/esm/useWizard.js

@@ -1,9 +1,8 @@
 import * as React from "react";
 import { useEffect, useCallback, useState } from "react";
-import { get } from "@elliemae/ds-utilities";
 const checkCanNext = (prevIndex, array) => array.length > prevIndex + 1;
 const checkCanPrevious = (prevIndex) => prevIndex - 1 >= 0;
-const noop = (currentStep) => null;
+const noop = () => null;
 function useWizard({
   steps: wizardSteps,
   current,
@@ -34,7 +33,7 @@ function useWizard({
     previous: handlePrevious,
     canNext: checkCanNext(currentStep, wizardSteps),
     canPrevious: checkCanPrevious(currentStep),
-    WizardCurrentContent: get(wizardSteps, [currentStep, "content"], () => null)
+    WizardCurrentContent: wizardSteps[currentStep]?.content
   };
 }
 export {

package/dist/esm/useWizard.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/useWizard.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useEffect, useCallback, useState } from 'react';\nimport { get, useDerivedStateFromProps } from '@elliemae/ds-utilities';\n\nconst checkCanNext = (prevIndex: number, array: any[]): boolean => array.length > prevIndex + 1;\nconst checkCanPrevious = (prevIndex: number): boolean => prevIndex - 1 >= 0;\n\nconst noop = (currentStep: number) => null;\n\ninterface WizardConfig {\n  steps: any[];\n  current?: number;\n  onNext?: (currentStep: number) => void;\n  onPrevious?: (currentStep: number) => void;\n  initial?: number;\n}\n\nexport default function useWizard({\n  steps: wizardSteps,\n  current,\n  onNext = noop,\n  onPrevious = noop,\n  initial = 0,\n}: WizardConfig) {\n  const [currentStep, setCurrentStep] = useState(initial);\n\n  useEffect(() => {\n    if (typeof current !== 'undefined') setCurrentStep(current);\n  }, [current]);\n\n  const handleNext = useCallback(() => {\n    if (checkCanNext(currentStep, wizardSteps)) {\n      onNext(currentStep);\n      setCurrentStep(currentStep + 1);\n    }\n  }, [currentStep, wizardSteps, onNext]);\n\n  const handlePrevious = useCallback(() => {\n    if (checkCanPrevious(currentStep)) {\n      onPrevious(currentStep);\n      setCurrentStep(currentStep - 1);\n    }\n  }, [currentStep, onPrevious]);\n\n  return {\n    current: currentStep,\n    next: handleNext,\n    previous: handlePrevious,\n    canNext: checkCanNext(currentStep, wizardSteps),\n    canPrevious: checkCanPrevious(currentStep),\n    WizardCurrentContent: get(wizardSteps, [currentStep, 'content'], () => null),\n  };\n}\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,WAAW,aAAa,gBAAgB;AACjD,SAAS,WAAqC;AAE9C,MAAM,eAAe,CAAC,WAAmB,UAA0B,MAAM,SAAS,YAAY;AAC9F,MAAM,mBAAmB,CAAC,cAA+B,YAAY,KAAK;AAE1E,MAAM,OAAO,CAAC,gBAAwB;AAUvB,SAAR,UAA2B;AAAA,EAChC,OAAO;AAAA,EACP;AAAA,EACA,SAAS;AAAA,EACT,aAAa;AAAA,EACb,UAAU;AACZ,GAAiB;AACf,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,OAAO;AAEtD,YAAU,MAAM;AACd,QAAI,OAAO,YAAY;AAAa,qBAAe,OAAO;AAAA,EAC5D,GAAG,CAAC,OAAO,CAAC;AAEZ,QAAM,aAAa,YAAY,MAAM;AACnC,QAAI,aAAa,aAAa,WAAW,GAAG;AAC1C,aAAO,WAAW;AAClB,qBAAe,cAAc,CAAC;AAAA,IAChC;AAAA,EACF,GAAG,CAAC,aAAa,aAAa,MAAM,CAAC;AAErC,QAAM,iBAAiB,YAAY,MAAM;AACvC,QAAI,iBAAiB,WAAW,GAAG;AACjC,iBAAW,WAAW;AACtB,qBAAe,cAAc,CAAC;AAAA,IAChC;AAAA,EACF,GAAG,CAAC,aAAa,UAAU,CAAC;AAE5B,SAAO;AAAA,IACL,SAAS;AAAA,IACT,MAAM;AAAA,IACN,UAAU;AAAA,IACV,SAAS,aAAa,aAAa,WAAW;AAAA,IAC9C,aAAa,iBAAiB,WAAW;AAAA,IACzC,sBAAsB,IAAI,aAAa,CAAC,aAAa,SAAS,GAAG,MAAM,IAAI;AAAA,EAC7E;AACF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useEffect, useCallback, useState } from 'react';\nimport type { DSWizardT } from './react-desc-prop-types.js';\n\nconst checkCanNext = (prevIndex: number, array: DSWizardT.WizardStep[]): boolean => array.length > prevIndex + 1;\nconst checkCanPrevious = (prevIndex: number): boolean => prevIndex - 1 >= 0;\n\nconst noop = () => null;\n\ninterface WizardConfig<T extends DSWizardT.WizardStep> {\n  steps: T[];\n  current?: number;\n  onNext?: (currentStep: number) => void;\n  onPrevious?: (currentStep: number) => void;\n  initial?: number;\n}\n\nexport default function useWizard<T extends DSWizardT.WizardStep>({\n  steps: wizardSteps,\n  current,\n  onNext = noop,\n  onPrevious = noop,\n  initial = 0,\n}: WizardConfig<T>) {\n  const [currentStep, setCurrentStep] = useState(initial);\n\n  useEffect(() => {\n    if (typeof current !== 'undefined') setCurrentStep(current);\n  }, [current]);\n\n  const handleNext = useCallback(() => {\n    if (checkCanNext(currentStep, wizardSteps)) {\n      onNext(currentStep);\n      setCurrentStep(currentStep + 1);\n    }\n  }, [currentStep, wizardSteps, onNext]);\n\n  const handlePrevious = useCallback(() => {\n    if (checkCanPrevious(currentStep)) {\n      onPrevious(currentStep);\n      setCurrentStep(currentStep - 1);\n    }\n  }, [currentStep, onPrevious]);\n\n  return {\n    current: currentStep,\n    next: handleNext,\n    previous: handlePrevious,\n    canNext: checkCanNext(currentStep, wizardSteps),\n    canPrevious: checkCanPrevious(currentStep),\n    WizardCurrentContent: wizardSteps[currentStep]?.content,\n  };\n}\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,WAAW,aAAa,gBAAgB;AAGjD,MAAM,eAAe,CAAC,WAAmB,UAA2C,MAAM,SAAS,YAAY;AAC/G,MAAM,mBAAmB,CAAC,cAA+B,YAAY,KAAK;AAE1E,MAAM,OAAO,MAAM;AAUJ,SAAR,UAA2D;AAAA,EAChE,OAAO;AAAA,EACP;AAAA,EACA,SAAS;AAAA,EACT,aAAa;AAAA,EACb,UAAU;AACZ,GAAoB;AAClB,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,OAAO;AAEtD,YAAU,MAAM;AACd,QAAI,OAAO,YAAY;AAAa,qBAAe,OAAO;AAAA,EAC5D,GAAG,CAAC,OAAO,CAAC;AAEZ,QAAM,aAAa,YAAY,MAAM;AACnC,QAAI,aAAa,aAAa,WAAW,GAAG;AAC1C,aAAO,WAAW;AAClB,qBAAe,cAAc,CAAC;AAAA,IAChC;AAAA,EACF,GAAG,CAAC,aAAa,aAAa,MAAM,CAAC;AAErC,QAAM,iBAAiB,YAAY,MAAM;AACvC,QAAI,iBAAiB,WAAW,GAAG;AACjC,iBAAW,WAAW;AACtB,qBAAe,cAAc,CAAC;AAAA,IAChC;AAAA,EACF,GAAG,CAAC,aAAa,UAAU,CAAC;AAE5B,SAAO;AAAA,IACL,SAAS;AAAA,IACT,MAAM;AAAA,IACN,UAAU;AAAA,IACV,SAAS,aAAa,aAAa,WAAW;AAAA,IAC9C,aAAa,iBAAiB,WAAW;AAAA,IACzC,sBAAsB,YAAY,WAAW,GAAG;AAAA,EAClD;AACF;",
   "names": []
 }

package/dist/types/WizardStep.d.ts

@@ -1,26 +1,8 @@
-import React from 'react';
-interface WizardStepProps {
-    label?: string;
-    icon?: React.ReactNode;
-    iconCompleted?: React.ReactNode;
-    iconActive?: React.ReactNode;
-    active?: boolean;
-    completed?: boolean;
-    index?: number;
-}
+import { type DSWizardT } from './react-desc-prop-types.js';
 declare const WizardStep: {
-    ({ label, icon, iconCompleted, iconActive, active, completed, index, }: WizardStepProps): import("react/jsx-runtime.js").JSX.Element;
-    propTypes: {
-        label: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
-        icon: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
-        iconCompleted: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
-        iconActive: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
-        active: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
-        completed: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
-        index: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").ReactDescT;
-    };
+    (props: DSWizardT.StepProps): import("react/jsx-runtime.js").JSX.Element;
     displayName: string;
 };
-declare const WizzardStepWithSchema: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").DocumentedReactComponent<WizardStepProps>;
+declare const WizzardStepWithSchema: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").DocumentedReactComponent<DSWizardT.StepProps>;
 export { WizzardStepWithSchema };
 export default WizardStep;

package/dist/types/WizardSteps.d.ts

@@ -0,0 +1,12 @@
+import { type DSWizardT } from './react-desc-prop-types.js';
+declare const WizardSteps: {
+    (props: DSWizardT.Props): import("react/jsx-runtime.js").JSX.Element;
+    Item: {
+        (props: DSWizardT.StepProps): import("react/jsx-runtime.js").JSX.Element;
+        displayName: string;
+    };
+    displayName: string;
+};
+declare const WizzardWithSchema: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").DocumentedReactComponent<DSWizardT.Props>;
+export { WizzardWithSchema };
+export default WizardSteps;

package/dist/types/react-desc-prop-types.d.ts

@@ -0,0 +1,43 @@
+import React from 'react';
+import type { GlobalAttributesT, XstyledProps, DSPropTypesSchema } from '@elliemae/ds-props-helpers';
+export declare namespace DSWizardT {
+    interface WizardStep {
+        content: React.ComponentType;
+    }
+    interface RequiredProps {
+    }
+    interface DefaultProps {
+        current: number;
+    }
+    interface OptionalProps {
+        steps?: WizardStep[];
+        children?: React.ReactElement[];
+    }
+    interface Props extends Partial<DefaultProps>, OptionalProps, Omit<GlobalAttributesT<HTMLDivElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps | keyof XstyledProps>, XstyledProps, RequiredProps {
+    }
+    interface InternalProps extends DefaultProps, OptionalProps, Omit<GlobalAttributesT<HTMLDivElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps | keyof XstyledProps>, XstyledProps, RequiredProps {
+    }
+    interface StepProps {
+        label?: string;
+        icon?: React.ReactNode;
+        iconCompleted?: React.ReactNode;
+        iconActive?: React.ReactNode;
+        active?: boolean;
+        completed?: boolean;
+        index?: number;
+    }
+}
+export declare const defaultProps: DSWizardT.DefaultProps;
+export declare const defaultStepProps: Required<DSWizardT.StepProps>;
+export declare const DSWizardPropTypes: DSPropTypesSchema<DSWizardT.Props>;
+export declare const DSWizardPropTypesSchema: React.WeakValidationMap<DSWizardT.Props>;
+export declare const DSWizardStepPropsTypes: {
+    label: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
+    icon: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
+    iconCompleted: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
+    iconActive: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
+    active: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
+    completed: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
+    index: import("@elliemae/ds-props-helpers/dist/types/propTypes/types").ReactDescT;
+};
+export declare const DSWizardStepPropsTypesSchema: React.WeakValidationMap<DSWizardT.StepProps>;

package/dist/types/tests/axe-core.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/useWizard.d.ts

@@ -1,16 +1,18 @@
-interface WizardConfig {
-    steps: any[];
+/// <reference types="react" />
+import type { DSWizardT } from './react-desc-prop-types.js';
+interface WizardConfig<T extends DSWizardT.WizardStep> {
+    steps: T[];
     current?: number;
     onNext?: (currentStep: number) => void;
     onPrevious?: (currentStep: number) => void;
     initial?: number;
 }
-export default function useWizard({ steps: wizardSteps, current, onNext, onPrevious, initial, }: WizardConfig): {
+export default function useWizard<T extends DSWizardT.WizardStep>({ steps: wizardSteps, current, onNext, onPrevious, initial, }: WizardConfig<T>): {
     current: number;
     next: () => void;
     previous: () => void;
     canNext: boolean;
     canPrevious: boolean;
-    WizardCurrentContent: any;
+    WizardCurrentContent: import("react").ComponentType<{}>;
 };
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-wizard",
-  "version": "3.21.2",
+  "version": "3.22.0-next.1",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Wizard",
   "files": [
@@ -55,10 +55,10 @@
     "indent": 4
   },
   "dependencies": {
-    "@elliemae/ds-classnames": "3.21.2",
-    "@elliemae/ds-props-helpers": "3.21.2",
-    "@elliemae/ds-icons": "3.21.2",
-    "@elliemae/ds-utilities": "3.21.2"
+    "@elliemae/ds-classnames": "3.22.0-next.1",
+    "@elliemae/ds-props-helpers": "3.22.0-next.1",
+    "@elliemae/ds-utilities": "3.22.0-next.1",
+    "@elliemae/ds-icons": "3.22.0-next.1"
   },
   "peerDependencies": {
     "lodash": "^4.17.21",

package/dist/cjs/blockNames.js

@@ -1,40 +0,0 @@
-"use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var blockNames_exports = {};
-__export(blockNames_exports, {
-  indicatorBlockName: () => indicatorBlockName,
-  indicatorItemBlockName: () => indicatorItemBlockName,
-  wizardBlockName: () => wizardBlockName
-});
-module.exports = __toCommonJS(blockNames_exports);
-var React = __toESM(require("react"));
-const wizardBlockName = "wizard";
-const indicatorBlockName = `${wizardBlockName}-steps-indicator`;
-const indicatorItemBlockName = `${indicatorBlockName}-step`;
-//# sourceMappingURL=blockNames.js.map

package/dist/cjs/blockNames.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/blockNames.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["export const wizardBlockName = 'wizard';\nexport const indicatorBlockName = `${wizardBlockName}-steps-indicator`;\nexport const indicatorItemBlockName = `${indicatorBlockName}-step`;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,kBAAkB;AACxB,MAAM,qBAAqB,GAAG;AAC9B,MAAM,yBAAyB,GAAG;",
-  "names": []
-}

package/dist/esm/blockNames.js

@@ -1,10 +0,0 @@
-import * as React from "react";
-const wizardBlockName = "wizard";
-const indicatorBlockName = `${wizardBlockName}-steps-indicator`;
-const indicatorItemBlockName = `${indicatorBlockName}-step`;
-export {
-  indicatorBlockName,
-  indicatorItemBlockName,
-  wizardBlockName
-};
-//# sourceMappingURL=blockNames.js.map

package/dist/esm/blockNames.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/blockNames.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const wizardBlockName = 'wizard';\nexport const indicatorBlockName = `${wizardBlockName}-steps-indicator`;\nexport const indicatorItemBlockName = `${indicatorBlockName}-step`;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAhB,MAAM,kBAAkB;AACxB,MAAM,qBAAqB,GAAG;AAC9B,MAAM,yBAAyB,GAAG;",
-  "names": []
-}

package/dist/types/blockNames.d.ts

@@ -1,3 +0,0 @@
-export declare const wizardBlockName = "wizard";
-export declare const indicatorBlockName: string;
-export declare const indicatorItemBlockName: string;