@webiny/admin-ui 0.0.0-unstable.e53eceafb5

package/Alert/Alert.mdx

@@ -0,0 +1,192 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+
+import * as AlertStories from './Alert.stories';
+
+<Meta of={AlertStories} />
+
+# Alert
+
+Alert component is an element used to display important messages to users, such as notifications, warnings, errors, or success confirmations. Its purpose is to bring attention to users by providing feedback on user actions or system states, ensuring users are informed about critical information. Alerts are relevant for guiding user behaviour, preventing errors, and improving user experience by delivering timely feedback and enhancing the communication between the user and the system.
+
+## Usage
+
+<Canvas of={AlertStories.Documentation} source={ { code:
+`// Code for a Info Alert
+
+import React from "react";
+
+import { Alert } from "@webiny/admin-ui";
+
+const AlertExample = () => {
+    return (
+        <Alert type={"info"}>
+            <>
+                This type of notification is suitable for general usage where there’s no need for
+                accent. And <a href={"#"}>this thing here</a> is a short link.
+            </>
+        </Alert>
+    );
+};
+
+export default AlertExample;
+
+` } }
+        additionalActions={[
+            {
+                title: 'Open in GitHub',
+                onClick: () => {
+                    window.open(
+                        'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/Alert/Alert.tsx',
+                        '_blank'
+                    );
+                },
+            }
+        ]}
+/>
+
+<Controls of={AlertStories.Documentation} exclude={"children"}/>
+
+```tsx
+import React from "react";
+
+import { Alert } from "@webiny/admin-ui";
+
+const AlertExample = () => {
+    return (
+        <Alert type={"info"}>
+            <>
+                This type of notification is suitable for general usage where there’s no need for
+                accent. And <a href={"#"}>this thing here</a> is a short link.
+            </>
+        </Alert>
+    );
+};
+
+export default AlertExample;
+```
+
+## Examples
+
+### Info
+
+<Canvas of={AlertStories.Info} source={ { code: `
+// Code for an Info banner
+
+import { Alert } from '@webiny/admin-ui';
+
+<Alert type={"info"}>
+    <>
+        This type of notification is suitable for general usage where there’s no need for
+        accent. And <a href={"#"}>this thing here</a> is a short link.
+    </>
+</Alert>
+` } }
+/>
+
+### Success
+
+<Canvas of={AlertStories.Success} source={ { code: `
+// Code for a Success banner
+
+import { Alert } from '@webiny/admin-ui';
+
+<Alert type={"success"}>
+    <>
+        This is a success alert, used when something occurred successfully. And{" "}
+        <a href={"#"}>this thing here</a> is a short link.
+    </>
+</Alert>
+` } }
+/>
+
+
+### Warning
+
+<Canvas of={AlertStories.Warning} source={ { code: `
+// Code for a Warning banner
+
+import { Alert } from '@webiny/admin-ui';
+
+<Alert type={"warning"}>
+    <>
+        This is a warning alert, used when something of strong relevance needs to be
+        communicated. And <a href={"#"}>this thing here</a> is a short link.
+    </>
+</Alert>
+` } }
+/>
+
+### Danger
+
+<Canvas of={AlertStories.Danger} source={ { code: `
+// Code for a Danger banner
+
+import { Alert } from '@webiny/admin-ui';
+
+<Alert type={"danger"}>
+    <>
+        This is a danger alert, used when something critical needs to be communicated. And{" "}
+        <a href={"#"}>this thing here</a> is a short link.
+    </>
+</Alert>
+` } }
+/>
+
+### With Close Button
+
+<Canvas of={AlertStories.WithCloseButton} source={ { code: `
+// Code for a banner with a Close Button and an onClose action
+
+import { Alert } from '@webiny/admin-ui';
+
+<Alert type={"info"} showCloseButton={true} onClose={() => alert("Close button clicked.")}>
+    <>
+        An alert that can be closed.
+    </>
+</Alert>
+` } }
+/>
+
+### With Action
+
+<Canvas of={AlertStories.WithAction} source={ { code: `
+// Code for a banner with a close button and a action button
+
+import { Alert } from '@webiny/admin-ui';
+
+<Alert type={"info"} showCloseButton={true} onClose={() => alert("Close button clicked.")}
+        actions={(
+            <Alert.Action text={"Button"} onClick={() => alert("Custom action button clicked.")} />
+        )}>
+    <>
+        An alert that can be closed and also has action button.
+    </>
+</Alert>
+` } }
+/>
+
+## Anatomy
+
+### Options
+<img src="/images/storybook/alert/options.png" alt="Options"/>
+
+### Style
+<img src="/images/storybook/alert/style.png" alt="Style"/>
+
+### Type
+<img src="/images/storybook/alert/type.png" alt="Type"/>
+
+### Examples
+<img src="/images/storybook/alert/examples.png" alt="Examples"/>
+
+## Usage
+
+### Full width banner
+<img src="/images/storybook/alert/full-width-banner.png" alt="Full width banner"/>
+
+
+### Floating element
+<img src="/images/storybook/alert/floating-element.png" alt="Floating element"/>
+
+### Nested element
+<img src="/images/storybook/alert/nested-element.png" alt="Nested element"/>

