@egov3/system-design 1.3.112 → 1.3.119

package/dist/cjs/baseComponents/BaseField/index.js

@@ -38,7 +38,7 @@ const BaseFieldInner = ({ value = "", labelText, inputLeftIcon, isClearable, cla
                                         handleFocus,
                                         handleBlur,
                                         handleChange,
-                                    })] })] }), isFocused && isClearable && value && (jsxRuntime.jsx(graphics.Icons.General.Clear, { className: BaseField_module.default.clearIcon, onMouseDown: (e) => e.preventDefault(), onClick: handleClear, "data-testid": "Icons_CLEAR" }))] }), hintText && hintText.length > 0 && (jsxRuntime.jsx("span", { "data-testid": `${dataTestid}_HINT_TEXT`, className: joinClasses.joinClasses(BaseField_module.default.hintText, typography_module.default.body2Regular, isError && BaseField_module.default.error), children: hintText }))] }));
+                                    })] })] }), isFocused && isClearable && value && (jsxRuntime.jsx(graphics.Icons.General.Clear, { className: BaseField_module.default.clearIcon, onMouseDown: (e) => e.preventDefault(), onClick: handleClear, "data-testid": "Icons_CLEAR" }))] }), hintText && hintText.length > 0 && (jsxRuntime.jsx("span", { "data-testid": `${dataTestid}_HINT_TEXT`, className: joinClasses.joinClasses(BaseField_module.default.hintText, typography_module.default.caption1Regular, isError && BaseField_module.default.error), children: hintText }))] }));
 };
 const BaseField = React.forwardRef(BaseFieldInner);
 

package/dist/cjs/baseComponents/BaseField/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/baseComponents/BaseField/index.tsx"],"sourcesContent":[null],"names":["useState","_jsxs","joinClasses","styles","typography","_jsx","Icons","forwardRef"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../src/baseComponents/BaseField/index.tsx"],"sourcesContent":[null],"names":["useState","_jsxs","joinClasses","styles","typography","_jsx","Icons","forwardRef"],"mappings":"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"}

package/dist/cjs/components/Notification/Item/NotificationComponent.module.css.js

@@ -0,0 +1,22 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var css_248z = ".NotificationComponent-module_snackbar__PtpSi {\n  padding: 16px 20px;\n  border-radius: 12px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: 12px;\n  z-index: 1000;\n  box-shadow: 0px 12px 32px 0px rgba(128, 130, 136, 0.12);\n}\n\n.NotificationComponent-module_snackbar__PtpSi .NotificationComponent-module_text__jVDme {\n  color: var(--text-white-nonconvert-color);\n}\n\n.NotificationComponent-module_success__z-Mvq {\n  background-color: var(--icon-success);\n}\n\n.NotificationComponent-module_error__-9ZE1 {\n  background-color: var(--icon-error-color);\n}\n\n.NotificationComponent-module_info__qSq09 {\n  background-color: var(--icon-accent-color);\n}\n\n.NotificationComponent-module_warning__A3bKG {\n  background-color: var(--icon-warning-color);\n}\n";
+var styles = {"snackbar":"NotificationComponent-module_snackbar__PtpSi","text":"NotificationComponent-module_text__jVDme","success":"NotificationComponent-module_success__z-Mvq","error":"NotificationComponent-module_error__-9ZE1","info":"NotificationComponent-module_info__qSq09","warning":"NotificationComponent-module_warning__A3bKG"};
+function styleInject(css, options) {
+    if (typeof document === 'undefined') return;
+    const head = document.head || document.getElementsByTagName('head')[0];
+    const style = document.createElement('style');
+    style.type = 'text/css';
+    if (style.styleSheet) {
+      style.styleSheet.cssText = css;
+    } else {
+      style.appendChild(document.createTextNode(css));
+    }
+    head.appendChild(style);
+  }
+  styleInject(css_248z);
+
+exports.default = styles;
+//# sourceMappingURL=NotificationComponent.module.css.js.map

package/dist/cjs/components/Notification/Item/index.js

@@ -0,0 +1,22 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var graphics = require('@egov3/graphics');
+var index = require('../../../baseComponents/index.js');
+var joinClasses = require('../../../utils/joinClasses.js');
+var toPascalCase = require('../../../utils/string/toPascalCase.js');
+var NotificationComponent_module = require('./NotificationComponent.module.css.js');
+
+const notificationIconTypes = {
+    success: graphics.Icons.Basic.Check,
+    error: graphics.Icons.General.Clear,
+    warning: graphics.Icons.General.WarningFilled,
+    info: graphics.Icons.General.InfoFilled,
+};
+const NotificationItem = ({ type = "info", text, onClick, }) => {
+    const Icon = notificationIconTypes[type];
+    return (jsxRuntime.jsxs("button", { type: "button", onClick: onClick, className: joinClasses.joinClasses(NotificationComponent_module.default.snackbar, NotificationComponent_module.default[type]), "data-testid": "NotificationComponent_SNACKBAR", children: [jsxRuntime.jsx(Icon, { fill: "var(--icon-white-nonconvert-color)", "data-testid": `NotificationComponentIcon_${toPascalCase.toPascalCase(type)}` }), jsxRuntime.jsx(index.BaseComponents.Typography, { "aria-label": text, className: NotificationComponent_module.default.text, "data-testid": "NotificationComponent_TEXT", fontClass: "body2Regular", tag: "span", children: text })] }));
+};
+
+exports.NotificationItem = NotificationItem;
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/Notification/Item/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../src/components/Notification/Item/index.tsx"],"sourcesContent":[null],"names":["Icons","_jsxs","joinClasses","styles","_jsx","toPascalCase","BaseComponents"],"mappings":";;;;;;;;;AASA,MAAM,qBAAqB,GAAG;AAC5B,IAAA,OAAO,EAAEA,cAAK,CAAC,KAAK,CAAC,KAAK;AAC1B,IAAA,KAAK,EAAEA,cAAK,CAAC,OAAO,CAAC,KAAK;AAC1B,IAAA,OAAO,EAAEA,cAAK,CAAC,OAAO,CAAC,aAAa;AACpC,IAAA,IAAI,EAAEA,cAAK,CAAC,OAAO,CAAC,UAAU;CAI/B;AAQM,MAAM,gBAAgB,GAAG,CAAC,EAC/B,IAAI,GAAG,MAAM,EACb,IAAI,EACJ,OAAO,GACqB,KAAI;AAChC,IAAA,MAAM,IAAI,GAAG,qBAAqB,CAAC,IAAI,CAAC;AAExC,IAAA,QACEC,eAAA,CAAA,QAAA,EAAA,EACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,OAAO,EAChB,SAAS,EAAEC,uBAAW,CAACC,oCAAM,CAAC,QAAQ,EAAEA,oCAAM,CAAC,IAAI,CAAC,CAAC,EAAA,aAAA,EACzC,gCAAgC,EAAA,QAAA,EAAA,CAE5CC,cAAA,CAAC,IAAI,EAAA,EACH,IAAI,EAAC,oCAAoC,EAAA,aAAA,EAC5B,CAAA,0BAAA,EAA6BC,yBAAY,CAAC,IAAI,CAAC,CAAA,CAAE,EAAA,CAC9D,EACFD,cAAA,CAACE,oBAAc,CAAC,UAAU,EAAA,EAAA,YAAA,EACZ,IAAI,EAChB,SAAS,EAAEH,oCAAM,CAAC,IAAI,EAAA,aAAA,EACV,4BAA4B,EACxC,SAAS,EAAC,cAAc,EACxB,GAAG,EAAC,MAAM,EAAA,QAAA,EAET,IAAI,EAAA,CACqB,CAAA,EAAA,CACrB;AAEb;;;;"}

