@webiny/admin-ui 6.0.0-alpha.0

package/AutoComplete/primitives/AutoCompletePrimitive.stories.js

@@ -0,0 +1,518 @@
+import React, { useState } from "react";
+import { ReactComponent as SearchIcon } from "@webiny/icons/search.svg";
+import { AutoCompletePrimitive } from "./AutoCompletePrimitive";
+import { Button } from "../../Button";
+import { Icon } from "../../Icon";
+const meta = {
+  title: "Components/Form Primitives/Autocomplete",
+  component: AutoCompletePrimitive,
+  parameters: {
+    layout: "padded"
+  },
+  argTypes: {
+    onValueChange: {
+      action: "onValueChange"
+    },
+    onOpenChange: {
+      action: "onOpenChange"
+    }
+  },
+  render: args => {
+    const [value, setValue] = useState(args.value);
+    return /*#__PURE__*/React.createElement("div", {
+      className: "wby-w-full"
+    }, /*#__PURE__*/React.createElement(AutoCompletePrimitive, Object.assign({}, args, {
+      value: value,
+      onValueChange: setValue
+    })), /*#__PURE__*/React.createElement("div", {
+      className: "wby-mt-4 wby-text-center"
+    }, "Current selected value: ", /*#__PURE__*/React.createElement("pre", null, value)));
+  }
+};
+export default meta;
+export const Default = {
+  args: {
+    options: ["Eastern Standard Time (EST)", "Central Standard Time (CST)", "Pacific Standard Time (PST)", "Greenwich Mean Time (GMT)", "Central European Time (CET)", "Central Africa Time (CAT)", "India Standard Time (IST)", "China Standard Time (CST)", "Japan Standard Time (JST)", "Australian Western Standard Time (AWST)", "New Zealand Standard Time (NZST)", "Fiji Time (FJT)", "Argentina Time (ART)", "Bolivia Time (BOT)", "Brasilia Time (BRT)"]
+  }
+};
+export const MediumSize = {
+  args: {
+    ...Default.args,
+    size: "md"
+  }
+};
+export const LargeSize = {
+  args: {
+    ...Default.args,
+    size: "lg"
+  }
+};
+export const ExtraLargeSize = {
+  args: {
+    ...Default.args,
+    size: "xl"
+  }
+};
+export const WithStartIcon = {
+  args: {
+    ...Default.args,
+    startIcon: /*#__PURE__*/React.createElement(Icon, {
+      label: "Search",
+      icon: /*#__PURE__*/React.createElement(SearchIcon, null)
+    })
+  }
+};
+export const WithLoading = {
+  args: {
+    ...Default.args,
+    loading: true
+  }
+};
+export const WithoutResetAction = {
+  args: {
+    ...Default.args,
+    displayResetAction: false
+  }
+};
+export const PrimaryVariant = {
+  args: {
+    ...Default.args,
+    variant: "primary"
+  }
+};
+export const PrimaryVariantDisabled = {
+  args: {
+    ...PrimaryVariant.args,
+    disabled: true
+  }
+};
+export const PrimaryVariantInvalid = {
+  args: {
+    ...PrimaryVariant.args,
+    invalid: true
+  }
+};
+export const SecondaryVariant = {
+  args: {
+    variant: "secondary",
+    placeholder: "Custom placeholder"
+  }
+};
+export const SecondaryVariantDisabled = {
+  args: {
+    ...SecondaryVariant.args,
+    disabled: true
+  }
+};
+export const SecondaryVariantInvalid = {
+  args: {
+    ...SecondaryVariant.args,
+    invalid: true
+  }
+};
+export const GhostVariant = {
+  args: {
+    variant: "ghost",
+    placeholder: "Custom placeholder"
+  }
+};
+export const GhostVariantDisabled = {
+  args: {
+    ...GhostVariant.args,
+    disabled: true
+  }
+};
+export const GhostVariantInvalid = {
+  args: {
+    ...GhostVariant.args,
+    invalid: true
+  }
+};
+export const WithPredefinedValue = {
+  args: {
+    ...Default.args,
+    value: "Eastern Standard Time (EST)"
+  }
+};
+export const WithCustomPlaceholder = {
+  args: {
+    ...Default.args,
+    placeholder: "Custom placeholder"
+  }
+};
+export const WithCustomEmptyMessage = {
+  args: {
+    ...Default.args,
+    emptyMessage: "Custom empty message"
+  }
+};
+export const WithCustomInitialMessage = {
+  args: {
+    ...Default.args,
+    initialMessage: "Custom initial message.",
+    options: []
+  }
+};
+export const WithFormattedOptions = {
+  args: {
+    ...Default.args,
+    options: [{
+      label: "Eastern Standard Time (EST)",
+      value: "est"
+    }, {
+      label: "Central Standard Time (CST)",
+      value: "cst"
+    }, {
+      label: "Pacific Standard Time (PST)",
+      value: "pst"
+    }, {
+      label: "Greenwich Mean Time (GMT)",
+      value: "gmt"
+    }, {
+      label: "Central European Time (CET)",
+      value: "cet"
+    }, {
+      label: "Central Africa Time (CAT)",
+      value: "cat"
+    }, {
+      label: "India Standard Time (IST)",
+      value: "ist"
+    }, {
+      label: "China Standard Time (CST)",
+      value: "cst_china"
+    }, {
+      label: "Japan Standard Time (JST)",
+      value: "jst"
+    }, {
+      label: "Australian Western Standard Time (AWST)",
+      value: "awst"
+    }, {
+      label: "New Zealand Standard Time (NZST)",
+      value: "nzst"
+    }, {
+      label: "Fiji Time (FJT)",
+      value: "fjt"
+    }, {
+      label: "Argentina Time (ART)",
+      value: "art"
+    }, {
+      label: "Bolivia Time (BOT)",
+      value: "bot"
+    }, {
+      label: "Brasilia Time (BRT)",
+      value: "brt"
+    }]
+  }
+};
+export const WithCustomOptionRenderer = {
+  args: {
+    ...Default.args,
+    options: [{
+      label: "Eastern Standard Time (EST)",
+      value: "est",
+      item: {
+        name: "Eastern Standard Time (EST)",
+        time_difference: "-5:00",
+        flag: "🇺🇸"
+      }
+    }, {
+      label: "Central Standard Time (CST)",
+      value: "cst",
+      item: {
+        name: "Central Standard Time (CST)",
+        time_difference: "-6:00",
+        flag: "🇺🇸"
+      }
+    }, {
+      label: "Pacific Standard Time (PST)",
+      value: "pst",
+      item: {
+        name: "Pacific Standard Time (PST)",
+        time_difference: "-8:00",
+        flag: "🇺🇸"
+      }
+    }, {
+      label: "Greenwich Mean Time (GMT)",
+      value: "gmt",
+      item: {
+        name: "Greenwich Mean Time (GMT)",
+        time_difference: "±0:00",
+        flag: "🇬🇧"
+      }
+    }, {
+      label: "Central European Time (CET)",
+      value: "cet",
+      item: {
+        name: "Central European Time (CET)",
+        time_difference: "+1:00",
+        flag: "🇪🇺"
+      }
+    }, {
+      label: "Central Africa Time (CAT)",
+      value: "cat",
+      item: {
+        name: "Central Africa Time (CAT)",
+        time_difference: "+2:00",
+        flag: "🇿🇦"
+      }
+    }, {
+      label: "India Standard Time (IST)",
+      value: "ist",
+      item: {
+        name: "India Standard Time (IST)",
+        time_difference: "+5:30",
+        flag: "🇮🇳"
+      }
+    }, {
+      label: "China Standard Time (CST)",
+      value: "cst_china",
+      item: {
+        name: "China Standard Time (CST)",
+        time_difference: "+8:00",
+        flag: "🇨🇳"
+      }
+    }, {
+      label: "Japan Standard Time (JST)",
+      value: "jst",
+      item: {
+        name: "Japan Standard Time (JST)",
+        time_difference: "+9:00",
+        flag: "🇯🇵"
+      }
+    }, {
+      label: "Australian Western Standard Time (AWST)",
+      value: "awst",
+      item: {
+        name: "Australian Western Standard Time (AWST)",
+        time_difference: "+8:00",
+        flag: "🇦🇺"
+      }
+    }, {
+      label: "New Zealand Standard Time (NZST)",
+      value: "nzst",
+      item: {
+        name: "New Zealand Standard Time (NZST)",
+        time_difference: "+12:00",
+        flag: "🇳🇿"
+      }
+    }, {
+      label: "Fiji Time (FJT)",
+      value: "fjt",
+      item: {
+        name: "Fiji Time (FJT)",
+        time_difference: "+12:00",
+        flag: "🇫🇯"
+      }
+    }, {
+      label: "Argentina Time (ART)",
+      value: "art",
+      item: {
+        name: "Argentina Time (ART)",
+        time_difference: "-3:00",
+        flag: "🇦🇷"
+      }
+    }, {
+      label: "Bolivia Time (BOT)",
+      value: "bot",
+      item: {
+        name: "Bolivia Time (BOT)",
+        time_difference: "-4:00",
+        flag: "🇧🇴"
+      }
+    }, {
+      label: "Brasilia Time (BRT)",
+      value: "brt",
+      item: {
+        name: "Brasilia Time (BRT)",
+        time_difference: "-3:00",
+        flag: "🇧🇷"
+      }
+    }],
+    optionRenderer: item => {
+      return /*#__PURE__*/React.createElement("div", {
+        className: "wby-w-full wby-flex wby-justify-between wby-align-middle"
+      }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
+        className: "wby-mr-sm"
+      }, item.flag), item.name), /*#__PURE__*/React.createElement("div", {
+        className: "wby-text-sm"
+      }, item.time_difference));
+    }
+  }
+};
+export const WithSeparators = {
+  args: {
+    ...Default.args,
+    options: [{
+      label: "Eastern Standard Time (EST)",
+      value: "est"
+    }, {
+      label: "Central Standard Time (CST)",
+      value: "cst"
+    }, {
+      label: "Pacific Standard Time (PST)",
+      value: "pst",
+      separator: true
+    }, {
+      label: "Greenwich Mean Time (GMT)",
+      value: "gmt"
+    }, {
+      label: "Central European Time (CET)",
+      value: "cet"
+    }, {
+      label: "Central Africa Time (CAT)",
+      value: "cat",
+      separator: true
+    }, {
+      label: "India Standard Time (IST)",
+      value: "ist"
+    }, {
+      label: "China Standard Time (CST)",
+      value: "cst_china"
+    }, {
+      label: "Japan Standard Time (JST)",
+      value: "jst",
+      separator: true
+    }, {
+      label: "Australian Western Standard Time (AWST)",
+      value: "awst"
+    }, {
+      label: "New Zealand Standard Time (NZST)",
+      value: "nzst"
+    }, {
+      label: "Fiji Time (FJT)",
+      value: "fjt",
+      separator: true
+    }, {
+      label: "Argentina Time (ART)",
+      value: "art"
+    }, {
+      label: "Bolivia Time (BOT)",
+      value: "bot"
+    }, {
+      label: "Brasilia Time (BRT)",
+      value: "brt"
+    }]
+  }
+};
+export const WithDisabledOptions = {
+  args: {
+    options: [{
+      label: "Eastern Standard Time (EST)",
+      value: "est",
+      disabled: true
+    }, {
+      label: "Central Standard Time (CST)",
+      value: "cst",
+      disabled: true
+    }, {
+      label: "Pacific Standard Time (PST)",
+      value: "pst",
+      disabled: true
+    }, {
+      label: "Greenwich Mean Time (GMT)",
+      value: "gmt"
+    }, {
+      label: "Central European Time (CET)",
+      value: "cet"
+    }, {
+      label: "Central Africa Time (CAT)",
+      value: "cat"
+    }, {
+      label: "India Standard Time (IST)",
+      value: "ist"
+    }, {
+      label: "China Standard Time (CST)",
+      value: "cst_china"
+    }, {
+      label: "Japan Standard Time (JST)",
+      value: "jst"
+    }, {
+      label: "Australian Western Standard Time (AWST)",
+      value: "awst"
+    }, {
+      label: "New Zealand Standard Time (NZST)",
+      value: "nzst"
+    }, {
+      label: "Fiji Time (FJT)",
+      value: "fjt"
+    }, {
+      label: "Argentina Time (ART)",
+      value: "art"
+    }, {
+      label: "Bolivia Time (BOT)",
+      value: "bot"
+    }, {
+      label: "Brasilia Time (BRT)",
+      value: "brt"
+    }]
+  }
+};
+export const WithExternalValueControl = {
+  args: {
+    ...Default.args,
+    options: [{
+      label: "Eastern Standard Time (EST)",
+      value: "est"
+    }, {
+      label: "Central Standard Time (CST)",
+      value: "cst"
+    }, {
+      label: "Pacific Standard Time (PST)",
+      value: "pst"
+    }, {
+      label: "Greenwich Mean Time (GMT)",
+      value: "gmt"
+    }, {
+      label: "Central European Time (CET)",
+      value: "cet"
+    }, {
+      label: "Central Africa Time (CAT)",
+      value: "cat"
+    }, {
+      label: "India Standard Time (IST)",
+      value: "ist"
+    }, {
+      label: "China Standard Time (CST)",
+      value: "cst_china"
+    }, {
+      label: "Japan Standard Time (JST)",
+      value: "jst"
+    }, {
+      label: "Australian Western Standard Time (AWST)",
+      value: "awst"
+    }, {
+      label: "New Zealand Standard Time (NZST)",
+      value: "nzst"
+    }, {
+      label: "Fiji Time (FJT)",
+      value: "fjt"
+    }, {
+      label: "Argentina Time (ART)",
+      value: "art"
+    }, {
+      label: "Bolivia Time (BOT)",
+      value: "bot"
+    }, {
+      label: "Brasilia Time (BRT)",
+      value: "brt"
+    }]
+  },
+  render: args => {
+    const [value, setValue] = useState(args.value);
+    return /*#__PURE__*/React.createElement("div", {
+      className: "wby-w-full"
+    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(AutoCompletePrimitive, Object.assign({}, args, {
+      value: value,
+      onValueChange: value => setValue(value)
+    }))), /*#__PURE__*/React.createElement("div", {
+      className: "wby-mt-4 wby-text-center"
+    }, /*#__PURE__*/React.createElement(Button, {
+      text: "Reset",
+      onClick: () => setValue("")
+    })), /*#__PURE__*/React.createElement("div", {
+      className: "wby-mt-4 wby-text-center"
+    }, "Current selected value: ", /*#__PURE__*/React.createElement("pre", null, value)));
+  }
+};
+
+//# sourceMappingURL=AutoCompletePrimitive.stories.js.map

