@startdownnotez404/ui 1.3.5 → 1.3.6

package/dist/alert.js

@@ -30,13 +30,24 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/components/compound/Alert/index.ts
 var Alert_exports = {};
 __export(Alert_exports, {
+  ALERT_STYLE_VARIANTs: () => ALERT_STYLE_VARIANTs,
   ALERT_VARIANTs: () => ALERT_VARIANTs,
   AlertProvider: () => AlertProvider,
+  AlertStyleVariantContext: () => AlertStyleVariantContext,
   CollapsableAlert: () => CollapsableAlert,
   DEFAULTs: () => DEFAULTs,
   ERRORs: () => ERRORs,
+  SoftAlertContent: () => SoftAlertContent,
   alertTheme: () => alertTheme,
+  collapsableAlertClassicRootSx: () => collapsableAlertClassicRootSx,
   collapsableAlertRootSx: () => collapsableAlertRootSx,
+  collapsableAlertSoftRootSx: () => collapsableAlertSoftRootSx,
+  collapsableClassicHeaderSx: () => collapsableClassicHeaderSx,
+  collapsableClassicIconButtonSx: () => collapsableClassicIconButtonSx,
+  collapsableClassicPanelSx: () => collapsableClassicPanelSx,
+  collapsableSoftHeaderSx: () => collapsableSoftHeaderSx,
+  collapsableSoftIconButtonSx: () => collapsableSoftIconButtonSx,
+  collapsableSoftPanelSx: () => collapsableSoftPanelSx,
   enqueueAlert: () => enqueueAlert,
   enqueueCollapsable: () => enqueueCollapsable,
   enqueueError: () => enqueueError,
@@ -45,22 +56,25 @@ __export(Alert_exports, {
   enqueueSuccess: () => enqueueSuccess,
   enqueueSystem: () => enqueueSystem,
   enqueueWarning: () => enqueueWarning,
-  useAlert: () => useAlert
+  softAlertAccentBarSx: () => softAlertAccentBarSx,
+  softAlertIconSx: () => softAlertIconSx,
+  softAlertItemRootSx: () => softAlertItemRootSx,
+  toast: () => toast,
+  useAlert: () => useAlert,
+  useAlertStyleVariantDefault: () => useAlertStyleVariantDefault,
+  useToast: () => useToast
 });
 module.exports = __toCommonJS(Alert_exports);
 
 // src/components/compound/Alert/src/AlertProvider.tsx
-var import_react4 = __toESM(require("react"));
-var import_notistack4 = require("notistack");
+var import_react6 = __toESM(require("react"));
+var import_notistack5 = require("notistack");
 
 // src/components/compound/Alert/src/MuiAlertVariant.tsx
-var import_react = require("react");
-var import_notistack2 = require("notistack");
+var import_react4 = require("react");
+var import_notistack3 = require("notistack");
 var import_Alert = __toESM(require("@mui/material/Alert"));
 
-// src/components/compound/Alert/src/_utils/utils.ts
-var import_notistack = require("notistack");
-
 // src/_utils/_func/random.ts
 function randomStrGenerator(length = 20) {
   let result = "";
@@ -71,6 +85,108 @@ function randomStrGenerator(length = 20) {
   return result;
 }
 
+// src/_utils/_func/sx.ts
+function flattenSx(part) {
+  if (part == null || typeof part === "boolean") {
+    return [];
+  }
+  if (Array.isArray(part)) {
+    return part.flatMap(flattenSx);
+  }
+  if (typeof part === "function" || typeof part === "object") {
+    return [part];
+  }
+  return [];
+}
+function mergeSx(...parts) {
+  const list = parts.flatMap(flattenSx);
+  if (list.length === 0) {
+    return void 0;
+  }
+  if (list.length === 1) {
+    return list[0];
+  }
+  return list;
+}
+
+// src/components/elemental/Box/src/index.ts
+var import_Box = __toESM(require("@mui/material/Box"));
+var import_Stack = __toESM(require("@mui/material/Stack"));
+var import_Grid = __toESM(require("@mui/material/Grid"));
+
+// src/components/elemental/Button/src/Button/Button.tsx
+var import_Button = __toESM(require("@mui/material/Button"));
+var import_jsx_runtime = require("react/jsx-runtime");
+function Button(p) {
+  const { children, slotProps, ...rest } = p;
+  const { sx, ...boxRest } = slotProps?.innerBox ?? {};
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Button.default, { ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_Box.default,
+    {
+      ...boxRest,
+      sx: mergeSx(
+        {
+          textOverflow: "ellipsis",
+          overflow: "hidden",
+          whiteSpace: "pre"
+        },
+        sx
+      ),
+      children
+    }
+  ) });
+}
+
+// src/components/elemental/Button/src/IconButton/IconButton.tsx
+var import_react = require("react");
+var import_IconButton = __toESM(require("@mui/material/IconButton"));
+
+// src/components/elemental/Tooltip/src/Tooltip/index.ts
+var import_Tooltip = __toESM(require("@mui/material/Tooltip"));
+
+// src/components/elemental/Button/src/IconButton/IconButton.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var IconButton = (0, import_react.forwardRef)(({
+  title = "",
+  children,
+  color,
+  size,
+  slotProps,
+  selected,
+  className,
+  ...props
+}, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    import_Tooltip.default,
+    {
+      title,
+      slotProps: {
+        popper: {
+          sx: {
+            textTransform: "capitalize"
+          }
+        },
+        ...slotProps?.tooltip
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_Box.default, { component: "span", sx: { width: "fit-content" }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        import_IconButton.default,
+        {
+          ref,
+          color,
+          size,
+          className: [className, selected ? "Mui-selected" : ""].filter(Boolean).join(" "),
+          ...props,
+          children
+        }
+      ) })
+    }
+  );
+});
+var IconButton_default = IconButton;
+
+// src/components/compound/Alert/src/_utils/utils.ts
+var import_notistack = require("notistack");
+
 // src/components/compound/Alert/src/_utils/const.ts
 var ALERT_VARIANTs = {
   info: "myInfo",
@@ -81,8 +197,14 @@ var ALERT_VARIANTs = {
   insight: "myInsight",
   collapsable: "myCollapsable"
 };
+var ALERT_STYLE_VARIANTs = {
+  soft: "soft",
+  classic: "classic"
+};
 var DEFAULTs = {
   AUTO_HIDE_DURATION: 3e3,
+  /** Quiet glass toast look is the default snackbar chrome. */
+  STYLE_VARIANT: "soft",
   ANCHOR_ORIGIN: { horizontal: "right", vertical: "top" },
   PROVIDER_CONFIGs: {
     maxSnack: 3,
@@ -106,6 +228,8 @@ function enqueueAlertWith(enqueue, {
   autoHideDuration = DEFAULTs.AUTO_HIDE_DURATION,
   anchorOrigin = DEFAULTs.ANCHOR_ORIGIN,
   icon,
+  styleVariant,
+  action,
   ...rest
 }) {
   try {
@@ -116,42 +240,44 @@ function enqueueAlertWith(enqueue, {
       key: id,
       id,
       icon,
+      styleVariant,
+      alertAction: action,
       ...rest
     });
     return { success: true, data: id };
-  } catch (error) {
-    console.error("Failed to enqueue alert:", error);
-    return { success: false, error: error instanceof Error ? error.message : "Unknown error" };
+  } catch (error2) {
+    console.error("Failed to enqueue alert:", error2);
+    return { success: false, error: error2 instanceof Error ? error2.message : "Unknown error" };
   }
 }
 function enqueueCollapsableWith(enqueue, {
   id = randomStrGenerator(10),
   autoHideDuration = DEFAULTs.AUTO_HIDE_DURATION,
   anchorOrigin = DEFAULTs.ANCHOR_ORIGIN,
+  styleVariant,
   componentProps = {},
-  componentWrapperProps = {
-    Renderer: () => null
-  },
+  componentWrapperProps = {},
   ...rest
 }) {
   try {
-    enqueue({
+    enqueue("", {
       variant: ALERT_VARIANTs.collapsable,
       anchorOrigin,
       autoHideDuration,
       componentProps,
       componentWrapperProps,
       id,
+      styleVariant,
       ...rest
     });
     return { success: true, data: id };
-  } catch (error) {
-    console.error("Failed to enqueue collapsable alert:", error);
-    return { success: false, error: error instanceof Error ? error.message : "Unknown error" };
+  } catch (error2) {
+    console.error("Failed to enqueue collapsable alert:", error2);
+    return { success: false, error: error2 instanceof Error ? error2.message : "Unknown error" };
   }
 }
 function useAlert() {
-  const { enqueueSnackbar: enqueue, closeSnackbar } = (0, import_notistack.useSnackbar)();
+  const { enqueueSnackbar: enqueue, closeSnackbar: closeSnackbar2 } = (0, import_notistack.useSnackbar)();
   const enqueueAlert2 = (options) => enqueueAlertWith(enqueue, options);
   const enqueueCollapsable2 = (options) => enqueueCollapsableWith(enqueue, options);
   const enqueueError2 = (message, options) => enqueueAlert2({ variant: ALERT_VARIANTs.error, message, ...options });
@@ -169,7 +295,7 @@ function useAlert() {
     enqueueInfo: enqueueInfo2,
     enqueueSystem: enqueueSystem2,
     enqueueInsight: enqueueInsight2,
-    closeSnackbar
+    closeSnackbar: closeSnackbar2
   };
 }
 function enqueueAlert({
@@ -179,6 +305,8 @@ function enqueueAlert({
   autoHideDuration = DEFAULTs.AUTO_HIDE_DURATION,
   anchorOrigin = DEFAULTs.ANCHOR_ORIGIN,
   icon,
+  styleVariant,
+  action,
   ...rest
 }) {
   return enqueueAlertWith(import_notistack.enqueueSnackbar, {
@@ -188,6 +316,8 @@ function enqueueAlert({
     autoHideDuration,
     anchorOrigin,
     icon,
+    styleVariant,
+    action,
     ...rest
   });
 }
@@ -195,16 +325,16 @@ function enqueueCollapsable({
   id = randomStrGenerator(10),
   autoHideDuration = DEFAULTs.AUTO_HIDE_DURATION,
   anchorOrigin = DEFAULTs.ANCHOR_ORIGIN,
+  styleVariant,
   componentProps = {},
-  componentWrapperProps = {
-    Renderer: () => null
-  },
+  componentWrapperProps = {},
   ...rest
 }) {
   return enqueueCollapsableWith(import_notistack.enqueueSnackbar, {
     id,
     autoHideDuration,
     anchorOrigin,
+    styleVariant,
     componentProps,
     componentWrapperProps,
     ...rest
@@ -253,143 +383,18 @@ function enqueueInsight(message, options) {
   });
 }
 
-// src/components/compound/Alert/src/MuiAlertVariant.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
-var variantToSeverity = {
-  [ALERT_VARIANTs.info]: "info",
-  [ALERT_VARIANTs.warning]: "warning",
-  [ALERT_VARIANTs.success]: "success",
-  [ALERT_VARIANTs.error]: "error",
-  [ALERT_VARIANTs.system]: "system",
-  [ALERT_VARIANTs.insight]: "insight",
-  [ALERT_VARIANTs.collapsable]: "info"
-  // Default to info for collapsable
-};
-var MuiAlertVariant = (0, import_react.forwardRef)(
-  (props, ref) => {
-    const { id, message, variant, icon, style } = props;
-    const { closeSnackbar } = (0, import_notistack2.useSnackbar)();
-    const handleDismiss = (0, import_react.useCallback)(() => {
-      closeSnackbar(id);
-    }, [id, closeSnackbar]);
-    const severity = variantToSeverity[variant] || "info";
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_Alert.default,
-      {
-        ref,
-        severity,
-        onClose: handleDismiss,
-        icon,
-        style,
-        children: message
-      }
-    );
-  }
+// src/components/compound/Alert/src/AlertStyleVariantContext.tsx
+var import_react2 = __toESM(require("react"));
+var AlertStyleVariantContext = import_react2.default.createContext(
+  DEFAULTs.STYLE_VARIANT
 );
-
-// src/components/compound/Alert/src/CollapsableAlert.tsx
-var import_react3 = require("react");
-var import_notistack3 = require("notistack");
-var import_CardActions2 = __toESM(require("@mui/material/CardActions"));
-
-// src/components/elemental/Card/src/Card/index.ts
-var import_Card2 = __toESM(require("@mui/material/Card"));
-
-// src/components/elemental/Card/src/Card/Card.tsx
-var import_Card = __toESM(require("@mui/material/Card"));
-var import_CardContent = __toESM(require("@mui/material/CardContent"));
-var import_jsx_runtime2 = require("react/jsx-runtime");
-function Card({
-  children,
-  slotProps,
-  ...rest
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_Card.default, { ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_CardContent.default, { ...slotProps?.cardContent, children }) });
-}
-
-// src/components/elemental/Card/src/Card/index.ts
-var import_CardContent2 = __toESM(require("@mui/material/CardContent"));
-var import_CardHeader = __toESM(require("@mui/material/CardHeader"));
-var import_CardActions = __toESM(require("@mui/material/CardActions"));
-
-// src/components/elemental/Collapse/src/Collapse/index.ts
-var import_Collapse = __toESM(require("@mui/material/Collapse"));
-
-// src/_utils/_func/sx.ts
-function flattenSx(part) {
-  if (part == null || typeof part === "boolean") {
-    return [];
-  }
-  if (Array.isArray(part)) {
-    return part.flatMap(flattenSx);
-  }
-  if (typeof part === "function" || typeof part === "object") {
-    return [part];
-  }
-  return [];
-}
-function mergeSx(...parts) {
-  const list = parts.flatMap(flattenSx);
-  if (list.length === 0) {
-    return void 0;
-  }
-  if (list.length === 1) {
-    return list[0];
-  }
-  return list;
+function useAlertStyleVariantDefault() {
+  return import_react2.default.useContext(AlertStyleVariantContext);
 }
 
-// src/components/elemental/Box/src/index.ts
-var import_Box = __toESM(require("@mui/material/Box"));
-var import_Stack = __toESM(require("@mui/material/Stack"));
-var import_Grid = __toESM(require("@mui/material/Grid"));
-
-// src/components/elemental/Button/src/IconButton/IconButton.tsx
-var import_react2 = require("react");
-var import_IconButton = __toESM(require("@mui/material/IconButton"));
-
-// src/components/elemental/Tooltip/src/Tooltip/index.ts
-var import_Tooltip = __toESM(require("@mui/material/Tooltip"));
-
-// src/components/elemental/Button/src/IconButton/IconButton.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var IconButton = (0, import_react2.forwardRef)(({
-  title = "",
-  children,
-  color,
-  size,
-  slotProps,
-  selected,
-  className,
-  ...props
-}, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-    import_Tooltip.default,
-    {
-      title,
-      slotProps: {
-        popper: {
-          sx: {
-            textTransform: "capitalize"
-          }
-        },
-        ...slotProps?.tooltip
-      },
-      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_Box.default, { component: "span", sx: { width: "fit-content" }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-        import_IconButton.default,
-        {
-          ref,
-          color,
-          size,
-          className: [className, selected ? "Mui-selected" : ""].filter(Boolean).join(" "),
-          ...props,
-          children
-        }
-      ) })
-    }
-  );
-});
-var IconButton_default = IconButton;
+// src/components/compound/Alert/src/SoftAlertContent.tsx
+var import_react3 = require("react");
+var import_notistack2 = require("notistack");
 
 // src/components/elemental/Typography/src/Typography.ts
 var import_Typography = __toESM(require("@mui/material/Typography"));
@@ -543,10 +548,162 @@ var import_ErrorOutlineOutlined = __toESM(require("@mui/icons-material/ErrorOutl
 var import_Download = __toESM(require("@mui/icons-material/Download"));
 
 // src/components/compound/Alert/src/theme.ts
-var collapsableAlertRootSx = {
-  "--collapse-bg": "var(--mui-palette-container-bg-1)",
+var collapsableAlertClassicRootSx = {
+  "--collapse-bg": "var(--mui-palette-background-paper)",
+  "--collapse-border": "var(--mui-palette-border-1)",
+  "--collapse-title-color": "var(--mui-palette-text-primary)",
+  "--collapse-shadow": "0 1px 2px rgba(15, 23, 42, 0.05), 0 2px 8px rgba(15, 23, 42, 0.04)",
+  pointerEvents: "auto",
+  display: "flex",
+  flexDirection: "column",
+  minWidth: 280,
+  maxWidth: "min(420px, calc(100vw - 24px))",
+  width: "100%",
+  borderRadius: "10px",
+  border: "1px solid var(--collapse-border)",
+  backgroundColor: "var(--collapse-bg)",
+  color: "var(--collapse-title-color)",
+  boxShadow: "var(--collapse-shadow)",
+  boxSizing: "border-box",
+  overflow: "hidden",
+  '[color-scheme="dark"] &': {
+    "--collapse-bg": "var(--mui-palette-container-bg-1, var(--mui-palette-background-paper))",
+    "--collapse-shadow": "0 1px 2px rgba(0, 0, 0, 0.22), 0 2px 8px rgba(0, 0, 0, 0.16)"
+  }
+};
+var collapsableAlertRootSx = collapsableAlertClassicRootSx;
+var collapsableAlertSoftRootSx = {
+  "--collapse-bg": "color-mix(in srgb, var(--mui-palette-background-paper) 88%, transparent)",
   "--collapse-border": "var(--mui-palette-border-1)",
-  "--collapse-title-color": "var(--mui-palette-text-primary)"
+  "--collapse-title-color": "var(--mui-palette-text-primary)",
+  "--collapse-shadow": "0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 12px rgba(15, 23, 42, 0.06)",
+  pointerEvents: "auto",
+  display: "flex",
+  flexDirection: "column",
+  minWidth: 280,
+  maxWidth: "min(420px, calc(100vw - 24px))",
+  width: "100%",
+  borderRadius: "12px",
+  border: "1px solid var(--collapse-border)",
+  backgroundColor: "var(--collapse-bg)",
+  color: "var(--collapse-title-color)",
+  boxShadow: "var(--collapse-shadow)",
+  backdropFilter: "blur(10px)",
+  WebkitBackdropFilter: "blur(10px)",
+  boxSizing: "border-box",
+  overflow: "hidden",
+  '[color-scheme="dark"] &': {
+    "--collapse-shadow": "0 1px 2px rgba(0, 0, 0, 0.18), 0 4px 12px rgba(0, 0, 0, 0.14)"
+  }
+};
+var collapsableSoftHeaderSx = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  gap: 1,
+  px: 1.5,
+  py: 1.25,
+  minHeight: 40
+};
+var collapsableClassicHeaderSx = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  gap: 1,
+  px: 1.5,
+  py: 1.125,
+  minHeight: 44
+};
+var collapsableSoftIconButtonSx = {
+  flexShrink: 0,
+  p: 0.25,
+  color: "var(--mui-palette-text-secondary)",
+  backgroundColor: "transparent",
+  borderRadius: "8px",
+  "&:hover": {
+    backgroundColor: "color-mix(in srgb, var(--mui-palette-text-primary) 6%, transparent)"
+  }
+};
+var collapsableClassicIconButtonSx = {
+  flexShrink: 0,
+  p: 0.375,
+  color: "var(--mui-palette-text-secondary)",
+  backgroundColor: "transparent",
+  borderRadius: "8px",
+  "&:hover": {
+    backgroundColor: "color-mix(in srgb, var(--mui-palette-text-primary) 8%, transparent)",
+    color: "var(--mui-palette-text-primary)"
+  }
+};
+var collapsableSoftPanelSx = {
+  px: 1.5,
+  pb: 1.5,
+  pt: 0.75,
+  borderTop: "1px solid var(--collapse-border)"
+};
+var collapsableClassicPanelSx = {
+  px: 1.5,
+  pb: 1.5,
+  pt: 1,
+  borderTop: "1px solid var(--collapse-border)",
+  backgroundColor: "color-mix(in srgb, var(--mui-palette-text-primary) 2.5%, var(--collapse-bg))"
+};
+var softAlertItemRootSx = {
+  "--soft-alert-bg": "color-mix(in srgb, var(--mui-palette-background-paper) 88%, transparent)",
+  "--soft-alert-border": "var(--mui-palette-border-1)",
+  "--soft-alert-fg": "var(--mui-palette-text-primary)",
+  "--soft-alert-accent": "var(--mui-palette-info-main)",
+  "--soft-alert-shadow": "0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 12px rgba(15, 23, 42, 0.06)",
+  pointerEvents: "auto",
+  display: "flex",
+  alignItems: "center",
+  gap: 1,
+  px: 1.5,
+  py: 1.25,
+  minWidth: 280,
+  maxWidth: "min(420px, calc(100vw - 24px))",
+  borderRadius: "12px",
+  border: "1px solid var(--soft-alert-border)",
+  backgroundColor: "var(--soft-alert-bg)",
+  color: "var(--soft-alert-fg)",
+  boxShadow: "var(--soft-alert-shadow)",
+  backdropFilter: "blur(10px)",
+  WebkitBackdropFilter: "blur(10px)",
+  boxSizing: "border-box",
+  '[color-scheme="dark"] &': {
+    "--soft-alert-shadow": "0 1px 2px rgba(0, 0, 0, 0.18), 0 4px 12px rgba(0, 0, 0, 0.14)"
+  },
+  "&[data-variant=success]": {
+    "--soft-alert-accent": "var(--mui-palette-success-main)"
+  },
+  "&[data-variant=error]": {
+    "--soft-alert-accent": "var(--mui-palette-error-main)"
+  },
+  "&[data-variant=warning]": {
+    "--soft-alert-accent": "var(--mui-palette-warning-main)"
+  },
+  "&[data-variant=info]": {
+    "--soft-alert-accent": "var(--mui-palette-info-main)"
+  },
+  "&[data-variant=system]": {
+    "--soft-alert-accent": "var(--mui-palette-system-main)"
+  },
+  "&[data-variant=insight]": {
+    "--soft-alert-accent": "var(--mui-palette-insight-main)"
+  }
+};
+var softAlertAccentBarSx = {
+  width: 3,
+  alignSelf: "stretch",
+  borderRadius: 2,
+  backgroundColor: "var(--soft-alert-accent)",
+  flexShrink: 0,
+  opacity: 0.85
+};
+var softAlertIconSx = {
+  color: "var(--soft-alert-accent)",
+  fontSize: "1.25rem",
+  flexShrink: 0
 };
 var alertTheme = {
   styleOverrides: {
@@ -635,113 +792,287 @@ var alertTheme = {
   }
 };
 
-// src/components/compound/Alert/src/CollapsableAlert.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var CollapsableAlert = (0, import_react3.forwardRef)(
-  ({ id, componentProps, componentWrapperProps, style }, ref) => {
-    const [expanded, setExpanded] = (0, import_react3.useState)(false);
-    const { closeSnackbar } = (0, import_notistack3.useSnackbar)();
-    const handleExpandClick = (0, import_react3.useCallback)(() => {
-      setExpanded((oldExpanded) => !oldExpanded);
-    }, []);
+// src/components/compound/Alert/src/SoftAlertContent.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var VARIANT_ICON = {
+  [ALERT_VARIANTs.success]: import_CheckCircle.default,
+  [ALERT_VARIANTs.error]: import_ErrorOutlineOutlined.default,
+  [ALERT_VARIANTs.warning]: import_WarningOutlined.default,
+  [ALERT_VARIANTs.info]: import_InfoOutlined.default,
+  [ALERT_VARIANTs.system]: import_Settings.default,
+  [ALERT_VARIANTs.insight]: import_AutoAwesomeRounded.default,
+  [ALERT_VARIANTs.collapsable]: import_InfoOutlined.default
+};
+var VARIANT_DATA = {
+  [ALERT_VARIANTs.success]: "success",
+  [ALERT_VARIANTs.error]: "error",
+  [ALERT_VARIANTs.warning]: "warning",
+  [ALERT_VARIANTs.info]: "info",
+  [ALERT_VARIANTs.system]: "system",
+  [ALERT_VARIANTs.insight]: "insight",
+  [ALERT_VARIANTs.collapsable]: "info"
+};
+var SoftAlertContent = (0, import_react3.forwardRef)(
+  function SoftAlertContent2(props, ref) {
+    const { id, message, variant, icon, style, alertAction: action } = props;
+    const { closeSnackbar: closeSnackbar2 } = (0, import_notistack2.useSnackbar)();
     const handleDismiss = (0, import_react3.useCallback)(() => {
-      closeSnackbar(id);
-    }, [id, closeSnackbar]);
-    const {
-      Renderer,
-      ...restCollapse
-    } = componentWrapperProps || {};
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
-      Card,
+      closeSnackbar2(id);
+    }, [id, closeSnackbar2]);
+    const handleAction = (0, import_react3.useCallback)(() => {
+      action?.onClick();
+      closeSnackbar2(id);
+    }, [action, closeSnackbar2, id]);
+    const Icon = VARIANT_ICON[variant] ?? import_InfoOutlined.default;
+    const dataVariant = VARIANT_DATA[variant] ?? "info";
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      import_Box.default,
       {
         ref,
+        role: "status",
+        "aria-live": "polite",
+        "data-variant": dataVariant,
+        "data-style-variant": "soft",
+        "data-testid": "soft-alert",
         style,
-        sx: mergeSx(collapsableAlertRootSx, {
-          "&.MuiPaper-root": {
-            background: "var(--collapse-bg)",
-            backdropFilter: "blur(9px)",
-            transition: "all 0.3s ease-in-out, color 0s",
-            color: "text.primary",
-            height: "fit-content",
-            border: `1px solid var(--collapse-border)`
-          }
-        }),
+        sx: softAlertItemRootSx,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
-            import_CardActions2.default,
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_Box.default, { sx: softAlertAccentBarSx, "aria-hidden": true }),
+          icon === null ? null : icon !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_Box.default, { sx: { display: "flex", flexShrink: 0, color: "var(--soft-alert-accent)" }, children: icon }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon, { sx: softAlertIconSx, "aria-hidden": true }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_Box.default, { sx: { flex: 1, minWidth: 0 }, children: typeof message === "string" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_Typography.default, { variant: "body2", sx: { m: 0, lineHeight: 1.4 }, children: message }) : message }),
+          action ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            Button,
             {
+              size: "small",
+              variant: "text",
+              onClick: handleAction,
               sx: {
-                justifyContent: "space-between",
-                padding: "4px 8px"
+                flexShrink: 0,
+                alignSelf: "center",
+                minWidth: "auto",
+                color: "var(--soft-alert-accent)",
+                textTransform: "none",
+                fontWeight: 600,
+                lineHeight: 1.25
               },
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-                  import_Typography.default,
-                  {
-                    variant: "body2",
-                    sx: {
-                      color: "var(--collapse-title-color)",
-                      paddingLeft: "8px",
-                      fontWeight: 600
-                    },
-                    children: componentProps?.title || "Alert Title"
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_Box.default, { sx: {
-                  display: "flex",
-                  alignItems: "center",
-                  gap: 0.5
-                }, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-                    IconButton_default,
-                    {
-                      "aria-label": "Show more",
-                      size: "small",
-                      onClick: handleExpandClick,
-                      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-                        import_ExpandMore.default,
-                        {
-                          style: {
-                            transform: expanded ? "rotate(180deg)" : "rotate(0deg)",
-                            transition: "transform 0.3s ease-in-out"
-                          },
-                          sx: { fontSize: "1rem" }
-                        }
-                      )
-                    }
-                  ),
-                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-                    IconButton_default,
-                    {
-                      size: "small",
-                      "aria-label": "close",
-                      onClick: handleDismiss,
-                      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_Close.default, { sx: { fontSize: "1rem" } })
-                    }
-                  )
-                ] })
-              ]
+              children: action.label
             }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_Collapse.default, { in: expanded, timeout: "auto", unmountOnExit: true, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
-            import_Box.default,
+          ) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            IconButton_default,
             {
-              ...restCollapse,
-              sx: mergeSx(restCollapse.sx, { px: 2, pb: 2 }),
-              children: [
-                Renderer && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Renderer, { ...componentProps }),
-                !Renderer && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_Box.default, { sx: { p: 2 }, children: componentProps?.children || "Collapsible content" })
-              ]
+              size: "small",
+              "aria-label": "Close",
+              onClick: handleDismiss,
+              sx: {
+                flexShrink: 0,
+                alignSelf: "center",
+                p: 0.25,
+                color: "var(--mui-palette-text-secondary)"
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_Close.default, { sx: { fontSize: "1rem" } })
             }
