acinguiux-ds-react-framework 0.1.24 → 0.1.26

package/build/esm/components/Menu/styles/indicator.styles.js

@@ -1,19 +1,15 @@
-import { css as n, keyframes as x } from "styled-components";
-import { Positions as a, Sizes as o } from "../../../react-base/src/consts/index.js";
-import { consts as f } from "../../../react-base/src/components/Menu/Menu.consts.js";
-import { Variables as g } from "../../../react-base/src/theme/types/layer.js";
-const h = (t, r = !1) => x`
+import { css as d, keyframes as x } from "styled-components";
+import { Sizes as e, Positions as a } from "../../../react-base/src/consts/index.js";
+import { consts as m } from "../../../react-base/src/components/Menu/Menu.consts.js";
+import { Variables as f } from "../../../react-base/src/theme/types/layer.js";
+const p = (t) => x`
   from {
     width: 0;
-    left: 50%;
-    transform: translateX(100%);
   }
   to {
     width: ${t};
-    left: ${r ? "20%" : "5%"};
-    transform: translateX(100%);
   }
-`, $ = (t) => x`
+`, h = (t) => x`
   from {
     height: 0;
     top: 50%;
@@ -24,103 +20,100 @@ const h = (t, r = !1) => x`
     top: 50%;
     transform: translateY(-50%);
   }
-`, u = ({
+`, $ = ({
   width: t,
-  height: r,
-  position: e,
+  height: o,
+  position: r,
   size: l
-}) => n`
+}) => d`
   content: '';
   position: absolute;
   display: block;
   transition: all 0.2s;
 
-  ${e}: 0;
-  ${e === a.Left || e === a.Right ? `
+  ${r}: 0;
+  ${r === a.Left || r === a.Right ? `
       width: ${t};
-      height: ${r};
+      height: ${o};
       top: 50%;
       transform: translateY(-50%);
-      margin-left: ${f[l].indicatorLeftMargin}px;
+      margin-left: ${m[l].indicatorLeftMargin}px;
 
-      ${e === a.Right && n`
+      ${r === a.Right && d`
           left: unset;
         `}
     ` : `
       height: ${t};
-      width: max(${f[l].iconSize}px, ${r});
+      width: max(${m[l].iconSize}px, ${o});
       left: 50%;
       transform: translateX(-50%);
     `}
-`, S = (t) => ({
+`, u = (t) => ({
   borderTopLeftRadius: t === a.Bottom || t === a.Right ? "4px" : "0",
   borderTopRightRadius: t === a.Bottom || t === a.Left ? "4px" : "0",
   borderBottomLeftRadius: t === a.Top || t === a.Right ? "4px" : "0",
   borderBottomRightRadius: t === a.Top || t === a.Left ? "4px" : "0"
-}), b = ({
+}), S = ({
   position: t,
-  width: r,
-  height: e,
+  width: o,
+  height: r,
   state: l,
   defaultStatus: s = !1,
-  isIconTop: i = !1,
-  size: c = o.Medium,
-  muted: d = !1
-}) => n`
-  ${({ theme: m }) => n`
-    ${u({ width: r, height: e, position: t, size: c })};
-    background-color: ${m.layer({
+  size: i = e.Medium,
+  muted: c = !1
+}) => d`
+  ${({ theme: n }) => d`
+    ${$({ width: o, height: r, position: t, size: i })};
+    background-color: ${n.layer({
   disabled: l === "disabled",
-  muted: d
-})[g.BackgroundBrand]};
-    ${S(t)};
+  muted: c
+})[f.BackgroundBrand]};
+    ${u(t)};
 
-    ${l === "press" && s && n`
-      animation: ${t === a.Left || t === a.Right ? $(e) : h(e, i)}
+    ${l === "press" && s && d`
+      animation: ${t === a.Left || t === a.Right ? h(r) : p(r)}
         0.2s alternate;
     `}
   `}
-`, R = {
-  [o.XSmall]: {
+`, b = {
+  [e.XSmall]: {
     x: "20px",
     y: "calc(100% - 8px - 16px)"
   },
-  [o.Small]: {
+  [e.Small]: {
     x: "20px",
     y: "calc(100% - 8px - 24px)"
   },
-  [o.Medium]: {
+  [e.Medium]: {
     x: "20px",
     y: "calc(100% - 12px - 32px)"
   },
-  [o.Large]: {
+  [e.Large]: {
     x: "24px",
     y: "calc(100% - 12px - 48px)"
   }
 };
-o.XSmall + "", o.Small + "", o.Medium + "", o.Large + "";
-const k = ({
+e.XSmall + "", e.Small + "", e.Medium + "", e.Large + "";
+const H = ({
   size: t,
-  indicatorPosition: r,
-  state: e,
+  indicatorPosition: o,
+  state: r,
   disabled: l,
   active: s,
-  iconPosition: i,
-  muted: c
+  muted: i
 }) => {
-  const d = r === "bottom" || r === "top" ? "y" : "x", p = R[t][d];
-  return b({
-    position: r,
+  const c = o === "bottom" || o === "top" ? "y" : "x", g = b[t][c];
+  return S({
+    position: o,
     width: "3px",
-    height: s ? p : "30%",
-    state: s ? l ? "disabled" : e : "press",
+    height: s ? g : "30%",
+    state: s ? l ? "disabled" : r : "press",
     defaultStatus: !s,
-    isIconTop: i === a.Top,
     size: t,
-    muted: c
+    muted: i
   });
 };
 export {
-  k as getIndicatorPositionStyle
+  H as getIndicatorPositionStyle
 };
 //# sourceMappingURL=indicator.styles.js.map

package/build/esm/components/Menu/styles/indicator.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"indicator.styles.js","sources":["../../../../../src/components/Menu/styles/indicator.styles.ts"],"sourcesContent":["import { css, keyframes, CSSObject } from 'styled-components';\nimport { FabricsVariables } from 'acinguiux-ds-fabrics';\nimport { Positions, Sizes } from 'acinguiux-ds-react-base/consts';\nimport { type MenuTypes, MenuConsts } from 'acinguiux-ds-react-base/components/Menu';\nimport { Variables } from 'acinguiux-ds-react-base/theme';\n\nimport type { StyledMenuProps } from '../Menu.types';\n\nconst growHorizontal = (width: string, isIconTop = false) => keyframes`\n  from {\n    width: 0;\n    left: 50%;\n    transform: translateX(100%);\n  }\n  to {\n    width: ${width};\n    left: ${isIconTop ? '20%' : '5%'};\n    transform: translateX(100%);\n  }\n`;\n\nconst growVertical = (height: string) => keyframes`\n  from {\n    height: 0;\n    top: 50%;\n    transform: translateY(0%);\n  }\n  to {\n    height: ${height};\n    top: 50%;\n    transform: translateY(-50%);\n  }\n`;\n\nconst getIndicatorStyle = ({\n  width,\n  height,\n  position,\n  size,\n}: {\n  width: string;\n  height: string;\n  position: MenuTypes.IndicatorPosition;\n  size: MenuTypes.Size;\n}) => css`\n  content: '';\n  position: absolute;\n  display: block;\n  transition: all 0.2s;\n\n  ${position}: 0;\n  ${position === Positions.Left || position === Positions.Right\n    ? `\n      width: ${width};\n      height: ${height};\n      top: 50%;\n      transform: translateY(-50%);\n      margin-left: ${MenuConsts.consts[size].indicatorLeftMargin}px;\n\n      ${\n        position === Positions.Right &&\n        css`\n          left: unset;\n        `\n      }\n    `\n    : `\n      height: ${width};\n      width: max(${MenuConsts.consts[size].iconSize}px, ${height});\n      left: 50%;\n      transform: translateX(-50%);\n    `}\n`;\n\nconst getBorderRadiusFromPosition = (position: MenuTypes.IndicatorPosition): CSSObject => ({\n  borderTopLeftRadius: position === Positions.Bottom || position === Positions.Right ? '4px' : '0',\n  borderTopRightRadius: position === Positions.Bottom || position === Positions.Left ? '4px' : '0',\n  borderBottomLeftRadius: position === Positions.Top || position === Positions.Right ? '4px' : '0',\n  borderBottomRightRadius: position === Positions.Top || position === Positions.Left ? '4px' : '0',\n});\n\nconst createIndicatorStyle = ({\n  position,\n  width,\n  height,\n  state,\n  defaultStatus = false,\n  isIconTop = false,\n  size = Sizes.Medium,\n  muted = false,\n}: {\n  position: MenuTypes.IndicatorPosition;\n  width: string;\n  height: string;\n  state: FabricsVariables.StateType | 'disabled';\n  defaultStatus?: boolean;\n  isIconTop?: boolean;\n  size?: MenuTypes.Size;\n  muted?: boolean;\n}) => css<StyledMenuProps>`\n  ${({ theme }) => css`\n    ${getIndicatorStyle({ width, height, position, size })};\n    background-color: ${theme.layer({\n      disabled: state === 'disabled',\n      muted,\n    })[Variables.BackgroundBrand]};\n    ${getBorderRadiusFromPosition(position)};\n\n    ${state === 'press' &&\n    defaultStatus &&\n    css`\n      animation: ${position === Positions.Left || position === Positions.Right\n          ? growVertical(height)\n          : growHorizontal(height, isIconTop)}\n        0.2s alternate;\n    `}\n  `}\n`;\n\nconst IndicatorSizes = {\n  [Sizes.XSmall]: {\n    x: '20px',\n    y: 'calc(100% - 8px - 16px)',\n  },\n  [Sizes.Small]: {\n    x: '20px',\n    y: 'calc(100% - 8px - 24px)',\n  },\n  [Sizes.Medium]: {\n    x: '20px',\n    y: 'calc(100% - 12px - 32px)',\n  },\n  [Sizes.Large]: {\n    x: '24px',\n    y: 'calc(100% - 12px - 48px)',\n  },\n};\n\nconst HoverIndicatorSizes = {\n  [Sizes.XSmall]: {\n    x: '24px',\n    y: 'calc(100% - 16px)',\n  },\n  [Sizes.Small]: {\n    x: '24px',\n    y: 'calc(100% - 24px)',\n  },\n  [Sizes.Medium]: {\n    x: '24px',\n    y: 'calc(100% - 32px)',\n  },\n  [Sizes.Large]: {\n    x: '28px',\n    y: 'calc(100% - 48px)',\n  },\n};\n\ntype IndicatorPositionStyleProps = {\n  size: MenuTypes.Size;\n  indicatorPosition: MenuTypes.IndicatorPosition;\n  state: FabricsVariables.StateType;\n  muted?: boolean;\n  disabled?: boolean;\n  active?: boolean;\n  iconPosition?: MenuTypes.IconPosition;\n};\n\n// TRIGGER WARNING: incredibly complex function\n// this is wayyyy more complex than it needs to be, but I tried replicating the logic from the original object array, adding the muted prop\n// and it is a bit of a mess, but it works\n// I would suggest refactoring this when reworking the Menu component, starting from scratch! Do NOT keep this in :)\nexport const getIndicatorPositionStyle = ({\n  size,\n  indicatorPosition,\n  state,\n  disabled,\n  active,\n  iconPosition,\n  muted,\n}: IndicatorPositionStyleProps) => {\n  const xOrYPosition = indicatorPosition === 'bottom' || indicatorPosition === 'top' ? 'y' : 'x';\n  const indicatorHeight = IndicatorSizes[size][xOrYPosition];\n  const hoverIndicatorHeight =\n    state === 'hover' && !disabled ? HoverIndicatorSizes[size][xOrYPosition] : indicatorHeight;\n  const indicatorInactiveheight = !active ? '30%' : hoverIndicatorHeight;\n  const disabledOrState = disabled ? 'disabled' : state;\n  const realState = !active ? 'press' : disabledOrState;\n\n  return createIndicatorStyle({\n    position: indicatorPosition,\n    width: '3px',\n    height: indicatorInactiveheight,\n    state: realState,\n    defaultStatus: !active,\n    isIconTop: iconPosition === Positions.Top,\n    size,\n    muted,\n  });\n};\n"],"names":["growHorizontal","width","isIconTop","keyframes","growVertical","height","getIndicatorStyle","position","size","css","Positions","MenuConsts.consts","getBorderRadiusFromPosition","createIndicatorStyle","state","defaultStatus","Sizes","muted","theme","Variables","IndicatorSizes","getIndicatorPositionStyle","indicatorPosition","disabled","active","iconPosition","xOrYPosition","hoverIndicatorHeight"],"mappings":"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"}
+{"version":3,"file":"indicator.styles.js","sources":["../../../../../src/components/Menu/styles/indicator.styles.ts"],"sourcesContent":["import { css, keyframes, CSSObject } from 'styled-components';\nimport { FabricsVariables } from 'acinguiux-ds-fabrics';\nimport { Positions, Sizes } from 'acinguiux-ds-react-base/consts';\nimport { type MenuTypes, MenuConsts } from 'acinguiux-ds-react-base/components/Menu';\nimport { Variables } from 'acinguiux-ds-react-base/theme';\n\nimport type { StyledMenuProps } from '../Menu.types';\n\nconst growHorizontal = (width: string) => keyframes`\n  from {\n    width: 0;\n  }\n  to {\n    width: ${width};\n  }\n`;\n\nconst growVertical = (height: string) => keyframes`\n  from {\n    height: 0;\n    top: 50%;\n    transform: translateY(0%);\n  }\n  to {\n    height: ${height};\n    top: 50%;\n    transform: translateY(-50%);\n  }\n`;\n\nconst getIndicatorStyle = ({\n  width,\n  height,\n  position,\n  size,\n}: {\n  width: string;\n  height: string;\n  position: MenuTypes.IndicatorPosition;\n  size: MenuTypes.Size;\n}) => css`\n  content: '';\n  position: absolute;\n  display: block;\n  transition: all 0.2s;\n\n  ${position}: 0;\n  ${position === Positions.Left || position === Positions.Right\n    ? `\n      width: ${width};\n      height: ${height};\n      top: 50%;\n      transform: translateY(-50%);\n      margin-left: ${MenuConsts.consts[size].indicatorLeftMargin}px;\n\n      ${\n        position === Positions.Right &&\n        css`\n          left: unset;\n        `\n      }\n    `\n    : `\n      height: ${width};\n      width: max(${MenuConsts.consts[size].iconSize}px, ${height});\n      left: 50%;\n      transform: translateX(-50%);\n    `}\n`;\n\nconst getBorderRadiusFromPosition = (position: MenuTypes.IndicatorPosition): CSSObject => ({\n  borderTopLeftRadius: position === Positions.Bottom || position === Positions.Right ? '4px' : '0',\n  borderTopRightRadius: position === Positions.Bottom || position === Positions.Left ? '4px' : '0',\n  borderBottomLeftRadius: position === Positions.Top || position === Positions.Right ? '4px' : '0',\n  borderBottomRightRadius: position === Positions.Top || position === Positions.Left ? '4px' : '0',\n});\n\nconst createIndicatorStyle = ({\n  position,\n  width,\n  height,\n  state,\n  defaultStatus = false,\n  size = Sizes.Medium,\n  muted = false,\n}: {\n  position: MenuTypes.IndicatorPosition;\n  width: string;\n  height: string;\n  state: FabricsVariables.StateType | 'disabled';\n  defaultStatus?: boolean;\n  size?: MenuTypes.Size;\n  muted?: boolean;\n}) => css<StyledMenuProps>`\n  ${({ theme }) => css`\n    ${getIndicatorStyle({ width, height, position, size })};\n    background-color: ${theme.layer({\n      disabled: state === 'disabled',\n      muted,\n    })[Variables.BackgroundBrand]};\n    ${getBorderRadiusFromPosition(position)};\n\n    ${state === 'press' &&\n    defaultStatus &&\n    css`\n      animation: ${position === Positions.Left || position === Positions.Right\n          ? growVertical(height)\n          : growHorizontal(height)}\n        0.2s alternate;\n    `}\n  `}\n`;\n\nconst IndicatorSizes = {\n  [Sizes.XSmall]: {\n    x: '20px',\n    y: 'calc(100% - 8px - 16px)',\n  },\n  [Sizes.Small]: {\n    x: '20px',\n    y: 'calc(100% - 8px - 24px)',\n  },\n  [Sizes.Medium]: {\n    x: '20px',\n    y: 'calc(100% - 12px - 32px)',\n  },\n  [Sizes.Large]: {\n    x: '24px',\n    y: 'calc(100% - 12px - 48px)',\n  },\n};\n\nconst HoverIndicatorSizes = {\n  [Sizes.XSmall]: {\n    x: '24px',\n    y: 'calc(100% - 16px)',\n  },\n  [Sizes.Small]: {\n    x: '24px',\n    y: 'calc(100% - 24px)',\n  },\n  [Sizes.Medium]: {\n    x: '24px',\n    y: 'calc(100% - 32px)',\n  },\n  [Sizes.Large]: {\n    x: '28px',\n    y: 'calc(100% - 48px)',\n  },\n};\n\ntype IndicatorPositionStyleProps = {\n  size: MenuTypes.Size;\n  indicatorPosition: MenuTypes.IndicatorPosition;\n  state: FabricsVariables.StateType;\n  muted?: boolean;\n  disabled?: boolean;\n  active?: boolean;\n};\n\n// TRIGGER WARNING: incredibly complex function\n// this is wayyyy more complex than it needs to be, but I tried replicating the logic from the original object array, adding the muted prop\n// and it is a bit of a mess, but it works\n// I would suggest refactoring this when reworking the Menu component, starting from scratch! Do NOT keep this in :)\nexport const getIndicatorPositionStyle = ({\n  size,\n  indicatorPosition,\n  state,\n  disabled,\n  active,\n  muted,\n}: IndicatorPositionStyleProps) => {\n  const xOrYPosition = indicatorPosition === 'bottom' || indicatorPosition === 'top' ? 'y' : 'x';\n  const indicatorHeight = IndicatorSizes[size][xOrYPosition];\n  const hoverIndicatorHeight =\n    state === 'hover' && !disabled ? HoverIndicatorSizes[size][xOrYPosition] : indicatorHeight;\n  const indicatorInactiveheight = !active ? '30%' : hoverIndicatorHeight;\n  const disabledOrState = disabled ? 'disabled' : state;\n  const realState = !active ? 'press' : disabledOrState;\n\n  return createIndicatorStyle({\n    position: indicatorPosition,\n    width: '3px',\n    height: indicatorInactiveheight,\n    state: realState,\n    defaultStatus: !active,\n    size,\n    muted,\n  });\n};\n"],"names":["growHorizontal","width","keyframes","growVertical","height","getIndicatorStyle","position","size","css","Positions","MenuConsts.consts","getBorderRadiusFromPosition","createIndicatorStyle","state","defaultStatus","Sizes","muted","theme","Variables","IndicatorSizes","getIndicatorPositionStyle","indicatorPosition","disabled","active","xOrYPosition","hoverIndicatorHeight"],"mappings":"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"}

package/build/esm/components/Menu/styles/menuItem.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"menuItem.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/Menu/styles/menuItem.styles.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAGrD,eAAO,MAAM,aAAa,sDAwLzB,CAAC"}
+{"version":3,"file":"menuItem.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/Menu/styles/menuItem.styles.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAGrD,eAAO,MAAM,aAAa,sDAsLzB,CAAC"}

package/build/esm/components/Menu/styles/menuItem.styles.js

@@ -1,33 +1,33 @@
-import { css as $ } from "styled-components";
-import { Directions as d } from "../../../react-base/src/consts/index.js";
+import { css as c } from "styled-components";
+import { Directions as $ } from "../../../react-base/src/consts/index.js";
 import { Variables as i } from "../../../react-base/src/theme/types/layer.js";
 import { consts as x } from "../../../react-base/src/components/Menu/Menu.consts.js";
-import { FabricsVariables as s } from "acinguiux-ds-fabrics";
+import { FabricsVariables as r } from "acinguiux-ds-fabrics";
 import { getFocusStyles as y } from "../../../react-base/src/utils/stylesUtils.js";
-import { getBackgroundColor as g, getMenuItemSelectedStyle as u, getMenuItemDisabledStyle as S, getModeIndicatorPosition as p } from "../Menu.utils.js";
-import { getIndicatorPositionStyle as F } from "./indicator.styles.js";
-import { MENU_CLASS as e, BADGE_CLASS as b } from "../../../react-base/src/consts/classes.js";
-const A = $`
-  ${({ theme: t, $size: o, $muted: l, disabled: m, $indicatorPosition: r, $noAnimate: f, $iconPosition: a, mode: c }) => {
-  const n = t.layer({ foundation: s.Foundations.Surface }), v = t.layer({
-    foundation: s.Foundations.Surface,
-    muted: l,
+import { getBackgroundColor as v, getModeIndicatorPosition as g, getMenuItemSelectedStyle as b, getMenuItemDisabledStyle as S } from "../Menu.utils.js";
+import { getIndicatorPositionStyle as p } from "./indicator.styles.js";
+import { MENU_CLASS as e, BADGE_CLASS as d } from "../../../react-base/src/consts/classes.js";
+const A = c`
+  ${({ theme: t, $size: l, $muted: o, disabled: u, $indicatorPosition: a, $noAnimate: m, $iconPosition: F, mode: s }) => {
+  const n = t.layer({ foundation: r.Foundations.Surface }), f = t.layer({
+    foundation: r.Foundations.Surface,
+    muted: o,
     disabled: !0
   });
-  return $`
+  return c`
       .${e}-item {
         position: relative;
         display: flex;
-        justify-content: ${c === d.Horizontal ? "center" : "space-between"};
-        align-items: ${c === d.Horizontal ? "center" : "stretch"};
+        justify-content: ${s === $.Horizontal ? "center" : "space-between"};
+        align-items: ${s === $.Horizontal ? "center" : "stretch"};
         flex-direction: column;
-        padding: ${x[o].itemPadding[c === d.Horizontal ? d.Horizontal : d.Vertical][a]};
+        padding: ${x[l].itemPadding[s === $.Horizontal ? $.Horizontal : $.Vertical][F]};
         cursor: pointer;
 
         & .${e}-label {
           color: ${n[i.TextOnFoundationSubtle]};
 
-          *:not(.${b}) svg {
+          *:not(.${d}) svg {
             fill: ${n[i.TextOnFoundationSubtle]};
           }
         }
@@ -36,7 +36,7 @@ const A = $`
           .${e}-label {
             color: ${n[i.TextOnFoundationStrong]};
 
-            *:not(.${b}) svg {
+            *:not(.${d}) svg {
               fill: ${n[i.TextOnFoundationStrong]};
             }
           }
@@ -46,7 +46,7 @@ const A = $`
           .${e}-label {
             color: ${n[i.TextOnFoundationStrong]};
 
-            *:not(.${b}) svg {
+            *:not(.${d}) svg {
               fill: ${n[i.TextOnFoundationStrong]};
             }
           }
@@ -56,43 +56,42 @@ const A = $`
         &.${e}-item-disabled {
           &,
           .${e}-label {
-            color: ${v[i.TextOnFoundationSubtle]};
+            color: ${f[i.TextOnFoundationSubtle]};
             cursor: not-allowed;
 
-            *:not(.${b}) svg {
-              fill: ${v[i.TextOnFoundationSubtle]};
+            *:not(.${d}) svg {
+              fill: ${f[i.TextOnFoundationSubtle]};
             }
           }
         }
 
         &.${e}-item-active:not(.${e}-item-selected):not(.${e}-item-disabled) {
           .${e}-label {
-            background-color: ${g(
+            background-color: ${v(
     t,
-    s.States.Hover,
-    s.Foundations.Section,
-    l
+    r.States.Hover,
+    r.Foundations.Section,
+    o
   )};
           }
 
           &:active .${e}-label {
-            background-color: ${g(
+            background-color: ${v(
     t,
-    s.States.Press,
-    s.Foundations.Section,
-    l
+    r.States.Press,
+    r.Foundations.Section,
+    o
   )};
 
-            ${f !== !0 && $`
+            ${m !== !0 && c`
               &::after {
-                ${F({
-    indicatorPosition: p(r, c),
-    size: o,
+                ${p({
+    indicatorPosition: g(a, s),
+    size: l,
     state: "resting",
     active: !1,
-    disabled: m,
-    muted: l,
-    iconPosition: a
+    disabled: u,
+    muted: o
   })};
               }
             `};
@@ -126,23 +125,22 @@ const A = $`
 
       .${e}-vertical {
         .${e}-label {
-          ${c === "horizontal" && $`
+          ${s === "horizontal" && c`
             margin: -4px 2px;
           `}
         }
       }
 
-      ${f !== !0 && $`
+      ${m !== !0 && c`
         .${e}-vertical .${e}-item-active.${e}-item:not(.${e}-item-selected) {
           &:active .${e}-label {
             &::after {
-              ${F({
-    indicatorPosition: p(r),
-    size: o,
+              ${p({
+    indicatorPosition: g(a),
+    size: l,
     state: "resting",
-    disabled: m,
-    muted: l,
-    iconPosition: a
+    disabled: u,
+    muted: o
   })};
             }
           }
@@ -150,7 +148,7 @@ const A = $`
       `};
 
       .${e}-vertical .${e}-item.${e}-item-selected .${e}-label {
-        ${u(t, r, "vertical", a, o, l)};
+        ${b(t, a, "vertical", l, o)};
       }
 
       /* Inline and vertical top level */
@@ -158,13 +156,13 @@ const A = $`
       /* Disabled */
       &.${e}-inline, &.${e}-vertical {
         .${e}-item.${e}-item-selected.${e}-item-disabled .${e}-label {
-          ${S(t, r, "vertical", a, o, l)};
+          ${S(t, a, "vertical", l, o)};
         }
       }
 
       &.${e}-inline, &.${e}-vertical {
         .${e}-item.${e}-item-selected:not(.${e}-item-disabled) .${e}-label {
-          ${u(t, r, "vertical", a, o, l)};
+          ${b(t, a, "vertical", l, o)};
         }
       }
 
@@ -174,13 +172,13 @@ const A = $`
       &.${e}-horizontal
         .${e}-item.${e}-item-selected.${e}-item-disabled
         .${e}-label {
-        ${S(t, r, "horizontal", a, o, l)};
+        ${S(t, a, "horizontal", l, o)};
       }
 
       &.${e}-horizontal
         .${e}-item.${e}-item-selected:not(.${e}-item-disabled)
         .${e}-label {
-        ${u(t, r, "horizontal", a, o, l)};
+        ${b(t, a, "horizontal", l, o)};
       }
     `;
 }}

package/build/esm/components/Menu/styles/menuItem.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"menuItem.styles.js","sources":["../../../../../src/components/Menu/styles/menuItem.styles.ts"],"sourcesContent":["import { css } from 'styled-components';\nimport { MENU_CLASS, Directions, 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 {\n  getMenuItemSelectedStyle,\n  getModeIndicatorPosition,\n  getMenuItemDisabledStyle,\n  getBackgroundColor,\n} from '../Menu.utils';\nimport type { StyledMenuProps } from '../Menu.types';\nimport { getIndicatorPositionStyle } from './indicator.styles';\n\nexport const menuItemStyle = css<StyledMenuProps>`\n  ${({ theme, $size, $muted, disabled, $indicatorPosition, $noAnimate, $iconPosition, mode }) => {\n    const layer = theme.layer({ foundation: FabricsVariables.Foundations.Surface });\n    const disabledLayer = theme.layer({\n      foundation: FabricsVariables.Foundations.Surface,\n      muted: $muted,\n      disabled: true,\n    });\n\n    return css<StyledMenuProps>`\n      .${MENU_CLASS}-item {\n        position: relative;\n        display: flex;\n        justify-content: ${mode === Directions.Horizontal ? 'center' : 'space-between'};\n        align-items: ${mode === Directions.Horizontal ? 'center' : 'stretch'};\n        flex-direction: column;\n        padding: ${MenuConsts.consts[$size].itemPadding[\n          mode === Directions.Horizontal ? Directions.Horizontal : Directions.Vertical\n        ][$iconPosition]};\n        cursor: pointer;\n\n        & .${MENU_CLASS}-label {\n          color: ${layer[Variables.TextOnFoundationSubtle]};\n\n          *:not(.${BADGE_CLASS}) svg {\n            fill: ${layer[Variables.TextOnFoundationSubtle]};\n          }\n        }\n\n        &.${MENU_CLASS}-item-selected:not(.${MENU_CLASS}-item-active):not(.${MENU_CLASS}-item-disabled) {\n          .${MENU_CLASS}-label {\n            color: ${layer[Variables.TextOnFoundationStrong]};\n\n            *:not(.${BADGE_CLASS}) svg {\n              fill: ${layer[Variables.TextOnFoundationStrong]};\n            }\n          }\n        }\n\n        &.${MENU_CLASS}-item-active:not(.${MENU_CLASS}-item-disabled) {\n          .${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}-item-disabled {\n          &,\n          .${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}-item-active:not(.${MENU_CLASS}-item-selected):not(.${MENU_CLASS}-item-disabled) {\n          .${MENU_CLASS}-label {\n            background-color: ${getBackgroundColor(\n              theme,\n              FabricsVariables.States.Hover,\n              FabricsVariables.Foundations.Section,\n              $muted,\n            )};\n          }\n\n          &:active .${MENU_CLASS}-label {\n            background-color: ${getBackgroundColor(\n              theme,\n              FabricsVariables.States.Press,\n              FabricsVariables.Foundations.Section,\n              $muted,\n            )};\n\n            ${$noAnimate !== true &&\n            css<StyledMenuProps>`\n              &::after {\n                ${getIndicatorPositionStyle({\n                  indicatorPosition: getModeIndicatorPosition($indicatorPosition, mode),\n                  size: $size,\n                  state: 'resting',\n                  active: false,\n                  disabled,\n                  muted: $muted,\n                  iconPosition: $iconPosition,\n                })};\n              }\n            `};\n          }\n\n          /* Span focus */\n          &:focus-visible {\n            .${MENU_CLASS}-label {\n              background-color: transparent;\n            }\n          }\n\n          /* Anchor focus */\n          .${MENU_CLASS}-label:focus-visible {\n            background-color: transparent;\n          }\n        }\n\n        /* remove default focus */\n        &:focus-visible {\n          outline: none;\n        }\n\n        /* set focus visible for label & custom render items */\n        &:focus-visible .${MENU_CLASS}-label, .${MENU_CLASS}-label:focus-visible {\n          ${getFocusStyles(theme)};\n        }\n      }\n\n      /* Vertical and horizontal popup  */\n\n      .${MENU_CLASS}-vertical {\n        .${MENU_CLASS}-label {\n          ${mode === 'horizontal' &&\n          css`\n            margin: -4px 2px;\n          `}\n        }\n      }\n\n      ${$noAnimate !== true &&\n      css<StyledMenuProps>`\n        .${MENU_CLASS}-vertical .${MENU_CLASS}-item-active.${MENU_CLASS}-item:not(.${MENU_CLASS}-item-selected) {\n          &:active .${MENU_CLASS}-label {\n            &::after {\n              ${getIndicatorPositionStyle({\n                indicatorPosition: getModeIndicatorPosition($indicatorPosition),\n                size: $size,\n                state: 'resting',\n                disabled,\n                muted: $muted,\n                iconPosition: $iconPosition,\n              })};\n            }\n          }\n        }\n      `};\n\n      .${MENU_CLASS}-vertical .${MENU_CLASS}-item.${MENU_CLASS}-item-selected .${MENU_CLASS}-label {\n        ${getMenuItemSelectedStyle(theme, $indicatorPosition, 'vertical', $iconPosition, $size, $muted)};\n      }\n\n      /* Inline and vertical top level */\n\n      /* Disabled */\n      &.${MENU_CLASS}-inline, &.${MENU_CLASS}-vertical {\n        .${MENU_CLASS}-item.${MENU_CLASS}-item-selected.${MENU_CLASS}-item-disabled .${MENU_CLASS}-label {\n          ${getMenuItemDisabledStyle(theme, $indicatorPosition, 'vertical', $iconPosition, $size, $muted)};\n        }\n      }\n\n      &.${MENU_CLASS}-inline, &.${MENU_CLASS}-vertical {\n        .${MENU_CLASS}-item.${MENU_CLASS}-item-selected:not(.${MENU_CLASS}-item-disabled) .${MENU_CLASS}-label {\n          ${getMenuItemSelectedStyle(theme, $indicatorPosition, 'vertical', $iconPosition, $size, $muted)};\n        }\n      }\n\n      /* Horizontal */\n\n      /* Disabled */\n      &.${MENU_CLASS}-horizontal\n        .${MENU_CLASS}-item.${MENU_CLASS}-item-selected.${MENU_CLASS}-item-disabled\n        .${MENU_CLASS}-label {\n        ${getMenuItemDisabledStyle(theme, $indicatorPosition, 'horizontal', $iconPosition, $size, $muted)};\n      }\n\n      &.${MENU_CLASS}-horizontal\n        .${MENU_CLASS}-item.${MENU_CLASS}-item-selected:not(.${MENU_CLASS}-item-disabled)\n        .${MENU_CLASS}-label {\n        ${getMenuItemSelectedStyle(theme, $indicatorPosition, 'horizontal', $iconPosition, $size, $muted)};\n      }\n    `;\n  }}\n`;\n"],"names":["menuItemStyle","css","theme","$size","$muted","disabled","$indicatorPosition","$noAnimate","$iconPosition","mode","layer","FabricsVariables","disabledLayer","MENU_CLASS","Directions","MenuConsts.consts","Variables","BADGE_CLASS","getBackgroundColor","getIndicatorPositionStyle","getModeIndicatorPosition","getFocusStyles","getMenuItemSelectedStyle","getMenuItemDisabledStyle"],"mappings":"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"}
+{"version":3,"file":"menuItem.styles.js","sources":["../../../../../src/components/Menu/styles/menuItem.styles.ts"],"sourcesContent":["import { css } from 'styled-components';\nimport { MENU_CLASS, Directions, 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 {\n  getMenuItemSelectedStyle,\n  getModeIndicatorPosition,\n  getMenuItemDisabledStyle,\n  getBackgroundColor,\n} from '../Menu.utils';\nimport type { StyledMenuProps } from '../Menu.types';\nimport { getIndicatorPositionStyle } from './indicator.styles';\n\nexport const menuItemStyle = css<StyledMenuProps>`\n  ${({ theme, $size, $muted, disabled, $indicatorPosition, $noAnimate, $iconPosition, mode }) => {\n    const layer = theme.layer({ foundation: FabricsVariables.Foundations.Surface });\n    const disabledLayer = theme.layer({\n      foundation: FabricsVariables.Foundations.Surface,\n      muted: $muted,\n      disabled: true,\n    });\n\n    return css<StyledMenuProps>`\n      .${MENU_CLASS}-item {\n        position: relative;\n        display: flex;\n        justify-content: ${mode === Directions.Horizontal ? 'center' : 'space-between'};\n        align-items: ${mode === Directions.Horizontal ? 'center' : 'stretch'};\n        flex-direction: column;\n        padding: ${MenuConsts.consts[$size].itemPadding[\n          mode === Directions.Horizontal ? Directions.Horizontal : Directions.Vertical\n        ][$iconPosition]};\n        cursor: pointer;\n\n        & .${MENU_CLASS}-label {\n          color: ${layer[Variables.TextOnFoundationSubtle]};\n\n          *:not(.${BADGE_CLASS}) svg {\n            fill: ${layer[Variables.TextOnFoundationSubtle]};\n          }\n        }\n\n        &.${MENU_CLASS}-item-selected:not(.${MENU_CLASS}-item-active):not(.${MENU_CLASS}-item-disabled) {\n          .${MENU_CLASS}-label {\n            color: ${layer[Variables.TextOnFoundationStrong]};\n\n            *:not(.${BADGE_CLASS}) svg {\n              fill: ${layer[Variables.TextOnFoundationStrong]};\n            }\n          }\n        }\n\n        &.${MENU_CLASS}-item-active:not(.${MENU_CLASS}-item-disabled) {\n          .${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}-item-disabled {\n          &,\n          .${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}-item-active:not(.${MENU_CLASS}-item-selected):not(.${MENU_CLASS}-item-disabled) {\n          .${MENU_CLASS}-label {\n            background-color: ${getBackgroundColor(\n              theme,\n              FabricsVariables.States.Hover,\n              FabricsVariables.Foundations.Section,\n              $muted,\n            )};\n          }\n\n          &:active .${MENU_CLASS}-label {\n            background-color: ${getBackgroundColor(\n              theme,\n              FabricsVariables.States.Press,\n              FabricsVariables.Foundations.Section,\n              $muted,\n            )};\n\n            ${$noAnimate !== true &&\n            css<StyledMenuProps>`\n              &::after {\n                ${getIndicatorPositionStyle({\n                  indicatorPosition: getModeIndicatorPosition($indicatorPosition, mode),\n                  size: $size,\n                  state: 'resting',\n                  active: false,\n                  disabled,\n                  muted: $muted,\n                })};\n              }\n            `};\n          }\n\n          /* Span focus */\n          &:focus-visible {\n            .${MENU_CLASS}-label {\n              background-color: transparent;\n            }\n          }\n\n          /* Anchor focus */\n          .${MENU_CLASS}-label:focus-visible {\n            background-color: transparent;\n          }\n        }\n\n        /* remove default focus */\n        &:focus-visible {\n          outline: none;\n        }\n\n        /* set focus visible for label & custom render items */\n        &:focus-visible .${MENU_CLASS}-label, .${MENU_CLASS}-label:focus-visible {\n          ${getFocusStyles(theme)};\n        }\n      }\n\n      /* Vertical and horizontal popup  */\n\n      .${MENU_CLASS}-vertical {\n        .${MENU_CLASS}-label {\n          ${mode === 'horizontal' &&\n          css`\n            margin: -4px 2px;\n          `}\n        }\n      }\n\n      ${$noAnimate !== true &&\n      css<StyledMenuProps>`\n        .${MENU_CLASS}-vertical .${MENU_CLASS}-item-active.${MENU_CLASS}-item:not(.${MENU_CLASS}-item-selected) {\n          &:active .${MENU_CLASS}-label {\n            &::after {\n              ${getIndicatorPositionStyle({\n                indicatorPosition: getModeIndicatorPosition($indicatorPosition),\n                size: $size,\n                state: 'resting',\n                disabled,\n                muted: $muted,\n              })};\n            }\n          }\n        }\n      `};\n\n      .${MENU_CLASS}-vertical .${MENU_CLASS}-item.${MENU_CLASS}-item-selected .${MENU_CLASS}-label {\n        ${getMenuItemSelectedStyle(theme, $indicatorPosition, 'vertical', $size, $muted)};\n      }\n\n      /* Inline and vertical top level */\n\n      /* Disabled */\n      &.${MENU_CLASS}-inline, &.${MENU_CLASS}-vertical {\n        .${MENU_CLASS}-item.${MENU_CLASS}-item-selected.${MENU_CLASS}-item-disabled .${MENU_CLASS}-label {\n          ${getMenuItemDisabledStyle(theme, $indicatorPosition, 'vertical', $size, $muted)};\n        }\n      }\n\n      &.${MENU_CLASS}-inline, &.${MENU_CLASS}-vertical {\n        .${MENU_CLASS}-item.${MENU_CLASS}-item-selected:not(.${MENU_CLASS}-item-disabled) .${MENU_CLASS}-label {\n          ${getMenuItemSelectedStyle(theme, $indicatorPosition, 'vertical', $size, $muted)};\n        }\n      }\n\n      /* Horizontal */\n\n      /* Disabled */\n      &.${MENU_CLASS}-horizontal\n        .${MENU_CLASS}-item.${MENU_CLASS}-item-selected.${MENU_CLASS}-item-disabled\n        .${MENU_CLASS}-label {\n        ${getMenuItemDisabledStyle(theme, $indicatorPosition, 'horizontal', $size, $muted)};\n      }\n\n      &.${MENU_CLASS}-horizontal\n        .${MENU_CLASS}-item.${MENU_CLASS}-item-selected:not(.${MENU_CLASS}-item-disabled)\n        .${MENU_CLASS}-label {\n        ${getMenuItemSelectedStyle(theme, $indicatorPosition, 'horizontal', $size, $muted)};\n      }\n    `;\n  }}\n`;\n"],"names":["menuItemStyle","css","theme","$size","$muted","disabled","$indicatorPosition","$noAnimate","$iconPosition","mode","layer","FabricsVariables","disabledLayer","MENU_CLASS","Directions","MenuConsts.consts","Variables","BADGE_CLASS","getBackgroundColor","getIndicatorPositionStyle","getModeIndicatorPosition","getFocusStyles","getMenuItemSelectedStyle","getMenuItemDisabledStyle"],"mappings":"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"}

package/build/esm/components/Menu/styles/subMenu.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"subMenu.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/Menu/styles/subMenu.styles.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAMrD,eAAO,MAAM,YAAY,sDAoZxB,CAAC"}
+{"version":3,"file":"subMenu.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/Menu/styles/subMenu.styles.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAMrD,eAAO,MAAM,YAAY,sDAiZxB,CAAC"}