t: " ";
      left: calc(var(--maui-focus-outline-offset-left, var(--maui-focus-outline-offset)) * -1);
      pointer-events: none;
      position: absolute;
      right: calc(var(--maui-focus-outline-offset-right, var(--maui-focus-outline-offset)) * -1);
      top: calc(var(--maui-focus-outline-offset-y, var(--maui-focus-outline-offset)) * -1);
      z-index: 1080;
  }
`);
}
const Bn = (a) => {
  const e = h(a);
  return s`
    .${e} {
      --maui-button-font-weight: var(--maui-font-weight-bold);
      --maui-button-outline-color: var(
        --maui-color-interaction-buttonsecondary
      ); /** don't care due to width 0 */

      --maui-button-text-color: var(--maui-color-text-copy);
      --maui-button-hover-text-color: var(--maui-color-text-copy);

      --maui-button-inverted-text-color: var(--maui-color-text-copy-inverted);
      --maui-button-inverted-hover-text-color: var(--maui-color-text-copy);

      --maui-button-primary-background-color: var(
        --maui-color-interaction-buttonprimary
      );
      --maui-button-primary-inverted-background-color: var(
        --maui-color-interaction-interaction-inverted
      );

      --maui-button-primary-hover-background-color: var(
        --maui-color-interaction-buttonprimaryhover
      );
      --maui-button-primary-inverted-hover-background-color: var(
        --maui-color-interaction-interaction-invertedhover
      );

      --maui-button-secondary-border-width: 2px; /** might be a global def. */
      --maui-button-secondary-hover-text-color: var(--maui-color-brand-white);
      --maui-button-secondary-hover-background-color: var(
        --maui-color-interaction-buttonsecondary
      );
      --maui-button-secondary-inverted-text-color: var(
        --maui-color-text-copy-inverted
      );
      --maui-button-secondary-inverted-hover-text-color: var(
        --maui-color-text-copy
      );

      --maui-button-secondary-inverted-hover-background-color: var(
        --maui-color-interaction-interaction-invertedhover
      );

      --maui-button-medium-min-height: 50px;
      --maui-button-medium-padding: var(--maui-spacing-3) var(--maui-spacing-5);

      --maui-button-small-min-height: 30px;
      --maui-button-small-padding: 0 var(--maui-spacing-5);

      --maui-button-primary-disabled-background-color: var(
        --maui-color-disabled-background
      );
      --maui-button-primary-disabled-border-color: var(
        --maui-color-disabled-background
      );
      --maui-button-primary-inverted-disabled-background-color: var(
        --maui-color-disabled-background-inverted
      );
      --maui-button-primary-inverted-disabled-border-color: transparent;

      --maui-button-primary-disabled-text-color: var(
        --maui-color-disabled-foreground
      );

      --maui-button-primary-inverted-disabled-text-color: var(
        --maui-color-disabled-foreground-inverted
      );

      --maui-button-secondary-disabled-background-color: transparent;
      --maui-button-secondary-disabled-border-color: var(
        --maui-color-disabled-foreground
      );
      --maui-button-secondary-disabled-text-color: var(
        --maui-color-disabled-foreground
      );

      --maui-button-secondary-inverted-disabled-border-color: var(
        --maui-color-disabled-foreground-inverted
      );
      --maui-button-secondary-inverted-disabled-text-color: var(
        --maui-color-disabled-foreground-inverted
      );
    }

    .${e}.medium {
      ${p({ size: "button-medium", tenant: a })};
    }

    .${e}.small {
      ${p({ size: "button-small", tenant: a })};
    }

    .${e}.primary {
      --maui-button-inverted-text-color: var(--maui-color-text-copy);
    }

    .${e}.button.inverted:focus::after {
      --maui-focus-outline-box-shadow: 0 0 6px 1px
        var(--maui-color-interaction-focus-inverted);
    }

    .${e}.medium.has-icon {
      gap: 8px;
    }
    .${e}.small.has-icon {
      gap: 6px;
    }
  `;
}, Lc = s`
  ${C}

  ${A}

  :host {
    display: inline;
    position: relative;
  }

  .button-mimic,
  .button {
    cursor: pointer;
    border: 0;
    transition: background 0.3s ease-out, border 0.3s ease-out,
      color 0.3s ease-out;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    align-items: center;
    text-align: left;
    position: relative;
    text-decoration: none;
    background-color: transparent;

    justify-content: center;

    border-radius: var(--maui-radii-default-radius);
    font-family: var(--maui-font-family-copy);
    font-weight: var(--maui-button-font-weight);
    outline: var(--maui-button-outline-color) none 0;
    text-transform: var(--maui-button-text-transform);
  }

  ${H("button")}

  /** Icon Button */
  .has-icon {
    display: grid;
    gap: var(--maui-spacing-2);
  }

  .has-icon.icon--left {
    grid-template-areas: 'icon content';
  }

  .has-icon.icon--right {
    grid-template-areas: 'content icon';
  }

  .has-icon.icon--left .icon {
    margin-left: -2px;
  }

  .has-icon.icon--right .icon {
    margin-right: -2px;
  }

  .icon {
    grid-area: icon;
  }

  /** Width -------------------------- */
  .auto {
    width: auto;
  }

  .full {
    width: 100%;
  }

  /** Medium -------------------------- */

  .medium {
    min-height: var(--maui-button-medium-min-height);
    padding: var(--maui-button-medium-padding);
    ${p({ size: "button-medium", tenant: "lh" })};
  }

  .small {
    min-height: var(--maui-button-small-min-height);
    padding: var(--maui-button-small-padding);
    ${p({ size: "button-small", tenant: "lh" })};
  }

  /** Primary -------------------------- */

  .primary {
    background-color: var(--maui-button-primary-background-color);
    border: var(--maui-button-secondary-border-width, 0) solid
      var(--maui-button-primary-background-color);
    color: var(--maui-button-text-color);
  }

  .primary.inverted {
    background-color: var(--maui-button-primary-inverted-background-color);
    border: var(--maui-button-secondary-border-width, 0) solid
      var(--maui-button-primary-inverted-background-color);
    color: var(--maui-button-inverted-text-color);
  }

  .primary:hover {
    background-color: var(--maui-button-primary-hover-background-color);
    border-color: var(--maui-button-primary-hover-background-color);
    color: var(--maui-button-hover-text-color);
  }

  .primary.inverted:hover {
    background-color: var(
      --maui-button-primary-inverted-hover-background-color
    );
    border-color: var(--maui-button-primary-inverted-hover-background-color);
    color: var(--maui-button-inverted-hover-text-color);
  }

  .primary maui-icon {
    --maui-icon-color: var(--maui-button-text-color);
  }

  .primary.inverted maui-icon {
    --maui-icon-color: var(--maui-button-inverted-text-color);
  }

  .primary:hover:not(:disabled) maui-icon {
    --maui-icon-color: var(--maui-button-hover-text-color);
  }

  .primary.inverted:hover:not(:disabled) maui-icon {
    --maui-icon-color: var(--maui-button-inverted-hover-text-color);
  }

  /** Secondary -------------------------- */

  .secondary {
    background-color: var(
      --maui-button-secondary-background-color,
      transparent
    );
    border: var(--maui-button-secondary-border-width, 0) solid
      var(--maui-color-interaction-buttonsecondary, transparent);
    color: var(
      --maui-button-secondary-text-color,
      var(--maui-button-text-color)
    );
  }

  .secondary.inverted {
    background-color: var(
      --maui-button-secondary-inverted-background-color,
      transparent
    );
    border: var(--maui-button-secondary-border-width, 0) solid
      var(--maui-color-interaction-interaction-inverted, transparent);
    color: var(
      --maui-button-secondary-inverted-text-color,
      var(--maui-button-inverted-text-color)
    );
  }

  .secondary:hover {
    background-color: var(--maui-button-secondary-hover-background-color);
    border-color: var(--maui-button-secondary-hover-background-color);
    color: var(--maui-button-secondary-hover-text-color);
  }

  .secondary.inverted:hover {
    background-color: var(
      --maui-button-secondary-inverted-hover-background-color
    );
    border-color: var(--maui-button-secondary-inverted-hover-background-color);
    color: var(--maui-button-secondary-inverted-hover-text-color);
  }

  .secondary:not(:disabled) maui-icon {
    --maui-icon-color: var(
      --maui-button-secondary-text-color,
      var(--maui-button-text-color)
    );
  }

  .secondary.inverted:not(:disabled) maui-icon {
    --maui-icon-color: var(
      --maui-button-secondary-inverted-text-color,
      var(--maui-button-inverted-text-color)
    );
  }

  .secondary:hover:not(:disabled) maui-icon {
    --maui-icon-color: var(--maui-button-secondary-hover-text-color);
  }

  .secondary.inverted:hover:not(:disabled) maui-icon {
    --maui-icon-color: var(--maui-button-secondary-inverted-hover-text-color);
  }

  /** Muted -------------------------- */

  .muted {
    background-color: var(
      --maui-button-secondary-background-color,
      transparent
    );
    border: var(--maui-button-secondary-border-width, 0) solid
      var(--maui-color-interaction-buttonsecondary, transparent);
    color: var(
      --maui-button-secondary-text-color,
      var(--maui-button-text-color)
    );
  }

  .muted.inverted {
    background-color: var(
      --maui-button-secondary-inverted-background-color,
      transparent
    );
    border: var(--maui-button-secondary-border-width, 0) solid
      var(--maui-color-interaction-buttonsecondary-inverted, transparent);
    color: var(
      --maui-button-secondary-inverted-text-color,
      var(--maui-button-inverted-text-color)
    );
  }

  .muted:hover {
    background-color: var(--maui-button-secondary-hover-background-color);
    border-color: var(--maui-button-secondary-hover-background-color);
    color: var(--maui-button-secondary-hover-text-color);
  }

  .muted.inverted:hover {
    background-color: var(
      --maui-button-secondary-inverted-hover-background-color
    );
    border-color: var(--maui-button-secondary-inverted-hover-background-color);
    color: var(--maui-button-secondary-inverted-hover-text-color);
  }

  .muted:not(:disabled) maui-icon {
    --maui-icon-color: var(
      --maui-button-secondary-text-color,
      var(--maui-button-text-color)
    );
  }

  .muted.inverted:not(:disabled) maui-icon {
    --maui-icon-color: var(
      --maui-button-secondary-inverted-text-color,
      var(--maui-button-inverted-text-color)
    );
  }

  .muted:hover:not(:disabled) maui-icon {
    --maui-icon-color: var(--maui-button-secondary-hover-text-color);
  }

  .muted.inverted:hover:not(:disabled) maui-icon {
    --maui-icon-color: var(--maui-button-secondary-inverted-hover-text-color);
  }

  /** Disabled -------------------------- */

  .button:disabled {
    cursor: not-allowed;
  }

  .primary.has-icon:disabled maui-icon {
    --maui-icon-color: var(--maui-button-primary-disabled-text-color);
  }

  .primary.inverted.has-icon:disabled maui-icon {
    --maui-icon-color: var(--maui-button-primary-inverted-disabled-text-color);
  }

  .primary:disabled {
    opacity: var(--maui-button-disabled-opacity, 1);
    background-color: var(--maui-button-primary-disabled-background-color);
    border-color: var(--maui-button-primary-disabled-border-color);
    color: var(--maui-button-primary-disabled-text-color);
  }

  .primary.inverted:disabled {
    background-color: var(
      --maui-button-primary-inverted-disabled-background-color
    );
    border-color: var(--maui-button-primary-inverted-disabled-border-color);
    color: var(--maui-button-primary-inverted-disabled-text-color);
  }

  .secondary.has-icon:disabled maui-icon {
    --maui-icon-color: var(--maui-button-secondary-disabled-text-color);
  }

  .secondary.inverted.has-icon:disabled maui-icon {
    --maui-icon-color: var(
      --maui-button-secondary-inverted-disabled-text-color
    );
  }

  .secondary:disabled {
    opacity: var(--maui-button-disabled-opacity, 1);
    background-color: var(--maui-button-secondary-disabled-background-color);
    border-color: var(--maui-button-secondary-disabled-border-color);
    color: var(--maui-button-secondary-disabled-text-color);
  }

  .secondary.inverted:disabled {
    background-color: var(
      --maui-button-secondary-inverted-disabled-background-color
    );
    border-color: var(--maui-button-secondary-inverted-disabled-border-color);
    color: var(--maui-button-secondary-inverted-disabled-text-color);
  }
