@ledgerhq/react-ui 0.7.6 → 0.7.7-nightly.0

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

@@ -0,0 +1,37 @@
+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 });
+  }
+  return target;
+};
+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, {
+  default: () => Header_default
+});
+var import_react = __toModule(require("react"));
+var import_Flex = __toModule(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);
+}
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "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": []
+}

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

@@ -0,0 +1,37 @@
+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 });
+  }
+  return target;
+};
+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, {
+  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"));
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "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;",
+  "names": []
+}

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

@@ -0,0 +1,91 @@
+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 });
+  }
+  return target;
+};
+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, {
+  default: () => Onboarding_default
+});
+var import_react = __toModule(require("react"));
+var import_styled_components = __toModule(require("styled-components"));
+var import_Text = __toModule(require("../../../asorted/Text"));
+const Container = import_styled_components.default.div`
+  display: flex;
+  flex-direction: row;
+  height: 24px;
+  align-items: center;
+`;
+const Bar = import_styled_components.default.div`
+  transition: all 600ms linear;
+  height: 4px;
+  border-radius: 2px;
+  // Disable left/right border radius to match the handler
+  border-top-${(p) => p.on ? "right" : "left"}-radius: 0;
+  border-bottom-${(p) => p.on ? "right" : "left"}-radius: 0;
+  flex: ${(p) => p.fill};
+  background: ${(p) => p.on ? p.theme.colors.neutral.c100 : p.theme.colors.neutral.c40};
+`;
+const Handler = import_styled_components.default.div`
+  transition: all 600ms linear;
+  padding: 4px;
+  background: ${(p) => p.theme.colors.neutral.c100};
+  border-radius: ${(p) => `${p.theme.radii[1]}px`};
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  column-gap: 6px;
+
+  & span.index {
+    display: flex;
+    border-radius: 2px;
+    height: 16px;
+    width: 16px;
+    justify-content: center;
+    align-items: center;
+    color: ${(p) => p.theme.colors.neutral.c100};
+    background: ${(p) => p.theme.colors.neutral.c00};
+  }
+`;
+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)
+  }));
+};
+var Onboarding_default = Onboarding;
+//# sourceMappingURL=Onboarding.js.map

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

@@ -0,0 +1,7 @@
+{
+  "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": []
+}

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

