@ledgerhq/react-ui 0.14.15-nightly.1 → 0.14.15-start-exchange.0

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

@@ -0,0 +1,106 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Carousel_stories_exports = {};
+__export(Carousel_stories_exports, {
+  Default: () => Default,
+  default: () => Carousel_stories_default
+});
+module.exports = __toCommonJS(Carousel_stories_exports);
+var import_react = __toESM(require("react"));
+var import_client_api = require("@storybook/client-api");
+var import_sampleSlide = __toESM(require("../../../assets/images/sampleSlide.png"));
+var import__ = __toESM(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;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,MAAM;AAAA,MACjC;AAAA,IACF;AAAA,IACA,SAAS;AAAA,MACP,aAAa;AAAA,MACb,SAAS;AAAA,QACP,MAAM;AAAA,QACN,KAAK;AAAA,QACL,KAAK;AAAA,QACL,cAAc,EAAE,SAAS,IAAK;AAAA,MAChC;AAAA,MACA,OAAO;AAAA,QACL,MAAM,EAAE,SAAS,SAAS;AAAA,QAC1B,cAAc,EAAE,SAAS,IAAK;AAAA,MAChC;AAAA,IACF;AAAA,EACF;AAAA,EACA,YAAY;AAAA,IACV,MAAM;AAAA,MACJ,aAAa;AAAA,QACX,WAAW;AAAA;AAAA,MAEb;AAAA,IACF;AAAA,EACF;AACF;AAEA,MAAM,WAAW,CAAC,SAAwB;AACxC,QAAM,QAAQ;AAAA,IACZ;AAAA,MACE,OAAO;AAAA,MACP,aAAa;AAAA,MACb,0BAAAA;AAAA,MACA,SAAS,MAAM,MAAM,qBAAqB;AAAA,IAC5C;AAAA,IACA;AAAA,MACE,OAAO;AAAA,MACP,aAAa;AAAA,MACb,0BAAAA;AAAA,MACA,SAAS,MAAM,MAAM,qBAAqB;AAAA,IAC5C;AAAA,IACA;AAAA,MACE,OAAO;AAAA,MACP,aAAa;AAAA,MACb,0BAAAA;AAAA,MACA,SAAS,MAAM,MAAM,qBAAqB;AAAA,IAC5C;AAAA,IACA;AAAA,MACE,OAAO;AAAA,MACP,aAAa;AAAA,MACb,0BAAAA;AAAA,MACA,SAAS,MAAM,MAAM,qBAAqB;AAAA,IAC5C;AAAA,EACF;AAEA,QAAM,CAAC,EAAE,UAAU,QAAI,2BAAQ;AAE/B,QAAM,YAAY,MAChB,WAAW;AAAA,IACT,aAAa;AAAA,EACf,CAAC;AAEH,SAAO,6BAAAC,QAAA,cAAC,SAAAC,SAAA,EAAU,GAAG,MAAM,OAAc,WAAsB;AACjE;AAEO,MAAM,UAAU,SAAS,KAAK,CAAC,CAAC;",
+  "names": ["image", "React", "Carousel"]
+}

package/lib/cjs/components/{layout/Carousel/Footer/Pagination/index.js → cards/Carousel/Slide.js}

