@ledgerhq/react-ui 0.41.2-nightly.20251129023709 → 0.41.2

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

@@ -0,0 +1,124 @@
+"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 DropdownGeneric_stories_exports = {};
+__export(DropdownGeneric_stories_exports, {
+  DropdownGeneric: () => DropdownGeneric,
+  default: () => DropdownGeneric_stories_default
+});
+module.exports = __toCommonJS(DropdownGeneric_stories_exports);
+var import_react = __toESM(require("react"));
+var import_Flex = __toESM(require("../../layout/Flex"));
+var import_Box = __toESM(require("../../layout/Box"));
+var import_Text = __toESM(require("../../asorted/Text"));
+var import_Alert = __toESM(require("../../message/Alert"));
+var import__ = __toESM(require("."));
+var import_Divider = __toESM(require("../../asorted/Divider"));
+const SmallChild = () => /* @__PURE__ */ import_react.default.createElement(
+  import_Flex.default,
+  {
+    height: 200,
+    width: 180,
+    padding: 10,
+    backgroundColor: "neutral.c30",
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  /* @__PURE__ */ import_react.default.createElement(import_Text.default, { variant: "small", color: "neutral.c60", textAlign: "center" }, "I'm a simple div with a grey background and no margin passed as children of the dropdown component.")
+);
+const BigChild = ({ containerProps }) => /* @__PURE__ */ import_react.default.createElement(
+  import_Box.default,
+  {
+    padding: 10,
+    flexDirection: "column",
+    width: "300px",
+    justifyContent: "center",
+    alignItems: "center",
+    ...containerProps
+  },
+  /* @__PURE__ */ import_react.default.createElement(import_Text.default, { variant: "small", color: "neutral.c60", textAlign: "center" }, "If the children node of the dropdown is bigger than the available space, the dropdown will restrict its own height to avoid overflowing and its inner container will scroll."),
+  /* @__PURE__ */ import_react.default.createElement(import_Box.default, { height: "100px", width: "100%", backgroundColor: "primary.c100" }),
+  /* @__PURE__ */ import_react.default.createElement(import_Box.default, { height: "100px", width: "100%", backgroundColor: "primary.c90" }),
+  /* @__PURE__ */ import_react.default.createElement(import_Box.default, { height: "100px", width: "100%", backgroundColor: "primary.c80" }),
+  /* @__PURE__ */ import_react.default.createElement(import_Box.default, { height: "100px", width: "100%", backgroundColor: "primary.c70" }),
+  /* @__PURE__ */ import_react.default.createElement(import_Box.default, { height: "100px", width: "100%", backgroundColor: "primary.c60" })
+);
+const BottomPlaceholder = () => /* @__PURE__ */ import_react.default.createElement(
+  import_Flex.default,
+  {
+    width: "100%",
+    height: "100px",
+    backgroundColor: "neutral.c30",
+    justifyContent: "center",
+    alignItems: "center",
+    padding: 20
+  },
+  /* @__PURE__ */ import_react.default.createElement(import_Text.default, { variant: "small", color: "palette.neutral.c50", textAlign: "center" }, "Ignore me, I'm just an item placed below to illustrate that the dropdown is a floating component")
+);
+const DropdownStoryTemplate = (props) => {
+  const { containerProps = {}, big = false, bigWithMaxHeight = false, ...rest } = props;
+  return /* @__PURE__ */ import_react.default.createElement(import_Flex.default, { flexDirection: "column", ...containerProps }, /* @__PURE__ */ import_react.default.createElement(import__.default, { ...rest }, big ? bigWithMaxHeight ? /* @__PURE__ */ import_react.default.createElement(BigChild, { containerProps: { maxHeight: "400px", overflow: "scroll" } }) : /* @__PURE__ */ import_react.default.createElement(BigChild, null) : /* @__PURE__ */ import_react.default.createElement(SmallChild, null)), /* @__PURE__ */ import_react.default.createElement(BottomPlaceholder, null));
+};
+const DropdownGeneric = (args) => {
+  const alignItemsPossibilities = ["flex-start", "center", "flex-end"];
+  const containerPropsPossibilities = alignItemsPossibilities.map((alignItems) => ({ alignItems }));
+  return /* @__PURE__ */ import_react.default.createElement(import_Flex.default, { flexDirection: "column", rowGap: 5 }, /* @__PURE__ */ import_react.default.createElement(import_Text.default, { variant: "h5" }, "Small content:"), containerPropsPossibilities.map(
+    (containerProps) => DropdownStoryTemplate({ ...args, containerProps })
+  ), /* @__PURE__ */ import_react.default.createElement(import_Divider.default, null), /* @__PURE__ */ import_react.default.createElement(import_Text.default, { variant: "h5" }, "Big content:"), containerPropsPossibilities.map(
+    (containerProps) => DropdownStoryTemplate({ ...args, big: true, containerProps })
+  ), /* @__PURE__ */ import_react.default.createElement(import_Divider.default, null), /* @__PURE__ */ import_react.default.createElement(import_Text.default, { variant: "h5" }, "Big content (max height on child)"), /* @__PURE__ */ import_react.default.createElement(
+    import_Alert.default,
+    {
+      type: "info",
+      title: "In the following examples, the component passed as a child has its own internal maxHeight\n        setup"
+    }
+  ), containerPropsPossibilities.map(
+    (containerProps) => DropdownStoryTemplate({ ...args, big: true, bigWithMaxHeight: true, containerProps })
+  ));
+};
+var DropdownGeneric_stories_default = {
+  title: "Form/SelectAndDialogs",
+  component: import__.default,
+  argTypes: {
+    label: { type: "string" },
+    placement: { control: { type: "select" } },
+    closeOnClickOutside: { type: "boolean" },
+    closeOnClickInside: { type: "boolean" },
+    disabled: { type: "boolean" },
+    flipDisabled: { type: "boolean" }
+  },
+  args: {
+    label: "Label",
+    placement: "bottom",
+    closeOnClickOutside: true,
+    closeOnClickInside: false,
+    disabled: false,
+    flipDisabled: false
+  }
+};
+//# sourceMappingURL=DropdownGeneric.stories.js.map

package/lib/cjs/components/form/DropdownGeneric/DropdownGeneric.stories.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/form/DropdownGeneric/DropdownGeneric.stories.tsx"],
+  "sourcesContent": ["import React from \"react\";\nimport Flex from \"../../layout/Flex\";\nimport Box from \"../../layout/Box\";\nimport Text from \"../../asorted/Text\";\nimport Alert from \"../../message/Alert\";\nimport DropdownGenericComponent, { Props as DropdownGenericProps } from \".\";\nimport Divider from \"../../asorted/Divider\";\n\nconst SmallChild = () => (\n  <Flex\n    height={200}\n    width={180}\n    padding={10}\n    backgroundColor=\"neutral.c30\"\n    justifyContent=\"center\"\n    alignItems=\"center\"\n  >\n    <Text variant=\"small\" color=\"neutral.c60\" textAlign=\"center\">\n      I'm a simple div with a grey background and no margin passed as children of the dropdown\n      component.\n    </Text>\n  </Flex>\n);\n\nconst BigChild = ({ containerProps }: { containerProps?: Record<string, unknown> }) => (\n  <Box\n    padding={10}\n    flexDirection=\"column\"\n    width=\"300px\"\n    justifyContent=\"center\"\n    alignItems=\"center\"\n    {...containerProps}\n  >\n    <Text variant=\"small\" color=\"neutral.c60\" textAlign=\"center\">\n      If the children node of the dropdown is bigger than the available space, the dropdown will\n      restrict its own height to avoid overflowing and its inner container will scroll.\n    </Text>\n    <Box height=\"100px\" width=\"100%\" backgroundColor=\"primary.c100\" />\n    <Box height=\"100px\" width=\"100%\" backgroundColor=\"primary.c90\" />\n    <Box height=\"100px\" width=\"100%\" backgroundColor=\"primary.c80\" />\n    <Box height=\"100px\" width=\"100%\" backgroundColor=\"primary.c70\" />\n    <Box height=\"100px\" width=\"100%\" backgroundColor=\"primary.c60\" />\n  </Box>\n);\n\nconst BottomPlaceholder = () => (\n  <Flex\n    width=\"100%\"\n    height=\"100px\"\n    backgroundColor=\"neutral.c30\"\n    justifyContent=\"center\"\n    alignItems=\"center\"\n    padding={20}\n  >\n    <Text variant=\"small\" color=\"palette.neutral.c50\" textAlign=\"center\">\n      Ignore me, I'm just an item placed below to illustrate that the dropdown is a floating\n      component\n    </Text>\n  </Flex>\n);\n\nconst DropdownStoryTemplate = (\n  props: Omit<DropdownGenericProps, \"children\"> & {\n    big?: boolean;\n    bigWithMaxHeight?: boolean;\n    containerProps: Record<string, unknown>;\n  },\n) => {\n  const { containerProps = {}, big = false, bigWithMaxHeight = false, ...rest } = props;\n  return (\n    <Flex flexDirection=\"column\" {...containerProps}>\n      <DropdownGenericComponent {...rest}>\n        {big ? (\n          bigWithMaxHeight ? (\n            <BigChild containerProps={{ maxHeight: \"400px\", overflow: \"scroll\" }} />\n          ) : (\n            <BigChild />\n          )\n        ) : (\n          <SmallChild />\n        )}\n      </DropdownGenericComponent>\n      <BottomPlaceholder />\n    </Flex>\n  );\n};\n\nexport const DropdownGeneric = (args: DropdownGenericProps): React.ReactNode => {\n  const alignItemsPossibilities = [\"flex-start\", \"center\", \"flex-end\"];\n  const containerPropsPossibilities = alignItemsPossibilities.map(alignItems => ({ alignItems }));\n  return (\n    <Flex flexDirection=\"column\" rowGap={5}>\n      {/**\n       * Calling DropdownTemplate as a function here to trick storybook into displaying\n       * the actual code in \"show code\" instead of an opaque \"DropdownTemplate\" component\n       *  */}\n      <Text variant=\"h5\">Small content:</Text>\n      {containerPropsPossibilities.map(containerProps =>\n        DropdownStoryTemplate({ ...args, containerProps }),\n      )}\n      <Divider />\n      <Text variant=\"h5\">Big content:</Text>\n      {containerPropsPossibilities.map(containerProps =>\n        DropdownStoryTemplate({ ...args, big: true, containerProps }),\n      )}\n      <Divider />\n      <Text variant=\"h5\">Big content (max height on child)</Text>\n      <Alert\n        type=\"info\"\n        title=\"In the following examples, the component passed as a child has its own internal maxHeight\n        setup\"\n      ></Alert>\n      {containerPropsPossibilities.map(containerProps =>\n        DropdownStoryTemplate({ ...args, big: true, bigWithMaxHeight: true, containerProps }),\n      )}\n    </Flex>\n  );\n};\n\nexport default {\n  title: \"Form/SelectAndDialogs\",\n  component: DropdownGenericComponent,\n  argTypes: {\n    label: { type: \"string\" },\n    placement: { control: { type: \"select\" } },\n    closeOnClickOutside: { type: \"boolean\" },\n    closeOnClickInside: { type: \"boolean\" },\n    disabled: { type: \"boolean\" },\n    flipDisabled: { type: \"boolean\" },\n  },\n  args: {\n    label: \"Label\",\n    placement: \"bottom\",\n    closeOnClickOutside: true,\n    closeOnClickInside: false,\n    disabled: false,\n    flipDisabled: false,\n  },\n};\n"],
+  "mappings": "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",
+  "names": ["React", "Flex", "Text", "Box", "DropdownGenericComponent", "Divider", "Alert"]
+}

