(
      --maui-table-row-even-hover-background,
      var(--maui-color-grey-02)
    );
  }

  /* This is required for firefox users. */
  @-moz-document url-prefix() {
    ::slotted(maui-table-cell) {
      height: 100%;
    }
  }
`, Z1 = [W1];
var Q1 = Object.defineProperty, J1 = Object.getOwnPropertyDescriptor, cl = (a, e, t, o) => {
  for (var i = o > 1 ? void 0 : o ? J1(e, t) : e, r = a.length - 1, n; r >= 0; r--)
    (n = a[r]) && (i = (o ? n(e, t, i) : n(i)) || i);
  return o && i && Q1(e, t, i), i;
};
class Ca extends k {
  constructor() {
    super(), this.index = "0", this.componentName = "table-row";
  }
  connectedCallback() {
    super.connectedCallback(), this.setAttribute("role", "row");
  }
  handleSlotChange(e) {
    const t = e.target;
    X(t, ["MAUI-TABLE-CELL"], void 0, !0);
  }
  render() {
    return u`<div
      class=${y({
      [this.componentName]: !0,
      [this.theme]: !0,
      "row-even": parseInt(this.dataset.contentRow || "0", 10) % 2 === 0,
      "row-odd": parseInt(this.dataset.contentRow || "0", 10) % 2 !== 0
    })}
    >
      <slot @slotchange=${this.handleSlotChange}></slot>
    </div>`;
  }
}
Ca.styles = Z1;
cl([
  O()
], Ca.prototype, "index", 2);
cl([
  l({ type: String, reflect: !0, attribute: "aria-rowindex" })
], Ca.prototype, "ariaRowIndex", 2);
w("maui-table-row", Ca);
const e$ = s``, t$ = [e$];
class dl extends k {
  constructor() {
    super(), this.componentName = "table-caption";
  }
  firstUpdated() {
    super.firstUpdated(), this.id || (this.id = `maui-table-caption-${$a()}`);
  }
  render() {
    return u`<div
      class=${y({ [this.componentName]: !0, [this.theme]: !0 })}
    >
      <maui-headline .theme=${this.theme} type="h3" margin weight="bold"
        ><slot></slot>
      </maui-headline>
    </div>`;
  }
}
dl.styles = t$;
w("maui-table-caption", dl);
const o$ = s`
  .table-footnote:not(.reference) {
    display: grid;
    align-items: flex-end;
    grid-template-columns: var(--maui-spacing-4) auto;
  }

  .index {
    align-self: flex-start;
    display: inline-block;
    font-family: var(--maui-font-family-copy);
    font-weight: var(--maui-font-weight-bold);
    color: var(--maui-color-text-caption);
    ${d({ size: "copy-small", tenant: "wl" })};
    vertical-align: super;
  }

  maui-label {
    margin-top: var(--maui-spacing-1);
  }

  maui-navigation-link {
    vertical-align: super;
  }
`, i$ = s`
  .lh .index {
    ${d({ size: "copy-small", tenant: "lh" })};
  }
`, a$ = s`
  .lx .index {
    ${d({ size: "copy-small", tenant: "lx" })};
  }
`, r$ = s`
  .os .index {
    ${d({ size: "copy-small", tenant: "os" })};
  }
`, n$ = s`
  .sn .index {
    ${d({ size: "copy-small", tenant: "sn" })};
  }
`, s$ = s`
  .b2b .index {
    ${d({ size: "copy-small", tenant: "b2b" })};
  }
`, l$ = s`
  .four_y .index {
    ${d({ size: "copy-small", tenant: "four_y" })};
  }

  .four_y maui-label {
    --maui-label-color-override: var(--maui-color-text-caption);
  }
`, c$ = [
  o$,
  i$,
  r$,
  a$,
  n$,
  s$,
  l$
];
var d$ = Object.defineProperty, u$ = Object.getOwnPropertyDescriptor, Zo = (a, e, t, o) => {
  for (var i = o > 1 ? void 0 : o ? u$(e, t) : e, r = a.length - 1, n; r >= 0; r--)
    (n = a[r]) && (i = (o ? n(e, t, i) : n(i)) || i);
  return o && i && d$(e, t, i), i;
};
class Kt extends k {
  constructor() {
    super(), this.uniqueId = $a(), this.label = "", this.referenceID = "", this.referenceLabel = "", this.index = 0, this.componentName = "table-footnote";
  }
  connectedCallback() {
    super.connectedCallback(), this.setAttributes();
  }
  setAttributes() {
    this.getAttribute("slot") === null && this.setAttribute("slot", "footnote"), this.setAttribute("role", "note"), this.setAttribute(
      "id",
      this.referenceID ? `${this.referenceID}-reference` : `maui-table-footnote-${this.uniqueId}`
    ), this.referenceID && this.setAttribute("aria-labelledby", this.referenceID);
  }
  handleSlotChange(e) {
    const t = e.target;
    this.label = [...t.assignedNodes()].map((o) => o.textContent).join("");
  }
  handleReferenceIDChange() {
    this.setAttributes();
  }
  render() {
    return u`<div
      class=${y({
      [this.componentName]: !0,
      [this.theme]: !0,
      reference: this.referenceID && this.referenceLabel
    })}
    >
      ${this.referenceID && this.referenceLabel ? u`<maui-navigation-link
            aria-hidden="true"
            variant="custom"
            size="small"
            target="_self"
            mode="inline"
            .theme=${this.theme}
            href="#${this.referenceID}"
            >${this.referenceLabel}</maui-navigation-link
          >` : u``}
      ${this.index ? u`<span class="index">${this.index}</span>` : u``}
      <maui-label .theme=${this.theme} ?hidden=${!!this.referenceID}>
        <slot
          ?hidden=${!!this.referenceID}
          @slotchange=${this.handleSlotChange}
        ></slot
      ></maui-label>
    </div>`;
  }
}
Kt.styles = c$;
Zo([
  O()
], Kt.prototype, "label", 2);
Zo([
  M("#label-boundary")
], Kt.prototype, "labelBoundary", 2);
Zo([
  l({ type: String })
], Kt.prototype, "referenceID", 2);
Zo([
  l({ type: String })
], Kt.prototype, "referenceLabel", 2);
Zo([
  l({ type: Number })
], Kt.prototype, "index", 2);
Zo([
  F("referenceID")
], Kt.prototype, "handleReferenceIDChange", 1);
w("maui-table-footnote", Kt);
const ul = (a) => {
  const e = h(a);
  return s`
    .${e} {
      --maui-sub-navigation-grey: var(--maui-color-grey-01);
      --maui-brand-color: var(--maui-color-brand-primary);
      --maui-nav-text-weight: var(--maui-font-weight-light);
      --maui-nav-text-font-family: var(--maui-font-family-headline);
    }

    .${e} .tag {
      ${p({ size: "forms-large", tenant: a })};
    }

    .${e} .nav-text {
      ${b({ size: "h5", tenant: a }).mobile};
    }

    @media screen and (min-width: ${S.desktop["min-width"]}px) {
      .${e} .nav-text:not(.small-text) {
        ${b({ size: "h3", tenant: a }).desktop};
      }

      .${e} .small-text {
        ${b({ size: "h4", tenant: a }).desktop};
      }
    }
  `;
}, m$ = s`
  ${C}

  .sub-navigation {
    --maui-select-option-padding-override: 12px 20px;
  }

  .tabs {
    display: flex;
    position: relative;
  }

  .tablist {
    --maui-tabcontrol-scroll-overflow-fix: 20px;
    scroll-snap-type: x mandatory;
    overflow-x: auto;
    position: relative;
    padding: var(--maui-tabcontrol-scroll-overflow-fix) 0;
    margin: 0;
    scroll-padding: var(--maui-tabcontrol-scroll-overflow-fix);
  }

  .tabs-bg {
    display: flex;
    justify-content: space-between;
    --maui-sub-navigation-padding: var(--maui-padding-override, 8%);
    padding-left: var(--maui-sub-navigation-padding);
    padding-right: var(--maui-sub-navigation-padding);
    background: var(--maui-sub-navigation-grey, var(--maui-color-grey-01));
  }

  .sub-navigation:not(.ejected) nav {
    width: 100%;
    height: 64px;
  }

  .tag {
    scroll-snap-align: start;
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--maui-spacing-3);
    font-family: var(--maui-font-family-copy);

    ${p({ size: "forms-large", tenant: "wl" })};

    text-align: center;
    font-weight: 100;
    background: var(--maui-sub-navigation-grey, var(--maui-color-grey-01));
    transition: color 0.3s ease-in-out;
    color: var(--maui-sub-navigation-tab-text-color, var(--maui-color-grey-07));

    --maui-icon-color-override: var(
      --maui-sub-navigation-tab-text-color,
      var(--maui-color-grey-07)
    );
  }

  .tabspacer {
    flex-grow: 1;
    background-color: var(
      --maui-sub-navigation-grey,
      var(--maui-color-grey-01)
    );
  }

  .icon {
    pointer-events: none;
  }

  .label-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    pointer-events: none;
    white-space: nowrap;
  }

  .indicator-wrapper {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: var(--maui-tabcontrol-scroll-overflow-fix);
    z-index: 1;
  }

  .label:not(.font-weight-fix) {
    position: absolute;
    left: 50%;
    white-space: nowrap;
    transform: translateX(-50%);
    text-align: left;
  }

  .label.font-weight-fix {
    position: relative;
    white-space: nowrap;
    font-weight: var(--maui-font-weight-bold);
    opacity: 0;
  }

  .nav-wrapper {
    position: relative;
  }

  .indicator {
    position: absolute;
    pointer-events: none;
    display: block;
    height: var(--maui-sub-navigation-indicator-height, 4px);
    width: var(--maui-sub-navigation-indicator-width, 0);
    transition: left 0.15s ease-in-out, width 0.15s ease-in-out;
    background-color: var(
      --maui-sub-navigation-indicator-color,
      var(--maui-color-interaction-buttonsecondary)
    );
    left: var(--maui-sub-navigation-indicator-offset, 0);
    bottom: 0px;
  }

  .nav-text {
    font-family: var(--maui-nav-text-font-family, var(--maui-font-family-copy));
    font-weight: var(--maui-nav-text-weight, var(--maui-font-weight-regular));
    letter-spacing: 0em;
    text-align: right;
    color: var(--maui-brand-color, var(--maui-color-brand-black));
    transition: font-size 0.3s ease;

    ${b({ size: "h3", tenant: "wl" }).desktop};
  }

  .small-text {
    ${b({ size: "h4", tenant: "wl" }).desktop};

    transition: font-size 0.3s ease;
  }

  @media screen and (max-width: ${S.tablet["min-width"]}px) {
    .nav-text {
      font-weight: var(
        --maui-nav-text-responsive-font-weight,
        var(--maui-font-weight-regular)
      );
    }
    .tag {
      padding: 15px 20px 0;
    }
  }

  ${H("tab")}