-          ) })
+          )
         ]
       }
     );
   }
 );
 
-// src/components/compound/Alert/src/AlertProvider.tsx
+// src/components/compound/Alert/src/MuiAlertVariant.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var variantToSeverity = {
+  [ALERT_VARIANTs.info]: "info",
+  [ALERT_VARIANTs.warning]: "warning",
+  [ALERT_VARIANTs.success]: "success",
+  [ALERT_VARIANTs.error]: "error",
+  [ALERT_VARIANTs.system]: "system",
+  [ALERT_VARIANTs.insight]: "insight",
+  [ALERT_VARIANTs.collapsable]: "info"
+  // Default to info for collapsable
+};
+var MuiAlertVariant = (0, import_react4.forwardRef)(
+  (props, ref) => {
+    const {
+      id,
+      message,
+      variant,
+      icon,
+      style,
+      styleVariant: styleVariantProp,
+      alertAction,
+      action: actionProp
+    } = props;
+    const action = alertAction ?? actionProp;
+    const providerDefault = useAlertStyleVariantDefault();
+    const styleVariant = styleVariantProp ?? providerDefault ?? DEFAULTs.STYLE_VARIANT;
+    const { closeSnackbar: closeSnackbar2 } = (0, import_notistack3.useSnackbar)();
+    const handleDismiss = (0, import_react4.useCallback)(() => {
+      closeSnackbar2(id);
+    }, [id, closeSnackbar2]);
+    const handleAction = (0, import_react4.useCallback)(() => {
+      action?.onClick();
+      closeSnackbar2(id);
+    }, [action, closeSnackbar2, id]);
+    if (styleVariant === "soft") {
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        SoftAlertContent,
+        {
+          ref,
+          ...props,
+          alertAction: action
+        }
+      );
+    }
+    const severity = variantToSeverity[variant] || "info";
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      import_Alert.default,
+      {
+        ref,
+        severity,
+        onClose: handleDismiss,
+        icon,
+        style,
+        "data-style-variant": "classic",
+        "data-testid": "classic-alert",
+        action: action ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_Box.default, { sx: { display: "flex", alignItems: "center", gap: 0.5 }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          Button,
+          {
+            size: "small",
+            variant: "text",
+            onClick: handleAction,
+            sx: {
+              minWidth: "auto",
+              color: "var(--alert-icon-color, inherit)",
+              textTransform: "none",
+              fontWeight: 600
+            },
+            children: action.label
+          }
+        ) }) : void 0,
+        children: message
+      }
+    );
+  }
+);
+
+// src/components/compound/Alert/src/CollapsableAlert.tsx
+var import_react5 = require("react");
+var import_notistack4 = require("notistack");
+
+// src/components/elemental/Collapse/src/Collapse/index.ts
+var import_Collapse = __toESM(require("@mui/material/Collapse"));
+
+// src/components/compound/Alert/src/CollapsableAlert.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
+var CollapsableAlert = (0, import_react5.forwardRef)(function CollapsableAlert2({ id, componentProps, componentWrapperProps, style, styleVariant: styleVariantProp }, ref) {
+  const [expanded, setExpanded] = (0, import_react5.useState)(false);
+  const { closeSnackbar: closeSnackbar2 } = (0, import_notistack4.useSnackbar)();
+  const providerDefault = useAlertStyleVariantDefault();
+  const styleVariant = styleVariantProp ?? providerDefault ?? DEFAULTs.STYLE_VARIANT;
+  const isSoft = styleVariant === "soft";
+  const handleExpandClick = (0, import_react5.useCallback)(() => {
+    setExpanded((oldExpanded) => !oldExpanded);
+  }, []);
+  const handleDismiss = (0, import_react5.useCallback)(() => {
+    closeSnackbar2(id);
+  }, [id, closeSnackbar2]);
+  const { Renderer, ...restCollapse } = componentWrapperProps || {};
+  const titleNode = componentProps?.title || "Alert Title";
+  const iconButtonSx = isSoft ? collapsableSoftIconButtonSx : collapsableClassicIconButtonSx;
+  const iconButtons = /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    import_Box.default,
+    {
+      sx: {
+        display: "flex",
+        alignItems: "center",
+        gap: 0.25,
+        flexShrink: 0
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          IconButton_default,
+          {
+            "aria-label": "Show more",
+            size: "small",
+            onClick: handleExpandClick,
+            sx: iconButtonSx,
+            children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              import_ExpandMore.default,
+              {
+                style: {
+                  transform: expanded ? "rotate(180deg)" : "rotate(0deg)",
+                  transition: "transform 0.3s ease-in-out"
+                },
+                sx: { fontSize: "1rem" }
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          IconButton_default,
+          {
+            size: "small",
+            "aria-label": "Close",
+            onClick: handleDismiss,
+            sx: iconButtonSx,
+            children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_Close.default, { sx: { fontSize: "1rem" } })
+          }
+        )
+      ]
+    }
+  );
+  const body = /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_Collapse.default, { in: expanded, timeout: "auto", unmountOnExit: true, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    import_Box.default,
+    {
+      ...restCollapse,
+      sx: mergeSx(
+        isSoft ? collapsableSoftPanelSx : collapsableClassicPanelSx,
+        restCollapse.sx
+      ),
+      children: [
+        Renderer ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Renderer, { ...componentProps }) : null,
+        !Renderer && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_Box.default, { sx: { py: 0.25 }, children: componentProps?.children || "Collapsible content" })
+      ]
+    }
+  ) });
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    import_Box.default,
+    {
+      ref,
+      style,
+      role: "status",
+      "aria-live": "polite",
+      "data-style-variant": isSoft ? "soft" : "classic",
+      "data-testid": isSoft ? "collapsable-alert-soft" : "collapsable-alert-classic",
+      sx: isSoft ? collapsableAlertSoftRootSx : collapsableAlertClassicRootSx,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_Box.default, { sx: isSoft ? collapsableSoftHeaderSx : collapsableClassicHeaderSx, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            import_Typography.default,
+            {
+              variant: "body2",
+              sx: {
+                color: "var(--collapse-title-color)",
+                fontWeight: 600,
+                lineHeight: 1.4,
+                m: 0,
+                minWidth: 0,
+                flex: 1
+              },
+              children: titleNode
+            }
+          ),
+          iconButtons
+        ] }),
+        body
+      ]
+    }
+  );
+});
+
+// src/components/compound/Alert/src/AlertProvider.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var ALERT_COMPONENTS = {
   [ALERT_VARIANTs.info]: MuiAlertVariant,
   [ALERT_VARIANTs.warning]: MuiAlertVariant,