package/lib/cjs/components/form/DropdownGeneric/index.js

@@ -0,0 +1,169 @@
+"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 DropdownGeneric_exports = {};
+__export(DropdownGeneric_exports, {
+  default: () => DropdownGeneric_default,
+  placements: () => placements
+});
+module.exports = __toCommonJS(DropdownGeneric_exports);
+var import_react = __toESM(require("react"));
+var import_react_dom = require("@floating-ui/react-dom");
+var import_styled_components = __toESM(require("styled-components"));
+var import__ = require("../../../");
+var import_Flex = __toESM(require("../../layout/Flex"));
+var import_Flex2 = __toESM(require("../../layout/Flex"));
+var import_Text = __toESM(require("../../asorted/Text"));
+const ButtonContainer = (0, import_styled_components.default)(import_Flex2.default).attrs({
+  flexDirection: "row",
+  width: "auto",
+  alignItems: "center",
+  height: "36px"
+})`
+  cursor: ${(p) => !p.disabled && "pointer"};
+  > :last-child {
+    /* targeting the dropdown icon */
+    ${(p) => p.opened && "transform: rotate(180deg);"}
+    margin-left: ${(p) => p.theme.space[3]}px;
+  }
+`;
+const DropdownContainer = (0, import_styled_components.default)(import_Flex.default).attrs(({ theme }) => {
+  const isLight = theme.colors.type === "light";
+  return {
+    zIndex: 1,
+    flexDirection: "column",
+    padding: 3,
+    border: `1px solid ${theme.colors.neutral[isLight ? "c20" : "c30"]}`,
+    borderRadius: "8px",
+    backgroundColor: isLight ? "neutral.c00" : "neutral.c20",
+    color: theme.colors.neutral.c80
+  };
+})`
+  overflow-y: auto;
+  box-shadow: 0px 6px 12px rgba(0, 0, 0, ${(p) => p.theme.colors.type === "light" ? 0.04 : 0.08});
+`;
+const placements = ["bottom-start", "bottom", "bottom-end"];
+const DropdownGeneric = ({
+  label,
+  closeOnClickOutside = true,
+  closeOnClickInside = false,
+  disabled = false,
+  placement = "bottom",
+  flipDisabled = false,
+  children
+}) => {
+  const divRef = (0, import_react.useRef)(null);
+  const [maxHeight, setMaxHeight] = (0, import_react.useState)();
+  const [maxWidth, setMaxWidth] = (0, import_react.useState)();
+  const [opened, setOpened] = (0, import_react.useState)(false);
+  const handleClickButton = (0, import_react.useCallback)(() => {
+    if (!disabled)
+      setOpened(!opened);
+  }, [opened, disabled]);
+  const handleClickInside = (0, import_react.useCallback)(() => {
+    if (closeOnClickInside)
+      setOpened(false);
+  }, [setOpened, closeOnClickInside]);
+  const { x, y, reference, floating, strategy, update, refs } = (0, import_react_dom.useFloating)({
+    placement: placements.includes(placement) ? placement : "bottom",
+    middleware: [
+      (0, import_react_dom.shift)(),
+      ...flipDisabled ? [] : [(0, import_react_dom.flip)()],
+      (0, import_react_dom.size)({
+        padding: 6,
+        apply({ height, width }) {
+          setMaxHeight(height);
+          setMaxWidth(width);
+        }
+      })
+    ]
+  });
+  const handleResizeOrScroll = (0, import_react.useCallback)(() => {
+    if (opened && !disabled)
+      update();
+  }, [opened, disabled, update]);
+  (0, import_react.useEffect)(() => {
+    if (!refs.reference.current || !refs.floating.current) {
+      return;
+    }
+    const parents = [
+      ...(0, import_react_dom.getScrollParents)(refs.reference.current),
+      ...(0, import_react_dom.getScrollParents)(refs.floating.current)
+    ];
+    parents.forEach((parent) => {
+      parent.addEventListener("scroll", handleResizeOrScroll);
+      parent.addEventListener("resize", handleResizeOrScroll);
+    });
+    return () => {
+      parents.forEach((parent) => {
+        parent.removeEventListener("scroll", handleResizeOrScroll);
+        parent.removeEventListener("resize", handleResizeOrScroll);
+      });
+    };
+  }, [flipDisabled, refs.reference, refs.floating, handleResizeOrScroll]);
+  (0, import_react.useEffect)(() => {
+    function handleClickOutside(event) {
+      if (closeOnClickOutside && opened && divRef.current && !divRef.current.contains(event.target)) {
+        setOpened(false);
+      }
+    }
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [closeOnClickOutside, opened, setOpened, divRef]);
+  const color = disabled ? "neutral.c50" : "neutral.c100";
+  return /* @__PURE__ */ import_react.default.createElement(import_Flex2.default, { ref: divRef }, /* @__PURE__ */ import_react.default.createElement(
+    ButtonContainer,
+    {
+      ref: reference,
+      onClick: handleClickButton,
+      disabled,
+      opened: opened && !disabled
+    },
+    /* @__PURE__ */ import_react.default.createElement(import_Text.default, { variant: "paragraph", fontWeight: "medium", color }, label),
+    /* @__PURE__ */ import_react.default.createElement(import__.IconsLegacy.DropdownMedium, { size: 20, color })
+  ), opened && !disabled && /* @__PURE__ */ import_react.default.createElement(
+    DropdownContainer,
+    {
+      ref: floating,
+      style: {
+        position: strategy,
+        top: y ?? "",
+        left: x ?? "",
+        maxHeight: maxHeight ? `${maxHeight}px` : "",
+        maxWidth: maxWidth ? "" : ""
+        // maxWidth: maxWidth ? `${maxWidth}px` : "", /* TODO: fix this */
+      },
+      onClick: handleClickInside
+    },
+    children
+  ));
+};
+var DropdownGeneric_default = DropdownGeneric;
+//# sourceMappingURL=index.js.map

package/lib/cjs/components/form/DropdownGeneric/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/form/DropdownGeneric/index.tsx"],
+  "sourcesContent": ["import React, { useCallback, useEffect, useRef, useState } from \"react\";\nimport { useFloating, getScrollParents, shift, size, flip } from \"@floating-ui/react-dom\";\nimport styled from \"styled-components\";\nimport { IconsLegacy } from \"../../../\";\nimport Flex from \"../../layout/Flex\";\nimport Box from \"../../layout/Flex\";\nimport Text from \"../../asorted/Text\";\n\nconst ButtonContainer = styled(Box).attrs({\n  flexDirection: \"row\",\n  width: \"auto\",\n  alignItems: \"center\",\n  height: \"36px\",\n})<{ disabled?: boolean; opened: boolean }>`\n  cursor: ${p => !p.disabled && \"pointer\"};\n  > :last-child {\n    /* targeting the dropdown icon */\n    ${p => p.opened && \"transform: rotate(180deg);\"}\n    margin-left: ${p => p.theme.space[3]}px;\n  }\n`;\n\nconst DropdownContainer = styled(Flex).attrs(({ theme }) => {\n  const isLight = theme.colors.type === \"light\";\n  return {\n    zIndex: 1,\n    flexDirection: \"column\",\n    padding: 3,\n    border: `1px solid ${theme.colors.neutral[isLight ? \"c20\" : \"c30\"]}`,\n    borderRadius: \"8px\",\n    backgroundColor: isLight ? \"neutral.c00\" : \"neutral.c20\",\n    color: theme.colors.neutral.c80,\n  };\n})`\n  overflow-y: auto;\n  box-shadow: 0px 6px 12px rgba(0, 0, 0, ${p => (p.theme.colors.type === \"light\" ? 0.04 : 0.08)});\n`;\n\nexport const placements = [\"bottom-start\", \"bottom\", \"bottom-end\"] as const;\ntype Placement = (typeof placements)[number];\n\nexport type Props = {\n  /**\n   * Label of the dropdown button, displayed before the dropdown icon.\n   */\n  label: string | React.ReactNode;\n  /**\n   * Controls whether the dropdown can be open.\n   * Defaults to false.\n   */\n  disabled?: boolean;\n  /**\n   * Controls whether the dropdown will close on a click event happening outside of this component.\n   * Defaults to true.\n   */\n  closeOnClickOutside?: boolean;\n  /**\n   * Controls whether the dropdown will close on a click event happening inside the dropdown.\n   * Defaults to false.\n   */\n  closeOnClickInside?: boolean;\n  /**\n   * Content of the dropdown.\n   */\n  children: React.ReactNode;\n  /**\n   * Vertical alignment of the dropdown relative to the dropdown button.\n   * Will automatically adjust to the document to avoid overflowing.\n   * Defaults to \"bottom\".\n   */\n  placement?: Placement;\n  /**\n   * Controls whether the dropdown will flip its side to keep it in view\n   * in case there isn't enough space available. See https://floating-ui.com/docs/flip\n   * Defaults to false.\n   */\n  flipDisabled?: boolean;\n};\n\nconst DropdownGeneric = ({\n  label,\n  closeOnClickOutside = true,\n  closeOnClickInside = false,\n  disabled = false,\n  placement = \"bottom\",\n  flipDisabled = false,\n  children,\n}: Props) => {\n  const divRef = useRef<HTMLDivElement>(null);\n\n  const [maxHeight, setMaxHeight] = useState<number>();\n  const [maxWidth, setMaxWidth] = useState<number>();\n\n  const [opened, setOpened] = useState(false);\n\n  const handleClickButton = useCallback(() => {\n    if (!disabled) setOpened(!opened);\n  }, [opened, disabled]);\n\n  const handleClickInside = useCallback(() => {\n    if (closeOnClickInside) setOpened(false);\n  }, [setOpened, closeOnClickInside]);\n\n  const { x, y, reference, floating, strategy, update, refs } = useFloating({\n    placement: placements.includes(placement) ? placement : \"bottom\",\n    middleware: [\n      shift(),\n      ...(flipDisabled ? [] : [flip()]),\n      size({\n        padding: 6,\n        apply({ height, width }: { height: number; width: number }) {\n          setMaxHeight(height);\n          setMaxWidth(width);\n        },\n      }),\n    ],\n  });\n\n  const handleResizeOrScroll = useCallback(() => {\n    if (opened && !disabled) update();\n  }, [opened, disabled, update]);\n\n  useEffect(() => {\n    if (!refs.reference.current || !refs.floating.current) {\n      return;\n    }\n    const parents = [\n      ...getScrollParents(refs.reference.current),\n      ...getScrollParents(refs.floating.current),\n    ];\n    parents.forEach(parent => {\n      parent.addEventListener(\"scroll\", handleResizeOrScroll);\n      parent.addEventListener(\"resize\", handleResizeOrScroll);\n    });\n    return () => {\n      parents.forEach(parent => {\n        parent.removeEventListener(\"scroll\", handleResizeOrScroll);\n        parent.removeEventListener(\"resize\", handleResizeOrScroll);\n      });\n    };\n  }, [flipDisabled, refs.reference, refs.floating, handleResizeOrScroll]);\n\n  useEffect(() => {\n    function handleClickOutside(event: MouseEvent) {\n      if (\n        closeOnClickOutside &&\n        opened &&\n        divRef.current &&\n        !divRef.current.contains(event.target as Node)\n      ) {\n        setOpened(false);\n      }\n    }\n    document.addEventListener(\"mousedown\", handleClickOutside);\n    return () => {\n      document.removeEventListener(\"mousedown\", handleClickOutside);\n    };\n  }, [closeOnClickOutside, opened, setOpened, divRef]);\n\n  const color = disabled ? \"neutral.c50\" : \"neutral.c100\";\n\n  return (\n    <Box ref={divRef}>\n      <ButtonContainer\n        ref={reference}\n        onClick={handleClickButton}\n        disabled={disabled}\n        opened={opened && !disabled}\n      >\n        <Text variant=\"paragraph\" fontWeight=\"medium\" color={color}>\n          {label}\n        </Text>\n        <IconsLegacy.DropdownMedium size={20} color={color} />\n      </ButtonContainer>\n      {opened && !disabled && (\n        <DropdownContainer\n          ref={floating}\n          style={{\n            position: strategy,\n            top: y ?? \"\",\n            left: x ?? \"\",\n            maxHeight: maxHeight ? `${maxHeight}px` : \"\",\n            maxWidth: maxWidth ? \"\" : \"\",\n            // maxWidth: maxWidth ? `${maxWidth}px` : \"\", /* TODO: fix this */\n          }}\n          onClick={handleClickInside}\n        >\n          {children}\n        </DropdownContainer>\n      )}\n    </Box>\n  );\n};\n\nexport default DropdownGeneric;\n"],
+  "mappings": "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",
+  "names": ["import_Flex", "styled", "Box", "Flex", "React", "Text"]
+}

