@apia/components 3.0.1 → 3.0.2

package/dist/index.d.ts

@@ -1,71 +1,1778 @@
-export { TAccordionHandler } from './components/accordion/index.js';
-export { ApiaFilter, IApiaFilter } from './components/apia/ApiaFilter.js';
-export { CollapsiblePanel } from './components/collapsiblePanel/index.js';
-export { AlertModal, IAlert } from './components/dialogs/AlertModal.js';
-export { ConfirmModal, IConfirm } from './components/dialogs/ConfirmModal.js';
-export { BaseButton } from './components/forms/buttons/BaseButton.js';
-export { IconButton, TApiaIconButton, TIconButton, TIconSize } from './components/forms/buttons/IconButton.js';
-export { ISimpleButton, SimpleButton } from './components/forms/buttons/SimpleButton.js';
-export { useOtherTagButton } from './components/buttons/useOtherTagButton.js';
-export { Captcha } from './components/forms/Captcha.js';
-export { Checkbox, TCheckbox } from './components/forms/Checkbox.js';
-export { DateInput, TDateProps } from './components/forms/DateInput.js';
-export { FieldErrorMessage, IFieldErrorMessage } from './components/forms/FieldErrorMessage.js';
-export { IField, IIconInput, IconInput } from './components/forms/IconInput.js';
-export { NumberInput, TNumberInput, TNumberInputChangeEvent, parseNumberInputValueToNumber, parseNumberValueToNumberInput } from './components/forms/NumberInput.js';
-export { IRequiredMark, RequiredMark } from './components/forms/RequiredMark.js';
-export { getFieldErrorStyles, getFieldTouchedStyles } from './components/forms/util/style.js';
-export { FieldLabel, TFieldLabel } from './components/forms/FieldLabel.js';
-export { Listbox, TOnClickNode, TOnConfirmSelection, TOnSelectionChange } from './components/ListBox/index.js';
-export { default as LinearLoader } from './components/loaders/LinearLoader.js';
-export { default as ProgressBar } from './components/loaders/ProgressBar.js';
-export { default as LoaderSpinner } from './components/loaders/LoaderSpinner.js';
-export { useModalContext } from './components/modals/ModalContext.js';
-export { CalendarModal, ICalendarModal } from './components/modals/CalendarModal.js';
-export { TUseModalConfiguration, useModal } from './components/modals/hooks/useModal.js';
-export { Confirm } from './components/modals/layout/Confirm.js';
-export { DialogButtonBar, IDialogButtonBar } from './components/modals/layout/DialogButtonBar.js';
-export { IDialogHeader } from './components/modals/layout/DialogHeader.js';
-export { Modal, TModal } from './components/modals/Modal.js';
-export { IOverlay, Overlay } from './components/modals/Overlay.js';
-export { AutoEllipsis } from './components/responsive/AutoEllipsis.js';
-export { IResponsiveComponent, makeResponsiveComponent } from './components/responsive/makeResponsiveComponent.js';
-export { TApiaButtonType, TModalSize } from './components/types.js';
-export { WaiTypeAhead } from './components/waiAriaHelpers/typeAhead.js';
-export { IconsList } from './components/IconsList/index.js';
-export { importComponent } from './components/importComponent.js';
-export { Toolbar } from './components/Toolbar/index.js';
-export { SortableList, UnstyledSortableList } from './components/SortableList/index.js';
-export { TabsList } from './tabs/TabsList.js';
-export { DefaultTabsLabelRenderer } from './tabs/renderers/DefaultTabsLabelRenderer.js';
-export { default as TabsController } from './tabs/tabsController.js';
-export { TabsContent } from './tabs/Content.js';
-export { TTab, TTabRenderer } from './tabs/types.js';
-export { Tabs } from './tabs/Tabs.js';
-export { ApiaUtil } from './objects/ApiaUtil/index.js';
+import * as React$1 from 'react';
+import React__default, { ReactNode, Ref, RefObject, ChangeEventHandler, MouseEvent as MouseEvent$1, KeyboardEvent, FC, FunctionComponent, ForwardedRef, ComponentType, ReactElement } from 'react';
+import * as _apia_util from '@apia/util';
+import { IOnFocusConfiguration, TFocusRetriever, TId as TId$1, EventEmitter, StatefulEmitter, TModify, TApiaFilter, TApiaFilterValue } from '@apia/util';
+import { BoxProps, TPalette, ThemeUIStyleObject, IconButtonProps, ButtonProps, ThemeUICSSObject, InputProps, SelectProps } from '@apia/theme';
+import { TIconName, TIconType } from '@apia/icons';
+import { Args } from 'react-cool-portal';
+import * as _apia_notifications from '@apia/notifications';
+import { TNotificationId, INotification, TDispatchedNotification, TNotificationSelector } from '@apia/notifications';
 export { INotification, TDispatchedNotification } from '@apia/notifications';
-export { TOpenModal } from './objects/ApiaUtil/modals/OpenModal.js';
+import { MenuItemProps, ControlledMenuProps } from '@szhsin/react-menu';
 export { ControlledMenuProps, MenuItemProps } from '@szhsin/react-menu';
