acinguiux-ds-react-framework 0.0.1

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

@@ -0,0 +1,130 @@
+import { css } from 'styled-components';
+import { MENU_CLASS } from 'acinguiux-ds-react-base';
+const commonMotion = css `
+  animation-duration: 0.3s;
+  animation-fill-mode: both;
+`;
+export const motionStyle = css `
+  .${MENU_CLASS} {
+    &-collapse {
+      overflow: hidden;
+      transition: height 0.3s ease-in-out, opacity 0.3s ease-in-out;
+    }
+
+    &-collapse-enter,
+    &-collapse-appear {
+      opacity: 0;
+    }
+
+    &-collapse-leave {
+      opacity: 1;
+    }
+  }
+
+  &.${MENU_CLASS} {
+    &-slide-up-enter,
+    &-slide-up-appear {
+      ${commonMotion};
+      opacity: 0;
+      transform: scaleY(0);
+      animation-timing-function: ease-in-out;
+      animation-play-state: paused;
+    }
+
+    &-slide-up-leave {
+      ${commonMotion};
+      opacity: 1;
+      transform: scaleY(1);
+      animation-timing-function: ease-in-out;
+      animation-play-state: paused;
+    }
+
+    &-slide-up-enter-active,
+    &-slide-up-appear-active {
+      animation-name: slide-up-in;
+      animation-play-state: running;
+    }
+
+    &-slide-up-leave-active {
+      animation-name: slide-up-out;
+      animation-play-state: running;
+    }
+
+    @keyframes slide-up-in {
+      0% {
+        opacity: 0;
+        transform: scaleY(0.8);
+      }
+
+      100% {
+        opacity: 1;
+        transform: scaleY(1);
+      }
+    }
+
+    @keyframes slide-up-out {
+      0% {
+        opacity: 1;
+        transform: scaleY(1);
+      }
+
+      100% {
+        opacity: 0;
+        transform: scaleY(0.8);
+      }
+    }
+
+    &-zoom-enter,
+    &-zoom-appear {
+      ${commonMotion};
+      transform-origin: 0% 0%;
+      transform: scale(0);
+      opacity: 0;
+      animation-timing-function: ease-in-out;
+      animation-play-state: paused;
+    }
+
+    &-zoom-leave {
+      ${commonMotion};
+      transform-origin: 0% 0%;
+      animation-timing-function: ease-in-out;
+      animation-play-state: paused;
+    }
+
+    &-zoom-enter-active,
+    &-zoom-appear-active {
+      animation-name: open-zoom-in;
+      animation-play-state: running;
+    }
+
+    &-zoom-leave-active {
+      animation-name: open-zoom-out;
+      animation-play-state: running;
+    }
+
+    @keyframes open-zoom-in {
+      0% {
+        opacity: 0;
+        transform: scale(0, 0);
+      }
+
+      100% {
+        opacity: 1;
+        transform: scale(1, 1);
+      }
+    }
+
+    @keyframes open-zoom-out {
+      0% {
+        opacity: 1;
+        transform: scale(1, 1);
+      }
+
+      100% {
+        opacity: 0;
+        transform: scale(0, 0);
+      }
+    }
+  }
+`;
+//# sourceMappingURL=motion.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"motion.styles.js","sourceRoot":"","sources":["../../../../../src/components/Menu/styles/motion.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAErD,MAAM,YAAY,GAAG,GAAG,CAAA;;;CAGvB,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAA;KACzB,UAAU;;;;;;;;;;;;;;;;MAgBT,UAAU;;;QAGR,YAAY;;;;;;;;QAQZ,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QA4CZ,YAAY;;;;;;;;;QASZ,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyCnB,CAAC","sourcesContent":["import { css } from 'styled-components';\nimport { MENU_CLASS } from 'acinguiux-ds-react-base';\n\nconst commonMotion = css`\n  animation-duration: 0.3s;\n  animation-fill-mode: both;\n`;\n\nexport const motionStyle = css`\n  .${MENU_CLASS} {\n    &-collapse {\n      overflow: hidden;\n      transition: height 0.3s ease-in-out, opacity 0.3s ease-in-out;\n    }\n\n    &-collapse-enter,\n    &-collapse-appear {\n      opacity: 0;\n    }\n\n    &-collapse-leave {\n      opacity: 1;\n    }\n  }\n\n  &.${MENU_CLASS} {\n    &-slide-up-enter,\n    &-slide-up-appear {\n      ${commonMotion};\n      opacity: 0;\n      transform: scaleY(0);\n      animation-timing-function: ease-in-out;\n      animation-play-state: paused;\n    }\n\n    &-slide-up-leave {\n      ${commonMotion};\n      opacity: 1;\n      transform: scaleY(1);\n      animation-timing-function: ease-in-out;\n      animation-play-state: paused;\n    }\n\n    &-slide-up-enter-active,\n    &-slide-up-appear-active {\n      animation-name: slide-up-in;\n      animation-play-state: running;\n    }\n\n    &-slide-up-leave-active {\n      animation-name: slide-up-out;\n      animation-play-state: running;\n    }\n\n    @keyframes slide-up-in {\n      0% {\n        opacity: 0;\n        transform: scaleY(0.8);\n      }\n\n      100% {\n        opacity: 1;\n        transform: scaleY(1);\n      }\n    }\n\n    @keyframes slide-up-out {\n      0% {\n        opacity: 1;\n        transform: scaleY(1);\n      }\n\n      100% {\n        opacity: 0;\n        transform: scaleY(0.8);\n      }\n    }\n\n    &-zoom-enter,\n    &-zoom-appear {\n      ${commonMotion};\n      transform-origin: 0% 0%;\n      transform: scale(0);\n      opacity: 0;\n      animation-timing-function: ease-in-out;\n      animation-play-state: paused;\n    }\n\n    &-zoom-leave {\n      ${commonMotion};\n      transform-origin: 0% 0%;\n      animation-timing-function: ease-in-out;\n      animation-play-state: paused;\n    }\n\n    &-zoom-enter-active,\n    &-zoom-appear-active {\n      animation-name: open-zoom-in;\n      animation-play-state: running;\n    }\n\n    &-zoom-leave-active {\n      animation-name: open-zoom-out;\n      animation-play-state: running;\n    }\n\n    @keyframes open-zoom-in {\n      0% {\n        opacity: 0;\n        transform: scale(0, 0);\n      }\n\n      100% {\n        opacity: 1;\n        transform: scale(1, 1);\n      }\n    }\n\n    @keyframes open-zoom-out {\n      0% {\n        opacity: 1;\n        transform: scale(1, 1);\n      }\n\n      100% {\n        opacity: 0;\n        transform: scale(0, 0);\n      }\n    }\n  }\n`;\n"]}

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

