acinguiux-ds-react-framework 0.1.18 → 0.1.20

package/build/cjs/components/Menu/styles/groupMenuItem.styles.js

@@ -1,23 +1,30 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("styled-components"),t=require("../../../react-base/src/consts/classes.js"),u=require("../../../react-base/src/theme/types/layer.js"),d=require("../../../react-base/src/utils/sizesUtils.js"),r=require("../../../react-base/src/components/Menu/Menu.consts.js"),g=e.css`
-  ${({theme:s,$size:n,$muted:l,disabled:a,mode:o})=>{const p=`${r.consts[n].padding}px`,c=`${r.consts[n].indent}px`,S=`${r.consts[n].indent*2}px`,i=s.layer({foundation:"surface",disabled:a,muted:l});return e.css`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("styled-components"),t=require("../../../react-base/src/consts/classes.js"),u=require("../../../react-base/src/theme/types/layer.js"),g=require("../../../react-base/src/utils/sizesUtils.js"),r=require("../../../react-base/src/components/Menu/Menu.consts.js"),d=e.css`
+  ${({theme:s,$size:n,$muted:l,disabled:a,mode:o})=>{const p=`${r.consts[n].padding}px`,S=`${r.consts[n].indent}px`,c=`${r.consts[n].indent*2}px`,i=s.layer({foundation:"surface",disabled:a,muted:l});return e.css`
       .${t.MENU_CLASS}-item-group {
         .${t.MENU_CLASS}-item-group-title {
-          ${s.typography("label",d.getLabelTypographySize(n))};
-          padding: 0 ${c} ${p};
+          ${s.typography("label",g.getLabelTypographySize(n))};
+          padding: 0 ${S} ${p};
           color: ${i[u.Variables.TextOnFoundationSubtle]};
-          text-transform: uppercase;
+          &:has(.${t.MENU_CLASS}-group-title-content:not(.${t.MENU_CLASS}-group-title-content-subtle)) {
+            text-transform: uppercase;
+          }
+
           ${o!=="horizontal"&&e.css`
             margin-right: ${r.consts[n].collapsedItemMarginRight};
           `}
         }
 
-        .${t.MENU_CLASS}-group-title-content {
+        .${t.MENU_CLASS}-group-title-content:not(.${t.MENU_CLASS}-group-title-content-subtle) {
           margin-top: 4px;
           padding-bottom: 4px;
           margin-bottom: -5px;
           border-bottom: 1px solid ${i[u.Variables.BorderOnFoundationSubtle]};
         }
 
+        .${t.MENU_CLASS}-group-title-content-subtle {
+          margin-bottom: -6px;
+        }
+
         /* Horizontal */
         ${o==="horizontal"&&e.css`
           .${t.MENU_CLASS}-item-group-list {
@@ -32,7 +39,7 @@
       ${o==="inline"&&e.css`
         .${t.MENU_CLASS}-submenu .${t.MENU_CLASS}-item-group {
           .${t.MENU_CLASS}-item-group-title {
-            padding-left: ${S};
+            padding-left: ${c};
           }
 
           &.${t.MENU_CLASS}-submenu-open
@@ -59,5 +66,5 @@
         `}
       }
     `}}
-`;exports.groupMenuItemStyle=g;
+`;exports.groupMenuItemStyle=d;
 //# sourceMappingURL=groupMenuItem.styles.js.map

package/build/cjs/components/Menu/styles/groupMenuItem.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"groupMenuItem.styles.js","sources":["../../../../../src/components/Menu/styles/groupMenuItem.styles.ts"],"sourcesContent":["import { css } from 'styled-components';\nimport { MENU_CLASS } from 'acinguiux-ds-react-base/consts';\nimport { Variables } from 'acinguiux-ds-react-base/theme';\nimport { getLabelTypographySize } from 'acinguiux-ds-react-base/utils/sizesUtils';\nimport { MenuConsts } from 'acinguiux-ds-react-base/components/Menu';\n\nimport type { StyledMenuProps } from '../Menu.types';\n\nexport const groupMenuItemStyle = css<StyledMenuProps>`\n  ${({ theme, $size, $muted, disabled, mode }) => {\n    const padding = `${MenuConsts.consts[$size].padding}px`;\n    const indent = `${MenuConsts.consts[$size].indent}px`;\n    const subMenuGroupIndent = `${MenuConsts.consts[$size].indent * 2}px`;\n    const layer = theme.layer({ foundation: 'surface', disabled, muted: $muted });\n\n    return css`\n      .${MENU_CLASS}-item-group {\n        .${MENU_CLASS}-item-group-title {\n          ${theme.typography('label', getLabelTypographySize($size))};\n          padding: 0 ${indent} ${padding};\n          color: ${layer[Variables.TextOnFoundationSubtle]};\n          text-transform: uppercase;\n          ${mode !== 'horizontal' &&\n          css`\n            margin-right: ${MenuConsts.consts[$size].collapsedItemMarginRight};\n          `}\n        }\n\n        .${MENU_CLASS}-group-title-content {\n          margin-top: 4px;\n          padding-bottom: 4px;\n          margin-bottom: -5px;\n          border-bottom: 1px solid ${layer[Variables.BorderOnFoundationSubtle]};\n        }\n\n        /* Horizontal */\n        ${mode === 'horizontal' &&\n        css`\n          .${MENU_CLASS}-item-group-list {\n            display: flex;\n            flex-direction: row;\n            align-items: stretch;\n          }\n        `}\n      }\n\n      /* Inline */\n      ${mode === 'inline' &&\n      css`\n        .${MENU_CLASS}-submenu .${MENU_CLASS}-item-group {\n          .${MENU_CLASS}-item-group-title {\n            padding-left: ${subMenuGroupIndent};\n          }\n\n          &.${MENU_CLASS}-submenu-open\n            > .${MENU_CLASS}-submenu-title\n            > .${MENU_CLASS}-submenu-title-content\n            > .${MENU_CLASS}-submenu-expand-icon {\n            transform: rotate(180deg);\n          }\n        }\n      `}\n\n      /* Popup */\n      &.${MENU_CLASS}-submenu {\n        /* Horizontal */\n        ${mode === 'horizontal' &&\n        css`\n          .${MENU_CLASS}-item-group .${MENU_CLASS}-item-group-list {\n            display: flex;\n            flex-direction: column;\n            align-items: stretch;\n          }\n          .${MENU_CLASS}-submenu-expand-icon {\n            transform: rotate(-90deg);\n          }\n        `}\n      }\n    `;\n  }}\n`;\n"],"names":["groupMenuItemStyle","css","theme","$size","$muted","disabled","mode","padding","MenuConsts.consts","indent","subMenuGroupIndent","layer","MENU_CLASS","getLabelTypographySize","Variables"],"mappings":"+XAQaA,EAAqBC,EAAAA;AAAAA,IAC9B,CAAC,CAAE,MAAAC,EAAO,MAAAC,EAAO,OAAAC,EAAQ,SAAAC,EAAU,KAAAC,KAAW,CAC9C,MAAMC,EAAU,GAAGC,EAAAA,OAAkBL,CAAK,EAAE,OAAO,KAC7CM,EAAS,GAAGD,EAAAA,OAAkBL,CAAK,EAAE,MAAM,KAC3CO,EAAqB,GAAGF,EAAAA,OAAkBL,CAAK,EAAE,OAAS,CAAC,KAC3DQ,EAAQT,EAAM,MAAM,CAAE,WAAY,UAAW,SAAAG,EAAU,MAAOD,EAAQ,EAE5E,OAAOH,EAAAA;AAAAA,SACFW,YAAU;AAAA,WACRA,YAAU;AAAA,YACTV,EAAM,WAAW,QAASW,EAAAA,uBAAuBV,CAAK,CAAC,CAAC;AAAA,uBAC7CM,CAAM,IAAIF,CAAO;AAAA,mBACrBI,EAAMG,YAAU,sBAAsB,CAAC;AAAA;AAAA,YAE9CR,IAAS,cACXL,EAAAA;AAAAA,4BACkBO,EAAAA,OAAkBL,CAAK,EAAE,wBAAwB;AAAA,WAClE;AAAA;AAAA;AAAA,WAGAS,YAAU;AAAA;AAAA;AAAA;AAAA,qCAIgBD,EAAMG,YAAU,wBAAwB,CAAC;AAAA;AAAA;AAAA;AAAA,UAIpER,IAAS,cACXL,EAAAA;AAAAA,aACKW,YAAU;AAAA;AAAA;AAAA;AAAA;AAAA,SAKd;AAAA;AAAA;AAAA;AAAA,QAIDN,IAAS,UACXL,EAAAA;AAAAA,WACKW,EAAAA,UAAU,aAAaA,YAAU;AAAA,aAC/BA,YAAU;AAAA,4BACKF,CAAkB;AAAA;AAAA;AAAA,cAGhCE,YAAU;AAAA,iBACPA,YAAU;AAAA,iBACVA,YAAU;AAAA,iBACVA,YAAU;AAAA;AAAA;AAAA;AAAA,OAIpB;AAAA;AAAA;AAAA,UAGGA,YAAU;AAAA;AAAA,UAEVN,IAAS,cACXL,EAAAA;AAAAA,aACKW,EAAAA,UAAU,gBAAgBA,YAAU;AAAA;AAAA;AAAA;AAAA;AAAA,aAKpCA,YAAU;AAAA;AAAA;AAAA,SAGd;AAAA;AAAA,KAGP,CAAC;AAAA"}
+{"version":3,"file":"groupMenuItem.styles.js","sources":["../../../../../src/components/Menu/styles/groupMenuItem.styles.ts"],"sourcesContent":["import { css } from 'styled-components';\nimport { MENU_CLASS } from 'acinguiux-ds-react-base/consts';\nimport { Variables } from 'acinguiux-ds-react-base/theme';\nimport { getLabelTypographySize } from 'acinguiux-ds-react-base/utils/sizesUtils';\nimport { MenuConsts } from 'acinguiux-ds-react-base/components/Menu';\n\nimport type { StyledMenuProps } from '../Menu.types';\n\nexport const groupMenuItemStyle = css<StyledMenuProps>`\n  ${({ theme, $size, $muted, disabled, mode }) => {\n    const padding = `${MenuConsts.consts[$size].padding}px`;\n    const indent = `${MenuConsts.consts[$size].indent}px`;\n    const subMenuGroupIndent = `${MenuConsts.consts[$size].indent * 2}px`;\n    const layer = theme.layer({ foundation: 'surface', disabled, muted: $muted });\n\n    return css`\n      .${MENU_CLASS}-item-group {\n        .${MENU_CLASS}-item-group-title {\n          ${theme.typography('label', getLabelTypographySize($size))};\n          padding: 0 ${indent} ${padding};\n          color: ${layer[Variables.TextOnFoundationSubtle]};\n          &:has(.${MENU_CLASS}-group-title-content:not(.${MENU_CLASS}-group-title-content-subtle)) {\n            text-transform: uppercase;\n          }\n\n          ${mode !== 'horizontal' &&\n          css`\n            margin-right: ${MenuConsts.consts[$size].collapsedItemMarginRight};\n          `}\n        }\n\n        .${MENU_CLASS}-group-title-content:not(.${MENU_CLASS}-group-title-content-subtle) {\n          margin-top: 4px;\n          padding-bottom: 4px;\n          margin-bottom: -5px;\n          border-bottom: 1px solid ${layer[Variables.BorderOnFoundationSubtle]};\n        }\n\n        .${MENU_CLASS}-group-title-content-subtle {\n          margin-bottom: -6px;\n        }\n\n        /* Horizontal */\n        ${mode === 'horizontal' &&\n        css`\n          .${MENU_CLASS}-item-group-list {\n            display: flex;\n            flex-direction: row;\n            align-items: stretch;\n          }\n        `}\n      }\n\n      /* Inline */\n      ${mode === 'inline' &&\n      css`\n        .${MENU_CLASS}-submenu .${MENU_CLASS}-item-group {\n          .${MENU_CLASS}-item-group-title {\n            padding-left: ${subMenuGroupIndent};\n          }\n\n          &.${MENU_CLASS}-submenu-open\n            > .${MENU_CLASS}-submenu-title\n            > .${MENU_CLASS}-submenu-title-content\n            > .${MENU_CLASS}-submenu-expand-icon {\n            transform: rotate(180deg);\n          }\n        }\n      `}\n\n      /* Popup */\n      &.${MENU_CLASS}-submenu {\n        /* Horizontal */\n        ${mode === 'horizontal' &&\n        css`\n          .${MENU_CLASS}-item-group .${MENU_CLASS}-item-group-list {\n            display: flex;\n            flex-direction: column;\n            align-items: stretch;\n          }\n          .${MENU_CLASS}-submenu-expand-icon {\n            transform: rotate(-90deg);\n          }\n        `}\n      }\n    `;\n  }}\n`;\n"],"names":["groupMenuItemStyle","css","theme","$size","$muted","disabled","mode","padding","MenuConsts.consts","indent","subMenuGroupIndent","layer","MENU_CLASS","getLabelTypographySize","Variables"],"mappings":"+XAQaA,EAAqBC,EAAAA;AAAAA,IAC9B,CAAC,CAAE,MAAAC,EAAO,MAAAC,EAAO,OAAAC,EAAQ,SAAAC,EAAU,KAAAC,KAAW,CAC9C,MAAMC,EAAU,GAAGC,EAAAA,OAAkBL,CAAK,EAAE,OAAO,KAC7CM,EAAS,GAAGD,EAAAA,OAAkBL,CAAK,EAAE,MAAM,KAC3CO,EAAqB,GAAGF,EAAAA,OAAkBL,CAAK,EAAE,OAAS,CAAC,KAC3DQ,EAAQT,EAAM,MAAM,CAAE,WAAY,UAAW,SAAAG,EAAU,MAAOD,EAAQ,EAE5E,OAAOH,EAAAA;AAAAA,SACFW,YAAU;AAAA,WACRA,YAAU;AAAA,YACTV,EAAM,WAAW,QAASW,EAAAA,uBAAuBV,CAAK,CAAC,CAAC;AAAA,uBAC7CM,CAAM,IAAIF,CAAO;AAAA,mBACrBI,EAAMG,YAAU,sBAAsB,CAAC;AAAA,mBACvCF,EAAAA,UAAU,6BAA6BA,YAAU;AAAA;AAAA;AAAA;AAAA,YAIxDN,IAAS,cACXL,EAAAA;AAAAA,4BACkBO,EAAAA,OAAkBL,CAAK,EAAE,wBAAwB;AAAA,WAClE;AAAA;AAAA;AAAA,WAGAS,EAAAA,UAAU,6BAA6BA,YAAU;AAAA;AAAA;AAAA;AAAA,qCAIvBD,EAAMG,YAAU,wBAAwB,CAAC;AAAA;AAAA;AAAA,WAGnEF,YAAU;AAAA;AAAA;AAAA;AAAA;AAAA,UAKXN,IAAS,cACXL,EAAAA;AAAAA,aACKW,YAAU;AAAA;AAAA;AAAA;AAAA;AAAA,SAKd;AAAA;AAAA;AAAA;AAAA,QAIDN,IAAS,UACXL,EAAAA;AAAAA,WACKW,EAAAA,UAAU,aAAaA,YAAU;AAAA,aAC/BA,YAAU;AAAA,4BACKF,CAAkB;AAAA;AAAA;AAAA,cAGhCE,YAAU;AAAA,iBACPA,YAAU;AAAA,iBACVA,YAAU;AAAA,iBACVA,YAAU;AAAA;AAAA;AAAA;AAAA,OAIpB;AAAA;AAAA;AAAA,UAGGA,YAAU;AAAA;AAAA,UAEVN,IAAS,cACXL,EAAAA;AAAAA,aACKW,EAAAA,UAAU,gBAAgBA,YAAU;AAAA;AAAA;AAAA;AAAA;AAAA,aAKpCA,YAAU;AAAA;AAAA;AAAA,SAGd;AAAA;AAAA,KAGP,CAAC;AAAA"}

package/build/cjs/components/Menu/styles/menuDivider.styles.js

@@ -1,20 +1,18 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("styled-components"),c=require("../../../react-base/src/consts/classes.js"),a=require("../../../react-base/src/theme/types/layer.js"),i=require("../../../react-base/src/components/Menu/Menu.consts.js"),u=require("acinguiux-ds-fabrics"),l=e.css`
-  ${({theme:s,mode:n,$size:t,$muted:r,disabled:o})=>e.css`
-    .${c.MENU_CLASS}-item-divider {
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("styled-components"),t=require("../../../react-base/src/consts/index.js"),o=require("../../../react-base/src/components/Menu/Menu.consts.js"),r=require("../../../react-base/src/consts/classes.js"),c=e.css`
+  ${({mode:i,$size:n,$iconPosition:s})=>e.css`
+    .${r.MENU_CLASS}-item-divider {
       position: relative;
       display: flex;
       justify-content: center;
       align-items: center;
-      background-color: ${s.layer({foundation:u.FabricsVariables.Foundations.Section,disabled:o,muted:r})[a.Variables.BorderOnFoundationSubtle]};
-      height: 1px;
+      padding: ${o.consts[n].itemPadding[i===t.Directions.Horizontal?t.Directions.Horizontal:t.Directions.Vertical][s]};
 
-      ${n!=="horizontal"?e.css`
-            width: calc(100% - ${i.consts[t].itemListMarginLeft}px);
-            margin-left: ${i.consts[t].itemListMarginLeft}px;
+      ${i==="horizontal"?e.css`
+            width: fit-content;
           `:e.css`
-            width: 100%;
-          `}
+            height: fit-content;
+          `};
     }
   `}
-`;exports.menuDividerStyle=l;
+`;exports.menuDividerStyle=c;
 //# sourceMappingURL=menuDivider.styles.js.map

package/build/cjs/components/Menu/styles/menuDivider.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"menuDivider.styles.js","sources":["../../../../../src/components/Menu/styles/menuDivider.styles.ts"],"sourcesContent":["import { css } from 'styled-components';\nimport { MENU_CLASS } from 'acinguiux-ds-react-base/consts';\nimport { Variables } from 'acinguiux-ds-react-base/theme';\nimport { MenuConsts } from 'acinguiux-ds-react-base/components/Menu';\nimport { FabricsVariables } from 'acinguiux-ds-fabrics';\n\nimport type { StyledMenuProps } from '../Menu.types';\n\nexport const menuDividerStyle = css<StyledMenuProps>`\n  ${({ theme, mode, $size, $muted, disabled }) => css`\n    .${MENU_CLASS}-item-divider {\n      position: relative;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      background-color: ${theme.layer({ foundation: FabricsVariables.Foundations.Section, disabled, muted: $muted })[\n        Variables.BorderOnFoundationSubtle\n      ]};\n      height: 1px;\n\n      ${mode !== 'horizontal'\n        ? css`\n            width: calc(100% - ${MenuConsts.consts[$size].itemListMarginLeft}px);\n            margin-left: ${MenuConsts.consts[$size].itemListMarginLeft}px;\n          `\n        : css`\n            width: 100%;\n          `}\n    }\n  `}\n`;\n"],"names":["menuDividerStyle","css","theme","mode","$size","$muted","disabled","MENU_CLASS","FabricsVariables","Variables","MenuConsts.consts"],"mappings":"wWAQaA,EAAmBC,EAAAA;AAAAA,IAC5B,CAAC,CAAE,MAAAC,EAAO,KAAAC,EAAM,MAAAC,EAAO,OAAAC,EAAQ,SAAAC,KAAeL,EAAAA;AAAAA,OAC3CM,YAAU;AAAA;AAAA;AAAA;AAAA;AAAA,0BAKSL,EAAM,MAAM,CAAE,WAAYM,EAAAA,iBAAiB,YAAY,QAAS,SAAAF,EAAU,MAAOD,CAAA,CAAQ,EAC3GI,EAAAA,UAAU,wBACZ,CAAC;AAAA;AAAA;AAAA,QAGCN,IAAS,aACPF,EAAAA;AAAAA,iCACuBS,EAAAA,OAAkBN,CAAK,EAAE,kBAAkB;AAAA,2BACjDM,EAAAA,OAAkBN,CAAK,EAAE,kBAAkB;AAAA,YAE5DH,EAAAA;AAAAA;AAAAA,WAEC;AAAA;AAAA,GAER;AAAA"}
+{"version":3,"file":"menuDivider.styles.js","sources":["../../../../../src/components/Menu/styles/menuDivider.styles.ts"],"sourcesContent":["import { css } from 'styled-components';\nimport { Directions, MENU_CLASS } from 'acinguiux-ds-react-base/consts';\nimport { MenuConsts } from 'acinguiux-ds-react-base/components/Menu';\n\nimport type { StyledMenuProps } from '../Menu.types';\n\nexport const menuDividerStyle = css<StyledMenuProps>`\n  ${({ mode, $size, $iconPosition }) => css`\n    .${MENU_CLASS}-item-divider {\n      position: relative;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      padding: ${MenuConsts.consts[$size].itemPadding[\n        mode === Directions.Horizontal ? Directions.Horizontal : Directions.Vertical\n      ][$iconPosition]};\n\n      ${mode === 'horizontal'\n        ? css`\n            width: fit-content;\n          `\n        : css`\n            height: fit-content;\n          `};\n    }\n  `}\n`;\n"],"names":["menuDividerStyle","css","mode","$size","$iconPosition","MENU_CLASS","MenuConsts.consts","Directions"],"mappings":"iUAMaA,EAAmBC,EAAAA;AAAAA,IAC5B,CAAC,CAAE,KAAAC,EAAM,MAAAC,EAAO,cAAAC,KAAoBH,EAAAA;AAAAA,OACjCI,YAAU;AAAA;AAAA;AAAA;AAAA;AAAA,iBAKAC,EAAAA,OAAkBH,CAAK,EAAE,YAClCD,IAASK,EAAAA,WAAW,WAAaA,EAAAA,WAAW,WAAaA,EAAAA,WAAW,QACtE,EAAEH,CAAa,CAAC;AAAA;AAAA,QAEdF,IAAS,aACPD,EAAAA;AAAAA;AAAAA,YAGAA,EAAAA;AAAAA;AAAAA,WAEC;AAAA;AAAA,GAER;AAAA"}

package/build/cjs/components/Menu/utils/classObserverUtils.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react"),u=t=>e=>{e.forEach(s=>{s.attributeName==="class"&&t(s.target.classList)})},c=(t,e)=>{r.useEffect(()=>{if(!(t!=null&&t.current))return;const s=new MutationObserver(u(e));return e(t.current.classList),s.observe(t.current,{attributes:!0}),()=>{s.disconnect()}},[t,e])};exports.useClassObserver=c;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react"),u=e=>t=>{t.forEach(r=>{r.attributeName==="class"&&e(r.target.classList)})},c=(e,t)=>{s.useEffect(()=>{if(!e?.current)return;const r=new MutationObserver(u(t));return t(e.current.classList),r.observe(e.current,{attributes:!0}),()=>{r.disconnect()}},[e,t])};exports.useClassObserver=c;
 //# sourceMappingURL=classObserverUtils.js.map

package/build/cjs/components/Menu/utils/classObserverUtils.js.map

@@ -1 +1 @@
-{"version":3,"file":"classObserverUtils.js","sources":["../../../../../src/components/Menu/utils/classObserverUtils.ts"],"sourcesContent":["import { type RefObject, useEffect } from 'react';\n\ntype OnClassChange = (classNames: DOMTokenList) => void;\n\nconst createMutationCallback: (onChange: OnClassChange) => MutationCallback = (onChange) => (mutations) => {\n  mutations.forEach((mutation) => {\n    if (mutation.attributeName === 'class') {\n      onChange((mutation.target as HTMLElement).classList);\n    }\n  });\n};\n\n/**\n * @private\n *\n * Currently only used in SubMenu to listen on submenu being open or not,\n * due to rc-menu implementation (no other visibility than classes being present),\n * due to Tooltip implementation (using Portal so CSS selection to hide Tooltip is not possible)\n *\n * Could be removed/improved depending on need:\n * - potentially removed following refactor of Menu\n * - potentially improved or exposed if consumers have a use of this Hook\n *\n * Implemented on 19th Sept. 2024 by \"Jean Barriere <jean.barriere@acinguiux.com>\"\n * No external references.\n * @param ref reference to observe on\n * @param onChange function called when a class mutation is observed\n */\nexport const useClassObserver = <T extends HTMLElement>(\n  ref: RefObject<T> | undefined,\n  onChange: OnClassChange,\n): void => {\n  useEffect(() => {\n    if (!ref?.current) {\n      return undefined;\n    }\n    const mutationObserver = new MutationObserver(createMutationCallback(onChange));\n\n    onChange(ref.current.classList);\n    mutationObserver.observe(ref.current, { attributes: true });\n\n    return () => {\n      mutationObserver.disconnect();\n    };\n  }, [ref, onChange]);\n};\n"],"names":["createMutationCallback","onChange","mutations","mutation","useClassObserver","ref","useEffect","mutationObserver"],"mappings":"qIAIMA,EAAyEC,GAAcC,GAAc,CACzGA,EAAU,QAASC,GAAa,CAC1BA,EAAS,gBAAkB,SAC7BF,EAAUE,EAAS,OAAuB,SAAS,CAEvD,CAAC,CACH,EAkBaC,EAAmB,CAC9BC,EACAJ,IACS,CACTK,EAAAA,UAAU,IAAM,CACd,GAAI,EAACD,GAAA,MAAAA,EAAK,SACR,OAEF,MAAME,EAAmB,IAAI,iBAAiBP,EAAuBC,CAAQ,CAAC,EAE9E,OAAAA,EAASI,EAAI,QAAQ,SAAS,EAC9BE,EAAiB,QAAQF,EAAI,QAAS,CAAE,WAAY,GAAM,EAEnD,IAAM,CACXE,EAAiB,WAAA,CACnB,CACF,EAAG,CAACF,EAAKJ,CAAQ,CAAC,CACpB"}
+{"version":3,"file":"classObserverUtils.js","sources":["../../../../../src/components/Menu/utils/classObserverUtils.ts"],"sourcesContent":["import { type RefObject, useEffect } from 'react';\n\ntype OnClassChange = (classNames: DOMTokenList) => void;\n\nconst createMutationCallback: (onChange: OnClassChange) => MutationCallback = (onChange) => (mutations) => {\n  mutations.forEach((mutation) => {\n    if (mutation.attributeName === 'class') {\n      onChange((mutation.target as HTMLElement).classList);\n    }\n  });\n};\n\n/**\n * @private\n *\n * Currently only used in SubMenu to listen on submenu being open or not,\n * due to @rc-component/menu implementation (no other visibility than classes being present),\n * due to Tooltip implementation (using Portal so CSS selection to hide Tooltip is not possible)\n *\n * Could be removed/improved depending on need:\n * - potentially removed following refactor of Menu\n * - potentially improved or exposed if consumers have a use of this Hook\n *\n * Implemented on 19th Sept. 2024 by \"Jean Barriere <jean.barriere@acinguiux.com>\"\n * No external references.\n * @param ref reference to observe on\n * @param onChange function called when a class mutation is observed\n */\nexport const useClassObserver = <T extends HTMLElement>(\n  ref: RefObject<T> | undefined,\n  onChange: OnClassChange,\n): void => {\n  useEffect(() => {\n    if (!ref?.current) {\n      return undefined;\n    }\n    const mutationObserver = new MutationObserver(createMutationCallback(onChange));\n\n    onChange(ref.current.classList);\n    mutationObserver.observe(ref.current, { attributes: true });\n\n    return () => {\n      mutationObserver.disconnect();\n    };\n  }, [ref, onChange]);\n};\n"],"names":["createMutationCallback","onChange","mutations","mutation","useClassObserver","ref","useEffect","mutationObserver"],"mappings":"qIAIMA,EAAyEC,GAAcC,GAAc,CACzGA,EAAU,QAASC,GAAa,CAC1BA,EAAS,gBAAkB,SAC7BF,EAAUE,EAAS,OAAuB,SAAS,CAEvD,CAAC,CACH,EAkBaC,EAAmB,CAC9BC,EACAJ,IACS,CACTK,EAAAA,UAAU,IAAM,CACd,GAAI,CAACD,GAAK,QACR,OAEF,MAAME,EAAmB,IAAI,iBAAiBP,EAAuBC,CAAQ,CAAC,EAE9E,OAAAA,EAASI,EAAI,QAAQ,SAAS,EAC9BE,EAAiB,QAAQF,EAAI,QAAS,CAAE,WAAY,GAAM,EAEnD,IAAM,CACXE,EAAiB,WAAA,CACnB,CACF,EAAG,CAACF,EAAKJ,CAAQ,CAAC,CACpB"}

package/build/cjs/components/Menu/utils/motionUtils.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("../../../react-base/src/consts/classes.js"),i=()=>({height:0,opacity:0}),a=e=>({height:e?e.scrollHeight:0,opacity:1}),r=e=>({height:e?e.offsetHeight:0}),n=(e,t)=>(t==null?void 0:t.deadline)===!0||t.propertyName==="height",l={horizontal:{motionName:`${o.MENU_CLASS}-slide-up`,motionDeadline:150},inline:{motionName:`${o.MENU_CLASS}-collapse`,onAppearStart:i,onEnterStart:i,onAppearActive:a,onEnterActive:a,onLeaveStart:r,onLeaveActive:i,onAppearEnd:n,onEnterEnd:n,onLeaveEnd:n,motionDeadline:500},other:{motionName:`${o.MENU_CLASS}-zoom`,motionDeadline:150}};exports.getDefaultMotions=l;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("../../../react-base/src/consts/classes.js"),o=()=>({height:0,opacity:0}),a=e=>({height:e?e.scrollHeight:0,opacity:1}),r=e=>({height:e?e.offsetHeight:0}),i=(e,n)=>n?.deadline===!0||n.propertyName==="height",l={horizontal:{motionName:`${t.MENU_CLASS}-slide-up`,motionDeadline:150},inline:{motionName:`${t.MENU_CLASS}-collapse`,onAppearStart:o,onEnterStart:o,onAppearActive:a,onEnterActive:a,onLeaveStart:r,onLeaveActive:o,onAppearEnd:i,onEnterEnd:i,onLeaveEnd:i,motionDeadline:500},other:{motionName:`${t.MENU_CLASS}-zoom`,motionDeadline:150}};exports.getDefaultMotions=l;
 //# sourceMappingURL=motionUtils.js.map

package/build/cjs/components/Menu/utils/motionUtils.js.map

@@ -1 +1 @@
-{"version":3,"file":"motionUtils.js","sources":["../../../../../src/components/Menu/utils/motionUtils.ts"],"sourcesContent":["import type { MotionEndEventHandler, MotionEventHandler } from 'rc-motion';\nimport type { MotionEvent } from 'rc-motion/lib/interface';\nimport { MENU_CLASS } from 'acinguiux-ds-react-base/consts';\n\nconst getCollapsedHeight: MotionEventHandler = () => ({ height: 0, opacity: 0 });\nconst getRealHeight: MotionEventHandler = (node) => ({ height: node ? node.scrollHeight : 0, opacity: 1 });\nconst getCurrentHeight: MotionEventHandler = (node) => ({ height: node ? node.offsetHeight : 0 });\nconst skipOpacityTransition: MotionEndEventHandler = (_, event: MotionEvent) =>\n  event?.deadline === true || (event as TransitionEvent).propertyName === 'height';\n\nexport const getDefaultMotions = {\n  horizontal: { motionName: `${MENU_CLASS}-slide-up`, motionDeadline: 150 },\n  inline: {\n    motionName: `${MENU_CLASS}-collapse`,\n    onAppearStart: getCollapsedHeight,\n    onEnterStart: getCollapsedHeight,\n    onAppearActive: getRealHeight,\n    onEnterActive: getRealHeight,\n    onLeaveStart: getCurrentHeight,\n    onLeaveActive: getCollapsedHeight,\n    onAppearEnd: skipOpacityTransition,\n    onEnterEnd: skipOpacityTransition,\n    onLeaveEnd: skipOpacityTransition,\n    motionDeadline: 500,\n  },\n  other: { motionName: `${MENU_CLASS}-zoom`, motionDeadline: 150 },\n};\n"],"names":["getCollapsedHeight","getRealHeight","node","getCurrentHeight","skipOpacityTransition","_","event","getDefaultMotions","MENU_CLASS"],"mappings":"yKAIMA,EAAyC,KAAO,CAAE,OAAQ,EAAG,QAAS,CAAA,GACtEC,EAAqCC,IAAU,CAAE,OAAQA,EAAOA,EAAK,aAAe,EAAG,QAAS,IAChGC,EAAwCD,IAAU,CAAE,OAAQA,EAAOA,EAAK,aAAe,IACvFE,EAA+C,CAACC,EAAGC,KACvDA,GAAA,YAAAA,EAAO,YAAa,IAASA,EAA0B,eAAiB,SAE7DC,EAAoB,CAC/B,WAAY,CAAE,WAAY,GAAGC,EAAAA,UAAU,YAAa,eAAgB,GAAA,EACpE,OAAQ,CACN,WAAY,GAAGA,EAAAA,UAAU,YACzB,cAAeR,EACf,aAAcA,EACd,eAAgBC,EAChB,cAAeA,EACf,aAAcE,EACd,cAAeH,EACf,YAAaI,EACb,WAAYA,EACZ,WAAYA,EACZ,eAAgB,GAAA,EAElB,MAAO,CAAE,WAAY,GAAGI,EAAAA,UAAU,QAAS,eAAgB,GAAA,CAC7D"}
+{"version":3,"file":"motionUtils.js","sources":["../../../../../src/components/Menu/utils/motionUtils.ts"],"sourcesContent":["import type { MotionEndEventHandler, MotionEventHandler } from 'rc-motion';\nimport type { MotionEvent } from 'rc-motion/lib/interface';\nimport { MENU_CLASS } from 'acinguiux-ds-react-base/consts';\n\nconst getCollapsedHeight: MotionEventHandler = () => ({ height: 0, opacity: 0 });\nconst getRealHeight: MotionEventHandler = (node) => ({ height: node ? node.scrollHeight : 0, opacity: 1 });\nconst getCurrentHeight: MotionEventHandler = (node) => ({ height: node ? node.offsetHeight : 0 });\nconst skipOpacityTransition: MotionEndEventHandler = (_, event: MotionEvent) =>\n  event?.deadline === true || (event as TransitionEvent).propertyName === 'height';\n\nexport const getDefaultMotions = {\n  horizontal: { motionName: `${MENU_CLASS}-slide-up`, motionDeadline: 150 },\n  inline: {\n    motionName: `${MENU_CLASS}-collapse`,\n    onAppearStart: getCollapsedHeight,\n    onEnterStart: getCollapsedHeight,\n    onAppearActive: getRealHeight,\n    onEnterActive: getRealHeight,\n    onLeaveStart: getCurrentHeight,\n    onLeaveActive: getCollapsedHeight,\n    onAppearEnd: skipOpacityTransition,\n    onEnterEnd: skipOpacityTransition,\n    onLeaveEnd: skipOpacityTransition,\n    motionDeadline: 500,\n  },\n  other: { motionName: `${MENU_CLASS}-zoom`, motionDeadline: 150 },\n};\n"],"names":["getCollapsedHeight","getRealHeight","node","getCurrentHeight","skipOpacityTransition","_","event","getDefaultMotions","MENU_CLASS"],"mappings":"yKAIMA,EAAyC,KAAO,CAAE,OAAQ,EAAG,QAAS,CAAA,GACtEC,EAAqCC,IAAU,CAAE,OAAQA,EAAOA,EAAK,aAAe,EAAG,QAAS,IAChGC,EAAwCD,IAAU,CAAE,OAAQA,EAAOA,EAAK,aAAe,IACvFE,EAA+C,CAACC,EAAGC,IACvDA,GAAO,WAAa,IAASA,EAA0B,eAAiB,SAE7DC,EAAoB,CAC/B,WAAY,CAAE,WAAY,GAAGC,EAAAA,UAAU,YAAa,eAAgB,GAAA,EACpE,OAAQ,CACN,WAAY,GAAGA,EAAAA,UAAU,YACzB,cAAeR,EACf,aAAcA,EACd,eAAgBC,EAChB,cAAeA,EACf,aAAcE,EACd,cAAeH,EACf,YAAaI,EACb,WAAYA,EACZ,WAAYA,EACZ,eAAgB,GAAA,EAElB,MAAO,CAAE,WAAY,GAAGI,EAAAA,UAAU,QAAS,eAAgB,GAAA,CAC7D"}

package/build/cjs/components/Menu/utils/nodeUtils.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("react/jsx-runtime"),g=require("react"),p=require("../components/MenuDivider.js"),y=require("../components/MenuItem.js"),M=require("../components/MenuItemGroup.js"),j=require("../components/SubMenu.js"),f=(e,r)=>(e||[]).map((t,c)=>{if(t&&typeof t=="object"){const{label:u,children:n,key:I,type:d,...s}=t,o=I??`tmp-${c}`;return n||d==="group"?d==="group"?i.jsx(M,{...s,title:u,children:f(n,r+1)},o):i.jsx(j,{level:r,...s,title:u,children:f(n,r+1)},o):d==="divider"?i.jsx(p,{...s},o):i.jsx(y,{level:r,...s,children:u},o)}return null}).filter(t=>t),q=e=>g.useMemo(()=>e&&f(e,0),[e]),l=e=>!!e&&"children"in e,h=e=>!!e&&"key"in e&&!("children"in e),b=(e,r)=>{if(r===void 0)return[];const t=c=>c.reduce((u,n)=>n?l(n)&&n.children?[...u,...t(n.children)]:h(n)&&n.path===e?[...u,n.key]:u:u,[]);return t(r)},a=e=>(e==null?void 0:e.flatMap(r=>l(r)?a(r.children):r).filter(h))??[];exports.getItemsByPath=b;exports.getLeafItems=a;exports.useItems=q;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const d=require("react/jsx-runtime"),g=require("react"),M=require("../components/MenuDivider.js"),j=require("../components/MenuItem.js"),p=require("../components/MenuItemGroup.js"),q=require("../components/SubMenu.js"),f=(e,r,t)=>(e||[]).map((s,u)=>{if(s&&typeof s=="object"){const{label:n,children:o,key:I,type:l,...i}=s,c=I??`tmp-${u}`;return o||l==="group"?l==="group"?d.jsx(p,{...i,title:n,children:f(o,r+1,t)},c):d.jsx(q,{level:r,...i,title:n,children:f(o,r+1,t)},c):l==="divider"?d.jsx(M,{...i,...t.mode==="horizontal"?{style:{order:u}}:{}},c):d.jsx(j,{level:r,...i,children:n},c)}return null}).filter(s=>s),P=(e,r,t)=>g.useMemo(()=>e?f(e,0,t):r,[e,r,t]),h=e=>!!e&&"children"in e,a=e=>!!e&&"key"in e&&!("children"in e),b=(e,r)=>{if(r===void 0)return[];const t=s=>s.reduce((u,n)=>{if(!n)return u;if(h(n)&&n.children){const o=t(n.children);return o.length>0&&"key"in n?[...u,n.key,...o]:[...u,...o]}return a(n)&&n.path===e?[...u,n.key]:u},[]);return t(r)},y=e=>e?.flatMap(r=>h(r)?y(r.children):r).filter(a)??[];exports.getItemsByPath=b;exports.getLeafItems=y;exports.useItems=P;
 //# sourceMappingURL=nodeUtils.js.map

package/build/cjs/components/Menu/utils/nodeUtils.js.map

@@ -1 +1 @@
-{"version":3,"file":"nodeUtils.js","sources":["../../../../../src/components/Menu/utils/nodeUtils.tsx"],"sourcesContent":["// This hook is tweaked from Ant Design's menu component\n// https://github.com/ant-design/ant-design/blob/master/components/menu/hooks/useItems.tsx\n// It converts the items array to React nodes using our components\n\nimport { useMemo } from 'react';\n\nimport type { ItemType } from 'rc-menu/lib/interface';\n\nimport MenuDivider from '../components/MenuDivider';\nimport MenuItem from '../components/MenuItem';\nimport MenuItemGroup from '../components/MenuItemGroup';\nimport SubMenu from '../components/SubMenu';\nimport type { MenuItemGroupType, MenuItemType, SubMenuType } from '../Menu.types';\n\nconst convertItemsToNodes = (items: ItemType[], level: number) =>\n  (items || [])\n    .map((opt, index) => {\n      if (opt && typeof opt === 'object') {\n        // handling types properly here makes the code unreadable\n        // eslint-disable-next-line @typescript-eslint/no-explicit-any\n        const { label, children, key, type, ...restProps } = opt as any;\n        const mergedKey = key ?? `tmp-${index}`;\n\n        if (children || type === 'group') {\n          if (type === 'group') {\n            return (\n              <MenuItemGroup key={mergedKey} {...restProps} title={label}>\n                {convertItemsToNodes(children, level + 1)}\n              </MenuItemGroup>\n            );\n          }\n\n          return (\n            <SubMenu key={mergedKey} level={level} {...restProps} title={label}>\n              {convertItemsToNodes(children, level + 1)}\n            </SubMenu>\n          );\n        }\n\n        if (type === 'divider') {\n          return <MenuDivider key={mergedKey} {...restProps} />;\n        }\n\n        return (\n          <MenuItem key={mergedKey} level={level} {...restProps}>\n            {label}\n          </MenuItem>\n        );\n      }\n\n      return null;\n    })\n    .filter((opt) => opt);\n\nexport const useItems = (items?: ItemType[]) =>\n  useMemo(() => {\n    if (!items) {\n      return items;\n    }\n\n    return convertItemsToNodes(items, 0);\n  }, [items]);\n\nconst isParent = (item: ItemType): item is SubMenuType | MenuItemGroupType => !!item && 'children' in item;\nconst isMenuItem = (item: ItemType): item is MenuItemType => !!item && 'key' in item && !('children' in item);\n\nexport const getItemsByPath: (path: string, items: ItemType[] | undefined) => string[] = (path, items) => {\n  if (items === undefined) return [];\n  const findItem: (menuItems: ItemType[]) => string[] = (menuItems) =>\n    menuItems.reduce<string[]>((acc, item) => {\n      if (!item) return acc;\n      if (isParent(item) && item.children) return [...acc, ...findItem(item.children)];\n      if (isMenuItem(item) && item.path === path) return [...acc, item.key as string];\n\n      return acc;\n    }, []);\n\n  return findItem(items);\n};\n\nexport const getLeafItems = (items?: ItemType[]): MenuItemType[] =>\n  items?.flatMap((item) => (isParent(item) ? getLeafItems(item.children) : item)).filter(isMenuItem) ?? [];\n"],"names":["convertItemsToNodes","items","level","opt","index","label","children","key","type","restProps","mergedKey","jsx","MenuItemGroup","SubMenu","MenuDivider","MenuItem","useItems","useMemo","isParent","item","isMenuItem","getItemsByPath","path","findItem","menuItems","acc","getLeafItems"],"mappings":"uUAcMA,EAAsB,CAACC,EAAmBC,KAC7CD,GAAS,CAAA,GACP,IAAI,CAACE,EAAKC,IAAU,CACnB,GAAID,GAAO,OAAOA,GAAQ,SAAU,CAGlC,KAAM,CAAE,MAAAE,EAAO,SAAAC,EAAU,IAAAC,EAAK,KAAAC,EAAM,GAAGC,GAAcN,EAC/CO,EAAYH,GAAO,OAAOH,CAAK,GAErC,OAAIE,GAAYE,IAAS,QACnBA,IAAS,QAETG,EAAAA,IAACC,EAAA,CAA+B,GAAGH,EAAW,MAAOJ,EAClD,SAAAL,EAAoBM,EAAUJ,EAAQ,CAAC,CAAA,EADtBQ,CAEpB,EAKFC,EAAAA,IAACE,EAAA,CAAwB,MAAAX,EAAe,GAAGO,EAAW,MAAOJ,EAC1D,SAAAL,EAAoBM,EAAUJ,EAAQ,CAAC,CAAA,EAD5BQ,CAEd,EAIAF,IAAS,UACJG,EAAAA,IAACG,EAAA,CAA6B,GAAGL,CAAA,EAAfC,CAA0B,QAIlDK,EAAA,CAAyB,MAAAb,EAAe,GAAGO,EACzC,YADYC,CAEf,CAEJ,CAEA,OAAO,IACT,CAAC,EACA,OAAQP,GAAQA,CAAG,EAEXa,EAAYf,GACvBgB,EAAAA,QAAQ,IACDhB,GAIED,EAAoBC,EAAO,CAAC,EAClC,CAACA,CAAK,CAAC,EAENiB,EAAYC,GAA4D,CAAC,CAACA,GAAQ,aAAcA,EAChGC,EAAcD,GAAyC,CAAC,CAACA,GAAQ,QAASA,GAAQ,EAAE,aAAcA,GAE3FE,EAA4E,CAACC,EAAMrB,IAAU,CACxG,GAAIA,IAAU,OAAW,MAAO,CAAA,EAChC,MAAMsB,EAAiDC,GACrDA,EAAU,OAAiB,CAACC,EAAKN,IAC1BA,EACDD,EAASC,CAAI,GAAKA,EAAK,SAAiB,CAAC,GAAGM,EAAK,GAAGF,EAASJ,EAAK,QAAQ,CAAC,EAC3EC,EAAWD,CAAI,GAAKA,EAAK,OAASG,EAAa,CAAC,GAAGG,EAAKN,EAAK,GAAa,EAEvEM,EAJWA,EAKjB,CAAA,CAAE,EAEP,OAAOF,EAAStB,CAAK,CACvB,EAEayB,EAAgBzB,IAC3BA,GAAA,YAAAA,EAAO,QAASkB,GAAUD,EAASC,CAAI,EAAIO,EAAaP,EAAK,QAAQ,EAAIA,GAAO,OAAOC,KAAe,CAAA"}
+{"version":3,"file":"nodeUtils.js","sources":["../../../../../src/components/Menu/utils/nodeUtils.tsx"],"sourcesContent":["// This hook is tweaked from Ant Design's menu component\n// https://github.com/ant-design/ant-design/blob/master/components/menu/hooks/useItems.tsx\n// It converts the items array to React nodes using our components\n\nimport { type ReactNode, useMemo } from 'react';\n\nimport type { ItemType } from '@rc-component/menu/lib/interface';\n\nimport MenuDivider from '../components/MenuDivider';\nimport MenuItem from '../components/MenuItem';\nimport MenuItemGroup from '../components/MenuItemGroup';\nimport SubMenu from '../components/SubMenu';\nimport type { MenuItemGroupType, MenuItemType, SubMenuType } from '../Menu.types';\n\ntype ConvertItemsToNodesOpts = {\n  mode?: string;\n};\n\nconst convertItemsToNodes = (items: ItemType[], level: number, opts: ConvertItemsToNodesOpts) =>\n  (items || [])\n    .map((opt, index) => {\n      if (opt && typeof opt === 'object') {\n        // handling types properly here makes the code unreadable\n        // eslint-disable-next-line @typescript-eslint/no-explicit-any\n        const { label, children, key, type, ...restProps } = opt as any;\n        const mergedKey = key ?? `tmp-${index}`;\n\n        if (children || type === 'group') {\n          if (type === 'group') {\n            return (\n              <MenuItemGroup key={mergedKey} {...restProps} title={label}>\n                {convertItemsToNodes(children, level + 1, opts)}\n              </MenuItemGroup>\n            );\n          }\n\n          return (\n            <SubMenu key={mergedKey} level={level} {...restProps} title={label}>\n              {convertItemsToNodes(children, level + 1, opts)}\n            </SubMenu>\n          );\n        }\n\n        if (type === 'divider') {\n          return (\n            <MenuDivider\n              key={mergedKey}\n              {...restProps}\n              {...(opts.mode === 'horizontal' ? { style: { order: index } } : {})}\n            />\n          );\n        }\n\n        return (\n          <MenuItem key={mergedKey} level={level} {...restProps}>\n            {label}\n          </MenuItem>\n        );\n      }\n\n      return null;\n    })\n    .filter((opt) => opt);\n\nexport const useItems = (items: ItemType[] | undefined, children: ReactNode, opts: { mode: string }) =>\n  useMemo(() => {\n    if (!items) {\n      return children;\n    }\n\n    return convertItemsToNodes(items, 0, opts);\n  }, [items, children, opts]);\n\nconst isParent = (item: ItemType): item is SubMenuType | MenuItemGroupType => !!item && 'children' in item;\nconst isMenuItem = (item: ItemType): item is MenuItemType => !!item && 'key' in item && !('children' in item);\n\nexport const getItemsByPath: (path: string, items: ItemType[] | undefined) => string[] = (path, items) => {\n  if (items === undefined) return [];\n  const findItem: (menuItems: ItemType[]) => string[] = (menuItems) =>\n    menuItems.reduce<string[]>((acc, item) => {\n      if (!item) return acc;\n      if (isParent(item) && item.children) {\n        const childPath = findItem(item.children);\n        if (childPath.length > 0 && 'key' in item) {\n          return [...acc, item.key, ...childPath];\n        }\n        return [...acc, ...childPath];\n      }\n      if (isMenuItem(item) && item.path === path) return [...acc, item.key as string];\n\n      return acc;\n    }, []);\n\n  return findItem(items);\n};\n\nexport const getLeafItems = (items?: ItemType[]): MenuItemType[] =>\n  items?.flatMap((item) => (isParent(item) ? getLeafItems(item.children) : item)).filter(isMenuItem) ?? [];\n"],"names":["convertItemsToNodes","items","level","opts","opt","index","label","children","key","type","restProps","mergedKey","jsx","MenuItemGroup","SubMenu","MenuDivider","MenuItem","useItems","useMemo","isParent","item","isMenuItem","getItemsByPath","path","findItem","menuItems","acc","childPath","getLeafItems"],"mappings":"uUAkBMA,EAAsB,CAACC,EAAmBC,EAAeC,KAC5DF,GAAS,CAAA,GACP,IAAI,CAACG,EAAKC,IAAU,CACnB,GAAID,GAAO,OAAOA,GAAQ,SAAU,CAGlC,KAAM,CAAE,MAAAE,EAAO,SAAAC,EAAU,IAAAC,EAAK,KAAAC,EAAM,GAAGC,GAAcN,EAC/CO,EAAYH,GAAO,OAAOH,CAAK,GAErC,OAAIE,GAAYE,IAAS,QACnBA,IAAS,QAETG,EAAAA,IAACC,EAAA,CAA+B,GAAGH,EAAW,MAAOJ,EAClD,SAAAN,EAAoBO,EAAUL,EAAQ,EAAGC,CAAI,CAAA,EAD5BQ,CAEpB,EAKFC,EAAAA,IAACE,EAAA,CAAwB,MAAAZ,EAAe,GAAGQ,EAAW,MAAOJ,EAC1D,SAAAN,EAAoBO,EAAUL,EAAQ,EAAGC,CAAI,GADlCQ,CAEd,EAIAF,IAAS,UAETG,EAAAA,IAACG,EAAA,CAEE,GAAGL,EACH,GAAIP,EAAK,OAAS,aAAe,CAAE,MAAO,CAAE,MAAOE,CAAA,GAAY,CAAA,CAAC,EAF5DM,CAAA,QAQRK,EAAA,CAAyB,MAAAd,EAAe,GAAGQ,EACzC,YADYC,CAEf,CAEJ,CAEA,OAAO,IACT,CAAC,EACA,OAAQP,GAAQA,CAAG,EAEXa,EAAW,CAAChB,EAA+BM,EAAqBJ,IAC3Ee,EAAAA,QAAQ,IACDjB,EAIED,EAAoBC,EAAO,EAAGE,CAAI,EAHhCI,EAIR,CAACN,EAAOM,EAAUJ,CAAI,CAAC,EAEtBgB,EAAYC,GAA4D,CAAC,CAACA,GAAQ,aAAcA,EAChGC,EAAcD,GAAyC,CAAC,CAACA,GAAQ,QAASA,GAAQ,EAAE,aAAcA,GAE3FE,EAA4E,CAACC,EAAMtB,IAAU,CACxG,GAAIA,IAAU,OAAW,MAAO,CAAA,EAChC,MAAMuB,EAAiDC,GACrDA,EAAU,OAAiB,CAACC,EAAKN,IAAS,CACxC,GAAI,CAACA,EAAM,OAAOM,EAClB,GAAIP,EAASC,CAAI,GAAKA,EAAK,SAAU,CACnC,MAAMO,EAAYH,EAASJ,EAAK,QAAQ,EACxC,OAAIO,EAAU,OAAS,GAAK,QAASP,EAC5B,CAAC,GAAGM,EAAKN,EAAK,IAAK,GAAGO,CAAS,EAEjC,CAAC,GAAGD,EAAK,GAAGC,CAAS,CAC9B,CACA,OAAIN,EAAWD,CAAI,GAAKA,EAAK,OAASG,EAAa,CAAC,GAAGG,EAAKN,EAAK,GAAa,EAEvEM,CACT,EAAG,CAAA,CAAE,EAEP,OAAOF,EAASvB,CAAK,CACvB,EAEa2B,EAAgB3B,GAC3BA,GAAO,QAASmB,GAAUD,EAASC,CAAI,EAAIQ,EAAaR,EAAK,QAAQ,EAAIA,CAAK,EAAE,OAAOC,CAAU,GAAK,CAAA"}

package/build/cjs/components/Modal/Modal.js

@@ -1,2 +1,2 @@
-"use strict";const e=require("react/jsx-runtime"),g=require("classnames"),n=require("../../react-base/src/consts/index.js"),p=require("./components/Dialog/Dialog.js"),a=require("./Modal.styles.js"),B=require("./components/ModalLoading/ModalLoading.js"),h=require("../_internalComponents/InfoBar/InfoBar.js"),H=require("../Button/Button.js"),j=require("../Icon/components/Cross.js"),R=require("../_internalComponents/ActionBar/ActionBar.js"),E=require("./components/ModalLoading/ModalLoading.styles.js"),c=require("../../react-base/src/consts/classes.js"),T=({children:A,className:q,open:C,headerBorder:d=!0,footerBorder:u=!0,bgColor:L=!1,padding:O=!0,onClose:i=n.NOOP,header:o,actions:s,actionsDirection:S=n.Directions.Horizontal,actionsAlignment:_=n.Alignments.Right,loading:t=!1,loadingBody:m="Loading...",size:r=n.Sizes.Medium,closeButton:l=!0,maskClosable:D=!0,contentScrollable:$=!1,showHeader:x=!0,showFooter:M=!0,centered:f=!1,width:y=520,...N})=>{const b=!o&&s&&(s==null?void 0:s.length)>0;return e.jsxs(a.Modal,{$size:r,as:p,prefixCls:c.MODAL_CLASS,className:g(c.MODAL_CONTAINER_CLASS,q),visible:C,onClose:i,closable:l,maskClosable:D,$centered:f,$contentScrollable:$,width:y,...N,children:[!!x&&!!o&&!t&&e.jsxs(a.ModalHeader,{$size:r,$headerBorder:d,className:c.MODAL_HEADER_CLASS,children:[e.jsx(a.ModalHeaderContent,{children:e.jsx(h,{direction:n.Directions.Vertical,size:r,...o})}),!!l&&e.jsx(H,{icon:e.jsx(j,{}),iconOnly:!0,variant:n.Variants.Transparent,size:r,onClick:i,"aria-label":"Close"})]}),e.jsxs(a.ModalContent,{$size:r,$padding:O,$headerBorder:d,$footerBorder:u,$hasHeader:!!(x&&o),$hasFooter:!!(M&&s),$bgColor:L,$contentScrollable:$,$bodyCentered:b||t,$onlyBody:t,children:[!o&&!!l&&!t&&e.jsx(E.CloseButton,{icon:e.jsx(j,{}),iconOnly:!0,variant:n.Variants.Transparent,size:r,$paddingSize:r,onClick:i}),t?e.jsx(B,{size:r,loadingBody:m,closeButton:l,onClose:i}):A]}),!!M&&!!s&&!t&&e.jsx(a.ModalFooter,{$size:r,$footerBorder:u,className:c.MODAL_FOOTER_CLASS,children:e.jsx(R,{size:r,actions:s,alignment:_,direction:S})})]})};module.exports=T;
+"use strict";const e=require("react/jsx-runtime"),g=require("classnames"),s=require("../../react-base/src/consts/index.js"),p=require("./components/Dialog/Dialog.js"),a=require("./Modal.styles.js"),B=require("./components/ModalLoading/ModalLoading.js"),h=require("../_internalComponents/InfoBar/InfoBar.js"),H=require("../Button/Button.js"),j=require("../Icon/components/Cross.js"),R=require("../_internalComponents/ActionBar/ActionBar.js"),E=require("./components/ModalLoading/ModalLoading.styles.js"),c=require("../../react-base/src/consts/classes.js"),T=({children:A,className:q,open:C,headerBorder:d=!0,footerBorder:u=!0,bgColor:L=!1,padding:O=!0,onClose:i=s.NOOP,header:t,actions:o,actionsDirection:S=s.Directions.Horizontal,actionsAlignment:_=s.Alignments.Right,loading:n=!1,loadingBody:m="Loading...",size:r=s.Sizes.Medium,closeButton:l=!0,maskClosable:D=!0,contentScrollable:$=!1,showHeader:x=!0,showFooter:M=!0,centered:f=!1,width:y=520,...N})=>{const b=!t&&o&&o?.length>0;return e.jsxs(a.Modal,{$size:r,as:p,prefixCls:c.MODAL_CLASS,className:g(c.MODAL_CONTAINER_CLASS,q),visible:C,onClose:i,closable:l,maskClosable:D,$centered:f,$contentScrollable:$,width:y,...N,children:[!!x&&!!t&&!n&&e.jsxs(a.ModalHeader,{$size:r,$headerBorder:d,className:c.MODAL_HEADER_CLASS,children:[e.jsx(a.ModalHeaderContent,{children:e.jsx(h,{direction:s.Directions.Vertical,size:r,...t})}),!!l&&e.jsx(H,{icon:e.jsx(j,{}),iconOnly:!0,variant:s.Variants.Transparent,size:r,onClick:i,"aria-label":"Close"})]}),e.jsxs(a.ModalContent,{$size:r,$padding:O,$headerBorder:d,$footerBorder:u,$hasHeader:!!(x&&t),$hasFooter:!!(M&&o),$bgColor:L,$contentScrollable:$,$bodyCentered:b||n,$onlyBody:n,children:[!t&&!!l&&!n&&e.jsx(E.CloseButton,{icon:e.jsx(j,{}),iconOnly:!0,variant:s.Variants.Transparent,size:r,$paddingSize:r,onClick:i}),n?e.jsx(B,{size:r,loadingBody:m,closeButton:l,onClose:i}):A]}),!!M&&!!o&&!n&&e.jsx(a.ModalFooter,{$size:r,$footerBorder:u,className:c.MODAL_FOOTER_CLASS,children:e.jsx(R,{size:r,actions:o,alignment:_,direction:S})})]})};module.exports=T;
 //# sourceMappingURL=Modal.js.map

package/build/cjs/components/Modal/Modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","sources":["../../../../src/components/Modal/Modal.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\n\nimport classNames from 'classnames';\nimport {\n  NOOP,\n  Alignments,\n  Sizes,\n  MODAL_CONTAINER_CLASS,\n  MODAL_CLASS,\n  MODAL_HEADER_CLASS,\n  MODAL_FOOTER_CLASS,\n  Variants,\n  Directions,\n} from 'acinguiux-ds-react-base/consts';\n\nimport Dialog from './components/Dialog/Dialog';\nimport * as Styled from './Modal.styles';\nimport type { IModalProps } from './Modal.types';\nimport ModalLoading from './components/ModalLoading/ModalLoading';\nimport InfoBar from '../_internalComponents/InfoBar/InfoBar';\nimport Button from '../Button/Button';\nimport CrossIcon from '../Icon/components/Cross';\nimport ActionBar from '../_internalComponents/ActionBar/ActionBar';\nimport { CloseButton } from './components/ModalLoading/ModalLoading.styles';\n\nconst Modal = ({\n  children,\n  className,\n  open,\n  headerBorder = true,\n  footerBorder = true,\n  bgColor = false,\n  padding = true,\n  onClose = NOOP,\n  header,\n  actions,\n  actionsDirection = Directions.Horizontal,\n  actionsAlignment = Alignments.Right,\n  loading = false,\n  loadingBody = 'Loading...',\n  size = Sizes.Medium,\n  closeButton = true,\n  maskClosable = true,\n  contentScrollable = false,\n  showHeader = true,\n  showFooter = true,\n  centered = false,\n  width = 520,\n  ...props\n}: IModalProps): ReactElement => {\n  const isWithoutHeaderAndFooter = !header && actions && actions?.length > 0;\n\n  return (\n    <Styled.Modal\n      $size={size}\n      as={Dialog}\n      prefixCls={MODAL_CLASS}\n      className={classNames(MODAL_CONTAINER_CLASS, className)}\n      visible={open}\n      onClose={onClose}\n      closable={closeButton}\n      maskClosable={maskClosable}\n      $centered={centered}\n      $contentScrollable={contentScrollable}\n      width={width}\n      {...props}\n    >\n      {!!showHeader && !!header && !loading && (\n        <Styled.ModalHeader $size={size} $headerBorder={headerBorder} className={MODAL_HEADER_CLASS}>\n          <Styled.ModalHeaderContent>\n            <InfoBar direction={Directions.Vertical} size={size} {...header} />\n          </Styled.ModalHeaderContent>\n          {!!closeButton && (\n            <Button\n              icon={<CrossIcon />}\n              iconOnly={true}\n              variant={Variants.Transparent}\n              size={size}\n              onClick={onClose}\n              aria-label=\"Close\"\n            />\n          )}\n        </Styled.ModalHeader>\n      )}\n      <Styled.ModalContent\n        $size={size}\n        $padding={padding}\n        $headerBorder={headerBorder}\n        $footerBorder={footerBorder}\n        $hasHeader={Boolean(showHeader && header)}\n        $hasFooter={Boolean(showFooter && actions)}\n        $bgColor={bgColor}\n        $contentScrollable={contentScrollable}\n        $bodyCentered={isWithoutHeaderAndFooter || loading}\n        $onlyBody={loading}\n      >\n        {!header && !!closeButton && !loading && (\n          <CloseButton\n            icon={<CrossIcon />}\n            iconOnly={true}\n            variant={Variants.Transparent}\n            size={size}\n            $paddingSize={size}\n            onClick={onClose}\n          />\n        )}\n        {loading ? (\n          <ModalLoading size={size} loadingBody={loadingBody} closeButton={closeButton} onClose={onClose} />\n        ) : (\n          children\n        )}\n      </Styled.ModalContent>\n      {!!showFooter && !!actions && !loading && (\n        <Styled.ModalFooter $size={size} $footerBorder={footerBorder} className={MODAL_FOOTER_CLASS}>\n          <ActionBar size={size} actions={actions} alignment={actionsAlignment} direction={actionsDirection} />\n        </Styled.ModalFooter>\n      )}\n    </Styled.Modal>\n  );\n};\n\nexport default Modal;\n"],"names":["Modal","children","className","open","headerBorder","footerBorder","bgColor","padding","onClose","NOOP","header","actions","actionsDirection","Directions","actionsAlignment","Alignments","loading","loadingBody","size","Sizes","closeButton","maskClosable","contentScrollable","showHeader","showFooter","centered","width","props","isWithoutHeaderAndFooter","jsxs","Styled.Modal","Dialog","MODAL_CLASS","classNames","MODAL_CONTAINER_CLASS","Styled.ModalHeader","MODAL_HEADER_CLASS","jsx","Styled.ModalHeaderContent","InfoBar","Button","CrossIcon","Variants","Styled.ModalContent","CloseButton","ModalLoading","Styled.ModalFooter","MODAL_FOOTER_CLASS","ActionBar"],"mappings":"2iBAyBMA,EAAQ,CAAC,CACb,SAAAC,EACA,UAAAC,EACA,KAAAC,EACA,aAAAC,EAAe,GACf,aAAAC,EAAe,GACf,QAAAC,EAAU,GACV,QAAAC,EAAU,GACV,QAAAC,EAAUC,EAAAA,KACV,OAAAC,EACA,QAAAC,EACA,iBAAAC,EAAmBC,EAAAA,WAAW,WAC9B,iBAAAC,EAAmBC,EAAAA,WAAW,MAC9B,QAAAC,EAAU,GACV,YAAAC,EAAc,aACd,KAAAC,EAAOC,EAAAA,MAAM,OACb,YAAAC,EAAc,GACd,aAAAC,EAAe,GACf,kBAAAC,EAAoB,GACpB,WAAAC,EAAa,GACb,WAAAC,EAAa,GACb,SAAAC,EAAW,GACX,MAAAC,EAAQ,IACR,GAAGC,CACL,IAAiC,CAC/B,MAAMC,EAA2B,CAAClB,GAAUC,IAAWA,GAAA,YAAAA,EAAS,QAAS,EAEzE,OACEkB,EAAAA,KAACC,EAAAA,MAAA,CACC,MAAOZ,EACP,GAAIa,EACJ,UAAWC,EAAAA,YACX,UAAWC,EAAWC,EAAAA,sBAAuBhC,CAAS,EACtD,QAASC,EACT,QAAAK,EACA,SAAUY,EACV,aAAAC,EACA,UAAWI,EACX,mBAAoBH,EACpB,MAAAI,EACC,GAAGC,EAEH,SAAA,CAAA,CAAC,CAACJ,GAAc,CAAC,CAACb,GAAU,CAACM,GAC5Ba,EAAAA,KAACM,EAAAA,YAAA,CAAmB,MAAOjB,EAAM,cAAed,EAAc,UAAWgC,EAAAA,mBACvE,SAAA,CAAAC,EAAAA,IAACC,EAAAA,mBAAA,CACC,SAAAD,EAAAA,IAACE,EAAA,CAAQ,UAAW1B,EAAAA,WAAW,SAAU,KAAAK,EAAa,GAAGR,CAAA,CAAQ,CAAA,CACnE,EACC,CAAC,CAACU,GACDiB,EAAAA,IAACG,EAAA,CACC,WAAOC,EAAA,EAAU,EACjB,SAAU,GACV,QAASC,EAAAA,SAAS,YAClB,KAAAxB,EACA,QAASV,EACT,aAAW,OAAA,CAAA,CACb,EAEJ,EAEFqB,EAAAA,KAACc,EAAAA,aAAA,CACC,MAAOzB,EACP,SAAUX,EACV,cAAeH,EACf,cAAeC,EACf,WAAY,GAAQkB,GAAcb,GAClC,WAAY,GAAQc,GAAcb,GAClC,SAAUL,EACV,mBAAoBgB,EACpB,cAAeM,GAA4BZ,EAC3C,UAAWA,EAEV,SAAA,CAAA,CAACN,GAAU,CAAC,CAACU,GAAe,CAACJ,GAC5BqB,EAAAA,IAACO,EAAAA,YAAA,CACC,WAAOH,EAAA,EAAU,EACjB,SAAU,GACV,QAASC,EAAAA,SAAS,YAClB,KAAAxB,EACA,aAAcA,EACd,QAASV,CAAA,CAAA,EAGZQ,EACCqB,EAAAA,IAACQ,EAAA,CAAa,KAAA3B,EAAY,YAAAD,EAA0B,YAAAG,EAA0B,QAAAZ,EAAkB,EAEhGP,CAAA,CAAA,CAAA,EAGH,CAAC,CAACuB,GAAc,CAAC,CAACb,GAAW,CAACK,GAC7BqB,MAACS,EAAAA,YAAA,CAAmB,MAAO5B,EAAM,cAAeb,EAAc,UAAW0C,EAAAA,mBACvE,SAAAV,MAACW,EAAA,CAAU,KAAA9B,EAAY,QAAAP,EAAkB,UAAWG,EAAkB,UAAWF,CAAA,CAAkB,CAAA,CACrG,CAAA,CAAA,CAAA,CAIR"}
+{"version":3,"file":"Modal.js","sources":["../../../../src/components/Modal/Modal.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\n\nimport classNames from 'classnames';\nimport {\n  NOOP,\n  Alignments,\n  Sizes,\n  MODAL_CONTAINER_CLASS,\n  MODAL_CLASS,\n  MODAL_HEADER_CLASS,\n  MODAL_FOOTER_CLASS,\n  Variants,\n  Directions,\n} from 'acinguiux-ds-react-base/consts';\n\nimport Dialog from './components/Dialog/Dialog';\nimport * as Styled from './Modal.styles';\nimport type { IModalProps } from './Modal.types';\nimport ModalLoading from './components/ModalLoading/ModalLoading';\nimport InfoBar from '../_internalComponents/InfoBar/InfoBar';\nimport Button from '../Button/Button';\nimport CrossIcon from '../Icon/components/Cross';\nimport ActionBar from '../_internalComponents/ActionBar/ActionBar';\nimport { CloseButton } from './components/ModalLoading/ModalLoading.styles';\n\nconst Modal = ({\n  children,\n  className,\n  open,\n  headerBorder = true,\n  footerBorder = true,\n  bgColor = false,\n  padding = true,\n  onClose = NOOP,\n  header,\n  actions,\n  actionsDirection = Directions.Horizontal,\n  actionsAlignment = Alignments.Right,\n  loading = false,\n  loadingBody = 'Loading...',\n  size = Sizes.Medium,\n  closeButton = true,\n  maskClosable = true,\n  contentScrollable = false,\n  showHeader = true,\n  showFooter = true,\n  centered = false,\n  width = 520,\n  ...props\n}: IModalProps): ReactElement => {\n  const isWithoutHeaderAndFooter = !header && actions && actions?.length > 0;\n\n  return (\n    <Styled.Modal\n      $size={size}\n      as={Dialog}\n      prefixCls={MODAL_CLASS}\n      className={classNames(MODAL_CONTAINER_CLASS, className)}\n      visible={open}\n      onClose={onClose}\n      closable={closeButton}\n      maskClosable={maskClosable}\n      $centered={centered}\n      $contentScrollable={contentScrollable}\n      width={width}\n      {...props}\n    >\n      {!!showHeader && !!header && !loading && (\n        <Styled.ModalHeader $size={size} $headerBorder={headerBorder} className={MODAL_HEADER_CLASS}>\n          <Styled.ModalHeaderContent>\n            <InfoBar direction={Directions.Vertical} size={size} {...header} />\n          </Styled.ModalHeaderContent>\n          {!!closeButton && (\n            <Button\n              icon={<CrossIcon />}\n              iconOnly={true}\n              variant={Variants.Transparent}\n              size={size}\n              onClick={onClose}\n              aria-label=\"Close\"\n            />\n          )}\n        </Styled.ModalHeader>\n      )}\n      <Styled.ModalContent\n        $size={size}\n        $padding={padding}\n        $headerBorder={headerBorder}\n        $footerBorder={footerBorder}\n        $hasHeader={Boolean(showHeader && header)}\n        $hasFooter={Boolean(showFooter && actions)}\n        $bgColor={bgColor}\n        $contentScrollable={contentScrollable}\n        $bodyCentered={isWithoutHeaderAndFooter || loading}\n        $onlyBody={loading}\n      >\n        {!header && !!closeButton && !loading && (\n          <CloseButton\n            icon={<CrossIcon />}\n            iconOnly={true}\n            variant={Variants.Transparent}\n            size={size}\n            $paddingSize={size}\n            onClick={onClose}\n          />\n        )}\n        {loading ? (\n          <ModalLoading size={size} loadingBody={loadingBody} closeButton={closeButton} onClose={onClose} />\n        ) : (\n          children\n        )}\n      </Styled.ModalContent>\n      {!!showFooter && !!actions && !loading && (\n        <Styled.ModalFooter $size={size} $footerBorder={footerBorder} className={MODAL_FOOTER_CLASS}>\n          <ActionBar size={size} actions={actions} alignment={actionsAlignment} direction={actionsDirection} />\n        </Styled.ModalFooter>\n      )}\n    </Styled.Modal>\n  );\n};\n\nexport default Modal;\n"],"names":["Modal","children","className","open","headerBorder","footerBorder","bgColor","padding","onClose","NOOP","header","actions","actionsDirection","Directions","actionsAlignment","Alignments","loading","loadingBody","size","Sizes","closeButton","maskClosable","contentScrollable","showHeader","showFooter","centered","width","props","isWithoutHeaderAndFooter","jsxs","Styled.Modal","Dialog","MODAL_CLASS","classNames","MODAL_CONTAINER_CLASS","Styled.ModalHeader","MODAL_HEADER_CLASS","jsx","Styled.ModalHeaderContent","InfoBar","Button","CrossIcon","Variants","Styled.ModalContent","CloseButton","ModalLoading","Styled.ModalFooter","MODAL_FOOTER_CLASS","ActionBar"],"mappings":"2iBAyBMA,EAAQ,CAAC,CACb,SAAAC,EACA,UAAAC,EACA,KAAAC,EACA,aAAAC,EAAe,GACf,aAAAC,EAAe,GACf,QAAAC,EAAU,GACV,QAAAC,EAAU,GACV,QAAAC,EAAUC,EAAAA,KACV,OAAAC,EACA,QAAAC,EACA,iBAAAC,EAAmBC,EAAAA,WAAW,WAC9B,iBAAAC,EAAmBC,EAAAA,WAAW,MAC9B,QAAAC,EAAU,GACV,YAAAC,EAAc,aACd,KAAAC,EAAOC,EAAAA,MAAM,OACb,YAAAC,EAAc,GACd,aAAAC,EAAe,GACf,kBAAAC,EAAoB,GACpB,WAAAC,EAAa,GACb,WAAAC,EAAa,GACb,SAAAC,EAAW,GACX,MAAAC,EAAQ,IACR,GAAGC,CACL,IAAiC,CAC/B,MAAMC,EAA2B,CAAClB,GAAUC,GAAWA,GAAS,OAAS,EAEzE,OACEkB,EAAAA,KAACC,EAAAA,MAAA,CACC,MAAOZ,EACP,GAAIa,EACJ,UAAWC,EAAAA,YACX,UAAWC,EAAWC,EAAAA,sBAAuBhC,CAAS,EACtD,QAASC,EACT,QAAAK,EACA,SAAUY,EACV,aAAAC,EACA,UAAWI,EACX,mBAAoBH,EACpB,MAAAI,EACC,GAAGC,EAEH,SAAA,CAAA,CAAC,CAACJ,GAAc,CAAC,CAACb,GAAU,CAACM,GAC5Ba,EAAAA,KAACM,EAAAA,YAAA,CAAmB,MAAOjB,EAAM,cAAed,EAAc,UAAWgC,EAAAA,mBACvE,SAAA,CAAAC,EAAAA,IAACC,EAAAA,mBAAA,CACC,SAAAD,EAAAA,IAACE,EAAA,CAAQ,UAAW1B,EAAAA,WAAW,SAAU,KAAAK,EAAa,GAAGR,CAAA,CAAQ,CAAA,CACnE,EACC,CAAC,CAACU,GACDiB,EAAAA,IAACG,EAAA,CACC,WAAOC,EAAA,EAAU,EACjB,SAAU,GACV,QAASC,EAAAA,SAAS,YAClB,KAAAxB,EACA,QAASV,EACT,aAAW,OAAA,CAAA,CACb,EAEJ,EAEFqB,EAAAA,KAACc,EAAAA,aAAA,CACC,MAAOzB,EACP,SAAUX,EACV,cAAeH,EACf,cAAeC,EACf,WAAY,GAAQkB,GAAcb,GAClC,WAAY,GAAQc,GAAcb,GAClC,SAAUL,EACV,mBAAoBgB,EACpB,cAAeM,GAA4BZ,EAC3C,UAAWA,EAEV,SAAA,CAAA,CAACN,GAAU,CAAC,CAACU,GAAe,CAACJ,GAC5BqB,EAAAA,IAACO,EAAAA,YAAA,CACC,WAAOH,EAAA,EAAU,EACjB,SAAU,GACV,QAASC,EAAAA,SAAS,YAClB,KAAAxB,EACA,aAAcA,EACd,QAASV,CAAA,CAAA,EAGZQ,EACCqB,EAAAA,IAACQ,EAAA,CAAa,KAAA3B,EAAY,YAAAD,EAA0B,YAAAG,EAA0B,QAAAZ,EAAkB,EAEhGP,CAAA,CAAA,CAAA,EAGH,CAAC,CAACuB,GAAc,CAAC,CAACb,GAAW,CAACK,GAC7BqB,MAACS,EAAAA,YAAA,CAAmB,MAAO5B,EAAM,cAAeb,EAAc,UAAW0C,EAAAA,mBACvE,SAAAV,MAACW,EAAA,CAAU,KAAA9B,EAAY,QAAAP,EAAkB,UAAWG,EAAkB,UAAWF,CAAA,CAAkB,CAAA,CACrG,CAAA,CAAA,CAAA,CAIR"}

package/build/cjs/components/NavBar/NavBar.js

@@ -1,2 +1,2 @@
-"use strict";const s=require("react/jsx-runtime"),i=require("react"),K=require("classnames"),e=require("../../react-base/src/consts/index.js"),G=require("../Icon/components/LeftNavigation.js"),J=require("../Icon/components/LeftNavigationSolid.js"),P=require("./components/LastArea/LastArea.js"),Q=require("./components/FirstArea/FirstArea.js"),l=require("./NavBar.styles.js"),m=require("../Divider/Divider.js"),T=require("../../react-base/src/consts/classes.js"),U=i.forwardRef(({size:a=`${e.Sizes.Medium}`,className:O,direction:t=`${e.Directions.Horizontal}`,elevation:L,collapsed:S=!1,preventExpand:h=!1,expandedWidth:k=300,pectenArea:x="default",lockup:D,urlProps:y,header:C,avatarArea:d,avatarProps:j,items:$,topArea:v,onClick:A,startArea:f,endArea:q,itemsAlignment:V=`${e.Alignments.Left}`,expandMode:c="auto_push",itemRender:H,selectedPath:_,onSelect:p,onCollapsedChange:o,onExpandChange:u,...B},I)=>{const[n,z]=i.useState(()=>S),R=D??x,[N,b]=i.useState(()=>!1),r=i.useMemo(()=>t===e.Directions.Horizontal||!n||N,[t,n,N]);i.useEffect(()=>{u==null||u(r)},[r,u]),i.useEffect(()=>z(S),[S]);const M={vertical:"inline",horizontal:"horizontal"},F=i.useCallback(()=>{z(E=>!E),o==null||o(!n)},[o,n]),W=i.useCallback(()=>b(!0),[]),w=i.useCallback(()=>b(!1),[]);return s.jsxs(l.Wrapper,{onMouseLeave:c!=="manual"?w:e.NOOP,onMouseEnter:c!=="manual"?W:e.NOOP,$direction:t,$expandMode:c,$size:a,$isCollapsed:t===e.Directions.Vertical&&n,children:[!!v&&t!==e.Directions.Vertical&&v,s.jsxs(l.Nav,{as:t===e.Directions.Vertical?"nav":"header",$size:a,$expandMode:c,className:K(T.NAV_BAR_CLASS,O),$direction:t,$elevation:L,$collapsed:!r,$expandedWidth:k,ref:I,...B,children:[R!=="none"&&s.jsx(Q,{header:C,pectenArea:x,lockup:D,urlProps:y,onClick:A,collapsed:!r,size:a}),!!f&&t===e.Directions.Vertical&&s.jsx(l.DividerContainer,{children:s.jsx(m,{contrast:e.Contrasts.Subtle,size:e.Sizes.Small})}),f,s.jsx(l.MiddleArea,{$direction:t,$collapsed:!r,children:$&&s.jsx(l.StyledMenu,{inlineCollapsed:t===e.Directions.Vertical&&!r,items:$,$itemsAlignment:V,itemRender:H,mode:M[t],selectedPath:_,onSelect:p,size:a})}),!!q&&t===e.Directions.Vertical&&s.jsx(l.DividerContainer,{children:s.jsx(m,{contrast:e.Contrasts.Subtle,size:e.Sizes.Small})}),q,t===e.Directions.Vertical&&!h&&s.jsxs(s.Fragment,{children:[s.jsx(l.DividerContainer,{children:s.jsx(m,{contrast:e.Contrasts.Subtle,size:e.Sizes.Small})}),s.jsx(l.StyledMenu,{inlineCollapsed:t===e.Directions.Vertical&&!r,items:[{key:"expand",label:n?"Expand navigation":"Collapse navigation",itemIcon:n?s.jsx(J,{}):s.jsx(G,{})}],$itemsAlignment:V,mode:M[t],selectedKeys:[],noAnimate:!0,onClick:F,size:a})]}),t===e.Directions.Vertical&&(!!d||!!j)&&s.jsx(l.DividerContainer,{children:s.jsx(m,{contrast:e.Contrasts.Subtle,size:e.Sizes.Small})}),(!!d||!!j)&&s.jsx(P,{size:a,collapsed:t===e.Directions.Vertical&&!r,avatarArea:d,avatarProps:j})]})]})});module.exports=U;
+"use strict";const s=require("react/jsx-runtime"),n=require("react"),Q=require("classnames"),e=require("../../react-base/src/consts/index.js"),T=require("../Icon/components/LeftNavigation.js"),U=require("../Icon/components/LeftNavigationSolid.js"),X=require("./components/LastArea/LastArea.js"),Y=require("./components/FirstArea/FirstArea.js"),l=require("./NavBar.styles.js"),x=require("../Divider/Divider.js"),Z=require("../../react-base/src/consts/classes.js"),ee=n.forwardRef(({size:r=`${e.Sizes.Medium}`,className:V,direction:t=`${e.Directions.Horizontal}`,elevation:z,collapsed:c=!1,preventExpand:M=!1,expandedWidth:O=300,pectenArea:m="default",lockup:$,urlProps:b,header:y,avatarArea:u,avatarProps:d,items:j,topArea:S,onClick:L,startArea:k,endArea:f,defaultOpenToSelected:g=!1,itemsAlignment:C=`${e.Alignments.Left}`,expandMode:o="auto_push",itemRender:A,selectedPath:E,onSelect:H,onCollapsedChange:D,onExpandChange:v,..._},B)=>{const{indicatorPosition:I,iconPosition:R,type:F="default",...P}=_,[a,h]=n.useState(()=>c),W=$??m,[p,q]=n.useState(()=>!1),i=n.useMemo(()=>t===e.Directions.Horizontal||!a||p,[t,a,p]);n.useEffect(()=>{v?.(i)},[i,v]),n.useEffect(()=>h(c),[c]);const N={vertical:"inline",horizontal:"horizontal"},w=n.useCallback(()=>{h(J=>!J),D?.(!a)},[D,a]),K=n.useCallback(()=>q(!0),[]),G=n.useCallback(()=>q(!1),[]);return s.jsxs(l.Wrapper,{onMouseLeave:o!=="manual"?G:e.NOOP,onMouseEnter:o!=="manual"?K:e.NOOP,$direction:t,$expandMode:o,$size:r,$isCollapsed:t===e.Directions.Vertical&&a,$type:F,children:[!!S&&t!==e.Directions.Vertical&&S,s.jsxs(l.Nav,{as:t===e.Directions.Vertical?"nav":"header",$size:r,$expandMode:o,className:Q(Z.NAV_BAR_CLASS,V),$direction:t,$elevation:z,$collapsed:!i,$expandedWidth:O,ref:B,...P,children:[W!=="none"&&s.jsx(Y,{header:y,pectenArea:m,lockup:$,urlProps:b,onClick:L,collapsed:!i,size:r}),k,s.jsx(l.MiddleArea,{$direction:t,$collapsed:!i,children:j&&s.jsx(l.StyledMenu,{inlineCollapsed:t===e.Directions.Vertical&&!i,items:j,$itemsAlignment:C,itemRender:A,mode:N[t],selectedPath:E,defaultOpenToSelected:g,onSelect:H,size:r,indicatorPosition:I,iconPosition:R})}),!!f&&t===e.Directions.Vertical&&s.jsx(l.DividerContainer,{children:s.jsx(x,{contrast:e.Contrasts.Subtle,size:e.Sizes.Small})}),f,t===e.Directions.Vertical&&!M&&s.jsxs(s.Fragment,{children:[s.jsx(l.DividerContainer,{children:s.jsx(x,{contrast:e.Contrasts.Subtle,size:e.Sizes.Small})}),s.jsx(l.StyledMenu,{inlineCollapsed:t===e.Directions.Vertical&&!i,items:[{key:"expand",label:a?"Expand navigation":"Collapse navigation",itemIcon:a?s.jsx(U,{}):s.jsx(T,{})}],$itemsAlignment:C,mode:N[t],selectedKeys:[],noAnimate:!0,onClick:w,size:r})]}),t===e.Directions.Vertical&&(!!u||!!d)&&s.jsx(l.DividerContainer,{children:s.jsx(x,{contrast:e.Contrasts.Subtle,size:e.Sizes.Small})}),(!!u||!!d)&&s.jsx(X,{size:r,collapsed:t===e.Directions.Vertical&&!i,avatarArea:u,avatarProps:d})]})]})});module.exports=ee;
 //# sourceMappingURL=NavBar.js.map

package/build/cjs/components/NavBar/NavBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavBar.js","sources":["../../../../src/components/NavBar/NavBar.tsx"],"sourcesContent":["import {\n  forwardRef,\n  type MouseEventHandler,\n  type ReactElement,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n} from 'react';\n\nimport classNames from 'classnames';\nimport { NAV_BAR_CLASS, Sizes, Directions, Contrasts, Alignments, NOOP } from 'acinguiux-ds-react-base/consts';\nimport type { NavBarTypes } from 'acinguiux-ds-react-base/components/NavBar';\n\nimport LeftNavigation from '../Icon/components/LeftNavigation';\nimport LeftNavigationSolid from '../Icon/components/LeftNavigationSolid';\nimport LastArea from './components/LastArea/LastArea';\nimport FirstArea from './components/FirstArea/FirstArea';\nimport { Wrapper, MiddleArea, Nav, StyledMenu, DividerContainer } from './NavBar.styles';\nimport type { INavBarProps } from './NavBar.types';\nimport Divider from '../Divider/Divider';\nimport type { IMenuProps } from '../Menu/Menu.types';\n\nconst NavBar = forwardRef<HTMLElement, INavBarProps>(\n  (\n    {\n      size = `${Sizes.Medium}`,\n      className,\n      direction = `${Directions.Horizontal}`,\n      elevation,\n      collapsed = false,\n      preventExpand = false,\n      expandedWidth = 300,\n      pectenArea = 'default',\n      lockup,\n      urlProps,\n      header,\n      avatarArea,\n      avatarProps,\n      items,\n      topArea,\n      onClick,\n      startArea,\n      endArea,\n      itemsAlignment = `${Alignments.Left}`,\n      expandMode = 'auto_push',\n      itemRender,\n      selectedPath,\n      onSelect,\n      onCollapsedChange,\n      onExpandChange,\n      ...rest\n    },\n    ref,\n  ): ReactElement => {\n    const [isCollapsed, setIsCollapsed] = useState<boolean>(() => collapsed);\n    const lockupArea = lockup ?? pectenArea;\n    const [isHovered, setIsHovered] = useState<boolean>(() => false);\n    const isOpen = useMemo(\n      () => direction === Directions.Horizontal || !isCollapsed || isHovered,\n      [direction, isCollapsed, isHovered],\n    );\n\n    useEffect(() => {\n      onExpandChange?.(isOpen);\n    }, [isOpen, onExpandChange]);\n\n    useEffect(() => setIsCollapsed(collapsed), [collapsed]);\n\n    const menuModeMap: { [Property in NavBarTypes.Direction]: IMenuProps['mode'] } = {\n      vertical: 'inline',\n      horizontal: 'horizontal',\n    };\n\n    const handleOnExpandClick = useCallback(() => {\n      setIsCollapsed((prev) => !prev);\n      onCollapsedChange?.(!isCollapsed);\n    }, [onCollapsedChange, isCollapsed]);\n\n    const handleOnEnter: MouseEventHandler = useCallback(() => setIsHovered(true), []);\n    const handleOnLeave: MouseEventHandler = useCallback(() => setIsHovered(false), []);\n\n    return (\n      <Wrapper\n        onMouseLeave={expandMode !== 'manual' ? handleOnLeave : NOOP}\n        onMouseEnter={expandMode !== 'manual' ? handleOnEnter : NOOP}\n        $direction={direction}\n        $expandMode={expandMode}\n        $size={size}\n        $isCollapsed={direction === Directions.Vertical && isCollapsed}\n      >\n        {!!topArea && direction !== Directions.Vertical && topArea}\n        <Nav\n          as={direction === Directions.Vertical ? 'nav' : 'header'}\n          $size={size}\n          $expandMode={expandMode}\n          className={classNames(NAV_BAR_CLASS, className)}\n          $direction={direction}\n          $elevation={elevation}\n          $collapsed={!isOpen}\n          $expandedWidth={expandedWidth}\n          ref={ref}\n          {...rest}\n        >\n          {lockupArea !== 'none' && (\n            <FirstArea\n              header={header}\n              pectenArea={pectenArea}\n              lockup={lockup}\n              urlProps={urlProps}\n              onClick={onClick}\n              collapsed={!isOpen}\n              size={size}\n            />\n          )}\n          {!!startArea && direction === Directions.Vertical && (\n            <DividerContainer>\n              <Divider contrast={Contrasts.Subtle} size={Sizes.Small} />\n            </DividerContainer>\n          )}\n          {startArea}\n          <MiddleArea $direction={direction} $collapsed={!isOpen}>\n            {items && (\n              <StyledMenu\n                inlineCollapsed={direction === Directions.Vertical && !isOpen}\n                items={items}\n                $itemsAlignment={itemsAlignment}\n                itemRender={itemRender}\n                mode={menuModeMap[direction] as INavBarProps['direction']}\n                selectedPath={selectedPath}\n                onSelect={onSelect}\n                size={size}\n              />\n            )}\n          </MiddleArea>\n          {!!endArea && direction === Directions.Vertical && (\n            <DividerContainer>\n              <Divider contrast={Contrasts.Subtle} size={Sizes.Small} />\n            </DividerContainer>\n          )}\n          {endArea}\n          {direction === Directions.Vertical && !preventExpand && (\n            <>\n              <DividerContainer>\n                <Divider contrast={Contrasts.Subtle} size={Sizes.Small} />\n              </DividerContainer>\n              <StyledMenu\n                inlineCollapsed={direction === Directions.Vertical && !isOpen}\n                items={[\n                  {\n                    key: 'expand',\n                    label: isCollapsed ? 'Expand navigation' : 'Collapse navigation',\n                    itemIcon: isCollapsed ? <LeftNavigationSolid /> : <LeftNavigation />,\n                  },\n                ]}\n                $itemsAlignment={itemsAlignment}\n                mode={menuModeMap[direction] as INavBarProps['direction']}\n                selectedKeys={[]}\n                noAnimate={true}\n                onClick={handleOnExpandClick}\n                size={size}\n              />\n            </>\n          )}\n          {direction === Directions.Vertical && (!!avatarArea || !!avatarProps) && (\n            <DividerContainer>\n              <Divider contrast={Contrasts.Subtle} size={Sizes.Small} />\n            </DividerContainer>\n          )}\n          {(!!avatarArea || !!avatarProps) && (\n            <LastArea\n              size={size}\n              collapsed={direction === Directions.Vertical && !isOpen}\n              avatarArea={avatarArea}\n              avatarProps={avatarProps}\n            />\n          )}\n        </Nav>\n      </Wrapper>\n    );\n  },\n);\n\nexport default NavBar;\n"],"names":["NavBar","forwardRef","size","Sizes","className","direction","Directions","elevation","collapsed","preventExpand","expandedWidth","pectenArea","lockup","urlProps","header","avatarArea","avatarProps","items","topArea","onClick","startArea","endArea","itemsAlignment","Alignments","expandMode","itemRender","selectedPath","onSelect","onCollapsedChange","onExpandChange","rest","ref","isCollapsed","setIsCollapsed","useState","lockupArea","isHovered","setIsHovered","isOpen","useMemo","useEffect","menuModeMap","handleOnExpandClick","useCallback","prev","handleOnEnter","handleOnLeave","jsxs","Wrapper","NOOP","Nav","classNames","NAV_BAR_CLASS","jsx","FirstArea","DividerContainer","Divider","Contrasts","MiddleArea","StyledMenu","Fragment","LeftNavigationSolid","LeftNavigation","LastArea"],"mappings":"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"}
+{"version":3,"file":"NavBar.js","sources":["../../../../src/components/NavBar/NavBar.tsx"],"sourcesContent":["import {\n  forwardRef,\n  type MouseEventHandler,\n  type ReactElement,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n} from 'react';\n\nimport classNames from 'classnames';\nimport { NAV_BAR_CLASS, Sizes, Directions, Contrasts, Alignments, NOOP } from 'acinguiux-ds-react-base/consts';\nimport type { NavBarTypes } from 'acinguiux-ds-react-base/components/NavBar';\n\nimport LeftNavigation from '../Icon/components/LeftNavigation';\nimport LeftNavigationSolid from '../Icon/components/LeftNavigationSolid';\nimport LastArea from './components/LastArea/LastArea';\nimport FirstArea from './components/FirstArea/FirstArea';\nimport { Wrapper, MiddleArea, Nav, StyledMenu, DividerContainer } from './NavBar.styles';\nimport { INavBarProps, INavBarPropsImpl } from './NavBar.types';\nimport Divider from '../Divider/Divider';\nimport type { IMenuProps } from '../Menu/Menu.types';\n\nconst NavBar = forwardRef<HTMLElement, INavBarProps>(\n  (\n    {\n      size = `${Sizes.Medium}`,\n      className,\n      direction = `${Directions.Horizontal}`,\n      elevation,\n      collapsed = false,\n      preventExpand = false,\n      expandedWidth = 300,\n      pectenArea = 'default',\n      lockup,\n      urlProps,\n      header,\n      avatarArea,\n      avatarProps,\n      items,\n      topArea,\n      onClick,\n      startArea,\n      endArea,\n      defaultOpenToSelected = false,\n      itemsAlignment = `${Alignments.Left}`,\n      expandMode = 'auto_push',\n      itemRender,\n      selectedPath,\n      onSelect,\n      onCollapsedChange,\n      onExpandChange,\n      ...props\n    },\n    ref,\n  ): ReactElement => {\n    const { indicatorPosition, iconPosition, type = 'default', ...rest } = props as INavBarPropsImpl;\n    const [isCollapsed, setIsCollapsed] = useState<boolean>(() => collapsed);\n    const lockupArea = lockup ?? pectenArea;\n    const [isHovered, setIsHovered] = useState<boolean>(() => false);\n    const isOpen = useMemo(\n      () => direction === Directions.Horizontal || !isCollapsed || isHovered,\n      [direction, isCollapsed, isHovered],\n    );\n\n    useEffect(() => {\n      onExpandChange?.(isOpen);\n    }, [isOpen, onExpandChange]);\n\n    useEffect(() => setIsCollapsed(collapsed), [collapsed]);\n\n    const menuModeMap: { [Property in NavBarTypes.Direction]: IMenuProps['mode'] } = {\n      vertical: 'inline',\n      horizontal: 'horizontal',\n    };\n\n    const handleOnExpandClick = useCallback(() => {\n      setIsCollapsed((prev) => !prev);\n      onCollapsedChange?.(!isCollapsed);\n    }, [onCollapsedChange, isCollapsed]);\n\n    const handleOnEnter: MouseEventHandler = useCallback(() => setIsHovered(true), []);\n    const handleOnLeave: MouseEventHandler = useCallback(() => setIsHovered(false), []);\n\n    return (\n      <Wrapper\n        onMouseLeave={expandMode !== 'manual' ? handleOnLeave : NOOP}\n        onMouseEnter={expandMode !== 'manual' ? handleOnEnter : NOOP}\n        $direction={direction}\n        $expandMode={expandMode}\n        $size={size}\n        $isCollapsed={direction === Directions.Vertical && isCollapsed}\n        $type={type}\n      >\n        {!!topArea && direction !== Directions.Vertical && topArea}\n        <Nav\n          as={direction === Directions.Vertical ? 'nav' : 'header'}\n          $size={size}\n          $expandMode={expandMode}\n          className={classNames(NAV_BAR_CLASS, className)}\n          $direction={direction}\n          $elevation={elevation}\n          $collapsed={!isOpen}\n          $expandedWidth={expandedWidth}\n          ref={ref}\n          {...rest}\n        >\n          {lockupArea !== 'none' && (\n            <FirstArea\n              header={header}\n              pectenArea={pectenArea}\n              lockup={lockup}\n              urlProps={urlProps}\n              onClick={onClick}\n              collapsed={!isOpen}\n              size={size}\n            />\n          )}\n          {startArea}\n          <MiddleArea $direction={direction} $collapsed={!isOpen}>\n            {items && (\n              <StyledMenu\n                inlineCollapsed={direction === Directions.Vertical && !isOpen}\n                items={items}\n                $itemsAlignment={itemsAlignment}\n                itemRender={itemRender}\n                mode={menuModeMap[direction] as INavBarProps['direction']}\n                selectedPath={selectedPath}\n                defaultOpenToSelected={defaultOpenToSelected}\n                onSelect={onSelect}\n                size={size}\n                indicatorPosition={indicatorPosition}\n                iconPosition={iconPosition}\n              />\n            )}\n          </MiddleArea>\n          {!!endArea && direction === Directions.Vertical && (\n            <DividerContainer>\n              <Divider contrast={Contrasts.Subtle} size={Sizes.Small} />\n            </DividerContainer>\n          )}\n          {endArea}\n          {direction === Directions.Vertical && !preventExpand && (\n            <>\n              <DividerContainer>\n                <Divider contrast={Contrasts.Subtle} size={Sizes.Small} />\n              </DividerContainer>\n              <StyledMenu\n                inlineCollapsed={direction === Directions.Vertical && !isOpen}\n                items={[\n                  {\n                    key: 'expand',\n                    label: isCollapsed ? 'Expand navigation' : 'Collapse navigation',\n                    itemIcon: isCollapsed ? <LeftNavigationSolid /> : <LeftNavigation />,\n                  },\n                ]}\n                $itemsAlignment={itemsAlignment}\n                mode={menuModeMap[direction] as INavBarProps['direction']}\n                selectedKeys={[]}\n                noAnimate={true}\n                onClick={handleOnExpandClick}\n                size={size}\n              />\n            </>\n          )}\n          {direction === Directions.Vertical && (!!avatarArea || !!avatarProps) && (\n            <DividerContainer>\n              <Divider contrast={Contrasts.Subtle} size={Sizes.Small} />\n            </DividerContainer>\n          )}\n          {(!!avatarArea || !!avatarProps) && (\n            <LastArea\n              size={size}\n              collapsed={direction === Directions.Vertical && !isOpen}\n              avatarArea={avatarArea}\n              avatarProps={avatarProps}\n            />\n          )}\n        </Nav>\n      </Wrapper>\n    );\n  },\n);\n\nexport default NavBar;\n"],"names":["NavBar","forwardRef","size","Sizes","className","direction","Directions","elevation","collapsed","preventExpand","expandedWidth","pectenArea","lockup","urlProps","header","avatarArea","avatarProps","items","topArea","onClick","startArea","endArea","defaultOpenToSelected","itemsAlignment","Alignments","expandMode","itemRender","selectedPath","onSelect","onCollapsedChange","onExpandChange","props","ref","indicatorPosition","iconPosition","type","rest","isCollapsed","setIsCollapsed","useState","lockupArea","isHovered","setIsHovered","isOpen","useMemo","useEffect","menuModeMap","handleOnExpandClick","useCallback","prev","handleOnEnter","handleOnLeave","jsxs","Wrapper","NOOP","Nav","classNames","NAV_BAR_CLASS","jsx","FirstArea","MiddleArea","StyledMenu","DividerContainer","Divider","Contrasts","Fragment","LeftNavigationSolid","LeftNavigation","LastArea"],"mappings":"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"}

package/build/cjs/components/NavBar/NavBar.styles.js

@@ -1,15 +1,15 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("styled-components"),r=require("../../react-base/src/consts/index.js"),s=require("../../react-base/src/components/NavBar/NavBar.consts.js"),c=require("../../react-base/src/theme/types/layer.js"),g=require("../../react-base/src/components/Menu/Menu.consts.js"),f=require("../Menu/Menu.js"),p=require("../../react-base/src/consts/classes.js"),x=require("../../react-base/src/components/NavBar/utils/styleUtils.js"),d=t.styled(f)`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("styled-components"),r=require("../../react-base/src/consts/index.js"),a=require("../../react-base/src/components/NavBar/NavBar.consts.js"),d=require("../../react-base/src/theme/types/layer.js"),g=require("../../react-base/src/components/Menu/Menu.consts.js"),f=require("../Menu/Menu.js"),p=require("../../react-base/src/consts/classes.js"),x=require("../../react-base/src/components/NavBar/utils/styleUtils.js"),u=t.styled(f)`
   ${({$itemsAlignment:e})=>t.css`
     flex: 1 1 0;
     max-height: fit-content;
     justify-content: ${x.getItemsAlignment(e)};
     overflow: hidden auto;
   `}
-`,v=(e,n,i,o)=>e===r.Directions.Vertical?n==="auto_cover"&&o?`${s.consts[i].height}px`:"auto":"100%",y=t.styled.div(({$direction:e,$expandMode:n,$size:i,$isCollapsed:o})=>t.css`
+`,v=(e,n,i,o)=>e===r.Directions.Vertical?n==="auto_cover"&&o?`${a.consts[i].height}px`:"auto":"100%",y=t.styled.div(({$direction:e,$expandMode:n,$size:i,$isCollapsed:o,$type:s})=>t.css`
     position: relative;
-    height: ${e===r.Directions.Vertical?"100%":`${s.consts[i].height}px`};
+    height: ${e===r.Directions.Vertical?"100%":`${a.consts[i].height[s]}px`};
     width: ${v(e,n,i,o)};
-  `),$=t.styled.header(({$direction:e,$elevation:n,$collapsed:i,theme:o,$expandedWidth:u,$size:a,$expandMode:h})=>{const l=o.layer({foundation:"surface"});return t.css`
+  `),$=t.styled.header(({$direction:e,$elevation:n,$collapsed:i,theme:o,$expandedWidth:s,$size:l,$expandMode:h})=>{const c=o.layer({foundation:"surface"});return t.css`
       z-index: ${r.ZIndexes.NAVBAR};
       position: ${h==="auto_cover"&&i?"absolute":"relative"};
       display: flex;
@@ -18,15 +18,15 @@
       height: 100%;
       width: 100%;
       filter: ${n?o.dropShadows.low1:null};
-      color: ${l[c.Variables.TextOnFoundationStrong]};
-      background-color: ${l[c.Variables.BackgroundFoundation]};
+      color: ${c[d.Variables.TextOnFoundationStrong]};
+      background-color: ${c[d.Variables.BackgroundFoundation]};
       transition: width 0.3s ease-out;
 
       ${e===r.Directions.Vertical&&t.css`
-        width: ${i?`${s.consts[a].height}px`:`${u}px`};
+        width: ${i?`${a.consts[l].height.default}px`:`${s}px`};
 
-        ${d} {
-          width: calc(100% + ${i?0:g.consts[a].itemListMarginLeft}px);
+        ${u} {
+          width: calc(100% + ${i?0:g.consts[l].itemListMarginLeft}px);
         }
 
         .${p.NAV_BAR_CLASS}-icon {
@@ -46,5 +46,5 @@
   `),m=t.styled.div`
   align-items: center;
   padding: 0 12px;
-`;exports.DividerContainer=m;exports.MiddleArea=w;exports.Nav=$;exports.StyledMenu=d;exports.Wrapper=y;
+`;exports.DividerContainer=m;exports.MiddleArea=w;exports.Nav=$;exports.StyledMenu=u;exports.Wrapper=y;
 //# sourceMappingURL=NavBar.styles.js.map

package/build/cjs/components/NavBar/NavBar.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavBar.styles.js","sources":["../../../../src/components/NavBar/NavBar.styles.ts"],"sourcesContent":["import { styled, css } from 'styled-components';\nimport { NAV_BAR_CLASS, Directions, ZIndexes } from 'acinguiux-ds-react-base/consts';\nimport type { PickTransient } from 'acinguiux-ds-react-base/types';\nimport { NavBarConsts, NavBarUtils } from 'acinguiux-ds-react-base/components/NavBar';\nimport { Variables } from 'acinguiux-ds-react-base/theme';\nimport { MenuConsts } from 'acinguiux-ds-react-base/components/Menu';\n\nimport type { INavBarProps, INavBarPropsWithReqSize } from './NavBar.types';\nimport Menu from '../Menu/Menu';\nimport type { IMenuProps } from '../Menu/Menu.types';\n\nconst StyledMenu = styled(Menu)<IMenuProps & PickTransient<INavBarProps, 'itemsAlignment'>>`\n  ${({ $itemsAlignment }) => css`\n    flex: 1 1 0;\n    max-height: fit-content;\n    justify-content: ${NavBarUtils.getItemsAlignment($itemsAlignment)};\n    overflow: hidden auto;\n  `}\n`;\n\nconst getWrapperWidth = (\n  direction: INavBarPropsWithReqSize['direction'],\n  expandMode: INavBarPropsWithReqSize['expandMode'],\n  size: INavBarPropsWithReqSize['size'],\n  isCollapsed: boolean,\n): string => {\n  if (direction === Directions.Vertical) {\n    return expandMode === 'auto_cover' && isCollapsed ? `${NavBarConsts.consts[size].height}px` : 'auto';\n  }\n\n  return '100%';\n};\n\nconst Wrapper = styled.div<\n  PickTransient<INavBarPropsWithReqSize, 'direction' | 'expandMode' | 'size'> & { $isCollapsed: boolean }\n>(\n  ({ $direction, $expandMode, $size, $isCollapsed }) => css`\n    position: relative;\n    height: ${$direction === Directions.Vertical ? '100%' : `${NavBarConsts.consts[$size].height}px`};\n    width: ${getWrapperWidth($direction, $expandMode, $size, $isCollapsed)};\n  `,\n);\n\ntype NavPropsKeys = 'size' | 'direction' | 'elevation' | 'collapsed' | 'expandMode' | 'expandedWidth';\ntype NavProps = PickTransient<INavBarPropsWithReqSize, NavPropsKeys>;\n\nconst Nav = styled.header<NavProps>(\n  ({ $direction, $elevation, $collapsed, theme, $expandedWidth, $size, $expandMode }) => {\n    const layer = theme.layer({ foundation: 'surface' });\n\n    return css`\n      z-index: ${ZIndexes.NAVBAR};\n      position: ${$expandMode === 'auto_cover' && $collapsed ? 'absolute' : 'relative'};\n      display: flex;\n      flex-flow: ${$direction === Directions.Horizontal ? 'row' : 'column'} nowrap;\n      align-items: stretch;\n      height: 100%;\n      width: 100%;\n      filter: ${$elevation ? theme.dropShadows.low1 : null};\n      color: ${layer[Variables.TextOnFoundationStrong]};\n      background-color: ${layer[Variables.BackgroundFoundation]};\n      transition: width 0.3s ease-out;\n\n      ${$direction === Directions.Vertical &&\n      css`\n        width: ${$collapsed ? `${NavBarConsts.consts[$size].height}px` : `${$expandedWidth}px`};\n\n        ${StyledMenu} {\n          width: calc(100% + ${$collapsed ? 0 : MenuConsts.consts[$size].itemListMarginLeft}px);\n        }\n\n        .${NAV_BAR_CLASS}-icon {\n          transform: rotate(${$collapsed ? 0 : 180}deg);\n        }\n      `}\n    `;\n  },\n);\n\nconst MiddleArea = styled.div<PickTransient<INavBarProps, 'direction' | 'collapsed'>>(\n  ({ $direction, $collapsed }) => css`\n    position: relative;\n    display: flex;\n    flex-shrink: ${$collapsed ? 0 : 1};\n    flex-grow: 1;\n    flex-direction: ${$direction === Directions.Horizontal ? 'row' : 'column'};\n    align-items: stretch;\n    min-width: 0;\n    z-index: 1;\n    overflow: hidden auto;\n  `,\n);\n\nconst DividerContainer = styled.div`\n  align-items: center;\n  padding: 0 12px;\n`;\n\nexport { Wrapper, Nav, MiddleArea, StyledMenu, DividerContainer };\n"],"names":["StyledMenu","styled","Menu","$itemsAlignment","css","NavBarUtils.getItemsAlignment","getWrapperWidth","direction","expandMode","size","isCollapsed","Directions","NavBarConsts.consts","Wrapper","$direction","$expandMode","$size","$isCollapsed","Nav","$elevation","$collapsed","theme","$expandedWidth","layer","ZIndexes","Variables","MenuConsts.consts","NAV_BAR_CLASS","MiddleArea","DividerContainer"],"mappings":"yhBAWMA,EAAaC,EAAAA,OAAOC,CAAI;AAAA,IAC1B,CAAC,CAAE,gBAAAC,CAAA,IAAsBC,EAAAA;AAAAA;AAAAA;AAAAA,uBAGNC,EAAAA,kBAA8BF,CAAe,CAAC;AAAA;AAAA,GAElE;AAAA,EAGGG,EAAkB,CACtBC,EACAC,EACAC,EACAC,IAEIH,IAAcI,EAAAA,WAAW,SACpBH,IAAe,cAAgBE,EAAc,GAAGE,SAAoBH,CAAI,EAAE,MAAM,KAAO,OAGzF,OAGHI,EAAUZ,EAAAA,OAAO,IAGrB,CAAC,CAAE,WAAAa,EAAY,YAAAC,EAAa,MAAAC,EAAO,aAAAC,KAAmBb,EAAAA;AAAAA;AAAAA,cAE1CU,IAAeH,EAAAA,WAAW,SAAW,OAAS,GAAGC,EAAAA,OAAoBI,CAAK,EAAE,MAAM,IAAI;AAAA,aACvFV,EAAgBQ,EAAYC,EAAaC,EAAOC,CAAY,CAAC;AAAA,GAE1E,EAKMC,EAAMjB,EAAAA,OAAO,OACjB,CAAC,CAAE,WAAAa,EAAY,WAAAK,EAAY,WAAAC,EAAY,MAAAC,EAAO,eAAAC,EAAgB,MAAAN,EAAO,YAAAD,KAAkB,CACrF,MAAMQ,EAAQF,EAAM,MAAM,CAAE,WAAY,UAAW,EAEnD,OAAOjB,EAAAA;AAAAA,iBACMoB,EAAAA,SAAS,MAAM;AAAA,kBACdT,IAAgB,cAAgBK,EAAa,WAAa,UAAU;AAAA;AAAA,mBAEnEN,IAAeH,EAAAA,WAAW,WAAa,MAAQ,QAAQ;AAAA;AAAA;AAAA;AAAA,gBAI1DQ,EAAaE,EAAM,YAAY,KAAO,IAAI;AAAA,eAC3CE,EAAME,YAAU,sBAAsB,CAAC;AAAA,0BAC5BF,EAAME,YAAU,oBAAoB,CAAC;AAAA;AAAA;AAAA,QAGvDX,IAAeH,aAAW,UAC5BP,EAAAA;AAAAA,iBACWgB,EAAa,GAAGR,EAAAA,OAAoBI,CAAK,EAAE,MAAM,KAAO,GAAGM,CAAc,IAAI;AAAA;AAAA,UAEpFtB,CAAU;AAAA,+BACWoB,EAAa,EAAIM,EAAAA,OAAkBV,CAAK,EAAE,kBAAkB;AAAA;AAAA;AAAA,WAGhFW,eAAa;AAAA,8BACMP,EAAa,EAAI,GAAG;AAAA;AAAA,OAE3C;AAAA,KAEL,CACF,EAEMQ,EAAa3B,EAAAA,OAAO,IACxB,CAAC,CAAE,WAAAa,EAAY,WAAAM,CAAA,IAAiBhB,EAAAA;AAAAA;AAAAA;AAAAA,mBAGfgB,EAAa,EAAI,CAAC;AAAA;AAAA,sBAEfN,IAAeH,EAAAA,WAAW,WAAa,MAAQ,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,GAM7E,EAEMkB,EAAmB5B,EAAAA,OAAO;AAAA;AAAA;AAAA"}
+{"version":3,"file":"NavBar.styles.js","sources":["../../../../src/components/NavBar/NavBar.styles.ts"],"sourcesContent":["import { styled, css } from 'styled-components';\nimport { NAV_BAR_CLASS, Directions, ZIndexes } from 'acinguiux-ds-react-base/consts';\nimport type { PickTransient } from 'acinguiux-ds-react-base/types';\nimport { NavBarConsts, NavBarUtils } from 'acinguiux-ds-react-base/components/NavBar';\nimport { Variables } from 'acinguiux-ds-react-base/theme';\nimport { MenuConsts } from 'acinguiux-ds-react-base/components/Menu';\n\nimport type { INavBarProps, INavBarPropsWithReqSize } from './NavBar.types';\nimport Menu from '../Menu/Menu';\nimport type { IMenuProps } from '../Menu/Menu.types';\n\nconst StyledMenu = styled(Menu)<IMenuProps & PickTransient<INavBarProps, 'itemsAlignment'>>`\n  ${({ $itemsAlignment }) => css`\n    flex: 1 1 0;\n    max-height: fit-content;\n    justify-content: ${NavBarUtils.getItemsAlignment($itemsAlignment)};\n    overflow: hidden auto;\n  `}\n`;\n\nconst getWrapperWidth = (\n  direction: INavBarPropsWithReqSize['direction'],\n  expandMode: INavBarPropsWithReqSize['expandMode'],\n  size: INavBarPropsWithReqSize['size'],\n  isCollapsed: boolean,\n): string => {\n  if (direction === Directions.Vertical) {\n    return expandMode === 'auto_cover' && isCollapsed ? `${NavBarConsts.consts[size].height}px` : 'auto';\n  }\n\n  return '100%';\n};\n\nconst Wrapper = styled.div<\n  PickTransient<INavBarPropsWithReqSize, 'direction' | 'expandMode' | 'size'> & {\n    $isCollapsed: boolean;\n    $type: 'default' | 'mobile';\n  }\n>(\n  ({ $direction, $expandMode, $size, $isCollapsed, $type }) => css`\n    position: relative;\n    height: ${$direction === Directions.Vertical ? '100%' : `${NavBarConsts.consts[$size].height[$type]}px`};\n    width: ${getWrapperWidth($direction, $expandMode, $size, $isCollapsed)};\n  `,\n);\n\ntype NavPropsKeys = 'size' | 'direction' | 'elevation' | 'collapsed' | 'expandMode' | 'expandedWidth';\ntype NavProps = PickTransient<INavBarPropsWithReqSize, NavPropsKeys>;\n\nconst Nav = styled.header<NavProps>(\n  ({ $direction, $elevation, $collapsed, theme, $expandedWidth, $size, $expandMode }) => {\n    const layer = theme.layer({ foundation: 'surface' });\n\n    return css`\n      z-index: ${ZIndexes.NAVBAR};\n      position: ${$expandMode === 'auto_cover' && $collapsed ? 'absolute' : 'relative'};\n      display: flex;\n      flex-flow: ${$direction === Directions.Horizontal ? 'row' : 'column'} nowrap;\n      align-items: stretch;\n      height: 100%;\n      width: 100%;\n      filter: ${$elevation ? theme.dropShadows.low1 : null};\n      color: ${layer[Variables.TextOnFoundationStrong]};\n      background-color: ${layer[Variables.BackgroundFoundation]};\n      transition: width 0.3s ease-out;\n\n      ${$direction === Directions.Vertical &&\n      css`\n        width: ${$collapsed ? `${NavBarConsts.consts[$size].height.default}px` : `${$expandedWidth}px`};\n\n        ${StyledMenu} {\n          width: calc(100% + ${$collapsed ? 0 : MenuConsts.consts[$size].itemListMarginLeft}px);\n        }\n\n        .${NAV_BAR_CLASS}-icon {\n          transform: rotate(${$collapsed ? 0 : 180}deg);\n        }\n      `}\n    `;\n  },\n);\n\nconst MiddleArea = styled.div<PickTransient<INavBarProps, 'direction' | 'collapsed'>>(\n  ({ $direction, $collapsed }) => css`\n    position: relative;\n    display: flex;\n    flex-shrink: ${$collapsed ? 0 : 1};\n    flex-grow: 1;\n    flex-direction: ${$direction === Directions.Horizontal ? 'row' : 'column'};\n    align-items: stretch;\n    min-width: 0;\n    z-index: 1;\n    overflow: hidden auto;\n  `,\n);\n\nconst DividerContainer = styled.div`\n  align-items: center;\n  padding: 0 12px;\n`;\n\nexport { Wrapper, Nav, MiddleArea, StyledMenu, DividerContainer };\n"],"names":["StyledMenu","styled","Menu","$itemsAlignment","css","NavBarUtils.getItemsAlignment","getWrapperWidth","direction","expandMode","size","isCollapsed","Directions","NavBarConsts.consts","Wrapper","$direction","$expandMode","$size","$isCollapsed","$type","Nav","$elevation","$collapsed","theme","$expandedWidth","layer","ZIndexes","Variables","MenuConsts.consts","NAV_BAR_CLASS","MiddleArea","DividerContainer"],"mappings":"yhBAWMA,EAAaC,EAAAA,OAAOC,CAAI;AAAA,IAC1B,CAAC,CAAE,gBAAAC,CAAA,IAAsBC,EAAAA;AAAAA;AAAAA;AAAAA,uBAGNC,EAAAA,kBAA8BF,CAAe,CAAC;AAAA;AAAA,GAElE;AAAA,EAGGG,EAAkB,CACtBC,EACAC,EACAC,EACAC,IAEIH,IAAcI,EAAAA,WAAW,SACpBH,IAAe,cAAgBE,EAAc,GAAGE,SAAoBH,CAAI,EAAE,MAAM,KAAO,OAGzF,OAGHI,EAAUZ,EAAAA,OAAO,IAMrB,CAAC,CAAE,WAAAa,EAAY,YAAAC,EAAa,MAAAC,EAAO,aAAAC,EAAc,MAAAC,KAAYd,EAAAA;AAAAA;AAAAA,cAEjDU,IAAeH,EAAAA,WAAW,SAAW,OAAS,GAAGC,SAAoBI,CAAK,EAAE,OAAOE,CAAK,CAAC,IAAI;AAAA,aAC9FZ,EAAgBQ,EAAYC,EAAaC,EAAOC,CAAY,CAAC;AAAA,GAE1E,EAKME,EAAMlB,EAAAA,OAAO,OACjB,CAAC,CAAE,WAAAa,EAAY,WAAAM,EAAY,WAAAC,EAAY,MAAAC,EAAO,eAAAC,EAAgB,MAAAP,EAAO,YAAAD,KAAkB,CACrF,MAAMS,EAAQF,EAAM,MAAM,CAAE,WAAY,UAAW,EAEnD,OAAOlB,EAAAA;AAAAA,iBACMqB,EAAAA,SAAS,MAAM;AAAA,kBACdV,IAAgB,cAAgBM,EAAa,WAAa,UAAU;AAAA;AAAA,mBAEnEP,IAAeH,EAAAA,WAAW,WAAa,MAAQ,QAAQ;AAAA;AAAA;AAAA;AAAA,gBAI1DS,EAAaE,EAAM,YAAY,KAAO,IAAI;AAAA,eAC3CE,EAAME,YAAU,sBAAsB,CAAC;AAAA,0BAC5BF,EAAME,YAAU,oBAAoB,CAAC;AAAA;AAAA;AAAA,QAGvDZ,IAAeH,aAAW,UAC5BP,EAAAA;AAAAA,iBACWiB,EAAa,GAAGT,EAAAA,OAAoBI,CAAK,EAAE,OAAO,OAAO,KAAO,GAAGO,CAAc,IAAI;AAAA;AAAA,UAE5FvB,CAAU;AAAA,+BACWqB,EAAa,EAAIM,EAAAA,OAAkBX,CAAK,EAAE,kBAAkB;AAAA;AAAA;AAAA,WAGhFY,eAAa;AAAA,8BACMP,EAAa,EAAI,GAAG;AAAA;AAAA,OAE3C;AAAA,KAEL,CACF,EAEMQ,EAAa5B,EAAAA,OAAO,IACxB,CAAC,CAAE,WAAAa,EAAY,WAAAO,CAAA,IAAiBjB,EAAAA;AAAAA;AAAAA;AAAAA,mBAGfiB,EAAa,EAAI,CAAC;AAAA;AAAA,sBAEfP,IAAeH,EAAAA,WAAW,WAAa,MAAQ,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,GAM7E,EAEMmB,EAAmB7B,EAAAA,OAAO;AAAA;AAAA;AAAA"}

package/build/cjs/components/NavBar/NavBarMobile.js

@@ -0,0 +1,2 @@
+"use strict";const e=require("react/jsx-runtime"),n=require("./NavBar.js"),r=n,i=({indicatorPosition:o="bottom",...t})=>e.jsx(r,{...t,indicatorPosition:o,iconPosition:"top",direction:"horizontal",lockup:"none",type:"mobile"});module.exports=i;
+//# sourceMappingURL=NavBarMobile.js.map

package/build/cjs/components/NavBar/NavBarMobile.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavBarMobile.js","sources":["../../../../src/components/NavBar/NavBarMobile.tsx"],"sourcesContent":["import { type FC } from 'react';\n\nimport NavBar from './NavBar';\nimport type { INavBarProps, INavbarMobileProps, INavBarPropsImpl } from './NavBar.types';\n\nconst NavbarInternal = NavBar as FC<INavBarPropsImpl & INavBarProps>;\n\nconst NavBarMobile: FC<INavbarMobileProps> = ({ indicatorPosition = 'bottom', ...navbarProps }) => {\n  return (\n    <NavbarInternal\n      {...navbarProps}\n      indicatorPosition={indicatorPosition}\n      iconPosition=\"top\"\n      direction=\"horizontal\"\n      lockup=\"none\"\n      type=\"mobile\"\n    />\n  );\n};\n\nexport default NavBarMobile;\n"],"names":["NavbarInternal","NavBar","NavBarMobile","indicatorPosition","navbarProps","jsx"],"mappings":"2EAKMA,EAAiBC,EAEjBC,EAAuC,CAAC,CAAE,kBAAAC,EAAoB,SAAU,GAAGC,KAE7EC,EAAAA,IAACL,EAAA,CACE,GAAGI,EACJ,kBAAAD,EACA,aAAa,MACb,UAAU,aACV,OAAO,OACP,KAAK,QAAA,CAAA"}

package/build/cjs/components/NavBar/NavBarVerticalStatic.js

@@ -0,0 +1,2 @@
+"use strict";const e=require("react/jsx-runtime"),p=require("react"),m=require("classnames"),i=require("../../react-base/src/consts/index.js"),a=require("../../react-base/src/components/NavBar/NavBarVerticalStatic.consts.js"),N=require("./components/LastArea/LastArea.js"),A=require("../Pecten/Pecten.js"),s=require("./NavBarVerticalStatic.styles.js"),v=require("../../react-base/src/consts/classes.js"),h=p.forwardRef(({size:r=`${i.Sizes.Medium}`,className:o,urlProps:l,avatarArea:t,avatarProps:n,items:c,startArea:u,endArea:d,selectedPath:x,onSelect:q,...S},j)=>e.jsx(s.Wrapper,{children:e.jsxs(s.Nav,{as:"nav",$size:r,className:m(v.NAV_BAR_CLASS,o),ref:j,...S,children:[e.jsx(s.PectenUrlWrapper,{rel:"noopener noreferrer",tabIndex:-1,...l,$size:r,children:e.jsx(A,{size:a.consts[r].pectenSize})}),u,e.jsx(s.MiddleArea,{children:c&&e.jsx(s.StyledMenu,{items:c,$itemsAlignment:i.Alignments.Center,mode:"vertical",selectedPath:x,onSelect:q,size:r,iconPosition:"top"})}),d,(!!t||!!n)&&e.jsx(N,{size:a.consts[r].avatarSize,collapsed:!0,avatarArea:t,avatarProps:n})]})}));module.exports=h;
+//# sourceMappingURL=NavBarVerticalStatic.js.map

package/build/cjs/components/NavBar/NavBarVerticalStatic.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavBarVerticalStatic.js","sources":["../../../../src/components/NavBar/NavBarVerticalStatic.tsx"],"sourcesContent":["import { forwardRef, type ReactElement } from 'react';\n\nimport classNames from 'classnames';\nimport { NAV_BAR_CLASS, Sizes, Alignments } from 'acinguiux-ds-react-base/consts';\nimport { NavBarVerticalStaticConsts } from 'acinguiux-ds-react-base/components/NavBar';\n\nimport LastArea from './components/LastArea/LastArea';\nimport Pecten from '../Pecten/Pecten';\nimport { Wrapper, MiddleArea, Nav, StyledMenu, PectenUrlWrapper } from './NavBarVerticalStatic.styles';\nimport { INavbarVerticalStaticProps } from './NavBar.types';\n\nconst NavBarVerticalStatic = forwardRef<HTMLElement, INavbarVerticalStaticProps>(\n  (\n    {\n      size = `${Sizes.Medium}`,\n      className,\n      urlProps,\n      avatarArea,\n      avatarProps,\n      items,\n      startArea,\n      endArea,\n      selectedPath,\n      onSelect,\n      ...rest\n    },\n    ref,\n  ): ReactElement => (\n    <Wrapper>\n      <Nav as=\"nav\" $size={size} className={classNames(NAV_BAR_CLASS, className)} ref={ref} {...rest}>\n        <PectenUrlWrapper rel=\"noopener noreferrer\" tabIndex={-1} {...urlProps} $size={size}>\n          <Pecten size={NavBarVerticalStaticConsts.consts[size].pectenSize} />\n        </PectenUrlWrapper>\n        {startArea}\n        <MiddleArea>\n          {items && (\n            <StyledMenu\n              items={items}\n              $itemsAlignment={Alignments.Center}\n              mode=\"vertical\"\n              selectedPath={selectedPath}\n              onSelect={onSelect}\n              size={size}\n              iconPosition=\"top\"\n            />\n          )}\n        </MiddleArea>\n        {endArea}\n        {(!!avatarArea || !!avatarProps) && (\n          <LastArea\n            size={NavBarVerticalStaticConsts.consts[size].avatarSize}\n            collapsed={true}\n            avatarArea={avatarArea}\n            avatarProps={avatarProps}\n          />\n        )}\n      </Nav>\n    </Wrapper>\n  ),\n);\n\nexport default NavBarVerticalStatic;\n"],"names":["NavBarVerticalStatic","forwardRef","size","Sizes","className","urlProps","avatarArea","avatarProps","items","startArea","endArea","selectedPath","onSelect","rest","ref","jsx","Wrapper","jsxs","Nav","classNames","NAV_BAR_CLASS","PectenUrlWrapper","Pecten","NavBarVerticalStaticConsts.consts","MiddleArea","StyledMenu","Alignments","LastArea"],"mappings":"oZAWMA,EAAuBC,EAAAA,WAC3B,CACE,CACE,KAAAC,EAAO,GAAGC,QAAM,MAAM,GACtB,UAAAC,EACA,SAAAC,EACA,WAAAC,EACA,YAAAC,EACA,MAAAC,EACA,UAAAC,EACA,QAAAC,EACA,aAAAC,EACA,SAAAC,EACA,GAAGC,CAAA,EAELC,IAEAC,EAAAA,IAACC,UAAA,CACC,SAAAC,OAACC,EAAAA,KAAI,GAAG,MAAM,MAAOhB,EAAM,UAAWiB,EAAWC,EAAAA,cAAehB,CAAS,EAAG,IAAAU,EAAW,GAAGD,EACxF,SAAA,CAAAE,MAACM,EAAAA,kBAAiB,IAAI,sBAAsB,SAAU,GAAK,GAAGhB,EAAU,MAAOH,EAC7E,SAAAa,EAAAA,IAACO,GAAO,KAAMC,EAAAA,OAAkCrB,CAAI,EAAE,WAAY,EACpE,EACCO,EACDM,EAAAA,IAACS,EAAAA,YACE,SAAAhB,GACCO,EAAAA,IAACU,EAAAA,WAAA,CACC,MAAAjB,EACA,gBAAiBkB,EAAAA,WAAW,OAC5B,KAAK,WACL,aAAAf,EACA,SAAAC,EACA,KAAAV,EACA,aAAa,KAAA,CAAA,EAGnB,EACCQ,GACC,CAAC,CAACJ,GAAc,CAAC,CAACC,IAClBQ,EAAAA,IAACY,EAAA,CACC,KAAMJ,EAAAA,OAAkCrB,CAAI,EAAE,WAC9C,UAAW,GACX,WAAAI,EACA,YAAAC,CAAA,CAAA,CACF,CAAA,CAEJ,CAAA,CACF,CAEJ"}

package/build/cjs/components/NavBar/NavBarVerticalStatic.styles.js

@@ -0,0 +1,63 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("styled-components"),c=require("../../react-base/src/consts/index.js"),n=require("../../react-base/src/components/NavBar/NavBarVerticalStatic.consts.js"),s=require("../../react-base/src/theme/types/layer.js"),u=require("../Menu/Menu.js"),l=require("./components/LastArea/LastArea.styles.js"),p=require("../../react-base/src/components/NavBar/utils/styleUtils.js"),a=require("../../react-base/src/consts/classes.js"),d=e.styled(u)`
+  ${({$itemsAlignment:t})=>e.css`
+    flex: 1 1 0;
+    max-height: fit-content;
+    justify-content: ${p.getItemsAlignment(t)};
+    overflow: hidden auto;
+
+    .${a.MENU_CLASS}-label {
+      gap: 2px;
+      padding: 6px 4px;
+    }
+
+    .${a.MENU_CLASS}-label-text {
+      font-size: 10px;
+    }
+  `}
+`,h=e.styled.div`
+  position: relative;
+  height: 100%;
+  width: auto;
+`,x=e.styled.header(({$elevation:t,theme:i,$size:r})=>{const o=i.layer({foundation:"surface"});return e.css`
+    z-index: ${c.ZIndexes.NAVBAR};
+    position: relative;
+    display: flex;
+    flex-flow: column nowrap;
+    align-items: stretch;
+    height: 100%;
+    width: ${n.consts[r].width}px;
+    filter: ${t?i.dropShadows.low1:null};
+    color: ${o[s.Variables.TextOnFoundationStrong]};
+    background-color: ${o[s.Variables.BackgroundFoundation]};
+    transition: width 0.3s ease-out;
+
+    ${d} {
+      width: 100%;
+      margin-left: 0;
+    }
+
+    ${l.Area} {
+      height: ${n.consts[r].width}px;
+    }
+
+    ${l.StyledAvatar} {
+      justify-content: center;
+      margin-right: 0;
+    }
+  `}),f=e.styled.div`
+  position: relative;
+  display: flex;
+  flex-shrink: 0;
+  flex-grow: 1;
+  flex-direction: column;
+  align-items: stretch;
+  min-width: 0;
+  z-index: 1;
+  overflow: hidden auto;
+`,g=e.styled.a`
+  display: flex;
+  text-decoration: none;
+  cursor: pointer;
+  padding: ${({$size:t})=>(n.consts[t].width-n.consts[t].pectenSize)/2}px;
+`;exports.MiddleArea=f;exports.Nav=x;exports.PectenUrlWrapper=g;exports.StyledMenu=d;exports.Wrapper=h;
+//# sourceMappingURL=NavBarVerticalStatic.styles.js.map

package/build/cjs/components/NavBar/NavBarVerticalStatic.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavBarVerticalStatic.styles.js","sources":["../../../../src/components/NavBar/NavBarVerticalStatic.styles.ts"],"sourcesContent":["import { styled, css } from 'styled-components';\nimport { MENU_CLASS, ZIndexes } from 'acinguiux-ds-react-base/consts';\nimport type { PickTransient } from 'acinguiux-ds-react-base/types';\nimport { NavBarVerticalStaticConsts, NavBarUtils } from 'acinguiux-ds-react-base/components/NavBar';\nimport { Variables } from 'acinguiux-ds-react-base/theme';\n\nimport type { INavBarProps, INavBarPropsWithReqSize } from './NavBar.types';\nimport Menu from '../Menu/Menu';\nimport type { IMenuProps } from '../Menu/Menu.types';\nimport { Area, StyledAvatar } from './components/LastArea/LastArea.styles';\n\nconst StyledMenu = styled(Menu)<IMenuProps & PickTransient<INavBarProps, 'itemsAlignment'>>`\n  ${({ $itemsAlignment }) => css`\n    flex: 1 1 0;\n    max-height: fit-content;\n    justify-content: ${NavBarUtils.getItemsAlignment($itemsAlignment)};\n    overflow: hidden auto;\n\n    .${MENU_CLASS}-label {\n      gap: 2px;\n      padding: 6px 4px;\n    }\n\n    .${MENU_CLASS}-label-text {\n      font-size: 10px;\n    }\n  `}\n`;\n\nconst Wrapper = styled.div`\n  position: relative;\n  height: 100%;\n  width: auto;\n`;\n\ntype NavProps = PickTransient<INavBarPropsWithReqSize, 'size' | 'elevation'>;\n\nconst Nav = styled.header<NavProps>(({ $elevation, theme, $size }) => {\n  const layer = theme.layer({ foundation: 'surface' });\n\n  return css`\n    z-index: ${ZIndexes.NAVBAR};\n    position: relative;\n    display: flex;\n    flex-flow: column nowrap;\n    align-items: stretch;\n    height: 100%;\n    width: ${NavBarVerticalStaticConsts.consts[$size].width}px;\n    filter: ${$elevation ? theme.dropShadows.low1 : null};\n    color: ${layer[Variables.TextOnFoundationStrong]};\n    background-color: ${layer[Variables.BackgroundFoundation]};\n    transition: width 0.3s ease-out;\n\n    ${StyledMenu} {\n      width: 100%;\n      margin-left: 0;\n    }\n\n    ${Area} {\n      height: ${NavBarVerticalStaticConsts.consts[$size].width}px;\n    }\n\n    ${StyledAvatar} {\n      justify-content: center;\n      margin-right: 0;\n    }\n  `;\n});\n\nconst MiddleArea = styled.div`\n  position: relative;\n  display: flex;\n  flex-shrink: 0;\n  flex-grow: 1;\n  flex-direction: column;\n  align-items: stretch;\n  min-width: 0;\n  z-index: 1;\n  overflow: hidden auto;\n`;\n\nconst PectenUrlWrapper = styled.a<PickTransient<INavBarPropsWithReqSize, 'size'>>`\n  display: flex;\n  text-decoration: none;\n  cursor: pointer;\n  padding: ${({ $size }) =>\n    (NavBarVerticalStaticConsts.consts[$size].width - NavBarVerticalStaticConsts.consts[$size].pectenSize) / 2}px;\n`;\n\nexport { Wrapper, Nav, MiddleArea, StyledMenu, PectenUrlWrapper };\n"],"names":["StyledMenu","styled","Menu","$itemsAlignment","css","NavBarUtils.getItemsAlignment","MENU_CLASS","Wrapper","Nav","$elevation","theme","$size","layer","ZIndexes","NavBarVerticalStaticConsts.consts","Variables","Area","StyledAvatar","MiddleArea","PectenUrlWrapper"],"mappings":"4hBAWMA,EAAaC,EAAAA,OAAOC,CAAI;AAAA,IAC1B,CAAC,CAAE,gBAAAC,CAAA,IAAsBC,EAAAA;AAAAA;AAAAA;AAAAA,uBAGNC,EAAAA,kBAA8BF,CAAe,CAAC;AAAA;AAAA;AAAA,OAG9DG,YAAU;AAAA;AAAA;AAAA;AAAA;AAAA,OAKVA,YAAU;AAAA;AAAA;AAAA,GAGd;AAAA,EAGGC,EAAUN,EAAAA,OAAO;AAAA;AAAA;AAAA;AAAA,EAQjBO,EAAMP,EAAAA,OAAO,OAAiB,CAAC,CAAE,WAAAQ,EAAY,MAAAC,EAAO,MAAAC,KAAY,CACpE,MAAMC,EAAQF,EAAM,MAAM,CAAE,WAAY,UAAW,EAEnD,OAAON,EAAAA;AAAAA,eACMS,EAAAA,SAAS,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAMjBC,EAAAA,OAAkCH,CAAK,EAAE,KAAK;AAAA,cAC7CF,EAAaC,EAAM,YAAY,KAAO,IAAI;AAAA,aAC3CE,EAAMG,YAAU,sBAAsB,CAAC;AAAA,wBAC5BH,EAAMG,YAAU,oBAAoB,CAAC;AAAA;AAAA;AAAA,MAGvDf,CAAU;AAAA;AAAA;AAAA;AAAA;AAAA,MAKVgB,MAAI;AAAA,gBACMF,EAAAA,OAAkCH,CAAK,EAAE,KAAK;AAAA;AAAA;AAAA,MAGxDM,cAAY;AAAA;AAAA;AAAA;AAAA,GAKlB,CAAC,EAEKC,EAAajB,EAAAA,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAYpBkB,EAAmBlB,EAAAA,OAAO;AAAA;AAAA;AAAA;AAAA,aAInB,CAAC,CAAE,MAAAU,MACXG,EAAAA,OAAkCH,CAAK,EAAE,MAAQG,SAAkCH,CAAK,EAAE,YAAc,CAAC;AAAA"}

package/build/cjs/components/NavBar/components/FirstArea/FirstArea.js

@@ -1,2 +1,2 @@
-"use strict";const e=require("react/jsx-runtime"),r=require("../../../../react-base/src/consts/index.js"),j=require("../../../../react-base/src/components/NavBar/NavBar.consts.js"),n=require("./FirstArea.styles.js"),C=require("../../../Text/components/Label/Label.js"),l=require("../../../Popover/Popover.js"),x=require("../../../../react-base/src/components/NavBar/utils/firstAreaUtils.js"),S=({header:s,content:o})=>x.isHeader(s)&&s.popoverContent?e.jsxs(l.Popover,{children:[e.jsx(l.PopoverTrigger,{asChild:!0,children:o}),e.jsx(l.PopoverContent,{padding:!1,align:"start",side:"bottom",children:s.popoverContent})]}):o,b=({pectenArea:s,lockup:o,urlProps:c,onClick:p,header:t,collapsed:u,size:i=r.Sizes.Medium})=>{const a=o??s,d=e.jsxs(n.Header,{onClick:p,$size:i,children:[a==="default"?e.jsx(n.HeaderPecten,{size:j.consts[i].pectenSize}):a,x.isHeader(t)?e.jsxs(n.LockupContent,{$collapsed:u,children:[!!t.description&&i!==r.Sizes.XSmall&&e.jsx(n.DescriptionLabel,{contrast:r.Contrasts.Subtle,size:r.Sizes.Small,bold:!0,children:t.description}),e.jsxs(n.TitleContainer,{$size:i,children:[!!t.title&&e.jsx(C,{contrast:r.Contrasts.Strong,size:r.Sizes.Large,bold:!0,children:t.title}),!!t.icon&&e.jsx(n.IconContainer,{children:t.icon})]})]}):t]});return e.jsx(n.Area,{size:i,children:c!=null&&c.href?e.jsx(n.HeaderPectenUrlWrapper,{rel:"noopener noreferrer",tabIndex:-1,...c,children:d}):e.jsx(S,{header:t,content:d})})};module.exports=b;
+"use strict";const e=require("react/jsx-runtime"),s=require("../../../../react-base/src/consts/index.js"),j=require("../../../../react-base/src/components/NavBar/NavBar.consts.js"),t=require("./FirstArea.styles.js"),C=require("../../../Text/components/Label/Label.js"),c=require("../../../Popover/Popover.js"),d=require("../../../../react-base/src/components/NavBar/utils/firstAreaUtils.js"),S=({header:n,content:i})=>d.isHeader(n)&&n.popoverContent?e.jsxs(c.Popover,{children:[e.jsx(c.PopoverTrigger,{asChild:!0,children:i}),e.jsx(c.PopoverContent,{padding:!1,align:"start",side:"bottom",children:n.popoverContent})]}):i,b=({pectenArea:n,lockup:i,urlProps:l,onClick:u,header:r,collapsed:x,size:o=s.Sizes.Medium})=>{const a=i??n,p=e.jsxs(t.Header,{onClick:u,$size:o,children:[a==="default"?e.jsx(t.HeaderPecten,{size:j.consts[o].pectenSize}):a,d.isHeader(r)?e.jsxs(t.LockupContent,{$collapsed:x,children:[!!r.description&&o!==s.Sizes.XSmall&&e.jsx(t.DescriptionLabel,{contrast:s.Contrasts.Subtle,size:s.Sizes.Small,bold:!0,children:r.description}),e.jsxs(t.TitleContainer,{$size:o,children:[!!r.title&&e.jsx(C,{contrast:s.Contrasts.Strong,size:s.Sizes.Large,bold:!0,children:r.title}),!!r.icon&&e.jsx(t.IconContainer,{children:r.icon})]})]}):r]});return e.jsx(t.Area,{size:o,children:l?.href?e.jsx(t.HeaderPectenUrlWrapper,{rel:"noopener noreferrer",tabIndex:-1,...l,children:p}):e.jsx(S,{header:r,content:p})})};module.exports=b;
 //# sourceMappingURL=FirstArea.js.map

package/build/cjs/components/NavBar/components/FirstArea/FirstArea.js.map

@@ -1 +1 @@
-{"version":3,"file":"FirstArea.js","sources":["../../../../../../src/components/NavBar/components/FirstArea/FirstArea.tsx"],"sourcesContent":["import { Contrasts, Sizes } from 'acinguiux-ds-react-base/consts';\nimport { NavBarConsts, type NavBarTypes, NavBarUtils } from 'acinguiux-ds-react-base/components/NavBar';\n\nimport * as Styled from './FirstArea.styles';\nimport Label from '../../../Text/components/Label/Label';\nimport { Popover, PopoverContent, PopoverTrigger } from '../../../Popover/Popover';\n\nconst MaybePopover = ({\n  header,\n  content,\n}: {\n  header: NavBarTypes.IFirstAreaProps['header'];\n  content: React.ReactNode;\n}) => {\n  if (NavBarUtils.isHeader(header) && header.popoverContent) {\n    return (\n      <Popover>\n        <PopoverTrigger asChild={true}>{content}</PopoverTrigger>\n        <PopoverContent padding={false} align=\"start\" side=\"bottom\">\n          {header.popoverContent}\n        </PopoverContent>\n      </Popover>\n    );\n  }\n\n  return content;\n};\n\nconst FirstArea = ({\n  pectenArea,\n  lockup,\n  urlProps,\n  onClick,\n  header,\n  collapsed,\n  size = Sizes.Medium,\n}: NavBarTypes.IFirstAreaProps) => {\n  const lockupArea = lockup ?? pectenArea;\n  const content = (\n    <Styled.Header onClick={onClick} $size={size}>\n      {lockupArea === 'default' ? <Styled.HeaderPecten size={NavBarConsts.consts[size].pectenSize} /> : lockupArea}\n      {NavBarUtils.isHeader(header) ? (\n        <Styled.LockupContent $collapsed={collapsed}>\n          {!!header.description && size !== Sizes.XSmall && (\n            <Styled.DescriptionLabel contrast={Contrasts.Subtle} size={Sizes.Small} bold={true}>\n              {header.description}\n            </Styled.DescriptionLabel>\n          )}\n          <Styled.TitleContainer $size={size}>\n            {!!header.title && (\n              <Label contrast={Contrasts.Strong} size={Sizes.Large} bold={true}>\n                {header.title}\n              </Label>\n            )}\n            {!!header.icon && <Styled.IconContainer>{header.icon}</Styled.IconContainer>}\n          </Styled.TitleContainer>\n        </Styled.LockupContent>\n      ) : (\n        header\n      )}\n    </Styled.Header>\n  );\n\n  return (\n    <Styled.Area size={size}>\n      {urlProps?.href ? (\n        <Styled.HeaderPectenUrlWrapper rel=\"noopener noreferrer\" tabIndex={-1} {...urlProps}>\n          {content}\n        </Styled.HeaderPectenUrlWrapper>\n      ) : (\n        <MaybePopover header={header} content={content} />\n      )}\n    </Styled.Area>\n  );\n};\n\nexport default FirstArea;\n"],"names":["MaybePopover","header","content","NavBarUtils.isHeader","Popover","jsx","PopoverTrigger","PopoverContent","FirstArea","pectenArea","lockup","urlProps","onClick","collapsed","size","Sizes","lockupArea","jsxs","Styled.Header","Styled.HeaderPecten","NavBarConsts.consts","Styled.LockupContent","Styled.DescriptionLabel","Contrasts","Styled.TitleContainer","Label","Styled.IconContainer","Styled.Area","Styled.HeaderPectenUrlWrapper"],"mappings":"wYAOMA,EAAe,CAAC,CACpB,OAAAC,EACA,QAAAC,CACF,IAIMC,WAAqBF,CAAM,GAAKA,EAAO,sBAEtCG,UAAA,CACC,SAAA,CAAAC,EAAAA,IAACC,EAAAA,eAAA,CAAe,QAAS,GAAO,SAAAJ,EAAQ,EACxCG,EAAAA,IAACE,EAAAA,gBAAe,QAAS,GAAO,MAAM,QAAQ,KAAK,SAChD,SAAAN,EAAO,cAAA,CACV,CAAA,EACF,EAIGC,EAGHM,EAAY,CAAC,CACjB,WAAAC,EACA,OAAAC,EACA,SAAAC,EACA,QAAAC,EACA,OAAAX,EACA,UAAAY,EACA,KAAAC,EAAOC,EAAAA,MAAM,MACf,IAAmC,CACjC,MAAMC,EAAaN,GAAUD,EACvBP,EACJe,EAAAA,KAACC,EAAAA,OAAA,CAAc,QAAAN,EAAkB,MAAOE,EACrC,SAAA,CAAAE,IAAe,UAAYX,MAACc,EAAAA,aAAA,CAAoB,KAAMC,EAAAA,OAAoBN,CAAI,EAAE,UAAA,CAAY,EAAKE,EACjGb,EAAAA,SAAqBF,CAAM,SACzBoB,EAAAA,cAAA,CAAqB,WAAYR,EAC/B,SAAA,CAAA,CAAC,CAACZ,EAAO,aAAea,IAASC,EAAAA,MAAM,cACrCO,EAAAA,iBAAA,CAAwB,SAAUC,EAAAA,UAAU,OAAQ,KAAMR,EAAAA,MAAM,MAAO,KAAM,GAC3E,WAAO,YACV,EAEFE,EAAAA,KAACO,EAAAA,eAAA,CAAsB,MAAOV,EAC3B,SAAA,CAAA,CAAC,CAACb,EAAO,OACRI,EAAAA,IAACoB,GAAM,SAAUF,YAAU,OAAQ,KAAMR,EAAAA,MAAM,MAAO,KAAM,GACzD,WAAO,MACV,EAED,CAAC,CAACd,EAAO,YAASyB,EAAAA,cAAA,CAAsB,SAAAzB,EAAO,IAAA,CAAK,CAAA,CAAA,CACvD,CAAA,CAAA,CACF,EAEAA,CAAA,EAEJ,EAGF,OACEI,MAACsB,EAAAA,KAAA,CAAY,KAAAb,EACV,SAAAH,GAAA,MAAAA,EAAU,KACTN,EAAAA,IAACuB,yBAAA,CAA8B,IAAI,sBAAsB,SAAU,GAAK,GAAGjB,EACxE,SAAAT,CAAA,CACH,EAEAG,MAACL,EAAA,CAAa,OAAAC,EAAgB,QAAAC,CAAA,CAAkB,CAAA,CAEpD,CAEJ"}
+{"version":3,"file":"FirstArea.js","sources":["../../../../../../src/components/NavBar/components/FirstArea/FirstArea.tsx"],"sourcesContent":["import { Contrasts, Sizes } from 'acinguiux-ds-react-base/consts';\nimport { NavBarConsts, type NavBarTypes, NavBarUtils } from 'acinguiux-ds-react-base/components/NavBar';\n\nimport * as Styled from './FirstArea.styles';\nimport Label from '../../../Text/components/Label/Label';\nimport { Popover, PopoverContent, PopoverTrigger } from '../../../Popover/Popover';\n\nconst MaybePopover = ({\n  header,\n  content,\n}: {\n  header: NavBarTypes.IFirstAreaProps['header'];\n  content: React.ReactNode;\n}) => {\n  if (NavBarUtils.isHeader(header) && header.popoverContent) {\n    return (\n      <Popover>\n        <PopoverTrigger asChild={true}>{content}</PopoverTrigger>\n        <PopoverContent padding={false} align=\"start\" side=\"bottom\">\n          {header.popoverContent}\n        </PopoverContent>\n      </Popover>\n    );\n  }\n\n  return content;\n};\n\nconst FirstArea = ({\n  pectenArea,\n  lockup,\n  urlProps,\n  onClick,\n  header,\n  collapsed,\n  size = Sizes.Medium,\n}: NavBarTypes.IFirstAreaProps) => {\n  const lockupArea = lockup ?? pectenArea;\n  const content = (\n    <Styled.Header onClick={onClick} $size={size}>\n      {lockupArea === 'default' ? <Styled.HeaderPecten size={NavBarConsts.consts[size].pectenSize} /> : lockupArea}\n      {NavBarUtils.isHeader(header) ? (\n        <Styled.LockupContent $collapsed={collapsed}>\n          {!!header.description && size !== Sizes.XSmall && (\n            <Styled.DescriptionLabel contrast={Contrasts.Subtle} size={Sizes.Small} bold={true}>\n              {header.description}\n            </Styled.DescriptionLabel>\n          )}\n          <Styled.TitleContainer $size={size}>\n            {!!header.title && (\n              <Label contrast={Contrasts.Strong} size={Sizes.Large} bold={true}>\n                {header.title}\n              </Label>\n            )}\n            {!!header.icon && <Styled.IconContainer>{header.icon}</Styled.IconContainer>}\n          </Styled.TitleContainer>\n        </Styled.LockupContent>\n      ) : (\n        header\n      )}\n    </Styled.Header>\n  );\n\n  return (\n    <Styled.Area size={size}>\n      {urlProps?.href ? (\n        <Styled.HeaderPectenUrlWrapper rel=\"noopener noreferrer\" tabIndex={-1} {...urlProps}>\n          {content}\n        </Styled.HeaderPectenUrlWrapper>\n      ) : (\n        <MaybePopover header={header} content={content} />\n      )}\n    </Styled.Area>\n  );\n};\n\nexport default FirstArea;\n"],"names":["MaybePopover","header","content","NavBarUtils.isHeader","Popover","jsx","PopoverTrigger","PopoverContent","FirstArea","pectenArea","lockup","urlProps","onClick","collapsed","size","Sizes","lockupArea","jsxs","Styled.Header","Styled.HeaderPecten","NavBarConsts.consts","Styled.LockupContent","Styled.DescriptionLabel","Contrasts","Styled.TitleContainer","Label","Styled.IconContainer","Styled.Area","Styled.HeaderPectenUrlWrapper"],"mappings":"wYAOMA,EAAe,CAAC,CACpB,OAAAC,EACA,QAAAC,CACF,IAIMC,WAAqBF,CAAM,GAAKA,EAAO,sBAEtCG,UAAA,CACC,SAAA,CAAAC,EAAAA,IAACC,EAAAA,eAAA,CAAe,QAAS,GAAO,SAAAJ,EAAQ,EACxCG,EAAAA,IAACE,EAAAA,gBAAe,QAAS,GAAO,MAAM,QAAQ,KAAK,SAChD,SAAAN,EAAO,cAAA,CACV,CAAA,EACF,EAIGC,EAGHM,EAAY,CAAC,CACjB,WAAAC,EACA,OAAAC,EACA,SAAAC,EACA,QAAAC,EACA,OAAAX,EACA,UAAAY,EACA,KAAAC,EAAOC,EAAAA,MAAM,MACf,IAAmC,CACjC,MAAMC,EAAaN,GAAUD,EACvBP,EACJe,EAAAA,KAACC,EAAAA,OAAA,CAAc,QAAAN,EAAkB,MAAOE,EACrC,SAAA,CAAAE,IAAe,UAAYX,MAACc,EAAAA,aAAA,CAAoB,KAAMC,EAAAA,OAAoBN,CAAI,EAAE,UAAA,CAAY,EAAKE,EACjGb,EAAAA,SAAqBF,CAAM,SACzBoB,EAAAA,cAAA,CAAqB,WAAYR,EAC/B,SAAA,CAAA,CAAC,CAACZ,EAAO,aAAea,IAASC,EAAAA,MAAM,cACrCO,EAAAA,iBAAA,CAAwB,SAAUC,EAAAA,UAAU,OAAQ,KAAMR,EAAAA,MAAM,MAAO,KAAM,GAC3E,WAAO,YACV,EAEFE,EAAAA,KAACO,EAAAA,eAAA,CAAsB,MAAOV,EAC3B,SAAA,CAAA,CAAC,CAACb,EAAO,OACRI,EAAAA,IAACoB,GAAM,SAAUF,YAAU,OAAQ,KAAMR,EAAAA,MAAM,MAAO,KAAM,GACzD,WAAO,MACV,EAED,CAAC,CAACd,EAAO,YAASyB,EAAAA,cAAA,CAAsB,SAAAzB,EAAO,IAAA,CAAK,CAAA,CAAA,CACvD,CAAA,CAAA,CACF,EAEAA,CAAA,EAEJ,EAGF,OACEI,MAACsB,EAAAA,KAAA,CAAY,KAAAb,EACV,SAAAH,GAAU,KACTN,EAAAA,IAACuB,yBAAA,CAA8B,IAAI,sBAAsB,SAAU,GAAK,GAAGjB,EACxE,SAAAT,CAAA,CACH,EAEAG,MAACL,EAAA,CAAa,OAAAC,EAAgB,QAAAC,CAAA,CAAkB,CAAA,CAEpD,CAEJ"}