@ledgerhq/react-ui 0.12.1-recover-beta.0 → 0.13.0-next.0

package/lib/cjs/components/navigation/FlowStepper/index.js

@@ -1,33 +1,40 @@
+"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 __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
 var __export = (target, all) => {
-  __markAsModule(target);
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
 };
-var __reExport = (target, module2, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && key !== "default")
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+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 target;
+  return to;
 };
-var __toModule = (module2) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", module2 && module2.__esModule && "default" in module2 ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-__export(exports, {
+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 FlowStepper_exports = {};
+__export(FlowStepper_exports, {
   default: () => FlowStepper_default
 });
-var import_react = __toModule(require("react"));
-var import_react_is = __toModule(require("react-is"));
-var import_Flex = __toModule(require("../../layout/Flex"));
-var import__ = __toModule(require(".."));
+module.exports = __toCommonJS(FlowStepper_exports);
+var import_react = __toESM(require("react"));
+var import_react_is = require("react-is");
+var import_Flex = __toESM(require("../../layout/Flex"));
+var import__ = require("..");
 function FlowStepper({
   activeIndex,
   header,
@@ -42,50 +49,35 @@ function FlowStepper({
   renderChildren,
   children
 }) {
-  const { steps, innerContents, stepFooter, stepHeader } = import_react.default.Children.toArray(children).reduce((acc, child, idx) => {
-    const index = ((0, import_react_is.isElement)(child) && child.props.index) ?? idx;
-    const label = (0, import_react_is.isElement)(child) && child.props.label;
-    const hidden = (0, import_react_is.isElement)(child) && child.props.hidden;
-    const stepHeader2 = (0, import_react_is.isElement)(child) && child.props.header;
-    const stepFooter2 = (0, import_react_is.isElement)(child) && child.props.footer;
-    if (label && !hidden) {
-      acc.steps[index] = label;
-    }
-    if (index === activeIndex) {
-      acc.innerContents = child;
-      acc.stepFooter = stepFooter2;
-      acc.stepHeader = stepHeader2;
+  const { steps, innerContents, stepFooter, stepHeader } = import_react.default.Children.toArray(children).reduce(
+    (acc, child, idx) => {
+      const index = ((0, import_react_is.isElement)(child) && child.props.index) ?? idx;
+      const label = (0, import_react_is.isElement)(child) && child.props.label;
+      const hidden = (0, import_react_is.isElement)(child) && child.props.hidden;
+      const stepHeader2 = (0, import_react_is.isElement)(child) && child.props.header;
+      const stepFooter2 = (0, import_react_is.isElement)(child) && child.props.footer;
+      if (label && !hidden) {
+        acc.steps[index] = label;
+      }
+      if (index === activeIndex) {
+        acc.innerContents = child;
+        acc.stepFooter = stepFooter2;
+        acc.stepHeader = stepHeader2;
+      }
+      return acc;
+    },
+    {
+      steps: [],
+      innerContents: null,
+      stepHeader: null,
+      stepFooter: null
     }
-    return acc;
-  }, {
-    steps: [],
-    innerContents: null,
-    stepHeader: null,
-    stepFooter: null
-  });
+  );
   const renderArgs = { ...extraProps, activeIndex, stepsLength: steps.length };
   function getSectionContents(renderFunc, stepSection, renderStepFunc) {
     return stepSection ? renderStepFunc ? renderStepFunc({ ...renderArgs, children: stepSection }) : stepSection : renderFunc && renderFunc(renderArgs);
   }
-  return /* @__PURE__ */ import_react.default.createElement(import_Flex.default, {
-    flex: 1,
-    flexDirection: "column",
-    ...extraContainerProps
-  }, getSectionContents(header, stepHeader, renderStepHeader), /* @__PURE__ */ import_react.default.createElement(import_Flex.default, {
-    my: 8,
-    justifyContent: "center",
-    ...extraStepperContainerProps
-  }, /* @__PURE__ */ import_react.default.createElement(import__.Stepper, {
-    activeIndex,
-    steps,
-    flex: 1,
-    ...extraStepperProps
-  })), /* @__PURE__ */ import_react.default.createElement(import_Flex.default, {
-    flex: 1,
-    flexDirection: "column",
-    position: "relative",
-    ...extraChildrenContainerProps
-  }, renderChildren ? renderChildren({ ...renderArgs, children: innerContents }) : innerContents), getSectionContents(footer, stepFooter, renderStepFooter));
+  return /* @__PURE__ */ import_react.default.createElement(import_Flex.default, { flex: 1, flexDirection: "column", ...extraContainerProps }, getSectionContents(header, stepHeader, renderStepHeader), /* @__PURE__ */ import_react.default.createElement(import_Flex.default, { my: 8, justifyContent: "center", ...extraStepperContainerProps }, /* @__PURE__ */ import_react.default.createElement(import__.Stepper, { activeIndex, steps, flex: 1, ...extraStepperProps })), /* @__PURE__ */ import_react.default.createElement(import_Flex.default, { flex: 1, flexDirection: "column", position: "relative", ...extraChildrenContainerProps }, renderChildren ? renderChildren({ ...renderArgs, children: innerContents }) : innerContents), getSectionContents(footer, stepFooter, renderStepFooter));
 }
 function Step({ children }) {
   return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, children);
@@ -98,10 +90,7 @@ function FlowStepperIndexed(props) {
     const res = (0, import_react_is.isElement)(child) && child.props.itemKey === activeKey;
     return res;
   });
-  return /* @__PURE__ */ import_react.default.createElement(FlowStepper, {
-    ...otherProps,
-    activeIndex
-  }, children);
+  return /* @__PURE__ */ import_react.default.createElement(FlowStepper, { ...otherProps, activeIndex }, children);
 }
 function IndexedStep({ children }) {
   return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, children);

package/lib/cjs/components/navigation/FlowStepper/index.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../src/components/navigation/FlowStepper/index.tsx"],
   "sourcesContent": ["import React from \"react\";\nimport { isElement } from \"react-is\";\nimport { Props as StepperProps } from \"../progress/Stepper\";\nimport Flex, { FlexBoxProps as FlexProps } from \"../../layout/Flex\";\nimport { Stepper } from \"..\";\n\nexport type StepProps = {\n  /**\n   * A specific index, can be used to explicitely order steps.\n   */\n  index?: number;\n  /**\n   * Custom header for this step.\n   */\n  header?: React.ReactNode;\n  /**\n   * Custom footer for this step.\n   */\n  footer?: React.ReactNode;\n  /**\n   * The label of the step.\n   */\n  label: string;\n  /**\n   * Hides the step from the progress stepper.\n   */\n  hidden?: boolean;\n  /**\n   * The step contents.\n   */\n  children: React.ReactNode;\n};\n\ninterface InnerProps {\n  /**\n   * The active index.\n   */\n  activeIndex: number;\n  /**\n   * The total number of steps.\n   */\n  stepsLength: number;\n}\n\ntype StepChild = React.ReactElement<StepProps>;\ntype SectionRenderFunc<ExtraProps> = (props: InnerProps & ExtraProps) => React.ReactNode;\ntype SectionStepRenderFunc<ExtraProps> = (\n  args: InnerProps & ExtraProps & { children: React.ReactNode },\n) => React.ReactNode;\n\nexport interface Props<ExtraProps> {\n  /**\n   * The index of the active step.\n   */\n  activeIndex: number;\n  /**\n   * An optional generic header displayed above the stepper.\n   */\n  header?: SectionRenderFunc<ExtraProps>;\n  /**\n   * Custom rendering function to wrap the header (only used if the `header` is defined\n   * on the child for the current step.)\n   */\n  renderStepHeader?: SectionStepRenderFunc<ExtraProps>;\n  /**\n   * An optional generic footer displayed below the body.\n   */\n  footer?: SectionRenderFunc<ExtraProps>;\n  /**\n   * Custom rendering function to wrap the footer (only used if the `footer` is defined\n   * on the child for the current step.)\n   */\n  renderStepFooter?: SectionStepRenderFunc<ExtraProps>;\n  /**\n   * Extra props that are passed to the header and footer render functions.\n   */\n  extraProps?: ExtraProps;\n  /**\n   * Extra props that are passed to the container `Flex` element.\n   */\n  extraContainerProps?: FlexProps;\n  /**\n   * Extra props that are passed to the stepper component.\n   */\n  extraStepperProps?: Partial<StepperProps>;\n  /**\n   * Extra props that are passed to the stepper `Flex` wrapper.\n   */\n  extraStepperContainerProps?: FlexProps;\n  /**\n   * Extra props that are passed to the children `Flex` wrapper.\n   */\n  extraChildrenContainerProps?: FlexProps;\n  /**\n   * Custom rendering function to wrap children.\n   */\n  renderChildren?: (\n    args: InnerProps & ExtraProps & { children: React.ReactNode },\n  ) => React.ReactNode;\n  /**\n   * A list of children representing each step of the flow.\n   * Each child can have a prop `stepHeader` and/or `stepFooter` that will\n   * associate a custom header/footer to this particular step.\n   * The custom header/footer can be wrapped using the prop renderStepHeader/renderStepFooter.\n   */\n  children: StepChild | StepChild[];\n}\n\nfunction FlowStepper<ExtraProps>({\n  activeIndex,\n  header,\n  renderStepHeader,\n  footer,\n  renderStepFooter,\n  extraProps,\n  extraContainerProps,\n  extraStepperProps,\n  extraStepperContainerProps,\n  extraChildrenContainerProps,\n  renderChildren,\n  children,\n}: Props<ExtraProps>) {\n  const { steps, innerContents, stepFooter, stepHeader } = React.Children.toArray(children).reduce<{\n    steps: string[];\n    innerContents: React.ReactNode | null;\n    stepHeader: React.ReactNode | null;\n    stepFooter: React.ReactNode | null;\n  }>(\n    (acc, child, idx) => {\n      const index = (isElement(child) && child.props.index) ?? idx;\n      const label = isElement(child) && child.props.label;\n      const hidden = isElement(child) && child.props.hidden;\n      const stepHeader = isElement(child) && child.props.header;\n      const stepFooter = isElement(child) && child.props.footer;\n\n      if (label && !hidden) {\n        acc.steps[index] = label;\n      }\n      if (index === activeIndex) {\n        acc.innerContents = child;\n        acc.stepFooter = stepFooter;\n        acc.stepHeader = stepHeader;\n      }\n      return acc;\n    },\n    {\n      steps: [],\n      innerContents: null,\n      stepHeader: null,\n      stepFooter: null,\n    },\n  );\n\n  const renderArgs = { ...extraProps, activeIndex, stepsLength: steps.length } as InnerProps &\n    ExtraProps;\n\n  function getSectionContents(\n    renderFunc?: SectionRenderFunc<ExtraProps>,\n    stepSection?: React.ReactNode,\n    renderStepFunc?: SectionStepRenderFunc<ExtraProps>,\n  ) {\n    return stepSection\n      ? renderStepFunc\n        ? renderStepFunc({ ...renderArgs, children: stepSection })\n        : stepSection\n      : renderFunc && renderFunc(renderArgs);\n  }\n\n  return (\n    <Flex flex={1} flexDirection=\"column\" {...extraContainerProps}>\n      {getSectionContents(header, stepHeader, renderStepHeader)}\n      <Flex my={8} justifyContent=\"center\" {...extraStepperContainerProps}>\n        <Stepper activeIndex={activeIndex} steps={steps} flex={1} {...extraStepperProps} />\n      </Flex>\n      <Flex flex={1} flexDirection=\"column\" position=\"relative\" {...extraChildrenContainerProps}>\n        {renderChildren\n          ? renderChildren({ ...renderArgs, children: innerContents })\n          : innerContents}\n      </Flex>\n      {getSectionContents(footer, stepFooter, renderStepFooter)}\n    </Flex>\n  );\n}\n\nfunction Step({ children }: StepProps) {\n  return <>{children}</>;\n}\n\nFlowStepper.Step = Step;\nexport default FlowStepper;\n\nexport type IndexedStepProps = StepProps & {\n  /**\n   * String to identify the step. Must be different from sibling steps's `key` prop.\n   */\n  itemKey: string;\n};\n\ntype IndexedStepperChild = React.ReactElement<IndexedStepProps>;\n\nexport type IndexedProps<ExtraProps> = Omit<Props<ExtraProps>, \"activeIndex\" | \"children\"> & {\n  /**\n   * The key of the active step\n   */\n  activeKey: string;\n\n  /**\n   * A list of children representing each step of the flow.\n   */\n  children: IndexedStepperChild | IndexedStepperChild[];\n};\n\n/**\n * This is a FlowStepper where each child must have an `itemKey: string` prop\n * and the active step is defined by the `activeKey: string` prop.\n *\n * This allows for usages with a lot of steps where dealing with indices could be\n * painful and error prone (for instance inserting/removing a step somewhere would shift\n * the indices of the following steps and navigation would be impacted).\n *\n * By using string identifiers (`itemKey`) for each step, it's more \"human readable\"\n * and less error prone to setup a navigation logic between steps.\n */\nfunction FlowStepperIndexed<ExtraProps>(props: IndexedProps<ExtraProps>) {\n  const { activeKey, children, ...otherProps } = props;\n  const activeIndex = React.Children.toArray(children).findIndex((child) => {\n    const res = isElement(child) && child.props.itemKey === activeKey;\n    return res;\n  });\n  return (\n    <FlowStepper {...otherProps} activeIndex={activeIndex}>\n      {children}\n    </FlowStepper>\n  );\n}\n\nfunction IndexedStep({ children }: IndexedStepProps) {\n  return <>{children}</>;\n}\n\nFlowStepperIndexed.Step = IndexedStep;\nFlowStepper.Indexed = FlowStepperIndexed;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,sBAA0B;AAE1B,kBAAgD;AAChD,eAAwB;AAwGxB,qBAAiC;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,GACoB;AACpB,QAAM,EAAE,OAAO,eAAe,YAAY,eAAe,qBAAM,SAAS,QAAQ,UAAU,OAMxF,CAAC,KAAK,OAAO,QAAQ;AACnB,UAAM,QAAS,gCAAU,UAAU,MAAM,MAAM,UAAU;AACzD,UAAM,QAAQ,+BAAU,UAAU,MAAM,MAAM;AAC9C,UAAM,SAAS,+BAAU,UAAU,MAAM,MAAM;AAC/C,UAAM,cAAa,+BAAU,UAAU,MAAM,MAAM;AACnD,UAAM,cAAa,+BAAU,UAAU,MAAM,MAAM;AAEnD,QAAI,SAAS,CAAC,QAAQ;AACpB,UAAI,MAAM,SAAS;AAAA;AAErB,QAAI,UAAU,aAAa;AACzB,UAAI,gBAAgB;AACpB,UAAI,aAAa;AACjB,UAAI,aAAa;AAAA;AAEnB,WAAO;AAAA,KAET;AAAA,IACE,OAAO;AAAA,IACP,eAAe;AAAA,IACf,YAAY;AAAA,IACZ,YAAY;AAAA;AAIhB,QAAM,aAAa,KAAK,YAAY,aAAa,aAAa,MAAM;AAGpE,8BACE,YACA,aACA,gBACA;AACA,WAAO,cACH,iBACE,eAAe,KAAK,YAAY,UAAU,iBAC1C,cACF,cAAc,WAAW;AAAA;AAG/B,SACE,mDAAC,qBAAD;AAAA,IAAM,MAAM;AAAA,IAAG,eAAc;AAAA,OAAa;AAAA,KACvC,mBAAmB,QAAQ,YAAY,mBACxC,mDAAC,qBAAD;AAAA,IAAM,IAAI;AAAA,IAAG,gBAAe;AAAA,OAAa;AAAA,KACvC,mDAAC,kBAAD;AAAA,IAAS;AAAA,IAA0B;AAAA,IAAc,MAAM;AAAA,OAAO;AAAA,OAEhE,mDAAC,qBAAD;AAAA,IAAM,MAAM;AAAA,IAAG,eAAc;AAAA,IAAS,UAAS;AAAA,OAAe;AAAA,KAC3D,iBACG,eAAe,KAAK,YAAY,UAAU,mBAC1C,gBAEL,mBAAmB,QAAQ,YAAY;AAAA;AAK9C,cAAc,EAAE,YAAuB;AACrC,SAAO,wFAAG;AAAA;AAGZ,YAAY,OAAO;AACnB,IAAO,sBAAQ;AAkCf,4BAAwC,OAAiC;AACvE,QAAM,EAAE,WAAW,aAAa,eAAe;AAC/C,QAAM,cAAc,qBAAM,SAAS,QAAQ,UAAU,UAAU,CAAC,UAAU;AACxE,UAAM,MAAM,+BAAU,UAAU,MAAM,MAAM,YAAY;AACxD,WAAO;AAAA;AAET,SACE,mDAAC,aAAD;AAAA,OAAiB;AAAA,IAAY;AAAA,KAC1B;AAAA;AAKP,qBAAqB,EAAE,YAA8B;AACnD,SAAO,wFAAG;AAAA;AAGZ,mBAAmB,OAAO;AAC1B,YAAY,UAAU;",
-  "names": []
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,sBAA0B;AAE1B,kBAAgD;AAChD,eAAwB;AAwGxB,SAAS,YAAwB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAsB;AACpB,QAAM,EAAE,OAAO,eAAe,YAAY,WAAW,IAAI,aAAAA,QAAM,SAAS,QAAQ,QAAQ,EAAE;AAAA,IAMxF,CAAC,KAAK,OAAO,QAAQ;AACnB,YAAM,aAAS,2BAAU,KAAK,KAAK,MAAM,MAAM,UAAU;AACzD,YAAM,YAAQ,2BAAU,KAAK,KAAK,MAAM,MAAM;AAC9C,YAAM,aAAS,2BAAU,KAAK,KAAK,MAAM,MAAM;AAC/C,YAAMC,kBAAa,2BAAU,KAAK,KAAK,MAAM,MAAM;AACnD,YAAMC,kBAAa,2BAAU,KAAK,KAAK,MAAM,MAAM;AAEnD,UAAI,SAAS,CAAC,QAAQ;AACpB,YAAI,MAAM,KAAK,IAAI;AAAA,MACrB;AACA,UAAI,UAAU,aAAa;AACzB,YAAI,gBAAgB;AACpB,YAAI,aAAaA;AACjB,YAAI,aAAaD;AAAA,MACnB;AACA,aAAO;AAAA,IACT;AAAA,IACA;AAAA,MACE,OAAO,CAAC;AAAA,MACR,eAAe;AAAA,MACf,YAAY;AAAA,MACZ,YAAY;AAAA,IACd;AAAA,EACF;AAEA,QAAM,aAAa,EAAE,GAAG,YAAY,aAAa,aAAa,MAAM,OAAO;AAG3E,WAAS,mBACP,YACA,aACA,gBACA;AACA,WAAO,cACH,iBACE,eAAe,EAAE,GAAG,YAAY,UAAU,YAAY,CAAC,IACvD,cACF,cAAc,WAAW,UAAU;AAAA,EACzC;AAEA,SACE,6BAAAD,QAAA,cAAC,YAAAG,SAAA,EAAK,MAAM,GAAG,eAAc,UAAU,GAAG,uBACvC,mBAAmB,QAAQ,YAAY,gBAAgB,GACxD,6BAAAH,QAAA,cAAC,YAAAG,SAAA,EAAK,IAAI,GAAG,gBAAe,UAAU,GAAG,8BACvC,6BAAAH,QAAA,cAAC,oBAAQ,aAA0B,OAAc,MAAM,GAAI,GAAG,mBAAmB,CACnF,GACA,6BAAAA,QAAA,cAAC,YAAAG,SAAA,EAAK,MAAM,GAAG,eAAc,UAAS,UAAS,YAAY,GAAG,+BAC3D,iBACG,eAAe,EAAE,GAAG,YAAY,UAAU,cAAc,CAAC,IACzD,aACN,GACC,mBAAmB,QAAQ,YAAY,gBAAgB,CAC1D;AAEJ;AAEA,SAAS,KAAK,EAAE,SAAS,GAAc;AACrC,SAAO,6BAAAH,QAAA,2BAAAA,QAAA,gBAAG,QAAS;AACrB;AAEA,YAAY,OAAO;AACnB,IAAO,sBAAQ;AAkCf,SAAS,mBAA+B,OAAiC;AACvE,QAAM,EAAE,WAAW,UAAU,GAAG,WAAW,IAAI;AAC/C,QAAM,cAAc,aAAAA,QAAM,SAAS,QAAQ,QAAQ,EAAE,UAAU,CAAC,UAAU;AACxE,UAAM,UAAM,2BAAU,KAAK,KAAK,MAAM,MAAM,YAAY;AACxD,WAAO;AAAA,EACT,CAAC;AACD,SACE,6BAAAA,QAAA,cAAC,eAAa,GAAG,YAAY,eAC1B,QACH;AAEJ;AAEA,SAAS,YAAY,EAAE,SAAS,GAAqB;AACnD,SAAO,6BAAAA,QAAA,2BAAAA,QAAA,gBAAG,QAAS;AACrB;AAEA,mBAAmB,OAAO;AAC1B,YAAY,UAAU;",
+  "names": ["React", "stepHeader", "stepFooter", "Flex"]
 }

package/lib/cjs/components/navigation/Header/Header.stories.js

@@ -1,71 +1,49 @@
+"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 __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
 var __export = (target, all) => {
-  __markAsModule(target);
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
 };
-var __reExport = (target, module2, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && key !== "default")
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+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 target;
+  return to;
 };