package/dist/cjs/components/Notification/Wrapper/NotificationWrapper.module.css.js

@@ -0,0 +1,22 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var css_248z = ".NotificationWrapper-module_wrapper__uK2xb {\n  position: fixed;\n  top: 24px;\n  left: 50%;\n  transform: translateX(-50%);\n\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  gap: 16px;\n  z-index: 1000;\n}\n\n.NotificationWrapper-module_item__45Lg0 {\n  will-change: transform, opacity;\n}\n\n.NotificationWrapper-module_flyDown__mntT4 {\n  animation: NotificationWrapper-module_flyDown__mntT4 300ms ease-in-out;\n}\n\n.NotificationWrapper-module_flyUp__a5Sa9 {\n  animation: NotificationWrapper-module_flyUp__a5Sa9 300ms ease-in-out;\n  animation-fill-mode: forwards;\n  pointer-events: none;\n}\n\n@keyframes NotificationWrapper-module_flyDown__mntT4 {\n  from {\n    transform: translateY(-100px);\n    opacity: 0;\n  }\n  to {\n    transform: translateY(0);\n    opacity: 1;\n  }\n}\n\n@keyframes NotificationWrapper-module_flyUp__a5Sa9 {\n  from {\n    transform: translateY(0);\n    opacity: 1;\n  }\n  to {\n    transform: translateY(-100px);\n    opacity: 0;\n  }\n}\n";
+var styles = {"wrapper":"NotificationWrapper-module_wrapper__uK2xb","item":"NotificationWrapper-module_item__45Lg0","flyDown":"NotificationWrapper-module_flyDown__mntT4","flyUp":"NotificationWrapper-module_flyUp__a5Sa9"};
+function styleInject(css, options) {
+    if (typeof document === 'undefined') return;
+    const head = document.head || document.getElementsByTagName('head')[0];
+    const style = document.createElement('style');
+    style.type = 'text/css';
+    if (style.styleSheet) {
+      style.styleSheet.cssText = css;
+    } else {
+      style.appendChild(document.createTextNode(css));
+    }
+    head.appendChild(style);
+  }
+  styleInject(css_248z);
+
+exports.default = styles;
+//# sourceMappingURL=NotificationWrapper.module.css.js.map

package/dist/cjs/components/Notification/Wrapper/NotificationWrapper.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationWrapper.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;"}

package/dist/cjs/components/Notification/Wrapper/index.js

@@ -0,0 +1,142 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var index = require('../Item/index.js');
+var NotificationWrapper_module = require('./NotificationWrapper.module.css.js');
+
+const AUTO_CLOSE_DELAY_MS = 7000;
+const FLIP_DURATION_MS = 300;
+const FLIP_EASING = "ease-in-out";
+const NotificationWrapper = ({ items, removeNotificationData, }) => {
+    const [closingTopId, setClosingTopId] = React.useState(null);
+    const topNotificationId = items[0]?.id ?? null;
+    const topNotificationIdRef = React.useRef(null);
+    const closeTimersRef = React.useRef(new Map());
+    const itemRefs = React.useRef(new Map());
+    const prevTopByIdRef = React.useRef(new Map());
+    const prevIdsRef = React.useRef(new Set());
+    const clearCloseTimer = React.useCallback((id) => {
+        const timer = closeTimersRef.current.get(id);
+        if (!timer) {
+            return;
+        }
+        clearTimeout(timer);
+        closeTimersRef.current.delete(id);
+    }, []);
+    const removeNotification = React.useCallback((id) => {
+        clearCloseTimer(id);
+        removeNotificationData(id);
+    }, [clearCloseTimer, removeNotificationData]);
+    const startTopCloseAnimation = React.useCallback((id) => {
+        clearCloseTimer(id);
+        setClosingTopId((current) => (current === id ? current : id));
+    }, [clearCloseTimer]);
+    const closeNotification = React.useCallback((id) => {
+        if (id !== topNotificationId) {
+            removeNotification(id);
+            return;
+        }
+        startTopCloseAnimation(id);
+    }, [topNotificationId, startTopCloseAnimation, removeNotification]);
+    const handleTopAnimationEnd = React.useCallback((event, id) => {
+        if (event.currentTarget !== event.target || closingTopId !== id) {
+            return;
+        }
+        removeNotification(id);
+        setClosingTopId(null);
+    }, [closingTopId, removeNotification]);
+    React.useEffect(() => {
+        topNotificationIdRef.current = topNotificationId;
+    }, [topNotificationId]);
+    React.useEffect(() => {
+        items.forEach((item) => {
+            if (closeTimersRef.current.has(item.id)) {
+                return;
+            }
+            const timer = setTimeout(() => {
+                if (topNotificationIdRef.current === item.id) {
+                    startTopCloseAnimation(item.id);
+                    return;
+                }
+                removeNotification(item.id);
+            }, AUTO_CLOSE_DELAY_MS);
+            closeTimersRef.current.set(item.id, timer);
+        });
+        const currentIds = new Set(items.map((item) => item.id));
+        closeTimersRef.current.forEach((timer, id) => {
+            if (currentIds.has(id)) {
+                return;
+            }
+            clearTimeout(timer);
+            closeTimersRef.current.delete(id);
+        });
+    }, [items, startTopCloseAnimation, removeNotification]);
+    React.useEffect(() => () => {
+        closeTimersRef.current.forEach((timer) => {
+            clearTimeout(timer);
+        });
+        closeTimersRef.current.clear();
+    }, []);
+    React.useLayoutEffect(() => {
+        const currentTopById = new Map();
+        const currentIds = new Set(items.map((item) => item.id));
+        items.forEach((item) => {
+            const element = itemRefs.current.get(item.id);
+            if (!element) {
+                return;
+            }
+            currentTopById.set(item.id, element.getBoundingClientRect().top);
+            const isNewItem = !prevIdsRef.current.has(item.id);
+            if (isNewItem) {
+                element.classList.add(NotificationWrapper_module.default.flyDown);
+                globalThis.setTimeout(() => {
+                    element.classList.remove(NotificationWrapper_module.default.flyDown);
+                }, FLIP_DURATION_MS);
+            }
+        });
+        if (items.length <= 1) {
+            prevTopByIdRef.current = currentTopById;
+            prevIdsRef.current = currentIds;
+            return;
+        }
+        items.forEach((item) => {
+            if (item.id === closingTopId) {
+                return;
+            }
+            const element = itemRefs.current.get(item.id);
+            const currentTop = currentTopById.get(item.id);
+            const previousTop = prevTopByIdRef.current.get(item.id);
+            if (!element || currentTop === undefined || previousTop === undefined) {
+                return;
+            }
+            const deltaY = previousTop - currentTop;
+            if (Math.abs(deltaY) <= 1) {
+                return;
+            }
+            element.animate([
+                { transform: `translateY(${deltaY}px)` },
+                { transform: "translateY(0)" },
+            ], { duration: FLIP_DURATION_MS, easing: FLIP_EASING });
+        });
+        prevTopByIdRef.current = currentTopById;
+        prevIdsRef.current = currentIds;
+    }, [items, closingTopId]);
+    if (items.length === 0) {
+        return null;
+    }
+    return (jsxRuntime.jsx("div", { className: NotificationWrapper_module.default.wrapper, "data-testid": "NotificationWrapper_LIST", children: items.map((notification) => (jsxRuntime.jsx("div", { className: `${NotificationWrapper_module.default.item} ${closingTopId === notification.id ? NotificationWrapper_module.default.flyUp : ""}`, onAnimationEnd: (event) => {
+                handleTopAnimationEnd(event, notification.id);
+            }, ref: (el) => {
+                if (el) {
+                    itemRefs.current.set(notification.id, el);
+                    return;
+                }
+                itemRefs.current.delete(notification.id);
+            }, "data-testid": `NotificationWrapper_ITEM_${notification.id}`, children: jsxRuntime.jsx(index.NotificationItem, { text: notification.text, type: notification.type, onClick: () => {
+                    closeNotification(notification.id);
+                } }) }, notification.id))) }));
+};
+
+exports.NotificationWrapper = NotificationWrapper;
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/Notification/Wrapper/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../src/components/Notification/Wrapper/index.tsx"],"sourcesContent":[null],"names":["useState","useRef","useCallback","useEffect","useLayoutEffect","styles","_jsx","NotificationItem"],"mappings":"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"}