package/Alert/Alert.stories.d.ts

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Alert } from "./Alert";
+declare const meta: Meta<typeof Alert>;
+export default meta;
+type Story = StoryObj<typeof Alert>;
+export declare const Default: Story;
+export declare const Info: Story;
+export declare const InfoStrong: Story;
+export declare const Success: Story;
+export declare const SuccessStrong: Story;
+export declare const Warning: Story;
+export declare const WarningStrong: Story;
+export declare const Danger: Story;
+export declare const DangerStrong: Story;
+export declare const WithCloseButton: Story;
+export declare const WithAction: Story;
+export declare const Documentation: Story;

package/Alert/Alert.stories.js

@@ -0,0 +1,165 @@
+import { Alert } from "./Alert";
+import React from "react";
+const meta = {
+  title: "Components/Alert",
+  component: Alert,
+  argTypes: {},
+  decorators: [Story => /*#__PURE__*/React.createElement("div", {
+    className: "wby-w-[700px]"
+  }, /*#__PURE__*/React.createElement(Story, null))]
+};
+export default meta;
+export const Default = {
+  args: {
+    showCloseButton: true,
+    children: "This is an alert. Play around with different properties to see how it looks."
+  },
+  argTypes: {
+    type: {
+      control: "select",
+      options: ["info", "success", "warning", "danger"]
+    },
+    variant: {
+      control: "select",
+      options: ["strong", "subtle"]
+    }
+  }
+};
+export const Info = {
+  args: {
+    ...Default.args,
+    type: "info",
+    children: /*#__PURE__*/React.createElement(React.Fragment, null, "This type of notification is suitable for general usage where there\u2019s no need for accent. And ", /*#__PURE__*/React.createElement("a", {
+      href: "#"
+    }, "this thing here"), " is a short link.")
+  }
+};
+export const InfoStrong = {
+  name: "Info (strong)",
+  args: {
+    ...Info.args,
+    variant: "strong",
+    children: /*#__PURE__*/React.createElement(React.Fragment, null, "This type of notification is suitable for general usage where there is a need for strong accent. And ", /*#__PURE__*/React.createElement("a", {
+      href: "#"
+    }, "this thing here"), " is a short link.")
+  }
+};
+export const Success = {
+  args: {
+    ...Default.args,
+    type: "success",
+    children: /*#__PURE__*/React.createElement(React.Fragment, null, "This is a success alert, used when something occurred successfully. And", " ", /*#__PURE__*/React.createElement("a", {
+      href: "#"
+    }, "this thing here"), " is a short link.")
+  }
+};
+export const SuccessStrong = {
+  name: "Success (strong)",
+  args: {
+    ...Success.args,
+    variant: "strong",
+    children: /*#__PURE__*/React.createElement(React.Fragment, null, "This is a success alert, used when something occurred successfully and needs to be prominent. And ", /*#__PURE__*/React.createElement("a", {
+      href: "#"
+    }, "this thing here"), " is a short link.")
+  }
+};
+export const Warning = {
+  args: {
+    ...Default.args,
+    children: /*#__PURE__*/React.createElement(React.Fragment, null, "This is a warning alert, used when something of strong relevance needs to be communicated. And ", /*#__PURE__*/React.createElement("a", {
+      href: "#"
+    }, "this thing here"), " is a short link."),
+    type: "warning"
+  }
+};
+export const WarningStrong = {
+  name: "Warning (strong)",
+  args: {
+    ...Warning.args,
+    children: /*#__PURE__*/React.createElement(React.Fragment, null, "This is a warning alert, used when something of strong relevance needs to be prominently communicated. And ", /*#__PURE__*/React.createElement("a", {
+      href: "#"
+    }, "this thing here"), " is a short link."),
+    variant: "strong"
+  }
+};
+export const Danger = {
+  args: {
+    ...Default.args,
+    children: /*#__PURE__*/React.createElement(React.Fragment, null, "This is a danger alert, used when something critical needs to be communicated. And", " ", /*#__PURE__*/React.createElement("a", {
+      href: "#"
+    }, "this thing here"), " is a short link."),
+    type: "danger"
+  }
+};
+export const DangerStrong = {
+  name: "Danger (strong)",
+  args: {
+    ...Danger.args,
+    children: /*#__PURE__*/React.createElement(React.Fragment, null, "This is a danger alert, used when something critical needs to be prominently communicated. And ", /*#__PURE__*/React.createElement("a", {
+      href: "#"
+    }, "this thing here"), " is a short link."),
+    variant: "strong"
+  }
+};
+export const WithCloseButton = {
+  name: "With close button",
+  args: {
+    ...Default.args,
+    children: /*#__PURE__*/React.createElement(React.Fragment, null, "An alert that can be closed."),
+    showCloseButton: true,
+    onClose: () => alert("Close button clicked.")
+  }
+};
+export const WithAction = {
+  name: "With action",
+  args: {
+    ...WithCloseButton.args,
+    children: /*#__PURE__*/React.createElement(React.Fragment, null, "An alert that can be closed and also has action button."),
+    showCloseButton: true,
+    actions: /*#__PURE__*/React.createElement(Alert.Action, {
+      text: "Button",
+      onClick: () => alert("Custom action button clicked.")
+    })
+  }
+};
+export const Documentation = {
+  args: {
+    type: "info",
+    variant: "subtle",
+    showCloseButton: false,
+    children: /*#__PURE__*/React.createElement(React.Fragment, null, "This type of notification is suitable for general usage where there\u2019s no need for accent. And ", /*#__PURE__*/React.createElement("a", {
+      href: "#"
+    }, "this thing here"), " is a short link."),
+    onClose: () => {},
+    actions: undefined
+  },
+  argTypes: {
+    type: {
+      description: "Type",
+      control: "select",
+      options: ["info", "success", "warning", "danger"],
+      defaultValue: "info"
+    },
+    variant: {
+      description: "Variant",
+      control: "select",
+      options: ["subtle", "strong"],
+      defaultValue: "subtle"
+    },
+    showCloseButton: {
+      description: "Show close button, please refer to the 'With Close Button' example below for details.",
+      control: "boolean",
+      defaultValue: false
+    },
+    onClose: {
+      description: "Please refer to the 'With Close Button' example below for details.",
+      control: "none"
+    },
+    actions: {
+      description: "Please refer to the 'With Action' example below for details.",
+      control: "none"
+    }
+  }
+};
+
+//# sourceMappingURL=Alert.stories.js.map