@@ -0,0 +1,79 @@
+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 });
+  }
+  return target;
+};
+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, {
+  Default: () => Default,
+  default: () => Onboarding_stories_default
+});
+var import_react = __toModule(require("react"));
+var import_index = __toModule(require("./index"));
+var Onboarding_stories_default = {
+  title: "Navigation/Progress/Onboarding",
+  component: import_index.default,
+  argTypes: {
+    steps: { control: false },
+    currentIndex: {
+      type: "number",
+      description: "currentIndex",
+      required: true,
+      control: {
+        type: "number",
+        min: 0,
+        max: 4
+      }
+    }
+  }
+};
+const Template = (args) => {
+  return /* @__PURE__ */ import_react.default.createElement(import_index.default, {
+    steps: args.steps,
+    currentIndex: args.currentIndex
+  });
+};
+const Default = Template.bind({});
+Default.args = {
+  steps: [
+    {
+      key: "getStarted",
+      label: "get started"
+    },
+    {
+      key: "genuineCheck",
+      label: "genuine check"
+    },
+    {
+      key: "recoveryPhrase",
+      label: "recovery phrase"
+    },
+    {
+      key: "hideRecovery",
+      label: "hide recovery phrase"
+    },
+    {
+      key: "connect",
+      label: "connect nano"
+    }
+  ],
+  currentIndex: 0
+};
+//# sourceMappingURL=Onboarding.stories.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/components/navigation/progress/ProgressBar/Onboarding.stories.tsx"],
+  "sourcesContent": ["import React from \"react\";\n\nimport { StoryTemplate } from \"../../../helpers\";\nimport Onboarding from \"./index\";\nimport type { OnboardingProps } from \"./Onboarding\";\n\nexport default {\n  title: \"Navigation/Progress/Onboarding\",\n  component: Onboarding,\n  argTypes: {\n    steps: { control: false },\n    currentIndex: {\n      type: \"number\",\n      description: \"currentIndex\",\n      required: true,\n      control: {\n        type: \"number\",\n        min: 0,\n        max: 4,\n      },\n    },\n  },\n};\n\nconst Template = (args: OnboardingProps) => {\n  return <Onboarding steps={args.steps} currentIndex={args.currentIndex} />;\n};\n\nexport const Default: StoryTemplate<OnboardingProps> = Template.bind({});\n\nDefault.args = {\n  steps: [\n    {\n      key: \"getStarted\",\n      label: \"get started\",\n    },\n    {\n      key: \"genuineCheck\",\n      label: \"genuine check\",\n    },\n    {\n      key: \"recoveryPhrase\",\n      label: \"recovery phrase\",\n    },\n    {\n      key: \"hideRecovery\",\n      label: \"hide recovery phrase\",\n    },\n    {\n      key: \"connect\",\n      label: \"connect nano\",\n    },\n  ],\n  currentIndex: 0,\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAGlB,mBAAuB;AAGvB,IAAO,6BAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW;AAAA,EACX,UAAU;AAAA,IACR,OAAO,EAAE,SAAS;AAAA,IAClB,cAAc;AAAA,MACZ,MAAM;AAAA,MACN,aAAa;AAAA,MACb,UAAU;AAAA,MACV,SAAS;AAAA,QACP,MAAM;AAAA,QACN,KAAK;AAAA,QACL,KAAK;AAAA;AAAA;AAAA;AAAA;AAMb,MAAM,WAAW,CAAC,SAA0B;AAC1C,SAAO,mDAAC,sBAAD;AAAA,IAAY,OAAO,KAAK;AAAA,IAAO,cAAc,KAAK;AAAA;AAAA;AAGpD,MAAM,UAA0C,SAAS,KAAK;AAErE,QAAQ,OAAO;AAAA,EACb,OAAO;AAAA,IACL;AAAA,MACE,KAAK;AAAA,MACL,OAAO;AAAA;AAAA,IAET;AAAA,MACE,KAAK;AAAA,MACL,OAAO;AAAA;AAAA,IAET;AAAA,MACE,KAAK;AAAA,MACL,OAAO;AAAA;AAAA,IAET;AAAA,MACE,KAAK;AAAA,MACL,OAAO;AAAA;AAAA,IAET;AAAA,MACE,KAAK;AAAA,MACL,OAAO;AAAA;AAAA;AAAA,EAGX,cAAc;AAAA;",
+  "names": []
+}

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

@@ -0,0 +1,28 @@
+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 });
+  }
+  return target;
+};
+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, {
+  default: () => import_Onboarding.default
+});
+var import_Onboarding = __toModule(require("./Onboarding"));
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/components/navigation/progress/ProgressBar/index.ts"],
+  "sourcesContent": ["export { default } from \"./Onboarding\";\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA,wBAAwB;",
+  "names": []
+}

package/lib/cjs/components/navigation/progress/Stepper/Item.stories.js

@@ -0,0 +1,45 @@
+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 });
+  }
+  return target;
+};
+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, {
+  Item: () => Item,
+  default: () => Item_stories_default
+});
+var import_react = __toModule(require("react"));
+var import_index = __toModule(require("./index"));
+var Item_stories_default = {
+  title: "Navigation/Progress/Stepper/Item",
+  component: import_index.Step
+};
+const Item = (args) => /* @__PURE__ */ import_react.default.createElement("div", {
+  style: { width: "75px" }
+}, /* @__PURE__ */ import_react.default.createElement(import_index.Step, {
+  ...args
+}));
+Item.args = {
+  state: "current",
+  label: "label",
+  hideLeftSeparator: true,
+  nextState: void 0
+};
+//# sourceMappingURL=Item.stories.js.map

