@stack-spot/portal-components 2.0.2 → 2.1.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # Changelog
 
+## [2.1.0](https://github.com/stack-spot/portal-commons/compare/portal-components@v2.0.3...portal-components@v2.1.0) (2024-07-16)
+
+
+### Features
+
+* notification changes ([e817a67](https://github.com/stack-spot/portal-commons/commit/e817a67cb91b151a48a484594fe8095a4dbb07fa))
+* notifications page and all its dependencies ([e817a67](https://github.com/stack-spot/portal-commons/commit/e817a67cb91b151a48a484594fe8095a4dbb07fa))
+
+## [2.0.3](https://github.com/stack-spot/portal-commons/compare/portal-components@v2.0.2...portal-components@v2.0.3) (2024-07-04)
+
+
+### Bug Fixes
+
+* add animation to notification menu ([d800e92](https://github.com/stack-spot/portal-commons/commit/d800e92e11399d45958b09e7ffcbc2acdb5749a9))
+
 ## [2.0.2](https://github.com/stack-spot/portal-commons/compare/portal-components@v2.0.1...portal-components@v2.0.2) (2024-07-04)
 
 

package/dist/components/AnimatedHeight.d.ts

@@ -0,0 +1,59 @@
+/// <reference types="react" />
+interface Props {
+    /**
+     * A header with fixed height.
+     */
+    header?: React.ReactElement;
+    /**
+     * The content. This may change its height whenever. When the height changes, the animation will play making a fluid transition from the
+     * previous height to the next.
+     */
+    children: React.ReactElement;
+    /**
+     * A footer with fixed height.
+     */
+    footer?: React.ReactElement;
+    /**
+     * Whether or not this panel is visible. Changing this value, animates the panel's height.
+     * @default true
+     */
+    visible?: boolean;
+    /**
+     * The duration of the animations in milliseconds.
+     * @default 300
+     */
+    duration?: number;
+    /**
+     * This component wraps its content in a div that changes its height from zero to the size of its content. It is not recommended to add
+     * styles to it, but if you need to, use this property.
+     */
+    outerStyle?: React.CSSProperties;
+    /**
+     * This component wraps its content in a div that changes its height from zero to the size of its content. It is not recommended to add
+     * classes to it, but if you need to, use this property.
+     */
+    outerClassName?: string;
+    /**
+     * The style to apply to the whole panel.
+     *
+     * Attention: this is not the outer-most div, use `outerStyle` if you need to style it.
+     */
+    style?: React.CSSProperties;
+    /**
+     * The class to apply to the whole panel.
+     *
+     * Attention: this is not the outer-most div, use `outerClassName` if you need to add a class to it.
+     */
+    className?: string;
+}
+/**
+ * This is a generic component for animating the height of a panel whenever its content changes.
+ *
+ * You can provide a header and a footer with fixed height, these won't change during the animations and will always be visible.
+ *
+ * This panel can also be hidden or visible and transitions between these two state will be animated.
+ * @param props the React props for this component. {@link Props}.
+ */
+export declare const AnimatedHeight: ({ children, footer, header, visible, duration, className, style, outerClassName, outerStyle }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=AnimatedHeight.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AnimatedHeight.d.ts","sourceRoot":"","sources":["../../src/components/AnimatedHeight.tsx"],"names":[],"mappings":";AAKA,UAAU,KAAK;IACb;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC5B;;;OAGG;IACH,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC;IAC7B;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC5B;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACjC;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;;OAIG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAsDD;;;;;;;GAOG;AACH,eAAO,MAAM,cAAc,kGACoF,KAAK,4CA2DnH,CAAA"}

package/dist/components/AnimatedHeight.js

@@ -0,0 +1,105 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { listToClass } from '@stack-spot/portal-theme';
+import { useCallback, useEffect, useLayoutEffect, useRef } from 'react';
+import styled from 'styled-components';
+import { useManualRender } from '../hooks/manual-render.js';
+const Box = styled.div `
+  overflow-y: clip; // <-- do not use hidden, it's buggy in Chrome.
+  transition: height ease-in-out ${({ $animationMs }) => $animationMs / 1000}s;
+
+  .wrapper {
+    display: flex;
+    flex-direction: column;
+  }
+
+  &.initial {
+    opacity: 0;
+    pointer-events: none;
+    overflow: inherit;
+    transition: none;
+
+    &.content {
+      overflow: inherit;
+      transition: none;
+    }
+  }
+
+  .content {
+    overflow: hidden;
+    transition: height ease-in-out ${({ $animationMs }) => $animationMs / 1000}s;
+  }
+`;
+function getActualContent(wrapper) {
+    const firstChild = wrapper.firstChild;
+    if (!firstChild || !('tagName' in firstChild))
+        throw new Error('AnimatedHeight could not find any content to animate');
+    return firstChild;
+}
+function onChangeHeight(element, callback) {
+    const resizeObserver = new ResizeObserver((entries) => {
+        const entry = entries[0];
+        const newHeight = entry.borderBoxSize[0].blockSize;
+        callback(newHeight);
+    });
+    resizeObserver.observe(element);
+    return () => resizeObserver.disconnect();
+}
+/**
+ * This is a generic component for animating the height of a panel whenever its content changes.
+ *
+ * You can provide a header and a footer with fixed height, these won't change during the animations and will always be visible.
+ *
+ * This panel can also be hidden or visible and transitions between these two state will be animated.
+ * @param props the React props for this component. {@link Props}.
+ */
+export const AnimatedHeight = ({ children, footer, header, visible = true, duration = 300, className, style, outerClassName, outerStyle }) => {
+    const { repaint } = useManualRender();
+    const boxRef = useRef(null);
+    const wrapperRef = useRef(null);
+    const headerRef = useRef(null);
+    const contentRef = useRef(null);
+    const footerRef = useRef(null);
+    const heights = useRef({ content: 0, footer: 0, header: 0, extra: 0 });
+    const status = useRef('initial');
+    const updateHeight = useCallback(() => {
+        if (boxRef.current) {
+            boxRef.current.style.height = `${heights.current.content + heights.current.header + heights.current.footer + heights.current.extra}px`;
+        }
+        if (contentRef.current)
+            contentRef.current.style.height = `${heights.current.content}px`;
+    }, []);
+    useLayoutEffect(() => {
+        let unsubscribe;
+        if (headerRef.current)
+            heights.current.header = headerRef.current.getBoundingClientRect().height;
+        if (contentRef.current) {
+            heights.current.content = contentRef.current.getBoundingClientRect().height;
+            unsubscribe = onChangeHeight(getActualContent(contentRef.current), (height) => {
+                heights.current.content = height;
+                if (status.current === 'visible' && boxRef.current)
+                    updateHeight();
+            });
+        }
+        if (footerRef.current)
+            heights.current.footer = footerRef.current.getBoundingClientRect().height;
+        if (wrapperRef.current)
+            heights.current.extra = wrapperRef.current.getBoundingClientRect().height
+                - heights.current.header
+                - heights.current.footer
+                - heights.current.content;
+        status.current = visible ? 'visible' : 'hidden';
+        repaint();
+        return unsubscribe;
+    }, []);
+    useEffect(() => {
+        if (status.current === 'initial')
+            return;
+        status.current = visible ? 'visible' : 'hidden';
+        if (visible)
+            updateHeight();
+        else if (boxRef.current)
+            boxRef.current.style.height = '0';
+    }, [visible]);
+    return (_jsx(Box, { ref: boxRef, "$animationMs": duration, className: listToClass([outerClassName, status.current === 'initial' && 'initial']), style: outerStyle, children: _jsxs("div", { ref: wrapperRef, className: listToClass(['wrapper', className]), style: style, children: [header && _jsx("div", { ref: headerRef, children: header }), _jsx("div", { ref: contentRef, className: "content", children: children }), footer && _jsx("div", { ref: footerRef, children: footer })] }) }));
+};
+//# sourceMappingURL=AnimatedHeight.js.map

package/dist/components/AnimatedHeight.js.map

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

package/dist/components/Placeholder.d.ts

@@ -3,17 +3,19 @@ import { SxProperties } from '@citric/core/dist/sx.js';
 interface Props {
     title?: string;
     description?: string;
-    img: React.ReactElement;
+    img?: React.ReactElement;
     button?: React.ReactElement | null;
     show?: boolean;
     fullWidth?: boolean;
     sx?: SxProperties;
     sxCard?: SxProperties;
+    style?: React.CSSProperties;
+    className?: string;
 }
-interface PropsCallToACtion extends Props {
+interface PropsCallToAction extends Props {
     subDescription?: string;
 }
-export declare const Placeholder: ({ title, description, button, img, fullWidth, show, sx }: Props) => import("react/jsx-runtime").JSX.Element | null;
-export declare const PlaceholderCallToAction: ({ title, description, subDescription, img, button, fullWidth, show, sx, sxCard, }: PropsCallToACtion) => import("react/jsx-runtime").JSX.Element | null;
+export declare const Placeholder: ({ title, description, button, img, fullWidth, show, sx, style, className }: Props) => import("react/jsx-runtime").JSX.Element | null;
+export declare const PlaceholderCallToAction: ({ title, description, subDescription, img, button, fullWidth, show, sx, sxCard, style, className, }: PropsCallToAction) => import("react/jsx-runtime").JSX.Element | null;
 export {};
 //# sourceMappingURL=Placeholder.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Placeholder.d.ts","sourceRoot":"","sources":["../../src/components/Placeholder.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAA;AAGnD,UAAU,KAAK;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,GAAG,EAAE,KAAK,CAAC,YAAY,CAAC;IACxB,MAAM,CAAC,EAAE,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC;IACnC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,EAAE,CAAC,EAAE,YAAY,CAAC;IAClB,MAAM,CAAC,EAAE,YAAY,CAAC;CACvB;AAED,UAAU,iBAAkB,SAAQ,KAAK;IACvC,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,eAAO,MAAM,WAAW,6DAAqE,KAAK,mDAsBjG,CAAA;AAED,eAAO,MAAM,uBAAuB,sFAUjC,iBAAiB,mDA4BnB,CAAA"}
+{"version":3,"file":"Placeholder.d.ts","sourceRoot":"","sources":["../../src/components/Placeholder.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAA;AAInD,UAAU,KAAK;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,GAAG,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IACzB,MAAM,CAAC,EAAE,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC;IACnC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,EAAE,CAAC,EAAE,YAAY,CAAC;IAClB,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,UAAU,iBAAkB,SAAQ,KAAK;IACvC,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,eAAO,MAAM,WAAW,+EAAuF,KAAK,mDAsBnH,CAAA;AAED,eAAO,MAAM,uBAAuB,wGAYjC,iBAAiB,mDA4BnB,CAAA"}

package/dist/components/Placeholder.js

@@ -1,16 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Flex, Text } from '@citric/core';
 import { Card, CardContent } from '@citric/ui';
-export const Placeholder = ({ title, description, button, img, fullWidth, show = true, sx }) => {
+import { GenericPlaceholder } from '../svg/index.js';
+export const Placeholder = ({ title, description, button, img, fullWidth, show = true, sx, style, className }) => {
     if (!show) {
         return null;
     }
-    return (_jsx(Card, { sx: { ...(fullWidth ? { w: '100%' } : {}) }, children: _jsxs(CardContent, { as: Flex, py: 27, justifyContent: "center", flexDirection: "column", alignItems: "center", sx: sx, children: [img, title && _jsx(Text, { as: "label", appearance: "h4", mb: "3", pt: 5, children: title }), _jsx(Text, { mb: "3", appearance: "body2", colorScheme: "light.700", children: description }), button] }) }));
+    return (_jsx(Card, { sx: { ...(fullWidth ? { w: '100%' } : {}) }, style: style, className: className, children: _jsxs(CardContent, { as: Flex, py: 27, justifyContent: "center", flexDirection: "column", alignItems: "center", sx: sx, children: [img ?? _jsx(GenericPlaceholder, { style: { width: '184px', height: '104px' } }), title && _jsx(Text, { as: "label", appearance: "h4", mb: "3", pt: 5, children: title }), _jsx(Text, { mb: "3", appearance: "body2", colorScheme: "light.700", children: description }), button] }) }));
 };
-export const PlaceholderCallToAction = ({ title, description, subDescription, img, button, fullWidth, show = true, sx, sxCard, }) => {
+export const PlaceholderCallToAction = ({ title, description, subDescription, img, button, fullWidth, show = true, sx, sxCard, style, className, }) => {
     if (!show) {
         return null;
     }
-    return (_jsx(Card, { sx: { w: fullWidth ? '100%' : 'auto', bg: 'transparent', ...sxCard }, children: _jsxs(CardContent, { as: Flex, alignItems: "center", justifyContent: "center", py: 15, sx: { gap: '92px', ...sx }, children: [img, _jsxs(Box, { children: [title && _jsx(Text, { appearance: "h4", mb: "3", "aria-live": "assertive", children: title }), _jsx(Text, { mb: "3", appearance: "body2", colorScheme: "light.700", children: description }), _jsx(Text, { mb: "3", appearance: "body2", colorScheme: "light.700", children: subDescription }), button] })] }) }));
+    return (_jsx(Card, { sx: { w: fullWidth ? '100%' : 'auto', bg: 'transparent', ...sxCard }, style: style, className: className, children: _jsxs(CardContent, { as: Flex, alignItems: "center", justifyContent: "center", py: 15, sx: { gap: '92px', ...sx }, children: [img ?? _jsx(GenericPlaceholder, { style: { width: '184px', height: '104px' } }), _jsxs(Box, { children: [title && _jsx(Text, { appearance: "h4", mb: "3", "aria-live": "assertive", children: title }), _jsx(Text, { mb: "3", appearance: "body2", colorScheme: "light.700", children: description }), _jsx(Text, { mb: "3", appearance: "body2", colorScheme: "light.700", children: subDescription }), button] })] }) }));
 };
 //# sourceMappingURL=Placeholder.js.map

package/dist/components/Placeholder.js.map

@@ -1 +1 @@
-{"version":3,"file":"Placeholder.js","sourceRoot":"","sources":["../../src/components/Placeholder.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAE9C,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,YAAY,CAAA;AAiB9C,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,GAAG,EAAE,SAAS,EAAE,IAAI,GAAG,IAAI,EAAE,EAAE,EAAS,EAAE,EAAE;IACpG,IAAI,CAAC,IAAI,EAAE,CAAC;QACV,OAAO,IAAI,CAAA;IACb,CAAC;IAED,OAAO,CACL,KAAC,IAAI,IAAC,EAAE,EAAE,EAAE,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,YAC/C,MAAC,WAAW,IAAC,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,EAAE,EAAE,cAAc,EAAC,QAAQ,EAAC,aAAa,EAAC,QAAQ,EAAC,UAAU,EAAC,QAAQ,EAAC,EAAE,EAAE,EAAE,aACrG,GAAG,EAEH,KAAK,IAAI,KAAC,IAAI,IAAC,EAAE,EAAC,OAAO,EAAC,UAAU,EAAC,IAAI,EAAC,EAAE,EAAC,GAAG,EAAC,EAAE,EAAE,CAAC,YACpD,KAAK,GACD,EAEP,KAAC,IAAI,IAAC,EAAE,EAAC,GAAG,EAAC,UAAU,EAAC,OAAO,EAAC,WAAW,EAAC,WAAW,YACpD,WAAW,GACP,EAEN,MAAM,IACK,GACT,CACR,CAAA;AACH,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,EACtC,KAAK,EACL,WAAW,EACX,cAAc,EACd,GAAG,EACH,MAAM,EACN,SAAS,EACT,IAAI,GAAG,IAAI,EACX,EAAE,EACF,MAAM,GACY,EAAE,EAAE;IACtB,IAAI,CAAC,IAAI,EAAE,CAAC;QACV,OAAO,IAAI,CAAA;IACb,CAAC;IAED,OAAO,CACL,KAAC,IAAI,IAAC,EAAE,EAAE,EAAE,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,EAAE,EAAE,EAAE,aAAa,EAAE,GAAG,MAAM,EAAE,YACxE,MAAC,WAAW,IAAC,EAAE,EAAE,IAAI,EAAE,UAAU,EAAC,QAAQ,EAAC,cAAc,EAAC,QAAQ,EAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,EAAE,aAClG,GAAG,EAEJ,MAAC,GAAG,eACD,KAAK,IAAI,KAAC,IAAI,IAAC,UAAU,EAAC,IAAI,EAAC,EAAE,EAAC,GAAG,eAAW,WAAW,YACzD,KAAK,GACD,EAEP,KAAC,IAAI,IAAC,EAAE,EAAC,GAAG,EAAC,UAAU,EAAC,OAAO,EAAC,WAAW,EAAC,WAAW,YACpD,WAAW,GACP,EAEP,KAAC,IAAI,IAAC,EAAE,EAAC,GAAG,EAAC,UAAU,EAAC,OAAO,EAAC,WAAW,EAAC,WAAW,YACpD,cAAc,GACV,EAEN,MAAM,IACH,IACM,GACT,CACR,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"Placeholder.js","sourceRoot":"","sources":["../../src/components/Placeholder.tsx"],"names":[],"mappings":"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"}

package/dist/components/TimelineSection.d.ts

@@ -0,0 +1,25 @@
+/// <reference types="react" />
+import { Month } from '@stack-spot/portal-translate';
+interface Props {
+    /**
+     * The month. 0 for January, 11 for December.
+     */
+    month: Month;
+    /**
+     * The day of the month (1 - 31).
+     */
+    day: number;
+    /**
+     * The section's content.
+     */
+    children: React.ReactNode;
+    style?: React.CSSProperties;
+    className?: string;
+}
+/**
+ * Renders a section in a timeline where the left side is a header with the date and the right side is the content (children).
+ * @param props React props: {@link Props}.
+ */
+export declare const TimelineSection: ({ children, day, month, className, style }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=TimelineSection.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TimelineSection.d.ts","sourceRoot":"","sources":["../../src/components/TimelineSection.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,KAAK,EAAsB,MAAM,8BAA8B,CAAA;AAGxE,UAAU,KAAK;IACb;;OAEG;IACH,KAAK,EAAE,KAAK,CAAC;IACb;;OAEG;IACH,GAAG,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAiBD;;;GAGG;AACH,eAAO,MAAM,eAAe,+CAAgD,KAAK,4CAahF,CAAA"}

package/dist/components/TimelineSection.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Text } from '@citric/core';
+import { useMonthDictionary } from '@stack-spot/portal-translate';
+import { styled } from 'styled-components';
+const Styled = styled.div `
+  display: flex;
+  flex-direction: row;
+  align-items: start;
+
+  .timeline-section-header {
+    width: 80px;
+  }
+
+  .timeline-section-content {
+    min-width: 0;
+    flex: 1;
+  }
+`;
+/**
+ * Renders a section in a timeline where the left side is a header with the date and the right side is the content (children).
+ * @param props React props: {@link Props}.
+ */
+export const TimelineSection = ({ children, day, month, className, style }) => {
+    const months = useMonthDictionary();
+    return (_jsxs(Styled, { style: style, className: className, children: [_jsxs("div", { className: "timeline-section-header", children: [_jsx(Text, { appearance: "h2", children: day >= 10 ? day : `0${day}` }), _jsx(Text, { appearance: "subtitle4", children: months[month].toUpperCase().substring(0, 3) })] }), _jsx("div", { className: "timeline-section-content", children: children })] }));
+};
+//# sourceMappingURL=TimelineSection.js.map

package/dist/components/TimelineSection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimelineSection.js","sourceRoot":"","sources":["../../src/components/TimelineSection.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AACnC,OAAO,EAAS,kBAAkB,EAAE,MAAM,8BAA8B,CAAA;AACxE,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAmB1C,MAAM,MAAM,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;CAaxB,CAAA;AAED;;;GAGG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,EAAE,QAAQ,EAAE,GAAG,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAS,EAAE,EAAE;IACnF,MAAM,MAAM,GAAG,kBAAkB,EAAE,CAAA;IACnC,OAAO,CACL,MAAC,MAAM,IAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,aACxC,eAAK,SAAS,EAAC,yBAAyB,aACtC,KAAC,IAAI,IAAC,UAAU,EAAC,IAAI,YAAE,GAAG,IAAI,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,GAAG,EAAE,GAAQ,EAC1D,KAAC,IAAI,IAAC,UAAU,EAAC,WAAW,YAAE,MAAM,CAAC,KAAK,CAAC,CAAC,WAAW,EAAE,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,GAAQ,IAC7E,EACN,cAAK,SAAS,EAAC,0BAA0B,YACtC,QAAQ,GACL,IACC,CACV,CAAA;AACH,CAAC,CAAA"}

package/dist/components/error/ErrorFeedback.d.ts

@@ -39,6 +39,14 @@ export interface ErrorDescription {
      * The image for the error. Overwrites anything preset by "code".
      */
     image?: React.ReactElement;
+    /**
+     * Whether to show the feedback horizontally (row) or vertically (column).
+     *
+     * @default 'row'
+     */
+    direction?: 'row' | 'column';
+    style?: React.CSSProperties;
+    className?: string;
 }
 /**
  * A box with an icon and an error message. This is used for giving error feedbacks to the user.
@@ -47,5 +55,5 @@ export interface ErrorDescription {
  *
  * @param options the error code, the error message and whether or not the application is in debug mode.
  */
-export declare const ErrorFeedback: ({ code, message, debug, title, body, image, action, description, help }: ErrorDescription) => import("react/jsx-runtime").JSX.Element;
+export declare const ErrorFeedback: ({ code, message, debug, title, body, image, action, description, help, direction, style, className }: ErrorDescription) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ErrorFeedback.d.ts.map

package/dist/components/error/ErrorFeedback.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ErrorFeedback.d.ts","sourceRoot":"","sources":["../../../src/components/error/ErrorFeedback.tsx"],"names":[],"mappings":";AAoBA,MAAM,WAAW,gBAAgB;IAC/B;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,MAAM,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC;IAChD;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;CAC5B;AAED;;;;;;GAMG;AACH,eAAO,MAAM,aAAa,4EAAiF,gBAAgB,4CAmE1H,CAAA"}
+{"version":3,"file":"ErrorFeedback.d.ts","sourceRoot":"","sources":["../../../src/components/error/ErrorFeedback.tsx"],"names":[],"mappings":";AAsBA,MAAM,WAAW,gBAAgB;IAC/B;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,MAAM,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC;IAChD;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC3B;;;;OAIG;IACH,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAC7B,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAsCD;;;;;;GAMG;AACH,eAAO,MAAM,aAAa,yGAC0F,gBAAgB,4CA0DnI,CAAA"}

package/dist/components/error/ErrorFeedback.js

@@ -1,7 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Box, Button, Container, Flex, LinkBox, Text } from '@citric/core';
+import { Button, LinkBox, Text } from '@citric/core';
+import { listToClass, theme } from '@stack-spot/portal-theme';
 import { useTranslate } from '@stack-spot/portal-translate';
 import { useState } from 'react';
+import { styled } from 'styled-components';
 import { Forbidden } from '../../svg/Forbidden.js';
 import { Logo } from '../../svg/Logo.js';
 import { NotFound } from '../../svg/NotFound.js';
@@ -16,6 +18,41 @@ const imageMap = {
     403: _jsx(Forbidden, { style: imageStyle }),
     404: _jsx(NotFound, { style: imageStyle }),
 };
+const FeedbackBox = styled.div `
+  background-color: ${theme.color.light[400]};
+  padding: 24px;
+  .content {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    &.row {
+      flex-direction: row;
+      gap: 40px;
+    }
+    &.column {
+      flex-direction: column;
+      .text-content {
+        align-items: center;
+      }
+    }
+    .text-content {
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+    }
+    .buttons {
+      display: flex;
+      flex-direction: row;
+      gap: '10px';
+    }
+    .details {
+      background-color: ${theme.color.danger[500]};
+      color: ${theme.color.danger.contrastText};
+      padding: 12px;
+      border-radius: 5px;
+    }
+  }
+`;
 /**
  * A box with an icon and an error message. This is used for giving error feedbacks to the user.
  *
@@ -23,14 +60,14 @@ const imageMap = {
  *
  * @param options the error code, the error message and whether or not the application is in debug mode.
  */
-export const ErrorFeedback = ({ code = 0, message, debug, title, body, image, action, description, help }) => {
+export const ErrorFeedback = ({ code = 0, message, debug, title, body, image, action, description, help, direction = 'row', style, className }) => {
     const t = useTranslate(dictionary);
     const [showDetails, setShowDetails] = useState(false);
     const shouldShowButtons = !!(action || (debug && message));
     function renderBody() {
-        return typeof body === 'string' ? _jsx(Text, { appearance: "body1", mt: 5, colorScheme: "inverse", children: body }) : body;
+        return typeof body === 'string' ? _jsx(Text, { appearance: "body1", colorScheme: "inverse", className: "description", children: body }) : body;
     }
-    return (_jsx(Box, { bg: "light.400", children: _jsx(Container, { children: _jsxs(Flex, { alignItems: "center", sx: { padding: 12 }, children: [_jsx(Box, { width: 5, sx: { display: ['block', 'none'] }, children: _jsx(Flex, { justifyContent: "flex-end", pr: 20, children: image ?? imageMap[code] ?? _jsx(ServerError, { style: imageStyle }) }) }), _jsxs(Box, { width: [7, 12], children: [_jsx(LinkBox, { href: "/", children: _jsx(Logo, { style: { width: '130px', height: '30px' } }) }), _jsxs(Box, { w: [7, 12], children: [_jsxs(Text, { appearance: "h4", mt: 5, colorScheme: "inverse", children: [(code && !title) ? `${code}. ` : '', _jsx(Text, { appearance: "h4", as: "span", colorScheme: "light.700", children: title ?? t[`${code}.title`] })] }), body ? renderBody() : (_jsxs(_Fragment, { children: [_jsx(Text, { appearance: "body1", mt: 5, colorScheme: "inverse", children: description ?? t[`${code}.description`] }), _jsx(Text, { appearance: "body1", colorScheme: "light.700", mt: 1, children: help ?? t[`${code}.help`] })] })), shouldShowButtons && (_jsxs(Flex, { flexDirection: "row", style: { gap: '10px', marginTop: '12px' }, children: [action && (_jsx(Button, { colorScheme: "inverse", onClick: action.onClick, children: action.label })), debug && message && (_jsx(Button, { appearance: "outlined", colorScheme: "inverse", onClick: () => setShowDetails(v => !v), children: showDetails ? t.hideDetails : t.showDetails }))] })), showDetails && (_jsx(Box, { bg: "danger", mt: 8, p: 4, sx: { borderRadius: '5px' }, children: _jsx(Text, { appearance: "microtext1", colorScheme: "danger.contrastText", children: message }) }))] })] })] }) }) }));
+    return (_jsx(FeedbackBox, { style: style, className: className, children: _jsxs("div", { className: listToClass(['content', direction]), children: [_jsx("div", { className: "image", children: image ?? imageMap[code] ?? _jsx(ServerError, { style: imageStyle }) }), _jsxs("div", { className: "text-content", children: [_jsx(LinkBox, { href: "/", className: "logo", children: _jsx(Logo, { style: { width: '130px', height: '30px' } }) }), _jsxs(Text, { appearance: "h4", mt: 5, colorScheme: "inverse", className: "title", children: [(code && !title) ? `${code}. ` : '', _jsx(Text, { appearance: "h4", as: "span", colorScheme: "light.700", children: title ?? t[`${code}.title`] })] }), body ? renderBody() : (_jsxs(_Fragment, { children: [_jsx(Text, { appearance: "body1", mt: 5, colorScheme: "inverse", className: "description", children: description ?? t[`${code}.description`] }), _jsx(Text, { appearance: "body1", colorScheme: "light.700", className: "help", children: help ?? t[`${code}.help`] })] })), shouldShowButtons && (_jsxs("div", { className: "buttons", children: [action && (_jsx(Button, { colorScheme: "inverse", onClick: action.onClick, children: action.label })), debug && message && (_jsx(Button, { appearance: "outlined", colorScheme: "inverse", onClick: () => setShowDetails(v => !v), children: showDetails ? t.hideDetails : t.showDetails }))] })), showDetails && (_jsx("div", { className: "details", children: _jsx(Text, { appearance: "microtext1", children: message }) }))] })] }) }));
 };
 const dictionary = {
     en: {

package/dist/components/error/ErrorFeedback.js.map

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

package/dist/components/form/SearchInput.d.ts

@@ -0,0 +1,9 @@
+export declare const SearchInput: ({ searchText, defaultValue, disabled, onChange, style, className, }: {
+    searchText: string;
+    defaultValue?: string;
+    disabled?: boolean;
+    onChange: (value?: string) => void;
+    style?: React.CSSProperties;
+    className?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SearchInput.d.ts.map

package/dist/components/form/SearchInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchInput.d.ts","sourceRoot":"","sources":["../../../src/components/form/SearchInput.tsx"],"names":[],"mappings":"AAOA,eAAO,MAAM,WAAW,wEAOrB;IACD,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,CAAC,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,aAAa,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,4CAsCA,CAAA"}

package/dist/components/form/SearchInput.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, IconBox, Input } from '@citric/core';
+import { Filter, Times } from '@citric/icons';
+import { FieldAddon, FieldGroup, IconButton } from '@citric/ui';
+import { useTranslate } from '@stack-spot/portal-translate';
+import { debounce } from 'lodash';
+import { useCallback, useState } from 'react';
+export const SearchInput = ({ searchText, defaultValue, disabled = false, onChange, style, className, }) => {
+    const [value, setValue] = useState(defaultValue);
+    const runOnChange = useCallback(debounce(onChange, 800), [onChange]);
+    const t = useTranslate(dictionary);
+    return (_jsxs(Box, { sx: { position: 'relative' }, style: style, className: className, children: [_jsxs(FieldGroup, { children: [_jsx(FieldAddon, { children: _jsx(IconBox, { size: "xs", colorIcon: "light.700", children: _jsx(Filter, {}) }) }), _jsx(Input, { value: value, placeholder: searchText, onChange: (e) => {
+                            setValue(e.target.value);
+                            runOnChange(e.target.value);
+                        }, disabled: disabled, maxLength: 255 })] }), !!value && (_jsx(IconButton, { sx: { position: 'absolute', right: '20px', top: '50%', transform: 'translate(50%, -50%)' }, onClick: () => {
+                    setValue('');
+                    runOnChange('');
+                }, "aria-label": t.ariaClearField, children: _jsx(Times, {}) }))] }));
+};
+const dictionary = {
+    en: {
+        ariaClearField: 'Clear field',
+    },
+    pt: {
+        ariaClearField: 'Limpar campo',
+    },
+};
+//# sourceMappingURL=SearchInput.js.map

package/dist/components/form/SearchInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchInput.js","sourceRoot":"","sources":["../../../src/components/form/SearchInput.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,cAAc,CAAA;AAClD,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AAC7C,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,YAAY,CAAA;AAC/D,OAAO,EAAc,YAAY,EAAE,MAAM,8BAA8B,CAAA;AACvE,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAA;AACjC,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAE7C,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAC1B,UAAU,EACV,YAAY,EACZ,QAAQ,GAAG,KAAK,EAChB,QAAQ,EACR,KAAK,EACL,SAAS,GAQV,EAAE,EAAE;IACH,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,YAAY,CAAC,CAAA;IAChD,MAAM,WAAW,GAAG,WAAW,CAAC,QAAQ,CAAC,QAAQ,EAAE,GAAG,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAA;IACpE,MAAM,CAAC,GAAG,YAAY,CAAC,UAAU,CAAC,CAAA;IAElC,OAAO,CACL,MAAC,GAAG,IAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,aACnE,MAAC,UAAU,eACT,KAAC,UAAU,cACT,KAAC,OAAO,IAAC,IAAI,EAAC,IAAI,EAAC,SAAS,EAAC,WAAW,YACtC,KAAC,MAAM,KAAG,GACF,GACC,EACb,KAAC,KAAK,IACJ,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,UAAU,EACvB,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;4BACd,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;4BACxB,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;wBAC7B,CAAC,EACD,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,GAAG,GACd,IACS,EACZ,CAAC,CAAC,KAAK,IAAI,CACV,KAAC,UAAU,IACT,EAAE,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,SAAS,EAAE,sBAAsB,EAAE,EAC1F,OAAO,EAAE,GAAG,EAAE;oBACZ,QAAQ,CAAC,EAAE,CAAC,CAAA;oBACZ,WAAW,CAAC,EAAE,CAAC,CAAA;gBACjB,CAAC,gBACW,CAAC,CAAC,cAAc,YAE5B,KAAC,KAAK,KAAG,GACE,CACd,IACG,CACP,CAAA;AACH,CAAC,CAAA;AAED,MAAM,UAAU,GAAG;IACjB,EAAE,EAAE;QACF,cAAc,EAAE,aAAa;KAC9B;IACD,EAAE,EAAE;QACF,cAAc,EAAE,cAAc;KAC/B;CACmB,CAAA"}

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

@@ -0,0 +1,69 @@
+import { InputHTMLAttributes } from 'react';
+interface BaseSelectProps<T> extends Omit<InputHTMLAttributes<HTMLSelectElement>, 'value' | 'onChange'> {
+    /**
+     * The current value.
+     */
+    value: T | undefined;
+    /**
+     * The label for the empty option. This sets the value to undefined.
+     *
+     * If this is not set, there won't be an empty option for this select.
+     */
+    emptyOption?: string;
+    /**
+     * The options to render in this selection menu.
+     */
+    options: T[];
+    /**
+     * 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 are not strings or numbers.
+     *
+     * @example
+     * - `'id'`
+     * - `(option) => option.id`
+     */
+    renderValue?: keyof T | ((item: Exclude<T, undefined>) => 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 are not strings or numbers.
+     *
+     * @example
+     * - `'name'`
+     * - `(option) => option.name`
+     */
+    renderLabel?: keyof T | ((item: Exclude<T, undefined>) => string);
+    /**
+     * Called when the value changes.
+     * @param value the new value.
+     */
+    onChange: (value: T | undefined) => void;
+    /**
+     * The maximum number of items before showing a vertical scroll bar.
+     * @default 6
+     */
+    maxItems?: number;
+}
+interface OptionalSelectProps<T> extends BaseSelectProps<T> {
+    emptyOption: string;
+}
+interface RequiredSelectProps<T> extends Omit<BaseSelectProps<T>, 'onChange'> {
+    emptyOption?: undefined;
+    value: T;
+    onChange: (value: T) => void;
+}
+type SelectProps<T> = OptionalSelectProps<T> | RequiredSelectProps<T>;
+/**
+ * Renders a Select component using the Citric Design System.
+ *
+ * The styled version of the select component is rendered on top of the default select from the browser. Visual users will use the Citric
+ * version of a Select, but blind users, who interacts with the keyboard, will use the default browser select instead, which is already
+ * highly optimized for accessibility.
+ * @param props the component props: {@link SelectProps}.
+ */
+export declare function Select<T>({ onChange, options, value, emptyOption, renderLabel, renderValue, maxItems, onFocus, onBlur, style, className, ...props }: SelectProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=Select.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/form/Select.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,mBAAmB,EAAqD,MAAM,OAAO,CAAA;AAG9F,UAAU,eAAe,CAAC,CAAC,CAAE,SAAQ,IAAI,CAAC,mBAAmB,CAAC,iBAAiB,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;IACrG;;OAEG;IACH,KAAK,EAAE,CAAC,GAAG,SAAS,CAAC;IACrB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,OAAO,EAAE,CAAC,EAAE,CAAC;IACb;;;;;;;;;OASG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC,EAAE,SAAS,CAAC,KAAK,MAAM,CAAC,CAAC;IAClE;;;;;;;;;OASG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC,EAAE,SAAS,CAAC,KAAK,MAAM,CAAC,CAAC;IAClE;;;OAGG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,GAAG,SAAS,KAAK,IAAI,CAAC;IACzC;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,UAAU,mBAAmB,CAAC,CAAC,CAAE,SAAQ,eAAe,CAAC,CAAC,CAAC;IACzD,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,UAAU,mBAAmB,CAAC,CAAC,CAAE,SAAQ,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC;IAC3E,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,KAAK,EAAE,CAAC,CAAC;IACT,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;CAC9B;AAED,KAAK,WAAW,CAAC,CAAC,IAAI,mBAAmB,CAAC,CAAC,CAAC,GAAG,mBAAmB,CAAC,CAAC,CAAC,CAAA;AAkHrE;;;;;;;GAOG;AACH,wBAAgB,MAAM,CAAC,CAAC,EAAE,EACxB,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,WAAW,EAAE,QAAY,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,KAAK,EAC3H,EAAE,WAAW,CAAC,CAAC,CAAC,2CA0EhB"}