`, h$ = s`
  ${ul("lh")}
`, p$ = s`
  .os {
    --maui-sub-navigation-tab-text-color: var(--maui-color-text-copy);
    --maui-sub-navigation-tab-text-color-active: var(
      --maui-color-interaction-buttonprimary
    );
    --maui-sub-navigation-grey: var(--maui-color-grey-01);
    --maui-nav-text-weight: var(--maui-font-weight-regular);
    --maui-brand-color: var(--maui-color-brand-black);
  }

  .os .tag {
    ${p({ size: "forms-large", tenant: "os" })};
  }

  .os .label-wrapper {
    text-transform: uppercase;
  }

  .os .nav-text {
    text-transform: uppercase;
    ${b({ size: "h6", tenant: "os" }).mobile};
  }

  @media screen and (min-width: ${S.desktop["min-width"]}px) {
    .os .nav-text:not(.small-text) {
      ${b({ size: "h5", tenant: "os" }).desktop};
    }

    .os .small-text {
      ${b({ size: "h6", tenant: "os" }).mobile};
    }
  }
`, g$ = s`
  .lx {
    --maui-sub-navigation-tab-text-color: var(
      --maui-color-interaction-interaction
    );
    --maui-sub-navigation-tab-text-color-active: var(--maui-color-text-copy);
    --maui-sub-navigation-grey: var(--maui-color-grey-01);
    --maui-nav-text-weight: var(--maui-font-weight-regular);
    --maui-nav-text-font-family: var(--maui-font-family-headline);
    --maui-brand-color: var(--maui-color-grey-08);
  }

  .lx .tag {
    ${p({ size: "forms-large", tenant: "lx" })};
  }

  .lx .indicator {
    --maui-sub-navigation-indicator-color: var(
      --maui-color-interaction-buttonprimary
    );
  }

  .lx .nav-text {
    text-transform: uppercase;
    ${b({ size: "h5", tenant: "lx" }).mobile};
  }

  @media screen and (min-width: ${S.desktop["min-width"]}px) {
    .lx .nav-text:not(.small-text) {
      ${b({ size: "h4", tenant: "lx" }).desktop};
    }

    .lx .small-text {
      ${b({ size: "h5", tenant: "lx" }).desktop};
    }
  }
`, b$ = s`
  .sn {
    --maui-sub-navigation-tab-text-color: var(
      --maui-color-interaction-buttonsecondary
    );
    --maui-sub-navigation-tab-text-color-active: var(
      --maui-color-interaction-buttonsecondary
    );
    --maui-sub-navigation-grey: var(--maui-color-grey-01);
    --maui-nav-text-weight: var(--maui-font-weight-regular);
    --maui-brand-color: var(--maui-color-grey-08);
  }

  .sn .tag {
    ${p({ size: "forms-large", tenant: "sn" })};
  }

  .sn .indicator {
    --maui-sub-navigation-indicator-color: var(
      --maui-color-interaction-buttonprimary
    );
  }

  .sn .nav-text {
    text-transform: uppercase;
    ${b({ size: "h5", tenant: "sn" }).mobile};
  }

  @media screen and (min-width: ${S.desktop["min-width"]}px) {
    .sn .nav-text:not(.small-text) {
      ${b({ size: "h4", tenant: "sn" }).desktop};
    }

    .sn .small-text {
      ${b({ size: "h5", tenant: "sn" }).desktop};
    }
  }
`, v$ = s`
  ${ul("b2b")}
  .b2b {
    --maui-sub-navigation-tab-text-color-active: var(
      --maui-color-interaction-buttonprimary
    );
    --maui-sub-navigation-indicator-color: var(
      --maui-color-interaction-buttonprimary
    );
    --maui-nav-text-weight: var(--maui-font-weight-thin);
    --maui-nav-text-responsive-font-weight: var(--maui-font-weight-bold);
    --maui-select-option-font-weight-bold: var(--maui-font-weight-bold);
  }
`, f$ = s`
  .four_y {
    --maui-sub-navigation-tab-text-color: var(
      --maui-color-interaction-buttonsecondary
    );
    --maui-sub-navigation-tab-text-color-active: var(
      --maui-color-interaction-buttonsecondary
    );
    --maui-sub-navigation-grey: var(--maui-color-grey-01);
    --maui-nav-text-weight: var(--maui-font-weight-regular);
    --maui-brand-color: var(--maui-color-brand-black);
    --maui-sub-navigation-tab-padding: 20px;
  }

  .four_y .tag {
    --maui-focus-outline-offset: 3px;
    ${p({ size: "forms-large", tenant: "four_y" })};
  }

  .four_y .nav-text {
    ${b({ size: "h6", tenant: "four_y" }).mobile};
    font-family: var(--maui-font-family-headline);
    font-weight: var(--maui-font-weight-light);
    color: var(--maui-color-text-headline);
  }

  .four_y .indicator-wrapper {
    bottom: var(--maui-tabcontrol-scroll-overflow-fix);
  }

  @media screen and (min-width: ${S.desktop["min-width"]}px) {
    .four_y .nav-text:not(.small-text) {
      ${b({ size: "h5", tenant: "four_y" }).desktop};
      font-weight: var(--maui-font-weight-light);
    }

    .four_y .small-text {
      ${b({ size: "h6", tenant: "four_y" }).mobile};
      font-weight: var(--maui-font-weight-light);
    }
  }