`, Bc = s`
  ${Bn("lh")}
`, Cc = s`
  .lx {
    --maui-button-font-weight: var(--maui-font-weight-bold);
    --maui-button-outline-color: var(
      --maui-color-interaction-buttonsecondary
    ); /** don't care due to width 0 */

    --maui-button-text-color: var(--maui-color-brand-white);
    --maui-button-inverted-text-color: var(--maui-color-text-copy-inverted);
    --maui-button-hover-text-color: var(--maui-color-brand-white);
    --maui-button-inverted-hover-text-color: var(
      --maui-color-text-copy-inverted
    );

    --maui-button-primary-background-color: var(
      --maui-color-interaction-buttonprimary
    );
    --maui-button-primary-inverted-background-color: var(
      --maui-color-interaction-buttonprimary
    );
    --maui-button-primary-hover-background-color: var(
      --maui-color-interaction-buttonprimaryhover
    );
    --maui-button-primary-inverted-hover-background-color: var(
      --maui-color-interaction-buttonprimaryhover
    );

    --maui-button-secondary-background-color: var(
      --maui-color-interaction-buttonsecondary
    );
    --maui-button-secondary-inverted-background-color: var(
      --maui-color-interaction-buttonsecondary
    );
    --maui-button-secondary-hover-text-color: var(--maui-color-brand-white);
    --maui-button-secondary-inverted-hover-text-color: var(
      --maui-color-brand-white
    );
    --maui-button-secondary-hover-background-color: var(
      --maui-color-interaction-buttonsecondaryhover
    );
    --maui-button-secondary-inverted-hover-background-color: var(
      --maui-color-interaction-buttonsecondaryhover
    );

    --maui-button-medium-min-height: 50px;
    --maui-button-medium-padding: 8px var(--maui-spacing-5);

    --maui-button-small-min-height: 30px;
    --maui-button-small-padding: 8px var(--maui-spacing-4) 7px;

    --maui-button-disabled-opacity: 1;

    --maui-button-primary-disabled-background-color: var(
      --maui-color-disabled-background
    );
    --maui-button-primary-inverted-disabled-background-color: var(
      --maui-color-disabled-background-inverted
    );
    --maui-button-primary-disabled-border-color: var(
      --maui-color-disabled-background
    );
    --maui-button-primary-inverted-disabled-border-color: transparent;
    --maui-button-primary-disabled-text-color: var(
      --maui-color-disabled-foreground
    );
    --maui-button-primary-inverted-disabled-text-color: var(
      --maui-color-disabled-foreground-inverted
    );

    --maui-button-secondary-disabled-background-color: var(
      --maui-color-disabled-background
    );
    --maui-button-secondary-inverted-disabled-background-color: var(
      --maui-color-disabled-background-inverted
    );
    --maui-button-secondary-disabled-border-color: var(
      --maui-color-disabled-background
    );
    --maui-button-secondary-inverted-disabled-border-color: var(
      --maui-color-disabled-background-inverted
    );
    --maui-button-secondary-disabled-text-color: var(
      --maui-color-disabled-foreground
    );
    --maui-button-secondary-inverted-disabled-text-color: var(
      --maui-color-disabled-foreground-inverted
    );
  }

  .lx.medium {
    ${p({ size: "button-medium", tenant: "lx" })};
  }

  .lx.small {
    ${p({ size: "button-small", tenant: "lx" })};
  }
