@ledgerhq/react-ui 0.7.2 → 0.7.5-monorepo.0

package/lib/cjs/components/cards/Carousel/Carousel.stories.js

@@ -0,0 +1,103 @@
+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: () => Carousel_stories_default
+});
+var import_react = __toModule(require("react"));
+var import_client_api = __toModule(require("@storybook/client-api"));
+var import_sampleSlide = __toModule(require("../../../assets/images/sampleSlide.png"));
+var import__ = __toModule(require("."));
+var Carousel_stories_default = {
+  title: "Cards/Portfolio/Carousel",
+  argTypes: {
+    isDismissed: {
+      description: "App level setting to determine visibility of the component",
+      control: {
+        type: "boolean",
+        defaultValue: { summary: false }
+      }
+    },
+    timeout: {
+      description: "Timeout for auto-slide in ms",
+      control: {
+        type: "number",
+        min: 1e3,
+        max: 2e4,
+        defaultValue: { summary: 7e3 }
+      },
+      table: {
+        type: { summary: "number" },
+        defaultValue: { summary: 7e3 }
+      }
+    }
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: `The carousel is used to showcase products and features to our users. It's a dismissable component that should be re-enabled from the settings of the app. By default, it auto loops through a series of slides but this is paused when the mouse enters the bounds of the slide.<br/>
+        The current version is missing the updated color palette and translatable strings.`
+      }
+    }
+  }
+};
+const Template = (args) => {
+  const queue = [
+    {
+      title: "NEW PRODUCT 1",
+      description: "Enhance your security with the new ledger nano x available now!",
+      image: import_sampleSlide.default,
+      onClick: () => alert("Clicked on banner 1")
+    },
+    {
+      title: "NEW PRODUCT 2",
+      description: "Enhance your security with the new ledger nano x available now!",
+      image: import_sampleSlide.default,
+      onClick: () => alert("Clicked on banner 2")
+    },
+    {
+      title: "NEW PRODUCT 3",
+      description: "Enhance your security with the new ledger nano x available now!",
+      image: import_sampleSlide.default,
+      onClick: () => alert("Clicked on banner 3")
+    },
+    {
+      title: "NEW PRODUCT 4",
+      description: "Enhance your security with the new ledger nano x available now!",
+      image: import_sampleSlide.default,
+      onClick: () => alert("Clicked on banner 4")
+    }
+  ];
+  const [, updateArgs] = (0, import_client_api.useArgs)();
+  const onDismiss = () => updateArgs({
+    isDismissed: true
+  });
+  return /* @__PURE__ */ import_react.default.createElement(import__.default, {
+    ...args,
+    queue,
+    onDismiss
+  });
+};
+const Default = Template.bind({});
+//# sourceMappingURL=Carousel.stories.js.map

