@maggioli-design-system/mds-modal 5.2.1 → 5.3.0

package/src/common/floating-controller.ts

@@ -0,0 +1,263 @@
+import {
+  arrow,
+  autoPlacement,
+  autoUpdate,
+  computePosition,
+  flip,
+  Middleware,
+  MiddlewareData,
+  offset,
+  shift,
+} from '@floating-ui/dom'
+import { FloatingUIPlacement, FloatingUIStrategy } from '@type/floating-ui'
+import { cssDurationToMilliseconds } from './unit'
+import { setAttributeIfEmpty } from './aria'
+import { HTMLStencilElement } from '@stencil/core/internal'
+
+export interface FloatingElement extends PositionOptions {
+  host: HTMLFloatingElement,
+}
+
+export interface HTMLFloatingElement extends HTMLStencilElement, PositionOptions {
+  visible: boolean,
+}
+
+export interface PositionOptions {
+  arrow: boolean;
+  arrowPadding: number;
+  autoPlacement: boolean;
+  flip: boolean;
+  offset: number;
+  placement: FloatingUIPlacement;
+  shift: boolean;
+  shiftPadding: number;
+  strategy: FloatingUIStrategy;
+}
+
+export class FloatingController {
+  private _caller: HTMLElement
+  private readonly _host: HTMLFloatingElement
+  arrowEl: HTMLElement | undefined
+
+  private cleanupAutoUpdate: () => void
+
+  constructor (host: HTMLFloatingElement, arrowEl?: HTMLElement) {
+    this._host = host
+    this.arrowEl = arrowEl
+  }
+
+  updateCaller (target: string): HTMLElement {
+    // search caller in document or rootNode of host (if target is in shadowDOM)
+    const caller = (this._host.parentElement?.shadowRoot?.querySelector(target) as HTMLElement) ??
+      ((this._host.getRootNode() as HTMLElement).querySelector(target) as HTMLElement)
+
+    if (!caller) {
+      throw Error(`Target not found: ${target}`)
+    }
+
+    this._caller = caller
+
+    setAttributeIfEmpty(this._caller, 'aria-haspopup', 'true')
+    setAttributeIfEmpty(this._caller, 'aria-controls', target)
+    setAttributeIfEmpty(this._host, 'role', 'menu')
+    setAttributeIfEmpty(this._host, 'aria-labelledby', target)
+    return caller
+  }
+
+  private readonly arrowInset = (
+    middleware: MiddlewareData,
+    arrowPosition: string,
+  ): { bottom?: string; left?: string; right?: string; top?: string } => {
+    const { arrow } = middleware
+    const inset = { bottom: '', left: '', right: '', top: '' }
+
+    if (arrow === undefined) {
+      return {}
+    }
+
+    switch (arrowPosition) {
+    case 'bottom':
+      inset.left = arrow.x !== null ? `${arrow.x}px` : ''
+      inset.top = '100%'
+      break
+    case 'left':
+      inset.right = '100%'
+      inset.top = arrow.y !== null ? `${arrow.y}px` : ''
+      break
+    case 'right':
+      inset.left = '100%'
+      inset.top = arrow.y !== null ? `${arrow.y}px` : ''
+      break
+    case 'top':
+      inset.left = arrow.x !== null ? `${arrow.x}px` : ''
+      inset.top = ''
+      break
+    default:
+      break
+    }
+    return inset
+  }
+
+  private readonly arrowTransform = (
+    arrowPosition: string,
+  ): { transform: string } => {
+    let transformProps = this._host.arrow && this._host.visible ? 'scale(1)' : 'scale(0)'
+    switch (arrowPosition) {
+    case 'bottom':
+      transformProps = `rotate(180deg) ${transformProps} translate(0, -100%)`
+      break
+    case 'left':
+      transformProps = `rotate(-90deg) ${transformProps} translate(50%, -50%)`
+      break
+    case 'right':
+      transformProps = `rotate(90deg) ${transformProps} translate(-50%, -50%)`
+      break
+    case 'top':
+      transformProps = `rotate(0deg) ${transformProps} translate(0, 0)`
+      break
+    default:
+      break
+    }
+    return { transform: transformProps }
+  }
+
+  private readonly arrowTransformOrigin = (
+    arrowPosition: string,
+  ): { transformOrigin: string } => {
+    switch (arrowPosition) {
+    case 'bottom':
+      return { transformOrigin: 'center top' }
+    case 'left':
+      return { transformOrigin: 'right center' }
+    case 'right':
+      return { transformOrigin: 'left center' }
+    case 'top':
+      return { transformOrigin: 'center bottom' }
+    default:
+      return { transformOrigin: 'center top' }
+    }
+  }
+
+  private readonly calculatePosition = (): void => {
+    if (!this._caller) return
+
+    const middleware: Middleware[] = new Array<Middleware>()
+    const config: { padding?: number } = {}
+
+    if (this._host.shiftPadding) {
+      config.padding = this._host.shiftPadding
+    }
+
+    if (this._host.autoPlacement) {
+      middleware.push(autoPlacement())
+    }
+
+    if (this._host.offset) {
+      middleware.push(offset(this._host.offset))
+    }
+
+    if (!this._host.autoPlacement && this._host.flip) {
+      middleware.push(flip(config))
+    }
+
+    if (this._host.shift) {
+      middleware.push(shift(config))
+    }
+
+    if (this.arrowEl && this._host.arrow) {
+      middleware.push(
+        arrow({
+          element: this.arrowEl,
+          padding: this._host.arrowPadding,
+        }),
+      )
+    }
+
+    computePosition(this._caller, this._host, {
+      middleware,
+      placement: this._host.placement,
+      strategy: this._host.strategy,
+    }).then(({ x, y, placement, middlewareData }) => {
+      Object.assign(this._host.style, {
+        left: `${x}px`,
+        top: `${y}px`,
+      })
+
+      const arrowStyle = {}
+      const arrowPosition = {
+        top: 'bottom',
+        right: 'left',
+        bottom: 'top',
+        left: 'right',
+      }[placement.split('-')[0]]
+
+      if (arrowPosition && this.arrowEl) {
+        Object.assign(arrowStyle, this.arrowTransform(arrowPosition))
+        Object.assign(
+          arrowStyle,
+          this.arrowInset(middlewareData, arrowPosition),
+        )
+        Object.assign(arrowStyle, this.arrowTransformOrigin(arrowPosition))
+        Object.assign(this.arrowEl.style, arrowStyle)
+      }
+    })
+  }
+
+  updatePosition (): void {
+    if (this.cleanupAutoUpdate) this.cleanupAutoUpdate()
+    this.cleanupAutoUpdate = autoUpdate(this._caller, this._host, this.calculatePosition)
+  }
+
+  dismiss (): void {
+    this.cleanupAutoUpdate()
+  }
+}
+
+export class Backdrop {
+  private readonly defaultBackdropId = 'mds-backdrop'
+  private readonly backdropBackgroundVisible = 'rgba(var(--magma-backdrop-color, 0 0 0) / var(--magma-backdrop-opacity, 0.1))'
+  private readonly backdropBackgroundHidden = 'rgba(var(--magma-backdrop-color, 0 0 0) / 0)'
+
+  private readonly backdropId
+  private readonly cssBackdropZIndex
+  private readonly cssBackdropDuration
+
+  private backdropEl: HTMLElement
+  private backdropTimer: NodeJS.Timeout
+
+  constructor (backdropId?: string) {
+    this.backdropId = backdropId ?? this.defaultBackdropId
+    this.cssBackdropZIndex = `var(--${this.backdropId}-z-index)`
+    this.cssBackdropDuration = `var(--${this.backdropId}-duration)`
+  }
+
+  attachBackdrop (): void {
+    if (!this.backdropEl) {
+      this.backdropEl = document.createElement('div')
+      this.backdropEl.className = this.backdropId
+      this.backdropEl.style.inset = '0'
+      this.backdropEl.style.pointerEvents = 'none'
+      this.backdropEl.style.position = 'fixed'
+      this.backdropEl.style.transition = `background-color ${this.cssBackdropDuration} ease-out`
+      this.backdropEl.style.zIndex = this.cssBackdropZIndex
+    }
+    this.backdropEl.style.backgroundColor = this.backdropBackgroundHidden
+    document.body.appendChild(this.backdropEl)
+
+    clearTimeout(this.backdropTimer)
+    this.backdropTimer = setTimeout(() => {
+      this.backdropEl.style.backgroundColor = this.backdropBackgroundVisible
+    }, 1)
+  }
+
+  detachBackdrop (): void {
+    if (!this.backdropEl) {
+      return
+    }
+    this.backdropEl.style.backgroundColor = 'transparent'
+    clearTimeout(this.backdropTimer)
+    this.backdropTimer = setTimeout(() => {
+      this.backdropEl.remove()
+    }, cssDurationToMilliseconds(this.cssBackdropDuration))
+  }
+}

package/src/common/slot.ts

