@ssa-ui-kit/core 3.8.0 → 3.9.0

package/dist/index.js

@@ -7954,6 +7954,8 @@ __webpack_require__.d(__webpack_exports__, {
   AccordionGroupContextProvider: () => (/* reexport */ AccordionGroupContextProvider),
   AccordionTitle: () => (/* reexport */ AccordionTitle),
   AddNewAccountCard: () => (/* reexport */ AddNewAccountCard),
+  Alert: () => (/* reexport */ Alert_Alert),
+  AlertVariants: () => (/* reexport */ AlertVariants),
   Avatar: () => (/* reexport */ Avatar_Avatar),
   Badge: () => (/* reexport */ Badge_Badge),
   BarGaugeChart: () => (/* reexport */ BarGaugeChart),
@@ -8037,8 +8039,12 @@ __webpack_require__.d(__webpack_exports__, {
   NestedTableRow: () => (/* reexport */ NestedTableRow),
   NestedTableRowContext: () => (/* reexport */ NestedTableRowContext),
   NestedTableRowProvider: () => (/* reexport */ NestedTableRowProvider),
+  Notification: () => (/* reexport */ NotificationComponents_Notification_Notification),
   NotificationCard: () => (/* reexport */ NotificationCard),
   NotificationMenu: () => (/* reexport */ NotificationMenu),
+  NotificationPositions: () => (/* reexport */ NotificationPositions),
+  NotificationSizes: () => (/* reexport */ NotificationSizes),
+  NotificationVariants: () => (/* reexport */ NotificationVariants),
   NumberField: () => (/* reexport */ NumberField),
   PRESENT_VALUE: () => (/* reexport */ PRESENT_VALUE),
   Pagination: () => (/* reexport */ Pagination_Pagination),
@@ -8120,6 +8126,8 @@ __webpack_require__.d(__webpack_exports__, {
   Tag: () => (/* reexport */ Tag_Tag),
   TextField: () => (/* reexport */ TextField_TextField),
   Textarea: () => (/* reexport */ Textarea_Textarea),
+  Toast: () => (/* reexport */ Toast_Toast),
+  ToastVariants: () => (/* reexport */ ToastVariants),
   Tooltip: () => (/* reexport */ Tooltip_Tooltip),
   TooltipContent: () => (/* reexport */ TooltipContent_TooltipContent),
   TooltipContentBase: () => (/* reexport */ TooltipContentBase),
@@ -8160,6 +8168,9 @@ __webpack_require__.d(__webpack_exports__, {
   mainTheme: () => (/* reexport */ themes_main),
   pieChartPalettes: () => (/* reexport */ colorPalettes_namespaceObject),
   setHocDisplayName: () => (/* reexport */ setHocDisplayName),
+  showAlert: () => (/* reexport */ showAlert),
+  showNotification: () => (/* reexport */ showNotification),
+  showToast: () => (/* reexport */ showToast),
   styleUtils: () => (/* reexport */ safari_focus_outline_namespaceObject),
   styles: () => (/* reexport */ Tooltip_styles_namespaceObject),
   useAccordionGroupContext: () => (/* reexport */ useAccordionGroupContext),
@@ -9244,6 +9255,14 @@ __webpack_require__.d(MoveFolder_namespaceObject, {
   MoveFolder: () => (MoveFolder)
 });
 
+// NAMESPACE OBJECT: ./src/components/Icon/icons/AttentionCircle.tsx
+var AttentionCircle_namespaceObject = {};
+__webpack_require__.r(AttentionCircle_namespaceObject);
+__webpack_require__.d(AttentionCircle_namespaceObject, {
+  AttentionCircle: () => (AttentionCircle),
+  ICON_NAME: () => (AttentionCircle_ICON_NAME)
+});
+
 // NAMESPACE OBJECT: ./src/components/Icon/icons/all.ts
 var all_namespaceObject = {};
 __webpack_require__.r(all_namespaceObject);
@@ -9254,6 +9273,7 @@ __webpack_require__.d(all_namespaceObject, {
   ArrowUp: () => (ArrowUp_namespaceObject),
   Assessment: () => (Assessment_namespaceObject),
   Attention: () => (Attention_namespaceObject),
+  AttentionCircle: () => (AttentionCircle_namespaceObject),
   Award: () => (Award_namespaceObject),
   BanUser: () => (BanUser_namespaceObject),
   Bench: () => (Bench_namespaceObject),
@@ -9534,12 +9554,16 @@ const main = {
     // #eb7556
     red6: 'rgba(235, 117, 86, 0.06)',
     // #eb7556
+    red6RGB: 'rgb(254, 245, 246)',
+    // #FEF5F6
     redDark: 'rgba(229, 53, 14, 1)',
     // #e5350e
     red40: 'rgba(235, 117, 86, 0.4)',
     // #eb7556
     greenLighter: 'rgba(137, 217, 150, 1)',
     // #89d996
+    greenLighterRGB: 'rgb(246, 252, 247)',
+    // #F6FCF7
     greenLighter6: 'rgba(137, 217, 150, 0.06)',
     // #89d996
     greenLighter20: 'rgba(137, 217, 150, 0.2)',
@@ -9586,6 +9610,8 @@ const main = {
     // #edba5d
     yellowLighter20: 'rgba(237, 186, 93, 0.2)',
     // #edba5d
+    yellowLighter20RGB: 'rgb(254, 247, 242)',
+    // #FEF7F2
     yellowLighter40: 'rgba(237, 186, 93, 0.4)',
     // #edba5d
     yellowWarm: 'rgba(237, 223, 93, 1)',
@@ -9624,6 +9650,8 @@ const main = {
     // #4178e1
     blue6: 'rgba(65, 120, 225, 0.06)',
     // #4178e1
+    blue6RGB: 'rgb(244, 247, 252)',
+    // #F4F7FC
     blue20: 'rgba(65, 120, 225, 0.2)',
     // #4178e1
     blueCool: 'rgba(108, 148, 247, 1)',
@@ -14042,6 +14070,36 @@ const MoveFolder = ({
   })]
 });
 const MoveFolder_ICON_NAME = 'moveFolder';
+;// ./src/components/Icon/icons/AttentionCircle.tsx
+
+const AttentionCircle = ({
+  fill = '#000',
+  size = 24,
+  tooltip = 'Attention',
+  ...props
+}) => (0,jsx_runtime_namespaceObject.jsxs)("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: `${size}px`,
+  height: `${size}px`,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  ...props,
+  children: [(0,jsx_runtime_namespaceObject.jsx)("title", {
+    children: tooltip
+  }), (0,jsx_runtime_namespaceObject.jsx)("path", {
+    d: "M12 22C17.5 22 22 17.5 22 12C22 6.5 17.5 2 12 2C6.5 2 2 6.5 2 12C2 17.5 6.5 22 12 22Z",
+    stroke: fill,
+    strokeWidth: "1.4",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), (0,jsx_runtime_namespaceObject.jsx)("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M11.3052 7.75024V12.7502C11.3052 13.1368 11.6188 13.4504 12.0054 13.4504C12.392 13.4504 12.7056 13.1368 12.7056 12.7502V7.75024C12.7056 7.36364 12.392 7.05005 12.0054 7.05005C11.6188 7.05005 11.3052 7.36364 11.3052 7.75024ZM13.0088 15.7502C13.0088 15.198 12.5611 14.7502 12.0088 14.7502H12C11.4477 14.7502 11 15.198 11 15.7502C11 16.3025 11.4477 16.7502 12 16.7502H12.0088C12.5611 16.7502 13.0088 16.3025 13.0088 15.7502Z",
+    fill: fill
+  })]
+});
+const AttentionCircle_ICON_NAME = 'attention-circle';
 ;// ./src/components/Icon/icons/all.ts
 
 
@@ -14294,6 +14352,8 @@ const MoveFolder_ICON_NAME = 'moveFolder';
 
 
 
+
+
 
 
 
@@ -51474,6 +51534,1711 @@ const NotificationMenu = ({
 ;// ./src/components/NotificationMenu/index.ts
 
 
+;// ./src/components/NotificationComponents/types.ts
+let NotificationPositions = /*#__PURE__*/function (NotificationPositions) {
+  NotificationPositions["centerTop"] = "center-top";
+  NotificationPositions["centerBottom"] = "center-bottom";
+  NotificationPositions["leftTop"] = "left-top";
+  NotificationPositions["leftBottom"] = "left-bottom";
+  NotificationPositions["rightTop"] = "right-top";
+  NotificationPositions["rightBottom"] = "right-bottom";
+  return NotificationPositions;
+}({});
+let NotificationSizes = /*#__PURE__*/function (NotificationSizes) {
+  NotificationSizes["small"] = "small";
+  NotificationSizes["large"] = "large";
+  return NotificationSizes;
+}({});
+;// ./src/utils/createObserver.ts
+/**
+ * Creates a lightweight pub/sub observer.
+ *
+ * Subscribers are stored in a Map keyed by a caller-provided string identifier,
+ * so a single mount point can subscribe once and cleanly unsubscribe by key
+ * without affecting other subscribers.
+ *
+ * @example
+ * ```ts
+ * const myObserver = createObserver<{ message: string }>();
+ *
+ * myObserver.subscribe('my-component', (data) => console.log(data.message));
+ * myObserver.dispatch({ message: 'Hello' });
+ * myObserver.unsubscribe('my-component');
+ * ```
+ */
+function createObserver() {
+  const subscribers = new Map();
+  const subscribe = (key, fn) => {
+    subscribers.set(key, fn);
+  };
+  const unsubscribe = key => {
+    subscribers.delete(key);
+  };
+  const dispatch = data => {
+    subscribers.forEach(fn => fn(data));
+  };
+  return {
+    subscribe,
+    unsubscribe,
+    dispatch
+  };
+}
+;// ./src/components/NotificationComponents/Alert/alertObserver.ts
+/**
+ * Module-level singleton that connects imperative `showAlert()` calls to
+ * whichever `<Alert>` components are currently mounted in the document.
+ *
+ * Architecture overview:
+ * ```
+ * showAlert(params)
+ *   └─► alertObserver.dispatch(params)
+ *         └─► Alert.tsx subscription callback (added in useEffect, removed on unmount)
+ *               └─► setAlerts(prev => [...]) — React state update → re-render → portal
+ * ```
+ *
+ * Multiple `<Alert>` instances are supported (each subscribes under a unique
+ * `useId()` key), so all mounted instances receive every dispatched event.
+ * In a typical app you mount exactly one `<Alert>` near the root.
+ */
+
+const alertObserver = createObserver();
+
+/**
+ * Imperatively triggers a new alert inside the mounted `<Alert>` component.
+ *
+ * The `<Alert>` component must be mounted somewhere in the tree (typically near
+ * the app root) to receive dispatched alerts.
+ *
+ * @example
+ * ```ts
+ * showAlert({ variant: AlertVariants.success, title: 'Saved!', description: 'Your changes have been saved.' });
+ * ```
+ */
+const showAlert = params => {
+  alertObserver.dispatch(params);
+};
+;// ./src/utils/colorUtils.ts
+/**
+ * Color utilities shared by notification components (`Alert`, `Toast`, …).
+ *
+ * Used by any component that accepts a `color` prop and needs to auto-derive
+ * readable text/icon colors, darkened border/accent shades, or luminance checks.
+ *
+ * Theme colors are `rgba(r, g, b, a)` strings. Arbitrary CSS colors passed by
+ * consumers may be hex (`#rrggbb`) or any valid CSS color. Functions here handle
+ * both formats and fall back gracefully (returning the original string) for
+ * formats they cannot parse.
+ */
+
+/** Extracts [r, g, b] (0-255) from an rgba/rgb or #rrggbb string. */
+function parseRgb(color) {
+  const rgbMatch = color.match(/rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/);
+  if (rgbMatch) {
+    return [parseInt(rgbMatch[1], 10), parseInt(rgbMatch[2], 10), parseInt(rgbMatch[3], 10)];
+  }
+  const hexMatch = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(color);
+  if (hexMatch) {
+    return [parseInt(hexMatch[1], 16), parseInt(hexMatch[2], 16), parseInt(hexMatch[3], 16)];
+  }
+  return null;
+}
+
+/**
+ * Computes relative luminance (WCAG 2.x formula).
+ * Returns a value in [0, 1] — 0 = black, 1 = white.
+ */
+function getRelativeLuminance(rgb) {
+  const [r, g, b] = rgb.map(c => {
+    const s = c / 255;
+    return s <= 0.03928 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4);
+  });
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+}
+
+/**
+ * Returns `true` when the color is perceptually dark enough to need light
+ * text/icons on top of it.
+ *
+ * Uses the WCAG luminance threshold (L < 0.179 ≈ midpoint between black and
+ * "mid-grey" at contrast ratio ~3:1 against white).
+ */
+function isColorDark(color) {
+  const rgb = parseRgb(color);
+  if (!rgb) return false;
+  return getRelativeLuminance(rgb) < 0.179;
+}
+
+// ─── HSL conversion helpers ───────────────────────────────────────────────────
+
+/** Converts linearized sRGB [0-255] to [h, s, l] each in [0, 1]. */
+function rgbToHsl(r, g, b) {
+  const rn = r / 255;
+  const gn = g / 255;
+  const bn = b / 255;
+  const max = Math.max(rn, gn, bn);
+  const min = Math.min(rn, gn, bn);
+  let h = 0;
+  let s = 0;
+  const l = (max + min) / 2;
+  if (max !== min) {
+    const d = max - min;
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    if (max === rn) h = ((gn - bn) / d + (gn < bn ? 6 : 0)) / 6;else if (max === gn) h = ((bn - rn) / d + 2) / 6;else h = ((rn - gn) / d + 4) / 6;
+  }
+  return [h, s, l];
+}
+function colorUtils_hue2rgb(p, q, t) {
+  const tt = (t % 1 + 1) % 1; // normalize to [0, 1]
+  if (tt < 1 / 6) return p + (q - p) * 6 * tt;
+  if (tt < 1 / 2) return q;
+  if (tt < 2 / 3) return p + (q - p) * (2 / 3 - tt) * 6;
+  return p;
+}
+
+/** Converts [h, s, l] (each in [0, 1]) to [r, g, b] (each in [0-255]). */
+function colorUtils_hslToRgb(h, s, l) {
+  if (s === 0) {
+    const v = Math.round(l * 255);
+    return [v, v, v];
+  }
+  const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+  const p = 2 * l - q;
+  return [Math.round(colorUtils_hue2rgb(p, q, h + 1 / 3) * 255), Math.round(colorUtils_hue2rgb(p, q, h) * 255), Math.round(colorUtils_hue2rgb(p, q, h - 1 / 3) * 255)];
+}
+
+/**
+ * Returns a darkened version of the color by **reducing HSL lightness** by
+ * `amount` (default 0.35 → 35 percentage points darker).
+ *
+ * Converting through HSL preserves the hue and saturation so light pastel
+ * colors (e.g. `greenLighter`) darken to a recognizable mid-shade of the same
+ * hue rather than washing out to grey (which a naïve per-channel multiply does).
+ *
+ * Falls back to the original string when the color format is not parsable
+ * (e.g. CSS named colors, `hsl()`, `color-mix()`).
+ */
+function darkenColor(color, amount = 0.35) {
+  const rgb = parseRgb(color);
+  if (!rgb) return color;
+  const [h, s, l] = rgbToHsl(...rgb);
+  const [r, g, b] = colorUtils_hslToRgb(h, s, Math.max(0, l - amount));
+  return `rgb(${r}, ${g}, ${b})`;
+}
+
+/**
+ * Returns either `'rgba(255, 255, 255, 1)'` (white) or `'rgba(43, 45, 49, 1)'`
+ * (greyDarker) depending on whether the background color is perceived as dark
+ * or light.
+ *
+ * Intended for computing readable text/icon colors on a custom background.
+ *
+ * @param bgColor - The background color to contrast against.
+ * @param darkText - The dark text color to use on light backgrounds.
+ *                   Defaults to `rgba(43, 45, 49, 1)` (theme `greyDarker`).
+ * @param lightText - The light text color to use on dark backgrounds.
+ *                    Defaults to `rgba(255, 255, 255, 1)` (white).
+ */
+function getContrastColor(bgColor, darkText = 'rgba(43, 45, 49, 1)', lightText = 'rgba(255, 255, 255, 1)') {
+  return isColorDark(bgColor) ? lightText : darkText;
+}
+;// ./src/components/NotificationComponents/Alert/types.ts
+let AlertVariants = /*#__PURE__*/function (AlertVariants) {
+  AlertVariants["success"] = "success";
+  AlertVariants["warning"] = "warning";
+  AlertVariants["error"] = "error";
+  AlertVariants["primary"] = "primary";
+  AlertVariants["neutral"] = "neutral";
+  AlertVariants["secondary"] = "secondary";
+  return AlertVariants;
+}({});
+
+/**
+ * Per-slot style overrides for `<Alert>`.
+ *
+ * Because the alert cards are rendered inside a portal, a top-level `css` prop
+ * cannot reach the inner elements. Use this object instead to customize any
+ * part of the card without touching the global theme.
+ *
+ * CSS slots accept any `CSSObject` and are merged **after** the default styles,
+ * so they always win. The two `*Color` fields exist because `<Icon>` receives
+ * its fill via a prop rather than CSS inheritance.
+ *
+ * @example
+ * ```tsx
+ * <Alert
+ *   styles={{
+ *     root: { background: '#1a1a2e', borderRadius: 4 },
+ *     title: { color: '#ffffff', fontSize: 15 },
+ *     description: { color: 'rgba(255,255,255,0.65)' },
+ *     actionButton: { color: '#a78bfa' },
+ *     iconColor: '#a78bfa',
+ *     closeIconColor: 'rgba(255,255,255,0.5)',
+ *   }}
+ * />
+ * ```
+ */
+;// ./src/components/NotificationComponents/Alert/styles.ts
+
+
+
+// ─── Re-export shared structural styles ──────────────────────────────────────
+// Consuming components (`AlertItem`, `Alert`) import `* as styles from './styles'`
+// so all shared exports need to be reachable from this file.
+
+
+
+// ─── Variant color tokens ────────────────────────────────────────────────────
+
+const getVariantTokens = (theme, variant) => {
+  const map = {
+    [AlertVariants.success]: {
+      iconColor: theme.palette.success.main,
+      accentColor: theme.palette.success.main,
+      tintBg: `color-mix(in srgb, ${theme.palette.success.light} 8%, white)`
+    },
+    [AlertVariants.warning]: {
+      iconColor: theme.palette.warning.main,
+      accentColor: theme.palette.warning.main,
+      tintBg: `color-mix(in srgb, ${theme.palette.warning.main} 8%, white)`
+    },
+    [AlertVariants.error]: {
+      iconColor: theme.palette.error.main,
+      accentColor: theme.palette.error.main,
+      tintBg: `color-mix(in srgb, ${theme.palette.error.light} 8%, white)`
+    },
+    [AlertVariants.primary]: {
+      iconColor: theme.palette.primary.main,
+      accentColor: theme.palette.primary.main,
+      tintBg: `color-mix(in srgb, ${theme.palette.primary.light} 8%, white)`
+    },
+    [AlertVariants.neutral]: {
+      iconColor: theme.colors.greyDarker60,
+      accentColor: theme.colors.grey,
+      tintBg: theme.colors.white
+    },
+    [AlertVariants.secondary]: {
+      iconColor: theme.colors.greyDarker60,
+      accentColor: theme.colors.grey,
+      tintBg: theme.palette.secondary.light
+    }
+  };
+  return map[variant];
+};
+const variantIcons = {
+  [AlertVariants.success]: 'check-circle',
+  [AlertVariants.warning]: 'attention-circle',
+  [AlertVariants.error]: 'attention-circle',
+  [AlertVariants.primary]: 'information',
+  [AlertVariants.neutral]: 'check-circle',
+  [AlertVariants.secondary]: 'check-circle'
+};
+
+// ─── Item wrapper ─────────────────────────────────────────────────────────────
+
+const itemWrapperStyles = (background, hasDescription) => /*#__PURE__*/(0,react_namespaceObject.css)("position:relative;border-radius:8px;padding:12px 16px;display:flex;gap:10px;box-sizing:border-box;background:", background, ";align-items:", hasDescription ? 'flex-start' : 'center', ";" + ( true ? "" : 0),  true ? "" : 0);
+
+// ─── Text & action styles ─────────────────────────────────────────────────────
+// Accept an optional `textColor` so the `color` prop can override theme defaults
+// without a separate styleOverrides entry.
+
+const titleTextStyles = (theme, textColor) => /*#__PURE__*/(0,react_namespaceObject.css)("font-size:14px;font-weight:600;line-height:20px;color:", textColor ?? theme.colors.greyDarker, ";word-break:break-word;" + ( true ? "" : 0),  true ? "" : 0);
+const descriptionStyles = (theme, textColor) => /*#__PURE__*/(0,react_namespaceObject.css)("font-size:13px;font-weight:400;line-height:18px;color:", textColor ?? theme.colors.greyDarker80, ";margin:0;word-break:break-word;" + ( true ? "" : 0),  true ? "" : 0);
+const actionBtnStyles = (theme, textColor) => /*#__PURE__*/(0,react_namespaceObject.css)("background:none;border:none;padding:0;cursor:pointer;font-size:13px;height:max-content;font-weight:500;line-height:18px;letter-spacing:0.2px;color:", textColor ?? theme.colors.greyDarker80, ";&:hover{color:", textColor ?? theme.colors.greyDarker, ";}" + ( true ? "" : 0),  true ? "" : 0);
+;// ./src/components/NotificationComponents/styles.ts
+function NotificationComponents_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+/**
+ * Shared structural styles for notification components (Alert, Toast, …).
+ *
+ * Everything here is purely layout / animation with no semantic color
+ * meaning — safe to import from any notification component.
+ *
+ * Component-specific styles (variant tokens, item wrapper, text colors)
+ * live in each component's own `styles.ts`.
+ */
+
+
+
+
+// ─── Slide-in keyframes ──────────────────────────────────────────────────────
+
+const slideFromTop = (0,react_namespaceObject.keyframes)`
+  from { transform: translateY(-12px); opacity: 0; }
+  to   { transform: translateY(0);     opacity: 1; }
+`;
+const slideFromBottom = (0,react_namespaceObject.keyframes)`
+  from { transform: translateY(12px); opacity: 0; }
+  to   { transform: translateY(0);    opacity: 1; }
+`;
+const slideFromLeft = (0,react_namespaceObject.keyframes)`
+  from { transform: translateX(-12px); opacity: 0; }
+  to   { transform: translateX(0);     opacity: 1; }
+`;
+const slideFromRight = (0,react_namespaceObject.keyframes)`
+  from { transform: translateX(12px); opacity: 0; }
+  to   { transform: translateX(0);    opacity: 1; }
+`;
+const animationByPosition = {
+  [NotificationPositions.centerTop]: slideFromTop,
+  [NotificationPositions.centerBottom]: slideFromBottom,
+  [NotificationPositions.leftTop]: slideFromLeft,
+  [NotificationPositions.leftBottom]: slideFromLeft,
+  [NotificationPositions.rightTop]: slideFromRight,
+  [NotificationPositions.rightBottom]: slideFromRight
+};
+
+// ─── Portal container ────────────────────────────────────────────────────────
+
+const positionMap = {
+  [NotificationPositions.centerTop]:  true ? {
+    name: "b5myqp",
+    styles: "top:16px;left:50%;transform:translateX(-50%);align-items:center"
+  } : 0,
+  [NotificationPositions.centerBottom]:  true ? {
+    name: "1s9nvkc",
+    styles: "bottom:16px;left:50%;transform:translateX(-50%);align-items:center"
+  } : 0,
+  [NotificationPositions.leftTop]:  true ? {
+    name: "ll6dpi",
+    styles: "top:16px;left:16px;align-items:flex-start"
+  } : 0,
+  [NotificationPositions.leftBottom]:  true ? {
+    name: "uv3867",
+    styles: "bottom:16px;left:16px;align-items:flex-start"
+  } : 0,
+  [NotificationPositions.rightTop]:  true ? {
+    name: "1c0e6dl",
+    styles: "top:16px;right:16px;align-items:flex-end"
+  } : 0,
+  [NotificationPositions.rightBottom]:  true ? {
+    name: "e07orh",
+    styles: "bottom:16px;right:16px;align-items:flex-end"
+  } : 0
+};
+const containerStyles = position => /*#__PURE__*/(0,react_namespaceObject.css)("position:fixed;z-index:9999;display:flex;flex-direction:column;gap:8px;", positionMap[position], ";" + ( true ? "" : 0),  true ? "" : 0);
+
+// ─── Card size ───────────────────────────────────────────────────────────────
+
+const itemSizeStyles = {
+  [NotificationSizes.small]:  true ? {
+    name: "1hdwerr",
+    styles: "width:400px;max-width:calc(100vw - 32px)"
+  } : 0,
+  [NotificationSizes.large]:  true ? {
+    name: "1t8amrd",
+    styles: "width:760px;max-width:calc(100vw - 32px)"
+  } : 0
+};
+
+// ─── Slide-in animation ───────────────────────────────────────────────────────
+
+const itemAnimationStyles = (position, duration) => /*#__PURE__*/(0,react_namespaceObject.css)("animation:", animationByPosition[position], " ", duration, "ms ease-out forwards;" + ( true ? "" : 0),  true ? "" : 0);
+
+// ─── Shadow & border ─────────────────────────────────────────────────────────
+
+const shadowStyles = theme => /*#__PURE__*/(0,react_namespaceObject.css)("box-shadow:0 4px 16px ", theme.colors.greyShadow, ";" + ( true ? "" : 0),  true ? "" : 0);
+const borderStyles = borderColor => /*#__PURE__*/(0,react_namespaceObject.css)("border:1px solid ", borderColor, ";" + ( true ? "" : 0),  true ? "" : 0);
+
+// ─── Icon column ─────────────────────────────────────────────────────────────
+
+const iconColStyles =  true ? {
+  name: "1wz4nr",
+  styles: "display:flex;flex-shrink:0;padding-top:2px"
+} : 0;
+
+// ─── Expanded layout (has description) ───────────────────────────────────────
+
+const contentColStyles =  true ? {
+  name: "1u7mutw",
+  styles: "display:flex;flex-direction:column;gap:6px;flex:1;min-width:0;align-self:flex-start"
+} : 0;
+const expandedHeaderRowStyles =  true ? {
+  name: "1yydxi7",
+  styles: "display:flex;align-items:center;gap:8px"
+} : 0;
+
+// ─── Collapsed layout (no description) ───────────────────────────────────────
+
+const collapsedTitleStyles =  true ? {
+  name: "fxp7t8",
+  styles: "flex:1;min-width:0"
+} : 0;
+
+// ─── Actions row & close button ───────────────────────────────────────────────
+
+const actionsRowStyles =  true ? {
+  name: "1yydxi7",
+  styles: "display:flex;align-items:center;gap:8px"
+} : 0;
+const closeBtnStyles =  true ? {
+  name: "13odyj7",
+  styles: "background:none;border:none;padding:2px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-left:auto;line-height:0;opacity:0.7;&:hover{opacity:1;}"
+} : 0;
+;// ./src/components/NotificationComponents/Alert/AlertItem.tsx
+
+
+
+
+
+
+/**
+ * @internal
+ *
+ * Renders a single alert card inside the `<Alert>` portal container.
+ * This component is **not part of the public API** — consumers should call
+ * `showAlert(params)` to trigger alerts and configure appearance via the
+ * `<Alert>` component's props (`withShadow`, `withBorder`, `styles`, etc.).
+ *
+ * Direct use of `AlertItem` is only intended for static previews in Storybook
+ * stories or tests where portal/observer overhead is unwanted.
+ *
+ * Layout modes:
+ * - **Expanded** — when `description` is provided: title + description + action row + close button in header
+ * - **Collapsed** — no description: title + action row + close button all on one line
+ *
+ * Action buttons are **opt-in**: a button only renders when its label text
+ * AND its callback are both present (`cancelText + onClose`, `submitText + onSubmit`).
+ */
+
+const AlertItem = ({
+  id,
+  variant,
+  color,
+  title,
+  description,
+  cancelText,
+  submitText,
+  size,
+  withShadow,
+  withBorder,
+  inheritMainColor,
+  animationDuration,
+  position,
+  onClose,
+  onSubmit,
+  onRemove,
+  styleOverrides
+}) => {
+  const theme = (0,react_namespaceObject.useTheme)();
+  const tokens = getVariantTokens(theme, variant);
+
+  // ─── Color resolution ───────────────────────────────────────────────────────
+
+  // Resolve theme key → actual CSS color; fall back to raw CSS string
+  const resolvedColor = color ? theme.colors[color] ?? color : undefined;
+  const bg = resolvedColor ?? tokens.tintBg;
+
+  // When `color` is passed, auto-derive all derived colors; otherwise use variant tokens
+  const dark = resolvedColor ? isColorDark(resolvedColor) : false;
+  const textColor = resolvedColor ? getContrastColor(resolvedColor, theme.colors.greyDarker, theme.colors.white) : undefined;
+  const iconColor = resolvedColor ? dark ? theme.colors.white : darkenColor(resolvedColor) : tokens.iconColor;
+  const borderColor = resolvedColor ? darkenColor(resolvedColor) : tokens.accentColor;
+  const closeIconColor = resolvedColor ? dark ? theme.colors.white : theme.colors.greyDarker60 : inheritMainColor ? tokens.accentColor : theme.colors.greyDarker60;
+
+  // styleOverrides can still pin specific colors on top of everything above
+  const resolvedIconColor = styleOverrides?.iconColor ?? iconColor;
+  const resolvedCloseIconColor = styleOverrides?.closeIconColor ?? closeIconColor;
+
+  // ─── Handlers ───────────────────────────────────────────────────────────────
+
+  const handleClose = () => {
+    onRemove(id);
+    onClose?.();
+  };
+  const handleSubmit = () => {
+    onRemove(id);
+    onSubmit?.();
+  };
+  const hasDescription = !!description;
+
+  // ─── Render ─────────────────────────────────────────────────────────────────
+
+  return (0,jsx_runtime_namespaceObject.jsxs)("div", {
+    css: [itemWrapperStyles(bg, hasDescription), itemSizeStyles[size], itemAnimationStyles(position, animationDuration), withShadow && shadowStyles(theme), withBorder && borderStyles(borderColor), styleOverrides?.root,  true ? "" : 0,  true ? "" : 0],
+    children: [(0,jsx_runtime_namespaceObject.jsx)("div", {
+      css: [iconColStyles, styleOverrides?.icon,  true ? "" : 0,  true ? "" : 0],
+      children: (0,jsx_runtime_namespaceObject.jsx)(Icon_Icon, {
+        name: variantIcons[variant],
+        color: resolvedIconColor,
+        size: 24
+      })
+    }), hasDescription ? (0,jsx_runtime_namespaceObject.jsxs)("div", {
+      css: contentColStyles,
+      children: [(0,jsx_runtime_namespaceObject.jsxs)("div", {
+        css: expandedHeaderRowStyles,
+        children: [title && (0,jsx_runtime_namespaceObject.jsx)("span", {
+          css: [titleTextStyles(theme, textColor), styleOverrides?.title,  true ? "" : 0,  true ? "" : 0],
+          children: title
+        }), (0,jsx_runtime_namespaceObject.jsx)(Icon_Icon, {
+          name: "cross",
+          size: 18,
+          color: resolvedCloseIconColor,
+          css: [closeBtnStyles, styleOverrides?.closeButton,  true ? "" : 0,  true ? "" : 0],
+          onClick: handleClose,
+          "aria-label": "Close alert"
+        })]
+      }), (0,jsx_runtime_namespaceObject.jsx)("p", {
+        css: [descriptionStyles(theme, textColor), styleOverrides?.description,  true ? "" : 0,  true ? "" : 0],
+        children: description
+      }), (0,jsx_runtime_namespaceObject.jsxs)("div", {
+        css: [actionsRowStyles, styleOverrides?.actions,  true ? "" : 0,  true ? "" : 0],
+        children: [cancelText && onClose && (0,jsx_runtime_namespaceObject.jsx)(Button_Button, {
+          variant: "tertiary",
+          css: [actionBtnStyles(theme, textColor), styleOverrides?.actionButton,  true ? "" : 0,  true ? "" : 0],
+          onClick: handleClose,
+          children: cancelText
+        }), submitText && onSubmit && (0,jsx_runtime_namespaceObject.jsx)(Button_Button, {
+          variant: "tertiary",
+          css: [actionBtnStyles(theme, textColor), styleOverrides?.actionButton,  true ? "" : 0,  true ? "" : 0],
+          onClick: handleSubmit,
+          children: submitText
+        })]
+      })]
+    }) : (0,jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
+      children: [title && (0,jsx_runtime_namespaceObject.jsx)("span", {
+        css: [titleTextStyles(theme, textColor), collapsedTitleStyles, styleOverrides?.title,  true ? "" : 0,  true ? "" : 0],
+        children: title
+      }), (0,jsx_runtime_namespaceObject.jsxs)("div", {
+        css: [actionsRowStyles, styleOverrides?.actions,  true ? "" : 0,  true ? "" : 0],
+        children: [cancelText && onClose && (0,jsx_runtime_namespaceObject.jsx)(Button_Button, {
+          variant: "tertiary",
+          css: [actionBtnStyles(theme, textColor), styleOverrides?.actionButton,  true ? "" : 0,  true ? "" : 0],
+          onClick: handleClose,
+          children: cancelText
+        }), submitText && onSubmit && (0,jsx_runtime_namespaceObject.jsx)(Button_Button, {
+          variant: "tertiary",
+          css: [actionBtnStyles(theme, textColor), styleOverrides?.actionButton,  true ? "" : 0,  true ? "" : 0],
+          onClick: handleSubmit,
+          children: submitText
+        })]
+      }), (0,jsx_runtime_namespaceObject.jsx)(Icon_Icon, {
+        name: "cross",
+        size: 18,
+        color: resolvedCloseIconColor,
+        css: [closeBtnStyles, styleOverrides?.closeButton,  true ? "" : 0,  true ? "" : 0],
+        onClick: handleClose,
+        "aria-label": "Close alert"
+      })]
+    })]
+  });
+};
+;// ./src/components/NotificationComponents/Alert/Alert.tsx
+
+
+
+
+
+
+
+let alertIdCounter = 0;
+const generateAlertId = () => `alert-${Date.now()}-${++alertIdCounter}`;
+
+/**
+ * Alert — portal-based notification container driven by the Observer pattern.
+ *
+ * ## Usage pattern (two steps)
+ *
+ * **Step 1 — mount once** near the app root (layout, shell, etc.).
+ * The component renders nothing until `showAlert` is called.
+ *
+ * ```tsx
+ * // app-root.tsx
+ * import { Alert, NotificationPositions } from '@ssa-ui-kit/core';
+ *
+ * <Alert position={NotificationPositions.rightTop} withShadow maxAmount={5} />
+ * ```
+ *
+ * **Step 2 — trigger from anywhere** via `showAlert`.
+ * No refs, no prop drilling, no context required.
+ *
+ * ```tsx
+ * import { showAlert, AlertVariants } from '@ssa-ui-kit/core';
+ *
+ * showAlert({ variant: AlertVariants.success, title: 'Saved!' });
+ *
+ * showAlert({
+ *   variant: AlertVariants.error,
+ *   title: 'Upload failed',
+ *   description: 'File exceeds 10 MB.',
+ *   cancelText: 'Dismiss',
+ *   onClose: () => {},           // required for the cancel button to appear
+ *   submitText: 'Retry',
+ *   onSubmit: () => retryFn(),   // required for the submit button to appear
+ * });
+ * ```
+ *
+ * ## Key props
+ * - `position`        — one of `NotificationPositions` (default: `rightTop`)
+ * - `maxAmount`       — cap on simultaneous alerts; oldest is dropped when exceeded
+ * - `withShadow`      — drop shadow (default: `true`)
+ * - `withBorder`      — 1 px accent-color border (default: `false`)
+ * - `inheritMainColor`— close icon matches the variant accent color
+ * - `containerSelector` — CSS selector for a custom portal target; falls back to `document.body`
+ * - `styles`          — `AlertStyleOverrides` object for per-slot CSS customization without touching the theme
+ *
+ * ## Stacking order
+ * - `*-top` positions  → newest alert prepended (appears at the top of the stack)
+ * - `*-bottom` positions → newest alert appended (appears at the bottom of the stack)
+ *
+ * When `maxAmount` is set and the stack is full, the oldest alert is dropped:
+ * - `*-top`:    drops from the **end** of the array (bottom of the stack)
+ * - `*-bottom`: drops from the **start** of the array (top of the stack)
+ *
+ * @category Components
+ * @subcategory Notification
+ */
+const Alert = ({
+  position = NotificationPositions.rightTop,
+  size = NotificationSizes.small,
+  withShadow = true,
+  withBorder = false,
+  inheritMainColor = false,
+  cancelText = 'Cancel',
+  submitText = 'Submit',
+  containerSelector,
+  animationDuration = 300,
+  maxAmount,
+  styles
+}) => {
+  const [alerts, setAlerts] = (0,external_react_namespaceObject.useState)([]);
+
+  // Each Alert instance gets a unique subscription key via useId().
+  // This allows multiple <Alert> components in the same document (e.g. Storybook
+  // Docs view renders several stories simultaneously) to coexist without one
+  // overwriting the other's observer subscription.
+  const instanceId = (0,external_react_namespaceObject.useId)();
+
+  // useEffectEvent gives us a stable function reference that always reads the
+  // latest prop values — no manual refs needed. The effect subscribes once and
+  // never re-runs, while the handler always sees fresh position, maxAmount, etc.
+  const handleDispatch = (0,external_react_namespaceObject.useEffectEvent)(params => {
+    const newAlert = {
+      ...params,
+      id: generateAlertId()
+    };
+    setAlerts(prev => {
+      const isTop = position.includes('top');
+      // top-*:    prepend so newest is at index 0 (top of the visual stack)
+      // bottom-*: append  so newest is at the end   (bottom of the visual stack)
+      const next = isTop ? [newAlert, ...prev] : [...prev, newAlert];
+      if (maxAmount && next.length > maxAmount) {
+        // top-*:    oldest is at the end   → keep the first  `maxAmount` entries
+        // bottom-*: oldest is at the start → keep the last   `maxAmount` entries
+        return isTop ? next.slice(0, maxAmount) : next.slice(-maxAmount);
+      }
+      return next;
+    });
+  });
+  (0,external_react_namespaceObject.useEffect)(() => {
+    alertObserver.subscribe(instanceId, handleDispatch);
+    return () => alertObserver.unsubscribe(instanceId);
+  }, []);
+  const removeAlert = id => {
+    setAlerts(prev => prev.filter(a => a.id !== id));
+  };
+  if (alerts.length === 0 || typeof document === 'undefined') {
+    return null;
+  }
+  const container = containerSelector && document.querySelector(containerSelector) || document.body;
+  return /*#__PURE__*/(0,external_react_dom_namespaceObject.createPortal)((0,jsx_runtime_namespaceObject.jsx)("div", {
+    css: containerStyles(position),
+    children: alerts.map(alert => (0,jsx_runtime_namespaceObject.jsx)(AlertItem, {
+      size: alert.size ?? size,
+      cancelText: alert.cancelText ?? cancelText,
+      submitText: alert.submitText ?? submitText,
+      withShadow: withShadow,
+      withBorder: withBorder,
+      inheritMainColor: inheritMainColor,
+      animationDuration: animationDuration,
+      position: position,
+      styleOverrides: styles,
+      id: alert.id,
+      variant: alert.variant,
+      color: alert.color,
+      title: alert.title,
+      description: alert.description,
+      onClose: alert.onClose,
+      onSubmit: alert.onSubmit,
+      onRemove: removeAlert
+    }, alert.id))
+  }), container);
+};
+/* harmony default export */ const Alert_Alert = (Alert);
+;// ./src/components/NotificationComponents/Toast/toastObserver.ts
+/**
+ * Module-level singleton connecting `showToast()` calls to mounted `<Toast>`
+ * components.
+ *
+ * Architecture:
+ * ```
+ * showToast(params)
+ *   └─► toastObserver.dispatch(params)
+ *         └─► Toast.tsx subscription callback (added in useEffect, removed on unmount)
+ *               └─► setToasts(prev => [...]) → React state update → portal
+ * ```
+ *
+ * Multiple `<Toast>` instances are supported (each subscribes under a unique
+ * `useId()` key). In a typical app you mount exactly one `<Toast>` near the root.
+ */
+
+const toastObserver = createObserver();
+
+/**
+ * Imperatively triggers a new toast inside every mounted `<Toast>` component.
+ *
+ * The `<Toast>` component must be mounted somewhere in the tree (typically near
+ * the app root) for dispatched toasts to be displayed.
+ *
+ * @example
+ * ```ts
+ * import { showToast, ToastVariants } from '@ssa-ui-kit/core';
+ *
+ * // Simple
+ * showToast({ variant: ToastVariants.default, title: 'File saved' });
+ *
+ * // With custom color + progress
+ * showToast({ variant: ToastVariants.default, title: 'Uploading…', color: 'blue', withProgress: true });
+ *
+ * // Fully custom content (outer card + progress bar still render)
+ * showToast({
+ *   variant: ToastVariants.default,
+ *   renderProp: (close) => <MyCard onDismiss={close} />,
+ * });
+ * ```
+ */
+const showToast = params => {
+  toastObserver.dispatch(params);
+};
+;// ./src/components/NotificationComponents/hooks/useAutoDismiss.ts
+
+
+/**
+ * Manages an auto-dismiss timer with hover-pause support.
+ *
+ * When `timeout` is `undefined` no timer is set and the item stays visible
+ * until the consumer removes it manually.
+ *
+ * When the user hovers over the card the timer pauses and resumes from where
+ * it left off when they move away — `remainingRef` tracks the elapsed time so
+ * the full `timeout` is never restarted from scratch after a hover.
+ *
+ * @param timeout   Auto-dismiss duration in ms. `undefined` = no auto-dismiss.
+ * @param onDismiss Called once when the timer fires naturally (not on manual close).
+ *
+ * @returns
+ *   - `isPaused`        — whether the timer is currently paused (hover active).
+ *                         `ToastItem` uses this to pause the CSS progress bar animation.
+ *   - `handleMouseEnter` — attach to the card's `onMouseEnter`.
+ *   - `handleMouseLeave` — attach to the card's `onMouseLeave`.
+ *
+ * @example
+ * ```tsx
+ * const { isPaused, handleMouseEnter, handleMouseLeave } = useAutoDismiss(
+ *   timeout,
+ *   () => { onRemove(id); onClose?.(); },
+ * );
+ * ```
+ */
+const useAutoDismiss = (timeout, onDismiss) => {
+  const [isPaused, setIsPaused] = (0,external_react_namespaceObject.useState)(false);
+  // Tracks remaining ms so hover-resume restarts from where it was, not from the full timeout
+  const remainingRef = (0,external_react_namespaceObject.useRef)(timeout);
+  const startTimeRef = (0,external_react_namespaceObject.useRef)(0);
+  (0,external_react_namespaceObject.useEffect)(() => {
+    if (!timeout || isPaused) return;
+    startTimeRef.current = Date.now();
+    const timer = setTimeout(onDismiss, remainingRef.current);
+    return () => clearTimeout(timer);
+  }, [isPaused]);
+  const handleMouseEnter = () => {
+    if (!timeout) return;
+    const elapsed = Date.now() - startTimeRef.current;
+    remainingRef.current = Math.max(0, (remainingRef.current ?? timeout) - elapsed);
+    setIsPaused(true);
+  };
+  const handleMouseLeave = () => setIsPaused(false);
+  return {
+    isPaused,
+    handleMouseEnter,
+    handleMouseLeave
+  };
+};
+;// ./src/components/NotificationComponents/Toast/types.ts
+let ToastVariants = /*#__PURE__*/function (ToastVariants) {
+  ToastVariants["secondary"] = "secondary";
+  ToastVariants["neutral"] = "neutral";
+  ToastVariants["dark"] = "dark";
+  return ToastVariants;
+}({});
+
+/**
+ * Component-level props for the `<Toast>` portal container.
+ *
+ * Mount once near the app root; call `showToast(...)` from anywhere.
+ */
+
+/**
+ * Parameters for an individual toast triggered via `showToast(params)`.
+ *
+ * Only `variant` is required. Everything else is optional.
+ *
+ * @example
+ * ```ts
+ * // Minimal
+ * showToast({ variant: ToastVariants.default, title: 'Saved!' });
+ *
+ * // With color, custom timeout, and progress bar
+ * showToast({
+ *   variant: ToastVariants.default,
+ *   title: 'Uploading…',
+ *   color: 'purple',
+ *   timeout: 8000,
+ *   withProgress: true,
+ * });
+ *
+ * // Fully custom content
+ * showToast({
+ *   variant: ToastVariants.default,
+ *   renderProp: (close) => <MyCustomCard onDismiss={close} />,
+ * });
+ * ```
+ */
+;// ./src/components/NotificationComponents/Toast/styles.ts
+function Toast_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+
+
+// ─── Re-export shared structural styles ──────────────────────────────────────
+
+
+
+// ─── Variant color tokens ────────────────────────────────────────────────────
+
+const styles_getVariantTokens = (theme, variant) => {
+  const map = {
+    [ToastVariants.secondary]: {
+      bg: theme.palette.secondary.light,
+      iconColor: theme.colors.greyDarker60,
+      borderColor: theme.colors.greyFocused,
+      textColor: theme.colors.greyDarker
+    },
+    [ToastVariants.neutral]: {
+      bg: theme.colors.white,
+      iconColor: theme.colors.greyDarker60,
+      borderColor: theme.colors.greyOutline,
+      textColor: theme.colors.greyDarker
+    },
+    [ToastVariants.dark]: {
+      bg: theme.colors.greyBackground,
+      iconColor: theme.colors.white,
+      borderColor: theme.colors.greyBackground,
+      textColor: theme.colors.white
+    }
+  };
+  return map[variant];
+};
+
+// ─── Toast item wrapper ───────────────────────────────────────────────────────
+// Unlike Alert (which layers a rgba tint over white via backgroundImage),
+// Toast backgrounds are always fully opaque — variant tokens and custom `color`
+// values are solid colors. The wrapper uses `overflow: hidden` so the progress
+// bar is clipped to the card's border-radius.
+
+const styles_itemWrapperStyles = (background, hasDescription) => /*#__PURE__*/(0,react_namespaceObject.css)("position:relative;border-radius:8px;padding:12px 16px;display:flex;gap:10px;box-sizing:border-box;background:", background, ";align-items:", hasDescription ? 'flex-start' : 'center', ";overflow:hidden;" + ( true ? "" : 0),  true ? "" : 0);
+
+// ─── Text styles (accept explicit color to support `color` prop contrast) ────
+
+const styles_titleTextStyles = textColor => /*#__PURE__*/(0,react_namespaceObject.css)("font-size:14px;font-weight:600;line-height:20px;color:", textColor, ";word-break:break-word;" + ( true ? "" : 0),  true ? "" : 0);
+const styles_descriptionStyles = textColor => /*#__PURE__*/(0,react_namespaceObject.css)("font-size:13px;font-weight:400;line-height:18px;color:", textColor, ";opacity:0.8;margin:0;word-break:break-word;" + ( true ? "" : 0),  true ? "" : 0);
+const styles_actionBtnStyles = textColor => /*#__PURE__*/(0,react_namespaceObject.css)("background:none;border:none;padding:0;cursor:pointer;font-size:13px;font-weight:500;line-height:18px;height:max-content;letter-spacing:0.2px;color:", textColor, ";opacity:0.75;&:hover{opacity:1;}" + ( true ? "" : 0),  true ? "" : 0);
+
+// ─── Progress bar ─────────────────────────────────────────────────────────────
+// The bar is absolutely positioned at the bottom of the card (overflow: hidden
+// on the wrapper clips it to the card's border-radius).
+//
+// `animation-play-state` is controlled via inline `style` prop (not a class)
+// so the animation resumes from its paused position when hover ends — changing
+// an Emotion-generated class would restart the animation from 0%.
+
+const drainProgress = (0,react_namespaceObject.keyframes)`
+  from { width: 100%; }
+  to   { width: 0%;   }
+`;
+const progressBarContainerStyles =  true ? {
+  name: "1cq5vou",
+  styles: "position:absolute;bottom:0;left:0;right:0;height:3px;background:transparent"
+} : 0;
+
+/**
+ * Returns the base progress-bar styles including the drain animation.
+ * Pass `animation-play-state` separately via an inline `style` prop so the
+ * animation can be paused/resumed without resetting.
+ */
+const progressBarStyles = (theme, timeout, color) => /*#__PURE__*/(0,react_namespaceObject.css)("height:100%;width:100%;background:", theme.colors[color] ?? color, ";animation:", drainProgress, " ", timeout, "ms linear forwards;border-radius:0 0 8px 8px;" + ( true ? "" : 0),  true ? "" : 0);
+;// ./src/components/NotificationComponents/Toast/ToastItem.tsx
+/**
+ * @internal
+ *
+ * Renders a single toast card inside the `<Toast>` portal container.
+ * Not part of the public API — consumers call `showToast(params)` to trigger
+ * toasts and configure appearance via `<Toast>` component props.
+ *
+ * Compared to `AlertItem`, `ToastItem` adds:
+ * - **Auto-dismiss timer** with hover-pause support
+ * - **Progress bar** (`withProgress`) that drains over the toast lifetime
+ * - **`color` prop** driving background, text, icon, and border colors
+ * - **`renderProp`** for fully custom inner content
+ */
+
+
+
+
+
+
+
+
+
+// Default timeout used by the component (4 s) — defined in Toast.tsx as prop
+// default, but ToastItem also needs to know it has a timer active.
+
+const ToastItem = ({
+  id,
+  variant,
+  color,
+  title,
+  description,
+  cancelText,
+  submitText,
+  size,
+  withShadow,
+  withBorder,
+  animationDuration,
+  position,
+  timeout,
+  withProgress = false,
+  progressColor,
+  onClose,
+  onSubmit,
+  onRemove,
+  renderProp
+}) => {
+  const theme = (0,react_namespaceObject.useTheme)();
+  const tokens = styles_getVariantTokens(theme, variant);
+
+  // ─── Color resolution ───────────────────────────────────────────────────────
+
+  // Resolve theme key → actual color value; fall back to raw CSS string
+  const resolvedColor = color ? theme.colors[color] ?? color : undefined;
+  const bg = resolvedColor ?? tokens.bg;
+  const dark = resolvedColor ? isColorDark(resolvedColor) : variant === ToastVariants.dark;
+  const textColor = resolvedColor ? getContrastColor(resolvedColor, theme.colors.greyDarker, theme.colors.white) : tokens.textColor;
+
+  // On light bg: darken the color for icon/border; on dark bg: use contrast (white)
+  const accentColor = resolvedColor ? dark ? theme.colors.white : darkenColor(resolvedColor) : tokens.iconColor;
+  const borderColor = resolvedColor ? darkenColor(resolvedColor) : tokens.borderColor;
+
+  // Precedence: explicit progressColor prop → auto darkened `color` → blueNotification
+  const resolvedProgressColor = progressColor ?? (resolvedColor ? darkenColor(resolvedColor) : theme.colors.blueNotification);
+  const resolvedCloseIconColor = dark ? theme.colors.white : theme.colors.greyDarker60;
+
+  // ─── Auto-dismiss with hover-pause ──────────────────────────────────────────
+
+  const {
+    isPaused,
+    handleMouseEnter,
+    handleMouseLeave
+  } = useAutoDismiss(timeout, () => {
+    onRemove(id);
+    onClose?.();
+  });
+
+  // ─── Dismiss helpers ────────────────────────────────────────────────────────
+
+  const handleClose = () => {
+    onRemove(id);
+    onClose?.();
+  };
+  const handleSubmit = () => {
+    onRemove(id);
+    onSubmit?.();
+  };
+
+  // ─── Derived layout flags ───────────────────────────────────────────────────
+
+  const hasDescription = !!description;
+  const showProgress = withProgress && !!timeout;
+
+  // ─── Render ─────────────────────────────────────────────────────────────────
+
+  return (0,jsx_runtime_namespaceObject.jsxs)("div", {
+    css: [styles_itemWrapperStyles(bg, hasDescription), itemSizeStyles[size], itemAnimationStyles(position, animationDuration), withShadow && shadowStyles(theme), withBorder && borderStyles(borderColor),  true ? "" : 0,  true ? "" : 0],
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave,
+    children: [renderProp ? renderProp(handleClose) : (0,jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
+      children: [(0,jsx_runtime_namespaceObject.jsx)("div", {
+        css: iconColStyles,
+        children: (0,jsx_runtime_namespaceObject.jsx)(Icon_Icon, {
+          name: "check-circle",
+          color: accentColor,
+          size: 24
+        })
+      }), hasDescription ? (0,jsx_runtime_namespaceObject.jsxs)("div", {
+        css: contentColStyles,
+        children: [(0,jsx_runtime_namespaceObject.jsxs)("div", {
+          css: expandedHeaderRowStyles,
+          children: [title && (0,jsx_runtime_namespaceObject.jsx)("span", {
+            css: styles_titleTextStyles(textColor),
+            children: title
+          }), (0,jsx_runtime_namespaceObject.jsx)(Icon_Icon, {
+            name: "cross",
+            size: 18,
+            onClick: handleClose,
+            "aria-label": "Close toast",
+            color: resolvedCloseIconColor,
+            css: closeBtnStyles
+          })]
+        }), (0,jsx_runtime_namespaceObject.jsx)("p", {
+          css: styles_descriptionStyles(textColor),
+          children: description
+        }), (0,jsx_runtime_namespaceObject.jsxs)("div", {
+          css: actionsRowStyles,
+          children: [cancelText && onClose && (0,jsx_runtime_namespaceObject.jsx)(Button_Button, {
+            variant: "tertiary",
+            css: styles_actionBtnStyles(textColor),
+            onClick: handleClose,
+            children: cancelText
+          }), submitText && onSubmit && (0,jsx_runtime_namespaceObject.jsx)(Button_Button, {
+            variant: "tertiary",
+            css: styles_actionBtnStyles(textColor),
+            onClick: handleSubmit,
+            children: submitText
+          })]
+        })]
+      }) : (0,jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
+        children: [title && (0,jsx_runtime_namespaceObject.jsx)("span", {
+          css: [styles_titleTextStyles(textColor), collapsedTitleStyles,  true ? "" : 0,  true ? "" : 0],
+          children: title
+        }), (0,jsx_runtime_namespaceObject.jsxs)("div", {
+          css: actionsRowStyles,
+          children: [cancelText && onClose && (0,jsx_runtime_namespaceObject.jsx)(Button_Button, {
+            variant: "tertiary",
+            css: styles_actionBtnStyles(textColor),
+            onClick: handleClose,
+            children: cancelText
+          }), submitText && onSubmit && (0,jsx_runtime_namespaceObject.jsx)(Button_Button, {
+            variant: "tertiary",
+            css: styles_actionBtnStyles(textColor),
+            onClick: handleSubmit,
+            children: submitText
+          })]
+        }), (0,jsx_runtime_namespaceObject.jsx)(Icon_Icon, {
+          name: "cross",
+          size: 18,
+          onClick: handleClose,
+          "aria-label": "Close toast",
+          color: resolvedCloseIconColor,
+          css: closeBtnStyles
+        })]
+      })]
+    }), showProgress && (0,jsx_runtime_namespaceObject.jsx)("div", {
+      css: progressBarContainerStyles,
+      children: (0,jsx_runtime_namespaceObject.jsx)("div", {
+        css: progressBarStyles(theme, timeout, resolvedProgressColor)
+        // Inline style for play-state so the animation resumes from its
+        // current position on hover-resume — changing an Emotion class
+        // would restart the animation from 0%.
+        ,
+        style: {
+          animationPlayState: isPaused ? 'paused' : 'running'
+        }
+      })
+    })]
+  });
+};
+;// ./src/components/NotificationComponents/Toast/Toast.tsx
+
+
+
+
+
+
+
+
+/**
+ * Toast — portal-based notification container driven by the Observer pattern.
+ *
+ * ## Usage pattern (two steps)
+ *
+ * **Step 1 — mount once** near the app root:
+ * ```tsx
+ * import { Toast, NotificationPositions } from '@ssa-ui-kit/core';
+ *
+ * <Toast position={NotificationPositions.rightBottom} withShadow timeout={4000} />
+ * ```
+ *
+ * **Step 2 — trigger from anywhere** via `showToast`:
+ * ```tsx
+ * import { showToast, ToastVariants } from '@ssa-ui-kit/core';
+ *
+ * showToast({ variant: ToastVariants.default, title: 'File saved!' });
+ *
+ * showToast({
+ *   variant: ToastVariants.default,
+ *   title: 'Uploading…',
+ *   color: 'blue',
+ *   timeout: 8000,
+ *   withProgress: true,
+ * });
+ * ```
+ *
+ * ## Key props
+ * - `position`         — one of `NotificationPositions` (default: `rightBottom`)
+ * - `timeout`          — default auto-dismiss ms; `undefined` = no auto-dismiss (default: `4000`)
+ * - `withProgress`     — show progress bar by default (default: `false`)
+ * - `maxAmount`        — cap on simultaneous toasts; oldest dropped when exceeded
+ * - `withShadow`       — drop shadow (default: `true`)
+ * - `withBorder`       — 1 px border (default: `false`)
+ * - `containerSelector`— CSS selector for a custom portal target
+ *
+ * ## Stacking order
+ * - `*-top` positions  → newest toast prepended (top of stack)
+ * - `*-bottom` positions → newest toast appended (bottom of stack)
+ *
+ * ## `timeout` precedence
+ * Per-toast `timeout` from `showToast` overrides the component-level default.
+ * `undefined` at either level disables auto-dismiss for that toast.
+ *
+ * @category Components
+ * @subcategory Notification
+ */
+
+let toastIdCounter = 0;
+const generateToastId = () => `toast-${Date.now()}-${++toastIdCounter}`;
+const Toast = props => {
+  const {
+    position = NotificationPositions.rightBottom,
+    size = NotificationSizes.small,
+    withShadow = true,
+    withBorder = false,
+    cancelText,
+    submitText,
+    containerSelector,
+    animationDuration = 300,
+    maxAmount,
+    withProgress = false,
+    progressColor
+  } = props;
+
+  // Check the raw props object so that `<Toast timeout={undefined} />` (explicitly
+  // disabling auto-dismiss) is distinguished from `<Toast />` (use the 4 s default).
+  // Destructuring defaults cannot make this distinction — both give `timeout = 4000`.
+  const timeout = 'timeout' in props ? props.timeout : 4000;
+  const [toasts, setToasts] = (0,external_react_namespaceObject.useState)([]);
+
+  // Unique per-instance key — multiple <Toast> mounts (e.g. Storybook Docs view)
+  // each keep independent subscriptions without overwriting each other.
+  const instanceId = (0,external_react_namespaceObject.useId)();
+
+  // useEffectEvent gives us a stable function reference that always reads the
+  // latest prop values — no manual refs needed. The effect subscribes once and
+  // never re-runs, while the handler always sees fresh position, maxAmount, etc.
+  const handleDispatch = (0,external_react_namespaceObject.useEffectEvent)(params => {
+    const resolvedTimeout = 'timeout' in params ? params.timeout : timeout;
+    const resolvedWithProgress = !!resolvedTimeout && ('withProgress' in params ? !!params.withProgress : withProgress);
+    const resolvedProgressColor = params.progressColor ?? progressColor;
+    const newToast = {
+      ...params,
+      id: generateToastId(),
+      resolvedTimeout,
+      resolvedWithProgress,
+      resolvedProgressColor
+    };
+    setToasts(prev => {
+      const isTop = position.includes('top');
+      const next = isTop ? [newToast, ...prev] : [...prev, newToast];
+      if (maxAmount && next.length > maxAmount) {
+        return isTop ? next.slice(0, maxAmount) : next.slice(-maxAmount);
+      }
+      return next;
+    });
+  });
+  (0,external_react_namespaceObject.useEffect)(() => {
+    toastObserver.subscribe(instanceId, handleDispatch);
+    return () => toastObserver.unsubscribe(instanceId);
+  }, []);
+  const removeToast = id => {
+    setToasts(prev => prev.filter(t => t.id !== id));
+  };
+  if (toasts.length === 0 || typeof document === 'undefined') {
+    return null;
+  }
+  const container = containerSelector && document.querySelector(containerSelector) || document.body;
+  return /*#__PURE__*/(0,external_react_dom_namespaceObject.createPortal)((0,jsx_runtime_namespaceObject.jsx)("div", {
+    css: containerStyles(position),
+    children: toasts.map(toast => (0,jsx_runtime_namespaceObject.jsx)(ToastItem, {
+      ...toast,
+      variant: toast.variant ?? ToastVariants.secondary,
+      size: toast.size ?? size,
+      cancelText: toast.cancelText ?? cancelText,
+      submitText: toast.submitText ?? submitText,
+      withShadow: withShadow,
+      withBorder: withBorder,
+      animationDuration: animationDuration,
+      position: position,
+      timeout: toast.resolvedTimeout,
+      withProgress: toast.resolvedWithProgress,
+      progressColor: toast.resolvedProgressColor,
+      onRemove: removeToast
+    }, toast.id))
+  }), container);
+};
+/* harmony default export */ const Toast_Toast = (Toast);
+;// ./src/components/NotificationComponents/Notification/notificationObserver.ts
+/**
+ * Module-level singleton connecting imperative `showNotification()` calls to
+ * whichever `<Notification>` components are currently mounted in the document.
+ *
+ * Architecture:
+ *
+ *   showNotification(params)
+ *     └─▶ notificationObserver.dispatch(params)
+ *           └─▶ forEach subscriber (one per mounted <Notification>):
+ *                 subscriber(params)   ← registered in useEffect on mount
+ *                   └─▶ setNotifications(prev => [...prev, newItem])
+ *                         └─▶ React re-renders → NotificationItem appears in portal
+ *
+ * Multiple `<Notification>` instances can coexist (e.g. Storybook Docs view).
+ * Each subscribes under a unique `useId()` key so dispatches reach all of them.
+ */
+
+
+const notificationObserver = createObserver();
+const showNotification = params => {
+  notificationObserver.dispatch(params);
+};
+;// ./src/components/NotificationComponents/Notification/types.ts
+let NotificationVariants = /*#__PURE__*/function (NotificationVariants) {
+  NotificationVariants["secondary"] = "secondary";
+  NotificationVariants["neutral"] = "neutral";
+  NotificationVariants["dark"] = "dark";
+  return NotificationVariants;
+}({});
+
+/**
+ * Per-slot style overrides for `<Notification>`.
+ *
+ * Cards render inside a portal, so a top-level `css` prop cannot reach inner
+ * elements. Use this object to customize any part of the card without touching
+ * the global theme.
+ *
+ * @example
+ * ```tsx
+ * <Notification
+ *   styles={{
+ *     root:  { borderRadius: 4 },
+ *     title: { fontWeight: 700 },
+ *     date:  { color: '#9ca3af' },
+ *   }}
+ * />
+ * ```
+ */
+
+/**
+ * Component-level props for the `<Notification>` portal container.
+ *
+ * Mount once near the app root; call `showNotification(...)` from anywhere.
+ */
+
+/**
+ * Parameters for an individual notification triggered via `showNotification(params)`.
+ *
+ * Only `variant` is required. Everything else is optional.
+ *
+ * @example
+ * ```ts
+ * // Minimal
+ * showNotification({ variant: NotificationVariants.default, title: 'John Doe' });
+ *
+ * // With avatar and timestamp
+ * showNotification({
+ *   variant: NotificationVariants.neutral,
+ *   title: 'Jane Smith',
+ *   date: '5 minutes ago',
+ *   description: 'Left a comment on your post.',
+ *   icon: <img src={avatarUrl} alt="Jane" />,
+ * });
+ *
+ * // With custom color
+ * showNotification({
+ *   variant: NotificationVariants.default,
+ *   title: 'System',
+ *   color: 'purple',
+ *   date: 'Just now',
+ * });
+ * ```
+ */
+;// ./src/components/NotificationComponents/Notification/styles.ts
+function Notification_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+
+
+// ─── Re-export shared structural styles ──────────────────────────────────────
+
+
+
+
+// ─── Variant color tokens ─────────────────────────────────────────────────────
+
+const Notification_styles_getVariantTokens = (theme, variant) => {
+  const map = {
+    [NotificationVariants.secondary]: {
+      bg: theme.palette.secondary.light,
+      iconColor: theme.colors.greyDarker60,
+      borderColor: theme.colors.greyFocused,
+      textColor: theme.colors.greyDarker
+    },
+    [NotificationVariants.neutral]: {
+      bg: theme.colors.white,
+      iconColor: theme.colors.greyDarker60,
+      borderColor: theme.colors.greyOutline,
+      textColor: theme.colors.greyDarker
+    },
+    [NotificationVariants.dark]: {
+      bg: theme.colors.greyBackground,
+      iconColor: theme.colors.white,
+      borderColor: theme.colors.greyBackground,
+      textColor: theme.colors.white
+    }
+  };
+  return map[variant];
+};
+
+// ─── Item wrapper ─────────────────────────────────────────────────────────────
+
+const Notification_styles_itemWrapperStyles = (background, hasDescription) => /*#__PURE__*/(0,react_namespaceObject.css)("position:relative;border-radius:8px;padding:12px 16px;display:flex;gap:12px;box-sizing:border-box;background:", background, ";align-items:", hasDescription ? 'flex-start' : 'center', ";" + ( true ? "" : 0),  true ? "" : 0);
+
+// ─── Icon column ──────────────────────────────────────────────────────────────
+// Larger than Alert/Toast (avatar-sized) and vertically centred with the
+// header row regardless of whether a description is present.
+
+const styles_iconColStyles =  true ? {
+  name: "g2yk48",
+  styles: "display:flex;flex-shrink:0;align-items:flex-start;padding-top:2px"
+} : 0;
+
+// ─── Content column ───────────────────────────────────────────────────────────
+
+const styles_contentColStyles =  true ? {
+  name: "1fllwkr",
+  styles: "display:flex;flex-direction:column;gap:6px;flex:1;min-width:0"
+} : 0;
+
+// ─── Header row: title · date · close ─────────────────────────────────────────
+
+const headerRowStyles =  true ? {
+  name: "1yydxi7",
+  styles: "display:flex;align-items:center;gap:8px"
+} : 0;
+
+// ─── Text styles ──────────────────────────────────────────────────────────────
+
+const Notification_styles_titleTextStyles = textColor => /*#__PURE__*/(0,react_namespaceObject.css)("font-size:14px;font-weight:600;line-height:20px;color:", textColor, ";flex:1;min-width:0;word-break:break-word;" + ( true ? "" : 0),  true ? "" : 0);
+const dateTextStyles = (theme, textColor) => /*#__PURE__*/(0,react_namespaceObject.css)("font-size:12px;font-weight:400;line-height:18px;color:", textColor ?? theme.colors.greyDarker60, ";white-space:nowrap;flex-shrink:0;" + ( true ? "" : 0),  true ? "" : 0);
+const Notification_styles_descriptionStyles = textColor => /*#__PURE__*/(0,react_namespaceObject.css)("font-size:13px;font-weight:400;line-height:18px;color:", textColor, ";opacity:0.8;margin:0;word-break:break-word;" + ( true ? "" : 0),  true ? "" : 0);
+const Notification_styles_actionBtnStyles = textColor => /*#__PURE__*/(0,react_namespaceObject.css)("background:none;border:none;padding:0;cursor:pointer;font-size:13px;font-weight:500;line-height:18px;height:max-content;letter-spacing:0.2px;color:", textColor, ";opacity:0.75;&:hover{opacity:1;}" + ( true ? "" : 0),  true ? "" : 0);
+;// ./src/components/NotificationComponents/Notification/NotificationItem.tsx
+/**
+ * @internal
+ *
+ * Renders a single notification card inside the `<Notification>` portal container.
+ * Not part of the public API — consumers call `showNotification(params)` to trigger
+ * notifications and configure appearance via `<Notification>` component props.
+ *
+ * Layout:
+ * ```
+ * [icon]  Title                    date  [×]
+ *         Description text here.
+ *         Cancel   Submit
+ * ```
+ *
+ * The icon column accepts:
+ * - A named icon string → rendered via `<Icon>`
+ * - Any ReactNode (img, Avatar, etc.) → rendered as-is
+ * - Omitted → falls back to `"user"` icon
+ *
+ * Action buttons are opt-in: a button only renders when both its label text
+ * AND its callback are present (`cancelText + onClose`, `submitText + onSubmit`).
+ */
+
+
+
+
+
+
+
+
+
+
+const NotificationItem = ({
+  id,
+  variant,
+  color,
+  date,
+  icon,
+  title,
+  description,
+  cancelText,
+  submitText,
+  size,
+  withShadow,
+  withBorder,
+  animationDuration,
+  position,
+  timeout,
+  onClose,
+  onSubmit,
+  onRemove,
+  styleOverrides
+}) => {
+  const theme = (0,react_namespaceObject.useTheme)();
+  const tokens = Notification_styles_getVariantTokens(theme, variant);
+
+  // ─── Color resolution ───────────────────────────────────────────────────────
+
+  const resolvedColor = color ? theme.colors[color] ?? color : undefined;
+  const bg = resolvedColor ?? tokens.bg;
+  const dark = resolvedColor ? isColorDark(resolvedColor) : variant === NotificationVariants.dark;
+  const textColor = resolvedColor ? getContrastColor(resolvedColor, theme.colors.greyDarker, theme.colors.white) : tokens.textColor;
+  const iconColor = resolvedColor ? dark ? theme.colors.white : darkenColor(resolvedColor) : tokens.iconColor;
+  const borderColor = resolvedColor ? darkenColor(resolvedColor) : tokens.borderColor;
+  const closeIconColor = dark ? theme.colors.white : theme.colors.greyDarker60;
+  const resolvedIconColor = styleOverrides?.iconColor ?? iconColor;
+  const resolvedCloseIconColor = styleOverrides?.closeIconColor ?? closeIconColor;
+
+  // ─── Date text color — muted relative to the title ────────────────────────
+  // On dark backgrounds (variant dark or custom dark color) use semi-transparent
+  // white so the date is readable but visually secondary to the title.
+  // On light backgrounds fall through to greyDarker60 inside dateTextStyles.
+  const dateMutedColor = dark ? 'rgba(255, 255, 255, 0.6)' : undefined;
+
+  // ─── Auto-dismiss timer (optional) ──────────────────────────────────────────
+
+  const {
+    handleMouseEnter,
+    handleMouseLeave
+  } = useAutoDismiss(timeout, () => {
+    onRemove(id);
+    onClose?.();
+  });
+
+  // ─── Dismiss helpers ────────────────────────────────────────────────────────
+
+  const handleClose = () => {
+    onRemove(id);
+    onClose?.();
+  };
+  const handleSubmit = () => {
+    onRemove(id);
+    onSubmit?.();
+  };
+
+  // ─── Icon element ────────────────────────────────────────────────────────────
+
+  const iconSize = size === NotificationSizes.large ? 46 : 36;
+  const iconElement = typeof icon === 'string' ? (0,jsx_runtime_namespaceObject.jsx)(Icon_Icon, {
+    name: icon,
+    color: resolvedIconColor,
+    size: iconSize
+  }) : icon != null ? icon : (0,jsx_runtime_namespaceObject.jsx)(Icon_Icon, {
+    name: "user",
+    color: resolvedIconColor,
+    size: iconSize
+  });
+
+  // ─── Derived flags ───────────────────────────────────────────────────────────
+
+  const hasDescription = !!description;
+
+  // ─── Render ─────────────────────────────────────────────────────────────────
+
+  return (0,jsx_runtime_namespaceObject.jsxs)("div", {
+    css: [Notification_styles_itemWrapperStyles(bg, hasDescription), itemSizeStyles[size], itemAnimationStyles(position, animationDuration), withShadow && shadowStyles(theme), withBorder && borderStyles(borderColor), styleOverrides?.root,  true ? "" : 0,  true ? "" : 0],
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave,
+    children: [(0,jsx_runtime_namespaceObject.jsx)("div", {
+      css: [styles_iconColStyles, styleOverrides?.icon,  true ? "" : 0,  true ? "" : 0],
+      children: iconElement
+    }), (0,jsx_runtime_namespaceObject.jsxs)("div", {
+      css: styles_contentColStyles,
+      children: [(0,jsx_runtime_namespaceObject.jsxs)("div", {
+        css: headerRowStyles,
+        children: [title && (0,jsx_runtime_namespaceObject.jsx)("span", {
+          css: [Notification_styles_titleTextStyles(textColor), styleOverrides?.title,  true ? "" : 0,  true ? "" : 0],
+          children: title
+        }), date && (0,jsx_runtime_namespaceObject.jsx)("span", {
+          css: [dateTextStyles(theme, dateMutedColor), styleOverrides?.date,  true ? "" : 0,  true ? "" : 0],
+          children: date
+        }), (0,jsx_runtime_namespaceObject.jsx)(Icon_Icon, {
+          name: "cross",
+          css: [closeBtnStyles, styleOverrides?.closeButton,  true ? "" : 0,  true ? "" : 0],
+          onClick: handleClose,
+          "aria-label": "Close notification",
+          size: 18,
+          color: resolvedCloseIconColor
+        })]
+      }), hasDescription && (0,jsx_runtime_namespaceObject.jsx)("p", {
+        css: [Notification_styles_descriptionStyles(textColor), styleOverrides?.description,  true ? "" : 0,  true ? "" : 0],
+        children: description
+      }), (cancelText && onClose || submitText && onSubmit) && (0,jsx_runtime_namespaceObject.jsxs)("div", {
+        css: [actionsRowStyles, styleOverrides?.actions,  true ? "" : 0,  true ? "" : 0],
+        children: [cancelText && onClose && (0,jsx_runtime_namespaceObject.jsx)(Button_Button, {
+          variant: "tertiary",
+          css: [Notification_styles_actionBtnStyles(textColor), styleOverrides?.actionButton,  true ? "" : 0,  true ? "" : 0],
+          onClick: handleClose,
+          children: cancelText
+        }), submitText && onSubmit && (0,jsx_runtime_namespaceObject.jsx)(Button_Button, {
+          variant: "tertiary",
+          css: [Notification_styles_actionBtnStyles(textColor), styleOverrides?.actionButton,  true ? "" : 0,  true ? "" : 0],
+          onClick: handleSubmit,
+          children: submitText
+        })]
+      })]
+    })]
+  });
+};
+;// ./src/components/NotificationComponents/Notification/Notification.tsx
+
+
+
+
+
+
+
+
+/**
+ * Notification — portal-based notification container driven by the Observer pattern.
+ *
+ * ## Usage pattern (two steps)
+ *
+ * **Step 1 — mount once** near the app root:
+ * ```tsx
+ * import { Notification, NotificationPositions } from '@ssa-ui-kit/core';
+ *
+ * <Notification position={NotificationPositions.rightBottom} withShadow />
+ * ```
+ *
+ * **Step 2 — trigger from anywhere** via `showNotification`:
+ * ```tsx
+ * import { showNotification, NotificationVariants } from '@ssa-ui-kit/core';
+ *
+ * showNotification({
+ *   variant: NotificationVariants.neutral,
+ *   title: 'Jane Smith',
+ *   date: '5 minutes ago',
+ *   description: 'Left a comment on your post.',
+ *   icon: <img src={avatarUrl} alt="Jane" />,
+ * });
+ * ```
+ *
+ * ## Key props
+ * - `position`          — one of `NotificationPositions` (default: `rightBottom`)
+ * - `timeout`           — default auto-dismiss ms; omitted = persistent (default: `undefined`)
+ * - `maxAmount`         — cap on simultaneous notifications; oldest dropped when exceeded
+ * - `withShadow`        — drop shadow (default: `true`)
+ * - `withBorder`        — 1 px border (default: `false`)
+ * - `styles`            — `NotificationStyleOverrides` for per-slot CSS customization
+ * - `containerSelector` — CSS selector for a custom portal target
+ *
+ * ## Stacking order
+ * - `*-top` positions    → newest prepended (top of stack)
+ * - `*-bottom` positions → newest appended (bottom of stack)
+ *
+ * ## `timeout` precedence
+ * Per-notification `timeout` from `showNotification` overrides the component-level default.
+ * `undefined` at either level keeps the notification persistent.
+ *
+ * @category Components
+ * @subcategory Notification
+ */
+
+let notificationIdCounter = 0;
+const generateNotificationId = () => `notification-${Date.now()}-${++notificationIdCounter}`;
+const Notification_Notification = props => {
+  const {
+    position = NotificationPositions.rightBottom,
+    size = NotificationSizes.small,
+    withShadow = true,
+    withBorder = false,
+    cancelText = '',
+    submitText = '',
+    containerSelector,
+    animationDuration = 300,
+    maxAmount,
+    styles
+  } = props;
+
+  // Notifications are persistent by default — `timeout` has no default value.
+  // We use the `'timeout' in props` check so that passing `timeout={undefined}`
+  // explicitly is respected as "disable auto-dismiss" and not silently ignored.
+  const timeout = 'timeout' in props ? props.timeout : undefined;
+  const [notifications, setNotifications] = (0,external_react_namespaceObject.useState)([]);
+
+  // Unique per-instance key so multiple <Notification> mounts coexist without
+  // overwriting each other's observer subscription (e.g. Storybook Docs view).
+  const instanceId = (0,external_react_namespaceObject.useId)();
+
+  // useEffectEvent gives a stable reference that always reads the latest props —
+  // no manual refs needed. The effect subscribes once and never re-runs.
+  const handleDispatch = (0,external_react_namespaceObject.useEffectEvent)(params => {
+    // Per-notification `timeout` overrides the component-level default.
+    const resolvedTimeout = 'timeout' in params ? params.timeout : timeout;
+    const newNotification = {
+      ...params,
+      id: generateNotificationId(),
+      resolvedTimeout
+    };
+    setNotifications(prev => {
+      const isTop = position.includes('top');
+      const next = isTop ? [newNotification, ...prev] : [...prev, newNotification];
+      if (maxAmount && next.length > maxAmount) {
+        return isTop ? next.slice(0, maxAmount) : next.slice(-maxAmount);
+      }
+      return next;
+    });
+  });
+  (0,external_react_namespaceObject.useEffect)(() => {
+    notificationObserver.subscribe(instanceId, handleDispatch);
+    return () => notificationObserver.unsubscribe(instanceId);
+  }, []);
+  const removeNotification = id => {
+    setNotifications(prev => prev.filter(n => n.id !== id));
+  };
+  if (notifications.length === 0 || typeof document === 'undefined') {
+    return null;
+  }
+  const container = containerSelector && document.querySelector(containerSelector) || document.body;
+  return /*#__PURE__*/(0,external_react_dom_namespaceObject.createPortal)((0,jsx_runtime_namespaceObject.jsx)("div", {
+    css: containerStyles(position),
+    children: notifications.map(notification => (0,jsx_runtime_namespaceObject.jsx)(NotificationItem, {
+      ...notification,
+      variant: notification.variant ?? NotificationVariants.secondary,
+      size: notification.size ?? size,
+      cancelText: notification.cancelText ?? cancelText,
+      submitText: notification.submitText ?? submitText,
+      withShadow: withShadow,
+      withBorder: withBorder,
+      animationDuration: animationDuration,
+      position: position,
+      timeout: notification.resolvedTimeout,
+      onRemove: removeNotification,
+      styleOverrides: styles
+    }, notification.id))
+  }), container);
+};
+/* harmony default export */ const NotificationComponents_Notification_Notification = (Notification_Notification);
+;// ./src/components/NotificationComponents/index.ts
+
+
+
+
+// Aliased to avoid collisions with generic names from other components
 ;// ./src/components/AccordionGroup/index.ts
 
 
@@ -52378,6 +54143,13 @@ const UserProfile = ({
 
 
 
+// ============================================================================
+// Notification Components
+// ============================================================================
+// Alert, Toast, and Notification banners (Observer-driven, portal-based)
+
+
+
 // ============================================================================
 // Specialized Components
 // ============================================================================