package/lib/cjs/components/cards/Carousel/Carousel.stories.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/cards/Carousel/Carousel.stories.tsx"],
+  "sourcesContent": ["import React from \"react\";\n// @ts-expect-error Typings\u2026\nimport { useArgs } from \"@storybook/client-api\";\n\nimport image from \"../../../assets/images/sampleSlide.png\";\nimport Carousel, { Props as CarouselProps } from \".\";\n\nexport default {\n  title: \"Cards/Portfolio/Carousel\",\n  argTypes: {\n    isDismissed: {\n      description: \"App level setting to determine visibility of the component\",\n      control: {\n        type: \"boolean\",\n        defaultValue: { summary: false },\n      },\n    },\n    timeout: {\n      description: \"Timeout for auto-slide in ms\",\n      control: {\n        type: \"number\",\n        min: 1000,\n        max: 20000,\n        defaultValue: { summary: 7000 },\n      },\n      table: {\n        type: { summary: \"number\" },\n        defaultValue: { summary: 7000 },\n      },\n    },\n  },\n  parameters: {\n    docs: {\n      description: {\n        component: `The carousel is used to showcase products and features to our users. It's a dismissable component that should be re-enabled from the settings of the app. By default, it auto loops through a series of slides but this is paused when the mouse enters the bounds of the slide.<br/>\n        The current version is missing the updated color palette and translatable strings.`,\n      },\n    },\n  },\n};\n\nconst Template = (args: CarouselProps) => {\n  const queue = [\n    {\n      title: \"NEW PRODUCT 1\",\n      description: \"Enhance your security with the new ledger nano x available now!\",\n      image,\n      onClick: () => alert(\"Clicked on banner 1\"),\n    },\n    {\n      title: \"NEW PRODUCT 2\",\n      description: \"Enhance your security with the new ledger nano x available now!\",\n      image,\n      onClick: () => alert(\"Clicked on banner 2\"),\n    },\n    {\n      title: \"NEW PRODUCT 3\",\n      description: \"Enhance your security with the new ledger nano x available now!\",\n      image,\n      onClick: () => alert(\"Clicked on banner 3\"),\n    },\n    {\n      title: \"NEW PRODUCT 4\",\n      description: \"Enhance your security with the new ledger nano x available now!\",\n      image,\n      onClick: () => alert(\"Clicked on banner 4\"),\n    },\n  ];\n\n  const [, updateArgs] = useArgs();\n\n  const onDismiss = () =>\n    updateArgs({\n      isDismissed: true,\n    });\n\n  return <Carousel {...args} queue={queue} onDismiss={onDismiss} />;\n};\n\nexport const Default = Template.bind({});\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAElB,wBAAwB;AAExB,yBAAkB;AAClB,eAAiD;AAEjD,IAAO,2BAAQ;AAAA,EACb,OAAO;AAAA,EACP,UAAU;AAAA,IACR,aAAa;AAAA,MACX,aAAa;AAAA,MACb,SAAS;AAAA,QACP,MAAM;AAAA,QACN,cAAc,EAAE,SAAS;AAAA;AAAA;AAAA,IAG7B,SAAS;AAAA,MACP,aAAa;AAAA,MACb,SAAS;AAAA,QACP,MAAM;AAAA,QACN,KAAK;AAAA,QACL,KAAK;AAAA,QACL,cAAc,EAAE,SAAS;AAAA;AAAA,MAE3B,OAAO;AAAA,QACL,MAAM,EAAE,SAAS;AAAA,QACjB,cAAc,EAAE,SAAS;AAAA;AAAA;AAAA;AAAA,EAI/B,YAAY;AAAA,IACV,MAAM;AAAA,MACJ,aAAa;AAAA,QACX,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAOnB,MAAM,WAAW,CAAC,SAAwB;AACxC,QAAM,QAAQ;AAAA,IACZ;AAAA,MACE,OAAO;AAAA,MACP,aAAa;AAAA,MACb;AAAA,MACA,SAAS,MAAM,MAAM;AAAA;AAAA,IAEvB;AAAA,MACE,OAAO;AAAA,MACP,aAAa;AAAA,MACb;AAAA,MACA,SAAS,MAAM,MAAM;AAAA;AAAA,IAEvB;AAAA,MACE,OAAO;AAAA,MACP,aAAa;AAAA,MACb;AAAA,MACA,SAAS,MAAM,MAAM;AAAA;AAAA,IAEvB;AAAA,MACE,OAAO;AAAA,MACP,aAAa;AAAA,MACb;AAAA,MACA,SAAS,MAAM,MAAM;AAAA;AAAA;AAIzB,QAAM,CAAC,EAAE,cAAc;AAEvB,QAAM,YAAY,MAChB,WAAW;AAAA,IACT,aAAa;AAAA;AAGjB,SAAO,mDAAC,kBAAD;AAAA,OAAc;AAAA,IAAM;AAAA,IAAc;AAAA;AAAA;AAGpC,MAAM,UAAU,SAAS,KAAK;",
+  "names": []
+}

package/lib/cjs/components/cards/Carousel/Slide.js

@@ -0,0 +1,59 @@
+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: () => Slide_default
+});
+var import_react = __toModule(require("react"));
+var import_styled_components = __toModule(require("styled-components"));
+var import_Text = __toModule(require("../../asorted/Text"));
+var import_Flex = __toModule(require("../../layout/Flex"));
+const Wrapper = (0, import_styled_components.default)(import_Flex.default)`
+  width: 100%;
+  height: 100%;
+  background: gray;
+  flex-direction: column;
+  padding: ${(p) => p.theme.space[8]}px ${(p) => p.theme.space[10]}px;
+  padding-right: 280px; // Nb gives air to not overlap the illustration
+  z-index: ${(p) => p.theme.zIndexes[8]};
+  background: url(${(p) => p.image}) no-repeat ${(p) => p.theme.colors.neutral.c100};
+  background-size: contain;
+  background-position: right 60px bottom;
+`;
+const Slide = ({ title, description, image, onClick }) => {
+  return /* @__PURE__ */ import_react.default.createElement(Wrapper, {
+    key: "key",
+    image,
+    onClick
+  }, /* @__PURE__ */ import_react.default.createElement(import_Text.default, {
+    variant: "tiny",
+    color: "neutral.c00",
+    fontWeight: "regular"
+  }, title), /* @__PURE__ */ import_react.default.createElement(import_Text.default, {
+    variant: "h5",
+    color: "neutral.c00",
+    textTransform: "uppercase"
+  }, description));
+};
+var Slide_default = Slide;
+//# sourceMappingURL=Slide.js.map

