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

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

@@ -1,280 +1,941 @@
+(() => {
 "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 Grid_stories_exports = {};
-__export(Grid_stories_exports, {
-  Default: () => Default,
-  Fixed: () => Fixed,
-  default: () => Grid_stories_default
+var __webpack_modules__ = ({
+348(__unused_rspack_module, __webpack_exports__, __webpack_require__) {
+__webpack_require__.d(__webpack_exports__, {
+  "default": () => (__rspack_default_export)
 });
-module.exports = __toCommonJS(Grid_stories_exports);
-var import_react = __toESM(require("react"));
-var import_styled_components = __toESM(require("styled-components"));
-var import_styled_system = require("styled-system");
-var import_index = __toESM(require("./index"));
-var import_Text = __toESM(require("../../asorted/Text"));
-const Cell = import_styled_components.default.div`
-  // Make the div semi-opaque to show grid composition.
-  opacity: 0.7;
-  ${import_styled_system.color}
-  ${import_styled_system.space}
-  ${import_styled_system.grid}
+/* 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};` : ""}
 `;
-var Grid_stories_default = {
-  title: "Layout/Grid",
-  component: import_index.default,
-  argTypes: {
-    columns: {
-      type: "number",
-      description: "The number of columns set with a `repeat(N, minmax(0, 1fr))` pattern or `none` to disable.",
-      table: {
-        category: "Container",
-        defaultValue: {
-          summary: 12
-        }
-      }
+/* 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"
     },
-    rows: {
-      type: "number",
-      description: "The number of rows set with a `repeat(N, minmax(0, 1fr))` pattern or `none` to disable.",
-      table: {
-        category: "Container",
-        defaultValue: {
-          summary: "initial"
-        }
-      }
+    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
     },
-    gridTemplateColumns: {
-      type: "string",
-      description: "The grid-template-columns CSS property defines the line names and track sizing functions of the grid columns.",
-      table: {
-        category: "Container"
-      }
+    h5: {
+        fontFamily: "Alpha, Inter, Sans",
+        fontWeight: 500,
+        "text-transform": "uppercase"
     },
-    gridTemplateRows: {
-      type: "string",
-      description: "The grid-template-rows CSS property defines the line names and track sizing functions of the grid rows.",
-      table: {
-        category: "Container"
-      }
+    h5Inter: {
+        fontFamily: "Inter, Sans",
+        fontWeight: 500
     },
-    gridTemplateAreas: {
-      type: "string",
-      description: "The grid-template-areas CSS property specifies named grid areas, establishing the cells in the grid and assigning them names.",
-      table: {
-        category: "Container"
-      }
+    large: {
+        fontFamily: "Inter, Sans"
     },
-    gridAutoColumns: {
-      type: "string",
-      description: "The grid-auto-columns CSS property specifies the size of an implicitly-created grid column track or pattern of tracks.",
-      table: {
-        category: "Container"
-      }
+    largeLineHeight: {
+        fontFamily: "Inter, Sans",
+        lineHeight: 1.7
     },
-    gridAutoRows: {
-      type: "string",
-      description: "The grid-auto-rows CSS property specifies the size of an implicitly-created grid row track or pattern of tracks.",
-      table: {
-        category: "Container"
-      }
+    body: {
+        fontFamily: "Inter, Sans"
     },
-    gridAutoFlow: {
-      type: "string",
-      description: "The grid-auto-flow CSS property controls how the auto-placement algorithm works, specifying exactly how auto-placed items get flowed into the grid.",
-      options: ["row", "column", "dense", "row dense", "column dense"],
-      control: {
-        type: "select"
-      },
-      table: {
-        category: "Container"
-      }
+    bodyLineHeight: {
+        fontFamily: "Inter, Sans",
+        lineHeight: 1.7
     },
-    gridGap: {
-      type: "number",
-      description: "The gap CSS property sets the gaps (gutters) between rows and columns. It is a shorthand for row-gap and column-gap.",
-      table: {
-        category: "Container"
-      }
+    paragraph: {
+        fontFamily: "Inter, Sans"
     },
-    gridRowGap: {
-      type: "number",
-      description: "The row-gap CSS property sets the size of the gap (gutter) between an element's grid rows.",
-      table: {
-        category: "Container"
-      }
+    paragraphLineHeight: {
+        fontFamily: "Inter, Sans",
+        lineHeight: 1.7
     },
-    gridColumnGap: {
-      type: "number",
-      description: "The column-gap CSS property sets the size of the gap (gutter) between an element's columns.",
-      table: {
-        category: "Container"
-      }
+    small: {
+        fontFamily: "Inter, Sans"
     },
-    gridColumn: {
-      type: "string",
-      description: "The grid-column CSS shorthand property specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area.",
-      table: {
-        category: "Cell"
-      }
+    extraSmall: {
+        fontFamily: "Inter, Sans"
     },
-    gridRow: {
-      type: "string",
-      description: "The grid-row CSS shorthand property specifies a grid item\u2019s size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area.",
-      table: {
-        category: "Cell"
-      }
+    tiny: {
+        fontFamily: "Inter, Sans"
     },
-    gridArea: {
-      type: "string",
-      description: "The grid-area CSS shorthand property specifies a grid item\u2019s size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area.",
-      table: {
-        category: "Cell"
-      }
+    micro: {
+        fontFamily: "Inter, Sans"
+    },
+    subtitle: {
+        fontFamily: "Inter, Sans",
+        fontWeight: 600,
+        "text-transform": "uppercase"
     }
-  }
 };
-const cells = Array.from(
-  {
+
+
+},
+2843(__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);
+/* import */ var _styled__rspack_import_1 = __webpack_require__(7680);
+
+
+function getColumns(props) {
+    const { columns } = props;
+    return columns === "none" ? columns : `repeat(${columns || 12}, minmax(0, 1fr));`;
+}
+function getRows(props) {
+    const { rows } = props;
+    return !rows ? "initial" : rows === "none" ? rows : `repeat(${rows}, minmax(0, 1fr));`;
+}
+const Grid = _styled__rspack_import_1["default"].div`
+  display: grid;
+  grid-template-columns: ${getColumns};
+  grid-template-rows: ${getRows};
+  ${styled_system__rspack_import_0.grid};
+`;
+/* export default */ const __rspack_default_export = (Grid);
+
+
+},
+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);
+
+
+},
+4336(__unused_rspack_module, __webpack_exports__, __webpack_require__) {
+
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, {
+  ff: () => (/* binding */ ff)
+});
+
+// UNUSED EXPORTS: darken, ensureContrast, mix, rgba, lighten
+
+;// CONCATENATED MODULE: external "color"
+const external_color_namespaceObject = require("color");
+// EXTERNAL MODULE: ./src/styles/theme.ts
+var theme = __webpack_require__(5548);
+;// CONCATENATED MODULE: ./src/styles/helpers.ts
+
+
+const rgba = (c, a)=>Color(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__, {
+  fontFamilies: () => (fontFamilies)
+});
+/* 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
+};
+/* unused export default */ var __rspack_default_export = ((/* unused pure expression or super */ null && (theme)));
+
+
+},
+2993(module) {
+module.exports = require("@ledgerhq/ui-shared");
+
+},
+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 */ Grid_stories),
+  Fixed: () => (/* binding */ Fixed),
+  Default: () => (/* binding */ Default)
+});
+
+;// CONCATENATED MODULE: external "react"
+const external_react_namespaceObject = require("react");
+var external_react_default = /*#__PURE__*/__webpack_require__.n(external_react_namespaceObject);
+// 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/components/layout/Grid/index.ts
+var Grid = __webpack_require__(2843);
+// EXTERNAL MODULE: ./src/components/asorted/Text/index.tsx
+var Text = __webpack_require__(348);
+;// CONCATENATED MODULE: ./src/components/layout/Grid/Grid.stories.tsx
+
+
+
+
+
+// Just a stylable div used as a base grid element for the purpose of this story.
+const Cell = (external_styled_components_default()).div`
+  // Make the div semi-opaque to show grid composition.
+  opacity: 0.7;
+  ${external_styled_system_.color}
+  ${external_styled_system_.space}
+  ${external_styled_system_.grid}
+`;
+/* export default */ const Grid_stories = ({
+    title: "Layout/Grid",
+    component: Grid["default"],
+    argTypes: {
+        columns: {
+            type: "number",
+            description: "The number of columns set with a `repeat(N, minmax(0, 1fr))` pattern or `none` to disable.",
+            table: {
+                category: "Container",
+                defaultValue: {
+                    summary: 12
+                }
+            }
+        },
+        rows: {
+            type: "number",
+            description: "The number of rows set with a `repeat(N, minmax(0, 1fr))` pattern or `none` to disable.",
+            table: {
+                category: "Container",
+                defaultValue: {
+                    summary: "initial"
+                }
+            }
+        },
+        gridTemplateColumns: {
+            type: "string",
+            description: "The grid-template-columns CSS property defines the line names and track sizing functions of the grid columns.",
+            table: {
+                category: "Container"
+            }
+        },
+        gridTemplateRows: {
+            type: "string",
+            description: "The grid-template-rows CSS property defines the line names and track sizing functions of the grid rows.",
+            table: {
+                category: "Container"
+            }
+        },
+        gridTemplateAreas: {
+            type: "string",
+            description: "The grid-template-areas CSS property specifies named grid areas, establishing the cells in the grid and assigning them names.",
+            table: {
+                category: "Container"
+            }
+        },
+        gridAutoColumns: {
+            type: "string",
+            description: "The grid-auto-columns CSS property specifies the size of an implicitly-created grid column track or pattern of tracks.",
+            table: {
+                category: "Container"
+            }
+        },
+        gridAutoRows: {
+            type: "string",
+            description: "The grid-auto-rows CSS property specifies the size of an implicitly-created grid row track or pattern of tracks.",
+            table: {
+                category: "Container"
+            }
+        },
+        gridAutoFlow: {
+            type: "string",
+            description: "The grid-auto-flow CSS property controls how the auto-placement algorithm works, specifying exactly how auto-placed items get flowed into the grid.",
+            options: [
+                "row",
+                "column",
+                "dense",
+                "row dense",
+                "column dense"
+            ],
+            control: {
+                type: "select"
+            },
+            table: {
+                category: "Container"
+            }
+        },
+        gridGap: {
+            type: "number",
+            description: "The gap CSS property sets the gaps (gutters) between rows and columns. It is a shorthand for row-gap and column-gap.",
+            table: {
+                category: "Container"
+            }
+        },
+        gridRowGap: {
+            type: "number",
+            description: "The row-gap CSS property sets the size of the gap (gutter) between an element's grid rows.",
+            table: {
+                category: "Container"
+            }
+        },
+        gridColumnGap: {
+            type: "number",
+            description: "The column-gap CSS property sets the size of the gap (gutter) between an element's columns.",
+            table: {
+                category: "Container"
+            }
+        },
+        gridColumn: {
+            type: "string",
+            description: "The grid-column CSS shorthand property specifies a grid item's size and location within a grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area.",
+            table: {
+                category: "Cell"
+            }
+        },
+        gridRow: {
+            type: "string",
+            description: "The grid-row CSS shorthand property specifies a grid item’s size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area.",
+            table: {
+                category: "Cell"
+            }
+        },
+        gridArea: {
+            type: "string",
+            description: "The grid-area CSS shorthand property specifies a grid item’s size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area.",
+            table: {
+                category: "Cell"
+            }
+        }
+    }
+});
+const cells = Array.from({
     length: 47
-  },
-  (_, i) => {
+}, (_, i)=>{
+    // Apply some span to showoff the grid system a bit.
     const colSpan = i % 7 === 0 ? 4 : i % 5 === 0 ? 3 : i % 3 === 0 ? 2 : 0;
     const rowSpan = i % 14 === 0 ? 2 : i % 6 === 0 ? 4 : 0;
-    return /* @__PURE__ */ import_react.default.createElement(
-      Cell,
-      {
+    return /*#__PURE__*/ external_react_default().createElement(Cell, {
         key: i,
         backgroundColor: "aliceBlue",
         padding: 1,
         opacity: 1,
         gridColumn: colSpan > 0 ? `span ${colSpan}` : "initial",
         gridRow: colSpan > 0 ? `span ${rowSpan}` : "initial"
-      },
-      i + 2,
-      /* @__PURE__ */ import_react.default.createElement(
-        "div",
-        {
-          style: {
+    }, i + 2, /*#__PURE__*/ external_react_default().createElement("div", {
+        style: {
             fontSize: "10px"
-          }
-        },
-        colSpan > 0 ? `(column span ${colSpan})` : ""
-      ),
-      /* @__PURE__ */ import_react.default.createElement(
-        "div",
-        {
-          style: {
+        }
+    }, colSpan > 0 ? `(column span ${colSpan})` : ""), /*#__PURE__*/ external_react_default().createElement("div", {
+        style: {
             fontSize: "10px"
-          }
-        },
-        rowSpan > 0 ? `(row span ${rowSpan})` : ""
-      )
-    );
-  }
-);
-const DefaultTemplate = ({ gridColumn, gridRow, gridArea, ...args }) => {
-  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
-    import_Text.default,
-    {
-      style: {
-        marginBottom: "1em"
-      }
-    },
-    "A 12 columns grid using default props and containing cells with various span values."
-  ), /* @__PURE__ */ import_react.default.createElement(import_index.default, { ...args }, /* @__PURE__ */ import_react.default.createElement(
-    Cell,
-    {
-      key: "-1",
-      backgroundColor: "aliceBlue",
-      padding: 1,
-      opacity: 1,
-      gridColumn,
-      gridRow,
-      gridArea
-    },
-    "1"
-  ), cells));
+        }
+    }, rowSpan > 0 ? `(row span ${rowSpan})` : ""));
+});
+// eslint-disable-next-line
+const DefaultTemplate = ({ gridColumn, gridRow, gridArea, ...args })=>{
+    return /*#__PURE__*/ external_react_default().createElement((external_react_default()).Fragment, null, /*#__PURE__*/ external_react_default().createElement(Text["default"], {
+        style: {
+            marginBottom: "1em"
+        }
+    }, "A 12 columns grid using default props and containing cells with various span values."), /*#__PURE__*/ external_react_default().createElement(Grid["default"], args, /*#__PURE__*/ external_react_default().createElement(Cell, {
+        key: "-1",
+        backgroundColor: "aliceBlue",
+        padding: 1,
+        opacity: 1,
+        gridColumn: gridColumn,
+        gridRow: gridRow,
+        gridArea: gridArea
+    }, "1"), cells));
 };
 const Default = DefaultTemplate;
+// @ts-expect-error FIXME
 Default.args = {
-  gridGap: 1
+    gridGap: 1
 };
-const FixedTemplate = ({ gridColumn, gridRow, gridArea, ...args }) => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
-  import_Text.default,
-  {
-    style: {
-      marginBottom: "1em"
-    }
-  },
-  "This example with fixed cells is taken from the",
-  " ",
-  /* @__PURE__ */ import_react.default.createElement(
-    "a",
-    {
-      href: "https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout",
-      style: {
-        cursor: "pointer"
-      }
-    },
-    "MDN"
-  ),
-  " ",
-  "documentation."
-), /* @__PURE__ */ import_react.default.createElement(import_index.default, { ...args }, /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
-  Cell,
-  {
-    color: "white",
-    padding: "2",
-    gridColumn,
-    gridRow,
-    gridArea,
-    backgroundColor: "red"
-  },
-  "Control me using ",
-  `"Cell"`,
-  " props."
-), /* @__PURE__ */ import_react.default.createElement(Cell, { gridColumn: "2 / 4", gridRow: "1 / 3", backgroundColor: "blue" }), /* @__PURE__ */ import_react.default.createElement(Cell, { gridColumn: "1", gridRow: "2 / 5", backgroundColor: "green" }), /* @__PURE__ */ import_react.default.createElement(Cell, { gridColumn: "3", gridRow: "3", backgroundColor: "purple" }), /* @__PURE__ */ import_react.default.createElement(Cell, { gridColumn: "2", gridRow: "4", backgroundColor: "teal" }), /* @__PURE__ */ import_react.default.createElement(Cell, { gridColumn: "3", gridRow: "4", backgroundColor: "brown" }))));
+// eslint-disable-next-line
+const FixedTemplate = ({ gridColumn, gridRow, gridArea, ...args })=>/*#__PURE__*/ external_react_default().createElement((external_react_default()).Fragment, null, /*#__PURE__*/ external_react_default().createElement(Text["default"], {
+        style: {
+            marginBottom: "1em"
+        }
+    }, "This example with fixed cells is taken from the", " ", /*#__PURE__*/ external_react_default().createElement("a", {
+        href: "https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout",
+        style: {
+            cursor: "pointer"
+        }
+    }, "MDN"), " ", "documentation."), /*#__PURE__*/ external_react_default().createElement(Grid["default"], args, /*#__PURE__*/ external_react_default().createElement((external_react_default()).Fragment, null, /*#__PURE__*/ external_react_default().createElement(Cell, {
+        color: "white",
+        padding: "2",
+        gridColumn: gridColumn,
+        gridRow: gridRow,
+        gridArea: gridArea,
+        backgroundColor: "red"
+    }, "Control me using ", `"Cell"`, " props."), /*#__PURE__*/ external_react_default().createElement(Cell, {
+        gridColumn: "2 / 4",
+        gridRow: "1 / 3",
+        backgroundColor: "blue"
+    }), /*#__PURE__*/ external_react_default().createElement(Cell, {
+        gridColumn: "1",
+        gridRow: "2 / 5",
+        backgroundColor: "green"
+    }), /*#__PURE__*/ external_react_default().createElement(Cell, {
+        gridColumn: "3",
+        gridRow: "3",
+        backgroundColor: "purple"
+    }), /*#__PURE__*/ external_react_default().createElement(Cell, {
+        gridColumn: "2",
+        gridRow: "4",
+        backgroundColor: "teal"
+    }), /*#__PURE__*/ external_react_default().createElement(Cell, {
+        gridColumn: "3",
+        gridRow: "4",
+        backgroundColor: "brown"
+    }))));
 const Fixed = FixedTemplate;
+// @ts-expect-error FIXME
 Fixed.args = {
-  columns: 3,
-  rows: void 0,
-  gridAutoRows: "100px",
-  gridGap: 1,
-  gridTemplateColumns: void 0,
-  gridTemplateRows: void 0,
-  gridTemplateAreas: void 0,
-  gridRowGap: void 0,
-  gridColumnGap: void 0,
-  gridColumn: "1/3",
-  gridRow: "1",
-  gridArea: void 0,
-  gridAutoFlow: void 0,
-  gridAutoColumns: void 0
+    columns: 3,
+    rows: undefined,
+    gridAutoRows: "100px",
+    gridGap: 1,
+    gridTemplateColumns: undefined,
+    gridTemplateRows: undefined,
+    gridTemplateAreas: undefined,
+    gridRowGap: undefined,
+    gridColumnGap: undefined,
+    gridColumn: "1/3",
+    gridRow: "1",
+    gridArea: undefined,
+    gridAutoFlow: undefined,
+    gridAutoColumns: undefined
 };
-//# sourceMappingURL=Grid.stories.js.map
+
+})();
+
+module.exports = __webpack_exports__;
+})()
+;
+//# sourceMappingURL=Grid.stories.js.map