package/lib/cjs/components/navigation/progress/Stepper/Item.stories.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/components/navigation/progress/Stepper/Item.stories.tsx"],
+  "sourcesContent": ["import React from \"react\";\nimport { Step, StepProps } from \"./index\";\n\nexport default {\n  title: \"Navigation/Progress/Stepper/Item\",\n  component: Step,\n};\n\nexport const Item = (args: StepProps): JSX.Element => (\n  <div style={{ width: \"75px\" }}>\n    <Step {...args} />\n  </div>\n);\nItem.args = {\n  state: \"current\",\n  label: \"label\",\n  hideLeftSeparator: true,\n  nextState: undefined,\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,mBAAgC;AAEhC,IAAO,uBAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW;AAAA;AAGN,MAAM,OAAO,CAAC,SACnB,mDAAC,OAAD;AAAA,EAAK,OAAO,EAAE,OAAO;AAAA,GACnB,mDAAC,mBAAD;AAAA,KAAU;AAAA;AAGd,KAAK,OAAO;AAAA,EACV,OAAO;AAAA,EACP,OAAO;AAAA,EACP,mBAAmB;AAAA,EACnB,WAAW;AAAA;",
+  "names": []
+}

package/lib/cjs/components/navigation/progress/Stepper/ProgressSteps.stories.js

@@ -0,0 +1,60 @@
+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 });
+  }
+  return target;
+};
+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, {
+  Component: () => Component,
+  default: () => ProgressSteps_stories_default
+});
+var import_react = __toModule(require("react"));
+var import_index = __toModule(require("./index"));
+var ProgressSteps_stories_default = {
+  title: "Navigation/Progress/Stepper",
+  component: import_index.default,
+  argTypes: {
+    activeIndex: {
+      control: { type: "number" }
+    },
+    errored: {
+      control: { type: "boolean" }
+    }
+  }
+};
+const Component = (args) => /* @__PURE__ */ import_react.default.createElement(import_index.default, {
+  ...args
+});
+Component.args = {
+  steps: [
+    "Crypto Asset",
+    "Device",
+    ({ state }) => /* @__PURE__ */ import_react.default.createElement(import_index.StepText, {
+      variant: "small",
+      state,
+      textAlign: "center"
+    }, "Accounts", /* @__PURE__ */ import_react.default.createElement("br", null), "(step state: ", state, ")"),
+    "Confirmation"
+  ],
+  activeIndex: 0,
+  errored: false,
+  disabledIndexes: [1]
+};
+//# sourceMappingURL=ProgressSteps.stories.js.map

package/lib/cjs/components/navigation/progress/Stepper/ProgressSteps.stories.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/components/navigation/progress/Stepper/ProgressSteps.stories.tsx"],
+  "sourcesContent": ["import React from \"react\";\nimport ProgressSteps, { Props, StepText, StepState } from \"./index\";\n\nexport default {\n  title: \"Navigation/Progress/Stepper\",\n  component: ProgressSteps,\n  argTypes: {\n    activeIndex: {\n      control: { type: \"number\" },\n    },\n    errored: {\n      control: { type: \"boolean\" },\n    },\n  },\n};\n\nexport const Component = (args: Props): JSX.Element => <ProgressSteps {...args} />;\nComponent.args = {\n  steps: [\n    \"Crypto Asset\",\n    \"Device\",\n    ({ state }: { state: StepState }) => (\n      <StepText variant=\"small\" state={state} textAlign=\"center\">\n        Accounts\n        <br />\n        (step state: {state})\n      </StepText>\n    ),\n    \"Confirmation\",\n  ],\n  activeIndex: 0,\n  errored: false,\n  disabledIndexes: [1],\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,mBAA0D;AAE1D,IAAO,gCAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW;AAAA,EACX,UAAU;AAAA,IACR,aAAa;AAAA,MACX,SAAS,EAAE,MAAM;AAAA;AAAA,IAEnB,SAAS;AAAA,MACP,SAAS,EAAE,MAAM;AAAA;AAAA;AAAA;AAKhB,MAAM,YAAY,CAAC,SAA6B,mDAAC,sBAAD;AAAA,KAAmB;AAAA;AAC1E,UAAU,OAAO;AAAA,EACf,OAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA,CAAC,EAAE,YACD,mDAAC,uBAAD;AAAA,MAAU,SAAQ;AAAA,MAAQ;AAAA,MAAc,WAAU;AAAA,OAAS,YAEzD,mDAAC,MAAD,OAAM,iBACQ,OAAM;AAAA,IAGxB;AAAA;AAAA,EAEF,aAAa;AAAA,EACb,SAAS;AAAA,EACT,iBAAiB,CAAC;AAAA;",
+  "names": []
+}

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

