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

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?: "success" | "info" | "warning" | "danger" | null | undefined;
+    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/types").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,65 @@
 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";
+import { useAdminUi } from "../AdminUiProvider/index.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"
+    className: "bg-neutral-dark text-neutral-light [&_a]:text-neutral-light!"
   }, {
     type: "info",
     variant: "subtle",
-    className: "wby-bg-neutral-dimmed wby-text-neutral-primary [&_a]:!wby-text-neutral-primary"
+    className: "bg-neutral-dimmed text-neutral-primary [&_a]:text-neutral-primary!"
   }, {
     type: "success",
     variant: "strong",
-    className: "wby-bg-secondary-default wby-text-neutral-light [&_a]:!wby-text-neutral-light"
+    className: "bg-secondary text-neutral-light [&_a]:text-neutral-light!"
   }, {
     type: "success",
     variant: "subtle",
-    className: "wby-bg-success-subtle wby-text-neutral-primary [&_a]:!wby-text-neutral-primary"
+    className: "bg-success-subtle text-neutral-primary [&_a]:text-neutral-primary!"
   }, {
     type: "warning",
     variant: "strong",
-    className: "wby-bg-warning-default wby-text-neutral-primary [&_a]:!wby-text-neutral-primary"
+    className: "bg-warning text-neutral-primary [&_a]:text-neutral-primary!"
   }, {
     type: "warning",
     variant: "subtle",
-    className: "wby-bg-warning-subtle wby-text-neutral-primary [&_a]:!wby-text-neutral-primary"
+    className: "bg-warning-subtle text-neutral-primary [&_a]:text-neutral-primary!"
   }, {
     type: "danger",
     variant: "strong",
-    className: "wby-bg-destructive-default wby-text-neutral-light [&_a]:!wby-text-neutral-light"
+    className: "bg-destructive text-neutral-light [&_a]:text-neutral-light!"
   }, {
     type: "danger",
     variant: "subtle",
-    className: "wby-bg-destructive-subtle wby-text-neutral-primary [&_a]:!wby-text-neutral-primary"
+    className: "bg-destructive-subtle text-neutral-primary [&_a]:text-neutral-primary!"
   }]
 });
-const alertIconVariants = cva("wby-size-md", {
-  variants,
-  defaultVariants,
-  compoundVariants: [{
-    type: "info",
-    variant: "strong",
-    className: "wby-fill-neutral-base"
-  }, {
-    type: "info",
-    variant: "subtle",
-    className: "wby-fill-neutral-xstrong"
-  }, {
-    type: "success",
-    variant: "strong",
-    className: "wby-fill-neutral-base"
-  }, {
-    type: "success",
-    variant: "subtle",
-    className: "wby-fill-success"
-  }, {
-    type: "warning",
-    variant: "strong",
-    className: "wby-fill-neutral-xstrong"
-  }, {
-    type: "warning",
-    variant: "subtle",
-    className: "wby-fill-warning"
-  }, {
-    type: "danger",
-    variant: "strong",
-    className: "wby-fill-neutral-base"
-  }, {
-    type: "danger",
-    variant: "subtle",
-    className: "wby-fill-destructive"
-  }]
-});
-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 +67,41 @@ 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 {
+    compileMarkdown
+  } = useAdminUi();
+  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"
+  }, compileMarkdown(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","useAdminUi","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","compileMarkdown","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\";\nimport { useAdminUi } from \"~/AdminUiProvider/index.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>, 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    const { compileMarkdown } = useAdminUi();\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\"}>{compileMarkdown(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,6 +1,6 @@
-import { Canvas, Meta, Controls } from '@storybook/blocks';
+import { Canvas, Meta, Controls } from "@storybook/addon-docs/blocks";
 
-import * as AlertStories from './Alert.stories';
+import * as AlertStories from "./Alert.stories";
 
 <Meta of={AlertStories} />
 
@@ -18,33 +18,33 @@ import React from "react";
 import { Alert } from "@webiny/admin-ui";
 
 const AlertExample = () => {
-    return (
-        <Alert type={"info"}>
-            <>
-                This type of notification is suitable for general usage where there’s no need for
-                accent. And <a href={"#"}>this thing here</a> is a short link.
-            </>
-        </Alert>
-    );
-};
+return (
+
+<Alert type={"info"}>
+  <>
+    This type of notification is suitable for general usage where there’s no need for accent. And{" "}
+    <a href={"#"}>this thing here</a> is a short link.
+  </>
+</Alert>
+); };
 
 export default AlertExample;
 
 ` } }
-        additionalActions={[
-            {
-                title: 'Open in GitHub',
-                onClick: () => {
-                    window.open(
-                        'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/Alert/Alert.tsx',
-                        '_blank'
-                    );
-                },
-            }
-        ]}
+additionalActions={[
+{
+title: 'Open in GitHub',
+onClick: () => {
+window.open(
+'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/Alert/Alert.tsx',
+'_blank'
+);
+},
+}
+]}
 />
 
-<Controls of={AlertStories.Documentation} exclude={"children"}/>
+<Controls of={AlertStories.Documentation} exclude={"children"} />
 
 ```tsx
 import React from "react";
