@ledgerhq/react-ui 0.8.1 → 0.8.2-next.0

package/lib/cjs/components/layout/List/VerticalTimeline/TimelineIndicator.js

@@ -0,0 +1,96 @@
+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: () => TimelineIndicator
+});
+var import_react = __toModule(require("react"));
+var import_CircledCheckSolidMedium = __toModule(require("@ledgerhq/icons-ui/react/CircledCheckSolidMedium"));
+var import_styled_components = __toModule(require("styled-components"));
+var import_Flex = __toModule(require("../../Flex"));
+const TopSegment = (0, import_styled_components.default)(import_Flex.default)`
+  height: ${(p) => p.status === "inactive" ? "18px" : "20px"};
+  border-width: ${(p) => p.hidden ? 0 : 1}px;
+  border-style: dashed;
+  border-color: ${(p) => p.status === "inactive" ? p.theme.colors.neutral.c50 : p.theme.colors.primary.c80};
+  background: ${(p) => p.status !== "inactive" && p.theme.colors.primary.c80};
+  margin-top: ${(p) => p.status === "inactive" && "2px"};
+`;
+const BottomSegment = (0, import_styled_components.default)(import_Flex.default)`
+  flex: 1;
+  border-width: ${(p) => p.hidden ? 0 : 1}px;
+  border-style: dashed;
+  border-color: ${(p) => p.status === "completed" ? p.theme.colors.primary.c80 : p.theme.colors.neutral.c50};
+  background: ${(p) => p.status === "completed" && p.theme.colors.primary.c80};
+`;
+const getIconBackground = (theme, status, isLastItem) => {
+  if (status === "completed") {
+    return "transparent";
+  } else if (isLastItem) {
+    return theme.colors.success.c10;
+  } else if (status === "active") {
+    return theme.colors.neutral.c40;
+  }
+  return theme.colors.background.main;
+};
+const getIconBorder = (theme, status, isLastItem) => {
+  if (isLastItem) {
+    return theme.colors.success.c100;
+  } else if (status === "inactive") {
+    return theme.colors.neutral.c50;
+  }
+  return theme.colors.primary.c80;
+};
+const CenterSegment = (0, import_styled_components.default)(import_Flex.default)`
+  border-radius: 9999px;
+  width: 20px;
+  height: 20px;
+  background: ${(p) => getIconBackground(p.theme, p.status, p.isLastItem)};
+  border: 2px solid ${(p) => getIconBorder(p.theme, p.status, p.isLastItem)};
+  align-items: center;
+  justify-content: center;
+`;
+const IconWrapper = (0, import_styled_components.default)(import_Flex.default)`
+  flex: none;
+`;
+function TimelineIndicator({ status, isFirstItem, isLastItem, ...props }) {
+  const { colors } = (0, import_styled_components.useTheme)();
+  return /* @__PURE__ */ import_react.default.createElement(import_Flex.default, {
+    flexDirection: "column",
+    alignItems: "center",
+    ...props
+  }, /* @__PURE__ */ import_react.default.createElement(TopSegment, {
+    status,
+    hidden: isFirstItem
+  }), /* @__PURE__ */ import_react.default.createElement(CenterSegment, {
+    status,
+    isLastItem
+  }, status === "completed" && /* @__PURE__ */ import_react.default.createElement(IconWrapper, null, /* @__PURE__ */ import_react.default.createElement(import_CircledCheckSolidMedium.default, {
+    color: isLastItem ? colors.success.c100 : colors.primary.c80,
+    size: 24
+  }))), /* @__PURE__ */ import_react.default.createElement(BottomSegment, {
+    status,
+    hidden: isLastItem
+  }));
+}
+//# sourceMappingURL=TimelineIndicator.js.map

