@webiny/admin-ui 0.0.0-unstable.a4637c5ce6 → 0.0.0-unstable.a4f3e4ea8b

package/Alert/Alert.stories.js

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

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":"AACA,SAASA,KAAK;AACd,OAAOC,KAAK,MAAM,OAAO;AAEzB,MAAMC,IAAwB,GAAG;EAC7BC,KAAK,EAAE,kBAAkB;EACzBC,SAAS,EAAEJ,KAAK;EAChBK,QAAQ,EAAE,CAAC,CAAC;EACZC,UAAU,EAAE,CACRC,KAAK,iBACDN,KAAA,CAAAO,aAAA;IAAKC,SAAS,EAAC;EAAe,gBAC1BR,KAAA,CAAAO,aAAA,CAACD,KAAK,MAAE,CACP,CACR;AAET,CAAC;AAED,eAAeL,IAAI;AAInB,OAAO,MAAMQ,OAAc,GAAG;EAC1BC,IAAI,EAAE;IACFC,eAAe,EAAE,IAAI;IACrBC,QAAQ,EAAE;EACd,CAAC;EACDR,QAAQ,EAAE;IACNS,IAAI,EAAE;MACFC,OAAO,EAAE,QAAQ;MACjBC,OAAO,EAAE,CAAC,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ;IACpD,CAAC;IACDC,OAAO,EAAE;MACLF,OAAO,EAAE,QAAQ;MACjBC,OAAO,EAAE,CAAC,QAAQ,EAAE,QAAQ;IAChC;EACJ;AACJ,CAAC;AAED,OAAO,MAAME,IAAW,GAAG;EACvBP,IAAI,EAAE;IACF,GAAGD,OAAO,CAACC,IAAI;IACfG,IAAI,EAAE,MAAM;IACZD,QAAQ,eACJZ,KAAA,CAAAO,aAAA,CAAAP,KAAA,CAAAkB,QAAA,QAAE,qGAEc,eAAAlB,KAAA,CAAAO,aAAA;MAAGY,IAAI,EAAE;IAAI,GAAC,iBAAkB,CAAC,qBAC/C;EAEV;AACJ,CAAC;AAED,OAAO,MAAMC,UAAiB,GAAG;EAC7BC,IAAI,EAAE,eAAe;EACrBX,IAAI,EAAE;IACF,GAAGO,IAAI,CAACP,IAAI;IACZM,OAAO,EAAE,QAAQ;IACjBJ,QAAQ,eACJZ,KAAA,CAAAO,aAAA,CAAAP,KAAA,CAAAkB,QAAA,QAAE,uGAEqB,eAAAlB,KAAA,CAAAO,aAAA;MAAGY,IAAI,EAAE;IAAI,GAAC,iBAAkB,CAAC,qBACtD;EAEV;AACJ,CAAC;AAED,OAAO,MAAMG,OAAc,GAAG;EAC1BZ,IAAI,EAAE;IACF,GAAGD,OAAO,CAACC,IAAI;IACfG,IAAI,EAAE,SAAS;IACfD,QAAQ,eACJZ,KAAA,CAAAO,aAAA,CAAAP,KAAA,CAAAkB,QAAA,QAAE,yEACyE,EAAC,GAAG,eAC3ElB,KAAA,CAAAO,aAAA;MAAGY,IAAI,EAAE;IAAI,GAAC,iBAAkB,CAAC,qBACnC;EAEV;AACJ,CAAC;AAED,OAAO,MAAMI,aAAoB,GAAG;EAChCF,IAAI,EAAE,kBAAkB;EACxBX,IAAI,EAAE;IACF,GAAGY,OAAO,CAACZ,IAAI;IACfM,OAAO,EAAE,QAAQ;IACjBJ,QAAQ,eACJZ,KAAA,CAAAO,aAAA,CAAAP,KAAA,CAAAkB,QAAA,QAAE,oGAEiB,eAAAlB,KAAA,CAAAO,aAAA;MAAGY,IAAI,EAAE;IAAI,GAAC,iBAAkB,CAAC,qBAClD;EAEV;AACJ,CAAC;AAED,OAAO,MAAMK,OAAc,GAAG;EAC1Bd,IAAI,EAAE;IACF,GAAGD,OAAO,CAACC,IAAI;IACfE,QAAQ,eACJZ,KAAA,CAAAO,aAAA,CAAAP,KAAA,CAAAkB,QAAA,QAAE,iGAEoB,eAAAlB,KAAA,CAAAO,aAAA;MAAGY,IAAI,EAAE;IAAI,GAAC,iBAAkB,CAAC,qBACrD,CACL;IACDN,IAAI,EAAE;EACV;AACJ,CAAC;AAED,OAAO,MAAMY,aAAoB,GAAG;EAChCJ,IAAI,EAAE,kBAAkB;EACxBX,IAAI,EAAE;IACF,GAAGc,OAAO,CAACd,IAAI;IACfE,QAAQ,eACJZ,KAAA,CAAAO,aAAA,CAAAP,KAAA,CAAAkB,QAAA,QAAE,6GAEgC,eAAAlB,KAAA,CAAAO,aAAA;MAAGY,IAAI,EAAE;IAAI,GAAC,iBAAkB,CAAC,qBACjE,CACL;IACDH,OAAO,EAAE;EACb;AACJ,CAAC;AAED,OAAO,MAAMU,MAAa,GAAG;EACzBhB,IAAI,EAAE;IACF,GAAGD,OAAO,CAACC,IAAI;IACfE,QAAQ,eACJZ,KAAA,CAAAO,aAAA,CAAAP,KAAA,CAAAkB,QAAA,QAAE,oFACoF,EAAC,GAAG,eACtFlB,KAAA,CAAAO,aAAA;MAAGY,IAAI,EAAE;IAAI,GAAC,iBAAkB,CAAC,qBACnC,CACL;IACDN,IAAI,EAAE;EACV;AACJ,CAAC;AAED,OAAO,MAAMc,YAAmB,GAAG;EAC/BN,IAAI,EAAE,iBAAiB;EACvBX,IAAI,EAAE;IACF,GAAGgB,MAAM,CAAChB,IAAI;IACdE,QAAQ,eACJZ,KAAA,CAAAO,aAAA,CAAAP,KAAA,CAAAkB,QAAA,QAAE,iGAEoB,eAAAlB,KAAA,CAAAO,aAAA;MAAGY,IAAI,EAAE;IAAI,GAAC,iBAAkB,CAAC,qBACrD,CACL;IACDH,OAAO,EAAE;EACb;AACJ,CAAC;AAED,OAAO,MAAMY,eAAsB,GAAG;EAClCP,IAAI,EAAE,mBAAmB;EACzBX,IAAI,EAAE;IACF,GAAGD,OAAO,CAACC,IAAI;IACfE,QAAQ,eAAEZ,KAAA,CAAAO,aAAA,CAAAP,KAAA,CAAAkB,QAAA,QAAE,8BAA8B,CAAC;IAC3CP,eAAe,EAAE,IAAI;IACrBkB,OAAO,EAAEA,CAAA,KAAMC,KAAK,CAAC,uBAAuB;EAChD;AACJ,CAAC;AAED,OAAO,MAAMC,UAAiB,GAAG;EAC7BV,IAAI,EAAE,aAAa;EACnBX,IAAI,EAAE;IACF,GAAGkB,eAAe,CAAClB,IAAI;IACvBE,QAAQ,eAAEZ,KAAA,CAAAO,aAAA,CAAAP,KAAA,CAAAkB,QAAA,QAAE,yDAAyD,CAAC;IACtEP,eAAe,EAAE,IAAI;IACrBqB,OAAO,eACHhC,KAAA,CAAAO,aAAA,CAACR,KAAK,CAACkC,MAAM;MAACC,IAAI,EAAE,QAAS;MAACC,OAAO,EAAEA,CAAA,KAAML,KAAK,CAAC,+BAA+B;IAAE,CAAE;EAE9F;AACJ,CAAC;AAED,OAAO,MAAMM,aAAoB,GAAG;EAChC1B,IAAI,EAAE;IACFG,IAAI,EAAE,MAAM;IACZG,OAAO,EAAE,QAAQ;IACjBL,eAAe,EAAE,KAAK;IACtBC,QAAQ,eACJZ,KAAA,CAAAO,aAAA,CAAAP,KAAA,CAAAkB,QAAA,QAAE,qGAEc,eAAAlB,KAAA,CAAAO,aAAA;MAAGY,IAAI,EAAE;IAAI,GAAC,iBAAkB,CAAC,qBAC/C,CACL;IACDU,OAAO,EAAEA,CAAA,KAAM,CAAC,CAAC;IACjBG,OAAO,EAAEK;EACb,CAAC;EACDjC,QAAQ,EAAE;IACNS,IAAI,EAAE;MACFyB,WAAW,EAAE,MAAM;MACnBxB,OAAO,EAAE,QAAQ;MACjBC,OAAO,EAAE,CAAC,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,CAAC;MACjDwB,YAAY,EAAE;IAClB,CAAC;IACDvB,OAAO,EAAE;MACLsB,WAAW,EAAE,SAAS;MACtBxB,OAAO,EAAE,QAAQ;MACjBC,OAAO,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC;MAC7BwB,YAAY,EAAE;IAClB,CAAC;IACD5B,eAAe,EAAE;MACb2B,WAAW,EACP,uFAAuF;MAC3FxB,OAAO,EAAE,SAAS;MAClByB,YAAY,EAAE;IAClB,CAAC;IACDV,OAAO,EAAE;MACLS,WAAW,EAAE,oEAAoE;MACjFxB,OAAO,EAAE;IACb,CAAC;IACDkB,OAAO,EAAE;MACLM,WAAW,EAAE,8DAA8D;MAC3ExB,OAAO,EAAE;IACb;EACJ;AACJ,CAAC","ignoreList":[]}
+{"version":3,"file":"Alert/Alert.stories.js","sources":["../../src/Alert/Alert.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react\";\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"],"names":["meta","Alert","Story","Default","Info","InfoStrong","Success","SuccessStrong","Warning","WarningStrong","Danger","DangerStrong","WithCustomIcon","LifeBuoyIcon","WithNoIcon","WithCloseButton","alert","WithAction","WithSwatchColor","WithSwatchColorNoIcon","WithSwatchColorNoSwatchIcon","Documentation","undefined"],"mappings":"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"}

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

