@ledgerhq/react-ui 0.45.0 → 0.46.0-nightly.20260214030108

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

@@ -1,121 +1,2022 @@
+(() => {
 "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,
-  PortfolioContentCards: () => PortfolioContentCards,
-  default: () => Carousel_stories_default
-});
-module.exports = __toCommonJS(Carousel_stories_exports);
-var import_addon_actions = require("@storybook/addon-actions");
-var import_react = __toESM(require("react"));
-var import_PortfolioContentCard = __toESM(require("../ContentCard/PortfolioContentCard"));
-var import__ = __toESM(require("./"));
-const SlideContext = import_react.default.createContext([]);
-var Carousel_stories_default = {
-  title: "Layout/Carousel",
-  argTypes: {
-    children: {
-      description: "The elements to be displayed.",
-      control: { type: "range", min: 0, max: 10, step: 1 }
-    },
-    variant: {
-      description: "Variant for the carousel.",
-      options: ["default", "content-card"],
-      defaultValue: "default",
-      control: "inline-radio"
-    },
-    autoPlay: {
-      description: "The time in milliseconds between automatic slide change (0 for no auto-play)."
-    },
-    onNext: {
-      description: "Function called when the user moves to the next slide."
-    },
-    onPrev: {
-      description: "Function called when the user moves to the previous slide."
-    }
-  },
-  args: {
-    variant: "default",
-    children: 5,
-    autoPlay: 0
-  },
-  parameters: {
-    docs: {
-      description: {
-        component: "A simple Carousel component."
+var __webpack_modules__ = ({
+4572(__unused_rspack_module, __webpack_exports__, __webpack_require__) {
+__webpack_require__.d(__webpack_exports__, {
+  "default": () => (Tag)
+});
+/* import */ var react__rspack_import_0 = __webpack_require__(2015);
+/* import */ var react__rspack_import_0_default = /*#__PURE__*/__webpack_require__.n(react__rspack_import_0);
+/* import */ var styled_system__rspack_import_1 = __webpack_require__(9351);
+/* import */ var styled_system__rspack_import_1_default = /*#__PURE__*/__webpack_require__.n(styled_system__rspack_import_1);
+/* import */ var _asorted_Text__rspack_import_3 = __webpack_require__(348);
+/* import */ var _styled__rspack_import_2 = __webpack_require__(7680);
+
+
+
+
+function getColor({ type, active, disabled }) {
+    switch(type){
+        case "plain":
+            if (disabled) return active ? "neutral.c00" : "neutral.c70";
+            return active ? "neutral.c00" : "primary.c90";
+        default:
+            return disabled ? "neutral.c70" : "primary.c90";
+    }
+}
+function getBgColor({ type, active, disabled }) {
+    switch(type){
+        case "plain":
+            return active ? disabled ? "neutral.c70" : "primary.c90" : undefined;
+        case "opacity":
+            return active ? disabled ? "neutral.c30" : "primary.c20" : undefined;
+        default:
+            return;
+    }
+}
+function getBorderColor({ type, active, disabled }) {
+    if (!active) return;
+    switch(type){
+        case "outlined":
+            return disabled ? "neutral.c70" : "primary.c90";
+        case "outlinedOpacity":
+            return disabled ? "neutral.c40" : "primary.c40";
+    }
+}
+function getPadding({ size }) {
+    // Padding is 1px less than what's indicated in the design because of the 1px wide border.
+    switch(size){
+        case "tiny":
+            return "1px 3px";
+        case "small":
+            return "2px 4px";
+        case "medium":
+            return "5px 7px";
+        case "large":
+        default:
+            return "8px 9px 9px";
+    }
+}
+function getTextProps({ size }) {
+    switch(size){
+        case "tiny":
+        case "small":
+        case "medium":
+            return {
+                variant: "tiny",
+                fontWeight: "semiBold",
+                lineHeight: "normal"
+            };
+        case "large":
+        default:
+            return {
+                variant: "extraSmall",
+                fontWeight: "semiBold"
+            };
+    }
+}
+const TagContainer = _styled__rspack_import_2["default"].div.attrs((props)=>({
+        backgroundColor: props.bg || props.backgroundColor || getBgColor(props),
+        color: props.color || getColor(props),
+        borderColor: getBorderColor(props)
+    }))`
+  display: inline-flex;
+  justify-content: center;
+  border: 1px solid transparent;
+  border-radius: ${(p)=>`${p.theme.radii[1]}px`};
+  padding: ${(p)=>getPadding(p)};
+  ${styled_system__rspack_import_1.border}
+`;
+function Tag({ children, textProps, size = "large", ...props }) {
+    const textColor = getColor(props);
+    const baseTextProps = getTextProps({
+        size,
+        ...props
+    });
+    return /*#__PURE__*/ react__rspack_import_0_default().createElement(TagContainer, {
+        size: size,
+        ...props
+    }, /*#__PURE__*/ react__rspack_import_0_default().createElement(_asorted_Text__rspack_import_3["default"], {
+        ...baseTextProps,
+        color: textColor,
+        ...textProps ? textProps : {}
+    }, children));
+}
+
+
+},
+348(__unused_rspack_module, __webpack_exports__, __webpack_require__) {
+__webpack_require__.d(__webpack_exports__, {
+  "default": () => (__rspack_default_export)
+});
+/* import */ var _styled__rspack_import_1 = __webpack_require__(7680);
+/* import */ var styled_system__rspack_import_0 = __webpack_require__(9351);
+/* import */ var styled_system__rspack_import_0_default = /*#__PURE__*/__webpack_require__.n(styled_system__rspack_import_0);
+/* import */ var _styles_styled_fontFamily__rspack_import_3 = __webpack_require__(3364);
+/* import */ var _styles__rspack_import_2 = __webpack_require__(4368);
+
+
+
+
+const uppercase = (0,styled_system__rspack_import_0.system)({
+    uppercase: {
+        property: "textTransform",
+        transform: (value)=>value ? "uppercase" : "none"
+    }
+});
+const Text = _styled__rspack_import_1["default"].span.attrs(({ variant = "body", fontSize, color })=>({
+        fontSize: fontSize ? fontSize : variant,
+        color: color || "neutral.c100"
+    }))`
+  font-weight: 500;
+  white-space: ${(props)=>props.whiteSpace ?? "normal"};
+  ${(p)=>_styles__rspack_import_2.textVariantStyle[p.variant || "body"]}
+  ${(0,styled_system__rspack_import_0.compose)(uppercase, styled_system__rspack_import_0.lineHeight, _styles_styled_fontFamily__rspack_import_3["default"], styled_system__rspack_import_0.fontSize, styled_system__rspack_import_0.textAlign, styled_system__rspack_import_0.fontWeight, styled_system__rspack_import_0.letterSpacing, (0,styled_system__rspack_import_0.system)({
+    textOverflow: true
+}))}
+  ${(p)=>p.textTransform ? `text-transform: ${p.textTransform};` : ""}
+`;
+/* export default */ const __rspack_default_export = (Text);
+
+
+},
+4368(__unused_rspack_module, __webpack_exports__, __webpack_require__) {
+__webpack_require__.d(__webpack_exports__, {
+  fontStyles: () => (fontStyles),
+  textVariantStyle: () => (textVariantStyle)
+});
+/* import */ var styled_components__rspack_import_0 = __webpack_require__(2770);
+/* import */ var styled_components__rspack_import_0_default = /*#__PURE__*/__webpack_require__.n(styled_components__rspack_import_0);
+
+const getFontSource = (name)=>(props)=>{
+        const fontsPath = props.fontsPath ?? "assets/fonts";
+        const fontName = props.fontMappings && props.fontMappings(name) || `${name}.woff2`;
+        return `url("${fontsPath}/${fontName}") format("woff2")`;
+    };
+const fontStyles = (0,styled_components__rspack_import_0.css)`
+  @font-face {
+    font-family: "Inter";
+    src: ${getFontSource("Inter-ExtraLight-BETA")};
+    font-weight: 100;
+    font-style: normal;
+  }
+
+  @font-face {
+    font-family: "Inter";
+    src: ${getFontSource("Inter-Light-BETA")};
+    font-weight: 300;
+    font-style: normal;
+  }
+
+  @font-face {
+    font-family: "Inter";
+    src: ${getFontSource("Inter-Regular")};
+    font-weight: 400;
+    font-style: normal;
+  }
+
+  @font-face {
+    font-family: "Inter";
+    src: ${getFontSource("Inter-Medium")};
+    font-weight: 500;
+    font-style: normal;
+  }
+
+  @font-face {
+    font-family: "Inter";
+    src: ${getFontSource("Inter-SemiBold")};
+    font-weight: 600;
+    font-style: normal;
+  }
+
+  @font-face {
+    font-family: "Inter";
+    src: ${getFontSource("Inter-ExtraBold")};
+    font-weight: 900;
+    font-style: normal;
+  }
+
+  @font-face {
+    font-family: "Alpha";
+    src: ${getFontSource("HMAlphaMono-Medium")};
+    font-weight: 500;
+    font-style: normal;
+  }
+`;
+const textVariantStyle = {
+    h1: {
+        fontFamily: "Alpha, Inter, Sans",
+        fontWeight: 500,
+        "text-transform": "uppercase"
+    },
+    h1Inter: {
+        fontFamily: "Inter, Sans",
+        fontWeight: 500,
+        "text-transform": "uppercase"
+    },
+    h2: {
+        fontFamily: "Alpha, Inter, Sans",
+        fontWeight: 500,
+        "text-transform": "uppercase"
+    },
+    h2Inter: {
+        fontFamily: "Inter, Sans",
+        fontWeight: 500,
+        "text-transform": "uppercase"
+    },
+    h3: {
+        fontFamily: "Alpha, Inter, Sans",
+        fontWeight: 500,
+        "text-transform": "uppercase"
+    },
+    h3Inter: {
+        fontFamily: "Inter, Sans",
+        fontWeight: 500
+    },
+    h4: {
+        fontFamily: "Alpha, Inter, Sans",
+        fontWeight: 500,
+        "text-transform": "uppercase"
+    },
+    h4Inter: {
+        fontFamily: "Inter, Sans",
+        fontWeight: 600
+    },
+    h5: {
+        fontFamily: "Alpha, Inter, Sans",
+        fontWeight: 500,
+        "text-transform": "uppercase"
+    },
+    h5Inter: {
+        fontFamily: "Inter, Sans",
+        fontWeight: 500
+    },
+    large: {
+        fontFamily: "Inter, Sans"
+    },
+    largeLineHeight: {
+        fontFamily: "Inter, Sans",
+        lineHeight: 1.7
+    },
+    body: {
+        fontFamily: "Inter, Sans"
+    },
+    bodyLineHeight: {
+        fontFamily: "Inter, Sans",
+        lineHeight: 1.7
+    },
+    paragraph: {
+        fontFamily: "Inter, Sans"
+    },
+    paragraphLineHeight: {
+        fontFamily: "Inter, Sans",
+        lineHeight: 1.7
+    },
+    small: {
+        fontFamily: "Inter, Sans"
+    },
+    extraSmall: {
+        fontFamily: "Inter, Sans"
+    },
+    tiny: {
+        fontFamily: "Inter, Sans"
+    },
+    micro: {
+        fontFamily: "Inter, Sans"
+    },
+    subtitle: {
+        fontFamily: "Inter, Sans",
+        fontWeight: 600,
+        "text-transform": "uppercase"
+    }
+};
+
+
+},
+1133(__unused_rspack_module, __webpack_exports__, __webpack_require__) {
+
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, {
+  "default": () => (/* binding */ cta_Button)
+});
+
+// UNUSED EXPORTS: ButtonUnstyled, ButtonExpand, buttonSizeStyle, Base
+
+;// CONCATENATED MODULE: external "@ledgerhq/icons-ui/reactLegacy/ChevronBottomMedium"
+const ChevronBottomMedium_namespaceObject = require("@ledgerhq/icons-ui/reactLegacy/ChevronBottomMedium");
+var ChevronBottomMedium_default = /*#__PURE__*/__webpack_require__.n(ChevronBottomMedium_namespaceObject);
+// EXTERNAL MODULE: external "react"
+var external_react_ = __webpack_require__(2015);
+var external_react_default = /*#__PURE__*/__webpack_require__.n(external_react_);
+// EXTERNAL MODULE: external "styled-components"
+var external_styled_components_ = __webpack_require__(2770);
+var external_styled_components_default = /*#__PURE__*/__webpack_require__.n(external_styled_components_);
+// EXTERNAL MODULE: external "styled-system"
+var external_styled_system_ = __webpack_require__(9351);
+// EXTERNAL MODULE: ./src/styles/helpers.ts + 1 modules
+var helpers = __webpack_require__(4336);
+// EXTERNAL MODULE: ./src/styles/styled/fontFamily.ts
+var fontFamily = __webpack_require__(3364);
+// EXTERNAL MODULE: ./src/styles/theme.ts
+var theme = __webpack_require__(5548);
+// EXTERNAL MODULE: ./src/components/styled.ts
+var styled = __webpack_require__(7680);
+;// CONCATENATED MODULE: ./src/components/cta/Button/index.tsx
+
+
+
+
+
+
+
+
+const IconContainer = (external_styled_components_default()).div`
+  display: inline-block;
+  ${(p)=>`${p.iconPosition === "left" ? "margin-right" : "margin-left"}: ${p.theme.space[4]}px;`}
+  padding-top: 0.2em;
+`;
+const getVariantColors = (p)=>({
+        main: {
+            outline: `
+        border-color: ${p.theme.colors.neutral.c100};
+        color: ${p.theme.colors.neutral.c100};
+        background-color: transparent;
+        &:hover, &:focus {
+          background-color: ${(0,helpers.rgba)(p.theme.colors.neutral.c100, 0.03)};
+        }
+        &:active {
+          background-color: ${(0,helpers.rgba)(p.theme.colors.neutral.c100, 0.05)};
+        }
+      `,
+            filled: `
+        color: ${p.theme.colors.neutral.c00};
+        background-color: ${p.theme.colors.neutral.c100};
+        &:hover, &:focus {
+          background-color: ${p.theme.colors.neutral.c90};
+        }
+      `
+        },
+        shade: `
+      border-color: ${p.theme.colors.neutral.c40};
+      color: ${p.theme.colors.neutral.c100};
+      &:focus {
+        border-color: ${p.theme.colors.primary.c80};
+      }
+
+      &:hover, &:focus {
+        background-color: ${p.theme.colors.neutral.c20};
+      }
+
+      &:active {
+        background-color: ${p.theme.colors.neutral.c30};
+      }
+    `,
+        error: {
+            outline: `
+      border-color: ${p.theme.colors.error.c50};
+      color: ${p.theme.colors.error.c50};
+      background-color: transparent;
+      &:hover {
+        background-color: ${(0,helpers.rgba)(p.theme.colors.error.c50, 0.02)};
+      }
+      &:active {
+        background-color: ${(0,helpers.rgba)(p.theme.colors.error.c50, 0.05)};
+      }
+    `,
+            filled: `
+      color: ${p.theme.colors.neutral.c00};
+      background-color: ${p.theme.colors.error.c50};
+      &:hover {
+        background-color: ${p.theme.colors.error.c40};
+      }
+    `
+        },
+        neutral: `
+    color: ${p.theme.colors.neutral.c100};
+    background-color: ${p.theme.colors.neutral.c30};
+    &:hover {
+      background-color: ${p.theme.colors.neutral.c40};
+    }
+  `,
+        color: {
+            outline: `
+      border-color: ${p.theme.colors.primary.c80};
+      color: ${p.theme.colors.primary.c80};
+      background-color: transparent;
+      &:hover {
+        background-color: ${(0,helpers.rgba)(p.theme.colors.primary.c100, 0.02)};
+      }
+      &:active {
+        background-color: ${(0,helpers.rgba)(p.theme.colors.primary.c100, 0.05)};
       }
+    `,
+            filled: `
+      color: ${p.theme.colors.neutral.c00};
+      background-color: ${p.theme.colors.primary.c80};
+      &:hover {
+        background-color: ${p.theme.colors.primary.c70};
+      }
+    `
+        },
+        disabled: {
+            outline: `
+        border-color: ${p.theme.colors.neutral.c50};
+        color: ${p.theme.colors.neutral.c50};
+        background-color: transparent;
+        &:focus, &:hover {
+          box-shadow: none;
+        }
+      `,
+            filled: `
+        color: ${p.theme.colors.neutral.c50};
+        background-color: ${p.theme.colors.neutral.c30};
+        &:focus, &:hover {
+          box-shadow: none;
+        }
+      `
+        },
+        default: `
+    color: ${p.theme.colors.neutral.c100};
+    background-color: transparent;
+    &:hover {
+      text-decoration: underline;
     }
-  },
-  decorators: [
-    (Story, { args, parameters }) => /* @__PURE__ */ import_react.default.createElement(
-      SlideContext.Provider,
-      {
-        value: Array.from({ length: args.children }, (_, index) => /* @__PURE__ */ import_react.default.createElement(parameters.Slide, { key: index, index }))
-      },
-      /* @__PURE__ */ import_react.default.createElement(Story, null)
-    )
-  ],
-  render: ({ children, ...props }) => /* @__PURE__ */ import_react.default.createElement(import__.default, { ...props }, (0, import_react.useContext)(SlideContext))
+  `
+    });
+const ButtonUnstyled = styled["default"].button`
+  all: unset;
+  cursor: pointer;
+
+  &:disabled {
+    cursor: default;
+  }
+`;
+const Base = styled["default"].button.attrs((p)=>({
+        fontFamily: "Inter",
+        fontSize: p.fontSize ?? 4
+    }))`
+  background-color: transparent;
+  border-color: transparent;
+  border-radius: 44px;
+  border-style: solid;
+  border-width: ${(p)=>p.outline || p.variant === "shade" ? 1 : 0}px;
+  font-weight: 600;
+  ${(0,external_styled_system_.compose)(fontFamily["default"], external_styled_system_.fontSize, external_styled_system_.border)};
+  line-height: ${(p)=>p.theme.fontSizes[p.fontSize]}px;
+  text-align: center;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  ${(p)=>buttonSizeStyle[p.size || "medium"]}
+  text-overflow: ellipsis;
+  white-space: ${(p)=>p.whiteSpace ? p.whiteSpace : "nowrap"};
+  max-width: 100%;
+  position: relative;
+  cursor: ${(p)=>p.disabled ? "default" : "pointer"};
+  &:active {
+    box-shadow: 0 0 0 4px ${(p)=>(0,helpers.rgba)(p.theme.colors.primary.c60, 0.4)};
+  }
+  &:focus, &:hover {
+    box-shadow: 0 0 0 2px ${(p)=>(0,helpers.rgba)(p.theme.colors.primary.c60, 0.4)};
+  }
+
+  ${(p)=>{
+    const variants = getVariantColors(p);
+    if (p.disabled) {
+        return p.outline || p.variant === "shade" ? variants.disabled.outline : variants.disabled.filled;
+    }
+    const variant = p.variant ?? "default";
+    switch(variant){
+        case "main":
+            return p.outline ? variants.main.outline : variants.main.filled;
+        case "shade":
+            return variants.shade;
+        case "error":
+            return p.outline ? variants.error.outline : variants.error.filled;
+        case "color":
+            return p.outline ? variants.color.outline : variants.color.filled;
+        case "neutral":
+            return variants.neutral;
+        case "default":
+        default:
+            return variants.default;
+    }
+}}
+  ${(p)=>p.iconButton ? (0,external_styled_components_.css)`
+          width: ${p.theme.space[12]}px;
+          padding: 0;
+          ${IconContainer} {
+            margin: 0;
+          }
+        ` : ""}
+  ${(p)=>p.theme.transition([
+        "background-color",
+        "color",
+        "border-color",
+        "box-shadow"
+    ], "0.2s")}
+`;
+const ContentContainer = (external_styled_components_default()).div``;
+const Button = ({ Icon, iconPosition = "right", iconSize = 16, children, onClick, ...props }, ref)=>{
+    const iconNodeSize = iconSize || theme.fontSizes[props.fontSize ?? 4];
+    const IconNode = (0,external_react_.useMemo)(()=>{
+        if (!Icon) return null;
+        if (typeof Icon === "object") return Icon;
+        return /*#__PURE__*/ external_react_default().createElement(Icon, {
+            size: iconNodeSize
+        });
+    }, [
+        iconNodeSize,
+        Icon
+    ]);
+    return /*#__PURE__*/ external_react_default().createElement(Base, {
+        ...props,
+        ref: ref,
+        iconButton: !(Icon == null) && !children,
+        onClick: onClick
+    }, iconPosition === "right" ? /*#__PURE__*/ external_react_default().createElement(ContentContainer, null, children) : null, IconNode && /*#__PURE__*/ external_react_default().createElement(IconContainer, {
+        iconPosition: iconPosition
+    }, IconNode), iconPosition === "left" ? /*#__PURE__*/ external_react_default().createElement(ContentContainer, null, children) : null);
 };
-const Default = {
-  parameters: {
-    Slide: ({ index }) => /* @__PURE__ */ import_react.default.createElement(
-      "div",
-      {
-        style: {
-          backgroundColor: `hsl(${Math.random() * 360}, 100%, 75%)`,
-          padding: "16px 24px",
-          borderRadius: "5px"
+const ButtonWithRef = /*#__PURE__*/ external_react_default().forwardRef(Button);
+const StyledButtonExpand = external_styled_components_default()(ButtonWithRef).attrs((props)=>({
+        Icon: props.Icon != null || (ChevronBottomMedium_default()),
+        iconPosition: props.iconPosition || "right"
+    }))`
+  ${IconContainer} {
+    transition: transform 0.25s;
+    ${(p)=>p.expanded ? "transform: rotate(180deg)" : ""}
+  }
+`;
+function ButtonExpand({ onToggle, onClick, ...props }, ref) {
+    const [expanded, setExpanded] = (0,external_react_.useState)(false);
+    return /*#__PURE__*/ external_react_default().createElement(StyledButtonExpand, {
+        ...props,
+        ref: ref,
+        expanded: expanded,
+        onClick: (event)=>{
+            setExpanded((expanded)=>!expanded);
+            onToggle != null && onToggle(!expanded);
+            onClick != null && onClick(event);
         }
-      },
-      "Slide ",
-      index
-    )
+    });
+}
+const buttonSizeStyle = {
+    xs: {
+        padding: "0 12px",
+        height: "28px"
+    },
+    small: {
+        padding: "0 20px",
+        height: "32px"
+    },
+    medium: {
+        padding: "0 24px",
+        height: "40px"
+    },
+    large: {
+        padding: "0 28px",
+        height: "48px"
+    },
+    xl: {
+        padding: "0 28px",
+        height: "56px"
+    }
+};
+Button.Unstyled = ButtonUnstyled;
+Button.Expand = /*#__PURE__*/ external_react_default().forwardRef(ButtonExpand);
+ButtonWithRef.Unstyled = Button.Unstyled;
+ButtonWithRef.Expand = Button.Expand;
+/* export default */ const cta_Button = (ButtonWithRef);
+
+
+},
+4974(__unused_rspack_module, __webpack_exports__, __webpack_require__) {
+__webpack_require__.d(__webpack_exports__, {
+  "default": () => (BannerCard)
+});
+/* import */ var react__rspack_import_0 = __webpack_require__(2015);
+/* import */ var react__rspack_import_0_default = /*#__PURE__*/__webpack_require__.n(react__rspack_import_0);
+/* import */ var styled_components__rspack_import_1 = __webpack_require__(2770);
+/* import */ var styled_components__rspack_import_1_default = /*#__PURE__*/__webpack_require__.n(styled_components__rspack_import_1);
+/* import */ var _styles__rspack_import_3 = __webpack_require__(3151);
+/* import */ var _assets__rspack_import_7 = __webpack_require__(7304);
+/* import */ var _assets__rspack_import_7_default = /*#__PURE__*/__webpack_require__.n(_assets__rspack_import_7);
+/* import */ var _asorted_Text__rspack_import_5 = __webpack_require__(348);
+/* import */ var _cta__rspack_import_6 = __webpack_require__(1133);
+/* import */ var _Tag__rspack_import_4 = __webpack_require__(4572);
+/* import */ var ___rspack_import_2 = __webpack_require__(3696);
+
+
+
+
+
+
+
+
+function BannerCard({ title, cta, description, descriptionWidth, tag, image, onClick, onClose, ...boxProps }) {
+    const handleClose = (event)=>{
+        event.stopPropagation();
+        onClose?.(event);
+    };
+    const handleClick = (event)=>{
+        event.stopPropagation();
+        onClick(event);
+    };
+    return /*#__PURE__*/ react__rspack_import_0_default().createElement(Wrapper, {
+        ...boxProps,
+        image: image,
+        tag: tag,
+        onClick: handleClick
+    }, tag && /*#__PURE__*/ react__rspack_import_0_default().createElement(StyledTag, null, tag), /*#__PURE__*/ react__rspack_import_0_default().createElement(Title, null, title), description && /*#__PURE__*/ react__rspack_import_0_default().createElement(Desc, {
+        maxWidth: descriptionWidth
+    }, description), /*#__PURE__*/ react__rspack_import_0_default().createElement(___rspack_import_2["default"], {
+        columnGap: 5
+    }, cta), onClose && /*#__PURE__*/ react__rspack_import_0_default().createElement(_styles__rspack_import_3.StyleProvider, {
+        selectedPalette: "dark"
+    }, /*#__PURE__*/ react__rspack_import_0_default().createElement(CloseButton, {
+        "data-testid": "portfolio-card-close-button",
+        onClick: handleClose
+    })));
+}
+const StyledTag = styled_components__rspack_import_1_default()((0,_Tag__rspack_import_4["default"])).attrs({
+    size: "medium",
+    type: "plain",
+    active: true
+})`
+  font-size: 11px;
+  background-color: ${(p)=>p.theme.colors.primary.c80};
+`;
+const Title = styled_components__rspack_import_1_default()((0,_asorted_Text__rspack_import_5["default"])).attrs({
+    variant: "h4Inter"
+})`
+  font-family: Inter;
+  font-size: 24px;
+  font-weight: 600;
+`;
+const Desc = styled_components__rspack_import_1_default()((0,_asorted_Text__rspack_import_5["default"])).attrs({
+    variant: "small",
+    color: "neutral.c70"
+})`
+  font-family: Inter;
+  font-size: 13px;
+  font-style: normal;
+  font-weight: 500;
+  padding-bottom: 8px;
+`;
+const Wrapper = styled_components__rspack_import_1_default()((0,___rspack_import_2["default"]))`
+  background-color: ${(p)=>p.theme.colors.background.card};
+  background-image: ${(p)=>p.image ? `url("${p.image}")` : "none"};
+  background-position: right center;
+  background-repeat: no-repeat;
+  background-size: 50% auto;
+
+  cursor: pointer;
+  padding: 16px;
+  padding-top: ${(p)=>p.tag ? "16px" : "24px"};
+  padding-right: 50%;
+
+  position: relative;
+  flex-direction: column;
+  justify-content: flex-end;
+  align-items: flex-start;
+  gap: 4px;
+`;
+const CloseButton = styled_components__rspack_import_1_default()((0,_cta__rspack_import_6["default"])).attrs({
+    Icon: /*#__PURE__*/ react__rspack_import_0_default().createElement(_assets__rspack_import_7.Close, {
+        size: "XS"
+    }),
+    iconButton: true,
+    outline: true
+})`
+  background-color: ${(p)=>p.theme.colors.neutral.c30};
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  width: 24px;
+  height: 24px;
+  svg {
+    width: 12px;
+    height: 12px;
   }
+`;
+
+
+},
+8459(__unused_rspack_module, __webpack_exports__, __webpack_require__) {
+__webpack_require__.d(__webpack_exports__, {
+  ChevronArrow: () => (ChevronArrow)
+});
+/* import */ var react__rspack_import_0 = __webpack_require__(2015);
+/* import */ var react__rspack_import_0_default = /*#__PURE__*/__webpack_require__.n(react__rspack_import_0);
+/* import */ var styled_components__rspack_import_1 = __webpack_require__(2770);
+/* import */ var styled_components__rspack_import_1_default = /*#__PURE__*/__webpack_require__.n(styled_components__rspack_import_1);
+/* import */ var _assets__rspack_import_2 = __webpack_require__(7304);
+/* import */ var _assets__rspack_import_2_default = /*#__PURE__*/__webpack_require__.n(_assets__rspack_import_2);
+
+
+
+function ChevronArrow(props) {
+    return /*#__PURE__*/ react__rspack_import_0_default().createElement(ChevronArrowContainer, props, /*#__PURE__*/ react__rspack_import_0_default().createElement(_assets__rspack_import_2.ChevronLeft, null));
+}
+const ChevronArrowContainer = (styled_components__rspack_import_1_default().button)`
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  width: 32px;
+  height: 32px;
+
+  position: absolute;
+  top: 50%;
+  left: ${({ direction })=>direction === "left" ? "0" : "auto"};
+  right: ${({ direction })=>direction === "left" ? "auto" : "0"};
+  z-index: 1;
+
+  --dir: ${({ direction })=>direction === "left" ? "1" : "-1"};
+  scale: var(--dir) 1;
+  translate: calc(-50% * var(--dir)) -50%;
+
+  background-color: ${({ theme })=>theme.colors.background.default}; // Fake the transparent clip
+  border-radius: 100%;
+  border: none;
+  outline: none;
+
+  ::before {
+    content: "";
+    display: block;
+    position: absolute;
+    z-index: -1;
+    inset: 3px;
+    background-color: ${({ theme })=>theme.colors.opacityDefault.c05};
+    border-color: ${({ theme })=>theme.colors.opacityDefault.c05};
+    border-radius: 100%;
+    border-style: solid;
+    border-width: 1px;
+  }
+  svg {
+    color: ${({ theme })=>theme.colors.primary.c100};
+  }
+  ::before,
+  svg {
+    cursor: pointer;
+  }
+
+  transition: opacity 0.2s ease-in-out;
+  opacity: var(--hover-transition);
+  ::before,
+  svg {
+    transition: translate 0.2s ease-in-out;
+    translate: calc(-50% + 50% * var(--hover-transition)) 0;
+  }
+`;
+
+
+},
+3831(__unused_rspack_module, __webpack_exports__, __webpack_require__) {
+
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, {
+  "default": () => (/* binding */ bullets)
+});
+
+// EXTERNAL MODULE: external "react"
+var external_react_ = __webpack_require__(2015);
+var external_react_default = /*#__PURE__*/__webpack_require__.n(external_react_);
+;// CONCATENATED MODULE: external "react-spring"
+const external_react_spring_namespaceObject = require("react-spring");
+// EXTERNAL MODULE: external "styled-components"
+var external_styled_components_ = __webpack_require__(2770);
+// EXTERNAL MODULE: ./src/components/layout/Carousel/Footer/Pagination/types.ts
+var types = __webpack_require__(6287);
+;// CONCATENATED MODULE: ./src/components/layout/Carousel/Footer/Pagination/bullets.tsx
+
+
+
+
+const defaultBulletStyle = {
+    height: "6px",
+    borderRadius: "1000px",
+    marginRight: "4px",
+    opacity: 1
 };
-const PortfolioContentCards = {
-  parameters: {
-    Slide: ({ index }) => /* @__PURE__ */ import_react.default.createElement(
-      import_PortfolioContentCard.default,
-      {
-        title: "Ledger Recover",
-        description: "Get peace of mind and start your free trial.",
-        cta: index % 2 ? void 0 : "Start my free trial",
-        tag: index % 3 ? void 0 : "New",
-        image: (index + 1) % 4 ? IMAGE_SRC : void 0,
-        onClick: () => onSlideAction(`click on slide ${index}`),
-        onClose: () => onSlideAction(`close slide ${index}`)
-      }
-    )
+const useBulletStyles = ()=>{
+    const { colors } = (0,external_styled_components_.useTheme)();
+    const BulletStyle = {
+        [types.ItemStatus.active]: {
+            ...defaultBulletStyle,
+            width: "16px",
+            backgroundColor: colors.opacityDefault.c80
+        },
+        [types.ItemStatus.nearby]: {
+            ...defaultBulletStyle,
+            width: "8px",
+            backgroundColor: colors.opacityDefault.c30
+        },
+        [types.ItemStatus.far]: {
+            ...defaultBulletStyle,
+            width: "4px",
+            backgroundColor: colors.opacityDefault.c10
+        },
+        [types.ItemStatus.none]: {
+            ...defaultBulletStyle,
+            width: "0px",
+            opacity: 0,
+            backgroundColor: colors.opacityDefault.c10,
+            marginRight: "0px"
+        }
+    };
+    return BulletStyle;
+};
+const Bullet = ({ type })=>{
+    return /*#__PURE__*/ external_react_default().createElement(external_react_spring_namespaceObject.animated.div, {
+        style: (0,external_react_spring_namespaceObject.useSpring)(useBulletStyles()[type])
+    });
+};
+/* export default */ const bullets = (Bullet);
+
+
+},
+2378(__unused_rspack_module, __webpack_exports__, __webpack_require__) {
+__webpack_require__.d(__webpack_exports__, {
+  "default": () => (__rspack_default_export)
+});
+/* import */ var react__rspack_import_0 = __webpack_require__(2015);
+/* import */ var react__rspack_import_0_default = /*#__PURE__*/__webpack_require__.n(react__rspack_import_0);
+/* import */ var styled_components__rspack_import_1 = __webpack_require__(2770);
+/* import */ var styled_components__rspack_import_1_default = /*#__PURE__*/__webpack_require__.n(styled_components__rspack_import_1);
+/* import */ var _bullets__rspack_import_2 = __webpack_require__(3831);
+/* import */ var _utils__rspack_import_3 = __webpack_require__(8139);
+
+
+
+
+const FooterCarouselBullets = (styled_components__rspack_import_1_default().div)`
+  display: flex;
+  align-items: center;
+`;
+const Pagination = ({ children, currentIndex })=>{
+    return /*#__PURE__*/ react__rspack_import_0_default().createElement(FooterCarouselBullets, null, children.map((child, index)=>/*#__PURE__*/ react__rspack_import_0_default().createElement(_bullets__rspack_import_2["default"], {
+            key: child.key,
+            type: (0,_utils__rspack_import_3.getItemStatus)(index, currentIndex, children.length)
+        })));
+};
+/* export default */ const __rspack_default_export = (Pagination);
+
+
+},
+6287(__unused_rspack_module, __webpack_exports__, __webpack_require__) {
+__webpack_require__.d(__webpack_exports__, {
+  ItemStatus: () => (ItemStatus)
+});
+var ItemStatus = /*#__PURE__*/ function(ItemStatus) {
+    ItemStatus[ItemStatus["active"] = 0] = "active";
+    ItemStatus[ItemStatus["nearby"] = 1] = "nearby";
+    ItemStatus[ItemStatus["far"] = 2] = "far";
+    ItemStatus[ItemStatus["none"] = 3] = "none";
+    return ItemStatus;
+}({});
+
+
+},
+8139(__unused_rspack_module, __webpack_exports__, __webpack_require__) {
+__webpack_require__.d(__webpack_exports__, {
+  getItemStatus: () => (getItemStatus)
+});
+/* import */ var _types__rspack_import_0 = __webpack_require__(6287);
+
+/**
+ * Returns the status of an indexed item from the carousel index.
+ */ const getItemStatus = (itemIndex, activeIndex, itemCount)=>{
+    const isActive = itemIndex === activeIndex;
+    if (isActive) {
+        return _types__rspack_import_0.ItemStatus.active;
+    }
+    const isAdjacent = Math.abs(itemIndex - activeIndex) === 1;
+    if (isAdjacent) {
+        return _types__rspack_import_0.ItemStatus.nearby;
+    }
+    const isEdge = itemIndex === 0 || itemIndex === itemCount - 1;
+    return isEdge ? _types__rspack_import_0.ItemStatus.far : _types__rspack_import_0.ItemStatus.nearby;
+};
+
+
+},
+8371(__unused_rspack_module, __webpack_exports__, __webpack_require__) {
+__webpack_require__.d(__webpack_exports__, {
+  "default": () => (__rspack_default_export)
+});
+/* import */ var react__rspack_import_0 = __webpack_require__(2015);
+/* import */ var react__rspack_import_0_default = /*#__PURE__*/__webpack_require__.n(react__rspack_import_0);
+/* import */ var _variantContentCard__rspack_import_1 = __webpack_require__(4123);
+/* import */ var _variantDefault__rspack_import_2 = __webpack_require__(373);
+
+
+
+const Footers = {
+    "content-card": _variantContentCard__rspack_import_1["default"],
+    default: _variantDefault__rspack_import_2["default"]
+};
+const Footer = (props)=>{
+    if (props.children.length === 1) return null;
+    const Component = Footers[props.variant];
+    return /*#__PURE__*/ react__rspack_import_0_default().createElement(Component, props);
+};
+/* export default */ const __rspack_default_export = (Footer);
+
+
+},
+4123(__unused_rspack_module, __webpack_exports__, __webpack_require__) {
+__webpack_require__.d(__webpack_exports__, {
+  "default": () => (__rspack_default_export)
+});
+/* import */ var _ledgerhq_icons_ui_react__rspack_import_0 = __webpack_require__(7304);
+/* import */ var _ledgerhq_icons_ui_react__rspack_import_0_default = /*#__PURE__*/__webpack_require__.n(_ledgerhq_icons_ui_react__rspack_import_0);
+/* import */ var react__rspack_import_1 = __webpack_require__(2015);
+/* import */ var react__rspack_import_1_default = /*#__PURE__*/__webpack_require__.n(react__rspack_import_1);
+/* import */ var styled_components__rspack_import_2 = __webpack_require__(2770);
+/* import */ var styled_components__rspack_import_2_default = /*#__PURE__*/__webpack_require__.n(styled_components__rspack_import_2);
+/* import */ var _Pagination__rspack_import_3 = __webpack_require__(2378);
+
+
+
+
+const FooterContainer = (styled_components__rspack_import_2_default().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_components__rspack_import_2_default().div)`
+  display: flex;
+  gap: 8px;
+  align-items: center;
+`;
+const FooterArrowContainer = (styled_components__rspack_import_2_default().div)`
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+`;
+const FooterContentCard = ({ children, emblaApi, currentIndex, variant })=>{
+    return /*#__PURE__*/ react__rspack_import_1_default().createElement(FooterContainer, null, /*#__PURE__*/ react__rspack_import_1_default().createElement(_Pagination__rspack_import_3["default"], {
+        variant: variant,
+        children: children,
+        emblaApi: emblaApi,
+        currentIndex: currentIndex
+    }), /*#__PURE__*/ react__rspack_import_1_default().createElement(FooterArrowsContainer, null, /*#__PURE__*/ react__rspack_import_1_default().createElement(FooterArrowContainer, {
+        onClick: ()=>emblaApi?.scrollPrev()
+    }, /*#__PURE__*/ react__rspack_import_1_default().createElement(_ledgerhq_icons_ui_react__rspack_import_0.ArrowLeft, {
+        size: "S"
+    })), /*#__PURE__*/ react__rspack_import_1_default().createElement(FooterArrowContainer, {
+        onClick: ()=>emblaApi?.scrollNext()
+    }, /*#__PURE__*/ react__rspack_import_1_default().createElement(_ledgerhq_icons_ui_react__rspack_import_0.ArrowRight, {
+        size: "S"
+    }))));
+};
+/* export default */ const __rspack_default_export = (FooterContentCard);
+
+
+},
+373(__unused_rspack_module, __webpack_exports__, __webpack_require__) {
+__webpack_require__.d(__webpack_exports__, {
+  "default": () => (__rspack_default_export)
+});
+/* import */ var react__rspack_import_0 = __webpack_require__(2015);
+/* import */ var react__rspack_import_0_default = /*#__PURE__*/__webpack_require__.n(react__rspack_import_0);
+/* import */ var styled_components__rspack_import_1 = __webpack_require__(2770);
+/* import */ var styled_components__rspack_import_1_default = /*#__PURE__*/__webpack_require__.n(styled_components__rspack_import_1);
+/* import */ var _Pagination__rspack_import_2 = __webpack_require__(2378);
+
+
+
+const FooterContainer = (styled_components__rspack_import_1_default().div)`
+  height: 32px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+const FooterDefault = (props)=>{
+    return /*#__PURE__*/ react__rspack_import_0_default().createElement(FooterContainer, null, /*#__PURE__*/ react__rspack_import_0_default().createElement(_Pagination__rspack_import_2["default"], props));
+};
+/* export default */ const __rspack_default_export = (FooterDefault);
+
+
+},
+8654(__unused_rspack_module, __webpack_exports__, __webpack_require__) {
+
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, {
+  "default": () => (/* binding */ layout_Carousel)
+});
+
+;// CONCATENATED MODULE: external "embla-carousel-autoplay"
+const external_embla_carousel_autoplay_namespaceObject = require("embla-carousel-autoplay");
+var external_embla_carousel_autoplay_default = /*#__PURE__*/__webpack_require__.n(external_embla_carousel_autoplay_namespaceObject);
+;// CONCATENATED MODULE: external "embla-carousel-react"
+const external_embla_carousel_react_namespaceObject = require("embla-carousel-react");
+var external_embla_carousel_react_default = /*#__PURE__*/__webpack_require__.n(external_embla_carousel_react_namespaceObject);
+;// CONCATENATED MODULE: external "lodash/debounce"
+const debounce_namespaceObject = require("lodash/debounce");
+var debounce_default = /*#__PURE__*/__webpack_require__.n(debounce_namespaceObject);
+// EXTERNAL MODULE: external "react"
+var external_react_ = __webpack_require__(2015);
+var external_react_default = /*#__PURE__*/__webpack_require__.n(external_react_);
+// EXTERNAL MODULE: external "styled-components"
+var external_styled_components_ = __webpack_require__(2770);
+var external_styled_components_default = /*#__PURE__*/__webpack_require__.n(external_styled_components_);
+// EXTERNAL MODULE: ./src/components/layout/Carousel/Footer/index.tsx
+var Footer = __webpack_require__(8371);
+// EXTERNAL MODULE: ./src/components/layout/Carousel/ChevronArrow.tsx
+var ChevronArrow = __webpack_require__(8459);
+;// CONCATENATED MODULE: ./src/components/layout/Carousel/index.tsx
+
+
+
+
+
+
+
+const Embla = (external_styled_components_default()).div`
+  overflow: hidden;
+`;
+const EmblaContainer = (external_styled_components_default()).div`
+  display: flex;
+`;
+const EmblaSlide = (external_styled_components_default()).div`
+  display: flex;
+  flex: 0 0 100%;
+  min-width: 0;
+  > * {
+    flex-basis: 100%;
+  }
+`;
+const CarouselContainer = (external_styled_components_default()).div`
+  position: relative;
+
+  --hover-transition: 0;
+  &:hover {
+    --hover-transition: 1;
+  }
+`;
+/**
+ * This component uses the https://github.com/davidjerleke/embla-carousel library.
+ */ const Carousel = ({ children, variant = "default", initialDelay = 0, autoPlay = 0, onNext, onPrev })=>{
+    const [currentIndex, setCurrentIndex] = (0,external_react_.useState)(0);
+    const [autoplayEnabled, setAutoplayEnabled] = (0,external_react_.useState)(false);
+    const plugins = (0,external_react_.useMemo)(()=>autoplayEnabled && autoPlay ? [
+            external_embla_carousel_autoplay_default()({
+                delay: autoPlay,
+                ...AutoplayFlags
+            })
+        ] : [], [
+        autoplayEnabled,
+        autoPlay
+    ]);
+    const [emblaRef, emblaApi] = external_embla_carousel_react_default()({
+        loop: true
+    }, plugins);
+    (0,external_react_.useEffect)(()=>{
+        if (autoPlay) {
+            const timer = setTimeout(()=>setAutoplayEnabled(true), initialDelay);
+            return ()=>clearTimeout(timer);
+        }
+    }, [
+        autoPlay
+    ]);
+    const updateIndex = (0,external_react_.useCallback)(()=>{
+        if (!emblaApi) return;
+        const newIndex = emblaApi.selectedScrollSnap();
+        setCurrentIndex(newIndex);
+        emblaApi.scrollTo(newIndex);
+    }, [
+        emblaApi
+    ]);
+    (0,external_react_.useEffect)(()=>{
+        if (!emblaApi) return;
+        // Initial call to update carousel index
+        updateIndex();
+        const dragX = watchDragX(emblaApi);
+        // When the selected scroll snap changes
+        const handleAnySelect = debounce_default()((mightBeASwipe)=>{
+            updateIndex();
+            if (!mightBeASwipe || variant !== "default") return; // onNext/onPrev events are not supported for content-card variant ATM
+            if (dragX.value > 0) return onPrev?.();
+            if (dragX.value < 0) return onNext?.();
+        }, 0); // all events are fired on the same tick so no need to wait past the next tick
+        emblaApi.on("select", handleSelect);
+        emblaApi.on("autoplay:select", handleAutoPlaySelect);
+        emblaApi.on("button:prev", handlePrevButton);
+        emblaApi.on("button:next", handleNextButton);
+        // When `reInit` is called or when window is resized
+        emblaApi.on("reInit", updateIndex);
+        return ()=>{
+            dragX.clean();
+            emblaApi.off("select", handleSelect);
+            emblaApi.off("autoplay:select", handleAutoPlaySelect);
+            emblaApi.off("button:prev", handlePrevButton);
+            emblaApi.off("button:next", handleNextButton);
+            emblaApi.off("reInit", updateIndex);
+        };
+        function handleSelect() {
+            handleAnySelect(true); // This could be a swipe action. As this runs first the debounce will override the value otherwise
+        }
+        function handleAutoPlaySelect() {
+            handleAnySelect(false);
+        }
+        function handlePrevButton() {
+            emblaApi?.scrollPrev();
+            onPrev?.();
+            handleAnySelect(false);
+        }
+        function handleNextButton() {
+            emblaApi?.scrollNext();
+            onNext?.();
+            handleAnySelect(false);
+        }
+    }, [
+        emblaApi,
+        updateIndex,
+        variant
+    ]);
+    if (!children.length) return null;
+    const handleGotoPrevSlide = ()=>emblaApi?.emit("button:prev");
+    const handleGotoNextSlide = ()=>emblaApi?.emit("button:next");
+    return /*#__PURE__*/ external_react_default().createElement("div", null, /*#__PURE__*/ external_react_default().createElement(CarouselContainer, {
+        variant: variant
+    }, variant === "default" && children.length > 1 && /*#__PURE__*/ external_react_default().createElement((external_react_default()).Fragment, null, /*#__PURE__*/ external_react_default().createElement(ChevronArrow.ChevronArrow, {
+        "data-testid": "carousel-arrow-prev",
+        direction: "left",
+        onClick: handleGotoPrevSlide
+    }), /*#__PURE__*/ external_react_default().createElement(ChevronArrow.ChevronArrow, {
+        "data-testid": "carousel-arrow-next",
+        direction: "right",
+        onClick: handleGotoNextSlide
+    })), /*#__PURE__*/ external_react_default().createElement(Embla, {
+        ref: emblaRef
+    }, /*#__PURE__*/ external_react_default().createElement(EmblaContainer, null, children.map((child)=>/*#__PURE__*/ external_react_default().createElement(EmblaSlide, {
+            key: child.key
+        }, child))))), /*#__PURE__*/ external_react_default().createElement(Footer["default"], {
+        children: children,
+        variant: variant,
+        emblaApi: emblaApi,
+        currentIndex: currentIndex
+    }));
+};
+/* export default */ const layout_Carousel = (Carousel);
+const AutoplayFlags = {
+    play: true,
+    stopOnMouseEnter: true,
+    stopOnInteraction: false
+};
+function watchDragX(emblaApi) {
+    emblaApi.on("pointerDown", watchMouse);
+    let start;
+    let end;
+    return {
+        get value () {
+            return typeof start === "undefined" || typeof end === "undefined" ? 0 : end - start;
+        },
+        clean: ()=>{
+            emblaApi.off("pointerDown", watchMouse);
+            document.removeEventListener("mouseup", handleMouseUp);
+        }
+    };
+    function watchMouse() {
+        document.addEventListener("mousemove", handleMouseMove);
+        document.addEventListener("mouseup", handleMouseUp);
+    }
+    function handleMouseMove(event) {
+        document.removeEventListener("mousemove", handleMouseMove);
+        start = event.clientX;
+        end = undefined;
+    }
+    function handleMouseUp(event) {
+        document.removeEventListener("mouseup", handleMouseUp);
+        end = event.clientX;
+    }
+}
+
+
+},
+6160(__unused_rspack_module, __webpack_exports__, __webpack_require__) {
+__webpack_require__.d(__webpack_exports__, {
+  "default": () => (PortfolioContentCard)
+});
+/* import */ var react__rspack_import_0 = __webpack_require__(2015);
+/* import */ var react__rspack_import_0_default = /*#__PURE__*/__webpack_require__.n(react__rspack_import_0);
+/* import */ var _cta__rspack_import_2 = __webpack_require__(1133);
+/* import */ var _Banner_BannerCard__rspack_import_1 = __webpack_require__(4974);
+
+
+
+function PortfolioContentCard({ title, cta, description, tag, image, onClick, onClose }) {
+    return /*#__PURE__*/ react__rspack_import_0_default().createElement(_Banner_BannerCard__rspack_import_1["default"], {
+        title: title,
+        cta: cta && /*#__PURE__*/ react__rspack_import_0_default().createElement(_cta__rspack_import_2["default"], {
+            variant: "main",
+            outline: false
+        }, cta),
+        description: description,
+        tag: tag,
+        image: image,
+        onClick: onClick,
+        onClose: onClose
+    });
+}
+
+
+},
+3696(__unused_rspack_module, __webpack_exports__, __webpack_require__) {
+__webpack_require__.d(__webpack_exports__, {
+  "default": () => (__rspack_default_export)
+});
+/* import */ var _styled__rspack_import_0 = __webpack_require__(7680);
+
+const FlexBox = _styled__rspack_import_0["default"].div.attrs({
+    display: "flex"
+})``;
+/* export default */ const __rspack_default_export = (FlexBox);
+
+
+},
+6445(__unused_rspack_module, __webpack_exports__, __webpack_require__) {
+__webpack_require__.d(__webpack_exports__, {
+  "default": () => (__rspack_default_export)
+});
+/* import */ var styled_components__rspack_import_0 = __webpack_require__(2770);
+/* import */ var styled_components__rspack_import_0_default = /*#__PURE__*/__webpack_require__.n(styled_components__rspack_import_0);
+
+/* export default */ const __rspack_default_export = ((0,styled_components__rspack_import_0.css)`
+  .tippy-box[data-animation="fade"][data-state="hidden"] {
+    opacity: 0;
+  }
+
+  [data-tippy-root] {
+    max-width: calc(100vw - 10px);
+  }
+
+  .tippy-box {
+    position: relative;
+    background-color: ${(p)=>p.theme.colors.neutral.c100};
+    color: ${(p)=>p.theme.colors.neutral.c00};
+    border-radius: 4px;
+    font-size: 14px;
+    line-height: 1.4;
+    outline: 0;
+    transition-property: transform, visibility, opacity;
+  }
+
+  .tippy-arrow {
+    width: 16px;
+    height: 16px;
+    color: ${(p)=>p.theme.colors.neutral.c100};
+  }
+
+  .tippy-arrow:before {
+    content: "";
+    position: absolute;
+    border-color: transparent;
+    border-style: solid;
+  }
+
+  .tippy-box[data-placement^="top"] > .tippy-arrow {
+    bottom: 0;
+  }
+
+  .tippy-box[data-placement^="top"] > .tippy-arrow:before {
+    bottom: -4px;
+    left: 0;
+    border-width: 10px 10px 0;
+    border-top-color: initial;
+    transform-origin: center top;
+  }
+
+  .tippy-box[data-placement^="bottom"] > .tippy-arrow {
+    top: 0;
+  }
+
+  .tippy-box[data-placement^="bottom"] > .tippy-arrow:before {
+    top: -4px;
+    left: 0;
+    border-width: 0 10px 10px;
+    border-bottom-color: initial;
+    transform-origin: center bottom;
+  }
+
+  .tippy-box[data-placement^="left"] > .tippy-arrow {
+    right: 0;
+  }
+
+  .tippy-box[data-placement^="left"] > .tippy-arrow:before {
+    border-width: 10px 0 10px 10px;
+    border-left-color: initial;
+    right: -4px;
+    transform-origin: center left;
+  }
+
+  .tippy-box[data-placement^="right"] > .tippy-arrow {
+    left: 0;
+  }
+
+  .tippy-box[data-placement^="right"] > .tippy-arrow:before {
+    left: -4px;
+    border-width: 10px 10px 10px 0;
+    border-right-color: initial;
+    transform-origin: center right;
+  }
+
+  .tippy-box[data-inertia][data-state="visible"] {
+    transition-timing-function: cubic-bezier(0.54, 1.5, 0.38, 1.11);
   }
+
+  .tippy-content {
+    position: relative;
+    padding: 8px 10px;
+    z-index: 1;
+  }
+`);
+
+
+},
+7680(__unused_rspack_module, __webpack_exports__, __webpack_require__) {
+__webpack_require__.d(__webpack_exports__, {
+  "default": () => (__rspack_default_export)
+});
+/* import */ var _styles_system_gaps__rspack_import_2 = __webpack_require__(4182);
+/* import */ var styled_components__rspack_import_0 = __webpack_require__(2770);
+/* import */ var styled_components__rspack_import_0_default = /*#__PURE__*/__webpack_require__.n(styled_components__rspack_import_0);
+/* import */ var styled_system__rspack_import_1 = __webpack_require__(9351);
+/* import */ var styled_system__rspack_import_1_default = /*#__PURE__*/__webpack_require__.n(styled_system__rspack_import_1);
+
+
+
+const baseStyles = (0,styled_system__rspack_import_1.compose)(styled_system__rspack_import_1.flexbox, styled_system__rspack_import_1.space, styled_system__rspack_import_1.position, styled_system__rspack_import_1.color, styled_system__rspack_import_1.layout, styled_system__rspack_import_1.overflow, _styles_system_gaps__rspack_import_2["default"], styled_system__rspack_import_1.border);
+const proxyStyled = new Proxy((styled_components__rspack_import_0_default()), {
+    apply (target, thisArg, argumentsList) {
+        return styled_components__rspack_import_0_default()(target.apply(thisArg, argumentsList)(baseStyles));
+    },
+    get (target, property) {
+        if (typeof target[property] === "function") {
+            return styled_components__rspack_import_0_default()(target[property].apply((styled_components__rspack_import_0_default()), [
+                baseStyles
+            ]));
+        }
+        return target[property];
+    }
+});
+/* export default */ const __rspack_default_export = (proxyStyled);
+
+
+},
+3151(__unused_rspack_module, __webpack_exports__, __webpack_require__) {
+__webpack_require__.d(__webpack_exports__, {
+  StyleProvider: () => (StyleProvider)
+});
+/* import */ var react__rspack_import_0 = __webpack_require__(2015);
+/* import */ var react__rspack_import_0_default = /*#__PURE__*/__webpack_require__.n(react__rspack_import_0);
+/* import */ var styled_components__rspack_import_1 = __webpack_require__(2770);
+/* import */ var styled_components__rspack_import_1_default = /*#__PURE__*/__webpack_require__.n(styled_components__rspack_import_1);
+/* import */ var ___rspack_import_3 = __webpack_require__(5548);
+/* import */ var ___rspack_import_4 = __webpack_require__(6734);
+/* import */ var _ledgerhq_ui_shared__rspack_import_2 = __webpack_require__(2993);
+/* import */ var _ledgerhq_ui_shared__rspack_import_2_default = /*#__PURE__*/__webpack_require__.n(_ledgerhq_ui_shared__rspack_import_2);
+
+
+
+
+
+const StyleProvider = ({ children, fontsPath, fontMappings, selectedPalette = "light" })=>{
+    const theme = (0,react__rspack_import_0.useMemo)(()=>({
+            ...___rspack_import_3["default"],
+            colors: {
+                ...___rspack_import_3["default"].colors,
+                ..._ledgerhq_ui_shared__rspack_import_2.palettes[selectedPalette],
+                palette: _ledgerhq_ui_shared__rspack_import_2.palettes[selectedPalette]
+            },
+            theme: selectedPalette
+        }), [
+        selectedPalette
+    ]);
+    return /*#__PURE__*/ react__rspack_import_0_default().createElement(styled_components__rspack_import_1.ThemeProvider, {
+        theme: theme
+    }, /*#__PURE__*/ react__rspack_import_0_default().createElement(___rspack_import_4.GlobalStyle, {
+        fontsPath: fontsPath,
+        fontMappings: fontMappings
+    }), children);
+};
+
+
+},
+6734(__unused_rspack_module, __webpack_exports__, __webpack_require__) {
+__webpack_require__.d(__webpack_exports__, {
+  GlobalStyle: () => (GlobalStyle)
+});
+/* import */ var styled_components__rspack_import_0 = __webpack_require__(2770);
+/* import */ var styled_components__rspack_import_0_default = /*#__PURE__*/__webpack_require__.n(styled_components__rspack_import_0);
+/* import */ var _helpers__rspack_import_1 = __webpack_require__(4336);
+/* import */ var _components_message_Tooltip_styles__rspack_import_3 = __webpack_require__(6445);
+/* import */ var _components_asorted_Text_styles__rspack_import_2 = __webpack_require__(4368);
+
+
+
+
+const GlobalStyle = (0,styled_components__rspack_import_0.createGlobalStyle)`
+  html {
+    box-sizing: border-box;
+  }
+
+  body {
+    font-family: Inter, sans-serif;
+    font-size: 100%;
+  }
+
+  * {
+    margin: 0;
+    padding: 0;
+    font: inherit;
+    color: inherit;
+    user-select: inherit;
+    cursor: inherit;
+  }
+
+  ::selection {
+    background: ${(p)=>(0,_helpers__rspack_import_1.rgba)(p.theme.colors.primary.c100, 0.1)};
+  }
+
+  --track-color: rgba(0,0,0,0);
+
+  ${(props)=>typeof props.fontsPath === "string" ? _components_asorted_Text_styles__rspack_import_2.fontStyles : ""}
+
+  ${_components_message_Tooltip_styles__rspack_import_3["default"]}
+
+  ::-webkit-scrollbar              {
+    width: 12px;
+    height: 12px;
+    background-color: rgba(0,0,0,0);
+  }
+  ::-webkit-scrollbar-button       {
+    opacity: 0;
+    height: 0;
+    width: 0;
+  }
+  ::-webkit-scrollbar-track        {
+    background-color: rgba(0,0,0,0);
+  }
+  ::-webkit-scrollbar-thumb        {
+    box-shadow: inset 0 0 0 12px var(--track-color);
+    border: 2px solid rgba(0,0,0,0);
+    border-radius: 12px;
+  }
+  ::-webkit-scrollbar-corner {
+    opacity: 0;
+  }
+`;
+
+
+},
+4336(__unused_rspack_module, __webpack_exports__, __webpack_require__) {
+
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, {
+  rgba: () => (/* binding */ rgba),
+  ff: () => (/* binding */ ff)
+});
+
+// UNUSED EXPORTS: darken, ensureContrast, mix, lighten
+
+;// CONCATENATED MODULE: external "color"
+const external_color_namespaceObject = require("color");
+var external_color_default = /*#__PURE__*/__webpack_require__.n(external_color_namespaceObject);
+// EXTERNAL MODULE: ./src/styles/theme.ts
+var theme = __webpack_require__(5548);
+;// CONCATENATED MODULE: ./src/styles/helpers.ts
+
+
+const rgba = (c, a)=>external_color_default()(c).alpha(a).rgb().toString();
+const darken = (c, a)=>Color(c).darken(a).toString();
+const lighten = (c, a)=>Color(c).lighten(a).toString();
+const mix = (c, b, a)=>Color(c).mix(Color(b), a).toString();
+const ff = (v)=>{
+    const [font, type = "Regular"] = v.split("|");
+    // @ts-expect-error FIXME
+    const { style, weight } = theme.fontFamilies[font][type];
+    // @ts-expect-error FIXME
+    const fallback = theme.fontFamilies[font].fallback ?? "Arial";
+    return {
+        fontFamily: `${font}, ${fallback}`,
+        fontWeight: weight,
+        fontStyle: style
+    };
+};
+const ensureContrast = (color1, color2)=>{
+    const colorL1 = Color(color1).luminosity() + 0.05;
+    const colorL2 = Color(color2).luminosity() + 0.05;
+    const lRatio = colorL1 > colorL2 ? colorL1 / colorL2 : colorL2 / colorL1;
+    if (lRatio < 1.5) {
+        return Color(color1).rotate(180).negate().string();
+    }
+    return color1;
+};
+
+
+},
+3364(__unused_rspack_module, __webpack_exports__, __webpack_require__) {
+__webpack_require__.d(__webpack_exports__, {
+  "default": () => (__rspack_default_export)
+});
+/* import */ var _helpers__rspack_import_0 = __webpack_require__(4336);
+
+/* export default */ const __rspack_default_export = ((props)=>{
+    const prop = props.ff;
+    if (prop == null) {
+        return null;
+    }
+    return (0,_helpers__rspack_import_0.ff)(prop);
+});
+
+
+},
+4182(__unused_rspack_module, __webpack_exports__, __webpack_require__) {
+__webpack_require__.d(__webpack_exports__, {
+  "default": () => (__rspack_default_export)
+});
+/* import */ var styled_system__rspack_import_0 = __webpack_require__(9351);
+/* import */ var styled_system__rspack_import_0_default = /*#__PURE__*/__webpack_require__.n(styled_system__rspack_import_0);
+
+const gaps = (0,styled_system__rspack_import_0.system)({
+    rowGap: {
+        property: "rowGap",
+        scale: "space"
+    },
+    columnGap: {
+        property: "columnGap",
+        scale: "space"
+    }
+});
+/* export default */ const __rspack_default_export = (gaps);
+
+
+},
+5548(__unused_rspack_module, __webpack_exports__, __webpack_require__) {
+__webpack_require__.d(__webpack_exports__, {
+  "default": () => (__rspack_default_export),
+  fontFamilies: () => (fontFamilies),
+  fontSizes: () => (fontSizes)
+});
+/* import */ var styled_components__rspack_import_0 = __webpack_require__(2770);
+/* import */ var styled_components__rspack_import_0_default = /*#__PURE__*/__webpack_require__.n(styled_components__rspack_import_0);
+/* import */ var _ledgerhq_ui_shared__rspack_import_1 = __webpack_require__(2993);
+/* import */ var _ledgerhq_ui_shared__rspack_import_1_default = /*#__PURE__*/__webpack_require__.n(_ledgerhq_ui_shared__rspack_import_1);
+
+
+const breakpoints = {
+    sm: "640px",
+    md: "768px",
+    lg: "1024px",
+    xl: "1280px",
+    xxl: "1536px"
+};
+const space = [
+    /* space indexes:
+  0, 1, 2, 3, 4,  5,  6,  7,  8,  9,  10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21 */ 0,
+    2,
+    4,
+    8,
+    10,
+    12,
+    16,
+    20,
+    24,
+    28,
+    32,
+    36,
+    40,
+    44,
+    48,
+    52,
+    56,
+    60,
+    64,
+    68,
+    72,
+    76
+];
+const fontSizes = [
+    8,
+    10,
+    11,
+    12,
+    13,
+    14,
+    16,
+    20,
+    24,
+    28,
+    32,
+    36
+];
+[fontSizes.micro, fontSizes.tiny, fontSizes.extraSmall, fontSizes.small, fontSizes.paragraph, fontSizes.body, fontSizes.large, fontSizes.h5, fontSizes.h4, fontSizes.h3, fontSizes.h2, fontSizes.h1] = fontSizes;
+fontSizes.largeLineHeight = fontSizes.large;
+fontSizes.bodyLineHeight = fontSizes.body;
+fontSizes.paragraphLineHeight = fontSizes.paragraph;
+fontSizes.subtitle = fontSizes.extraSmall;
+fontSizes.h1Inter = fontSizes.h1;
+fontSizes.h2Inter = fontSizes.h2;
+fontSizes.h3Inter = fontSizes.h3;
+fontSizes.h4Inter = fontSizes.h4;
+fontSizes.h5Inter = fontSizes.h5;
+const fontWeights = {
+    extraLight: "100",
+    light: "300",
+    regular: "400",
+    medium: "500",
+    semiBold: "600",
+    bold: "700",
+    extraBold: "800"
+};
+const radii = [
+    0,
+    4,
+    8,
+    12,
+    16,
+    20
+];
+const shadows = [
+    "0 4px 8px 0 rgba(0, 0, 0, 0.03)"
+];
+const zIndexes = [
+    -1,
+    0,
+    1,
+    9,
+    10,
+    90,
+    100,
+    900,
+    1000
+];
+// Those fonts are now defined in global.css, this is just a mapping for styled-system
+const fontFamilies = {
+    Inter: {
+        ExtraLight: {
+            weight: 100,
+            style: "normal"
+        },
+        Light: {
+            weight: 300,
+            style: "normal"
+        },
+        Regular: {
+            weight: 400,
+            style: "normal"
+        },
+        Medium: {
+            weight: 500,
+            style: "normal"
+        },
+        SemiBold: {
+            weight: 600,
+            style: "normal"
+        },
+        Bold: {
+            weight: 700,
+            style: "normal"
+        },
+        ExtraBold: {
+            weight: 800,
+            style: "normal"
+        }
+    },
+    Alpha: {
+        Medium: {
+            weight: 500,
+            style: "normal"
+        }
+    }
+};
+const animationDuration = "0.33s";
+const easings = {
+    outQuadratic: "cubic-bezier(0.25, 0.46, 0.45, 0.94)"
+};
+const transition = (properties = [
+    "all"
+], duration = animationDuration, easing = easings.outQuadratic)=>(0,styled_components__rspack_import_0.css)`
+  transition-property: ${properties.join(",")};
+  transition-duration: ${duration};
+  transition-timing-function: ${easing};
+`;
+const fadeIn = (0,styled_components__rspack_import_0.keyframes)`
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  `;
+const fadeOut = (0,styled_components__rspack_import_0.keyframes)`
+    0% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0;
+    }
+  `;
+const fadeInGrowX = (0,styled_components__rspack_import_0.keyframes)`
+    0% {
+      opacity: 0;
+      transform: scaleX(0);
+    }
+    100% {
+      opacity: 1;
+      transform: scaleX(1);
+    }
+`;
+const fadeInUp = (0,styled_components__rspack_import_0.keyframes)`
+    0% {
+      opacity: 0;
+      transform: translateY(66%);
+    }
+    100% {
+      opacity: 1;
+      transform: translateY(0%);
+    }
+  `;
+const animations = {
+    fadeIn: ()=>(0,styled_components__rspack_import_0.css)`
+    ${fadeIn} ${animationDuration} ${easings.outQuadratic} forwards
+  `,
+    fadeOut: ()=>(0,styled_components__rspack_import_0.css)`
+    ${fadeOut} ${animationDuration} ${easings.outQuadratic} forwards
+  `,
+    fadeInGrowX: ()=>(0,styled_components__rspack_import_0.css)`
+    ${fadeInGrowX} 0.6s ${easings.outQuadratic} forwards
+  `,
+    fadeInUp: ()=>(0,styled_components__rspack_import_0.css)`
+    ${fadeInUp} ${animationDuration} ${easings.outQuadratic} forwards
+  `
+};
+const overflow = {
+    x: (0,styled_components__rspack_import_0.css)`
+    overflow-y: hidden;
+    overflow-x: scroll;
+    will-change: transform;
+    &:hover {
+      --track-color: ${(p)=>p.theme.colors.neutral.c30};
+    }
+  `,
+    y: (0,styled_components__rspack_import_0.css)`
+    overflow-x: hidden;
+    overflow-y: scroll;
+    will-change: transform;
+    &:hover {
+      --track-color: ${(p)=>p.theme.colors.neutral.c30};
+    }
+  `,
+    yAuto: (0,styled_components__rspack_import_0.css)`
+    overflow-x: hidden;
+    overflow-y: auto;
+    will-change: transform;
+    &:hover {
+      --track-color: ${(p)=>p.theme.colors.neutral.c30};
+    }
+  `,
+    xy: (0,styled_components__rspack_import_0.css)`
+    overflow: scroll;
+    will-change: transform;
+    &:hover {
+      --track-color: ${(p)=>p.theme.colors.neutral.c30};
+    }
+  `,
+    trackSize: 12
+};
+const theme = {
+    theme: "light",
+    sizes: {
+        drawer: {
+            side: {
+                big: {
+                    width: 580
+                },
+                small: {
+                    width: 420
+                }
+            },
+            popin: {
+                min: {
+                    height: 158,
+                    width: 462
+                },
+                max: {
+                    height: 522,
+                    width: 622
+                }
+            }
+        },
+        topBarHeight: 58,
+        sideBarWidth: 230
+    },
+    radii,
+    fontFamilies,
+    fontSizes,
+    fontWeights,
+    space,
+    shadows,
+    colors: _ledgerhq_ui_shared__rspack_import_1.palettes.light,
+    animations,
+    overflow,
+    transition,
+    zIndexes,
+    breakpoints
+};
+/* export default */ const __rspack_default_export = (theme);
+
+
+},
+7304(module) {
+module.exports = require("@ledgerhq/icons-ui/react");
+
+},
+2993(module) {
+module.exports = require("@ledgerhq/ui-shared");
+
+},
+2015(module) {
+module.exports = require("react");
+
+},
+2770(module) {
+module.exports = require("styled-components");
+
+},
+9351(module) {
+module.exports = require("styled-system");
+
+},
+
+});
+// The module cache
+var __webpack_module_cache__ = {};
+
+// The require function
+function __webpack_require__(moduleId) {
+
+// Check if module is in cache
+var cachedModule = __webpack_module_cache__[moduleId];
+if (cachedModule !== undefined) {
+return cachedModule.exports;
+}
+// Create a new module (and put it into the cache)
+var module = (__webpack_module_cache__[moduleId] = {
+exports: {}
+});
+// Execute the module function
+__webpack_modules__[moduleId](module, module.exports, __webpack_require__);
+
+// Return the exports of the module
+return module.exports;
+
+}
+
+// webpack/runtime/compat_get_default_export
+(() => {
+// getDefaultExport function for compatibility with non-ESM modules
+__webpack_require__.n = (module) => {
+	var getter = module && module.__esModule ?
+		() => (module['default']) :
+		() => (module);
+	__webpack_require__.d(getter, { a: getter });
+	return getter;
+};
+
+})();
+// webpack/runtime/define_property_getters
+(() => {
+__webpack_require__.d = (exports, definition) => {
+	for(var key in definition) {
+        if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
+            Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
+        }
+    }
+};
+})();
+// webpack/runtime/has_own_property
+(() => {
+__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
+})();
+// webpack/runtime/make_namespace_object
+(() => {
+// define __esModule on exports
+__webpack_require__.r = (exports) => {
+	if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+		Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+	}
+	Object.defineProperty(exports, '__esModule', { value: true });
+};
+})();
+var __webpack_exports__ = {};
+// This entry needs to be wrapped in an IIFE because it needs to be isolated against other modules in the chunk.
+(() => {
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+  Default: () => (Default),
+  PortfolioContentCards: () => (PortfolioContentCards),
+  "default": () => (__rspack_default_export)
+});
+/* import */ var react__rspack_import_0 = __webpack_require__(2015);
+/* import */ var react__rspack_import_0_default = /*#__PURE__*/__webpack_require__.n(react__rspack_import_0);
+/* import */ var _ContentCard_PortfolioContentCard__rspack_import_2 = __webpack_require__(6160);
+/* import */ var ___rspack_import_1 = __webpack_require__(8654);
+
+
+
+const SlideContext = /*#__PURE__*/ react__rspack_import_0_default().createContext([]);
+/* export default */ const __rspack_default_export = ({
+    title: "Layout/Carousel",
+    argTypes: {
+        children: {
+            description: "The elements to be displayed.",
+            control: {
+                type: "range",
+                min: 0,
+                max: 10,
+                step: 1
+            }
+        },
+        variant: {
+            description: "Variant for the carousel.",
+            options: [
+                "default",
+                "content-card"
+            ],
+            defaultValue: "default",
+            control: "inline-radio"
+        },
+        autoPlay: {
+            description: "The time in milliseconds between automatic slide change (0 for no auto-play)."
+        },
+        onNext: {
+            description: "Function called when the user moves to the next slide."
+        },
+        onPrev: {
+            description: "Function called when the user moves to the previous slide."
+        }
+    },
+    args: {
+        variant: "default",
+        children: 5,
+        autoPlay: 0
+    },
+    parameters: {
+        docs: {
+            description: {
+                component: "A simple Carousel component."
+            }
+        }
+    },
+    decorators: [
+        (Story, { args, parameters })=>/*#__PURE__*/ react__rspack_import_0_default().createElement(SlideContext.Provider, {
+                value: Array.from({
+                    length: args.children
+                }, (_, index)=>/*#__PURE__*/ react__rspack_import_0_default().createElement(parameters.Slide, {
+                        key: index,
+                        index: index
+                    }))
+            }, /*#__PURE__*/ react__rspack_import_0_default().createElement(Story, null))
+    ],
+    render: ({ children, ...props })=>/*#__PURE__*/ react__rspack_import_0_default().createElement(___rspack_import_1["default"], props, (0,react__rspack_import_0.useContext)(SlideContext))
+});
+const Default = {
+    parameters: {
+        Slide: ({ index })=>/*#__PURE__*/ react__rspack_import_0_default().createElement("div", {
+                style: {
+                    backgroundColor: `hsl(${Math.random() * 360}, 100%, 75%)`,
+                    padding: "16px 24px",
+                    borderRadius: "5px"
+                }
+            }, "Slide ", index)
+    }
+};
+const PortfolioContentCards = {
+    parameters: {
+        Slide: ({ index })=>/*#__PURE__*/ react__rspack_import_0_default().createElement(_ContentCard_PortfolioContentCard__rspack_import_2["default"], {
+                title: "Ledger Recover",
+                description: "Get peace of mind and start your free trial.",
+                cta: index % 2 ? undefined : "Start my free trial",
+                tag: index % 3 ? undefined : "New",
+                image: (index + 1) % 4 ? IMAGE_SRC : undefined,
+                onClick: ()=>onSlideAction(`click on slide ${index}`),
+                onClose: ()=>onSlideAction(`close slide ${index}`)
+            })
+    }
 };
-const onSlideAction = (0, import_addon_actions.action)("onSlideAction");
+const onSlideAction = (_label)=>{};
 const IMAGE_SRC = "data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='450' height='526' viewBox='0 0 450 526'><defs><linearGradient id='g' x0='0' y0='0' x1='1' y1='1'><stop stop-color='%23000' offset='0%' /><stop stop-color='%23FFF' offset='100%' /></linearGradient></defs><path d='M0,0 H450 V526 Q0,526 0,0 z' fill='url(%23g)' /></svg>";
-//# sourceMappingURL=Carousel.stories.js.map
+
+})();
+
+module.exports = __webpack_exports__;
+})()
+;
+//# sourceMappingURL=Carousel.stories.js.map