@ledgerhq/react-ui 0.7.5 → 0.7.6-nightly.0

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

@@ -0,0 +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"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAyB;AAGzB,kBAAiB;AACjB,kBAAiB;AACjB,kBAAiB;AACjB,0BAAyB;AACzB,mBAAmC;AACnC,oBAAuB;AACvB,6BAAgC;AAChC,4BAA+B;AAG/B,MAAM,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA6HpB,IAAO,yBAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW;AAAA,EACX,UAAU;AAAA,IACR,OAAO,EAAE,OAAO,EAAE,SAAS;AAAA,IAC3B,YAAY,EAAE,OAAO,EAAE,SAAS;AAAA,IAChC,aAAa,EAAE,OAAO,EAAE,SAAS;AAAA,IACjC,WAAW,EAAE,OAAO,EAAE,SAAS;AAAA,IAC/B,YAAY,EAAE,MAAM;AAAA,IACpB,OAAO,EAAE,MAAM;AAAA,IACf,YAAY,EAAE,MAAM;AAAA;AAAA,EAEtB,YAAY;AAAA,IACV,MAAM;AAAA,MACJ,aAAa,EAAE,WAAW;AAAA;AAAA;AAAA;AAKhC,MAAM,UAAU;AAAA,EAGd,EAAE,OAAO,aAAa,OAAO;AAAA,EAC7B,EAAE,OAAO,cAAc,OAAO;AAAA,EAC9B,EAAE,OAAO,SAAS,OAAO;AAAA,EACzB,EAAE,OAAO,WAAW,OAAO;AAAA;AAG7B,MAAM,YAAY;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA;AAKF,MAAM,eAAe,UAAU,IAAI,CAAC,UAAW,GAAE,OAAO,OAAO,OAAO;AACtE,MAAM,cAAc,CAAC,UAA0C;AAC7D,SACE,mDAAC,sBAAD;AAAA,OACM;AAAA,IACJ,QAAQ,CAAC,EAAE,eACT,mDAAC,qBAAD;AAAA,MAAM,MAAM;AAAA,MAAG,IAAI;AAAA,MAAG,YAAW;AAAA,OAC/B,mDAAC,qBAAD;AAAA,MAAM,IAAI;AAAA,MAAG,GAAG;AAAA,MAAG,OAAO,EAAE,YAAY,MAAM,KAAK;AAAA,QACnD,mDAAC,qBAAD;AAAA,MAAM,MAAM;AAAA,MAAG,OAAO,EAAE,eAAe;AAAA,OACpC;AAAA;AAAA;AAOb,MAAM,sBAAsB,CAAC,UAAkD;AAC7E,SACE,mDAAC,sCAAD;AAAA,IACE,QAAQ,CAAC,EAAE,eACT,mDAAC,qBAAD;AAAA,MAAM,YAAW;AAAA,MAAS,OAAO,EAAE,eAAe;AAAA,OAC/C;AAAA,OAGD;AAAA;AAAA;AAKH,MAAM,UAA4C,CAAC,SAAS;AACjE,QAAM,CAAC,OAAO,YAAY,qBAAM,SAA4B;AAE5D,SACE,mDAAC,sBAAD;AAAA,IACE,SAAS;AAAA,IACT;AAAA,IACA,UAAU;AAAA,IACV,aAAY;AAAA,IACZ,aAAW;AAAA,IACX,kBAAkB,CAAC,WAAW,OAAO,MAAM,WAAW;AAAA,IACtD,YAAY,EAAE,QAAQ,aAAa,gBAAgB;AAAA,IACnD,YAAY,CAAC,MAAM,SAAS,mDAAC,qBAAD;AAAA,MAAM,IAAI;AAAA,MAAG,GAAG;AAAA,MAAG,OAAO,EAAE,YAAY,MAAM;AAAA;AAAA,IAC1E,kBAAkB,SAAS;AAAA,IAC3B,QAAQ,EAAE,YAAY,CAAC,aAAc,MAAK,UAAU,QAAQ;AAAA,OACxD;AAAA;AAAA;AAKH,MAAM,UAA4C,CAAC,SAAS;AACjE,QAAM,CAAC,OAAO,YAAY,qBAAM,SAA4B;AAE5D,SACE,mDAAC,sBAAD;AAAA,IACE;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,kBAAkB,SAAS;AAAA,OACvB;AAAA;AAAA;AAKV,QAAQ,aAAa;AAAA,EACnB,MAAM;AAAA,IACJ,aAAa;AAAA,MACX,OAAO;AAAA;AAAA;AAAA;AAKN,MAAM,cAAgD,CAAC,SAAS;AACrE,QAAM,CAAC,OAAO,YAAY,qBAAM,SAA4B;AAC5D,QAAM,QAAQ;AAEd,SACE,mDAAC,sBAAD;AAAA,IACE;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,YAAY,CAAC,UACX,mDAAC,qBAAD;AAAA,MAAM,IAAI;AAAA,OACR,mDAAC,6BAAD;AAAA,MAAc,OAAO,MAAM,aAAa,iBAAiB,MAAM,OAAO,QAAQ;AAAA;AAAA,IAGlF,aAAa,MACX,mDAAC,qBAAD;AAAA,MAAM,IAAI;AAAA,MAAG,YAAW;AAAA,MAAW,SAAS;AAAA,MAAQ,OAAM;AAAA,OAAU;AAAA,IAItE,kBAAkB,SAAS;AAAA,OACvB;AAAA;AAAA;AAKV,YAAY,aAAa;AAAA,EACvB,MAAM;AAAA,IACJ,aAAa;AAAA,MACX,OACE;AAAA;AAAA;AAAA;AAKR,MAAM,eAAe,CAAC,UAA0C;AAC9D,SACE,mDAAC,sBAAD;AAAA,OACM;AAAA,IACJ,QAAQ,CAAC,EAAE,eACT,mDAAC,qBAAD;AAAA,MAAM,MAAM;AAAA,MAAG,YAAW;AAAA,OACxB,mDAAC,qBAAD;AAAA,MAAM,YAAW;AAAA,MAAW,SAAS;AAAA,MAAa,IAAI;AAAA,OAAG,UAGzD,mDAAC,qBAAD;AAAA,MAAM,MAAM;AAAA,MAAG,gBAAe;AAAA,OAC3B,UACD,mDAAC,qBAAD;AAAA,MAAM,YAAW;AAAA,MAAW,SAAS;AAAA,MAAa,OAAM;AAAA,OAAU;AAAA;AAAA;AASvE,MAAM,gBAAkD,CAAC,SAAS;AACvE,QAAM,CAAC,OAAO,YAAY,qBAAM;AAEhC,SACE,mDAAC,sBAAD;AAAA,IACE;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,YAAY,EAAE,QAAQ;AAAA,IACtB,kBAAkB,SAAS;AAAA,OACvB;AAAA;AAAA;AAKV,cAAc,aAAa;AAAA,EACzB,MAAM;AAAA,IACJ,aAAa;AAAA,MACX,OAAO;AAAA;AAAA;AAAA;AAKN,MAAM,iBAAmD,CAAC,SAAS;AACxE,QAAM,CAAC,OAAO,YAAY,qBAAM,SAA4B;AAE5D,SACE,mDAAC,sBAAD;AAAA,IACE;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,kBAAkB,CAAC,WAAW,OAAO,UAAU;AAAA,IAC/C,kBAAkB,SAAS;AAAA,OACvB;AAAA;AAAA;AAKV,eAAe,aAAa;AAAA,EAC1B,MAAM;AAAA,IACJ,aAAa;AAAA,MACX,OACE;AAAA;AAAA;AAAA;AAKR,MAAM,cAAc,IAAI,MAAM,KAAO,KAAK,GAAG,IAAI,CAAC,GAAG,MAAO,GAAE,OAAO,KAAK,GAAG,OAAO,KAAK;AAClF,MAAM,cAAgD,CAAC,SAAS;AACrE,QAAM,CAAC,OAAO,YAAY,qBAAM,SAA4B;AAE5D,SACE,mDAAC,sBAAD;AAAA,IACE,SAAS;AAAA,IACT;AAAA,IACA,UAAU;AAAA,IACV,YAAY;AAAA,MACV,UAAU;AAAA;AAAA,IAEZ,kBAAkB,SAAS;AAAA,OACvB;AAAA;AAAA;AAKV,YAAY,aAAa;AAAA,EACvB,MAAM;AAAA,IACJ,aAAa;AAAA,MACX,OACE;AAAA;AAAA;AAAA;AAKD,MAAM,cAAsD,CAAC,SAAS;AAC3E,QAAM,CAAC,OAAO,YAAY,qBAAM,SAAgC;AAEhE,SACE,mDAAC,sBAAD;AAAA,IACE,SAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,kBAAkB,SAAS;AAAA,OACvB;AAAA;AAAA;AAKV,YAAY,aAAa;AAAA,EACvB,MAAM;AAAA,IACJ,aAAa;AAAA,MACX,OAAO;AAAA;AAAA;AAAA;",
+  "names": []
+}