-var __toModule = (module2) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", module2 && module2.__esModule && "default" in module2 ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-__export(exports, {
+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 Header_stories_exports = {};
+__export(Header_stories_exports, {
   Header: () => Header,
   default: () => Header_stories_default
 });
-var import_index = __toModule(require("./index"));
-var import_Icon = __toModule(require("../../asorted/Icon"));
-var import_Text = __toModule(require("../../asorted/Text"));
-var import_Flex = __toModule(require("../../layout/Flex"));
-var import_react = __toModule(require("react"));
+module.exports = __toCommonJS(Header_stories_exports);
+var import_index = __toESM(require("./index"));
+var import_Icon = __toESM(require("../../asorted/Icon"));
+var import_Text = __toESM(require("../../asorted/Text"));
+var import_Flex = __toESM(require("../../layout/Flex"));
+var import_react = __toESM(require("react"));
 var Header_stories_default = {
   title: "Navigation/Header",
   component: import_index.default
 };
 const Header = (args) => {
-  const left = /* @__PURE__ */ import_react.default.createElement(import_Flex.default, {
-    alignItems: "center",
-    style: { columnGap: "6px" }
-  }, /* @__PURE__ */ import_react.default.createElement(import_Icon.default, {
-    name: "ArrowLeft",
-    weight: "Medium"
-  }), /* @__PURE__ */ import_react.default.createElement(import_Text.default, {
-    fontWeight: "semiBold",
-    variant: "paragraph"
-  }, "Previous"));
-  const right = /* @__PURE__ */ import_react.default.createElement(import_Flex.default, {
-    alignItems: "center",
-    style: { columnGap: "8px" }
-  }, /* @__PURE__ */ import_react.default.createElement(import_Icon.default, {
-    name: "Linux",
-    size: 20
-  }), /* @__PURE__ */ import_react.default.createElement(import_Icon.default, {
-    name: "Apple",
-    size: 20
-  }), /* @__PURE__ */ import_react.default.createElement(import_Icon.default, {
-    name: "Windows",
-    size: 20
-  }));
-  return /* @__PURE__ */ import_react.default.createElement(import_index.default, {
-    ...args,
-    left,
-    right,
-    alignItems: "center"
-  }, /* @__PURE__ */ import_react.default.createElement(import_Text.default, {
-    variant: "h3",
-    textTransform: "uppercase"
-  }, "Ledger"));
+  const left = /* @__PURE__ */ import_react.default.createElement(import_Flex.default, { alignItems: "center", style: { columnGap: "6px" } }, /* @__PURE__ */ import_react.default.createElement(import_Icon.default, { name: "ArrowLeft", weight: "Medium" }), /* @__PURE__ */ import_react.default.createElement(import_Text.default, { fontWeight: "semiBold", variant: "paragraph" }, "Previous"));
+  const right = /* @__PURE__ */ import_react.default.createElement(import_Flex.default, { alignItems: "center", style: { columnGap: "8px" } }, /* @__PURE__ */ import_react.default.createElement(import_Icon.default, { name: "Linux", size: 20 }), /* @__PURE__ */ import_react.default.createElement(import_Icon.default, { name: "Apple", size: 20 }), /* @__PURE__ */ import_react.default.createElement(import_Icon.default, { name: "Windows", size: 20 }));
+  return /* @__PURE__ */ import_react.default.createElement(import_index.default, { ...args, left, right, alignItems: "center" }, /* @__PURE__ */ import_react.default.createElement(import_Text.default, { variant: "h3", textTransform: "uppercase" }, "Ledger"));
 };
 //# sourceMappingURL=Header.stories.js.map

