@webiny/admin-ui 0.0.0-unstable.e53eceafb5 → 0.0.0-unstable.e6f0dc8ca7

package/Alert/Alert.stories.js

@@ -1,17 +1,17 @@
-import { Alert } from "./Alert";
+import { Alert } from "./Alert.js";
 import React from "react";
+import { ReactComponent as LifeBuoyIcon } from "@webiny/icons/safety_check.svg";
 const meta = {
   title: "Components/Alert",
   component: Alert,
   argTypes: {},
   decorators: [Story => /*#__PURE__*/React.createElement("div", {
-    className: "wby-w-[700px]"
+    className: "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: {
@@ -101,8 +101,21 @@ export const DangerStrong = {
     variant: "strong"
   }
 };
+export const WithCustomIcon = {
+  args: {
+    ...Default.args,
+    children: /*#__PURE__*/React.createElement(React.Fragment, null, "An alert that can be closed."),
+    icon: /*#__PURE__*/React.createElement(LifeBuoyIcon, null)
+  }
+};
+export const WithNoIcon = {
+  args: {
+    ...Default.args,
+    children: /*#__PURE__*/React.createElement(React.Fragment, null, "An alert that can be closed."),
+    icon: null
+  }
+};
 export const WithCloseButton = {
-  name: "With close button",
   args: {
     ...Default.args,
     children: /*#__PURE__*/React.createElement(React.Fragment, null, "An alert that can be closed."),
@@ -111,7 +124,6 @@ export const WithCloseButton = {
   }
 };
 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."),
@@ -122,6 +134,52 @@ export const WithAction = {
     })
   }
 };
+export const WithSwatchColor = {
+  args: {
+    ...WithCloseButton.args,
+    children: /*#__PURE__*/React.createElement(React.Fragment, null, "An alert that can be closed and also has action button."),
+    swatchColor: "#FF708F",
+    actions: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Alert.Action, {
+      text: "Reject",
+      onClick: () => alert("Custom action button clicked.")
+    }), /*#__PURE__*/React.createElement(Alert.Action, {
+      text: "Approve",
+      onClick: () => alert("Custom action button clicked.")
+    }))
+  }
+};
+export const WithSwatchColorNoIcon = {
+  name: "With Swatch Color & No Icon",
+  args: {
+    ...WithCloseButton.args,
+    children: /*#__PURE__*/React.createElement(React.Fragment, null, "An alert that can be closed and also has action button."),
+    swatchColor: "#2AABF6",
+    icon: null,
+    actions: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Alert.Action, {
+      text: "Reject",
+      onClick: () => alert("Custom action button clicked.")
+    }), /*#__PURE__*/React.createElement(Alert.Action, {
+      text: "Approve",
+      onClick: () => alert("Custom action button clicked.")
+    }))
+  }
+};
+export const WithSwatchColorNoSwatchIcon = {
+  name: "With Swatch Color & No Swatch Icon",
+  args: {
+    ...WithCloseButton.args,
+    children: /*#__PURE__*/React.createElement(React.Fragment, null, "An alert that can be closed and also has action button."),
+    swatchColor: "#BDDE46",
+    swatchColorIcon: false,
+    actions: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Alert.Action, {
+      text: "Reject",
+      onClick: () => alert("Custom action button clicked.")
+    }), /*#__PURE__*/React.createElement(Alert.Action, {
+      text: "Approve",
+      onClick: () => alert("Custom action button clicked.")
+    }))
+  }
+};
 export const Documentation = {
   args: {
     type: "info",
@@ -152,12 +210,10 @@ export const Documentation = {
       defaultValue: false
     },
     onClose: {
-      description: "Please refer to the 'With Close Button' example below for details.",
-      control: "none"
+      description: "Please refer to the 'With Close Button' example below for details."
     },
     actions: {
-      description: "Please refer to the 'With Action' example below for details.",
-      control: "none"
+      description: "Please refer to the 'With Action' example below for details."
     }
   }
 };

package/Alert/Alert.stories.js.map