package/Alert/AlertCloseButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Alert/AlertCloseButton.js","sources":["../../src/Alert/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"],"names":["AlertCloseButton","showCloseButton","onClose","type","DEFAULT_TYPE","variant","DEFAULT_VARIANT","useAlertProps","iconButtonVariant","useMemo","IconButton","Icon","XIcon"],"mappings":";;;;;;AAQO,MAAMA,mBAAmB;IAC5B,MAAM,EACFC,eAAe,EACfC,OAAO,EACPC,OAAOC,YAAY,EACnBC,UAAUC,eAAe,EAC5B,GAAGC;IAEJ,IAAI,CAACN,iBACD,OAAO;IAGX,MAAMO,oBAAoBC,AAAAA,IAAAA,wBAAAA,OAAAA,AAAAA,EAAQ;QAC9B,IAAIJ,AAAY,aAAZA,SACA,OAAO;QAGX,IAAIF,AAAS,cAATA,MACA,OAAO;QAGX,OAAO;IACX,GAAG;QAACA;QAAME;KAAQ;IAElB,OAAO,WAAP,GACI,sCAACK,YAAUA;QACP,SAASR;QACT,oBAAM,sCAACS,MAAIA;YAAC,oBAAM,sCAACC,gBAAKA;YAAK,OAAM;;QACnC,MAAM;QACN,SAASJ;;AAGrB"}

