@stack-spot/portal-components 0.0.17 → 1.0.0-dev.1768482754546

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

@@ -0,0 +1 @@
+{"version":3,"file":"styled.js","sourceRoot":"","sources":["../../../../src/components/form/Select/styled.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAE1C,MAAM,CAAC,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAA6C;;;YAGpE,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,YAAY;;;;;;;;;;;;;;;;;;wBAkBtB,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;wBAEtB,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;0BAoBpB,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;eACjC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;;;;;;;;0BAWX,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC;8BACpB,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCAwDtB,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;8BAIxB,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBA4B/B,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;;;;;;;;yBAWlB,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,SAAS,GAAG,CAAC;;;;;;CAMxD,CAAA"}

package/dist/components/form/Select/types.d.ts

@@ -0,0 +1,103 @@
+import { InputHTMLAttributes } from 'react';
+export interface GenericAccessibleLabel {
+    /**
+     * This is how the option's label will be rendered inside the dropdown list. This can be any React element.
+     *
+     * Attention: be careful, this should not have any important information that can't be represented through text (accessibility).
+     */
+    option: React.ReactElement;
+    /**
+     * This is a required text representation of the option. This is used for accessibility.
+     */
+    text: string;
+    /**
+     * This is how the option's label will be rendered as the select current value.
+     *
+     * If not provided, will be rendered using `option`.
+     */
+    selected?: React.ReactElement;
+}
+export interface DetailedLabel {
+    title: string;
+    description?: string;
+    image?: React.ReactElement;
+}
+export type AccessibleLabel = string | DetailedLabel | GenericAccessibleLabel;
+type FilterObjectByValueType<T, Type> = {
+    [K in keyof T as T[K] extends Type ? K : never]: T[K];
+};
+export type KeyOfType<Data, Type> = Data extends Record<string, any> ? keyof FilterObjectByValueType<Data, Type> : never;
+interface BaseSelectProps<Option, Label extends AccessibleLabel> extends Omit<InputHTMLAttributes<HTMLSelectElement>, 'value' | 'onChange'> {
+    /**
+     * The current value.
+     */
+    value: Option | undefined;
+    /**
+     * The label for the empty option. The empty option sets the value to undefined.
+     *
+     * If this is not set, there won't be an empty option for this select.
+     */
+    emptyOption?: Label;
+    /**
+     * The options to render in this selection menu.
+     */
+    options: Option[] | undefined;
+    /**
+     * Provides the value of each option. This can be either a key of the option object or a function that receives the option and returns
+     * the value.
+     *
+     * This is required if the options don't have a relevant value returned by `toString()`.
+     *
+     * @example
+     * - `'id'`
+     * - `(option) => option.id`
+     */
+    renderValue?: KeyOfType<Option, string> | ((item: NonNullable<Option>) => string);
+    /**
+     * Provides the label of each option. This can be either a key of the option object or a function that receives the option and returns
+     * the label.
+     *
+     * This is required if the options don't have a relevant value returned by `toString()`.
+     *
+     * @example
+     * - `'name'`
+     * - `(option) => option.name`
+     */
+    renderLabel?: KeyOfType<Option, Label> | ((item: NonNullable<Option>) => Label);
+    /**
+     * Called when the value changes.
+     * @param value the new value.
+     */
+    onChange: (value: Option | undefined) => void;
+    /**
+     * The maximum number of items before showing a vertical scroll bar.
+     * @default 6
+     */
+    maxItems?: number;
+    /**
+     * Whether or not the options are being loaded. The field will become disabled while isLoading is true.
+     */
+    isLoading?: boolean;
+}
+interface OptionalSelectProps<Option, Label extends AccessibleLabel> extends BaseSelectProps<Option, Label> {
+    emptyOption: Label;
+}
+interface RequiredSelectProps<Option, Label extends AccessibleLabel> extends Omit<BaseSelectProps<Option, Label>, 'onChange'> {
+    emptyOption?: undefined;
+    value: Option | undefined;
+    onChange: (value: Option) => void;
+}
+export type SelectProps<Option> = OptionalSelectProps<Option, string> | RequiredSelectProps<Option, string>;
+export type DetailedSelectProps<Option> = OptionalSelectProps<Option, DetailedLabel> | RequiredSelectProps<Option, DetailedLabel>;
+export type CustomSelectProps<Option> = (OptionalSelectProps<Option, GenericAccessibleLabel> | RequiredSelectProps<Option, GenericAccessibleLabel>) & {
+    /**
+     * Controls the height of component when it's closed.
+     *
+     * Developer note: it would be nice to automatically calculate this instead of expecting a prop.
+     *
+     * @default '42px'
+     */
+    height?: string;
+};
+export {};
+//# sourceMappingURL=types.d.ts.map

package/dist/components/form/Select/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/form/Select/types.ts"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/components/form/Select/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/components/form/Select/types.ts"],"names":[],"mappings":""}

package/dist/components/form/Select/utils.d.ts

@@ -0,0 +1,3 @@
+import { AccessibleLabel, GenericAccessibleLabel } from './types.js';
+export declare function parseLabel(label: AccessibleLabel): GenericAccessibleLabel;
+//# sourceMappingURL=utils.d.ts.map