package/lib/cjs/components/navigation/Header/Header.stories.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../src/components/navigation/Header/Header.stories.tsx"],
   "sourcesContent": ["import HeaderComponent, { Props } from \"./index\";\n\nimport Icon from \"../../asorted/Icon\";\nimport Text from \"../../asorted/Text\";\nimport FlexBox from \"../../layout/Flex\";\nimport React from \"react\";\n\nexport default {\n  title: \"Navigation/Header\",\n  component: HeaderComponent,\n};\n\nexport const Header = (args: Props): JSX.Element => {\n  const left = (\n    <FlexBox alignItems=\"center\" style={{ columnGap: \"6px\" }}>\n      <Icon name=\"ArrowLeft\" weight=\"Medium\" />\n      <Text fontWeight=\"semiBold\" variant={\"paragraph\"}>\n        Previous\n      </Text>\n    </FlexBox>\n  );\n\n  const right = (\n    <FlexBox alignItems=\"center\" style={{ columnGap: \"8px\" }}>\n      <Icon name=\"Linux\" size={20} />\n      <Icon name=\"Apple\" size={20} />\n      <Icon name=\"Windows\" size={20} />\n    </FlexBox>\n  );\n\n  return (\n    <HeaderComponent {...args} left={left} right={right} alignItems=\"center\">\n      <Text variant={\"h3\"} textTransform=\"uppercase\">\n        Ledger\n      </Text>\n    </HeaderComponent>\n  );\n};\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAuC;AAEvC,kBAAiB;AACjB,kBAAiB;AACjB,kBAAoB;AACpB,mBAAkB;AAElB,IAAO,yBAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW;AAAA;AAGN,MAAM,SAAS,CAAC,SAA6B;AAClD,QAAM,OACJ,mDAAC,qBAAD;AAAA,IAAS,YAAW;AAAA,IAAS,OAAO,EAAE,WAAW;AAAA,KAC/C,mDAAC,qBAAD;AAAA,IAAM,MAAK;AAAA,IAAY,QAAO;AAAA,MAC9B,mDAAC,qBAAD;AAAA,IAAM,YAAW;AAAA,IAAW,SAAS;AAAA,KAAa;AAMtD,QAAM,QACJ,mDAAC,qBAAD;AAAA,IAAS,YAAW;AAAA,IAAS,OAAO,EAAE,WAAW;AAAA,KAC/C,mDAAC,qBAAD;AAAA,IAAM,MAAK;AAAA,IAAQ,MAAM;AAAA,MACzB,mDAAC,qBAAD;AAAA,IAAM,MAAK;AAAA,IAAQ,MAAM;AAAA,MACzB,mDAAC,qBAAD;AAAA,IAAM,MAAK;AAAA,IAAU,MAAM;AAAA;AAI/B,SACE,mDAAC,sBAAD;AAAA,OAAqB;AAAA,IAAM;AAAA,IAAY;AAAA,IAAc,YAAW;AAAA,KAC9D,mDAAC,qBAAD;AAAA,IAAM,SAAS;AAAA,IAAM,eAAc;AAAA,KAAY;AAAA;",
-  "names": []
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAuC;AAEvC,kBAAiB;AACjB,kBAAiB;AACjB,kBAAoB;AACpB,mBAAkB;AAElB,IAAO,yBAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW,aAAAA;AACb;AAEO,MAAM,SAAS,CAAC,SAA6B;AAClD,QAAM,OACJ,6BAAAC,QAAA,cAAC,YAAAC,SAAA,EAAQ,YAAW,UAAS,OAAO,EAAE,WAAW,MAAM,KACrD,6BAAAD,QAAA,cAAC,YAAAE,SAAA,EAAK,MAAK,aAAY,QAAO,UAAS,GACvC,6BAAAF,QAAA,cAAC,YAAAG,SAAA,EAAK,YAAW,YAAW,SAAS,eAAa,UAElD,CACF;AAGF,QAAM,QACJ,6BAAAH,QAAA,cAAC,YAAAC,SAAA,EAAQ,YAAW,UAAS,OAAO,EAAE,WAAW,MAAM,KACrD,6BAAAD,QAAA,cAAC,YAAAE,SAAA,EAAK,MAAK,SAAQ,MAAM,IAAI,GAC7B,6BAAAF,QAAA,cAAC,YAAAE,SAAA,EAAK,MAAK,SAAQ,MAAM,IAAI,GAC7B,6BAAAF,QAAA,cAAC,YAAAE,SAAA,EAAK,MAAK,WAAU,MAAM,IAAI,CACjC;AAGF,SACE,6BAAAF,QAAA,cAAC,aAAAD,SAAA,EAAiB,GAAG,MAAM,MAAY,OAAc,YAAW,YAC9D,6BAAAC,QAAA,cAAC,YAAAG,SAAA,EAAK,SAAS,MAAM,eAAc,eAAY,QAE/C,CACF;AAEJ;",
+  "names": ["HeaderComponent", "React", "FlexBox", "Icon", "Text"]
 }

