@faststore/components 3.0.135 → 3.0.141

package/dist/cjs/molecules/Dropdown/hooks/useDropdownTrigger.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDropdownTrigger = void 0;
+const useDropdown_1 = require("./useDropdown");
+const react_1 = require("react");
+const useDropdownTrigger = ({ triggerRef, }) => {
+    const { toggle, dropdownTriggerRef, addDropdownTriggerRef, isOpen, id } = (0, useDropdown_1.useDropdown)();
+    (0, react_1.useImperativeHandle)(triggerRef, () => dropdownTriggerRef.current, [
+        dropdownTriggerRef,
+    ]);
+    return {
+        onClick: toggle,
+        ref: addDropdownTriggerRef,
+        'aria-expanded': isOpen,
+        'aria-controls': id,
+        'aria-haspopup': 'menu',
+    };
+};
+exports.useDropdownTrigger = useDropdownTrigger;
+//# sourceMappingURL=useDropdownTrigger.js.map

package/dist/cjs/molecules/Dropdown/hooks/useDropdownTrigger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDropdownTrigger.js","sourceRoot":"","sources":["../../../../../src/molecules/Dropdown/hooks/useDropdownTrigger.ts"],"names":[],"mappings":";;;AAAA,+CAA2C;AAC3C,iCAAkD;AAO3C,MAAM,kBAAkB,GAAG,CAAsC,EACtE,UAAU,GACiB,EAAE,EAAE;IAC/B,MAAM,EAAE,MAAM,EAAE,kBAAkB,EAAE,qBAAqB,EAAE,MAAM,EAAE,EAAE,EAAE,GACrE,IAAA,yBAAW,GAAK,CAAA;IAElB,IAAA,2BAAmB,EAAC,UAAU,EAAE,GAAG,EAAE,CAAC,kBAAmB,CAAC,OAAQ,EAAE;QAClE,kBAAkB;KACnB,CAAC,CAAA;IAEF,OAAO;QACL,OAAO,EAAE,MAAM;QACf,GAAG,EAAE,qBAAqB;QAC1B,eAAe,EAAE,MAAM;QACvB,eAAe,EAAE,EAAE;QACnB,eAAe,EAAE,MAAe;KACjC,CAAA;AACH,CAAC,CAAA;AAjBY,QAAA,kBAAkB,sBAiB9B"}

package/dist/esm/atoms/Button/index.d.ts

@@ -1,2 +1,2 @@
 export { default } from './Button';
-export type { ButtonProps } from './Button';
+export type { ButtonProps, Variant as ButtonVariant, Size as ButtonSize, IconPosition as ButtonIconPosition } from './Button';

package/dist/esm/molecules/Dropdown/Dropdown.d.ts

@@ -14,5 +14,5 @@ export interface DropdownProps {
      */
     id?: string;
 }
-declare const Dropdown: ({ children, isOpen: isOpenDefault, onDismiss, id, }: PropsWithChildren<DropdownProps>) => React.JSX.Element;
+declare const Dropdown: ({ children, isOpen: isOpenControlled, onDismiss, id, }: PropsWithChildren<DropdownProps>) => React.JSX.Element;
 export default Dropdown;

package/dist/esm/molecules/Dropdown/Dropdown.js

@@ -1,41 +1,45 @@
 import React, { useRef, useMemo, useState, useEffect, useCallback } from 'react';
 import DropdownContext from '../Dropdown/contexts/DropdownContext';