package/lib/cjs/components/layout/List/VerticalTimeline/TimelineIndicator.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/components/layout/List/VerticalTimeline/TimelineIndicator.tsx"],
+  "sourcesContent": ["import React from \"react\";\nimport CircledCheckSolidMedium from \"@ledgerhq/icons-ui/react/CircledCheckSolidMedium\";\nimport styled, { useTheme } from \"styled-components\";\n\nimport Flex, { FlexBoxProps as FlexProps } from \"../../Flex\";\nimport { ItemStatus } from \"./index\";\nimport { Theme } from \"src/styles/theme\";\n\nconst TopSegment = styled(Flex)<{ status: ItemStatus; hidden?: boolean }>`\n  height: ${(p) => (p.status === \"inactive\" ? \"18px\" : \"20px\")};\n  border-width: ${(p) => (p.hidden ? 0 : 1)}px;\n  border-style: dashed;\n  border-color: ${(p) =>\n    p.status === \"inactive\" ? p.theme.colors.neutral.c50 : p.theme.colors.primary.c80};\n  background: ${(p) => p.status !== \"inactive\" && p.theme.colors.primary.c80};\n  margin-top: ${(p) => p.status === \"inactive\" && \"2px\"};\n`;\n\nconst BottomSegment = styled(Flex)<{ status: ItemStatus; hidden?: boolean }>`\n  flex: 1;\n  border-width: ${(p) => (p.hidden ? 0 : 1)}px;\n  border-style: dashed;\n  border-color: ${(p) =>\n    p.status === \"completed\" ? p.theme.colors.primary.c80 : p.theme.colors.neutral.c50};\n  background: ${(p) => p.status === \"completed\" && p.theme.colors.primary.c80};\n`;\n\nconst getIconBackground = (theme: Theme, status: ItemStatus, isLastItem?: boolean) => {\n  if (status === \"completed\") {\n    return \"transparent\";\n  } else if (isLastItem) {\n    return theme.colors.success.c10;\n  } else if (status === \"active\") {\n    return theme.colors.neutral.c40;\n  }\n  return theme.colors.background.main;\n};\n\nconst getIconBorder = (theme: Theme, status: ItemStatus, isLastItem?: boolean) => {\n  if (isLastItem) {\n    return theme.colors.success.c100;\n  } else if (status === \"inactive\") {\n    return theme.colors.neutral.c50;\n  }\n  return theme.colors.primary.c80;\n};\n\nconst CenterSegment = styled(Flex)<{ status: ItemStatus; isLastItem?: boolean }>`\n  border-radius: 9999px;\n  width: 20px;\n  height: 20px;\n  background: ${(p) => getIconBackground(p.theme, p.status, p.isLastItem)};\n  border: 2px solid ${(p) => getIconBorder(p.theme, p.status, p.isLastItem)};\n  align-items: center;\n  justify-content: center;\n`;\n\nconst IconWrapper = styled(Flex)`\n  flex: none;\n`;\n\nexport type Props = FlexProps & {\n  status: \"inactive\" | \"active\" | \"completed\";\n  isFirstItem?: boolean;\n  isLastItem?: boolean;\n};\n\nexport default function TimelineIndicator({ status, isFirstItem, isLastItem, ...props }: Props) {\n  const { colors } = useTheme();\n\n  return (\n    <Flex flexDirection=\"column\" alignItems=\"center\" {...props}>\n      <TopSegment status={status} hidden={isFirstItem} />\n      <CenterSegment status={status} isLastItem={isLastItem}>\n        {status === \"completed\" && (\n          <IconWrapper>\n            <CircledCheckSolidMedium\n              color={isLastItem ? colors.success.c100 : colors.primary.c80}\n              size={24}\n            />\n          </IconWrapper>\n        )}\n      </CenterSegment>\n      <BottomSegment status={status} hidden={isLastItem} />\n    </Flex>\n  );\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,qCAAoC;AACpC,+BAAiC;AAEjC,kBAAgD;AAIhD,MAAM,aAAa,sCAAO;AAAA,YACd,CAAC,MAAO,EAAE,WAAW,aAAa,SAAS;AAAA,kBACrC,CAAC,MAAO,EAAE,SAAS,IAAI;AAAA;AAAA,kBAEvB,CAAC,MACf,EAAE,WAAW,aAAa,EAAE,MAAM,OAAO,QAAQ,MAAM,EAAE,MAAM,OAAO,QAAQ;AAAA,gBAClE,CAAC,MAAM,EAAE,WAAW,cAAc,EAAE,MAAM,OAAO,QAAQ;AAAA,gBACzD,CAAC,MAAM,EAAE,WAAW,cAAc;AAAA;AAGlD,MAAM,gBAAgB,sCAAO;AAAA;AAAA,kBAEX,CAAC,MAAO,EAAE,SAAS,IAAI;AAAA;AAAA,kBAEvB,CAAC,MACf,EAAE,WAAW,cAAc,EAAE,MAAM,OAAO,QAAQ,MAAM,EAAE,MAAM,OAAO,QAAQ;AAAA,gBACnE,CAAC,MAAM,EAAE,WAAW,eAAe,EAAE,MAAM,OAAO,QAAQ;AAAA;AAG1E,MAAM,oBAAoB,CAAC,OAAc,QAAoB,eAAyB;AACpF,MAAI,WAAW,aAAa;AAC1B,WAAO;AAAA,aACE,YAAY;AACrB,WAAO,MAAM,OAAO,QAAQ;AAAA,aACnB,WAAW,UAAU;AAC9B,WAAO,MAAM,OAAO,QAAQ;AAAA;AAE9B,SAAO,MAAM,OAAO,WAAW;AAAA;AAGjC,MAAM,gBAAgB,CAAC,OAAc,QAAoB,eAAyB;AAChF,MAAI,YAAY;AACd,WAAO,MAAM,OAAO,QAAQ;AAAA,aACnB,WAAW,YAAY;AAChC,WAAO,MAAM,OAAO,QAAQ;AAAA;AAE9B,SAAO,MAAM,OAAO,QAAQ;AAAA;AAG9B,MAAM,gBAAgB,sCAAO;AAAA;AAAA;AAAA;AAAA,gBAIb,CAAC,MAAM,kBAAkB,EAAE,OAAO,EAAE,QAAQ,EAAE;AAAA,sBACxC,CAAC,MAAM,cAAc,EAAE,OAAO,EAAE,QAAQ,EAAE;AAAA;AAAA;AAAA;AAKhE,MAAM,cAAc,sCAAO;AAAA;AAAA;AAUZ,2BAA2B,EAAE,QAAQ,aAAa,eAAe,SAAgB;AAC9F,QAAM,EAAE,WAAW;AAEnB,SACE,mDAAC,qBAAD;AAAA,IAAM,eAAc;AAAA,IAAS,YAAW;AAAA,OAAa;AAAA,KACnD,mDAAC,YAAD;AAAA,IAAY;AAAA,IAAgB,QAAQ;AAAA,MACpC,mDAAC,eAAD;AAAA,IAAe;AAAA,IAAgB;AAAA,KAC5B,WAAW,eACV,mDAAC,aAAD,MACE,mDAAC,wCAAD;AAAA,IACE,OAAO,aAAa,OAAO,QAAQ,OAAO,OAAO,QAAQ;AAAA,IACzD,MAAM;AAAA,QAKd,mDAAC,eAAD;AAAA,IAAe;AAAA,IAAgB,QAAQ;AAAA;AAAA;",
+  "names": []
+}

package/lib/cjs/components/layout/List/VerticalTimeline/TimelineItem.js

