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

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

@@ -1,44 +1,1225 @@
+(() => {
 "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 Popin_stories_exports = {};
-__export(Popin_stories_exports, {
-  Default: () => Default,
-  default: () => Popin_stories_default
-});
-module.exports = __toCommonJS(Popin_stories_exports);
-var import_react = __toESM(require("react"));
-var import_manager_api = require("@storybook/manager-api");
-var import_addon_actions = require("@storybook/addon-actions");
-var import_index = __toESM(require("./index"));
-var import_Text = __toESM(require("../../asorted/Text"));
-var import_Button = __toESM(require("../../cta/Button"));
-var import_theme = __toESM(require("../../../styles/theme"));
+var __webpack_modules__ = ({
+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__, {
+  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;
+    }
+  `
+    });
+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 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);
+        }
+    });
+}
+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);
+
+
+},
+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);
+
+
+},
+7843(__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 react_dom__rspack_import_1 = __webpack_require__(2326);
+/* import */ var react_dom__rspack_import_1_default = /*#__PURE__*/__webpack_require__.n(react_dom__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 _ledgerhq_icons_ui_reactLegacy_CloseMedium__rspack_import_3 = __webpack_require__(4295);
+/* import */ var _ledgerhq_icons_ui_reactLegacy_CloseMedium__rspack_import_3_default = /*#__PURE__*/__webpack_require__.n(_ledgerhq_icons_ui_reactLegacy_CloseMedium__rspack_import_3);
+/* import */ var _ledgerhq_icons_ui_reactLegacy_ArrowLeftMedium__rspack_import_4 = __webpack_require__(3935);
+/* import */ var _ledgerhq_icons_ui_reactLegacy_ArrowLeftMedium__rspack_import_4_default = /*#__PURE__*/__webpack_require__.n(_ledgerhq_icons_ui_reactLegacy_ArrowLeftMedium__rspack_import_4);
+/* import */ var _styled__rspack_import_6 = __webpack_require__(7680);
+/* import */ var _layout_Flex__rspack_import_5 = __webpack_require__(3696);
+/* import */ var _cta_Button__rspack_import_7 = __webpack_require__(1133);
+/* import */ var _transitions_TransitionInOut__rspack_import_8 = __webpack_require__(660);
+/* import */ var _transitions_TransitionScale__rspack_import_9 = __webpack_require__(733);
+
+
+
+
+
+
+
+
+
+
+const ICON_SIZE = 20;
+const Wrapper = styled_components__rspack_import_2_default()((0,_layout_Flex__rspack_import_5["default"])).attrs((p)=>({
+        flexDirection: "column",
+        alignItems: "stretch",
+        justifyContent: "space-between",
+        height: p.height || `${p.theme.sizes.drawer.popin.max.height}px`,
+        width: p.width || `${p.theme.sizes.drawer.popin.max.width}px`,
+        minHeight: `${p.theme.sizes.drawer.popin.min.height}px`,
+        minWidth: `${p.theme.sizes.drawer.popin.min.width}px`,
+        maxHeight: `${p.theme.sizes.drawer.popin.max.height}px`,
+        maxWidth: `${p.theme.sizes.drawer.popin.max.width}px`,
+        zIndex: p.theme.zIndexes[8],
+        p: p.p !== undefined ? p.p : p.theme.space[10],
+        rowGap: 6,
+        backgroundColor: "background.main"
+    }))``;
+const Overlay = styled_components__rspack_import_2_default()((0,_layout_Flex__rspack_import_5["default"])).attrs((p)=>({
+        justifyContent: "center",
+        alignItems: "center",
+        width: "100vw",
+        height: "100vh",
+        zIndex: p.theme.zIndexes[8],
+        position: "fixed",
+        top: 0,
+        left: 0,
+        backgroundColor: "constant.overlay"
+    }))``;
+const Header = _styled__rspack_import_6["default"].section`
+  display: grid;
+  grid-template-columns: [icon] ${ICON_SIZE}px [title] 1fr [icon] ${ICON_SIZE}px;
+  column-gap: 12px;
+`;
+const HeaderTitleContainer = styled_components__rspack_import_2_default()((0,_layout_Flex__rspack_import_5["default"])).attrs(()=>({
+        justifyContent: "center"
+    }))``;
+const PopinBody = (0,_styled__rspack_import_6["default"])((0,_layout_Flex__rspack_import_5["default"])).attrs({
+    as: "section",
+    flexDirection: "column",
+    flex: 1,
+    overflow: "auto"
+})``;
+const PopinFooter = (0,_styled__rspack_import_6["default"])((0,_layout_Flex__rspack_import_5["default"])).attrs({
+    as: "section"
+})``;
+const IconContainer = styled_components__rspack_import_2_default()(_cta_Button__rspack_import_7["default"].Unstyled)`
+  display: flex;
+  align-items: center;
+`;
+const PopinHeader = ({ children, onClose, onBack, ...props })=>/*#__PURE__*/ react__rspack_import_0_default().createElement(Header, props, /*#__PURE__*/ react__rspack_import_0_default().createElement(_layout_Flex__rspack_import_5["default"], null, onBack ? /*#__PURE__*/ react__rspack_import_0_default().createElement(IconContainer, {
+        onClick: onBack
+    }, /*#__PURE__*/ react__rspack_import_0_default().createElement((_ledgerhq_icons_ui_reactLegacy_ArrowLeftMedium__rspack_import_4_default()), {
+        size: ICON_SIZE,
+        color: "neutral.c100"
+    })) : null), /*#__PURE__*/ react__rspack_import_0_default().createElement(HeaderTitleContainer, null, children), /*#__PURE__*/ react__rspack_import_0_default().createElement(_layout_Flex__rspack_import_5["default"], null, onClose ? /*#__PURE__*/ react__rspack_import_0_default().createElement(IconContainer, {
+        onClick: onClose
+    }, /*#__PURE__*/ react__rspack_import_0_default().createElement((_ledgerhq_icons_ui_reactLegacy_CloseMedium__rspack_import_3_default()), {
+        size: ICON_SIZE,
+        color: "neutral.c100"
+    })) : null));
+const Popin = ({ isOpen, children, width, height, ...props })=>/*#__PURE__*/ react__rspack_import_0_default().createElement(_transitions_TransitionInOut__rspack_import_8["default"], {
+        in: isOpen,
+        appear: true,
+        mountOnEnter: true,
+        unmountOnExit: true
+    }, /*#__PURE__*/ react__rspack_import_0_default().createElement(Overlay, null, /*#__PURE__*/ react__rspack_import_0_default().createElement(_transitions_TransitionScale__rspack_import_9["default"], {
+        in: isOpen,
+        appear: true
+    }, /*#__PURE__*/ react__rspack_import_0_default().createElement(Wrapper, {
+        width: width,
+        height: height,
+        ...props
+    }, children))));
+const PopinWrapper = ({ children, menuPortalTarget, ...popinProps })=>{
+    const $root = react__rspack_import_0_default().useMemo(()=>menuPortalTarget === undefined && typeof document !== "undefined" ? document.querySelector("body") : menuPortalTarget, [
+        menuPortalTarget
+    ]);
+    if (!$root) {
+        return /*#__PURE__*/ react__rspack_import_0_default().createElement(Popin, popinProps, children);
+    } else {
+        return /*#__PURE__*/ react_dom__rspack_import_1_default().createPortal(/*#__PURE__*/ react__rspack_import_0_default().createElement(Popin, popinProps, children), $root);
+    }
+};
+PopinWrapper.Header = PopinHeader;
+PopinWrapper.Body = PopinBody;
+PopinWrapper.Footer = PopinFooter;
+/* export default */ const __rspack_default_export = (PopinWrapper);
+
+
+},
+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);
+
+
+},
+660(__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 react_transition_group__rspack_import_1 = __webpack_require__(7727);
+/* import */ var react_transition_group__rspack_import_1_default = /*#__PURE__*/__webpack_require__.n(react_transition_group__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);
+
+
+
+const duration = 150;
+const ChildrenWrapper = (styled_components__rspack_import_2_default().div)`
+  transition: ${(props)=>`opacity ${props.timeout}ms ease-in-out`};
+
+  &.transition-inout-enter {
+    opacity: 0;
+  }
+
+  &.transition-inout-enter-active {
+    opacity: 1;
+  }
+
+  &.transition-inout-exit {
+    opacity: 1;
+  }
+
+  &.transition-inout-exit-active {
+    opacity: 0;
+  }
+`;
+const TransitionInOut = ({ children, in: inProp, timeout = duration, ...TransitionProps })=>/*#__PURE__*/ react__rspack_import_0_default().createElement(react_transition_group__rspack_import_1.CSSTransition, {
+        ...TransitionProps,
+        in: inProp,
+        timeout: timeout,
+        classNames: "transition-inout"
+    }, /*#__PURE__*/ react__rspack_import_0_default().createElement(ChildrenWrapper, {
+        timeout: timeout
+    }, children));
+/* export default */ const __rspack_default_export = (TransitionInOut);
+
+
+},
+733(__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 react_transition_group__rspack_import_1 = __webpack_require__(7727);
+/* import */ var react_transition_group__rspack_import_1_default = /*#__PURE__*/__webpack_require__.n(react_transition_group__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);
+
+
+
+const duration = 150;
+const ChildrenWrapper = (styled_components__rspack_import_2_default().div)`
+  transition: transform ${duration}ms;
+
+  &.transition-scale-appear {
+    transform: scale(0.9);
+  }
+
+  &.transition-scale-appear-active {
+    transform: scale(1);
+  }
+
+  &.transition-scale-exit {
+    transform: scale(1);
+  }
+
+  &.transition-scale-exit-active {
+    transform: scale(0.9);
+  }
+`;
+const TransitionScale = ({ children, in: inProp, timeout = duration, ...TransitionProps })=>/*#__PURE__*/ react__rspack_import_0_default().createElement(react_transition_group__rspack_import_1.CSSTransition, {
+        ...TransitionProps,
+        in: inProp,
+        timeout: timeout,
+        classNames: "transition-scale"
+    }, /*#__PURE__*/ react__rspack_import_0_default().createElement(ChildrenWrapper, null, children));
+/* export default */ const __rspack_default_export = (TransitionScale);
+
+
+},
+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);
+
+
+},
+3935(module) {
+module.exports = require("@ledgerhq/icons-ui/reactLegacy/ArrowLeftMedium");
+
+},
+4295(module) {
+module.exports = require("@ledgerhq/icons-ui/reactLegacy/CloseMedium");
+
+},
+2993(module) {
+module.exports = require("@ledgerhq/ui-shared");
+
+},
+2015(module) {
+module.exports = require("react");
+
+},
+2326(module) {
+module.exports = require("react-dom");
+
+},
+7727(module) {
+module.exports = require("react-transition-group");
+
+},
+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.
+(() => {
+// ESM COMPAT FLAG
+__webpack_require__.r(__webpack_exports__);
+
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, {
+  "default": () => (/* binding */ Popin_stories),
+  Default: () => (/* binding */ Default)
+});
+
+// EXTERNAL MODULE: external "react"
+var external_react_ = __webpack_require__(2015);
+var external_react_default = /*#__PURE__*/__webpack_require__.n(external_react_);
+;// CONCATENATED MODULE: external "storybook/manager-api"
+const manager_api_namespaceObject = require("storybook/manager-api");
+// EXTERNAL MODULE: ./src/components/layout/Popin/index.tsx
+var Popin = __webpack_require__(7843);
+// EXTERNAL MODULE: ./src/components/asorted/Text/index.tsx
+var Text = __webpack_require__(348);
+// EXTERNAL MODULE: ./src/components/cta/Button/index.tsx + 1 modules
+var Button = __webpack_require__(1133);
+// EXTERNAL MODULE: ./src/styles/theme.ts
+var theme = __webpack_require__(5548);
+;// CONCATENATED MODULE: ./src/components/layout/Popin/Popin.stories.tsx
+
+
+
+
+
+
 const description = `
 ### This is a customizable pop-in component.
 
@@ -53,7 +1234,8 @@ import { Popin } from "@ledgerhq/react-ui"
 
 \`\`\`
 
-From the default Popin component, you can access 3 different pre-styled sections *(\`Popin.Header\`, \`Popin.Body\` and \`Popin.Footer\`)*. All of these components are optional.
+From the default Popin component, you can access 3 different pre-styled sections *(\`Popin.Header\`, \`Popin.Body\` and \`Popin.Footer\`)*. \
+All of these components are optional.
 
 - \`Popin.Header\` is accepting an onClose callback. The cross icon is only rendered if the onClose callback is provided
 - \`Popin.Body\` is just a customizable scrollable Flex component configured to take all the available space
@@ -62,7 +1244,8 @@ From the default Popin component, you can access 3 different pre-styled sections
 ## Sandbox
 
 Placement, style and content can be customized using props as demonstrated in the following example.<br />
-Additionally, the story provide some playground options to play with the component. These options aren't props of the component itself.
+Additionally, the story provide some playground options to play with the component. These options aren't \
+props of the component itself.
 `;
 const code = `
 <Popin isOpen={isOpen}>
@@ -75,132 +1258,182 @@ const code = `
   </Popin.Footer>
 </Popin>
 `;
-var Popin_stories_default = {
-  title: "Layout/Popin",
-  component: import_index.default,
-  parameters: {
-    docs: {
-      description: { component: description },
-      source: { code, type: "code" }
-    }
-  },
-  argTypes: {
-    /** PROPS **/
-    width: {
-      type: "number",
-      description: "Optional popin's width",
-      control: {
-        type: "number",
-        min: import_theme.default.sizes.drawer.popin.min.width,
-        max: import_theme.default.sizes.drawer.popin.max.width
-      },
-      table: {
-        type: {
-          summary: "Accepted range",
-          detail: `Value lower than ${import_theme.default.sizes.drawer.popin.min.width}px or greather than ${import_theme.default.sizes.drawer.popin.max.width}px will have no effect because of min/max css rules.`
-        },
-        defaultValue: {
-          summary: import_theme.default.sizes.drawer.popin.min.width
+/* export default */ const Popin_stories = ({
+    title: "Layout/Popin",
+    component: Popin["default"],
+    parameters: {
+        docs: {
+            description: {
+                component: description
+            },
+            source: {
+                code,
+                type: "code"
+            }
         }
-      }
     },
-    height: {
-      type: "number",
-      description: "Optional popin's height",
-      control: {
-        type: "number",
-        min: import_theme.default.sizes.drawer.popin.min.height,
-        max: import_theme.default.sizes.drawer.popin.max.height
-      },
-      table: {
-        type: {
-          summary: "Accepted range",
-          detail: `Value lower than ${import_theme.default.sizes.drawer.popin.min.height}px or greather than ${import_theme.default.sizes.drawer.popin.max.height}px will have no effect because of min/max css rules.`
-        },
-        defaultValue: {
-          summary: import_theme.default.sizes.drawer.popin.min.height
+    argTypes: {
+        /** PROPS **/ width: {
+            type: "number",
+            description: "Optional popin's width",
+            control: {
+                type: "number",
+                min: theme["default"].sizes.drawer.popin.min.width,
+                max: theme["default"].sizes.drawer.popin.max.width
+            },
+            table: {
+                type: {
+                    summary: "Accepted range",
+                    detail: `Value lower than ${theme["default"].sizes.drawer.popin.min.width}px or greather than ${theme["default"].sizes.drawer.popin.max.width}px will have no effect because of min/max css rules.`
+                },
+                defaultValue: {
+                    summary: theme["default"].sizes.drawer.popin.min.width
+                }
+            }
+        },
+        height: {
+            type: "number",
+            description: "Optional popin's height",
+            control: {
+                type: "number",
+                min: theme["default"].sizes.drawer.popin.min.height,
+                max: theme["default"].sizes.drawer.popin.max.height
+            },
+            table: {
+                type: {
+                    summary: "Accepted range",
+                    detail: `Value lower than ${theme["default"].sizes.drawer.popin.min.height}px or greather than ${theme["default"].sizes.drawer.popin.max.height}px will have no effect because of min/max css rules.`
+                },
+                defaultValue: {
+                    summary: theme["default"].sizes.drawer.popin.min.height
+                }
+            }
+        },
+        isOpen: {
+            type: "boolean",
+            description: "Controls if the popin is mounted or not.",
+            required: true,
+            control: {
+                type: "boolean"
+            }
+        },
+        onClose: {
+            description: "Unmount the component when the user click on the cross icon. This props controls if the cross icon should be rendered inside the header component.",
+            control: false
+        },
+        /** playground **/ hasHeader: {
+            type: "boolean",
+            value: true,
+            description: "Controls if the header should be displayed.",
+            required: true,
+            control: {
+                type: "boolean"
+            },
+            table: {
+                category: "playground"
+            }
+        },
+        hasFooter: {
+            type: "boolean",
+            value: true,
+            description: "Controls if the footer should be displayed.",
+            required: true,
+            control: {
+                type: "boolean"
+            },
+            table: {
+                category: "playground"
+            }
+        },
+        isCloseDisplayed: {
+            type: "boolean",
+            description: "Controls if the close button should be rendered.",
+            required: true,
+            control: {
+                type: "boolean"
+            },
+            table: {
+                category: "playground"
+            }
+        },
+        isBackDisplayed: {
+            type: "boolean",
+            description: "Controls if the back button should be rendered.",
+            required: true,
+            control: {
+                type: "boolean"
+            },
+            table: {
+                category: "playground"
+            }
+        },
+        "Header.Children.Text": {
+            type: "text",
+            description: "Any valid text. This parameter is passed to a Text component as children. The Text component is the children of the Header component.",
+            required: true,
+            control: {
+                type: "text"
+            },
+            table: {
+                category: "playground"
+            }
+        },
+        "Body.Children.Text": {
+            type: "text",
+            description: "Any valid text. This parameter is passed to a Text component as children. The Text component is the children of the Body component.",
+            required: true,
+            control: {
+                type: "text"
+            },
+            table: {
+                category: "playground"
+            }
         }
-      }
     },
-    isOpen: {
-      type: "boolean",
-      description: "Controls if the popin is mounted or not.",
-      required: true,
-      control: { type: "boolean" }
-    },
-    onClose: {
-      description: "Unmount the component when the user click on the cross icon. This props controls if the cross icon should be rendered inside the header component.",
-      control: false
-    },
-    /** playground **/
-    hasHeader: {
-      type: "boolean",
-      value: true,
-      description: "Controls if the header should be displayed.",
-      required: true,
-      control: { type: "boolean" },
-      table: { category: "playground" }
-    },
-    hasFooter: {
-      type: "boolean",
-      value: true,
-      description: "Controls if the footer should be displayed.",
-      required: true,
-      control: { type: "boolean" },
-      table: { category: "playground" }
-    },
-    isCloseDisplayed: {
-      type: "boolean",
-      description: "Controls if the close button should be rendered.",
-      required: true,
-      control: { type: "boolean" },
-      table: { category: "playground" }
-    },
-    isBackDisplayed: {
-      type: "boolean",
-      description: "Controls if the back button should be rendered.",
-      required: true,
-      control: { type: "boolean" },
-      table: { category: "playground" }
-    },
-    "Header.Children.Text": {
-      type: "text",
-      description: "Any valid text. This parameter is passed to a Text component as children. The Text component is the children of the Header component.",
-      required: true,
-      control: { type: "text" },
-      table: { category: "playground" }
-    },
-    "Body.Children.Text": {
-      type: "text",
-      description: "Any valid text. This parameter is passed to a Text component as children. The Text component is the children of the Body component.",
-      required: true,
-      control: { type: "text" },
-      table: { category: "playground" }
-    }
-  },
-  args: {
-    width: import_theme.default.sizes.drawer.popin.max.width,
-    height: import_theme.default.sizes.drawer.popin.max.height,
-    isOpen: true,
-    hasHeader: true,
-    hasFooter: true,
-    isCloseDisplayed: true,
-    isBackDisplayed: true,
-    "Body.Children.Text": `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim fermentum lectus, eu aliquet arcu tincidunt a. Etiam dapibus dolor at felis pretium, a posuere turpis dapibus. Mauris id felis et quam accumsan congue. Curabitur auctor nunc nec augue suscipit sagittis. Nunc eu eros varius, bibendum ligula id, molestie quam. Nam ac sem et mi pellentesque rhoncus sed eu nisi. Maecenas auctor elit at sollicitudin imperdiet. Sed mollis eros at nunc malesuada posuere. Suspendisse luctus commodo porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim fermentum lectus, eu aliquet arcu tincidunt a. Etiam dapibus dolor at felis pretium, a posuere turpis dapibus. Mauris id felis et quam accumsan congue. Curabitur auctor nunc nec augue suscipit sagittis. Nunc eu eros varius, bibendum ligula id, molestie quam. Nam ac sem et mi pellentesque rhoncus sed eu nisi. Maecenas auctor elit at sollicitudin imperdiet. Sed mollis eros at nunc malesuada posuere. Suspendisse luctus commodo porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim fermentum lectus, eu aliquet arcu tincidunt a. Etiam dapibus dolor at felis pretium, a posuere turpis dapibus. Mauris id felis et quam accumsan congue. Curabitur auctor nunc nec augue suscipit sagittis. Nunc eu eros varius, bibendum ligula id, molestie quam. Nam ac sem et mi pellentesque rhoncus sed eu nisi. Maecenas auctor elit at sollicitudin imperdiet. Sed mollis eros at nunc malesuada posuere. Suspendisse luctus commodo porttitor. Mauris id felis et quam accumsan congue. Curabitur auctor nunc nec augue suscipit sagittis. Nunc eu eros varius, bibendum ligula id, molestie quam. Nam ac sem et mi pellentesque rhoncus sed eu nisi. Maecenas auctor elit at sollicitudin imperdiet. Sed mollis eros at nunc malesuada posuere. Suspendisse luctus commodo porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim fermentum lectus, eu aliquet arcu tincidunt a. Etiam dapibus dolor at felis pretium, a posuere turpis dapibus. Mauris id felis et quam accumsan congue. Curabitur auctor nunc nec augue suscipit sagittis. Nunc eu eros varius, bibendum ligula id, molestie quam. Nam ac sem et mi pellentesque rhoncus sed eu nisi. Maecenas auctor elit at sollicitudin imperdiet. Sed mollis eros at nunc malesuada posuere. Suspendisse luctus commodo porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim fermentum lectus, eu aliquet arcu tincidunt a. Etiam dapibus dolor at felis pretium, a posuere turpis dapibus. Mauris id felis et quam accumsan congue. Curabitur auctor nunc nec augue suscipit sagittis. Nunc eu eros varius, bibendum ligula id, molestie quam. Nam ac sem et mi pellentesque rhoncus sed eu nisi. Maecenas auctor elit at sollicitudin imperdiet. Sed mollis eros at nunc malesuada posuere. Suspendisse luctus commodo porttitor. Mauris id felis et quam accumsan congue. Curabitur auctor nunc nec augue suscipit sagittis. Nunc eu eros varius, bibendum ligula id, molestie quam. Nam ac sem et mi pellentesque rhoncus sed eu nisi. Maecenas auctor elit at sollicitudin imperdiet. Sed mollis eros at nunc malesuada posuere. Suspendisse luctus commodo porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim fermentum lectus, eu aliquet arcu tincidunt a. Etiam dapibus dolor at felis pretium, a posuere turpis dapibus. Mauris id felis et quam accumsan congue. Curabitur auctor nunc nec augue suscipit sagittis. Nunc eu eros varius, bibendum ligula id, molestie quam. Nam ac sem et mi pellentesque rhoncus sed eu nisi. Maecenas auctor elit at sollicitudin imperdiet. Sed mollis eros at nunc malesuada posuere. Suspendisse luctus commodo porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim fermentum lectus, eu aliquet arcu tincidunt a. Etiam dapibus dolor at felis pretium, a posuere turpis dapibus. Mauris id felis et quam accumsan congue. Curabitur auctor nunc nec augue suscipit sagittis. Nunc eu eros varius, bibendum ligula id, molestie quam. Nam ac sem et mi pellentesque rhoncus sed eu nisi. Maecenas auctor elit at sollicitudin imperdiet. Sed mollis eros at nunc malesuada posuere. Suspendisse luctus commodo porttitor.`,
-    "Header.Children.Text": "This is a fake title"
-  }
-};
-const Template = (args) => {
-  const [, updateArgs] = (0, import_manager_api.useArgs)();
-  const onClose = () => updateArgs({ isOpen: false });
-  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_Button.default, { variant: "shade", onClick: () => updateArgs({ isOpen: true }) }, "Open the modal"), /* @__PURE__ */ import_react.default.createElement(import_index.default, { ...args }, args.hasHeader ? /* @__PURE__ */ import_react.default.createElement(
-    import_index.default.Header,
-    {
-      onBack: args.isBackDisplayed ? (0, import_addon_actions.action)("previous") : void 0,
-      onClose: args.isCloseDisplayed ? onClose : void 0
-    },
-    /* @__PURE__ */ import_react.default.createElement(import_Text.default, { variant: "h5" }, args["Header.Children.Text"])
-  ) : null, /* @__PURE__ */ import_react.default.createElement(import_index.default.Body, null, /* @__PURE__ */ import_react.default.createElement(import_Text.default, { variant: "paragraph" }, args["Body.Children.Text"])), args.hasFooter ? /* @__PURE__ */ import_react.default.createElement(import_index.default.Footer, { flexDirection: "row-reverse" }, /* @__PURE__ */ import_react.default.createElement(import_Button.default, { variant: "main", onClick: (0, import_addon_actions.action)("next") }, "Next")) : null));
+    args: {
+        width: theme["default"].sizes.drawer.popin.max.width,
+        height: theme["default"].sizes.drawer.popin.max.height,
+        isOpen: true,
+        hasHeader: true,
+        hasFooter: true,
+        isCloseDisplayed: true,
+        isBackDisplayed: true,
+        "Body.Children.Text": `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim fermentum lectus, eu aliquet arcu tincidunt a. Etiam dapibus dolor at felis pretium, a posuere turpis dapibus. Mauris id felis et quam accumsan congue. Curabitur auctor nunc nec augue suscipit sagittis. Nunc eu eros varius, bibendum ligula id, molestie quam. Nam ac sem et mi pellentesque rhoncus sed eu nisi. Maecenas auctor elit at sollicitudin imperdiet. Sed mollis eros at nunc malesuada posuere. Suspendisse luctus commodo porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim fermentum lectus, eu aliquet arcu tincidunt a. Etiam dapibus dolor at felis pretium, a posuere turpis dapibus. Mauris id felis et quam accumsan congue. Curabitur auctor nunc nec augue suscipit sagittis. Nunc eu eros varius, bibendum ligula id, molestie quam. Nam ac sem et mi pellentesque rhoncus sed eu nisi. Maecenas auctor elit at sollicitudin imperdiet. Sed mollis eros at nunc malesuada posuere. Suspendisse luctus commodo porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim fermentum lectus, eu aliquet arcu tincidunt a. Etiam dapibus dolor at felis pretium, a posuere turpis dapibus. Mauris id felis et quam accumsan congue. Curabitur auctor nunc nec augue suscipit sagittis. Nunc eu eros varius, bibendum ligula id, molestie quam. Nam ac sem et mi pellentesque rhoncus sed eu nisi. Maecenas auctor elit at sollicitudin imperdiet. Sed mollis eros at nunc malesuada posuere. Suspendisse luctus commodo porttitor. Mauris id felis et quam accumsan congue. Curabitur auctor nunc nec augue suscipit sagittis. Nunc eu eros varius, bibendum ligula id, molestie quam. Nam ac sem et mi pellentesque rhoncus sed eu nisi. Maecenas auctor elit at sollicitudin imperdiet. Sed mollis eros at nunc malesuada posuere. Suspendisse luctus commodo porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim fermentum lectus, eu aliquet arcu tincidunt a. Etiam dapibus dolor at felis pretium, a posuere turpis dapibus. Mauris id felis et quam accumsan congue. Curabitur auctor nunc nec augue suscipit sagittis. Nunc eu eros varius, bibendum ligula id, molestie quam. Nam ac sem et mi pellentesque rhoncus sed eu nisi. Maecenas auctor elit at sollicitudin imperdiet. Sed mollis eros at nunc malesuada posuere. Suspendisse luctus commodo porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim fermentum lectus, eu aliquet arcu tincidunt a. Etiam dapibus dolor at felis pretium, a posuere turpis dapibus. Mauris id felis et quam accumsan congue. Curabitur auctor nunc nec augue suscipit sagittis. Nunc eu eros varius, bibendum ligula id, molestie quam. Nam ac sem et mi pellentesque rhoncus sed eu nisi. Maecenas auctor elit at sollicitudin imperdiet. Sed mollis eros at nunc malesuada posuere. Suspendisse luctus commodo porttitor. Mauris id felis et quam accumsan congue. Curabitur auctor nunc nec augue suscipit sagittis. Nunc eu eros varius, bibendum ligula id, molestie quam. Nam ac sem et mi pellentesque rhoncus sed eu nisi. Maecenas auctor elit at sollicitudin imperdiet. Sed mollis eros at nunc malesuada posuere. Suspendisse luctus commodo porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim fermentum lectus, eu aliquet arcu tincidunt a. Etiam dapibus dolor at felis pretium, a posuere turpis dapibus. Mauris id felis et quam accumsan congue. Curabitur auctor nunc nec augue suscipit sagittis. Nunc eu eros varius, bibendum ligula id, molestie quam. Nam ac sem et mi pellentesque rhoncus sed eu nisi. Maecenas auctor elit at sollicitudin imperdiet. Sed mollis eros at nunc malesuada posuere. Suspendisse luctus commodo porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim fermentum lectus, eu aliquet arcu tincidunt a. Etiam dapibus dolor at felis pretium, a posuere turpis dapibus. Mauris id felis et quam accumsan congue. Curabitur auctor nunc nec augue suscipit sagittis. Nunc eu eros varius, bibendum ligula id, molestie quam. Nam ac sem et mi pellentesque rhoncus sed eu nisi. Maecenas auctor elit at sollicitudin imperdiet. Sed mollis eros at nunc malesuada posuere. Suspendisse luctus commodo porttitor.`,
+        "Header.Children.Text": "This is a fake title"
+    }
+});
+const Template = (args)=>{
+    const [, updateArgs] = (0,manager_api_namespaceObject.useArgs)();
+    /* Allow interactive controls from the story. Thanks to this, triggering onClose
+   ** function from the component itself (by clicking on the cross icon e.g.)
+   ** will update the value of the isOpen props.
+   */ const onClose = ()=>updateArgs({
+            isOpen: false
+        });
+    return /*#__PURE__*/ external_react_default().createElement((external_react_default()).Fragment, null, /*#__PURE__*/ external_react_default().createElement(Button["default"], {
+        variant: "shade",
+        onClick: ()=>updateArgs({
+                isOpen: true
+            })
+    }, "Open the modal"), /*#__PURE__*/ external_react_default().createElement(Popin["default"], args, args.hasHeader ? /*#__PURE__*/ external_react_default().createElement(Popin["default"].Header, {
+        onBack: args.isBackDisplayed ? ()=>{} : undefined,
+        onClose: args.isCloseDisplayed ? onClose : undefined
+    }, /*#__PURE__*/ external_react_default().createElement(Text["default"], {
+        variant: "h5"
+    }, args["Header.Children.Text"])) : null, /*#__PURE__*/ external_react_default().createElement(Popin["default"].Body, null, /*#__PURE__*/ external_react_default().createElement(Text["default"], {
+        variant: "paragraph"
+    }, args["Body.Children.Text"])), args.hasFooter ? /*#__PURE__*/ external_react_default().createElement(Popin["default"].Footer, {
+        flexDirection: "row-reverse"
+    }, /*#__PURE__*/ external_react_default().createElement(Button["default"], {
+        variant: "main",
+        onClick: ()=>{}
+    }, "Next")) : null));
 };
 const Default = Template.bind({});
-//# sourceMappingURL=Popin.stories.js.map
+
+})();
+
+module.exports = __webpack_exports__;
+})()
+;
+//# sourceMappingURL=Popin.stories.js.map