@stack-spot/portal-components 1.3.2-rc → 1.3.2

package/dist/components/Notifications/NotificationItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationItem.js","sourceRoot":"","sources":["../../../src/components/Notifications/NotificationItem.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"NotificationItem.js","sourceRoot":"","sources":["../../../src/components/Notifications/NotificationItem.tsx"],"names":[],"mappings":"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"}

package/dist/components/StatusCircle.d.ts

@@ -15,11 +15,10 @@ interface WithTooltip {
     style?: React.CSSProperties;
 }
 /**
- * StatusCircle component that displays a colored circle based on the status.
+ * Renders a component that displays a colored circle based on the status.
  * It also supports an optional tooltip.
  *
- * @param {Props} props - The props for the StatusCircle component.
- * @returns {JSX.Element} The StatusCircle component.
+ * @param props the component's props {@link Props}.
  */
 export declare const StatusCircle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<WithTooltip, Props>> & string & Omit<({ tooltip, className, style }: WithTooltip) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"StatusCircle.d.ts","sourceRoot":"","sources":["../../src/components/StatusCircle.tsx"],"names":[],"mappings":";AAOA,MAAM,MAAM,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,GAAG,UAAU,CAAA;AAE9E,UAAU,KAAK;IACb,6DAA6D;IAC7D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,4CAA4C;IAC5C,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAsBD,UAAU,WAAW;IACnB,4CAA4C;IAC5C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAaD;;;;;;GAMG;AACH,eAAO,MAAM,YAAY,4LAZiC,WAAW,4FAiBpE,CAAA"}
+{"version":3,"file":"StatusCircle.d.ts","sourceRoot":"","sources":["../../src/components/StatusCircle.tsx"],"names":[],"mappings":";AAOA,MAAM,MAAM,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,GAAG,UAAU,CAAA;AAE9E,UAAU,KAAK;IACb,6DAA6D;IAC7D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,4CAA4C;IAC5C,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAsBD,UAAU,WAAW;IACnB,4CAA4C;IAC5C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAYD;;;;;GAKG;AACH,eAAO,MAAM,YAAY,4LAXiC,WAAW,4FAgBpE,CAAA"}

package/dist/components/StatusCircle.js

