@maggioli-design-system/mds-modal 4.11.2 → 4.11.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (42) hide show
  1. package/dist/cjs/mds-modal.cjs.entry.js +1 -1
  2. package/dist/collection/common/date.js +13 -0
  3. package/dist/collection/common/locale.js +8 -2
  4. package/dist/collection/components/mds-modal/mds-modal.css +1 -1
  5. package/dist/collection/dictionary/button.js +6 -1
  6. package/dist/collection/dictionary/variant.js +6 -1
  7. package/dist/collection/type/date.js +1 -0
  8. package/dist/components/mds-modal.js +1 -1
  9. package/dist/documentation.json +1 -1
  10. package/dist/esm/mds-modal.entry.js +1 -1
  11. package/dist/esm-es5/mds-modal.entry.js +1 -1
  12. package/dist/mds-modal/mds-modal.esm.js +1 -1
  13. package/dist/mds-modal/p-3a04d26f.system.entry.js +1 -0
  14. package/dist/mds-modal/p-92688c52.system.js +1 -1
  15. package/dist/mds-modal/p-cb3a151e.entry.js +1 -0
  16. package/dist/stats.json +20 -16
  17. package/dist/types/common/date.d.ts +4 -0
  18. package/dist/types/common/locale.d.ts +3 -2
  19. package/dist/types/dictionary/button.d.ts +2 -1
  20. package/dist/types/dictionary/variant.d.ts +2 -1
  21. package/dist/types/type/date.d.ts +5 -0
  22. package/dist/types/type/variant.d.ts +1 -1
  23. package/documentation.json +18 -8
  24. package/package.json +2 -2
  25. package/readme.md +0 -13
  26. package/src/common/date.ts +21 -0
  27. package/src/common/locale.ts +10 -4
  28. package/src/components/mds-modal/mds-modal.css +1 -1
  29. package/src/dictionary/button.ts +7 -0
  30. package/src/dictionary/variant.ts +7 -0
  31. package/src/fixtures/icons.json +17 -0
  32. package/src/fixtures/iconsauce.json +17 -0
  33. package/src/type/date.ts +10 -0
  34. package/src/type/variant.ts +1 -1
  35. package/www/build/mds-modal.esm.js +1 -1
  36. package/www/build/p-3a04d26f.system.entry.js +1 -0
  37. package/www/build/p-92688c52.system.js +1 -1
  38. package/www/build/p-cb3a151e.entry.js +1 -0
  39. package/dist/mds-modal/p-86b0df47.system.entry.js +0 -1
  40. package/dist/mds-modal/p-b83835e4.entry.js +0 -1
  41. package/www/build/p-86b0df47.system.entry.js +0 -1
  42. package/www/build/p-b83835e4.entry.js +0 -1
package/dist/cjs/mds-modal.cjs.entry.js CHANGED
@@ -54,7 +54,7 @@ class KeyboardManager {
54
54
  }
55
55
  }
56
56
 
