r-color: var(--maui-color-interaction-interactionhover);
  }
`, om = s`
  .sn:not(.inverted) .dot {
    border-color: var(--maui-color-interaction-buttonsecondary);
  }
  .sn:not(.inverted) .dot.selected {
    background-color: var(--maui-color-interaction-selection);
    border-color: var(--maui-color-interaction-selection);
  }

  .sn:not(.inverted) .dot-button:hover .dot:not(.selected) {
    background-color: var(--maui-color-interaction-buttonsecondaryhover);
    border-color: var(--maui-color-interaction-buttonsecondaryhover);
  }
`, im = s`
  .four_y .dot {
    outline: 1px solid transparent;
    --maui-pagination-dot-box-shadow-color: transparent;
    transition: outline-color 0.3s ease-in-out,
      box-shadow 0.3s ease-in-out background-color 0.3s ease-in-out,
      border-color 0.3s ease-in-out;
    box-shadow: 0 0 0 1px var(--maui-pagination-dot-box-shadow-color);
  }

  .four_y:not(.inverted) .dot {
    border-color: var(--maui-color-interaction-buttonsecondary);
  }

  .four_y:not(.inverted) .dot.selected {
    border-color: var(--maui-color-interaction-selection);
    background-color: var(--maui-color-interaction-selection);
  }

  .four_y:not(.inverted) .dot-button:hover .dot:not(.selected) {
    background-color: var(--maui-color-interaction-buttonsecondaryhover);
    outline-color: var(--maui-color-interaction-buttonsecondaryhover);
    --maui-pagination-dot-box-shadow-color: var(
      --maui-color-interaction-buttonsecondaryhover
    );
  }

  .four_y.inverted .dot-button:hover .dot:not(.selected) {
    --maui-pagination-dot-box-shadow-color: var(--maui-color-brand-light);
  }

  .four_y.inverted .dot-button:hover .dot:not(.selected) {
    outline-color: var(--maui-color-brand-light);
  }
`, am = s`
  .mmg:not(.inverted) .dot {
    background-color: transparent;
    border: 1px solid var(--maui-color-interaction-interaction);
  }

  .mmg:not(.inverted) .dot.selected {
    background-color: var(--maui-color-brand-primary);
    border-color: var(--maui-color-brand-primary);
  }

  .mmg:not(.inverted) .dot-button:hover .dot:not(.selected) {
    border-color: var(--maui-color-interaction-interactionhover);
  }

  .mmg.inverted .dot-button:hover .dot:not(.selected) {
    background-color: var(--maui-color-interaction-interaction-invertedhover);
    border-color: var(--maui-color-interaction-interaction-invertedhover);
  }
`, rm = [Ju, em, om, tm, im, am];
var nm = Object.defineProperty, sm = Object.getOwnPropertyDescriptor, Po = (a, e, t, o) => {
  for (var i = o > 1 ? void 0 : o ? sm(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 && nm(e, t, i), i;
};
const Et = class Vn extends k {
  constructor() {
    super(), this.current = 0, this.vertical = !1, this.inverted = !1, this.dotAccessibilityLabelCallback = Vn.accessibilityLabelFallback, this.componentName = "pagination-dots";
  }
  /** Fallback for callback :D */
  static accessibilityLabelFallback(e) {
    return {
      currentLabel: "current page",
      pageLabel: `Page ${e + 1}`
    };
  }
  requestNavigation({
    direction: e,
    source: t,
    targetPage: o
  }) {
    this.emit("maui-request-navigation", {
      cancelable: !0,
      detail: { source: t, direction: e, targetPage: o }
    }).defaultPrevented || (e === "direct" ? this.current = o : this.current = e === "next" ? this.current + 1 : this.current - 1);
  }
  /** Requests navigation to the next page if not exceeding the limit */
  next(e = "api") {
    this.current < this.pages - 1 && this.requestNavigation({ direction: "next", source: e });
  }
  /** Requests navigation to the previous page if not exceeding the limit */
  previous(e = "api") {
    this.current > 0 && this.requestNavigation({ direction: "previous", source: e });
  }
  handleCurrentChange() {
    this.emit("maui-pagination-change", { detail: this.current }), this.renderRoot.querySelector(
      `.dot-button[data-index="${this.current}"]`
    )?.focus();
  }
  handleDotClick(e) {
    if (e.type === "keydown" && ![" ", "enter"].includes(e.key))
      return;
    e.type === "keydown" && e.preventDefault();
    const { index: t } = e.target.dataset;
    this.requestNavigation({
      direction: "direct",
      source: e.type === "keydown" ? "keyboard" : "click",
      targetPage: parseInt(t, 10)
    });
  }
  handleKeyDownPagination(e) {
    ["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"].includes(e.key) && e.preventDefault(), (e.key === "ArrowLeft" || e.key === "ArrowUp") && this.current > 0 ? this.requestNavigation({ direction: "previous", source: "keyboard" }) : (e.key === "ArrowRight" || e.key === "ArrowDown") && this.current < this.pages - 1 && this.requestNavigation({ direction: "next", source: "keyboard" });
  }
  render() {
    return u`<div
      style=${`--_dot-count: ${this.pages}; --_current-dot: ${this.current};`}
      class=${y({
      [this.componentName]: !0,
      [this.theme]: !0,
      inverted: this.inverted,
      vertical: this.vertical
    })}
      role="navigation"
      @keydown=${this.handleKeyDownPagination}
    >
      ${new Array(this.pages).fill(void 0).map((e, t) => {
      const o = this.current === t, { currentLabel: i, pageLabel: r } = this.dotAccessibilityLabelCallback(t), n = `${r}${o ? `, ${i}` : ""}`;
      return u`
          <button
            class="dot-button"
            .ariaCurrent=${o ? "true" : "false"}
            .ariaLabel=${n}
            @click=${this.handleDotClick}
            @keydown=${this.handleDotClick}
            .tabIndex=${o ? -1 : 0}
            data-index=${t}
          >
            <div
              class=${y({
        dot: !0,
        [`dot-${t}`]: !0,
        selected: o
      })}
            ></div>
          </button>
        `;
    })}
    </div>`;
  }
};
Et.styles = rm;
Po([
  l({ type: Number, reflect: !0 })
], Et.prototype, "current", 2);
Po([
  l({ type: Number, reflect: !0 })
], Et.prototype, "pages", 2);
Po([
  l({ type: Boolean, reflect: !0 })
], Et.prototype, "vertical", 2);
Po([
  l({ type: Boolean, reflect: !0 })
], Et.prototype, "inverted", 2);
Po([
  l({ type: Object })
], Et.prototype, "dotAccessibilityLabelCallback", 2);
Po([
  F("current")
], Et.prototype, "handleCurrentChange", 1);
let lm = Et;
w("maui-pagination-dots", lm);
const jn = (a) => {
  const e = h(a);
  return s`
    .${e} .label {
      ${d({ size: "copy-medium", tenant: a })};
    }

    .${e}.small .price,
    .${e}.small .currency,
    .${e}.small .asterisk {
      ${d({ size: "copy-medium", tenant: a })};
    }

    .${e}.price-display:not(.small) .asterisk,
    .${e}.medium .price,
    .${e}.medium .currency {
      ${b({ size: "h4", tenant: a }).mobile};
      font-family: var(--maui-font-family-headline);
    }

    .${e}.large .price,
    .${e}.large .currency {
      ${b({ size: "h3", tenant: a }).mobile};
      font-family: var(--maui-font-family-headline);
    }

    .${e}.extra-large .price,
    .${e}.extra-large .currency {
      ${b({ size: "h2", tenant: a }).mobile};
      font-family: var(--maui-font-family-headline);
    }
  `;
}, cm = s`
  ${C}
  ${A}

  .price-display {
    font-family: var(--maui-font-family-copy);
    color: var(--maui-color-text-copy);
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    align-items: baseline;
  }

  .price-display.inverted {
    color: var(--maui-color-text-copy-inverted);
  }

  .wrapping {
    flex-wrap: wrap;
  }

  .end {
    justify-content: flex-end;
    text-align: right;
  }

  .start {
    justify-content: flex-start;
    text-align: left;
  }

  .compact {
    align-items: flex-end;
    flex-direction: column;
  }

  .compact.start {
    align-items: flex-start;
  }

  .label {
    ${d({ size: "copy-medium", tenant: "wl" })};
  }

  .label.hidden {
    opacity: 0;
    width: 0;
    height: 0;
    display: block;
  }

  .small:not(.compact):not(.labelHidden) {
    gap: var(--maui-spacing-1) var(--maui-spacing-2);
  }

  .medium:not(.compact):not(.labelHidden),
  .large:not(.compact):not(.labelHidden),
  .extra-large:not(.compact):not(.labelHidden) {
    gap: var(--maui-spacing-1) var(--maui-spacing-3);
  }

  .value-wrapper {
    display: flex;
  }

  .price-wrapper {
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
  }

  .small .price-wrapper {
    gap: var(--maui-spacing-1);
  }

  .medium .price-wrapper,
  .large .price-wrapper,
  .extra-large .price-wrapper {
    gap: var(--maui-spacing-1) var(--maui-spacing-2);
  }

  .price {
    white-space: nowrap;
  }

  .price,
  .currency,
  .asterisk {
    font-weight: var(--maui-font-weight-bold);
    position: relative;
  }

  .small .price,
  .small .currency,
  .small .asterisk {
    ${d({ size: "copy-medium", tenant: "wl" })};
  }

  .small.localized .currency:first-child {
    margin-right: var(--maui-spacing-1);
  }

  .localized .currency:first-child {
    margin-right: var(--maui-spacing-2);
  }

  .small.localized .currency:last-child {
    margin-left: var(--maui-spacing-1);
  }

  .localized .currency:last-child {
    margin-left: var(--maui-spacing-2);
  }

  .price-display:not(.small) .asterisk {
    margin-left: var(--maui-spacing-1);
    ${b({ size: "h4", tenant: "wl" }).mobile};
    align-self: flex-start;
  }

  .medium .price,
  .medium .currency {
    ${b({ size: "h4", tenant: "wl" }).mobile};
  }

  .large .price,
  .large .currency {
    ${b({ size: "h3", tenant: "wl" }).mobile};
  }

  .extra-large .price,
  .extra-large .currency {
    ${b({ size: "h2", tenant: "wl" }).mobile};
  }