`, zc = s`
  .os {
    --maui-button-font-weight: var(--maui-font-weight-bold);
    --maui-button-text-transform: uppercase;
    --maui-button-outline-color: var(
      --maui-color-interaction-buttonprimary
    ); /** don't care due to width 0 */

    --maui-button-text-color: var(--maui-color-brand-white);
    --maui-button-hover-text-color: var(--maui-color-brand-white);

    --maui-button-inverted-text-color: var(
      --maui-color-interaction-buttonprimary
    );

    --maui-button-inverted-hover-text-color: var(
      --maui-color-text-copy-inverted
    );

    --maui-button-primary-background-color: var(
      --maui-color-interaction-buttonprimary
    );
    --maui-button-primary-inverted-background-color: var(
      --maui-color-interaction-interaction-inverted
    );
    --maui-button-primary-hover-background-color: var(
      --maui-color-interaction-buttonprimaryhover
    );
    --maui-button-primary-inverted-hover-background-color: var(
      --maui-color-interaction-buttonprimaryhover
    );

    --maui-button-secondary-text-color: var(
      --maui-color-interaction-buttonprimary
    );
    --maui-button-secondary-inverted-text-color: var(
      --maui-color-text-copy-inverted
    );
    --maui-button-secondary-inverted-hover-text-color: var(
      --maui-color-text-copy-inverted
    );

    --maui-button-secondary-hover-text-color: var(--maui-color-brand-white);
    --maui-button-secondary-border-width: 2px;
    --maui-button-secondary-hover-background-color: var(
      --maui-color-interaction-buttonprimaryhover
    );

    --maui-button-secondary-inverted-hover-background-color: var(
      --maui-color-interaction-buttonprimaryhover
    );

    --maui-button-medium-min-height: 50px;
    --maui-button-medium-padding: 11px 34px;

    --maui-button-small-min-height: 30px;
    --maui-button-small-padding: 7px 34px;

    --maui-button-disabled-opacity: 1;

    --maui-button-primary-disabled-background-color: var(
      --maui-color-disabled-background
    );
    --maui-button-primary-inverted-disabled-background-color: var(
      --maui-color-disabled-background-inverted
    );
    --maui-button-primary-disabled-border-color: var(
      --maui-color-disabled-background
    );
    --maui-button-primary-inverted-disabled-border-color: transparent;
    --maui-button-primary-disabled-text-color: var(
      --maui-color-disabled-foreground
    );
    --maui-button-primary-inverted-disabled-text-color: var(
      --maui-color-disabled-foreground-inverted
    );

    --maui-button-secondary-disabled-background-color: transparent;
    --maui-button-secondary-disabled-border-color: var(
      --maui-color-disabled-foreground
    );
    --maui-button-secondary-inverted-disabled-border-color: var(
      --maui-color-disabled-background-inverted
    );
    --maui-button-secondary-disabled-text-color: var(
      --maui-color-disabled-foreground
    );
    --maui-button-secondary-inverted-disabled-text-color: var(
      --maui-color-disabled-background-inverted
    );
  }
  .os.muted {
    background-color: var(
      --maui-button-secondary-background-color,
      transparent
    );
    border: var(--maui-button-secondary-border-width, 0) solid
      var(
        --maui-button-muted-color,
        --maui-color-interaction-buttonsecondary,
        transparent
      );
    color: var(
      --maui-button-muted-color,
      --maui-button-secondary-text-color,
      var(--maui-button-text-color)
    );
  }

  .os.muted:hover {
    background-color: var(
      --maui-button-muted-color,
      --maui-button-secondary-hover-background-color
    );
    border-color: var(
      --maui-button-muted-color,
      --maui-button-secondary-hover-background-color
    );
    color: var(--maui-button-secondary-hover-text-color);
  }

  .os.muted:not(:disabled) maui-icon {
    --maui-icon-color: var(
      --maui-button-secondary-text-color,
      var(--maui-button-text-color)
    );
  }

  .os.muted:hover:not(:disabled) maui-icon {
    --maui-icon-color: var(--maui-button-secondary-hover-text-color);
  }

  .os.medium {
    ${p({ size: "button-medium", tenant: "os" })};
  }

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

  .os.button.inverted {
    --maui-focus-outline-box-shadow: 0 0 0 1px
      var(--maui-color-interaction-focus-inverted);
  }

  .os.medium.has-icon {
    gap: 10px;
  }
  .os.small.has-icon {
    gap: 10px;
  }
`, Ac = s`
  .sn {
    --maui-button-font-weight: var(--maui-font-weight-regular);
    --maui-button-outline-color: var(
      --maui-color-interaction-interaction
    ); /** don't care due to width 0 */

    --maui-button-text-color: var(--maui-color-brand-white);
    --maui-button-inverted-text-color: var(
      --maui-color-interaction-buttonprimary
    );
    --maui-button-hover-text-color: var(--maui-color-brand-white);
    --maui-button-inverted-hover-text-color: var(
      --maui-color-text-copy-inverted
    );

    --maui-button-primary-background-color: var(
      --maui-color-interaction-buttonprimary
    );
    --maui-button-primary-inverted-background-color: var(
      --maui-color-interaction-interaction-inverted
    );
    --maui-button-primary-hover-background-color: var(
      --maui-color-interaction-buttonprimaryhover
    );

    --maui-button-primary-inverted-hover-background-color: var(
      --maui-color-interaction-buttonprimaryhover
    );

    --maui-button-secondary-text-color: var(
      --maui-color-interaction-buttonprimary
    );
    --maui-button-secondary-inverted-text-color: var(
      --maui-color-interaction-interaction-inverted
    );
    --maui-button-secondary-hover-text-color: var(--maui-color-brand-white);
    --maui-button-secondary-inverted-hover-text-color: var(
      --maui-color-text-copy-inverted
    );
    --maui-button-secondary-border-width: 2px;
    --maui-button-secondary-inverted-border-color: var(
      --maui-color-interaction-interaction-inverted
    );
    --maui-button-secondary-hover-background-color: var(
      --maui-color-interaction-buttonprimaryhover
    );
    --maui-button-secondary-inverted-hover-background-color: var(
      --maui-color-interaction-buttonprimaryhover
    );

    --maui-button-medium-min-height: 50px;
    --maui-button-medium-padding: var(--maui-spacing-3) 33px;

    --maui-button-small-min-height: 30px;
    --maui-button-small-padding: var(--maui-spacing-2) 18px;

    --maui-button-primary-disabled-background-color: var(
      --maui-color-disabled-background
    );
    --maui-button-primary-inverted-disabled-background-color: var(
      --maui-color-disabled-background-inverted
    );
    --maui-button-primary-disabled-border-color: var(
      --maui-color-disabled-background
    );
    --maui-button-primary-inverted-disabled-border-color: transparent;
    --maui-button-primary-disabled-text-color: var(
      --maui-color-disabled-foreground
    );
    --maui-button-primary-inverted-disabled-text-color: var(
      --maui-color-disabled-foreground-inverted
    );

    --maui-button-secondary-disabled-background-color: transparent;
    --maui-button-secondary-disabled-border-color: var(
      --maui-color-disabled-foreground
    );
    --maui-button-secondary-inverted-disabled-border-color: var(
      --maui-color-disabled-foreground-inverted
    );
    --maui-button-secondary-disabled-text-color: var(
      --maui-color-disabled-foreground
    );
    --maui-button-secondary-inverted-disabled-text-color: var(
      --maui-color-disabled-foreground-inverted
    );
  }

  .sn.secondary:not(:hover, [disabled], .inverted) {
    border-color: var(--maui-color-interaction-buttonprimary);
  }

  .sn.muted {
    color: var(--maui-button-muted-coloroverride, var(--maui-color-text-copy));
    border-color: var(
      --maui-button-muted-coloroverride,
      var(--maui-color-text-copy)
    );
  }

  .sn.muted:hover {
    color: var(--maui-button-text-color);
    background-color: var(
      --maui-button-muted-hovercoloroverride,
      var(--maui-color-text-copy)
    );
    border-color: var(
      --maui-button-muted-hovercoloroverride,
      var(--maui-color-text-copy)
    );
  }

  .sn.medium {
    ${p({ size: "button-medium", tenant: "sn" })};
  }

  .sn.small {
    ${p({ size: "button-small", tenant: "sn" })};
  }

  .sn.medium.has-icon {
    gap: 8px;
  }
  .sn.small.has-icon {
    gap: 6px;
  }
`, Fc = s`
  ${Bn("b2b")}

  .b2b {
    --maui-button-text-color: var(--maui-color-text-copy-inverted);
    --maui-button-hover-text-color: var(--maui-color-text-copy-inverted);

    --maui-button-secondary-text-color: var(
      --maui-color-interaction-buttonsecondary
    );
  }