package/Alert/AlertIcon.d.ts

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

package/Alert/AlertIcon.js

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

package/Alert/AlertIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Alert/AlertIcon.js","sources":["../../src/Alert/AlertIcon.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cva } from \"~/utils.js\";\nimport { ReactComponent as InfoIcon } from \"@webiny/icons/info.svg\";\nimport { ReactComponent as WarningIcon } from \"@webiny/icons/warning_amber.svg\";\nimport { ReactComponent as SuccessIcon } from \"@webiny/icons/check_circle.svg\";\nimport { useAlertProps } from \"./AlertPropsProvider.js\";\nimport { Icon } from \"~/Icon/Icon.js\";\n\nconst VARIANT_ICON_MAP = {\n    info: InfoIcon,\n    success: SuccessIcon,\n    warning: InfoIcon,\n    danger: WarningIcon\n};\n\nconst alertIconVariants = cva(\"size-md\", {\n    variants: {\n        type: { info: \"\", success: \"\", warning: \"\", danger: \"\" },\n        variant: { strong: \"\", subtle: \"\" }\n    },\n    defaultVariants: {\n        type: \"info\",\n        variant: \"subtle\"\n    },\n    compoundVariants: [\n        { type: \"info\", variant: \"strong\", className: \"fill-neutral-base\" },\n        { type: \"info\", variant: \"subtle\", className: \"fill-neutral-xstrong\" },\n        { type: \"success\", variant: \"strong\", className: \"fill-neutral-base\" },\n        { type: \"success\", variant: \"subtle\", className: \"fill-success\" },\n        { type: \"warning\", variant: \"strong\", className: \"fill-neutral-xstrong\" },\n        { type: \"warning\", variant: \"subtle\", className: \"fill-warning\" },\n        { type: \"danger\", variant: \"strong\", className: \"fill-neutral-base\" },\n        { type: \"danger\", variant: \"subtle\", className: \"fill-destructive\" }\n    ]\n});\n\nexport const AlertIcon = () => {\n    const { icon, type, variant } = useAlertProps();\n    if (icon === null) {\n        return null;\n    }\n\n    let iconElement = icon;\n    if (!iconElement) {\n        const IconComponent = VARIANT_ICON_MAP[type || \"info\"];\n        iconElement = <IconComponent />;\n    }\n\n    return (\n        <div className={\"py-xs\"}>\n            <Icon\n                label={\"Alert icon\"}\n                icon={iconElement}\n                className={alertIconVariants({ type, variant })}\n            />\n        </div>\n    );\n};\n"],"names":["VARIANT_ICON_MAP","InfoIcon","SuccessIcon","WarningIcon","alertIconVariants","cva","AlertIcon","icon","type","variant","useAlertProps","iconElement","IconComponent","Icon"],"mappings":";;;;;;;AAQA,MAAMA,mBAAmB;IACrB,MAAMC;IACN,SAASC;IACT,SAASD;IACT,QAAQE;AACZ;AAEA,MAAMC,oBAAoBC,IAAI,WAAW;IACrC,UAAU;QACN,MAAM;YAAE,MAAM;YAAI,SAAS;YAAI,SAAS;YAAI,QAAQ;QAAG;QACvD,SAAS;YAAE,QAAQ;YAAI,QAAQ;QAAG;IACtC;IACA,iBAAiB;QACb,MAAM;QACN,SAAS;IACb;IACA,kBAAkB;QACd;YAAE,MAAM;YAAQ,SAAS;YAAU,WAAW;QAAoB;QAClE;YAAE,MAAM;YAAQ,SAAS;YAAU,WAAW;QAAuB;QACrE;YAAE,MAAM;YAAW,SAAS;YAAU,WAAW;QAAoB;QACrE;YAAE,MAAM;YAAW,SAAS;YAAU,WAAW;QAAe;QAChE;YAAE,MAAM;YAAW,SAAS;YAAU,WAAW;QAAuB;QACxE;YAAE,MAAM;YAAW,SAAS;YAAU,WAAW;QAAe;QAChE;YAAE,MAAM;YAAU,SAAS;YAAU,WAAW;QAAoB;QACpE;YAAE,MAAM;YAAU,SAAS;YAAU,WAAW;QAAmB;KACtE;AACL;AAEO,MAAMC,YAAY;IACrB,MAAM,EAAEC,IAAI,EAAEC,IAAI,EAAEC,OAAO,EAAE,GAAGC;IAChC,IAAIH,AAAS,SAATA,MACA,OAAO;IAGX,IAAII,cAAcJ;IAClB,IAAI,CAACI,aAAa;QACd,MAAMC,gBAAgBZ,gBAAgB,CAACQ,QAAQ,OAAO;QACtDG,cAAc,WAAdA,GAAc,sCAACC,eAAAA;IACnB;IAEA,OAAO,WAAP,GACI,sCAAC;QAAI,WAAW;qBACZ,sCAACC,MAAIA;QACD,OAAO;QACP,MAAMF;QACN,WAAWP,kBAAkB;YAAEI;YAAMC;QAAQ;;AAI7D"}