`, y$ = [
  m$,
  h$,
  p$,
  g$,
  b$,
  v$,
  f$
], ml = (a) => {
  const e = h(a);
  return s`
    .${e} {
      --maui-brand-color: var(--maui-color-brand-primary);
      --maui-select-button-color-value: var(--maui-color-brand-primary);
      --maui-select-button-border-bottom-disabled: 2px solid
        var(--maui-color-disabled-foreground);
      --maui-select-button-border-bottom: none;
      --maui-select-button-padding: 6px 5px 6px 0;
      --maui-select-trigger-label-padding-focus: 0 0 0 10px;
      --maui-select-dropdown-padding: 10px 0;
      --maui-select-dropdown-margin: 10px 0 0 0;
      --maui-select-dropdown-shadow: 0px 0px 4px rgba(0, 0, 0, 0.3);
      --maui-select-button-shadow-error: 0px 0px 6px
        var(--maui-color-message-error);
      --maui-select-error-box-margin: 6px 0 0 0;
      --maui-select-hint-box-margin: 8px 0 0 0;
      --maui-select-dropdown-background-color: var(--maui-color-grey-01);
      --maui-select-clear-icon-right: 34px;
      --maui-focus-outline-offset: 0px;
      --maui-focus-radius: 0;
      --maui-border-grey: var(--maui-color-grey-02);
      --maui-select-button-background: var(--maui-color-grey-01);
    }

    .${e} .label {
      font-weight: var(--maui-font-weight-regular);

      ${p({ size: "forms-large", tenant: a })};
    }

    .${e} .trigger-label {
      ${p({ size: "forms-large", tenant: a })};

      font-weight: var(--maui-font-weight-regular);
      height: var(--maui-line-height-3);
      color: var(--maui-color-status-member);
    }
    .${e}.has-value:not(.has-focus, .has-error) {
      --maui-icon-color-override: var(--maui-select-button-color-value);
    }
    .${e}.has-focus:not(.has-error) {
      --maui-icon-color-override: var(--maui-color-interaction-interaction);
    }
    .${e}.has-error .trigger {
      --maui-select-button-color: var(--maui-color-message-error);
    }
  `;
}, x$ = s`
  ${C}

  .select {
    position: relative;
    font-family: var(--maui-font-family-copy);
  }

  .trigger {
    font-family: var(--maui-font-family-copy);
    position: relative;
    cursor: pointer;
    border: var(--maui-select-button-border); /* LX, SN */
    background-color: var(--maui-color-brand-white);
    color: var(--maui-select-button-color, var(--maui-color-grey-07));
    padding: var(--maui-select-button-padding);
    width: 100%;
    height: var(--maui-select-button-height, auto);
    text-align: left;
    display: flex;
    justify-content: space-between;
    transition: 0.15s all ease;
    align-items: center;
    background-color: var(--maui-select-button-background);
  }

  .trigger-label {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  button:focus-visible {
    outline: none;
  }

  .dropdown-list {
    position: absolute;
    width: 100%;
    margin: 0;
    background-color: var(
      --maui-select-dropdown-background-color,
      var(--maui-color-grey-01)
    );
    list-style: none;
    padding: 0;
    z-index: 100;
  }

  .dropdown-list.scrolling {
    max-height: var(--maui-option-list-max-height, 300px);
    overflow-y: auto;
  }

  .trigger {
    background-color: var(
      --maui-select-dropdown-background-color,
      var(--maui-color-grey-01)
    );
    padding: 12px 20px;
    border-bottom: 1px solid var(--maui-border-grey, var(--maui-color-grey-02));
  }

  .icon-expand {
    transform: rotate(-180deg);
    transition: transform 0.25s linear;
  }

  .is-open .icon-expand {
    transform: rotate(0);
  }

  ${H("select", "has-focus", "trigger")}

  .has-error {
    --maui-icon-color-override: var(--maui-color-message-error);
  }
  .has-error .trigger-label {
    color: var(--maui-color-message-error);
  }

  .has-error .trigger {
    border: var(--maui-select-button-border-error);
  }

  .has-error.has-focus .trigger {
    box-shadow: var(--maui-select-button-shadow-error);
  }

  .wrapper {
    position: relative;
  }
  .overlay {
    position: absolute;
    right: var(--maui-select-clear-icon-right, 34px);
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    color: var(--maui-select-optional-color, var(--maui-color-grey-07));
  }
`, $$ = s`
  ${ml("lh")}
`, w$ = s`
  .os {
    --maui-select-button-background: var(--maui-color-grey-01);
    --maui-select-button-height: 50px;
    --maui-select-button-padding: 0 12px;
    // --maui-select-trigger-label-padding-focus: 22px 0 5px 0px;
    --maui-select-dropdown-padding: 0;
    --maui-select-dropdown-margin: 10px 0 0 0;
    --maui-select-dropdown-shadow: 0px 2px 4px rgba(57, 69, 81, 0.2);
    --maui-select-error-box-margin: 6px 0 0 0;
    --maui-select-hint-box-margin: 6px 0 0 0;
    --maui-select-dropdown-background-color: var(--maui-color-grey-01);
    --maui-select-clear-icon-right: 42px;
    --maui-border-grey: var(--maui-color-grey-03);
  }

  .os li {
    padding: 20px !important;
    font-weight: 300 !important;
  }

  .os .label {
    pointer-events: none;
    position: absolute;
    z-index: 2;
    left: 12px;
    top: 6px;
    opacity: 0;
    --maui-label-color-override: var(--maui-color-grey-07);
  }

  .os .label {
    ${p({ size: "forms-large", tenant: "os" })};
  }

  .os .trigger-label {
    ${p({ size: "forms-large", tenant: "os" })};
    font-weight: var(--maui-font-weight-regular);
    color: var(--maui-color-brand-black);
  }

  .os.has-value .trigger-label {
    padding: var(--maui-select-trigger-label-padding-focus);
  }
  .os.has-value .label,
  .os.has-focus .label {
    opacity: 1;
  }

  /* Needs to specifically be removed. */
  .os #infinity-loading-anchor {
    display: none;
  }
`, _$ = s`
  .lx {
    --maui-select-button-color: var(--maui-color-interaction-interaction);
    --maui-select-button-border-error: 1px solid var(--maui-color-message-error);
    --maui-select-button-border-disabled: 1px solid
      var(--maui-color-disabled-foreground);
    --maui-select-button-padding: 0px 12px;
    --maui-select-dropdown-padding: 10px 0;
    --maui-select-dropdown-margin: 10px 0 0 0;
    --maui-select-dropdown-border: var(--maui-select-button-border);
    --maui-select-error-box-margin: 6px 0 0 0;
    --maui-select-hint-box-margin: 8px 0 0 0;
    --maui-select-dropdown-background-color: var(--maui-color-grey-01);
    --maui-select-button-height: 50px;
    --maui-select-clear-icon-right: 41px;
    --maui-border-grey: var(--maui-color-grey-02);
    --maui-icon-color-override: var(--maui-color-interaction-interaction);
    --maui-select-button-background: var(--maui-color-grey-01);
  }

  .lx .label {
    pointer-events: none;
    position: absolute;
    z-index: 2;
    left: 12px;
    top: 7px;
    opacity: 0;
    color: var(--maui-color-interaction-interaction);
  }

  .lx .label {
    ${p({ size: "forms-large", tenant: "lx" })};
  }

  .lx .trigger-label {
    font-weight: var(--maui-font-weight-bold);
    color: var(--maui-color-grey-08);
    ${p({ size: "forms-large", tenant: "lx" })};
  }

  .lx.has-value .trigger-label {
    padding: var(--maui-select-trigger-label-padding-focus);
  }
  .lx.has-value .label,
  .lx.has-focus .label {
    opacity: 1;
  }
  .lx.has-error:not(.disabled) .trigger-label {
    color: var(--maui-select-button-color);
  }
`, k$ = s`
  .sn {
    --maui-select-button-border-error: 1px solid var(--maui-color-message-error);
    --maui-select-button-border-disabled: 1px solid
      var(--maui-color-disabled-foreground);
    --maui-select-button-padding: 13px 10px;
    --maui-select-dropdown-padding: 10px 0;
    --maui-select-dropdown-margin: 10px 0 0 0;
    --maui-select-dropdown-border: 1px solid var(--maui-color-grey-04);
    --maui-select-error-box-margin: 5px 0 0 0;
    --maui-select-hint-box-margin: 7px 0 0 0;
    --maui-select-dropdown-background-color: var(--maui-color-grey-01);
    --maui-select-button-height: 50px;
    --maui-select-clear-icon-right: 39px;
    --maui-focus-outline-offset: 5px;
    --maui-focus-radius: 0px;
    --maui-border-grey: var(--maui-color-grey-03);
    --maui-icon-color-override: var(--maui-color-interaction-buttonsecondary);
    --maui-select-button-background: var(--maui-color-grey-01);
  }

  .sn .label {
    pointer-events: none;
    position: absolute;
    z-index: 2;
    left: 10px;
    top: 6px;
    opacity: 0;
    color: var(--maui-color-text-caption);
  }

  .sn .label {
    ${p({ size: "forms-large", tenant: "sn" })};
  }

  .sn .trigger-label {
    ${p({ size: "forms-large", tenant: "sn" })};
    font-weight: var(--maui-font-weight-bold);
    color: var(--maui-color-grey-08);
  }

  .sn.has-value .trigger-label {
    padding: var(--maui-select-trigger-label-padding-focus);
  }
  .sn.has-value .label,
  .sn.has-focus .label {
    opacity: 1;
  }
`, S$ = s`
  ${ml("b2b")}
`, O$ = s`
  .four_y {
    --maui-select-button-background: var(--maui-color-grey-01);
    --maui-select-button-height: 50px;
    --maui-select-button-padding: 0 12px;
    // --maui-select-trigger-label-padding-focus: 22px 0 5px 0px;
    --maui-select-dropdown-padding: 0;
    --maui-select-dropdown-margin: 10px 0 0 0;
    --maui-select-dropdown-shadow: 0px 2px 4px rgba(57, 69, 81, 0.2);
    --maui-select-error-box-margin: 6px 0 0 0;
    --maui-select-hint-box-margin: 6px 0 0 0;
    --maui-select-dropdown-background-color: var(--maui-color-grey-01);
    --maui-select-clear-icon-right: 42px;
    --maui-border-grey: transparent;
  }

  .four_y li {
    padding: 20px !important;
    font-weight: 300 !important;
  }

  .four_y .label {
    pointer-events: none;
    position: absolute;
    z-index: 2;
    left: 12px;
    top: 6px;
    opacity: 0;
    --maui-label-color-override: var(--maui-color-interaction-interaction);
  }

  .four_y .label {
    ${p({ size: "forms-large", tenant: "four_y" })};
  }

  .four_y .trigger-label {
    ${p({ size: "forms-large", tenant: "four_y" })};
    font-weight: var(--maui-font-weight-regular);
    color: var(--maui-color-interaction-interaction);
  }

  .four_y maui-icon {
    --maui-icon-color-override: var(--maui-color-interaction-interaction);
  }

  .four_y .trigger:hover .trigger-label {
    color: var(--maui-color-interaction-interactionhover);
  }
  .four_y .trigger:hover maui-icon {
    --maui-icon-color-override: var(--maui-color-interaction-interactionhover);
  }

  .four_y.has-value .trigger-label {
    padding: var(--maui-select-trigger-label-padding-focus);
  }
  .four_y.has-value .label,
  .four_y.has-focus .label {
    opacity: 1;
  }

  /* Needs to specifically be removed. */
  .four_y #infinity-loading-anchor {
    display: none;
  }
