@webiny/admin-ui 6.3.0 → 6.4.0-beta.1

package/MultiAutoComplete/primitives/MultiAutoCompletePrimitive.stories.js

@@ -1,659 +1,786 @@
-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 { MultiAutoCompletePrimitive } from "./MultiAutoCompletePrimitive.js";
 import { Button } from "../../Button/index.js";
 import { Icon } from "../../Icon/index.js";
 import { Tag } from "../../Tag/index.js";
 const meta = {
-  title: "Components/Form Primitives/Multi Autocomplete",
-  component: MultiAutoCompletePrimitive,
-  parameters: {
-    layout: "padded"
-  },
-  argTypes: {
-    onValuesChange: {
-      action: "onValuesChange"
+    title: "Components/Form Primitives/Multi Autocomplete",
+    component: MultiAutoCompletePrimitive,
+    parameters: {
+        layout: "padded"
     },
-    onOpenChange: {
-      action: "onOpenChange"
+    argTypes: {
+        onValuesChange: {
+            action: "onValuesChange"
+        },
+        onOpenChange: {
+            action: "onOpenChange"
+        },
+        disabled: {
+            control: {
+                type: "boolean"
+            }
+        }
     },
-    disabled: {
-      control: {
-        type: "boolean"
-      }
+    render: (args)=>{
+        const [values, setValues] = useState(args.values);
+        return /*#__PURE__*/ react.createElement("div", {
+            className: "w-full"
+        }, /*#__PURE__*/ react.createElement(MultiAutoCompletePrimitive, {
+            ...args,
+            values: values,
+            onValuesChange: setValues
+        }), /*#__PURE__*/ react.createElement("div", {
+            className: "mt-4 text-center"
+        }, "Current selected values: ", values?.join(",")));
     }
-  },
-  render: args => {
-    const [values, setValues] = useState(args.values);
-    return /*#__PURE__*/React.createElement("div", {
-      className: "w-full"
-    }, /*#__PURE__*/React.createElement(MultiAutoCompletePrimitive, Object.assign({}, args, {
-      values: values,
-      onValuesChange: setValues
-    })), /*#__PURE__*/React.createElement("div", {
-      className: "mt-4 text-center"
-    }, "Current selected values: ", values?.join(",")));
-  }
-};
-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 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))]
-};
-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))]
-};
-export const WithPredefinedValue = {
-  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"
-    }],
-    values: ["est", "ist", "brt"]
-  }
-};
-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 WithAllowFreeInput = {
-  args: {
-    ...Default.args,
-    allowFreeInput: true
-  }
-};
-export const WithUniqueValues = {
-  args: {
-    ...Default.args,
-    uniqueValues: true,
-    options: [{
-      label: "Eastern Standard Time (EST)",
-      value: "est"
-    }, {
-      label: "Central Standard Time (CST)",
-      value: "cst"
-    }, {
-      label: "Pacific Standard Time (PST)",
-      value: "pst"
-    }]
-  }
-};
-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: "🇺🇸",
-        value: "est"
-      }
-    }, {
-      label: "Central Standard Time (CST)",
-      value: "cst",
-      item: {
-        name: "Central Standard Time (CST)",
-        time_difference: "-6:00",
-        flag: "🇺🇸",
-        value: "cst"
-      }
-    }, {
-      label: "Pacific Standard Time (PST)",
-      value: "pst",
-      item: {
-        name: "Pacific Standard Time (PST)",
-        time_difference: "-8:00",
-        flag: "🇺🇸",
-        value: "pst"
-      }
-    }, {
-      label: "Greenwich Mean Time (GMT)",
-      value: "gmt",
-      item: {
-        name: "Greenwich Mean Time (GMT)",
-        time_difference: "±0:00",
-        flag: "🇬🇧",
-        value: "gmt"
-      }
-    }, {
-      label: "Central European Time (CET)",
-      value: "cet",
-      item: {
-        name: "Central European Time (CET)",
-        time_difference: "+1:00",
-        flag: "🇪🇺",
-        value: "cet"
-      }
-    }, {
-      label: "Central Africa Time (CAT)",
-      value: "cat",
-      item: {
-        name: "Central Africa Time (CAT)",
-        time_difference: "+2:00",
-        flag: "🇿🇦",
-        value: "cat"
-      }
-    }, {
-      label: "India Standard Time (IST)",
-      value: "ist",
-      item: {
-        name: "India Standard Time (IST)",
-        time_difference: "+5:30",
-        flag: "🇮🇳",
-        value: "ist"
-      }
-    }, {
-      label: "China Standard Time (CST)",
-      value: "cst_china",
-      item: {
-        name: "China Standard Time (CST)",
-        time_difference: "+8:00",
-        flag: "🇨🇳",
-        value: "cst_china"
-      }
-    }, {
-      label: "Japan Standard Time (JST)",
-      value: "jst",
-      item: {
-        name: "Japan Standard Time (JST)",
-        time_difference: "+9:00",
-        flag: "🇯🇵",
-        value: "jst"
-      }
-    }, {
-      label: "Australian Western Standard Time (AWST)",
-      value: "awst",
-      item: {
-        name: "Australian Western Standard Time (AWST)",
-        time_difference: "+8:00",
-        flag: "🇦🇺",
-        value: "awst"
-      }
-    }, {
-      label: "New Zealand Standard Time (NZST)",
-      value: "nzst",
-      item: {
-        name: "New Zealand Standard Time (NZST)",
-        time_difference: "+12:00",
-        flag: "🇳🇿",
-        value: "nzst"
-      }
-    }, {
-      label: "Fiji Time (FJT)",
-      value: "fjt",
-      item: {
-        name: "Fiji Time (FJT)",
-        time_difference: "+12:00",
-        flag: "🇫🇯",
-        value: "fjt"
-      }
-    }, {
-      label: "Argentina Time (ART)",
-      value: "art",
-      item: {
-        name: "Argentina Time (ART)",
-        time_difference: "-3:00",
-        flag: "🇦🇷",
-        value: "art"
-      }
-    }, {
-      label: "Bolivia Time (BOT)",
-      value: "bot",
-      item: {
-        name: "Bolivia Time (BOT)",
-        time_difference: "-4:00",
-        flag: "🇧🇴",
-        value: "bot"
-      }
-    }, {
-      label: "Brasilia Time (BRT)",
-      value: "brt",
-      item: {
-        name: "Brasilia Time (BRT)",
-        time_difference: "-3:00",
-        flag: "🇧🇷",
-        value: "brt"
-      }
-    }],
-    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 MultiAutoCompletePrimitive_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)"
+        ]
+    }
+};
+const MediumSize = {
+    args: {
+        ...Default.args,
+        size: "md"
+    }
+};
+const LargeSize = {
+    args: {
+        ...Default.args,
+        size: "lg"
+    }
+};
+const ExtraLargeSize = {
+    args: {
+        ...Default.args,
+        size: "xl"
+    }
+};
+const WithStartIcon = {
+    args: {
+        ...Default.args,
+        startIcon: /*#__PURE__*/ react.createElement(Icon, {
+            label: "Search",
+            icon: /*#__PURE__*/ react.createElement(ReactComponent, null)
+        })
+    }
+};
+const WithLoading = {
+    args: {
+        ...Default.args,
+        loading: true
+    }
+};
+const WithoutResetAction = {
+    args: {
+        ...Default.args,
+        displayResetAction: false
+    }
+};
+const PrimaryVariant = {
+    args: {
+        ...Default.args,
+        variant: "primary"
+    }
+};
+const PrimaryVariantDisabled = {
+    args: {
+        ...PrimaryVariant.args,
+        disabled: true
+    }
+};
+const PrimaryVariantInvalid = {
+    args: {
+        ...PrimaryVariant.args,
+        invalid: true
+    }
+};
+const SecondaryVariant = {
+    args: {
+        variant: "secondary",
+        placeholder: "Custom placeholder"
+    }
+};
+const SecondaryVariantDisabled = {
+    args: {
+        ...SecondaryVariant.args,
+        disabled: true
+    }
+};
+const SecondaryVariantInvalid = {
+    args: {
+        ...SecondaryVariant.args,
+        invalid: true
+    }
+};
+const GhostVariant = {
+    args: {
+        variant: "ghost",
+        placeholder: "Custom placeholder"
+    }
+};
+const GhostVariantDisabled = {
+    args: {
+        ...GhostVariant.args,
+        disabled: true
+    }
+};
+const GhostVariantInvalid = {
+    args: {
+        ...GhostVariant.args,
+        invalid: true
+    }
+};
+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 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 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 WithPredefinedValue = {
+    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"
+            }
+        ],
+        values: [
+            "est",
+            "ist",
+            "brt"
+        ]
+    }
+};
+const WithCustomPlaceholder = {
+    args: {
+        ...Default.args,
+        placeholder: "Custom placeholder"
+    }
+};
+const WithCustomEmptyMessage = {
+    args: {
+        ...Default.args,
+        emptyMessage: "Custom empty message"
+    }
+};
+const WithCustomInitialMessage = {
+    args: {
+        ...Default.args,
+        initialMessage: "Custom initial message.",
+        options: []
+    }
+};
+const WithAllowFreeInput = {
+    args: {
+        ...Default.args,
+        allowFreeInput: true
+    }
+};
+const WithUniqueValues = {
+    args: {
+        ...Default.args,
+        uniqueValues: true,
+        options: [
+            {
+                label: "Eastern Standard Time (EST)",
+                value: "est"
+            },
+            {
+                label: "Central Standard Time (CST)",
+                value: "cst"
+            },
+            {
+                label: "Pacific Standard Time (PST)",
+                value: "pst"
+            }
+        ]
+    }
+};
+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 WithCustomOptionRenderer = {
+    args: {
+        ...Default.args,
+        options: [
+            {
+                label: "Eastern Standard Time (EST)",
+                value: "est",
+                item: {
+                    name: "Eastern Standard Time (EST)",
+                    time_difference: "-5:00",
+                    flag: "🇺🇸",
+                    value: "est"
+                }
+            },
+            {
+                label: "Central Standard Time (CST)",
+                value: "cst",
+                item: {
+                    name: "Central Standard Time (CST)",
+                    time_difference: "-6:00",
+                    flag: "🇺🇸",
+                    value: "cst"
+                }
+            },
+            {
+                label: "Pacific Standard Time (PST)",
+                value: "pst",
+                item: {
+                    name: "Pacific Standard Time (PST)",
+                    time_difference: "-8:00",
+                    flag: "🇺🇸",
+                    value: "pst"
+                }
+            },
+            {
+                label: "Greenwich Mean Time (GMT)",
+                value: "gmt",
+                item: {
+                    name: "Greenwich Mean Time (GMT)",
+                    time_difference: "±0:00",
+                    flag: "🇬🇧",
+                    value: "gmt"
+                }
+            },
+            {
+                label: "Central European Time (CET)",
+                value: "cet",
+                item: {
+                    name: "Central European Time (CET)",
+                    time_difference: "+1:00",
+                    flag: "🇪🇺",
+                    value: "cet"
+                }
+            },
+            {
+                label: "Central Africa Time (CAT)",
+                value: "cat",
+                item: {
+                    name: "Central Africa Time (CAT)",
+                    time_difference: "+2:00",
+                    flag: "🇿🇦",
+                    value: "cat"
+                }
+            },
+            {
+                label: "India Standard Time (IST)",
+                value: "ist",
+                item: {
+                    name: "India Standard Time (IST)",
+                    time_difference: "+5:30",
+                    flag: "🇮🇳",
+                    value: "ist"
+                }
+            },
+            {
+                label: "China Standard Time (CST)",
+                value: "cst_china",
+                item: {
+                    name: "China Standard Time (CST)",
+                    time_difference: "+8:00",
+                    flag: "🇨🇳",
+                    value: "cst_china"
+                }
+            },
+            {
+                label: "Japan Standard Time (JST)",
+                value: "jst",
+                item: {
+                    name: "Japan Standard Time (JST)",
+                    time_difference: "+9:00",
+                    flag: "🇯🇵",
+                    value: "jst"
+                }
+            },
+            {
+                label: "Australian Western Standard Time (AWST)",
+                value: "awst",
+                item: {
+                    name: "Australian Western Standard Time (AWST)",
+                    time_difference: "+8:00",
+                    flag: "🇦🇺",
+                    value: "awst"
+                }
+            },
+            {
+                label: "New Zealand Standard Time (NZST)",
+                value: "nzst",
+                item: {
+                    name: "New Zealand Standard Time (NZST)",
+                    time_difference: "+12:00",
+                    flag: "🇳🇿",
+                    value: "nzst"
+                }
+            },
+            {
+                label: "Fiji Time (FJT)",
+                value: "fjt",
+                item: {
+                    name: "Fiji Time (FJT)",
+                    time_difference: "+12:00",
+                    flag: "🇫🇯",
+                    value: "fjt"
+                }
+            },
+            {
+                label: "Argentina Time (ART)",
+                value: "art",
+                item: {
+                    name: "Argentina Time (ART)",
+                    time_difference: "-3:00",
+                    flag: "🇦🇷",
+                    value: "art"
+                }
+            },
+            {
+                label: "Bolivia Time (BOT)",
+                value: "bot",
+                item: {
+                    name: "Bolivia Time (BOT)",
+                    time_difference: "-4:00",
+                    flag: "🇧🇴",
+                    value: "bot"
+                }
+            },
+            {
+                label: "Brasilia Time (BRT)",
+                value: "brt",
+                item: {
+                    name: "Brasilia Time (BRT)",
+                    time_difference: "-3:00",
+                    flag: "🇧🇷",
+                    value: "brt"
+                }
+            }
+        ],
+        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))
+    }
+};
+const WithCustomSelectedOptionRenderer = {
+    args: {
+        ...WithCustomOptionRenderer.args
+    },
+    render: (args)=>{
+        const [values, setValues] = useState(args.values || []);
+        const selectedOptionRenderer = (item)=>/*#__PURE__*/ react.createElement(Tag, {
+                variant: "neutral-base",
+                content: /*#__PURE__*/ react.createElement(react.Fragment, null, item.flag, " ", item.name),
+                onDismiss: ()=>setValues(values.filter((value)=>value !== item.value))
+            });
+        return /*#__PURE__*/ react.createElement("div", {
+            className: "w-full"
+        }, /*#__PURE__*/ react.createElement(MultiAutoCompletePrimitive, {
+            ...args,
+            values: values,
+            onValuesChange: setValues,
+            selectedOptionRenderer: selectedOptionRenderer
+        }), /*#__PURE__*/ react.createElement("div", {
+            className: "mt-4 text-center"
+        }, "Current selected values: ", values?.join(",")));
+    }
+};
+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 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 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 [values, setValues] = useState(args.values);
+        return /*#__PURE__*/ react.createElement("div", {
+            className: "w-full"
+        }, /*#__PURE__*/ react.createElement(MultiAutoCompletePrimitive, {
+            ...args,
+            values: values,
+            onValuesChange: setValues
+        }), /*#__PURE__*/ react.createElement("div", {
+            className: "mt-4 text-center"
+        }, /*#__PURE__*/ react.createElement(Button, {
+            text: "Reset",
+            onClick: ()=>setValues(args.values)
+        })), /*#__PURE__*/ react.createElement("div", {
+            className: "mt-4 text-center"
+        }, "Current selected values: ", values?.join(",")));
     }
