acinguiux-ds-react-framework 0.1.18 → 0.1.20

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

@@ -1,124 +1,137 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("styled-components"),l=require("acinguiux-ds-fabrics"),c=require("../../react-base/src/consts/classes.js"),t=require("../../react-base/src/theme/types/layer.js"),a=require("../../react-base/src/components/ListItem/ListItem.consts.js"),y=require("../../react-base/src/components/ListItem/ListItem.utils.js"),$=require("../../react-base/src/components/ListItem/ListItem.styles.js"),L=require("../../react-base/src/utils/stylesUtils.js"),I=require("../Icon/components/Check.js"),m=require("../Text/components/Label/Label.js"),v=require("../Text/components/Text/Text.js"),u=r.styled(I)`
-  grid-area: checkmark;
-`,x=r.styled.div`
-  ${({$size:e})=>r.css`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("styled-components"),i=require("acinguiux-ds-fabrics"),m=require("../../react-base/src/consts/index.js"),t=require("../../react-base/src/theme/types/layer.js"),w=require("../../react-base/src/utils/stylesUtils.js"),o=require("../../react-base/src/components/ListItem/ListItem.consts.js");require("../../react-base/src/components/ListItem/ListItemHeader.consts.js");const q=require("../Icon/components/Check.js"),p=require("../Text/components/Label/Label.js"),L=require("./ListItem.utils.js"),B=require("../../react-base/src/consts/classes.js"),c=e.styled(q)`
+  transition: opacity 200ms;
+`,n=e.styled.div`
+  background-color: currentColor;
+  width: 7px;
+  height: 7px;
+  border-radius: 100%;
+  transition: opacity 200ms;
+`,y=e.styled.div`
+  pointer-events: none;
+  grid-area: selection;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`,k=e.styled.div(({$size:r})=>e.css`
+    grid-area: icon;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 100%;
-    font-size: ${a.consts[e].iconSize}px;
-    grid-area: flag-icon;
-  `}
-`,_=r.styled(m)`
+    font-size: ${o.consts[r].iconSize}px;
+  `),S=e.styled(p)`
   grid-area: label;