package/lib/cjs/components/cards/Carousel/Slide.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/cards/Carousel/Slide.tsx"],
+  "sourcesContent": ["import React from \"react\";\nimport styled from \"styled-components\";\nimport Text from \"../../asorted/Text\";\nimport Flex from \"../../layout/Flex\";\n\nconst Wrapper = styled(Flex)<{ image?: string }>`\n  width: 100%;\n  height: 100%;\n  background: gray;\n  flex-direction: column;\n  padding: ${(p) => p.theme.space[8]}px ${(p) => p.theme.space[10]}px;\n  padding-right: 280px; // Nb gives air to not overlap the illustration\n  z-index: ${(p) => p.theme.zIndexes[8]};\n  background: url(${(p) => p.image}) no-repeat ${(p) => p.theme.colors.neutral.c100};\n  background-size: contain;\n  background-position: right 60px bottom;\n`;\n\nexport type Props = {\n  onClick: () => void;\n  title: string;\n  description: string;\n  image?: string;\n};\n\nconst Slide = ({ title, description, image, onClick }: Props): React.ReactElement => {\n  return (\n    <Wrapper key={\"key\"} image={image} onClick={onClick}>\n      <Text variant={\"tiny\"} color=\"neutral.c00\" fontWeight=\"regular\">\n        {title}\n      </Text>\n      <Text variant={\"h5\"} color=\"neutral.c00\" textTransform=\"uppercase\">\n        {description}\n      </Text>\n    </Wrapper>\n  );\n};\n\nexport default Slide;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAmB;AACnB,kBAAiB;AACjB,kBAAiB;AAEjB,MAAM,UAAU,sCAAO;AAAA;AAAA;AAAA;AAAA;AAAA,aAKV,CAAC,MAAM,EAAE,MAAM,MAAM,QAAQ,CAAC,MAAM,EAAE,MAAM,MAAM;AAAA;AAAA,aAElD,CAAC,MAAM,EAAE,MAAM,SAAS;AAAA,oBACjB,CAAC,MAAM,EAAE,oBAAoB,CAAC,MAAM,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAY/E,MAAM,QAAQ,CAAC,EAAE,OAAO,aAAa,OAAO,cAAyC;AACnF,SACE,mDAAC,SAAD;AAAA,IAAS,KAAK;AAAA,IAAO;AAAA,IAAc;AAAA,KACjC,mDAAC,qBAAD;AAAA,IAAM,SAAS;AAAA,IAAQ,OAAM;AAAA,IAAc,YAAW;AAAA,KACnD,QAEH,mDAAC,qBAAD;AAAA,IAAM,SAAS;AAAA,IAAM,OAAM;AAAA,IAAc,eAAc;AAAA,KACpD;AAAA;AAMT,IAAO,gBAAQ;",
+  "names": []
+}

package/lib/cjs/components/cards/Carousel/index.js

