@ledgerhq/react-ui 0.7.5 → 0.7.7-esbuild.0

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

@@ -0,0 +1,381 @@
+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, {
+  Demo: () => Demo,
+  IndexedByKey: () => IndexedByKey,
+  Minimal: () => Minimal,
+  default: () => FlowStepper_stories_default
+});
+var import_react = __toModule(require("react"));
+var import_react_transition_group = __toModule(require("react-transition-group"));
+var import_styled_components = __toModule(require("styled-components"));
+var import_client_api = __toModule(require("@storybook/client-api"));
+var import__ = __toModule(require("../../.."));
+var import_helpers = __toModule(require("../../helpers"));
+var import_react2 = __toModule(require("react"));
+const description = `
+### A customizable flow layout.
+
+This component accepts multiple children as steps and displays the active one as well
+a progress stepper and optionally a header and/or a footer.
+
+## Usage
+
+\`\`\`js
+
+import { FlowStepper } from "@ledgerhq/react-ui"
+
+\`\`\`
+
+Each step is a child of the component, which must be a JSX element having at least a \`label\` prop.
+This label will be used by the flow stepper to populate the name of the step inside the progress stepper component.
+
+### Tip #1:
+To avoid creating specific passthrough components you can use the \`<FlowStepper.Step label="Step label">{\u2026}</FlowStepper.Step>\` helper.
+
+### Tip #2:
+You can define a specific header/footer for a given step by using the props \`header\`/\`footer\` on each step child of the component.
+
+\`\`\`jsx
+<FlowStepper
+  activeIndex={1}
+  renderStepFooter={ // Optional
+    ({activeIndex, stepsLength, children}) => (
+      <YourFooterWrapper>
+        {children}
+      </YourFooterWrapper>
+    )
+  }
+>
+  <YourStepA label="StepA" />
+  <YourStepB label="StepB" footer={<YourStepBFooter />}/>
+  <YourStepC label="StepC" />
+  <YourStepD label="StepD" />
+</FlowStepper.Indexed>
+\`\`\`
+
+### Tip #3:
+If you want to define steps that are identified by a \`string\` identifier, you can use FlowStepper with the \`activeKey\` prop and children that each have an \`itemKey\` prop.
+This allows you to not have to hardcode steps indices.
+
+\`\`\`jsx
+<FlowStepper.Indexed activeKey="stepC">
+  <YourStepA label="StepA" itemKey="stepA" />
+  <YourStepB label="StepB" itemKey="stepB" />
+  <YourStepC label="StepC" itemKey="stepC" />
+  <YourStepD label="StepD" itemKey="stepD" />
+</FlowStepper.Indexed>
+\`\`\`
+
+
+## Basic example:
+
+\`\`\`jsx
+const NB_OF_STEPS = 10;
+const [activeIndex, setActiveIndex] = React.useState(0);
+
+<FlowStepper
+  activeIndex={activeIndex}
+  header={() => (
+    <Text variant="h1">
+      Header - Page n\xB0{activeIndex + 1} / {NB_OF_STEPS}
+    </Text>
+  )}
+  footer={() => (
+    <Flex mt={6} flexDirection="column" rowGap={6} alignItems="flex-end">
+      <Box alignSelf="stretch">
+        <Divider variant="light" />
+      </Box>
+      <Flex columnGap={6}>
+        <Button
+          variant="main"
+          outline
+          disabled={activeIndex <= 0}
+          onClick={() => setActiveIndex(i => i - 1)}
+        >
+          Previous
+        </Button>
+        <Button
+          variant="main"
+          disabled={activeIndex >= NB_OF_STEPS - 1}
+          onClick={() => setActiveIndex(i => i + 1)}
+        >
+          Continue
+        </Button>
+      </Flex>
+    </Flex>
+  )}
+>
+  {new Array(NB_OF_STEPS).fill(0).map((_, index) => (
+    <FlowStepper.Step label={"Step " + index}>
+      <Text key={index} variant="body">
+        {lipsum}
+      </Text>
+    </FlowStepper.Step>
+  ))}
+</FlowStepper>
+\`\`\`
+
+
+`;
+var FlowStepper_stories_default = {
+  title: "Navigation/FlowStepper",
+  component: import__.FlowStepper,
+  argTypes: {
+    activeIndex: { control: "number", defaultValue: 0 },
+    extraProps: { control: "disabled" },
+    extraContainerProps: { control: "disabled" },
+    extraStepperProps: { control: "disabled" },
+    extraStepperContainerProps: { control: "disabled" },
+    children: { control: "disabled" },
+    renderChildren: { control: "disabled" },
+    header: { control: "disabled" },
+    stepHeaders: { control: "disabled" },
+    renderStepHeader: { control: "disabled" },
+    footer: { control: "disabled" },
+    stepFooters: { control: "disabled" },
+    renderStepFooter: { control: "disabled" }
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: description
+      }
+    }
+  }
+};
+const NB_OF_STEPS = 5;
+const Minimal = (args) => {
+  const { activeIndex, ...rest } = args;
+  const [, updateArgs] = (0, import_client_api.useArgs)();
+  return /* @__PURE__ */ import_react.default.createElement(import__.FlowStepper, {
+    activeIndex,
+    header: () => /* @__PURE__ */ import_react.default.createElement(import__.Text, {
+      variant: "h1"
+    }, "Header - Page n\xB0", activeIndex + 1, " / ", NB_OF_STEPS),
+    footer: () => /* @__PURE__ */ import_react.default.createElement(import__.Flex, {
+      mt: 6,
+      flexDirection: "column",
+      rowGap: 6,
+      alignItems: "flex-end"
+    }, /* @__PURE__ */ import_react.default.createElement(import__.Box, {
+      alignSelf: "stretch"
+    }, /* @__PURE__ */ import_react.default.createElement(import__.Divider, {
+      variant: "light"
+    })), /* @__PURE__ */ import_react.default.createElement(import__.Flex, {
+      columnGap: 6
+    }, /* @__PURE__ */ import_react.default.createElement(import__.Button, {
+      variant: "main",
+      outline: true,
+      disabled: activeIndex <= 0,
+      onClick: () => updateArgs({ activeIndex: activeIndex - 1 })
+    }, "Previous"), /* @__PURE__ */ import_react.default.createElement(import__.Button, {
+      variant: "main",
+      disabled: activeIndex >= NB_OF_STEPS - 1,
+      onClick: () => updateArgs({ activeIndex: activeIndex + 1 })
+    }, "Continue"))),
+    ...rest
+  }, [
+    ...new Array(NB_OF_STEPS).fill(0).map((_, index) => /* @__PURE__ */ import_react.default.createElement(import__.FlowStepper.Step, {
+      label: "Step " + index
+    }, /* @__PURE__ */ import_react.default.createElement(import__.Text, {
+      key: index,
+      variant: "body"
+    }, import_helpers.lipsum), /* @__PURE__ */ import_react.default.createElement(import__.Button, {
+      mt: 2,
+      onClick: () => updateArgs({ activeIndex: NB_OF_STEPS })
+    }, "Navigate to the hidden step."))),
+    /* @__PURE__ */ import_react.default.createElement(import__.FlowStepper.Step, {
+      label: "Hidden Step",
+      hidden: true
+    }, /* @__PURE__ */ import_react.default.createElement(import__.Text, {
+      key: "hidden",
+      variant: "body"
+    }, "I am hidden."))
+  ]);
+};
+const Header = ({ activeIndex, onBack }) => {
+  return /* @__PURE__ */ import_react.default.createElement(import__.Box, {
+    position: "relative",
+    my: 6
+  }, onBack && /* @__PURE__ */ import_react.default.createElement(import__.Box, {
+    position: "absolute"
+  }, /* @__PURE__ */ import_react.default.createElement(import__.Link, {
+    onClick: onBack,
+    Icon: import__.Icons.ArrowLeftMedium,
+    iconPosition: "left"
+  }, "Back")), /* @__PURE__ */ import_react.default.createElement(import__.Flex, {
+    justifyContent: "center"
+  }, /* @__PURE__ */ import_react.default.createElement(import__.Text, {
+    variant: "h2"
+  }, "Header ", activeIndex + 1)));
+};
+const Footer = ({
+  onContinue,
+  children
+}) => /* @__PURE__ */ import_react.default.createElement(import__.Flex, {
+  mt: 6,
+  flexDirection: "column",
+  rowGap: 6
+}, /* @__PURE__ */ import_react.default.createElement(import__.Box, {
+  alignSelf: "stretch"
+}, /* @__PURE__ */ import_react.default.createElement(import__.Divider, {
+  variant: "light"
+})), /* @__PURE__ */ import_react.default.createElement(import__.Flex, {
+  flexDirection: "row",
+  justifyContent: "space-between",
+  alignItems: "center"
+}, children || /* @__PURE__ */ import_react.default.createElement(import__.Flex, null), onContinue && /* @__PURE__ */ import_react.default.createElement(import__.Button, {
+  variant: "main",
+  onClick: onContinue
+}, "Continue")));
+const AnimatedItem = (0, import_styled_components.default)(import__.Flex)`
+  transition: opacity 500ms;
+  width: 100%;
+  height: 100%;
+  &.step-enter {
+    opacity: 0;
+  }
+  &.step-enter-active {
+    opacity: 1;
+  }
+  &.step-exit {
+    opacity: 1;
+  }
+  &.step-exit-active {
+    opacity: 0;
+  }
+`;
+const Item = ({ label }) => /* @__PURE__ */ import_react.default.createElement(AnimatedItem, null, /* @__PURE__ */ import_react.default.createElement(import__.Flex, {
+  position: "absolute",
+  left: "0",
+  right: "0",
+  top: "0",
+  bottom: "0",
+  alignItems: "center",
+  justifyContent: "center",
+  backgroundColor: `${label.toLowerCase()}.c50`
+}, /* @__PURE__ */ import_react.default.createElement(import__.Text, {
+  variant: "h2",
+  textTransform: "capitalize"
+}, label)));
+const steps = ["Primary", "Neutral", "Success", "Warning", "Error"];
+const StepFooter = ({ label }) => /* @__PURE__ */ import_react.default.createElement(import__.Flex, {
+  flexDirection: "row",
+  alignItems: "center"
+}, /* @__PURE__ */ import_react.default.createElement(import__.Text, {
+  whiteSpace: "pre"
+}, "Footer for step "), /* @__PURE__ */ import_react.default.createElement(import__.Tag, {
+  size: "medium",
+  type: "plain",
+  active: true
+}, label));
+const Demo = (args) => {
+  const [, updateArgs] = (0, import_client_api.useArgs)();
+  return /* @__PURE__ */ import_react.default.createElement(import__.Flex, {
+    height: "90vh"
+  }, /* @__PURE__ */ import_react.default.createElement(import__.FlowStepper, {
+    header: ({ activeIndex }) => /* @__PURE__ */ import_react.default.createElement(Header, {
+      activeIndex,
+      onBack: activeIndex > 0 ? () => {
+        updateArgs({ activeIndex: activeIndex - 1 });
+      } : void 0
+    }),
+    renderStepFooter: ({ stepsLength, activeIndex, children }) => /* @__PURE__ */ import_react.default.createElement(Footer, {
+      onContinue: activeIndex < stepsLength - 1 ? () => {
+        updateArgs({ activeIndex: activeIndex + 1 });
+      } : void 0
+    }, children),
+    extraStepperContainerProps: { my: 12 },
+    extraStepperProps: { maxWidth: "500px" },
+    renderChildren: ({ children }) => /* @__PURE__ */ import_react.default.createElement(import_react_transition_group.TransitionGroup, {
+      component: null
+    }, children),
+    ...args
+  }, steps.map((label) => /* @__PURE__ */ import_react.default.createElement(import_react_transition_group.CSSTransition, {
+    key: label,
+    label,
+    footer: /* @__PURE__ */ import_react.default.createElement(StepFooter, {
+      label
+    }),
+    timeout: 500,
+    classNames: "step",
+    mountOnEnter: true,
+    unmountOnExit: true
+  }, /* @__PURE__ */ import_react.default.createElement(Item, {
+    label
+  })))));
+};
+const StepWithNavigation = (props) => {
+  const { label, setActiveStep } = props;
+  const content = (0, import_react.useMemo)(() => {
+    return steps.map((step) => {
+      return /* @__PURE__ */ import_react.default.createElement(import__.Button, {
+        key: step,
+        disabled: step === label,
+        variant: "main",
+        onClick: () => setActiveStep(step)
+      }, 'Go to "', step, '"');
+    });
+  }, [setActiveStep, label]);
+  return /* @__PURE__ */ import_react.default.createElement(import__.Flex, {
+    flex: 1,
+    flexDirection: "column",
+    justifyContent: "center",
+    alignItems: "center",
+    padding: 4,
+    rowGap: 4,
+    backgroundColor: `${label.toLowerCase()}.c50`
+  }, content);
+};
+const IndexedByKey = (args) => {
+  const [activeStep, setActiveStep] = (0, import_react2.useState)(steps[0]);
+  return /* @__PURE__ */ import_react.default.createElement(import__.Flex, {
+    height: "90vh"
+  }, /* @__PURE__ */ import_react.default.createElement(import__.FlowStepper.Indexed, {
+    activeKey: activeStep,
+    header: ({ activeIndex }) => /* @__PURE__ */ import_react.default.createElement(Header, {
+      activeIndex,
+      onBack: activeIndex > 0 ? () => {
+        setActiveStep(steps[activeIndex - 1]);
+      } : void 0
+    }),
+    footer: ({ stepsLength, activeIndex }) => /* @__PURE__ */ import_react.default.createElement(Footer, {
+      onContinue: activeIndex < stepsLength - 1 ? () => {
+        setActiveStep(steps[activeIndex + 1]);
+      } : void 0
+    }),
+    extraStepperContainerProps: { my: 12 },
+    extraStepperProps: { maxWidth: "500px" },
+    ...args
+  }, steps.map((label) => /* @__PURE__ */ import_react.default.createElement(import__.FlowStepper.Indexed.Step, {
+    key: label,
+    label,
+    itemKey: label
+  }, /* @__PURE__ */ import_react.default.createElement(StepWithNavigation, {
+    label,
+    setActiveStep
+  })))));
+};
+//# sourceMappingURL=FlowStepper.stories.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/navigation/FlowStepper/FlowStepper.stories.tsx"],
+  "sourcesContent": ["import React, { useMemo } from \"react\";\nimport { TransitionGroup, CSSTransition } from \"react-transition-group\";\nimport styled from \"styled-components\";\n// @ts-expect-error Typings\u2026\nimport { useArgs } from \"@storybook/client-api\";\nimport { Props as FlowStepperProps } from \"./index\";\nimport { Divider, Flex, FlowStepper, Text, Button, Box, Link, Icons, Tag } from \"../../..\";\nimport type { Size as TagSize } from \"../../Tag\";\nimport { lipsum, StoryTemplate } from \"../../helpers\";\nimport { useState } from \"react\";\n\nconst description = `\n### A customizable flow layout.\n\nThis component accepts multiple children as steps and displays the active one as well\na progress stepper and optionally a header and/or a footer.\n\n## Usage\n\n\\`\\`\\`js\n\nimport { FlowStepper } from \"@ledgerhq/react-ui\"\n\n\\`\\`\\`\n\nEach step is a child of the component, which must be a JSX element having at least a \\`label\\` prop.\nThis label will be used by the flow stepper to populate the name of the step inside the progress stepper component.\n\n### Tip #1:\nTo avoid creating specific passthrough components you can use the \\`<FlowStepper.Step label=\"Step label\">{\u2026}</FlowStepper.Step>\\` helper.\n\n### Tip #2:\nYou can define a specific header/footer for a given step by using the props \\`header\\`/\\`footer\\` on each step child of the component.\n\n\\`\\`\\`jsx\n<FlowStepper\n  activeIndex={1}\n  renderStepFooter={ // Optional\n    ({activeIndex, stepsLength, children}) => (\n      <YourFooterWrapper>\n        {children}\n      </YourFooterWrapper>\n    )\n  }\n>\n  <YourStepA label=\"StepA\" />\n  <YourStepB label=\"StepB\" footer={<YourStepBFooter />}/>\n  <YourStepC label=\"StepC\" />\n  <YourStepD label=\"StepD\" />\n</FlowStepper.Indexed>\n\\`\\`\\`\n\n### Tip #3:\nIf you want to define steps that are identified by a \\`string\\` identifier, you can use FlowStepper with the \\`activeKey\\` prop and children that each have an \\`itemKey\\` prop.\nThis allows you to not have to hardcode steps indices.\n\n\\`\\`\\`jsx\n<FlowStepper.Indexed activeKey=\"stepC\">\n  <YourStepA label=\"StepA\" itemKey=\"stepA\" />\n  <YourStepB label=\"StepB\" itemKey=\"stepB\" />\n  <YourStepC label=\"StepC\" itemKey=\"stepC\" />\n  <YourStepD label=\"StepD\" itemKey=\"stepD\" />\n</FlowStepper.Indexed>\n\\`\\`\\`\n\n\n## Basic example:\n\n\\`\\`\\`jsx\nconst NB_OF_STEPS = 10;\nconst [activeIndex, setActiveIndex] = React.useState(0);\n\n<FlowStepper\n  activeIndex={activeIndex}\n  header={() => (\n    <Text variant=\"h1\">\n      Header - Page n\u00B0{activeIndex + 1} / {NB_OF_STEPS}\n    </Text>\n  )}\n  footer={() => (\n    <Flex mt={6} flexDirection=\"column\" rowGap={6} alignItems=\"flex-end\">\n      <Box alignSelf=\"stretch\">\n        <Divider variant=\"light\" />\n      </Box>\n      <Flex columnGap={6}>\n        <Button\n          variant=\"main\"\n          outline\n          disabled={activeIndex <= 0}\n          onClick={() => setActiveIndex(i => i - 1)}\n        >\n          Previous\n        </Button>\n        <Button\n          variant=\"main\"\n          disabled={activeIndex >= NB_OF_STEPS - 1}\n          onClick={() => setActiveIndex(i => i + 1)}\n        >\n          Continue\n        </Button>\n      </Flex>\n    </Flex>\n  )}\n>\n  {new Array(NB_OF_STEPS).fill(0).map((_, index) => (\n    <FlowStepper.Step label={\"Step \" + index}>\n      <Text key={index} variant=\"body\">\n        {lipsum}\n      </Text>\n    </FlowStepper.Step>\n  ))}\n</FlowStepper>\n\\`\\`\\`\n\n\n`;\n\nexport default {\n  title: \"Navigation/FlowStepper\",\n  component: FlowStepper,\n  argTypes: {\n    activeIndex: { control: \"number\", defaultValue: 0 },\n    extraProps: { control: \"disabled\" },\n    extraContainerProps: { control: \"disabled\" },\n    extraStepperProps: { control: \"disabled\" },\n    extraStepperContainerProps: { control: \"disabled\" },\n    children: { control: \"disabled\" },\n    renderChildren: { control: \"disabled\" },\n    header: { control: \"disabled\" },\n    stepHeaders: { control: \"disabled\" },\n    renderStepHeader: { control: \"disabled\" },\n    footer: { control: \"disabled\" },\n    stepFooters: { control: \"disabled\" },\n    renderStepFooter: { control: \"disabled\" },\n  },\n  parameters: {\n    docs: {\n      description: {\n        component: description,\n      },\n    },\n  },\n};\n\nconst NB_OF_STEPS = 5;\nexport const Minimal: StoryTemplate<FlowStepperProps<unknown>> = (args) => {\n  const { activeIndex, ...rest } = args;\n  const [, updateArgs] = useArgs();\n\n  return (\n    <FlowStepper\n      activeIndex={activeIndex}\n      header={() => (\n        <Text variant=\"h1\">\n          Header - Page n\u00B0{activeIndex + 1} / {NB_OF_STEPS}\n        </Text>\n      )}\n      footer={() => (\n        <Flex mt={6} flexDirection=\"column\" rowGap={6} alignItems=\"flex-end\">\n          <Box alignSelf=\"stretch\">\n            <Divider variant=\"light\" />\n          </Box>\n          <Flex columnGap={6}>\n            <Button\n              variant=\"main\"\n              outline\n              disabled={activeIndex <= 0}\n              onClick={() => updateArgs({ activeIndex: activeIndex - 1 })}\n            >\n              Previous\n            </Button>\n            <Button\n              variant=\"main\"\n              disabled={activeIndex >= NB_OF_STEPS - 1}\n              onClick={() => updateArgs({ activeIndex: activeIndex + 1 })}\n            >\n              Continue\n            </Button>\n          </Flex>\n        </Flex>\n      )}\n      {...rest}\n    >\n      {[\n        ...new Array(NB_OF_STEPS).fill(0).map((_, index) => (\n          <FlowStepper.Step label={\"Step \" + index}>\n            <Text key={index} variant=\"body\">\n              {lipsum}\n            </Text>\n            <Button mt={2} onClick={() => updateArgs({ activeIndex: NB_OF_STEPS })}>\n              Navigate to the hidden step.\n            </Button>\n          </FlowStepper.Step>\n        )),\n        <FlowStepper.Step label=\"Hidden Step\" hidden>\n          <Text key=\"hidden\" variant=\"body\">\n            I am hidden.\n          </Text>\n        </FlowStepper.Step>,\n      ]}\n    </FlowStepper>\n  );\n};\n\nconst Header = ({ activeIndex, onBack }: { activeIndex: number; onBack?: () => void }) => {\n  return (\n    <Box position=\"relative\" my={6}>\n      {onBack && (\n        <Box position=\"absolute\">\n          <Link onClick={onBack} Icon={Icons.ArrowLeftMedium} iconPosition=\"left\">\n            Back\n          </Link>\n        </Box>\n      )}\n      <Flex justifyContent=\"center\">\n        <Text variant=\"h2\">Header {activeIndex + 1}</Text>\n      </Flex>\n    </Box>\n  );\n};\n\nconst Footer = ({\n  onContinue,\n  children,\n}: {\n  onContinue?: () => void;\n  children?: React.ReactNode;\n}) => (\n  <Flex mt={6} flexDirection=\"column\" rowGap={6}>\n    <Box alignSelf=\"stretch\">\n      <Divider variant=\"light\" />\n    </Box>\n    <Flex flexDirection=\"row\" justifyContent=\"space-between\" alignItems=\"center\">\n      {children || <Flex />}\n      {onContinue && (\n        <Button variant=\"main\" onClick={onContinue}>\n          Continue\n        </Button>\n      )}\n    </Flex>\n  </Flex>\n);\n\nconst AnimatedItem = styled(Flex)`\n  transition: opacity 500ms;\n  width: 100%;\n  height: 100%;\n  &.step-enter {\n    opacity: 0;\n  }\n  &.step-enter-active {\n    opacity: 1;\n  }\n  &.step-exit {\n    opacity: 1;\n  }\n  &.step-exit-active {\n    opacity: 0;\n  }\n`;\nconst Item = ({ label }: { label: string }) => (\n  <AnimatedItem>\n    <Flex\n      position=\"absolute\"\n      left=\"0\"\n      right=\"0\"\n      top=\"0\"\n      bottom=\"0\"\n      alignItems=\"center\"\n      justifyContent=\"center\"\n      backgroundColor={`${label.toLowerCase()}.c50`}\n    >\n      <Text variant=\"h2\" textTransform=\"capitalize\">\n        {label}\n      </Text>\n    </Flex>\n  </AnimatedItem>\n);\n\nconst steps = [\"Primary\", \"Neutral\", \"Success\", \"Warning\", \"Error\"];\n\nconst StepFooter = ({ label }: { label: string }) => (\n  <Flex flexDirection=\"row\" alignItems=\"center\">\n    <Text whiteSpace=\"pre\">Footer for step </Text>\n    <Tag size={\"medium\" as TagSize} type=\"plain\" active>\n      {label}\n    </Tag>\n  </Flex>\n);\n\nexport const Demo: StoryTemplate<FlowStepperProps<unknown>> = (args) => {\n  const [, updateArgs] = useArgs();\n\n  return (\n    <Flex height=\"90vh\">\n      <FlowStepper\n        header={({ activeIndex }) => (\n          <Header\n            activeIndex={activeIndex}\n            onBack={\n              activeIndex > 0\n                ? () => {\n                    updateArgs({ activeIndex: activeIndex - 1 });\n                  }\n                : undefined\n            }\n          />\n        )}\n        renderStepFooter={({ stepsLength, activeIndex, children }) => (\n          <Footer\n            onContinue={\n              activeIndex < stepsLength - 1\n                ? () => {\n                    updateArgs({ activeIndex: activeIndex + 1 });\n                  }\n                : undefined\n            }\n          >\n            {children}\n          </Footer>\n        )}\n        extraStepperContainerProps={{ my: 12 }}\n        extraStepperProps={{ maxWidth: \"500px\" }}\n        renderChildren={({ children }) => (\n          <TransitionGroup component={null}>{children}</TransitionGroup>\n        )}\n        {...args}\n      >\n        {steps.map((label) => (\n          <CSSTransition\n            key={label}\n            label={label}\n            footer={<StepFooter label={label} />}\n            timeout={500}\n            classNames=\"step\"\n            mountOnEnter\n            unmountOnExit\n          >\n            <Item label={label} />\n          </CSSTransition>\n        ))}\n      </FlowStepper>\n    </Flex>\n  );\n};\n\nconst StepWithNavigation = (props: { label: string; setActiveStep: (arg: string) => void }) => {\n  const { label, setActiveStep } = props;\n  const content = useMemo(() => {\n    return steps.map((step) => {\n      return (\n        <Button\n          key={step}\n          disabled={step === label}\n          variant=\"main\"\n          onClick={() => setActiveStep(step)}\n        >\n          Go to \"{step}\"\n        </Button>\n      );\n    });\n  }, [setActiveStep, label]);\n  return (\n    <Flex\n      flex={1}\n      flexDirection=\"column\"\n      justifyContent=\"center\"\n      alignItems=\"center\"\n      padding={4}\n      rowGap={4}\n      backgroundColor={`${label.toLowerCase()}.c50`}\n    >\n      {content}\n    </Flex>\n  );\n};\n\nexport const IndexedByKey: StoryTemplate<FlowStepperProps<unknown>> = (args) => {\n  const [activeStep, setActiveStep] = useState(steps[0]);\n  return (\n    <Flex height=\"90vh\">\n      <FlowStepper.Indexed\n        activeKey={activeStep}\n        header={({ activeIndex }) => (\n          <Header\n            activeIndex={activeIndex}\n            onBack={\n              activeIndex > 0\n                ? () => {\n                    setActiveStep(steps[activeIndex - 1]);\n                  }\n                : undefined\n            }\n          />\n        )}\n        footer={({ stepsLength, activeIndex }) => (\n          <Footer\n            onContinue={\n              activeIndex < stepsLength - 1\n                ? () => {\n                    setActiveStep(steps[activeIndex + 1]);\n                  }\n                : undefined\n            }\n          />\n        )}\n        extraStepperContainerProps={{ my: 12 }}\n        extraStepperProps={{ maxWidth: \"500px\" }}\n        {...args}\n      >\n        {steps.map((label) => (\n          <FlowStepper.Indexed.Step key={label} label={label} itemKey={label}>\n            <StepWithNavigation label={label} setActiveStep={setActiveStep} />\n          </FlowStepper.Indexed.Step>\n        ))}\n      </FlowStepper.Indexed>\n    </Flex>\n  );\n};\n"],
+  "mappings": "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",
+  "names": []
+}

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

@@ -0,0 +1,109 @@
+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: () => 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(".."));
+function FlowStepper({
+  activeIndex,
+  header,
+  renderStepHeader,
+  footer,
+  renderStepFooter,
+  extraProps,
+  extraContainerProps,
+  extraStepperProps,
+  extraStepperContainerProps,
+  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;
+    }
+    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"
+  }, 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);
+}
+FlowStepper.Step = Step;
+var FlowStepper_default = FlowStepper;
+function FlowStepperIndexed(props) {
+  const { activeKey, children, ...otherProps } = props;
+  const activeIndex = import_react.default.Children.toArray(children).findIndex((child) => {
+    const res = (0, import_react_is.isElement)(child) && child.props.itemKey === activeKey;
+    return res;
+  });
+  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);
+}
+FlowStepperIndexed.Step = IndexedStep;
+FlowStepper.Indexed = FlowStepperIndexed;
+//# sourceMappingURL=index.js.map

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

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

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

@@ -0,0 +1,71 @@
+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, {
+  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"));
+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"));
+};
+//# sourceMappingURL=Header.stories.js.map

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

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