`, M$ = [
  x$,
  $$,
  w$,
  _$,
  k$,
  S$,
  O$
];
class hl extends V {
  constructor() {
    super("select responsive-select");
  }
  renderExpandIcon() {
    return u` <maui-icon
      .theme=${this.theme}
      aria-hidden="true"
      size="medium"
      class="icon-expand"
      use="icon-collapse"
    ></maui-icon>`;
  }
  setAriaLabelFromExternalLabel() {
    return this.buttonTriggerLabel;
  }
}
hl.styles = M$;
w("maui-responsive-select", hl);
var L$ = Object.defineProperty, B$ = Object.getOwnPropertyDescriptor, Fe = (a, e, t, o) => {
  for (var i = o > 1 ? void 0 : o ? B$(e, t) : e, r = a.length - 1, n; r >= 0; r--)
    (n = a[r]) && (i = (o ? n(e, t, i) : n(i)) || i);
  return o && i && L$(e, t, i), i;
};
class $e extends k {
  constructor() {
    super(), this.desktopUp = new Es(this, "desktop"), this.slottedItems = [], this.indicatorWidth = 0, this.indicatorOffset = 0, this.activeIndex = 0, this.initiallyActive = this.activeIndex || 0, this.navText = "", this.isNavTextSmaller = !1, this.label = "", this.ariaLabel = "secondary", this.testAllowedAssignments = (e) => {
      e.target.assignedNodes().forEach((o) => {
        if (o.nodeName !== "MAUI-SUB-NAVIGATION-TAB") {
          o.parentNode.removeChild(o);
          return;
        }
        const i = o;
        this.slottedItems.includes(i) || this.slottedItems.push(i), this.activePanel && i !== this.activePanel && (i.active = !1), (i.active || this.activeIndex === this.slottedItems.indexOf(i)) && (this.activePanel = i, i.active = !0);
      });
    }, this.componentName = "sub-navigation";
  }
  handleTabChange() {
    setTimeout(() => {
      this.updateIndicator(this.activePanel);
    }, 50);
  }
  handleActiveChange() {
    this.setActivePanel(this.activeIndex || this.initiallyActive);
  }
  updated(e) {
    this.navTextElement && e.has("isNavTextSmaller") && (this.isNavTextSmaller ? this.navTextElement.classList.add("small-text") : this.navTextElement.classList.remove("small-text"));
  }
  connectedCallback() {
    super.connectedCallback(), this.initiallyActive && bu("subnavigation", "initiallyActive", "activeIndex"), this.resizeObserver = new ResizeObserver(() => {
      this.updateIndicator(this.activePanel);
    }), this.resizeObserver.observe(document.body);
  }
  disconnectedCallback() {
    this.resizeObserver.unobserve(this.nav);
  }
  setActivePanel(e) {
    const t = this.slottedItems.find((o) => o.active);
    t && (t.active = !1), this.slottedItems.length !== 0 && (e < 0 || e >= this.slottedItems.length || (this.activePanel = this.slottedItems[e], this.slottedItems[e].active = !0));
  }
  updateIndicator(e) {
    this.desktopUp.matchesQuery && (this.indicatorWidth = e.clientWidth, this.indicatorOffset = e.offsetLeft - this.nav.offsetLeft);
  }
  handleClick(e) {
    e.preventDefault(), e.stopPropagation(), this.querySelector("maui-sub-navigation-tab[active]")?.removeAttribute(
      "active"
    ), e.target.setAttribute("active", ""), this.activeIndex = this.slottedItems.indexOf(
      e.target
    ), this.activePanel = e.target;
  }
  handleChange(e) {
    e.preventDefault();
    const { detail: t } = e;
    this.activePanel = this.slottedItems.find(
      (o) => o.name === t.label
    ) ?? this.activePanel, this.slottedItems.indexOf(this.activePanel) !== this.activeIndex && setTimeout(() => this.activePanel.click(), 0);
  }
  render() {
    const e = u`
      <div
        class=${y({
      tag: !0,
      "nav-text": !0
    })}
      >
        ${this.navText}
      </div>
    `;
    return u`<nav
      id="header"
      aria-busy=${this.activePanel ? "false" : "true"}
      aria-label=${this.ariaLabel}
      class=${y({
      [this.componentName]: !0,
      [this.theme]: !0
    })}
      @maui-click=${this.handleClick}
      @maui-hover=${(t) => this.updateIndicator(t.target)}
      @maui-mouseleave=${() => this.updateIndicator(this.activePanel)}
    >
      ${this.desktopUp.matchesQuery ? u` <div class="nav-wrapper">
            <div class="tablist">
              <div
                class=${y({
      "tabs-bg": !0
    })}
              >
                <div class="tabs">
                  <slot @slotchange=${this.testAllowedAssignments}></slot>
                </div>
                <div class="indicator-wrapper">
                  <span
                    class="indicator"
                    style=${At({
      "--maui-sub-navigation-indicator-offset": `${this.indicatorOffset}px`,
      "--maui-sub-navigation-indicator-width": `${this.indicatorWidth}px`
    })}
                  ></span>
                </div>
                ${this.navText && e}
              </div>
            </div>
          </div>` : u`
            ${this.navText && e}
            <maui-responsive-select
              .theme=${this.theme}
              id="${U(this.id)}"
              buttonTriggerLabel=${this.label}
              @maui-change=${this.handleChange}
            >
              ${this.slottedItems.map((t, o) => {
      const { id: i } = t;
      return u`<maui-option
                    .theme=${this.theme}
                    ?selected=${o === this.activeIndex}
                    optionValue=${o}
                    aria-label=${U(
        i ? Qi(
          `#${i}`,
          this,
          !0
        )?.getAttribute("label") : void 0
      )}
                    >${t.name}</maui-option
                  ></div>`;
    })}
            </maui-responsive-select>
            <slot
              @slotchange=${this.testAllowedAssignments}
              style="display: none"
            ></slot>
          `}
    </nav>`;
  }
}
$e.styles = y$;
Fe([
  M("nav")
], $e.prototype, "nav", 2);
Fe([
  M(".nav-text")
], $e.prototype, "navTextElement", 2);
Fe([
  O()
], $e.prototype, "activePanel", 2);
Fe([
  O()
], $e.prototype, "indicatorWidth", 2);
Fe([
  O()
], $e.prototype, "indicatorOffset", 2);
Fe([
  l({ type: Number, reflect: !0 })
], $e.prototype, "activeIndex", 2);
Fe([
  l({ type: Number })
], $e.prototype, "initiallyActive", 2);
Fe([
  l({ type: String })
], $e.prototype, "navText", 2);
Fe([
  l({ type: Boolean })
], $e.prototype, "isNavTextSmaller", 2);
Fe([
  l({ type: String })
], $e.prototype, "label", 2);
Fe([
  l({ type: String })
], $e.prototype, "ariaLabel", 2);
Fe([
  F(["activePanel", "theme"])
], $e.prototype, "handleTabChange", 1);
Fe([
  F(["initiallyActive", "activeIndex"])
], $e.prototype, "handleActiveChange", 1);
w("maui-sub-navigation", $e);
const pl = (a) => {
  const e = h(a);
  return s`
    .${e} {
      --maui-brand-color: var(--maui-color-brand-primary);
    }

    .${e} .tab {
      ${p({ size: "forms-large", tenant: a })};
    }
  `;
}, C$ = s`
  ${C}

  .tabs {
    display: flex;
  }

  .label-wrapper.has-icon {
    position: relative;
  }

  .tab:not([active]) {
    cursor: pointer;
  }

  .tab {
    padding: var(--maui-sub-navigation-tab-padding, var(--maui-spacing-4));
  }

  .tab {
    scroll-snap-align: start;
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--maui-spacing-3);
    font-family: var(--maui-font-family-copy);

    ${b({ size: "h4", tenant: "wl" }).desktop};

    text-align: center;
    font-weight: 100;
    transition: color 0.3s ease-in-out;
    color: var(--maui-sub-navigation-tab-text-color, var(--maui-color-grey-07));

    --maui-icon-color-override: var(
      --maui-sub-navigation-tab-text-color,
      var(--maui-color-grey-07)
    );
  }

  .tab[active] {
    font-weight: var(--maui-font-weight-bold);
    color: var(
      --maui-sub-navigation-tab-text-color-active,
      var(--maui-color-interaction-buttonsecondary)
    );

    --maui-icon-color-override: var(
      --maui-sub-navigation-tab-text-color-active,
      var(--maui-color-interaction-buttonsecondary)
    );
  }

  .label:not(.font-weight-fix) {
    position: absolute;
    left: 50%;
    white-space: nowrap;
    transform: translateX(-50%);
    text-align: left;
  }

  .label.font-weight-fix {
    position: relative;
    white-space: nowrap;
    font-weight: var(--maui-font-weight-bold);
    opacity: 0;
  }

  ${H("tab")}
`, z$ = s`
  ${pl("lh")}
`, A$ = s`
  .os {
    --maui-sub-navigation-tab-text-color: var(--maui-color-text-copy);
    --maui-sub-navigation-tab-text-color-active: var(
      --maui-color-interaction-buttonprimary
    );
    --maui-brand-color: var(--maui-color-brand-black);
    font-weight: var(--maui-font-weight-bold);
  }

  .os.tab {
    ${p({ size: "forms-large", tenant: "os" })};
  }

  .os .label-wrapper {
    text-transform: uppercase;
  }