package/dist/cjs/components/index.js

@@ -1,58 +1,60 @@
 'use strict';
 
 require('../styles/colors.css.js');
-var index$j = require('./ErrorModal/index.js');
-var index$o = require('./Identity/Agreement/index.js');
-var index$n = require('./Identity/Auth/index.js');
-var index$l = require('./Identity/EdsSuccess/index.js');
-var index$3 = require('./Identity/HelpInstruction/index.js');
-var index$d = require('./Identity/IdentityHeader/index.js');
-var index$c = require('./Identity/IdentityModal/index.js');
-var index$k = require('./Messages/EmptyMessages/index.js');
-var index$g = require('./Messages/HelpNotification/index.js');
-var index$f = require('./Messages/HelpNotificationItem/index.js');
-var index$b = require('./Messages/MsgBody/index.js');
-var index$a = require('./Messages/MsgComponentHeader/index.js');
-var index$9 = require('./Messages/MsgSearch/index.js');
-var index$4 = require('./Navigation/ViewToggle/index.js');
-var index = require('./NotificationComponent/index.js');
-var index$2 = require('./Presale/index.js');
-var index$m = require('./Profile/DocCard/index.js');
-var index$e = require('./Profile/IconToggleItem/index.js');
-var index$7 = require('./Profile/ProfileHealthGeneral/index.js');
-var index$6 = require('./Profile/RightMenuSectionItem/index.js');
-var index$5 = require('./Profile/SetUpAccess/index.js');
-var index$1 = require('./ServiceCardComponent/index.js');
-var index$i = require('./Services/Feedback/index.js');
-var index$h = require('./Services/FileForUpload/index.js');
-var index$8 = require('./Services/NextStepComponent/index.js');
+var index$k = require('./ErrorModal/index.js');
+var index$p = require('./Identity/Agreement/index.js');
+var index$o = require('./Identity/Auth/index.js');
+var index$m = require('./Identity/EdsSuccess/index.js');
+var index$4 = require('./Identity/HelpInstruction/index.js');
+var index$e = require('./Identity/IdentityHeader/index.js');
+var index$d = require('./Identity/IdentityModal/index.js');
+var index$l = require('./Messages/EmptyMessages/index.js');
+var index$h = require('./Messages/HelpNotification/index.js');
+var index$g = require('./Messages/HelpNotificationItem/index.js');
+var index$c = require('./Messages/MsgBody/index.js');
+var index$b = require('./Messages/MsgComponentHeader/index.js');
+var index$a = require('./Messages/MsgSearch/index.js');
+var index$5 = require('./Navigation/ViewToggle/index.js');
+var index$1 = require('./Notification/Item/index.js');
+var index = require('./Notification/Wrapper/index.js');
+var index$3 = require('./Presale/index.js');
+var index$n = require('./Profile/DocCard/index.js');
+var index$f = require('./Profile/IconToggleItem/index.js');
+var index$8 = require('./Profile/ProfileHealthGeneral/index.js');
+var index$7 = require('./Profile/RightMenuSectionItem/index.js');
+var index$6 = require('./Profile/SetUpAccess/index.js');
+var index$2 = require('./ServiceCardComponent/index.js');
+var index$j = require('./Services/Feedback/index.js');
+var index$i = require('./Services/FileForUpload/index.js');
+var index$9 = require('./Services/NextStepComponent/index.js');
 
 const Components = {
-    Agreement: index$o.Agreement,
-    Auth: index$n.Auth,
-    DocCard: index$m.DocCard,
-    EdsSuccess: index$l.EdsSuccess,
-    EmptyMessages: index$k.EmptyMessages,
-    ErrorModal: index$j.ErrorModal,
-    Feedback: index$i.Feedback,
-    FileForUpload: index$h.FileForUpload,
-    HelpNotification: index$g.HelpNotification,
-    HelpNotificationItem: index$f.HelpNotificationItem,
-    IconToggleItem: index$e.IconToggleItem,
-    IdentityHeader: index$d.IdentityHeader,
-    IdentityModal: index$c.IdentityModal,
-    MsgBody: index$b.MsgBody,
-    MsgComponentHeader: index$a.MsgComponentHeader,
-    MsgSearch: index$9.MsgSearch,
-    NextStepComponent: index$8.NextStepComponent,
-    ProfileHealthGeneral: index$7.ProfileHealthGeneral,
-    RightMenuSectionItem: index$6.RightMenuSectionItem,
-    SetUpAccess: index$5.SetUpAccess,
-    ViewToggle: index$4.ViewToggle,
-    HelpInstruction: index$3.HelpInstruction,
-    PresaleComponent: index$2.PresaleComponent,
-    ServiceCardComponent: index$1.ServiceCardComponent,
-    NotificationComponent: index.NotificationComponent,
+    Agreement: index$p.Agreement,
+    Auth: index$o.Auth,
+    DocCard: index$n.DocCard,
+    EdsSuccess: index$m.EdsSuccess,
+    EmptyMessages: index$l.EmptyMessages,
+    ErrorModal: index$k.ErrorModal,
+    Feedback: index$j.Feedback,
+    FileForUpload: index$i.FileForUpload,
+    HelpNotification: index$h.HelpNotification,
+    HelpNotificationItem: index$g.HelpNotificationItem,
+    IconToggleItem: index$f.IconToggleItem,
+    IdentityHeader: index$e.IdentityHeader,
+    IdentityModal: index$d.IdentityModal,
+    MsgBody: index$c.MsgBody,
+    MsgComponentHeader: index$b.MsgComponentHeader,
+    MsgSearch: index$a.MsgSearch,
+    NextStepComponent: index$9.NextStepComponent,
+    ProfileHealthGeneral: index$8.ProfileHealthGeneral,
+    RightMenuSectionItem: index$7.RightMenuSectionItem,
+    SetUpAccess: index$6.SetUpAccess,
+    ViewToggle: index$5.ViewToggle,
+    HelpInstruction: index$4.HelpInstruction,
+    PresaleComponent: index$3.PresaleComponent,
+    ServiceCardComponent: index$2.ServiceCardComponent,
+    NotificationItem: index$1.NotificationItem,
+    NotificationWrapper: index.NotificationWrapper,
 };
 
 exports.Components = Components;