package/dist/components/form/Select/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../src/components/form/Select/utils.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAA;AAEjE,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,GAAG,sBAAsB,CAwBzE"}

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

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Text } from '@citric/core';
+export function parseLabel(label) {
+    if (typeof label === 'string') {
+        return {
+            option: _jsx(Text, { children: label }),
+            text: label,
+            selected: _jsx(Text, { className: "clipped-text", children: label }),
+        };
+    }
+    if ('title' in label) {
+        return {
+            option: (_jsxs("div", { className: "detailed", children: [label.image && _jsx("div", { className: "image", children: label.image }), _jsxs("div", { className: "text-content", children: [_jsx(Text, { className: "title", children: label.title }), label.description && _jsx(Text, { className: "description", appearance: "microtext1", children: label.description })] })] })),
+            text: `${label.title}: ${label.description}`,
+            selected: _jsx(Text, { className: "clipped-text", children: label.title }),
+        };
+    }
+    return label;
+}
+//# sourceMappingURL=utils.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../src/components/form/Select/utils.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAGnC,MAAM,UAAU,UAAU,CAAC,KAAsB;IAC/C,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;QAC9B,OAAO;YACL,MAAM,EAAE,KAAC,IAAI,cAAE,KAAK,GAAQ;YAC5B,IAAI,EAAE,KAAK;YACX,QAAQ,EAAE,KAAC,IAAI,IAAC,SAAS,EAAC,cAAc,YAAE,KAAK,GAAQ;SACxD,CAAA;IACH,CAAC;IACD,IAAI,OAAO,IAAI,KAAK,EAAE,CAAC;QACrB,OAAO;YACL,MAAM,EAAE,CACN,eAAK,SAAS,EAAC,UAAU,aACtB,KAAK,CAAC,KAAK,IAAI,cAAK,SAAS,EAAC,OAAO,YAAE,KAAK,CAAC,KAAK,GAAO,EAC1D,eAAK,SAAS,EAAC,cAAc,aAC3B,KAAC,IAAI,IAAC,SAAS,EAAC,OAAO,YAAE,KAAK,CAAC,KAAK,GAAQ,EAC3C,KAAK,CAAC,WAAW,IAAI,KAAC,IAAI,IAAC,SAAS,EAAC,aAAa,EAAC,UAAU,EAAC,YAAY,YAAE,KAAK,CAAC,WAAW,GAAQ,IAClG,IACF,CACP;YACD,IAAI,EAAE,GAAG,KAAK,CAAC,KAAK,KAAK,KAAK,CAAC,WAAW,EAAE;YAC5C,QAAQ,EAAE,KAAC,IAAI,IAAC,SAAS,EAAC,cAAc,YAAE,KAAK,CAAC,KAAK,GAAQ;SAC9D,CAAA;IACH,CAAC;IACD,OAAO,KAAK,CAAA;AACd,CAAC"}

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

