@ledgerhq/react-ui 0.14.14 → 0.14.15-new-wc-test.0

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

@@ -0,0 +1,47 @@
+"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 variantDefault_exports = {};
+__export(variantDefault_exports, {
+  default: () => variantDefault_default
+});
+module.exports = __toCommonJS(variantDefault_exports);
+var import_react = __toESM(require("react"));
+var import_styled_components = __toESM(require("styled-components"));
+var import_Pagination = __toESM(require("./Pagination"));
+const FooterContainer = import_styled_components.default.div`
+  height: 32px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+const FooterDefault = (props) => {
+  return /* @__PURE__ */ import_react.default.createElement(FooterContainer, null, /* @__PURE__ */ import_react.default.createElement(import_Pagination.default, { ...props }));
+};
+var variantDefault_default = FooterDefault;
+//# sourceMappingURL=variantDefault.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/components/layout/Carousel/Footer/variantDefault.tsx"],
+  "sourcesContent": ["import React from \"react\";\nimport styled from \"styled-components\";\nimport Pagination from \"./Pagination\";\nimport { SubProps } from \"../types\";\n\nconst FooterContainer = styled.div`\n  height: 32px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n`;\n\nconst FooterDefault = (props: SubProps) => {\n  return (\n    <FooterContainer>\n      <Pagination {...props} />\n    </FooterContainer>\n  );\n};\n\nexport default FooterDefault;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAmB;AACnB,wBAAuB;AAGvB,MAAM,kBAAkB,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAO/B,MAAM,gBAAgB,CAAC,UAAoB;AACzC,SACE,6BAAAC,QAAA,cAAC,uBACC,6BAAAA,QAAA,cAAC,kBAAAC,SAAA,EAAY,GAAG,OAAO,CACzB;AAEJ;AAEA,IAAO,yBAAQ;",
+  "names": ["styled", "React", "Pagination"]
+}

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

@@ -0,0 +1,76 @@
+"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_embla_carousel_react = __toESM(require("embla-carousel-react"));
+var import_react = __toESM(require("react"));
+var import_styled_components = __toESM(require("styled-components"));
+var import_Footer = __toESM(require("./Footer"));
+const Embla = import_styled_components.default.div`
+  overflow: hidden;
+`;
+const EmblaContainer = import_styled_components.default.div`
+  display: flex;
+`;
+const EmblaSlide = import_styled_components.default.div`
+  flex: 0 0 100%;
+  min-width: 0;
+`;
+const Carousel = ({ children, variant = "default" }) => {
+  const [currentIndex, setCurrentIndex] = (0, import_react.useState)(0);
+  const [emblaRef, emblaApi] = (0, import_embla_carousel_react.default)({ loop: true });
+  const updateIndex = (0, import_react.useCallback)(() => {
+    if (!emblaApi)
+      return;
+    const newIndex = emblaApi.selectedScrollSnap();
+    setCurrentIndex(newIndex);
+    emblaApi.scrollTo(newIndex);
+  }, [emblaApi]);
+  (0, import_react.useEffect)(() => {
+    if (!emblaApi)
+      return;
+    updateIndex();
+    emblaApi.on("select", updateIndex);
+    emblaApi.on("reInit", updateIndex);
+  }, [emblaApi, updateIndex]);
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(Embla, { ref: emblaRef }, /* @__PURE__ */ import_react.default.createElement(EmblaContainer, null, children.map((child) => /* @__PURE__ */ import_react.default.createElement(EmblaSlide, { key: child.key }, child)))), /* @__PURE__ */ import_react.default.createElement(
+    import_Footer.default,
+    {
+      children,
+      variant,
+      emblaApi,
+      currentIndex
+    }
+  ));
+};
+var Carousel_default = Carousel;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/layout/Carousel/index.tsx"],
+  "sourcesContent": ["import useEmblaCarousel from \"embla-carousel-react\";\nimport React, { useCallback, useEffect, useState } from \"react\";\nimport styled from \"styled-components\";\nimport Footer from \"./Footer\";\nimport { Props } from \"./types\";\n\nconst Embla = styled.div`\n  overflow: hidden;\n`;\n\nconst EmblaContainer = styled.div`\n  display: flex;\n`;\n\nconst EmblaSlide = styled.div`\n  flex: 0 0 100%;\n  min-width: 0;\n`;\n\n/**\n * This component uses the https://github.com/davidjerleke/embla-carousel library.\n */\nconst Carousel = ({ children, variant = \"default\" }: Props) => {\n  const [currentIndex, setCurrentIndex] = useState(0);\n  const [emblaRef, emblaApi] = useEmblaCarousel({ loop: true });\n\n  const updateIndex = useCallback(() => {\n    if (!emblaApi) return;\n\n    const newIndex = emblaApi.selectedScrollSnap();\n    setCurrentIndex(newIndex);\n    emblaApi.scrollTo(newIndex);\n  }, [emblaApi]);\n\n  useEffect(() => {\n    if (!emblaApi) return;\n\n    // Initial call to update carousel index\n    updateIndex();\n\n    // When the selected scroll snap changes\n    emblaApi.on(\"select\", updateIndex);\n\n    // When `reInit` is called or when window is resized\n    emblaApi.on(\"reInit\", updateIndex);\n  }, [emblaApi, updateIndex]);\n\n  return (\n    <div>\n      <Embla ref={emblaRef}>\n        <EmblaContainer>\n          {children.map(child => (\n            <EmblaSlide key={child.key}>{child}</EmblaSlide>\n          ))}\n        </EmblaContainer>\n      </Embla>\n\n      <Footer\n        children={children}\n        variant={variant}\n        emblaApi={emblaApi}\n        currentIndex={currentIndex}\n      />\n    </div>\n  );\n};\nexport default Carousel;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kCAA6B;AAC7B,mBAAwD;AACxD,+BAAmB;AACnB,oBAAmB;AAGnB,MAAM,QAAQ,yBAAAA,QAAO;AAAA;AAAA;AAIrB,MAAM,iBAAiB,yBAAAA,QAAO;AAAA;AAAA;AAI9B,MAAM,aAAa,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAQ1B,MAAM,WAAW,CAAC,EAAE,UAAU,UAAU,UAAU,MAAa;AAC7D,QAAM,CAAC,cAAc,eAAe,QAAI,uBAAS,CAAC;AAClD,QAAM,CAAC,UAAU,QAAQ,QAAI,4BAAAC,SAAiB,EAAE,MAAM,KAAK,CAAC;AAE5D,QAAM,kBAAc,0BAAY,MAAM;AACpC,QAAI,CAAC;AAAU;AAEf,UAAM,WAAW,SAAS,mBAAmB;AAC7C,oBAAgB,QAAQ;AACxB,aAAS,SAAS,QAAQ;AAAA,EAC5B,GAAG,CAAC,QAAQ,CAAC;AAEb,8BAAU,MAAM;AACd,QAAI,CAAC;AAAU;AAGf,gBAAY;AAGZ,aAAS,GAAG,UAAU,WAAW;AAGjC,aAAS,GAAG,UAAU,WAAW;AAAA,EACnC,GAAG,CAAC,UAAU,WAAW,CAAC;AAE1B,SACE,6BAAAC,QAAA,cAAC,aACC,6BAAAA,QAAA,cAAC,SAAM,KAAK,YACV,6BAAAA,QAAA,cAAC,sBACE,SAAS,IAAI,WACZ,6BAAAA,QAAA,cAAC,cAAW,KAAK,MAAM,OAAM,KAAM,CACpC,CACH,CACF,GAEA,6BAAAA,QAAA;AAAA,IAAC,cAAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF,CACF;AAEJ;AACA,IAAO,mBAAQ;",
+  "names": ["styled", "useEmblaCarousel", "React", "Footer"]
+}

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

@@ -0,0 +1,17 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var types_exports = {};
+module.exports = __toCommonJS(types_exports);
+//# sourceMappingURL=types.js.map

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.14",
+  "version": "0.14.15-new-wc-test.0",
   "description": "Ledger Live - Desktop UI",
   "author": "Ledger Live Team <team-live@ledger.fr>",
   "repository": {
@@ -61,15 +61,17 @@
     "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.1",
-    "@ledgerhq/icons-ui": "^0.6.2",
+    "@ledgerhq/crypto-icons-ui": "^1.1.0-new-wc-test.0",
+    "@ledgerhq/icons-ui": "^0.6.3-new-wc-test.0",
     "@ledgerhq/ui-shared": "^0.2.1"
   },
   "peerDependencies": {
@@ -87,6 +89,8 @@
     "@storybook/addon-links": "^7.5.3",
     "@storybook/react": "^7.5.3",
     "@storybook/react-webpack5": "^7.5.3",
+    "@storybook/blocks": "^7.5.3",
+    "@storybook/manager-api": "7.5.3",
     "@svgr/core": "^5.5.0",
     "@svgr/plugin-svgo": "*",
     "@types/color": "^3.0.2",
@@ -100,6 +104,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",