-
-  ${$.textStyles}
-`,V=r.styled(v)`
-  grid-area: meta;
-
-  ${({$metaTextPosition:e})=>e==="right"&&"text-align: right;"}
-  ${$.textStyles}
-`,h=r.styled.li`
-  ${({theme:e,$metaTextPosition:s,$size:o,$ariaInteractiveOnly:n,$variant:d,$selected:g,$withMetaText:k,$disabled:i,$iconOrFlagProvided:C})=>{const b=e.layer({state:"hover"}),p=e.layer({state:"press"}),S=e.layer({disabled:!0});return r.css`
+  cursor: default;
+`,$=e.styled(p)(({$metaTextPosition:r})=>e.css`
+    grid-area: meta;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    cursor: default;
+
+    ${r==="right"&&e.css`
+      text-align: right;
+    `};
+  `),C=e.styled.li`
+  ${({theme:r,$metaTextPosition:x,$size:a,$ariaInteractiveOnly:l,$variant:v,$selected:h,$withMetaText:V,$disabled:s,$iconOrFlagProvided:F,$showInputControls:d,$multiline:f})=>{const u=r.layer({state:"hover"}),g=r.layer({state:"press"}),b=r.layer({disabled:!0});return e.css`
       display: grid;
-      align-items: center;
-      width: auto;
-      max-width: 100%;
-      column-gap: 6px;
+      align-items: start;
+      width: 100%;
+      column-gap: ${o.consts[a].gap}px;
       border-radius: 4px;
-      padding: ${a.consts[o].padding.vertical}px ${a.consts[o].padding.horizontal}px;
+      padding: ${o.consts[a].padding.vertical}px ${o.consts[a].padding.horizontal}px;
       box-sizing: border-box;
-      cursor: pointer;
+      transition: background-color 0.3s ease-out;
+
+      ${L.getGridTemplateStyles({$metaTextPosition:x,$variant:v,$withMetaText:V,$iconOrFlagProvided:F,$showInputControls:d,iconSize:o.consts[a].iconSize})}
+
+      .${B.ICON_CLASS}, ${c} {
+        grid-area: icon;
+        display: block;
+        width: ${o.consts[a].iconSize}px;
+        height: ${o.consts[a].iconSize}px;
+      }
 
-      .${c.ICON_CLASS}:not(.${c.LIST_ITEM_CHECKED_ICON_CLASS}) {
-        grid-area: flag-icon;
+      ${y} {
+        width: ${o.consts[a].iconSize}px;
+        height: ${o.consts[a].iconSize}px;
       }
 
-      ${u}, .${c.ICON_CLASS} {
-        width: ${a.consts[o].iconSize}px;
-        height: ${a.consts[o].iconSize}px;
+      ${$} {
+        margin: ${a===m.Sizes.Medium?"0":"2px 0"};
       }
 
-      ${y.getGridTemplateStyles({$metaTextPosition:s,$variant:d,$selected:g,$withMetaText:k,$iconOrFlagProvided:C,$size:o})}
+      ${c},
+      ${n} {
+        opacity: 0;
+      }
 
-      ${i&&r.css`
-        ${x} {
-          svg {
-            opacity: 0.3;
-          }
+      ${!f&&e.css`
+        ${S} {
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+      `}
+
+      ${s&&e.css`
+        ${k} svg {
+          opacity: 0.3;
         }
-        background-color: ${S[t.Variables.BackgroundFoundation]};
-        color: ${S[t.Variables.TextOnFoundationStrong]};
+        background-color: ${b[t.Variables.BackgroundFoundation]};
+        color: ${b[t.Variables.TextOnFoundationStrong]};
         cursor: not-allowed;
       `}
 
-      ${!i&&r.css`
+      ${!s&&e.css`
         &[aria-selected='true'] {
-          background-color: ${b[t.Variables.BackgroundFoundation]};
+          background-color: ${u[t.Variables.BackgroundFoundation]};
         }
 
         &[aria-selected='true']:active {
-          background-color: ${p[t.Variables.BackgroundFoundation]};
+          background-color: ${g[t.Variables.BackgroundFoundation]};
         }
-        ${!n&&r.css`
+        ${!l&&e.css`
           &:hover {
-            background-color: ${b[t.Variables.BackgroundFoundation]};
+            background-color: ${u[t.Variables.BackgroundFoundation]};
           }
 
           &:active {
-            background-color: ${p[t.Variables.BackgroundFoundation]};
+            background-color: ${g[t.Variables.BackgroundFoundation]};
           }
         `}
       `}
 
-      ${g&&r.css`
-        background: ${e.layer({disabled:i,selectedProminence:"subtle"})[t.Variables.BackgroundSelected]};
+      ${h&&e.css`
+        background-color: ${d?"transparent":r.layer({disabled:s,selectedProminence:"subtle"})[t.Variables.BackgroundSelected]};
+
+        ${c},
+        ${n} {
+          opacity: 1;
+        }
 
         &[aria-selected='true'] {
-          background: ${e.layer({disabled:i,selectedProminence:"subtle",state:l.FabricsVariables.States.Hover})[t.Variables.BackgroundSelected]};
+          background-color: ${r.layer({disabled:s,selectedProminence:"subtle",state:i.FabricsVariables.States.Hover})[t.Variables.BackgroundSelected]};
         }
 
         &[aria-selected='true']:active {
-          background: ${e.layer({disabled:i,selectedProminence:"subtle",state:l.FabricsVariables.States.Press})[t.Variables.BackgroundSelected]};
+          background-color: ${r.layer({disabled:s,selectedProminence:"subtle",state:i.FabricsVariables.States.Press})[t.Variables.BackgroundSelected]};
         }
 
-        ${!n&&r.css`
+        ${!l&&e.css`
           &:hover {
-            background: ${e.layer({disabled:i,selectedProminence:"subtle",state:l.FabricsVariables.States.Hover})[t.Variables.BackgroundSelected]};
+            background-color: ${r.layer({disabled:s,selectedProminence:"subtle",state:i.FabricsVariables.States.Hover})[t.Variables.BackgroundSelected]};
           }
 
           &:active {
-            background: ${e.layer({disabled:i,selectedProminence:"subtle",state:l.FabricsVariables.States.Press})[t.Variables.BackgroundSelected]};
+            background-color: ${r.layer({disabled:s,selectedProminence:"subtle",state:i.FabricsVariables.States.Press})[t.Variables.BackgroundSelected]};
           }
         `}
       `}
       
       &:focus-visible {
-        ${L.getFocusStyles(e)};
+        ${w.getFocusStyles(r)};
       }
     `}};
-`,F=r.styled.li`
-  ${({$metaTextPosition:e,$size:s,$variant:o,$withMetaText:n,$iconOrFlagProvided:d})=>r.css`
-      display: grid;
-      align-items: center;
-      width: 100%;
-      max-width: 100%;
-      column-gap: 6px;
-      border-radius: 4px;
-      padding: ${a.consts[s].padding.vertical}px ${a.consts[s].padding.horizontal}px;
-      box-sizing: border-box;
-      cursor: pointer;
-
-      .${c.ICON_CLASS}:not(.${c.LIST_ITEM_CHECKED_ICON_CLASS}) {
-        grid-area: flag-icon;
-      }
-
-      ${u}, .${c.ICON_CLASS} {
-        width: ${a.consts[s].iconSize}px;
-        height: ${a.consts[s].iconSize}px;
-      }
-
-      ${y.getGridTemplateStyles({$metaTextPosition:e,$variant:o,$selected:!1,$withMetaText:n,$iconOrFlagProvided:d,$size:s})}
-    `};
-`;exports.CheckIcon=u;exports.FlagContainer=x;exports.Label=_;exports.ListItemHeaderWrapper=F;exports.ListItemWrapper=h;exports.MetaText=V;
+`;exports.Check=c;exports.FlagContainer=k;exports.Label=S;exports.ListItemWrapper=C;exports.MetaText=$;exports.Radio=n;exports.SelectionContainer=y;
 //# sourceMappingURL=ListItem.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ListItem.styles.js","sources":["../../../../src/components/ListItem/ListItem.styles.ts"],"sourcesContent":["import { styled, css } from 'styled-components';\nimport { FabricsVariables } from 'acinguiux-ds-fabrics';\nimport { ICON_CLASS, LIST_ITEM_CHECKED_ICON_CLASS } from 'acinguiux-ds-react-base/consts';\nimport { Variables } from 'acinguiux-ds-react-base/theme';\nimport { ListItemConsts, ListItemUtils, ListItemStyles } from 'acinguiux-ds-react-base/components/ListItem';\nimport { getFocusStyles } from 'acinguiux-ds-react-base/utils/stylesUtils';\n\nimport BaseCheck from '../Icon/components/Check';\nimport BaseLabel from '../Text/components/Label/Label';\nimport Text from '../Text/components/Text/Text';\nimport type { ListItemWrapperProps, PropsWithRequiredSize } from './ListItem.types';\n\nconst CheckIcon = styled(BaseCheck)`\n  grid-area: checkmark;\n`;\n\nconst FlagContainer = styled.div<PropsWithRequiredSize>`\n  ${({ $size }) => css`\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 100%;\n    font-size: ${ListItemConsts.consts[$size].iconSize}px;\n    grid-area: flag-icon;\n  `}\n`;\n\nconst Label = styled(BaseLabel)`\n  grid-area: label;\n\n  ${ListItemStyles.textStyles}\n`;\n\nconst MetaText = styled(Text)<Pick<ListItemWrapperProps, '$metaTextPosition'>>`\n  grid-area: meta;\n\n  ${({ $metaTextPosition }) => $metaTextPosition === 'right' && 'text-align: right;'}\n  ${ListItemStyles.textStyles}\n`;\n\nconst ListItemWrapper = styled.li<ListItemWrapperProps>`\n  ${({\n    theme,\n    $metaTextPosition,\n    $size,\n    $ariaInteractiveOnly,\n    $variant,\n    $selected,\n    $withMetaText,\n    $disabled,\n    $iconOrFlagProvided,\n  }) => {\n    const hoverLayer = theme.layer({\n      state: 'hover',\n    });\n\n    const activeLayer = theme.layer({\n      state: 'press',\n    });\n\n    const disabledLayer = theme.layer({\n      disabled: true,\n    });\n\n    return css`\n      display: grid;\n      align-items: center;\n      width: auto;\n      max-width: 100%;\n      column-gap: 6px;\n      border-radius: 4px;\n      padding: ${ListItemConsts.consts[$size].padding.vertical}px ${ListItemConsts.consts[$size].padding.horizontal}px;\n      box-sizing: border-box;\n      cursor: pointer;\n\n      .${ICON_CLASS}:not(.${LIST_ITEM_CHECKED_ICON_CLASS}) {\n        grid-area: flag-icon;\n      }\n\n      ${CheckIcon}, .${ICON_CLASS} {\n        width: ${ListItemConsts.consts[$size].iconSize}px;\n        height: ${ListItemConsts.consts[$size].iconSize}px;\n      }\n\n      ${ListItemUtils.getGridTemplateStyles({\n        $metaTextPosition,\n        $variant,\n        $selected,\n        $withMetaText,\n        $iconOrFlagProvided,\n        $size,\n      })}\n\n      ${$disabled &&\n      css`\n        ${FlagContainer} {\n          svg {\n            opacity: 0.3;\n          }\n        }\n        background-color: ${disabledLayer[Variables.BackgroundFoundation]};\n        color: ${disabledLayer[Variables.TextOnFoundationStrong]};\n        cursor: not-allowed;\n      `}\n\n      ${!$disabled &&\n      css`\n        &[aria-selected='true'] {\n          background-color: ${hoverLayer[Variables.BackgroundFoundation]};\n        }\n\n        &[aria-selected='true']:active {\n          background-color: ${activeLayer[Variables.BackgroundFoundation]};\n        }\n        ${!$ariaInteractiveOnly &&\n        css`\n          &:hover {\n            background-color: ${hoverLayer[Variables.BackgroundFoundation]};\n          }\n\n          &:active {\n            background-color: ${activeLayer[Variables.BackgroundFoundation]};\n          }\n        `}\n      `}\n\n      ${$selected &&\n      css`\n        background: ${theme.layer({ disabled: $disabled, selectedProminence: 'subtle' })[Variables.BackgroundSelected]};\n\n        &[aria-selected='true'] {\n          background: ${theme.layer({\n            disabled: $disabled,\n            selectedProminence: 'subtle',\n            state: FabricsVariables.States.Hover,\n          })[Variables.BackgroundSelected]};\n        }\n\n        &[aria-selected='true']:active {\n          background: ${theme.layer({\n            disabled: $disabled,\n            selectedProminence: 'subtle',\n            state: FabricsVariables.States.Press,\n          })[Variables.BackgroundSelected]};\n        }\n\n        ${!$ariaInteractiveOnly &&\n        css`\n          &:hover {\n            background: ${theme.layer({\n              disabled: $disabled,\n              selectedProminence: 'subtle',\n              state: FabricsVariables.States.Hover,\n            })[Variables.BackgroundSelected]};\n          }\n\n          &:active {\n            background: ${theme.layer({\n              disabled: $disabled,\n              selectedProminence: 'subtle',\n              state: FabricsVariables.States.Press,\n            })[Variables.BackgroundSelected]};\n          }\n        `}\n      `}\n      \n      &:focus-visible {\n        ${getFocusStyles(theme)};\n      }\n    `;\n  }};\n`;\n\nconst ListItemHeaderWrapper = styled.li<Omit<ListItemWrapperProps, '$selected' | '$ariaInteractiveOnly' | '$disabled'>>`\n  ${({ $metaTextPosition, $size, $variant, $withMetaText, $iconOrFlagProvided }) => {\n    return css`\n      display: grid;\n      align-items: center;\n      width: 100%;\n      max-width: 100%;\n      column-gap: 6px;\n      border-radius: 4px;\n      padding: ${ListItemConsts.consts[$size].padding.vertical}px ${ListItemConsts.consts[$size].padding.horizontal}px;\n      box-sizing: border-box;\n      cursor: pointer;\n\n      .${ICON_CLASS}:not(.${LIST_ITEM_CHECKED_ICON_CLASS}) {\n        grid-area: flag-icon;\n      }\n\n      ${CheckIcon}, .${ICON_CLASS} {\n        width: ${ListItemConsts.consts[$size].iconSize}px;\n        height: ${ListItemConsts.consts[$size].iconSize}px;\n      }\n\n      ${ListItemUtils.getGridTemplateStyles({\n        $metaTextPosition,\n        $variant,\n        $selected: false, // ListItemHeaderWrapper does not support selected state\n        $withMetaText,\n        $iconOrFlagProvided,\n        $size,\n      })}\n    `;\n  }};\n`;\n\nexport { ListItemHeaderWrapper, ListItemWrapper, FlagContainer, Label, MetaText, CheckIcon };\n"],"names":["CheckIcon","styled","BaseCheck","FlagContainer","$size","css","ListItemConsts.consts","Label","BaseLabel","ListItemStyles.textStyles","MetaText","Text","$metaTextPosition","ListItemWrapper","theme","$ariaInteractiveOnly","$variant","$selected","$withMetaText","$disabled","$iconOrFlagProvided","hoverLayer","activeLayer","disabledLayer","ICON_CLASS","LIST_ITEM_CHECKED_ICON_CLASS","ListItemUtils.getGridTemplateStyles","Variables","FabricsVariables","getFocusStyles","ListItemHeaderWrapper"],"mappings":"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"}
+{"version":3,"file":"ListItem.styles.js","sources":["../../../../src/components/ListItem/ListItem.styles.ts"],"sourcesContent":["import { styled, css } from 'styled-components';\nimport { FabricsVariables } from 'acinguiux-ds-fabrics';\nimport { ICON_CLASS, Sizes } from 'acinguiux-ds-react-base/consts';\nimport { Variables } from 'acinguiux-ds-react-base/theme';\nimport { getFocusStyles } from 'acinguiux-ds-react-base/utils/stylesUtils';\nimport { ListItemConsts } from 'acinguiux-ds-react-base/components/ListItem';\n\nimport BaseCheck from '../Icon/components/Check';\nimport BaseLabel from '../Text/components/Label/Label';\nimport type { ListItemWrapperProps, PropsWithRequiredSize } from './ListItem.types';\nimport { getGridTemplateStyles } from './ListItem.utils';\n\nconst Check = styled(BaseCheck)`\n  transition: opacity 200ms;\n`;\n\nconst Radio = styled.div`\n  background-color: currentColor;\n  width: 7px;\n  height: 7px;\n  border-radius: 100%;\n  transition: opacity 200ms;\n`;\n\nconst SelectionContainer = styled.div`\n  pointer-events: none;\n  grid-area: selection;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n`;\n\nconst FlagContainer = styled.div<PropsWithRequiredSize>(\n  ({ $size }) => css`\n    grid-area: icon;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 100%;\n    font-size: ${ListItemConsts.consts[$size].iconSize}px;\n  `,\n);\n\nconst Label = styled(BaseLabel)`\n  grid-area: label;\n  cursor: default;\n`;\n\nconst MetaText = styled(BaseLabel)<Pick<ListItemWrapperProps, '$metaTextPosition'>>(\n  ({ $metaTextPosition }) => css`\n    grid-area: meta;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    cursor: default;\n\n    ${$metaTextPosition === 'right' &&\n    css`\n      text-align: right;\n    `};\n  `,\n);\n\nconst ListItemWrapper = styled.li<ListItemWrapperProps>`\n  ${({\n    theme,\n    $metaTextPosition,\n    $size,\n    $ariaInteractiveOnly,\n    $variant,\n    $selected,\n    $withMetaText,\n    $disabled,\n    $iconOrFlagProvided,\n    $showInputControls,\n    $multiline,\n  }) => {\n    const hoverLayer = theme.layer({ state: 'hover' });\n    const activeLayer = theme.layer({ state: 'press' });\n    const disabledLayer = theme.layer({ disabled: true });\n\n    return css`\n      display: grid;\n      align-items: start;\n      width: 100%;\n      column-gap: ${ListItemConsts.consts[$size].gap}px;\n      border-radius: 4px;\n      padding: ${ListItemConsts.consts[$size].padding.vertical}px ${ListItemConsts.consts[$size].padding.horizontal}px;\n      box-sizing: border-box;\n      transition: background-color 0.3s ease-out;\n\n      ${getGridTemplateStyles({\n        $metaTextPosition,\n        $variant,\n        $selected,\n        $withMetaText,\n        $iconOrFlagProvided,\n        $showInputControls,\n        iconSize: ListItemConsts.consts[$size].iconSize,\n      })}\n\n      .${ICON_CLASS}, ${Check} {\n        grid-area: icon;\n        display: block;\n        width: ${ListItemConsts.consts[$size].iconSize}px;\n        height: ${ListItemConsts.consts[$size].iconSize}px;\n      }\n\n      ${SelectionContainer} {\n        width: ${ListItemConsts.consts[$size].iconSize}px;\n        height: ${ListItemConsts.consts[$size].iconSize}px;\n      }\n\n      ${MetaText} {\n        margin: ${$size === Sizes.Medium ? '0' : '2px 0'};\n      }\n\n      ${Check},\n      ${Radio} {\n        opacity: 0;\n      }\n\n      ${!$multiline &&\n      css`\n        ${Label} {\n          overflow: hidden;\n          text-overflow: ellipsis;\n          white-space: nowrap;\n        }\n      `}\n\n      ${$disabled &&\n      css`\n        ${FlagContainer} svg {\n          opacity: 0.3;\n        }\n        background-color: ${disabledLayer[Variables.BackgroundFoundation]};\n        color: ${disabledLayer[Variables.TextOnFoundationStrong]};\n        cursor: not-allowed;\n      `}\n\n      ${!$disabled &&\n      css`\n        &[aria-selected='true'] {\n          background-color: ${hoverLayer[Variables.BackgroundFoundation]};\n        }\n\n        &[aria-selected='true']:active {\n          background-color: ${activeLayer[Variables.BackgroundFoundation]};\n        }\n        ${!$ariaInteractiveOnly &&\n        css`\n          &:hover {\n            background-color: ${hoverLayer[Variables.BackgroundFoundation]};\n          }\n\n          &:active {\n            background-color: ${activeLayer[Variables.BackgroundFoundation]};\n          }\n        `}\n      `}\n\n      ${$selected &&\n      css`\n        background-color: ${$showInputControls\n          ? 'transparent'\n          : theme.layer({ disabled: $disabled, selectedProminence: 'subtle' })[Variables.BackgroundSelected]};\n\n        ${Check},\n        ${Radio} {\n          opacity: 1;\n        }\n\n        &[aria-selected='true'] {\n          background-color: ${theme.layer({\n            disabled: $disabled,\n            selectedProminence: 'subtle',\n            state: FabricsVariables.States.Hover,\n          })[Variables.BackgroundSelected]};\n        }\n\n        &[aria-selected='true']:active {\n          background-color: ${theme.layer({\n            disabled: $disabled,\n            selectedProminence: 'subtle',\n            state: FabricsVariables.States.Press,\n          })[Variables.BackgroundSelected]};\n        }\n\n        ${!$ariaInteractiveOnly &&\n        css`\n          &:hover {\n            background-color: ${theme.layer({\n              disabled: $disabled,\n              selectedProminence: 'subtle',\n              state: FabricsVariables.States.Hover,\n            })[Variables.BackgroundSelected]};\n          }\n\n          &:active {\n            background-color: ${theme.layer({\n              disabled: $disabled,\n              selectedProminence: 'subtle',\n              state: FabricsVariables.States.Press,\n            })[Variables.BackgroundSelected]};\n          }\n        `}\n      `}\n      \n      &:focus-visible {\n        ${getFocusStyles(theme)};\n      }\n    `;\n  }};\n`;\n\nexport { ListItemWrapper, FlagContainer, Label, MetaText, Check, Radio, SelectionContainer };\n"],"names":["Check","styled","BaseCheck","Radio","SelectionContainer","FlagContainer","$size","css","ListItemConsts.consts","Label","BaseLabel","MetaText","$metaTextPosition","ListItemWrapper","theme","$ariaInteractiveOnly","$variant","$selected","$withMetaText","$disabled","$iconOrFlagProvided","$showInputControls","$multiline","hoverLayer","activeLayer","disabledLayer","getGridTemplateStyles","ICON_CLASS","Sizes","Variables","FabricsVariables","getFocusStyles"],"mappings":"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"}

package/build/cjs/components/ListItem/ListItem.utils.js

@@ -0,0 +1,34 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("styled-components"),i=require("../../react-base/src/consts/index.js"),e=(...p)=>p.filter(m=>!!m).join(" "),T=({$withMetaText:p,$metaTextPosition:m,$variant:P,$iconOrFlagProvided:b,$showInputControls:f=!1,iconSize:y})=>{const g=P!=="default"&&!!b,t="label",s="1fr",c="meta",A="fit-content(25%)",u=".",r="selection",a=`${y}px`,d=g&&".",o=g&&"icon",n=g&&`${y}px`,$=f?l.css`
+        grid-template-areas: '${e(r,o,t)}';
+        grid-template-columns: ${e(a,n,s)};
+      `:l.css`
+        grid-template-areas: '${e(o,t,r)}';
+        grid-template-columns: ${e(n,s,a)};
+      `;if(!p)return $;if(f)switch(m){case i.Positions.Top:return l.css`
+          grid-template-areas:
+            '${e(u,d,c)}'
+            '${e(r,o,t)}';
+          grid-template-columns: ${e(a,n,s)};
+        `;case i.Positions.Bottom:return l.css`
+          grid-template-areas:
+            '${e(r,o,t)}'
+            '${e(u,d,c)}';
+          grid-template-columns: ${e(a,n,s)};
+        `;case i.Positions.Right:return l.css`
+          grid-template-areas: '${e(r,o,t,c)}';
+          grid-template-columns: ${e(a,n,s,A)};
+        `;default:return $}switch(m){case i.Positions.Top:return l.css`
+        grid-template-areas:
+          '${e(d,c,u)}'
+          '${e(o,t,r)}';
+        grid-template-columns: ${e(n,s,a)};
+      `;case i.Positions.Bottom:return l.css`
+        grid-template-areas:
+          '${e(o,t,r)}'
+          '${e(d,c,u)}';
+        grid-template-columns: ${e(n,s,a)};
+      `;case i.Positions.Right:return l.css`
+        grid-template-areas: '${e(o,t,c,r)}';
+        grid-template-columns: ${e(n,s,A,a)};
+      `;default:return $}};exports.getGridTemplateStyles=T;
+//# sourceMappingURL=ListItem.utils.js.map

package/build/cjs/components/ListItem/ListItem.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListItem.utils.js","sources":["../../../../src/components/ListItem/ListItem.utils.ts"],"sourcesContent":["import { css } from 'styled-components';\nimport { Positions } from 'acinguiux-ds-react-base/consts';\n\nimport { ListItemWrapperProps } from './ListItem.types';\n\nconst getTemplate = (...arr: (string | boolean)[]) => {\n  return arr.filter((str) => !!str).join(' ');\n};\n\ntype ListItemGridTemplateKeys =\n  | '$metaTextPosition'\n  | '$selected'\n  | '$variant'\n  | '$withMetaText'\n  | '$iconOrFlagProvided'\n  | '$showInputControls';\n\nexport const getGridTemplateStyles = ({\n  $withMetaText,\n  $metaTextPosition,\n  $variant,\n  $iconOrFlagProvided,\n  $showInputControls = false,\n  iconSize,\n}: Partial<Pick<ListItemWrapperProps, ListItemGridTemplateKeys>> & { iconSize: number }) => {\n  const showIconArea = $variant !== 'default' && Boolean($iconOrFlagProvided);\n\n  const labelArea = 'label';\n  const labelColumns = '1fr';\n\n  const metaArea = 'meta';\n  const metaColumns = 'fit-content(25%)';\n\n  const selectionAreaEmpty = '.';\n  const selectionArea = 'selection';\n  const selectionColumns = `${iconSize}px`;\n\n  const iconAreaEmpty = showIconArea && '.';\n  const iconArea = showIconArea && 'icon';\n  const iconColumns = showIconArea && `${iconSize}px`;\n\n  const defaultStyle = $showInputControls\n    ? css`\n        grid-template-areas: '${getTemplate(selectionArea, iconArea, labelArea)}';\n        grid-template-columns: ${getTemplate(selectionColumns, iconColumns, labelColumns)};\n      `\n    : css`\n        grid-template-areas: '${getTemplate(iconArea, labelArea, selectionArea)}';\n        grid-template-columns: ${getTemplate(iconColumns, labelColumns, selectionColumns)};\n      `;\n\n  if (!$withMetaText) {\n    return defaultStyle;\n  }\n\n  if ($showInputControls) {\n    switch ($metaTextPosition) {\n      case Positions.Top:\n        return css`\n          grid-template-areas:\n            '${getTemplate(selectionAreaEmpty, iconAreaEmpty, metaArea)}'\n            '${getTemplate(selectionArea, iconArea, labelArea)}';\n          grid-template-columns: ${getTemplate(selectionColumns, iconColumns, labelColumns)};\n        `;\n      case Positions.Bottom:\n        return css`\n          grid-template-areas:\n            '${getTemplate(selectionArea, iconArea, labelArea)}'\n            '${getTemplate(selectionAreaEmpty, iconAreaEmpty, metaArea)}';\n          grid-template-columns: ${getTemplate(selectionColumns, iconColumns, labelColumns)};\n        `;\n      case Positions.Right:\n        return css`\n          grid-template-areas: '${getTemplate(selectionArea, iconArea, labelArea, metaArea)}';\n          grid-template-columns: ${getTemplate(selectionColumns, iconColumns, labelColumns, metaColumns)};\n        `;\n      default:\n        return defaultStyle;\n    }\n  }\n\n  switch ($metaTextPosition) {\n    case Positions.Top:\n      return css`\n        grid-template-areas:\n          '${getTemplate(iconAreaEmpty, metaArea, selectionAreaEmpty)}'\n          '${getTemplate(iconArea, labelArea, selectionArea)}';\n        grid-template-columns: ${getTemplate(iconColumns, labelColumns, selectionColumns)};\n      `;\n    case Positions.Bottom:\n      return css`\n        grid-template-areas:\n          '${getTemplate(iconArea, labelArea, selectionArea)}'\n          '${getTemplate(iconAreaEmpty, metaArea, selectionAreaEmpty)}';\n        grid-template-columns: ${getTemplate(iconColumns, labelColumns, selectionColumns)};\n      `;\n    case Positions.Right:\n      return css`\n        grid-template-areas: '${getTemplate(iconArea, labelArea, metaArea, selectionArea)}';\n        grid-template-columns: ${getTemplate(iconColumns, labelColumns, metaColumns, selectionColumns)};\n      `;\n    default:\n      return defaultStyle;\n  }\n};\n"],"names":["getTemplate","arr","str","getGridTemplateStyles","$withMetaText","$metaTextPosition","$variant","$iconOrFlagProvided","$showInputControls","iconSize","showIconArea","labelArea","labelColumns","metaArea","metaColumns","selectionAreaEmpty","selectionArea","selectionColumns","iconAreaEmpty","iconArea","iconColumns","defaultStyle","css","Positions"],"mappings":"mMAKMA,EAAc,IAAIC,IACfA,EAAI,OAAQC,GAAQ,CAAC,CAACA,CAAG,EAAE,KAAK,GAAG,EAW/BC,EAAwB,CAAC,CACpC,cAAAC,EACA,kBAAAC,EACA,SAAAC,EACA,oBAAAC,EACA,mBAAAC,EAAqB,GACrB,SAAAC,CACF,IAA4F,CAC1F,MAAMC,EAAeJ,IAAa,WAAa,EAAQC,EAEjDI,EAAY,QACZC,EAAe,MAEfC,EAAW,OACXC,EAAc,mBAEdC,EAAqB,IACrBC,EAAgB,YAChBC,EAAmB,GAAGR,CAAQ,KAE9BS,EAAgBR,GAAgB,IAChCS,EAAWT,GAAgB,OAC3BU,EAAcV,GAAgB,GAAGD,CAAQ,KAEzCY,EAAeb,EACjBc,EAAAA;AAAAA,gCAC0BtB,EAAYgB,EAAeG,EAAUR,CAAS,CAAC;AAAA,iCAC9CX,EAAYiB,EAAkBG,EAAaR,CAAY,CAAC;AAAA,QAEnFU,EAAAA;AAAAA,gCAC0BtB,EAAYmB,EAAUR,EAAWK,CAAa,CAAC;AAAA,iCAC9ChB,EAAYoB,EAAaR,EAAcK,CAAgB,CAAC;AAAA,QAGvF,GAAI,CAACb,EACH,OAAOiB,EAGT,GAAIb,EACF,OAAQH,EAAA,CACN,KAAKkB,EAAAA,UAAU,IACb,OAAOD,EAAAA;AAAAA;AAAAA,eAEAtB,EAAYe,EAAoBG,EAAeL,CAAQ,CAAC;AAAA,eACxDb,EAAYgB,EAAeG,EAAUR,CAAS,CAAC;AAAA,mCAC3BX,EAAYiB,EAAkBG,EAAaR,CAAY,CAAC;AAAA,UAErF,KAAKW,EAAAA,UAAU,OACb,OAAOD,EAAAA;AAAAA;AAAAA,eAEAtB,EAAYgB,EAAeG,EAAUR,CAAS,CAAC;AAAA,eAC/CX,EAAYe,EAAoBG,EAAeL,CAAQ,CAAC;AAAA,mCACpCb,EAAYiB,EAAkBG,EAAaR,CAAY,CAAC;AAAA,UAErF,KAAKW,EAAAA,UAAU,MACb,OAAOD,EAAAA;AAAAA,kCACmBtB,EAAYgB,EAAeG,EAAUR,EAAWE,CAAQ,CAAC;AAAA,mCACxDb,EAAYiB,EAAkBG,EAAaR,EAAcE,CAAW,CAAC;AAAA,UAElG,QACE,OAAOO,CAAA,CAIb,OAAQhB,EAAA,CACN,KAAKkB,EAAAA,UAAU,IACb,OAAOD,EAAAA;AAAAA;AAAAA,aAEAtB,EAAYkB,EAAeL,EAAUE,CAAkB,CAAC;AAAA,aACxDf,EAAYmB,EAAUR,EAAWK,CAAa,CAAC;AAAA,iCAC3BhB,EAAYoB,EAAaR,EAAcK,CAAgB,CAAC;AAAA,QAErF,KAAKM,EAAAA,UAAU,OACb,OAAOD,EAAAA;AAAAA;AAAAA,aAEAtB,EAAYmB,EAAUR,EAAWK,CAAa,CAAC;AAAA,aAC/ChB,EAAYkB,EAAeL,EAAUE,CAAkB,CAAC;AAAA,iCACpCf,EAAYoB,EAAaR,EAAcK,CAAgB,CAAC;AAAA,QAErF,KAAKM,EAAAA,UAAU,MACb,OAAOD,EAAAA;AAAAA,gCACmBtB,EAAYmB,EAAUR,EAAWE,EAAUG,CAAa,CAAC;AAAA,iCACxDhB,EAAYoB,EAAaR,EAAcE,EAAaG,CAAgB,CAAC;AAAA,QAElG,QACE,OAAOI,CAAA,CAEb"}

package/build/cjs/components/ListItem/ListItemHeader.js

@@ -0,0 +1,2 @@
+"use strict";const s=require("react/jsx-runtime"),I=require("react"),L=require("classnames"),n=require("../../react-base/src/consts/index.js"),i=require("../../react-base/src/components/ListItem/ListItem.types.js"),q=require("../../react-base/src/components/ListItem/ListItemHeader.consts.js"),x=require("./ListItemHeader.styles.js"),o=require("./ListItem.styles.js"),_=require("../Flag/Flag.js"),S=require("../../react-base/src/consts/classes.js"),$=I.forwardRef(({className:c,icon:a,flag:e,label:d,divider:l=!0,size:t=n.Sizes.Medium,variant:r=i.ListItemVariants.Default,...u},m)=>s.jsxs(x.ListItemHeaderWrapper,{className:L(S.LIST_ITEM_HEADER_CLASS,c),ref:m,$size:t,$variant:r,$divider:l,$iconOrFlagProvided:!!a||!!e,tabIndex:-1,...u,children:[s.jsx(o.Label,{size:q.consts[t].labelSize,contrast:n.Contrasts.Subtle,children:d}),r===i.ListItemVariants.Flag&&e&&s.jsx(o.FlagContainer,{$size:t,"data-testid":`flag-${e}`,children:s.jsx(_,{flag:e})}),r===i.ListItemVariants.Icon&&a]}));module.exports=$;
+//# sourceMappingURL=ListItemHeader.js.map

package/build/cjs/components/ListItem/ListItemHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListItemHeader.js","sources":["../../../../src/components/ListItem/ListItemHeader.tsx"],"sourcesContent":["import { type ForwardedRef, type ReactElement, forwardRef } from 'react';\n\nimport classNames from 'classnames';\nimport { Sizes, Contrasts, LIST_ITEM_HEADER_CLASS } from 'acinguiux-ds-react-base/consts';\nimport { ListItemVariants } from 'acinguiux-ds-react-base/components/ListItem/ListItem.types.js';\nimport { consts } from 'acinguiux-ds-react-base/components/ListItem/ListItemHeader.consts.js';\n\nimport * as Styled from './ListItemHeader.styles';\nimport * as ListItemStyled from './ListItem.styles';\nimport Flag from '../Flag/Flag';\nimport type { IListItemHeaderProps } from './ListItem.types';\n\nconst ListItemHeader = forwardRef(\n  (\n    {\n      className,\n      icon,\n      flag,\n      label,\n      divider = true,\n      size = Sizes.Medium,\n      variant = ListItemVariants.Default,\n      ...rest\n    }: IListItemHeaderProps,\n    ref: ForwardedRef<HTMLLIElement>,\n  ): ReactElement => (\n    <Styled.ListItemHeaderWrapper\n      className={classNames(LIST_ITEM_HEADER_CLASS, className)}\n      ref={ref}\n      $size={size}\n      $variant={variant}\n      $divider={divider}\n      $iconOrFlagProvided={Boolean(icon) || Boolean(flag)}\n      tabIndex={-1}\n      {...rest}\n    >\n      <ListItemStyled.Label size={consts[size].labelSize} contrast={Contrasts.Subtle}>\n        {label}\n      </ListItemStyled.Label>\n      {variant === ListItemVariants.Flag && flag && (\n        <ListItemStyled.FlagContainer $size={size} data-testid={`flag-${flag}`}>\n          <Flag flag={flag} />\n        </ListItemStyled.FlagContainer>\n      )}\n      {variant === ListItemVariants.Icon && icon}\n    </Styled.ListItemHeaderWrapper>\n  ),\n);\n\nexport default ListItemHeader;\n"],"names":["ListItemHeader","forwardRef","className","icon","flag","label","divider","size","Sizes","variant","ListItemVariants","rest","ref","jsxs","Styled.ListItemHeaderWrapper","classNames","LIST_ITEM_HEADER_CLASS","jsx","ListItemStyled.Label","consts","Contrasts","ListItemStyled.FlagContainer","Flag"],"mappings":"icAYMA,EAAiBC,EAAAA,WACrB,CACE,CACE,UAAAC,EACA,KAAAC,EACA,KAAAC,EACA,MAAAC,EACA,QAAAC,EAAU,GACV,KAAAC,EAAOC,EAAAA,MAAM,OACb,QAAAC,EAAUC,EAAAA,iBAAiB,QAC3B,GAAGC,CAAA,EAELC,IAEAC,EAAAA,KAACC,EAAAA,sBAAA,CACC,UAAWC,EAAWC,EAAAA,uBAAwBd,CAAS,EACvD,IAAAU,EACA,MAAOL,EACP,SAAUE,EACV,SAAUH,EACV,oBAAqB,EAAQH,GAAS,EAAQC,EAC9C,SAAU,GACT,GAAGO,EAEJ,SAAA,CAAAM,EAAAA,IAACC,EAAAA,MAAA,CAAqB,KAAMC,EAAAA,OAAOZ,CAAI,EAAE,UAAW,SAAUa,EAAAA,UAAU,OACrE,SAAAf,CAAA,CACH,EACCI,IAAYC,EAAAA,iBAAiB,MAAQN,GACpCa,EAAAA,IAACI,gBAAA,CAA6B,MAAOd,EAAM,cAAa,QAAQH,CAAI,GAClE,SAAAa,EAAAA,IAACK,EAAA,CAAK,KAAAlB,EAAY,EACpB,EAEDK,IAAYC,EAAAA,iBAAiB,MAAQP,CAAA,CAAA,CAAA,CAG5C"}

package/build/cjs/components/ListItem/ListItemHeader.styles.js

@@ -0,0 +1,30 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("styled-components"),e=require("../../react-base/src/components/ListItem/ListItemHeader.consts.js"),a=require("../../react-base/src/theme/types/layer.js"),d=require("./ListItem.utils.js"),p=o.styled.li(({theme:r,$size:t,$variant:i,$iconOrFlagProvided:n,$divider:s})=>o.css`
+    position: relative;
+    display: grid;
+    align-items: center;
+    width: 100%;
+    max-width: 100%;
+    column-gap: 6px;
+    border-radius: 4px;
+    padding: ${e.consts[t].padding.vertical-2}px ${e.consts[t].padding.horizontal}px;
+    box-sizing: border-box;
+    cursor: pointer;
+
+    ${s&&o.css`
+      padding: ${e.consts[t].padding.vertical+3}px ${e.consts[t].padding.horizontal}px
+        ${e.consts[t].padding.vertical-2}px;
+
+      &::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: ${e.consts[t].padding.horizontal}px;
+        right: ${e.consts[t].padding.horizontal}px;
+        height: 1px;
+        background-color: ${r.layer()[a.Variables.BorderOnFoundationSubtle]};
+      }
+    `}
+
+    ${d.getGridTemplateStyles({$variant:i,$iconOrFlagProvided:n,iconSize:16})}
+  `);exports.ListItemHeaderWrapper=p;
+//# sourceMappingURL=ListItemHeader.styles.js.map

package/build/cjs/components/ListItem/ListItemHeader.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListItemHeader.styles.js","sources":["../../../../src/components/ListItem/ListItemHeader.styles.ts"],"sourcesContent":["import { styled, css } from 'styled-components';\nimport { consts } from 'acinguiux-ds-react-base/components/ListItem/ListItemHeader.consts.js';\nimport { Variables } from 'acinguiux-ds-react-base/theme';\n\nimport { ListItemHeaderWrapperProps } from './ListItem.types';\nimport { getGridTemplateStyles } from './ListItem.utils';\n\nconst ListItemHeaderWrapper = styled.li<\n  Omit<ListItemHeaderWrapperProps, '$selected' | '$ariaInteractiveOnly' | '$disabled'>\n>(\n  ({ theme, $size, $variant, $iconOrFlagProvided, $divider }) => css`\n    position: relative;\n    display: grid;\n    align-items: center;\n    width: 100%;\n    max-width: 100%;\n    column-gap: 6px;\n    border-radius: 4px;\n    padding: ${consts[$size].padding.vertical - 2}px ${consts[$size].padding.horizontal}px;\n    box-sizing: border-box;\n    cursor: pointer;\n\n    ${$divider &&\n    css`\n      padding: ${consts[$size].padding.vertical + 3}px ${consts[$size].padding.horizontal}px\n        ${consts[$size].padding.vertical - 2}px;\n\n      &::before {\n        content: '';\n        position: absolute;\n        top: 0;\n        left: ${consts[$size].padding.horizontal}px;\n        right: ${consts[$size].padding.horizontal}px;\n        height: 1px;\n        background-color: ${theme.layer()[Variables.BorderOnFoundationSubtle]};\n      }\n    `}\n\n    ${getGridTemplateStyles({\n      $variant,\n      $selected: false,\n      $iconOrFlagProvided,\n      iconSize: 16,\n    })}\n  `,\n);\n\nexport { ListItemHeaderWrapper };\n"],"names":["ListItemHeaderWrapper","styled","theme","$size","$variant","$iconOrFlagProvided","$divider","css","consts","Variables","getGridTemplateStyles"],"mappings":"wTAOMA,EAAwBC,EAAAA,OAAO,GAGnC,CAAC,CAAE,MAAAC,EAAO,MAAAC,EAAO,SAAAC,EAAU,oBAAAC,EAAqB,SAAAC,KAAeC,EAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,eAQlDC,SAAOL,CAAK,EAAE,QAAQ,SAAW,CAAC,MAAMK,SAAOL,CAAK,EAAE,QAAQ,UAAU;AAAA;AAAA;AAAA;AAAA,MAIjFG,GACFC,EAAAA;AAAAA,iBACaC,SAAOL,CAAK,EAAE,QAAQ,SAAW,CAAC,MAAMK,SAAOL,CAAK,EAAE,QAAQ,UAAU;AAAA,UAC/EK,EAAAA,OAAOL,CAAK,EAAE,QAAQ,SAAW,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAM5BK,SAAOL,CAAK,EAAE,QAAQ,UAAU;AAAA,iBAC/BK,SAAOL,CAAK,EAAE,QAAQ,UAAU;AAAA;AAAA,4BAErBD,EAAM,MAAA,EAAQO,EAAAA,UAAU,wBAAwB,CAAC;AAAA;AAAA,KAExE;AAAA;AAAA,MAECC,wBAAsB,CACtB,SAAAN,EAEA,oBAAAC,EACA,SAAU,EAAA,CACX,CAAC;AAAA,GAEN"}

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

@@ -1,2 +1,2 @@
-"use strict";const o=require("react/jsx-runtime"),m=require("react"),j=require("rc-menu"),u=require("../../react-base/src/consts/index.js"),C=require("../../react-base/src/components/Menu/Menu.consts.js"),N=require("../Icon/components/Ellipsis.js"),P=require("./Menu.styles.js"),y=require("./MenuContext.js"),A=require("./utils/motionUtils.js"),l=require("./utils/nodeUtils.js"),a=require("../../react-base/src/consts/classes.js"),L=m.forwardRef(({className:s,...t},e)=>o.jsx(j,{ref:e,rootClassName:s,...t})),R=(s,t)=>e=>{var i;if(!t)return;const n=(i=l.getLeafItems(s).find(r=>r.key===e.key))==null?void 0:i.path;t({...e,path:n})},U=({className:s,mode:t="inline",size:e=u.Sizes.Medium,inlineCollapsed:n=!1,muted:i=!1,indicatorPosition:r=u.Positions.Right,iconPosition:q=u.Positions.Left,noAnimate:x,items:c,selectedPath:M,selectedKeys:S,itemRender:d,children:h,...f})=>{const g=l.useItems(c)??h,I=m.useMemo(()=>({size:e,mode:t,inlineCollapsed:n,itemRender:d}),[e,t,n,d]),$=M?l.getItemsByPath(M||"",c):S;return o.jsx(y.Provider,{value:I,children:o.jsx(P.Menu,{as:L,prefixCls:a.MENU_CLASS,className:s,selectedKeys:$,$size:e,mode:t,defaultMotions:A.getDefaultMotions,inlineIndent:C.consts[e].indent,inlineCollapsed:n,triggerSubMenuAction:"click",overflowedIndicator:o.jsx("div",{className:`${a.MENU_CLASS}-submenu-title-content`,children:o.jsx(N,{className:`${a.MENU_CLASS}-submenu-rest-icon`})}),$iconPosition:q,$indicatorPosition:r,$muted:i,$noAnimate:x,...f,onSelect:R(c,f.onSelect),children:g})})};module.exports=U;
+"use strict";const o=require("react/jsx-runtime"),l=require("react"),C=require("@rc-component/menu"),u=require("../../react-base/src/consts/index.js"),N=require("../../react-base/src/components/Menu/Menu.consts.js"),v=require("../Icon/components/Ellipsis.js"),y=require("./Menu.styles.js"),A=require("./MenuContext.js"),L=require("./utils/motionUtils.js"),M=require("./utils/nodeUtils.js"),a=require("../../react-base/src/consts/classes.js"),P=l.forwardRef(({className:s,...e},t)=>o.jsx(C,{ref:t,rootClassName:s,...e})),R=(s,e)=>t=>{if(!e)return;const n=M.getLeafItems(s).find(r=>r.key===t.key)?.path;e({...t,path:n})},U=({className:s,mode:e="inline",size:t=u.Sizes.Medium,inlineCollapsed:n=!1,muted:r=!1,indicatorPosition:x=u.Positions.Right,iconPosition:S=u.Positions.Left,noAnimate:g,items:i,selectedPath:c,selectedKeys:f,defaultOpenToSelected:h=!1,itemRender:d,children:I,...m})=>{const $=M.useItems(i,I,{mode:e}),j=l.useMemo(()=>({size:t,mode:e,inlineCollapsed:n,itemRender:d}),[t,e,n,d]),q=l.useMemo(()=>c?M.getItemsByPath(c,i):f,[c,i,f]);return o.jsx(A.Provider,{value:j,children:o.jsx(y.Menu,{as:P,prefixCls:a.MENU_CLASS,className:s,selectedKeys:q,defaultOpenKeys:h?q:void 0,$size:t,mode:e,defaultMotions:L.getDefaultMotions,inlineIndent:N.consts[t].indent,inlineCollapsed:n,triggerSubMenuAction:"click",overflowedIndicator:o.jsx("div",{className:`${a.MENU_CLASS}-submenu-title-content`,children:o.jsx(v,{className:`${a.MENU_CLASS}-submenu-rest-icon`})}),$iconPosition:S,$indicatorPosition:x,$muted:r,$noAnimate:g,...m,onSelect:R(i,m.onSelect),children:$})})};module.exports=U;
 //# sourceMappingURL=Menu.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Menu.js","sources":["../../../../src/components/Menu/Menu.tsx"],"sourcesContent":["import { forwardRef, type ReactElement, useMemo } from 'react';\n\nimport RCMenu, { type MenuRef } from 'rc-menu';\nimport { Positions, Sizes, MENU_CLASS } from 'acinguiux-ds-react-base/consts';\nimport { MenuConsts } from 'acinguiux-ds-react-base/components/Menu';\n\nimport Ellipsis from '../Icon/components/Ellipsis';\nimport * as Styled from './Menu.styles';\nimport type { IMenuContext, IMenuProps, ItemType, SelectEventHandler, SelectInfo } from './Menu.types';\nimport MenuContext from './MenuContext';\nimport { getDefaultMotions } from './utils/motionUtils';\nimport { getItemsByPath, getLeafItems, useItems } from './utils/nodeUtils';\n\nconst RCMenuRef = forwardRef<MenuRef, IMenuProps>(\n  ({ className, ...rest }, ref): ReactElement => <RCMenu ref={ref} rootClassName={className} {...rest} />,\n);\n\nconst selectWithPath =\n  (items?: ItemType[], onSelect?: SelectEventHandler): SelectEventHandler =>\n  (info: SelectInfo) => {\n    if (!onSelect) {\n      return;\n    }\n\n    const path = getLeafItems(items).find((i) => i.key === info.key)?.path;\n    onSelect({ ...info, path });\n  };\n\nconst Menu = ({\n  className,\n  mode = 'inline',\n  size = Sizes.Medium,\n  inlineCollapsed = false,\n  muted = false,\n  indicatorPosition = Positions.Right,\n  iconPosition = Positions.Left,\n  noAnimate,\n  items,\n  selectedPath,\n  selectedKeys,\n  itemRender,\n  children,\n  ...rest\n}: IMenuProps): ReactElement => {\n  const mergedItems = useItems(items) ?? children;\n\n  const contextValue = useMemo<IMenuContext>(\n    () => ({\n      size,\n      mode,\n      inlineCollapsed,\n      itemRender,\n    }),\n    [size, mode, inlineCollapsed, itemRender],\n  );\n\n  const selectedItem = selectedPath ? getItemsByPath(selectedPath || '', items) : selectedKeys;\n\n  return (\n    <MenuContext.Provider value={contextValue}>\n      <Styled.Menu\n        as={RCMenuRef}\n        prefixCls={MENU_CLASS}\n        className={className}\n        selectedKeys={selectedItem}\n        $size={size}\n        mode={mode}\n        defaultMotions={getDefaultMotions}\n        inlineIndent={MenuConsts.consts[size].indent}\n        inlineCollapsed={inlineCollapsed}\n        triggerSubMenuAction=\"click\"\n        overflowedIndicator={\n          <div className={`${MENU_CLASS}-submenu-title-content`}>\n            <Ellipsis className={`${MENU_CLASS}-submenu-rest-icon`} />\n          </div>\n        }\n        $iconPosition={iconPosition}\n        $indicatorPosition={indicatorPosition}\n        $muted={muted}\n        $noAnimate={noAnimate}\n        {...rest}\n        onSelect={selectWithPath(items, rest.onSelect)}\n      >\n        {mergedItems}\n      </Styled.Menu>\n    </MenuContext.Provider>\n  );\n};\n\nexport default Menu;\n"],"names":["RCMenuRef","forwardRef","className","rest","ref","jsx","RCMenu","selectWithPath","items","onSelect","info","path","getLeafItems","i","Menu","mode","size","Sizes","inlineCollapsed","muted","indicatorPosition","Positions","iconPosition","noAnimate","selectedPath","selectedKeys","itemRender","children","mergedItems","useItems","contextValue","useMemo","selectedItem","getItemsByPath","MenuContext","Styled.Menu","MENU_CLASS","getDefaultMotions","MenuConsts.consts","Ellipsis"],"mappings":"+aAaMA,EAAYC,EAAAA,WAChB,CAAC,CAAE,UAAAC,EAAW,GAAGC,CAAA,EAAQC,IAAsBC,EAAAA,IAACC,EAAA,CAAO,IAAAF,EAAU,cAAeF,EAAY,GAAGC,CAAA,CAAM,CACvG,EAEMI,EACJ,CAACC,EAAoBC,IACpBC,GAAqB,OACpB,GAAI,CAACD,EACH,OAGF,MAAME,GAAOC,EAAAA,EAAAA,aAAaJ,CAAK,EAAE,KAAMK,GAAMA,EAAE,MAAQH,EAAK,GAAG,IAAlDE,YAAAA,EAAqD,KAClEH,EAAS,CAAE,GAAGC,EAAM,KAAAC,EAAM,CAC5B,EAEIG,EAAO,CAAC,CACZ,UAAAZ,EACA,KAAAa,EAAO,SACP,KAAAC,EAAOC,EAAAA,MAAM,OACb,gBAAAC,EAAkB,GAClB,MAAAC,EAAQ,GACR,kBAAAC,EAAoBC,EAAAA,UAAU,MAC9B,aAAAC,EAAeD,EAAAA,UAAU,KACzB,UAAAE,EACA,MAAAf,EACA,aAAAgB,EACA,aAAAC,EACA,WAAAC,EACA,SAAAC,EACA,GAAGxB,CACL,IAAgC,CAC9B,MAAMyB,EAAcC,EAAAA,SAASrB,CAAK,GAAKmB,EAEjCG,EAAeC,EAAAA,QACnB,KAAO,CACL,KAAAf,EACA,KAAAD,EACA,gBAAAG,EACA,WAAAQ,CAAA,GAEF,CAACV,EAAMD,EAAMG,EAAiBQ,CAAU,CAAA,EAGpCM,EAAeR,EAAeS,EAAAA,eAAeT,GAAgB,GAAIhB,CAAK,EAAIiB,EAEhF,OACEpB,EAAAA,IAAC6B,EAAY,SAAZ,CAAqB,MAAOJ,EAC3B,SAAAzB,EAAAA,IAAC8B,EAAAA,KAAA,CACC,GAAInC,EACJ,UAAWoC,EAAAA,WACX,UAAAlC,EACA,aAAc8B,EACd,MAAOhB,EACP,KAAAD,EACA,eAAgBsB,EAAAA,kBAChB,aAAcC,EAAAA,OAAkBtB,CAAI,EAAE,OACtC,gBAAAE,EACA,qBAAqB,QACrB,oBACEb,EAAAA,IAAC,MAAA,CAAI,UAAW,GAAG+B,EAAAA,UAAU,yBAC3B,SAAA/B,EAAAA,IAACkC,EAAA,CAAS,UAAW,GAAGH,EAAAA,UAAU,qBAAsB,EAC1D,EAEF,cAAed,EACf,mBAAoBF,EACpB,OAAQD,EACR,WAAYI,EACX,GAAGpB,EACJ,SAAUI,EAAeC,EAAOL,EAAK,QAAQ,EAE5C,SAAAyB,CAAA,CAAA,EAEL,CAEJ"}
+{"version":3,"file":"Menu.js","sources":["../../../../src/components/Menu/Menu.tsx"],"sourcesContent":["import { forwardRef, type ReactElement, useMemo } from 'react';\n\nimport RCMenu, { type MenuRef } from '@rc-component/menu';\nimport { Positions, Sizes, MENU_CLASS } from 'acinguiux-ds-react-base/consts';\nimport { MenuConsts } from 'acinguiux-ds-react-base/components/Menu';\n\nimport Ellipsis from '../Icon/components/Ellipsis';\nimport * as Styled from './Menu.styles';\nimport type { IMenuContext, IMenuProps, ItemType, SelectEventHandler, SelectInfo } from './Menu.types';\nimport MenuContext from './MenuContext';\nimport { getDefaultMotions } from './utils/motionUtils';\nimport { getItemsByPath, getLeafItems, useItems } from './utils/nodeUtils';\n\nconst RCMenuRef = forwardRef<MenuRef, IMenuProps>(\n  ({ className, ...rest }, ref): ReactElement => <RCMenu ref={ref} rootClassName={className} {...rest} />,\n);\n\nconst selectWithPath =\n  (items?: ItemType[], onSelect?: SelectEventHandler): SelectEventHandler =>\n  (info: SelectInfo) => {\n    if (!onSelect) {\n      return;\n    }\n\n    const path = getLeafItems(items).find((i) => i.key === info.key)?.path;\n    onSelect({ ...info, path });\n  };\n\nconst Menu = ({\n  className,\n  mode = 'inline',\n  size = Sizes.Medium,\n  inlineCollapsed = false,\n  muted = false,\n  indicatorPosition = Positions.Right,\n  iconPosition = Positions.Left,\n  noAnimate,\n  items,\n  selectedPath,\n  selectedKeys,\n  defaultOpenToSelected = false,\n  itemRender,\n  children,\n  ...rest\n}: IMenuProps): ReactElement => {\n  const mergedItems = useItems(items, children, { mode });\n\n  const contextValue = useMemo<IMenuContext>(\n    () => ({\n      size,\n      mode,\n      inlineCollapsed,\n      itemRender,\n    }),\n    [size, mode, inlineCollapsed, itemRender],\n  );\n\n  const selectedItem = useMemo(\n    () => (selectedPath ? getItemsByPath(selectedPath, items) : selectedKeys),\n    [selectedPath, items, selectedKeys],\n  );\n\n  return (\n    <MenuContext.Provider value={contextValue}>\n      <Styled.Menu\n        as={RCMenuRef}\n        prefixCls={MENU_CLASS}\n        className={className}\n        selectedKeys={selectedItem}\n        defaultOpenKeys={defaultOpenToSelected ? selectedItem : undefined}\n        $size={size}\n        mode={mode}\n        defaultMotions={getDefaultMotions}\n        inlineIndent={MenuConsts.consts[size].indent}\n        inlineCollapsed={inlineCollapsed}\n        triggerSubMenuAction=\"click\"\n        overflowedIndicator={\n          <div className={`${MENU_CLASS}-submenu-title-content`}>\n            <Ellipsis className={`${MENU_CLASS}-submenu-rest-icon`} />\n          </div>\n        }\n        $iconPosition={iconPosition}\n        $indicatorPosition={indicatorPosition}\n        $muted={muted}\n        $noAnimate={noAnimate}\n        {...rest}\n        onSelect={selectWithPath(items, rest.onSelect)}\n      >\n        {mergedItems}\n      </Styled.Menu>\n    </MenuContext.Provider>\n  );\n};\n\nexport default Menu;\n"],"names":["RCMenuRef","forwardRef","className","rest","ref","jsx","RCMenu","selectWithPath","items","onSelect","info","path","getLeafItems","i","Menu","mode","size","Sizes","inlineCollapsed","muted","indicatorPosition","Positions","iconPosition","noAnimate","selectedPath","selectedKeys","defaultOpenToSelected","itemRender","children","mergedItems","useItems","contextValue","useMemo","selectedItem","getItemsByPath","MenuContext","Styled.Menu","MENU_CLASS","getDefaultMotions","MenuConsts.consts","Ellipsis"],"mappings":"0bAaMA,EAAYC,EAAAA,WAChB,CAAC,CAAE,UAAAC,EAAW,GAAGC,CAAA,EAAQC,IAAsBC,EAAAA,IAACC,EAAA,CAAO,IAAAF,EAAU,cAAeF,EAAY,GAAGC,CAAA,CAAM,CACvG,EAEMI,EACJ,CAACC,EAAoBC,IACpBC,GAAqB,CACpB,GAAI,CAACD,EACH,OAGF,MAAME,EAAOC,EAAAA,aAAaJ,CAAK,EAAE,KAAMK,GAAMA,EAAE,MAAQH,EAAK,GAAG,GAAG,KAClED,EAAS,CAAE,GAAGC,EAAM,KAAAC,EAAM,CAC5B,EAEIG,EAAO,CAAC,CACZ,UAAAZ,EACA,KAAAa,EAAO,SACP,KAAAC,EAAOC,EAAAA,MAAM,OACb,gBAAAC,EAAkB,GAClB,MAAAC,EAAQ,GACR,kBAAAC,EAAoBC,EAAAA,UAAU,MAC9B,aAAAC,EAAeD,EAAAA,UAAU,KACzB,UAAAE,EACA,MAAAf,EACA,aAAAgB,EACA,aAAAC,EACA,sBAAAC,EAAwB,GACxB,WAAAC,EACA,SAAAC,EACA,GAAGzB,CACL,IAAgC,CAC9B,MAAM0B,EAAcC,EAAAA,SAAStB,EAAOoB,EAAU,CAAE,KAAAb,EAAM,EAEhDgB,EAAeC,EAAAA,QACnB,KAAO,CACL,KAAAhB,EACA,KAAAD,EACA,gBAAAG,EACA,WAAAS,CAAA,GAEF,CAACX,EAAMD,EAAMG,EAAiBS,CAAU,CAAA,EAGpCM,EAAeD,EAAAA,QACnB,IAAOR,EAAeU,EAAAA,eAAeV,EAAchB,CAAK,EAAIiB,EAC5D,CAACD,EAAchB,EAAOiB,CAAY,CAAA,EAGpC,OACEpB,EAAAA,IAAC8B,EAAY,SAAZ,CAAqB,MAAOJ,EAC3B,SAAA1B,EAAAA,IAAC+B,EAAAA,KAAA,CACC,GAAIpC,EACJ,UAAWqC,EAAAA,WACX,UAAAnC,EACA,aAAc+B,EACd,gBAAiBP,EAAwBO,EAAe,OACxD,MAAOjB,EACP,KAAAD,EACA,eAAgBuB,EAAAA,kBAChB,aAAcC,EAAAA,OAAkBvB,CAAI,EAAE,OACtC,gBAAAE,EACA,qBAAqB,QACrB,oBACEb,EAAAA,IAAC,MAAA,CAAI,UAAW,GAAGgC,EAAAA,UAAU,yBAC3B,SAAAhC,EAAAA,IAACmC,EAAA,CAAS,UAAW,GAAGH,EAAAA,UAAU,qBAAsB,EAC1D,EAEF,cAAef,EACf,mBAAoBF,EACpB,OAAQD,EACR,WAAYI,EACX,GAAGpB,EACJ,SAAUI,EAAeC,EAAOL,EAAK,QAAQ,EAE5C,SAAA0B,CAAA,CAAA,EAEL,CAEJ"}

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

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("rc-menu"),e=require("styled-components"),i=require("../../react-base/src/consts/classes.js"),r=require("../../react-base/src/utils/stylesUtils.js"),s=require("../../react-base/src/components/Menu/Menu.consts.js"),u=require("../../react-base/src/utils/sizesUtils.js"),a=require("./styles/groupMenuItem.styles.js"),c=require("./styles/menuItem.styles.js"),d=require("./styles/menuLabel.styles.js"),p=require("./styles/motion.styles.js"),y=require("./styles/subMenu.styles.js"),m=require("./styles/menuDivider.styles.js"),g=e.styled(l)`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("@rc-component/menu"),e=require("styled-components"),i=require("../../react-base/src/consts/classes.js"),r=require("../../react-base/src/utils/stylesUtils.js"),s=require("../../react-base/src/components/Menu/Menu.consts.js"),u=require("../../react-base/src/utils/sizesUtils.js"),a=require("./styles/groupMenuItem.styles.js"),c=require("./styles/menuItem.styles.js"),d=require("./styles/menuLabel.styles.js"),p=require("./styles/motion.styles.js"),y=require("./styles/subMenu.styles.js"),m=require("./styles/menuDivider.styles.js"),g=e.styled(l)`
   ${({theme:o,$size:t,mode:n})=>e.css`
     ${o.typography("label",u.getLabelTypographySize(t))};
     position: relative;

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

@@ -1 +1 @@
-{"version":3,"file":"Menu.styles.js","sources":["../../../../src/components/Menu/Menu.styles.ts"],"sourcesContent":["import RCMenu from 'rc-menu';\nimport { styled, css } from 'styled-components';\nimport { MENU_CLASS } from 'acinguiux-ds-react-base/consts';\nimport { getFocusStyles } from 'acinguiux-ds-react-base/utils/stylesUtils';\nimport { MenuConsts } from 'acinguiux-ds-react-base/components/Menu';\nimport { getLabelTypographySize } from 'acinguiux-ds-react-base/utils/sizesUtils';\n\nimport type { StyledMenuProps } from './Menu.types';\nimport { groupMenuItemStyle } from './styles/groupMenuItem.styles';\nimport { menuItemStyle } from './styles/menuItem.styles';\nimport { menuLabelStyle } from './styles/menuLabel.styles';\nimport { motionStyle } from './styles/motion.styles';\nimport { subMenuStyle } from './styles/subMenu.styles';\nimport { menuDividerStyle } from './styles/menuDivider.styles';\n\nexport const Menu = styled(RCMenu)<StyledMenuProps>`\n  ${({ theme, $size, mode }) => css<StyledMenuProps>`\n    ${theme.typography('label', getLabelTypographySize($size))};\n    position: relative;\n\n    ${mode !== 'horizontal' &&\n    css`\n      margin-left: -${MenuConsts.consts[$size].itemListMarginLeft}px;\n    `}\n\n    &:focus-visible {\n      outline: none;\n\n      &::before {\n        content: '';\n        pointer-events: none;\n        display: block;\n        position: absolute;\n        inset: 3px;\n        border-radius: 4px;\n        ${getFocusStyles(theme)};\n        z-index: 1;\n\n        ${mode !== 'horizontal' &&\n        css`\n          margin-left: ${MenuConsts.consts[$size].itemListMarginLeft}px;\n        `}\n      }\n    }\n\n    &.${MENU_CLASS} {\n      list-style: none;\n      margin-top: 0;\n      margin-bottom: 0;\n      padding: 0;\n      transition: width 0.3s ease-out;\n      will-change: width;\n\n      &-inline-collapsed {\n        width: ${MenuConsts.consts[$size].inlineCollapsedWidth}px;\n        overflow: visible;\n\n        ${mode !== 'horizontal' &&\n        css`\n          margin-right: ${MenuConsts.consts[$size].itemListMarginLeft}px;\n        `}\n\n        .${MENU_CLASS}-submenu-expand-icon {\n          display: none;\n        }\n      }\n    }\n\n    .${MENU_CLASS} {\n      &-hidden,\n      &-submenu-hidden {\n        display: none;\n      }\n\n      &,\n      &-item-group-list {\n        list-style: none;\n        padding: 0;\n        margin: 0;\n      }\n    }\n\n    /* Horizontal */\n    ${mode === 'horizontal' &&\n    css`\n      display: flex;\n      flex-direction: row;\n      align-items: stretch;\n      overflow: hidden;\n    `}\n\n    ${subMenuStyle};\n    ${menuLabelStyle};\n    ${menuItemStyle};\n    ${groupMenuItemStyle};\n    ${motionStyle};\n    ${menuDividerStyle};\n  `}\n`;\n"],"names":["Menu","styled","RCMenu","theme","$size","mode","css","getLabelTypographySize","MenuConsts.consts","getFocusStyles","MENU_CLASS","subMenuStyle","menuLabelStyle","menuItemStyle","groupMenuItemStyle","motionStyle","menuDividerStyle"],"mappings":"ooBAeaA,EAAOC,EAAAA,OAAOC,CAAM;AAAA,IAC7B,CAAC,CAAE,MAAAC,EAAO,MAAAC,EAAO,KAAAC,KAAWC,EAAAA;AAAAA,MAC1BH,EAAM,WAAW,QAASI,EAAAA,uBAAuBH,CAAK,CAAC,CAAC;AAAA;AAAA;AAAA,MAGxDC,IAAS,cACXC,EAAAA;AAAAA,sBACkBE,EAAAA,OAAkBJ,CAAK,EAAE,kBAAkB;AAAA,KAC5D;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAYKK,EAAAA,eAAeN,CAAK,CAAC;AAAA;AAAA;AAAA,UAGrBE,IAAS,cACXC,EAAAA;AAAAA,yBACiBE,EAAAA,OAAkBJ,CAAK,EAAE,kBAAkB;AAAA,SAC3D;AAAA;AAAA;AAAA;AAAA,QAIDM,YAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBASDF,EAAAA,OAAkBJ,CAAK,EAAE,oBAAoB;AAAA;AAAA;AAAA,UAGpDC,IAAS,cACXC,EAAAA;AAAAA,0BACkBE,EAAAA,OAAkBJ,CAAK,EAAE,kBAAkB;AAAA,SAC5D;AAAA;AAAA,WAEEM,YAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,OAMdA,YAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAeXL,IAAS,cACXC,EAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,KAKC;AAAA;AAAA,MAECK,cAAY;AAAA,MACZC,gBAAc;AAAA,MACdC,eAAa;AAAA,MACbC,oBAAkB;AAAA,MAClBC,aAAW;AAAA,MACXC,kBAAgB;AAAA,GACnB;AAAA"}
+{"version":3,"file":"Menu.styles.js","sources":["../../../../src/components/Menu/Menu.styles.ts"],"sourcesContent":["import RCMenu from '@rc-component/menu';\nimport { styled, css } from 'styled-components';\nimport { MENU_CLASS } from 'acinguiux-ds-react-base/consts';\nimport { getFocusStyles } from 'acinguiux-ds-react-base/utils/stylesUtils';\nimport { MenuConsts } from 'acinguiux-ds-react-base/components/Menu';\nimport { getLabelTypographySize } from 'acinguiux-ds-react-base/utils/sizesUtils';\n\nimport type { StyledMenuProps } from './Menu.types';\nimport { groupMenuItemStyle } from './styles/groupMenuItem.styles';\nimport { menuItemStyle } from './styles/menuItem.styles';\nimport { menuLabelStyle } from './styles/menuLabel.styles';\nimport { motionStyle } from './styles/motion.styles';\nimport { subMenuStyle } from './styles/subMenu.styles';\nimport { menuDividerStyle } from './styles/menuDivider.styles';\n\nexport const Menu = styled(RCMenu)<StyledMenuProps>`\n  ${({ theme, $size, mode }) => css<StyledMenuProps>`\n    ${theme.typography('label', getLabelTypographySize($size))};\n    position: relative;\n\n    ${mode !== 'horizontal' &&\n    css`\n      margin-left: -${MenuConsts.consts[$size].itemListMarginLeft}px;\n    `}\n\n    &:focus-visible {\n      outline: none;\n\n      &::before {\n        content: '';\n        pointer-events: none;\n        display: block;\n        position: absolute;\n        inset: 3px;\n        border-radius: 4px;\n        ${getFocusStyles(theme)};\n        z-index: 1;\n\n        ${mode !== 'horizontal' &&\n        css`\n          margin-left: ${MenuConsts.consts[$size].itemListMarginLeft}px;\n        `}\n      }\n    }\n\n    &.${MENU_CLASS} {\n      list-style: none;\n      margin-top: 0;\n      margin-bottom: 0;\n      padding: 0;\n      transition: width 0.3s ease-out;\n      will-change: width;\n\n      &-inline-collapsed {\n        width: ${MenuConsts.consts[$size].inlineCollapsedWidth}px;\n        overflow: visible;\n\n        ${mode !== 'horizontal' &&\n        css`\n          margin-right: ${MenuConsts.consts[$size].itemListMarginLeft}px;\n        `}\n\n        .${MENU_CLASS}-submenu-expand-icon {\n          display: none;\n        }\n      }\n    }\n\n    .${MENU_CLASS} {\n      &-hidden,\n      &-submenu-hidden {\n        display: none;\n      }\n\n      &,\n      &-item-group-list {\n        list-style: none;\n        padding: 0;\n        margin: 0;\n      }\n    }\n\n    /* Horizontal */\n    ${mode === 'horizontal' &&\n    css`\n      display: flex;\n      flex-direction: row;\n      align-items: stretch;\n      overflow: hidden;\n    `}\n\n    ${subMenuStyle};\n    ${menuLabelStyle};\n    ${menuItemStyle};\n    ${groupMenuItemStyle};\n    ${motionStyle};\n    ${menuDividerStyle};\n  `}\n`;\n"],"names":["Menu","styled","RCMenu","theme","$size","mode","css","getLabelTypographySize","MenuConsts.consts","getFocusStyles","MENU_CLASS","subMenuStyle","menuLabelStyle","menuItemStyle","groupMenuItemStyle","motionStyle","menuDividerStyle"],"mappings":"+oBAeaA,EAAOC,EAAAA,OAAOC,CAAM;AAAA,IAC7B,CAAC,CAAE,MAAAC,EAAO,MAAAC,EAAO,KAAAC,KAAWC,EAAAA;AAAAA,MAC1BH,EAAM,WAAW,QAASI,EAAAA,uBAAuBH,CAAK,CAAC,CAAC;AAAA;AAAA;AAAA,MAGxDC,IAAS,cACXC,EAAAA;AAAAA,sBACkBE,EAAAA,OAAkBJ,CAAK,EAAE,kBAAkB;AAAA,KAC5D;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAYKK,EAAAA,eAAeN,CAAK,CAAC;AAAA;AAAA;AAAA,UAGrBE,IAAS,cACXC,EAAAA;AAAAA,yBACiBE,EAAAA,OAAkBJ,CAAK,EAAE,kBAAkB;AAAA,SAC3D;AAAA;AAAA;AAAA;AAAA,QAIDM,YAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBASDF,EAAAA,OAAkBJ,CAAK,EAAE,oBAAoB;AAAA;AAAA;AAAA,UAGpDC,IAAS,cACXC,EAAAA;AAAAA,0BACkBE,EAAAA,OAAkBJ,CAAK,EAAE,kBAAkB;AAAA,SAC5D;AAAA;AAAA,WAEEM,YAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,OAMdA,YAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAeXL,IAAS,cACXC,EAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,KAKC;AAAA;AAAA,MAECK,cAAY;AAAA,MACZC,gBAAc;AAAA,MACdC,eAAa;AAAA,MACbC,oBAAkB;AAAA,MAClBC,aAAW;AAAA,MACXC,kBAAgB;AAAA,GACnB;AAAA"}

package/build/cjs/components/Menu/components/MenuDivider.js

@@ -1,2 +1,2 @@
-"use strict";const i=require("react/jsx-runtime"),r=require("rc-menu"),s=({...e})=>i.jsx(r.Divider,{...e});module.exports=s;
+"use strict";const e=require("react/jsx-runtime"),i=require("react"),n=require("../../../react-base/src/consts/index.js"),o=require("classnames"),c=require("../MenuContext.js"),u=require("../../Divider/Divider.js"),a=require("../../../react-base/src/consts/classes.js"),l=({className:r,style:s})=>{const{mode:t}=i.useContext(c);return e.jsx("li",{role:"separator",className:o(r,`${a.MENU_CLASS}-item-divider`),style:s,children:e.jsx(u,{size:n.Sizes.Small,contrast:"subtle",shape:"rounded",direction:t==="horizontal"?"vertical":"horizontal"})})};module.exports=l;
 //# sourceMappingURL=MenuDivider.js.map

package/build/cjs/components/Menu/components/MenuDivider.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuDivider.js","sources":["../../../../../src/components/Menu/components/MenuDivider.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\n\nimport { Divider } from 'rc-menu';\nimport type { DividerProps } from 'rc-menu/lib/Divider';\n\nexport type IMenuDividerProps = DividerProps;\n\nconst MenuDivider = ({ ...props }: IMenuDividerProps): ReactElement => <Divider {...props} />;\n\nexport default MenuDivider;\n"],"names":["MenuDivider","props","jsx","Divider"],"mappings":"uEAOMA,EAAc,CAAC,CAAE,GAAGC,KAA6CC,EAAAA,IAACC,EAAAA,QAAA,CAAS,GAAGF,CAAA,CAAO"}
+{"version":3,"file":"MenuDivider.js","sources":["../../../../../src/components/Menu/components/MenuDivider.tsx"],"sourcesContent":["import { useContext, type ReactElement } from 'react';\n\nimport type { DividerProps } from '@rc-component/menu/lib/Divider';\nimport { MENU_CLASS, Sizes } from 'acinguiux-ds-react-base/consts';\nimport classNames from 'classnames';\n\nimport MenuContext from '../MenuContext';\nimport Divider from '../../Divider/Divider';\n\nexport type IMenuDividerProps = DividerProps;\n\nconst MenuDivider = ({ className, style }: IMenuDividerProps): ReactElement => {\n  const { mode } = useContext(MenuContext);\n\n  return (\n    <li role=\"separator\" className={classNames(className, `${MENU_CLASS}-item-divider`)} style={style}>\n      <Divider\n        size={Sizes.Small}\n        contrast=\"subtle\"\n        shape=\"rounded\"\n        direction={mode === 'horizontal' ? 'vertical' : 'horizontal'}\n      />\n    </li>\n  );\n};\n\nexport default MenuDivider;\n"],"names":["MenuDivider","className","style","mode","useContext","MenuContext","jsx","classNames","MENU_CLASS","Divider","Sizes"],"mappings":"8QAWMA,EAAc,CAAC,CAAE,UAAAC,EAAW,MAAAC,KAA6C,CAC7E,KAAM,CAAE,KAAAC,CAAA,EAASC,EAAAA,WAAWC,CAAW,EAEvC,OACEC,EAAAA,IAAC,KAAA,CAAG,KAAK,YAAY,UAAWC,EAAWN,EAAW,GAAGO,EAAAA,UAAU,eAAe,EAAG,MAAAN,EACnF,SAAAI,EAAAA,IAACG,EAAA,CACC,KAAMC,EAAAA,MAAM,MACZ,SAAS,SACT,MAAM,UACN,UAAWP,IAAS,aAAe,WAAa,YAAA,CAAA,EAEpD,CAEJ"}

package/build/cjs/components/Menu/components/MenuItem.js

@@ -1,2 +1,2 @@
-"use strict";const t=require("react/jsx-runtime"),e=require("react"),b=require("rc-menu"),d=require("../../../react-base/src/consts/index.js"),j=require("../../../react-base/src/utils/sizesUtils.js"),C=require("../../../utils/textUtils.js"),T=require("./MenuLabel.js"),z=require("../../Tooltip/Tooltip.js"),I=require("../MenuContext.js"),c=require("../styles/menuLabel.styles.js"),L=require("../Menu.utils.js"),S=require("../../Badge/Badge.js"),y=e.forwardRef(({children:n,itemIcon:p,level:o,path:q,badge:i,itemRender:x,...m},f)=>{const s=e.useRef(null),[M,r]=e.useState(!1),{inlineCollapsed:u,size:l}=e.useContext(I);e.useImperativeHandle(f,()=>s.current);const g=e.useCallback(()=>r(!0),[]),R=e.useCallback(()=>r(!1),[]),a=e.useMemo(()=>!u||o===void 0||o>0,[u,o]);return t.jsx(b.MenuItem,{ref:s,"aria-label":C.getString(n),...m,onMouseEnter:g,onMouseLeave:R,children:t.jsx(z,{targetRef:s,isOpen:!a&&M,isDisabled:a,placement:d.Positions.Right,trigger:t.jsx(T,{parentRef:s,path:q,itemIcon:p,itemRender:x,badge:i,children:n}),overlay:t.jsxs(c.TooltipContainer,{gap:"1rem",children:[t.jsx(c.TooltipLabel,{size:L.getTooltipLabelSize(l),children:n}),i&&t.jsx(S,{size:j.getSmallerSize(l),...i})]}),delay:50,closeDelay:200})})});module.exports=y;
+"use strict";const t=require("react/jsx-runtime"),e=require("react"),b=require("@rc-component/menu"),d=require("../../../react-base/src/consts/index.js"),j=require("../../../react-base/src/utils/sizesUtils.js"),C=require("../../../utils/textUtils.js"),T=require("./MenuLabel.js"),z=require("../../Tooltip/Tooltip.js"),I=require("../MenuContext.js"),c=require("../styles/menuLabel.styles.js"),L=require("../Menu.utils.js"),S=require("../../Badge/Badge.js"),y=e.forwardRef(({children:n,itemIcon:p,level:o,path:q,badge:i,itemRender:x,...m},f)=>{const s=e.useRef(null),[M,r]=e.useState(!1),{inlineCollapsed:u,size:l}=e.useContext(I);e.useImperativeHandle(f,()=>s.current);const g=e.useCallback(()=>r(!0),[]),R=e.useCallback(()=>r(!1),[]),a=e.useMemo(()=>!u||o===void 0||o>0,[u,o]);return t.jsx(b.MenuItem,{ref:s,"aria-label":C.getString(n),...m,onMouseEnter:g,onMouseLeave:R,children:t.jsx(z,{targetRef:s,isOpen:!a&&M,isDisabled:a,placement:d.Positions.Right,trigger:t.jsx(T,{parentRef:s,path:q,itemIcon:p,itemRender:x,badge:i,children:n}),overlay:t.jsxs(c.TooltipContainer,{gap:"1rem",children:[t.jsx(c.TooltipLabel,{size:L.getTooltipLabelSize(l),children:n}),i&&t.jsx(S,{size:j.getSmallerSize(l),...i})]}),delay:50,closeDelay:200})})});module.exports=y;
 //# sourceMappingURL=MenuItem.js.map

package/build/cjs/components/Menu/components/MenuItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuItem.js","sources":["../../../../../src/components/Menu/components/MenuItem.tsx"],"sourcesContent":["import {\n  type ReactElement,\n  forwardRef,\n  useCallback,\n  useContext,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\nimport { MenuItem as RCMenuItem } from 'rc-menu';\nimport type { MenuItemProps as RCMenuItemProps } from 'rc-menu/lib/MenuItem';\nimport { Positions } from 'acinguiux-ds-react-base/consts';\nimport type { MenuTypes } from 'acinguiux-ds-react-base/components/Menu';\nimport type { BadgeTypes } from 'acinguiux-ds-react-base/components/Badge';\nimport { getSmallerSize } from 'acinguiux-ds-react-base/utils/sizesUtils';\n\nimport { getString } from '../../../utils/textUtils';\nimport MenuLabel from './MenuLabel';\nimport Tooltip from '../../Tooltip/Tooltip';\nimport MenuContext from '../MenuContext';\nimport { TooltipContainer, TooltipLabel } from '../styles/menuLabel.styles';\nimport { getTooltipLabelSize } from '../Menu.utils';\nimport Badge from '../../Badge/Badge';\n\nexport interface IMenuItemProps extends RCMenuItemProps {\n  level?: number;\n  path?: string;\n  badge?: Omit<BadgeTypes.IProps, 'size'>;\n  itemRender?: MenuTypes.ItemRender;\n}\n\nconst MenuItem = forwardRef<HTMLElement, IMenuItemProps>(\n  ({ children, itemIcon, level, path, badge, itemRender, ...rest }, ref): ReactElement => {\n    const menuItemRef = useRef<HTMLElement>(null);\n    const [isTooltipOpen, setIsTooltipOpen] = useState(false);\n    const { inlineCollapsed, size } = useContext(MenuContext);\n    useImperativeHandle<HTMLElement | null, HTMLElement | null>(ref, () => menuItemRef.current);\n\n    const onMouseEnter = useCallback(() => setIsTooltipOpen(true), []);\n    const onMouseLeave = useCallback(() => setIsTooltipOpen(false), []);\n    const isTooltipDisabled = useMemo(\n      () => !inlineCollapsed || level === undefined || level > 0,\n      [inlineCollapsed, level],\n    );\n\n    return (\n      <RCMenuItem\n        ref={menuItemRef}\n        aria-label={getString(children)}\n        {...rest}\n        onMouseEnter={onMouseEnter}\n        onMouseLeave={onMouseLeave}\n      >\n        <Tooltip\n          targetRef={menuItemRef}\n          isOpen={!isTooltipDisabled && isTooltipOpen}\n          isDisabled={isTooltipDisabled}\n          placement={Positions.Right}\n          trigger={\n            <MenuLabel parentRef={menuItemRef} path={path} itemIcon={itemIcon} itemRender={itemRender} badge={badge}>\n              {children}\n            </MenuLabel>\n          }\n          overlay={\n            <TooltipContainer gap=\"1rem\">\n              <TooltipLabel size={getTooltipLabelSize(size)}>{children}</TooltipLabel>\n              {badge && <Badge size={getSmallerSize(size) as BadgeTypes.Size} {...badge} />}\n            </TooltipContainer>\n          }\n          delay={50}\n          closeDelay={200}\n        />\n      </RCMenuItem>\n    );\n  },\n);\n\nexport default MenuItem;\n"],"names":["MenuItem","forwardRef","children","itemIcon","level","path","badge","itemRender","rest","ref","menuItemRef","useRef","isTooltipOpen","setIsTooltipOpen","useState","inlineCollapsed","size","useContext","MenuContext","useImperativeHandle","onMouseEnter","useCallback","onMouseLeave","isTooltipDisabled","useMemo","jsx","RCMenuItem","getString","Tooltip","Positions","MenuLabel","jsxs","TooltipContainer","TooltipLabel","getTooltipLabelSize","Badge","getSmallerSize"],"mappings":"6bAiCMA,EAAWC,EAAAA,WACf,CAAC,CAAE,SAAAC,EAAU,SAAAC,EAAU,MAAAC,EAAO,KAAAC,EAAM,MAAAC,EAAO,WAAAC,EAAY,GAAGC,CAAA,EAAQC,IAAsB,CACtF,MAAMC,EAAcC,EAAAA,OAAoB,IAAI,EACtC,CAACC,EAAeC,CAAgB,EAAIC,EAAAA,SAAS,EAAK,EAClD,CAAE,gBAAAC,EAAiB,KAAAC,GAASC,EAAAA,WAAWC,CAAW,EACxDC,EAAAA,oBAA4DV,EAAK,IAAMC,EAAY,OAAO,EAE1F,MAAMU,EAAeC,EAAAA,YAAY,IAAMR,EAAiB,EAAI,EAAG,CAAA,CAAE,EAC3DS,EAAeD,EAAAA,YAAY,IAAMR,EAAiB,EAAK,EAAG,CAAA,CAAE,EAC5DU,EAAoBC,EAAAA,QACxB,IAAM,CAACT,GAAmBX,IAAU,QAAaA,EAAQ,EACzD,CAACW,EAAiBX,CAAK,CAAA,EAGzB,OACEqB,EAAAA,IAACC,EAAAA,SAAA,CACC,IAAKhB,EACL,aAAYiB,EAAAA,UAAUzB,CAAQ,EAC7B,GAAGM,EACJ,aAAAY,EACA,aAAAE,EAEA,SAAAG,EAAAA,IAACG,EAAA,CACC,UAAWlB,EACX,OAAQ,CAACa,GAAqBX,EAC9B,WAAYW,EACZ,UAAWM,EAAAA,UAAU,MACrB,cACGC,EAAA,CAAU,UAAWpB,EAAa,KAAAL,EAAY,SAAAF,EAAoB,WAAAI,EAAwB,MAAAD,EACxF,SAAAJ,CAAA,CACH,EAEF,QACE6B,EAAAA,KAACC,EAAAA,iBAAA,CAAiB,IAAI,OACpB,SAAA,CAAAP,EAAAA,IAACQ,EAAAA,aAAA,CAAa,KAAMC,EAAAA,oBAAoBlB,CAAI,EAAI,SAAAd,EAAS,EACxDI,SAAU6B,EAAA,CAAM,KAAMC,EAAAA,eAAepB,CAAI,EAAuB,GAAGV,CAAA,CAAO,CAAA,EAC7E,EAEF,MAAO,GACP,WAAY,GAAA,CAAA,CACd,CAAA,CAGN,CACF"}
+{"version":3,"file":"MenuItem.js","sources":["../../../../../src/components/Menu/components/MenuItem.tsx"],"sourcesContent":["import {\n  type ReactElement,\n  forwardRef,\n  useCallback,\n  useContext,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\nimport { MenuItem as RCMenuItem } from '@rc-component/menu';\nimport type { MenuItemProps as RCMenuItemProps } from '@rc-component/menu/lib/MenuItem';\nimport { Positions } from 'acinguiux-ds-react-base/consts';\nimport type { MenuTypes } from 'acinguiux-ds-react-base/components/Menu';\nimport type { BadgeTypes } from 'acinguiux-ds-react-base/components/Badge';\nimport { getSmallerSize } from 'acinguiux-ds-react-base/utils/sizesUtils';\n\nimport { getString } from '../../../utils/textUtils';\nimport MenuLabel from './MenuLabel';\nimport Tooltip from '../../Tooltip/Tooltip';\nimport MenuContext from '../MenuContext';\nimport { TooltipContainer, TooltipLabel } from '../styles/menuLabel.styles';\nimport { getTooltipLabelSize } from '../Menu.utils';\nimport Badge from '../../Badge/Badge';\n\nexport interface IMenuItemProps extends RCMenuItemProps {\n  level?: number;\n  path?: string;\n  badge?: Omit<BadgeTypes.IProps, 'size'>;\n  itemRender?: MenuTypes.ItemRender;\n}\n\nconst MenuItem = forwardRef<HTMLElement, IMenuItemProps>(\n  ({ children, itemIcon, level, path, badge, itemRender, ...rest }, ref): ReactElement => {\n    const menuItemRef = useRef<HTMLElement>(null);\n    const [isTooltipOpen, setIsTooltipOpen] = useState(false);\n    const { inlineCollapsed, size } = useContext(MenuContext);\n    useImperativeHandle<HTMLElement | null, HTMLElement | null>(ref, () => menuItemRef.current);\n\n    const onMouseEnter = useCallback(() => setIsTooltipOpen(true), []);\n    const onMouseLeave = useCallback(() => setIsTooltipOpen(false), []);\n    const isTooltipDisabled = useMemo(\n      () => !inlineCollapsed || level === undefined || level > 0,\n      [inlineCollapsed, level],\n    );\n\n    return (\n      <RCMenuItem\n        ref={menuItemRef}\n        aria-label={getString(children)}\n        {...rest}\n        onMouseEnter={onMouseEnter}\n        onMouseLeave={onMouseLeave}\n      >\n        <Tooltip\n          targetRef={menuItemRef}\n          isOpen={!isTooltipDisabled && isTooltipOpen}\n          isDisabled={isTooltipDisabled}\n          placement={Positions.Right}\n          trigger={\n            <MenuLabel parentRef={menuItemRef} path={path} itemIcon={itemIcon} itemRender={itemRender} badge={badge}>\n              {children}\n            </MenuLabel>\n          }\n          overlay={\n            <TooltipContainer gap=\"1rem\">\n              <TooltipLabel size={getTooltipLabelSize(size)}>{children}</TooltipLabel>\n              {badge && <Badge size={getSmallerSize(size) as BadgeTypes.Size} {...badge} />}\n            </TooltipContainer>\n          }\n          delay={50}\n          closeDelay={200}\n        />\n      </RCMenuItem>\n    );\n  },\n);\n\nexport default MenuItem;\n"],"names":["MenuItem","forwardRef","children","itemIcon","level","path","badge","itemRender","rest","ref","menuItemRef","useRef","isTooltipOpen","setIsTooltipOpen","useState","inlineCollapsed","size","useContext","MenuContext","useImperativeHandle","onMouseEnter","useCallback","onMouseLeave","isTooltipDisabled","useMemo","jsx","RCMenuItem","getString","Tooltip","Positions","MenuLabel","jsxs","TooltipContainer","TooltipLabel","getTooltipLabelSize","Badge","getSmallerSize"],"mappings":"wcAiCMA,EAAWC,EAAAA,WACf,CAAC,CAAE,SAAAC,EAAU,SAAAC,EAAU,MAAAC,EAAO,KAAAC,EAAM,MAAAC,EAAO,WAAAC,EAAY,GAAGC,CAAA,EAAQC,IAAsB,CACtF,MAAMC,EAAcC,EAAAA,OAAoB,IAAI,EACtC,CAACC,EAAeC,CAAgB,EAAIC,EAAAA,SAAS,EAAK,EAClD,CAAE,gBAAAC,EAAiB,KAAAC,GAASC,EAAAA,WAAWC,CAAW,EACxDC,EAAAA,oBAA4DV,EAAK,IAAMC,EAAY,OAAO,EAE1F,MAAMU,EAAeC,EAAAA,YAAY,IAAMR,EAAiB,EAAI,EAAG,CAAA,CAAE,EAC3DS,EAAeD,EAAAA,YAAY,IAAMR,EAAiB,EAAK,EAAG,CAAA,CAAE,EAC5DU,EAAoBC,EAAAA,QACxB,IAAM,CAACT,GAAmBX,IAAU,QAAaA,EAAQ,EACzD,CAACW,EAAiBX,CAAK,CAAA,EAGzB,OACEqB,EAAAA,IAACC,EAAAA,SAAA,CACC,IAAKhB,EACL,aAAYiB,EAAAA,UAAUzB,CAAQ,EAC7B,GAAGM,EACJ,aAAAY,EACA,aAAAE,EAEA,SAAAG,EAAAA,IAACG,EAAA,CACC,UAAWlB,EACX,OAAQ,CAACa,GAAqBX,EAC9B,WAAYW,EACZ,UAAWM,EAAAA,UAAU,MACrB,cACGC,EAAA,CAAU,UAAWpB,EAAa,KAAAL,EAAY,SAAAF,EAAoB,WAAAI,EAAwB,MAAAD,EACxF,SAAAJ,CAAA,CACH,EAEF,QACE6B,EAAAA,KAACC,EAAAA,iBAAA,CAAiB,IAAI,OACpB,SAAA,CAAAP,EAAAA,IAACQ,EAAAA,aAAA,CAAa,KAAMC,EAAAA,oBAAoBlB,CAAI,EAAI,SAAAd,EAAS,EACxDI,SAAU6B,EAAA,CAAM,KAAMC,EAAAA,eAAepB,CAAI,EAAuB,GAAGV,CAAA,CAAO,CAAA,EAC7E,EAEF,MAAO,GACP,WAAY,GAAA,CAAA,CACd,CAAA,CAGN,CACF"}

package/build/cjs/components/Menu/components/MenuItemGroup.js

@@ -1,2 +1,2 @@
-"use strict";const e=require("react/jsx-runtime"),u=require("react"),i=require("rc-menu"),o=require("../../../react-base/src/consts/classes.js"),l=require("./MenuLabel.js"),a=({title:t,badge:r})=>e.jsx("div",{className:`${o.MENU_CLASS}-group-title-content`,children:e.jsx(l,{badge:r,children:t})}),x=u.forwardRef(({children:t,title:r,badge:s,...n},c)=>e.jsx(i.MenuItemGroup,{ref:c,title:e.jsx(a,{badge:s,title:r}),...n,children:t}));module.exports=x;
+"use strict";const e=require("react/jsx-runtime"),i=require("react"),l=require("@rc-component/menu"),n=require("../../../react-base/src/consts/classes.js"),a=require("classnames"),q=require("./MenuLabel.js"),x=({title:t,badge:s,kind:r})=>e.jsx("div",{className:a(`${n.MENU_CLASS}-group-title-content`,r==="subtle"&&`${n.MENU_CLASS}-group-title-content-subtle`),children:e.jsx(q,{badge:s,children:t})}),M=i.forwardRef(({children:t,title:s,badge:r,kind:u,...c},o)=>e.jsx(l.MenuItemGroup,{ref:o,title:e.jsx(x,{badge:r,title:s,kind:u}),...c,children:t}));module.exports=M;
 //# sourceMappingURL=MenuItemGroup.js.map

package/build/cjs/components/Menu/components/MenuItemGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuItemGroup.js","sources":["../../../../../src/components/Menu/components/MenuItemGroup.tsx"],"sourcesContent":["import { forwardRef, type ReactElement } from 'react';\n\nimport { MenuItemGroup as RCMenuItemGroup } from 'rc-menu';\nimport type { MenuItemGroupProps as RCMenuItemGroupProps } from 'rc-menu/lib/MenuItemGroup';\nimport { MENU_CLASS } from 'acinguiux-ds-react-base/consts';\nimport type { BadgeTypes } from 'acinguiux-ds-react-base/components/Badge';\n\nimport MenuLabel from './MenuLabel';\n\nexport interface IMenuItemGroupProps extends Omit<RCMenuItemGroupProps, 'ref'> {\n  badge?: Omit<BadgeTypes.IProps, 'size'>;\n}\n\nconst Title = ({ title, badge }: IMenuItemGroupProps): ReactElement => (\n  <div className={`${MENU_CLASS}-group-title-content`}>\n    <MenuLabel badge={badge}>{title}</MenuLabel>\n  </div>\n);\n\nconst MenuItemGroup = forwardRef<HTMLLIElement, IMenuItemGroupProps>(\n  ({ children, title, badge, ...rest }, ref): ReactElement => (\n    <RCMenuItemGroup ref={ref} title={<Title badge={badge} title={title} />} {...rest}>\n      {children}\n    </RCMenuItemGroup>\n  ),\n);\n\nexport default MenuItemGroup;\n"],"names":["Title","title","badge","jsx","MENU_CLASS","MenuLabel","MenuItemGroup","forwardRef","children","rest","ref","RCMenuItemGroup"],"mappings":"6KAaMA,EAAQ,CAAC,CAAE,MAAAC,EAAO,MAAAC,CAAA,IACtBC,EAAAA,IAAC,MAAA,CAAI,UAAW,GAAGC,EAAAA,UAAU,uBAC3B,SAAAD,EAAAA,IAACE,EAAA,CAAU,MAAAH,EAAe,WAAM,EAClC,EAGII,EAAgBC,EAAAA,WACpB,CAAC,CAAE,SAAAC,EAAU,MAAAP,EAAO,MAAAC,EAAO,GAAGO,GAAQC,IACpCP,EAAAA,IAACQ,iBAAgB,IAAAD,EAAU,YAAQV,EAAA,CAAM,MAAAE,EAAc,MAAAD,EAAc,EAAK,GAAGQ,EAC1E,SAAAD,CAAA,CACH,CAEJ"}
+{"version":3,"file":"MenuItemGroup.js","sources":["../../../../../src/components/Menu/components/MenuItemGroup.tsx"],"sourcesContent":["import { forwardRef, type ReactElement } from 'react';\n\nimport { MenuItemGroup as RCMenuItemGroup } from '@rc-component/menu';\nimport type { MenuItemGroupProps as RCMenuItemGroupProps } from '@rc-component/menu/lib/MenuItemGroup';\nimport { MENU_CLASS } from 'acinguiux-ds-react-base/consts';\nimport type { BadgeTypes } from 'acinguiux-ds-react-base/components/Badge';\nimport classNames from 'classnames';\n\nimport MenuLabel from './MenuLabel';\n\nexport interface IMenuItemGroupProps extends Omit<RCMenuItemGroupProps, 'ref'> {\n  badge?: Omit<BadgeTypes.IProps, 'size'>;\n  kind?: 'default' | 'subtle';\n}\n\nconst Title = ({ title, badge, kind }: IMenuItemGroupProps): ReactElement => (\n  <div\n    className={classNames(\n      `${MENU_CLASS}-group-title-content`,\n      kind === 'subtle' && `${MENU_CLASS}-group-title-content-subtle`,\n    )}\n  >\n    <MenuLabel badge={badge}>{title}</MenuLabel>\n  </div>\n);\n\nconst MenuItemGroup = forwardRef<HTMLLIElement, IMenuItemGroupProps>(\n  ({ children, title, badge, kind, ...rest }, ref): ReactElement => (\n    <RCMenuItemGroup ref={ref} title={<Title badge={badge} title={title} kind={kind} />} {...rest}>\n      {children}\n    </RCMenuItemGroup>\n  ),\n);\n\nexport default MenuItemGroup;\n"],"names":["Title","title","badge","kind","jsx","classNames","MENU_CLASS","MenuLabel","MenuItemGroup","forwardRef","children","rest","ref","RCMenuItemGroup"],"mappings":"gNAeMA,EAAQ,CAAC,CAAE,MAAAC,EAAO,MAAAC,EAAO,KAAAC,KAC7BC,EAAAA,IAAC,MAAA,CACC,UAAWC,EACT,GAAGC,EAAAA,UAAU,uBACbH,IAAS,UAAY,GAAGG,EAAAA,UAAU,6BAAA,EAGpC,SAAAF,EAAAA,IAACG,EAAA,CAAU,MAAAL,EAAe,SAAAD,CAAA,CAAM,CAAA,CAClC,EAGIO,EAAgBC,EAAAA,WACpB,CAAC,CAAE,SAAAC,EAAU,MAAAT,EAAO,MAAAC,EAAO,KAAAC,EAAM,GAAGQ,GAAQC,IAC1CR,EAAAA,IAACS,iBAAgB,IAAAD,EAAU,YAAQZ,EAAA,CAAM,MAAAE,EAAc,MAAAD,EAAc,KAAAE,EAAY,EAAK,GAAGQ,EACtF,SAAAD,CAAA,CACH,CAEJ"}

package/build/cjs/components/Menu/components/SubMenu.js

@@ -1,2 +1,2 @@
-"use strict";const s=require("react/jsx-runtime"),e=require("react"),f=require("rc-menu"),C=require("../../../react-base/src/consts/index.js"),M=require("../../../react-base/src/utils/sizesUtils.js"),j=require("../../Icon/components/ChevronSmallDown.js"),S=require("../MenuContext.js"),g=require("./MenuLabel.js"),T=require("../../Tooltip/Tooltip.js"),h=require("../utils/classObserverUtils.js"),m=require("../styles/menuLabel.styles.js"),z=require("../Menu.utils.js"),L=require("../../Badge/Badge.js"),q=require("../../../react-base/src/consts/classes.js"),R=e.forwardRef(({title:u,parentRef:n,itemIcon:p,level:o,isTooltipOpen:x,badge:i},d)=>{const{inlineCollapsed:t,size:r}=e.useContext(S),[l,c]=e.useState(!1),a=e.useMemo(()=>l||!t||o===void 0||o>0,[l,t,o]);return h.useClassObserver(n,b=>{c(b.contains("acinguiux-menu-submenu-open"))}),s.jsx(T,{targetRef:n,isOpen:!a&&x,isDisabled:a,placement:C.Positions.Right,trigger:s.jsxs("div",{ref:d,className:`${q.MENU_CLASS}-submenu-title-content`,children:[s.jsx(g,{parentRef:n,itemIcon:p,badge:i,children:u}),s.jsx(j,{className:`${q.MENU_CLASS}-submenu-expand-icon`})]}),overlay:s.jsxs(m.TooltipContainer,{gap:"1rem",children:[s.jsx(m.TooltipLabel,{size:z.getTooltipLabelSize(r),children:u}),i&&s.jsx(L,{size:M.getSmallerSize(r),...i})]}),delay:50,closeDelay:200})}),v=e.forwardRef(({title:u,itemIcon:n,level:p,badge:o,...x},i)=>{const{mode:d}=e.useContext(S),t=e.useRef(null),r=d==="horizontal"?[0,4]:[8,0],[l,c]=e.useState(!1),a=e.useCallback(()=>c(!0),[]),b=e.useCallback(()=>c(!1),[]);return e.useImperativeHandle(i,()=>t.current),s.jsx(f.SubMenu,{ref:t,onMouseEnter:a,onMouseLeave:b,title:s.jsx(R,{parentRef:t,title:u,level:p,itemIcon:n,isTooltipOpen:l,badge:o}),popupStyle:{padding:`${r[1]}px ${r[0]}px`},...x})});module.exports=v;
+"use strict";const s=require("react/jsx-runtime"),e=require("react"),f=require("@rc-component/menu"),C=require("../../../react-base/src/consts/index.js"),M=require("../../../react-base/src/utils/sizesUtils.js"),j=require("../../Icon/components/ChevronSmallDown.js"),S=require("../MenuContext.js"),g=require("./MenuLabel.js"),T=require("../../Tooltip/Tooltip.js"),h=require("../utils/classObserverUtils.js"),m=require("../styles/menuLabel.styles.js"),z=require("../Menu.utils.js"),L=require("../../Badge/Badge.js"),q=require("../../../react-base/src/consts/classes.js"),R=e.forwardRef(({title:u,parentRef:n,itemIcon:p,level:o,isTooltipOpen:x,badge:i},d)=>{const{inlineCollapsed:t,size:r}=e.useContext(S),[l,c]=e.useState(!1),a=e.useMemo(()=>l||!t||o===void 0||o>0,[l,t,o]);return h.useClassObserver(n,b=>{c(b.contains("acinguiux-menu-submenu-open"))}),s.jsx(T,{targetRef:n,isOpen:!a&&x,isDisabled:a,placement:C.Positions.Right,trigger:s.jsxs("div",{ref:d,className:`${q.MENU_CLASS}-submenu-title-content`,children:[s.jsx(g,{parentRef:n,itemIcon:p,badge:i,children:u}),s.jsx(j,{className:`${q.MENU_CLASS}-submenu-expand-icon`})]}),overlay:s.jsxs(m.TooltipContainer,{gap:"1rem",children:[s.jsx(m.TooltipLabel,{size:z.getTooltipLabelSize(r),children:u}),i&&s.jsx(L,{size:M.getSmallerSize(r),...i})]}),delay:50,closeDelay:200})}),v=e.forwardRef(({title:u,itemIcon:n,level:p,badge:o,...x},i)=>{const{mode:d}=e.useContext(S),t=e.useRef(null),r=d==="horizontal"?[0,4]:[8,0],[l,c]=e.useState(!1),a=e.useCallback(()=>c(!0),[]),b=e.useCallback(()=>c(!1),[]);return e.useImperativeHandle(i,()=>t.current),s.jsx(f.SubMenu,{ref:t,onMouseEnter:a,onMouseLeave:b,title:s.jsx(R,{parentRef:t,title:u,level:p,itemIcon:n,isTooltipOpen:l,badge:o}),popupStyle:{padding:`${r[1]}px ${r[0]}px`},...x})});module.exports=v;
 //# sourceMappingURL=SubMenu.js.map

package/build/cjs/components/Menu/components/SubMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"SubMenu.js","sources":["../../../../../src/components/Menu/components/SubMenu.tsx"],"sourcesContent":["import {\n  forwardRef,\n  type ReactElement,\n  type ReactNode,\n  type RefObject,\n  useCallback,\n  useContext,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\nimport { SubMenu as RCSubMenu, type SubMenuProps } from 'rc-menu';\nimport { MENU_CLASS, Positions } from 'acinguiux-ds-react-base/consts';\nimport type { BadgeTypes } from 'acinguiux-ds-react-base/components/Badge';\nimport { getSmallerSize } from 'acinguiux-ds-react-base/utils/sizesUtils';\n\nimport ChevronSmallDown from '../../Icon/components/ChevronSmallDown';\nimport MenuContext from '../MenuContext';\nimport MenuLabel from './MenuLabel';\nimport Tooltip from '../../Tooltip/Tooltip';\nimport { useClassObserver } from '../utils/classObserverUtils';\nimport { TooltipContainer, TooltipLabel } from '../styles/menuLabel.styles';\nimport { getTooltipLabelSize } from '../Menu.utils';\nimport Badge from '../../Badge/Badge';\n\nexport interface ISubMenuProps extends Omit<SubMenuProps, 'ref'> {\n  level?: number;\n  badge?: Omit<BadgeTypes.IProps, 'size'>;\n}\n\ninterface ITitleProps extends Omit<SubMenuProps, 'ref'> {\n  level?: number;\n  parentRef?: RefObject<HTMLElement>;\n  badge?: Omit<BadgeTypes.IProps, 'size'>;\n  isTooltipOpen?: boolean;\n}\n\nconst Title = forwardRef<HTMLDivElement, ITitleProps>(\n  ({ title, parentRef, itemIcon, level, isTooltipOpen, badge }, ref): ReactNode => {\n    const { inlineCollapsed, size } = useContext(MenuContext);\n    const [tooltipDisabled, setTooltipDisabled] = useState(false);\n    const isDisabled = useMemo(\n      () => tooltipDisabled || !inlineCollapsed || level === undefined || level > 0,\n      [tooltipDisabled, inlineCollapsed, level],\n    );\n\n    useClassObserver(parentRef, (currentClassNames) => {\n      setTooltipDisabled(currentClassNames.contains('acinguiux-menu-submenu-open'));\n    });\n\n    return (\n      <Tooltip\n        targetRef={parentRef}\n        isOpen={!isDisabled && isTooltipOpen}\n        isDisabled={isDisabled}\n        placement={Positions.Right}\n        trigger={\n          <div ref={ref} className={`${MENU_CLASS}-submenu-title-content`}>\n            <MenuLabel parentRef={parentRef} itemIcon={itemIcon} badge={badge}>\n              {title}\n            </MenuLabel>\n            <ChevronSmallDown className={`${MENU_CLASS}-submenu-expand-icon`} />\n          </div>\n        }\n        overlay={\n          <TooltipContainer gap=\"1rem\">\n            <TooltipLabel size={getTooltipLabelSize(size)}>{title}</TooltipLabel>\n            {badge && <Badge size={getSmallerSize(size) as BadgeTypes.Size} {...badge} />}\n          </TooltipContainer>\n        }\n        delay={50}\n        closeDelay={200}\n      />\n    );\n  },\n);\n\nconst SubMenu = forwardRef<HTMLLIElement, ISubMenuProps>(\n  ({ title, itemIcon, level, badge, ...rest }, ref): ReactElement => {\n    const { mode } = useContext(MenuContext);\n    const subMenuRef = useRef<HTMLLIElement>(null);\n    const popupOffset = mode === 'horizontal' ? [0, 4] : [8, 0];\n    const [isTooltipOpen, setIsTooltipOpen] = useState(false);\n\n    const onMouseEnter = useCallback(() => setIsTooltipOpen(true), []);\n    const onMouseLeave = useCallback(() => setIsTooltipOpen(false), []);\n\n    useImperativeHandle<HTMLLIElement | null, HTMLLIElement | null>(ref, () => subMenuRef.current);\n\n    return (\n      <RCSubMenu\n        ref={subMenuRef}\n        onMouseEnter={onMouseEnter}\n        onMouseLeave={onMouseLeave}\n        title={\n          <Title\n            parentRef={subMenuRef}\n            title={title}\n            level={level}\n            itemIcon={itemIcon}\n            isTooltipOpen={isTooltipOpen}\n            badge={badge}\n          />\n        }\n        popupStyle={{ padding: `${popupOffset[1]}px ${popupOffset[0]}px` }}\n        {...rest}\n      />\n    );\n  },\n);\n\nexport default SubMenu;\n"],"names":["Title","forwardRef","title","parentRef","itemIcon","level","isTooltipOpen","badge","ref","inlineCollapsed","size","useContext","MenuContext","tooltipDisabled","setTooltipDisabled","useState","isDisabled","useMemo","useClassObserver","currentClassNames","jsx","Tooltip","Positions","jsxs","MENU_CLASS","MenuLabel","ChevronSmallDown","TooltipContainer","TooltipLabel","getTooltipLabelSize","Badge","getSmallerSize","SubMenu","rest","mode","subMenuRef","useRef","popupOffset","setIsTooltipOpen","onMouseEnter","useCallback","onMouseLeave","useImperativeHandle","RCSubMenu"],"mappings":"8iBAuCMA,EAAQC,EAAAA,WACZ,CAAC,CAAE,MAAAC,EAAO,UAAAC,EAAW,SAAAC,EAAU,MAAAC,EAAO,cAAAC,EAAe,MAAAC,CAAA,EAASC,IAAmB,CAC/E,KAAM,CAAE,gBAAAC,EAAiB,KAAAC,GAASC,EAAAA,WAAWC,CAAW,EAClD,CAACC,EAAiBC,CAAkB,EAAIC,EAAAA,SAAS,EAAK,EACtDC,EAAaC,EAAAA,QACjB,IAAMJ,GAAmB,CAACJ,GAAmBJ,IAAU,QAAaA,EAAQ,EAC5E,CAACQ,EAAiBJ,EAAiBJ,CAAK,CAAA,EAG1Ca,OAAAA,mBAAiBf,EAAYgB,GAAsB,CACjDL,EAAmBK,EAAkB,SAAS,6BAA6B,CAAC,CAC9E,CAAC,EAGCC,EAAAA,IAACC,EAAA,CACC,UAAWlB,EACX,OAAQ,CAACa,GAAcV,EACvB,WAAAU,EACA,UAAWM,EAAAA,UAAU,MACrB,QACEC,EAAAA,KAAC,MAAA,CAAI,IAAAf,EAAU,UAAW,GAAGgB,EAAAA,UAAU,yBACrC,SAAA,CAAAJ,EAAAA,IAACK,EAAA,CAAU,UAAAtB,EAAsB,SAAAC,EAAoB,MAAAG,EAClD,SAAAL,EACH,EACAkB,EAAAA,IAACM,EAAA,CAAiB,UAAW,GAAGF,EAAAA,UAAU,sBAAA,CAAwB,CAAA,EACpE,EAEF,QACED,EAAAA,KAACI,EAAAA,iBAAA,CAAiB,IAAI,OACpB,SAAA,CAAAP,MAACQ,EAAAA,aAAA,CAAa,KAAMC,EAAAA,oBAAoBnB,CAAI,EAAI,SAAAR,EAAM,EACrDK,SAAUuB,EAAA,CAAM,KAAMC,EAAAA,eAAerB,CAAI,EAAuB,GAAGH,CAAA,CAAO,CAAA,EAC7E,EAEF,MAAO,GACP,WAAY,GAAA,CAAA,CAGlB,CACF,EAEMyB,EAAU/B,EAAAA,WACd,CAAC,CAAE,MAAAC,EAAO,SAAAE,EAAU,MAAAC,EAAO,MAAAE,EAAO,GAAG0B,CAAA,EAAQzB,IAAsB,CACjE,KAAM,CAAE,KAAA0B,CAAA,EAASvB,EAAAA,WAAWC,CAAW,EACjCuB,EAAaC,EAAAA,OAAsB,IAAI,EACvCC,EAAcH,IAAS,aAAe,CAAC,EAAG,CAAC,EAAI,CAAC,EAAG,CAAC,EACpD,CAAC5B,EAAegC,CAAgB,EAAIvB,EAAAA,SAAS,EAAK,EAElDwB,EAAeC,EAAAA,YAAY,IAAMF,EAAiB,EAAI,EAAG,CAAA,CAAE,EAC3DG,EAAeD,EAAAA,YAAY,IAAMF,EAAiB,EAAK,EAAG,CAAA,CAAE,EAElEI,OAAAA,EAAAA,oBAAgElC,EAAK,IAAM2B,EAAW,OAAO,EAG3Ff,EAAAA,IAACuB,EAAAA,QAAA,CACC,IAAKR,EACL,aAAAI,EACA,aAAAE,EACA,MACErB,EAAAA,IAACpB,EAAA,CACC,UAAWmC,EACX,MAAAjC,EACA,MAAAG,EACA,SAAAD,EACA,cAAAE,EACA,MAAAC,CAAA,CAAA,EAGJ,WAAY,CAAE,QAAS,GAAG8B,EAAY,CAAC,CAAC,MAAMA,EAAY,CAAC,CAAC,IAAA,EAC3D,GAAGJ,CAAA,CAAA,CAGV,CACF"}
+{"version":3,"file":"SubMenu.js","sources":["../../../../../src/components/Menu/components/SubMenu.tsx"],"sourcesContent":["import {\n  forwardRef,\n  type ReactElement,\n  type ReactNode,\n  type RefObject,\n  useCallback,\n  useContext,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\nimport { SubMenu as RCSubMenu, type SubMenuProps } from '@rc-component/menu';\nimport { MENU_CLASS, Positions } from 'acinguiux-ds-react-base/consts';\nimport type { BadgeTypes } from 'acinguiux-ds-react-base/components/Badge';\nimport { getSmallerSize } from 'acinguiux-ds-react-base/utils/sizesUtils';\n\nimport ChevronSmallDown from '../../Icon/components/ChevronSmallDown';\nimport MenuContext from '../MenuContext';\nimport MenuLabel from './MenuLabel';\nimport Tooltip from '../../Tooltip/Tooltip';\nimport { useClassObserver } from '../utils/classObserverUtils';\nimport { TooltipContainer, TooltipLabel } from '../styles/menuLabel.styles';\nimport { getTooltipLabelSize } from '../Menu.utils';\nimport Badge from '../../Badge/Badge';\n\nexport interface ISubMenuProps extends Omit<SubMenuProps, 'ref'> {\n  level?: number;\n  badge?: Omit<BadgeTypes.IProps, 'size'>;\n}\n\ninterface ITitleProps extends Omit<SubMenuProps, 'ref'> {\n  level?: number;\n  parentRef?: RefObject<HTMLElement>;\n  badge?: Omit<BadgeTypes.IProps, 'size'>;\n  isTooltipOpen?: boolean;\n}\n\nconst Title = forwardRef<HTMLDivElement, ITitleProps>(\n  ({ title, parentRef, itemIcon, level, isTooltipOpen, badge }, ref): ReactNode => {\n    const { inlineCollapsed, size } = useContext(MenuContext);\n    const [tooltipDisabled, setTooltipDisabled] = useState(false);\n    const isDisabled = useMemo(\n      () => tooltipDisabled || !inlineCollapsed || level === undefined || level > 0,\n      [tooltipDisabled, inlineCollapsed, level],\n    );\n\n    useClassObserver(parentRef, (currentClassNames) => {\n      setTooltipDisabled(currentClassNames.contains('acinguiux-menu-submenu-open'));\n    });\n\n    return (\n      <Tooltip\n        targetRef={parentRef}\n        isOpen={!isDisabled && isTooltipOpen}\n        isDisabled={isDisabled}\n        placement={Positions.Right}\n        trigger={\n          <div ref={ref} className={`${MENU_CLASS}-submenu-title-content`}>\n            <MenuLabel parentRef={parentRef} itemIcon={itemIcon} badge={badge}>\n              {title}\n            </MenuLabel>\n            <ChevronSmallDown className={`${MENU_CLASS}-submenu-expand-icon`} />\n          </div>\n        }\n        overlay={\n          <TooltipContainer gap=\"1rem\">\n            <TooltipLabel size={getTooltipLabelSize(size)}>{title}</TooltipLabel>\n            {badge && <Badge size={getSmallerSize(size) as BadgeTypes.Size} {...badge} />}\n          </TooltipContainer>\n        }\n        delay={50}\n        closeDelay={200}\n      />\n    );\n  },\n);\n\nconst SubMenu = forwardRef<HTMLLIElement, ISubMenuProps>(\n  ({ title, itemIcon, level, badge, ...rest }, ref): ReactElement => {\n    const { mode } = useContext(MenuContext);\n    const subMenuRef = useRef<HTMLLIElement>(null);\n    const popupOffset = mode === 'horizontal' ? [0, 4] : [8, 0];\n    const [isTooltipOpen, setIsTooltipOpen] = useState(false);\n\n    const onMouseEnter = useCallback(() => setIsTooltipOpen(true), []);\n    const onMouseLeave = useCallback(() => setIsTooltipOpen(false), []);\n\n    useImperativeHandle<HTMLLIElement | null, HTMLLIElement | null>(ref, () => subMenuRef.current);\n\n    return (\n      <RCSubMenu\n        ref={subMenuRef}\n        onMouseEnter={onMouseEnter}\n        onMouseLeave={onMouseLeave}\n        title={\n          <Title\n            parentRef={subMenuRef}\n            title={title}\n            level={level}\n            itemIcon={itemIcon}\n            isTooltipOpen={isTooltipOpen}\n            badge={badge}\n          />\n        }\n        popupStyle={{ padding: `${popupOffset[1]}px ${popupOffset[0]}px` }}\n        {...rest}\n      />\n    );\n  },\n);\n\nexport default SubMenu;\n"],"names":["Title","forwardRef","title","parentRef","itemIcon","level","isTooltipOpen","badge","ref","inlineCollapsed","size","useContext","MenuContext","tooltipDisabled","setTooltipDisabled","useState","isDisabled","useMemo","useClassObserver","currentClassNames","jsx","Tooltip","Positions","jsxs","MENU_CLASS","MenuLabel","ChevronSmallDown","TooltipContainer","TooltipLabel","getTooltipLabelSize","Badge","getSmallerSize","SubMenu","rest","mode","subMenuRef","useRef","popupOffset","setIsTooltipOpen","onMouseEnter","useCallback","onMouseLeave","useImperativeHandle","RCSubMenu"],"mappings":"yjBAuCMA,EAAQC,EAAAA,WACZ,CAAC,CAAE,MAAAC,EAAO,UAAAC,EAAW,SAAAC,EAAU,MAAAC,EAAO,cAAAC,EAAe,MAAAC,CAAA,EAASC,IAAmB,CAC/E,KAAM,CAAE,gBAAAC,EAAiB,KAAAC,GAASC,EAAAA,WAAWC,CAAW,EAClD,CAACC,EAAiBC,CAAkB,EAAIC,EAAAA,SAAS,EAAK,EACtDC,EAAaC,EAAAA,QACjB,IAAMJ,GAAmB,CAACJ,GAAmBJ,IAAU,QAAaA,EAAQ,EAC5E,CAACQ,EAAiBJ,EAAiBJ,CAAK,CAAA,EAG1Ca,OAAAA,mBAAiBf,EAAYgB,GAAsB,CACjDL,EAAmBK,EAAkB,SAAS,6BAA6B,CAAC,CAC9E,CAAC,EAGCC,EAAAA,IAACC,EAAA,CACC,UAAWlB,EACX,OAAQ,CAACa,GAAcV,EACvB,WAAAU,EACA,UAAWM,EAAAA,UAAU,MACrB,QACEC,EAAAA,KAAC,MAAA,CAAI,IAAAf,EAAU,UAAW,GAAGgB,EAAAA,UAAU,yBACrC,SAAA,CAAAJ,EAAAA,IAACK,EAAA,CAAU,UAAAtB,EAAsB,SAAAC,EAAoB,MAAAG,EAClD,SAAAL,EACH,EACAkB,EAAAA,IAACM,EAAA,CAAiB,UAAW,GAAGF,EAAAA,UAAU,sBAAA,CAAwB,CAAA,EACpE,EAEF,QACED,EAAAA,KAACI,EAAAA,iBAAA,CAAiB,IAAI,OACpB,SAAA,CAAAP,MAACQ,EAAAA,aAAA,CAAa,KAAMC,EAAAA,oBAAoBnB,CAAI,EAAI,SAAAR,EAAM,EACrDK,SAAUuB,EAAA,CAAM,KAAMC,EAAAA,eAAerB,CAAI,EAAuB,GAAGH,CAAA,CAAO,CAAA,EAC7E,EAEF,MAAO,GACP,WAAY,GAAA,CAAA,CAGlB,CACF,EAEMyB,EAAU/B,EAAAA,WACd,CAAC,CAAE,MAAAC,EAAO,SAAAE,EAAU,MAAAC,EAAO,MAAAE,EAAO,GAAG0B,CAAA,EAAQzB,IAAsB,CACjE,KAAM,CAAE,KAAA0B,CAAA,EAASvB,EAAAA,WAAWC,CAAW,EACjCuB,EAAaC,EAAAA,OAAsB,IAAI,EACvCC,EAAcH,IAAS,aAAe,CAAC,EAAG,CAAC,EAAI,CAAC,EAAG,CAAC,EACpD,CAAC5B,EAAegC,CAAgB,EAAIvB,EAAAA,SAAS,EAAK,EAElDwB,EAAeC,EAAAA,YAAY,IAAMF,EAAiB,EAAI,EAAG,CAAA,CAAE,EAC3DG,EAAeD,EAAAA,YAAY,IAAMF,EAAiB,EAAK,EAAG,CAAA,CAAE,EAElEI,OAAAA,EAAAA,oBAAgElC,EAAK,IAAM2B,EAAW,OAAO,EAG3Ff,EAAAA,IAACuB,EAAAA,QAAA,CACC,IAAKR,EACL,aAAAI,EACA,aAAAE,EACA,MACErB,EAAAA,IAACpB,EAAA,CACC,UAAWmC,EACX,MAAAjC,EACA,MAAAG,EACA,SAAAD,EACA,cAAAE,EACA,MAAAC,CAAA,CAAA,EAGJ,WAAY,CAAE,QAAS,GAAG8B,EAAY,CAAC,CAAC,MAAMA,EAAY,CAAC,CAAC,IAAA,EAC3D,GAAGJ,CAAA,CAAA,CAGV,CACF"}