@ynput/ayon-frontend-shared 0.2.26 → 0.2.28

package/dist/src/components/Menu/MenuComponents/Menu.styled.cjs.js

@@ -0,0 +1,254 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("styled-components"),r=o.dialog`
+  position: fixed;
+  margin: 0;
+  inset: 0;
+  top: 42px;
+  width: auto;
+  height: auto;
+  z-index: 1000;
+  border: none;
+  background-color: unset;
+  padding: 0;
+
+  user-select: none;
+
+  overflow: auto;
+  /* remove scroll bar */
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+  padding-bottom: 60px;
+`,e=o.keyframes`
+    from {
+        scale: 0.95;
+        opacity: 0.6;
+    }
+    to {
+        scale: 1;
+        opacity: 1;
+    }
+`,n=o.div`
+  display: flex;
+  flex-direction: column;
+  gap: var(--base-gap-large);
+
+  /* position */
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: fit-content;
+  z-index: 30;
+
+  /* animate */
+  animation: ${e} 0.03s ease-in forwards;
+
+  /* transform origin based on alignment */
+  &.right {
+    transform-origin: top right;
+  }
+  &.left {
+    transform-origin: top left;
+  }
+
+  /* add shadow to each item */
+  & > *:not(.sub-menu),
+  .sub-menu menu {
+    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
+  }
+
+  /* theme support */
+  &.dark {
+    color: var(--md-sys-color-on-surface, #fff);
+    /* override children backgrounds if needed */
+    & > * {
+      color: var(--md-sys-color-on-surface, #fff) !important;
+    }
+  }
+`,t=o.section`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+
+  padding: 0px;
+  border-radius: 8px;
+  /* colors */
+  background-color: var(--md-sys-color-surface-container-high);
+  color: var(--md-sys-color-on-surface);
+  z-index: 10;
+  overflow: hidden;
+`,i=o.div`
+  position: relative;
+  border-radius: 8px;
+
+  /* sub menu */
+  &.sub-menu {
+    position: absolute;
+    bottom: 0;
+
+    border-radius: 8px;
+    width: max-content;
+    z-index: 30;
+
+    & > * {
+      border-radius: 8px;
+      overflow: hidden;
+    }
+  }
+`,a=o.menu`
+  /* reset defaults */
+  display: flex;
+  list-style-type: none;
+  margin-block-start: 0;
+  margin-block-end: 0;
+  margin-inline-start: 0px;
+  margin-inline-end: 0px;
+  padding-inline-start: 0;
+
+  /* custom */
+  flex-direction: column;
+  gap: var(--base-gap-large);
+  padding: 8px;
+
+  /* shrink the padding when compact */
+  &.compact {
+    padding: 4px;
+    gap: var(--base-gap-small);
+  }
+
+  /* colors */
+  background-color: var(--md-sys-color-surface-container-high);
+
+  /* divider */
+  hr {
+    margin: 0;
+    width: 100%;
+    border-style: solid;
+    opacity: 0.5;
+    border-color: var(--md-sys-color-surface-container-highest);
+  }
+`,s=o.li`
+  display: flex;
+  padding: 6px 16px 6px 12px;
+  justify-content: flex-start;
+  align-items: center;
+  gap: var(--base-gap-large);
+  align-self: stretch;
+  border-radius: 4px;
+  cursor: pointer;
+  position: relative;
+  user-select: none;
+
+  span {
+    display: inline-block;
+  }
+
+  &:hover {
+    background-color: var(--md-sys-color-surface-container-highest);
+  }
+
+  .more {
+    margin-left: auto;
+  }
+
+  /* highlighted item */
+  &.highlighted {
+    background-color: var(--md-sys-color-secondary-container);
+    &:hover {
+      background-color: var(--md-sys-color-secondary-container-hover);
+    }
+  }
+
+  /* selected item */
+  &.selected {
+    background-color: var(--md-sys-color-primary-container);
+    color: var(--md-sys-color-on-primary-container);
+    &:hover {
+      background-color: var(--md-sys-color-primary-container-hover);
+    }
+  }
+
+  &.notification::after {
+    content: '';
+    position: absolute;
+    right: 0;
+    top: 0;
+    transform: translate(25%, -25%);
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background-color: var(--md-sys-color-error);
+  }
+
+  &.danger {
+    &,
+    .icon {
+      color: var(--md-sys-color-error);
+    }
+
+    &:hover {
+      background-color: var(--md-sys-color-error-container);
+
+      &,
+      .icon {
+        color: var(--md-sys-color-on-error-container);
+      }
+    }
+  }
+
+  &.dev {
+    &,
+    .icon {
+      color: var(--color-hl-developer);
+    }
+
+    &:hover {
+      background-color: var(--color-hl-developer-container-hover);
+    }
+  }
+
+  &.disabled {
+    user-select: none;
+    pointer-events: none;
+    &,
+    .icon {
+      color: var(--md-sys-color-outline);
+    }
+    background-color: unset;
+  }
+`,c=o.img`
+  width: 18px;
+  height: 18px;
+  object-fit: contain;
+`,l=o.footer`
+  position: relative;
+  display: flex;
+  padding: 8px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  align-self: stretch;
+  background-color: var(--md-sys-color-surface-container-lowest);
+
+  user-select: text;
+
+  button {
+    display: none;
+
+    position: absolute;
+    right: 2px;
+    border-radius: 8px;
+    top: 50%;
+    transform: translateY(-50%);
+    cursor: pointer;
+  }
+
+  /* hover show button */
+  &:hover {
+    button {
+      display: flex;
+    }
+  }
+`;exports.Dialog=r;exports.DialogContent=n;exports.Footer=l;exports.Img=c;exports.Item=s;exports.Menu=a;exports.MenuWrapper=i;exports.Section=t;
+//# sourceMappingURL=Menu.styled.cjs.js.map