@@ -0,0 +1,3 @@
+import { StyledMenuProps } from '../Menu.types';
+export declare const subMenuStyle: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<StyledMenuProps, import("styled-components").DefaultTheme>>;
+//# sourceMappingURL=subMenu.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"subMenu.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/Menu/styles/subMenu.styles.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAGhD,eAAO,MAAM,YAAY,4JAyMxB,CAAC"}

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

@@ -0,0 +1,206 @@
+import { css } from 'styled-components';
+import { MENU_CLASS, ZIndexes } from 'acinguiux-ds-react-base';
+import { menuConsts } from '../Menu.consts';
+import { indicatorBottomStyle, indicatorPositionStyle } from './indicator.styles';
+export const subMenuStyle = css `
+  ${({ theme, size, inlineCollapsed }) => {
+    const offset = 4;
+    const padding = `${menuConsts[size].padding - offset}px`;
+    const paddingOffset = `${offset}px`;
+    const subMenuIndent = `${menuConsts[size].indent}px`;
+    const iconSize = `${menuConsts[size].iconSize}px`;
+    const iconPadding = `${menuConsts[size].padding - offset - 2}px`;
+    const gap = `${menuConsts[size].gap}px`;
+    return css `
+      .${MENU_CLASS}-submenu {
+        cursor: pointer;
+        display: flex;
+        flex-direction: column;
+
+        /* Disabled */
+        &.${MENU_CLASS}-submenu-disabled {
+          &, .${MENU_CLASS}-label {
+            color: ${theme.text.onSurface.inactive};
+            cursor: not-allowed;
+          }
+        }
+
+        .${MENU_CLASS}-submenu-title {
+          position: relative;
+          padding: ${paddingOffset};
+          display: flex;
+          align-items: stretch;
+          flex: 1 1 0;
+          min-width: 0;
+
+          &:focus-visible {
+            outline: none;
+            position: relative;
+
+            .${MENU_CLASS}-submenu-title-content {
+              outline: 3px solid ${theme.focus.medium};
+            }
+          }
+        }
+
+        .${MENU_CLASS}-submenu-title-content {
+          padding: ${padding};
+          margin: 0 -${padding};
+          display: flex;
+          flex: 1 1 0;
+          min-width: 0;
+          justify-content: space-between;
+          align-items: center;
+          gap: ${gap};
+          border-radius: 2px;
+          transition: background-color 0.3s ease-out;
+        }
+
+        .${MENU_CLASS}-submenu-expand-icon {
+          width: ${iconSize};
+          height: ${iconSize};
+          flex-shrink: 0;
+          transition: transform 0.2s ease-in-out;
+          margin: -10px 0;
+
+          ${inlineCollapsed &&
+        css `
+            display: none;
+          `}
+        }
+
+        &.${MENU_CLASS}-submenu-active:not(.${MENU_CLASS}-submenu-selected) > .${MENU_CLASS}-submenu-title {
+          &:focus-visible {
+            > .${MENU_CLASS}-submenu-title-content {
+              background-color: transparent;
+            }
+          }
+
+          > .${MENU_CLASS}-submenu-title-content {
+            background-color: ${theme.focus.extraSubtle};
+          }
+        }
+      }
+
+      /* Inline and vertical */
+      &.${MENU_CLASS}-inline, &.${MENU_CLASS}-vertical .${MENU_CLASS}-submenu {
+        .${MENU_CLASS}-submenu-title {
+          padding-left: ${subMenuIndent};
+          padding-right: ${subMenuIndent};
+        }
+      }
+
+      /* Inline */
+      &.${MENU_CLASS}-inline {
+        .${MENU_CLASS}-submenu.${MENU_CLASS}-submenu-open
+          > .${MENU_CLASS}-submenu-title
+          > .${MENU_CLASS}-submenu-title-content
+          > .${MENU_CLASS}-submenu-expand-icon {
+          transform: rotate(180deg);
+        }
+
+        /* Lowest level */
+        .${MENU_CLASS}-submenu-selected:not(.${MENU_CLASS}-submenu-open) .${MENU_CLASS}-submenu-title {
+          background-color: transparent;
+
+          &::after {
+            ${indicatorPositionStyle}
+          }
+        }
+      }
+
+      /* Vertical */
+      &.${MENU_CLASS}-vertical .${MENU_CLASS}-submenu {
+        .${MENU_CLASS}-submenu-expand-icon {
+          transform: rotate(-90deg);
+        }
+
+        &.${MENU_CLASS}-submenu-selected > .${MENU_CLASS}-submenu-title {
+          background-color: transparent;
+
+          &::after {
+            ${indicatorPositionStyle}
+          }
+        }
+
+        .${MENU_CLASS}-item-group .${MENU_CLASS}-item-group-list {
+          display: flex;
+          flex-direction: row;
+        }
+      }
+
+      /* Horizontal */
+      &.${MENU_CLASS}-horizontal .${MENU_CLASS}-submenu {
+        display: flex;
+        flex-direction: row;
+        align-items: stretch;
+
+        .${MENU_CLASS}-submenu-title {
+          padding-left: ${subMenuIndent};
+          padding-right: ${subMenuIndent};
+        }
+
+        &.${MENU_CLASS}-submenu-selected > .${MENU_CLASS}-submenu-title {
+          background-color: ${theme.background.section};
+
+          &::after {
+            ${indicatorBottomStyle}
+          }
+        }
+
+        &.${MENU_CLASS}-overflow-item-rest {
+          .${MENU_CLASS}-submenu-title {
+            padding-left: 8px;
+            padding-right: 8px;
+          }
+
+          .${MENU_CLASS}-submenu-title-content {
+            padding: ${iconPadding};
+          }
+
+          .${MENU_CLASS}-submenu-rest-icon {
+            width: ${iconSize};
+            height: ${iconSize};
+          }
+        }
+      }
+
+      /* Popup */
+      &.${MENU_CLASS}-submenu {
+        &.${MENU_CLASS}-submenu-popup {
+          z-index: ${ZIndexes.MENU};
+          min-width: 300px;
+          position: absolute;
+          transform-origin: 0 0;
+          background-color: ${theme.background.raised};
+          box-shadow: ${theme.elevation.level2};
+          border-radius: 4px;
+        }
+
+        &.${MENU_CLASS}-submenu-hidden {
+          display: none;
+        }
+
+        /* Vertical and horizontal */
+        .${MENU_CLASS}-vertical {
+          width: 100%;
+          max-width: 300px;
+
+          .${MENU_CLASS}-submenu-title {
+            padding-left: ${subMenuIndent};
+            padding-right: ${subMenuIndent};
+          }
+
+          .${MENU_CLASS}-submenu-selected > .${MENU_CLASS}-submenu-title:after {
+            ${indicatorPositionStyle}
+          }
+
+          .${MENU_CLASS}-submenu-expand-icon {
+            transform: rotate(-90deg);
+          }
+        }
+      }
+    `;
+}}
+`;
+//# sourceMappingURL=subMenu.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"subMenu.styles.js","sourceRoot":"","sources":["../../../../../src/components/Menu/styles/subMenu.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAE/D,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAE5C,OAAO,EAAE,oBAAoB,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAElF,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAiB;IAC5C,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,eAAe,EAAE,EAAE,EAAE;IACrC,MAAM,MAAM,GAAG,CAAC,CAAC;IACjB,MAAM,OAAO,GAAG,GAAG,UAAU,CAAC,IAAI,CAAC,CAAC,OAAO,GAAG,MAAM,IAAI,CAAC;IACzD,MAAM,aAAa,GAAG,GAAG,MAAM,IAAI,CAAC;IACpC,MAAM,aAAa,GAAG,GAAG,UAAU,CAAC,IAAI,CAAC,CAAC,MAAM,IAAI,CAAC;IACrD,MAAM,QAAQ,GAAG,GAAG,UAAU,CAAC,IAAI,CAAC,CAAC,QAAQ,IAAI,CAAC;IAClD,MAAM,WAAW,GAAG,GAAG,UAAU,CAAC,IAAI,CAAC,CAAC,OAAO,GAAG,MAAM,GAAG,CAAC,IAAI,CAAC;IACjE,MAAM,GAAG,GAAG,GAAG,UAAU,CAAC,IAAI,CAAC,CAAC,GAAG,IAAI,CAAC;IAExC,OAAO,GAAG,CAAA;SACL,UAAU;;;;;;YAMP,UAAU;gBACN,UAAU;qBACL,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ;;;;;WAKvC,UAAU;;qBAEA,aAAa;;;;;;;;;;eAUnB,UAAU;mCACU,KAAK,CAAC,KAAK,CAAC,MAAM;;;;;WAK1C,UAAU;qBACA,OAAO;uBACL,OAAO;;;;;;iBAMb,GAAG;;;;;WAKT,UAAU;mBACF,QAAQ;oBACP,QAAQ;;;;;YAKhB,eAAe;QACjB,GAAG,CAAA;;WAEF;;;YAGC,UAAU,wBAAwB,UAAU,yBAAyB,UAAU;;iBAE1E,UAAU;;;;;eAKZ,UAAU;gCACO,KAAK,CAAC,KAAK,CAAC,WAAW;;;;;;UAM7C,UAAU,cAAc,UAAU,cAAc,UAAU;WACzD,UAAU;0BACK,aAAa;2BACZ,aAAa;;;;;UAK9B,UAAU;WACT,UAAU,YAAY,UAAU;eAC5B,UAAU;eACV,UAAU;eACV,UAAU;;;;;WAKd,UAAU,0BAA0B,UAAU,mBAAmB,UAAU;;;;cAIxE,sBAAsB;;;;;;UAM1B,UAAU,cAAc,UAAU;WACjC,UAAU;;;;YAIT,UAAU,wBAAwB,UAAU;;;;cAI1C,sBAAsB;;;;WAIzB,UAAU,gBAAgB,UAAU;;;;;;;UAOrC,UAAU,gBAAgB,UAAU;;;;;WAKnC,UAAU;0BACK,aAAa;2BACZ,aAAa;;;YAG5B,UAAU,wBAAwB,UAAU;8BAC1B,KAAK,CAAC,UAAU,CAAC,OAAO;;;cAGxC,oBAAoB;;;;YAItB,UAAU;aACT,UAAU;;;;;aAKV,UAAU;uBACA,WAAW;;;aAGrB,UAAU;qBACF,QAAQ;sBACP,QAAQ;;;;;;UAMpB,UAAU;YACR,UAAU;qBACD,QAAQ,CAAC,IAAI;;;;8BAIJ,KAAK,CAAC,UAAU,CAAC,MAAM;wBAC7B,KAAK,CAAC,SAAS,CAAC,MAAM;;;;YAIlC,UAAU;;;;;WAKX,UAAU;;;;aAIR,UAAU;4BACK,aAAa;6BACZ,aAAa;;;aAG7B,UAAU,wBAAwB,UAAU;cAC3C,sBAAsB;;;aAGvB,UAAU;;;;;KAKlB,CAAC;AACJ,CAAC;CACF,CAAC","sourcesContent":["import { css } from 'styled-components';\nimport { MENU_CLASS, ZIndexes } from 'acinguiux-ds-react-base';\n\nimport { menuConsts } from '../Menu.consts';\nimport { StyledMenuProps } from '../Menu.types';\nimport { indicatorBottomStyle, indicatorPositionStyle } from './indicator.styles';\n\nexport const subMenuStyle = css<StyledMenuProps>`\n  ${({ theme, size, inlineCollapsed }) => {\n    const offset = 4;\n    const padding = `${menuConsts[size].padding - offset}px`;\n    const paddingOffset = `${offset}px`;\n    const subMenuIndent = `${menuConsts[size].indent}px`;\n    const iconSize = `${menuConsts[size].iconSize}px`;\n    const iconPadding = `${menuConsts[size].padding - offset - 2}px`;\n    const gap = `${menuConsts[size].gap}px`;\n\n    return css`\n      .${MENU_CLASS}-submenu {\n        cursor: pointer;\n        display: flex;\n        flex-direction: column;\n\n        /* Disabled */\n        &.${MENU_CLASS}-submenu-disabled {\n          &, .${MENU_CLASS}-label {\n            color: ${theme.text.onSurface.inactive};\n            cursor: not-allowed;\n          }\n        }\n\n        .${MENU_CLASS}-submenu-title {\n          position: relative;\n          padding: ${paddingOffset};\n          display: flex;\n          align-items: stretch;\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              outline: 3px solid ${theme.focus.medium};\n            }\n          }\n        }\n\n        .${MENU_CLASS}-submenu-title-content {\n          padding: ${padding};\n          margin: 0 -${padding};\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: 2px;\n          transition: background-color 0.3s ease-out;\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        &.${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: ${theme.focus.extraSubtle};\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: ${subMenuIndent};\n          padding-right: ${subMenuIndent};\n        }\n      }\n\n      /* Inline */\n      &.${MENU_CLASS}-inline {\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) .${MENU_CLASS}-submenu-title {\n          background-color: transparent;\n\n          &::after {\n            ${indicatorPositionStyle}\n          }\n        }\n      }\n\n      /* Vertical */\n      &.${MENU_CLASS}-vertical .${MENU_CLASS}-submenu {\n        .${MENU_CLASS}-submenu-expand-icon {\n          transform: rotate(-90deg);\n        }\n\n        &.${MENU_CLASS}-submenu-selected > .${MENU_CLASS}-submenu-title {\n          background-color: transparent;\n\n          &::after {\n            ${indicatorPositionStyle}\n          }\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-left: ${subMenuIndent};\n          padding-right: ${subMenuIndent};\n        }\n\n        &.${MENU_CLASS}-submenu-selected > .${MENU_CLASS}-submenu-title {\n          background-color: ${theme.background.section};\n\n          &::after {\n            ${indicatorBottomStyle}\n          }\n        }\n\n        &.${MENU_CLASS}-overflow-item-rest {\n          .${MENU_CLASS}-submenu-title {\n            padding-left: 8px;\n            padding-right: 8px;\n          }\n\n          .${MENU_CLASS}-submenu-title-content {\n            padding: ${iconPadding};\n          }\n\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          min-width: 300px;\n          position: absolute;\n          transform-origin: 0 0;\n          background-color: ${theme.background.raised};\n          box-shadow: ${theme.elevation.level2};\n          border-radius: 4px;\n        }\n\n        &.${MENU_CLASS}-submenu-hidden {\n          display: none;\n        }\n\n        /* Vertical and horizontal */\n        .${MENU_CLASS}-vertical {\n          width: 100%;\n          max-width: 300px;\n\n          .${MENU_CLASS}-submenu-title {\n            padding-left: ${subMenuIndent};\n            padding-right: ${subMenuIndent};\n          }\n\n          .${MENU_CLASS}-submenu-selected > .${MENU_CLASS}-submenu-title:after {\n            ${indicatorPositionStyle}\n          }\n\n          .${MENU_CLASS}-submenu-expand-icon {\n            transform: rotate(-90deg);\n          }\n        }\n      }\n    `;\n  }}\n`;\n"]}