@@ -23,19 +23,17 @@ function getColorFromStatus(theme, status) {
 /**
  * CircleWithTooltip component that displays a circle with an optional tooltip.
  *
- * @param {WithTooltip} props - The props for the CircleWithTooltip component.
- * @returns {JSX.Element} The CircleWithTooltip component.
+ * @param props the component's props {@link WithTooltip}.
  */
 const CircleWithTooltip = ({ tooltip, className, style }) => {
     const circle = _jsx("div", { style: style, className: className });
     return tooltip && tooltip.length ? _jsx(Tooltip, { text: tooltip, children: circle }) : circle;
 };
 /**
- * StatusCircle component that displays a colored circle based on the status.
+ * Renders a component that displays a colored circle based on the status.
  * It also supports an optional tooltip.
  *
- * @param {Props} props - The props for the StatusCircle component.
- * @returns {JSX.Element} The StatusCircle component.
+ * @param props the component's props {@link Props}.
  */
 export const StatusCircle = styled(CircleWithTooltip) `
   background-color: ${({ status, theme }) => getColorFromStatus(theme, status)};

package/dist/components/StatusCircle.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatusCircle.js","sourceRoot":"","sources":["../../src/components/StatusCircle.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAA;AACxD,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAA;AACpC,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAatC,MAAM,aAAa,GAA0B;IAC3C,OAAO,EAAE,aAAa;IACtB,OAAO,EAAE,aAAa;IACtB,MAAM,EAAE,YAAY;IACpB,QAAQ,EAAE,eAAe;IACzB,OAAO,EAAE,oBAAoB;CAC9B,CAAA;AAED;;;;;;GAMG;AACH,SAAS,kBAAkB,CAAC,KAAY,EAAE,MAAe;IACvD,MAAM,SAAS,GAAG,MAAM,IAAI,MAAM,IAAI,aAAa,CAAC,CAAC,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,OAAO,CAAA;IACnG,OAAO,QAAQ,CAAC,KAAK,EAAE,SAAS,CAAC,CAAA;AACnC,CAAC;AAWD;;;;;GAKG;AACH,MAAM,iBAAiB,GAAG,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAe,EAAE,EAAE;IACvE,MAAM,MAAM,GAAG,cAAK,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,GAAQ,CAAA;IAC9D,OAAO,OAAO,IAAI,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,KAAC,OAAO,IAAC,IAAI,EAAE,OAAO,YAAG,MAAM,GAAW,CAAC,CAAC,CAAC,MAAM,CAAA;AACxF,CAAC,CAAA;AAED;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,iBAAiB,CAAC,CAAO;sBACtC,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,kBAAkB,CAAC,KAAY,EAAE,MAAM,CAAC;;;;CAIpF,CAAA"}
+{"version":3,"file":"StatusCircle.js","sourceRoot":"","sources":["../../src/components/StatusCircle.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAA;AACxD,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAA;AACpC,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAatC,MAAM,aAAa,GAA0B;IAC3C,OAAO,EAAE,aAAa;IACtB,OAAO,EAAE,aAAa;IACtB,MAAM,EAAE,YAAY;IACpB,QAAQ,EAAE,eAAe;IACzB,OAAO,EAAE,oBAAoB;CAC9B,CAAA;AAED;;;;;;GAMG;AACH,SAAS,kBAAkB,CAAC,KAAY,EAAE,MAAe;IACvD,MAAM,SAAS,GAAG,MAAM,IAAI,MAAM,IAAI,aAAa,CAAC,CAAC,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,OAAO,CAAA;IACnG,OAAO,QAAQ,CAAC,KAAK,EAAE,SAAS,CAAC,CAAA;AACnC,CAAC;AAWD;;;;GAIG;AACH,MAAM,iBAAiB,GAAG,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAe,EAAE,EAAE;IACvE,MAAM,MAAM,GAAG,cAAK,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,GAAQ,CAAA;IAC9D,OAAO,OAAO,IAAI,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,KAAC,OAAO,IAAC,IAAI,EAAE,OAAO,YAAG,MAAM,GAAW,CAAC,CAAC,CAAC,MAAM,CAAA;AACxF,CAAC,CAAA;AAED;;;;;GAKG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,iBAAiB,CAAC,CAAO;sBACtC,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,kBAAkB,CAAC,KAAY,EAAE,MAAM,CAAC;;;;CAIpF,CAAA"}

package/dist/index.d.ts

@@ -1,10 +1,12 @@
 export { BannerWarning } from './components/BannerWarning.js';
 export { ChatBot } from './components/ChatBot.js';
+export { AsyncContent } from './components/AsyncContent.js';
 export { useKeyboardControls } from './hooks/keyboard.js';
 export { openServiceNowChat, dictionary as serviceNowDictionary, useServiceNowChatButtonVisibility, useServiceNowEffect } from './hooks/service-now.js';
 export { useCheckTextOverflow } from './hooks/text.js';
 export { titleEffect, useTitleEffect } from './hooks/title.js';
 export { useEffectOnce } from './hooks/use-effect-once.js';
+export { useDateFormatter } from './hooks/date.js';
 export * from './utils/accessibility.js';
 export * from './utils/cookie.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAA;AAC1D,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAA;AAC9C,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAA;AACtD,OAAO,EAAE,kBAAkB,EAAE,UAAU,IAAI,oBAAoB,EAAE,iCAAiC,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AACpJ,OAAO,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAA;AACnD,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAC3D,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAA;AACvD,cAAc,uBAAuB,CAAA;AACrC,cAAc,gBAAgB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAA;AAC1D,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAA;AAC9C,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAA;AACxD,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAA;AACtD,OAAO,EAAE,kBAAkB,EAAE,UAAU,IAAI,oBAAoB,EAAE,iCAAiC,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AACpJ,OAAO,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAA;AACnD,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAC3D,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAA;AACvD,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAA;AAC/C,cAAc,uBAAuB,CAAA;AACrC,cAAc,gBAAgB,CAAA"}

package/dist/index.js

@@ -1,10 +1,12 @@
 export { BannerWarning } from './components/BannerWarning.js';
 export { ChatBot } from './components/ChatBot.js';
+export { AsyncContent } from './components/AsyncContent.js';
 export { useKeyboardControls } from './hooks/keyboard.js';
 export { openServiceNowChat, dictionary as serviceNowDictionary, useServiceNowChatButtonVisibility, useServiceNowEffect } from './hooks/service-now.js';
 export { useCheckTextOverflow } from './hooks/text.js';
 export { titleEffect, useTitleEffect } from './hooks/title.js';
 export { useEffectOnce } from './hooks/use-effect-once.js';
+export { useDateFormatter } from './hooks/date.js';
 export * from './utils/accessibility.js';
 export * from './utils/cookie.js';
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAA;AAC1D,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAA;AAC9C,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAA;AACtD,OAAO,EAAE,kBAAkB,EAAE,UAAU,IAAI,oBAAoB,EAAE,iCAAiC,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AACpJ,OAAO,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAA;AACnD,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAC3D,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAA;AACvD,cAAc,uBAAuB,CAAA;AACrC,cAAc,gBAAgB,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAA;AAC1D,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAA;AAC9C,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAA;AACxD,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAA;AACtD,OAAO,EAAE,kBAAkB,EAAE,UAAU,IAAI,oBAAoB,EAAE,iCAAiC,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AACpJ,OAAO,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAA;AACnD,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAC3D,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAA;AACvD,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAA;AAC/C,cAAc,uBAAuB,CAAA;AACrC,cAAc,gBAAgB,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stack-spot/portal-components",
-  "version": "1.3.2-rc",
+  "version": "1.3.2",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -14,14 +14,10 @@
     "./Notifications": "./dist/components/Notifications/index.js",
     "./StatusCircle": "./dist/components/StatusCircle.js",
     "./InfiniteScroll": "./dist/components/InfiniteScroll.js",
+    "./ScrollView": "./dist/components/ScrollView.js",
     "./svg": "./dist/svg/index.js",
     "./anchor": "./dist/context/anchor.js"
   },
-  "scripts": {
-    "build": "rimraf dist && tsc && tsc-esm-fix --target='dist'",
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "check-tree-shaking": "agadoo"
-  },
   "peerDependencies": {
     "@citric/core": "^6.0.0",
     "@citric/icons": "^5.4.0 || ^6.0.0",
@@ -64,5 +60,10 @@
     "reactour": "^1.19.3",
     "rehype-raw": "^7.0.0",
     "remark-gfm": "^4.0.0"
+  },
+  "scripts": {
+    "build": "rimraf dist && tsc && tsc-esm-fix --target='dist'",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "check-tree-shaking": "agadoo"
   }
 }

package/readme.md

@@ -66,4 +66,3 @@ focus according to accessibility rules.
 # Developer notes
 - Since not every component in this library will be used by every project. This library must be tree-shakeable! Before committing, make sure
 `pnpm check-tree-shaking` passes.
- 

package/src/components/LazyMarkdown/BlockquoteMd.tsx

@@ -6,6 +6,13 @@ import { createElement } from 'react'
 
 type IconName = keyof typeof icons
 
+/**
+ * BlockquoteMd component that renders a styled blockquote with an icon and text based on the provided props.
+ *
+ * @param {Object} props - The props for the BlockquoteMd component.
+ * @param {any} props.props - The properties passed to the component.
+ * @returns {JSX.Element} The BlockquoteMd component.
+ */
 export const BlockquoteMd = ({ props }: { props: any }) => {
   const t = useTranslate(dictionary)
   const arrayNode = props.node
@@ -44,6 +51,12 @@ export const BlockquoteMd = ({ props }: { props: any }) => {
   )
 }
 
+/**
+ * Get the style for the blockquote based on the block rule.
+ *
+ * @param {string} blockRule - The block rule to determine the style.
+ * @returns {{ color: OneOfColorSchemes, icon: IconName }} The style object containing color and icon.
+ */
 function blockquoteAlertStyle(blockRule: string) {
   const style: Record<string, { color: OneOfColorSchemes, icon: IconName }> = {
     '[!NOTE]': {
@@ -80,7 +93,7 @@ const dictionary = {
     '[!INFO]': 'Info',
     '[!IMPORTANT]': 'Important',
     '[!TIP]': 'Tip',
-    '[!WARNING]': 'Warning',
+    '[!WARNING]xw': 'Warning',
     '[!DANGER]': 'Danger',
   },
   pt: {

package/src/components/LazyMarkdown/CodeViewer.tsx

@@ -2,6 +2,7 @@ import { Box, Flex, Text } from '@citric/core'
 import { getColor, getRadius } from '@citric/core/dist/utils/theme'
 import { Copy, Refresh } from '@citric/icons'
 import { IconButton } from '@citric/ui'
+import { theme } from '@stack-spot/portal-theme'
 import { useTranslate } from '@stack-spot/portal-translate'
 import SyntaxHighlighter from 'react-syntax-highlighter'
 import styled from 'styled-components'
@@ -27,7 +28,7 @@ const style = {
 }
 
 const Wrapper = styled(Box)`
-  background-color: ${({ theme }) => getColor(theme as any, 'gray.900')};
+  background-color: ${theme.color.gray[900]};
   border-radius: ${({ theme }) => getRadius(theme as any, 'xs')};
   position: relative;
   padding: 8px;
@@ -42,12 +43,12 @@ const Wrapper = styled(Box)`
       height: 4px;
     }
     &::-webkit-scrollbar-track {
-      background: ${({ theme }) => getColor(theme as any, 'light.400')};
+      background: ${theme.color.light[400]};
       border-radius: 2px;
     }
     &::-webkit-scrollbar-thumb,
     &::-webkit-scrollbar-thumb:hover {
-      background: ${({ theme }) => getColor(theme as any, 'light.700')};
+      background: ${theme.color.light[700]};
       border-radius: 2px;
     }
   }
@@ -60,32 +61,32 @@ const Wrapper = styled(Box)`
     margin-top: 0;
     overflow: unset;
     text-shadow: none;
-    color: #fff;
+    color: ${theme.color.gray[50]};
   }
 
   .hljs-string {
-    color: ${({ theme }) => getColor(theme as any, 'teal.300')};
+    color: ${theme.color.teal[300]};
   }
   .hljs-tag {
     color: ${({ theme }) => getColor(theme as any, 'teal')};
   }
   .hljs-attr {
-    color: #fff;
+    color: ${theme.color.gray[50]};
   }
   .hljs-number {
-    color: #fff;
+    color: ${theme.color.gray[300]};
   }
   .hljs-property {
-    color: #fff;
+    color: ${theme.color.gray[50]};
   }
   .hljs-keyword {
-    color: #75dcff;
+    color: ${theme.color.blue[200]};
   }
   .comment {
-    color: #8e8e93;
+    color: ${theme.color.gray[400]};
   }
   .hljs-expression {
-    color: #f57f17;
+    color: ${theme.color.orange[400]};
   }
 
   .button-group {
@@ -111,6 +112,12 @@ interface Props {
   scrollable?: boolean,
   copyButton?: boolean,
 }
+
+/**
+ * CodeViewer component that displays code with syntax highlighting based on application theme and optional copy and refresh buttons.
+ *
+* @param options the props for rendering the component: {@link Props}. 
+ */
 export const CodeViewer = ({ language, data, onClickRefresh, scrollable = true, copyButton }: Props) => {
   const t = useTranslate(codeViewerLocale)
 

package/src/components/LazyMarkdown/Markdown.tsx

@@ -9,6 +9,9 @@ import { CodeViewer } from './CodeViewer'
 import { Video } from './Video'
 
 interface MarkdownProps {
+  /**
+   * The markdown content to be rendered.
+   */
   children: string,
 }
 
@@ -25,7 +28,6 @@ const styles: Record<string, SxProp | Record<string, SxProp>> = {
   table: {
     borderRadius: 'xs',
   },
-
   customScroll: {
     height: '232px',
     overflow: 'auto',
@@ -61,6 +63,9 @@ const styles: Record<string, SxProp | Record<string, SxProp>> = {
   },
 }
 
+/**
+ * Custom components for rendering markdown elements.
+ */
 const component = () => ({
   p: (props: any) => <Text appearance="body2" {...props} />,
   strong: (props: any) => <Text weight="bold" colorScheme="light.700" as="strong" {...props} />,
@@ -97,6 +102,11 @@ const component = () => ({
     </Text>,
 })
 
+/**
+ * Renders a component that provides markdown content visualization using citric components.
+ * 
+ * @param options the props for rendering the component: {@link MarkdownProps}. 
+ */
 const Markdown = ({ children }: MarkdownProps) => (
   <ReactMarkdown rehypePlugins={[rehypeRaw]} remarkPlugins={[remarkGfm]} components={component()}>
     {children}

package/src/components/LazyMarkdown/MarkdownButton.tsx

@@ -2,10 +2,21 @@ import { IconButton } from '@citric/ui'
 import { ReactNode } from 'react'
 
 interface MarkdownButtonProps {
+  /**
+   * Optional click handler for the button.
+   */
   onClick?: () => void,
+  /**
+   * The content to be displayed inside the button.
+   */
   children: ReactNode,
 }
 
+/**
+ * Renders a component that provides an IconButton with custom styles and content.
+ *
+ * @param options the props for rendering the component: {@link MarkdownButtonProps}. 
+ */
 export const MarkdownButton = ({ ...props }: MarkdownButtonProps) => (
   <IconButton sx={{ position: 'absolute', top: '16px', right: '16px' }} onClick={props.onClick}>
     {props.children}

package/src/components/LazyMarkdown/Video.tsx

@@ -1,3 +1,10 @@
+/**
+ * Video component that renders an iframe with the given source URL.
+ *
+ * @param {Object} props - The props for the Video component.
+ * @param {string} props.children - The URL to be used as the source of the iframe.
+ * @returns {JSX.Element} The rendered iframe element.
+ */
 export const Video = ({ children }: { children: string }) => (
   <iframe
     src={children}

package/src/components/Notifications/NotificationComponent.tsx

@@ -4,6 +4,7 @@ import { listToClass, theme } from '@stack-spot/portal-theme'
 import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
 import { ReactElement, useState } from 'react'
 import styled from 'styled-components'
+import { IconButton } from '@citric/ui'
 import { AsyncContent, ErrorProps } from '../AsyncContent'
 import { InfiniteScroll } from '../InfiniteScroll'
 import { ScrollView } from '../ScrollView'
@@ -20,10 +21,10 @@ const MAX_HEIGHT_TRANSITION = `max-height ease-in ${ANIMATION_DURATION_MS / 1000
 
 const NotificationsComponent = styled(Flex) <{ $scroll?: boolean }>`
   max-height: 0;
-  z-index: 1;
+  z-index: 2;
   visibility: hidden;
   position: absolute;
-  top: calc(var(--header-height) + 6px);
+  top: calc(var(--header-height) + 4px);
   right: -270%;
   width: 400px;
 
@@ -46,17 +47,28 @@ const NotificationsComponent = styled(Flex) <{ $scroll?: boolean }>`
   &::after {
     content: '';
     position: absolute;
-    border-width: 9px 19px;
+    border-width: 8px 32px;
     border-style: solid;
     border-color: transparent;
     bottom: 100%;
-    left: 71%;
+    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 StyledBox = styled(Box)`
   width: 100%;
   > div:first-child{
@@ -75,6 +87,11 @@ interface NotificationFilterButtonProps extends NotificationsFilterProps {
   enumType: NotificationTypeFilters,
 }
 
+/**
+ * NotificationFilterButton component that renders a button to be used in quick filters for notifications.
+ *
+ * @param props the component's props {@link NotificationFilterButtonProps}.
+ */
 const NotificationFilterButton = (props: NotificationFilterButtonProps) => {
   const { type, onChangeFilterType, ariaLabel, label, enumType } = props
   return (<Button
@@ -92,6 +109,11 @@ const NotificationFilterButton = (props: NotificationFilterButtonProps) => {
   )
 }
 
+/**
+ * NotificationsFilter component that renders the filter options for notifications.
+ *
+ * @param props the component's props {@link NotificationsFilterProps}.
+ */
 const NotificationsFilter = ({ type, onChangeFilterType }: NotificationsFilterProps) => {
   const t = useTranslate(dictionary)
 
@@ -143,6 +165,12 @@ interface Props {
   isSummary: boolean,
 }
 
+/**
+ * NotificationComponent component that renders the notifications panel.
+ * It render the notification icon and when clicked the notification modal is opened.
+ *
+ * @param props the component's props {@link Props}.
+ */
 export const NotificationComponent = ({ 
   hasUnreadNotification, onMarkAsReadUnread, notifications, isLoading, error, 
   type, onUpdateType,
@@ -157,17 +185,21 @@ export const NotificationComponent = ({
   }
 
   return (<Flex sx={{ position: 'relative' }}>
-    <IconBox size="md" sx={{ cursor: 'pointer' }}
-      onClick={() => {
-        onClickViewNotifications()
-        setVisible(true)
-      }} className="notificationsTour">
-      <Bell />
-    </IconBox>
-    {hasUnreadNotification && <Box sx={{ position: 'absolute', right: '2px' }}>
+    <IconButton aria-label={t.openNotifications}  onClick={() => {
+      onClickViewNotifications()
+      setVisible(true)
+    }} sx={{ border: 'none', bg: 'transparent' }}>
+      <IconBox size="md"
+        className="notificationsTour" >
+        <Bell />
+      </IconBox>
+    </IconButton>
+    {hasUnreadNotification && <Box sx={{ position: 'absolute', right: '2px' }} aria-label={t.hasUnread}>
       <StatusCircle status={'danger'} />
     </Box>}
 
+    {visible && <Overlay />}
+
     <NotificationsComponent
       className={listToClass(['selection-list', visible ? 'visible' : undefined])}
       $scroll={true}
@@ -179,10 +211,11 @@ export const NotificationComponent = ({
             <Text appearance="h4">
               {t.notifications}
             </Text>
-            <IconBox appearance="circle" onClick={() => setVisible(false)}
-              sx={{ border: `1px solid ${theme.color.light[500]}`, cursor: 'pointer' }}>
-              <TimesMini />
-            </IconBox>
+            <IconButton onClick={() => setVisible(false)} aria-label={t.close}>
+              <IconBox size="xs">
+                <TimesMini />
+              </IconBox>
+            </IconButton>
           </Flex>
 
           <NotificationsFilter type={type} onChangeFilterType={updateType} />
@@ -246,6 +279,9 @@ const dictionary = {
     medium: 'Medium',
     low: 'Low',
     seeAll: 'See all notifications',
+    openNotifications: 'View notifications',
+    hasUnread: 'Has Unread notifications',
+    close: 'Close',
   },
   pt: {
     notifications: 'Notificações',
@@ -260,5 +296,8 @@ const dictionary = {
     medium: 'Médio',
     low: 'Baixo',
     seeAll: 'Ver todas as notificações',
+    openNotifications: 'Visualizar notificações',
+    hasUnread: 'Existem notificações não lidas',
+    close: 'Fechar',
   },
 } satisfies Dictionary

package/src/components/Notifications/NotificationItem.tsx

@@ -1,7 +1,6 @@
-import { Button, Flex, IconBox, OneOfColorSchemesWithVariants, SxProp, Text } from '@citric/core'
+import { Button, Flex, IconBox, OneOfColorSchemesWithVariants, Styles, SxProp, Text } from '@citric/core'
 import { Envelope, EnvelopeOpen } from '@citric/icons'
-import { Tooltip } from '@citric/ui'
-import { theme } from '@stack-spot/portal-theme'
+import { IconButton, Tooltip } from '@citric/ui'
 import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
 import { differenceInDays, parseISO } from 'date-fns'
 import { useAnchorTag } from '../../context/anchor'
@@ -27,32 +26,61 @@ interface Props {
   isSummary: boolean,
 }
 
+const style: Styles = { 
+  tooltip: {
+    '&::after':{
+      top: '25%',
+    },
+  },
+}
+
+/**
+ * NotificationHeader component that renders the header of a notification.
+ *
+ * @param props the component's props {@link NotificationItemProps}.
+ */
 const NotificationHeader = ({ notification, isSummary, onClickMarkReadUnread }: NotificationItemProps) => {
   const t = useTranslate(dictionary)
   return (
-    <Flex justifyContent="space-between" mb={2} sx={{ maxWidth: isSummary ? '344px' : '100%' }} flexWrap="nowrap">
+    <Flex justifyContent="space-between" mb={2} sx={{ maxWidth: isSummary ? '330px' : '100%' }} flexWrap="nowrap">
       <Text appearance={isSummary ? 'body2' : 'body1'} nowrapEllipsis>
         {notification.title}
       </Text>
-      <Tooltip text={notification.committed ? t.markAsRead : t.markAsUnread} position="left">
-        <IconBox appearance="circle" 
-          onClick={() => {
-            onClickMarkReadUnread(!notification.committed, 'icon')
-          }}
-          sx={{ border: `1px solid ${theme.color.light[500]}`, cursor: 'pointer' }}>
-          {notification.committed ? <Envelope /> : <EnvelopeOpen />}
-        </IconBox>
+      <Tooltip text={notification.committed ? t.markAsUnread : t.markAsRead} position="left" 
+        id={`tooltip-${notification.title}`} role="tooltip"
+        sx={style.tooltip}>
+        <IconButton aria-describedby={`tooltip-${notification.title}`}>
+          <IconBox
+            size="xs"
+            onClick={() => {
+              onClickMarkReadUnread(!notification.committed, 'icon')
+            }}
+          >
+            {notification.committed ? <Envelope /> : <EnvelopeOpen />}
+          </IconBox>
+        </IconButton>
       </Tooltip>
     </Flex>
   )
 }
 
+/**
+ * Get the number of days ago from the given date string.
+ *
+ * @param {string} dateString - The date string to calculate the days ago.
+ * @returns {number} The number of days ago.
+ */
 const getDaysAgo = (dateString: string): number => {
   const givenDate = parseISO(dateString)
   const today = new Date()
   return differenceInDays(today, givenDate)
 }
 
+/**
+ * NotificationContent component that renders the content of a notification.
+ *
+ * @param props the component's props {@link Props}.
+ */
 const NotificationContent = ({ notification, isSummary }: Props) => {
   const { formatDate } = useDateFormatter()
   const t = useTranslate(dictionary)
@@ -86,11 +114,17 @@ const NotificationContent = ({ notification, isSummary }: Props) => {
     </>
   )
 }
+
 interface NotificationFooterProps  { 
   call_to_action: string, 
   onClickMarkReadUnread: (type: 'callToAction' | 'icon') => void,
 }
 
+/**
+ * NotificationFooter component that renders the footer of a notification.
+ *
+ * @param props the component's props {@link NotificationFooterProps}.
+ */
 const NotificationFooter = ({ call_to_action, onClickMarkReadUnread }: NotificationFooterProps) => {
   const t = useTranslate(dictionary)
   const Link = useAnchorTag()
@@ -112,6 +146,11 @@ interface NotificationItemProps extends Props {
   onClickMarkReadUnread: (read: boolean, type: 'callToAction' | 'icon') => void,
 }
 
+/**
+ * NotificationItem component that renders a notification item.
+ *
+ * @param props the component's props {@link NotificationItemProps}.
+ */
 export const NotificationItem = ({ notification, isSummary, onClickMarkReadUnread }: NotificationItemProps) => (
   <Flex bg="light.400" p="3 3 3 5" r="xs"
     flexDirection="column" w="100%" sx={styles.item(statusToColor[notification.criticality], notification.committed)}>

package/src/components/StatusCircle.tsx

@@ -46,8 +46,7 @@ interface WithTooltip {
 /**
  * CircleWithTooltip component that displays a circle with an optional tooltip.
  *
- * @param {WithTooltip} props - The props for the CircleWithTooltip component.
- * @returns {JSX.Element} The CircleWithTooltip component.
+ * @param props the component's props {@link WithTooltip}.
  */
 const CircleWithTooltip = ({ tooltip, className, style }: WithTooltip) => {
   const circle = <div style={style} className={className}></div>
@@ -55,11 +54,10 @@ const CircleWithTooltip = ({ tooltip, className, style }: WithTooltip) => {
 }
 
 /**
- * StatusCircle component that displays a colored circle based on the status.
+ * Renders a component that displays a colored circle based on the status.
  * It also supports an optional tooltip.
  *
- * @param {Props} props - The props for the StatusCircle component.
- * @returns {JSX.Element} The StatusCircle component.
+ * @param props the component's props {@link Props}.
  */
 export const StatusCircle = styled(CircleWithTooltip)<Props>`
   background-color: ${({ status, theme }) => getColorFromStatus(theme as any, status)};

package/src/index.ts

@@ -1,9 +1,11 @@
 export { BannerWarning } from './components/BannerWarning'
 export { ChatBot } from './components/ChatBot'
+export { AsyncContent } from './components/AsyncContent'
 export { useKeyboardControls } from './hooks/keyboard'
 export { openServiceNowChat, dictionary as serviceNowDictionary, useServiceNowChatButtonVisibility, useServiceNowEffect } from './hooks/service-now'
 export { useCheckTextOverflow } from './hooks/text'
 export { titleEffect, useTitleEffect } from './hooks/title'
 export { useEffectOnce } from './hooks/use-effect-once'
+export { useDateFormatter } from './hooks/date'
 export * from './utils/accessibility'
 export * from './utils/cookie'