@@ -1,8 +1,16 @@
 const hasSlottedElements = (el: HTMLElement, name?: string): boolean => {
-  let query = 'slot'
-  if (name) {
-    query = `slot[name=${name}]`
+  const query = name ? `slot[name="${name}"]` : 'slot:not([name])'
+
+  const slot: HTMLSlotElement = el.shadowRoot?.querySelector(query) as HTMLSlotElement
+  if (slot) {
+    return slot.assignedElements({ flatten: true }).length > 0
   }
+  return false
+}
+
+const hasSlottedNodes = (el: HTMLElement, name?: string): boolean => {
+  const query = name ? `slot[name="${name}"]` : 'slot:not([name])'
+
   const slot: HTMLSlotElement = el.shadowRoot?.querySelector(query) as HTMLSlotElement
   if (slot) {
     return slot.assignedNodes().length > 0
@@ -12,4 +20,5 @@ const hasSlottedElements = (el: HTMLElement, name?: string): boolean => {
 
 export {
   hasSlottedElements,
+  hasSlottedNodes,
 }

package/src/dictionary/tree.ts

@@ -0,0 +1,21 @@
+const treeActionsDictionary = [
+  'auto',
+  'visible',
+]
+
+const treeAppearanceDictionary = [
+  'depth',
+  'none',
+]
+
+const treeIconDictionary = [
+  'folder',
+  'chevron',
+]
+
+export {
+  treeActionsDictionary,
+  treeAppearanceDictionary,
+  treeIconDictionary,
+}
+

package/src/fixtures/icons.json

@@ -7,6 +7,10 @@
     "mdi/dots-vertical",
     "mdi/email",
     "mdi/file-document-remove-outline",
+    "mdi/file-download-outline",
+    "mdi/file-upload-outline",
+    "mdi/folder-open",
+    "mdi/handshake",
     "mdi/harddisk",
     "mdi/license",
     "mdi/map-marker",
@@ -44,6 +48,7 @@
     "mgg/ai-status-processing",
     "mgg/ai-status-suspended",
     "mgg/alerts-pagopa",
+    "mgg/anagrafe-nazionale",
     "mgg/anpr",
     "mgg/ansc",
     "mgg/area-edificabile",
@@ -68,6 +73,7 @@
     "mgg/cancelled-sheet",
     "mgg/car-license",
     "mgg/card-stamping",
+    "mgg/cash-register-settings",
     "mgg/check-small",
     "mgg/checklist",
     "mgg/checklist-settings",
@@ -164,7 +170,9 @@
     "mgg/home-hammer",
     "mgg/home-link",
     "mgg/home-number",
+    "mgg/inad",
     "mgg/inagibile",
+    "mgg/inps",
     "mgg/input-calendar-costs",
     "mgg/input-calendar-period",
     "mgg/input-calendar-time",
@@ -237,7 +245,9 @@
     "mgg/places-park",
     "mgg/places-park-alt",
     "mgg/places-store-access-denied",
+    "mgg/pos",
     "mgg/property-owner",
+    "mgg/registro-imprese",
     "mgg/relevance",
     "mgg/reporting-abuse",
     "mgg/residency-permit",
@@ -332,21 +342,27 @@
     "mi/baseline/check-box",
     "mi/baseline/check-box-outline-blank",
     "mi/baseline/check-circle",
+    "mi/baseline/chevron-right",
     "mi/baseline/close",
     "mi/baseline/contrast",
     "mi/baseline/css",
     "mi/baseline/dark-mode",
     "mi/baseline/delete",
     "mi/baseline/description",
+    "mi/baseline/desk",
     "mi/baseline/directions-run",
     "mi/baseline/directions-walk",
     "mi/baseline/done",
     "mi/baseline/downhill-skiing",
+    "mi/baseline/draw",
     "mi/baseline/eco",
     "mi/baseline/email",
     "mi/baseline/error",
     "mi/baseline/explore",
+    "mi/baseline/favorite",
+    "mi/baseline/favorite-border",
     "mi/baseline/file-download-done",
+    "mi/baseline/folder",
     "mi/baseline/folder-zip",
     "mi/baseline/horizontal-rule",
     "mi/baseline/indeterminate-check-box",
@@ -356,9 +372,12 @@
     "mi/baseline/keyboard-arrow-up",
     "mi/baseline/light-mode",
     "mi/baseline/local-activity",
+    "mi/baseline/location-city",
     "mi/baseline/lock-open",
     "mi/baseline/login",
     "mi/baseline/logout",
+    "mi/baseline/meeting-room",
+    "mi/baseline/more-vert",
     "mi/baseline/navigate-next",
     "mi/baseline/panorama",
     "mi/baseline/person",
@@ -376,6 +395,7 @@
     "mi/baseline/terminal",
     "mi/baseline/timer",
     "mi/baseline/tv",
+    "mi/baseline/unfold-less",
     "mi/baseline/unfold-more",
     "mi/baseline/videocam",
     "mi/baseline/visibility",

package/src/fixtures/iconsauce.json

@@ -31,6 +31,7 @@
     "mgg/ai-status-processing",
     "mgg/ai-status-suspended",
     "mgg/alerts-pagopa",
+    "mgg/anagrafe-nazionale",
     "mgg/anpr",
     "mgg/ansc",
     "mgg/area-edificabile",
@@ -55,6 +56,7 @@
     "mgg/cancelled-sheet",
     "mgg/car-license",
     "mgg/card-stamping",
+    "mgg/cash-register-settings",
     "mgg/check-small",
     "mgg/checklist-settings",
     "mgg/checklist",
@@ -151,7 +153,9 @@
     "mgg/home-hammer",
     "mgg/home-link",
     "mgg/home-number",
+    "mgg/inad",
     "mgg/inagibile",
+    "mgg/inps",
     "mgg/input-calendar-costs",
     "mgg/input-calendar-period",
     "mgg/input-calendar-time",
@@ -224,7 +228,9 @@
     "mgg/places-park-alt",
     "mgg/places-park",
     "mgg/places-store-access-denied",
+    "mgg/pos",
     "mgg/property-owner",
+    "mgg/registro-imprese",
     "mgg/relevance",
     "mgg/reporting-abuse",
     "mgg/residency-permit",

package/src/type/tree.ts

@@ -0,0 +1,12 @@
+export type TreeAppearance =
+  | 'none'
+  | 'depth'
+
+export type TreeIcon =
+  | 'folder'
+  | 'chevron'
+
+
+export type TreeActions =
+  | 'auto'
+  | 'visible'

package/www/build/mds-modal.esm.js

@@ -1 +1 @@
-import{p as e,b as o}from"./p-0ed6e0c8.js";export{s as setNonce}from"./p-0ed6e0c8.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-08a99956",[[1,"mds-modal",{opened:[1540],position:[1537],animating:[1537]},[[4,"mdsModalClose","onModalCloseListener"],[4,"mdsBannerClose","onBannerCloseListener"]],{opened:["handleOpenProp"]}]]]],e))));
+import{p as e,b as o}from"./p-ee90f86a.js";export{s as setNonce}from"./p-ee90f86a.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-413a00c5",[[1,"mds-modal",{opened:[1540],position:[1537],animating:[1537]},[[4,"mdsModalClose","onModalCloseListener"],[4,"mdsBannerClose","onBannerCloseListener"]],{opened:["handleOpenProp"]}]]]],e))));

package/www/build/mds-modal.js

@@ -115,7 +115,7 @@ DOMTokenList
     var resourcesUrl = scriptElm ? scriptElm.getAttribute('data-resources-url') || scriptElm.src : '';
     var start = function() {
       // if src is not present then origin is "null", and new URL() throws TypeError: Failed to construct 'URL': Invalid base URL
-      var url = new URL('./p-67c6f337.system.js', new URL(resourcesUrl, window.location.origin !== 'null' ? window.location.origin : undefined));
+      var url = new URL('./p-c6899cb0.system.js', new URL(resourcesUrl, window.location.origin !== 'null' ? window.location.origin : undefined));
       System.import(url.href);
     };
 

package/{dist/mds-modal/p-08a99956.entry.js → www/build/p-413a00c5.entry.js}