package/Alert/Alert.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Alert","React","meta","title","component","argTypes","decorators","Story","createElement","className","Default","args","showCloseButton","children","type","control","options","variant","Info","Fragment","href","InfoStrong","name","Success","SuccessStrong","Warning","WarningStrong","Danger","DangerStrong","WithCloseButton","onClose","alert","WithAction","actions","Action","text","onClick","Documentation","undefined","description","defaultValue"],"sources":["Alert.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react\";\nimport { Alert } from \"./Alert\";\nimport React from \"react\";\n\nconst meta: Meta<typeof Alert> = {\n    title: \"Components/Alert\",\n    component: Alert,\n    argTypes: {},\n    decorators: [\n        Story => (\n            <div className=\"wby-w-[700px]\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof Alert>;\n\nexport const Default: Story = {\n    args: {\n        showCloseButton: true,\n        children: \"This is an alert. Play around with different properties to see how it looks.\"\n    },\n    argTypes: {\n        type: {\n            control: \"select\",\n            options: [\"info\", \"success\", \"warning\", \"danger\"]\n        },\n        variant: {\n            control: \"select\",\n            options: [\"strong\", \"subtle\"]\n        }\n    }\n};\n\nexport const Info: Story = {\n    args: {\n        ...Default.args,\n        type: \"info\",\n        children: (\n            <>\n                This type of notification is suitable for general usage where there’s no need for\n                accent. And <a href={\"#\"}>this thing here</a> is a short link.\n            </>\n        )\n    }\n};\n\nexport const InfoStrong: Story = {\n    name: \"Info (strong)\",\n    args: {\n        ...Info.args,\n        variant: \"strong\",\n        children: (\n            <>\n                This type of notification is suitable for general usage where there is a need for\n                strong accent. And <a href={\"#\"}>this thing here</a> is a short link.\n            </>\n        )\n    }\n};\n\nexport const Success: Story = {\n    args: {\n        ...Default.args,\n        type: \"success\",\n        children: (\n            <>\n                This is a success alert, used when something occurred successfully. And{\" \"}\n                <a href={\"#\"}>this thing here</a> is a short link.\n            </>\n        )\n    }\n};\n\nexport const SuccessStrong: Story = {\n    name: \"Success (strong)\",\n    args: {\n        ...Success.args,\n        variant: \"strong\",\n        children: (\n            <>\n                This is a success alert, used when something occurred successfully and needs to be\n                prominent. And <a href={\"#\"}>this thing here</a> is a short link.\n            </>\n        )\n    }\n};\n\nexport const Warning: Story = {\n    args: {\n        ...Default.args,\n        children: (\n            <>\n                This is a warning alert, used when something of strong relevance needs to be\n                communicated. And <a href={\"#\"}>this thing here</a> is a short link.\n            </>\n        ),\n        type: \"warning\"\n    }\n};\n\nexport const WarningStrong: Story = {\n    name: \"Warning (strong)\",\n    args: {\n        ...Warning.args,\n        children: (\n            <>\n                This is a warning alert, used when something of strong relevance needs to be\n                prominently communicated. And <a href={\"#\"}>this thing here</a> is a short link.\n            </>\n        ),\n        variant: \"strong\"\n    }\n};\n\nexport const Danger: Story = {\n    args: {\n        ...Default.args,\n        children: (\n            <>\n                This is a danger alert, used when something critical needs to be communicated. And{\" \"}\n                <a href={\"#\"}>this thing here</a> is a short link.\n            </>\n        ),\n        type: \"danger\"\n    }\n};\n\nexport const DangerStrong: Story = {\n    name: \"Danger (strong)\",\n    args: {\n        ...Danger.args,\n        children: (\n            <>\n                This is a danger alert, used when something critical needs to be prominently\n                communicated. And <a href={\"#\"}>this thing here</a> is a short link.\n            </>\n        ),\n        variant: \"strong\"\n    }\n};\n\nexport const WithCloseButton: Story = {\n    name: \"With close button\",\n    args: {\n        ...Default.args,\n        children: <>An alert that can be closed.</>,\n        showCloseButton: true,\n        onClose: () => alert(\"Close button clicked.\")\n    }\n};\n\nexport const WithAction: Story = {\n    name: \"With action\",\n    args: {\n        ...WithCloseButton.args,\n        children: <>An alert that can be closed and also has action button.</>,\n        showCloseButton: true,\n        actions: (\n            <Alert.Action text={\"Button\"} onClick={() => alert(\"Custom action button clicked.\")} />\n        )\n    }\n};\n\nexport const Documentation: Story = {\n    args: {\n        type: \"info\",\n        variant: \"subtle\",\n        showCloseButton: false,\n        children: (\n            <>\n                This type of notification is suitable for general usage where there’s no need for\n                accent. And <a href={\"#\"}>this thing here</a> is a short link.\n            </>\n        ),\n        onClose: () => {},\n        actions: undefined\n    },\n    argTypes: {\n        type: {\n            description: \"Type\",\n            control: \"select\",\n            options: [\"info\", \"success\", \"warning\", \"danger\"],\n            defaultValue: \"info\"\n        },\n        variant: {\n            description: \"Variant\",\n            control: \"select\",\n            options: [\"subtle\", \"strong\"],\n            defaultValue: \"subtle\"\n        },\n        showCloseButton: {\n            description:\n                \"Show close button, please refer to the 'With Close Button' example below for details.\",\n            control: \"boolean\",\n            defaultValue: false\n        },\n        onClose: {\n            description: \"Please refer to the 'With Close Button' example below for details.\",\n            control: \"none\"\n        },\n        actions: {\n            description: \"Please refer to the 'With Action' example below for details.\",\n            control: \"none\"\n        }\n    }\n};\n"],"mappings":"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","ignoreList":[]}