@@ -751,26 +1082,133 @@ var ALERT_COMPONENTS = {
   [ALERT_VARIANTs.insight]: MuiAlertVariant,
   [ALERT_VARIANTs.collapsable]: CollapsableAlert
 };
-var AlertProvider = import_react4.default.memo(function AlertProvider2({ children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-    import_notistack4.SnackbarProvider,
+var AlertProvider = import_react6.default.memo(function AlertProvider2({
+  children,
+  defaultStyleVariant = DEFAULTs.STYLE_VARIANT
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(AlertStyleVariantContext.Provider, { value: defaultStyleVariant, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    import_notistack5.SnackbarProvider,
     {
       maxSnack: DEFAULTs.PROVIDER_CONFIGs.maxSnack,
       anchorOrigin: DEFAULTs.ANCHOR_ORIGIN,
       Components: ALERT_COMPONENTS,
       children
     }
-  );
+  ) });
+});
+
+// src/components/compound/Alert/src/toast.ts
+var import_notistack6 = require("notistack");
+var TOAST_TO_ALERT = {
+  success: ALERT_VARIANTs.success,
+  error: ALERT_VARIANTs.error,
+  info: ALERT_VARIANTs.info,
+  warning: ALERT_VARIANTs.warning
+};
+var DEFAULT_DURATION = 4e3;
+function toAlertOptions(message, options = {}) {
+  const variant = options.variant ?? "info";
+  const duration = options.duration === void 0 ? DEFAULT_DURATION : options.duration;
+  return {
+    message,
+    variant: TOAST_TO_ALERT[variant],
+    id: options.id,
+    autoHideDuration: duration,
+    styleVariant: "soft",
+    action: options.action,
+    // Historical toast.* corner was bottom-right.
+    anchorOrigin: { horizontal: "right", vertical: "bottom" }
+  };
+}
+function show(message, options) {
+  const result = enqueueAlert(toAlertOptions(message, options));
+  return result.success ? result.data : options?.id ?? "";
+}
+function success(message, options) {
+  return show(message, { ...options, variant: "success" });
+}
+function error(message, options) {
+  return show(message, { ...options, variant: "error" });
+}
+function info(message, options) {
+  return show(message, { ...options, variant: "info" });
+}
+function warning(message, options) {
+  return show(message, { ...options, variant: "warning" });
+}
+function dismiss(id) {
+  (0, import_notistack6.closeSnackbar)(id);
+}
+function dismissAll() {
+  (0, import_notistack6.closeSnackbar)();
+}
+var toast = Object.assign(show, {
+  success,
+  error,
+  info,
+  warning,
+  dismiss,
+  dismissAll,
+  show
 });
+
+// src/components/compound/Alert/src/useToast.ts
+var import_react7 = require("react");
+var import_notistack7 = require("notistack");
+function useToast() {
+  const { closeSnackbar: closeSnackbar2 } = (0, import_notistack7.useSnackbar)();
+  const show2 = (0, import_react7.useCallback)(
+    (message, options) => toast.show(message, options),
+    []
+  );
+  const success2 = (0, import_react7.useCallback)(
+    (message, options) => toast.success(message, options),
+    []
+  );
+  const error2 = (0, import_react7.useCallback)(
+    (message, options) => toast.error(message, options),
+    []
+  );
+  const info2 = (0, import_react7.useCallback)(
+    (message, options) => toast.info(message, options),
+    []
+  );
+  const warning2 = (0, import_react7.useCallback)(
+    (message, options) => toast.warning(message, options),
+    []
+  );
+  const dismiss2 = (0, import_react7.useCallback)((id) => closeSnackbar2(id), [closeSnackbar2]);
+  const dismissAll2 = (0, import_react7.useCallback)(() => closeSnackbar2(), [closeSnackbar2]);
+  return {
+    show: show2,
+    success: success2,
+    error: error2,
+    info: info2,
+    warning: warning2,
+    dismiss: dismiss2,
+    dismissAll: dismissAll2
+  };
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  ALERT_STYLE_VARIANTs,
   ALERT_VARIANTs,
   AlertProvider,
+  AlertStyleVariantContext,
   CollapsableAlert,
   DEFAULTs,
   ERRORs,
+  SoftAlertContent,
   alertTheme,
+  collapsableAlertClassicRootSx,
   collapsableAlertRootSx,
+  collapsableAlertSoftRootSx,
+  collapsableClassicHeaderSx,
+  collapsableClassicIconButtonSx,
+  collapsableClassicPanelSx,
+  collapsableSoftHeaderSx,
+  collapsableSoftIconButtonSx,
+  collapsableSoftPanelSx,
   enqueueAlert,
   enqueueCollapsable,
   enqueueError,
@@ -779,6 +1217,12 @@ var AlertProvider = import_react4.default.memo(function AlertProvider2({ childre
   enqueueSuccess,
   enqueueSystem,
   enqueueWarning,
-  useAlert
+  softAlertAccentBarSx,
+  softAlertIconSx,
+  softAlertItemRootSx,
+  toast,
+  useAlert,
+  useAlertStyleVariantDefault,
+  useToast
 });
 //# sourceMappingURL=alert.js.map