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

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

@@ -1,97 +0,0 @@
-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

@@ -1,7 +0,0 @@
-{
-  "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

@@ -1,529 +0,0 @@
-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