@@ -0,0 +1,95 @@
+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: () => TimelineItem
+});
+var import_react = __toModule(require("react"));
+var import_styled_components = __toModule(require("styled-components"));
+var import__2 = __toModule(require("../.."));
+var import__3 = __toModule(require("../../.."));
+var import_Tag = __toModule(require("../../../Tag"));
+var import_TimelineIndicator = __toModule(require("./TimelineIndicator"));
+const getContainerBackground = (theme, status, isLastItem) => {
+  if (isLastItem && status === "completed") {
+    return theme.colors.success.c30;
+  } else if (status === "completed") {
+    return theme.colors.primary.c20;
+  } else if (status === "active") {
+    return theme.colors.neutral.c20;
+  }
+  return theme.colors.neutral.c30;
+};
+const getContainerBorder = (theme, status, isLastItem) => {
+  if (isLastItem && status === "completed") {
+    return theme.colors.success.c30;
+  } else if (isLastItem && status === "active") {
+    return theme.colors.success.c100;
+  } else if (status === "completed") {
+    return theme.colors.primary.c20;
+  } else if (status === "active") {
+    return theme.colors.primary.c80;
+  }
+  return theme.colors.neutral.c30;
+};
+const Container = (0, import_styled_components.default)(import__2.Flex)`
+  flex: 1;
+  width: 404px;
+  border-radius: ${(p) => p.theme.radii[2]}px;
+  background: ${(p) => getContainerBackground(p.theme, p.status, p.isLastItem)};
+  border: 1px solid ${(p) => getContainerBorder(p.theme, p.status, p.isLastItem)};
+  padding: 20px 16px;
+`;
+const TimelineIndicatorContentHeader = (0, import_styled_components.default)(import__2.Flex)`
+  justify-content: space-between;
+`;
+function TimelineItem({ item, isFirstItem, isLastItem }) {
+  const { colors } = (0, import_styled_components.useTheme)();
+  return /* @__PURE__ */ import_react.default.createElement(import__2.Flex, {
+    flexDirection: "row"
+  }, /* @__PURE__ */ import_react.default.createElement(import_TimelineIndicator.default, {
+    status: item.status,
+    isFirstItem,
+    isLastItem,
+    mr: 4
+  }), /* @__PURE__ */ import_react.default.createElement(Container, {
+    status: item.status,
+    isLastItem,
+    mb: 4,
+    flexDirection: "column"
+  }, /* @__PURE__ */ import_react.default.createElement(TimelineIndicatorContentHeader, null, /* @__PURE__ */ import_react.default.createElement(import__3.Text, {
+    variant: "body",
+    color: item.status === "inactive" ? "neutral.c80" : isLastItem ? "success.c100" : "primary.c90"
+  }, item.title), item?.estimatedTime && item.status === "active" && /* @__PURE__ */ import_react.default.createElement(import_Tag.default, {
+    size: "small",
+    type: "opacity",
+    active: true,
+    disabled: true,
+    textProps: { color: colors.neutral.c100 }
+  }, `${item.estimatedTime / 60} min`)), item.renderBody && item.status === "active" && /* @__PURE__ */ import_react.default.createElement(import__2.Flex, {
+    position: "relative"
+  }, /* @__PURE__ */ import_react.default.createElement(import__2.Flex, {
+    pt: 6
+  }, item.renderBody(item.status === "active")))));
+}
+//# sourceMappingURL=TimelineItem.js.map

package/lib/cjs/components/layout/List/VerticalTimeline/TimelineItem.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/components/layout/List/VerticalTimeline/TimelineItem.tsx"],
+  "sourcesContent": ["import React from \"react\";\n\nimport { Theme } from \"src/styles/theme\";\nimport styled, { useTheme } from \"styled-components\";\n\nimport { Item, ItemStatus } from \".\";\nimport { Flex } from \"../..\";\nimport { Text } from \"../../..\";\nimport Tag from \"../../../Tag\";\n\nimport TimelineIndicator from \"./TimelineIndicator\";\n\nexport type Props = {\n  item: Item;\n  isFirstItem?: boolean;\n  isLastItem?: boolean;\n};\n\nconst getContainerBackground = (theme: Theme, status: ItemStatus, isLastItem?: boolean) => {\n  if (isLastItem && status === \"completed\") {\n    return theme.colors.success.c30;\n  } else if (status === \"completed\") {\n    return theme.colors.primary.c20;\n  } else if (status === \"active\") {\n    return theme.colors.neutral.c20;\n  }\n  return theme.colors.neutral.c30;\n};\n\nconst getContainerBorder = (theme: Theme, status: ItemStatus, isLastItem?: boolean) => {\n  if (isLastItem && status === \"completed\") {\n    return theme.colors.success.c30;\n  } else if (isLastItem && status === \"active\") {\n    return theme.colors.success.c100;\n  } else if (status === \"completed\") {\n    return theme.colors.primary.c20;\n  } else if (status === \"active\") {\n    return theme.colors.primary.c80;\n  }\n  return theme.colors.neutral.c30;\n};\n\nconst Container = styled(Flex)<{ status: ItemStatus; isLastItem?: boolean }>`\n  flex: 1;\n  width: 404px;\n  border-radius: ${(p) => p.theme.radii[2]}px;\n  background: ${(p) => getContainerBackground(p.theme, p.status, p.isLastItem)};\n  border: 1px solid ${(p) => getContainerBorder(p.theme, p.status, p.isLastItem)};\n  padding: 20px 16px;\n`;\n\nconst TimelineIndicatorContentHeader = styled(Flex)`\n  justify-content: space-between;\n`;\n\nexport default function TimelineItem({ item, isFirstItem, isLastItem }: Props) {\n  const { colors } = useTheme();\n\n  return (\n    <Flex flexDirection=\"row\">\n      <TimelineIndicator\n        status={item.status}\n        isFirstItem={isFirstItem}\n        isLastItem={isLastItem}\n        mr={4}\n      />\n      <Container status={item.status} isLastItem={isLastItem} mb={4} flexDirection=\"column\">\n        <TimelineIndicatorContentHeader>\n          <Text\n            variant=\"body\"\n            color={\n              item.status === \"inactive\"\n                ? \"neutral.c80\"\n                : isLastItem\n                ? \"success.c100\"\n                : \"primary.c90\"\n            }\n          >\n            {item.title}\n          </Text>\n          {item?.estimatedTime && item.status === \"active\" && (\n            <Tag\n              size=\"small\"\n              type=\"opacity\"\n              active\n              disabled\n              textProps={{ color: colors.neutral.c100 }}\n            >{`${item.estimatedTime / 60} min`}</Tag>\n          )}\n        </TimelineIndicatorContentHeader>\n        {item.renderBody && item.status === \"active\" && (\n          <Flex position=\"relative\">\n            <Flex pt={6}>{item.renderBody(item.status === \"active\")}</Flex>\n          </Flex>\n        )}\n      </Container>\n    </Flex>\n  );\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAGlB,+BAAiC;AAGjC,gBAAqB;AACrB,gBAAqB;AACrB,iBAAgB;AAEhB,+BAA8B;AAQ9B,MAAM,yBAAyB,CAAC,OAAc,QAAoB,eAAyB;AACzF,MAAI,cAAc,WAAW,aAAa;AACxC,WAAO,MAAM,OAAO,QAAQ;AAAA,aACnB,WAAW,aAAa;AACjC,WAAO,MAAM,OAAO,QAAQ;AAAA,aACnB,WAAW,UAAU;AAC9B,WAAO,MAAM,OAAO,QAAQ;AAAA;AAE9B,SAAO,MAAM,OAAO,QAAQ;AAAA;AAG9B,MAAM,qBAAqB,CAAC,OAAc,QAAoB,eAAyB;AACrF,MAAI,cAAc,WAAW,aAAa;AACxC,WAAO,MAAM,OAAO,QAAQ;AAAA,aACnB,cAAc,WAAW,UAAU;AAC5C,WAAO,MAAM,OAAO,QAAQ;AAAA,aACnB,WAAW,aAAa;AACjC,WAAO,MAAM,OAAO,QAAQ;AAAA,aACnB,WAAW,UAAU;AAC9B,WAAO,MAAM,OAAO,QAAQ;AAAA;AAE9B,SAAO,MAAM,OAAO,QAAQ;AAAA;AAG9B,MAAM,YAAY,sCAAO;AAAA;AAAA;AAAA,mBAGN,CAAC,MAAM,EAAE,MAAM,MAAM;AAAA,gBACxB,CAAC,MAAM,uBAAuB,EAAE,OAAO,EAAE,QAAQ,EAAE;AAAA,sBAC7C,CAAC,MAAM,mBAAmB,EAAE,OAAO,EAAE,QAAQ,EAAE;AAAA;AAAA;AAIrE,MAAM,iCAAiC,sCAAO;AAAA;AAAA;AAI/B,sBAAsB,EAAE,MAAM,aAAa,cAAqB;AAC7E,QAAM,EAAE,WAAW;AAEnB,SACE,mDAAC,gBAAD;AAAA,IAAM,eAAc;AAAA,KAClB,mDAAC,kCAAD;AAAA,IACE,QAAQ,KAAK;AAAA,IACb;AAAA,IACA;AAAA,IACA,IAAI;AAAA,MAEN,mDAAC,WAAD;AAAA,IAAW,QAAQ,KAAK;AAAA,IAAQ;AAAA,IAAwB,IAAI;AAAA,IAAG,eAAc;AAAA,KAC3E,mDAAC,gCAAD,MACE,mDAAC,gBAAD;AAAA,IACE,SAAQ;AAAA,IACR,OACE,KAAK,WAAW,aACZ,gBACA,aACA,iBACA;AAAA,KAGL,KAAK,QAEP,MAAM,iBAAiB,KAAK,WAAW,YACtC,mDAAC,oBAAD;AAAA,IACE,MAAK;AAAA,IACL,MAAK;AAAA,IACL,QAAM;AAAA,IACN,UAAQ;AAAA,IACR,WAAW,EAAE,OAAO,OAAO,QAAQ;AAAA,KACnC,GAAG,KAAK,gBAAgB,YAG7B,KAAK,cAAc,KAAK,WAAW,YAClC,mDAAC,gBAAD;AAAA,IAAM,UAAS;AAAA,KACb,mDAAC,gBAAD;AAAA,IAAM,IAAI;AAAA,KAAI,KAAK,WAAW,KAAK,WAAW;AAAA;",
+  "names": []
+}