@@ -1 +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":[]}
+{"version":3,"names":["Alert","React","ReactComponent","LifeBuoyIcon","meta","title","component","argTypes","decorators","Story","createElement","className","Default","args","children","type","control","options","variant","Info","Fragment","href","InfoStrong","name","Success","SuccessStrong","Warning","WarningStrong","Danger","DangerStrong","WithCustomIcon","icon","WithNoIcon","WithCloseButton","showCloseButton","onClose","alert","WithAction","actions","Action","text","onClick","WithSwatchColor","swatchColor","WithSwatchColorNoIcon","WithSwatchColorNoSwatchIcon","swatchColorIcon","Documentation","undefined","description","defaultValue"],"sources":["Alert.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { Alert } from \"./Alert.js\";\nimport React from \"react\";\nimport { ReactComponent as LifeBuoyIcon } from \"@webiny/icons/safety_check.svg\";\n\nconst meta: Meta<typeof Alert> = {\n    title: \"Components/Alert\",\n    component: Alert,\n    argTypes: {},\n    decorators: [\n        Story => (\n            <div className=\"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        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 WithCustomIcon: Story = {\n    args: {\n        ...Default.args,\n        children: <>An alert that can be closed.</>,\n        icon: <LifeBuoyIcon />\n    }\n};\n\nexport const WithNoIcon: Story = {\n    args: {\n        ...Default.args,\n        children: <>An alert that can be closed.</>,\n        icon: null\n    }\n};\n\nexport const WithCloseButton: Story = {\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    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 WithSwatchColor: Story = {\n    args: {\n        ...WithCloseButton.args,\n        children: <>An alert that can be closed and also has action button.</>,\n        swatchColor: \"#FF708F\",\n        actions: (\n            <>\n                <Alert.Action\n                    text={\"Reject\"}\n                    onClick={() => alert(\"Custom action button clicked.\")}\n                />\n                <Alert.Action\n                    text={\"Approve\"}\n                    onClick={() => alert(\"Custom action button clicked.\")}\n                />\n            </>\n        )\n    }\n};\n\nexport const WithSwatchColorNoIcon: Story = {\n    name: \"With Swatch Color & No Icon\",\n    args: {\n        ...WithCloseButton.args,\n        children: <>An alert that can be closed and also has action button.</>,\n        swatchColor: \"#2AABF6\",\n        icon: null,\n        actions: (\n            <>\n                <Alert.Action\n                    text={\"Reject\"}\n                    onClick={() => alert(\"Custom action button clicked.\")}\n                />\n                <Alert.Action\n                    text={\"Approve\"}\n                    onClick={() => alert(\"Custom action button clicked.\")}\n                />\n            </>\n        )\n    }\n};\nexport const WithSwatchColorNoSwatchIcon: Story = {\n    name: \"With Swatch Color & No Swatch Icon\",\n    args: {\n        ...WithCloseButton.args,\n        children: <>An alert that can be closed and also has action button.</>,\n        swatchColor: \"#BDDE46\",\n        swatchColorIcon: false,\n        actions: (\n            <>\n                <Alert.Action\n                    text={\"Reject\"}\n                    onClick={() => alert(\"Custom action button clicked.\")}\n                />\n                <Alert.Action\n                    text={\"Approve\"}\n                    onClick={() => alert(\"Custom action button clicked.\")}\n                />\n            </>\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        },\n        actions: {\n            description: \"Please refer to the 'With Action' example below for details.\"\n        }\n    }\n};\n"],"mappings":"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","ignoreList":[]}

package/Alert/AlertCloseButton.d.ts

@@ -0,0 +1,2 @@
+import * as React from "react";
+export declare const AlertCloseButton: () => React.JSX.Element | null;

package/Alert/AlertCloseButton.js

@@ -0,0 +1,38 @@
+import * as React from "react";
+import { IconButton } from "../Button/index.js";
+import { ReactComponent as XIcon } from "@webiny/icons/close.svg";
+import { Icon } from "../Icon/index.js";
+import { useAlertProps } from "./AlertPropsProvider.js";
+import { useMemo } from "react";
+import { DEFAULT_TYPE, DEFAULT_VARIANT } from "./constants.js";
+export const AlertCloseButton = () => {
+  const {
+    showCloseButton,
+    onClose,
+    type = DEFAULT_TYPE,
+    variant = DEFAULT_VARIANT
+  } = useAlertProps();
+  if (!showCloseButton) {
+    return null;
+  }
+  const iconButtonVariant = useMemo(() => {
+    if (variant === "subtle") {
+      return "ghost";
+    }
+    if (type === "warning") {
+      return "ghost";
+    }
+    return "ghost-negative";
+  }, [type, variant]);
+  return /*#__PURE__*/React.createElement(IconButton, {
+    onClick: onClose,
+    icon: /*#__PURE__*/React.createElement(Icon, {
+      icon: /*#__PURE__*/React.createElement(XIcon, null),
+      label: "Close"
+    }),
+    size: "sm",
+    variant: iconButtonVariant
+  });
+};
+
+//# sourceMappingURL=AlertCloseButton.js.map