package/dist/cjs/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/index.ts"],"sourcesContent":[null],"names":["Agreement","Auth","DocCard","EdsSuccess","EmptyMessages","ErrorModal","Feedback","FileForUpload","HelpNotification","HelpNotificationItem","IconToggleItem","IdentityHeader","IdentityModal","MsgBody","MsgComponentHeader","MsgSearch","NextStepComponent","ProfileHealthGeneral","RightMenuSectionItem","SetUpAccess","ViewToggle","HelpInstruction","PresaleComponent","ServiceCardComponent","NotificationComponent"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BO,MAAM,UAAU,GAAG;eACxBA,iBAAS;UACTC,YAAI;aACJC,eAAO;gBACPC,kBAAU;mBACVC,qBAAa;gBACbC,kBAAU;cACVC,gBAAQ;mBACRC,qBAAa;sBACbC,wBAAgB;0BAChBC,4BAAoB;oBACpBC,sBAAc;oBACdC,sBAAc;mBACdC,qBAAa;aACbC,eAAO;wBACPC,0BAAkB;eAClBC,iBAAS;uBACTC,yBAAiB;0BACjBC,4BAAoB;0BACpBC,4BAAoB;iBACpBC,mBAAW;gBACXC,kBAAU;qBACVC,uBAAe;sBACfC,wBAAgB;0BAChBC,4BAAoB;2BACpBC,2BAAqB;;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/index.ts"],"sourcesContent":[null],"names":["Agreement","Auth","DocCard","EdsSuccess","EmptyMessages","ErrorModal","Feedback","FileForUpload","HelpNotification","HelpNotificationItem","IconToggleItem","IdentityHeader","IdentityModal","MsgBody","MsgComponentHeader","MsgSearch","NextStepComponent","ProfileHealthGeneral","RightMenuSectionItem","SetUpAccess","ViewToggle","HelpInstruction","PresaleComponent","ServiceCardComponent","NotificationItem","NotificationWrapper"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BO,MAAM,UAAU,GAAG;eACxBA,iBAAS;UACTC,YAAI;aACJC,eAAO;gBACPC,kBAAU;mBACVC,qBAAa;gBACbC,kBAAU;cACVC,gBAAQ;mBACRC,qBAAa;sBACbC,wBAAgB;0BAChBC,4BAAoB;oBACpBC,sBAAc;oBACdC,sBAAc;mBACdC,qBAAa;aACbC,eAAO;wBACPC,0BAAkB;eAClBC,iBAAS;uBACTC,yBAAiB;0BACjBC,4BAAoB;0BACpBC,4BAAoB;iBACpBC,mBAAW;gBACXC,kBAAU;qBACVC,uBAAe;sBACfC,wBAAgB;0BAChBC,4BAAoB;sBACpBC,wBAAgB;yBAChBC,yBAAmB;;;;;"}

package/dist/esm/baseComponents/BaseField/index.js

@@ -36,7 +36,7 @@ const BaseFieldInner = ({ value = "", labelText, inputLeftIcon, isClearable, cla
                                         handleFocus,
                                         handleBlur,
                                         handleChange,
-                                    })] })] }), isFocused && isClearable && value && (jsx(Icons.General.Clear, { className: styles.clearIcon, onMouseDown: (e) => e.preventDefault(), onClick: handleClear, "data-testid": "Icons_CLEAR" }))] }), hintText && hintText.length > 0 && (jsx("span", { "data-testid": `${dataTestid}_HINT_TEXT`, className: joinClasses(styles.hintText, typography.body2Regular, isError && styles.error), children: hintText }))] }));
+                                    })] })] }), isFocused && isClearable && value && (jsx(Icons.General.Clear, { className: styles.clearIcon, onMouseDown: (e) => e.preventDefault(), onClick: handleClear, "data-testid": "Icons_CLEAR" }))] }), hintText && hintText.length > 0 && (jsx("span", { "data-testid": `${dataTestid}_HINT_TEXT`, className: joinClasses(styles.hintText, typography.caption1Regular, isError && styles.error), children: hintText }))] }));
 };
 const BaseField = forwardRef(BaseFieldInner);
 

package/dist/esm/baseComponents/BaseField/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/baseComponents/BaseField/index.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../src/baseComponents/BaseField/index.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/esm/components/Notification/Item/NotificationComponent.module.css.js

@@ -0,0 +1,18 @@
+var css_248z = ".NotificationComponent-module_snackbar__PtpSi {\n  padding: 16px 20px;\n  border-radius: 12px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: 12px;\n  z-index: 1000;\n  box-shadow: 0px 12px 32px 0px rgba(128, 130, 136, 0.12);\n}\n\n.NotificationComponent-module_snackbar__PtpSi .NotificationComponent-module_text__jVDme {\n  color: var(--text-white-nonconvert-color);\n}\n\n.NotificationComponent-module_success__z-Mvq {\n  background-color: var(--icon-success);\n}\n\n.NotificationComponent-module_error__-9ZE1 {\n  background-color: var(--icon-error-color);\n}\n\n.NotificationComponent-module_info__qSq09 {\n  background-color: var(--icon-accent-color);\n}\n\n.NotificationComponent-module_warning__A3bKG {\n  background-color: var(--icon-warning-color);\n}\n";
+var styles = {"snackbar":"NotificationComponent-module_snackbar__PtpSi","text":"NotificationComponent-module_text__jVDme","success":"NotificationComponent-module_success__z-Mvq","error":"NotificationComponent-module_error__-9ZE1","info":"NotificationComponent-module_info__qSq09","warning":"NotificationComponent-module_warning__A3bKG"};
+function styleInject(css, options) {
+    if (typeof document === 'undefined') return;
+    const head = document.head || document.getElementsByTagName('head')[0];
+    const style = document.createElement('style');
+    style.type = 'text/css';
+    if (style.styleSheet) {
+      style.styleSheet.cssText = css;
+    } else {
+      style.appendChild(document.createTextNode(css));
+    }
+    head.appendChild(style);
+  }
+  styleInject(css_248z);
+
+export { styles as default };
+//# sourceMappingURL=NotificationComponent.module.css.js.map

package/dist/esm/components/Notification/Item/index.js