package/AutoComplete/primitives/AutoCompletePrimitive.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useState","ReactComponent","SearchIcon","AutoCompletePrimitive","Button","Icon","meta","title","component","parameters","layout","argTypes","onValueChange","action","onOpenChange","render","args","value","setValue","createElement","className","Object","assign","Default","options","MediumSize","size","LargeSize","ExtraLargeSize","WithStartIcon","startIcon","label","icon","WithLoading","loading","WithoutResetAction","displayResetAction","PrimaryVariant","variant","PrimaryVariantDisabled","disabled","PrimaryVariantInvalid","invalid","SecondaryVariant","placeholder","SecondaryVariantDisabled","SecondaryVariantInvalid","GhostVariant","GhostVariantDisabled","GhostVariantInvalid","WithPredefinedValue","WithCustomPlaceholder","WithCustomEmptyMessage","emptyMessage","WithCustomInitialMessage","initialMessage","WithFormattedOptions","WithCustomOptionRenderer","item","name","time_difference","flag","optionRenderer","WithSeparators","separator","WithDisabledOptions","WithExternalValueControl","text","onClick"],"sources":["AutoCompletePrimitive.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { ReactComponent as SearchIcon } from \"@webiny/icons/search.svg\";\nimport { AutoCompletePrimitive } from \"./AutoCompletePrimitive\";\nimport { Button } from \"~/Button\";\nimport { Icon } from \"~/Icon\";\n\nconst meta: Meta<typeof AutoCompletePrimitive> = {\n    title: \"Components/Form Primitives/Autocomplete\",\n    component: AutoCompletePrimitive,\n    parameters: {\n        layout: \"padded\"\n    },\n    argTypes: {\n        onValueChange: { action: \"onValueChange\" },\n        onOpenChange: { action: \"onOpenChange\" }\n    },\n    render: args => {\n        const [value, setValue] = useState(args.value);\n        return (\n            <div className={\"wby-w-full\"}>\n                <AutoCompletePrimitive {...args} value={value} onValueChange={setValue} />\n                <div className={\"wby-mt-4 wby-text-center\"}>\n                    Current selected value: <pre>{value}</pre>\n                </div>\n            </div>\n        );\n    }\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof AutoCompletePrimitive>;\n\nexport const Default: Story = {\n    args: {\n        options: [\n            \"Eastern Standard Time (EST)\",\n            \"Central Standard Time (CST)\",\n            \"Pacific Standard Time (PST)\",\n            \"Greenwich Mean Time (GMT)\",\n            \"Central European Time (CET)\",\n            \"Central Africa Time (CAT)\",\n            \"India Standard Time (IST)\",\n            \"China Standard Time (CST)\",\n            \"Japan Standard Time (JST)\",\n            \"Australian Western Standard Time (AWST)\",\n            \"New Zealand Standard Time (NZST)\",\n            \"Fiji Time (FJT)\",\n            \"Argentina Time (ART)\",\n            \"Bolivia Time (BOT)\",\n            \"Brasilia Time (BRT)\"\n        ]\n    }\n};\n\nexport const MediumSize: Story = {\n    args: {\n        ...Default.args,\n        size: \"md\"\n    }\n};\n\nexport const LargeSize: Story = {\n    args: {\n        ...Default.args,\n        size: \"lg\"\n    }\n};\n\nexport const ExtraLargeSize: Story = {\n    args: {\n        ...Default.args,\n        size: \"xl\"\n    }\n};\n\nexport const WithStartIcon: Story = {\n    args: {\n        ...Default.args,\n        startIcon: <Icon label={\"Search\"} icon={<SearchIcon />} />\n    }\n};\n\nexport const WithLoading: Story = {\n    args: {\n        ...Default.args,\n        loading: true\n    }\n};\n\nexport const WithoutResetAction: Story = {\n    args: {\n        ...Default.args,\n        displayResetAction: false\n    }\n};\n\nexport const PrimaryVariant: Story = {\n    args: {\n        ...Default.args,\n        variant: \"primary\"\n    }\n};\n\nexport const PrimaryVariantDisabled: Story = {\n    args: {\n        ...PrimaryVariant.args,\n        disabled: true\n    }\n};\n\nexport const PrimaryVariantInvalid: Story = {\n    args: {\n        ...PrimaryVariant.args,\n        invalid: true\n    }\n};\n\nexport const SecondaryVariant: Story = {\n    args: {\n        variant: \"secondary\",\n        placeholder: \"Custom placeholder\"\n    }\n};\n\nexport const SecondaryVariantDisabled: Story = {\n    args: {\n        ...SecondaryVariant.args,\n        disabled: true\n    }\n};\n\nexport const SecondaryVariantInvalid: Story = {\n    args: {\n        ...SecondaryVariant.args,\n        invalid: true\n    }\n};\n\nexport const GhostVariant: Story = {\n    args: {\n        variant: \"ghost\",\n        placeholder: \"Custom placeholder\"\n    }\n};\n\nexport const GhostVariantDisabled: Story = {\n    args: {\n        ...GhostVariant.args,\n        disabled: true\n    }\n};\n\nexport const GhostVariantInvalid: Story = {\n    args: {\n        ...GhostVariant.args,\n        invalid: true\n    }\n};\n\nexport const WithPredefinedValue: Story = {\n    args: {\n        ...Default.args,\n        value: \"Eastern Standard Time (EST)\"\n    }\n};\n\nexport const WithCustomPlaceholder: Story = {\n    args: {\n        ...Default.args,\n        placeholder: \"Custom placeholder\"\n    }\n};\n\nexport const WithCustomEmptyMessage: Story = {\n    args: {\n        ...Default.args,\n        emptyMessage: \"Custom empty message\"\n    }\n};\n\nexport const WithCustomInitialMessage: Story = {\n    args: {\n        ...Default.args,\n        initialMessage: \"Custom initial message.\",\n        options: []\n    }\n};\n\nexport const WithFormattedOptions: Story = {\n    args: {\n        ...Default.args,\n        options: [\n            { label: \"Eastern Standard Time (EST)\", value: \"est\" },\n            { label: \"Central Standard Time (CST)\", value: \"cst\" },\n            { label: \"Pacific Standard Time (PST)\", value: \"pst\" },\n            { label: \"Greenwich Mean Time (GMT)\", value: \"gmt\" },\n            { label: \"Central European Time (CET)\", value: \"cet\" },\n            { label: \"Central Africa Time (CAT)\", value: \"cat\" },\n            { label: \"India Standard Time (IST)\", value: \"ist\" },\n            { label: \"China Standard Time (CST)\", value: \"cst_china\" },\n            { label: \"Japan Standard Time (JST)\", value: \"jst\" },\n            { label: \"Australian Western Standard Time (AWST)\", value: \"awst\" },\n            { label: \"New Zealand Standard Time (NZST)\", value: \"nzst\" },\n            { label: \"Fiji Time (FJT)\", value: \"fjt\" },\n            { label: \"Argentina Time (ART)\", value: \"art\" },\n            { label: \"Bolivia Time (BOT)\", value: \"bot\" },\n            { label: \"Brasilia Time (BRT)\", value: \"brt\" }\n        ]\n    }\n};\n\nexport const WithCustomOptionRenderer: Story = {\n    args: {\n        ...Default.args,\n        options: [\n            {\n                label: \"Eastern Standard Time (EST)\",\n                value: \"est\",\n                item: {\n                    name: \"Eastern Standard Time (EST)\",\n                    time_difference: \"-5:00\",\n                    flag: \"🇺🇸\"\n                }\n            },\n            {\n                label: \"Central Standard Time (CST)\",\n                value: \"cst\",\n                item: {\n                    name: \"Central Standard Time (CST)\",\n                    time_difference: \"-6:00\",\n                    flag: \"🇺🇸\"\n                }\n            },\n            {\n                label: \"Pacific Standard Time (PST)\",\n                value: \"pst\",\n                item: {\n                    name: \"Pacific Standard Time (PST)\",\n                    time_difference: \"-8:00\",\n                    flag: \"🇺🇸\"\n                }\n            },\n            {\n                label: \"Greenwich Mean Time (GMT)\",\n                value: \"gmt\",\n                item: {\n                    name: \"Greenwich Mean Time (GMT)\",\n                    time_difference: \"±0:00\",\n                    flag: \"🇬🇧\"\n                }\n            },\n            {\n                label: \"Central European Time (CET)\",\n                value: \"cet\",\n                item: {\n                    name: \"Central European Time (CET)\",\n                    time_difference: \"+1:00\",\n                    flag: \"🇪🇺\"\n                }\n            },\n            {\n                label: \"Central Africa Time (CAT)\",\n                value: \"cat\",\n                item: {\n                    name: \"Central Africa Time (CAT)\",\n                    time_difference: \"+2:00\",\n                    flag: \"🇿🇦\"\n                }\n            },\n            {\n                label: \"India Standard Time (IST)\",\n                value: \"ist\",\n                item: {\n                    name: \"India Standard Time (IST)\",\n                    time_difference: \"+5:30\",\n                    flag: \"🇮🇳\"\n                }\n            },\n            {\n                label: \"China Standard Time (CST)\",\n                value: \"cst_china\",\n                item: {\n                    name: \"China Standard Time (CST)\",\n                    time_difference: \"+8:00\",\n                    flag: \"🇨🇳\"\n                }\n            },\n            {\n                label: \"Japan Standard Time (JST)\",\n                value: \"jst\",\n                item: {\n                    name: \"Japan Standard Time (JST)\",\n                    time_difference: \"+9:00\",\n                    flag: \"🇯🇵\"\n                }\n            },\n            {\n                label: \"Australian Western Standard Time (AWST)\",\n                value: \"awst\",\n                item: {\n                    name: \"Australian Western Standard Time (AWST)\",\n                    time_difference: \"+8:00\",\n                    flag: \"🇦🇺\"\n                }\n            },\n            {\n                label: \"New Zealand Standard Time (NZST)\",\n                value: \"nzst\",\n                item: {\n                    name: \"New Zealand Standard Time (NZST)\",\n                    time_difference: \"+12:00\",\n                    flag: \"🇳🇿\"\n                }\n            },\n            {\n                label: \"Fiji Time (FJT)\",\n                value: \"fjt\",\n                item: {\n                    name: \"Fiji Time (FJT)\",\n                    time_difference: \"+12:00\",\n                    flag: \"🇫🇯\"\n                }\n            },\n            {\n                label: \"Argentina Time (ART)\",\n                value: \"art\",\n                item: {\n                    name: \"Argentina Time (ART)\",\n                    time_difference: \"-3:00\",\n                    flag: \"🇦🇷\"\n                }\n            },\n            {\n                label: \"Bolivia Time (BOT)\",\n                value: \"bot\",\n                item: {\n                    name: \"Bolivia Time (BOT)\",\n                    time_difference: \"-4:00\",\n                    flag: \"🇧🇴\"\n                }\n            },\n            {\n                label: \"Brasilia Time (BRT)\",\n                value: \"brt\",\n                item: {\n                    name: \"Brasilia Time (BRT)\",\n                    time_difference: \"-3:00\",\n                    flag: \"🇧🇷\"\n                }\n            }\n        ],\n        optionRenderer: item => {\n            return (\n                <div className={\"wby-w-full wby-flex wby-justify-between wby-align-middle\"}>\n                    <div>\n                        <span className={\"wby-mr-sm\"}>{item.flag}</span>\n                        {item.name}\n                    </div>\n                    <div className={\"wby-text-sm\"}>{item.time_difference}</div>\n                </div>\n            );\n        }\n    }\n};\n\nexport const WithSeparators: Story = {\n    args: {\n        ...Default.args,\n        options: [\n            { label: \"Eastern Standard Time (EST)\", value: \"est\" },\n            { label: \"Central Standard Time (CST)\", value: \"cst\" },\n            { label: \"Pacific Standard Time (PST)\", value: \"pst\", separator: true },\n            { label: \"Greenwich Mean Time (GMT)\", value: \"gmt\" },\n            { label: \"Central European Time (CET)\", value: \"cet\" },\n            { label: \"Central Africa Time (CAT)\", value: \"cat\", separator: true },\n            { label: \"India Standard Time (IST)\", value: \"ist\" },\n            { label: \"China Standard Time (CST)\", value: \"cst_china\" },\n            { label: \"Japan Standard Time (JST)\", value: \"jst\", separator: true },\n            { label: \"Australian Western Standard Time (AWST)\", value: \"awst\" },\n            { label: \"New Zealand Standard Time (NZST)\", value: \"nzst\" },\n            { label: \"Fiji Time (FJT)\", value: \"fjt\", separator: true },\n            { label: \"Argentina Time (ART)\", value: \"art\" },\n            { label: \"Bolivia Time (BOT)\", value: \"bot\" },\n            { label: \"Brasilia Time (BRT)\", value: \"brt\" }\n        ]\n    }\n};\n\nexport const WithDisabledOptions: Story = {\n    args: {\n        options: [\n            { label: \"Eastern Standard Time (EST)\", value: \"est\", disabled: true },\n            { label: \"Central Standard Time (CST)\", value: \"cst\", disabled: true },\n            { label: \"Pacific Standard Time (PST)\", value: \"pst\", disabled: true },\n            { label: \"Greenwich Mean Time (GMT)\", value: \"gmt\" },\n            { label: \"Central European Time (CET)\", value: \"cet\" },\n            { label: \"Central Africa Time (CAT)\", value: \"cat\" },\n            { label: \"India Standard Time (IST)\", value: \"ist\" },\n            { label: \"China Standard Time (CST)\", value: \"cst_china\" },\n            { label: \"Japan Standard Time (JST)\", value: \"jst\" },\n            { label: \"Australian Western Standard Time (AWST)\", value: \"awst\" },\n            { label: \"New Zealand Standard Time (NZST)\", value: \"nzst\" },\n            { label: \"Fiji Time (FJT)\", value: \"fjt\" },\n            { label: \"Argentina Time (ART)\", value: \"art\" },\n            { label: \"Bolivia Time (BOT)\", value: \"bot\" },\n            { label: \"Brasilia Time (BRT)\", value: \"brt\" }\n        ]\n    }\n};\n\nexport const WithExternalValueControl: Story = {\n    args: {\n        ...Default.args,\n        options: [\n            { label: \"Eastern Standard Time (EST)\", value: \"est\" },\n            { label: \"Central Standard Time (CST)\", value: \"cst\" },\n            { label: \"Pacific Standard Time (PST)\", value: \"pst\" },\n            { label: \"Greenwich Mean Time (GMT)\", value: \"gmt\" },\n            { label: \"Central European Time (CET)\", value: \"cet\" },\n            { label: \"Central Africa Time (CAT)\", value: \"cat\" },\n            { label: \"India Standard Time (IST)\", value: \"ist\" },\n            { label: \"China Standard Time (CST)\", value: \"cst_china\" },\n            { label: \"Japan Standard Time (JST)\", value: \"jst\" },\n            { label: \"Australian Western Standard Time (AWST)\", value: \"awst\" },\n            { label: \"New Zealand Standard Time (NZST)\", value: \"nzst\" },\n            { label: \"Fiji Time (FJT)\", value: \"fjt\" },\n            { label: \"Argentina Time (ART)\", value: \"art\" },\n            { label: \"Bolivia Time (BOT)\", value: \"bot\" },\n            { label: \"Brasilia Time (BRT)\", value: \"brt\" }\n        ]\n    },\n    render: args => {\n        const [value, setValue] = useState(args.value);\n        return (\n            <div className={\"wby-w-full\"}>\n                <div>\n                    <AutoCompletePrimitive\n                        {...args}\n                        value={value}\n                        onValueChange={value => setValue(value)}\n                    />\n                </div>\n                <div className={\"wby-mt-4 wby-text-center\"}>\n                    <Button text={\"Reset\"} onClick={() => setValue(\"\")} />\n                </div>\n                <div className={\"wby-mt-4 wby-text-center\"}>\n                    Current selected value: <pre>{value}</pre>\n                </div>\n            </div>\n        );\n    }\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AAEvC,SAASC,cAAc,IAAIC,UAAU,QAAQ,0BAA0B;AACvE,SAASC,qBAAqB;AAC9B,SAASC,MAAM;AACf,SAASC,IAAI;AAEb,MAAMC,IAAwC,GAAG;EAC7CC,KAAK,EAAE,yCAAyC;EAChDC,SAAS,EAAEL,qBAAqB;EAChCM,UAAU,EAAE;IACRC,MAAM,EAAE;EACZ,CAAC;EACDC,QAAQ,EAAE;IACNC,aAAa,EAAE;MAAEC,MAAM,EAAE;IAAgB,CAAC;IAC1CC,YAAY,EAAE;MAAED,MAAM,EAAE;IAAe;EAC3C,CAAC;EACDE,MAAM,EAAEC,IAAI,IAAI;IACZ,MAAM,CAACC,KAAK,EAAEC,QAAQ,CAAC,GAAGlB,QAAQ,CAACgB,IAAI,CAACC,KAAK,CAAC;IAC9C,oBACIlB,KAAA,CAAAoB,aAAA;MAAKC,SAAS,EAAE;IAAa,gBACzBrB,KAAA,CAAAoB,aAAA,CAAChB,qBAAqB,EAAAkB,MAAA,CAAAC,MAAA,KAAKN,IAAI;MAAEC,KAAK,EAAEA,KAAM;MAACL,aAAa,EAAEM;IAAS,EAAE,CAAC,eAC1EnB,KAAA,CAAAoB,aAAA;MAAKC,SAAS,EAAE;IAA2B,GAAC,0BAChB,eAAArB,KAAA,CAAAoB,aAAA,cAAMF,KAAW,CACxC,CACJ,CAAC;EAEd;AACJ,CAAC;AAED,eAAeX,IAAI;AAInB,OAAO,MAAMiB,OAAc,GAAG;EAC1BP,IAAI,EAAE;IACFQ,OAAO,EAAE,CACL,6BAA6B,EAC7B,6BAA6B,EAC7B,6BAA6B,EAC7B,2BAA2B,EAC3B,6BAA6B,EAC7B,2BAA2B,EAC3B,2BAA2B,EAC3B,2BAA2B,EAC3B,2BAA2B,EAC3B,yCAAyC,EACzC,kCAAkC,EAClC,iBAAiB,EACjB,sBAAsB,EACtB,oBAAoB,EACpB,qBAAqB;EAE7B;AACJ,CAAC;AAED,OAAO,MAAMC,UAAiB,GAAG;EAC7BT,IAAI,EAAE;IACF,GAAGO,OAAO,CAACP,IAAI;IACfU,IAAI,EAAE;EACV;AACJ,CAAC;AAED,OAAO,MAAMC,SAAgB,GAAG;EAC5BX,IAAI,EAAE;IACF,GAAGO,OAAO,CAACP,IAAI;IACfU,IAAI,EAAE;EACV;AACJ,CAAC;AAED,OAAO,MAAME,cAAqB,GAAG;EACjCZ,IAAI,EAAE;IACF,GAAGO,OAAO,CAACP,IAAI;IACfU,IAAI,EAAE;EACV;AACJ,CAAC;AAED,OAAO,MAAMG,aAAoB,GAAG;EAChCb,IAAI,EAAE;IACF,GAAGO,OAAO,CAACP,IAAI;IACfc,SAAS,eAAE/B,KAAA,CAAAoB,aAAA,CAACd,IAAI;MAAC0B,KAAK,EAAE,QAAS;MAACC,IAAI,eAAEjC,KAAA,CAAAoB,aAAA,CAACjB,UAAU,MAAE;IAAE,CAAE;EAC7D;AACJ,CAAC;AAED,OAAO,MAAM+B,WAAkB,GAAG;EAC9BjB,IAAI,EAAE;IACF,GAAGO,OAAO,CAACP,IAAI;IACfkB,OAAO,EAAE;EACb;AACJ,CAAC;AAED,OAAO,MAAMC,kBAAyB,GAAG;EACrCnB,IAAI,EAAE;IACF,GAAGO,OAAO,CAACP,IAAI;IACfoB,kBAAkB,EAAE;EACxB;AACJ,CAAC;AAED,OAAO,MAAMC,cAAqB,GAAG;EACjCrB,IAAI,EAAE;IACF,GAAGO,OAAO,CAACP,IAAI;IACfsB,OAAO,EAAE;EACb;AACJ,CAAC;AAED,OAAO,MAAMC,sBAA6B,GAAG;EACzCvB,IAAI,EAAE;IACF,GAAGqB,cAAc,CAACrB,IAAI;IACtBwB,QAAQ,EAAE;EACd;AACJ,CAAC;AAED,OAAO,MAAMC,qBAA4B,GAAG;EACxCzB,IAAI,EAAE;IACF,GAAGqB,cAAc,CAACrB,IAAI;IACtB0B,OAAO,EAAE;EACb;AACJ,CAAC;AAED,OAAO,MAAMC,gBAAuB,GAAG;EACnC3B,IAAI,EAAE;IACFsB,OAAO,EAAE,WAAW;IACpBM,WAAW,EAAE;EACjB;AACJ,CAAC;AAED,OAAO,MAAMC,wBAA+B,GAAG;EAC3C7B,IAAI,EAAE;IACF,GAAG2B,gBAAgB,CAAC3B,IAAI;IACxBwB,QAAQ,EAAE;EACd;AACJ,CAAC;AAED,OAAO,MAAMM,uBAA8B,GAAG;EAC1C9B,IAAI,EAAE;IACF,GAAG2B,gBAAgB,CAAC3B,IAAI;IACxB0B,OAAO,EAAE;EACb;AACJ,CAAC;AAED,OAAO,MAAMK,YAAmB,GAAG;EAC/B/B,IAAI,EAAE;IACFsB,OAAO,EAAE,OAAO;IAChBM,WAAW,EAAE;EACjB;AACJ,CAAC;AAED,OAAO,MAAMI,oBAA2B,GAAG;EACvChC,IAAI,EAAE;IACF,GAAG+B,YAAY,CAAC/B,IAAI;IACpBwB,QAAQ,EAAE;EACd;AACJ,CAAC;AAED,OAAO,MAAMS,mBAA0B,GAAG;EACtCjC,IAAI,EAAE;IACF,GAAG+B,YAAY,CAAC/B,IAAI;IACpB0B,OAAO,EAAE;EACb;AACJ,CAAC;AAED,OAAO,MAAMQ,mBAA0B,GAAG;EACtClC,IAAI,EAAE;IACF,GAAGO,OAAO,CAACP,IAAI;IACfC,KAAK,EAAE;EACX;AACJ,CAAC;AAED,OAAO,MAAMkC,qBAA4B,GAAG;EACxCnC,IAAI,EAAE;IACF,GAAGO,OAAO,CAACP,IAAI;IACf4B,WAAW,EAAE;EACjB;AACJ,CAAC;AAED,OAAO,MAAMQ,sBAA6B,GAAG;EACzCpC,IAAI,EAAE;IACF,GAAGO,OAAO,CAACP,IAAI;IACfqC,YAAY,EAAE;EAClB;AACJ,CAAC;AAED,OAAO,MAAMC,wBAA+B,GAAG;EAC3CtC,IAAI,EAAE;IACF,GAAGO,OAAO,CAACP,IAAI;IACfuC,cAAc,EAAE,yBAAyB;IACzC/B,OAAO,EAAE;EACb;AACJ,CAAC;AAED,OAAO,MAAMgC,oBAA2B,GAAG;EACvCxC,IAAI,EAAE;IACF,GAAGO,OAAO,CAACP,IAAI;IACfQ,OAAO,EAAE,CACL;MAAEO,KAAK,EAAE,6BAA6B;MAAEd,KAAK,EAAE;IAAM,CAAC,EACtD;MAAEc,KAAK,EAAE,6BAA6B;MAAEd,KAAK,EAAE;IAAM,CAAC,EACtD;MAAEc,KAAK,EAAE,6BAA6B;MAAEd,KAAK,EAAE;IAAM,CAAC,EACtD;MAAEc,KAAK,EAAE,2BAA2B;MAAEd,KAAK,EAAE;IAAM,CAAC,EACpD;MAAEc,KAAK,EAAE,6BAA6B;MAAEd,KAAK,EAAE;IAAM,CAAC,EACtD;MAAEc,KAAK,EAAE,2BAA2B;MAAEd,KAAK,EAAE;IAAM,CAAC,EACpD;MAAEc,KAAK,EAAE,2BAA2B;MAAEd,KAAK,EAAE;IAAM,CAAC,EACpD;MAAEc,KAAK,EAAE,2BAA2B;MAAEd,KAAK,EAAE;IAAY,CAAC,EAC1D;MAAEc,KAAK,EAAE,2BAA2B;MAAEd,KAAK,EAAE;IAAM,CAAC,EACpD;MAAEc,KAAK,EAAE,yCAAyC;MAAEd,KAAK,EAAE;IAAO,CAAC,EACnE;MAAEc,KAAK,EAAE,kCAAkC;MAAEd,KAAK,EAAE;IAAO,CAAC,EAC5D;MAAEc,KAAK,EAAE,iBAAiB;MAAEd,KAAK,EAAE;IAAM,CAAC,EAC1C;MAAEc,KAAK,EAAE,sBAAsB;MAAEd,KAAK,EAAE;IAAM,CAAC,EAC/C;MAAEc,KAAK,EAAE,oBAAoB;MAAEd,KAAK,EAAE;IAAM,CAAC,EAC7C;MAAEc,KAAK,EAAE,qBAAqB;MAAEd,KAAK,EAAE;IAAM,CAAC;EAEtD;AACJ,CAAC;AAED,OAAO,MAAMwC,wBAA+B,GAAG;EAC3CzC,IAAI,EAAE;IACF,GAAGO,OAAO,CAACP,IAAI;IACfQ,OAAO,EAAE,CACL;MACIO,KAAK,EAAE,6BAA6B;MACpCd,KAAK,EAAE,KAAK;MACZyC,IAAI,EAAE;QACFC,IAAI,EAAE,6BAA6B;QACnCC,eAAe,EAAE,OAAO;QACxBC,IAAI,EAAE;MACV;IACJ,CAAC,EACD;MACI9B,KAAK,EAAE,6BAA6B;MACpCd,KAAK,EAAE,KAAK;MACZyC,IAAI,EAAE;QACFC,IAAI,EAAE,6BAA6B;QACnCC,eAAe,EAAE,OAAO;QACxBC,IAAI,EAAE;MACV;IACJ,CAAC,EACD;MACI9B,KAAK,EAAE,6BAA6B;MACpCd,KAAK,EAAE,KAAK;MACZyC,IAAI,EAAE;QACFC,IAAI,EAAE,6BAA6B;QACnCC,eAAe,EAAE,OAAO;QACxBC,IAAI,EAAE;MACV;IACJ,CAAC,EACD;MACI9B,KAAK,EAAE,2BAA2B;MAClCd,KAAK,EAAE,KAAK;MACZyC,IAAI,EAAE;QACFC,IAAI,EAAE,2BAA2B;QACjCC,eAAe,EAAE,OAAO;QACxBC,IAAI,EAAE;MACV;IACJ,CAAC,EACD;MACI9B,KAAK,EAAE,6BAA6B;MACpCd,KAAK,EAAE,KAAK;MACZyC,IAAI,EAAE;QACFC,IAAI,EAAE,6BAA6B;QACnCC,eAAe,EAAE,OAAO;QACxBC,IAAI,EAAE;MACV;IACJ,CAAC,EACD;MACI9B,KAAK,EAAE,2BAA2B;MAClCd,KAAK,EAAE,KAAK;MACZyC,IAAI,EAAE;QACFC,IAAI,EAAE,2BAA2B;QACjCC,eAAe,EAAE,OAAO;QACxBC,IAAI,EAAE;MACV;IACJ,CAAC,EACD;MACI9B,KAAK,EAAE,2BAA2B;MAClCd,KAAK,EAAE,KAAK;MACZyC,IAAI,EAAE;QACFC,IAAI,EAAE,2BAA2B;QACjCC,eAAe,EAAE,OAAO;QACxBC,IAAI,EAAE;MACV;IACJ,CAAC,EACD;MACI9B,KAAK,EAAE,2BAA2B;MAClCd,KAAK,EAAE,WAAW;MAClByC,IAAI,EAAE;QACFC,IAAI,EAAE,2BAA2B;QACjCC,eAAe,EAAE,OAAO;QACxBC,IAAI,EAAE;MACV;IACJ,CAAC,EACD;MACI9B,KAAK,EAAE,2BAA2B;MAClCd,KAAK,EAAE,KAAK;MACZyC,IAAI,EAAE;QACFC,IAAI,EAAE,2BAA2B;QACjCC,eAAe,EAAE,OAAO;QACxBC,IAAI,EAAE;MACV;IACJ,CAAC,EACD;MACI9B,KAAK,EAAE,yCAAyC;MAChDd,KAAK,EAAE,MAAM;MACbyC,IAAI,EAAE;QACFC,IAAI,EAAE,yCAAyC;QAC/CC,eAAe,EAAE,OAAO;QACxBC,IAAI,EAAE;MACV;IACJ,CAAC,EACD;MACI9B,KAAK,EAAE,kCAAkC;MACzCd,KAAK,EAAE,MAAM;MACbyC,IAAI,EAAE;QACFC,IAAI,EAAE,kCAAkC;QACxCC,eAAe,EAAE,QAAQ;QACzBC,IAAI,EAAE;MACV;IACJ,CAAC,EACD;MACI9B,KAAK,EAAE,iBAAiB;MACxBd,KAAK,EAAE,KAAK;MACZyC,IAAI,EAAE;QACFC,IAAI,EAAE,iBAAiB;QACvBC,eAAe,EAAE,QAAQ;QACzBC,IAAI,EAAE;MACV;IACJ,CAAC,EACD;MACI9B,KAAK,EAAE,sBAAsB;MAC7Bd,KAAK,EAAE,KAAK;MACZyC,IAAI,EAAE;QACFC,IAAI,EAAE,sBAAsB;QAC5BC,eAAe,EAAE,OAAO;QACxBC,IAAI,EAAE;MACV;IACJ,CAAC,EACD;MACI9B,KAAK,EAAE,oBAAoB;MAC3Bd,KAAK,EAAE,KAAK;MACZyC,IAAI,EAAE;QACFC,IAAI,EAAE,oBAAoB;QAC1BC,eAAe,EAAE,OAAO;QACxBC,IAAI,EAAE;MACV;IACJ,CAAC,EACD;MACI9B,KAAK,EAAE,qBAAqB;MAC5Bd,KAAK,EAAE,KAAK;MACZyC,IAAI,EAAE;QACFC,IAAI,EAAE,qBAAqB;QAC3BC,eAAe,EAAE,OAAO;QACxBC,IAAI,EAAE;MACV;IACJ,CAAC,CACJ;IACDC,cAAc,EAAEJ,IAAI,IAAI;MACpB,oBACI3D,KAAA,CAAAoB,aAAA;QAAKC,SAAS,EAAE;MAA2D,gBACvErB,KAAA,CAAAoB,aAAA,2BACIpB,KAAA,CAAAoB,aAAA;QAAMC,SAAS,EAAE;MAAY,GAAEsC,IAAI,CAACG,IAAW,CAAC,EAC/CH,IAAI,CAACC,IACL,CAAC,eACN5D,KAAA,CAAAoB,aAAA;QAAKC,SAAS,EAAE;MAAc,GAAEsC,IAAI,CAACE,eAAqB,CACzD,CAAC;IAEd;EACJ;AACJ,CAAC;AAED,OAAO,MAAMG,cAAqB,GAAG;EACjC/C,IAAI,EAAE;IACF,GAAGO,OAAO,CAACP,IAAI;IACfQ,OAAO,EAAE,CACL;MAAEO,KAAK,EAAE,6BAA6B;MAAEd,KAAK,EAAE;IAAM,CAAC,EACtD;MAAEc,KAAK,EAAE,6BAA6B;MAAEd,KAAK,EAAE;IAAM,CAAC,EACtD;MAAEc,KAAK,EAAE,6BAA6B;MAAEd,KAAK,EAAE,KAAK;MAAE+C,SAAS,EAAE;IAAK,CAAC,EACvE;MAAEjC,KAAK,EAAE,2BAA2B;MAAEd,KAAK,EAAE;IAAM,CAAC,EACpD;MAAEc,KAAK,EAAE,6BAA6B;MAAEd,KAAK,EAAE;IAAM,CAAC,EACtD;MAAEc,KAAK,EAAE,2BAA2B;MAAEd,KAAK,EAAE,KAAK;MAAE+C,SAAS,EAAE;IAAK,CAAC,EACrE;MAAEjC,KAAK,EAAE,2BAA2B;MAAEd,KAAK,EAAE;IAAM,CAAC,EACpD;MAAEc,KAAK,EAAE,2BAA2B;MAAEd,KAAK,EAAE;IAAY,CAAC,EAC1D;MAAEc,KAAK,EAAE,2BAA2B;MAAEd,KAAK,EAAE,KAAK;MAAE+C,SAAS,EAAE;IAAK,CAAC,EACrE;MAAEjC,KAAK,EAAE,yCAAyC;MAAEd,KAAK,EAAE;IAAO,CAAC,EACnE;MAAEc,KAAK,EAAE,kCAAkC;MAAEd,KAAK,EAAE;IAAO,CAAC,EAC5D;MAAEc,KAAK,EAAE,iBAAiB;MAAEd,KAAK,EAAE,KAAK;MAAE+C,SAAS,EAAE;IAAK,CAAC,EAC3D;MAAEjC,KAAK,EAAE,sBAAsB;MAAEd,KAAK,EAAE;IAAM,CAAC,EAC/C;MAAEc,KAAK,EAAE,oBAAoB;MAAEd,KAAK,EAAE;IAAM,CAAC,EAC7C;MAAEc,KAAK,EAAE,qBAAqB;MAAEd,KAAK,EAAE;IAAM,CAAC;EAEtD;AACJ,CAAC;AAED,OAAO,MAAMgD,mBAA0B,GAAG;EACtCjD,IAAI,EAAE;IACFQ,OAAO,EAAE,CACL;MAAEO,KAAK,EAAE,6BAA6B;MAAEd,KAAK,EAAE,KAAK;MAAEuB,QAAQ,EAAE;IAAK,CAAC,EACtE;MAAET,KAAK,EAAE,6BAA6B;MAAEd,KAAK,EAAE,KAAK;MAAEuB,QAAQ,EAAE;IAAK,CAAC,EACtE;MAAET,KAAK,EAAE,6BAA6B;MAAEd,KAAK,EAAE,KAAK;MAAEuB,QAAQ,EAAE;IAAK,CAAC,EACtE;MAAET,KAAK,EAAE,2BAA2B;MAAEd,KAAK,EAAE;IAAM,CAAC,EACpD;MAAEc,KAAK,EAAE,6BAA6B;MAAEd,KAAK,EAAE;IAAM,CAAC,EACtD;MAAEc,KAAK,EAAE,2BAA2B;MAAEd,KAAK,EAAE;IAAM,CAAC,EACpD;MAAEc,KAAK,EAAE,2BAA2B;MAAEd,KAAK,EAAE;IAAM,CAAC,EACpD;MAAEc,KAAK,EAAE,2BAA2B;MAAEd,KAAK,EAAE;IAAY,CAAC,EAC1D;MAAEc,KAAK,EAAE,2BAA2B;MAAEd,KAAK,EAAE;IAAM,CAAC,EACpD;MAAEc,KAAK,EAAE,yCAAyC;MAAEd,KAAK,EAAE;IAAO,CAAC,EACnE;MAAEc,KAAK,EAAE,kCAAkC;MAAEd,KAAK,EAAE;IAAO,CAAC,EAC5D;MAAEc,KAAK,EAAE,iBAAiB;MAAEd,KAAK,EAAE;IAAM,CAAC,EAC1C;MAAEc,KAAK,EAAE,sBAAsB;MAAEd,KAAK,EAAE;IAAM,CAAC,EAC/C;MAAEc,KAAK,EAAE,oBAAoB;MAAEd,KAAK,EAAE;IAAM,CAAC,EAC7C;MAAEc,KAAK,EAAE,qBAAqB;MAAEd,KAAK,EAAE;IAAM,CAAC;EAEtD;AACJ,CAAC;AAED,OAAO,MAAMiD,wBAA+B,GAAG;EAC3ClD,IAAI,EAAE;IACF,GAAGO,OAAO,CAACP,IAAI;IACfQ,OAAO,EAAE,CACL;MAAEO,KAAK,EAAE,6BAA6B;MAAEd,KAAK,EAAE;IAAM,CAAC,EACtD;MAAEc,KAAK,EAAE,6BAA6B;MAAEd,KAAK,EAAE;IAAM,CAAC,EACtD;MAAEc,KAAK,EAAE,6BAA6B;MAAEd,KAAK,EAAE;IAAM,CAAC,EACtD;MAAEc,KAAK,EAAE,2BAA2B;MAAEd,KAAK,EAAE;IAAM,CAAC,EACpD;MAAEc,KAAK,EAAE,6BAA6B;MAAEd,KAAK,EAAE;IAAM,CAAC,EACtD;MAAEc,KAAK,EAAE,2BAA2B;MAAEd,KAAK,EAAE;IAAM,CAAC,EACpD;MAAEc,KAAK,EAAE,2BAA2B;MAAEd,KAAK,EAAE;IAAM,CAAC,EACpD;MAAEc,KAAK,EAAE,2BAA2B;MAAEd,KAAK,EAAE;IAAY,CAAC,EAC1D;MAAEc,KAAK,EAAE,2BAA2B;MAAEd,KAAK,EAAE;IAAM,CAAC,EACpD;MAAEc,KAAK,EAAE,yCAAyC;MAAEd,KAAK,EAAE;IAAO,CAAC,EACnE;MAAEc,KAAK,EAAE,kCAAkC;MAAEd,KAAK,EAAE;IAAO,CAAC,EAC5D;MAAEc,KAAK,EAAE,iBAAiB;MAAEd,KAAK,EAAE;IAAM,CAAC,EAC1C;MAAEc,KAAK,EAAE,sBAAsB;MAAEd,KAAK,EAAE;IAAM,CAAC,EAC/C;MAAEc,KAAK,EAAE,oBAAoB;MAAEd,KAAK,EAAE;IAAM,CAAC,EAC7C;MAAEc,KAAK,EAAE,qBAAqB;MAAEd,KAAK,EAAE;IAAM,CAAC;EAEtD,CAAC;EACDF,MAAM,EAAEC,IAAI,IAAI;IACZ,MAAM,CAACC,KAAK,EAAEC,QAAQ,CAAC,GAAGlB,QAAQ,CAACgB,IAAI,CAACC,KAAK,CAAC;IAC9C,oBACIlB,KAAA,CAAAoB,aAAA;MAAKC,SAAS,EAAE;IAAa,gBACzBrB,KAAA,CAAAoB,aAAA,2BACIpB,KAAA,CAAAoB,aAAA,CAAChB,qBAAqB,EAAAkB,MAAA,CAAAC,MAAA,KACdN,IAAI;MACRC,KAAK,EAAEA,KAAM;MACbL,aAAa,EAAEK,KAAK,IAAIC,QAAQ,CAACD,KAAK;IAAE,EAC3C,CACA,CAAC,eACNlB,KAAA,CAAAoB,aAAA;MAAKC,SAAS,EAAE;IAA2B,gBACvCrB,KAAA,CAAAoB,aAAA,CAACf,MAAM;MAAC+D,IAAI,EAAE,OAAQ;MAACC,OAAO,EAAEA,CAAA,KAAMlD,QAAQ,CAAC,EAAE;IAAE,CAAE,CACpD,CAAC,eACNnB,KAAA,CAAAoB,aAAA;MAAKC,SAAS,EAAE;IAA2B,GAAC,0BAChB,eAAArB,KAAA,CAAAoB,aAAA,cAAMF,KAAW,CACxC,CACJ,CAAC;EAEd;AACJ,CAAC","ignoreList":[]}