package/Alert/index.d.ts

@@ -0,0 +1 @@
+export * from "./Alert";

package/Alert/index.js

@@ -0,0 +1,3 @@
+export * from "./Alert";
+
+//# sourceMappingURL=index.js.map

package/Alert/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./Alert\";\n"],"mappings":"AAAA","ignoreList":[]}

package/AutoComplete/AutoComplete.d.ts

@@ -0,0 +1,24 @@
+import React from "react";
+import type { AutoCompletePrimitiveProps } from "./primitives";
+import type { FormComponentProps } from "../FormComponent";
+type AutoCompleteProps = AutoCompletePrimitiveProps & FormComponentProps;
+declare const AutoComplete: (({ label, description, note, required, disabled, validation, ...props }: AutoCompleteProps) => React.JSX.Element) & {
+    original: ({ label, description, note, required, disabled, validation, ...props }: AutoCompleteProps) => React.JSX.Element;
+    originalName: string;
+    displayName: string;
+} & {
+    original: (({ label, description, note, required, disabled, validation, ...props }: AutoCompleteProps) => React.JSX.Element) & {
+        original: ({ label, description, note, required, disabled, validation, ...props }: AutoCompleteProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    };
+    originalName: string;
+    displayName: string;
+} & {
+    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ label, description, note, required, disabled, validation, ...props }: AutoCompleteProps) => React.JSX.Element) & {
+        original: ({ label, description, note, required, disabled, validation, ...props }: AutoCompleteProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    }>) => (props: unknown) => React.JSX.Element;
+};
+export { AutoComplete };