package/build/esm/components/Menu/utils/motionUtils.d.ts

@@ -0,0 +1,23 @@
+import type { MotionEndEventHandler, MotionEventHandler } from 'rc-motion';
+export declare const getDefaultMotions: {
+    horizontal: {
+        motionName: string;
+    };
+    inline: {
+        motionName: string;
+        onAppearStart: MotionEventHandler;
+        onEnterStart: MotionEventHandler;
+        onAppearActive: MotionEventHandler;
+        onEnterActive: MotionEventHandler;
+        onLeaveStart: MotionEventHandler;
+        onLeaveActive: MotionEventHandler;
+        onAppearEnd: MotionEndEventHandler;
+        onEnterEnd: MotionEndEventHandler;
+        onLeaveEnd: MotionEndEventHandler;
+        motionDeadline: number;
+    };
+    other: {
+        motionName: string;
+    };
+};
+//# sourceMappingURL=motionUtils.d.ts.map

package/build/esm/components/Menu/utils/motionUtils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"motionUtils.d.ts","sourceRoot":"","sources":["../../../../../src/components/Menu/utils/motionUtils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,kBAAkB,EAAE,MAAM,WAAW,CAAC;AAU3E,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;CAgB7B,CAAC"}

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

@@ -0,0 +1,23 @@
+import { MENU_CLASS } from 'acinguiux-ds-react-base';
+const getCollapsedHeight = () => ({ height: 0, opacity: 0 });
+const getRealHeight = (node) => ({ height: node ? node.scrollHeight : 0, opacity: 1 });
+const getCurrentHeight = (node) => ({ height: node ? node.offsetHeight : 0 });
+const skipOpacityTransition = (_, event) => (event === null || event === void 0 ? void 0 : event.deadline) === true || event.propertyName === 'height';
+export const getDefaultMotions = {
+    horizontal: { motionName: `${MENU_CLASS}-slide-up` },
+    inline: {
+        motionName: `${MENU_CLASS}-collapse`,
+        onAppearStart: getCollapsedHeight,
+        onEnterStart: getCollapsedHeight,
+        onAppearActive: getRealHeight,
+        onEnterActive: getRealHeight,
+        onLeaveStart: getCurrentHeight,
+        onLeaveActive: getCollapsedHeight,
+        onAppearEnd: skipOpacityTransition,
+        onEnterEnd: skipOpacityTransition,
+        onLeaveEnd: skipOpacityTransition,
+        motionDeadline: 500,
+    },
+    other: { motionName: `${MENU_CLASS}-zoom` },
+};
+//# sourceMappingURL=motionUtils.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"motionUtils.js","sourceRoot":"","sources":["../../../../../src/components/Menu/utils/motionUtils.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAErD,MAAM,kBAAkB,GAAuB,GAAG,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,CAAC;AACjF,MAAM,aAAa,GAAuB,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,CAAC;AAC3G,MAAM,gBAAgB,GAAuB,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;AAClG,MAAM,qBAAqB,GAA0B,CAAC,CAAC,EAAE,KAAkB,EAAE,EAAE,CAC7E,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,QAAQ,MAAK,IAAI,IAAK,KAAyB,CAAC,YAAY,KAAK,QAAQ,CAAC;AAEnF,MAAM,CAAC,MAAM,iBAAiB,GAAG;IAC/B,UAAU,EAAE,EAAE,UAAU,EAAE,GAAG,UAAU,WAAW,EAAE;IACpD,MAAM,EAAE;QACN,UAAU,EAAE,GAAG,UAAU,WAAW;QACpC,aAAa,EAAE,kBAAkB;QACjC,YAAY,EAAE,kBAAkB;QAChC,cAAc,EAAE,aAAa;QAC7B,aAAa,EAAE,aAAa;QAC5B,YAAY,EAAE,gBAAgB;QAC9B,aAAa,EAAE,kBAAkB;QACjC,WAAW,EAAE,qBAAqB;QAClC,UAAU,EAAE,qBAAqB;QACjC,UAAU,EAAE,qBAAqB;QACjC,cAAc,EAAE,GAAG;KACpB;IACD,KAAK,EAAE,EAAE,UAAU,EAAE,GAAG,UAAU,OAAO,EAAE;CAC5C,CAAC","sourcesContent":["import type { MotionEndEventHandler, MotionEventHandler } from 'rc-motion';\nimport type { MotionEvent } from 'rc-motion/lib/interface';\nimport { MENU_CLASS } from 'acinguiux-ds-react-base';\n\nconst getCollapsedHeight: MotionEventHandler = () => ({ height: 0, opacity: 0 });\nconst getRealHeight: MotionEventHandler = (node) => ({ height: node ? node.scrollHeight : 0, opacity: 1 });\nconst getCurrentHeight: MotionEventHandler = (node) => ({ height: node ? node.offsetHeight : 0 });\nconst skipOpacityTransition: MotionEndEventHandler = (_, event: MotionEvent) =>\n  event?.deadline === true || (event as TransitionEvent).propertyName === 'height';\n\nexport const getDefaultMotions = {\n  horizontal: { motionName: `${MENU_CLASS}-slide-up` },\n  inline: {\n    motionName: `${MENU_CLASS}-collapse`,\n    onAppearStart: getCollapsedHeight,\n    onEnterStart: getCollapsedHeight,\n    onAppearActive: getRealHeight,\n    onEnterActive: getRealHeight,\n    onLeaveStart: getCurrentHeight,\n    onLeaveActive: getCollapsedHeight,\n    onAppearEnd: skipOpacityTransition,\n    onEnterEnd: skipOpacityTransition,\n    onLeaveEnd: skipOpacityTransition,\n    motionDeadline: 500,\n  },\n  other: { motionName: `${MENU_CLASS}-zoom` },\n};\n"]}

