@muraldevkit/ui-toolkit 4.66.0-dev-7XJy.1 → 4.66.0-dev-7K0j.1

package/dist/esm/components/modal/MrlModal/MrlModal.module.css

@@ -0,0 +1,363 @@
+/* stylelint-disable scss/operator-no-newline-after */
+.mrl-u-focus-wrapper--hBNvo {
+  position: relative;
+}
+
+:root {
+  --mrl-button-background-color-skeleton: var(--mrl-color-skeleton);
+  --mrl-button-border-radius: var(--mrl-border-radius-functional);
+}
+
+.mrl-u-preHydrateSkeleton--gcWWn mrl-button:not(.hydrated--gfrtB),
+.mrl-u-preHydrateSkeleton--gcWWn mrl-icon-button:not(.hydrated--gfrtB),
+.mrl-u-preHydrateSkeleton--gcWWn mrl-shadow-button:not(.hydrated--gfrtB) {
+  min-height: var(--mrl-spacing-09);
+  min-width: var(--mrl-spacing-09);
+  background: var(--mrl-button-background-color-skeleton);
+  border-radius: var(--mrl-button-border-radius);
+  box-shadow: none;
+  color: transparent;
+  display: inline-flex;
+  font-family: var(--mrl-body-font);
+  pointer-events: none;
+  visibility: inherit;
+}
+.mrl-u-preHydrateSkeleton--gcWWn mrl-button[kind=inverse]:not(.hydrated--gfrtB),
+.mrl-u-preHydrateSkeleton--gcWWn mrl-button[kind=ghost-inverse]:not(.hydrated--gfrtB),
+.mrl-u-preHydrateSkeleton--gcWWn mrl-icon-button[kind=inverse]:not(.hydrated--gfrtB),
+.mrl-u-preHydrateSkeleton--gcWWn mrl-icon-button[kind=ghost-inverse]:not(.hydrated--gfrtB),
+.mrl-u-preHydrateSkeleton--gcWWn mrl-shadow-button[kind=inverse]:not(.hydrated--gfrtB),
+.mrl-u-preHydrateSkeleton--gcWWn mrl-shadow-button[kind=ghost-inverse]:not(.hydrated--gfrtB) {
+  --mrl-button-background-color-skeleton: var(--mrl-color-skeleton-inverse);
+}
+
+mrl-button[size=small],
+mrl-shadow-button[size=small] {
+  min-height: var(--mrl-spacing-08);
+}
+
+mrl-icon-button[size=small] {
+  min-height: var(--mrl-spacing-08);
+  min-width: var(--mrl-spacing-08);
+}
+
+mrl-button[size=large],
+mrl-shadow-button[size=large] {
+  min-height: calc(var(--mrl-spacing-09) + var(--mrl-spacing-02));
+}
+
+mrl-icon-button[size=large] {
+  min-height: calc(var(--mrl-spacing-09) + var(--mrl-spacing-02));
+  min-width: calc(var(--mrl-spacing-09) + var(--mrl-spacing-02));
+}
+
+mrl-icon-button[size=xsmall][kind=ghost],
+mrl-icon-button[size=xsmall][kind=ghost-inverse] {
+  min-height: var(--mrl-spacing-07);
+  min-width: var(--mrl-spacing-07);
+}
+
+.mrlIconButton--QZVia,
+.mrlButton--oCxtQ {
+  --mrl-button-background-color: var(--mrl-color-background);
+  --mrl-button-background-color-active: rgba(var(--mrl-gray-20), 1);
+  --mrl-button-background-color-disabled: var(--mrl-color-background);
+  --mrl-button-background-color-hover: rgba(var(--mrl-gray-10), 1);
+  --mrl-button-border-color: rgba(var(--mrl-gray-30), 1);
+  --mrl-button-border-color-active: rgba(var(--mrl-gray-50), 1);
+  --mrl-button-border-color-disabled: rgba(var(--mrl-gray-20), 1);
+  --mrl-button-border-color-hover: rgba(var(--mrl-gray-40), 1);
+  --mrl-button-border-width: var(--mrl-line-width-border);
+  --mrl-button-icon-size: var(--mrl-spacing-07);
+  --mrl-button-text-color: rgba(var(--mrl-gray-80), 1);
+  --mrl-button-text-color-active: rgba(var(--mrl-black), 1);
+  --mrl-button-text-color-disabled: var(--mrl-color-text-disabled);
+  --mrl-button-text-color-hover: rgba(var(--mrl-gray-90), 1);
+  --mrl-button-inset-vertical: 0;
+  --mrl-button-inset-horizontal: var(--mrl-space-inset-control-large);
+  --mrl-button-icon-margin-right: var(--mrl-space-inline-related);
+}
+.mrlIconButton--small--rCea9,
+.mrlButton--small--sP81w {
+  min-height: var(--mrl-spacing-08);
+  --mrl-button-icon-size: var(--mrl-spacing-06);
+  --mrl-button-inset-horizontal: var(--mrl-spacing-04);
+}
+.mrlIconButton--QZVia.mrlIconButton--xsmall--6it2q,
+.mrlButton--oCxtQ.mrlIconButton--xsmall--6it2q {
+  --mrl-button-icon-size: var(--mrl-spacing-06);
+}
+.mrlIconButton--QZVia.mrlButton--xsmall--3QnHQ,
+.mrlButton--oCxtQ.mrlButton--xsmall--3QnHQ {
+  --mrl-button-icon-size: var(--mrl-spacing-05);
+}
+.mrlIconButton--QZVia.mrlIconButton--small--rCea9,
+.mrlButton--oCxtQ.mrlIconButton--small--rCea9 {
+  min-height: var(--mrl-spacing-08);
+  min-width: var(--mrl-spacing-08);
+}
+.mrlIconButton--QZVia.mrlIconButton--small--rCea9 + .mrl-tooltip-content--dCKBJ,
+.mrlButton--oCxtQ.mrlIconButton--small--rCea9 + .mrl-tooltip-content--dCKBJ {
+  --mrl-tooltip-arrow-spacing: calc(
+  	(var(--mrl-spacing-08) - var(--mrl-tooltip-arrow-size)) / 2
+  );
+}
+.mrlIconButton--large--QSMD4,
+.mrlButton--large---aciN {
+  min-height: calc(var(--mrl-spacing-09) + var(--mrl-spacing-02));
+  --mrl-button-inset-horizontal: var(--mrl-spacing-05);
+}
+.mrlIconButton--QZVia.mrlIconButton--large--QSMD4,
+.mrlButton--oCxtQ.mrlIconButton--large--QSMD4 {
+  min-height: calc(var(--mrl-spacing-09) + var(--mrl-spacing-02));
+  min-width: calc(var(--mrl-spacing-09) + var(--mrl-spacing-02));
+}
+.mrlIconButton--QZVia.mrlButton--primary--Znoyd, .mrlIconButton--QZVia.mrlButton--ghost--phgeh, .mrlIconButton--QZVia.mrlButton--ghost-inverse--xy4xq, .mrlIconButton--QZVia.mrlIconButton--primary--6VJ39, .mrlIconButton--QZVia.mrlIconButton--ghost--7b69p, .mrlIconButton--QZVia.mrlIconButton--ghost-inverse--AqwHJ,
+.mrlButton--oCxtQ.mrlButton--primary--Znoyd,
+.mrlButton--oCxtQ.mrlButton--ghost--phgeh,
+.mrlButton--oCxtQ.mrlButton--ghost-inverse--xy4xq,
+.mrlButton--oCxtQ.mrlIconButton--primary--6VJ39,
+.mrlButton--oCxtQ.mrlIconButton--ghost--7b69p,
+.mrlButton--oCxtQ.mrlIconButton--ghost-inverse--AqwHJ {
+  --mrl-button-border-color: transparent;
+  --mrl-button-border-color-active: transparent;
+  --mrl-button-border-color-hover: transparent;
+  --mrl-button-border-color-disabled: transparent;
+}
+.mrlIconButton--secondary-native--ztdCO,
+.mrlButton--secondary-native--Sz5ef {
+  --mrl-button-border-color: transparent;
+  --mrl-button-border-color-active: transparent;
+  --mrl-button-border-color-hover: transparent;
+  --mrl-button-border-color-disabled: transparent;
+}
+.mrlIconButton--primary--6VJ39,
+.mrlButton--primary--Znoyd {
+  --mrl-button-background-color: var(--mrl-color-brand);
+  --mrl-button-background-color-active: var(--mrl-color-brand-active);
+  --mrl-button-background-color-disabled: var(--mrl-color-background-disabled);
+  --mrl-button-background-color-hover: var(--mrl-color-brand-hover);
+  --mrl-button-text-color: var(--mrl-color-text-inverse);
+  --mrl-button-text-color-active: var(--mrl-color-text-inverse);
+  --mrl-button-text-color-disabled: var(--mrl-color-text-inverse);
+  --mrl-button-text-color-hover: var(--mrl-color-text-inverse);
+}
+.mrlIconButton--primary-native--iL-Og,
+.mrlButton--primary-native--w1rva {
+  --mrl-button-background-color: transparent;
+  --mrl-button-background-color-active: var(--mrl-black-opacity-01);
+  --mrl-button-background-color-disabled: transparent;
+  --mrl-button-background-color-hover: var(--mrl-black-opacity-00);
+  --mrl-button-border-color: transparent;
+  --mrl-button-border-color-active: transparent;
+  --mrl-button-border-color-hover: transparent;
+  --mrl-button-border-color-disabled: transparent;
+  --mrl-button-text-color: rgba(var(--mrl-blue-70), 1);
+  --mrl-button-text-color-active: rgba(var(--mrl-blue-70), 1);
+  --mrl-button-text-color-disabled: var(--mrl-black-opacity-03);
+  --mrl-button-text-color-hover: rgba(var(--mrl-blue-70), 1);
+}
+.mrlIconButton--ghost--7b69p,
+.mrlButton--ghost--phgeh {
+  --mrl-button-background-color: transparent;
+  --mrl-button-background-color-active: var(--mrl-black-opacity-01);
+  --mrl-button-background-color-hover: var(--mrl-black-opacity-00);
+  --mrl-button-background-color-disabled: transparent;
+  --mrl-button-text-color: rgba(var(--mrl-gray-100), 1);
+  --mrl-button-text-color-active: rgba(var(--mrl-gray-100), 1);
+  --mrl-button-text-color-disabled: var(--mrl-black-opacity-03);
+  --mrl-button-text-color-hover: rgba(var(--mrl-gray-100), 1);
+  --mrl-button-inset-horizontal: calc(var(--mrl-spacing-01) + var(--mrl-spacing-02));
+  --mrl-button-icon-margin-right: var(--mrl-spacing-02);
+}
+.mrlIconButton--ghost--7b69p[aria-pressed=true], .mrlIconButton--ghost--7b69p[aria-checked=true], .mrlIconButton--ghost--7b69p[aria-expanded=true], .mrlIconButton--ghost--7b69p[aria-selected=true],
+.mrlButton--ghost--phgeh[aria-pressed=true],
+.mrlButton--ghost--phgeh[aria-checked=true],
+.mrlButton--ghost--phgeh[aria-expanded=true],
+.mrlButton--ghost--phgeh[aria-selected=true] {
+  --mrl-button-background-color: var(--mrl-color-background-inverse);
+  --mrl-button-text-color: var(--mrl-color-text-inverse);
+}
+.mrlIconButton--ghost-inverse--AqwHJ,
+.mrlButton--ghost-inverse--xy4xq {
+  --mrl-button-background-color: transparent;
+  --mrl-button-background-color-active: var(--mrl-white-opacity-04);
+  --mrl-button-background-color-hover: var(--mrl-white-opacity-02);
+  --mrl-button-background-color-disabled: transparent;
+  --mrl-button-text-color: var(--mrl-color-text-inverse);
+  --mrl-button-text-color-active: var(--mrl-color-text-inverse);
+  --mrl-button-text-color-hover: var(--mrl-color-text-inverse);
+  --mrl-button-text-color-disabled: var(--mrl-white-opacity-04);
+  --mrl-button-inset-horizontal: calc(var(--mrl-spacing-01) + var(--mrl-spacing-02));
+  --mrl-button-icon-margin-right: var(--mrl-spacing-02);
+}
+.mrlIconButton--ghost-inverse--AqwHJ.mrlButton--skeleton--S-lon,
+.mrlButton--ghost-inverse--xy4xq.mrlButton--skeleton--S-lon {
+  --mrl-button-background-color-skeleton: var(--mrl-color-skeleton-inverse);
+}
+.mrlIconButton--ghost-inverse--AqwHJ.toggleStyle--default--gPVgx[aria-pressed=true], .mrlIconButton--ghost-inverse--AqwHJ.toggleStyle--default--gPVgx[aria-checked=true], .mrlIconButton--ghost-inverse--AqwHJ.toggleStyle--default--gPVgx[aria-expanded=true], .mrlIconButton--ghost-inverse--AqwHJ.toggleStyle--default--gPVgx[aria-selected=true],
+.mrlButton--ghost-inverse--xy4xq.toggleStyle--default--gPVgx[aria-pressed=true],
+.mrlButton--ghost-inverse--xy4xq.toggleStyle--default--gPVgx[aria-checked=true],
+.mrlButton--ghost-inverse--xy4xq.toggleStyle--default--gPVgx[aria-expanded=true],
+.mrlButton--ghost-inverse--xy4xq.toggleStyle--default--gPVgx[aria-selected=true] {
+  --mrl-button-background-color: var(--mrl-color-background);
+  --mrl-button-text-color: var(--mrl-color-text);
+}
+.mrlIconButton--ghost-inverse--AqwHJ.toggleStyle--secondary--uf-JP[aria-pressed=true], .mrlIconButton--ghost-inverse--AqwHJ.toggleStyle--secondary--uf-JP[aria-checked=true], .mrlIconButton--ghost-inverse--AqwHJ.toggleStyle--secondary--uf-JP[aria-expanded=true], .mrlIconButton--ghost-inverse--AqwHJ.toggleStyle--secondary--uf-JP[aria-selected=true],
+.mrlButton--ghost-inverse--xy4xq.toggleStyle--secondary--uf-JP[aria-pressed=true],
+.mrlButton--ghost-inverse--xy4xq.toggleStyle--secondary--uf-JP[aria-checked=true],
+.mrlButton--ghost-inverse--xy4xq.toggleStyle--secondary--uf-JP[aria-expanded=true],
+.mrlButton--ghost-inverse--xy4xq.toggleStyle--secondary--uf-JP[aria-selected=true] {
+  --mrl-button-background-color: var(--mrl-color-accent);
+  --mrl-button-text-color: var(--mrl-color-text-inverse);
+}
+.mrlIconButton--ghost-inverse--AqwHJ[aria-disabled=true][aria-pressed=true], .mrlIconButton--ghost-inverse--AqwHJ[aria-disabled=true][aria-checked=true], .mrlIconButton--ghost-inverse--AqwHJ[aria-disabled=true][aria-expanded=true], .mrlIconButton--ghost-inverse--AqwHJ[aria-disabled=true][aria-selected=true],
+.mrlButton--ghost-inverse--xy4xq[aria-disabled=true][aria-pressed=true],
+.mrlButton--ghost-inverse--xy4xq[aria-disabled=true][aria-checked=true],
+.mrlButton--ghost-inverse--xy4xq[aria-disabled=true][aria-expanded=true],
+.mrlButton--ghost-inverse--xy4xq[aria-disabled=true][aria-selected=true] {
+  --mrl-button-background-color-disabled: var(--mrl-white-opacity-03);
+  --mrl-button-text-color-disabled: var(--mrl-white-opacity-04);
+}
+.mrlIconButton--inverse--xeTCf,
+.mrlButton--inverse--nJdza {
+  --mrl-button-background-color: var(--mrl-color-background);
+  --mrl-button-background-color-active: var(--mrl-white-opacity-06);
+  --mrl-button-background-color-hover: var(--mrl-white-opacity-08);
+  --mrl-button-background-color-disabled: var(--mrl-white-opacity-03);
+  --mrl-button-border-color: transparent;
+  --mrl-button-border-color-active: transparent;
+  --mrl-button-border-color-hover: transparent;
+  --mrl-button-border-color-disabled: transparent;
+  --mrl-button-text-color: rgba(var(--mrl-gray-100), 1);
+  --mrl-button-text-color-active: rgba(var(--mrl-gray-100), 1);
+  --mrl-button-text-color-disabled: var(--mrl-black-opacity-03);
+}
+.mrlIconButton--inverse--xeTCf.mrlButton--skeleton--S-lon,
+.mrlButton--inverse--nJdza.mrlButton--skeleton--S-lon {
+  --mrl-button-background-color-skeleton: var(--mrl-color-skeleton-inverse);
+}
+.mrlIconButton--QZVia[aria-disabled=true][aria-pressed=true], .mrlIconButton--QZVia[aria-disabled=true][aria-checked=true], .mrlIconButton--QZVia[aria-disabled=true][aria-expanded=true], .mrlIconButton--QZVia[aria-disabled=true][aria-selected=true],
+.mrlButton--oCxtQ[aria-disabled=true][aria-pressed=true],
+.mrlButton--oCxtQ[aria-disabled=true][aria-checked=true],
+.mrlButton--oCxtQ[aria-disabled=true][aria-expanded=true],
+.mrlButton--oCxtQ[aria-disabled=true][aria-selected=true] {
+  --mrl-button-background-color-disabled: var(--mrl-black-opacity-03);
+  --mrl-button-text-color-disabled: var(--mrl-color-text-inverse);
+}
+
+.mrl-modal--91TwE {
+  --mrl-modal-header-text-color: rgba(var(--mrl-gray-100), 1);
+  --mrl-modal-padding-vertical: var(--mrl-spacing-07);
+  --mrl-modal-padding-vertical-bottom: var(--mrl-spacing-06);
+  --mrl-modal-padding-vertical-top: var(--mrl-spacing-07);
+  --mrl-modal-padding-vertical-footer: var(--mrl-spacing-07);
+  --mrl-modal-padding-vertical-content: var(--mrl-spacing-02);
+  --mrl-modal-padding-horizontal: var(--mrl-spacing-07);
+  --mrl-modal-close-inline-margin: var(--mrl-space-inline-related);
+  --mrl-modal-close-offset: var(--mrl-spacing-06);
+}
+
+@media screen and (min-width: 37.5rem) {
+  .mrl-modal--91TwE,
+  .mrl-modal--91TwE .footer--sEp2T.slotted--ipAJs .mrl-modal-footer--oPZLD,
+  .mrl-modal--91TwE .header--1BP9z.slotted--ipAJs .mrl-modal-header--AujeT {
+    --mrl-modal-padding-horizontal: var(--mrl-spacing-08);
+  }
+  .mrl-modal--large---Kpg0,
+  .mrl-modal--large---Kpg0 .footer--sEp2T.slotted--ipAJs .mrl-modal-footer--oPZLD,
+  .mrl-modal--large---Kpg0 .header--1BP9z.slotted--ipAJs .mrl-modal-header--AujeT {
+    --mrl-modal-padding-horizontal: var(--mrl-spacing-09);
+  }
+}
+.mrl-native-modal--RKYv-,
+.mrl-display-modal--xP9Ms {
+  --mrl-modal-padding-horizontal: var(--mrl-spacing-05);
+}
+
+.mrl-modal-backdrop--XHDxP {
+  --mrl-modal-backdrop-background: var(--mrl-black-opacity-05);
+}
+
+.mrl-modal--91TwE {
+  --mrl-modal-size: 600px;
+  --mrl-modal-border-radius: var(--mrl-radii-05);
+  --mrl-modal-background: var(--mrl-color-background);
+  --mrl-modal-max-height: 95vh;
+}
+
+@media screen and (min-width: 37.5rem) {
+  .mrl-modal--small--9W1z0 {
+    --mrl-modal-size: 400px;
+  }
+  .mrl-modal--large---Kpg0 {
+    --mrl-modal-size: 800px;
+  }
+}
+.mrl-native-modal--RKYv-,
+.mrl-display-modal--xP9Ms {
+  --mrl-modal-border-radius: var(--mrl-radii-04);
+  --mrl-modal-size: 600px;
+  --mrl-modal-max-height: 642px;
+}
+
+.mrl-modal-backdrop--XHDxP {
+  align-items: center;
+  background: var(--mrl-modal-backdrop-background);
+  display: flex;
+  inset: 0;
+  justify-content: center;
+  opacity: 0;
+  position: fixed;
+  transition: opacity 300ms ease-in-out;
+  z-index: 1000;
+}
+.mrl-modal-backdrop--XHDxP.fade-in--KA34s {
+  opacity: 1;
+  transition-duration: var(--mrl-duration-04);
+  transition-property: opacity;
+  transition-timing-function: var(--mrl-timing-m1);
+}
+.mrl-modal-backdrop--XHDxP.fade-out--oKqCD {
+  opacity: 0;
+  transition-duration: var(--mrl-duration-03);
+  transition-timing-function: var(--mrl-timing-m3);
+}
+.mrl-modal-backdrop--XHDxP.display--mg2v3 {
+  display: fixed;
+}
+.mrl-modal-backdrop--XHDxP.hide--6-Apt {
+  display: none;
+}
+.mrl-modal-backdrop--native--1un74, .mrl-modal-backdrop--display--FZILO {
+  align-items: flex-start;
+}
+
+.mrl-modal--91TwE {
+  background: var(--mrl-modal-background);
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  height: 100dvh;
+  position: relative;
+  width: 100dvw;
+}
+.mrl-modal--91TwE .mrl-modal-close--j8QKl {
+  position: absolute;
+  right: var(--mrl-modal-close-offset);
+  top: var(--mrl-modal-close-offset);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .mrl-modal-backdrop--XHDxP.fade-in--KA34s .mrl-modal--91TwE {
+    transform: translate(0, 0);
+    transition-duration: var(--mrl-duration-04);
+    transition-property: transform;
+    transition-timing-function: var(--mrl-timing-m1);
+  }
+  .mrl-modal-backdrop--XHDxP.fade-out--oKqCD .mrl-modal--91TwE {
+    transform: translate(0, var(--mrl-distance-02));
+    transition-duration: var(--mrl-duration-03);
+    transition-timing-function: var(--mrl-timing-m3);
+  }
+}