`, dm = s`
  ${jn("lh")}
`, um = s`
  .os .label {
    ${d({ size: "copy-medium", tenant: "os" })};
  }

  .os.small .price,
  .os.small .currency,
  .os.small .asterisk {
    ${d({ size: "copy-medium", tenant: "os" })};
  }

  .os.price-display:not(.small) .asterisk,
  .os.medium .price,
  .os.medium .currency {
    ${b({ size: "h4", tenant: "os" }).mobile};
  }

  .os.large .price,
  .os.large .currency {
    ${b({ size: "h3", tenant: "os" }).mobile};
  }

  .os.extra-large .price,
  .os.extra-large .currency {
    ${b({ size: "h2", tenant: "os" }).mobile};
  }

  .os.price-display.small .asterisk {
    top: -2px;
  }

  .os.price-display.medium .asterisk {
    top: -4px;
  }

  .os.price-display.large .asterisk {
    top: -6px;
  }

  .os.price-display.extra-large .asterisk {
    top: -4px;
  }
`, mm = s`
  .sn .label {
    ${d({ size: "copy-medium", tenant: "sn" })};
  }

  .sn.small .price,
  .sn.small .currency,
  .sn.small .asterisk {
    ${d({ size: "copy-medium", tenant: "sn" })};
  }

  .sn.price-display:not(.small) .asterisk,
  .sn.medium .price,
  .sn.medium .currency {
    ${b({ size: "h4", tenant: "sn" }).mobile};
    font-family: var(--maui-font-family-headline);
  }

  .sn.large .price,
  .sn.large .currency {
    ${b({ size: "h3", tenant: "sn" }).mobile};
    font-family: var(--maui-font-family-headline);
  }

  .sn.extra-large .price,
  .sn.extra-large .currency {
    ${b({ size: "h2", tenant: "sn" }).mobile};
    font-family: var(--maui-font-family-headline);
  }
`, hm = s`
  .lx.price-display:not(.inverted) {
    color: var(--maui-color-brand-primary);
  }

  .lx .label {
    ${d({ size: "copy-medium", tenant: "lx" })};
  }

  .lx:not(.inverted) .label {
    font-weight: var(--maui-font-weight-bold);
  }

  .lx.small .price,
  .lx.small .currency,
  .lx.small .asterisk {
    ${d({ size: "copy-medium", tenant: "lx" })};
  }

  .lx.price-display:not(.small) .asterisk,
  .lx.medium .price,
  .lx.medium .currency {
    ${b({ size: "h4", tenant: "lx" }).mobile};
    font-family: var(--maui-font-family-headline);
  }

  .lx.large .price,
  .lx.large .currency {
    ${b({ size: "h3", tenant: "lx" }).mobile};
    font-family: var(--maui-font-family-headline);
  }

  .lx.extra-large .price,
  .lx.extra-large .currency {
    ${b({ size: "h2", tenant: "lx" }).mobile};
    font-family: var(--maui-font-family-headline);
  }
`, pm = s`
  .four_y {
    color: var(--maui-color-text-headline);
  }

  .four_y .label {
    ${d({ size: "copy-medium", tenant: "four_y" })};
  }

  .four_y.small .label {
    ${d({ size: "copy-small", tenant: "four_y" })};
  }

  .four_y.small .price,
  .four_y.small .currency,
  .four_y.small .asterisk {
    ${d({ size: "copy-medium", tenant: "four_y" })};
  }

  .four_y.price-display:not(.small) .asterisk,
  .four_y.medium .price,
  .four_y.medium .currency {
    font-weight: var(--maui-font-weight-bold);
    font-family: var(--maui-font-family-headline);
    ${b({ size: "h5", tenant: "four_y" }).mobile};
  }

  .four_y.large .price,
  .four_y.large .currency {
    font-weight: var(--maui-font-weight-bold);
    font-family: var(--maui-font-family-headline);
    ${b({ size: "h4", tenant: "four_y" }).mobile};
  }

  .four_y.extra-large .price,
  .four_y.extra-large .currency {
    font-weight: var(--maui-font-weight-bold);
    font-family: var(--maui-font-family-headline);
    ${b({ size: "h3", tenant: "four_y" }).mobile};
  }

  .small:not(.compact):not(.labelHidden),
  .medium:not(.compact):not(.labelHidden),
  .large:not(.compact):not(.labelHidden),
  .extra-large:not(.compact):not(.labelHidden) {
    gap: var(--maui-spacing-1) 8px;
  }
`, gm = s`
  ${jn("b2b")}

  .b2b.large .price,
  .b2b.large .currency {
    font-weight: var(--maui-font-weight-regular);
  }

  .b2b.extra-large .price,
  .b2b.extra-large .currency {
    font-weight: var(--maui-font-weight-regular);
  }
`, bm = s`
  .mmg.small:not(.compact):not(.labelHidden) {
    gap: var(--maui-spacing-1);
  }

  .mmg.medium:not(.compact):not(.labelHidden),
  .mmg.large:not(.compact):not(.labelHidden),
  .mmg.extra-large:not(.compact):not(.labelHidden) {
    gap: var(--maui-spacing-2);
  }

  .mmg.small .price-wrapper,
  .mmg.medium .price-wrapper,
  .mmg.large .price-wrapper,
  .mmg.extra-large .price-wrapper {
    gap: var(--maui-spacing-0);
  }

  .mmg .price,
  .mmg .currency {
    font-family: var(--maui-font-family-headline);
  }

  .mmg.large .price,
  .mmg.large .currency {
    ${b({ size: "h3", tenant: "mmg" }).mobile};
  }

  .mmg.extra-large .price,
  .mmg.extra-large .currency {
    ${b({ size: "h2", tenant: "mmg" }).mobile};
  }
