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

package/lib/cjs/components/layout/Carousel/types.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/layout/Carousel/types.tsx"],
+  "sourcesContent": ["import { ReactElement } from \"react\";\nimport { UseEmblaCarouselType } from \"embla-carousel-react\";\n\nexport type Variant = \"content-card\" | \"default\";\n\nexport type Props = {\n  children: ReactElement[];\n  variant?: Variant;\n};\n\n/**\n * Carousel's sub props to be passed to any component used by the carousel..\n */\nexport type SubProps = Required<Props> & {\n  emblaApi: UseEmblaCarouselType[1];\n  currentIndex: number;\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;AAAA;AAAA;",
+  "names": []
+}

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

@@ -29,6 +29,7 @@ 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,
@@ -43,5 +44,6 @@ 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 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;",
+  "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;",
   "names": []
 }

package/lib/components/index.d.ts

@@ -1,5 +1,4 @@
 export * from "./asorted";
-export * from "./cards";
 export { default as Chart } from "./Chart";
 export * from "./cta";
 export * from "./form";

package/lib/components/index.js

@@ -1,5 +1,4 @@
 export * from "./asorted";
-export * from "./cards";
 export { default as Chart } from "./Chart";
 export * from "./cta";
 export * from "./form";

package/lib/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,cAAc,OAAO,CAAC;AACtB,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,cAAc,QAAQ,CAAC;AACvB,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,OAAO,CAAC;AACvC,cAAc,eAAe,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,cAAc,OAAO,CAAC;AACtB,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,cAAc,QAAQ,CAAC;AACvB,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,OAAO,CAAC;AACvC,cAAc,eAAe,CAAC"}

package/lib/components/layout/Carousel/Footer/Pagination/bullets.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import { ItemStatus } from "./types";
+declare const Bullet: ({ type }: {
+    type: ItemStatus;
+}) => React.JSX.Element;
+export default Bullet;

package/lib/components/layout/Carousel/Footer/Pagination/bullets.js

@@ -0,0 +1,25 @@
+import React from "react";
+import { animated, useSpring } from "react-spring";
+import { useTheme } from "styled-components";
+import { ItemStatus } from "./types";
+const defaultBulletStyle = {
+    height: "6px",
+    borderRadius: "1000px",
+    marginRight: "4px",
+    opacity: 1,
+};
+const useBulletStyles = () => {
+    const { colors } = useTheme();
+    const BulletStyle = {
+        [ItemStatus.active]: Object.assign(Object.assign({}, defaultBulletStyle), { width: "16px", backgroundColor: colors.opacityDefault.c80 }),
+        [ItemStatus.nearby]: Object.assign(Object.assign({}, defaultBulletStyle), { width: "8px", backgroundColor: colors.opacityDefault.c30 }),
+        [ItemStatus.far]: Object.assign(Object.assign({}, defaultBulletStyle), { width: "4px", backgroundColor: colors.opacityDefault.c10 }),
+        [ItemStatus.none]: Object.assign(Object.assign({}, defaultBulletStyle), { width: "0px", opacity: 0, backgroundColor: colors.opacityDefault.c10, marginRight: "0px" }),
+    };
+    return BulletStyle;
+};
+const Bullet = ({ type }) => {
+    return React.createElement(animated.div, { style: useSpring(useBulletStyles()[type]) });
+};
+export default Bullet;
+//# sourceMappingURL=bullets.js.map