@@ -0,0 +1,20 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Icons } from '@egov3/graphics';
+import { BaseComponents } from '../../../baseComponents/index.js';
+import { joinClasses } from '../../../utils/joinClasses.js';
+import { toPascalCase } from '../../../utils/string/toPascalCase.js';
+import styles from './NotificationComponent.module.css.js';
+
+const notificationIconTypes = {
+    success: Icons.Basic.Check,
+    error: Icons.General.Clear,
+    warning: Icons.General.WarningFilled,
+    info: Icons.General.InfoFilled,
+};
+const NotificationItem = ({ type = "info", text, onClick, }) => {
+    const Icon = notificationIconTypes[type];
+    return (jsxs("button", { type: "button", onClick: onClick, className: joinClasses(styles.snackbar, styles[type]), "data-testid": "NotificationComponent_SNACKBAR", children: [jsx(Icon, { fill: "var(--icon-white-nonconvert-color)", "data-testid": `NotificationComponentIcon_${toPascalCase(type)}` }), jsx(BaseComponents.Typography, { "aria-label": text, className: styles.text, "data-testid": "NotificationComponent_TEXT", fontClass: "body2Regular", tag: "span", children: text })] }));
+};
+
+export { NotificationItem };
+//# sourceMappingURL=index.js.map

package/dist/esm/components/Notification/Item/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../src/components/Notification/Item/index.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":";;;;;;;AASA,MAAM,qBAAqB,GAAG;AAC5B,IAAA,OAAO,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK;AAC1B,IAAA,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;AAC1B,IAAA,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,aAAa;AACpC,IAAA,IAAI,EAAE,KAAK,CAAC,OAAO,CAAC,UAAU;CAI/B;AAQM,MAAM,gBAAgB,GAAG,CAAC,EAC/B,IAAI,GAAG,MAAM,EACb,IAAI,EACJ,OAAO,GACqB,KAAI;AAChC,IAAA,MAAM,IAAI,GAAG,qBAAqB,CAAC,IAAI,CAAC;AAExC,IAAA,QACEA,IAAA,CAAA,QAAA,EAAA,EACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,WAAW,CAAC,MAAM,CAAC,QAAQ,EAAE,MAAM,CAAC,IAAI,CAAC,CAAC,EAAA,aAAA,EACzC,gCAAgC,EAAA,QAAA,EAAA,CAE5CC,GAAA,CAAC,IAAI,EAAA,EACH,IAAI,EAAC,oCAAoC,EAAA,aAAA,EAC5B,CAAA,0BAAA,EAA6B,YAAY,CAAC,IAAI,CAAC,CAAA,CAAE,EAAA,CAC9D,EACFA,GAAA,CAAC,cAAc,CAAC,UAAU,EAAA,EAAA,YAAA,EACZ,IAAI,EAChB,SAAS,EAAE,MAAM,CAAC,IAAI,EAAA,aAAA,EACV,4BAA4B,EACxC,SAAS,EAAC,cAAc,EACxB,GAAG,EAAC,MAAM,EAAA,QAAA,EAET,IAAI,EAAA,CACqB,CAAA,EAAA,CACrB;AAEb;;;;"}

package/dist/esm/components/Notification/Wrapper/NotificationWrapper.module.css.js

@@ -0,0 +1,18 @@
+var css_248z = ".NotificationWrapper-module_wrapper__uK2xb {\n  position: fixed;\n  top: 24px;\n  left: 50%;\n  transform: translateX(-50%);\n\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  gap: 16px;\n  z-index: 1000;\n}\n\n.NotificationWrapper-module_item__45Lg0 {\n  will-change: transform, opacity;\n}\n\n.NotificationWrapper-module_flyDown__mntT4 {\n  animation: NotificationWrapper-module_flyDown__mntT4 300ms ease-in-out;\n}\n\n.NotificationWrapper-module_flyUp__a5Sa9 {\n  animation: NotificationWrapper-module_flyUp__a5Sa9 300ms ease-in-out;\n  animation-fill-mode: forwards;\n  pointer-events: none;\n}\n\n@keyframes NotificationWrapper-module_flyDown__mntT4 {\n  from {\n    transform: translateY(-100px);\n    opacity: 0;\n  }\n  to {\n    transform: translateY(0);\n    opacity: 1;\n  }\n}\n\n@keyframes NotificationWrapper-module_flyUp__a5Sa9 {\n  from {\n    transform: translateY(0);\n    opacity: 1;\n  }\n  to {\n    transform: translateY(-100px);\n    opacity: 0;\n  }\n}\n";
+var styles = {"wrapper":"NotificationWrapper-module_wrapper__uK2xb","item":"NotificationWrapper-module_item__45Lg0","flyDown":"NotificationWrapper-module_flyDown__mntT4","flyUp":"NotificationWrapper-module_flyUp__a5Sa9"};
+function styleInject(css, options) {
+    if (typeof document === 'undefined') return;
+    const head = document.head || document.getElementsByTagName('head')[0];
+    const style = document.createElement('style');
+    style.type = 'text/css';
+    if (style.styleSheet) {
+      style.styleSheet.cssText = css;
+    } else {
+      style.appendChild(document.createTextNode(css));
+    }
+    head.appendChild(style);
+  }
+  styleInject(css_248z);
+
+export { styles as default };
+//# sourceMappingURL=NotificationWrapper.module.css.js.map

package/dist/esm/components/Notification/Wrapper/NotificationWrapper.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationWrapper.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;"}

package/dist/esm/components/Notification/Wrapper/index.js