`, vm = [
  cm,
  dm,
  um,
  hm,
  mm,
  gm,
  pm,
  bm
];
var fm = Object.defineProperty, ym = Object.getOwnPropertyDescriptor, ue = (a, e, t, o) => {
  for (var i = o > 1 ? void 0 : o ? ym(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 && fm(e, t, i), i;
};
const te = class qn extends k {
  constructor() {
    super(), this.size = "medium", this.compact = !1, this.labelHidden = !1, this.dropCurrency = !1, this.showCode = !1, this.currencyFirst = !1, this.conditions = "", this.localized = !1, this.abbreviation = "", this.rounded = !0, this.inverted = !1, this.wrapping = !1, this.alignment = "end", this.priceCurrencyTemplate = () => [
      u`<span
      class=${y({
        price: !0
      })}
      >${this.price}</span
    >`,
      this.dropCurrency ? u`` : u`<span
          class=${y({
        currency: !0
      })}
          >${this.showCode ? this.currency : u`${qn.getCurrencySymbolFromISO(
        this.currency
      )}<span class="sr-only">${this.currency}</span>`}</span
        >`
    ], this.getFormatted = () => {
      const e = new Intl.NumberFormat(
        navigator.languages[0],
        this.formattingOptions
      ).formatToParts(this.price);
      return u`<span
      class=${y({
        price: !0
      })}
      >${e.map((t, o) => t.type === "literal" ? u`` : t.type === "currency" && this.dropCurrency ? u`` : this.abbreviation && t.type === "currency" && !this.currencyBeforeAbbreviation ? u`<span class="compact">${this.abbreviation}</span
            ><span class="${t.type}">${t.value}</span>` : this.abbreviation && o === e.length - 1 && this.currencyBeforeAbbreviation ? u`<span class="${t.type}">${t.value}</span
            ><span class="compact">${this.abbreviation}</span>` : u`<span class="${t.type}">${t.value}</span>`)}</span
    >`;
    }, this.componentName = "price-display";
  }
  static getCurrencySymbolFromISO(e) {
    return new Intl.NumberFormat("en-US", {
      style: "currency",
      currency: e
    }).formatToParts().find((o) => o.type === "currency")?.value || "";
  }
  get formattingOptions() {
    return {
      style: "currency",
      currency: this.currency,
      currencyDisplay: this.showCode ? "code" : "symbol",
      roundingMode: "ceil",
      // always go to ceil, to avoid fractions that are subject to price fluctuations.
      maximumFractionDigits: this.rounded ? 0 : 2
    };
  }
  get currencyBeforeAbbreviation() {
    const e = new Intl.NumberFormat(navigator.languages[0], {
      ...this.formattingOptions,
      notation: "compact",
      compactDisplay: "short"
    }).formatToParts(1e8);
    let t = !1;
    return e.forEach(({ type: o }) => {
      o === "currency" && (t = !1), o === "compact" && (t = !0);
    }), t;
  }
  render() {
    const e = this.getFormatted(), t = this.currencyFirst ? [...this.priceCurrencyTemplate()].reverse() : this.priceCurrencyTemplate();
    return u`<div
      class=${y({
      [this.componentName]: !0,
      [this.theme]: !0,
      [this.size]: !0,
      [this.alignment]: !0,
      localized: this.localized,
      compact: this.compact,
      labelHidden: !!this.labelHidden,
      wrapping: this.wrapping,
      inverted: this.inverted
    })}
    >
      <span
        class=${y({
      label: !0,
      hidden: !!this.labelHidden
    })}
        >${this.label}</span
      ><span class="value-wrapper"
        ><span class="price-wrapper"
          >${this.localized ? e : t}</span
        >${this.conditions ? u`<span class="asterisk"
              >*<maui-screen-reader-label .theme=${this.theme}
                >${this.conditions}</maui-screen-reader-label
              ></span
            >` : ""}</span
      >
    </div>`;
  }
};
te.styles = vm;
ue([
  l({ type: String })
], te.prototype, "size", 2);
ue([
  l({ type: Boolean })
], te.prototype, "compact", 2);
ue([
  l({ type: String })
], te.prototype, "label", 2);
ue([
  l({ type: Boolean })
], te.prototype, "labelHidden", 2);
ue([
  l({ type: String })
], te.prototype, "price", 2);
ue([
  l({ type: String })
], te.prototype, "currency", 2);
ue([
  l({ type: Boolean })
], te.prototype, "dropCurrency", 2);
ue([
  l({ type: Boolean })
], te.prototype, "showCode", 2);
ue([
  l({ type: Boolean })
], te.prototype, "currencyFirst", 2);
ue([
  l({ type: String })
], te.prototype, "conditions", 2);
ue([
  l({ type: Boolean })
], te.prototype, "localized", 2);
ue([
  l({ type: String })
], te.prototype, "abbreviation", 2);
ue([
  l({ type: Boolean })
], te.prototype, "rounded", 2);
ue([
  l({ type: Boolean })
], te.prototype, "inverted", 2);
ue([
  l({ type: Boolean })
], te.prototype, "wrapping", 2);
ue([
  l({ type: String })
], te.prototype, "alignment", 2);
let xm = te;
w("maui-price-display", xm);
/**
 * @license
 * Copyright 2018 Google LLC
 * SPDX-License-Identifier: BSD-3-Clause
 */
const Kn = "important", $m = " !" + Kn, At = bi(class extends vi {
  constructor(a) {
    if (super(a), a.type !== Ze.ATTRIBUTE || a.name !== "style" || a.strings?.length > 2)
      throw Error("The `styleMap` directive must be used in the `style` attribute and must be the only part in the attribute.");
  }
  render(a) {
    return Object.keys(a).reduce((e, t) => {
      const o = a[t];
      return o == null ? e : e + `${t = t.includes("-") ? t : t.replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g, "-$&").toLowerCase()}:${o};`;
    }, "");
  }
  update(a, [e]) {
    const { style: t } = a.element;
    if (this.ft === void 0)
      return this.ft = new Set(Object.keys(e)), this.render(e);
    for (const o of this.ft)
      e[o] == null && (this.ft.delete(o), o.includes("-") ? t.removeProperty(o) : t[o] = null);
    for (const o in e) {
      const i = e[o];
      if (i != null) {
        this.ft.add(o);
        const r = typeof i == "string" && i.endsWith($m);
        o.includes("-") || r ? t.setProperty(o, r ? i.slice(0, -11) : i, r ? Kn : "") : t[o] = i;
      }
    }
    return we;
  }
}), Wn = (a) => {
  const e = h(a);
  return s`
    .${e}.default::after {
      background: linear-gradient(
        to right,
        var(--maui-color-grey-02),
        var(--maui-color-grey-04),
        var(--maui-color-grey-02),
        var(--maui-color-grey-04),
        var(--maui-color-grey-02),
        var(--maui-color-grey-04),
        var(--maui-color-grey-02)
      );
    }

    .${e}.dark::after {
      background: linear-gradient(
        to right,
        var(--maui-color-grey-02),
        var(--maui-color-grey-04),
        var(--maui-color-grey-02),
        var(--maui-color-grey-04),
        var(--maui-color-grey-02),
        var(--maui-color-grey-04),
        var(--maui-color-grey-02)
      );

      opacity: 0.2;
    }
  `;
}, wm = s`
  @keyframes skeletonShimmer {
    0% {
      transform: translate(-150vw);
    }

    to {
      transform: translate(-50vw);
    }
  }

  .skeleton {
    overflow: hidden;
    position: relative;

    width: 100%;
    height: 100%;
  }

  .skeleton::after {
    bottom: 0;
    content: ' ';
    display: block;
    position: absolute;
    top: 0;
    width: 300vw;

    animation-duration: 2.5s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: skeletonShimmer;
    animation-timing-function: linear;
  }

  .default::after {
    background: linear-gradient(
      to right,
      var(--maui-color-grey-01),
      var(--maui-color-grey-02),
      var(--maui-color-grey-01),
      var(--maui-color-grey-02),
      var(--maui-color-grey-01),
      var(--maui-color-grey-02),
      var(--maui-color-grey-01)
    );
  }

  .dark::after {
    background: linear-gradient(
      to right,
      var(--maui-color-brand-white-transparent-1),
      var(--maui-color-brand-white-transparent-2),
      var(--maui-color-brand-white-transparent-1),
      var(--maui-color-brand-white-transparent-2),
      var(--maui-color-brand-white-transparent-1),
      var(--maui-color-brand-white-transparent-2),
      var(--maui-color-brand-white-transparent-1)
    );
  }
`, _m = s`
  ${Wn("lh")}
`, km = s`
  ${Wn("b2b")}
`, Sm = s`
  .os.default::after {
    background: linear-gradient(
      to right,
      var(--maui-color-grey-02),
      var(--maui-color-grey-03),
      var(--maui-color-grey-02),
      var(--maui-color-grey-03),
      var(--maui-color-grey-02),
      var(--maui-color-grey-03),
      var(--maui-color-grey-02)
    );
  }
`, Om = s`
  .four_y.default::after {
    background: linear-gradient(
      to right,
      var(--maui-color-brand-lighter-sky-blue),
      var(--maui-color-brand-light-sky-blue),
      var(--maui-color-brand-lighter-sky-blue),
      var(--maui-color-brand-light-sky-blue),
      var(--maui-color-brand-lighter-sky-blue),
      var(--maui-color-brand-light-sky-blue),
      var(--maui-color-brand-lighter-sky-blue)
    );
  }