package/lib/cjs/components/layout/List/VerticalTimeline/VerticalTimeline.stories.js

@@ -0,0 +1,138 @@
+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: () => VerticalTimeline_stories_default
+});
+var import_react = __toModule(require("react"));
+var import_Flex = __toModule(require("../../Flex"));
+var import_Text = __toModule(require("../../../asorted/Text"));
+var import__ = __toModule(require("."));
+const description = `
+### A Vertical Timeline
+
+This components accepts an Array of object like this:
+## Usage
+
+\`\`\`js
+
+const steps = [
+    {
+      /**
+       * status is an ItemStatus which can be inactive, active or completed
+       */
+      status: ItemStatus;
+      /**
+       * title is the title of the step
+       */
+      title: string;
+      /**
+       * renderBody is an optional prop which is a ReactNode to be rendered next to the title
+       */
+      renderBody?: (isDisplayed?: boolean) => ReactNode;
+      /**
+       * estimatedTime is an optional prop that take the estimated time to complete the time in second and display it in a tag in minute
+       */
+       estimatedTime?: number;
+    },
+    {  
+      status: ItemStatus;
+      title: string;
+      renderBody?: (isDisplayed?: boolean) => ReactNode;
+      estimatedTime?: number;
+    }
+  ];
+
+<VerticalTimeline steps={steps as any} />
+\`\`\`
+`;
+var VerticalTimeline_stories_default = {
+  title: "Layout/List/VerticalTimeline",
+  argTypes: {
+    steps: {
+      control: "disabled"
+    }
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: description
+      }
+    }
+  }
+};
+const Template = () => {
+  const defaultItems = [
+    {
+      status: "active",
+      title: "Nano paired"
+    },
+    {
+      status: "inactive",
+      title: "Set your PIN",
+      renderBody: () => /* @__PURE__ */ import_react.default.createElement(import_Text.default, null, `Your PIN can be 4 to 8 digits long. Anyone with access to your Nano and to your PIN can also access all your crypto and NFT assets.`),
+      estimatedTime: 120
+    },
+    {
+      status: "inactive",
+      title: "Recovery phrase",
+      renderBody: () => /* @__PURE__ */ import_react.default.createElement(import_Text.default, null, `Your recovery phrase is a secret list of 24 words that backs up your private keys. Your Nano generates a unique recovery phrase. Ledger does not keep a copy of it.`),
+      estimatedTime: 300
+    },
+    {
+      status: "inactive",
+      title: "Software check",
+      renderBody: () => /* @__PURE__ */ import_react.default.createElement(import_Text.default, null, `We'll verify whether your Nano is genuine. This should be quick and easy!`)
+    },
+    {
+      status: "inactive",
+      title: "Nano is ready"
+    }
+  ];
+  const [items, setItems] = (0, import_react.useState)(defaultItems);
+  const [currentIndex, setCurrentIndex] = (0, import_react.useState)(0);
+  (0, import_react.useEffect)(() => {
+    setTimeout(() => {
+      if (currentIndex === defaultItems.length) {
+        setCurrentIndex(0);
+        setItems(defaultItems);
+        return;
+      }
+      const newItems = items.concat([]);
+      newItems[currentIndex]["status"] = "completed";
+      if (currentIndex + 1 !== defaultItems.length) {
+        newItems[currentIndex + 1]["status"] = "active";
+      }
+      setCurrentIndex(currentIndex + 1);
+      setItems(newItems);
+    }, 1e3);
+  }, [items, currentIndex]);
+  return /* @__PURE__ */ import_react.default.createElement(import_Flex.default, {
+    width: 300
+  }, /* @__PURE__ */ import_react.default.createElement(import__.default, {
+    steps: items
+  }));
+};
+const Default = Template.bind({});
+//# sourceMappingURL=VerticalTimeline.stories.js.map