package/lib/cjs/components/form/index.js

@@ -30,6 +30,7 @@ var form_exports = {};
 __export(form_exports, {
   Checkbox: () => import_Checkbox.default,
   Dropdown: () => import_Dropdown.default,
+  DropdownGeneric: () => import_DropdownGeneric.default,
   Input: () => import_BaseInput.default,
   LegendInput: () => import_LegendInput.default,
   NumberInput: () => import_NumberInput.default,
@@ -46,6 +47,7 @@ module.exports = __toCommonJS(form_exports);
 var import_BaseInput = __toESM(require("./BaseInput"));
 var import_Checkbox = __toESM(require("./Checkbox"));
 var import_Dropdown = __toESM(require("./Dropdown"));
+var import_DropdownGeneric = __toESM(require("./DropdownGeneric"));
 var import_LegendInput = __toESM(require("./LegendInput"));
 var import_NumberInput = __toESM(require("./NumberInput"));
 var import_QrCodeInput = __toESM(require("./QrCodeInput"));

package/lib/cjs/components/form/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/form/index.ts"],
-  "sourcesContent": ["export { default as Input } from \"./BaseInput\";\nexport { default as Checkbox } from \"./Checkbox\";\nexport { default as Dropdown } from \"./Dropdown\";\nexport { default as LegendInput } from \"./LegendInput\";\nexport { default as NumberInput } from \"./NumberInput\";\nexport { default as QrCodeInput } from \"./QrCodeInput\";\nexport { default as QuantityInput } from \"./QuantityInput\";\nexport { default as Radio } from \"./Radio\";\nexport { default as SearchInput } from \"./SearchInput\";\nexport { default as SelectInput } from \"./SelectInput\";\nexport { default as SplitInput } from \"./SplitInput\";\nexport { default as Switch } from \"./Switch\";\nexport { default as TabSelector } from \"./TabSelector\";\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAAiC;AACjC,sBAAoC;AACpC,sBAAoC;AACpC,yBAAuC;AACvC,yBAAuC;AACvC,yBAAuC;AACvC,2BAAyC;AACzC,mBAAiC;AACjC,yBAAuC;AACvC,yBAAuC;AACvC,wBAAsC;AACtC,oBAAkC;AAClC,yBAAuC;",
+  "sourcesContent": ["export { default as Input } from \"./BaseInput\";\nexport { default as Checkbox } from \"./Checkbox\";\nexport { default as Dropdown } from \"./Dropdown\";\nexport { default as DropdownGeneric } from \"./DropdownGeneric\";\nexport { default as LegendInput } from \"./LegendInput\";\nexport { default as NumberInput } from \"./NumberInput\";\nexport { default as QrCodeInput } from \"./QrCodeInput\";\nexport { default as QuantityInput } from \"./QuantityInput\";\nexport { default as Radio } from \"./Radio\";\nexport { default as SearchInput } from \"./SearchInput\";\nexport { default as SelectInput } from \"./SelectInput\";\nexport { default as SplitInput } from \"./SplitInput\";\nexport { default as Switch } from \"./Switch\";\nexport { default as TabSelector } from \"./TabSelector\";\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAAiC;AACjC,sBAAoC;AACpC,sBAAoC;AACpC,6BAA2C;AAC3C,yBAAuC;AACvC,yBAAuC;AACvC,yBAAuC;AACvC,2BAAyC;AACzC,mBAAiC;AACjC,yBAAuC;AACvC,yBAAuC;AACvC,wBAAsC;AACtC,oBAAkC;AAClC,yBAAuC;",
   "names": []
 }

package/lib/components/form/DropdownGeneric/index.d.ts

@@ -0,0 +1,43 @@
+import React from "react";
+export declare const placements: readonly ["bottom-start", "bottom", "bottom-end"];
+type Placement = (typeof placements)[number];
+export type Props = {
+    /**
+     * Label of the dropdown button, displayed before the dropdown icon.
+     */
+    label: string | React.ReactNode;
+    /**
+     * Controls whether the dropdown can be open.
+     * Defaults to false.
+     */
+    disabled?: boolean;
+    /**
+     * Controls whether the dropdown will close on a click event happening outside of this component.
+     * Defaults to true.
+     */
+    closeOnClickOutside?: boolean;
+    /**
+     * Controls whether the dropdown will close on a click event happening inside the dropdown.
+     * Defaults to false.
+     */
+    closeOnClickInside?: boolean;
+    /**
+     * Content of the dropdown.
+     */
+    children: React.ReactNode;
+    /**
+     * Vertical alignment of the dropdown relative to the dropdown button.
+     * Will automatically adjust to the document to avoid overflowing.
+     * Defaults to "bottom".
+     */
+    placement?: Placement;
+    /**
+     * Controls whether the dropdown will flip its side to keep it in view
+     * in case there isn't enough space available. See https://floating-ui.com/docs/flip
+     * Defaults to false.
+     */
+    flipDisabled?: boolean;
+};
+declare const DropdownGeneric: ({ label, closeOnClickOutside, closeOnClickInside, disabled, placement, flipDisabled, children, }: Props) => React.JSX.Element;
+export default DropdownGeneric;
+//# sourceMappingURL=index.d.ts.map

package/lib/components/form/DropdownGeneric/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/form/DropdownGeneric/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAsCxE,eAAO,MAAM,UAAU,mDAAoD,CAAC;AAC5E,KAAK,SAAS,GAAG,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC;AAE7C,MAAM,MAAM,KAAK,GAAG;IAClB;;OAEG;IACH,KAAK,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IAChC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;;OAGG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;OAIG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,CAAC;AAEF,QAAA,MAAM,eAAe,qGAQlB,KAAK,sBAyGP,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/lib/components/form/DropdownGeneric/index.js

@@ -0,0 +1,116 @@
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { useFloating, getScrollParents, shift, size, flip } from "@floating-ui/react-dom";
+import styled from "styled-components";
+import { IconsLegacy } from "../../../";
+import Flex from "../../layout/Flex";
+import Box from "../../layout/Flex";
+import Text from "../../asorted/Text";
+const ButtonContainer = styled(Box).attrs({
+    flexDirection: "row",
+    width: "auto",
+    alignItems: "center",
+    height: "36px",
+}) `
+  cursor: ${p => !p.disabled && "pointer"};
+  > :last-child {
+    /* targeting the dropdown icon */
+    ${p => p.opened && "transform: rotate(180deg);"}
+    margin-left: ${p => p.theme.space[3]}px;
+  }
+`;
+const DropdownContainer = styled(Flex).attrs(({ theme }) => {
+    const isLight = theme.colors.type === "light";
+    return {
+        zIndex: 1,
+        flexDirection: "column",
+        padding: 3,
+        border: `1px solid ${theme.colors.neutral[isLight ? "c20" : "c30"]}`,
+        borderRadius: "8px",
+        backgroundColor: isLight ? "neutral.c00" : "neutral.c20",
+        color: theme.colors.neutral.c80,
+    };
+}) `
+  overflow-y: auto;
+  box-shadow: 0px 6px 12px rgba(0, 0, 0, ${p => (p.theme.colors.type === "light" ? 0.04 : 0.08)});
+`;
+export const placements = ["bottom-start", "bottom", "bottom-end"];
+const DropdownGeneric = ({ label, closeOnClickOutside = true, closeOnClickInside = false, disabled = false, placement = "bottom", flipDisabled = false, children, }) => {
+    const divRef = useRef(null);
+    const [maxHeight, setMaxHeight] = useState();
+    const [maxWidth, setMaxWidth] = useState();
+    const [opened, setOpened] = useState(false);
+    const handleClickButton = useCallback(() => {
+        if (!disabled)
+            setOpened(!opened);
+    }, [opened, disabled]);
+    const handleClickInside = useCallback(() => {
+        if (closeOnClickInside)
+            setOpened(false);
+    }, [setOpened, closeOnClickInside]);
+    const { x, y, reference, floating, strategy, update, refs } = useFloating({
+        placement: placements.includes(placement) ? placement : "bottom",
+        middleware: [
+            shift(),
+            ...(flipDisabled ? [] : [flip()]),
+            size({
+                padding: 6,
+                apply({ height, width }) {
+                    setMaxHeight(height);
+                    setMaxWidth(width);
+                },
+            }),
+        ],
+    });
+    const handleResizeOrScroll = useCallback(() => {
+        if (opened && !disabled)
+            update();
+    }, [opened, disabled, update]);
+    useEffect(() => {
+        if (!refs.reference.current || !refs.floating.current) {
+            return;
+        }
+        const parents = [
+            ...getScrollParents(refs.reference.current),
+            ...getScrollParents(refs.floating.current),
+        ];
+        parents.forEach(parent => {
+            parent.addEventListener("scroll", handleResizeOrScroll);
+            parent.addEventListener("resize", handleResizeOrScroll);
+        });
+        return () => {
+            parents.forEach(parent => {
+                parent.removeEventListener("scroll", handleResizeOrScroll);
+                parent.removeEventListener("resize", handleResizeOrScroll);
+            });
+        };
+    }, [flipDisabled, refs.reference, refs.floating, handleResizeOrScroll]);
+    useEffect(() => {
+        function handleClickOutside(event) {
+            if (closeOnClickOutside &&
+                opened &&
+                divRef.current &&
+                !divRef.current.contains(event.target)) {
+                setOpened(false);
+            }
+        }
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => {
+            document.removeEventListener("mousedown", handleClickOutside);
+        };
+    }, [closeOnClickOutside, opened, setOpened, divRef]);
+    const color = disabled ? "neutral.c50" : "neutral.c100";
+    return (React.createElement(Box, { ref: divRef },
+        React.createElement(ButtonContainer, { ref: reference, onClick: handleClickButton, disabled: disabled, opened: opened && !disabled },
+            React.createElement(Text, { variant: "paragraph", fontWeight: "medium", color: color }, label),
+            React.createElement(IconsLegacy.DropdownMedium, { size: 20, color: color })),
+        opened && !disabled && (React.createElement(DropdownContainer, { ref: floating, style: {
+                position: strategy,
+                top: y ?? "",
+                left: x ?? "",
+                maxHeight: maxHeight ? `${maxHeight}px` : "",
+                maxWidth: maxWidth ? "" : "",
+                // maxWidth: maxWidth ? `${maxWidth}px` : "", /* TODO: fix this */
+            }, onClick: handleClickInside }, children))));
+};
+export default DropdownGeneric;
+//# sourceMappingURL=index.js.map

package/lib/components/form/DropdownGeneric/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/form/DropdownGeneric/index.tsx"],"names":[],"mappings":"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"}

package/lib/components/form/index.d.ts

@@ -1,6 +1,7 @@
 export { default as Input } from "./BaseInput";
 export { default as Checkbox } from "./Checkbox";
 export { default as Dropdown } from "./Dropdown";
+export { default as DropdownGeneric } from "./DropdownGeneric";
 export { default as LegendInput } from "./LegendInput";
 export { default as NumberInput } from "./NumberInput";
 export { default as QrCodeInput } from "./QrCodeInput";

package/lib/components/form/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/form/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/form/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC"}

package/lib/components/form/index.js

@@ -1,6 +1,7 @@
 export { default as Input } from "./BaseInput";
 export { default as Checkbox } from "./Checkbox";
 export { default as Dropdown } from "./Dropdown";
+export { default as DropdownGeneric } from "./DropdownGeneric";
 export { default as LegendInput } from "./LegendInput";
 export { default as NumberInput } from "./NumberInput";
 export { default as QrCodeInput } from "./QrCodeInput";

package/lib/components/form/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/form/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/form/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/react-ui",
-  "version": "0.41.2-nightly.20251129023709",
+  "version": "0.41.2",
   "description": "Ledger Live - Desktop UI",
   "author": "Ledger Wallet Team <team-live@ledger.fr>",
   "repository": {
@@ -60,6 +60,7 @@
     "lib/**/*"
   ],
   "dependencies": {
+    "@floating-ui/react-dom": "^0.4.0",
     "@ledgerhq/crypto-icons": "1.1.1",
     "@tanstack/react-virtual": "3.13.6",
     "@tippyjs/react": "^4.2.6",
@@ -74,8 +75,8 @@
     "react-transition-group": "^4.4.2",
     "react-window": "^1.8.6",
     "styled-system": "^5.1.5",
-    "@ledgerhq/crypto-icons-ui": "^1.24.0-nightly.20251129023709",
-    "@ledgerhq/icons-ui": "^0.17.0-nightly.20251129023709",
+    "@ledgerhq/crypto-icons-ui": "^1.24.0",
+    "@ledgerhq/icons-ui": "^0.17.0",
     "@ledgerhq/ui-shared": "^0.5.0"
   },
   "peerDependencies": {