`, Mm = [wm, _m, km, Sm, Om];
var Lm = Object.defineProperty, Bm = Object.getOwnPropertyDescriptor, Zn = (a, e, t, o) => {
  for (var i = o > 1 ? void 0 : o ? Bm(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 && Lm(e, t, i), i;
};
class pa extends k {
  constructor() {
    super(), this.borderRadius = "0", this.variant = "default", this.componentName = "skeleton";
  }
  connectedCallback() {
    super.connectedCallback(), this.setAttribute("slot", "skeleton");
  }
  render() {
    return u`<div
      class=${y({
      [this.componentName]: !0,
      [this.theme]: !0,
      [this.variant]: !0
    })}
      style=${At({ borderRadius: this.borderRadius || "0" })}
    ></div>`;
  }
}
pa.styles = Mm;
Zn([
  l({ type: String })
], pa.prototype, "borderRadius", 2);
Zn([
  l({ type: String })
], pa.prototype, "variant", 2);
w("maui-skeleton", pa);
/**
 * @license
 * Copyright 2020 Google LLC
 * SPDX-License-Identifier: BSD-3-Clause
 */
const { I: Cm } = Al, zm = (a) => a.strings === void 0, Wr = () => document.createComment(""), ai = (a, e, t) => {
  const o = a._$AA.parentNode, i = e === void 0 ? a._$AB : e._$AA;
  if (t === void 0) {
    const r = o.insertBefore(Wr(), i), n = o.insertBefore(Wr(), i);
    t = new Cm(r, n, a, a.options);
  } else {
    const r = t._$AB.nextSibling, n = t._$AM, c = n !== a;
    if (c) {
      let m;
      t._$AQ?.(a), t._$AM = a, t._$AP !== void 0 && (m = a._$AU) !== n._$AU && t._$AP(m);
    }
    if (r !== i || c) {
      let m = t._$AA;
      for (; m !== r; ) {
        const g = m.nextSibling;
        o.insertBefore(m, i), m = g;
      }
    }
  }
  return t;
}, to = (a, e, t = a) => (a._$AI(e, t), a), Am = {}, Qn = (a, e = Am) => a._$AH = e, Fm = (a) => a._$AH, Ra = (a) => {
  a._$AP?.(!1, !0);
  let e = a._$AA;
  const t = a._$AB.nextSibling;
  for (; e !== t; ) {
    const o = e.nextSibling;
    e.remove(), e = o;
  }
};
/**
 * @license
 * Copyright 2020 Google LLC
 * SPDX-License-Identifier: BSD-3-Clause
 */
const Ji = bi(class extends vi {
  constructor(a) {
    if (super(a), a.type !== Ze.PROPERTY && a.type !== Ze.ATTRIBUTE && a.type !== Ze.BOOLEAN_ATTRIBUTE)
      throw Error("The `live` directive is not allowed on child or event bindings");
    if (!zm(a))
      throw Error("`live` bindings can only contain a single expression");
  }
  render(a) {
    return a;
  }
  update(a, [e]) {
    if (e === we || e === E)
      return e;
    const t = a.element, o = a.name;
    if (a.type === Ze.PROPERTY) {
      if (e === t[o])
        return we;
    } else if (a.type === Ze.BOOLEAN_ATTRIBUTE) {
      if (!!e === t.hasAttribute(o))
        return we;
    } else if (a.type === Ze.ATTRIBUTE && t.getAttribute(o) === e + "")
      return we;
    return Qn(a), e;
  }
}), Jn = (a = "value") => (e, t) => {
  const o = e.constructor, { attributeChangedCallback: i } = o.prototype;
  o.prototype.attributeChangedCallback = function(r, n, c) {
    const m = o.getPropertyOptions(a), g = typeof m.attribute == "string" ? m.attribute : a;
    if (r === g) {
      const f = m.converter || Co, x = (typeof f == "function" ? f : f?.fromAttribute ?? Co.fromAttribute)(c, m.type);
      this[a] !== x && (this[t] = x);
    }
    i.call(this, r, n, c);
  };
}, es = (a) => {
  const e = h(a);
  return s`
    .${e}.error-highlight {
      padding: 2px 5px;
      background-color: var(--maui-color-message-error);
      ${p({ size: "forms-small", tenant: a })};
    }

    .${e} .message {
      -webkit-font-smoothing: none;
      -moz-osx-font-smoothing: none;
    }
  `;
}, Nm = s`
  ${C}

  ${A}

  :host {
    display: inline-block;
    position: relative;
    line-height: 0;
  }

  .error-highlight {
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    font-family: var(--maui-font-family-copy);
    ${p({ size: "forms-small", tenant: "wl" })};

    font-weight: var(--maui-font-weight-regular);
    color: white;
    background-color: var(--maui-color-message-bg-error);
    padding: 1px 5px;
  }
`, Im = s`
  .os.error-highlight {
    display: inline-grid;
    grid-template-columns: max-content auto;
    align-items: flex-start;

    column-gap: 4px;

    color: var(--maui-color-message-error);
    padding: 3px 8px 4px;

    ${p({ size: "forms-small", tenant: "os" })};
  }

  .os.error-highlight maui-icon {
    --maui-icon-color: var(--maui-color-message-error);
  }
  .os.error-highlight .message {
    padding-top: 1px;
  }
`, Um = s`
  .sn.error-highlight {
    padding: 2px 6px;
    background-color: var(--maui-color-message-error);

    ${p({ size: "forms-small", tenant: "sn" })};
  }
`, Rm = s`
  ${es("lh")}
`, Dm = s`
  :host {
    display: block;
  }

  .lx.error-highlight {
    display: inline-block;
    padding: 2px 6px;
    color: var(--maui-color-text-copy);

    ${p({ size: "forms-small", tenant: "lx" })};
  }
`, Em = s`
  ${es("b2b")}
`, Pm = s`
  .four_y.error-highlight {
    display: inline-block;
    padding: var(--maui-spacing-1) var(--maui-spacing-2);
    border-radius: var(--maui-radii-default-radius);
    background-color: var(--maui-color-message-error);

    ${p({ size: "forms-small", tenant: "four_y" })};
  }
`, Hm = s`
  .mmg.error-highlight {
    display: inline-block;
    padding: unset;
    border-radius: var(--maui-radii-default-radius);
    color: var(--maui-color-message-error);
    background-color: transparent;

    ${p({ size: "forms-small", tenant: "mmg" })};
  }