`, Nc = s`
  .four_y {
    --maui-button-font-weight: var(--maui-font-weight-bold);
    --maui-button-outline-color: var(
      --maui-color-interaction-buttonprimary
    ); /** don't care due to width 0 */

    --maui-button-inverted-outline-color: var(
      --maui-color-interaction-interaction-inverted
    ); /** don't care due to width 0 */

    --maui-button-text-color: var(--maui-color-text-copy);
    --maui-button-inverted-text-color: var(
      --maui-color-interaction-buttonsecondary
    );
    --maui-button-hover-text-color: var(--maui-color-text-copy);
    --maui-button-inverted-hover-text-color: var(
      --maui-color-interaction-buttonsecondaryhover
    );

    --maui-button-primary-background-color: var(
      --maui-color-interaction-buttonprimary
    );
    --maui-button-primary-inverted-background-color: var(
      --maui-color-interaction-interaction-inverted
    );
    --maui-button-primary-hover-background-color: var(
      --maui-color-interaction-buttonprimaryhover
    );
    --maui-button-primary-inverted-hover-background-color: var(
      --maui-color-interaction-interaction-invertedhover
    );

    --maui-button-secondary-text-color: var(
      --maui-color-interaction-buttonsecondary
    );
    --maui-button-secondary-inverted-text-color: var(
      --maui-color-interaction-interaction-inverted
    );
    --maui-button-secondary-hover-text-color: var(--maui-color-brand-white);
    --maui-button-secondary-inverted-hover-text-color: var(
      --maui-color-interaction-buttonsecondaryhover
    );
    --maui-button-secondary-border-width: 3px;
    --maui-button-secondary-background-color: var(
      --maui-color-interaction-buttonsecondary
    );
    --maui-button-secondary-inverted-background-color: var(
      --maui-color-interaction-interaction-inverted
    );
    --maui-button-secondary-hover-background-color: var(
      --maui-color-interaction-buttonsecondaryhover
    );
    --maui-button-secondary-inverted-hover-background-color: var(
      --maui-color-interaction-interaction-invertedhover
    );

    --maui-button-medium-min-height: calc(50px - 6px);
    --maui-button-medium-padding: calc(var(--maui-spacing-3) - 6px)
      calc(var(--maui-spacing-5) - 2px);

    --maui-button-small-min-height: calc(30px - 2px);
    --maui-button-small-padding: calc(var(--maui-spacing-2) - 6px)
      calc(var(--maui-spacing-5) - 2px);

    --maui-button-disabled-opacity: 1;

    --maui-button-primary-disabled-background-color: var(
      --maui-color-disabled-background
    );
    --maui-button-primary-inverted-disabled-background-color: var(
      --maui-color-disabled-background-inverted
    );
    --maui-button-primary-disabled-border-color: var(
      --maui-color-disabled-background
    );
    --maui-button-primary-inverted-disabled-border-color: transparent;
    --maui-button-primary-disabled-text-color: var(
      --maui-color-disabled-foreground
    );
    --maui-button-primary-inverted-disabled-text-color: var(
      --maui-color-disabled-foreground-inverted
    );

    --maui-button-secondary-disabled-background-color: transparent;
    --maui-button-secondary-disabled-border-color: var(
      --maui-color-disabled-background
    );
    --maui-button-secondary-disabled-text-color: var(
      --maui-color-disabled-background
    );

    font-family: var(--maui-font-family-headline);

    --maui-focus-outline-offset: 5px;
  }

  .four_y.button {
    transition: background-color 0.3s ease-out, border 0.3s ease-out,
      color 0.3s ease-out, outline-color 0.3s ease-out;
  }

  .four_y.button.primary {
    transition: background-color 0.3s ease-out, border 0.3s ease-out,
      color 0.3s ease-out, outline-color 0.3s ease-out, box-shadow 0.3s ease-out;
  }

  .four_y.button.primary {
    --maui-button-focus-border-color: var(
      --maui-color-interaction-buttonprimaryhover
    );

    outline-color: var(--maui-color-interaction-buttonprimary);
  }

  .four_y.button.primary.inverted {
    --maui-button-focus-border-color: var(
      --maui-color-interaction-focus-inverted
    );
    outline-color: var(--maui-color-interaction-interaction-inverted);
  }

  .four_y.button.secondary {
    --maui-button-focus-border-color: var(--maui-color-interaction-focus);
    outline-color: var(--maui-color-interaction-buttonsecondary);
  }

  .four_y.button.muted {
    --maui-button-focus-border-color: var(
      --maui-button-muted-color,
      --maui-color-interaction-focus
    );
    outline-color: var(
      --maui-button-muted-color,
      var(--maui-color-interaction-buttonsecondary)
    );
    color: var(
      --maui-button-muted-color,
      var(--maui-color-interaction-buttonsecondary)
    );
  }

  .four_y.button.inverted.secondary,
  .four_y.button.inverted.muted {
    --maui-button-focus-border-color: var(
      --maui-color-interaction-focus-inverted
    );
    outline-color: var(--maui-color-interaction-interaction-inverted);
  }

  .four_y.secondary:not(:hover),
  .four_y.muted:not(:hover) {
    background-color: transparent;
  }

  .four_y.button {
    border-radius: var(--maui-radii-pill-radius);
    --maui-focus-radius: var(--maui-radii-pill-radius);
    --maui-focus-outline-box-shadow: 0 0 0 1px
      var(--maui-button-focus-border-color);

    border: none;
  }

  .four_y.button,
  .four_y.button:focus {
    outline: 3px solid transparent;
    outline-offset: -1px;
  }

  .four_y.button.small,
  .four_y.button.small:focus {
    outline: 2px solid transparent;
  }

  .four_y.button.small:not(.secondary, .muted),
  .four_y.button.small:not(.secondary, .muted),
  :focus {
    outline: 2px solid transparent;
  }

  .four_y.button.primary[disabled] {
    color: var(--maui-color-disabled-foreground);
    outline-color: var(--maui-color-disabled-background);
  }
  .four_y.button.inverted.primary[disabled] {
    color: var(--maui-color-disabled-foreground-inverted);
    outline-color: transparent;
  }

  .four_y.button.secondary[disabled],
  .four_y.button.muted[disabled] {
    color: var(--maui-color-disabled-foreground);
    outline-color: var(--maui-color-disabled-foreground);
  }

  .four_y.has-icon {
    --maui-button-medium-padding: calc(var(--maui-spacing-3) - 6px)
      calc(var(--maui-spacing-5) - 2px) calc(var(--maui-spacing-3) - 6px)
      calc(var(--maui-spacing-5) - 4px);
  }

  .four_y.primary.has-icon:disabled maui-icon,
  .four_y.secondary.has-icon:disabled maui-icon,
  .four_y.muted.has-icon:disabled maui-icon {
    --maui-icon-color: var(--maui-color-disabled-foreground);
  }

  .four_y.primary.inverted.has-icon:disabled maui-icon,
  .four_y.secondary.inverted.has-icon:disabled maui-icon,
  .four_y.muted.inverted.has-icon:disabled maui-icon {
    --maui-icon-color: var(--maui-color-disabled-foreground-inverted);
  }

  .four_y.primary:not([disabled]) {
    outline-color: var(--maui-color-interaction-buttonprimary);
  }
  .four_y.primary:not([disabled], .inverted) {
    box-shadow: 0 0 0 25px inset var(--maui-color-interaction-buttonprimary);
  }

  .four_y.primary.inverted:not([disabled]) {
    outline-color: var(--maui-color-interaction-interaction-inverted);
  }

  .four_y.primary:not([disabled]):hover {
    outline-width: 4px;
    outline-color: var(--maui-color-interaction-buttonprimaryhover);
    box-shadow: 0 0 0 25px inset
      var(--maui-color-interaction-buttonprimaryhover);
  }

  .four_y.primary.small:not([disabled]):hover {
    outline-width: 2px;
    outline-color: var(--maui-color-interaction-buttonprimaryhover);
    box-shadow: 0 0 0 25px inset
      var(--maui-color-interaction-buttonprimaryhover);
  }

  .four_y.primary.inverted:not([disabled]):hover {
    outline-color: var(--maui-color-interaction-interaction-invertedhover);
    box-shadow: 0 0 0 25px inset
      var(--maui-color-interaction-interaction-invertedhover);
  }

  .four_y.secondary:not([disabled]),
  .four_y.secondary.small:not([disabled]) {
    outline-color: var(--maui-color-interaction-buttonsecondary);
  }

  .four_y.muted:not([disabled]),
  .four_y.muted.small:not([disabled]) {
    outline-color: var(
      --maui-button-muted-color,
      var(--maui-color-interaction-buttonsecondary)
    );
  }

  .four_y.secondary.inverted:not([disabled]),
  .four_y.muted.inverted:not([disabled]) {
    outline-color: var(--maui-color-interaction-interaction-inverted);
  }

  .four_y.secondary:not([disabled]):hover {
    outline-width: 4px;
    outline-color: var(--maui-color-interaction-buttonsecondaryhover);
    box-shadow: 0 0 0 25px inset
      var(--maui-color-interaction-buttonsecondaryhover);
  }

  .four_y.secondary.small:not([disabled]):hover {
    outline-width: 3px;
    outline-color: var(--maui-color-interaction-buttonsecondaryhover);
    box-shadow: 0 0 0 25px inset
      var(--maui-color-interaction-buttonsecondaryhover);
  }

  .four_y.muted.small:not([disabled]):hover {
    outline-width: 3px;
    outline-color: var(
      --maui-button-muted-color,
      --maui-color-interaction-buttonsecondaryhover
    );
    box-shadow: 0 0 0 25px inset
      var(
        --maui-button-muted-color,
        --maui-color-interaction-buttonsecondaryhover
      );
  }

  .four_y.muted:not([disabled]):hover {
    background-color: transparent;
    outline-color: var(
      --maui-button-muted-color,
      var(--maui-color-interaction-buttonsecondaryhover)
    );
    box-shadow: 0 0 0 25px inset
      var(
        --maui-button-muted-color,
        var(--maui-color-interaction-buttonsecondaryhover)
      );

    color: var(--maui-color-brand-light);
  }

  .four_y.secondary.inverted:not([disabled]):hover,
  .four_y.muted.inverted:not([disabled]):hover {
    outline-color: var(--maui-color-interaction-interaction-invertedhover);
    box-shadow: 0 0 0 25px inset
      var(--maui-color-interaction-interaction-invertedhover);
  }

  .four_y.medium {
    ${p({ size: "button-medium", tenant: "four_y" })};
  }

  .four_y.small {
    --maui-button-secondary-border-width: 2px;
    --maui-focus-outline-offset: 4px;

    ${p({ size: "button-small", tenant: "four_y" })};
  }

  .four_y.small.primary {
    --maui-button-small-min-height: calc(30px);
    --maui-focus-outline-offset: 3px;
  }
