@ledgerhq/react-ui 0.7.2 → 0.7.5-monorepo.0

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

@@ -0,0 +1,97 @@
+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, {
+  Option: () => Option,
+  getStyles: () => getStyles
+});
+var import_react = __toModule(require("react"));
+var import_react_select = __toModule(require("react-select"));
+var import_styled_components = __toModule(require("styled-components"));
+var import_Text = __toModule(require("../../asorted/Text"));
+function getStyles() {
+  return (provided) => ({
+    ...provided,
+    display: "flex",
+    alignItems: "center",
+    padding: 0,
+    cursor: "inherit",
+    background: "inherit",
+    color: "inherit",
+    boxShadow: "none",
+    border: "none",
+    ":active": void 0
+  });
+}
+const Wrapper = (0, import_styled_components.default)(import_Text.default).attrs({ as: "div" })`
+  height: 48px;
+  display: flex;
+  padding: 0 ${(p) => p.theme.space[5]}px;
+  border-radius: ${(p) => `${p.theme.radii[1]}px`};
+  ${(p) => !p.disabled ? "cursor: pointer;" : ""}
+  ${(props) => {
+  const { theme, selected, focus, disabled } = props;
+  if (selected) {
+    return `
+        color: ${theme.colors.primary.c90};
+        background: ${theme.colors.primary.c20};
+      `;
+  }
+  if (disabled) {
+    return `
+        color: ${theme.colors.neutral.c50};
+        ${focus ? `&:not(:active) {
+            background: ${theme.colors.neutral.c20};
+          }` : ""}
+      `;
+  }
+  return `
+      color: ${theme.colors.neutral.c80};
+      &:hover {
+        color: ${theme.colors.neutral.c100};
+        background: ${theme.colors.primary.c10};
+      }
+      &:active {
+        color: ${theme.colors.neutral.c100};
+        background: ${theme.colors.primary.c30};
+      }
+      ${focus ? `&:not(:active) {
+          color: ${theme.colors.neutral.c100};
+          background: ${theme.colors.primary.c10};
+        }` : ""}
+    `;
+}};
+`;
+function Option(props) {
+  const { render, children, ...innerProps } = props;
+  return /* @__PURE__ */ import_react.default.createElement(Wrapper, {
+    disabled: props.isDisabled,
+    selected: props.isSelected,
+    focus: props.isFocused,
+    fontWeight: "semiBold",
+    variant: "paragraph"
+  }, /* @__PURE__ */ import_react.default.createElement(import_react_select.components.Option, {
+    ...innerProps
+  }, render ? render(props) : children));
+}
+//# sourceMappingURL=Option.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/form/SelectInput/Option.tsx"],
+  "sourcesContent": ["import React from \"react\";\nimport { components, GroupBase, StylesConfig, OptionProps } from \"react-select\";\nimport styled from \"styled-components\";\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>(): NonNullable<StylesConfig<O, M, G>[\"option\"]> {\n  return (provided) => ({\n    ...provided,\n    display: \"flex\",\n    alignItems: \"center\",\n    padding: 0,\n    cursor: \"inherit\",\n    background: \"inherit\",\n    color: \"inherit\",\n    boxShadow: \"none\",\n    border: \"none\",\n    \":active\": undefined,\n  });\n}\n\nconst Wrapper = styled(Text).attrs({ as: \"div\" })<{\n  disabled: boolean;\n  selected: boolean;\n  focus: boolean;\n}>`\n  height: 48px;\n  display: flex;\n  padding: 0 ${(p) => p.theme.space[5]}px;\n  border-radius: ${(p) => `${p.theme.radii[1]}px`};\n  ${(p) => (!p.disabled ? \"cursor: pointer;\" : \"\")}\n  ${(props) => {\n    const { theme, selected, focus, disabled } = props;\n    if (selected) {\n      return `\n        color: ${theme.colors.primary.c90};\n        background: ${theme.colors.primary.c20};\n      `;\n    }\n    if (disabled) {\n      return `\n        color: ${theme.colors.neutral.c50};\n        ${\n          focus\n            ? `&:not(:active) {\n            background: ${theme.colors.neutral.c20};\n          }`\n            : \"\"\n        }\n      `;\n    }\n    return `\n      color: ${theme.colors.neutral.c80};\n      &:hover {\n        color: ${theme.colors.neutral.c100};\n        background: ${theme.colors.primary.c10};\n      }\n      &:active {\n        color: ${theme.colors.neutral.c100};\n        background: ${theme.colors.primary.c30};\n      }\n      ${\n        focus\n          ? `&:not(:active) {\n          color: ${theme.colors.neutral.c100};\n          background: ${theme.colors.primary.c10};\n        }`\n          : \"\"\n      }\n    `;\n  }};\n`;\n\nexport type ExtraProps<\n  O = unknown,\n  M extends boolean = false,\n  G extends GroupBase<O> = GroupBase<O>,\n> = {\n  /* A render function to customize the contents. */\n  render?: (props: React.PropsWithChildren<OptionProps<O, M, G>>) => React.ReactNode;\n};\nexport type Props<\n  O = unknown,\n  M extends boolean = false,\n  G extends GroupBase<O> = GroupBase<O>,\n> = OptionProps<O, M, G> & ExtraProps<O, M, G>;\nexport function Option<\n  O = unknown,\n  M extends boolean = false,\n  G extends GroupBase<O> = GroupBase<O>,\n>(props: Props<O, M, G>): JSX.Element {\n  const { render, children, ...innerProps } = props;\n\n  return (\n    <Wrapper\n      disabled={props.isDisabled}\n      selected={props.isSelected}\n      focus={props.isFocused}\n      fontWeight=\"semiBold\"\n      variant={\"paragraph\"}\n    >\n      <components.Option {...innerProps}>{render ? render(props) : children}</components.Option>\n    </Wrapper>\n  );\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,0BAAiE;AACjE,+BAAmB;AACnB,kBAAiB;AAEV,qBAI2C;AAChD,SAAO,CAAC,aAAc;AAAA,OACjB;AAAA,IACH,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,OAAO;AAAA,IACP,WAAW;AAAA,IACX,QAAQ;AAAA,IACR,WAAW;AAAA;AAAA;AAIf,MAAM,UAAU,sCAAO,qBAAM,MAAM,EAAE,IAAI;AAAA;AAAA;AAAA,eAO1B,CAAC,MAAM,EAAE,MAAM,MAAM;AAAA,mBACjB,CAAC,MAAM,GAAG,EAAE,MAAM,MAAM;AAAA,IACvC,CAAC,MAAO,CAAC,EAAE,WAAW,qBAAqB;AAAA,IAC3C,CAAC,UAAU;AACX,QAAM,EAAE,OAAO,UAAU,OAAO,aAAa;AAC7C,MAAI,UAAU;AACZ,WAAO;AAAA,iBACI,MAAM,OAAO,QAAQ;AAAA,sBAChB,MAAM,OAAO,QAAQ;AAAA;AAAA;AAGvC,MAAI,UAAU;AACZ,WAAO;AAAA,iBACI,MAAM,OAAO,QAAQ;AAAA,UAE5B,QACI;AAAA,0BACY,MAAM,OAAO,QAAQ;AAAA,eAEjC;AAAA;AAAA;AAIV,SAAO;AAAA,eACI,MAAM,OAAO,QAAQ;AAAA;AAAA,iBAEnB,MAAM,OAAO,QAAQ;AAAA,sBAChB,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA,iBAG1B,MAAM,OAAO,QAAQ;AAAA,sBAChB,MAAM,OAAO,QAAQ;AAAA;AAAA,QAGnC,QACI;AAAA,mBACO,MAAM,OAAO,QAAQ;AAAA,wBAChB,MAAM,OAAO,QAAQ;AAAA,aAEjC;AAAA;AAAA;AAAA;AAmBL,gBAIL,OAAoC;AACpC,QAAM,EAAE,QAAQ,aAAa,eAAe;AAE5C,SACE,mDAAC,SAAD;AAAA,IACE,UAAU,MAAM;AAAA,IAChB,UAAU,MAAM;AAAA,IAChB,OAAO,MAAM;AAAA,IACb,YAAW;AAAA,IACX,SAAS;AAAA,KAET,mDAAC,+BAAW,QAAZ;AAAA,OAAuB;AAAA,KAAa,SAAS,OAAO,SAAS;AAAA;",
+  "names": []
+}

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

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