@apia/components 4.0.27 → 4.0.29

package/dist/index.js

@@ -1,13 +1,13 @@
 import { jsx, Fragment, jsxs } from '@apia/theme/jsx-runtime';
 import * as React from 'react';
-import React__default, { createContext, useContext, useEffect, useMemo, useState, useCallback, useRef, forwardRef, Fragment as Fragment$1, useDeferredValue, lazy, Suspense, useTransition, Children, memo, isValidElement, cloneElement } from 'react';
+import React__default, { createContext, useContext, useEffect, useMemo, useState, useCallback, useRef, forwardRef, Fragment as Fragment$1, useDeferredValue, lazy, Suspense, useTransition, Children, memo, isValidElement, cloneElement, createRef } from 'react';
 import parse, { domToReact, Element } from 'html-react-parser';
 import { Spinner as Spinner$1, Box as Box$1 } from 'theme-ui';
 import { uniqueId as uniqueId$3, debounce, cloneDeep, isFunction } from 'lodash-es';
-import { Box, getVariant, useBreakpointIndex, Close, responsive, spacing, Heading, Link, Button, Spinner, createElement, Select, Input, Flex, IconButton as IconButton$1, Image, injectStyles, Progress, Label, Paragraph, Container, Form, focusOutline, makeStyledComponent, useThemeUI, Grid, Textarea } from '@apia/theme';
+import { Box, getVariant, useBreakpointIndex, Close, responsive, spacing, Heading, Link, Button, Spinner, createElement, Select, Input, Flex, IconButton as IconButton$1, Image, injectStyles, Progress, Label as Label$1, Paragraph, Container, Form, focusOutline, makeStyledComponent, useThemeUI, Grid, Textarea } from '@apia/theme';
 import { BarLoader } from 'react-spinners';
 import uniqueId$2 from 'lodash-es/uniqueId';
-import { findScrollContainer, useUpdateEffect, focus, focusSelector, getFocusSelector, addBoundary, useCombinedRefs, usePrevious, EventEmitter, useMount, getLabel, getSpecificParent, customEvents, isChild, useUnmount, StatefulEmitter, shallowEqual as shallowEqual$1, getDateFormat, uniqueId as uniqueId$4, AudioRecorder, persistentStorage, disableChildrenFocus, enableChildrenFocus, decodeHTMLEntities, useDebouncedCallback, getIndex, noNaN, useLatest, useSubscription, arrayOrArray } from '@apia/util';
+import { findScrollContainer, useUpdateEffect, focus, focusSelector, getFocusSelector, addBoundary, useCombinedRefs, usePrevious, EventEmitter, useMount, getLabel, getSpecificParent, customEvents, isChild, useUnmount, StatefulEmitter, shallowEqual as shallowEqual$1, getDateFormat, uniqueId as uniqueId$4, AudioRecorder, persistentStorage, disableChildrenFocus, enableChildrenFocus, decodeHTMLEntities, useDebouncedCallback, getIndex, noNaN, useLatest, useSubscription, useMatchScrollDirection, arrayOrArray } from '@apia/util';
 import usePortal from 'react-cool-portal';
 import { CSSTransition } from 'react-transition-group';
 import { uniqueId as uniqueId$1, defaultNotifier, NotificationsList } from '@apia/notifications';
@@ -19,8 +19,8 @@ import { isIconName, Icon as Icon$1, icons, FileIcon } from '@apia/icons';
 import { useMenuState, ControlledMenu, MenuItem, MenuDivider, SubMenu } from '@szhsin/react-menu';
 import { shallowEqual } from '@apia/store';
 import AnimateHeight from 'react-animate-height';
-import { useUpdateEffect as useUpdateEffect$1 } from 'ahooks';
-import { FaCalendarAlt } from '@meronex/icons/fa';
+import { useUpdateEffect as useUpdateEffect$1, useScroll } from 'ahooks';
+import { FaCalendarAlt, FaBars } from '@meronex/icons/fa';
 import dayjs from 'dayjs';
 import Calendar from 'react-calendar';
 import ReactInputMask from 'react-input-mask';