package/lib/components/layout/Carousel/Footer/Pagination/bullets.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bullets.js","sourceRoot":"","sources":["../../../../../../src/components/layout/Carousel/Footer/Pagination/bullets.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACnD,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAErC,MAAM,kBAAkB,GAAG;IACzB,MAAM,EAAE,KAAK;IACb,YAAY,EAAE,QAAQ;IACtB,WAAW,EAAE,KAAK;IAClB,OAAO,EAAE,CAAC;CACX,CAAC;AAEF,MAAM,eAAe,GAAG,GAAG,EAAE;IAC3B,MAAM,EAAE,MAAM,EAAE,GAAG,QAAQ,EAAE,CAAC;IAE9B,MAAM,WAAW,GASb;QACF,CAAC,UAAU,CAAC,MAAM,CAAC,kCACd,kBAAkB,KACrB,KAAK,EAAE,MAAM,EACb,eAAe,EAAE,MAAM,CAAC,cAAc,CAAC,GAAG,GAC3C;QACD,CAAC,UAAU,CAAC,MAAM,CAAC,kCACd,kBAAkB,KACrB,KAAK,EAAE,KAAK,EACZ,eAAe,EAAE,MAAM,CAAC,cAAc,CAAC,GAAG,GAC3C;QACD,CAAC,UAAU,CAAC,GAAG,CAAC,kCACX,kBAAkB,KACrB,KAAK,EAAE,KAAK,EACZ,eAAe,EAAE,MAAM,CAAC,cAAc,CAAC,GAAG,GAC3C;QACD,CAAC,UAAU,CAAC,IAAI,CAAC,kCACZ,kBAAkB,KACrB,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,CAAC,EACV,eAAe,EAAE,MAAM,CAAC,cAAc,CAAC,GAAG,EAC1C,WAAW,EAAE,KAAK,GACnB;KACF,CAAC;IAEF,OAAO,WAAW,CAAC;AACrB,CAAC,CAAC;AAEF,MAAM,MAAM,GAAG,CAAC,EAAE,IAAI,EAAwB,EAAE,EAAE;IAChD,OAAO,oBAAC,QAAQ,CAAC,GAAG,IAAC,KAAK,EAAE,SAAS,CAAC,eAAe,EAAE,CAAC,IAAI,CAAC,CAAC,GAAI,CAAC;AACrE,CAAC,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/lib/components/layout/Carousel/Footer/Pagination/index.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { SubProps } from "../../types";
+declare const Pagination: ({ children, currentIndex }: SubProps) => React.JSX.Element;
+export default Pagination;

package/lib/components/layout/Carousel/Footer/Pagination/index.js

@@ -0,0 +1,13 @@
+import React from "react";
+import styled from "styled-components";
+import Bullet from "./bullets";
+import { getItemStatus } from "./utils";
+const FooterCarouselBullets = styled.div `
+  display: flex;
+  align-items: center;
+`;
+const Pagination = ({ children, currentIndex }) => {
+    return (React.createElement(FooterCarouselBullets, null, children.map((child, index) => (React.createElement(Bullet, { key: child.key, type: getItemStatus(index, currentIndex) })))));
+};
+export default Pagination;
+//# sourceMappingURL=index.js.map

package/lib/components/layout/Carousel/Footer/Pagination/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/components/layout/Carousel/Footer/Pagination/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAExC,MAAM,qBAAqB,GAAG,MAAM,CAAC,GAAG,CAAA;;;CAGvC,CAAC;AAEF,MAAM,UAAU,GAAG,CAAC,EAAE,QAAQ,EAAE,YAAY,EAAY,EAAE,EAAE;IAC1D,OAAO,CACL,oBAAC,qBAAqB,QACnB,QAAQ,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CAC9B,oBAAC,MAAM,IAAC,GAAG,EAAE,KAAK,CAAC,GAAG,EAAE,IAAI,EAAE,aAAa,CAAC,KAAK,EAAE,YAAY,CAAC,GAAI,CACrE,CAAC,CACoB,CACzB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/lib/components/layout/Carousel/Footer/Pagination/types.d.ts

@@ -0,0 +1,6 @@
+export declare enum ItemStatus {
+    "active" = 0,
+    "nearby" = 1,
+    "far" = 2,
+    "none" = 3
+}

package/lib/components/layout/Carousel/Footer/Pagination/types.js

