@ledgerhq/react-ui 0.14.4 → 0.14.5-hotfix.0

package/lib/cjs/components/form/SelectInput/Select.stories.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/form/SelectInput/Select.stories.tsx"],
-  "sourcesContent": ["import React from \"react\";\nimport { useTheme } from \"styled-components\";\nimport { OptionProps, ValueContainerProps } from \"react-select\";\n\nimport Text from \"../../asorted/Text\";\nimport Flex from \"../../layout/Flex\";\nimport Grid from \"../../layout/Grid\";\nimport SearchMedium from \"@ledgerhq/icons-ui/react/SearchMedium\";\nimport SelectInput, { Props } from \"./index\";\nimport { Option } from \"./Option\";\nimport { VirtualMenuList } from \"./VirtualMenuList\";\nimport { ValueContainer } from \"./ValueContainer\";\nimport { StoryTemplate } from \"../../helpers\";\n\nconst description = `\n### A styled Select Input control\n\n> This component is based on [react-select](https://react-select.com/). Please refer to the [documentation](https://react-select.com/props) for an exhaustive list of available props.\n\n## Usage\n\n\\`\\`\\`jsx\n\nimport { SelectInput } from \"@ledgerhq/react-ui\"\n\n\\`\\`\\`\n\nBasically the component accepts a list of selectable options and a callback.\n\n\\`\\`\\`jsx\n// Minimal working example\n\nconst [value, setValue] = React.useState()\nconst options = [\n  { value: \"chocolate\", label: \"Chocolate\" },\n  { value: \"strawberry\", label: \"Strawberry\" },\n  { value: \"vanilla\", label: \"Vanilla\" },\n]\n\n<SelectInput\n  options={options}\n  value={value}\n  onChange={setValue}\n/>\n\\`\\`\\`\n\n## Portaling\n\nThe opened menu is not rendered inside a portal by default.\n\n- Use the \\`menuPortalTarget\\` [prop](https://react-select.com/advanced#portaling) to specify a node to root the portal.\n- To specify a custom z-index you will need to override the \\`menuPortal\\` style.\n\n\\`\\`\\`jsx\n<SelectInput\n  menuPortalTarget={document.body}\n  styles={{ menuPortal: (provided) => ({ ...provided, zIndex: 2 }) }}\n/>\n\\`\\`\\`\n\n## Extending Styles\n\nreact-select has built in support for [overriding styles](https://react-select.com/styles#provided-styles-and-state).\n\n#### Using the \\`extendStyles\\` props\n\nSelectInput contains custom built-in styles to integrate the select control with the rest of the Ledger design.\n\nThe \\`extendStyles\\` prop is a function that will allow you to compose new styles.\nThe function argument is a map between the react-select provided styles and additional ones.\n\n\\`\\`\\`jsx\n/*\n  The \"styles\" argument is an object containing component names as keys and functions as values.\n  These functions take as arguments the styles provided by react-select and return an object of additional styles.\n*/\nconst extendStyles = (styles) => ({\n  ...styles,\n  menuPortal: (provided) => {\n    return {\n      // \"styles.menuPortal\" will exist if SelectInput has custom styles for this component.\n      // Otherwise, use the react-select provided ones.\n      ...((styles.menuPortal && styles.menuPortal(provided)) || { ...provided }),\n      // Then extend the output with your own styles!\n      zIndex: 2,\n    };\n  },\n});\n\n<SelectInput extendStyles={extendStyles} />\n\\`\\`\\`\n\n#### Using the \\`styles\\` prop\n\nTo completely override the SelectInput styles, use the \\`style\\` prop.\n\n\\`\\`\\`jsx\n// The \"provided\" argument will only contain the base react-select styles.\nconst styles = { menuPortal: (provided) => ({ ...provided, zIndex: 2 }) }\n\n<SelectInput styles={styles} />\n\\`\\`\\`\n\n## Extending Components\n\nreact-select has built in support for [extending components](https://react-select.com/components).\n\nTo override components use the \\`components\\` prop:\n\n\\`\\`\\`jsx\n\n<SelectInput components={{ Option: ColorOption, ValueContainer: ColorValueContainer }} />\n\n\\`\\`\\`\n\nIf you would like to re-use inner SelectInput components you can import them like so:\n\n\\`\\`\\`jsx\n// Import them as modules\nimport * as DropdownIndicatorModule from \"@ledgerhq/react-ui/components/form/SelectInput/DropdownIndicator\";\nimport * as ValueContainerModule from \"@ledgerhq/react-ui/components/form/SelectInput/ValueContainer\";\nimport * as ControlModule from \"@ledgerhq/react-ui/components/form/SelectInput/Control\";\nimport * as MenuListModule from \"@ledgerhq/react-ui/components/form/SelectInput/MenuList\";\nimport * as OptionModule from \"@ledgerhq/react-ui/components/form/SelectInput/Option\";\n\n// Then each module contains the component definition and the associated style\nconst { DropdownIndicator, getStyles } = DropdownIndicatorModule\n\n<SelectInput\n  components={{dropdownIndicator: DropdownIndicator}}\n  styles={{dropdownIndicator: getStyles}}\n/>\n\\`\\`\\`\n\n## Sandbox\n\nThe following advanced example showcases how to override components and styles and disable elements.\n`;\n\nexport default {\n  title: \"Form/Input/Select\",\n  component: SelectInput,\n  argTypes: {\n    value: { table: { disable: true } },\n    renderLeft: { table: { disable: true } },\n    renderRight: { table: { disable: true } },\n    rowHeight: { table: { disable: true } },\n    isDisabled: { type: \"boolean\" },\n    error: { type: \"string\" },\n    menuIsOpen: { type: \"boolean\" },\n  },\n  parameters: {\n    docs: {\n      description: { component: description },\n    },\n  },\n};\n\nconst options = [\n  // Labels contain muttons spaces (U+2003 character).\n  // Do not replace with a regular space please!\n  { value: \"chocolate\", label: \"\uD83C\uDF6B\u2003Chocolate\" },\n  { value: \"strawberry\", label: \"\uD83C\uDF53\u2003Strawberry\" },\n  { value: \"lemon\", label: \"\uD83C\uDF4B\u2003Lemon\" },\n  { value: \"vanilla\", label: \"\uD83C\uDF66\u2003Vanilla\" },\n];\n\nconst cssColors = [\n  \"aliceblue\",\n  \"antiquewhite\",\n  \"aqua\",\n  \"aquamarine\",\n  \"azure\",\n  \"beige\",\n  \"bisque\",\n  \"black\",\n  \"blanchedalmond\",\n  \"blue\",\n  \"blueviolet\",\n  \"brown\",\n  \"burlywood\",\n  \"cadetblue\",\n  \"chartreuse\",\n  \"chocolate\",\n  \"coral\",\n  \"cornflowerblue\",\n  \"cornsilk\",\n  \"crimson\",\n  \"cyan\",\n  \"darkblue\",\n  \"darkcyan\",\n  \"darkgoldenrod\",\n  \"darkgray\",\n  \"darkgreen\",\n  \"darkgrey\",\n  \"darkkhaki\",\n  \"darkmagenta\",\n  \"darkolivegreen\",\n  \"darkorange\",\n  \"darkorchid\",\n  \"darkred\",\n  \"darksalmon\",\n  \"darkseagreen\",\n  \"darkslateblue\",\n  \"darkslategray\",\n  \"darkslategrey\",\n  \"darkturquoise\",\n  \"darkviolet\",\n  \"deeppink\",\n  \"deepskyblue\",\n  \"dimgray\",\n  \"dimgrey\",\n  \"dodgerblue\",\n  \"firebrick\",\n  \"floralwhite\",\n  \"forestgreen\",\n  \"fuchsia\",\n  \"gainsboro\",\n  \"ghostwhite\",\n  \"gold\",\n  \"goldenrod\",\n  \"gray\",\n  \"green\",\n  \"greenyellow\",\n  \"grey\",\n  \"honeydew\",\n  \"hotpink\",\n  \"indianred\",\n  \"indigo\",\n  \"ivory\",\n  \"khaki\",\n  \"lavender\",\n  \"lavenderblush\",\n  \"lawngreen\",\n  \"lemonchiffon\",\n  \"lightblue\",\n  \"lightcoral\",\n  \"lightcyan\",\n  \"lightgoldenrodyellow\",\n  \"lightgray\",\n  \"lightgreen\",\n  \"lightgrey\",\n  \"lightpink\",\n  \"lightsalmon\",\n  \"lightseagreen\",\n  \"lightskyblue\",\n  \"lightslategray\",\n  \"lightslategrey\",\n  \"lightsteelblue\",\n  \"lightyellow\",\n  \"lime\",\n  \"limegreen\",\n  \"linen\",\n  \"magenta\",\n  \"maroon\",\n  \"mediumaquamarine\",\n  \"mediumblue\",\n  \"mediumorchid\",\n  \"mediumpurple\",\n  \"mediumseagreen\",\n  \"mediumslateblue\",\n  \"mediumspringgreen\",\n  \"mediumturquoise\",\n  \"mediumvioletred\",\n  \"midnightblue\",\n  \"mintcream\",\n  \"mistyrose\",\n  \"moccasin\",\n  \"navajowhite\",\n  \"navy\",\n  \"oldlace\",\n  \"olive\",\n  \"olivedrab\",\n  \"orange\",\n  \"orangered\",\n  \"orchid\",\n  \"palegoldenrod\",\n  \"palegreen\",\n  \"paleturquoise\",\n  \"palevioletred\",\n  \"papayawhip\",\n  \"peachpuff\",\n  \"peru\",\n  \"pink\",\n  \"plum\",\n  \"powderblue\",\n  \"purple\",\n  \"red\",\n  \"rosybrown\",\n  \"royalblue\",\n  \"saddlebrown\",\n  \"salmon\",\n  \"sandybrown\",\n  \"seagreen\",\n  \"seashell\",\n  \"sienna\",\n  \"silver\",\n  \"skyblue\",\n  \"slateblue\",\n  \"slategray\",\n  \"slategrey\",\n  \"snow\",\n  \"springgreen\",\n  \"steelblue\",\n  \"tan\",\n  \"teal\",\n  \"thistle\",\n  \"tomato\",\n  \"turquoise\",\n  \"violet\",\n  \"wheat\",\n  \"white\",\n  \"whitesmoke\",\n  \"yellow\",\n  \"yellowgreen\",\n];\n\ntype SelectItem = { label: string; value: string };\n\nconst colorOptions = cssColors.map(color => ({ label: color, value: color }));\nconst ColorOption = (props: OptionProps<SelectItem, false>) => {\n  return (\n    <Option\n      {...props}\n      render={({ children }) => (\n        <Flex flex={1} py={2} alignItems=\"center\">\n          <Flex mr={4} p={4} style={{ background: props.data.value }} />\n          <Flex flex={1} style={{ textTransform: \"capitalize\" }}>\n            {children}\n          </Flex>\n        </Flex>\n      )}\n    />\n  );\n};\nconst ColorValueContainer = (props: ValueContainerProps<SelectItem, false>) => {\n  return (\n    <ValueContainer\n      render={({ children }) => (\n        <Grid alignItems=\"center\" style={{ textTransform: \"capitalize\" }}>\n          {children}\n        </Grid>\n      )}\n      {...props}\n    />\n  );\n};\n\nexport const Default: StoryTemplate<Props<SelectItem>> = args => {\n  const [value, setValue] = React.useState<SelectItem | null>(null);\n\n  return (\n    <SelectInput\n      options={colorOptions}\n      value={value}\n      onChange={setValue}\n      placeholder=\"Pick a color\"\n      isClearable\n      isOptionDisabled={option => option.value.startsWith(\"b\")}\n      components={{ Option: ColorOption, ValueContainer: ColorValueContainer }}\n      renderLeft={_ => value && <Flex mr={4} p={4} style={{ background: value.value }} />}\n      menuPortalTarget={document.body}\n      styles={{ menuPortal: provided => ({ ...provided, zIndex: 2 }) }}\n      {...args}\n    />\n  );\n};\n\nexport const Minimal: StoryTemplate<Props<SelectItem>> = args => {\n  const [value, setValue] = React.useState<SelectItem | null>(null);\n\n  return (\n    <SelectInput\n      options={options}\n      value={value}\n      onChange={setValue}\n      menuPortalTarget={document.body}\n      {...args}\n    />\n  );\n};\n\nMinimal.parameters = {\n  docs: {\n    description: {\n      story: \"This is a minimal working example with only required props.\",\n    },\n  },\n};\n\nexport const SideRenders: StoryTemplate<Props<SelectItem>> = args => {\n  const [value, setValue] = React.useState<SelectItem | null>(null);\n  const theme = useTheme();\n\n  return (\n    <SelectInput\n      options={options}\n      value={value}\n      onChange={setValue}\n      renderLeft={props => (\n        <Flex mr={3}>\n          <SearchMedium color={props.isDisabled ? \"currentColor\" : theme.colors.neutral.c70} />\n        </Flex>\n      )}\n      renderRight={() => (\n        <Text mr={4} fontWeight=\"semiBold\" variant={\"body\"} color=\"inherit\">\n          #Right\n        </Text>\n      )}\n      menuPortalTarget={document.body}\n      {...args}\n    />\n  );\n};\n\nSideRenders.parameters = {\n  docs: {\n    description: {\n      story:\n        \"This example has side renders - a magnifying glass icon on the left and custom label on the right.\",\n    },\n  },\n};\n\nconst CustomOption = (props: OptionProps<SelectItem, false>) => {\n  return (\n    <Option\n      {...props}\n      render={({ children }) => (\n        <Flex flex={1} alignItems=\"center\">\n          <Text fontWeight=\"semiBold\" variant={\"paragraph\"} mr={4}>\n            #Left\n          </Text>\n          <Flex flex={1} justifyContent=\"space-between\">\n            {children}\n            <Text fontWeight=\"semiBold\" variant={\"paragraph\"} color=\"inherit\">\n              #Right\n            </Text>\n          </Flex>\n        </Flex>\n      )}\n    />\n  );\n};\nexport const CustomOptions: StoryTemplate<Props<SelectItem>> = args => {\n  const [value, setValue] = React.useState<SelectItem | null>();\n\n  return (\n    <SelectInput\n      options={options}\n      value={value}\n      onChange={setValue}\n      components={{ Option: CustomOption }}\n      menuPortalTarget={document.body}\n      {...args}\n    />\n  );\n};\n\nCustomOptions.parameters = {\n  docs: {\n    description: {\n      story: \"Here the `Option` component is overriden to display side labels (#Left and #Right).\",\n    },\n  },\n};\n\nexport const DisabledOption: StoryTemplate<Props<SelectItem>> = args => {\n  const [value, setValue] = React.useState<SelectItem | null>(null);\n\n  return (\n    <SelectInput\n      options={options}\n      value={value}\n      onChange={setValue}\n      isOptionDisabled={option => option.value === \"lemon\"}\n      menuPortalTarget={document.body}\n      {...args}\n    />\n  );\n};\n\nDisabledOption.parameters = {\n  docs: {\n    description: {\n      story:\n        \"Using the `isOptionDisabled` prop, options having a value that matches 'lemon' are disabled.\",\n    },\n  },\n};\n\nconst hugeOptions = new Array(10000).fill(0).map((_, i) => ({ label: \"\" + i, value: \"\" + i }));\nexport const VirtualList: StoryTemplate<Props<SelectItem>> = args => {\n  const [value, setValue] = React.useState<SelectItem | null>(null);\n\n  return (\n    <SelectInput\n      options={hugeOptions}\n      value={value}\n      onChange={setValue}\n      components={{\n        MenuList: VirtualMenuList,\n      }}\n      menuPortalTarget={document.body}\n      {...args}\n    />\n  );\n};\n\nVirtualList.parameters = {\n  docs: {\n    description: {\n      story:\n        \"This control contains a list of 10_000 elements. It uses the `VirtualMenuList` component to render the list inside a `react-window` wrapper.\",\n    },\n  },\n};\n\nexport const MultiSelect: StoryTemplate<Props<SelectItem, true>> = args => {\n  const [value, setValue] = React.useState<readonly SelectItem[]>([]);\n\n  return (\n    <SelectInput\n      isMulti\n      options={options}\n      value={value}\n      onChange={setValue}\n      menuPortalTarget={document.body}\n      {...args}\n    />\n  );\n};\n\nMultiSelect.parameters = {\n  docs: {\n    description: {\n      story: \"A standard selector with multiselection using the `isMulti` prop.\",\n    },\n  },\n};\n"],
+  "sourcesContent": ["import React from \"react\";\nimport { useTheme } from \"styled-components\";\nimport { OptionProps, ValueContainerProps } from \"react-select\";\n\nimport Text from \"../../asorted/Text\";\nimport Flex from \"../../layout/Flex\";\nimport Grid from \"../../layout/Grid\";\nimport SearchMedium from \"@ledgerhq/icons-ui/reactLegacy/SearchMedium\";\nimport SelectInput, { Props } from \"./index\";\nimport { Option } from \"./Option\";\nimport { VirtualMenuList } from \"./VirtualMenuList\";\nimport { ValueContainer } from \"./ValueContainer\";\nimport { StoryTemplate } from \"../../helpers\";\n\nconst description = `\n### A styled Select Input control\n\n> This component is based on [react-select](https://react-select.com/). Please refer to the [documentation](https://react-select.com/props) for an exhaustive list of available props.\n\n## Usage\n\n\\`\\`\\`jsx\n\nimport { SelectInput } from \"@ledgerhq/react-ui\"\n\n\\`\\`\\`\n\nBasically the component accepts a list of selectable options and a callback.\n\n\\`\\`\\`jsx\n// Minimal working example\n\nconst [value, setValue] = React.useState()\nconst options = [\n  { value: \"chocolate\", label: \"Chocolate\" },\n  { value: \"strawberry\", label: \"Strawberry\" },\n  { value: \"vanilla\", label: \"Vanilla\" },\n]\n\n<SelectInput\n  options={options}\n  value={value}\n  onChange={setValue}\n/>\n\\`\\`\\`\n\n## Portaling\n\nThe opened menu is not rendered inside a portal by default.\n\n- Use the \\`menuPortalTarget\\` [prop](https://react-select.com/advanced#portaling) to specify a node to root the portal.\n- To specify a custom z-index you will need to override the \\`menuPortal\\` style.\n\n\\`\\`\\`jsx\n<SelectInput\n  menuPortalTarget={document.body}\n  styles={{ menuPortal: (provided) => ({ ...provided, zIndex: 2 }) }}\n/>\n\\`\\`\\`\n\n## Extending Styles\n\nreact-select has built in support for [overriding styles](https://react-select.com/styles#provided-styles-and-state).\n\n#### Using the \\`extendStyles\\` props\n\nSelectInput contains custom built-in styles to integrate the select control with the rest of the Ledger design.\n\nThe \\`extendStyles\\` prop is a function that will allow you to compose new styles.\nThe function argument is a map between the react-select provided styles and additional ones.\n\n\\`\\`\\`jsx\n/*\n  The \"styles\" argument is an object containing component names as keys and functions as values.\n  These functions take as arguments the styles provided by react-select and return an object of additional styles.\n*/\nconst extendStyles = (styles) => ({\n  ...styles,\n  menuPortal: (provided) => {\n    return {\n      // \"styles.menuPortal\" will exist if SelectInput has custom styles for this component.\n      // Otherwise, use the react-select provided ones.\n      ...((styles.menuPortal && styles.menuPortal(provided)) || { ...provided }),\n      // Then extend the output with your own styles!\n      zIndex: 2,\n    };\n  },\n});\n\n<SelectInput extendStyles={extendStyles} />\n\\`\\`\\`\n\n#### Using the \\`styles\\` prop\n\nTo completely override the SelectInput styles, use the \\`style\\` prop.\n\n\\`\\`\\`jsx\n// The \"provided\" argument will only contain the base react-select styles.\nconst styles = { menuPortal: (provided) => ({ ...provided, zIndex: 2 }) }\n\n<SelectInput styles={styles} />\n\\`\\`\\`\n\n## Extending Components\n\nreact-select has built in support for [extending components](https://react-select.com/components).\n\nTo override components use the \\`components\\` prop:\n\n\\`\\`\\`jsx\n\n<SelectInput components={{ Option: ColorOption, ValueContainer: ColorValueContainer }} />\n\n\\`\\`\\`\n\nIf you would like to re-use inner SelectInput components you can import them like so:\n\n\\`\\`\\`jsx\n// Import them as modules\nimport * as DropdownIndicatorModule from \"@ledgerhq/react-ui/components/form/SelectInput/DropdownIndicator\";\nimport * as ValueContainerModule from \"@ledgerhq/react-ui/components/form/SelectInput/ValueContainer\";\nimport * as ControlModule from \"@ledgerhq/react-ui/components/form/SelectInput/Control\";\nimport * as MenuListModule from \"@ledgerhq/react-ui/components/form/SelectInput/MenuList\";\nimport * as OptionModule from \"@ledgerhq/react-ui/components/form/SelectInput/Option\";\n\n// Then each module contains the component definition and the associated style\nconst { DropdownIndicator, getStyles } = DropdownIndicatorModule\n\n<SelectInput\n  components={{dropdownIndicator: DropdownIndicator}}\n  styles={{dropdownIndicator: getStyles}}\n/>\n\\`\\`\\`\n\n## Sandbox\n\nThe following advanced example showcases how to override components and styles and disable elements.\n`;\n\nexport default {\n  title: \"Form/Input/Select\",\n  component: SelectInput,\n  argTypes: {\n    value: { table: { disable: true } },\n    renderLeft: { table: { disable: true } },\n    renderRight: { table: { disable: true } },\n    rowHeight: { table: { disable: true } },\n    isDisabled: { type: \"boolean\" },\n    error: { type: \"string\" },\n    menuIsOpen: { type: \"boolean\" },\n  },\n  parameters: {\n    docs: {\n      description: { component: description },\n    },\n  },\n};\n\nconst options = [\n  // Labels contain muttons spaces (U+2003 character).\n  // Do not replace with a regular space please!\n  { value: \"chocolate\", label: \"\uD83C\uDF6B\u2003Chocolate\" },\n  { value: \"strawberry\", label: \"\uD83C\uDF53\u2003Strawberry\" },\n  { value: \"lemon\", label: \"\uD83C\uDF4B\u2003Lemon\" },\n  { value: \"vanilla\", label: \"\uD83C\uDF66\u2003Vanilla\" },\n];\n\nconst cssColors = [\n  \"aliceblue\",\n  \"antiquewhite\",\n  \"aqua\",\n  \"aquamarine\",\n  \"azure\",\n  \"beige\",\n  \"bisque\",\n  \"black\",\n  \"blanchedalmond\",\n  \"blue\",\n  \"blueviolet\",\n  \"brown\",\n  \"burlywood\",\n  \"cadetblue\",\n  \"chartreuse\",\n  \"chocolate\",\n  \"coral\",\n  \"cornflowerblue\",\n  \"cornsilk\",\n  \"crimson\",\n  \"cyan\",\n  \"darkblue\",\n  \"darkcyan\",\n  \"darkgoldenrod\",\n  \"darkgray\",\n  \"darkgreen\",\n  \"darkgrey\",\n  \"darkkhaki\",\n  \"darkmagenta\",\n  \"darkolivegreen\",\n  \"darkorange\",\n  \"darkorchid\",\n  \"darkred\",\n  \"darksalmon\",\n  \"darkseagreen\",\n  \"darkslateblue\",\n  \"darkslategray\",\n  \"darkslategrey\",\n  \"darkturquoise\",\n  \"darkviolet\",\n  \"deeppink\",\n  \"deepskyblue\",\n  \"dimgray\",\n  \"dimgrey\",\n  \"dodgerblue\",\n  \"firebrick\",\n  \"floralwhite\",\n  \"forestgreen\",\n  \"fuchsia\",\n  \"gainsboro\",\n  \"ghostwhite\",\n  \"gold\",\n  \"goldenrod\",\n  \"gray\",\n  \"green\",\n  \"greenyellow\",\n  \"grey\",\n  \"honeydew\",\n  \"hotpink\",\n  \"indianred\",\n  \"indigo\",\n  \"ivory\",\n  \"khaki\",\n  \"lavender\",\n  \"lavenderblush\",\n  \"lawngreen\",\n  \"lemonchiffon\",\n  \"lightblue\",\n  \"lightcoral\",\n  \"lightcyan\",\n  \"lightgoldenrodyellow\",\n  \"lightgray\",\n  \"lightgreen\",\n  \"lightgrey\",\n  \"lightpink\",\n  \"lightsalmon\",\n  \"lightseagreen\",\n  \"lightskyblue\",\n  \"lightslategray\",\n  \"lightslategrey\",\n  \"lightsteelblue\",\n  \"lightyellow\",\n  \"lime\",\n  \"limegreen\",\n  \"linen\",\n  \"magenta\",\n  \"maroon\",\n  \"mediumaquamarine\",\n  \"mediumblue\",\n  \"mediumorchid\",\n  \"mediumpurple\",\n  \"mediumseagreen\",\n  \"mediumslateblue\",\n  \"mediumspringgreen\",\n  \"mediumturquoise\",\n  \"mediumvioletred\",\n  \"midnightblue\",\n  \"mintcream\",\n  \"mistyrose\",\n  \"moccasin\",\n  \"navajowhite\",\n  \"navy\",\n  \"oldlace\",\n  \"olive\",\n  \"olivedrab\",\n  \"orange\",\n  \"orangered\",\n  \"orchid\",\n  \"palegoldenrod\",\n  \"palegreen\",\n  \"paleturquoise\",\n  \"palevioletred\",\n  \"papayawhip\",\n  \"peachpuff\",\n  \"peru\",\n  \"pink\",\n  \"plum\",\n  \"powderblue\",\n  \"purple\",\n  \"red\",\n  \"rosybrown\",\n  \"royalblue\",\n  \"saddlebrown\",\n  \"salmon\",\n  \"sandybrown\",\n  \"seagreen\",\n  \"seashell\",\n  \"sienna\",\n  \"silver\",\n  \"skyblue\",\n  \"slateblue\",\n  \"slategray\",\n  \"slategrey\",\n  \"snow\",\n  \"springgreen\",\n  \"steelblue\",\n  \"tan\",\n  \"teal\",\n  \"thistle\",\n  \"tomato\",\n  \"turquoise\",\n  \"violet\",\n  \"wheat\",\n  \"white\",\n  \"whitesmoke\",\n  \"yellow\",\n  \"yellowgreen\",\n];\n\ntype SelectItem = { label: string; value: string };\n\nconst colorOptions = cssColors.map(color => ({ label: color, value: color }));\nconst ColorOption = (props: OptionProps<SelectItem, false>) => {\n  return (\n    <Option\n      {...props}\n      render={({ children }) => (\n        <Flex flex={1} py={2} alignItems=\"center\">\n          <Flex mr={4} p={4} style={{ background: props.data.value }} />\n          <Flex flex={1} style={{ textTransform: \"capitalize\" }}>\n            {children}\n          </Flex>\n        </Flex>\n      )}\n    />\n  );\n};\nconst ColorValueContainer = (props: ValueContainerProps<SelectItem, false>) => {\n  return (\n    <ValueContainer\n      render={({ children }) => (\n        <Grid alignItems=\"center\" style={{ textTransform: \"capitalize\" }}>\n          {children}\n        </Grid>\n      )}\n      {...props}\n    />\n  );\n};\n\nexport const Default: StoryTemplate<Props<SelectItem>> = args => {\n  const [value, setValue] = React.useState<SelectItem | null>(null);\n\n  return (\n    <SelectInput\n      options={colorOptions}\n      value={value}\n      onChange={setValue}\n      placeholder=\"Pick a color\"\n      isClearable\n      isOptionDisabled={option => option.value.startsWith(\"b\")}\n      components={{ Option: ColorOption, ValueContainer: ColorValueContainer }}\n      renderLeft={_ => value && <Flex mr={4} p={4} style={{ background: value.value }} />}\n      menuPortalTarget={document.body}\n      styles={{ menuPortal: provided => ({ ...provided, zIndex: 2 }) }}\n      {...args}\n    />\n  );\n};\n\nexport const Minimal: StoryTemplate<Props<SelectItem>> = args => {\n  const [value, setValue] = React.useState<SelectItem | null>(null);\n\n  return (\n    <SelectInput\n      options={options}\n      value={value}\n      onChange={setValue}\n      menuPortalTarget={document.body}\n      {...args}\n    />\n  );\n};\n\nMinimal.parameters = {\n  docs: {\n    description: {\n      story: \"This is a minimal working example with only required props.\",\n    },\n  },\n};\n\nexport const SideRenders: StoryTemplate<Props<SelectItem>> = args => {\n  const [value, setValue] = React.useState<SelectItem | null>(null);\n  const theme = useTheme();\n\n  return (\n    <SelectInput\n      options={options}\n      value={value}\n      onChange={setValue}\n      renderLeft={props => (\n        <Flex mr={3}>\n          <SearchMedium color={props.isDisabled ? \"currentColor\" : theme.colors.neutral.c70} />\n        </Flex>\n      )}\n      renderRight={() => (\n        <Text mr={4} fontWeight=\"semiBold\" variant={\"body\"} color=\"inherit\">\n          #Right\n        </Text>\n      )}\n      menuPortalTarget={document.body}\n      {...args}\n    />\n  );\n};\n\nSideRenders.parameters = {\n  docs: {\n    description: {\n      story:\n        \"This example has side renders - a magnifying glass icon on the left and custom label on the right.\",\n    },\n  },\n};\n\nconst CustomOption = (props: OptionProps<SelectItem, false>) => {\n  return (\n    <Option\n      {...props}\n      render={({ children }) => (\n        <Flex flex={1} alignItems=\"center\">\n          <Text fontWeight=\"semiBold\" variant={\"paragraph\"} mr={4}>\n            #Left\n          </Text>\n          <Flex flex={1} justifyContent=\"space-between\">\n            {children}\n            <Text fontWeight=\"semiBold\" variant={\"paragraph\"} color=\"inherit\">\n              #Right\n            </Text>\n          </Flex>\n        </Flex>\n      )}\n    />\n  );\n};\nexport const CustomOptions: StoryTemplate<Props<SelectItem>> = args => {\n  const [value, setValue] = React.useState<SelectItem | null>();\n\n  return (\n    <SelectInput\n      options={options}\n      value={value}\n      onChange={setValue}\n      components={{ Option: CustomOption }}\n      menuPortalTarget={document.body}\n      {...args}\n    />\n  );\n};\n\nCustomOptions.parameters = {\n  docs: {\n    description: {\n      story: \"Here the `Option` component is overriden to display side labels (#Left and #Right).\",\n    },\n  },\n};\n\nexport const DisabledOption: StoryTemplate<Props<SelectItem>> = args => {\n  const [value, setValue] = React.useState<SelectItem | null>(null);\n\n  return (\n    <SelectInput\n      options={options}\n      value={value}\n      onChange={setValue}\n      isOptionDisabled={option => option.value === \"lemon\"}\n      menuPortalTarget={document.body}\n      {...args}\n    />\n  );\n};\n\nDisabledOption.parameters = {\n  docs: {\n    description: {\n      story:\n        \"Using the `isOptionDisabled` prop, options having a value that matches 'lemon' are disabled.\",\n    },\n  },\n};\n\nconst hugeOptions = new Array(10000).fill(0).map((_, i) => ({ label: \"\" + i, value: \"\" + i }));\nexport const VirtualList: StoryTemplate<Props<SelectItem>> = args => {\n  const [value, setValue] = React.useState<SelectItem | null>(null);\n\n  return (\n    <SelectInput\n      options={hugeOptions}\n      value={value}\n      onChange={setValue}\n      components={{\n        MenuList: VirtualMenuList,\n      }}\n      menuPortalTarget={document.body}\n      {...args}\n    />\n  );\n};\n\nVirtualList.parameters = {\n  docs: {\n    description: {\n      story:\n        \"This control contains a list of 10_000 elements. It uses the `VirtualMenuList` component to render the list inside a `react-window` wrapper.\",\n    },\n  },\n};\n\nexport const MultiSelect: StoryTemplate<Props<SelectItem, true>> = args => {\n  const [value, setValue] = React.useState<readonly SelectItem[]>([]);\n\n  return (\n    <SelectInput\n      isMulti\n      options={options}\n      value={value}\n      onChange={setValue}\n      menuPortalTarget={document.body}\n      {...args}\n    />\n  );\n};\n\nMultiSelect.parameters = {\n  docs: {\n    description: {\n      story: \"A standard selector with multiselection using the `isMulti` prop.\",\n    },\n  },\n};\n"],
   "mappings": "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",
   "names": ["SelectInput", "React", "Flex", "Grid", "SearchMedium", "Text"]
 }