package/AutoComplete/AutoComplete.js

@@ -0,0 +1,56 @@
+import React, { useMemo, useState, useEffect, useRef } from "react";
+import { makeDecoratable } from "../utils";
+import { AutoCompletePrimitive } from "./primitives";
+import { FormComponentDescription, FormComponentErrorMessage, FormComponentLabel, FormComponentNote } from "../FormComponent";
+const DecoratableAutoComplete = ({
+  label,
+  description,
+  note,
+  required,
+  disabled,
+  validation,
+  ...props
+}) => {
+  const {
+    isValid: validationIsValid,
+    message: validationMessage
+  } = validation || {};
+  const invalid = useMemo(() => validationIsValid === false, [validationIsValid]);
+
+  // Retrieve the internally generated ID from cmdk's <Command.Input> to sync with the external <label>
+  const inputRef = useRef(null);
+  const [inputId, setInputId] = useState();
+  useEffect(() => {
+    if (inputRef.current?.id) {
+      setInputId(inputRef.current.id);
+    }
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "wby-w-full"
+  }, /*#__PURE__*/React.createElement(FormComponentLabel, {
+    text: label,
+    required: required,
+    disabled: disabled,
+    invalid: invalid,
+    htmlFor: inputId
+  }), /*#__PURE__*/React.createElement(FormComponentDescription, {
+    text: description,
+    disabled: disabled
+  }), /*#__PURE__*/React.createElement(AutoCompletePrimitive, Object.assign({}, props, {
+    inputRef: inputRef,
+    disabled: disabled,
+    label: label,
+    invalid: invalid
+  })), /*#__PURE__*/React.createElement(FormComponentErrorMessage, {
+    text: validationMessage,
+    invalid: invalid,
+    disabled: disabled
+  }), /*#__PURE__*/React.createElement(FormComponentNote, {
+    text: note,
+    disabled: disabled
+  }));
+};
+const AutoComplete = makeDecoratable("AutoComplete", DecoratableAutoComplete);
+export { AutoComplete };
+
+//# sourceMappingURL=AutoComplete.js.map