-export { ApiaUtilTooltip } from './objects/ApiaUtil/tooltips/ApiaUtilTooltip.js';
-export { ApiaUtilModalHandler } from './objects/ApiaUtil/modals/ApiaUtilModals.js';
-export { TMenuItem, TSubmenu } from './objects/ApiaUtil/menu/ApiaUtilMenu.js';
-export { ScreenLocker } from './objects/ScreenLocker/index.js';
-export { Accordion, IAccordionProps } from './components/accordion/Accordion.js';
-export { AccordionItem, IAccordionItemProps } from './components/accordion/AccordionItem.js';
-export { AccordionItemButton, TAccordionItemButton } from './components/accordion/AccordionItemButton.js';
-export { AccordionItemContent } from './components/accordion/AccordionItemContent.js';
-export { AccordionContext, AccordionItemContext, useAccordionContext } from './components/accordion/context.js';
-export { DefaultAccordionItemButton, IAccordionItemButton } from './components/accordion/defaultElements/DefaultAccordionItemButton.js';
-export { TListbox } from './components/ListBox/ListboxContext.js';
-export { ListboxItem } from './components/ListBox/ListboxItem.js';
-export { TIcon, TIconRenderer, TIconsList } from './components/IconsList/types.js';
-export { DefaultIconRenderer } from './components/IconsList/renderers/DefaultIconRenderer.js';
-export { TToolbarIconButton as TToolDefinition } from './components/Toolbar/types.js';
-export { ToolbarIconButton } from './components/Toolbar/ToolbarIconButton.js';
-export { ToolbarInput } from './components/Toolbar/ToolbarInput.js';
-export { ToolbarTextButton } from './components/Toolbar/ToolbarTextButton.js';
-export { ToolbarController } from './components/Toolbar/ToolbarController.js';
-export { ToolbarSeparator } from './components/Toolbar/ToolbarSeparator.js';
-export { ToolbarSelect } from './components/Toolbar/ToolbarSelect.js';
-export { SortableListItem } from './components/SortableList/SortableListItem.js';
+
+type TModalSize = 'editGrid' | 'sm' | 'md' | 'md-fixed' | 'lg' | 'lg-fixed' | 'xl' | 'xl-fixed' | 'xxl' | 'xxxl' | 'xxxl-fixed' | 'flex' | 'cal' | 'finder';
+type TApiaButtonType = 'primary' | 'primary-sm' | 'secondary' | 'light-secondary' | 'secondary-sm' | 'danger' | 'danger-sm' | 'outline' | 'outline-sm' | 'warning' | 'warning-sm' | 'link';
+
+interface IDialogHeader {
+    className?: string;
+    close: () => void;
+    hideCloseButton?: boolean;
+    id?: string;
+    NavBar?: React__default.ReactNode;
+    title?: string;
+}
+declare global {
+    interface Window {
+        BTN_CLOSE: string;
+    }
+}
+
+type TModal = {
+    animationDuration?: number;
+    /**
+     * Aplica solamente para modales que tengan draggable=true.
+     */
+    defaultPosition?: {
+        left?: string;
+        right?: string;
+        top?: string;
+        bottom?: string;
+    };
+    /**
+     * Si esta variable está en true, el modal se comportará más como una ventana
+     * que como un modal
+     */
+    draggable?: boolean;
+    children?: React__default.ReactNode;
+    className?: string;
+    id?: string;
+    initialFocusConfiguration?: IOnFocusConfiguration;
+    /**
+     * Este retriever será pasado al método focus.on para realizar el foco en el
+     * elemento inicial del modal.
+     *
+     * @see focus
+     */
+    initialFocusGetter?: (modalInnerRef: HTMLElement) => ReturnType<TFocusRetriever>;
+    /**
+     * Si se pasa un ref, el modal hará foco sobre el elemento una vez que haya
+     * abierto.
+     */
+    initialFocusRef?: React__default.RefObject<unknown>;
+    /**
+     * Controla el estado del modal, indicando a la transición de apertura o
+     * cierre que debe comenzar, dependiendo de si cambia a true o false
+     * respectivamente.
+     */
+    isOpen?: boolean;
+    maxWidth?: number | string;
+    /**
+     * Permite pasar un componente React que se mostrará a la derecha del título,
+     * con el fin de incorporar botones en el header del modal.
+     */
+    NavBar?: React__default.ReactNode;
+    noFocus?: boolean;
+    noHeader?: boolean;
+    /**
+     * Permite definir un callback que será llamado solamente cuando el modal se
+     * cierre por medio del click en el overlay, al presionar escape o mediante
+     * el botón cerrar del header (La X).
+     */
+    onClose?: () => void;
+    /**
+     * Este método recibe el evento del mousedown utilizado para controllar el dragstart. Si el usuario devuelve false, el drag no será realizado.
+     */
+    onDragStart?: (ev: MouseEvent) => boolean;
+    /**
+     * Permite definir un callback que será llamado siempre que el modal se
+     * cierre, una vez que la animación haya terminado.
+     */
+    onExited?: () => unknown;
+    /**
+     * Al pasar un Portal, el modal se abrirá dentro de éste y no directamente en
+     * la posición actual dentro del árbol de componentes. Normalmente, este
+     * Portal es pasado automáticamente por el hook useModal (No el de la
+     * librería, sino el nuestro).
+     *
+     * @see useModal
+     */
+    Portal?: React__default.FC<{
+        children: React__default.ReactNode;
+    }>;
+    /**
+     * Si es true, el modal será cerrado al presionar escape.
+     */
+    shouldCloseOnEsc?: boolean;
+    /**
+     * Si es true, el modal será cerrado al hacer clic en el overlay.
+     */
+    shouldCloseOnOverlayClick?: boolean;
+    size?: TModalSize;
+    stretch?: boolean;
+    title?: string;
+    variant?: string;
+} & Pick<IDialogHeader, 'hideCloseButton'>;
+declare const Modal: React__default.ForwardRefExoticComponent<{
+    animationDuration?: number | undefined;
+    /**
+     * Aplica solamente para modales que tengan draggable=true.
+     */
+    defaultPosition?: {
+        left?: string | undefined;
+        right?: string | undefined;
+        top?: string | undefined;
+        bottom?: string | undefined;
+    } | undefined;
+    /**
+     * Si esta variable está en true, el modal se comportará más como una ventana
+     * que como un modal
+     */
+    draggable?: boolean | undefined;
+    children?: React__default.ReactNode;
+    className?: string | undefined;
+    id?: string | undefined;
+    initialFocusConfiguration?: IOnFocusConfiguration | undefined;
+    /**
+     * Este retriever será pasado al método focus.on para realizar el foco en el
+     * elemento inicial del modal.
+     *
+     * @see focus
+     */
+    initialFocusGetter?: ((modalInnerRef: HTMLElement) => ReturnType<TFocusRetriever>) | undefined;
+    /**
+     * Si se pasa un ref, el modal hará foco sobre el elemento una vez que haya
+     * abierto.
+     */
+    initialFocusRef?: React__default.RefObject<unknown> | undefined;
+    /**
+     * Controla el estado del modal, indicando a la transición de apertura o
+     * cierre que debe comenzar, dependiendo de si cambia a true o false
+     * respectivamente.
+     */
+    isOpen?: boolean | undefined;
+    maxWidth?: string | number | undefined;
+    /**
+     * Permite pasar un componente React que se mostrará a la derecha del título,
+     * con el fin de incorporar botones en el header del modal.
+     */
+    NavBar?: React__default.ReactNode;
+    noFocus?: boolean | undefined;
+    noHeader?: boolean | undefined;
+    /**
+     * Permite definir un callback que será llamado solamente cuando el modal se
+     * cierre por medio del click en el overlay, al presionar escape o mediante
+     * el botón cerrar del header (La X).
+     */
+    onClose?: (() => void) | undefined;
+    /**
+     * Este método recibe el evento del mousedown utilizado para controllar el dragstart. Si el usuario devuelve false, el drag no será realizado.
+     */
+    onDragStart?: ((ev: MouseEvent) => boolean) | undefined;
+    /**
+     * Permite definir un callback que será llamado siempre que el modal se
+     * cierre, una vez que la animación haya terminado.
+     */
+    onExited?: (() => unknown) | undefined;
+    /**
+     * Al pasar un Portal, el modal se abrirá dentro de éste y no directamente en
+     * la posición actual dentro del árbol de componentes. Normalmente, este
+     * Portal es pasado automáticamente por el hook useModal (No el de la
+     * librería, sino el nuestro).
+     *
+     * @see useModal
+     */
+    Portal?: React__default.FC<{
+        children: React__default.ReactNode;
+    }> | undefined;
+    /**
+     * Si es true, el modal será cerrado al presionar escape.
+     */
+    shouldCloseOnEsc?: boolean | undefined;
+    /**
+     * Si es true, el modal será cerrado al hacer clic en el overlay.
+     */
+    shouldCloseOnOverlayClick?: boolean | undefined;
+    size?: TModalSize | undefined;
+    stretch?: boolean | undefined;
+    title?: string | undefined;
+    variant?: string | undefined;
+} & Pick<IDialogHeader, "hideCloseButton"> & React__default.RefAttributes<HTMLDivElement>>;
+
+type TOpenModal = Pick<TModal, 'NavBar' | 'Portal' | 'children' | 'className' | 'hideCloseButton' | 'initialFocusGetter' | 'initialFocusConfiguration' | 'maxWidth' | 'noHeader' | 'onExited' | 'shouldCloseOnEsc' | 'shouldCloseOnOverlayClick' | 'size' | 'stretch' | 'title' | 'variant' | 'draggable' | 'onClose' | 'onDragStart' | 'defaultPosition'> & {
+    id?: string;
+    children?: React__default.ReactNode;
+    confirmProps?: Omit<IConfirm, 'onConfirmOk' | 'onConfirmCancel' | 'children'>;
+    /**
+     * Determina si el modal debe abrirse al ser montado o no.
+     */
+    isDefaultOpen?: boolean;
+    /**
+     * El método onConfirm permite pasar un callback que devuelva una promesa. En
+     * caso de ser así, si esta promesa resuelve a true, el modal será cerrado o
+     * en caso contrario permanecerá abierto. Es útil en situaciones en donde es
+     * necesario corroborar una condición antes de cerrar el modal. En la
+     * situación en que se decida mantener el modal abierto, está a cargo del
+     * usuario del componente realizar las indicaciones visuales correspondientes
+     * para indicar al usuario el motivo por el cual el modal no fue cerrado.
+     */
+    onConfirm?: () => Promise<boolean> | boolean | void;
+    /**
+     * El método onCancel será llamado siempre que un usuario cierre el modal,
+     * excepto cuando haya presionado en onConfirm.
+     */
+    onCancel?: () => void;
+    /**
+     * Permite introducir html directamente dentro del contenedor del modal.
+     */
+    html?: string;
+};
+
+declare class ApiaUtilModalHandler {
+    private id;
+    close: () => void;
+    constructor(id: string, close: () => void);
+}
+declare class ApiaUtilModals {
+    #private;
+    constructor();
+    open(props: TOpenModal): ApiaUtilModalHandler;
+    Component: () => React$1.JSX.Element;
+}
+
+declare class ApiaUtilNotifications {
+    close: (id: TNotificationId | INotification) => void;
+    closeAll: () => void;
+    notify: (notification: TDispatchedNotification) => void;
+    useSelector: (selector: TNotificationSelector<any>) => INotification<_apia_notifications.TNotificationType>[];
+    Component: () => React$1.JSX.Element;
+}
+
+declare class ApiaUtilTabsController {
+    get currentTab(): Tab<TTab>;
+    closeTab(tabId: string, force?: boolean): void;
+    getHandler(): TabsController<TTab>;
+    /**
+     * openApiaTab y openTab son sinónimos.
+     */
+    openTab(title: string, url: string): Promise<TId$1>;
+}
+
+interface IConfirm {
+    additionalButtons?: ReactNode;
+    additionalButtonsOnRight?: ReactNode;
+    cancelButtonText?: string;
+    children: ReactNode;
+    className?: string;
+    confirmButtonText?: string;
+    confirmButtonVariant?: TApiaButtonType;
+    contentRef?: Ref<HTMLDivElement>;
+    disabled?: boolean;
+    hideCancelButton?: boolean;
+    hideConfirmButton?: boolean;
+    isLoading?: boolean;
+    onConfirm?: () => unknown;
+    onCancel?: () => unknown;
+    title?: string;
+    variant?: string;
+}
+declare const ConfirmModal: ({ onConfirm, onCancel, title, ...props }: IConfirm) => JSX.Element;
+
+type TApiaUtilConfirm = Pick<IConfirm, 'additionalButtons' | 'additionalButtonsOnRight' | 'cancelButtonText' | 'children' | 'className' | 'confirmButtonText' | 'confirmButtonVariant' | 'contentRef' | 'hideCancelButton' | 'hideConfirmButton' | 'title' | 'variant'>;
+type TAlert = {
+    children: ReactNode;
+    title: string;
+};
+declare class ApiaUtilDialogs {
+    #private;
+    alert(props: TAlert): Promise<void>;
+    confirm(props: TApiaUtilConfirm): Promise<boolean>;
+    Component: () => React$1.JSX.Element;
+}
+
+declare class ApiaUtilParsers {
+    #private;
+    /**
+     * Toma un número sin separadores de miles y lo devuelve en el formato
+     * establecido por los parámetros de Apia para separadores de miles y
+     * separadores de decimales.
+     */
+    addThousSeparator(nStr: string | number): string;
+    apiaNumber(pValue: number): number | string;
+    /**
+     * Toma un número en formato Apia y lo devuelve como float en javascript.
+     */
+    jsNumber(value: string): number;
+    /**
+     * Hay muchos valores que podrían querer ser interpretados como booleano
+     *
+     * Devuelve true si el valor coincide con true|T|t|1 y false si coincide con
+     * false|F|f|0. Si no coincide con ninguna de éstas hace throw de un error.
+     */
+    parseBool(val: string): boolean;
+    /**
+     * Toma una estructura bidimensional y la convierte a csv, usando el método
+     * String(...) sobre cada celda de datos.
+     */
+    toCsv(data: any[][], delimiter?: string): string;
+    /**
+     * Convierte un string a array de arrays, parseándolo en formato CSV, encontrando el delimitador en forma automática.
+     */
+    fromCsv(data: string): string[][];
+}
+
+type TAttachToElement = (() => HTMLElement) | RefObject<HTMLElement>;
+type TPreferredOrientationX = 'left' | 'right';
+type TPreferredOrientationY = 'top' | 'bottom';
+type TSize = {
+    width: number;
+    height: number;
+};
+type TSizeWithAuto = {
+    width: number | 'auto';
+    height: number | 'auto';
+};
+type TPosition = {
+    left: number;
+    top: number;
+};
+type TAttachToElementAnchorPoint = 'center' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight';
+type TTooltip = {
+    /** Define el contenido del tooltip */
+    children?: ReactNode;
+    /**
+     * Indica si el tooltip se cierra con escape. Valor por defecto: true.
+     */
+    closeOnEscape?: boolean;
+    /**
+     * Indica si el tooltip se cierra al desplazar el puntero del mouse fuera del
+     * tooltip. Valor por defecto: true.
+     */
+    closeOnMouseLeaveTooltip?: boolean | ((ev: MouseEvent) => boolean);
+    /**
+     * Indica si el tooltip se cierra al desplazar el puntero del mouse fuera del
+     * elemento al que el tooltip está anclado. Valor por defecto: true.
+     */
+    closeOnMouseLeaveAttachedElement?: boolean | ((ev: MouseEvent) => boolean);
+    /**
+     * Indica si el tooltip se cierra al hacerle click. Valor por defecto: false.
+     */
+    closeOnClick?: boolean;
+    /**
+     * Indica si el tooltip se cierra al hacer click fuera de él. Valor por
+     * defecto: true.
+     */
+    closeOnClickOut?: boolean | ((ev: MouseEvent) => boolean);
+    /**
+     * Indica si el tooltip se cierra al hacer scroll en un elemento externo al
+     * tooltip. Valor por defecto: true.
+     */
+    closeOnScrollOut?: boolean;
+    /**
+     * Por defecto está en true. Cierra los demás tooltips al abrirse
+     */
+    closeOthers?: boolean;
+    /**
+     * Permite determinar sobre qué elemento se abre el tooltip
+     */
+    attachToElement?: TAttachToElement;
+    /**
+     * Cuando se desea hacer attach a un elemento, es posible posicionar el menú
+     * en cualquiera de los cuatro vétices definidos por el box que lo contiene o
+     * bien ubicarlo exactamente en el centro.
+     *
+     * Por defecto se colocará en topRight.
+     *
+     * Además el tooltip se extenderá según la orientación definida en los
+     * parámetros preferredOrientationX y preferredOrientationY.
+     */
+    attachToElementAnchorPoint?: TAttachToElementAnchorPoint;
+    attachToMousePosition?: boolean;
+    /**
+     * Permite indicar que el tooltip se abrirá en un punto específico. En caso
+     * de no indicar anchorPoint ni attachToElement se abrirá en {0,0}
+     */
+    anchorPoint?: TPosition;
+    /**
+     * El minSize define el espacio mínimo que debe existir para mostrar el
+     * tooltip. En caso de que en la orientación definida no exista espacio
+     * suficiente, el tooltip se mostrará en otra orientación que si lo permita.
+     */
+    minSize?: TSize;
+    /**
+     * El preferredSize define el espacio deseado que debería ocupar el tooltip.
+     * En caso de no haber espacio suficiente para cubrir este espacio en la
+     * orientación definida, se cubrirá todo el espacio disponible, siempre y
+     * cuando sea mayor o igual que minSize, en cuyo caso entrará en juego el
+     * comportamiento de minSize.
+     *
+     * Por defecto usa { height: 'auto', width: 'auto' }.
+     */
+    preferredSize?: TSizeWithAuto;
+    /**
+     * Posición en la que el tooltip se muestra en caso de que haya espacio
+     * suficiente, por defecto usa right.
+     */
+    preferredOrientationX?: TPreferredOrientationX;
+    /**
+     * Posición en la que el tooltip se muestra en caso de que haya espacio
+     * suficiente, por defecto usa bottom.
+     */
+    preferredOrientationY?: TPreferredOrientationY;
+    /**
+     * Permite agregar classNames al box contenedor.
+     */
+    className?: string;
+    /**
+     * Será llamado cuando el tooltip sea cerrado.
+     */
+    onClose?: () => unknown;
+    /**
+     * Variante del box contenedor. Por defecto usa
+     * layout.common.tooltips.primary.
+     */
+    variant?: string;
+    /**
+     * Si está presente, será llamado cuando monte el elemento HTML contenedor del tooltip, pasándose éste como parámetro y se situará el foco sobre el elemento devuelto.
+     */
+    initialFocusGetter?: (tooltip: HTMLElement) => HTMLElement | null;
+    [key: `data-${string}`]: string;
+};
+
+declare class ApiaUtilTooltip {
+    props: TTooltip;
+    close: () => void;
+    id: string;
+    constructor(props: TTooltip, close: () => void);
+}
+
+declare class AutomaticTooltip {
+    #private;
+    private handler;
+    ref: (el: HTMLElement | null) => void;
+    constructor(tooltip: Partial<TTooltip> | null | undefined, handler: ApiaUtilTooltips);
+    update: (tooltip: Partial<TTooltip>) => void;
+}
+
+declare class ApiaUtilTooltips {
+    #private;
+    tooltips: ApiaUtilTooltip[];
+    constructor();
+    /**
+     * Permite crear un tooltip que se abrirá automáticamente al estar parado
+     * sobre un elemento durante 300ms
+     */
+    useHover: (tooltip?: Partial<TTooltip>) => AutomaticTooltip;
+    close: (id: string) => void;
+    closeAll: () => void;
+    open: (tooltip: TTooltip) => ApiaUtilTooltip;
+    Component: () => React$1.JSX.Element;
+}
+
+type TSubmenu = {
+    label: string;
+    items: TMenuItems;
+};
+type TMenuItem = (MenuItemProps & {
+    key: string;
+}) | 'separator' | TSubmenu;
+type TMenuItems = TMenuItem[];
+declare class ApiaUtilMenu {
+    #private;
+    menuProps: ControlledMenuProps | null;
+    close: () => void;
+    open: ({ menuProps, items, }: {
+        menuProps: ControlledMenuProps;
+        items: TMenuItems;
+    }) => void;
+    Component: () => React$1.JSX.Element | null;
+}
+
+declare class ApiaUtilMouse extends EventEmitter<{
+    updatePosition: {
+        x: number;
+        y: number;
+    };
+}> {
+    x: number;
+    y: number;
+    get position(): {
+        x: number;
+        y: number;
+    };
+    constructor();
+}
+
+declare class ApiaUtil {
+    #private;
+    static get instance(): ApiaUtil;
+    private constructor();
+    dialogs: ApiaUtilDialogs;
+    menu: ApiaUtilMenu;
+    modals: ApiaUtilModals;
+    mouse: ApiaUtilMouse;
+    notifications: ApiaUtilNotifications;
+    parsers: ApiaUtilParsers;
+    tabs: ApiaUtilTabsController;
+    tooltips: ApiaUtilTooltips;
+    Component: () => React$1.JSX.Element;
+}
+
+declare const TabsList: (({ arrowsBehavior }: {
+    arrowsBehavior?: "open" | "focus" | undefined;
+}) => React__default.JSX.Element | null) & {
+    displayName: string;
+};
+
+declare class Tab<TabType extends TTab = TTab> {
+    state: TabType;
+    controller: TabsController<TabType>;
+    constructor(state: TabType, controller: TabsController<TabType>);
+    get id(): string;
+    /**
+     * El parámetro force evita que se muestre cartel de confirmación al usuario cuando puede haber pérdida de datos.
+     */
+    close(force?: boolean): Promise<boolean>;
+    open(): void;
+}
+declare class TabsController<TabType extends TTab = TTab> {
+    #private;
+    id: string;
+    props: Omit<TabsControllerProps<TabType>, 'id'>;
+    state: TTabsListState<TabType>;
+    getActiveTab(): Tab<TabType>;
+    /**
+     * Es el tab que está abierto
+     */
+    get activeTab(): Tab<TabType>;
+    getTab(id: string): Tab<TabType> | undefined;
+    get tabsList(): Tab<TabType>[];
+    constructor(id: string, props: Omit<TabsControllerProps<TabType>, 'id'>);
+    /**
+     * Obviamente agrega un tab al listado de tabs
+     */
+    append(tab: TabType): void;
+    closeAll(closeFixedTabsAsWell?: boolean, force?: boolean): Promise<void>;
+    closeOpenTab(force?: boolean): void;
+    closeToRight(targetId: string, force?: boolean): Promise<void>;
+    closeToLeft(targetId: string, force?: boolean): Promise<void>;
+    closeOthers(targetId: string, force?: boolean): Promise<void>;
+    closeTab(tabId: string, force?: boolean): Promise<boolean>;
+    focusNextTab(): Tab<TabType> | null;
+    focusPreviousTab(): Tab<TabType> | null;
+    focusTab(tabId: string): void;
+    getTabElement(tabId: string): Element | null;
+    handleKeyDown(ev: React__default.KeyboardEvent): void;
+    openNextTab(): Tab<TabType> | null;
+    openPreviousTab(): Tab<TabType> | null;
+    /**
+     * Se utiliza para hacer que el tab aparezca visible en el listado
+     */
+    openTab(tabId: string): void;
+}
+
+type TOrientation = 'horizontal' | 'vertical';
+type TabsControllerProps<TabType extends TTab> = {
+    id: string;
+    initialTabs?: TabType[];
+    getController?: (controller: TabsController) => unknown;
+    onCloseTab?: (tan: Tab) => void;
+    orientation: TOrientation;
+};
+type TTab = {
+    addEvent?: (ev: 'onFocusTab', cb: (ev: {
+        stop: () => void;
+    }) => unknown) => unknown;
+    content: React__default.FunctionComponent<{
+        tab: Tab;
+    }>;
+    icon?: TIconName | TIconType;
+    /**
+     * El id es importante ya que se utiliza por temas de accesibilidad. Es
+     * importante asegurarse de que sea único.
+     */
+    id: string;
+    isClosable?: boolean;
+    isDisabled?: boolean;
+    /**
+     * Los tabs que estén marcados como fixed aparecerán al inicio del listado.
+     */
+    isFixed?: boolean;
+    isFocused?: boolean;
+    /**
+     * Si se marca como iconTab, se oculta el label y solamente se muestra el
+     * ícono.
+     */
+    isIconTab?: boolean;
+    isLoading?: boolean;
+    isOpen?: boolean;
+    /**
+     * Si un tab se marca como lazy, el iframe no se inicializará hasta que no
+     * sea abierta por primera vez.
+     */
+    lazy?: boolean;
+    /**
+     * Cuando se cierra un tab que tiene un método onBeforeClose, el mismo será
+     * llamado y deberá devolver un boolean o un string. Si devuelve true, se
+     * cierra. Si devuelve false, se muestra un cartel de confirmación genérico y
+     * si se devuelve un string, se muestra un cartel de confirmación con el
+     * string devuelto. En caso de que el usuario confirme el cuadro de diálogo,
+     * el tab será cerrado de todas formas. Es decir, no hay forma de evitar que
+     * el tab sea cerrado si el usuario decide continuar con la acción. Para
+     * evitar que un tab sea cerrado, debe pasarse isClosable=false
+     */
+    onBeforeClose?: () => boolean | string | Promise<boolean | string>;
+    /**
+     * Este callback será llamado cada vez que el tab sea abierto
+     */
+    onFocus?: (ev: Tab) => unknown;
+    /**
+     * Es el texto que se va a mostrar en el tab
+     */
+    label: string;
+    labelRenderer?: TTabLabelRenderer;
+    /**
+     * Se pueden pasar propiedades adicionales que serán recibidas en cada
+     * evento, de forma de poder compartir piezas de información útiles en las
+     * distintas partes de la aplicación.
+     */
+    additionalProps?: any;
+    tabId: string;
+    title?: string;
+};
+type TTabLabelRenderer = (props: {
+    tab: Tab<TTab>;
+}) => React__default.ReactElement;
+type TTabsListState<TabType extends TTab> = {
+    openTabs: Set<Tab<TabType>>;
+    tabs: Map<string, Tab<TabType>>;
+    timestamp: number;
+};
+
+declare const DefaultTabsLabelRenderer: TTabLabelRenderer;
+
+declare const TabsContent: ((props: Omit<BoxProps, 'children'>) => React$1.JSX.Element | null) & {
+    displayName: string;
+};
+
+declare const Tabs: ({ id, getController, initialTabs, orientation, ...props }: TabsControllerProps<TTab> & Omit<BoxProps, 'id' | 'as' | 'role'>, ref: React__default.ForwardedRef<HTMLDivElement>) => React__default.JSX.Element | null;
+
+interface ITab {
+    fncId: number;
+    tabId: string;
+    title: string;
+    url: string;
+}
+type TId = string | number;
+interface IOpenTabOptions {
+    funcId?: TId;
+    keepMenuOpen?: boolean;
+    parentTabId?: string;
+    tabOptions?: Partial<Tab['state']>;
+}
+interface ITabContainer {
+    addNewTab: (title: string, url: string, options?: IOpenTabOptions) => Promise<string>;
+    addNewTabs: (args: ITab[]) => void;
+    changeTabTitle: (tabId: string, title: string) => void;
+    getHandler: () => TabsController;
+    getTab: (tabId: string) => Tab | undefined;
+    hasClass: () => boolean;
+    removeActiveTab: (force?: boolean) => void;
+    removeTabByID: (tab: string, force?: boolean) => void;
+}
+type TGetTabsController = () => ITabContainer;
+type TGetBodyController = () => ProxyHandler<{
+    canRemoveTab: () => TOnBeforeCloseResult;
+}>;
+type TOnBeforeCloseResult = boolean | string;
+declare global {
+    interface Window {
+        customPalette?: TPalette;
+        defaultPalette?: TPalette;
+        closeSession?: (dispatch?: boolean) => unknown;
+        [key: string]: string;
+    }
+    interface HTMLIFrameElement {
+        canRemoveTab: () => TOnBeforeCloseResult;
+        getReactBodyController: TGetBodyController;
+        getReactTabsController: TGetTabsController;
+        handleDeadSession?: () => unknown;
+        onBeforeClose: (callback: () => TOnBeforeCloseResult) => void;
+        onFocusTab: () => unknown;
+    }
+}
+
+type LockTypes = 'linear' | 'white' | 'common';
+type Lock = {
+    count: number;
+};
+type LockOptions = Partial<{
+    type: LockTypes;
+}>;
+declare class ScreenLocker {
+    protected emitter: StatefulEmitter<{
+        locks: Record<LockTypes, Lock>;
+        release: true;
+    }>;
+    lock: (options?: LockOptions) => () => void;
+    protected hasReleased: boolean;
+    /**
+     * This method will work once, then, the action will be ignored. The ScreenLocker starts always locked on white, when this method is called, all listeners of onRelease will be called and the lock will be released.
+     */
+    release: () => void;
+    /**
+     * This method notifies when the screenLock is released by the first time.
+     */
+    onRelease: (cb: _apia_util.Callback<{
+        locks: Record<LockTypes, Lock>;
+        release: true;
+    }, "locks" | "release">) => _apia_util.UnSubscriber;
+    /**
+     * This component is the responsible for putting the lock courtain in the browser when it's required. It must be used once per application.
+     */
+    Component: () => React$1.JSX.Element | null;
+}
+
+type AutocompleteProps = {
+    /**
+     * Si este flag es true, la búsqueda se realiza con .toLowerCase() en el valor y en la cadena de búsqueda.
+     */
+    caseInsensitive?: boolean;
+    onChange?: (value: string, controller: AutocompleteController) => unknown;
+    /**
+     * Si se pasa una función de búsqueda, cuando el usuario busque se llamará a esta función para determinar qué opciones deberán mostrarse. Las opciones devueltas deberán tener filtered !== true para mostrarse.
+     *
+     * La función de búsqueda será llamada mediante un debounce con tiempo = state.searchDebounce (ms).
+     *
+     * Si no se pasa función de búsqueda, la comparación se realizará contra this.state.options, siguiendo el algoritmo descrito en AutocompleteOption.
+     *
+     */
+    onSearch?: (str: string, controller: AutocompleteController) => Promise<AutocompleteOption[]>;
+    options: AutocompleteOption[];
+    /**
+     * Por defecto es 100ms.
+     */
+    searchDebounce?: number;
+} & AutocompleteBoxProps & Partial<Pick<AutocompleteState, 'disabled' | 'value'>>;
+type AutocompleteBoxProps = Partial<{
+    className: string;
+    id: string;
+    name: string;
+}>;
+type AutocompleteState = {
+    disabled: boolean;
+    focusedValue?: null | string;
+    loading: boolean;
+    showValue: string;
+    value: string;
+};
+/**
+ * El componente buscará dentro de las opciones disponibles cuando el usuario realice una búsqueda en el cuadro de texto. Para ello, compara cada opción contra str según:
+ *
+ * Si caseInsensitive===true, la comparación se hará en lowerCase.
+ *
+ * Si se pasa searchLabel, se compara contra searchLabel.
+ * Sino, si label?.toString() está definido, se utiliza label?.toSring().
+ * Sino, se utiliza value.
+ *
+ * Un se mostrará en los resultados si el algoritmo determina que (result_search_label).indexOf(str) !== -1.
+ */
+type AutocompleteOption = {
+    /**
+     * @private
+     *
+     * Se utiliza para determinar si debe mostrarse o no.
+     */
+    filtered?: boolean;
+    label: ReactNode;
+    /**
+     * Si se pasa searchLabel, será utilizado en vez de label. Si no se pasa, se hará label.toString() para realizar la búsqueda, que solamente tiene sentido cuando label es un primitivo.
+     */
+    searchLabel?: string;
+    /**
+     * @default Por defecto toma el valor ''
+     */
+    value: string;
+};
+declare class AutocompleteController {
+    #private;
+    state: AutocompleteState & AutocompleteProps;
+    constructor(properties: Partial<AutocompleteProps>);
+    get focusedIndex(): number;
+    get isOpen(): boolean;
+    close(selectValue?: boolean): void;
+    getAutocompleteBox(): HTMLElement | null;
+    getOptionsBox(): HTMLElement | null;
+    getOptionElement(value: string): HTMLElement | null | undefined;
+    getOptionByValue(value: string): AutocompleteOption | undefined;
+    focusFirst(): void;
+    focusLast(): void;
+    focusNext(n?: number): void;
+    focusPrevious(n?: number): void;
+    open(): void;
+    toggleOpen(): void;
+    search(str: string): void;
+    selectFocused(): void;
+    setValue(value: string): void;
+    tooltipRef: ApiaUtilTooltip | null;
+}
+
+type AutocompleteCmpProps = {
+    handler?: AutocompleteController;
+    getHandler?: (handler: AutocompleteController) => unknown;
+    properties?: AutocompleteProps;
+};
+declare const Autocomplete: (props: AutocompleteCmpProps) => React$1.JSX.Element | null;
+
+interface IBaseButton {
+    text?: string;
+    children?: string;
+    loadingChildren?: string;
+    id?: string;
+    name?: string;
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+    isLoading?: boolean;
+    disabled?: boolean;
+    variant?: TApiaButtonType | string;
+    type?: 'button' | 'submit' | 'reset';
+    SXProps?: ThemeUIStyleObject;
+}
+/**
+ * The world's most **basic** button
+ */
+declare const BaseButton: ({ id, name, onClick, isLoading, loadingChildren, disabled, children, text, variant, type, SXProps, ...buttonProps }: IBaseButton) => React$1.JSX.Element;
+
+type TIconSize = number | 'Xs' | 'Sm' | 'Md' | 'Lg' | 'Xl';
+type TApiaIconButton = 'icon' | 'icon-primary' | 'icon-outline' | 'icon-only';
+type TIconButton = Omit<IconButtonProps, 'sx'> & React$1.AriaAttributes & {
+    className?: string;
+    /**
+     * Es posible pasar explícitamente un ícono o el nombre del ícono de
+     * acuerdo a la librería de la aplicación. Ver Icon.tsx
+     */
+    icon: TIconType | TIconName;
+    iconSize?: TIconSize;
+    id?: string;
+    disabled?: boolean;
+    href?: string;
+    isLoading?: boolean;
+    isToggled?: boolean;
+    onClick?: React$1.MouseEventHandler<HTMLButtonElement>;
+    onMouseOut?: React$1.MouseEventHandler<HTMLButtonElement>;
+    onMouseOver?: React$1.MouseEventHandler<HTMLButtonElement>;
+    size?: TIconSize;
+    title?: string;
+    variant?: string;
+};
+/**
+ * Renderiza un botón con un ícono adentro.
+ *
+ * La variante por defecto de este componente es buttons.icon
+ *
+ * Si se pasa solamente size, el iconSize será
+ */
+declare const IconButton: React$1.ForwardRefExoticComponent<Omit<TIconButton, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
+
+interface ISimpleButton extends ButtonProps {
+    buttonSx?: ThemeUICSSObject;
+    icon?: TIconType;
+    iconColor?: string;
+    iconPosition?: 'left' | 'right';
+    iconSize?: number;
+    isLoading?: boolean;
+    onClick?: React$1.MouseEventHandler<HTMLButtonElement>;
+    size?: 'sm' | 'md' | 'lg';
+    variant?: string;
+    spinnerSize?: number;
+    type?: 'button' | 'submit' | 'reset';
+}
+declare const SimpleButton: React$1.ForwardRefExoticComponent<Omit<ISimpleButton, "ref"> & React$1.RefAttributes<unknown>>;
+
+/**
+ * Este hook está pensado para crear un botón utilizando un tag cualquiera.
+ *
+ * @example
+ *
+ * const buttonProps = useOtherTagButton(React.useMemo(()=>({
+ *   onClick(ev) { console.log(ev.target) },
+ *   onKeyDown(ev) { console.log(ev.code) }
+ * }),[])
+ *
+ * return <div {...buttonProps}>Esto es un botón</div>
+ */
+declare function useOtherTagButton(props?: Partial<{
+    className?: string;
+    onClick: React__default.MouseEventHandler;
+    onKeyDown: React__default.KeyboardEventHandler;
+}>): {
+    className: string;
+    onClick: (ev: React__default.MouseEvent) => void;
+    onKeyDown: (ev: React__default.KeyboardEvent) => void;
+    role: string;
+    tabIndex: number;
+};
+
+declare const Captcha: ({ name, imageUrl, onChange, value, className, }: {
+    name: string;
+    className?: string | undefined;
+    imageUrl: string;
+    onChange: React.ChangeEventHandler<HTMLInputElement>;
+    value: string;
+}) => React$1.JSX.Element;
+
+type TCheckbox = TModify<ButtonProps, {
+    background?: string;
+    checked?: boolean;
+    color?: string;
+    defaultChecked?: boolean;
+    icon?: TIconName;
+    indeterminate?: boolean;
+    native?: boolean;
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+    readOnly?: boolean;
+    required?: boolean;
+    type?: string;
+}>;
+declare const Checkbox: React$1.ForwardRefExoticComponent<Omit<TCheckbox, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
+
+interface IField {
+    className?: string;
+    disabled?: boolean;
+    isLoading?: boolean;
+    readOnly?: boolean;
+}
+interface IIconInput extends IField {
+    additionalButtons?: React__default.ReactNode;
+    additionalButtonsPosition?: 'before' | 'after';
+    buttonProps?: Partial<React__default.ComponentProps<typeof IconButton>>;
+    buttonRef?: React__default.RefObject<HTMLButtonElement>;
+    hideButton?: boolean;
+    icon?: TIconType | TIconName;
+    inputProps?: Partial<InputProps>;
+    inputRef?: React__default.RefObject<HTMLInputElement>;
+    onClick?: (ev: React__default.MouseEvent) => void;
+    onBlur?: React__default.FocusEventHandler;
+    [key: string]: unknown;
+}
+declare const IconInput: ({ additionalButtons, additionalButtonsPosition, buttonProps, buttonRef, className, disabled, hideButton, icon, inputProps, inputRef, isLoading, mask, onClick, onBlur, readOnly, ...rest }: IIconInput) => React__default.JSX.Element;
+
+declare global {
+    interface Window {
+        LANG_CODE: string;
+        MSG_INVALID_DATE: string;
+        MSG_FEC_FIN_MAY_FEC_INI: string;
+        LBL_PICK_DATE: string;
+    }
+}
+type TDateProps = TModify<InputProps, {
+    allowPickBeforeToday?: boolean;
+    error?: string | null;
+    /**
+     * Con esta propiedad se puede proveer una función que será utilizada para
+     * determinar qué máscara debe utilizar el input
+     */
+    getCustomMask?: () => string;
+    isLoading?: boolean;
+    /**
+     * Recibe la nueva fecha. En caso de devolver
+     * false desde este método, el nuevo valor no
+     * se persistirá.
+     */
+    onChange?: (newValue: string) => boolean | string | void;
+    /**
+     * Es llamado cada vez que alguien presiona el botón de eliminar fecha.
+     */
+    onDelete?: () => void;
+    onError?: (error: string | null) => unknown;
+    /**
+     * Con esta propiedad se puede proveer una función que recibirá como
+     * parámetro el valor actual del cmapo y debe devolver el valor a mostrar.
+     */
+    renderLabel?: (value: string) => string;
+    value?: string;
+}> & Pick<IIconInput, 'buttonProps'>;
+declare const DateInput: React__default.ForwardRefExoticComponent<Omit<TDateProps, "ref"> & React__default.RefAttributes<HTMLInputElement>>;
+
+interface IFieldErrorMessage {
+    children: React$1.ReactNode | string;
+    name?: string;
+}
+declare const FieldErrorMessage: ({ children, name }: IFieldErrorMessage) => React$1.JSX.Element | null;
+
+/**
+ * El NumberInput respeta los parámetros de ambiente:
+ * - AMOUNT_DECIMAL_SEPARATOR
+ * - AMOUNT_DECIMAL_ZEROS
+ * - CHAR_DECIMAL_SEPARATOR
+ * - CHAR_THOUS_SEPARATOR
+ * - ADD_THOUSAND_SEPARATOR
+ */
+
+type TNumberInputChangeEvent = {
+    error: boolean;
+    value: string;
+};
+type TNumberInput = Omit<InputProps, 'type' | 'onChange' | 'onBlur' | 'value' | 'defaultValue'> & {
+    onChange?: (ev: TNumberInputChangeEvent) => unknown;
+    value?: string;
+    defaultValue?: string;
+    avoidDecimalRestriction?: boolean;
+};
+declare global {
+    interface Window {
+        AMOUNT_DECIMAL_SEPARATOR: string;
+        AMOUNT_DECIMAL_ZEROS: string;
+        CHAR_DECIMAL_SEPARATOR: string;
+        CHAR_THOUS_SEPARATOR: string;
+        ADD_THOUSAND_SEPARATOR: boolean;
+    }
+}
+declare function parseNumberInputValueToNumber(value: string): number;
+declare function parseNumberValueToNumberInput(value: string | number): string;
+declare const NumberInput: React__default.ForwardRefExoticComponent<Omit<TNumberInput, "ref"> & React__default.RefAttributes<HTMLInputElement>>;
+
+interface IRequiredMark {
+    isFormReadonly?: boolean;
+    isRequired?: boolean;
+    isReadonly?: boolean;
+}
+/**
+ * Muestra el * en los campos de requerido.
+ */
+declare const RequiredMark: ({ isFormReadonly, isRequired, isReadonly, }: IRequiredMark) => React$1.JSX.Element | null;
+
+declare const getFieldErrorStyles: (isValid: boolean) => ThemeUICSSObject;
+declare const getFieldTouchedStyles: (isTouched: boolean) => ThemeUICSSObject;
+
+type TFieldLabel = {
+    avoidSemicolon?: boolean;
+    /**
+     * Permite mostrar un mensaje de error debajo del campo
+     */
+    error?: string;
+    hideRequiredMark?: boolean;
+    label: string;
+    /**
+     * La propiedad required se utiliza para mostrar el * de requerido.
+     *
+     * @see requiredMarkPosition
+     * @see hideRequiredMark
+     */
+    required?: boolean;
+    requiredMarkPosition?: 'before' | 'after';
+} & BoxProps;
+declare const FieldLabel: React$1.ForwardRefExoticComponent<{
+    avoidSemicolon?: boolean | undefined;
+    /**
+     * Permite mostrar un mensaje de error debajo del campo
+     */
+    error?: string | undefined;
+    hideRequiredMark?: boolean | undefined;
+    label: string;
+    /**
+     * La propiedad required se utiliza para mostrar el * de requerido.
+     *
+     * @see requiredMarkPosition
+     * @see hideRequiredMark
+     */
+    required?: boolean | undefined;
+    requiredMarkPosition?: "after" | "before" | undefined;
+} & BoxProps & React$1.RefAttributes<HTMLDivElement>>;
+
+interface IAccordionItemButton {
+    ariaLabel: string;
+    /**
+     * Si checked !== undefined => se mostrará un checkbox.
+     */
+    checked?: boolean;
+    /**
+     * Solamente se utiliza en conjunto con el checkbox y permite evitar que el
+     * usuario pueda marcar o desmarcar el checkbox.
+     */
+    className?: string;
+    disableSelection?: boolean;
+    domButtonProps?: ISimpleButton;
+    label: string;
+    /**
+     * Evento que se dispara cuando el usuario hace click en el checkbox o
+     * presiona espacio sobre el botón del acordeón.
+     */
+    onChange?: (checked: boolean) => unknown;
+    onClick?: (ev: MouseEvent$1) => unknown;
+    onUserPressEnter?: (ev: KeyboardEvent) => unknown;
+    rightButtons?: ReactNode;
+    rightIcons?: TIconName[] | TIconName;
+    tabIndex?: number;
+    /**
+     * Si no se pasa title se usará ariaLabel.
+     */
+    title?: string;
+}
+declare const DefaultAccordionItemButton: (props: IAccordionItemButton) => React$1.JSX.Element;
+
+interface IAccordionProps {
+    /**
+     * Tiempo en ms que dura la animación. Por defecto se usa 150.
+     */
+    animationDuration?: number;
+    children?: ReactNode;
+    className?: string;
+    getHandler?: (handler: AccordionHandler) => unknown;
+    singleExpand?: boolean;
+    /**
+     * Por defecto usa la variante layout.common.components.accordion.primary
+     */
+    variant?: string;
+}
+declare const Accordion: FC<IAccordionProps>;
+
+type TItemState$1 = {
+    isChecked: boolean;
+    isExpanded: boolean;
+};
+type TItemStateListener = (state: TItemState$1) => unknown;
+type TPropsListener = (props: IAccordionProps) => unknown;
+
+type TSelectionComparator<T> = (prev: T, next: T) => boolean;
+type TItemUpdater = Partial<TItemState$1> | ((currentProps: TItemState$1) => Partial<TItemState$1>);
+declare class AccordionHandler {
+    id: string;
+    props: IAccordionProps;
+    itemsState: Record<TId$1, TItemState$1>;
+    itemsStateListeners: Record<TId$1, TItemStateListener[]>;
+    propsListeners: TPropsListener[];
+    constructor(id: string, props: IAccordionProps);
+    registerItem(itemId: TId$1, initialState: TItemState$1): void;
+    toggleItem(itemId: TId$1, expanded?: boolean): void;
+    unregisterItem(itemId: TId$1): void;
+    /**
+     * Permite actualizar parcialmente el estado de un item
+     */
+    udpateItem(itemId: TId$1, updater: TItemUpdater): void;
+    updateProps(props: IAccordionProps): void;
+    hooks: {
+        useAccordionContextProvider: () => ({ children }: {
+            children: ReactNode;
+        }) => React$1.JSX.Element;
+        useItemContextProvider: (itemId: TId$1) => ({ children }: {
+            children: ReactNode;
+        }) => React$1.JSX.Element;
+        useItemId: () => TId$1;
+        useItemStateSelector: <T>(selector: (props: TItemState$1) => T, comparator?: TSelectionComparator<T>) => T;
+        useItemStateUpdate: (cb: TItemStateListener) => void;
+        usePropsSelector: <T_1>(selector: (props: IAccordionProps) => T_1, comparator?: TSelectionComparator<T_1>) => T_1;
+        usePropsUpdate: (cb: TPropsListener) => void;
+    };
+}
+
+interface IAccordionItemProps {
+    /**
+     * Cada elemento del acordeón tiene dos formas de renderizar el botón. O bien
+     * se pasa un elemento AccordionItemButton como hijo o bien se pasan
+     * buttonProps. En caso contrario, el elemento no tendrá botón.
+     */
+    buttonProps?: IAccordionItemButton;
+    children?: ReactNode;
+    defaultExpanded?: boolean;
+    id: TId$1;
+}
+declare const AccordionItem: ({ children, id, defaultExpanded, ...props }: IAccordionItemProps) => React$1.JSX.Element;
+
+type TAccordionItemButton = {
+    children?: ReactNode;
+};
+declare const AccordionItemButton: ({ children }: TAccordionItemButton) => React$1.JSX.Element;
+
+declare const AccordionItemContent: ({ children, buttonProps, }: IAccordionItemProps) => React$1.JSX.Element;
+
+declare const AccordionContext: React$1.Context<AccordionHandler | null>;
+declare const AccordionItemContext: React$1.Context<TId$1 | null>;
+declare const useAccordionContext: () => AccordionHandler;
+
+type TAccordionHandler = AccordionHandler;
+
+interface IApiaFilter {
+    filter: TApiaFilter;
+    onBlur?: (ev: TApiaFilterValue) => void;
+    onChange?: (ev: TApiaFilterValue) => void | boolean | string | Promise<boolean | string>;
+    onPressEnter?: (ev: TApiaFilterValue) => void;
+}
+declare const ApiaFilter: React$1.MemoExoticComponent<React$1.ForwardRefExoticComponent<IApiaFilter & React$1.RefAttributes<HTMLInputElement | HTMLSelectElement>>>;
+
+interface ILabelBox {
+    className?: string;
+    label: string;
+    tooltip?: string;
+    closeTooltip?: string;
+    onClose?: () => unknown;
+}
+type TLabelBox = ILabelBox & BoxProps;
+declare const LabelBox: ({ className, label, tooltip, closeTooltip, onClose, ...props }: TLabelBox) => React__default.JSX.Element;
+
+declare const ContainerWithHeader: ({ title, children, footerChildren, onClose, additionalButtons, }: {
+    title: string;
+    children: ReactNode;
+    footerChildren?: ReactNode;
+    additionalButtons?: ReactNode;
+    onClose?: (() => void) | undefined;
+}) => React$1.JSX.Element;
+
+interface ICollapsiblePanel {
+    'aria-hidden'?: boolean;
+    children: React.ReactNode;
+    className?: string;
+    closedIcon?: TIconType | TIconName;
+    collapsed?: boolean;
+    defaultCollapsed?: boolean;
+    disableChildrenFocus?: boolean;
+    iconSize?: string | number;
+    id?: string;
+    minHeight?: number;
+    onClose?: () => unknown;
+    onOpen?: (ev?: React.MouseEvent) => void | Promise<boolean>;
+    openIcon?: TIconType | TIconName;
+    label: React.ReactNode;
+    rememberCollapsedState?: boolean;
+    titleButtons?: React.ReactNode;
+}
+
+declare const CollapsiblePanel: React__default.ForwardRefExoticComponent<ICollapsiblePanel & React__default.RefAttributes<HTMLDivElement>>;
+
+interface IAlert {
+    children: React.ReactNode;
+    onClose: () => void;
+    title?: string;
+}
+declare const AlertModal: ({ children, onClose, title }: IAlert) => React$1.JSX.Element;
+
+type TListboxItem = {
+    children?: ReactNode;
+    rowIndex?: number;
+} & BoxProps & {
+    /**
+     * El label se usa en aria-label por motivos de accesibilidad y además en
+     * la funcionalidad de búsqueda.
+     */
+    label: string;
+};
+declare const ListboxItem: FC<TListboxItem>;
+
+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;
+};
+
+type TListbox = {
+    children: ReactNode | ReactNode[];
+    className?: string;
+    /**
+     * Permite remover los estilos por defecto de la lista a fin de personalizar
+     * su aspecto
+     */
+    unstyled?: boolean;
+    onClickNode?: (ev: MouseEvent$1<HTMLElement>) => unknown;
+    onDoubleClickNode?: (ev: MouseEvent$1<HTMLElement>) => unknown;
+    /**
+     * Este evento es lanzado cuando el usuario estando en foco en la lista
+     * presiona:
+     *
+     * - Enter si la selección múltiple está deshabilitada
+     * - ctrl+Enter si la selección múltiple está habilitada
+     */
+    onConfirmSelection?: (ev: TOnConfirmSelection) => unknown;
+    onPressEnterOnNode?: (ev: KeyboardEvent<HTMLElement>) => unknown;
+    onPressKeyOnNode?: (ev: KeyboardEvent<HTMLElement>) => unknown;
+    onSelectionChange?: (ev: TOnSelectionChange) => unknown;
+    /**
+     * onKeyDown e id no son permitidas dado que se usan para generar el
+     * comportamiento correcto del componente
+     */
+    ulProps?: Omit<BoxProps, 'id' | 'onKeyDown' | 'sx'>;
+} & Partial<Pick<TListboxState, 'allowMultipleCharacterSearch' | 'allowSelection' | 'allowSingleCharacterSearch' | 'isMultipleSelection' | 'searchFunction' | 'startsWithFunction' | 'showSearchbox'>>;
+
+type TOnConfirmSelection = {
+    originalEvent: KeyboardEvent;
+    selectedElements: HTMLElement[];
+    focusedElement: HTMLElement;
+};
+type TOnSelectionChange = {
+    focusedElement: HTMLElement;
+    selectedElements: HTMLElement[];
+};
+type TOnClickNode = MouseEvent$1;
+
+declare const Listbox: React$1.MemoExoticComponent<((props: TListbox) => React$1.JSX.Element) & {
+    displayName: string;
+}>;
+
+declare const LinearLoader: () => React$1.JSX.Element;
+
+interface IProgressBar {
+    id: string;
+    progress?: number;
+    loading?: boolean;
+}
+declare const ProgressBar: FC<IProgressBar>;
+
+declare const LoaderSpinner: ((props: {
+    className?: string | undefined;
+}) => React__default.JSX.Element) & {
+    displayName: string;
+};
+
+type TModalContext = {
+    changeTitle: (newTitle: string) => void;
+    close: () => unknown;
+    descriptionId: string;
+};
+declare function useModalContext(): TModalContext;
+
+interface ICalendarModal extends TModal {
+    handleClickDay: (date: Date) => void;
+    onCancel: () => void;
+    calValue?: Date;
+    locale: string;
+}
+declare const CalendarModal: React__default.ForwardRefExoticComponent<ICalendarModal & React__default.RefAttributes<HTMLDivElement>>;
+
+type TUseModalConfiguration = Pick<TModal, 'onClose' | 'onExited'> & {
+    debugPerformanceName?: string;
+    isDefaultOpen?: boolean;
+    onOpen?: () => unknown;
+    portalArgs?: Omit<Args, 'containerId'>;
+    preFetcher?: () => Promise<void>;
+};
+/**
+ * Este hook provee una forma muy sencilla de utilizar nuestro modal. Provee
+ * varias funcionalidades interesantes para poder manipular el modal en
+ * distintas circunstancias:
+ *
+ * Objeto parámetro:
+ *
+ * - **defaultOpen**, Boolean, si es true el modal aparecerá abierto al montar
+ * y sino aparecerá cerrado.
+ * - **onOpen**: Event listener que será llamado en el momento exacto en que la
+ * orden de apertura del modal fue dada.
+ * - **onClose**: Event listener que será llamado en el momento exacto en que
+ * el modal es cerrado, ya sea por un click en el overlay o porque la tecla
+ * escape fue presionada.
+ * - **onExited**, Event listener que será llamado luego de que la animación de
+ * cierre del modal terminó.
+ * - **preFetcher**, este método deberá devolver una promesa y en dicha promesa
+ * deberá realizar cualquier operación que fuera necesaria antes de abrir el
+ * modal, ejemplo: cargar la información que el modal debe mostrar. Si este
+ * método es pasado, será llamado antes de abrir el modal y la vista se pondrá
+ * en modo de carga (la propiedad isLoading devuelta y la propiedad isLoading
+ * del OpenModalContextProvider estarán en true), hasta que la promesa sea
+ * resuelta, momento en que se abrirá el modal e isLoading será puesto en false.
+ * - **portalArgs**, objeto de configuración aceptado por el hook usePortal de
+ * **react-cool-portal**.
+ *
+ * Objeto devuelto:
+ *
+ * - Para un modal en donde el botón de abrir el modal esté inserto dentro del
+ * componente que lo utiliza, se devuelven los métodos **show** y **hide**.
+ * - Para un modal en donde el botón de abrir el modal esté fuera del
+ * componente, se devuelve **openModalContextValue**, que es el valor que debe
+ * pasarse al contexto de tipo OpenModalContextProvider, un contexto que
+ * puede ser utilizado para renderizar el botón encargado de abrir el modal,
+ * fuera del alcance del componente que define el modal en sí. Se muestra un
+ * ejemplo más abajo.
+ * - Todos los demás elementos devueltos son para pasar directamente al modal,
+ * entre ellos se encuentran las propiedades que el modal utiliza para saber si
+ * debe estar abierto, los event listeners correspondientes y un portal, que el
+ * modal usará para mostrarse dentro del área de modales, lo cual es sumamente
+ * importante para que el focusController funcione correctamente.
+ *
+ * @see OpenModalContextProvider
+ * @see usePortal
+ *
+ * @example
+ *
+  const { openModalContextValue, ...modalProps } = useModal(
+    React.useMemo(() => ({
+      onClose: () => console.log("Al presionar en cerrar."),
+      onExited: () => console.log("Al terminar la animación de cierre."),
+      onOpen: () => console.log("Al abrir."),
+    }), [])
+  );
+
+  return (
+    <OpenModalContext.Provider value={openModalContextValue}>
+      <OpenModalContext.Consumer>
+        {({ isLoading, show }) => (
+          <Button isLoading={isLoading} onClick={show}>Open modal</Button>
+        )}
+      </OpenModalContext.Consumer>
+      <Modal shouldCloseOnEsc shouldCloseOnOverlayClick {...modalProps}>
+        Hello world
+      </Modal>
+    </OpenModalContext.Provider>
+  );
+ */
+declare function useModal(configuration?: TUseModalConfiguration): {
+    hide: () => void;
+    isLoading: boolean;
+    isOpen: boolean;
+    onClose: () => void;
+    onExited: () => void;
+    openModalContextValue: {
+        isLoading: boolean;
+        show: () => void;
+    };
+    Portal: React__default.FC<{
+        children: React__default.ReactNode;
+    }>;
+    show: () => void;
+};
+
+declare const Confirm: ({ children, additionalButtons, additionalButtonsOnRight, cancelButtonText: cancelText, className, confirmButtonText: confirmText, confirmButtonVariant, contentRef, disabled, hideCancelButton, hideConfirmButton, isLoading, onCancel, onConfirm, variant, }: Omit<IConfirm, 'title'>) => React$1.JSX.Element;
+
+interface IDialogButtonBar {
+    children: React$1.ReactNode;
+    className?: string;
+}
+declare const DialogButtonBar: React$1.FC<IDialogButtonBar>;
+
+interface IOverlay extends BoxProps {
+    children: React$1.ReactNode;
+    className?: string;
+    onOverlayClicked: (event: React$1.MouseEvent<HTMLDivElement>) => void;
+    /**
+     * Permite pasar un callback que será llamado una vez que el overlay termine
+     * de cerrarse.
+     */
+    onExited: () => void;
+    isOpen?: boolean;
+    shouldAvoidInitialFocusTrap?: boolean;
+    stretch?: boolean;
+    transitionDuration?: number;
+}
+declare const Overlay: React$1.ForwardRefExoticComponent<IOverlay & React$1.RefAttributes<unknown>>;
+
+declare const AutoEllipsis: ({ children, findParent, overrideStyles, }: {
+    children: ReactNode;
+    /**
+     * Si se pasa el método findParent, será invocado con el nodo de AutoEllipsis
+     * para dar control sobre cuál es el elemento al que se le clonarán los
+     * estilos.
+     */
+    findParent?: ((currentElement: HTMLElement) => HTMLElement) | undefined;
+    /**
+     * Si se pasa overrideStyles, será invocado con el nodo actual de
+     * AutoEllipsis para tomar decisiones acerca de cuáles estilos serán
+     * aplicados.
+     */
+    overrideStyles?: ((currentElement: HTMLElement) => Partial<CSSStyleDeclaration>) | undefined;
+}) => React$1.JSX.Element;
+
+interface IMakeResponsiveComponent<P extends Record<string, unknown>> {
+    breakPoints: number[];
+    Component: FunctionComponent<P & {
+        breakPoint: number;
+        breakPointWidth: number;
+        containerWidth: number;
+    }>;
+    /**
+     * Este HOC hace un setState cada vez que cambia el ancho del contenedor. Hay
+     * situaciones en las que es deseable agregar un debounce a este
+     * comportamiento para mejorar la performance. *Por defecto usa 100*
+     */
+    debounce?: number;
+    /**
+     * Por defecto usa 4.
+     */
+    defaultBreakpoint?: number;
+}
+interface IResponsiveComponent<P> extends FC<P> {
+    setBreakpoints: {
+        current: (breakPoints: number[]) => void;
+    };
+}
+/**
+ * El método makeResponsiveComponent agrega un wrapper alrededor de un
+ * componente para conocer el ancho del contenedor del mismo. De esta forma, es
+ * fácil predecir qué ancho dispone el mismo para renderizarse y de esa forma
+ * poder tomar decisiones de responsividad que no dependen del ancho de la
+ * pantalla sino del espacio donde se encuentra.
+ */
+declare const makeResponsiveComponent: <P extends Record<string, unknown>>({ breakPoints, Component, defaultBreakpoint, }: IMakeResponsiveComponent<P>) => IResponsiveComponent<P & {
+    breakPoints?: number[] | undefined;
+}>;
+
+/**
+ * Type-ahead is a behavior pattern which helps the user in the lists and trees
+ * (and literally says: "especially those with more than seven options")
+ * navigation. The literal description in Wai-Aria documentation is:
+ *
+ * - Type a character: focus moves to the next item with a name that starts
+ * with the typed character.
+ *
+ * - Type multiple characters in rapid succession:
+ * focus moves to the next item with a name that starts with the string of
+ * characters typed.
+ *
+ * It is a little arbitrary what is rapid succession. As I couln't find any
+ * documentation about what rapid succession means, I will make some tests in
+ * order to determine what is more comfortable to accomplish one situation or
+ * the other.
+ *
+ * To callibrate this function it is suficient to override the frequency
+ * parameter, which after some tests I understand is best at 2.5 (keys per
+ * second).
+ */
+
+declare class WaiTypeAhead extends EventEmitter<{
+    multipleKeys: string;
+    singleKey: string;
+    typeUpdate: string;
+}> {
+    #private;
+    frequency: number;
+    timeout: number;
+    typing: string;
+    constructor(props?: {
+        onMultipleKeys?: (value: string) => unknown;
+        onSingleKey?: (value: string) => unknown;
+        onTypeUpdate?: (value: string) => unknown;
+    });
+    type(ev: KeyboardEvent): void;
+}
+
+type TIcon<P = Record<string, unknown>> = {
+    /**
+     * Permite el pasaje de propoiedades arbitrarias a cada nodo. Se podría usar
+     * por ejemplo para almacenar la url que debe ser llamada cuando se hace doble
+     * click en un ícono.
+     */
+    additionalProps?: P;
+    /**
+     * Se pide un ariaLabel como requerido por motivos de accesibilidad.
+     */
+    ariaLabel: string;
+    /**
+     * Permite el pasaje de clases arbitrarias a cada ícono.
+     */
+    className?: string;
+    id: TId$1;
+    icon?: TIconName | TIconType;
+    imageUrl?: string;
+    /**
+     * Es el texto que se mostrará debajo de la imagen.
+     */
+    label: string;
+    /**
+     * Permite modificar el color individual de un ícono.
+     */
+    textColor?: string;
+};
+type TIconsList<P = Record<string, unknown>> = {
+    /**
+     * Listado de íconos
+     */
+    icons: TIcon<P>[];
+    iconRenderer?: TIconRenderer<P>;
+    /**
+     * Por defecto se usa iconWidth=100.
+     *
+     * El iconSize indica el ancho del contenedor del ícono.
+     */
+    iconWidth?: number;
+    /**
+     * Si bien el gap horizontal es calculado automáticamente, es posible
+     * especificar cuál es el mínimo gap que debe mostrarse. *Por defecto se usará
+     * 30*
+     */
+    minHorizontalGap?: number;
+    /**
+     * Este callback es llamado cuando se hace click en un ícono
+     */
+    onIconClick?: (ev: MouseEvent$1<HTMLElement>, icon: TIcon<P>) => unknown;
+    /**
+     * Este callback es llamado cuando se hace doble click en un ícono
+     */
+    onIconDoubleClick?: (ev: MouseEvent$1<HTMLElement>, icon: TIcon<P>) => unknown;
+    /**
+     * Este método se usa para obtener detalles de un ícono. Es llamado cuando se
+     * hace foco o cuando se posiciona el mouse en un ícono. Si no está declarado
+     * los íconos no mostrarán detalles. Si está declarado deberá devolver un
+     *
+     * Record<string, ReactNode> y cada entrada será mostrada como una fila de
+     * detalle.
+     */
+    onIconGetDetails?: (icon: TIcon<P>) => ReactNode;
+    /**
+     * Permite agregar comportamiento personalizado a los eventos de teclado.
+     */
+    onIconKeyDown?: (ev: KeyboardEvent<HTMLElement>, icon: TIcon<P>) => unknown;
+    /**
+     * Normalmente el listado coloca padding horizontal para distribuir
+     * uniformemente los íconos, de forma que la distancia entre ellos sea la
+     * misma que la existente en la izquierda y derecha. Si se pasa esta
+     * propiedad, el primer y úlitmo ícono estarán colocados sobre los bordes y el
+     * espacio restante se distribuirá entre los gaps existnetes
+     */
+    removeHorizontalPadding?: boolean;
+    /**
+     * El espaciado horizontal se calcula automáticamente, sin embargo si es
+     * posible definir el vertical. Por defecto se usa 0.
+     */
+    verticalGap?: number;
+};
+/**
+ * Por defecto se usa DefaultIconRenderer. El pasaje de un nuevo IconRenderer
+ * permite modificar la forma en que se distribuyen en pantalla los distintos
+ * atributos de cada ícono.
+ *
+ * Una particularidad es cómo se definen los estilos cuando el ícono está en
+ * foco: Se usa el selector **'.iconsList__keyHandler:focus .focused
+ * .iconsList__icon__wrapper'**, que es donde se aplican los estilos
+ * correspondientes al foco.
+ */
+type TIconRenderer<P = Record<string, unknown>> = FunctionComponent<TIcon<P>>;
+
+declare const DefaultIconRenderer: React$1.NamedExoticComponent<TIcon<Record<string, unknown>>>;
+
+declare const IconsList: {
+    <P extends Record<string, unknown>>(props: TIconsList<P>, ref: ForwardedRef<HTMLDivElement>): React$1.JSX.Element;
+    displayName: string;
+};
+
+/**
+ * Permite importar un componente en forma dinámica con ruta relativa a
+ * /customComponents
+ */
+declare function importComponent<T = unknown>(path: string): React$1.LazyExoticComponent<ComponentType<T>>;
+
+type TClickListener = () => unknown;
+type TItemState = Pick<TToolbarIconButton, 'disabled' | 'toggled' | 'isLoading'>;
+declare class ToolbarController extends EventEmitter<{
+    pressEnter: string;
+    updateItemState: string;
+}> {
+    eventListeners: Record<string, TClickListener[]>;
+    itemsState: Record<string, TItemState>;
+    hooks: {
+        useItemState: (id: string, initialState: TItemState) => TItemState;
+    };
+    setItemState: (id: string, newState: Partial<TItemState>) => void;
+    Context: ({ children }: {
+        children: ReactNode;
+    }) => React$1.JSX.Element;
+}
+
+type TToolEventState = {
+    isLoading: boolean;
+    isToggled: boolean;
+};
+type TToolbarIconButton = {
+    action: (props: TToolEventState, controller: ToolbarController) => unknown;
+    actionSource?: 'click' | 'mousedown';
+    /**
+     * Si se pasa allowToggle y no se pasa toggled ( ni en true ni en false ),
+     * entonces el estado de toggle será controlado internamente en el toolbar
+     */
+    allowToggle?: boolean;
+    /**
+     * Si se desea usar defaultToggled, debería pasarse también allowToggle
+     */
+    defaultToggled?: boolean;
+    disabled?: boolean;
+    icon: TIconType | TIconName;
+    iconSize?: 'Xs' | 'Sm' | 'Md' | 'Lg' | 'Xl' | undefined;
+    id: string;
+    isLoading?: boolean;
+    title: string;
+    /**
+     * Siempre que se pase toggled, no importa si en true o en false, el
+     * usuario del toolbar deberá mantener la lógica de persistencia del
+     * toggle
+     */
+    toggled?: boolean;
+};
+type TToolInput = {
+    inputProps?: InputProps;
+    label?: string;
+};
+
+declare const ToolbarTextButton: (props: ISimpleButton) => React$1.JSX.Element;
+
+declare const ToolbarIconButton: ({ id, action, actionSource, allowToggle, defaultToggled, disabled, icon, iconSize, isLoading: outerIsLoading, title, toggled: toggledProp, }: TToolbarIconButton) => React$1.JSX.Element;
+
+declare const ToolbarInput: (tool: TToolInput) => React$1.JSX.Element;
+
+declare const ToolbarSeparator: () => React$1.JSX.Element;
+
+declare const ToolbarSelect: (props: SelectProps) => React$1.JSX.Element;
+
+declare const Toolbar: ({ children, getController, }: {
+    children: ReactNode;
+    /**
+     * El controlador permite gestionar el estado de los distintos elementos de
+     * la toolbar
+     */
+    getController?: ((newController: ToolbarController) => unknown) | undefined;
+}) => React$1.JSX.Element;
+
+type TSortableListItem = {
+    additionalProps?: any;
+    boxProps?: Omit<BoxProps, 'id'>;
+    id: string;
+    children: ReactNode;
+};
+declare const SortableListItem: React$1.MemoExoticComponent<({ boxProps, id, children }: TSortableListItem) => React$1.JSX.Element>;
+
+declare const UnstyledSortableList: ({ boxProps, children, onSortChange, }: {
+    boxProps?: BoxProps | undefined;
+    children: ReactNode;
+    onSortChange?: ((items: ReactElement<TSortableListItem>[]) => unknown) | undefined;
+}) => React$1.JSX.Element;
+declare const SortableList: ((props: {
+    boxProps?: BoxProps | undefined;
+    children: ReactNode;
+    onSortChange?: ((items: ReactElement<TSortableListItem>[]) => unknown) | undefined;
+}) => React$1.JSX.Element) & {
+    displayName: string;
+};
+
+export { Accordion, AccordionContext, AccordionItem, AccordionItemButton, AccordionItemContent, AccordionItemContext, AlertModal, ApiaFilter, ApiaUtil, ApiaUtilModalHandler, ApiaUtilTooltip, AutoEllipsis, Autocomplete, type AutocompleteCmpProps, AutocompleteController, type AutocompleteOption, type AutocompleteProps, BaseButton, CalendarModal, Captcha, Checkbox, CollapsiblePanel, Confirm, ConfirmModal, ContainerWithHeader, DateInput, DefaultAccordionItemButton, DefaultIconRenderer, DefaultTabsLabelRenderer, DialogButtonBar, FieldErrorMessage, FieldLabel, type IAccordionItemButton, type IAccordionItemProps, type IAccordionProps, type IAlert, type IApiaFilter, type ICalendarModal, type IConfirm, type IDialogButtonBar, type IDialogHeader, type IField, type IFieldErrorMessage, type IIconInput, type IOverlay, type IRequiredMark, type IResponsiveComponent, type ISimpleButton, IconButton, IconInput, IconsList, LabelBox, LinearLoader, Listbox, ListboxItem, LoaderSpinner, Modal, NumberInput, Overlay, ProgressBar, RequiredMark, ScreenLocker, SimpleButton, SortableList, SortableListItem, type TAccordionHandler, type TAccordionItemButton, type TApiaButtonType, type TApiaIconButton, type TCheckbox, type TDateProps, type TFieldLabel, type TGetTabsController, type TIcon, type TIconButton, type TIconRenderer, type TIconSize, type TIconsList, type TListbox, type TMenuItem, type TModal, type TModalSize, type TNumberInput, type TNumberInputChangeEvent, type TOnClickNode, type TOnConfirmSelection, type TOnSelectionChange, type TOpenModal, type TSubmenu, type TTab, type TTabLabelRenderer as TTabRenderer, type TToolbarIconButton as TToolDefinition, type TTooltip, type TUseModalConfiguration, Tab, Tabs, TabsContent, TabsController, TabsList, Toolbar, ToolbarController, ToolbarIconButton, ToolbarInput, ToolbarSelect, ToolbarSeparator, ToolbarTextButton, UnstyledSortableList, WaiTypeAhead, getFieldErrorStyles, getFieldTouchedStyles, importComponent, makeResponsiveComponent, parseNumberInputValueToNumber, parseNumberValueToNumberInput, useAccordionContext, useModal, useModalContext, useOtherTagButton };
 //# sourceMappingURL=index.d.ts.map