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

package/lib/cjs/pre-ldls/components/NetworkList/NetworkList.stories.js

@@ -1,66 +1,2112 @@
+(() => {
 "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 });
+var __webpack_modules__ = ({
+348(__unused_rspack_module, __webpack_exports__, __webpack_require__) {
+__webpack_require__.d(__webpack_exports__, {
+  "default": () => (__rspack_default_export)
+});
+/* import */ var _styled__rspack_import_1 = __webpack_require__(7680);
+/* import */ var styled_system__rspack_import_0 = __webpack_require__(9351);
+/* import */ var styled_system__rspack_import_0_default = /*#__PURE__*/__webpack_require__.n(styled_system__rspack_import_0);
+/* import */ var _styles_styled_fontFamily__rspack_import_3 = __webpack_require__(3364);
+/* import */ var _styles__rspack_import_2 = __webpack_require__(4368);
+
+
+
+
+const uppercase = (0,styled_system__rspack_import_0.system)({
+    uppercase: {
+        property: "textTransform",
+        transform: (value)=>value ? "uppercase" : "none"
+    }
+});
+const Text = _styled__rspack_import_1["default"].span.attrs(({ variant = "body", fontSize, color })=>({
+        fontSize: fontSize ? fontSize : variant,
+        color: color || "neutral.c100"
+    }))`
+  font-weight: 500;
+  white-space: ${(props)=>props.whiteSpace ?? "normal"};
+  ${(p)=>_styles__rspack_import_2.textVariantStyle[p.variant || "body"]}
+  ${(0,styled_system__rspack_import_0.compose)(uppercase, styled_system__rspack_import_0.lineHeight, _styles_styled_fontFamily__rspack_import_3["default"], styled_system__rspack_import_0.fontSize, styled_system__rspack_import_0.textAlign, styled_system__rspack_import_0.fontWeight, styled_system__rspack_import_0.letterSpacing, (0,styled_system__rspack_import_0.system)({
+    textOverflow: true
+}))}
+  ${(p)=>p.textTransform ? `text-transform: ${p.textTransform};` : ""}
+`;
+/* export default */ const __rspack_default_export = (Text);
+
+
+},
+4368(__unused_rspack_module, __webpack_exports__, __webpack_require__) {
+__webpack_require__.d(__webpack_exports__, {
+  textVariantStyle: () => (textVariantStyle)
+});
+/* import */ var styled_components__rspack_import_0 = __webpack_require__(2770);
+/* import */ var styled_components__rspack_import_0_default = /*#__PURE__*/__webpack_require__.n(styled_components__rspack_import_0);
+
+const getFontSource = (name)=>(props)=>{
+        const fontsPath = props.fontsPath ?? "assets/fonts";
+        const fontName = props.fontMappings && props.fontMappings(name) || `${name}.woff2`;
+        return `url("${fontsPath}/${fontName}") format("woff2")`;
+    };
+const fontStyles = (0,styled_components__rspack_import_0.css)`
+  @font-face {
+    font-family: "Inter";
+    src: ${getFontSource("Inter-ExtraLight-BETA")};
+    font-weight: 100;
+    font-style: normal;
   }
-  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 NetworkList_stories_exports = {};
-__export(NetworkList_stories_exports, {
-  Default: () => Default,
-  TestNetworkClick: () => TestNetworkClick,
-  default: () => NetworkList_stories_default
-});
-module.exports = __toCommonJS(NetworkList_stories_exports);
-var import_react = __toESM(require("react"));
-var import_NetworkList = require("./NetworkList");
-var import_test = require("@storybook/test");
-const testFn = (0, import_test.fn)();
-const meta = {
-  component: import_NetworkList.NetworkList,
-  decorators: [
-    (Story) => /* @__PURE__ */ import_react.default.createElement("div", { style: { height: "400px" } }, /* @__PURE__ */ import_react.default.createElement(Story, null))
-  ],
-  title: "PreLdls/Components/NetworkList",
-  tags: ["autodocs"],
-  args: {
-    networks: Array.from({ length: 50 }, (_, i) => ({
-      name: `Bitcoin ${i}`,
-      id: `bitcoin`,
-      ticker: "btc"
-    })),
-    onClick: testFn
+
+  @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"
+    }
+};
+
+
+},
+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);
+
+
+},
+1422(__unused_rspack_module, __webpack_exports__, __webpack_require__) {
+__webpack_require__.d(__webpack_exports__, {
+  "default": () => (InfiniteLoader)
+});
+/* 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);
+
+
+
+const rotate = (0,styled_components__rspack_import_1.keyframes)`
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
   }
+`;
+const Loader = (styled_components__rspack_import_1_default().svg)`
+  animation: ${rotate} 1s linear infinite;
+  ${styled_system__rspack_import_2.size}
+  ${(0,styled_system__rspack_import_2.system)({
+    stroke: {
+        property: "stroke",
+        scale: "colors"
+    }
+})}
+`;
+function InfiniteLoader({ size = 38, color = "primary.c50", ...extraProps }) {
+    return /*#__PURE__*/ react__rspack_import_0_default().createElement(Loader, {
+        size: size,
+        stroke: color,
+        viewBox: "0 0 38 38",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        ...extraProps
+    }, /*#__PURE__*/ react__rspack_import_0_default().createElement("linearGradient", {
+        id: "gradient-start",
+        gradientUnits: "userSpaceOnUse",
+        gradientTransform: "rotate(-20)"
+    }, /*#__PURE__*/ react__rspack_import_0_default().createElement("stop", {
+        offset: "0",
+        stopColor: "white",
+        stopOpacity: "0.5"
+    }), /*#__PURE__*/ react__rspack_import_0_default().createElement("stop", {
+        offset: "1",
+        stopColor: "white",
+        stopOpacity: "1"
+    })), /*#__PURE__*/ react__rspack_import_0_default().createElement("linearGradient", {
+        id: "gradient-end",
+        gradientUnits: "userSpaceOnUse",
+        gradientTransform: "rotate(-20)"
+    }, /*#__PURE__*/ react__rspack_import_0_default().createElement("stop", {
+        offset: "0",
+        stopColor: "white",
+        stopOpacity: "0.5"
+    }), /*#__PURE__*/ react__rspack_import_0_default().createElement("stop", {
+        offset: "1",
+        stopColor: "white",
+        stopOpacity: "0"
+    })), /*#__PURE__*/ react__rspack_import_0_default().createElement("mask", {
+        id: "gradient-mask",
+        maskUnits: "userSpaceOnUse"
+    }, /*#__PURE__*/ react__rspack_import_0_default().createElement("rect", {
+        x: "-0",
+        y: "-4",
+        width: "44",
+        height: "22",
+        strokeWidth: "0",
+        fill: "url(#gradient-start)",
+        transform: "rotate(10)"
+    }), /*#__PURE__*/ react__rspack_import_0_default().createElement("rect", {
+        x: "0",
+        y: "18",
+        width: "44",
+        height: "21",
+        strokeWidth: "0",
+        fill: "url(#gradient-end)",
+        transform: "rotate(10)"
+    })), /*#__PURE__*/ react__rspack_import_0_default().createElement("path", {
+        d: "M34.8807 20.9499C35.3608 17.0398 34.3815 13.09 32.1304 9.85712C29.8793 6.6242 26.5146 4.33541 22.6808 3.42914C18.847 2.52287 14.8136 3.06283 11.3532 4.94559C7.89277 6.82836 5.24858 9.92158 3.92708 13.6328C2.60558 17.344 2.69968 21.4123 4.19135 25.0584C5.68302 28.7045 8.4674 31.6722 12.0112 33.3929C15.5549 35.1137 19.609 35.4666 23.3968 34.384C27.1846 33.3015 30.4398 30.8596 32.5391 27.526",
+        strokeWidth: "6",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        mask: "url(#gradient-mask)"
+    }));
+}
+
+
+},
+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);
+
+
+},
+9064(__unused_rspack_module, __webpack_exports__, __webpack_require__) {
+__webpack_require__.d(__webpack_exports__, {
+  NetworkItem: () => (NetworkItem)
+});
+/* 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 _libs__rspack_import_3 = __webpack_require__(1507);
+/* import */ var _components__rspack_import_4 = __webpack_require__(348);
+/* import */ var _ledgerhq_crypto_icons__rspack_import_2 = __webpack_require__(4505);
+/* import */ var _ledgerhq_crypto_icons__rspack_import_2_default = /*#__PURE__*/__webpack_require__.n(_ledgerhq_crypto_icons__rspack_import_2);
+
+
+
+
+
+const Wrapper = (styled_components__rspack_import_1_default().div)`
+  ${(0,_libs__rspack_import_3.withTokens)("spacing-xxs", "margin-s", "radius-s", "colors-content-default-default", "colors-content-subdued-default-default", "colors-surface-transparent-hover", "colors-surface-transparent-pressed")}
+  display: flex;
+  padding: var(--spacing-xxs);
+  cursor: pointer;
+  border-radius: var(--radius-s, 8px);
+  align-items: center;
+
+  &:hover {
+    background-color: var(--colors-surface-transparent-hover);
+  }
+
+  &:active {
+    background-color: var(--colors-surface-transparent-pressed);
+  }
+`;
+const InfoWrapper = (styled_components__rspack_import_1_default().div)`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  margin-left: var(--margin-s);
+  flex: 1;
+`;
+const LeftElementWrapper = (styled_components__rspack_import_1_default().div)`
+  display: flex;
+  align-items: center;
+  gap: 4px;
+`;
+const NetworkItem = ({ name, onClick, id, ticker, leftElement, rightElement })=>{
+    return /*#__PURE__*/ react__rspack_import_0_default().createElement(Wrapper, {
+        onClick: onClick
+    }, /*#__PURE__*/ react__rspack_import_0_default().createElement(_ledgerhq_crypto_icons__rspack_import_2.CryptoIcon, {
+        size: "48px",
+        ledgerId: id,
+        ticker: ticker
+    }), /*#__PURE__*/ react__rspack_import_0_default().createElement(InfoWrapper, null, /*#__PURE__*/ react__rspack_import_0_default().createElement(_components__rspack_import_4["default"], {
+        "data-testid": `network-item-name-${name}`,
+        variant: "largeLineHeight",
+        fontWeight: "semiBold",
+        color: "var(--colors-content-default-default)"
+    }, name), /*#__PURE__*/ react__rspack_import_0_default().createElement(LeftElementWrapper, null, leftElement)), rightElement);
+};
+
+
+},
+5228(__unused_rspack_module, __webpack_exports__, __webpack_require__) {
+__webpack_require__.d(__webpack_exports__, {
+  NetworkList: () => (NetworkList)
+});
+/* 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 _NetworkItem_NetworkItem__rspack_import_1 = __webpack_require__(9064);
+/* import */ var _VirtualList_VirtualList__rspack_import_2 = __webpack_require__(1878);
+
+
+
+const NetworkList = ({ networks, onClick })=>{
+    const renderNetworkItem = (0,react__rspack_import_0.useCallback)((network)=>/*#__PURE__*/ react__rspack_import_0_default().createElement(_NetworkItem_NetworkItem__rspack_import_1.NetworkItem, {
+            ...network,
+            onClick: ()=>onClick(network.id)
+        }), [
+        onClick
+    ]);
+    return /*#__PURE__*/ react__rspack_import_0_default().createElement(_VirtualList_VirtualList__rspack_import_2.VirtualList, {
+        items: networks,
+        itemHeight: 64,
+        renderItem: renderNetworkItem
+    });
 };
-var NetworkList_stories_default = meta;
+
+
+},
+1878(__unused_rspack_module, __webpack_exports__, __webpack_require__) {
+
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, {
+  VirtualList: () => (/* binding */ VirtualList)
+});
+
+// EXTERNAL MODULE: external "react"
+var external_react_ = __webpack_require__(2015);
+var external_react_default = /*#__PURE__*/__webpack_require__.n(external_react_);
+;// CONCATENATED MODULE: external "@tanstack/react-virtual"
+const react_virtual_namespaceObject = require("@tanstack/react-virtual");
+// EXTERNAL MODULE: ./src/components/layout/Flex/index.ts
+var Flex = __webpack_require__(3696);
+// EXTERNAL MODULE: ./src/components/loaders/InfiniteLoader/index.tsx
+var InfiniteLoader = __webpack_require__(1422);
+;// CONCATENATED MODULE: ./src/pre-ldls/components/VirtualList/VirtualList.tsx
+
+
+
+const DefaultLoadingComponent = ()=>/*#__PURE__*/ external_react_default().createElement(Flex["default"], {
+        justifyContent: "center",
+        alignItems: "center",
+        height: "76px"
+    }, /*#__PURE__*/ external_react_default().createElement(InfiniteLoader["default"], null));
+function easeInOutCubic(t) {
+    return t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
+}
+const VirtualList = ({ gap, hasNextPage = false, isLoading, itemHeight, items, LoadingComponent, onVisibleItemsScrollEnd, overscan = 5, renderItem, scrollToTop = false, bottomComponent, threshold = 5 })=>{
+    const parentRef = (0,external_react_.useRef)(null);
+    const scrollToFn = (0,external_react_.useCallback)((offset, options, instance)=>{
+        const element = instance.scrollElement;
+        if (!element) return;
+        const duration = options.behavior === "smooth" ? 100 : 0;
+        if (duration === 0) {
+            element.scrollTop = offset;
+            return;
+        }
+        const startTime = performance.now();
+        const startTop = element.scrollTop;
+        const distanceToScroll = offset - startTop;
+        const scrollStep = (currentTime)=>{
+            const elapsed = currentTime - startTime;
+            const progress = Math.min(elapsed / duration, 1);
+            const easedProgress = easeInOutCubic(progress);
+            element.scrollTop = startTop + distanceToScroll * easedProgress;
+            if (progress < 1) {
+                requestAnimationFrame(scrollStep);
+            }
+        };
+        requestAnimationFrame(scrollStep);
+    }, []);
+    const rowVirtualizer = (0,react_virtual_namespaceObject.useVirtualizer)({
+        gap,
+        count: hasNextPage ? items.length + 1 : items.length,
+        overscan,
+        getScrollElement: ()=>parentRef.current,
+        estimateSize: ()=>itemHeight,
+        scrollToFn
+    });
+    (0,external_react_.useEffect)(()=>{
+        if (scrollToTop && parentRef.current) {
+            scrollToFn(0, {
+                behavior: "smooth"
+            }, {
+                scrollElement: parentRef.current
+            });
+        }
+    }, [
+        scrollToTop,
+        scrollToFn
+    ]);
+    const virtualItems = rowVirtualizer.getVirtualItems();
+    (0,external_react_.useEffect)(()=>{
+        if (!virtualItems.length) return;
+        const lastItem = virtualItems[virtualItems.length - 1];
+        if (lastItem.index >= items.length - 1 - threshold && hasNextPage && !isLoading && onVisibleItemsScrollEnd) {
+            onVisibleItemsScrollEnd();
+        }
+    }, [
+        hasNextPage,
+        onVisibleItemsScrollEnd,
+        items.length,
+        isLoading,
+        threshold,
+        virtualItems
+    ]);
+    const showCustomLoadingComponent = !!LoadingComponent;
+    const Loading = (0,external_react_.useCallback)(()=>showCustomLoadingComponent ? LoadingComponent : /*#__PURE__*/ external_react_default().createElement(DefaultLoadingComponent, null), [
+        showCustomLoadingComponent,
+        LoadingComponent
+    ]);
+    return /*#__PURE__*/ external_react_default().createElement("div", {
+        ref: parentRef,
+        style: {
+            width: "100%",
+            height: "100%",
+            overflow: "auto",
+            scrollbarWidth: "none"
+        }
+    }, /*#__PURE__*/ external_react_default().createElement("div", {
+        style: {
+            height: `${rowVirtualizer.getTotalSize()}px`,
+            width: "100%",
+            display: "flex",
+            flexDirection: "column",
+            position: "relative"
+        }
+    }, rowVirtualizer.getVirtualItems().map((virtualRow)=>{
+        const item = items[virtualRow.index];
+        return /*#__PURE__*/ external_react_default().createElement("div", {
+            key: virtualRow.index,
+            "data-index": virtualRow.index,
+            ref: rowVirtualizer.measureElement,
+            style: {
+                position: "absolute",
+                top: 0,
+                left: 0,
+                transform: `translateY(${virtualRow.start}px)`,
+                height: `${itemHeight}px`,
+                width: "100%"
+            }
+        }, item ? renderItem(item) : /*#__PURE__*/ external_react_default().createElement(Loading, null));
+    }), bottomComponent && /*#__PURE__*/ external_react_default().createElement("div", {
+        style: {
+            position: "absolute",
+            top: `${rowVirtualizer.getTotalSize()}px`,
+            left: 0,
+            width: "100%"
+        }
+    }, bottomComponent)), isLoading && /*#__PURE__*/ external_react_default().createElement(Loading, null));
+};
+
+
+},
+8112(__unused_rspack_module, __webpack_exports__, __webpack_require__) {
+__webpack_require__.d(__webpack_exports__, {
+  dark: () => (dark),
+  light: () => (light),
+  spacing: () => (spacing)
+});
+// From https://github.com/LedgerHQ/ldls/blob/main/libs/design-tokens/src/lib/design-tokens.ts :
+const spacing = {
+    "spacing-xs": "8px",
+    "spacing-s": "16px",
+    "spacing-m": "24px",
+    "spacing-l": "32px",
+    "spacing-xl": "40px",
+    "spacing-xxs": "12px",
+    "spacing-xxxs": "4px",
+    "spacing-none": "0px",
+    "marging-xs": "8px",
+    "marging-s": "16px",
+    "marging-m": "24px",
+    "marging-l": "32px"
+};
+const light = {
+    "background-default": "#ffffff",
+    "background-constant-black": "#000000",
+    "background-constant-white": "#ffffff",
+    "background-backdrop-default": "#0000004d",
+    "background-inverted": "#000000",
+    "background-drawer-default": "#ffffff",
+    "surface-brand-primary-default": "#d4a0ff",
+    "surface-brand-primary-hover": "#b380dd",
+    "surface-brand-primary-pressed": "#7e4ea5",
+    "surface-default-default": "#ffffff",
+    "surface-default-hover": "#fbfbfb",
+    "surface-default-pressed": "#f4f4f4",
+    "surface-default-inverted-default": "#000000",
+    "surface-default-inverted-hover": "#272727",
+    "surface-default-inverted-pressed": "#4d4d4d",
+    "surface-constant-white": "#ffffff",
+    "surface-constant-black": "#000000",
+    "surface-status-error-default": "#c242441a",
+    "surface-status-error-strong-default": "#c24244",
+    "surface-status-error-strong-hover": "#852e2f",
+    "surface-status-error-strong-pressed": "#702e2f",
+    "surface-status-warning-default": "#d38b201a",
+    "surface-status-warning-strong-default": "#d38b20",
+    "surface-status-warning-strong-hover": "#885a14",
+    "surface-status-warning-strong-pressed": "#63420f",
+    "surface-status-success-default": "#47883a1a",
+    "surface-status-success-strong-default": "#47883a",
+    "surface-status-success-strong-hover": "#33572e",
+    "surface-status-success-strong-pressed": "#2c4828",
+    "surface-transparent-default": "#00000000",
+    "surface-transparent-hover": "#0000001a",
+    "surface-transparent-pressed": "#00000033",
+    "surface-transparent-inverted-default": "#ffffff00",
+    "surface-transparent-inverted-hover": "#ffffff1a",
+    "surface-transparent-inverted-pressed": "#ffffff33",
+    "surface-transparent-subdued-default": "#0000000d",
+    "surface-transparent-subdued-inverted-default": "#ffffff1a",
+    "surface-transparent-subdued-inverted-hover": "#ffffff33",
+    "surface-transparent-subdued-inverted-pressed": "#ffffff4d",
+    "surface-transparent-subdued-inverted-disabled": "#ffffff1a",
+    "surface-transparent-subdued-hover": "#0000001a",
+    "surface-transparent-subdued-pressed": "#00000033",
+    "surface-transparent-subdued-disabled": "#0000000d",
+    "surface-subdued-default": "#f4f4f4",
+    "surface-subdued-hover": "#e8e8e8",
+    "surface-subdued-pressed": "#d5d5d5",
+    "surface-disabled": "#f4f4f4",
+    "surface-interactive-default": "#ffffff",
+    "surface-interactive-hover": "#fbfbfb",
+    "surface-interactive-pressed": "#f4f4f4",
+    "surface-interactive-selected-default": "#4d4d4d",
+    "surface-interactive-selected-hover": "#272727",
+    "surface-interactive-selected-pressed": "#000000",
+    "surface-_native-default": "#f7f7f7",
+    "surface-dark-default": "#c1c1c1",
+    "surface-dark-hover": "#767676",
+    "surface-dark-pressed": "#6a6a6a",
+    "surface-active-default": "#d4a0ff",
+    "surface-active-hover": "#b380dd",
+    "surface-active-pressed": "#7e4ea5",
+    "content-default-default": "#000000",
+    "content-default-inverted-default": "#ffffff",
+    "content-constant-white": "#ffffff",
+    "content-constant-black": "#000000",
+    "content-constant-grey": "#e8e8e8",
+    "content-status-error-default": "#c24244",
+    "content-status-error-hover": "#a43234",
+    "content-status-error-pressed": "#852e2f",
+    "content-status-warning-default": "#ae731a",
+    "content-status-success-color": "#47883a",
+    "content-on-primary-default": "#000000",
+    "content-on-primary-hover": "#ffffffcc",
+    "content-on-primary-pressed": "#ffffffb3",
+    "content-on-primary-disabled": "#ffffff99",
+    "content-on-secondary-default": "#ffffff",
+    "content-on-secondary-hover": "#ffffff",
+    "content-on-secondary-pressed": "#ffffff",
+    "content-on-secondary-disabled": "#ffffff",
+    "content-disabled": "#c1c1c1",
+    "content-interactive-default-default": "#000000",
+    "content-interactive-default-hover": "#272727",
+    "content-interactive-default-pressed": "#4d4d4d",
+    "content-interactive-inverted-default": "#ffffff",
+    "content-interactive-inverted-hover": "#fbfbfb",
+    "content-interactive-inverted-pressed": "#f4f4f4",
+    "content-subdued-default-default": "#6a6a6a",
+    "content-subdued-inverted-default": "#d5d5d5",
+    "content-_native-default": "#007aff",
+    "content-light-default-default": "#e8e8e8",
+    "content-light-inverted-default": "#6a6a6a",
+    "border-default-default": "#000000",
+    "border-default-inverted-default": "#ffffff",
+    "border-default-inverted-disabled": "#272727",
+    "border-constant-white": "#ffffff",
+    "border-constant-black": "#000000",
+    "border-status-error-default": "#c24244",
+    "border-status-error-hover": "#a43234",
+    "border-status-error-pressed": "#852e2f",
+    "border-status-warning-default": "#d38b20",
+    "border-status-success-default": "#47883a",
+    "border-on-primary-default": "#ffffff99",
+    "border-on-primary-disabled": "#ffffff99",
+    "border-on-secondary-default": "#ffffff",
+    "border-on-secondary-disabled": "#ffffff",
+    "border-disabled-default": "#e8e8e8",
+    "border-disabled-inverted": "#272727",
+    "border-light-default": "#e8e8e8",
+    "border-subdued-default-default": "#c1c1c1",
+    "border-subdued-default-hover": "#767676",
+    "border-subdued-inverted-default": "#4d4d4d",
+    "border-interactive-default": "#000000",
+    "border-interactive-hover": "#272727",
+    "border-interactive-pressed": "#4d4d4d",
+    "border-focus-default": "#7e4ea5",
+    "border-active-default": "#d4a0ff",
+    "border-active-hover": "#b380dd",
+    "border-active-pressed": "#7e4ea5",
+    "crypto-bitcoin-sv": "#eab300",
+    "crypto-bitcoin-gold": "#152569",
+    "crypto-zcash": "#f4b728",
+    "crypto-yieldly": "#f3b732",
+    "crypto-uni": "#f04086",
+    "crypto-uniswap": "#ff007a",
+    "crypto-bitcoin-cash": "#0ac18e",
+    "crypto-tezos": "#2c7df7",
+    "crypto-sol": "#9945ff",
+    "crypto-xrp": "#333333",
+    "crypto-tron": "#ff060a",
+    "crypto-sats": "#ff8b00",
+    "crypto-polkadot": "#e6007a",
+    "crypto-bitcoin": "#f7931a",
+    "crypto-compound": "#00d395",
+    "crypto-peercoin": "#3cb054",
+    "crypto-omg-network": "#000000",
+    "crypto-near": "#1c1d1f",
+    "crypto-stellar": "#000000",
+    "crypto-nano": "#5d8eb2",
+    "crypto-nimiq": "#f8b425",
+    "crypto-multiverse-x": "#23f7dd",
+    "crypto-ethereum": "#454a75",
+    "crypto-okb": "#2d60e0",
+    "crypto-tether-usdt": "#00a478",
+    "crypto-avax": "#e84142",
+    "crypto-bgb": "#00e0ff",
+    "crypto-usdc": "#f04086",
+    "crypto-monero": "#f26822",
+    "crypto-tkx": "#fd6a1f",
+    "crypto-huobi": "#357ce1",
+    "crypto-pivx": "#5c4c7c",
+    "crypto-cardano": "#0033ad",
+    "crypto-dydx": "#6966ff",
+    "crypto-cro": "#002d74",
+    "crypto-hnt": "#474dff",
+    "crypto-hedera": "#000000",
+    "crypto-ftm": "#1969ff",
+    "crypto-flr": "#e62058",
+    "crypto-bat": "#ff5000",
+    "crypto-ethereum-classic": "#0b8311",
+    "crypto-bincance": "#f5bc00",
+    "crypto-ethergem": "#4a4ab6",
+    "crypto-iota": "#000000",
+    "crypto-chainlink": "#2a5ada",
+    "crypto-dym": "#f1e1d4",
+    "crypto-eos": "#000000",
+    "crypto-waves": "#0055ff",
+    "crypto-polygon": "#8247e5",
+    "crypto-celo": "#fcff52",
+    "crypto-dogecoin": "#c3a634",
+    "crypto-algorand": "#00a478",
+    "crypto-cosmos": "#2e3148",
+    "crypto-digibyte": "#0066cc",
+    "crypto-pirl": "#357ce1",
+    "crypto-eng": "#2f2f2f",
+    "crypto-decred": "#2970ff",
+    "crypto-dash": "#008ce7",
+    "crypto-xin": "#1eb5fa",
+    "crypto-tusd": "#1a5aff",
+    "crypto-litecoin": "#345d9d",
+    "crypto-komodo": "#41ead4",
+    "crypto-elrond": "#000000",
+    "crypto-osmo": "#302dbb",
+    "crypto-leo": "#000000",
+    "crypto-bytecoin": "#f04086",
+    "crypto-aion": "#212529",
+    "crypto-dai": "#f5ac37",
+    "crypto-neo": "#7dd224"
+};
+const dark = {
+    "background-default": "#000000",
+    "background-constant-black": "#000000",
+    "background-constant-white": "#ffffff",
+    "background-backdrop-default": "#0000004d",
+    "background-inverted": "#ffffff",
+    "background-drawer-default": "#191919",
+    "surface-brand-primary-default": "#d4a0ff",
+    "surface-brand-primary-hover": "#ddb3ff",
+    "surface-brand-primary-pressed": "#e5c6ff",
+    "surface-default-default": "#000000",
+    "surface-default-hover": "#191919",
+    "surface-default-pressed": "#272727",
+    "surface-default-inverted-default": "#ffffff",
+    "surface-default-inverted-hover": "#e1e1e1",
+    "surface-default-inverted-pressed": "#c3c3c3",
+    "surface-constant-white": "#ffffff",
+    "surface-constant-black": "#000000",
+    "surface-status-error-default": "#f872741a",
+    "surface-status-error-strong-default": "#f87274",
+    "surface-status-error-strong-hover": "#fec8c9",
+    "surface-status-error-strong-pressed": "#fee1e2",
+    "surface-status-warning-default": "#ffbd421a",
+    "surface-status-warning-strong-default": "#ffbd42",
+    "surface-status-warning-strong-hover": "#ffe7ac",
+    "surface-status-warning-strong-pressed": "#fff3d5",
+    "surface-status-success-default": "#6ec85c1a",
+    "surface-status-success-strong-default": "#6ec85c",
+    "surface-status-success-strong-hover": "#cbeec4",
+    "surface-status-success-strong-pressed": "#e6f7e1",
+    "surface-transparent-default": "#ffffff00",
+    "surface-transparent-hover": "#ffffff1a",
+    "surface-transparent-pressed": "#ffffff33",
+    "surface-transparent-inverted-default": "#00000000",
+    "surface-transparent-inverted-hover": "#0000001a",
+    "surface-transparent-inverted-pressed": "#00000033",
+    "surface-transparent-subdued-default": "#ffffff1a",
+    "surface-transparent-subdued-inverted-default": "#0000000d",
+    "surface-transparent-subdued-inverted-hover": "#0000001a",
+    "surface-transparent-subdued-inverted-pressed": "#00000033",
+    "surface-transparent-subdued-inverted-disabled": "#0000000d",
+    "surface-transparent-subdued-hover": "#ffffff33",
+    "surface-transparent-subdued-pressed": "#ffffff4d",
+    "surface-transparent-subdued-disabled": "#ffffff1a",
+    "surface-subdued-default": "#272727",
+    "surface-subdued-hover": "#3c3c3c",
+    "surface-subdued-pressed": "#565656",
+    "surface-disabled": "#272727",
+    "surface-interactive-default": "#000000",
+    "surface-interactive-hover": "#191919",
+    "surface-interactive-pressed": "#272727",
+    "surface-interactive-selected-default": "#c3c3c3",
+    "surface-interactive-selected-hover": "#e1e1e1",
+    "surface-interactive-selected-pressed": "#ffffff",
+    "surface-_native-default": "#c3c3c3",
+    "surface-dark-default": "#717070",
+    "surface-dark-hover": "#848484",
+    "surface-dark-pressed": "#9c9c9c",
+    "surface-active-default": "#d4a0ff",
+    "surface-active-hover": "#ddb3ff",
+    "surface-active-pressed": "#e5c6ff",
+    "content-default-default": "#ffffff",
+    "content-default-inverted-default": "#000000",
+    "content-constant-white": "#ffffff",
+    "content-constant-black": "#000000",
+    "content-constant-grey": "#e1e1e1",
+    "content-status-error-default": "#f87274",
+    "content-status-error-hover": "#fca6a7",
+    "content-status-error-pressed": "#fec8c9",
+    "content-status-warning-default": "#ffd373",
+    "content-status-success-color": "#6ec85c",
+    "content-on-primary-default": "#000000",
+    "content-on-primary-hover": "#000000cc",
+    "content-on-primary-pressed": "#000000b3",
+    "content-on-primary-disabled": "#00000099",
+    "content-on-secondary-default": "#ffffff",
+    "content-on-secondary-hover": "#ffffff",
+    "content-on-secondary-pressed": "#ffffff",
+    "content-on-secondary-disabled": "#ffffff",
+    "content-disabled": "#565656",
+    "content-interactive-default-default": "#ffffff",
+    "content-interactive-default-hover": "#e1e1e1",
+    "content-interactive-default-pressed": "#c3c3c3",
+    "content-interactive-inverted-default": "#000000",
+    "content-interactive-inverted-hover": "#191919",
+    "content-interactive-inverted-pressed": "#272727",
+    "content-subdued-default-default": "#9c9c9c",
+    "content-subdued-inverted-default": "#565656",
+    "content-_native-default": "#007aff",
+    "content-light-default-default": "#3c3c3c",
+    "content-light-inverted-default": "#9c9c9c",
+    "border-default-default": "#ffffff",
+    "border-default-inverted-default": "#000000",
+    "border-default-inverted-disabled": "#9c9c9c",
+    "border-constant-white": "#ffffff",
+    "border-constant-black": "#000000",
+    "border-status-error-default": "#f87274",
+    "border-status-error-hover": "#fca6a7",
+    "border-status-error-pressed": "#fec8c9",
+    "border-status-warning-default": "#ffbd42",
+    "border-status-success-default": "#6ec85c",
+    "border-on-primary-default": "#00000099",
+    "border-on-primary-disabled": "#00000099",
+    "border-on-secondary-default": "#ffffff",
+    "border-on-secondary-disabled": "#ffffff",
+    "border-disabled-default": "#191919",
+    "border-disabled-inverted": "#9c9c9c",
+    "border-light-default": "#3c3c3c",
+    "border-subdued-default-default": "#717070",
+    "border-subdued-default-hover": "#848484",
+    "border-subdued-inverted-default": "#c3c3c3",
+    "border-interactive-default": "#ffffff",
+    "border-interactive-hover": "#e1e1e1",
+    "border-interactive-pressed": "#c3c3c3",
+    "border-focus-default": "#f2e2ff",
+    "border-active-default": "#d4a0ff",
+    "border-active-hover": "#ddb3ff",
+    "border-active-pressed": "#e5c6ff",
+    "crypto-bitcoin-sv": "#eab300",
+    "crypto-bitcoin-gold": "#152569",
+    "crypto-zcash": "#f4b728",
+    "crypto-yieldly": "#f3b732",
+    "crypto-uni": "#f04086",
+    "crypto-uniswap": "#ff007a",
+    "crypto-bitcoin-cash": "#0ac18e",
+    "crypto-tezos": "#2c7df7",
+    "crypto-sol": "#9945ff",
+    "crypto-xrp": "#333333",
+    "crypto-tron": "#ff060a",
+    "crypto-sats": "#ff8b00",
+    "crypto-polkadot": "#e6007a",
+    "crypto-bitcoin": "#f7931a",
+    "crypto-compound": "#00d395",
+    "crypto-peercoin": "#3cb054",
+    "crypto-omg-network": "#000000",
+    "crypto-near": "#1c1d1f",
+    "crypto-stellar": "#000000",
+    "crypto-nano": "#5d8eb2",
+    "crypto-nimiq": "#f8b425",
+    "crypto-multiverse-x": "#23f7dd",
+    "crypto-ethereum": "#454a75",
+    "crypto-okb": "#2d60e0",
+    "crypto-tether-usdt": "#00a478",
+    "crypto-avax": "#e84142",
+    "crypto-bgb": "#00e0ff",
+    "crypto-usdc": "#f04086",
+    "crypto-monero": "#f26822",
+    "crypto-tkx": "#fd6a1f",
+    "crypto-huobi": "#357ce1",
+    "crypto-pivx": "#5c4c7c",
+    "crypto-cardano": "#0033ad",
+    "crypto-dydx": "#6966ff",
+    "crypto-cro": "#002d74",
+    "crypto-hnt": "#474dff",
+    "crypto-hedera": "#000000",
+    "crypto-ftm": "#1969ff",
+    "crypto-flr": "#e62058",
+    "crypto-bat": "#ff5000",
+    "crypto-ethereum-classic": "#0b8311",
+    "crypto-bincance": "#f5bc00",
+    "crypto-ethergem": "#4a4ab6",
+    "crypto-iota": "#000000",
+    "crypto-chainlink": "#2a5ada",
+    "crypto-dym": "#f1e1d4",
+    "crypto-eos": "#000000",
+    "crypto-waves": "#0055ff",
+    "crypto-polygon": "#8247e5",
+    "crypto-celo": "#fcff52",
+    "crypto-dogecoin": "#c3a634",
+    "crypto-algorand": "#00a478",
+    "crypto-cosmos": "#2e3148",
+    "crypto-digibyte": "#0066cc",
+    "crypto-pirl": "#357ce1",
+    "crypto-eng": "#2f2f2f",
+    "crypto-decred": "#2970ff",
+    "crypto-dash": "#008ce7",
+    "crypto-xin": "#1eb5fa",
+    "crypto-tusd": "#1a5aff",
+    "crypto-litecoin": "#345d9d",
+    "crypto-komodo": "#41ead4",
+    "crypto-elrond": "#000000",
+    "crypto-osmo": "#302dbb",
+    "crypto-leo": "#000000",
+    "crypto-bytecoin": "#f04086",
+    "crypto-aion": "#212529",
+    "crypto-dai": "#f5ac37",
+    "crypto-neo": "#7dd224"
+};
+const tailwindColors = (/* unused pure expression or super */ null && ({
+    "background-default": "var(--background-default)",
+    "background-constant-black": "var(--background-constant-black)",
+    "background-constant-white": "var(--background-constant-white)",
+    "background-backdrop-default": "var(--background-backdrop-default)",
+    "background-inverted": "var(--background-inverted)",
+    "background-drawer-default": "var(--background-drawer-default)",
+    "surface-brand-primary-default": "var(--surface-brand-primary-default)",
+    "surface-brand-primary-hover": "var(--surface-brand-primary-hover)",
+    "surface-brand-primary-pressed": "var(--surface-brand-primary-pressed)",
+    "surface-default-default": "var(--surface-default-default)",
+    "surface-default-hover": "var(--surface-default-hover)",
+    "surface-default-pressed": "var(--surface-default-pressed)",
+    "surface-default-inverted-default": "var(--surface-default-inverted-default)",
+    "surface-default-inverted-hover": "var(--surface-default-inverted-hover)",
+    "surface-default-inverted-pressed": "var(--surface-default-inverted-pressed)",
+    "surface-constant-white": "var(--surface-constant-white)",
+    "surface-constant-black": "var(--surface-constant-black)",
+    "surface-status-error-default": "var(--surface-status-error-default)",
+    "surface-status-error-strong-default": "var(--surface-status-error-strong-default)",
+    "surface-status-error-strong-hover": "var(--surface-status-error-strong-hover)",
+    "surface-status-error-strong-pressed": "var(--surface-status-error-strong-pressed)",
+    "surface-status-warning-default": "var(--surface-status-warning-default)",
+    "surface-status-warning-strong-default": "var(--surface-status-warning-strong-default)",
+    "surface-status-warning-strong-hover": "var(--surface-status-warning-strong-hover)",
+    "surface-status-warning-strong-pressed": "var(--surface-status-warning-strong-pressed)",
+    "surface-status-success-default": "var(--surface-status-success-default)",
+    "surface-status-success-strong-default": "var(--surface-status-success-strong-default)",
+    "surface-status-success-strong-hover": "var(--surface-status-success-strong-hover)",
+    "surface-status-success-strong-pressed": "var(--surface-status-success-strong-pressed)",
+    "surface-transparent-default": "var(--surface-transparent-default)",
+    "surface-transparent-hover": "var(--surface-transparent-hover)",
+    "surface-transparent-pressed": "var(--surface-transparent-pressed)",
+    "surface-transparent-inverted-default": "var(--surface-transparent-inverted-default)",
+    "surface-transparent-inverted-hover": "var(--surface-transparent-inverted-hover)",
+    "surface-transparent-inverted-pressed": "var(--surface-transparent-inverted-pressed)",
+    "surface-transparent-subdued-default": "var(--surface-transparent-subdued-default)",
+    "surface-transparent-subdued-inverted-default": "var(--surface-transparent-subdued-inverted-default)",
+    "surface-transparent-subdued-inverted-hover": "var(--surface-transparent-subdued-inverted-hover)",
+    "surface-transparent-subdued-inverted-pressed": "var(--surface-transparent-subdued-inverted-pressed)",
+    "surface-transparent-subdued-inverted-disabled": "var(--surface-transparent-subdued-inverted-disabled)",
+    "surface-transparent-subdued-hover": "var(--surface-transparent-subdued-hover)",
+    "surface-transparent-subdued-pressed": "var(--surface-transparent-subdued-pressed)",
+    "surface-transparent-subdued-disabled": "var(--surface-transparent-subdued-disabled)",
+    "surface-subdued-default": "var(--surface-subdued-default)",
+    "surface-subdued-hover": "var(--surface-subdued-hover)",
+    "surface-subdued-pressed": "var(--surface-subdued-pressed)",
+    "surface-disabled": "var(--surface-disabled)",
+    "surface-interactive-default": "var(--surface-interactive-default)",
+    "surface-interactive-hover": "var(--surface-interactive-hover)",
+    "surface-interactive-pressed": "var(--surface-interactive-pressed)",
+    "surface-interactive-selected-default": "var(--surface-interactive-selected-default)",
+    "surface-interactive-selected-hover": "var(--surface-interactive-selected-hover)",
+    "surface-interactive-selected-pressed": "var(--surface-interactive-selected-pressed)",
+    "surface-_native-default": "var(--surface-_native-default)",
+    "surface-dark-default": "var(--surface-dark-default)",
+    "surface-dark-hover": "var(--surface-dark-hover)",
+    "surface-dark-pressed": "var(--surface-dark-pressed)",
+    "surface-active-default": "var(--surface-active-default)",
+    "surface-active-hover": "var(--surface-active-hover)",
+    "surface-active-pressed": "var(--surface-active-pressed)",
+    "content-default-default": "var(--content-default-default)",
+    "content-default-inverted-default": "var(--content-default-inverted-default)",
+    "content-constant-white": "var(--content-constant-white)",
+    "content-constant-black": "var(--content-constant-black)",
+    "content-constant-grey": "var(--content-constant-grey)",
+    "content-status-error-default": "var(--content-status-error-default)",
+    "content-status-error-hover": "var(--content-status-error-hover)",
+    "content-status-error-pressed": "var(--content-status-error-pressed)",
+    "content-status-warning-default": "var(--content-status-warning-default)",
+    "content-status-success-color": "var(--content-status-success-color)",
+    "content-on-primary-default": "var(--content-on-primary-default)",
+    "content-on-primary-hover": "var(--content-on-primary-hover)",
+    "content-on-primary-pressed": "var(--content-on-primary-pressed)",
+    "content-on-primary-disabled": "var(--content-on-primary-disabled)",
+    "content-on-secondary-default": "var(--content-on-secondary-default)",
+    "content-on-secondary-hover": "var(--content-on-secondary-hover)",
+    "content-on-secondary-pressed": "var(--content-on-secondary-pressed)",
+    "content-on-secondary-disabled": "var(--content-on-secondary-disabled)",
+    "content-disabled": "var(--content-disabled)",
+    "content-interactive-default-default": "var(--content-interactive-default-default)",
+    "content-interactive-default-hover": "var(--content-interactive-default-hover)",
+    "content-interactive-default-pressed": "var(--content-interactive-default-pressed)",
+    "content-interactive-inverted-default": "var(--content-interactive-inverted-default)",
+    "content-interactive-inverted-hover": "var(--content-interactive-inverted-hover)",
+    "content-interactive-inverted-pressed": "var(--content-interactive-inverted-pressed)",
+    "content-subdued-default-default": "var(--content-subdued-default-default)",
+    "content-subdued-inverted-default": "var(--content-subdued-inverted-default)",
+    "content-_native-default": "var(--content-_native-default)",
+    "content-light-default-default": "var(--content-light-default-default)",
+    "content-light-inverted-default": "var(--content-light-inverted-default)",
+    "border-default-default": "var(--border-default-default)",
+    "border-default-inverted-default": "var(--border-default-inverted-default)",
+    "border-default-inverted-disabled": "var(--border-default-inverted-disabled)",
+    "border-constant-white": "var(--border-constant-white)",
+    "border-constant-black": "var(--border-constant-black)",
+    "border-status-error-default": "var(--border-status-error-default)",
+    "border-status-error-hover": "var(--border-status-error-hover)",
+    "border-status-error-pressed": "var(--border-status-error-pressed)",
+    "border-status-warning-default": "var(--border-status-warning-default)",
+    "border-status-success-default": "var(--border-status-success-default)",
+    "border-on-primary-default": "var(--border-on-primary-default)",
+    "border-on-primary-disabled": "var(--border-on-primary-disabled)",
+    "border-on-secondary-default": "var(--border-on-secondary-default)",
+    "border-on-secondary-disabled": "var(--border-on-secondary-disabled)",
+    "border-disabled-default": "var(--border-disabled-default)",
+    "border-disabled-inverted": "var(--border-disabled-inverted)",
+    "border-light-default": "var(--border-light-default)",
+    "border-subdued-default-default": "var(--border-subdued-default-default)",
+    "border-subdued-default-hover": "var(--border-subdued-default-hover)",
+    "border-subdued-inverted-default": "var(--border-subdued-inverted-default)",
+    "border-interactive-default": "var(--border-interactive-default)",
+    "border-interactive-hover": "var(--border-interactive-hover)",
+    "border-interactive-pressed": "var(--border-interactive-pressed)",
+    "border-focus-default": "var(--border-focus-default)",
+    "border-active-default": "var(--border-active-default)",
+    "border-active-hover": "var(--border-active-hover)",
+    "border-active-pressed": "var(--border-active-pressed)",
+    "crypto-bitcoin-sv": "var(--crypto-bitcoin-sv)",
+    "crypto-bitcoin-gold": "var(--crypto-bitcoin-gold)",
+    "crypto-zcash": "var(--crypto-zcash)",
+    "crypto-yieldly": "var(--crypto-yieldly)",
+    "crypto-uni": "var(--crypto-uni)",
+    "crypto-uniswap": "var(--crypto-uniswap)",
+    "crypto-bitcoin-cash": "var(--crypto-bitcoin-cash)",
+    "crypto-tezos": "var(--crypto-tezos)",
+    "crypto-sol": "var(--crypto-sol)",
+    "crypto-xrp": "var(--crypto-xrp)",
+    "crypto-tron": "var(--crypto-tron)",
+    "crypto-sats": "var(--crypto-sats)",
+    "crypto-polkadot": "var(--crypto-polkadot)",
+    "crypto-bitcoin": "var(--crypto-bitcoin)",
+    "crypto-compound": "var(--crypto-compound)",
+    "crypto-peercoin": "var(--crypto-peercoin)",
+    "crypto-omg-network": "var(--crypto-omg-network)",
+    "crypto-near": "var(--crypto-near)",
+    "crypto-stellar": "var(--crypto-stellar)",
+    "crypto-nano": "var(--crypto-nano)",
+    "crypto-nimiq": "var(--crypto-nimiq)",
+    "crypto-multiverse-x": "var(--crypto-multiverse-x)",
+    "crypto-ethereum": "var(--crypto-ethereum)",
+    "crypto-okb": "var(--crypto-okb)",
+    "crypto-tether-usdt": "var(--crypto-tether-usdt)",
+    "crypto-avax": "var(--crypto-avax)",
+    "crypto-bgb": "var(--crypto-bgb)",
+    "crypto-usdc": "var(--crypto-usdc)",
+    "crypto-monero": "var(--crypto-monero)",
+    "crypto-tkx": "var(--crypto-tkx)",
+    "crypto-huobi": "var(--crypto-huobi)",
+    "crypto-pivx": "var(--crypto-pivx)",
+    "crypto-cardano": "var(--crypto-cardano)",
+    "crypto-dydx": "var(--crypto-dydx)",
+    "crypto-cro": "var(--crypto-cro)",
+    "crypto-hnt": "var(--crypto-hnt)",
+    "crypto-hedera": "var(--crypto-hedera)",
+    "crypto-ftm": "var(--crypto-ftm)",
+    "crypto-flr": "var(--crypto-flr)",
+    "crypto-bat": "var(--crypto-bat)",
+    "crypto-ethereum-classic": "var(--crypto-ethereum-classic)",
+    "crypto-bincance": "var(--crypto-bincance)",
+    "crypto-ethergem": "var(--crypto-ethergem)",
+    "crypto-iota": "var(--crypto-iota)",
+    "crypto-chainlink": "var(--crypto-chainlink)",
+    "crypto-dym": "var(--crypto-dym)",
+    "crypto-eos": "var(--crypto-eos)",
+    "crypto-waves": "var(--crypto-waves)",
+    "crypto-polygon": "var(--crypto-polygon)",
+    "crypto-celo": "var(--crypto-celo)",
+    "crypto-dogecoin": "var(--crypto-dogecoin)",
+    "crypto-algorand": "var(--crypto-algorand)",
+    "crypto-cosmos": "var(--crypto-cosmos)",
+    "crypto-digibyte": "var(--crypto-digibyte)",
+    "crypto-pirl": "var(--crypto-pirl)",
+    "crypto-eng": "var(--crypto-eng)",
+    "crypto-decred": "var(--crypto-decred)",
+    "crypto-dash": "var(--crypto-dash)",
+    "crypto-xin": "var(--crypto-xin)",
+    "crypto-tusd": "var(--crypto-tusd)",
+    "crypto-litecoin": "var(--crypto-litecoin)",
+    "crypto-komodo": "var(--crypto-komodo)",
+    "crypto-elrond": "var(--crypto-elrond)",
+    "crypto-osmo": "var(--crypto-osmo)",
+    "crypto-leo": "var(--crypto-leo)",
+    "crypto-bytecoin": "var(--crypto-bytecoin)",
+    "crypto-aion": "var(--crypto-aion)",
+    "crypto-dai": "var(--crypto-dai)",
+    "crypto-neo": "var(--crypto-neo)"
+}));
+const primitiveColors = (/* unused pure expression or super */ null && ({
+    "light-constant-400": "#d5d5d5",
+    "light-constant-950": "#000000",
+    "light-constant-050": "#ffffff",
+    "light-green-100": "#e6f7e1",
+    "light-green-200": "#cbeec4",
+    "light-green-300": "#a2e095",
+    "light-green-400": "#6ec85c",
+    "light-green-500": "#5ba34d",
+    "light-green-600": "#47883a",
+    "light-green-700": "#3b6c32",
+    "light-green-800": "#33572e",
+    "light-green-900": "#2c4828",
+    "light-green-950": "#142b12",
+    "light-green-050": "#f4fbf2",
+    "light-green-600---0%": "#47883a00",
+    "light-green-400---0%": "#6ec85c00",
+    "light-green-color": "#ffffff",
+    "light-green-600---10%": "#47883a1a",
+    "light-green-400---10%": "#6ec85c1a",
+    "light-yellow-100": "#fff3d5",
+    "light-yellow-200": "#ffe7ac",
+    "light-yellow-300": "#ffd373",
+    "light-yellow-400": "#ffbd42",
+    "light-yellow-500": "#efa22f",
+    "light-yellow-600": "#d38b20",
+    "light-yellow-700": "#ae731a",
+    "light-yellow-800": "#885a14",
+    "light-yellow-900": "#63420f",
+    "light-yellow-950": "#3e2909",
+    "light-yellow-050": "#fff8e6",
+    "light-yellow-600---0%": "#d38b2000",
+    "light-yellow-600---10%": "#d38b201a",
+    "light-yellow-400---0%": "#ffbd4200",
+    "light-yellow-400---10%": "#ffbd421a",
+    "light-red-100": "#fee1e2",
+    "light-red-200": "#fec8c9",
+    "light-red-300": "#fca6a7",
+    "light-red-400": "#f87274",
+    "light-red-500": "#f04f52",
+    "light-red-600": "#c24244",
+    "light-red-700": "#a43234",
+    "light-red-800": "#852e2f",
+    "light-red-900": "#702e2f",
+    "light-red-950": "#3b1212",
+    "light-red-050": "#fef1f1",
+    "light-red-400---0%": "#f8727400",
+    "light-red-600---0%": "#c2424400",
+    "light-red-600---10%": "#c242441a",
+    "light-red-400---10%": "#f872741a",
+    "light-grey-100": "#fbfbfb",
+    "light-grey-200": "#f4f4f4",
+    "light-grey-300": "#e8e8e8",
+    "light-grey-400": "#d5d5d5",
+    "light-grey-500": "#c1c1c1",
+    "light-grey-600": "#767676",
+    "light-grey-700": "#6a6a6a",
+    "light-grey-800": "#4d4d4d",
+    "light-grey-900": "#272727",
+    "light-grey-950": "#000000",
+    "light-grey-950---30-%": "#0000004d",
+    "light-grey-050": "#ffffff",
+    "light-grey-050---90%": "#ffffffe6",
+    "light-grey-050---80%": "#ffffffcc",
+    "light-grey-050---70%": "#ffffffb3",
+    "light-grey-050---60%": "#ffffff99",
+    "light-grey-050---50%": "#ffffff80",
+    "light-grey-050---40%": "#ffffff66",
+    "light-grey-050--30%": "#ffffff4d",
+    "light-grey-050---20%": "#ffffff33",
+    "light-grey-050---10-%": "#ffffff1a",
+    "light-grey-950---10%": "#0000001a",
+    "light-grey-950---20%": "#00000033",
+    "light-grey-950---40%": "#00000066",
+    "light-grey-950---50%": "#00000080",
+    "light-grey-950---60%": "#00000099",
+    "light-grey-950---70%": "#000000b3",
+    "light-grey-950---80%": "#000000cc",
+    "light-grey-950---90%": "#000000e6",
+    "light-grey-950---0%": "#00000000",
+    "light-grey-050---0%": "#ffffff00",
+    "light-grey-950----30%": "#0000004d",
+    "light-grey-050---30%": "#ffffff4d",
+    "light-grey-050---5%": "#ffffff0d",
+    "light-grey-950---5%": "#0000000d",
+    "light-grey-950---2%": "#00000005",
+    "light-grey-050---2%": "#ffffff05",
+    "light-orange-100": "#ffddcc",
+    "light-orange-200": "#ffc2a4",
+    "light-orange-300": "#ffa97f",
+    "light-orange-400": "#ff8c55",
+    "light-orange-500": "#ff702a",
+    "light-orange-600": "#ff5300",
+    "light-orange-700": "#d64400",
+    "light-orange-800": "#b23a00",
+    "light-orange-900": "#9e3300",
+    "light-orange-950": "#662100",
+    "light-orange-050": "#fef0e9",
+    "light-crypto-colors-algorand": "#00a478",
+    "light-crypto-colors-aion": "#212529",
+    "light-crypto-colors-avax": "#e84142",
+    "light-crypto-colors-bat": "#ff5000",
+    "light-crypto-colors-bgb": "#00e0ff",
+    "light-crypto-colors-bitcoin": "#f7931a",
+    "light-crypto-colors-bitcoin-cash": "#0ac18e",
+    "light-crypto-colors-bitcoin-gold": "#152569",
+    "light-crypto-colors-bitcoin-sv": "#eab300",
+    "light-crypto-colors-bincance": "#f5bc00",
+    "light-crypto-colors-bytecoin": "#f04086",
+    "light-crypto-colors-cardano": "#0033ad",
+    "light-crypto-colors-cosmos": "#2e3148",
+    "light-crypto-colors-compound": "#00d395",
+    "light-crypto-colors-chainlink": "#2a5ada",
+    "light-crypto-colors-dash": "#008ce7",
+    "light-crypto-colors-dai": "#f5ac37",
+    "light-crypto-colors-decred": "#2970ff",
+    "light-crypto-colors-digibyte": "#0066cc",
+    "light-crypto-colors-dogecoin": "#c3a634",
+    "light-crypto-colors-dydx": "#6966ff",
+    "light-crypto-colors-elrond": "#000000",
+    "light-crypto-colors-eos": "#000000",
+    "light-crypto-colors-ethergem": "#4a4ab6",
+    "light-crypto-colors-ethereum": "#454a75",
+    "light-crypto-colors-ethereum-classic": "#0b8311",
+    "light-crypto-colors-huobi": "#357ce1",
+    "light-crypto-colors-hnt": "#474dff",
+    "light-crypto-colors-iota": "#000000",
+    "light-crypto-colors-komodo": "#41ead4",
+    "light-crypto-colors-leo": "#000000",
+    "light-crypto-colors-litecoin": "#345d9d",
+    "light-crypto-colors-monero": "#f26822",
+    "light-crypto-colors-multiverse-x": "#23f7dd",
+    "light-crypto-colors-nano": "#5d8eb2",
+    "light-crypto-colors-near": "#1c1d1f",
+    "light-crypto-colors-neo": "#7dd224",
+    "light-crypto-colors-nimiq": "#f8b425",
+    "light-crypto-colors-osmo": "#302dbb",
+    "light-crypto-colors-okb": "#2d60e0",
+    "light-crypto-colors-peercoin": "#3cb054",
+    "light-crypto-colors-pirl": "#357ce1",
+    "light-crypto-colors-pivx": "#5c4c7c",
+    "light-crypto-colors-polkadot": "#e6007a",
+    "light-crypto-colors-stellar": "#000000",
+    "light-crypto-colors-tether-usdt": "#00a478",
+    "light-crypto-colors-tezos": "#2c7df7",
+    "light-crypto-colors-tkx": "#fd6a1f",
+    "light-crypto-colors-tron": "#ff060a",
+    "light-crypto-colors-tusd": "#1a5aff",
+    "light-crypto-colors-usdc": "#f04086",
+    "light-crypto-colors-uni": "#f04086",
+    "light-crypto-colors-waves": "#0055ff",
+    "light-crypto-colors-xrp": "#333333",
+    "light-crypto-colors-zcash": "#f4b728",
+    "light-crypto-colors-cro": "#002d74",
+    "light-crypto-colors-eng": "#2f2f2f",
+    "light-crypto-colors-hedera": "#000000",
+    "light-crypto-colors-polygon": "#8247e5",
+    "light-crypto-colors-sats": "#ff8b00",
+    "light-crypto-colors-sol": "#9945ff",
+    "light-crypto-colors-uniswap": "#ff007a",
+    "light-crypto-colors-xin": "#1eb5fa",
+    "light-crypto-colors-yieldly": "#f3b732",
+    "light-crypto-colors-omg-network": "#000000",
+    "light-crypto-colors-celo": "#fcff52",
+    "light-crypto-colors-ftm": "#1969ff",
+    "light-crypto-colors-dym": "#f1e1d4",
+    "light-crypto-colors-flr": "#e62058",
+    "light-discover-1inch": "#212529",
+    "light-discover-changelly": "#10d078",
+    "light-discover-compound": "#00d395",
+    "light-discover-deversifi": "#6436ff",
+    "light-discover-lido": "#47a1f8",
+    "light-discover-opensea": "#2081e2",
+    "light-discover-paraswap": "#266ef0",
+    "light-discover-rarible": "#feda03",
+    "light-discover-zerion": "#2962ef",
+    "light-discover-bitrefill": "#449bf7",
+    "light-discover-loopipay-blue": "#0050ff",
+    "light-discover-loopipay-black": "#0e0d13",
+    "light-discover-loopipay-lime": "#e1fb61",
+    "light-discover-simplex": "#2ea836",
+    "light-discover-baanx": "#003edd",
+    "light-discover-mercuryo": "#212529",
+    "light-discover-juno": "#4643ee",
+    "light-discover-sardine": "#2d29d7",
+    "light-purple-100": "#f6ecff",
+    "light-purple-200": "#f2e2ff",
+    "light-purple-300": "#eed9ff",
+    "light-purple-400": "#e5c6ff",
+    "light-purple-500": "#ddb3ff",
+    "light-purple-600": "#d4a0ff",
+    "light-purple-700": "#b380dd",
+    "light-purple-800": "#7e4ea5",
+    "light-purple-900": "#6a3794",
+    "light-purple-950": "#3f2058",
+    "light-purple-050": "#fbf5ff",
+    "dark-constant-400": "#c3c3c3",
+    "dark-constant-950": "#000000",
+    "dark-constant-050": "#ffffff",
+    "dark-green-100": "#2c4828",
+    "dark-green-200": "#33572e",
+    "dark-green-300": "#3b6c32",
+    "dark-green-400": "#47883a",
+    "dark-green-500": "#5ba34d",
+    "dark-green-600": "#6ec85c",
+    "dark-green-700": "#a2e095",
+    "dark-green-800": "#cbeec4",
+    "dark-green-900": "#e6f7e1",
+    "dark-green-950": "#f4fbf2",
+    "dark-green-050": "#142b12",
+    "dark-green-600---0%": "#6ec85c00",
+    "dark-green-600---10%": "#6ec85c1a",
+    "dark-yellow-100": "#63420f",
+    "dark-yellow-200": "#885a14",
+    "dark-yellow-300": "#ae731a",
+    "dark-yellow-400": "#d38b20",
+    "dark-yellow-500": "#efa22f",
+    "dark-yellow-600": "#ffbd42",
+    "dark-yellow-700": "#ffd373",
+    "dark-yellow-800": "#ffe7ac",
+    "dark-yellow-900": "#fff3d5",
+    "dark-yellow-950": "#fff8e6",
+    "dark-yellow-050": "#3e2909",
+    "dark-yellow-600---0%": "#ffbd4200",
+    "dark-yellow-600---10%": "#ffbd421a",
+    "dark-red-100": "#702e2f",
+    "dark-red-200": "#852e2f",
+    "dark-red-300": "#a43234",
+    "dark-red-400": "#c24244",
+    "dark-red-500": "#f04f52",
+    "dark-red-600": "#f87274",
+    "dark-red-700": "#fca6a7",
+    "dark-red-800": "#fec8c9",
+    "dark-red-900": "#fee1e2",
+    "dark-red-1000": "#fef1f1",
+    "dark-red-050": "#3b1212",
+    "dark-red-600---0%": "#f8727400",
+    "dark-red-600---10%": "#f872741a",
+    "dark-grey-100": "#191919",
+    "dark-grey-200": "#272727",
+    "dark-grey-300": "#3c3c3c",
+    "dark-grey-400": "#565656",
+    "dark-grey-500": "#717070",
+    "dark-grey-600": "#848484",
+    "dark-grey-700": "#9c9c9c",
+    "dark-grey-800": "#c3c3c3",
+    "dark-grey-900": "#e1e1e1",
+    "dark-grey-950": "#ffffff",
+    "dark-grey-050---10%": "#0000001a",
+    "dark-grey-050---20%": "#00000033",
+    "dark-grey-050---30%": "#0000004d",
+    "dark-grey-050---40%": "#00000066",
+    "dark-grey-050---50%": "#00000080",
+    "dark-grey-050---60%": "#00000099",
+    "dark-grey-050---70%": "#000000b3",
+    "dark-grey-050---80%": "#000000cc",
+    "dark-grey-050---90%": "#000000e6",
+    "dark-grey-950---10%": "#ffffff1a",
+    "dark-grey-950---20%": "#ffffff33",
+    "dark-grey-950---30%": "#ffffff4d",
+    "dark-grey-950---40%": "#ffffff66",
+    "dark-grey-950---50%": "#ffffff80",
+    "dark-grey-950---60%": "#ffffff99",
+    "dark-grey-950---70%": "#ffffffb3",
+    "dark-grey-950---80%": "#ffffffcc",
+    "dark-grey-950---90%": "#ffffffe6",
+    "dark-grey-050": "#000000",
+    "dark-grey-950---0%": "#ffffff00",
+    "dark-grey-050---0%": "#00000000",
+    "dark-grey-050---5%": "#0000000d",
+    "dark-grey-950---5%": "#ffffff0d",
+    "dark-grey-950---2%": "#ffffff05",
+    "dark-orange-100": "#9e3300",
+    "dark-orange-200": "#b23a00",
+    "dark-orange-300": "#d64400",
+    "dark-orange-400": "#ff5300",
+    "dark-orange-500": "#ff702a",
+    "dark-orange-600": "#ff8c55",
+    "dark-orange-700": "#ffa97f",
+    "dark-orange-800": "#ffc2a4",
+    "dark-orange-900": "#ffddcc",
+    "dark-orange-950": "#fef0e9",
+    "dark-orange-050": "#662100",
+    "dark-crypto-colors-aion": "#212529",
+    "dark-crypto-colors-algorand": "#00a478",
+    "dark-crypto-colors-bytecoin": "#f04086",
+    "dark-crypto-colors-avax": "#e84142",
+    "dark-crypto-colors-bat": "#ff5000",
+    "dark-crypto-colors-bgb": "#00e0ff",
+    "dark-crypto-colors-bitcoin": "#f7931a",
+    "dark-crypto-colors-bitcoin-cash": "#0ac18e",
+    "dark-crypto-colors-bitcoin-gold": "#152569",
+    "dark-crypto-colors-bitcoin-sv": "#eab300",
+    "dark-crypto-colors-bincance": "#f5bc00",
+    "dark-crypto-colors-cardano": "#0033ad",
+    "dark-crypto-colors-cosmos": "#2e3148",
+    "dark-crypto-colors-compound": "#00d395",
+    "dark-crypto-colors-celo": "#fcff52",
+    "dark-crypto-colors-chainlink": "#2a5ada",
+    "dark-crypto-colors-cro": "#002d74",
+    "dark-crypto-colors-dash": "#008ce7",
+    "dark-crypto-colors-dai": "#f5ac37",
+    "dark-crypto-colors-decred": "#2970ff",
+    "dark-crypto-colors-digibyte": "#0066cc",
+    "dark-crypto-colors-dogecoin": "#c3a634",
+    "dark-crypto-colors-dydx": "#6966ff",
+    "dark-crypto-colors-dym": "#f1e1d4",
+    "dark-crypto-colors-elrond": "#000000",
+    "dark-crypto-colors-eng": "#2f2f2f",
+    "dark-crypto-colors-eos": "#000000",
+    "dark-crypto-colors-ethergem": "#4a4ab6",
+    "dark-crypto-colors-ethereum": "#454a75",
+    "dark-crypto-colors-ethereum-classic": "#0b8311",
+    "dark-crypto-colors-flr": "#e62058",
+    "dark-crypto-colors-ftm": "#1969ff",
+    "dark-crypto-colors-hedera": "#000000",
+    "dark-crypto-colors-hnt": "#474dff",
+    "dark-crypto-colors-huobi": "#357ce1",
+    "dark-crypto-colors-iota": "#000000",
+    "dark-crypto-colors-komodo": "#41ead4",
+    "dark-crypto-colors-leo": "#000000",
+    "dark-crypto-colors-litecoin": "#345d9d",
+    "dark-crypto-colors-monero": "#f26822",
+    "dark-crypto-colors-multiverse-x": "#23f7dd",
+    "dark-crypto-colors-nano": "#5d8eb2",
+    "dark-crypto-colors-near": "#1c1d1f",
+    "dark-crypto-colors-neo": "#7dd224",
+    "dark-crypto-colors-nimiq": "#f8b425",
+    "dark-crypto-colors-omg-network": "#000000",
+    "dark-crypto-colors-okb": "#2d60e0",
+    "dark-crypto-colors-osmo": "#302dbb",
+    "dark-crypto-colors-peercoin": "#3cb054",
+    "dark-crypto-colors-pirl": "#357ce1",
+    "dark-crypto-colors-pivx": "#5c4c7c",
+    "dark-crypto-colors-polkadot": "#e6007a",
+    "dark-crypto-colors-polygon": "#8247e5",
+    "dark-crypto-colors-sats": "#ff8b00",
+    "dark-crypto-colors-stellar": "#000000",
+    "dark-crypto-colors-sol": "#9945ff",
+    "dark-crypto-colors-tether-usdt": "#00a478",
+    "dark-crypto-colors-tezos": "#2c7df7",
+    "dark-crypto-colors-tkx": "#fd6a1f",
+    "dark-crypto-colors-tron": "#ff060a",
+    "dark-crypto-colors-uniswap": "#ff007a",
+    "dark-crypto-colors-tusd": "#1a5aff",
+    "dark-crypto-colors-usdc": "#f04086",
+    "dark-crypto-colors-uni": "#f04086",
+    "dark-crypto-colors-waves": "#0055ff",
+    "dark-crypto-colors-xrp": "#333333",
+    "dark-crypto-colors-xin": "#1eb5fa",
+    "dark-crypto-colors-yieldly": "#f3b732",
+    "dark-crypto-colors-zcash": "#f4b728",
+    "dark-discover-1inch": "#212529",
+    "dark-discover-changelly": "#10d078",
+    "dark-discover-loopipay-blue": "#0050ff",
+    "dark-discover-loopipay-black": "#0e0d13",
+    "dark-discover-loopipay-lime-2": "#e1fb61",
+    "dark-discover-simplex": "#2ea836",
+    "dark-discover-baanx": "#003edd",
+    "dark-discover-mercuryo": "#212529",
+    "dark-discover-juno": "#4643ee",
+    "dark-discover-sardine": "#2d29d7",
+    "dark-discover-compound": "#00d395",
+    "dark-discover-deversifi": "#6436ff",
+    "dark-discover-lido": "#47a1f8",
+    "dark-discover-opensea": "#2081e2",
+    "dark-discover-paraswap": "#266ef0",
+    "dark-discover-rarible": "#feda03",
+    "dark-discover-zerion": "#2962ef",
+    "dark-discover-bitrefill": "#449bf7",
+    "dark-purple-100": "#6a3794",
+    "dark-purple-200": "#7e4ea5",
+    "dark-purple-300": "#b380dd",
+    "dark-purple-400": "#d4a0ff",
+    "dark-purple-500": "#ddb3ff",
+    "dark-purple-600": "#e5c6ff",
+    "dark-purple-700": "#eed9ff",
+    "dark-purple-800": "#f2e2ff",
+    "dark-purple-900": "#f6ecff",
+    "dark-purple-950": "#fbf5ff",
+    "dark-purple-050": "#3f2058"
+}));
+
+
+},
+1507(__unused_rspack_module, __webpack_exports__, __webpack_require__) {
+
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, {
+  withTokens: () => (/* binding */ withTokens)
+});
+
+;// CONCATENATED MODULE: external "lodash/memoize"
+const memoize_namespaceObject = require("lodash/memoize");
+var memoize_default = /*#__PURE__*/__webpack_require__.n(memoize_namespaceObject);
+// EXTERNAL MODULE: external "styled-components"
+var external_styled_components_ = __webpack_require__(2770);
+// EXTERNAL MODULE: ./src/pre-ldls/libs/design-tokens.ts
+var design_tokens = __webpack_require__(8112);
+;// CONCATENATED MODULE: ./src/pre-ldls/libs/index.ts
+
+
+
+// Add temporarily missing and override incorrect tokens here
+const overrideOther = {
+    "radius-m": "12px",
+    "radius-s": "8px",
+    "radius-xs": "4px",
+    "border-width-default": "1px",
+    "border-width-focus": "2px",
+    "margin-xs": "8px",
+    "margin-s": "16px",
+    "margin-m": "24px",
+    "margin-l": "32px",
+    "spacing-xs": "12px",
+    "spacing-xxs": "8px"
+};
+// Add temporarily missing and override incorrect colours here
+const overrideColor = {
+    light: {
+        "surface-transparent-hover": "#0000000D",
+        "surface-transparent-pressed": "#0000001A",
+        "border-subdued-default-hover": "#D5D5D5",
+        "border-subdued-default-pressed": "#C1C1C1",
+        "background-active": "#D4A0FF"
+    },
+    dark: {
+        "opacity-default-10": "#FFFFFF1A",
+        "background-active": "#D4A0FF"
+    }
+};
+const withTokens = (...usedTokens)=>{
+    const filterTokens = memoize_default()((theme)=>{
+        const colors = {
+            dark: {
+                ...design_tokens.dark,
+                ...overrideColor.dark
+            },
+            light: {
+                ...design_tokens.light,
+                ...overrideColor.light
+            }
+        }[theme];
+        const colorEntries = Object.entries(colors).flatMap(([key, value])=>{
+            const color = `colors-${key}`;
+            if (!usedTokens.includes(color)) return [];
+            return [
+                [
+                    `--${color}`,
+                    value
+                ]
+            ];
+        });
+        const otherEntries = [
+            design_tokens.spacing,
+            overrideOther
+        ].flatMap(Object.entries).flatMap(([key, value])=>{
+            if (!usedTokens.includes(key)) return [];
+            return [
+                [
+                    `--${key}`,
+                    value
+                ]
+            ];
+        });
+        return Object.fromEntries([
+            ...colorEntries,
+            ...otherEntries
+        ]);
+    });
+    return (0,external_styled_components_.css)(({ theme })=>filterTokens(theme.colors.type));
+};
+
+
+},
+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)));
+
+
+},
+4505(module) {
+module.exports = require("@ledgerhq/crypto-icons");
+
+},
+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.
+(() => {
+// ESM COMPAT FLAG
+__webpack_require__.r(__webpack_exports__);
+
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, {
+  TestNetworkClick: () => (/* binding */ TestNetworkClick),
+  "default": () => (/* binding */ NetworkList_stories),
+  Default: () => (/* binding */ Default)
+});
+
+// EXTERNAL MODULE: external "react"
+var external_react_ = __webpack_require__(2015);
+var external_react_default = /*#__PURE__*/__webpack_require__.n(external_react_);
+// EXTERNAL MODULE: ./src/pre-ldls/components/NetworkList/NetworkList.tsx
+var NetworkList = __webpack_require__(5228);
+;// CONCATENATED MODULE: external "@storybook/test"
+const test_namespaceObject = require("@storybook/test");
+;// CONCATENATED MODULE: ./src/pre-ldls/components/NetworkList/NetworkList.stories.tsx
+
+
+
+const testFn = (0,test_namespaceObject.fn)();
+const meta = {
+    component: NetworkList.NetworkList,
+    decorators: [
+        (Story)=>/*#__PURE__*/ external_react_default().createElement("div", {
+                style: {
+                    height: "400px"
+                }
+            }, /*#__PURE__*/ external_react_default().createElement(Story, null))
+    ],
+    title: "PreLdls/Components/NetworkList",
+    tags: [
+        "autodocs"
+    ],
+    args: {
+        networks: Array.from({
+            length: 50
+        }, (_, i)=>({
+                name: `Bitcoin ${i}`,
+                id: `bitcoin`,
+                ticker: "btc"
+            })),
+        onClick: testFn
+    }
+};
+/* export default */ const NetworkList_stories = (meta);
 const Default = {};
 const TestNetworkClick = {
-  play: async ({ canvasElement }) => {
-    const canvas = (0, import_test.within)(canvasElement);
-    const input = canvas.getByText("Bitcoin 1");
-    await import_test.userEvent.click(input);
-    await (0, import_test.expect)(testFn).toHaveBeenCalledWith("bitcoin");
-  }
+    play: async ({ canvasElement })=>{
+        const canvas = (0,test_namespaceObject.within)(canvasElement);
+        const input = canvas.getByText("Bitcoin 1");
+        await test_namespaceObject.userEvent.click(input);
+        await (0,test_namespaceObject.expect)(testFn).toHaveBeenCalledWith("bitcoin");
+    }
 };
-//# sourceMappingURL=NetworkList.stories.js.map
+
+})();
+
+module.exports = __webpack_exports__;
+})()
+;
+//# sourceMappingURL=NetworkList.stories.js.map