@@ -0,0 +1,140 @@
+import { jsx } from 'react/jsx-runtime';
+import { useState, useRef, useCallback, useEffect, useLayoutEffect } from 'react';
+import { NotificationItem } from '../Item/index.js';
+import styles from './NotificationWrapper.module.css.js';
+
+const AUTO_CLOSE_DELAY_MS = 7000;
+const FLIP_DURATION_MS = 300;
+const FLIP_EASING = "ease-in-out";
+const NotificationWrapper = ({ items, removeNotificationData, }) => {
+    const [closingTopId, setClosingTopId] = useState(null);
+    const topNotificationId = items[0]?.id ?? null;
+    const topNotificationIdRef = useRef(null);
+    const closeTimersRef = useRef(new Map());
+    const itemRefs = useRef(new Map());
+    const prevTopByIdRef = useRef(new Map());
+    const prevIdsRef = useRef(new Set());
+    const clearCloseTimer = useCallback((id) => {
+        const timer = closeTimersRef.current.get(id);
+        if (!timer) {
+            return;
+        }
+        clearTimeout(timer);
+        closeTimersRef.current.delete(id);
+    }, []);
+    const removeNotification = useCallback((id) => {
+        clearCloseTimer(id);
+        removeNotificationData(id);
+    }, [clearCloseTimer, removeNotificationData]);
+    const startTopCloseAnimation = useCallback((id) => {
+        clearCloseTimer(id);
+        setClosingTopId((current) => (current === id ? current : id));
+    }, [clearCloseTimer]);
+    const closeNotification = useCallback((id) => {
+        if (id !== topNotificationId) {
+            removeNotification(id);
+            return;
+        }
+        startTopCloseAnimation(id);
+    }, [topNotificationId, startTopCloseAnimation, removeNotification]);
+    const handleTopAnimationEnd = useCallback((event, id) => {
+        if (event.currentTarget !== event.target || closingTopId !== id) {
+            return;
+        }
+        removeNotification(id);
+        setClosingTopId(null);
+    }, [closingTopId, removeNotification]);
+    useEffect(() => {
+        topNotificationIdRef.current = topNotificationId;
+    }, [topNotificationId]);
+    useEffect(() => {
+        items.forEach((item) => {
+            if (closeTimersRef.current.has(item.id)) {
+                return;
+            }
+            const timer = setTimeout(() => {
+                if (topNotificationIdRef.current === item.id) {
+                    startTopCloseAnimation(item.id);
+                    return;
+                }
+                removeNotification(item.id);
+            }, AUTO_CLOSE_DELAY_MS);
+            closeTimersRef.current.set(item.id, timer);
+        });
+        const currentIds = new Set(items.map((item) => item.id));
+        closeTimersRef.current.forEach((timer, id) => {
+            if (currentIds.has(id)) {
+                return;
+            }
+            clearTimeout(timer);
+            closeTimersRef.current.delete(id);
+        });
+    }, [items, startTopCloseAnimation, removeNotification]);
+    useEffect(() => () => {
+        closeTimersRef.current.forEach((timer) => {
+            clearTimeout(timer);
+        });
+        closeTimersRef.current.clear();
+    }, []);
+    useLayoutEffect(() => {
+        const currentTopById = new Map();
+        const currentIds = new Set(items.map((item) => item.id));
+        items.forEach((item) => {
+            const element = itemRefs.current.get(item.id);
+            if (!element) {
+                return;
+            }
+            currentTopById.set(item.id, element.getBoundingClientRect().top);
+            const isNewItem = !prevIdsRef.current.has(item.id);
+            if (isNewItem) {
+                element.classList.add(styles.flyDown);
+                globalThis.setTimeout(() => {
+                    element.classList.remove(styles.flyDown);
+                }, FLIP_DURATION_MS);
+            }
+        });
+        if (items.length <= 1) {
+            prevTopByIdRef.current = currentTopById;
+            prevIdsRef.current = currentIds;
+            return;
+        }
+        items.forEach((item) => {
+            if (item.id === closingTopId) {
+                return;
+            }
+            const element = itemRefs.current.get(item.id);
+            const currentTop = currentTopById.get(item.id);
+            const previousTop = prevTopByIdRef.current.get(item.id);
+            if (!element || currentTop === undefined || previousTop === undefined) {
+                return;
+            }
+            const deltaY = previousTop - currentTop;
+            if (Math.abs(deltaY) <= 1) {
+                return;
+            }
+            element.animate([
+                { transform: `translateY(${deltaY}px)` },
+                { transform: "translateY(0)" },
+            ], { duration: FLIP_DURATION_MS, easing: FLIP_EASING });
+        });
+        prevTopByIdRef.current = currentTopById;
+        prevIdsRef.current = currentIds;
+    }, [items, closingTopId]);
+    if (items.length === 0) {
+        return null;
+    }
+    return (jsx("div", { className: styles.wrapper, "data-testid": "NotificationWrapper_LIST", children: items.map((notification) => (jsx("div", { className: `${styles.item} ${closingTopId === notification.id ? styles.flyUp : ""}`, onAnimationEnd: (event) => {
+                handleTopAnimationEnd(event, notification.id);
+            }, ref: (el) => {
+                if (el) {
+                    itemRefs.current.set(notification.id, el);
+                    return;
+                }
+                itemRefs.current.delete(notification.id);
+            }, "data-testid": `NotificationWrapper_ITEM_${notification.id}`, children: jsx(NotificationItem, { text: notification.text, type: notification.type, onClick: () => {
+                    closeNotification(notification.id);
+                } }) }, notification.id))) }));
+};
+
+export { NotificationWrapper };
+//# sourceMappingURL=index.js.map

package/dist/esm/components/Notification/Wrapper/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../src/components/Notification/Wrapper/index.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":"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"}

package/dist/esm/components/index.js

@@ -13,7 +13,8 @@ import { MsgBody } from './Messages/MsgBody/index.js';
 import { MsgComponentHeader } from './Messages/MsgComponentHeader/index.js';
 import { MsgSearch } from './Messages/MsgSearch/index.js';
 import { ViewToggle } from './Navigation/ViewToggle/index.js';
-import { NotificationComponent } from './NotificationComponent/index.js';
+import { NotificationItem } from './Notification/Item/index.js';
+import { NotificationWrapper } from './Notification/Wrapper/index.js';
 import { PresaleComponent } from './Presale/index.js';
 import { DocCard } from './Profile/DocCard/index.js';
 import { IconToggleItem } from './Profile/IconToggleItem/index.js';
@@ -50,7 +51,8 @@ const Components = {
     HelpInstruction,
     PresaleComponent,
     ServiceCardComponent,
-    NotificationComponent,
+    NotificationItem,
+    NotificationWrapper,
 };
 
 export { Components };

package/dist/esm/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/index.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BO,MAAM,UAAU,GAAG;IACxB,SAAS;IACT,IAAI;IACJ,OAAO;IACP,UAAU;IACV,aAAa;IACb,UAAU;IACV,QAAQ;IACR,aAAa;IACb,gBAAgB;IAChB,oBAAoB;IACpB,cAAc;IACd,cAAc;IACd,aAAa;IACb,OAAO;IACP,kBAAkB;IAClB,SAAS;IACT,iBAAiB;IACjB,oBAAoB;IACpB,oBAAoB;IACpB,WAAW;IACX,UAAU;IACV,eAAe;IACf,gBAAgB;IAChB,oBAAoB;IACpB,qBAAqB;;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/index.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BO,MAAM,UAAU,GAAG;IACxB,SAAS;IACT,IAAI;IACJ,OAAO;IACP,UAAU;IACV,aAAa;IACb,UAAU;IACV,QAAQ;IACR,aAAa;IACb,gBAAgB;IAChB,oBAAoB;IACpB,cAAc;IACd,cAAc;IACd,aAAa;IACb,OAAO;IACP,kBAAkB;IAClB,SAAS;IACT,iBAAiB;IACjB,oBAAoB;IACpB,oBAAoB;IACpB,WAAW;IACX,UAAU;IACV,eAAe;IACf,gBAAgB;IAChB,oBAAoB;IACpB,gBAAgB;IAChB,mBAAmB;;;;;"}

package/dist/types/components/{NotificationComponent → Notification/Item}/index.d.ts

@@ -2,7 +2,7 @@ type TNotificationType = "success" | "error" | "warning" | "info";
 interface INotificationComponentProps {
     text: string;
     type?: TNotificationType;
-    toggleNotification: (open: boolean) => void;
+    onClick?: () => void;
 }
 
 export type { INotificationComponentProps, TNotificationType };

package/dist/types/components/Notification/Wrapper/index.d.ts

@@ -0,0 +1,8 @@
+import { INotificationData } from '../../../interfaces/Notification.js';
+
+interface INotificationWrapperProps {
+    items: INotificationData[];
+    removeNotificationData: (id: string) => void;
+}
+
+export type { INotificationWrapperProps };

package/dist/types/constants/Notification.d.ts

