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

package/lib/cjs/components/Table/Table.stories.js

@@ -1,47 +1,1486 @@
+(() => {
 "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 __webpack_modules__ = ({
+3957(__unused_rspack_module, __webpack_exports__, __webpack_require__) {
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+  icon: () => (iconColumn),
+  text: () => (textColumn)
+});
+/* 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 _asorted_Icon__rspack_import_2 = __webpack_require__(1215);
+/* import */ var _layout_Flex__rspack_import_3 = __webpack_require__(3696);
+/* import */ var _asorted_Text__rspack_import_1 = __webpack_require__(348);
+
+
+
+
+/**
+ * A column which contains a single icon and that has a fixed width.
+ */ function iconColumn({ props, header, layout }) {
+    return {
+        layout: layout || "min-content",
+        render: ({ elt })=>{
+            const { name, weight, ...textProps } = props(elt);
+            return /*#__PURE__*/ react__rspack_import_0_default().createElement(_asorted_Text__rspack_import_1["default"], {
+                ...textProps,
+                style: {
+                    display: "flex",
+                    alignItems: "center"
+                }
+            }, /*#__PURE__*/ react__rspack_import_0_default().createElement(_asorted_Icon__rspack_import_2["default"], {
+                name: name,
+                weight: weight
+            }));
+        },
+        header
+    };
+}
+
+/**
+ * A column that contains a title and a subtitle.
+ */ function textColumn({ title, subtitle, header, layout, titleProps, subtitleProps }) {
+    return {
+        layout: layout || "auto",
+        render: ({ elt })=>/*#__PURE__*/ react__rspack_import_0_default().createElement(_layout_Flex__rspack_import_3["default"], {
+                flexDirection: "column",
+                justifyContent: "center"
+            }, title && /*#__PURE__*/ react__rspack_import_0_default().createElement(_asorted_Text__rspack_import_1["default"], {
+                fontWeight: "medium",
+                variant: "body",
+                textOverflow: "ellipsis",
+                overflow: "hidden",
+                color: "neutral.c100",
+                ...titleProps && titleProps(elt) || {}
+            }, title(elt)), subtitle && /*#__PURE__*/ react__rspack_import_0_default().createElement(_asorted_Text__rspack_import_1["default"], {
+                fontWeight: "medium",
+                variant: "paragraph",
+                textOverflow: "ellipsis",
+                overflow: "hidden",
+                color: "neutral.c80",
+                ...subtitleProps && subtitleProps(elt) || {}
+            }, subtitle(elt))),
+        header
+    };
+}
+
+
+
+},
+2352(__unused_rspack_module, __webpack_exports__, __webpack_require__) {
+__webpack_require__.d(__webpack_exports__, {
+  Rows: () => (Rows),
+  "default": () => (__rspack_default_export)
+});
+/* import */ var react__rspack_import_0 = __webpack_require__(2015);
+/* import */ var react__rspack_import_0_default = /*#__PURE__*/__webpack_require__.n(react__rspack_import_0);
+/* import */ var styled_components__rspack_import_1 = __webpack_require__(2770);
+/* import */ var styled_components__rspack_import_1_default = /*#__PURE__*/__webpack_require__.n(styled_components__rspack_import_1);
+/* import */ var styled_system__rspack_import_2 = __webpack_require__(9351);
+/* import */ var styled_system__rspack_import_2_default = /*#__PURE__*/__webpack_require__.n(styled_system__rspack_import_2);
+/* import */ var _layout_Grid__rspack_import_3 = __webpack_require__(2843);
+/* import */ var _layout_Flex__rspack_import_4 = __webpack_require__(3696);
+/* import */ var _Columns__rspack_import_5 = __webpack_require__(3957);
+
+
+
+
+
+
+const Container = styled_components__rspack_import_1_default()((0,_layout_Grid__rspack_import_3["default"]))`
+  ${styled_system__rspack_import_2.border}
+`;
+const ExtraRowContainer = styled_components__rspack_import_1_default().div.attrs({
+    gridColumn: "1 / -1"
+})`
+  ${styled_system__rspack_import_2.gridColumn}
+`;
+const RowContainer = styled_components__rspack_import_1_default()((0,_layout_Flex__rspack_import_4["default"]))`
+  display: contents;
+`;
+function RowsComponent({ data, columns, render, extraRender, renderRow }) {
+    return /*#__PURE__*/ react__rspack_import_0_default().createElement((react__rspack_import_0_default().Fragment), {
+        key: "row-component"
+    }, data.map((elt, rowIndex)=>{
+        const row = /*#__PURE__*/ react__rspack_import_0_default().createElement((react__rspack_import_0_default().Fragment), null, columns.map((column, columnIndex)=>/*#__PURE__*/ react__rspack_import_0_default().createElement((react__rspack_import_0_default().Fragment), {
+                key: `row-component-column-${rowIndex}${columnIndex}`
+            }, render ? render({
+                column,
+                rowIndex,
+                columnIndex,
+                children: column.render({
+                    elt,
+                    rowIndex,
+                    columnIndex
+                })
+            }) : column.render({
+                elt,
+                rowIndex,
+                columnIndex
+            }))), extraRender && extraRender(elt, rowIndex) || null);
+        if (renderRow) {
+            return renderRow(rowIndex, row);
+        } else {
+            return /*#__PURE__*/ react__rspack_import_0_default().createElement((react__rspack_import_0_default().Fragment), {
+                key: `row-component-row-${rowIndex}`
+            }, row);
+        }
+    }));
+}
+const Rows = /*#__PURE__*/ (0,react__rspack_import_0.memo)(RowsComponent);
+function Table({ data, columns, withHeaders, extraRender, renderRow, ...containerProps }) {
+    const gridTemplateColumns = (0,react__rspack_import_0.useMemo)(()=>columns.reduce((acc, col)=>`${acc} ${col.layout || "auto"}`, ""), [
+        columns
+    ]);
+    const headers = (0,react__rspack_import_0.useMemo)(()=>withHeaders ? columns.reduce((acc, col, index)=>[
+                ...acc,
+                /*#__PURE__*/ react__rspack_import_0_default().createElement((react__rspack_import_0_default().Fragment), {
+                    key: `header-col-${index}`
+                }, col.header ? col.header() : /*#__PURE__*/ react__rspack_import_0_default().createElement("div", null))
+            ], []) : null, [
+        withHeaders,
+        columns
+    ]);
+    return /*#__PURE__*/ react__rspack_import_0_default().createElement(Container, {
+        gridTemplateColumns: gridTemplateColumns,
+        gridAutoRows: "auto",
+        columns: "none",
+        alignItems: "center",
+        ...containerProps
+    }, headers, /*#__PURE__*/ react__rspack_import_0_default().createElement(Rows, {
+        data: data,
+        columns: columns,
+        extraRender: extraRender,
+        renderRow: renderRow
+    }));
+}
+Table.Columns = _Columns__rspack_import_5;
+Table.ExtraRowContainer = ExtraRowContainer;
+Table.RowContainer = RowContainer;
+const memoTable = /*#__PURE__*/ (0,react__rspack_import_0.memo)(Table);
+memoTable.Columns = _Columns__rspack_import_5;
+memoTable.RowContainer = RowContainer;
+memoTable.ExtraRowContainer = ExtraRowContainer;
+/* export default */ const __rspack_default_export = (memoTable);
+
+
+},
+3105(__unused_rspack_module, __webpack_exports__, __webpack_require__) {
+__webpack_require__.d(__webpack_exports__, {
+  accounts: () => (accounts),
+  balance: () => (balance)
+});
+/* import */ var react__rspack_import_0 = __webpack_require__(2015);
+/* import */ var react__rspack_import_0_default = /*#__PURE__*/__webpack_require__.n(react__rspack_import_0);
+/* import */ var styled_components__rspack_import_1 = __webpack_require__(2770);
+/* import */ var styled_components__rspack_import_1_default = /*#__PURE__*/__webpack_require__.n(styled_components__rspack_import_1);
+/* import */ var _asorted_Text__rspack_import_3 = __webpack_require__(348);
+/* import */ var _index__rspack_import_2 = __webpack_require__(2352);
+
+
+
+
+const { Columns } = _index__rspack_import_2["default"];
+function Header({ children }) {
+    const theme = (0,styled_components__rspack_import_1.useTheme)();
+    return /*#__PURE__*/ react__rspack_import_0_default().createElement(_asorted_Text__rspack_import_3["default"], {
+        fontWeight: "semiBold",
+        variant: "paragraph",
+        style: {
+            borderBottom: `1px solid ${theme.colors.neutral.c40}`
+        },
+        mx: -4,
+        px: 4,
+        pb: 8
+    }, children);
+}
+const balance = {
+    data: [
+        {
+            currency: "Ethereum Classic",
+            amount: 128.26484,
+            counterValue: 53.29,
+            address: "0x32Be343B94f860124dC4fEe278FDCBD38C102D88",
+            evolution: 0.1,
+            starred: false
+        },
+        {
+            currency: "Ethereum",
+            amount: 1.23,
+            counterValue: 3029.29,
+            address: "0xa910f92acdaf488fa6ef02174fb86208ad7722ba",
+            evolution: 3.0,
+            starred: true
+        },
+        {
+            currency: "Bitcoin",
+            amount: 0.003,
+            counterValue: 1920.23,
+            address: "1F1tAaz5x1HUXrCNLbtMDqcw6o5GNn4xqX",
+            evolution: -2.1,
+            starred: true
+        },
+        {
+            currency: "Dai",
+            amount: 128,
+            counterValue: 128,
+            address: "0x380389E04f7671AB849baF10bd89C75C3bf99cbB",
+            evolution: 0.2,
+            starred: false
+        }
+    ],
+    columns: [
+        Columns.text({
+            header: ()=>/*#__PURE__*/ react__rspack_import_0_default().createElement(Header, null, "Currency"),
+            title: (elt)=>elt.currency
+        }),
+        Columns.text({
+            header: ()=>/*#__PURE__*/ react__rspack_import_0_default().createElement(Header, null, "Amount"),
+            title: (elt)=>elt.amount,
+            subtitle: (elt)=>elt.counterValue
+        }),
+        Columns.text({
+            header: ()=>/*#__PURE__*/ react__rspack_import_0_default().createElement(Header, null, "Address"),
+            subtitle: (elt)=>elt.address
+        }),
+        Columns.text({
+            header: ()=>/*#__PURE__*/ react__rspack_import_0_default().createElement(Header, null, "Evolution"),
+            subtitle: (elt)=>(elt.evolution > 0 ? "+" : "") + elt.evolution,
+            subtitleProps: (elt)=>({
+                    color: elt.evolution < 0 ? "error.c50" : "success.c50"
+                })
+        }),
+        Columns.icon({
+            header: ()=>/*#__PURE__*/ react__rspack_import_0_default().createElement(Header, null, " "),
+            props: (elt)=>({
+                    name: "StarSolid",
+                    color: elt.starred ? "neutral.c100" : "neutral.c70"
+                })
+        })
+    ]
 };
-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 });
+const accounts = {
+    data: [
+        {
+            name: "Bitcoin 1",
+            currency: {
+                name: "Bitcoin",
+                abbrev: "BTC"
+            },
+            synchronized: false,
+            amount: 0.304,
+            evolution: 1.3,
+            starred: false
+        },
+        {
+            name: "Bitcoin 2",
+            currency: {
+                name: "Bitcoin",
+                abbrev: "BTC"
+            },
+            synchronized: true,
+            amount: 0.409,
+            evolution: 1.1,
+            starred: false
+        },
+        {
+            name: "Bitcoin 3",
+            currency: {
+                name: "Bitcoin",
+                abbrev: "BTC"
+            },
+            synchronized: true,
+            amount: 2.304,
+            evolution: -1.3,
+            starred: true
+        },
+        {
+            name: "Ethereum 1",
+            currency: {
+                name: "Ethereum",
+                abbrev: "ETH"
+            },
+            synchronized: true,
+            amount: 1.23,
+            evolution: 4,
+            starred: true,
+            subAccounts: [
+                {
+                    name: "Tether",
+                    currency: {
+                        name: "Tether",
+                        abbrev: "USDT"
+                    },
+                    synchronized: false,
+                    amount: 0.304,
+                    evolution: 1.3,
+                    starred: false
+                },
+                {
+                    name: "Tether 2",
+                    currency: {
+                        name: "Tether",
+                        abbrev: "USDT"
+                    },
+                    synchronized: false,
+                    amount: 0.904,
+                    evolution: 8.3,
+                    starred: true
+                }
+            ]
+        },
+        {
+            name: "Ethereum 2",
+            currency: {
+                name: "Ethereum",
+                abbrev: "ETH"
+            },
+            synchronized: false,
+            amount: 0.23,
+            evolution: -3,
+            starred: false
+        }
+    ],
+    columns: [
+        {
+            layout: "64px",
+            render: ({ elt })=>elt.currency.abbrev === "BTC" ? svgBtc : elt.currency.abbrev === "ETH" ? svgEth : svgUsdt
+        },
+        Columns.text({
+            layout: "2fr",
+            title: (elt)=>elt.name,
+            subtitle: (elt)=>elt.currency.name
+        }),
+        Columns.icon({
+            props: (elt)=>({
+                    name: elt.synchronized ? "CircledCheck" : "Clock",
+                    color: elt.synchronized ? "success.c50" : "neutral.c80"
+                })
+        }),
+        Columns.text({
+            layout: "1fr",
+            subtitle: (elt)=>elt.currency.abbrev
+        }),
+        Columns.text({
+            layout: "1fr",
+            title: (elt)=>elt.amount
+        }),
+        Columns.text({
+            layout: "1fr",
+            subtitle: (elt)=>(elt.evolution > 0 ? "+" : "") + elt.evolution,
+            subtitleProps: (elt)=>({
+                    color: elt.evolution < 0 ? "error.c50" : "success.c50"
+                })
+        }),
+        Columns.icon({
+            props: (elt)=>({
+                    name: "StarSolid",
+                    color: elt.starred ? "neutral.c100" : "neutral.c70"
+                })
+        })
+    ]
+};
+const svgBtc = /*#__PURE__*/ react__rspack_import_0_default().createElement("svg", {
+    width: "32",
+    height: "32",
+    viewBox: "0 0 32 32",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+}, /*#__PURE__*/ react__rspack_import_0_default().createElement("path", {
+    d: "M0 16C0 7.16344 7.16344 0 16 0C24.8366 0 32 7.16344 32 16C32 24.8366 24.8366 32 16 32C7.16344 32 0 24.8366 0 16Z",
+    fill: "#F7931A"
+}), /*#__PURE__*/ react__rspack_import_0_default().createElement("path", {
+    d: "M21.8917 14.3672C22.154 12.616 20.8198 11.6745 18.9968 11.0462L19.5883 8.67348L18.1446 8.31423L17.5682 10.6243C17.1889 10.529 16.7995 10.4405 16.4111 10.3519L16.9917 8.02683L15.548 7.66675L14.9565 10.0386C14.6424 9.96678 14.3333 9.8966 14.0342 9.82141L14.0358 9.81389L12.0441 9.31679L11.6598 10.8591C11.6598 10.8591 12.7317 11.1047 12.7091 11.1197C13.2939 11.2659 13.3992 11.6527 13.3817 11.9602L12.7083 14.6629C12.7484 14.6729 12.8002 14.688 12.8587 14.7105L12.7058 14.6729L11.7617 18.4593C11.6899 18.6364 11.5086 18.9029 11.0992 18.8018C11.1142 18.8227 10.0498 18.5403 10.0498 18.5403L9.33301 20.1929L11.2128 20.6616C11.562 20.7493 11.9046 20.8412 12.2413 20.9272L11.6439 23.3267L13.0867 23.6859L13.6783 21.3132C14.0726 21.4193 14.4552 21.5179 14.8295 21.6115L14.2397 23.9742L15.6834 24.3334L16.2807 21.939C18.7437 22.4052 20.5951 22.2172 21.3745 19.9898C22.0028 18.1969 21.3436 17.1618 20.0478 16.4876C20.9919 16.2704 21.7021 15.6496 21.8917 14.3672ZM18.5916 18.994C18.1463 20.7877 15.1261 19.8177 14.147 19.5746L14.9406 16.3957C15.9198 16.6405 19.0586 17.1242 18.5916 18.994ZM19.0386 14.3413C18.6317 15.9729 16.1186 15.1433 15.3041 14.9403L16.0226 12.0579C16.8371 12.261 19.463 12.6394 19.0386 14.3413Z",
+    fill: "white"
+}));
+const svgEth = /*#__PURE__*/ react__rspack_import_0_default().createElement("svg", {
+    width: "32",
+    height: "32",
+    viewBox: "0 0 32 32",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+}, /*#__PURE__*/ react__rspack_import_0_default().createElement("path", {
+    d: "M0 16C0 7.16344 7.16344 0 16 0C24.8366 0 32 7.16344 32 16C32 24.8366 24.8366 32 16 32C7.16344 32 0 24.8366 0 16Z",
+    fill: "#0EBDCD"
+}), /*#__PURE__*/ react__rspack_import_0_default().createElement("path", {
+    d: "M21.2066 15.5834L15.9992 7.66669L10.7916 15.5834L15.9992 18.6067L21.2066 15.5834Z",
+    fill: "white"
+}), /*#__PURE__*/ react__rspack_import_0_default().createElement("path", {
+    d: "M15.9992 24.3333L21.21 17.1241L15.9992 20.147L10.7916 17.1241L15.9992 24.3333Z",
+    fill: "white"
+}));
+const svgUsdt = /*#__PURE__*/ react__rspack_import_0_default().createElement("svg", {
+    width: "32",
+    height: "32",
+    viewBox: "0 0 32 32",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+}, /*#__PURE__*/ react__rspack_import_0_default().createElement("path", {
+    d: "M0 16C0 7.16344 7.16344 0 16 0C24.8366 0 32 7.16344 32 16C32 24.8366 24.8366 32 16 32C7.16344 32 0 24.8366 0 16Z",
+    fill: "#00A478"
+}), /*#__PURE__*/ react__rspack_import_0_default().createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M17.7205 16.6265V16.6246C17.6175 16.6321 17.0863 16.6639 15.9013 16.6639C14.9551 16.6639 14.289 16.6358 14.0548 16.6246V16.6274C10.4125 16.4672 7.69393 15.833 7.69393 15.0742C7.69393 14.3163 10.4125 13.6821 14.0548 13.5191V15.996C14.2928 16.0128 14.9748 16.0531 15.9172 16.0531C17.0479 16.0531 17.6147 16.0063 17.7205 15.9969V13.521C21.3553 13.683 24.0674 14.3172 24.0674 15.0742C24.0674 15.833 21.3553 16.4653 17.7205 16.6265ZM17.7205 13.2633V11.0469H22.7924V7.66687H8.98297V11.0469H14.0548V13.2624C9.93289 13.4516 6.83301 14.2685 6.83301 15.2465C6.83301 16.2246 9.93289 17.0405 14.0548 17.2307V24.3335H17.7205V17.2288C21.8359 17.0396 24.9283 16.2236 24.9283 15.2465C24.9283 14.2695 21.8359 13.4535 17.7205 13.2633Z",
+    fill: "white"
+}));
+
+
+},
+1215(__unused_rspack_module, __webpack_exports__, __webpack_require__) {
+__webpack_require__.d(__webpack_exports__, {
+  "default": () => (__rspack_default_export)
+});
+/* import */ var _ledgerhq_icons_ui_reactLegacy__rspack_import_0 = __webpack_require__(9979);
+/* import */ var _ledgerhq_icons_ui_reactLegacy__rspack_import_0_default = /*#__PURE__*/__webpack_require__.n(_ledgerhq_icons_ui_reactLegacy__rspack_import_0);
+/* import */ var react__rspack_import_1 = __webpack_require__(2015);
+/* import */ var react__rspack_import_1_default = /*#__PURE__*/__webpack_require__.n(react__rspack_import_1);
+
+
+const iconNames = Array.from(Object.keys(_ledgerhq_icons_ui_reactLegacy__rspack_import_0).reduce((set, rawKey)=>{
+    const key = rawKey.replace(/(.+)(Medium)+$/g, "$1");
+    if (!set.has(key)) set.add(key);
+    return set;
+}, new Set()));
+const Icon = ({ name, size = 16, color = "currentColor", weight = "Medium" })=>{
+    const maybeIconName = `${name}${weight}`;
+    if (maybeIconName in _ledgerhq_icons_ui_reactLegacy__rspack_import_0) {
+        // @ts-expect-error FIXME I don't know how to make you happy ts
+        const Component = _ledgerhq_icons_ui_reactLegacy__rspack_import_0[maybeIconName];
+        return /*#__PURE__*/ react__rspack_import_1_default().createElement(Component, {
+            size: size,
+            color: color
+        });
+    }
+    return null;
+};
+/* export default */ const __rspack_default_export = (Icon);
+
+
+},
+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)" : ""}
   }