package/lib/cjs/components/navigation/Header/index.js

@@ -1,37 +1,39 @@
+"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 __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
 var __export = (target, all) => {
-  __markAsModule(target);
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
 };
-var __reExport = (target, module2, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && key !== "default")
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+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 target;
+  return to;
 };
-var __toModule = (module2) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", module2 && module2.__esModule && "default" in module2 ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-__export(exports, {
+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 Header_exports = {};
+__export(Header_exports, {
   default: () => Header_default
 });
-var import_react = __toModule(require("react"));
-var import_Flex = __toModule(require("../../layout/Flex"));
+module.exports = __toCommonJS(Header_exports);
+var import_react = __toESM(require("react"));
+var import_Flex = __toESM(require("../../layout/Flex"));
 function Header_default({ left, right, children, ...rest }) {
-  return /* @__PURE__ */ import_react.default.createElement(import_Flex.default, {
-    justifyContent: "space-between",
-    ...rest
-  }, left, /* @__PURE__ */ import_react.default.createElement(import_Flex.default, {
-    "justify-content": "center"
-  }, children), right);
+  return /* @__PURE__ */ import_react.default.createElement(import_Flex.default, { justifyContent: "space-between", ...rest }, left, /* @__PURE__ */ import_react.default.createElement(import_Flex.default, { "justify-content": "center" }, children), right);
 }
 //# sourceMappingURL=index.js.map