@@ -26,21 +26,28 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var Pagination_exports = {};
-__export(Pagination_exports, {
-  default: () => Pagination_default
+var Slide_exports = {};
+__export(Slide_exports, {
+  default: () => Slide_default
 });
-module.exports = __toCommonJS(Pagination_exports);
+module.exports = __toCommonJS(Slide_exports);
 var import_react = __toESM(require("react"));
 var import_styled_components = __toESM(require("styled-components"));
-var import_bullets = __toESM(require("./bullets"));
-var import_utils = require("./utils");
-const FooterCarouselBullets = import_styled_components.default.div`
-  display: flex;
-  align-items: center;
+var import_Text = __toESM(require("../../asorted/Text"));
+var import_Flex = __toESM(require("../../layout/Flex"));
+const Wrapper = (0, import_styled_components.default)(import_Flex.default)`
+  width: 100%;
+  height: 100%;
+  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 Pagination = ({ children, currentIndex }) => {
-  return /* @__PURE__ */ import_react.default.createElement(FooterCarouselBullets, null, children.map((child, index) => /* @__PURE__ */ import_react.default.createElement(import_bullets.default, { key: child.key, type: (0, import_utils.getItemStatus)(index, currentIndex) })));
+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 Pagination_default = Pagination;
-//# sourceMappingURL=index.js.map
+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  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;AAAA;AAAA,mBAAkB;AAClB,+BAAmB;AACnB,kBAAiB;AACjB,kBAAiB;AAEjB,MAAM,cAAU,yBAAAA,SAAO,YAAAC,OAAI;AAAA;AAAA;AAAA;AAAA,aAId,OAAK,EAAE,MAAM,MAAM,CAAC,CAAC,MAAM,OAAK,EAAE,MAAM,MAAM,EAAE,CAAC;AAAA;AAAA,aAEjD,OAAK,EAAE,MAAM,SAAS,CAAC,CAAC;AAAA,oBACjB,OAAK,EAAE,KAAK,eAAe,OAAK,EAAE,MAAM,OAAO,QAAQ,IAAI;AAAA;AAAA;AAAA;AAY/E,MAAM,QAAQ,CAAC,EAAE,OAAO,aAAa,OAAO,QAAQ,MAAiC;AACnF,SACE,6BAAAC,QAAA,cAAC,WAAQ,KAAK,OAAO,OAAc,WACjC,6BAAAA,QAAA,cAAC,YAAAC,SAAA,EAAK,SAAS,QAAQ,OAAM,eAAc,YAAW,aACnD,KACH,GACA,6BAAAD,QAAA,cAAC,YAAAC,SAAA,EAAK,SAAS,MAAM,OAAM,eAAc,eAAc,eACpD,WACH,CACF;AAEJ;AAEA,IAAO,gBAAQ;",
+  "names": ["styled", "Flex", "React", "Text"]
+}

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

@@ -0,0 +1,187 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Carousel_exports = {};
+__export(Carousel_exports, {
+  default: () => Carousel_default
+});
+module.exports = __toCommonJS(Carousel_exports);
+var import_react = __toESM(require("react"));
+var import_styled_components = __toESM(require("styled-components"));
+var import_react_transition_group = require("react-transition-group");
+var import_TransitionSlide = __toESM(require("../../transitions/TransitionSlide"));
+var import_Button = __toESM(require("../../cta/Button"));
+var import_Text = __toESM(require("../../asorted/Text"));
+var import_Flex = __toESM(require("../../layout/Flex"));
+var import_Slide = __toESM(require("./Slide"));
+var import_ArrowLeftMedium = __toESM(require("@ledgerhq/icons-ui/reactLegacy/ArrowLeftMedium"));
+var import_ArrowRightMedium = __toESM(require("@ledgerhq/icons-ui/reactLegacy/ArrowRightMedium"));
+var import_CloseMedium = __toESM(require("@ledgerhq/icons-ui/reactLegacy/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 == null ? void 0 : 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/reactLegacy/ArrowLeftMedium\";\nimport IconRight from \"@ledgerhq/icons-ui/reactLegacy/ArrowRightMedium\";\nimport IconClose from \"@ledgerhq/icons-ui/reactLegacy/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: any) => React.cloneElement(child, { direction }),\n    [direction],\n  );\n\n  const wrappedSetIndex = useCallback(\n    (newIndex: number) => {\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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAgE;AAChE,+BAAmB;AACnB,oCAAgC;AAChC,6BAA4B;AAE5B,oBAAmB;AACnB,kBAAiB;AACjB,kBAAiB;AACjB,mBAA2C;AAE3C,6BAAqB;AACrB,8BAAsB;AACtB,yBAAsB;AAEtB,MAAM,kBAAkB,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAQf,OAAK,EAAE,MAAM,OAAO,QAAQ,IAAI;AAAA;AAGhD,MAAM,kBAAc,yBAAAA,SAAO,YAAAC,OAAI;AAAA;AAAA;AAAA,WAGpB,OAAK,EAAE,MAAM,MAAM,CAAC,CAAC;AAAA,YACpB,OAAK,EAAE,MAAM,MAAM,CAAC,CAAC;AAAA,gBACjB,OAAK,EAAE,MAAM,MAAM,CAAC,CAAC;AAAA,WAC1B,OAAK,EAAE,MAAM,OAAO,QAAQ,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS1C,MAAM,UAAU,yBAAAD,QAAO;AAAA;AAAA;AAAA,UAGb,OAAK,EAAE,MAAM,MAAM,EAAE,CAAC;AAAA,YACpB,OAAK,EAAE,MAAM,MAAM,CAAC,CAAC;AAAA,gBACjB,OAAK,EAAE,MAAM,MAAM,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,cAKvB,OAAK,EAAE,MAAM,MAAM,CAAC,CAAC;AAAA,aACtB,OAAK,EAAE,MAAM,MAAM,CAAC,CAAC;AAAA,kBAChB,OAAK,EAAE,MAAM,OAAO,QAAQ,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAM/B,OAAK,EAAE,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAUjB,OAAK,EAAE,MAAM,MAAM,CAAC,CAAC;AAAA,gBACnB,OAAK,EAAE,MAAM,MAAM,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAMrC,MAAM,QAAQ,yBAAAA,QAAO;AAAA;AAAA,SAEZ,OAAK,EAAE,MAAM,MAAM,CAAC,CAAC;AAAA,WACnB,OAAK,EAAE,MAAM,MAAM,CAAC,CAAC;AAAA,WACrB,OAAK,EAAE,MAAM,OAAO,QAAQ,GAAG;AAAA;AAAA;AAAA;AAAA;AAM1C,MAAM,iBAAiB,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAMjB,OAAK,EAAE,MAAM,MAAM,EAAE,CAAC;AAAA,aACtB,OAAK,EAAE,MAAM,MAAM,CAAC,CAAC;AAAA;AAalC,MAAM,kBAAkB;AACxB,MAAM,WAAW,CAAC;AAAA,EAChB,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,qBAAqB;AAAA,EACrB,oBAAoB;AACtB,MAAwC;AACtC,QAAM,kBAAc,qBAAuC;AAE3D,QAAM,CAAC,WAAW,YAAY,QAAI,uBAAS,OAAO;AAClD,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAS,CAAC;AACpC,QAAM,CAAC,eAAe,gBAAgB,QAAI,uBAAS,KAAK;AACxD,QAAM,CAAC,QAAQ,SAAS,QAAI,uBAAS,KAAK;AAC1C,QAAM,mBAAe;AAAA,IACnB,CAAC,UAAe,aAAAE,QAAM,aAAa,OAAO,EAAE,UAAU,CAAC;AAAA,IACvD,CAAC,SAAS;AAAA,EACZ;AAEA,QAAM,sBAAkB;AAAA,IACtB,CAAC,aAAqB;AACpB,mBAAa,WAAW,QAAQ,SAAS,OAAO;AAChD,eAAS,QAAQ;AAAA,IACnB;AAAA,IACA,CAAC,KAAK;AAAA,EACR;AAEA,QAAM,cAAU;AAAA,IACd,CAACC,aAAY,WAAW;AACtB,mBAAaA,UAAS;AACtB,YAAM,IAAI,SAASA,eAAc,UAAU,KAAK;AAChD,eAAS,IAAI,IAAI,MAAM,SAAS,IAAI,KAAK,MAAM,SAAS,IAAI,CAAC;AAAA,IAC/D;AAAA,IACA,CAAC,OAAO,KAAK;AAAA,EACf;AACA,QAAM,iBAAa,0BAAY,MAAM,QAAQ,OAAO,GAAG,CAAC,OAAO,CAAC;AAChE,QAAM,aAAS,0BAAY,MAAM,QAAQ,MAAM,GAAG,CAAC,OAAO,CAAC;AAE3D,QAAM,kBAAkB,MAAM,iBAAiB,IAAI;AACnD,QAAM,kBAAkB,MAAM,iBAAiB,KAAK;AAEpD,QAAM,eAAe,MAAM,UAAU,IAAI;AACzC,QAAM,eAAe,MAAM,UAAU,KAAK;AAE1C,8BAAU,MAAM;AAGd,UAAM,WAAW,UAAU,MAAO,kBAAkB;AACpD,QAAI,YAAY;AAAS,oBAAc,YAAY,OAAO;AAC1D,QAAI,CAAC;AAAQ,kBAAY,UAAU,YAAY,SAAS,QAAQ;AAAA,EAClE,GAAG,CAAC,SAAS,QAAQ,OAAO,CAAC;AAE7B,8BAAU,MAAM;AACd,QAAI;AAAa,uBAAiB,KAAK;AAAA,EACzC,GAAG,CAAC,WAAW,CAAC;AAEhB,MAAI,EAAC,+BAAO,WAAU;AAAa,WAAO;AAE1C,SACE,6BAAAD,QAAA,cAAC,mBAAgB,IAAI,YAAY,cAA4B,gBAC1D,gBACC,6BAAAA,QAAA,cAAC,sBACC,6BAAAA,QAAA,cAAC,YAAAE,SAAA,EAAK,OAAM,eAAc,YAAW,UAAS,SAAS,eACpD,WACH,GACA,6BAAAF,QAAA,cAAC,YAAAD,SAAA,EAAK,WAAW,KACf,6BAAAC,QAAA,cAAC,cAAAG,SAAA,EAAO,OAAM,gBAAe,iBAAgB,eAAc,SAAS,aACjE,kBACH,GACA,6BAAAH,QAAA;AAAA,IAAC,cAAAG;AAAA,IAAA;AAAA,MACC,SAAO;AAAA,MACP,OAAM;AAAA,MACN,iBAAgB;AAAA,MAChB,aAAY;AAAA,MACZ,SAAS;AAAA;AAAA,IAER;AAAA,EACH,CACF,CACF,IAEA,6BAAAH,QAAA,cAAC,aACC,6BAAAA,QAAA,cAAC,iDAAgB,WAAW,MAAM,gBAChC,6BAAAA,QAAA,cAAC,uBAAAI,SAAA,EAAgB,KAAK,OAAO,aAC3B,6BAAAJ,QAAA,cAAC,aAAAK,SAAA,EAAO,GAAG,MAAM,KAAK,GAAG,CAC3B,CACF,GAEA,6BAAAL,QAAA,cAAC,SAAM,IAAI,oBAAoB,SAAS,mBACtC,6BAAAA,QAAA,cAAC,mBAAAM,SAAA,EAAU,MAAM,IAAI,CACvB,GAEA,6BAAAN,QAAA,cAAC,WAAQ,QAAQ,QAAQ,KACtB,MAAM,IAAI,CAAC,GAAG,MACb,6BAAAA,QAAA,cAAC,SAAI,KAAK,UAAU,CAAC,IAAI,SAAS,MAAM,gBAAgB,CAAC,GAAG,CAC7D,CACH,GAEA,6BAAAA,QAAA,cAAC,mBACC,6BAAAA,QAAA,cAAC,SAAI,SAAS,cACZ,6BAAAA,QAAA,cAAC,uBAAAO,SAAA,EAAS,MAAM,IAAI,CACtB,GACA,6BAAAP,QAAA,cAAC,SAAI,SAAS,UACZ,6BAAAA,QAAA,cAAC,wBAAAQ,SAAA,EAAU,MAAM,IAAI,CACvB,CACF,CACF,CAEJ;AAEJ;AAEA,IAAO,mBAAQ;",
+  "names": ["styled", "Flex", "React", "direction", "Text", "Button", "TransitionSlide", "Slide", "IconClose", "IconLeft", "IconRight"]
+}

package/lib/cjs/components/{layout/Carousel/Footer → cards}/index.js

@@ -26,21 +26,10 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var Footer_exports = {};
-__export(Footer_exports, {
-  default: () => Footer_default
+var cards_exports = {};
+__export(cards_exports, {
+  Carousel: () => import_Carousel.default
 });
-module.exports = __toCommonJS(Footer_exports);
-var import_react = __toESM(require("react"));
-var import_variantContentCard = __toESM(require("./variantContentCard"));
-var import_variantDefault = __toESM(require("./variantDefault"));
-const Footers = {
-  "content-card": import_variantContentCard.default,
-  default: import_variantDefault.default
-};
-const Footer = (props) => {
-  const Component = Footers[props.variant];
-  return /* @__PURE__ */ import_react.default.createElement(Component, { ...props });
-};
-var Footer_default = Footer;
+module.exports = __toCommonJS(cards_exports);
+var import_Carousel = __toESM(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;AAAA;AAAA,sBAAoC;",
+  "names": []
+}

package/lib/cjs/components/index.js

@@ -35,6 +35,7 @@ __export(components_exports, {
 });
 module.exports = __toCommonJS(components_exports);
 __reExport(components_exports, require("./asorted"), module.exports);
+__reExport(components_exports, require("./cards"), module.exports);
 var import_Chart = __toESM(require("./Chart"));
 __reExport(components_exports, require("./cta"), module.exports);
 __reExport(components_exports, require("./form"), module.exports);

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/index.ts"],
-  "sourcesContent": ["export * from \"./asorted\";\nexport { default as Chart } from \"./Chart\";\nexport * from \"./cta\";\nexport * from \"./form\";\nexport * from \"./layout\";\nexport * from \"./loaders\";\nexport * from \"./message\";\nexport * from \"./navigation\";\nexport { default as Table } from \"./Table\";\nexport * from \"./tabs\";\nexport { default as Tag } from \"./Tag\";\nexport * from \"./transitions\";\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,+BAAc,sBAAd;AACA,mBAAiC;AACjC,+BAAc,kBAFd;AAGA,+BAAc,mBAHd;AAIA,+BAAc,qBAJd;AAKA,+BAAc,sBALd;AAMA,+BAAc,sBANd;AAOA,+BAAc,yBAPd;AAQA,mBAAiC;AACjC,+BAAc,mBATd;AAUA,iBAA+B;AAC/B,+BAAc,0BAXd;",
+  "sourcesContent": ["export * from \"./asorted\";\nexport * from \"./cards\";\nexport { default as Chart } from \"./Chart\";\nexport * from \"./cta\";\nexport * from \"./form\";\nexport * from \"./layout\";\nexport * from \"./loaders\";\nexport * from \"./message\";\nexport * from \"./navigation\";\nexport { default as Table } from \"./Table\";\nexport * from \"./tabs\";\nexport { default as Tag } from \"./Tag\";\nexport * from \"./transitions\";\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,+BAAc,sBAAd;AACA,+BAAc,oBADd;AAEA,mBAAiC;AACjC,+BAAc,kBAHd;AAIA,+BAAc,mBAJd;AAKA,+BAAc,qBALd;AAMA,+BAAc,sBANd;AAOA,+BAAc,sBAPd;AAQA,+BAAc,yBARd;AASA,mBAAiC;AACjC,+BAAc,mBAVd;AAWA,iBAA+B;AAC/B,+BAAc,0BAZd;",
   "names": []
 }

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

@@ -29,7 +29,6 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var layout_exports = {};
 __export(layout_exports, {
   Box: () => import_Box.default,
-  Carousel: () => import_Carousel.default,
   Drawer: () => import_Drawer.default,
   Flex: () => import_Flex.default,
   Grid: () => import_Grid.default,
@@ -44,6 +43,5 @@ var import_Grid = __toESM(require("./Grid"));
 var import_Popin = __toESM(require("./Popin"));
 var import_Side = __toESM(require("./Side"));
 var import_Drawer = __toESM(require("./Drawer"));
-var import_Carousel = __toESM(require("./Carousel"));
 var import_VerticalTimeline = __toESM(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\";\nexport { default as Carousel } from \"./Carousel\";\nexport { default as VerticalTimeline } from \"./List/VerticalTimeline\";\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAAgC;AAChC,iBAA+B;AAC/B,kBAAgC;AAChC,mBAAiC;AACjC,kBAAgC;AAChC,oBAAkC;AAClC,sBAAoC;AACpC,8BAA4C;",
+  "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;AAAA;AAAA,kBAAgC;AAChC,iBAA+B;AAC/B,kBAAgC;AAChC,mBAAiC;AACjC,kBAAgC;AAChC,oBAAkC;AAClC,8BAA4C;",
   "names": []
 }

package/lib/components/cards/Carousel/Slide.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+export type Props = {
+    onClick: () => void;
+    title: string;
+    description: string;
+    image?: string;
+};
+declare const Slide: ({ title, description, image, onClick }: Props) => React.ReactElement;
+export default Slide;

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

@@ -0,0 +1,22 @@
+import React from "react";
+import styled from "styled-components";
+import Text from "../../asorted/Text";
+import Flex from "../../layout/Flex";
+const Wrapper = styled(Flex) `
+  width: 100%;
+  height: 100%;
+  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 (React.createElement(Wrapper, { key: "key", image: image, onClick: onClick },
+        React.createElement(Text, { variant: "tiny", color: "neutral.c00", fontWeight: "regular" }, title),
+        React.createElement(Text, { variant: "h5", color: "neutral.c00", textTransform: "uppercase" }, description)));
+};
+export default Slide;
+//# sourceMappingURL=Slide.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Slide.js","sourceRoot":"","sources":["../../../../src/components/cards/Carousel/Slide.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,IAAI,MAAM,oBAAoB,CAAC;AACtC,OAAO,IAAI,MAAM,mBAAmB,CAAC;AAErC,MAAM,OAAO,GAAG,MAAM,CAAC,IAAI,CAAC,CAAoB;;;;aAInC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC;;aAEjD,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC;oBACjB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI;;;CAG9E,CAAC;AASF,MAAM,KAAK,GAAG,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,OAAO,EAAS,EAAsB,EAAE;IAClF,OAAO,CACL,oBAAC,OAAO,IAAC,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO;QACjD,oBAAC,IAAI,IAAC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAC,aAAa,EAAC,UAAU,EAAC,SAAS,IAC5D,KAAK,CACD;QACP,oBAAC,IAAI,IAAC,OAAO,EAAE,IAAI,EAAE,KAAK,EAAC,aAAa,EAAC,aAAa,EAAC,WAAW,IAC/D,WAAW,CACP,CACC,CACX,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/lib/components/cards/Carousel/index.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import { Props as SlideProps } from "./Slide";
+export type Props = {
+    timeout?: number;
+    queue: SlideProps[];
+    isDismissed: boolean;
+    onDismiss: () => void;
+    dismissText?: React.ReactNode;
+    dismissConfirmText?: React.ReactNode;
+    dismissCancelText?: React.ReactNode;
+};
+declare const Carousel: ({ timeout, queue, isDismissed, onDismiss, dismissText, dismissConfirmText, dismissCancelText, }: Props) => React.ReactElement | null;
+export default Carousel;