-  return to;
+`;
+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"
+    }
 };
-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 Table_stories_exports = {};
-__export(Table_stories_exports, {
-  CustomRows: () => CustomRows,
-  Default: () => Default,
-  Nested: () => Nested,
-  Styled: () => Styled,
-  default: () => Table_stories_default
+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);
+
+
+},
+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];
+    }
 });
-module.exports = __toCommonJS(Table_stories_exports);
-var import_react = __toESM(require("react"));
-var import_styled_components = __toESM(require("styled-components"));
-var import_Button = __toESM(require("../cta/Button"));
-var import_Flex = __toESM(require("../layout/Flex"));
-var import_Text = __toESM(require("../asorted/Text"));
-var import_index = __toESM(require("./index"));
-var import_stories = require("./stories.helper");
+/* export default */ const __rspack_default_export = (proxyStyled);
+
+
+},
+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__, {
+  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
+};
+/* unused export default */ var __rspack_default_export = ((/* unused pure expression or super */ null && (theme)));
+
+
+},
+9979(module) {
+module.exports = require("@ledgerhq/icons-ui/reactLegacy");
+
+},
+2993(module) {
+module.exports = require("@ledgerhq/ui-shared");
+
+},
+2015(module) {
+module.exports = require("react");
+
+},
+2770(module) {
+module.exports = require("styled-components");
+
+},
+9351(module) {
+module.exports = require("styled-system");
+
+},
+
+});
+// The module cache
+var __webpack_module_cache__ = {};
+
+// The require function
+function __webpack_require__(moduleId) {
+
+// Check if module is in cache
+var cachedModule = __webpack_module_cache__[moduleId];
+if (cachedModule !== undefined) {
+return cachedModule.exports;
+}
+// Create a new module (and put it into the cache)
+var module = (__webpack_module_cache__[moduleId] = {
+exports: {}
+});
+// Execute the module function
+__webpack_modules__[moduleId](module, module.exports, __webpack_require__);
+
+// Return the exports of the module
+return module.exports;
+
+}
+
+// webpack/runtime/compat_get_default_export
+(() => {
+// getDefaultExport function for compatibility with non-ESM modules
+__webpack_require__.n = (module) => {
+	var getter = module && module.__esModule ?
+		() => (module['default']) :
+		() => (module);
+	__webpack_require__.d(getter, { a: getter });
+	return getter;
+};
+
+})();
+// webpack/runtime/define_property_getters
+(() => {
+__webpack_require__.d = (exports, definition) => {
+	for(var key in definition) {
+        if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
+            Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
+        }
+    }
+};
+})();
+// webpack/runtime/has_own_property
+(() => {
+__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
+})();
+// webpack/runtime/make_namespace_object
+(() => {
+// define __esModule on exports
+__webpack_require__.r = (exports) => {
+	if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+		Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+	}
+	Object.defineProperty(exports, '__esModule', { value: true });
+};
+})();
+var __webpack_exports__ = {};
+// This entry needs to be wrapped in an IIFE because it needs to be isolated against other modules in the chunk.
+(() => {
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+  CustomRows: () => (CustomRows),
+  Default: () => (Default),
+  Nested: () => (Nested),
+  Styled: () => (Styled),
+  "default": () => (__rspack_default_export)
+});
+/* import */ var react__rspack_import_0 = __webpack_require__(2015);
+/* import */ var react__rspack_import_0_default = /*#__PURE__*/__webpack_require__.n(react__rspack_import_0);
+/* import */ var styled_components__rspack_import_1 = __webpack_require__(2770);
+/* import */ var styled_components__rspack_import_1_default = /*#__PURE__*/__webpack_require__.n(styled_components__rspack_import_1);
+/* import */ var _cta_Button__rspack_import_6 = __webpack_require__(1133);
+/* import */ var _layout_Flex__rspack_import_3 = __webpack_require__(3696);
+/* import */ var _asorted_Text__rspack_import_2 = __webpack_require__(348);
+/* import */ var _index__rspack_import_4 = __webpack_require__(2352);
+/* import */ var _stories_helper__rspack_import_5 = __webpack_require__(3105);
+
+
+
+
+
+
+
 const description = `
 ### A flexible table component.
 
