@webiny/admin-ui 0.0.0-unstable.6f45466a1d → 0.0.0-unstable.7be00a75a9

package/AdminUiProvider/AdminUiProvider.js

@@ -1,22 +1,54 @@
-import React from "react";
+import react, { useCallback, useEffect, useMemo, useRef } from "react";
 import { Toast } from "../Toast/index.js";
 import { Tooltip } from "../Tooltip/index.js";
 import { DefaultLinkComponent } from "../index.js";
-export const AdminUiContext = /*#__PURE__*/React.createContext({
-  linkComponent: DefaultLinkComponent
-});
-export const AdminUiProvider = ({
-  children,
-  linkComponent
-}) => {
-  return /*#__PURE__*/React.createElement(AdminUiContext.Provider, {
-    value: {
-      linkComponent: linkComponent ?? DefaultLinkComponent
-    }
-  }, /*#__PURE__*/React.createElement(Tooltip.Provider, null, children), /*#__PURE__*/React.createElement(Toast.Provider, null));
+const passthrough = (markdown)=>markdown;
+const passthroughFileUrlFormatter = {
+    format (_url) {}
 };
-export const useAdminUi = () => {
-  return React.useContext(AdminUiContext);
+const AdminUiContext = /*#__PURE__*/ react.createContext(void 0);
+const AdminUiProvider = ({ children, ...props })=>{
+    const linkComponent = props.linkComponent ?? DefaultLinkComponent;
+    const markdownCompiler = props.markdownCompiler ?? passthrough;
+    const fileUrlFormatter = props.fileUrlFormatter ?? passthroughFileUrlFormatter;
+    const cacheRef = useRef(new Map());
+    useEffect(()=>{
+        cacheRef.current.clear();
+    }, [
+        markdownCompiler
+    ]);
+    const compileMarkdown = useCallback((markdown)=>{
+        if (!markdownCompiler) return markdown;
+        if (/*#__PURE__*/ react.isValidElement(markdown)) return markdown;
+        if ("string" == typeof markdown) {
+            const cached = cacheRef.current.get(markdown);
+            if (void 0 !== cached) return cached;
+            const compiled = markdownCompiler(markdown);
+            cacheRef.current.set(markdown, compiled);
+            return compiled;
+        }
+        return markdown;
+    }, [
+        markdownCompiler
+    ]);
+    const contextValue = useMemo(()=>({
+            linkComponent,
+            compileMarkdown,
+            fileUrlFormatter
+        }), [
+        linkComponent,
+        compileMarkdown,
+        fileUrlFormatter
+    ]);
+    return /*#__PURE__*/ react.createElement(AdminUiContext.Provider, {
+        value: contextValue
+    }, /*#__PURE__*/ react.createElement(Tooltip.Provider, null, children), /*#__PURE__*/ react.createElement(Toast.Provider, null));
 };
+const useAdminUi = ()=>{
+    const context = react.useContext(AdminUiContext);
+    if (!context) throw new Error("AdminUiProvider is missing from the component tree.");
+    return context;
+};
+export { AdminUiContext, AdminUiProvider, useAdminUi };
 
 //# sourceMappingURL=AdminUiProvider.js.map

package/AdminUiProvider/AdminUiProvider.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Toast","Tooltip","DefaultLinkComponent","AdminUiContext","createContext","linkComponent","AdminUiProvider","children","createElement","Provider","value","useAdminUi","useContext"],"sources":["AdminUiProvider.tsx"],"sourcesContent":["import React from \"react\";\nimport { Toast } from \"~/Toast/index.js\";\nimport { Tooltip } from \"~/Tooltip/index.js\";\nimport { type LinkComponent, DefaultLinkComponent } from \"~/index.js\";\n\nexport interface AdminUiContextValue {\n    linkComponent: LinkComponent;\n}\n\nexport const AdminUiContext = React.createContext<AdminUiContextValue>({\n    linkComponent: DefaultLinkComponent\n});\n\nexport interface AdminUiProviderProps {\n    linkComponent?: LinkComponent;\n    children: React.ReactNode;\n}\n\nexport const AdminUiProvider = ({ children, linkComponent }: AdminUiProviderProps) => {\n    return (\n        <AdminUiContext.Provider value={{ linkComponent: linkComponent ?? DefaultLinkComponent }}>\n            <Tooltip.Provider>{children}</Tooltip.Provider>\n            <Toast.Provider />\n        </AdminUiContext.Provider>\n    );\n};\n\nexport const useAdminUi = () => {\n    return React.useContext(AdminUiContext);\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,KAAK;AACd,SAASC,OAAO;AAChB,SAA6BC,oBAAoB;AAMjD,OAAO,MAAMC,cAAc,gBAAGJ,KAAK,CAACK,aAAa,CAAsB;EACnEC,aAAa,EAAEH;AACnB,CAAC,CAAC;AAOF,OAAO,MAAMI,eAAe,GAAGA,CAAC;EAAEC,QAAQ;EAAEF;AAAoC,CAAC,KAAK;EAClF,oBACIN,KAAA,CAAAS,aAAA,CAACL,cAAc,CAACM,QAAQ;IAACC,KAAK,EAAE;MAAEL,aAAa,EAAEA,aAAa,IAAIH;IAAqB;EAAE,gBACrFH,KAAA,CAAAS,aAAA,CAACP,OAAO,CAACQ,QAAQ,QAAEF,QAA2B,CAAC,eAC/CR,KAAA,CAAAS,aAAA,CAACR,KAAK,CAACS,QAAQ,MAAE,CACI,CAAC;AAElC,CAAC;AAED,OAAO,MAAME,UAAU,GAAGA,CAAA,KAAM;EAC5B,OAAOZ,KAAK,CAACa,UAAU,CAACT,cAAc,CAAC;AAC3C,CAAC","ignoreList":[]}
+{"version":3,"file":"AdminUiProvider/AdminUiProvider.js","sources":["../../src/AdminUiProvider/AdminUiProvider.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useRef } from \"react\";\nimport { Toast } from \"~/Toast/index.js\";\nimport { Tooltip } from \"~/Tooltip/index.js\";\nimport { type LinkComponent, DefaultLinkComponent } from \"~/index.js\";\nimport type { FileUrlFormatter } from \"./FileUrlFormatter.js\";\n\nexport type CompileMarkdown = (markdown: React.ReactNode) => React.ReactNode;\n\nexport interface AdminUiContextValue {\n    linkComponent: LinkComponent;\n    compileMarkdown: CompileMarkdown;\n    fileUrlFormatter: FileUrlFormatter;\n}\n\nconst passthrough = (markdown: string) => markdown;\n\nconst passthroughFileUrlFormatter: FileUrlFormatter = {\n    format(_url: URL): void {\n        // passthrough — no-op\n    }\n};\n\nexport const AdminUiContext = React.createContext<AdminUiContextValue | undefined>(undefined);\n\ninterface MarkdownCompiler {\n    (markdown: string): React.ReactNode;\n}\n\nexport interface AdminUiProviderProps {\n    linkComponent?: LinkComponent;\n    markdownCompiler?: MarkdownCompiler;\n    fileUrlFormatter?: FileUrlFormatter;\n    children: React.ReactNode;\n}\n\nexport const AdminUiProvider = ({ children, ...props }: AdminUiProviderProps) => {\n    const linkComponent = props.linkComponent ?? DefaultLinkComponent;\n    const markdownCompiler = props.markdownCompiler ?? passthrough;\n    const fileUrlFormatter = props.fileUrlFormatter ?? passthroughFileUrlFormatter;\n\n    // Cache to store compiled markdown results\n    const cacheRef = useRef(new Map<string, React.ReactNode>());\n\n    // Clear cache when markdownCompiler changes\n    useEffect(() => {\n        cacheRef.current.clear();\n    }, [markdownCompiler]);\n\n    const compileMarkdown = useCallback(\n        (markdown: React.ReactNode) => {\n            if (!markdownCompiler) {\n                return markdown;\n            }\n\n            if (React.isValidElement(markdown)) {\n                return markdown;\n            }\n\n            if (typeof markdown === \"string\") {\n                // Check cache first\n                const cached = cacheRef.current.get(markdown);\n                if (cached !== undefined) {\n                    return cached;\n                }\n\n                // Compile and cache\n                const compiled = markdownCompiler(markdown);\n                cacheRef.current.set(markdown, compiled);\n                return compiled;\n            }\n\n            return markdown;\n        },\n        [markdownCompiler]\n    );\n\n    const contextValue = useMemo(\n        () => ({ linkComponent, compileMarkdown, fileUrlFormatter }),\n        [linkComponent, compileMarkdown, fileUrlFormatter]\n    );\n\n    return (\n        <AdminUiContext.Provider value={contextValue}>\n            <Tooltip.Provider>{children}</Tooltip.Provider>\n            <Toast.Provider />\n        </AdminUiContext.Provider>\n    );\n};\n\nexport const useAdminUi = () => {\n    const context = React.useContext(AdminUiContext);\n    if (!context) {\n        throw new Error(\"AdminUiProvider is missing from the component tree.\");\n    }\n    return context;\n};\n"],"names":["passthrough","markdown","passthroughFileUrlFormatter","_url","AdminUiContext","React","undefined","AdminUiProvider","children","props","linkComponent","DefaultLinkComponent","markdownCompiler","fileUrlFormatter","cacheRef","useRef","Map","useEffect","compileMarkdown","useCallback","cached","compiled","contextValue","useMemo","Tooltip","Toast","useAdminUi","context","Error"],"mappings":";;;;AAcA,MAAMA,cAAc,CAACC,WAAqBA;AAE1C,MAAMC,8BAAgD;IAClD,QAAOC,IAAS,GAEhB;AACJ;AAEO,MAAMC,iBAAiB,WAAHA,GAAGC,MAAAA,aAAmB,CAAkCC;AAa5E,MAAMC,kBAAkB,CAAC,EAAEC,QAAQ,EAAE,GAAGC,OAA6B;IACxE,MAAMC,gBAAgBD,MAAM,aAAa,IAAIE;IAC7C,MAAMC,mBAAmBH,MAAM,gBAAgB,IAAIT;IACnD,MAAMa,mBAAmBJ,MAAM,gBAAgB,IAAIP;IAGnD,MAAMY,WAAWC,OAAO,IAAIC;IAG5BC,UAAU;QACNH,SAAS,OAAO,CAAC,KAAK;IAC1B,GAAG;QAACF;KAAiB;IAErB,MAAMM,kBAAkBC,YACpB,CAAClB;QACG,IAAI,CAACW,kBACD,OAAOX;QAGX,IAAI,WAAJ,GAAII,MAAAA,cAAoB,CAACJ,WACrB,OAAOA;QAGX,IAAI,AAAoB,YAApB,OAAOA,UAAuB;YAE9B,MAAMmB,SAASN,SAAS,OAAO,CAAC,GAAG,CAACb;YACpC,IAAImB,AAAWd,WAAXc,QACA,OAAOA;YAIX,MAAMC,WAAWT,iBAAiBX;YAClCa,SAAS,OAAO,CAAC,GAAG,CAACb,UAAUoB;YAC/B,OAAOA;QACX;QAEA,OAAOpB;IACX,GACA;QAACW;KAAiB;IAGtB,MAAMU,eAAeC,QACjB,IAAO;YAAEb;YAAeQ;YAAiBL;QAAiB,IAC1D;QAACH;QAAeQ;QAAiBL;KAAiB;IAGtD,OAAO,WAAP,GACI,oBAACT,eAAe,QAAQ;QAAC,OAAOkB;qBAC5B,oBAACE,QAAQ,QAAQ,QAAEhB,WAAAA,WAAAA,GACnB,oBAACiB,MAAM,QAAQ;AAG3B;AAEO,MAAMC,aAAa;IACtB,MAAMC,UAAUtB,MAAAA,UAAgB,CAACD;IACjC,IAAI,CAACuB,SACD,MAAM,IAAIC,MAAM;IAEpB,OAAOD;AACX"}

package/AdminUiProvider/FileUrlFormatter.d.ts

@@ -0,0 +1,7 @@
+export interface FileUrlParams {
+    width?: number;
+    [key: string]: unknown;
+}
+export interface FileUrlFormatter {
+    format(url: URL, params?: FileUrlParams): void;
+}

package/AdminUiProvider/index.d.ts

@@ -1 +1,2 @@
 export * from "./AdminUiProvider.js";
+export * from "./FileUrlFormatter.js";

package/AdminUiProvider/index.js

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

package/Alert/Alert.d.ts

@@ -4,7 +4,7 @@ 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.js").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;

package/Alert/Alert.js

@@ -1,5 +1,3 @@
-import * as React from "react";
-import { useMemo } from "react";
 import { cn, cva, makeDecoratable, withStaticProps } from "../utils.js";
 import { Button } from "../Button/index.js";
 import { AlertIcon } from "./AlertIcon.js";
@@ -7,100 +5,104 @@ 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";
+import * as __rspack_external_react from "react";
 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: ""
+    variants: {
+        type: {
+            info: "",
+            success: "",
+            warning: "",
+            danger: ""
+        },
+        variant: {
+            strong: "",
+            subtle: ""
+        }
     },
-    variant: {
-      strong: "",
-      subtle: ""
-    }
-  },
-  defaultVariants,
-  compoundVariants: [{
-    type: "info",
-    variant: "strong",
-    className: "bg-neutral-dark text-neutral-light [&_a]:text-neutral-light!"
-  }, {
-    type: "info",
-    variant: "subtle",
-    className: "bg-neutral-dimmed text-neutral-primary [&_a]:text-neutral-primary!"
-  }, {
-    type: "success",
-    variant: "strong",
-    className: "bg-secondary text-neutral-light [&_a]:text-neutral-light!"
-  }, {
-    type: "success",
-    variant: "subtle",
-    className: "bg-success-subtle text-neutral-primary [&_a]:text-neutral-primary!"
-  }, {
-    type: "warning",
-    variant: "strong",
-    className: "bg-warning text-neutral-primary [&_a]:text-neutral-primary!"
-  }, {
-    type: "warning",
-    variant: "subtle",
-    className: "bg-warning-subtle text-neutral-primary [&_a]:text-neutral-primary!"
-  }, {
-    type: "danger",
-    variant: "strong",
-    className: "bg-destructive text-neutral-light [&_a]:text-neutral-light!"
-  }, {
-    type: "danger",
-    variant: "subtle",
-    className: "bg-destructive-subtle text-neutral-primary [&_a]:text-neutral-primary!"
-  }]
+    defaultVariants: defaultVariants,
+    compoundVariants: [
+        {
+            type: "info",
+            variant: "strong",
+            className: "bg-neutral-dark text-neutral-light [&_a]:text-neutral-light!"
+        },
+        {
+            type: "info",
+            variant: "subtle",
+            className: "bg-neutral-dimmed text-neutral-primary [&_a]:text-neutral-primary!"
+        },
+        {
+            type: "success",
+            variant: "strong",
+            className: "bg-secondary text-neutral-light [&_a]:text-neutral-light!"
+        },
+        {
+            type: "success",
+            variant: "subtle",
+            className: "bg-success-subtle text-neutral-primary [&_a]:text-neutral-primary!"
+        },
+        {
+            type: "warning",
+            variant: "strong",
+            className: "bg-warning text-neutral-primary [&_a]:text-neutral-primary!"
+        },
+        {
+            type: "warning",
+            variant: "subtle",
+            className: "bg-warning-subtle text-neutral-primary [&_a]:text-neutral-primary!"
+        },
+        {
+            type: "danger",
+            variant: "strong",
+            className: "bg-destructive text-neutral-light [&_a]:text-neutral-light!"
+        },
+        {
+            type: "danger",
+            variant: "subtle",
+            className: "bg-destructive-subtle text-neutral-primary [&_a]:text-neutral-primary!"
+        }
+    ]
 });