package/Alert/AlertCloseButton.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","IconButton","ReactComponent","XIcon","Icon","useAlertProps","useMemo","DEFAULT_TYPE","DEFAULT_VARIANT","AlertCloseButton","showCloseButton","onClose","type","variant","iconButtonVariant","createElement","onClick","icon","label","size"],"sources":["AlertCloseButton.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { IconButton } from \"~/Button/index.js\";\nimport { ReactComponent as XIcon } from \"@webiny/icons/close.svg\";\nimport { Icon } from \"~/Icon/index.js\";\nimport { useAlertProps } from \"./AlertPropsProvider.js\";\nimport { useMemo } from \"react\";\nimport { DEFAULT_TYPE, DEFAULT_VARIANT } from \"./constants.js\";\n\nexport const AlertCloseButton = () => {\n    const {\n        showCloseButton,\n        onClose,\n        type = DEFAULT_TYPE,\n        variant = DEFAULT_VARIANT\n    } = useAlertProps();\n\n    if (!showCloseButton) {\n        return null;\n    }\n\n    const iconButtonVariant = useMemo(() => {\n        if (variant === \"subtle\") {\n            return \"ghost\";\n        }\n\n        if (type === \"warning\") {\n            return \"ghost\";\n        }\n\n        return \"ghost-negative\";\n    }, [type, variant]);\n\n    return (\n        <IconButton\n            onClick={onClose}\n            icon={<Icon icon={<XIcon />} label=\"Close\" />}\n            size={\"sm\"}\n            variant={iconButtonVariant}\n        />\n    );\n};\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU;AACnB,SAASC,cAAc,IAAIC,KAAK,QAAQ,yBAAyB;AACjE,SAASC,IAAI;AACb,SAASC,aAAa;AACtB,SAASC,OAAO,QAAQ,OAAO;AAC/B,SAASC,YAAY,EAAEC,eAAe;AAEtC,OAAO,MAAMC,gBAAgB,GAAGA,CAAA,KAAM;EAClC,MAAM;IACFC,eAAe;IACfC,OAAO;IACPC,IAAI,GAAGL,YAAY;IACnBM,OAAO,GAAGL;EACd,CAAC,GAAGH,aAAa,CAAC,CAAC;EAEnB,IAAI,CAACK,eAAe,EAAE;IAClB,OAAO,IAAI;EACf;EAEA,MAAMI,iBAAiB,GAAGR,OAAO,CAAC,MAAM;IACpC,IAAIO,OAAO,KAAK,QAAQ,EAAE;MACtB,OAAO,OAAO;IAClB;IAEA,IAAID,IAAI,KAAK,SAAS,EAAE;MACpB,OAAO,OAAO;IAClB;IAEA,OAAO,gBAAgB;EAC3B,CAAC,EAAE,CAACA,IAAI,EAAEC,OAAO,CAAC,CAAC;EAEnB,oBACIb,KAAA,CAAAe,aAAA,CAACd,UAAU;IACPe,OAAO,EAAEL,OAAQ;IACjBM,IAAI,eAAEjB,KAAA,CAAAe,aAAA,CAACX,IAAI;MAACa,IAAI,eAAEjB,KAAA,CAAAe,aAAA,CAACZ,KAAK,MAAE,CAAE;MAACe,KAAK,EAAC;IAAO,CAAE,CAAE;IAC9CC,IAAI,EAAE,IAAK;IACXN,OAAO,EAAEC;EAAkB,CAC9B,CAAC;AAEV,CAAC","ignoreList":[]}

package/Alert/AlertIcon.d.ts