package/build/esm/components/Menu/utils/nodeUtils.d.ts

@@ -0,0 +1,4 @@
+import { ItemType } from 'rc-menu/lib/interface';
+export declare const useItems: (items?: ItemType[]) => (import("react/jsx-runtime").JSX.Element | null)[] | undefined;
+export declare const getItemsByPath: (path: string, items: ItemType[] | undefined) => string[];
+//# sourceMappingURL=nodeUtils.d.ts.map

package/build/esm/components/Menu/utils/nodeUtils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"nodeUtils.d.ts","sourceRoot":"","sources":["../../../../../src/components/Menu/utils/nodeUtils.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AA8CjD,eAAO,MAAM,QAAQ,WAAY,QAAQ,EAAE,mEAO9B,CAAC;AAKd,eAAO,MAAM,cAAc,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,SAAS,KAAK,MAAM,EAYnF,CAAC"}

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

@@ -0,0 +1,51 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// This hook is tweaked from Ant Design's menu component
+// https://github.com/ant-design/ant-design/blob/master/components/menu/hooks/useItems.tsx
+// It converts the items array to React nodes using our components
+import { useMemo } from 'react';
+import MenuDivider from '../components/MenuDivider';
+import MenuItem from '../components/MenuItem';
+import MenuItemGroup from '../components/MenuItemGroup';
+import SubMenu from '../components/SubMenu';
+const convertItemsToNodes = (items, level) => (items || [])
+    .map((opt, index) => {
+    if (opt && typeof opt === 'object') {
+        const { label, children, key, type, ...restProps } = opt;
+        const mergedKey = key !== null && key !== void 0 ? key : `tmp-${index}`;
+        if (children || type === 'group') {
+            if (type === 'group') {
+                return (_jsx(MenuItemGroup, { ...restProps, title: label, children: convertItemsToNodes(children, level + 1) }, mergedKey));
+            }
+            return (_jsx(SubMenu, { level: level, ...restProps, title: label, children: convertItemsToNodes(children, level + 1) }, mergedKey));
+        }
+        if (type === 'divider') {
+            return _jsx(MenuDivider, { ...restProps }, mergedKey);
+        }
+        return (_jsx(MenuItem, { level: level, ...restProps, children: label }, mergedKey));
+    }
+    return null;
+})
+    .filter((opt) => opt);
+export const useItems = (items) => useMemo(() => {
+    if (!items) {
+        return items;
+    }
+    return convertItemsToNodes(items, 0);
+}, [items]);
+const isParent = (item) => !!item && 'children' in item;
+const isMenuItem = (item) => !!item && 'key' in item && !('children' in item);
+export const getItemsByPath = (path, items) => {
+    if (items === undefined)
+        return [];
+    const findItem = (menuItems) => menuItems.reduce((acc, item) => {
+        if (!item)
+            return acc;
+        if (isParent(item) && item.children)
+            return [...acc, ...findItem(item.children)];
+        if (isMenuItem(item) && item.path === path)
+            return [...acc, item.key];
+        return acc;
+    }, []);
+    return findItem(items);
+};
+//# sourceMappingURL=nodeUtils.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nodeUtils.js","sourceRoot":"","sources":["../../../../../src/components/Menu/utils/nodeUtils.tsx"],"names":[],"mappings":"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","sourcesContent":["// This hook is tweaked from Ant Design's menu component\n// https://github.com/ant-design/ant-design/blob/master/components/menu/hooks/useItems.tsx\n// It converts the items array to React nodes using our components\n\nimport { useMemo } from 'react';\n\nimport { ItemType } from 'rc-menu/lib/interface';\n\nimport MenuDivider from '../components/MenuDivider';\nimport MenuItem from '../components/MenuItem';\nimport MenuItemGroup from '../components/MenuItemGroup';\nimport SubMenu from '../components/SubMenu';\nimport { MenuItemGroupType, MenuItemType, SubMenuType } from '../Menu.types';\n\nconst convertItemsToNodes = (items: ItemType[], level: number) =>\n  (items || [])\n    .map((opt, index) => {\n      if (opt && typeof opt === 'object') {\n        const { label, children, key, type, ...restProps } = opt as any;\n        const mergedKey = key ?? `tmp-${index}`;\n\n        if (children || type === 'group') {\n          if (type === 'group') {\n            return (\n              <MenuItemGroup key={mergedKey} {...restProps} title={label}>\n                {convertItemsToNodes(children, level + 1)}\n              </MenuItemGroup>\n            );\n          }\n\n          return (\n            <SubMenu key={mergedKey} level={level} {...restProps} title={label}>\n              {convertItemsToNodes(children, level + 1)}\n            </SubMenu>\n          );\n        }\n\n        if (type === 'divider') {\n          return <MenuDivider key={mergedKey} {...restProps} />;\n        }\n\n        return (\n          <MenuItem key={mergedKey} level={level} {...restProps}>\n            {label}\n          </MenuItem>\n        );\n      }\n\n      return null;\n    })\n    .filter((opt) => opt);\n\nexport const useItems = (items?: ItemType[]) =>\n  useMemo(() => {\n    if (!items) {\n      return items;\n    }\n\n    return convertItemsToNodes(items, 0);\n  }, [items]);\n\nconst isParent = (item: ItemType): item is SubMenuType | MenuItemGroupType => !!item && 'children' in item;\nconst isMenuItem = (item: ItemType): item is MenuItemType => !!item && 'key' in item && !('children' in item);\n\nexport const getItemsByPath: (path: string, items: ItemType[] | undefined) => string[] = (path, items) => {\n  if (items === undefined) return [];\n  const findItem: (menuItems: ItemType[]) => string[] = (menuItems) =>\n    menuItems.reduce<string[]>((acc, item) => {\n      if (!item) return acc;\n      if (isParent(item) && item.children) return [...acc, ...findItem(item.children)];\n      if (isMenuItem(item) && item.path === path) return [...acc, item.key as string];\n\n      return acc;\n    }, []);\n\n  return findItem(items);\n};\n"]}