@@ -0,0 +1,8 @@
+export var ItemStatus;
+(function (ItemStatus) {
+    ItemStatus[ItemStatus["active"] = 0] = "active";
+    ItemStatus[ItemStatus["nearby"] = 1] = "nearby";
+    ItemStatus[ItemStatus["far"] = 2] = "far";
+    ItemStatus[ItemStatus["none"] = 3] = "none";
+})(ItemStatus || (ItemStatus = {}));
+//# sourceMappingURL=types.js.map

package/lib/components/layout/Carousel/Footer/Pagination/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../../src/components/layout/Carousel/Footer/Pagination/types.ts"],"names":[],"mappings":"AAAA,MAAM,CAAN,IAAY,UAKX;AALD,WAAY,UAAU;IACpB,+CAAQ,CAAA;IACR,+CAAQ,CAAA;IACR,yCAAK,CAAA;IACL,2CAAM,CAAA;AACR,CAAC,EALW,UAAU,KAAV,UAAU,QAKrB"}

package/lib/components/layout/Carousel/Footer/Pagination/utils.d.ts

@@ -0,0 +1,5 @@
+import { ItemStatus } from "./types";
+/**
+ * Returns the status of an indexed item from the carousel index.
+ */
+export declare const getItemStatus: (itemIndex: number, activeIndex: number) => ItemStatus;

package/lib/components/layout/Carousel/Footer/Pagination/utils.js

@@ -0,0 +1,18 @@
+import { ItemStatus } from "./types";
+/**
+ * Returns the status of an indexed item from the carousel index.
+ */
+export const getItemStatus = (itemIndex, activeIndex) => {
+    const itemDistanceFromActiveIndex = Math.abs(itemIndex - activeIndex);
+    switch (itemDistanceFromActiveIndex) {
+        case 0:
+            return ItemStatus.active;
+        case 1:
+            return ItemStatus.nearby;
+        case 2:
+            return ItemStatus.far;
+        default:
+            return ItemStatus.none;
+    }
+};
+//# sourceMappingURL=utils.js.map

package/lib/components/layout/Carousel/Footer/Pagination/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../../../src/components/layout/Carousel/Footer/Pagination/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAErC;;GAEG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,SAAiB,EAAE,WAAmB,EAAE,EAAE;IACtE,MAAM,2BAA2B,GAAG,IAAI,CAAC,GAAG,CAAC,SAAS,GAAG,WAAW,CAAC,CAAC;IAEtE,QAAQ,2BAA2B,EAAE;QACnC,KAAK,CAAC;YACJ,OAAO,UAAU,CAAC,MAAM,CAAC;QAC3B,KAAK,CAAC;YACJ,OAAO,UAAU,CAAC,MAAM,CAAC;QAC3B,KAAK,CAAC;YACJ,OAAO,UAAU,CAAC,GAAG,CAAC;QACxB;YACE,OAAO,UAAU,CAAC,IAAI,CAAC;KAC1B;AACH,CAAC,CAAC"}

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

@@ -0,0 +1,4 @@
+import React from "react";
+import { SubProps } from "../types";
+declare const Footer: (props: SubProps) => React.JSX.Element;
+export default Footer;

package/lib/components/layout/Carousel/Footer/index.js

@@ -0,0 +1,13 @@
+import React from "react";
+import FooterContentCard from "./variantContentCard";
+import FooterDefault from "./variantDefault";
+const Footers = {
+    "content-card": FooterContentCard,
+    default: FooterDefault,
+};
+const Footer = (props) => {
+    const Component = Footers[props.variant];
+    return React.createElement(Component, Object.assign({}, props));
+};
+export default Footer;
+//# sourceMappingURL=index.js.map