@@ -0,0 +1,2 @@
+import * as React from "react";
+export declare const AlertIcon: () => React.JSX.Element | null;

package/Alert/AlertIcon.js

@@ -0,0 +1,91 @@
+import * as React from "react";
+import { cva } from "../utils.js";
+import { ReactComponent as InfoIcon } from "@webiny/icons/info.svg";
+import { ReactComponent as WarningIcon } from "@webiny/icons/warning_amber.svg";
+import { ReactComponent as SuccessIcon } from "@webiny/icons/check_circle.svg";
+import { useAlertProps } from "./AlertPropsProvider.js";
+import { Icon } from "../Icon/Icon.js";
+const VARIANT_ICON_MAP = {
+  info: InfoIcon,
+  success: SuccessIcon,
+  warning: InfoIcon,
+  danger: WarningIcon
+};
+const alertIconVariants = cva("size-md", {
+  variants: {
+    type: {
+      info: "",
+      success: "",
+      warning: "",
+      danger: ""
+    },
+    variant: {
+      strong: "",
+      subtle: ""
+    }
+  },
+  defaultVariants: {
+    type: "info",
+    variant: "subtle"
+  },
+  compoundVariants: [{
+    type: "info",
+    variant: "strong",
+    className: "fill-neutral-base"
+  }, {
+    type: "info",
+    variant: "subtle",
+    className: "fill-neutral-xstrong"
+  }, {
+    type: "success",
+    variant: "strong",
+    className: "fill-neutral-base"
+  }, {
+    type: "success",
+    variant: "subtle",
+    className: "fill-success"
+  }, {
+    type: "warning",
+    variant: "strong",
+    className: "fill-neutral-xstrong"
+  }, {
+    type: "warning",
+    variant: "subtle",
+    className: "fill-warning"
+  }, {
+    type: "danger",
+    variant: "strong",
+    className: "fill-neutral-base"
+  }, {
+    type: "danger",
+    variant: "subtle",
+    className: "fill-destructive"
+  }]
+});
+export const AlertIcon = () => {
+  const {
+    icon,
+    type,
+    variant
+  } = useAlertProps();
+  if (icon === null) {
+    return null;
+  }
+  let iconElement = icon;
+  if (!iconElement) {
+    const IconComponent = VARIANT_ICON_MAP[type || "info"];
+    iconElement = /*#__PURE__*/React.createElement(IconComponent, null);
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: "py-xs"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    label: "Alert icon",
+    icon: iconElement,
+    className: alertIconVariants({
+      type,
+      variant
+    })
+  }));
+};
+
+//# sourceMappingURL=AlertIcon.js.map

