@stack-spot/portal-components 2.26.0 → 2.27.0

package/dist/components/form/Select/styled.js

@@ -1,165 +1,165 @@
 import { theme } from '@stack-spot/portal-theme';
 import { styled } from 'styled-components';
-export const SelectBox = styled.div `
-  position: relative;
-  // controls the height of component when it's closed
-  height: ${({ $inputHeight }) => $inputHeight};
-
-  select {
-    border: none;
-    opacity: 0;
-    pointer-events: none;
-    // prevents visual overflow
-    max-width: 10px;
-  }
-  
-  .fake-select {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    border-radius: 0.25rem;
-    display: flex;
-    flex-direction: column;
-    border: 1px solid ${theme.color.light[600]};
-    transition: border-color 0.3s, box-shadow 0.3s;
-    background-color: ${theme.color.light[300]};
-
-    /* lets the z-index unset until the animation on the height ends. */
-    &:not(.open) {
-      z-index: unset;
-      animation: 0.3s z-index-animation;
-      @keyframes z-index-animation {
-        0% {
-          z-index: 1;
-        }
-        99% {
-          z-index: 1;
-        }
-        100% {
-          z-index: unset;
-        }
-      }
-    }
-
-    &.disabled {
-      background-color: ${theme.color.light[500]};
-      color: ${theme.color.light[700]};
-      .current-value {
-        cursor: not-allowed;
-      }
-    }
-
-    .arrow {
-      transition: transform ease-in-out 0.3s;
-    }
-
-    &.focused, &.open {
-      border: 1px solid ${theme.color.primary[500]};
-      box-shadow: 0 0 0 1px ${theme.color.primary[500]};
-    }
-
-    &.open {
-      z-index: 1;
-      .arrow {
-        transform: rotate(180deg);
-      }
-      .options {
-        /* lets the overflow be hidden until the animation on the height ends. */
-        overflow-y: auto;
-        animation: 0.3s overflow-animation;
-        @keyframes overflow-animation {
-          0% {
-            overflow-y: hidden;
-          }
-          99% {
-            overflow-y: hidden;
-          }
-          100% {
-            overflow-y: auto;
-          }
-        }
-      }
-    }
-
-    .current-value {
-      height: calc(100% - 2px);
-      display: flex;
-      flex-direction: row;
-      padding: 8px;
-      justify-content: space-between;
-      align-items: center;
-      cursor: pointer;
-    }
-
-    .clipped-text {
-      text-overflow: ellipsis;
-      width: 100%;
-      overflow: hidden;
-      white-space: nowrap;
-    }
-
-    .options {
-      list-style: none;
-      padding: 0;
-      margin: 0;
-      overflow-y: hidden;
-      transition: height ease-in-out 0.3s;
-      scrollbar-gutter: stable;
-
-      li {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        padding: 9px;
-        border-top: 1px solid ${theme.color.light[600]};
-        cursor: pointer;
-        transition: background-color 0.2s;
-        &:hover, &:focus {
-          background-color: ${theme.color.light[500]};
-        }
-        outline: none;
-      }
-
-      .detailed {
-        display: flex;
-        flex-direction: row;
-        gap: 10px;
-        align-items: center;
-        .image {
-          width: 40px;
-          height: 40px;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          flex-shrink: 0;
-          overflow: hidden;
-          & > * {
-            max-width: 100%;
-            max-height: 100%;
-          }
-        }
-        .text-content {
-          display: flex;
-          flex-direction: column;
-          gap: 5px;
-          .description {
-            color: ${theme.color.light[700]};
-          }
-        }
-      }
-
-      /* the list is inert when, and only when, its having its height measured */
-      &[inert] {
-        opacity: 0;
-        pointer-events: none;
-        position: absolute;
-        /* we don't want to have the height measured over the height of $maxItems */
-        li:nth-child(n+${({ $maxItems }) => $maxItems + 1}) {
-          display: none;
-        }
-      }
-    }
-  }
+export const SelectBox = styled.div `
+  position: relative;
+  // controls the height of component when it's closed
+  height: ${({ $inputHeight }) => $inputHeight};
+
+  select {
+    border: none;
+    opacity: 0;
+    pointer-events: none;
+    // prevents visual overflow
+    max-width: 10px;
+  }
+  
+  .fake-select {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    border-radius: 0.25rem;
+    display: flex;
+    flex-direction: column;
+    border: 1px solid ${theme.color.light[600]};
+    transition: border-color 0.3s, box-shadow 0.3s;
+    background-color: ${theme.color.light[300]};
+
+    /* lets the z-index unset until the animation on the height ends. */
+    &:not(.open) {
+      z-index: unset;
+      animation: 0.3s z-index-animation;
+      @keyframes z-index-animation {
+        0% {
+          z-index: 1;
+        }
+        99% {
+          z-index: 1;
+        }
+        100% {
+          z-index: unset;
+        }
+      }
+    }
+
+    &.disabled {
+      background-color: ${theme.color.light[500]};
+      color: ${theme.color.light[700]};
+      .current-value {
+        cursor: not-allowed;
+      }
+    }
+
+    .arrow {
+      transition: transform ease-in-out 0.3s;
+    }
+
+    &.focused, &.open {
+      border: 1px solid ${theme.color.primary[500]};
+      box-shadow: 0 0 0 1px ${theme.color.primary[500]};
+    }
+
+    &.open {
+      z-index: 1;
+      .arrow {
+        transform: rotate(180deg);
+      }
+      .options {
+        /* lets the overflow be hidden until the animation on the height ends. */
+        overflow-y: auto;
+        animation: 0.3s overflow-animation;
+        @keyframes overflow-animation {
+          0% {
+            overflow-y: hidden;
+          }
+          99% {
+            overflow-y: hidden;
+          }
+          100% {
+            overflow-y: auto;
+          }
+        }
+      }
+    }
+
+    .current-value {
+      height: calc(100% - 2px);
+      display: flex;
+      flex-direction: row;
+      padding: 8px;
+      justify-content: space-between;
+      align-items: center;
+      cursor: pointer;
+    }
+
+    .clipped-text {
+      text-overflow: ellipsis;
+      width: 100%;
+      overflow: hidden;
+      white-space: nowrap;
+    }
+
+    .options {
+      list-style: none;
+      padding: 0;
+      margin: 0;
+      overflow-y: hidden;
+      transition: height ease-in-out 0.3s;
+      scrollbar-gutter: stable;
+
+      li {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        padding: 9px;
+        border-top: 1px solid ${theme.color.light[600]};
+        cursor: pointer;
+        transition: background-color 0.2s;
+        &:hover, &:focus {
+          background-color: ${theme.color.light[500]};
+        }
+        outline: none;
+      }
+
+      .detailed {
+        display: flex;
+        flex-direction: row;
+        gap: 10px;
+        align-items: center;
+        .image {
+          width: 40px;
+          height: 40px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          flex-shrink: 0;
+          overflow: hidden;
+          & > * {
+            max-width: 100%;
+            max-height: 100%;
+          }
+        }
+        .text-content {
+          display: flex;
+          flex-direction: column;
+          gap: 5px;
+          .description {
+            color: ${theme.color.light[700]};
+          }
+        }
+      }
+
+      /* the list is inert when, and only when, its having its height measured */
+      &[inert] {
+        opacity: 0;
+        pointer-events: none;
+        position: absolute;
+        /* we don't want to have the height measured over the height of $maxItems */
+        li:nth-child(n+${({ $maxItems }) => $maxItems + 1}) {
+          display: none;
+        }
+      }
+    }
+  }
 `;
 //# sourceMappingURL=styled.js.map

package/dist/components/form/Select/utils.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime.js";
 import { Text } from '@citric/core';
 export function parseLabel(label) {
     if (typeof label === 'string') {

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

@@ -26,6 +26,6 @@ interface Props {
  * @param props the component's props {@link Props}.
  * @deprecated this functionality has been moved to the Layout library. This is now a property of the Header.
  */
-export declare const NotificationComponent: ({ hasUnreadNotification, onMarkAsReadUnread, notifications, isLoading, error, type, onUpdateType, onClickViewNotifications, onClickViewAll, errorDetails, fetchNextPage, hasNextPage, placeholderComponent, isSummary, }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const NotificationComponent: ({ hasUnreadNotification, onMarkAsReadUnread, notifications, isLoading, error, type, onUpdateType, onClickViewNotifications, onClickViewAll, errorDetails, fetchNextPage, hasNextPage, placeholderComponent, isSummary, }: Props) => import("react/jsx-runtime.js").JSX.Element;
 export {};
 //# sourceMappingURL=NotificationComponent.d.ts.map

package/dist/components/notification/NotificationComponent.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime.js";
 import { Box, Button, Flex, IconBox, Text } from '@citric/core';
 import { Bell, TimesMini } from '@citric/icons';
 import { IconButton } from '@citric/ui';
@@ -14,61 +14,61 @@ import { NotificationItem } from './NotificationItem.js';
 import { UnreadType } from './types.js';
 const ANIMATION_DURATION_MS = 300;
 const MAX_HEIGHT_TRANSITION = `max-height ease-in ${ANIMATION_DURATION_MS / 1000}s`;
-const NotificationsComponent = styled.div `
-  max-height: 0;
-  z-index: 2;
-  visibility: hidden;
-  position: absolute;
-  top: calc(var(--header-height) + 4px);
-  right: -270%;
-  opacity: 0;
-  width: 400px;
-  transition: ${MAX_HEIGHT_TRANSITION}, opacity ${ANIMATION_DURATION_MS}ms ease-in-out, visibility 0s ${ANIMATION_DURATION_MS}ms;
-
-  &.visible {
-    visibility: visible;
-    min-height: 400px;
-    opacity: 1;
-    transition: ${MAX_HEIGHT_TRANSITION}, opacity ${ANIMATION_DURATION_MS}ms ease-in-out;
-  }
-
-  .content {
-    border-radius: 4px;
-    border: 1px solid ${theme.color.light[400]};
-    box-shadow: 4px 4px 48px ${theme.color.danger.contrastText};
-    background-color: ${theme.color.light[300]};
-    overflow-y: ${({ $scroll }) => ($scroll ? 'auto' : 'hidden')};
-    overflow-x: hidden;
-  }
-
-  &::after {
-    content: '';
-    position: absolute;
-    border-width: 8px 32px;
-    border-style: solid;
-    border-color: transparent;
-    bottom: 100%;
-    left: 74%;
-    margin-left: -5px;
-    transform: rotate(180deg);
-    border-top-color: ${theme.color.light[400]};
-  }
+const NotificationsComponent = styled.div `
+  max-height: 0;
+  z-index: 2;
+  visibility: hidden;
+  position: absolute;
+  top: calc(var(--header-height) + 4px);
+  right: -270%;
+  opacity: 0;
+  width: 400px;
+  transition: ${MAX_HEIGHT_TRANSITION}, opacity ${ANIMATION_DURATION_MS}ms ease-in-out, visibility 0s ${ANIMATION_DURATION_MS}ms;
+
+  &.visible {
+    visibility: visible;
+    min-height: 400px;
+    opacity: 1;
+    transition: ${MAX_HEIGHT_TRANSITION}, opacity ${ANIMATION_DURATION_MS}ms ease-in-out;
+  }
+
+  .content {
+    border-radius: 4px;
+    border: 1px solid ${theme.color.light[400]};
+    box-shadow: 4px 4px 48px ${theme.color.danger.contrastText};
+    background-color: ${theme.color.light[300]};
+    overflow-y: ${({ $scroll }) => ($scroll ? 'auto' : 'hidden')};
+    overflow-x: hidden;
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    border-width: 8px 32px;
+    border-style: solid;
+    border-color: transparent;
+    bottom: 100%;
+    left: 74%;
+    margin-left: -5px;
+    transform: rotate(180deg);
+    border-top-color: ${theme.color.light[400]};
+  }
 `;