@@ -0,0 +1,207 @@
+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: () => Carousel_default
+});
+var import_react = __toModule(require("react"));
+var import_styled_components = __toModule(require("styled-components"));
+var import_react_transition_group = __toModule(require("react-transition-group"));
+var import_TransitionSlide = __toModule(require("../../transitions/TransitionSlide"));
+var import_Button = __toModule(require("../../cta/Button"));
+var import_Text = __toModule(require("../../asorted/Text"));
+var import_Flex = __toModule(require("../../layout/Flex"));
+var import_Slide = __toModule(require("./Slide"));
+var import_ArrowLeftMedium = __toModule(require("@ledgerhq/icons-ui/react/ArrowLeftMedium"));
+var import_ArrowRightMedium = __toModule(require("@ledgerhq/icons-ui/react/ArrowRightMedium"));
+var import_CloseMedium = __toModule(require("@ledgerhq/icons-ui/react/CloseMedium"));
+const CarouselWrapper = import_styled_components.default.div`
+  width: 100%;
+  height: 180px;
+  border-radius: 8px;
+  overflow: hidden;
+  cursor: pointer;
+  position: relative;
+  flex: 1;
+  background: ${(p) => p.theme.colors.neutral.c100};
+`;
+const Controllers = (0, import_styled_components.default)(import_Flex.default)`
+  position: absolute;
+  flex-direction: row;
+  right: ${(p) => p.theme.space[5]}px;
+  bottom: ${(p) => p.theme.space[4]}px;
+  column-gap: ${(p) => p.theme.space[4]}px;
+  color: ${(p) => p.theme.colors.neutral.c00};
+
+  > div {
+    &:hover {
+      opacity: 0.5;
+    }
+  }
+`;
+const Bullets = import_styled_components.default.div`
+  position: absolute;
+  display: flex;
+  left: ${(p) => p.theme.space[10]}px;
+  bottom: ${(p) => p.theme.space[8]}px;
+  column-gap: ${(p) => p.theme.space[2]}px;
+  flex-direction: row;
+
+  > div {
+    position: relative;
+    height: ${(p) => p.theme.space[1]}px;
+    width: ${(p) => p.theme.space[8]}px;
+    background: ${(p) => p.theme.colors.neutral.c00};
+    opacity: 0.5;
+    &:hover {
+      opacity: 0.75;
+    }
+
+    &:nth-child(${(p) => p.active}) {
+      opacity: 1;
+      &:hover {
+        opacity: 0.75;
+      }
+    }
+
+    ::after {
+      content: "";
+      position: absolute;
+      top: -${(p) => p.theme.space[4]}px;
+      height: ${(p) => p.theme.space[7]}px;
+      width: 100%;
+    }
+  }
+`;
+const Close = import_styled_components.default.div`
+  position: absolute;
+  top: ${(p) => p.theme.space[7]}px;
+  right: ${(p) => p.theme.space[5]}px;
+  color: ${(p) => p.theme.colors.neutral.c00};
+  &:hover {
+    opacity: 0.5;
+  }
+`;
+const DismissWrapper = import_styled_components.default.div`
+  color: white;
+  align-items: center;
+  justify-content: center;
+  display: flex;
+  flex-direction: column;
+  padding: ${(p) => p.theme.space[13]}px;
+  row-gap: ${(p) => p.theme.space[7]}px;
+`;
+const DEFAULT_TIMEOUT = 7e3;
+const Carousel = ({
+  timeout = DEFAULT_TIMEOUT,
+  queue,
+  isDismissed,
+  onDismiss,
+  dismissText = "This banner will not show up again until there is a new announcement",
+  dismissConfirmText = "Confirm",
+  dismissCancelText = "Show again"
+}) => {
+  const intervalRef = (0, import_react.useRef)();
+  const [direction, setDirection] = (0, import_react.useState)("right");
+  const [index, setIndex] = (0, import_react.useState)(0);
+  const [wantToDismiss, setWantToDismiss] = (0, import_react.useState)(false);
+  const [paused, setPaused] = (0, import_react.useState)(false);
+  const childFactory = (0, import_react.useCallback)((child) => import_react.default.cloneElement(child, { direction }), [direction]);
+  const wrappedSetIndex = (0, import_react.useCallback)((newIndex) => {
+    setDirection(newIndex > index ? "left" : "right");
+    setIndex(newIndex);
+  }, [index]);
+  const onSlide = (0, import_react.useCallback)((direction2 = "left") => {
+    setDirection(direction2);
+    const i = index + (direction2 === "right" ? -1 : 1);
+    setIndex(i < 0 ? queue.length - 1 : i >= queue.length ? 0 : i);
+  }, [index, queue]);
+  const onPrevious = (0, import_react.useCallback)(() => onSlide("right"), [onSlide]);
+  const onNext = (0, import_react.useCallback)(() => onSlide("left"), [onSlide]);
+  const onWantToDismiss = () => setWantToDismiss(true);
+  const onCancelDismiss = () => setWantToDismiss(false);
+  const onMouseEnter = () => setPaused(true);
+  const onMouseLeave = () => setPaused(false);
+  (0, import_react.useEffect)(() => {
+    const _timeout = timeout < 1e3 ? DEFAULT_TIMEOUT : timeout;
+    if (intervalRef.current)
+      clearInterval(intervalRef.current);
+    if (!paused)
+      intervalRef.current = setInterval(onSlide, _timeout);
+  }, [onSlide, paused, timeout]);
+  (0, import_react.useEffect)(() => {
+    if (isDismissed)
+      setWantToDismiss(false);
+  }, [isDismissed]);
+  if (!queue?.length || isDismissed)
+    return null;
+  return /* @__PURE__ */ import_react.default.createElement(CarouselWrapper, {
+    id: "carousel",
+    onMouseEnter,
+    onMouseLeave
+  }, wantToDismiss ? /* @__PURE__ */ import_react.default.createElement(DismissWrapper, null, /* @__PURE__ */ import_react.default.createElement(import_Text.default, {
+    color: "neutral.c00",
+    fontWeight: "medium",
+    variant: "paragraph"
+  }, dismissText), /* @__PURE__ */ import_react.default.createElement(import_Flex.default, {
+    columnGap: 5
+  }, /* @__PURE__ */ import_react.default.createElement(import_Button.default, {
+    color: "neutral.c100",
+    backgroundColor: "neutral.c00",
+    onClick: onDismiss
+  }, dismissConfirmText), /* @__PURE__ */ import_react.default.createElement(import_Button.default, {
+    outline: true,
+    color: "neutral.c00",
+    backgroundColor: "neutral.c100",
+    borderColor: "neutral.c00",
+    onClick: onCancelDismiss
+  }, dismissCancelText))) : /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(import_react_transition_group.TransitionGroup, {
+    component: null,
+    childFactory
+  }, /* @__PURE__ */ import_react.default.createElement(import_TransitionSlide.default, {
+    key: index,
+    direction
+  }, /* @__PURE__ */ import_react.default.createElement(import_Slide.default, {
+    ...queue[index]
+  }))), /* @__PURE__ */ import_react.default.createElement(Close, {
+    id: "carousel-dismiss",
+    onClick: onWantToDismiss
+  }, /* @__PURE__ */ import_react.default.createElement(import_CloseMedium.default, {
+    size: 18
+  })), /* @__PURE__ */ import_react.default.createElement(Bullets, {
+    active: index + 1
+  }, queue.map((_, i) => /* @__PURE__ */ import_react.default.createElement("div", {
+    key: `bullet_${i}`,
+    onClick: () => wrappedSetIndex(i)
+  }))), /* @__PURE__ */ import_react.default.createElement(Controllers, null, /* @__PURE__ */ import_react.default.createElement("div", {
+    onClick: onPrevious
+  }, /* @__PURE__ */ import_react.default.createElement(import_ArrowLeftMedium.default, {
+    size: 20
+  })), /* @__PURE__ */ import_react.default.createElement("div", {
+    onClick: onNext
+  }, /* @__PURE__ */ import_react.default.createElement(import_ArrowRightMedium.default, {
+    size: 20
+  })))));
+};
+var Carousel_default = Carousel;
+//# sourceMappingURL=index.js.map