@@ -52,14 +52,14 @@ import React from "react";
 import { Alert } from "@webiny/admin-ui";
 
 const AlertExample = () => {
-    return (
-        <Alert type={"info"}>
-            <>
-                This type of notification is suitable for general usage where there’s no need for
-                accent. And <a href={"#"}>this thing here</a> is a short link.
-            </>
-        </Alert>
-    );
+  return (
+    <Alert type={"info"}>
+      <>
+        This type of notification is suitable for general usage where there’s no need for accent.
+        And <a href={"#"}>this thing here</a> is a short link.
+      </>
+    </Alert>
+  );
 };
 
 export default AlertExample;
@@ -72,121 +72,118 @@ export default AlertExample;
 <Canvas of={AlertStories.Info} source={ { code: `
 // Code for an Info banner
 
-import { Alert } from '@webiny/admin-ui';
+import { Alert } from "@webiny/admin-ui";
 
 <Alert type={"info"}>
-    <>
-        This type of notification is suitable for general usage where there’s no need for
-        accent. And <a href={"#"}>this thing here</a> is a short link.
-    </>
+  <>
+    This type of notification is suitable for general usage where there’s no need for accent. And{" "}
+    <a href={"#"}>this thing here</a> is a short link.
+  </>
 </Alert>
-` } }
-/>
+` } } />
 
 ### Success
 
 <Canvas of={AlertStories.Success} source={ { code: `
 // Code for a Success banner
 
-import { Alert } from '@webiny/admin-ui';
+import { Alert } from "@webiny/admin-ui";
 
 <Alert type={"success"}>
-    <>
-        This is a success alert, used when something occurred successfully. And{" "}
-        <a href={"#"}>this thing here</a> is a short link.
-    </>
+  <>
+    This is a success alert, used when something occurred successfully. And{" "}
+    <a href={"#"}>this thing here</a> is a short link.
+  </>
 </Alert>
-` } }
-/>
-
+` } } />
 
 ### Warning
 
 <Canvas of={AlertStories.Warning} source={ { code: `
 // Code for a Warning banner
 
-import { Alert } from '@webiny/admin-ui';
+import { Alert } from "@webiny/admin-ui";
 
 <Alert type={"warning"}>
-    <>
-        This is a warning alert, used when something of strong relevance needs to be
-        communicated. And <a href={"#"}>this thing here</a> is a short link.
-    </>
+  <>
+    This is a warning alert, used when something of strong relevance needs to be communicated. And{" "}
+    <a href={"#"}>this thing here</a> is a short link.
+  </>
 </Alert>
-` } }
-/>
+` } } />
 
 ### Danger
 
 <Canvas of={AlertStories.Danger} source={ { code: `
 // Code for a Danger banner
 
-import { Alert } from '@webiny/admin-ui';
+import { Alert } from "@webiny/admin-ui";
 
 <Alert type={"danger"}>
-    <>
-        This is a danger alert, used when something critical needs to be communicated. And{" "}
-        <a href={"#"}>this thing here</a> is a short link.
-    </>
+  <>
+    This is a danger alert, used when something critical needs to be communicated. And{" "}
+    <a href={"#"}>this thing here</a> is a short link.
+  </>
 </Alert>
-` } }
-/>
+` } } />
 
 ### With Close Button
 
 <Canvas of={AlertStories.WithCloseButton} source={ { code: `
 // Code for a banner with a Close Button and an onClose action
 
-import { Alert } from '@webiny/admin-ui';
+import { Alert } from "@webiny/admin-ui";
 
 <Alert type={"info"} showCloseButton={true} onClose={() => alert("Close button clicked.")}>
-    <>
-        An alert that can be closed.
-    </>
+  <>An alert that can be closed.</>
 </Alert>
-` } }
-/>
+` } } />
 
 ### With Action
 
 <Canvas of={AlertStories.WithAction} source={ { code: `
 // Code for a banner with a close button and a action button
 
-import { Alert } from '@webiny/admin-ui';
+import { Alert } from "@webiny/admin-ui";
 
-<Alert type={"info"} showCloseButton={true} onClose={() => alert("Close button clicked.")}
-        actions={(
-            <Alert.Action text={"Button"} onClick={() => alert("Custom action button clicked.")} />
-        )}>
-    <>
-        An alert that can be closed and also has action button.
-    </>
+<Alert
+  type={"info"}
+  showCloseButton={true}
+  onClose={() => alert("Close button clicked.")}
+  actions={<Alert.Action text={"Button"} onClick={() => alert("Custom action button clicked.")} />}
+>
+  <>An alert that can be closed and also has action button.</>
 </Alert>
-` } }
-/>
+` } } />
 
 ## Anatomy
 
 ### Options
-<img src="/images/storybook/alert/options.png" alt="Options"/>
+
+<img src="/images/storybook/alert/options.png" alt="Options" />
 
 ### Style
-<img src="/images/storybook/alert/style.png" alt="Style"/>
+
+<img src="/images/storybook/alert/style.png" alt="Style" />
 
 ### Type
-<img src="/images/storybook/alert/type.png" alt="Type"/>
+
+<img src="/images/storybook/alert/type.png" alt="Type" />
 
 ### Examples
-<img src="/images/storybook/alert/examples.png" alt="Examples"/>
+
+<img src="/images/storybook/alert/examples.png" alt="Examples" />
 
 ## Usage
 
 ### Full width banner
-<img src="/images/storybook/alert/full-width-banner.png" alt="Full width banner"/>
 
+<img src="/images/storybook/alert/full-width-banner.png" alt="Full width banner" />
 
 ### Floating element
-<img src="/images/storybook/alert/floating-element.png" alt="Floating element"/>
+
+<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;