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

package/lib/cjs/components/navigation/sideBar/SideBar/SideBar.stories.js

@@ -1,73 +1,1274 @@
+(() => {
 "use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var SideBar_stories_exports = {};
-__export(SideBar_stories_exports, {
-  Default: () => Default,
-  default: () => SideBar_stories_default
-});
-module.exports = __toCommonJS(SideBar_stories_exports);
-var import_react = __toESM(require("react"));
-var import_manager_api = require("@storybook/manager-api");
-var import_SideBar = __toESM(require("./SideBar"));
-var import_addon_actions = require("@storybook/addon-actions");
-var import_PortfolioMedium = __toESM(require("@ledgerhq/icons-ui/reactLegacy/PortfolioMedium"));
-var import_WalletMedium = __toESM(require("@ledgerhq/icons-ui/reactLegacy/WalletMedium"));
-var import_ManagerMedium = __toESM(require("@ledgerhq/icons-ui/reactLegacy/ManagerMedium"));
-var import_ArrowTopMedium = __toESM(require("@ledgerhq/icons-ui/reactLegacy/ArrowTopMedium"));
-var import_ArrowBottomMedium = __toESM(require("@ledgerhq/icons-ui/reactLegacy/ArrowBottomMedium"));
-var import_BuyCryptoAltMedium = __toESM(require("@ledgerhq/icons-ui/reactLegacy/BuyCryptoAltMedium"));
-var import_BuyCryptoMedium = __toESM(require("@ledgerhq/icons-ui/reactLegacy/BuyCryptoMedium"));
-var import_LendMedium = __toESM(require("@ledgerhq/icons-ui/reactLegacy/LendMedium"));
-var import_NanoFoldedMedium = __toESM(require("@ledgerhq/icons-ui/reactLegacy/NanoFoldedMedium"));
-var SideBar_stories_default = {
-  title: "Navigation/SideBar/SideBar",
-  component: import_SideBar.default,
-  argTypes: {
-    children: {
-      type: "text",
-      description: "A list a SideBar.Item",
-      required: true,
-      control: false
-    },
-    isExpanded: { control: false },
-    onToggle: { control: false }
-  }
-};
-const Template = (args) => {
-  const [currentArgs, updateArgs] = (0, import_manager_api.useArgs)();
-  const handleToggle = () => updateArgs({ isExpanded: !currentArgs.isExpanded });
-  const sidebarIconSize = 20;
-  return /* @__PURE__ */ import_react.default.createElement(import_SideBar.default, { ...args, onToggle: handleToggle }, /* @__PURE__ */ import_react.default.createElement(import_SideBar.default.Item, { onClick: (0, import_addon_actions.action)("go to portfolio"), label: "portfolio" }, /* @__PURE__ */ import_react.default.createElement(import_PortfolioMedium.default, { size: sidebarIconSize })), /* @__PURE__ */ import_react.default.createElement(import_SideBar.default.Item, { onClick: (0, import_addon_actions.action)("go to accounts"), label: "accounts", isActive: true }, /* @__PURE__ */ import_react.default.createElement(import_WalletMedium.default, { size: sidebarIconSize })), /* @__PURE__ */ import_react.default.createElement(import_SideBar.default.Item, { onClick: (0, import_addon_actions.action)("go to discover"), label: "discover", isDisabled: true }, /* @__PURE__ */ import_react.default.createElement(import_ManagerMedium.default, { size: sidebarIconSize })), /* @__PURE__ */ import_react.default.createElement(import_SideBar.default.Item, { onClick: (0, import_addon_actions.action)("go to send"), label: "send", isDisabled: true }, /* @__PURE__ */ import_react.default.createElement(import_ArrowTopMedium.default, { size: sidebarIconSize })), /* @__PURE__ */ import_react.default.createElement(import_SideBar.default.Item, { onClick: (0, import_addon_actions.action)("go to receive"), label: "receive" }, /* @__PURE__ */ import_react.default.createElement(import_ArrowBottomMedium.default, { size: sidebarIconSize })), /* @__PURE__ */ import_react.default.createElement(import_SideBar.default.Item, { onClick: (0, import_addon_actions.action)("go to buy / Sell"), label: "buy / Sell" }, /* @__PURE__ */ import_react.default.createElement(import_BuyCryptoAltMedium.default, { size: sidebarIconSize })), /* @__PURE__ */ import_react.default.createElement(import_SideBar.default.Item, { onClick: (0, import_addon_actions.action)("go to exchange"), label: "exchange" }, /* @__PURE__ */ import_react.default.createElement(import_BuyCryptoMedium.default, { size: sidebarIconSize })), /* @__PURE__ */ import_react.default.createElement(import_SideBar.default.Item, { onClick: (0, import_addon_actions.action)("go to lend"), label: "lend" }, /* @__PURE__ */ import_react.default.createElement(import_LendMedium.default, { size: sidebarIconSize })), /* @__PURE__ */ import_react.default.createElement(import_SideBar.default.Item, { onClick: (0, import_addon_actions.action)("go to manager"), label: "manager", displayNotificationBadge: true }, /* @__PURE__ */ import_react.default.createElement(import_NanoFoldedMedium.default, { size: sidebarIconSize })));
+var __webpack_modules__ = ({
+2837(__unused_rspack_module, __webpack_exports__, __webpack_require__) {
+__webpack_require__.d(__webpack_exports__, {
+  "default": () => (__rspack_default_export)
+});
+/* import */ var react__rspack_import_0 = __webpack_require__(2015);
+/* import */ var react__rspack_import_0_default = /*#__PURE__*/__webpack_require__.n(react__rspack_import_0);
+
+function LedgerLiveAltRegular({ width = 38, height = 32, color = "currentColor" }) {
+    return /*#__PURE__*/ react__rspack_import_0.createElement("svg", {
+        width: width,
+        height: height,
+        viewBox: "0 0 38 32",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg"
+    }, /*#__PURE__*/ react__rspack_import_0.createElement("path", {
+        d: "M0.620148 22.9137V32H14.4471V29.9849H2.63476V22.9137H0.620148ZM35.3653 22.9137V29.9849H23.553V31.9995H37.3799V22.9137H35.3653ZM14.4671 9.08631V22.9132H23.553V21.0961H16.4817V9.08631H14.4671ZM0.620148 0V9.08631H2.63476V2.01461H14.4471V0H0.620148ZM23.553 0V2.01461H35.3653V9.08631H37.3799V0H23.553Z",
+        fill: color
+    }));
+}
+/* export default */ const __rspack_default_export = (LedgerLiveAltRegular);
+
+
+},
+6456(__unused_rspack_module, __webpack_exports__, __webpack_require__) {
+__webpack_require__.d(__webpack_exports__, {
+  "default": () => (__rspack_default_export)
+});
+/* import */ var react__rspack_import_0 = __webpack_require__(2015);
+/* import */ var react__rspack_import_0_default = /*#__PURE__*/__webpack_require__.n(react__rspack_import_0);
+
+function LedgerLiveRegular({ width = 220, height = 60, color = "currentColor" }) {
+    return /*#__PURE__*/ react__rspack_import_0.createElement("svg", {
+        width: width,
+        height: height,
+        viewBox: "0 0 220 60",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg"
+    }, /*#__PURE__*/ react__rspack_import_0.createElement("path", {
+        d: "M0 42.9632V60H25.9539V56.2217H3.78153V42.9632H0ZM65.2185 42.9632V56.2217H43.0461V59.9991H69V42.9632H65.2185ZM25.9915 17.0368V42.9623H43.0461V39.5551H29.7731V17.0368H25.9915ZM0 0V17.0368H3.78153V3.7774H25.9539V0H0ZM43.0461 0V3.7774H65.2185V17.0368H69V0H43.0461Z",
+        fill: color
+    }), /*#__PURE__*/ react__rspack_import_0.createElement("path", {
+        d: "M86.7939 17.75H90.5814L92.1189 39.725H92.6439L94.4814 22.2125H100.144L102.019 39.725H102.544L104.156 17.75H107.794L105.356 44H99.5439L97.5564 26.4875H97.0314L95.0439 44H89.2314L86.7939 17.75Z",
+        fill: color
+    }), /*#__PURE__*/ react__rspack_import_0.createElement("path", {
+        d: "M129.904 44H125.892L124.204 37.625H115.317L113.554 44H109.654L117.229 17.75H122.554L129.904 44ZM116.254 34.175H123.304L120.117 22.025H119.592L116.254 34.175Z",
+        fill: color
+    }), /*#__PURE__*/ react__rspack_import_0.createElement("path", {
+        d: "M134.577 17.75H138.402V40.55H151.827V44H134.577V17.75Z",
+        fill: color
+    }), /*#__PURE__*/ react__rspack_import_0.createElement("path", {
+        d: "M157.062 17.75H160.887V40.55H174.312V44H157.062V17.75Z",
+        fill: color
+    }), /*#__PURE__*/ react__rspack_import_0.createElement("path", {
+        d: "M179.173 17.75H195.673V21.2H182.998V29.075H194.548V32.525H182.998V40.55H196.235V44H179.173V17.75Z",
+        fill: color
+    }), /*#__PURE__*/ react__rspack_import_0.createElement("path", {
+        d: "M207.808 21.2H199.596V17.75H219.846V21.2H211.633V44H207.808V21.2Z",
+        fill: color
+    }));
+}
+/* export default */ const __rspack_default_export = (LedgerLiveRegular);
+
+
+},
+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"
+    }
+};
+
+
+},
+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);
+
+
+},
+1698(__unused_rspack_module, __webpack_exports__, __webpack_require__) {
+__webpack_require__.d(__webpack_exports__, {
+  "default": () => (__rspack_default_export)
+});
+/* import */ var react__rspack_import_0 = __webpack_require__(2015);
+/* import */ var react__rspack_import_0_default = /*#__PURE__*/__webpack_require__.n(react__rspack_import_0);
+/* import */ var styled_components__rspack_import_1 = __webpack_require__(2770);
+/* import */ var styled_components__rspack_import_1_default = /*#__PURE__*/__webpack_require__.n(styled_components__rspack_import_1);
+/* import */ var _index__rspack_import_3 = __webpack_require__(4967);
+/* import */ var _asorted_Text__rspack_import_2 = __webpack_require__(348);
+/* import */ var _transitions_TransitionInOut__rspack_import_4 = __webpack_require__(660);
+/* import */ var _layout_Flex__rspack_import_5 = __webpack_require__(3696);
+
+
+
+
+
+
+const ItemWrapper = (styled_components__rspack_import_1_default().li)`
+  /** DEFAULT VARIANT **/
+  --ll-sidebar-item-label-color: ${(props)=>props.theme.colors.neutral.c80};
+  --ll-sidebar-item-icon-color: ${(props)=>props.theme.colors.neutral.c80};
+  --ll-sidebar-item-background-color: unset;
+
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-top: ${(p)=>p.theme.space[3]}px;
+  column-gap: ${(p)=>p.theme.space[5]}px;
+  padding: ${(p)=>p.theme.space[5]}px;
+  border-radius: ${(p)=>p.theme.space[3]}px;
+  min-height: ${(p)=>p.theme.space[13]}px;
+  min-width: ${(p)=>p.theme.space[13]}px;
+
+  color: var(--ll-sidebar-item-icon-color);
+  background-color: var(--ll-sidebar-item-background-color);
+  cursor: pointer;
+
+  /** HOVER VARIANT **/
+  &:hover {
+    --ll-sidebar-item-label-color: ${(props)=>props.theme.colors.neutral.c100};
+    --ll-sidebar-item-icon-color: ${(props)=>props.theme.colors.primary.c80};
+    --ll-sidebar-item-background-color: unset;
+  }
+
+  /** FOCUS VARIANT **/
+  &:focus {
+    box-shadow: 0px 0px 0px 4px rgba(187, 176, 255, 0.4);
+    border-radius: ${(p)=>p.theme.space[3]}px;
+  }
+
+  /** ACTIVE VARIANT **/
+  &[data-active="true"] {
+    --ll-sidebar-item-label-color: ${(props)=>props.theme.colors.neutral.c100};
+    --ll-sidebar-item-icon-color: ${(props)=>props.theme.colors.primary.c80};
+    --ll-sidebar-item-background-color: ${(props)=>props.theme.colors.primary.c20};
+  }
+
+  /** DISABLE VARIANT **/
+  &[data-disable="true"] {
+    --ll-sidebar-item-label-color: ${(props)=>props.theme.colors.neutral.c80};
+    --ll-sidebar-item-icon-color: ${(props)=>props.theme.colors.neutral.c80};
+    --ll-sidebar-item-background-color: unset;
+    opacity: 0.3;
+    cursor: unset;
+    pointer-events: none;
+  }
+`;
+const CollapsedBadgeContainer = (styled_components__rspack_import_1_default().div)`
+  position: absolute;
+  margin-top: -${(p)=>p.theme.space[11]}px;
+  margin-left: ${(p)=>p.theme.space[8]}px;
+`;
+const DefaultBadge = (styled_components__rspack_import_1_default().div)`
+  height: ${(p)=>p.theme.space[4]}px;
+  width: ${(p)=>p.theme.space[4]}px;
+  border-radius: ${(p)=>p.theme.radii[2]}px;
+  background-color: ${(p)=>p.theme.colors.primary.c80};
+`;
+const ItemLabel = styled_components__rspack_import_1_default()((0,_asorted_Text__rspack_import_2["default"]))`
+  display: inline-block;
+  color: var(--ll-sidebar-item-label-color);
+
+  text-transform: capitalize;
+`;
+const Item = ({ label, children, onClick, isActive, isDisabled, displayNotificationBadge, customNotificationBadge })=>{
+    const { isExpanded } = (0,react__rspack_import_0.useContext)(_index__rspack_import_3["default"]);
+    const handleClick = ()=>{
+        if (isDisabled) return;
+        onClick();
+    };
+    const badge = customNotificationBadge ?? /*#__PURE__*/ react__rspack_import_0_default().createElement(DefaultBadge, null);
+    return /*#__PURE__*/ react__rspack_import_0_default().createElement((react__rspack_import_0_default().Fragment), null, /*#__PURE__*/ react__rspack_import_0_default().createElement(ItemWrapper, {
+        role: "button",
+        onClick: handleClick,
+        "data-active": isActive,
+        "data-disable": isDisabled,
+        tabIndex: 0
+    }, children, /*#__PURE__*/ react__rspack_import_0_default().createElement(CollapsedBadgeContainer, null, /*#__PURE__*/ react__rspack_import_0_default().createElement(_transitions_TransitionInOut__rspack_import_4["default"], {
+        unmountOnExit: true,
+        mountOnEnter: true,
+        in: !isExpanded,
+        style: {
+            transitionDelay: !isExpanded ? "200ms" : 0
+        }
+    }, displayNotificationBadge && badge)), /*#__PURE__*/ react__rspack_import_0_default().createElement(_transitions_TransitionInOut__rspack_import_4["default"], {
+        timeout: 200,
+        in: isExpanded,
+        unmountOnExit: true,
+        mountOnEnter: true,
+        style: {
+            transitionDelay: isExpanded ? "200ms" : 0,
+            display: "flex",
+            flex: "1"
+        }
+    }, /*#__PURE__*/ react__rspack_import_0_default().createElement(ItemLabel, {
+        variant: "paragraph"
+    }, label), /*#__PURE__*/ react__rspack_import_0_default().createElement(_layout_Flex__rspack_import_5["default"], {
+        alignItems: "center",
+        justifyContent: "flex-end",
+        ml: 2,
+        flexGrow: 1
+    }, displayNotificationBadge && badge))));
+};
+/* export default */ const __rspack_default_export = (Item);
+
+
+},
+5378(__unused_rspack_module, __webpack_exports__, __webpack_require__) {
+__webpack_require__.d(__webpack_exports__, {
+  "default": () => (__rspack_default_export)
+});
+/* import */ var react__rspack_import_0 = __webpack_require__(2015);
+/* import */ var react__rspack_import_0_default = /*#__PURE__*/__webpack_require__.n(react__rspack_import_0);
+/* import */ var styled_components__rspack_import_1 = __webpack_require__(2770);
+/* import */ var styled_components__rspack_import_1_default = /*#__PURE__*/__webpack_require__.n(styled_components__rspack_import_1);
+/* import */ var _assets_logos_LedgerLiveRegular__rspack_import_4 = __webpack_require__(6456);
+/* import */ var _assets_logos_LedgerLiveAltRegular__rspack_import_5 = __webpack_require__(2837);
+/* import */ var _navigation_sideBar__rspack_import_2 = __webpack_require__(4967);
+/* import */ var _transitions_TransitionInOut__rspack_import_3 = __webpack_require__(660);
+
+
+
+
+
+
+const Container = (styled_components__rspack_import_1_default().div)`
+  display: flex;
+  flex-direction: row;
+  overflow: hidden;
+`;
+const Logo = ()=>{
+    const { isExpanded } = (0,react__rspack_import_0.useContext)(_navigation_sideBar__rspack_import_2["default"]);
+    return /*#__PURE__*/ react__rspack_import_0_default().createElement(Container, null, /*#__PURE__*/ react__rspack_import_0_default().createElement(_transitions_TransitionInOut__rspack_import_3["default"], {
+        timeout: 300,
+        in: isExpanded,
+        unmountOnExit: true,
+        mountOnEnter: true,
+        style: {
+            transitionDelay: "300ms",
+            marginLeft: "1rem"
+        }
+    }, /*#__PURE__*/ react__rspack_import_0_default().createElement(_assets_logos_LedgerLiveRegular__rspack_import_4["default"], null)), /*#__PURE__*/ react__rspack_import_0_default().createElement(_transitions_TransitionInOut__rspack_import_3["default"], {
+        timeout: 300,
+        in: !isExpanded,
+        unmountOnExit: true,
+        mountOnEnter: true,
+        style: {
+            margin: "auto",
+            transitionDelay: "300ms"
+        }
+    }, /*#__PURE__*/ react__rspack_import_0_default().createElement(_assets_logos_LedgerLiveAltRegular__rspack_import_5["default"], null)));
+};
+/* export default */ const __rspack_default_export = (Logo);
+
+
+},
+5622(__unused_rspack_module, __webpack_exports__, __webpack_require__) {
+__webpack_require__.d(__webpack_exports__, {
+  "default": () => (__rspack_default_export)
+});
+/* import */ var react__rspack_import_0 = __webpack_require__(2015);
+/* import */ var react__rspack_import_0_default = /*#__PURE__*/__webpack_require__.n(react__rspack_import_0);
+/* import */ var react_transition_group__rspack_import_1 = __webpack_require__(7727);
+/* import */ var react_transition_group__rspack_import_1_default = /*#__PURE__*/__webpack_require__.n(react_transition_group__rspack_import_1);
+/* import */ var styled_components__rspack_import_2 = __webpack_require__(2770);
+/* import */ var styled_components__rspack_import_2_default = /*#__PURE__*/__webpack_require__.n(styled_components__rspack_import_2);
+/* import */ var _navigation_sideBar__rspack_import_4 = __webpack_require__(4967);
+/* import */ var _layout_Flex__rspack_import_3 = __webpack_require__(3696);
+/* import */ var _navigation_sideBar_Item__rspack_import_7 = __webpack_require__(1698);
+/* import */ var _navigation_sideBar_Logo__rspack_import_6 = __webpack_require__(5378);
+/* import */ var _navigation_sideBar_Toggle__rspack_import_5 = __webpack_require__(8548);
+
+
+
+
+
+
+
+
+const Nav = styled_components__rspack_import_2_default()((0,_layout_Flex__rspack_import_3["default"]))`
+  position: relative;
+  padding: ${(p)=>`${p.theme.space[19]}px ${p.theme.space[5]}px 0`};
+  row-gap: 1.5rem;
+  height: 100vh;
+  width: 14.875rem;
+  color: ${(props)=>props.theme.colors.neutral.c100};
+  border-right: 1px solid ${(props)=>props.theme.colors.neutral.c40};
+  background-color: ${(props)=>props.theme.colors.background.main};
+  transition: width 200ms;
+  will-change: width;
+  flex-shrink: 0;
+  z-index: ${(p)=>p.theme.zIndexes[2]};
+
+  &.nav-enter {
+    width: ${(p)=>p.theme.space[19]}px;
+  }
+  &.nav-enter-done {
+    width: 14.875rem;
+  }
+  &.nav-exit {
+    width: 14.875rem;
+  }
+  &.nav-exit-done {
+    width: ${(p)=>`${p.theme.space[19]}px`};
+  }
+`;
+const TransparentMouseZone = (styled_components__rspack_import_2_default().div)`
+  position: absolute;
+  left: 100%;
+  top: 0;
+  width: ${(p)=>`${p.theme.space[8]}px`};
+  height: 100%;
+`;
+const SideBar = ({ children, onToggle, isExpanded = true })=>{
+    const [isToggleDisplayed, setToggleDisplayed] = (0,react__rspack_import_0.useState)(false);
+    const providerValue = (0,react__rspack_import_0.useMemo)(()=>({
+            isExpanded,
+            onToggle
+        }), [
+        isExpanded,
+        onToggle
+    ]);
+    return /*#__PURE__*/ react__rspack_import_0_default().createElement(_navigation_sideBar__rspack_import_4["default"].Provider, {
+        value: providerValue
+    }, /*#__PURE__*/ react__rspack_import_0_default().createElement(react_transition_group__rspack_import_1.CSSTransition, {
+        in: isExpanded,
+        timeout: 200,
+        classNames: "nav"
+    }, /*#__PURE__*/ react__rspack_import_0_default().createElement(Nav, {
+        flexDirection: "column",
+        justifyContent: "flex-start",
+        alignContent: "stretch",
+        role: "navigation",
+        "aria-label": "Main",
+        onMouseEnter: ()=>setToggleDisplayed(true),
+        onMouseLeave: ()=>setToggleDisplayed(false)
+    }, /*#__PURE__*/ react__rspack_import_0_default().createElement(TransparentMouseZone, null), /*#__PURE__*/ react__rspack_import_0_default().createElement(_navigation_sideBar_Toggle__rspack_import_5["default"], {
+        isDisplayed: isToggleDisplayed
+    }), /*#__PURE__*/ react__rspack_import_0_default().createElement(_navigation_sideBar_Logo__rspack_import_6["default"], null), /*#__PURE__*/ react__rspack_import_0_default().createElement(_layout_Flex__rspack_import_3["default"], {
+        flexDirection: "column",
+        justifyContent: "flex-start",
+        alignContent: "stretch"
+    }, children))));
+};
+SideBar.Item = _navigation_sideBar_Item__rspack_import_7["default"];
+/* export default */ const __rspack_default_export = (SideBar);
+
+
+},
+8548(__unused_rspack_module, __webpack_exports__, __webpack_require__) {
+
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, {
+  "default": () => (/* binding */ Toggle)
+});
+
+// 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 "@ledgerhq/icons-ui/reactLegacy/ArrowLeftMedium"
+var ArrowLeftMedium_ = __webpack_require__(3935);
+var ArrowLeftMedium_default = /*#__PURE__*/__webpack_require__.n(ArrowLeftMedium_);
+;// CONCATENATED MODULE: external "@ledgerhq/icons-ui/reactLegacy/ArrowRightMedium"
+const ArrowRightMedium_namespaceObject = require("@ledgerhq/icons-ui/reactLegacy/ArrowRightMedium");
+var ArrowRightMedium_default = /*#__PURE__*/__webpack_require__.n(ArrowRightMedium_namespaceObject);
+// EXTERNAL MODULE: ./src/components/transitions/TransitionInOut.tsx
+var TransitionInOut = __webpack_require__(660);
+// EXTERNAL MODULE: ./src/components/navigation/sideBar/index.tsx
+var sideBar = __webpack_require__(4967);
+;// CONCATENATED MODULE: ./src/components/navigation/sideBar/Toggle/Toggle.tsx
+
+
+
+
+
+
+const ToggleButtonContainer = external_styled_components_default()((0,TransitionInOut["default"]))`
+  --ll-side-bar-toggle-button-size: ${(p)=>p.theme.space[10]}px;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  top: var(--ll-side-bar-toggle-button-size);
+  right: calc(var(--ll-side-bar-toggle-button-size) / -2);
+  cursor: pointer;
+
+  background: ${(p)=>p.theme.colors.neutral.c20};
+  border: 1px solid ${(p)=>p.theme.colors.neutral.c100};
+  border-radius: 50%;
+  width: var(--ll-side-bar-toggle-button-size);
+  height: var(--ll-side-bar-toggle-button-size);
+`;
+const ToggleButton = ({ isDisplayed })=>{
+    const { isExpanded, onToggle } = (0,external_react_.useContext)(sideBar["default"]);
+    return /*#__PURE__*/ external_react_default().createElement(ToggleButtonContainer, {
+        timeout: 200,
+        in: isDisplayed,
+        appear: true,
+        unmountOnExit: true,
+        onClick: onToggle,
+        role: "button"
+    }, isExpanded ? /*#__PURE__*/ external_react_default().createElement((ArrowLeftMedium_default()), null) : /*#__PURE__*/ external_react_default().createElement((ArrowRightMedium_default()), null));
+};
+/* export default */ const Toggle = (ToggleButton);
+
+
+},
+4967(__unused_rspack_module, __webpack_exports__, __webpack_require__) {
+__webpack_require__.d(__webpack_exports__, {
+  "default": () => (__rspack_default_export)
+});
+/* import */ var react__rspack_import_0 = __webpack_require__(2015);
+/* import */ var react__rspack_import_0_default = /*#__PURE__*/__webpack_require__.n(react__rspack_import_0);
+
+/* export default */ const __rspack_default_export = (/*#__PURE__*/(0,react__rspack_import_0.createContext)({}));
+
+
+},
+7680(__unused_rspack_module, __webpack_exports__, __webpack_require__) {
+__webpack_require__.d(__webpack_exports__, {
+  "default": () => (__rspack_default_export)
+});
+/* import */ var _styles_system_gaps__rspack_import_2 = __webpack_require__(4182);
+/* import */ var styled_components__rspack_import_0 = __webpack_require__(2770);
+/* import */ var styled_components__rspack_import_0_default = /*#__PURE__*/__webpack_require__.n(styled_components__rspack_import_0);
+/* import */ var styled_system__rspack_import_1 = __webpack_require__(9351);
+/* import */ var styled_system__rspack_import_1_default = /*#__PURE__*/__webpack_require__.n(styled_system__rspack_import_1);
+
+
+
+const baseStyles = (0,styled_system__rspack_import_1.compose)(styled_system__rspack_import_1.flexbox, styled_system__rspack_import_1.space, styled_system__rspack_import_1.position, styled_system__rspack_import_1.color, styled_system__rspack_import_1.layout, styled_system__rspack_import_1.overflow, _styles_system_gaps__rspack_import_2["default"], styled_system__rspack_import_1.border);
+const proxyStyled = new Proxy((styled_components__rspack_import_0_default()), {
+    apply (target, thisArg, argumentsList) {
+        return styled_components__rspack_import_0_default()(target.apply(thisArg, argumentsList)(baseStyles));
+    },
+    get (target, property) {
+        if (typeof target[property] === "function") {
+            return styled_components__rspack_import_0_default()(target[property].apply((styled_components__rspack_import_0_default()), [
+                baseStyles
+            ]));
+        }
+        return target[property];
+    }
+});
+/* export default */ const __rspack_default_export = (proxyStyled);
+
+
+},
+660(__unused_rspack_module, __webpack_exports__, __webpack_require__) {
+__webpack_require__.d(__webpack_exports__, {
+  "default": () => (__rspack_default_export)
+});
+/* import */ var react__rspack_import_0 = __webpack_require__(2015);
+/* import */ var react__rspack_import_0_default = /*#__PURE__*/__webpack_require__.n(react__rspack_import_0);
+/* import */ var react_transition_group__rspack_import_1 = __webpack_require__(7727);
+/* import */ var react_transition_group__rspack_import_1_default = /*#__PURE__*/__webpack_require__.n(react_transition_group__rspack_import_1);
+/* import */ var styled_components__rspack_import_2 = __webpack_require__(2770);
+/* import */ var styled_components__rspack_import_2_default = /*#__PURE__*/__webpack_require__.n(styled_components__rspack_import_2);
+
+
+
+const duration = 150;
+const ChildrenWrapper = (styled_components__rspack_import_2_default().div)`
+  transition: ${(props)=>`opacity ${props.timeout}ms ease-in-out`};
+
+  &.transition-inout-enter {
+    opacity: 0;
+  }
+
+  &.transition-inout-enter-active {
+    opacity: 1;
+  }
+
+  &.transition-inout-exit {
+    opacity: 1;
+  }
+
+  &.transition-inout-exit-active {
+    opacity: 0;
+  }
+`;
+const TransitionInOut = ({ children, in: inProp, timeout = duration, ...TransitionProps })=>/*#__PURE__*/ react__rspack_import_0_default().createElement(react_transition_group__rspack_import_1.CSSTransition, {
+        ...TransitionProps,
+        in: inProp,
+        timeout: timeout,
+        classNames: "transition-inout"
+    }, /*#__PURE__*/ react__rspack_import_0_default().createElement(ChildrenWrapper, {
+        timeout: timeout
+    }, children));
+/* export default */ const __rspack_default_export = (TransitionInOut);
+
+
+},
+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)));
+
+
+},
+3935(module) {
+module.exports = require("@ledgerhq/icons-ui/reactLegacy/ArrowLeftMedium");
+
+},
+2993(module) {
+module.exports = require("@ledgerhq/ui-shared");
+
+},
+2015(module) {
+module.exports = require("react");
+
+},
+7727(module) {
+module.exports = require("react-transition-group");
+
+},
+2770(module) {
+module.exports = require("styled-components");
+
+},
+9351(module) {
+module.exports = require("styled-system");
+
+},
+
+});
+// The module cache
+var __webpack_module_cache__ = {};
+
+// The require function
+function __webpack_require__(moduleId) {
+
+// Check if module is in cache
+var cachedModule = __webpack_module_cache__[moduleId];
+if (cachedModule !== undefined) {
+return cachedModule.exports;
+}
+// Create a new module (and put it into the cache)
+var module = (__webpack_module_cache__[moduleId] = {
+exports: {}
+});
+// Execute the module function
+__webpack_modules__[moduleId](module, module.exports, __webpack_require__);
+
+// Return the exports of the module
+return module.exports;
+
+}
+
+// webpack/runtime/compat_get_default_export
+(() => {
+// getDefaultExport function for compatibility with non-ESM modules
+__webpack_require__.n = (module) => {
+	var getter = module && module.__esModule ?
+		() => (module['default']) :
+		() => (module);
+	__webpack_require__.d(getter, { a: getter });
+	return getter;
+};
+
+})();
+// webpack/runtime/define_property_getters
+(() => {
+__webpack_require__.d = (exports, definition) => {
+	for(var key in definition) {
+        if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
+            Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
+        }
+    }
+};
+})();
+// webpack/runtime/has_own_property
+(() => {
+__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
+})();
+// webpack/runtime/make_namespace_object
+(() => {
+// define __esModule on exports
+__webpack_require__.r = (exports) => {
+	if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+		Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+	}
+	Object.defineProperty(exports, '__esModule', { value: true });
+};
+})();
+var __webpack_exports__ = {};
+// This entry needs to be wrapped in an IIFE because it needs to be isolated against other modules in the chunk.
+(() => {
+// ESM COMPAT FLAG
+__webpack_require__.r(__webpack_exports__);
+
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, {
+  "default": () => (/* binding */ SideBar_stories),
+  Default: () => (/* binding */ Default)
+});
+
+// EXTERNAL MODULE: external "react"
+var external_react_ = __webpack_require__(2015);
+var external_react_default = /*#__PURE__*/__webpack_require__.n(external_react_);
+;// CONCATENATED MODULE: external "storybook/manager-api"
+const manager_api_namespaceObject = require("storybook/manager-api");
+// EXTERNAL MODULE: ./src/components/navigation/sideBar/SideBar/SideBar.tsx
+var SideBar = __webpack_require__(5622);
+;// CONCATENATED MODULE: external "@ledgerhq/icons-ui/reactLegacy/PortfolioMedium"
+const PortfolioMedium_namespaceObject = require("@ledgerhq/icons-ui/reactLegacy/PortfolioMedium");
+var PortfolioMedium_default = /*#__PURE__*/__webpack_require__.n(PortfolioMedium_namespaceObject);
+;// CONCATENATED MODULE: external "@ledgerhq/icons-ui/reactLegacy/WalletMedium"
+const WalletMedium_namespaceObject = require("@ledgerhq/icons-ui/reactLegacy/WalletMedium");
+var WalletMedium_default = /*#__PURE__*/__webpack_require__.n(WalletMedium_namespaceObject);
+;// CONCATENATED MODULE: external "@ledgerhq/icons-ui/reactLegacy/ManagerMedium"
+const ManagerMedium_namespaceObject = require("@ledgerhq/icons-ui/reactLegacy/ManagerMedium");
+var ManagerMedium_default = /*#__PURE__*/__webpack_require__.n(ManagerMedium_namespaceObject);
+;// CONCATENATED MODULE: external "@ledgerhq/icons-ui/reactLegacy/ArrowTopMedium"
+const ArrowTopMedium_namespaceObject = require("@ledgerhq/icons-ui/reactLegacy/ArrowTopMedium");
+var ArrowTopMedium_default = /*#__PURE__*/__webpack_require__.n(ArrowTopMedium_namespaceObject);
+;// CONCATENATED MODULE: external "@ledgerhq/icons-ui/reactLegacy/ArrowBottomMedium"
+const ArrowBottomMedium_namespaceObject = require("@ledgerhq/icons-ui/reactLegacy/ArrowBottomMedium");
+var ArrowBottomMedium_default = /*#__PURE__*/__webpack_require__.n(ArrowBottomMedium_namespaceObject);
+;// CONCATENATED MODULE: external "@ledgerhq/icons-ui/reactLegacy/BuyCryptoAltMedium"
+const BuyCryptoAltMedium_namespaceObject = require("@ledgerhq/icons-ui/reactLegacy/BuyCryptoAltMedium");
+var BuyCryptoAltMedium_default = /*#__PURE__*/__webpack_require__.n(BuyCryptoAltMedium_namespaceObject);
+;// CONCATENATED MODULE: external "@ledgerhq/icons-ui/reactLegacy/BuyCryptoMedium"
+const BuyCryptoMedium_namespaceObject = require("@ledgerhq/icons-ui/reactLegacy/BuyCryptoMedium");
+var BuyCryptoMedium_default = /*#__PURE__*/__webpack_require__.n(BuyCryptoMedium_namespaceObject);
+;// CONCATENATED MODULE: external "@ledgerhq/icons-ui/reactLegacy/LendMedium"
+const LendMedium_namespaceObject = require("@ledgerhq/icons-ui/reactLegacy/LendMedium");
+var LendMedium_default = /*#__PURE__*/__webpack_require__.n(LendMedium_namespaceObject);
+;// CONCATENATED MODULE: external "@ledgerhq/icons-ui/reactLegacy/NanoFoldedMedium"
+const NanoFoldedMedium_namespaceObject = require("@ledgerhq/icons-ui/reactLegacy/NanoFoldedMedium");
+var NanoFoldedMedium_default = /*#__PURE__*/__webpack_require__.n(NanoFoldedMedium_namespaceObject);
+;// CONCATENATED MODULE: ./src/components/navigation/sideBar/SideBar/SideBar.stories.tsx
+
+
+
+
+
+
+
+
+
+
+
+
+/* export default */ const SideBar_stories = ({
+    title: "Navigation/SideBar/SideBar",
+    component: SideBar["default"],
+    argTypes: {
+        children: {
+            type: "text",
+            description: "A list a SideBar.Item",
+            required: true,
+            control: false
+        },
+        isExpanded: {
+            control: false
+        },
+        onToggle: {
+            control: false
+        }
+    }
+});
+const Template = (args)=>{
+    const [currentArgs, updateArgs] = (0,manager_api_namespaceObject.useArgs)();
+    const handleToggle = ()=>updateArgs({
+            isExpanded: !currentArgs.isExpanded
+        });
+    const sidebarIconSize = 20;
+    return /*#__PURE__*/ external_react_default().createElement(SideBar["default"], {
+        ...args,
+        onToggle: handleToggle
+    }, /*#__PURE__*/ external_react_default().createElement(SideBar["default"].Item, {
+        onClick: ()=>{},
+        label: "portfolio"
+    }, /*#__PURE__*/ external_react_default().createElement((PortfolioMedium_default()), {
+        size: sidebarIconSize
+    })), /*#__PURE__*/ external_react_default().createElement(SideBar["default"].Item, {
+        onClick: ()=>{},
+        label: "accounts",
+        isActive: true
+    }, /*#__PURE__*/ external_react_default().createElement((WalletMedium_default()), {
+        size: sidebarIconSize
+    })), /*#__PURE__*/ external_react_default().createElement(SideBar["default"].Item, {
+        onClick: ()=>{},
+        label: "discover",
+        isDisabled: true
+    }, /*#__PURE__*/ external_react_default().createElement((ManagerMedium_default()), {
+        size: sidebarIconSize
+    })), /*#__PURE__*/ external_react_default().createElement(SideBar["default"].Item, {
+        onClick: ()=>{},
+        label: "send",
+        isDisabled: true
+    }, /*#__PURE__*/ external_react_default().createElement((ArrowTopMedium_default()), {
+        size: sidebarIconSize
+    })), /*#__PURE__*/ external_react_default().createElement(SideBar["default"].Item, {
+        onClick: ()=>{},
+        label: "receive"
+    }, /*#__PURE__*/ external_react_default().createElement((ArrowBottomMedium_default()), {
+        size: sidebarIconSize
+    })), /*#__PURE__*/ external_react_default().createElement(SideBar["default"].Item, {
+        onClick: ()=>{},
+        label: "buy / Sell"
+    }, /*#__PURE__*/ external_react_default().createElement((BuyCryptoAltMedium_default()), {
+        size: sidebarIconSize
+    })), /*#__PURE__*/ external_react_default().createElement(SideBar["default"].Item, {
+        onClick: ()=>{},
+        label: "exchange"
+    }, /*#__PURE__*/ external_react_default().createElement((BuyCryptoMedium_default()), {
+        size: sidebarIconSize
+    })), /*#__PURE__*/ external_react_default().createElement(SideBar["default"].Item, {
+        onClick: ()=>{},
+        label: "lend"
+    }, /*#__PURE__*/ external_react_default().createElement((LendMedium_default()), {
+        size: sidebarIconSize
+    })), /*#__PURE__*/ external_react_default().createElement(SideBar["default"].Item, {
+        onClick: ()=>{},
+        label: "manager",
+        displayNotificationBadge: true
+    }, /*#__PURE__*/ external_react_default().createElement((NanoFoldedMedium_default()), {
+        size: sidebarIconSize
+    })));
 };
 const Default = Template.bind({});
 Default.args = {
-  onToggle: (0, import_addon_actions.action)("toggle sidebar"),
-  isExpanded: true
+    onToggle: ()=>{},
+    isExpanded: true
 };
-//# sourceMappingURL=SideBar.stories.js.map
+
+})();
+
+module.exports = __webpack_exports__;
+})()
+;
+//# sourceMappingURL=SideBar.stories.js.map