package/Alert/AlertIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","cva","ReactComponent","InfoIcon","WarningIcon","SuccessIcon","useAlertProps","Icon","VARIANT_ICON_MAP","info","success","warning","danger","alertIconVariants","variants","type","variant","strong","subtle","defaultVariants","compoundVariants","className","AlertIcon","icon","iconElement","IconComponent","createElement","label"],"sources":["AlertIcon.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cva } from \"~/utils.js\";\nimport { ReactComponent as InfoIcon } from \"@webiny/icons/info.svg\";\nimport { ReactComponent as WarningIcon } from \"@webiny/icons/warning_amber.svg\";\nimport { ReactComponent as SuccessIcon } from \"@webiny/icons/check_circle.svg\";\nimport { useAlertProps } from \"./AlertPropsProvider.js\";\nimport { Icon } from \"~/Icon/Icon.js\";\n\nconst VARIANT_ICON_MAP = {\n    info: InfoIcon,\n    success: SuccessIcon,\n    warning: InfoIcon,\n    danger: WarningIcon\n};\n\nconst alertIconVariants = cva(\"size-md\", {\n    variants: {\n        type: { info: \"\", success: \"\", warning: \"\", danger: \"\" },\n        variant: { strong: \"\", subtle: \"\" }\n    },\n    defaultVariants: {\n        type: \"info\",\n        variant: \"subtle\"\n    },\n    compoundVariants: [\n        { type: \"info\", variant: \"strong\", className: \"fill-neutral-base\" },\n        { type: \"info\", variant: \"subtle\", className: \"fill-neutral-xstrong\" },\n        { type: \"success\", variant: \"strong\", className: \"fill-neutral-base\" },\n        { type: \"success\", variant: \"subtle\", className: \"fill-success\" },\n        { type: \"warning\", variant: \"strong\", className: \"fill-neutral-xstrong\" },\n        { type: \"warning\", variant: \"subtle\", className: \"fill-warning\" },\n        { type: \"danger\", variant: \"strong\", className: \"fill-neutral-base\" },\n        { type: \"danger\", variant: \"subtle\", className: \"fill-destructive\" }\n    ]\n});\n\nexport const AlertIcon = () => {\n    const { icon, type, variant } = useAlertProps();\n    if (icon === null) {\n        return null;\n    }\n\n    let iconElement = icon;\n    if (!iconElement) {\n        const IconComponent = VARIANT_ICON_MAP[type || \"info\"];\n        iconElement = <IconComponent />;\n    }\n\n    return (\n        <div className={\"py-xs\"}>\n            <Icon\n                label={\"Alert icon\"}\n                icon={iconElement}\n                className={alertIconVariants({ type, variant })}\n            />\n        </div>\n    );\n};\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,GAAG;AACZ,SAASC,cAAc,IAAIC,QAAQ,QAAQ,wBAAwB;AACnE,SAASD,cAAc,IAAIE,WAAW,QAAQ,iCAAiC;AAC/E,SAASF,cAAc,IAAIG,WAAW,QAAQ,gCAAgC;AAC9E,SAASC,aAAa;AACtB,SAASC,IAAI;AAEb,MAAMC,gBAAgB,GAAG;EACrBC,IAAI,EAAEN,QAAQ;EACdO,OAAO,EAAEL,WAAW;EACpBM,OAAO,EAAER,QAAQ;EACjBS,MAAM,EAAER;AACZ,CAAC;AAED,MAAMS,iBAAiB,GAAGZ,GAAG,CAAC,SAAS,EAAE;EACrCa,QAAQ,EAAE;IACNC,IAAI,EAAE;MAAEN,IAAI,EAAE,EAAE;MAAEC,OAAO,EAAE,EAAE;MAAEC,OAAO,EAAE,EAAE;MAAEC,MAAM,EAAE;IAAG,CAAC;IACxDI,OAAO,EAAE;MAAEC,MAAM,EAAE,EAAE;MAAEC,MAAM,EAAE;IAAG;EACtC,CAAC;EACDC,eAAe,EAAE;IACbJ,IAAI,EAAE,MAAM;IACZC,OAAO,EAAE;EACb,CAAC;EACDI,gBAAgB,EAAE,CACd;IAAEL,IAAI,EAAE,MAAM;IAAEC,OAAO,EAAE,QAAQ;IAAEK,SAAS,EAAE;EAAoB,CAAC,EACnE;IAAEN,IAAI,EAAE,MAAM;IAAEC,OAAO,EAAE,QAAQ;IAAEK,SAAS,EAAE;EAAuB,CAAC,EACtE;IAAEN,IAAI,EAAE,SAAS;IAAEC,OAAO,EAAE,QAAQ;IAAEK,SAAS,EAAE;EAAoB,CAAC,EACtE;IAAEN,IAAI,EAAE,SAAS;IAAEC,OAAO,EAAE,QAAQ;IAAEK,SAAS,EAAE;EAAe,CAAC,EACjE;IAAEN,IAAI,EAAE,SAAS;IAAEC,OAAO,EAAE,QAAQ;IAAEK,SAAS,EAAE;EAAuB,CAAC,EACzE;IAAEN,IAAI,EAAE,SAAS;IAAEC,OAAO,EAAE,QAAQ;IAAEK,SAAS,EAAE;EAAe,CAAC,EACjE;IAAEN,IAAI,EAAE,QAAQ;IAAEC,OAAO,EAAE,QAAQ;IAAEK,SAAS,EAAE;EAAoB,CAAC,EACrE;IAAEN,IAAI,EAAE,QAAQ;IAAEC,OAAO,EAAE,QAAQ;IAAEK,SAAS,EAAE;EAAmB,CAAC;AAE5E,CAAC,CAAC;AAEF,OAAO,MAAMC,SAAS,GAAGA,CAAA,KAAM;EAC3B,MAAM;IAAEC,IAAI;IAAER,IAAI;IAAEC;EAAQ,CAAC,GAAGV,aAAa,CAAC,CAAC;EAC/C,IAAIiB,IAAI,KAAK,IAAI,EAAE;IACf,OAAO,IAAI;EACf;EAEA,IAAIC,WAAW,GAAGD,IAAI;EACtB,IAAI,CAACC,WAAW,EAAE;IACd,MAAMC,aAAa,GAAGjB,gBAAgB,CAACO,IAAI,IAAI,MAAM,CAAC;IACtDS,WAAW,gBAAGxB,KAAA,CAAA0B,aAAA,CAACD,aAAa,MAAE,CAAC;EACnC;EAEA,oBACIzB,KAAA,CAAA0B,aAAA;IAAKL,SAAS,EAAE;EAAQ,gBACpBrB,KAAA,CAAA0B,aAAA,CAACnB,IAAI;IACDoB,KAAK,EAAE,YAAa;IACpBJ,IAAI,EAAEC,WAAY;IAClBH,SAAS,EAAER,iBAAiB,CAAC;MAAEE,IAAI;MAAEC;IAAQ,CAAC;EAAE,CACnD,CACA,CAAC;AAEd,CAAC","ignoreList":[]}