package/AutoComplete/primitives/components/AutoCompleteInputIcons.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+interface AutoCompleteInputIconsProps {
+    displayResetAction: boolean;
+    inputSize?: "md" | "lg" | "xl" | null;
+    loading?: boolean;
+    disabled?: boolean;
+    onOpenChange: (open: boolean) => void;
+    onResetValue: () => void;
+}
+export declare const AutoCompleteInputIcons: (props: AutoCompleteInputIconsProps) => React.JSX.Element;
+export {};

package/AutoComplete/primitives/components/AutoCompleteInputIcons.js

@@ -0,0 +1,37 @@
+import React from "react";
+import { ReactComponent as Close } from "@webiny/icons/close.svg";
+import { ReactComponent as ChevronDown } from "@webiny/icons/keyboard_arrow_down.svg";
+import { IconButton } from "../../../Button";
+import { Icon } from "../../../Icon";
+import { Loader } from "../../../Loader";
+export const AutoCompleteInputIcons = props => {
+  return /*#__PURE__*/React.createElement("div", {
+    className: "wby-flex wby-items-center wby-gap-sm"
+  }, props.loading && /*#__PURE__*/React.createElement(Loader, {
+    size: props.inputSize === "xl" ? "sm" : "xs"
+  }), props.displayResetAction && /*#__PURE__*/React.createElement(IconButton, {
+    size: props.inputSize === "xl" ? "sm" : "xs" // Map button size based on the input size.
+    ,
+    variant: "secondary",
+    icon: /*#__PURE__*/React.createElement(Icon, {
+      icon: /*#__PURE__*/React.createElement(Close, null),
+      label: "Reset"
+    }),
+    disabled: props.disabled,
+    onClick: event => {
+      event.stopPropagation();
+      props.onResetValue();
+    }
+  }), /*#__PURE__*/React.createElement(Icon, {
+    size: props.inputSize === "xl" ? "lg" : "sm" // Map icon size based on the input size.
+    ,
+    icon: /*#__PURE__*/React.createElement(ChevronDown, null),
+    label: "Open list",
+    onClick: event => {
+      event.stopPropagation();
+      props.onOpenChange(true);
+    }
+  }));
+};
+
+//# sourceMappingURL=AutoCompleteInputIcons.js.map