@@ -0,0 +1,31 @@
+import { ReactElement } from 'react';
+import { ErrorProps } from '../AsyncContent.js';
+import { GetTenantNotificationsResponse, NotificationTypeFilters } from './types.js';
+interface Props {
+    hasUnreadNotification?: boolean;
+}
+interface Props {
+    onMarkAsReadUnread: (notificationId: string, read: boolean, type: 'callToAction' | 'icon') => void;
+    notifications?: GetTenantNotificationsResponse[];
+    isLoading: boolean;
+    error?: any;
+    onClickViewNotifications: () => void;
+    onClickViewAll: () => void;
+    errorDetails: ErrorProps;
+    fetchNextPage: () => void;
+    hasNextPage: boolean;
+    type?: NotificationTypeFilters;
+    onUpdateType: (updatedType?: NotificationTypeFilters) => void;
+    placeholderComponent: ReactElement;
+    isSummary: boolean;
+}
+/**
+ * NotificationComponent component that renders the notifications panel.
+ * It renders the notification icon and when clicked the notification modal is opened.
+ *
+ * @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 {};
+//# sourceMappingURL=NotificationComponent.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationComponent.d.ts","sourceRoot":"","sources":["../../../src/components/notification/NotificationComponent.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,YAAY,EAAqC,MAAM,OAAO,CAAA;AAEvE,OAAO,EAAgB,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAK1D,OAAO,EAAE,8BAA8B,EAAE,uBAAuB,EAAc,MAAM,SAAS,CAAA;AAE7F,UAAU,KAAK;IACb,qBAAqB,CAAC,EAAE,OAAO,CAAC;CACjC;AAyID,UAAU,KAAK;IACb,kBAAkB,EAAE,CAAC,cAAc,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,cAAc,GAAG,MAAM,KAAK,IAAI,CAAC;IACnG,aAAa,CAAC,EAAE,8BAA8B,EAAE,CAAC;IACjD,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,wBAAwB,EAAE,MAAM,IAAI,CAAC;IACrC,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,YAAY,EAAE,UAAU,CAAC;IACzB,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,WAAW,EAAE,OAAO,CAAC;IACrB,IAAI,CAAC,EAAE,uBAAuB,CAAC;IAC/B,YAAY,EAAE,CAAC,WAAW,CAAC,EAAE,uBAAuB,KAAK,IAAI,CAAC;IAC9D,oBAAoB,EAAE,YAAY,CAAC;IACnC,SAAS,EAAE,OAAO,CAAC;CACpB;AAGD;;;;;;GAMG;AACH,eAAO,MAAM,qBAAqB,GAAI,0NAKnC,KAAK,4CAwHP,CAAA"}

package/dist/components/notification/NotificationComponent.js

@@ -0,0 +1,176 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Box, Button, Flex, IconBox, Text } from '@citric/core';
+import { Bell, TimesMini } from '@citric/icons';
+import { IconButton } from '@citric/ui';
+import { listToClass, theme } from '@stack-spot/portal-theme';
+import { useTranslate } from '@stack-spot/portal-translate';
+import { useLayoutEffect, useRef, useState } from 'react';
+import styled from 'styled-components';
+import { AsyncContent } from '../AsyncContent.js';
+import { InfiniteScroll } from '../InfiniteScroll.js';
+import { ScrollView } from '../ScrollView.js';
+import { StatusCircle } from '../StatusCircle.js';
+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 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%;
+  }
+`;
+/**
+ * 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) => {
+    const { type, onChangeFilterType, ariaLabel, label, enumType } = props;
+    return (_jsx(Button, { appearance: "text", role: "button", "aria-label": ariaLabel, "aria-pressed": type === enumType, onClick: () => onChangeFilterType(enumType), sx: { borderColor: type === enumType ? 'primary' : 'transparent' }, children: _jsx(Text, { colorScheme: "inverse", appearance: "microtext1", children: label }) }));
+};
+/**
+ * NotificationsFilter component that renders the filter options for notifications.
+ *
+ * @param props the component's props {@link NotificationsFilterProps}.
+ */
+const NotificationsFilter = ({ type, onChangeFilterType }) => {
+    const t = useTranslate(dictionary);
+    return (_jsxs(Flex, { alignItems: "center", sx: { gap: '4px' }, my: "5", children: [_jsx(Button, { "aria-pressed": !type, appearance: "text", role: "button", "aria-label": t.filterAll, onClick: () => onChangeFilterType(), sx: { borderColor: !type ? 'primary' : 'transparent' }, children: _jsx(Text, { colorScheme: "inverse", appearance: "microtext1", children: t.all }) }), _jsx(NotificationFilterButton, { type: type, onChangeFilterType: onChangeFilterType, ariaLabel: t.filterUnread, label: t.unread, enumType: UnreadType.Unread }), _jsx(NotificationFilterButton, { type: type, onChangeFilterType: onChangeFilterType, ariaLabel: t.filterHigh, label: t.high, enumType: 'HIGH' }), _jsx(NotificationFilterButton, { type: type, onChangeFilterType: onChangeFilterType, ariaLabel: t.filterMedium, label: t.medium, enumType: 'MEDIUM' }), _jsx(NotificationFilterButton, { type: type, onChangeFilterType: onChangeFilterType, ariaLabel: t.filterLow, label: t.low, enumType: 'LOW' })] }));
+};
+// fixme: remove this component in the next major
+/**
+ * NotificationComponent component that renders the notifications panel.
+ * It renders the notification icon and when clicked the notification modal is opened.
+ *
+ * @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 const NotificationComponent = ({ hasUnreadNotification, onMarkAsReadUnread, notifications, isLoading, error, type, onUpdateType, onClickViewNotifications, onClickViewAll, errorDetails, fetchNextPage, hasNextPage, placeholderComponent, isSummary = false, }) => {
+    const t = useTranslate(dictionary);
+    const [visible, setVisible] = useState(false);
+    const seeAllButtonRef = useRef(null);
+    const updateType = (updatedType) => {
+        onUpdateType(updatedType);
+    };
+    useLayoutEffect(() => {
+        const handleKeyDown = (event) => {
+            if (event.key === 'Escape') {
+                const focusedElement = document.activeElement;
+                const notificationItems = document.querySelectorAll('[id^="notificationItem-"]');
+                let isFocusedOnNotificationItem = false;
+                notificationItems.forEach((item) => {
+                    if (item.contains(focusedElement)) {
+                        isFocusedOnNotificationItem = true;
+                    }
+                });
+                if (isFocusedOnNotificationItem) {
+                    seeAllButtonRef?.current?.focus();
+                }
+                else {
+                    setVisible(false);
+                }
+            }
+        };
+        document.addEventListener('keydown', handleKeyDown);
+        return () => {
+            document.removeEventListener('keydown', handleKeyDown);
+        };
+    }, []);
+    return (_jsxs(Flex, { sx: { position: 'relative' }, children: [_jsx(IconButton, { "aria-label": t.openNotifications, onClick: () => {
+                    onClickViewNotifications();
+                    setVisible(!visible);
+                }, sx: { border: 'none', bg: 'transparent' }, "aria-expanded": visible, children: _jsx(IconBox, { size: "md", className: "notificationsTour", children: _jsx(Bell, {}) }) }), hasUnreadNotification && _jsx(Box, { sx: { position: 'absolute', right: '2px' }, "aria-label": t.hasUnread, children: _jsx(StatusCircle, { status: 'danger' }) }), visible && _jsx(Overlay, { onClick: () => setVisible(false) }), _jsx(NotificationsComponent, { className: listToClass(['notification-list', visible ? 'visible' : undefined]), "$scroll": true, "aria-hidden": !visible, children: _jsxs(Flex, { className: "content", p: 5, flexDirection: "column", justifyContent: "space-between", children: [_jsxs(Flex, { w: "100%", children: [_jsxs(Flex, { justifyContent: "space-between", w: "100%", children: [_jsx(Text, { appearance: "h4", children: t.notifications }), _jsx(IconButton, { onClick: () => setVisible(false), "aria-label": t.close, children: _jsx(IconBox, { size: "xs", children: _jsx(TimesMini, {}) }) })] }), _jsx(NotificationsFilter, { type: type, onChangeFilterType: updateType }), _jsx(AsyncContent, { error: error, errorDetails: errorDetails, loading: isLoading, children: notifications?.length ? _jsx(StyledBox, { children: _jsx(ScrollView, { id: "scrollableNotifications", direction: "vertical", style: { maxHeight: 'calc(100vh - 300px)' }, children: _jsx(InfiniteScroll, { dataLength: notifications?.length || 0, next: fetchNextPage, hasMore: hasNextPage, scrollableTarget: "scrollableNotifications", children: _jsx(Flex, { sx: { gap: '4px' }, mr: "3", flexDirection: "column", children: notifications?.map((item, index) => (_jsx(NotificationItem, { notification: item, id: `notificationItem-${index}`, isSummary: isSummary, onClickMarkReadUnread: (read, type) => onMarkAsReadUnread(item.id, read, type) }, item.id))) }) }) }) })
+                                        :
+                                            _jsx(_Fragment, { children: placeholderComponent }) })] }), _jsx(Flex, { w: "100%", pt: 3, children: _jsx(Button, { ref: seeAllButtonRef, size: "sm", sx: { width: '100%' }, colorScheme: "inverse", appearance: "text", onClick: () => {
+                                    setVisible(false);
+                                    onClickViewAll();
+                                }, children: _jsx(Text, { appearance: "microtext1", children: t.viewAll }) }) })] }) })] }));
+};
+const dictionary = {
+    en: {
+        notifications: 'Notifications',
+        all: 'All',
+        filterAll: 'Filter all notifications',
+        filterUnread: 'Filter unread notifications',
+        filterHigh: 'Filter high notifications',
+        filterMedium: 'Filter medium notifications',
+        filterLow: 'Filter low notifications',
+        unread: 'Unread',
+        high: 'High',
+        medium: 'Medium',
+        low: 'Low',
+        viewAll: 'View all notifications',
+        openNotifications: 'View notifications',
+        hasUnread: 'Has Unread notifications',
+        close: 'Close',
+    },
+    pt: {
+        notifications: 'Notificações',
+        all: 'Todos',
+        filterAll: 'Filtrar todas as notificações ',
+        filterUnread: 'Filtrar notificações não lidas',
+        filterHigh: 'Filtrar notificações criticidade alta',
+        filterMedium: 'Filtrar notificações criticidade média',
+        filterLow: 'Filtrar notificações criticidade baixa',
+        unread: 'Não lidas',
+        high: 'Alto',
+        medium: 'Médio',
+        low: 'Baixo',
+        viewAll: 'Ver todas as notificações',
+        openNotifications: 'Visualizar notificações',
+        hasUnread: 'Existem notificações não lidas',
+        close: 'Fechar',
+    },
+};
+//# sourceMappingURL=NotificationComponent.js.map

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

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

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

@@ -0,0 +1,51 @@
+import { GetTenantNotificationsResponse } from './types.js';
+interface Props {
+    notification: GetTenantNotificationsResponse;
+    isSummary: boolean;
+    id?: string;
+    onClickViewNotification?: () => void;
+}
+interface DeprecatedNotificationItemProps extends Props {
+    /**
+     * @deprecated use `onCommit` and `onClickAction` instead.
+     *
+     * Function to call when the user marks a notification as read or unread. This can happen either through the mail icon or when the user
+     * clicks the action button of a notification. Type will be "icon" on the first case or "callToAction" on the former.
+     *
+     * Tip: clicking the action button (callToAction) should only change the read status if the message is unread. This is not treated by this
+     * component, be sure to handle it on your side.
+     *
+     * Deprecation warning: since the deprecation, the parameter `read` is always true.
+     */
+    onClickMarkReadUnread: (read: boolean, type: 'callToAction' | 'icon') => void | Promise<void>;
+}
+interface NewNotificationItemProps extends Props {
+    /**
+     * Function to call when the user marks a notification as read (committed).
+     */
+    onCommit: () => void;
+    /**
+     * Function to call when the user marks a notification as unread (uncommitted).
+     */
+    onUncommit: () => void;
+    /**
+     * Whenever the user clicks the action button of a notification, the notification is marked as read (committed) and the browser is
+     * redirected to the page that corresponds to the action.
+     *
+     * If you need additional behavior, use this parameter, which is a function to call whenever the button is clicked.
+     */
+    onClickAction?: () => void;
+    /**
+     * Function to call when the user clicks in read more button.
+     */
+    onClickViewNotification?: () => void;
+}
+type NotificationItemProps = DeprecatedNotificationItemProps | NewNotificationItemProps;
+/**
+ * NotificationItem component that renders a notification item.
+ *
+ * @param props the component's props {@link NotificationItemProps}.
+ */
+export declare const NotificationItem: ({ notification, isSummary, ...props }: NotificationItemProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=NotificationItem.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationItem.d.ts","sourceRoot":"","sources":["../../../src/components/notification/NotificationItem.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,8BAA8B,EAAE,MAAM,SAAS,CAAA;AAexD,UAAU,KAAK;IACb,YAAY,EAAE,8BAA8B,CAAC;IAC7C,SAAS,EAAE,OAAO,CAAC;IAEnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,uBAAuB,CAAC,EAAE,MAAM,IAAI,CAAC;CACtC;AA6LD,UAAU,+BAAgC,SAAQ,KAAK;IACrD;;;;;;;;;;OAUG;IACH,qBAAqB,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,cAAc,GAAG,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CAC/F;AAED,UAAU,wBAAyB,SAAQ,KAAK;IAC9C;;OAEG;IACH,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B;;OAEG;IACH,uBAAuB,CAAC,EAAE,MAAM,IAAI,CAAC;CACtC;AAED,KAAK,qBAAqB,GAAG,+BAA+B,GAAG,wBAAwB,CAAA;AAQvF;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,GAAI,uCAAuC,qBAAqB,4CAgD5F,CAAA"}

package/dist/components/notification/NotificationItem.js

@@ -0,0 +1,165 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Button, Flex, IconBox, Text } from '@citric/core';
+import { Envelope, EnvelopeOpen, ExternalLink } from '@citric/icons';
+import { IconButton, Tooltip } from '@citric/ui';
+import { useTranslate } from '@stack-spot/portal-translate';
+import { differenceInDays, parseISO } from 'date-fns';
+import styled from 'styled-components';
+import { useAnchorTag } from '../../context/anchor.js';
+import { useGetNotificationTitleAndDescription } from '../../context/notification/hooks.js';
+import { useDateFormatter } from '../../hooks/date.js';
+import { LazyMarkdown } from '../LazyMarkdown/index.js';
+const styles = {
+    item: (color, isRead) => ({
+        borderLeft: `2px solid ${color}`,
+        opacity: isRead ? 0.5 : 1,
+    }),
+};
+const statusToColor = {
+    LOW: 'success.500',
+    MEDIUM: 'warning.500',
+    HIGH: 'danger.500',
+};
+const style = {
+    notificationDescription: {
+        display: '-webkit-box',
+        WebkitBoxOrient: 'vertical',
+        overflow: 'hidden',
+        WebkitLineClamp: '2',
+        lineHeight: '1.5',
+        maxHeight: '3em',
+        maxWidth: '340px',
+    },
+    notificationTooltip: {
+        overflowWrap: 'break-word',
+    },
+};
+/**
+ * NotificationHeader component that renders the header of a notification.
+ *
+ * @param props the component's props.
+ */
+const NotificationHeader = ({ title, isSummary }) => (_jsx(Flex, { justifyContent: "space-between", mb: 2, sx: { maxWidth: isSummary ? '330px' : '100%' }, flexWrap: "nowrap", children: _jsx(Text, { appearance: isSummary ? 'body2' : 'body1', weight: "medium", nowrapEllipsis: true, mr: 5, children: title }) }));
+/**
+ * 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) => {
+    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, onClickViewNotification }) => {
+    const { formatRelativeWithTooltip } = useDateFormatter();
+    const relativeDate = formatRelativeWithTooltip(notification.trigger_at);
+    const Link = useAnchorTag();
+    const t = useTranslate(dictionary);
+    const { description } = useGetNotificationTitleAndDescription(notification);
+    const daysAgo = getDaysAgo(notification.trigger_at);
+    const components = () => ({
+        ul: (props) => (_jsx(Text, { as: "ul", appearance: "body2", colorScheme: "light.700", sx: { listStyleType: 'disc', marginLeft: '2rem', marginBottom: '1em' }, ...props })),
+        li: (props) => (_jsx(Text, { as: "li", appearance: "body2", colorScheme: "light.700", sx: { marginBottom: '0.5em' }, ...props })),
+        p: (props) => (_jsx(Text, { as: "p", appearance: "body2", sx: { marginBottom: '1em' }, ...props })),
+    });
+    const navigateToNotificationPosition = (ev, anchorText) => {
+        ev.preventDefault();
+        const checkElement = setInterval(() => {
+            const target = document.getElementById(anchorText);
+            if (target) {
+                target.scrollIntoView({ behavior: 'smooth', block: 'start' });
+                clearInterval(checkElement);
+            }
+        }, 100);
+    };
+    return (_jsxs(_Fragment, { children: [!isSummary && _jsx(Flex, { mt: 4, mb: 3, flexDirection: "column", children: _jsx(LazyMarkdown, { components: components(), children: description }) }), isSummary && (_jsx(Text, { appearance: "body2", mb: 3, sx: style.notificationDescription, children: handleTextMark(description) })), _jsxs(Flex, { justifyContent: "space-between", children: [_jsxs(Flex, { children: [_jsx(Text, { appearance: "microtext1", colorScheme: "light.700", children: t[notification.context] }), _jsx(Text, { appearance: "microtext1", colorScheme: "light.700", mx: "2", children: "\u2022" }), !isSummary && relativeDate && (_jsxs(_Fragment, { children: [_jsx(Text, { appearance: "microtext1", colorScheme: "light.700", children: relativeDate.relative }), _jsx(Text, { appearance: "microtext1", colorScheme: "light.700", mx: "2", children: "\u2022" })] })), _jsx(Text, { appearance: "microtext1", colorScheme: "light.700", children: daysAgo > 0 ? daysAgo + ' ' + t.daysAgo : t.today })] }), isSummary && description.length > 120 && (_jsx(Link, { href: "/notifications", onClick: (ev) => {
+                            onClickViewNotification?.();
+                            navigateToNotificationPosition(ev, `notification-item-${notification.id}`);
+                        }, children: _jsx(Text, { appearance: "microtext1", colorScheme: "light.700", children: t.readMore }) }))] })] }));
+};
+/**
+ * NotificationFooter component that renders the footer of a notification.
+ *
+ * @param props the component's props {@link NotificationFooterProps}.
+ */
+const NotificationFooter = ({ actionURL, onClickAction, title }) => {
+    const t = useTranslate(dictionary);
+    const Link = useAnchorTag();
+    return (_jsx(Flex, { mt: "5", children: _jsxs(Button, { size: "sm", colorScheme: "inverse", appearance: "text", onClick: onClickAction, as: Link, href: actionURL, "aria-label": t.viewNotification.replace('%s', title || t.moreDetails), target: "_blank", children: [_jsx(Text, { sx: { mr: 2, textDecoration: 'underline' }, children: t.moreDetails }), _jsx(IconBox, { size: "xs", children: _jsx(ExternalLink, {}) })] }) }));
+};
+const StyledBox = styled(Box) `
+  .notification-item {
+    padding: ${({ $isSummary }) => $isSummary ? '8px 8px 8px 16px' : '16px'};
+  }
+`;
+/**
+ * NotificationItem component that renders a notification item.
+ *
+ * @param props the component's props {@link NotificationItemProps}.
+ */
+export const NotificationItem = ({ notification, isSummary, ...props }) => {
+    const t = useTranslate(dictionary);
+    const { title } = useGetNotificationTitleAndDescription(notification);
+    const committed = notification.committed;
+    function commit() {
+        if ('onCommit' in props)
+            props.onCommit();
+        else
+            props.onClickMarkReadUnread(true, 'icon');
+    }
+    function uncommit() {
+        if ('onUncommit' in props)
+            props.onUncommit();
+        else
+            props.onClickMarkReadUnread(false, 'icon');
+    }
+    function clickAction() {
+        if ('onCommit' in props) {
+            if (!committed)
+                props.onCommit();
+            props.onClickAction?.();
+        }
+        else
+            props.onClickMarkReadUnread(true, 'callToAction');
+    }
+    return (_jsxs(StyledBox, { sx: { position: 'relative' }, id: props.id, "$isSummary": isSummary, children: [_jsxs(Flex, { bg: "light.400", r: "xs", flexWrap: "nowrap", className: "notification-item", flexDirection: "column", w: "100%", sx: styles.item(statusToColor[notification.criticality], committed), children: [_jsx(NotificationHeader, { title: title, isSummary: isSummary }), _jsx(NotificationContent, { notification: notification, isSummary: isSummary, onClickViewNotification: props.onClickViewNotification }), notification.call_to_action && _jsx(NotificationFooter, { actionURL: notification.call_to_action, onClickAction: clickAction, title: title })] }), _jsx(Box, { sx: { position: 'absolute', top: '8px', right: '8px' }, children: _jsx(Tooltip, { text: committed ? t.committed : t.uncommitted, position: "left", children: _jsx(IconButton, { "aria-label": committed ? t.committed : t.uncommitted, onClick: () => committed ? uncommit() : commit(), children: _jsx(IconBox, { size: "xs", style: { opacity: committed ? 0.5 : 1 }, children: committed ? _jsx(EnvelopeOpen, {}) : _jsx(Envelope, {}) }) }) }) })] }));
+};
+function handleTextMark(text) {
+    // eslint-disable-next-line no-useless-escape
+    return text.replace(/[^\p{L}\p{N}\s\p{Emoji_Presentation}:!'()"\/_-]/gu, '');
+}
+const dictionary = {
+    en: {
+        ACCOUNT: 'Account',
+        WORKSPACE: 'Workspace',
+        STUDIO: 'Studio',
+        AI: 'AI',
+        daysAgo: 'days ago',
+        today: 'today',
+        committed: 'This notification has been read.',
+        uncommitted: 'This notification has not been read yet. Click to mark as read.',
+        moreDetails: 'More details',
+        viewNotification: 'View notification %s',
+        readMore: 'Read more',
+    },
+    pt: {
+        ACCOUNT: 'Conta',
+        WORKSPACE: 'Workspace',
+        STUDIO: 'Estúdio',
+        AI: 'AI',
+        daysAgo: 'dias atrás',
+        today: 'hoje',
+        committed: 'Esta notificação já foi lida.',
+        uncommitted: 'Esta notificação ainda não foi lida. Clique para marcar como lida.',
+        moreDetails: 'Acessar detalhes',
+        viewNotification: 'Visualizar notificação %s',
+        readMore: 'Ler mais',
+    },
+};
+//# sourceMappingURL=NotificationItem.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationItem.js","sourceRoot":"","sources":["../../../src/components/notification/NotificationItem.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAiD,IAAI,EAAE,MAAM,cAAc,CAAA;AAC9G,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,eAAe,CAAA;AACpE,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,YAAY,CAAA;AAChD,OAAO,EAAc,YAAY,EAAE,MAAM,8BAA8B,CAAA;AACvE,OAAO,EAAE,gBAAgB,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAA;AACrD,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAA;AACnD,OAAO,EAAE,qCAAqC,EAAE,MAAM,kCAAkC,CAAA;AACxF,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAA;AACnD,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAG9C,MAAM,MAAM,GAAG;IACb,IAAI,EAAE,CAAC,KAAa,EAAE,MAAe,EAAE,EAAE,CAAC,CAAC;QACzC,UAAU,EAAE,aAAa,KAAK,EAAE;QAChC,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;KAC1B,CAAC;CACgD,CAAA;AAEpD,MAAM,aAAa,GAAkD;IACnE,GAAG,EAAE,aAAa;IAClB,MAAM,EAAE,aAAa;IACrB,IAAI,EAAE,YAAY;CACnB,CAAA;AAUD,MAAM,KAAK,GAAW;IACpB,uBAAuB,EAAE;QACvB,OAAO,EAAE,aAAa;QACtB,eAAe,EAAE,UAAU;QAC3B,QAAQ,EAAE,QAAQ;QAClB,eAAe,EAAE,GAAG;QACpB,UAAU,EAAE,KAAK;QACjB,SAAS,EAAE,KAAK;QAChB,QAAQ,EAAE,OAAO;KAClB;IACD,mBAAmB,EAAE;QACnB,YAAY,EAAE,YAAY;KAC3B;CACF,CAAA;AAED;;;;GAIG;AACH,MAAM,kBAAkB,GAAG,CAAC,EAAE,KAAK,EAAE,SAAS,EAAyC,EAAE,EAAE,CAAC,CAC1F,KAAC,IAAI,IAAC,cAAc,EAAC,eAAe,EAAC,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,QAAQ,EAAE,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,EAAE,EAAE,QAAQ,EAAC,QAAQ,YAC3G,KAAC,IAAI,IAAC,UAAU,EAAE,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,EAAE,MAAM,EAAC,QAAQ,EAAC,cAAc,QAAC,EAAE,EAAE,CAAC,YAClF,KAAK,GACD,GACF,CACR,CAAA;AAED;;;;;GAKG;AACH,MAAM,UAAU,GAAG,CAAC,UAAkB,EAAU,EAAE;IAChD,MAAM,SAAS,GAAG,QAAQ,CAAC,UAAU,CAAC,CAAA;IACtC,MAAM,KAAK,GAAG,IAAI,IAAI,EAAE,CAAA;IACxB,OAAO,gBAAgB,CAAC,KAAK,EAAE,SAAS,CAAC,CAAA;AAC3C,CAAC,CAAA;AAED;;;;GAIG;AACH,MAAM,mBAAmB,GAAG,CAAC,EAAE,YAAY,EAAE,SAAS,EAAE,uBAAuB,EAAS,EAAE,EAAE;IAC1F,MAAM,EAAE,yBAAyB,EAAE,GAAG,gBAAgB,EAAE,CAAA;IACxD,MAAM,YAAY,GAAG,yBAAyB,CAAC,YAAY,CAAC,UAAU,CAAC,CAAA;IACvE,MAAM,IAAI,GAAG,YAAY,EAAE,CAAA;IAE3B,MAAM,CAAC,GAAG,YAAY,CAAC,UAAU,CAAC,CAAA;IAClC,MAAM,EAAE,WAAW,EAAE,GAAG,qCAAqC,CAAC,YAAY,CAAC,CAAA;IAC3E,MAAM,OAAO,GAAG,UAAU,CAAC,YAAY,CAAC,UAAU,CAAC,CAAA;IAEnD,MAAM,UAAU,GAAG,GAAG,EAAE,CAAC,CAAC;QACxB,EAAE,EAAE,CAAC,KAAU,EAAE,EAAE,CAAC,CAClB,KAAC,IAAI,IACH,EAAE,EAAC,IAAI,EACP,UAAU,EAAC,OAAO,EAClB,WAAW,EAAC,WAAW,EACvB,EAAE,EAAE,EAAE,aAAa,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,YAAY,EAAE,KAAK,EAAE,KAClE,KAAK,GACT,CACH;QACD,EAAE,EAAE,CAAC,KAAU,EAAE,EAAE,CAAC,CAClB,KAAC,IAAI,IACH,EAAE,EAAC,IAAI,EACP,UAAU,EAAC,OAAO,EAClB,WAAW,EAAC,WAAW,EACvB,EAAE,EAAE,EAAE,YAAY,EAAE,OAAO,EAAE,KACzB,KAAK,GACT,CACH;QACD,CAAC,EAAE,CAAC,KAAU,EAAE,EAAE,CAAC,CACjB,KAAC,IAAI,IACH,EAAE,EAAC,GAAG,EACN,UAAU,EAAC,OAAO,EAClB,EAAE,EAAE,EAAE,YAAY,EAAE,KAAK,EAAE,KACvB,KAAK,GACT,CACH;KACF,CAAC,CAAA;IAEF,MAAM,8BAA8B,GAAG,CAAC,EAAiC,EAAE,UAAkB,EAAE,EAAE;QAC/F,EAAE,CAAC,cAAc,EAAE,CAAA;QAEnB,MAAM,YAAY,GAAG,WAAW,CAAC,GAAG,EAAE;YACpC,MAAM,MAAM,GAAG,QAAQ,CAAC,cAAc,CAAC,UAAU,CAAC,CAAA;YAClD,IAAI,MAAM,EAAE,CAAC;gBACX,MAAM,CAAC,cAAc,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC,CAAA;gBAC7D,aAAa,CAAC,YAAY,CAAC,CAAA;YAC7B,CAAC;QACH,CAAC,EAAE,GAAG,CAAC,CAAA;IACT,CAAC,CAAA;IAED,OAAO,CACL,8BACG,CAAC,SAAS,IAAI,KAAC,IAAI,IAAC,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,aAAa,EAAC,QAAQ,YACvD,KAAC,YAAY,IAAC,UAAU,EAAE,UAAU,EAAE,YAAG,WAAW,GAAgB,GAC/D,EACN,SAAS,IAAI,CACZ,KAAC,IAAI,IAAC,UAAU,EAAC,OAAO,EAAC,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,KAAK,CAAC,uBAAuB,YAC9D,cAAc,CAAC,WAAW,CAAC,GACvB,CACR,EACD,MAAC,IAAI,IAAC,cAAc,EAAC,eAAe,aAClC,MAAC,IAAI,eACH,KAAC,IAAI,IAAC,UAAU,EAAC,YAAY,EAAC,WAAW,EAAC,WAAW,YAClD,CAAC,CAAC,YAAY,CAAC,OAAO,CAAC,GACnB,EACP,KAAC,IAAI,IAAC,UAAU,EAAC,YAAY,EAAC,WAAW,EAAC,WAAW,EAAC,EAAE,EAAC,GAAG,uBAErD,EACN,CAAC,SAAS,IAAI,YAAY,IAAI,CAAC,8BAC9B,KAAC,IAAI,IAAC,UAAU,EAAC,YAAY,EAAC,WAAW,EAAC,WAAW,YAClD,YAAY,CAAC,QAAQ,GACjB,EACP,KAAC,IAAI,IAAC,UAAU,EAAC,YAAY,EAAC,WAAW,EAAC,WAAW,EAAC,EAAE,EAAC,GAAG,uBAErD,IACN,CAAC,EACJ,KAAC,IAAI,IAAC,UAAU,EAAC,YAAY,EAAC,WAAW,EAAC,WAAW,YAClD,OAAO,GAAG,CAAC,CAAC,CAAC,CAAC,OAAO,GAAG,GAAG,GAAG,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,GAC7C,IACF,EACN,SAAS,IAAI,WAAW,CAAC,MAAM,GAAG,GAAG,IAAI,CACxC,KAAC,IAAI,IACH,IAAI,EAAC,gBAAgB,EACrB,OAAO,EAAE,CAAC,EAAiC,EAAE,EAAE;4BAC7C,uBAAuB,EAAE,EAAE,CAAA;4BAC3B,8BAA8B,CAAC,EAAE,EAAE,qBAAqB,YAAY,CAAC,EAAE,EAAE,CAAC,CAAA;wBAC5E,CAAC,YACD,KAAC,IAAI,IAAC,UAAU,EAAC,YAAY,EAAC,WAAW,EAAC,WAAW,YAAE,CAAC,CAAC,QAAQ,GAAQ,GACpE,CACR,IACI,IACN,CACJ,CAAA;AACH,CAAC,CAAA;AAiBD;;;;GAIG;AACH,MAAM,kBAAkB,GAAG,CAAC,EAAE,SAAS,EAAE,aAAa,EAAE,KAAK,EAA2B,EAAE,EAAE;IAC1F,MAAM,CAAC,GAAG,YAAY,CAAC,UAAU,CAAC,CAAA;IAClC,MAAM,IAAI,GAAG,YAAY,EAAE,CAAA;IAE3B,OAAO,CACL,KAAC,IAAI,IAAC,EAAE,EAAC,GAAG,YACV,MAAC,MAAM,IACL,IAAI,EAAC,IAAI,EACT,WAAW,EAAC,SAAS,EACrB,UAAU,EAAC,MAAM,EACjB,OAAO,EAAE,aAAa,EACtB,EAAE,EAAE,IAAI,EACR,IAAI,EAAE,SAAS,gBACH,CAAC,CAAC,gBAAgB,CAAC,OAAO,CAAC,IAAI,EAAE,KAAK,IAAI,CAAC,CAAC,WAAW,CAAC,EACpE,MAAM,EAAC,QAAQ,aAEf,KAAC,IAAI,IAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,cAAc,EAAE,WAAW,EAAE,YAC7C,CAAC,CAAC,WAAW,GACT,EACP,KAAC,OAAO,IAAC,IAAI,EAAC,IAAI,YAChB,KAAC,YAAY,KAAG,GACR,IACH,GACJ,CACR,CAAA;AACH,CAAC,CAAA;AAyCD,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC,CAAwB;;eAEtC,CAAC,EAAE,UAAU,EAAE,EAAE,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,MAAM;;CAE1E,CAAA;AAED;;;;GAIG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,EAAE,YAAY,EAAE,SAAS,EAAE,GAAG,KAAK,EAAyB,EAAE,EAAE;IAC/F,MAAM,CAAC,GAAG,YAAY,CAAC,UAAU,CAAC,CAAA;IAClC,MAAM,EAAE,KAAK,EAAE,GAAG,qCAAqC,CAAC,YAAY,CAAC,CAAA;IACrE,MAAM,SAAS,GAAG,YAAY,CAAC,SAAS,CAAA;IAExC,SAAS,MAAM;QACb,IAAI,UAAU,IAAI,KAAK;YAAE,KAAK,CAAC,QAAQ,EAAE,CAAA;;YACpC,KAAK,CAAC,qBAAqB,CAAC,IAAI,EAAE,MAAM,CAAC,CAAA;IAChD,CAAC;IAED,SAAS,QAAQ;QACf,IAAI,YAAY,IAAI,KAAK;YAAE,KAAK,CAAC,UAAU,EAAE,CAAA;;YACxC,KAAK,CAAC,qBAAqB,CAAC,KAAK,EAAE,MAAM,CAAC,CAAA;IACjD,CAAC;IAED,SAAS,WAAW;QAClB,IAAI,UAAU,IAAI,KAAK,EAAE,CAAC;YACxB,IAAI,CAAC,SAAS;gBAAE,KAAK,CAAC,QAAQ,EAAE,CAAA;YAChC,KAAK,CAAC,aAAa,EAAE,EAAE,CAAA;QACzB,CAAC;;YACI,KAAK,CAAC,qBAAqB,CAAC,IAAI,EAAE,cAAc,CAAC,CAAA;IACxD,CAAC;IAED,OAAO,CACL,MAAC,SAAS,IAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,EAAE,EAAE,EAAE,KAAK,CAAC,EAAE,gBAAc,SAAS,aAC1E,MAAC,IAAI,IAAC,EAAE,EAAC,WAAW,EAAC,CAAC,EAAC,IAAI,EACzB,QAAQ,EAAC,QAAQ,EACjB,SAAS,EAAC,mBAAmB,EAC7B,aAAa,EAAC,QAAQ,EAAC,CAAC,EAAC,MAAM,EAAC,EAAE,EAAE,MAAM,CAAC,IAAI,CAAC,aAAa,CAAC,YAAY,CAAC,WAAW,CAAC,EAAE,SAAS,CAAC,aACnG,KAAC,kBAAkB,IAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,GAAI,EAC1D,KAAC,mBAAmB,IAAC,YAAY,EAAE,YAAY,EAAE,SAAS,EAAE,SAAS,EAAE,uBAAuB,EAAE,KAAK,CAAC,uBAAuB,GAAI,EAChI,YAAY,CAAC,cAAc,IAAI,KAAC,kBAAkB,IACjD,SAAS,EAAE,YAAY,CAAC,cAAc,EACtC,aAAa,EAAE,WAAW,EAC1B,KAAK,EAAE,KAAK,GACZ,IACG,EACP,KAAC,GAAG,IAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,YACzD,KAAC,OAAO,IAAC,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,QAAQ,EAAC,MAAM,YACrE,KAAC,UAAU,kBAAa,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,MAAM,EAAE,YAC/G,KAAC,OAAO,IAAC,IAAI,EAAC,IAAI,EAAC,KAAK,EAAE,EAAE,OAAO,EAAE,SAAS,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,YACvD,SAAS,CAAC,CAAC,CAAC,KAAC,YAAY,KAAG,CAAC,CAAC,CAAC,KAAC,QAAQ,KAAG,GACpC,GACC,GACL,GACN,IACI,CACb,CAAA;AACH,CAAC,CAAA;AAED,SAAS,cAAc,CAAC,IAAY;IAClC,6CAA6C;IAC7C,OAAO,IAAI,CAAC,OAAO,CAAC,mDAAmD,EAAE,EAAE,CAAC,CAAA;AAC9E,CAAC;AAED,MAAM,UAAU,GAAG;IACjB,EAAE,EAAE;QACF,OAAO,EAAE,SAAS;QAClB,SAAS,EAAE,WAAW;QACtB,MAAM,EAAE,QAAQ;QAChB,EAAE,EAAE,IAAI;QACR,OAAO,EAAE,UAAU;QACnB,KAAK,EAAE,OAAO;QACd,SAAS,EAAE,kCAAkC;QAC7C,WAAW,EAAE,iEAAiE;QAC9E,WAAW,EAAE,cAAc;QAC3B,gBAAgB,EAAE,sBAAsB;QACxC,QAAQ,EAAE,WAAW;KACtB;IACD,EAAE,EAAE;QACF,OAAO,EAAE,OAAO;QAChB,SAAS,EAAE,WAAW;QACtB,MAAM,EAAE,SAAS;QACjB,EAAE,EAAE,IAAI;QACR,OAAO,EAAE,YAAY;QACrB,KAAK,EAAE,MAAM;QACb,SAAS,EAAE,+BAA+B;QAC1C,WAAW,EAAE,oEAAoE;QACjF,WAAW,EAAE,kBAAkB;QAC/B,gBAAgB,EAAE,2BAA2B;QAC7C,QAAQ,EAAE,UAAU;KACrB;CACmB,CAAA"}