@ledgerhq/react-ui 0.53.0 → 0.53.1-nightly.20260902021544

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

@@ -1,1030 +0,0 @@
-(() => {
-"use strict";
-var __webpack_modules__ = ({
-348(__unused_rspack_module, __webpack_exports__, __webpack_require__) {
-/* 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__rspack_import_2 = __webpack_require__(7680);
-/* 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);
-/* import */ var _styles_styled_fontFamily__rspack_import_4 = __webpack_require__(3364);
-/* import */ var _styles__rspack_import_3 = __webpack_require__(4368);
-
-
-
-
-
-const uppercase = (0,styled_system__rspack_import_1.system)({
-    uppercase: {
-        property: "textTransform",
-        transform: (value)=>value ? "uppercase" : "none"
-    }
-});
-const Text = _styled__rspack_import_2["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_3.textVariantStyle[p.variant || "body"]}
-  ${(0,styled_system__rspack_import_1.compose)(uppercase, styled_system__rspack_import_1.lineHeight, _styles_styled_fontFamily__rspack_import_4["default"], styled_system__rspack_import_1.fontSize, styled_system__rspack_import_1.textAlign, styled_system__rspack_import_1.fontWeight, styled_system__rspack_import_1.letterSpacing, (0,styled_system__rspack_import_1.system)({
-    textOverflow: true
-}))}
-  ${(p)=>p.textTransform ? `text-transform: ${p.textTransform};` : ""}
-`;
-/* export default */ const __rspack_default_export = (Text);
-
-__webpack_require__.d(__webpack_exports__, {
-}, {
-  "default": __rspack_default_export
-});
-
-
-},
-4368(__unused_rspack_module, __webpack_exports__, __webpack_require__) {
-/* 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"
-    }
-};
-
-__webpack_require__.d(__webpack_exports__, {
-}, {
-  textVariantStyle: textVariantStyle
-});
-
-
-},
-3696(__unused_rspack_module, __webpack_exports__, __webpack_require__) {
-/* import */ var _styled__rspack_import_0 = __webpack_require__(7680);
-
-const FlexBox = _styled__rspack_import_0["default"].div.attrs({
-    display: "flex",
-    minWidth: 0
-})``;
-/* export default */ const __rspack_default_export = (FlexBox);
-
-__webpack_require__.d(__webpack_exports__, {
-}, {
-  "default": __rspack_default_export
-});
-
-
-},
-1698(__unused_rspack_module, __webpack_exports__, __webpack_require__) {
-/* 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);
-
-__webpack_require__.d(__webpack_exports__, {
-}, {
-  "default": __rspack_default_export
-});
-
-
-},
-4967(__unused_rspack_module, __webpack_exports__, __webpack_require__) {
-/* 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)({}));
-
-__webpack_require__.d(__webpack_exports__, {
-}, {
-  "default": __rspack_default_export
-});
-
-
-},
-7680(__unused_rspack_module, __webpack_exports__, __webpack_require__) {
-/* 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);
-
-__webpack_require__.d(__webpack_exports__, {
-}, {
-  "default": __rspack_default_export
-});
-
-
-},
-660(__unused_rspack_module, __webpack_exports__, __webpack_require__) {
-/* 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 })=>{
-    const nodeRef = (0,react__rspack_import_0.useRef)(null);
-    return /*#__PURE__*/ react__rspack_import_0_default().createElement(react_transition_group__rspack_import_1.CSSTransition, {
-        ...TransitionProps,
-        nodeRef: nodeRef,
-        in: inProp,
-        timeout: timeout,
-        classNames: "transition-inout"
-    }, /*#__PURE__*/ react__rspack_import_0_default().createElement(ChildrenWrapper, {
-        ref: nodeRef,
-        timeout: timeout
-    }, children));
-};
-/* export default */ const __rspack_default_export = (TransitionInOut);
-
-__webpack_require__.d(__webpack_exports__, {
-}, {
-  "default": __rspack_default_export
-});
-
-
-},
-205(__unused_rspack_module, __webpack_exports__, __webpack_require__) {
-
-// EXPORTS
-__webpack_require__.d(__webpack_exports__, {
-  ff: () => (/* binding */ ff)
-});
-
-// UNUSED EXPORTS: darken, ensureContrast, lighten, mix, rgba
-
-;// 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__) {
-/* import */ var _helpers__rspack_import_0 = __webpack_require__(205);
-
-/* export default */ const __rspack_default_export = ((props)=>{
-    const prop = props.ff;
-    if (prop == null) {
-        return null;
-    }
-    return (0,_helpers__rspack_import_0.ff)(prop);
-});
-
-__webpack_require__.d(__webpack_exports__, {
-}, {
-  "default": __rspack_default_export
-});
-
-
-},
-4182(__unused_rspack_module, __webpack_exports__, __webpack_require__) {
-/* 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);
-
-__webpack_require__.d(__webpack_exports__, {
-}, {
-  "default": __rspack_default_export
-});
-
-
-},
-5548(__unused_rspack_module, __webpack_exports__, __webpack_require__) {
-/* 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)));
-
-__webpack_require__.d(__webpack_exports__, {
-}, {
-  fontFamilies: fontFamilies
-});
-
-
-},
-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, getters, values) => {
-	var define = (defs, kind) => {
-		for(var key in defs) {
-			if(__webpack_require__.o(defs, key) && !__webpack_require__.o(exports, key)) {
-				Object.defineProperty(exports, key, { enumerable: true, [kind]: defs[key] });
-			}
-		}
-	};
-	define(getters, "get");
-	define(values, "value");
-};
-})();
-// 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__, {
-  Active: () => (/* binding */ Active),
-  Default: () => (/* binding */ Default),
-  Disable: () => (/* binding */ Disable),
-  Focus: () => (/* binding */ Focus),
-  Hover: () => (/* binding */ Hover),
-  "default": () => (/* binding */ Item_stories)
-});
-
-// EXTERNAL MODULE: external "react"
-var external_react_ = __webpack_require__(2015);
-var external_react_default = /*#__PURE__*/__webpack_require__.n(external_react_);
-;// 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);
-// EXTERNAL MODULE: ./src/components/asorted/Text/index.tsx
-var Text = __webpack_require__(348);
-// EXTERNAL MODULE: ./src/components/layout/Flex/index.ts
-var Flex = __webpack_require__(3696);
-// EXTERNAL MODULE: ./src/components/navigation/sideBar/index.tsx
-var sideBar = __webpack_require__(4967);
-// EXTERNAL MODULE: ./src/components/navigation/sideBar/Item/Item.tsx
-var Item = __webpack_require__(1698);
-;// CONCATENATED MODULE: ./src/components/navigation/sideBar/Item/Item.stories.tsx
-
-
-
-
-
-
-/* export default */ const Item_stories = ({
-    title: "Navigation/SideBar/Item",
-    component: Item["default"],
-    argTypes: {
-        label: {
-            type: "text",
-            description: "Label",
-            required: true,
-            control: {
-                type: "text"
-            }
-        },
-        onClick: {
-            control: false
-        },
-        children: {
-            control: false
-        },
-        isActive: {
-            type: "boolean"
-        },
-        isDisabled: {
-            type: "boolean"
-        },
-        displayNotificationBadge: {
-            type: "boolean"
-        }
-    }
-});
-const Template = (args)=>/*#__PURE__*/ external_react_default().createElement(Flex["default"], {
-        flexDirection: "column",
-        style: {
-            rowGap: "1.5rem"
-        }
-    }, /*#__PURE__*/ external_react_default().createElement(Flex["default"], {
-        flexDirection: "column",
-        alignItems: "flex-Start",
-        style: {
-            width: "fit-content",
-            rowGap: "0.5rem"
-        }
-    }, /*#__PURE__*/ external_react_default().createElement(Text["default"], {
-        variant: "h3"
-    }, "Expanded"), /*#__PURE__*/ external_react_default().createElement(sideBar["default"].Provider, {
-        value: {
-            isExpanded: true,
-            onToggle: ()=>{}
-        }
-    }, /*#__PURE__*/ external_react_default().createElement(Item["default"], args, /*#__PURE__*/ external_react_default().createElement((WalletMedium_default()), null)))), /*#__PURE__*/ external_react_default().createElement(Flex["default"], {
-        flexDirection: "column",
-        alignItems: "flex-Start",
-        style: {
-            width: "fit-content",
-            rowGap: "0.5rem"
-        }
-    }, /*#__PURE__*/ external_react_default().createElement(Text["default"], {
-        variant: "h3"
-    }, "Collapsed"), /*#__PURE__*/ external_react_default().createElement(sideBar["default"].Provider, {
-        value: {
-            isExpanded: false,
-            onToggle: ()=>{}
-        }
-    }, /*#__PURE__*/ external_react_default().createElement(Item["default"], args, /*#__PURE__*/ external_react_default().createElement((WalletMedium_default()), null)))));
-const Default = Template.bind({});
-const Hover = Template.bind({});
-const Focus = Template.bind({});
-const Active = Template.bind({});
-const Disable = Template.bind({});
-Default.args = {
-    label: "accounts",
-    onClick: ()=>{}
-};
-Active.args = {
-    label: "accounts",
-    onClick: ()=>{},
-    isActive: true
-};
-Disable.args = {
-    label: "accounts",
-    onClick: ()=>{},
-    isDisabled: true
-};
-Hover.args = {
-    label: "accounts",
-    onClick: ()=>{}
-};
-Hover.parameters = {
-    pseudo: {
-        hover: true
-    }
-};
-Focus.args = {
-    label: "accounts",
-    onClick: ()=>{}
-};
-Focus.parameters = {
-    pseudo: {
-        focus: true
-    }
-};
-
-})();
-
-module.exports = __webpack_exports__;
-})()
-;
-//# sourceMappingURL=Item.stories.js.map