-const AlertActionBase = props => {
-  const {
-    variant: alertVariant
-  } = useAlertProps();
-  return /*#__PURE__*/React.createElement(Button, Object.assign({
-    text: "Button",
-    variant: alertVariant === "strong" ? "secondary" : "tertiary",
-    size: "sm"
-  }, props));
+const AlertActionBase = (props)=>{
+    const { variant: alertVariant } = useAlertProps();
+    return /*#__PURE__*/ __rspack_external_react.createElement(Button, {
+        text: "Button",
+        variant: "strong" === alertVariant ? "secondary" : "tertiary",
+        size: "sm",
+        ...props
+    });
 };
 const AlertAction = makeDecoratable("AlertAction", AlertActionBase);
-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),
-    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 AlertBase = (props)=>{
+    const { className, type, variant, swatchColor, actions, children, ...rootRestProps } = props;
+    const { compileMarkdown } = useAdminUi();
+    const backgroundColor = (0, __rspack_external_react.useMemo)(()=>{
+        if (!swatchColor) return;
+        return swatchColor + "66";
+    }, [
+        swatchColor
+    ]);
+    return /*#__PURE__*/ __rspack_external_react.createElement(AlertPropsProvider, {
+        props: props
+    }, /*#__PURE__*/ __rspack_external_react.createElement("div", {
+        role: "alert",
+        className: cn(alertVariants({
+            type,
+            variant
+        }), className),
+        style: {
+            backgroundColor
+        },
+        ...rootRestProps
+    }, /*#__PURE__*/ __rspack_external_react.createElement(AlertSwatchBox, null), /*#__PURE__*/ __rspack_external_react.createElement(AlertIcon, null), /*#__PURE__*/ __rspack_external_react.createElement("div", {
+        className: "grow py-xxs"
+    }, compileMarkdown(children)), actions && /*#__PURE__*/ __rspack_external_react.createElement("div", {
+        className: "flex gap-sm"
+    }, actions), /*#__PURE__*/ __rspack_external_react.createElement(AlertCloseButton, null)));
 };
 const Alert = withStaticProps(makeDecoratable("AlertBase", AlertBase), {
-  Action: AlertAction
+    Action: AlertAction
 });
 export { Alert };
 