package/lib/cjs/components/form/SelectInput/ValueContainer.js

@@ -0,0 +1,48 @@
+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 __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  __markAsModule(target);
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && key !== "default")
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toModule = (module2) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", module2 && module2.__esModule && "default" in module2 ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+__export(exports, {
+  ValueContainer: () => ValueContainer,
+  getStyles: () => getStyles
+});
+var import_react = __toModule(require("react"));
+var import_react_select = __toModule(require("react-select"));
+var import_Text = __toModule(require("../../asorted/Text"));
+function getStyles() {
+  return (provided) => ({
+    ...provided,
+    padding: 0
+  });
+}
+function ValueContainer(props) {
+  const color = props.selectProps.isDisabled ? "neutral.c60" : "neutral.c100";
+  return /* @__PURE__ */ import_react.default.createElement(import_react_select.components.ValueContainer, {
+    ...props
+  }, /* @__PURE__ */ import_react.default.createElement(import_Text.default, {
+    as: "div",
+    variant: "paragraph",
+    color,
+    style: { display: "inherit", alignItems: "center" }
+  }, props.render ? props.render(props) : props.children));
+}
+//# sourceMappingURL=ValueContainer.js.map

package/lib/cjs/components/form/SelectInput/ValueContainer.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/form/SelectInput/ValueContainer.tsx"],
+  "sourcesContent": ["import React from \"react\";\nimport { components, GroupBase, StylesConfig, ValueContainerProps } from \"react-select\";\nimport Text from \"../../asorted/Text\";\n\nexport function getStyles<\n  O = unknown,\n  M extends boolean = false,\n  G extends GroupBase<O> = GroupBase<O>,\n>(): StylesConfig<O, M, G>[\"valueContainer\"] {\n  return (provided) => ({\n    ...provided,\n    padding: 0,\n  });\n}\n\ntype ExtraProps<O = unknown, M extends boolean = false, G extends GroupBase<O> = GroupBase<O>> = {\n  /* A render function to customize the contents. */\n  render?: (props: React.PropsWithChildren<ValueContainerProps<O, M, G>>) => React.ReactNode;\n};\nexport function ValueContainer<\n  O = unknown,\n  M extends boolean = false,\n  G extends GroupBase<O> = GroupBase<O>,\n>(props: ValueContainerProps<O, M, G> & ExtraProps<O, M, G>): JSX.Element {\n  const color = props.selectProps.isDisabled ? \"neutral.c60\" : \"neutral.c100\";\n  return (\n    <components.ValueContainer {...props}>\n      <Text\n        as=\"div\"\n        variant=\"paragraph\"\n        color={color}\n        style={{ display: \"inherit\", alignItems: \"center\" }}\n      >\n        {props.render ? props.render(props) : props.children}\n      </Text>\n    </components.ValueContainer>\n  );\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,0BAAyE;AACzE,kBAAiB;AAEV,qBAIsC;AAC3C,SAAO,CAAC,aAAc;AAAA,OACjB;AAAA,IACH,SAAS;AAAA;AAAA;AAQN,wBAIL,OAAwE;AACxE,QAAM,QAAQ,MAAM,YAAY,aAAa,gBAAgB;AAC7D,SACE,mDAAC,+BAAW,gBAAZ;AAAA,OAA+B;AAAA,KAC7B,mDAAC,qBAAD;AAAA,IACE,IAAG;AAAA,IACH,SAAQ;AAAA,IACR;AAAA,IACA,OAAO,EAAE,SAAS,WAAW,YAAY;AAAA,KAExC,MAAM,SAAS,MAAM,OAAO,SAAS,MAAM;AAAA;",
+  "names": []
+}