package/lib/cjs/components/navigation/Header/index.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../src/components/navigation/Header/index.tsx"],
   "sourcesContent": ["import React from \"react\";\nimport FlexBox from \"../../layout/Flex\";\n\nexport type Props = {\n  /* Content displayed on the left side of the header. */\n  left?: React.ReactNode;\n  /* Content displayed on the right side of the header. */\n  right?: React.ReactNode;\n  /* Content displayed in the middle part - vertically centered. */\n  children?: React.ReactNode;\n} & React.ComponentProps<typeof FlexBox>;\n\nexport default function ({ left, right, children, ...rest }: Props): JSX.Element {\n  return (\n    <FlexBox justifyContent=\"space-between\" {...rest}>\n      {left}\n      <FlexBox justify-content=\"center\">{children}</FlexBox>\n      {right}\n    </FlexBox>\n  );\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,kBAAoB;AAWL,wBAAU,EAAE,MAAM,OAAO,aAAa,QAA4B;AAC/E,SACE,mDAAC,qBAAD;AAAA,IAAS,gBAAe;AAAA,OAAoB;AAAA,KACzC,MACD,mDAAC,qBAAD;AAAA,IAAS,mBAAgB;AAAA,KAAU,WAClC;AAAA;",
-  "names": []
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,kBAAoB;AAWL,SAAR,eAAkB,EAAE,MAAM,OAAO,UAAU,GAAG,KAAK,GAAuB;AAC/E,SACE,6BAAAA,QAAA,cAAC,YAAAC,SAAA,EAAQ,gBAAe,iBAAiB,GAAG,QACzC,MACD,6BAAAD,QAAA,cAAC,YAAAC,SAAA,EAAQ,mBAAgB,YAAU,QAAS,GAC3C,KACH;AAEJ;",
+  "names": ["React", "FlexBox"]
 }