package/Alert/AlertPropsProvider.d.ts

@@ -0,0 +1,6 @@
+import { type AlertProps } from "./Alert.js";
+declare const AlertPropsProvider: import("react").FunctionComponent<{
+    props: AlertProps;
+    children: React.ReactNode;
+}>, useAlertProps: () => AlertProps;
+export { AlertPropsProvider, useAlertProps };

package/Alert/AlertPropsProvider.js

@@ -0,0 +1,5 @@
+import { createComponentPropsProvider } from "../utils.js";
+const [AlertPropsProvider, useAlertProps] = createComponentPropsProvider();
+export { AlertPropsProvider, useAlertProps };
+
+//# sourceMappingURL=AlertPropsProvider.js.map

package/Alert/AlertPropsProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["createComponentPropsProvider","AlertPropsProvider","useAlertProps"],"sources":["AlertPropsProvider.ts"],"sourcesContent":["import { createComponentPropsProvider } from \"~/utils.js\";\nimport { type AlertProps } from \"./Alert.js\";\n\nconst [AlertPropsProvider, useAlertProps] = createComponentPropsProvider<AlertProps>();\n\nexport { AlertPropsProvider, useAlertProps };\n"],"mappings":"AAAA,SAASA,4BAA4B;AAGrC,MAAM,CAACC,kBAAkB,EAAEC,aAAa,CAAC,GAAGF,4BAA4B,CAAa,CAAC;AAEtF,SAASC,kBAAkB,EAAEC,aAAa","ignoreList":[]}

package/Alert/AlertSwatchBox.d.ts

@@ -0,0 +1,2 @@
+import * as React from "react";
+export declare const AlertSwatchBox: () => React.JSX.Element | null;

package/Alert/AlertSwatchBox.js

@@ -0,0 +1,21 @@
+import * as React from "react";
+import { useAlertProps } from "./AlertPropsProvider.js";
+export const AlertSwatchBox = () => {
+  const {
+    swatchColor,
+    swatchColorIcon
+  } = useAlertProps();
+  if (!swatchColor || swatchColorIcon === false) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: "h-lg flex items-center"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "size-md rounded-xs",
+    style: {
+      backgroundColor: swatchColor
+    }
+  }));
+};
+
+//# sourceMappingURL=AlertSwatchBox.js.map