package/build/esm/components/Modal/Modal.consts.d.ts

@@ -0,0 +1,32 @@
+import { HeadingLevel } from '../Text/components/Heading/Heading.types';
+import { LabelSize } from '../Text/components/Label/Label.types';
+import { ModalSize, ModalPadding } from './Modal.types';
+type ModalConstsProps = {
+    [size in ModalSize]: {
+        titleLevel: HeadingLevel;
+        descriptionSize: LabelSize;
+        titleAndDescriptionGap: string;
+        titleBarPadding: {
+            [padding in ModalPadding]: string;
+        };
+        actionBarPadding: {
+            [padding in ModalPadding]: string;
+        };
+        bodyPadding: {
+            [padding in ModalPadding]: string;
+        };
+        closeButton: {
+            width?: string;
+            height?: string;
+            position: {
+                [padding in ModalPadding]: {
+                    top: string;
+                    right: string;
+                };
+            };
+        };
+    };
+};
+export declare const modalConsts: ModalConstsProps;
+export {};
+//# sourceMappingURL=Modal.consts.d.ts.map

package/build/esm/components/Modal/Modal.consts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.consts.d.ts","sourceRoot":"","sources":["../../../../src/components/Modal/Modal.consts.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,YAAY,EAAE,MAAM,0CAA0C,CAAC;AACxE,OAAO,EAAE,SAAS,EAAE,MAAM,sCAAsC,CAAC;AACjE,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAGxD,KAAK,gBAAgB,GAAG;KACrB,IAAI,IAAI,SAAS,GAAG;QACnB,UAAU,EAAE,YAAY,CAAC;QACzB,eAAe,EAAE,SAAS,CAAC;QAC3B,sBAAsB,EAAE,MAAM,CAAC;QAC/B,eAAe,EAAE;aACd,OAAO,IAAI,YAAY,GAAG,MAAM;SAClC,CAAC;QACF,gBAAgB,EAAE;aACf,OAAO,IAAI,YAAY,GAAG,MAAM;SAClC,CAAC;QACF,WAAW,EAAE;aACV,OAAO,IAAI,YAAY,GAAG,MAAM;SAClC,CAAC;QACF,WAAW,EAAE;YACX,KAAK,CAAC,EAAE,MAAM,CAAC;YACf,MAAM,CAAC,EAAE,MAAM,CAAC;YAChB,QAAQ,EAAE;iBACP,OAAO,IAAI,YAAY,GAAG;oBACzB,GAAG,EAAE,MAAM,CAAC;oBACZ,KAAK,EAAE,MAAM,CAAC;iBACf;aACF,CAAC;SACH,CAAC;KACH;CACF,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,gBAmEzB,CAAC"}