@@ -0,0 +1,189 @@
+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 });
+  }
+  return target;
+};
+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, {
+  Item: () => Item,
+  Step: () => Step,
+  StepText: () => StepText,
+  default: () => Stepper_default
+});
+var import_react = __toModule(require("react"));
+var import_styled_components = __toModule(require("styled-components"));
+var import_styled_system = __toModule(require("styled-system"));
+var import__ = __toModule(require("../../../../index"));
+var import_Text = __toModule(require("../../../asorted/Text"));
+var import_Flex = __toModule(require("../../../layout/Flex"));
+const Item = {
+  Container: import_styled_components.default.div.attrs({
+    mx: "8px"
+  })`
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: ${(p) => p.theme.space[8]}px;
+    height: ${(p) => p.theme.space[8]}px;
+    ${import_styled_system.color}
+    ${import_styled_system.border}
+    ${import_styled_system.space}
+  `,
+  Spacer: import_styled_components.default.div`
+    display: flex;
+    align-self: stretch;
+    ${import_styled_system.space}
+  `,
+  Current: import_styled_components.default.div.attrs({
+    backgroundColor: "primary.c90"
+  })`
+    width: 6px;
+    height: 6px;
+    border-radius: 6px;
+    ${import_styled_system.color}
+  `,
+  Pending: import_styled_components.default.div.attrs({
+    backgroundColor: "neutral.c70"
+  })`
+    width: ${(p) => p.theme.space[2]}px;
+    height: ${(p) => p.theme.space[2]}px;
+    border-radius: ${(p) => p.theme.space[2]}px;
+    ${import_styled_system.color}
+  `,
+  Completed: () => /* @__PURE__ */ import_react.default.createElement(import__.Icons.CheckAloneMedium, {
+    size: 16
+  }),
+  Disabled: () => /* @__PURE__ */ import_react.default.createElement(import__.Icons.CloseMedium, {
+    size: 16
+  }),
+  Errored: () => /* @__PURE__ */ import_react.default.createElement(import__.Icons.CloseMedium, {
+    size: 16
+  })
+};
+const StepText = (0, import_styled_components.default)(import_Text.default)`
+  color: ${(p) => {
+  if (p.state === "errored") {
+    return p.theme.colors.error.c100;
+  }
+  if (p.state === "disabled") {
+    return p.theme.colors.neutral.c50;
+  }
+  if (p.state === "pending") {
+    return p.theme.colors.neutral.c70;
+  }
+  return p.theme.colors.neutral.c100;
+}};
+`;
+const BaseSeparator = import_styled_components.default.div`
+  flex: 1;
+  position: relative;
+  overflow-x: hidden;
+  background-color: ${(p) => p.theme.colors.neutral.c40};
+  height: 1px;
+  top: ${(p) => p.theme.space[5]}px;
+`;
+const Separator = {
+  Step: (0, import_styled_components.default)(BaseSeparator)``,
+  Item: (0, import_styled_components.default)(BaseSeparator)``
+};
+const stepContentsByState = {
+  pending: /* @__PURE__ */ import_react.default.createElement(Item.Container, null, /* @__PURE__ */ import_react.default.createElement(Item.Pending, null)),
+  current: /* @__PURE__ */ import_react.default.createElement(Item.Container, {
+    backgroundColor: "primary.c20",
+    borderRadius: "8px"
+  }, /* @__PURE__ */ import_react.default.createElement(Item.Current, null)),
+  completed: /* @__PURE__ */ import_react.default.createElement(Item.Container, {
+    color: "primary.c90",
+    backgroundColor: "primary.c20",
+    borderRadius: "8px"
+  }, /* @__PURE__ */ import_react.default.createElement(Item.Completed, null)),
+  errored: /* @__PURE__ */ import_react.default.createElement(Item.Container, {
+    color: "error.c100",
+    backgroundColor: "warning.c30",
+    borderRadius: "8px"
+  }, /* @__PURE__ */ import_react.default.createElement(Item.Errored, null)),
+  disabled: /* @__PURE__ */ import_react.default.createElement(Item.Container, {
+    color: "neutral.c50"
+  }, /* @__PURE__ */ import_react.default.createElement(Item.Disabled, null))
+};
+const Step = (0, import_react.memo)(function Step2({
+  state,
+  label: Label,
+  hideLeftSeparator,
+  nextState
+}) {
+  const inactive = state === "pending";
+  const nextInactive = state === "pending";
+  return /* @__PURE__ */ import_react.default.createElement(import_Flex.default, {
+    flexDirection: "column",
+    alignItems: "center"
+  }, /* @__PURE__ */ import_react.default.createElement(Item.Spacer, {
+    mb: 5
+  }, !hideLeftSeparator && /* @__PURE__ */ import_react.default.createElement(Separator.Item, {
+    inactive,
+    position: "left"
+  }) || /* @__PURE__ */ import_react.default.createElement(import_Flex.default, {
+    flex: "1"
+  }), stepContentsByState[state], nextState && /* @__PURE__ */ import_react.default.createElement(Separator.Item, {
+    inactive: nextInactive,
+    position: "right"
+  }) || /* @__PURE__ */ import_react.default.createElement(import_Flex.default, {
+    flex: "1"
+  })), typeof Label === "string" ? /* @__PURE__ */ import_react.default.createElement(StepText, {
+    state,
+    variant: "small"
+  }, Label) : /* @__PURE__ */ import_react.default.createElement(Label, {
+    state
+  }));
+});
+function getState(activeIndex, index, errored, disabled) {
+  if (disabled) {
+    return "disabled";
+  }
+  if (activeIndex < index) {
+    return "pending";
+  }
+  if (activeIndex === index) {
+    return errored ? "errored" : "current";
+  }
+  return "completed";
+}
+function Stepper({ steps, activeIndex = 0, errored, disabledIndexes, ...extraProps }) {
+  return /* @__PURE__ */ import_react.default.createElement(import_Flex.default, {
+    flexWrap: "nowrap",
+    justifyContent: "space-between",
+    ...extraProps
+  }, steps.map((step, idx) => {
+    const state = getState(activeIndex, idx, errored, disabledIndexes?.includes(idx));
+    const nextState = idx < steps.length - 1 ? getState(activeIndex, idx + 1) : void 0;
+    return /* @__PURE__ */ import_react.default.createElement(import_react.Fragment, {
+      key: idx
+    }, idx > 0 && /* @__PURE__ */ import_react.default.createElement(Separator.Step, {
+      inactive: state === "pending"
+    }), /* @__PURE__ */ import_react.default.createElement(Step, {
+      label: step,
+      state,
+      nextState,
+      hideLeftSeparator: idx === 0
+    }));
+  }));
+}
+var Stepper_default = (0, import_react.memo)(Stepper);
+//# sourceMappingURL=index.js.map