@@ -211,21 +1650,35 @@ function MinimalExample(args) {
 };
 \`\`\`
 `;
-const data = new Array(12).fill(0).map((_, idx) => ({
-  value: idx
-}));
+/* Default minimal example */ // An array of 12 items - each mapped to a row in the table.
+const data = new Array(12).fill(0).map((_, idx)=>({
+        value: idx
+    }));
+// We have 4 columns here.
 const NB_OF_COLUMNS = 4;
-const columns = Array(NB_OF_COLUMNS).fill(0).map((_, idx) => ({
-  // The header will be a letter based on the column (A / B / C / D).
-  // 65 is the char code for the letter 'A'.
-  header: () => /* @__PURE__ */ import_react.default.createElement(import_Text.default, { variant: "h5" }, String.fromCharCode(65 + idx)),
-  // Each cell will contain an incremental number as well as the cell position.
-  render: ({ elt, rowIndex, columnIndex }) => /* @__PURE__ */ import_react.default.createElement(import_Flex.default, { alignItems: "baseline" }, /* @__PURE__ */ import_react.default.createElement(import_Text.default, { mr: 4 }, elt.value * NB_OF_COLUMNS + columnIndex), /* @__PURE__ */ import_react.default.createElement(import_Text.default, { variant: "extraSmall" }, "(", rowIndex, " / ", columnIndex, ")"))
-}));
-const Default = (args) => {
-  return /* @__PURE__ */ import_react.default.createElement(import_index.default, { ...args, data, columns });
+const columns = Array(NB_OF_COLUMNS).fill(0).map((_, idx)=>({
+        // The header will be a letter based on the column (A / B / C / D).
+        // 65 is the char code for the letter 'A'.
+        header: ()=>/*#__PURE__*/ react__rspack_import_0_default().createElement(_asorted_Text__rspack_import_2["default"], {
+                variant: "h5"
+            }, String.fromCharCode(65 + idx)),
+        // Each cell will contain an incremental number as well as the cell position.
+        render: ({ elt, rowIndex, columnIndex })=>/*#__PURE__*/ react__rspack_import_0_default().createElement(_layout_Flex__rspack_import_3["default"], {
+                alignItems: "baseline"
+            }, /*#__PURE__*/ react__rspack_import_0_default().createElement(_asorted_Text__rspack_import_2["default"], {
+                mr: 4
+            }, elt.value * NB_OF_COLUMNS + columnIndex), /*#__PURE__*/ react__rspack_import_0_default().createElement(_asorted_Text__rspack_import_2["default"], {
+                variant: "extraSmall"
+            }, "(", rowIndex, " / ", columnIndex, ")"))
+    }));
+const Default = (args)=>{
+    return /*#__PURE__*/ react__rspack_import_0_default().createElement(_index__rspack_import_4["default"], {
+        ...args,
+        data: data,
+        columns: columns
+    });
 };
-const styledExampleDescription = `
+/* Styled example */ const styledExampleDescription = `
 A more advanced example that applies some styles to the table and uses predefined columns.
 
 Additional props passed to the Table are applied to the outer container which is
@@ -234,29 +1687,26 @@ an instance of the \`Grid\` component.
 In this example we are taking advantage of that by using the \`p\`, \`gridRowGap\`, \`gridColumnGap\`,
 \`borderRadius\` and \`backgroundColor\` props to style the table container.
 `;
-const Styled = (args) => {
-  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
-    import_index.default,
-    {
-      ...args,
-      data: import_stories.balance.data,
-      columns: import_stories.balance.columns,
-      p: 8,
-      gridRowGap: 8,
-      gridColumnGap: 6,
-      borderRadius: 8,
-      backgroundColor: "neutral.c20"
-    }
-  ));
+const Styled = (args)=>{
+    return /*#__PURE__*/ react__rspack_import_0_default().createElement((react__rspack_import_0_default().Fragment), null, /*#__PURE__*/ react__rspack_import_0_default().createElement(_index__rspack_import_4["default"], {
+        ...args,
+        data: _stories_helper__rspack_import_5.balance.data,
+        columns: _stories_helper__rspack_import_5.balance.columns,
+        p: 8,
+        gridRowGap: 8,
+        gridColumnGap: 6,
+        borderRadius: 8,
+        backgroundColor: "neutral.c20"
+    }));
 };
 Styled.parameters = {
-  docs: {
-    description: {
-      story: styledExampleDescription
+    docs: {
+        description: {
+            story: styledExampleDescription
+        }
     }
-  }
 };
-const nestedExampleDescription = `
+/* Nested example */ const nestedExampleDescription = `
 A complex example that takes in entry nested data and conditonally adds a custom additional row to the table.
 
 The data has the following shape:
@@ -285,10 +1735,10 @@ Otherwise be careful not to disturb the grid layout order.
 <Table
   /* ... */
   extraRender={(account) =>
-    // If there are sub accounts\u2026
+    // If there are sub accounts…
     account.subAccounts &&
     account.subAccounts.length > 0 && (
-      // \u2026render the extra row.
+      // …render the extra row.
       // ExtraRowContainer is a component that will span to the whole row.
       <Table.ExtraRowContainer>{/* stuff */}</Table.ExtraRowContainer>
     )
@@ -297,58 +1747,58 @@ Otherwise be careful not to disturb the grid layout order.
 \`\`\`
 
 `;
-function SubAccounts({
-  account,
-  columns: columns2
-}) {
-  const theme = (0, import_styled_components.useTheme)();
-  const [expanded, setExpanded] = (0, import_react.useState)(false);
-  const { subAccounts } = account;
-  if (!subAccounts)
-    return null;
-  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, expanded && /* @__PURE__ */ import_react.default.createElement(
-    import_index.Rows,
-    {
-      data: subAccounts,
-      columns: columns2,
-      render: ({ columnIndex, children }) => columnIndex === 0 ? /* @__PURE__ */ import_react.default.createElement(import_Flex.default, { alignItems: "center", justifyContent: "flex-end" }, /* @__PURE__ */ import_react.default.createElement(
-        "div",
-        {
-          style: {
-            width: "1px",
-            height: "2em",
-            marginRight: `${theme.space[6]}px`,
-            borderLeft: `1px solid ${theme.colors.neutral.c40}`
-          }
-        }
-      ), children) : children
-    }
-  ), /* @__PURE__ */ import_react.default.createElement(import_index.default.ExtraRowContainer, null, /* @__PURE__ */ import_react.default.createElement(import_Flex.default, { justifyContent: "center", mt: -8 }, /* @__PURE__ */ import_react.default.createElement(import_Button.default.Expand, { onToggle: setExpanded }, /* @__PURE__ */ import_react.default.createElement(import_Text.default, { variant: "paragraph" }, expanded ? "Hide" : "Show", " tokens (", subAccounts.length, ")")))));
+function SubAccounts({ account, columns }) {
+    const theme = (0,styled_components__rspack_import_1.useTheme)();
+    const [expanded, setExpanded] = (0,react__rspack_import_0.useState)(false);
+    const { subAccounts } = account;
+    if (!subAccounts) return null;
+    return /*#__PURE__*/ react__rspack_import_0_default().createElement((react__rspack_import_0_default().Fragment), null, expanded && /*#__PURE__*/ react__rspack_import_0_default().createElement(_index__rspack_import_4.Rows, {
+        data: subAccounts,
+        columns: columns,
+        render: ({ columnIndex, children })=>columnIndex === 0 ? /*#__PURE__*/ react__rspack_import_0_default().createElement(_layout_Flex__rspack_import_3["default"], {
+                alignItems: "center",
+                justifyContent: "flex-end"
+            }, /*#__PURE__*/ react__rspack_import_0_default().createElement("div", {
+                style: {
+                    width: "1px",
+                    height: "2em",
+                    marginRight: `${theme.space[6]}px`,
+                    borderLeft: `1px solid ${theme.colors.neutral.c40}`
+                }
+            }), children) : children
+    }), /*#__PURE__*/ react__rspack_import_0_default().createElement(_index__rspack_import_4["default"].ExtraRowContainer, null, /*#__PURE__*/ react__rspack_import_0_default().createElement(_layout_Flex__rspack_import_3["default"], {
+        justifyContent: "center",
+        mt: -8
+    }, /*#__PURE__*/ react__rspack_import_0_default().createElement(_cta_Button__rspack_import_6["default"].Expand, {
+        onToggle: setExpanded
+    }, /*#__PURE__*/ react__rspack_import_0_default().createElement(_asorted_Text__rspack_import_2["default"], {
+        variant: "paragraph"
+    }, expanded ? "Hide" : "Show", " tokens (", subAccounts.length, ")")))));
 }
 function Nested(args) {
-  return /* @__PURE__ */ import_react.default.createElement(
-    import_index.default,
-    {
-      ...args,
-      data: import_stories.accounts.data,
-      columns: import_stories.accounts.columns,
-      gridRowGap: 8,
-      gridColumnGap: 6,
-      p: 8,
-      borderRadius: 8,
-      backgroundColor: "neutral.c20",
-      extraRender: (account) => account.subAccounts && account.subAccounts.length > 0 && /* @__PURE__ */ import_react.default.createElement(SubAccounts, { account, columns: import_stories.accounts.columns })
-    }
-  );
+    return /*#__PURE__*/ react__rspack_import_0_default().createElement(_index__rspack_import_4["default"], {
+        ...args,
+        data: _stories_helper__rspack_import_5.accounts.data,
+        columns: _stories_helper__rspack_import_5.accounts.columns,
+        gridRowGap: 8,
+        gridColumnGap: 6,
+        p: 8,
+        borderRadius: 8,
+        backgroundColor: "neutral.c20",
+        extraRender: (account)=>account.subAccounts && account.subAccounts.length > 0 && /*#__PURE__*/ react__rspack_import_0_default().createElement(SubAccounts, {
+                account: account,
+                columns: _stories_helper__rspack_import_5.accounts.columns
+            })
+    });
 }
 Nested.parameters = {
-  docs: {
-    description: {
-      story: nestedExampleDescription
+    docs: {
+        description: {
+            story: nestedExampleDescription
+        }
     }
-  }
 };
-const customRowExampleDescription = `
+/* Custom row example */ const customRowExampleDescription = `
 This example showcases how to styles rows, wrap them inside custom containers and add event handlers.
 
 #### Row containers and event handlers
@@ -414,76 +1864,92 @@ const CustomRowContainer = styled(Table.RowContainer).attrs(
 \`;
 \`\`\`
 `;
-const CustomRowContainer = (0, import_styled_components.default)(import_index.default.RowContainer).attrs(
-  ({ onClick }) => ({
-    onClick
-  })
-)`
+const CustomRowContainer = styled_components__rspack_import_1_default()(_index__rspack_import_4["default"].RowContainer).attrs(({ onClick })=>({
+        onClick
+    }))`
   & > * {
-    padding-left: ${(p) => p.theme.space[5]}px;
-    padding-right: ${(p) => p.theme.space[5]}px;
-    padding-top: ${(p) => p.theme.space[5]}px;
-    padding-bottom: ${(p) => p.theme.space[5]}px;
+    padding-left: ${(p)=>p.theme.space[5]}px;
+    padding-right: ${(p)=>p.theme.space[5]}px;
+    padding-top: ${(p)=>p.theme.space[5]}px;
+    padding-bottom: ${(p)=>p.theme.space[5]}px;
 
     &:first-child {
-      padding-left: ${(p) => p.theme.space[8]}px;
+      padding-left: ${(p)=>p.theme.space[8]}px;
     }
     &:last-child {
-      padding-right: ${(p) => p.theme.space[8]}px;
+      padding-right: ${(p)=>p.theme.space[8]}px;
     }
   }
 
   &:hover > * {
     transition: background-color 0.2s;
     cursor: pointer;
-    background-color: ${(p) => p.rowIndex % 2 === 0 ? p.theme.colors.neutral.c30 : p.theme.colors.primary.c20};
+    background-color: ${(p)=>p.rowIndex % 2 === 0 ? p.theme.colors.neutral.c30 : p.theme.colors.primary.c20};
   }
 `;
-const CustomRows = (args) => {
-  const [selectedRowIndex, setSelectedRowIndex] = (0, import_react.useState)();
-  const renderRow = (0, import_react.useCallback)(
-    (rowIndex, children) => /* @__PURE__ */ import_react.default.createElement(CustomRowContainer, { rowIndex, onClick: () => setSelectedRowIndex(rowIndex) }, children),
-    []
-  );
-  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_Flex.default, { mb: 8 }, /* @__PURE__ */ import_react.default.createElement(import_Text.default, { variant: "h5" }, "Selected index: ", selectedRowIndex ?? "none")), /* @__PURE__ */ import_react.default.createElement(
-    import_index.default,
-    {
-      ...args,
-      data: import_stories.balance.data,
-      columns: import_stories.balance.columns,
-      renderRow,
-      borderRadius: 8,
-      justifyItems: "stretch",
-      alignItems: "stretch",
-      border: "1px solid",
-      borderColor: "neutral.c50",
-      overflow: "hidden",
-      withHeaders: false
-    }
-  ));
+const CustomRows = (args)=>{
+    const [selectedRowIndex, setSelectedRowIndex] = (0,react__rspack_import_0.useState)();
+    const renderRow = (0,react__rspack_import_0.useCallback)((rowIndex, children)=>/*#__PURE__*/ react__rspack_import_0_default().createElement(CustomRowContainer, {
+            rowIndex: rowIndex,
+            onClick: ()=>setSelectedRowIndex(rowIndex)
+        }, children), []);
+    return /*#__PURE__*/ react__rspack_import_0_default().createElement((react__rspack_import_0_default().Fragment), null, /*#__PURE__*/ react__rspack_import_0_default().createElement(_layout_Flex__rspack_import_3["default"], {
+        mb: 8
+    }, /*#__PURE__*/ react__rspack_import_0_default().createElement(_asorted_Text__rspack_import_2["default"], {
+        variant: "h5"
+    }, "Selected index: ", selectedRowIndex ?? "none")), /*#__PURE__*/ react__rspack_import_0_default().createElement(_index__rspack_import_4["default"], {
+        ...args,
+        data: _stories_helper__rspack_import_5.balance.data,
+        columns: _stories_helper__rspack_import_5.balance.columns,
+        renderRow: renderRow,
+        borderRadius: 8,
+        justifyItems: "stretch",
+        alignItems: "stretch",
+        border: "1px solid",
+        borderColor: "neutral.c50",
+        overflow: "hidden",
+        withHeaders: false
+    }));
 };
 CustomRows.parameters = {
-  docs: {
-    description: {
-      story: customRowExampleDescription
-    }
-  }
-};
-var Table_stories_default = {
-  title: "Tables/Table",
-  component: import_index.default,
-  argTypes: {
-    withHeaders: { type: "boolean", defaultValue: false },
-    data: { control: false },
-    columns: { control: false },
-    rows: { table: { disable: true } }
-  },
-  parameters: {
     docs: {
-      description: {
-        component: description
-      }
+        description: {
+            story: customRowExampleDescription
+        }
     }
-  }
 };
-//# sourceMappingURL=Table.stories.js.map
+/* Export */ /* export default */ const __rspack_default_export = ({
+    title: "Tables/Table",
+    component: _index__rspack_import_4["default"],
+    argTypes: {
+        withHeaders: {
+            type: "boolean",
+            defaultValue: false
+        },
+        data: {
+            control: false
+        },
+        columns: {
+            control: false
+        },
+        rows: {
+            table: {
+                disable: true
+            }
+        }
+    },
+    parameters: {
+        docs: {
+            description: {
+                component: description
+            }
+        }
+    }
+});
+
+})();
+
+module.exports = __webpack_exports__;
+})()
+;
+//# sourceMappingURL=Table.stories.js.map