package/dist/esm/components/modal/MrlModal/MrlModal.module.scss.js

@@ -0,0 +1,48 @@
+import "./MrlModal.module.css";
+export default {
+	"mrl-u-focus-wrapper": "mrl-u-focus-wrapper--hBNvo",
+	"mrl-u-preHydrateSkeleton": "mrl-u-preHydrateSkeleton--gcWWn",
+	"hydrated": "hydrated--gfrtB",
+	"mrlIconButton": "mrlIconButton--QZVia",
+	"mrlButton": "mrlButton--oCxtQ",
+	"mrlIconButton--small": "mrlIconButton--small--rCea9",
+	"mrlButton--small": "mrlButton--small--sP81w",
+	"mrlIconButton--xsmall": "mrlIconButton--xsmall--6it2q",
+	"mrlButton--xsmall": "mrlButton--xsmall--3QnHQ",
+	"mrl-tooltip-content": "mrl-tooltip-content--dCKBJ",
+	"mrlIconButton--large": "mrlIconButton--large--QSMD4",
+	"mrlButton--large": "mrlButton--large---aciN",
+	"mrlButton--primary": "mrlButton--primary--Znoyd",
+	"mrlButton--ghost": "mrlButton--ghost--phgeh",
+	"mrlButton--ghost-inverse": "mrlButton--ghost-inverse--xy4xq",
+	"mrlIconButton--primary": "mrlIconButton--primary--6VJ39",
+	"mrlIconButton--ghost": "mrlIconButton--ghost--7b69p",
+	"mrlIconButton--ghost-inverse": "mrlIconButton--ghost-inverse--AqwHJ",
+	"mrlIconButton--secondary-native": "mrlIconButton--secondary-native--ztdCO",
+	"mrlButton--secondary-native": "mrlButton--secondary-native--Sz5ef",
+	"mrlIconButton--primary-native": "mrlIconButton--primary-native--iL-Og",
+	"mrlButton--primary-native": "mrlButton--primary-native--w1rva",
+	"mrlButton--skeleton": "mrlButton--skeleton--S-lon",
+	"toggleStyle--default": "toggleStyle--default--gPVgx",
+	"toggleStyle--secondary": "toggleStyle--secondary--uf-JP",
+	"mrlIconButton--inverse": "mrlIconButton--inverse--xeTCf",
+	"mrlButton--inverse": "mrlButton--inverse--nJdza",
+	"mrl-modal": "mrl-modal--91TwE",
+	"footer": "footer--sEp2T",
+	"slotted": "slotted--ipAJs",
+	"mrl-modal-footer": "mrl-modal-footer--oPZLD",
+	"header": "header--1BP9z",
+	"mrl-modal-header": "mrl-modal-header--AujeT",
+	"mrl-modal--large": "mrl-modal--large---Kpg0",
+	"mrl-native-modal": "mrl-native-modal--RKYv-",
+	"mrl-display-modal": "mrl-display-modal--xP9Ms",
+	"mrl-modal-backdrop": "mrl-modal-backdrop--XHDxP",
+	"mrl-modal--small": "mrl-modal--small--9W1z0",
+	"fade-in": "fade-in--KA34s",
+	"fade-out": "fade-out--oKqCD",
+	"display": "display--mg2v3",
+	"hide": "hide--6-Apt",
+	"mrl-modal-backdrop--native": "mrl-modal-backdrop--native--1un74",
+	"mrl-modal-backdrop--display": "mrl-modal-backdrop--display--FZILO",
+	"mrl-modal-close": "mrl-modal-close--j8QKl"
+};