`, Ic = s`
  .mmg {
    /** text colors */
    --maui-button-text-color: var(
      --maui-color-interaction-interaction-inverted
    );
    --maui-button-secondary-text-color: var(--maui-color-brand-primary);

    --maui-button-outline-color: var(--maui-color-interaction-buttonsecondary);

    /** background colors */
    --maui-button-secondary-background-color: var(
      --maui-color-interaction-interaction-inverted
    );
    --maui-button-primary-background-color: var(
      --maui-color-interaction-buttonprimary
    );

    --maui-button-primary-border-color: var(--maui-color-brand-primary);

    --maui-button-secondary-border-width: var(--maui-spacing-0);

    /** general styling */
    --maui-button-font-weight: var(--maui-font-weight-bold);
    --maui-button-medium-min-height: 50px;
    --maui-button-medium-padding: var(--maui-spacing-3) var(--maui-spacing-6);

    --maui-button-small-min-height: 40px;

    --maui-button-small-padding: var(--maui-spacing-2) var(--maui-spacing-6);

    /* border */
    border: var(--maui-button-secondary-border-width, --maui-spacing-0) solid
      var(--maui-color-brand-primary);

    /* hover */
    --maui-button-primary-hover-background-color: var(
      --maui-color-brand-mmg-interaction
    );
    --maui-button-hover-text-color: var(--maui-color-brand-white);

    --maui-button-secondary-hover-text-color: var(--maui-color-brand-white);

    --maui-button-secondary-hover-background-color: var(
      --maui-color-brand-mmg-interaction
    );

    --maui-button-primary-disabled-border-color: var(
      --maui-color-disabled-background
    );
    --maui-button-primary-disabled-text-color: var(
      --maui-color-disabled-foreground
    );

    --maui-button-secondary-disabled-background-color: transparent;
    --maui-button-secondary-disabled-border-color: var(
      --maui-color-disabled-foreground
    );
    --maui-button-secondary-disabled-text-color: var(
      --maui-color-disabled-foreground
    );

    --maui-icon-color: var(--maui-color-interaction-interaction);

    --maui-button-primary-disabled-background-color: var(
      --maui-color-disabled-background
    );
    --maui-button-primary-inverted-disabled-background-color: var(
      --maui-color-disabled-background
    );
    --maui-button-primary-disabled-border-color: var(
      --maui-color-disabled-background
    );
    --maui-button-primary-inverted-disabled-border-color: var(
      --maui-color-disabled-background-inverted
    );
    --maui-button-primary-disabled-text-color: var(
      --maui-color-disabled-foreground
    );
    --maui-button-primary-inverted-disabled-text-color: var(
      --maui-color-interaction-interaction
    );

    --maui-button-secondary-disabled-background-color: transparent;
    --maui-button-secondary-disabled-border-color: var(
      --maui-color-disabled-background
    );
    --maui-button-secondary-disabled-text-color: var(
      --maui-color-disabled-foreground
    );

    --maui-button-secondary-inverted-text-color: var(
      --maui-color-interaction-interaction-inverted
    );
    --maui-button-secondary-inverted-hover-text-color: var(
      --maui-color-interaction-interaction
    );

    --maui-button-secondary-inverted-disabled-background-color: transparent;
    --maui-button-secondary-inverted-disabled-border-color: var(
      --maui-color-disabled-background-inverted
    );
    --maui-button-secondary-inverted-disabled-text-color: var(
      --maui-color-disabled-foreground-inverted
    );

    font-family: var(--maui-font-family-headline);
  }

  .mmg.small {
    ${p({ size: "button-small", tenant: "mmg" })};
  }

  .mmg.medium {
    ${p({ size: "button-medium", tenant: "mmg" })};
  }

  .mmg.button.primary.inverted:not([disabled]) {
    color: var(--maui-color-interaction-interaction);
    background-color: var(--maui-color-interaction-interaction-inverted);
    border-color: var(--maui-color-interaction-interaction-inverted);
    border: var(--maui-spacing-0) solid
      var(--maui-color-interaction-interaction-inverted);
  }

  .mmg.primary.inverted:not([disabled]):hover,
  .mmg.secondary.inverted:not([disabled]):hover {
    background-color: var(--maui-color-interaction-interaction-invertedhover);
    border-color: var(--maui-color-interaction-interaction-invertedhover);
  }

  .mmg.primary.inverted.emphasized:not([disabled]) {
    background-color: var(--maui-color-interaction-interaction-inverted);
    border-color: var(--maui-color-interaction-interaction-inverted);
    color: var(--maui-color-interaction-interaction);
  }

  .mmg.primary.inverted maui-icon,
  .mmg.primary.inverted:not(:disabled) maui-icon {
    --maui-icon-color: var(--maui-color-interaction-interaction);
  }

  .mmg.primary.inverted.emphasized:not([disabled]):hover {
    background-color: var(--maui-color-interaction-interaction-invertedhover);
    border-color: var(--maui-color-interaction-interaction-invertedhover);
  }