package/Alert/AlertPropsProvider.d.ts

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

package/Alert/AlertPropsProvider.js

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

package/Alert/AlertPropsProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Alert/AlertPropsProvider.js","sources":["../../src/Alert/AlertPropsProvider.ts"],"sourcesContent":["import { createComponentPropsProvider } from \"~/utils.js\";\nimport { type AlertProps } from \"./Alert.js\";\n\nconst [AlertPropsProvider, useAlertProps] = createComponentPropsProvider<AlertProps>();\n\nexport { AlertPropsProvider, useAlertProps };\n"],"names":["AlertPropsProvider","useAlertProps","createComponentPropsProvider"],"mappings":";AAGA,MAAM,CAACA,oBAAoBC,cAAc,GAAGC"}

package/Alert/AlertSwatchBox.d.ts

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

package/Alert/AlertSwatchBox.js

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

package/Alert/AlertSwatchBox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Alert/AlertSwatchBox.js","sources":["../../src/Alert/AlertSwatchBox.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { useAlertProps } from \"./AlertPropsProvider.js\";\n\nexport const AlertSwatchBox = () => {\n    const { swatchColor, swatchColorIcon } = useAlertProps();\n\n    if (!swatchColor || swatchColorIcon === false) {\n        return null;\n    }\n\n    return (\n        <div className={\"h-lg flex items-center\"}>\n            <div className={\"size-md rounded-xs\"} style={{ backgroundColor: swatchColor }} />\n        </div>\n    );\n};\n"],"names":["AlertSwatchBox","swatchColor","swatchColorIcon","useAlertProps"],"mappings":";;AAGO,MAAMA,iBAAiB;IAC1B,MAAM,EAAEC,WAAW,EAAEC,eAAe,EAAE,GAAGC;IAEzC,IAAI,CAACF,eAAeC,AAAoB,UAApBA,iBAChB,OAAO;IAGX,OAAO,WAAP,GACI,sCAAC;QAAI,WAAW;qBACZ,sCAAC;QAAI,WAAW;QAAsB,OAAO;YAAE,iBAAiBD;QAAY;;AAGxF"}