package/dist/src/components/Menu/MenuComponents/Menu.styled.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.styled.cjs.js","sources":["../../../../../../src/components/Menu/MenuComponents/Menu.styled.js"],"sourcesContent":["import styled, { keyframes } from 'styled-components'\n\n// DIALOG (CONTAINER)\nexport const Dialog = styled.dialog`\n  position: fixed;\n  margin: 0;\n  inset: 0;\n  top: 42px;\n  width: auto;\n  height: auto;\n  z-index: 1000;\n  border: none;\n  background-color: unset;\n  padding: 0;\n\n  user-select: none;\n\n  overflow: auto;\n  /* remove scroll bar */\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n  &::-webkit-scrollbar {\n    display: none;\n  }\n  padding-bottom: 60px;\n`\n\nconst DialogOpenAnimation = keyframes`\n    from {\n        scale: 0.95;\n        opacity: 0.6;\n    }\n    to {\n        scale: 1;\n        opacity: 1;\n    }\n`\n\nexport const DialogContent = styled.div`\n  display: flex;\n  flex-direction: column;\n  gap: var(--base-gap-large);\n\n  /* position */\n  position: absolute;\n  right: 0;\n  top: 0;\n  width: fit-content;\n  z-index: 30;\n\n  /* animate */\n  animation: ${DialogOpenAnimation} 0.03s ease-in forwards;\n\n  /* transform origin based on alignment */\n  &.right {\n    transform-origin: top right;\n  }\n  &.left {\n    transform-origin: top left;\n  }\n\n  /* add shadow to each item */\n  & > *:not(.sub-menu),\n  .sub-menu menu {\n    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);\n  }\n\n  /* theme support */\n  &.dark {\n    color: var(--md-sys-color-on-surface, #fff);\n    /* override children backgrounds if needed */\n    & > * {\n      color: var(--md-sys-color-on-surface, #fff) !important;\n    }\n  }\n`\n\n// MENULIST\nexport const Section = styled.section`\n  position: relative;\n  display: flex;\n  flex-direction: column;\n\n  padding: 0px;\n  border-radius: 8px;\n  /* colors */\n  background-color: var(--md-sys-color-surface-container-high);\n  color: var(--md-sys-color-on-surface);\n  z-index: 10;\n  overflow: hidden;\n`\nexport const MenuWrapper = styled.div`\n  position: relative;\n  border-radius: 8px;\n\n  /* sub menu */\n  &.sub-menu {\n    position: absolute;\n    bottom: 0;\n\n    border-radius: 8px;\n    width: max-content;\n    z-index: 30;\n\n    & > * {\n      border-radius: 8px;\n      overflow: hidden;\n    }\n  }\n`\n\nexport const Menu = styled.menu`\n  /* reset defaults */\n  display: flex;\n  list-style-type: none;\n  margin-block-start: 0;\n  margin-block-end: 0;\n  margin-inline-start: 0px;\n  margin-inline-end: 0px;\n  padding-inline-start: 0;\n\n  /* custom */\n  flex-direction: column;\n  gap: var(--base-gap-large);\n  padding: 8px;\n\n  /* shrink the padding when compact */\n  &.compact {\n    padding: 4px;\n    gap: var(--base-gap-small);\n  }\n\n  /* colors */\n  background-color: var(--md-sys-color-surface-container-high);\n\n  /* divider */\n  hr {\n    margin: 0;\n    width: 100%;\n    border-style: solid;\n    opacity: 0.5;\n    border-color: var(--md-sys-color-surface-container-highest);\n  }\n`\n\nexport const Item = styled.li`\n  display: flex;\n  padding: 6px 16px 6px 12px;\n  justify-content: flex-start;\n  align-items: center;\n  gap: var(--base-gap-large);\n  align-self: stretch;\n  border-radius: 4px;\n  cursor: pointer;\n  position: relative;\n  user-select: none;\n\n  span {\n    display: inline-block;\n  }\n\n  &:hover {\n    background-color: var(--md-sys-color-surface-container-highest);\n  }\n\n  .more {\n    margin-left: auto;\n  }\n\n  /* highlighted item */\n  &.highlighted {\n    background-color: var(--md-sys-color-secondary-container);\n    &:hover {\n      background-color: var(--md-sys-color-secondary-container-hover);\n    }\n  }\n\n  /* selected item */\n  &.selected {\n    background-color: var(--md-sys-color-primary-container);\n    color: var(--md-sys-color-on-primary-container);\n    &:hover {\n      background-color: var(--md-sys-color-primary-container-hover);\n    }\n  }\n\n  &.notification::after {\n    content: '';\n    position: absolute;\n    right: 0;\n    top: 0;\n    transform: translate(25%, -25%);\n    width: 8px;\n    height: 8px;\n    border-radius: 50%;\n    background-color: var(--md-sys-color-error);\n  }\n\n  &.danger {\n    &,\n    .icon {\n      color: var(--md-sys-color-error);\n    }\n\n    &:hover {\n      background-color: var(--md-sys-color-error-container);\n\n      &,\n      .icon {\n        color: var(--md-sys-color-on-error-container);\n      }\n    }\n  }\n\n  &.dev {\n    &,\n    .icon {\n      color: var(--color-hl-developer);\n    }\n\n    &:hover {\n      background-color: var(--color-hl-developer-container-hover);\n    }\n  }\n\n  &.disabled {\n    user-select: none;\n    pointer-events: none;\n    &,\n    .icon {\n      color: var(--md-sys-color-outline);\n    }\n    background-color: unset;\n  }\n`\n\nexport const Img = styled.img`\n  width: 18px;\n  height: 18px;\n  object-fit: contain;\n`\n\nexport const Footer = styled.footer`\n  position: relative;\n  display: flex;\n  padding: 8px;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  align-self: stretch;\n  background-color: var(--md-sys-color-surface-container-lowest);\n\n  user-select: text;\n\n  button {\n    display: none;\n\n    position: absolute;\n    right: 2px;\n    border-radius: 8px;\n    top: 50%;\n    transform: translateY(-50%);\n    cursor: pointer;\n  }\n\n  /* hover show button */\n  &:hover {\n    button {\n      display: flex;\n    }\n  }\n`\n"],"names":["Dialog","styled","DialogOpenAnimation","keyframes","DialogContent","Section","MenuWrapper","Menu","Item","Img","Footer"],"mappings":"qHAGaA,EAASC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAwBvBC,EAAsBC,EAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAWxBC,EAAgBH,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAarBC,CAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA2BrBG,EAAUJ,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAajBK,EAAcL,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAoBrBM,EAAON,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAkCdO,EAAOP,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA2FdQ,EAAMR,EAAO;AAAA;AAAA;AAAA;AAAA,EAMbS,EAAST,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA"}