-const Overlay = styled.div `
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: ${theme.color.primary.contrastText};
-  opacity: 0.6;
-  z-index: 1;
+const Overlay = styled.div `
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: ${theme.color.primary.contrastText};
+  opacity: 0.6;
+  z-index: 1;
 `;
-const StyledBox = styled(Box) `
-  width: 100%;
-  > div:first-child{
-    width: 100%;
-  }
+const StyledBox = styled(Box) `
+  width: 100%;
+  > div:first-child{
+    width: 100%;
+  }
 `;
 /**
  * NotificationFilterButton component that renders a button to be used in quick filters for notifications.

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

@@ -42,6 +42,6 @@ type NotificationItemProps = DeprecatedNotificationItemProps | NewNotificationIt
  *
  * @param props the component's props {@link NotificationItemProps}.
  */
-export declare const NotificationItem: ({ notification, isSummary, ...props }: NotificationItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const NotificationItem: ({ notification, isSummary, ...props }: NotificationItemProps) => import("react/jsx-runtime.js").JSX.Element;
 export {};
 //# sourceMappingURL=NotificationItem.d.ts.map

package/dist/components/notification/NotificationItem.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime.js";
 import { Box, Button, Flex, IconBox, Text } from '@citric/core';
 import { Envelope, EnvelopeOpen, ExternalLink } from '@citric/icons';
 import { IconButton, Tooltip } from '@citric/ui';

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

@@ -38,5 +38,5 @@ export interface NotificationListProps {
     style?: React.CSSProperties;
     className?: string;
 }
-export declare const NotificationList: ({ items, compact, onCommit, onClickAction, onClickViewNotification, infiniteScroll, loading, showEmptySearch, style, className }: NotificationListProps) => false | import("react/jsx-runtime").JSX.Element;
+export declare const NotificationList: ({ items, compact, onCommit, onClickAction, onClickViewNotification, infiniteScroll, loading, showEmptySearch, style, className }: NotificationListProps) => false | import("react/jsx-runtime.js").JSX.Element;
 //# sourceMappingURL=NotificationList.d.ts.map

package/dist/components/notification/NotificationList.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime.js";
 import { Box, Flex } from '@citric/core';
 import { listToClass } from '@stack-spot/portal-theme';
 import { last } from 'lodash';
@@ -8,48 +8,48 @@ import { InfiniteScroll } from '../InfiniteScroll.js';
 import { TimelineSection } from '../TimelineSection.js';
 import { NotificationItem } from './NotificationItem.js';
 import { NotificationPlaceholder } from './NotificationPlaceholder.js';
-const StyledBox = styled(Box) `
-  width: 100%;
-  position: relative;
-  transition: opacity 0.3s;
-
-  > div:first-child{
-    width: 100%;
-  }
-
-  &.loading {
-    opacity: 0.6;
-    .loading-mask {
-      pointer-events: auto;
-    }
-  }
-
-  .loading-mask {
-    opacity: 0;
-    position: absolute;
-    pointer-events: none;
-    top: 0;
-    right: 0;
-    left: 0;
-    bottom: 0;
-    cursor: progress;
-  }
-
-  .placeholder.compact {
-    & > div {
-      padding-block: 0;
-      gap: 15px;
-      & > div {
-        text-align: center;
-        h4 {
-          margin-bottom: 10px;
-        }
-        p {
-          margin: 0;
-        }
-      }
-    }
-  }
+const StyledBox = styled(Box) `
+  width: 100%;
+  position: relative;
+  transition: opacity 0.3s;
+
+  > div:first-child{
+    width: 100%;
+  }
+
+  &.loading {
+    opacity: 0.6;
+    .loading-mask {
+      pointer-events: auto;
+    }
+  }
+
+  .loading-mask {
+    opacity: 0;
+    position: absolute;
+    pointer-events: none;
+    top: 0;
+    right: 0;
+    left: 0;
+    bottom: 0;
+    cursor: progress;
+  }
+
+  .placeholder.compact {
+    & > div {
+      padding-block: 0;
+      gap: 15px;
+      & > div {
+        text-align: center;
+        h4 {
+          margin-bottom: 10px;
+        }
+        p {
+          margin: 0;
+        }
+      }
+    }
+  }
 `;
 // this assumes the data from the backend is ordered by date (trigger_at)
 function groupNotificationsByDate(notifications) {

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

@@ -8,6 +8,6 @@ interface Props {
     sxCard?: SxProperties;
     titleAs?: AsProp;
 }
-export declare const NotificationPlaceholder: ({ isSearch, sx, sxCard, className, style, titleAs }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const NotificationPlaceholder: ({ isSearch, sx, sxCard, className, style, titleAs }: Props) => import("react/jsx-runtime.js").JSX.Element;
 export {};
 //# sourceMappingURL=NotificationPlaceholder.d.ts.map

package/dist/components/notification/NotificationPlaceholder.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime.js";
 import { useTranslate } from '@stack-spot/portal-translate';
 import { PlaceholderCallToAction } from '../Placeholder.js';
 export const NotificationPlaceholder = ({ isSearch, sx, sxCard, className, style, titleAs }) => {
@@ -7,16 +7,16 @@ export const NotificationPlaceholder = ({ isSearch, sx, sxCard, className, style
 };
 const dictionary = {
     en: {
-        placeholderTitle: 'No notifications',
-        placeholderDescription: 'Your notifications will appear here.',
-        placeholderSearchTitle: 'No notifications found',
-        placeholderSearchDescription: 'You can change the current filters in the fields above',
+        placeholderTitle: 'You don’t have any notifications yet.',
+        placeholderDescription: 'Relevant updates will show up here as soon as they’re available.',
+        placeholderSearchTitle: 'No notifications match your filters',
+        placeholderSearchDescription: 'Try changing the filters to see more results.',
     },
     pt: {
-        placeholderTitle: 'Nenhuma notificação',
-        placeholderDescription: 'Suas notificações aparecerão aqui.',
-        placeholderSearchTitle: 'Nenhuma notificação encontrada',
-        placeholderSearchDescription: 'Você pode mudar os filtros aplicados nos campos acima',
+        placeholderTitle: 'Você ainda não tem notificações.',
+        placeholderDescription: 'Quando houver alguma atualização relevante, ela será exibida aqui.',
+        placeholderSearchTitle: 'Nenhuma notificação corresponde aos filtros',
+        placeholderSearchDescription: 'Experimente mudar os filtros para encontrar mais notificações.',
     },
 };
 //# sourceMappingURL=NotificationPlaceholder.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"NotificationPlaceholder.js","sourceRoot":"","sources":["../../../src/components/notification/NotificationPlaceholder.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAc,YAAY,EAAE,MAAM,8BAA8B,CAAA;AACvE,OAAO,EAAE,uBAAuB,EAAE,MAAM,gBAAgB,CAAA;AAWxD,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAS,EAAE,EAAE;IACpG,MAAM,CAAC,GAAG,YAAY,CAAC,UAAU,CAAC,CAAA;IAElC,OAAO,KAAC,uBAAuB,IAC7B,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,gBAAgB,EAC/D,WAAW,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,4BAA4B,CAAC,CAAC,CAAC,CAAC,CAAC,sBAAsB,EACjF,SAAS,QACT,EAAE,EAAE,EAAE,EACN,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,GAChB,CAAA;AACJ,CAAC,CAAA;AAED,MAAM,UAAU,GAAG;IACjB,EAAE,EAAE;QACF,gBAAgB,EAAE,kBAAkB;QACpC,sBAAsB,EAAE,sCAAsC;QAC9D,sBAAsB,EAAE,wBAAwB;QAChD,4BAA4B,EAAE,wDAAwD;KACvF;IACD,EAAE,EAAE;QACF,gBAAgB,EAAE,qBAAqB;QACvC,sBAAsB,EAAE,oCAAoC;QAC5D,sBAAsB,EAAE,gCAAgC;QACxD,4BAA4B,EAAE,uDAAuD;KACtF;CACmB,CAAA"}
+{"version":3,"file":"NotificationPlaceholder.js","sourceRoot":"","sources":["../../../src/components/notification/NotificationPlaceholder.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAc,YAAY,EAAE,MAAM,8BAA8B,CAAA;AACvE,OAAO,EAAE,uBAAuB,EAAE,MAAM,gBAAgB,CAAA;AAWxD,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAS,EAAE,EAAE;IACpG,MAAM,CAAC,GAAG,YAAY,CAAC,UAAU,CAAC,CAAA;IAElC,OAAO,KAAC,uBAAuB,IAC7B,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,gBAAgB,EAC/D,WAAW,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,4BAA4B,CAAC,CAAC,CAAC,CAAC,CAAC,sBAAsB,EACjF,SAAS,QACT,EAAE,EAAE,EAAE,EACN,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,GAChB,CAAA;AACJ,CAAC,CAAA;AAED,MAAM,UAAU,GAAG;IACjB,EAAE,EAAE;QACF,gBAAgB,EAAE,uCAAuC;QACzD,sBAAsB,EAAE,kEAAkE;QAC1F,sBAAsB,EAAE,qCAAqC;QAC7D,4BAA4B,EAAE,+CAA+C;KAC9E;IACD,EAAE,EAAE;QACF,gBAAgB,EAAE,kCAAkC;QACpD,sBAAsB,EAAE,oEAAoE;QAC5F,sBAAsB,EAAE,6CAA6C;QACrE,4BAA4B,EAAE,gEAAgE;KAC/F;CACmB,CAAA"}

package/dist/containers/NotificationsPage.d.ts

@@ -1,2 +1,2 @@
-export declare const NotificationsPage: () => import("react/jsx-runtime").JSX.Element;
+export declare const NotificationsPage: () => import("react/jsx-runtime.js").JSX.Element;
 //# sourceMappingURL=NotificationsPage.d.ts.map

package/dist/containers/NotificationsPage.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime.js";
 import { Text } from '@citric/core';
 import { useTranslate } from '@stack-spot/portal-translate';
 import { styled } from 'styled-components';
@@ -9,15 +9,15 @@ import { Select } from '../components/form/Select/index.js';
 import { NotificationList } from '../components/notification/NotificationList.js';
 import { useNotificationList } from '../context/notification/hooks.js';
 import { useNotificationController } from '../notifications.js';
-const FilterBox = styled.div `
-  margin: 24px 0;
-  display: flex;
-  flex-direction: row;
-  gap: 8px;
-
-  > * {
-    flex: 1;
-  }
+const FilterBox = styled.div `
+  margin: 24px 0;
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+
+  > * {
+    flex: 1;
+  }
 `;
 const criticalities = ['HIGH', 'MEDIUM', 'LOW'];
 const contexts = ['ACCOUNT', 'STUDIO', 'WORKSPACE'];