package/Alert/AlertSwatchBox.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useAlertProps","AlertSwatchBox","swatchColor","swatchColorIcon","createElement","className","style","backgroundColor"],"sources":["AlertSwatchBox.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { useAlertProps } from \"./AlertPropsProvider.js\";\n\nexport const AlertSwatchBox = () => {\n    const { swatchColor, swatchColorIcon } = useAlertProps();\n\n    if (!swatchColor || swatchColorIcon === false) {\n        return null;\n    }\n\n    return (\n        <div className={\"h-lg flex items-center\"}>\n            <div className={\"size-md rounded-xs\"} style={{ backgroundColor: swatchColor }} />\n        </div>\n    );\n};\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,aAAa;AAEtB,OAAO,MAAMC,cAAc,GAAGA,CAAA,KAAM;EAChC,MAAM;IAAEC,WAAW;IAAEC;EAAgB,CAAC,GAAGH,aAAa,CAAC,CAAC;EAExD,IAAI,CAACE,WAAW,IAAIC,eAAe,KAAK,KAAK,EAAE;IAC3C,OAAO,IAAI;EACf;EAEA,oBACIJ,KAAA,CAAAK,aAAA;IAAKC,SAAS,EAAE;EAAyB,gBACrCN,KAAA,CAAAK,aAAA;IAAKC,SAAS,EAAE,oBAAqB;IAACC,KAAK,EAAE;MAAEC,eAAe,EAAEL;IAAY;EAAE,CAAE,CAC/E,CAAC;AAEd,CAAC","ignoreList":[]}

package/Alert/constants.d.ts

@@ -0,0 +1,6 @@
+export declare const DEFAULT_TYPE = "info";
+export declare const DEFAULT_VARIANT = "subtle";
+export declare const defaultVariants: {
+    readonly type: "info";
+    readonly variant: "subtle";
+};

package/Alert/constants.js

@@ -0,0 +1,8 @@
+export const DEFAULT_TYPE = "info";
+export const DEFAULT_VARIANT = "subtle";
+export const defaultVariants = {
+  type: DEFAULT_TYPE,
+  variant: DEFAULT_VARIANT
+};
+
+//# sourceMappingURL=constants.js.map

package/Alert/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["DEFAULT_TYPE","DEFAULT_VARIANT","defaultVariants","type","variant"],"sources":["constants.ts"],"sourcesContent":["export const DEFAULT_TYPE = \"info\";\nexport const DEFAULT_VARIANT = \"subtle\";\n\nexport const defaultVariants = {\n    type: DEFAULT_TYPE,\n    variant: DEFAULT_VARIANT\n} as const;\n"],"mappings":"AAAA,OAAO,MAAMA,YAAY,GAAG,MAAM;AAClC,OAAO,MAAMC,eAAe,GAAG,QAAQ;AAEvC,OAAO,MAAMC,eAAe,GAAG;EAC3BC,IAAI,EAAEH,YAAY;EAClBI,OAAO,EAAEH;AACb,CAAU","ignoreList":[]}

package/Alert/index.d.ts

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

package/Alert/index.js

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

package/Alert/index.js.map

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

package/AutoComplete/AutoComplete.d.ts

@@ -1,22 +1,22 @@
 import React from "react";
-import type { AutoCompletePrimitiveProps } from "./primitives";
-import type { FormComponentProps } from "../FormComponent";
+import type { AutoCompletePrimitiveProps } from "./primitives/index.js";
+import type { FormComponentProps } from "../FormComponent/index.js";
 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;