`, Uc = [
  Lc,
  Bc,
  zc,
  Cc,
  Ac,
  Fc,
  Nc,
  Ic
];
var Rc = Object.defineProperty, Dc = Object.getOwnPropertyDescriptor, ve = (a, e, t, o) => {
  for (var i = o > 1 ? void 0 : o ? Dc(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 && Rc(e, t, i), i;
};
class Z extends k {
  constructor() {
    super(), this.formControlController = new tt(this, {
      form: (e) => {
        if (e.hasAttribute("form")) {
          const t = e.getRootNode(), o = e.getAttribute("form");
          return t.getElementById(o);
        }
        return e.closest("form");
      }
    }), this.hasSlotController = new be(
      this,
      "icon"
    ), this.illegalAssignment = !1, this.invalid = !1, this.hasFocus = !1, this.type = "secondary", this.behavior = "submit", this.size = "medium", this.width = "auto", this.emphasized = !1, this.name = "", this.inverted = !1, this.componentName = "button";
  }
  /** Gets the validity state object */
  get validity() {
    return this.button?.validity;
  }
  /** Gets the validation message */
  get validationMessage() {
    return this.button.validationMessage;
  }
  /** Checks for validity but does not show the browser's validation message. */
  checkValidity() {
    return this.button.checkValidity();
  }
  /** Gets the associated form, if one exists. */
  getForm() {
    return this.formControlController.getForm();
  }
  /** Checks for validity and shows the browser's validation message if the control is invalid. */
  reportValidity() {
    return this.button.reportValidity();
  }
  /** Sets a custom validation message. If `message` is not empty, the field will be considered invalid. */
  setCustomValidity(e) {
    this.button.setCustomValidity(e), this.invalid = !this.button.checkValidity();
  }
  /** Test slotted elements to be only one maui-icon and nothing else. */
  testAllowedAssignments(e) {
    const t = e.target.assignedElements();
    if (t.length > 0 && (t.length > 1 || t[0].nodeName !== "MAUI-ICON")) {
      this.illegalAssignment = !0, console.error("<maui-button> Custom SVGs only allowed via <maui-icon>");
      return;
    }
    this.illegalAssignment = !1;
  }
  hasSlottedIcon() {
    return this.hasSlotController.test("icon");
  }
  hasIcon() {
    const e = !!this.emphasized;
    return (this.hasSlottedIcon() || !!this.icon) && e;
  }
  handleDisabledChange() {
    this.formControlController.setValidity(!!this.disabled);
  }
  firstUpdated() {
    super.firstUpdated(), this.validity && this.formControlController.updateValidity();
  }
  handleSlotChange(e) {
    this.testAllowedAssignments(e);
  }
  /** Simulates a click on the button. */
  click() {
    this.button?.click();
  }
  /** Sets focus on the button. */
  focus(e) {
    this.button?.focus(e);
  }
  /** Removes focus from the button. */
  blur() {
    this.button?.blur();
  }
  handleBlur() {
    this.hasFocus = !1, xt(this, "maui-blur");
  }
  handleFocus() {
    this.hasFocus = !0, xt(this, "maui-focus");
  }
  handleClick(e) {
    if (this.disabled) {
      e.preventDefault(), e.stopPropagation();
      return;
    }
    this.behavior === "submit" && this.formControlController.submit(this), this.behavior === "reset" && this.formControlController.reset(this);
  }
  getClasses() {
    const e = this.theme === "lx" ? "right" : "left";
    return {
      [this.theme]: !0,
      [this.type]: !0,
      [this.size]: !0,
      [this.width]: !0,
      inverted: this.inverted,
      emphasized: !!this.emphasized,
      "has-icon": this.hasIcon() && !this.illegalAssignment,
      "has-focus": this.hasFocus,
      [`icon--${e}`]: e
    };
  }
  getButtonContent() {
    return u`
      ${this.hasIcon() ? u`<span class="icon">
            <slot
              @slotchange=${this.handleSlotChange}
              ?hidden=${this.illegalAssignment}
              name="icon"
            >
              ${this.icon && !this.hasSlottedIcon() && !this.illegalAssignment ? u`<maui-icon
                    .theme=${this.theme}
                    .use=${this.icon}
                    .size=${this.size === "small" ? "small" : "medium"}
                  ></maui-icon>` : ""}
            </slot>
          </span>` : ""}
      <span><slot></slot></span>
    `;
  }
  render() {
    return u`<button
      part="base"
      class=${y({
      [this.componentName]: !0,
      ...this.getClasses()
    })}
      name=${U(this.name)}
      value=${U(this.value)}
      tabindex=${this.disabled ? "-1" : "0"}
      type=${this.behavior}
      @blur=${this.handleBlur}
      @focus=${this.handleFocus}
      @click=${this.handleClick}
      ?disabled=${this.disabled}
      aria-disabled=${this.disabled ? "true" : "false"}
    >
      ${this.getButtonContent()}
    </button>`;
  }
}
Z.styles = Uc;
ve([
  M(".button")
], Z.prototype, "button", 2);
ve([
  l({ attribute: !1 })
], Z.prototype, "illegalAssignment", 2);
ve([
  O()
], Z.prototype, "invalid", 2);
ve([
  O()
], Z.prototype, "hasFocus", 2);
ve([
  l({ type: String, reflect: !0 })
], Z.prototype, "type", 2);
ve([
  l({ type: String, reflect: !0 })
], Z.prototype, "behavior", 2);
ve([
  l({ type: String, reflect: !0 })
], Z.prototype, "size", 2);
ve([
  l({ type: String, reflect: !0 })
], Z.prototype, "width", 2);
ve([
  l({ type: Boolean })
], Z.prototype, "emphasized", 2);
ve([
  l({ type: String })
], Z.prototype, "icon", 2);
ve([
  l({ type: Boolean, reflect: !0 })
], Z.prototype, "disabled", 2);
ve([
  l()
], Z.prototype, "name", 2);
ve([
  l()
], Z.prototype, "value", 2);
ve([
  l({ type: Boolean })
], Z.prototype, "inverted", 2);
ve([
  F("disabled", { waitUntilFirstUpdate: !0 })
], Z.prototype, "handleDisabledChange", 1);
w("maui-button", Z);
var Ec = Object.defineProperty, Pc = Object.getOwnPropertyDescriptor, dr = (a, e, t, o) => {
  for (var i = o > 1 ? void 0 : o ? Pc(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 && Ec(e, t, i), i;
};
class ua extends Z {
  constructor() {
    super(...arguments), this.href = "", this.target = "_blank", this.download = !1;
  }
  render() {
    return u`<a
      class=${y({
      [this.componentName]: !0,
      ...this.getClasses()
    })}
      href=${this.href}
      target=${this.target}
      download=${U(this.download || void 0)}
      >${this.getButtonContent()}</a
    >`;
  }
}
dr([
  l()
], ua.prototype, "href", 2);
dr([
  l()
], ua.prototype, "target", 2);
dr([
  l({ type: Boolean })
], ua.prototype, "download", 2);
w("maui-button-link", ua);
class Hc extends Z {
  render() {
    return u`<span
      class=${y({
      "button-mimic": !0,
      ...this.getClasses()
    })}
    >
      ${this.getButtonContent()}
    </span>`;
  }
}
w("maui-button-mimic", Hc);
var Gc = Object.defineProperty, Yc = Object.getOwnPropertyDescriptor, Ut = (a, e, t, o) => {
  for (var i = o > 1 ? void 0 : o ? Yc(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 && Gc(e, t, i), i;
};
class Ne extends k {
  constructor() {
    super(...arguments), this.defaultValue = "", this.value = "", this.required = !1, this.customErrorMessage = "", this.hasError = !1, this.errorMessage = "";
  }
  connectedCallback() {
    super.connectedCallback(), this.defaultValue = this.value;
  }
  /** Gets the associated form, if one exists. */
  getForm() {
    return this.formControlController.getForm();
  }
  /** Checks for validity but does not show the browser's validation message. */
  checkValidity() {
    return this.validity.valid;
  }
  /** Sets a custom validation message. If `message` is not empty, the field will be considered invalid. */
  setCustomValidity(e = "") {
    this.customErrorMessage = e;
  }
  /** returns current validity state based on current value, required and custom error message */
  get validity() {
    const e = this.formControlController ? this.formControlController.options.value(this) : void 0, t = this.required && !(e || this.input?.value);
    return this.customErrorMessage?.length > 0 ? ac : t ? ic : this.input ? this.input.validity : fi;
  }
  /** Gets the validation message */
  get validationMessage() {
    return this.validity.valid ? "" : this.customErrorMessage || this.input.validationMessage;
  }
  /** Checks for validity and shows the browser's validation message if the control is invalid. */
  reportValidity() {
    return this.errorMessage = this.validationMessage, this.hasError = !this.validity.valid, this.validity.valid;
  }
}
Ut([
  O()
], Ne.prototype, "defaultValue", 2);
Ut([
  M(".validation-input")
], Ne.prototype, "input", 2);
Ut([
  l({ type: String, reflect: !0 })
], Ne.prototype, "name", 2);
Ut([
  l({ type: String })
], Ne.prototype, "value", 2);
Ut([
  l({ type: Boolean, reflect: !0 })
], Ne.prototype, "required", 2);
Ut([
  l({ type: String, reflect: !0 })
], Ne.prototype, "customErrorMessage", 2);
Ut([
  l({ type: Boolean, reflect: !0 })
], Ne.prototype, "hasError", 2);
Ut([
  l({ type: String, reflect: !0 })
], Ne.prototype, "errorMessage", 2);
var Tc = Object.defineProperty, Xc = Object.getOwnPropertyDescriptor, ot = (a, e, t, o) => {
  for (var i = o > 1 ? void 0 : o ? Xc(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 && Tc(e, t, i), i;
};
const Cn = () => (a, e) => {
  const { [e]: t } = a;
  function o() {
    this.handleBlur = this.handleBlur.bind(this), this.handleFocus = this.handleFocus.bind(this), this.addEventListener("blur", this.handleBlur), this.addEventListener("focus", this.handleFocus), t.call(this);
  }
  return a[e] = o, a[e];
}, zn = () => (a, e) => {
  const { [e]: t } = a;
  function o() {
    this.removeEventListener("blur", this.handleBlur), this.removeEventListener("focus", this.handleFocus), t.call(this);
  }
  return a[e] = o, a[e];
}, An = () => (a, e) => {
  const { [e]: t } = a;
  function o() {
    this.hasFocus = !0, this.emit("maui-focus"), t.call(this);
  }
  return a[e] = o, a[e];
}, Fn = () => (a, e) => {
  const { [e]: t } = a;
  function o() {
    this.hasFocus = !1, this.emit("maui-blur"), t.call(this);
  }
  return a[e] = o, a[e];
};
class wt extends k {
  constructor() {
    super(...arguments), this.hasFocus = !1;
  }
  connectedCallback() {
    super.connectedCallback();
  }
  disconnectedCallback() {
    super.disconnectedCallback();
  }
  handleFocus() {
  }
  handleBlur() {
  }
}
ot([
  O()
], wt.prototype, "hasFocus", 2);
ot([
  Cn()
], wt.prototype, "connectedCallback", 1);
ot([
  zn()
], wt.prototype, "disconnectedCallback", 1);
ot([
  An()
], wt.prototype, "handleFocus", 1);
ot([
  Fn()
], wt.prototype, "handleBlur", 1);
class Te extends Ne {
  constructor() {
    super(...arguments), this.hasFocus = !1;
  }
  connectedCallback() {
    super.connectedCallback();
  }
  disconnectedCallback() {
    super.disconnectedCallback();
  }
  handleFocus() {
  }
  handleBlur() {
  }
}
ot([
  O()
], Te.prototype, "hasFocus", 2);
ot([
  Cn()
], Te.prototype, "connectedCallback", 1);
ot([
  zn()
], Te.prototype, "disconnectedCallback", 1);
ot([
  An()
], Te.prototype, "handleFocus", 1);
ot([
  Fn()
], Te.prototype, "handleBlur", 1);
var Vc = Object.defineProperty, jc = Object.getOwnPropertyDescriptor, Rt = (a, e, t, o) => {
  for (var i = o > 1 ? void 0 : o ? jc(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 && Vc(e, t, i), i;
};
const Nn = () => (a, e) => {
  const { [e]: t } = a;
  function o() {
    if (!this.disabled) {
      if (this.unCheckableMode) {
        this.checked = !this.checked;
        return;
      }
      this.checked = !0, t.call(this);
    }
  }
  return a[e] = o, a[e];
}, In = () => (a, e) => {
  const { [e]: t } = a;
  function o() {
    this.setAttribute("aria-disabled", this.disabled ? "true" : "false"), t.call(this);
  }
  return a[e] = o, a[e];
};
class Uo extends wt {
  constructor(e) {
    super(), this.unCheckableMode = !1, this.checked = !1, this.unCheckableMode = e.unCheckableMode;
  }
  handleClick() {
  }
  handleDisabledChange() {
  }
}
Rt([
  l({ type: Boolean, reflect: !0 })
], Uo.prototype, "checked", 2);
Rt([
  l({ type: Boolean, reflect: !0 })
], Uo.prototype, "disabled", 2);
Rt([
  Nn()
], Uo.prototype, "handleClick", 1);
Rt([
  F("disabled", { waitUntilFirstUpdate: !0 }),
  In()
], Uo.prototype, "handleDisabledChange", 1);
class Ro extends Te {
  constructor(e) {
    super(), this.unCheckableMode = !1, this.checked = !1, this.unCheckableMode = e.unCheckableMode;
  }
  handleClick() {
  }
  handleDisabledChange() {
  }
}
Rt([
  l({ type: Boolean, reflect: !0 })
], Ro.prototype, "checked", 2);
Rt([
  l({ type: Boolean, reflect: !0 })
], Ro.prototype, "disabled", 2);
Rt([
  Nn()
], Ro.prototype, "handleClick", 1);
Rt([
  F("disabled", { waitUntilFirstUpdate: !0 }),
  In()
], Ro.prototype, "handleDisabledChange", 1);
const qc = (a) => {
  const e = h(a);
  return s`
    .${e}.chip:not([dismissable]):not([disabled]):hover {
      background-color: var(--maui-color-interaction-interactionhover);
      border-color: var(--maui-color-interaction-interactionhover);
      color: var(--maui-color-brand-light);
    }

    .${e}.chip.checked:not([disabled]) {
      background-color: var(--maui-color-interaction-buttonsecondary);
      border-color: var(--maui-color-interaction-buttonsecondary);
      color: var(--maui-color-brand-light);
    }

    .${e}.chip.checked:not([disabled]):hover {
      background-color: var(--maui-color-interaction-interactionhover);
      border-color: var(--maui-color-interaction-interactionhover);
    }

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

    .${e}.chip.inverted {
      border-color: var(--maui-color-grey-03);
      color: var(--maui-color-grey-03);

      --maui-focus-outline-box-shadow: var(--maui-effect-shadow-focus-offset-x)
        var(--maui-effect-shadow-focus-offset-y)
        var(--maui-effect-shadow-focus-radius)
        var(--maui-effect-shadow-focus-spread)
        var(--maui-color-interaction-focus-inverted);
    }

    .${e}.chip.checked.inverted:not([disabled]) {
      background-color: var(--maui-color-interaction-interaction-inverted);
      border-color: var(--maui-color-interaction-interaction-inverted);
      color: var(--maui-color-interaction-buttonsecodary);
    }

    .${e}.chip.inverted:not([disabled]):hover {
      background-color: var(--maui-color-interaction-interaction-invertedhover);
      border-color: var(--maui-color-interaction-interaction-invertedhover);
      color: var(--maui-color-interaction-buttonsecodaryhover);
    }

    .${e}.chip.inverted[disabled] {
      color: var(--maui-color-disabled-foreground-inverted);
      border-color: var(--maui-color-disabled-background-inverted);
    }

    .${e}.chip.checked.inverted {
      border-width: 0;
      background-color: var(--maui-color-disabled-background-inverted);
      color: var(--maui-color-disabled-foreground-inverted);
    }
  `;
}, Kc = s`
  ${C}

  ${A}

  .label {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    position: relative;
    pointer-events: none;
  }

  .content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    line-height: 1;
    vertical-align: middle;
  }

  .compensation {
    opacity: 0;
    font-weight: var(--maui-font-weight-bold);
  }

  .chip {
    display: flex;
    gap: 10px;
    align-items: center;
    position: relative;
    height: 32px;
    font-family: var(--maui-font-family-copy);
    ${p({ size: "forms-medium", tenant: "wl" })};
    font-weight: var(--maui-font-weight-regular);
    color: var(--maui-color-text-copy);

    border-radius: var(--maui-radii-pill-radius);

    --maui-focus-outline-offset: 4px;
    --maui-focus-radius: var(--maui-radii-pill-radius);

    border: 1px solid var(--maui-color-grey-04);
  }

  .chip:not([dismissable]) {
    justify-content: center;
    padding: var(--maui-chip-padding, 0 14px);
  }

  .chip[dismissable] {
    border: 0;
    justify-content: space-between;
    padding: 0 12px 0 14px;
  }

  .chip[disabled] {
    cursor: not-allowed;
  }

  .chip[disabled]:not(.checked) {
    border-color: var(--maui-color-disabled-background);
    color: var(--maui-color-disabled-foreground);
  }

  .chip[disabled].checked:not(.dismissable) {
    border-color: var(--maui-color-disabled-background);
    background-color: var(--maui-color-disabled-background);
    color: var(--maui-color-text-copy-inverted);
  }

  .chip[disabled].dismissable {
    color: var(--maui-color-text-copy-inverted);
    background-color: var(--maui-color-disabled-background);
  }

  .chip[disabled].checked:not(.dismissable),
  .chip[disabled].dismissable {
    color: var(--maui-color-disabled-foreground);
  }

  .chip:not([disabled]):hover {
    cursor: pointer;
    font-weight: var(--maui-font-weight-bold);
  }

  .chip:not([disabled]):not(.checked):not([disabled]):hover {
    font-weight: var(--maui-font-weight-regular);
  }

  .chip.checked {
    font-weight: var(--maui-font-weight-bold);
  }

  .chip maui-icon {
    --maui-icon-color: currentColor;
  }

  .chip:not([disabled]) maui-icon:hover {
    cursor: pointer;
  }

  ${H("chip", "has-focus")}
