acinguiux-ds-react-framework 0.1.24 → 0.1.26

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

@@ -1,5 +1,5 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const b=require("styled-components"),l=require("../../../react-base/src/consts/index.js"),S=require("../../../react-base/src/theme/types/layer.js"),o=require("../../../react-base/src/components/Menu/Menu.consts.js"),n=require("acinguiux-ds-fabrics"),A=require("../../../react-base/src/utils/stylesUtils.js"),i=require("../Menu.utils.js"),$=require("./indicator.styles.js"),e=require("../../../react-base/src/consts/classes.js"),{consts:M}=o,m=b.css`
-  ${({theme:a,$size:t,$muted:s,inlineCollapsed:g,$indicatorPosition:c,$iconPosition:u,mode:r})=>{const E=`${M[t].subMenuOffestPadding}px`,_=`${M[t].indent}px`,U=`${M[t].indent-(t===l.Sizes.XSmall?6:10)}px`,L=`${M[t].iconSize}px`,N=`${M[t].gap}px`,d=a.layer({foundation:n.FabricsVariables.Foundations.Section,muted:s}),C=a.layer({foundation:n.FabricsVariables.Foundations.Section,muted:s,disabled:!0});return b.css`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("styled-components"),S=require("../../../react-base/src/consts/index.js"),u=require("../../../react-base/src/theme/types/layer.js"),a=require("../../../react-base/src/components/Menu/Menu.consts.js"),n=require("acinguiux-ds-fabrics"),A=require("../../../react-base/src/utils/stylesUtils.js"),i=require("../Menu.utils.js"),C=require("./indicator.styles.js"),e=require("../../../react-base/src/consts/classes.js"),{consts:d}=a,m=r.css`
+  ${({theme:o,$size:t,$muted:s,inlineCollapsed:g,$indicatorPosition:c,$iconPosition:M,mode:l})=>{const E=`${d[t].subMenuOffestPadding}px`,_=`${d[t].indent}px`,U=`${d[t].indent-(t===S.Sizes.XSmall?6:10)}px`,$=`${d[t].iconSize}px`,N=`${d[t].gap}px`,b=o.layer({foundation:n.FabricsVariables.Foundations.Section,muted:s}),L=o.layer({foundation:n.FabricsVariables.Foundations.Section,muted:s,disabled:!0});return r.css`
       .${e.MENU_CLASS}-submenu {
         cursor: pointer;
         display: flex;
@@ -8,10 +8,10 @@
         /* Default */
         &.${e.MENU_CLASS}-submenu, &.${e.MENU_CLASS}-submenu-active {
           .${e.MENU_CLASS}-submenu-title .${e.MENU_CLASS}-submenu-title-content .${e.MENU_CLASS}-label {
-            color: ${d[S.Variables.TextOnFoundationSubtle]};
+            color: ${b[u.Variables.TextOnFoundationSubtle]};
 
             *:not(.${e.BADGE_CLASS}) svg {
-              fill: ${d[S.Variables.TextOnFoundationSubtle]};
+              fill: ${b[u.Variables.TextOnFoundationSubtle]};
             }
           }
         }
@@ -19,10 +19,10 @@
         /* Active */
         &.${e.MENU_CLASS}-submenu-selected {
           > .${e.MENU_CLASS}-submenu-title .${e.MENU_CLASS}-submenu-title-content .${e.MENU_CLASS}-label {
-            color: ${d[S.Variables.TextOnFoundationStrong]};
+            color: ${b[u.Variables.TextOnFoundationStrong]};
 
             *:not(.${e.BADGE_CLASS}) svg {
-              fill: ${d[S.Variables.TextOnFoundationStrong]};
+              fill: ${b[u.Variables.TextOnFoundationStrong]};
             }
           }
         }
@@ -30,11 +30,11 @@
         /* Disabled */
         &.${e.MENU_CLASS}-submenu-disabled {
           > .${e.MENU_CLASS}-submenu-title .${e.MENU_CLASS}-submenu-title-content .${e.MENU_CLASS}-label {
-            color: ${C[S.Variables.TextOnFoundationSubtle]};
+            color: ${L[u.Variables.TextOnFoundationSubtle]};
             cursor: not-allowed;
 
             *:not(.${e.BADGE_CLASS}) svg {
-              fill: ${C[S.Variables.TextOnFoundationSubtle]};
+              fill: ${L[u.Variables.TextOnFoundationSubtle]};
             }
           }
         }
@@ -42,7 +42,7 @@
         &.${e.MENU_CLASS}-submenu-selected:not(.${e.MENU_CLASS}-submenu-open).${e.MENU_CLASS}-submenu-disabled
           > .${e.MENU_CLASS}-submenu-title {
           &::after {
-            ${$.getIndicatorPositionStyle({indicatorPosition:i.getModeIndicatorPosition(c,r),size:t,state:"resting",active:!0,disabled:!0,muted:s,iconPosition:u})};
+            ${C.getIndicatorPositionStyle({indicatorPosition:i.getModeIndicatorPosition(c,l),size:t,state:"resting",active:!0,disabled:!0,muted:s})};
           }
         }
 
@@ -58,7 +58,7 @@
             position: relative;
 
             .${e.MENU_CLASS}-submenu-title-content {
-              ${A.getFocusStyles(a)};
+              ${A.getFocusStyles(o)};
             }
           }
         }
@@ -70,29 +70,29 @@
           justify-content: space-between;
           align-items: center;
           gap: ${N};
-          border-radius: ${o.consts[t].borderRadius}px;
+          border-radius: ${a.consts[t].borderRadius}px;
           transition: background-color 0.3s ease-out;
 
-          ${r!=="horizontal"&&b.css`
-            margin-right: ${o.consts[t].collapsedItemMarginRight};
+          ${l!=="horizontal"&&r.css`
+            margin-right: ${a.consts[t].collapsedItemMarginRight};
           `}
         }
 
         .${e.MENU_CLASS}-submenu-expand-icon {
-          width: ${L};
-          height: ${L};
+          width: ${$};
+          height: ${$};
           flex-shrink: 0;
           transition: transform 0.2s ease-in-out;
           margin: -10px 0;
 
-          ${g&&b.css`
+          ${g&&r.css`
             display: none;
           `}
         }
 
         &:not(.${e.MENU_CLASS}-submenu-active):not(.${e.MENU_CLASS}-submenu-selected) > .${e.MENU_CLASS}-submenu-title {
           > .${e.MENU_CLASS}-submenu-title-content {
-            color: ${d[S.Variables.TextOnFoundationSubtle]};
+            color: ${b[u.Variables.TextOnFoundationSubtle]};
           }
         }
 
@@ -104,40 +104,40 @@
           }
 
           > .${e.MENU_CLASS}-submenu-title-content {
-            background-color: ${i.getBackgroundColor(a,n.FabricsVariables.States.Hover,n.FabricsVariables.Foundations.Surface,s)};
+            background-color: ${i.getBackgroundColor(o,n.FabricsVariables.States.Hover,n.FabricsVariables.Foundations.Surface,s)};
           }
 
           > .${e.MENU_CLASS}-submenu-title-content:active {
-            background-color: ${i.getBackgroundColor(a,n.FabricsVariables.States.Press,n.FabricsVariables.Foundations.Surface,s)};
+            background-color: ${i.getBackgroundColor(o,n.FabricsVariables.States.Press,n.FabricsVariables.Foundations.Surface,s)};
           }
         }
 
         &.${e.MENU_CLASS}-submenu-selected.${e.MENU_CLASS}-submenu-disabled > .${e.MENU_CLASS}-submenu-title {
           &,
           .${e.MENU_CLASS}-label {
-            color: ${C[S.Variables.TextOnFoundationSubtle]};
+            color: ${L[u.Variables.TextOnFoundationSubtle]};
           }
 
           > .${e.MENU_CLASS}-submenu-title-content {
-            background-color: ${i.getBackgroundColor(a,n.FabricsVariables.States.Resting,n.FabricsVariables.Foundations.Section,s,!0)};
+            background-color: ${i.getBackgroundColor(o,n.FabricsVariables.States.Resting,n.FabricsVariables.Foundations.Section,s,!0)};
 
             svg {
-              fill: ${C[S.Variables.TextOnFoundationSubtle]};
+              fill: ${L[u.Variables.TextOnFoundationSubtle]};
             }
           }
         }
 
         &.${e.MENU_CLASS}-submenu-selected:not(.${e.MENU_CLASS}-submenu-disabled) > .${e.MENU_CLASS}-submenu-title {
           > .${e.MENU_CLASS}-submenu-title-content {
-            background-color: ${i.getBackgroundColor(a,n.FabricsVariables.States.Resting,n.FabricsVariables.Foundations.Section,s)};
+            background-color: ${i.getBackgroundColor(o,n.FabricsVariables.States.Resting,n.FabricsVariables.Foundations.Section,s)};
           }
 
           > .${e.MENU_CLASS}-submenu-title-content:hover {
-            background-color: ${i.getBackgroundColor(a,n.FabricsVariables.States.Hover,n.FabricsVariables.Foundations.Section,s)};
+            background-color: ${i.getBackgroundColor(o,n.FabricsVariables.States.Hover,n.FabricsVariables.Foundations.Section,s)};
           }
 
           > .${e.MENU_CLASS}-submenu-title-content:active {
-            background-color: ${i.getBackgroundColor(a,n.FabricsVariables.States.Press,n.FabricsVariables.Foundations.Section,s)};
+            background-color: ${i.getBackgroundColor(o,n.FabricsVariables.States.Press,n.FabricsVariables.Foundations.Section,s)};
           }
         }
       }