+declare const AutoComplete: (({ label, description, note, hint, required, disabled, validation, ...props }: AutoCompleteProps) => React.JSX.Element) & {
+    original: ({ label, description, note, hint, 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;
+    original: (({ label, description, note, hint, required, disabled, validation, ...props }: AutoCompleteProps) => React.JSX.Element) & {
+        original: ({ label, description, note, hint, 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;
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ label, description, note, hint, required, disabled, validation, ...props }: AutoCompleteProps) => React.JSX.Element) & {
+        original: ({ label, description, note, hint, required, disabled, validation, ...props }: AutoCompleteProps) => React.JSX.Element;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

package/AutoComplete/AutoComplete.js

@@ -1,11 +1,12 @@
 import React, { useMemo, useState, useEffect, useRef } from "react";
-import { makeDecoratable } from "../utils";
-import { AutoCompletePrimitive } from "./primitives";
-import { FormComponentDescription, FormComponentErrorMessage, FormComponentLabel, FormComponentNote } from "../FormComponent";
+import { makeDecoratable } from "../utils.js";
+import { AutoCompletePrimitive } from "./primitives/index.js";
+import { FormComponentDescription, FormComponentErrorMessage, FormComponentLabel, FormComponentNote } from "../FormComponent/index.js";
 const DecoratableAutoComplete = ({
   label,
   description,
   note,
+  hint,
   required,
   disabled,
   validation,
@@ -26,9 +27,10 @@ const DecoratableAutoComplete = ({
     }
   }, []);
   return /*#__PURE__*/React.createElement("div", {
-    className: "wby-w-full"
+    className: "w-full"
   }, /*#__PURE__*/React.createElement(FormComponentLabel, {
     text: label,
+    hint: hint,
     required: required,
     disabled: disabled,
     invalid: invalid,

package/AutoComplete/AutoComplete.js.map

@@ -1 +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":[]}
+{"version":3,"names":["React","useMemo","useState","useEffect","useRef","makeDecoratable","AutoCompletePrimitive","FormComponentDescription","FormComponentErrorMessage","FormComponentLabel","FormComponentNote","DecoratableAutoComplete","label","description","note","hint","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.js\";\nimport type { AutoCompletePrimitiveProps } from \"./primitives/index.js\";\nimport { AutoCompletePrimitive } from \"./primitives/index.js\";\nimport type { FormComponentProps } from \"~/FormComponent/index.js\";\nimport {\n    FormComponentDescription,\n    FormComponentErrorMessage,\n    FormComponentLabel,\n    FormComponentNote\n} from \"~/FormComponent/index.js\";\n\ntype AutoCompleteProps = AutoCompletePrimitiveProps & FormComponentProps;\n\nconst DecoratableAutoComplete = ({\n    label,\n    description,\n    note,\n    hint,\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={\"w-full\"}>\n            <FormComponentLabel\n                text={label}\n                hint={hint}\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,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,GAAGvB,OAAO,CAAC,MAAMoB,iBAAiB,KAAK,KAAK,EAAE,CAACA,iBAAiB,CAAC,CAAC;;EAE/E;EACA,MAAMI,QAAQ,GAAGrB,MAAM,CAAmB,IAAI,CAAC;EAC/C,MAAM,CAACsB,OAAO,EAAEC,UAAU,CAAC,GAAGzB,QAAQ,CAAS,CAAC;EAEhDC,SAAS,CAAC,MAAM;IACZ,IAAIsB,QAAQ,CAACG,OAAO,EAAEC,EAAE,EAAE;MACtBF,UAAU,CAACF,QAAQ,CAACG,OAAO,CAACC,EAAE,CAAC;IACnC;EACJ,CAAC,EAAE,EAAE,CAAC;EAEN,oBACI7B,KAAA,CAAA8B,aAAA;IAAKC,SAAS,EAAE;EAAS,gBACrB/B,KAAA,CAAA8B,aAAA,CAACrB,kBAAkB;IACfuB,IAAI,EAAEpB,KAAM;IACZG,IAAI,EAAEA,IAAK;IACXC,QAAQ,EAAEA,QAAS;IACnBC,QAAQ,EAAEA,QAAS;IACnBO,OAAO,EAAEA,OAAQ;IACjBS,OAAO,EAAEP;EAAQ,CACpB,CAAC,eACF1B,KAAA,CAAA8B,aAAA,CAACvB,wBAAwB;IAACyB,IAAI,EAAEnB,WAAY;IAACI,QAAQ,EAAEA;EAAS,CAAE,CAAC,eACnEjB,KAAA,CAAA8B,aAAA,CAACxB,qBAAqB,EAAA4B,MAAA,CAAAC,MAAA,KACdhB,KAAK;IACTM,QAAQ,EAAEA,QAAS;IACnBR,QAAQ,EAAEA,QAAS;IACnBL,KAAK,EAAEA,KAAM;IACbY,OAAO,EAAEA;EAAQ,EACpB,CAAC,eACFxB,KAAA,CAAA8B,aAAA,CAACtB,yBAAyB;IACtBwB,IAAI,EAAET,iBAAkB;IACxBC,OAAO,EAAEA,OAAQ;IACjBP,QAAQ,EAAEA;EAAS,CACtB,CAAC,eACFjB,KAAA,CAAA8B,aAAA,CAACpB,iBAAiB;IAACsB,IAAI,EAAElB,IAAK;IAACG,QAAQ,EAAEA;EAAS,CAAE,CACnD,CAAC;AAEd,CAAC;AAED,MAAMmB,YAAY,GAAG/B,eAAe,CAAC,cAAc,EAAEM,uBAAuB,CAAC;AAE7E,SAASyB,YAAY","ignoreList":[]}