@@ -0,0 +1,8 @@
+declare const NotificationTypeObj: {
+    readonly success: "success";
+    readonly error: "error";
+    readonly warning: "warning";
+    readonly info: "info";
+};
+
+export { NotificationTypeObj };

package/dist/types/index.d.ts

@@ -1,4 +1,5 @@
-import { INotificationComponentProps } from './components/NotificationComponent/index.js';
+import { INotificationWrapperProps } from './components/Notification/Wrapper/index.js';
+import { INotificationComponentProps } from './components/Notification/Item/index.js';
 import { IServiceCardComponentProps } from './components/ServiceCardComponent/index.js';
 import { IAccordionTitleProps } from './components/Presale/AccordionTitle/index.js';
 import { IServiceDetailsProps } from './components/Presale/ServiceDetails/index.js';
@@ -96,7 +97,8 @@ declare const SystemDesign: {
             AccordionTitle: ({ title }: IAccordionTitleProps) => react_jsx_runtime.JSX.Element;
         };
         ServiceCardComponent: ({ handleOrderService, badge, isNew, title, }: IServiceCardComponentProps) => react_jsx_runtime.JSX.Element;
-        NotificationComponent: ({ type, text, toggleNotification, }: INotificationComponentProps) => react_jsx_runtime.JSX.Element;
+        NotificationItem: ({ type, text, onClick, }: INotificationComponentProps) => react_jsx_runtime.JSX.Element;
+        NotificationWrapper: ({ items, removeNotificationData, }: INotificationWrapperProps) => react_jsx_runtime.JSX.Element | null;
     };
 };
 

package/dist/types/interfaces/Notification.d.ts

@@ -0,0 +1,11 @@
+import { NotificationTypeObj } from '../constants/Notification.js';
+
+type TNotificationType = keyof typeof NotificationTypeObj;
+interface INotificationData {
+    id: string;
+    isOpen: boolean;
+    text: string;
+    type: TNotificationType;
+}
+
+export type { INotificationData, TNotificationType };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@egov3/system-design",
-  "version": "1.3.112",
+  "version": "1.3.119",
   "type": "module",
   "main": "dist/cjs/index.js",
   "types": "dist/types/index.d.ts",

package/dist/cjs/components/NotificationComponent/NotificationComponent.module.css.js

@@ -1,22 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var css_248z = ".NotificationComponent-module_snackbar__KQKHo {\n  position: fixed;\n  top: 24px;\n  left: 50%;\n  transform: translateX(-50%);\n  padding: 16px 20px;\n  border-radius: 12px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: 12px;\n  z-index: 1000;\n  box-shadow: 0px 12px 32px 0px rgba(128, 130, 136, 0.12);\n}\n\n.NotificationComponent-module_snackbar__KQKHo .NotificationComponent-module_text__YNCyD {\n  color: var(--text-white-nonconvert-color);\n}\n\n.NotificationComponent-module_success__CSgbV {\n  background-color: var(--icon-success);\n}\n\n.NotificationComponent-module_error__xiTCd {\n  background-color: var(--icon-error-color);\n}\n\n.NotificationComponent-module_info__45pPe {\n  background-color: var(--icon-accent-color);\n}\n\n.NotificationComponent-module_warning__wNp3m {\n  background-color: var(--icon-warning-color);\n}\n";
-var styles = {"snackbar":"NotificationComponent-module_snackbar__KQKHo","text":"NotificationComponent-module_text__YNCyD","success":"NotificationComponent-module_success__CSgbV","error":"NotificationComponent-module_error__xiTCd","info":"NotificationComponent-module_info__45pPe","warning":"NotificationComponent-module_warning__wNp3m"};
-function styleInject(css, options) {
-    if (typeof document === 'undefined') return;
-    const head = document.head || document.getElementsByTagName('head')[0];
-    const style = document.createElement('style');
-    style.type = 'text/css';
-    if (style.styleSheet) {
-      style.styleSheet.cssText = css;
-    } else {
-      style.appendChild(document.createTextNode(css));
-    }
-    head.appendChild(style);
-  }
-  styleInject(css_248z);
-
-exports.default = styles;
-//# sourceMappingURL=NotificationComponent.module.css.js.map

package/dist/cjs/components/NotificationComponent/index.js

@@ -1,29 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var graphics = require('@egov3/graphics');
-var React = require('react');
-var index = require('../../baseComponents/index.js');
-var joinClasses = require('../../utils/joinClasses.js');
-var toPascalCase = require('../../utils/string/toPascalCase.js');
-var NotificationComponent_module = require('./NotificationComponent.module.css.js');
-
-const notificationIconTypes = {
-    success: graphics.Icons.Basic.Check,
-    error: graphics.Icons.General.Clear,
-    warning: graphics.Icons.General.WarningFilled,
-    info: graphics.Icons.General.InfoFilled,
-};
-const NotificationComponent = ({ type = "info", text, toggleNotification, }) => {
-    const Icon = notificationIconTypes[type];
-    React.useEffect(() => {
-        const timer = setTimeout(() => {
-            toggleNotification(false);
-        }, 5000);
-        return () => clearTimeout(timer);
-    }, [toggleNotification]);
-    return (jsxRuntime.jsxs("div", { className: joinClasses.joinClasses(NotificationComponent_module.default.snackbar, NotificationComponent_module.default[type]), "data-testid": "NotificationComponent_SNACKBAR", children: [jsxRuntime.jsx(Icon, { fill: "var(--icon-white-nonconvert-color)", "data-testid": `NotificationComponentIcon_${toPascalCase.toPascalCase(type)}` }), jsxRuntime.jsx(index.BaseComponents.Typography, { "aria-label": text, className: NotificationComponent_module.default.text, "data-testid": "NotificationComponent_TEXT", fontClass: "body2Regular", tag: "span", children: text })] }));
-};
-
-exports.NotificationComponent = NotificationComponent;
-//# sourceMappingURL=index.js.map

