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

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 (24) hide show
  1. package/dist/cjs/mds-modal.cjs.entry.js +1 -1
  2. package/dist/collection/components/mds-modal/mds-modal.css +1 -1
  3. package/dist/components/mds-modal.js +1 -1
  4. package/dist/documentation.json +1 -1
  5. package/dist/esm/mds-modal.entry.js +1 -1
  6. package/dist/esm-es5/mds-modal.entry.js +1 -1
  7. package/dist/mds-modal/mds-modal.esm.js +1 -1
  8. package/dist/mds-modal/p-3a04d26f.system.entry.js +1 -0
  9. package/dist/mds-modal/p-92688c52.system.js +1 -1
  10. package/dist/mds-modal/p-cb3a151e.entry.js +1 -0
  11. package/dist/stats.json +14 -14
  12. package/documentation.json +1 -1
  13. package/package.json +2 -2
  14. package/src/components/mds-modal/mds-modal.css +1 -1
  15. package/src/fixtures/icons.json +17 -0
  16. package/src/fixtures/iconsauce.json +17 -0
  17. package/www/build/mds-modal.esm.js +1 -1
  18. package/www/build/p-3a04d26f.system.entry.js +1 -0
  19. package/www/build/p-92688c52.system.js +1 -1
  20. package/www/build/p-cb3a151e.entry.js +1 -0
  21. package/dist/mds-modal/p-86b0df47.system.entry.js +0 -1
  22. package/dist/mds-modal/p-b83835e4.entry.js +0 -1
  23. package/www/build/p-86b0df47.system.entry.js +0 -1
  24. 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/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/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-23T14:58:34",
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))));
package/dist/mds-modal/p-3a04d26f.system.entry.js ADDED
@@ -0,0 +1 @@
1
+ System.register(["./p-c93e3da8.system.js"],(function(n){"use strict";var t,o,r,e,i;return{setters:[function(n){t=n.r;o=n.c;r=n.h;e=n.H;i=n.g}],execute:function(){function a(n){var t,o,r="";if("string"==typeof n||"number"==typeof n)r+=n;else if("object"==typeof n)if(Array.isArray(n)){var e=n.length;for(t=0;t<e;t++)n[t]&&(o=a(n[t]))&&(r&&(r+=" "),r+=o)}else for(o in n)n[o]&&(r&&(r+=" "),r+=o);return r}function s(){for(var n,t,o=0,r="",e=arguments.length;o<e;o++)(n=arguments[o])&&(t=a(n))&&(r&&(r+=" "),r+=t);return r}var l='<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 d=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 c='@-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 w=c;var b=n("mds_modal",function(){function n(n){var r=this;t(this,n);this.closeEvent=o(this,"mdsModalClose",7);this.window=false;this.top=false;this.bottom=false;this.animationState="intro";this.km=new d;this.animationName=function(n,t){if(n===void 0){n=""}if(t===void 0){t=""}return"to-".concat(t!==""?t:r.position).concat(n!==""?"-"+n:"")};this.closeModal=function(n){var t;if(((t=n.target)===null||t===void 0?void 0:t.localName)!=="mds-modal"){return}r.opened=n.target!==n.currentTarget;if(!r.opened){r.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 r(e,{key:"a019a83e46044ef3f9a8a7ce067075572883eeb5","aria-modal":s(this.opened?"true":"false"),class:s(this.stateOpened&&this.animationName("opened")),onClick:function(t){n.closeModal(t)}},this.window?r("slot",{name:"window"}):r("div",{class:s("window",(this.top||this.bottom)&&"window-".concat(this.top?"-top":"").concat(this.bottom?"-bottom":"")),role:"dialog",part:"window"},this.top&&r("slot",{name:"top"}),r("slot",null),this.bottom&&r("slot",{name:"bottom"})),!this.window&&r("mds-button",{key:"85cd20e29302e815996cf1b736fc108c05f2ec4a",icon:l,onClick:function(t){n.closeModal(t)},class:"button-close"}))};Object.defineProperty(n.prototype,"host",{get:function(){return i(this)},enumerable:false,configurable:true});Object.defineProperty(n,"watchers",{get:function(){return{position:["positionChange"],opened:["openedChange"]}},enumerable:false,configurable:true});return n}());b.style=w}}}));
package/dist/mds-modal/p-92688c52.system.js CHANGED
@@ -1 +1 @@
1
- var __awaiter=this&&this.__awaiter||function(n,e,t,r){function i(n){return n instanceof t?n:new t((function(e){e(n)}))}return new(t||(t=Promise))((function(t,o){function s(n){try{a(r.next(n))}catch(n){o(n)}}function u(n){try{a(r["throw"](n))}catch(n){o(n)}}function a(n){n.done?t(n.value):i(n.value).then(s,u)}a((r=r.apply(n,e||[])).next())}))};var __generator=this&&this.__generator||function(n,e){var t={label:0,sent:function(){if(o[0]&1)throw o[1];return o[1]},trys:[],ops:[]},r,i,o,s;return s={next:u(0),throw:u(1),return:u(2)},typeof Symbol==="function"&&(s[Symbol.iterator]=function(){return this}),s;function u(n){return function(e){return a([n,e])}}function a(u){if(r)throw new TypeError("Generator is already executing.");while(s&&(s=0,u[0]&&(t=0)),t)try{if(r=1,i&&(o=u[0]&2?i["return"]:u[0]?i["throw"]||((o=i["return"])&&o.call(i),0):i.next)&&!(o=o.call(i,u[1])).done)return o;if(i=0,o)u=[u[0]&2,o.value];switch(u[0]){case 0:case 1:o=u;break;case 4:t.label++;return{value:u[1],done:false};case 5:t.label++;i=u[1];u=[0];continue;case 7:u=t.ops.pop();t.trys.pop();continue;default:if(!(o=t.trys,o=o.length>0&&o[o.length-1])&&(u[0]===6||u[0]===2)){t=0;continue}if(u[0]===3&&(!o||u[1]>o[0]&&u[1]<o[3])){t.label=u[1];break}if(u[0]===6&&t.label<o[1]){t.label=o[1];o=u;break}if(o&&t.label<o[2]){t.label=o[2];t.ops.push(u);break}if(o[2])t.ops.pop();t.trys.pop();continue}u=e.call(n,t)}catch(n){u=[6,n];i=0}finally{r=o=0}if(u[0]&5)throw u[1];return{value:u[0]?u[1]:void 0,done:true}}};System.register(["./p-c93e3da8.system.js","./p-56ba5cbf.system.js"],(function(n,e){"use strict";var t,r,i;return{setters:[function(e){t=e.p;r=e.b;n("setNonce",e.s)},function(n){i=n.g}],execute:function(){var n=this;var o=function(){var n=e.meta.url;var r={};if(n!==""){r.resourcesUrl=new URL(".",n).href}return t(r)};o().then((function(e){return __awaiter(n,void 0,void 0,(function(){return __generator(this,(function(n){switch(n.label){case 0:return[4,i()];case 1:n.sent();return[2,r([["p-86b0df47.system",[[1,"mds-modal",{opened:[1540],position:[1537],stateOpened:[32]},[[4,"mdsModalClose","onModalCloseListener"],[4,"mdsBannerClose","onBannerCloseListener"]],{position:["positionChange"],opened:["openedChange"]}]]]],e)]}}))}))}))}}}));
1
+ var __awaiter=this&&this.__awaiter||function(n,e,t,r){function i(n){return n instanceof t?n:new t((function(e){e(n)}))}return new(t||(t=Promise))((function(t,o){function s(n){try{a(r.next(n))}catch(n){o(n)}}function u(n){try{a(r["throw"](n))}catch(n){o(n)}}function a(n){n.done?t(n.value):i(n.value).then(s,u)}a((r=r.apply(n,e||[])).next())}))};var __generator=this&&this.__generator||function(n,e){var t={label:0,sent:function(){if(o[0]&1)throw o[1];return o[1]},trys:[],ops:[]},r,i,o,s;return s={next:u(0),throw:u(1),return:u(2)},typeof Symbol==="function"&&(s[Symbol.iterator]=function(){return this}),s;function u(n){return function(e){return a([n,e])}}function a(u){if(r)throw new TypeError("Generator is already executing.");while(s&&(s=0,u[0]&&(t=0)),t)try{if(r=1,i&&(o=u[0]&2?i["return"]:u[0]?i["throw"]||((o=i["return"])&&o.call(i),0):i.next)&&!(o=o.call(i,u[1])).done)return o;if(i=0,o)u=[u[0]&2,o.value];switch(u[0]){case 0:case 1:o=u;break;case 4:t.label++;return{value:u[1],done:false};case 5:t.label++;i=u[1];u=[0];continue;case 7:u=t.ops.pop();t.trys.pop();continue;default:if(!(o=t.trys,o=o.length>0&&o[o.length-1])&&(u[0]===6||u[0]===2)){t=0;continue}if(u[0]===3&&(!o||u[1]>o[0]&&u[1]<o[3])){t.label=u[1];break}if(u[0]===6&&t.label<o[1]){t.label=o[1];o=u;break}if(o&&t.label<o[2]){t.label=o[2];t.ops.push(u);break}if(o[2])t.ops.pop();t.trys.pop();continue}u=e.call(n,t)}catch(n){u=[6,n];i=0}finally{r=o=0}if(u[0]&5)throw u[1];return{value:u[0]?u[1]:void 0,done:true}}};System.register(["./p-c93e3da8.system.js","./p-56ba5cbf.system.js"],(function(n,e){"use strict";var t,r,i;return{setters:[function(e){t=e.p;r=e.b;n("setNonce",e.s)},function(n){i=n.g}],execute:function(){var n=this;var o=function(){var n=e.meta.url;var r={};if(n!==""){r.resourcesUrl=new URL(".",n).href}return t(r)};o().then((function(e){return __awaiter(n,void 0,void 0,(function(){return __generator(this,(function(n){switch(n.label){case 0:return[4,i()];case 1:n.sent();return[2,r([["p-3a04d26f.system",[[1,"mds-modal",{opened:[1540],position:[1537],stateOpened:[32]},[[4,"mdsModalClose","onModalCloseListener"],[4,"mdsBannerClose","onBannerCloseListener"]],{position:["positionChange"],opened:["openedChange"]}]]]],e)]}}))}))}))}}}));