package/dist/src/components/Menu/MenuComponents/Menu.styled.es.js

@@ -0,0 +1,265 @@
+import o, { keyframes as r } from "styled-components";
+const t = o.dialog`
+  position: fixed;
+  margin: 0;
+  inset: 0;
+  top: 42px;
+  width: auto;
+  height: auto;
+  z-index: 1000;
+  border: none;
+  background-color: unset;
+  padding: 0;
+
+  user-select: none;
+
+  overflow: auto;
+  /* remove scroll bar */
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+  padding-bottom: 60px;
+`, e = r`
+    from {
+        scale: 0.95;
+        opacity: 0.6;
+    }
+    to {
+        scale: 1;
+        opacity: 1;
+    }
+`, i = o.div`
+  display: flex;
+  flex-direction: column;
+  gap: var(--base-gap-large);
+
+  /* position */
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: fit-content;
+  z-index: 30;
+
+  /* animate */
+  animation: ${e} 0.03s ease-in forwards;
+
+  /* transform origin based on alignment */
+  &.right {
+    transform-origin: top right;
+  }
+  &.left {
+    transform-origin: top left;
+  }
+
+  /* add shadow to each item */
+  & > *:not(.sub-menu),
+  .sub-menu menu {
+    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
+  }
+
+  /* theme support */
+  &.dark {
+    color: var(--md-sys-color-on-surface, #fff);
+    /* override children backgrounds if needed */
+    & > * {
+      color: var(--md-sys-color-on-surface, #fff) !important;
+    }
+  }
+`, a = o.section`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+
+  padding: 0px;
+  border-radius: 8px;
+  /* colors */
+  background-color: var(--md-sys-color-surface-container-high);
+  color: var(--md-sys-color-on-surface);
+  z-index: 10;
+  overflow: hidden;
+`, s = o.div`
+  position: relative;
+  border-radius: 8px;
+
+  /* sub menu */
+  &.sub-menu {
+    position: absolute;
+    bottom: 0;
+
+    border-radius: 8px;
+    width: max-content;
+    z-index: 30;
+
+    & > * {
+      border-radius: 8px;
+      overflow: hidden;
+    }
+  }
+`, c = o.menu`
+  /* reset defaults */
+  display: flex;
+  list-style-type: none;
+  margin-block-start: 0;
+  margin-block-end: 0;
+  margin-inline-start: 0px;
+  margin-inline-end: 0px;
+  padding-inline-start: 0;
+
+  /* custom */
+  flex-direction: column;
+  gap: var(--base-gap-large);
+  padding: 8px;
+
+  /* shrink the padding when compact */
+  &.compact {
+    padding: 4px;
+    gap: var(--base-gap-small);
+  }
+
+  /* colors */
+  background-color: var(--md-sys-color-surface-container-high);
+
+  /* divider */
+  hr {
+    margin: 0;
+    width: 100%;
+    border-style: solid;
+    opacity: 0.5;
+    border-color: var(--md-sys-color-surface-container-highest);
+  }
+`, l = o.li`
+  display: flex;
+  padding: 6px 16px 6px 12px;
+  justify-content: flex-start;
+  align-items: center;
+  gap: var(--base-gap-large);
+  align-self: stretch;
+  border-radius: 4px;
+  cursor: pointer;
+  position: relative;
+  user-select: none;
+
+  span {
+    display: inline-block;
+  }
+
+  &:hover {
+    background-color: var(--md-sys-color-surface-container-highest);
+  }
+
+  .more {
+    margin-left: auto;
+  }
+
+  /* highlighted item */
+  &.highlighted {
+    background-color: var(--md-sys-color-secondary-container);
+    &:hover {
+      background-color: var(--md-sys-color-secondary-container-hover);
+    }
+  }
+
+  /* selected item */
+  &.selected {
+    background-color: var(--md-sys-color-primary-container);
+    color: var(--md-sys-color-on-primary-container);
+    &:hover {
+      background-color: var(--md-sys-color-primary-container-hover);
+    }
+  }
+
+  &.notification::after {
+    content: '';
+    position: absolute;
+    right: 0;
+    top: 0;
+    transform: translate(25%, -25%);
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background-color: var(--md-sys-color-error);
+  }
+
+  &.danger {
+    &,
+    .icon {
+      color: var(--md-sys-color-error);
+    }
+
+    &:hover {
+      background-color: var(--md-sys-color-error-container);
+
+      &,
+      .icon {
+        color: var(--md-sys-color-on-error-container);
+      }
+    }
+  }
+
+  &.dev {
+    &,
+    .icon {
+      color: var(--color-hl-developer);
+    }
+
+    &:hover {
+      background-color: var(--color-hl-developer-container-hover);
+    }
+  }
+
+  &.disabled {
+    user-select: none;
+    pointer-events: none;
+    &,
+    .icon {
+      color: var(--md-sys-color-outline);
+    }
+    background-color: unset;
+  }
+`, d = o.img`
+  width: 18px;
+  height: 18px;
+  object-fit: contain;
+`, p = o.footer`
+  position: relative;
+  display: flex;
+  padding: 8px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  align-self: stretch;
+  background-color: var(--md-sys-color-surface-container-lowest);
+
+  user-select: text;
+
+  button {
+    display: none;
+
+    position: absolute;
+    right: 2px;
+    border-radius: 8px;
+    top: 50%;
+    transform: translateY(-50%);
+    cursor: pointer;
+  }
+
+  /* hover show button */
+  &:hover {
+    button {
+      display: flex;
+    }
+  }
+`;
+export {
+  t as Dialog,
+  i as DialogContent,
+  p as Footer,
+  d as Img,
+  l as Item,
+  c as Menu,
+  s as MenuWrapper,
+  a as Section
+};
+//# sourceMappingURL=Menu.styled.es.js.map

