@proximus/lavender-mega-dropdown 1.4.9-alpha.9 → 1.4.9-beta.2

package/dist/index.es.js

@@ -1,16 +1,16 @@
-var rt = (s) => {
+var at = (s) => {
   throw TypeError(s);
 };
-var I = (s, t, e) => t.has(s) || rt("Cannot " + e);
-var n = (s, t, e) => (I(s, t, "read from private field"), e ? e.call(s) : t.get(s)), c = (s, t, e) => t.has(s) ? rt("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(s) : t.set(s, e), k = (s, t, e, o) => (I(s, t, "write to private field"), o ? o.call(s, e) : t.set(s, e), e), P = (s, t, e) => (I(s, t, "access private method"), e);
-import { PxElement as w, transferAccessibilityAttributes as it, log as d, checkName as $, WrappedInteractiveStateController as at, WithExtraAttributes as st, iconSizeValuesKC as Ht, textalignValues as nt, colorValues as Y, headingValues as dt, cssTokenBreakpoints as h, paddingValues as u, gapValues as jt, boxShadowValues as Ot, backgroundSizeValues as _t, noBorderRadiusValues as Wt, borderRadiusValues as Ft, borderSideValues as Gt, borderValues as Nt, gradientValues as Yt, backgroundColorValues as lt, borderColorValues as Zt, fontweightValues as pt, fontsizeValues as bt } from "@proximus/lavender-common";
+var I = (s, t, e) => t.has(s) || at("Cannot " + e);
+var n = (s, t, e) => (I(s, t, "read from private field"), e ? e.call(s) : t.get(s)), c = (s, t, e) => t.has(s) ? at("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(s) : t.set(s, e), k = (s, t, e, r) => (I(s, t, "write to private field"), r ? r.call(s, e) : t.set(s, e), e), j = (s, t, e) => (I(s, t, "access private method"), e);
+import { PxElement as $, transferAccessibilityAttributes as pt, log as d, checkName as w, WrappedInteractiveStateController as bt, WithExtraAttributes as X, iconSizeValuesKC as _t, textalignValues as ct, colorValues as Z, headingValues as ht, cssTokenBreakpoints as h, paddingValues as u, gapValues as Wt, boxShadowValues as Ft, backgroundSizeValues as Gt, noBorderRadiusValues as Yt, borderRadiusValues as Xt, borderSideValues as Zt, borderValues as Kt, gradientValues as st, backgroundColorValues as P, borderColorValues as nt, fontweightValues as gt, fontsizeValues as ut } from "@proximus/lavender-common";
 import "@proximus/lavender-layout";
-const ct = `.btn{width:var(--button-extended--mobile, var(--button-extended, auto));display:inline-flex;vertical-align:middle;align-items:center;justify-content:center;font-family:var(--px-font-family);font-size:var(--px-text-size-label-m-mobile);line-height:var(--px-line-height-ratio-l);font-weight:var(--px-font-weight-title);text-align:center;gap:var(--px-spacing-2xs-mobile);cursor:pointer;text-decoration:none;--btn-transition: all .2s ease-in-out 0s;transition:var(--btn-transition);border:var(--px-size-border-m) solid transparent}.btn,.btn *{box-sizing:border-box}.btn ::slotted(px-icon){line-height:0}.btn:hover:not([disabled],[aria-disabled=true],.loading){border-color:var(--px-color-border-state-hover-default)}.btn:focus-visible:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default)}.btn:active:not([disabled],[aria-disabled=true],.loading){transform:scale(.95);border-color:var(--px-color-border-state-active-default);color:var(--px-color-text-brand-default);background:var(--px-color-background-state-hover-bordered-default)}.btn[disabled],.btn[aria-disabled=true]{cursor:default;pointer-events:none}.btn.loading{cursor:inherit}.btn.loading ::slotted(px-spinner){line-height:0}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown){color:var(--px-color-text-brand-inverted);background:var(--px-color-background-container-primary-default);min-height:var(--px-spacing-l-mobile);padding:var(--px-padding-xs-mobile) var(--px-padding-m-mobile);border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown) ::slotted([slot="after"]){margin-right:calc(var(--px-padding-xs-mobile) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown) ::slotted([slot="before"]){margin-left:calc(var(--px-padding-xs-mobile) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown):hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-default);background:var(--px-color-background-state-hover-bordered-default)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown)[disabled],.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown)[aria-disabled=true]{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown).loading{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-brand-default);border-color:transparent}.btn.secondary{color:var(--px-color-text-brand-default);background:var(--px-color-background-container-secondary-default);min-height:var(--px-spacing-l-mobile);padding:var(--px-padding-xs-mobile) var(--px-padding-m-mobile);border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}.btn.secondary:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-default);background:var(--px-color-background-state-hover-bordered-default)}.btn.secondary[disabled],.btn.secondary[aria-disabled=true]{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default)}.btn.secondary.loading{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-brand-default);border-color:transparent}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape=alternative]{border-radius:var(--px-radius-button-small)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape=bottom-left]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape=bottom-right],.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape=default]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}.btn.tertiary{background:none;color:var(--px-color-text-brand-default);border-radius:var(--px-radius-pill);border:var(--px-size-border-m) solid transparent;padding:var(--px-padding-2xs-mobile) 0;gap:var(--px-spacing-xs-mobile)}.btn.tertiary ::slotted(px-icon){display:flex;align-items:center;justify-content:center;width:var(--px-size-m);height:var(--px-size-m);border-radius:var(--px-radius-pill);background:var(--px-color-background-container-secondary-default);transition:var(--btn-transition)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading),.btn.tertiary:active:not([disabled],[aria-disabled=true],.loading){padding:var(--px-padding-2xs-mobile) var(--px-padding-s-mobile)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon),.btn.tertiary:active:not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon){background:transparent;margin:0 -8px}:is()[slot=after]{padding:0 0 0 var(--px-padding-2xs-mobile)}:is()[slot=before]{padding:0 var(--px-padding-2xs-mobile) 0 0}.btn.tertiary[disabled],.btn.tertiary[aria-disabled=true]{color:var(--px-color-text-state-disabled-default)}.btn.tertiary[disabled] ::slotted(px-icon),.btn.tertiary[aria-disabled=true] ::slotted(px-icon){background:var(--px-color-background-state-disabled-default)}.btn.tertiary.loading{color:var(--px-color-text-brand-default);border-color:transparent}.btn.tertiary.loading ::slotted(px-spinner){display:flex;align-items:center;justify-content:center;width:var(--px-size-m);height:var(--px-size-m);border-radius:var(--px-radius-pill);background:var(--px-color-background-state-disabled-default)}.btn.patch{display:inline-flex}.btn.patch:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-default);background:var(--px-color-background-state-hover-bordered-default)}.btn.patch[disabled],.btn.patch[aria-disabled=true]{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default)}.btn.actionable-tag{background:var(--px-color-background-container-default-inverted);color:var(--px-color-text-neutral-default);padding:var(--px-padding-2xs-mobile) var(--px-padding-xs-mobile);gap:var(--px-spacing-xs-mobile);border-radius:var(--px-radius-pill);border:var(--px-size-border-m) solid var(--px-color-border-neutral-default)}.btn.actionable-tag:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-default);background:var(--px-color-background-state-hover-bordered-default)}.btn.actionable-tag:active:not([disabled],[aria-disabled=true],.loading){background:var(--px-color-background-state-active-default);color:var(--px-color-text-state-active-inverted);border-color:var(--px-color-border-none-default)}.btn.actionable-tag[disabled],.btn.actionable-tag[aria-disabled=true]{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default);border-color:var(--px-color-border-none-default)}.btn.header-dropdown{display:flex;justify-content:space-between;gap:var(--px-spacing-s-mobile);width:100%;color:var(--px-color-text-neutral-default);font-weight:var(--px-font-weight-body);font-size:var(--px-text-size-label-l-mobile);border:var(--px-size-border-m) solid var(--px-color-border-neutral-default);padding:var(--px-padding-xs-mobile) var(--px-padding-s-mobile);border-radius:var(--px-radius-main);background-color:var(--px-color-background-container-default-default);touch-action:manipulation}.btn.header-dropdown:after{display:inline-block;content:"";width:var(--px-size-icon-xs);height:var(--px-size-icon-xs);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:cover;mask-size:cover;-webkit-mask-position:50% 50%;mask-position:50% 50%;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.38 5.90237C12.125 5.65131 11.7115 5.65131 11.4564 5.90237L7.99986 9.30494L4.54328 5.90237C4.28824 5.65131 3.87474 5.65131 3.61971 5.90237C3.36467 6.15342 3.36467 6.56045 3.61971 6.8115L7.53808 10.6686C7.79311 10.9197 8.20661 10.9197 8.46164 10.6686L12.38 6.8115C12.635 6.56045 12.635 6.15342 12.38 5.90237Z' fill='%235C2D91'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.38 5.90237C12.125 5.65131 11.7115 5.65131 11.4564 5.90237L7.99986 9.30494L4.54328 5.90237C4.28824 5.65131 3.87474 5.65131 3.61971 5.90237C3.36467 6.15342 3.36467 6.56045 3.61971 6.8115L7.53808 10.6686C7.79311 10.9197 8.20661 10.9197 8.46164 10.6686L12.38 6.8115C12.635 6.56045 12.635 6.15342 12.38 5.90237Z' fill='%235C2D91'/%3E%3C/svg%3E");background-color:currentColor;color:var(--px-color-icon-brand-default);--btn-transition: all .2s ease-in-out 0s;transition:var(--btn-transition)}.btn.header-dropdown[aria-expanded=true]:after{transform:rotate(180deg)}button.link{background:none;border:none;text-decoration:underline;padding:0;cursor:pointer}button.link[disabled],button.link[aria-disabled=true]{cursor:default;pointer-events:none;color:var(--px-color-text-state-disabled-default)}button.wrapper{all:unset;cursor:pointer}button.wrapper:focus-visible{outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default)}button.wrapper[disabled],button.wrapper[aria-disabled=true]{cursor:default;pointer-events:none}:host([inverted]) .btn:hover:not([disabled],[aria-disabled=true],.loading){border-color:var(--px-color-border-state-hover-inverted)}:host([inverted]) .btn:focus-visible:not([disabled],[aria-disabled=true]){outline-color:var(--px-color-border-focus-outline-inverted)}:host([inverted]) .btn:active:not([disabled],[aria-disabled=true],.loading){border-color:var(--px-color-border-state-active-inverted);color:var(--px-color-text-brand-inverted);background:var(--px-color-background-state-hover-bordered-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag){color:var(--px-color-text-brand-default);background:var(--px-color-background-container-primary-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag):hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-inverted);background:var(--px-color-background-state-hover-bordered-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag)[disabled],:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag)[aria-disabled=true]{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag).loading{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-brand-inverted);border-color:transparent}:host([inverted]) .btn.secondary{color:var(--px-color-text-brand-inverted);background:var(--px-color-background-container-secondary-inverted)}:host([inverted]) .btn.secondary:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-inverted);background:var(--px-color-background-container-default-inverted)}:host([inverted]) .btn.secondary[disabled],:host([inverted]) .btn.secondary[aria-disabled=true]{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted)}:host([inverted]) .btn.secondary.loading{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-brand-inverted);border-color:transparent}:host([inverted]) .btn.tertiary{color:var(--px-color-text-brand-inverted)}:host([inverted]) .btn.tertiary ::slotted(px-icon){background:var(--px-color-background-container-secondary-inverted)}:host([inverted]) .btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon),:host([inverted]) .btn.tertiary:active:not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon){background:transparent}:host([inverted]) .btn.tertiary[disabled],:host([inverted]) .btn.tertiary[aria-disabled=true]{color:var(--px-color-text-state-disabled-inverted)}:host([inverted]) .btn.tertiary[disabled] ::slotted(px-icon),:host([inverted]) .btn.tertiary[aria-disabled=true] ::slotted(px-icon){background:var(--px-color-background-state-disabled-inverted)}:host([inverted]) .btn.tertiary.loading{color:var(--px-color-text-brand-inverted)}:host([inverted]) .btn.tertiary.loading ::slotted(px-spinner){background:var(--px-color-background-state-disabled-inverted)}:host([inverted]) .btn.patch:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-inverted);background:var(--px-color-background-state-hover-bordered-inverted)}:host([inverted]) .btn.patch[disabled],:host([inverted]) .btn.patch[aria-disabled=true]{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted)}:host([inverted]) .btn.actionable-tag{background:var(--px-color-background-container-default-default);color:var(--px-color-text-brand-inverted);border-color:var(--px-color-border-neutral-inverted)}:host([inverted]) .btn.actionable-tag:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-inverted);background:var(--px-color-background-state-hover-bordered-inverted);border-color:var(--px-color-border-state-hover-inverted)}:host([inverted]) .btn.actionable-tag:active:not([disabled],[aria-disabled=true],.loading){background:var(--px-color-background-state-active-inverted);color:var(--px-color-text-state-active-default);border-color:var(--px-color-border-none-inverted)}:host([inverted]) .btn.actionable-tag[disabled],:host([inverted]) .btn.actionable-tag[aria-disabled=true]{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted);border-color:var(--px-color-border-none-default)}:host([inverted]) button.link[disabled],:host([inverted]) button.link[aria-disabled=true]{color:var(--px-color-text-state-disabled-inverted)}:host([inverted]) button.wrapper:focus-visible{outline-color:var(--px-color-border-focus-outline-inverted)}@media only screen and (max-width: 47.938em){.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--mobile=alternative]{border-radius:var(--px-radius-button-small)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--mobile=bottom-left]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--mobile=bottom-right],.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--mobile=default]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}}@media only screen and (min-width: 48em) and (max-width: 64em){.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--tablet=alternative]{border-radius:var(--px-radius-button-small)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--tablet=bottom-left]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--tablet=bottom-right],.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--tablet=default]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}}@media only screen and (min-width: 48em){button.wrapper:focus-visible{outline-offset:var(--px-focus-offset-tablet);outline:var(--px-focus-outline-tablet) solid var(--px-color-border-focus-outline-default)}.btn{width:var(--button-extended--tablet, var(--button-extended, auto));font-size:var(--px-text-size-label-m-tablet);gap:var(--px-spacing-2xs-tablet)}.btn:focus-visible:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-tablet);outline-width:var(--px-focus-outline-tablet)}.btn.actionable-tag{padding:var(--px-padding-2xs-tablet) var(--px-padding-xs-tablet);gap:var(--px-spacing-xs-tablet)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown){padding:var(--px-padding-xs-tablet) var(--px-padding-m-tablet)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown) ::slotted([slot="after"]){margin-right:calc(var(--px-padding-xs-tablet) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown) ::slotted([slot="before"]){margin-left:calc(var(--px-padding-xs-tablet) * -1)}.btn.secondary{padding:var(--px-padding-xs-tablet) var(--px-padding-m-tablet)}.btn.tertiary{padding:var(--px-padding-2xs-tablet) 0;gap:var(--px-spacing-xs-tablet)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading){padding:var(--px-padding-2xs-tablet) var(--px-padding-s-tablet)}:is()[slot=after]{padding:0 0 0 var(--px-padding-2xs-tablet)}:is()[slot=before]{padding:0 var(--px-padding-2xs-tablet) 0 0}.btn.header-dropdown{justify-content:flex-start;align-items:center;gap:var(--px-spacing-xs-tablet);width:inherit;color:var(--px-color-text-brand-default);font-weight:var(--px-font-weight-title);font-size:var(--px-text-size-label-m-tablet);border:none;padding:0;border-radius:0;background:none}}@media only screen and (min-width: 64.0625em) and (max-width: 90em){.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--laptop=alternative]{border-radius:var(--px-radius-button-small)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--laptop=bottom-left]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--laptop=bottom-right],.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--laptop=default]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}}@media only screen and (min-width: 64.0625em){button.wrapper:focus-visible{outline-offset:var(--px-focus-offset-laptop);outline:var(--px-focus-outline-laptop) solid var(--px-color-border-focus-outline-default)}.btn{width:var(--button-extended--laptop, var(--button-extended, auto));font-size:var(--px-text-size-label-m-laptop);gap:var(--px-spacing-2xs-laptop)}.btn:focus-visble:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-laptop);outline-width:var(--px-focus-outline-laptop)}.btn.actionable-tag{padding:var(--px-padding-2xs-laptop) var(--px-padding-xs-laptop);gap:var(--px-spacing-xs-laptop)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown){padding:var(--px-padding-xs-laptop) var(--px-padding-m-laptop)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown) ::slotted([slot="after"]){margin-right:calc(var(--px-padding-xs-laptop) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown) ::slotted([slot="before"]){margin-left:calc(var(--px-padding-xs-laptop) * -1)}.btn.secondary{padding:var(--px-padding-xs-laptop) var(--px-padding-m-laptop)}.btn.tertiary{padding:var(--px-padding-2xs-laptop) 0;gap:var(--px-spacing-xs-laptop)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading){padding:var(--px-padding-2xs-laptop) var(--px-padding-s-laptop)}:is()[slot=after]{padding:0 0 0 var(--px-padding-2xs-laptop)}:is()[slot=before]{padding:0 var(--px-padding-2xs-laptop) 0 0}.btn.header-dropdown{gap:var(--px-spacing-xs-laptop);font-size:var(--px-text-size-label-m-laptop);padding:0}}@media only screen and (min-width: 90.0625em){button.wrapper:focus-visible{outline-offset:var(--px-focus-offset-desktop);outline:var(--px-focus-outline-desktop) solid var(--px-color-border-focus-outline-default)}.btn{width:var(--button-extended--desktop, var(--button-extended, auto));font-size:var(--px-text-size-label-m-desktop);gap:var(--px-spacing-2xs-desktop)}.btn:focus-visible:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}.btn.actionable-tag{padding:var(--px-padding-2xs-desktop) var(--px-padding-xs-desktop);gap:var(--px-spacing-xs-desktop)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--desktop=alternative]{border-radius:var(--px-radius-button-small)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--desktop=bottom-left]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--desktop=bottom-right],.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown)[shape--desktop=default]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown){padding:var(--px-padding-xs-desktop) var(--px-padding-m-desktop)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown) ::slotted([slot="after"]){margin-right:calc(var(--px-padding-xs-desktop) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown) ::slotted([slot="before"]){margin-left:calc(var(--px-padding-xs-desktop) * -1)}.btn.secondary{padding:var(--px-padding-xs-desktop) var(--px-padding-m-desktop)}.btn.tertiary{padding:var(--px-padding-2xs-desktop) 0;gap:var(--px-spacing-xs-desktop)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading){padding:var(--px-padding-2xs-desktop) var(--px-padding-s-desktop)}:is()[slot=after]{padding:0 0 0 var(--px-padding-2xs-desktop)}:is()[slot=before]{padding:0 var(--px-padding-2xs-desktop) 0 0}.btn.header-dropdown{gap:var(--px-spacing-xs-desktop);font-size:var(--px-text-size-label-m-desktop);padding:0}}@keyframes anim-spinner{0%{transform:rotate(0)}to{transform:rotate(360deg)}}`, ht = ':host([variant="icon-link"]){display:inline-flex}a,.link,::slotted(a){display:inline;align-items:center;font-family:var(--px-font-family);font-size:var(--px-text-size-link-m-mobile);line-height:var(--px-line-height-ratio-l);font-weight:var(--px-font-weight-body);color:var(--px-color-text-neutral-default)}a:hover,.link:hover{color:var(--px-color-text-state-hover-default)}a:focus-visible,.link:focus-visible{outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default)}a[aria-disabled=true],.link[aria-disabled=true]{cursor:default;pointer-events:none;color:var(--px-color-text-state-disabled-default)}a ::slotted([slot="after"]),.link ::slotted([slot="after"]){margin-left:var(--px-spacing-2xs-mobile)}a ::slotted(span[slot="after"]),a ::slotted(span[slot="before"]),.link ::slotted(span[slot="after"]),.link ::slotted(span[slot="before"]){display:inline-block}::slotted(a:hover){color:var(--px-color-text-state-hover-default)}a.no-style,a.wrapper{text-decoration:none}a.no-style:hover,a.no-style:focus-visible,a.wrapper:hover,a.wrapper:focus-visible{color:inherit}a.wrapper{display:block}a.wrapper:hover,a.wrapper:focus-visible{outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default)}a.skip-link{position:absolute;left:-10000px;top:auto;overflow:hidden;background-color:var(--px-color-background-container-default-default);padding:var(--px-padding-xs-mobile)}a.skip-link:focus-visible{left:auto;z-index:999}:host([target="_blank"]) ::slotted(px-icon){vertical-align:middle}.icon-link{color:var(--px-color-icon-brand-default);line-height:1;display:inline-flex}:host([inverted]) a,:host([inverted]) .link,:host([inverted]) ::slotted(a){color:var(--px-color-text-neutral-inverted)}:host([inverted]) a:hover,:host([inverted]) .link:hover{color:var(--px-color-text-state-hover-inverted)}:host([inverted]) a:focus-visible,:host([inverted]) .link:focus-visible{outline-color:var(--px-color-border-focus-outline-inverted)}:host([inverted]) a[aria-disabled=true],:host([inverted]) .link[aria-disabled=true]{color:var(--px-color-text-state-disabled-inverted)}:host([inverted]) ::slotted(a:hover){color:var(--px-color-text-state-hover-inverted)}:host([inverted]) a.skip-link{background-color:var(--px-color-background-container-default-inverted)}:host([inverted]) .icon-link{color:var(--px-color-icon-brand-inverted)}@media only screen and (min-width: 768px){a.wrapper:hover,a.wrapper:focus-visible{outline-offset:var(--px-focus-offset-tablet);outline:var(--px-focus-outline-tablet) solid var(--px-color-border-focus-outline-default)}a,.link,::slotted(a){font-size:var(--px-text-size-link-m-tablet)}a:focus-visible,.link:focus-visible{outline-offset:var(--px-focus-offset-tablet);outline-width:var(--px-focus-outline-tablet)}a ::slotted([slot="after"]),.link ::slotted([slot="after"]){margin-left:var(--px-spacing-2xs-tablet)}a.skip-link{padding:var(--px-padding-xs-tablet)}}@media only screen and (min-width: 1025px){a.wrapper:hover,a.wrapper:focus-visible{outline-offset:var(--px-focus-offset-laptop);outline:var(--px-focus-outline-laptop) solid var(--px-color-border-focus-outline-default)}a,.link,::slotted(a){font-size:var(--px-text-size-link-m-laptop)}a:focus-visible,.link:focus-visible{outline-offset:var(--px-focus-offset-laptop);outline-width:var(--px-focus-outline-laptop)}a ::slotted([slot="after"]),.link ::slotted([slot="after"]){margin-left:var(--px-spacing-2xs-laptop)}a.skip-link{padding:var(--px-padding-xs-laptop)}}@media only screen and (min-width: 90.0625em){a.wrapper:hover,a.wrapper:focus-visible{outline-offset:var(--px-focus-offset-desktop);outline:var(--px-focus-outline-desktop) solid var(--px-color-border-focus-outline-default)}a,.link,::slotted(a){font-size:var(--px-text-size-link-m-desktop)}a:focus-visible,.link:focus-visible{outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}a ::slotted([slot="after"]),.link ::slotted([slot="after"]){margin-left:var(--px-spacing-2xs-desktop)}a.skip-link{padding:var(--px-padding-xs-desktop)}}', Kt = ".patch{display:inline-flex;align-items:center;padding:var(--px-padding-3xs-mobile) var(--px-padding-s-mobile);border:var(--px-size-border-m) solid transparent;border-radius:var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-small);font-family:var(--px-font-family);font-weight:var(--px-font-weight-title);font-size:var(--px-text-size-label-m-mobile);line-height:var(--px-line-height-ratio-l);background-color:var(--px-color-background-purpose-promo-default);color:var(--px-color-text-neutral-inverted)}.patch,.patch *{box-sizing:border-box}[shape=bottom-right]{border-radius:var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-small) var(--px-radius-patch-big)}[shape=bottom-left],[shape=default]{border-radius:var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-small)}.info{background-color:var(--px-color-background-purpose-info-default);color:var(--px-color-text-neutral-default)}.black-friday{background-color:var(--px-color-background-surface-dark);color:var(--px-color-text-neutral-inverted)}.eco{background-color:var(--px-color-background-purpose-success-default);color:var(--px-color-text-neutral-inverted)}.greyed{background-color:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default)}:host([inverted]) .patch{background-color:var(--px-color-background-purpose-promo-inverted);color:var(--px-color-text-neutral-inverted)}:host([inverted]) .info{background-color:var(--px-color-background-purpose-info-inverted);color:var(--px-color-text-neutral-default)}:host([inverted]) .black-friday{background-color:var(--px-color-background-container-light-default);color:var(--px-color-text-neutral-default)}:host([inverted]) .eco{background-color:var(--px-color-background-purpose-success-inverted);color:var(--px-color-text-neutral-default)}:host([inverted]) .greyed{background-color:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted)}@media only screen and (min-width: 768px){.patch{padding:0 var(--px-padding-s-desktop);font-size:var(--px-text-size-label-m-desktop)}}@media only screen and (min-width: 1025px){.patch{padding:0 var(--px-padding-s-desktop);font-size:var(--px-text-size-label-m-desktop)}}@media only screen and (min-width: 1441px){.patch{padding:0 var(--px-padding-s-desktop);font-size:var(--px-text-size-label-m-desktop)}}", Xt = ":host:has(.tag){display:inline-block}.tag{display:inline-flex;vertical-align:middle;align-items:center;justify-content:center;font-family:var(--px-font-family);font-size:var(--px-text-size-label-m-mobile);line-height:var(--px-line-height-ratio-l);font-weight:var(--px-font-weight-body);gap:var(--px-spacing-xs-mobile);background-color:var(--px-color-background-container-default-default);color:var(--px-color-text-neutral-default);padding:var(--px-padding-2xs-mobile) var(--px-padding-xs-mobile);border:var(--px-size-border-s) solid transparent;border-radius:var(--px-radius-main)}.tag,.tag *{box-sizing:border-box}:host([disabled]) .tag{background-color:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default)}:host([inverted]) .tag{background-color:var(--px-color-background-container-default-inverted);color:var(--px-color-text-neutral-inverted)}:host([inverted]):host([disabled]) .tag{background-color:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted)}@media only screen and (min-width: 768px){.tag{font-size:var(--px-text-size-label-m-desktop);gap:var(--px-spacing-xs-desktop);padding:var(--px-padding-2xs-desktop) var(--px-padding-xs-desktop)}}@media only screen and (min-width: 1025px){.tag{font-size:var(--px-text-size-label-m-desktop);gap:var(--px-spacing-xs-desktop);padding:var(--px-padding-2xs-desktop) var(--px-padding-xs-desktop)}}", gt = new CSSStyleSheet(), ut = new CSSStyleSheet(), xt = new CSSStyleSheet(), vt = new CSSStyleSheet();
-gt.replaceSync(ct);
-ut.replaceSync(ht);
-xt.replaceSync(Kt);
-vt.replaceSync(Xt);
-const Ut = [
+const xt = `.btn{width:var(--button-extended--mobile, var(--button-extended, auto));display:inline-flex;vertical-align:middle;align-items:center;justify-content:center;font-family:var(--px-font-family);font-size:var(--px-text-size-label-m-mobile);line-height:var(--px-line-height-ratio-l);font-weight:var(--px-font-weight-title);text-align:center;gap:var(--px-spacing-2xs-mobile);cursor:pointer;text-decoration:none;--btn-transition: all .2s ease-in-out 0s;transition:var(--btn-transition);border:var(--px-size-border-m) solid transparent}.btn,.btn *{box-sizing:border-box}.btn ::slotted(px-icon){line-height:0}.btn:hover:not([disabled],[aria-disabled=true],.loading){border-color:var(--px-color-border-state-hover-default)}.btn:focus-visible:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default)}.btn:active:not([disabled],[aria-disabled=true],.loading){transform:scale(.95);border-color:var(--px-color-border-state-active-default);color:var(--px-color-text-brand-default);background:var(--px-color-background-state-hover-bordered-default)}.btn[disabled],.btn[aria-disabled=true]{cursor:default;pointer-events:none}.btn.loading{cursor:inherit}.btn.loading ::slotted(px-spinner){line-height:0}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown,.header-minimal-dropdown){color:var(--px-color-text-brand-inverted);background:var(--px-color-background-container-primary-default);min-height:var(--px-spacing-l-mobile);padding:var(--px-padding-xs-mobile) var(--px-padding-m-mobile);border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown,.header-minimal-dropdown) ::slotted([slot="after"]){margin-right:calc(var(--px-padding-xs-mobile) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown,.header-minimal-dropdown) ::slotted([slot="before"]){margin-left:calc(var(--px-padding-xs-mobile) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown,.header-minimal-dropdown):hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-default);background:var(--px-color-background-state-hover-bordered-default)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown,.header-minimal-dropdown)[disabled],.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown,.header-minimal-dropdown)[aria-disabled=true]{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown,.header-minimal-dropdown).loading{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-brand-default);border-color:transparent}.btn.secondary{color:var(--px-color-text-brand-default);background:var(--px-color-background-container-secondary-default);min-height:var(--px-spacing-l-mobile);padding:var(--px-padding-xs-mobile) var(--px-padding-m-mobile);border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}.btn.secondary:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-default);background:var(--px-color-background-state-hover-bordered-default)}.btn.secondary[disabled],.btn.secondary[aria-disabled=true]{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default)}.btn.secondary.loading{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-brand-default);border-color:transparent}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown,.header-minimal-dropdown)[shape=alternative]{border-radius:var(--px-radius-button-small)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown,.header-minimal-dropdown)[shape=bottom-left]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown,.header-minimal-dropdown)[shape=bottom-right],.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown,.header-minimal-dropdown)[shape=default]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}.btn.tertiary{background:none;color:var(--px-color-text-brand-default);border-radius:var(--px-radius-pill);border:var(--px-size-border-m) solid transparent;padding:var(--px-padding-2xs-mobile) 0;gap:var(--px-spacing-xs-mobile)}.btn.tertiary ::slotted(px-icon){display:flex;align-items:center;justify-content:center;width:var(--px-size-m);height:var(--px-size-m);border-radius:var(--px-radius-pill);background:var(--px-color-background-container-secondary-default);transition:var(--btn-transition)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading),.btn.tertiary:active:not([disabled],[aria-disabled=true],.loading){padding:var(--px-padding-2xs-mobile) var(--px-padding-s-mobile)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon),.btn.tertiary:active:not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon){background:transparent;margin:0 -8px}:is()[slot=after]{padding:0 0 0 var(--px-padding-2xs-mobile)}:is()[slot=before]{padding:0 var(--px-padding-2xs-mobile) 0 0}.btn.tertiary[disabled],.btn.tertiary[aria-disabled=true]{color:var(--px-color-text-state-disabled-default)}.btn.tertiary[disabled] ::slotted(px-icon),.btn.tertiary[aria-disabled=true] ::slotted(px-icon){background:var(--px-color-background-state-disabled-default)}.btn.tertiary.loading{color:var(--px-color-text-brand-default);border-color:transparent}.btn.tertiary.loading ::slotted(px-spinner){display:flex;align-items:center;justify-content:center;width:var(--px-size-m);height:var(--px-size-m);border-radius:var(--px-radius-pill);background:var(--px-color-background-state-disabled-default)}.btn.patch{display:inline-flex}.btn.patch:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-default);background:var(--px-color-background-state-hover-bordered-default)}.btn.patch[disabled],.btn.patch[aria-disabled=true]{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default)}.btn.actionable-tag{background:var(--px-color-background-container-default-inverted);color:var(--px-color-text-neutral-default);padding:var(--px-padding-2xs-mobile) var(--px-padding-xs-mobile);gap:var(--px-spacing-xs-mobile);border-radius:var(--px-radius-pill);border:var(--px-size-border-m) solid var(--px-color-border-neutral-default)}.btn.actionable-tag:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-default);background:var(--px-color-background-state-hover-bordered-default)}.btn.actionable-tag:active:not([disabled],[aria-disabled=true],.loading){background:var(--px-color-background-state-active-default);color:var(--px-color-text-state-active-inverted);border-color:var(--px-color-border-none-default)}.btn.actionable-tag[disabled],.btn.actionable-tag[aria-disabled=true]{background:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default);border-color:var(--px-color-border-none-default)}.btn.header-dropdown,.btn.header-minimal-dropdown{display:flex;align-items:center;touch-action:manipulation}.btn.header-dropdown:after,.btn.header-minimal-dropdown:after{display:inline-block;content:"";width:var(--px-size-icon-xs);height:var(--px-size-icon-xs);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:cover;mask-size:cover;-webkit-mask-position:50% 50%;mask-position:50% 50%;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.38 5.90237C12.125 5.65131 11.7115 5.65131 11.4564 5.90237L7.99986 9.30494L4.54328 5.90237C4.28824 5.65131 3.87474 5.65131 3.61971 5.90237C3.36467 6.15342 3.36467 6.56045 3.61971 6.8115L7.53808 10.6686C7.79311 10.9197 8.20661 10.9197 8.46164 10.6686L12.38 6.8115C12.635 6.56045 12.635 6.15342 12.38 5.90237Z' fill='%235C2D91'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.38 5.90237C12.125 5.65131 11.7115 5.65131 11.4564 5.90237L7.99986 9.30494L4.54328 5.90237C4.28824 5.65131 3.87474 5.65131 3.61971 5.90237C3.36467 6.15342 3.36467 6.56045 3.61971 6.8115L7.53808 10.6686C7.79311 10.9197 8.20661 10.9197 8.46164 10.6686L12.38 6.8115C12.635 6.56045 12.635 6.15342 12.38 5.90237Z' fill='%235C2D91'/%3E%3C/svg%3E");background-color:currentColor;color:var(--px-color-icon-brand-default);--btn-transition: all .2s ease-in-out 0s;transition:var(--btn-transition)}.btn.header-dropdown[aria-expanded=true]:after,.btn.header-minimal-dropdown[aria-expanded=true]:after{transform:rotate(180deg)}.btn.header-dropdown{justify-content:space-between;gap:var(--px-spacing-s-mobile);width:100%;color:var(--px-color-text-neutral-default);font-weight:var(--px-font-weight-body);font-size:var(--px-text-size-label-l-mobile);border:var(--px-size-border-m) solid var(--px-color-border-neutral-default);padding:var(--px-padding-xs-mobile) var(--px-padding-s-mobile);border-radius:var(--px-radius-main);background-color:var(--px-color-background-container-default-default)}.btn.header-minimal-dropdown{justify-content:flex-start;gap:var(--px-spacing-xs-mobile);color:var(--px-color-text-brand-default);font-weight:var(--px-font-weight-title);font-size:var(--px-text-size-label-m-mobile);border:none;padding:0;border-radius:0;background:none}button.link{background:none;border:none;text-decoration:underline;padding:0;cursor:pointer}button.link[disabled],button.link[aria-disabled=true]{cursor:default;pointer-events:none;color:var(--px-color-text-state-disabled-default)}button.wrapper{all:unset;cursor:pointer}button.wrapper:focus-visible{outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default)}button.wrapper[disabled],button.wrapper[aria-disabled=true]{cursor:default;pointer-events:none}:host([inverted]) .btn:hover:not([disabled],[aria-disabled=true],.loading){border-color:var(--px-color-border-state-hover-inverted)}:host([inverted]) .btn:focus-visible:not([disabled],[aria-disabled=true]){outline-color:var(--px-color-border-focus-outline-inverted)}:host([inverted]) .btn:active:not([disabled],[aria-disabled=true],.loading){border-color:var(--px-color-border-state-active-inverted);color:var(--px-color-text-brand-inverted);background:var(--px-color-background-state-hover-bordered-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown,.header-minimal-dropdown){color:var(--px-color-text-brand-default);background:var(--px-color-background-container-primary-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown,.header-minimal-dropdown):hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-inverted);background:var(--px-color-background-state-hover-bordered-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown,.header-minimal-dropdown)[disabled],:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown,.header-minimal-dropdown)[aria-disabled=true]{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown,.header-minimal-dropdown).loading{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-brand-inverted);border-color:transparent}:host([inverted]) .btn.secondary{color:var(--px-color-text-brand-inverted);background:var(--px-color-background-container-secondary-inverted)}:host([inverted]) .btn.secondary:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-inverted);background:var(--px-color-background-container-default-inverted)}:host([inverted]) .btn.secondary[disabled],:host([inverted]) .btn.secondary[aria-disabled=true]{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted)}:host([inverted]) .btn.secondary.loading{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-brand-inverted);border-color:transparent}:host([inverted]) .btn.tertiary{color:var(--px-color-text-brand-inverted)}:host([inverted]) .btn.tertiary ::slotted(px-icon){background:var(--px-color-background-container-secondary-inverted)}:host([inverted]) .btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon),:host([inverted]) .btn.tertiary:active:not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon){background:transparent}:host([inverted]) .btn.tertiary[disabled],:host([inverted]) .btn.tertiary[aria-disabled=true]{color:var(--px-color-text-state-disabled-inverted)}:host([inverted]) .btn.tertiary[disabled] ::slotted(px-icon),:host([inverted]) .btn.tertiary[aria-disabled=true] ::slotted(px-icon){background:var(--px-color-background-state-disabled-inverted)}:host([inverted]) .btn.tertiary.loading{color:var(--px-color-text-brand-inverted)}:host([inverted]) .btn.tertiary.loading ::slotted(px-spinner){background:var(--px-color-background-state-disabled-inverted)}:host([inverted]) .btn.patch:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-inverted);background:var(--px-color-background-state-hover-bordered-inverted)}:host([inverted]) .btn.patch[disabled],:host([inverted]) .btn.patch[aria-disabled=true]{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted)}:host([inverted]) .btn.actionable-tag{background:var(--px-color-background-container-default-default);color:var(--px-color-text-brand-inverted);border-color:var(--px-color-border-neutral-inverted)}:host([inverted]) .btn.actionable-tag:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-text-brand-inverted);background:var(--px-color-background-state-hover-bordered-inverted);border-color:var(--px-color-border-state-hover-inverted)}:host([inverted]) .btn.actionable-tag:active:not([disabled],[aria-disabled=true],.loading){background:var(--px-color-background-state-active-inverted);color:var(--px-color-text-state-active-default);border-color:var(--px-color-border-none-inverted)}:host([inverted]) .btn.actionable-tag[disabled],:host([inverted]) .btn.actionable-tag[aria-disabled=true]{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted);border-color:var(--px-color-border-none-default)}:host([inverted]) button.link[disabled],:host([inverted]) button.link[aria-disabled=true]{color:var(--px-color-text-state-disabled-inverted)}:host([inverted]) button.wrapper:focus-visible{outline-color:var(--px-color-border-focus-outline-inverted)}:host([inverted]) .btn.header-minimal-dropdown{color:var(--px-color-text-brand-inverted)}:host([inverted]) .btn.header-minimal-dropdown:after{color:var(--px-color-icon-brand-inverted)}@media screen and (max-width: 47.938rem){.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown,.header-minimal-dropdown)[shape--mobile=alternative]{border-radius:var(--px-radius-button-small)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown,.header-minimal-dropdown)[shape--mobile=bottom-left]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown,.header-minimal-dropdown)[shape--mobile=bottom-right],.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown,.header-minimal-dropdown)[shape--mobile=default]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}}@media screen and (min-width: 48rem) and (max-width: 64rem){.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown,.header-minimal-dropdown)[shape--tablet=alternative]{border-radius:var(--px-radius-button-small)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown,.header-minimal-dropdown)[shape--tablet=bottom-left]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown,.header-minimal-dropdown)[shape--tablet=bottom-right],.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown,.header-minimal-dropdown)[shape--tablet=default]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}}@media screen and (min-width: 48rem){button.wrapper:focus-visible{outline-offset:var(--px-focus-offset-tablet);outline:var(--px-focus-outline-tablet) solid var(--px-color-border-focus-outline-default)}.btn{width:var(--button-extended--tablet, var(--button-extended, auto));font-size:var(--px-text-size-label-m-tablet);gap:var(--px-spacing-2xs-tablet)}.btn:focus-visible:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-tablet);outline-width:var(--px-focus-outline-tablet)}.btn.actionable-tag{padding:var(--px-padding-2xs-tablet) var(--px-padding-xs-tablet);gap:var(--px-spacing-xs-tablet)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown,.header-minimal-dropdown){padding:var(--px-padding-xs-tablet) var(--px-padding-m-tablet)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown,.header-minimal-dropdown) ::slotted([slot="after"]){margin-right:calc(var(--px-padding-xs-tablet) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown,.header-minimal-dropdown) ::slotted([slot="before"]){margin-left:calc(var(--px-padding-xs-tablet) * -1)}.btn.secondary{padding:var(--px-padding-xs-tablet) var(--px-padding-m-tablet)}.btn.tertiary{padding:var(--px-padding-2xs-tablet) 0;gap:var(--px-spacing-xs-tablet)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading){padding:var(--px-padding-2xs-tablet) var(--px-padding-s-tablet)}:is()[slot=after]{padding:0 0 0 var(--px-padding-2xs-tablet)}:is()[slot=before]{padding:0 var(--px-padding-2xs-tablet) 0 0}.btn.header-dropdown,.btn.header-minimal-dropdown{gap:var(--px-spacing-xs-tablet);font-size:var(--px-text-size-label-m-tablet)}.btn.header-dropdown{justify-content:flex-start;align-items:center;width:inherit;color:var(--px-color-text-brand-default);font-weight:var(--px-font-weight-title);border:none;padding:0;border-radius:0;background:none}}@media screen and (min-width: 64.0625rem) and (max-width: 90rem){.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown,.header-minimal-dropdown)[shape--laptop=alternative]{border-radius:var(--px-radius-button-small)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown,.header-minimal-dropdown)[shape--laptop=bottom-left]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown,.header-minimal-dropdown)[shape--laptop=bottom-right],.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown,.header-minimal-dropdown)[shape--laptop=default]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}}@media screen and (min-width: 64.0625rem){button.wrapper:focus-visible{outline-offset:var(--px-focus-offset-laptop);outline:var(--px-focus-outline-laptop) solid var(--px-color-border-focus-outline-default)}.btn{width:var(--button-extended--laptop, var(--button-extended, auto));font-size:var(--px-text-size-label-m-laptop);gap:var(--px-spacing-2xs-laptop)}.btn:focus-visble:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-laptop);outline-width:var(--px-focus-outline-laptop)}.btn.actionable-tag{padding:var(--px-padding-2xs-laptop) var(--px-padding-xs-laptop);gap:var(--px-spacing-xs-laptop)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown,.header-minimal-dropdown){padding:var(--px-padding-xs-laptop) var(--px-padding-m-laptop)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown,.header-minimal-dropdown) ::slotted([slot="after"]){margin-right:calc(var(--px-padding-xs-laptop) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown,.header-minimal-dropdown) ::slotted([slot="before"]){margin-left:calc(var(--px-padding-xs-laptop) * -1)}.btn.secondary{padding:var(--px-padding-xs-laptop) var(--px-padding-m-laptop)}.btn.tertiary{padding:var(--px-padding-2xs-laptop) 0;gap:var(--px-spacing-xs-laptop)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading){padding:var(--px-padding-2xs-laptop) var(--px-padding-s-laptop)}:is()[slot=after]{padding:0 0 0 var(--px-padding-2xs-laptop)}:is()[slot=before]{padding:0 var(--px-padding-2xs-laptop) 0 0}.btn.header-dropdown,.btn.header-minimal-dropdown{gap:var(--px-spacing-xs-laptop);font-size:var(--px-text-size-label-m-laptop)}.btn.header-dropdown{padding:0}}@media screen and (min-width: 90.0625rem){button.wrapper:focus-visible{outline-offset:var(--px-focus-offset-desktop);outline:var(--px-focus-outline-desktop) solid var(--px-color-border-focus-outline-default)}.btn{width:var(--button-extended--desktop, var(--button-extended, auto));font-size:var(--px-text-size-label-m-desktop);gap:var(--px-spacing-2xs-desktop)}.btn:focus-visible:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}.btn.actionable-tag{padding:var(--px-padding-2xs-desktop) var(--px-padding-xs-desktop);gap:var(--px-spacing-xs-desktop)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown,.header-minimal-dropdown)[shape--desktop=alternative]{border-radius:var(--px-radius-button-small)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown,.header-minimal-dropdown)[shape--desktop=bottom-left]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big)}.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown,.header-minimal-dropdown)[shape--desktop=bottom-right],.btn:not(.tertiary,.patch,.actionable-tag,.header-dropdown,.header-minimal-dropdown)[shape--desktop=default]{border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown,.header-minimal-dropdown){padding:var(--px-padding-xs-desktop) var(--px-padding-m-desktop)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown,.header-minimal-dropdown) ::slotted([slot="after"]){margin-right:calc(var(--px-padding-xs-desktop) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag,.header-dropdown,.header-minimal-dropdown) ::slotted([slot="before"]){margin-left:calc(var(--px-padding-xs-desktop) * -1)}.btn.secondary{padding:var(--px-padding-xs-desktop) var(--px-padding-m-desktop)}.btn.tertiary{padding:var(--px-padding-2xs-desktop) 0;gap:var(--px-spacing-xs-desktop)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading){padding:var(--px-padding-2xs-desktop) var(--px-padding-s-desktop)}:is()[slot=after]{padding:0 0 0 var(--px-padding-2xs-desktop)}:is()[slot=before]{padding:0 var(--px-padding-2xs-desktop) 0 0}.btn.header-dropdown,.btn.header-minimal-dropdown{gap:var(--px-spacing-xs-desktop);font-size:var(--px-text-size-label-m-desktop)}.btn.header-dropdown{padding:0}}@keyframes anim-spinner{0%{transform:rotate(0)}to{transform:rotate(360deg)}}`, vt = ':host([variant="icon-link"]){display:inline-flex}a,.link,::slotted(a){display:inline;align-items:center;font-family:var(--px-font-family);font-size:var(--px-text-size-link-m-mobile);line-height:var(--px-line-height-ratio-l);font-weight:var(--px-font-weight-body);color:var(--px-color-text-neutral-default)}a:hover,.link:hover{color:var(--px-color-text-state-hover-default)}a:focus-visible,.link:focus-visible{outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default)}a[aria-disabled=true],.link[aria-disabled=true]{cursor:default;pointer-events:none;color:var(--px-color-text-state-disabled-default)}a ::slotted([slot="after"]),.link ::slotted([slot="after"]){margin-left:var(--px-spacing-2xs-mobile)}a ::slotted(span[slot="after"]),a ::slotted(span[slot="before"]),.link ::slotted(span[slot="after"]),.link ::slotted(span[slot="before"]){display:inline-block}::slotted(a:hover){color:var(--px-color-text-state-hover-default)}a.no-style,a.wrapper{text-decoration:none}a.no-style:hover,a.no-style:focus-visible,a.wrapper:hover,a.wrapper:focus-visible{color:inherit}a.wrapper{display:block;line-height:0}a.wrapper:focus-visible{outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default)}a.skip-link{position:absolute;left:-10000px;top:auto;overflow:hidden;background-color:var(--px-color-background-container-default-default);padding:var(--px-padding-xs-mobile)}a.skip-link:focus-visible{left:auto;z-index:999}:host([target="_blank"]) ::slotted(px-icon){vertical-align:middle}.icon-link{color:var(--px-color-icon-brand-default);line-height:1;display:inline-flex}:host([inverted]) a,:host([inverted]) .link,:host([inverted]) ::slotted(a){color:var(--px-color-text-neutral-inverted)}:host([inverted]) a:hover,:host([inverted]) .link:hover{color:var(--px-color-text-state-hover-inverted)}:host([inverted]) a:focus-visible,:host([inverted]) .link:focus-visible{outline-color:var(--px-color-border-focus-outline-inverted)}:host([inverted]) a[aria-disabled=true],:host([inverted]) .link[aria-disabled=true]{color:var(--px-color-text-state-disabled-inverted)}:host([inverted]) ::slotted(a:hover){color:var(--px-color-text-state-hover-inverted)}:host([inverted]) a.skip-link{background-color:var(--px-color-background-container-default-inverted)}:host([inverted]) .icon-link{color:var(--px-color-icon-brand-inverted)}@media screen and (min-width: 48rem){a.wrapper:focus-visible{outline-offset:var(--px-focus-offset-tablet);outline:var(--px-focus-outline-tablet) solid var(--px-color-border-focus-outline-default)}a,.link,::slotted(a){font-size:var(--px-text-size-link-m-tablet)}a:focus-visible,.link:focus-visible{outline-offset:var(--px-focus-offset-tablet);outline-width:var(--px-focus-outline-tablet)}a ::slotted([slot="after"]),.link ::slotted([slot="after"]){margin-left:var(--px-spacing-2xs-tablet)}a.skip-link{padding:var(--px-padding-xs-tablet)}}@media screen and (min-width: 64.0625rem){a.wrapper:focus-visible{outline-offset:var(--px-focus-offset-laptop);outline:var(--px-focus-outline-laptop) solid var(--px-color-border-focus-outline-default)}a,.link,::slotted(a){font-size:var(--px-text-size-link-m-laptop)}a:focus-visible,.link:focus-visible{outline-offset:var(--px-focus-offset-laptop);outline-width:var(--px-focus-outline-laptop)}a ::slotted([slot="after"]),.link ::slotted([slot="after"]){margin-left:var(--px-spacing-2xs-laptop)}a.skip-link{padding:var(--px-padding-xs-laptop)}}@media screen and (min-width: 90.0625rem){a.wrapper:focus-visible{outline-offset:var(--px-focus-offset-desktop);outline:var(--px-focus-outline-desktop) solid var(--px-color-border-focus-outline-default)}a,.link,::slotted(a){font-size:var(--px-text-size-link-m-desktop)}a:focus-visible,.link:focus-visible{outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}a ::slotted([slot="after"]),.link ::slotted([slot="after"]){margin-left:var(--px-spacing-2xs-desktop)}a.skip-link{padding:var(--px-padding-xs-desktop)}}', Ut = ".patch{display:inline-flex;align-items:center;padding:var(--px-padding-3xs-mobile) var(--px-padding-s-mobile);border:var(--px-size-border-m) solid transparent;border-radius:var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-small);font-family:var(--px-font-family);font-weight:var(--px-font-weight-title);font-size:var(--px-text-size-label-m-mobile);line-height:var(--px-line-height-ratio-l);background-color:var(--px-color-background-purpose-promo-default);color:var(--px-color-text-neutral-inverted)}.patch,.patch *{box-sizing:border-box}[shape=bottom-right]{border-radius:var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-small) var(--px-radius-patch-big)}[shape=bottom-left],[shape=default]{border-radius:var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-small)}.info{background-color:var(--px-color-background-purpose-info-default);color:var(--px-color-text-neutral-default)}.black-friday{background-color:var(--px-color-background-surface-dark);color:var(--px-color-text-neutral-inverted)}.eco{background-color:var(--px-color-background-purpose-success-default);color:var(--px-color-text-neutral-inverted)}.greyed{background-color:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default)}:host([inverted]) .patch{background-color:var(--px-color-background-purpose-promo-inverted);color:var(--px-color-text-neutral-inverted)}:host([inverted]) .info{background-color:var(--px-color-background-purpose-info-inverted);color:var(--px-color-text-neutral-default)}:host([inverted]) .black-friday{background-color:var(--px-color-background-container-light-default);color:var(--px-color-text-neutral-default)}:host([inverted]) .eco{background-color:var(--px-color-background-purpose-success-inverted);color:var(--px-color-text-neutral-default)}:host([inverted]) .greyed{background-color:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted)}@media screen and (min-width: 48rem){.patch{padding:0 var(--px-padding-s-tablet);font-size:var(--px-text-size-label-m-tablet)}}@media screen and (min-width: 64.0625rem){.patch{padding:0 var(--px-padding-s-laptop);font-size:var(--px-text-size-label-m-laptop)}}@media screen and (min-width: 90.0625rem){.patch{padding:0 var(--px-padding-s-desktop);font-size:var(--px-text-size-label-m-desktop)}}", Jt = ":host:has(.tag){display:inline-block}.tag{display:inline-flex;vertical-align:middle;align-items:center;justify-content:center;font-family:var(--px-font-family);font-size:var(--px-text-size-label-m-mobile);line-height:var(--px-line-height-ratio-l);font-weight:var(--px-font-weight-body);gap:var(--px-spacing-xs-mobile);background-color:var(--px-color-background-container-default-default);color:var(--px-color-text-neutral-default);padding:var(--px-padding-2xs-mobile) var(--px-padding-xs-mobile);border:var(--px-size-border-s) solid transparent;border-radius:var(--px-radius-main)}.tag,.tag *{box-sizing:border-box}:host([disabled]) .tag{background-color:var(--px-color-background-state-disabled-default);color:var(--px-color-text-state-disabled-default)}:host([inverted]) .tag{background-color:var(--px-color-background-container-default-inverted);color:var(--px-color-text-neutral-inverted)}:host([inverted]):host([disabled]) .tag{background-color:var(--px-color-background-state-disabled-inverted);color:var(--px-color-text-state-disabled-inverted)}@media screen and (min-width: 48rem){.tag{font-size:var(--px-text-size-label-m-tablet);gap:var(--px-spacing-xs-tablet);padding:var(--px-padding-2xs-tablet) var(--px-padding-xs-tablet)}}@media screen and (min-width: 64.0625rem){.tag{font-size:var(--px-text-size-label-m-laptop);gap:var(--px-spacing-xs-laptop);padding:var(--px-padding-2xs-laptop) var(--px-padding-xs-laptop)}}", mt = new CSSStyleSheet(), ft = new CSSStyleSheet(), kt = new CSSStyleSheet(), yt = new CSSStyleSheet();
+mt.replaceSync(xt);
+ft.replaceSync(vt);
+kt.replaceSync(Ut);
+yt.replaceSync(Jt);
+const dt = [
   "",
   "default",
   "secondary",
@@ -21,16 +21,17 @@ const Ut = [
   "patch-black-friday",
   "patch-eco",
   "actionable-tag",
-  "header-dropdown"
-], Jt = [
+  "header-dropdown",
+  "header-minimal-dropdown"
+], Qt = [
   "",
   "default",
   "bottom-right",
   "bottom-left",
   "alternative"
-], K = class K extends w {
+], U = class U extends $ {
   constructor() {
-    super(gt, ut, xt, vt), this.template = () => `<button class="btn">
+    super(mt, ft, kt, yt), this.template = () => `<button class="btn">
       <slot name="before"></slot><slot></slot><slot name="after"></slot>
      </button>`, this.shadowRoot.innerHTML = this.template();
   }
@@ -57,62 +58,62 @@ const Ut = [
   connectedCallback() {
     const t = this.querySelectorAll("px-icon");
     t && t.forEach((e) => {
-      const o = e.getAttribute("size"), r = e.getAttribute("color");
+      const r = e.getAttribute("size"), o = e.getAttribute("color");
       e && (e.addEventListener("click", () => {
         this.$el.focus();
-      }), o || e.setAttribute("size", "xs"), r || e.setAttribute("color", "inherit"));
-    }), it(this, this.$el, !0), this.$el.type === "submit" && this.addEventListener("click", (e) => {
-      var o;
-      e.preventDefault(), (o = this.closest("form")) == null || o.submit();
+      }), r || e.setAttribute("size", "xs"), o || e.setAttribute("color", "inherit"));
+    }), pt(this, this.$el, !0), this.$el.type === "submit" && this.addEventListener("click", (e) => {
+      var r;
+      e.preventDefault(), (r = this.closest("form")) == null || r.submit();
     }), this.$el.type === "reset" && this.addEventListener("click", (e) => {
-      var o;
-      e.preventDefault(), (o = this.closest("form")) == null || o.reset();
+      var r;
+      e.preventDefault(), (r = this.closest("form")) == null || r.reset();
     });
   }
   disconnectedCallback() {
   }
-  attributeChangedCallback(t, e, o) {
-    if (e !== o)
+  attributeChangedCallback(t, e, r) {
+    if (e !== r)
       switch (t) {
         case "variant":
-          this.updateVariant(e, o);
+          this.updateVariant(e, r);
           break;
         case "state":
-          this.updateState(e, o);
+          this.updateState(e, r);
           break;
         case "extended":
         case "extended--mobile":
         case "extended--tablet":
         case "extended--laptop":
         case "extended--desktop":
-          this.updateExtended(t, o);
+          this.updateExtended(t, r);
           break;
         case "loading":
           this.updateLoading();
           break;
         case "disabled":
-          super.attributeChangedCallback(t, e, o);
+          super.attributeChangedCallback(t, e, r);
           break;
         case "shape":
         case "shape--mobile":
         case "shape--tablet":
         case "shape--laptop":
         case "shape--desktop":
-          this.updateShape(t, o, Jt);
+          this.updateShape(t, r, Qt);
           break;
         case "aria-expanded":
-          o && (this.$el.setAttribute("aria-expanded", o), this.removeAttribute("aria-expanded"));
+          r && (this.$el.setAttribute("aria-expanded", r), this.removeAttribute("aria-expanded"));
           break;
         default:
-          super.attributeChangedCallback(t, e, o);
+          super.attributeChangedCallback(t, e, r);
           break;
       }
   }
   checkClass(t) {
     if (t.startsWith("patch-")) {
       const e = t.split(/-(.*)/s);
-      for (const o of e)
-        o != "" && this.$el.classList.toggle(o);
+      for (const r of e)
+        r != "" && this.$el.classList.toggle(r);
     } else
       this.$el.classList.toggle(t);
   }
@@ -120,14 +121,14 @@ const Ut = [
     t !== null && t !== "" && t !== "default" && this.checkClass(t), e !== null && e !== "" && e !== "default" && this.checkClass(e);
   }
   updateVariant(t, e) {
-    e === "link" ? this.$el.classList.remove("btn") : this.$el.classList.add("btn"), this._toggleClass(t, e), this.checkName(Ut, e) || d(
-      `${e} is not a valid "variant" value for ${this.tagName.toLowerCase()}`
+    e === "link" ? this.$el.classList.remove("btn") : this.$el.classList.add("btn"), this._toggleClass(t, e), this.checkName(dt, e) || d(
+      `"${e}" is not a valid variant value for ${this.tagName.toLowerCase()}. Allowed values are: "${dt.join('", "')}".`
     );
   }
   updateState(t, e) {
-    const o = ["", "default", "success", "error"];
-    this._toggleClass(t, e), this.checkName(o, e) || d(
-      `${e} is not a valid "sate" value for ${this.tagName.toLowerCase()}`
+    const r = ["", "default", "success", "error"];
+    this._toggleClass(t, e), this.checkName(r, e) || d(
+      `"${e}" is not a valid state value for ${this.tagName.toLowerCase()}. Allowed values are: "${r.join('", "')}".`
     );
   }
   updateExtended(t, e) {
@@ -137,10 +138,10 @@ const Ut = [
     const t = this.querySelector("px-spinner");
     t && (t.getAttribute("size") || t.setAttribute("size", "xs")), this.$el.classList.toggle("loading");
   }
-  updateShape(t, e, o) {
-    if (!$(o, e)) {
+  updateShape(t, e, r) {
+    if (!w(r, e)) {
       d(
-        `${e} is not a valid shape value for ${this.tagName.toLowerCase()}`
+        `"${e}" is not a valid shape value for ${this.tagName.toLowerCase()}. Allowed values are: "${r.join('", "')}".`
       );
       return;
     }
@@ -237,19 +238,19 @@ const Ut = [
     t ? this.setAttribute("aria-expanded", t) : this.removeAttribute("aria-expanded");
   }
 };
-K.nativeName = "button";
-let C = K;
+U.nativeName = "button";
+let C = U;
 customElements.get("px-button") || customElements.define("px-button", C);
-var x, T, ft;
-class Qt extends C {
+var x, T, At;
+class Vt extends C {
   constructor() {
     super();
     c(this, T);
     c(this, x);
-    this.$el.classList.remove("btn"), this.$el.classList.add("wrapper"), k(this, x, new at(
+    this.$el.classList.remove("btn"), this.$el.classList.add("wrapper"), k(this, x, new bt(
       this,
       this.$el,
-      () => P(this, T, ft).call(this)
+      () => j(this, T, At).call(this)
     ));
   }
   connectedCallback() {
@@ -258,26 +259,26 @@ class Qt extends C {
   disconnectedCallback() {
     super.disconnectedCallback(), n(this, x).disconnect();
   }
-  attributeChangedCallback(e, o, r) {
-    if (o !== r)
+  attributeChangedCallback(e, r, o) {
+    if (r !== o)
       switch (e) {
         case "loading":
-          super.attributeChangedCallback(e, o, r), r !== null && n(this, x).clearInteractiveState();
+          super.attributeChangedCallback(e, r, o), o !== null && n(this, x).clearInteractiveState();
           break;
         case "disabled":
-          super.attributeChangedCallback(e, o, r), r !== null && n(this, x).clearInteractiveState();
+          super.attributeChangedCallback(e, r, o), o !== null && n(this, x).clearInteractiveState();
           break;
         default:
-          super.attributeChangedCallback(e, o, r);
+          super.attributeChangedCallback(e, r, o);
           break;
       }
   }
 }
-x = new WeakMap(), T = new WeakSet(), ft = function() {
+x = new WeakMap(), T = new WeakSet(), At = function() {
   return !this.hasAttribute("disabled") && !this.$el.hasAttribute("disabled") && this.getAttribute("aria-disabled") !== "true" && this.$el.getAttribute("aria-disabled") !== "true" && !this.hasAttribute("loading");
 };
-customElements.get("px-button-wrapper") || customElements.define("px-button-wrapper", Qt);
-class Vt extends HTMLElement {
+customElements.get("px-button-wrapper") || customElements.define("px-button-wrapper", Vt);
+class te extends HTMLElement {
   constructor() {
     super();
   }
@@ -310,8 +311,8 @@ class Vt extends HTMLElement {
     t && t.remove();
   }
 }
-customElements.get("px-icon-set") || customElements.define("px-icon-set", Vt);
-const te = [
+customElements.get("px-icon-set") || customElements.define("px-icon-set", te);
+const ee = [
   "Brand",
   "Accent",
   "Neutral",
@@ -324,21 +325,21 @@ const te = [
   "StateHover",
   "StateActive",
   "StateDisabled"
-], ee = ["Inherit", ...te].map(
+], re = ["Inherit", ...ee].map(
   (s) => s.replace(/([A-Z])/g, "-$1").toLowerCase().slice(1)
-), oe = ":host{display:inline-flex;flex-direction:column;justify-content:center}svg{font-size:var(--px-size-icon-s);line-height:var(--px-font-line-height-xs);width:1em;height:1em;color:var(--px-color-icon-accent-default)}.inherit{color:inherit}.brand{color:var(--px-color-icon-brand-default)}.accent{color:var(--px-color-icon-accent-default)}.neutral{color:var(--px-color-icon-neutral-default)}.dimmed{color:var(--px-color-icon-dimmed-default)}.purpose-success{color:var(--px-color-icon-purpose-success-default)}.purpose-warning{color:var(--px-color-icon-purpose-warning-default)}.purpose-error{color:var(--px-color-icon-purpose-error-default)}.purpose-unlimited{color:var(--px-color-icon-purpose-unlimited-default)}.purpose-promo{color:var(--px-color-icon-purpose-promo-default)}.state-hover:hover{color:var(--px-color-icon-state-hover-default)}.state-active:active{color:var(--px-color-icon-state-active-default)}.state-disabled{color:var(--px-color-icon-state-disabled-default)}:host([inverted]) svg{color:var(--px-color-icon-accent-inverted)}:host([inverted]) .inherit{color:inherit}:host([inverted]) .brand{color:var(--px-color-icon-brand-inverted)}:host([inverted]) .accent{color:var(--px-color-icon-accent-inverted)}:host([inverted]) .neutral{color:var(--px-color-icon-neutral-inverted)}:host([inverted]) .dimmed{color:var(--px-color-icon-dimmed-inverted)}:host([inverted]) .purpose-success{color:var(--px-color-icon-purpose-success-inverted)}:host([inverted]) .purpose-warning{color:var(--px-color-icon-purpose-warning-inverted)}:host([inverted]) .purpose-error{color:var(--px-color-icon-purpose-error-inverted)}:host([inverted]) .purpose-unlimited{color:var(--px-color-icon-purpose-unlimited-inverted)}:host([inverted]) .purpose-promo{color:var(--px-color-icon-purpose-promo-inverted)}:host([inverted]) .state-hover:hover{color:var(--px-color-icon-state-hover-inverted)}:host([inverted]) .state-active:active{color:var(--px-color-icon-state-active-inverted)}:host([inverted]) .state-disabled{color:var(--px-color-icon-state-disabled-inverted)}.size-xs{font-size:var(--px-size-icon-xs)}.size-s{font-size:var(--px-size-icon-s)}.size-m{font-size:var(--px-size-icon-m)}.size-l{font-size:var(--px-size-icon-l)}.size-xl{font-size:var(--px-size-icon-xl)}", mt = new CSSStyleSheet();
-mt.replaceSync(oe);
-var f, b, E;
-class re extends st {
+), oe = ":host{display:inline-flex;flex-direction:column;justify-content:center}svg{font-size:var(--px-size-icon-s);line-height:var(--px-font-line-height-xs);width:1em;height:1em;color:var(--px-color-icon-accent-default)}.inherit{color:inherit}.brand{color:var(--px-color-icon-brand-default)}.accent{color:var(--px-color-icon-accent-default)}.neutral{color:var(--px-color-icon-neutral-default)}.dimmed{color:var(--px-color-icon-dimmed-default)}.purpose-success{color:var(--px-color-icon-purpose-success-default)}.purpose-warning{color:var(--px-color-icon-purpose-warning-default)}.purpose-error{color:var(--px-color-icon-purpose-error-default)}.purpose-unlimited{color:var(--px-color-icon-purpose-unlimited-default)}.purpose-promo{color:var(--px-color-icon-purpose-promo-default)}.state-hover:hover{color:var(--px-color-icon-state-hover-default)}.state-active:active{color:var(--px-color-icon-state-active-default)}.state-disabled{color:var(--px-color-icon-state-disabled-default)}:host([inverted]) svg{color:var(--px-color-icon-accent-inverted)}:host([inverted]) .inherit{color:inherit}:host([inverted]) .brand{color:var(--px-color-icon-brand-inverted)}:host([inverted]) .accent{color:var(--px-color-icon-accent-inverted)}:host([inverted]) .neutral{color:var(--px-color-icon-neutral-inverted)}:host([inverted]) .dimmed{color:var(--px-color-icon-dimmed-inverted)}:host([inverted]) .purpose-success{color:var(--px-color-icon-purpose-success-inverted)}:host([inverted]) .purpose-warning{color:var(--px-color-icon-purpose-warning-inverted)}:host([inverted]) .purpose-error{color:var(--px-color-icon-purpose-error-inverted)}:host([inverted]) .purpose-unlimited{color:var(--px-color-icon-purpose-unlimited-inverted)}:host([inverted]) .purpose-promo{color:var(--px-color-icon-purpose-promo-inverted)}:host([inverted]) .state-hover:hover{color:var(--px-color-icon-state-hover-inverted)}:host([inverted]) .state-active:active{color:var(--px-color-icon-state-active-inverted)}:host([inverted]) .state-disabled{color:var(--px-color-icon-state-disabled-inverted)}.size-xs{font-size:var(--px-size-icon-xs)}.size-s{font-size:var(--px-size-icon-s)}.size-m{font-size:var(--px-size-icon-m)}.size-l{font-size:var(--px-size-icon-l)}.size-xl{font-size:var(--px-size-icon-xl)}", zt = new CSSStyleSheet();
+zt.replaceSync(oe);
+var m, b, E;
+class ie extends X {
   constructor(...e) {
-    var o;
-    super(...e, mt);
-    c(this, f);
+    var r;
+    super(...e, zt);
+    c(this, m);
     c(this, b);
     c(this, E, () => `<svg aria-hidden="true">
       <use></use>
     </svg>`);
-    this.shadowRoot.innerHTML = n(this, E).call(this), k(this, b, (o = this.attachInternals) == null ? void 0 : o.call(this)), n(this, b) && (n(this, b).role = "img");
+    this.shadowRoot.innerHTML = n(this, E).call(this), k(this, b, (r = this.attachInternals) == null ? void 0 : r.call(this)), n(this, b) && (n(this, b).role = "img");
   }
   static get observedAttributes() {
     return [
@@ -352,17 +353,17 @@ class re extends st {
       "disabled"
     ];
   }
-  attributeChangedCallback(e, o, r) {
-    if (o !== r)
+  attributeChangedCallback(e, r, o) {
+    if (r !== o)
       switch (e) {
         case "name":
-          this.updateName(o, r);
+          this.updateName(r, o);
           break;
         case "size":
-          this.updateAttribute(e, o, r, Ht);
+          this.updateAttribute(e, r, o, _t);
           break;
         case "color":
-          this.updateAttribute(e, o, r, ee);
+          this.updateAttribute(e, r, o, re);
           break;
         case "disabled":
           this.color = "state-disabled";
@@ -370,7 +371,7 @@ class re extends st {
         case "aria-label":
           if (!n(this, b))
             return;
-          r ? (n(this, b).ariaHidden = "false", this.ariaHidden = "false") : (n(this, b).ariaHidden = "true", this.ariaHidden = "true");
+          o ? (n(this, b).ariaHidden = "false", this.ariaHidden = "false") : (n(this, b).ariaHidden = "true", this.ariaHidden = "true");
           break;
       }
   }
@@ -378,27 +379,27 @@ class re extends st {
     this.role = "img";
     const e = document.querySelectorAll("px-icon-set");
     e || console.log("<px-icon-set> component not found");
-    for (const o of e) {
-      if (!o.getAttribute("name") || !o.getAttribute("src")) {
+    for (const r of e) {
+      if (!r.getAttribute("name") || !r.getAttribute("src")) {
         console.error("Icon name or src not found");
         continue;
       }
-      o.getAttribute("name") === this.from && o.getAttribute("type") !== "font" && (k(this, f, o.getAttribute("src")), this.$el.firstElementChild.setAttribute(
+      r.getAttribute("name") === this.from && r.getAttribute("type") !== "font" && (k(this, m, r.getAttribute("src")), this.$el.firstElementChild.setAttribute(
         "href",
-        `${n(this, f)}#icon-${this.name}`
+        `${n(this, m)}#icon-${this.name}`
       ));
     }
     !this.ariaLabel && n(this, b) && (n(this, b).ariaHidden = "true", this.ariaHidden = "true");
   }
-  updateAttribute(e, o, r, i) {
-    o !== null && o !== "" && (e === "size" ? this.$el.classList.toggle(`${e}-${o}`) : this.$el.classList.toggle(o)), r !== null && r !== "" && (e === "size" ? this.$el.classList.toggle(`${e}-${r}`) : this.$el.classList.toggle(r)), this.checkName(i, r) || d(
-      `${r} is not an allowed ${e} value for ${this.tagName.toLowerCase()}`
+  updateAttribute(e, r, o, i) {
+    r !== null && r !== "" && (e === "size" ? this.$el.classList.toggle(`${e}-${r}`) : this.$el.classList.toggle(r)), o !== null && o !== "" && (e === "size" ? this.$el.classList.toggle(`${e}-${o}`) : this.$el.classList.toggle(o)), this.checkName(i, o) || d(
+      `${o} is not an allowed ${e} value for ${this.tagName.toLowerCase()}`
     );
   }
-  updateName(e, o) {
-    n(this, f) && this.$el.firstElementChild.setAttribute(
+  updateName(e, r) {
+    n(this, m) && this.$el.firstElementChild.setAttribute(
       "href",
-      `${n(this, f)}#icon-${o}`
+      `${n(this, m)}#icon-${r}`
     );
   }
   get $el() {
@@ -447,18 +448,18 @@ class re extends st {
     this.setAttribute("disabled", e);
   }
 }
-f = new WeakMap(), b = new WeakMap(), E = new WeakMap();
-customElements.get("px-icon") || customElements.define("px-icon", re);
-const kt = "h1,.style-title-4xl,::slotted(h1),h2,.style-title-3xl,::slotted(h2),h3,.style-title-2xl,::slotted(h3),h4,.style-title-xl,::slotted(h4),h5,.style-title-l,::slotted(h5),h6,.style-title-m,::slotted(h6),.style-title-s,.style-subtitle{margin:0;font-family:var(--px-font-family);color:var(--heading-color-default, var(--px-color-text-brand-default));text-align:var(--heading-text-align--mobile, left);font-size:var(--px-text-size-heading-s-mobile);line-height:var(--px-line-height-ratio-l);font-weight:var(--px-font-weight-title)}::slotted(h1),::slotted(h2),::slotted(h3),::slotted(h4),::slotted(h5),::slotted(h6){margin-bottom:var(--px-spacing-heading-to-content-mobile)}:host([inverted]) h1,:host([inverted]) .style-title-4xl,:host([inverted]) ::slotted(h1),:host([inverted]) h2,:host([inverted]) .style-title-3xl,:host([inverted]) ::slotted(h2),:host([inverted]) h3,:host([inverted]) .style-title-2xl,:host([inverted]) ::slotted(h3),:host([inverted]) h4,:host([inverted]) .style-title-xl,:host([inverted]) ::slotted(h4),:host([inverted]) h5,:host([inverted]) .style-title-l,:host([inverted]) ::slotted(h5),:host([inverted]) h6,:host([inverted]) .style-title-m,:host([inverted]) ::slotted(h6),:host([inverted]) .style-title-s,:host([inverted]) .style-subtitle{color:var(--heading-color-inverted, var(--px-color-text-brand-inverted))}h1,.style-title-4xl,::slotted(h1){font-size:var(--px-text-size-heading-4xl-mobile);line-height:var(--px-line-height-ratio-s);font-weight:var(--px-font-weight-title-large)}h2,.style-title-3xl,::slotted(h2){font-size:var(--px-text-size-heading-3xl-mobile);line-height:var(--px-line-height-ratio-s);font-weight:var(--px-font-weight-title-large)}h3,.style-title-2xl,::slotted(h3){font-size:var(--px-text-size-heading-2xl-mobile);line-height:var(--px-line-height-ratio-s)}h4,.style-title-xl,::slotted(h4){font-size:var(--px-text-size-heading-xl-mobile)}h5,.style-title-l,::slotted(h5){font-size:var(--px-text-size-heading-l-mobile)}h6,.style-title-m,::slotted(h6){font-size:var(--px-text-size-heading-m-mobile)}.style-subtitle{font-size:var(--px-text-size-heading-xl-mobile);font-weight:var(--px-font-weight-subtitle)}.style-title-s{font-size:var(--px-text-size-heading-s-mobile)}@media only screen and (min-width: 48em){::slotted(h1),::slotted(h2),::slotted(h3),::slotted(h4),::slotted(h5),::slotted(h6){margin-bottom:var(--px-spacing-heading-to-content-tablet)}h1,.style-title-4xl,::slotted(h1),h2,.style-title-3xl,::slotted(h2),h3,.style-title-2xl,::slotted(h3),h4,.style-title-xl,::slotted(h4),h5,.style-title-l,::slotted(h5),h6,.style-title-m,::slotted(h6),.style-title-s,.style-subtitle{text-align:var(--heading-text-align--tablet, left)}h1,.style-title-4xl,::slotted(h1){font-size:var(--px-text-size-heading-4xl-tablet)}h2,.style-title-3xl,::slotted(h2){font-size:var(--px-text-size-heading-3xl-tablet)}h3,.style-title-2xl,::slotted(h3){font-size:var(--px-text-size-heading-2xl-tablet)}h4,.style-title-xl,::slotted(h4){font-size:var(--px-text-size-heading-xl-tablet)}h5,.style-title-l,::slotted(h5){font-size:var(--px-text-size-heading-l-tablet)}h6,.style-title-m,::slotted(h6){font-size:var(--px-text-size-heading-m-tablet)}.style-title-s{font-size:var(--px-text-size-heading-s-tablet)}.style-subtitle{font-size:var(--px-text-size-heading-xl-tablet)}}@media only screen and (min-width: 64.0625em){::slotted(h1),::slotted(h2),::slotted(h3),::slotted(h4),::slotted(h5),::slotted(h6){margin-bottom:var(--px-spacing-heading-to-content-laptop)}h1,.style-title-4xl,::slotted(h1),h2,.style-title-3xl,::slotted(h2),h3,.style-title-2xl,::slotted(h3),h4,.style-title-xl,::slotted(h4),h5,.style-title-l,::slotted(h5),h6,.style-title-m,::slotted(h6),.style-title-s,.style-subtitle{text-align:var(--heading-text-align--laptop, left)}h1,.style-title-4xl,::slotted(h1){font-size:var(--px-text-size-heading-4xl-laptop)}h2,.style-title-3xl,::slotted(h2){font-size:var(--px-text-size-heading-3xl-laptop)}h3,.style-title-2xl,::slotted(h3){font-size:var(--px-text-size-heading-2xl-laptop)}h4,.style-title-xl,::slotted(h4){font-size:var(--px-text-size-heading-xl-laptop)}h5,.style-title-l,::slotted(h5){font-size:var(--px-text-size-heading-l-laptop)}h6,.style-title-m,::slotted(h6){font-size:var(--px-text-size-heading-m-laptop)}.style-title-s{font-size:var(--px-text-size-heading-s-laptop)}.style-subtitle{font-size:var(--px-text-size-heading-xl-laptop)}}@media only screen and (min-width: 90.0625em){::slotted(h1),::slotted(h2),::slotted(h3),::slotted(h4),::slotted(h5),::slotted(h6){margin-bottom:var(--px-spacing-heading-to-content-desktop)}h1,.style-title-4xl,::slotted(h1),h2,.style-title-3xl,::slotted(h2),h3,.style-title-2xl,::slotted(h3),h4,.style-title-xl,::slotted(h4),h5,.style-title-l,::slotted(h5),h6,.style-title-m,::slotted(h6),.style-title-s,.style-subtitle{text-align:var(--heading-text-align--desktop, left)}h1,.style-title-4xl,::slotted(h1){font-size:var(--px-text-size-heading-4xl-desktop)}h2,.style-title-3xl,::slotted(h2){font-size:var(--px-text-size-heading-3xl-desktop)}h3,.style-title-2xl,::slotted(h3){font-size:var(--px-text-size-heading-2xl-desktop)}h4,.style-title-xl,::slotted(h4){font-size:var(--px-text-size-heading-xl-desktop)}h5,.style-title-l,::slotted(h5){font-size:var(--px-text-size-heading-l-desktop)}h6,.style-title-m,::slotted(h6){font-size:var(--px-text-size-heading-m-desktop)}.style-title-s{font-size:var(--px-text-size-heading-s-desktop)}.style-subtitle{font-size:var(--px-text-size-heading-xl-desktop)}}", Z = ".color-inherit{color:inherit!important}.color-brand{color:var(--px-color-text-brand-default)!important}.color-neutral{color:var(--px-color-text-neutral-default)!important}.color-dimmed{color:var(--px-color-text-dimmed-default)!important}.color-purpose-success{color:var(--px-color-text-purpose-success-default)!important}.color-purpose-warning{color:var(--px-color-text-purpose-warning-default)!important}.color-purpose-error{color:var(--px-color-text-purpose-error-default)!important}.color-purpose-unlimited{color:var(--px-color-text-purpose-unlimited-default)!important}.color-purpose-promo{color:var(--px-color-text-purpose-promo-default)!important}.color-state-hover{color:var(--px-color-text-state-hover-default)!important}.color-state-active{color:var(--px-color-text-state-active-default)!important}.color-state-disabled{color:var(--px-color-text-state-disabled-default)!important}:host([inverted]) .color-inherit{color:inherit!important}:host([inverted]) .color-brand{color:var(--px-color-text-brand-inverted)!important}:host([inverted]) .color-neutral{color:var(--px-color-text-neutral-inverted)!important}:host([inverted]) .color-dimmed{color:var(--px-color-text-dimmed-inverted)!important}:host([inverted]) .color-purpose-success{color:var(--px-color-text-purpose-success-inverted)!important}:host([inverted]) .color-purpose-warning{color:var(--px-color-text-purpose-warning-inverted)!important}:host([inverted]) .color-purpose-error{color:var(--px-color-text-purpose-error-inverted)!important}:host([inverted]) .color-purpose-unlimited{color:var(--px-color-text-purpose-unlimited-inverted)!important}:host([inverted]) .color-purpose-promo{color:var(--px-color-text-purpose-promo-inverted)!important}:host([inverted]) .color-state-hover{color:var(--px-color-text-state-hover-inverted)!important}:host([inverted]) .color-state-active{color:var(--px-color-text-state-active-inverted)!important}:host([inverted]) .color-state-disabled{color:var(--px-color-text-state-disabled-inverted)!important}.font-size-inherit{font-size:inherit;line-height:inherit}.font-size-body-l{font-size:var(--px-text-size-body-l-mobile)}.font-size-body-m{font-size:var(--px-text-size-body-m-mobile)}.font-size-body-s{font-size:var(--px-text-size-body-s-mobile)}.font-size-body-xs{font-size:var(--px-text-size-body-xs-mobile)}.font-size-heading-5xl{font-size:var(--px-text-size-heading-5xl-mobile)}.font-size-heading-4xl{font-size:var(--px-text-size-heading-4xl-mobile)}.font-size-heading-3xl{font-size:var(--px-text-size-heading-3xl-mobile)}.font-size-heading-2xl{font-size:var(--px-text-size-heading-2xl-mobile)}.font-size-heading-xl{font-size:var(--px-text-size-heading-xl-mobile)}.font-size-heading-l{font-size:var(--px-text-size-heading-l-mobile)}.font-size-heading-m{font-size:var(--px-text-size-heading-m-mobile)}.font-size-heading-s{font-size:var(--px-text-size-heading-s-mobile)}.font-size-heading-3xl,.font-size-heading-4xl,.font-size-heading-5xl{line-height:var(--px-line-height-ratio-s)}.font-size-link-m{font-size:var(--px-text-size-link-m-mobile)}.font-size-link-s{font-size:var(--px-text-size-link-s-mobile)}@media only screen and (min-width: 48em){.font-size-body-l{font-size:var(--px-text-size-body-l-desktop)}.font-size-body-m{font-size:var(--px-text-size-body-m-desktop)}.font-size-body-s{font-size:var(--px-text-size-body-s-desktop)}.font-size-body-xs{font-size:var(--px-text-size-body-xs-desktop)}.font-size-heading-5xl{font-size:var(--px-text-size-heading-5xl-desktop)}.font-size-heading-4xl{font-size:var(--px-text-size-heading-4xl-desktop)}.font-size-heading-3xl{font-size:var(--px-text-size-heading-3xl-desktop)}.font-size-heading-2xl{font-size:var(--px-text-size-heading-2xl-desktop)}.font-size-heading-xl{font-size:var(--px-text-size-heading-xl-desktop)}.font-size-heading-l{font-size:var(--px-text-size-heading-l-desktop)}.font-size-heading-m{font-size:var(--px-text-size-heading-m-desktop)}.font-size-heading-s{font-size:var(--px-text-size-heading-s-desktop)}.font-size-link-m{font-size:var(--px-text-size-link-m-desktop)}.font-size-link-s{font-size:var(--px-text-size-link-s-desktop)}}@media only screen and (min-width: 64.0625em){.font-size-body-l{font-size:var(--px-text-size-body-l-desktop)}.font-size-body-m{font-size:var(--px-text-size-body-m-desktop)}.font-size-body-s{font-size:var(--px-text-size-body-s-desktop)}.font-size-body-xs{font-size:var(--px-text-size-body-xs-desktop)}.font-size-heading-5xl{font-size:var(--px-text-size-heading-5xl-desktop)}.font-size-heading-4xl{font-size:var(--px-text-size-heading-4xl-desktop)}.font-size-heading-3xl{font-size:var(--px-text-size-heading-3xl-desktop)}.font-size-heading-2xl{font-size:var(--px-text-size-heading-2xl-desktop)}.font-size-heading-xl{font-size:var(--px-text-size-heading-xl-desktop)}.font-size-heading-l{font-size:var(--px-text-size-heading-l-desktop)}.font-size-heading-m{font-size:var(--px-text-size-heading-m-desktop)}.font-size-heading-s{font-size:var(--px-text-size-heading-s-desktop)}.font-size-link-m{font-size:var(--px-text-size-link-m-desktop)}.font-size-link-s{font-size:var(--px-text-size-link-s-desktop)}}.font-weight-inherit{font-weight:inherit}.font-weight-body{font-weight:var(--px-font-weight-body)}.font-weight-title{font-weight:var(--px-font-weight-title)}.font-weight-title-large{font-weight:var(--px-font-weight-title-large)}.font-weight-subtitle{font-weight:var(--px-font-weight-subtitle)}", yt = new CSSStyleSheet();
-yt.replaceSync(kt);
-const At = new CSSStyleSheet();
-At.replaceSync(Z);
-class A extends w {
+m = new WeakMap(), b = new WeakMap(), E = new WeakMap();
+customElements.get("px-icon") || customElements.define("px-icon", ie);
+const wt = "h1,.style-title-4xl,::slotted(h1),h2,.style-title-3xl,::slotted(h2),h3,.style-title-2xl,::slotted(h3),h4,.style-title-xl,::slotted(h4),h5,.style-title-l,::slotted(h5),h6,.style-title-m,::slotted(h6),.style-title-s,.style-subtitle{margin:0;font-family:var(--px-font-family);color:var(--heading-color-default, var(--px-color-text-brand-default));text-align:var(--heading-text-align--mobile, left);font-size:var(--px-text-size-heading-s-mobile);line-height:var(--px-line-height-ratio-l);font-weight:var(--px-font-weight-title)}::slotted(h1),::slotted(h2),::slotted(h3),::slotted(h4),::slotted(h5),::slotted(h6){margin-bottom:var(--px-spacing-heading-to-content-mobile)}:host([inverted]) h1,:host([inverted]) .style-title-4xl,:host([inverted]) ::slotted(h1),:host([inverted]) h2,:host([inverted]) .style-title-3xl,:host([inverted]) ::slotted(h2),:host([inverted]) h3,:host([inverted]) .style-title-2xl,:host([inverted]) ::slotted(h3),:host([inverted]) h4,:host([inverted]) .style-title-xl,:host([inverted]) ::slotted(h4),:host([inverted]) h5,:host([inverted]) .style-title-l,:host([inverted]) ::slotted(h5),:host([inverted]) h6,:host([inverted]) .style-title-m,:host([inverted]) ::slotted(h6),:host([inverted]) .style-title-s,:host([inverted]) .style-subtitle{color:var(--heading-color-inverted, var(--px-color-text-brand-inverted))}h1,.style-title-4xl,::slotted(h1){font-size:var(--px-text-size-heading-4xl-mobile);line-height:var(--px-line-height-ratio-s);font-weight:var(--px-font-weight-title-large)}h2,.style-title-3xl,::slotted(h2){font-size:var(--px-text-size-heading-3xl-mobile);line-height:var(--px-line-height-ratio-s);font-weight:var(--px-font-weight-title-large)}h3,.style-title-2xl,::slotted(h3){font-size:var(--px-text-size-heading-2xl-mobile);line-height:var(--px-line-height-ratio-s)}h4,.style-title-xl,::slotted(h4){font-size:var(--px-text-size-heading-xl-mobile)}h5,.style-title-l,::slotted(h5){font-size:var(--px-text-size-heading-l-mobile)}h6,.style-title-m,::slotted(h6){font-size:var(--px-text-size-heading-m-mobile)}.style-subtitle{font-size:var(--px-text-size-heading-xl-mobile);font-weight:var(--px-font-weight-subtitle)}.style-title-s{font-size:var(--px-text-size-heading-s-mobile)}@media screen and (min-width: 48rem){::slotted(h1),::slotted(h2),::slotted(h3),::slotted(h4),::slotted(h5),::slotted(h6){margin-bottom:var(--px-spacing-heading-to-content-tablet)}h1,.style-title-4xl,::slotted(h1),h2,.style-title-3xl,::slotted(h2),h3,.style-title-2xl,::slotted(h3),h4,.style-title-xl,::slotted(h4),h5,.style-title-l,::slotted(h5),h6,.style-title-m,::slotted(h6),.style-title-s,.style-subtitle{text-align:var(--heading-text-align--tablet, left)}h1,.style-title-4xl,::slotted(h1){font-size:var(--px-text-size-heading-4xl-tablet)}h2,.style-title-3xl,::slotted(h2){font-size:var(--px-text-size-heading-3xl-tablet)}h3,.style-title-2xl,::slotted(h3){font-size:var(--px-text-size-heading-2xl-tablet)}h4,.style-title-xl,::slotted(h4){font-size:var(--px-text-size-heading-xl-tablet)}h5,.style-title-l,::slotted(h5){font-size:var(--px-text-size-heading-l-tablet)}h6,.style-title-m,::slotted(h6){font-size:var(--px-text-size-heading-m-tablet)}.style-title-s{font-size:var(--px-text-size-heading-s-tablet)}.style-subtitle{font-size:var(--px-text-size-heading-xl-tablet)}}@media screen and (min-width: 64.0625rem){::slotted(h1),::slotted(h2),::slotted(h3),::slotted(h4),::slotted(h5),::slotted(h6){margin-bottom:var(--px-spacing-heading-to-content-laptop)}h1,.style-title-4xl,::slotted(h1),h2,.style-title-3xl,::slotted(h2),h3,.style-title-2xl,::slotted(h3),h4,.style-title-xl,::slotted(h4),h5,.style-title-l,::slotted(h5),h6,.style-title-m,::slotted(h6),.style-title-s,.style-subtitle{text-align:var(--heading-text-align--laptop, left)}h1,.style-title-4xl,::slotted(h1){font-size:var(--px-text-size-heading-4xl-laptop)}h2,.style-title-3xl,::slotted(h2){font-size:var(--px-text-size-heading-3xl-laptop)}h3,.style-title-2xl,::slotted(h3){font-size:var(--px-text-size-heading-2xl-laptop)}h4,.style-title-xl,::slotted(h4){font-size:var(--px-text-size-heading-xl-laptop)}h5,.style-title-l,::slotted(h5){font-size:var(--px-text-size-heading-l-laptop)}h6,.style-title-m,::slotted(h6){font-size:var(--px-text-size-heading-m-laptop)}.style-title-s{font-size:var(--px-text-size-heading-s-laptop)}.style-subtitle{font-size:var(--px-text-size-heading-xl-laptop)}}@media screen and (min-width: 90.0625rem){::slotted(h1),::slotted(h2),::slotted(h3),::slotted(h4),::slotted(h5),::slotted(h6){margin-bottom:var(--px-spacing-heading-to-content-desktop)}h1,.style-title-4xl,::slotted(h1),h2,.style-title-3xl,::slotted(h2),h3,.style-title-2xl,::slotted(h3),h4,.style-title-xl,::slotted(h4),h5,.style-title-l,::slotted(h5),h6,.style-title-m,::slotted(h6),.style-title-s,.style-subtitle{text-align:var(--heading-text-align--desktop, left)}h1,.style-title-4xl,::slotted(h1){font-size:var(--px-text-size-heading-4xl-desktop)}h2,.style-title-3xl,::slotted(h2){font-size:var(--px-text-size-heading-3xl-desktop)}h3,.style-title-2xl,::slotted(h3){font-size:var(--px-text-size-heading-2xl-desktop)}h4,.style-title-xl,::slotted(h4){font-size:var(--px-text-size-heading-xl-desktop)}h5,.style-title-l,::slotted(h5){font-size:var(--px-text-size-heading-l-desktop)}h6,.style-title-m,::slotted(h6){font-size:var(--px-text-size-heading-m-desktop)}.style-title-s{font-size:var(--px-text-size-heading-s-desktop)}.style-subtitle{font-size:var(--px-text-size-heading-xl-desktop)}}", K = ".color-inherit{color:inherit!important}.color-brand{color:var(--px-color-text-brand-default)!important}.color-neutral{color:var(--px-color-text-neutral-default)!important}.color-dimmed{color:var(--px-color-text-dimmed-default)!important}.color-purpose-success{color:var(--px-color-text-purpose-success-default)!important}.color-purpose-warning{color:var(--px-color-text-purpose-warning-default)!important}.color-purpose-error{color:var(--px-color-text-purpose-error-default)!important}.color-purpose-unlimited{color:var(--px-color-text-purpose-unlimited-default)!important}.color-purpose-promo{color:var(--px-color-text-purpose-promo-default)!important}.color-state-hover{color:var(--px-color-text-state-hover-default)!important}.color-state-active{color:var(--px-color-text-state-active-default)!important}.color-state-disabled{color:var(--px-color-text-state-disabled-default)!important}:host([inverted]) .color-inherit{color:inherit!important}:host([inverted]) .color-brand{color:var(--px-color-text-brand-inverted)!important}:host([inverted]) .color-neutral{color:var(--px-color-text-neutral-inverted)!important}:host([inverted]) .color-dimmed{color:var(--px-color-text-dimmed-inverted)!important}:host([inverted]) .color-purpose-success{color:var(--px-color-text-purpose-success-inverted)!important}:host([inverted]) .color-purpose-warning{color:var(--px-color-text-purpose-warning-inverted)!important}:host([inverted]) .color-purpose-error{color:var(--px-color-text-purpose-error-inverted)!important}:host([inverted]) .color-purpose-unlimited{color:var(--px-color-text-purpose-unlimited-inverted)!important}:host([inverted]) .color-purpose-promo{color:var(--px-color-text-purpose-promo-inverted)!important}:host([inverted]) .color-state-hover{color:var(--px-color-text-state-hover-inverted)!important}:host([inverted]) .color-state-active{color:var(--px-color-text-state-active-inverted)!important}:host([inverted]) .color-state-disabled{color:var(--px-color-text-state-disabled-inverted)!important}.font-size-inherit{font-size:inherit;line-height:inherit}.font-size-body-l{font-size:var(--px-text-size-body-l-mobile)}.font-size-body-m{font-size:var(--px-text-size-body-m-mobile)}.font-size-body-s{font-size:var(--px-text-size-body-s-mobile)}.font-size-body-xs{font-size:var(--px-text-size-body-xs-mobile)}.font-size-heading-5xl{font-size:var(--px-text-size-heading-5xl-mobile)}.font-size-heading-4xl{font-size:var(--px-text-size-heading-4xl-mobile)}.font-size-heading-3xl{font-size:var(--px-text-size-heading-3xl-mobile)}.font-size-heading-2xl{font-size:var(--px-text-size-heading-2xl-mobile)}.font-size-heading-xl{font-size:var(--px-text-size-heading-xl-mobile)}.font-size-heading-l{font-size:var(--px-text-size-heading-l-mobile)}.font-size-heading-m{font-size:var(--px-text-size-heading-m-mobile)}.font-size-heading-s{font-size:var(--px-text-size-heading-s-mobile)}.font-size-heading-3xl,.font-size-heading-4xl,.font-size-heading-5xl{line-height:var(--px-line-height-ratio-s)}.font-size-link-m{font-size:var(--px-text-size-link-m-mobile)}.font-size-link-s{font-size:var(--px-text-size-link-s-mobile)}@media screen and (min-width: 48rem){.font-size-body-l{font-size:var(--px-text-size-body-l-desktop)}.font-size-body-m{font-size:var(--px-text-size-body-m-desktop)}.font-size-body-s{font-size:var(--px-text-size-body-s-desktop)}.font-size-body-xs{font-size:var(--px-text-size-body-xs-desktop)}.font-size-heading-5xl{font-size:var(--px-text-size-heading-5xl-desktop)}.font-size-heading-4xl{font-size:var(--px-text-size-heading-4xl-desktop)}.font-size-heading-3xl{font-size:var(--px-text-size-heading-3xl-desktop)}.font-size-heading-2xl{font-size:var(--px-text-size-heading-2xl-desktop)}.font-size-heading-xl{font-size:var(--px-text-size-heading-xl-desktop)}.font-size-heading-l{font-size:var(--px-text-size-heading-l-desktop)}.font-size-heading-m{font-size:var(--px-text-size-heading-m-desktop)}.font-size-heading-s{font-size:var(--px-text-size-heading-s-desktop)}.font-size-link-m{font-size:var(--px-text-size-link-m-desktop)}.font-size-link-s{font-size:var(--px-text-size-link-s-desktop)}}@media screen and (min-width: 64.0625rem){.font-size-body-l{font-size:var(--px-text-size-body-l-desktop)}.font-size-body-m{font-size:var(--px-text-size-body-m-desktop)}.font-size-body-s{font-size:var(--px-text-size-body-s-desktop)}.font-size-body-xs{font-size:var(--px-text-size-body-xs-desktop)}.font-size-heading-5xl{font-size:var(--px-text-size-heading-5xl-desktop)}.font-size-heading-4xl{font-size:var(--px-text-size-heading-4xl-desktop)}.font-size-heading-3xl{font-size:var(--px-text-size-heading-3xl-desktop)}.font-size-heading-2xl{font-size:var(--px-text-size-heading-2xl-desktop)}.font-size-heading-xl{font-size:var(--px-text-size-heading-xl-desktop)}.font-size-heading-l{font-size:var(--px-text-size-heading-l-desktop)}.font-size-heading-m{font-size:var(--px-text-size-heading-m-desktop)}.font-size-heading-s{font-size:var(--px-text-size-heading-s-desktop)}.font-size-link-m{font-size:var(--px-text-size-link-m-desktop)}.font-size-link-s{font-size:var(--px-text-size-link-s-desktop)}}.font-weight-inherit{font-weight:inherit}.font-weight-body{font-weight:var(--px-font-weight-body)}.font-weight-title{font-weight:var(--px-font-weight-title)}.font-weight-title-large{font-weight:var(--px-font-weight-title-large)}.font-weight-subtitle{font-weight:var(--px-font-weight-subtitle)}", $t = new CSSStyleSheet();
+$t.replaceSync(wt);
+const St = new CSSStyleSheet();
+St.replaceSync(K);
+class A extends $ {
   template() {
     return "<slot></slot>";
   }
   constructor(t) {
-    super(yt, At);
+    super($t, St);
     const e = document.createElement(t);
     e.innerHTML = this.template(), this.shadowRoot.appendChild(e);
   }
@@ -476,43 +477,43 @@ class A extends w {
       "auto-spacing"
     ];
   }
-  attributeChangedCallback(t, e, o) {
-    if (e !== o)
+  attributeChangedCallback(t, e, r) {
+    if (e !== r)
       switch (t) {
         case "variant":
-          this.updateAttribute(t, e, o, dt);
+          this.updateAttribute(t, e, r, ht);
           break;
         case "color":
-          this.updateColor(e, o, Y);
+          this.updateColor(e, r, Z);
           break;
         case "text-align":
         case "text-align--mobile":
         case "text-align--tablet":
         case "text-align--laptop":
         case "text-align--desktop":
-          this.updateTextAlign(t, e, o, nt);
+          this.updateTextAlign(t, e, r, ct);
           break;
         default:
-          super.attributeChangedCallback(t, e, o);
+          super.attributeChangedCallback(t, e, r);
           break;
       }
   }
   toggleClass(t, e) {
     t !== null && t !== "" && t !== "default" && this.$el.classList.toggle(`style-${t}`), e !== null && e !== "" && e !== "default" && this.$el.classList.toggle(`style-${e}`);
   }
-  updateAttribute(t, e, o, r) {
-    this.checkName(r, o) ? this.toggleClass(e, o) : d(
-      `${o} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
+  updateAttribute(t, e, r, o) {
+    this.checkName(o, r) ? this.toggleClass(e, r) : d(
+      `"${r}" is not a valid ${t} value for ${this.tagName.toLowerCase()}. Allowed values are: "${o.join('", "')}".`
     );
   }
-  updateColor(t, e, o) {
-    if (!this.checkName(o, e)) {
+  updateColor(t, e, r) {
+    if (!this.checkName(r, e)) {
       d(
-        `${e} is not an allowed color value for ${this.tagName.toLowerCase()}`
+        `"${e}" is not a valid color value for ${this.tagName.toLowerCase()}. Allowed values are: "${r.join('", "')}".`
       );
       return;
     }
-    const r = (i) => {
+    const o = (i) => {
       i !== null && i !== "" && i !== "default" && (this.$el.style.setProperty(
         "--heading-color-default",
         `var(--px-color-text-${i}-default)`
@@ -521,12 +522,12 @@ class A extends w {
         `var(--px-color-text-${i}-inverted)`
       ));
     };
-    r(t), r(e);
+    o(t), o(e);
   }
-  updateTextAlign(t, e, o, r) {
-    if (!this.checkName(r, o)) {
+  updateTextAlign(t, e, r, o) {
+    if (!this.checkName(o, r)) {
       d(
-        `${o} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
+        `"${r}" is not a valid ${t} value for ${this.tagName.toLowerCase()}. Allowed values are: "${o.join('", "')}".`
       );
       return;
     }
@@ -538,11 +539,11 @@ class A extends w {
     };
     if (t === "text-align")
       ["mobile", "tablet", "laptop", "desktop"].forEach((a) => {
-        i(a, e), i(a, o);
+        i(a, e), i(a, r);
       });
     else {
       const a = t.split("--")[1];
-      i(a, e), i(a, o);
+      i(a, e), i(a, r);
     }
   }
   get variant() {
@@ -600,62 +601,62 @@ class A extends w {
     t ? this.setAttribute("auto-spacing", "") : this.removeAttribute("auto-spacing");
   }
 }
-const X = class X extends A {
+const J = class J extends A {
   constructor() {
     super("h1");
   }
 };
-X.nativeName = "h1";
-let q = X;
-customElements.get("px-h1") || customElements.define("px-h1", q);
-const U = class U extends A {
+J.nativeName = "h1";
+let H = J;
+customElements.get("px-h1") || customElements.define("px-h1", H);
+const Q = class Q extends A {
   constructor() {
     super("h2");
   }
 };
-U.nativeName = "h2";
-let D = U;
-customElements.get("px-h2") || customElements.define("px-h2", D);
-const J = class J extends A {
+Q.nativeName = "h2";
+let O = Q;
+customElements.get("px-h2") || customElements.define("px-h2", O);
+const V = class V extends A {
   constructor() {
     super("h3");
   }
 };
-J.nativeName = "h3";
-let H = J;
-customElements.get("px-h3") || customElements.define("px-h3", H);
-const Q = class Q extends A {
+V.nativeName = "h3";
+let q = V;
+customElements.get("px-h3") || customElements.define("px-h3", q);
+const tt = class tt extends A {
   constructor() {
     super("h4");
   }
 };
-Q.nativeName = "h4";
-let j = Q;
-customElements.get("px-h4") || customElements.define("px-h4", j);
-const V = class V extends A {
+tt.nativeName = "h4";
+let D = tt;
+customElements.get("px-h4") || customElements.define("px-h4", D);
+const et = class et extends A {
   constructor() {
     super("h5");
   }
 };
-V.nativeName = "h5";
-let O = V;
-customElements.get("px-h5") || customElements.define("px-h5", O);
-const tt = class tt extends A {
+et.nativeName = "h5";
+let N = et;
+customElements.get("px-h5") || customElements.define("px-h5", N);
+const rt = class rt extends A {
   constructor() {
     super("h6");
   }
 };
-tt.nativeName = "h6";
-let _ = tt;
+rt.nativeName = "h6";
+let _ = rt;
 customElements.get("px-h6") || customElements.define("px-h6", _);
-const ie = ".separator{--separator-size: var(--px-size-border-m);--separator-direction--mobile-border-width: var(--separator-size) 0 0;--separator-direction--mobile-width: initial;--separator-direction--mobile-height: initial;clear:both;margin:0;border-style:solid;border-color:var( --separator-color-default, var(--px-color-border-main-default) );border-width:var(--separator-size) 0 0;width:initial;height:initial}.separator-direction-horizontal--mobile{border-width:var(--separator-size) 0 0;width:initial;height:initial}.separator-direction-vertical--mobile{width:var(--separator-size);height:100%;border-width:0 var(--separator-size) 0 0}:host([inverted]) .separator{border-color:var( --separator-color-inverted, var(--px-color-border-main-inverted) )}@media only screen and (min-width: 768px){.separator-direction-horizontal--tablet{border-width:var(--separator-size) 0 0;width:initial;height:initial}.separator-direction-vertical--tablet{width:var(--separator-size);height:100%;border-width:0 var(--separator-size) 0 0}}@media only screen and (min-width: 1025px){.separator-direction-horizontal--laptop{border-width:var(--separator-size) 0 0;width:initial;height:initial}.separator-direction-vertical--laptop{width:var(--separator-size);height:100%;border-width:0 var(--separator-size) 0 0}}@media only screen and (min-width: 1441px){.separator-direction-horizontal--desktop{border-width:var(--separator-size) 0 0;width:initial;height:initial}.separator-direction-vertical--desktop{width:var(--separator-size);height:100%;border-width:0 var(--separator-size) 0 0}}", zt = new CSSStyleSheet();
-zt.replaceSync(ie);
-const ae = [
+const ae = ".separator{--separator-size: var(--px-size-border-m);--separator-direction--mobile-border-width: var(--separator-size) 0 0;--separator-direction--mobile-width: initial;--separator-direction--mobile-height: initial;clear:both;margin:0;border-style:solid;border-color:var( --separator-color-default, var(--px-color-border-main-default) );border-width:var(--separator-size) 0 0;width:initial;height:initial}.separator-direction-horizontal--mobile{border-width:var(--separator-size) 0 0;width:initial;height:initial}.separator-direction-vertical--mobile{width:var(--separator-size);height:100%;border-width:0 var(--separator-size) 0 0}:host([inverted]) .separator{border-color:var( --separator-color-inverted, var(--px-color-border-main-inverted) )}@media screen and (min-width: 48rem){.separator-direction-horizontal--tablet{border-width:var(--separator-size) 0 0;width:initial;height:initial}.separator-direction-vertical--tablet{width:var(--separator-size);height:100%;border-width:0 var(--separator-size) 0 0}}@media screen and (min-width: 64.0625rem){.separator-direction-horizontal--laptop{border-width:var(--separator-size) 0 0;width:initial;height:initial}.separator-direction-vertical--laptop{width:var(--separator-size);height:100%;border-width:0 var(--separator-size) 0 0}}@media screen and (min-width: 90.0625rem){.separator-direction-horizontal--desktop{border-width:var(--separator-size) 0 0;width:initial;height:initial}.separator-direction-vertical--desktop{width:var(--separator-size);height:100%;border-width:0 var(--separator-size) 0 0}}", Ct = new CSSStyleSheet();
+Ct.replaceSync(ae);
+const se = [
   "",
   "default",
   "horizontal",
   "vertical"
-], se = ["", "default", "none", "s", "m", "l"], ne = [
+], ne = ["", "default", "none", "s", "m", "l"], de = [
   "",
   "main",
   "brand",
@@ -667,10 +668,10 @@ const ae = [
   "purpose-unlimited",
   "state-hover",
   "state-active"
-], B = class B extends w {
+], B = class B extends $ {
   constructor() {
     var e;
-    super(zt);
+    super(Ct);
     const t = document.createElement(B.nativeName);
     t.classList.add("separator"), this.internals = (e = this.attachInternals) == null ? void 0 : e.call(this), this.shadowRoot.appendChild(t);
   }
@@ -687,8 +688,8 @@ const ae = [
       "inverted"
     ];
   }
-  attributeChangedCallback(t, e, o) {
-    if (e !== o)
+  attributeChangedCallback(t, e, r) {
+    if (e !== r)
       switch (t) {
         case "direction":
         case "direction--mobile":
@@ -698,33 +699,33 @@ const ae = [
           this.updateDirection(
             t,
             e,
-            o,
-            ae
+            r,
+            se
           );
           break;
         case "size":
-          this.updateSize(t, e, o, se);
+          this.updateSize(t, e, r, ne);
           break;
         case "color":
-          this.updateColor(t, e, o, ne);
+          this.updateColor(t, e, r, de);
           break;
         default:
-          super.attributeChangedCallback(t, e, o);
+          super.attributeChangedCallback(t, e, r);
           break;
       }
   }
-  updateSize(t, e, o, r) {
+  updateSize(t, e, r, o) {
     const i = (a) => {
       a !== null && a !== "" && a !== "default" && this.$el.style.setProperty(
         "--separator-size",
         `var(--px-size-border-${a})`
       );
     };
-    this.checkName(r, o) ? (i(e), i(o)) : d(
-      `${o} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
+    this.checkName(o, r) ? (i(e), i(r)) : d(
+      `"${r}" is not a valid ${t} value for ${this.tagName.toLowerCase()}. Allowed values are: "${o.join('", "')}".`
     );
   }
-  updateColor(t, e, o, r) {
+  updateColor(t, e, r, o) {
     const i = (a) => {
       a !== null && a !== "" && a !== "default" && (this.$el.style.setProperty(
         "--separator-color-default",
@@ -734,23 +735,23 @@ const ae = [
         `var(--px-color-border-${a}-inverted)`
       ));
     };
-    this.checkName(r, o) ? (i(e), i(o)) : d(
-      `${o} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
+    this.checkName(o, r) ? (i(e), i(r)) : d(
+      `"${r}" is not a valid ${t} value for ${this.tagName.toLowerCase()}. Allowed values are: "${o.join('", "')}".`
     );
   }
-  updateDirection(t, e, o, r) {
+  updateDirection(t, e, r, o) {
     const i = (a, l) => {
       l !== null && l !== "" && l !== "default" && this.$el.classList.add(`separator-direction-${l}--${a}`);
     };
-    if (!this.checkName(r, o))
+    if (!this.checkName(o, r))
       d(
-        `${o} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
+        `"${r}" is not a valid ${t} value for ${this.tagName.toLowerCase()}. Allowed values are: "${o.join('", "')}".`
       );
     else if (t === "direction")
       ["mobile", "tablet", "laptop", "desktop"].forEach((a) => {
         Array.from(this.$el.classList).find(
           (z) => z.startsWith("separator-direction-") && z.endsWith(`--${a}`)
-        ) || i(a, o);
+        ) || i(a, r);
       });
     else {
       const a = t.split("--")[1], l = Array.from(this.$el.classList).find(
@@ -758,8 +759,8 @@ const ae = [
       );
       l ? this.$el.classList.replace(
         l,
-        `separator-direction-${o}--${a}`
-      ) : i(a, o);
+        `separator-direction-${r}--${a}`
+      ) : i(a, r);
     }
   }
   get direction() {
@@ -814,15 +815,15 @@ const ae = [
 B.nativeName = "hr";
 let W = B;
 customElements.get("px-separator") || customElements.define("px-separator", W);
-const de = ':host{display:block}:host,:host *{box-sizing:border-box}.content-wrapper{margin-inline:var(--px-padding-s-mobile);max-width:var(--px-content-wrapper-max-width-desktop)}@media only screen and (min-width: 77em){.content-wrapper{margin-inline:auto}}.overlapped{margin-bottom:calc(var(--px-overlapped-mobile) * -1)}::slotted([slot="overlap"]){margin-top:var(--px-overlapped-mobile)}@media only screen and (min-width: 48em){.overlapped{margin-bottom:calc(var(--px-overlapped-desktop) * -1)}::slotted([slot="overlap"]){margin-top:var(--px-overlapped-desktop)}}@media only screen and (min-width: 64.0625em){.overlapped{margin-bottom:calc(var(--px-overlapped-desktop) * -1)}::slotted([slot="overlap"]){margin-top:var(--px-overlapped-desktop)}}', le = ':host{display:block}.container{font-family:var(--px-font-family);background-color:var(--background-color);border-radius:var(--px-radius-main);box-sizing:border-box;height:100%}:host([background-image]) .container{background-image:var(--background-image)}:host([background-gradient]) .container{background-image:var(--background-gradient)}:host([inverted]) .container{background-color:var(--background-color-inverted);color:var(--px-color-text-neutral-inverted)}.border-none{border:none}.border-s{border:var(--px-size-border-s) solid var(--border-color)}.border-m{border:var(--px-size-border-m) solid var(--border-color)}.border-l{border:var(--px-size-border-l) solid var(--border-color)}.border-side-top{border-bottom-style:none;border-right-style:none;border-left-style:none}.border-side-right{border-top-style:none;border-bottom-style:none;border-left-style:none}.border-side-bottom{border-top-style:none;border-right-style:none;border-left-style:none}.border-side-left{border-top-style:none;border-right-style:none;border-bottom-style:none}.border-side-block{border-inline-style:none}.border-side-inline{border-block-style:none}:host([inverted]) .border-s,:host([inverted]) .border-m,:host([inverted]) .border-l{border-color:var(--border-color-inverted)}.border-radius-main{border-radius:var(--px-radius-main)}.border-radius-pill{border-radius:var(--px-radius-pill)}.no-border-radius-top{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all,.border-radius-none{border-radius:var(--px-radius-none)}.bgimg{background-repeat:no-repeat}.background-size-cover{background-size:cover;background-position:center center}.background-size-contain{background-size:contain}.box-shadow-none{box-shadow:none}.box-shadow-s{box-shadow:0 1px 2px #2525251f}.box-shadow-m{box-shadow:0 4px 6px -1px #25252514}.box-shadow-l{box-shadow:0 10px 15px -3px #25252514}.box-shadow-xl{box-shadow:0 20px 25px -5px #25252514}.anchored{position:relative}::slotted([slot="anchor-right"]),::slotted([slot="anchor-left"]),::slotted([slot="anchor-full"]){position:absolute;top:0}::slotted([slot="anchor-right"]),::slotted([slot="anchor-left"]){transform:translateY(-50%);z-index:3}::slotted([slot="anchor-right"]){right:var( --container-anchor-offset--mobile, var( --container-padding-right, var(--container-padding-inline, var(--container-padding)) ) )}::slotted([slot="anchor-left"]){left:var( --container-anchor-offset--mobile, var( --container-padding-left, var(--container-padding-inline, var(--container-padding)) ) )}::slotted([slot="anchor-full"]){transform:translateY(-100%);right:0;left:0;text-align:center;z-index:2}::slotted(px-vstack:only-of-type),::slotted(px-hstack:only-of-type),::slotted(px-stack:only-of-type),::slotted(px-grid:only-of-type){height:100%}:host([anchor-spacing]){margin-top:var(--container-anchor-spacing--mobile)}.border-s ::slotted([slot="anchor-full"]){right:calc(var(--px-size-border-s) * -1);left:calc(var(--px-size-border-s) * -1)}.border-m ::slotted([slot="anchor-full"]){right:calc(var(--px-size-border-m) * -1);left:calc(var(--px-size-border-m) * -1)}.border-l ::slotted([slot="anchor-full"]){right:calc(var(--px-size-border-l) * -1);left:calc(var(--px-size-border-l) * -1)}:host([subgrid-rows]){display:contents}:host([subgrid-rows]) .container{display:grid;grid-template-rows:subgrid;grid-row:span var(--subgrid-rows)}:host([subgrid-rows]):host([grow]) .container{flex-grow:var(--grow-value)}:host([subgrid-rows]):host([shrink]) .container{flex-shrink:var(--shrink-value)}:host([subgrid-rows]):host([basis]) .container{flex-basis:var(--basis-value)}:host([subgrid-rows]):host([align-self]) .container{align-self:var(--align-self-value)}:host([subgrid-rows]):host([col-span]) .container{grid-column:span var(--col-span-value) / span var(--col-span-value)}:host([subgrid-rows]):host([justify-self]) .container{justify-self:var(--justify-self-value)}:host([subgrid-rows]):host([order]) .container{order:var(--order-value)}:host([subgrid-rows]):host([anchor-spacing]) .container{margin-top:var(--container-anchor-spacing--mobile)}@media only screen and (max-width: 47.938em){.container{background-color:var(--background-color--mobile, var(--background-color))}:host([background-image--mobile]) .container{background-image:var(--background-image--mobile, var(--background-image))}:host([background-gradient--mobile]) .container{background-image:var( --background-gradient--mobile, var(--background-gradient) )}:host([inverted]) .container{background-color:var( --background-color-inverted--mobile, var(--background-color-inverted) )}.border-side-top--mobile{border-top-style:solid;border-right-style:none;border-bottom-style:none;border-left-style:none}.border-side-right--mobile{border-top-style:none;border-right-style:solid;border-bottom-style:none;border-left-style:none}.border-side-bottom--mobile{border-top-style:none;border-right-style:none;border-bottom-style:solid;border-left-style:none}.border-side-left--mobile{border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:solid}.border-side-block--mobile{border-inline-style:none;border-block-style:solid}.border-side-inline--mobile{border-block-style:none;border-inline-style:solid}.no-border-radius-top--mobile{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--mobile{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--mobile{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--mobile{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--mobile{border-radius:var(--px-radius-none)}:host([subgrid-rows]):host([grow--mobile]) .container{flex-grow:var(--grow--mobile-value)}:host([subgrid-rows]):host([shrink--mobile]) .container{flex-shrink:var(--shrink--mobile-value)}:host([subgrid-rows]):host([basis--mobile]) .container{flex-basis:var(--basis--mobile-value)}:host([subgrid-rows]):host([align-self--mobile]) .container{align-self:var(--align-self--mobile-value)}:host([subgrid-rows]):host([col-span--mobile]) .container{grid-column:span var(--col-span--mobile-value) / span var(--col-span--mobile-value)}:host([subgrid-rows]):host([justify-self--mobile]) .container{justify-self:var(--justify-self--mobile-value)}:host([subgrid-rows]):host([order--mobile]) .container{order:var(--order--mobile-value)}}@media only screen and (min-width: 48em) and (max-width: 64em){.container{background-color:var(--background-color--tablet, var(--background-color))}:host([background-image--tablet]) .container{background-image:var(--background-image--tablet, var(--background-image))}:host([background-gradient--tablet]) .container{background-image:var( --background-gradient--tablet, var(--background-gradient) )}:host([inverted]) .container{background-color:var( --background-color-inverted--tablet, var(--background-color-inverted) )}.no-border-radius-top--tablet{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--tablet{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--tablet{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--tablet{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--tablet{border-radius:var(--px-radius-none)}.border-side-top--tablet{border-top-style:solid;border-right-style:none;border-bottom-style:none;border-left-style:none}.border-side-right--tablet{border-top-style:none;border-right-style:solid;border-bottom-style:none;border-left-style:none}.border-side-bottom--tablet{border-top-style:none;border-right-style:none;border-bottom-style:solid;border-left-style:none}.border-side-left--tablet{border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:solid}.border-side-block--tablet{border-inline-style:none;border-block-style:solid}.border-side-inline--tablet{border-block-style:none;border-inline-style:solid}::slotted([slot="anchor-right"]){right:var( --container-anchor-offset--tablet, var( --container-padding-right, var(--container-padding-inline, var(--container-padding)) ) )}::slotted([slot="anchor-left"]){left:var( --container-anchor-offset--tablet, var( --container-padding-left, var(--container-padding-inline, var(--container-padding)) ) )}:host([anchor-spacing]){margin-top:var(--container-anchor-spacing--tablet)}:host([subgrid-rows]):host([col-span--tablet]) .container{grid-column:span var(--col-span--tablet-value) / span var(--col-span--tablet-value)}:host([subgrid-rows]):host([grow--tablet]) .container{flex-grow:var(--grow--tablet-value)}:host([subgrid-rows]):host([shrink--tablet]) .container{flex-shrink:var(--shrink--tablet-value)}:host([subgrid-rows]):host([basis--tablet]) .container{flex-basis:var(--basis--tablet-value)}:host([subgrid-rows]):host([align-self--tablet]) .container{align-self:var(--align-self--tablet-value)}:host([subgrid-rows]):host([justify-self--tablet]) .container{justify-self:var(--justify-self--tablet-value)}:host([subgrid-rows]):host([order--tablet]) .container{order:var(--order--tablet-value)}:host([subgrid-rows]):host([anchor-spacing]) .container{margin-top:var(--container-anchor-spacing--tablet)}}@media only screen and (min-width: 64.0625em) and (max-width: 90em){:host([anchor-spacing]){margin-top:var(--container-anchor-spacing--laptop)}:host([subgrid-rows]):host([col-span--laptop]) .container{grid-column:span var(--col-span--laptop-value) / span var(--col-span--laptop-value)}:host([subgrid-rows]):host([grow--laptop]) .container{flex-grow:var(--grow--laptop-value)}:host([subgrid-rows]):host([shrink--laptop]) .container{flex-shrink:var(--shrink--laptop-value)}:host([subgrid-rows]):host([basis--laptop]) .container{flex-basis:var(--basis--laptop-value)}:host([subgrid-rows]):host([align-self--laptop]) .container{align-self:var(--align-self--laptop-value)}:host([subgrid-rows]):host([justify-self--laptop]) .container{justify-self:var(--justify-self--laptop-value)}:host([subgrid-rows]):host([order--laptop]) .container{order:var(--order--laptop-value)}:host([subgrid-rows]):host([anchor-spacing]) .container{margin-top:var(--container-anchor-spacing--laptop)}}@media only screen and (min-width: 64.0625em){.container{background-color:var(--background-color--laptop, var(--background-color))}:host([background-image--laptop]) .container{background-image:var(--background-image--laptop, var(--background-image))}:host([background-gradient--laptop]) .container{background-image:var( --background-gradient--laptop, var(--background-gradient) )}:host([inverted]) .container{background-color:var( --background-color-inverted--laptop, var(--background-color-inverted) )}.no-border-radius-top--laptop{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--laptop{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--laptop{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--laptop{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--laptop{border-radius:var(--px-radius-none)}::slotted([slot="anchor-right"]){right:var( --container-anchor-offset--laptop, var( --container-padding-right, var(--container-padding-inline, var(--container-padding)) ) )}::slotted([slot="anchor-left"]){left:var( --container-anchor-offset--laptop, var( --container-padding-left, var(--container-padding-inline, var(--container-padding)) ) )}:host([anchor-spacing]){margin-top:var(--container-anchor-spacing--laptop)}.border-side-top--laptop{border-top-style:solid;border-right-style:none;border-bottom-style:none;border-left-style:none}.border-side-right--laptop{border-top-style:none;border-right-style:solid;border-bottom-style:none;border-left-style:none}.border-side-bottom--laptop{border-top-style:none;border-right-style:none;border-bottom-style:solid;border-left-style:none}.border-side-left--laptop{border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:solid}.border-side-block--laptop{border-inline-style:none;border-block-style:solid}.border-side-inline--laptop{border-block-style:none;border-inline-style:solid}}@media screen and (min-width: 90.0625em){:host([anchor-spacing]){margin-top:var(--container-anchor-spacing--desktop)}:host([subgrid-rows]):host([col-span--desktop]) .container{grid-column:span var(--col-span--desktop-value) / span var(--col-span--desktop-value)}:host([subgrid-rows]):host([grow--desktop]) .container{flex-grow:var(--grow--desktop-value)}:host([subgrid-rows]):host([shrink--desktop]) .container{flex-shrink:var(--shrink--desktop-value)}:host([subgrid-rows]):host([basis--desktop]) .container{flex-basis:var(--basis--desktop-value)}:host([subgrid-rows]):host([align-self--desktop]) .container{align-self:var(--align-self--desktop-value)}:host([subgrid-rows]):host([justify-self--desktop]) .container{justify-self:var(--justify-self--desktop-value)}:host([subgrid-rows]):host([order--desktop]) .container{order:var(--order--desktop-value)}:host([subgrid-rows]):host([anchor-spacing]) .container{margin-top:var(--container-anchor-spacing--desktop)}}', $t = new CSSStyleSheet();
-$t.replaceSync(le);
-const pe = [
+const le = ':host{display:block}:host,:host *{box-sizing:border-box}.content-wrapper{margin-inline:var(--px-padding-s-mobile);max-width:var(--px-content-wrapper-max-width-desktop)}@media screen and (min-width: 77rem){.content-wrapper{margin-inline:auto}}.overlapped{margin-bottom:calc(var(--px-overlapped-mobile) * -1)}::slotted([slot="overlap"]){margin-top:var(--px-overlapped-mobile)}@media screen and (min-width: 48rem){.overlapped{margin-bottom:calc(var(--px-overlapped-tablet) * -1)}::slotted([slot="overlap"]){margin-top:var(--px-overlapped-tablet)}}@media screen and (min-width: 64.0625rem){.overlapped{margin-bottom:calc(var(--px-overlapped-laptop) * -1)}::slotted([slot="overlap"]){margin-top:var(--px-overlapped-laptop)}}', pe = ':host{display:block}.container{font-family:var(--px-font-family);background-color:var(--background-color);border-radius:var(--px-radius-main);box-sizing:border-box;height:100%}:host([background-image]) .container{background-image:var(--background-image)}:host([background-gradient]) .container{background-image:var(--background-gradient)}:host([inverted]) .container{background-color:var(--background-color-inverted);color:var(--px-color-text-neutral-inverted)}.border-none{border:none}.border-s{border:var(--px-size-border-s) solid var(--border-color)}.border-m{border:var(--px-size-border-m) solid var(--border-color)}.border-l{border:var(--px-size-border-l) solid var(--border-color)}.border-side-top{border-bottom-style:none;border-right-style:none;border-left-style:none}.border-side-right{border-top-style:none;border-bottom-style:none;border-left-style:none}.border-side-bottom{border-top-style:none;border-right-style:none;border-left-style:none}.border-side-left{border-top-style:none;border-right-style:none;border-bottom-style:none}.border-side-block{border-inline-style:none}.border-side-inline{border-block-style:none}:host([inverted]) .border-s,:host([inverted]) .border-m,:host([inverted]) .border-l{border-color:var(--border-color-inverted)}.border-radius-main{border-radius:var(--px-radius-main)}.border-radius-pill{border-radius:var(--px-radius-pill)}.no-border-radius-top{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all,.border-radius-none{border-radius:var(--px-radius-none)}.bgimg{background-repeat:no-repeat}.background-size-cover{background-size:cover;background-position:center center}.background-size-contain{background-size:contain}.box-shadow-none{box-shadow:none}.box-shadow-s{box-shadow:0 1px 2px #2525251f}.box-shadow-m{box-shadow:0 4px 6px -1px #25252514}.box-shadow-l{box-shadow:0 10px 15px -3px #25252514}.box-shadow-xl{box-shadow:0 20px 25px -5px #25252514}.anchored{position:relative}::slotted([slot="anchor-right"]),::slotted([slot="anchor-left"]),::slotted([slot="anchor-full"]){position:absolute;top:0}::slotted([slot="anchor-right"]),::slotted([slot="anchor-left"]){transform:translateY(-50%);z-index:3}::slotted([slot="anchor-right"]){right:var( --container-anchor-offset--mobile, var( --container-padding-right, var(--container-padding-inline, var(--container-padding)) ) )}::slotted([slot="anchor-left"]){left:var( --container-anchor-offset--mobile, var( --container-padding-left, var(--container-padding-inline, var(--container-padding)) ) )}::slotted([slot="anchor-full"]){transform:translateY(-100%);right:0;left:0;text-align:center;z-index:2}::slotted(px-vstack:only-of-type),::slotted(px-hstack:only-of-type),::slotted(px-stack:only-of-type),::slotted(px-grid:only-of-type){height:100%}:host([anchor-spacing]){margin-top:var(--container-anchor-spacing--mobile)}.border-s ::slotted([slot="anchor-full"]){right:calc(var(--px-size-border-s) * -1);left:calc(var(--px-size-border-s) * -1)}.border-m ::slotted([slot="anchor-full"]){right:calc(var(--px-size-border-m) * -1);left:calc(var(--px-size-border-m) * -1)}.border-l ::slotted([slot="anchor-full"]){right:calc(var(--px-size-border-l) * -1);left:calc(var(--px-size-border-l) * -1)}:host([subgrid-rows]){display:contents}:host([subgrid-rows]) .container{display:grid;grid-template-rows:subgrid;grid-row:span var(--subgrid-rows)}:host([subgrid-rows]):host([grow]) .container{flex-grow:var(--grow-value)}:host([subgrid-rows]):host([shrink]) .container{flex-shrink:var(--shrink-value)}:host([subgrid-rows]):host([basis]) .container{flex-basis:var(--basis-value)}:host([subgrid-rows]):host([align-self]) .container{align-self:var(--align-self-value)}:host([subgrid-rows]):host([col-span]) .container{grid-column:span var(--col-span-value) / span var(--col-span-value)}:host([subgrid-rows]):host([justify-self]) .container{justify-self:var(--justify-self-value)}:host([subgrid-rows]):host([order]) .container{order:var(--order-value)}:host([subgrid-rows]):host([anchor-spacing]) .container{margin-top:var(--container-anchor-spacing--mobile)}@media screen and (max-width: 47.938rem){.container{background-color:var(--background-color--mobile, var(--background-color))}:host([background-image--mobile]) .container{background-image:var(--background-image--mobile, var(--background-image))}:host([background-gradient--mobile]) .container{background-image:var( --background-gradient--mobile, var(--background-gradient) )}:host([inverted]) .container{background-color:var( --background-color-inverted--mobile, var(--background-color-inverted) )}.border-side-top--mobile{border-top-style:solid;border-right-style:none;border-bottom-style:none;border-left-style:none}.border-side-right--mobile{border-top-style:none;border-right-style:solid;border-bottom-style:none;border-left-style:none}.border-side-bottom--mobile{border-top-style:none;border-right-style:none;border-bottom-style:solid;border-left-style:none}.border-side-left--mobile{border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:solid}.border-side-block--mobile{border-inline-style:none;border-block-style:solid}.border-side-inline--mobile{border-block-style:none;border-inline-style:solid}.no-border-radius-top--mobile{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--mobile{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--mobile{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--mobile{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--mobile{border-radius:var(--px-radius-none)}:host([subgrid-rows]):host([grow--mobile]) .container{flex-grow:var(--grow--mobile-value)}:host([subgrid-rows]):host([shrink--mobile]) .container{flex-shrink:var(--shrink--mobile-value)}:host([subgrid-rows]):host([basis--mobile]) .container{flex-basis:var(--basis--mobile-value)}:host([subgrid-rows]):host([align-self--mobile]) .container{align-self:var(--align-self--mobile-value)}:host([subgrid-rows]):host([col-span--mobile]) .container{grid-column:span var(--col-span--mobile-value) / span var(--col-span--mobile-value)}:host([subgrid-rows]):host([justify-self--mobile]) .container{justify-self:var(--justify-self--mobile-value)}:host([subgrid-rows]):host([order--mobile]) .container{order:var(--order--mobile-value)}}@media screen and (min-width: 48rem) and (max-width: 64rem){.container{background-color:var(--background-color--tablet, var(--background-color))}:host([background-image--tablet]) .container{background-image:var(--background-image--tablet, var(--background-image))}:host([background-gradient--tablet]) .container{background-image:var( --background-gradient--tablet, var(--background-gradient) )}:host([inverted]) .container{background-color:var( --background-color-inverted--tablet, var(--background-color-inverted) )}.no-border-radius-top--tablet{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--tablet{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--tablet{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--tablet{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--tablet{border-radius:var(--px-radius-none)}.border-side-top--tablet{border-top-style:solid;border-right-style:none;border-bottom-style:none;border-left-style:none}.border-side-right--tablet{border-top-style:none;border-right-style:solid;border-bottom-style:none;border-left-style:none}.border-side-bottom--tablet{border-top-style:none;border-right-style:none;border-bottom-style:solid;border-left-style:none}.border-side-left--tablet{border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:solid}.border-side-block--tablet{border-inline-style:none;border-block-style:solid}.border-side-inline--tablet{border-block-style:none;border-inline-style:solid}::slotted([slot="anchor-right"]){right:var( --container-anchor-offset--tablet, var( --container-padding-right, var(--container-padding-inline, var(--container-padding)) ) )}::slotted([slot="anchor-left"]){left:var( --container-anchor-offset--tablet, var( --container-padding-left, var(--container-padding-inline, var(--container-padding)) ) )}:host([anchor-spacing]){margin-top:var(--container-anchor-spacing--tablet)}:host([subgrid-rows]):host([col-span--tablet]) .container{grid-column:span var(--col-span--tablet-value) / span var(--col-span--tablet-value)}:host([subgrid-rows]):host([grow--tablet]) .container{flex-grow:var(--grow--tablet-value)}:host([subgrid-rows]):host([shrink--tablet]) .container{flex-shrink:var(--shrink--tablet-value)}:host([subgrid-rows]):host([basis--tablet]) .container{flex-basis:var(--basis--tablet-value)}:host([subgrid-rows]):host([align-self--tablet]) .container{align-self:var(--align-self--tablet-value)}:host([subgrid-rows]):host([justify-self--tablet]) .container{justify-self:var(--justify-self--tablet-value)}:host([subgrid-rows]):host([order--tablet]) .container{order:var(--order--tablet-value)}:host([subgrid-rows]):host([anchor-spacing]) .container{margin-top:var(--container-anchor-spacing--tablet)}}@media screen and (min-width: 64.0625rem) and (max-width: 90rem){:host([anchor-spacing]){margin-top:var(--container-anchor-spacing--laptop)}:host([subgrid-rows]):host([col-span--laptop]) .container{grid-column:span var(--col-span--laptop-value) / span var(--col-span--laptop-value)}:host([subgrid-rows]):host([grow--laptop]) .container{flex-grow:var(--grow--laptop-value)}:host([subgrid-rows]):host([shrink--laptop]) .container{flex-shrink:var(--shrink--laptop-value)}:host([subgrid-rows]):host([basis--laptop]) .container{flex-basis:var(--basis--laptop-value)}:host([subgrid-rows]):host([align-self--laptop]) .container{align-self:var(--align-self--laptop-value)}:host([subgrid-rows]):host([justify-self--laptop]) .container{justify-self:var(--justify-self--laptop-value)}:host([subgrid-rows]):host([order--laptop]) .container{order:var(--order--laptop-value)}:host([subgrid-rows]):host([anchor-spacing]) .container{margin-top:var(--container-anchor-spacing--laptop)}}@media screen and (min-width: 64.0625rem){.container{background-color:var(--background-color--laptop, var(--background-color))}:host([background-image--laptop]) .container{background-image:var(--background-image--laptop, var(--background-image))}:host([background-gradient--laptop]) .container{background-image:var( --background-gradient--laptop, var(--background-gradient) )}:host([inverted]) .container{background-color:var( --background-color-inverted--laptop, var(--background-color-inverted) )}.no-border-radius-top--laptop{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--laptop{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--laptop{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--laptop{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--laptop{border-radius:var(--px-radius-none)}::slotted([slot="anchor-right"]){right:var( --container-anchor-offset--laptop, var( --container-padding-right, var(--container-padding-inline, var(--container-padding)) ) )}::slotted([slot="anchor-left"]){left:var( --container-anchor-offset--laptop, var( --container-padding-left, var(--container-padding-inline, var(--container-padding)) ) )}:host([anchor-spacing]){margin-top:var(--container-anchor-spacing--laptop)}.border-side-top--laptop{border-top-style:solid;border-right-style:none;border-bottom-style:none;border-left-style:none}.border-side-right--laptop{border-top-style:none;border-right-style:solid;border-bottom-style:none;border-left-style:none}.border-side-bottom--laptop{border-top-style:none;border-right-style:none;border-bottom-style:solid;border-left-style:none}.border-side-left--laptop{border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:solid}.border-side-block--laptop{border-inline-style:none;border-block-style:solid}.border-side-inline--laptop{border-block-style:none;border-inline-style:solid}}@media screen and (min-width: 90.0625rem){:host([anchor-spacing]){margin-top:var(--container-anchor-spacing--desktop)}:host([subgrid-rows]):host([col-span--desktop]) .container{grid-column:span var(--col-span--desktop-value) / span var(--col-span--desktop-value)}:host([subgrid-rows]):host([grow--desktop]) .container{flex-grow:var(--grow--desktop-value)}:host([subgrid-rows]):host([shrink--desktop]) .container{flex-shrink:var(--shrink--desktop-value)}:host([subgrid-rows]):host([basis--desktop]) .container{flex-basis:var(--basis--desktop-value)}:host([subgrid-rows]):host([align-self--desktop]) .container{align-self:var(--align-self--desktop-value)}:host([subgrid-rows]):host([justify-self--desktop]) .container{justify-self:var(--justify-self--desktop-value)}:host([subgrid-rows]):host([order--desktop]) .container{order:var(--order--desktop-value)}:host([subgrid-rows]):host([anchor-spacing]) .container{margin-top:var(--container-anchor-spacing--desktop)}}', Lt = new CSSStyleSheet();
+Lt.replaceSync(pe);
+const be = [
   "top-patch",
   "top-neighbor-patch",
   "top-ribbon",
   "top-neighbor-ribbon",
   "top-patch-and-neighbor-ribbon"
-], be = [
+], ce = [
   "1",
   "2",
   "3",
@@ -835,7 +836,7 @@ const pe = [
   "10",
   "11",
   "12"
-], g = (s, t, e) => `:host([${s}${e ? `--${e}` : ""}='${t}']) .container`, v = "px-padding", ce = [
+], g = (s, t, e) => `:host([${s}${e ? `--${e}` : ""}='${t}']) .container`, v = "px-padding", he = [
   h(
     "padding",
     g,
@@ -884,14 +885,14 @@ const pe = [
   h(
     "gap",
     g,
-    jt,
+    Wt,
     "px-spacing",
     void 0,
     "subgrid-gap"
   )
-], et = class et extends st {
+], ot = class ot extends X {
   constructor() {
-    super($t, ...ce), this.template = () => `<div class="container">
+    super(Lt, ...he), this.template = () => `<div class="container">
       <slot></slot>
       <slot name="anchor-left"></slot>
       <slot name="anchor-right"></slot>
@@ -942,8 +943,8 @@ const pe = [
       characterData: !0
     }), this._bgObserver = new IntersectionObserver((t) => {
       t.forEach((e) => {
-        var o;
-        e.isIntersecting && (this._isInViewport = !0, this._loadBackgroundImages(), (o = this._bgObserver) == null || o.disconnect());
+        var r;
+        e.isIntersecting && (this._isInViewport = !0, this._loadBackgroundImages(), (r = this._bgObserver) == null || r.disconnect());
       });
     }), this._bgObserver.observe(this.$el);
   }
@@ -951,27 +952,27 @@ const pe = [
     var t, e;
     (t = this._bgObserver) == null || t.disconnect(), (e = this.contentObserver) == null || e.disconnect();
   }
-  attributeChangedCallback(t, e, o) {
-    if (e !== o)
+  attributeChangedCallback(t, e, r) {
+    if (e !== r)
       switch (t) {
         case "border":
-          this.updateAttribute(t, e, o, Nt);
+          this.updateAttribute(t, e, r, Kt);
           break;
         case "border-color":
-          this.updateBorderColor(t, o);
+          this.updateBorderColor(t, r);
           break;
         case "border-side":
         case "border-side--mobile":
         case "border-side--tablet":
         case "border-side--laptop":
-          this.updateAttribute(t, e, o, Gt);
+          this.updateAttribute(t, e, r, Zt);
           break;
         case "border-radius":
           this.updateAttribute(
             t,
             e,
-            o,
-            Ft
+            r,
+            Xt
           );
           break;
         case "no-border-radius":
@@ -981,58 +982,58 @@ const pe = [
           this.updateNoBorderRadius(
             t,
             e,
-            o,
-            Wt
+            r,
+            Yt
           );
           break;
         case "background-color":
         case "background-color--mobile":
         case "background-color--tablet":
         case "background-color--laptop":
-          this.updateBackgroundColor(t, o);
+          this.updateBackgroundColor(t, r);
           break;
         case "background-gradient":
         case "background-gradient--mobile":
         case "background-gradient--tablet":
         case "background-gradient--laptop":
-          this.updateGradient(t, o);
+          this.updateGradient(t, r);
           break;
         case "background-size":
           this.updateAttribute(
             t,
             e,
-            o,
-            _t
+            r,
+            Gt
           );
           break;
         case "background-image":
         case "background-image--mobile":
         case "background-image--tablet":
         case "background-image--laptop":
-          this._isInViewport && this.updateBackgroundImg(t, o);
+          this._isInViewport && this.updateBackgroundImg(t, r);
           break;
         case "background-position":
-          o !== null && o !== "" && (this.$el.style.backgroundPosition = o);
+          r !== null && r !== "" && (this.$el.style.backgroundPosition = r);
           break;
         case "box-shadow":
-          this.updateAttribute(t, e, o, Ot);
+          this.updateAttribute(t, e, r, Ft);
           break;
         case "anchor-offset":
-          this.updateAnchorOffset(e, o, u);
+          this.updateAnchorOffset(e, r, u);
           break;
         case "anchor-spacing":
-          this.updateAnchorSpacing(e, o, pe);
+          this.updateAnchorSpacing(e, r, be);
           break;
         case "subgrid-rows":
           this.updateSubgridRows(
             t,
             e,
-            o,
-            be
+            r,
+            ce
           );
           break;
         default:
-          super.attributeChangedCallback(t, e, o);
+          super.attributeChangedCallback(t, e, r);
           break;
       }
   }
@@ -1043,100 +1044,100 @@ const pe = [
       "background-image--tablet",
       "background-image--laptop"
     ].forEach((e) => {
-      const o = this.getAttribute(e);
-      o && this.updateBackgroundImg(e, o);
+      const r = this.getAttribute(e);
+      r && this.updateBackgroundImg(e, r);
     });
   }
   updateBackgroundImg(t, e) {
     this.$el.style.setProperty(`--${t}`, `url("${e}")`);
   }
   updateGradient(t, e) {
-    if (this.checkName(Yt, e)) {
-      const o = this.splitAttrNameFromBreakpoint(t);
-      t = o.attrName;
-      const r = o.breakpoint;
+    if (this.checkName(st, e)) {
+      const r = this.splitAttrNameFromBreakpoint(t);
+      t = r.attrName;
+      const o = r.breakpoint;
       this.$el.style.setProperty(
-        `--${t}${r}`,
+        `--${t}${o}`,
         `linear-gradient(var(--px-color-background-gradient-${e}))`
       );
     } else
       d(
-        `${e} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
+        `"${e}" is not a valid ${t} value for ${this.tagName.toLowerCase()}. Allowed values are: "${st.join('", "')}".`
       );
   }
   updateBackgroundColor(t, e) {
-    const o = e.startsWith("surface-");
-    if (this.checkName(lt, e)) {
-      const r = this.splitAttrNameFromBreakpoint(t), i = r.breakpoint;
+    const r = e.startsWith("surface-");
+    if (this.checkName(P, e)) {
+      const o = this.splitAttrNameFromBreakpoint(t), i = o.breakpoint;
       this.$el.style.setProperty(
-        `--${r.attrName}${i}`,
-        `var(--px-color-background-${e}${o ? "" : "-default"})`
+        `--${o.attrName}${i}`,
+        `var(--px-color-background-${e}${r ? "" : "-default"})`
       ), this.$el.style.setProperty(
-        `--${r.attrName}-inverted${i}`,
-        `var(--px-color-background-${e}${o ? "" : "-inverted"})`
+        `--${o.attrName}-inverted${i}`,
+        `var(--px-color-background-${e}${r ? "" : "-inverted"})`
       );
     } else
       d(
-        `${e} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
+        `"${e}" is not a valid ${t} value for ${this.tagName.toLowerCase()}. Allowed values are: "${P.join('", "')}".`
       );
   }
   updateBorderColor(t, e) {
-    this.checkName(Zt, e) ? (this.$el.style.setProperty(
+    this.checkName(nt, e) ? (this.$el.style.setProperty(
       `--${t}`,
       `var(--px-color-border-${e}-default)`
     ), this.$el.style.setProperty(
       `--${t}-inverted`,
       `var(--px-color-border-${e}-inverted)`
     )) : d(
-      `${e} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
+      `"${e}" is not a valid ${t} value for ${this.tagName.toLowerCase()}. Allowed values are: "${nt.join('", "')}".`
     );
   }
-  updateNoBorderRadius(t, e, o, r) {
-    if (!this.checkName(r, o))
+  updateNoBorderRadius(t, e, r, o) {
+    if (!this.checkName(o, r))
       d(
-        `${o} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
+        `"${r}" is not a valid ${t} value for ${this.tagName.toLowerCase()}. Allowed values are: "${o.join('", "')}".`
       );
     else {
       const i = this.splitAttrNameFromBreakpoint(t), a = i.breakpoint;
       e !== null && e !== "" && this.$el.classList.toggle(
         `${i.attrName}-${e}${a}`
-      ), o !== null && o !== "" && this.$el.classList.toggle(
-        `${i.attrName}-${o}${a}`
+      ), r !== null && r !== "" && this.$el.classList.toggle(
+        `${i.attrName}-${r}${a}`
       );
     }
   }
-  updateAttribute(t, e, o, r) {
-    if (!this.checkName(r, o))
+  updateAttribute(t, e, r, o) {
+    if (!this.checkName(o, r))
       d(
-        `${o} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
+        `"${r}" is not a valid ${t} value for ${this.tagName.toLowerCase()}. Allowed values are: "${o.join('", "')}".`
       );
     else {
       const i = this.splitAttrNameFromBreakpoint(t), a = i.breakpoint;
       e !== null && e !== "" && this.$el.classList.toggle(
         `${i.attrName}-${e}${a}`
-      ), o !== null && o !== "" && this.$el.classList.toggle(
-        `${i.attrName}-${o}${a}`
+      ), r !== null && r !== "" && this.$el.classList.toggle(
+        `${i.attrName}-${r}${a}`
       );
     }
   }
   splitAttrNameFromBreakpoint(t) {
     let e = "";
     if (["--mobile", "--tablet", "--laptop"].some(
-      (o) => t.includes(o)
+      (r) => t.includes(r)
     )) {
-      const o = t.split("--");
-      t = o[0], e = `--${o[1]}`;
+      const r = t.split("--");
+      t = r[0], e = `--${r[1]}`;
     }
     return { attrName: t, breakpoint: e };
   }
-  updateAnchorOffset(t, e, o) {
-    if (!$(o, e)) {
+  updateAnchorOffset(t, e, r) {
+    if (!w(r, e)) {
       d(
-        `${e} is not a valid anchor-offset value for ${this.tagName.toLowerCase()}`
+        `"${e}" is not a valid anchor-offset value for ${this.tagName.toLowerCase()}. Allowed values are: "${r.join('", "')}".`
       );
       return;
     }
-    const r = (i) => {
+    const o = (i) => {
       i !== null && i !== "" && i !== "default" && (this.$el.style.setProperty(
         "--container-anchor-offset--mobile",
         `var(--px-padding-${i}-mobile)`
@@ -1148,19 +1149,19 @@ const pe = [
         `var(--px-padding-${i}-laptop)`
       ));
     };
-    r(t), r(e);
+    o(t), o(e);
   }
   addAnchorClass() {
     this.$el.classList.contains("anchored") || this.$el.classList.add("anchored");
   }
-  updateAnchorSpacing(t, e, o) {
-    if (!$(o, e)) {
+  updateAnchorSpacing(t, e, r) {
+    if (!w(r, e)) {
       d(
-        `${e} is not a valid anchor-spacing value for ${this.tagName.toLowerCase()}`
+        `"${e}" is not a valid anchor-spacing value for ${this.tagName.toLowerCase()}. Allowed values are: "${r.join('", "')}".`
       );
       return;
     }
-    const r = (i) => {
+    const o = (i) => {
       i !== null && i !== "" && i !== "default" && (this.style.setProperty(
         "--container-anchor-spacing--mobile",
         `var(--px-spacing-${i}-mobile)`
@@ -1170,13 +1171,16 @@ const pe = [
       ), this.style.setProperty(
         "--container-anchor-spacing--laptop",
         `var(--px-spacing-${i}-laptop)`
+      ), this.style.setProperty(
+        "--container-anchor-spacing--desktop",
+        `var(--px-spacing-${i}-desktop)`
       ));
     };
-    r(t), r(e);
+    o(t), o(e);
   }
-  updateSubgridRows(t, e, o, r) {
-    $(r, o) ? this.style.setProperty(`--${t}`, o) : d(
-      `${o} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
+  updateSubgridRows(t, e, r, o) {
+    w(o, r) ? this.style.setProperty(`--${t}`, r) : d(
+      `"${r}" is not a valid ${t} value for ${this.tagName.toLowerCase()}. Allowed values are: "${o.join('", "')}".`
     );
   }
   get $el() {
@@ -1559,14 +1563,14 @@ const pe = [
     this.setAttribute("subgrid-gap--laptop", t);
   }
 };
-et.nativeName = "div";
-let F = et;
+ot.nativeName = "div";
+let F = ot;
 customElements.get("px-container") || customElements.define("px-container", F);
-const wt = new CSSStyleSheet();
-wt.replaceSync(de);
-class he extends HTMLElement {
+const Tt = new CSSStyleSheet();
+Tt.replaceSync(le);
+class ge extends X {
   constructor() {
-    super(), this.template = () => `
+    super(Tt), this.template = () => `
     <px-container border-radius="none" padding-inline="none">
       <div class="content-wrapper">
         <px-vstack gap="heading-to-content">
@@ -1580,15 +1584,18 @@ class he extends HTMLElement {
     <div class="content-wrapper">
       <slot name="overlap"></slot>
     </div>
-  `, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [wt];
+  `, this.shadowRoot.innerHTML = this.template();
   }
   connectedCallback() {
-    this.$container.setAttribute("background-color", this.backgroundColor), this.$slotOverlap && this.shadowRoot.firstElementChild.querySelector(".content-wrapper").classList.add("overlapped");
-    const t = this.querySelector('[slot="heading"]');
-    !this.paddingBlock && !this.paddingTop && !this.paddingBottom && !this.paddingBlockMobile && !this.paddingTopMobile && !this.paddingBottomMobile && !this.paddingBlockTablet && !this.paddingTopTablet && !this.paddingBottomTablet && !this.paddingBlockLaptop && !this.paddingTopLaptop && !this.paddingBottomLaptop && (this.$container.paddingBlock = "none"), t || this.shadowRoot.querySelector("px-vstack").setAttribute("gap", "none");
+    var t, e;
+    this.$container.setAttribute("background-color", this.backgroundColor), !this.paddingBlock && !this.paddingTop && !this.paddingBottom && !this.paddingBlockMobile && !this.paddingTopMobile && !this.paddingBottomMobile && !this.paddingBlockTablet && !this.paddingTopTablet && !this.paddingBottomTablet && !this.paddingBlockLaptop && !this.paddingTopLaptop && !this.paddingBottomLaptop && (this.$container.paddingBlock = "none"), this.setHeadingSpacing = this.setHeadingSpacing.bind(this), this.setHeadingSpacing(), (t = this.$slotHeading) == null || t.addEventListener("slotchange", this.setHeadingSpacing), this.toggleOverlapSpacing = this.toggleOverlapSpacing.bind(this), this.toggleOverlapSpacing(), (e = this.$slotOverlap) == null || e.addEventListener(
+      "slotchange",
+      this.toggleOverlapSpacing
+    );
   }
   static get observedAttributes() {
     return [
+      ...super.observedAttributes,
       "background-color",
       "background-gradient",
       "background-image",
@@ -1616,92 +1623,139 @@ class he extends HTMLElement {
       "border-side--laptop"
     ];
   }
-  get $container() {
-    return this.shadowRoot.querySelector("px-container");
-  }
-  attributeChangedCallback(t, e, o) {
-    if (e !== o)
+  attributeChangedCallback(t, e, r) {
+    if (e !== r)
       switch (t) {
         case "background-color":
-          this.$container.backgroundColor = lt.indexOf(o) > 0 ? o : "none";
+          this.$container.backgroundColor = P.indexOf(r) > 0 ? r : "none";
           break;
         case "background-gradient":
           this.$container.gradient = this.gradient;
           break;
         case "background-image":
-          this.$container.backgroundImage = o;
+          this.$container.backgroundImage = r;
           break;
         case "background-image--mobile":
-          this.$container.backgroundImageMobile = o;
+          this.$container.backgroundImageMobile = r;
           break;
         case "background-image--tablet":
-          this.$container.backgroundImageTablet = o;
+          this.$container.backgroundImageTablet = r;
           break;
         case "background-image--laptop":
-          this.$container.backgroundImageLaptop = o;
+          this.$container.backgroundImageLaptop = r;
           break;
         case "background-size":
-          this.$container.backgroundSize = o;
+          this.$container.backgroundSize = r;
           break;
         case "background-position":
-          this.$container.backgroundPosition = o;
+          this.$container.backgroundPosition = r;
           break;
         case "padding-block":
-          this.$container.paddingBlock = o;
+          this.$container.paddingBlock = r;
           break;
         case "padding-top":
-          this.$container.paddingTop = o;
+          this.$container.paddingTop = r;
           break;
         case "padding-bottom":
-          this.$container.paddingBottom = o;
+          this.$container.paddingBottom = r;
           break;
         case "padding-block--mobile":
-          this.$container.paddingBlockMobile = o;
+          this.$container.paddingBlockMobile = r;
           break;
         case "padding-top--mobile":
-          this.$container.paddingTopMobile = o;
+          this.$container.paddingTopMobile = r;
           break;
         case "padding-bottom--mobile":
-          this.$container.paddingBottomMobile = o;
+          this.$container.paddingBottomMobile = r;
           break;
         case "padding-block--tablet":
-          this.$container.paddingBlockTablet = o;
+          this.$container.paddingBlockTablet = r;
           break;
         case "padding-top--tablet":
-          this.$container.paddingTopTablet = o;
+          this.$container.paddingTopTablet = r;
           break;
         case "padding-bottom--tablet":
-          this.$container.paddingBottomTablet = o;
+          this.$container.paddingBottomTablet = r;
           break;
         case "padding-block--laptop":
-          this.$container.paddingBlockLaptop = o;
+          this.$container.paddingBlockLaptop = r;
           break;
         case "padding-top--laptop":
-          this.$container.paddingTopLaptop = o;
+          this.$container.paddingTopLaptop = r;
           break;
         case "padding-bottom--laptop":
-          this.$container.paddingBottomLaptop = o;
+          this.$container.paddingBottomLaptop = r;
           break;
         case "border":
-          this.$container.border = o;
+          this.$container.border = r;
           break;
         case "border-side":
-          this.$container.borderSide = o;
+          this.$container.borderSide = r;
           break;
         case "border-side--mobile":
-          this.$container.borderSideMobile = o;
+          this.$container.borderSideMobile = r;
           break;
         case "border-side--tablet":
-          this.$container.borderSideTablet = o;
+          this.$container.borderSideTablet = r;
           break;
         case "border-side--laptop":
-          this.$container.borderSideLaptop = o;
+          this.$container.borderSideLaptop = r;
+          break;
+        default:
+          super.attributeChangedCallback(t, e, r);
           break;
       }
   }
+  disconnectedCallback() {
+    var t, e;
+    (t = this.$slotHeading) == null || t.removeEventListener(
+      "slotchange",
+      this.setHeadingSpacing
+    ), (e = this.$slotOverlap) == null || e.removeEventListener(
+      "slotchange",
+      this.toggleOverlapSpacing
+    );
+  }
+  toggleOverlapSpacing() {
+    const t = this.$slotOverlap, e = this.$mainContentWrapper;
+    if (!t || !e) return;
+    const o = t.assignedNodes({ flatten: !0 }).some(this.isNotEmptyNode);
+    e.classList.toggle("overlapped", o);
+  }
+  isNotEmptyNode(t) {
+    return t.nodeType === Node.ELEMENT_NODE ? !0 : t.nodeType === Node.TEXT_NODE ? (t.textContent ?? "").trim().length > 0 : !1;
+  }
+  setHeadingSpacing() {
+    var r;
+    const t = this.$slotHeading, e = (r = this.shadowRoot) == null ? void 0 : r.querySelector("px-vstack");
+    t && e && (t.assignedElements().length > 0 ? e.setAttribute("gap", "heading-to-content") : e.setAttribute("gap", "none"));
+  }
+  get $container() {
+    var t;
+    return (t = this.shadowRoot) == null ? void 0 : t.querySelector("px-container");
+  }
+  get $mainContentWrapper() {
+    var t;
+    return (t = this.$container) == null ? void 0 : t.querySelector(".content-wrapper");
+  }
   get $slotOverlap() {
+    var t;
+    return (t = this.shadowRoot) == null ? void 0 : t.querySelector(
+      'slot[name="overlap"]'
+    );
+  }
+  get $slottedOverlap() {
     return this.querySelector('[slot="overlap"]');
   }
+  get $slotHeading() {
+    var t;
+    return (t = this.shadowRoot) == null ? void 0 : t.querySelector(
+      'slot[name="heading"]'
+    );
+  }
+  get $slottedHeading() {
+    return this.querySelector('[slot="heading"]');
+  }
   get backgroundColor() {
     return this.getAttribute("background-color") || "none";
   }
@@ -1853,14 +1907,14 @@ class he extends HTMLElement {
     this.setAttribute("border-side--laptop", t);
   }
 }
-customElements.get("px-section") || customElements.define("px-section", he);
-const ge = "p,::slotted(p){font-family:var(--px-font-family);color:var(--px-color-text-neutral-default);font-size:var(--px-text-size-body-m-mobile);font-weight:var(--px-font-weight-body);line-height:var(--px-line-height-ratio-l);margin:0}::slotted(p){margin-bottom:var(--px-spacing-xs-mobile)}.text-align-left{text-align:left}.text-align-center{text-align:center}.text-align-right{text-align:right}:host([inverted]) p,:host([inverted]) ::slotted(p){color:var(--px-color-text-neutral-inverted)}@media only screen and (max-width: 768px){.text-align-left--mobile{text-align:left}.text-align-center--mobile{text-align:center}.text-align-right--mobile{text-align:right}}@media only screen and (min-width: 768px){p,::slotted(p){font-size:var(--px-text-size-body-m-desktop)}::slotted(p){margin-bottom:var(--px-spacing-xs-tablet)}.text-align-left--tablet{text-align:left}.text-align-center--tablet{text-align:center}.text-align-right--tablet{text-align:right}}@media only screen and (min-width: 1025px){p,::slotted(p){font-size:var(--px-text-size-body-m-desktop)}::slotted(p){margin-bottom:var(--px-spacing-xs-laptop)}.text-align-left--laptop{text-align:left}.text-align-center--laptop{text-align:center}.text-align-right--laptop{text-align:right}}@media only screen and (min-width: 90.0625em){::slotted(p){margin-bottom:var(--px-spacing-xs-desktop)}}", St = new CSSStyleSheet(), Ct = new CSSStyleSheet(), Lt = new CSSStyleSheet();
-St.replaceSync(ge);
-Ct.replaceSync(Z);
-Lt.replaceSync(kt);
-const ot = class ot extends w {
+customElements.get("px-section") || customElements.define("px-section", ge);
+const ue = "p,::slotted(p){font-family:var(--px-font-family);color:var(--px-color-text-neutral-default);font-size:var(--px-text-size-body-m-mobile);font-weight:var(--px-font-weight-body);line-height:var(--px-line-height-ratio-l);margin:0}::slotted(p){margin-bottom:var(--px-spacing-xs-mobile)}.text-align-left{text-align:left}.text-align-center{text-align:center}.text-align-right{text-align:right}:host([inverted]) p,:host([inverted]) ::slotted(p){color:var(--px-color-text-neutral-inverted)}@media screen and (max-width: 47.938rem){.text-align-left--mobile{text-align:left}.text-align-center--mobile{text-align:center}.text-align-right--mobile{text-align:right}}@media screen and (min-width: 48rem){p,::slotted(p){font-size:var(--px-text-size-body-m-tablet)}::slotted(p){margin-bottom:var(--px-spacing-xs-tablet)}.text-align-left--tablet{text-align:left}.text-align-center--tablet{text-align:center}.text-align-right--tablet{text-align:right}}@media screen and (min-width: 64.0625rem){p,::slotted(p){font-size:var(--px-text-size-body-m-laptop)}::slotted(p){margin-bottom:var(--px-spacing-xs-laptop)}.text-align-left--laptop{text-align:left}.text-align-center--laptop{text-align:center}.text-align-right--laptop{text-align:right}}@media screen and (min-width: 90.0625rem){::slotted(p){margin-bottom:var(--px-spacing-xs-desktop)}}", Et = new CSSStyleSheet(), Bt = new CSSStyleSheet(), Mt = new CSSStyleSheet();
+Et.replaceSync(ue);
+Bt.replaceSync(K);
+Mt.replaceSync(wt);
+const it = class it extends $ {
   constructor() {
-    super(Ct, Lt, St), this.template = "<p><slot></slot></p>", this.shadowRoot.innerHTML = this.template;
+    super(Bt, Mt, Et), this.template = "<p><slot></slot></p>", this.shadowRoot.innerHTML = this.template;
   }
   static get observedAttributes() {
     return [
@@ -1877,64 +1931,64 @@ const ot = class ot extends w {
       "disabled"
     ];
   }
-  attributeChangedCallback(t, e, o) {
-    if (e !== o)
+  attributeChangedCallback(t, e, r) {
+    if (e !== r)
       switch (t) {
         case "variant":
-          this.updateVariant(t, e, o, dt);
+          this.updateVariant(t, e, r, ht);
           break;
         case "color":
-          this.updateTypography(t, e, o, Y);
+          this.updateTypography(t, e, r, Z);
           break;
         case "font-size":
-          this.updateTypography(t, e, o, bt);
+          this.updateTypography(t, e, r, ut);
           break;
         case "font-weight":
-          this.updateTypography(t, e, o, pt);
+          this.updateTypography(t, e, r, gt);
           break;
         case "text-align":
         case "text-align--mobile":
         case "text-align--tablet":
         case "text-align--laptop":
-          this.updateTypography(t, e, o, nt);
+          this.updateTypography(t, e, r, ct);
           break;
         case "disabled":
           this.color = "state-disabled";
           break;
         default:
-          super.attributeChangedCallback(t, e, o);
+          super.attributeChangedCallback(t, e, r);
           break;
       }
   }
   toggleClass(t, e) {
     t !== null && t !== "" && t !== "default" && this.$el.classList.toggle(`style-${t}`), e !== null && e !== "" && e !== "default" && this.$el.classList.toggle(`style-${e}`);
   }
-  updateVariant(t, e, o, r) {
-    this.checkName(r, o) ? this.toggleClass(e, o) : d(
-      `${o} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
+  updateVariant(t, e, r, o) {
+    this.checkName(o, r) ? this.toggleClass(e, r) : d(
+      `"${r}" is not a valid ${t} value for ${this.tagName.toLowerCase()}. Allowed values are: "${o.join('", "')}".`
     );
   }
-  updateTypography(t, e, o, r) {
-    if (!this.checkName(r, o))
+  updateTypography(t, e, r, o) {
+    if (!this.checkName(o, r))
       d(
-        `${o} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
+        `"${r}" is not a valid ${t} value for ${this.tagName.toLowerCase()}. Allowed values are: "${o.join('", "')}".`
       );
     else {
       const i = this.splitAttrNameFromBreakpoint(t), a = i.breakpoint;
       e !== null && e !== "" && this.$el.classList.toggle(
         `${i.attrName}-${e}${a}`
-      ), o !== null && o !== "" && this.$el.classList.toggle(
-        `${i.attrName}-${o}${a}`
+      ), r !== null && r !== "" && this.$el.classList.toggle(
+        `${i.attrName}-${r}${a}`
       );
     }
   }
   splitAttrNameFromBreakpoint(t) {
     let e = "";
     if (["--mobile", "--tablet", "--laptop"].some(
-      (o) => t.includes(o)
+      (r) => t.includes(r)
     )) {
-      const o = t.split("--");
-      t = o[0], e = `--${o[1]}`;
+      const r = t.split("--");
+      t = r[0], e = `--${r[1]}`;
     }
     return { attrName: t, breakpoint: e };
   }
@@ -1999,10 +2053,10 @@ const ot = class ot extends w {
     this.setAttribute("disabled", t);
   }
 };
-ot.nativeName = "p";
-let G = ot;
+it.nativeName = "p";
+let G = it;
 customElements.get("px-p") || customElements.define("px-p", G);
-class ue extends HTMLElement {
+class xe extends HTMLElement {
   constructor() {
     super(), this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = `
       <button aria-hidden="true" style="width: 0; height: 0; border: 0; background-color: #00000000;"></button>
@@ -2016,11 +2070,11 @@ class ue extends HTMLElement {
     });
   }
 }
-customElements.get("px-mdd-closer") || customElements.define("px-mdd-closer", ue);
-const xe = ":host{--mdd-dialog-offset-top: 0}dialog{border:none;width:100%;margin-inline:0;margin-top:var(--mdd-dialog-offset-top);max-width:100%;max-height:100%;background-color:var(--px-color-background-surface-default)}@keyframes slide-left-fade-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}dialog::backdrop{background-color:#0000}@media screen and (max-height: 285px){dialog #footer{position:static}dialog::backdrop{background-color:#0006}}@media screen and (max-width: 767px){dialog{height:100dvh;margin:0;padding:0;animation:slide-left-fade-in .3s ease-in-out}px-container{height:100dvh}px-container>px-vstack>px-button-icon{position:initial;display:none;right:0}px-container>px-vstack>px-mdd-closer{display:none}dialog::backdrop{background-color:var(--px-color-background-surface-default)}}px-container{position:relative}px-container>px-vstack>px-button-icon{position:absolute;top:2em;right:1em}#sections-container{overflow:auto}@media only screen and (min-width: 48em){#sections-container{padding-bottom:0}}#mobile-header{display:none}@media screen and (max-width: 767px){#mobile-header{display:block;padding-bottom:2em}}px-p{display:none}@media screen and (max-width: 767px){px-p{display:block;padding-bottom:2em}}#footer{display:none}@media screen and (max-width: 767px){#footer{display:block;position:absolute;bottom:0;left:0;right:0;padding:var(--px-padding-s-mobile);background-color:var(--px-color-background-container-light-default)}}", Tt = new CSSStyleSheet();
-Tt.replaceSync(xe);
-var y, p, N, Et, S, Bt;
-class ve extends HTMLElement {
+customElements.get("px-mdd-closer") || customElements.define("px-mdd-closer", xe);
+const ve = ":host{--mdd-dialog-offset-top: 0}dialog{border:none;width:100%;margin-inline:0;margin-top:var(--mdd-dialog-offset-top);max-width:100%;max-height:100%;background-color:var(--px-color-background-surface-default)}@keyframes slide-left-fade-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}dialog::backdrop{background-color:#0000}@media screen and (max-height: 17.813rem){dialog #footer{position:static}dialog::backdrop{background-color:#0006}}@media screen and (max-width: 47.9375rem){dialog{height:100dvh;margin:0;padding:0;animation:slide-left-fade-in .3s ease-in-out}px-container{height:100dvh}px-container>px-vstack>px-button-icon{position:initial;display:none;right:0}px-container>px-vstack>px-mdd-closer{display:none}dialog::backdrop{background-color:var(--px-color-background-surface-default)}}px-container{position:relative}px-container>px-vstack>px-button-icon{position:absolute;top:32px;right:16px}#sections-container{overflow:auto}@media screen and (min-width: 48rem){#sections-container{padding-bottom:0}}#mobile-header{display:none}@media screen and (max-width: 47.9375rem){#mobile-header{display:block;padding-bottom:32px}}px-p{display:none}@media screen and (max-width: 47.9375rem){px-p{display:block;padding-bottom:32px}}#footer{display:none}@media screen and (max-width: 47.9375rem){#footer{display:block;position:absolute;bottom:0;left:0;right:0;padding:var(--px-padding-s-mobile);background-color:var(--px-color-background-container-light-default)}}", Rt = new CSSStyleSheet();
+Rt.replaceSync(ve);
+var y, p, Y, It, S, jt;
+class me extends HTMLElement {
   constructor() {
     var e;
     super();
@@ -2082,21 +2136,21 @@ class ve extends HTMLElement {
         <slot name="mdd-footer"></slot>
       </px-hstack>
     </px-section>
-  </dialog>`, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template, this.shadowRoot.adoptedStyleSheets = [Tt], this.internals = (e = this.attachInternals) == null ? void 0 : e.call(this), this.role = "menu", this.internals && (this.internals.role = "menu");
+  </dialog>`, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template, this.shadowRoot.adoptedStyleSheets = [Rt], this.internals = (e = this.attachInternals) == null ? void 0 : e.call(this), this.internals && (this.internals.role = "menu");
   }
   static get observedAttributes() {
     return ["hidden", "name", "close-button-aria-label", "back-to-menu-label"];
   }
   connectedCallback() {
-    var e, o;
-    if (this.querySelectorAll("px-mdd-section").length === 0)
+    var e, r;
+    if (this.role = "menu", this.querySelectorAll("px-mdd-section").length === 0)
       throw new Error("HeaderPanel must contain at least one MenuSection");
-    this.hidden = !0, this.internals && (this.internals.ariaHidden = "true"), this.ariaHidden = "true", this.setAttribute("slot", "header-panels"), this.shadowRoot.addEventListener("click", (r) => {
-      if (r.target.closest("px-button-icon"))
+    this.hidden = !0, this.internals && (this.internals.ariaHidden = "true"), this.ariaHidden = "true", this.setAttribute("slot", "header-panels"), this.shadowRoot.addEventListener("click", (o) => {
+      if (o.target.closest("px-button-icon"))
         this.dispatchEvent(
           new CustomEvent("close-panel", { bubbles: !0, composed: !0 })
         );
-      else if (r.target.closest("#back-button")) {
+      else if (o.target.closest("#back-button")) {
         const i = new CustomEvent("back-to-mobile-menu", {
           bubbles: !0,
           composed: !0
@@ -2105,30 +2159,30 @@ class ve extends HTMLElement {
       }
     }), this.$dialog.addEventListener("cancel", () => {
       this.dispatchEvent(new CustomEvent("close-panel", { bubbles: !0 }));
-    }), this.$dialog.addEventListener("click", (r) => {
-      r.target === this.$dialog && this.dispatchEvent(
+    }), this.$dialog.addEventListener("click", (o) => {
+      o.target === this.$dialog && this.dispatchEvent(
         new CustomEvent("close-panel-from-dialog", {
           bubbles: !0,
           detail: {
-            clientX: r.clientX,
-            clientY: r.clientY
+            clientX: o.clientX,
+            clientY: o.clientY
           }
         })
       );
-    }), this.getAttribute("name") === "__lavender_mobile_menu" && (n(this, p, N).style.visibility = "hidden"), this.getAttribute("name") !== "__lavender_mobile_menu" && (n(this, p, Et).innerText = ((o = (e = this.closest("px-header")) == null ? void 0 : e.querySelector(
+    }), this.getAttribute("name") === "__lavender_mobile_menu" && (n(this, p, Y).style.visibility = "hidden"), this.getAttribute("name") !== "__lavender_mobile_menu" && (n(this, p, It).innerText = ((r = (e = this.closest("px-header")) == null ? void 0 : e.querySelector(
       `px-header-item[for="${this.getAttribute("name")}"]`
-    )) == null ? void 0 : o.innerText) ?? ""), this.$slotMddFooter || (n(this, p, S).style.display = "none"), k(this, y, new MutationObserver(() => {
+    )) == null ? void 0 : r.innerText) ?? ""), this.$slotMddFooter || (n(this, p, S).style.display = "none"), k(this, y, new MutationObserver(() => {
       this.$slotMddFooter && (n(this, p, S).style.display = "block");
     })), n(this, y).observe(this, { childList: !0, subtree: !0 });
   }
   disconnectedCallback() {
     n(this, y).disconnect();
   }
-  attributeChangedCallback(e, o, r) {
-    if (e === "name" && !r)
+  attributeChangedCallback(e, r, o) {
+    if (e === "name" && !o)
       throw new Error("Media Drop Down must have a name attribute");
-    if (e === "name" && (this.id = r), e === "hidden" && this.internals) {
-      const i = r === "true" || r === "" ? "true" : "false";
+    if (e === "name" && (this.id = o), e === "hidden" && this.internals) {
+      const i = o === "true" || o === "" ? "true" : "false";
       this.internals.ariaHidden = i, this.ariaHidden = i;
       const l = n(this, p, S).offsetHeight / parseFloat(getComputedStyle(document.documentElement).fontSize);
       this.style.setProperty(
@@ -2136,11 +2190,11 @@ class ve extends HTMLElement {
         `${l}em`
       );
     }
-    e === "close-button-aria-label" && n(this, p, Bt).forEach((i) => {
-      r ? i.setAttribute("aria-label", r || "Close") : i.removeAttribute("aria-label");
-    }), e === "back-to-menu-label" && (n(this, p, N).innerHTML = `
+    e === "close-button-aria-label" && n(this, p, jt).forEach((i) => {
+      o ? i.setAttribute("aria-label", o || "Close") : i.removeAttribute("aria-label");
+    }), e === "back-to-menu-label" && (n(this, p, Y).innerHTML = `
         <px-icon name="chevron_left" from="lavender"></px-icon>
-        ${r || "Back to menu"}
+        ${o || "Back to menu"}
       `);
   }
   get $dialog() {
@@ -2181,19 +2235,19 @@ class ve extends HTMLElement {
     this.$dialog.style.setProperty("--mdd-dialog-offset-top", e);
   }
 }
-y = new WeakMap(), p = new WeakSet(), N = function() {
+y = new WeakMap(), p = new WeakSet(), Y = function() {
   return this.shadowRoot.querySelector("#back-button");
-}, Et = function() {
+}, It = function() {
   return this.shadowRoot.querySelector("px-p");
 }, S = function() {
   return this.shadowRoot.querySelector("#footer");
-}, Bt = function() {
+}, jt = function() {
   return this.shadowRoot.querySelectorAll("px-button-icon");
 };
-customElements.get("px-mdd") || customElements.define("px-mdd", ve);
-const fe = ':host{flex-basis:25%}@media screen and (max-width: 767px){:host{width:100%;flex-basis:100%}#section-wrapper{background-color:#fff;border-radius:.5em;padding-inline:1em}::slotted(px-mdd-section-item){border-bottom:var(--px-size-border-m) solid var(--px-color-border-main-default)}::slotted(px-mdd-section-item:last-of-type){border-bottom:none}::slotted([slot="footer"]){background-color:#fff;border-radius:.5em;padding-inline:1em;line-height:4em}:host([title-hidden]){padding-bottom:var(--mdd-section-container-padding-bottom, 0)}}', Mt = new CSSStyleSheet();
-Mt.replaceSync(fe);
-class me extends HTMLElement {
+customElements.get("px-mdd") || customElements.define("px-mdd", me);
+const fe = ':host{flex-basis:25%}@media screen and (max-width: 47.9375rem){:host{width:100%;flex-basis:100%}#section-wrapper{background-color:#fff;border-radius:8px;padding-inline:16px}::slotted(px-mdd-section-item){border-bottom:var(--px-size-border-m) solid var(--px-color-border-main-default)}::slotted(px-mdd-section-item:last-of-type){border-bottom:none}::slotted([slot="footer"]){background-color:#fff;border-radius:8px;padding-inline:16px;line-height:4rem}:host([title-hidden]){padding-bottom:var(--mdd-section-container-padding-bottom, 0)}}', Pt = new CSSStyleSheet();
+Pt.replaceSync(fe);
+class ke extends HTMLElement {
   constructor() {
     super(), this.template = `<px-vstack gap="default">
     <px-p font-size="heading-l" font-weight="title">
@@ -2207,7 +2261,7 @@ class me extends HTMLElement {
     <px-vstack gap="default" gap--mobile="default">
       <slot name="footer"></slot>
     </px-vstack>
-  </px-vstack>`, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template, this.shadowRoot.adoptedStyleSheets = [Mt];
+  </px-vstack>`, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template, this.shadowRoot.adoptedStyleSheets = [Pt];
   }
   connectedCallback() {
     this.$slotTitle || this.$title.setAttribute("hidden", ""), this.setupForId();
@@ -2215,11 +2269,11 @@ class me extends HTMLElement {
   static get observedAttributes() {
     return ["title-hidden"];
   }
-  attributeChangedCallback(t, e, o) {
-    if (e !== o)
+  attributeChangedCallback(t, e, r) {
+    if (e !== r)
       switch (t) {
         case "title-hidden":
-          this.$title.style.display = o !== null ? "none" : "block";
+          this.$title.style.display = r !== null ? "none" : "block";
           break;
       }
   }
@@ -2246,12 +2300,12 @@ class me extends HTMLElement {
     t ? this.setAttribute("hidden-title", "") : this.removeAttribute("hidden-title");
   }
 }
-customElements.get("px-mdd-section") || customElements.define("px-mdd-section", me);
-const Rt = new CSSStyleSheet(), It = new CSSStyleSheet(), Pt = new CSSStyleSheet();
-Rt.replaceSync(ht);
-It.replaceSync(ct);
-Pt.replaceSync(Z);
-const ke = [...bt, "link-m", "link-s"], ye = [
+customElements.get("px-mdd-section") || customElements.define("px-mdd-section", ke);
+const Ht = new CSSStyleSheet(), Ot = new CSSStyleSheet(), qt = new CSSStyleSheet();
+Ht.replaceSync(vt);
+Ot.replaceSync(xt);
+qt.replaceSync(K);
+const ye = [...ut, "link-m", "link-s"], lt = [
   "link",
   "no-style",
   "skip-link",
@@ -2259,9 +2313,9 @@ const ke = [...bt, "link-m", "link-s"], ye = [
   "btn-secondary",
   "btn-tertiary",
   "icon-link"
-], Ae = ["", "default", "alternative"], M = class M extends w {
+], Ae = ["", "default", "alternative"], M = class M extends $ {
   constructor() {
-    super(Rt, It, Pt), this.template = () => '<slot name="before"></slot><slot></slot><slot name="after"></slot>';
+    super(Ht, Ot, qt), this.template = () => '<slot name="before"></slot><slot></slot><slot name="after"></slot>';
     const t = document.createElement(M.nativeName);
     t.innerHTML = this.template(), this.shadowRoot.appendChild(t);
   }
@@ -2288,86 +2342,86 @@ const ke = [...bt, "link-m", "link-s"], ye = [
     ];
   }
   connectedCallback() {
-    this.$before && this.$before.localName === "px-icon" && this.configureBeforeAfterIcon(this.$before), this.$after && this.$after.localName === "px-icon" && this.configureBeforeAfterIcon(this.$after), it(this, this.$el, !1);
+    this.$before && this.$before.localName === "px-icon" && this.configureBeforeAfterIcon(this.$before), this.$after && this.$after.localName === "px-icon" && this.configureBeforeAfterIcon(this.$after), pt(this, this.$el, !1);
   }
   disconnectedCallback() {
   }
-  attributeChangedCallback(t, e, o) {
-    if (e !== o)
+  attributeChangedCallback(t, e, r) {
+    if (e !== r)
       switch (t) {
         case "disabled":
-          this.$el.toggleAttribute("aria-disabled"), o !== null && this.$el.setAttribute("aria-disabled", "true");
+          this.$el.toggleAttribute("aria-disabled"), r !== null && this.$el.setAttribute("aria-disabled", "true");
           break;
         case "variant":
-          this.updateVariant(e, o);
+          this.updateVariant(e, r);
           break;
         case "shape":
         case "shape--mobile":
         case "shape--tablet":
         case "shape--laptop":
         case "shape--desktop":
-          this.updateShape(t, o, Ae);
+          this.updateShape(t, r, Ae);
           break;
         case "extended":
         case "extended--mobile":
         case "extended--tablet":
         case "extended--laptop":
         case "extended--desktop":
-          this.updateExtended(t, o);
+          this.updateExtended(t, r);
           break;
         case "font-size":
           this.updateTypography(
             t,
             e,
-            o,
-            ke
+            r,
+            ye
           );
           break;
         case "color":
-          this.updateTypography(t, e, o, Y);
+          this.updateTypography(t, e, r, Z);
           break;
         case "font-weight":
-          this.updateTypography(t, e, o, pt);
+          this.updateTypography(t, e, r, gt);
           break;
         case "title":
-          o && (this.$el.setAttribute("title", o), this.removeAttribute("title"));
+          r && (this.$el.setAttribute("title", r), this.removeAttribute("title"));
           break;
         default:
-          super.attributeChangedCallback(t, e, o);
+          super.attributeChangedCallback(t, e, r);
           break;
       }
   }
   configureBeforeAfterIcon(t) {
-    const e = t.getAttribute("size"), o = t.getAttribute("color");
+    const e = t.getAttribute("size"), r = t.getAttribute("color");
     t.addEventListener("click", () => {
       this.$el.focus();
-    }), e || t.setAttribute("size", "xs"), o || t.setAttribute("color", "inherit");
+    }), e || t.setAttribute("size", "xs"), r || t.setAttribute("color", "inherit");
   }
   _toggleClassList(t) {
     if (t.startsWith("btn-")) {
       const e = t.split("-");
-      for (const o of e)
-        this.$el.classList.toggle(o);
+      for (const r of e)
+        this.$el.classList.toggle(r);
     } else
       this.$el.classList.toggle(t);
   }
   updateVariant(t, e) {
-    t !== null && t !== "" && t !== "link" && this._toggleClassList(t), e !== null && e !== "" && e !== "link" && this._toggleClassList(e), this.checkName(ye, e) || d(
-      `${e} is not an allowed variant value for ${this.tagName.toLowerCase()}`
+    t !== null && t !== "" && t !== "link" && this._toggleClassList(t), e !== null && e !== "" && e !== "link" && this._toggleClassList(e), this.checkName(lt, e) || d(
+      `"${e}" is not a valid variant value for ${this.tagName.toLowerCase()}. Allowed values are: "${lt.join('", "')}".`
     ), e === "icon-link" && this.$iconNotBeforeAfter.setAttribute("color", "inherit");
   }
-  updateShape(t, e, o) {
-    if (!$(o, e)) {
+  updateShape(t, e, r) {
+    if (!w(r, e)) {
       d(
-        `${e} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
+        `"${e}" is not a valid ${t} value for ${this.tagName.toLowerCase()}. Allowed values are: "${r.join('", "')}".`
       );
       return;
     }
     e !== null && e !== "" && this.$el.setAttribute(t, e);
   }
-  updateTypography(t, e, o, r) {
-    e !== null && e !== "" && e !== "default" && this.$el.classList.toggle(`${t}-${e}`), o !== null && o !== "" && o !== "default" && this.$el.classList.toggle(`${t}-${o}`), this.checkName(r, o) || d(
-      `${o} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
+  updateTypography(t, e, r, o) {
+    e !== null && e !== "" && e !== "default" && this.$el.classList.toggle(`${t}-${e}`), r !== null && r !== "" && r !== "default" && this.$el.classList.toggle(`${t}-${r}`), this.checkName(o, r) || d(
+      `"${r}" is not a valid ${t} value for ${this.tagName.toLowerCase()}. Allowed values are: "${o.join('", "')}".`
     );
   }
   updateExtended(t, e) {
@@ -2490,43 +2544,43 @@ const ke = [...bt, "link-m", "link-s"], ye = [
 M.nativeName = "a";
 let L = M;
 customElements.get("px-a") || customElements.define("px-a", L);
-var m, R, qt;
+var f, R, Dt;
 class ze extends L {
   constructor() {
     super();
     c(this, R);
-    c(this, m);
-    this.$el.classList.add("wrapper"), k(this, m, new at(
+    c(this, f);
+    this.$el.classList.add("wrapper"), k(this, f, new bt(
       this,
       this.$el,
-      () => P(this, R, qt).call(this)
+      () => j(this, R, Dt).call(this)
     ));
   }
   connectedCallback() {
-    super.connectedCallback(), n(this, m).connect();
+    super.connectedCallback(), n(this, f).connect();
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), n(this, m).disconnect();
+    super.disconnectedCallback(), n(this, f).disconnect();
   }
-  attributeChangedCallback(e, o, r) {
-    if (o !== r)
+  attributeChangedCallback(e, r, o) {
+    if (r !== o)
       switch (e) {
         case "disabled":
-          super.attributeChangedCallback(e, o, r), r !== null && n(this, m).clearInteractiveState();
+          super.attributeChangedCallback(e, r, o), o !== null && n(this, f).clearInteractiveState();
           break;
         default:
-          super.attributeChangedCallback(e, o, r);
+          super.attributeChangedCallback(e, r, o);
           break;
       }
   }
 }
-m = new WeakMap(), R = new WeakSet(), qt = function() {
+f = new WeakMap(), R = new WeakSet(), Dt = function() {
   return !this.hasAttribute("disabled") && this.$el.getAttribute("aria-disabled") !== "true";
 };
 customElements.get("px-a-wrapper") || customElements.define("px-a-wrapper", ze);
-const $e = '.mdd-section-item-action-container{display:inline-flex;align-items:center}a{text-decoration:none;color:inherit;font-size:var(--px-text-size-label-l-mobile)}a ::slotted([slot="after"]){margin-left:var(--px-spacing-2xs-mobile)}a:hover{text-decoration:underline;color:var(--px-color-text-state-hover-default)}button{background:none;border:none;padding:0;margin:0;cursor:pointer;font:inherit;color:inherit;width:100%}a,button{display:block}a:focus-visible,button:focus-visible{outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default)}@media only screen and (max-width: 47.9375em){a,button{padding:var(--px-spacing-s-mobile) 0}}@media only screen and (min-width: 48em){a{display:inline-block;font-size:var(--px-text-size-label-l-tablet)}a ::slotted([slot="after"]){margin-left:var(--px-spacing-2xs-tablet)}a:focus-visible,button:focus-visible{outline-offset:var(--px-focus-offset-tablet);outline-width:var(--px-focus-outline-tablet)}}@media only screen and (min-width: 64.0625em){a{font-size:var(--px-text-size-label-l-laptop)}a ::slotted([slot="after"]){margin-left:var(--px-spacing-2xs-laptop)}a:focus-visible,button:focus-visible{outline-offset:var(--px-focus-offset-laptop);outline-width:var(--px-focus-outline-laptop)}}@media only screen and (min-width: 90.0625em){a{font-size:var(--px-text-size-label-l-desktop)}a ::slotted([slot="after"]){margin-left:var(--px-spacing-2xs-desktop)}a:focus-visible,button:focus-visible{outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}}', Dt = new CSSStyleSheet();
-Dt.replaceSync($e);
-class we extends HTMLElement {
+const we = '.mdd-section-item-action-container{display:inline-flex;align-items:center}a{text-decoration:none;color:inherit;font-size:var(--px-text-size-label-l-mobile)}a ::slotted([slot="after"]){margin-left:var(--px-spacing-2xs-mobile)}a:hover{text-decoration:underline;color:var(--px-color-text-state-hover-default)}button{background:none;border:none;padding:0;margin:0;cursor:pointer;font:inherit;color:inherit;width:100%}a,button{display:block}a:focus-visible,button:focus-visible{outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default)}@media screen and (max-width: 47.9375rem){a,button{padding:var(--px-spacing-s-mobile) 0}}@media screen and (min-width: 48rem){a{display:inline-block;font-size:var(--px-text-size-label-l-tablet)}a ::slotted([slot="after"]){margin-left:var(--px-spacing-2xs-tablet)}a:focus-visible,button:focus-visible{outline-offset:var(--px-focus-offset-tablet);outline-width:var(--px-focus-outline-tablet)}}@media screen and (min-width: 64.0625rem){a{font-size:var(--px-text-size-label-l-laptop)}a ::slotted([slot="after"]){margin-left:var(--px-spacing-2xs-laptop)}a:focus-visible,button:focus-visible{outline-offset:var(--px-focus-offset-laptop);outline-width:var(--px-focus-outline-laptop)}}@media screen and (min-width: 90.0625rem){a{font-size:var(--px-text-size-label-l-desktop)}a ::slotted([slot="after"]){margin-left:var(--px-spacing-2xs-desktop)}a:focus-visible,button:focus-visible{outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}}', Nt = new CSSStyleSheet();
+Nt.replaceSync(we);
+class $e extends HTMLElement {
   constructor() {
     var t;
     super(), this.template = `
@@ -2537,20 +2591,20 @@ class we extends HTMLElement {
       </span>
       <px-spacer></px-spacer>
       <px-icon name="chevron_right" from="lavender"></px-icon>
-    </px-hstack>`, this.attachShadow({ mode: "open" }), this.shadowRoot.adoptedStyleSheets = [Dt], this.internals = (t = this.attachInternals) == null ? void 0 : t.call(this), this.role = "listitem", this.internals && (this.internals.role = "listitem");
+    </px-hstack>`, this.attachShadow({ mode: "open" }), this.shadowRoot.adoptedStyleSheets = [Nt], this.internals = (t = this.attachInternals) == null ? void 0 : t.call(this), this.internals && (this.internals.role = "listitem");
   }
   static get observedAttributes() {
     return ["href", "for"];
   }
   // ... existing code ...
-  attributeChangedCallback(t, e, o) {
-    this.updateView(t, o);
+  attributeChangedCallback(t, e, r) {
+    this.updateView(t, r);
   }
   updateView(t, e) {
     t === "href" && this.$link ? this.$link.href = e : t === "href" && !this.$link && e ? (this.shadowRoot.innerHTML = `<a href="${e}">${this.template}</a>`, this.shadowRoot.firstElementChild.setAttribute("tabindex", "0"), this.$arrowIcon.style.display = "none") : t === "for" && !this.$button && e && (this.shadowRoot.innerHTML = `<button>${this.template}</button>`, this.shadowRoot.firstElementChild.setAttribute("tabindex", "0"));
   }
   connectedCallback() {
-    this.hasAttribute("href") ? (this.updateView("href", this.href), this.$link.href = this.href) : this.hasAttribute("for") && (this.updateView("for", this.getAttribute("for")), this.addEventListener("click", this.handleClick)), this.$after && this.$after.localName === "px-icon" && this.configureAfterIcon(this.$after), this.$link && (this.$arrowIcon.style.display = "none");
+    this.role = "listitem", this.hasAttribute("href") ? (this.updateView("href", this.href), this.$link.href = this.href) : this.hasAttribute("for") && (this.updateView("for", this.getAttribute("for")), this.addEventListener("click", this.handleClick)), this.$after && this.$after.localName === "px-icon" && this.configureAfterIcon(this.$after), this.$link && (this.$arrowIcon.style.display = "none");
   }
   handleClick() {
     const t = new CustomEvent("section-item-click", {
@@ -2586,9 +2640,9 @@ class we extends HTMLElement {
     );
   }
 }
-customElements.get("px-mdd-section-item") || customElements.define("px-mdd-section-item", we);
+customElements.get("px-mdd-section-item") || customElements.define("px-mdd-section-item", $e);
 export {
-  me as MddSection,
-  we as MddSectionItem,
-  ve as MegaDropDown
+  ke as MddSection,
+  $e as MddSectionItem,
+  me as MegaDropDown
 };