npm - @ledgerhq/react-ui - Versions diffs - 0.43.0-nightly.20260110024039 → 0.43.0 - Mend

@ledgerhq/react-ui 0.43.0-nightly.20260110024039 → 0.43.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (19) hide show

package/lib/cjs/components/form/SelectInput/Select.stories.js CHANGED Viewed

@@ -34,6 +34,7 @@ __export(Select_stories_exports, {
   Minimal: () => Minimal,
   MultiSelect: () => MultiSelect,
   SideRenders: () => SideRenders,
+  VirtualList: () => VirtualList,
   default: () => Select_stories_default
 });
 module.exports = __toCommonJS(Select_stories_exports);
@@ -45,6 +46,7 @@ var import_Grid = __toESM(require("../../layout/Grid"));
 var import_SearchMedium = __toESM(require("@ledgerhq/icons-ui/reactLegacy/SearchMedium"));
 var import_index = __toESM(require("./index"));
 var import_Option = require("./Option");
+var import_VirtualMenuList = require("./VirtualMenuList");
 var import_ValueContainer = require("./ValueContainer");
 const description = `
 ### A styled Select Input control
@@ -477,6 +479,30 @@ DisabledOption.parameters = {
     }
   }
 };
+const hugeOptions = new Array(1e4).fill(0).map((_, i) => ({ label: "" + i, value: "" + i }));
+const VirtualList = (args) => {
+  const [value, setValue] = import_react.default.useState(null);
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_index.default,
+    {
+      options: hugeOptions,
+      value,
+      onChange: setValue,
+      components: {
+        MenuList: import_VirtualMenuList.VirtualMenuList
+      },
+      menuPortalTarget: document.body,
+      ...args
+    }
+  );
+};
+VirtualList.parameters = {
+  docs: {
+    description: {
+      story: "This control contains a list of 10_000 elements. It uses the `VirtualMenuList` component to render the list inside a `react-window` wrapper."
+    }
+  }
+};
 const MultiSelect = (args) => {
   const [value, setValue] = import_react.default.useState([]);
   return /* @__PURE__ */ import_react.default.createElement(

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

@@ -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/reactLegacy/SearchMedium\";\nimport SelectInput, { Props } from \"./index\";\nimport { Option } from \"./Option\";\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\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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",
+  "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/form/SelectInput/VirtualMenuList.js ADDED Viewed

@@ -0,0 +1,100 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var VirtualMenuList_exports = {};
+__export(VirtualMenuList_exports, {
+  VirtualMenuList: () => VirtualMenuList,
+  VirtualRow: () => VirtualRow
+});
+module.exports = __toCommonJS(VirtualMenuList_exports);
+var import_react = __toESM(require("react"));
+var import_react_select = require("react-select");
+var import_react_window = require("react-window");
+const VirtualRow = (0, import_react.memo)(({ style, children }) => /* @__PURE__ */ import_react.default.createElement("div", { style }, children));
+function VirtualMenuList(props) {
+  const { children, options, maxHeight, getValue, getStyles, selectProps } = props;
+  const { noOptionsMessage, rowHeight = 0 } = selectProps;
+  const listRef = (0, import_react.useRef)();
+  const [value] = getValue();
+  const initialOffset = options.indexOf(value) * rowHeight;
+  const childrenLength = Array.isArray(children) ? children.length : 0;
+  const minHeight = Math.min(maxHeight, rowHeight * childrenLength);
+  const menuStyle = getStyles("menuList", props);
+  const focusedIndex = (0, import_react.useMemo)(
+    () => Array.isArray(children) ? Math.max(
+      children.findIndex(
+        (child) => import_react.default.isValidElement(child) && child.props.isFocused
+      ),
+      0
+    ) : 0,
+    [children]
+  );
+  (0, import_react.useEffect)(() => {
+    var _a;
+    (_a = listRef.current) == null ? void 0 : _a.scrollToItem(focusedIndex);
+  }, [focusedIndex]);
+  if (!children || !Array.isArray(children))
+    return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null);
+  if (childrenLength === 0 && noOptionsMessage) {
+    return /* @__PURE__ */ import_react.default.createElement(import_react_select.components.NoOptionsMessage, { ...{ ...props, innerProps: {} } });
+  }
+  children.length && children.forEach((node) => {
+    if (!node || !import_react.default.isValidElement(node))
+      return;
+    delete node.props.innerProps.onMouseMove;
+    delete node.props.innerProps.onMouseOver;
+  });
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      style: { ...menuStyle, maxHeight: "auto" },
+      onWheelCapture: (e) => (
+        /*
+          This event causes issues with react-window.
+          react-select logic is based on whether the bottom/top of the list has been reached
+          but with virtual lists it just does not work and prevents scrolling…
+        */
+        e.stopPropagation()
+      )
+    },
+    /* @__PURE__ */ import_react.default.createElement(
+      import_react_window.FixedSizeList,
+      {
+        ref: listRef,
+        width: "100%",
+        height: minHeight,
+        overscanCount: 50,
+        itemCount: childrenLength,
+        itemSize: rowHeight,
+        initialScrollOffset: initialOffset
+      },
+      ({ index, style }) => /* @__PURE__ */ import_react.default.createElement(VirtualRow, { style }, children[index])
+    )
+  );
+}
+//# sourceMappingURL=VirtualMenuList.js.map

package/lib/cjs/components/form/SelectInput/VirtualMenuList.js.map ADDED Viewed

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/form/SelectInput/VirtualMenuList.tsx"],
+  "sourcesContent": ["import React, { memo, useMemo, useRef, useEffect } from \"react\";\nimport { components, GroupBase, MenuListProps } from \"react-select\";\nimport { FixedSizeList, FixedSizeList as List } from \"react-window\";\nimport { Props as SelectProps } from \"./index\";\n\nexport type RowProps = React.PropsWithChildren<{ style: React.CSSProperties }>;\nexport const VirtualRow = memo(({ style, children }: RowProps) => (\n  <div style={style}>{children}</div>\n));\n\nexport function VirtualMenuList<\n  O = unknown,\n  M extends boolean = false,\n  G extends GroupBase<O> = GroupBase<O>,\n>(props: MenuListProps<O, M, G>): React.ReactElement {\n  const { children, options, maxHeight, getValue, getStyles, selectProps } = props;\n  const { noOptionsMessage, rowHeight = 0 } = selectProps as SelectProps<O, M, G>;\n\n  const listRef = useRef<FixedSizeList>();\n  const [value] = getValue();\n  const initialOffset = options.indexOf(value) * rowHeight;\n  const childrenLength = Array.isArray(children) ? children.length : 0;\n  const minHeight = Math.min(maxHeight, rowHeight * childrenLength);\n\n  const menuStyle = getStyles(\"menuList\", props);\n\n  const focusedIndex = useMemo(\n    () =>\n      Array.isArray(children)\n        ? Math.max(\n            children.findIndex(\n              (child: React.ReactNode) => React.isValidElement(child) && child.props.isFocused,\n            ),\n            0,\n          )\n        : 0,\n    [children],\n  );\n\n  useEffect(() => {\n    listRef.current?.scrollToItem(focusedIndex);\n  }, [focusedIndex]);\n\n  if (!children || !Array.isArray(children)) return <></>;\n\n  if (childrenLength === 0 && noOptionsMessage) {\n    return <components.NoOptionsMessage {...{ ...props, innerProps: {} }} />;\n  }\n\n  children.length &&\n    children.forEach((node: React.ReactNode) => {\n      if (!node || !React.isValidElement(node)) return;\n      delete node.props.innerProps.onMouseMove; // NB: Removes lag on hover, see https://github.com/JedWatson/react-select/issues/3128#issuecomment-433834170\n      delete node.props.innerProps.onMouseOver;\n    });\n\n  return (\n    <div\n      style={{ ...(menuStyle as React.CSSProperties), maxHeight: \"auto\" }}\n      onWheelCapture={e =>\n        /*\n          This event causes issues with react-window.\n          react-select logic is based on whether the bottom/top of the list has been reached\n          but with virtual lists it just does not work and prevents scrolling\u2026\n        */\n        e.stopPropagation()\n      }\n    >\n      <List\n        ref={listRef as React.LegacyRef<FixedSizeList>}\n        width=\"100%\"\n        height={minHeight}\n        overscanCount={50}\n        itemCount={childrenLength}\n        itemSize={rowHeight}\n        initialScrollOffset={initialOffset}\n      >\n        {({ index, style }) => <VirtualRow style={style}>{children[index]}</VirtualRow>}\n      </List>\n    </div>\n  );\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAwD;AACxD,0BAAqD;AACrD,0BAAqD;AAI9C,MAAM,iBAAa,mBAAK,CAAC,EAAE,OAAO,SAAS,MAChD,6BAAAA,QAAA,cAAC,SAAI,SAAe,QAAS,CAC9B;AAEM,SAAS,gBAId,OAAmD;AACnD,QAAM,EAAE,UAAU,SAAS,WAAW,UAAU,WAAW,YAAY,IAAI;AAC3E,QAAM,EAAE,kBAAkB,YAAY,EAAE,IAAI;AAE5C,QAAM,cAAU,qBAAsB;AACtC,QAAM,CAAC,KAAK,IAAI,SAAS;AACzB,QAAM,gBAAgB,QAAQ,QAAQ,KAAK,IAAI;AAC/C,QAAM,iBAAiB,MAAM,QAAQ,QAAQ,IAAI,SAAS,SAAS;AACnE,QAAM,YAAY,KAAK,IAAI,WAAW,YAAY,cAAc;AAEhE,QAAM,YAAY,UAAU,YAAY,KAAK;AAE7C,QAAM,mBAAe;AAAA,IACnB,MACE,MAAM,QAAQ,QAAQ,IAClB,KAAK;AAAA,MACH,SAAS;AAAA,QACP,CAAC,UAA2B,aAAAA,QAAM,eAAe,KAAK,KAAK,MAAM,MAAM;AAAA,MACzE;AAAA,MACA;AAAA,IACF,IACA;AAAA,IACN,CAAC,QAAQ;AAAA,EACX;AAEA,8BAAU,MAAM;AAvClB;AAwCI,kBAAQ,YAAR,mBAAiB,aAAa;AAAA,EAChC,GAAG,CAAC,YAAY,CAAC;AAEjB,MAAI,CAAC,YAAY,CAAC,MAAM,QAAQ,QAAQ;AAAG,WAAO,6BAAAA,QAAA,2BAAAA,QAAA,cAAE;AAEpD,MAAI,mBAAmB,KAAK,kBAAkB;AAC5C,WAAO,6BAAAA,QAAA,cAAC,+BAAW,kBAAX,EAA6B,GAAG,EAAE,GAAG,OAAO,YAAY,CAAC,EAAE,GAAG;AAAA,EACxE;AAEA,WAAS,UACP,SAAS,QAAQ,CAAC,SAA0B;AAC1C,QAAI,CAAC,QAAQ,CAAC,aAAAA,QAAM,eAAe,IAAI;AAAG;AAC1C,WAAO,KAAK,MAAM,WAAW;AAC7B,WAAO,KAAK,MAAM,WAAW;AAAA,EAC/B,CAAC;AAEH,SACE,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,EAAE,GAAI,WAAmC,WAAW,OAAO;AAAA,MAClE,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAMd,EAAE,gBAAgB;AAAA;AAAA;AAAA,IAGpB,6BAAAA,QAAA;AAAA,MAAC,oBAAAC;AAAA,MAAA;AAAA,QACC,KAAK;AAAA,QACL,OAAM;AAAA,QACN,QAAQ;AAAA,QACR,eAAe;AAAA,QACf,WAAW;AAAA,QACX,UAAU;AAAA,QACV,qBAAqB;AAAA;AAAA,MAEpB,CAAC,EAAE,OAAO,MAAM,MAAM,6BAAAD,QAAA,cAAC,cAAW,SAAe,SAAS,KAAK,CAAE;AAAA,IACpE;AAAA,EACF;AAEJ;",
+  "names": ["React", "List"]
+}

package/lib/cjs/pre-ldls/components/TextInput/TextInput.js CHANGED Viewed

@@ -108,7 +108,6 @@ const StyledInput = import_styled_components.default.input`
     color: var(--colors-border-disabled-default);
     cursor: not-allowed;
   }