@@ -1 +1 @@
-import{r as n,c as t,h as o,H as e,g as i}from"./p-0ed6e0c8.js";function s(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=s(n[t]))&&(e&&(e+=" "),e+=o)}else for(o in n)n[o]&&(e&&(e+=" "),e+=o);return e}function a(){for(var n,t,o=0,e="",i=arguments.length;o<i;o++)(n=arguments[o])&&(t=s(n))&&(e&&(e+=" "),e+=t);return e}const r=(n,t=1e3)=>n.includes("ms")?Number(n.replace("ms","")):n.includes("s")?1e3*Number(n.replace("s","")):t,d=class{constructor(o){n(this,o),this.closeEvent=t(this,"mdsModalClose",7),this.hideEvent=t(this,"mdsModalHide",7),this.window=!1,this.top=!1,this.bottom=!1,this.updateCSSCustomProps=()=>{var n;if("undefined"==typeof window)return;const t=window.getComputedStyle(this.host);this.cssTransitionDuration=null!==(n=t.getPropertyValue("--mds-modal-transition-duration"))&&void 0!==n?n:"500"},this.stopIntroAnimationWindow=()=>{this.animating="none",this.host.setAttribute("animating","none"),clearTimeout(this.animationDelayTimeout)},this.stopOutroAnimationWindow=()=>{this.animating="none",this.host.setAttribute("animating","none"),this.hideEvent.emit(),clearTimeout(this.animationDelayTimeout)},this.animateOpenWindow=()=>{this.animating="intro",clearTimeout(this.animationDelayTimeout),this.animationDelayTimeout=setTimeout(this.stopIntroAnimationWindow.bind(this),r(this.cssTransitionDuration))},this.animateCloseWindow=()=>{this.animating="outro",clearTimeout(this.animationDelayTimeout),this.animationDelayTimeout=setTimeout(this.stopOutroAnimationWindow.bind(this),r(this.cssTransitionDuration))},this.closeModal=n=>{var t;"mds-modal"===(null===(t=n.target)||void 0===t?void 0:t.localName)&&(this.opened=n.target!==n.currentTarget,this.opened||this.closeEvent.emit())},this.opened=!1,this.position="center",this.animating="none"}componentWillLoad(){var n;this.bottom=null!==this.host.querySelector('[slot="bottom"]'),this.top=null!==this.host.querySelector('[slot="top"]'),this.window=null!==this.host.querySelector('[slot="window"]'),this.window&&(null===(n=this.host.querySelector('[slot="window"]'))||void 0===n||n.setAttribute("role","dialog"))}componentWillRender(){this.animating=this.opened?"intro":"outro"}componentDidLoad(){this.updateCSSCustomProps()}handleOpenProp(n){n?this.animateOpenWindow():this.animateCloseWindow()}onModalCloseListener(){this.opened=!1}onBannerCloseListener(){this.opened=!1}render(){return o(e,{key:"1d00f0a817af0b0a82eae1c790cc7e312165a46e","aria-modal":a(this.opened?"true":"false"),onClick:n=>{this.closeModal(n)}},this.window?o("slot",{name:"window"}):o("div",{class:a("window",(this.top||this.bottom)&&`window-${this.top?"-top":""}${this.bottom?"-bottom":""}`),part:"window"},this.top&&o("slot",{name:"top"}),o("slot",null),this.bottom&&o("slot",{name:"bottom"})),!this.window&&o("mds-button",{key:"1f62de32ab98e24733a13fe9553ba9a12d9fcf31",class:"action-close",icon:"mi/baseline/close",variant:"light",tone:"quiet",size:"xl",onClick:n=>{this.closeModal(n)}}))}get host(){return i(this)}static get watchers(){return{opened:["handleOpenProp"]}}};d.style='@-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/**\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-radius: Set the border radius of the window\n * @prop --mds-modal-window-distance: Set the distance between the modal window and the screen bounds\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-overlay-color: var(--magma-overlay-color, 0 0 0);\n  --mds-modal-overlay-opacity: var(--magma-overlay-opacity, 0.5);\n  --mds-modal-transition-duration: 500ms;\n  --mds-modal-transition-intro-ease: cubic-bezier(0.19, 1, 0.22, 1);\n  --mds-modal-transition-outro-ease: cubic-bezier(0.86, 0, 0.07, 1);\n  --mds-modal-window-background: rgb(var(--tone-neutral));\n  --mds-modal-window-overflow: auto;\n  --mds-modal-window-radius: 0;\n  --mds-modal-window-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);\n  --mds-modal-window-distance: 0;\n  --mds-modal-z-index: var(--magma-modal-z-index);\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  -webkit-transition-duration: var(--mds-modal-transition-duration);\n  transition-duration: var(--mds-modal-transition-duration);\n  -webkit-transition-property: background-color;\n  transition-property: background-color;\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.action-close {\n  border-radius: 100px;\n  opacity: 0;\n  pointer-events: none;\n  position: absolute;\n  -webkit-transition-duration: var(--mds-modal-transition-duration);\n  transition-duration: var(--mds-modal-transition-duration);\n  -webkit-transition-property: bottom, opacity, top, -webkit-transform;\n  transition-property: bottom, opacity, top, -webkit-transform;\n  transition-property: bottom, opacity, top, transform;\n  transition-property: bottom, opacity, top, transform, -webkit-transform;\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([opened]:not([opened="false"])) .action-close {\n  opacity: 1;\n  pointer-events: auto;\n}\n\n.action-close::part(icon) {\n  height: 2.25rem;\n  width: 2.25rem;\n}\n\n.window {\n  gap: 0rem;\n\n  background-color: var(--mds-modal-window-background);\n  border-radius: var(--mds-modal-window-radius);\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  margin: var(--mds-modal-window-distance);\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:host .window {\n  -webkit-transition-delay: 0s, calc(var(--mds-modal-transition-duration) / 2);\n  transition-delay: 0s, calc(var(--mds-modal-transition-duration) / 2);\n}\n\n\n:host([opened]:not([opened="false"]) ) {\n  background-color: rgba(var(--mds-modal-overlay-color) / var(--mds-modal-overlay-opacity));\n  pointer-events: auto;\n}\n\n:host .window,\n:host > ::slotted( [slot="window"] ) {\n  opacity: 0;\n  -webkit-transition-duration: var(--mds-modal-transition-duration);\n  transition-duration: var(--mds-modal-transition-duration);\n  -webkit-transition-property: opacity, -webkit-transform;\n  transition-property: opacity, -webkit-transform;\n  transition-property: transform, opacity;\n  transition-property: transform, opacity, -webkit-transform;\n  -webkit-transition-timing-function: var(--mds-modal-transition-outro-ease);\n  transition-timing-function: var(--mds-modal-transition-outro-ease);\n}\n\n:host([opened]:not([opened="false"]) ) .window,\n:host([opened]:not([opened="false"]) ) > ::slotted( [slot="window"] ) {\n  opacity: 1;\n  -webkit-transform: rotate(0) scale(1) translateY(0);\n  transform: rotate(0) scale(1) translateY(0);\n  -webkit-transition-delay: 0s;\n  transition-delay: 0s;\n  -webkit-transition-timing-function: var(--mds-modal-transition-intro-ease);\n  transition-timing-function: var(--mds-modal-transition-intro-ease);\n}\n\n:host([position="bottom-left"]) {\n  -ms-flex-align: end;\n  align-items: flex-end;\n  -ms-flex-pack: start;\n  justify-content: flex-start;\n}\n\n:host([position="bottom"]) .window {\n  height: auto;\n  width: 100vw;\n}\n\n:host([position="bottom-left"][opened="false"]) > ::slotted( [slot="window"] ),\n:host([position="bottom-left"]:not([opened])) > ::slotted( [slot="window"] ) {\n  -webkit-transform: rotateX(22deg) rotateY(22deg) scale(0.5) translate(-80%, 80%);\n  transform: rotateX(22deg) rotateY(22deg) scale(0.5) translate(-80%, 80%);\n}\n\n:host([position="bottom-left"][opened="false"]) .window,\n:host([position="bottom-left"]:not([opened])) .window {\n  -webkit-transform: translate(0, 100%);\n  transform: translate(0, 100%);\n}\n\n:host([position="bottom-right"]) {\n  -ms-flex-align: end;\n  align-items: flex-end;\n  -ms-flex-pack: end;\n  justify-content: flex-end;\n}\n\n:host([position="bottom"]) .window {\n  height: auto;\n  width: 100vw;\n}\n\n:host([position="bottom-right"][opened="false"]) > ::slotted( [slot="window"] ),\n:host([position="bottom-right"]:not([opened])) > ::slotted( [slot="window"] ) {\n  -webkit-transform: rotateX(-22deg) rotateY(-22deg) scale(0.5) translate(80%, 80%);\n  transform: rotateX(-22deg) rotateY(-22deg) scale(0.5) translate(80%, 80%);\n}\n\n:host([position="bottom-right"][opened="false"]) .window,\n:host([position="bottom-right"]:not([opened])) .window {\n  -webkit-transform: translate(0, 100%);\n  transform: translate(0, 100%);\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([position="bottom"]) .window {\n  height: auto;\n  width: 100vw;\n}\n\n:host([position="bottom"][opened="false"]) > ::slotted( [slot="window"] ),\n:host([position="bottom"]:not([opened])) > ::slotted( [slot="window"] ) {\n  -webkit-transform: rotateX(22deg) rotateY(0) scale(0.5) translate(0, 80%);\n  transform: rotateX(22deg) rotateY(0) scale(0.5) translate(0, 80%);\n}\n\n:host([position="bottom"][opened="false"]) .window,\n:host([position="bottom"]:not([opened])) .window {\n  -webkit-transform: translate(0, 100%);\n  transform: translate(0, 100%);\n}\n\n:host([position="center"]) {\n  -ms-flex-align: center;\n  align-items: center;\n  -ms-flex-pack: center;\n  justify-content: center;\n}\n\n:host([position="center"]) .window {\n  -webkit-transition-delay: 0s;\n  transition-delay: 0s;\n}\n\n:host([position="center"][opened="false"]) > ::slotted( [slot="window"] ),\n:host([position="center"]:not([opened])) > ::slotted( [slot="window"] ) {\n  -webkit-transform: rotateX(0) rotateY(22deg) scale(0.5) translate(0, 40%);\n  transform: rotateX(0) rotateY(22deg) scale(0.5) translate(0, 40%);\n}\n\n:host([position="center"][opened="false"]) .window,\n:host([position="center"]:not([opened])) .window {\n  -webkit-transform: rotateX(0) rotateY(0) scale(0.5) translate(0, 0);\n  transform: rotateX(0) rotateY(0) scale(0.5) translate(0, 0);\n}\n\n:host([position="left"]) {\n  -ms-flex-align: center;\n  align-items: center;\n  -ms-flex-pack: start;\n  justify-content: flex-start;\n}\n\n:host([position="left"]) .window {\n  height: 100%;\n  max-height: calc(100dvh - calc(var(--mds-modal-window-distance) * 2));\n  max-width: calc(100vw - 80px);\n}\n\n:host([position="left"][opened="false"]) > ::slotted( [slot="window"] ),\n:host([position="left"]:not([opened])) > ::slotted( [slot="window"] ) {\n  -webkit-transform: rotateX(0) rotateY(22deg) rotateZ(0) scale(0.5) translate(-100%, 0%);\n  transform: rotateX(0) rotateY(22deg) rotateZ(0) scale(0.5) translate(-100%, 0%);\n}\n\n:host([position="left"][opened="false"]) .window,\n:host([position="left"]:not([opened])) .window {\n  -webkit-transform: translate(-100%, 0%);\n  transform: translate(-100%, 0%);\n}\n\n:host([position="left"]) .action-close {\n  right: 0.75rem;\n  top: 0.75rem;\n  -webkit-transform: translateX(-120%) rotate(-45deg);\n  transform: translateX(-120%) rotate(-45deg);\n}\n\n:host([position="left"][opened]:not([opened="false"])) .action-close {\n  -webkit-transform: translateX(0);\n  transform: translateX(0);\n}\n\n:host([position="right"]) {\n  -ms-flex-align: center;\n  align-items: center;\n  -ms-flex-pack: end;\n  justify-content: flex-end;\n}\n\n:host([position="right"]) .window {\n  height: 100%;\n  max-height: calc(100dvh - calc(var(--mds-modal-window-distance) * 2));\n  max-width: calc(100vw - 80px);\n}\n\n:host([position="right"][opened="false"]) > ::slotted( [slot="window"] ),\n:host([position="right"]:not([opened])) > ::slotted( [slot="window"] ) {\n  -webkit-transform: rotateX(0) rotateY(-22deg) rotateZ(0) scale(0.5) translate(100%, 0%);\n  transform: rotateX(0) rotateY(-22deg) rotateZ(0) scale(0.5) translate(100%, 0%);\n}\n\n:host([position="right"][opened="false"]) .window,\n:host([position="right"]:not([opened])) .window {\n  -webkit-transform: translate(100%, 0%);\n  transform: translate(100%, 0%);\n}\n\n:host([position="right"]) .action-close {\n  left: 0.75rem;\n  top: 0.75rem;\n  -webkit-transform: translateX(120%) rotate(45deg);\n  transform: translateX(120%) rotate(45deg);\n}\n\n:host([position="right"][opened]:not([opened="false"])) .action-close {\n  -webkit-transform: translateX(0);\n  transform: translateX(0);\n}\n\n:host([position="top-left"]) {\n  -ms-flex-align: start;\n  align-items: flex-start;\n  -ms-flex-pack: start;\n  justify-content: flex-start;\n}\n\n:host([position="bottom"]) .window {\n  height: auto;\n  width: 100vw;\n}\n\n:host([position="top-left"][opened="false"]) > ::slotted( [slot="window"] ),\n:host([position="top-left"]:not([opened])) > ::slotted( [slot="window"] ) {\n  -webkit-transform: rotateX(22deg) rotateY(22deg) scale(0.5) translate(-80%, 80%);\n  transform: rotateX(22deg) rotateY(22deg) scale(0.5) translate(-80%, 80%);\n}\n\n:host([position="top-left"][opened="false"]) .window,\n:host([position="top-left"]:not([opened])) .window {\n  -webkit-transform: translate(0, -100%);\n  transform: translate(0, -100%);\n}\n\n:host([position="top-right"]) {\n  -ms-flex-align: start;\n  align-items: flex-start;\n  -ms-flex-pack: end;\n  justify-content: flex-end;\n}\n\n:host([position="bottom"]) .window {\n  height: auto;\n  width: 100vw;\n}\n\n:host([position="top-right"][opened="false"]) > ::slotted( [slot="window"] ),\n:host([position="top-right"]:not([opened])) > ::slotted( [slot="window"] ) {\n  -webkit-transform: rotateX(-22deg) rotateY(-22deg) scale(0.5) translate(80%, 80%);\n  transform: rotateX(-22deg) rotateY(-22deg) scale(0.5) translate(80%, 80%);\n}\n\n:host([position="top-right"][opened="false"]) .window,\n:host([position="top-right"]:not([opened])) .window {\n  -webkit-transform: translate(0, 100%);\n  transform: translate(0, 100%);\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"]) .window {\n  height: auto;\n  width: 100vw;\n}\n\n:host([position="top"][opened="false"]) > ::slotted( [slot="window"] ),\n:host([position="top"]:not([opened])) > ::slotted( [slot="window"] ) {\n  -webkit-transform: rotateX(-22deg) rotateY(0) scale(0.5) translate(0, -80%);\n  transform: rotateX(-22deg) rotateY(0) scale(0.5) translate(0, -80%);\n}\n\n:host([position="top"][opened="false"]) .window,\n:host([position="top"]:not([opened])) .window {\n  -webkit-transform: translate(0, -100%);\n  transform: translate(0, -100%);\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n  :host,\n  .action-close,\n  .window {\n    -webkit-transition-duration: 0s !important;\n    transition-duration: 0s !important;\n  }\n\n  :host {\n\n    --mds-modal-transition-duration: 0s;\n  }\n}\n\n@container style(--magma-pref-animation: system) {\n\n  @media (prefers-reduced-motion) {\n    :host,\n    .action-close,\n    .window {\n      -webkit-transition-duration: 0s !important;\n      transition-duration: 0s !important;\n    }\n\n    :host {\n\n      --mds-modal-transition-duration: 0s;\n    }\n  }\n}\n\n@tailwind utilities;\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@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\n';export{d as mds_modal}
+import{r as n,c as t,h as o,H as e,g as i}from"./p-ee90f86a.js";function s(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=s(n[t]))&&(e&&(e+=" "),e+=o)}else for(o in n)n[o]&&(e&&(e+=" "),e+=o);return e}function a(){for(var n,t,o=0,e="",i=arguments.length;o<i;o++)(n=arguments[o])&&(t=s(n))&&(e&&(e+=" "),e+=t);return e}const r=(n,t=1e3)=>n.includes("ms")?Number(n.replace("ms","")):n.includes("s")?1e3*Number(n.replace("s","")):t,d=class{constructor(o){n(this,o),this.closeEvent=t(this,"mdsModalClose",7),this.hideEvent=t(this,"mdsModalHide",7),this.window=!1,this.top=!1,this.bottom=!1,this.opened=!1,this.position="center",this.animating="none",this.updateCSSCustomProps=()=>{var n;if("undefined"==typeof window)return;const t=window.getComputedStyle(this.host);this.cssTransitionDuration=null!==(n=t.getPropertyValue("--mds-modal-transition-duration"))&&void 0!==n?n:"500"},this.stopIntroAnimationWindow=()=>{this.animating="none",this.host.setAttribute("animating","none"),clearTimeout(this.animationDelayTimeout)},this.stopOutroAnimationWindow=()=>{this.animating="none",this.host.setAttribute("animating","none"),this.hideEvent.emit(),clearTimeout(this.animationDelayTimeout)},this.animateOpenWindow=()=>{this.animating="intro",clearTimeout(this.animationDelayTimeout),this.animationDelayTimeout=setTimeout(this.stopIntroAnimationWindow.bind(this),r(this.cssTransitionDuration))},this.animateCloseWindow=()=>{this.animating="outro",clearTimeout(this.animationDelayTimeout),this.animationDelayTimeout=setTimeout(this.stopOutroAnimationWindow.bind(this),r(this.cssTransitionDuration))},this.closeModal=n=>{var t;"mds-modal"===(null===(t=n.target)||void 0===t?void 0:t.localName)&&(this.opened=n.target!==n.currentTarget,this.opened||this.closeEvent.emit())}}componentWillLoad(){var n;this.bottom=null!==this.host.querySelector('[slot="bottom"]'),this.top=null!==this.host.querySelector('[slot="top"]'),this.window=null!==this.host.querySelector('[slot="window"]'),this.window&&(null===(n=this.host.querySelector('[slot="window"]'))||void 0===n||n.setAttribute("role","dialog"))}componentWillRender(){this.animating=this.opened?"intro":"outro"}componentDidLoad(){this.updateCSSCustomProps()}handleOpenProp(n){n?this.animateOpenWindow():this.animateCloseWindow()}onModalCloseListener(){this.opened=!1}onBannerCloseListener(){this.opened=!1}render(){return o(e,{key:"1d00f0a817af0b0a82eae1c790cc7e312165a46e","aria-modal":a(this.opened?"true":"false"),onClick:n=>{this.closeModal(n)}},this.window?o("slot",{name:"window"}):o("div",{class:a("window",(this.top||this.bottom)&&`window-${this.top?"-top":""}${this.bottom?"-bottom":""}`),part:"window"},this.top&&o("slot",{name:"top"}),o("slot",null),this.bottom&&o("slot",{name:"bottom"})),!this.window&&o("mds-button",{key:"1f62de32ab98e24733a13fe9553ba9a12d9fcf31",class:"action-close",icon:"mi/baseline/close",variant:"light",tone:"quiet",size:"xl",onClick:n=>{this.closeModal(n)}}))}get host(){return i(this)}static get watchers(){return{opened:["handleOpenProp"]}}};d.style='@-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/**\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-radius: Set the border radius of the window\n * @prop --mds-modal-window-distance: Set the distance between the modal window and the screen bounds\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-overlay-color: var(--magma-overlay-color, 0 0 0);\n  --mds-modal-overlay-opacity: var(--magma-overlay-opacity, 0.5);\n  --mds-modal-transition-duration: 500ms;\n  --mds-modal-transition-intro-ease: cubic-bezier(0.19, 1, 0.22, 1);\n  --mds-modal-transition-outro-ease: cubic-bezier(0.86, 0, 0.07, 1);\n  --mds-modal-window-background: rgb(var(--tone-neutral));\n  --mds-modal-window-overflow: auto;\n  --mds-modal-window-radius: 0;\n  --mds-modal-window-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);\n  --mds-modal-window-distance: 0;\n  --mds-modal-z-index: var(--magma-modal-z-index);\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  -webkit-transition-duration: var(--mds-modal-transition-duration);\n  transition-duration: var(--mds-modal-transition-duration);\n  -webkit-transition-property: background-color;\n  transition-property: background-color;\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.action-close {\n  border-radius: 100px;\n  opacity: 0;\n  pointer-events: none;\n  position: absolute;\n  -webkit-transition-duration: var(--mds-modal-transition-duration);\n  transition-duration: var(--mds-modal-transition-duration);\n  -webkit-transition-property: bottom, opacity, top, -webkit-transform;\n  transition-property: bottom, opacity, top, -webkit-transform;\n  transition-property: bottom, opacity, top, transform;\n  transition-property: bottom, opacity, top, transform, -webkit-transform;\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([opened]:not([opened="false"])) .action-close {\n  opacity: 1;\n  pointer-events: auto;\n}\n\n.action-close::part(icon) {\n  height: 2.25rem;\n  width: 2.25rem;\n}\n\n.window {\n  gap: 0rem;\n\n  background-color: var(--mds-modal-window-background);\n  border-radius: var(--mds-modal-window-radius);\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  margin: var(--mds-modal-window-distance);\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:host .window {\n  -webkit-transition-delay: 0s, calc(var(--mds-modal-transition-duration) / 2);\n  transition-delay: 0s, calc(var(--mds-modal-transition-duration) / 2);\n}\n\n\n:host([opened]:not([opened="false"]) ) {\n  background-color: rgba(var(--mds-modal-overlay-color) / var(--mds-modal-overlay-opacity));\n  pointer-events: auto;\n}\n\n:host .window,\n:host > ::slotted( [slot="window"] ) {\n  opacity: 0;\n  -webkit-transition-duration: var(--mds-modal-transition-duration);\n  transition-duration: var(--mds-modal-transition-duration);\n  -webkit-transition-property: opacity, -webkit-transform;\n  transition-property: opacity, -webkit-transform;\n  transition-property: transform, opacity;\n  transition-property: transform, opacity, -webkit-transform;\n  -webkit-transition-timing-function: var(--mds-modal-transition-outro-ease);\n  transition-timing-function: var(--mds-modal-transition-outro-ease);\n}\n\n:host([opened]:not([opened="false"]) ) .window,\n:host([opened]:not([opened="false"]) ) > ::slotted( [slot="window"] ) {\n  opacity: 1;\n  -webkit-transform: rotate(0) scale(1) translateY(0);\n  transform: rotate(0) scale(1) translateY(0);\n  -webkit-transition-delay: 0s;\n  transition-delay: 0s;\n  -webkit-transition-timing-function: var(--mds-modal-transition-intro-ease);\n  transition-timing-function: var(--mds-modal-transition-intro-ease);\n}\n\n:host([position="bottom-left"]) {\n  -ms-flex-align: end;\n  align-items: flex-end;\n  -ms-flex-pack: start;\n  justify-content: flex-start;\n}\n\n:host([position="bottom"]) .window {\n  height: auto;\n  width: 100vw;\n}\n\n:host([position="bottom-left"][opened="false"]) > ::slotted( [slot="window"] ),\n:host([position="bottom-left"]:not([opened])) > ::slotted( [slot="window"] ) {\n  -webkit-transform: rotateX(22deg) rotateY(22deg) scale(0.5) translate(-80%, 80%);\n  transform: rotateX(22deg) rotateY(22deg) scale(0.5) translate(-80%, 80%);\n}\n\n:host([position="bottom-left"][opened="false"]) .window,\n:host([position="bottom-left"]:not([opened])) .window {\n  -webkit-transform: translate(0, 100%);\n  transform: translate(0, 100%);\n}\n\n:host([position="bottom-right"]) {\n  -ms-flex-align: end;\n  align-items: flex-end;\n  -ms-flex-pack: end;\n  justify-content: flex-end;\n}\n\n:host([position="bottom"]) .window {\n  height: auto;\n  width: 100vw;\n}\n\n:host([position="bottom-right"][opened="false"]) > ::slotted( [slot="window"] ),\n:host([position="bottom-right"]:not([opened])) > ::slotted( [slot="window"] ) {\n  -webkit-transform: rotateX(-22deg) rotateY(-22deg) scale(0.5) translate(80%, 80%);\n  transform: rotateX(-22deg) rotateY(-22deg) scale(0.5) translate(80%, 80%);\n}\n\n:host([position="bottom-right"][opened="false"]) .window,\n:host([position="bottom-right"]:not([opened])) .window {\n  -webkit-transform: translate(0, 100%);\n  transform: translate(0, 100%);\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([position="bottom"]) .window {\n  height: auto;\n  width: 100vw;\n}\n\n:host([position="bottom"][opened="false"]) > ::slotted( [slot="window"] ),\n:host([position="bottom"]:not([opened])) > ::slotted( [slot="window"] ) {\n  -webkit-transform: rotateX(22deg) rotateY(0) scale(0.5) translate(0, 80%);\n  transform: rotateX(22deg) rotateY(0) scale(0.5) translate(0, 80%);\n}\n\n:host([position="bottom"][opened="false"]) .window,\n:host([position="bottom"]:not([opened])) .window {\n  -webkit-transform: translate(0, 100%);\n  transform: translate(0, 100%);\n}\n\n:host([position="center"]) {\n  -ms-flex-align: center;\n  align-items: center;\n  -ms-flex-pack: center;\n  justify-content: center;\n}\n\n:host([position="center"]) .window {\n  -webkit-transition-delay: 0s;\n  transition-delay: 0s;\n}\n\n:host([position="center"][opened="false"]) > ::slotted( [slot="window"] ),\n:host([position="center"]:not([opened])) > ::slotted( [slot="window"] ) {\n  -webkit-transform: rotateX(0) rotateY(22deg) scale(0.5) translate(0, 40%);\n  transform: rotateX(0) rotateY(22deg) scale(0.5) translate(0, 40%);\n}\n\n:host([position="center"][opened="false"]) .window,\n:host([position="center"]:not([opened])) .window {\n  -webkit-transform: rotateX(0) rotateY(0) scale(0.5) translate(0, 0);\n  transform: rotateX(0) rotateY(0) scale(0.5) translate(0, 0);\n}\n\n:host([position="left"]) {\n  -ms-flex-align: center;\n  align-items: center;\n  -ms-flex-pack: start;\n  justify-content: flex-start;\n}\n\n:host([position="left"]) .window {\n  height: 100%;\n  max-height: calc(100dvh - calc(var(--mds-modal-window-distance) * 2));\n  max-width: calc(100vw - 80px);\n}\n\n:host([position="left"][opened="false"]) > ::slotted( [slot="window"] ),\n:host([position="left"]:not([opened])) > ::slotted( [slot="window"] ) {\n  -webkit-transform: rotateX(0) rotateY(22deg) rotateZ(0) scale(0.5) translate(-100%, 0%);\n  transform: rotateX(0) rotateY(22deg) rotateZ(0) scale(0.5) translate(-100%, 0%);\n}\n\n:host([position="left"][opened="false"]) .window,\n:host([position="left"]:not([opened])) .window {\n  -webkit-transform: translate(-100%, 0%);\n  transform: translate(-100%, 0%);\n}\n\n:host([position="left"]) .action-close {\n  right: 0.75rem;\n  top: 0.75rem;\n  -webkit-transform: translateX(-120%) rotate(-45deg);\n  transform: translateX(-120%) rotate(-45deg);\n}\n\n:host([position="left"][opened]:not([opened="false"])) .action-close {\n  -webkit-transform: translateX(0);\n  transform: translateX(0);\n}\n\n:host([position="right"]) {\n  -ms-flex-align: center;\n  align-items: center;\n  -ms-flex-pack: end;\n  justify-content: flex-end;\n}\n\n:host([position="right"]) .window {\n  height: 100%;\n  max-height: calc(100dvh - calc(var(--mds-modal-window-distance) * 2));\n  max-width: calc(100vw - 80px);\n}\n\n:host([position="right"][opened="false"]) > ::slotted( [slot="window"] ),\n:host([position="right"]:not([opened])) > ::slotted( [slot="window"] ) {\n  -webkit-transform: rotateX(0) rotateY(-22deg) rotateZ(0) scale(0.5) translate(100%, 0%);\n  transform: rotateX(0) rotateY(-22deg) rotateZ(0) scale(0.5) translate(100%, 0%);\n}\n\n:host([position="right"][opened="false"]) .window,\n:host([position="right"]:not([opened])) .window {\n  -webkit-transform: translate(100%, 0%);\n  transform: translate(100%, 0%);\n}\n\n:host([position="right"]) .action-close {\n  left: 0.75rem;\n  top: 0.75rem;\n  -webkit-transform: translateX(120%) rotate(45deg);\n  transform: translateX(120%) rotate(45deg);\n}\n\n:host([position="right"][opened]:not([opened="false"])) .action-close {\n  -webkit-transform: translateX(0);\n  transform: translateX(0);\n}\n\n:host([position="top-left"]) {\n  -ms-flex-align: start;\n  align-items: flex-start;\n  -ms-flex-pack: start;\n  justify-content: flex-start;\n}\n\n:host([position="bottom"]) .window {\n  height: auto;\n  width: 100vw;\n}\n\n:host([position="top-left"][opened="false"]) > ::slotted( [slot="window"] ),\n:host([position="top-left"]:not([opened])) > ::slotted( [slot="window"] ) {\n  -webkit-transform: rotateX(22deg) rotateY(22deg) scale(0.5) translate(-80%, 80%);\n  transform: rotateX(22deg) rotateY(22deg) scale(0.5) translate(-80%, 80%);\n}\n\n:host([position="top-left"][opened="false"]) .window,\n:host([position="top-left"]:not([opened])) .window {\n  -webkit-transform: translate(0, -100%);\n  transform: translate(0, -100%);\n}\n\n:host([position="top-right"]) {\n  -ms-flex-align: start;\n  align-items: flex-start;\n  -ms-flex-pack: end;\n  justify-content: flex-end;\n}\n\n:host([position="bottom"]) .window {\n  height: auto;\n  width: 100vw;\n}\n\n:host([position="top-right"][opened="false"]) > ::slotted( [slot="window"] ),\n:host([position="top-right"]:not([opened])) > ::slotted( [slot="window"] ) {\n  -webkit-transform: rotateX(-22deg) rotateY(-22deg) scale(0.5) translate(80%, 80%);\n  transform: rotateX(-22deg) rotateY(-22deg) scale(0.5) translate(80%, 80%);\n}\n\n:host([position="top-right"][opened="false"]) .window,\n:host([position="top-right"]:not([opened])) .window {\n  -webkit-transform: translate(0, 100%);\n  transform: translate(0, 100%);\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"]) .window {\n  height: auto;\n  width: 100vw;\n}\n\n:host([position="top"][opened="false"]) > ::slotted( [slot="window"] ),\n:host([position="top"]:not([opened])) > ::slotted( [slot="window"] ) {\n  -webkit-transform: rotateX(-22deg) rotateY(0) scale(0.5) translate(0, -80%);\n  transform: rotateX(-22deg) rotateY(0) scale(0.5) translate(0, -80%);\n}\n\n:host([position="top"][opened="false"]) .window,\n:host([position="top"]:not([opened])) .window {\n  -webkit-transform: translate(0, -100%);\n  transform: translate(0, -100%);\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n  :host,\n  .action-close,\n  .window {\n    -webkit-transition-duration: 0s !important;\n    transition-duration: 0s !important;\n  }\n\n  :host {\n\n    --mds-modal-transition-duration: 0s;\n  }\n}\n\n@container style(--magma-pref-animation: system) {\n\n  @media (prefers-reduced-motion) {\n    :host,\n    .action-close,\n    .window {\n      -webkit-transition-duration: 0s !important;\n      transition-duration: 0s !important;\n    }\n\n    :host {\n\n      --mds-modal-transition-duration: 0s;\n    }\n  }\n}\n\n@tailwind utilities;\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@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\n';export{d as mds_modal}