package/dist/esm/components/modal/MrlModal/index.js

@@ -0,0 +1 @@
+export { MrlModal } from './MrlModal';

package/dist/esm/components/modal/MrlModal/stories.css

@@ -0,0 +1,33 @@
+/* stylelint-disable */
+#anchor--components-modal-mrlmodal--default .mrl-modal-container,
+#story--components-modal-mrlmodal--default .mrl-modal-container {
+  display: block;
+  position: static;
+}
+
+#story--components-modal-mrlmodal--default {
+  min-height: 400px;
+}
+
+#anchor--components-modal-mrlmodal--default .mrl-modal-backdrop,
+#story--components-modal-mrlmodal--default .mrl-modal-backdrop {
+  background: none;
+}
+
+.story-content p,
+.story-content h1,
+.story-content h2 {
+  margin-bottom: var(--mrl-spacing-06);
+}
+
+.modal-trigger-demo-form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--mrl-spacing-05);
+}
+
+.modal-trigger-demo-form__field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--mrl-spacing-02);
+}

package/dist/esm/components/modal/MrlModalContent/MrlModalContent.js

@@ -0,0 +1,59 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import * as React from 'react';
+import classNames from 'classnames';
+import { isElementScrollable } from '../../../utils/isElementScrollable';
+import styles from './MrlModalContent.module.scss.js';
+import { useMrlModalContext } from '../MrlModalContext';
+import { hasScrollContent } from '../../../utils/hasScrollContent/hasScrollContent';
+import { useHasFocusableDescendant } from '../../../hooks/useHasFocusableDescendant';
+/**
+ * Modal Content component for the MrlModal
+ * @param {object} props - The props object
+ * @param {React.ReactElement} props.children - The children to be rendered within the component
+ * @returns {React.ReactElement}} The rendered MrlModalContent component
+ */
+export const MrlModalContent = (_a) => {
+    var { children, className } = _a, rest = __rest(_a, ["children", "className"]);
+    const { scrollableContent, setScrollableContent, title } = useMrlModalContext();
+    const contentAreaRef = React.useRef(null);
+    const hasFocusableDescendant = useHasFocusableDescendant(contentAreaRef);
+    React.useEffect(() => {
+        if (!contentAreaRef.current)
+            return;
+        /**
+         * Sets up observer to toggle tabindex value on the scrollable region within the modal. When
+         * the content area is overflowed and has no focusable descendants, we want to set tabindex
+         * to 0 so that keyboard-only users can scroll through the content. Per ACT rule 0ssw9k a
+         * scrollable region passes WCAG 2.1.1 Keyboard either by being focusable itself or by having
+         * a focusable descendant, so we omit `tabindex="0"` whenever a descendant control is
+         * already keyboard reachable. The labeled `role="region"` is preserved whenever the modal
+         * content overflows so screen-reader users get a landmark in either case.
+         * https://www.w3.org/WAI/standards-guidelines/act/rules/0ssw9k/
+         */
+        const contentArea = contentAreaRef.current;
+        contentArea.addEventListener('scroll', () => {
+            setScrollableContent(Object.assign(Object.assign({}, hasScrollContent(contentArea)), { isContentScrollable: isElementScrollable(contentArea) }));
+        });
+        const observer = new ResizeObserver(() => {
+            setScrollableContent(Object.assign(Object.assign({}, hasScrollContent(contentArea)), { isContentScrollable: isElementScrollable(contentArea) }));
+        });
+        observer.observe(contentArea);
+        return () => {
+            observer.disconnect();
+        };
+    }, [setScrollableContent]);
+    const contentClasses = classNames('mrl-modal-content', className, styles['mrl-modal-content'], {
+        'mrl-modal-content-scrollable': scrollableContent.isContentScrollable
+    });
+    return (React.createElement("div", Object.assign({}, rest, { ref: contentAreaRef, className: contentClasses }, (scrollableContent.isContentScrollable && Object.assign({ 'aria-label': title ? `${title} modal scrollable content` : 'modal scrollable content', role: 'region' }, (!hasFocusableDescendant && { tabIndex: 0 })))), children));
+};