package/build/esm/components/Modal/Modal.consts.js

@@ -0,0 +1,71 @@
+import { Sizes } from 'acinguiux-ds-react-base';
+import { Spacings } from '../../types/types';
+export const modalConsts = {
+    [Sizes.Small]: {
+        titleLevel: 4,
+        descriptionSize: Sizes.ExtraSmall,
+        titleAndDescriptionGap: '2px',
+        titleBarPadding: { [Spacings.Tight]: '22px 55px 22px 16px', [Spacings.Generous]: '30px 55px 30px 24px' },
+        actionBarPadding: { [Spacings.Tight]: '16px', [Spacings.Generous]: '24px' },
+        bodyPadding: { [Spacings.Tight]: '16px', [Spacings.Generous]: '24px' },
+        closeButton: {
+            width: '28px',
+            height: '32px',
+            position: {
+                [Spacings.Tight]: {
+                    top: '16px',
+                    right: '12px',
+                },
+                [Spacings.Generous]: {
+                    top: '24px',
+                    right: '20px',
+                },
+            },
+        },
+    },
+    [Sizes.Medium]: {
+        titleLevel: 3,
+        descriptionSize: Sizes.Small,
+        titleAndDescriptionGap: '4px',
+        titleBarPadding: { [Spacings.Tight]: '28px 60px 28px 20px', [Spacings.Generous]: '40px 60px 40px 32px' },
+        actionBarPadding: { [Spacings.Tight]: '20px', [Spacings.Generous]: '32px' },
+        bodyPadding: { [Spacings.Tight]: '20px', [Spacings.Generous]: '32px' },
+        closeButton: {
+            width: '28px',
+            height: '40px',
+            position: {
+                [Spacings.Tight]: {
+                    top: '20px',
+                    right: '16px',
+                },
+                [Spacings.Generous]: {
+                    top: '32px',
+                    right: '28px',
+                },
+            },
+        },
+    },
+    [Sizes.Large]: {
+        titleLevel: 2,
+        descriptionSize: Sizes.Medium,
+        titleAndDescriptionGap: '8px',
+        titleBarPadding: { [Spacings.Tight]: '34px 70px 34px 24px', [Spacings.Generous]: '50px 60px 50px 40px' },
+        actionBarPadding: { [Spacings.Tight]: '24px', [Spacings.Generous]: '40px' },
+        bodyPadding: { [Spacings.Tight]: '24px', [Spacings.Generous]: '40px' },
+        closeButton: {
+            width: '36px',
+            height: '48px',
+            position: {
+                [Spacings.Tight]: {
+                    top: '24px',
+                    right: '18px',
+                },
+                [Spacings.Generous]: {
+                    top: '40px',
+                    right: '34px',
+                },
+            },
+        },
+    },
+};
+//# sourceMappingURL=Modal.consts.js.map