package/lib/cjs/components/layout/List/VerticalTimeline/VerticalTimeline.stories.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/components/layout/List/VerticalTimeline/VerticalTimeline.stories.tsx"],
+  "sourcesContent": ["import React, { useEffect, useState } from \"react\";\nimport Flex from \"../../Flex\";\nimport Text from \"../../../asorted/Text\";\nimport VerticalTimeline from \".\";\n\nconst description = `\n### A Vertical Timeline\n\nThis components accepts an Array of object like this:\n## Usage\n\n\\`\\`\\`js\n\nconst steps = [\n    {\n      /**\n       * status is an ItemStatus which can be inactive, active or completed\n       */\n      status: ItemStatus;\n      /**\n       * title is the title of the step\n       */\n      title: string;\n      /**\n       * renderBody is an optional prop which is a ReactNode to be rendered next to the title\n       */\n      renderBody?: (isDisplayed?: boolean) => ReactNode;\n      /**\n       * estimatedTime is an optional prop that take the estimated time to complete the time in second and display it in a tag in minute\n       */\n       estimatedTime?: number;\n    },\n    {  \n      status: ItemStatus;\n      title: string;\n      renderBody?: (isDisplayed?: boolean) => ReactNode;\n      estimatedTime?: number;\n    }\n  ];\n\n<VerticalTimeline steps={steps as any} />\n\\`\\`\\`\n`;\n\nexport default {\n  title: \"Layout/List/VerticalTimeline\",\n  argTypes: {\n    steps: {\n      control: \"disabled\",\n    },\n  },\n  parameters: {\n    docs: {\n      description: {\n        component: description,\n      },\n    },\n  },\n};\n\nconst Template = () => {\n  const defaultItems = [\n    {\n      status: \"active\",\n      title: \"Nano paired\",\n    },\n    {\n      status: \"inactive\",\n      title: \"Set your PIN\",\n      renderBody: () => (\n        <Text>\n          {`Your PIN can be 4 to 8 digits long. Anyone with access to your Nano and to your PIN can also access all your crypto and NFT assets.`}\n        </Text>\n      ),\n      estimatedTime: 120,\n    },\n    {\n      status: \"inactive\",\n      title: \"Recovery phrase\",\n      renderBody: () => (\n        <Text>\n          {`Your recovery phrase is a secret list of 24 words that backs up your private keys. Your Nano generates a unique recovery phrase. Ledger does not keep a copy of it.`}\n        </Text>\n      ),\n      estimatedTime: 300,\n    },\n    {\n      status: \"inactive\",\n      title: \"Software check\",\n      renderBody: () => (\n        <Text>{`We'll verify whether your Nano is genuine. This should be quick and easy!`}</Text>\n      ),\n    },\n    {\n      status: \"inactive\",\n      title: \"Nano is ready\",\n    },\n  ];\n\n  const [items, setItems] = useState(defaultItems);\n  const [currentIndex, setCurrentIndex] = useState(0);\n\n  useEffect(() => {\n    setTimeout(() => {\n      if (currentIndex === defaultItems.length) {\n        setCurrentIndex(0);\n        setItems(defaultItems);\n        return;\n      }\n      const newItems = items.concat([]);\n      newItems[currentIndex][\"status\"] = \"completed\";\n      if (currentIndex + 1 !== defaultItems.length) {\n        newItems[currentIndex + 1][\"status\"] = \"active\";\n      }\n      setCurrentIndex(currentIndex + 1);\n      setItems(newItems);\n    }, 1000);\n  }, [items, currentIndex]);\n\n  return (\n    <Flex width={300}>\n      <VerticalTimeline steps={items as any} />\n    </Flex>\n  );\n};\n\nexport const Default = Template.bind({});\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA2C;AAC3C,kBAAiB;AACjB,kBAAiB;AACjB,eAA6B;AAE7B,MAAM,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAuCpB,IAAO,mCAAQ;AAAA,EACb,OAAO;AAAA,EACP,UAAU;AAAA,IACR,OAAO;AAAA,MACL,SAAS;AAAA;AAAA;AAAA,EAGb,YAAY;AAAA,IACV,MAAM;AAAA,MACJ,aAAa;AAAA,QACX,WAAW;AAAA;AAAA;AAAA;AAAA;AAMnB,MAAM,WAAW,MAAM;AACrB,QAAM,eAAe;AAAA,IACnB;AAAA,MACE,QAAQ;AAAA,MACR,OAAO;AAAA;AAAA,IAET;AAAA,MACE,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,YAAY,MACV,mDAAC,qBAAD,MACG;AAAA,MAGL,eAAe;AAAA;AAAA,IAEjB;AAAA,MACE,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,YAAY,MACV,mDAAC,qBAAD,MACG;AAAA,MAGL,eAAe;AAAA;AAAA,IAEjB;AAAA,MACE,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,YAAY,MACV,mDAAC,qBAAD,MAAO;AAAA;AAAA,IAGX;AAAA,MACE,QAAQ;AAAA,MACR,OAAO;AAAA;AAAA;AAIX,QAAM,CAAC,OAAO,YAAY,2BAAS;AACnC,QAAM,CAAC,cAAc,mBAAmB,2BAAS;AAEjD,8BAAU,MAAM;AACd,eAAW,MAAM;AACf,UAAI,iBAAiB,aAAa,QAAQ;AACxC,wBAAgB;AAChB,iBAAS;AACT;AAAA;AAEF,YAAM,WAAW,MAAM,OAAO;AAC9B,eAAS,cAAc,YAAY;AACnC,UAAI,eAAe,MAAM,aAAa,QAAQ;AAC5C,iBAAS,eAAe,GAAG,YAAY;AAAA;AAEzC,sBAAgB,eAAe;AAC/B,eAAS;AAAA,OACR;AAAA,KACF,CAAC,OAAO;AAEX,SACE,mDAAC,qBAAD;AAAA,IAAM,OAAO;AAAA,KACX,mDAAC,kBAAD;AAAA,IAAkB,OAAO;AAAA;AAAA;AAKxB,MAAM,UAAU,SAAS,KAAK;",
+  "names": []
+}