`, F$ = s`
  .lx {
    --maui-sub-navigation-tab-text-color: var(
      --maui-color-interaction-interaction
    );
    --maui-sub-navigation-tab-text-color-active: var(--maui-color-text-copy);
    --maui-brand-color: var(--maui-color-grey-08);
  }

  .lx.tab {
    ${p({ size: "forms-large", tenant: "lx" })};
  }
`, N$ = s`
  .sn {
    --maui-sub-navigation-tab-text-color: var(
      --maui-color-interaction-buttonsecondary
    );
    --maui-sub-navigation-tab-text-color-active: var(
      --maui-color-interaction-buttonsecondary
    );
    --maui-brand-color: var(--maui-color-grey-08);
  }

  .sn.tab {
    ${p({ size: "forms-large", tenant: "sn" })};
  }

  .sn.tab {
    --maui-focus-radius: 0;
  }
`, I$ = s`
  ${pl("b2b")}
  .b2b {
    --maui-sub-navigation-tab-text-color-active: var(
      --maui-color-interaction-buttonprimary
    );
    --maui-sub-navigation-indicator-color: var(
      --maui-color-interaction-buttonprimary
    );
    --maui-nav-text-responsive-font-weight: var(--maui-font-weight-bold);
    --maui-select-option-font-weight-bold: var(--maui-font-weight-bold);
  }
`, U$ = s`
  .four_y {
    --maui-sub-navigation-tab-text-color: var(
      --maui-color-interaction-buttonsecondary
    );
    --maui-sub-navigation-tab-text-color-active: var(
      --maui-color-interaction-buttonsecondary
    );
    --maui-brand-color: var(--maui-color-brand-black);
    --maui-sub-navigation-tab-padding: 20px;
  }

  .four_y.tab {
    --maui-focus-outline-offset: 3px;
    ${p({ size: "forms-large", tenant: "four_y" })};
  }

  .four_y.tab:hover {
    color: var(--maui-color-interaction-interactionhover);
    --maui-icon-color-override: var(--maui-color-interaction-interactionhover);
  }
`, R$ = [
  C$,
  z$,
  A$,
  F$,
  N$,
  I$,
  U$
];
var D$ = Object.defineProperty, E$ = Object.getOwnPropertyDescriptor, Ei = (a, e, t, o) => {
  for (var i = o > 1 ? void 0 : o ? E$(e, t) : e, r = a.length - 1, n; r >= 0; r--)
    (n = a[r]) && (i = (o ? n(e, t, i) : n(i)) || i);
  return o && i && D$(e, t, i), i;
};
class ko extends wt {
  constructor() {
    super(), this.hasSlotController = new be(
      this,
      "icon"
    ), this.name = "Tab", this.testAllowedAssignments = (e) => {
      e.target.assignedNodes().forEach((o) => {
        o.nodeName !== "MAUI-ICON" && o.parentNode.removeChild(o);
      });
    }, this.componentName = "maui-sub-navigation-tab";
  }
  connectedCallback() {
    super.connectedCallback();
  }
  firstUpdated() {
    super.firstUpdated();
  }
  hasSlottedIcon() {
    return this.hasSlotController.test("icon");
  }
  handleMouseEnter() {
    this.emit("maui-hover", {
      detail: { name: this.name }
    });
  }
  emitInteraction() {
    this.scrollIntoView(), this.emit("maui-click", {
      detail: { name: this.name }
    });
  }
  handleClick() {
    this.emitInteraction();
  }
  handleKeyDown(e) {
    ["Enter", " "].includes(e.key) && (this.emitInteraction(), this.tab.click());
  }
  getFocusState() {
    return this.hasFocus;
  }
  handleFocus() {
    this.hasFocus || (super.handleFocus(), this.tab.focus());
  }
  handleBlur() {
    this.hasFocus && (super.handleBlur(), this.tab.blur());
  }
  focus() {
    this.handleFocus();
  }
  blur() {
    this.handleBlur();
  }
  click() {
    this.handleClick(), this.tab.click();
  }
  render() {
    return u`<a
      .theme=${this.theme}
      href=${U(this.href)}
      class=${y({
      tab: !0,
      [this.theme]: !0
    })}
      id=${`maui-sub-navigation-tab-${this.id}`}
      ?active=${this.active}
      tabindex="0"
      aria-disabled="false"
      aria-label=${this.label ?? this.name}
      target="_self"
      @click=${this.handleClick}
      @blur=${this.handleBlur}
      @focus=${this.handleFocus}
      @keydown=${this.handleKeyDown}
      @mouseenter=${this.handleMouseEnter}
      @mouseleave=${() => this.emit("maui-mouseleave")}
    >
      <slot name="icon" @slotchange=${this.testAllowedAssignments}></slot>
      <div
        class=${y({
      "label-wrapper": !0,
      "has-icon": !!this.hasSlottedIcon()
    })}
      >
        <div class="label">${this.name ?? ""}</div>
        <div class="label font-weight-fix" aria-hidden="true">
          ${this.name ?? ""}
        </div>
      </div>
    </a> `;
  }
}
ko.styles = R$;
Ei([
  M(".tab")
], ko.prototype, "tab", 2);
Ei([
  l({ type: String, reflect: !0 })
], ko.prototype, "name", 2);
Ei([
  l({ type: String, reflect: !0 })
], ko.prototype, "href", 2);
Ei([
  l({ type: Boolean, reflect: !0 })
], ko.prototype, "active", 2);
Ei([
  l({ type: String, reflect: !0 })
], ko.prototype, "label", 2);
w("maui-sub-navigation-tab", ko);
const gl = (a) => {
  const e = h(a);
  return s`
    .${e} {
      --maui-card-border-radius: 3px;
      --maui-card-box-shadow: 0 0 4px var(--maui-color-brand-black-transparent);
      --maui-card-box-shadow-hover: 0 0 16px
        var(--maui-color-brand-black-transparent);
    }
  `;
}, P$ = s`
  ${C}

  ${A}

  .card {
    position: relative;
    font-family: var(--maui-font-family-copy);
    color: var(--maui-color-text-copy);
    display: inline-flex;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
  }

  .card.full-width,
  .full-width .content {
    width: 100%;
  }
  .card.full-height,
  .full-height .content {
    height: 100%;
  }

  .card:focus {
    outline: none;
  }

  .hover .content {
    box-shadow: var(--maui-card-box-shadow-hover);
  }

  ${H("card")}

  .content {
    box-shadow: var(--maui-card-box-shadow);
    border-radius: var(--maui-card-border-radius);
    overflow: hidden;
    transition: box-shadow 0.3s ease-in-out;

    display: inline-block;
    width: auto;
    height: auto;
  }

  .close {
    position: absolute;
    top: var(--maui-spacing-3);
    right: var(--maui-spacing-3);
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    pointer-events: all;
    z-index: 1;
  }
`, H$ = s`
  ${gl("lh")}
`, G$ = s`
  .os {
    --maui-card-border-radius: 0;
    --maui-card-box-shadow: 0 2px 4px
      var(--maui-color-brand-osgrey8-transparent);
    --maui-card-box-shadow-hover: 0 4px 12px
      var(--maui-color-brand-osgrey8-transparent);
  }
`, Y$ = s`
  .lx {
    --maui-card-border-radius: 0;
    --maui-card-box-shadow: 0 0 0 #0000;
    --maui-card-box-shadow-hover: 0 0 16px
      var(--maui-color-brand-black-transparent);
  }

  .lx .content {
    border: 1px solid var(--maui-color-grey-02);
  }
`, T$ = s`
  .sn {
    --maui-card-border-radius: 0;
    --maui-card-box-shadow: 0 0 0 #0000;
    --maui-card-box-shadow-hover: 0 2px 12px
      var(--maui-color-brand-sn-blue-4-transparent);
  }

  .sn .content {
    border: 1px solid var(--maui-color-grey-04);
  }
`, X$ = s`
  ${gl("b2b")}
`, V$ = s`
  .four_y {
    --maui-card-border-radius: var(--maui-radii-radius-4);
    --maui-focus-radius: calc(
      var(--maui-radii-radius-4) + var(--maui-radii-focus-offset)
    );
    --maui-card-box-shadow: var(--maui-effect-elevation-2);
    --maui-card-box-shadow-hover: var(--maui-effect-elevation-3);
  }
`, j$ = s`
  .mmg {
    --maui-card-border-radius: calc(var(--maui-radii-default-radius));
    --maui-card-box-shadow: 0 var(--maui-spacing-0) var(--maui-spacing-2)
      var(--maui-color-brand-mmg-elevation-1);
    --maui-card-box-shadow-hover: 0 var(--maui-spacing-1) var(--maui-spacing-3)
      var(--maui-spacing-1) var(--maui-color-brand-mmg-elevation-1);
  }

  .mmg.card:focus {
    --maui-card-box-shadow-hover: 0 0 var(--maui-spacing-1) 0
      var(--maui-color-brand-mmg-elevation-3);
  }

  .mmg.card:hover {
    --maui-card-box-shadow-hover: 0 var(--maui-spacing-1) var(--maui-spacing-3)
      var(--maui-spacing-1) var(--maui-color-brand-mmg-elevation-3);
  }

  .mmg.card .close {
    top: var(--maui-spacing-2);
    right: var(--maui-spacing-2);
  }
