@stack-spot/portal-components 2.10.4 → 2.11.1

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+## [2.11.1](https://github.com/stack-spot/portal-commons/compare/portal-components@v2.11.0...portal-components@v2.11.1) (2025-01-03)
+
+
+### Bug Fixes
+
+* banner style adjustments" ([c2263b4](https://github.com/stack-spot/portal-commons/commit/c2263b4c3befacdedb592afba688d8f31d48c524))
+* Code Cleanup & adjustments ([2d0b4a8](https://github.com/stack-spot/portal-commons/commit/2d0b4a80c2eb9ddad7b91fabb4e5e39707f26239))
+* lyout update libs banner ([#631](https://github.com/stack-spot/portal-commons/issues/631)) ([6d4ee46](https://github.com/stack-spot/portal-commons/commit/6d4ee46878395607d8cbf80d58c38a22681ece74))
+
+## [2.11.0](https://github.com/stack-spot/portal-commons/compare/portal-components@v2.10.4...portal-components@v2.11.0) (2024-12-27)
+
+
+### Features
+
+* update libs banner ([#604](https://github.com/stack-spot/portal-commons/issues/604)) ([f2bc440](https://github.com/stack-spot/portal-commons/commit/f2bc440db6c65461a2b1228d0efc08ed3d883d67))
+
 ## [2.10.4](https://github.com/stack-spot/portal-commons/compare/portal-components@v2.10.3...portal-components@v2.10.4) (2024-12-12)
 
 

package/dist/components/BannerWarning.d.ts

@@ -1,10 +1,10 @@
 /**
- * A styled and non-dismissible alert box for showing important warnings for the user.
+ * A styled and dismissible alert box for showing important warnings for the user.
  *
  * This renders a yellow box with an exclamation icon. The content passed as parameter is placed on the right of the icon.
  * @param props an object containing the content (children) to show inside the alert box.
  */
 export declare const BannerWarning: ({ children }: {
     children: React.ReactNode;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element | null;
 //# sourceMappingURL=BannerWarning.d.ts.map

package/dist/components/BannerWarning.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BannerWarning.d.ts","sourceRoot":"","sources":["../../src/components/BannerWarning.tsx"],"names":[],"mappings":"AAIA;;;;;GAKG;AACH,eAAO,MAAM,aAAa,iBAAkB;IAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;CAAE,4CAgBxE,CAAA"}
+{"version":3,"file":"BannerWarning.d.ts","sourceRoot":"","sources":["../../src/components/BannerWarning.tsx"],"names":[],"mappings":"AAOA;;;;;GAKG;AACH,eAAO,MAAM,aAAa,iBAAkB;IAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;CAAE,mDA2ExE,CAAA"}

package/dist/components/BannerWarning.js

@@ -1,12 +1,47 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Flex, IconBox, Text } from '@citric/core';
-import { ExclamationTriangle } from '@citric/icons';
+import { Button, Flex, IconBox, Text } from '@citric/core';
+import { ExclamationTriangle, TimesCircleFill } from '@citric/icons';
 import { Alert } from '@citric/ui';
+import { useState } from 'react';
+import { getCookie, setCookie } from '../utils/cookie.js';
 /**
- * A styled and non-dismissible alert box for showing important warnings for the user.
+ * A styled and dismissible alert box for showing important warnings for the user.
  *
  * This renders a yellow box with an exclamation icon. The content passed as parameter is placed on the right of the icon.
  * @param props an object containing the content (children) to show inside the alert box.
  */
-export const BannerWarning = ({ children }) => (_jsx(Flex, { sx: { position: 'fixed', top: 0, zIndex: '999', w: 12, left: 0 }, children: _jsxs(Alert, { colorScheme: "warning", sx: { p: 2, w: 12, justifyContent: 'center', height: ['60px', '100px'] }, children: [_jsx(IconBox, { size: "md", colorIcon: "light.500", sx: { display: ['block', 'none'] }, children: _jsx(ExclamationTriangle, {}) }), _jsx(Flex, { sx: { py: [5, 3] }, children: _jsx(Text, { sx: { fontSize: ['16px', '14px'], whiteSpace: 'pre-line' }, colorScheme: "warning.contrastText", children: children }) }), _jsx(IconBox, { size: "md", colorIcon: "light.500", sx: { display: ['block', 'none'] }, children: _jsx(ExclamationTriangle, {}) })] }) }));
+export const BannerWarning = ({ children }) => {
+    const bannerKey = 'bannerClosed';
+    const [isVisible, setIsVisible] = useState(() => {
+        if (typeof window !== 'undefined') {
+            const isBannerClosed = getCookie(bannerKey) === 'true';
+            return !isBannerClosed;
+        }
+        return false;
+    });
+    const handleClose = () => {
+        setCookie(bannerKey, 'true');
+        setIsVisible(false);
+    };
+    if (!isVisible) {
+        return null;
+    }
+    return (_jsx(Flex, { sx: { zIndex: '1', w: '12', mb: 7 }, children: _jsxs(Alert, { colorScheme: "warning", sx: {
+                position: 'relative',
+                px: 3,
+                py: 1,
+                alignItems: 'center',
+                display: 'flex',
+                justifyContent: 'space-between',
+                height: 'auto',
+            }, children: [_jsxs(Flex, { sx: {
+                        alignItems: 'center',
+                        flexWrap: 'nowrap',
+                    }, children: [_jsx(IconBox, { size: "sm", colorIcon: "light.500", children: _jsx(ExclamationTriangle, {}) }), _jsx(Text, { sx: {
+                                ml: 5,
+                            }, appearance: "body2", colorScheme: "warning.contrastText", children: children })] }), _jsx(Button, { appearance: 'text', onClick: handleClose, sx: {
+                        p: 0,
+                        ml: 2,
+                    }, children: _jsx(IconBox, { size: "lg", colorIcon: "light.500", children: _jsx(TimesCircleFill, {}) }) })] }) }));
+};
 //# sourceMappingURL=BannerWarning.js.map

package/dist/components/BannerWarning.js.map

@@ -1 +1 @@
-{"version":3,"file":"BannerWarning.js","sourceRoot":"","sources":["../../src/components/BannerWarning.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAClD,OAAO,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAA;AACnD,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAElC;;;;;GAKG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAAE,QAAQ,EAAiC,EAAE,EAAE,CAAC,CAC5E,KAAC,IAAI,IAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,YACpE,MAAC,KAAK,IAAC,WAAW,EAAC,SAAS,EAAC,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,cAAc,EAAE,QAAQ,EAAE,MAAM,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,aACnG,KAAC,OAAO,IAAC,IAAI,EAAC,IAAI,EAAC,SAAS,EAAC,WAAW,EAAC,EAAE,EAAE,EAAE,OAAO,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,EAAE,YACzE,KAAC,mBAAmB,KAAG,GACf,EACV,KAAC,IAAI,IAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,YACtB,KAAC,IAAI,IAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,UAAU,EAAE,UAAU,EAAE,EAAE,WAAW,EAAC,sBAAsB,YACjG,QAAQ,GACJ,GACF,EACP,KAAC,OAAO,IAAC,IAAI,EAAC,IAAI,EAAC,SAAS,EAAC,WAAW,EAAC,EAAE,EAAE,EAAE,OAAO,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,EAAE,YACzE,KAAC,mBAAmB,KAAG,GACf,IACJ,GACH,CACR,CAAA"}
+{"version":3,"file":"BannerWarning.js","sourceRoot":"","sources":["../../src/components/BannerWarning.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAC1D,OAAO,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AACpE,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAChC,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAEtD;;;;;GAKG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAAE,QAAQ,EAAiC,EAAE,EAAE;IAC3E,MAAM,SAAS,GAAG,cAAc,CAAA;IAEhC,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE;QAC9C,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;YAClC,MAAM,cAAc,GAAG,SAAS,CAAC,SAAS,CAAC,KAAK,MAAM,CAAA;YACtD,OAAO,CAAC,cAAc,CAAA;QACxB,CAAC;QACD,OAAO,KAAK,CAAA;IACd,CAAC,CAAC,CAAA;IAEF,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,SAAS,CAAC,SAAS,EAAE,MAAM,CAAC,CAAA;QAC5B,YAAY,CAAC,KAAK,CAAC,CAAA;IACrB,CAAC,CAAA;IAED,IAAI,CAAC,SAAS,EAAE,CAAC;QACf,OAAO,IAAI,CAAA;IACb,CAAC;IAED,OAAO,CACL,KAAC,IAAI,IAAC,EAAE,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,EAAE,YACvC,MAAC,KAAK,IACJ,WAAW,EAAC,SAAS,EACrB,EAAE,EAAE;gBACF,QAAQ,EAAE,UAAU;gBACpB,EAAE,EAAE,CAAC;gBACL,EAAE,EAAE,CAAC;gBACL,UAAU,EAAE,QAAQ;gBACpB,OAAO,EAAE,MAAM;gBACf,cAAc,EAAE,eAAe;gBAC/B,MAAM,EAAE,MAAM;aACf,aAED,MAAC,IAAI,IACH,EAAE,EAAE;wBACF,UAAU,EAAE,QAAQ;wBACpB,QAAQ,EAAE,QAAQ;qBACnB,aAED,KAAC,OAAO,IACN,IAAI,EAAC,IAAI,EACT,SAAS,EAAC,WAAW,YAErB,KAAC,mBAAmB,KAAG,GACf,EACV,KAAC,IAAI,IACH,EAAE,EAAE;gCACF,EAAE,EAAC,CAAC;6BACL,EACD,UAAU,EAAC,OAAO,EAClB,WAAW,EAAC,sBAAsB,YAEjC,QAAQ,GACJ,IACF,EAEP,KAAC,MAAM,IACL,UAAU,EAAE,MAAM,EAClB,OAAO,EAAE,WAAW,EACpB,EAAE,EAAE;wBACF,CAAC,EAAE,CAAC;wBACJ,EAAE,EAAE,CAAC;qBACN,YAED,KAAC,OAAO,IACN,IAAI,EAAC,IAAI,EACT,SAAS,EAAC,WAAW,YAErB,KAAC,eAAe,KAAG,GACX,GACH,IACH,GACH,CACR,CAAA;AACH,CAAC,CAAA"}

package/dist/components/notification/types.d.ts

@@ -19,6 +19,7 @@ export type GetTenantNotificationsResponse = {
     last_until?: string;
     trigger_at: string;
     created_at?: string;
+    isBanner?: boolean;
 };
 export type ResponseModelGetTenantNotificationsResponse = {
     items: GetTenantNotificationsResponse[];

package/dist/components/notification/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/notification/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,gBAAgB,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,CAAA;AAExD,MAAM,MAAM,mBAAmB,GAAG,SAAS,GAAG,QAAQ,GAAG,WAAW,GAAG,IAAI,CAAA;AAI3E,MAAM,MAAM,2BAA2B,GAAG;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,8BAA8B,GAAG;IAC3C,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE;QACP,CAAC,GAAG,EAAE,MAAM,GAAG,2BAA2B,CAAC;KAC5C,CAAC;IACF,eAAe,EAAE,SAAS,GAAG,YAAY,GAAG,UAAU,GAAG,UAAU,CAAC;IACpE,OAAO,EAAE,SAAS,GAAG,QAAQ,GAAG,WAAW,GAAG,IAAI,CAAC;IACnD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,CAAC;IACvC,cAAc,EAAE,MAAM,CAAC;IACvB,UAAU,EAAE,OAAO,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAA;AAED,MAAM,MAAM,2CAA2C,GAAG;IACxD,KAAK,EAAE,8BAA8B,EAAE,CAAC;IACxC,KAAK,EAAE,MAAM,CAAC;CACf,CAAA;AAED,MAAM,MAAM,uBAAuB,GAAG,gBAAgB,GAAG,UAAU,CAAA;AAEnE,MAAM,WAAW,mBAAmB;IAClC,QAAQ,CAAC,EAAE,aAAa,GAAG,SAAS,CAAC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,GAAG,CAAC;IACX,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,qBAAqB;IACpC,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,EAAE,OAAO,CAAC;CACpB;AAID,oBAAY,UAAU;IACpB,MAAM,WAAW;CAClB;AAED,MAAM,WAAW,oBAAoB;IACnC;;OAEG;IACH,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,OAAO,EAAE,OAAO,CAAC;IACjB;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,IAAI,CAAC;CAChD"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/notification/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,gBAAgB,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,CAAA;AAExD,MAAM,MAAM,mBAAmB,GAAG,SAAS,GAAG,QAAQ,GAAG,WAAW,GAAG,IAAI,CAAA;AAI3E,MAAM,MAAM,2BAA2B,GAAG;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,8BAA8B,GAAG;IAC3C,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE;QACP,CAAC,GAAG,EAAE,MAAM,GAAG,2BAA2B,CAAC;KAC5C,CAAC;IACF,eAAe,EAAE,SAAS,GAAG,YAAY,GAAG,UAAU,GAAG,UAAU,CAAC;IACpE,OAAO,EAAE,SAAS,GAAG,QAAQ,GAAG,WAAW,GAAG,IAAI,CAAC;IACnD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,CAAC;IACvC,cAAc,EAAE,MAAM,CAAC;IACvB,UAAU,EAAE,OAAO,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAA;AAED,MAAM,MAAM,2CAA2C,GAAG;IACxD,KAAK,EAAE,8BAA8B,EAAE,CAAC;IACxC,KAAK,EAAE,MAAM,CAAC;CACf,CAAA;AAED,MAAM,MAAM,uBAAuB,GAAG,gBAAgB,GAAG,UAAU,CAAA;AAEnE,MAAM,WAAW,mBAAmB;IAClC,QAAQ,CAAC,EAAE,aAAa,GAAG,SAAS,CAAC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,GAAG,CAAC;IACX,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,qBAAqB;IACpC,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,EAAE,OAAO,CAAC;CACpB;AAID,oBAAY,UAAU;IACpB,MAAM,WAAW;CAClB;AAED,MAAM,WAAW,oBAAoB;IACnC;;OAEG;IACH,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,OAAO,EAAE,OAAO,CAAC;IACjB;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,IAAI,CAAC;CAChD"}

package/dist/components/notification/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/notification/types.ts"],"names":[],"mappings":"AAiDA,iIAAiI;AACjI,gDAAgD;AAChD,MAAM,CAAN,IAAY,UAEX;AAFD,WAAY,UAAU;IACpB,+BAAiB,CAAA;AACnB,CAAC,EAFW,UAAU,KAAV,UAAU,QAErB"}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/notification/types.ts"],"names":[],"mappings":"AAkDA,iIAAiI;AACjI,gDAAgD;AAChD,MAAM,CAAN,IAAY,UAEX;AAFD,WAAY,UAAU;IACpB,+BAAiB,CAAA;AACnB,CAAC,EAFW,UAAU,KAAV,UAAU,QAErB"}

package/dist/context/notification/types.d.ts

@@ -7,9 +7,11 @@ export interface LoadNotificationsFilters {
     search?: string;
     context?: NotificationContext;
     size?: number;
+    isBanner?: boolean;
 }
 export interface LoadNotificationsOptions extends LoadNotificationsFilters {
     page: number;
+    isBanner?: boolean;
 }
 export type LazyNotificationListener = (notifications: GetTenantNotificationsResponse[], hasMore: boolean) => void;
 export interface NotificationConfig {

package/dist/context/notification/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/context/notification/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,8BAA8B,EAAE,2CAA2C,EAAE,MAAM,qBAAqB,CAAA;AAEjH,MAAM,MAAM,oBAAoB,GAAG,MAAM,GAAG,QAAQ,GAAG,KAAK,CAAA;AAE5D,MAAM,MAAM,mBAAmB,GAAG,SAAS,GAAG,QAAQ,GAAG,WAAW,CAAA;AAEpE,MAAM,WAAW,wBAAwB;IACvC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,oBAAoB,CAAC;IACnC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,mBAAmB,CAAC;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,wBAAyB,SAAQ,wBAAwB;IACxE,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,MAAM,wBAAwB,GAAG,CAAC,aAAa,EAAE,8BAA8B,EAAE,EAAE,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;AAElH,MAAM,WAAW,kBAAkB;IACjC;;;;OAIG;IACH,IAAI,CAAC,OAAO,EAAE,wBAAwB,GAAG,OAAO,CAAC,2CAA2C,CAAC,CAAC;IAC9F;;;;OAIG;IACH,gCAAgC,CAAC,IAAI,CAAC,EAAE,IAAI,GAAG,OAAO,CAAC,OAAO,CAAC,CAAC;IAChE;;;OAGG;IACH,eAAe,CAAC,EAAE,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC3C;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACtC;AAED,MAAM,MAAM,0BAA0B,GAAG,CAAC,qBAAqB,EAAE,OAAO,KAAK,IAAI,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/context/notification/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,8BAA8B,EAAE,2CAA2C,EAAE,MAAM,qBAAqB,CAAA;AAEjH,MAAM,MAAM,oBAAoB,GAAG,MAAM,GAAG,QAAQ,GAAG,KAAK,CAAA;AAE5D,MAAM,MAAM,mBAAmB,GAAG,SAAS,GAAG,QAAQ,GAAG,WAAW,CAAA;AAEpE,MAAM,WAAW,wBAAwB;IACvC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,oBAAoB,CAAC;IACnC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,mBAAmB,CAAC;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,wBAAyB,SAAQ,wBAAwB;IACxE,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,MAAM,wBAAwB,GAAG,CAAC,aAAa,EAAE,8BAA8B,EAAE,EAAE,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;AAElH,MAAM,WAAW,kBAAkB;IACjC;;;;OAIG;IACH,IAAI,CAAC,OAAO,EAAE,wBAAwB,GAAG,OAAO,CAAC,2CAA2C,CAAC,CAAC;IAC9F;;;;OAIG;IACH,gCAAgC,CAAC,IAAI,CAAC,EAAE,IAAI,GAAG,OAAO,CAAC,OAAO,CAAC,CAAC;IAChE;;;OAGG;IACH,eAAe,CAAC,EAAE,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC3C;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACtC;AAED,MAAM,MAAM,0BAA0B,GAAG,CAAC,qBAAqB,EAAE,OAAO,KAAK,IAAI,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stack-spot/portal-components",
-  "version": "2.10.4",
+  "version": "2.11.1",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/components/BannerWarning.tsx

@@ -1,27 +1,89 @@
-import { Flex, IconBox, Text } from '@citric/core'
-import { ExclamationTriangle } from '@citric/icons'
+
+import { Button, Flex, IconBox, Text } from '@citric/core'
+import { ExclamationTriangle, TimesCircleFill } from '@citric/icons'
 import { Alert } from '@citric/ui'
+import { useState } from 'react'
+import { getCookie, setCookie } from '../utils/cookie'
 
 /**
- * A styled and non-dismissible alert box for showing important warnings for the user.
- * 
- * This renders a yellow box with an exclamation icon. The content passed as parameter is placed on the right of the icon. 
+ * A styled and dismissible alert box for showing important warnings for the user.
+ *
+ * This renders a yellow box with an exclamation icon. The content passed as parameter is placed on the right of the icon.
  * @param props an object containing the content (children) to show inside the alert box.
  */
-export const BannerWarning = ({ children }: { children: React.ReactNode }) => (
-  <Flex sx={{ position: 'fixed', top: 0, zIndex: '999', w: 12, left: 0 }}>
-    <Alert colorScheme="warning" sx={{ p: 2, w: 12, justifyContent: 'center', height: ['60px', '100px'] }}>
-      <IconBox size="md" colorIcon="light.500" sx={{ display: ['block', 'none'] }}>
-        <ExclamationTriangle />
-      </IconBox>
-      <Flex sx={{ py: [5, 3] }}>
-        <Text sx={{ fontSize: ['16px', '14px'], whiteSpace: 'pre-line' }} colorScheme="warning.contrastText">
-          {children}
-        </Text>
-      </Flex>
-      <IconBox size="md" colorIcon="light.500" sx={{ display: ['block', 'none'] }}>
-        <ExclamationTriangle />
-      </IconBox>
-    </Alert>
-  </Flex>
-)
+export const BannerWarning = ({ children }: { children: React.ReactNode }) => {
+  const bannerKey = 'bannerClosed'
+
+  const [isVisible, setIsVisible] = useState(() => {
+    if (typeof window !== 'undefined') {
+      const isBannerClosed = getCookie(bannerKey) === 'true'
+      return !isBannerClosed
+    }
+    return false
+  })
+
+  const handleClose = () => {
+    setCookie(bannerKey, 'true')
+    setIsVisible(false)
+  }
+
+  if (!isVisible) {
+    return null
+  }
+
+  return (
+    <Flex sx={{ zIndex: '1', w: '12', mb: 7 }}>
+      <Alert
+        colorScheme="warning"
+        sx={{
+          position: 'relative',
+          px: 3,
+          py: 1,
+          alignItems: 'center',
+          display: 'flex',
+          justifyContent: 'space-between', 
+          height: 'auto',
+        }}
+      >
+        <Flex
+          sx={{
+            alignItems: 'center', 
+            flexWrap: 'nowrap',  
+          }}
+        >
+          <IconBox
+            size="sm"
+            colorIcon="light.500"
+          >
+            <ExclamationTriangle />
+          </IconBox>
+          <Text
+            sx={{
+              ml:5,
+            }}
+            appearance="body2"
+            colorScheme="warning.contrastText"
+          >
+            {children}
+          </Text>
+        </Flex>
+  
+        <Button
+          appearance={'text'}
+          onClick={handleClose}
+          sx={{
+            p: 0,
+            ml: 2,
+          }}
+        >
+          <IconBox
+            size="lg"
+            colorIcon="light.500"
+          >
+            <TimesCircleFill />
+          </IconBox>
+        </Button>
+      </Alert>
+    </Flex>
+  )
+}

package/src/components/notification/types.ts

@@ -24,6 +24,7 @@ export type GetTenantNotificationsResponse = {
   last_until?: string,
   trigger_at: string,
   created_at?: string,
+  isBanner?: boolean,
 }
 
 export type ResponseModelGetTenantNotificationsResponse = {

package/src/context/notification/types.ts

@@ -10,10 +10,12 @@ export interface LoadNotificationsFilters {
   search?: string,
   context?: NotificationContext,
   size?: number,
+  isBanner?: boolean,
 }
 
 export interface LoadNotificationsOptions extends LoadNotificationsFilters {
   page: number,
+  isBanner?: boolean,
 }
 
 export type LazyNotificationListener = (notifications: GetTenantNotificationsResponse[], hasMore: boolean) => void