package/lib/cjs/components/layout/List/VerticalTimeline/index.js

@@ -0,0 +1,41 @@
+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: () => VerticalTimeline
+});
+var import_react = __toModule(require("react"));
+var import_TimelineItem = __toModule(require("./TimelineItem"));
+var import__ = __toModule(require("../.."));
+function VerticalTimeline({ steps, ...props }) {
+  return /* @__PURE__ */ import_react.default.createElement(import__.Flex, {
+    ...props,
+    flexDirection: "column"
+  }, steps?.map((step, index) => /* @__PURE__ */ import_react.default.createElement(import_TimelineItem.default, {
+    key: step.title,
+    item: step,
+    isFirstItem: index === 0,
+    isLastItem: index === steps.length - 1
+  })));
+}
+//# sourceMappingURL=index.js.map

package/lib/cjs/components/layout/List/VerticalTimeline/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/components/layout/List/VerticalTimeline/index.tsx"],
+  "sourcesContent": ["import React, { ReactNode } from \"react\";\n\nimport TimelineItem from \"./TimelineItem\";\nimport { Flex } from \"../..\";\nimport { BaseStyledProps } from \"src/components/styled\";\n\nexport type ItemStatus = \"inactive\" | \"active\" | \"completed\";\n\nexport type Item = {\n  status: ItemStatus;\n  title: string;\n  renderBody?: (isDisplayed?: boolean) => ReactNode;\n  estimatedTime?: number;\n};\n\nexport type Props = BaseStyledProps & {\n  steps?: Item[];\n};\n\nexport default function VerticalTimeline({ steps, ...props }: Props) {\n  return (\n    <Flex {...props} flexDirection=\"column\">\n      {steps?.map((step, index) => (\n        <TimelineItem\n          key={step.title}\n          item={step}\n          isFirstItem={index === 0}\n          isLastItem={index === steps.length - 1}\n        />\n      ))}\n    </Flex>\n  );\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA,mBAAiC;AAEjC,0BAAyB;AACzB,eAAqB;AAgBN,0BAA0B,EAAE,UAAU,SAAgB;AACnE,SACE,mDAAC,eAAD;AAAA,OAAU;AAAA,IAAO,eAAc;AAAA,KAC5B,OAAO,IAAI,CAAC,MAAM,UACjB,mDAAC,6BAAD;AAAA,IACE,KAAK,KAAK;AAAA,IACV,MAAM;AAAA,IACN,aAAa,UAAU;AAAA,IACvB,YAAY,UAAU,MAAM,SAAS;AAAA;AAAA;",
+  "names": []
+}

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

@@ -27,7 +27,8 @@ __export(exports, {
   Flex: () => import_Flex.default,
   Grid: () => import_Grid.default,
   Popin: () => import_Popin.default,
-  Side: () => import_Side.default
+  Side: () => import_Side.default,
+  VerticalTimeline: () => import_VerticalTimeline.default
 });
 var import_Flex = __toModule(require("./Flex"));
 var import_Box = __toModule(require("./Box"));
@@ -35,4 +36,5 @@ var import_Grid = __toModule(require("./Grid"));
 var import_Popin = __toModule(require("./Popin"));
 var import_Side = __toModule(require("./Side"));
 var import_Drawer = __toModule(require("./Drawer"));