@@ -2135,6 +2135,9 @@ class TabsController {
   remove(tabId) {
     this.state.openTabsHistory.delete(this.state.tabs.get(tabId));
     this.state.tabs.delete(tabId);
+    if (this.state.openTabsHistory.size === 0 && this.state.showAtLeastOneTab) {
+      this.tabsList[0]?.open();
+    }
   }
   async toggleTab(tabId, isShown) {
     const willBeOpen = isShown || !this.getTab(tabId)?.state.isOpen;
@@ -6385,7 +6388,7 @@ const FileAttachment = observer(
           children: [
             /* @__PURE__ */ jsx("h1", { children: attachment.name }),
             /* @__PURE__ */ jsx("img", { src: attachment.base64 }),
-            attachment.description && /* @__PURE__ */ jsx(Label, { children: attachment.description })
+            attachment.description && /* @__PURE__ */ jsx(Label$1, { children: attachment.description })
           ]
         }
       )
@@ -6684,7 +6687,7 @@ const TagReplacers = {
   h5: (props) => /* @__PURE__ */ jsx(Heading, { as: "h5", ...props }),
   h6: (props) => /* @__PURE__ */ jsx(Heading, { as: "h6", ...props }),
   img: Image,
-  label: Label,
+  label: Label$1,
   input: Input,
   p: Paragraph,
   select: Select
@@ -8944,7 +8947,7 @@ const ProgressBar = ({
 }) => {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
-      Label,
+      Label$1,
       {
         htmlFor: id,
         sx: {
@@ -10127,9 +10130,322 @@ const SortableList = makeStyledComponent(
   UnstyledSortableList
 );
 
+const NoMemoPagination = ({
+  appliedFilters,
+  areAllFiltersApplied,
+  className,
+  currentPage,
+  disabled,
+  disableReduced,
+  hasMore,
+  hideInfo,
+  hideMaximizeButton,
+  hideRefreshButton,
+  isLoading,
+  isPerforming,
+  onDeleteFilters,
+  onPageChange,
+  onRefresh,
+  pageCount,
+  recordsCount: outerRecordsCount,
+  reachedMax,
+  showMaximizeOnSmallBreakpoints,
+  variant = "primary",
+  isMaximized,
+  onMaximize
+}) => {
+  const numberPageCount = Number(pageCount);
+  const breakPoint = useBreakpointIndex();
+  const numberCurrentPage = Number(currentPage);
+  const recordsCount = outerRecordsCount;
+  const [internCurrentPage, setCurrentPage] = useState(
+    numberCurrentPage ?? 1
+  );
+  const [lastEmittedPage, setLastEmittedPage] = useState(
+    numberCurrentPage ?? 1
+  );
+  const [hasNoValue, setHasNoValue] = useState(false);
+  useEffect(() => {
+    setCurrentPage(numberCurrentPage);
+  }, [numberCurrentPage]);
+  const setCurrentAndDispatch = useCallback(
+    (page) => {
+      setCurrentPage(page);
+      onPageChange(page);
+      setLastEmittedPage(page);
+    },
+    [onPageChange]
+  );
+  const InputRef = createRef();
+  const options = [];
+  for (let i = 1; i <= numberPageCount; i++) {
+    options.push(i);
+  }
+  const [infoButtonRef, setInfoButtonRef] = React__default.useState(
+    null
+  );
+  const recordsCountLabel = `${window.GNR_TOT_RECORDS}: ${recordsCount}`;
+  const tooltipProps = React__default.useMemo(
+    () => ({
+      text: breakPoint <= 3 ? `${recordsCountLabel}.${!reachedMax && !hasMore ? "" : reachedMax && window.GNR_TOT_RECORDS_REACHED || hasMore && window.QUERY_MORE_DATA}` : `${!reachedMax && !hasMore ? "" : reachedMax && window.GNR_TOT_RECORDS_REACHED || hasMore && window.QUERY_MORE_DATA}`,
+      attachToElement: { current: infoButtonRef },
+      closeOnClickOut: true
+      // closeOnClickOutChecker(element) {
+      //   return !getSpecificParent(element, (current) =>
+      //     current.classList.contains('pagination__information'),
+      //   );
+      // },
+    }),
+    [breakPoint, hasMore, infoButtonRef, reachedMax, recordsCountLabel]
+  );
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      as: "nav",
+      variant: `layout.common.components.pagination.${variant}`,
+      "aria-label": getLabel("lblQryParamPag").text,
+      className: `pagination ${numberPageCount <= 1 && !disableReduced ? "onlyRefresh" : ""} ${className ?? ""}`,
+      children: [
+        /* @__PURE__ */ jsxs(Box, { className: "pagination__leftToolbar", children: [
+          !hideMaximizeButton && (showMaximizeOnSmallBreakpoints || breakPoint > 4) && /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              variant: "icon",
+              className: "pagination__fullScreenButton",
+              onClick: onMaximize,
+              icon: !isMaximized ? "Maximize" : "Minimize",
+              title: !isMaximized ? window.LBL_MAXIMIZE : window.LBL_MINIMIZE,
+              "aria-label": !isMaximized ? window.LBL_MAXIMIZE : window.LBL_MINIMIZE,
+              iconSize: "Md"
+            }
+          ),
+          !hideInfo && /* @__PURE__ */ jsxs(Fragment, { children: [
+            ((reachedMax || hasMore) && breakPoint > 3 || breakPoint <= 3) && className !== "grid__pagination" ? /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                variant: "icon-primary",
+                icon: "Info",
+                className: `pagination__information ${reachedMax || hasMore ? "pagination__alertInfo" : ""}`,
+                onClick: () => ApiaUtil.instance.tooltips.open(tooltipProps),
+                ref: setInfoButtonRef,
+                iconSize: "Md",
+                "aria-label": window.BTN_FILE_INFO_TOOLTIP,
+                title: window.BTN_FILE_INFO_TOOLTIP
+              }
+            ) : "",
+            breakPoint > 3 && /* @__PURE__ */ jsx(
+              Box,
+              {
+                as: "span",
+                className: "recordsCounter pagination__deleteLabels",
+                title: recordsCountLabel,
+                children: recordsCount !== -1 && `${window.GNR_TOT_RECORDS}: ${recordsCount} `
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(Box, { className: "pagination__controls", children: (numberPageCount > 0 || disableReduced) && /* @__PURE__ */ jsxs(Fragment, { children: [
+          breakPoint > 2 && /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              variant: "icon-primary",
+              disabled: disabled || internCurrentPage === 1 || isLoading || isPerforming,
+              "aria-label": window.NAV_FIRST_PAGE,
+              type: "button",
+              onClick: () => {
+                setCurrentAndDispatch(1);
+              },
+              icon: "First",
+              iconSize: "Sm"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              variant: "icon-primary",
+              disabled: disabled || internCurrentPage <= 1 || isLoading || isPerforming,
+              "aria-label": window.NAV_PREVIOUS_PAGE,
+              type: "button",
+              onClick: () => {
+                setCurrentAndDispatch(internCurrentPage - 1);
+              },
+              icon: "Previous",
+              iconSize: "Sm"
+            }
+          ),
+          breakPoint > 2 && /* @__PURE__ */ jsxs(Box, { className: "input", children: [
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                className: "pagination__controls__input",
+                "aria-label": window.NAV_INPUT_LABEL,
+                title: `${window.PAGE}: ${internCurrentPage} `,
+                ref: InputRef,
+                value: hasNoValue ? "" : internCurrentPage,
+                onKeyDown: (ev) => {
+                  const regex = /([0-9])|(Backspace)|(Tab)/;
+                  if (!ev.key.match(regex)) {
+                    ev.stopPropagation();
+                    ev.preventDefault();
+                  }
+                  if (ev.key === "Enter") {
+                    ev.stopPropagation();
+                    ev.preventDefault();
+                    setCurrentAndDispatch(internCurrentPage);
+                  }
+                },
+                onBlur: () => {
+                  if (lastEmittedPage !== internCurrentPage) {
+                    setCurrentAndDispatch(internCurrentPage);
+                  }
+                },
+                onFocus: (ev) => {
+                  ev.currentTarget.select();
+                },
+                onChange: (ev) => {
+                  setHasNoValue(ev.target.value === "");
+                  setCurrentPage(
+                    Math.max(
+                      1,
+                      Math.min(
+                        noNaN(Number(ev.currentTarget.value)),
+                        pageCount
+                      )
+                    )
+                  );
+                },
+                disabled: disabled || isLoading || isPerforming
+              }
+            ),
+            " ",
+            "/",
+            " ",
+            /* @__PURE__ */ jsx(
+              Box,
+              {
+                as: "span",
+                title: recordsCount !== -1 ? `${window.GNR_TOT_RECORDS} ${recordsCount}` : window.NAV_INPUT_LABEL,
+                children: pageCount
+              }
+            )
+          ] }),
+          breakPoint <= 2 && /* @__PURE__ */ jsxs(
+            Select,
+            {
+              className: "pagination__selectPage",
+              value: internCurrentPage,
+              onChange: (e) => {
+                setCurrentAndDispatch(Number(e.target.value));
+              },
+              children: [
+                /* @__PURE__ */ jsxs("option", { disabled: true, children: [
+                  "Total: ",
+                  numberPageCount
+                ] }),
+                options.map((current) => {
+                  return /* @__PURE__ */ jsx("option", { children: current }, current);
+                })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              variant: "icon-primary",
+              disabled: disabled || internCurrentPage >= numberPageCount || isLoading || isPerforming,
+              "aria-label": window.NAV_NEXT_PAGE,
+              type: "button",
+              onClick: () => {
+                setCurrentAndDispatch(internCurrentPage + 1);
+              },
+              icon: "Next",
+              iconSize: "Sm"
+            }
+          ),
+          breakPoint > 2 && /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              variant: "icon-primary",
+              type: "button",
+              "aria-label": window.NAV_LAST_PAGE,
+              disabled: disabled || internCurrentPage >= numberPageCount || isLoading || isPerforming,
+              onClick: () => {
+                setCurrentAndDispatch(numberPageCount);
+              },
+              icon: "Last",
+              iconSize: "Sm"
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ jsx(Box, { className: "pagination__rightToolbar", children: (!hideRefreshButton || onDeleteFilters) && /* @__PURE__ */ jsxs(Fragment, { children: [
+          onDeleteFilters && /* @__PURE__ */ jsxs(
+            SimpleButton,
+            {
+              disabled: isPerforming,
+              className: "pagination__deleteFiltersButton",
+              onClick: onDeleteFilters,
+              children: [
+                breakPoint > 3 && /* @__PURE__ */ jsx(Box, { as: "span", className: "pagination__deleteLabels", children: window.BTN_DELETE_FILTERS }),
+                /* @__PURE__ */ jsx(
+                  Box,
+                  {
+                    as: "span",
+                    className: `pagination__appliedFiltersLabel ${areAllFiltersApplied ? "" : "withFilters"}`,
+                    children: appliedFilters
+                  }
+                )
+              ]
+            }
+          ),
+          !hideRefreshButton && /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              "aria-label": window.NAV_REFRESH,
+              onClick: () => onRefresh(numberCurrentPage),
+              icon: "Refresh",
+              iconSize: "Md",
+              disabled: disabled || isLoading,
+              variant: "icon-primary",
+              isLoading: isPerforming,
+              className: "pagiantion__refreshIcon"
+            }
+          )
+        ] }) })
+      ]
+    }
+  );
+};
+const Pagination = React__default.memo(NoMemoPagination);
+
+const AsidePanel = ({
+  title,
+  toolTip,
+  children,
+  columns = 2,
+  spacer,
+  className
+}) => {
+  const contentSx = React.useMemo(
+    () => ({
+      gridTemplateColumns: `${Array(columns).fill("1fr").join(" ")} `
+    }),
+    [columns]
+  );
+  return /* @__PURE__ */ jsxs(Box, { as: "fieldset", className: `asidePanel ${className ?? ""}`, children: [
+    title && /* @__PURE__ */ jsx("legend", { title: toolTip, children: title }),
+    spacer !== false && /* @__PURE__ */ jsx(Box, { className: "spacer" }),
+    /* @__PURE__ */ jsx(Box, { className: "asidePanel__content", sx: contentSx, children })
+  ] });
+};
+
 function isFavoriteIcon() {
   return typeof window.functionId !== "undefined" || !!window.helpUrl;
 }
+const FavoriteIcon = () => {
+  return /* @__PURE__ */ jsx(IconButton, { icon: "Star" });
+};
+
+const Label = ({ variant, ...props }) => /* @__PURE__ */ jsx(Label$1, { sx: { variant }, ...props });
 
 var __accessCheck = (obj, member, msg) => {
   if (!member.has(obj))
@@ -10162,7 +10478,7 @@ class MenuController extends EventEmitter {
     __privateAdd(this, _menues, []);
   }
   on(eventName, fn) {
-    this.on(eventName, fn);
+    super.on(eventName, fn);
     const currentMenu = __privateGet(this, _menues).find(
       (current) => current.stage === __privateGet(this, _currentStage)
     )?.menu;
@@ -10217,6 +10533,319 @@ function useMenu(breakPoints, initialMenu) {
   return menu;
 }
 
+const FooterButtons = (props) => {
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(Box, { ...props }) });
+};
+
+const AccordionAside = () => {
+  const children = useMenu([1, 2, 3]);
+  return children;
+};
+
+const Aside = () => {
+  const children = useMenu([5, 6, 7]);
+  return /* @__PURE__ */ jsx(Fragment, { children });
+};
+
+const AsideLoader = (definition) => {
+  React__default.useEffect(() => {
+    const variant = definition.variant ?? "twoColumnsAside";
+    const unregister = menuController.setMenu({
+      menu: /* @__PURE__ */ jsx(Box, { className: "ApplicationMenu", variant: `layout.${variant}`, children: definition.menu ?? definition.children }),
+      stage: definition.stage ?? uniqueId$3()
+    });
+    return () => {
+      unregister();
+    };
+  }, [
+    definition.children,
+    definition.menu,
+    definition.stage,
+    definition.variant
+  ]);
+  return null;
+};
+
+const BodyAside = () => {
+  const children = useMenu([1, 2, 3]);
+  return children;
+};
+
+const FloatingAside = () => {
+  const isScrollingUp = useMatchScrollDirection("up");
+  const [hasScrolledEnough, setHasScrolledEnough] = React__default.useState(false);
+  useScroll(document, ({ top }) => {
+    const menu = document.getElementById("BodyAside");
+    if (!menu)
+      return false;
+    let computedStyle = 0;
+    if (window.getComputedStyle(menu).paddingTop.match(/\d+/)) {
+      computedStyle = Number(
+        window.getComputedStyle(menu).paddingTop.match(/\d+/)[0]
+      ) + Number(
+        window.getComputedStyle(menu).paddingBottom.match(/\d+/)[0]
+      );
+    }
+    const boxTop = menu.offsetHeight + menu.offsetTop + computedStyle;
+    if (hasScrolledEnough !== boxTop < top)
+      setHasScrolledEnough(boxTop < top);
+    return false;
+  });
+  const children = useMenu([1, 2, 3]);
+  const { Portal } = usePortal({
+    containerId: "NonControlledAppModals",
+    clickOutsideToHide: false,
+    autoRemoveContainer: false,
+    defaultShow: true,
+    escToHide: false
+  });
+  if (!children)
+    return null;
+  return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(
+    Box,
+    {
+      ...getVariant("layout.twoColumnsAside.floatingResponsive"),
+      className: isScrollingUp && hasScrolledEnough ? "" : "hidden",
+      children: /* @__PURE__ */ jsx(
+        AccordionItem,
+        {
+          defaultExpanded: false,
+          buttonProps: {
+            label: getLabel("lblMnuOpc").text,
+            ariaLabel: getLabel("lblMnuOpc").title
+          },
+          id: "floatingMenuAccordion",
+          ...getVariant("tabPrimary"),
+          children: isScrollingUp && hasScrolledEnough && children
+        }
+      )
+    }
+  ) });
+};
+
+const FooterResponsiveButtons = ({
+  breakpoint = 4,
+  children,
+  className
+}) => {
+  const { Portal } = usePortal({
+    containerId: "NonControlledAppModals",
+    clickOutsideToHide: false,
+    autoRemoveContainer: false,
+    defaultShow: true,
+    escToHide: false
+  });
+  const appBreakpoint = useBreakpointIndex();
+  const shouldShow = useMatchScrollDirection("down") && breakpoint >= appBreakpoint;
+  if (Array.isArray(children) && children.length === 0)
+    return null;
+  return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(
+    Box,
+    {
+      as: "aside",
+      ...getVariant("layout.footerResponsiveButtons"),
+      className: `${className ?? ""} ${shouldShow ? "visible" : "hidden"}`,
+      children
+    }
+  ) });
+};
+
+const HamburguerMenu = ({
+  container = ".TitleContainer",
+  header = "MainHeader",
+  forceVisibility
+}) => {
+  const [hamburguerRef, setHamburguerRef] = React__default.useState(
+    null
+  );
+  const [menuRef, setMenuRef] = React__default.useState(null);
+  const [menuCoords, setMenuCoords] = React__default.useState(void 0);
+  const [hamburguerCoords, setHamburguerCoords] = React__default.useState(null);
+  const { Portal } = usePortal({
+    containerId: "NonControlledAppModals",
+    autoRemoveContainer: false,
+    defaultShow: true,
+    clickOutsideToHide: false,
+    escToHide: false
+  });
+  React__default.useLayoutEffect(() => {
+    const unsuscribers = [];
+    if (hamburguerRef) {
+      const resize = () => {
+        const bounding = document.querySelector(container).getBoundingClientRect();
+        if (!hamburguerRef || bounding.height === 0)
+          return;
+        const hamburguerHeight = Number(
+          hamburguerRef.querySelector(".hamburguerIcon").clientHeight
+        );
+        const hamburguerTop = bounding.top + bounding.height / 2 - hamburguerHeight / 2 + window.scrollY;
+        const shouldOpenBelow = bounding.top <= window.innerHeight / 3;
+        const menuTop = shouldOpenBelow ? hamburguerTop + hamburguerHeight + 10 : 10;
+        const menuRight = shouldOpenBelow ? 10 : 60;
+        const maxHeight = shouldOpenBelow ? window.innerHeight - menuTop - 50 : window.innerHeight - 50;
+        setMenuCoords({
+          right: `${menuRight}px`,
+          top: `${menuTop}px`,
+          maxHeight: `${maxHeight}px`,
+          overflow: "auto"
+        });
+        setHamburguerCoords({
+          right: `${10}px`,
+          top: `${hamburguerTop}px`
+        });
+      };
+      const observer = new ResizeObserver(resize);
+      observer.observe(document.getElementById(header));
+      unsuscribers.push(() => void observer.disconnect());
+      resize();
+    }
+    return () => unsuscribers.forEach((unsuscribe) => unsuscribe());
+  }, [container, hamburguerRef, header, menuRef]);
+  const children = useMenu([4, 5, 6, 7]);
+  const iconSx = React__default.useMemo(
+    () => hamburguerCoords ? {
+      position: "fixed",
+      zIndex: "menu",
+      ...hamburguerCoords
+    } : void 0,
+    [hamburguerCoords]
+  );
+  const menuSx = React__default.useMemo(
+    () => menuCoords ? {
+      position: "fixed",
+      zIndex: "menu",
+      ...menuCoords
+    } : void 0,
+    [menuCoords]
+  );
+  const breakpoint = useBreakpointIndex({ defaultIndex: 5 });
+  const [isVisible, setIsVisible] = useState(false);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        id: "HamburguerIconWrapper",
+        className: "HamburguerIconWrapper",
+        ref: setHamburguerRef,
+        as: "aside",
+        "aria-label": window.LBL_OPTIONS_VAR,
+        children: /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            sx: iconSx,
+            icon: "Hamburguer",
+            className: "hamburguerIcon",
+            onClick: () => setIsVisible((s) => !s),
+            "aria-label": window.LBL_OPEN_MENU
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
+      CSSTransition,
+      {
+        in: isVisible,
+        timeout: 150,
+        classNames: "hamburguerMenu",
+        children: /* @__PURE__ */ jsx(
+          Box,
+          {
+            ref: setMenuRef,
+            ...getVariant("layout.twoColumnsAside.hamburguerMenu"),
+            className: "hamburguerMenu",
+            sx: menuSx,
+            as: "aside",
+            "aria-label": window.LBL_OPTIONS_AND_TABS,
+            children: (breakpoint === 4 || forceVisibility) && children
+          }
+        )
+      }
+    ) }) })
+  ] });
+};
+
+const HeaderButtons = () => {
+  const breakPoint = useBreakpointIndex();
+  const shouldShowAsFloat = breakPoint === 3;
+  const { Portal: FloatPortal } = usePortal({
+    containerId: "NonControlledAppModals",
+    clickOutsideToHide: false,
+    autoRemoveContainer: false,
+    defaultShow: true,
+    escToHide: false
+  });
+  return /* @__PURE__ */ jsxs(Box, { className: "iconsBar", children: [
+    breakPoint >= 4 && /* @__PURE__ */ jsx(FavoriteIcon, {}),
+    shouldShowAsFloat && /* @__PURE__ */ jsx(FloatPortal, { children: /* @__PURE__ */ jsx(Box, { ...getVariant("layout.twoColumnsAside.hamburguer"), children: /* @__PURE__ */ jsx(
+      IconButton$1,
+      {
+        title: window.TOGGLE_MENU,
+        "aria-label": window.TOGGLE_MENU,
+        onClick: (ev) => {
+          ev.stopPropagation();
+        },
+        className: "toggleMenu",
+        children: /* @__PURE__ */ jsx(FaBars, {})
+      }
+    ) }) })
+  ] });
+};
+
+const Header = ({ title, description, image: imageUrl }) => {
+  return /* @__PURE__ */ jsxs("header", { children: [
+    /* @__PURE__ */ jsxs(Box, { className: "imageTitleAndDescription", children: [
+      /* @__PURE__ */ jsx(Box, { className: "image", children: /* @__PURE__ */ jsx(Image, { src: imageUrl ?? "", role: "presentation", alt: "" }) }),
+      /* @__PURE__ */ jsxs(Box, { className: "titleAndDescription", children: [
+        /* @__PURE__ */ jsx(Heading, { ...getVariant("text.title"), as: "h1", children: /* @__PURE__ */ jsx(Box, { as: "span", children: title }) }),
+        /* @__PURE__ */ jsx(Box, { as: "p", className: "description", children: description ?? "" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(HeaderButtons, {})
+  ] });
+};
+
+const ShowResponsive = ({
+  show = [true],
+  children,
+  display = "block"
+}) => {
+  return /* @__PURE__ */ jsx(Box, { sx: { display: show.map((def) => def ? display : "none") }, children });
+};
+
+const CenteredHeaderButtons = () => {
+  const breakpoint = useBreakpointIndex({ defaultIndex: 4 });
+  const { Portal: Portal1 } = usePortal({
+    autoRemoveContainer: false,
+    clickOutsideToHide: false,
+    containerId: "ResponsiveButtons",
+    defaultShow: true,
+    escToHide: false,
+    internalShowHide: true
+  });
+  const { Portal: Portal2 } = usePortal({
+    autoRemoveContainer: false,
+    clickOutsideToHide: false,
+    containerId: "HamburguerIconWrapper",
+    defaultShow: true,
+    escToHide: false,
+    internalShowHide: true
+  });
+  const { Portal: Portal3 } = usePortal({
+    autoRemoveContainer: false,
+    clickOutsideToHide: false,
+    containerId: "RelatedButtonsContainer",
+    defaultShow: true,
+    escToHide: false,
+    internalShowHide: true
+  });
+  const icon = React__default.useMemo(() => /* @__PURE__ */ jsx(FavoriteIcon, {}), []);
+  if (breakpoint < 3)
+    return /* @__PURE__ */ jsx(Portal1, { children: icon });
+  if (breakpoint === 3)
+    return /* @__PURE__ */ jsx(Portal2, { children: icon });
+  return /* @__PURE__ */ jsx(Portal3, { children: icon });
+};
+
 var __defProp$5 = Object.defineProperty;
 var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$5(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField$5 = (obj, key, value) => {
@@ -11283,5 +11912,5 @@ const _FiltersStore = class _FiltersStore {
 __publicField(_FiltersStore, "instance", new _FiltersStore());
 let FiltersStore = _FiltersStore;
 
-export { Accordion, AccordionContext, AccordionItem, AccordionItemButton, AccordionItemContent, AccordionItemContext, AlertModal, ApiaFilter, ApiaUtil, ApiaUtilModalHandler, ApiaUtilTooltip, AutoEllipsis, Autocomplete, AutocompleteController, AutogrowTextarea, AutoscrollContainer, BaseButton, CalendarModal, Captcha, ChatController, ChatMessage, Checkbox$1 as Checkbox, CollapsiblePanel, Confirm, ConfirmModal, ContainerWithHeader, DateInput, DeadSessionModal, DefaultIconRenderer, DefaultTabsLabelRenderer, DialogButtonBar, Dropzone, FieldErrorMessage, FieldLabel, FileCard, FilterConditionDTO, FilterDTO, FiltersStore, FloatingChatController, IconButton, IconInput, IconsList, LabelBox, LinearLoader, ListSkeletonLoader, Listbox, ListboxItem, LoaderSpinner, Modal, NumberInput, Overlay, Parameter, ParameterRender, Parameters, ParametersGroup, ParametersStore, ParametersTable, ProgressBar, RequiredMark, ScreenLocker, SimpleButton, SortableList, SortableListItem, Tab, Tabs, TabsContent, TabsController, TabsList, Templater, Toolbar, ToolbarController, ToolbarIconButton, ToolbarInput, ToolbarSelect, ToolbarSeparator, ToolbarTextButton, UnstyledSortableList, UploadHandler, Uploader, WaiTypeAhead, getBase64FromBlob, getBase64FromFile, getFieldErrorStyles, getFieldTouchedStyles, getFileExtension, importComponent, isFavoriteIcon, isImage, isParametersGroup, makeResponsiveComponent, parseNumberInputValueToNumber, parseNumberValueToNumberInput, useAccordionContext, useCurrentTab, useMenu, useModal, useModalContext, useOtherTagButton, useTabsContext };
+export { Accordion, AccordionAside, AccordionContext, AccordionItem, AccordionItemButton, AccordionItemContent, AccordionItemContext, AlertModal, ApiaFilter, ApiaUtil, ApiaUtilModalHandler, ApiaUtilTooltip, Aside, AsideLoader, AsidePanel, AutoEllipsis, Autocomplete, AutocompleteController, AutogrowTextarea, AutoscrollContainer, BaseButton, BodyAside, CalendarModal, Captcha, CenteredHeaderButtons, ChatController, ChatMessage, Checkbox$1 as Checkbox, CollapsiblePanel, Confirm, ConfirmModal, ContainerWithHeader, DateInput, DeadSessionModal, DefaultIconRenderer, DefaultTabsLabelRenderer, DialogButtonBar, Dropzone, FavoriteIcon, FieldErrorMessage, FieldLabel, FileCard, FilterConditionDTO, FilterDTO, FiltersStore, FloatingAside, FloatingChatController, FooterButtons, FooterResponsiveButtons, HamburguerMenu, Header, HeaderButtons, IconButton, IconInput, IconsList, Label, LabelBox, LinearLoader, ListSkeletonLoader, Listbox, ListboxItem, LoaderSpinner, Modal, NumberInput, Overlay, Pagination, Parameter, ParameterRender, Parameters, ParametersGroup, ParametersStore, ParametersTable, ProgressBar, RequiredMark, ScreenLocker, ShowResponsive, SimpleButton, SortableList, SortableListItem, Tab, Tabs, TabsContent, TabsController, TabsList, Templater, Toolbar, ToolbarController, ToolbarIconButton, ToolbarInput, ToolbarSelect, ToolbarSeparator, ToolbarTextButton, UnstyledSortableList, UploadHandler, Uploader, WaiTypeAhead, getBase64FromBlob, getBase64FromFile, getFieldErrorStyles, getFieldTouchedStyles, getFileExtension, importComponent, isFavoriteIcon, isImage, isParametersGroup, makeResponsiveComponent, menuController, parseNumberInputValueToNumber, parseNumberValueToNumberInput, useAccordionContext, useCurrentTab, useMenu, useModal, useModalContext, useOtherTagButton, useTabsContext };
 //# sourceMappingURL=index.js.map