package/AutoComplete/AutoComplete.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useMemo","useState","useEffect","useRef","makeDecoratable","AutoCompletePrimitive","FormComponentDescription","FormComponentErrorMessage","FormComponentLabel","FormComponentNote","DecoratableAutoComplete","label","description","note","required","disabled","validation","props","isValid","validationIsValid","message","validationMessage","invalid","inputRef","inputId","setInputId","current","id","createElement","className","text","htmlFor","Object","assign","AutoComplete"],"sources":["AutoComplete.tsx"],"sourcesContent":["import React, { useMemo, useState, useEffect, useRef } from \"react\";\nimport { makeDecoratable } from \"~/utils\";\nimport type { AutoCompletePrimitiveProps } from \"./primitives\";\nimport { AutoCompletePrimitive } from \"./primitives\";\nimport type { FormComponentProps } from \"~/FormComponent\";\nimport {\n    FormComponentDescription,\n    FormComponentErrorMessage,\n    FormComponentLabel,\n    FormComponentNote\n} from \"~/FormComponent\";\n\ntype AutoCompleteProps = AutoCompletePrimitiveProps & FormComponentProps;\n\nconst DecoratableAutoComplete = ({\n    label,\n    description,\n    note,\n    required,\n    disabled,\n    validation,\n    ...props\n}: AutoCompleteProps) => {\n    const { isValid: validationIsValid, message: validationMessage } = validation || {};\n    const invalid = useMemo(() => validationIsValid === false, [validationIsValid]);\n\n    // Retrieve the internally generated ID from cmdk's <Command.Input> to sync with the external <label>\n    const inputRef = useRef<HTMLInputElement>(null);\n    const [inputId, setInputId] = useState<string>();\n\n    useEffect(() => {\n        if (inputRef.current?.id) {\n            setInputId(inputRef.current.id);\n        }\n    }, []);\n\n    return (\n        <div className={\"wby-w-full\"}>\n            <FormComponentLabel\n                text={label}\n                required={required}\n                disabled={disabled}\n                invalid={invalid}\n                htmlFor={inputId}\n            />\n            <FormComponentDescription text={description} disabled={disabled} />\n            <AutoCompletePrimitive\n                {...props}\n                inputRef={inputRef}\n                disabled={disabled}\n                label={label}\n                invalid={invalid}\n            />\n            <FormComponentErrorMessage\n                text={validationMessage}\n                invalid={invalid}\n                disabled={disabled}\n            />\n            <FormComponentNote text={note} disabled={disabled} />\n        </div>\n    );\n};\n\nconst AutoComplete = makeDecoratable(\"AutoComplete\", DecoratableAutoComplete);\n\nexport { AutoComplete };\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,OAAO,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,MAAM,QAAQ,OAAO;AACnE,SAASC,eAAe;AAExB,SAASC,qBAAqB;AAE9B,SACIC,wBAAwB,EACxBC,yBAAyB,EACzBC,kBAAkB,EAClBC,iBAAiB;AAKrB,MAAMC,uBAAuB,GAAGA,CAAC;EAC7BC,KAAK;EACLC,WAAW;EACXC,IAAI;EACJC,QAAQ;EACRC,QAAQ;EACRC,UAAU;EACV,GAAGC;AACY,CAAC,KAAK;EACrB,MAAM;IAAEC,OAAO,EAAEC,iBAAiB;IAAEC,OAAO,EAAEC;EAAkB,CAAC,GAAGL,UAAU,IAAI,CAAC,CAAC;EACnF,MAAMM,OAAO,GAAGtB,OAAO,CAAC,MAAMmB,iBAAiB,KAAK,KAAK,EAAE,CAACA,iBAAiB,CAAC,CAAC;;EAE/E;EACA,MAAMI,QAAQ,GAAGpB,MAAM,CAAmB,IAAI,CAAC;EAC/C,MAAM,CAACqB,OAAO,EAAEC,UAAU,CAAC,GAAGxB,QAAQ,CAAS,CAAC;EAEhDC,SAAS,CAAC,MAAM;IACZ,IAAIqB,QAAQ,CAACG,OAAO,EAAEC,EAAE,EAAE;MACtBF,UAAU,CAACF,QAAQ,CAACG,OAAO,CAACC,EAAE,CAAC;IACnC;EACJ,CAAC,EAAE,EAAE,CAAC;EAEN,oBACI5B,KAAA,CAAA6B,aAAA;IAAKC,SAAS,EAAE;EAAa,gBACzB9B,KAAA,CAAA6B,aAAA,CAACpB,kBAAkB;IACfsB,IAAI,EAAEnB,KAAM;IACZG,QAAQ,EAAEA,QAAS;IACnBC,QAAQ,EAAEA,QAAS;IACnBO,OAAO,EAAEA,OAAQ;IACjBS,OAAO,EAAEP;EAAQ,CACpB,CAAC,eACFzB,KAAA,CAAA6B,aAAA,CAACtB,wBAAwB;IAACwB,IAAI,EAAElB,WAAY;IAACG,QAAQ,EAAEA;EAAS,CAAE,CAAC,eACnEhB,KAAA,CAAA6B,aAAA,CAACvB,qBAAqB,EAAA2B,MAAA,CAAAC,MAAA,KACdhB,KAAK;IACTM,QAAQ,EAAEA,QAAS;IACnBR,QAAQ,EAAEA,QAAS;IACnBJ,KAAK,EAAEA,KAAM;IACbW,OAAO,EAAEA;EAAQ,EACpB,CAAC,eACFvB,KAAA,CAAA6B,aAAA,CAACrB,yBAAyB;IACtBuB,IAAI,EAAET,iBAAkB;IACxBC,OAAO,EAAEA,OAAQ;IACjBP,QAAQ,EAAEA;EAAS,CACtB,CAAC,eACFhB,KAAA,CAAA6B,aAAA,CAACnB,iBAAiB;IAACqB,IAAI,EAAEjB,IAAK;IAACE,QAAQ,EAAEA;EAAS,CAAE,CACnD,CAAC;AAEd,CAAC;AAED,MAAMmB,YAAY,GAAG9B,eAAe,CAAC,cAAc,EAAEM,uBAAuB,CAAC;AAE7E,SAASwB,YAAY","ignoreList":[]}