57
- const mdsModalCss = "@-webkit-keyframes focus-bounce {\n 0%, 75%, 100% {\n outline-offset: var(--magma-outline-focus-offset, 6px);\n }\n\n 50% {\n outline-offset: var(--magma-outline-blur-offset, 2px);\n }\n}\n @keyframes focus-bounce {\n 0%, 75%, 100% {\n outline-offset: var(--magma-outline-focus-offset, 6px);\n }\n\n 50% {\n outline-offset: var(--magma-outline-blur-offset, 2px);\n }\n}\n /* included for focus effect */\n@tailwind components;\n@tailwind utilities;\n\n@tailwind components;\n@tailwind utilities;\n\n\n.svg {\n display: -ms-flexbox;\n display: flex;\n}\n\n\n.svg svg {\n aspect-ratio: 1/1;\n height: 100%;\n width: 100%;\n}\n\n\n.animate-right-intro,\n .animate-right-outro {\n -webkit-transform: translateX(calc(100% + 50px));\n transform: translateX(calc(100% + 50px));\n }\n@tailwind utilities;\n\n/**\n * @prop --mds-modal-close-icon-color: Set the color of the close icon button to the top left.\n * @prop --mds-modal-overlay-color: Set the overlay color of the background when the component is opened, this property can be inherited from `globals.css` in `styles^8.0.0`.\n * @prop --mds-modal-overlay-opacity: Set the overlay color opacity of the background when the component is opened, this property can be inherited from `globals.css` in `styles^8.0.0`.\n * @prop --mds-modal-window-background: Set the background color of the window\n * @prop --mds-modal-window-overflow: Set the overflow of the window\n * @prop --mds-modal-window-shadow: Set the box shadow of the window\n * @prop --mds-modal-z-index: Set the z-index of the window when the component is opened\n */\n\n:host {\n\n --mds-modal-close-icon-color: rgb(var(--tone-neutral));\n --mds-modal-overlay-color: var(--magma-overlay-color, 0 0 0);\n --mds-modal-overlay-opacity: var(--magma-overlay-opacity, 0.5);\n --mds-modal-window-background: rgb(var(--tone-neutral));\n --mds-modal-window-overflow: auto;\n --mds-modal-window-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);\n --mds-modal-z-index: var(--magma-modal-z-index);\n -webkit-transition-duration: 700ms;\n transition-duration: 700ms;\n -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);\n transition-timing-function: cubic-bezier(1, 0, 0, 1);\n\n -ms-flex-align: center;\n\n align-items: center;\n background-color: rgba(var(--mds-modal-overlay-color) / 0);\n display: -ms-flexbox;\n display: flex;\n fill: rgb(var(--tone-neutral));\n inset: 0;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-perspective: 600px;\n perspective: 600px;\n pointer-events: none;\n position: fixed;\n z-index: var(--mds-modal-z-index, 1000);\n}\n\n:host( [position=\"top\"] ) {\n -ms-flex-align: start;\n align-items: flex-start;\n -ms-flex-pack: center;\n justify-content: center;\n}\n\n:host( [position=\"bottom\"] ) {\n -ms-flex-align: end;\n align-items: flex-end;\n -ms-flex-pack: center;\n justify-content: center;\n}\n\n:host( .to-bottom-opened ),\n:host( .to-center-opened ),\n:host( .to-left-opened ),\n:host( .to-right-opened ),\n:host( .to-top-opened ) {\n -webkit-transition-duration: 500ms;\n transition-duration: 500ms;\n\n background-color: rgba(var(--mds-modal-overlay-color) / var(--mds-modal-overlay-opacity));\n pointer-events: auto;\n}\n\n.button-close {\n top: 0rem;\n border-radius: 9999px;\n opacity: 0;\n -webkit-transition-duration: 500ms;\n transition-duration: 500ms;\n -webkit-transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);\n transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);\n\n --mds-button-icon-color: var(--mds-modal-close-icon-color);\n --mds-button-background: transparent;\n\n height: auto;\n position: absolute;\n -webkit-transform: translate(0, 24px) rotate(90deg);\n transform: translate(0, 24px) rotate(90deg);\n -webkit-transform-origin: center;\n transform-origin: center;\n -webkit-transition-property: opacity, outline, outline-offset, -webkit-transform;\n transition-property: opacity, outline, outline-offset, -webkit-transform;\n transition-property: opacity, outline, outline-offset, transform;\n transition-property: opacity, outline, outline-offset, transform, -webkit-transform;\n}\n\n.button-close::part(icon) {\n height: 2.25rem;\n width: 2.25rem;\n}\n\n.window {\n height: 100%;\n gap: 0rem;\n\n background-color: var(--mds-modal-window-background);\n -webkit-box-shadow: var(--mds-modal-window-shadow);\n box-shadow: var(--mds-modal-window-shadow);\n display: grid;\n grid-template-rows: 1fr;\n max-width: calc(100vw - 80px);\n overflow: var(--mds-modal-window-overflow);\n}\n\n.window--top {\n grid-template-rows: auto 1fr;\n}\n\n.window--bottom {\n grid-template-rows: 1fr auto;\n}\n\n.window--top-bottom {\n grid-template-rows: auto 1fr auto;\n}\n\n/* xx */\n\n:host( .to-bottom ) {\n padding: 2rem;\n}\n\n@media (max-width: 767px) {\n :host( .to-bottom ) {\n padding: 1rem;\n }\n}\n\n:host( .to-bottom ) {\n\n -ms-flex-pack: center;\n\n justify-content: center;\n}\n\n:host( .to-bottom ) .window,\n:host( .to-bottom ) > ::slotted( [slot=\"window\"] ) {\n opacity: 0;\n -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n -webkit-transition-duration: 500ms;\n transition-duration: 500ms;\n -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);\n transition-timing-function: cubic-bezier(1, 0, 0, 1);\n}\n\n:host( .to-bottom-intro ) .window,\n:host( .to-bottom-intro ) > ::slotted( [slot=\"window\"] ) {\n -webkit-transform: rotateX(-22deg) scale(0.5) translateY(40%);\n transform: rotateX(-22deg) scale(0.5) translateY(40%);\n }\n\n:host( .to-bottom-opened.to-bottom-outro ) .window,\n:host( .to-bottom-opened.to-bottom-outro ) > ::slotted( [slot=\"window\"] ),\n:host( .to-bottom-opened ) .window,\n:host( .to-bottom-opened ) > ::slotted( [slot=\"window\"] ) {\n opacity: 1;\n\n -webkit-transform: rotateX(0) scale(1) translateY(0);\n\n transform: rotateX(0) scale(1) translateY(0);\n}\n\n:host( .to-bottom-outro ) .window,\n:host( .to-bottom-outro ) > ::slotted( [slot=\"window\"] ) {\n -webkit-transform: rotateX(-22deg) scale(0.5) translateY(-40%);\n transform: rotateX(-22deg) scale(0.5) translateY(-40%);\n }\n\n:host( .to-center ) {\n padding: 2rem;\n}\n\n@media (max-width: 767px) {\n :host( .to-center ) {\n padding: 1rem;\n }\n}\n\n:host( .to-center ) {\n\n -ms-flex-pack: center;\n\n justify-content: center;\n}\n\n:host( .to-center ) .window,\n:host( .to-center ) > ::slotted( [slot=\"window\"] ) {\n opacity: 0;\n -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n -webkit-transition-duration: 500ms;\n transition-duration: 500ms;\n -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);\n transition-timing-function: cubic-bezier(1, 0, 0, 1);\n}\n\n:host( .to-center-intro ) .window,\n:host( .to-center-intro ) > ::slotted( [slot=\"window\"] ) {\n -webkit-transform: rotateX(-22deg) scale(0.5) translateY(40%);\n transform: rotateX(-22deg) scale(0.5) translateY(40%);\n }\n\n:host( .to-center-opened.to-center-outro ) .window,\n:host( .to-center-opened.to-center-outro ) > ::slotted( [slot=\"window\"] ),\n:host( .to-center-opened ) .window,\n:host( .to-center-opened ) > ::slotted( [slot=\"window\"] ) {\n opacity: 1;\n\n -webkit-transform: rotateX(0) scale(1) translateY(0);\n\n transform: rotateX(0) scale(1) translateY(0);\n}\n\n:host( .to-center-outro ) .window,\n:host( .to-center-outro ) > ::slotted( [slot=\"window\"] ) {\n -webkit-transform: rotateX(-22deg) scale(0.5) translateY(-40%);\n transform: rotateX(-22deg) scale(0.5) translateY(-40%);\n }\n\n:host( .to-left ) {\n -ms-flex-pack: start;\n justify-content: flex-start;\n}\n\n:host( .to-left ) .window,\n:host( .to-left ) > ::slotted( [slot=\"window\"] ) {\n opacity: 0;\n -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n -webkit-transition-duration: 500ms;\n transition-duration: 500ms;\n -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);\n transition-timing-function: cubic-bezier(1, 0, 0, 1);\n}\n\n:host( .to-left-intro ) .window,\n:host( .to-left-intro ) > ::slotted( [slot=\"window\"] ) {\n -webkit-transform: translateX(calc(-100% - 50px));\n transform: translateX(calc(-100% - 50px));\n }\n\n:host( .to-left-opened.to-left-outro ) .window,\n:host( .to-left-opened.to-left-outro ) > ::slotted( [slot=\"window\"] ),\n:host( .to-left-opened ) .window,\n:host( .to-left-opened ) > ::slotted( [slot=\"window\"] ) {\n opacity: 1;\n\n -webkit-transform: translateX(0);\n\n transform: translateX(0);\n}\n\n:host( .to-left-opened ) .button-close,\n:host( .to-left-opened.to-left-outro ) .button-close {\n opacity: 1;\n\n -webkit-transform: translate(-24px, 24px) rotate(0);\n\n transform: translate(-24px, 24px) rotate(0);\n}\n\n:host( .to-left-outro ) .window,\n:host( .to-left-outro ) > ::slotted( [slot=\"window\"] ) {\n -webkit-transform: translateX(calc(-100% - 50px));\n transform: translateX(calc(-100% - 50px));\n }\n\n:host( .to-left-outro ) .button-close {\n -webkit-transform: translate(24px, 24px) rotate(-90deg);\n transform: translate(24px, 24px) rotate(-90deg);\n}\n\n:host( .to-left ) .button-close {\n right: 0rem;\n\n -webkit-transform: translate(36px, 24px) rotate(90deg);\n\n transform: translate(36px, 24px) rotate(90deg);\n}\n\n:host( .to-right ) {\n -ms-flex-pack: end;\n justify-content: flex-end;\n}\n\n:host( .to-right ) .window,\n:host( .to-right ) > ::slotted([slot=\"window\"]) {\n opacity: 0;\n -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n -webkit-transition-duration: 500ms;\n transition-duration: 500ms;\n -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);\n transition-timing-function: cubic-bezier(1, 0, 0, 1);\n}\n\n:host( .to-right-intro ) .window,\n:host( .to-right-intro ) > ::slotted( [slot=\"window\"] ) {\n -webkit-transform: translateX(calc(100% + 50px));\n transform: translateX(calc(100% + 50px));\n }\n\n:host( .to-right-opened.to-right-outro ) .window,\n:host( .to-right-opened.to-right-outro ) > ::slotted( [slot=\"window\"] ),\n:host( .to-right-opened ) .window,\n:host( .to-right-opened ) > ::slotted( [slot=\"window\"] ) {\n opacity: 1;\n\n -webkit-transform: translateX(0);\n\n transform: translateX(0);\n}\n\n:host( .to-right-opened ) .button-close,\n:host( .to-right-opened.to-right-outro ) .button-close {\n opacity: 1;\n\n -webkit-transform: translate(24px, 24px) rotate(0);\n\n transform: translate(24px, 24px) rotate(0);\n}\n\n:host( .to-right-outro ) .window,\n:host( .to-right-outro ) > ::slotted( [slot=\"window\"] ) {\n -webkit-transform: translateX(calc(100% + 50px));\n transform: translateX(calc(100% + 50px));\n }\n\n:host( .to-right-outro ) .button-close {\n -webkit-transform: translate(-24px, 24px) rotate(90deg);\n transform: translate(-24px, 24px) rotate(90deg);\n}\n\n:host( .to-right ) .button-close {\n left: 0rem;\n\n -webkit-transform: translate(-36px, 24px) rotate(-90deg);\n\n transform: translate(-36px, 24px) rotate(-90deg);\n}\n\n:host( .to-top ) {\n padding: 2rem;\n}\n\n@media (max-width: 767px) {\n :host( .to-top ) {\n padding: 1rem;\n }\n}\n\n:host( .to-top ) {\n\n -ms-flex-pack: center;\n\n justify-content: center;\n}\n\n:host( .to-top ) .window,\n:host( .to-top ) > ::slotted( [slot=\"window\"] ) {\n opacity: 0;\n -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n -webkit-transition-duration: 500ms;\n transition-duration: 500ms;\n -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);\n transition-timing-function: cubic-bezier(1, 0, 0, 1);\n}\n\n:host( .to-top-intro ) .window,\n:host( .to-top-intro ) > ::slotted( [slot=\"window\"] ) {\n -webkit-transform: rotateX(-22deg) scale(0.5) translateY(40%);\n transform: rotateX(-22deg) scale(0.5) translateY(40%);\n }\n\n:host( .to-top-opened.to-top-outro ) .window,\n:host( .to-top-opened.to-top-outro ) > ::slotted( [slot=\"window\"] ),\n:host( .to-top-opened ) .window,\n:host( .to-top-opened ) > ::slotted( [slot=\"window\"] ) {\n opacity: 1;\n\n -webkit-transform: rotateX(0) scale(1) translateY(0);\n\n transform: rotateX(0) scale(1) translateY(0);\n}\n\n:host( .to-top-outro ) .window,\n:host( .to-top-outro ) > ::slotted( [slot=\"window\"] ) {\n -webkit-transform: rotateX(-22deg) scale(0.5) translateY(-40%);\n transform: rotateX(-22deg) scale(0.5) translateY(-40%);\n }\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n :host,\n .button-close,\n .window {\n -webkit-transition-duration: 0s !important;\n transition-duration: 0s !important;\n }\n}\n\n@container style(--magma-pref-animation: system) {\n\n @media (prefers-reduced-motion) {\n :host,\n .button-close,\n .window {\n -webkit-transition-duration: 0s !important;\n transition-duration: 0s !important;\n }\n }\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-theme: dark) {\n :host {\n\n --mds-modal-window-background: rgb(var(--tone-neutral-09));\n --mds-modal-window-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3), 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);\n }\n}\n\n@container style(--magma-pref-theme: system) {\n\n @media (prefers-color-scheme: dark) {\n :host {\n\n --mds-modal-window-background: rgb(var(--tone-neutral-09));\n --mds-modal-window-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3), 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);\n }\n }\n}\n\n.static {\n position: static;\n}\n\n.fixed {\n position: fixed;\n}\n\n.absolute {\n position: absolute;\n}\n\n.flex {\n display: -ms-flexbox;\n display: flex;\n}\n\n.w-1600 {\n width: 4rem;\n}\n\n.min-w-0 {\n min-width: 0rem;\n}\n\n.max-w-lg {\n max-width: 32rem;\n}\n\n.max-w-xl {\n max-width: 36rem;\n}\n\n.flex-grow {\n -ms-flex-positive: 1;\n flex-grow: 1;\n}\n\n.items-center {\n -ms-flex-align: center;\n align-items: center;\n}\n\n.gap-400 {\n gap: 1rem;\n}\n\n.truncate {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.border {\n border-width: 1px;\n}\n\n.border-0 {\n border-width: 0rem;\n}\n\n.border-b {\n border-bottom-width: 1px;\n}\n\n.border-t {\n border-top-width: 1px;\n}\n\n.border-solid {\n border-style: solid;\n}\n\n.border-tone-neutral-09 {\n --tw-border-opacity: 1;\n border-color: rgb(var(--tone-neutral-09) / var(--tw-border-opacity));\n}\n\n.bg-label-amaranth-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--label-amaranth-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-aqua-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--label-aqua-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-blue-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--label-blue-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-green-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--label-green-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-lime-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--label-lime-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orange-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--label-orange-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orchid-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--label-orchid-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-violet-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--label-violet-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-yellow-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--label-yellow-10) / var(--tw-bg-opacity));\n}\n\n.bg-tone-neutral-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--tone-neutral-10) / var(--tw-bg-opacity));\n}\n\n.fill-label-amaranth-04 {\n fill: rgb(var(--label-amaranth-04));\n}\n\n.fill-label-aqua-04 {\n fill: rgb(var(--label-aqua-04));\n}\n\n.fill-label-blue-04 {\n fill: rgb(var(--label-blue-04));\n}\n\n.fill-label-green-04 {\n fill: rgb(var(--label-green-04));\n}\n\n.fill-label-lime-04 {\n fill: rgb(var(--label-lime-04));\n}\n\n.fill-label-orange-04 {\n fill: rgb(var(--label-orange-04));\n}\n\n.fill-label-orchid-04 {\n fill: rgb(var(--label-orchid-04));\n}\n\n.fill-label-violet-04 {\n fill: rgb(var(--label-violet-04));\n}\n\n.fill-label-yellow-04 {\n fill: rgb(var(--label-yellow-04));\n}\n\n.fill-tone-neutral-04 {\n fill: rgb(var(--tone-neutral-04));\n}\n\n.p-800 {\n padding: 2rem;\n}\n\n.text-label-amaranth-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--label-amaranth-04) / var(--tw-text-opacity));\n}\n\n.text-label-aqua-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--label-aqua-04) / var(--tw-text-opacity));\n}\n\n.text-label-blue-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--label-blue-04) / var(--tw-text-opacity));\n}\n\n.text-label-green-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--label-green-04) / var(--tw-text-opacity));\n}\n\n.text-label-lime-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--label-lime-04) / var(--tw-text-opacity));\n}\n\n.text-label-orange-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--label-orange-04) / var(--tw-text-opacity));\n}\n\n.text-label-orchid-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--label-orchid-04) / var(--tw-text-opacity));\n}\n\n.text-label-violet-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--label-violet-04) / var(--tw-text-opacity));\n}\n\n.text-label-yellow-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--label-yellow-04) / var(--tw-text-opacity));\n}\n\n.text-tone-neutral-02 {\n --tw-text-opacity: 1;\n color: rgb(var(--tone-neutral-02) / var(--tw-text-opacity));\n}\n\n.text-tone-neutral-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--tone-neutral-04) / var(--tw-text-opacity));\n}\n\n.shadow {\n --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n@container style(--magma-pref-contrast: more) {\n :host {\n\n --mds-modal-window-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6), 0 25px 50px -12px rgb(0 0 0 / 0.25);\n }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n @media (prefers-contrast: more) {\n :host {\n\n --mds-modal-window-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6), 0 25px 50px -12px rgb(0 0 0 / 0.25);\n }\n }\n}\n\n@media (max-width: 767px) {\n .mobile\\:w-1200 {\n width: 3rem;\n }\n}\n\n\n";
57
+ const mdsModalCss = "@-webkit-keyframes focus-bounce {\n 0%, 75%, 100% {\n outline-offset: var(--magma-outline-focus-offset, 6px);\n }\n\n 50% {\n outline-offset: var(--magma-outline-blur-offset, 2px);\n }\n}\n @keyframes focus-bounce {\n 0%, 75%, 100% {\n outline-offset: var(--magma-outline-focus-offset, 6px);\n }\n\n 50% {\n outline-offset: var(--magma-outline-blur-offset, 2px);\n }\n}\n /* included for focus effect */\n@tailwind components;\n@tailwind utilities;\n\n@tailwind components;\n@tailwind utilities;\n\n\n.svg {\n display: -ms-flexbox;\n display: flex;\n}\n\n\n.svg svg {\n aspect-ratio: 1/1;\n height: 100%;\n width: 100%;\n}\n\n\n.animate-right-intro,\n .animate-right-outro {\n -webkit-transform: translateX(calc(100% + 50px));\n transform: translateX(calc(100% + 50px));\n }\n@tailwind utilities;\n\n/**\n * @prop --mds-modal-close-icon-color: Set the color of the close icon button to the top left.\n * @prop --mds-modal-overlay-color: Set the overlay color of the background when the component is opened, this property can be inherited from `globals.css` in `styles^8.0.0`.\n * @prop --mds-modal-overlay-opacity: Set the overlay color opacity of the background when the component is opened, this property can be inherited from `globals.css` in `styles^8.0.0`.\n * @prop --mds-modal-window-background: Set the background color of the window\n * @prop --mds-modal-window-overflow: Set the overflow of the window\n * @prop --mds-modal-window-shadow: Set the box shadow of the window\n * @prop --mds-modal-z-index: Set the z-index of the window when the component is opened\n */\n\n:host {\n\n --mds-modal-close-icon-color: rgb(var(--tone-neutral));\n --mds-modal-overlay-color: var(--magma-overlay-color, 0 0 0);\n --mds-modal-overlay-opacity: var(--magma-overlay-opacity, 0.5);\n --mds-modal-window-background: rgb(var(--tone-neutral));\n --mds-modal-window-overflow: auto;\n --mds-modal-window-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);\n --mds-modal-z-index: var(--magma-modal-z-index);\n -webkit-transition-duration: 700ms;\n transition-duration: 700ms;\n -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);\n transition-timing-function: cubic-bezier(1, 0, 0, 1);\n\n -ms-flex-align: center;\n\n align-items: center;\n background-color: rgba(var(--mds-modal-overlay-color) / 0);\n display: -ms-flexbox;\n display: flex;\n fill: rgb(var(--tone-neutral));\n inset: 0;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-perspective: 600px;\n perspective: 600px;\n pointer-events: none;\n position: fixed;\n z-index: var(--mds-modal-z-index, 1000);\n}\n\n:host( [position=\"top\"] ) {\n -ms-flex-align: start;\n align-items: flex-start;\n -ms-flex-pack: center;\n justify-content: center;\n}\n\n:host( [position=\"bottom\"] ) {\n -ms-flex-align: end;\n align-items: flex-end;\n -ms-flex-pack: center;\n justify-content: center;\n}\n\n:host( .to-bottom-opened ),\n:host( .to-center-opened ),\n:host( .to-left-opened ),\n:host( .to-right-opened ),\n:host( .to-top-opened ) {\n -webkit-transition-duration: 500ms;\n transition-duration: 500ms;\n\n background-color: rgba(var(--mds-modal-overlay-color) / var(--mds-modal-overlay-opacity));\n pointer-events: auto;\n}\n\n.button-close {\n top: 0rem;\n border-radius: 9999px;\n opacity: 0;\n -webkit-transition-duration: 500ms;\n transition-duration: 500ms;\n -webkit-transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);\n transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);\n\n fill: var(--mds-modal-close-icon-color);\n --mds-button-background: transparent;\n\n height: auto;\n position: absolute;\n -webkit-transform: translate(0, 24px) rotate(90deg);\n transform: translate(0, 24px) rotate(90deg);\n -webkit-transform-origin: center;\n transform-origin: center;\n -webkit-transition-property: opacity, outline, outline-offset, -webkit-transform;\n transition-property: opacity, outline, outline-offset, -webkit-transform;\n transition-property: opacity, outline, outline-offset, transform;\n transition-property: opacity, outline, outline-offset, transform, -webkit-transform;\n}\n\n.button-close::part(icon) {\n height: 2.25rem;\n width: 2.25rem;\n}\n\n.window {\n height: 100%;\n gap: 0rem;\n\n background-color: var(--mds-modal-window-background);\n -webkit-box-shadow: var(--mds-modal-window-shadow);\n box-shadow: var(--mds-modal-window-shadow);\n display: grid;\n grid-template-rows: 1fr;\n max-width: calc(100vw - 80px);\n overflow: var(--mds-modal-window-overflow);\n}\n\n.window--top {\n grid-template-rows: auto 1fr;\n}\n\n.window--bottom {\n grid-template-rows: 1fr auto;\n}\n\n.window--top-bottom {\n grid-template-rows: auto 1fr auto;\n}\n\n/* xx */\n\n:host( .to-bottom ) {\n padding: 2rem;\n}\n\n@media (max-width: 767px) {\n :host( .to-bottom ) {\n padding: 1rem;\n }\n}\n\n:host( .to-bottom ) {\n\n -ms-flex-pack: center;\n\n justify-content: center;\n}\n\n:host( .to-bottom ) .window,\n:host( .to-bottom ) > ::slotted( [slot=\"window\"] ) {\n opacity: 0;\n -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n -webkit-transition-duration: 500ms;\n transition-duration: 500ms;\n -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);\n transition-timing-function: cubic-bezier(1, 0, 0, 1);\n}\n\n:host( .to-bottom-intro ) .window,\n:host( .to-bottom-intro ) > ::slotted( [slot=\"window\"] ) {\n -webkit-transform: rotateX(-22deg) scale(0.5) translateY(40%);\n transform: rotateX(-22deg) scale(0.5) translateY(40%);\n }\n\n:host( .to-bottom-opened.to-bottom-outro ) .window,\n:host( .to-bottom-opened.to-bottom-outro ) > ::slotted( [slot=\"window\"] ),\n:host( .to-bottom-opened ) .window,\n:host( .to-bottom-opened ) > ::slotted( [slot=\"window\"] ) {\n opacity: 1;\n\n -webkit-transform: rotateX(0) scale(1) translateY(0);\n\n transform: rotateX(0) scale(1) translateY(0);\n}\n\n:host( .to-bottom-outro ) .window,\n:host( .to-bottom-outro ) > ::slotted( [slot=\"window\"] ) {\n -webkit-transform: rotateX(-22deg) scale(0.5) translateY(-40%);\n transform: rotateX(-22deg) scale(0.5) translateY(-40%);\n }\n\n:host( .to-center ) {\n padding: 2rem;\n}\n\n@media (max-width: 767px) {\n :host( .to-center ) {\n padding: 1rem;\n }\n}\n\n:host( .to-center ) {\n\n -ms-flex-pack: center;\n\n justify-content: center;\n}\n\n:host( .to-center ) .window,\n:host( .to-center ) > ::slotted( [slot=\"window\"] ) {\n opacity: 0;\n -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n -webkit-transition-duration: 500ms;\n transition-duration: 500ms;\n -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);\n transition-timing-function: cubic-bezier(1, 0, 0, 1);\n}\n\n:host( .to-center-intro ) .window,\n:host( .to-center-intro ) > ::slotted( [slot=\"window\"] ) {\n -webkit-transform: rotateX(-22deg) scale(0.5) translateY(40%);\n transform: rotateX(-22deg) scale(0.5) translateY(40%);\n }\n\n:host( .to-center-opened.to-center-outro ) .window,\n:host( .to-center-opened.to-center-outro ) > ::slotted( [slot=\"window\"] ),\n:host( .to-center-opened ) .window,\n:host( .to-center-opened ) > ::slotted( [slot=\"window\"] ) {\n opacity: 1;\n\n -webkit-transform: rotateX(0) scale(1) translateY(0);\n\n transform: rotateX(0) scale(1) translateY(0);\n}\n\n:host( .to-center-outro ) .window,\n:host( .to-center-outro ) > ::slotted( [slot=\"window\"] ) {\n -webkit-transform: rotateX(-22deg) scale(0.5) translateY(-40%);\n transform: rotateX(-22deg) scale(0.5) translateY(-40%);\n }\n\n:host( .to-left ) {\n -ms-flex-pack: start;\n justify-content: flex-start;\n}\n\n:host( .to-left ) .window,\n:host( .to-left ) > ::slotted( [slot=\"window\"] ) {\n opacity: 0;\n -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n -webkit-transition-duration: 500ms;\n transition-duration: 500ms;\n -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);\n transition-timing-function: cubic-bezier(1, 0, 0, 1);\n}\n\n:host( .to-left-intro ) .window,\n:host( .to-left-intro ) > ::slotted( [slot=\"window\"] ) {\n -webkit-transform: translateX(calc(-100% - 50px));\n transform: translateX(calc(-100% - 50px));\n }\n\n:host( .to-left-opened.to-left-outro ) .window,\n:host( .to-left-opened.to-left-outro ) > ::slotted( [slot=\"window\"] ),\n:host( .to-left-opened ) .window,\n:host( .to-left-opened ) > ::slotted( [slot=\"window\"] ) {\n opacity: 1;\n\n -webkit-transform: translateX(0);\n\n transform: translateX(0);\n}\n\n:host( .to-left-opened ) .button-close,\n:host( .to-left-opened.to-left-outro ) .button-close {\n opacity: 1;\n\n -webkit-transform: translate(-24px, 24px) rotate(0);\n\n transform: translate(-24px, 24px) rotate(0);\n}\n\n:host( .to-left-outro ) .window,\n:host( .to-left-outro ) > ::slotted( [slot=\"window\"] ) {\n -webkit-transform: translateX(calc(-100% - 50px));\n transform: translateX(calc(-100% - 50px));\n }\n\n:host( .to-left-outro ) .button-close {\n -webkit-transform: translate(24px, 24px) rotate(-90deg);\n transform: translate(24px, 24px) rotate(-90deg);\n}\n\n:host( .to-left ) .button-close {\n right: 0rem;\n\n -webkit-transform: translate(36px, 24px) rotate(90deg);\n\n transform: translate(36px, 24px) rotate(90deg);\n}\n\n:host( .to-right ) {\n -ms-flex-pack: end;\n justify-content: flex-end;\n}\n\n:host( .to-right ) .window,\n:host( .to-right ) > ::slotted([slot=\"window\"]) {\n opacity: 0;\n -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n -webkit-transition-duration: 500ms;\n transition-duration: 500ms;\n -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);\n transition-timing-function: cubic-bezier(1, 0, 0, 1);\n}\n\n:host( .to-right-intro ) .window,\n:host( .to-right-intro ) > ::slotted( [slot=\"window\"] ) {\n -webkit-transform: translateX(calc(100% + 50px));\n transform: translateX(calc(100% + 50px));\n }\n\n:host( .to-right-opened.to-right-outro ) .window,\n:host( .to-right-opened.to-right-outro ) > ::slotted( [slot=\"window\"] ),\n:host( .to-right-opened ) .window,\n:host( .to-right-opened ) > ::slotted( [slot=\"window\"] ) {\n opacity: 1;\n\n -webkit-transform: translateX(0);\n\n transform: translateX(0);\n}\n\n:host( .to-right-opened ) .button-close,\n:host( .to-right-opened.to-right-outro ) .button-close {\n opacity: 1;\n\n -webkit-transform: translate(24px, 24px) rotate(0);\n\n transform: translate(24px, 24px) rotate(0);\n}\n\n:host( .to-right-outro ) .window,\n:host( .to-right-outro ) > ::slotted( [slot=\"window\"] ) {\n -webkit-transform: translateX(calc(100% + 50px));\n transform: translateX(calc(100% + 50px));\n }\n\n:host( .to-right-outro ) .button-close {\n -webkit-transform: translate(-24px, 24px) rotate(90deg);\n transform: translate(-24px, 24px) rotate(90deg);\n}\n\n:host( .to-right ) .button-close {\n left: 0rem;\n\n -webkit-transform: translate(-36px, 24px) rotate(-90deg);\n\n transform: translate(-36px, 24px) rotate(-90deg);\n}\n\n:host( .to-top ) {\n padding: 2rem;\n}\n\n@media (max-width: 767px) {\n :host( .to-top ) {\n padding: 1rem;\n }\n}\n\n:host( .to-top ) {\n\n -ms-flex-pack: center;\n\n justify-content: center;\n}\n\n:host( .to-top ) .window,\n:host( .to-top ) > ::slotted( [slot=\"window\"] ) {\n opacity: 0;\n -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n -webkit-transition-duration: 500ms;\n transition-duration: 500ms;\n -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);\n transition-timing-function: cubic-bezier(1, 0, 0, 1);\n}\n\n:host( .to-top-intro ) .window,\n:host( .to-top-intro ) > ::slotted( [slot=\"window\"] ) {\n -webkit-transform: rotateX(-22deg) scale(0.5) translateY(40%);\n transform: rotateX(-22deg) scale(0.5) translateY(40%);\n }\n\n:host( .to-top-opened.to-top-outro ) .window,\n:host( .to-top-opened.to-top-outro ) > ::slotted( [slot=\"window\"] ),\n:host( .to-top-opened ) .window,\n:host( .to-top-opened ) > ::slotted( [slot=\"window\"] ) {\n opacity: 1;\n\n -webkit-transform: rotateX(0) scale(1) translateY(0);\n\n transform: rotateX(0) scale(1) translateY(0);\n}\n\n:host( .to-top-outro ) .window,\n:host( .to-top-outro ) > ::slotted( [slot=\"window\"] ) {\n -webkit-transform: rotateX(-22deg) scale(0.5) translateY(-40%);\n transform: rotateX(-22deg) scale(0.5) translateY(-40%);\n }\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n :host,\n .button-close,\n .window {\n -webkit-transition-duration: 0s !important;\n transition-duration: 0s !important;\n }\n}\n\n@container style(--magma-pref-animation: system) {\n\n @media (prefers-reduced-motion) {\n :host,\n .button-close,\n .window {\n -webkit-transition-duration: 0s !important;\n transition-duration: 0s !important;\n }\n }\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-theme: dark) {\n :host {\n\n --mds-modal-window-background: rgb(var(--tone-neutral-09));\n --mds-modal-window-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3), 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);\n }\n}\n\n@container style(--magma-pref-theme: system) {\n\n @media (prefers-color-scheme: dark) {\n :host {\n\n --mds-modal-window-background: rgb(var(--tone-neutral-09));\n --mds-modal-window-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3), 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);\n }\n }\n}\n\n.static {\n position: static;\n}\n\n.fixed {\n position: fixed;\n}\n\n.absolute {\n position: absolute;\n}\n\n.flex {\n display: -ms-flexbox;\n display: flex;\n}\n\n.w-1600 {\n width: 4rem;\n}\n\n.min-w-0 {\n min-width: 0rem;\n}\n\n.max-w-lg {\n max-width: 32rem;\n}\n\n.max-w-xl {\n max-width: 36rem;\n}\n\n.flex-grow {\n -ms-flex-positive: 1;\n flex-grow: 1;\n}\n\n.items-center {\n -ms-flex-align: center;\n align-items: center;\n}\n\n.gap-400 {\n gap: 1rem;\n}\n\n.truncate {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.border {\n border-width: 1px;\n}\n\n.border-0 {\n border-width: 0rem;\n}\n\n.border-b {\n border-bottom-width: 1px;\n}\n\n.border-t {\n border-top-width: 1px;\n}\n\n.border-solid {\n border-style: solid;\n}\n\n.border-tone-neutral-09 {\n --tw-border-opacity: 1;\n border-color: rgb(var(--tone-neutral-09) / var(--tw-border-opacity));\n}\n\n.bg-label-amaranth-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--label-amaranth-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-aqua-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--label-aqua-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-blue-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--label-blue-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-green-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--label-green-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-lime-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--label-lime-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orange-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--label-orange-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orchid-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--label-orchid-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-violet-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--label-violet-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-yellow-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--label-yellow-10) / var(--tw-bg-opacity));\n}\n\n.bg-tone-neutral-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--tone-neutral-10) / var(--tw-bg-opacity));\n}\n\n.fill-label-amaranth-04 {\n fill: rgb(var(--label-amaranth-04));\n}\n\n.fill-label-aqua-04 {\n fill: rgb(var(--label-aqua-04));\n}\n\n.fill-label-blue-04 {\n fill: rgb(var(--label-blue-04));\n}\n\n.fill-label-green-04 {\n fill: rgb(var(--label-green-04));\n}\n\n.fill-label-lime-04 {\n fill: rgb(var(--label-lime-04));\n}\n\n.fill-label-orange-04 {\n fill: rgb(var(--label-orange-04));\n}\n\n.fill-label-orchid-04 {\n fill: rgb(var(--label-orchid-04));\n}\n\n.fill-label-violet-04 {\n fill: rgb(var(--label-violet-04));\n}\n\n.fill-label-yellow-04 {\n fill: rgb(var(--label-yellow-04));\n}\n\n.fill-tone-neutral-04 {\n fill: rgb(var(--tone-neutral-04));\n}\n\n.p-800 {\n padding: 2rem;\n}\n\n.text-label-amaranth-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--label-amaranth-04) / var(--tw-text-opacity));\n}\n\n.text-label-aqua-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--label-aqua-04) / var(--tw-text-opacity));\n}\n\n.text-label-blue-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--label-blue-04) / var(--tw-text-opacity));\n}\n\n.text-label-green-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--label-green-04) / var(--tw-text-opacity));\n}\n\n.text-label-lime-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--label-lime-04) / var(--tw-text-opacity));\n}\n\n.text-label-orange-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--label-orange-04) / var(--tw-text-opacity));\n}\n\n.text-label-orchid-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--label-orchid-04) / var(--tw-text-opacity));\n}\n\n.text-label-violet-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--label-violet-04) / var(--tw-text-opacity));\n}\n\n.text-label-yellow-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--label-yellow-04) / var(--tw-text-opacity));\n}\n\n.text-tone-neutral-02 {\n --tw-text-opacity: 1;\n color: rgb(var(--tone-neutral-02) / var(--tw-text-opacity));\n}\n\n.text-tone-neutral-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--tone-neutral-04) / var(--tw-text-opacity));\n}\n\n.shadow {\n --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n@container style(--magma-pref-contrast: more) {\n :host {\n\n --mds-modal-window-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6), 0 25px 50px -12px rgb(0 0 0 / 0.25);\n }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n @media (prefers-contrast: more) {\n :host {\n\n --mds-modal-window-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6), 0 25px 50px -12px rgb(0 0 0 / 0.25);\n }\n }\n}\n\n@media (max-width: 767px) {\n .mobile\\:w-1200 {\n width: 3rem;\n }\n}\n\n\n";
58
58
  const MdsModalStyle0 = mdsModalCss;
59
59
 
60
60
  const MdsModal = class {
package/dist/collection/common/date.js ADDED
@@ -0,0 +1,13 @@
1
+ // ISO 8601 date regex allowing optional components (month, day, time)
2
+ const ISO8601RegexString = '^\\d{4}(-\\d{2})?(-\\d{2})?(T\\d{2}(:\\d{2})?(:\\d{2})?(\\.\\d{3})?)?([+-]\\d{2}:\\d{2}|Z)?$';
3
+ const isISO8601Date = (dateString) => {
4
+ const ISO8601Regex = new RegExp(ISO8601RegexString);
5
+ return ISO8601Regex.test(dateString);
6
+ };
7
+ const sanitizeISO8601Date = (dateString) => {
8
+ if (isISO8601Date(dateString)) {
9
+ return dateString;
10
+ }
11
+ return new Date(dateString).toISOString();
12
+ };
13
+ export { sanitizeISO8601Date, isISO8601Date, };
package/dist/collection/common/locale.js CHANGED
@@ -2,15 +2,19 @@ import Handlebars from "handlebars";
2
2
  export class Locale {
3
3
  constructor(configData) {
4
4
  this.rollbackLanguage = 'en';
5
+ this.set = (configData) => {
6
+ this.config = configData;
7
+ };
5
8
  this.lang = (element) => {
6
9
  this.closestElement = element.closest('[lang]');
7
10
  if (this.closestElement) {
8
11
  if (this.closestElement.lang) {
9
12
  this.language = this.closestElement.lang;
10
- return;
13
+ return this.language;
11
14
  }
12
15
  }
13
16
  this.language = this.rollbackLanguage;
17
+ return this.language;
14
18
  };
15
19
  this.pluralize = (tag, context) => {
16
20
  const languagePhrase = this.config[this.language] ? this.config[this.language][tag] : this.config[this.rollbackLanguage][tag];
@@ -43,6 +47,8 @@ export class Locale {
43
47
  }
44
48
  return this.config[this.language] ? this.config[this.language][tag] : this.config[this.rollbackLanguage][tag];
45
49
  };
46
- this.config = configData;
50
+ if (configData) {
51
+ this.set(configData);
52
+ }
47
53
  }
48
54
  }
package/dist/collection/components/mds-modal/mds-modal.css CHANGED
@@ -95,7 +95,7 @@
95
95
  transition-duration: 500ms;
96
96
  transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
97
97
 
98
- --mds-button-icon-color: var(--mds-modal-close-icon-color);
98
+ fill: var(--mds-modal-close-icon-color);
99
99
  --mds-button-background: transparent;
100
100
 
101
101
  height: auto;
package/dist/collection/dictionary/button.js CHANGED
@@ -27,4 +27,9 @@ const buttonIconPositionDictionary = [
27
27
  'left',
28
28
  'right',
29
29
  ];
30
- export { buttonIconPositionDictionary, buttonSizeDictionary, buttonTargetDictionary, buttonToneVariantDictionary, buttonVariantDictionary, };
30
+ const buttonTypeDictionary = [
31
+ 'button',
32
+ 'submit',
33
+ 'reset',
34
+ ];
35
+ export { buttonIconPositionDictionary, buttonSizeDictionary, buttonTargetDictionary, buttonToneVariantDictionary, buttonTypeDictionary, buttonVariantDictionary, };
package/dist/collection/dictionary/variant.js CHANGED
@@ -83,8 +83,13 @@ const toneSimpleVariantDictionary = [
83
83
  'weak',
84
84
  'quiet',
85
85
  ];
86
+ const toneSmartVariantDictionary = [
87
+ 'strong',
88
+ 'weak',
89
+ 'ghost',
90
+ ];
86
91
  const toneMinimalVariantDictionary = [
87
92
  'strong',
88
93
  'weak',
89
94
  ];
90
- export { themeFullVariantAvatarDictionary, themeFullVariantDictionary, themeLabelVariantDictionary, themeLuminanceVariantDictionary, themeStatusVariantDictionary, themeVariantDictionary, toneActionVariantDictionary, toneMinimalVariantDictionary, toneSimpleVariantDictionary, toneVariantDictionary, };
95
+ export { themeFullVariantAvatarDictionary, themeFullVariantDictionary, themeLabelVariantDictionary, themeLuminanceVariantDictionary, themeStatusVariantDictionary, themeVariantDictionary, toneActionVariantDictionary, toneMinimalVariantDictionary, toneSimpleVariantDictionary, toneSmartVariantDictionary, toneVariantDictionary, };
package/dist/collection/type/date.js ADDED
@@ -0,0 +1 @@
1
+ export {};
package/dist/components/mds-modal.js CHANGED
@@ -50,7 +50,7 @@ class KeyboardManager {
50
50
  }
51
51
  }
