@ssa-ui-kit/core 3.7.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),
@@ -9196,15 +9207,73 @@ __webpack_require__.d(Warning_namespaceObject, {
   Warning: () => (Warning)
 });
 
+// NAMESPACE OBJECT: ./src/components/Icon/icons/PanelLeft.tsx
+var PanelLeft_namespaceObject = {};
+__webpack_require__.r(PanelLeft_namespaceObject);
+__webpack_require__.d(PanelLeft_namespaceObject, {
+  ICON_NAME: () => (PanelLeft_ICON_NAME),
+  PanelLeft: () => (PanelLeft)
+});
+
+// NAMESPACE OBJECT: ./src/components/Icon/icons/PanelRight.tsx
+var PanelRight_namespaceObject = {};
+__webpack_require__.r(PanelRight_namespaceObject);
+__webpack_require__.d(PanelRight_namespaceObject, {
+  ICON_NAME: () => (PanelRight_ICON_NAME),
+  PanelRight: () => (PanelRight)
+});
+
+// NAMESPACE OBJECT: ./src/components/Icon/icons/EmailOutlined.tsx
+var EmailOutlined_namespaceObject = {};
+__webpack_require__.r(EmailOutlined_namespaceObject);
+__webpack_require__.d(EmailOutlined_namespaceObject, {
+  EmailOutlined: () => (EmailOutlined),
+  ICON_NAME: () => (EmailOutlined_ICON_NAME)
+});
+
+// NAMESPACE OBJECT: ./src/components/Icon/icons/LockOutlined.tsx
+var LockOutlined_namespaceObject = {};
+__webpack_require__.r(LockOutlined_namespaceObject);
+__webpack_require__.d(LockOutlined_namespaceObject, {
+  ICON_NAME: () => (LockOutlined_ICON_NAME),
+  LockOutlined: () => (LockOutlined)
+});
+
+// NAMESPACE OBJECT: ./src/components/Icon/icons/AddFolder.tsx
+var AddFolder_namespaceObject = {};
+__webpack_require__.r(AddFolder_namespaceObject);
+__webpack_require__.d(AddFolder_namespaceObject, {
+  AddFolder: () => (AddFolder),
+  ICON_NAME: () => (AddFolder_ICON_NAME)
+});
+
+// NAMESPACE OBJECT: ./src/components/Icon/icons/MoveFolder.tsx
+var MoveFolder_namespaceObject = {};
+__webpack_require__.r(MoveFolder_namespaceObject);
+__webpack_require__.d(MoveFolder_namespaceObject, {
+  ICON_NAME: () => (MoveFolder_ICON_NAME),
+  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);
 __webpack_require__.d(all_namespaceObject, {
+  AddFolder: () => (AddFolder_namespaceObject),
   Archive: () => (Archive_namespaceObject),
   ArrowDown: () => (ArrowDown_namespaceObject),
   ArrowUp: () => (ArrowUp_namespaceObject),
   Assessment: () => (Assessment_namespaceObject),
   Attention: () => (Attention_namespaceObject),
+  AttentionCircle: () => (AttentionCircle_namespaceObject),
   Award: () => (Award_namespaceObject),
   BanUser: () => (BanUser_namespaceObject),
   Bench: () => (Bench_namespaceObject),
@@ -9247,6 +9316,7 @@ __webpack_require__.d(all_namespaceObject, {
   Edit: () => (Edit_namespaceObject),
   Education: () => (Education_namespaceObject),
   Email: () => (Email_namespaceObject),
+  EmailOutlined: () => (EmailOutlined_namespaceObject),
   Employee: () => (Employee_namespaceObject),
   EmployeeBlackboard: () => (EmployeeBlackboard_namespaceObject),
   EmployeeProfile: () => (EmployeeProfile_namespaceObject),
@@ -9272,6 +9342,7 @@ __webpack_require__.d(all_namespaceObject, {
   Language: () => (Language_namespaceObject),
   Link: () => (Link_namespaceObject),
   Lock: () => (Lock_namespaceObject),
+  LockOutlined: () => (LockOutlined_namespaceObject),
   LogIn: () => (LogIn_namespaceObject),
   LogOut: () => (LogOut_namespaceObject),
   Maximize: () => (Maximize_namespaceObject),
@@ -9282,10 +9353,13 @@ __webpack_require__.d(all_namespaceObject, {
   MinusCircleInverted: () => (MinusCircleInverted_namespaceObject),
   More: () => (More_namespaceObject),
   MoreVertical: () => (MoreVertical_namespaceObject),
+  MoveFolder: () => (MoveFolder_namespaceObject),
   Notification: () => (Notification_namespaceObject),
   OfficeChair: () => (OfficeChair_namespaceObject),
   OpenBook: () => (OpenBook_namespaceObject),
   Pages: () => (Pages_namespaceObject),
+  PanelLeft: () => (PanelLeft_namespaceObject),
+  PanelRight: () => (PanelRight_namespaceObject),
   Party: () => (Party_namespaceObject),
   Plus: () => (Plus_namespaceObject),
   PlusCircle: () => (PlusCircle_namespaceObject),
@@ -9480,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)',
@@ -9532,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)',
@@ -9570,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)',
@@ -13835,6 +13917,189 @@ const Warning = ({
   })]
 });
 const Warning_ICON_NAME = 'warning';
+;// ./src/components/Icon/icons/PanelLeft.tsx
+
+const PanelLeft = ({
+  fill = '#000',
+  size = 24,
+  tooltip = 'Panel Left',
+  ...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: "M18.2061 3.00488C20.3194 3.11211 22 4.85996 22 7V17L21.9951 17.2061C21.8913 19.2512 20.2512 20.8913 18.2061 20.9951L18 21H6L5.79395 20.9951C3.7488 20.8913 2.10865 19.2512 2.00488 17.2061L2 17V7C2 4.85996 3.68056 3.11211 5.79395 3.00488L6 3H18L18.2061 3.00488ZM6 4.40039C4.56406 4.40039 3.40039 5.56406 3.40039 7V17C3.40039 18.4359 4.56406 19.5996 6 19.5996H7.7998V4.40039H6ZM9.2002 19.5996H18C19.4359 19.5996 20.5996 18.4359 20.5996 17V7C20.5996 5.56406 19.4359 4.40039 18 4.40039H9.2002V19.5996Z",
+    fill: fill
+  })]
+});
+const PanelLeft_ICON_NAME = 'panelLeft';
+;// ./src/components/Icon/icons/PanelRight.tsx
+
+const PanelRight = ({
+  fill = '#000',
+  size = 24,
+  tooltip = 'Panel Right',
+  ...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: "M18.2061 3.00488C20.3194 3.11211 22 4.85996 22 7V17L21.9951 17.2061C21.8913 19.2512 20.2512 20.8913 18.2061 20.9951L18 21H6L5.79395 20.9951C3.7488 20.8913 2.10865 19.2512 2.00488 17.2061L2 17V7C2 4.85996 3.68056 3.11211 5.79395 3.00488L6 3H18L18.2061 3.00488ZM6 4.40039C4.56406 4.40039 3.40039 5.56406 3.40039 7V17C3.40039 18.4359 4.56406 19.5996 6 19.5996H14.7998V4.40039H6ZM16.2002 19.5996H18C19.4359 19.5996 20.5996 18.4359 20.5996 17V7C20.5996 5.56406 19.4359 4.40039 18 4.40039H16.2002V19.5996Z",
+    fill: fill
+  })]
+});
+const PanelRight_ICON_NAME = 'panelRight';
+;// ./src/components/Icon/icons/EmailOutlined.tsx
+
+const EmailOutlined = ({
+  fill = '#000',
+  size = 24,
+  tooltip = 'Email',
+  ...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: "M6 4.7002H18C19.8225 4.7002 21.2998 6.17746 21.2998 8V16C21.2998 17.8225 19.8225 19.2998 18 19.2998H6C4.17746 19.2998 2.7002 17.8225 2.7002 16V8C2.7002 6.17746 4.17746 4.7002 6 4.7002Z",
+    stroke: fill,
+    strokeWidth: "1.4"
+  }), (0,jsx_runtime_namespaceObject.jsx)("path", {
+    d: "M20.5232 6.46505C20.78 6.17611 20.754 5.73366 20.4651 5.47681C20.1761 5.21997 19.7337 5.246 19.4768 5.53495L20.5232 6.46505ZM4.52319 5.53495C4.26634 5.246 3.82389 5.21997 3.53495 5.47681C3.246 5.73366 3.21997 6.17611 3.47681 6.46505L4.52319 5.53495ZM19.4768 5.53495L14.4665 11.1716L15.5128 12.1017L20.5232 6.46505L19.4768 5.53495ZM9.53355 11.1716L4.52319 5.53495L3.47681 6.46505L8.48718 12.1017L9.53355 11.1716ZM14.4665 11.1716C13.1537 12.6484 10.8463 12.6484 9.53355 11.1716L8.48718 12.1017C10.3568 14.205 13.6432 14.205 15.5128 12.1017L14.4665 11.1716Z",
+    fill: fill
+  })]
+});
+const EmailOutlined_ICON_NAME = 'emailOutlined';
+;// ./src/components/Icon/icons/LockOutlined.tsx
+
+const LockOutlined = ({
+  fill = '#000',
+  size = 24,
+  tooltip = 'Lock',
+  ...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", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M12 10.5C13.3807 10.5 14.5 11.6193 14.5 13C14.5 14.1374 13.7398 15.0954 12.7002 15.3984V17C12.7002 17.3866 12.3866 17.7002 12 17.7002C11.6134 17.7002 11.2998 17.3866 11.2998 17V15.3984C10.2602 15.0954 9.5 14.1374 9.5 13C9.5 11.6193 10.6193 10.5 12 10.5ZM12 11.9004C11.3925 11.9004 10.9004 12.3925 10.9004 13C10.9004 13.6075 11.3925 14.0996 12 14.0996C12.6075 14.0996 13.0996 13.6075 13.0996 13C13.0996 12.3925 12.6075 11.9004 12 11.9004Z",
+    fill: fill
+  }), (0,jsx_runtime_namespaceObject.jsx)("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M13 1C15.2091 1 17 2.79086 17 5V6C19.2091 6 21 7.79086 21 10V18C21 20.2091 19.2091 22 17 22H7L6.79395 21.9951C4.68056 21.8879 3 20.14 3 18V10C3 7.79086 4.79086 6 7 6V5C7 2.79086 8.79086 1 11 1H13ZM7 7.40039C5.56406 7.40039 4.40039 8.56406 4.40039 10V18C4.40039 19.4359 5.56406 20.5996 7 20.5996H17C18.4359 20.5996 19.5996 19.4359 19.5996 18V10C19.5996 8.56406 18.4359 7.40039 17 7.40039H7ZM11 2.40039C9.56406 2.40039 8.40039 3.56406 8.40039 5V6H15.5996V5C15.5996 3.56406 14.4359 2.40039 13 2.40039H11Z",
+    fill: fill
+  })]
+});
+const LockOutlined_ICON_NAME = 'lockOutlined';
+;// ./src/components/Icon/icons/AddFolder.tsx
+
+const AddFolder = ({
+  fill = '#000',
+  size = 24,
+  tooltip = 'Add Folder',
+  ...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.1006 9.79974C12.4869 9.79998 12.8007 10.1136 12.8008 10.4999V13.1992H15.2998L15.4414 13.2138C15.7601 13.2792 15.9998 13.5614 16 13.8994C16 14.286 15.6864 14.5995 15.2998 14.5995H12.8008V17.0995L12.7861 17.2411C12.7208 17.5598 12.4385 17.7995 12.1006 17.7997C11.714 17.7997 11.4004 17.4861 11.4004 17.0995V14.5995H8.7002C8.3136 14.5995 8 14.286 8 13.8994C8.00028 13.513 8.31377 13.1992 8.7002 13.1992H11.4004V10.4999C11.4005 10.1134 11.714 9.79974 12.1006 9.79974Z",
+    fill: fill
+  }), (0,jsx_runtime_namespaceObject.jsx)("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M8.58008 2.49994C9.16388 2.49994 9.71867 2.75495 10.0986 3.19818L12.2002 5.65033C12.3902 5.87198 12.668 5.99994 12.96 5.99994H18.5C20.7091 5.99994 22.5 7.7908 22.5 9.99994V17.4999C22.5 19.64 20.8194 21.3878 18.7061 21.4951L18.5 21.4999H5.5C3.29086 21.4999 1.5 19.7091 1.5 17.4999V6.49994C1.5 4.2908 3.29086 2.49994 5.5 2.49994H8.58008ZM5.5 3.90033C4.06406 3.90033 2.90039 5.064 2.90039 6.49994V17.4999C2.90039 18.9359 4.06406 20.0995 5.5 20.0995H18.5C19.9359 20.0995 21.0996 18.9359 21.0996 17.4999V9.99994C21.0996 8.564 19.9359 7.40033 18.5 7.40033H12.96C12.2593 7.40033 11.5937 7.09341 11.1377 6.56146L9.03613 4.10931C8.92214 3.97633 8.75523 3.90033 8.58008 3.90033H5.5Z",
+    fill: fill
+  })]
+});
+const AddFolder_ICON_NAME = 'addFolder';
+;// ./src/components/Icon/icons/MoveFolder.tsx
+
+const MoveFolder = ({
+  fill = '#000',
+  size = 24,
+  tooltip = 'Move Folder',
+  ...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.1709 10.6543C12.4173 10.4328 12.797 10.4529 13.0186 10.6992L15.5 13.46C15.5073 13.4681 15.5127 13.4779 15.5195 13.4863C15.534 13.5043 15.5482 13.5224 15.5605 13.542C15.5678 13.5536 15.5736 13.5662 15.5801 13.5781C15.5917 13.5997 15.6034 13.6215 15.6123 13.6445C15.618 13.6594 15.6215 13.6752 15.626 13.6904C15.6314 13.7087 15.6379 13.7271 15.6416 13.7461C15.6461 13.7696 15.6477 13.7936 15.6494 13.8174C15.6505 13.8315 15.6543 13.846 15.6543 13.8604C15.6542 13.8824 15.6498 13.9043 15.6475 13.9258C15.6459 13.9409 15.6464 13.9567 15.6436 13.9717C15.6392 13.9947 15.6309 14.017 15.624 14.0391C15.6199 14.0523 15.6164 14.0662 15.6113 14.0791C15.6031 14.1 15.5924 14.12 15.582 14.1396C15.5748 14.1533 15.5679 14.1675 15.5596 14.1807C15.5473 14.1999 15.5338 14.2186 15.5195 14.2363C15.513 14.2445 15.5071 14.2539 15.5 14.2617L13.0186 17.0234C12.797 17.2694 12.4172 17.2896 12.1709 17.0684C11.9248 16.847 11.905 16.4681 12.126 16.2217L13.707 14.4609H8.90039C8.56929 14.4608 8.30006 14.1914 8.2998 13.8604C8.30023 13.5294 8.56939 13.2609 8.90039 13.2607H13.7061L12.126 11.501C11.9047 11.2548 11.9251 10.8759 12.1709 10.6543Z",
+    fill: fill
+  }), (0,jsx_runtime_namespaceObject.jsx)("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M8.58008 2.5C9.16388 2.5 9.71867 2.75502 10.0986 3.19824L12.2002 5.65039C12.3902 5.87201 12.6681 6 12.96 6H18.5C20.7091 6 22.5 7.79086 22.5 10V17.5C22.5 19.64 20.8194 21.3879 18.7061 21.4951L18.5 21.5H5.5C3.29088 21.5 1.50003 19.7091 1.5 17.5V6.5C1.5 4.29086 3.29086 2.5 5.5 2.5H8.58008ZM5.5 3.90039C4.06406 3.90039 2.90039 5.06406 2.90039 6.5V17.5C2.90042 18.9359 4.06408 20.0996 5.5 20.0996H18.5C19.9359 20.0996 21.0996 18.9359 21.0996 17.5V10C21.0996 8.56406 19.9359 7.40039 18.5 7.40039H12.96C12.2594 7.40039 11.5937 7.09345 11.1377 6.56152L9.03613 4.10938C8.92214 3.97639 8.75523 3.90039 8.58008 3.90039H5.5Z",
+    fill: fill
+  })]
+});
+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
 
 
@@ -14063,6 +14328,20 @@ const Warning_ICON_NAME = 'warning';
 
 
 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
 
 
@@ -51255,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
 
 
@@ -52159,6 +54143,13 @@ const UserProfile = ({
 
 
 
+// ============================================================================
+// Notification Components
+// ============================================================================
+// Alert, Toast, and Notification banners (Observer-driven, portal-based)
+
+
+
 // ============================================================================
 // Specialized Components
 // ============================================================================