package/dist/src/components/Menu/MenuComponents/Menu.styled.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.styled.es.js","sources":["../../../../../../src/components/Menu/MenuComponents/Menu.styled.js"],"sourcesContent":["import styled, { keyframes } from 'styled-components'\n\n// DIALOG (CONTAINER)\nexport const Dialog = styled.dialog`\n  position: fixed;\n  margin: 0;\n  inset: 0;\n  top: 42px;\n  width: auto;\n  height: auto;\n  z-index: 1000;\n  border: none;\n  background-color: unset;\n  padding: 0;\n\n  user-select: none;\n\n  overflow: auto;\n  /* remove scroll bar */\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n  &::-webkit-scrollbar {\n    display: none;\n  }\n  padding-bottom: 60px;\n`\n\nconst DialogOpenAnimation = keyframes`\n    from {\n        scale: 0.95;\n        opacity: 0.6;\n    }\n    to {\n        scale: 1;\n        opacity: 1;\n    }\n`\n\nexport const DialogContent = styled.div`\n  display: flex;\n  flex-direction: column;\n  gap: var(--base-gap-large);\n\n  /* position */\n  position: absolute;\n  right: 0;\n  top: 0;\n  width: fit-content;\n  z-index: 30;\n\n  /* animate */\n  animation: ${DialogOpenAnimation} 0.03s ease-in forwards;\n\n  /* transform origin based on alignment */\n  &.right {\n    transform-origin: top right;\n  }\n  &.left {\n    transform-origin: top left;\n  }\n\n  /* add shadow to each item */\n  & > *:not(.sub-menu),\n  .sub-menu menu {\n    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);\n  }\n\n  /* theme support */\n  &.dark {\n    color: var(--md-sys-color-on-surface, #fff);\n    /* override children backgrounds if needed */\n    & > * {\n      color: var(--md-sys-color-on-surface, #fff) !important;\n    }\n  }\n`\n\n// MENULIST\nexport const Section = styled.section`\n  position: relative;\n  display: flex;\n  flex-direction: column;\n\n  padding: 0px;\n  border-radius: 8px;\n  /* colors */\n  background-color: var(--md-sys-color-surface-container-high);\n  color: var(--md-sys-color-on-surface);\n  z-index: 10;\n  overflow: hidden;\n`\nexport const MenuWrapper = styled.div`\n  position: relative;\n  border-radius: 8px;\n\n  /* sub menu */\n  &.sub-menu {\n    position: absolute;\n    bottom: 0;\n\n    border-radius: 8px;\n    width: max-content;\n    z-index: 30;\n\n    & > * {\n      border-radius: 8px;\n      overflow: hidden;\n    }\n  }\n`\n\nexport const Menu = styled.menu`\n  /* reset defaults */\n  display: flex;\n  list-style-type: none;\n  margin-block-start: 0;\n  margin-block-end: 0;\n  margin-inline-start: 0px;\n  margin-inline-end: 0px;\n  padding-inline-start: 0;\n\n  /* custom */\n  flex-direction: column;\n  gap: var(--base-gap-large);\n  padding: 8px;\n\n  /* shrink the padding when compact */\n  &.compact {\n    padding: 4px;\n    gap: var(--base-gap-small);\n  }\n\n  /* colors */\n  background-color: var(--md-sys-color-surface-container-high);\n\n  /* divider */\n  hr {\n    margin: 0;\n    width: 100%;\n    border-style: solid;\n    opacity: 0.5;\n    border-color: var(--md-sys-color-surface-container-highest);\n  }\n`\n\nexport const Item = styled.li`\n  display: flex;\n  padding: 6px 16px 6px 12px;\n  justify-content: flex-start;\n  align-items: center;\n  gap: var(--base-gap-large);\n  align-self: stretch;\n  border-radius: 4px;\n  cursor: pointer;\n  position: relative;\n  user-select: none;\n\n  span {\n    display: inline-block;\n  }\n\n  &:hover {\n    background-color: var(--md-sys-color-surface-container-highest);\n  }\n\n  .more {\n    margin-left: auto;\n  }\n\n  /* highlighted item */\n  &.highlighted {\n    background-color: var(--md-sys-color-secondary-container);\n    &:hover {\n      background-color: var(--md-sys-color-secondary-container-hover);\n    }\n  }\n\n  /* selected item */\n  &.selected {\n    background-color: var(--md-sys-color-primary-container);\n    color: var(--md-sys-color-on-primary-container);\n    &:hover {\n      background-color: var(--md-sys-color-primary-container-hover);\n    }\n  }\n\n  &.notification::after {\n    content: '';\n    position: absolute;\n    right: 0;\n    top: 0;\n    transform: translate(25%, -25%);\n    width: 8px;\n    height: 8px;\n    border-radius: 50%;\n    background-color: var(--md-sys-color-error);\n  }\n\n  &.danger {\n    &,\n    .icon {\n      color: var(--md-sys-color-error);\n    }\n\n    &:hover {\n      background-color: var(--md-sys-color-error-container);\n\n      &,\n      .icon {\n        color: var(--md-sys-color-on-error-container);\n      }\n    }\n  }\n\n  &.dev {\n    &,\n    .icon {\n      color: var(--color-hl-developer);\n    }\n\n    &:hover {\n      background-color: var(--color-hl-developer-container-hover);\n    }\n  }\n\n  &.disabled {\n    user-select: none;\n    pointer-events: none;\n    &,\n    .icon {\n      color: var(--md-sys-color-outline);\n    }\n    background-color: unset;\n  }\n`\n\nexport const Img = styled.img`\n  width: 18px;\n  height: 18px;\n  object-fit: contain;\n`\n\nexport const Footer = styled.footer`\n  position: relative;\n  display: flex;\n  padding: 8px;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  align-self: stretch;\n  background-color: var(--md-sys-color-surface-container-lowest);\n\n  user-select: text;\n\n  button {\n    display: none;\n\n    position: absolute;\n    right: 2px;\n    border-radius: 8px;\n    top: 50%;\n    transform: translateY(-50%);\n    cursor: pointer;\n  }\n\n  /* hover show button */\n  &:hover {\n    button {\n      display: flex;\n    }\n  }\n`\n"],"names":["Dialog","styled","DialogOpenAnimation","keyframes","DialogContent","Section","MenuWrapper","Menu","Item","Img","Footer"],"mappings":";AAGY,MAACA,IAASC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAwBvBC,IAAsBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAWfC,IAAgBH,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAarBC,CAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GA2BrBG,IAAUJ,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAajBK,IAAcL,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAoBrBM,IAAON,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAkCdO,IAAOP,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GA2FdQ,IAAMR,EAAO;AAAA;AAAA;AAAA;AAAA,GAMbS,IAAST,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}

