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

package/lib/cjs/components/form/Dropdown/Dropdown.stories.js

@@ -1,1758 +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
-});
-
-
-},
-6599(__unused_rspack_module, __webpack_exports__, __webpack_require__) {
-
-// EXPORTS
-__webpack_require__.d(__webpack_exports__, {
-  ButtonUnstyled: () => (/* binding */ ButtonUnstyled)
-});
-
-// UNUSED EXPORTS: Base, ButtonExpand, buttonSizeStyle, default
-
-;// CONCATENATED MODULE: external "@ledgerhq/icons-ui/reactLegacy/ChevronBottomMedium"
-const ChevronBottomMedium_namespaceObject = require("@ledgerhq/icons-ui/reactLegacy/ChevronBottomMedium");
-var ChevronBottomMedium_default = /*#__PURE__*/__webpack_require__.n(ChevronBottomMedium_namespaceObject);
-// EXTERNAL MODULE: external "react"
-var external_react_ = __webpack_require__(2015);
-var external_react_default = /*#__PURE__*/__webpack_require__.n(external_react_);
-// EXTERNAL MODULE: external "styled-components"
-var external_styled_components_ = __webpack_require__(2770);
-var external_styled_components_default = /*#__PURE__*/__webpack_require__.n(external_styled_components_);
-// EXTERNAL MODULE: external "styled-system"
-var external_styled_system_ = __webpack_require__(9351);
-// EXTERNAL MODULE: ./src/styles/helpers.ts + 1 modules
-var helpers = __webpack_require__(205);
-// EXTERNAL MODULE: ./src/styles/styled/fontFamily.ts
-var fontFamily = __webpack_require__(3364);
-// EXTERNAL MODULE: ./src/styles/theme.ts
-var theme = __webpack_require__(5548);
-// EXTERNAL MODULE: ./src/components/styled.ts
-var styled = __webpack_require__(7680);
-;// CONCATENATED MODULE: ./src/components/cta/Button/index.tsx
-
-
-
-
-
-
-
-
-const IconContainer = (external_styled_components_default()).div`
-  display: inline-block;
-  ${(p)=>`${p.iconPosition === "left" ? "margin-right" : "margin-left"}: ${p.theme.space[4]}px;`}
-  padding-top: 0.2em;
-`;
-const getVariantColors = (p)=>({
-        main: {
-            outline: `
-        border-color: ${p.theme.colors.neutral.c100};
-        color: ${p.theme.colors.neutral.c100};
-        background-color: transparent;
-        &:hover, &:focus {
-          background-color: ${(0,helpers.rgba)(p.theme.colors.neutral.c100, 0.03)};
-        }
-        &:active {
-          background-color: ${(0,helpers.rgba)(p.theme.colors.neutral.c100, 0.05)};
-        }
-      `,
-            filled: `
-        color: ${p.theme.colors.neutral.c00};
-        background-color: ${p.theme.colors.neutral.c100};
-        &:hover, &:focus {
-          background-color: ${p.theme.colors.neutral.c90};
-        }
-      `
-        },
-        shade: `
-      border-color: ${p.theme.colors.neutral.c40};
-      color: ${p.theme.colors.neutral.c100};
-      &:focus {
-        border-color: ${p.theme.colors.primary.c80};
-      }
-
-      &:hover, &:focus {
-        background-color: ${p.theme.colors.neutral.c20};
-      }
-
-      &:active {
-        background-color: ${p.theme.colors.neutral.c30};
-      }
-    `,
-        error: {
-            outline: `
-      border-color: ${p.theme.colors.error.c50};
-      color: ${p.theme.colors.error.c50};
-      background-color: transparent;
-      &:hover {
-        background-color: ${(0,helpers.rgba)(p.theme.colors.error.c50, 0.02)};
-      }
-      &:active {
-        background-color: ${(0,helpers.rgba)(p.theme.colors.error.c50, 0.05)};
-      }
-    `,
-            filled: `
-      color: ${p.theme.colors.neutral.c00};
-      background-color: ${p.theme.colors.error.c50};
-      &:hover {
-        background-color: ${p.theme.colors.error.c40};
-      }
-    `
-        },
-        neutral: `
-    color: ${p.theme.colors.neutral.c100};
-    background-color: ${p.theme.colors.neutral.c30};
-    &:hover {
-      background-color: ${p.theme.colors.neutral.c40};
-    }
-  `,
-        color: {
-            outline: `
-      border-color: ${p.theme.colors.primary.c80};
-      color: ${p.theme.colors.primary.c80};
-      background-color: transparent;
-      &:hover {
-        background-color: ${(0,helpers.rgba)(p.theme.colors.primary.c100, 0.02)};
-      }
-      &:active {
-        background-color: ${(0,helpers.rgba)(p.theme.colors.primary.c100, 0.05)};
-      }
-    `,
-            filled: `
-      color: ${p.theme.colors.neutral.c00};
-      background-color: ${p.theme.colors.primary.c80};
-      &:hover {
-        background-color: ${p.theme.colors.primary.c70};
-      }
-    `
-        },
-        disabled: {
-            outline: `
-        border-color: ${p.theme.colors.neutral.c50};
-        color: ${p.theme.colors.neutral.c50};
-        background-color: transparent;
-        &:focus, &:hover {
-          box-shadow: none;
-        }
-      `,
-            filled: `
-        color: ${p.theme.colors.neutral.c50};
-        background-color: ${p.theme.colors.neutral.c30};
-        &:focus, &:hover {
-          box-shadow: none;
-        }
-      `
-        },
-        default: `
-    color: ${p.theme.colors.neutral.c100};
-    background-color: transparent;
-    &:hover {
-      text-decoration: underline;
-    }
-  `
-    });
-const ButtonUnstyled = styled["default"].button`
-  all: unset;
-  cursor: pointer;
-
-  &:disabled {
-    cursor: default;
-  }
-`;
-const Base = styled["default"].button.attrs((p)=>({
-        fontFamily: "Inter",
-        fontSize: p.fontSize ?? 4
-    }))`
-  background-color: transparent;
-  border-color: transparent;
-  border-radius: 44px;
-  border-style: solid;
-  border-width: ${(p)=>p.outline || p.variant === "shade" ? 1 : 0}px;
-  font-weight: 600;
-  ${(0,external_styled_system_.compose)(fontFamily["default"], external_styled_system_.fontSize, external_styled_system_.border)};
-  line-height: ${(p)=>p.theme.fontSizes[p.fontSize]}px;
-  text-align: center;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-  ${(p)=>buttonSizeStyle[p.size || "medium"]}
-  text-overflow: ellipsis;
-  white-space: ${(p)=>p.whiteSpace ? p.whiteSpace : "nowrap"};
-  max-width: 100%;
-  position: relative;
-  cursor: ${(p)=>p.disabled ? "default" : "pointer"};
-  &:active {
-    box-shadow: 0 0 0 4px ${(p)=>(0,helpers.rgba)(p.theme.colors.primary.c60, 0.4)};
-  }
-  &:focus, &:hover {
-    box-shadow: 0 0 0 2px ${(p)=>(0,helpers.rgba)(p.theme.colors.primary.c60, 0.4)};
-  }
-
-  ${(p)=>{
-    const variants = getVariantColors(p);
-    if (p.disabled) {
-        return p.outline || p.variant === "shade" ? variants.disabled.outline : variants.disabled.filled;
-    }
-    const variant = p.variant ?? "default";
-    switch(variant){
-        case "main":
-            return p.outline ? variants.main.outline : variants.main.filled;
-        case "shade":
-            return variants.shade;
-        case "error":
-            return p.outline ? variants.error.outline : variants.error.filled;
-        case "color":
-            return p.outline ? variants.color.outline : variants.color.filled;
-        case "neutral":
-            return variants.neutral;
-        case "default":
-        default:
-            return variants.default;
-    }
-}}
-  ${(p)=>p.iconButton ? (0,external_styled_components_.css)`
-          width: ${p.theme.space[12]}px;
-          padding: 0;
-          ${IconContainer} {
-            margin: 0;
-          }
-        ` : ""}
-  ${(p)=>p.theme.transition([
-        "background-color",
-        "color",
-        "border-color",
-        "box-shadow"
-    ], "0.2s")}
-`;
-const ContentContainer = (external_styled_components_default()).div``;
-const Button = ({ Icon, iconPosition = "right", iconSize = 16, children, onClick, ...props }, ref)=>{
-    const iconNodeSize = iconSize || theme.fontSizes[props.fontSize ?? 4];
-    const IconNode = (0,external_react_.useMemo)(()=>{
-        if (!Icon) return null;
-        if (typeof Icon === "object") return Icon;
-        return /*#__PURE__*/ external_react_default().createElement(Icon, {
-            size: iconNodeSize
-        });
-    }, [
-        iconNodeSize,
-        Icon
-    ]);
-    return /*#__PURE__*/ external_react_default().createElement(Base, {
-        ...props,
-        ref: ref,
-        iconButton: !(Icon == null) && !children,
-        onClick: onClick
-    }, iconPosition === "right" ? /*#__PURE__*/ external_react_default().createElement(ContentContainer, null, children) : null, IconNode && /*#__PURE__*/ external_react_default().createElement(IconContainer, {
-        iconPosition: iconPosition
-    }, IconNode), iconPosition === "left" ? /*#__PURE__*/ external_react_default().createElement(ContentContainer, null, children) : null);
-};
-const ButtonWithRef = /*#__PURE__*/ external_react_default().forwardRef(Button);
-const StyledButtonExpand = external_styled_components_default()(ButtonWithRef).attrs((props)=>({
-        Icon: props.Icon != null || (ChevronBottomMedium_default()),
-        iconPosition: props.iconPosition || "right"
-    }))`
-  ${IconContainer} {
-    transition: transform 0.25s;
-    ${(p)=>p.expanded ? "transform: rotate(180deg)" : ""}
-  }
-`;
-function ButtonExpand({ onToggle, onClick, ...props }, ref) {
-    const [expanded, setExpanded] = (0,external_react_.useState)(false);
-    return /*#__PURE__*/ external_react_default().createElement(StyledButtonExpand, {
-        ...props,
-        ref: ref,
-        expanded: expanded,
-        onClick: (event)=>{
-            setExpanded((expanded)=>!expanded);
-            onToggle != null && onToggle(!expanded);
-            onClick != null && onClick(event);
-        }
-    });
-}
-const buttonSizeStyle = {
-    xs: {
-        padding: "0 12px",
-        height: "28px"
-    },
-    small: {
-        padding: "0 20px",
-        height: "32px"
-    },
-    medium: {
-        padding: "0 24px",
-        height: "40px"
-    },
-    large: {
-        padding: "0 28px",
-        height: "48px"
-    },
-    xl: {
-        padding: "0 28px",
-        height: "56px"
-    }
-};
-Button.Unstyled = ButtonUnstyled;
-Button.Expand = /*#__PURE__*/ external_react_default().forwardRef(ButtonExpand);
-ButtonWithRef.Unstyled = Button.Unstyled;
-ButtonWithRef.Expand = Button.Expand;
-/* export default */ const cta_Button = ((/* unused pure expression or super */ null && (ButtonWithRef)));
-
-
-},
-3770(__unused_rspack_module, __webpack_exports__, __webpack_require__) {
-
-// EXPORTS
-__webpack_require__.d(__webpack_exports__, {
-  InputContainer: () => (/* binding */ InputContainer),
-  InputErrorContainer: () => (/* binding */ InputErrorContainer)
-});
-
-// UNUSED EXPORTS: BaseInput, ClearableButtonUnstyled, InputInfoContainer, InputRenderLeftContainer, InputRenderRightContainer, InputWarningContainer, default
-
-// EXTERNAL MODULE: external "styled-components"
-var external_styled_components_ = __webpack_require__(2770);
-var external_styled_components_default = /*#__PURE__*/__webpack_require__.n(external_styled_components_);
-// EXTERNAL MODULE: external "styled-system"
-var external_styled_system_ = __webpack_require__(9351);
-// EXTERNAL MODULE: external "react"
-var external_react_ = __webpack_require__(2015);
-;// CONCATENATED MODULE: external "@ledgerhq/icons-ui/reactLegacy/CircledCrossSolidMedium"
-const CircledCrossSolidMedium_namespaceObject = require("@ledgerhq/icons-ui/reactLegacy/CircledCrossSolidMedium");
-// EXTERNAL MODULE: ./src/components/layout/Flex/index.ts
-var Flex = __webpack_require__(3696);
-// EXTERNAL MODULE: ./src/components/asorted/Text/index.tsx
-var Text = __webpack_require__(348);
-// EXTERNAL MODULE: ./src/styles/helpers.ts + 1 modules
-var helpers = __webpack_require__(205);
-// EXTERNAL MODULE: ./src/components/cta/Button/index.tsx + 1 modules
-var Button = __webpack_require__(6599);
-;// CONCATENATED MODULE: ./src/components/form/BaseInput/index.tsx
-
-
-
-
-
-
-
-
-const InputContainer = (external_styled_components_default()).div`
-  display: flex;
-  height: 48px;
-  border: ${(p)=>`1px solid ${p.theme.colors.neutral.c40}`};
-  border-radius: 24px;
-  transition: all 0.2s ease;
-  color: ${(p)=>p.theme.colors.neutral.c100};
-
-  ${(p)=>p.focus && !p.error && !p.warning ? (0,external_styled_components_.css)`
-          border: 1px solid ${p.theme.colors.primary.c80};
-          box-shadow: 0 0 0 4px ${(0,helpers.rgba)(p.theme.colors.primary.c60, 0.4)};
-        ` : undefined};
-
-  ${(p)=>p.error && !p.disabled ? (0,external_styled_components_.css)`
-          border: 1px solid ${p.theme.colors.error.c50};
-        ` : undefined};
-
-  ${(p)=>!p.error && p.warning && !p.disabled ? (0,external_styled_components_.css)`
-          border: 1px solid ${p.theme.colors.warning.c40};
-        ` : undefined};
-
-  ${(p)=>!p.error && !p.warning && !p.disabled ? (0,external_styled_components_.css)`
-          &:hover {
-            border: ${!p.disabled && `1px solid ${p.theme.colors.primary.c80}`};
-          }
-        ` : undefined};
-
-  ${(p)=>p.disabled ? (0,external_styled_components_.css)`
-          color: ${p.theme.colors.neutral.c60};
-          background: ${(p)=>p.theme.colors.neutral.c20};
-        ` : undefined};
-`;
-const BaseInput = external_styled_components_default().input.attrs({
-    fontSize: "paragraph",
-    fontWeight: "medium"
-})`
-  height: 100%;
-  width: 100%;
-  border: 0;
-  caret-color: ${(p)=>p.error ? p.theme.colors.error.c50 : p.theme.colors.primary.c80};
-  background: none;
-  outline: none;
-  cursor: ${(p)=>p.disabled ? "not-allowed" : "text"};
-  flex-shrink: 1;
-  padding-left: 20px;
-  padding-right: 20px;
-  &::placeholder {
-    color: ${(p)=>p.disabled ? p.theme.colors.neutral.c50 : p.theme.colors.neutral.c70};
-  }
-
-  /* stylelint-disable property-no-vendor-prefix */
-
-  /* Hide type=number arrow for Chrome, Safari, Edge, Opera */
-  &::-webkit-outer-spin-button,
-  ::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
-  }
-
-  /* Hide type=number arrow for Firefox */
-  &[type="number"] {
-    -moz-appearance: textfield;
-  }
-  /* stylelint-enable property-no-vendor-prefix */
-
-  ${external_styled_system_.typography}
-`;
-const InputErrorContainer = external_styled_components_default()((0,Text["default"]))`
-  color: ${(p)=>p.theme.colors.error.c50};
-  margin-left: 12px;
-`;
-const InputWarningContainer = external_styled_components_default()((0,Text["default"]))`
-  color: ${(p)=>p.theme.colors.warning.c40};
-  margin-left: 12px;
-`;
-const InputInfoContainer = external_styled_components_default()((0,Text["default"]))`
-  color: ${(p)=>p.theme.colors.neutral.c60};
-  margin-left: 12px;
-`;
-const InputRenderLeftContainer = external_styled_components_default()((0,Flex["default"])).attrs(()=>({
-        alignItems: "center",
-        pl: "16px"
-    }))``;
-const InputRenderRightContainer = external_styled_components_default()((0,Flex["default"])).attrs(()=>({
-        alignItems: "center",
-        pr: "16px"
-    }))``;
-const ClearableButtonUnstyled = external_styled_components_default()((0,Button.ButtonUnstyled))`
-  display: flex;
-`;
-// Yes, this is dirty. If you can figure out a better way please change the code :).
-// oxlint-disable-next-line typescript/no-explicit-any
-const IDENTITY = (_)=>_;
-function Input(props, ref) {
-    const { colors } = useTheme();
-    const { value, disabled, error, warning, info, onChange, onChangeEvent, renderLeft, renderRight, unwrapped, containerProps, serialize = IDENTITY, deserialize = IDENTITY, clearable, ...htmlInputProps } = props;
-    const [focus, setFocus] = useState(false);
-    const inputValue = useMemo(()=>serialize(value), [
-        serialize,
-        value
-    ]);
-    const handleChange = useCallback((e)=>{
-        onChange && onChange(deserialize(e.target.value));
-        onChangeEvent && onChangeEvent(e);
-    }, [
-        onChange,
-        onChangeEvent,
-        deserialize
-    ]);
-    const handleClear = useCallback(()=>{
-        onChange && onChange(deserialize(""));
-    }, [
-        onChange,
-        deserialize
-    ]);
-    const inner = /*#__PURE__*/ React.createElement(React.Fragment, null, typeof renderLeft === "function" ? renderLeft(props) : renderLeft, /*#__PURE__*/ React.createElement(BaseInput, {
-        ref: ref,
-        ...htmlInputProps,
-        disabled: disabled,
-        error: error,
-        warning: warning,
-        info: info,
-        onChange: handleChange,
-        value: inputValue,
-        onFocus: (event)=>{
-            setFocus(true);
-            htmlInputProps.onFocus && htmlInputProps.onFocus(event);
-        },
-        onBlur: (event)=>{
-            setFocus(false);
-            htmlInputProps.onBlur && htmlInputProps.onBlur(event);
-        }
-    }), clearable && inputValue && /*#__PURE__*/ React.createElement(FlexBox, {
-        alignItems: "center",
-        mr: 7
-    }, /*#__PURE__*/ React.createElement(ClearableButtonUnstyled, {
-        onClick: handleClear
-    }, /*#__PURE__*/ React.createElement(CircledCrossSolidMedium, {
-        size: 18,
-        color: colors.neutral.c50
-    }))), typeof renderRight === "function" ? renderRight(props) : renderRight);
-    if (unwrapped) {
-        return /*#__PURE__*/ React.createElement(FlexBox, {
-            alignItems: "stretch",
-            style: {
-                height: "100%"
-            }
-        }, inner);
-    }
-    return /*#__PURE__*/ React.createElement("div", null, /*#__PURE__*/ React.createElement(InputContainer, {
-        disabled: disabled,
-        focus: focus,
-        error: error,
-        warning: warning,
-        ...containerProps
-    }, inner), (error || warning || info) && !disabled && /*#__PURE__*/ React.createElement(FlexBox, {
-        flexDirection: "column",
-        rowGap: 2,
-        mt: 2
-    }, error ? /*#__PURE__*/ React.createElement(InputErrorContainer, {
-        variant: "small"
-    }, error) : warning ? /*#__PURE__*/ React.createElement(InputWarningContainer, {
-        variant: "small"
-    }, warning) : info ? /*#__PURE__*/ React.createElement(InputInfoContainer, {
-        variant: "small"
-    }, info) : null));
-}
-/* export default */ const form_BaseInput = (/*#__PURE__*/(/* unused pure expression or super */ null && (React.forwardRef(Input))));
-
-
-},
-4978(__unused_rspack_module, __webpack_exports__, __webpack_require__) {
-__webpack_require__.d(__webpack_exports__, {
-  "default": () => (Dropdown)
-});
-/* 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_select__rspack_import_1 = __webpack_require__(8466);
-/* import */ var react_select__rspack_import_1_default = /*#__PURE__*/__webpack_require__.n(react_select__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 _form_SelectInput__rspack_import_7 = __webpack_require__(2031);
-/* import */ var _asorted_Text__rspack_import_3 = __webpack_require__(348);
-/* import */ var ___rspack_import_6 = __webpack_require__(9979);
-/* import */ var ___rspack_import_6_default = /*#__PURE__*/__webpack_require__.n(___rspack_import_6);
-/* import */ var _form_SelectInput_ValueContainer__rspack_import_4 = __webpack_require__(4711);
-/* import */ var _layout_Flex__rspack_import_5 = __webpack_require__(3696);
-
-
-
-
-
-
-
-
-function DropdownControl(props) {
-    const { selectProps, children } = props;
-    const { label } = selectProps;
-    return /*#__PURE__*/ react__rspack_import_0_default().createElement(react_select__rspack_import_1.components.Control, props, /*#__PURE__*/ react__rspack_import_0_default().createElement(_asorted_Text__rspack_import_3["default"], {
-        variant: "paragraph",
-        fontWeight: "medium",
-        color: "neutral.c80",
-        mr: 2
-    }, label), children);
-}
-function DropdownValueContainer(props) {
-    const isOpen = props.selectProps.menuIsOpen;
-    return /*#__PURE__*/ react__rspack_import_0_default().createElement(_form_SelectInput_ValueContainer__rspack_import_4.ValueContainer, {
-        ...props,
-        render: ()=>/*#__PURE__*/ react__rspack_import_0_default().createElement(_layout_Flex__rspack_import_5["default"], {
-                alignItems: "center"
-            }, /*#__PURE__*/ react__rspack_import_0_default().createElement(_asorted_Text__rspack_import_3["default"], {
-                variant: "paragraph",
-                fontWeight: "medium",
-                mr: 2
-            }, /*#__PURE__*/ react__rspack_import_0_default().createElement(_layout_Flex__rspack_import_5["default"], null, props.children)), /*#__PURE__*/ react__rspack_import_0_default().createElement(_layout_Flex__rspack_import_5["default"], {
-                alignItems: "center",
-                style: {
-                    transform: isOpen ? "rotate(180deg)" : ""
-                }
-            }, /*#__PURE__*/ react__rspack_import_0_default().createElement(___rspack_import_6.DropdownMedium, {
-                size: 20
-            })))
-    });
-}
-function DropdownIndicatorsContainer() {
-    return null;
-}
-function Dropdown(props) {
-    const theme = (0,styled_components__rspack_import_2.useTheme)();
-    const { styles, ...rest } = props;
-    return /*#__PURE__*/ react__rspack_import_0_default().createElement(_form_SelectInput__rspack_import_7["default"], {
-        placeholder: "",
-        isSearchable: false,
-        styles: {
-            singleValue: (provided)=>({
-                    ...provided,
-                    color: theme.colors.neutral.c100,
-                    margin: 0,
-                    top: undefined,
-                    position: undefined,
-                    overflow: undefined,
-                    maxWidth: undefined,
-                    transform: undefined
-                }),
-            input: ()=>({
-                    display: "none"
-                }),
-            menu: (provided)=>({
-                    ...provided,
-                    border: 0,
-                    boxShadow: "none",
-                    background: "none",
-                    width: "auto",
-                    minWidth: "200px"
-                }),
-            ...styles
-        },
-        ...rest,
-        components: {
-            Control: DropdownControl,
-            ValueContainer: DropdownValueContainer,
-            IndicatorsContainer: DropdownIndicatorsContainer
-        }
-    });
-}
-
-
-},
-268(__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_select__rspack_import_1 = __webpack_require__(8466);
-/* import */ var react_select__rspack_import_1_default = /*#__PURE__*/__webpack_require__.n(react_select__rspack_import_1);
-/* import */ var _BaseInput__rspack_import_2 = __webpack_require__(3770);
-
-
-
-function getStyles(theme) {
-    return (provided)=>({
-            ...provided,
-            display: "flex",
-            alignItems: "center",
-            width: "100%",
-            border: 0,
-            padding: `0px ${theme.space[7]}px`,
-            boxShadow: "none",
-            borderRadius: "inherit",
-            background: "transparent"
-        });
-}
-function Control(props) {
-    const { isFocused, selectProps, children } = props;
-    const { isDisabled, error, renderLeft } = selectProps;
-    return /*#__PURE__*/ react__rspack_import_0_default().createElement(_BaseInput__rspack_import_2.InputContainer, {
-        disabled: isDisabled,
-        error: error,
-        focus: isFocused
-    }, /*#__PURE__*/ react__rspack_import_0_default().createElement(react_select__rspack_import_1.components.Control, props, renderLeft ? renderLeft(props) : null, children));
-}
-
-__webpack_require__.d(__webpack_exports__, {
-  Control: () => (Control),
-  getStyles: () => (getStyles)
-});
-
-
-},
-7621(__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_select__rspack_import_1 = __webpack_require__(8466);
-/* import */ var react_select__rspack_import_1_default = /*#__PURE__*/__webpack_require__.n(react_select__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 _asorted_Text__rspack_import_4 = __webpack_require__(348);
-/* import */ var _ledgerhq_icons_ui_reactLegacy__rspack_import_3 = __webpack_require__(9979);
-/* import */ var _ledgerhq_icons_ui_reactLegacy__rspack_import_3_default = /*#__PURE__*/__webpack_require__.n(_ledgerhq_icons_ui_reactLegacy__rspack_import_3);
-
-
-
-
-
-function getStyles() {
-    return (provided)=>({
-            ...provided,
-            padding: 0
-        });
-}
-function DropdownIndicator(props) {
-    const theme = (0,styled_components__rspack_import_2.useTheme)();
-    const { isDisabled } = props.selectProps;
-    const ChevronIcon = props.selectProps.menuIsOpen ? _ledgerhq_icons_ui_reactLegacy__rspack_import_3.ChevronTopMedium : _ledgerhq_icons_ui_reactLegacy__rspack_import_3.ChevronBottomMedium;
-    const color = isDisabled ? theme.colors.neutral.c60 : theme.colors.neutral.c100;
-    return /*#__PURE__*/ react__rspack_import_0_default().createElement(react_select__rspack_import_1.components.DropdownIndicator, props, /*#__PURE__*/ react__rspack_import_0_default().createElement(_asorted_Text__rspack_import_4["default"], {
-        as: "div",
-        color: color,
-        style: {
-            display: "flex"
-        }
-    }, /*#__PURE__*/ react__rspack_import_0_default().createElement(ChevronIcon, {
-        size: 12
-    })));
-}
-
-__webpack_require__.d(__webpack_exports__, {
-  DropdownIndicator: () => (DropdownIndicator),
-  getStyles: () => (getStyles)
-});
-
-
-},
-8396(__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_select__rspack_import_1 = __webpack_require__(8466);
-/* import */ var react_select__rspack_import_1_default = /*#__PURE__*/__webpack_require__.n(react_select__rspack_import_1);
-/* import */ var _layout_Flex__rspack_import_2 = __webpack_require__(3696);
-
-
-
-function IndicatorsContainer(props) {
-    const { renderRight } = props.selectProps;
-    return /*#__PURE__*/ react__rspack_import_0_default().createElement(_layout_Flex__rspack_import_2["default"], {
-        alignItems: "center"
-    }, renderRight ? renderRight(props) : null, /*#__PURE__*/ react__rspack_import_0_default().createElement(react_select__rspack_import_1.components.IndicatorsContainer, props));
-}
-
-__webpack_require__.d(__webpack_exports__, {
-  IndicatorsContainer: () => (IndicatorsContainer)
-});
-
-
-},
-9082(__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_select__rspack_import_1 = __webpack_require__(8466);
-/* import */ var react_select__rspack_import_1_default = /*#__PURE__*/__webpack_require__.n(react_select__rspack_import_1);
-
-
-function getStyles(theme) {
-    const isLight = theme.colors.type === "light";
-    return (provided)=>({
-            ...provided,
-            display: "flex",
-            flexDirection: "column",
-            gap: theme.space[2],
-            padding: theme.space[3],
-            border: `1px solid ${theme.colors.neutral[isLight ? "c20" : "c30"]}`,
-            borderRadius: "8px",
-            boxShadow: `0px 6px 12px rgba(0, 0, 0, ${isLight ? 0.04 : 0.08})`,
-            background: theme.colors.neutral[isLight ? "c00" : "c20"],
-            color: theme.colors.neutral.c80
-        });
-}
-function MenuList(props) {
-    return /*#__PURE__*/ react__rspack_import_0_default().createElement(react_select__rspack_import_1.components.MenuList, props, props.children);
-}
-
-__webpack_require__.d(__webpack_exports__, {
-  MenuList: () => (MenuList),
-  getStyles: () => (getStyles)
-});
-
-
-},
-4216(__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_select__rspack_import_1 = __webpack_require__(8466);
-/* import */ var react_select__rspack_import_1_default = /*#__PURE__*/__webpack_require__.n(react_select__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 _asorted_Text__rspack_import_3 = __webpack_require__(348);
-
-
-
-
-function getStyles() {
-    return (provided)=>({
-            ...provided,
-            display: "flex",
-            alignItems: "center",
-            padding: 0,
-            cursor: "inherit",
-            background: "inherit",
-            color: "inherit",
-            boxShadow: "none",
-            border: "none",
-            ":active": undefined
-        });
-}
-const Wrapper = styled_components__rspack_import_2_default()((0,_asorted_Text__rspack_import_3["default"])).attrs({
-    as: "div"
-})`
-  height: 48px;
-  display: flex;
-  padding: 0 ${(p)=>p.theme.space[5]}px;
-  border-radius: ${(p)=>`${p.theme.radii[1]}px`};
-  ${(p)=>!p.disabled ? "cursor: pointer;" : ""}
-  ${(props)=>{
-    const { theme, selected, focus, disabled } = props;
-    if (selected) {
-        return `
-        color: ${theme.colors.primary.c90};
-        background: ${theme.colors.primary.c20};
-      `;
-    }
-    if (disabled) {
-        return `
-        color: ${theme.colors.neutral.c50};
-        ${focus ? `&:not(:active) {
-            background: ${theme.colors.neutral.c20};
-          }` : ""}
-      `;
-    }
-    return `
-      color: ${theme.colors.neutral.c80};
-      &:hover {
-        color: ${theme.colors.neutral.c100};
-        background: ${theme.colors.primary.c10};
-      }
-      &:active {
-        color: ${theme.colors.neutral.c100};
-        background: ${theme.colors.primary.c30};
-      }
-      ${focus ? `&:not(:active) {
-          color: ${theme.colors.neutral.c100};
-          background: ${theme.colors.primary.c10};
-        }` : ""}
-    `;
-}};
-`;
-function Option(props) {
-    const { render, children, ...innerProps } = props;
-    return /*#__PURE__*/ react__rspack_import_0_default().createElement(Wrapper, {
-        disabled: props.isDisabled,
-        selected: props.isSelected,
-        focus: props.isFocused,
-        fontWeight: "semiBold",
-        variant: "paragraph"
-    }, /*#__PURE__*/ react__rspack_import_0_default().createElement(react_select__rspack_import_1.components.Option, innerProps, render ? render(props) : children));
-}
-
-__webpack_require__.d(__webpack_exports__, {
-  Option: () => (Option),
-  getStyles: () => (getStyles)
-});
-
-
-},
-4711(__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_select__rspack_import_1 = __webpack_require__(8466);
-/* import */ var react_select__rspack_import_1_default = /*#__PURE__*/__webpack_require__.n(react_select__rspack_import_1);
-/* import */ var _asorted_Text__rspack_import_2 = __webpack_require__(348);
-
-
-
-function getStyles() {
-    return (provided)=>({
-            ...provided,
-            padding: 0
-        });
-}
-function ValueContainer(props) {
-    const color = props.selectProps.isDisabled ? "neutral.c60" : "neutral.c100";
-    return /*#__PURE__*/ react__rspack_import_0_default().createElement(react_select__rspack_import_1.components.ValueContainer, props, /*#__PURE__*/ react__rspack_import_0_default().createElement(_asorted_Text__rspack_import_2["default"], {
-        as: "div",
-        variant: "paragraph",
-        color: color,
-        style: {
-            display: "inherit",
-            alignItems: "center"
-        }
-    }, props.render ? props.render(props) : props.children));
-}
-
-__webpack_require__.d(__webpack_exports__, {
-  ValueContainer: () => (ValueContainer),
-  getStyles: () => (getStyles)
-});
-
-
-},
-2031(__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_select__rspack_import_1 = __webpack_require__(8466);
-/* import */ var react_select__rspack_import_1_default = /*#__PURE__*/__webpack_require__.n(react_select__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 _DropdownIndicator__rspack_import_5 = __webpack_require__(7621);
-/* import */ var _ValueContainer__rspack_import_4 = __webpack_require__(4711);
-/* import */ var _Control__rspack_import_3 = __webpack_require__(268);
-/* import */ var _MenuList__rspack_import_6 = __webpack_require__(9082);
-/* import */ var _Option__rspack_import_7 = __webpack_require__(4216);
-/* import */ var _IndicatorsContainer__rspack_import_8 = __webpack_require__(8396);
-/* import */ var _BaseInput__rspack_import_9 = __webpack_require__(3770);
-
-
-
-
-
-
-
-
-
-
-const stylesFn = (theme)=>({
-        control: _Control__rspack_import_3.getStyles(theme),
-        valueContainer: _ValueContainer__rspack_import_4.getStyles(),
-        dropdownIndicator: _DropdownIndicator__rspack_import_5.getStyles(),
-        menuList: _MenuList__rspack_import_6.getStyles(theme),
-        option: _Option__rspack_import_7.getStyles(),
-        input: (provided)=>({
-                ...provided,
-                color: theme.colors.neutral.c100
-            }),
-        placeholder: (provided)=>({
-                ...provided,
-                color: theme.colors.neutral.c60
-            }),
-        singleValue: (provided)=>({
-                ...provided,
-                color: "inherit"
-            }),
-        multiValue: (provided)=>({
-                ...provided,
-                backgroundColor: theme.colors.primary.c20,
-                borderRadius: theme.radii[1]
-            }),
-        multiValueLabel: (provided)=>({
-                ...provided,
-                color: theme.colors.neutral.c100
-            }),
-        multiValueRemove: (provided)=>({
-                ...provided,
-                cursor: "pointer",
-                "&:hover": {
-                    color: theme.colors.error.c50,
-                    backgroundColor: theme.colors.error.c30
-                }
-            }),
-        menu: (provided)=>({
-                ...provided,
-                border: 0,
-                boxShadow: "none",
-                background: "none"
-            })
-    });
-function SelectInput({ error, rowHeight = 48, unwrapped, extendStyles, ...props }) {
-    const theme = (0,styled_components__rspack_import_2.useTheme)();
-    const styles = (0,react__rspack_import_0.useMemo)(()=>extendStyles ? extendStyles(stylesFn(theme)) : stylesFn(theme), [
-        theme,
-        extendStyles
-    ]);
-    const { isDisabled, components = {} } = props;
-    const innerContent = /*#__PURE__*/ react__rspack_import_0_default().createElement((react_select__rspack_import_1_default()), {
-        ...props,
-        styles: {
-            ...styles,
-            ...props.styles
-        },
-        classNamePrefix: "react-select",
-        components: {
-            Control: _Control__rspack_import_3.Control,
-            ValueContainer: _ValueContainer__rspack_import_4.ValueContainer,
-            IndicatorsContainer: _IndicatorsContainer__rspack_import_8.IndicatorsContainer,
-            DropdownIndicator: _DropdownIndicator__rspack_import_5.DropdownIndicator,
-            MenuList: _MenuList__rspack_import_6.MenuList,
-            Option: _Option__rspack_import_7.Option,
-            IndicatorSeparator: null,
-            ...components
-        },
-        // @ts-expect-error We want to be able to pass extra props here…
-        rowHeight: rowHeight
-    });
-    if (unwrapped) return innerContent;
-    return /*#__PURE__*/ react__rspack_import_0_default().createElement("div", null, innerContent, error && !isDisabled && /*#__PURE__*/ react__rspack_import_0_default().createElement(_BaseInput__rspack_import_9.InputErrorContainer, {
-        variant: "paragraph"
-    }, error));
-}
-/* export default */ const __rspack_default_export = (/*#__PURE__*/(0,react__rspack_import_0.memo)(SelectInput));
-
-__webpack_require__.d(__webpack_exports__, {
-}, {
-  "default": __rspack_default_export
-});
-
-
-},
-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
-});
-
-
-},
-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
-});
-
-
-},
-205(__unused_rspack_module, __webpack_exports__, __webpack_require__) {
-
-// EXPORTS
-__webpack_require__.d(__webpack_exports__, {
-  ff: () => (/* binding */ ff),
-  rgba: () => (/* binding */ rgba)
-});
-
-// UNUSED EXPORTS: darken, ensureContrast, lighten, mix
-
-;// CONCATENATED MODULE: external "color"
-const external_color_namespaceObject = require("color");
-var external_color_default = /*#__PURE__*/__webpack_require__.n(external_color_namespaceObject);
-// EXTERNAL MODULE: ./src/styles/theme.ts
-var theme = __webpack_require__(5548);
-;// CONCATENATED MODULE: ./src/styles/helpers.ts
-
-
-const rgba = (c, a)=>external_color_default()(c).alpha(a).rgb().toString();
-const darken = (c, a)=>Color(c).darken(a).toString();
-const lighten = (c, a)=>Color(c).lighten(a).toString();
-const mix = (c, b, a)=>Color(c).mix(Color(b), a).toString();
-const ff = (v)=>{
-    const [font, type = "Regular"] = v.split("|");
-    // @ts-expect-error FIXME
-    const { style, weight } = theme.fontFamilies[font][type];
-    // @ts-expect-error FIXME
-    const fallback = theme.fontFamilies[font].fallback ?? "Arial";
-    return {
-        fontFamily: `${font}, ${fallback}`,
-        fontWeight: weight,
-        fontStyle: style
-    };
-};
-const ensureContrast = (color1, color2)=>{
-    const colorL1 = Color(color1).luminosity() + 0.05;
-    const colorL2 = Color(color2).luminosity() + 0.05;
-    const lRatio = colorL1 > colorL2 ? colorL1 / colorL2 : colorL2 / colorL1;
-    if (lRatio < 1.5) {
-        return Color(color1).rotate(180).negate().string();
-    }
-    return color1;
-};
-
-
-},
-3364(__unused_rspack_module, __webpack_exports__, __webpack_require__) {
-/* 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,
-  fontSizes: fontSizes
-});
-
-
-},
-9979(module) {
-module.exports = require("@ledgerhq/icons-ui/reactLegacy");
-
-},
-2993(module) {
-module.exports = require("@ledgerhq/ui-shared");
-
-},
-2015(module) {
-module.exports = require("react");
-
-},
-8466(module) {
-module.exports = require("react-select");
-
-},
-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.
-(() => {
-__webpack_require__.r(__webpack_exports__);
-/* 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 ___rspack_import_1 = __webpack_require__(4978);
-
-
-/* export default */ const __rspack_default_export = ({
-    title: "Form/SelectAndDialogs/Dropdown",
-    component: ___rspack_import_1["default"],
-    argTypes: {
-        value: {
-            table: {
-                disable: true
-            }
-        },
-        renderLeft: {
-            table: {
-                disable: true
-            }
-        },
-        renderRight: {
-            table: {
-                disable: true
-            }
-        },
-        rowHeight: {
-            table: {
-                disable: true
-            }
-        },
-        isDisabled: {
-            type: "boolean"
-        },
-        error: {
-            type: "string"
-        },
-        menuIsOpen: {
-            type: "boolean"
-        },
-        label: {
-            type: "string"
-        }
-    },
-    args: {
-        label: "Label"
-    }
-});
-const options = [
-    {
-        value: "chocolate",
-        label: "Chocolate"
-    },
-    {
-        value: "strawberry",
-        label: "Strawberry"
-    },
-    {
-        value: "lemon",
-        label: "Lemon"
-    },
-    {
-        value: "vanilla",
-        label: "Vanilla"
-    }
-];
-const Dropdown = (args)=>{
-    const [value, setValue] = react__rspack_import_0_default().useState(null);
-    return /*#__PURE__*/ react__rspack_import_0_default().createElement(___rspack_import_1["default"], {
-        options: options,
-        value: value,
-        onChange: setValue,
-        menuPortalTarget: document.body,
-        ...args
-    });
-};
-
-__webpack_require__.d(__webpack_exports__, {
-}, {
-  Dropdown: Dropdown,
-  "default": __rspack_default_export
-});
-
-})();
-
-module.exports = __webpack_exports__;
-})()
-;
-//# sourceMappingURL=Dropdown.stories.js.map