package/build/esm/components/Modal/Modal.consts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.consts.js","sourceRoot":"","sources":["../../../../src/components/Modal/Modal.consts.ts"],"names":[],"mappings":"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","sourcesContent":["import { Sizes } from 'acinguiux-ds-react-base';\n\nimport { HeadingLevel } from '../Text/components/Heading/Heading.types';\nimport { LabelSize } from '../Text/components/Label/Label.types';\nimport { ModalSize, ModalPadding } from './Modal.types';\nimport { Spacings } from '../../types/types';\n\ntype ModalConstsProps = {\n  [size in ModalSize]: {\n    titleLevel: HeadingLevel;\n    descriptionSize: LabelSize;\n    titleAndDescriptionGap: string;\n    titleBarPadding: {\n      [padding in ModalPadding]: string;\n    };\n    actionBarPadding: {\n      [padding in ModalPadding]: string;\n    };\n    bodyPadding: {\n      [padding in ModalPadding]: string;\n    };\n    closeButton: {\n      width?: string;\n      height?: string;\n      position: {\n        [padding in ModalPadding]: {\n          top: string;\n          right: string;\n        };\n      };\n    };\n  };\n};\n\nexport const modalConsts: ModalConstsProps = {\n  [Sizes.Small]: {\n    titleLevel: 4,\n    descriptionSize: Sizes.ExtraSmall,\n    titleAndDescriptionGap: '2px',\n    titleBarPadding: { [Spacings.Tight]: '22px 55px 22px 16px', [Spacings.Generous]: '30px 55px 30px 24px' },\n    actionBarPadding: { [Spacings.Tight]: '16px', [Spacings.Generous]: '24px' },\n    bodyPadding: { [Spacings.Tight]: '16px', [Spacings.Generous]: '24px' },\n    closeButton: {\n      width: '28px',\n      height: '32px',\n      position: {\n        [Spacings.Tight]: {\n          top: '16px',\n          right: '12px',\n        },\n        [Spacings.Generous]: {\n          top: '24px',\n          right: '20px',\n        },\n      },\n    },\n  },\n  [Sizes.Medium]: {\n    titleLevel: 3,\n    descriptionSize: Sizes.Small,\n    titleAndDescriptionGap: '4px',\n    titleBarPadding: { [Spacings.Tight]: '28px 60px 28px 20px', [Spacings.Generous]: '40px 60px 40px 32px' },\n    actionBarPadding: { [Spacings.Tight]: '20px', [Spacings.Generous]: '32px' },\n    bodyPadding: { [Spacings.Tight]: '20px', [Spacings.Generous]: '32px' },\n    closeButton: {\n      width: '28px',\n      height: '40px',\n      position: {\n        [Spacings.Tight]: {\n          top: '20px',\n          right: '16px',\n        },\n        [Spacings.Generous]: {\n          top: '32px',\n          right: '28px',\n        },\n      },\n    },\n  },\n  [Sizes.Large]: {\n    titleLevel: 2,\n    descriptionSize: Sizes.Medium,\n    titleAndDescriptionGap: '8px',\n    titleBarPadding: { [Spacings.Tight]: '34px 70px 34px 24px', [Spacings.Generous]: '50px 60px 50px 40px' },\n    actionBarPadding: { [Spacings.Tight]: '24px', [Spacings.Generous]: '40px' },\n    bodyPadding: { [Spacings.Tight]: '24px', [Spacings.Generous]: '40px' },\n    closeButton: {\n      width: '36px',\n      height: '48px',\n      position: {\n        [Spacings.Tight]: {\n          top: '24px',\n          right: '18px',\n        },\n        [Spacings.Generous]: {\n          top: '40px',\n          right: '34px',\n        },\n      },\n    },\n  },\n};\n"]}

package/build/esm/components/Modal/Modal.d.ts

@@ -0,0 +1,5 @@
+import { ReactElement } from 'react';
+import { IModalProps } from './Modal.types';
+declare const Modal: ({ children, className, open, title, description, padding, bodyBgColor, bodyPadding, onClose, showHeader, showFooter, actions, actionsAlignment, headerAreaComponent, loading, loadingBody, loadingText, size, closable, footerDirection, descriptionPosition, contentScrollable, centered, width, ...props }: IModalProps) => ReactElement;
+export default Modal;
+//# sourceMappingURL=Modal.d.ts.map

package/build/esm/components/Modal/Modal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../../src/components/Modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAkB5C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAI5C,QAAA,MAAM,KAAK,iTA0BR,WAAW,KAAG,YAiEhB,CAAC;AAEF,eAAe,KAAK,CAAC"}