package/lib/components/layout/Carousel/Footer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/layout/Carousel/Footer/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAC;AAElC,OAAO,iBAAiB,MAAM,sBAAsB,CAAC;AACrD,OAAO,aAAa,MAAM,kBAAkB,CAAC;AAE7C,MAAM,OAAO,GAAuC;IAClD,cAAc,EAAE,iBAAiB;IACjC,OAAO,EAAE,aAAa;CACvB,CAAC;AAEF,MAAM,MAAM,GAAG,CAAC,KAAe,EAAE,EAAE;IACjC,MAAM,SAAS,GAAG,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IACzC,OAAO,oBAAC,SAAS,oBAAK,KAAK,EAAI,CAAC;AAClC,CAAC,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/lib/components/layout/Carousel/Footer/variantContentCard.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { SubProps } from "../types";
+declare const FooterContentCard: ({ children, emblaApi, currentIndex, variant }: SubProps) => React.JSX.Element | null;
+export default FooterContentCard;

package/lib/components/layout/Carousel/Footer/variantContentCard.js

@@ -0,0 +1,34 @@
+import { ArrowLeft, ArrowRight } from "@ledgerhq/icons-ui/react";
+import React from "react";
+import styled from "styled-components";
+import Pagination from "./Pagination";
+const FooterContainer = styled.div `
+  height: 32px;
+  border-top: 1px solid ${p => p.theme.colors.opacityDefault.c10};
+  display: flex;
+  justify-content: space-between;
+  padding: 6px 16px 6px 16px;
+`;
+const FooterArrowsContainer = styled.div `
+  display: flex;
+  gap: 8px;
+  align-items: center;
+`;
+const FooterArrowContainer = styled.div `
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+`;
+const FooterContentCard = ({ children, emblaApi, currentIndex, variant }) => {
+    if (children.length === 1)
+        return null;
+    return (React.createElement(FooterContainer, null,
+        React.createElement(Pagination, { variant: variant, children: children, emblaApi: emblaApi, currentIndex: currentIndex }),
+        React.createElement(FooterArrowsContainer, null,
+            React.createElement(FooterArrowContainer, { onClick: () => emblaApi === null || emblaApi === void 0 ? void 0 : emblaApi.scrollPrev() },
+                React.createElement(ArrowLeft, { size: "S" })),
+            React.createElement(FooterArrowContainer, { onClick: () => emblaApi === null || emblaApi === void 0 ? void 0 : emblaApi.scrollNext() },
+                React.createElement(ArrowRight, { size: "S" })))));
+};
+export default FooterContentCard;
+//# sourceMappingURL=variantContentCard.js.map