package/lib/cjs/components/form/SelectInput/VirtualMenuList.js

@@ -0,0 +1,75 @@
+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 __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  __markAsModule(target);
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && key !== "default")
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toModule = (module2) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", module2 && module2.__esModule && "default" in module2 ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+__export(exports, {
+  VirtualMenuList: () => VirtualMenuList,
+  VirtualRow: () => VirtualRow
+});
+var import_react = __toModule(require("react"));
+var import_react_select = __toModule(require("react-select"));
+var import_react_window = __toModule(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)(() => {
+    listRef.current?.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) => 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

@@ -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,mBAAwD;AACxD,0BAAqD;AACrD,0BAAqD;AAI9C,MAAM,aAAa,uBAAK,CAAC,EAAE,OAAO,eACvC,mDAAC,OAAD;AAAA,EAAK;AAAA,GAAe;AAGf,yBAIL,OAAmD;AACnD,QAAM,EAAE,UAAU,SAAS,WAAW,UAAU,WAAW,gBAAgB;AAC3E,QAAM,EAAE,kBAAkB,YAAY,MAAM;AAE5C,QAAM,UAAU;AAChB,QAAM,CAAC,SAAS;AAChB,QAAM,gBAAgB,QAAQ,QAAQ,SAAS;AAC/C,QAAM,iBAAiB,MAAM,QAAQ,YAAY,SAAS,SAAS;AACnE,QAAM,YAAY,KAAK,IAAI,WAAW,YAAY;AAElD,QAAM,YAAY,UAAU,YAAY;AAExC,QAAM,eAAe,0BACnB,MACE,MAAM,QAAQ,YACV,KAAK,IACH,SAAS,UACP,CAAC,UAA2B,qBAAM,eAAe,UAAU,MAAM,MAAM,YAEzE,KAEF,GACN,CAAC;AAGH,8BAAU,MAAM;AACd,YAAQ,SAAS,aAAa;AAAA,KAC7B,CAAC;AAEJ,MAAI,CAAC,YAAY,CAAC,MAAM,QAAQ;AAAW,WAAO;AAElD,MAAI,mBAAmB,KAAK,kBAAkB;AAC5C,WAAO,mDAAC,+BAAW,kBAAZ;AAAA,SAAiC,KAAK,OAAO,YAAY;AAAA;AAAA;AAGlE,WAAS,UACP,SAAS,QAAQ,CAAC,SAA0B;AAC1C,QAAI,CAAC,QAAQ,CAAC,qBAAM,eAAe;AAAO;AAC1C,WAAO,KAAK,MAAM,WAAW;AAC7B,WAAO,KAAK,MAAM,WAAW;AAAA;AAGjC,SACE,mDAAC,OAAD;AAAA,IACE,OAAO,KAAM,WAAmC,WAAW;AAAA,IAC3D,gBAAgB,CAAC,MAMf,EAAE;AAAA,KAGJ,mDAAC,mCAAD;AAAA,IACE,KAAK;AAAA,IACL,OAAM;AAAA,IACN,QAAQ;AAAA,IACR,eAAe;AAAA,IACf,WAAW;AAAA,IACX,UAAU;AAAA,IACV,qBAAqB;AAAA,KAEpB,CAAC,EAAE,OAAO,YAAY,mDAAC,YAAD;AAAA,IAAY;AAAA,KAAe,SAAS;AAAA;",
+  "names": []
+}

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