package/Alert/Alert.js.map

@@ -1 +1 @@
-{"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":[]}
+{"version":3,"file":"Alert/Alert.js","sources":["../../src/Alert/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"],"names":["alertVariants","cva","defaultVariants","AlertActionBase","props","alertVariant","useAlertProps","Button","AlertAction","makeDecoratable","AlertBase","className","type","variant","swatchColor","actions","children","rootRestProps","compileMarkdown","useAdminUi","backgroundColor","useMemo","AlertPropsProvider","cn","AlertSwatchBox","AlertIcon","AlertCloseButton","Alert","withStaticProps"],"mappings":";;;;;;;;;AAWA,MAAMA,gBAAgBC,IAClB,2HACA;IACI,UAAU;QACN,MAAM;YAAE,MAAM;YAAI,SAAS;YAAI,SAAS;YAAI,QAAQ;QAAG;QACvD,SAAS;YAAE,QAAQ;YAAI,QAAQ;QAAG;IACtC;IACAC,iBAAeA;IACf,kBAAkB;QACd;YACI,MAAM;YACN,SAAS;YACT,WAAW;QACf;QACA;YACI,MAAM;YACN,SAAS;YACT,WAAW;QACf;QACA;YACI,MAAM;YACN,SAAS;YACT,WAAW;QACf;QACA;YACI,MAAM;YACN,SAAS;YACT,WAAW;QACf;QACA;YACI,MAAM;YACN,SAAS;YACT,WAAW;QACf;QACA;YACI,MAAM;YACN,SAAS;YACT,WAAW;QACf;QACA;YACI,MAAM;YACN,SAAS;YACT,WAAW;QACf;QACA;YACI,MAAM;YACN,SAAS;YACT,WAAW;QACf;KACH;AACL;AAaJ,MAAMC,kBAAkB,CAACC;IACrB,MAAM,EAAE,SAASC,YAAY,EAAE,GAAGC;IAClC,OAAO,WAAP,GACI,sCAACC,QAAMA;QACH,MAAM;QACN,SAASF,AAAiB,aAAjBA,eAA4B,cAAc;QACnD,MAAM;QACL,GAAGD,KAAK;;AAGrB;AAEA,MAAMI,cAAcC,gBAAgB,eAAeN;AAEnD,MAAMO,YAAY,CAACN;IACf,MAAM,EAAEO,SAAS,EAAEC,IAAI,EAAEC,OAAO,EAAEC,WAAW,EAAEC,OAAO,EAAEC,QAAQ,EAAE,GAAGC,eAAe,GAAGb;IACvF,MAAM,EAAEc,eAAe,EAAE,GAAGC;IAE5B,MAAMC,kBAAkBC,AAAAA,IAAAA,wBAAAA,OAAAA,AAAAA,EAAQ;QAC5B,IAAI,CAACP,aACD;QAGJ,OAAOA,cAAc;IACzB,GAAG;QAACA;KAAY;IAEhB,OAAO,WAAP,GACI,sCAACQ,oBAAkBA;QAAC,OAAOlB;qBACvB,sCAAC;QACG,MAAK;QACL,WAAWmB,GAAGvB,cAAc;YAAEY;YAAMC;QAAQ,IAAIF;QAChD,OAAO;YAAES;QAAgB;QACxB,GAAGH,aAAa;qBAEjB,sCAACO,gBAAcA,OAAAA,WAAAA,GACf,sCAACC,WAASA,OAAAA,WAAAA,GACV,sCAAC;QAAI,WAAW;OAAgBP,gBAAgBF,YAC/CD,WAAW,WAAXA,GAAW,sCAAC;QAAI,WAAW;OAAgBA,UAAAA,WAAAA,GAC5C,sCAACW,kBAAgBA;AAIjC;AAEA,MAAMC,QAAQC,gBAAgBnB,gBAAgB,aAAaC,YAAY;IACnE,QAAQF;AACZ"}

package/Alert/Alert.mdx

@@ -1,6 +1,6 @@
-import { Canvas, Meta, Controls } from '@storybook/addon-docs/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" />