`, Wc = s`
  ${qc("lh")}
`, Zc = s`
  .b2b.chip:not([dismissable]):not([disabled]):hover {
    background-color: var(--maui-color-interaction-interactionhover);
    border-color: var(--maui-color-interaction-interactionhover);
    color: var(--maui-color-brand-light);
  }

  .b2b.chip.checked:not([disabled]) {
    background-color: var(--maui-color-interaction-buttonprimary);
    border-color: var(--maui-color-interaction-buttonprimary);
    color: var(--maui-color-brand-light);
  }

  .b2b.chip.checked:not([disabled]):hover {
    background-color: var(--maui-color-interaction-interactionhover);
    border-color: var(--maui-color-interaction-interactionhover);
  }

  .b2b.chip {
    ${p({ size: "forms-medium", tenant: "b2b" })};
  }

  .b2b.chip.inverted {
    border-color: var(--maui-color-grey-03);
    color: var(--maui-color-grey-03);

    --maui-focus-outline-box-shadow: var(--maui-effect-shadow-focus-offset-x)
      var(--maui-effect-shadow-focus-offset-y)
      var(--maui-effect-shadow-focus-radius)
      var(--maui-effect-shadow-focus-spread)
      var(--maui-color-interaction-focus-inverted);
  }

  .b2b.chip.checked.inverted:not([disabled]) {
    background-color: var(--maui-color-interaction-interaction-inverted);
    border-color: var(--maui-color-interaction-interaction-inverted);
    color: var(--maui-color-interaction-buttonsecodary);
  }

  .b2b.chip.inverted:not([disabled]):hover {
    background-color: var(--maui-color-interaction-interaction-invertedhover);
    border-color: var(--maui-color-interaction-interaction-invertedhover);
    color: var(--maui-color-interaction-buttonsecodaryhover);
  }

  .b2b.chip.inverted[disabled] {
    color: var(--maui-color-disabled-foreground-inverted);
    border-color: var(--maui-color-disabled-background-inverted);
  }

  .b2b.chip.checked.inverted {
    border-width: 0;
    background-color: var(--maui-color-disabled-background-inverted);
    color: var(--maui-color-disabled-foreground-inverted);
  }
