@webiny/admin-ui 6.3.0-beta.4 → 6.4.0-beta.0

package/AutoComplete/primitives/AutoCompletePrimitive.stories.js

@@ -1,548 +1,652 @@
-import React, { useState } from "react";
-import { ReactComponent as SearchIcon } from "@webiny/icons/search.svg";
+import react, { useState } from "react";
+import { ReactComponent } from "@webiny/icons/search.svg";
 import { AutoCompletePrimitive } from "./AutoCompletePrimitive.js";
 import { Button } from "../../Button/index.js";
 import { Icon } from "../../Icon/index.js";
 const meta = {
-  title: "Components/Form Primitives/Autocomplete",
-  component: AutoCompletePrimitive,
-  parameters: {
-    layout: "padded"
-  },
-  argTypes: {
-    onValueChange: {
-      action: "onValueChange"
+    title: "Components/Form Primitives/Autocomplete",
+    component: AutoCompletePrimitive,
+    parameters: {
+        layout: "padded"
     },
-    onOpenChange: {
-      action: "onOpenChange"
+    argTypes: {
+        onValueChange: {
+            action: "onValueChange"
+        },
+        onOpenChange: {
+            action: "onOpenChange"
+        }
+    },
+    render: (args)=>{
+        const [value, setValue] = useState(args.value);
+        return /*#__PURE__*/ react.createElement("div", {
+            className: "w-full"
+        }, /*#__PURE__*/ react.createElement(AutoCompletePrimitive, {
+            ...args,
+            value: value,
+            onValueChange: setValue
+        }), /*#__PURE__*/ react.createElement("div", {
+            className: "mt-4 text-center"
+        }, "Current selected value: ", /*#__PURE__*/ react.createElement("pre", null, value)));
     }
-  },
-  render: args => {
-    const [value, setValue] = useState(args.value);
-    return /*#__PURE__*/React.createElement("div", {
-      className: "w-full"
-    }, /*#__PURE__*/React.createElement(AutoCompletePrimitive, Object.assign({}, args, {
-      value: value,
-      onValueChange: setValue
-    })), /*#__PURE__*/React.createElement("div", {
-      className: "mt-4 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)"]
-  }
+const AutoCompletePrimitive_stories = meta;
+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"
-  }
+const MediumSize = {
+    args: {
+        ...Default.args,
+        size: "md"
+    }
 };
-export const LargeSize = {
-  args: {
-    ...Default.args,
-    size: "lg"
-  }
+const LargeSize = {
+    args: {
+        ...Default.args,
+        size: "lg"
+    }
 };
-export const ExtraLargeSize = {
-  args: {
-    ...Default.args,
-    size: "xl"
-  }
+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)
-    })
-  }
+const WithStartIcon = {
+    args: {
+        ...Default.args,
+        startIcon: /*#__PURE__*/ react.createElement(Icon, {
+            label: "Search",
+            icon: /*#__PURE__*/ react.createElement(ReactComponent, null)
+        })
+    }
 };
-export const WithLoading = {
-  args: {
-    ...Default.args,
-    loading: true
-  }
+const WithLoading = {
+    args: {
+        ...Default.args,
+        loading: true
+    }
 };
-export const WithoutResetAction = {
-  args: {
-    ...Default.args,
-    displayResetAction: false
-  }
+const WithoutResetAction = {
+    args: {
+        ...Default.args,
+        displayResetAction: false
+    }
 };
-export const PrimaryVariant = {
-  args: {
-    ...Default.args,
-    variant: "primary"
-  }
+const PrimaryVariant = {
+    args: {
+        ...Default.args,
+        variant: "primary"
+    }
 };
-export const PrimaryVariantDisabled = {
-  args: {
-    ...PrimaryVariant.args,
-    disabled: true
-  }
+const PrimaryVariantDisabled = {
+    args: {
+        ...PrimaryVariant.args,
+        disabled: true
+    }
 };
-export const PrimaryVariantInvalid = {
-  args: {
-    ...PrimaryVariant.args,
-    invalid: true
-  }
+const PrimaryVariantInvalid = {
+    args: {
+        ...PrimaryVariant.args,
+        invalid: true
+    }
 };
-export const SecondaryVariant = {
-  args: {
-    ...Default.args,
-    variant: "secondary",
-    placeholder: "Custom placeholder"
-  }
+const SecondaryVariant = {
+    args: {
+        ...Default.args,
+        variant: "secondary",
+        placeholder: "Custom placeholder"
+    }
 };
-export const SecondaryVariantDisabled = {
-  args: {
-    ...SecondaryVariant.args,
-    disabled: true
-  }
+const SecondaryVariantDisabled = {
+    args: {
+        ...SecondaryVariant.args,
+        disabled: true
+    }
 };
-export const SecondaryVariantInvalid = {
-  args: {
-    ...SecondaryVariant.args,
-    invalid: true
-  }
+const SecondaryVariantInvalid = {
+    args: {
+        ...SecondaryVariant.args,
+        invalid: true
+    }
 };
-export const GhostVariant = {
-  args: {
-    ...Default.args,
-    variant: "ghost",
-    placeholder: "Custom placeholder"
-  }
+const GhostVariant = {
+    args: {
+        ...Default.args,
+        variant: "ghost",
+        placeholder: "Custom placeholder"
+    }
 };
-export const GhostVariantDisabled = {
-  args: {
-    ...GhostVariant.args,
-    disabled: true
-  }
+const GhostVariantDisabled = {
+    args: {
+        ...GhostVariant.args,
+        disabled: true
+    }
 };
-export const GhostVariantInvalid = {
-  args: {
-    ...GhostVariant.args,
-    invalid: true
-  }
+const GhostVariantInvalid = {
+    args: {
+        ...GhostVariant.args,
+        invalid: true
+    }
 };
-export const GhostNegativeVariant = {
-  args: {
-    ...Default.args,
-    variant: "ghost-negative",
-    placeholder: "Custom placeholder"
-  },
-  decorators: [Story => /*#__PURE__*/React.createElement("div", {
-    className: "bg-neutral-dark text-neutral-light p-xl"
-  }, /*#__PURE__*/React.createElement(Story, null))]
+const GhostNegativeVariant = {
+    args: {
+        ...Default.args,
+        variant: "ghost-negative",
+        placeholder: "Custom placeholder"
+    },
+    decorators: [
+        (Story)=>/*#__PURE__*/ react.createElement("div", {
+                className: "bg-neutral-dark text-neutral-light p-xl"
+            }, /*#__PURE__*/ react.createElement(Story, null))
+    ]
 };
-export const GhostNegativeVariantDisabled = {
-  args: {
-    ...GhostNegativeVariant.args,
-    disabled: true
-  },
-  decorators: [Story => /*#__PURE__*/React.createElement("div", {
-    className: "bg-neutral-dark text-neutral-light p-xl"
-  }, /*#__PURE__*/React.createElement(Story, null))]
+const GhostNegativeVariantDisabled = {
+    args: {
+        ...GhostNegativeVariant.args,
+        disabled: true
+    },
+    decorators: [
+        (Story)=>/*#__PURE__*/ react.createElement("div", {
+                className: "bg-neutral-dark text-neutral-light p-xl"
+            }, /*#__PURE__*/ react.createElement(Story, null))
+    ]
 };
-export const GhostNegativeVariantInvalid = {
-  args: {
-    ...GhostNegativeVariant.args,
-    invalid: true
-  },
-  decorators: [Story => /*#__PURE__*/React.createElement("div", {
-    className: "bg-neutral-dark text-neutral-light p-xl"
-  }, /*#__PURE__*/React.createElement(Story, null))]
+const GhostNegativeVariantInvalid = {
+    args: {
+        ...GhostNegativeVariant.args,
+        invalid: true
+    },
+    decorators: [
+        (Story)=>/*#__PURE__*/ react.createElement("div", {
+                className: "bg-neutral-dark text-neutral-light p-xl"
+            }, /*#__PURE__*/ react.createElement(Story, null))
+    ]
 };
-export const WithPredefinedValue = {
-  args: {
-    ...Default.args,
-    value: "Eastern Standard Time (EST)"
-  }
+const WithPredefinedValue = {
+    args: {
+        ...Default.args,
+        value: "Eastern Standard Time (EST)"
+    }
 };
-export const WithCustomPlaceholder = {
-  args: {
-    ...Default.args,
-    placeholder: "Custom placeholder"
-  }
+const WithCustomPlaceholder = {
+    args: {
+        ...Default.args,
+        placeholder: "Custom placeholder"
+    }
 };
-export const WithCustomEmptyMessage = {
-  args: {
-    ...Default.args,
-    emptyMessage: "Custom empty message"
-  }
+const WithCustomEmptyMessage = {
+    args: {
+        ...Default.args,
+        emptyMessage: "Custom empty message"
+    }
 };
-export const WithCustomInitialMessage = {
-  args: {
-    ...Default.args,
-    initialMessage: "Custom initial message.",
-    options: []
-  }
+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"
-    }]
-  }
+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: "w-full flex justify-between align-middle"
-      }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
-        className: "mr-sm"
-      }, item.flag), item.name), /*#__PURE__*/React.createElement("div", {
-        className: "text-sm"
-      }, item.time_difference));
+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)=>/*#__PURE__*/ react.createElement("div", {
+                className: "w-full flex justify-between align-middle"
+            }, /*#__PURE__*/ react.createElement("div", null, /*#__PURE__*/ react.createElement("span", {
+                className: "mr-sm"
+            }, item.flag), item.name), /*#__PURE__*/ react.createElement("div", {
+                className: "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"
-    }]
-  }
+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"
-    }]
-  }
+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: "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: "mt-4 text-center"
-    }, /*#__PURE__*/React.createElement(Button, {
-      text: "Reset",
-      onClick: () => setValue("")
-    })), /*#__PURE__*/React.createElement("div", {
-      className: "mt-4 text-center"
-    }, "Current selected value: ", /*#__PURE__*/React.createElement("pre", null, value)));
-  }
+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: "w-full"
+        }, /*#__PURE__*/ react.createElement("div", null, /*#__PURE__*/ react.createElement(AutoCompletePrimitive, {
+            ...args,
+            value: value,
+            onValueChange: (value)=>setValue(value)
+        })), /*#__PURE__*/ react.createElement("div", {
+            className: "mt-4 text-center"
+        }, /*#__PURE__*/ react.createElement(Button, {
+            text: "Reset",
+            onClick: ()=>setValue("")
+        })), /*#__PURE__*/ react.createElement("div", {
+            className: "mt-4 text-center"
+        }, "Current selected value: ", /*#__PURE__*/ react.createElement("pre", null, value)));
+    }
 };
+export default AutoCompletePrimitive_stories;
+export { Default, ExtraLargeSize, GhostNegativeVariant, GhostNegativeVariantDisabled, GhostNegativeVariantInvalid, GhostVariant, GhostVariantDisabled, GhostVariantInvalid, LargeSize, MediumSize, PrimaryVariant, PrimaryVariantDisabled, PrimaryVariantInvalid, SecondaryVariant, SecondaryVariantDisabled, SecondaryVariantInvalid, WithCustomEmptyMessage, WithCustomInitialMessage, WithCustomOptionRenderer, WithCustomPlaceholder, WithDisabledOptions, WithExternalValueControl, WithFormattedOptions, WithLoading, WithPredefinedValue, WithSeparators, WithStartIcon, WithoutResetAction };
 
 //# sourceMappingURL=AutoCompletePrimitive.stories.js.map