`, q$ = [
  P$,
  H$,
  G$,
  Y$,
  T$,
  X$,
  V$,
  j$
];
var K$ = Object.defineProperty, W$ = Object.getOwnPropertyDescriptor, bt = (a, e, t, o) => {
  for (var i = o > 1 ? void 0 : o ? W$(e, t) : e, r = a.length - 1, n; r >= 0; r--)
    (n = a[r]) && (i = (o ? n(e, t, i) : n(i)) || i);
  return o && i && K$(e, t, i), i;
};
class He extends k {
  constructor() {
    super(), this.dismissable = !1, this.customClose = !1, this.interactive = !1, this.assistiveClose = "close", this.width = "auto", this.height = "auto", this.invertClose = !1, this.isHovered = !1, this.componentName = "card";
  }
  /**
   * Requesting dismissal of the card. This can be triggered from the outside via the `close()` method. Dismissal is only possible if the `dismissal` prop is set `true`.
   */
  handleRequestClose(e) {
    e?.stopPropagation(), this.dismissable && (e?.defaultPrevented || this.handleClose());
  }
  /** This will request the card to close. */
  close(e) {
    this.handleRequestClose(e);
  }
  /** Initiating the closing of the component. */
  handleClose() {
    this.emit("maui-close"), this.emit("maui-after-close");
  }
  /** Will focus the card. (Requires `interactive` to be `true`) */
  focus(e) {
    this.interactive && this.card.focus(e);
  }
  /** Removes focus from the card. (Requires `interactive` to be `true`) */
  blur() {
    this.interactive && this.card.blur();
  }
  handleBlur() {
    this.interactive && this.emit("maui-blur");
  }
  handleFocus() {
    this.interactive && this.emit("maui-focus");
  }
  handleMouseEnter() {
    this.interactive && (this.isHovered = !0);
  }
  handleMouseLeave() {
    this.isHovered = !1;
  }
  handleCardClick(e) {
    !this.interactive || this.emit("maui-click", {
      detail: e,
      cancelable: !0
    }).defaultPrevented || this.card.focus();
  }
  handleKeyDown(e) {
    !this.interactive || !["Enter", " "].includes(e.key) || this.emit("maui-key-down", {
      detail: e,
      cancelable: !0
    }).defaultPrevented;
  }
  render() {
    return u`
      <div
        tabindex=${this.interactive ? "0" : "-1"}
        @mouseenter=${this.handleMouseEnter}
        @mouseleave=${this.handleMouseLeave}
        @blur=${this.handleBlur}
        @focus=${this.handleFocus}
        @click=${this.handleCardClick}
        @keydown=${this.handleKeyDown}
        class=${y({
      [this.theme]: !0,
      [this.componentName]: !0,
      [`${this.width}-width`]: !0,
      [`${this.height}-height`]: !0,
      hover: this.isHovered
    })}
      >
        ${this.dismissable && !this.customClose ? u`<maui-icon-link
              role="link"
              @click=${this.handleRequestClose}
              aria-label=${this.assistiveClose}
              class="close"
              variant="close"
              size="large"
              ?inverted=${this.invertClose}
              .theme=${this.theme}
            ></maui-icon-link>` : ""}
        <div
          class=${y({
      content: !0
    })}
        >
          <slot @maui-request-close=${this.handleRequestClose}></slot>
        </div>
      </div>
    `;
  }
}
He.styles = q$;
bt([
  l({ type: Boolean })
], He.prototype, "dismissable", 2);
bt([
  l({ type: Boolean })
], He.prototype, "customClose", 2);
bt([
  l({ type: Boolean })
], He.prototype, "interactive", 2);
bt([
  l({ type: String })
], He.prototype, "assistiveClose", 2);
bt([
  l({ type: String, reflect: !0 })
], He.prototype, "width", 2);
bt([
  l({ type: String, reflect: !0 })
], He.prototype, "height", 2);
bt([
  l({ type: Boolean })
], He.prototype, "invertClose", 2);
bt([
  O()
], He.prototype, "isHovered", 2);
bt([
  M(".card")
], He.prototype, "card", 2);
bt([
  M("slot")
], He.prototype, "defaultSlot", 2);
w("maui-card", He);
class Z$ extends k {
  render() {
    return u`<div class="custom-component"><slot></slot></div>`;
  }
}
w("maui-custom-component", Z$);
const Q$ = s`
  .form-row {
    display: grid;
    grid-auto-columns: 100%;
    grid-template-areas: 'columnOne';
    column-gap: var(--maui-spacing-4);
    row-gap: var(--maui-spacing-4);
    width: 100%;
  }

  @media screen and (min-width: ${S["mini-tablet"]["min-width"]}px) {
    .form-row {
      grid-auto-columns: minmax(auto, var(--maui-form-column-width));
    }

    .form-row.columns-2,
    .form-row.columns-3 {
      grid-template-areas: 'columnOne columnTwo';
    }
  }

  @media screen and (min-width: ${S["desktop-large"]["min-width"]}px) {
    .form-row.columns-2 {
      grid-template-areas: 'columnOne columnTwo';
    }

    .form-row.columns-3 {
      grid-template-areas: 'columnOne columnTwo columnThree';
    }
  }
`, J$ = s`
  .os {
    --maui-form-column-width: 300px;
  }
`, ew = [Q$, J$];
var tw = Object.defineProperty, ow = Object.getOwnPropertyDescriptor, iw = (a, e, t, o) => {
  for (var i = o > 1 ? void 0 : o ? ow(e, t) : e, r = a.length - 1, n; r >= 0; r--)
    (n = a[r]) && (i = (o ? n(e, t, i) : n(i)) || i);
  return o && i && tw(e, t, i), i;
};
const za = class or extends k {
  constructor() {
    super(), this.columns = 1, this.componentName = "form-row";
  }
  handleSlotChange(e) {
    const t = e.target.assignedNodes({
      flatten: !0
    }).length;
    this.columns = t <= or.MaxItems ? t : or.MaxItems;
  }
  render() {
    return u`<div
      class=${y({
      [this.componentName]: !0,
      [this.theme]: !0,
      [`columns-${this.columns}`]: !0
    })}
    >
      <slot @slotchange=${this.handleSlotChange}></slot>
    </div>`;
  }
};
za.styles = ew;
za.MaxItems = 3;
iw([
  O()
], za.prototype, "columns", 2);
let aw = za;
w("maui-form-row", aw);
const rw = s`
  .grid {
    /* XS -> Mobile */
    --columns: 2;
    --row-gap: var(--maui-grid-row-gap-mobile);
    --gutter: var(--maui-grid-gutter-mobile);

    @media screen and (min-width: ${S.phablet["min-width"]}px) {
      /* S -> Large Mobile */
      --row-gap: var(--maui-grid-row-gap-phablet);
      --gutter: var(--maui-grid-gutter-phablet);
    }

    @media screen and (min-width: ${S["mini-tablet"]["min-width"]}px) {
      /* M -> Tablet */
      --columns: 8;
      --row-gap: var(--maui-grid-row-gap-mini-tablet);
      --gutter: var(--maui-grid-gutter-mini-tablet);
    }

    @media screen and (min-width: ${S.tablet["min-width"]}px) {
      /* L -> Desktop */
      --columns: 12;
      --row-gap: var(--maui-grid-row-gap-desktop);
      --gutter: var(--maui-grid-gutter-desktop);
    }

    @media screen and (min-width: ${S["desktop-large"]["min-width"]}px) {
      /* XL -> Desktop Large */
      --row-gap: var(--maui-grid-row-gap-desktop-large);
      --gutter: var(--maui-grid-gutter-desktop-large);
    }
  }
`, nw = s`
  ${rw}

  .grid {
    display: grid;
    grid-template-columns: repeat(var(--columns), 1fr);
    gap: var(--row-gap) var(--gutter);
  }

  ::slotted(.maui-grid-item.maui-2-col),
  ::slotted(.maui-grid-item.maui-3-col),
  ::slotted(.maui-grid-item.maui-4-col),
  ::slotted(.maui-grid-item.maui-5-col),
  ::slotted(.maui-grid-item.maui-6-col),
  ::slotted(.maui-grid-item.maui-7-col),
  ::slotted(.maui-grid-item.maui-8-col),
  ::slotted(.maui-grid-item.maui-9-col),
  ::slotted(.maui-grid-item.maui-10-col),
  ::slotted(.maui-grid-item.maui-11-col),
  ::slotted(.maui-grid-item.maui-12-col) {
    grid-column: span 2;
  }

  @media screen and (min-width: ${S["mini-tablet"]["min-width"]}px) {
    ::slotted(.maui-grid-item.maui-3-col) {
      grid-column: span 3;
    }

    ::slotted(.maui-grid-item.maui-4-col) {
      grid-column: span 4;
    }

    ::slotted(.maui-grid-item.maui-5-col) {
      grid-column: span 5;
    }

    ::slotted(.maui-grid-item.maui-6-col) {
      grid-column: span 6;
    }
    ::slotted(.maui-grid-item.maui-7-col) {
      grid-column: span 7;
    }

    ::slotted(.maui-grid-item.maui-8-col),
    ::slotted(.maui-grid-item.maui-9-col),
    ::slotted(.maui-grid-item.maui-10-col),
    ::slotted(.maui-grid-item.maui-11-col),
    ::slotted(.maui-grid-item.maui-12-col) {
      grid-column: span 8;
    }
  }

  @media screen and (min-width: ${S.tablet["min-width"]}px) {
    ::slotted(.maui-grid-item.maui-9-col) {
      grid-column: span 9;
    }
    ::slotted(.maui-grid-item.maui-10-col) {
      grid-column: span 10;
    }
    ::slotted(.maui-grid-item.maui-11-col) {
      grid-column: span 11;
    }
    ::slotted(.maui-grid-item.maui-12-col) {
      grid-column: span 12;
    }
  }