package/lib/components/layout/Carousel/Footer/variantContentCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"variantContentCard.js","sourceRoot":"","sources":["../../../../../src/components/layout/Carousel/Footer/variantContentCard.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACjE,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,UAAU,MAAM,cAAc,CAAC;AAGtC,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAA;;0BAER,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,cAAc,CAAC,GAAG;;;;CAI/D,CAAC;AAEF,MAAM,qBAAqB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;CAIvC,CAAC;AAEF,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;CAItC,CAAC;AAEF,MAAM,iBAAiB,GAAG,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,YAAY,EAAE,OAAO,EAAY,EAAE,EAAE;IACpF,IAAI,QAAQ,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO,IAAI,CAAC;IAEvC,OAAO,CACL,oBAAC,eAAe;QACd,oBAAC,UAAU,IACT,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,YAAY,GAC1B;QAEF,oBAAC,qBAAqB;YACpB,oBAAC,oBAAoB,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,UAAU,EAAE;gBACzD,oBAAC,SAAS,IAAC,IAAI,EAAC,GAAG,GAAG,CACD;YACvB,oBAAC,oBAAoB,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,UAAU,EAAE;gBACzD,oBAAC,UAAU,IAAC,IAAI,EAAC,GAAG,GAAG,CACF,CACD,CACR,CACnB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/lib/components/layout/Carousel/Footer/variantDefault.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { SubProps } from "../types";
+declare const FooterDefault: (props: SubProps) => React.JSX.Element;
+export default FooterDefault;

package/lib/components/layout/Carousel/Footer/variantDefault.js

@@ -0,0 +1,15 @@
+import React from "react";
+import styled from "styled-components";
+import Pagination from "./Pagination";
+const FooterContainer = styled.div `
+  height: 32px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+const FooterDefault = (props) => {
+    return (React.createElement(FooterContainer, null,
+        React.createElement(Pagination, Object.assign({}, props))));
+};
+export default FooterDefault;
+//# sourceMappingURL=variantDefault.js.map

package/lib/components/layout/Carousel/Footer/variantDefault.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"variantDefault.js","sourceRoot":"","sources":["../../../../../src/components/layout/Carousel/Footer/variantDefault.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,UAAU,MAAM,cAAc,CAAC;AAGtC,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;CAKjC,CAAC;AAEF,MAAM,aAAa,GAAG,CAAC,KAAe,EAAE,EAAE;IACxC,OAAO,CACL,oBAAC,eAAe;QACd,oBAAC,UAAU,oBAAK,KAAK,EAAI,CACT,CACnB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC"}

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

@@ -0,0 +1,7 @@
+import React from "react";
+import { Props } from "./types";
+/**
+ * This component uses the https://github.com/davidjerleke/embla-carousel library.
+ */
+declare const Carousel: ({ children, variant }: Props) => React.JSX.Element;
+export default Carousel;

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

@@ -0,0 +1,44 @@
+import useEmblaCarousel from "embla-carousel-react";
+import React, { useCallback, useEffect, useState } from "react";
+import styled from "styled-components";
+import Footer from "./Footer";
+const Embla = styled.div `
+  overflow: hidden;
+`;
+const EmblaContainer = styled.div `
+  display: flex;
+`;
+const EmblaSlide = styled.div `
+  flex: 0 0 100%;
+  min-width: 0;
+`;
+/**
+ * This component uses the https://github.com/davidjerleke/embla-carousel library.
+ */
+const Carousel = ({ children, variant = "default" }) => {
+    const [currentIndex, setCurrentIndex] = useState(0);
+    const [emblaRef, emblaApi] = useEmblaCarousel({ loop: true });
+    const updateIndex = useCallback(() => {
+        if (!emblaApi)
+            return;
+        const newIndex = emblaApi.selectedScrollSnap();
+        setCurrentIndex(newIndex);
+        emblaApi.scrollTo(newIndex);
+    }, [emblaApi]);
+    useEffect(() => {
+        if (!emblaApi)
+            return;
+        // Initial call to update carousel index
+        updateIndex();
+        // When the selected scroll snap changes
+        emblaApi.on("select", updateIndex);
+        // When `reInit` is called or when window is resized
+        emblaApi.on("reInit", updateIndex);
+    }, [emblaApi, updateIndex]);
+    return (React.createElement("div", null,
+        React.createElement(Embla, { ref: emblaRef },
+            React.createElement(EmblaContainer, null, children.map(child => (React.createElement(EmblaSlide, { key: child.key }, child))))),
+        React.createElement(Footer, { children: children, variant: variant, emblaApi: emblaApi, currentIndex: currentIndex })));
+};
+export default Carousel;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/layout/Carousel/index.tsx"],"names":[],"mappings":"AAAA,OAAO,gBAAgB,MAAM,sBAAsB,CAAC;AACpD,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAChE,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,MAAM,MAAM,UAAU,CAAC;AAG9B,MAAM,KAAK,GAAG,MAAM,CAAC,GAAG,CAAA;;CAEvB,CAAC;AAEF,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAA;;CAEhC,CAAC;AAEF,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAA;;;CAG5B,CAAC;AAEF;;GAEG;AACH,MAAM,QAAQ,GAAG,CAAC,EAAE,QAAQ,EAAE,OAAO,GAAG,SAAS,EAAS,EAAE,EAAE;IAC5D,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IACpD,MAAM,CAAC,QAAQ,EAAE,QAAQ,CAAC,GAAG,gBAAgB,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,CAAC;IAE9D,MAAM,WAAW,GAAG,WAAW,CAAC,GAAG,EAAE;QACnC,IAAI,CAAC,QAAQ;YAAE,OAAO;QAEtB,MAAM,QAAQ,GAAG,QAAQ,CAAC,kBAAkB,EAAE,CAAC;QAC/C,eAAe,CAAC,QAAQ,CAAC,CAAC;QAC1B,QAAQ,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;IAC9B,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,QAAQ;YAAE,OAAO;QAEtB,wCAAwC;QACxC,WAAW,EAAE,CAAC;QAEd,wCAAwC;QACxC,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,WAAW,CAAC,CAAC;QAEnC,oDAAoD;QACpD,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,WAAW,CAAC,CAAC;IACrC,CAAC,EAAE,CAAC,QAAQ,EAAE,WAAW,CAAC,CAAC,CAAC;IAE5B,OAAO,CACL;QACE,oBAAC,KAAK,IAAC,GAAG,EAAE,QAAQ;YAClB,oBAAC,cAAc,QACZ,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,CACrB,oBAAC,UAAU,IAAC,GAAG,EAAE,KAAK,CAAC,GAAG,IAAG,KAAK,CAAc,CACjD,CAAC,CACa,CACX;QAER,oBAAC,MAAM,IACL,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,YAAY,GAC1B,CACE,CACP,CAAC;AACJ,CAAC,CAAC;AACF,eAAe,QAAQ,CAAC"}

package/lib/components/layout/Carousel/types.d.ts

@@ -0,0 +1,14 @@
+import { ReactElement } from "react";
+import { UseEmblaCarouselType } from "embla-carousel-react";
+export type Variant = "content-card" | "default";
+export type Props = {
+    children: ReactElement[];
+    variant?: Variant;
+};
+/**
+ * Carousel's sub props to be passed to any component used by the carousel..
+ */
+export type SubProps = Required<Props> & {
+    emblaApi: UseEmblaCarouselType[1];
+    currentIndex: number;
+};

package/lib/components/layout/Carousel/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/lib/components/layout/Carousel/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/components/layout/Carousel/types.tsx"],"names":[],"mappings":""}

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

@@ -4,4 +4,5 @@ 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 Carousel } from "./Carousel";
 export { default as VerticalTimeline } from "./List/VerticalTimeline";

package/lib/components/layout/index.js

@@ -4,5 +4,6 @@ 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 Carousel } from "./Carousel";
 export { default as VerticalTimeline } from "./List/VerticalTimeline";
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/layout/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,yBAAyB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/layout/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,yBAAyB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/react-ui",
-  "version": "0.14.15-start-exchange.0",
+  "version": "0.14.15",
   "description": "Ledger Live - Desktop UI",
   "author": "Ledger Live Team <team-live@ledger.fr>",
   "repository": {
@@ -61,14 +61,16 @@
     "chart.js": "^3.5.1",
     "chartjs-adapter-moment": "^1.0.0",
     "color": "^4.0.0",
+    "embla-carousel-react": "8.0.0-rc17",
     "moment": "^2.29.1",
     "react-chartjs-2": "^3.3.0",
     "react-is": "^17.0.2",
     "react-select": "^5.2.1",
+    "react-spring": "8.0.27",
     "react-transition-group": "^4.4.2",
     "react-window": "^1.8.6",
     "styled-system": "^5.1.5",
-    "@ledgerhq/crypto-icons-ui": "^1.0.2-start-exchange.0",
+    "@ledgerhq/crypto-icons-ui": "^1.0.2",
     "@ledgerhq/icons-ui": "^0.6.2",
     "@ledgerhq/ui-shared": "^0.2.1"
   },
@@ -100,6 +102,7 @@
     "@types/styled-system": "^5.1.12",
     "babel-loader": "^8.0.0",
     "csstype": "^3.0.11",
+    "embla-carousel": "8.0.0-rc17",
     "esbuild": "^0.19.0",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",

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

@@ -1,106 +0,0 @@
-"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

@@ -1,7 +0,0 @@
-{
-  "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/cards/Carousel/Slide.js.map

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