`, Gm = [
  Nm,
  Im,
  Um,
  Rm,
  Dm,
  Em,
  Pm,
  Hm
];
class ts extends k {
  constructor() {
    super(), this.componentName = "error-highlight";
  }
  render() {
    return u`<span
      class="${y({
      [this.componentName]: !0,
      [this.theme]: !0
    })}"
      >${this.theme === "os" ? u`<maui-icon
            size="small"
            use="icon-error"
            .theme=${this.theme}
          ></maui-icon>` : ""}<span class="message"><slot></slot></span
    ></span>`;
  }
}
ts.styles = Gm;
w("maui-error-highlight", ts);
const os = (a) => {
  const e = h(a);
  return s`
    .${e}.switch {
      color: var(--maui-color-text-caption);
      ${p({ size: "forms-large", tenant: a })};
    }

    .${e}.switch .control {
      border: 2px solid var(--maui-color-grey-07);
    }

    .${e}.switch .thumb {
      background-color: var(--maui-color-grey-07);
    }

    .${e}.switch .state {
      color: var(--maui-color-text-caption);
    }

    /* Checked Styles */
    .${e}.switch.is-checked .control .thumb {
      background-color: var(--maui-color-brand-light);
    }

    .${e}.switch.is-checked .control {
      background-color: var(--maui-color-brand-primary);
      border: 2px solid transparent;
    }

    .${e}.switch.is-checked:not(.is-disabled) .state {
      color: var(--maui-color-text-copy);
    }

    .${e}.switch.is-checked.has-focus:not(.is-disabled) .state {
      color: var(--maui-color-text-copy);
    }

    .${e}.switch.has-focus:not(.is-disabled) .state {
      color: var(--maui-color-text-copy);
    }

    /* Checked Hover Styles */

    .${e}.switch.is-checked:not(.is-disabled):hover .control {
      background-color: var(--maui-color-interaction-interactionhover);
    }

    .${e}.switch.is-checked:not(.is-disabled):hover .state {
      color: var(--maui-color-interaction-interactionhover);
    }

    /* Hover Styles */
    .${e}.switch:not(.is-disabled):hover .state {
      color: var(--maui-color-interaction-interactionhover);
    }

    .${e}.switch:not(.is-checked):not(.is-disabled):hover .thumb {
      background-color: var(--maui-color-interaction-interactionhover);
    }

    .${e}.switch:not(.is-checked):not(.is-disabled):hover .control {
      border: 2px solid var(--maui-color-interaction-interactionhover);
    }

    /* Disabled Styles */

    .${e}.switch.is-disabled .state {
      color: var(--maui-color-disabled-foreground);
    }

    .${e}.is-disabled .control {
      border-color: var(--maui-color-disabled-background);
    }

    .${e}.switch.is-disabled .thumb {
      background-color: var(--maui-color-disabled-background);
    }

    .${e}.is-checked.is-disabled .control {
      background-color: var(--maui-color-disabled-background);
    }
  `;
}, Ym = s`
  ${C}

  ${A}

  .switch {
    position: relative;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    cursor: pointer;
    --maui-focus-radius: var(--maui-radii-pill-radius);
    align-items: center;
    font-family: var(--maui-font-family-copy);
    ${p({ size: "forms-large", tenant: "wl" })};
  }

  label {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .control {
    flex: 0 0 auto;
    position: relative;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 55px;
    height: 30px;
    border-radius: 38px;
    transition: 150ms border-color, 150ms background-color;
    box-sizing: border-box;
  }

  .control .thumb {
    width: 20px;
    height: 20px;
    border-radius: 38px;
    transform: translateX(-12.5px);
    transition: 0.3s ease;
    box-sizing: border-box;
  }

  .input {
    position: absolute;
    opacity: 0;
    padding: 0;
    margin: 0px;
    pointer-events: none;
  }

  /* Checked Styles */
  .switch.is-checked .control .thumb {
    transform: translateX(12.5px);
  }

  .switch.is-disabled {
    cursor: not-allowed;
  }

  :host(:focus-visible) {
    outline: 0px;
  }

  ${H("switch:not(.is-disabled)", "has-focus", "control")}
`, Tm = s`
  ${os("lh")}
`, Xm = s`
  .lx.switch {
    font-weight: var(--maui-font-weight-regular);
    ${p({ size: "forms-large", tenant: "lx" })};

    color: var(--maui-color-interaction-buttonsecondary);
  }

  .lx.switch .control {
    border: 2px solid var(--maui-color-interaction-buttonsecondary);
  }

  .lx.switch .control .thumb {
    background-color: var(--maui-color-interaction-buttonsecondary);
  }

  .lx.switch .state {
    height: 21px;
  }

  /* Checked Styles */
  .lx.switch.is-checked .control .thumb {
    background-color: var(--maui-color-brand-white);
  }

  .lx.switch.is-checked .control {
    background-color: var(--maui-color-interaction-buttonprimary);
    border: 2px solid transparent;
  }

  .lx.switch.is-checked .state {
    color: var(--maui-color-grey-08);
  }

  /* Checked Hover Styles */

  .lx.switch.is-checked:not(.is-disabled):hover .control {
    background-color: var(--maui-color-interaction-buttonprimaryhover);
  }

  .lx.switch.is-disabled:focus,
  .lx.switch.is-checked.is-disabled:focus {
    outline: none;
    border: 0;
  }

  /* Hover Styles */

  .lx.switch:not(.is-disabled):hover .state {
    color: var(--maui-color-interaction-interactionhover);
    text-decoration-line: underline;
  }

  .lx.switch:not(.is-checked):not(.is-disabled):hover .thumb {
    background-color: var(--maui-color-interaction-interactionhover);
  }

  .lx.switch:not(.is-checked):not(.is-disabled):hover .control {
    border-color: var(--maui-color-interaction-interactionhover);
  }

  /* Disabled Styles */

  .lx.switch.is-disabled .state {
    color: var(--maui-color-disabled-foreground);
  }

  .lx.is-disabled.is-checked .state {
    color: var(--maui-color-disabled-foreground);
  }

  .lx.is-disabled .control {
    border-color: var(--maui-color-disabled-background);
  }

  .lx.switch.is-disabled .thumb {
    background-color: var(--maui-color-disabled-background);
  }

  .lx.is-checked.is-disabled .control {
    background-color: var(--maui-color-disabled-background);
    border-color: var(--maui-color-disabled-background);
  }
`, Vm = s`
  .sn.switch {
    font-weight: var(--maui-font-weight-regular);
    ${p({ size: "forms-large", tenant: "sn" })};

    color: var(--maui-color-interaction-buttonsecondary);
  }

  .sn.switch .control .thumb {
    background-color: var(--maui-color-brand-secondary);
  }

  .sn.switch:not(.is-disabled) .control {
    border: 1px solid var(--maui-color-brand-secondary);
  }

  .sn.switch:not(.is-checked):not(.is-disabled):focus .thumb {
    background-color: var(--maui-color-interaction-buttonsecondary);
  }

  /* Checked Styles */
  .sn.switch.is-checked .control .thumb {
    background-color: var(--maui-color-brand-light);
  }

  .sn.switch.is-checked:not(.is-disabled) .control {
    background-color: var(--maui-color-brand-secondary);
  }

  .sn.switch.is-checked .state {
    font-weight: var(--maui-font-weight-bold);
  }

  /* Hover Styles */

  .sn.switch.is-checked:not(.is-disabled):hover .control {
    background-color: var(--maui-color-interaction-buttonsecondaryhover);
  }

  .sn.switch:not(.is-disabled):hover .state {
    text-decoration-line: underline;
  }

  .sn.switch.is-checked:not(.is-disabled):hover .state {
    font-weight: var(--maui-font-weight-bold);
    text-decoration-line: underline;
  }

  .sn.switch:not(.is-checked):not(.is-disabled):hover .state {
    color: var(--maui-color-interaction-buttonsecondaryhover);
  }

  .sn.switch:not(.is-checked):not(.is-disabled):hover .control {
    border: 1px solid var(--maui-color-interaction-buttonsecondaryhover);
    border-color: var(--maui-color-interaction-buttonsecondaryhover);
  }

  .sn.switch:not(.is-checked):not(.is-disabled):hover .thumb {
    background-color: var(--maui-color-interaction-buttonsecondaryhover);
  }

  /* Disabled Styles */

  .sn.switch.is-disabled .state {
    color: var(--maui-color-disabled-foreground);
  }

  .sn.is-disabled.is-checked .state {
    color: var(--maui-color-disabled-foreground);
  }

  .sn.switch.is-disabled:not(.is-checked) .thumb {
    background-color: var(--maui-color-disabled-foreground);
  }

  .sn.switch.is-disabled:not(.is-checked) .control {
    border: 1px solid var(--maui-color-disabled-foreground);
  }

  .sn.switch.is-disabled.is-checked .control {
    background-color: var(--maui-color-disabled-foreground);
  }

  .sn.is-checked.is-disabled .thumb {
    background-color: var(--maui-color-brand-light);
  }
`, jm = s`
  .os.switch {
    font-family: var(--maui-font-family-copy);
    font-weight: var(--maui-font-weight-regular);
    ${p({ size: "forms-large", tenant: "os" })};

    color: var(--maui-color-text-copy);
  }

  .os.switch .control .thumb {
    width: 24px;
    height: 24px;
  }

  .os.switch .control {
    background-color: var(--maui-color-grey-04);
    border: 2px solid transparent;
  }

  .os.switch .control .thumb {
    background-color: var(--maui-color-brand-light);
  }

  /* Checked Styles */
  .os.switch.is-checked .control {
    background-color: var(--maui-color-interaction-buttonprimary);
  }

  /* Hover Styles */

  .os.switch.is-checked:not(.is-disabled):hover .control {
    background-color: var(--maui-color-interaction-buttonprimaryhover);
  }

  .os.switch:not(.is-checked):not(.is-disabled):hover .control {
    background: var(--maui-color-grey-05);
  }

  /* Disabled Styles */

  .os.switch.is-disabled .state {
    color: var(--maui-color-disabled-foreground);
  }

  .os.switch.is-disabled .control {
    background-color: var(--maui-color-disabled-foreground);
  }
`, qm = s`
  ${os("b2b")}
`, Km = s`
  .four_y.switch {
    font-family: var(--maui-font-family-copy);
    font-weight: var(--maui-font-weight-regular);
    ${p({ size: "forms-large", tenant: "four_y" })};
  }

  .four_y.switch .control .thumb {
    width: 20px;
    height: 20px;
  }

  .four_y.switch:not(.is-disabled) .control {
    background-color: transparent;
    border: 2px solid var(--maui-color-interaction-interaction);
  }

  .four_y.switch:not(.is-disabled) .control .thumb {
    background-color: var(--maui-color-interaction-interaction);
  }

  .four_y.switch:not(.is-disabled) .state {
    color: var(--maui-color-interaction-interaction);
  }

  /* Checked Styles */
  .four_y.switch.is-checked:not(.is-disabled) .control {
    background-color: var(--maui-color-interaction-interaction);
  }
  .four_y.switch.is-checked:not(.is-disabled) .thumb {
    background-color: var(--maui-color-brand-light);
  }

  .four_y.switch.is-checked .state {
    font-weight: var(--maui-font-weight-bold);
  }

  .four_y.switch.is-checked:not(.is-disabled) .state {
    color: var(--maui-color-interaction-interaction);
  }

  /* Hover Styles */

  .four_y.switch:not(.is-disabled):hover .thumb {
    background-color: var(--maui-color-interaction-interactionhover);
  }

  .four_y.switch:not(.is-disabled):hover .control {
    border-color: var(--maui-color-interaction-interactionhover);
  }

  .four_y.switch:not(.is-disabled):hover .state {
    color: var(--maui-color-interaction-interactionhover);
    text-decoration: underline;
  }

  .four_y.switch.is-checked:not(.is-disabled):hover .thumb {
    background-color: var(--maui-color-brand-light);
  }

  .four_y.switch.is-checked:not(.is-disabled):hover .control {
    background-color: var(--maui-color-interaction-interactionhover);
    border-color: var(--maui-color-interaction-interactionhover);
  }

  /* Disabled Styles */

  .four_y.switch.is-disabled .state {
    color: var(--maui-color-disabled-foreground);
  }

  .four_y.switch.is-disabled .control {
    border: 2px solid var(--maui-color-disabled-background);
  }

  .four_y.switch.is-disabled .thumb {
    background-color: var(--maui-color-disabled-background);
  }

  .four_y.switch.is-checked.is-disabled .control {
    background-color: var(--maui-color-disabled-background);
    border: 2px solid var(--maui-color-disabled-background);
  }

  .four_y.switch.is-checked.is-disabled .thumb {
    background-color: var(--maui-color-brand-light);
  }
`, Wm = s`
  .mmg.switch {
    flex-direction: row-reverse;
    gap: var(--maui-line-height-3);
    color: var(--maui-color-text-copy);
    line-height: var(--maui-line-height-4);
  }

  .mmg.switch .control {
    border: 2px solid var(--maui-color-brand-primary);
  }

  .mmg.switch .thumb {
    background-color: var(--maui-color-brand-primary);
  }

  .mmg.switch .state {
    color: var(--maui-color-text-copy);
  }

  /* Checked Styles */
  .mmg.switch.is-checked .control .thumb {
    background-color: var(--maui-color-brand-light);
  }

  .mmg.switch.is-checked .control {
    background-color: var(--maui-color-interaction-interactionhover);
    border: 2px solid transparent;
  }

  .mmg.switch.is-checked:not(.is-disabled) .state {
    color: var(--maui-color-text-copy);
  }

  .mmg.switch.is-checked.has-focus:not(.is-disabled) .state {
    color: var(--maui-color-text-copy);
  }

  .mmg.switch.has-focus:not(.is-disabled) .state {
    color: var(--maui-color-text-copy);
  }

  /* Checked Hover Styles */

  .mmg.switch.is-checked:not(.is-disabled):hover .control {
    background-color: var(--maui-color-interaction-interactionhover);
  }

  .mmg.switch.is-checked:not(.is-disabled):hover .state {
    color: var(--maui-color-text-copy);
  }

  /* Hover Styles */
  .mmg.switch:not(.is-disabled):hover .state {
    color: var(--maui-color-text-copy);
  }

  .mmg.switch:not(.is-checked):not(.is-disabled):hover .thumb {
    background-color: var(--maui-color-interaction-interactionhover);
  }

  .mmg.switch:not(.is-checked):not(.is-disabled):hover .control {
    border: 2px solid var(--maui-color-interaction-interactionhover);
  }

  /* Disabled Styles */

  .mmg.switch.is-disabled .state {
    color: var(--maui-color-disabled-brand-mmg-grey2);
  }

  .mmg.is-disabled .control {
    border-color: var(--maui-color-brand-mmg-grey2);
    background-color: var(--maui-color-brand-mmg-grey2);
  }

  .mmg.switch.is-disabled .thumb {
    background-color: var(--maui-color-brand-mmg-grey3);
  }

  .mmg.is-checked.is-disabled .control {
    background-color: var(--maui-color-brand-mmg-grey2);
  }

  .mmg.switch.is-checked.is-disabled .control .thumb {
    background-color: var(--maui-color-brand-mmg-grey3);
  }
`, Zm = [
  Ym,
  Tm,
  jm,
  Xm,
  Vm,
  qm,
  Km,
  Wm
];
var Qm = Object.defineProperty, Jm = Object.getOwnPropertyDescriptor, Ho = (a, e, t, o) => {
  for (var i = o > 1 ? void 0 : o ? Jm(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 && Qm(e, t, i), i;
};
class Pt extends Ro {
  constructor() {
    super({ unCheckableMode: !0 }), this.formControlController = new tt(this, {
      value: (e) => e.checked ? e.value || "on" : void 0,
      defaultValue: (e) => e.defaultChecked,
      setValue: (e, t) => {
        e.checked = t;
      }
    }), this.name = "", this.state = "", this.inactiveState = "", this.value = "", this.defaultChecked = !1, this.componentName = "switch";
  }
  /** returns validity state valid (no validation) */
  get validity() {
    return fi;
  }
  firstUpdated() {
    super.firstUpdated(), this.checked = this.checked || this.defaultChecked;
  }
  focus(e) {
    super.handleFocus(), this.input.focus(e);
  }
  blur() {
    super.handleBlur(), this.input.blur();
  }
  handleInput() {
    this.emit("maui-change", { detail: this.checked });
  }
  handleKeyDown(e) {
    e.key === "ArrowLeft" && (e.preventDefault(), this.checked = !1, this.emit("maui-change", { detail: this.checked })), e.key === "ArrowRight" && (e.preventDefault(), this.checked = !0, this.emit("maui-change", { detail: this.checked })), e.key === "Enter" && (e.preventDefault(), this.checked = !this.checked, this.emit("maui-change", { detail: this.checked }));
  }
  render() {
    const e = this.id ? this.id : "defaultSwitchID";
    return u`<label
      class=${y({
      switch: !0,
      [this.theme]: !0,
      "is-checked": this.checked,
      "is-disabled": this.disabled,
      "has-focus": this.hasFocus
    })}
      for=${e}
      ><input
        id=${e}
        class="input"
        type="checkbox"
        title=${this.title}
        .value=${this.value}
        .checked=${Ji(this.checked)}
        ?disabled=${this.disabled}
        name=${this.name}
        aria-checked=${this.checked ? "true" : "false"}
        aria-labelledby="${e}-label"
        role="switch"
        @keydown=${this.handleKeyDown}
        @input=${this.handleInput}
        @click=${this.handleClick}
      />
      <span class="control"><span class="thumb"></span></span>
      <div id="${e}-label" class="state">
        ${this.inactiveState && !this.checked ? `${this.inactiveState}` : this.state}
      </div>
    </label> `;
  }
}
Pt.styles = Zm;
Ho([
  M('input[type="checkbox"]')
], Pt.prototype, "input", 2);
Ho([
  l({ type: String })
], Pt.prototype, "name", 2);
Ho([
  l({ type: String })
], Pt.prototype, "state", 2);
Ho([
  l({ type: String })
], Pt.prototype, "inactiveState", 2);
Ho([
  l({ type: String })
], Pt.prototype, "value", 2);
Ho([
  Jn("checked"),
  l({ type: Boolean })
], Pt.prototype, "defaultChecked", 2);
w("maui-switch", Pt);
const eh = ["top", "right", "bottom", "left"], zo = Math.min, no = Math.max, ea = Math.round, Ti = Math.floor, Je = (a) => ({
  x: a,
  y: a
}), th = {
  left: "right",
  right: "left",
  bottom: "top",
  top: "bottom"
}, oh = {
  start: "end",
  end: "start"
};
function Xa(a, e, t) {
  return no(a, zo(e, t));
}
function Go(a, e) {
  return typeof a == "function" ? a(e) : a;
}
function co(a) {
  return a.split("-")[0];
}
function Si(a) {
  return a.split("-")[1];
}
function is(a) {
  return a === "x" ? "y" : "x";
}
function pr(a) {
  return a === "y" ? "height" : "width";
}
function Ao(a) {
  return ["top", "bottom"].includes(co(a)) ? "y" : "x";
}
function gr(a) {
  return is(Ao(a));
}
function ih(a, e, t) {
  t === void 0 && (t = !1);
  const o = Si(a), i = gr(a), r = pr(i);
  let n = i === "x" ? o === (t ? "end" : "start") ? "right" : "left" : o === "start" ? "bottom" : "top";
  return e.reference[r] > e.floating[r] && (n = ta(n)), [n, ta(n)];
}
function ah(a) {
  const e = ta(a);
  return [Va(a), e, Va(e)];
}
function Va(a) {
  return a.replace(/start|end/g, (e) => oh[e]);
}
function rh(a, e, t) {
  const o = ["left", "right"], i = ["right", "left"], r = ["top", "bottom"], n = ["bottom", "top"];
  switch (a) {
    case "top":
    case "bottom":
      return t ? e ? i : o : e ? o : i;
    case "left":
    case "right":
      return e ? r : n;
    default:
      return [];
  }
}
function nh(a, e, t, o) {
  const i = Si(a);
  let r = rh(co(a), t === "start", o);
  return i && (r = r.map((n) => n + "-" + i), e && (r = r.concat(r.map(Va)))), r;
}
function ta(a) {
  return a.replace(/left|right|bottom|top/g, (e) => th[e]);
}
function sh(a) {
  return {
    top: 0,
    right: 0,
    bottom: 0,
    left: 0,
    ...a
  };
}
function as(a) {
  return typeof a != "number" ? sh(a) : {
    top: a,
    right: a,
    bottom: a,
    left: a
  };
}
function oa(a) {
  const {
    x: e,
    y: t,
    width: o,
    height: i
  } = a;
  return {
    width: o,
    height: i,
    top: t,
    left: e,
    right: e + o,
    bottom: t + i,
    x: e,
    y: t
  };
}
function Zr(a, e, t) {
  let {
    reference: o,
    floating: i
  } = a;
  const r = Ao(e), n = gr(e), c = pr(n), m = co(e), g = r === "y", f = o.x + o.width / 2 - i.width / 2, v = o.y + o.height / 2 - i.height / 2, x = o[c] / 2 - i[c] / 2;
  let _;
  switch (m) {
    case "top":
      _ = {
        x: f,
        y: o.y - i.height
      };
      break;
    case "bottom":
      _ = {
        x: f,
        y: o.y + o.height
      };
      break;
    case "right":
      _ = {
        x: o.x + o.width,
        y: v
      };
      break;
    case "left":
      _ = {
        x: o.x - i.width,
        y: v
      };
      break;
    default:
      _ = {
        x: o.x,
        y: o.y
      };
  }
  switch (Si(e)) {
    case "start":
      _[n] -= x * (t && g ? -1 : 1);
      break;
    case "end":
      _[n] += x * (t && g ? -1 : 1);
      break;
  }
  return _;
}
const lh = async (a, e, t) => {
  const {
    placement: o = "bottom",
    strategy: i = "absolute",
    middleware: r = [],
    platform: n
  } = t, c = r.filter(Boolean), m = await (n.isRTL == null ? void 0 : n.isRTL(e));
  let g = await n.getElementRects({
    reference: a,
    floating: e,
    strategy: i
  }), {
    x: f,
    y: v
  } = Zr(g, o, m), x = o, _ = {}, $ = 0;
  for (let L = 0; L < c.length; L++) {
    const {
      name: N,
      fn: R
    } = c[L], {
      x: G,
      y: T,
      data: se,
      reset: W
    } = await R({
      x: f,
      y: v,
      initialPlacement: o,
      placement: x,
      strategy: i,
      middlewareData: _,
      rects: g,
      platform: n,
      elements: {
        reference: a,
        floating: e
      }
    });
    f = G ?? f, v = T ?? v, _ = {
      ..._,
      [N]: {
        ..._[N],
        ...se
      }
    }, W && $ <= 50 && ($++, typeof W == "object" && (W.placement && (x = W.placement), W.rects && (g = W.rects === !0 ? await n.getElementRects({
      reference: a,
      floating: e,
      strategy: i
    }) : W.rects), {
      x: f,
      y: v
    } = Zr(g, x, m)), L = -1);
  }
  return {
    x: f,
    y: v,
    placement: x,
    strategy: i,
    middlewareData: _
  };
};
async function ia(a, e) {
  var t;
  e === void 0 && (e = {});
  const {
    x: o,
    y: i,
    platform: r,
    rects: n,
    elements: c,
    strategy: m
  } = a, {
    boundary: g = "clippingAncestors",
    rootBoundary: f = "viewport",
    elementContext: v = "floating",
    altBoundary: x = !1,
    padding: _ = 0
  } = Go(e, a), $ = as(_), N = c[x ? v === "floating" ? "reference" : "floating" : v], R = oa(await r.getClippingRect({
    element: (t = await (r.isElement == null ? void 0 : r.isElement(N))) == null || t ? N : N.contextElement || await (r.getDocumentElement == null ? void 0 : r.getDocumentElement(c.floating)),
    boundary: g,
    rootBoundary: f,
    strategy: m
  })), G = v === "floating" ? {
    x: o,
    y: i,
    width: n.floating.width,
    height: n.floating.height
  } : n.reference, T = await (r.getOffsetParent == null ? void 0 : r.getOffsetParent(c.floating)), se = await (r.isElement == null ? void 0 : r.isElement(T)) ? await (r.getScale == null ? void 0 : r.getScale(T)) || {
    x: 1,
    y: 1
  } : {
    x: 1,
    y: 1
  }, W = oa(r.convertOffsetParentRelativeRectToViewportRelativeRect ? await r.convertOffsetParentRelativeRectToViewportRelativeRect({
    elements: c,
    rect: G,
    offsetParent: T,
    strategy: m
  }) : G);
  return {
    top: (R.top - W.top + $.top) / se.y,
    bottom: (W.bottom - R.bottom + $.bottom) / se.y,
    left: (R.left - W.left + $.left) / se.x,
    right: (W.right - R.right + $.right) / se.x
  };
}
const ch = (a) => ({
  name: "arrow",
  options: a,
  async fn(e) {
    const {
      x: t,
      y: o,
      placement: i,
      rects: r,
      platform: n,
      elements: c,
      middlewareData: m
    } = e, {
      element: g,
      padding: f = 0
    } = Go(a, e) || {};
    if (g == null)
      return {};
    const v = as(f), x = {
      x: t,
      y: o
    }, _ = gr(i), $ = pr(_), L = await n.getDimensions(g), N = _ === "y", R = N ? "top" : "left", G = N ? "bottom" : "right", T = N ? "clientHeight" : "clientWidth", se = r.reference[$] + r.reference[_] - x[_] - r.floating[$], W = x[_] - r.reference[_], Ke = await (n.getOffsetParent == null ? void 0 : n.getOffsetParent(g));
    let Zt = Ke ? Ke[T] : 0;
    (!Zt || !await (n.isElement == null ? void 0 : n.isElement(Ke))) && (Zt = c.floating[T] || r.floating[$]);
    const Qo = se / 2 - W / 2, Qt = Zt / 2 - L[$] / 2 - 1, Bt = zo(v[R], Qt), Jo = zo(v[G], Qt), Jt = Bt, ei = Zt - L[$] - Jo, ge = Zt / 2 - L[$] / 2 + Qo, Mo = Xa(Jt, ge, ei), vt = !m.arrow && Si(i) != null && ge !== Mo && r.reference[$] / 2 - (ge < Jt ? Bt : Jo) - L[$] / 2 < 0, We = vt ? ge < Jt ? ge - Jt : ge - ei : 0;
    return {
      [_]: x[_] + We,
      data: {
        [_]: Mo,
        centerOffset: ge - Mo - We,
        ...vt && {
          alignmentOffset: We
        }
      },
      reset: vt
    };
  }
}), dh = function(a) {
  return a === void 0 && (a = {}), {
    name: "flip",
    options: a,
    async fn(e) {
      var t, o;
      const {
        placement: i,
        middlewareData: r,
        rects: n,
        initialPlacement: c,
        platform: m,
        elements: g
      } = e, {
        mainAxis: f = !0,
        crossAxis: v = !0,
        fallbackPlacements: x,
        fallbackStrategy: _ = "bestFit",
        fallbackAxisSideDirection: $ = "none",
        flipAlignment: L = !0,
        ...N
      } = Go(a, e);
      if ((t = r.arrow) != null && t.alignmentOffset)
        return {};
      const R = co(i), G = Ao(c), T = co(c) === c, se = await (m.isRTL == null ? void 0 : m.isRTL(g.floating)), W = x || (T || !L ? [ta(c)] : ah(c)), Ke = $ !== "none";
      !x && Ke && W.push(...nh(c, L, $, se));
      const Zt = [c, ...W], Qo = await ia(e, N), Qt = [];
      let Bt = ((o = r.flip) == null ? void 0 : o.overflows) || [];
      if (f && Qt.push(Qo[R]), v) {
        const ge = ih(i, n, se);
        Qt.push(Qo[ge[0]], Qo[ge[1]]);
      }
      if (Bt = [...Bt, {
        placement: i,
        overflows: Qt
      }], !Qt.every((ge) => ge <= 0)) {
        var Jo, Jt;
        const ge = (((Jo = r.flip) == null ? void 0 : Jo.index) || 0) + 1, Mo = Zt[ge];
        if (Mo)
          return {
            data: {
              index: ge,
              overflows: Bt
            },
            reset: {
              placement: Mo
            }
          };
        let vt = (Jt = Bt.filter((We) => We.overflows[0] <= 0).sort((We, Ct) => We.overflows[1] - Ct.overflows[1])[0]) == null ? void 0 : Jt.placement;
        if (!vt)
          switch (_) {
            case "bestFit": {
              var ei;
              const We = (ei = Bt.filter((Ct) => {
                if (Ke) {
                  const zt = Ao(Ct.placement);
                  return zt === G || // Create a bias to the `y` side axis due to horizontal
                  // reading directions favoring greater width.
                  zt === "y";
                }
                return !0;
              }).map((Ct) => [Ct.placement, Ct.overflows.filter((zt) => zt > 0).reduce((zt, xl) => zt + xl, 0)]).sort((Ct, zt) => Ct[1] - zt[1])[0]) == null ? void 0 : ei[0];
              We && (vt = We);
              break;
            }
            case "initialPlacement":
              vt = c;
              break;
          }
        if (i !== vt)
          return {
            reset: {
              placement: vt
            }
          };
      }
      return {};
    }
  };
};
function Qr(a, e) {
  return {
    top: a.top - e.height,
    right: a.right - e.width,
    bottom: a.bottom - e.height,
    left: a.left - e.width
  };
}
function Jr(a) {
  return eh.some((e) => a[e] >= 0);
}
const uh = function(a) {
  return a === void 0 && (a = {}), {
    name: "hide",
    options: a,
    async fn(e) {
      const {
        rects: t
      } = e, {
        strategy: o = "referenceHidden",
        ...i
      } = Go(a, e);
      switch (o) {
        case "referenceHidden": {
          const r = await ia(e, {
            ...i,
            elementContext: "reference"
          }), n = Qr(r, t.reference);
          return {
            data: {
              referenceHiddenOffsets: n,
              referenceHidden: Jr(n)
            }
          };
        }
        case "escaped": {
          const r = await ia(e, {
            ...i,
            altBoundary: !0
          }), n = Qr(r, t.floating);
          return {
            data: {
              escapedOffsets: n,
              escaped: Jr(n)
            }
          };
        }
        default:
          return {};
      }
    }
  };
};
async function mh(a, e) {
  const {
    placement: t,
    platform: o,
    elements: i
  } = a, r = await (o.isRTL == null ? void 0 : o.isRTL(i.floating)), n = co(t), c = Si(t), m = Ao(t) === "y", g = ["left", "top"].includes(n) ? -1 : 1, f = r && m ? -1 : 1, v = Go(e, a);
  let {
    mainAxis: x,
    crossAxis: _,
    alignmentAxis: $
  } = typeof v == "number" ? {
    mainAxis: v,
    crossAxis: 0,
    alignmentAxis: null
  } : {
    mainAxis: v.mainAxis || 0,
    crossAxis: v.crossAxis || 0,
    alignmentAxis: v.alignmentAxis
  };
  return c && typeof $ == "number" && (_ = c === "end" ? $ * -1 : $), m ? {
    x: _ * f,
    y: x * g
  } : {
    x: x * g,
    y: _ * f
  };
}
const hh = function(a) {
  return a === void 0 && (a = 0), {
    name: "offset",
    options: a,
    async fn(e) {
      var t, o;
      const {
        x: i,
        y: r,
        placement: n,
        middlewareData: c
      } = e, m = await mh(e, a);
      return n === ((t = c.offset) == null ? void 0 : t.placement) && (o = c.arrow) != null && o.alignmentOffset ? {} : {
        x: i + m.x,
        y: r + m.y,
        data: {
          ...m,
          placement: n
        }
      };
    }
  };
}, ph = function(a) {
  return a === void 0 && (a = {}), {
    name: "shift",
    options: a,
    async fn(e) {
      const {
        x: t,
        y: o,
        placement: i
      } = e, {
        mainAxis: r = !0,
        crossAxis: n = !1,
        limiter: c = {
          fn: (N) => {
            let {
              x: R,
              y: G
            } = N;
            return {
              x: R,
              y: G
            };
          }
        },
        ...m
      } = Go(a, e), g = {
        x: t,
        y: o
      }, f = await ia(e, m), v = Ao(co(i)), x = is(v);
      let _ = g[x], $ = g[v];
      if (r) {
        const N = x === "y" ? "top" : "left", R = x === "y" ? "bottom" : "right", G = _ + f[N], T = _ - f[R];
        _ = Xa(G, _, T);
      }
      if (n) {
        const N = v === "y" ? "top" : "left", R = v === "y" ? "bottom" : "right", G = $ + f[N], T = $ - f[R];
        $ = Xa(G, $, T);
      }
      const L = c.fn({
        ...e,
        [x]: _,
        [v]: $
      });
      return {
        ...L,
        data: {
          x: L.x - t,
          y: L.y - o,
          enabled: {
            [x]: r,
            [v]: n
          }
        }
      };
    }
  };
};
function ga() {
  return typeof window < "u";
}
function Yo(a) {
  return rs(a) ? (a.nodeName || "").toLowerCase() : "#document";
}
function Be(a) {
  var e;
  return (a == null || (e = a.ownerDocument) == null ? void 0 : e.defaultView) || window;
}
function rt(a) {
  var e;
  return (e = (rs(a) ? a.ownerDocument : a.document) || window.document) == null ? void 0 : e.documentElement;
}
function rs(a) {
  return ga() ? a instanceof Node || a instanceof Be(a).Node : !1;
}
function Ge(a) {
  return ga() ? a instanceof Element || a instanceof Be(a).Element : !1;
}
function et(a) {
  return ga() ? a instanceof HTMLElement || a instanceof Be(a).HTMLElement : !1;
}
function en(a) {
  return !ga() || typeof ShadowRoot > "u" ? !1 : a instanceof ShadowRoot || a instanceof Be(a).ShadowRoot;
}
function Oi(a) {
  const {
    overflow: e,
    overflowX: t,
    overflowY: o,
    display: i
  } = Ye(a);
  return /auto|scroll|overlay|hidden|clip/.test(e + o + t) && !["inline", "contents"].includes(i);
}
function gh(a) {
  return ["table", "td", "th"].includes(Yo(a));
}
function ba(a) {
  return [":popover-open", ":modal"].some((e) => {
    try {
      return a.matches(e);
    } catch {
      return !1;
    }
  });
}
function br(a) {
  const e = vr(), t = Ge(a) ? Ye(a) : a;
  return t.transform !== "none" || t.perspective !== "none" || (t.containerType ? t.containerType !== "normal" : !1) || !e && (t.backdropFilter ? t.backdropFilter !== "none" : !1) || !e && (t.filter ? t.filter !== "none" : !1) || ["transform", "perspective", "filter"].some((o) => (t.willChange || "").includes(o)) || ["paint", "layout", "strict", "content"].some((o) => (t.contain || "").includes(o));
}
function bh(a) {
  let e = Nt(a);
  for (; et(e) && !Fo(e); ) {
    if (br(e))
      return e;
    if (ba(e))
      return null;
    e = Nt(e);
  }
  return null;
}
function vr() {
  return typeof CSS > "u" || !CSS.supports ? !1 : CSS.supports("-webkit-backdrop-filter", "none");
}
function Fo(a) {
  return ["html", "body", "#document"].includes(Yo(a));
}
function Ye(a) {
  return Be(a).getComputedStyle(a);
}
function va(a) {
  return Ge(a) ? {
    scrollLeft: a.scrollLeft,
    scrollTop: a.scrollTop
  } : {
    scrollLeft: a.scrollX,
    scrollTop: a.scrollY
  };
}
function Nt(a) {
  if (Yo(a) === "html")
    return a;
  const e = (
    // Step into the shadow DOM of the parent of a slotted node.
    a.assignedSlot || // DOM Element detected.
    a.parentNode || // ShadowRoot detected.
    en(a) && a.host || // Fallback.
    rt(a)
  );
  return en(e) ? e.host : e;
}
function ns(a) {
  const e = Nt(a);
  return Fo(e) ? a.ownerDocument ? a.ownerDocument.body : a.body : et(e) && Oi(e) ? e : ns(e);
}
function hi(a, e, t) {
  var o;
  e === void 0 && (e = []), t === void 0 && (t = !0);
  const i = ns(a), r = i === ((o = a.ownerDocument) == null ? void 0 : o.body), n = Be(i);
  if (r) {
    const c = ja(n);
    return e.concat(n, n.visualViewport || [], Oi(i) ? i : [], c && t ? hi(c) : []);
  }
  return e.concat(i, hi(i, [], t));
}
function ja(a) {
  return a.parent && Object.getPrototypeOf(a.parent) ? a.frameElement : null;
}
function ss(a) {
  const e = Ye(a);
  let t = parseFloat(e.width) || 0, o = parseFloat(e.height) || 0;
  const i = et(a), r = i ? a.offsetWidth : t, n = i ? a.offsetHeight : o, c = ea(t) !== r || ea(o) !== n;
  return c && (t = r, o = n), {
    width: t,
    height: o,
    $: c
  };
}
function fr(a) {
  return Ge(a) ? a : a.contextElement;
}
function Bo(a) {
  const e = fr(a);
  if (!et(e))
    return Je(1);
  const t = e.getBoundingClientRect(), {
    width: o,
    height: i,
    $: r
  } = ss(e);
  let n = (r ? ea(t.width) : t.width) / o, c = (r ? ea(t.height) : t.height) / i;
  return (!n || !Number.isFinite(n)) && (n = 1), (!c || !Number.isFinite(c)) && (c = 1), {
    x: n,
    y: c
  };
}
const vh = /* @__PURE__ */ Je(0);
function ls(a) {
  const e = Be(a);
  return !vr() || !e.visualViewport ? vh : {
    x: e.visualViewport.offsetLeft,
    y: e.visualViewport.offsetTop
  };
}
function fh(a, e, t) {
  return e === void 0 && (e = !1), !t || e && t !== Be(a) ? !1 : e;
}
function uo(a, e, t, o) {
  e === void 0 && (e = !1), t === void 0 && (t = !1);
  const i = a.getBoundingClientRect(), r = fr(a);
  let n = Je(1);
  e && (o ? Ge(o) && (n = Bo(o)) : n = Bo(a));
  const c = fh(r, t, o) ? ls(r) : Je(0);
  let m = (i.left + c.x) / n.x, g = (i.top + c.y) / n.y, f = i.width / n.x, v = i.height / n.y;
  if (r) {
    const x = Be(r), _ = o && Ge(o) ? Be(o) : o;
    let $ = x, L = ja($);
    for (; L && o && _ !== $; ) {
      const N = Bo(L), R = L.getBoundingClientRect(), G = Ye(L), T = R.left + (L.clientLeft + parseFloat(G.paddingLeft)) * N.x, se = R.top + (L.clientTop + parseFloat(G.paddingTop)) * N.y;
      m *= N.x, g *= N.y, f *= N.x, v *= N.y, m += T, g += se, $ = Be(L), L = ja($);
    }
  }
  return oa({
    width: f,
    height: v,
    x: m,
    y: g
  });
}
function yr(a, e) {
  const t = va(a).scrollLeft;
  return e ? e.left + t : uo(rt(a)).left + t;
}
function cs(a, e, t) {
  t === void 0 && (t = !1);
  const o = a.getBoundingClientRect(), i = o.left + e.scrollLeft - (t ? 0 : (
    // RTL <body> scrollbar.
    yr(a, o)
  )), r = o.top + e.scrollTop;
  return {
    x: i,
    y: r
  };
}
function yh(a) {
  let {
    elements: e,
    rect: t,
    offsetParent: o,
    strategy: i
  } = a;
  const r = i === "fixed", n = rt(o), c = e ? ba(e.floating) : !1;
  if (o === n || c && r)
    return t;
  let m = {
    scrollLeft: 0,
    scrollTop: 0
  }, g = J