package/lib/cjs/components/cards/Carousel/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/cards/Carousel/index.tsx"],
+  "sourcesContent": ["import React, { useRef, useCallback, useState, useEffect } from \"react\";\nimport styled from \"styled-components\";\nimport { TransitionGroup } from \"react-transition-group\";\nimport TransitionSlide from \"../../transitions/TransitionSlide\";\n\nimport Button from \"../../cta/Button\";\nimport Text from \"../../asorted/Text\";\nimport Flex from \"../../layout/Flex\";\nimport Slide, { Props as SlideProps } from \"./Slide\";\n\nimport IconLeft from \"@ledgerhq/icons-ui/react/ArrowLeftMedium\";\nimport IconRight from \"@ledgerhq/icons-ui/react/ArrowRightMedium\";\nimport IconClose from \"@ledgerhq/icons-ui/react/CloseMedium\";\n\nconst CarouselWrapper = styled.div`\n  width: 100%;\n  height: 180px;\n  border-radius: 8px;\n  overflow: hidden;\n  cursor: pointer;\n  position: relative;\n  flex: 1;\n  background: ${(p) => p.theme.colors.neutral.c100};\n`;\n\nconst Controllers = styled(Flex)`\n  position: absolute;\n  flex-direction: row;\n  right: ${(p) => p.theme.space[5]}px;\n  bottom: ${(p) => p.theme.space[4]}px;\n  column-gap: ${(p) => p.theme.space[4]}px;\n  color: ${(p) => p.theme.colors.neutral.c00};\n\n  > div {\n    &:hover {\n      opacity: 0.5;\n    }\n  }\n`;\n\nconst Bullets = styled.div<{ active?: number }>`\n  position: absolute;\n  display: flex;\n  left: ${(p) => p.theme.space[10]}px;\n  bottom: ${(p) => p.theme.space[8]}px;\n  column-gap: ${(p) => p.theme.space[2]}px;\n  flex-direction: row;\n\n  > div {\n    position: relative;\n    height: ${(p) => p.theme.space[1]}px;\n    width: ${(p) => p.theme.space[8]}px;\n    background: ${(p) => p.theme.colors.neutral.c00};\n    opacity: 0.5;\n    &:hover {\n      opacity: 0.75;\n    }\n\n    &:nth-child(${(p) => p.active}) {\n      opacity: 1;\n      &:hover {\n        opacity: 0.75;\n      }\n    }\n\n    ::after {\n      content: \"\";\n      position: absolute;\n      top: -${(p) => p.theme.space[4]}px;\n      height: ${(p) => p.theme.space[7]}px;\n      width: 100%;\n    }\n  }\n`;\n\nconst Close = styled.div`\n  position: absolute;\n  top: ${(p) => p.theme.space[7]}px;\n  right: ${(p) => p.theme.space[5]}px;\n  color: ${(p) => p.theme.colors.neutral.c00};\n  &:hover {\n    opacity: 0.5;\n  }\n`;\n\nconst DismissWrapper = styled.div`\n  color: white;\n  align-items: center;\n  justify-content: center;\n  display: flex;\n  flex-direction: column;\n  padding: ${(p) => p.theme.space[13]}px;\n  row-gap: ${(p) => p.theme.space[7]}px;\n`;\n\nexport type Props = {\n  timeout?: number;\n  queue: SlideProps[];\n  isDismissed: boolean;\n  onDismiss: () => void;\n  dismissText?: React.ReactNode;\n  dismissConfirmText?: React.ReactNode;\n  dismissCancelText?: React.ReactNode;\n};\n\nconst DEFAULT_TIMEOUT = 7000;\nconst Carousel = ({\n  timeout = DEFAULT_TIMEOUT,\n  queue,\n  isDismissed,\n  onDismiss,\n  dismissText = \"This banner will not show up again until there is a new announcement\",\n  dismissConfirmText = \"Confirm\",\n  dismissCancelText = \"Show again\",\n}: Props): React.ReactElement | null => {\n  const intervalRef = useRef<ReturnType<typeof setInterval>>();\n\n  const [direction, setDirection] = useState(\"right\");\n  const [index, setIndex] = useState(0);\n  const [wantToDismiss, setWantToDismiss] = useState(false);\n  const [paused, setPaused] = useState(false);\n  const childFactory = useCallback(\n    (child) => React.cloneElement(child, { direction }),\n    [direction],\n  );\n\n  const wrappedSetIndex = useCallback(\n    (newIndex) => {\n      setDirection(newIndex > index ? \"left\" : \"right\");\n      setIndex(newIndex);\n    },\n    [index],\n  );\n\n  const onSlide = useCallback(\n    (direction = \"left\") => {\n      setDirection(direction);\n      const i = index + (direction === \"right\" ? -1 : 1);\n      setIndex(i < 0 ? queue.length - 1 : i >= queue.length ? 0 : i);\n    },\n    [index, queue],\n  );\n  const onPrevious = useCallback(() => onSlide(\"right\"), [onSlide]);\n  const onNext = useCallback(() => onSlide(\"left\"), [onSlide]);\n\n  const onWantToDismiss = () => setWantToDismiss(true);\n  const onCancelDismiss = () => setWantToDismiss(false);\n\n  const onMouseEnter = () => setPaused(true);\n  const onMouseLeave = () => setPaused(false);\n\n  useEffect(() => {\n    // Nb we pause automatic transitions when the mouse is within the carousel.\n    // Override passed timeout if lower than 1000ms\n    const _timeout = timeout < 1000 ? DEFAULT_TIMEOUT : timeout;\n    if (intervalRef.current) clearInterval(intervalRef.current);\n    if (!paused) intervalRef.current = setInterval(onSlide, _timeout);\n  }, [onSlide, paused, timeout]);\n\n  useEffect(() => {\n    if (isDismissed) setWantToDismiss(false);\n  }, [isDismissed]);\n\n  if (!queue?.length || isDismissed) return null;\n\n  return (\n    <CarouselWrapper id={\"carousel\"} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>\n      {wantToDismiss ? (\n        <DismissWrapper>\n          <Text color=\"neutral.c00\" fontWeight=\"medium\" variant={\"paragraph\"}>\n            {dismissText}\n          </Text>\n          <Flex columnGap={5}>\n            <Button color=\"neutral.c100\" backgroundColor=\"neutral.c00\" onClick={onDismiss}>\n              {dismissConfirmText}\n            </Button>\n            <Button\n              outline\n              color=\"neutral.c00\"\n              backgroundColor=\"neutral.c100\"\n              borderColor=\"neutral.c00\"\n              onClick={onCancelDismiss}\n            >\n              {dismissCancelText}\n            </Button>\n          </Flex>\n        </DismissWrapper>\n      ) : (\n        <div>\n          <TransitionGroup component={null} childFactory={childFactory}>\n            <TransitionSlide key={index} direction={direction}>\n              <Slide {...queue[index]} />\n            </TransitionSlide>\n          </TransitionGroup>\n\n          <Close id={\"carousel-dismiss\"} onClick={onWantToDismiss}>\n            <IconClose size={18} />\n          </Close>\n\n          <Bullets active={index + 1}>\n            {queue.map((_, i) => (\n              <div key={`bullet_${i}`} onClick={() => wrappedSetIndex(i)} />\n            ))}\n          </Bullets>\n\n          <Controllers>\n            <div onClick={onPrevious}>\n              <IconLeft size={20} />\n            </div>\n            <div onClick={onNext}>\n              <IconRight size={20} />\n            </div>\n          </Controllers>\n        </div>\n      )}\n    </CarouselWrapper>\n  );\n};\n\nexport default Carousel;\n"],
+  "mappings": "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",
+  "names": []
+}