package/lib/cjs/components/navigation/index.js

@@ -1,37 +1,45 @@
+"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 __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
 var __export = (target, all) => {
-  __markAsModule(target);
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
 };
-var __reExport = (target, module2, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && key !== "default")
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+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 target;
+  return to;
 };
-var __toModule = (module2) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", module2 && module2.__esModule && "default" in module2 ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-__export(exports, {
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+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 navigation_exports = {};
+__export(navigation_exports, {
   Aside: () => import_Aside.default,
   Breadcrumb: () => import_Breadcrumb.default,
   FlowStepper: () => import_FlowStepper.default,
   Header: () => import_Header.default,
   SideBar: () => import_SideBar.default
 });
-var import_Aside = __toModule(require("./Aside"));
-var import_Breadcrumb = __toModule(require("./Breadcrumb"));
-var import_Header = __toModule(require("./Header"));
-__reExport(exports, __toModule(require("./progress")));
-var import_SideBar = __toModule(require("./sideBar/SideBar"));
-var import_FlowStepper = __toModule(require("./FlowStepper"));
+module.exports = __toCommonJS(navigation_exports);
+var import_Aside = __toESM(require("./Aside"));
+var import_Breadcrumb = __toESM(require("./Breadcrumb"));
+var import_Header = __toESM(require("./Header"));
+__reExport(navigation_exports, require("./progress"), module.exports);
+var import_SideBar = __toESM(require("./sideBar/SideBar"));
+var import_FlowStepper = __toESM(require("./FlowStepper"));
 //# sourceMappingURL=index.js.map