package/dist/esm/components/modal/MrlModalContent/MrlModalContent.module.css

@@ -0,0 +1,43 @@
+/* stylelint-disable scss/operator-no-newline-after */
+.mrl-u-focus-wrapper--dA7i7 {
+  position: relative;
+}
+
+.mrl-modal-content--zpbEa {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  overflow-y: auto;
+  padding: var(--mrl-modal-padding-vertical-content) var(--mrl-modal-padding-horizontal);
+}
+.mrl-modal-content--zpbEa:focus-visible {
+  animation-duration: var(--mrl-duration-03);
+  animation-fill-mode: forwards;
+  animation-iteration-count: 1;
+  animation-name: outline-animation--r-WKE;
+  animation-timing-function: var(--mrl-timing-m3);
+}
+@keyframes outline-animation--r-WKE {
+  0% {
+    outline: 0 solid transparent;
+    outline-offset: 1px;
+  }
+  50% {
+    outline: 4px solid var(--mrl-color-focus);
+    outline-offset: 1px;
+  }
+  100% {
+    outline: 2px solid var(--mrl-color-focus);
+    outline-offset: 1px;
+  }
+}
+.mrl-native-modal .mrl-modal-content--zpbEa, .mrl-display-modal .mrl-modal-content--zpbEa {
+  margin-top: var(--mrl-spacing-03);
+  padding-bottom: var(--mrl-spacing-09);
+}
+@media screen and (min-width: 37.5rem) {
+  .mrl-native-modal .mrl-modal-content--zpbEa, .mrl-display-modal .mrl-modal-content--zpbEa {
+    margin-bottom: var(--mrl-spacing-05);
+    padding-bottom: 0;
+  }
+}