package/dist/src/components/Menu/MenuComponents/MenuContainer2.cjs.js

@@ -0,0 +1,2 @@
+"use strict";const m=require("../../../../_virtual/jsx-runtime.cjs.js"),f=require("react"),h=require("../../../../shared/src/context/MenuContext.cjs.js"),q=require("react-router-dom"),M=require("react-dom"),R=require("clsx"),p=require("./Menu.styled.cjs.js"),j=require("./useMenuPosition.cjs.js"),y=({id:t,target:i,targetId:c="",align:u="right",theme:l="light",children:a,...d})=>{const n=q.useNavigate(),{menuOpen:o,setMenuOpen:x}=h.useMenuContext(),g=o===t,s=()=>{x(!1)},e=r=>{console.log("navigate and close"),s(),r&&n(r)};return g?m.jsxRuntimeExports.jsx(C,{handleClose:s,handleNavigate:e,target:i,targetId:c,align:u,theme:l,children:a,...d}):null},C=({handleClose:t,handleNavigate:i,target:c,targetId:u,align:l="right",children:a,...d})=>{const{position:n,menuRef:o}=j.useMenuPosition(c,u);f.useEffect(()=>{if(n&&o.current){const e=o.current.querySelectorAll("li, button")[0];e==null||e.focus()}},[n]);const x=e=>{e.key==="Escape"&&t()},g=e=>{e.target.id==="dialog"&&t()},s=f.Children.map(a,(e,r)=>f.cloneElement(e,{onClose:t,index:r,navigate:i}));return n?M.createPortal(m.jsxRuntimeExports.jsx(p.Dialog,{open:!0,onClick:g,onKeyDown:x,...d,ref:o,id:"dialog",children:m.jsxRuntimeExports.jsx(p.DialogContent,{id:"content",style:n,className:R(l),children:s})}),document.body):null};module.exports=y;
+//# sourceMappingURL=MenuContainer2.cjs.js.map