package/dist/cjs/components/NotificationComponent/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/NotificationComponent/index.tsx"],"sourcesContent":[null],"names":["Icons","useEffect","_jsxs","joinClasses","styles","_jsx","toPascalCase","BaseComponents"],"mappings":";;;;;;;;;;AASA,MAAM,qBAAqB,GAAG;AAC5B,IAAA,OAAO,EAAEA,cAAK,CAAC,KAAK,CAAC,KAAK;AAC1B,IAAA,KAAK,EAAEA,cAAK,CAAC,OAAO,CAAC,KAAK;AAC1B,IAAA,OAAO,EAAEA,cAAK,CAAC,OAAO,CAAC,aAAa;AACpC,IAAA,IAAI,EAAEA,cAAK,CAAC,OAAO,CAAC,UAAU;CAI/B;AAQM,MAAM,qBAAqB,GAAG,CAAC,EACpC,IAAI,GAAG,MAAM,EACb,IAAI,EACJ,kBAAkB,GACU,KAAI;AAChC,IAAA,MAAM,IAAI,GAAG,qBAAqB,CAAC,IAAI,CAAC;IAExCC,eAAS,CAAC,MAAK;AACb,QAAA,MAAM,KAAK,GAAG,UAAU,CAAC,MAAK;YAC5B,kBAAkB,CAAC,KAAK,CAAC;QAC3B,CAAC,EAAE,IAAI,CAAC;AAER,QAAA,OAAO,MAAM,YAAY,CAAC,KAAK,CAAC;AAClC,IAAA,CAAC,EAAE,CAAC,kBAAkB,CAAC,CAAC;AAExB,IAAA,QACEC,eAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAEC,uBAAW,CAACC,oCAAM,CAAC,QAAQ,EAAEA,oCAAM,CAAC,IAAI,CAAC,CAAC,EAAA,aAAA,EACzC,gCAAgC,EAAA,QAAA,EAAA,CAE5CC,cAAA,CAAC,IAAI,EAAA,EACH,IAAI,EAAC,oCAAoC,EAAA,aAAA,EAC5B,CAAA,0BAAA,EAA6BC,yBAAY,CAAC,IAAI,CAAC,CAAA,CAAE,EAAA,CAC9D,EACFD,cAAA,CAACE,oBAAc,CAAC,UAAU,EAAA,EAAA,YAAA,EACZ,IAAI,EAChB,SAAS,EAAEH,oCAAM,CAAC,IAAI,EAAA,aAAA,EACV,4BAA4B,EACxC,SAAS,EAAC,cAAc,EACxB,GAAG,EAAC,MAAM,EAAA,QAAA,EAET,IAAI,EAAA,CACqB,CAAA,EAAA,CACxB;AAEV;;;;"}

package/dist/esm/components/NotificationComponent/NotificationComponent.module.css.js

@@ -1,18 +0,0 @@
-var css_248z = ".NotificationComponent-module_snackbar__KQKHo {\n  position: fixed;\n  top: 24px;\n  left: 50%;\n  transform: translateX(-50%);\n  padding: 16px 20px;\n  border-radius: 12px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: 12px;\n  z-index: 1000;\n  box-shadow: 0px 12px 32px 0px rgba(128, 130, 136, 0.12);\n}\n\n.NotificationComponent-module_snackbar__KQKHo .NotificationComponent-module_text__YNCyD {\n  color: var(--text-white-nonconvert-color);\n}\n\n.NotificationComponent-module_success__CSgbV {\n  background-color: var(--icon-success);\n}\n\n.NotificationComponent-module_error__xiTCd {\n  background-color: var(--icon-error-color);\n}\n\n.NotificationComponent-module_info__45pPe {\n  background-color: var(--icon-accent-color);\n}\n\n.NotificationComponent-module_warning__wNp3m {\n  background-color: var(--icon-warning-color);\n}\n";
-var styles = {"snackbar":"NotificationComponent-module_snackbar__KQKHo","text":"NotificationComponent-module_text__YNCyD","success":"NotificationComponent-module_success__CSgbV","error":"NotificationComponent-module_error__xiTCd","info":"NotificationComponent-module_info__45pPe","warning":"NotificationComponent-module_warning__wNp3m"};
-function styleInject(css, options) {
-    if (typeof document === 'undefined') return;
-    const head = document.head || document.getElementsByTagName('head')[0];
-    const style = document.createElement('style');
-    style.type = 'text/css';
-    if (style.styleSheet) {
-      style.styleSheet.cssText = css;
-    } else {
-      style.appendChild(document.createTextNode(css));
-    }
-    head.appendChild(style);
-  }
-  styleInject(css_248z);
-
-export { styles as default };
-//# sourceMappingURL=NotificationComponent.module.css.js.map

package/dist/esm/components/NotificationComponent/index.js

@@ -1,27 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { Icons } from '@egov3/graphics';
-import { useEffect } from 'react';
-import { BaseComponents } from '../../baseComponents/index.js';
-import { joinClasses } from '../../utils/joinClasses.js';
-import { toPascalCase } from '../../utils/string/toPascalCase.js';
-import styles from './NotificationComponent.module.css.js';
-
-const notificationIconTypes = {
-    success: Icons.Basic.Check,
-    error: Icons.General.Clear,
-    warning: Icons.General.WarningFilled,
-    info: Icons.General.InfoFilled,
-};
-const NotificationComponent = ({ type = "info", text, toggleNotification, }) => {
-    const Icon = notificationIconTypes[type];
-    useEffect(() => {
-        const timer = setTimeout(() => {
-            toggleNotification(false);
-        }, 5000);
-        return () => clearTimeout(timer);
-    }, [toggleNotification]);
-    return (jsxs("div", { className: joinClasses(styles.snackbar, styles[type]), "data-testid": "NotificationComponent_SNACKBAR", children: [jsx(Icon, { fill: "var(--icon-white-nonconvert-color)", "data-testid": `NotificationComponentIcon_${toPascalCase(type)}` }), jsx(BaseComponents.Typography, { "aria-label": text, className: styles.text, "data-testid": "NotificationComponent_TEXT", fontClass: "body2Regular", tag: "span", children: text })] }));
-};
-
-export { NotificationComponent };
-//# sourceMappingURL=index.js.map

package/dist/esm/components/NotificationComponent/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/NotificationComponent/index.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;AASA,MAAM,qBAAqB,GAAG;AAC5B,IAAA,OAAO,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK;AAC1B,IAAA,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;AAC1B,IAAA,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,aAAa;AACpC,IAAA,IAAI,EAAE,KAAK,CAAC,OAAO,CAAC,UAAU;CAI/B;AAQM,MAAM,qBAAqB,GAAG,CAAC,EACpC,IAAI,GAAG,MAAM,EACb,IAAI,EACJ,kBAAkB,GACU,KAAI;AAChC,IAAA,MAAM,IAAI,GAAG,qBAAqB,CAAC,IAAI,CAAC;IAExC,SAAS,CAAC,MAAK;AACb,QAAA,MAAM,KAAK,GAAG,UAAU,CAAC,MAAK;YAC5B,kBAAkB,CAAC,KAAK,CAAC;QAC3B,CAAC,EAAE,IAAI,CAAC;AAER,QAAA,OAAO,MAAM,YAAY,CAAC,KAAK,CAAC;AAClC,IAAA,CAAC,EAAE,CAAC,kBAAkB,CAAC,CAAC;AAExB,IAAA,QACEA,IAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,WAAW,CAAC,MAAM,CAAC,QAAQ,EAAE,MAAM,CAAC,IAAI,CAAC,CAAC,EAAA,aAAA,EACzC,gCAAgC,EAAA,QAAA,EAAA,CAE5CC,GAAA,CAAC,IAAI,EAAA,EACH,IAAI,EAAC,oCAAoC,EAAA,aAAA,EAC5B,CAAA,0BAAA,EAA6B,YAAY,CAAC,IAAI,CAAC,CAAA,CAAE,EAAA,CAC9D,EACFA,GAAA,CAAC,cAAc,CAAC,UAAU,EAAA,EAAA,YAAA,EACZ,IAAI,EAChB,SAAS,EAAE,MAAM,CAAC,IAAI,EAAA,aAAA,EACV,4BAA4B,EACxC,SAAS,EAAC,cAAc,EACxB,GAAG,EAAC,MAAM,EAAA,QAAA,EAET,IAAI,EAAA,CACqB,CAAA,EAAA,CACxB;AAEV;;;;"}