-  }
-};
-export const WithCustomSelectedOptionRenderer = {
-  args: {
-    ...WithCustomOptionRenderer.args
-  },
-  render: args => {
-    const [values, setValues] = useState(args.values || []);
-    const selectedOptionRenderer = item => {
-      return /*#__PURE__*/React.createElement(Tag, {
-        variant: "neutral-base",
-        content: /*#__PURE__*/React.createElement(React.Fragment, null, item.flag, " ", item.name),
-        onDismiss: () => setValues(values.filter(value => value !== item.value))
-      });
-    };
-    return /*#__PURE__*/React.createElement("div", {
-      className: "w-full"
-    }, /*#__PURE__*/React.createElement(MultiAutoCompletePrimitive, Object.assign({}, args, {
-      values: values,
-      onValuesChange: setValues,
-      selectedOptionRenderer: selectedOptionRenderer
-    })), /*#__PURE__*/React.createElement("div", {
-      className: "mt-4 text-center"
-    }, "Current selected values: ", values?.join(",")));
-  }
-};
-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 [values, setValues] = useState(args.values);
-    return /*#__PURE__*/React.createElement("div", {
-      className: "w-full"
-    }, /*#__PURE__*/React.createElement(MultiAutoCompletePrimitive, Object.assign({}, args, {
-      values: values,
-      onValuesChange: setValues
-    })), /*#__PURE__*/React.createElement("div", {
-      className: "mt-4 text-center"
-    }, /*#__PURE__*/React.createElement(Button, {
-      text: "Reset",
-      onClick: () => setValues(args.values)
-    })), /*#__PURE__*/React.createElement("div", {
-      className: "mt-4 text-center"
-    }, "Current selected values: ", values?.join(",")));
-  }
 };
+export default MultiAutoCompletePrimitive_stories;
+export { Default, ExtraLargeSize, GhostNegativeVariant, GhostNegativeVariantDisabled, GhostNegativeVariantInvalid, GhostVariant, GhostVariantDisabled, GhostVariantInvalid, LargeSize, MediumSize, PrimaryVariant, PrimaryVariantDisabled, PrimaryVariantInvalid, SecondaryVariant, SecondaryVariantDisabled, SecondaryVariantInvalid, WithAllowFreeInput, WithCustomEmptyMessage, WithCustomInitialMessage, WithCustomOptionRenderer, WithCustomPlaceholder, WithCustomSelectedOptionRenderer, WithDisabledOptions, WithExternalValueControl, WithFormattedOptions, WithLoading, WithPredefinedValue, WithSeparators, WithStartIcon, WithUniqueValues, WithoutResetAction };
 
 //# sourceMappingURL=MultiAutoCompletePrimitive.stories.js.map