package/dist/esm/components/modal/MrlModalContent/MrlModalContent.module.scss.js

@@ -0,0 +1,6 @@
+import "./MrlModalContent.module.css";
+export default {
+	"mrl-u-focus-wrapper": "mrl-u-focus-wrapper--dA7i7",
+	"mrl-modal-content": "mrl-modal-content--zpbEa",
+	"outline-animation": "outline-animation--r-WKE"
+};

package/dist/esm/components/modal/MrlModalContent/index.js

@@ -0,0 +1 @@
+export { MrlModalContent } from './MrlModalContent';

package/dist/esm/components/modal/MrlModalContext/MrlModalContext.js

@@ -0,0 +1,14 @@
+import * as React from 'react';
+export const MrlModalContext = React.createContext(undefined);
+/**
+ * Returns the MrlModalContext state.
+ *
+ * @returns The MrlModalContext state.
+ */
+export const useMrlModalContext = () => {
+    const context = React.useContext(MrlModalContext);
+    if (!context) {
+        throw new Error('MrlModalContext must be used within a MrlModalContextProvider');
+    }
+    return context;
+};

package/dist/esm/components/modal/MrlModalContext/index.js

@@ -0,0 +1 @@
+export * from './MrlModalContext';

package/dist/esm/components/modal/MrlModalFooter/MrlModalFooter.global.css