`, Qc = s`
  .os {
    --maui-chip-padding: 0 16px;
  }

  .os.chip {
    height: 34px;
    ${p({ size: "forms-medium", tenant: "os" })};
  }

  .os .content {
    top: calc(50% - 1px);
  }

  .os.chip:not([disabled]).inverted {
    color: var(--maui-color-text-copy-inverted);

    --maui-focus-outline-box-shadow: var(--maui-effect-shadow-focus-offset-x, 0)
      var(--maui-effect-shadow-focus-offset-y, 0)
      var(--maui-effect-shadow-focus-radius, 0)
      var(--maui-effect-shadow-focus-spread, 1px)
      var(--maui-color-interaction-focus-inverted);
  }

  .os.chip:not([dismissable]):not([disabled]) {
    border-color: var(--maui-color-grey-02);
  }

  .os.chip[disabled]:not(.dismissable) {
    border-color: var(--maui-color-disabled-background);
  }

  .os.chip[dismissable] maui-icon {
    margin-top: -2px;
  }

  .os.chip:not([dismissable]):not([disabled]):hover {
    background-color: var(--maui-color-interaction-buttonprimaryhover);
    border-color: var(--maui-color-interaction-buttonprimaryhover);
    color: var(--maui-color-brand-light);
  }

  .os.chip.checked:not([disabled]) {
    background-color: var(--maui-color-interaction-buttonprimary);
    border-color: var(--maui-color-interaction-buttonprimary);
    color: var(--maui-color-brand-light);
  }

  .os.chip.inverted.checked:not([disabled]) {
    background-color: var(--maui-color-interaction-interaction-inverted);
    border-color: var(--maui-color-interaction-interaction-inverted);
    color: var(--maui-color-interaction-buttonprimary);
  }

  .os.chip.inverted.checked:not([disabled]):hover {
    background-color: var(--maui-color-interaction-buttonprimaryhover);
    border-color: var(--maui-color-interaction-buttonprimaryhover);
    color: var(--maui-color-text-copy-inverted);
  }

  .os.chip.checked:not([disabled]):hover {
    background-color: var(--maui-color-interaction-buttonprimaryhover);
    border-color: var(--maui-color-interaction-buttonprimaryhover);
  }

  .os.chip[disabled].inverted {
    border-color: var(--maui-color-disabled-background-inverted);
    color: var(--maui-color-disabled-foreground-inverted);
  }

  .os.chip[disabled].checked.inverted {
    background-color: var(--maui-color-disabled-background-inverted);
    border-width: 0;
  }
`, Jc = s`
  .lx.chip {
    ${p({ size: "forms-medium", tenant: "lx" })};
    color: var(--maui-color-interaction-interaction);
    height: 34px;
  }

  .lx.chip.inverted:not([disabled]) {
    --maui-focus-outline-box-shadow: var(--maui-effect-shadow-focus-offset-x, 0)
      var(--maui-effect-shadow-focus-offset-y, 0)
      var(--maui-effect-shadow-focus-radius, 0)
      var(--maui-effect-shadow-focus-spread, 1px)
      var(--maui-color-interaction-focus-inverted);
  }

  .lx.chip.inverted:not([dismissable]):not([disabled]) {
    border-color: var(--maui-color-grey-02);
    color: var(--maui-color-grey-02);
    background-color: transparent;
  }

  .lx.chip:not([dismissable]):not([disabled]) {
    border-color: var(--maui-color-grey-04);
  }

  .lx.chip:not([dismissable]):not([disabled]):hover {
    background-color: var(--maui-color-interaction-interactionhover);
    border-color: var(--maui-color-interaction-interactionhover);
    color: var(--maui-color-brand-light);
  }

  .lx.chip.inverted:not([dismissable]):not([disabled]):hover {
    background-color: var(--maui-color-interaction-interaction-invertedhover);
    border-color: var(--maui-color-interaction-interaction-invertedhover);
    color: var(--maui-color-interaction-buttonsecondaryhover);
  }

  .lx.chip.checked:not([disabled]) {
    background-color: var(--maui-color-interaction-buttonprimary);
    border-color: var(--maui-color-interaction-buttonprimary);
    color: var(--maui-color-brand-light);
  }

  .lx.chip.checked:not([disabled]):hover {
    background-color: var(--maui-color-interaction-buttonprimaryhover);
    border-color: var(--maui-color-interaction-buttonprimaryhover);
  }

  .lx.chip[disabled]:not(.checked):not(.dismissable) {
    border-color: var(--maui-color-disabled-background);
    color: var(--maui-color-disabled-foreground);
  }

  .lx.chip[disabled].inverted:not(.checked) {
    border-color: var(--maui-color-disabled-background-inverted);
    color: var(--maui-color-disabled-foreground-inverted);
    background-color: transparent;
  }

  .lx.chip[disabled].inverted.checked {
    background-color: var(--maui-color-disabled-background-inverted);
    color: var(--maui-color-disabled-foreground-inverted);
    border-width: 0;
  }

  .lx.chip.checked.inverted:not([disabled]) {
    background-color: var(--maui-color-interaction-interaction-inverted);
    border-color: var(--maui-color-interaction-interaction-inverted);
    color: var(--maui-color-interaction-buttonsecondary);
  }

  .lx.chip.inverted.checked:not([disabled]):hover {
    background-color: var(--maui-color-interaction-interaction-invertedhover);
    border-color: var(--maui-color-interaction-interaction-invertedhover);
    color: var(--maui-color-interaction-buttonsecondaryhover);
  }

  .lx.chip:not(.checked) .content {
    top: calc(50% + 1px);
  }
`, ed = s`
  .sn.chip {
    ${p({ size: "forms-medium", tenant: "sn" })};
    color: var(--maui-color-interaction-buttonsecondary);
    background-color: var(--maui-color-brand-light);
  }

  .sn.chip.inverted:not([disabled]) {
    --maui-focus-outline-box-shadow: var(--maui-effect-shadow-focus-offset-x, 0)
      var(--maui-effect-shadow-focus-offset-y, 0)
      var(--maui-effect-shadow-focus-radius, 0)
      var(--