package/dist/src/components/Menu/MenuComponents/MenuContainer2.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuContainer2.cjs.js","sources":["../../../../../../src/components/Menu/MenuComponents/MenuContainer2.jsx"],"sourcesContent":["import React, { useEffect } from 'react'\nimport { useMenuContext } from '@shared/context/MenuContext'\nimport { useNavigate } from 'react-router-dom'\nimport { createPortal } from 'react-dom'\nimport clsx from 'clsx'\nimport * as Styled from './Menu.styled'\nimport { useMenuPosition } from './useMenuPosition'\n\nconst MenuContainerV2 = ({\n  id,\n  target,\n  targetId = '',\n  align = 'right',\n  theme = 'light',\n  children,\n  ...props\n}) => {\n  const navigate = useNavigate()\n  const { menuOpen, setMenuOpen } = useMenuContext()\n  const isOpen = menuOpen === id\n\n  const handleClose = () => {\n    setMenuOpen(false)\n  }\n\n  const handleNavigate = (path) => {\n    console.log('navigate and close')\n    handleClose()\n    if (path) navigate(path)\n  }\n\n  if (!isOpen) return null\n\n  return (\n    <MenuInner2\n      {...{\n        handleClose,\n        handleNavigate,\n        target,\n        targetId,\n        align,\n        theme,\n        children,\n        ...props,\n      }}\n    />\n  )\n}\n\nconst MenuInner2 = ({\n  handleClose,\n  handleNavigate,\n  target,\n  targetId,\n  align = 'right',\n  children,\n  ...props\n}) => {\n  const { position, menuRef } = useMenuPosition(target, targetId)\n\n  // Focus management\n  useEffect(() => {\n    if (position && menuRef.current) {\n      const first = menuRef.current.querySelectorAll('li, button')[0]\n      first?.focus()\n    }\n  }, [position])\n\n  // Keyboard handling\n  const handleKeyDown = (e) => {\n    if (e.key === 'Escape') handleClose()\n  }\n\n  // Click outside handling\n  const handleOnClick = (e) => {\n    if (e.target.id === 'dialog') handleClose()\n  }\n\n  // Attach props to children\n  const childrenWithProps = React.Children.map(children, (child, i) => {\n    return React.cloneElement(child, {\n      onClose: handleClose,\n      index: i,\n      navigate: handleNavigate,\n    })\n  })\n\n  if (!position) return null\n\n  return createPortal(\n    <Styled.Dialog\n      open={true}\n      onClick={handleOnClick}\n      onKeyDown={handleKeyDown}\n      {...props}\n      ref={menuRef}\n      id=\"dialog\"\n    >\n      <Styled.DialogContent id=\"content\" style={position} className={clsx(align)}>\n        {childrenWithProps}\n      </Styled.DialogContent>\n    </Styled.Dialog>,\n    document.body,\n  )\n}\n\nexport default MenuContainerV2\n"],"names":["MenuContainerV2","id","target","targetId","align","theme","children","props","navigate","useNavigate","menuOpen","setMenuOpen","useMenuContext","isOpen","handleClose","handleNavigate","path","jsx","MenuInner2","position","menuRef","useMenuPosition","useEffect","first","handleKeyDown","handleOnClick","childrenWithProps","React","child","i","createPortal","Styled.Dialog","Styled.DialogContent","clsx"],"mappings":"ySAQMA,EAAkB,CAAC,CACvB,GAAAC,EACA,OAAAC,EACA,SAAAC,EAAW,GACX,MAAAC,EAAQ,QACR,MAAAC,EAAQ,QACR,SAAAC,EACA,GAAGC,CACL,IAAM,CACJ,MAAMC,EAAWC,EAAAA,YAAY,EACvB,CAAE,SAAAC,EAAU,YAAAC,CAAY,EAAIC,iBAAe,EAC3CC,EAASH,IAAaT,EAEtBa,EAAc,IAAM,CACxBH,EAAY,EAAK,CACnB,EAEMI,EAAkBC,GAAS,CAC/B,QAAQ,IAAI,oBAAoB,EACpBF,EAAA,EACRE,KAAeA,CAAI,CACzB,EAEI,OAACH,EAGHI,EAAA,kBAAA,IAACC,EAAA,CAEG,YAAAJ,EACA,eAAAC,EACA,OAAAb,EACA,SAAAC,EACA,MAAAC,EACA,MAAAC,EACA,SAAAC,EACA,GAAGC,CACL,CACF,EAdkB,IAgBtB,EAEMW,EAAa,CAAC,CAClB,YAAAJ,EACA,eAAAC,EACA,OAAAb,EACA,SAAAC,EACA,MAAAC,EAAQ,QACR,SAAAE,EACA,GAAGC,CACL,IAAM,CACJ,KAAM,CAAE,SAAAY,EAAU,QAAAC,CAAA,EAAYC,EAAAA,gBAAgBnB,EAAQC,CAAQ,EAG9DmB,EAAAA,UAAU,IAAM,CACV,GAAAH,GAAYC,EAAQ,QAAS,CAC/B,MAAMG,EAAQH,EAAQ,QAAQ,iBAAiB,YAAY,EAAE,CAAC,EAC9DG,GAAA,MAAAA,EAAO,OAAM,CACf,EACC,CAACJ,CAAQ,CAAC,EAGP,MAAAK,EAAiB,GAAM,CACvB,EAAE,MAAQ,UAAsBV,EAAA,CACtC,EAGMW,EAAiB,GAAM,CACvB,EAAE,OAAO,KAAO,UAAsBX,EAAA,CAC5C,EAGMY,EAAoBC,EAAM,SAAS,IAAIrB,EAAU,CAACsB,EAAOC,IACtDF,EAAM,aAAaC,EAAO,CAC/B,QAASd,EACT,MAAOe,EACP,SAAUd,CAAA,CACX,CACF,EAEG,OAACI,EAEEW,EAAA,aACLb,EAAA,kBAAA,IAACc,EAAO,OAAP,CACC,KAAM,GACN,QAASN,EACT,UAAWD,EACV,GAAGjB,EACJ,IAAKa,EACL,GAAG,SAEH,SAACH,EAAAA,kBAAAA,IAAAe,EAAAA,cAAA,CAAqB,GAAG,UAAU,MAAOb,EAAU,UAAWc,EAAK7B,CAAK,EACtE,SACHsB,CAAA,CAAA,CAAA,CACF,EACA,SAAS,IACX,EAhBsB,IAiBxB"}

package/dist/src/components/Menu/MenuComponents/MenuContainer2.es.js

@@ -0,0 +1,80 @@
+import { j as p } from "../../../../_virtual/jsx-runtime.es.js";
+import g, { useEffect as h } from "react";
+import { useMenuContext as x } from "../../../../shared/src/context/MenuContext.es.js";
+import { useNavigate as y } from "react-router-dom";
+import { createPortal as C } from "react-dom";
+import j from "clsx";
+import { Dialog as v, DialogContent as M } from "./Menu.styled.es.js";
+import { useMenuPosition as D } from "./useMenuPosition.es.js";
+const _ = ({
+  id: t,
+  target: s,
+  targetId: l = "",
+  align: c = "right",
+  theme: a = "light",
+  children: u,
+  ...m
+}) => {
+  const n = y(), { menuOpen: o, setMenuOpen: f } = x(), d = o === t, r = () => {
+    f(!1);
+  }, e = (i) => {
+    console.log("navigate and close"), r(), i && n(i);
+  };
+  return d ? /* @__PURE__ */ p.jsx(
+    E,
+    {
+      handleClose: r,
+      handleNavigate: e,
+      target: s,
+      targetId: l,
+      align: c,
+      theme: a,
+      children: u,
+      ...m
+    }
+  ) : null;
+}, E = ({
+  handleClose: t,
+  handleNavigate: s,
+  target: l,
+  targetId: c,
+  align: a = "right",
+  children: u,
+  ...m
+}) => {
+  const { position: n, menuRef: o } = D(l, c);
+  h(() => {
+    if (n && o.current) {
+      const e = o.current.querySelectorAll("li, button")[0];
+      e == null || e.focus();
+    }
+  }, [n]);
+  const f = (e) => {
+    e.key === "Escape" && t();
+  }, d = (e) => {
+    e.target.id === "dialog" && t();
+  }, r = g.Children.map(u, (e, i) => g.cloneElement(e, {
+    onClose: t,
+    index: i,
+    navigate: s
+  }));
+  return n ? C(
+    /* @__PURE__ */ p.jsx(
+      v,
+      {
+        open: !0,
+        onClick: d,
+        onKeyDown: f,
+        ...m,
+        ref: o,
+        id: "dialog",
+        children: /* @__PURE__ */ p.jsx(M, { id: "content", style: n, className: j(a), children: r })
+      }
+    ),
+    document.body
+  ) : null;
+};
+export {
+  _ as default
+};
+//# sourceMappingURL=MenuContainer2.es.js.map

package/dist/src/components/Menu/MenuComponents/MenuContainer2.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuContainer2.es.js","sources":["../../../../../../src/components/Menu/MenuComponents/MenuContainer2.jsx"],"sourcesContent":["import React, { useEffect } from 'react'\nimport { useMenuContext } from '@shared/context/MenuContext'\nimport { useNavigate } from 'react-router-dom'\nimport { createPortal } from 'react-dom'\nimport clsx from 'clsx'\nimport * as Styled from './Menu.styled'\nimport { useMenuPosition } from './useMenuPosition'\n\nconst MenuContainerV2 = ({\n  id,\n  target,\n  targetId = '',\n  align = 'right',\n  theme = 'light',\n  children,\n  ...props\n}) => {\n  const navigate = useNavigate()\n  const { menuOpen, setMenuOpen } = useMenuContext()\n  const isOpen = menuOpen === id\n\n  const handleClose = () => {\n    setMenuOpen(false)\n  }\n\n  const handleNavigate = (path) => {\n    console.log('navigate and close')\n    handleClose()\n    if (path) navigate(path)\n  }\n\n  if (!isOpen) return null\n\n  return (\n    <MenuInner2\n      {...{\n        handleClose,\n        handleNavigate,\n        target,\n        targetId,\n        align,\n        theme,\n        children,\n        ...props,\n      }}\n    />\n  )\n}\n\nconst MenuInner2 = ({\n  handleClose,\n  handleNavigate,\n  target,\n  targetId,\n  align = 'right',\n  children,\n  ...props\n}) => {\n  const { position, menuRef } = useMenuPosition(target, targetId)\n\n  // Focus management\n  useEffect(() => {\n    if (position && menuRef.current) {\n      const first = menuRef.current.querySelectorAll('li, button')[0]\n      first?.focus()\n    }\n  }, [position])\n\n  // Keyboard handling\n  const handleKeyDown = (e) => {\n    if (e.key === 'Escape') handleClose()\n  }\n\n  // Click outside handling\n  const handleOnClick = (e) => {\n    if (e.target.id === 'dialog') handleClose()\n  }\n\n  // Attach props to children\n  const childrenWithProps = React.Children.map(children, (child, i) => {\n    return React.cloneElement(child, {\n      onClose: handleClose,\n      index: i,\n      navigate: handleNavigate,\n    })\n  })\n\n  if (!position) return null\n\n  return createPortal(\n    <Styled.Dialog\n      open={true}\n      onClick={handleOnClick}\n      onKeyDown={handleKeyDown}\n      {...props}\n      ref={menuRef}\n      id=\"dialog\"\n    >\n      <Styled.DialogContent id=\"content\" style={position} className={clsx(align)}>\n        {childrenWithProps}\n      </Styled.DialogContent>\n    </Styled.Dialog>,\n    document.body,\n  )\n}\n\nexport default MenuContainerV2\n"],"names":["MenuContainerV2","id","target","targetId","align","theme","children","props","navigate","useNavigate","menuOpen","setMenuOpen","useMenuContext","isOpen","handleClose","handleNavigate","path","jsx","MenuInner2","position","menuRef","useMenuPosition","useEffect","first","handleKeyDown","handleOnClick","childrenWithProps","React","child","createPortal","Styled.Dialog","Styled.DialogContent","clsx"],"mappings":";;;;;;;;AAQA,MAAMA,IAAkB,CAAC;AAAA,EACvB,IAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,OAAAC,IAAQ;AAAA,EACR,OAAAC,IAAQ;AAAA,EACR,UAAAC;AAAA,EACA,GAAGC;AACL,MAAM;AACJ,QAAMC,IAAWC,EAAY,GACvB,EAAE,UAAAC,GAAU,aAAAC,EAAY,IAAIC,EAAe,GAC3CC,IAASH,MAAaT,GAEtBa,IAAc,MAAM;AACxB,IAAAH,EAAY,EAAK;AAAA,EACnB,GAEMI,IAAiB,CAACC,MAAS;AAC/B,YAAQ,IAAI,oBAAoB,GACpBF,EAAA,GACRE,OAAeA,CAAI;AAAA,EACzB;AAEI,SAACH,IAGHI,gBAAAA,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MAEG,aAAAJ;AAAA,MACA,gBAAAC;AAAA,MACA,QAAAb;AAAA,MACA,UAAAC;AAAA,MACA,OAAAC;AAAA,MACA,OAAAC;AAAA,MACA,UAAAC;AAAA,MACA,GAAGC;AAAA,IACL;AAAA,EACF,IAdkB;AAgBtB,GAEMW,IAAa,CAAC;AAAA,EAClB,aAAAJ;AAAA,EACA,gBAAAC;AAAA,EACA,QAAAb;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,UAAAE;AAAA,EACA,GAAGC;AACL,MAAM;AACJ,QAAM,EAAE,UAAAY,GAAU,SAAAC,EAAA,IAAYC,EAAgBnB,GAAQC,CAAQ;AAG9D,EAAAmB,EAAU,MAAM;AACV,QAAAH,KAAYC,EAAQ,SAAS;AAC/B,YAAMG,IAAQH,EAAQ,QAAQ,iBAAiB,YAAY,EAAE,CAAC;AAC9D,MAAAG,KAAA,QAAAA,EAAO;AAAA,IAAM;AAAA,EACf,GACC,CAACJ,CAAQ,CAAC;AAGP,QAAAK,IAAgB,CAAC,MAAM;AACvB,IAAA,EAAE,QAAQ,YAAsBV,EAAA;AAAA,EACtC,GAGMW,IAAgB,CAAC,MAAM;AAC3B,IAAI,EAAE,OAAO,OAAO,YAAsBX,EAAA;AAAA,EAC5C,GAGMY,IAAoBC,EAAM,SAAS,IAAIrB,GAAU,CAACsB,GAAO,MACtDD,EAAM,aAAaC,GAAO;AAAA,IAC/B,SAASd;AAAA,IACT,OAAO;AAAA,IACP,UAAUC;AAAA,EAAA,CACX,CACF;AAEG,SAACI,IAEEU;AAAA,IACLZ,gBAAAA,EAAA;AAAA,MAACa;AAAAA,MAAA;AAAA,QACC,MAAM;AAAA,QACN,SAASL;AAAA,QACT,WAAWD;AAAA,QACV,GAAGjB;AAAA,QACJ,KAAKa;AAAA,QACL,IAAG;AAAA,QAEH,UAACH,gBAAAA,EAAAA,IAAAc,GAAA,EAAqB,IAAG,WAAU,OAAOZ,GAAU,WAAWa,EAAK5B,CAAK,GACtE,UACHsB,EAAA,CAAA;AAAA,MAAA;AAAA,IACF;AAAA,IACA,SAAS;AAAA,EACX,IAhBsB;AAiBxB;"}

package/dist/src/components/Menu/MenuComponents/MenuItem.cjs.js

@@ -0,0 +1,2 @@
+"use strict";const e=require("../../../../_virtual/jsx-runtime.cjs.js"),s=require("@ynput/ayon-react-components"),f=require("react"),a=require("./Menu.styled.cjs.js"),M=require("lodash"),N=require("react-router-dom"),w=require("clsx"),m=f.forwardRef(({label:t,icon:r,img:n,highlighted:j,notification:l,selected:R,danger:p,items:d=[],className:h,isLink:o,isDev:g,shortcut:i,disabled:q,...c},E)=>{const x=M.isArray(t)?t:[t],u=e.jsxRuntimeExports.jsxs(a.Item,{ref:E,className:w("menu-item",{highlighted:j,selected:R,notification:l,danger:p,dev:g,disabled:q},h),...c,label:x.join(", "),children:[r&&e.jsxRuntimeExports.jsx(s.Icon,{icon:r}),n&&e.jsxRuntimeExports.jsx(a.Img,{src:n,alt:`${t} icon`}),x.map((I,y)=>e.jsxRuntimeExports.jsx("span",{children:I},y)),i&&e.jsxRuntimeExports.jsx(s.ShortcutTag,{align:"right",children:i}),!!d.length&&e.jsxRuntimeExports.jsx(s.Icon,{icon:"arrow_right",className:"more"})]});return o?e.jsxRuntimeExports.jsx(N.Link,{to:o,target:c.target,children:u}):u});m.displayName="MenuItem";module.exports=m;
+//# sourceMappingURL=MenuItem.cjs.js.map

package/dist/src/components/Menu/MenuComponents/MenuItem.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuItem.cjs.js","sources":["../../../../../../src/components/Menu/MenuComponents/MenuItem.jsx"],"sourcesContent":["import { Icon, ShortcutTag } from '@ynput/ayon-react-components'\nimport React, { forwardRef } from 'react'\nimport * as Styled from './Menu.styled'\nimport { isArray } from 'lodash'\nimport { Link } from 'react-router-dom'\nimport clsx from 'clsx'\n\nconst MenuItem = forwardRef(\n  (\n    {\n      label,\n      icon,\n      img,\n      highlighted,\n      notification,\n      selected,\n      danger,\n      items = [],\n      className,\n      isLink,\n      isDev,\n      shortcut,\n      disabled,\n      ...props\n    },\n    ref,\n  ) => {\n    const labelsArray = isArray(label) ? label : [label]\n\n    const Item = (\n      <Styled.Item\n        ref={ref}\n        className={clsx(\n          'menu-item',\n          {\n            highlighted: highlighted,\n            selected: selected,\n            notification: notification,\n            danger: danger,\n            dev: isDev,\n            disabled: disabled,\n          },\n          className,\n        )}\n        {...props}\n        label={labelsArray.join(', ')}\n      >\n        {icon && <Icon icon={icon} />}\n        {img && <Styled.Img src={img} alt={`${label} icon`} />}\n        {labelsArray.map((label, index) => (\n          <span key={index}>{label}</span>\n        ))}\n        {shortcut && <ShortcutTag align={'right'}>{shortcut}</ShortcutTag>}\n        {!!items.length && <Icon icon=\"arrow_right\" className=\"more\" />}\n      </Styled.Item>\n    )\n\n    if (isLink) {\n      return (\n        <Link to={isLink} target={props.target}>\n          {Item}\n        </Link>\n      )\n    } else {\n      return Item\n    }\n  },\n)\n\nMenuItem.displayName = 'MenuItem'\n\nexport default MenuItem\n"],"names":["MenuItem","forwardRef","label","icon","img","highlighted","notification","selected","danger","items","className","isLink","isDev","shortcut","disabled","props","ref","labelsArray","isArray","Item","jsxs","Styled.Item","clsx","jsx","Icon","Styled.Img","index","ShortcutTag","Link"],"mappings":"2OAOMA,EAAWC,EAAA,WACf,CACE,CACE,MAAAC,EACA,KAAAC,EACA,IAAAC,EACA,YAAAC,EACA,aAAAC,EACA,SAAAC,EACA,OAAAC,EACA,MAAAC,EAAQ,CAAC,EACT,UAAAC,EACA,OAAAC,EACA,MAAAC,EACA,SAAAC,EACA,SAAAC,EACA,GAAGC,GAELC,IACG,CACH,MAAMC,EAAcC,EAAAA,QAAQhB,CAAK,EAAIA,EAAQ,CAACA,CAAK,EAE7CiB,EACJC,EAAA,kBAAA,KAACC,EAAO,KAAP,CACC,IAAAL,EACA,UAAWM,EACT,YACA,CACE,YAAAjB,EACA,SAAAE,EACA,aAAAD,EACA,OAAAE,EACA,IAAKI,EACL,SAAAE,CACF,EACAJ,CACF,EACC,GAAGK,EACJ,MAAOE,EAAY,KAAK,IAAI,EAE3B,SAAA,CAAQd,GAAAoB,EAAA,kBAAA,IAACC,QAAK,KAAArB,CAAY,CAAA,EAC1BC,GAAQmB,EAAA,kBAAA,IAAAE,MAAA,CAAW,IAAKrB,EAAK,IAAK,GAAGF,CAAK,QAAS,EACnDe,EAAY,IAAI,CAACf,EAAOwB,4BACtB,OAAkB,CAAA,SAAAxB,CAAR,EAAAwB,CAAc,CAC1B,EACAb,GAAYU,EAAA,kBAAA,IAACI,cAAY,CAAA,MAAO,QAAU,SAASd,EAAA,EACnD,CAAC,CAACJ,EAAM,gCAAWe,EAAAA,KAAK,CAAA,KAAK,cAAc,UAAU,MAAO,CAAA,CAAA,CAAA,CAC/D,EAGF,OAAIb,0BAECiB,EAAAA,KAAK,CAAA,GAAIjB,EAAQ,OAAQI,EAAM,OAC7B,SACHI,EAAA,EAGKA,CACT,CAEJ,EAEAnB,EAAS,YAAc"}