52
52
 
53
- const mdsModalCss = "@-webkit-keyframes focus-bounce {\n 0%, 75%, 100% {\n outline-offset: var(--magma-outline-focus-offset, 6px);\n }\n\n 50% {\n outline-offset: var(--magma-outline-blur-offset, 2px);\n }\n}\n @keyframes focus-bounce {\n 0%, 75%, 100% {\n outline-offset: var(--magma-outline-focus-offset, 6px);\n }\n\n 50% {\n outline-offset: var(--magma-outline-blur-offset, 2px);\n }\n}\n /* included for focus effect */\n@tailwind components;\n@tailwind utilities;\n\n@tailwind components;\n@tailwind utilities;\n\n\n.svg {\n display: -ms-flexbox;\n display: flex;\n}\n\n\n.svg svg {\n aspect-ratio: 1/1;\n height: 100%;\n width: 100%;\n}\n\n\n.animate-right-intro,\n .animate-right-outro {\n -webkit-transform: translateX(calc(100% + 50px));\n transform: translateX(calc(100% + 50px));\n }\n@tailwind utilities;\n\n/**\n * @prop --mds-modal-close-icon-color: Set the color of the close icon button to the top left.\n * @prop --mds-modal-overlay-color: Set the overlay color of the background when the component is opened, this property can be inherited from `globals.css` in `styles^8.0.0`.\n * @prop --mds-modal-overlay-opacity: Set the overlay color opacity of the background when the component is opened, this property can be inherited from `globals.css` in `styles^8.0.0`.\n * @prop --mds-modal-window-background: Set the background color of the window\n * @prop --mds-modal-window-overflow: Set the overflow of the window\n * @prop --mds-modal-window-shadow: Set the box shadow of the window\n * @prop --mds-modal-z-index: Set the z-index of the window when the component is opened\n */\n\n:host {\n\n --mds-modal-close-icon-color: rgb(var(--tone-neutral));\n --mds-modal-overlay-color: var(--magma-overlay-color, 0 0 0);\n --mds-modal-overlay-opacity: var(--magma-overlay-opacity, 0.5);\n --mds-modal-window-background: rgb(var(--tone-neutral));\n --mds-modal-window-overflow: auto;\n --mds-modal-window-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);\n --mds-modal-z-index: var(--magma-modal-z-index);\n -webkit-transition-duration: 700ms;\n transition-duration: 700ms;\n -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);\n transition-timing-function: cubic-bezier(1, 0, 0, 1);\n\n -ms-flex-align: center;\n\n align-items: center;\n background-color: rgba(var(--mds-modal-overlay-color) / 0);\n display: -ms-flexbox;\n display: flex;\n fill: rgb(var(--tone-neutral));\n inset: 0;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-perspective: 600px;\n perspective: 600px;\n pointer-events: none;\n position: fixed;\n z-index: var(--mds-modal-z-index, 1000);\n}\n\n:host( [position=\"top\"] ) {\n -ms-flex-align: start;\n align-items: flex-start;\n -ms-flex-pack: center;\n justify-content: center;\n}\n\n:host( [position=\"bottom\"] ) {\n -ms-flex-align: end;\n align-items: flex-end;\n -ms-flex-pack: center;\n justify-content: center;\n}\n\n:host( .to-bottom-opened ),\n:host( .to-center-opened ),\n:host( .to-left-opened ),\n:host( .to-right-opened ),\n:host( .to-top-opened ) {\n -webkit-transition-duration: 500ms;\n transition-duration: 500ms;\n\n background-color: rgba(var(--mds-modal-overlay-color) / var(--mds-modal-overlay-opacity));\n pointer-events: auto;\n}\n\n.button-close {\n top: 0rem;\n border-radius: 9999px;\n opacity: 0;\n -webkit-transition-duration: 500ms;\n transition-duration: 500ms;\n -webkit-transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);\n transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);\n\n --mds-button-icon-color: var(--mds-modal-close-icon-color);\n --mds-button-background: transparent;\n\n height: auto;\n position: absolute;\n -webkit-transform: translate(0, 24px) rotate(90deg);\n transform: translate(0, 24px) rotate(90deg);\n -webkit-transform-origin: center;\n transform-origin: center;\n -webkit-transition-property: opacity, outline, outline-offset, -webkit-transform;\n transition-property: opacity, outline, outline-offset, -webkit-transform;\n transition-property: opacity, outline, outline-offset, transform;\n transition-property: opacity, outline, outline-offset, transform, -webkit-transform;\n}\n\n.button-close::part(icon) {\n height: 2.25rem;\n width: 2.25rem;\n}\n\n.window {\n height: 100%;\n gap: 0rem;\n\n background-color: var(--mds-modal-window-background);\n -webkit-box-shadow: var(--mds-modal-window-shadow);\n box-shadow: var(--mds-modal-window-shadow);\n display: grid;\n grid-template-rows: 1fr;\n max-width: calc(100vw - 80px);\n overflow: var(--mds-modal-window-overflow);\n}\n\n.window--top {\n grid-template-rows: auto 1fr;\n}\n\n.window--bottom {\n grid-template-rows: 1fr auto;\n}\n\n.window--top-bottom {\n grid-template-rows: auto 1fr auto;\n}\n\n/* xx */\n\n:host( .to-bottom ) {\n padding: 2rem;\n}\n\n@media (max-width: 767px) {\n :host( .to-bottom ) {\n padding: 1rem;\n }\n}\n\n:host( .to-bottom ) {\n\n -ms-flex-pack: center;\n\n justify-content: center;\n}\n\n:host( .to-bottom ) .window,\n:host( .to-bottom ) > ::slotted( [slot=\"window\"] ) {\n opacity: 0;\n -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n -webkit-transition-duration: 500ms;\n transition-duration: 500ms;\n -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);\n transition-timing-function: cubic-bezier(1, 0, 0, 1);\n}\n\n:host( .to-bottom-intro ) .window,\n:host( .to-bottom-intro ) > ::slotted( [slot=\"window\"] ) {\n -webkit-transform: rotateX(-22deg) scale(0.5) translateY(40%);\n transform: rotateX(-22deg) scale(0.5) translateY(40%);\n }\n\n:host( .to-bottom-opened.to-bottom-outro ) .window,\n:host( .to-bottom-opened.to-bottom-outro ) > ::slotted( [slot=\"window\"] ),\n:host( .to-bottom-opened ) .window,\n:host( .to-bottom-opened ) > ::slotted( [slot=\"window\"] ) {\n opacity: 1;\n\n -webkit-transform: rotateX(0) scale(1) translateY(0);\n\n transform: rotateX(0) scale(1) translateY(0);\n}\n\n:host( .to-bottom-outro ) .window,\n:host( .to-bottom-outro ) > ::slotted( [slot=\"window\"] ) {\n -webkit-transform: rotateX(-22deg) scale(0.5) translateY(-40%);\n transform: rotateX(-22deg) scale(0.5) translateY(-40%);\n }\n\n:host( .to-center ) {\n padding: 2rem;\n}\n\n@media (max-width: 767px) {\n :host( .to-center ) {\n padding: 1rem;\n }\n}\n\n:host( .to-center ) {\n\n -ms-flex-pack: center;\n\n justify-content: center;\n}\n\n:host( .to-center ) .window,\n:host( .to-center ) > ::slotted( [slot=\"window\"] ) {\n opacity: 0;\n -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n -webkit-transition-duration: 500ms;\n transition-duration: 500ms;\n -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);\n transition-timing-function: cubic-bezier(1, 0, 0, 1);\n}\n\n:host( .to-center-intro ) .window,\n:host( .to-center-intro ) > ::slotted( [slot=\"window\"] ) {\n -webkit-transform: rotateX(-22deg) scale(0.5) translateY(40%);\n transform: rotateX(-22deg) scale(0.5) translateY(40%);\n }\n\n:host( .to-center-opened.to-center-outro ) .window,\n:host( .to-center-opened.to-center-outro ) > ::slotted( [slot=\"window\"] ),\n:host( .to-center-opened ) .window,\n:host( .to-center-opened ) > ::slotted( [slot=\"window\"] ) {\n opacity: 1;\n\n -webkit-transform: rotateX(0) scale(1) translateY(0);\n\n transform: rotateX(0) scale(1) translateY(0);\n}\n\n:host( .to-center-outro ) .window,\n:host( .to-center-outro ) > ::slotted( [slot=\"window\"] ) {\n -webkit-transform: rotateX(-22deg) scale(0.5) translateY(-40%);\n transform: rotateX(-22deg) scale(0.5) translateY(-40%);\n }\n\n:host( .to-left ) {\n -ms-flex-pack: start;\n justify-content: flex-start;\n}\n\n:host( .to-left ) .window,\n:host( .to-left ) > ::slotted( [slot=\"window\"] ) {\n opacity: 0;\n -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n -webkit-transition-duration: 500ms;\n transition-duration: 500ms;\n -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);\n transition-timing-function: cubic-bezier(1, 0, 0, 1);\n}\n\n:host( .to-left-intro ) .window,\n:host( .to-left-intro ) > ::slotted( [slot=\"window\"] ) {\n -webkit-transform: translateX(calc(-100% - 50px));\n transform: translateX(calc(-100% - 50px));\n }\n\n:host( .to-left-opened.to-left-outro ) .window,\n:host( .to-left-opened.to-left-outro ) > ::slotted( [slot=\"window\"] ),\n:host( .to-left-opened ) .window,\n:host( .to-left-opened ) > ::slotted( [slot=\"window\"] ) {\n opacity: 1;\n\n -webkit-transform: translateX(0);\n\n transform: translateX(0);\n}\n\n:host( .to-left-opened ) .button-close,\n:host( .to-left-opened.to-left-outro ) .button-close {\n opacity: 1;\n\n -webkit-transform: translate(-24px, 24px) rotate(0);\n\n transform: translate(-24px, 24px) rotate(0);\n}\n\n:host( .to-left-outro ) .window,\n:host( .to-left-outro ) > ::slotted( [slot=\"window\"] ) {\n -webkit-transform: translateX(calc(-100% - 50px));\n transform: translateX(calc(-100% - 50px));\n }\n\n:host( .to-left-outro ) .button-close {\n -webkit-transform: translate(24px, 24px) rotate(-90deg);\n transform: translate(24px, 24px) rotate(-90deg);\n}\n\n:host( .to-left ) .button-close {\n right: 0rem;\n\n -webkit-transform: translate(36px, 24px) rotate(90deg);\n\n transform: translate(36px, 24px) rotate(90deg);\n}\n\n:host( .to-right ) {\n -ms-flex-pack: end;\n justify-content: flex-end;\n}\n\n:host( .to-right ) .window,\n:host( .to-right ) > ::slotted([slot=\"window\"]) {\n opacity: 0;\n -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n -webkit-transition-duration: 500ms;\n transition-duration: 500ms;\n -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);\n transition-timing-function: cubic-bezier(1, 0, 0, 1);\n}\n\n:host( .to-right-intro ) .window,\n:host( .to-right-intro ) > ::slotted( [slot=\"window\"] ) {\n -webkit-transform: translateX(calc(100% + 50px));\n transform: translateX(calc(100% + 50px));\n }\n\n:host( .to-right-opened.to-right-outro ) .window,\n:host( .to-right-opened.to-right-outro ) > ::slotted( [slot=\"window\"] ),\n:host( .to-right-opened ) .window,\n:host( .to-right-opened ) > ::slotted( [slot=\"window\"] ) {\n opacity: 1;\n\n -webkit-transform: translateX(0);\n\n transform: translateX(0);\n}\n\n:host( .to-right-opened ) .button-close,\n:host( .to-right-opened.to-right-outro ) .button-close {\n opacity: 1;\n\n -webkit-transform: translate(24px, 24px) rotate(0);\n\n transform: translate(24px, 24px) rotate(0);\n}\n\n:host( .to-right-outro ) .window,\n:host( .to-right-outro ) > ::slotted( [slot=\"window\"] ) {\n -webkit-transform: translateX(calc(100% + 50px));\n transform: translateX(calc(100% + 50px));\n }\n\n:host( .to-right-outro ) .button-close {\n -webkit-transform: translate(-24px, 24px) rotate(90deg);\n transform: translate(-24px, 24px) rotate(90deg);\n}\n\n:host( .to-right ) .button-close {\n left: 0rem;\n\n -webkit-transform: translate(-36px, 24px) rotate(-90deg);\n\n transform: translate(-36px, 24px) rotate(-90deg);\n}\n\n:host( .to-top ) {\n padding: 2rem;\n}\n\n@media (max-width: 767px) {\n :host( .to-top ) {\n padding: 1rem;\n }\n}\n\n:host( .to-top ) {\n\n -ms-flex-pack: center;\n\n justify-content: center;\n}\n\n:host( .to-top ) .window,\n:host( .to-top ) > ::slotted( [slot=\"window\"] ) {\n opacity: 0;\n -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n -webkit-transition-duration: 500ms;\n transition-duration: 500ms;\n -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);\n transition-timing-function: cubic-bezier(1, 0, 0, 1);\n}\n\n:host( .to-top-intro ) .window,\n:host( .to-top-intro ) > ::slotted( [slot=\"window\"] ) {\n -webkit-transform: rotateX(-22deg) scale(0.5) translateY(40%);\n transform: rotateX(-22deg) scale(0.5) translateY(40%);\n }\n\n:host( .to-top-opened.to-top-outro ) .window,\n:host( .to-top-opened.to-top-outro ) > ::slotted( [slot=\"window\"] ),\n:host( .to-top-opened ) .window,\n:host( .to-top-opened ) > ::slotted( [slot=\"window\"] ) {\n opacity: 1;\n\n -webkit-transform: rotateX(0) scale(1) translateY(0);\n\n transform: rotateX(0) scale(1) translateY(0);\n}\n\n:host( .to-top-outro ) .window,\n:host( .to-top-outro ) > ::slotted( [slot=\"window\"] ) {\n -webkit-transform: rotateX(-22deg) scale(0.5) translateY(-40%);\n transform: rotateX(-22deg) scale(0.5) translateY(-40%);\n }\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n :host,\n .button-close,\n .window {\n -webkit-transition-duration: 0s !important;\n transition-duration: 0s !important;\n }\n}\n\n@container style(--magma-pref-animation: system) {\n\n @media (prefers-reduced-motion) {\n :host,\n .button-close,\n .window {\n -webkit-transition-duration: 0s !important;\n transition-duration: 0s !important;\n }\n }\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-theme: dark) {\n :host {\n\n --mds-modal-window-background: rgb(var(--tone-neutral-09));\n --mds-modal-window-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3), 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);\n }\n}\n\n@container style(--magma-pref-theme: system) {\n\n @media (prefers-color-scheme: dark) {\n :host {\n\n --mds-modal-window-background: rgb(var(--tone-neutral-09));\n --mds-modal-window-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3), 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);\n }\n }\n}\n\n.static {\n position: static;\n}\n\n.fixed {\n position: fixed;\n}\n\n.absolute {\n position: absolute;\n}\n\n.flex {\n display: -ms-flexbox;\n display: flex;\n}\n\n.w-1600 {\n width: 4rem;\n}\n\n.min-w-0 {\n min-width: 0rem;\n}\n\n.max-w-lg {\n max-width: 32rem;\n}\n\n.max-w-xl {\n max-width: 36rem;\n}\n\n.flex-grow {\n -ms-flex-positive: 1;\n flex-grow: 1;\n}\n\n.items-center {\n -ms-flex-align: center;\n align-items: center;\n}\n\n.gap-400 {\n gap: 1rem;\n}\n\n.truncate {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.border {\n border-width: 1px;\n}\n\n.border-0 {\n border-width: 0rem;\n}\n\n.border-b {\n border-bottom-width: 1px;\n}\n\n.border-t {\n border-top-width: 1px;\n}\n\n.border-solid {\n border-style: solid;\n}\n\n.border-tone-neutral-09 {\n --tw-border-opacity: 1;\n border-color: rgb(var(--tone-neutral-09) / var(--tw-border-opacity));\n}\n\n.bg-label-amaranth-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--label-amaranth-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-aqua-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--label-aqua-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-blue-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--label-blue-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-green-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--label-green-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-lime-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--label-lime-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orange-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--label-orange-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orchid-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--label-orchid-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-violet-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--label-violet-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-yellow-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--label-yellow-10) / var(--tw-bg-opacity));\n}\n\n.bg-tone-neutral-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--tone-neutral-10) / var(--tw-bg-opacity));\n}\n\n.fill-label-amaranth-04 {\n fill: rgb(var(--label-amaranth-04));\n}\n\n.fill-label-aqua-04 {\n fill: rgb(var(--label-aqua-04));\n}\n\n.fill-label-blue-04 {\n fill: rgb(var(--label-blue-04));\n}\n\n.fill-label-green-04 {\n fill: rgb(var(--label-green-04));\n}\n\n.fill-label-lime-04 {\n fill: rgb(var(--label-lime-04));\n}\n\n.fill-label-orange-04 {\n fill: rgb(var(--label-orange-04));\n}\n\n.fill-label-orchid-04 {\n fill: rgb(var(--label-orchid-04));\n}\n\n.fill-label-violet-04 {\n fill: rgb(var(--label-violet-04));\n}\n\n.fill-label-yellow-04 {\n fill: rgb(var(--label-yellow-04));\n}\n\n.fill-tone-neutral-04 {\n fill: rgb(var(--tone-neutral-04));\n}\n\n.p-800 {\n padding: 2rem;\n}\n\n.text-label-amaranth-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--label-amaranth-04) / var(--tw-text-opacity));\n}\n\n.text-label-aqua-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--label-aqua-04) / var(--tw-text-opacity));\n}\n\n.text-label-blue-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--label-blue-04) / var(--tw-text-opacity));\n}\n\n.text-label-green-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--label-green-04) / var(--tw-text-opacity));\n}\n\n.text-label-lime-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--label-lime-04) / var(--tw-text-opacity));\n}\n\n.text-label-orange-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--label-orange-04) / var(--tw-text-opacity));\n}\n\n.text-label-orchid-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--label-orchid-04) / var(--tw-text-opacity));\n}\n\n.text-label-violet-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--label-violet-04) / var(--tw-text-opacity));\n}\n\n.text-label-yellow-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--label-yellow-04) / var(--tw-text-opacity));\n}\n\n.text-tone-neutral-02 {\n --tw-text-opacity: 1;\n color: rgb(var(--tone-neutral-02) / var(--tw-text-opacity));\n}\n\n.text-tone-neutral-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--tone-neutral-04) / var(--tw-text-opacity));\n}\n\n.shadow {\n --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n@container style(--magma-pref-contrast: more) {\n :host {\n\n --mds-modal-window-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6), 0 25px 50px -12px rgb(0 0 0 / 0.25);\n }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n @media (prefers-contrast: more) {\n :host {\n\n --mds-modal-window-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6), 0 25px 50px -12px rgb(0 0 0 / 0.25);\n }\n }\n}\n\n@media (max-width: 767px) {\n .mobile\\:w-1200 {\n width: 3rem;\n }\n}\n\n\n";
53
+ const mdsModalCss = "@-webkit-keyframes focus-bounce {\n 0%, 75%, 100% {\n outline-offset: var(--magma-outline-focus-offset, 6px);\n }\n\n 50% {\n outline-offset: var(--magma-outline-blur-offset, 2px);\n }\n}\n @keyframes focus-bounce {\n 0%, 75%, 100% {\n outline-offset: var(--magma-outline-focus-offset, 6px);\n }\n\n 50% {\n outline-offset: var(--magma-outline-blur-offset, 2px);\n }\n}\n /* included for focus effect */\n@tailwind components;\n@tailwind utilities;\n\n@tailwind components;\n@tailwind utilities;\n\n\n.svg {\n display: -ms-flexbox;\n display: flex;\n}\n\n\n.svg svg {\n aspect-ratio: 1/1;\n height: 100%;\n width: 100%;\n}\n\n\n.animate-right-intro,\n .animate-right-outro {\n -webkit-transform: translateX(calc(100% + 50px));\n transform: translateX(calc(100% + 50px));\n }\n@tailwind utilities;\n\n/**\n * @prop --mds-modal-close-icon-color: Set the color of the close icon button to the top left.\n * @prop --mds-modal-overlay-color: Set the overlay color of the background when the component is opened, this property can be inherited from `globals.css` in `styles^8.0.0`.\n * @prop --mds-modal-overlay-opacity: Set the overlay color opacity of the background when the component is opened, this property can be inherited from `globals.css` in `styles^8.0.0`.\n * @prop --mds-modal-window-background: Set the background color of the window\n * @prop --mds-modal-window-overflow: Set the overflow of the window\n * @prop --mds-modal-window-shadow: Set the box shadow of the window\n * @prop --mds-modal-z-index: Set the z-index of the window when the component is opened\n */\n\n:host {\n\n --mds-modal-close-icon-color: rgb(var(--tone-neutral));\n --mds-modal-overlay-color: var(--magma-overlay-color, 0 0 0);\n --mds-modal-overlay-opacity: var(--magma-overlay-opacity, 0.5);\n --mds-modal-window-background: rgb(var(--tone-neutral));\n --mds-modal-window-overflow: auto;\n --mds-modal-window-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);\n --mds-modal-z-index: var(--magma-modal-z-index);\n -webkit-transition-duration: 700ms;\n transition-duration: 700ms;\n -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);\n transition-timing-function: cubic-bezier(1, 0, 0, 1);\n\n -ms-flex-align: center;\n\n align-items: center;\n background-color: rgba(var(--mds-modal-overlay-color) / 0);\n display: -ms-flexbox;\n display: flex;\n fill: rgb(var(--tone-neutral));\n inset: 0;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-perspective: 600px;\n perspective: 600px;\n pointer-events: none;\n position: fixed;\n z-index: var(--mds-modal-z-index, 1000);\n}\n\n:host( [position=\"top\"] ) {\n -ms-flex-align: start;\n align-items: flex-start;\n -ms-flex-pack: center;\n justify-content: center;\n}\n\n:host( [position=\"bottom\"] ) {\n -ms-flex-align: end;\n align-items: flex-end;\n -ms-flex-pack: center;\n justify-content: center;\n}\n\n:host( .to-bottom-opened ),\n:host( .to-center-opened ),\n:host( .to-left-opened ),\n:host( .to-right-opened ),\n:host( .to-top-opened ) {\n -webkit-transition-duration: 500ms;\n transition-duration: 500ms;\n\n background-color: rgba(var(--mds-modal-overlay-color) / var(--mds-modal-overlay-opacity));\n pointer-events: auto;\n}\n\n.button-close {\n top: 0rem;\n border-radius: 9999px;\n opacity: 0;\n -webkit-transition-duration: 500ms;\n transition-duration: 500ms;\n -webkit-transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);\n transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);\n\n fill: var(--mds-modal-close-icon-color);\n --mds-button-background: transparent;\n\n height: auto;\n position: absolute;\n -webkit-transform: translate(0, 24px) rotate(90deg);\n transform: translate(0, 24px) rotate(90deg);\n -webkit-transform-origin: center;\n transform-origin: center;\n -webkit-transition-property: opacity, outline, outline-offset, -webkit-transform;\n transition-property: opacity, outline, outline-offset, -webkit-transform;\n transition-property: opacity, outline, outline-offset, transform;\n transition-property: opacity, outline, outline-offset, transform, -webkit-transform;\n}\n\n.button-close::part(icon) {\n height: 2.25rem;\n width: 2.25rem;\n}\n\n.window {\n height: 100%;\n gap: 0rem;\n\n background-color: var(--mds-modal-window-background);\n -webkit-box-shadow: var(--mds-modal-window-shadow);\n box-shadow: var(--mds-modal-window-shadow);\n display: grid;\n grid-template-rows: 1fr;\n max-width: calc(100vw - 80px);\n overflow: var(--mds-modal-window-overflow);\n}\n\n.window--top {\n grid-template-rows: auto 1fr;\n}\n\n.window--bottom {\n grid-template-rows: 1fr auto;\n}\n\n.window--top-bottom {\n grid-template-rows: auto 1fr auto;\n}\n\n/* xx */\n\n:host( .to-bottom ) {\n padding: 2rem;\n}\n\n@media (max-width: 767px) {\n :host( .to-bottom ) {\n padding: 1rem;\n }\n}\n\n:host( .to-bottom ) {\n\n -ms-flex-pack: center;\n\n justify-content: center;\n}\n\n:host( .to-bottom ) .window,\n:host( .to-bottom ) > ::slotted( [slot=\"window\"] ) {\n opacity: 0;\n -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n -webkit-transition-duration: 500ms;\n transition-duration: 500ms;\n -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);\n transition-timing-function: cubic-bezier(1, 0, 0, 1);\n}\n\n:host( .to-bottom-intro ) .window,\n:host( .to-bottom-intro ) > ::slotted( [slot=\"window\"] ) {\n -webkit-transform: rotateX(-22deg) scale(0.5) translateY(40%);\n transform: rotateX(-22deg) scale(0.5) translateY(40%);\n }\n\n:host( .to-bottom-opened.to-bottom-outro ) .window,\n:host( .to-bottom-opened.to-bottom-outro ) > ::slotted( [slot=\"window\"] ),\n:host( .to-bottom-opened ) .window,\n:host( .to-bottom-opened ) > ::slotted( [slot=\"window\"] ) {\n opacity: 1;\n\n -webkit-transform: rotateX(0) scale(1) translateY(0);\n\n transform: rotateX(0) scale(1) translateY(0);\n}\n\n:host( .to-bottom-outro ) .window,\n:host( .to-bottom-outro ) > ::slotted( [slot=\"window\"] ) {\n -webkit-transform: rotateX(-22deg) scale(0.5) translateY(-40%);\n transform: rotateX(-22deg) scale(0.5) translateY(-40%);\n }\n\n:host( .to-center ) {\n padding: 2rem;\n}\n\n@media (max-width: 767px) {\n :host( .to-center ) {\n padding: 1rem;\n }\n}\n\n:host( .to-center ) {\n\n -ms-flex-pack: center;\n\n justify-content: center;\n}\n\n:host( .to-center ) .window,\n:host( .to-center ) > ::slotted( [slot=\"window\"] ) {\n opacity: 0;\n -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n -webkit-transition-duration: 500ms;\n transition-duration: 500ms;\n -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);\n transition-timing-function: cubic-bezier(1, 0, 0, 1);\n}\n\n:host( .to-center-intro ) .window,\n:host( .to-center-intro ) > ::slotted( [slot=\"window\"] ) {\n -webkit-transform: rotateX(-22deg) scale(0.5) translateY(40%);\n transform: rotateX(-22deg) scale(0.5) translateY(40%);\n }\n\n:host( .to-center-opened.to-center-outro ) .window,\n:host( .to-center-opened.to-center-outro ) > ::slotted( [slot=\"window\"] ),\n:host( .to-center-opened ) .window,\n:host( .to-center-opened ) > ::slotted( [slot=\"window\"] ) {\n opacity: 1;\n\n -webkit-transform: rotateX(0) scale(1) translateY(0);\n\n transform: rotateX(0) scale(1) translateY(0);\n}\n\n:host( .to-center-outro ) .window,\n:host( .to-center-outro ) > ::slotted( [slot=\"window\"] ) {\n -webkit-transform: rotateX(-22deg) scale(0.5) translateY(-40%);\n transform: rotateX(-22deg) scale(0.5) translateY(-40%);\n }\n\n:host( .to-left ) {\n -ms-flex-pack: start;\n justify-content: flex-start;\n}\n\n:host( .to-left ) .window,\n:host( .to-left ) > ::slotted( [slot=\"window\"] ) {\n opacity: 0;\n -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n -webkit-transition-duration: 500ms;\n transition-duration: 500ms;\n -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);\n transition-timing-function: cubic-bezier(1, 0, 0, 1);\n}\n\n:host( .to-left-intro ) .window,\n:host( .to-left-intro ) > ::slotted( [slot=\"window\"] ) {\n -webkit-transform: translateX(calc(-100% - 50px));\n transform: translateX(calc(-100% - 50px));\n }\n\n:host( .to-left-opened.to-left-outro ) .window,\n:host( .to-left-opened.to-left-outro ) > ::slotted( [slot=\"window\"] ),\n:host( .to-left-opened ) .window,\n:host( .to-left-opened ) > ::slotted( [slot=\"window\"] ) {\n opacity: 1;\n\n -webkit-transform: translateX(0);\n\n transform: translateX(0);\n}\n\n:host( .to-left-opened ) .button-close,\n:host( .to-left-opened.to-left-outro ) .button-close {\n opacity: 1;\n\n -webkit-transform: translate(-24px, 24px) rotate(0);\n\n transform: translate(-24px, 24px) rotate(0);\n}\n\n:host( .to-left-outro ) .window,\n:host( .to-left-outro ) > ::slotted( [slot=\"window\"] ) {\n -webkit-transform: translateX(calc(-100% - 50px));\n transform: translateX(calc(-100% - 50px));\n }\n\n:host( .to-left-outro ) .button-close {\n -webkit-transform: translate(24px, 24px) rotate(-90deg);\n transform: translate(24px, 24px) rotate(-90deg);\n}\n\n:host( .to-left ) .button-close {\n right: 0rem;\n\n -webkit-transform: translate(36px, 24px) rotate(90deg);\n\n transform: translate(36px, 24px) rotate(90deg);\n}\n\n:host( .to-right ) {\n -ms-flex-pack: end;\n justify-content: flex-end;\n}\n\n:host( .to-right ) .window,\n:host( .to-right ) > ::slotted([slot=\"window\"]) {\n opacity: 0;\n -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n -webkit-transition-duration: 500ms;\n transition-duration: 500ms;\n -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);\n transition-timing-function: cubic-bezier(1, 0, 0, 1);\n}\n\n:host( .to-right-intro ) .window,\n:host( .to-right-intro ) > ::slotted( [slot=\"window\"] ) {\n -webkit-transform: translateX(calc(100% + 50px));\n transform: translateX(calc(100% + 50px));\n }\n\n:host( .to-right-opened.to-right-outro ) .window,\n:host( .to-right-opened.to-right-outro ) > ::slotted( [slot=\"window\"] ),\n:host( .to-right-opened ) .window,\n:host( .to-right-opened ) > ::slotted( [slot=\"window\"] ) {\n opacity: 1;\n\n -webkit-transform: translateX(0);\n\n transform: translateX(0);\n}\n\n:host( .to-right-opened ) .button-close,\n:host( .to-right-opened.to-right-outro ) .button-close {\n opacity: 1;\n\n -webkit-transform: translate(24px, 24px) rotate(0);\n\n transform: translate(24px, 24px) rotate(0);\n}\n\n:host( .to-right-outro ) .window,\n:host( .to-right-outro ) > ::slotted( [slot=\"window\"] ) {\n -webkit-transform: translateX(calc(100% + 50px));\n transform: translateX(calc(100% + 50px));\n }\n\n:host( .to-right-outro ) .button-close {\n -webkit-transform: translate(-24px, 24px) rotate(90deg);\n transform: translate(-24px, 24px) rotate(90deg);\n}\n\n:host( .to-right ) .button-close {\n left: 0rem;\n\n -webkit-transform: translate(-36px, 24px) rotate(-90deg);\n\n transform: translate(-36px, 24px) rotate(-90deg);\n}\n\n:host( .to-top ) {\n padding: 2rem;\n}\n\n@media (max-width: 767px) {\n :host( .to-top ) {\n padding: 1rem;\n }\n}\n\n:host( .to-top ) {\n\n -ms-flex-pack: center;\n\n justify-content: center;\n}\n\n:host( .to-top ) .window,\n:host( .to-top ) > ::slotted( [slot=\"window\"] ) {\n opacity: 0;\n -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n -webkit-transition-duration: 500ms;\n transition-duration: 500ms;\n -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);\n transition-timing-function: cubic-bezier(1, 0, 0, 1);\n}\n\n:host( .to-top-intro ) .window,\n:host( .to-top-intro ) > ::slotted( [slot=\"window\"] ) {\n -webkit-transform: rotateX(-22deg) scale(0.5) translateY(40%);\n transform: rotateX(-22deg) scale(0.5) translateY(40%);\n }\n\n:host( .to-top-opened.to-top-outro ) .window,\n:host( .to-top-opened.to-top-outro ) > ::slotted( [slot=\"window\"] ),\n:host( .to-top-opened ) .window,\n:host( .to-top-opened ) > ::slotted( [slot=\"window\"] ) {\n opacity: 1;\n\n -webkit-transform: rotateX(0) scale(1) translateY(0);\n\n transform: rotateX(0) scale(1) translateY(0);\n}\n\n:host( .to-top-outro ) .window,\n:host( .to-top-outro ) > ::slotted( [slot=\"window\"] ) {\n -webkit-transform: rotateX(-22deg) scale(0.5) translateY(-40%);\n transform: rotateX(-22deg) scale(0.5) translateY(-40%);\n }\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n :host,\n .button-close,\n .window {\n -webkit-transition-duration: 0s !important;\n transition-duration: 0s !important;\n }\n}\n\n@container style(--magma-pref-animation: system) {\n\n @media (prefers-reduced-motion) {\n :host,\n .button-close,\n .window {\n -webkit-transition-duration: 0s !important;\n transition-duration: 0s !important;\n }\n }\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-theme: dark) {\n :host {\n\n --mds-modal-window-background: rgb(var(--tone-neutral-09));\n --mds-modal-window-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3), 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);\n }\n}\n\n@container style(--magma-pref-theme: system) {\n\n @media (prefers-color-scheme: dark) {\n :host {\n\n --mds-modal-window-background: rgb(var(--tone-neutral-09));\n --mds-modal-window-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3), 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);\n }\n }\n}\n\n.static {\n position: static;\n}\n\n.fixed {\n position: fixed;\n}\n\n.absolute {\n position: absolute;\n}\n\n.flex {\n display: -ms-flexbox;\n display: flex;\n}\n\n.w-1600 {\n width: 4rem;\n}\n\n.min-w-0 {\n min-width: 0rem;\n}\n\n.max-w-lg {\n max-width: 32rem;\n}\n\n.max-w-xl {\n max-width: 36rem;\n}\n\n.flex-grow {\n -ms-flex-positive: 1;\n flex-grow: 1;\n}\n\n.items-center {\n -ms-flex-align: center;\n align-items: center;\n}\n\n.gap-400 {\n gap: 1rem;\n}\n\n.truncate {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.border {\n border-width: 1px;\n}\n\n.border-0 {\n border-width: 0rem;\n}\n\n.border-b {\n border-bottom-width: 1px;\n}\n\n.border-t {\n border-top-width: 1px;\n}\n\n.border-solid {\n border-style: solid;\n}\n\n.border-tone-neutral-09 {\n --tw-border-opacity: 1;\n border-color: rgb(var(--tone-neutral-09) / var(--tw-border-opacity));\n}\n\n.bg-label-amaranth-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--label-amaranth-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-aqua-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--label-aqua-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-blue-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--label-blue-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-green-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--label-green-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-lime-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--label-lime-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orange-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--label-orange-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orchid-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--label-orchid-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-violet-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--label-violet-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-yellow-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--label-yellow-10) / var(--tw-bg-opacity));\n}\n\n.bg-tone-neutral-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--tone-neutral-10) / var(--tw-bg-opacity));\n}\n\n.fill-label-amaranth-04 {\n fill: rgb(var(--label-amaranth-04));\n}\n\n.fill-label-aqua-04 {\n fill: rgb(var(--label-aqua-04));\n}\n\n.fill-label-blue-04 {\n fill: rgb(var(--label-blue-04));\n}\n\n.fill-label-green-04 {\n fill: rgb(var(--label-green-04));\n}\n\n.fill-label-lime-04 {\n fill: rgb(var(--label-lime-04));\n}\n\n.fill-label-orange-04 {\n fill: rgb(var(--label-orange-04));\n}\n\n.fill-label-orchid-04 {\n fill: rgb(var(--label-orchid-04));\n}\n\n.fill-label-violet-04 {\n fill: rgb(var(--label-violet-04));\n}\n\n.fill-label-yellow-04 {\n fill: rgb(var(--label-yellow-04));\n}\n\n.fill-tone-neutral-04 {\n fill: rgb(var(--tone-neutral-04));\n}\n\n.p-800 {\n padding: 2rem;\n}\n\n.text-label-amaranth-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--label-amaranth-04) / var(--tw-text-opacity));\n}\n\n.text-label-aqua-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--label-aqua-04) / var(--tw-text-opacity));\n}\n\n.text-label-blue-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--label-blue-04) / var(--tw-text-opacity));\n}\n\n.text-label-green-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--label-green-04) / var(--tw-text-opacity));\n}\n\n.text-label-lime-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--label-lime-04) / var(--tw-text-opacity));\n}\n\n.text-label-orange-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--label-orange-04) / var(--tw-text-opacity));\n}\n\n.text-label-orchid-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--label-orchid-04) / var(--tw-text-opacity));\n}\n\n.text-label-violet-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--label-violet-04) / var(--tw-text-opacity));\n}\n\n.text-label-yellow-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--label-yellow-04) / var(--tw-text-opacity));\n}\n\n.text-tone-neutral-02 {\n --tw-text-opacity: 1;\n color: rgb(var(--tone-neutral-02) / var(--tw-text-opacity));\n}\n\n.text-tone-neutral-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--tone-neutral-04) / var(--tw-text-opacity));\n}\n\n.shadow {\n --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n@container style(--magma-pref-contrast: more) {\n :host {\n\n --mds-modal-window-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6), 0 25px 50px -12px rgb(0 0 0 / 0.25);\n }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n @media (prefers-contrast: more) {\n :host {\n\n --mds-modal-window-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6), 0 25px 50px -12px rgb(0 0 0 / 0.25);\n }\n }\n}\n\n@media (max-width: 767px) {\n .mobile\\:w-1200 {\n width: 3rem;\n }\n}\n\n\n";
54
54
  const MdsModalStyle0 = mdsModalCss;