`, sw = [nw];
class bl extends k {
  constructor() {
    super(), this.componentName = "grid";
  }
  render() {
    return u`<div
      class=${y({
      [this.componentName]: !0
    })}
    >
      <slot></slot>
    </div>`;
  }
}
bl.styles = sw;
w("maui-grid", bl);
const lw = s`
  .layout {
    --narrow-content-width-max: ${Dd}px;
    --default-content-width-max: ${Rd}px;
    --wide-content-width-max: ${En}px;

    /* XS -> Mobile */
    --margin: var(--maui-layout-margin-mobile);

    @media screen and (min-width: ${S.phablet["min-width"]}px) {
      /* S -> Large Mobile */
      --margin: var(--maui-layout-margin-phablet);
    }

    @media screen and (min-width: ${S["mini-tablet"]["min-width"]}px) {
      /* M -> Tablet */
      --margin: var(--maui-layout-margin-mini-tablet);
    }

    @media screen and (min-width: ${S.tablet["min-width"]}px) {
      /* L -> Desktop */
      --margin: var(--maui-layout-margin-desktop);
    }

    @media screen and (min-width: ${S["desktop-large"]["min-width"]}px) {
      /* XL -> Widescreen */
      --margin: var(--maui-layout-margin-desktop-large);
    }
  }
`, cw = s`
  ${lw}

  .layout {
    --padding-inline: var(--margin);
    --narrow-max-width: var(--narrow-content-width-max);
    --content-max-width: var(--default-content-width-max);

    --content-size: calc(
      (var(--content-max-width) - var(--narrow-max-width)) / 2
    );

    max-width: var(--wide-content-width-max);
    margin: 0 auto;

    display: grid;
    grid-template-columns:
      [full-width-start] minmax(var(--padding-inline), 1fr)
      [content-start] minmax(0, var(--content-size))
      [narrow-start] min(
        100% - (var(--padding-inline) * 2),
        var(--narrow-max-width)
      )
      [narrow-end]
      minmax(0, var(--content-size)) [content-end]
      minmax(var(--padding-inline), 1fr) [full-width-end];
  }

  ::slotted(.maui-content) {
    grid-column: content;
  }

  ::slotted(.maui-content.maui-content--full-width) {
    grid-column: full-width;
  }

  ::slotted(.maui-content.maui-content--narrow) {
    grid-column: narrow;
  }
`, dw = [cw];
class vl extends k {
  constructor() {
    super(), this.componentName = "layout";
  }
  render() {
    return u`<div
      class=${y({
      [this.componentName]: !0
    })}
    >
      <slot></slot>
    </div>`;
  }
}
vl.styles = dw;
w("maui-layout", vl);
const uw = s`
  ${C}

  .limited-width {
    width: auto;
  }

  @media screen and (min-width: ${S["mini-tablet"]["min-width"]}px) {
    .limited-width {
      width: 66.7%;
    }
  }
`, mw = [uw];
class fl extends k {
  render() {
    return u`<div class="limited-width"><slot></slot></div>`;
  }
}
fl.styles = mw;
w("maui-limited-width", fl);
var hw = Object.defineProperty, pw = Object.getOwnPropertyDescriptor, Wt = (a, e, t, o) => {
  for (var i = o > 1 ? void 0 : o ? pw(e, t) : e, r = a.length - 1, n; r >= 0; r--)
    (n = a[r]) && (i = (o ? n(e, t, i) : n(i)) || i);
  return o && i && hw(e, t, i), i;
};
class Lt extends k {
  constructor() {
    super(), this.padding = 0, this.paddingInline = 0, this.paddingBlock = 0, this.paddingTop = 0, this.paddingRight = 0, this.paddingBottom = 0, this.paddingLeft = 0, this.fullHeight = !1, this.componentName = "padding-container";
  }
  render() {
    const e = this.paddingTop || this.paddingBlock || this.padding || 0, t = this.paddingRight || this.paddingInline || this.padding || 0, o = this.paddingBottom || this.paddingBlock || this.padding || 0, i = this.paddingLeft || this.paddingInline || this.padding || 0, r = this.fullHeight ? `calc(100% - var(--maui-spacing-${e}) - var(--maui-spacing-${o}))` : "";
    return u`<div
      class=${y({
      [this.componentName]: !0
    })}
      style=${At({
      paddingTop: `var(--maui-spacing-${e})`,
      paddingRight: `var(--maui-spacing-${t})`,
      paddingBottom: `var(--maui-spacing-${o})`,
      paddingLeft: `var(--maui-spacing-${i})`,
      height: this.fullHeight ? r : ""
    })}
    >
      <slot></slot>
    </div>`;
  }
}
Wt([
  l({ type: Number })
], Lt.prototype, "padding", 2);
Wt([
  l({ type: Number })
], Lt.prototype, "paddingInline", 2);
Wt([
  l({ type: Number })
], Lt.prototype, "paddingBlock", 2);
Wt([
  l({ type: Number })
], Lt.prototype, "paddingTop", 2);
Wt([
  l({ type: Number })
], Lt.prototype, "paddingRight", 2);
Wt([
  l({ type: Number })
], Lt.prototype, "paddingBottom", 2);
Wt([
  l({ type: Number })
], Lt.prototype, "paddingLeft", 2);
Wt([
  l({ type: Boolean, reflect: !0 })
], Lt.prototype, "fullHeight", 2);
w("maui-padding-container", Lt);
const gw = s`
  .section {
    position: relative;
    display: grid;
    margin-bottom: var(--maui-section-gap-mobile);

    @media screen and (min-width: ${S.phablet["min-width"]}px) {
      margin-bottom: var(--maui-section-gap-phablet);
    }

    @media screen and (min-width: ${S["mini-tablet"]["min-width"]}px) {
      margin-bottom: var(--maui-section-gap-mini-tablet);
    }

    @media screen and (min-width: ${S.tablet["min-width"]}px) {
      margin-bottom: var(--maui-section-gap-desktop);
    }

    @media screen and (min-width: ${S["desktop-large"]["min-width"]}px) {
      margin-bottom: var(--maui-section-gap-desktop-large);
    }
  }

  .section.no-section-gap {
    margin-bottom: 0;
  }

  .section.background {
    background-color: var(--maui-color-grey-01);
  }

  .container--wide {
    max-width: ${En}px;
    margin-inline: auto;
  }

  maui-layout {
    z-index: 1;
    position: relative;
    grid-area: 1/1;
  }

  slot[name='custom-bg'] {
    display: block;
    z-index: 0;
    grid-area: 1/1;
  }

  .section.padding maui-layout .maui-content {
    padding-block: var(--maui-section-padding, 24px);
  }

  @media screen and (min-width: ${S["mini-tablet"]["min-width"]}px) {
    .section.padding maui-layout .maui-content {
      padding-block: var(--maui-section-padding, 36px);
    }
  }

  @media screen and (min-width: ${S["desktop-large"]["min-width"]}px) {
    .section.padding maui-layout .maui-content {
      padding-block: var(--maui-section-padding, 84px);
    }
  }
`, bw = [gw];
var vw = Object.defineProperty, fw = Object.getOwnPropertyDescriptor, Pi = (a, e, t, o) => {
  for (var i = o > 1 ? void 0 : o ? fw(e, t) : e, r = a.length - 1, n; r >= 0; r--)
    (n = a[r]) && (i = (o ? n(e, t, i) : n(i)) || i);
  return o && i && vw(e, t, i), i;
};
class So extends k {
  constructor() {
    super(), this.contentType = "default", this.containerType = "infinite", this.padding = !1, this.background = !1, this.noSectionGap = !1, this.componentName = "section";
  }
  connectedCallback() {
    super.connectedCallback();
  }
  render() {
    return u`<div
      class=${y({
      [this.theme]: !0,
      [this.componentName]: !0,
      padding: !!this.padding,
      background: !!this.background,
      "no-section-gap": !!this.noSectionGap,
      container: !0,
      "container--wide": this.containerType === "wide",
      "container--infinite": this.containerType === "infinite"
    })}
    >
      <maui-layout .theme=${this.theme}>
        <div
          class=${y({
      "maui-content": !0,
      "maui-content--narrow": this.contentType === "narrow",
      "maui-content--full-width": this.contentType === "wide"
    })}
        >
          <slot></slot>
        </div>
      </maui-layout>
      <slot name="custom-bg"></slot>
    </div>`;
  }
}
So.styles = bw;
Pi([
  l({ type: String, reflect: !0 })
], So.prototype, "contentType", 2);
Pi([
  l({ type: String, reflect: !0 })
], So.prototype, "containerType", 2);
Pi([
  l({ type: Boolean, reflect: !0 })
], So.prototype, "padding", 2);
Pi([
  l({ type: Boolean, reflect: !0 })
], So.prototype, "background", 2);
Pi([
  l({ type: Boolean, reflect: !0 })
], So.prototype, "noSectionGap", 2);
w("maui-section", So);
const yw = s`
  ${C}

  ${A}

  .caption {
    font-family: var(--maui-font-family-copy, sans-serif);
    ${p({ size: "caption", tenant: "wl" })};
    font-weight: var(--maui-font-weight-bold, 700);
    color: var(--maui-color-text-copy);
  }

  .inverted {
    color: var(
      --maui-caption-color-inverted-override,
      var(--maui-color-text-caption-inverted)
    );
  }