package/www/build/{p-0d78ea55.system.entry.js → p-96958acc.system.entry.js}

@@ -1 +1 @@
-System.register(["./p-423dac35.system.js"],(function(n){"use strict";var t,o,e,i,a;return{setters:[function(n){t=n.r;o=n.c;e=n.h;i=n.H;a=n.g}],execute:function(){function s(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=s(n[t]))&&(e&&(e+=" "),e+=o)}else for(o in n)n[o]&&(e&&(e+=" "),e+=o);return e}function r(){for(var n,t,o=0,e="",i=arguments.length;o<i;o++)(n=arguments[o])&&(t=s(n))&&(e&&(e+=" "),e+=t);return e}var d=function(n,t){if(t===void 0){t=1e3}if(n.includes("ms")){return Number(n.replace("ms",""))}if(n.includes("s")){return Number(n.replace("s",""))*1e3}return t};var l='@-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/**\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-radius: Set the border radius of the window\n * @prop --mds-modal-window-distance: Set the distance between the modal window and the screen bounds\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-overlay-color: var(--magma-overlay-color, 0 0 0);\n  --mds-modal-overlay-opacity: var(--magma-overlay-opacity, 0.5);\n  --mds-modal-transition-duration: 500ms;\n  --mds-modal-transition-intro-ease: cubic-bezier(0.19, 1, 0.22, 1);\n  --mds-modal-transition-outro-ease: cubic-bezier(0.86, 0, 0.07, 1);\n  --mds-modal-window-background: rgb(var(--tone-neutral));\n  --mds-modal-window-overflow: auto;\n  --mds-modal-window-radius: 0;\n  --mds-modal-window-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);\n  --mds-modal-window-distance: 0;\n  --mds-modal-z-index: var(--magma-modal-z-index);\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  -webkit-transition-duration: var(--mds-modal-transition-duration);\n  transition-duration: var(--mds-modal-transition-duration);\n  -webkit-transition-property: background-color;\n  transition-property: background-color;\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.action-close {\n  border-radius: 100px;\n  opacity: 0;\n  pointer-events: none;\n  position: absolute;\n  -webkit-transition-duration: var(--mds-modal-transition-duration);\n  transition-duration: var(--mds-modal-transition-duration);\n  -webkit-transition-property: bottom, opacity, top, -webkit-transform;\n  transition-property: bottom, opacity, top, -webkit-transform;\n  transition-property: bottom, opacity, top, transform;\n  transition-property: bottom, opacity, top, transform, -webkit-transform;\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([opened]:not([opened="false"])) .action-close {\n  opacity: 1;\n  pointer-events: auto;\n}\n\n.action-close::part(icon) {\n  height: 2.25rem;\n  width: 2.25rem;\n}\n\n.window {\n  gap: 0rem;\n\n  background-color: var(--mds-modal-window-background);\n  border-radius: var(--mds-modal-window-radius);\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  margin: var(--mds-modal-window-distance);\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:host .window {\n  -webkit-transition-delay: 0s, calc(var(--mds-modal-transition-duration) / 2);\n  transition-delay: 0s, calc(var(--mds-modal-transition-duration) / 2);\n}\n\n\n:host([opened]:not([opened="false"]) ) {\n  background-color: rgba(var(--mds-modal-overlay-color) / var(--mds-modal-overlay-opacity));\n  pointer-events: auto;\n}\n\n:host .window,\n:host > ::slotted( [slot="window"] ) {\n  opacity: 0;\n  -webkit-transition-duration: var(--mds-modal-transition-duration);\n  transition-duration: var(--mds-modal-transition-duration);\n  -webkit-transition-property: opacity, -webkit-transform;\n  transition-property: opacity, -webkit-transform;\n  transition-property: transform, opacity;\n  transition-property: transform, opacity, -webkit-transform;\n  -webkit-transition-timing-function: var(--mds-modal-transition-outro-ease);\n  transition-timing-function: var(--mds-modal-transition-outro-ease);\n}\n\n:host([opened]:not([opened="false"]) ) .window,\n:host([opened]:not([opened="false"]) ) > ::slotted( [slot="window"] ) {\n  opacity: 1;\n  -webkit-transform: rotate(0) scale(1) translateY(0);\n  transform: rotate(0) scale(1) translateY(0);\n  -webkit-transition-delay: 0s;\n  transition-delay: 0s;\n  -webkit-transition-timing-function: var(--mds-modal-transition-intro-ease);\n  transition-timing-function: var(--mds-modal-transition-intro-ease);\n}\n\n:host([position="bottom-left"]) {\n  -ms-flex-align: end;\n  align-items: flex-end;\n  -ms-flex-pack: start;\n  justify-content: flex-start;\n}\n\n:host([position="bottom"]) .window {\n  height: auto;\n  width: 100vw;\n}\n\n:host([position="bottom-left"][opened="false"]) > ::slotted( [slot="window"] ),\n:host([position="bottom-left"]:not([opened])) > ::slotted( [slot="window"] ) {\n  -webkit-transform: rotateX(22deg) rotateY(22deg) scale(0.5) translate(-80%, 80%);\n  transform: rotateX(22deg) rotateY(22deg) scale(0.5) translate(-80%, 80%);\n}\n\n:host([position="bottom-left"][opened="false"]) .window,\n:host([position="bottom-left"]:not([opened])) .window {\n  -webkit-transform: translate(0, 100%);\n  transform: translate(0, 100%);\n}\n\n:host([position="bottom-right"]) {\n  -ms-flex-align: end;\n  align-items: flex-end;\n  -ms-flex-pack: end;\n  justify-content: flex-end;\n}\n\n:host([position="bottom"]) .window {\n  height: auto;\n  width: 100vw;\n}\n\n:host([position="bottom-right"][opened="false"]) > ::slotted( [slot="window"] ),\n:host([position="bottom-right"]:not([opened])) > ::slotted( [slot="window"] ) {\n  -webkit-transform: rotateX(-22deg) rotateY(-22deg) scale(0.5) translate(80%, 80%);\n  transform: rotateX(-22deg) rotateY(-22deg) scale(0.5) translate(80%, 80%);\n}\n\n:host([position="bottom-right"][opened="false"]) .window,\n:host([position="bottom-right"]:not([opened])) .window {\n  -webkit-transform: translate(0, 100%);\n  transform: translate(0, 100%);\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([position="bottom"]) .window {\n  height: auto;\n  width: 100vw;\n}\n\n:host([position="bottom"][opened="false"]) > ::slotted( [slot="window"] ),\n:host([position="bottom"]:not([opened])) > ::slotted( [slot="window"] ) {\n  -webkit-transform: rotateX(22deg) rotateY(0) scale(0.5) translate(0, 80%);\n  transform: rotateX(22deg) rotateY(0) scale(0.5) translate(0, 80%);\n}\n\n:host([position="bottom"][opened="false"]) .window,\n:host([position="bottom"]:not([opened])) .window {\n  -webkit-transform: translate(0, 100%);\n  transform: translate(0, 100%);\n}\n\n:host([position="center"]) {\n  -ms-flex-align: center;\n  align-items: center;\n  -ms-flex-pack: center;\n  justify-content: center;\n}\n\n:host([position="center"]) .window {\n  -webkit-transition-delay: 0s;\n  transition-delay: 0s;\n}\n\n:host([position="center"][opened="false"]) > ::slotted( [slot="window"] ),\n:host([position="center"]:not([opened])) > ::slotted( [slot="window"] ) {\n  -webkit-transform: rotateX(0) rotateY(22deg) scale(0.5) translate(0, 40%);\n  transform: rotateX(0) rotateY(22deg) scale(0.5) translate(0, 40%);\n}\n\n:host([position="center"][opened="false"]) .window,\n:host([position="center"]:not([opened])) .window {\n  -webkit-transform: rotateX(0) rotateY(0) scale(0.5) translate(0, 0);\n  transform: rotateX(0) rotateY(0) scale(0.5) translate(0, 0);\n}\n\n:host([position="left"]) {\n  -ms-flex-align: center;\n  align-items: center;\n  -ms-flex-pack: start;\n  justify-content: flex-start;\n}\n\n:host([position="left"]) .window {\n  height: 100%;\n  max-height: calc(100dvh - calc(var(--mds-modal-window-distance) * 2));\n  max-width: calc(100vw - 80px);\n}\n\n:host([position="left"][opened="false"]) > ::slotted( [slot="window"] ),\n:host([position="left"]:not([opened])) > ::slotted( [slot="window"] ) {\n  -webkit-transform: rotateX(0) rotateY(22deg) rotateZ(0) scale(0.5) translate(-100%, 0%);\n  transform: rotateX(0) rotateY(22deg) rotateZ(0) scale(0.5) translate(-100%, 0%);\n}\n\n:host([position="left"][opened="false"]) .window,\n:host([position="left"]:not([opened])) .window {\n  -webkit-transform: translate(-100%, 0%);\n  transform: translate(-100%, 0%);\n}\n\n:host([position="left"]) .action-close {\n  right: 0.75rem;\n  top: 0.75rem;\n  -webkit-transform: translateX(-120%) rotate(-45deg);\n  transform: translateX(-120%) rotate(-45deg);\n}\n\n:host([position="left"][opened]:not([opened="false"])) .action-close {\n  -webkit-transform: translateX(0);\n  transform: translateX(0);\n}\n\n:host([position="right"]) {\n  -ms-flex-align: center;\n  align-items: center;\n  -ms-flex-pack: end;\n  justify-content: flex-end;\n}\n\n:host([position="right"]) .window {\n  height: 100%;\n  max-height: calc(100dvh - calc(var(--mds-modal-window-distance) * 2));\n  max-width: calc(100vw - 80px);\n}\n\n:host([position="right"][opened="false"]) > ::slotted( [slot="window"] ),\n:host([position="right"]:not([opened])) > ::slotted( [slot="window"] ) {\n  -webkit-transform: rotateX(0) rotateY(-22deg) rotateZ(0) scale(0.5) translate(100%, 0%);\n  transform: rotateX(0) rotateY(-22deg) rotateZ(0) scale(0.5) translate(100%, 0%);\n}\n\n:host([position="right"][opened="false"]) .window,\n:host([position="right"]:not([opened])) .window {\n  -webkit-transform: translate(100%, 0%);\n  transform: translate(100%, 0%);\n}\n\n:host([position="right"]) .action-close {\n  left: 0.75rem;\n  top: 0.75rem;\n  -webkit-transform: translateX(120%) rotate(45deg);\n  transform: translateX(120%) rotate(45deg);\n}\n\n:host([position="right"][opened]:not([opened="false"])) .action-close {\n  -webkit-transform: translateX(0);\n  transform: translateX(0);\n}\n\n:host([position="top-left"]) {\n  -ms-flex-align: start;\n  align-items: flex-start;\n  -ms-flex-pack: start;\n  justify-content: flex-start;\n}\n\n:host([position="bottom"]) .window {\n  height: auto;\n  width: 100vw;\n}\n\n:host([position="top-left"][opened="false"]) > ::slotted( [slot="window"] ),\n:host([position="top-left"]:not([opened])) > ::slotted( [slot="window"] ) {\n  -webkit-transform: rotateX(22deg) rotateY(22deg) scale(0.5) translate(-80%, 80%);\n  transform: rotateX(22deg) rotateY(22deg) scale(0.5) translate(-80%, 80%);\n}\n\n:host([position="top-left"][opened="false"]) .window,\n:host([position="top-left"]:not([opened])) .window {\n  -webkit-transform: translate(0, -100%);\n  transform: translate(0, -100%);\n}\n\n:host([position="top-right"]) {\n  -ms-flex-align: start;\n  align-items: flex-start;\n  -ms-flex-pack: end;\n  justify-content: flex-end;\n}\n\n:host([position="bottom"]) .window {\n  height: auto;\n  width: 100vw;\n}\n\n:host([position="top-right"][opened="false"]) > ::slotted( [slot="window"] ),\n:host([position="top-right"]:not([opened])) > ::slotted( [slot="window"] ) {\n  -webkit-transform: rotateX(-22deg) rotateY(-22deg) scale(0.5) translate(80%, 80%);\n  transform: rotateX(-22deg) rotateY(-22deg) scale(0.5) translate(80%, 80%);\n}\n\n:host([position="top-right"][opened="false"]) .window,\n:host([position="top-right"]:not([opened])) .window {\n  -webkit-transform: translate(0, 100%);\n  transform: translate(0, 100%);\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"]) .window {\n  height: auto;\n  width: 100vw;\n}\n\n:host([position="top"][opened="false"]) > ::slotted( [slot="window"] ),\n:host([position="top"]:not([opened])) > ::slotted( [slot="window"] ) {\n  -webkit-transform: rotateX(-22deg) rotateY(0) scale(0.5) translate(0, -80%);\n  transform: rotateX(-22deg) rotateY(0) scale(0.5) translate(0, -80%);\n}\n\n:host([position="top"][opened="false"]) .window,\n:host([position="top"]:not([opened])) .window {\n  -webkit-transform: translate(0, -100%);\n  transform: translate(0, -100%);\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n  :host,\n  .action-close,\n  .window {\n    -webkit-transition-duration: 0s !important;\n    transition-duration: 0s !important;\n  }\n\n  :host {\n\n    --mds-modal-transition-duration: 0s;\n  }\n}\n\n@container style(--magma-pref-animation: system) {\n\n  @media (prefers-reduced-motion) {\n    :host,\n    .action-close,\n    .window {\n      -webkit-transition-duration: 0s !important;\n      transition-duration: 0s !important;\n    }\n\n    :host {\n\n      --mds-modal-transition-duration: 0s;\n    }\n  }\n}\n\n@tailwind utilities;\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@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\n';var m=l;var p=n("mds_modal",function(){function n(n){var e=this;t(this,n);this.closeEvent=o(this,"mdsModalClose",7);this.hideEvent=o(this,"mdsModalHide",7);this.window=false;this.top=false;this.bottom=false;this.updateCSSCustomProps=function(){var n;if(typeof window==="undefined")return;var t=window.getComputedStyle(e.host);e.cssTransitionDuration=(n=t.getPropertyValue("--mds-modal-transition-duration"))!==null&&n!==void 0?n:"500"};this.stopIntroAnimationWindow=function(){e.animating="none";e.host.setAttribute("animating","none");clearTimeout(e.animationDelayTimeout)};this.stopOutroAnimationWindow=function(){e.animating="none";e.host.setAttribute("animating","none");e.hideEvent.emit();clearTimeout(e.animationDelayTimeout)};this.animateOpenWindow=function(){e.animating="intro";clearTimeout(e.animationDelayTimeout);e.animationDelayTimeout=setTimeout(e.stopIntroAnimationWindow.bind(e),d(e.cssTransitionDuration))};this.animateCloseWindow=function(){e.animating="outro";clearTimeout(e.animationDelayTimeout);e.animationDelayTimeout=setTimeout(e.stopOutroAnimationWindow.bind(e),d(e.cssTransitionDuration))};this.closeModal=function(n){var t;if(((t=n.target)===null||t===void 0?void 0:t.localName)!=="mds-modal"){return}e.opened=n.target!==n.currentTarget;if(!e.opened){e.closeEvent.emit()}};this.opened=false;this.position="center";this.animating="none"}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;if(this.window){(n=this.host.querySelector('[slot="window"]'))===null||n===void 0?void 0:n.setAttribute("role","dialog")}};n.prototype.componentWillRender=function(){this.animating=this.opened?"intro":"outro"};n.prototype.componentDidLoad=function(){this.updateCSSCustomProps()};n.prototype.handleOpenProp=function(n){if(n){this.animateOpenWindow();return}this.animateCloseWindow()};n.prototype.onModalCloseListener=function(){this.opened=false};n.prototype.onBannerCloseListener=function(){this.opened=false};n.prototype.render=function(){var n=this;return e(i,{key:"1d00f0a817af0b0a82eae1c790cc7e312165a46e","aria-modal":r(this.opened?"true":"false"),onClick:function(t){n.closeModal(t)}},this.window?e("slot",{name:"window"}):e("div",{class:r("window",(this.top||this.bottom)&&"window-".concat(this.top?"-top":"").concat(this.bottom?"-bottom":"")),part:"window"},this.top&&e("slot",{name:"top"}),e("slot",null),this.bottom&&e("slot",{name:"bottom"})),!this.window&&e("mds-button",{key:"1f62de32ab98e24733a13fe9553ba9a12d9fcf31",class:"action-close",icon:"mi/baseline/close",variant:"light",tone:"quiet",size:"xl",onClick:function(t){n.closeModal(t)}}))};Object.defineProperty(n.prototype,"host",{get:function(){return a(this)},enumerable:false,configurable:true});Object.defineProperty(n,"watchers",{get:function(){return{opened:["handleOpenProp"]}},enumerable:false,configurable:true});return n}());p.style=m}}}));
+System.register(["./p-bc1fa4e4.system.js"],(function(n){"use strict";var t,o,e,i,a;return{setters:[function(n){t=n.r;o=n.c;e=n.h;i=n.H;a=n.g}],execute:function(){function s(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=s(n[t]))&&(e&&(e+=" "),e+=o)}else for(o in n)n[o]&&(e&&(e+=" "),e+=o);return e}function r(){for(var n,t,o=0,e="",i=arguments.length;o<i;o++)(n=arguments[o])&&(t=s(n))&&(e&&(e+=" "),e+=t);return e}var d=function(n,t){if(t===void 0){t=1e3}if(n.includes("ms")){return Number(n.replace("ms",""))}if(n.includes("s")){return Number(n.replace("s",""))*1e3}return t};var l='@-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/**\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-radius: Set the border radius of the window\n * @prop --mds-modal-window-distance: Set the distance between the modal window and the screen bounds\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-overlay-color: var(--magma-overlay-color, 0 0 0);\n  --mds-modal-overlay-opacity: var(--magma-overlay-opacity, 0.5);\n  --mds-modal-transition-duration: 500ms;\n  --mds-modal-transition-intro-ease: cubic-bezier(0.19, 1, 0.22, 1);\n  --mds-modal-transition-outro-ease: cubic-bezier(0.86, 0, 0.07, 1);\n  --mds-modal-window-background: rgb(var(--tone-neutral));\n  --mds-modal-window-overflow: auto;\n  --mds-modal-window-radius: 0;\n  --mds-modal-window-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);\n  --mds-modal-window-distance: 0;\n  --mds-modal-z-index: var(--magma-modal-z-index);\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  -webkit-transition-duration: var(--mds-modal-transition-duration);\n  transition-duration: var(--mds-modal-transition-duration);\n  -webkit-transition-property: background-color;\n  transition-property: background-color;\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.action-close {\n  border-radius: 100px;\n  opacity: 0;\n  pointer-events: none;\n  position: absolute;\n  -webkit-transition-duration: var(--mds-modal-transition-duration);\n  transition-duration: var(--mds-modal-transition-duration);\n  -webkit-transition-property: bottom, opacity, top, -webkit-transform;\n  transition-property: bottom, opacity, top, -webkit-transform;\n  transition-property: bottom, opacity, top, transform;\n  transition-property: bottom, opacity, top, transform, -webkit-transform;\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([opened]:not([opened="false"])) .action-close {\n  opacity: 1;\n  pointer-events: auto;\n}\n\n.action-close::part(icon) {\n  height: 2.25rem;\n  width: 2.25rem;\n}\n\n.window {\n  gap: 0rem;\n\n  background-color: var(--mds-modal-window-background);\n  border-radius: var(--mds-modal-window-radius);\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  margin: var(--mds-modal-window-distance);\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:host .window {\n  -webkit-transition-delay: 0s, calc(var(--mds-modal-transition-duration) / 2);\n  transition-delay: 0s, calc(var(--mds-modal-transition-duration) / 2);\n}\n\n\n:host([opened]:not([opened="false"]) ) {\n  background-color: rgba(var(--mds-modal-overlay-color) / var(--mds-modal-overlay-opacity));\n  pointer-events: auto;\n}\n\n:host .window,\n:host > ::slotted( [slot="window"] ) {\n  opacity: 0;\n  -webkit-transition-duration: var(--mds-modal-transition-duration);\n  transition-duration: var(--mds-modal-transition-duration);\n  -webkit-transition-property: opacity, -webkit-transform;\n  transition-property: opacity, -webkit-transform;\n  transition-property: transform, opacity;\n  transition-property: transform, opacity, -webkit-transform;\n  -webkit-transition-timing-function: var(--mds-modal-transition-outro-ease);\n  transition-timing-function: var(--mds-modal-transition-outro-ease);\n}\n\n:host([opened]:not([opened="false"]) ) .window,\n:host([opened]:not([opened="false"]) ) > ::slotted( [slot="window"] ) {\n  opacity: 1;\n  -webkit-transform: rotate(0) scale(1) translateY(0);\n  transform: rotate(0) scale(1) translateY(0);\n  -webkit-transition-delay: 0s;\n  transition-delay: 0s;\n  -webkit-transition-timing-function: var(--mds-modal-transition-intro-ease);\n  transition-timing-function: var(--mds-modal-transition-intro-ease);\n}\n\n:host([position="bottom-left"]) {\n  -ms-flex-align: end;\n  align-items: flex-end;\n  -ms-flex-pack: start;\n  justify-content: flex-start;\n}\n\n:host([position="bottom"]) .window {\n  height: auto;\n  width: 100vw;\n}\n\n:host([position="bottom-left"][opened="false"]) > ::slotted( [slot="window"] ),\n:host([position="bottom-left"]:not([opened])) > ::slotted( [slot="window"] ) {\n  -webkit-transform: rotateX(22deg) rotateY(22deg) scale(0.5) translate(-80%, 80%);\n  transform: rotateX(22deg) rotateY(22deg) scale(0.5) translate(-80%, 80%);\n}\n\n:host([position="bottom-left"][opened="false"]) .window,\n:host([position="bottom-left"]:not([opened])) .window {\n  -webkit-transform: translate(0, 100%);\n  transform: translate(0, 100%);\n}\n\n:host([position="bottom-right"]) {\n  -ms-flex-align: end;\n  align-items: flex-end;\n  -ms-flex-pack: end;\n  justify-content: flex-end;\n}\n\n:host([position="bottom"]) .window {\n  height: auto;\n  width: 100vw;\n}\n\n:host([position="bottom-right"][opened="false"]) > ::slotted( [slot="window"] ),\n:host([position="bottom-right"]:not([opened])) > ::slotted( [slot="window"] ) {\n  -webkit-transform: rotateX(-22deg) rotateY(-22deg) scale(0.5) translate(80%, 80%);\n  transform: rotateX(-22deg) rotateY(-22deg) scale(0.5) translate(80%, 80%);\n}\n\n:host([position="bottom-right"][opened="false"]) .window,\n:host([position="bottom-right"]:not([opened])) .window {\n  -webkit-transform: translate(0, 100%);\n  transform: translate(0, 100%);\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([position="bottom"]) .window {\n  height: auto;\n  width: 100vw;\n}\n\n:host([position="bottom"][opened="false"]) > ::slotted( [slot="window"] ),\n:host([position="bottom"]:not([opened])) > ::slotted( [slot="window"] ) {\n  -webkit-transform: rotateX(22deg) rotateY(0) scale(0.5) translate(0, 80%);\n  transform: rotateX(22deg) rotateY(0) scale(0.5) translate(0, 80%);\n}\n\n:host([position="bottom"][opened="false"]) .window,\n:host([position="bottom"]:not([opened])) .window {\n  -webkit-transform: translate(0, 100%);\n  transform: translate(0, 100%);\n}\n\n:host([position="center"]) {\n  -ms-flex-align: center;\n  align-items: center;\n  -ms-flex-pack: center;\n  justify-content: center;\n}\n\n:host([position="center"]) .window {\n  -webkit-transition-delay: 0s;\n  transition-delay: 0s;\n}\n\n:host([position="center"][opened="false"]) > ::slotted( [slot="window"] ),\n:host([position="center"]:not([opened])) > ::slotted( [slot="window"] ) {\n  -webkit-transform: rotateX(0) rotateY(22deg) scale(0.5) translate(0, 40%);\n  transform: rotateX(0) rotateY(22deg) scale(0.5) translate(0, 40%);\n}\n\n:host([position="center"][opened="false"]) .window,\n:host([position="center"]:not([opened])) .window {\n  -webkit-transform: rotateX(0) rotateY(0) scale(0.5) translate(0, 0);\n  transform: rotateX(0) rotateY(0) scale(0.5) translate(0, 0);\n}\n\n:host([position="left"]) {\n  -ms-flex-align: center;\n  align-items: center;\n  -ms-flex-pack: start;\n  justify-content: flex-start;\n}\n\n:host([position="left"]) .window {\n  height: 100%;\n  max-height: calc(100dvh - calc(var(--mds-modal-window-distance) * 2));\n  max-width: calc(100vw - 80px);\n}\n\n:host([position="left"][opened="false"]) > ::slotted( [slot="window"] ),\n:host([position="left"]:not([opened])) > ::slotted( [slot="window"] ) {\n  -webkit-transform: rotateX(0) rotateY(22deg) rotateZ(0) scale(0.5) translate(-100%, 0%);\n  transform: rotateX(0) rotateY(22deg) rotateZ(0) scale(0.5) translate(-100%, 0%);\n}\n\n:host([position="left"][opened="false"]) .window,\n:host([position="left"]:not([opened])) .window {\n  -webkit-transform: translate(-100%, 0%);\n  transform: translate(-100%, 0%);\n}\n\n:host([position="left"]) .action-close {\n  right: 0.75rem;\n  top: 0.75rem;\n  -webkit-transform: translateX(-120%) rotate(-45deg);\n  transform: translateX(-120%) rotate(-45deg);\n}\n\n:host([position="left"][opened]:not([opened="false"])) .action-close {\n  -webkit-transform: translateX(0);\n  transform: translateX(0);\n}\n\n:host([position="right"]) {\n  -ms-flex-align: center;\n  align-items: center;\n  -ms-flex-pack: end;\n  justify-content: flex-end;\n}\n\n:host([position="right"]) .window {\n  height: 100%;\n  max-height: calc(100dvh - calc(var(--mds-modal-window-distance) * 2));\n  max-width: calc(100vw - 80px);\n}\n\n:host([position="right"][opened="false"]) > ::slotted( [slot="window"] ),\n:host([position="right"]:not([opened])) > ::slotted( [slot="window"] ) {\n  -webkit-transform: rotateX(0) rotateY(-22deg) rotateZ(0) scale(0.5) translate(100%, 0%);\n  transform: rotateX(0) rotateY(-22deg) rotateZ(0) scale(0.5) translate(100%, 0%);\n}\n\n:host([position="right"][opened="false"]) .window,\n:host([position="right"]:not([opened])) .window {\n  -webkit-transform: translate(100%, 0%);\n  transform: translate(100%, 0%);\n}\n\n:host([position="right"]) .action-close {\n  left: 0.75rem;\n  top: 0.75rem;\n  -webkit-transform: translateX(120%) rotate(45deg);\n  transform: translateX(120%) rotate(45deg);\n}\n\n:host([position="right"][opened]:not([opened="false"])) .action-close {\n  -webkit-transform: translateX(0);\n  transform: translateX(0);\n}\n\n:host([position="top-left"]) {\n  -ms-flex-align: start;\n  align-items: flex-start;\n  -ms-flex-pack: start;\n  justify-content: flex-start;\n}\n\n:host([position="bottom"]) .window {\n  height: auto;\n  width: 100vw;\n}\n\n:host([position="top-left"][opened="false"]) > ::slotted( [slot="window"] ),\n:host([position="top-left"]:not([opened])) > ::slotted( [slot="window"] ) {\n  -webkit-transform: rotateX(22deg) rotateY(22deg) scale(0.5) translate(-80%, 80%);\n  transform: rotateX(22deg) rotateY(22deg) scale(0.5) translate(-80%, 80%);\n}\n\n:host([position="top-left"][opened="false"]) .window,\n:host([position="top-left"]:not([opened])) .window {\n  -webkit-transform: translate(0, -100%);\n  transform: translate(0, -100%);\n}\n\n:host([position="top-right"]) {\n  -ms-flex-align: start;\n  align-items: flex-start;\n  -ms-flex-pack: end;\n  justify-content: flex-end;\n}\n\n:host([position="bottom"]) .window {\n  height: auto;\n  width: 100vw;\n}\n\n:host([position="top-right"][opened="false"]) > ::slotted( [slot="window"] ),\n:host([position="top-right"]:not([opened])) > ::slotted( [slot="window"] ) {\n  -webkit-transform: rotateX(-22deg) rotateY(-22deg) scale(0.5) translate(80%, 80%);\n  transform: rotateX(-22deg) rotateY(-22deg) scale(0.5) translate(80%, 80%);\n}\n\n:host([position="top-right"][opened="false"]) .window,\n:host([position="top-right"]:not([opened])) .window {\n  -webkit-transform: translate(0, 100%);\n  transform: translate(0, 100%);\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"]) .window {\n  height: auto;\n  width: 100vw;\n}\n\n:host([position="top"][opened="false"]) > ::slotted( [slot="window"] ),\n:host([position="top"]:not([opened])) > ::slotted( [slot="window"] ) {\n  -webkit-transform: rotateX(-22deg) rotateY(0) scale(0.5) translate(0, -80%);\n  transform: rotateX(-22deg) rotateY(0) scale(0.5) translate(0, -80%);\n}\n\n:host([position="top"][opened="false"]) .window,\n:host([position="top"]:not([opened])) .window {\n  -webkit-transform: translate(0, -100%);\n  transform: translate(0, -100%);\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n  :host,\n  .action-close,\n  .window {\n    -webkit-transition-duration: 0s !important;\n    transition-duration: 0s !important;\n  }\n\n  :host {\n\n    --mds-modal-transition-duration: 0s;\n  }\n}\n\n@container style(--magma-pref-animation: system) {\n\n  @media (prefers-reduced-motion) {\n    :host,\n    .action-close,\n    .window {\n      -webkit-transition-duration: 0s !important;\n      transition-duration: 0s !important;\n    }\n\n    :host {\n\n      --mds-modal-transition-duration: 0s;\n    }\n  }\n}\n\n@tailwind utilities;\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@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\n';var m=l;var p=n("mds_modal",function(){function n(n){var e=this;t(this,n);this.closeEvent=o(this,"mdsModalClose",7);this.hideEvent=o(this,"mdsModalHide",7);this.window=false;this.top=false;this.bottom=false;this.opened=false;this.position="center";this.animating="none";this.updateCSSCustomProps=function(){var n;if(typeof window==="undefined")return;var t=window.getComputedStyle(e.host);e.cssTransitionDuration=(n=t.getPropertyValue("--mds-modal-transition-duration"))!==null&&n!==void 0?n:"500"};this.stopIntroAnimationWindow=function(){e.animating="none";e.host.setAttribute("animating","none");clearTimeout(e.animationDelayTimeout)};this.stopOutroAnimationWindow=function(){e.animating="none";e.host.setAttribute("animating","none");e.hideEvent.emit();clearTimeout(e.animationDelayTimeout)};this.animateOpenWindow=function(){e.animating="intro";clearTimeout(e.animationDelayTimeout);e.animationDelayTimeout=setTimeout(e.stopIntroAnimationWindow.bind(e),d(e.cssTransitionDuration))};this.animateCloseWindow=function(){e.animating="outro";clearTimeout(e.animationDelayTimeout);e.animationDelayTimeout=setTimeout(e.stopOutroAnimationWindow.bind(e),d(e.cssTransitionDuration))};this.closeModal=function(n){var t;if(((t=n.target)===null||t===void 0?void 0:t.localName)!=="mds-modal"){return}e.opened=n.target!==n.currentTarget;if(!e.opened){e.closeEvent.emit()}}}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;if(this.window){(n=this.host.querySelector('[slot="window"]'))===null||n===void 0?void 0:n.setAttribute("role","dialog")}};n.prototype.componentWillRender=function(){this.animating=this.opened?"intro":"outro"};n.prototype.componentDidLoad=function(){this.updateCSSCustomProps()};n.prototype.handleOpenProp=function(n){if(n){this.animateOpenWindow();return}this.animateCloseWindow()};n.prototype.onModalCloseListener=function(){this.opened=false};n.prototype.onBannerCloseListener=function(){this.opened=false};n.prototype.render=function(){var n=this;return e(i,{key:"1d00f0a817af0b0a82eae1c790cc7e312165a46e","aria-modal":r(this.opened?"true":"false"),onClick:function(t){n.closeModal(t)}},this.window?e("slot",{name:"window"}):e("div",{class:r("window",(this.top||this.bottom)&&"window-".concat(this.top?"-top":"").concat(this.bottom?"-bottom":"")),part:"window"},this.top&&e("slot",{name:"top"}),e("slot",null),this.bottom&&e("slot",{name:"bottom"})),!this.window&&e("mds-button",{key:"1f62de32ab98e24733a13fe9553ba9a12d9fcf31",class:"action-close",icon:"mi/baseline/close",variant:"light",tone:"quiet",size:"xl",onClick:function(t){n.closeModal(t)}}))};Object.defineProperty(n.prototype,"host",{get:function(){return a(this)},enumerable:false,configurable:true});Object.defineProperty(n,"watchers",{get:function(){return{opened:["handleOpenProp"]}},enumerable:false,configurable:true});return n}());p.style=m}}}));