package/lib/cjs/components/layout/Drawer/index.js

@@ -37,8 +37,8 @@ var import_react_dom = __toESM(require("react-dom"));
 var import_styled_components = __toESM(require("styled-components"));
 var import_Flex = __toESM(require("../Flex"));
 var import_Divider = __toESM(require("../../asorted/Divider"));
-var import_CloseMedium = __toESM(require("@ledgerhq/icons-ui/react/CloseMedium"));
-var import_ArrowLeftMedium = __toESM(require("@ledgerhq/icons-ui/react/ArrowLeftMedium"));
+var import_CloseMedium = __toESM(require("@ledgerhq/icons-ui/reactLegacy/CloseMedium"));
+var import_ArrowLeftMedium = __toESM(require("@ledgerhq/icons-ui/reactLegacy/ArrowLeftMedium"));
 var import_TransitionSlide = __toESM(require("../../transitions/TransitionSlide"));
 var import_TransitionInOut = __toESM(require("../../transitions/TransitionInOut"));
 var import_Text = __toESM(require("../../asorted/Text"));
@@ -177,7 +177,7 @@ const DrawerContent = import_react.default.forwardRef(
 );
 const Drawer = ({ children, menuPortalTarget, ...sideProps }, ref) => {
   const $root = import_react.default.useMemo(
-    () => menuPortalTarget === void 0 && typeof document !== void 0 ? document.querySelector("body") : menuPortalTarget,
+    () => menuPortalTarget === void 0 && typeof document !== "undefined" ? document.querySelector("body") : menuPortalTarget,
     [menuPortalTarget]
   );
   if (!$root) {

package/lib/cjs/components/layout/Drawer/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/layout/Drawer/index.tsx"],
-  "sourcesContent": ["import React, { useCallback } from \"react\";\nimport ReactDOM from \"react-dom\";\nimport styled from \"styled-components\";\nimport FlexBox, { FlexBoxProps } from \"../Flex\";\nimport Divider, { Props as DividerProps } from \"../../asorted/Divider\";\nimport Close from \"@ledgerhq/icons-ui/react/CloseMedium\";\nimport ArrowLeft from \"@ledgerhq/icons-ui/react/ArrowLeftMedium\";\n\nimport TransitionSlide from \"../../transitions/TransitionSlide\";\nimport TransitionInOut from \"../../transitions/TransitionInOut\";\nimport Text from \"../../asorted/Text\";\nimport Button from \"../../cta/Button\";\n\nexport enum Direction {\n  Left = \"left\",\n  Right = \"right\",\n}\n\nconst Container = styled(FlexBox)`\n  width: 100%;\n  height: 100%;\n  flex-direction: column;\n`;\n\nconst Wrapper = styled(FlexBox)<{\n  big?: boolean;\n}>`\n  height: 100%;\n  width: ${p =>\n    p.big ? p.theme.sizes.drawer.side.big.width : p.theme.sizes.drawer.side.small.width}px;\n  flex-direction: column;\n  align-items: stretch;\n  justify-content: space-between;\n  z-index: ${p => p.theme.zIndexes[8]};\n`;\n\nconst Overlay = styled.div<{ direction: Direction }>`\n  display: flex;\n  position: fixed;\n  justify-content: ${p => (p.direction === Direction.Left ? \"flex-end\" : \"flex-start\")};\n  top: 0;\n  left: 0;\n  width: 100vw;\n  height: 100vh;\n  z-index: 999;\n  background-color: ${p => p.theme.colors.constant.overlay};\n`;\n\nconst ScrollWrapper = styled(FlexBox)`\n  &::-webkit-scrollbar {\n    display: none;\n  }\n`;\n\nconst ButtonPlaceholder = styled.div`\n  min-width: ${p => p.theme.space[12]}px;\n`;\n\nexport interface DrawerProps {\n  isOpen: boolean;\n  children: React.ReactNode;\n  title?: React.ReactNode;\n  footer?: React.ReactNode;\n  big?: boolean;\n  ignoreBackdropClick?: boolean;\n  backgroundColor?: string;\n  onClose: () => void;\n  onBack?: () => void;\n  setTransitionsEnabled?: (arg0: boolean) => void;\n  hideNavigation?: boolean;\n  menuPortalTarget?: Element | null;\n  direction?: Direction;\n  extraContainerProps?: Partial<FlexBoxProps>;\n  extraHeaderProps?: Partial<FlexBoxProps>;\n  extraFooterProps?: Partial<FlexBoxProps>;\n  extraFooterDividerProps?: Partial<DividerProps>;\n}\n\nconst DrawerContent = React.forwardRef(\n  (\n    {\n      isOpen,\n      title,\n      children,\n      footer,\n      big,\n      onClose,\n      backgroundColor,\n      setTransitionsEnabled = () => 0,\n      onBack,\n      extraContainerProps,\n      extraHeaderProps,\n      extraFooterProps,\n      extraFooterDividerProps,\n      ignoreBackdropClick = false,\n      hideNavigation = true,\n      direction = Direction.Left,\n    }: DrawerProps,\n    ref?: React.ForwardedRef<HTMLDivElement>,\n  ) => {\n    const disableChildAnimations = useCallback(\n      () => setTransitionsEnabled(false),\n      [setTransitionsEnabled],\n    );\n    const enableChildAnimations = useCallback(\n      () => setTransitionsEnabled(true),\n      [setTransitionsEnabled],\n    );\n\n    const handleBackdropClick = useCallback(() => {\n      if (!ignoreBackdropClick) {\n        onClose();\n      }\n    }, [onClose, ignoreBackdropClick]);\n\n    const stopClickPropagation = useCallback((e: React.MouseEvent) => {\n      e.stopPropagation();\n    }, []);\n\n    return (\n      <TransitionInOut\n        in={isOpen}\n        appear\n        mountOnEnter\n        unmountOnExit\n        onEntering={disableChildAnimations}\n        onEntered={enableChildAnimations}\n        onExiting={disableChildAnimations}\n      >\n        <Overlay direction={direction} onClick={handleBackdropClick} ref={ref}>\n          <TransitionSlide\n            in={isOpen}\n            direction={direction}\n            fixed\n            reverseExit\n            appear\n            mountOnEnter\n            unmountOnExit\n          >\n            <Wrapper\n              big={big}\n              onClick={stopClickPropagation}\n              backgroundColor={backgroundColor ?? \"background.main\"}\n            >\n              <Container>\n                <FlexBox\n                  justifyContent=\"space-between\"\n                  alignItems=\"center\"\n                  p={12}\n                  pb={10}\n                  {...extraHeaderProps}\n                >\n                  {!hideNavigation && (\n                    <>\n                      {onBack != null ? (\n                        <Button variant=\"neutral\" onClick={onBack} Icon={ArrowLeft} />\n                      ) : (\n                        <ButtonPlaceholder />\n                      )}\n                    </>\n                  )}\n                  {(\n                    <Text variant={\"h3\"} flex={1} textAlign=\"center\">\n                      {title}\n                    </Text>\n                  ) || <div />}\n                  <FlexBox alignSelf=\"flex-start\">\n                    <Button variant=\"neutral\" onClick={onClose} Icon={Close} />\n                  </FlexBox>\n                </FlexBox>\n                <ScrollWrapper\n                  flexDirection=\"column\"\n                  alignItems=\"stretch\"\n                  overflow=\"scroll\"\n                  position=\"relative\"\n                  p={12}\n                  pt={0}\n                  flex={1}\n                  {...extraContainerProps}\n                >\n                  {children}\n                </ScrollWrapper>\n                {footer && (\n                  <>\n                    <Divider {...extraFooterDividerProps} />\n                    <FlexBox alignItems=\"center\" py={8} px={12} {...extraFooterProps}>\n                      {footer}\n                    </FlexBox>\n                  </>\n                )}\n              </Container>\n            </Wrapper>\n          </TransitionSlide>\n        </Overlay>\n      </TransitionInOut>\n    );\n  },\n);\n\nconst Drawer = (\n  { children, menuPortalTarget, ...sideProps }: DrawerProps,\n  ref?: React.ForwardedRef<HTMLDivElement>,\n): React.ReactElement => {\n  const $root = React.useMemo(\n    () =>\n      menuPortalTarget === undefined && typeof document !== undefined\n        ? document.querySelector(\"body\")\n        : menuPortalTarget,\n    [menuPortalTarget],\n  );\n  if (!$root) {\n    return (\n      <DrawerContent ref={ref} {...sideProps}>\n        {children}\n      </DrawerContent>\n    );\n  } else {\n    return ReactDOM.createPortal(\n      <DrawerContent ref={ref} {...sideProps}>\n        {children}\n      </DrawerContent>,\n      $root,\n    );\n  }\n};\n\nexport default React.forwardRef(Drawer);\n"],
-  "mappings": "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",
+  "sourcesContent": ["import React, { useCallback } from \"react\";\nimport ReactDOM from \"react-dom\";\nimport styled from \"styled-components\";\nimport FlexBox, { FlexBoxProps } from \"../Flex\";\nimport Divider, { Props as DividerProps } from \"../../asorted/Divider\";\nimport Close from \"@ledgerhq/icons-ui/reactLegacy/CloseMedium\";\nimport ArrowLeft from \"@ledgerhq/icons-ui/reactLegacy/ArrowLeftMedium\";\n\nimport TransitionSlide from \"../../transitions/TransitionSlide\";\nimport TransitionInOut from \"../../transitions/TransitionInOut\";\nimport Text from \"../../asorted/Text\";\nimport Button from \"../../cta/Button\";\n\nexport enum Direction {\n  Left = \"left\",\n  Right = \"right\",\n}\n\nconst Container = styled(FlexBox)`\n  width: 100%;\n  height: 100%;\n  flex-direction: column;\n`;\n\nconst Wrapper = styled(FlexBox)<{\n  big?: boolean;\n}>`\n  height: 100%;\n  width: ${p =>\n    p.big ? p.theme.sizes.drawer.side.big.width : p.theme.sizes.drawer.side.small.width}px;\n  flex-direction: column;\n  align-items: stretch;\n  justify-content: space-between;\n  z-index: ${p => p.theme.zIndexes[8]};\n`;\n\nconst Overlay = styled.div<{ direction: Direction }>`\n  display: flex;\n  position: fixed;\n  justify-content: ${p => (p.direction === Direction.Left ? \"flex-end\" : \"flex-start\")};\n  top: 0;\n  left: 0;\n  width: 100vw;\n  height: 100vh;\n  z-index: 999;\n  background-color: ${p => p.theme.colors.constant.overlay};\n`;\n\nconst ScrollWrapper = styled(FlexBox)`\n  &::-webkit-scrollbar {\n    display: none;\n  }\n`;\n\nconst ButtonPlaceholder = styled.div`\n  min-width: ${p => p.theme.space[12]}px;\n`;\n\nexport interface DrawerProps {\n  isOpen: boolean;\n  children: React.ReactNode;\n  title?: React.ReactNode;\n  footer?: React.ReactNode;\n  big?: boolean;\n  ignoreBackdropClick?: boolean;\n  backgroundColor?: string;\n  onClose: () => void;\n  onBack?: () => void;\n  setTransitionsEnabled?: (arg0: boolean) => void;\n  hideNavigation?: boolean;\n  menuPortalTarget?: Element | null;\n  direction?: Direction;\n  extraContainerProps?: Partial<FlexBoxProps>;\n  extraHeaderProps?: Partial<FlexBoxProps>;\n  extraFooterProps?: Partial<FlexBoxProps>;\n  extraFooterDividerProps?: Partial<DividerProps>;\n}\n\nconst DrawerContent = React.forwardRef(\n  (\n    {\n      isOpen,\n      title,\n      children,\n      footer,\n      big,\n      onClose,\n      backgroundColor,\n      setTransitionsEnabled = () => 0,\n      onBack,\n      extraContainerProps,\n      extraHeaderProps,\n      extraFooterProps,\n      extraFooterDividerProps,\n      ignoreBackdropClick = false,\n      hideNavigation = true,\n      direction = Direction.Left,\n    }: DrawerProps,\n    ref?: React.ForwardedRef<HTMLDivElement>,\n  ) => {\n    const disableChildAnimations = useCallback(\n      () => setTransitionsEnabled(false),\n      [setTransitionsEnabled],\n    );\n    const enableChildAnimations = useCallback(\n      () => setTransitionsEnabled(true),\n      [setTransitionsEnabled],\n    );\n\n    const handleBackdropClick = useCallback(() => {\n      if (!ignoreBackdropClick) {\n        onClose();\n      }\n    }, [onClose, ignoreBackdropClick]);\n\n    const stopClickPropagation = useCallback((e: React.MouseEvent) => {\n      e.stopPropagation();\n    }, []);\n\n    return (\n      <TransitionInOut\n        in={isOpen}\n        appear\n        mountOnEnter\n        unmountOnExit\n        onEntering={disableChildAnimations}\n        onEntered={enableChildAnimations}\n        onExiting={disableChildAnimations}\n      >\n        <Overlay direction={direction} onClick={handleBackdropClick} ref={ref}>\n          <TransitionSlide\n            in={isOpen}\n            direction={direction}\n            fixed\n            reverseExit\n            appear\n            mountOnEnter\n            unmountOnExit\n          >\n            <Wrapper\n              big={big}\n              onClick={stopClickPropagation}\n              backgroundColor={backgroundColor ?? \"background.main\"}\n            >\n              <Container>\n                <FlexBox\n                  justifyContent=\"space-between\"\n                  alignItems=\"center\"\n                  p={12}\n                  pb={10}\n                  {...extraHeaderProps}\n                >\n                  {!hideNavigation && (\n                    <>\n                      {onBack != null ? (\n                        <Button variant=\"neutral\" onClick={onBack} Icon={ArrowLeft} />\n                      ) : (\n                        <ButtonPlaceholder />\n                      )}\n                    </>\n                  )}\n                  {(\n                    <Text variant={\"h3\"} flex={1} textAlign=\"center\">\n                      {title}\n                    </Text>\n                  ) || <div />}\n                  <FlexBox alignSelf=\"flex-start\">\n                    <Button variant=\"neutral\" onClick={onClose} Icon={Close} />\n                  </FlexBox>\n                </FlexBox>\n                <ScrollWrapper\n                  flexDirection=\"column\"\n                  alignItems=\"stretch\"\n                  overflow=\"scroll\"\n                  position=\"relative\"\n                  p={12}\n                  pt={0}\n                  flex={1}\n                  {...extraContainerProps}\n                >\n                  {children}\n                </ScrollWrapper>\n                {footer && (\n                  <>\n                    <Divider {...extraFooterDividerProps} />\n                    <FlexBox alignItems=\"center\" py={8} px={12} {...extraFooterProps}>\n                      {footer}\n                    </FlexBox>\n                  </>\n                )}\n              </Container>\n            </Wrapper>\n          </TransitionSlide>\n        </Overlay>\n      </TransitionInOut>\n    );\n  },\n);\n\nconst Drawer = (\n  { children, menuPortalTarget, ...sideProps }: DrawerProps,\n  ref?: React.ForwardedRef<HTMLDivElement>,\n): React.ReactElement => {\n  const $root = React.useMemo(\n    () =>\n      menuPortalTarget === undefined && typeof document !== \"undefined\"\n        ? document.querySelector(\"body\")\n        : menuPortalTarget,\n    [menuPortalTarget],\n  );\n  if (!$root) {\n    return (\n      <DrawerContent ref={ref} {...sideProps}>\n        {children}\n      </DrawerContent>\n    );\n  } else {\n    return ReactDOM.createPortal(\n      <DrawerContent ref={ref} {...sideProps}>\n        {children}\n      </DrawerContent>,\n      $root,\n    );\n  }\n};\n\nexport default React.forwardRef(Drawer);\n"],
+  "mappings": "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",
   "names": ["Direction", "styled", "FlexBox", "React", "TransitionInOut", "TransitionSlide", "Button", "ArrowLeft", "Text", "Close", "Divider", "ReactDOM"]
 }

package/lib/cjs/components/layout/List/VerticalTimeline/TimelineIndicator.js

@@ -32,7 +32,7 @@ __export(TimelineIndicator_exports, {
 });
 module.exports = __toCommonJS(TimelineIndicator_exports);
 var import_react = __toESM(require("react"));
-var import_CircledCheckSolidMedium = __toESM(require("@ledgerhq/icons-ui/react/CircledCheckSolidMedium"));
+var import_CircledCheckSolidMedium = __toESM(require("@ledgerhq/icons-ui/reactLegacy/CircledCheckSolidMedium"));
 var import_styled_components = __toESM(require("styled-components"));
 var import_Flex = __toESM(require("../../Flex"));
 const linesWidth = 2;

package/lib/cjs/components/layout/List/VerticalTimeline/TimelineIndicator.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/components/layout/List/VerticalTimeline/TimelineIndicator.tsx"],
-  "sourcesContent": ["import React from \"react\";\nimport CircledCheckSolidMedium from \"@ledgerhq/icons-ui/react/CircledCheckSolidMedium\";\nimport styled, { useTheme } from \"styled-components\";\n\nimport Flex, { FlexBoxProps as FlexProps } from \"../../Flex\";\nimport { ItemStatus } from \"./index\";\nimport { Theme } from \"src/styles/theme\";\n\nconst linesWidth = 2;\n\nconst BottomSegment = styled(Flex)<{ status: ItemStatus; hidden?: boolean }>`\n  flex: 1;\n  border-left-width: ${p => (p.hidden ? 0 : linesWidth)}px;\n  border-right-width: 0;\n  border-style: dashed;\n  border-color: ${p =>\n    p.status === \"completed\" ? p.theme.colors.primary.c80 : p.theme.colors.neutral.c40};\n  background: ${p => p.status === \"completed\" && p.theme.colors.primary.c80};\n`;\n\nconst getIconBackground = (theme: Theme, status: ItemStatus, isLastItem?: boolean) => {\n  if (isLastItem) {\n    if (status === \"inactive\") return theme.colors.success.c10;\n    return \"transparent\";\n  } else if (status === \"active\") {\n    return theme.colors.neutral.c40;\n  } else {\n    return \"transparent\";\n  }\n};\n\nconst getIconBorder = (theme: Theme, status: ItemStatus, isLastItem?: boolean) => {\n  if (isLastItem) {\n    return theme.colors.success.c70;\n  } else if (status === \"inactive\") {\n    return theme.colors.neutral.c40;\n  }\n  return theme.colors.primary.c80;\n};\n\nconst CenterCircle = styled(Flex)<{ status: ItemStatus; isLastItem?: boolean }>`\n  border-radius: 9999px;\n  width: 100%;\n  background: ${p => getIconBackground(p.theme, p.status, p.isLastItem)};\n  border: 2px solid ${p => getIconBorder(p.theme, p.status, p.isLastItem)};\n  align-items: center;\n  justify-content: center;\n  position: relative;\n`;\n\nconst IconWrapper = styled(Flex)`\n  height: 16px;\n  width: 16px;\n`;\n\nexport type Props = FlexProps & {\n  status: \"inactive\" | \"active\" | \"completed\";\n  isFirstItem?: boolean;\n  isLastItem?: boolean;\n};\n\nconst topSegmentDefaultHeight = 23;\n\nconst Container = styled(Flex)`\n  flex-direction: column;\n  align-items: center;\n  margin-bottom: ${-topSegmentDefaultHeight}px;\n  padding-top: ${topSegmentDefaultHeight}px;\n`;\n\nfunction TimelineIndicator({ status, isLastItem, ...props }: Props) {\n  const { colors } = useTheme();\n\n  return (\n    <Container {...props}>\n      <IconWrapper>\n        <CenterCircle status={status} isLastItem={isLastItem}>\n          {status === \"completed\" && (\n            <Flex position=\"absolute\">\n              <CircledCheckSolidMedium\n                color={isLastItem ? colors.success.c70 : colors.primary.c80}\n                size={20}\n              />\n            </Flex>\n          )}\n        </CenterCircle>\n      </IconWrapper>\n      {isLastItem ? null : <BottomSegment status={status} />}\n    </Container>\n  );\n}\n\nexport default React.memo(TimelineIndicator);\n\nTimelineIndicator.topSegmentDefaultHeight = topSegmentDefaultHeight;\n"],
+  "sourcesContent": ["import React from \"react\";\nimport CircledCheckSolidMedium from \"@ledgerhq/icons-ui/reactLegacy/CircledCheckSolidMedium\";\nimport styled, { useTheme } from \"styled-components\";\n\nimport Flex, { FlexBoxProps as FlexProps } from \"../../Flex\";\nimport { ItemStatus } from \"./index\";\nimport { Theme } from \"src/styles/theme\";\n\nconst linesWidth = 2;\n\nconst BottomSegment = styled(Flex)<{ status: ItemStatus; hidden?: boolean }>`\n  flex: 1;\n  border-left-width: ${p => (p.hidden ? 0 : linesWidth)}px;\n  border-right-width: 0;\n  border-style: dashed;\n  border-color: ${p =>\n    p.status === \"completed\" ? p.theme.colors.primary.c80 : p.theme.colors.neutral.c40};\n  background: ${p => p.status === \"completed\" && p.theme.colors.primary.c80};\n`;\n\nconst getIconBackground = (theme: Theme, status: ItemStatus, isLastItem?: boolean) => {\n  if (isLastItem) {\n    if (status === \"inactive\") return theme.colors.success.c10;\n    return \"transparent\";\n  } else if (status === \"active\") {\n    return theme.colors.neutral.c40;\n  } else {\n    return \"transparent\";\n  }\n};\n\nconst getIconBorder = (theme: Theme, status: ItemStatus, isLastItem?: boolean) => {\n  if (isLastItem) {\n    return theme.colors.success.c70;\n  } else if (status === \"inactive\") {\n    return theme.colors.neutral.c40;\n  }\n  return theme.colors.primary.c80;\n};\n\nconst CenterCircle = styled(Flex)<{ status: ItemStatus; isLastItem?: boolean }>`\n  border-radius: 9999px;\n  width: 100%;\n  background: ${p => getIconBackground(p.theme, p.status, p.isLastItem)};\n  border: 2px solid ${p => getIconBorder(p.theme, p.status, p.isLastItem)};\n  align-items: center;\n  justify-content: center;\n  position: relative;\n`;\n\nconst IconWrapper = styled(Flex)`\n  height: 16px;\n  width: 16px;\n`;\n\nexport type Props = FlexProps & {\n  status: \"inactive\" | \"active\" | \"completed\";\n  isFirstItem?: boolean;\n  isLastItem?: boolean;\n};\n\nconst topSegmentDefaultHeight = 23;\n\nconst Container = styled(Flex)`\n  flex-direction: column;\n  align-items: center;\n  margin-bottom: ${-topSegmentDefaultHeight}px;\n  padding-top: ${topSegmentDefaultHeight}px;\n`;\n\nfunction TimelineIndicator({ status, isLastItem, ...props }: Props) {\n  const { colors } = useTheme();\n\n  return (\n    <Container {...props}>\n      <IconWrapper>\n        <CenterCircle status={status} isLastItem={isLastItem}>\n          {status === \"completed\" && (\n            <Flex position=\"absolute\">\n              <CircledCheckSolidMedium\n                color={isLastItem ? colors.success.c70 : colors.primary.c80}\n                size={20}\n              />\n            </Flex>\n          )}\n        </CenterCircle>\n      </IconWrapper>\n      {isLastItem ? null : <BottomSegment status={status} />}\n    </Container>\n  );\n}\n\nexport default React.memo(TimelineIndicator);\n\nTimelineIndicator.topSegmentDefaultHeight = topSegmentDefaultHeight;\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,qCAAoC;AACpC,+BAAiC;AAEjC,kBAAgD;AAIhD,MAAM,aAAa;AAEnB,MAAM,oBAAgB,yBAAAA,SAAO,YAAAC,OAAI;AAAA;AAAA,uBAEV,OAAM,EAAE,SAAS,IAAI;AAAA;AAAA;AAAA,kBAG1B,OACd,EAAE,WAAW,cAAc,EAAE,MAAM,OAAO,QAAQ,MAAM,EAAE,MAAM,OAAO,QAAQ;AAAA,gBACnE,OAAK,EAAE,WAAW,eAAe,EAAE,MAAM,OAAO,QAAQ;AAAA;AAGxE,MAAM,oBAAoB,CAAC,OAAc,QAAoB,eAAyB;AACpF,MAAI,YAAY;AACd,QAAI,WAAW;AAAY,aAAO,MAAM,OAAO,QAAQ;AACvD,WAAO;AAAA,EACT,WAAW,WAAW,UAAU;AAC9B,WAAO,MAAM,OAAO,QAAQ;AAAA,EAC9B,OAAO;AACL,WAAO;AAAA,EACT;AACF;AAEA,MAAM,gBAAgB,CAAC,OAAc,QAAoB,eAAyB;AAChF,MAAI,YAAY;AACd,WAAO,MAAM,OAAO,QAAQ;AAAA,EAC9B,WAAW,WAAW,YAAY;AAChC,WAAO,MAAM,OAAO,QAAQ;AAAA,EAC9B;AACA,SAAO,MAAM,OAAO,QAAQ;AAC9B;AAEA,MAAM,mBAAe,yBAAAD,SAAO,YAAAC,OAAI;AAAA;AAAA;AAAA,gBAGhB,OAAK,kBAAkB,EAAE,OAAO,EAAE,QAAQ,EAAE,UAAU;AAAA,sBAChD,OAAK,cAAc,EAAE,OAAO,EAAE,QAAQ,EAAE,UAAU;AAAA;AAAA;AAAA;AAAA;AAMxE,MAAM,kBAAc,yBAAAD,SAAO,YAAAC,OAAI;AAAA;AAAA;AAAA;AAW/B,MAAM,0BAA0B;AAEhC,MAAM,gBAAY,yBAAAD,SAAO,YAAAC,OAAI;AAAA;AAAA;AAAA,mBAGV,CAAC;AAAA,iBACH;AAAA;AAGjB,SAAS,kBAAkB,EAAE,QAAQ,YAAY,GAAG,MAAM,GAAU;AAClE,QAAM,EAAE,OAAO,QAAI,mCAAS;AAE5B,SACE,6BAAAC,QAAA,cAAC,aAAW,GAAG,SACb,6BAAAA,QAAA,cAAC,mBACC,6BAAAA,QAAA,cAAC,gBAAa,QAAgB,cAC3B,WAAW,eACV,6BAAAA,QAAA,cAAC,YAAAD,SAAA,EAAK,UAAS,cACb,6BAAAC,QAAA;AAAA,IAAC,+BAAAC;AAAA,IAAA;AAAA,MACC,OAAO,aAAa,OAAO,QAAQ,MAAM,OAAO,QAAQ;AAAA,MACxD,MAAM;AAAA;AAAA,EACR,CACF,CAEJ,CACF,GACC,aAAa,OAAO,6BAAAD,QAAA,cAAC,iBAAc,QAAgB,CACtD;AAEJ;AAEA,IAAO,4BAAQ,aAAAA,QAAM,KAAK,iBAAiB;AAE3C,kBAAkB,0BAA0B;",
   "names": ["styled", "Flex", "React", "CircledCheckSolidMedium"]
 }

package/lib/cjs/components/layout/Popin/index.js

@@ -34,8 +34,8 @@ module.exports = __toCommonJS(Popin_exports);
 var import_react = __toESM(require("react"));
 var import_react_dom = __toESM(require("react-dom"));
 var import_styled_components = __toESM(require("styled-components"));
-var import_CloseMedium = __toESM(require("@ledgerhq/icons-ui/react/CloseMedium"));
-var import_ArrowLeftMedium = __toESM(require("@ledgerhq/icons-ui/react/ArrowLeftMedium"));
+var import_CloseMedium = __toESM(require("@ledgerhq/icons-ui/reactLegacy/CloseMedium"));
+var import_ArrowLeftMedium = __toESM(require("@ledgerhq/icons-ui/reactLegacy/ArrowLeftMedium"));
 var import_styled = __toESM(require("../../styled"));
 var import_Flex = __toESM(require("../../layout/Flex"));
 var import_Button = __toESM(require("../../cta/Button"));
@@ -95,7 +95,7 @@ const PopinWrapper = ({
   ...popinProps
 }) => {
   const $root = import_react.default.useMemo(
-    () => menuPortalTarget === void 0 && typeof document !== void 0 ? document.querySelector("body") : menuPortalTarget,
+    () => menuPortalTarget === void 0 && typeof document !== "undefined" ? document.querySelector("body") : menuPortalTarget,
     [menuPortalTarget]
   );
   if (!$root) {

package/lib/cjs/components/layout/Popin/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/layout/Popin/index.tsx"],
-  "sourcesContent": ["import React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport styled from \"styled-components\";\nimport CloseIcon from \"@ledgerhq/icons-ui/react/CloseMedium\";\nimport ArrowLeftIcon from \"@ledgerhq/icons-ui/react/ArrowLeftMedium\";\n\nimport baseStyled, { BaseStyledProps } from \"../../styled\";\nimport Flex from \"../../layout/Flex\";\nimport type { FlexBoxProps } from \"../../layout/Flex\";\nimport Button from \"../../cta/Button\";\nimport TransitionInOut from \"../../transitions/TransitionInOut\";\nimport TransitionScale from \"../../transitions/TransitionScale\";\n\nexport interface PopinProps extends FlexBoxProps {\n  isOpen: boolean;\n  children: React.ReactNode;\n  menuPortalTarget?: Element | null;\n}\n\nexport type PopinHeaderProps = BaseStyledProps & {\n  onClose?: () => void;\n  onBack?: () => void;\n  children: React.ReactNode;\n};\n\nconst ICON_SIZE = 20;\n\nconst Wrapper = styled(Flex).attrs<FlexBoxProps>(p => ({\n  flexDirection: \"column\",\n  alignItems: \"stretch\",\n  justifyContent: \"space-between\",\n  height: p.height || `${p.theme.sizes.drawer.popin.max.height}px`,\n  width: p.width || `${p.theme.sizes.drawer.popin.max.width}px`,\n  minHeight: `${p.theme.sizes.drawer.popin.min.height}px`,\n  minWidth: `${p.theme.sizes.drawer.popin.min.width}px`,\n  maxHeight: `${p.theme.sizes.drawer.popin.max.height}px`,\n  maxWidth: `${p.theme.sizes.drawer.popin.max.width}px`,\n  zIndex: p.theme.zIndexes[8],\n  p: p.p !== undefined ? p.p : p.theme.space[10],\n  rowGap: 6,\n  backgroundColor: \"background.main\",\n}))``;\n\nconst Overlay = styled(Flex).attrs(p => ({\n  justifyContent: \"center\",\n  alignItems: \"center\",\n  width: \"100vw\",\n  height: \"100vh\",\n  zIndex: p.theme.zIndexes[8],\n  position: \"fixed\",\n  top: 0,\n  left: 0,\n  backgroundColor: \"constant.overlay\",\n}))``;\n\nconst Header = baseStyled.section`\n  display: grid;\n  grid-template-columns: [icon] ${ICON_SIZE}px [title] 1fr [icon] ${ICON_SIZE}px;\n  column-gap: 12px;\n`;\n\nconst HeaderTitleContainer = styled(Flex).attrs(() => ({\n  justifyContent: \"center\",\n}))``;\n\nconst PopinBody = baseStyled(Flex).attrs({\n  as: \"section\",\n  flexDirection: \"column\",\n  flex: 1,\n  overflow: \"auto\",\n})``;\n\nconst PopinFooter = baseStyled(Flex).attrs({ as: \"section\" })``;\n\nconst IconContainer = styled(Button.Unstyled)`\n  display: flex;\n  align-items: center;\n`;\n\nconst PopinHeader = ({ children, onClose, onBack, ...props }: PopinHeaderProps) => (\n  <Header {...props}>\n    <Flex>\n      {onBack ? (\n        <IconContainer onClick={onBack}>\n          <ArrowLeftIcon size={ICON_SIZE} color=\"neutral.c100\" />\n        </IconContainer>\n      ) : null}\n    </Flex>\n    <HeaderTitleContainer>{children}</HeaderTitleContainer>\n    <Flex>\n      {onClose ? (\n        <IconContainer onClick={onClose}>\n          <CloseIcon size={ICON_SIZE} color=\"neutral.c100\" />\n        </IconContainer>\n      ) : null}\n    </Flex>\n  </Header>\n);\n\nconst Popin = ({ isOpen, children, width, height, ...props }: PopinProps) => (\n  <TransitionInOut in={isOpen} appear mountOnEnter unmountOnExit>\n    <Overlay>\n      <TransitionScale in={isOpen} appear>\n        <Wrapper width={width} height={height} {...props}>\n          {children}\n        </Wrapper>\n      </TransitionScale>\n    </Overlay>\n  </TransitionInOut>\n);\n\nconst PopinWrapper = ({\n  children,\n  menuPortalTarget,\n  ...popinProps\n}: PopinProps): React.ReactElement => {\n  const $root = React.useMemo(\n    () =>\n      menuPortalTarget === undefined && typeof document !== undefined\n        ? document.querySelector(\"body\")\n        : menuPortalTarget,\n    [menuPortalTarget],\n  );\n  if (!$root) {\n    return <Popin {...popinProps}>{children}</Popin>;\n  } else {\n    return ReactDOM.createPortal(<Popin {...popinProps}>{children}</Popin>, $root);\n  }\n};\n\nPopinWrapper.Header = PopinHeader;\nPopinWrapper.Body = PopinBody;\nPopinWrapper.Footer = PopinFooter;\n\nexport default PopinWrapper;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,uBAAqB;AACrB,+BAAmB;AACnB,yBAAsB;AACtB,6BAA0B;AAE1B,oBAA4C;AAC5C,kBAAiB;AAEjB,oBAAmB;AACnB,6BAA4B;AAC5B,6BAA4B;AAc5B,MAAM,YAAY;AAElB,MAAM,cAAU,yBAAAA,SAAO,YAAAC,OAAI,EAAE,MAAoB,QAAM;AAAA,EACrD,eAAe;AAAA,EACf,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,QAAQ,EAAE,UAAU,GAAG,EAAE,MAAM,MAAM,OAAO,MAAM,IAAI;AAAA,EACtD,OAAO,EAAE,SAAS,GAAG,EAAE,MAAM,MAAM,OAAO,MAAM,IAAI;AAAA,EACpD,WAAW,GAAG,EAAE,MAAM,MAAM,OAAO,MAAM,IAAI;AAAA,EAC7C,UAAU,GAAG,EAAE,MAAM,MAAM,OAAO,MAAM,IAAI;AAAA,EAC5C,WAAW,GAAG,EAAE,MAAM,MAAM,OAAO,MAAM,IAAI;AAAA,EAC7C,UAAU,GAAG,EAAE,MAAM,MAAM,OAAO,MAAM,IAAI;AAAA,EAC5C,QAAQ,EAAE,MAAM,SAAS,CAAC;AAAA,EAC1B,GAAG,EAAE,MAAM,SAAY,EAAE,IAAI,EAAE,MAAM,MAAM,EAAE;AAAA,EAC7C,QAAQ;AAAA,EACR,iBAAiB;AACnB,EAAE;AAEF,MAAM,cAAU,yBAAAD,SAAO,YAAAC,OAAI,EAAE,MAAM,QAAM;AAAA,EACvC,gBAAgB;AAAA,EAChB,YAAY;AAAA,EACZ,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,QAAQ,EAAE,MAAM,SAAS,CAAC;AAAA,EAC1B,UAAU;AAAA,EACV,KAAK;AAAA,EACL,MAAM;AAAA,EACN,iBAAiB;AACnB,EAAE;AAEF,MAAM,SAAS,cAAAC,QAAW;AAAA;AAAA,kCAEQ,kCAAkC;AAAA;AAAA;AAIpE,MAAM,2BAAuB,yBAAAF,SAAO,YAAAC,OAAI,EAAE,MAAM,OAAO;AAAA,EACrD,gBAAgB;AAClB,EAAE;AAEF,MAAM,gBAAY,cAAAC,SAAW,YAAAD,OAAI,EAAE,MAAM;AAAA,EACvC,IAAI;AAAA,EACJ,eAAe;AAAA,EACf,MAAM;AAAA,EACN,UAAU;AACZ,CAAC;AAED,MAAM,kBAAc,cAAAC,SAAW,YAAAD,OAAI,EAAE,MAAM,EAAE,IAAI,UAAU,CAAC;AAE5D,MAAM,oBAAgB,yBAAAD,SAAO,cAAAG,QAAO,QAAQ;AAAA;AAAA;AAAA;AAK5C,MAAM,cAAc,CAAC,EAAE,UAAU,SAAS,QAAQ,GAAG,MAAM,MACzD,6BAAAC,QAAA,cAAC,UAAQ,GAAG,SACV,6BAAAA,QAAA,cAAC,YAAAH,SAAA,MACE,SACC,6BAAAG,QAAA,cAAC,iBAAc,SAAS,UACtB,6BAAAA,QAAA,cAAC,uBAAAC,SAAA,EAAc,MAAM,WAAW,OAAM,gBAAe,CACvD,IACE,IACN,GACA,6BAAAD,QAAA,cAAC,4BAAsB,QAAS,GAChC,6BAAAA,QAAA,cAAC,YAAAH,SAAA,MACE,UACC,6BAAAG,QAAA,cAAC,iBAAc,SAAS,WACtB,6BAAAA,QAAA,cAAC,mBAAAE,SAAA,EAAU,MAAM,WAAW,OAAM,gBAAe,CACnD,IACE,IACN,CACF;AAGF,MAAM,QAAQ,CAAC,EAAE,QAAQ,UAAU,OAAO,QAAQ,GAAG,MAAM,MACzD,6BAAAF,QAAA,cAAC,uBAAAG,SAAA,EAAgB,IAAI,QAAQ,QAAM,MAAC,cAAY,MAAC,eAAa,QAC5D,6BAAAH,QAAA,cAAC,eACC,6BAAAA,QAAA,cAAC,uBAAAI,SAAA,EAAgB,IAAI,QAAQ,QAAM,QACjC,6BAAAJ,QAAA,cAAC,WAAQ,OAAc,QAAiB,GAAG,SACxC,QACH,CACF,CACF,CACF;AAGF,MAAM,eAAe,CAAC;AAAA,EACpB;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAsC;AACpC,QAAM,QAAQ,aAAAA,QAAM;AAAA,IAClB,MACE,qBAAqB,UAAa,OAAO,aAAa,SAClD,SAAS,cAAc,MAAM,IAC7B;AAAA,IACN,CAAC,gBAAgB;AAAA,EACnB;AACA,MAAI,CAAC,OAAO;AACV,WAAO,6BAAAA,QAAA,cAAC,SAAO,GAAG,cAAa,QAAS;AAAA,EAC1C,OAAO;AACL,WAAO,iBAAAK,QAAS,aAAa,6BAAAL,QAAA,cAAC,SAAO,GAAG,cAAa,QAAS,GAAU,KAAK;AAAA,EAC/E;AACF;AAEA,aAAa,SAAS;AACtB,aAAa,OAAO;AACpB,aAAa,SAAS;AAEtB,IAAO,gBAAQ;",
+  "sourcesContent": ["import React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport styled from \"styled-components\";\nimport CloseIcon from \"@ledgerhq/icons-ui/reactLegacy/CloseMedium\";\nimport ArrowLeftIcon from \"@ledgerhq/icons-ui/reactLegacy/ArrowLeftMedium\";\n\nimport baseStyled, { BaseStyledProps } from \"../../styled\";\nimport Flex from \"../../layout/Flex\";\nimport type { FlexBoxProps } from \"../../layout/Flex\";\nimport Button from \"../../cta/Button\";\nimport TransitionInOut from \"../../transitions/TransitionInOut\";\nimport TransitionScale from \"../../transitions/TransitionScale\";\n\nexport interface PopinProps extends FlexBoxProps {\n  isOpen: boolean;\n  children: React.ReactNode;\n  menuPortalTarget?: Element | null;\n}\n\nexport type PopinHeaderProps = BaseStyledProps & {\n  onClose?: () => void;\n  onBack?: () => void;\n  children: React.ReactNode;\n};\n\nconst ICON_SIZE = 20;\n\nconst Wrapper = styled(Flex).attrs<FlexBoxProps>(p => ({\n  flexDirection: \"column\",\n  alignItems: \"stretch\",\n  justifyContent: \"space-between\",\n  height: p.height || `${p.theme.sizes.drawer.popin.max.height}px`,\n  width: p.width || `${p.theme.sizes.drawer.popin.max.width}px`,\n  minHeight: `${p.theme.sizes.drawer.popin.min.height}px`,\n  minWidth: `${p.theme.sizes.drawer.popin.min.width}px`,\n  maxHeight: `${p.theme.sizes.drawer.popin.max.height}px`,\n  maxWidth: `${p.theme.sizes.drawer.popin.max.width}px`,\n  zIndex: p.theme.zIndexes[8],\n  p: p.p !== undefined ? p.p : p.theme.space[10],\n  rowGap: 6,\n  backgroundColor: \"background.main\",\n}))``;\n\nconst Overlay = styled(Flex).attrs(p => ({\n  justifyContent: \"center\",\n  alignItems: \"center\",\n  width: \"100vw\",\n  height: \"100vh\",\n  zIndex: p.theme.zIndexes[8],\n  position: \"fixed\",\n  top: 0,\n  left: 0,\n  backgroundColor: \"constant.overlay\",\n}))``;\n\nconst Header = baseStyled.section`\n  display: grid;\n  grid-template-columns: [icon] ${ICON_SIZE}px [title] 1fr [icon] ${ICON_SIZE}px;\n  column-gap: 12px;\n`;\n\nconst HeaderTitleContainer = styled(Flex).attrs(() => ({\n  justifyContent: \"center\",\n}))``;\n\nconst PopinBody = baseStyled(Flex).attrs({\n  as: \"section\",\n  flexDirection: \"column\",\n  flex: 1,\n  overflow: \"auto\",\n})``;\n\nconst PopinFooter = baseStyled(Flex).attrs({ as: \"section\" })``;\n\nconst IconContainer = styled(Button.Unstyled)`\n  display: flex;\n  align-items: center;\n`;\n\nconst PopinHeader = ({ children, onClose, onBack, ...props }: PopinHeaderProps) => (\n  <Header {...props}>\n    <Flex>\n      {onBack ? (\n        <IconContainer onClick={onBack}>\n          <ArrowLeftIcon size={ICON_SIZE} color=\"neutral.c100\" />\n        </IconContainer>\n      ) : null}\n    </Flex>\n    <HeaderTitleContainer>{children}</HeaderTitleContainer>\n    <Flex>\n      {onClose ? (\n        <IconContainer onClick={onClose}>\n          <CloseIcon size={ICON_SIZE} color=\"neutral.c100\" />\n        </IconContainer>\n      ) : null}\n    </Flex>\n  </Header>\n);\n\nconst Popin = ({ isOpen, children, width, height, ...props }: PopinProps) => (\n  <TransitionInOut in={isOpen} appear mountOnEnter unmountOnExit>\n    <Overlay>\n      <TransitionScale in={isOpen} appear>\n        <Wrapper width={width} height={height} {...props}>\n          {children}\n        </Wrapper>\n      </TransitionScale>\n    </Overlay>\n  </TransitionInOut>\n);\n\nconst PopinWrapper = ({\n  children,\n  menuPortalTarget,\n  ...popinProps\n}: PopinProps): React.ReactElement => {\n  const $root = React.useMemo(\n    () =>\n      menuPortalTarget === undefined && typeof document !== \"undefined\"\n        ? document.querySelector(\"body\")\n        : menuPortalTarget,\n    [menuPortalTarget],\n  );\n  if (!$root) {\n    return <Popin {...popinProps}>{children}</Popin>;\n  } else {\n    return ReactDOM.createPortal(<Popin {...popinProps}>{children}</Popin>, $root);\n  }\n};\n\nPopinWrapper.Header = PopinHeader;\nPopinWrapper.Body = PopinBody;\nPopinWrapper.Footer = PopinFooter;\n\nexport default PopinWrapper;\n"],
+  "mappings": "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",
   "names": ["styled", "Flex", "baseStyled", "Button", "React", "ArrowLeftIcon", "CloseIcon", "TransitionInOut", "TransitionScale", "ReactDOM"]
 }

package/lib/cjs/components/message/Alert/Alert.stories.js

@@ -77,7 +77,7 @@ const WithContent = (args) => {
           textProps,
           alwaysUnderline: true,
           size: "small",
-          Icon: import_assets.Icons.ExternalLinkMedium
+          Icon: import_assets.IconsLegacy.ExternalLinkMedium
         },
         /* @__PURE__ */ import_react.default.createElement(import_index.default.UnderlinedText, null, "Learn more")
       )),

package/lib/cjs/components/message/Alert/Alert.stories.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/message/Alert/Alert.stories.tsx"],
-  "sourcesContent": ["import React from \"react\";\nimport Alert, { AlertProps } from \"./index\";\nimport Link from \"../../cta/Link\";\nimport Button from \"../../cta/Button\";\nimport { Icons } from \"../../../../src/assets\";\n\nexport default {\n  title: \"Messages/Alerts\",\n  component: Alert,\n  argTypes: {\n    type: {\n      options: [\"info\", \"secondary\", \"success\", \"warning\", \"error\"],\n      control: {\n        type: \"radio\",\n      },\n    },\n    title: {\n      control: {\n        type: \"text\",\n      },\n      defaultValue: \"Title\",\n    },\n    showIcon: {\n      control: {\n        type: \"boolean\",\n      },\n      defaultValue: true,\n    },\n  },\n};\n\nexport const Default = (args: AlertProps): JSX.Element => {\n  return <Alert {...args} />;\n};\n\nexport const WithContent = (args: AlertProps) => {\n  return (\n    <Alert\n      {...args}\n      containerProps={{ pr: 7 }}\n      renderContent={({ textProps }) => (\n        <>\n          <Alert.BodyText>\n            Your xpub is privacy-sensitive data. Use with caution, especially when disclosing to\n            third parties.\n          </Alert.BodyText>\n          <Link\n            textProps={textProps}\n            alwaysUnderline\n            size={\"small\" as \"small\" | \"medium\" | \"large\"}\n            Icon={Icons.ExternalLinkMedium}\n          >\n            <Alert.UnderlinedText>Learn more</Alert.UnderlinedText>\n          </Link>\n        </>\n      )}\n      renderRight={() => <Button variant=\"color\">Click me</Button>}\n    />\n  );\n};\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,mBAAkC;AAClC,kBAAiB;AACjB,oBAAmB;AACnB,oBAAsB;AAEtB,IAAO,wBAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW,aAAAA;AAAA,EACX,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,SAAS,CAAC,QAAQ,aAAa,WAAW,WAAW,OAAO;AAAA,MAC5D,SAAS;AAAA,QACP,MAAM;AAAA,MACR;AAAA,IACF;AAAA,IACA,OAAO;AAAA,MACL,SAAS;AAAA,QACP,MAAM;AAAA,MACR;AAAA,MACA,cAAc;AAAA,IAChB;AAAA,IACA,UAAU;AAAA,MACR,SAAS;AAAA,QACP,MAAM;AAAA,MACR;AAAA,MACA,cAAc;AAAA,IAChB;AAAA,EACF;AACF;AAEO,MAAM,UAAU,CAAC,SAAkC;AACxD,SAAO,6BAAAC,QAAA,cAAC,aAAAD,SAAA,EAAO,GAAG,MAAM;AAC1B;AAEO,MAAM,cAAc,CAAC,SAAqB;AAC/C,SACE,6BAAAC,QAAA;AAAA,IAAC,aAAAD;AAAA,IAAA;AAAA,MACE,GAAG;AAAA,MACJ,gBAAgB,EAAE,IAAI,EAAE;AAAA,MACxB,eAAe,CAAC,EAAE,UAAU,MAC1B,6BAAAC,QAAA,2BAAAA,QAAA,gBACE,6BAAAA,QAAA,cAAC,aAAAD,QAAM,UAAN,MAAe,qGAGhB,GACA,6BAAAC,QAAA;AAAA,QAAC,YAAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACA,iBAAe;AAAA,UACf,MAAM;AAAA,UACN,MAAM,oBAAM;AAAA;AAAA,QAEZ,6BAAAD,QAAA,cAAC,aAAAD,QAAM,gBAAN,MAAqB,YAAU;AAAA,MAClC,CACF;AAAA,MAEF,aAAa,MAAM,6BAAAC,QAAA,cAAC,cAAAE,SAAA,EAAO,SAAQ,WAAQ,UAAQ;AAAA;AAAA,EACrD;AAEJ;",
+  "sourcesContent": ["import React from \"react\";\nimport Alert, { AlertProps } from \"./index\";\nimport Link from \"../../cta/Link\";\nimport Button from \"../../cta/Button\";\nimport { IconsLegacy } from \"../../../../src/assets\";\n\nexport default {\n  title: \"Messages/Alerts\",\n  component: Alert,\n  argTypes: {\n    type: {\n      options: [\"info\", \"secondary\", \"success\", \"warning\", \"error\"],\n      control: {\n        type: \"radio\",\n      },\n    },\n    title: {\n      control: {\n        type: \"text\",\n      },\n      defaultValue: \"Title\",\n    },\n    showIcon: {\n      control: {\n        type: \"boolean\",\n      },\n      defaultValue: true,\n    },\n  },\n};\n\nexport const Default = (args: AlertProps): JSX.Element => {\n  return <Alert {...args} />;\n};\n\nexport const WithContent = (args: AlertProps) => {\n  return (\n    <Alert\n      {...args}\n      containerProps={{ pr: 7 }}\n      renderContent={({ textProps }) => (\n        <>\n          <Alert.BodyText>\n            Your xpub is privacy-sensitive data. Use with caution, especially when disclosing to\n            third parties.\n          </Alert.BodyText>\n          <Link\n            textProps={textProps}\n            alwaysUnderline\n            size={\"small\" as \"small\" | \"medium\" | \"large\"}\n            Icon={IconsLegacy.ExternalLinkMedium}\n          >\n            <Alert.UnderlinedText>Learn more</Alert.UnderlinedText>\n          </Link>\n        </>\n      )}\n      renderRight={() => <Button variant=\"color\">Click me</Button>}\n    />\n  );\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,mBAAkC;AAClC,kBAAiB;AACjB,oBAAmB;AACnB,oBAA4B;AAE5B,IAAO,wBAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW,aAAAA;AAAA,EACX,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,SAAS,CAAC,QAAQ,aAAa,WAAW,WAAW,OAAO;AAAA,MAC5D,SAAS;AAAA,QACP,MAAM;AAAA,MACR;AAAA,IACF;AAAA,IACA,OAAO;AAAA,MACL,SAAS;AAAA,QACP,MAAM;AAAA,MACR;AAAA,MACA,cAAc;AAAA,IAChB;AAAA,IACA,UAAU;AAAA,MACR,SAAS;AAAA,QACP,MAAM;AAAA,MACR;AAAA,MACA,cAAc;AAAA,IAChB;AAAA,EACF;AACF;AAEO,MAAM,UAAU,CAAC,SAAkC;AACxD,SAAO,6BAAAC,QAAA,cAAC,aAAAD,SAAA,EAAO,GAAG,MAAM;AAC1B;AAEO,MAAM,cAAc,CAAC,SAAqB;AAC/C,SACE,6BAAAC,QAAA;AAAA,IAAC,aAAAD;AAAA,IAAA;AAAA,MACE,GAAG;AAAA,MACJ,gBAAgB,EAAE,IAAI,EAAE;AAAA,MACxB,eAAe,CAAC,EAAE,UAAU,MAC1B,6BAAAC,QAAA,2BAAAA,QAAA,gBACE,6BAAAA,QAAA,cAAC,aAAAD,QAAM,UAAN,MAAe,qGAGhB,GACA,6BAAAC,QAAA;AAAA,QAAC,YAAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACA,iBAAe;AAAA,UACf,MAAM;AAAA,UACN,MAAM,0BAAY;AAAA;AAAA,QAElB,6BAAAD,QAAA,cAAC,aAAAD,QAAM,gBAAN,MAAqB,YAAU;AAAA,MAClC,CACF;AAAA,MAEF,aAAa,MAAM,6BAAAC,QAAA,cAAC,cAAAE,SAAA,EAAO,SAAQ,WAAQ,UAAQ;AAAA;AAAA,EACrD;AAEJ;",
   "names": ["Alert", "React", "Link", "Button"]
 }

package/lib/cjs/components/message/Alert/index.js

@@ -35,10 +35,10 @@ var import_react = __toESM(require("react"));
 var import_styled_components = __toESM(require("styled-components"));
 var import_Text = __toESM(require("../../asorted/Text"));
 var import_Flex = __toESM(require("../../layout/Flex"));
-var import_InfoAltFillMedium = __toESM(require("@ledgerhq/icons-ui/react/InfoAltFillMedium"));
-var import_CircledCheckSolidMedium = __toESM(require("@ledgerhq/icons-ui/react/CircledCheckSolidMedium"));
-var import_WarningSolidMedium = __toESM(require("@ledgerhq/icons-ui/react/WarningSolidMedium"));
-var import_CircledCrossSolidMedium = __toESM(require("@ledgerhq/icons-ui/react/CircledCrossSolidMedium"));
+var import_InfoAltFillMedium = __toESM(require("@ledgerhq/icons-ui/reactLegacy/InfoAltFillMedium"));
+var import_CircledCheckSolidMedium = __toESM(require("@ledgerhq/icons-ui/reactLegacy/CircledCheckSolidMedium"));
+var import_WarningSolidMedium = __toESM(require("@ledgerhq/icons-ui/reactLegacy/WarningSolidMedium"));
+var import_CircledCrossSolidMedium = __toESM(require("@ledgerhq/icons-ui/reactLegacy/CircledCrossSolidMedium"));
 const StyledIconContainer = import_styled_components.default.div`
   margin-right: 8px;
   display: flex;

package/lib/cjs/components/message/Alert/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/message/Alert/index.tsx"],
-  "sourcesContent": ["import React from \"react\";\nimport styled, { useTheme, DefaultTheme } from \"styled-components\";\nimport Text from \"../../asorted/Text\";\nimport { TextVariants } from \"../../../styles/theme\";\nimport Flex from \"../../layout/Flex\";\nimport InfoAltFillMedium from \"@ledgerhq/icons-ui/react/InfoAltFillMedium\";\nimport CircledCheckSolidMedium from \"@ledgerhq/icons-ui/react/CircledCheckSolidMedium\";\nimport WarningSolidMedium from \"@ledgerhq/icons-ui/react/WarningSolidMedium\";\nimport CircledCrossSolidMedium from \"@ledgerhq/icons-ui/react/CircledCrossSolidMedium\";\n\ntype AlertType = \"info\" | \"secondary\" | \"success\" | \"warning\" | \"error\";\n\ntype RenderProps = (props: {\n  textProps: { variant?: TextVariants; fontWeight?: string };\n}) => JSX.Element;\n\nexport interface AlertProps {\n  /**\n   * Affects the colors of the background & text and what icon can be displayed.\n   */\n  type?: AlertType;\n  /**\n   * Title of the Alert.\n   */\n  title?: string;\n  /**\n   * Method for rendering additional content under the title. `{ color: string; textProps: { variant?: TextVariants; fontWeight?: string } }` is passed as props to easily style text elements.\n   */\n  renderContent?: RenderProps;\n\n  /**\n   * Method for rendering additional content to the right. `{ color: string; textProps: { variant?: TextVariants; fontWeight?: string } }` is passed as props to easily style text elements.\n   */\n  renderRight?: RenderProps;\n\n  /**\n   * Additional props to be passed to the top level container (containing icon + content).\n   */\n  containerProps?: Record<string, unknown>;\n\n  /**\n   * Whether or not to display an icon\n   */\n  showIcon?: boolean;\n}\n\nconst StyledIconContainer = styled.div`\n  margin-right: 8px;\n  display: flex;\n  align-items: center;\n`;\n\nconst icons = {\n  info: <InfoAltFillMedium size={24} />,\n  secondary: <InfoAltFillMedium size={24} />,\n  success: <CircledCheckSolidMedium size={24} />,\n  warning: <WarningSolidMedium size={24} />,\n  error: <CircledCrossSolidMedium size={24} />,\n};\n\nconst getColors = ({ theme, type }: { theme: DefaultTheme; type?: AlertType }) => {\n  switch (type) {\n    case \"secondary\":\n      return {\n        background: theme.colors.opacityDefault.c05,\n        iconColor: theme.colors.neutral.c80,\n      };\n    case \"success\":\n      return {\n        background: theme.colors.success.c10,\n        iconColor: theme.colors.success.c50,\n      };\n    case \"warning\":\n      return {\n        background: theme.colors.warning.c10,\n        iconColor: theme.colors.warning.c70,\n      };\n    case \"error\":\n      return {\n        background: theme.colors.error.c10,\n        iconColor: theme.colors.error.c50,\n      };\n    case \"info\":\n    default:\n      return {\n        background: theme.colors.primary.c10,\n        iconColor: theme.colors.primary.c80,\n      };\n  }\n};\n\nconst StyledAlertContainer = styled(Flex)<{ background?: string; color?: string }>`\n  border-radius: ${p => `${p.theme.radii[2]}px`};\n  align-items: start;\n`;\n\nconst AlertBodyText = styled(Text).attrs({\n  flexShrink: 1,\n  variant: \"bodyLineHeight\",\n  fontWeight: \"semiBold\",\n})``;\n\nconst AlertUnderlinedText = styled(AlertBodyText)`\n  text-decoration-line: underline;\n`;\n\nfunction Alert({\n  type = \"info\",\n  title,\n  showIcon = true,\n  renderContent,\n  renderRight,\n  containerProps,\n}: AlertProps): JSX.Element {\n  const theme = useTheme();\n  const { iconColor, background } = getColors({ theme, type });\n  const textProps: { variant?: TextVariants; fontWeight?: string } = {\n    variant: \"bodyLineHeight\",\n    fontWeight: \"semiBold\",\n  };\n  const textColor = \"neutral.c100\";\n  return (\n    <StyledAlertContainer\n      color={textColor}\n      backgroundColor={background}\n      padding={6}\n      {...containerProps}\n    >\n      {showIcon && !!icons[type] && (\n        <Flex color={iconColor}>\n          <StyledIconContainer>{icons[type]}</StyledIconContainer>\n        </Flex>\n      )}\n      <Flex flexDirection=\"column\" flex={1} alignItems=\"flex-start\" rowGap=\"6px\">\n        {title && (\n          <Text {...textProps} color={textColor}>\n            {title}\n          </Text>\n        )}\n        {renderContent && renderContent({ textProps })}\n      </Flex>\n      <Flex alignSelf=\"center\">{renderRight && renderRight({ textProps })}</Flex>\n    </StyledAlertContainer>\n  );\n}\n\nAlert.BodyText = AlertBodyText;\nAlert.UnderlinedText = AlertUnderlinedText;\n\nexport default Alert;\n"],
+  "sourcesContent": ["import React from \"react\";\nimport styled, { useTheme, DefaultTheme } from \"styled-components\";\nimport Text from \"../../asorted/Text\";\nimport { TextVariants } from \"../../../styles/theme\";\nimport Flex from \"../../layout/Flex\";\nimport InfoAltFillMedium from \"@ledgerhq/icons-ui/reactLegacy/InfoAltFillMedium\";\nimport CircledCheckSolidMedium from \"@ledgerhq/icons-ui/reactLegacy/CircledCheckSolidMedium\";\nimport WarningSolidMedium from \"@ledgerhq/icons-ui/reactLegacy/WarningSolidMedium\";\nimport CircledCrossSolidMedium from \"@ledgerhq/icons-ui/reactLegacy/CircledCrossSolidMedium\";\n\ntype AlertType = \"info\" | \"secondary\" | \"success\" | \"warning\" | \"error\";\n\ntype RenderProps = (props: {\n  textProps: { variant?: TextVariants; fontWeight?: string };\n}) => JSX.Element;\n\nexport interface AlertProps {\n  /**\n   * Affects the colors of the background & text and what icon can be displayed.\n   */\n  type?: AlertType;\n  /**\n   * Title of the Alert.\n   */\n  title?: string;\n  /**\n   * Method for rendering additional content under the title. `{ color: string; textProps: { variant?: TextVariants; fontWeight?: string } }` is passed as props to easily style text elements.\n   */\n  renderContent?: RenderProps;\n\n  /**\n   * Method for rendering additional content to the right. `{ color: string; textProps: { variant?: TextVariants; fontWeight?: string } }` is passed as props to easily style text elements.\n   */\n  renderRight?: RenderProps;\n\n  /**\n   * Additional props to be passed to the top level container (containing icon + content).\n   */\n  containerProps?: Record<string, unknown>;\n\n  /**\n   * Whether or not to display an icon\n   */\n  showIcon?: boolean;\n}\n\nconst StyledIconContainer = styled.div`\n  margin-right: 8px;\n  display: flex;\n  align-items: center;\n`;\n\nconst icons = {\n  info: <InfoAltFillMedium size={24} />,\n  secondary: <InfoAltFillMedium size={24} />,\n  success: <CircledCheckSolidMedium size={24} />,\n  warning: <WarningSolidMedium size={24} />,\n  error: <CircledCrossSolidMedium size={24} />,\n};\n\nconst getColors = ({ theme, type }: { theme: DefaultTheme; type?: AlertType }) => {\n  switch (type) {\n    case \"secondary\":\n      return {\n        background: theme.colors.opacityDefault.c05,\n        iconColor: theme.colors.neutral.c80,\n      };\n    case \"success\":\n      return {\n        background: theme.colors.success.c10,\n        iconColor: theme.colors.success.c50,\n      };\n    case \"warning\":\n      return {\n        background: theme.colors.warning.c10,\n        iconColor: theme.colors.warning.c70,\n      };\n    case \"error\":\n      return {\n        background: theme.colors.error.c10,\n        iconColor: theme.colors.error.c50,\n      };\n    case \"info\":\n    default:\n      return {\n        background: theme.colors.primary.c10,\n        iconColor: theme.colors.primary.c80,\n      };\n  }\n};\n\nconst StyledAlertContainer = styled(Flex)<{ background?: string; color?: string }>`\n  border-radius: ${p => `${p.theme.radii[2]}px`};\n  align-items: start;\n`;\n\nconst AlertBodyText = styled(Text).attrs({\n  flexShrink: 1,\n  variant: \"bodyLineHeight\",\n  fontWeight: \"semiBold\",\n})``;\n\nconst AlertUnderlinedText = styled(AlertBodyText)`\n  text-decoration-line: underline;\n`;\n\nfunction Alert({\n  type = \"info\",\n  title,\n  showIcon = true,\n  renderContent,\n  renderRight,\n  containerProps,\n}: AlertProps): JSX.Element {\n  const theme = useTheme();\n  const { iconColor, background } = getColors({ theme, type });\n  const textProps: { variant?: TextVariants; fontWeight?: string } = {\n    variant: \"bodyLineHeight\",\n    fontWeight: \"semiBold\",\n  };\n  const textColor = \"neutral.c100\";\n  return (\n    <StyledAlertContainer\n      color={textColor}\n      backgroundColor={background}\n      padding={6}\n      {...containerProps}\n    >\n      {showIcon && !!icons[type] && (\n        <Flex color={iconColor}>\n          <StyledIconContainer>{icons[type]}</StyledIconContainer>\n        </Flex>\n      )}\n      <Flex flexDirection=\"column\" flex={1} alignItems=\"flex-start\" rowGap=\"6px\">\n        {title && (\n          <Text {...textProps} color={textColor}>\n            {title}\n          </Text>\n        )}\n        {renderContent && renderContent({ textProps })}\n      </Flex>\n      <Flex alignSelf=\"center\">{renderRight && renderRight({ textProps })}</Flex>\n    </StyledAlertContainer>\n  );\n}\n\nAlert.BodyText = AlertBodyText;\nAlert.UnderlinedText = AlertUnderlinedText;\n\nexport default Alert;\n"],
   "mappings": "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",
   "names": ["styled", "React", "InfoAltFillMedium", "CircledCheckSolidMedium", "WarningSolidMedium", "CircledCrossSolidMedium", "Flex", "Text"]
 }

package/lib/cjs/components/message/Notification/index.js

@@ -37,7 +37,7 @@ var import_Flex = __toESM(require("../../layout/Flex"));
 var import_Text = __toESM(require("../../asorted/Text"));
 var import_Badge = __toESM(require("./Badge"));
 var import_Link = __toESM(require("../../cta/Link"));
-var import_react2 = require("@ledgerhq/icons-ui/react");
+var import_reactLegacy = require("@ledgerhq/icons-ui/reactLegacy");
 const Container = (0, import_styled_components.default)(import_Flex.default).attrs({
   p: 6,
   columnGap: 8,
@@ -59,7 +59,7 @@ function Notification({
   hasBackground = false,
   ...containerProps
 }) {
-  return /* @__PURE__ */ import_react.default.createElement(Container, { hasBackground, ...containerProps }, badge, /* @__PURE__ */ import_react.default.createElement(import_Flex.default, { flexDirection: "column", rowGap: 3, flex: "auto" }, /* @__PURE__ */ import_react.default.createElement(import_Text.default, { variant: "large", fontWeight: "medium", color: "neutral.c100" }, title), description && /* @__PURE__ */ import_react.default.createElement(import_Text.default, { variant: "paragraph", fontWeight: "medium", color: "neutral.c80", whiteSpace: "pre-wrap" }, description), link && /* @__PURE__ */ import_react.default.createElement(import_Flex.default, { justifyContent: "flex-start" }, /* @__PURE__ */ import_react.default.createElement(import_Link.default, { onClick: (event) => onLinkClick && onLinkClick(event), Icon: import_react2.ExternalLinkMedium }, link))));
+  return /* @__PURE__ */ import_react.default.createElement(Container, { hasBackground, ...containerProps }, badge, /* @__PURE__ */ import_react.default.createElement(import_Flex.default, { flexDirection: "column", rowGap: 3, flex: "auto" }, /* @__PURE__ */ import_react.default.createElement(import_Text.default, { variant: "large", fontWeight: "medium", color: "neutral.c100" }, title), description && /* @__PURE__ */ import_react.default.createElement(import_Text.default, { variant: "paragraph", fontWeight: "medium", color: "neutral.c80", whiteSpace: "pre-wrap" }, description), link && /* @__PURE__ */ import_react.default.createElement(import_Flex.default, { justifyContent: "flex-start" }, /* @__PURE__ */ import_react.default.createElement(import_Link.default, { onClick: (event) => onLinkClick && onLinkClick(event), Icon: import_reactLegacy.ExternalLinkMedium }, link))));
 }
 Notification.Badge = import_Badge.default;
 var Notification_default = Notification;

package/lib/cjs/components/message/Notification/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/message/Notification/index.tsx"],
-  "sourcesContent": ["import React from \"react\";\nimport styled from \"styled-components\";\nimport FlexBox, { FlexBoxProps } from \"../../layout/Flex\";\nimport Text from \"../../asorted/Text\";\nimport Badge from \"./Badge\";\nimport Link, { LinkProps } from \"../../cta/Link\";\nimport { ExternalLinkMedium } from \"@ledgerhq/icons-ui/react\";\n\ninterface ContainerProps extends FlexBoxProps {\n  /* Add the pre-selected background. */\n  hasBackground?: boolean;\n}\n\nexport interface Props extends ContainerProps {\n  /* The title to be displayed. */\n  title: string;\n  /* JSX that should be rendered by a call to the <Notification.Badge /> component.*/\n  badge: React.ReactNode;\n  /* An optional description. */\n  description?: string;\n  /* An optional link. */\n  link?: string;\n  /* A callback to perform when clicking on the link. */\n  onLinkClick?: LinkProps[\"onClick\"];\n}\n\nconst Container = styled(FlexBox).attrs<ContainerProps>({\n  p: 6,\n  columnGap: 8,\n  alignItems: \"center\",\n})<ContainerProps>`\n  --notification-badge-border: ${p => {\n    /* Set a CSS variable that will be consumed by the Badge component */\n    return p.hasBackground ? p.theme.colors.neutral.c30 : p.theme.colors.background.main;\n  }};\n  background-color: ${p => (p.hasBackground ? p.theme.colors.neutral.c30 : \"transparent\")};\n\n  border-radius: 8px;\n`;\n\nfunction Notification({\n  title,\n  description,\n  badge,\n  link,\n  onLinkClick,\n  hasBackground = false,\n  ...containerProps\n}: Props): JSX.Element {\n  return (\n    <Container hasBackground={hasBackground} {...containerProps}>\n      {badge}\n      <FlexBox flexDirection=\"column\" rowGap={3} flex=\"auto\">\n        <Text variant={\"large\"} fontWeight=\"medium\" color=\"neutral.c100\">\n          {title}\n        </Text>\n        {description && (\n          <Text variant={\"paragraph\"} fontWeight=\"medium\" color=\"neutral.c80\" whiteSpace=\"pre-wrap\">\n            {description}\n          </Text>\n        )}\n        {link && (\n          <FlexBox justifyContent={\"flex-start\"}>\n            <Link onClick={event => onLinkClick && onLinkClick(event)} Icon={ExternalLinkMedium}>\n              {link}\n            </Link>\n          </FlexBox>\n        )}\n      </FlexBox>\n    </Container>\n  );\n}\nNotification.Badge = Badge;\n\nexport type NotificationType = { (p: Props): JSX.Element; Badge: typeof Badge };\nexport default Notification as NotificationType;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAmB;AACnB,kBAAsC;AACtC,kBAAiB;AACjB,mBAAkB;AAClB,kBAAgC;AAChC,IAAAA,gBAAmC;AAoBnC,MAAM,gBAAY,yBAAAC,SAAO,YAAAC,OAAO,EAAE,MAAsB;AAAA,EACtD,GAAG;AAAA,EACH,WAAW;AAAA,EACX,YAAY;AACd,CAAC;AAAA,iCACgC,OAAK;AAElC,SAAO,EAAE,gBAAgB,EAAE,MAAM,OAAO,QAAQ,MAAM,EAAE,MAAM,OAAO,WAAW;AAClF;AAAA,sBACoB,OAAM,EAAE,gBAAgB,EAAE,MAAM,OAAO,QAAQ,MAAM;AAAA;AAAA;AAAA;AAK3E,SAAS,aAAa;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,gBAAgB;AAAA,EAChB,GAAG;AACL,GAAuB;AACrB,SACE,6BAAAC,QAAA,cAAC,aAAU,eAA+B,GAAG,kBAC1C,OACD,6BAAAA,QAAA,cAAC,YAAAD,SAAA,EAAQ,eAAc,UAAS,QAAQ,GAAG,MAAK,UAC9C,6BAAAC,QAAA,cAAC,YAAAC,SAAA,EAAK,SAAS,SAAS,YAAW,UAAS,OAAM,kBAC/C,KACH,GACC,eACC,6BAAAD,QAAA,cAAC,YAAAC,SAAA,EAAK,SAAS,aAAa,YAAW,UAAS,OAAM,eAAc,YAAW,cAC5E,WACH,GAED,QACC,6BAAAD,QAAA,cAAC,YAAAD,SAAA,EAAQ,gBAAgB,gBACvB,6BAAAC,QAAA,cAAC,YAAAE,SAAA,EAAK,SAAS,WAAS,eAAe,YAAY,KAAK,GAAG,MAAM,oCAC9D,IACH,CACF,CAEJ,CACF;AAEJ;AACA,aAAa,QAAQ,aAAAC;AAGrB,IAAO,uBAAQ;",
-  "names": ["import_react", "styled", "FlexBox", "React", "Text", "Link", "Badge"]
+  "sourcesContent": ["import React from \"react\";\nimport styled from \"styled-components\";\nimport FlexBox, { FlexBoxProps } from \"../../layout/Flex\";\nimport Text from \"../../asorted/Text\";\nimport Badge from \"./Badge\";\nimport Link, { LinkProps } from \"../../cta/Link\";\nimport { ExternalLinkMedium } from \"@ledgerhq/icons-ui/reactLegacy\";\n\ninterface ContainerProps extends FlexBoxProps {\n  /* Add the pre-selected background. */\n  hasBackground?: boolean;\n}\n\nexport interface Props extends ContainerProps {\n  /* The title to be displayed. */\n  title: string;\n  /* JSX that should be rendered by a call to the <Notification.Badge /> component.*/\n  badge: React.ReactNode;\n  /* An optional description. */\n  description?: string;\n  /* An optional link. */\n  link?: string;\n  /* A callback to perform when clicking on the link. */\n  onLinkClick?: LinkProps[\"onClick\"];\n}\n\nconst Container = styled(FlexBox).attrs<ContainerProps>({\n  p: 6,\n  columnGap: 8,\n  alignItems: \"center\",\n})<ContainerProps>`\n  --notification-badge-border: ${p => {\n    /* Set a CSS variable that will be consumed by the Badge component */\n    return p.hasBackground ? p.theme.colors.neutral.c30 : p.theme.colors.background.main;\n  }};\n  background-color: ${p => (p.hasBackground ? p.theme.colors.neutral.c30 : \"transparent\")};\n\n  border-radius: 8px;\n`;\n\nfunction Notification({\n  title,\n  description,\n  badge,\n  link,\n  onLinkClick,\n  hasBackground = false,\n  ...containerProps\n}: Props): JSX.Element {\n  return (\n    <Container hasBackground={hasBackground} {...containerProps}>\n      {badge}\n      <FlexBox flexDirection=\"column\" rowGap={3} flex=\"auto\">\n        <Text variant={\"large\"} fontWeight=\"medium\" color=\"neutral.c100\">\n          {title}\n        </Text>\n        {description && (\n          <Text variant={\"paragraph\"} fontWeight=\"medium\" color=\"neutral.c80\" whiteSpace=\"pre-wrap\">\n            {description}\n          </Text>\n        )}\n        {link && (\n          <FlexBox justifyContent={\"flex-start\"}>\n            <Link onClick={event => onLinkClick && onLinkClick(event)} Icon={ExternalLinkMedium}>\n              {link}\n            </Link>\n          </FlexBox>\n        )}\n      </FlexBox>\n    </Container>\n  );\n}\nNotification.Badge = Badge;\n\nexport type NotificationType = { (p: Props): JSX.Element; Badge: typeof Badge };\nexport default Notification as NotificationType;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAmB;AACnB,kBAAsC;AACtC,kBAAiB;AACjB,mBAAkB;AAClB,kBAAgC;AAChC,yBAAmC;AAoBnC,MAAM,gBAAY,yBAAAA,SAAO,YAAAC,OAAO,EAAE,MAAsB;AAAA,EACtD,GAAG;AAAA,EACH,WAAW;AAAA,EACX,YAAY;AACd,CAAC;AAAA,iCACgC,OAAK;AAElC,SAAO,EAAE,gBAAgB,EAAE,MAAM,OAAO,QAAQ,MAAM,EAAE,MAAM,OAAO,WAAW;AAClF;AAAA,sBACoB,OAAM,EAAE,gBAAgB,EAAE,MAAM,OAAO,QAAQ,MAAM;AAAA;AAAA;AAAA;AAK3E,SAAS,aAAa;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,gBAAgB;AAAA,EAChB,GAAG;AACL,GAAuB;AACrB,SACE,6BAAAC,QAAA,cAAC,aAAU,eAA+B,GAAG,kBAC1C,OACD,6BAAAA,QAAA,cAAC,YAAAD,SAAA,EAAQ,eAAc,UAAS,QAAQ,GAAG,MAAK,UAC9C,6BAAAC,QAAA,cAAC,YAAAC,SAAA,EAAK,SAAS,SAAS,YAAW,UAAS,OAAM,kBAC/C,KACH,GACC,eACC,6BAAAD,QAAA,cAAC,YAAAC,SAAA,EAAK,SAAS,aAAa,YAAW,UAAS,OAAM,eAAc,YAAW,cAC5E,WACH,GAED,QACC,6BAAAD,QAAA,cAAC,YAAAD,SAAA,EAAQ,gBAAgB,gBACvB,6BAAAC,QAAA,cAAC,YAAAE,SAAA,EAAK,SAAS,WAAS,eAAe,YAAY,KAAK,GAAG,MAAM,yCAC9D,IACH,CACF,CAEJ,CACF;AAEJ;AACA,aAAa,QAAQ,aAAAC;AAGrB,IAAO,uBAAQ;",
+  "names": ["styled", "FlexBox", "React", "Text", "Link", "Badge"]
 }

package/lib/cjs/components/message/Tip/index.js

@@ -34,12 +34,12 @@ module.exports = __toCommonJS(Tip_exports);
 var import_react = __toESM(require("react"));
 var import_styled_components = __toESM(require("styled-components"));
 var import_Text = __toESM(require("../../asorted/Text"));
-var import_react2 = require("@ledgerhq/icons-ui/react");
+var import_reactLegacy = require("@ledgerhq/icons-ui/reactLegacy");
 var import_layout = require("../../layout");
 const icons = {
-  success: /* @__PURE__ */ import_react.default.createElement(import_react2.CheckAloneMedium, { size: 16 }),
-  warning: /* @__PURE__ */ import_react.default.createElement(import_react2.CircledAlertMedium, { size: 16 }),
-  error: /* @__PURE__ */ import_react.default.createElement(import_react2.CloseMedium, { size: 16 })
+  success: /* @__PURE__ */ import_react.default.createElement(import_reactLegacy.CheckAloneMedium, { size: 16 }),
+  warning: /* @__PURE__ */ import_react.default.createElement(import_reactLegacy.CircledAlertMedium, { size: 16 }),
+  error: /* @__PURE__ */ import_react.default.createElement(import_reactLegacy.CloseMedium, { size: 16 })
 };
 const StyledIconContainer = import_styled_components.default.div`
   ${(p) => {

package/lib/cjs/components/message/Tip/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/message/Tip/index.tsx"],
-  "sourcesContent": ["import React from \"react\";\nimport styled, { css } from \"styled-components\";\nimport Text from \"../../asorted/Text\";\nimport { CheckAloneMedium, CloseMedium, CircledAlertMedium } from \"@ledgerhq/icons-ui/react\";\nimport { Flex } from \"../../layout\";\n\ntype TipType = \"success\" | \"warning\" | \"error\";\n\nexport interface TipProps {\n  type?: TipType;\n  label: string;\n}\n\nconst icons = {\n  success: <CheckAloneMedium size={16} />,\n  warning: <CircledAlertMedium size={16} />,\n  error: <CloseMedium size={16} />,\n};\n\nconst StyledIconContainer = styled.div<{ type?: TipType }>`\n  ${p => {\n    switch (p.type) {\n      case \"warning\":\n        return css`\n          background: ${p.theme.colors.warning.c10};\n          color: ${p.theme.colors.warning.c50};\n        `;\n      case \"error\":\n        return css`\n          background: ${p.theme.colors.error.c10};\n          color: ${p.theme.colors.error.c50};\n        `;\n      case \"success\":\n      default:\n        return css`\n          background: ${p.theme.colors.success.c30};\n          color: ${p.theme.colors.success.c50};\n        `;\n    }\n  }}\n\n  border-radius: ${p => `${p.theme.radii[1]}px`};\n  margin-right: ${p => `${p.theme.space[6]}px`};\n  padding: 6px;\n  display: flex;\n  align-items: center;\n`;\n\nexport default function Tip({ type, label }: TipProps): JSX.Element {\n  return (\n    <Flex alignItems={\"center\"}>\n      {type && <StyledIconContainer type={type}>{icons[type]}</StyledIconContainer>}\n      <Text variant={\"paragraph\"} fontWeight={\"medium\"} color={\"neutral.c100\"} flexShrink={1}>\n        {label}\n      </Text>\n    </Flex>\n  );\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAA4B;AAC5B,kBAAiB;AACjB,IAAAA,gBAAkE;AAClE,oBAAqB;AASrB,MAAM,QAAQ;AAAA,EACZ,SAAS,6BAAAC,QAAA,cAAC,kCAAiB,MAAM,IAAI;AAAA,EACrC,SAAS,6BAAAA,QAAA,cAAC,oCAAmB,MAAM,IAAI;AAAA,EACvC,OAAO,6BAAAA,QAAA,cAAC,6BAAY,MAAM,IAAI;AAChC;AAEA,MAAM,sBAAsB,yBAAAC,QAAO;AAAA,IAC/B,OAAK;AACL,UAAQ,EAAE,MAAM;AAAA,IACd,KAAK;AACH,aAAO;AAAA,wBACS,EAAE,MAAM,OAAO,QAAQ;AAAA,mBAC5B,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA,IAEpC,KAAK;AACH,aAAO;AAAA,wBACS,EAAE,MAAM,OAAO,MAAM;AAAA,mBAC1B,EAAE,MAAM,OAAO,MAAM;AAAA;AAAA,IAElC,KAAK;AAAA,IACL;AACE,aAAO;AAAA,wBACS,EAAE,MAAM,OAAO,QAAQ;AAAA,mBAC5B,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA,EAEtC;AACF;AAAA;AAAA,mBAEiB,OAAK,GAAG,EAAE,MAAM,MAAM,CAAC;AAAA,kBACxB,OAAK,GAAG,EAAE,MAAM,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA;AAM1B,SAAR,IAAqB,EAAE,MAAM,MAAM,GAA0B;AAClE,SACE,6BAAAD,QAAA,cAAC,sBAAK,YAAY,YACf,QAAQ,6BAAAA,QAAA,cAAC,uBAAoB,QAAa,MAAM,IAAI,CAAE,GACvD,6BAAAA,QAAA,cAAC,YAAAE,SAAA,EAAK,SAAS,aAAa,YAAY,UAAU,OAAO,gBAAgB,YAAY,KAClF,KACH,CACF;AAEJ;",
-  "names": ["import_react", "React", "styled", "Text"]
+  "sourcesContent": ["import React from \"react\";\nimport styled, { css } from \"styled-components\";\nimport Text from \"../../asorted/Text\";\nimport { CheckAloneMedium, CloseMedium, CircledAlertMedium } from \"@ledgerhq/icons-ui/reactLegacy\";\nimport { Flex } from \"../../layout\";\n\ntype TipType = \"success\" | \"warning\" | \"error\";\n\nexport interface TipProps {\n  type?: TipType;\n  label: string;\n}\n\nconst icons = {\n  success: <CheckAloneMedium size={16} />,\n  warning: <CircledAlertMedium size={16} />,\n  error: <CloseMedium size={16} />,\n};\n\nconst StyledIconContainer = styled.div<{ type?: TipType }>`\n  ${p => {\n    switch (p.type) {\n      case \"warning\":\n        return css`\n          background: ${p.theme.colors.warning.c10};\n          color: ${p.theme.colors.warning.c50};\n        `;\n      case \"error\":\n        return css`\n          background: ${p.theme.colors.error.c10};\n          color: ${p.theme.colors.error.c50};\n        `;\n      case \"success\":\n      default:\n        return css`\n          background: ${p.theme.colors.success.c30};\n          color: ${p.theme.colors.success.c50};\n        `;\n    }\n  }}\n\n  border-radius: ${p => `${p.theme.radii[1]}px`};\n  margin-right: ${p => `${p.theme.space[6]}px`};\n  padding: 6px;\n  display: flex;\n  align-items: center;\n`;\n\nexport default function Tip({ type, label }: TipProps): JSX.Element {\n  return (\n    <Flex alignItems={\"center\"}>\n      {type && <StyledIconContainer type={type}>{icons[type]}</StyledIconContainer>}\n      <Text variant={\"paragraph\"} fontWeight={\"medium\"} color={\"neutral.c100\"} flexShrink={1}>\n        {label}\n      </Text>\n    </Flex>\n  );\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAA4B;AAC5B,kBAAiB;AACjB,yBAAkE;AAClE,oBAAqB;AASrB,MAAM,QAAQ;AAAA,EACZ,SAAS,6BAAAA,QAAA,cAAC,uCAAiB,MAAM,IAAI;AAAA,EACrC,SAAS,6BAAAA,QAAA,cAAC,yCAAmB,MAAM,IAAI;AAAA,EACvC,OAAO,6BAAAA,QAAA,cAAC,kCAAY,MAAM,IAAI;AAChC;AAEA,MAAM,sBAAsB,yBAAAC,QAAO;AAAA,IAC/B,OAAK;AACL,UAAQ,EAAE,MAAM;AAAA,IACd,KAAK;AACH,aAAO;AAAA,wBACS,EAAE,MAAM,OAAO,QAAQ;AAAA,mBAC5B,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA,IAEpC,KAAK;AACH,aAAO;AAAA,wBACS,EAAE,MAAM,OAAO,MAAM;AAAA,mBAC1B,EAAE,MAAM,OAAO,MAAM;AAAA;AAAA,IAElC,KAAK;AAAA,IACL;AACE,aAAO;AAAA,wBACS,EAAE,MAAM,OAAO,QAAQ;AAAA,mBAC5B,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA,EAEtC;AACF;AAAA;AAAA,mBAEiB,OAAK,GAAG,EAAE,MAAM,MAAM,CAAC;AAAA,kBACxB,OAAK,GAAG,EAAE,MAAM,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA;AAM1B,SAAR,IAAqB,EAAE,MAAM,MAAM,GAA0B;AAClE,SACE,6BAAAD,QAAA,cAAC,sBAAK,YAAY,YACf,QAAQ,6BAAAA,QAAA,cAAC,uBAAoB,QAAa,MAAM,IAAI,CAAE,GACvD,6BAAAA,QAAA,cAAC,YAAAE,SAAA,EAAK,SAAS,aAAa,YAAY,UAAU,OAAO,gBAAgB,YAAY,KAClF,KACH,CACF;AAEJ;",
+  "names": ["React", "styled", "Text"]
 }

package/lib/cjs/components/navigation/Aside/Aside.stories.js

@@ -36,7 +36,7 @@ var import_react = __toESM(require("react"));
 var import_Text = __toESM(require("../../asorted/Text"));
 var import_Flex = __toESM(require("../../layout/Flex"));
 var import_Log = __toESM(require("../../message/Log"));
-var import_react2 = require("@ledgerhq/icons-ui/react");
+var import_reactLegacy = require("@ledgerhq/icons-ui/reactLegacy");
 var import_index = __toESM(require("./index"));
 var import_stories = require("./stories.helper");
 var Aside_stories_default = {
@@ -52,7 +52,7 @@ var Aside_stories_default = {
 };
 function Aside(args) {
   const header = /* @__PURE__ */ import_react.default.createElement(import_Log.default, null, "Header");
-  const footer = /* @__PURE__ */ import_react.default.createElement(import_Flex.default, { flexDirection: "column", rowGap: 3 }, /* @__PURE__ */ import_react.default.createElement(import_Flex.default, { columnGap: 3, alignItems: "center" }, /* @__PURE__ */ import_react.default.createElement(import_Text.default, { fontWeight: "medium", variant: "body" }, "Need help?"), /* @__PURE__ */ import_react.default.createElement(import_react2.LifeRingMedium, { size: 20 })), /* @__PURE__ */ import_react.default.createElement(import_Text.default, { fontWeight: "medium", variant: "paragraph" }, "Don\u2019t know what you have to do? Get some help to close this step."), /* @__PURE__ */ import_react.default.createElement("div", null));
+  const footer = /* @__PURE__ */ import_react.default.createElement(import_Flex.default, { flexDirection: "column", rowGap: 3 }, /* @__PURE__ */ import_react.default.createElement(import_Flex.default, { columnGap: 3, alignItems: "center" }, /* @__PURE__ */ import_react.default.createElement(import_Text.default, { fontWeight: "medium", variant: "body" }, "Need help?"), /* @__PURE__ */ import_react.default.createElement(import_reactLegacy.LifeRingMedium, { size: 20 })), /* @__PURE__ */ import_react.default.createElement(import_Text.default, { fontWeight: "medium", variant: "paragraph" }, "Don\u2019t know what you have to do? Get some help to close this step."), /* @__PURE__ */ import_react.default.createElement("div", null));
   return /* @__PURE__ */ import_react.default.createElement(import_Flex.default, { columnGap: 4 }, /* @__PURE__ */ import_react.default.createElement(
     import_index.default,
     {

package/lib/cjs/components/navigation/Aside/Aside.stories.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/navigation/Aside/Aside.stories.tsx"],
-  "sourcesContent": ["import React from \"react\";\n\nimport Text from \"../../asorted/Text\";\nimport FlexBox from \"../../layout/Flex\";\nimport Log from \"../../message/Log\";\nimport { LifeRingMedium } from \"@ledgerhq/icons-ui/react\";\nimport AsideComponent, { Props } from \"./index\";\nimport { nanoIllustration, keyboardIllustration } from \"./stories.helper\";\n\nexport default {\n  title: \"Navigation/Aside\",\n  component: AsideComponent,\n  argTypes: {\n    header: { control: false },\n    footer: { control: false },\n    theme: { table: { disable: true } },\n    as: { table: { disable: true } },\n    forwardedAs: { table: { disable: true } },\n  },\n};\n\nexport function Aside(args: Props): JSX.Element {\n  const header = <Log>Header</Log>;\n\n  const footer = (\n    <FlexBox flexDirection=\"column\" rowGap={3}>\n      <FlexBox columnGap={3} alignItems=\"center\">\n        <Text fontWeight=\"medium\" variant={\"body\"}>\n          Need help?\n        </Text>\n        <LifeRingMedium size={20} />\n      </FlexBox>\n      <Text fontWeight=\"medium\" variant={\"paragraph\"}>\n        Don\u2019t know what you have to do? Get some help to close this step.\n      </Text>\n      <div></div>\n    </FlexBox>\n  );\n\n  return (\n    <FlexBox columnGap={4}>\n      <AsideComponent\n        {...args}\n        header={header}\n        footer={footer}\n        p={10}\n        width=\"324px\"\n        backgroundColor=\"primary.c60\"\n      >\n        <FlexBox m={-10}>\n          <img src={nanoIllustration} />\n        </FlexBox>\n      </AsideComponent>\n      <AsideComponent {...args} header={header} p={10} backgroundColor=\"primary.c60\" flex={1}>\n        <FlexBox justifyContent=\"center\">\n          <img src={keyboardIllustration} />\n        </FlexBox>\n      </AsideComponent>\n    </FlexBox>\n  );\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAElB,kBAAiB;AACjB,kBAAoB;AACpB,iBAAgB;AAChB,IAAAA,gBAA+B;AAC/B,mBAAsC;AACtC,qBAAuD;AAEvD,IAAO,wBAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW,aAAAC;AAAA,EACX,UAAU;AAAA,IACR,QAAQ,EAAE,SAAS,MAAM;AAAA,IACzB,QAAQ,EAAE,SAAS,MAAM;AAAA,IACzB,OAAO,EAAE,OAAO,EAAE,SAAS,KAAK,EAAE;AAAA,IAClC,IAAI,EAAE,OAAO,EAAE,SAAS,KAAK,EAAE;AAAA,IAC/B,aAAa,EAAE,OAAO,EAAE,SAAS,KAAK,EAAE;AAAA,EAC1C;AACF;AAEO,SAAS,MAAM,MAA0B;AAC9C,QAAM,SAAS,6BAAAC,QAAA,cAAC,WAAAC,SAAA,MAAI,QAAM;AAE1B,QAAM,SACJ,6BAAAD,QAAA,cAAC,YAAAE,SAAA,EAAQ,eAAc,UAAS,QAAQ,KACtC,6BAAAF,QAAA,cAAC,YAAAE,SAAA,EAAQ,WAAW,GAAG,YAAW,YAChC,6BAAAF,QAAA,cAAC,YAAAG,SAAA,EAAK,YAAW,UAAS,SAAS,UAAQ,YAE3C,GACA,6BAAAH,QAAA,cAAC,gCAAe,MAAM,IAAI,CAC5B,GACA,6BAAAA,QAAA,cAAC,YAAAG,SAAA,EAAK,YAAW,UAAS,SAAS,eAAa,wEAEhD,GACA,6BAAAH,QAAA,cAAC,WAAI,CACP;AAGF,SACE,6BAAAA,QAAA,cAAC,YAAAE,SAAA,EAAQ,WAAW,KAClB,6BAAAF,QAAA;AAAA,IAAC,aAAAD;AAAA,IAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MACA,GAAG;AAAA,MACH,OAAM;AAAA,MACN,iBAAgB;AAAA;AAAA,IAEhB,6BAAAC,QAAA,cAAC,YAAAE,SAAA,EAAQ,GAAG,OACV,6BAAAF,QAAA,cAAC,SAAI,KAAK,iCAAkB,CAC9B;AAAA,EACF,GACA,6BAAAA,QAAA,cAAC,aAAAD,SAAA,EAAgB,GAAG,MAAM,QAAgB,GAAG,IAAI,iBAAgB,eAAc,MAAM,KACnF,6BAAAC,QAAA,cAAC,YAAAE,SAAA,EAAQ,gBAAe,YACtB,6BAAAF,QAAA,cAAC,SAAI,KAAK,qCAAsB,CAClC,CACF,CACF;AAEJ;",
-  "names": ["import_react", "AsideComponent", "React", "Log", "FlexBox", "Text"]
+  "sourcesContent": ["import React from \"react\";\n\nimport Text from \"../../asorted/Text\";\nimport FlexBox from \"../../layout/Flex\";\nimport Log from \"../../message/Log\";\nimport { LifeRingMedium } from \"@ledgerhq/icons-ui/reactLegacy\";\nimport AsideComponent, { Props } from \"./index\";\nimport { nanoIllustration, keyboardIllustration } from \"./stories.helper\";\n\nexport default {\n  title: \"Navigation/Aside\",\n  component: AsideComponent,\n  argTypes: {\n    header: { control: false },\n    footer: { control: false },\n    theme: { table: { disable: true } },\n    as: { table: { disable: true } },\n    forwardedAs: { table: { disable: true } },\n  },\n};\n\nexport function Aside(args: Props): JSX.Element {\n  const header = <Log>Header</Log>;\n\n  const footer = (\n    <FlexBox flexDirection=\"column\" rowGap={3}>\n      <FlexBox columnGap={3} alignItems=\"center\">\n        <Text fontWeight=\"medium\" variant={\"body\"}>\n          Need help?\n        </Text>\n        <LifeRingMedium size={20} />\n      </FlexBox>\n      <Text fontWeight=\"medium\" variant={\"paragraph\"}>\n        Don\u2019t know what you have to do? Get some help to close this step.\n      </Text>\n      <div></div>\n    </FlexBox>\n  );\n\n  return (\n    <FlexBox columnGap={4}>\n      <AsideComponent\n        {...args}\n        header={header}\n        footer={footer}\n        p={10}\n        width=\"324px\"\n        backgroundColor=\"primary.c60\"\n      >\n        <FlexBox m={-10}>\n          <img src={nanoIllustration} />\n        </FlexBox>\n      </AsideComponent>\n      <AsideComponent {...args} header={header} p={10} backgroundColor=\"primary.c60\" flex={1}>\n        <FlexBox justifyContent=\"center\">\n          <img src={keyboardIllustration} />\n        </FlexBox>\n      </AsideComponent>\n    </FlexBox>\n  );\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAElB,kBAAiB;AACjB,kBAAoB;AACpB,iBAAgB;AAChB,yBAA+B;AAC/B,mBAAsC;AACtC,qBAAuD;AAEvD,IAAO,wBAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW,aAAAA;AAAA,EACX,UAAU;AAAA,IACR,QAAQ,EAAE,SAAS,MAAM;AAAA,IACzB,QAAQ,EAAE,SAAS,MAAM;AAAA,IACzB,OAAO,EAAE,OAAO,EAAE,SAAS,KAAK,EAAE;AAAA,IAClC,IAAI,EAAE,OAAO,EAAE,SAAS,KAAK,EAAE;AAAA,IAC/B,aAAa,EAAE,OAAO,EAAE,SAAS,KAAK,EAAE;AAAA,EAC1C;AACF;AAEO,SAAS,MAAM,MAA0B;AAC9C,QAAM,SAAS,6BAAAC,QAAA,cAAC,WAAAC,SAAA,MAAI,QAAM;AAE1B,QAAM,SACJ,6BAAAD,QAAA,cAAC,YAAAE,SAAA,EAAQ,eAAc,UAAS,QAAQ,KACtC,6BAAAF,QAAA,cAAC,YAAAE,SAAA,EAAQ,WAAW,GAAG,YAAW,YAChC,6BAAAF,QAAA,cAAC,YAAAG,SAAA,EAAK,YAAW,UAAS,SAAS,UAAQ,YAE3C,GACA,6BAAAH,QAAA,cAAC,qCAAe,MAAM,IAAI,CAC5B,GACA,6BAAAA,QAAA,cAAC,YAAAG,SAAA,EAAK,YAAW,UAAS,SAAS,eAAa,wEAEhD,GACA,6BAAAH,QAAA,cAAC,WAAI,CACP;AAGF,SACE,6BAAAA,QAAA,cAAC,YAAAE,SAAA,EAAQ,WAAW,KAClB,6BAAAF,QAAA;AAAA,IAAC,aAAAD;AAAA,IAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MACA,GAAG;AAAA,MACH,OAAM;AAAA,MACN,iBAAgB;AAAA;AAAA,IAEhB,6BAAAC,QAAA,cAAC,YAAAE,SAAA,EAAQ,GAAG,OACV,6BAAAF,QAAA,cAAC,SAAI,KAAK,iCAAkB,CAC9B;AAAA,EACF,GACA,6BAAAA,QAAA,cAAC,aAAAD,SAAA,EAAgB,GAAG,MAAM,QAAgB,GAAG,IAAI,iBAAgB,eAAc,MAAM,KACnF,6BAAAC,QAAA,cAAC,YAAAE,SAAA,EAAQ,gBAAe,YACtB,6BAAAF,QAAA,cAAC,SAAI,KAAK,qCAAsB,CAClC,CACF,CACF;AAEJ;",
+  "names": ["AsideComponent", "React", "Log", "FlexBox", "Text"]
 }

package/lib/cjs/components/navigation/FlowStepper/FlowStepper.stories.js

@@ -208,7 +208,7 @@ const Minimal = (args) => {
   );
 };
 const Header = ({ activeIndex, onBack }) => {
-  return /* @__PURE__ */ import_react.default.createElement(import__.Box, { position: "relative", my: 6 }, onBack && /* @__PURE__ */ import_react.default.createElement(import__.Box, { position: "absolute" }, /* @__PURE__ */ import_react.default.createElement(import__.Link, { onClick: onBack, Icon: import__.Icons.ArrowLeftMedium, iconPosition: "left" }, "Back")), /* @__PURE__ */ import_react.default.createElement(import__.Flex, { justifyContent: "center" }, /* @__PURE__ */ import_react.default.createElement(import__.Text, { variant: "h2" }, "Header ", activeIndex + 1)));
+  return /* @__PURE__ */ import_react.default.createElement(import__.Box, { position: "relative", my: 6 }, onBack && /* @__PURE__ */ import_react.default.createElement(import__.Box, { position: "absolute" }, /* @__PURE__ */ import_react.default.createElement(import__.Link, { onClick: onBack, Icon: import__.IconsLegacy.ArrowLeftMedium, iconPosition: "left" }, "Back")), /* @__PURE__ */ import_react.default.createElement(import__.Flex, { justifyContent: "center" }, /* @__PURE__ */ import_react.default.createElement(import__.Text, { variant: "h2" }, "Header ", activeIndex + 1)));
 };
 const Footer = ({
   onContinue,