55
55
 
56
56
  const MdsModal$1 = /*@__PURE__*/ proxyCustomElement(class MdsModal extends HTMLElement {
package/dist/documentation.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "timestamp": "2024-09-17T06:00:04",
2
+ "timestamp": "2024-09-26T10:59:56",
3
3
  "compiler": {
4
4
  "name": "@stencil/core",
5
5
  "version": "4.21.0",
package/dist/esm/mds-modal.entry.js CHANGED
@@ -50,7 +50,7 @@ class KeyboardManager {
50
50
  }
51
51
  }
52
52
 
53
- const mdsModalCss = "@-webkit-keyframes focus-bounce {\n 0%, 75%, 100% {\n outline-offset: var(--magma-outline-focus-offset, 6px);\n }\n\n 50% {\n outline-offset: var(--magma-outline-blur-offset, 2px);\n }\n}\n @keyframes focus-bounce {\n 0%, 75%, 100% {\n outline-offset: var(--magma-outline-focus-offset, 6px);\n }\n\n 50% {\n outline-offset: var(--magma-outline-blur-offset, 2px);\n }\n}\n /* included for focus effect */\n@tailwind components;\n@tailwind utilities;\n\n@tailwind components;\n@tailwind utilities;\n\n\n.svg {\n display: -ms-flexbox;\n display: flex;\n}\n\n\n.svg svg {\n aspect-ratio: 1/1;\n height: 100%;\n width: 100%;\n}\n\n\n.animate-right-intro,\n .animate-right-outro {\n -webkit-transform: translateX(calc(100% + 50px));\n transform: translateX(calc(100% + 50px));\n }\n@tailwind utilities;\n\n/**\n * @prop --mds-modal-close-icon-color: Set the color of the close icon button to the top left.\n * @prop --mds-modal-overlay-color: Set the overlay color of the background when the component is opened, this property can be inherited from `globals.css` in `styles^8.0.0`.\n * @prop --mds-modal-overlay-opacity: Set the overlay color opacity of the background when the component is opened, this property can be inherited from `globals.css` in `styles^8.0.0`.\n * @prop --mds-modal-window-background: Set the background color of the window\n * @prop --mds-modal-window-overflow: Set the overflow of the window\n * @prop --mds-modal-window-shadow: Set the box shadow of the window\n * @prop --mds-modal-z-index: Set the z-index of the window when the component is opened\n */\n\n:host {\n\n --mds-modal-close-icon-color: rgb(var(--tone-neutral));\n --mds-modal-overlay-color: var(--magma-overlay-color, 0 0 0);\n --mds-modal-overlay-opacity: var(--magma-overlay-opacity, 0.5);\n --mds-modal-window-background: rgb(var(--tone-neutral));\n --mds-modal-window-overflow: auto;\n --mds-modal-window-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);\n --mds-modal-z-index: var(--magma-modal-z-index);\n -webkit-transition-duration: 700ms;\n transition-duration: 700ms;\n -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);\n transition-timing-function: cubic-bezier(1, 0, 0, 1);\n\n -ms-flex-align: center;\n\n align-items: center;\n background-color: rgba(var(--mds-modal-overlay-color) / 0);\n display: -ms-flexbox;\n display: flex;\n fill: rgb(var(--tone-neutral));\n inset: 0;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-perspective: 600px;\n perspective: 600px;\n pointer-events: none;\n position: fixed;\n z-index: var(--mds-modal-z-index, 1000);\n}\n\n:host( [position=\"top\"] ) {\n -ms-flex-align: start;\n align-items: flex-start;\n -ms-flex-pack: center;\n justify-content: center;\n}\n\n:host( [position=\"bottom\"] ) {\n -ms-flex-align: end;\n align-items: flex-end;\n -ms-flex-pack: center;\n justify-content: center;\n}\n\n:host( .to-bottom-opened ),\n:host( .to-center-opened ),\n:host( .to-left-opened ),\n:host( .to-right-opened ),\n:host( .to-top-opened ) {\n -webkit-transition-duration: 500ms;\n transition-duration: 500ms;\n\n background-color: rgba(var(--mds-modal-overlay-color) / var(--mds-modal-overlay-opacity));\n pointer-events: auto;\n}\n\n.button-close {\n top: 0rem;\n border-radius: 9999px;\n opacity: 0;\n -webkit-transition-duration: 500ms;\n transition-duration: 500ms;\n -webkit-transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);\n transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);\n\n --mds-button-icon-color: var(--mds-modal-close-icon-color);\n --mds-button-background: transparent;\n\n height: auto;\n position: absolute;\n -webkit-transform: translate(0, 24px) rotate(90deg);\n transform: translate(0, 24px) rotate(90deg);\n -webkit-transform-origin: center;\n transform-origin: center;\n -webkit-transition-property: opacity, outline, outline-offset, -webkit-transform;\n transition-property: opacity, outline, outline-offset, -webkit-transform;\n transition-property: opacity, outline, outline-offset, transform;\n transition-property: opacity, outline, outline-offset, transform, -webkit-transform;\n}\n\n.button-close::part(icon) {\n height: 2.25rem;\n width: 2.25rem;\n}\n\n.window {\n height: 100%;\n gap: 0rem;\n\n background-color: var(--mds-modal-window-background);\n -webkit-box-shadow: var(--mds-modal-window-shadow);\n box-shadow: var(--mds-modal-window-shadow);\n display: grid;\n grid-template-rows: 1fr;\n max-width: calc(100vw - 80px);\n overflow: var(--mds-modal-window-overflow);\n}\n\n.window--top {\n grid-template-rows: auto 1fr;\n}\n\n.window--bottom {\n grid-template-rows: 1fr auto;\n}\n\n.window--top-bottom {\n grid-template-rows: auto 1fr auto;\n}\n\n/* xx */\n\n:host( .to-bottom ) {\n padding: 2rem;\n}\n\n@media (max-width: 767px) {\n :host( .to-bottom ) {\n padding: 1rem;\n }\n}\n\n:host( .to-bottom ) {\n\n -ms-flex-pack: center;\n\n justify-content: center;\n}\n\n:host( .to-bottom ) .window,\n:host( .to-bottom ) > ::slotted( [slot=\"window\"] ) {\n opacity: 0;\n -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n -webkit-transition-duration: 500ms;\n transition-duration: 500ms;\n -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);\n transition-timing-function: cubic-bezier(1, 0, 0, 1);\n}\n\n:host( .to-bottom-intro ) .window,\n:host( .to-bottom-intro ) > ::slotted( [slot=\"window\"] ) {\n -webkit-transform: rotateX(-22deg) scale(0.5) translateY(40%);\n transform: rotateX(-22deg) scale(0.5) translateY(40%);\n }\n\n:host( .to-bottom-opened.to-bottom-outro ) .window,\n:host( .to-bottom-opened.to-bottom-outro ) > ::slotted( [slot=\"window\"] ),\n:host( .to-bottom-opened ) .window,\n:host( .to-bottom-opened ) > ::slotted( [slot=\"window\"] ) {\n opacity: 1;\n\n -webkit-transform: rotateX(0) scale(1) translateY(0);\n\n transform: rotateX(0) scale(1) translateY(0);\n}\n\n:host( .to-bottom-outro ) .window,\n:host( .to-bottom-outro ) > ::slotted( [slot=\"window\"] ) {\n -webkit-transform: rotateX(-22deg) scale(0.5) translateY(-40%);\n transform: rotateX(-22deg) scale(0.5) translateY(-40%);\n }\n\n:host( .to-center ) {\n padding: 2rem;\n}\n\n@media (max-width: 767px) {\n :host( .to-center ) {\n padding: 1rem;\n }\n}\n\n:host( .to-center ) {\n\n -ms-flex-pack: center;\n\n justify-content: center;\n}\n\n:host( .to-center ) .window,\n:host( .to-center ) > ::slotted( [slot=\"window\"] ) {\n opacity: 0;\n -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n -webkit-transition-duration: 500ms;\n transition-duration: 500ms;\n -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);\n transition-timing-function: cubic-bezier(1, 0, 0, 1);\n}\n\n:host( .to-center-intro ) .window,\n:host( .to-center-intro ) > ::slotted( [slot=\"window\"] ) {\n -webkit-transform: rotateX(-22deg) scale(0.5) translateY(40%);\n transform: rotateX(-22deg) scale(0.5) translateY(40%);\n }\n\n:host( .to-center-opened.to-center-outro ) .window,\n:host( .to-center-opened.to-center-outro ) > ::slotted( [slot=\"window\"] ),\n:host( .to-center-opened ) .window,\n:host( .to-center-opened ) > ::slotted( [slot=\"window\"] ) {\n opacity: 1;\n\n -webkit-transform: rotateX(0) scale(1) translateY(0);\n\n transform: rotateX(0) scale(1) translateY(0);\n}\n\n:host( .to-center-outro ) .window,\n:host( .to-center-outro ) > ::slotted( [slot=\"window\"] ) {\n -webkit-transform: rotateX(-22deg) scale(0.5) translateY(-40%);\n transform: rotateX(-22deg) scale(0.5) translateY(-40%);\n }\n\n:host( .to-left ) {\n -ms-flex-pack: start;\n justify-content: flex-start;\n}\n\n:host( .to-left ) .window,\n:host( .to-left ) > ::slotted( [slot=\"window\"] ) {\n opacity: 0;\n -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n -webkit-transition-duration: 500ms;\n transition-duration: 500ms;\n -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);\n transition-timing-function: cubic-bezier(1, 0, 0, 1);\n}\n\n:host( .to-left-intro ) .window,\n:host( .to-left-intro ) > ::slotted( [slot=\"window\"] ) {\n -webkit-transform: translateX(calc(-100% - 50px));\n transform: translateX(calc(-100% - 50px));\n }\n\n:host( .to-left-opened.to-left-outro ) .window,\n:host( .to-left-opened.to-left-outro ) > ::slotted( [slot=\"window\"] ),\n:host( .to-left-opened ) .window,\n:host( .to-left-opened ) > ::slotted( [slot=\"window\"] ) {\n opacity: 1;\n\n -webkit-transform: translateX(0);\n\n transform: translateX(0);\n}\n\n:host( .to-left-opened ) .button-close,\n:host( .to-left-opened.to-left-outro ) .button-close {\n opacity: 1;\n\n -webkit-transform: translate(-24px, 24px) rotate(0);\n\n transform: translate(-24px, 24px) rotate(0);\n}\n\n:host( .to-left-outro ) .window,\n:host( .to-left-outro ) > ::slotted( [slot=\"window\"] ) {\n -webkit-transform: translateX(calc(-100% - 50px));\n transform: translateX(calc(-100% - 50px));\n }\n\n:host( .to-left-outro ) .button-close {\n -webkit-transform: translate(24px, 24px) rotate(-90deg);\n transform: translate(24px, 24px) rotate(-90deg);\n}\n\n:host( .to-left ) .button-close {\n right: 0rem;\n\n -webkit-transform: translate(36px, 24px) rotate(90deg);\n\n transform: translate(36px, 24px) rotate(90deg);\n}\n\n:host( .to-right ) {\n -ms-flex-pack: end;\n justify-content: flex-end;\n}\n\n:host( .to-right ) .window,\n:host( .to-right ) > ::slotted([slot=\"window\"]) {\n opacity: 0;\n -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n -webkit-transition-duration: 500ms;\n transition-duration: 500ms;\n -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);\n transition-timing-function: cubic-bezier(1, 0, 0, 1);\n}\n\n:host( .to-right-intro ) .window,\n:host( .to-right-intro ) > ::slotted( [slot=\"window\"] ) {\n -webkit-transform: translateX(calc(100% + 50px));\n transform: translateX(calc(100% + 50px));\n }\n\n:host( .to-right-opened.to-right-outro ) .window,\n:host( .to-right-opened.to-right-outro ) > ::slotted( [slot=\"window\"] ),\n:host( .to-right-opened ) .window,\n:host( .to-right-opened ) > ::slotted( [slot=\"window\"] ) {\n opacity: 1;\n\n -webkit-transform: translateX(0);\n\n transform: translateX(0);\n}\n\n:host( .to-right-opened ) .button-close,\n:host( .to-right-opened.to-right-outro ) .button-close {\n opacity: 1;\n\n -webkit-transform: translate(24px, 24px) rotate(0);\n\n transform: translate(24px, 24px) rotate(0);\n}\n\n:host( .to-right-outro ) .window,\n:host( .to-right-outro ) > ::slotted( [slot=\"window\"] ) {\n -webkit-transform: translateX(calc(100% + 50px));\n transform: translateX(calc(100% + 50px));\n }\n\n:host( .to-right-outro ) .button-close {\n -webkit-transform: translate(-24px, 24px) rotate(90deg);\n transform: translate(-24px, 24px) rotate(90deg);\n}\n\n:host( .to-right ) .button-close {\n left: 0rem;\n\n -webkit-transform: translate(-36px, 24px) rotate(-90deg);\n\n transform: translate(-36px, 24px) rotate(-90deg);\n}\n\n:host( .to-top ) {\n padding: 2rem;\n}\n\n@media (max-width: 767px) {\n :host( .to-top ) {\n padding: 1rem;\n }\n}\n\n:host( .to-top ) {\n\n -ms-flex-pack: center;\n\n justify-content: center;\n}\n\n:host( .to-top ) .window,\n:host( .to-top ) > ::slotted( [slot=\"window\"] ) {\n opacity: 0;\n -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n -webkit-transition-duration: 500ms;\n transition-duration: 500ms;\n -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);\n transition-timing-function: cubic-bezier(1, 0, 0, 1);\n}\n\n:host( .to-top-intro ) .window,\n:host( .to-top-intro ) > ::slotted( [slot=\"window\"] ) {\n -webkit-transform: rotateX(-22deg) scale(0.5) translateY(40%);\n transform: rotateX(-22deg) scale(0.5) translateY(40%);\n }\n\n:host( .to-top-opened.to-top-outro ) .window,\n:host( .to-top-opened.to-top-outro ) > ::slotted( [slot=\"window\"] ),\n:host( .to-top-opened ) .window,\n:host( .to-top-opened ) > ::slotted( [slot=\"window\"] ) {\n opacity: 1;\n\n -webkit-transform: rotateX(0) scale(1) translateY(0);\n\n transform: rotateX(0) scale(1) translateY(0);\n}\n\n:host( .to-top-outro ) .window,\n:host( .to-top-outro ) > ::slotted( [slot=\"window\"] ) {\n -webkit-transform: rotateX(-22deg) scale(0.5) translateY(-40%);\n transform: rotateX(-22deg) scale(0.5) translateY(-40%);\n }\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n :host,\n .button-close,\n .window {\n -webkit-transition-duration: 0s !important;\n transition-duration: 0s !important;\n }\n}\n\n@container style(--magma-pref-animation: system) {\n\n @media (prefers-reduced-motion) {\n :host,\n .button-close,\n .window {\n -webkit-transition-duration: 0s !important;\n transition-duration: 0s !important;\n }\n }\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-theme: dark) {\n :host {\n\n --mds-modal-window-background: rgb(var(--tone-neutral-09));\n --mds-modal-window-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3), 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);\n }\n}\n\n@container style(--magma-pref-theme: system) {\n\n @media (prefers-color-scheme: dark) {\n :host {\n\n --mds-modal-window-background: rgb(var(--tone-neutral-09));\n --mds-modal-window-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3), 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);\n }\n }\n}\n\n.static {\n position: static;\n}\n\n.fixed {\n position: fixed;\n}\n\n.absolute {\n position: absolute;\n}\n\n.flex {\n display: -ms-flexbox;\n display: flex;\n}\n\n.w-1600 {\n width: 4rem;\n}\n\n.min-w-0 {\n min-width: 0rem;\n}\n\n.max-w-lg {\n max-width: 32rem;\n}\n\n.max-w-xl {\n max-width: 36rem;\n}\n\n.flex-grow {\n -ms-flex-positive: 1;\n flex-grow: 1;\n}\n\n.items-center {\n -ms-flex-align: center;\n align-items: center;\n}\n\n.gap-400 {\n gap: 1rem;\n}\n\n.truncate {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.border {\n border-width: 1px;\n}\n\n.border-0 {\n border-width: 0rem;\n}\n\n.border-b {\n border-bottom-width: 1px;\n}\n\n.border-t {\n border-top-width: 1px;\n}\n\n.border-solid {\n border-style: solid;\n}\n\n.border-tone-neutral-09 {\n --tw-border-opacity: 1;\n border-color: rgb(var(--tone-neutral-09) / var(--tw-border-opacity));\n}\n\n.bg-label-amaranth-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--label-amaranth-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-aqua-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--label-aqua-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-blue-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--label-blue-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-green-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--label-green-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-lime-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--label-lime-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orange-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--label-orange-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orchid-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--label-orchid-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-violet-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--label-violet-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-yellow-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--label-yellow-10) / var(--tw-bg-opacity));\n}\n\n.bg-tone-neutral-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--tone-neutral-10) / var(--tw-bg-opacity));\n}\n\n.fill-label-amaranth-04 {\n fill: rgb(var(--label-amaranth-04));\n}\n\n.fill-label-aqua-04 {\n fill: rgb(var(--label-aqua-04));\n}\n\n.fill-label-blue-04 {\n fill: rgb(var(--label-blue-04));\n}\n\n.fill-label-green-04 {\n fill: rgb(var(--label-green-04));\n}\n\n.fill-label-lime-04 {\n fill: rgb(var(--label-lime-04));\n}\n\n.fill-label-orange-04 {\n fill: rgb(var(--label-orange-04));\n}\n\n.fill-label-orchid-04 {\n fill: rgb(var(--label-orchid-04));\n}\n\n.fill-label-violet-04 {\n fill: rgb(var(--label-violet-04));\n}\n\n.fill-label-yellow-04 {\n fill: rgb(var(--label-yellow-04));\n}\n\n.fill-tone-neutral-04 {\n fill: rgb(var(--tone-neutral-04));\n}\n\n.p-800 {\n padding: 2rem;\n}\n\n.text-label-amaranth-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--label-amaranth-04) / var(--tw-text-opacity));\n}\n\n.text-label-aqua-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--label-aqua-04) / var(--tw-text-opacity));\n}\n\n.text-label-blue-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--label-blue-04) / var(--tw-text-opacity));\n}\n\n.text-label-green-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--label-green-04) / var(--tw-text-opacity));\n}\n\n.text-label-lime-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--label-lime-04) / var(--tw-text-opacity));\n}\n\n.text-label-orange-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--label-orange-04) / var(--tw-text-opacity));\n}\n\n.text-label-orchid-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--label-orchid-04) / var(--tw-text-opacity));\n}\n\n.text-label-violet-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--label-violet-04) / var(--tw-text-opacity));\n}\n\n.text-label-yellow-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--label-yellow-04) / var(--tw-text-opacity));\n}\n\n.text-tone-neutral-02 {\n --tw-text-opacity: 1;\n color: rgb(var(--tone-neutral-02) / var(--tw-text-opacity));\n}\n\n.text-tone-neutral-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--tone-neutral-04) / var(--tw-text-opacity));\n}\n\n.shadow {\n --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n@container style(--magma-pref-contrast: more) {\n :host {\n\n --mds-modal-window-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6), 0 25px 50px -12px rgb(0 0 0 / 0.25);\n }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n @media (prefers-contrast: more) {\n :host {\n\n --mds-modal-window-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6), 0 25px 50px -12px rgb(0 0 0 / 0.25);\n }\n }\n}\n\n@media (max-width: 767px) {\n .mobile\\:w-1200 {\n width: 3rem;\n }\n}\n\n\n";
53
+ const mdsModalCss = "@-webkit-keyframes focus-bounce {\n 0%, 75%, 100% {\n outline-offset: var(--magma-outline-focus-offset, 6px);\n }\n\n 50% {\n outline-offset: var(--magma-outline-blur-offset, 2px);\n }\n}\n @keyframes focus-bounce {\n 0%, 75%, 100% {\n outline-offset: var(--magma-outline-focus-offset, 6px);\n }\n\n 50% {\n outline-offset: var(--magma-outline-blur-offset, 2px);\n }\n}\n /* included for focus effect */\n@tailwind components;\n@tailwind utilities;\n\n@tailwind components;\n@tailwind utilities;\n\n\n.svg {\n display: -ms-flexbox;\n display: flex;\n}\n\n\n.svg svg {\n aspect-ratio: 1/1;\n height: 100%;\n width: 100%;\n}\n\n\n.animate-right-intro,\n .animate-right-outro {\n -webkit-transform: translateX(calc(100% + 50px));\n transform: translateX(calc(100% + 50px));\n }\n@tailwind utilities;\n\n/**\n * @prop --mds-modal-close-icon-color: Set the color of the close icon button to the top left.\n * @prop --mds-modal-overlay-color: Set the overlay color of the background when the component is opened, this property can be inherited from `globals.css` in `styles^8.0.0`.\n * @prop --mds-modal-overlay-opacity: Set the overlay color opacity of the background when the component is opened, this property can be inherited from `globals.css` in `styles^8.0.0`.\n * @prop --mds-modal-window-background: Set the background color of the window\n * @prop --mds-modal-window-overflow: Set the overflow of the window\n * @prop --mds-modal-window-shadow: Set the box shadow of the window\n * @prop --mds-modal-z-index: Set the z-index of the window when the component is opened\n */\n\n:host {\n\n --mds-modal-close-icon-color: rgb(var(--tone-neutral));\n --mds-modal-overlay-color: var(--magma-overlay-color, 0 0 0);\n --mds-modal-overlay-opacity: var(--magma-overlay-opacity, 0.5);\n --mds-modal-window-background: rgb(var(--tone-neutral));\n --mds-modal-window-overflow: auto;\n --mds-modal-window-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);\n --mds-modal-z-index: var(--magma-modal-z-index);\n -webkit-transition-duration: 700ms;\n transition-duration: 700ms;\n -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);\n transition-timing-function: cubic-bezier(1, 0, 0, 1);\n\n -ms-flex-align: center;\n\n align-items: center;\n background-color: rgba(var(--mds-modal-overlay-color) / 0);\n display: -ms-flexbox;\n display: flex;\n fill: rgb(var(--tone-neutral));\n inset: 0;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-perspective: 600px;\n perspective: 600px;\n pointer-events: none;\n position: fixed;\n z-index: var(--mds-modal-z-index, 1000);\n}\n\n:host( [position=\"top\"] ) {\n -ms-flex-align: start;\n align-items: flex-start;\n -ms-flex-pack: center;\n justify-content: center;\n}\n\n:host( [position=\"bottom\"] ) {\n -ms-flex-align: end;\n align-items: flex-end;\n -ms-flex-pack: center;\n justify-content: center;\n}\n\n:host( .to-bottom-opened ),\n:host( .to-center-opened ),\n:host( .to-left-opened ),\n:host( .to-right-opened ),\n:host( .to-top-opened ) {\n -webkit-transition-duration: 500ms;\n transition-duration: 500ms;\n\n background-color: rgba(var(--mds-modal-overlay-color) / var(--mds-modal-overlay-opacity));\n pointer-events: auto;\n}\n\n.button-close {\n top: 0rem;\n border-radius: 9999px;\n opacity: 0;\n -webkit-transition-duration: 500ms;\n transition-duration: 500ms;\n -webkit-transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);\n transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);\n\n fill: var(--mds-modal-close-icon-color);\n --mds-button-background: transparent;\n\n height: auto;\n position: absolute;\n -webkit-transform: translate(0, 24px) rotate(90deg);\n transform: translate(0, 24px) rotate(90deg);\n -webkit-transform-origin: center;\n transform-origin: center;\n -webkit-transition-property: opacity, outline, outline-offset, -webkit-transform;\n transition-property: opacity, outline, outline-offset, -webkit-transform;\n transition-property: opacity, outline, outline-offset, transform;\n transition-property: opacity, outline, outline-offset, transform, -webkit-transform;\n}\n\n.button-close::part(icon) {\n height: 2.25rem;\n width: 2.25rem;\n}\n\n.window {\n height: 100%;\n gap: 0rem;\n\n background-color: var(--mds-modal-window-background);\n -webkit-box-shadow: var(--mds-modal-window-shadow);\n box-shadow: var(--mds-modal-window-shadow);\n display: grid;\n grid-template-rows: 1fr;\n max-width: calc(100vw - 80px);\n overflow: var(--mds-modal-window-overflow);\n}\n\n.window--top {\n grid-template-rows: auto 1fr;\n}\n\n.window--bottom {\n grid-template-rows: 1fr auto;\n}\n\n.window--top-bottom {\n grid-template-rows: auto 1fr auto;\n}\n\n/* xx */\n\n:host( .to-bottom ) {\n padding: 2rem;\n}\n\n@media (max-width: 767px) {\n :host( .to-bottom ) {\n padding: 1rem;\n }\n}\n\n:host( .to-bottom ) {\n\n -ms-flex-pack: center;\n\n justify-content: center;\n}\n\n:host( .to-bottom ) .window,\n:host( .to-bottom ) > ::slotted( [slot=\"window\"] ) {\n opacity: 0;\n -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n -webkit-transition-duration: 500ms;\n transition-duration: 500ms;\n -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);\n transition-timing-function: cubic-bezier(1, 0, 0, 1);\n}\n\n:host( .to-bottom-intro ) .window,\n:host( .to-bottom-intro ) > ::slotted( [slot=\"window\"] ) {\n -webkit-transform: rotateX(-22deg) scale(0.5) translateY(40%);\n transform: rotateX(-22deg) scale(0.5) translateY(40%);\n }\n\n:host( .to-bottom-opened.to-bottom-outro ) .window,\n:host( .to-bottom-opened.to-bottom-outro ) > ::slotted( [slot=\"window\"] ),\n:host( .to-bottom-opened ) .window,\n:host( .to-bottom-opened ) > ::slotted( [slot=\"window\"] ) {\n opacity: 1;\n\n -webkit-transform: rotateX(0) scale(1) translateY(0);\n\n transform: rotateX(0) scale(1) translateY(0);\n}\n\n:host( .to-bottom-outro ) .window,\n:host( .to-bottom-outro ) > ::slotted( [slot=\"window\"] ) {\n -webkit-transform: rotateX(-22deg) scale(0.5) translateY(-40%);\n transform: rotateX(-22deg) scale(0.5) translateY(-40%);\n }\n\n:host( .to-center ) {\n padding: 2rem;\n}\n\n@media (max-width: 767px) {\n :host( .to-center ) {\n padding: 1rem;\n }\n}\n\n:host( .to-center ) {\n\n -ms-flex-pack: center;\n\n justify-content: center;\n}\n\n:host( .to-center ) .window,\n:host( .to-center ) > ::slotted( [slot=\"window\"] ) {\n opacity: 0;\n -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n -webkit-transition-duration: 500ms;\n transition-duration: 500ms;\n -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);\n transition-timing-function: cubic-bezier(1, 0, 0, 1);\n}\n\n:host( .to-center-intro ) .window,\n:host( .to-center-intro ) > ::slotted( [slot=\"window\"] ) {\n -webkit-transform: rotateX(-22deg) scale(0.5) translateY(40%);\n transform: rotateX(-22deg) scale(0.5) translateY(40%);\n }\n\n:host( .to-center-opened.to-center-outro ) .window,\n:host( .to-center-opened.to-center-outro ) > ::slotted( [slot=\"window\"] ),\n:host( .to-center-opened ) .window,\n:host( .to-center-opened ) > ::slotted( [slot=\"window\"] ) {\n opacity: 1;\n\n -webkit-transform: rotateX(0) scale(1) translateY(0);\n\n transform: rotateX(0) scale(1) translateY(0);\n}\n\n:host( .to-center-outro ) .window,\n:host( .to-center-outro ) > ::slotted( [slot=\"window\"] ) {\n -webkit-transform: rotateX(-22deg) scale(0.5) translateY(-40%);\n transform: rotateX(-22deg) scale(0.5) translateY(-40%);\n }\n\n:host( .to-left ) {\n -ms-flex-pack: start;\n justify-content: flex-start;\n}\n\n:host( .to-left ) .window,\n:host( .to-left ) > ::slotted( [slot=\"window\"] ) {\n opacity: 0;\n -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n -webkit-transition-duration: 500ms;\n transition-duration: 500ms;\n -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);\n transition-timing-function: cubic-bezier(1, 0, 0, 1);\n}\n\n:host( .to-left-intro ) .window,\n:host( .to-left-intro ) > ::slotted( [slot=\"window\"] ) {\n -webkit-transform: translateX(calc(-100% - 50px));\n transform: translateX(calc(-100% - 50px));\n }\n\n:host( .to-left-opened.to-left-outro ) .window,\n:host( .to-left-opened.to-left-outro ) > ::slotted( [slot=\"window\"] ),\n:host( .to-left-opened ) .window,\n:host( .to-left-opened ) > ::slotted( [slot=\"window\"] ) {\n opacity: 1;\n\n -webkit-transform: translateX(0);\n\n transform: translateX(0);\n}\n\n:host( .to-left-opened ) .button-close,\n:host( .to-left-opened.to-left-outro ) .button-close {\n opacity: 1;\n\n -webkit-transform: translate(-24px, 24px) rotate(0);\n\n transform: translate(-24px, 24px) rotate(0);\n}\n\n:host( .to-left-outro ) .window,\n:host( .to-left-outro ) > ::slotted( [slot=\"window\"] ) {\n -webkit-transform: translateX(calc(-100% - 50px));\n transform: translateX(calc(-100% - 50px));\n }\n\n:host( .to-left-outro ) .button-close {\n -webkit-transform: translate(24px, 24px) rotate(-90deg);\n transform: translate(24px, 24px) rotate(-90deg);\n}\n\n:host( .to-left ) .button-close {\n right: 0rem;\n\n -webkit-transform: translate(36px, 24px) rotate(90deg);\n\n transform: translate(36px, 24px) rotate(90deg);\n}\n\n:host( .to-right ) {\n -ms-flex-pack: end;\n justify-content: flex-end;\n}\n\n:host( .to-right ) .window,\n:host( .to-right ) > ::slotted([slot=\"window\"]) {\n opacity: 0;\n -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n -webkit-transition-duration: 500ms;\n transition-duration: 500ms;\n -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);\n transition-timing-function: cubic-bezier(1, 0, 0, 1);\n}\n\n:host( .to-right-intro ) .window,\n:host( .to-right-intro ) > ::slotted( [slot=\"window\"] ) {\n -webkit-transform: translateX(calc(100% + 50px));\n transform: translateX(calc(100% + 50px));\n }\n\n:host( .to-right-opened.to-right-outro ) .window,\n:host( .to-right-opened.to-right-outro ) > ::slotted( [slot=\"window\"] ),\n:host( .to-right-opened ) .window,\n:host( .to-right-opened ) > ::slotted( [slot=\"window\"] ) {\n opacity: 1;\n\n -webkit-transform: translateX(0);\n\n transform: translateX(0);\n}\n\n:host( .to-right-opened ) .button-close,\n:host( .to-right-opened.to-right-outro ) .button-close {\n opacity: 1;\n\n -webkit-transform: translate(24px, 24px) rotate(0);\n\n transform: translate(24px, 24px) rotate(0);\n}\n\n:host( .to-right-outro ) .window,\n:host( .to-right-outro ) > ::slotted( [slot=\"window\"] ) {\n -webkit-transform: translateX(calc(100% + 50px));\n transform: translateX(calc(100% + 50px));\n }\n\n:host( .to-right-outro ) .button-close {\n -webkit-transform: translate(-24px, 24px) rotate(90deg);\n transform: translate(-24px, 24px) rotate(90deg);\n}\n\n:host( .to-right ) .button-close {\n left: 0rem;\n\n -webkit-transform: translate(-36px, 24px) rotate(-90deg);\n\n transform: translate(-36px, 24px) rotate(-90deg);\n}\n\n:host( .to-top ) {\n padding: 2rem;\n}\n\n@media (max-width: 767px) {\n :host( .to-top ) {\n padding: 1rem;\n }\n}\n\n:host( .to-top ) {\n\n -ms-flex-pack: center;\n\n justify-content: center;\n}\n\n:host( .to-top ) .window,\n:host( .to-top ) > ::slotted( [slot=\"window\"] ) {\n opacity: 0;\n -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n -webkit-transition-duration: 500ms;\n transition-duration: 500ms;\n -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);\n transition-timing-function: cubic-bezier(1, 0, 0, 1);\n}\n\n:host( .to-top-intro ) .window,\n:host( .to-top-intro ) > ::slotted( [slot=\"window\"] ) {\n -webkit-transform: rotateX(-22deg) scale(0.5) translateY(40%);\n transform: rotateX(-22deg) scale(0.5) translateY(40%);\n }\n\n:host( .to-top-opened.to-top-outro ) .window,\n:host( .to-top-opened.to-top-outro ) > ::slotted( [slot=\"window\"] ),\n:host( .to-top-opened ) .window,\n:host( .to-top-opened ) > ::slotted( [slot=\"window\"] ) {\n opacity: 1;\n\n -webkit-transform: rotateX(0) scale(1) translateY(0);\n\n transform: rotateX(0) scale(1) translateY(0);\n}\n\n:host( .to-top-outro ) .window,\n:host( .to-top-outro ) > ::slotted( [slot=\"window\"] ) {\n -webkit-transform: rotateX(-22deg) scale(0.5) translateY(-40%);\n transform: rotateX(-22deg) scale(0.5) translateY(-40%);\n }\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n :host,\n .button-close,\n .window {\n -webkit-transition-duration: 0s !important;\n transition-duration: 0s !important;\n }\n}\n\n@container style(--magma-pref-animation: system) {\n\n @media (prefers-reduced-motion) {\n :host,\n .button-close,\n .window {\n -webkit-transition-duration: 0s !important;\n transition-duration: 0s !important;\n }\n }\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-theme: dark) {\n :host {\n\n --mds-modal-window-background: rgb(var(--tone-neutral-09));\n --mds-modal-window-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3), 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);\n }\n}\n\n@container style(--magma-pref-theme: system) {\n\n @media (prefers-color-scheme: dark) {\n :host {\n\n --mds-modal-window-background: rgb(var(--tone-neutral-09));\n --mds-modal-window-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3), 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);\n }\n }\n}\n\n.static {\n position: static;\n}\n\n.fixed {\n position: fixed;\n}\n\n.absolute {\n position: absolute;\n}\n\n.flex {\n display: -ms-flexbox;\n display: flex;\n}\n\n.w-1600 {\n width: 4rem;\n}\n\n.min-w-0 {\n min-width: 0rem;\n}\n\n.max-w-lg {\n max-width: 32rem;\n}\n\n.max-w-xl {\n max-width: 36rem;\n}\n\n.flex-grow {\n -ms-flex-positive: 1;\n flex-grow: 1;\n}\n\n.items-center {\n -ms-flex-align: center;\n align-items: center;\n}\n\n.gap-400 {\n gap: 1rem;\n}\n\n.truncate {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.border {\n border-width: 1px;\n}\n\n.border-0 {\n border-width: 0rem;\n}\n\n.border-b {\n border-bottom-width: 1px;\n}\n\n.border-t {\n border-top-width: 1px;\n}\n\n.border-solid {\n border-style: solid;\n}\n\n.border-tone-neutral-09 {\n --tw-border-opacity: 1;\n border-color: rgb(var(--tone-neutral-09) / var(--tw-border-opacity));\n}\n\n.bg-label-amaranth-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--label-amaranth-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-aqua-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--label-aqua-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-blue-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--label-blue-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-green-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--label-green-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-lime-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--label-lime-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orange-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--label-orange-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orchid-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--label-orchid-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-violet-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--label-violet-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-yellow-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--label-yellow-10) / var(--tw-bg-opacity));\n}\n\n.bg-tone-neutral-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--tone-neutral-10) / var(--tw-bg-opacity));\n}\n\n.fill-label-amaranth-04 {\n fill: rgb(var(--label-amaranth-04));\n}\n\n.fill-label-aqua-04 {\n fill: rgb(var(--label-aqua-04));\n}\n\n.fill-label-blue-04 {\n fill: rgb(var(--label-blue-04));\n}\n\n.fill-label-green-04 {\n fill: rgb(var(--label-green-04));\n}\n\n.fill-label-lime-04 {\n fill: rgb(var(--label-lime-04));\n}\n\n.fill-label-orange-04 {\n fill: rgb(var(--label-orange-04));\n}\n\n.fill-label-orchid-04 {\n fill: rgb(var(--label-orchid-04));\n}\n\n.fill-label-violet-04 {\n fill: rgb(var(--label-violet-04));\n}\n\n.fill-label-yellow-04 {\n fill: rgb(var(--label-yellow-04));\n}\n\n.fill-tone-neutral-04 {\n fill: rgb(var(--tone-neutral-04));\n}\n\n.p-800 {\n padding: 2rem;\n}\n\n.text-label-amaranth-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--label-amaranth-04) / var(--tw-text-opacity));\n}\n\n.text-label-aqua-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--label-aqua-04) / var(--tw-text-opacity));\n}\n\n.text-label-blue-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--label-blue-04) / var(--tw-text-opacity));\n}\n\n.text-label-green-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--label-green-04) / var(--tw-text-opacity));\n}\n\n.text-label-lime-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--label-lime-04) / var(--tw-text-opacity));\n}\n\n.text-label-orange-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--label-orange-04) / var(--tw-text-opacity));\n}\n\n.text-label-orchid-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--label-orchid-04) / var(--tw-text-opacity));\n}\n\n.text-label-violet-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--label-violet-04) / var(--tw-text-opacity));\n}\n\n.text-label-yellow-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--label-yellow-04) / var(--tw-text-opacity));\n}\n\n.text-tone-neutral-02 {\n --tw-text-opacity: 1;\n color: rgb(var(--tone-neutral-02) / var(--tw-text-opacity));\n}\n\n.text-tone-neutral-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--tone-neutral-04) / var(--tw-text-opacity));\n}\n\n.shadow {\n --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n@container style(--magma-pref-contrast: more) {\n :host {\n\n --mds-modal-window-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6), 0 25px 50px -12px rgb(0 0 0 / 0.25);\n }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n @media (prefers-contrast: more) {\n :host {\n\n --mds-modal-window-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6), 0 25px 50px -12px rgb(0 0 0 / 0.25);\n }\n }\n}\n\n@media (max-width: 767px) {\n .mobile\\:w-1200 {\n width: 3rem;\n }\n}\n\n\n";
54
54
  const MdsModalStyle0 = mdsModalCss;
55
55
 
56
56
  const MdsModal = class {
package/dist/esm-es5/mds-modal.entry.js CHANGED
@@ -1 +1 @@
1
- import{r as registerInstance,c as createEvent,h,H as Host,g as getElement}from"./index-56ba5ebb.js";function r(n){var t,o,e="";if("string"==typeof n||"number"==typeof n)e+=n;else if("object"==typeof n)if(Array.isArray(n)){var i=n.length;for(t=0;t<i;t++)n[t]&&(o=r(n[t]))&&(e&&(e+=" "),e+=o)}else for(o in n)n[o]&&(e&&(e+=" "),e+=o);return e}function clsx(){for(var n,t,o=0,e="",i=arguments.length;o<i;o++)(n=arguments[o])&&(t=r(n))&&(e&&(e+=" "),e+=t);return e}var miBaselineClose='<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12z"/></svg>';var KeyboardManager=function(){function n(){var n=this;this.elements=new Map;this.handleClickBehaviorDispatchEvent=function(n){if(n.code==="Enter"||n.code==="NumpadEnter"){n.target.click()}};this.handleEscapeBehaviorDispatchEvent=function(t){if(t.code==="Escape"&&n.escapeCallback){n.escapeCallback()}};this.addElement=function(t,o){if(o===void 0){o="element"}if(!t){throw Error("Passed an ".concat(t," element parameter to KeyboardManager.addElement"))}n.elements.set(o,t)};this.removeElement=function(t){if(t===void 0){t="element"}n.detachClickBehavior(t);n.elements.delete(t)};this.attachClickBehavior=function(t){if(t===void 0){t="element"}var o;(o=n.elements.get(t))===null||o===void 0?void 0:o.addEventListener("keydown",n.handleClickBehaviorDispatchEvent)};this.detachClickBehavior=function(t){if(t===void 0){t="element"}var o;(o=n.elements.get(t))===null||o===void 0?void 0:o.removeEventListener("keydown",n.handleClickBehaviorDispatchEvent)};this.attachEscapeBehavior=function(t){n.escapeCallback=t;if(window!==undefined){window.addEventListener("keydown",n.handleEscapeBehaviorDispatchEvent.bind(n))}};this.detachEscapeBehavior=function(){n.escapeCallback=function(){return};if(window!==undefined){window.removeEventListener("keydown",n.handleEscapeBehaviorDispatchEvent.bind(n))}}}return n}();var mdsModalCss='@-webkit-keyframes focus-bounce {\n 0%, 75%, 100% {\n outline-offset: var(--magma-outline-focus-offset, 6px);\n }\n\n 50% {\n outline-offset: var(--magma-outline-blur-offset, 2px);\n }\n}\n @keyframes focus-bounce {\n 0%, 75%, 100% {\n outline-offset: var(--magma-outline-focus-offset, 6px);\n }\n\n 50% {\n outline-offset: var(--magma-outline-blur-offset, 2px);\n }\n}\n /* included for focus effect */\n@tailwind components;\n@tailwind utilities;\n\n@tailwind components;\n@tailwind utilities;\n\n\n.svg {\n display: -ms-flexbox;\n display: flex;\n}\n\n\n.svg svg {\n aspect-ratio: 1/1;\n height: 100%;\n width: 100%;\n}\n\n\n.animate-right-intro,\n .animate-right-outro {\n -webkit-transform: translateX(calc(100% + 50px));\n transform: translateX(calc(100% + 50px));\n }\n@tailwind utilities;\n\n/**\n * @prop --mds-modal-close-icon-color: Set the color of the close icon button to the top left.\n * @prop --mds-modal-overlay-color: Set the overlay color of the background when the component is opened, this property can be inherited from `globals.css` in `styles^8.0.0`.\n * @prop --mds-modal-overlay-opacity: Set the overlay color opacity of the background when the component is opened, this property can be inherited from `globals.css` in `styles^8.0.0`.\n * @prop --mds-modal-window-background: Set the background color of the window\n * @prop --mds-modal-window-overflow: Set the overflow of the window\n * @prop --mds-modal-window-shadow: Set the box shadow of the window\n * @prop --mds-modal-z-index: Set the z-index of the window when the component is opened\n */\n\n:host {\n\n --mds-modal-close-icon-color: rgb(var(--tone-neutral));\n --mds-modal-overlay-color: var(--magma-overlay-color, 0 0 0);\n --mds-modal-overlay-opacity: var(--magma-overlay-opacity, 0.5);\n --mds-modal-window-background: rgb(var(--tone-neutral));\n --mds-modal-window-overflow: auto;\n --mds-modal-window-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);\n --mds-modal-z-index: var(--magma-modal-z-index);\n -webkit-transition-duration: 700ms;\n transition-duration: 700ms;\n -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);\n transition-timing-function: cubic-bezier(1, 0, 0, 1);\n\n -ms-flex-align: center;\n\n align-items: center;\n background-color: rgba(var(--mds-modal-overlay-color) / 0);\n display: -ms-flexbox;\n display: flex;\n fill: rgb(var(--tone-neutral));\n inset: 0;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-perspective: 600px;\n perspective: 600px;\n pointer-events: none;\n position: fixed;\n z-index: var(--mds-modal-z-index, 1000);\n}\n\n:host( [position="top"] ) {\n -ms-flex-align: start;\n align-items: flex-start;\n -ms-flex-pack: center;\n justify-content: center;\n}\n\n:host( [position="bottom"] ) {\n -ms-flex-align: end;\n align-items: flex-end;\n -ms-flex-pack: center;\n justify-content: center;\n}\n\n:host( .to-bottom-opened ),\n:host( .to-center-opened ),\n:host( .to-left-opened ),\n:host( .to-right-opened ),\n:host( .to-top-opened ) {\n -webkit-transition-duration: 500ms;\n transition-duration: 500ms;\n\n background-color: rgba(var(--mds-modal-overlay-color) / var(--mds-modal-overlay-opacity));\n pointer-events: auto;\n}\n\n.button-close {\n top: 0rem;\n border-radius: 9999px;\n opacity: 0;\n -webkit-transition-duration: 500ms;\n transition-duration: 500ms;\n -webkit-transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);\n transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);\n\n --mds-button-icon-color: var(--mds-modal-close-icon-color);\n --mds-button-background: transparent;\n\n height: auto;\n position: absolute;\n -webkit-transform: translate(0, 24px) rotate(90deg);\n transform: translate(0, 24px) rotate(90deg);\n -webkit-transform-origin: center;\n transform-origin: center;\n -webkit-transition-property: opacity, outline, outline-offset, -webkit-transform;\n transition-property: opacity, outline, outline-offset, -webkit-transform;\n transition-property: opacity, outline, outline-offset, transform;\n transition-property: opacity, outline, outline-offset, transform, -webkit-transform;\n}\n\n.button-close::part(icon) {\n height: 2.25rem;\n width: 2.25rem;\n}\n\n.window {\n height: 100%;\n gap: 0rem;\n\n background-color: var(--mds-modal-window-background);\n -webkit-box-shadow: var(--mds-modal-window-shadow);\n box-shadow: var(--mds-modal-window-shadow);\n display: grid;\n grid-template-rows: 1fr;\n max-width: calc(100vw - 80px);\n overflow: var(--mds-modal-window-overflow);\n}\n\n.window--top {\n grid-template-rows: auto 1fr;\n}\n\n.window--bottom {\n grid-template-rows: 1fr auto;\n}\n\n.window--top-bottom {\n grid-template-rows: auto 1fr auto;\n}\n\n/* xx */\n\n:host( .to-bottom ) {\n padding: 2rem;\n}\n\n@media (max-width: 767px) {\n :host( .to-bottom ) {\n padding: 1rem;\n }\n}\n\n:host( .to-bottom ) {\n\n -ms-flex-pack: center;\n\n justify-content: center;\n}\n\n:host( .to-bottom ) .window,\n:host( .to-bottom ) > ::slotted( [slot="window"] ) {\n opacity: 0;\n -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n -webkit-transition-duration: 500ms;\n transition-duration: 500ms;\n -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);\n transition-timing-function: cubic-bezier(1, 0, 0, 1);\n}\n\n:host( .to-bottom-intro ) .window,\n:host( .to-bottom-intro ) > ::slotted( [slot="window"] ) {\n -webkit-transform: rotateX(-22deg) scale(0.5) translateY(40%);\n transform: rotateX(-22deg) scale(0.5) translateY(40%);\n }\n\n:host( .to-bottom-opened.to-bottom-outro ) .window,\n:host( .to-bottom-opened.to-bottom-outro ) > ::slotted( [slot="window"] ),\n:host( .to-bottom-opened ) .window,\n:host( .to-bottom-opened ) > ::slotted( [slot="window"] ) {\n opacity: 1;\n\n -webkit-transform: rotateX(0) scale(1) translateY(0);\n\n transform: rotateX(0) scale(1) translateY(0);\n}\n\n:host( .to-bottom-outro ) .window,\n:host( .to-bottom-outro ) > ::slotted( [slot="window"] ) {\n -webkit-transform: rotateX(-22deg) scale(0.5) translateY(-40%);\n transform: rotateX(-22deg) scale(0.5) translateY(-40%);\n }\n\n:host( .to-center ) {\n padding: 2rem;\n}\n\n@media (max-width: 767px) {\n :host( .to-center ) {\n padding: 1rem;\n }\n}\n\n:host( .to-center ) {\n\n -ms-flex-pack: center;\n\n justify-content: center;\n}\n\n:host( .to-center ) .window,\n:host( .to-center ) > ::slotted( [slot="window"] ) {\n opacity: 0;\n -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n -webkit-transition-duration: 500ms;\n transition-duration: 500ms;\n -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);\n transition-timing-function: cubic-bezier(1, 0, 0, 1);\n}\n\n:host( .to-center-intro ) .window,\n:host( .to-center-intro ) > ::slotted( [slot="window"] ) {\n -webkit-transform: rotateX(-22deg) scale(0.5) translateY(40%);\n transform: rotateX(-22deg) scale(0.5) translateY(40%);\n }\n\n:host( .to-center-opened.to-center-outro ) .window,\n:host( .to-center-opened.to-center-outro ) > ::slotted( [slot="window"] ),\n:host( .to-center-opened ) .window,\n:host( .to-center-opened ) > ::slotted( [slot="window"] ) {\n opacity: 1;\n\n -webkit-transform: rotateX(0) scale(1) translateY(0);\n\n transform: rotateX(0) scale(1) translateY(0);\n}\n\n:host( .to-center-outro ) .window,\n:host( .to-center-outro ) > ::slotted( [slot="window"] ) {\n -webkit-transform: rotateX(-22deg) scale(0.5) translateY(-40%);\n transform: rotateX(-22deg) scale(0.5) translateY(-40%);\n }\n\n:host( .to-left ) {\n -ms-flex-pack: start;\n justify-content: flex-start;\n}\n\n:host( .to-left ) .window,\n:host( .to-left ) > ::slotted( [slot="window"] ) {\n opacity: 0;\n -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n -webkit-transition-duration: 500ms;\n transition-duration: 500ms;\n -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);\n transition-timing-function: cubic-bezier(1, 0, 0, 1);\n}\n\n:host( .to-left-intro ) .window,\n:host( .to-left-intro ) > ::slotted( [slot="window"] ) {\n -webkit-transform: translateX(calc(-100% - 50px));\n transform: translateX(calc(-100% - 50px));\n }\n\n:host( .to-left-opened.to-left-outro ) .window,\n:host( .to-left-opened.to-left-outro ) > ::slotted( [slot="window"] ),\n:host( .to-left-opened ) .window,\n:host( .to-left-opened ) > ::slotted( [slot="window"] ) {\n opacity: 1;\n\n -webkit-transform: translateX(0);\n\n transform: translateX(0);\n}\n\n:host( .to-left-opened ) .button-close,\n:host( .to-left-opened.to-left-outro ) .button-close {\n opacity: 1;\n\n -webkit-transform: translate(-24px, 24px) rotate(0);\n\n transform: translate(-24px, 24px) rotate(0);\n}\n\n:host( .to-left-outro ) .window,\n:host( .to-left-outro ) > ::slotted( [slot="window"] ) {\n -webkit-transform: translateX(calc(-100% - 50px));\n transform: translateX(calc(-100% - 50px));\n }\n\n:host( .to-left-outro ) .button-close {\n -webkit-transform: translate(24px, 24px) rotate(-90deg);\n transform: translate(24px, 24px) rotate(-90deg);\n}\n\n:host( .to-left ) .button-close {\n right: 0rem;\n\n -webkit-transform: translate(36px, 24px) rotate(90deg);\n\n transform: translate(36px, 24px) rotate(90deg);\n}\n\n:host( .to-right ) {\n -ms-flex-pack: end;\n justify-content: flex-end;\n}\n\n:host( .to-right ) .window,\n:host( .to-right ) > ::slotted([slot="window"]) {\n opacity: 0;\n -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n -webkit-transition-duration: 500ms;\n transition-duration: 500ms;\n -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);\n transition-timing-function: cubic-bezier(1, 0, 0, 1);\n}\n\n:host( .to-right-intro ) .window,\n:host( .to-right-intro ) > ::slotted( [slot="window"] ) {\n -webkit-transform: translateX(calc(100% + 50px));\n transform: translateX(calc(100% + 50px));\n }\n\n:host( .to-right-opened.to-right-outro ) .window,\n:host( .to-right-opened.to-right-outro ) > ::slotted( [slot="window"] ),\n:host( .to-right-opened ) .window,\n:host( .to-right-opened ) > ::slotted( [slot="window"] ) {\n opacity: 1;\n\n -webkit-transform: translateX(0);\n\n transform: translateX(0);\n}\n\n:host( .to-right-opened ) .button-close,\n:host( .to-right-opened.to-right-outro ) .button-close {\n opacity: 1;\n\n -webkit-transform: translate(24px, 24px) rotate(0);\n\n transform: translate(24px, 24px) rotate(0);\n}\n\n:host( .to-right-outro ) .window,\n:host( .to-right-outro ) > ::slotted( [slot="window"] ) {\n -webkit-transform: translateX(calc(100% + 50px));\n transform: translateX(calc(100% + 50px));\n }\n\n:host( .to-right-outro ) .button-close {\n -webkit-transform: translate(-24px, 24px) rotate(90deg);\n transform: translate(-24px, 24px) rotate(90deg);\n}\n\n:host( .to-right ) .button-close {\n left: 0rem;\n\n -webkit-transform: translate(-36px, 24px) rotate(-90deg);\n\n transform: translate(-36px, 24px) rotate(-90deg);\n}\n\n:host( .to-top ) {\n padding: 2rem;\n}\n\n@media (max-width: 767px) {\n :host( .to-top ) {\n padding: 1rem;\n }\n}\n\n:host( .to-top ) {\n\n -ms-flex-pack: center;\n\n justify-content: center;\n}\n\n:host( .to-top ) .window,\n:host( .to-top ) > ::slotted( [slot="window"] ) {\n opacity: 0;\n -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n -webkit-transition-duration: 500ms;\n transition-duration: 500ms;\n -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);\n transition-timing-function: cubic-bezier(1, 0, 0, 1);\n}\n\n:host( .to-top-intro ) .window,\n:host( .to-top-intro ) > ::slotted( [slot="window"] ) {\n -webkit-transform: rotateX(-22deg) scale(0.5) translateY(40%);\n transform: rotateX(-22deg) scale(0.5) translateY(40%);\n }\n\n:host( .to-top-opened.to-top-outro ) .window,\n:host( .to-top-opened.to-top-outro ) > ::slotted( [slot="window"] ),\n:host( .to-top-opened ) .window,\n:host( .to-top-opened ) > ::slotted( [slot="window"] ) {\n opacity: 1;\n\n -webkit-transform: rotateX(0) scale(1) translateY(0);\n\n transform: rotateX(0) scale(1) translateY(0);\n}\n\n:host( .to-top-outro ) .window,\n:host( .to-top-outro ) > ::slotted( [slot="window"] ) {\n -webkit-transform: rotateX(-22deg) scale(0.5) translateY(-40%);\n transform: rotateX(-22deg) scale(0.5) translateY(-40%);\n }\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n :host,\n .button-close,\n .window {\n -webkit-transition-duration: 0s !important;\n transition-duration: 0s !important;\n }\n}\n\n@container style(--magma-pref-animation: system) {\n\n @media (prefers-reduced-motion) {\n :host,\n .button-close,\n .window {\n -webkit-transition-duration: 0s !important;\n transition-duration: 0s !important;\n }\n }\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-theme: dark) {\n :host {\n\n --mds-modal-window-background: rgb(var(--tone-neutral-09));\n --mds-modal-window-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3), 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);\n }\n}\n\n@container style(--magma-pref-theme: system) {\n\n @media (prefers-color-scheme: dark) {\n :host {\n\n --mds-modal-window-background: rgb(var(--tone-neutral-09));\n --mds-modal-window-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3), 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);\n }\n }\n}\n\n.static {\n position: static;\n}\n\n.fixed {\n position: fixed;\n}\n\n.absolute {\n position: absolute;\n}\n\n.flex {\n display: -ms-flexbox;\n display: flex;\n}\n\n.w-1600 {\n width: 4rem;\n}\n\n.min-w-0 {\n min-width: 0rem;\n}\n\n.max-w-lg {\n max-width: 32rem;\n}\n\n.max-w-xl {\n max-width: 36rem;\n}\n\n.flex-grow {\n -ms-flex-positive: 1;\n flex-grow: 1;\n}\n\n.items-center {\n -ms-flex-align: center;\n align-items: center;\n}\n\n.gap-400 {\n gap: 1rem;\n}\n\n.truncate {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.border {\n border-width: 1px;\n}\n\n.border-0 {\n border-width: 0rem;\n}\n\n.border-b {\n border-bottom-width: 1px;\n}\n\n.border-t {\n border-top-width: 1px;\n}\n\n.border-solid {\n border-style: solid;\n}\n\n.border-tone-neutral-09 {\n --tw-border-opacity: 1;\n border-color: rgb(var(--tone-neutral-09) / var(--tw-border-opacity));\n}\n\n.bg-label-amaranth-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--label-amaranth-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-aqua-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--label-aqua-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-blue-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--label-blue-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-green-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--label-green-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-lime-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--label-lime-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orange-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--label-orange-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orchid-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--label-orchid-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-violet-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--label-violet-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-yellow-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--label-yellow-10) / var(--tw-bg-opacity));\n}\n\n.bg-tone-neutral-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--tone-neutral-10) / var(--tw-bg-opacity));\n}\n\n.fill-label-amaranth-04 {\n fill: rgb(var(--label-amaranth-04));\n}\n\n.fill-label-aqua-04 {\n fill: rgb(var(--label-aqua-04));\n}\n\n.fill-label-blue-04 {\n fill: rgb(var(--label-blue-04));\n}\n\n.fill-label-green-04 {\n fill: rgb(var(--label-green-04));\n}\n\n.fill-label-lime-04 {\n fill: rgb(var(--label-lime-04));\n}\n\n.fill-label-orange-04 {\n fill: rgb(var(--label-orange-04));\n}\n\n.fill-label-orchid-04 {\n fill: rgb(var(--label-orchid-04));\n}\n\n.fill-label-violet-04 {\n fill: rgb(var(--label-violet-04));\n}\n\n.fill-label-yellow-04 {\n fill: rgb(var(--label-yellow-04));\n}\n\n.fill-tone-neutral-04 {\n fill: rgb(var(--tone-neutral-04));\n}\n\n.p-800 {\n padding: 2rem;\n}\n\n.text-label-amaranth-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--label-amaranth-04) / var(--tw-text-opacity));\n}\n\n.text-label-aqua-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--label-aqua-04) / var(--tw-text-opacity));\n}\n\n.text-label-blue-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--label-blue-04) / var(--tw-text-opacity));\n}\n\n.text-label-green-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--label-green-04) / var(--tw-text-opacity));\n}\n\n.text-label-lime-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--label-lime-04) / var(--tw-text-opacity));\n}\n\n.text-label-orange-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--label-orange-04) / var(--tw-text-opacity));\n}\n\n.text-label-orchid-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--label-orchid-04) / var(--tw-text-opacity));\n}\n\n.text-label-violet-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--label-violet-04) / var(--tw-text-opacity));\n}\n\n.text-label-yellow-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--label-yellow-04) / var(--tw-text-opacity));\n}\n\n.text-tone-neutral-02 {\n --tw-text-opacity: 1;\n color: rgb(var(--tone-neutral-02) / var(--tw-text-opacity));\n}\n\n.text-tone-neutral-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--tone-neutral-04) / var(--tw-text-opacity));\n}\n\n.shadow {\n --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n@container style(--magma-pref-contrast: more) {\n :host {\n\n --mds-modal-window-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6), 0 25px 50px -12px rgb(0 0 0 / 0.25);\n }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n @media (prefers-contrast: more) {\n :host {\n\n --mds-modal-window-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6), 0 25px 50px -12px rgb(0 0 0 / 0.25);\n }\n }\n}\n\n@media (max-width: 767px) {\n .mobile\\:w-1200 {\n width: 3rem;\n }\n}\n\n\n';var MdsModalStyle0=mdsModalCss;var MdsModal=function(){function n(n){var t=this;registerInstance(this,n);this.closeEvent=createEvent(this,"mdsModalClose",7);this.window=false;this.top=false;this.bottom=false;this.animationState="intro";this.km=new KeyboardManager;this.animationName=function(n,o){if(n===void 0){n=""}if(o===void 0){o=""}return"to-".concat(o!==""?o:t.position).concat(n!==""?"-"+n:"")};this.closeModal=function(n){var o;if(((o=n.target)===null||o===void 0?void 0:o.localName)!=="mds-modal"){return}t.opened=n.target!==n.currentTarget;if(!t.opened){t.closeEvent.emit()}};this.stateOpened=undefined;this.opened=false;this.position="center"}n.prototype.componentWillLoad=function(){var n;this.bottom=this.host.querySelector('[slot="bottom"]')!==null;this.top=this.host.querySelector('[slot="top"]')!==null;this.window=this.host.querySelector('[slot="window"]')!==null;this.stateOpened=this.opened;if(!this.window){this.position="right"}if(this.window){(n=this.host.querySelector('[slot="window"]'))===null||n===void 0?void 0:n.setAttribute("role","modal")}};n.prototype.componentWillRender=function(){this.animationState=this.opened?"intro":"outro";this.host.classList.add(this.animationName())};n.prototype.componentDidRender=function(){var n=this;this.animationDeelay=window.setTimeout((function(){n.animationState=n.animationState==="intro"?"outro":"intro";n.host.classList.remove(n.animationName(n.animationState==="intro"?"outro":"intro"));n.host.classList.add(n.animationName(n.animationState));window.clearTimeout(n.animationDeelay)}),500)};n.prototype.componentDidLoad=function(){var n=this;var t;this.km.addElement(this.host,"host");var o=(t=this.host.shadowRoot)===null||t===void 0?void 0:t.querySelector(".close");if(o)this.km.addElement(o,"close");this.km.attachEscapeBehavior((function(){return n.closeEvent.emit()}));this.km.attachClickBehavior("close")};n.prototype.disconnectedCallback=function(){this.km.detachEscapeBehavior();this.km.detachClickBehavior("close")};n.prototype.positionChange=function(n,t){window.clearTimeout(this.animationDeelay);this.host.classList.remove(this.animationName("",t));this.host.classList.remove(this.animationName("intro",t));this.host.classList.remove(this.animationName("outro",t))};n.prototype.openedChange=function(n){this.stateOpened=n;window.clearTimeout(this.animationDeelay)};n.prototype.onModalCloseListener=function(){this.opened=false};n.prototype.onBannerCloseListener=function(){this.opened=false};n.prototype.render=function(){var n=this;return h(Host,{key:"a019a83e46044ef3f9a8a7ce067075572883eeb5","aria-modal":clsx(this.opened?"true":"false"),class:clsx(this.stateOpened&&this.animationName("opened")),onClick:function(t){n.closeModal(t)}},this.window?h("slot",{name:"window"}):h("div",{class:clsx("window",(this.top||this.bottom)&&"window-".concat(this.top?"-top":"").concat(this.bottom?"-bottom":"")),role:"dialog",part:"window"},this.top&&h("slot",{name:"top"}),h("slot",null),this.bottom&&h("slot",{name:"bottom"})),!this.window&&h("mds-button",{key:"85cd20e29302e815996cf1b736fc108c05f2ec4a",icon:miBaselineClose,onClick:function(t){n.closeModal(t)},class:"button-close"}))};Object.defineProperty(n.prototype,"host",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(n,"watchers",{get:function(){return{position:["positionChange"],opened:["openedChange"]}},enumerable:false,configurable:true});return n}();MdsModal.style=MdsModalStyle0;export{MdsModal as mds_modal};
1
+ import{r as registerInstance,c as createEvent,h,H as Host,g as getElement}from"./index-56ba5ebb.js";function r(n){var t,o,e="";if("string"==typeof n||"number"==typeof n)e+=n;else if("object"==typeof n)if(Array.isArray(n)){var i=n.length;for(t=0;t<i;t++)n[t]&&(o=r(n[t]))&&(e&&(e+=" "),e+=o)}else for(o in n)n[o]&&(e&&(e+=" "),e+=o);return e}function clsx(){for(var n,t,o=0,e="",i=arguments.length;o<i;o++)(n=arguments[o])&&(t=r(n))&&(e&&(e+=" "),e+=t);return e}var miBaselineClose='<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12z"/></svg>';var KeyboardManager=function(){function n(){var n=this;this.elements=new Map;this.handleClickBehaviorDispatchEvent=function(n){if(n.code==="Enter"||n.code==="NumpadEnter"){n.target.click()}};this.handleEscapeBehaviorDispatchEvent=function(t){if(t.code==="Escape"&&n.escapeCallback){n.escapeCallback()}};this.addElement=function(t,o){if(o===void 0){o="element"}if(!t){throw Error("Passed an ".concat(t," element parameter to KeyboardManager.addElement"))}n.elements.set(o,t)};this.removeElement=function(t){if(t===void 0){t="element"}n.detachClickBehavior(t);n.elements.delete(t)};this.attachClickBehavior=function(t){if(t===void 0){t="element"}var o;(o=n.elements.get(t))===null||o===void 0?void 0:o.addEventListener("keydown",n.handleClickBehaviorDispatchEvent)};this.detachClickBehavior=function(t){if(t===void 0){t="element"}var o;(o=n.elements.get(t))===null||o===void 0?void 0:o.removeEventListener("keydown",n.handleClickBehaviorDispatchEvent)};this.attachEscapeBehavior=function(t){n.escapeCallback=t;if(window!==undefined){window.addEventListener("keydown",n.handleEscapeBehaviorDispatchEvent.bind(n))}};this.detachEscapeBehavior=function(){n.escapeCallback=function(){return};if(window!==undefined){window.removeEventListener("keydown",n.handleEscapeBehaviorDispatchEvent.bind(n))}}}return n}();var mdsModalCss='@-webkit-keyframes focus-bounce {\n 0%, 75%, 100% {\n outline-offset: var(--magma-outline-focus-offset, 6px);\n }\n\n 50% {\n outline-offset: var(--magma-outline-blur-offset, 2px);\n }\n}\n @keyframes focus-bounce {\n 0%, 75%, 100% {\n outline-offset: var(--magma-outline-focus-offset, 6px);\n }\n\n 50% {\n outline-offset: var(--magma-outline-blur-offset, 2px);\n }\n}\n /* included for focus effect */\n@tailwind components;\n@tailwind utilities;\n\n@tailwind components;\n@tailwind utilities;\n\n\n.svg {\n display: -ms-flexbox;\n display: flex;\n}\n\n\n.svg svg {\n aspect-ratio: 1/1;\n height: 100%;\n width: 100%;\n}\n\n\n.animate-right-intro,\n .animate-right-outro {\n -webkit-transform: translateX(calc(100% + 50px));\n transform: translateX(calc(100% + 50px));\n }\n@tailwind utilities;\n\n/**\n * @prop --mds-modal-close-icon-color: Set the color of the close icon button to the top left.\n * @prop --mds-modal-overlay-color: Set the overlay color of the background when the component is opened, this property can be inherited from `globals.css` in `styles^8.0.0`.\n * @prop --mds-modal-overlay-opacity: Set the overlay color opacity of the background when the component is opened, this property can be inherited from `globals.css` in `styles^8.0.0`.\n * @prop --mds-modal-window-background: Set the background color of the window\n * @prop --mds-modal-window-overflow: Set the overflow of the window\n * @prop --mds-modal-window-shadow: Set the box shadow of the window\n * @prop --mds-modal-z-index: Set the z-index of the window when the component is opened\n */\n\n:host {\n\n --mds-modal-close-icon-color: rgb(var(--tone-neutral));\n --mds-modal-overlay-color: var(--magma-overlay-color, 0 0 0);\n --mds-modal-overlay-opacity: var(--magma-overlay-opacity, 0.5);\n --mds-modal-window-background: rgb(var(--tone-neutral));\n --mds-modal-window-overflow: auto;\n --mds-modal-window-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);\n --mds-modal-z-index: var(--magma-modal-z-index);\n -webkit-transition-duration: 700ms;\n transition-duration: 700ms;\n -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);\n transition-timing-function: cubic-bezier(1, 0, 0, 1);\n\n -ms-flex-align: center;\n\n align-items: center;\n background-color: rgba(var(--mds-modal-overlay-color) / 0);\n display: -ms-flexbox;\n display: flex;\n fill: rgb(var(--tone-neutral));\n inset: 0;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-perspective: 600px;\n perspective: 600px;\n pointer-events: none;\n position: fixed;\n z-index: var(--mds-modal-z-index, 1000);\n}\n\n:host( [position="top"] ) {\n -ms-flex-align: start;\n align-items: flex-start;\n -ms-flex-pack: center;\n justify-content: center;\n}\n\n:host( [position="bottom"] ) {\n -ms-flex-align: end;\n align-items: flex-end;\n -ms-flex-pack: center;\n justify-content: center;\n}\n\n:host( .to-bottom-opened ),\n:host( .to-center-opened ),\n:host( .to-left-opened ),\n:host( .to-right-opened ),\n:host( .to-top-opened ) {\n -webkit-transition-duration: 500ms;\n transition-duration: 500ms;\n\n background-color: rgba(var(--mds-modal-overlay-color) / var(--mds-modal-overlay-opacity));\n pointer-events: auto;\n}\n\n.button-close {\n top: 0rem;\n border-radius: 9999px;\n opacity: 0;\n -webkit-transition-duration: 500ms;\n transition-duration: 500ms;\n -webkit-transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);\n transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);\n\n fill: var(--mds-modal-close-icon-color);\n --mds-button-background: transparent;\n\n height: auto;\n position: absolute;\n -webkit-transform: translate(0, 24px) rotate(90deg);\n transform: translate(0, 24px) rotate(90deg);\n -webkit-transform-origin: center;\n transform-origin: center;\n -webkit-transition-property: opacity, outline, outline-offset, -webkit-transform;\n transition-property: opacity, outline, outline-offset, -webkit-transform;\n transition-property: opacity, outline, outline-offset, transform;\n transition-property: opacity, outline, outline-offset, transform, -webkit-transform;\n}\n\n.button-close::part(icon) {\n height: 2.25rem;\n width: 2.25rem;\n}\n\n.window {\n height: 100%;\n gap: 0rem;\n\n background-color: var(--mds-modal-window-background);\n -webkit-box-shadow: var(--mds-modal-window-shadow);\n box-shadow: var(--mds-modal-window-shadow);\n display: grid;\n grid-template-rows: 1fr;\n max-width: calc(100vw - 80px);\n overflow: var(--mds-modal-window-overflow);\n}\n\n.window--top {\n grid-template-rows: auto 1fr;\n}\n\n.window--bottom {\n grid-template-rows: 1fr auto;\n}\n\n.window--top-bottom {\n grid-template-rows: auto 1fr auto;\n}\n\n/* xx */\n\n:host( .to-bottom ) {\n padding: 2rem;\n}\n\n@media (max-width: 767px) {\n :host( .to-bottom ) {\n padding: 1rem;\n }\n}\n\n:host( .to-bottom ) {\n\n -ms-flex-pack: center;\n\n justify-content: center;\n}\n\n:host( .to-bottom ) .window,\n:host( .to-bottom ) > ::slotted( [slot="window"] ) {\n opacity: 0;\n -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n -webkit-transition-duration: 500ms;\n transition-duration: 500ms;\n -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);\n transition-timing-function: cubic-bezier(1, 0, 0, 1);\n}\n\n:host( .to-bottom-intro ) .window,\n:host( .to-bottom-intro ) > ::slotted( [slot="window"] ) {\n -webkit-transform: rotateX(-22deg) scale(0.5) translateY(40%);\n transform: rotateX(-22deg) scale(0.5) translateY(40%);\n }\n\n:host( .to-bottom-opened.to-bottom-outro ) .window,\n:host( .to-bottom-opened.to-bottom-outro ) > ::slotted( [slot="window"] ),\n:host( .to-bottom-opened ) .window,\n:host( .to-bottom-opened ) > ::slotted( [slot="window"] ) {\n opacity: 1;\n\n -webkit-transform: rotateX(0) scale(1) translateY(0);\n\n transform: rotateX(0) scale(1) translateY(0);\n}\n\n:host( .to-bottom-outro ) .window,\n:host( .to-bottom-outro ) > ::slotted( [slot="window"] ) {\n -webkit-transform: rotateX(-22deg) scale(0.5) translateY(-40%);\n transform: rotateX(-22deg) scale(0.5) translateY(-40%);\n }\n\n:host( .to-center ) {\n padding: 2rem;\n}\n\n@media (max-width: 767px) {\n :host( .to-center ) {\n padding: 1rem;\n }\n}\n\n:host( .to-center ) {\n\n -ms-flex-pack: center;\n\n justify-content: center;\n}\n\n:host( .to-center ) .window,\n:host( .to-center ) > ::slotted( [slot="window"] ) {\n opacity: 0;\n -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n -webkit-transition-duration: 500ms;\n transition-duration: 500ms;\n -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);\n transition-timing-function: cubic-bezier(1, 0, 0, 1);\n}\n\n:host( .to-center-intro ) .window,\n:host( .to-center-intro ) > ::slotted( [slot="window"] ) {\n -webkit-transform: rotateX(-22deg) scale(0.5) translateY(40%);\n transform: rotateX(-22deg) scale(0.5) translateY(40%);\n }\n\n:host( .to-center-opened.to-center-outro ) .window,\n:host( .to-center-opened.to-center-outro ) > ::slotted( [slot="window"] ),\n:host( .to-center-opened ) .window,\n:host( .to-center-opened ) > ::slotted( [slot="window"] ) {\n opacity: 1;\n\n -webkit-transform: rotateX(0) scale(1) translateY(0);\n\n transform: rotateX(0) scale(1) translateY(0);\n}\n\n:host( .to-center-outro ) .window,\n:host( .to-center-outro ) > ::slotted( [slot="window"] ) {\n -webkit-transform: rotateX(-22deg) scale(0.5) translateY(-40%);\n transform: rotateX(-22deg) scale(0.5) translateY(-40%);\n }\n\n:host( .to-left ) {\n -ms-flex-pack: start;\n justify-content: flex-start;\n}\n\n:host( .to-left ) .window,\n:host( .to-left ) > ::slotted( [slot="window"] ) {\n opacity: 0;\n -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n -webkit-transition-duration: 500ms;\n transition-duration: 500ms;\n -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);\n transition-timing-function: cubic-bezier(1, 0, 0, 1);\n}\n\n:host( .to-left-intro ) .window,\n:host( .to-left-intro ) > ::slotted( [slot="window"] ) {\n -webkit-transform: translateX(calc(-100% - 50px));\n transform: translateX(calc(-100% - 50px));\n }\n\n:host( .to-left-opened.to-left-outro ) .window,\n:host( .to-left-opened.to-left-outro ) > ::slotted( [slot="window"] ),\n:host( .to-left-opened ) .window,\n:host( .to-left-opened ) > ::slotted( [slot="window"] ) {\n opacity: 1;\n\n -webkit-transform: translateX(0);\n\n transform: translateX(0);\n}\n\n:host( .to-left-opened ) .button-close,\n:host( .to-left-opened.to-left-outro ) .button-close {\n opacity: 1;\n\n -webkit-transform: translate(-24px, 24px) rotate(0);\n\n transform: translate(-24px, 24px) rotate(0);\n}\n\n:host( .to-left-outro ) .window,\n:host( .to-left-outro ) > ::slotted( [slot="window"] ) {\n -webkit-transform: translateX(calc(-100% - 50px));\n transform: translateX(calc(-100% - 50px));\n }\n\n:host( .to-left-outro ) .button-close {\n -webkit-transform: translate(24px, 24px) rotate(-90deg);\n transform: translate(24px, 24px) rotate(-90deg);\n}\n\n:host( .to-left ) .button-close {\n right: 0rem;\n\n -webkit-transform: translate(36px, 24px) rotate(90deg);\n\n transform: translate(36px, 24px) rotate(90deg);\n}\n\n:host( .to-right ) {\n -ms-flex-pack: end;\n justify-content: flex-end;\n}\n\n:host( .to-right ) .window,\n:host( .to-right ) > ::slotted([slot="window"]) {\n opacity: 0;\n -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n -webkit-transition-duration: 500ms;\n transition-duration: 500ms;\n -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);\n transition-timing-function: cubic-bezier(1, 0, 0, 1);\n}\n\n:host( .to-right-intro ) .window,\n:host( .to-right-intro ) > ::slotted( [slot="window"] ) {\n -webkit-transform: translateX(calc(100% + 50px));\n transform: translateX(calc(100% + 50px));\n }\n\n:host( .to-right-opened.to-right-outro ) .window,\n:host( .to-right-opened.to-right-outro ) > ::slotted( [slot="window"] ),\n:host( .to-right-opened ) .window,\n:host( .to-right-opened ) > ::slotted( [slot="window"] ) {\n opacity: 1;\n\n -webkit-transform: translateX(0);\n\n transform: translateX(0);\n}\n\n:host( .to-right-opened ) .button-close,\n:host( .to-right-opened.to-right-outro ) .button-close {\n opacity: 1;\n\n -webkit-transform: translate(24px, 24px) rotate(0);\n\n transform: translate(24px, 24px) rotate(0);\n}\n\n:host( .to-right-outro ) .window,\n:host( .to-right-outro ) > ::slotted( [slot="window"] ) {\n -webkit-transform: translateX(calc(100% + 50px));\n transform: translateX(calc(100% + 50px));\n }\n\n:host( .to-right-outro ) .button-close {\n -webkit-transform: translate(-24px, 24px) rotate(90deg);\n transform: translate(-24px, 24px) rotate(90deg);\n}\n\n:host( .to-right ) .button-close {\n left: 0rem;\n\n -webkit-transform: translate(-36px, 24px) rotate(-90deg);\n\n transform: translate(-36px, 24px) rotate(-90deg);\n}\n\n:host( .to-top ) {\n padding: 2rem;\n}\n\n@media (max-width: 767px) {\n :host( .to-top ) {\n padding: 1rem;\n }\n}\n\n:host( .to-top ) {\n\n -ms-flex-pack: center;\n\n justify-content: center;\n}\n\n:host( .to-top ) .window,\n:host( .to-top ) > ::slotted( [slot="window"] ) {\n opacity: 0;\n -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n -webkit-transition-duration: 500ms;\n transition-duration: 500ms;\n -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);\n transition-timing-function: cubic-bezier(1, 0, 0, 1);\n}\n\n:host( .to-top-intro ) .window,\n:host( .to-top-intro ) > ::slotted( [slot="window"] ) {\n -webkit-transform: rotateX(-22deg) scale(0.5) translateY(40%);\n transform: rotateX(-22deg) scale(0.5) translateY(40%);\n }\n\n:host( .to-top-opened.to-top-outro ) .window,\n:host( .to-top-opened.to-top-outro ) > ::slotted( [slot="window"] ),\n:host( .to-top-opened ) .window,\n:host( .to-top-opened ) > ::slotted( [slot="window"] ) {\n opacity: 1;\n\n -webkit-transform: rotateX(0) scale(1) translateY(0);\n\n transform: rotateX(0) scale(1) translateY(0);\n}\n\n:host( .to-top-outro ) .window,\n:host( .to-top-outro ) > ::slotted( [slot="window"] ) {\n -webkit-transform: rotateX(-22deg) scale(0.5) translateY(-40%);\n transform: rotateX(-22deg) scale(0.5) translateY(-40%);\n }\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n :host,\n .button-close,\n .window {\n -webkit-transition-duration: 0s !important;\n transition-duration: 0s !important;\n }\n}\n\n@container style(--magma-pref-animation: system) {\n\n @media (prefers-reduced-motion) {\n :host,\n .button-close,\n .window {\n -webkit-transition-duration: 0s !important;\n transition-duration: 0s !important;\n }\n }\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-theme: dark) {\n :host {\n\n --mds-modal-window-background: rgb(var(--tone-neutral-09));\n --mds-modal-window-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3), 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);\n }\n}\n\n@container style(--magma-pref-theme: system) {\n\n @media (prefers-color-scheme: dark) {\n :host {\n\n --mds-modal-window-background: rgb(var(--tone-neutral-09));\n --mds-modal-window-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3), 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);\n }\n }\n}\n\n.static {\n position: static;\n}\n\n.fixed {\n position: fixed;\n}\n\n.absolute {\n position: absolute;\n}\n\n.flex {\n display: -ms-flexbox;\n display: flex;\n}\n\n.w-1600 {\n width: 4rem;\n}\n\n.min-w-0 {\n min-width: 0rem;\n}\n\n.max-w-lg {\n max-width: 32rem;\n}\n\n.max-w-xl {\n max-width: 36rem;\n}\n\n.flex-grow {\n -ms-flex-positive: 1;\n flex-grow: 1;\n}\n\n.items-center {\n -ms-flex-align: center;\n align-items: center;\n}\n\n.gap-400 {\n gap: 1rem;\n}\n\n.truncate {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.border {\n border-width: 1px;\n}\n\n.border-0 {\n border-width: 0rem;\n}\n\n.border-b {\n border-bottom-width: 1px;\n}\n\n.border-t {\n border-top-width: 1px;\n}\n\n.border-solid {\n border-style: solid;\n}\n\n.border-tone-neutral-09 {\n --tw-border-opacity: 1;\n border-color: rgb(var(--tone-neutral-09) / var(--tw-border-opacity));\n}\n\n.bg-label-amaranth-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--label-amaranth-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-aqua-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--label-aqua-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-blue-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--label-blue-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-green-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--label-green-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-lime-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--label-lime-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orange-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--label-orange-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orchid-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--label-orchid-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-violet-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--label-violet-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-yellow-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--label-yellow-10) / var(--tw-bg-opacity));\n}\n\n.bg-tone-neutral-10 {\n --tw-bg-opacity: 1;\n background-color: rgb(var(--tone-neutral-10) / var(--tw-bg-opacity));\n}\n\n.fill-label-amaranth-04 {\n fill: rgb(var(--label-amaranth-04));\n}\n\n.fill-label-aqua-04 {\n fill: rgb(var(--label-aqua-04));\n}\n\n.fill-label-blue-04 {\n fill: rgb(var(--label-blue-04));\n}\n\n.fill-label-green-04 {\n fill: rgb(var(--label-green-04));\n}\n\n.fill-label-lime-04 {\n fill: rgb(var(--label-lime-04));\n}\n\n.fill-label-orange-04 {\n fill: rgb(var(--label-orange-04));\n}\n\n.fill-label-orchid-04 {\n fill: rgb(var(--label-orchid-04));\n}\n\n.fill-label-violet-04 {\n fill: rgb(var(--label-violet-04));\n}\n\n.fill-label-yellow-04 {\n fill: rgb(var(--label-yellow-04));\n}\n\n.fill-tone-neutral-04 {\n fill: rgb(var(--tone-neutral-04));\n}\n\n.p-800 {\n padding: 2rem;\n}\n\n.text-label-amaranth-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--label-amaranth-04) / var(--tw-text-opacity));\n}\n\n.text-label-aqua-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--label-aqua-04) / var(--tw-text-opacity));\n}\n\n.text-label-blue-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--label-blue-04) / var(--tw-text-opacity));\n}\n\n.text-label-green-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--label-green-04) / var(--tw-text-opacity));\n}\n\n.text-label-lime-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--label-lime-04) / var(--tw-text-opacity));\n}\n\n.text-label-orange-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--label-orange-04) / var(--tw-text-opacity));\n}\n\n.text-label-orchid-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--label-orchid-04) / var(--tw-text-opacity));\n}\n\n.text-label-violet-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--label-violet-04) / var(--tw-text-opacity));\n}\n\n.text-label-yellow-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--label-yellow-04) / var(--tw-text-opacity));\n}\n\n.text-tone-neutral-02 {\n --tw-text-opacity: 1;\n color: rgb(var(--tone-neutral-02) / var(--tw-text-opacity));\n}\n\n.text-tone-neutral-04 {\n --tw-text-opacity: 1;\n color: rgb(var(--tone-neutral-04) / var(--tw-text-opacity));\n}\n\n.shadow {\n --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n@container style(--magma-pref-contrast: more) {\n :host {\n\n --mds-modal-window-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6), 0 25px 50px -12px rgb(0 0 0 / 0.25);\n }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n @media (prefers-contrast: more) {\n :host {\n\n --mds-modal-window-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6), 0 25px 50px -12px rgb(0 0 0 / 0.25);\n }\n }\n}\n\n@media (max-width: 767px) {\n .mobile\\:w-1200 {\n width: 3rem;\n }\n}\n\n\n';var MdsModalStyle0=mdsModalCss;var MdsModal=function(){function n(n){var t=this;registerInstance(this,n);this.closeEvent=createEvent(this,"mdsModalClose",7);this.window=false;this.top=false;this.bottom=false;this.animationState="intro";this.km=new KeyboardManager;this.animationName=function(n,o){if(n===void 0){n=""}if(o===void 0){o=""}return"to-".concat(o!==""?o:t.position).concat(n!==""?"-"+n:"")};this.closeModal=function(n){var o;if(((o=n.target)===null||o===void 0?void 0:o.localName)!=="mds-modal"){return}t.opened=n.target!==n.currentTarget;if(!t.opened){t.closeEvent.emit()}};this.stateOpened=undefined;this.opened=false;this.position="center"}n.prototype.componentWillLoad=function(){var n;this.bottom=this.host.querySelector('[slot="bottom"]')!==null;this.top=this.host.querySelector('[slot="top"]')!==null;this.window=this.host.querySelector('[slot="window"]')!==null;this.stateOpened=this.opened;if(!this.window){this.position="right"}if(this.window){(n=this.host.querySelector('[slot="window"]'))===null||n===void 0?void 0:n.setAttribute("role","modal")}};n.prototype.componentWillRender=function(){this.animationState=this.opened?"intro":"outro";this.host.classList.add(this.animationName())};n.prototype.componentDidRender=function(){var n=this;this.animationDeelay=window.setTimeout((function(){n.animationState=n.animationState==="intro"?"outro":"intro";n.host.classList.remove(n.animationName(n.animationState==="intro"?"outro":"intro"));n.host.classList.add(n.animationName(n.animationState));window.clearTimeout(n.animationDeelay)}),500)};n.prototype.componentDidLoad=function(){var n=this;var t;this.km.addElement(this.host,"host");var o=(t=this.host.shadowRoot)===null||t===void 0?void 0:t.querySelector(".close");if(o)this.km.addElement(o,"close");this.km.attachEscapeBehavior((function(){return n.closeEvent.emit()}));this.km.attachClickBehavior("close")};n.prototype.disconnectedCallback=function(){this.km.detachEscapeBehavior();this.km.detachClickBehavior("close")};n.prototype.positionChange=function(n,t){window.clearTimeout(this.animationDeelay);this.host.classList.remove(this.animationName("",t));this.host.classList.remove(this.animationName("intro",t));this.host.classList.remove(this.animationName("outro",t))};n.prototype.openedChange=function(n){this.stateOpened=n;window.clearTimeout(this.animationDeelay)};n.prototype.onModalCloseListener=function(){this.opened=false};n.prototype.onBannerCloseListener=function(){this.opened=false};n.prototype.render=function(){var n=this;return h(Host,{key:"a019a83e46044ef3f9a8a7ce067075572883eeb5","aria-modal":clsx(this.opened?"true":"false"),class:clsx(this.stateOpened&&this.animationName("opened")),onClick:function(t){n.closeModal(t)}},this.window?h("slot",{name:"window"}):h("div",{class:clsx("window",(this.top||this.bottom)&&"window-".concat(this.top?"-top":"").concat(this.bottom?"-bottom":"")),role:"dialog",part:"window"},this.top&&h("slot",{name:"top"}),h("slot",null),this.bottom&&h("slot",{name:"bottom"})),!this.window&&h("mds-button",{key:"85cd20e29302e815996cf1b736fc108c05f2ec4a",icon:miBaselineClose,onClick:function(t){n.closeModal(t)},class:"button-close"}))};Object.defineProperty(n.prototype,"host",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(n,"watchers",{get:function(){return{position:["positionChange"],opened:["openedChange"]}},enumerable:false,configurable:true});return n}();MdsModal.style=MdsModalStyle0;export{MdsModal as mds_modal};
package/dist/mds-modal/mds-modal.esm.js CHANGED
@@ -1 +1 @@
1
- import{p as e,b as o}from"./p-40ee28e3.js";export{s as setNonce}from"./p-40ee28e3.js";import{g as n}from"./p-e1255160.js";(()=>{const o=import.meta.url,s={};return""!==o&&(s.resourcesUrl=new URL(".",o).href),e(s)})().then((async e=>(await n(),o([["p-b83835e4",[[1,"mds-modal",{opened:[1540],position:[1537],stateOpened:[32]},[[4,"mdsModalClose","onModalCloseListener"],[4,"mdsBannerClose","onBannerCloseListener"]],{position:["positionChange"],opened:["openedChange"]}]]]],e))));
1
+ import{p as e,b as o}from"./p-40ee28e3.js";export{s as setNonce}from"./p-40ee28e3.js";import{g as n}from"./p-e1255160.js";(()=>{const o=import.meta.url,s={};return""!==o&&(s.resourcesUrl=new URL(".",o).href),e(s)})().then((async e=>(await n(),o([["p-cb3a151e",[[1,"mds-modal",{opened:[1540],position:[1537],stateOpened:[32]},[[4,"mdsModalClose","onModalCloseListener"],[4,"mdsBannerClose","onBannerCloseListener"]],{position:["positionChange"],opened:["openedChange"]}]]]],e))));