@apia/components 2.0.9 → 2.0.11

package/dist/components/ListBox/ListboxItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListboxItem.js","sources":["../../../src/components/ListBox/ListboxItem.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\r\nimport {\r\n  FC,\r\n  MouseEvent,\r\n  ReactNode,\r\n  memo,\r\n  useCallback,\r\n  useContext,\r\n  useMemo,\r\n} from 'react';\r\nimport { ListboxContext } from './ListboxContext';\r\nimport { BoxProps } from '@apia/theme';\r\nimport { decodeHTMLEntities } from '@apia/util';\r\n\r\nexport type TListboxItem = {\r\n  children?: ReactNode;\r\n  rowIndex?: number;\r\n} & BoxProps & {\r\n    /**\r\n     * El label se usa en aria-label por motivos de accesibilidad y además en\r\n     * la funcionalidad de búsqueda.\r\n     */\r\n    label: string;\r\n  };\r\n\r\nexport const ListboxItem: FC<TListboxItem> = memo(\r\n  ({ children, rowIndex: outerRowIndex, label, ...domProps }) => {\r\n    const {\r\n      getState,\r\n      listboxActions,\r\n      onDoubleClickNode,\r\n      onClickNode,\r\n      useListbox,\r\n    } = useContext(ListboxContext);\r\n    const rowIndex = useMemo(() => outerRowIndex ?? -1, [outerRowIndex]);\r\n    const ref = useListbox<HTMLLIElement>('row', { rowIndex });\r\n\r\n    return (\r\n      <>\r\n        {domProps.className?.includes('separator') && (\r\n          <li className=\"separator\"></li>\r\n        )}\r\n        <li\r\n          {...(domProps as any)}\r\n          className={`${\r\n            domProps.className\r\n              ?.split(' ')\r\n              .filter((current) => current !== 'separator')\r\n              .join(' ') ?? ''\r\n          } listbox__row`}\r\n          ref={ref}\r\n          role=\"option\"\r\n          onDoubleClick={useCallback(\r\n            (ev: MouseEvent<HTMLElement>) => {\r\n              ev.preventDefault();\r\n              onDoubleClickNode?.({\r\n                ...ev,\r\n                target: (ev.target as HTMLElement).closest(\r\n                  '[role=\"option\"]',\r\n                ) as HTMLElement,\r\n              });\r\n            },\r\n            [onDoubleClickNode],\r\n          )}\r\n          onMouseDown={useCallback(\r\n            (ev: MouseEvent<HTMLElement>) => {\r\n              onClickNode?.({\r\n                ...ev,\r\n                target: (ev.target as HTMLElement).closest(\r\n                  '[role=\"option\"]',\r\n                ) as HTMLElement,\r\n              });\r\n              if (\r\n                (getState().isMultipleSelection && ev.shiftKey) ||\r\n                ev.detail > 1\r\n              )\r\n                ev.preventDefault();\r\n              listboxActions.updateFocusByClickEvent({\r\n                rowIndex,\r\n                isCtrlKey: ev.ctrlKey,\r\n                isShiftKey: ev.shiftKey,\r\n              });\r\n            },\r\n            [getState, listboxActions, onClickNode, rowIndex],\r\n          )}\r\n          aria-label={label}\r\n          title={useMemo(() => decodeHTMLEntities(label), [label])}\r\n        >\r\n          {children}\r\n        </li>\r\n      </>\r\n    );\r\n  },\r\n);\r\n\r\nListboxItem.displayName = 'ListboxItem';\r\n"],"names":[],"mappings":";;;;;AAyBO,MAAM,WAAgC,GAAA,IAAA;AAAA,EAC3C,CAAC,EAAE,QAAU,EAAA,QAAA,EAAU,eAAe,KAAO,EAAA,GAAG,UAAe,KAAA;AAC7D,IAAM,MAAA;AAAA,MACJ,QAAA;AAAA,MACA,cAAA;AAAA,MACA,iBAAA;AAAA,MACA,WAAA;AAAA,MACA,UAAA;AAAA,KACF,GAAI,WAAW,cAAc,CAAA,CAAA;AAC7B,IAAA,MAAM,WAAW,OAAQ,CAAA,MAAM,iBAAiB,CAAI,CAAA,EAAA,CAAC,aAAa,CAAC,CAAA,CAAA;AACnE,IAAA,MAAM,GAAM,GAAA,UAAA,CAA0B,KAAO,EAAA,EAAE,UAAU,CAAA,CAAA;AAEzD,IAAA,uBAEK,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,MAAA,QAAA,CAAS,WAAW,QAAS,CAAA,WAAW,qBACtC,GAAA,CAAA,IAAA,EAAA,EAAG,WAAU,WAAY,EAAA,CAAA;AAAA,sBAE5B,GAAA;AAAA,QAAC,IAAA;AAAA,QAAA;AAAA,UACE,GAAI,QAAA;AAAA,UACL,WAAW,CACT,EAAA,QAAA,CAAS,SACL,EAAA,KAAA,CAAM,GAAG,CACV,CAAA,MAAA,CAAO,CAAC,OAAA,KAAY,YAAY,WAAW,CAAA,CAC3C,IAAK,CAAA,GAAG,KAAK,EAClB,CAAA,aAAA,CAAA;AAAA,UACA,GAAA;AAAA,UACA,IAAK,EAAA,QAAA;AAAA,UACL,aAAe,EAAA,WAAA;AAAA,YACb,CAAC,EAAgC,KAAA;AAC/B,cAAA,EAAA,CAAG,cAAe,EAAA,CAAA;AAClB,cAAoB,iBAAA,GAAA;AAAA,gBAClB,GAAG,EAAA;AAAA,gBACH,MAAA,EAAS,GAAG,MAAuB,CAAA,OAAA;AAAA,kBACjC,iBAAA;AAAA,iBACF;AAAA,eACD,CAAA,CAAA;AAAA,aACH;AAAA,YACA,CAAC,iBAAiB,CAAA;AAAA,WACpB;AAAA,UACA,WAAa,EAAA,WAAA;AAAA,YACX,CAAC,EAAgC,KAAA;AAC/B,cAAc,WAAA,GAAA;AAAA,gBACZ,GAAG,EAAA;AAAA,gBACH,MAAA,EAAS,GAAG,MAAuB,CAAA,OAAA;AAAA,kBACjC,iBAAA;AAAA,iBACF;AAAA,eACD,CAAA,CAAA;AACD,cAAA,IACG,UAAW,CAAA,mBAAA,IAAuB,EAAG,CAAA,QAAA,IACtC,GAAG,MAAS,GAAA,CAAA;AAEZ,gBAAA,EAAA,CAAG,cAAe,EAAA,CAAA;AACpB,cAAA,cAAA,CAAe,uBAAwB,CAAA;AAAA,gBACrC,QAAA;AAAA,gBACA,WAAW,EAAG,CAAA,OAAA;AAAA,gBACd,YAAY,EAAG,CAAA,QAAA;AAAA,eAChB,CAAA,CAAA;AAAA,aACH;AAAA,YACA,CAAC,QAAA,EAAU,cAAgB,EAAA,WAAA,EAAa,QAAQ,CAAA;AAAA,WAClD;AAAA,UACA,YAAY,EAAA,KAAA;AAAA,UACZ,KAAA,EAAO,QAAQ,MAAM,kBAAA,CAAmB,KAAK,CAAG,EAAA,CAAC,KAAK,CAAC,CAAA;AAAA,UAEtD,QAAA;AAAA,SAAA;AAAA,OACH;AAAA,KACF,EAAA,CAAA,CAAA;AAAA,GAEJ;AACF,EAAA;AAEA,WAAA,CAAY,WAAc,GAAA,aAAA;;;;"}

package/dist/components/ListBox/ListboxKeyhandler.js

@@ -0,0 +1,154 @@
+import { jsx } from '@apia/theme/jsx-runtime';
+import { useContext, useMemo, useCallback } from 'react';
+import { ListboxContext } from './ListboxContext.js';
+import { Box, getVariant } from '@apia/theme';
+import { WaiTypeAhead } from '../waiAriaHelpers/typeAhead.js';
+
+const ListboxKeyhandler = ({ children, className }) => {
+  const {
+    listboxActions,
+    id,
+    getState,
+    onConfirmSelection,
+    onPressEnterOnNode,
+    onPressKeyOnNode,
+    variant
+  } = useContext(ListboxContext);
+  const typer = useMemo(
+    () => getState().showSearchbox ? null : new WaiTypeAhead({
+      onMultipleKeys(characters) {
+        listboxActions.searchElementsByStartingCharacters({
+          characters
+        });
+      },
+      onSingleKey(characters) {
+        listboxActions.searchElementsByStartingCharacters({
+          characters
+        });
+      }
+    }),
+    [getState, listboxActions]
+  );
+  const shoutConfirmSelection = useCallback(
+    (ev) => {
+      onConfirmSelection?.({
+        originalEvent: ev,
+        selectedElements: !getState().allowSelection ? [] : getState().selectedRows.map(
+          (current) => document.querySelector(
+            `#${id}__row__${current}`
+          )
+        ),
+        focusedElement: document.querySelector(
+          `#${id}__row__${getState().focusedRow}`
+        )
+      });
+    },
+    [getState, id, onConfirmSelection]
+  );
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      ...getVariant(variant),
+      className,
+      id,
+      onKeyDown: useCallback(
+        (ev) => {
+          const cell = ev.target.closest(".listbox__list")?.querySelector(".listbox__row.focused");
+          if (!cell)
+            throw new Error(
+              "There is no cell on keydown event, it must be an error."
+            );
+          const state = getState();
+          onPressKeyOnNode?.({ ...ev, target: cell, currentTarget: cell });
+          if (ev.code === "Enter") {
+            onPressEnterOnNode?.({ ...ev, target: cell, currentTarget: cell });
+          }
+          if (ev.isDefaultPrevented() || ev.isPropagationStopped())
+            return;
+          if ([
+            "ArrowRight",
+            "ArrowLeft",
+            "ArrowDown",
+            "ArrowUp",
+            "PageUp",
+            "PageDown"
+          ].includes(ev.code) || ["Home", "End"].includes(ev.code) && ev.ctrlKey || // La selección múltiple cuando no se muestra el searchbox se hace
+          // con espacio
+          ["Space"].includes(ev.code) && state.isMultipleSelection && !state.showSearchbox || // La selección múltiple siempre puede hacerse con Enter
+          ["Enter"].includes(ev.code) && state.isMultipleSelection || ["KeyA"].includes(ev.code) && state.isMultipleSelection && ev.ctrlKey) {
+            ev.preventDefault();
+            switch (ev.code) {
+              case "KeyA":
+                listboxActions.selectAll();
+                break;
+              case "ArrowRight":
+              case "ArrowDown":
+                listboxActions.moveFocusAndToggleSelection({
+                  which: "next",
+                  isShiftKey: ev.shiftKey
+                });
+                break;
+              case "ArrowLeft":
+              case "ArrowUp":
+                listboxActions.moveFocusAndToggleSelection({
+                  which: "previous",
+                  isShiftKey: ev.shiftKey
+                });
+                break;
+              case "Home":
+                listboxActions.moveFocusAndToggleSelection({
+                  which: "first",
+                  isShiftKey: ev.shiftKey
+                });
+                break;
+              case "End":
+                listboxActions.moveFocusAndToggleSelection({
+                  which: "last",
+                  isShiftKey: ev.shiftKey
+                });
+                break;
+              case "Enter":
+                if (ev.ctrlKey) {
+                  shoutConfirmSelection(ev);
+                  break;
+                }
+              case "Space":
+                listboxActions.updateFocusBySpaceEvent({
+                  isShiftKey: ev.shiftKey
+                });
+                break;
+              case "PageUp":
+                listboxActions.moveFocusAndToggleSelection({
+                  which: "pageUp",
+                  isShiftKey: ev.shiftKey
+                });
+                break;
+              case "PageDown":
+                listboxActions.moveFocusAndToggleSelection({
+                  which: "pageDown",
+                  isShiftKey: ev.shiftKey
+                });
+                break;
+            }
+          } else if (ev.code === "Enter" && (!state.allowSelection || !state.isMultipleSelection)) {
+            shoutConfirmSelection(ev);
+          } else if (typer) {
+            typer.type(ev);
+          }
+        },
+        [
+          getState,
+          listboxActions,
+          onPressEnterOnNode,
+          onPressKeyOnNode,
+          shoutConfirmSelection,
+          typer
+        ]
+      ),
+      children
+    }
+  );
+};
+
+export { ListboxKeyhandler };
+//# sourceMappingURL=ListboxKeyhandler.js.map

package/dist/components/ListBox/ListboxKeyhandler.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListboxKeyhandler.js","sources":["../../../src/components/ListBox/ListboxKeyhandler.tsx"],"sourcesContent":["import {\r\n  FC,\r\n  KeyboardEvent,\r\n  ReactNode,\r\n  useCallback,\r\n  useContext,\r\n  useMemo,\r\n} from 'react';\r\nimport { ListboxContext, TListbox } from './ListboxContext';\r\nimport { Box } from '@apia/theme';\r\nimport { getVariant } from '@apia/theme';\r\nimport { WaiTypeAhead } from '../waiAriaHelpers';\r\n\r\nconst ListboxKeyhandler: FC<\r\n  {\r\n    children: ReactNode;\r\n    className: string;\r\n  } & TListbox['ulProps']\r\n> = ({ children, className }) => {\r\n  const {\r\n    listboxActions,\r\n    id,\r\n    getState,\r\n    onConfirmSelection,\r\n    onPressEnterOnNode,\r\n    onPressKeyOnNode,\r\n    variant,\r\n  } = useContext(ListboxContext);\r\n\r\n  const typer = useMemo(\r\n    () =>\r\n      getState().showSearchbox\r\n        ? null\r\n        : new WaiTypeAhead({\r\n            onMultipleKeys(characters) {\r\n              listboxActions.searchElementsByStartingCharacters({\r\n                characters,\r\n              });\r\n            },\r\n            onSingleKey(characters) {\r\n              listboxActions.searchElementsByStartingCharacters({\r\n                characters,\r\n              });\r\n            },\r\n          }),\r\n    [getState, listboxActions],\r\n  );\r\n\r\n  const shoutConfirmSelection = useCallback(\r\n    (ev: KeyboardEvent) => {\r\n      onConfirmSelection?.({\r\n        originalEvent: ev,\r\n        selectedElements: !getState().allowSelection\r\n          ? []\r\n          : getState().selectedRows.map(\r\n              (current) =>\r\n                document.querySelector<HTMLElement>(\r\n                  `#${id}__row__${current}`,\r\n                ) as HTMLElement,\r\n            ),\r\n        focusedElement: document.querySelector<HTMLElement>(\r\n          `#${id}__row__${getState().focusedRow}`,\r\n        ) as HTMLElement,\r\n      });\r\n    },\r\n    [getState, id, onConfirmSelection],\r\n  );\r\n\r\n  return (\r\n    <Box\r\n      {...getVariant(variant)}\r\n      className={className}\r\n      id={id}\r\n      onKeyDown={useCallback(\r\n        (ev: KeyboardEvent) => {\r\n          const cell = (ev.target as HTMLElement)\r\n            .closest<HTMLElement>('.listbox__list')\r\n            ?.querySelector<HTMLElement>('.listbox__row.focused');\r\n          if (!cell)\r\n            throw new Error(\r\n              'There is no cell on keydown event, it must be an error.',\r\n            );\r\n\r\n          const state = getState();\r\n          onPressKeyOnNode?.({ ...ev, target: cell, currentTarget: cell });\r\n\r\n          if (ev.code === 'Enter') {\r\n            onPressEnterOnNode?.({ ...ev, target: cell, currentTarget: cell });\r\n          }\r\n\r\n          if (ev.isDefaultPrevented() || ev.isPropagationStopped()) return;\r\n\r\n          if (\r\n            [\r\n              'ArrowRight',\r\n              'ArrowLeft',\r\n              'ArrowDown',\r\n              'ArrowUp',\r\n              'PageUp',\r\n              'PageDown',\r\n            ].includes(ev.code) ||\r\n            (['Home', 'End'].includes(ev.code) && ev.ctrlKey) ||\r\n            // La selección múltiple cuando no se muestra el searchbox se hace\r\n            // con espacio\r\n            (['Space'].includes(ev.code) &&\r\n              state.isMultipleSelection &&\r\n              !state.showSearchbox) ||\r\n            // La selección múltiple siempre puede hacerse con Enter\r\n            (['Enter'].includes(ev.code) && state.isMultipleSelection) ||\r\n            (['KeyA'].includes(ev.code) &&\r\n              state.isMultipleSelection &&\r\n              ev.ctrlKey)\r\n          ) {\r\n            ev.preventDefault();\r\n\r\n            switch (ev.code) {\r\n              case 'KeyA':\r\n                listboxActions.selectAll();\r\n                break;\r\n              case 'ArrowRight':\r\n              case 'ArrowDown':\r\n                listboxActions.moveFocusAndToggleSelection({\r\n                  which: 'next',\r\n                  isShiftKey: ev.shiftKey,\r\n                });\r\n                break;\r\n              case 'ArrowLeft':\r\n              case 'ArrowUp':\r\n                listboxActions.moveFocusAndToggleSelection({\r\n                  which: 'previous',\r\n                  isShiftKey: ev.shiftKey,\r\n                });\r\n                break;\r\n              case 'Home':\r\n                listboxActions.moveFocusAndToggleSelection({\r\n                  which: 'first',\r\n                  isShiftKey: ev.shiftKey,\r\n                });\r\n                break;\r\n              case 'End':\r\n                listboxActions.moveFocusAndToggleSelection({\r\n                  which: 'last',\r\n                  isShiftKey: ev.shiftKey,\r\n                });\r\n                break;\r\n              case 'Enter':\r\n                if (ev.ctrlKey) {\r\n                  shoutConfirmSelection(ev);\r\n                  break;\r\n                }\r\n              case 'Space':\r\n                listboxActions.updateFocusBySpaceEvent({\r\n                  isShiftKey: ev.shiftKey,\r\n                });\r\n                break;\r\n              case 'PageUp':\r\n                listboxActions.moveFocusAndToggleSelection({\r\n                  which: 'pageUp',\r\n                  isShiftKey: ev.shiftKey,\r\n                });\r\n                break;\r\n              case 'PageDown':\r\n                listboxActions.moveFocusAndToggleSelection({\r\n                  which: 'pageDown',\r\n                  isShiftKey: ev.shiftKey,\r\n                });\r\n                break;\r\n            }\r\n          } else if (\r\n            ev.code === 'Enter' &&\r\n            (!state.allowSelection || !state.isMultipleSelection)\r\n          ) {\r\n            shoutConfirmSelection(ev);\r\n          } else if (typer) {\r\n            typer.type(ev);\r\n          }\r\n        },\r\n        [\r\n          getState,\r\n          listboxActions,\r\n          onPressEnterOnNode,\r\n          onPressKeyOnNode,\r\n          shoutConfirmSelection,\r\n          typer,\r\n        ],\r\n      )}\r\n    >\r\n      {children}\r\n    </Box>\r\n  );\r\n};\r\n\r\nexport { ListboxKeyhandler };\r\n"],"names":[],"mappings":"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"}

package/dist/components/ListBox/common.d.ts

@@ -0,0 +1,46 @@
+type TListboxState = {
+    /**
+     * El múltipleSearch está de acuerdo a la especificación de wai-aria. Está
+     * habilitado por defecto e implica que si el usuario presiona una "rápida
+     * sucesión" (según palabras de wai-aria) de caracteres, se irá
+     * alternando el foco entre los elementos que comiencen con la cadena
+     * introducida.
+     */
+    allowMultipleCharacterSearch?: boolean;
+    allowSelection: boolean;
+    /**
+     * El singleCharacterSearch está de acuerdo a la especificación de wai-aria.
+     * Está habilitado por defecto e implica que si el usuario presiona una
+     * "lenta sucesión" (según palabras de wai-aria) de caracteres, se irá
+     * alternando el foco entre los elementos que comiencen con la letra
+     * introducida.
+     */
+    allowSingleCharacterSearch?: boolean;
+    focusedRow: number;
+    hiddenRows: number[];
+    id: string;
+    isEverythingSelected: boolean;
+    isMultipleSelection: boolean;
+    lastSelectedRow: number;
+    rowsCount: number;
+    /**
+     * La función de búsqueda debe tomar el label de un campo y el texto
+     * introducido en el campo de búsqueda y determinar si el mismo debe ser
+     * mostrado o no. Por defecto, se usa una función de matcheo estricto.
+     */
+    searchFunction: (label: string, searchString: string) => boolean;
+    selectedRows: number[];
+    shownRows: number[];
+    showSearchbox: boolean;
+    /**
+     * Este método permite determinar si un elemento comienza con una cadena de
+     * texto en particular. Por defecto se usa String.startsWith, sin embargo se
+     * permite el pasaje de este método para situaciones particulares, ejemplo
+     * si se deseara incluir elementos sin tomar en cuenta los espacios.
+     */
+    startsWithFunction: (label: string, searchString: string) => boolean;
+    typing: string | null;
+};
+
+export type { TListboxState };
+//# sourceMappingURL=common.d.ts.map

package/dist/components/ListBox/common.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"common.d.ts","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/ListBox/common.js

@@ -0,0 +1,118 @@
+import { findScrollContainer } from '@apia/util';
+
+function makeRowKey(rowIndex) {
+  return `row_${typeof rowIndex === "number" ? rowIndex : rowIndex.rowIndex}`;
+}
+let uniqueidIndex = 0;
+function uniqueId(prefix) {
+  return `${prefix ?? ""}${uniqueidIndex++}`;
+}
+function getDistinctors(storeId) {
+  return {
+    listbox: [
+      (distinctions, state) => {
+        return {
+          etc: {
+            "aria-activedescendant": state.shownRows.length > 0 ? `${storeId}__row__${state.focusedRow}` : void 0
+          }
+        };
+      }
+    ],
+    row: [
+      (distinctions, state) => {
+        return {
+          classList: {
+            add: [
+              "listbox__row",
+              state.focusedRow === distinctions.rowIndex ? "focused" : "",
+              state.allowSelection && state.selectedRows.includes(distinctions.rowIndex) ? "selected" : ""
+            ],
+            remove: [
+              state.focusedRow === distinctions.rowIndex ? "" : "focused",
+              state.allowSelection && state.selectedRows.includes(distinctions.rowIndex) ? "" : "selected"
+            ]
+          },
+          dataset: {
+            add: {
+              focused: state.focusedRow === distinctions.rowIndex
+            }
+          },
+          etc: {
+            ...state.allowSelection ? {
+              "aria-selected": state.selectedRows.includes(
+                distinctions.rowIndex
+              )
+            } : null,
+            id: `${storeId}__row__${distinctions.rowIndex}`
+          }
+        };
+      },
+      (prevState, nextState) => {
+        const element = document.querySelector(
+          `#${storeId} .listbox__row[data-focused="true"]`
+        );
+        if (element) {
+          element.scrollIntoView({
+            behavior: "auto",
+            block: "nearest",
+            inline: "nearest"
+          });
+          if (prevState.focusedRow > nextState.focusedRow) {
+            const scrollContainer = findScrollContainer(element);
+            if (scrollContainer && scrollContainer !== document.body) {
+              scrollContainer.scrollIntoView({
+                behavior: "auto",
+                block: "nearest",
+                inline: "nearest"
+              });
+              const elRect = element.getBoundingClientRect();
+              const contRect = scrollContainer.getBoundingClientRect();
+              if (elRect.top - contRect.top < elRect.height)
+                scrollContainer.scrollTop -= elRect.height;
+            }
+          }
+        }
+      }
+    ],
+    searchbox: [
+      (distinctions, state) => {
+        return {
+          classList: { add: ["listbox__searchbox"] },
+          etc: {
+            "aria-activedescendant": state.shownRows.length > 0 ? `${storeId}__row__${state.focusedRow}` : void 0
+          }
+        };
+      }
+    ]
+  };
+}
+const defaultState = {
+  allowSelection: true,
+  focusedRow: 0,
+  hiddenRows: [],
+  isEverythingSelected: false,
+  isMultipleSelection: false,
+  lastSelectedRow: -1,
+  rowsCount: 0,
+  selectedRows: [],
+  typing: null
+};
+const keysMakers = {
+  row: makeRowKey,
+  listbox: () => "listbox",
+  searchbox: () => "searchbox"
+};
+function getInitialState(initialState) {
+  return {
+    ...defaultState,
+    ...initialState,
+    searchFunction: initialState.searchFunction ?? ((label, searchString) => !!label.match(new RegExp(searchString))),
+    startsWithFunction: initialState.startsWithFunction ?? ((label, searchString) => {
+      return label.startsWith(searchString);
+    }),
+    shownRows: new Array(initialState.rowsCount ?? 0).fill(1).map((_, i) => i)
+  };
+}
+
+export { getDistinctors, getInitialState, keysMakers, makeRowKey, uniqueId };
+//# sourceMappingURL=common.js.map

package/dist/components/ListBox/common.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"common.js","sources":["../../../src/components/ListBox/common.ts"],"sourcesContent":["import { findScrollContainer } from '@apia/util';\r\nimport { TDistinctors } from '@apia/dom-store';\r\n\r\nexport type TRowDistinctions = {\r\n  rowIndex: number;\r\n};\r\n\r\nexport type TListboxState = {\r\n  /**\r\n   * El múltipleSearch está de acuerdo a la especificación de wai-aria. Está\r\n   * habilitado por defecto e implica que si el usuario presiona una \"rápida\r\n   * sucesión\" (según palabras de wai-aria) de caracteres, se irá\r\n   * alternando el foco entre los elementos que comiencen con la cadena\r\n   * introducida.\r\n   */\r\n  allowMultipleCharacterSearch?: boolean;\r\n  allowSelection: boolean;\r\n  /**\r\n   * El singleCharacterSearch está de acuerdo a la especificación de wai-aria.\r\n   * Está habilitado por defecto e implica que si el usuario presiona una\r\n   * \"lenta sucesión\" (según palabras de wai-aria) de caracteres, se irá\r\n   * alternando el foco entre los elementos que comiencen con la letra\r\n   * introducida.\r\n   */\r\n  allowSingleCharacterSearch?: boolean;\r\n  focusedRow: number;\r\n  hiddenRows: number[];\r\n  id: string;\r\n  isEverythingSelected: boolean;\r\n  isMultipleSelection: boolean;\r\n  lastSelectedRow: number;\r\n  rowsCount: number;\r\n  /**\r\n   * La función de búsqueda debe tomar el label de un campo y el texto\r\n   * introducido en el campo de búsqueda y determinar si el mismo debe ser\r\n   * mostrado o no. Por defecto, se usa una función de matcheo estricto.\r\n   */\r\n  searchFunction: (label: string, searchString: string) => boolean;\r\n  selectedRows: number[];\r\n  shownRows: number[];\r\n  showSearchbox: boolean;\r\n  /**\r\n   * Este método permite determinar si un elemento comienza con una cadena de\r\n   * texto en particular. Por defecto se usa String.startsWith, sin embargo se\r\n   * permite el pasaje de este método para situaciones particulares, ejemplo\r\n   * si se deseara incluir elementos sin tomar en cuenta los espacios.\r\n   */\r\n  startsWithFunction: (label: string, searchString: string) => boolean;\r\n  typing: string | null;\r\n};\r\n\r\nexport function makeRowKey(rowIndex: TRowDistinctions | number) {\r\n  return `row_${typeof rowIndex === 'number' ? rowIndex : rowIndex.rowIndex}`;\r\n}\r\n\r\nlet uniqueidIndex = 0;\r\nexport function uniqueId(prefix?: string) {\r\n  return `${prefix ?? ''}${uniqueidIndex++}`;\r\n}\r\n\r\nfunction getDistinctors(storeId: string): TDistinctors<TListboxState> {\r\n  return {\r\n    listbox: [\r\n      (distinctions: void, state) => {\r\n        return {\r\n          etc: {\r\n            'aria-activedescendant':\r\n              state.shownRows.length > 0\r\n                ? `${storeId}__row__${state.focusedRow}`\r\n                : undefined,\r\n          },\r\n        };\r\n      },\r\n    ],\r\n    row: [\r\n      (distinctions: TRowDistinctions, state) => {\r\n        return {\r\n          classList: {\r\n            add: [\r\n              'listbox__row',\r\n              state.focusedRow === distinctions.rowIndex ? 'focused' : '',\r\n              state.allowSelection &&\r\n              state.selectedRows.includes(distinctions.rowIndex)\r\n                ? 'selected'\r\n                : '',\r\n            ],\r\n            remove: [\r\n              state.focusedRow === distinctions.rowIndex ? '' : 'focused',\r\n              state.allowSelection &&\r\n              state.selectedRows.includes(distinctions.rowIndex)\r\n                ? ''\r\n                : 'selected',\r\n            ],\r\n          },\r\n          dataset: {\r\n            add: {\r\n              focused: state.focusedRow === distinctions.rowIndex,\r\n            },\r\n          },\r\n          etc: {\r\n            ...(state.allowSelection\r\n              ? {\r\n                  'aria-selected': state.selectedRows.includes(\r\n                    distinctions.rowIndex,\r\n                  ),\r\n                }\r\n              : null),\r\n            id: `${storeId}__row__${distinctions.rowIndex}`,\r\n          },\r\n        };\r\n      },\r\n      (prevState: TListboxState, nextState: TListboxState) => {\r\n        const element = document.querySelector<HTMLElement>(\r\n          `#${storeId} .listbox__row[data-focused=\"true\"]`,\r\n        );\r\n\r\n        if (element) {\r\n          element.scrollIntoView({\r\n            behavior: 'auto',\r\n            block: 'nearest',\r\n            inline: 'nearest',\r\n          });\r\n\r\n          if (prevState.focusedRow > nextState.focusedRow) {\r\n            const scrollContainer = findScrollContainer(element);\r\n\r\n            if (scrollContainer && scrollContainer !== document.body) {\r\n              scrollContainer.scrollIntoView({\r\n                behavior: 'auto',\r\n                block: 'nearest',\r\n                inline: 'nearest',\r\n              });\r\n              const elRect = element.getBoundingClientRect();\r\n              const contRect = scrollContainer.getBoundingClientRect();\r\n\r\n              if (elRect.top - contRect.top < elRect.height)\r\n                scrollContainer.scrollTop -= elRect.height;\r\n            }\r\n          }\r\n        }\r\n      },\r\n    ],\r\n    searchbox: [\r\n      (distinctions: void, state) => {\r\n        return {\r\n          classList: { add: ['listbox__searchbox'] },\r\n          etc: {\r\n            'aria-activedescendant':\r\n              state.shownRows.length > 0\r\n                ? `${storeId}__row__${state.focusedRow}`\r\n                : undefined,\r\n          },\r\n        };\r\n      },\r\n    ],\r\n  };\r\n}\r\nconst defaultState: Omit<\r\n  TListboxState,\r\n  'id' | 'showSearchbox' | 'shownRows' | 'searchFunction' | 'startsWithFunction'\r\n> = {\r\n  allowSelection: true,\r\n  focusedRow: 0,\r\n  hiddenRows: [],\r\n  isEverythingSelected: false,\r\n  isMultipleSelection: false,\r\n  lastSelectedRow: -1,\r\n  rowsCount: 0,\r\n  selectedRows: [],\r\n  typing: null,\r\n};\r\n\r\nconst keysMakers = {\r\n  row: makeRowKey,\r\n  listbox: () => 'listbox',\r\n  searchbox: () => 'searchbox',\r\n};\r\n\r\nfunction getInitialState(\r\n  initialState: Partial<TListboxState> &\r\n    Pick<TListboxState, 'id' | 'showSearchbox'>,\r\n): TListboxState {\r\n  return {\r\n    ...defaultState,\r\n    ...initialState,\r\n\r\n    searchFunction:\r\n      initialState.searchFunction ??\r\n      ((label, searchString) => !!label.match(new RegExp(searchString))),\r\n\r\n    startsWithFunction:\r\n      initialState.startsWithFunction ??\r\n      ((label, searchString) => {\r\n        return label.startsWith(searchString);\r\n      }),\r\n\r\n    shownRows: new Array(initialState.rowsCount ?? 0).fill(1).map((_, i) => i),\r\n  };\r\n}\r\n\r\nexport { getDistinctors, getInitialState, keysMakers };\r\n"],"names":[],"mappings":"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"}

package/dist/components/ListBox/index.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { KeyboardEvent, MouseEvent } from 'react';
+import { TListbox } from './ListboxContext.js';
+
+type TOnConfirmSelection = {
+    originalEvent: KeyboardEvent;
+    selectedElements: HTMLElement[];
+    focusedElement: HTMLElement;
+};
+type TOnSelectionChange = {
+    focusedElement: HTMLElement;
+    selectedElements: HTMLElement[];
+};
+type TOnClickNode = MouseEvent;
+
+declare const Listbox: React.MemoExoticComponent<((props: TListbox) => React.JSX.Element) & {
+    displayName: string;
+}>;
+
+export { Listbox, TListbox, type TOnClickNode, type TOnConfirmSelection, type TOnSelectionChange };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/ListBox/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/ListBox/index.js

@@ -0,0 +1,71 @@
+import { jsx } from '@apia/theme/jsx-runtime';
+import { useMemo, memo } from 'react';
+import { uniqueId } from './common.js';
+import { ListboxContext } from './ListboxContext.js';
+import { ListboxKeyhandler } from './ListboxKeyhandler.js';
+import { Combobox } from './Combobox.js';
+import { makeStyledComponent, Box } from '@apia/theme';
+import { styles } from './listbox.js';
+import { useStore } from './useStore.js';
+import { useShoutSelectionChange } from './useShoutSelectionChange.js';
+import { useIndexedChildren } from './useIndexedChildren.js';
+import { useListboxAutofocus } from './useListboxAutofocus.js';
+import { useUpdateRowCount } from './useUpdateRowCount.js';
+import { useListboxContextValue } from './useListboxContextValue.js';
+
+const NoMemoListbox = makeStyledComponent(
+  "Listbox",
+  "layout.components.listbox",
+  styles,
+  (props) => {
+    const storeId = useMemo(() => uniqueId("Listbox"), []);
+    const [listboxActions, useListbox, getState, registerCallback] = useStore(
+      storeId,
+      props
+    );
+    useShoutSelectionChange(props.onSelectionChange, registerCallback);
+    useUpdateRowCount(props.children, listboxActions);
+    const indexedChildren = useIndexedChildren(props.children, listboxActions);
+    const { onClick, onFocus } = useListboxAutofocus(storeId, getState);
+    const ref = useListbox("listbox", null);
+    const variant = props.unstyled ? "" : "layout.components.listbox";
+    const contextValue = useListboxContextValue({
+      getState,
+      id: storeId,
+      listboxActions,
+      onClickNode: props.onClickNode,
+      onConfirmSelection: props.onConfirmSelection,
+      onDoubleClickNode: props.onDoubleClickNode,
+      onPressEnterOnNode: props.onPressEnterOnNode,
+      onPressKeyOnNode: props.onPressKeyOnNode,
+      useListbox,
+      variant
+    });
+    return /* @__PURE__ */ jsx(ListboxContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+      ListboxKeyhandler,
+      {
+        className: `listbox ${props.showSearchbox ? "withSearchbox" : ""} ${props.className ?? ""}`,
+        ...props.ulProps,
+        children: props.showSearchbox ? /* @__PURE__ */ jsx(Combobox, { ...props.ulProps, children: indexedChildren }) : /* @__PURE__ */ jsx(
+          Box,
+          {
+            ref,
+            as: "ul",
+            role: "listbox",
+            tabIndex: 0,
+            onClick,
+            onFocus,
+            ...props.ulProps,
+            className: `listbox__list ${props?.ulProps?.className ?? ""}`,
+            children: indexedChildren
+          }
+        )
+      }
+    ) });
+  },
+  true
+);
+const Listbox = memo(NoMemoListbox);
+
+export { Listbox };
+//# sourceMappingURL=index.js.map

package/dist/components/ListBox/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/ListBox/index.tsx"],"sourcesContent":["import { KeyboardEvent, memo, MouseEvent, useMemo } from 'react';\r\nimport { uniqueId } from './common';\r\nimport { ListboxItem } from './ListboxItem';\r\nimport { ListboxContext, TListbox } from './ListboxContext';\r\nimport { ListboxKeyhandler } from './ListboxKeyhandler';\r\nimport { Combobox } from './Combobox';\r\nimport { makeStyledComponent } from '@apia/theme';\r\nimport { Box } from '@apia/theme';\r\nimport { styles } from './listbox';\r\nimport { useStore } from './useStore';\r\nimport { useShoutSelectionChange } from './useShoutSelectionChange';\r\nimport { useIndexedChildren } from './useIndexedChildren';\r\nimport { useListboxAutofocus } from './useListboxAutofocus';\r\nimport { useUpdateRowCount } from './useUpdateRowCount';\r\nimport { useListboxContextValue } from './useListboxContextValue';\r\n\r\nexport type TOnConfirmSelection = {\r\n  originalEvent: KeyboardEvent;\r\n\r\n  selectedElements: HTMLElement[];\r\n  focusedElement: HTMLElement;\r\n};\r\n\r\nexport type TOnSelectionChange = {\r\n  focusedElement: HTMLElement;\r\n  selectedElements: HTMLElement[];\r\n};\r\n\r\nexport type TOnClickNode = MouseEvent;\r\n\r\nexport type { TListbox };\r\n\r\nconst NoMemoListbox = makeStyledComponent<TListbox>(\r\n  'Listbox',\r\n  'layout.components.listbox',\r\n  styles,\r\n  (props: TListbox) => {\r\n    const storeId = useMemo(() => uniqueId('Listbox'), []);\r\n    const [listboxActions, useListbox, getState, registerCallback] = useStore(\r\n      storeId,\r\n      props,\r\n    );\r\n\r\n    useShoutSelectionChange(props.onSelectionChange, registerCallback);\r\n    useUpdateRowCount(props.children, listboxActions);\r\n\r\n    const indexedChildren = useIndexedChildren(props.children, listboxActions);\r\n    const { onClick, onFocus } = useListboxAutofocus(storeId, getState);\r\n    const ref = useListbox<HTMLElement>('listbox', null);\r\n    const variant = props.unstyled ? '' : 'layout.components.listbox';\r\n    const contextValue = useListboxContextValue({\r\n      getState,\r\n      id: storeId,\r\n      listboxActions,\r\n      onClickNode: props.onClickNode,\r\n      onConfirmSelection: props.onConfirmSelection,\r\n      onDoubleClickNode: props.onDoubleClickNode,\r\n      onPressEnterOnNode: props.onPressEnterOnNode,\r\n      onPressKeyOnNode: props.onPressKeyOnNode,\r\n      useListbox,\r\n      variant,\r\n    });\r\n\r\n    return (\r\n      <ListboxContext.Provider value={contextValue}>\r\n        <ListboxKeyhandler\r\n          className={`listbox ${props.showSearchbox ? 'withSearchbox' : ''} ${\r\n            props.className ?? ''\r\n          }`}\r\n          {...props.ulProps}\r\n        >\r\n          {props.showSearchbox ? (\r\n            <Combobox {...props.ulProps}>{indexedChildren}</Combobox>\r\n          ) : (\r\n            <Box\r\n              ref={ref}\r\n              as=\"ul\"\r\n              role=\"listbox\"\r\n              tabIndex={0}\r\n              onClick={onClick}\r\n              onFocus={onFocus}\r\n              {...props.ulProps}\r\n              className={`listbox__list ${props?.ulProps?.className ?? ''}`}\r\n            >\r\n              {indexedChildren}\r\n            </Box>\r\n          )}\r\n        </ListboxKeyhandler>\r\n      </ListboxContext.Provider>\r\n    );\r\n  },\r\n  true,\r\n);\r\n\r\nconst Listbox = memo(NoMemoListbox);\r\n\r\nexport { Listbox, ListboxItem };\r\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAgCA,MAAM,aAAgB,GAAA,mBAAA;AAAA,EACpB,SAAA;AAAA,EACA,2BAAA;AAAA,EACA,MAAA;AAAA,EACA,CAAC,KAAoB,KAAA;AACnB,IAAA,MAAM,UAAU,OAAQ,CAAA,MAAM,SAAS,SAAS,CAAA,EAAG,EAAE,CAAA,CAAA;AACrD,IAAA,MAAM,CAAC,cAAA,EAAgB,UAAY,EAAA,QAAA,EAAU,gBAAgB,CAAI,GAAA,QAAA;AAAA,MAC/D,OAAA;AAAA,MACA,KAAA;AAAA,KACF,CAAA;AAEA,IAAwB,uBAAA,CAAA,KAAA,CAAM,mBAAmB,gBAAgB,CAAA,CAAA;AACjE,IAAkB,iBAAA,CAAA,KAAA,CAAM,UAAU,cAAc,CAAA,CAAA;AAEhD,IAAA,MAAM,eAAkB,GAAA,kBAAA,CAAmB,KAAM,CAAA,QAAA,EAAU,cAAc,CAAA,CAAA;AACzE,IAAA,MAAM,EAAE,OAAS,EAAA,OAAA,EAAY,GAAA,mBAAA,CAAoB,SAAS,QAAQ,CAAA,CAAA;AAClE,IAAM,MAAA,GAAA,GAAM,UAAwB,CAAA,SAAA,EAAW,IAAI,CAAA,CAAA;AACnD,IAAM,MAAA,OAAA,GAAU,KAAM,CAAA,QAAA,GAAW,EAAK,GAAA,2BAAA,CAAA;AACtC,IAAA,MAAM,eAAe,sBAAuB,CAAA;AAAA,MAC1C,QAAA;AAAA,MACA,EAAI,EAAA,OAAA;AAAA,MACJ,cAAA;AAAA,MACA,aAAa,KAAM,CAAA,WAAA;AAAA,MACnB,oBAAoB,KAAM,CAAA,kBAAA;AAAA,MAC1B,mBAAmB,KAAM,CAAA,iBAAA;AAAA,MACzB,oBAAoB,KAAM,CAAA,kBAAA;AAAA,MAC1B,kBAAkB,KAAM,CAAA,gBAAA;AAAA,MACxB,UAAA;AAAA,MACA,OAAA;AAAA,KACD,CAAA,CAAA;AAED,IAAA,uBACG,GAAA,CAAA,cAAA,CAAe,QAAf,EAAA,EAAwB,OAAO,YAC9B,EAAA,QAAA,kBAAA,GAAA;AAAA,MAAC,iBAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,WAAW,KAAM,CAAA,aAAA,GAAgB,kBAAkB,EAAE,CAAA,CAAA,EAC9D,KAAM,CAAA,SAAA,IAAa,EACrB,CAAA,CAAA;AAAA,QACC,GAAG,KAAM,CAAA,OAAA;AAAA,QAET,QAAA,EAAA,KAAA,CAAM,gCACJ,GAAA,CAAA,QAAA,EAAA,EAAU,GAAG,KAAM,CAAA,OAAA,EAAU,2BAAgB,CAE9C,mBAAA,GAAA;AAAA,UAAC,GAAA;AAAA,UAAA;AAAA,YACC,GAAA;AAAA,YACA,EAAG,EAAA,IAAA;AAAA,YACH,IAAK,EAAA,SAAA;AAAA,YACL,QAAU,EAAA,CAAA;AAAA,YACV,OAAA;AAAA,YACA,OAAA;AAAA,YACC,GAAG,KAAM,CAAA,OAAA;AAAA,YACV,SAAW,EAAA,CAAA,cAAA,EAAiB,KAAO,EAAA,OAAA,EAAS,aAAa,EAAE,CAAA,CAAA;AAAA,YAE1D,QAAA,EAAA,eAAA;AAAA,WAAA;AAAA,SACH;AAAA,OAAA;AAAA,KAGN,EAAA,CAAA,CAAA;AAAA,GAEJ;AAAA,EACA,IAAA;AACF,CAAA,CAAA;AAEM,MAAA,OAAA,GAAU,KAAK,aAAa;;;;"}

package/dist/components/ListBox/listbox.js

@@ -0,0 +1,46 @@
+import { focusOutline } from '@apia/theme';
+
+const styles = {
+  "&:focus-within": {
+    ".listbox__list": {
+      outline: "none"
+    },
+    ".focused": focusOutline,
+    "&.withSearchbox": {
+      ".focused": {
+        outline: "1px solid",
+        outlineColor: "palette.border.field",
+        outlineOffset: 0
+      },
+      ".listbox__searchbox": focusOutline
+    }
+  },
+  ".listbox__list": {
+    listStyle: "none",
+    m: 0,
+    p: 0
+  },
+  "&.withSearchbox": {
+    ".listbox__list": {
+      maxHeight: "calc(100vh - 80px)",
+      overflow: "auto"
+    }
+  },
+  ".listbox__row": {
+    overflow: "hidden",
+    whiteSpace: "nowrap",
+    textOverflow: "ellipsis",
+    "&:hover": (theme) => {
+      return {
+        ...theme.palette.getOneState(
+          { backgroundColor: "palette.background.paper" },
+          "hover"
+        ),
+        cursor: "pointer"
+      };
+    }
+  }
+};
+
+export { styles };
+//# sourceMappingURL=listbox.js.map

package/dist/components/ListBox/listbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"listbox.js","sources":["../../../src/components/ListBox/listbox.ts"],"sourcesContent":["import { focusOutline } from '@apia/theme';\r\nimport { ThemeUICSSObject } from '@apia/theme';\r\n\r\nexport const styles: ThemeUICSSObject = {\r\n  '&:focus-within': {\r\n    '.listbox__list': {\r\n      outline: 'none',\r\n    },\r\n\r\n    '.focused': focusOutline,\r\n\r\n    '&.withSearchbox': {\r\n      '.focused': {\r\n        outline: '1px solid',\r\n        outlineColor: 'palette.border.field',\r\n        outlineOffset: 0,\r\n      },\r\n      '.listbox__searchbox': focusOutline,\r\n    },\r\n  },\r\n\r\n  '.listbox__list': {\r\n    listStyle: 'none',\r\n    m: 0,\r\n    p: 0,\r\n  },\r\n\r\n  '&.withSearchbox': {\r\n    '.listbox__list': {\r\n      maxHeight: 'calc(100vh - 80px)',\r\n      overflow: 'auto',\r\n    },\r\n  },\r\n\r\n  '.listbox__row': {\r\n    overflow: 'hidden',\r\n    whiteSpace: 'nowrap',\r\n    textOverflow: 'ellipsis',\r\n\r\n    '&:hover': (theme) => {\r\n      return {\r\n        ...theme.palette.getOneState(\r\n          { backgroundColor: 'palette.background.paper' },\r\n          'hover',\r\n        ),\r\n        cursor: 'pointer',\r\n      };\r\n    },\r\n  },\r\n};\r\n"],"names":[],"mappings":";;AAGO,MAAM,MAA2B,GAAA;AAAA,EACtC,gBAAkB,EAAA;AAAA,IAChB,gBAAkB,EAAA;AAAA,MAChB,OAAS,EAAA,MAAA;AAAA,KACX;AAAA,IAEA,UAAY,EAAA,YAAA;AAAA,IAEZ,iBAAmB,EAAA;AAAA,MACjB,UAAY,EAAA;AAAA,QACV,OAAS,EAAA,WAAA;AAAA,QACT,YAAc,EAAA,sBAAA;AAAA,QACd,aAAe,EAAA,CAAA;AAAA,OACjB;AAAA,MACA,qBAAuB,EAAA,YAAA;AAAA,KACzB;AAAA,GACF;AAAA,EAEA,gBAAkB,EAAA;AAAA,IAChB,SAAW,EAAA,MAAA;AAAA,IACX,CAAG,EAAA,CAAA;AAAA,IACH,CAAG,EAAA,CAAA;AAAA,GACL;AAAA,EAEA,iBAAmB,EAAA;AAAA,IACjB,gBAAkB,EAAA;AAAA,MAChB,SAAW,EAAA,oBAAA;AAAA,MACX,QAAU,EAAA,MAAA;AAAA,KACZ;AAAA,GACF;AAAA,EAEA,eAAiB,EAAA;AAAA,IACf,QAAU,EAAA,QAAA;AAAA,IACV,UAAY,EAAA,QAAA;AAAA,IACZ,YAAc,EAAA,UAAA;AAAA,IAEd,SAAA,EAAW,CAAC,KAAU,KAAA;AACpB,MAAO,OAAA;AAAA,QACL,GAAG,MAAM,OAAQ,CAAA,WAAA;AAAA,UACf,EAAE,iBAAiB,0BAA2B,EAAA;AAAA,UAC9C,OAAA;AAAA,SACF;AAAA,QACA,MAAQ,EAAA,SAAA;AAAA,OACV,CAAA;AAAA,KACF;AAAA,GACF;AACF;;;;"}