package/lib/cjs/components/cards/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, {
+  Carousel: () => import_Carousel.default
+});
+var import_Carousel = __toModule(require("./Carousel"));
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/cards/index.ts"],
+  "sourcesContent": ["export { default as Carousel } from \"./Carousel\";\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA,sBAAoC;",
+  "names": []
+}

package/lib/cjs/components/cta/Button/Button.stories.js

@@ -0,0 +1,151 @@
+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,
+  Expand: () => Expand,
+  IconButton: () => IconButton,
+  Inverted: () => Inverted,
+  Overview: () => Overview,
+  default: () => Button_stories_default
+});
+var import_react = __toModule(require("react"));
+var import_index = __toModule(require("./index"));
+var import_Text = __toModule(require("../../asorted/Text"));
+var import_react2 = __toModule(require("@ledgerhq/icons-ui/react/"));
+var import_InvertTheme = __toModule(require("../../../styles/InvertTheme"));
+var import_Flex = __toModule(require("../../layout/Flex"));
+var import_Grid = __toModule(require("../../layout/Grid"));
+const iconPositions = ["left", "right"];
+const buttonVariants = ["main", "shade", "color", "error"];
+var Button_stories_default = {
+  title: "cta/Button",
+  component: import_index.default,
+  argTypes: {
+    variant: {
+      options: [void 0, ...buttonVariants],
+      control: {
+        type: "radio"
+      }
+    },
+    fontSize: {
+      options: [void 0, 0, 1, 2, 3, 4, 5, 6, 7, 8],
+      control: {
+        type: "radio"
+      }
+    },
+    children: {
+      type: "text"
+    },
+    iconPosition: {
+      options: iconPositions,
+      control: {
+        type: "radio"
+      }
+    },
+    disabled: {
+      type: "boolean"
+    },
+    outline: {
+      type: "boolean"
+    }
+  }
+};
+const Overview = (() => {
+  const templateProps = { Icon: import_react2.PlusMedium, children: "Try me", onClick: () => {
+  } };
+  const propsArr = [
+    { ...templateProps, Icon: void 0 },
+    { ...templateProps, iconPosition: iconPositions[0] },
+    { ...templateProps, iconPosition: iconPositions[1] },
+    { ...templateProps, children: "" }
+  ];
+  return /* @__PURE__ */ import_react.default.createElement(import_Grid.default, {
+    columns: "none",
+    gridTemplateColumns: "max-content repeat(4, 1fr)",
+    columnGap: 8,
+    rowGap: 8
+  }, buttonVariants.flatMap((buttonType, i) => [false, true].map((outline, j) => /* @__PURE__ */ import_react.default.createElement(import_react.Fragment, {
+    key: `${i}:${j}`
+  }, /* @__PURE__ */ import_react.default.createElement(import_Text.default, {
+    variant: "small",
+    color: "neutral.c70"
+  }, 'variant="', buttonType, '"', /* @__PURE__ */ import_react.default.createElement("br", null), "outline=", `{${outline.toString()}}`), propsArr.map((buttonProps) => /* @__PURE__ */ import_react.default.createElement(import_Flex.default, {
+    flex: 1,
+    columnGap: 4
+  }, [false, true].map((disabled) => /* @__PURE__ */ import_react.default.createElement(import_index.default, {
+    variant: buttonType,
+    outline,
+    disabled,
+    ...buttonProps
+  }))))))));
+}).bind({});
+const Default = (args) => {
+  return /* @__PURE__ */ import_react.default.createElement(import_index.default, {
+    ...args
+  }, args.children || "Regular button");
+};
+const Inverted = (args) => {
+  return /* @__PURE__ */ import_react.default.createElement(import_Flex.default, {
+    flexDirection: "column"
+  }, /* @__PURE__ */ import_react.default.createElement(import_Flex.default, {
+    flex: "0 0 1",
+    p: 4,
+    alignItems: "center",
+    bg: "background.main"
+  }, /* @__PURE__ */ import_react.default.createElement(import_index.default, {
+    ...args
+  }, args.children || "Regular button")), /* @__PURE__ */ import_react.default.createElement(import_InvertTheme.InvertTheme, null, /* @__PURE__ */ import_react.default.createElement(import_Flex.default, {
+    flex: "0 0 1",
+    p: 4,
+    alignItems: "center",
+    bg: "background.main"
+  }, /* @__PURE__ */ import_react.default.createElement(import_index.default, {
+    ...args
+  }, args.children || "Inverted button"))));
+};
+const IconButton = (args) => {
+  return /* @__PURE__ */ import_react.default.createElement(import_index.default, {
+    ...args
+  }, args.children || "Regular button");
+};
+IconButton.args = {
+  children: "",
+  Icon: import_react2.WalletAddMedium,
+  iconPosition: "right"
+};
+const Expand = (args) => {
+  const [show, setShow] = import_react.default.useState(false);
+  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_index.default.Expand, {
+    ...args,
+    onToggle: setShow
+  }, args.children), show && /* @__PURE__ */ import_react.default.createElement("div", {
+    style: {
+      padding: "1rem"
+    }
+  }, "Hello world!"));
+};
+Expand.args = {
+  children: "Show all"
+};
+//# sourceMappingURL=Button.stories.js.map