@@ -0,0 +1,115 @@
+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 __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  __markAsModule(target);
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && key !== "default")
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toModule = (module2) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", module2 && module2.__esModule && "default" in module2 ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+__export(exports, {
+  default: () => SelectInput_default
+});
+var import_react = __toModule(require("react"));
+var import_react_select = __toModule(require("react-select"));
+var import_styled_components = __toModule(require("styled-components"));
+var DropdownIndicatorModule = __toModule(require("./DropdownIndicator"));
+var ValueContainerModule = __toModule(require("./ValueContainer"));
+var ControlModule = __toModule(require("./Control"));
+var MenuListModule = __toModule(require("./MenuList"));
+var OptionModule = __toModule(require("./Option"));
+var import_IndicatorsContainer = __toModule(require("./IndicatorsContainer"));
+var import_BaseInput = __toModule(require("../BaseInput"));
+const stylesFn = (theme) => ({
+  control: ControlModule.getStyles(theme),
+  valueContainer: ValueContainerModule.getStyles(),
+  dropdownIndicator: DropdownIndicatorModule.getStyles(),
+  menuList: MenuListModule.getStyles(theme),
+  option: OptionModule.getStyles(),
+  input: (provided) => ({
+    ...provided,
+    color: theme.colors.neutral.c100
+  }),
+  placeholder: (provided) => ({
+    ...provided,
+    color: theme.colors.neutral.c60
+  }),
+  singleValue: (provided) => ({
+    ...provided,
+    color: "inherit"
+  }),
+  multiValue: (provided) => ({
+    ...provided,
+    backgroundColor: theme.colors.primary.c20,
+    borderRadius: theme.radii[1]
+  }),
+  multiValueLabel: (provided) => ({
+    ...provided,
+    color: theme.colors.neutral.c100
+  }),
+  multiValueRemove: (provided) => ({
+    ...provided,
+    cursor: "pointer",
+    ":hover": {
+      color: theme.colors.error.c100,
+      backgroundColor: theme.colors.error.c30
+    }
+  }),
+  menu: (provided) => ({
+    ...provided,
+    border: 0,
+    boxShadow: "none",
+    background: "none"
+  })
+});
+function SelectInput({
+  error,
+  rowHeight = 48,
+  unwrapped,
+  extendStyles,
+  ...props
+}) {
+  const theme = (0, import_styled_components.useTheme)();
+  const styles = (0, import_react.useMemo)(() => extendStyles ? extendStyles(stylesFn(theme)) : stylesFn(theme), [theme, extendStyles]);
+  const { isDisabled, components = {} } = props;
+  const innerContent = /* @__PURE__ */ import_react.default.createElement(import_react_select.default, {
+    ...props,
+    styles: {
+      ...styles,
+      ...props.styles
+    },
+    classNamePrefix: "react-select",
+    components: {
+      Control: ControlModule.Control,
+      ValueContainer: ValueContainerModule.ValueContainer,
+      IndicatorsContainer: import_IndicatorsContainer.IndicatorsContainer,
+      DropdownIndicator: DropdownIndicatorModule.DropdownIndicator,
+      MenuList: MenuListModule.MenuList,
+      Option: OptionModule.Option,
+      IndicatorSeparator: null,
+      ...components
+    },
+    rowHeight
+  });
+  if (unwrapped)
+    return innerContent;
+  return /* @__PURE__ */ import_react.default.createElement("div", null, innerContent, error && !isDisabled && /* @__PURE__ */ import_react.default.createElement(import_BaseInput.InputErrorContainer, {
+    variant: "paragraph"
+  }, error));
+}
+var SelectInput_default = (0, import_react.memo)(SelectInput);
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/form/SelectInput/index.tsx"],
+  "sourcesContent": ["import React, { memo, useMemo } from \"react\";\nimport Select, {\n  Props as SelectProps,\n  ControlProps,\n  IndicatorsContainerProps,\n  GroupBase,\n  StylesConfig,\n} from \"react-select\";\nimport { DefaultTheme, useTheme } from \"styled-components\";\nimport * as DropdownIndicatorModule from \"./DropdownIndicator\";\nimport * as ValueContainerModule from \"./ValueContainer\";\nimport * as ControlModule from \"./Control\";\nimport * as MenuListModule from \"./MenuList\";\nimport * as OptionModule from \"./Option\";\nimport { IndicatorsContainer } from \"./IndicatorsContainer\";\nimport { InputErrorContainer } from \"../BaseInput\";\n\nexport type SelfProps<O, M extends boolean, G extends GroupBase<O>> = {\n  /* An error which will be displayed below the component and will change the style. */\n  error?: string;\n  /* A component which will be rendered on the left side of the select. */\n  renderLeft?: (props: ControlProps<O, M, G>) => React.ReactNode;\n  /* A component which will be rendered on the right side of the select, before the indicators. */\n  renderRight?: (props: IndicatorsContainerProps<O, M, G>) => React.ReactNode;\n  /* This value is used to calculate the height of the menu list when dealing with virtual lists. */\n  rowHeight?: number;\n  /* Removes all wrappers when rendering the element. */\n  unwrapped?: boolean;\n  /* Extends defined styles. */\n  extendStyles?: (styles: StylesConfig<O, M, G>) => StylesConfig<O, M, G>;\n};\nexport type Props<\n  O = unknown,\n  M extends boolean = false,\n  G extends GroupBase<O> = GroupBase<O>,\n> = SelectProps<O, M, G> & SelfProps<O, M, G>;\n\nconst stylesFn = <O, M extends boolean, G extends GroupBase<O>>(\n  theme: DefaultTheme,\n): StylesConfig<O, M, G> => ({\n  control: ControlModule.getStyles(theme),\n  valueContainer: ValueContainerModule.getStyles(),\n  dropdownIndicator: DropdownIndicatorModule.getStyles(),\n  menuList: MenuListModule.getStyles(theme),\n  option: OptionModule.getStyles(),\n  input: (provided) => ({\n    ...provided,\n    color: theme.colors.neutral.c100,\n  }),\n  placeholder: (provided) => ({\n    ...provided,\n    color: theme.colors.neutral.c60,\n  }),\n  singleValue: (provided) => ({\n    ...provided,\n    color: \"inherit\",\n  }),\n  multiValue: (provided) => ({\n    ...provided,\n    backgroundColor: theme.colors.primary.c20,\n    borderRadius: theme.radii[1],\n  }),\n  multiValueLabel: (provided) => ({\n    ...provided,\n    color: theme.colors.neutral.c100,\n  }),\n  multiValueRemove: (provided) => ({\n    ...provided,\n    cursor: \"pointer\",\n    \":hover\": {\n      color: theme.colors.error.c100,\n      backgroundColor: theme.colors.error.c30,\n    },\n  }),\n  menu: (provided) => ({\n    ...provided,\n    border: 0,\n    boxShadow: \"none\",\n    background: \"none\",\n  }),\n});\n\nfunction SelectInput<O, M extends boolean, G extends GroupBase<O>>({\n  error,\n  rowHeight = 48,\n  unwrapped,\n  extendStyles,\n  ...props\n}: Props<O, M, G>): JSX.Element {\n  const theme = useTheme();\n  const styles = useMemo(\n    () => (extendStyles ? extendStyles(stylesFn<O, M, G>(theme)) : stylesFn<O, M, G>(theme)),\n    [theme, extendStyles],\n  );\n  const { isDisabled, components = {} } = props;\n\n  const innerContent = (\n    <Select\n      {...props}\n      styles={{\n        ...styles,\n        ...props.styles,\n      }}\n      classNamePrefix=\"react-select\"\n      components={{\n        Control: ControlModule.Control,\n        ValueContainer: ValueContainerModule.ValueContainer,\n        IndicatorsContainer,\n        DropdownIndicator: DropdownIndicatorModule.DropdownIndicator,\n        MenuList: MenuListModule.MenuList,\n        Option: OptionModule.Option,\n        IndicatorSeparator: null,\n        ...components,\n      }}\n      // @ts-expect-error We want to be able to pass extra props here\u2026\n      rowHeight={rowHeight}\n    />\n  );\n\n  if (unwrapped) return innerContent;\n\n  return (\n    <div>\n      {innerContent}\n      {error && !isDisabled && (\n        <InputErrorContainer variant={\"paragraph\"}>{error}</InputErrorContainer>\n      )}\n    </div>\n  );\n}\n\nexport default memo(SelectInput) as typeof SelectInput;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA,mBAAqC;AACrC,0BAMO;AACP,+BAAuC;AACvC,8BAAyC;AACzC,2BAAsC;AACtC,oBAA+B;AAC/B,qBAAgC;AAChC,mBAA8B;AAC9B,iCAAoC;AACpC,uBAAoC;AAsBpC,MAAM,WAAW,CACf,UAC2B;AAAA,EAC3B,SAAS,cAAc,UAAU;AAAA,EACjC,gBAAgB,qBAAqB;AAAA,EACrC,mBAAmB,wBAAwB;AAAA,EAC3C,UAAU,eAAe,UAAU;AAAA,EACnC,QAAQ,aAAa;AAAA,EACrB,OAAO,CAAC,aAAc;AAAA,OACjB;AAAA,IACH,OAAO,MAAM,OAAO,QAAQ;AAAA;AAAA,EAE9B,aAAa,CAAC,aAAc;AAAA,OACvB;AAAA,IACH,OAAO,MAAM,OAAO,QAAQ;AAAA;AAAA,EAE9B,aAAa,CAAC,aAAc;AAAA,OACvB;AAAA,IACH,OAAO;AAAA;AAAA,EAET,YAAY,CAAC,aAAc;AAAA,OACtB;AAAA,IACH,iBAAiB,MAAM,OAAO,QAAQ;AAAA,IACtC,cAAc,MAAM,MAAM;AAAA;AAAA,EAE5B,iBAAiB,CAAC,aAAc;AAAA,OAC3B;AAAA,IACH,OAAO,MAAM,OAAO,QAAQ;AAAA;AAAA,EAE9B,kBAAkB,CAAC,aAAc;AAAA,OAC5B;AAAA,IACH,QAAQ;AAAA,IACR,UAAU;AAAA,MACR,OAAO,MAAM,OAAO,MAAM;AAAA,MAC1B,iBAAiB,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA,EAGxC,MAAM,CAAC,aAAc;AAAA,OAChB;AAAA,IACH,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,YAAY;AAAA;AAAA;AAIhB,qBAAmE;AAAA,EACjE;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,KACG;AAAA,GAC2B;AAC9B,QAAM,QAAQ;AACd,QAAM,SAAS,0BACb,MAAO,eAAe,aAAa,SAAkB,UAAU,SAAkB,QACjF,CAAC,OAAO;AAEV,QAAM,EAAE,YAAY,aAAa,OAAO;AAExC,QAAM,eACJ,mDAAC,6BAAD;AAAA,OACM;AAAA,IACJ,QAAQ;AAAA,SACH;AAAA,SACA,MAAM;AAAA;AAAA,IAEX,iBAAgB;AAAA,IAChB,YAAY;AAAA,MACV,SAAS,cAAc;AAAA,MACvB,gBAAgB,qBAAqB;AAAA,MACrC;AAAA,MACA,mBAAmB,wBAAwB;AAAA,MAC3C,UAAU,eAAe;AAAA,MACzB,QAAQ,aAAa;AAAA,MACrB,oBAAoB;AAAA,SACjB;AAAA;AAAA,IAGL;AAAA;AAIJ,MAAI;AAAW,WAAO;AAEtB,SACE,mDAAC,OAAD,MACG,cACA,SAAS,CAAC,cACT,mDAAC,sCAAD;AAAA,IAAqB,SAAS;AAAA,KAAc;AAAA;AAMpD,IAAO,sBAAQ,uBAAK;",
+  "names": []
+}

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