@@ -0,0 +1,14 @@
+.mrl-modal-footer .mrlButton,
+.mrl-modal-footer .modal-tertiary,
+.mrl-modal-footer button {
+  align-self: flex-start;
+}
+.mrl-modal-footer .modal-secondary,
+.mrl-modal-footer .modal-primary,
+.mrl-modal-footer .mrlButton--primary,
+.mrl-modal-footer .mrlButton--secondary {
+  margin-left: auto;
+}
+.mrl-modal-footer .mrlButton--primary {
+  margin: 0;
+}

package/dist/esm/components/modal/MrlModalFooter/MrlModalFooter.js

@@ -0,0 +1,37 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import * as React from 'react';
+import { setAttributes } from '../../../utils';
+import classNames from 'classnames';
+import styles from './MrlModalFooter.module.scss.js';
+import './MrlModalFooter.global.css';
+import { useBreakpoint } from '../../../hooks/useBreakpoint';
+import { useMrlModalContext } from '../MrlModalContext';
+/**
+ * Modal Footer component for the MrlModal
+ * @param {AttrsObject} attrs - Additional HTML attributes for the `mrl-modal` element
+ * @returns {React.ReactElement} The rendered MrlModalFooter component
+ */
+export const MrlModalFooter = (_a) => {
+    var { attrs = {}, children, className } = _a, rest = __rest(_a, ["attrs", "children", "className"]);
+    const { scrollableContent } = useMrlModalContext();
+    const breakpoint = useBreakpoint();
+    const attributes = setAttributes(attrs);
+    const modalFooterClasses = classNames(className, 'mrl-modal-footer', styles['mrl-modal-footer'], {
+        [styles['slotted']]: breakpoint === 'xs',
+        [styles['mrl-modal-scroll-shadow-bottom']]: scrollableContent.hasScrollBottom
+    });
+    delete attributes.class;
+    delete attributes.className;
+    return (React.createElement("div", Object.assign({}, rest, attributes, { className: modalFooterClasses }),
+        React.createElement("div", { className: classNames('mrl-modal-footer-wrapper', styles['mrl-modal-footer-wrapper']) }, children)));
+};