+var import_VerticalTimeline = __toModule(require("./List/VerticalTimeline"));
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/layout/index.ts"],
-  "sourcesContent": ["export { default as Flex } from \"./Flex\";\nexport { default as Box } from \"./Box\";\nexport { default as Grid } from \"./Grid\";\nexport { default as Popin } from \"./Popin\";\nexport { default as Side } from \"./Side\";\nexport { default as Drawer } from \"./Drawer\";\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAAgC;AAChC,iBAA+B;AAC/B,kBAAgC;AAChC,mBAAiC;AACjC,kBAAgC;AAChC,oBAAkC;",
+  "sourcesContent": ["export { default as Flex } from \"./Flex\";\nexport { default as Box } from \"./Box\";\nexport { default as Grid } from \"./Grid\";\nexport { default as Popin } from \"./Popin\";\nexport { default as Side } from \"./Side\";\nexport { default as Drawer } from \"./Drawer\";\nexport { default as VerticalTimeline } from \"./List/VerticalTimeline\";\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAAgC;AAChC,iBAA+B;AAC/B,kBAAgC;AAChC,mBAAiC;AACjC,kBAAgC;AAChC,oBAAkC;AAClC,8BAA4C;",
   "names": []
 }

package/lib/cjs/styles/global.js

@@ -38,10 +38,6 @@ const GlobalStyle = import_styled_components.createGlobalStyle`
     font-size: 100%;
   }
 
-  *, *:before, *:after {
-    box-sizing: inherit;
-  }
-
   * {
     margin: 0;
     padding: 0;

package/lib/cjs/styles/global.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/styles/global.ts"],
-  "sourcesContent": ["import { createGlobalStyle } from \"styled-components\";\n\nimport { rgba } from \"./helpers\";\nimport tippyStyles from \"../components/message/Tooltip/styles\";\nimport { fontStyles } from \"../components/asorted/Text/styles\";\n\nexport type GlobalStyleProps = {\n  fontsPath?: string;\n  fontMappings?: (name: string) => string;\n};\n\nexport const GlobalStyle = createGlobalStyle<GlobalStyleProps>`\n  html {\n    box-sizing: border-box;\n  }\n\n  body {\n    font-family: Inter;\n    font-size: 100%;\n  }\n\n  *, *:before, *:after {\n    box-sizing: inherit;\n  }\n\n  * {\n    margin: 0;\n    padding: 0;\n    font: inherit;\n    color: inherit;\n    user-select: inherit;\n    cursor: inherit;\n    outline: none;\n  }\n\n  ::selection {\n    background: ${(p) => rgba(p.theme.colors.primary.c100, 0.1)};\n  }\n\n  --track-color: rgba(0,0,0,0);\n\n  ${(props) => (typeof props.fontsPath === \"string\" ? fontStyles : \"\")}\n\n  ${tippyStyles}\n`;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA,+BAAkC;AAElC,qBAAqB;AACrB,oBAAwB;AACxB,qBAA2B;AAOpB,MAAM,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAyBT,CAAC,MAAM,yBAAK,EAAE,MAAM,OAAO,QAAQ,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,IAKvD,CAAC,UAAW,OAAO,MAAM,cAAc,WAAW,4BAAa;AAAA;AAAA,IAE/D;AAAA;",
+  "sourcesContent": ["import { createGlobalStyle } from \"styled-components\";\n\nimport { rgba } from \"./helpers\";\nimport tippyStyles from \"../components/message/Tooltip/styles\";\nimport { fontStyles } from \"../components/asorted/Text/styles\";\n\nexport type GlobalStyleProps = {\n  fontsPath?: string;\n  fontMappings?: (name: string) => string;\n};\n\nexport const GlobalStyle = createGlobalStyle<GlobalStyleProps>`\n  html {\n    box-sizing: border-box;\n  }\n\n  body {\n    font-family: Inter;\n    font-size: 100%;\n  }\n\n  * {\n    margin: 0;\n    padding: 0;\n    font: inherit;\n    color: inherit;\n    user-select: inherit;\n    cursor: inherit;\n    outline: none;\n  }\n\n  ::selection {\n    background: ${(p) => rgba(p.theme.colors.primary.c100, 0.1)};\n  }\n\n  --track-color: rgba(0,0,0,0);\n\n  ${(props) => (typeof props.fontsPath === \"string\" ? fontStyles : \"\")}\n\n  ${tippyStyles}\n`;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA,+BAAkC;AAElC,qBAAqB;AACrB,oBAAwB;AACxB,qBAA2B;AAOpB,MAAM,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAqBT,CAAC,MAAM,yBAAK,EAAE,MAAM,OAAO,QAAQ,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,IAKvD,CAAC,UAAW,OAAO,MAAM,cAAc,WAAW,4BAAa;AAAA;AAAA,IAE/D;AAAA;",
   "names": []
 }

package/lib/components/layout/List/VerticalTimeline/TimelineIndicator.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { FlexBoxProps as FlexProps } from "../../Flex";
+export declare type Props = FlexProps & {
+    status: "inactive" | "active" | "completed";
+    isFirstItem?: boolean;
+    isLastItem?: boolean;
+};
+export default function TimelineIndicator({ status, isFirstItem, isLastItem, ...props }: Props): JSX.Element;

package/lib/components/layout/List/VerticalTimeline/TimelineIndicator.js

@@ -0,0 +1,72 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from "react";
+import CircledCheckSolidMedium from "@ledgerhq/icons-ui/react/CircledCheckSolidMedium";
+import styled, { useTheme } from "styled-components";
+import Flex from "../../Flex";
+const TopSegment = styled(Flex) `
+  height: ${(p) => (p.status === "inactive" ? "18px" : "20px")};
+  border-width: ${(p) => (p.hidden ? 0 : 1)}px;
+  border-style: dashed;
+  border-color: ${(p) => p.status === "inactive" ? p.theme.colors.neutral.c50 : p.theme.colors.primary.c80};
+  background: ${(p) => p.status !== "inactive" && p.theme.colors.primary.c80};
+  margin-top: ${(p) => p.status === "inactive" && "2px"};
+`;
+const BottomSegment = styled(Flex) `
+  flex: 1;
+  border-width: ${(p) => (p.hidden ? 0 : 1)}px;
+  border-style: dashed;
+  border-color: ${(p) => p.status === "completed" ? p.theme.colors.primary.c80 : p.theme.colors.neutral.c50};
+  background: ${(p) => p.status === "completed" && p.theme.colors.primary.c80};
+`;
+const getIconBackground = (theme, status, isLastItem) => {
+    if (status === "completed") {
+        return "transparent";
+    }
+    else if (isLastItem) {
+        return theme.colors.success.c10;
+    }
+    else if (status === "active") {
+        return theme.colors.neutral.c40;
+    }
+    return theme.colors.background.main;
+};
+const getIconBorder = (theme, status, isLastItem) => {
+    if (isLastItem) {
+        return theme.colors.success.c100;
+    }
+    else if (status === "inactive") {
+        return theme.colors.neutral.c50;
+    }
+    return theme.colors.primary.c80;
+};
+const CenterSegment = styled(Flex) `
+  border-radius: 9999px;
+  width: 20px;
+  height: 20px;
+  background: ${(p) => getIconBackground(p.theme, p.status, p.isLastItem)};
+  border: 2px solid ${(p) => getIconBorder(p.theme, p.status, p.isLastItem)};
+  align-items: center;
+  justify-content: center;
+`;
+const IconWrapper = styled(Flex) `
+  flex: none;
+`;
+export default function TimelineIndicator(_a) {
+    var { status, isFirstItem, isLastItem } = _a, props = __rest(_a, ["status", "isFirstItem", "isLastItem"]);
+    const { colors } = useTheme();
+    return (React.createElement(Flex, Object.assign({ flexDirection: "column", alignItems: "center" }, props),
+        React.createElement(TopSegment, { status: status, hidden: isFirstItem }),
+        React.createElement(CenterSegment, { status: status, isLastItem: isLastItem }, status === "completed" && (React.createElement(IconWrapper, null,
+            React.createElement(CircledCheckSolidMedium, { color: isLastItem ? colors.success.c100 : colors.primary.c80, size: 24 })))),
+        React.createElement(BottomSegment, { status: status, hidden: isLastItem })));
+}

package/lib/components/layout/List/VerticalTimeline/TimelineItem.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { Item } from ".";
+export declare type Props = {
+    item: Item;
+    isFirstItem?: boolean;
+    isLastItem?: boolean;
+};
+export default function TimelineItem({ item, isFirstItem, isLastItem }: Props): JSX.Element;

package/lib/components/layout/List/VerticalTimeline/TimelineItem.js

@@ -0,0 +1,59 @@
+import React from "react";
+import styled, { useTheme } from "styled-components";
+import { Flex } from "../..";
+import { Text } from "../../..";
+import Tag from "../../../Tag";
+import TimelineIndicator from "./TimelineIndicator";
+const getContainerBackground = (theme, status, isLastItem) => {
+    if (isLastItem && status === "completed") {
+        return theme.colors.success.c30;
+    }
+    else if (status === "completed") {
+        return theme.colors.primary.c20;
+    }
+    else if (status === "active") {
+        return theme.colors.neutral.c20;
+    }
+    return theme.colors.neutral.c30;
+};
+const getContainerBorder = (theme, status, isLastItem) => {
+    if (isLastItem && status === "completed") {
+        return theme.colors.success.c30;
+    }
+    else if (isLastItem && status === "active") {
+        return theme.colors.success.c100;
+    }
+    else if (status === "completed") {
+        return theme.colors.primary.c20;
+    }
+    else if (status === "active") {
+        return theme.colors.primary.c80;
+    }
+    return theme.colors.neutral.c30;
+};
+const Container = styled(Flex) `
+  flex: 1;
+  width: 404px;
+  border-radius: ${(p) => p.theme.radii[2]}px;
+  background: ${(p) => getContainerBackground(p.theme, p.status, p.isLastItem)};
+  border: 1px solid ${(p) => getContainerBorder(p.theme, p.status, p.isLastItem)};
+  padding: 20px 16px;
+`;
+const TimelineIndicatorContentHeader = styled(Flex) `
+  justify-content: space-between;
+`;
+export default function TimelineItem({ item, isFirstItem, isLastItem }) {
+    const { colors } = useTheme();
+    return (React.createElement(Flex, { flexDirection: "row" },
+        React.createElement(TimelineIndicator, { status: item.status, isFirstItem: isFirstItem, isLastItem: isLastItem, mr: 4 }),
+        React.createElement(Container, { status: item.status, isLastItem: isLastItem, mb: 4, flexDirection: "column" },
+            React.createElement(TimelineIndicatorContentHeader, null,
+                React.createElement(Text, { variant: "body", color: item.status === "inactive"
+                        ? "neutral.c80"
+                        : isLastItem
+                            ? "success.c100"
+                            : "primary.c90" }, item.title),
+                (item === null || item === void 0 ? void 0 : item.estimatedTime) && item.status === "active" && (React.createElement(Tag, { size: "small", type: "opacity", active: true, disabled: true, textProps: { color: colors.neutral.c100 } }, `${item.estimatedTime / 60} min`))),
+            item.renderBody && item.status === "active" && (React.createElement(Flex, { position: "relative" },
+                React.createElement(Flex, { pt: 6 }, item.renderBody(item.status === "active")))))));
+}

package/lib/components/layout/List/VerticalTimeline/index.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from "react";
+import { BaseStyledProps } from "src/components/styled";
+export declare type ItemStatus = "inactive" | "active" | "completed";
+export declare type Item = {
+    status: ItemStatus;
+    title: string;
+    renderBody?: (isDisplayed?: boolean) => ReactNode;
+    estimatedTime?: number;
+};
+export declare type Props = BaseStyledProps & {
+    steps?: Item[];
+};
+export default function VerticalTimeline({ steps, ...props }: Props): JSX.Element;

package/lib/components/layout/List/VerticalTimeline/index.js

@@ -0,0 +1,18 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from "react";
+import TimelineItem from "./TimelineItem";
+import { Flex } from "../..";
+export default function VerticalTimeline(_a) {
+    var { steps } = _a, props = __rest(_a, ["steps"]);
+    return (React.createElement(Flex, Object.assign({}, props, { flexDirection: "column" }), steps === null || steps === void 0 ? void 0 : steps.map((step, index) => (React.createElement(TimelineItem, { key: step.title, item: step, isFirstItem: index === 0, isLastItem: index === steps.length - 1 })))));
+}

package/lib/components/layout/index.d.ts

@@ -4,3 +4,4 @@ export { default as Grid } from "./Grid";
 export { default as Popin } from "./Popin";
 export { default as Side } from "./Side";
 export { default as Drawer } from "./Drawer";
+export { default as VerticalTimeline } from "./List/VerticalTimeline";

package/lib/components/layout/index.js

@@ -4,3 +4,4 @@ export { default as Grid } from "./Grid";
 export { default as Popin } from "./Popin";
 export { default as Side } from "./Side";
 export { default as Drawer } from "./Drawer";
+export { default as VerticalTimeline } from "./List/VerticalTimeline";

package/lib/styles/global.js

@@ -12,10 +12,6 @@ export const GlobalStyle = createGlobalStyle `
     font-size: 100%;
   }
 
-  *, *:before, *:after {
-    box-sizing: inherit;
-  }
-
   * {
     margin: 0;
     padding: 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/react-ui",
-  "version": "0.8.1",
+  "version": "0.8.2-next.0",
   "description": "Ledger Live - Desktop UI",
   "author": "Ledger Live Team <team-live@ledger.fr>",
   "repository": {