@webiny/admin-ui 6.0.0-alpha.4 → 6.0.0-rc.0

package/Alert/Alert.d.ts

@@ -1,14 +1,17 @@
 import * as React from "react";
-import { type VariantProps } from "../utils";
-import { type ButtonProps } from "../Button";
+import { type VariantProps } from "../utils.js";
+import { type ButtonProps } from "../Button/index.js";
 declare const alertVariants: (props?: ({
     type?: "info" | "success" | "warning" | "danger" | null | undefined;
     variant?: "strong" | "subtle" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/dist/types.js").ClassProp) | undefined) => string;
 export interface AlertProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof alertVariants> {
     showCloseButton?: boolean;
+    icon?: React.ReactElement | null;
     onClose?: () => void;
     actions?: React.ReactElement<typeof AlertAction>;
+    swatchColor?: string;
+    swatchColorIcon?: boolean;
 }
 declare const AlertAction: ((props: ButtonProps) => React.JSX.Element) & {
     original: (props: ButtonProps) => React.JSX.Element;
@@ -23,27 +26,27 @@ declare const AlertAction: ((props: ButtonProps) => React.JSX.Element) & {
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<((props: ButtonProps) => React.JSX.Element) & {
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<((props: ButtonProps) => React.JSX.Element) & {
         original: (props: ButtonProps) => React.JSX.Element;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;
 };
-declare const Alert: (({ className, type, variant, showCloseButton, onClose, actions, children, ...props }: AlertProps) => React.JSX.Element) & {
-    original: ({ className, type, variant, showCloseButton, onClose, actions, children, ...props }: AlertProps) => React.JSX.Element;
+declare const Alert: ((props: AlertProps) => React.JSX.Element) & {
+    original: (props: AlertProps) => React.JSX.Element;
     originalName: string;
     displayName: string;
 } & {
-    original: (({ className, type, variant, showCloseButton, onClose, actions, children, ...props }: AlertProps) => React.JSX.Element) & {
-        original: ({ className, type, variant, showCloseButton, onClose, actions, children, ...props }: AlertProps) => React.JSX.Element;
+    original: ((props: AlertProps) => React.JSX.Element) & {
+        original: (props: AlertProps) => React.JSX.Element;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ className, type, variant, showCloseButton, onClose, actions, children, ...props }: AlertProps) => React.JSX.Element) & {
-        original: ({ className, type, variant, showCloseButton, onClose, actions, children, ...props }: AlertProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<((props: AlertProps) => React.JSX.Element) & {
+        original: (props: AlertProps) => React.JSX.Element;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;
@@ -61,7 +64,7 @@ declare const Alert: (({ className, type, variant, showCloseButton, onClose, act
         originalName: string;
         displayName: string;
     } & {
-        createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<((props: ButtonProps) => React.JSX.Element) & {
+        createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<((props: ButtonProps) => React.JSX.Element) & {
             original: (props: ButtonProps) => React.JSX.Element;
             originalName: string;
             displayName: string;

package/Alert/Alert.js

@@ -1,127 +1,64 @@
 import * as React from "react";
-import { cva, cn, makeDecoratable, withStaticProps } from "../utils";
-import { Button, IconButton } from "../Button";
-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 { ReactComponent as XIcon } from "@webiny/icons/close.svg";
-import { Icon } from "../Icon";
-const VARIANT_ICON_MAP = {
-  info: InfoIcon,
-  success: SuccessIcon,
-  warning: InfoIcon,
-  danger: WarningIcon
-};
-const variants = {
-  type: {
-    info: "",
-    success: "",
-    warning: "",
-    danger: ""
+import { useMemo } from "react";
+import { cn, cva, makeDecoratable, withStaticProps } from "../utils.js";
+import { Button } from "../Button/index.js";
+import { AlertIcon } from "./AlertIcon.js";
+import { AlertSwatchBox } from "./AlertSwatchBox.js";
+import { AlertPropsProvider, useAlertProps } from "./AlertPropsProvider.js";
+import { AlertCloseButton } from "./AlertCloseButton.js";
+import { defaultVariants } from "./constants.js";
+const alertVariants = cva("flex gap-sm-plus items-start w-full rounded-lg text-md py-sm-extra pl-md pr-sm-plus [&_a]:font-semibold [&_a]:underline", {
+  variants: {
+    type: {
+      info: "",
+      success: "",
+      warning: "",
+      danger: ""
+    },
+    variant: {
+      strong: "",
+      subtle: ""
+    }
   },
-  variant: {
-    strong: "",
-    subtle: ""
-  }
-};
-const DEFAULT_TYPE = "info";
-const DEFAULT_VARIANT = "subtle";
-const defaultVariants = {
-  type: DEFAULT_TYPE,
-  variant: DEFAULT_VARIANT
-};
-const alertVariants = cva("wby-flex wby-gap-sm-plus wby-items-start wby-w-full wby-rounded-lg wby-text-md wby-py-sm-extra wby-pl-md wby-pr-sm-plus [&_a]:wby-font-semibold [&_a]:wby-underline", {
-  variants,
-  defaultVariants,
-  compoundVariants: [{
-    type: "info",
-    variant: "strong",
-    className: "wby-bg-neutral-dark wby-text-neutral-light [&_a]:!wby-text-neutral-light"
-  }, {
-    type: "info",
-    variant: "subtle",
-    className: "wby-bg-neutral-dimmed wby-text-neutral-primary [&_a]:!wby-text-neutral-primary"
-  }, {
-    type: "success",
-    variant: "strong",
-    className: "wby-bg-secondary-default wby-text-neutral-light [&_a]:!wby-text-neutral-light"
-  }, {
-    type: "success",
-    variant: "subtle",
-    className: "wby-bg-success-subtle wby-text-neutral-primary [&_a]:!wby-text-neutral-primary"
-  }, {
-    type: "warning",
-    variant: "strong",
-    className: "wby-bg-warning-default wby-text-neutral-primary [&_a]:!wby-text-neutral-primary"
-  }, {
-    type: "warning",
-    variant: "subtle",
-    className: "wby-bg-warning-subtle wby-text-neutral-primary [&_a]:!wby-text-neutral-primary"
-  }, {
-    type: "danger",
-    variant: "strong",
-    className: "wby-bg-destructive-default wby-text-neutral-light [&_a]:!wby-text-neutral-light"
-  }, {
-    type: "danger",
-    variant: "subtle",
-    className: "wby-bg-destructive-subtle wby-text-neutral-primary [&_a]:!wby-text-neutral-primary"
-  }]
-});
-const alertIconVariants = cva("wby-size-md", {
-  variants,
   defaultVariants,
   compoundVariants: [{
     type: "info",
     variant: "strong",
-    className: "wby-fill-neutral-base"
+    className: "bg-neutral-dark text-neutral-light [&_a]:text-neutral-light!"
   }, {
     type: "info",
     variant: "subtle",
-    className: "wby-fill-neutral-xstrong"
+    className: "bg-neutral-dimmed text-neutral-primary [&_a]:text-neutral-primary!"
   }, {
     type: "success",
     variant: "strong",
-    className: "wby-fill-neutral-base"
+    className: "bg-secondary text-neutral-light [&_a]:text-neutral-light!"
   }, {
     type: "success",
     variant: "subtle",
-    className: "wby-fill-success"
+    className: "bg-success-subtle text-neutral-primary [&_a]:text-neutral-primary!"
   }, {
     type: "warning",
     variant: "strong",
-    className: "wby-fill-neutral-xstrong"
+    className: "bg-warning text-neutral-primary [&_a]:text-neutral-primary!"
   }, {
     type: "warning",
     variant: "subtle",
-    className: "wby-fill-warning"
+    className: "bg-warning-subtle text-neutral-primary [&_a]:text-neutral-primary!"
   }, {
     type: "danger",
     variant: "strong",
-    className: "wby-fill-neutral-base"
+    className: "bg-destructive text-neutral-light [&_a]:text-neutral-light!"
   }, {
     type: "danger",
     variant: "subtle",
-    className: "wby-fill-destructive"
+    className: "bg-destructive-subtle text-neutral-primary [&_a]:text-neutral-primary!"
   }]
 });
-const closeButtonVariants = (props = {}) => {
-  const {
-    type = DEFAULT_TYPE,
-    variant = DEFAULT_VARIANT
-  } = props;
-  if (variant === "subtle") {
-    return "ghost";
-  }
-  if (type === "warning") {
-    return "ghost";
-  }
-  return "ghost-negative";
-};
-const AlertContext = /*#__PURE__*/React.createContext({});
 const AlertActionBase = props => {
   const {
     variant: alertVariant
-  } = React.useContext(AlertContext);
+  } = useAlertProps();
   return /*#__PURE__*/React.createElement(Button, Object.assign({
     text: "Button",
     variant: alertVariant === "strong" ? "secondary" : "tertiary",
@@ -129,48 +66,38 @@ const AlertActionBase = props => {
   }, props));
 };
 const AlertAction = makeDecoratable("AlertAction", AlertActionBase);
-const AlertBase = ({
-  className,
-  type,
-  variant,
-  showCloseButton,
-  onClose,
-  actions,
-  children,
-  ...props
-}) => {
-  const IconComponent = VARIANT_ICON_MAP[type || "info"];
-  return /*#__PURE__*/React.createElement(AlertContext.Provider, {
-    value: {
-      variant
+const AlertBase = props => {
+  const {
+    className,
+    type,
+    variant,
+    swatchColor,
+    actions,
+    children,
+    ...rootRestProps
+  } = props;
+  const backgroundColor = useMemo(() => {
+    if (!swatchColor) {
+      return;
     }
+    return swatchColor + "66";
+  }, [swatchColor]);
+  return /*#__PURE__*/React.createElement(AlertPropsProvider, {
+    props: props
   }, /*#__PURE__*/React.createElement("div", Object.assign({
     role: "alert",
     className: cn(alertVariants({
       type,
       variant
-    }), className)
-  }, props), /*#__PURE__*/React.createElement("div", {
-    className: "wby-py-xs"
-  }, /*#__PURE__*/React.createElement(IconComponent, {
-    className: alertIconVariants({
-      type,
-      variant
-    })
-  })), /*#__PURE__*/React.createElement("div", {
-    className: "wby-flex-grow wby-py-xxs"
-  }, children), actions && /*#__PURE__*/React.createElement("div", null, actions), showCloseButton && /*#__PURE__*/React.createElement(IconButton, {
-    onClick: onClose,
-    icon: /*#__PURE__*/React.createElement(Icon, {
-      icon: /*#__PURE__*/React.createElement(XIcon, null),
-      label: "Close"
-    }),
-    size: "sm",
-    variant: closeButtonVariants({
-      type,
-      variant
-    })
-  })));
+    }), className),
+    style: {
+      backgroundColor
+    }
+  }, rootRestProps), /*#__PURE__*/React.createElement(AlertSwatchBox, null), /*#__PURE__*/React.createElement(AlertIcon, null), /*#__PURE__*/React.createElement("div", {
+    className: "grow py-xxs"
+  }, children), actions && /*#__PURE__*/React.createElement("div", {
+    className: "flex gap-sm"
+  }, actions), /*#__PURE__*/React.createElement(AlertCloseButton, null)));
 };
 const Alert = withStaticProps(makeDecoratable("AlertBase", AlertBase), {
   Action: AlertAction

package/Alert/Alert.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","cva","cn","makeDecoratable","withStaticProps","Button","IconButton","ReactComponent","InfoIcon","WarningIcon","SuccessIcon","XIcon","Icon","VARIANT_ICON_MAP","info","success","warning","danger","variants","type","variant","strong","subtle","DEFAULT_TYPE","DEFAULT_VARIANT","defaultVariants","alertVariants","compoundVariants","className","alertIconVariants","closeButtonVariants","props","AlertContext","createContext","AlertActionBase","alertVariant","useContext","createElement","Object","assign","text","size","AlertAction","AlertBase","showCloseButton","onClose","actions","children","IconComponent","Provider","value","role","onClick","icon","label","Alert","Action"],"sources":["Alert.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cva, type VariantProps, cn, makeDecoratable, withStaticProps } from \"~/utils\";\nimport { Button, type ButtonProps, IconButton } from \"~/Button\";\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 { ReactComponent as XIcon } from \"@webiny/icons/close.svg\";\nimport { Icon } from \"~/Icon\";\n\nconst VARIANT_ICON_MAP = {\n    info: InfoIcon,\n    success: SuccessIcon,\n    warning: InfoIcon,\n    danger: WarningIcon\n};\n\nconst variants = {\n    type: { info: \"\", success: \"\", warning: \"\", danger: \"\" },\n    variant: { strong: \"\", subtle: \"\" }\n};\n\nconst DEFAULT_TYPE = \"info\";\nconst DEFAULT_VARIANT = \"subtle\";\n\nconst defaultVariants = {\n    type: DEFAULT_TYPE,\n    variant: DEFAULT_VARIANT\n} as const;\n\nconst alertVariants = cva(\n    \"wby-flex wby-gap-sm-plus wby-items-start wby-w-full wby-rounded-lg wby-text-md wby-py-sm-extra wby-pl-md wby-pr-sm-plus [&_a]:wby-font-semibold [&_a]:wby-underline\",\n    {\n        variants,\n        defaultVariants,\n        compoundVariants: [\n            {\n                type: \"info\",\n                variant: \"strong\",\n                className:\n                    \"wby-bg-neutral-dark wby-text-neutral-light [&_a]:!wby-text-neutral-light\"\n            },\n            {\n                type: \"info\",\n                variant: \"subtle\",\n                className:\n                    \"wby-bg-neutral-dimmed wby-text-neutral-primary [&_a]:!wby-text-neutral-primary\"\n            },\n            {\n                type: \"success\",\n                variant: \"strong\",\n                className:\n                    \"wby-bg-secondary-default wby-text-neutral-light [&_a]:!wby-text-neutral-light\"\n            },\n            {\n                type: \"success\",\n                variant: \"subtle\",\n                className:\n                    \"wby-bg-success-subtle wby-text-neutral-primary [&_a]:!wby-text-neutral-primary\"\n            },\n            {\n                type: \"warning\",\n                variant: \"strong\",\n                className:\n                    \"wby-bg-warning-default wby-text-neutral-primary [&_a]:!wby-text-neutral-primary\"\n            },\n            {\n                type: \"warning\",\n                variant: \"subtle\",\n                className:\n                    \"wby-bg-warning-subtle wby-text-neutral-primary [&_a]:!wby-text-neutral-primary\"\n            },\n            {\n                type: \"danger\",\n                variant: \"strong\",\n                className:\n                    \"wby-bg-destructive-default wby-text-neutral-light [&_a]:!wby-text-neutral-light\"\n            },\n            {\n                type: \"danger\",\n                variant: \"subtle\",\n                className:\n                    \"wby-bg-destructive-subtle wby-text-neutral-primary [&_a]:!wby-text-neutral-primary\"\n            }\n        ]\n    }\n);\n\nconst alertIconVariants = cva(\"wby-size-md\", {\n    variants,\n    defaultVariants,\n    compoundVariants: [\n        { type: \"info\", variant: \"strong\", className: \"wby-fill-neutral-base\" },\n        { type: \"info\", variant: \"subtle\", className: \"wby-fill-neutral-xstrong\" },\n        { type: \"success\", variant: \"strong\", className: \"wby-fill-neutral-base\" },\n        { type: \"success\", variant: \"subtle\", className: \"wby-fill-success\" },\n        { type: \"warning\", variant: \"strong\", className: \"wby-fill-neutral-xstrong\" },\n        { type: \"warning\", variant: \"subtle\", className: \"wby-fill-warning\" },\n        { type: \"danger\", variant: \"strong\", className: \"wby-fill-neutral-base\" },\n        { type: \"danger\", variant: \"subtle\", className: \"wby-fill-destructive\" }\n    ]\n});\n\nconst closeButtonVariants = (props: Parameters<typeof alertVariants>[0] = {}) => {\n    const { type = DEFAULT_TYPE, variant = DEFAULT_VARIANT } = props;\n    if (variant === \"subtle\") {\n        return \"ghost\";\n    }\n\n    if (type === \"warning\") {\n        return \"ghost\";\n    }\n\n    return \"ghost-negative\";\n};\n\nexport interface AlertProps\n    extends React.HTMLAttributes<HTMLDivElement>,\n        VariantProps<typeof alertVariants> {\n    showCloseButton?: boolean;\n    onClose?: () => void;\n    actions?: React.ReactElement<typeof AlertAction>;\n}\n\nconst AlertContext = React.createContext<Pick<AlertProps, \"variant\">>({});\n\nconst AlertActionBase = (props: ButtonProps) => {\n    const { variant: alertVariant } = React.useContext(AlertContext);\n    return (\n        <Button\n            text={\"Button\"}\n            variant={alertVariant === \"strong\" ? \"secondary\" : \"tertiary\"}\n            size={\"sm\"}\n            {...props}\n        />\n    );\n};\n\nconst AlertAction = makeDecoratable(\"AlertAction\", AlertActionBase);\n\nconst AlertBase = ({\n    className,\n    type,\n    variant,\n    showCloseButton,\n    onClose,\n    actions,\n    children,\n    ...props\n}: AlertProps) => {\n    const IconComponent = VARIANT_ICON_MAP[type || \"info\"];\n\n    return (\n        <AlertContext.Provider value={{ variant }}>\n            <div\n                role=\"alert\"\n                className={cn(alertVariants({ type, variant }), className)}\n                {...props}\n            >\n                <div className={\"wby-py-xs\"}>\n                    <IconComponent className={alertIconVariants({ type, variant })} />\n                </div>\n                <div className={\"wby-flex-grow wby-py-xxs\"}>{children}</div>\n                {actions && <div>{actions}</div>}\n                {showCloseButton && (\n                    <IconButton\n                        onClick={onClose}\n                        icon={<Icon icon={<XIcon />} label=\"Close\" />}\n                        size={\"sm\"}\n                        variant={closeButtonVariants({ type, variant })}\n                    />\n                )}\n            </div>\n        </AlertContext.Provider>\n    );\n};\n\nconst Alert = withStaticProps(makeDecoratable(\"AlertBase\", AlertBase), {\n    Action: AlertAction\n});\n\nexport { Alert };\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","useMemo","cn","cva","makeDecoratable","withStaticProps","Button","AlertIcon","AlertSwatchBox","AlertPropsProvider","useAlertProps","AlertCloseButton","defaultVariants","alertVariants","variants","type","info","success","warning","danger","variant","strong","subtle","compoundVariants","className","AlertActionBase","props","alertVariant","createElement","Object","assign","text","size","AlertAction","AlertBase","swatchColor","actions","children","rootRestProps","backgroundColor","role","style","Alert","Action"],"sources":["Alert.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { useMemo } from \"react\";\nimport { cn, cva, makeDecoratable, type VariantProps, withStaticProps } from \"~/utils.js\";\nimport { Button, type ButtonProps } from \"~/Button/index.js\";\nimport { AlertIcon } from \"./AlertIcon.js\";\nimport { AlertSwatchBox } from \"./AlertSwatchBox.js\";\nimport { AlertPropsProvider, useAlertProps } from \"./AlertPropsProvider.js\";\nimport { AlertCloseButton } from \"./AlertCloseButton.js\";\nimport { defaultVariants } from \"./constants.js\";\n\nconst alertVariants = cva(\n    \"flex gap-sm-plus items-start w-full rounded-lg text-md py-sm-extra pl-md pr-sm-plus [&_a]:font-semibold [&_a]:underline\",\n    {\n        variants: {\n            type: { info: \"\", success: \"\", warning: \"\", danger: \"\" },\n            variant: { strong: \"\", subtle: \"\" }\n        },\n        defaultVariants,\n        compoundVariants: [\n            {\n                type: \"info\",\n                variant: \"strong\",\n                className: \"bg-neutral-dark text-neutral-light [&_a]:text-neutral-light!\"\n            },\n            {\n                type: \"info\",\n                variant: \"subtle\",\n                className: \"bg-neutral-dimmed text-neutral-primary [&_a]:text-neutral-primary!\"\n            },\n            {\n                type: \"success\",\n                variant: \"strong\",\n                className: \"bg-secondary text-neutral-light [&_a]:text-neutral-light!\"\n            },\n            {\n                type: \"success\",\n                variant: \"subtle\",\n                className: \"bg-success-subtle text-neutral-primary [&_a]:text-neutral-primary!\"\n            },\n            {\n                type: \"warning\",\n                variant: \"strong\",\n                className: \"bg-warning text-neutral-primary [&_a]:text-neutral-primary!\"\n            },\n            {\n                type: \"warning\",\n                variant: \"subtle\",\n                className: \"bg-warning-subtle text-neutral-primary [&_a]:text-neutral-primary!\"\n            },\n            {\n                type: \"danger\",\n                variant: \"strong\",\n                className: \"bg-destructive text-neutral-light [&_a]:text-neutral-light!\"\n            },\n            {\n                type: \"danger\",\n                variant: \"subtle\",\n                className: \"bg-destructive-subtle text-neutral-primary [&_a]:text-neutral-primary!\"\n            }\n        ]\n    }\n);\n\nexport interface AlertProps\n    extends React.HTMLAttributes<HTMLDivElement>,\n        VariantProps<typeof alertVariants> {\n    showCloseButton?: boolean;\n    icon?: React.ReactElement | null;\n    onClose?: () => void;\n    actions?: React.ReactElement<typeof AlertAction>;\n    swatchColor?: string;\n    swatchColorIcon?: boolean;\n}\n\nconst AlertActionBase = (props: ButtonProps) => {\n    const { variant: alertVariant } = useAlertProps();\n    return (\n        <Button\n            text={\"Button\"}\n            variant={alertVariant === \"strong\" ? \"secondary\" : \"tertiary\"}\n            size={\"sm\"}\n            {...props}\n        />\n    );\n};\n\nconst AlertAction = makeDecoratable(\"AlertAction\", AlertActionBase);\n\nconst AlertBase = (props: AlertProps) => {\n    const { className, type, variant, swatchColor, actions, children, ...rootRestProps } = props;\n\n    const backgroundColor = useMemo(() => {\n        if (!swatchColor) {\n            return;\n        }\n\n        return swatchColor + \"66\";\n    }, [swatchColor]);\n\n    return (\n        <AlertPropsProvider props={props}>\n            <div\n                role=\"alert\"\n                className={cn(alertVariants({ type, variant }), className)}\n                style={{ backgroundColor }}\n                {...rootRestProps}\n            >\n                <AlertSwatchBox />\n                <AlertIcon />\n                <div className={\"grow py-xxs\"}>{children}</div>\n                {actions && <div className={\"flex gap-sm\"}>{actions}</div>}\n                <AlertCloseButton />\n            </div>\n        </AlertPropsProvider>\n    );\n};\n\nconst Alert = withStaticProps(makeDecoratable(\"AlertBase\", AlertBase), {\n    Action: AlertAction\n});\n\nexport { Alert };\n"],"mappings":"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","ignoreList":[]}

package/Alert/Alert.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Meta, Controls } from '@storybook/blocks';
+import { Canvas, Meta, Controls } from '@storybook/addon-docs/blocks';
 
 import * as AlertStories from './Alert.stories';
 
@@ -189,4 +189,4 @@ import { Alert } from '@webiny/admin-ui';
 <img src="/images/storybook/alert/floating-element.png" alt="Floating element"/>
 
 ### Nested element
-<img src="/images/storybook/alert/nested-element.png" alt="Nested element"/>
+<img src="/images/storybook/alert/nested-element.png" alt="Nested element"/>

package/Alert/Alert.stories.d.ts

@@ -1,5 +1,5 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { Alert } from "./Alert";
+import type { Meta, StoryObj } from "@storybook/react-webpack5";
+import { Alert } from "./Alert.js";
 declare const meta: Meta<typeof Alert>;
 export default meta;
 type Story = StoryObj<typeof Alert>;
@@ -12,6 +12,11 @@ export declare const Warning: Story;
 export declare const WarningStrong: Story;
 export declare const Danger: Story;
 export declare const DangerStrong: Story;
+export declare const WithCustomIcon: Story;
+export declare const WithNoIcon: Story;
 export declare const WithCloseButton: Story;
 export declare const WithAction: Story;
+export declare const WithSwatchColor: Story;
+export declare const WithSwatchColorNoIcon: Story;
+export declare const WithSwatchColorNoSwatchIcon: Story;
 export declare const Documentation: Story;

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;