package/lib/cjs/components/navigation/index.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../src/components/navigation/index.ts"],
   "sourcesContent": ["export { default as Aside } from \"./Aside\";\nexport { default as Breadcrumb } from \"./Breadcrumb\";\nexport { default as Header } from \"./Header\";\nexport * from \"./progress\";\nexport { default as SideBar } from \"./sideBar/SideBar\";\nexport { default as FlowStepper } from \"./FlowStepper\";\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAiC;AACjC,wBAAsC;AACtC,oBAAkC;AAClC,oBAAc;AACd,qBAAmC;AACnC,yBAAuC;",
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAiC;AACjC,wBAAsC;AACtC,oBAAkC;AAClC,+BAAc,uBAHd;AAIA,qBAAmC;AACnC,yBAAuC;",
   "names": []
 }

package/lib/cjs/components/navigation/progress/ProgressBar/Onboarding.js

@@ -1,32 +1,39 @@
+"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 __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
 var __export = (target, all) => {
-  __markAsModule(target);
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
 };
-var __reExport = (target, module2, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && key !== "default")
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+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 target;
+  return to;
 };
-var __toModule = (module2) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", module2 && module2.__esModule && "default" in module2 ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-__export(exports, {
+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 Onboarding_exports = {};
+__export(Onboarding_exports, {
   default: () => Onboarding_default
 });
-var import_react = __toModule(require("react"));
-var import_styled_components = __toModule(require("styled-components"));
-var import_Text = __toModule(require("../../../asorted/Text"));
+module.exports = __toCommonJS(Onboarding_exports);
+var import_react = __toESM(require("react"));
+var import_styled_components = __toESM(require("styled-components"));
+var import_Text = __toESM(require("../../../asorted/Text"));
 const Container = import_styled_components.default.div`
   display: flex;
   flex-direction: row;
@@ -68,24 +75,7 @@ const Handler = import_styled_components.default.div`
 const Onboarding = ({ steps, currentIndex }) => {
   const currentStep = steps[currentIndex];
   const fill = (currentIndex / (steps.length - 1) * 100).toFixed(2);
-  return /* @__PURE__ */ import_react.default.createElement(Container, null, /* @__PURE__ */ import_react.default.createElement(Bar, {
-    on: true,
-    fill
-  }), /* @__PURE__ */ import_react.default.createElement(Handler, {
-    key: currentStep.key
-  }, /* @__PURE__ */ import_react.default.createElement(import_Text.default, {
-    className: "index",
-    color: "neutral.c00",
-    fontWeight: "medium",
-    variant: "micro"
-  }, currentIndex + 1), /* @__PURE__ */ import_react.default.createElement(import_Text.default, {
-    color: "neutral.c00",
-    fontWeight: "medium",
-    textTransform: "uppercase",
-    variant: "micro"
-  }, currentStep.label)), /* @__PURE__ */ import_react.default.createElement(Bar, {
-    fill: 100 - Number(fill)
-  }));
+  return /* @__PURE__ */ import_react.default.createElement(Container, null, /* @__PURE__ */ import_react.default.createElement(Bar, { on: true, fill }), /* @__PURE__ */ import_react.default.createElement(Handler, { key: currentStep.key }, /* @__PURE__ */ import_react.default.createElement(import_Text.default, { className: "index", color: "neutral.c00", fontWeight: "medium", variant: "micro" }, currentIndex + 1), /* @__PURE__ */ import_react.default.createElement(import_Text.default, { color: "neutral.c00", fontWeight: "medium", textTransform: "uppercase", variant: "micro" }, currentStep.label)), /* @__PURE__ */ import_react.default.createElement(Bar, { fill: 100 - Number(fill) }));
 };
 var Onboarding_default = Onboarding;
 //# sourceMappingURL=Onboarding.js.map