package/lib/cjs/components/cta/Button/Button.stories.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/cta/Button/Button.stories.tsx"],
+  "sourcesContent": ["import React, { Fragment } from \"react\";\nimport Button, { ButtonExpandProps, ButtonProps, ButtonVariants, IconPosition } from \"./index\";\nimport Text from \"../../asorted/Text\";\nimport { PlusMedium, WalletAddMedium } from \"@ledgerhq/icons-ui/react/\";\nimport { InvertTheme } from \"../../../styles/InvertTheme\";\nimport Flex from \"../../layout/Flex\";\nimport Grid from \"../../layout/Grid\";\nimport { StoryTemplate } from \"../../helpers\";\n\nconst iconPositions: IconPosition[] = [\"left\", \"right\"];\nconst buttonVariants: ButtonVariants[] = [\"main\", \"shade\", \"color\", \"error\"];\n\nexport default {\n  title: \"cta/Button\",\n  component: Button,\n  argTypes: {\n    variant: {\n      options: [undefined, ...buttonVariants],\n      control: {\n        type: \"radio\",\n      },\n    },\n    fontSize: {\n      options: [undefined, 0, 1, 2, 3, 4, 5, 6, 7, 8],\n      control: {\n        type: \"radio\",\n      },\n    },\n    children: {\n      type: \"text\",\n    },\n    iconPosition: {\n      options: iconPositions,\n      control: {\n        type: \"radio\",\n      },\n    },\n    disabled: {\n      type: \"boolean\",\n    },\n    outline: {\n      type: \"boolean\",\n    },\n  },\n};\n\nexport const Overview = (() => {\n  const templateProps = { Icon: PlusMedium, children: \"Try me\", onClick: () => {} };\n  const propsArr = [\n    { ...templateProps, Icon: undefined },\n    { ...templateProps, iconPosition: iconPositions[0] },\n    { ...templateProps, iconPosition: iconPositions[1] },\n    { ...templateProps, children: \"\" },\n  ];\n  return (\n    <Grid columns=\"none\" gridTemplateColumns=\"max-content repeat(4, 1fr)\" columnGap={8} rowGap={8}>\n      {buttonVariants.flatMap((buttonType, i) =>\n        [false, true].map((outline, j) => (\n          <Fragment key={`${i}:${j}`}>\n            <Text variant=\"small\" color=\"neutral.c70\">\n              variant=\"{buttonType}\"<br />\n              outline={`{${outline.toString()}}`}\n            </Text>\n            {propsArr.map((buttonProps) => (\n              <Flex flex={1} columnGap={4}>\n                {[false, true].map((disabled) => (\n                  <Button\n                    variant={buttonType}\n                    outline={outline}\n                    disabled={disabled}\n                    {...buttonProps}\n                  />\n                ))}\n              </Flex>\n            ))}\n          </Fragment>\n        )),\n      )}\n    </Grid>\n  );\n}).bind({});\n\nexport const Default: StoryTemplate<ButtonProps> = (args) => {\n  return <Button {...args}>{args.children || \"Regular button\"}</Button>;\n};\n\nexport const Inverted: StoryTemplate<ButtonProps> = (args) => {\n  return (\n    <Flex flexDirection=\"column\">\n      <Flex flex=\"0 0 1\" p={4} alignItems=\"center\" bg=\"background.main\">\n        <Button {...args}>{args.children || \"Regular button\"}</Button>\n      </Flex>\n      <InvertTheme>\n        <Flex flex=\"0 0 1\" p={4} alignItems=\"center\" bg=\"background.main\">\n          <Button {...args}>{args.children || \"Inverted button\"}</Button>\n        </Flex>\n      </InvertTheme>\n    </Flex>\n  );\n};\n\nexport const IconButton: StoryTemplate<ButtonProps> = (args) => {\n  return <Button {...args}>{args.children || \"Regular button\"}</Button>;\n};\nIconButton.args = {\n  children: \"\",\n  Icon: WalletAddMedium,\n  iconPosition: \"right\",\n};\n\nexport const Expand: StoryTemplate<ButtonProps> = (args: ButtonExpandProps) => {\n  const [show, setShow] = React.useState(false);\n  return (\n    <>\n      <Button.Expand {...args} onToggle={setShow}>\n        {args.children}\n      </Button.Expand>\n      {show && (\n        <div\n          style={{\n            padding: \"1rem\",\n          }}\n        >\n          Hello world!\n        </div>\n      )}\n    </>\n  );\n};\nExpand.args = {\n  children: \"Show all\",\n};\n"],
+  "mappings": "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",
+  "names": []
+}