-  outline: none;
 `;
 const Fieldset = import_styled_components.default.fieldset`
   ${(0, import_libs.withTokens)(

package/lib/cjs/pre-ldls/components/TextInput/TextInput.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/pre-ldls/components/TextInput/TextInput.tsx"],
-  "sourcesContent": ["import debounce from \"lodash/debounce\";\nimport React from \"react\";\nimport styled from \"styled-components\";\nimport { Icons } from \"../../../assets\";\nimport { Flex } from \"../../../components\";\nimport { withTokens } from \"../../libs\";\n\nconst DEBOUNCE_MS = 250;\n\nconst COLORS_BORDER_STATUS_ERROR_DEFAULT = \"colors-border-status-error-default\";\nconst EXTRA_FONT_SIZE = \"0.75rem\";\nconst ICON_BUTTONS_SIZE = \"32px\";\nconst LABEL_OFFSET_Y = `calc(-0.5 * ${EXTRA_FONT_SIZE})`;\nconst LABEL_OFFSET_X = \"var(--spacing-s, 16px)\";\nconst LABEL_PADDING = \"5px\";\n\ntype NativeInputProps = Omit<React.ComponentProps<\"input\">, \"value\" | \"defaultValue\">;\n\nexport type TextInputProps = Readonly<\n  NativeInputProps & {\n    defaultValue?: string;\n    label?: string;\n    startAdornment?: React.ReactNode;\n    endAdornment?: React.ReactNode;\n    error?: boolean;\n    helperText?: string;\n  }\n>;\n\nconst ClearButton = styled.button`\n  ${withTokens(\"colors-surface-dark-default\")}\n\n  all: unset;\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  height: ${ICON_BUTTONS_SIZE};\n  width: ${ICON_BUTTONS_SIZE};\n`;\n\nconst Container = styled.div`\n  ${withTokens(\"spacing-xxs\")}\n\n  display: flex;\n  flex-direction: column;\n  gap: var(--spacing-xxs, 4px);\n  position: relative;\n  min-width: 328px;\n`;\n\nconst Label = styled.label<{ isDisabled: boolean; hasError: boolean; isFocused: boolean }>`\n  ${withTokens(\n    COLORS_BORDER_STATUS_ERROR_DEFAULT,\n    \"colors-border-active-default\",\n    \"colors-content-disabled\",\n    \"colors-content-subdued-default-default\",\n    \"spacing-s\",\n  )}\n  color: ${({ hasError, isDisabled, isFocused }) =>\n    isDisabled\n      ? \"var(--colors-content-disabled)\"\n      : hasError\n        ? `var(--${COLORS_BORDER_STATUS_ERROR_DEFAULT});`\n        : isFocused\n          ? \"var(--colors-border-active-default)\"\n          : \"var(--colors-content-subdued-default-default);\"};\n  font-size: ${EXTRA_FONT_SIZE};\n  padding-inline: ${LABEL_PADDING};\n  position: absolute;\n  top: ${LABEL_OFFSET_Y};\n  left: calc(${LABEL_OFFSET_X} - ${LABEL_PADDING});\n`;\n\nconst Wrapper = styled.div<{\n  hasStart: boolean;\n  hasEnd: boolean;\n}>`\n  ${withTokens(\n    \"colors-content-default-default\",\n    \"colors-surface-transparent-subdued-default\",\n    \"radius-s\",\n    \"spacing-s\",\n    \"spacing-xxs\",\n  )}\n\n  align-items: center;\n  border-radius: var(--radius-s);\n  display: flex;\n  gap: var(--spacing-xxs, 8px);\n  height: 56px;\n  padding: ${({ hasEnd, hasStart }) =>\n    `0 ${hasEnd ? \"var(--spacing-xs, 8px)\" : LABEL_OFFSET_X} 0 ${\n      hasStart ? \"var(--spacing-xs, 8px)\" : LABEL_OFFSET_X\n    }`};\n  position: relative;\n  transition: height 0.3s linear;\n`;\n\nconst StyledInput = styled.input`\n  ${withTokens(\"colors-border-disabled-default\")}\n\n  flex: 1;\n  background: none;\n  border: none;\n  cursor: text;\n  &[disabled] {\n    color: var(--colors-border-disabled-default);\n    cursor: not-allowed;\n  }\n  outline: none;\n`;\n\nconst Fieldset = styled.fieldset<{\n  hasError: boolean;\n  hasLabel: boolean;\n  isDisabled: boolean;\n  isFocused: boolean;\n}>`\n  ${withTokens(\n    COLORS_BORDER_STATUS_ERROR_DEFAULT,\n    \"colors-border-active-default\",\n    \"colors-content-subdued-default-default\",\n    \"colors-content-disabled\",\n    \"spacing-s\",\n  )}\n  border-radius: var(--radius-s);\n  border-color: ${({ isDisabled, hasError, isFocused }) =>\n    isDisabled\n      ? \"var(--colors-content-disabled)\"\n      : hasError\n        ? `var(--${COLORS_BORDER_STATUS_ERROR_DEFAULT})`\n        : isFocused\n          ? \"var(--colors-border-active-default)\"\n          : \"var(--colors-content-subdued-default-default)\"};\n  border-style: solid;\n  border-width: 1px;\n  bottom: 0;\n  font-size: ${EXTRA_FONT_SIZE};\n  left: 0;\n  overflow: hidden;\n  padding: 0 calc(${LABEL_OFFSET_X} - ${LABEL_PADDING});\n  pointer-events: none;\n  position: absolute;\n  right: 0;\n  top: ${({ hasLabel }) => (hasLabel ? LABEL_OFFSET_Y : \"0\")};\n`;\n\nconst Legend = styled.legend`\n  visibility: hidden;\n  padding-inline: ${LABEL_PADDING};\n`;\n\nconst HelperContainer = styled(Flex)`\n  ${withTokens(COLORS_BORDER_STATUS_ERROR_DEFAULT)}\n  align-items: center;\n`;\n\n// TODO what's the color for disabled helperText?\nconst HelperText = styled.span<{ hasError: boolean; isDisabled: boolean }>`\n  ${withTokens(COLORS_BORDER_STATUS_ERROR_DEFAULT, \"colors-border-disabled-default\")}\n  ${({ isDisabled, hasError }) =>\n    isDisabled\n      ? \"var(--colors-border-disabled-default)\"\n      : hasError\n        ? `color: var(--${COLORS_BORDER_STATUS_ERROR_DEFAULT});`\n        : \"\"}\n  font-size: ${EXTRA_FONT_SIZE};\n`;\n\nexport const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(\n  (\n    {\n      label,\n      name,\n      defaultValue = \"\",\n      startAdornment = null,\n      endAdornment = null,\n      error = false,\n      helperText,\n      style,\n      onFocus,\n      onBlur,\n      onChange,\n      ...rest\n    },\n    ref,\n  ) => {\n    const inputRef = React.useRef<HTMLInputElement>(null);\n    const [isFocused, setIsFocused] = React.useState(false);\n    const [value, setValue] = React.useState(defaultValue);\n\n    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions\n    React.useImperativeHandle(ref, () => inputRef.current as HTMLInputElement);\n\n    const hideClearDebounced = React.useMemo(\n      () => debounce(() => setIsFocused(false), DEBOUNCE_MS),\n      [],\n    );\n\n    const handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {\n      hideClearDebounced.cancel();\n      setIsFocused(true);\n      onFocus?.(e);\n    };\n\n    const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n      onBlur?.(e);\n      hideClearDebounced();\n    };\n\n    React.useEffect(() => () => hideClearDebounced.cancel(), [hideClearDebounced]);\n\n    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n      setValue(e.target.value);\n      onChange?.(e);\n    };\n\n    const clearInput = () => {\n      if (inputRef.current) {\n        inputRef.current.value = \"\";\n        setValue(\"\");\n        inputRef.current.focus();\n      }\n    };\n\n    const showClear = value.length > 0 && (isFocused || error);\n    const hasEnd = showClear || Boolean(endAdornment);\n    const hasError = Boolean(error);\n    const hasLabel = Boolean(label);\n    const isDisabled = Boolean(rest.disabled);\n\n    return (\n      <Container style={style}>\n        {label && (\n          <Label isDisabled={isDisabled} hasError={hasError} isFocused={isFocused} htmlFor={name}>\n            {label}\n          </Label>\n        )}\n\n        <Wrapper hasStart={Boolean(startAdornment)} hasEnd={hasEnd}>\n          {startAdornment}\n\n          <StyledInput\n            name={name}\n            defaultValue={defaultValue}\n            onFocus={handleFocus}\n            onBlur={handleBlur}\n            onChange={handleChange}\n            {...rest}\n            ref={inputRef}\n          />\n\n          {showClear ? (\n            <ClearButton onClick={clearInput} aria-label=\"Clear\">\n              <Icons.DeleteCircleFill size=\"S\" color=\"var(--colors-surface-dark-default)\" />\n            </ClearButton>\n          ) : (\n            endAdornment\n          )}\n\n          <Fieldset\n            hasError={hasError}\n            hasLabel={hasLabel}\n            isDisabled={isDisabled}\n            isFocused={isFocused}\n          >\n            {label ? <Legend>{label}</Legend> : null}\n          </Fieldset>\n        </Wrapper>\n\n        {helperText ? (\n          <HelperContainer columnGap={2}>\n            {hasError ? (\n              <Icons.DeleteCircleFill\n                size=\"S\"\n                color={`var(--${COLORS_BORDER_STATUS_ERROR_DEFAULT})`}\n              />\n            ) : null}\n            <HelperText isDisabled={isDisabled} hasError={hasError}>\n              {helperText}\n            </HelperText>\n          </HelperContainer>\n        ) : null}\n      </Container>\n    );\n  },\n);\n\nTextInput.displayName = \"TextInput\";\n"],
-  "mappings": "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",
+  "sourcesContent": ["import debounce from \"lodash/debounce\";\nimport React from \"react\";\nimport styled from \"styled-components\";\nimport { Icons } from \"../../../assets\";\nimport { Flex } from \"../../../components\";\nimport { withTokens } from \"../../libs\";\n\nconst DEBOUNCE_MS = 250;\n\nconst COLORS_BORDER_STATUS_ERROR_DEFAULT = \"colors-border-status-error-default\";\nconst EXTRA_FONT_SIZE = \"0.75rem\";\nconst ICON_BUTTONS_SIZE = \"32px\";\nconst LABEL_OFFSET_Y = `calc(-0.5 * ${EXTRA_FONT_SIZE})`;\nconst LABEL_OFFSET_X = \"var(--spacing-s, 16px)\";\nconst LABEL_PADDING = \"5px\";\n\ntype NativeInputProps = Omit<React.ComponentProps<\"input\">, \"value\" | \"defaultValue\">;\n\nexport type TextInputProps = Readonly<\n  NativeInputProps & {\n    defaultValue?: string;\n    label?: string;\n    startAdornment?: React.ReactNode;\n    endAdornment?: React.ReactNode;\n    error?: boolean;\n    helperText?: string;\n  }\n>;\n\nconst ClearButton = styled.button`\n  ${withTokens(\"colors-surface-dark-default\")}\n\n  all: unset;\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  height: ${ICON_BUTTONS_SIZE};\n  width: ${ICON_BUTTONS_SIZE};\n`;\n\nconst Container = styled.div`\n  ${withTokens(\"spacing-xxs\")}\n\n  display: flex;\n  flex-direction: column;\n  gap: var(--spacing-xxs, 4px);\n  position: relative;\n  min-width: 328px;\n`;\n\nconst Label = styled.label<{ isDisabled: boolean; hasError: boolean; isFocused: boolean }>`\n  ${withTokens(\n    COLORS_BORDER_STATUS_ERROR_DEFAULT,\n    \"colors-border-active-default\",\n    \"colors-content-disabled\",\n    \"colors-content-subdued-default-default\",\n    \"spacing-s\",\n  )}\n  color: ${({ hasError, isDisabled, isFocused }) =>\n    isDisabled\n      ? \"var(--colors-content-disabled)\"\n      : hasError\n        ? `var(--${COLORS_BORDER_STATUS_ERROR_DEFAULT});`\n        : isFocused\n          ? \"var(--colors-border-active-default)\"\n          : \"var(--colors-content-subdued-default-default);\"};\n  font-size: ${EXTRA_FONT_SIZE};\n  padding-inline: ${LABEL_PADDING};\n  position: absolute;\n  top: ${LABEL_OFFSET_Y};\n  left: calc(${LABEL_OFFSET_X} - ${LABEL_PADDING});\n`;\n\nconst Wrapper = styled.div<{\n  hasStart: boolean;\n  hasEnd: boolean;\n}>`\n  ${withTokens(\n    \"colors-content-default-default\",\n    \"colors-surface-transparent-subdued-default\",\n    \"radius-s\",\n    \"spacing-s\",\n    \"spacing-xxs\",\n  )}\n\n  align-items: center;\n  border-radius: var(--radius-s);\n  display: flex;\n  gap: var(--spacing-xxs, 8px);\n  height: 56px;\n  padding: ${({ hasEnd, hasStart }) =>\n    `0 ${hasEnd ? \"var(--spacing-xs, 8px)\" : LABEL_OFFSET_X} 0 ${\n      hasStart ? \"var(--spacing-xs, 8px)\" : LABEL_OFFSET_X\n    }`};\n  position: relative;\n  transition: height 0.3s linear;\n`;\n\nconst StyledInput = styled.input`\n  ${withTokens(\"colors-border-disabled-default\")}\n\n  flex: 1;\n  background: none;\n  border: none;\n  cursor: text;\n  &[disabled] {\n    color: var(--colors-border-disabled-default);\n    cursor: not-allowed;\n  }\n`;\n\nconst Fieldset = styled.fieldset<{\n  hasError: boolean;\n  hasLabel: boolean;\n  isDisabled: boolean;\n  isFocused: boolean;\n}>`\n  ${withTokens(\n    COLORS_BORDER_STATUS_ERROR_DEFAULT,\n    \"colors-border-active-default\",\n    \"colors-content-subdued-default-default\",\n    \"colors-content-disabled\",\n    \"spacing-s\",\n  )}\n  border-radius: var(--radius-s);\n  border-color: ${({ isDisabled, hasError, isFocused }) =>\n    isDisabled\n      ? \"var(--colors-content-disabled)\"\n      : hasError\n        ? `var(--${COLORS_BORDER_STATUS_ERROR_DEFAULT})`\n        : isFocused\n          ? \"var(--colors-border-active-default)\"\n          : \"var(--colors-content-subdued-default-default)\"};\n  border-style: solid;\n  border-width: 1px;\n  bottom: 0;\n  font-size: ${EXTRA_FONT_SIZE};\n  left: 0;\n  overflow: hidden;\n  padding: 0 calc(${LABEL_OFFSET_X} - ${LABEL_PADDING});\n  pointer-events: none;\n  position: absolute;\n  right: 0;\n  top: ${({ hasLabel }) => (hasLabel ? LABEL_OFFSET_Y : \"0\")};\n`;\n\nconst Legend = styled.legend`\n  visibility: hidden;\n  padding-inline: ${LABEL_PADDING};\n`;\n\nconst HelperContainer = styled(Flex)`\n  ${withTokens(COLORS_BORDER_STATUS_ERROR_DEFAULT)}\n  align-items: center;\n`;\n\n// TODO what's the color for disabled helperText?\nconst HelperText = styled.span<{ hasError: boolean; isDisabled: boolean }>`\n  ${withTokens(COLORS_BORDER_STATUS_ERROR_DEFAULT, \"colors-border-disabled-default\")}\n  ${({ isDisabled, hasError }) =>\n    isDisabled\n      ? \"var(--colors-border-disabled-default)\"\n      : hasError\n        ? `color: var(--${COLORS_BORDER_STATUS_ERROR_DEFAULT});`\n        : \"\"}\n  font-size: ${EXTRA_FONT_SIZE};\n`;\n\nexport const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(\n  (\n    {\n      label,\n      name,\n      defaultValue = \"\",\n      startAdornment = null,\n      endAdornment = null,\n      error = false,\n      helperText,\n      style,\n      onFocus,\n      onBlur,\n      onChange,\n      ...rest\n    },\n    ref,\n  ) => {\n    const inputRef = React.useRef<HTMLInputElement>(null);\n    const [isFocused, setIsFocused] = React.useState(false);\n    const [value, setValue] = React.useState(defaultValue);\n\n    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions\n    React.useImperativeHandle(ref, () => inputRef.current as HTMLInputElement);\n\n    const hideClearDebounced = React.useMemo(\n      () => debounce(() => setIsFocused(false), DEBOUNCE_MS),\n      [],\n    );\n\n    const handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {\n      hideClearDebounced.cancel();\n      setIsFocused(true);\n      onFocus?.(e);\n    };\n\n    const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n      onBlur?.(e);\n      hideClearDebounced();\n    };\n\n    React.useEffect(() => () => hideClearDebounced.cancel(), [hideClearDebounced]);\n\n    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n      setValue(e.target.value);\n      onChange?.(e);\n    };\n\n    const clearInput = () => {\n      if (inputRef.current) {\n        inputRef.current.value = \"\";\n        setValue(\"\");\n        inputRef.current.focus();\n      }\n    };\n\n    const showClear = value.length > 0 && (isFocused || error);\n    const hasEnd = showClear || Boolean(endAdornment);\n    const hasError = Boolean(error);\n    const hasLabel = Boolean(label);\n    const isDisabled = Boolean(rest.disabled);\n\n    return (\n      <Container style={style}>\n        {label && (\n          <Label isDisabled={isDisabled} hasError={hasError} isFocused={isFocused} htmlFor={name}>\n            {label}\n          </Label>\n        )}\n\n        <Wrapper hasStart={Boolean(startAdornment)} hasEnd={hasEnd}>\n          {startAdornment}\n\n          <StyledInput\n            name={name}\n            defaultValue={defaultValue}\n            onFocus={handleFocus}\n            onBlur={handleBlur}\n            onChange={handleChange}\n            {...rest}\n            ref={inputRef}\n          />\n\n          {showClear ? (\n            <ClearButton onClick={clearInput} aria-label=\"Clear\">\n              <Icons.DeleteCircleFill size=\"S\" color=\"var(--colors-surface-dark-default)\" />\n            </ClearButton>\n          ) : (\n            endAdornment\n          )}\n\n          <Fieldset\n            hasError={hasError}\n            hasLabel={hasLabel}\n            isDisabled={isDisabled}\n            isFocused={isFocused}\n          >\n            {label ? <Legend>{label}</Legend> : null}\n          </Fieldset>\n        </Wrapper>\n\n        {helperText ? (\n          <HelperContainer columnGap={2}>\n            {hasError ? (\n              <Icons.DeleteCircleFill\n                size=\"S\"\n                color={`var(--${COLORS_BORDER_STATUS_ERROR_DEFAULT})`}\n              />\n            ) : null}\n            <HelperText isDisabled={isDisabled} hasError={hasError}>\n              {helperText}\n            </HelperText>\n          </HelperContainer>\n        ) : null}\n      </Container>\n    );\n  },\n);\n\nTextInput.displayName = \"TextInput\";\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAAqB;AACrB,mBAAkB;AAClB,+BAAmB;AACnB,oBAAsB;AACtB,wBAAqB;AACrB,kBAA2B;AAE3B,MAAM,cAAc;AAEpB,MAAM,qCAAqC;AAC3C,MAAM,kBAAkB;AACxB,MAAM,oBAAoB;AAC1B,MAAM,iBAAiB,eAAe,eAAe;AACrD,MAAM,iBAAiB;AACvB,MAAM,gBAAgB;AAetB,MAAM,cAAc,yBAAAA,QAAO;AAAA,QACvB,wBAAW,6BAA6B,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAOjC,iBAAiB;AAAA,WAClB,iBAAiB;AAAA;AAG5B,MAAM,YAAY,yBAAAA,QAAO;AAAA,QACrB,wBAAW,aAAa,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS7B,MAAM,QAAQ,yBAAAA,QAAO;AAAA,QACjB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;AAAA,WACQ,CAAC,EAAE,UAAU,YAAY,UAAU,MAC1C,aACI,mCACA,WACE,SAAS,kCAAkC,OAC3C,YACE,wCACA,gDAAgD;AAAA,eAC7C,eAAe;AAAA,oBACV,aAAa;AAAA;AAAA,SAExB,cAAc;AAAA,eACR,cAAc,MAAM,aAAa;AAAA;AAGhD,MAAM,UAAU,yBAAAA,QAAO;AAAA,QAInB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAOU,CAAC,EAAE,QAAQ,SAAS,MAC7B,KAAK,SAAS,2BAA2B,cAAc,MACrD,WAAW,2BAA2B,cACxC,EAAE;AAAA;AAAA;AAAA;AAKN,MAAM,cAAc,yBAAAA,QAAO;AAAA,QACvB,wBAAW,gCAAgC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAYhD,MAAM,WAAW,yBAAAA,QAAO;AAAA,QAMpB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;AAAA;AAAA,kBAEe,CAAC,EAAE,YAAY,UAAU,UAAU,MACjD,aACI,mCACA,WACE,SAAS,kCAAkC,MAC3C,YACE,wCACA,+CAA+C;AAAA;AAAA;AAAA;AAAA,eAI5C,eAAe;AAAA;AAAA;AAAA,oBAGV,cAAc,MAAM,aAAa;AAAA;AAAA;AAAA;AAAA,SAI5C,CAAC,EAAE,SAAS,MAAO,WAAW,iBAAiB,GAAI;AAAA;AAG5D,MAAM,SAAS,yBAAAA,QAAO;AAAA;AAAA,oBAEF,aAAa;AAAA;AAGjC,MAAM,sBAAkB,yBAAAA,SAAO,sBAAI;AAAA,QAC/B,wBAAW,kCAAkC,CAAC;AAAA;AAAA;AAKlD,MAAM,aAAa,yBAAAA,QAAO;AAAA,QACtB,wBAAW,oCAAoC,gCAAgC,CAAC;AAAA,IAChF,CAAC,EAAE,YAAY,SAAS,MACxB,aACI,0CACA,WACE,gBAAgB,kCAAkC,OAClD,EAAE;AAAA,eACG,eAAe;AAAA;AAGvB,MAAM,YAAY,aAAAC,QAAM;AAAA,EAC7B,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf,iBAAiB;AAAA,IACjB,eAAe;AAAA,IACf,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,WAAW,aAAAA,QAAM,OAAyB,IAAI;AACpD,UAAM,CAAC,WAAW,YAAY,IAAI,aAAAA,QAAM,SAAS,KAAK;AACtD,UAAM,CAAC,OAAO,QAAQ,IAAI,aAAAA,QAAM,SAAS,YAAY;AAGrD,iBAAAA,QAAM,oBAAoB,KAAK,MAAM,SAAS,OAA2B;AAEzE,UAAM,qBAAqB,aAAAA,QAAM;AAAA,MAC/B,UAAM,gBAAAC,SAAS,MAAM,aAAa,KAAK,GAAG,WAAW;AAAA,MACrD,CAAC;AAAA,IACH;AAEA,UAAM,cAAc,CAAC,MAA0C;AAC7D,yBAAmB,OAAO;AAC1B,mBAAa,IAAI;AACjB,yCAAU;AAAA,IACZ;AAEA,UAAM,aAAa,CAAC,MAA0C;AAC5D,uCAAS;AACT,yBAAmB;AAAA,IACrB;AAEA,iBAAAD,QAAM,UAAU,MAAM,MAAM,mBAAmB,OAAO,GAAG,CAAC,kBAAkB,CAAC;AAE7E,UAAM,eAAe,CAAC,MAA2C;AAC/D,eAAS,EAAE,OAAO,KAAK;AACvB,2CAAW;AAAA,IACb;AAEA,UAAM,aAAa,MAAM;AACvB,UAAI,SAAS,SAAS;AACpB,iBAAS,QAAQ,QAAQ;AACzB,iBAAS,EAAE;AACX,iBAAS,QAAQ,MAAM;AAAA,MACzB;AAAA,IACF;AAEA,UAAM,YAAY,MAAM,SAAS,MAAM,aAAa;AACpD,UAAM,SAAS,aAAa,QAAQ,YAAY;AAChD,UAAM,WAAW,QAAQ,KAAK;AAC9B,UAAM,WAAW,QAAQ,KAAK;AAC9B,UAAM,aAAa,QAAQ,KAAK,QAAQ;AAExC,WACE,6BAAAA,QAAA,cAAC,aAAU,SACR,SACC,6BAAAA,QAAA,cAAC,SAAM,YAAwB,UAAoB,WAAsB,SAAS,QAC/E,KACH,GAGF,6BAAAA,QAAA,cAAC,WAAQ,UAAU,QAAQ,cAAc,GAAG,UACzC,gBAED,6BAAAA,QAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,SAAS;AAAA,QACT,QAAQ;AAAA,QACR,UAAU;AAAA,QACT,GAAG;AAAA,QACJ,KAAK;AAAA;AAAA,IACP,GAEC,YACC,6BAAAA,QAAA,cAAC,eAAY,SAAS,YAAY,cAAW,WAC3C,6BAAAA,QAAA,cAAC,oBAAM,kBAAN,EAAuB,MAAK,KAAI,OAAM,sCAAqC,CAC9E,IAEA,cAGF,6BAAAA,QAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,MAEC,QAAQ,6BAAAA,QAAA,cAAC,cAAQ,KAAM,IAAY;AAAA,IACtC,CACF,GAEC,aACC,6BAAAA,QAAA,cAAC,mBAAgB,WAAW,KACzB,WACC,6BAAAA,QAAA;AAAA,MAAC,oBAAM;AAAA,MAAN;AAAA,QACC,MAAK;AAAA,QACL,OAAO,SAAS,kCAAkC;AAAA;AAAA,IACpD,IACE,MACJ,6BAAAA,QAAA,cAAC,cAAW,YAAwB,YACjC,UACH,CACF,IACE,IACN;AAAA,EAEJ;AACF;AAEA,UAAU,cAAc;",
   "names": ["styled", "React", "debounce"]
 }

package/lib/cjs/styles/global.js CHANGED Viewed

@@ -52,6 +52,7 @@ const GlobalStyle = import_styled_components.createGlobalStyle`
     color: inherit;
     user-select: inherit;
     cursor: inherit;
+    outline: none;
   }
   ::selection {

package/lib/cjs/styles/global.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/styles/global.ts"],
-  "sourcesContent": ["import { createGlobalStyle } from \"styled-components\";\n\nimport { rgba } from \"./helpers\";\nimport tippyStyles from \"../components/message/Tooltip/styles\";\nimport { fontStyles } from \"../components/asorted/Text/styles\";\n\nexport type GlobalStyleProps = {\n  fontsPath?: string;\n  fontMappings?: (name: string) => string;\n};\n\nexport const GlobalStyle = createGlobalStyle<GlobalStyleProps>`\n  html {\n    box-sizing: border-box;\n  }\n\n  body {\n    font-family: Inter, sans-serif;\n    font-size: 100%;\n  }\n\n  * {\n    margin: 0;\n    padding: 0;\n    font: inherit;\n    color: inherit;\n    user-select: inherit;\n    cursor: inherit;\n  }\n\n  ::selection {\n    background: ${p => rgba(p.theme.colors.primary.c100, 0.1)};\n  }\n\n  --track-color: rgba(0,0,0,0);\n\n  ${props => (typeof props.fontsPath === \"string\" ? fontStyles : \"\")}\n\n  ${tippyStyles}\n\n  ::-webkit-scrollbar              {\n    width: 12px;\n    height: 12px;\n    background-color: rgba(0,0,0,0);\n  }\n  ::-webkit-scrollbar-button       {\n    opacity: 0;\n    height: 0;\n    width: 0;\n  }\n  ::-webkit-scrollbar-track        {\n    background-color: rgba(0,0,0,0);\n  }\n  ::-webkit-scrollbar-thumb        {\n    box-shadow: inset 0 0 0 12px var(--track-color);\n    border: 2px solid rgba(0,0,0,0);\n    border-radius: 12px;\n  }\n  ::-webkit-scrollbar-corner {\n    opacity: 0;\n  }\n`;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,+BAAkC;AAElC,qBAAqB;AACrB,oBAAwB;AACxB,IAAAA,iBAA2B;AAOpB,MAAM,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAoBT,WAAK,qBAAK,EAAE,MAAM,OAAO,QAAQ,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,IAKzD,WAAU,OAAO,MAAM,cAAc,WAAW,4BAAa,EAAG;AAAA;AAAA,IAEhE,cAAAC,OAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "sourcesContent": ["import { createGlobalStyle } from \"styled-components\";\n\nimport { rgba } from \"./helpers\";\nimport tippyStyles from \"../components/message/Tooltip/styles\";\nimport { fontStyles } from \"../components/asorted/Text/styles\";\n\nexport type GlobalStyleProps = {\n  fontsPath?: string;\n  fontMappings?: (name: string) => string;\n};\n\nexport const GlobalStyle = createGlobalStyle<GlobalStyleProps>`\n  html {\n    box-sizing: border-box;\n  }\n\n  body {\n    font-family: Inter, sans-serif;\n    font-size: 100%;\n  }\n\n  * {\n    margin: 0;\n    padding: 0;\n    font: inherit;\n    color: inherit;\n    user-select: inherit;\n    cursor: inherit;\n    outline: none;\n  }\n\n  ::selection {\n    background: ${p => rgba(p.theme.colors.primary.c100, 0.1)};\n  }\n\n  --track-color: rgba(0,0,0,0);\n\n  ${props => (typeof props.fontsPath === \"string\" ? fontStyles : \"\")}\n\n  ${tippyStyles}\n\n  ::-webkit-scrollbar              {\n    width: 12px;\n    height: 12px;\n    background-color: rgba(0,0,0,0);\n  }\n  ::-webkit-scrollbar-button       {\n    opacity: 0;\n    height: 0;\n    width: 0;\n  }\n  ::-webkit-scrollbar-track        {\n    background-color: rgba(0,0,0,0);\n  }\n  ::-webkit-scrollbar-thumb        {\n    box-shadow: inset 0 0 0 12px var(--track-color);\n    border: 2px solid rgba(0,0,0,0);\n    border-radius: 12px;\n  }\n  ::-webkit-scrollbar-corner {\n    opacity: 0;\n  }\n`;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,+BAAkC;AAElC,qBAAqB;AACrB,oBAAwB;AACxB,IAAAA,iBAA2B;AAOpB,MAAM,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAqBT,WAAK,qBAAK,EAAE,MAAM,OAAO,QAAQ,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,IAKzD,WAAU,OAAO,MAAM,cAAc,WAAW,4BAAa,EAAG;AAAA;AAAA,IAEhE,cAAAC,OAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
   "names": ["import_styles", "tippyStyles"]
 }

package/lib/components/form/SelectInput/VirtualMenuList.d.ts ADDED Viewed

@@ -0,0 +1,8 @@
+import React from "react";
+import { GroupBase, MenuListProps } from "react-select";
+export type RowProps = React.PropsWithChildren<{
+    style: React.CSSProperties;
+}>;
+export declare const VirtualRow: React.MemoExoticComponent<({ style, children }: RowProps) => React.JSX.Element>;
+export declare function VirtualMenuList<O = unknown, M extends boolean = false, G extends GroupBase<O> = GroupBase<O>>(props: MenuListProps<O, M, G>): React.ReactElement;
+//# sourceMappingURL=VirtualMenuList.d.ts.map

package/lib/components/form/SelectInput/VirtualMenuList.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"VirtualMenuList.d.ts","sourceRoot":"","sources":["../../../../src/components/form/SelectInput/VirtualMenuList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAChE,OAAO,EAAc,SAAS,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAIpE,MAAM,MAAM,QAAQ,GAAG,KAAK,CAAC,iBAAiB,CAAC;IAAE,KAAK,EAAE,KAAK,CAAC,aAAa,CAAA;CAAE,CAAC,CAAC;AAC/E,eAAO,MAAM,UAAU,kDAA8B,QAAQ,uBAE3D,CAAC;AAEH,wBAAgB,eAAe,CAC7B,CAAC,GAAG,OAAO,EACX,CAAC,SAAS,OAAO,GAAG,KAAK,EACzB,CAAC,SAAS,SAAS,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC,CAAC,CAAC,EACrC,KAAK,EAAE,aAAa,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,GAAG,KAAK,CAAC,YAAY,CAmEnD"}

package/lib/components/form/SelectInput/VirtualMenuList.js ADDED Viewed

@@ -0,0 +1,41 @@
+import React, { memo, useMemo, useRef, useEffect } from "react";
+import { components } from "react-select";
+import { FixedSizeList as List } from "react-window";
+export const VirtualRow = memo(({ style, children }) => (React.createElement("div", { style: style }, children)));
+export function VirtualMenuList(props) {
+    const { children, options, maxHeight, getValue, getStyles, selectProps } = props;
+    const { noOptionsMessage, rowHeight = 0 } = selectProps;
+    const listRef = useRef();
+    const [value] = getValue();
+    const initialOffset = options.indexOf(value) * rowHeight;
+    const childrenLength = Array.isArray(children) ? children.length : 0;
+    const minHeight = Math.min(maxHeight, rowHeight * childrenLength);
+    const menuStyle = getStyles("menuList", props);
+    const focusedIndex = useMemo(() => Array.isArray(children)
+        ? Math.max(children.findIndex((child) => React.isValidElement(child) && child.props.isFocused), 0)
+        : 0, [children]);
+    useEffect(() => {
+        listRef.current?.scrollToItem(focusedIndex);
+    }, [focusedIndex]);
+    if (!children || !Array.isArray(children))
+        return React.createElement(React.Fragment, null);
+    if (childrenLength === 0 && noOptionsMessage) {
+        return React.createElement(components.NoOptionsMessage, { ...props, innerProps: {} });
+    }
+    children.length &&
+        children.forEach((node) => {
+            if (!node || !React.isValidElement(node))
+                return;
+            delete node.props.innerProps.onMouseMove; // NB: Removes lag on hover, see https://github.com/JedWatson/react-select/issues/3128#issuecomment-433834170
+            delete node.props.innerProps.onMouseOver;
+        });
+    return (React.createElement("div", { style: { ...menuStyle, maxHeight: "auto" }, onWheelCapture: e =>
+        /*
+          This event causes issues with react-window.
+          react-select logic is based on whether the bottom/top of the list has been reached
+          but with virtual lists it just does not work and prevents scrolling…
+        */
+        e.stopPropagation() },
+        React.createElement(List, { ref: listRef, width: "100%", height: minHeight, overscanCount: 50, itemCount: childrenLength, itemSize: rowHeight, initialScrollOffset: initialOffset }, ({ index, style }) => React.createElement(VirtualRow, { style: style }, children[index]))));
+}
+//# sourceMappingURL=VirtualMenuList.js.map

package/lib/components/form/SelectInput/VirtualMenuList.js.map ADDED Viewed

@@ -0,0 +1 @@

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

package/lib/pre-ldls/components/TextInput/TextInput.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/TextInput/TextInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAe1B,KAAK,gBAAgB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,OAAO,GAAG,cAAc,CAAC,CAAC;AAEtF,MAAM,MAAM,cAAc,GAAG,QAAQ,CACnC,gBAAgB,GAAG;IACjB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CACF,CAAC;~~AA+IF~~,eAAO,MAAM,SAAS;;;~~qBApJD~~,MAAM,SAAS;mBACjB,MAAM,SAAS;;;~~mDAwQjC~~,CAAC"}
1	+ {"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/TextInput/TextInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAe1B,KAAK,gBAAgB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,OAAO,GAAG,cAAc,CAAC,CAAC;AAEtF,MAAM,MAAM,cAAc,GAAG,QAAQ,CACnC,gBAAgB,GAAG;IACjB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CACF,CAAC;AA8IF,eAAO,MAAM,SAAS;;;qBAnJD,MAAM,SAAS;mBACjB,MAAM,SAAS;;;mDAuQjC,CAAC"}

package/lib/pre-ldls/components/TextInput/TextInput.js CHANGED Viewed

@@ -69,7 +69,6 @@ const StyledInput = styled.input `
     color: var(--colors-border-disabled-default);
     cursor: not-allowed;
   }
-  outline: none;
 `;
 const Fieldset = styled.fieldset `
   ${withTokens(COLORS_BORDER_STATUS_ERROR_DEFAULT, "colors-border-active-default", "colors-content-subdued-default-default", "colors-content-disabled", "spacing-s")}

package/lib/pre-ldls/components/TextInput/TextInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TextInput.js","sourceRoot":"","sources":["../../../../src/pre-ldls/components/TextInput/TextInput.tsx"],"names":[],"mappings":"AAAA,OAAO,QAAQ,MAAM,iBAAiB,CAAC;AACvC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACxC,OAAO,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAExC,MAAM,WAAW,GAAG,GAAG,CAAC;AAExB,MAAM,kCAAkC,GAAG,oCAAoC,CAAC;AAChF,MAAM,eAAe,GAAG,SAAS,CAAC;AAClC,MAAM,iBAAiB,GAAG,MAAM,CAAC;AACjC,MAAM,cAAc,GAAG,eAAe,eAAe,GAAG,CAAC;AACzD,MAAM,cAAc,GAAG,wBAAwB,CAAC;AAChD,MAAM,aAAa,GAAG,KAAK,CAAC;AAe5B,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,CAAA;IAC7B,UAAU,CAAC,6BAA6B,CAAC;;;;;;;YAOjC,iBAAiB;WAClB,iBAAiB;CAC3B,CAAC;AAEF,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAA;IACxB,UAAU,CAAC,aAAa,CAAC;;;;;;;CAO5B,CAAC;AAEF,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAAgE;IACtF,UAAU,CACV,kCAAkC,EAClC,8BAA8B,EAC9B,yBAAyB,EACzB,wCAAwC,EACxC,WAAW,CACZ;WACQ,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,SAAS,EAAE,EAAE,EAAE,CAC/C,UAAU;IACR,CAAC,CAAC,gCAAgC;IAClC,CAAC,CAAC,QAAQ;QACR,CAAC,CAAC,SAAS,kCAAkC,IAAI;QACjD,CAAC,CAAC,SAAS;YACT,CAAC,CAAC,qCAAqC;YACvC,CAAC,CAAC,gDAAgD;eAC7C,eAAe;oBACV,aAAa;;SAExB,cAAc;eACR,cAAc,MAAM,aAAa;CAC/C,CAAC;AAEF,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAGxB;IACE,UAAU,CACV,gCAAgC,EAChC,4CAA4C,EAC5C,UAAU,EACV,WAAW,EACX,aAAa,CACd;;;;;;;aAOU,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,EAAE,CAClC,KAAK,MAAM,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,cAAc,MACrD,QAAQ,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,cACxC,EAAE;;;CAGL,CAAC;AAEF,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,CAAA;IAC5B,UAAU,CAAC,gCAAgC,CAAC~~;;;;;;;;;;;CAW~~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"}
1	+ {"version":3,"file":"TextInput.js","sourceRoot":"","sources":["../../../../src/pre-ldls/components/TextInput/TextInput.tsx"],"names":[],"mappings":"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"}

package/lib/styles/global.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"global.d.ts","sourceRoot":"","sources":["../../src/styles/global.ts"],"names":[],"mappings":"AAMA,MAAM,MAAM,gBAAgB,GAAG;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC;CACzC,CAAC;AAEF,eAAO,MAAM,WAAW,~~8GAkDvB~~,CAAC"}
1	+ {"version":3,"file":"global.d.ts","sourceRoot":"","sources":["../../src/styles/global.ts"],"names":[],"mappings":"AAMA,MAAM,MAAM,gBAAgB,GAAG;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC;CACzC,CAAC;AAEF,eAAO,MAAM,WAAW,8GAmDvB,CAAC"}

package/lib/styles/global.js CHANGED Viewed

@@ -19,6 +19,7 @@ export const GlobalStyle = createGlobalStyle `
     color: inherit;
     user-select: inherit;
     cursor: inherit;
+    outline: none;
   }
   ::selection {

package/lib/styles/global.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"global.js","sourceRoot":"","sources":["../../src/styles/global.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEtD,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AACjC,OAAO,WAAW,MAAM,sCAAsC,CAAC;AAC/D,OAAO,EAAE,UAAU,EAAE,MAAM,mCAAmC,CAAC;AAO/D,MAAM,CAAC,MAAM,WAAW,GAAG,iBAAiB,CAAkB~~;;;;;;;;;;;;;;;;;;;;kBAoB5C~~,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,EAAE,GAAG,CAAC;;;;;IAKzD,KAAK,CAAC,EAAE,CAAC,CAAC,OAAO,KAAK,CAAC,SAAS,KAAK,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;;IAEhE,WAAW;;;;;;;;;;;;;;;;;;;;;;;CAuBd,CAAC"}
1	+ {"version":3,"file":"global.js","sourceRoot":"","sources":["../../src/styles/global.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEtD,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AACjC,OAAO,WAAW,MAAM,sCAAsC,CAAC;AAC/D,OAAO,EAAE,UAAU,EAAE,MAAM,mCAAmC,CAAC;AAO/D,MAAM,CAAC,MAAM,WAAW,GAAG,iBAAiB,CAAkB;;;;;;;;;;;;;;;;;;;;;kBAqB5C,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,EAAE,GAAG,CAAC;;;;;IAKzD,KAAK,CAAC,EAAE,CAAC,CAAC,OAAO,KAAK,CAAC,SAAS,KAAK,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;;IAEhE,WAAW;;;;;;;;;;;;;;;;;;;;;;;CAuBd,CAAC"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/react-ui",
-  "version": "0.43.0-nightly.20260110024039",
+  "version": "0.43.0",
   "description": "Ledger Live - Desktop UI",
   "author": "Ledger Wallet Team <team-live@ledger.fr>",
   "repository": {
@@ -61,7 +61,7 @@
   ],
   "dependencies": {
     "@ledgerhq/crypto-icons": "1.4.0",
-    "@tanstack/react-virtual": "3.13.16",
+    "@tanstack/react-virtual": "3.13.6",
     "@tippyjs/react": "^4.2.6",
     "color": "^4.0.0",
     "embla-carousel-autoplay": "8.4.0",
@@ -72,8 +72,9 @@
     "react-select": "^5.10.2",
     "react-spring": "8.0.27",
     "react-transition-group": "^4.4.2",
+    "react-window": "^1.8.6",
     "styled-system": "^5.1.5",
-    "@ledgerhq/icons-ui": "^0.18.0-nightly.20260110024039",
+    "@ledgerhq/icons-ui": "^0.18.0",
     "@ledgerhq/ui-shared": "^0.5.0"
   },
   "peerDependencies": {
@@ -99,18 +100,19 @@
     "@storybook/theming": "^8.6.12",
     "@svgr/core": "^5.5.0",
     "@svgr/plugin-svgo": "*",
-    "@testing-library/dom": "10.4.1",
-    "@testing-library/jest-dom": "6.9.1",
-    "@testing-library/react": "16.3.1",
+    "@testing-library/dom": "10.4.0",
+    "@testing-library/jest-dom": "6.6.3",
+    "@testing-library/react": "16.3.0",
     "@testing-library/user-event": "14.5.2",
     "@types/color": "^3.0.2",
-    "@types/jest": "30.0.0",
+    "@types/jest": "^29.5.12",
     "@types/hoist-non-react-statics": "^3.3.1",
     "@types/lodash": "4",
     "@types/react": "~18.2.21",
     "@types/react-dom": "^18.2.13",
     "@types/react-is": "^17.0.3",
     "@types/react-transition-group": "^4.4.2",
+    "@types/react-window": "^1.8.5",
     "@types/styled-components": "^5.1.14",
     "@types/styled-system": "^5.1.12",
     "@vitest/expect": "3.1.1",
@@ -122,7 +124,7 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-storybook": "^0.12.0",
     "fs-extra": "^10.0.1",
-    "jest": "30.2.0",
+    "jest": "29.7.0",
     "os-browserify": "0.3.0",
     "react": "18.3.1",
     "react-dom": "18.3.1",