@@ -0,0 +1,191 @@
+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 __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  __markAsModule(target);
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && key !== "default")
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toModule = (module2) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", module2 && module2.__esModule && "default" in module2 ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+__export(exports, {
+  Split: () => Split,
+  default: () => SplitInput_stories_default
+});
+var import_react = __toModule(require("react"));
+var import_react_select = __toModule(require("react-select"));
+var import_index = __toModule(require("./index"));
+var import_BaseInput = __toModule(require("../BaseInput"));
+var import_QuantityInput = __toModule(require("../QuantityInput"));
+var import_QrCodeInput = __toModule(require("../QrCodeInput"));
+var import_SelectInput = __toModule(require("../SelectInput"));
+var import_Flex = __toModule(require("../../layout/Flex"));
+var import_Text = __toModule(require("../../asorted/Text"));
+var SplitInput_stories_default = {
+  title: "Form/Input/Split",
+  component: import_index.default,
+  argTypes: {
+    value: { table: { disable: true } },
+    renderLeft: { table: { disable: true } },
+    renderRight: { table: { disable: true } },
+    rowHeight: { table: { disable: true } },
+    isDisabled: { table: { disable: true } },
+    disabled: { type: "boolean" },
+    error: { type: "string" }
+  }
+};
+const options = [
+  { value: "chocolate", label: "\u{1F36B}\u2003Chocolate" },
+  { value: "strawberry", label: "\u{1F353}\u2003Strawberry" },
+  { value: "lemon", label: "\u{1F34B}\u2003Lemon" },
+  { value: "vanilla", label: "\u{1F366}\u2003Vanilla" }
+];
+const Label = ({ left, right }) => /* @__PURE__ */ import_react.default.createElement(import_Flex.default, {
+  justifyContent: "space-between",
+  mt: 8,
+  px: 6
+}, /* @__PURE__ */ import_react.default.createElement(import_Text.default, {
+  fontWeight: "semiBold",
+  variant: "small"
+}, `<${left} />`), /* @__PURE__ */ import_react.default.createElement(import_Text.default, {
+  fontWeight: "semiBold",
+  variant: "small"
+}, `<${right} />`));
+const selectStyles = {
+  container: (provided, state) => ({
+    ...provided,
+    height: "100%",
+    cursor: state.isDisabled ? "not-allowed" : "text",
+    pointerEvents: void 0
+  }),
+  control: (_, state) => ({
+    display: "flex",
+    alignItems: "center",
+    height: "100%",
+    padding: "0 20px",
+    pointerEvents: state.isDisabled ? "none" : void 0
+  })
+};
+const Split = (args) => {
+  const [leftValue1, setLeftValue1] = import_react.default.useState(null);
+  const [rightValue1, setRightValue1] = import_react.default.useState("");
+  const [leftValue2, setLeftValue2] = import_react.default.useState(null);
+  const [rightValue2, setRightValue2] = import_react.default.useState("");
+  const [leftValue3, setLeftValue3] = import_react.default.useState(null);
+  const [rightValue3, setRightValue3] = import_react.default.useState("");
+  const [leftValue4, setLeftValue4] = import_react.default.useState("");
+  const [rightValue4, setRightValue4] = import_react.default.useState("");
+  return /* @__PURE__ */ import_react.default.createElement(import_Flex.default, {
+    flexDirection: "column",
+    rowGap: 3
+  }, /* @__PURE__ */ import_react.default.createElement(Label, {
+    left: "SelectInput",
+    right: "Input"
+  }), /* @__PURE__ */ import_react.default.createElement(import_index.default, {
+    ...args,
+    renderLeft: (props) => /* @__PURE__ */ import_react.default.createElement(import_SelectInput.default, {
+      value: leftValue1,
+      options,
+      placeholder: "Left",
+      unwrapped: true,
+      onChange: setLeftValue1,
+      components: {
+        Control: import_react_select.components.Control
+      },
+      styles: selectStyles,
+      ...props
+    }),
+    renderRight: (props) => /* @__PURE__ */ import_react.default.createElement(import_BaseInput.default, {
+      value: rightValue1,
+      placeholder: "Right",
+      textAlign: "right",
+      unwrapped: true,
+      onChange: setRightValue1,
+      ...props
+    })
+  }), /* @__PURE__ */ import_react.default.createElement(Label, {
+    left: "SelectInput",
+    right: "QuantityInput"
+  }), /* @__PURE__ */ import_react.default.createElement(import_index.default, {
+    ...args,
+    renderLeft: (props) => /* @__PURE__ */ import_react.default.createElement(import_SelectInput.default, {
+      value: leftValue2,
+      options,
+      placeholder: "Left",
+      unwrapped: true,
+      onChange: setLeftValue2,
+      components: {
+        Control: import_react_select.components.Control
+      },
+      styles: selectStyles,
+      ...props
+    }),
+    renderRight: (props) => /* @__PURE__ */ import_react.default.createElement(import_QuantityInput.default, {
+      value: rightValue2,
+      placeholder: "Right",
+      textAlign: "right",
+      unwrapped: true,
+      onChange: setRightValue2,
+      ...props
+    })
+  }), /* @__PURE__ */ import_react.default.createElement(Label, {
+    left: "SelectInput",
+    right: "QrCodeInput"
+  }), /* @__PURE__ */ import_react.default.createElement(import_index.default, {
+    ...args,
+    renderLeft: (props) => /* @__PURE__ */ import_react.default.createElement(import_SelectInput.default, {
+      value: leftValue3,
+      options,
+      placeholder: "Left",
+      unwrapped: true,
+      onChange: setLeftValue3,
+      components: {
+        Control: import_react_select.components.Control
+      },
+      styles: selectStyles,
+      ...props
+    }),
+    renderRight: (props) => /* @__PURE__ */ import_react.default.createElement(import_QrCodeInput.default, {
+      value: rightValue3,
+      placeholder: "Right",
+      textAlign: "right",
+      unwrapped: true,
+      onChange: setRightValue3,
+      ...props
+    })
+  }), /* @__PURE__ */ import_react.default.createElement(Label, {
+    left: "Input",
+    right: "Input"
+  }), /* @__PURE__ */ import_react.default.createElement(import_index.default, {
+    ...args,
+    renderLeft: (props) => /* @__PURE__ */ import_react.default.createElement(import_BaseInput.default, {
+      value: leftValue4,
+      placeholder: "Left",
+      unwrapped: true,
+      onChange: setLeftValue4,
+      ...props
+    }),
+    renderRight: (props) => /* @__PURE__ */ import_react.default.createElement(import_BaseInput.default, {
+      value: rightValue4,
+      placeholder: "Right",
+      textAlign: "right",
+      unwrapped: true,
+      onChange: setRightValue4,
+      ...props
+    })
+  }));
+};
+//# sourceMappingURL=SplitInput.stories.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/form/SplitInput/SplitInput.stories.tsx"],
+  "sourcesContent": ["import React from \"react\";\nimport { components, StylesConfig } from \"react-select\";\nimport SplitInput, { Props } from \"./index\";\nimport Input from \"../BaseInput\";\nimport QuantityInput from \"../QuantityInput\";\nimport QrCodeInput from \"../QrCodeInput\";\nimport SelectInput, { Props as SelectInputProps } from \"../SelectInput\";\nimport FlexBox from \"../../layout/Flex\";\nimport Text from \"../../asorted/Text\";\n\nexport default {\n  title: \"Form/Input/Split\",\n  component: SplitInput,\n  argTypes: {\n    value: { table: { disable: true } },\n    renderLeft: { table: { disable: true } },\n    renderRight: { table: { disable: true } },\n    rowHeight: { table: { disable: true } },\n    isDisabled: { table: { disable: true } },\n    disabled: { type: \"boolean\" },\n    error: { type: \"string\" },\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 Label = ({ left, right }: { left: string; right: string }) => (\n  <FlexBox justifyContent=\"space-between\" mt={8} px={6}>\n    <Text fontWeight=\"semiBold\" variant={\"small\"}>\n      {`<${left} />`}\n    </Text>\n    <Text fontWeight=\"semiBold\" variant={\"small\"}>\n      {`<${right} />`}\n    </Text>\n  </FlexBox>\n);\n\nconst selectStyles: StylesConfig<Option> = {\n  container: (provided, state) => ({\n    ...provided,\n    height: \"100%\",\n    cursor: state.isDisabled ? \"not-allowed\" : \"text\",\n    pointerEvents: undefined,\n  }),\n  control: (_, state) => ({\n    display: \"flex\",\n    alignItems: \"center\",\n    height: \"100%\",\n    padding: \"0 20px\",\n    pointerEvents: state.isDisabled ? \"none\" : undefined,\n  }),\n};\n\ntype Option = typeof options[0];\nexport const Split = (args: Props): React.ReactNode => {\n  const [leftValue1, setLeftValue1] = React.useState<Option | null>(null);\n  const [rightValue1, setRightValue1] = React.useState<string>(\"\");\n  const [leftValue2, setLeftValue2] = React.useState<Option | null>(null);\n  const [rightValue2, setRightValue2] = React.useState<string>(\"\");\n  const [leftValue3, setLeftValue3] = React.useState<Option | null>(null);\n  const [rightValue3, setRightValue3] = React.useState<string>(\"\");\n  const [leftValue4, setLeftValue4] = React.useState<string>(\"\");\n  const [rightValue4, setRightValue4] = React.useState<string>(\"\");\n\n  return (\n    <FlexBox flexDirection=\"column\" rowGap={3}>\n      <Label left=\"SelectInput\" right=\"Input\" />\n      <SplitInput\n        {...args}\n        renderLeft={(props: SelectInputProps<Option>) => (\n          <SelectInput\n            value={leftValue1}\n            options={options}\n            placeholder=\"Left\"\n            unwrapped\n            onChange={setLeftValue1}\n            components={{\n              Control: components.Control,\n            }}\n            styles={selectStyles}\n            {...props}\n          />\n        )}\n        renderRight={(props) => (\n          <Input\n            value={rightValue1}\n            placeholder=\"Right\"\n            textAlign=\"right\"\n            unwrapped\n            onChange={setRightValue1}\n            {...props}\n          />\n        )}\n      />\n      <Label left=\"SelectInput\" right=\"QuantityInput\" />\n      <SplitInput\n        {...args}\n        renderLeft={(props: SelectInputProps<Option>) => (\n          <SelectInput\n            value={leftValue2}\n            options={options}\n            placeholder=\"Left\"\n            unwrapped\n            onChange={setLeftValue2}\n            components={{\n              Control: components.Control,\n            }}\n            styles={selectStyles}\n            {...props}\n          />\n        )}\n        renderRight={(props) => (\n          <QuantityInput\n            value={rightValue2}\n            placeholder=\"Right\"\n            textAlign=\"right\"\n            unwrapped\n            onChange={setRightValue2}\n            {...props}\n          />\n        )}\n      />\n      <Label left=\"SelectInput\" right=\"QrCodeInput\" />\n      <SplitInput\n        {...args}\n        renderLeft={(props: SelectInputProps<Option>) => (\n          <SelectInput\n            value={leftValue3}\n            options={options}\n            placeholder=\"Left\"\n            unwrapped\n            onChange={setLeftValue3}\n            components={{\n              Control: components.Control,\n            }}\n            styles={selectStyles}\n            {...props}\n          />\n        )}\n        renderRight={(props) => (\n          <QrCodeInput\n            value={rightValue3}\n            placeholder=\"Right\"\n            textAlign=\"right\"\n            unwrapped\n            onChange={setRightValue3}\n            {...props}\n          />\n        )}\n      />\n      <Label left=\"Input\" right=\"Input\" />\n      <SplitInput\n        {...args}\n        renderLeft={(props) => (\n          <Input\n            value={leftValue4}\n            placeholder=\"Left\"\n            unwrapped\n            onChange={setLeftValue4}\n            {...props}\n          />\n        )}\n        renderRight={(props) => (\n          <Input\n            value={rightValue4}\n            placeholder=\"Right\"\n            textAlign=\"right\"\n            unwrapped\n            onChange={setRightValue4}\n            {...props}\n          />\n        )}\n      />\n    </FlexBox>\n  );\n};\n"],
+  "mappings": "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",
+  "names": []
+}