-const Dropdown = ({ children, isOpen: isOpenDefault = false, onDismiss, id = 'fs-dropdown', }) => {
-    const [isOpen, setIsOpen] = useState(isOpenDefault);
+const Dropdown = ({ children, isOpen: isOpenControlled, onDismiss, id = 'fs-dropdown', }) => {
+    const [isOpenInternal, setIsOpenInternal] = useState(false);
     const dropdownItemsRef = useRef([]);
     const selectedDropdownItemIndexRef = useRef(0);
-    const dropdownButtonRef = useRef(null);
+    const dropdownTriggerRef = useRef(null);
+    const isOpen = isOpenControlled ?? isOpenInternal;
     const close = useCallback(() => {
-        setIsOpen(false);
+        setIsOpenInternal(false);
         onDismiss?.();
     }, [onDismiss]);
     const open = () => {
-        setIsOpen(true);
+        setIsOpenInternal(true);
     };
     const toggle = useCallback(() => {
-        setIsOpen((old) => {
-            if (old) {
+        setIsOpenInternal((currentIsOpen) => {
+            if (currentIsOpen) {
                 onDismiss?.();
-                dropdownButtonRef.current?.focus();
+                dropdownTriggerRef.current?.focus();
             }
-            return !old;
+            return !currentIsOpen;
         });
     }, [onDismiss]);
+    const addDropdownTriggerRef = useCallback((ref) => {
+        dropdownTriggerRef.current = ref;
+    }, []);
     useEffect(() => {
-        setIsOpen(isOpenDefault);
-    }, [isOpenDefault]);
+        setIsOpenInternal(isOpenControlled ?? false);
+    }, [isOpenControlled]);
     useEffect(() => {
         isOpen && dropdownItemsRef?.current[0]?.focus();
     }, [isOpen]);
     useEffect(() => {
         let firstClick = true;
         const event = (e) => {
-            const someItemWasClicked = dropdownItemsRef?.current.some((item) => e.target === item);
+            const wasSomeItemClicked = dropdownItemsRef?.current.some((item) => e.target === item || item.contains(e.target));
             if (firstClick) {
                 firstClick = false;
                 return;
             }
-            !someItemWasClicked && close();
+            !wasSomeItemClicked && close();
         };
         if (isOpen) {
             document.addEventListener('click', event);
@@ -53,13 +57,13 @@ const Dropdown = ({ children, isOpen: isOpenDefault = false, onDismiss, id = 'fs
             close,
             open,
             toggle,
-            dropdownButtonRef,
-            onDismiss,
+            dropdownTriggerRef,
+            addDropdownTriggerRef,
             selectedDropdownItemIndexRef,
             dropdownItemsRef,
             id,
         };
-    }, [close, id, isOpen, onDismiss, toggle]);
+    }, [isOpen, close, toggle, addDropdownTriggerRef, id]);
     return (React.createElement(DropdownContext.Provider, { value: value }, children));
 };
 export default Dropdown;

package/dist/esm/molecules/Dropdown/Dropdown.js.map

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

package/dist/esm/molecules/Dropdown/DropdownButton.d.ts

@@ -1,14 +1,32 @@
-import React, { AriaAttributes } from 'react';
-import { ButtonProps } from '../../atoms/Button';
-export interface DropdownButtonProps extends Omit<ButtonProps, 'variant' | 'inverse'> {
+import React, { ReactNode } from 'react';
+import { ButtonProps, ButtonIconPosition } from '../../atoms/Button';
+export interface DropdownButtonProps extends Omit<ButtonProps, 'variant' | 'inverse' | 'icon' | 'iconPosition'> {
     /**
      * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
      */
     testId?: string;
     /**
-     * For accessibility purposes, add an ARIA label to the element when it doesn't have a label.
+     * Replace the default rendered element with the provided child element, merging their props and behavior.
      */
-    'aria-label'?: AriaAttributes['aria-label'];
+    asChild?: boolean;
+    /**
+     * Boolean that represents a loading state.
+     */
+    loading?: boolean;
+    /**
+     * Specifies a label for loading state.
+     */
+    loadingLabel?: string;
+    /**
+     * @deprecated
+     * A React component that will be rendered as an icon.
+     */
+    icon?: ReactNode;
+    /**
+     * @deprecated
+     * Specifies where the icon should be positioned
+     */
+    iconPosition?: ButtonIconPosition;
 }
 declare const DropdownButton: React.ForwardRefExoticComponent<DropdownButtonProps & React.RefAttributes<HTMLButtonElement>>;
 export default DropdownButton;

package/dist/esm/molecules/Dropdown/DropdownButton.js

@@ -1,12 +1,12 @@
-import React, { forwardRef, useImperativeHandle } from 'react';
+import React, { cloneElement, forwardRef } from 'react';
 import Button from '../../atoms/Button';
-import { useDropdown } from './hooks/useDropdown';
-const DropdownButton = forwardRef(function DropdownButton({ testId = 'fs-dropdown-button', 'aria-label': ariaLabel, children, ...otherProps }, ref) {
-    const { toggle, dropdownButtonRef, isOpen, id } = useDropdown();
-    useImperativeHandle(ref, () => dropdownButtonRef.current, [
-        dropdownButtonRef,
-    ]);
-    return (React.createElement(Button, { "data-fs-dropdown-button": true, onClick: toggle, "data-testid": testId, ref: dropdownButtonRef, "aria-label": ariaLabel, "aria-expanded": isOpen, "aria-haspopup": "menu", "aria-controls": id, variant: "tertiary", ...otherProps }, children));
+import { useDropdownTrigger } from './hooks/useDropdownTrigger';
+const DropdownButton = forwardRef(function DropdownButton({ testId = 'fs-dropdown-button', children, asChild = false, ...otherProps }, triggerRef) {
+    const triggerProps = useDropdownTrigger({ triggerRef });
+    const asChildrenTrigger = React.isValidElement(children)
+        ? cloneElement(children, { ...triggerProps, ...children.props })
+        : children;
+    return (React.createElement(React.Fragment, null, asChild ? (asChildrenTrigger) : (React.createElement(Button, { "data-fs-dropdown-button": true, "data-testid": testId, variant: "tertiary", ...triggerProps, ...otherProps }, children))));
 });
 export default DropdownButton;
 //# sourceMappingURL=DropdownButton.js.map

package/dist/esm/molecules/Dropdown/DropdownButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownButton.js","sourceRoot":"","sources":["../../../../src/molecules/Dropdown/DropdownButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,mBAAmB,EAAkB,MAAM,OAAO,CAAA;AAC9E,OAAO,MAAuB,MAAM,oBAAoB,CAAA;AAExD,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AAcjD,MAAM,cAAc,GAAG,UAAU,CAC/B,SAAS,cAAc,CACrB,EACE,MAAM,GAAG,oBAAoB,EAC7B,YAAY,EAAE,SAAS,EACtB,QAAQ,EACT,GAAG,UAAU,EACd,EACD,GAAG;IAEH,MAAM,EAAE,MAAM,EAAE,iBAAiB,EAAE,MAAM,EAAE,EAAE,EAAE,GAAG,WAAW,EAAE,CAAA;IAE/D,mBAAmB,CAAC,GAAG,EAAE,GAAG,EAAE,CAAC,iBAAkB,CAAC,OAAQ,EAAE;QAC1D,iBAAiB;KAClB,CAAC,CAAA;IAEF,OAAO,CACL,oBAAC,MAAM,qCAEL,OAAO,EAAE,MAAM,iBACF,MAAM,EACnB,GAAG,EAAE,iBAAiB,gBACV,SAAS,mBACN,MAAM,mBACP,MAAM,mBACL,EAAE,EACjB,OAAO,EAAC,UAAU,KACd,UAAU,IAEb,QAAQ,CACF,CACV,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,cAAc,CAAA"}
+{"version":3,"file":"DropdownButton.js","sourceRoot":"","sources":["../../../../src/molecules/Dropdown/DropdownButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,YAAY,EAAE,UAAU,EAAa,MAAM,OAAO,CAAA;AAClE,OAAO,MAA2C,MAAM,oBAAoB,CAAA;AAC5E,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAA;AAgC/D,MAAM,cAAc,GAAG,UAAU,CAC/B,SAAS,cAAc,CACrB,EAAE,MAAM,GAAG,oBAAoB,EAAE,QAAQ,EAAE,OAAO,GAAG,KAAK,EAAE,GAAG,UAAU,EAAE,EAC3E,UAAU;IAEV,MAAM,YAAY,GAAG,kBAAkB,CAAC,EAAE,UAAU,EAAE,CAAC,CAAA;IAEvD,MAAM,iBAAiB,GAAG,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC;QACtD,CAAC,CAAC,YAAY,CAAC,QAAQ,EAAE,EAAE,GAAG,YAAY,EAAE,GAAG,QAAQ,CAAC,KAAK,EAAE,CAAC;QAChE,CAAC,CAAC,QAAQ,CAAA;IAEZ,OAAO,CACL,0CACG,OAAO,CAAC,CAAC,CAAC,CACT,iBAAiB,CAClB,CAAC,CAAC,CAAC,CACF,oBAAC,MAAM,oDAEQ,MAAM,EACnB,OAAO,EAAC,UAAU,KACd,YAAY,KACZ,UAAU,IAEb,QAAQ,CACF,CACV,CACA,CACJ,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,cAAc,CAAA"}

package/dist/esm/molecules/Dropdown/DropdownItem.d.ts

@@ -6,9 +6,18 @@ export interface DropdownItemProps extends ButtonHTMLAttributes<HTMLButtonElemen
      */
     testId?: string;
     /**
+     * @deprecated
      * A React component that will be rendered as an icon.
      */
     icon?: ReactNode;
+    /**
+     * Replace the default rendered element with the one passed as a child, merging their props and behavior.
+     * */
+    asChild?: boolean;
+    /**
+     * Emit onDismiss event when the component is clicked.
+     */
+    dismissOnClick?: boolean;
 }
 declare const DropdownItem: React.ForwardRefExoticComponent<DropdownItemProps & React.RefAttributes<HTMLButtonElement>>;
 export default DropdownItem;

package/dist/esm/molecules/Dropdown/DropdownItem.js

@@ -1,28 +1,13 @@
-import React, { forwardRef, useImperativeHandle, useRef, useState } from 'react';
-import { useDropdown } from './hooks/useDropdown';
-const DropdownItem = forwardRef(function Button({ children, icon, onClick, testId = 'fs-dropdown-item', ...otherProps }, ref) {
-    const { dropdownItemsRef, selectedDropdownItemIndexRef, close } = useDropdown();
-    const [dropdownItemIndex, setDropdownItemIndex] = useState(0);
-    const dropdownItemRef = useRef();
-    const addToRefs = (el) => {
-        if (el && !dropdownItemsRef?.current.includes(el)) {
-            dropdownItemsRef?.current.push(el);
-            setDropdownItemIndex(dropdownItemsRef?.current.findIndex((element) => element === el) ?? 0);
-        }
-        dropdownItemRef.current = el;
-    };
-    const onFocusItem = () => {
-        selectedDropdownItemIndexRef.current = dropdownItemIndex;
-        dropdownItemsRef?.current[selectedDropdownItemIndexRef.current]?.focus();
-    };
-    const handleOnClickItem = (event) => {
-        onClick?.(event);
-        close?.();
-    };
-    useImperativeHandle(ref, () => dropdownItemRef.current, []);
-    return (React.createElement("button", { "data-fs-dropdown-item": true, "data-testid": testId, ref: addToRefs, onFocus: onFocusItem, onMouseEnter: onFocusItem, onClick: handleOnClickItem, role: "menuitem", tabIndex: -1, "data-index": dropdownItemIndex, ...otherProps },
+import React, { cloneElement, forwardRef } from 'react';
+import { useDropdownItem } from './hooks/useDropdownItem';
+const DropdownItem = forwardRef(function Button({ children, asChild, icon, onClick, dismissOnClick = true, testId = 'fs-dropdown-item', ...otherProps }, ref) {
+    const itemProps = useDropdownItem({ ref, onClick, dismissOnClick });
+    const asChildrenItem = React.isValidElement(children)
+        ? cloneElement(children, { ...itemProps, ...children.props })
+        : children;
+    return (React.createElement(React.Fragment, null, asChild ? (asChildrenItem) : (React.createElement("button", { "data-fs-dropdown-item": true, "data-testid": testId, ...itemProps, ...otherProps },
         !!icon && icon,
-        children));
+        children))));
 });
 export default DropdownItem;
 //# sourceMappingURL=DropdownItem.js.map

package/dist/esm/molecules/Dropdown/DropdownItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownItem.js","sourceRoot":"","sources":["../../../../src/molecules/Dropdown/DropdownItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,mBAAmB,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEhF,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AAcjD,MAAM,YAAY,GAAG,UAAU,CAC7B,SAAS,MAAM,CACb,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,GAAG,kBAAkB,EAAE,GAAG,UAAU,EAAE,EACvE,GAAG;IAEH,MAAM,EAAE,gBAAgB,EAAE,4BAA4B,EAAE,KAAK,EAAE,GAC7D,WAAW,EAAE,CAAA;IAEf,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAA;IAC7D,MAAM,eAAe,GAAG,MAAM,EAAqB,CAAA;IAEnD,MAAM,SAAS,GAAG,CAAC,EAAqB,EAAE,EAAE;QAC1C,IAAI,EAAE,IAAI,CAAC,gBAAgB,EAAE,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAE;YACjD,gBAAgB,EAAE,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;YAClC,oBAAoB,CAClB,gBAAgB,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,OAAO,KAAK,EAAE,CAAC,IAAI,CAAC,CACtE,CAAA;SACF;QAED,eAAe,CAAC,OAAO,GAAG,EAAE,CAAA;IAC9B,CAAC,CAAA;IAED,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,4BAA6B,CAAC,OAAO,GAAG,iBAAiB,CAAA;QACzD,gBAAgB,EAAE,OAAO,CAAC,4BAA6B,CAAC,OAAO,CAAC,EAAE,KAAK,EAAE,CAAA;IAC3E,CAAC,CAAA;IAED,MAAM,iBAAiB,GAAG,CACxB,KAAsD,EACtD,EAAE;QACF,OAAO,EAAE,CAAC,KAAK,CAAC,CAAA;QAChB,KAAK,EAAE,EAAE,CAAA;IACX,CAAC,CAAA;IAED,mBAAmB,CAAC,GAAG,EAAE,GAAG,EAAE,CAAC,eAAe,CAAC,OAAQ,EAAE,EAAE,CAAC,CAAA;IAE5D,OAAO,CACL,8EAEe,MAAM,EACnB,GAAG,EAAE,SAAS,EACd,OAAO,EAAE,WAAW,EACpB,YAAY,EAAE,WAAW,EACzB,OAAO,EAAE,iBAAiB,EAC1B,IAAI,EAAC,UAAU,EACf,QAAQ,EAAE,CAAC,CAAC,gBACA,iBAAiB,KACzB,UAAU;QAEb,CAAC,CAAC,IAAI,IAAI,IAAI;QACd,QAAQ,CACF,CACV,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,YAAY,CAAA"}
+{"version":3,"file":"DropdownItem.js","sourceRoot":"","sources":["../../../../src/molecules/Dropdown/DropdownItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAEvD,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAA;AAuBzD,MAAM,YAAY,GAAG,UAAU,CAC7B,SAAS,MAAM,CACb,EACE,QAAQ,EACR,OAAO,EACP,IAAI,EACJ,OAAO,EACP,cAAc,GAAG,IAAI,EACrB,MAAM,GAAG,kBAAkB,EAC3B,GAAG,UAAU,EACd,EACD,GAAG;IAEH,MAAM,SAAS,GAAG,eAAe,CAAC,EAAE,GAAG,EAAE,OAAO,EAAE,cAAc,EAAE,CAAC,CAAA;IAEnE,MAAM,cAAc,GAAG,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC;QACnD,CAAC,CAAC,YAAY,CAAC,QAAQ,EAAE,EAAE,GAAG,SAAS,EAAE,GAAG,QAAQ,CAAC,KAAK,EAAE,CAAC;QAC7D,CAAC,CAAC,QAAQ,CAAA;IAEZ,OAAO,CACL,0CACG,OAAO,CAAC,CAAC,CAAC,CACT,cAAc,CACf,CAAC,CAAC,CAAC,CACF,8EAEe,MAAM,KACf,SAAS,KACT,UAAU;QAEb,CAAC,CAAC,IAAI,IAAI,IAAI;QACd,QAAQ,CACF,CACV,CACA,CACJ,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,YAAY,CAAA"}

package/dist/esm/molecules/Dropdown/DropdownMenu.d.ts

@@ -17,10 +17,14 @@ export interface DropdownMenuProps extends ModalContentProps {
      */
     onDismiss?: (event: MouseEvent | KeyboardEvent) => void;
     /**
-    * Specifies the size variant.
-    */
+     * Specifies the size variant.
+     */
     size?: 'small' | 'regular';
+    /**
+     * Alignment for the dropdown
+     */
+    align?: 'left' | 'right' | 'center';
     children: ReactNode[] | ReactNode;
 }
-declare const DropdownMenu: ({ children, testId, size, style, ...otherProps }: PropsWithChildren<DropdownMenuProps>) => React.ReactPortal | null;
+declare const DropdownMenu: ({ children, testId, size, align, style, ...otherProps }: PropsWithChildren<DropdownMenuProps>) => React.ReactPortal | null;
 export default DropdownMenu;

package/dist/esm/molecules/Dropdown/DropdownMenu.js

@@ -7,9 +7,9 @@ import { useDropdownPosition } from './hooks/useDropdownPosition';
  * https://github.com/reach/reach-ui/blob/main/packages/dialog/src/index.tsx
  * https://reach.tech/dialog
  */
-const DropdownMenu = ({ children, testId = 'fs-dropdown-menu', size = 'regular', style, ...otherProps }) => {
-    const { isOpen, close, dropdownItemsRef, selectedDropdownItemIndexRef, dropdownButtonRef, id } = useDropdown();
-    const dropdownPosition = useDropdownPosition();
+const DropdownMenu = ({ children, testId = 'fs-dropdown-menu', size = 'regular', align = 'left', style, ...otherProps }) => {
+    const { isOpen, close, dropdownItemsRef, selectedDropdownItemIndexRef, dropdownTriggerRef, id, } = useDropdown();
+    const { loading: loadingPosition, ...dropdownPosition } = useDropdownPosition(align);
     const childrenLength = React.Children.toArray(children).length;
     const handleDownPress = () => {
         if (selectedDropdownItemIndexRef.current < childrenLength - 1) {
@@ -39,25 +39,53 @@ const DropdownMenu = ({ children, testId = 'fs-dropdown-menu', size = 'regular',
     };
     const handleEscapePress = () => {
         close?.();
-        dropdownButtonRef?.current?.focus();
+        dropdownTriggerRef?.current?.focus();
+    };
+    const handleKeyNavigatePress = (key) => {
+        const dropdownItems = dropdownItemsRef?.current ?? [];
+        const selectedIndex = selectedDropdownItemIndexRef.current;
+        const rearrangedDropdownItems = [
+            ...dropdownItems.slice(selectedIndex + 1),
+            ...dropdownItems.slice(0, selectedIndex + 1),
+        ];
+        const matchItem = rearrangedDropdownItems.find((item) => item.textContent?.[0]?.toLowerCase() === key.toLowerCase());
+        if (matchItem) {
+            selectedDropdownItemIndexRef.current = dropdownItems.indexOf(matchItem);
+            matchItem.focus();
+        }
     };
     const handleBackdropKeyDown = (event) => {
-        if (event.defaultPrevented || event.key === 'Enter') {
+        if (event.defaultPrevented || event.key === 'Enter' || event.key === ' ') {
             return;
         }
         event.preventDefault();
-        event.key === 'Escape' && handleEscapePress();
-        event.key === 'ArrowDown' && handleDownPress();
-        event.key === 'ArrowUp' && handleUpPress();
-        event.key === 'Home' && handleHomePress();
-        event.key === 'End' && handleEndPress();
+        switch (event.key) {
+            case 'Escape':
+                handleEscapePress();
+                break;
+            case 'ArrowDown':
+                handleDownPress();
+                break;
+            case 'ArrowUp':
+                handleUpPress();
+                break;
+            case 'Home':
+                handleHomePress();
+                break;
+            case 'End':
+                handleEndPress();
+                break;
+            default:
+                handleKeyNavigatePress(event.key);
+                break;
+        }
         event.stopPropagation();
     };
     const clearChildrenReferences = () => {
         dropdownItemsRef.current = [];
         return null;
     };
-    return isOpen
+    return (isOpen && !loadingPosition)
         ? createPortal(React.createElement("div", { role: "presentation", "data-fs-dropdown-overlay": true, onKeyDown: handleBackdropKeyDown, "data-testid": `${testId}-overlay` },
             React.createElement("div", { role: "menu", "aria-orientation": "vertical", "data-fs-dropdown-menu": true, "data-fs-dropdown-menu-size": size, "data-testid": testId, style: { ...dropdownPosition, ...style }, id: id, ...otherProps }, children)), document.body)
         : clearChildrenReferences();

package/dist/esm/molecules/Dropdown/DropdownMenu.js.map

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

package/dist/esm/molecules/Dropdown/contexts/DropdownContext.d.ts

@@ -1,4 +1,4 @@
-export type DropdownContextState = {
+export type DropdownContextState<T extends HTMLElement = HTMLElement, E extends HTMLElement = HTMLElement> = {
     /**
      * Control de Dropdown state as Opened (true) or Closed (false).
      */
@@ -6,7 +6,7 @@ export type DropdownContextState = {
     /**
      * Reference to DropdownButton, used to calculate a position for the DropdownMenu.
      */
-    dropdownButtonRef: React.RefObject<HTMLButtonElement> | null;
+    dropdownTriggerRef: React.MutableRefObject<T | null> | null;
     /**
      * Reference to a selected DropdownItem, used to manipulate focus.
      */
@@ -14,11 +14,7 @@ export type DropdownContextState = {
     /**
      * Array of References to dropdownItems in a DropdownMenu.
      */
-    dropdownItemsRef: React.MutableRefObject<HTMLButtonElement[]> | null;
-    /**
-     * Close DropdownMenu event inherited from Modal.
-     */
-    onDismiss?(): void;
+    dropdownItemsRef: React.MutableRefObject<E[]> | null;
     /**
      * Function responsible for close the DropdownMenu in this context.
      */
@@ -35,6 +31,10 @@ export type DropdownContextState = {
      * Identifier to be used in aria-controls
      */
     id: string;
+    /**
+     * Associates the dropdown trigger element's ref for managing its position and interaction events.
+     */
+    addDropdownTriggerRef?(ref: T | null): void;
 };
-declare const DropdownContext: import("react").Context<DropdownContextState>;
+declare const DropdownContext: import("react").Context<DropdownContextState<HTMLElement, HTMLElement>>;
 export default DropdownContext;

package/dist/esm/molecules/Dropdown/contexts/DropdownContext.js

@@ -1,7 +1,7 @@
 import { createContext } from 'react';
 const defaultState = {
     isOpen: false,
-    dropdownButtonRef: null,
+    dropdownTriggerRef: null,
     selectedDropdownItemIndexRef: null,
     dropdownItemsRef: null,
     id: 'fs-dropdown',

package/dist/esm/molecules/Dropdown/contexts/DropdownContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownContext.js","sourceRoot":"","sources":["../../../../../src/molecules/Dropdown/contexts/DropdownContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AA0CrC,MAAM,YAAY,GAAyB;IACzC,MAAM,EAAE,KAAK;IACb,iBAAiB,EAAE,IAAI;IACvB,4BAA4B,EAAE,IAAI;IAClC,gBAAgB,EAAE,IAAI;IACtB,EAAE,EAAE,aAAa;CAClB,CAAA;AAED,MAAM,eAAe,GAAG,aAAa,CAAuB,YAAY,CAAC,CAAA;AAEzE,eAAe,eAAe,CAAA"}
+{"version":3,"file":"DropdownContext.js","sourceRoot":"","sources":["../../../../../src/molecules/Dropdown/contexts/DropdownContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AA4CrC,MAAM,YAAY,GAAyB;IACzC,MAAM,EAAE,KAAK;IACb,kBAAkB,EAAE,IAAI;IACxB,4BAA4B,EAAE,IAAI;IAClC,gBAAgB,EAAE,IAAI;IACtB,EAAE,EAAE,aAAa;CAClB,CAAA;AAED,MAAM,eAAe,GAAG,aAAa,CAAuB,YAAY,CAAC,CAAA;AAEzE,eAAe,eAAe,CAAA"}

package/dist/esm/molecules/Dropdown/hooks/useDropdown.d.ts

@@ -3,4 +3,4 @@ import type { DropdownContextState } from '../contexts/DropdownContext';
  * Hook to use the Dropdown context.
  * @returns Dropdown context.
  */
-export declare const useDropdown: () => DropdownContextState;
+export declare const useDropdown: <T extends HTMLElement = HTMLElement, E extends HTMLElement = HTMLElement>() => DropdownContextState<T, E>;

package/dist/esm/molecules/Dropdown/hooks/useDropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"useDropdown.js","sourceRoot":"","sources":["../../../../../src/molecules/Dropdown/hooks/useDropdown.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAGlC,OAAO,eAAe,MAAM,6BAA6B,CAAA;AAEzD;;;GAGG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,EAAE;IAC9B,MAAM,OAAO,GAAG,UAAU,CAAuB,eAAe,CAAC,CAAA;IAEjE,IAAI,OAAO,KAAK,SAAS,EAAE;QACzB,MAAM,IAAI,KAAK,CAAC,2DAA2D,CAAC,CAAA;KAC7E;IAED,OAAO,OAAO,CAAA;AAChB,CAAC,CAAA"}
+{"version":3,"file":"useDropdown.js","sourceRoot":"","sources":["../../../../../src/molecules/Dropdown/hooks/useDropdown.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAGlC,OAAO,eAAe,MAAM,6BAA6B,CAAA;AAEzD;;;GAGG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,GAA6E,EAAE;IACxG,MAAM,OAAO,GAAG,UAAU,CAAiD,eAAe,CAAC,CAAA;IAE3F,IAAI,OAAO,KAAK,SAAS,EAAE;QACzB,MAAM,IAAI,KAAK,CAAC,2DAA2D,CAAC,CAAA;KAC7E;IAED,OAAO,OAAqC,CAAA;AAC9C,CAAC,CAAA"}

package/dist/esm/molecules/Dropdown/hooks/useDropdownItem.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+export type UseDropdownItemProps<E extends HTMLElement = HTMLElement> = {
+    ref: React.ForwardedRef<E>;
+    onClick?: React.MouseEventHandler<E>;
+    dismissOnClick?: boolean;
+};
+export declare const useDropdownItem: <E extends HTMLElement = HTMLElement>({ ref, onClick, dismissOnClick, }: UseDropdownItemProps<E>) => {
+    ref: (el: E) => void;
+    onFocus: () => void;
+    onMouseEnter: () => void;
+    onClick: (event: React.MouseEvent<E, MouseEvent>) => void;
+    role: string;
+    tabIndex: number;
+    'data-index': number;
+};

package/dist/esm/molecules/Dropdown/hooks/useDropdownItem.js

@@ -0,0 +1,33 @@
+import { useImperativeHandle, useRef, useState } from 'react';
+import { useDropdown } from './useDropdown';
+export const useDropdownItem = ({ ref, onClick, dismissOnClick = true, }) => {
+    const { dropdownItemsRef, selectedDropdownItemIndexRef, close } = useDropdown();
+    const [dropdownItemIndex, setDropdownItemIndex] = useState(0);
+    const dropdownItemRef = useRef();
+    const addToRefs = (el) => {
+        if (el && !dropdownItemsRef?.current.includes(el)) {
+            dropdownItemsRef?.current.push(el);
+            setDropdownItemIndex(dropdownItemsRef?.current.findIndex((element) => element === el) ?? 0);
+        }
+        dropdownItemRef.current = el;
+    };
+    const onFocusItem = () => {
+        selectedDropdownItemIndexRef.current = dropdownItemIndex;
+        dropdownItemsRef?.current[selectedDropdownItemIndexRef.current]?.focus();
+    };
+    const handleOnClickItem = (event) => {
+        onClick?.(event);
+        dismissOnClick && close?.();
+    };
+    useImperativeHandle(ref, () => dropdownItemRef.current, []);
+    return {
+        ref: addToRefs,
+        onFocus: onFocusItem,
+        onMouseEnter: onFocusItem,
+        onClick: handleOnClickItem,
+        role: 'menuitem',
+        tabIndex: -1,
+        'data-index': dropdownItemIndex,
+    };
+};
+//# sourceMappingURL=useDropdownItem.js.map

package/dist/esm/molecules/Dropdown/hooks/useDropdownItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDropdownItem.js","sourceRoot":"","sources":["../../../../../src/molecules/Dropdown/hooks/useDropdownItem.ts"],"names":[],"mappings":"AAAA,OAAc,EAAE,mBAAmB,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEpE,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAQ3C,MAAM,CAAC,MAAM,eAAe,GAAG,CAAsC,EACnE,GAAG,EACH,OAAO,EACP,cAAc,GAAG,IAAI,GACG,EAAE,EAAE;IAC5B,MAAM,EAAE,gBAAgB,EAAE,4BAA4B,EAAE,KAAK,EAAE,GAAG,WAAW,EAG1E,CAAA;IAEH,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAA;IAC7D,MAAM,eAAe,GAAG,MAAM,EAAK,CAAA;IAEnC,MAAM,SAAS,GAAG,CAAC,EAAK,EAAE,EAAE;QAC1B,IAAI,EAAE,IAAI,CAAC,gBAAgB,EAAE,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAE;YACjD,gBAAgB,EAAE,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;YAClC,oBAAoB,CAClB,gBAAgB,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,OAAO,KAAK,EAAE,CAAC,IAAI,CAAC,CACtE,CAAA;SACF;QAED,eAAe,CAAC,OAAO,GAAG,EAAE,CAAA;IAC9B,CAAC,CAAA;IAED,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,4BAA6B,CAAC,OAAO,GAAG,iBAAiB,CAAA;QACzD,gBAAgB,EAAE,OAAO,CAAC,4BAA6B,CAAC,OAAO,CAAC,EAAE,KAAK,EAAE,CAAA;IAC3E,CAAC,CAAA;IAED,MAAM,iBAAiB,GAAG,CAAC,KAAsC,EAAE,EAAE;QACnE,OAAO,EAAE,CAAC,KAAK,CAAC,CAAA;QAChB,cAAc,IAAI,KAAK,EAAE,EAAE,CAAA;IAC7B,CAAC,CAAA;IAED,mBAAmB,CAAC,GAAG,EAAE,GAAG,EAAE,CAAC,eAAe,CAAC,OAAQ,EAAE,EAAE,CAAC,CAAA;IAE5D,OAAO;QACL,GAAG,EAAE,SAAS;QACd,OAAO,EAAE,WAAW;QACpB,YAAY,EAAE,WAAW;QACzB,OAAO,EAAE,iBAAiB;QAC1B,IAAI,EAAE,UAAU;QAChB,QAAQ,EAAE,CAAC,CAAC;QACZ,YAAY,EAAE,iBAAiB;KAChC,CAAA;AACH,CAAC,CAAA"}

package/dist/esm/molecules/Dropdown/hooks/useDropdownPosition.d.ts

@@ -1,7 +1,9 @@
-type DropdownPosition = Pick<React.CSSProperties, 'position' | 'top' | 'left'>;
+type DropdownPosition = {
+    loading: boolean;
+} & Pick<React.CSSProperties, 'position' | 'top' | 'left' | 'right' | 'transform'>;
 /**
  * Hook used to find the DropdownMenu position in relation to DropdownButton
  * @returns Style with positions.
  */
-export declare const useDropdownPosition: () => DropdownPosition;
+export declare const useDropdownPosition: (align?: 'left' | 'center' | 'right') => DropdownPosition;
 export {};

package/dist/esm/molecules/Dropdown/hooks/useDropdownPosition.js

@@ -1,25 +1,62 @@
+import { useEffect, useState } from 'react';
 import { useDropdown } from './useDropdown';
 /**
  * Hook used to find the DropdownMenu position in relation to DropdownButton
  * @returns Style with positions.
  */
-export const useDropdownPosition = () => {
-    const { dropdownButtonRef } = useDropdown();
-    // Necessary to use this component in SSR
-    const isBrowser = typeof window !== 'undefined';
-    const buttonRect = dropdownButtonRef?.current?.getBoundingClientRect();
-    const topLevel = buttonRect?.top ?? 0;
-    const topOffset = buttonRect?.height ?? 0;
-    const leftLevel = buttonRect?.left ?? 0;
-    // The scroll properties fix the position of DropdownMenu when the scroll is activated.
-    const scrollTop = isBrowser ? document?.documentElement?.scrollTop : 0;
-    const scrollLeft = isBrowser ? document?.documentElement?.scrollLeft : 0;
-    const topPosition = topLevel + topOffset + scrollTop;
-    const leftPosition = leftLevel + scrollLeft;
-    return {
-        position: 'absolute',
-        top: topPosition,
-        left: leftPosition,
-    };
+export const useDropdownPosition = (align = 'left') => {
+    const { dropdownTriggerRef, isOpen } = useDropdown();
+    const [positionProps, setPositionProps] = useState({
+        top: 0,
+        left: 0,
+        right: 'auto',
+        transform: 'none',
+        loading: true
+    });
+    useEffect(() => {
+        const updateMenuPosition = () => {
+            // Necessary to use this component in SSR
+            const isBrowser = typeof window !== 'undefined';
+            if (!dropdownTriggerRef?.current)
+                return;
+            const buttonRect = dropdownTriggerRef.current.getBoundingClientRect();
+            const topLevel = buttonRect?.top ?? 0;
+            const topOffset = buttonRect?.height ?? 0;
+            const leftLevel = buttonRect?.left ?? 0;
+            const buttonWidth = buttonRect?.width ?? 0;
+            // The scroll properties fix the position of DropdownMenu when the scroll is activated.
+            const scrollTop = isBrowser ? document?.documentElement?.scrollTop : 0;
+            const scrollLeft = isBrowser ? document?.documentElement?.scrollLeft : 0;
+            const topPosition = topLevel + topOffset + scrollTop;
+            let leftPosition = leftLevel + scrollLeft;
+            let rightPosition = 'auto';
+            let transform = 'none';
+            if (align === 'right') {
+                rightPosition = `${document.documentElement.clientWidth - leftLevel - buttonWidth}px`;
+                leftPosition = 'auto';
+            }
+            else if (align === 'center') {
+                leftPosition = leftLevel + (buttonWidth / 2) + scrollLeft;
+                transform = 'translateX(-50%)';
+            }
+            setPositionProps({
+                top: topPosition,
+                left: leftPosition,
+                right: rightPosition,
+                transform,
+                loading: false
+            });
+        };
+        if (isOpen) {
+            // Update the position of the menu
+            updateMenuPosition();
+            window.addEventListener('resize', updateMenuPosition);
+        }
+        // Cleanup listener on unmount or close
+        return () => {
+            window.removeEventListener('resize', updateMenuPosition);
+        };
+    }, [dropdownTriggerRef, isOpen, align]);
+    return { ...positionProps, position: 'absolute' };
 };
 //# sourceMappingURL=useDropdownPosition.js.map

package/dist/esm/molecules/Dropdown/hooks/useDropdownPosition.js.map

@@ -1 +1 @@
-{"version":3,"file":"useDropdownPosition.js","sourceRoot":"","sources":["../../../../../src/molecules/Dropdown/hooks/useDropdownPosition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAI3C;;;GAGG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAqB,EAAE;IACxD,MAAM,EAAE,iBAAiB,EAAE,GAAG,WAAW,EAAE,CAAA;IAE3C,yCAAyC;IACzC,MAAM,SAAS,GAAG,OAAO,MAAM,KAAK,WAAW,CAAA;IAE/C,MAAM,UAAU,GAAG,iBAAiB,EAAE,OAAO,EAAE,qBAAqB,EAAE,CAAA;IACtE,MAAM,QAAQ,GAAG,UAAU,EAAE,GAAG,IAAI,CAAC,CAAA;IACrC,MAAM,SAAS,GAAG,UAAU,EAAE,MAAM,IAAI,CAAC,CAAA;IACzC,MAAM,SAAS,GAAG,UAAU,EAAE,IAAI,IAAI,CAAC,CAAA;IAEvC,uFAAuF;IACvF,MAAM,SAAS,GAAG,SAAS,CAAC,CAAC,CAAC,QAAQ,EAAE,eAAe,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,CAAA;IACtE,MAAM,UAAU,GAAG,SAAS,CAAC,CAAC,CAAC,QAAQ,EAAE,eAAe,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,CAAA;IAExE,MAAM,WAAW,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,CAAA;IAEpD,MAAM,YAAY,GAAG,SAAS,GAAG,UAAU,CAAA;IAE3C,OAAO;QACL,QAAQ,EAAE,UAAU;QACpB,GAAG,EAAE,WAAW;QAChB,IAAI,EAAE,YAAY;KACnB,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"useDropdownPosition.js","sourceRoot":"","sources":["../../../../../src/molecules/Dropdown/hooks/useDropdownPosition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAC3C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAM3C;;;GAGG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,QAAqC,MAAM,EAAoB,EAAE;IACnG,MAAM,EAAE,kBAAkB,EAAE,MAAM,EAAE,GAAG,WAAW,EAAE,CAAA;IAEpD,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC;QACjD,GAAG,EAAE,CAAC;QACN,IAAI,EAAE,CAAgC;QACtC,KAAK,EAAE,MAAM;QACb,SAAS,EAAE,MAAM;QACjB,OAAO,EAAE,IAAI;KACd,CAAC,CAAA;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,kBAAkB,GAAG,GAAG,EAAE;YAC9B,yCAAyC;YACzC,MAAM,SAAS,GAAG,OAAO,MAAM,KAAK,WAAW,CAAA;YAE/C,IAAI,CAAC,kBAAkB,EAAE,OAAO;gBAAE,OAAM;YAExC,MAAM,UAAU,GAAG,kBAAkB,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAA;YACrE,MAAM,QAAQ,GAAG,UAAU,EAAE,GAAG,IAAI,CAAC,CAAA;YACrC,MAAM,SAAS,GAAG,UAAU,EAAE,MAAM,IAAI,CAAC,CAAA;YACzC,MAAM,SAAS,GAAG,UAAU,EAAE,IAAI,IAAI,CAAC,CAAA;YACvC,MAAM,WAAW,GAAG,UAAU,EAAE,KAAK,IAAI,CAAC,CAAA;YAE1C,uFAAuF;YACvF,MAAM,SAAS,GAAG,SAAS,CAAC,CAAC,CAAC,QAAQ,EAAE,eAAe,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,CAAA;YACtE,MAAM,UAAU,GAAG,SAAS,CAAC,CAAC,CAAC,QAAQ,EAAE,eAAe,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,CAAA;YAExE,MAAM,WAAW,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,CAAA;YAEpD,IAAI,YAAY,GAAgC,SAAS,GAAG,UAAU,CAAA;YACtE,IAAI,aAAa,GAAG,MAAM,CAAA;YAC1B,IAAI,SAAS,GAAG,MAAM,CAAA;YAEtB,IAAI,KAAK,KAAK,OAAO,EAAE;gBACrB,aAAa,GAAG,GAAG,QAAQ,CAAC,eAAe,CAAC,WAAW,GAAG,SAAS,GAAG,WAAW,IAAI,CAAA;gBACrF,YAAY,GAAG,MAAM,CAAA;aACtB;iBAAM,IAAI,KAAK,KAAK,QAAQ,EAAE;gBAC7B,YAAY,GAAG,SAAS,GAAG,CAAC,WAAW,GAAG,CAAC,CAAC,GAAG,UAAU,CAAA;gBACzD,SAAS,GAAG,kBAAkB,CAAA;aAC/B;YAED,gBAAgB,CAAC;gBACf,GAAG,EAAE,WAAW;gBAChB,IAAI,EAAE,YAAY;gBAClB,KAAK,EAAE,aAAa;gBACpB,SAAS;gBACT,OAAO,EAAE,KAAK;aACf,CAAC,CAAA;QACJ,CAAC,CAAA;QAED,IAAI,MAAM,EAAE;YACV,kCAAkC;YAClC,kBAAkB,EAAE,CAAA;YACpB,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,kBAAkB,CAAC,CAAA;SACtD;QAED,uCAAuC;QACvC,OAAO,GAAG,EAAE;YACV,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,kBAAkB,CAAC,CAAA;QAC1D,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,kBAAkB,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC,CAAA;IAEvC,OAAO,EAAE,GAAG,aAAa,EAAE,QAAQ,EAAE,UAAmB,EAAE,CAAA;AAC5D,CAAC,CAAA"}