package/AutoComplete/AutoComplete.mdx

@@ -0,0 +1,135 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+
+import * as AutoCompleteStories from './AutoComplete.stories';
+
+<Meta of={AutoCompleteStories} />
+
+# AutoComplete
+
+The Input component is a user interface element that allows users to enter textual, numerical or any other kind of data into system database. It is essential for collecting user information, enabling interaction, and driving application functionality. As the user input is one of the most crucial aspects of using a system, we are ensuring that all our input options have necessary mechanism to make the data input as frictionless as possible.
+
+## Usage
+
+<Canvas of={AutoCompleteStories.Documentation} source={ { code: `
+import React, { useState } from "react";
+import { AutoComplete } from "@webiny/admin-ui";
+
+const TimezoneSelector = () => {
+    const [value, setValue] = useState("");
+    const [validation, setValidation] = useState({ isValid: true, message: "" });
+
+    const handleValueChange = (newValue: string) => {
+        setValue(newValue);
+
+        if (!newValue) {
+            setValidation({ isValid: false, message: "This field is required" });
+        } else {
+            setValidation({ isValid: true, message: "" });
+        }
+    };
+
+    const timezones = [
+        "Eastern Standard Time (EST)",
+        "Central Standard Time (CST)",
+        "Pacific Standard Time (PST)",
+        "Greenwich Mean Time (GMT)"
+    ];
+
+    return (
+        <AutoComplete
+            label="Time Zone"
+            required={true}
+            description="Select your timezone from the list"
+            placeholder="Select timezone..."
+            options={timezones}
+            value={value}
+            onValueChange={handleValueChange}
+            validation={validation}
+        />
+    );
+};
+
+export default TimezoneSelector;
+
+` } }
+        additionalActions={[
+            {
+                title: 'Open in GitHub',
+                onClick: () => {
+                    window.open(
+                        'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/AutoComplete/AutoComplete.tsx',
+                        '_blank'
+                    );
+                },
+            }
+        ]}
+/>
+
+<Controls of={AutoCompleteStories.Documentation}/>
+
+```tsx
+import React, { useState } from "react";
+import { AutoComplete } from "@webiny/admin-ui";
+
+const TimezoneSelector = () => {
+    const [value, setValue] = useState("");
+    const [validation, setValidation] = useState({ isValid: true, message: "" });
+
+    const handleValueChange = (newValue: string) => {
+        setValue(newValue);
+
+        if (!newValue) {
+            setValidation({ isValid: false, message: "This field is required" });
+        } else {
+            setValidation({ isValid: true, message: "" });
+        }
+    };
+
+    const timezones = [
+        "Eastern Standard Time (EST)",
+        "Central Standard Time (CST)",
+        "Pacific Standard Time (PST)",
+        "Greenwich Mean Time (GMT)"
+    ];
+
+    return (
+        <AutoComplete
+            label="Time Zone"
+            required={true}
+            description="Select your timezone from the list"
+            placeholder="Select timezone..."
+            options={timezones}
+            value={value}
+            onValueChange={handleValueChange}
+            validation={validation}
+        />
+    );
+};
+
+export default TimezoneSelector;
+```
+
+## Anatomy
+
+### Input Anatomy
+<img src="/images/storybook/autocomplete/input-anatomy.png" alt="Input Anatomy"/>
+
+### Style
+<img src="/images/storybook/autocomplete/style.png" alt="Style"/>
+
+### Option
+<img src="/images/storybook/autocomplete/option.png" alt="Option"/>
+
+### States and Styles
+<img src="/images/storybook/autocomplete/states-and-styles.png" alt="States and Styles"/>
+
+### Label Anatomy
+<img src="/images/storybook/autocomplete/label-anatomy.png" alt="Label Anatomy"/>
+
+### Label Properties
+<img src="/images/storybook/autocomplete/label-properties.png" alt="Label Properties"/>
+
+## Usage
+
+### Used in forms
+<img src="/images/storybook/autocomplete/used-in-forms.png" alt="Used in forms"/>

package/AutoComplete/AutoComplete.stories.d.ts

@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { AutoComplete } from "./AutoComplete";
+declare const meta: Meta<typeof AutoComplete>;
+export default meta;
+type Story = StoryObj<typeof AutoComplete>;
+export declare const Default: Story;
+export declare const WithLabel: Story;
+export declare const WithRequiredLabel: Story;
+export declare const WithDescription: Story;
+export declare const WithNotes: Story;
+export declare const WithErrors: Story;
+export declare const Disabled: Story;
+export declare const FullExample: Story;
+export declare const OnValueChange: Story;
+export declare const Documentation: Story;