package/lib/cjs/components/navigation/progress/ProgressBar/Onboarding.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../../src/components/navigation/progress/ProgressBar/Onboarding.tsx"],
   "sourcesContent": ["import React from \"react\";\nimport styled from \"styled-components\";\nimport Text from \"../../../asorted/Text\";\n\nconst Container = styled.div`\n  display: flex;\n  flex-direction: row;\n  height: 24px;\n  align-items: center;\n`;\n\nconst Bar = styled.div<{ on?: boolean; fill: string | number }>`\n  transition: all 600ms linear;\n  height: 4px;\n  border-radius: 2px;\n  /* Disable left/right border radius to match the handler */\n  border-top-${(p) => (p.on ? \"right\" : \"left\")}-radius: 0;\n  border-bottom-${(p) => (p.on ? \"right\" : \"left\")}-radius: 0;\n  flex: ${(p) => p.fill};\n  background: ${(p) => (p.on ? p.theme.colors.neutral.c100 : p.theme.colors.neutral.c40)};\n`;\n\nconst Handler = styled.div`\n  transition: all 600ms linear;\n  padding: 4px;\n  background: ${(p) => p.theme.colors.neutral.c100};\n  border-radius: ${(p) => `${p.theme.radii[1]}px`};\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  column-gap: 6px;\n\n  & span.index {\n    display: flex;\n    border-radius: 2px;\n    height: 16px;\n    width: 16px;\n    justify-content: center;\n    align-items: center;\n    color: ${(p) => p.theme.colors.neutral.c100};\n    background: ${(p) => p.theme.colors.neutral.c00};\n  }\n`;\n\ninterface Step {\n  key: string;\n  label: string;\n}\n\nexport type OnboardingProps = {\n  steps: Step[];\n  currentIndex: number;\n};\n\nconst Onboarding = ({ steps, currentIndex }: OnboardingProps): JSX.Element => {\n  const currentStep = steps[currentIndex];\n  const fill = ((currentIndex / (steps.length - 1)) * 100).toFixed(2);\n\n  return (\n    <Container>\n      <Bar on fill={fill} />\n      <Handler key={currentStep.key}>\n        <Text className=\"index\" color=\"neutral.c00\" fontWeight=\"medium\" variant={\"micro\"}>\n          {currentIndex + 1}\n        </Text>\n        <Text color=\"neutral.c00\" fontWeight=\"medium\" textTransform=\"uppercase\" variant={\"micro\"}>\n          {currentStep.label}\n        </Text>\n      </Handler>\n      <Bar fill={100 - Number(fill)} />\n    </Container>\n  );\n};\n\nexport default Onboarding;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAmB;AACnB,kBAAiB;AAEjB,MAAM,YAAY,iCAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOzB,MAAM,MAAM,iCAAO;AAAA;AAAA;AAAA;AAAA;AAAA,eAKJ,CAAC,MAAO,EAAE,KAAK,UAAU;AAAA,kBACtB,CAAC,MAAO,EAAE,KAAK,UAAU;AAAA,UACjC,CAAC,MAAM,EAAE;AAAA,gBACH,CAAC,MAAO,EAAE,KAAK,EAAE,MAAM,OAAO,QAAQ,OAAO,EAAE,MAAM,OAAO,QAAQ;AAAA;AAGpF,MAAM,UAAU,iCAAO;AAAA;AAAA;AAAA,gBAGP,CAAC,MAAM,EAAE,MAAM,OAAO,QAAQ;AAAA,mBAC3B,CAAC,MAAM,GAAG,EAAE,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAc9B,CAAC,MAAM,EAAE,MAAM,OAAO,QAAQ;AAAA,kBACzB,CAAC,MAAM,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAchD,MAAM,aAAa,CAAC,EAAE,OAAO,mBAAiD;AAC5E,QAAM,cAAc,MAAM;AAC1B,QAAM,OAAS,gBAAgB,OAAM,SAAS,KAAM,KAAK,QAAQ;AAEjE,SACE,mDAAC,WAAD,MACE,mDAAC,KAAD;AAAA,IAAK,IAAE;AAAA,IAAC;AAAA,MACR,mDAAC,SAAD;AAAA,IAAS,KAAK,YAAY;AAAA,KACxB,mDAAC,qBAAD;AAAA,IAAM,WAAU;AAAA,IAAQ,OAAM;AAAA,IAAc,YAAW;AAAA,IAAS,SAAS;AAAA,KACtE,eAAe,IAElB,mDAAC,qBAAD;AAAA,IAAM,OAAM;AAAA,IAAc,YAAW;AAAA,IAAS,eAAc;AAAA,IAAY,SAAS;AAAA,KAC9E,YAAY,SAGjB,mDAAC,KAAD;AAAA,IAAK,MAAM,MAAM,OAAO;AAAA;AAAA;AAK9B,IAAO,qBAAQ;",
-  "names": []
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAmB;AACnB,kBAAiB;AAEjB,MAAM,YAAY,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOzB,MAAM,MAAM,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA,eAKJ,CAAC,MAAO,EAAE,KAAK,UAAU;AAAA,kBACtB,CAAC,MAAO,EAAE,KAAK,UAAU;AAAA,UACjC,CAAC,MAAM,EAAE;AAAA,gBACH,CAAC,MAAO,EAAE,KAAK,EAAE,MAAM,OAAO,QAAQ,OAAO,EAAE,MAAM,OAAO,QAAQ;AAAA;AAGpF,MAAM,UAAU,yBAAAA,QAAO;AAAA;AAAA;AAAA,gBAGP,CAAC,MAAM,EAAE,MAAM,OAAO,QAAQ;AAAA,mBAC3B,CAAC,MAAM,GAAG,EAAE,MAAM,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAc/B,CAAC,MAAM,EAAE,MAAM,OAAO,QAAQ;AAAA,kBACzB,CAAC,MAAM,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAchD,MAAM,aAAa,CAAC,EAAE,OAAO,aAAa,MAAoC;AAC5E,QAAM,cAAc,MAAM,YAAY;AACtC,QAAM,QAAS,gBAAgB,MAAM,SAAS,KAAM,KAAK,QAAQ,CAAC;AAElE,SACE,6BAAAC,QAAA,cAAC,iBACC,6BAAAA,QAAA,cAAC,OAAI,IAAE,MAAC,MAAY,GACpB,6BAAAA,QAAA,cAAC,WAAQ,KAAK,YAAY,OACxB,6BAAAA,QAAA,cAAC,YAAAC,SAAA,EAAK,WAAU,SAAQ,OAAM,eAAc,YAAW,UAAS,SAAS,WACtE,eAAe,CAClB,GACA,6BAAAD,QAAA,cAAC,YAAAC,SAAA,EAAK,OAAM,eAAc,YAAW,UAAS,eAAc,aAAY,SAAS,WAC9E,YAAY,KACf,CACF,GACA,6BAAAD,QAAA,cAAC,OAAI,MAAM,MAAM,OAAO,IAAI,GAAG,CACjC;AAEJ;AAEA,IAAO,qBAAQ;",
+  "names": ["styled", "React", "Text"]
 }