@@ -156,16 +156,16 @@
           &.${e.MENU_CLASS}-submenu-selected:not(.${e.MENU_CLASS}-submenu-open).${e.MENU_CLASS}-submenu-disabled
             > .${e.MENU_CLASS}-submenu-title {
             &::after {
-              ${$.getIndicatorPositionStyle({indicatorPosition:i.getModeIndicatorPosition(c),size:t,state:"resting",active:!0,disabled:!0,muted:s,iconPosition:u})};
+              ${C.getIndicatorPositionStyle({indicatorPosition:i.getModeIndicatorPosition(c),size:t,state:"resting",active:!0,disabled:!0,muted:s})};
             }
           }
         }
 
         .${e.MENU_CLASS}-submenu-title {
-          margin: ${t===l.Sizes.Small?"2px":"4px"} 0;
+          margin: ${t===S.Sizes.Small?"2px":"4px"} 0;
 
           .${e.MENU_CLASS}-submenu-title-content {
-            padding: ${o.consts[t].labelPadding[l.Directions.Vertical][u]};
+            padding: ${a.consts[t].labelPadding[S.Directions.Vertical][M]};
 
             .${e.MENU_CLASS}-label {
               padding: unset;
@@ -185,26 +185,26 @@
           > .${e.MENU_CLASS}-submenu-title {
           background-color: transparent;
 
-          ${i.getSubMenuSelectedIndicatorStyle(c,r,u,t,s)};
+          ${i.getSubMenuSelectedIndicatorStyle(c,l,t,s)};
         }
       }
 
       /* Vertical */
       &.${e.MENU_CLASS}-vertical .${e.MENU_CLASS}-submenu {
         .${e.MENU_CLASS}-submenu-title {
-          margin: ${t===l.Sizes.Small?"2px":"4px"} 0;
+          margin: ${t===S.Sizes.Small?"2px":"4px"} 0;
 
           &:focus-visible {
             outline: none;
             position: relative;
 
             .${e.MENU_CLASS}-submenu-title-content {
-              ${A.getFocusStyles(a)};
+              ${A.getFocusStyles(o)};
             }
           }
 
           .${e.MENU_CLASS}-submenu-title-content {
-            padding: ${o.consts[t].labelPadding[l.Directions.Vertical][u]};
+            padding: ${a.consts[t].labelPadding[S.Directions.Vertical][M]};
 
             .${e.MENU_CLASS}-label {
               padding: unset;
@@ -219,7 +219,7 @@
         &.${e.MENU_CLASS}-submenu-selected:not(.${e.MENU_CLASS}-submenu-disabled) > .${e.MENU_CLASS}-submenu-title {
           background-color: transparent;
 
-          ${i.getSubMenuSelectedIndicatorStyle(c,r,u,t,s)};
+          ${i.getSubMenuSelectedIndicatorStyle(c,l,t,s)};
         }
 
         .${e.MENU_CLASS}-item-group .${e.MENU_CLASS}-item-group-list {
@@ -238,7 +238,7 @@
           padding: ${E} ${U};
 
           .${e.MENU_CLASS}-submenu-title-content {
-            padding: ${o.consts[t].labelPadding[l.Directions.Horizontal][u]};
+            padding: ${a.consts[t].labelPadding[S.Directions.Horizontal][M]};
 
             .${e.MENU_CLASS}-label {
               padding: unset;
@@ -247,13 +247,13 @@
         }
 
         &.${e.MENU_CLASS}-submenu-selected:not(.${e.MENU_CLASS}-submenu-disabled) > .${e.MENU_CLASS}-submenu-title {
-          ${i.getSubMenuSelectedIndicatorStyle(c,r,u,t,s)};
+          ${i.getSubMenuSelectedIndicatorStyle(c,l,t,s)};
         }
 
         &.${e.MENU_CLASS}-overflow-item-rest {
           .${e.MENU_CLASS}-submenu-rest-icon {
-            width: ${L};
-            height: ${L};
+            width: ${$};
+            height: ${$};
           }
         }
       }
@@ -261,31 +261,31 @@
       /* Popup */
       &.${e.MENU_CLASS}-submenu {
         &.${e.MENU_CLASS}-submenu-popup {
-          z-index: ${l.ZIndexes.MENU};
+          z-index: ${S.ZIndexes.MENU};
           position: absolute;
           transform-origin: 0 0;
           background-color: transparent;
           overflow: visible;
           > .${e.MENU_CLASS}-sub {
-            background-color: ${i.getBackgroundColor(a,n.FabricsVariables.States.Resting,n.FabricsVariables.Foundations.Surface,s)};
-            filter: ${a.dropShadows.low2};
+            background-color: ${i.getBackgroundColor(o,n.FabricsVariables.States.Resting,n.FabricsVariables.Foundations.Surface,s)};
+            filter: ${o.dropShadows.low2};
             border-radius: 8px;
 
             .${e.MENU_CLASS}-item-group-title, .${e.MENU_CLASS}-submenu-title, .${e.MENU_CLASS}-item {
               align-items: stretch;
             }
 
-            ${r!=="horizontal"&&b.css`
+            ${l!=="horizontal"&&r.css`
               .${e.MENU_CLASS}-item-group-title {
-                margin-left: -${o.consts[t].itemListMarginLeft}px;
+                margin-left: -${a.consts[t].itemListMarginLeft}px;
               }
 
               .${e.MENU_CLASS}-submenu-title {
-                margin-left: -${o.consts[t].itemListMarginLeft}px;
+                margin-left: -${a.consts[t].itemListMarginLeft}px;
               }
 
               .${e.MENU_CLASS}-item {
-                margin-left: -${o.consts[t].itemListMarginLeft}px;
+                margin-left: -${a.consts[t].itemListMarginLeft}px;
               }
             `}
           }
@@ -298,24 +298,24 @@
         /* Vertical and horizontal */
         .${e.MENU_CLASS}-vertical {
           max-width: 300px;
-          padding: ${o.consts[t].subMenuLabelPadding} 0;
+          padding: ${a.consts[t].subMenuLabelPadding} 0;
 
           .${e.MENU_CLASS}-submenu-title {
-            padding: ${o.consts[t].itemPadding[l.Directions.Horizontal][u]};
+            padding: ${a.consts[t].itemPadding[S.Directions.Horizontal][M]};
             .${e.MENU_CLASS}-submenu-title-content {
               margin: -4px 2px;
 
-              ${r==="horizontal"?b.css`
+              ${l==="horizontal"?r.css`
                     padding: 4px 8px 4px 0;
-                  `:b.css`
-                    margin-left: ${o.consts[t].verticalPopupMarginLeft}px;
+                  `:r.css`
+                    margin-left: ${a.consts[t].verticalPopupMarginLeft}px;
                     padding-right: 8px;
                   `}
             }
           }
 
           .${e.MENU_CLASS}-submenu-selected > .${e.MENU_CLASS}-submenu-title:after {
-            ${$.getIndicatorPositionStyle({indicatorPosition:i.getModeIndicatorPosition(c),size:t,state:"resting",active:!0,muted:s,iconPosition:u})};
+            ${C.getIndicatorPositionStyle({indicatorPosition:i.getModeIndicatorPosition(c),size:t,state:"resting",active:!0,muted:s})};
           }
 
           .${e.MENU_CLASS}-submenu-expand-icon {

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

@@ -1 +1 @@
-{"version":3,"file":"subMenu.styles.js","sources":["../../../../../src/components/Menu/styles/subMenu.styles.ts"],"sourcesContent":["import { css } from 'styled-components';\nimport { MENU_CLASS, ZIndexes, Directions, Sizes, BADGE_CLASS } from 'acinguiux-ds-react-base/consts';\nimport { Variables } from 'acinguiux-ds-react-base/theme';\nimport { MenuConsts } from 'acinguiux-ds-react-base/components/Menu';\nimport { FabricsVariables } from 'acinguiux-ds-fabrics';\nimport { getFocusStyles } from 'acinguiux-ds-react-base/utils/stylesUtils';\n\nimport type { StyledMenuProps } from '../Menu.types';\nimport { getBackgroundColor, getSubMenuSelectedIndicatorStyle, getModeIndicatorPosition } from '../Menu.utils';\nimport { getIndicatorPositionStyle } from './indicator.styles';\n\nconst { consts } = MenuConsts;\n\nexport const subMenuStyle = css<StyledMenuProps>`\n  ${({ theme, $size, $muted, inlineCollapsed, $indicatorPosition, $iconPosition, mode }) => {\n    const paddingOffset = `${consts[$size].subMenuOffestPadding}px`;\n    const subMenuIndentVertical = `${consts[$size].indent}px`;\n    const subMenuIndentHorizontal = `${consts[$size].indent - ($size === Sizes.XSmall ? 6 : 10)}px`;\n    const iconSize = `${consts[$size].iconSize}px`;\n    const gap = `${consts[$size].gap}px`;\n    const layer = theme.layer({ foundation: FabricsVariables.Foundations.Section, muted: $muted });\n    const disabledLayer = theme.layer({\n      foundation: FabricsVariables.Foundations.Section,\n      muted: $muted,\n      disabled: true,\n    });\n\n    return css<StyledMenuProps>`\n      .${MENU_CLASS}-submenu {\n        cursor: pointer;\n        display: flex;\n        flex-direction: column;\n\n        /* Default */\n        &.${MENU_CLASS}-submenu, &.${MENU_CLASS}-submenu-active {\n          .${MENU_CLASS}-submenu-title .${MENU_CLASS}-submenu-title-content .${MENU_CLASS}-label {\n            color: ${layer[Variables.TextOnFoundationSubtle]};\n\n            *:not(.${BADGE_CLASS}) svg {\n              fill: ${layer[Variables.TextOnFoundationSubtle]};\n            }\n          }\n        }\n\n        /* Active */\n        &.${MENU_CLASS}-submenu-selected {\n          > .${MENU_CLASS}-submenu-title .${MENU_CLASS}-submenu-title-content .${MENU_CLASS}-label {\n            color: ${layer[Variables.TextOnFoundationStrong]};\n\n            *:not(.${BADGE_CLASS}) svg {\n              fill: ${layer[Variables.TextOnFoundationStrong]};\n            }\n          }\n        }\n\n        /* Disabled */\n        &.${MENU_CLASS}-submenu-disabled {\n          > .${MENU_CLASS}-submenu-title .${MENU_CLASS}-submenu-title-content .${MENU_CLASS}-label {\n            color: ${disabledLayer[Variables.TextOnFoundationSubtle]};\n            cursor: not-allowed;\n\n            *:not(.${BADGE_CLASS}) svg {\n              fill: ${disabledLayer[Variables.TextOnFoundationSubtle]};\n            }\n          }\n        }\n\n        &.${MENU_CLASS}-submenu-selected:not(.${MENU_CLASS}-submenu-open).${MENU_CLASS}-submenu-disabled\n          > .${MENU_CLASS}-submenu-title {\n          &::after {\n            ${getIndicatorPositionStyle({\n              indicatorPosition: getModeIndicatorPosition($indicatorPosition, mode),\n              size: $size,\n              state: 'resting',\n              active: true,\n              disabled: true,\n              muted: $muted,\n              iconPosition: $iconPosition,\n            })};\n          }\n        }\n\n        .${MENU_CLASS}-submenu-title {\n          position: relative;\n          display: flex;\n          align-items: center;\n          flex: 1 1 0;\n          min-width: 0;\n\n          &:focus-visible {\n            outline: none;\n            position: relative;\n\n            .${MENU_CLASS}-submenu-title-content {\n              ${getFocusStyles(theme)};\n            }\n          }\n        }\n\n        .${MENU_CLASS}-submenu-title-content {\n          display: flex;\n          flex: 1 1 0;\n          min-width: 0;\n          justify-content: space-between;\n          align-items: center;\n          gap: ${gap};\n          border-radius: ${MenuConsts.consts[$size].borderRadius}px;\n          transition: background-color 0.3s ease-out;\n\n          ${mode !== 'horizontal' &&\n          css`\n            margin-right: ${MenuConsts.consts[$size].collapsedItemMarginRight};\n          `}\n        }\n\n        .${MENU_CLASS}-submenu-expand-icon {\n          width: ${iconSize};\n          height: ${iconSize};\n          flex-shrink: 0;\n          transition: transform 0.2s ease-in-out;\n          margin: -10px 0;\n\n          ${inlineCollapsed &&\n          css`\n            display: none;\n          `}\n        }\n\n        &:not(.${MENU_CLASS}-submenu-active):not(.${MENU_CLASS}-submenu-selected) > .${MENU_CLASS}-submenu-title {\n          > .${MENU_CLASS}-submenu-title-content {\n            color: ${layer[Variables.TextOnFoundationSubtle]};\n          }\n        }\n\n        &.${MENU_CLASS}-submenu-active:not(.${MENU_CLASS}-submenu-selected) > .${MENU_CLASS}-submenu-title {\n          &:focus-visible {\n            > .${MENU_CLASS}-submenu-title-content {\n              background-color: transparent;\n            }\n          }\n\n          > .${MENU_CLASS}-submenu-title-content {\n            background-color: ${getBackgroundColor(\n              theme,\n              FabricsVariables.States.Hover,\n              FabricsVariables.Foundations.Surface,\n              $muted,\n            )};\n          }\n\n          > .${MENU_CLASS}-submenu-title-content:active {\n            background-color: ${getBackgroundColor(\n              theme,\n              FabricsVariables.States.Press,\n              FabricsVariables.Foundations.Surface,\n              $muted,\n            )};\n          }\n        }\n\n        &.${MENU_CLASS}-submenu-selected.${MENU_CLASS}-submenu-disabled > .${MENU_CLASS}-submenu-title {\n          &,\n          .${MENU_CLASS}-label {\n            color: ${disabledLayer[Variables.TextOnFoundationSubtle]};\n          }\n\n          > .${MENU_CLASS}-submenu-title-content {\n            background-color: ${getBackgroundColor(\n              theme,\n              FabricsVariables.States.Resting,\n              FabricsVariables.Foundations.Section,\n              $muted,\n              true,\n            )};\n\n            svg {\n              fill: ${disabledLayer[Variables.TextOnFoundationSubtle]};\n            }\n          }\n        }\n\n        &.${MENU_CLASS}-submenu-selected:not(.${MENU_CLASS}-submenu-disabled) > .${MENU_CLASS}-submenu-title {\n          > .${MENU_CLASS}-submenu-title-content {\n            background-color: ${getBackgroundColor(\n              theme,\n              FabricsVariables.States.Resting,\n              FabricsVariables.Foundations.Section,\n              $muted,\n            )};\n          }\n\n          > .${MENU_CLASS}-submenu-title-content:hover {\n            background-color: ${getBackgroundColor(\n              theme,\n              FabricsVariables.States.Hover,\n              FabricsVariables.Foundations.Section,\n              $muted,\n            )};\n          }\n\n          > .${MENU_CLASS}-submenu-title-content:active {\n            background-color: ${getBackgroundColor(\n              theme,\n              FabricsVariables.States.Press,\n              FabricsVariables.Foundations.Section,\n              $muted,\n            )};\n          }\n        }\n      }\n\n      /* Inline and vertical */\n      &.${MENU_CLASS}-inline, &.${MENU_CLASS}-vertical .${MENU_CLASS}-submenu {\n        .${MENU_CLASS}-submenu-title {\n          padding-left: ${subMenuIndentVertical};\n          padding-right: ${subMenuIndentVertical};\n        }\n      }\n\n      /* Inline */\n      &.${MENU_CLASS}-inline {\n        .${MENU_CLASS}-submenu {\n          &.${MENU_CLASS}-submenu-selected:not(.${MENU_CLASS}-submenu-open).${MENU_CLASS}-submenu-disabled\n            > .${MENU_CLASS}-submenu-title {\n            &::after {\n              ${getIndicatorPositionStyle({\n                indicatorPosition: getModeIndicatorPosition($indicatorPosition),\n                size: $size,\n                state: 'resting',\n                active: true,\n                disabled: true,\n                muted: $muted,\n                iconPosition: $iconPosition,\n              })};\n            }\n          }\n        }\n\n        .${MENU_CLASS}-submenu-title {\n          margin: ${$size === Sizes.Small ? '2px' : '4px'} 0;\n\n          .${MENU_CLASS}-submenu-title-content {\n            padding: ${MenuConsts.consts[$size].labelPadding[Directions.Vertical][$iconPosition]};\n\n            .${MENU_CLASS}-label {\n              padding: unset;\n            }\n          }\n        }\n\n        .${MENU_CLASS}-submenu.${MENU_CLASS}-submenu-open\n          > .${MENU_CLASS}-submenu-title\n          > .${MENU_CLASS}-submenu-title-content\n          > .${MENU_CLASS}-submenu-expand-icon {\n          transform: rotate(180deg);\n        }\n\n        /* Lowest level */\n        .${MENU_CLASS}-submenu-selected:not(.${MENU_CLASS}-submenu-open):not(.${MENU_CLASS}-submenu-disabled)\n          > .${MENU_CLASS}-submenu-title {\n          background-color: transparent;\n\n          ${getSubMenuSelectedIndicatorStyle($indicatorPosition, mode, $iconPosition, $size, $muted)};\n        }\n      }\n\n      /* Vertical */\n      &.${MENU_CLASS}-vertical .${MENU_CLASS}-submenu {\n        .${MENU_CLASS}-submenu-title {\n          margin: ${$size === Sizes.Small ? '2px' : '4px'} 0;\n\n          &:focus-visible {\n            outline: none;\n            position: relative;\n\n            .${MENU_CLASS}-submenu-title-content {\n              ${getFocusStyles(theme)};\n            }\n          }\n\n          .${MENU_CLASS}-submenu-title-content {\n            padding: ${MenuConsts.consts[$size].labelPadding[Directions.Vertical][$iconPosition]};\n\n            .${MENU_CLASS}-label {\n              padding: unset;\n            }\n          }\n        }\n\n        .${MENU_CLASS}-submenu-expand-icon {\n          transform: rotate(-90deg);\n        }\n\n        &.${MENU_CLASS}-submenu-selected:not(.${MENU_CLASS}-submenu-disabled) > .${MENU_CLASS}-submenu-title {\n          background-color: transparent;\n\n          ${getSubMenuSelectedIndicatorStyle($indicatorPosition, mode, $iconPosition, $size, $muted)};\n        }\n\n        .${MENU_CLASS}-item-group .${MENU_CLASS}-item-group-list {\n          display: flex;\n          flex-direction: row;\n        }\n      }\n\n      /* Horizontal */\n      &.${MENU_CLASS}-horizontal .${MENU_CLASS}-submenu {\n        display: flex;\n        flex-direction: row;\n        align-items: stretch;\n\n        .${MENU_CLASS}-submenu-title {\n          padding: ${paddingOffset} ${subMenuIndentHorizontal};\n\n          .${MENU_CLASS}-submenu-title-content {\n            padding: ${MenuConsts.consts[$size].labelPadding[Directions.Horizontal][$iconPosition]};\n\n            .${MENU_CLASS}-label {\n              padding: unset;\n            }\n          }\n        }\n\n        &.${MENU_CLASS}-submenu-selected:not(.${MENU_CLASS}-submenu-disabled) > .${MENU_CLASS}-submenu-title {\n          ${getSubMenuSelectedIndicatorStyle($indicatorPosition, mode, $iconPosition, $size, $muted)};\n        }\n\n        &.${MENU_CLASS}-overflow-item-rest {\n          .${MENU_CLASS}-submenu-rest-icon {\n            width: ${iconSize};\n            height: ${iconSize};\n          }\n        }\n      }\n\n      /* Popup */\n      &.${MENU_CLASS}-submenu {\n        &.${MENU_CLASS}-submenu-popup {\n          z-index: ${ZIndexes.MENU};\n          position: absolute;\n          transform-origin: 0 0;\n          background-color: transparent;\n          overflow: visible;\n          > .${MENU_CLASS}-sub {\n            background-color: ${getBackgroundColor(\n              theme,\n              FabricsVariables.States.Resting,\n              FabricsVariables.Foundations.Surface,\n              $muted,\n            )};\n            filter: ${theme.dropShadows.low2};\n            border-radius: 8px;\n\n            .${MENU_CLASS}-item-group-title, .${MENU_CLASS}-submenu-title, .${MENU_CLASS}-item {\n              align-items: stretch;\n            }\n\n            ${mode !== 'horizontal' &&\n            css`\n              .${MENU_CLASS}-item-group-title {\n                margin-left: -${MenuConsts.consts[$size].itemListMarginLeft}px;\n              }\n\n              .${MENU_CLASS}-submenu-title {\n                margin-left: -${MenuConsts.consts[$size].itemListMarginLeft}px;\n              }\n\n              .${MENU_CLASS}-item {\n                margin-left: -${MenuConsts.consts[$size].itemListMarginLeft}px;\n              }\n            `}\n          }\n        }\n\n        &.${MENU_CLASS}-submenu-hidden {\n          display: none;\n        }\n\n        /* Vertical and horizontal */\n        .${MENU_CLASS}-vertical {\n          max-width: 300px;\n          padding: ${MenuConsts.consts[$size].subMenuLabelPadding} 0;\n\n          .${MENU_CLASS}-submenu-title {\n            padding: ${MenuConsts.consts[$size].itemPadding[Directions.Horizontal][$iconPosition]};\n            .${MENU_CLASS}-submenu-title-content {\n              margin: -4px 2px;\n\n              ${mode === 'horizontal'\n                ? css`\n                    padding: 4px 8px 4px 0;\n                  `\n                : css`\n                    margin-left: ${MenuConsts.consts[$size].verticalPopupMarginLeft}px;\n                    padding-right: 8px;\n                  `}\n            }\n          }\n\n          .${MENU_CLASS}-submenu-selected > .${MENU_CLASS}-submenu-title:after {\n            ${getIndicatorPositionStyle({\n              indicatorPosition: getModeIndicatorPosition($indicatorPosition),\n              size: $size,\n              state: 'resting',\n              active: true,\n              muted: $muted,\n              iconPosition: $iconPosition,\n            })};\n          }\n\n          .${MENU_CLASS}-submenu-expand-icon {\n            transform: rotate(-90deg);\n          }\n        }\n      }\n    `;\n  }}\n`;\n"],"names":["consts","MenuConsts","subMenuStyle","css","theme","$size","$muted","inlineCollapsed","$indicatorPosition","$iconPosition","mode","paddingOffset","subMenuIndentVertical","subMenuIndentHorizontal","Sizes","iconSize","gap","layer","FabricsVariables","disabledLayer","MENU_CLASS","Variables","BADGE_CLASS","getIndicatorPositionStyle","getModeIndicatorPosition","getFocusStyles","MenuConsts.consts","getBackgroundColor","Directions","getSubMenuSelectedIndicatorStyle","ZIndexes"],"mappings":"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"}
+{"version":3,"file":"subMenu.styles.js","sources":["../../../../../src/components/Menu/styles/subMenu.styles.ts"],"sourcesContent":["import { css } from 'styled-components';\nimport { MENU_CLASS, ZIndexes, Directions, Sizes, BADGE_CLASS } from 'acinguiux-ds-react-base/consts';\nimport { Variables } from 'acinguiux-ds-react-base/theme';\nimport { MenuConsts } from 'acinguiux-ds-react-base/components/Menu';\nimport { FabricsVariables } from 'acinguiux-ds-fabrics';\nimport { getFocusStyles } from 'acinguiux-ds-react-base/utils/stylesUtils';\n\nimport type { StyledMenuProps } from '../Menu.types';\nimport { getBackgroundColor, getSubMenuSelectedIndicatorStyle, getModeIndicatorPosition } from '../Menu.utils';\nimport { getIndicatorPositionStyle } from './indicator.styles';\n\nconst { consts } = MenuConsts;\n\nexport const subMenuStyle = css<StyledMenuProps>`\n  ${({ theme, $size, $muted, inlineCollapsed, $indicatorPosition, $iconPosition, mode }) => {\n    const paddingOffset = `${consts[$size].subMenuOffestPadding}px`;\n    const subMenuIndentVertical = `${consts[$size].indent}px`;\n    const subMenuIndentHorizontal = `${consts[$size].indent - ($size === Sizes.XSmall ? 6 : 10)}px`;\n    const iconSize = `${consts[$size].iconSize}px`;\n    const gap = `${consts[$size].gap}px`;\n    const layer = theme.layer({ foundation: FabricsVariables.Foundations.Section, muted: $muted });\n    const disabledLayer = theme.layer({\n      foundation: FabricsVariables.Foundations.Section,\n      muted: $muted,\n      disabled: true,\n    });\n\n    return css<StyledMenuProps>`\n      .${MENU_CLASS}-submenu {\n        cursor: pointer;\n        display: flex;\n        flex-direction: column;\n\n        /* Default */\n        &.${MENU_CLASS}-submenu, &.${MENU_CLASS}-submenu-active {\n          .${MENU_CLASS}-submenu-title .${MENU_CLASS}-submenu-title-content .${MENU_CLASS}-label {\n            color: ${layer[Variables.TextOnFoundationSubtle]};\n\n            *:not(.${BADGE_CLASS}) svg {\n              fill: ${layer[Variables.TextOnFoundationSubtle]};\n            }\n          }\n        }\n\n        /* Active */\n        &.${MENU_CLASS}-submenu-selected {\n          > .${MENU_CLASS}-submenu-title .${MENU_CLASS}-submenu-title-content .${MENU_CLASS}-label {\n            color: ${layer[Variables.TextOnFoundationStrong]};\n\n            *:not(.${BADGE_CLASS}) svg {\n              fill: ${layer[Variables.TextOnFoundationStrong]};\n            }\n          }\n        }\n\n        /* Disabled */\n        &.${MENU_CLASS}-submenu-disabled {\n          > .${MENU_CLASS}-submenu-title .${MENU_CLASS}-submenu-title-content .${MENU_CLASS}-label {\n            color: ${disabledLayer[Variables.TextOnFoundationSubtle]};\n            cursor: not-allowed;\n\n            *:not(.${BADGE_CLASS}) svg {\n              fill: ${disabledLayer[Variables.TextOnFoundationSubtle]};\n            }\n          }\n        }\n\n        &.${MENU_CLASS}-submenu-selected:not(.${MENU_CLASS}-submenu-open).${MENU_CLASS}-submenu-disabled\n          > .${MENU_CLASS}-submenu-title {\n          &::after {\n            ${getIndicatorPositionStyle({\n              indicatorPosition: getModeIndicatorPosition($indicatorPosition, mode),\n              size: $size,\n              state: 'resting',\n              active: true,\n              disabled: true,\n              muted: $muted,\n            })};\n          }\n        }\n\n        .${MENU_CLASS}-submenu-title {\n          position: relative;\n          display: flex;\n          align-items: center;\n          flex: 1 1 0;\n          min-width: 0;\n\n          &:focus-visible {\n            outline: none;\n            position: relative;\n\n            .${MENU_CLASS}-submenu-title-content {\n              ${getFocusStyles(theme)};\n            }\n          }\n        }\n\n        .${MENU_CLASS}-submenu-title-content {\n          display: flex;\n          flex: 1 1 0;\n          min-width: 0;\n          justify-content: space-between;\n          align-items: center;\n          gap: ${gap};\n          border-radius: ${MenuConsts.consts[$size].borderRadius}px;\n          transition: background-color 0.3s ease-out;\n\n          ${mode !== 'horizontal' &&\n          css`\n            margin-right: ${MenuConsts.consts[$size].collapsedItemMarginRight};\n          `}\n        }\n\n        .${MENU_CLASS}-submenu-expand-icon {\n          width: ${iconSize};\n          height: ${iconSize};\n          flex-shrink: 0;\n          transition: transform 0.2s ease-in-out;\n          margin: -10px 0;\n\n          ${inlineCollapsed &&\n          css`\n            display: none;\n          `}\n        }\n\n        &:not(.${MENU_CLASS}-submenu-active):not(.${MENU_CLASS}-submenu-selected) > .${MENU_CLASS}-submenu-title {\n          > .${MENU_CLASS}-submenu-title-content {\n            color: ${layer[Variables.TextOnFoundationSubtle]};\n          }\n        }\n\n        &.${MENU_CLASS}-submenu-active:not(.${MENU_CLASS}-submenu-selected) > .${MENU_CLASS}-submenu-title {\n          &:focus-visible {\n            > .${MENU_CLASS}-submenu-title-content {\n              background-color: transparent;\n            }\n          }\n\n          > .${MENU_CLASS}-submenu-title-content {\n            background-color: ${getBackgroundColor(\n              theme,\n              FabricsVariables.States.Hover,\n              FabricsVariables.Foundations.Surface,\n              $muted,\n            )};\n          }\n\n          > .${MENU_CLASS}-submenu-title-content:active {\n            background-color: ${getBackgroundColor(\n              theme,\n              FabricsVariables.States.Press,\n              FabricsVariables.Foundations.Surface,\n              $muted,\n            )};\n          }\n        }\n\n        &.${MENU_CLASS}-submenu-selected.${MENU_CLASS}-submenu-disabled > .${MENU_CLASS}-submenu-title {\n          &,\n          .${MENU_CLASS}-label {\n            color: ${disabledLayer[Variables.TextOnFoundationSubtle]};\n          }\n\n          > .${MENU_CLASS}-submenu-title-content {\n            background-color: ${getBackgroundColor(\n              theme,\n              FabricsVariables.States.Resting,\n              FabricsVariables.Foundations.Section,\n              $muted,\n              true,\n            )};\n\n            svg {\n              fill: ${disabledLayer[Variables.TextOnFoundationSubtle]};\n            }\n          }\n        }\n\n        &.${MENU_CLASS}-submenu-selected:not(.${MENU_CLASS}-submenu-disabled) > .${MENU_CLASS}-submenu-title {\n          > .${MENU_CLASS}-submenu-title-content {\n            background-color: ${getBackgroundColor(\n              theme,\n              FabricsVariables.States.Resting,\n              FabricsVariables.Foundations.Section,\n              $muted,\n            )};\n          }\n\n          > .${MENU_CLASS}-submenu-title-content:hover {\n            background-color: ${getBackgroundColor(\n              theme,\n              FabricsVariables.States.Hover,\n              FabricsVariables.Foundations.Section,\n              $muted,\n            )};\n          }\n\n          > .${MENU_CLASS}-submenu-title-content:active {\n            background-color: ${getBackgroundColor(\n              theme,\n              FabricsVariables.States.Press,\n              FabricsVariables.Foundations.Section,\n              $muted,\n            )};\n          }\n        }\n      }\n\n      /* Inline and vertical */\n      &.${MENU_CLASS}-inline, &.${MENU_CLASS}-vertical .${MENU_CLASS}-submenu {\n        .${MENU_CLASS}-submenu-title {\n          padding-left: ${subMenuIndentVertical};\n          padding-right: ${subMenuIndentVertical};\n        }\n      }\n\n      /* Inline */\n      &.${MENU_CLASS}-inline {\n        .${MENU_CLASS}-submenu {\n          &.${MENU_CLASS}-submenu-selected:not(.${MENU_CLASS}-submenu-open).${MENU_CLASS}-submenu-disabled\n            > .${MENU_CLASS}-submenu-title {\n            &::after {\n              ${getIndicatorPositionStyle({\n                indicatorPosition: getModeIndicatorPosition($indicatorPosition),\n                size: $size,\n                state: 'resting',\n                active: true,\n                disabled: true,\n                muted: $muted,\n              })};\n            }\n          }\n        }\n\n        .${MENU_CLASS}-submenu-title {\n          margin: ${$size === Sizes.Small ? '2px' : '4px'} 0;\n\n          .${MENU_CLASS}-submenu-title-content {\n            padding: ${MenuConsts.consts[$size].labelPadding[Directions.Vertical][$iconPosition]};\n\n            .${MENU_CLASS}-label {\n              padding: unset;\n            }\n          }\n        }\n\n        .${MENU_CLASS}-submenu.${MENU_CLASS}-submenu-open\n          > .${MENU_CLASS}-submenu-title\n          > .${MENU_CLASS}-submenu-title-content\n          > .${MENU_CLASS}-submenu-expand-icon {\n          transform: rotate(180deg);\n        }\n\n        /* Lowest level */\n        .${MENU_CLASS}-submenu-selected:not(.${MENU_CLASS}-submenu-open):not(.${MENU_CLASS}-submenu-disabled)\n          > .${MENU_CLASS}-submenu-title {\n          background-color: transparent;\n\n          ${getSubMenuSelectedIndicatorStyle($indicatorPosition, mode, $size, $muted)};\n        }\n      }\n\n      /* Vertical */\n      &.${MENU_CLASS}-vertical .${MENU_CLASS}-submenu {\n        .${MENU_CLASS}-submenu-title {\n          margin: ${$size === Sizes.Small ? '2px' : '4px'} 0;\n\n          &:focus-visible {\n            outline: none;\n            position: relative;\n\n            .${MENU_CLASS}-submenu-title-content {\n              ${getFocusStyles(theme)};\n            }\n          }\n\n          .${MENU_CLASS}-submenu-title-content {\n            padding: ${MenuConsts.consts[$size].labelPadding[Directions.Vertical][$iconPosition]};\n\n            .${MENU_CLASS}-label {\n              padding: unset;\n            }\n          }\n        }\n\n        .${MENU_CLASS}-submenu-expand-icon {\n          transform: rotate(-90deg);\n        }\n\n        &.${MENU_CLASS}-submenu-selected:not(.${MENU_CLASS}-submenu-disabled) > .${MENU_CLASS}-submenu-title {\n          background-color: transparent;\n\n          ${getSubMenuSelectedIndicatorStyle($indicatorPosition, mode, $size, $muted)};\n        }\n\n        .${MENU_CLASS}-item-group .${MENU_CLASS}-item-group-list {\n          display: flex;\n          flex-direction: row;\n        }\n      }\n\n      /* Horizontal */\n      &.${MENU_CLASS}-horizontal .${MENU_CLASS}-submenu {\n        display: flex;\n        flex-direction: row;\n        align-items: stretch;\n\n        .${MENU_CLASS}-submenu-title {\n          padding: ${paddingOffset} ${subMenuIndentHorizontal};\n\n          .${MENU_CLASS}-submenu-title-content {\n            padding: ${MenuConsts.consts[$size].labelPadding[Directions.Horizontal][$iconPosition]};\n\n            .${MENU_CLASS}-label {\n              padding: unset;\n            }\n          }\n        }\n\n        &.${MENU_CLASS}-submenu-selected:not(.${MENU_CLASS}-submenu-disabled) > .${MENU_CLASS}-submenu-title {\n          ${getSubMenuSelectedIndicatorStyle($indicatorPosition, mode, $size, $muted)};\n        }\n\n        &.${MENU_CLASS}-overflow-item-rest {\n          .${MENU_CLASS}-submenu-rest-icon {\n            width: ${iconSize};\n            height: ${iconSize};\n          }\n        }\n      }\n\n      /* Popup */\n      &.${MENU_CLASS}-submenu {\n        &.${MENU_CLASS}-submenu-popup {\n          z-index: ${ZIndexes.MENU};\n          position: absolute;\n          transform-origin: 0 0;\n          background-color: transparent;\n          overflow: visible;\n          > .${MENU_CLASS}-sub {\n            background-color: ${getBackgroundColor(\n              theme,\n              FabricsVariables.States.Resting,\n              FabricsVariables.Foundations.Surface,\n              $muted,\n            )};\n            filter: ${theme.dropShadows.low2};\n            border-radius: 8px;\n\n            .${MENU_CLASS}-item-group-title, .${MENU_CLASS}-submenu-title, .${MENU_CLASS}-item {\n              align-items: stretch;\n            }\n\n            ${mode !== 'horizontal' &&\n            css`\n              .${MENU_CLASS}-item-group-title {\n                margin-left: -${MenuConsts.consts[$size].itemListMarginLeft}px;\n              }\n\n              .${MENU_CLASS}-submenu-title {\n                margin-left: -${MenuConsts.consts[$size].itemListMarginLeft}px;\n              }\n\n              .${MENU_CLASS}-item {\n                margin-left: -${MenuConsts.consts[$size].itemListMarginLeft}px;\n              }\n            `}\n          }\n        }\n\n        &.${MENU_CLASS}-submenu-hidden {\n          display: none;\n        }\n\n        /* Vertical and horizontal */\n        .${MENU_CLASS}-vertical {\n          max-width: 300px;\n          padding: ${MenuConsts.consts[$size].subMenuLabelPadding} 0;\n\n          .${MENU_CLASS}-submenu-title {\n            padding: ${MenuConsts.consts[$size].itemPadding[Directions.Horizontal][$iconPosition]};\n            .${MENU_CLASS}-submenu-title-content {\n              margin: -4px 2px;\n\n              ${mode === 'horizontal'\n                ? css`\n                    padding: 4px 8px 4px 0;\n                  `\n                : css`\n                    margin-left: ${MenuConsts.consts[$size].verticalPopupMarginLeft}px;\n                    padding-right: 8px;\n                  `}\n            }\n          }\n\n          .${MENU_CLASS}-submenu-selected > .${MENU_CLASS}-submenu-title:after {\n            ${getIndicatorPositionStyle({\n              indicatorPosition: getModeIndicatorPosition($indicatorPosition),\n              size: $size,\n              state: 'resting',\n              active: true,\n              muted: $muted,\n            })};\n          }\n\n          .${MENU_CLASS}-submenu-expand-icon {\n            transform: rotate(-90deg);\n          }\n        }\n      }\n    `;\n  }}\n`;\n"],"names":["consts","MenuConsts","subMenuStyle","css","theme","$size","$muted","inlineCollapsed","$indicatorPosition","$iconPosition","mode","paddingOffset","subMenuIndentVertical","subMenuIndentHorizontal","Sizes","iconSize","gap","layer","FabricsVariables","disabledLayer","MENU_CLASS","Variables","BADGE_CLASS","getIndicatorPositionStyle","getModeIndicatorPosition","getFocusStyles","MenuConsts.consts","getBackgroundColor","Directions","getSubMenuSelectedIndicatorStyle","ZIndexes"],"mappings":"whBAWM,CAAE,OAAAA,GAAWC,EAENC,EAAeC,EAAAA;AAAAA,IACxB,CAAC,CAAE,MAAAC,EAAO,MAAAC,EAAO,OAAAC,EAAQ,gBAAAC,EAAiB,mBAAAC,EAAoB,cAAAC,EAAe,KAAAC,KAAW,CACxF,MAAMC,EAAgB,GAAGX,EAAOK,CAAK,EAAE,oBAAoB,KACrDO,EAAwB,GAAGZ,EAAOK,CAAK,EAAE,MAAM,KAC/CQ,EAA0B,GAAGb,EAAOK,CAAK,EAAE,QAAUA,IAAUS,EAAAA,MAAM,OAAS,EAAI,GAAG,KACrFC,EAAW,GAAGf,EAAOK,CAAK,EAAE,QAAQ,KACpCW,EAAM,GAAGhB,EAAOK,CAAK,EAAE,GAAG,KAC1BY,EAAQb,EAAM,MAAM,CAAE,WAAYc,mBAAiB,YAAY,QAAS,MAAOZ,EAAQ,EACvFa,EAAgBf,EAAM,MAAM,CAChC,WAAYc,EAAAA,iBAAiB,YAAY,QACzC,MAAOZ,EACP,SAAU,EAAA,CACX,EAED,OAAOH,EAAAA;AAAAA,SACFiB,YAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAMPA,EAAAA,UAAU,eAAeA,YAAU;AAAA,aAClCA,EAAAA,UAAU,mBAAmBA,YAAU,2BAA2BA,EAAAA,UAAU;AAAA,qBACpEH,EAAMI,YAAU,sBAAsB,CAAC;AAAA;AAAA,qBAEvCC,aAAW;AAAA,sBACVL,EAAMI,YAAU,sBAAsB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAMjDD,YAAU;AAAA,eACPA,EAAAA,UAAU,mBAAmBA,YAAU,2BAA2BA,EAAAA,UAAU;AAAA,qBACtEH,EAAMI,YAAU,sBAAsB,CAAC;AAAA;AAAA,qBAEvCC,aAAW;AAAA,sBACVL,EAAMI,YAAU,sBAAsB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAMjDD,YAAU;AAAA,eACPA,EAAAA,UAAU,mBAAmBA,YAAU,2BAA2BA,EAAAA,UAAU;AAAA,qBACtED,EAAcE,YAAU,sBAAsB,CAAC;AAAA;AAAA;AAAA,qBAG/CC,aAAW;AAAA,sBACVH,EAAcE,YAAU,sBAAsB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,YAKzDD,EAAAA,UAAU,0BAA0BA,YAAU,kBAAkBA,EAAAA,UAAU;AAAA,eACvEA,YAAU;AAAA;AAAA,cAEXG,4BAA0B,CAC1B,kBAAmBC,EAAAA,yBAAyBhB,EAAoBE,CAAI,EACpE,KAAML,EACN,MAAO,UACP,OAAQ,GACR,SAAU,GACV,MAAOC,CAAA,CACR,CAAC;AAAA;AAAA;AAAA;AAAA,WAIHc,YAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAWNA,YAAU;AAAA,gBACTK,EAAAA,eAAerB,CAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,WAK1BgB,YAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAMJJ,CAAG;AAAA,2BACOU,EAAAA,OAAkBrB,CAAK,EAAE,YAAY;AAAA;AAAA;AAAA,YAGpDK,IAAS,cACXP,EAAAA;AAAAA,4BACkBuB,EAAAA,OAAkBrB,CAAK,EAAE,wBAAwB;AAAA,WAClE;AAAA;AAAA;AAAA,WAGAe,YAAU;AAAA,mBACFL,CAAQ;AAAA,oBACPA,CAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,YAKhBR,GACFJ,EAAAA;AAAAA;AAAAA,WAEC;AAAA;AAAA;AAAA,iBAGMiB,EAAAA,UAAU,yBAAyBA,YAAU,yBAAyBA,EAAAA,UAAU;AAAA,eAClFA,YAAU;AAAA,qBACJH,EAAMI,YAAU,sBAAsB,CAAC;AAAA;AAAA;AAAA;AAAA,YAIhDD,EAAAA,UAAU,wBAAwBA,YAAU,yBAAyBA,EAAAA,UAAU;AAAA;AAAA,iBAE1EA,YAAU;AAAA;AAAA;AAAA;AAAA;AAAA,eAKZA,YAAU;AAAA,gCACOO,EAAAA,mBAClBvB,EACAc,EAAAA,iBAAiB,OAAO,MACxBA,EAAAA,iBAAiB,YAAY,QAC7BZ,CAAA,CACD;AAAA;AAAA;AAAA,eAGEc,YAAU;AAAA,gCACOO,EAAAA,mBAClBvB,EACAc,EAAAA,iBAAiB,OAAO,MACxBA,EAAAA,iBAAiB,YAAY,QAC7BZ,CAAA,CACD;AAAA;AAAA;AAAA;AAAA,YAIDc,EAAAA,UAAU,qBAAqBA,YAAU,wBAAwBA,EAAAA,UAAU;AAAA;AAAA,aAE1EA,YAAU;AAAA,qBACFD,EAAcE,YAAU,sBAAsB,CAAC;AAAA;AAAA;AAAA,eAGrDD,YAAU;AAAA,gCACOO,EAAAA,mBAClBvB,EACAc,EAAAA,iBAAiB,OAAO,QACxBA,EAAAA,iBAAiB,YAAY,QAC7BZ,EACA,EAAA,CACD;AAAA;AAAA;AAAA,sBAGSa,EAAcE,YAAU,sBAAsB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,YAKzDD,EAAAA,UAAU,0BAA0BA,YAAU,yBAAyBA,EAAAA,UAAU;AAAA,eAC9EA,YAAU;AAAA,gCACOO,EAAAA,mBAClBvB,EACAc,EAAAA,iBAAiB,OAAO,QACxBA,EAAAA,iBAAiB,YAAY,QAC7BZ,CAAA,CACD;AAAA;AAAA;AAAA,eAGEc,YAAU;AAAA,gCACOO,EAAAA,mBAClBvB,EACAc,EAAAA,iBAAiB,OAAO,MACxBA,EAAAA,iBAAiB,YAAY,QAC7BZ,CAAA,CACD;AAAA;AAAA;AAAA,eAGEc,YAAU;AAAA,gCACOO,EAAAA,mBAClBvB,EACAc,EAAAA,iBAAiB,OAAO,MACxBA,EAAAA,iBAAiB,YAAY,QAC7BZ,CAAA,CACD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAMHc,EAAAA,UAAU,cAAcA,YAAU,cAAcA,EAAAA,UAAU;AAAA,WACzDA,YAAU;AAAA,0BACKR,CAAqB;AAAA,2BACpBA,CAAqB;AAAA;AAAA;AAAA;AAAA;AAAA,UAKtCQ,YAAU;AAAA,WACTA,YAAU;AAAA,cACPA,EAAAA,UAAU,0BAA0BA,YAAU,kBAAkBA,EAAAA,UAAU;AAAA,iBACvEA,YAAU;AAAA;AAAA,gBAEXG,4BAA0B,CAC1B,kBAAmBC,EAAAA,yBAAyBhB,CAAkB,EAC9D,KAAMH,EACN,MAAO,UACP,OAAQ,GACR,SAAU,GACV,MAAOC,CAAA,CACR,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,WAKLc,YAAU;AAAA,oBACDf,IAAUS,EAAAA,MAAM,MAAQ,MAAQ,KAAK;AAAA;AAAA,aAE5CM,YAAU;AAAA,uBACAM,EAAAA,OAAkBrB,CAAK,EAAE,aAAauB,EAAAA,WAAW,QAAQ,EAAEnB,CAAa,CAAC;AAAA;AAAA,eAEjFW,YAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAMdA,EAAAA,UAAU,YAAYA,YAAU;AAAA,eAC5BA,YAAU;AAAA,eACVA,YAAU;AAAA,eACVA,YAAU;AAAA;AAAA;AAAA;AAAA;AAAA,WAKdA,EAAAA,UAAU,0BAA0BA,YAAU,uBAAuBA,EAAAA,UAAU;AAAA,eAC3EA,YAAU;AAAA;AAAA;AAAA,YAGbS,EAAAA,iCAAiCrB,EAAoBE,EAAML,EAAOC,CAAM,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,UAK3Ec,EAAAA,UAAU,cAAcA,YAAU;AAAA,WACjCA,YAAU;AAAA,oBACDf,IAAUS,EAAAA,MAAM,MAAQ,MAAQ,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAM1CM,YAAU;AAAA,gBACTK,EAAAA,eAAerB,CAAK,CAAC;AAAA;AAAA;AAAA;AAAA,aAIxBgB,YAAU;AAAA,uBACAM,EAAAA,OAAkBrB,CAAK,EAAE,aAAauB,EAAAA,WAAW,QAAQ,EAAEnB,CAAa,CAAC;AAAA;AAAA,eAEjFW,YAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAMdA,YAAU;AAAA;AAAA;AAAA;AAAA,YAITA,EAAAA,UAAU,0BAA0BA,YAAU,yBAAyBA,EAAAA,UAAU;AAAA;AAAA;AAAA,YAGjFS,EAAAA,iCAAiCrB,EAAoBE,EAAML,EAAOC,CAAM,CAAC;AAAA;AAAA;AAAA,WAG1Ec,EAAAA,UAAU,gBAAgBA,YAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAOrCA,EAAAA,UAAU,gBAAgBA,YAAU;AAAA;AAAA;AAAA;AAAA;AAAA,WAKnCA,YAAU;AAAA,qBACAT,CAAa,IAAIE,CAAuB;AAAA;AAAA,aAEhDO,YAAU;AAAA,uBACAM,EAAAA,OAAkBrB,CAAK,EAAE,aAAauB,EAAAA,WAAW,UAAU,EAAEnB,CAAa,CAAC;AAAA;AAAA,eAEnFW,YAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAMbA,EAAAA,UAAU,0BAA0BA,YAAU,yBAAyBA,EAAAA,UAAU;AAAA,YACjFS,EAAAA,iCAAiCrB,EAAoBE,EAAML,EAAOC,CAAM,CAAC;AAAA;AAAA;AAAA,YAGzEc,YAAU;AAAA,aACTA,YAAU;AAAA,qBACFL,CAAQ;AAAA,sBACPA,CAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAMpBK,YAAU;AAAA,YACRA,YAAU;AAAA,qBACDU,EAAAA,SAAS,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA,eAKnBV,YAAU;AAAA,gCACOO,EAAAA,mBAClBvB,EACAc,EAAAA,iBAAiB,OAAO,QACxBA,EAAAA,iBAAiB,YAAY,QAC7BZ,CAAA,CACD;AAAA,sBACSF,EAAM,YAAY,IAAI;AAAA;AAAA;AAAA,eAG7BgB,EAAAA,UAAU,uBAAuBA,YAAU,oBAAoBA,EAAAA,UAAU;AAAA;AAAA;AAAA;AAAA,cAI1EV,IAAS,cACXP,EAAAA;AAAAA,iBACKiB,YAAU;AAAA,gCACKM,EAAAA,OAAkBrB,CAAK,EAAE,kBAAkB;AAAA;AAAA;AAAA,iBAG1De,YAAU;AAAA,gCACKM,EAAAA,OAAkBrB,CAAK,EAAE,kBAAkB;AAAA;AAAA;AAAA,iBAG1De,YAAU;AAAA,gCACKM,EAAAA,OAAkBrB,CAAK,EAAE,kBAAkB;AAAA;AAAA,aAE9D;AAAA;AAAA;AAAA;AAAA,YAIDe,YAAU;AAAA;AAAA;AAAA;AAAA;AAAA,WAKXA,YAAU;AAAA;AAAA,qBAEAM,EAAAA,OAAkBrB,CAAK,EAAE,mBAAmB;AAAA;AAAA,aAEpDe,YAAU;AAAA,uBACAM,EAAAA,OAAkBrB,CAAK,EAAE,YAAYuB,EAAAA,WAAW,UAAU,EAAEnB,CAAa,CAAC;AAAA,eAClFW,YAAU;AAAA;AAAA;AAAA,gBAGTV,IAAS,aACPP,EAAAA;AAAAA;AAAAA,oBAGAA,EAAAA;AAAAA,mCACiBuB,EAAAA,OAAkBrB,CAAK,EAAE,uBAAuB;AAAA;AAAA,mBAEhE;AAAA;AAAA;AAAA;AAAA,aAINe,EAAAA,UAAU,wBAAwBA,YAAU;AAAA,cAC3CG,4BAA0B,CAC1B,kBAAmBC,EAAAA,yBAAyBhB,CAAkB,EAC9D,KAAMH,EACN,MAAO,UACP,OAAQ,GACR,MAAOC,CAAA,CACR,CAAC;AAAA;AAAA;AAAA,aAGDc,YAAU;AAAA;AAAA;AAAA;AAAA;AAAA,KAMrB,CAAC;AAAA"}

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

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

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

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

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

@@ -1,22 +1,18 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("styled-components"),a=require("../../react-base/src/components/Pecten/Pecten.consts.js"),c=require("../../react-base/src/theme/types/layer.js"),l=require("./components/PectenIcon.js"),d=i.styled(l)(({prefixCls:e,$size:t,$muted:n,$padding:s,theme:r})=>{const o=typeof t=="number"?t:a.pectenSizes[t],u=`${a.pectenPaddings[s]}`;return r.layer({muted:n}),i.css`
-    height: ${o}px;
-    width: ${o}px;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("styled-components"),i=require("../../react-base/src/components/Pecten/Pecten.consts.js"),a=require("../../react-base/src/theme/types/layer.js"),d=require("./components/PectenIcon.js"),g=o.styled(d)(({prefixCls:e,$size:t,$muted:n,$padding:c,theme:s})=>{const r=typeof t=="number"?t:i.pectenSizes[t],u=`${i.pectenPaddings[c]}`,l=s.layer({muted:n});return o.css`
+    height: ${r}px;
+    width: ${r}px;
     padding: ${u}px;
 
     .${e}-border {
-      fill: ${n?r.layer({foundation:"surface"})[c.Variables.TextOnFoundationStrong]:"white"};
-    }
-
-    .${e}-inner-acinguiux {
-      fill: ${n?r.layer({foundation:"surface"})[c.Variables.TextOnFoundationStrong]:"#1784B2"};
+      fill: rgb(255 255 255);
     }
 
     .${e}-outer-acinguiux {
-      fill: ${n?"transparent":"#FBCF09"};
+      fill: ${n?l[a.Variables.TextOnFoundationStrong]:"#DD1D21"};
     }
 
-    .${e}-symbol-acinguiux {
-      fill: ${n?"transparent":"#FFFFFF"};
+    .${e}-inner-acinguiux {
+      fill: ${n?"white":"#FFC600"};
     }
-  `});exports.Pecten=d;
+  `});exports.Pecten=g;
 //# sourceMappingURL=Pecten.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Pecten.styles.js","sources":["../../../../src/components/Pecten/Pecten.styles.ts"],"sourcesContent":["import { styled, css } from 'styled-components';\nimport type { PickTransient } from 'acinguiux-ds-react-base/types';\nimport { PectenConsts } from 'acinguiux-ds-react-base/components/Pecten';\nimport { Variables } from 'acinguiux-ds-react-base/theme';\n\nimport PectenSVG from './components/PectenIcon';\nimport type { IPectenProps } from './Pecten.types';\n\nconst Pecten = styled(PectenSVG)<\n  Required<PickTransient<IPectenProps, 'size' | 'padding'>> & PickTransient<IPectenProps, 'muted'>\n>(({ prefixCls, $size, $muted, $padding, theme }) => {\n  const width = typeof $size === 'number' ? $size : PectenConsts.pectenSizes[$size];\n  const padding = `${PectenConsts.pectenPaddings[$padding]}`;\n  const layer = theme.layer({ muted: $muted });\n\n  return css`\n    height: ${width}px;\n    width: ${width}px;\n    padding: ${padding}px;\n\n    .${prefixCls}-border {\n      fill: ${$muted ? theme.layer({ foundation: 'surface' })[Variables.TextOnFoundationStrong] : 'white'};\n    }\n\n    .${prefixCls}-inner-acinguiux {\n      fill: ${$muted ? theme.layer({ foundation: 'surface' })[Variables.TextOnFoundationStrong] : '#1784B2'};\n    }\n\n    .${prefixCls}-outer-acinguiux {\n      fill: ${$muted ? 'transparent' : '#FBCF09'};\n    }\n\n    .${prefixCls}-symbol-acinguiux {\n      fill: ${$muted ? 'transparent' : '#FFFFFF'};\n    }\n  `;\n});\n\nexport { Pecten };\n"],"names":["Pecten","styled","PectenSVG","prefixCls","$size","$muted","$padding","theme","width","PectenConsts.pectenSizes","padding","PectenConsts.pectenPaddings","css","Variables"],"mappings":"qTAQMA,EAASC,EAAAA,OAAOC,CAAS,EAE7B,CAAC,CAAE,UAAAC,EAAW,MAAAC,EAAO,OAAAC,EAAQ,SAAAC,EAAU,MAAAC,KAAY,CACnD,MAAMC,EAAQ,OAAOJ,GAAU,SAAWA,EAAQK,EAAAA,YAAyBL,CAAK,EAC1EM,EAAU,GAAGC,iBAA4BL,CAAQ,CAAC,GAC1C,OAAAC,EAAM,MAAM,CAAE,MAAOF,EAAQ,EAEpCO,EAAAA;AAAAA,cACKJ,CAAK;AAAA,aACNA,CAAK;AAAA,eACHE,CAAO;AAAA;AAAA,OAEfP,CAAS;AAAA,cACFE,EAASE,EAAM,MAAM,CAAE,WAAY,SAAA,CAAW,EAAEM,EAAAA,UAAU,sBAAsB,EAAI,OAAO;AAAA;AAAA;AAAA,OAGlGV,CAAS;AAAA,cACFE,EAASE,EAAM,MAAM,CAAE,WAAY,SAAA,CAAW,EAAEM,EAAAA,UAAU,sBAAsB,EAAI,SAAS;AAAA;AAAA;AAAA,OAGpGV,CAAS;AAAA,cACFE,EAAS,cAAgB,SAAS;AAAA;AAAA;AAAA,OAGzCF,CAAS;AAAA,cACFE,EAAS,cAAgB,SAAS;AAAA;AAAA,GAGhD,CAAC"}
+{"version":3,"file":"Pecten.styles.js","sources":["../../../../src/components/Pecten/Pecten.styles.ts"],"sourcesContent":["import { styled, css } from 'styled-components';\nimport type { PickTransient } from 'acinguiux-ds-react-base/types';\nimport { PectenConsts } from 'acinguiux-ds-react-base/components/Pecten';\nimport { Variables } from 'acinguiux-ds-react-base/theme';\n\nimport PectenSVG from './components/PectenIcon';\nimport type { IPectenProps } from './Pecten.types';\n\nconst Pecten = styled(PectenSVG)<\n  Required<PickTransient<IPectenProps, 'size' | 'padding'>> & PickTransient<IPectenProps, 'muted'>\n>(({ prefixCls, $size, $muted, $padding, theme }) => {\n  const width = typeof $size === 'number' ? $size : PectenConsts.pectenSizes[$size];\n  const padding = `${PectenConsts.pectenPaddings[$padding]}`;\n  const layer = theme.layer({ muted: $muted });\n\n  return css`\n    height: ${width}px;\n    width: ${width}px;\n    padding: ${padding}px;\n\n    .${prefixCls}-border {\n      fill: rgb(255 255 255);\n    }\n\n    .${prefixCls}-outer-acinguiux {\n      fill: ${$muted ? layer[Variables.TextOnFoundationStrong] : '#DD1D21'};\n    }\n\n    .${prefixCls}-inner-acinguiux {\n      fill: ${$muted ? 'white' : '#FFC600'};\n    }\n  `;\n});\n\nexport { Pecten };\n"],"names":["Pecten","styled","PectenSVG","prefixCls","$size","$muted","$padding","theme","width","PectenConsts.pectenSizes","padding","PectenConsts.pectenPaddings","layer","css","Variables"],"mappings":"qTAQMA,EAASC,EAAAA,OAAOC,CAAS,EAE7B,CAAC,CAAE,UAAAC,EAAW,MAAAC,EAAO,OAAAC,EAAQ,SAAAC,EAAU,MAAAC,KAAY,CACnD,MAAMC,EAAQ,OAAOJ,GAAU,SAAWA,EAAQK,EAAAA,YAAyBL,CAAK,EAC1EM,EAAU,GAAGC,iBAA4BL,CAAQ,CAAC,GAClDM,EAAQL,EAAM,MAAM,CAAE,MAAOF,EAAQ,EAE3C,OAAOQ,EAAAA;AAAAA,cACKL,CAAK;AAAA,aACNA,CAAK;AAAA,eACHE,CAAO;AAAA;AAAA,OAEfP,CAAS;AAAA;AAAA;AAAA;AAAA,OAITA,CAAS;AAAA,cACFE,EAASO,EAAME,EAAAA,UAAU,sBAAsB,EAAI,SAAS;AAAA;AAAA;AAAA,OAGnEX,CAAS;AAAA,cACFE,EAAS,QAAU,SAAS;AAAA;AAAA,GAG1C,CAAC"}

package/build/cjs/components/Pecten/components/PectenIcon.js

@@ -1,2 +1,2 @@
-"use strict";const C=require("react/jsx-runtime"),s=({className:L,prefixCls:e,...l})=>C.jsxs("svg",{className:L,viewBox:"0 0 104 104",fill:"none",xmlns:"http://www.w3.org/2000/svg",...l,children:[C.jsx("path",{className:`${e}-border`,fillRule:"evenodd",clipRule:"evenodd",d:"M87 67.3507C86.9999 68.281 86.7435 69.1948 86.2565 70.0004C85.7695 70.8061 85.0692 71.4751 84.2257 71.9402L52.7742 89.2899C51.9308 89.7551 50.974 90 50 90C49.026 90 48.0692 89.7551 47.2258 89.2899L15.7743 71.9402C14.9308 71.4751 14.2305 70.8061 13.7435 70.0004C13.2565 69.1948 13.0001 68.281 13 67.3507V32.6493C12.9983 31.7174 13.2539 30.8015 13.741 29.9941C14.228 29.1867 14.9294 28.5162 15.7743 28.0502L47.2258 10.7101C48.0692 10.2449 49.026 10 50 10C50.974 10 51.9308 10.2449 52.7742 10.7101L84.2257 28.0502C85.0706 28.5162 85.772 29.1867 86.259 29.9941C86.7461 30.8015 87.0017 31.7174 87 32.6493V67.3507Z"}),C.jsx("path",{className:`${e}-inner-acinguiux`,d:"M81.8286 63.1613C81.8284 64.4138 81.4831 65.6442 80.8274 66.7289C80.1718 67.8136 79.2289 68.7144 78.0934 69.3408L53.9696 82.6522C52.8336 83.2786 51.5451 83.6085 50.2334 83.6085C48.9217 83.6085 47.6331 83.2786 46.4972 82.6522L22.3733 69.3408C21.2376 68.7142 20.2945 67.8131 19.6388 66.7281C18.9832 65.643 18.638 64.4122 18.6381 63.1594V36.5385C18.6366 35.2877 18.9791 34.0585 19.6315 32.9739C20.2839 31.8894 21.2231 30.9877 22.3552 30.3591L46.4871 17.0515C47.6231 16.425 48.9117 16.0952 50.2233 16.0952C51.535 16.0952 52.8236 16.425 53.9595 17.0515L78.0834 30.3629C79.2201 30.9878 80.1647 31.8874 80.8221 32.9715C81.4795 34.0555 81.8266 35.2857 81.8286 36.5385V63.1613Z"}),C.jsx("path",{className:`${e}-outer-acinguiux`,fillRule:"evenodd",clipRule:"evenodd",d:"M76.4296 62.0966C76.4297 62.8502 76.222 63.5906 75.8275 64.2432C75.4329 64.8958 74.8654 65.4377 74.1821 65.8143L52.2434 77.9121C51.5604 78.2888 50.7856 78.4871 49.9969 78.4871C49.2082 78.4871 48.4334 78.2888 47.7504 77.9121L25.8117 65.8143C25.1284 65.4377 24.5609 64.8958 24.1663 64.2432C23.7718 63.5906 23.5641 62.8502 23.5642 62.0966V37.903C23.5652 37.1497 23.7739 36.4099 24.1691 35.758C24.5643 35.106 25.1322 34.565 25.8157 34.1892L47.7524 22.0914C48.4354 21.7147 49.2102 21.5164 49.9989 21.5164C50.7876 21.5164 51.5624 21.7147 52.2454 22.0914L74.1821 34.1892C74.8648 34.5655 75.4319 35.1067 75.8264 35.7586C76.221 36.4105 76.429 37.15 76.4296 37.903V62.0966Z"}),C.jsx("path",{className:`${e}-symbol-acinguiux`,fillRule:"evenodd",clipRule:"evenodd",d:"M43.1911 57.7631V53.3675L35.1719 50.7924L43.1911 48.1501V43.7508L30.1602 48.8491V52.6647L43.1911 57.7631ZM47.9495 61.2023L55.3596 38.8156H51.741L44.3289 61.2004L47.9495 61.2023ZM56.7949 57.7631L69.8258 52.6244V48.8222L56.7949 43.7508V48.2558L64.0803 50.9941L56.7949 53.2735V57.7631Z"})]});module.exports=s;
+"use strict";const L=require("react/jsx-runtime"),H=({className:s,prefixCls:C,...e})=>L.jsxs("svg",{className:s,viewBox:"0 0 120 120",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e,children:[L.jsx("path",{className:`${C}-border`,d:"M59.9999 4.43053C27.0842 4.43053 0.317871 31.2123 0.317871 64.1125C0.317871 68.1089 0.720603 72.1207 1.52607 76.0551L1.89783 77.8829L18.6113 90.0424L21.4614 112.828H51.9917L52.3324 113.076C54.5785 114.702 57.2272 115.569 59.9999 115.569C62.7725 115.569 65.4368 114.702 67.6673 113.076L68.0081 112.828H98.5384L101.388 90.0424L118.102 77.8829L118.474 76.0551C119.279 72.1362 119.682 68.1089 119.682 64.1125C119.682 31.1968 92.9001 4.43053 59.9999 4.43053ZM113.78 75.0948L96.881 87.3781L94.2942 108.026H66.4436L64.8327 109.188C63.4231 110.21 61.7347 110.768 59.9844 110.768C58.234 110.768 56.5457 110.21 55.1361 109.188L53.5252 108.026H25.6746L23.0878 87.3781L6.18849 75.0948C5.44498 71.4857 5.07322 67.7991 5.07322 64.1125C5.07322 33.8146 29.6555 9.23235 59.9534 9.23235C90.2514 9.23235 114.834 33.8146 114.834 64.1125C114.834 67.7991 114.462 71.4702 113.734 75.0948H113.78Z"}),L.jsx("path",{className:`${C}-inner-acinguiux`,d:"M53.5408 108.025H25.6902L23.1034 87.3775L6.20413 75.0942C5.46062 71.4851 5.08887 67.7985 5.08887 64.1119C5.08887 33.814 29.6711 9.23175 59.969 9.23175C90.267 9.23175 114.849 33.814 114.849 64.1119C114.849 67.7985 114.477 71.4696 113.749 75.0942L96.8501 87.3775L94.2634 108.025H66.4128L64.8019 109.187C63.3923 110.209 61.7039 110.767 59.9536 110.767C58.2032 110.767 56.5148 110.209 55.1053 109.187L53.4943 108.025H53.5408Z"}),L.jsx("path",{className:`${C}-outer-acinguiux`,d:"M59.9993 9.23175C29.7014 9.23175 5.11914 33.814 5.11914 64.1119C5.11914 67.7985 5.4909 71.4696 6.2344 75.0942L23.1337 87.3775L25.7205 108.025H53.5711L55.182 109.187C56.5916 110.209 58.28 110.767 60.0303 110.767C61.7806 110.767 63.469 110.209 64.8786 109.187L66.4895 108.025H94.3401L96.9269 87.3775L113.826 75.0942C114.554 71.4851 114.926 67.7985 114.926 64.1119C114.926 33.814 90.3283 9.23175 60.0458 9.23175H59.9993ZM103.247 54.6012C104.579 57.5907 105.276 60.8281 105.276 64.1119C105.276 66.0791 105.028 68.0308 104.532 69.9206L87.8654 82.0491L85.8207 98.4062H65.5756L62.5861 100.59C61.8426 101.132 60.9287 101.427 59.9993 101.427C59.0699 101.427 58.1715 101.132 57.4125 100.59L54.423 98.4062H34.1779L32.1333 82.0491L15.4663 69.9206C14.9706 68.0153 14.7228 66.0636 14.7228 64.1119C14.7228 60.8281 15.4198 57.5907 16.7519 54.6012L46.2754 84.45L17.5729 49.0249C18.7037 44.4245 21.1975 40.2887 24.7447 37.1443L50.4731 81.5534L27.6722 32.9311C30.6153 29.0122 34.7355 26.1156 39.4289 24.6595L55.1665 79.7721L43.6731 22.3825C47.1738 20.4154 51.1237 19.3775 55.1355 19.3775C55.9875 19.3775 56.8394 19.424 57.6759 19.5169L60.0148 79.1989L62.3538 19.5169C63.1902 19.424 64.0421 19.3775 64.8941 19.3775C68.9059 19.3775 72.8558 20.4154 76.3565 22.3825L64.8631 79.7721L80.6007 24.6595C85.2941 26.1156 89.3989 28.9967 92.3574 32.9311L69.5565 81.5534L95.285 37.1443C98.8321 40.2887 101.326 44.4245 102.457 49.0249L73.7542 84.45L103.278 54.6012H103.247Z"})]});module.exports=H;
 //# sourceMappingURL=PectenIcon.js.map