`, xw = s`
  .sn.caption {
    ${p({ size: "caption", tenant: "sn" })};
  }
`, $w = s`
  .os.caption {
    ${p({ size: "caption", tenant: "os" })};
    font-weight: var(--maui-font-weight-light, 100);
  }
`, ww = s`
  .lh.caption {
    ${p({ size: "caption", tenant: "lh" })};
  }
`, _w = s`
  .b2b.caption {
    ${p({ size: "caption", tenant: "b2b" })};
  }
`, kw = s`
  .lx.caption {
    ${p({ size: "caption", tenant: "lx" })};
    font-weight: var(--maui-font-weight-normal, 400);
  }
`, Sw = s`
  .four_y.caption {
    ${p({ size: "caption", tenant: "four_y" })};
  }
`, Ow = s`
  .mmg.caption {
    ${p({ size: "caption", tenant: "mmg" })};
    color: var(--maui-color-text-caption);
  }

  .mmg.caption.inverted {
    color: var(--maui-color-text-caption-inverted);
  }
`, Mw = [
  yw,
  xw,
  ww,
  kw,
  _w,
  $w,
  Sw,
  Ow
];
var Lw = Object.defineProperty, Bw = Object.getOwnPropertyDescriptor, Cw = (a, e, t, o) => {
  for (var i = o > 1 ? void 0 : o ? Bw(e, t) : e, r = a.length - 1, n; r >= 0; r--)
    (n = a[r]) && (i = (o ? n(e, t, i) : n(i)) || i);
  return o && i && Lw(e, t, i), i;
};
class Fr extends k {
  constructor() {
    super(), this.inverted = !1, this.componentName = "caption";
  }
  render() {
    return u`<div
      class="${y({
      [this.componentName]: !0,
      [this.theme]: !0,
      inverted: this.inverted
    })}"
    >
      <slot></slot>
    </div>`;
  }
}
Fr.styles = Mw;
Cw([
  l({ type: Boolean })
], Fr.prototype, "inverted", 2);
w("maui-caption", Fr);
const zw = s`
  ${A}

  .flight-number {
    display: grid;
    grid-template-columns: min-content auto;
    gap: var(--maui-spacing-2);
    align-items: center;
  }

  .identifier {
    ${d({ size: "copy-medium", tenant: "wl" })};
    font-weight: var(--maui-font-weight-bold);
    font-family: var(--maui-font-family-copy);
    color: var(--maui-color-text-copy);
  }

  .carrier-logo {
    line-height: 0;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  maui-graphic {
    width: 16px;
    aspect-ratio: 1;
  }
`, Aw = s`
  .os .identifier {
    ${d({ size: "copy-medium", tenant: "os" })};
  }
`, Fw = s`
  .lh .identifier {
    ${d({ size: "copy-medium", tenant: "lh" })};
  }
`, Nw = s`
  .sn .identifier {
    ${d({ size: "copy-medium", tenant: "sn" })};
  }
`, Iw = s`
  .lx .identifier {
    ${d({ size: "copy-medium", tenant: "lx" })};
  }
`, Uw = s`
  .b2b .identifier {
    ${d({ size: "copy-medium", tenant: "b2b" })};
  }
`, Rw = s`
  .four_y .identifier {
    ${d({ size: "copy-medium", tenant: "four_y" })};
  }

  .four_y .carrier-logo {
    width: 24px;
    height: 24px;
  }
`, Dw = [
  zw,
  Aw,
  Fw,
  Nw,
  Iw,
  Uw,
  Rw
], Ew = [
  "2L",
  "4Y",
  "4Z",
  "A3",
  "A9",
  "AC",
  "AI",
  "AV",
  "B2",
  "BR",
  "BT",
  "CA",
  "CL",
  "CM",
  "CX",
  "DT",
  "EN",
  "ET",
  "EW",
  "EY",
  "HU",
  "KM",
  "LA",
  "LG",
  "LH",
  "LO",
  "LX",
  "LY",
  "MS",
  "NH",
  "NZ",
  "OS",
  "OU",
  "OZ",
  "PG",
  "RO",
  "SA",
  "SK",
  "SN",
  "SQ",
  "TG",
  "TK",
  "TP",
  "UA",
  "UK",
  "VL",
  "WK",
  "XQ",
  "ZH"
];
var Pw = Object.defineProperty, Hw = Object.getOwnPropertyDescriptor, Nr = (a, e, t, o) => {
  for (var i = o > 1 ? void 0 : o ? Hw(e, t) : e, r = a.length - 1, n; r >= 0; r--)
    (n = a[r]) && (i = (o ? n(e, t, i) : n(i)) || i);
  return o && i && Pw(e, t, i), i;
};
const Hi = class yl extends k {
  constructor() {
    super(), this.componentName = "flight-number";
  }
  static isKnownCarrier(e) {
    return e === "four_y" ? !0 : Ew.includes(
      e.toUpperCase()
    );
  }
  parseCarrier() {
    return this.carrier === "four_y" ? "4Y" : this.carrier.toUpperCase();
  }
  getPaddedNumber() {
    return this.number < 100 ? this.number.toString().padStart(3, "0") : this.number.toString().slice(0, 4);
  }
  render() {
    return u`<div
      class=${y({
      [this.componentName]: !0,
      [this.theme]: !0
    })}
    >
      <div class="carrier-logo">
        <maui-graphic
          size=${["four_y"].includes(this.theme) ? "medium" : "small"}
          use=${`gfx-carrier-${yl.isKnownCarrier(this.carrier) ? `${this.parseCarrier()}-icon` : "other-icon"}`}
        ></maui-graphic>
      </div>
      <div class="identifier">
        ${this.parseCarrier()}${this.getPaddedNumber()}${this.suffix ?? E}
      </div>
    </div>`;
  }
};
Hi.styles = Dw;
Nr([
  l({ type: String })
], Hi.prototype, "carrier", 2);
Nr([
  l({ type: Number })
], Hi.prototype, "number", 2);
Nr([
  l({ type: String })
], Hi.prototype, "suffix", 2);
let Gw = Hi;
w("maui-flight-number", Gw);
const Yw = s`
  .indicator {
    ${C};
    ${A};

    height: var(--_target-height);
    min-width: var(--_target-height);

    position: relative;
    border-radius: 9999vw;
    display: inline-grid;
    grid-template-columns: min-content;
    background-color: var(--maui-color-brand-secondary);
    color: var(--maui-color-text-copy);
    --maui-icon-color-override: currentColor;
  }

  .border {
    outline: 2px solid var(--maui-color-brand-light);
  }

  .small.border,
  .medium.border {
    outline-width: 1px;
  }

  .value {
    display: block;
    padding: 0 var(--_padding);
    text-align: center;
    font-family: var(--maui-font-family-copy);
    ${d({ size: "copy-small", tenant: "lh", omitLineHeight: !0 })};
    font-weight: var(--maui-font-weight-bold);
    line-height: var(--_target-height);
    min-width: calc(var(--_target-height) - 2 * var(--_padding));
  }

  .success {
    background-color: var(--maui-color-message-success);
    color: var(--maui-color-brand-light);
  }

  .error {
    background-color: var(--maui-color-message-error);
    color: var(--maui-color-brand-light);
  }

  .locked {
    background-color: var(--maui-color-grey-07);
    color: var(--maui-color-brand-light);
  }

  .small {
    --_target-height: 8px;
  }

  .medium {
    --_padding: 6px;
    --_target-height: 20px;
  }

  .medium maui-icon {
    top: 3px;
    left: 3px;
  }

  .large maui-icon {
    top: 4px;
    left: 4px;
  }

  .extra-large maui-icon {
    top: 6px;
    left: 6px;
  }

  .medium .value {
    ${d({ size: "copy-small", tenant: "wl", omitLineHeight: !0 })};
  }
  .medium:not(.default) {
    --_target-height: 22px;
  }
  .large {
    --_padding: 7px;
    --_target-height: 24px;
  }
  .large .value {
    ${d({ size: "copy-medium", tenant: "wl", omitLineHeight: !0 })};
  }
  .extra-large {
    --_padding: 8px;
    --_target-height: 28px;
  }
  .extra-large .value {
    ${d({ size: "copy-large", tenant: "wl", omitLineHeight: !0 })};
  }

  .medium.no-content {
    --_target-height: 14px;
  }
  .large.no-content {
    --_target-height: 16px;
  }
  .extra-large.no-content {
    --_target-height: 20px;
  }
`, Tw = s`
  .lh.medium .value {
    ${d({ size: "copy-small", tenant: "lh", omitLineHeight: !0 })};
  }
  .lh.large .value {
    ${d({ size: "copy-medium", tenant: "lh", omitLineHeight: !0 })};
  }
  .lh.extra-large .value {
    ${d({ size: "copy-large", tenant: "lh", omitLineHeight: !0 })};
  }

  .lh.locked.medium