package/AutoComplete/primitives/components/AutoCompleteInputIcons.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","ReactComponent","Close","ChevronDown","IconButton","Icon","Loader","AutoCompleteInputIcons","props","createElement","className","loading","size","inputSize","displayResetAction","variant","icon","label","disabled","onClick","event","stopPropagation","onResetValue","onOpenChange"],"sources":["AutoCompleteInputIcons.tsx"],"sourcesContent":["import React from \"react\";\nimport { ReactComponent as Close } from \"@webiny/icons/close.svg\";\nimport { ReactComponent as ChevronDown } from \"@webiny/icons/keyboard_arrow_down.svg\";\nimport { IconButton } from \"~/Button\";\nimport { Icon } from \"~/Icon\";\nimport { Loader } from \"~/Loader\";\n\ninterface AutoCompleteInputIconsProps {\n    displayResetAction: boolean;\n    inputSize?: \"md\" | \"lg\" | \"xl\" | null;\n    loading?: boolean;\n    disabled?: boolean;\n    onOpenChange: (open: boolean) => void;\n    onResetValue: () => void;\n}\n\nexport const AutoCompleteInputIcons = (props: AutoCompleteInputIconsProps) => {\n    return (\n        <div className={\"wby-flex wby-items-center wby-gap-sm\"}>\n            {props.loading && <Loader size={props.inputSize === \"xl\" ? \"sm\" : \"xs\"} />}\n            {props.displayResetAction && (\n                <IconButton\n                    size={props.inputSize === \"xl\" ? \"sm\" : \"xs\"} // Map button size based on the input size.\n                    variant={\"secondary\"}\n                    icon={<Icon icon={<Close />} label={\"Reset\"} />}\n                    disabled={props.disabled}\n                    onClick={event => {\n                        event.stopPropagation();\n                        props.onResetValue();\n                    }}\n                />\n            )}\n            <Icon\n                size={props.inputSize === \"xl\" ? \"lg\" : \"sm\"} // Map icon size based on the input size.\n                icon={<ChevronDown />}\n                label={\"Open list\"}\n                onClick={event => {\n                    event.stopPropagation();\n                    props.onOpenChange(true);\n                }}\n            />\n        </div>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,cAAc,IAAIC,KAAK,QAAQ,yBAAyB;AACjE,SAASD,cAAc,IAAIE,WAAW,QAAQ,uCAAuC;AACrF,SAASC,UAAU;AACnB,SAASC,IAAI;AACb,SAASC,MAAM;AAWf,OAAO,MAAMC,sBAAsB,GAAIC,KAAkC,IAAK;EAC1E,oBACIR,KAAA,CAAAS,aAAA;IAAKC,SAAS,EAAE;EAAuC,GAClDF,KAAK,CAACG,OAAO,iBAAIX,KAAA,CAAAS,aAAA,CAACH,MAAM;IAACM,IAAI,EAAEJ,KAAK,CAACK,SAAS,KAAK,IAAI,GAAG,IAAI,GAAG;EAAK,CAAE,CAAC,EACzEL,KAAK,CAACM,kBAAkB,iBACrBd,KAAA,CAAAS,aAAA,CAACL,UAAU;IACPQ,IAAI,EAAEJ,KAAK,CAACK,SAAS,KAAK,IAAI,GAAG,IAAI,GAAG,IAAK,CAAC;IAAA;IAC9CE,OAAO,EAAE,WAAY;IACrBC,IAAI,eAAEhB,KAAA,CAAAS,aAAA,CAACJ,IAAI;MAACW,IAAI,eAAEhB,KAAA,CAAAS,aAAA,CAACP,KAAK,MAAE,CAAE;MAACe,KAAK,EAAE;IAAQ,CAAE,CAAE;IAChDC,QAAQ,EAAEV,KAAK,CAACU,QAAS;IACzBC,OAAO,EAAEC,KAAK,IAAI;MACdA,KAAK,CAACC,eAAe,CAAC,CAAC;MACvBb,KAAK,CAACc,YAAY,CAAC,CAAC;IACxB;EAAE,CACL,CACJ,eACDtB,KAAA,CAAAS,aAAA,CAACJ,IAAI;IACDO,IAAI,EAAEJ,KAAK,CAACK,SAAS,KAAK,IAAI,GAAG,IAAI,GAAG,IAAK,CAAC;IAAA;IAC9CG,IAAI,eAAEhB,KAAA,CAAAS,aAAA,CAACN,WAAW,MAAE,CAAE;IACtBc,KAAK,EAAE,WAAY;IACnBE,OAAO,EAAEC,KAAK,IAAI;MACdA,KAAK,CAACC,eAAe,CAAC,CAAC;MACvBb,KAAK,CAACe,YAAY,CAAC,IAAI,CAAC;IAC5B;EAAE,CACL,CACA,CAAC;AAEd,CAAC","ignoreList":[]}

package/AutoComplete/primitives/components/AutoCompleteList.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import { CommandOptionFormatted } from "../../../Command/domain/CommandOptionFormatted";
+import { Command } from "../../../Command";
+interface AutoCompleteListProps extends React.ComponentPropsWithoutRef<typeof Command.List> {
+    options: CommandOptionFormatted[];
+    emptyMessage?: React.ReactNode;
+    empty?: boolean;
+    loading?: boolean;
+    loadingMessage?: React.ReactNode;
+    onOptionSelect: (value: string) => void;
+    optionRenderer?: (item: any, index: number) => React.ReactNode;
+}
+export declare const AutoCompleteList: ({ emptyMessage, empty, loading, loadingMessage, onOptionSelect, optionRenderer, options, ...props }: AutoCompleteListProps) => React.JSX.Element;
+export {};