@w2p-ui/kit 0.1.25 → 0.1.26

package/fesm2022/w2p-ui-kit-components-button.mjs

@@ -10,11 +10,11 @@ class W2pButton {
         return `button--${this.variant()}`;
     }, ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: W2pButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.18", type: W2pButton, isStandalone: true, selector: "w2p-button", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClick: "onClick" }, ngImport: i0, template: "<button [disabled]=\"disabled()\" [class]=\"'button ' + classes()\" (click)=\"onClick.emit()\">\n  <div class=\"button__icon\">\n    <ng-content select=\"[icon]\"></ng-content>\n  </div>\n\n  <div class=\"button__separator\"></div>\n\n  <div class=\"button__text\">\n    <p><ng-content select=\"[label]\"></ng-content></p>\n    <span> <ng-content select=\"[description]\"></ng-content>\n    </span>\n  </div>\n\n  <div class=\"button__action\">\n    <div class=\"button__action-icon\">\n      <w2p-ui-icon-nav-arrow></w2p-ui-icon-nav-arrow>\n    </div>\n  </div>\n</button>", styles: ["@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Regular.ttf) format(\"truetype\");font-weight:400;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Medium.ttf) format(\"truetype\");font-weight:500;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-SemiBold.ttf) format(\"truetype\");font-weight:600;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Bold.ttf) format(\"truetype\");font-weight:700;font-style:normal}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:100;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Light.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:400;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Regular.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:500;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Medium.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:600;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Semibold.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:700;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Bold.otf) format(\"opentype\")}:host{--w2p-ui-button-width: 20.5rem}.button{display:flex;justify-content:space-between;width:var(--w2p-ui-button-width);padding:var(--spasing-fractional-35, .875rem) var(--Spasing-4, 1rem);align-items:center;gap:var(--Spasing-3, .75rem);background:var(--bg-color);border:1px solid var(--border-color);border-radius:var(--Border-radius-3, .75rem)}.button__icon{color:var(--icon-bg-color);--w2p-ui-icon-size: 1.25rem;width:1.25rem;height:1.25rem}.button__separator{width:1px;height:1.5rem;background:var(--separator-color)}.button__text{display:flex;flex-direction:column;align-items:flex-start;gap:var(--Spasing-2, .5rem);flex:1 0 0}.button__text p{color:var(--label-color);text-box-trim:trim-both;text-box-edge:cap alphabetic;text-box:trim-both cap alphabetic;margin:0;font-family:SF Pro Display;font-size:1.125rem;font-style:normal;font-weight:500;line-height:normal}.button__text span{color:var(--description-color);text-box-trim:trim-both;text-box-edge:cap alphabetic;text-box:trim-both cap alphabetic;margin:0;font-family:SF Pro Display;font-size:.875rem;font-style:normal;font-weight:400;line-height:normal;letter-spacing:.0125rem}.button__action{display:flex;width:1.25rem;height:1.25rem;padding:var(--spasing-fractional-05, .125rem);flex-direction:column;justify-content:center;align-items:center;gap:var(--Spasing-0, 0);flex-shrink:0;aspect-ratio:1/1;background:var(--action-icon-background);border:var(--action-icon-border);border-radius:var(--action-icon-radius);color:var(--action-icon-color)}.button__action w2p-ui-icon-nav-arrow{display:contents;--w2p-ui-icon-size: .75rem}.button__action-icon{display:contents}\n", ".button{--action-icon-radius: var(--Border-radius-999, 62.4375rem)}.button--primary{--bg-color: var(--Brand-Primary-Default, #f3400d);--label-color: var(--White-100, #fff);--description-color: var(--Base-Inverse-80, rgba(255, 255, 255, .8));--border-color: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--icon-bg-color: var(--Base-Inverse-80, rgba(255, 255, 255, .8));--action-icon-color: var(--Base-Inverse-70, rgba(255, 255, 255, .7));--action-icon-radius: var(--Border-radius-999, 62.4375rem);--action-icon-border: .5px solid var(--Base-Inverse-20, rgba(255, 255, 255, .2));--action-icon-background: var(--Base-Inverse-20, rgba(255, 255, 255, .2));--separator-color: var(--Base-Inverse-20, rgba(255, 255, 255, .2))}@media(hover:hover){.button--primary:hover{--bg-color: linear-gradient( 0deg, var(--Brand-Primary-90, rgba(243, 64, 13, .9)) 0%, var(--Brand-Primary-90, rgba(243, 64, 13, .9)) 100% ), var(--Base-Inverse-Default, #fff);--icon-bg-color: var(--Base-Inverse-95, rgba(255, 255, 255, .95));--action-icon-color: var(--Brand-Primary-90, rgba(243, 64, 13, .9));--action-icon-border: .5px solid var(--Base-Inverse-20, rgba(255, 255, 255, .2));--action-icon-background: var(--Base-Inverse-90, rgba(255, 255, 255, .9))}}.button--primary:active{--bg-color: linear-gradient( 0deg, var(--Brand-Primary-70, rgba(243, 64, 13, .7)) 0%, var(--Brand-Primary-70, rgba(243, 64, 13, .7)) 100% ), var(--Base-Base-Default, #0b0b0b);--icon-bg-color: var(--Base-Inverse-50, rgba(255, 255, 255, .5));--label-color: var(--Base-Inverse-50, rgba(255, 255, 255, .5));--description-color: var(--Base-Inverse-30, rgba(255, 255, 255, .3));--action-icon-color: var(--Brand-Primary-70, rgba(243, 64, 13, .7));--action-icon-border: .5px solid var(--Base-Inverse-5, rgba(255, 255, 255, .05));--action-icon-background: var(--Base-Inverse-50, rgba(255, 255, 255, .5))}.button--primary:disabled{--bg-color: linear-gradient( 0deg, var(--Brand-Primary-30, rgba(243, 64, 13, .3)) 0%, var(--Brand-Primary-30, rgba(243, 64, 13, .3)) 100% ), var(--Base-Base-Default, #0b0b0b);--icon-bg-color: var(--Base-Base-40, rgba(11, 11, 11, .4));--label-color: var(--Base-Base-80, rgba(11, 11, 11, .8));--description-color: var(--Base-Base-50, rgba(11, 11, 11, .5));--action-icon-color: var(--Base-Base-40, rgba(11, 11, 11, .4));--action-icon-border: none;--action-icon-background: var(--Base-Base-30, rgba(11, 11, 11, .3));--separator-color: var(--Base-Base-20, rgba(11, 11, 11, .2))}.button--neutral{--bg-color: linear-gradient( 0deg, var(--Base-Inverse-5, rgba(255, 255, 255, .05)) 0%, var(--Base-Inverse-5, rgba(255, 255, 255, .05)) 100% ), var(--Base-Base-Default, #0b0b0b);--border-color: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--label-color: var(--White-100, #fff);--description-color: var(--Base-Inverse-60, rgba(255, 255, 255, .6));--icon-bg-color: var(--Base-Inverse-80, rgba(255, 255, 255, .8));--action-icon-color: var(--Base-Inverse-70, rgba(255, 255, 255, .7));--action-icon-border: .5px solid var(--Base-Inverse-20, rgba(255, 255, 255, .2));--action-icon-background: var(--Base-Inverse-20, rgba(255, 255, 255, .2));--separator-color: var(--Base-Inverse-20, rgba(255, 255, 255, .2))}@media(hover:hover){.button--neutral:hover{--bg-color: linear-gradient( 0deg, var(--Base-Inverse-10, rgba(255, 255, 255, .1)) 0%, var(--Base-Inverse-10, rgba(255, 255, 255, .1)) 100% ), var(--Base-Base-Default, #0b0b0b);--icon-bg-color: var(--Base-Inverse-80, rgba(255, 255, 255, .8));--action-icon-color: var(--Base-Base-Default, #0b0b0b);--action-icon-border: .5px solid var(--Base-Inverse-20, rgba(255, 255, 255, .2));--action-icon-background: var(--Base-Inverse-90, rgba(255, 255, 255, .9));--separator-color: var(--Base-Inverse-20, rgba(255, 255, 255, .2))}}.button--neutral:active{--bg-color: linear-gradient( 0deg, var(--Base-Inverse-5, rgba(255, 255, 255, .05)) 0%, var(--Base-Inverse-5, rgba(255, 255, 255, .05)) 100% ), var(--Base-Base-Default, #0b0b0b);--icon-bg-color: var(--Base-Inverse-50, rgba(255, 255, 255, .5));--label-color: var(--Base-Inverse-50, rgba(255, 255, 255, .5));--description-color: var(--Base-Inverse-30, rgba(255, 255, 255, .3));--action-icon-color: var(--Base-Base-Default, #0b0b0b);--action-icon-border: .5px solid var(--Base-Inverse-5, rgba(255, 255, 255, .05));--action-icon-background: var(--Base-Inverse-50, rgba(255, 255, 255, .5))}.button--neutral:disabled{--bg-color: linear-gradient( 0deg, var(--Base-Inverse-5, rgba(255, 255, 255, .05)) 0%, var(--Base-Inverse-5, rgba(255, 255, 255, .05)) 100% ), var(--Base-Base-Default, #0b0b0b);--icon-bg-color: var(--Base-Inverse-10, rgba(255, 255, 255, .1));--label-color: var(--Base-Inverse-10, rgba(255, 255, 255, .1));--description-color: var(--Base-Inverse-10, rgba(255, 255, 255, .1));--action-icon-color: var(--Base-Base-Default, #0b0b0b);--action-icon-border: none;--action-icon-background: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--separator-color: var(--Base-Base-20, rgba(11, 11, 11, .2))}\n"], dependencies: [{ kind: "component", type: NavArrowIconComponent, selector: "w2p-ui-icon-nav-arrow" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.18", type: W2pButton, isStandalone: true, selector: "w2p-button", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClick: "onClick" }, ngImport: i0, template: "<button [disabled]=\"disabled()\" [class]=\"'button ' + classes()\" (click)=\"onClick.emit()\">\n  <div class=\"button__icon\">\n    <ng-content select=\"[icon]\"></ng-content>\n  </div>\n\n  <div class=\"button__separator\"></div>\n\n  <div class=\"button__text\">\n    <p><ng-content select=\"[label]\"></ng-content></p>\n    <span> <ng-content select=\"[description]\"></ng-content>\n    </span>\n  </div>\n\n  <div class=\"button__action\">\n    <div class=\"button__action-icon\">\n      <w2p-ui-icon-nav-arrow></w2p-ui-icon-nav-arrow>\n    </div>\n  </div>\n</button>", styles: ["@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Regular.ttf) format(\"truetype\");font-weight:400;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Medium.ttf) format(\"truetype\");font-weight:500;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-SemiBold.ttf) format(\"truetype\");font-weight:600;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Bold.ttf) format(\"truetype\");font-weight:700;font-style:normal}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:100;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Light.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:400;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Regular.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:500;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Medium.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:600;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Semibold.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:700;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Bold.otf) format(\"opentype\")}:host{--w2p-ui-button-width: 20.5rem}.button{display:flex;justify-content:space-between;width:var(--w2p-ui-button-width);padding:var(--spasing-fractional-35, .875rem) var(--Spasing-4, 1rem);align-items:center;gap:var(--Spasing-3, .75rem);background:var(--bg-color);border:1px solid var(--border-color);border-radius:var(--Border-radius-3, .75rem)}.button__icon{color:var(--icon-bg-color);--w2p-ui-icon-size: 1.25rem;width:1.25rem;height:1.25rem}.button__separator{width:1px;height:1.5rem;background:var(--separator-color)}.button__text{display:flex;flex-direction:column;align-items:flex-start;gap:var(--Spasing-2, .5rem);flex:1 0 0}.button__text p{color:var(--label-color);text-box-trim:trim-both;text-box-edge:cap alphabetic;text-box:trim-both cap alphabetic;margin:0;font-family:SF Pro Display;font-size:1.125rem;font-style:normal;font-weight:500;line-height:normal}.button__text span{color:var(--description-color);text-box-trim:trim-both;text-box-edge:cap alphabetic;text-box:trim-both cap alphabetic;margin:0;font-family:SF Pro Display;font-size:.875rem;font-style:normal;font-weight:400;line-height:normal;letter-spacing:.0125rem}.button__action{display:flex;width:1.25rem;height:1.25rem;padding:var(--spasing-fractional-05, .125rem);flex-direction:column;justify-content:center;align-items:center;gap:var(--Spasing-0, 0);flex-shrink:0;aspect-ratio:1/1;background:var(--action-icon-background);border:var(--action-icon-border);border-radius:var(--action-icon-radius);color:var(--action-icon-color)}.button__action w2p-ui-icon-nav-arrow{display:contents;--w2p-ui-icon-size: .75rem}.button__action-icon{display:contents}\n", ".button{--action-icon-radius: var(--Border-radius-999, 62.4375rem)}.button--primary{--bg-color: var(--Brand-Primary-Default, #f3400d);--label-color: var(--White-100, #fff);--description-color: var(--Base-Inverse-80, rgba(255, 255, 255, .8));--border-color: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--icon-bg-color: var(--Base-Inverse-80, rgba(255, 255, 255, .8));--action-icon-color: var(--Base-Inverse-70, rgba(255, 255, 255, .7));--action-icon-radius: var(--Border-radius-999, 62.4375rem);--action-icon-border: .5px solid var(--Base-Inverse-20, rgba(255, 255, 255, .2));--action-icon-background: var(--Base-Inverse-20, rgba(255, 255, 255, .2));--separator-color: var(--Base-Inverse-20, rgba(255, 255, 255, .2))}@media(hover:hover){.button--primary:hover{--bg-color: linear-gradient( 0deg, var(--Brand-Primary-90, rgba(243, 64, 13, .9)) 0%, var(--Brand-Primary-90, rgba(243, 64, 13, .9)) 100% ), var(--Base-Inverse-Default, #fff);--icon-bg-color: var(--Base-Inverse-95, rgba(255, 255, 255, .95));--action-icon-color: var(--Brand-Primary-90, rgba(243, 64, 13, .9));--action-icon-border: .5px solid var(--Base-Inverse-20, rgba(255, 255, 255, .2));--action-icon-background: var(--Base-Inverse-90, rgba(255, 255, 255, .9))}}.button--primary:active{--bg-color: linear-gradient( 0deg, var(--Brand-Primary-70, rgba(243, 64, 13, .7)) 0%, var(--Brand-Primary-70, rgba(243, 64, 13, .7)) 100% ), var(--Base-Base-Default, #0b0b0b);--icon-bg-color: var(--Base-Inverse-50, rgba(255, 255, 255, .5));--label-color: var(--Base-Inverse-50, rgba(255, 255, 255, .5));--description-color: var(--Base-Inverse-30, rgba(255, 255, 255, .3));--action-icon-color: var(--Brand-Primary-70, rgba(243, 64, 13, .7));--action-icon-border: .5px solid var(--Base-Inverse-5, rgba(255, 255, 255, .05));--action-icon-background: var(--Base-Inverse-50, rgba(255, 255, 255, .5))}.button--primary:disabled{--bg-color: linear-gradient( 0deg, var(--Brand-Primary-30, rgba(243, 64, 13, .3)) 0%, var(--Brand-Primary-30, rgba(243, 64, 13, .3)) 100% ), var(--Base-Base-Default, #0b0b0b);--icon-bg-color: var(--Base-Base-40, rgba(11, 11, 11, .4));--label-color: var(--Base-Base-80, rgba(11, 11, 11, .8));--description-color: var(--Base-Base-50, rgba(11, 11, 11, .5));--action-icon-color: var(--Base-Base-40, rgba(11, 11, 11, .4));--action-icon-border: none;--action-icon-background: var(--Base-Base-30, rgba(11, 11, 11, .3));--separator-color: var(--Base-Base-20, rgba(11, 11, 11, .2))}.button--neutral{--bg-color: linear-gradient( 0deg, var(--Base-Inverse-5, rgba(255, 255, 255, .05)) 0%, var(--Base-Inverse-5, rgba(255, 255, 255, .05)) 100% ), var(--Base-Base-Default, #0b0b0b);--border-color: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--label-color: var(--White-100, #fff);--description-color: var(--Base-Inverse-60, rgba(255, 255, 255, .6));--icon-bg-color: var(--Base-Inverse-80, rgba(255, 255, 255, .8));--action-icon-color: var(--Base-Inverse-70, rgba(255, 255, 255, .7));--action-icon-border: .5px solid var(--Base-Inverse-5, rgba(255, 255, 255, .05));--action-icon-background: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--separator-color: var(--Base-Inverse-20, rgba(255, 255, 255, .2))}@media(hover:hover){.button--neutral:hover{--bg-color: linear-gradient( 0deg, var(--Base-Inverse-10, rgba(255, 255, 255, .1)) 0%, var(--Base-Inverse-10, rgba(255, 255, 255, .1)) 100% ), var(--Base-Base-Default, #0b0b0b);--icon-bg-color: var(--Base-Inverse-80, rgba(255, 255, 255, .8));--action-icon-color: var(--Base-Base-Default, #0b0b0b);--action-icon-border: .5px solid var(--Base-Inverse-20, rgba(255, 255, 255, .2));--action-icon-background: var(--Base-Inverse-90, rgba(255, 255, 255, .9));--separator-color: var(--Base-Inverse-20, rgba(255, 255, 255, .2))}}.button--neutral:active{--bg-color: linear-gradient( 0deg, var(--Base-Inverse-5, rgba(255, 255, 255, .05)) 0%, var(--Base-Inverse-5, rgba(255, 255, 255, .05)) 100% ), var(--Base-Base-Default, #0b0b0b);--icon-bg-color: var(--Base-Inverse-50, rgba(255, 255, 255, .5));--label-color: var(--Base-Inverse-50, rgba(255, 255, 255, .5));--description-color: var(--Base-Inverse-30, rgba(255, 255, 255, .3));--action-icon-color: var(--Base-Base-Default, #0b0b0b);--action-icon-border: .5px solid var(--Base-Inverse-5, rgba(255, 255, 255, .05));--action-icon-background: var(--Base-Inverse-50, rgba(255, 255, 255, .5))}.button--neutral:disabled{--bg-color: linear-gradient( 0deg, var(--Base-Inverse-5, rgba(255, 255, 255, .05)) 0%, var(--Base-Inverse-5, rgba(255, 255, 255, .05)) 100% ), var(--Base-Base-Default, #0b0b0b);--icon-bg-color: var(--Base-Inverse-10, rgba(255, 255, 255, .1));--label-color: var(--Base-Inverse-10, rgba(255, 255, 255, .1));--description-color: var(--Base-Inverse-10, rgba(255, 255, 255, .1));--action-icon-color: var(--Base-Base-Default, #0b0b0b);--action-icon-border: none;--action-icon-background: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--separator-color: var(--Base-Base-20, rgba(11, 11, 11, .2))}\n"], dependencies: [{ kind: "component", type: NavArrowIconComponent, selector: "w2p-ui-icon-nav-arrow" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: W2pButton, decorators: [{
             type: Component,
-            args: [{ selector: 'w2p-button', imports: [NavArrowIconComponent], template: "<button [disabled]=\"disabled()\" [class]=\"'button ' + classes()\" (click)=\"onClick.emit()\">\n  <div class=\"button__icon\">\n    <ng-content select=\"[icon]\"></ng-content>\n  </div>\n\n  <div class=\"button__separator\"></div>\n\n  <div class=\"button__text\">\n    <p><ng-content select=\"[label]\"></ng-content></p>\n    <span> <ng-content select=\"[description]\"></ng-content>\n    </span>\n  </div>\n\n  <div class=\"button__action\">\n    <div class=\"button__action-icon\">\n      <w2p-ui-icon-nav-arrow></w2p-ui-icon-nav-arrow>\n    </div>\n  </div>\n</button>", styles: ["@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Regular.ttf) format(\"truetype\");font-weight:400;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Medium.ttf) format(\"truetype\");font-weight:500;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-SemiBold.ttf) format(\"truetype\");font-weight:600;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Bold.ttf) format(\"truetype\");font-weight:700;font-style:normal}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:100;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Light.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:400;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Regular.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:500;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Medium.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:600;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Semibold.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:700;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Bold.otf) format(\"opentype\")}:host{--w2p-ui-button-width: 20.5rem}.button{display:flex;justify-content:space-between;width:var(--w2p-ui-button-width);padding:var(--spasing-fractional-35, .875rem) var(--Spasing-4, 1rem);align-items:center;gap:var(--Spasing-3, .75rem);background:var(--bg-color);border:1px solid var(--border-color);border-radius:var(--Border-radius-3, .75rem)}.button__icon{color:var(--icon-bg-color);--w2p-ui-icon-size: 1.25rem;width:1.25rem;height:1.25rem}.button__separator{width:1px;height:1.5rem;background:var(--separator-color)}.button__text{display:flex;flex-direction:column;align-items:flex-start;gap:var(--Spasing-2, .5rem);flex:1 0 0}.button__text p{color:var(--label-color);text-box-trim:trim-both;text-box-edge:cap alphabetic;text-box:trim-both cap alphabetic;margin:0;font-family:SF Pro Display;font-size:1.125rem;font-style:normal;font-weight:500;line-height:normal}.button__text span{color:var(--description-color);text-box-trim:trim-both;text-box-edge:cap alphabetic;text-box:trim-both cap alphabetic;margin:0;font-family:SF Pro Display;font-size:.875rem;font-style:normal;font-weight:400;line-height:normal;letter-spacing:.0125rem}.button__action{display:flex;width:1.25rem;height:1.25rem;padding:var(--spasing-fractional-05, .125rem);flex-direction:column;justify-content:center;align-items:center;gap:var(--Spasing-0, 0);flex-shrink:0;aspect-ratio:1/1;background:var(--action-icon-background);border:var(--action-icon-border);border-radius:var(--action-icon-radius);color:var(--action-icon-color)}.button__action w2p-ui-icon-nav-arrow{display:contents;--w2p-ui-icon-size: .75rem}.button__action-icon{display:contents}\n", ".button{--action-icon-radius: var(--Border-radius-999, 62.4375rem)}.button--primary{--bg-color: var(--Brand-Primary-Default, #f3400d);--label-color: var(--White-100, #fff);--description-color: var(--Base-Inverse-80, rgba(255, 255, 255, .8));--border-color: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--icon-bg-color: var(--Base-Inverse-80, rgba(255, 255, 255, .8));--action-icon-color: var(--Base-Inverse-70, rgba(255, 255, 255, .7));--action-icon-radius: var(--Border-radius-999, 62.4375rem);--action-icon-border: .5px solid var(--Base-Inverse-20, rgba(255, 255, 255, .2));--action-icon-background: var(--Base-Inverse-20, rgba(255, 255, 255, .2));--separator-color: var(--Base-Inverse-20, rgba(255, 255, 255, .2))}@media(hover:hover){.button--primary:hover{--bg-color: linear-gradient( 0deg, var(--Brand-Primary-90, rgba(243, 64, 13, .9)) 0%, var(--Brand-Primary-90, rgba(243, 64, 13, .9)) 100% ), var(--Base-Inverse-Default, #fff);--icon-bg-color: var(--Base-Inverse-95, rgba(255, 255, 255, .95));--action-icon-color: var(--Brand-Primary-90, rgba(243, 64, 13, .9));--action-icon-border: .5px solid var(--Base-Inverse-20, rgba(255, 255, 255, .2));--action-icon-background: var(--Base-Inverse-90, rgba(255, 255, 255, .9))}}.button--primary:active{--bg-color: linear-gradient( 0deg, var(--Brand-Primary-70, rgba(243, 64, 13, .7)) 0%, var(--Brand-Primary-70, rgba(243, 64, 13, .7)) 100% ), var(--Base-Base-Default, #0b0b0b);--icon-bg-color: var(--Base-Inverse-50, rgba(255, 255, 255, .5));--label-color: var(--Base-Inverse-50, rgba(255, 255, 255, .5));--description-color: var(--Base-Inverse-30, rgba(255, 255, 255, .3));--action-icon-color: var(--Brand-Primary-70, rgba(243, 64, 13, .7));--action-icon-border: .5px solid var(--Base-Inverse-5, rgba(255, 255, 255, .05));--action-icon-background: var(--Base-Inverse-50, rgba(255, 255, 255, .5))}.button--primary:disabled{--bg-color: linear-gradient( 0deg, var(--Brand-Primary-30, rgba(243, 64, 13, .3)) 0%, var(--Brand-Primary-30, rgba(243, 64, 13, .3)) 100% ), var(--Base-Base-Default, #0b0b0b);--icon-bg-color: var(--Base-Base-40, rgba(11, 11, 11, .4));--label-color: var(--Base-Base-80, rgba(11, 11, 11, .8));--description-color: var(--Base-Base-50, rgba(11, 11, 11, .5));--action-icon-color: var(--Base-Base-40, rgba(11, 11, 11, .4));--action-icon-border: none;--action-icon-background: var(--Base-Base-30, rgba(11, 11, 11, .3));--separator-color: var(--Base-Base-20, rgba(11, 11, 11, .2))}.button--neutral{--bg-color: linear-gradient( 0deg, var(--Base-Inverse-5, rgba(255, 255, 255, .05)) 0%, var(--Base-Inverse-5, rgba(255, 255, 255, .05)) 100% ), var(--Base-Base-Default, #0b0b0b);--border-color: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--label-color: var(--White-100, #fff);--description-color: var(--Base-Inverse-60, rgba(255, 255, 255, .6));--icon-bg-color: var(--Base-Inverse-80, rgba(255, 255, 255, .8));--action-icon-color: var(--Base-Inverse-70, rgba(255, 255, 255, .7));--action-icon-border: .5px solid var(--Base-Inverse-20, rgba(255, 255, 255, .2));--action-icon-background: var(--Base-Inverse-20, rgba(255, 255, 255, .2));--separator-color: var(--Base-Inverse-20, rgba(255, 255, 255, .2))}@media(hover:hover){.button--neutral:hover{--bg-color: linear-gradient( 0deg, var(--Base-Inverse-10, rgba(255, 255, 255, .1)) 0%, var(--Base-Inverse-10, rgba(255, 255, 255, .1)) 100% ), var(--Base-Base-Default, #0b0b0b);--icon-bg-color: var(--Base-Inverse-80, rgba(255, 255, 255, .8));--action-icon-color: var(--Base-Base-Default, #0b0b0b);--action-icon-border: .5px solid var(--Base-Inverse-20, rgba(255, 255, 255, .2));--action-icon-background: var(--Base-Inverse-90, rgba(255, 255, 255, .9));--separator-color: var(--Base-Inverse-20, rgba(255, 255, 255, .2))}}.button--neutral:active{--bg-color: linear-gradient( 0deg, var(--Base-Inverse-5, rgba(255, 255, 255, .05)) 0%, var(--Base-Inverse-5, rgba(255, 255, 255, .05)) 100% ), var(--Base-Base-Default, #0b0b0b);--icon-bg-color: var(--Base-Inverse-50, rgba(255, 255, 255, .5));--label-color: var(--Base-Inverse-50, rgba(255, 255, 255, .5));--description-color: var(--Base-Inverse-30, rgba(255, 255, 255, .3));--action-icon-color: var(--Base-Base-Default, #0b0b0b);--action-icon-border: .5px solid var(--Base-Inverse-5, rgba(255, 255, 255, .05));--action-icon-background: var(--Base-Inverse-50, rgba(255, 255, 255, .5))}.button--neutral:disabled{--bg-color: linear-gradient( 0deg, var(--Base-Inverse-5, rgba(255, 255, 255, .05)) 0%, var(--Base-Inverse-5, rgba(255, 255, 255, .05)) 100% ), var(--Base-Base-Default, #0b0b0b);--icon-bg-color: var(--Base-Inverse-10, rgba(255, 255, 255, .1));--label-color: var(--Base-Inverse-10, rgba(255, 255, 255, .1));--description-color: var(--Base-Inverse-10, rgba(255, 255, 255, .1));--action-icon-color: var(--Base-Base-Default, #0b0b0b);--action-icon-border: none;--action-icon-background: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--separator-color: var(--Base-Base-20, rgba(11, 11, 11, .2))}\n"] }]
+            args: [{ selector: 'w2p-button', imports: [NavArrowIconComponent], template: "<button [disabled]=\"disabled()\" [class]=\"'button ' + classes()\" (click)=\"onClick.emit()\">\n  <div class=\"button__icon\">\n    <ng-content select=\"[icon]\"></ng-content>\n  </div>\n\n  <div class=\"button__separator\"></div>\n\n  <div class=\"button__text\">\n    <p><ng-content select=\"[label]\"></ng-content></p>\n    <span> <ng-content select=\"[description]\"></ng-content>\n    </span>\n  </div>\n\n  <div class=\"button__action\">\n    <div class=\"button__action-icon\">\n      <w2p-ui-icon-nav-arrow></w2p-ui-icon-nav-arrow>\n    </div>\n  </div>\n</button>", styles: ["@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Regular.ttf) format(\"truetype\");font-weight:400;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Medium.ttf) format(\"truetype\");font-weight:500;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-SemiBold.ttf) format(\"truetype\");font-weight:600;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Bold.ttf) format(\"truetype\");font-weight:700;font-style:normal}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:100;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Light.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:400;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Regular.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:500;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Medium.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:600;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Semibold.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:700;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Bold.otf) format(\"opentype\")}:host{--w2p-ui-button-width: 20.5rem}.button{display:flex;justify-content:space-between;width:var(--w2p-ui-button-width);padding:var(--spasing-fractional-35, .875rem) var(--Spasing-4, 1rem);align-items:center;gap:var(--Spasing-3, .75rem);background:var(--bg-color);border:1px solid var(--border-color);border-radius:var(--Border-radius-3, .75rem)}.button__icon{color:var(--icon-bg-color);--w2p-ui-icon-size: 1.25rem;width:1.25rem;height:1.25rem}.button__separator{width:1px;height:1.5rem;background:var(--separator-color)}.button__text{display:flex;flex-direction:column;align-items:flex-start;gap:var(--Spasing-2, .5rem);flex:1 0 0}.button__text p{color:var(--label-color);text-box-trim:trim-both;text-box-edge:cap alphabetic;text-box:trim-both cap alphabetic;margin:0;font-family:SF Pro Display;font-size:1.125rem;font-style:normal;font-weight:500;line-height:normal}.button__text span{color:var(--description-color);text-box-trim:trim-both;text-box-edge:cap alphabetic;text-box:trim-both cap alphabetic;margin:0;font-family:SF Pro Display;font-size:.875rem;font-style:normal;font-weight:400;line-height:normal;letter-spacing:.0125rem}.button__action{display:flex;width:1.25rem;height:1.25rem;padding:var(--spasing-fractional-05, .125rem);flex-direction:column;justify-content:center;align-items:center;gap:var(--Spasing-0, 0);flex-shrink:0;aspect-ratio:1/1;background:var(--action-icon-background);border:var(--action-icon-border);border-radius:var(--action-icon-radius);color:var(--action-icon-color)}.button__action w2p-ui-icon-nav-arrow{display:contents;--w2p-ui-icon-size: .75rem}.button__action-icon{display:contents}\n", ".button{--action-icon-radius: var(--Border-radius-999, 62.4375rem)}.button--primary{--bg-color: var(--Brand-Primary-Default, #f3400d);--label-color: var(--White-100, #fff);--description-color: var(--Base-Inverse-80, rgba(255, 255, 255, .8));--border-color: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--icon-bg-color: var(--Base-Inverse-80, rgba(255, 255, 255, .8));--action-icon-color: var(--Base-Inverse-70, rgba(255, 255, 255, .7));--action-icon-radius: var(--Border-radius-999, 62.4375rem);--action-icon-border: .5px solid var(--Base-Inverse-20, rgba(255, 255, 255, .2));--action-icon-background: var(--Base-Inverse-20, rgba(255, 255, 255, .2));--separator-color: var(--Base-Inverse-20, rgba(255, 255, 255, .2))}@media(hover:hover){.button--primary:hover{--bg-color: linear-gradient( 0deg, var(--Brand-Primary-90, rgba(243, 64, 13, .9)) 0%, var(--Brand-Primary-90, rgba(243, 64, 13, .9)) 100% ), var(--Base-Inverse-Default, #fff);--icon-bg-color: var(--Base-Inverse-95, rgba(255, 255, 255, .95));--action-icon-color: var(--Brand-Primary-90, rgba(243, 64, 13, .9));--action-icon-border: .5px solid var(--Base-Inverse-20, rgba(255, 255, 255, .2));--action-icon-background: var(--Base-Inverse-90, rgba(255, 255, 255, .9))}}.button--primary:active{--bg-color: linear-gradient( 0deg, var(--Brand-Primary-70, rgba(243, 64, 13, .7)) 0%, var(--Brand-Primary-70, rgba(243, 64, 13, .7)) 100% ), var(--Base-Base-Default, #0b0b0b);--icon-bg-color: var(--Base-Inverse-50, rgba(255, 255, 255, .5));--label-color: var(--Base-Inverse-50, rgba(255, 255, 255, .5));--description-color: var(--Base-Inverse-30, rgba(255, 255, 255, .3));--action-icon-color: var(--Brand-Primary-70, rgba(243, 64, 13, .7));--action-icon-border: .5px solid var(--Base-Inverse-5, rgba(255, 255, 255, .05));--action-icon-background: var(--Base-Inverse-50, rgba(255, 255, 255, .5))}.button--primary:disabled{--bg-color: linear-gradient( 0deg, var(--Brand-Primary-30, rgba(243, 64, 13, .3)) 0%, var(--Brand-Primary-30, rgba(243, 64, 13, .3)) 100% ), var(--Base-Base-Default, #0b0b0b);--icon-bg-color: var(--Base-Base-40, rgba(11, 11, 11, .4));--label-color: var(--Base-Base-80, rgba(11, 11, 11, .8));--description-color: var(--Base-Base-50, rgba(11, 11, 11, .5));--action-icon-color: var(--Base-Base-40, rgba(11, 11, 11, .4));--action-icon-border: none;--action-icon-background: var(--Base-Base-30, rgba(11, 11, 11, .3));--separator-color: var(--Base-Base-20, rgba(11, 11, 11, .2))}.button--neutral{--bg-color: linear-gradient( 0deg, var(--Base-Inverse-5, rgba(255, 255, 255, .05)) 0%, var(--Base-Inverse-5, rgba(255, 255, 255, .05)) 100% ), var(--Base-Base-Default, #0b0b0b);--border-color: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--label-color: var(--White-100, #fff);--description-color: var(--Base-Inverse-60, rgba(255, 255, 255, .6));--icon-bg-color: var(--Base-Inverse-80, rgba(255, 255, 255, .8));--action-icon-color: var(--Base-Inverse-70, rgba(255, 255, 255, .7));--action-icon-border: .5px solid var(--Base-Inverse-5, rgba(255, 255, 255, .05));--action-icon-background: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--separator-color: var(--Base-Inverse-20, rgba(255, 255, 255, .2))}@media(hover:hover){.button--neutral:hover{--bg-color: linear-gradient( 0deg, var(--Base-Inverse-10, rgba(255, 255, 255, .1)) 0%, var(--Base-Inverse-10, rgba(255, 255, 255, .1)) 100% ), var(--Base-Base-Default, #0b0b0b);--icon-bg-color: var(--Base-Inverse-80, rgba(255, 255, 255, .8));--action-icon-color: var(--Base-Base-Default, #0b0b0b);--action-icon-border: .5px solid var(--Base-Inverse-20, rgba(255, 255, 255, .2));--action-icon-background: var(--Base-Inverse-90, rgba(255, 255, 255, .9));--separator-color: var(--Base-Inverse-20, rgba(255, 255, 255, .2))}}.button--neutral:active{--bg-color: linear-gradient( 0deg, var(--Base-Inverse-5, rgba(255, 255, 255, .05)) 0%, var(--Base-Inverse-5, rgba(255, 255, 255, .05)) 100% ), var(--Base-Base-Default, #0b0b0b);--icon-bg-color: var(--Base-Inverse-50, rgba(255, 255, 255, .5));--label-color: var(--Base-Inverse-50, rgba(255, 255, 255, .5));--description-color: var(--Base-Inverse-30, rgba(255, 255, 255, .3));--action-icon-color: var(--Base-Base-Default, #0b0b0b);--action-icon-border: .5px solid var(--Base-Inverse-5, rgba(255, 255, 255, .05));--action-icon-background: var(--Base-Inverse-50, rgba(255, 255, 255, .5))}.button--neutral:disabled{--bg-color: linear-gradient( 0deg, var(--Base-Inverse-5, rgba(255, 255, 255, .05)) 0%, var(--Base-Inverse-5, rgba(255, 255, 255, .05)) 100% ), var(--Base-Base-Default, #0b0b0b);--icon-bg-color: var(--Base-Inverse-10, rgba(255, 255, 255, .1));--label-color: var(--Base-Inverse-10, rgba(255, 255, 255, .1));--description-color: var(--Base-Inverse-10, rgba(255, 255, 255, .1));--action-icon-color: var(--Base-Base-Default, #0b0b0b);--action-icon-border: none;--action-icon-background: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--separator-color: var(--Base-Base-20, rgba(11, 11, 11, .2))}\n"] }]
         }], propDecorators: { onClick: [{ type: i0.Output, args: ["onClick"] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
 
 /**

package/fesm2022/w2p-ui-kit-components.mjs

@@ -12,11 +12,11 @@ class W2pButton {
         return `button--${this.variant()}`;
     }, ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: W2pButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.18", type: W2pButton, isStandalone: true, selector: "w2p-button", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClick: "onClick" }, ngImport: i0, template: "<button [disabled]=\"disabled()\" [class]=\"'button ' + classes()\" (click)=\"onClick.emit()\">\n  <div class=\"button__icon\">\n    <ng-content select=\"[icon]\"></ng-content>\n  </div>\n\n  <div class=\"button__separator\"></div>\n\n  <div class=\"button__text\">\n    <p><ng-content select=\"[label]\"></ng-content></p>\n    <span> <ng-content select=\"[description]\"></ng-content>\n    </span>\n  </div>\n\n  <div class=\"button__action\">\n    <div class=\"button__action-icon\">\n      <w2p-ui-icon-nav-arrow></w2p-ui-icon-nav-arrow>\n    </div>\n  </div>\n</button>", styles: ["@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Regular.ttf) format(\"truetype\");font-weight:400;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Medium.ttf) format(\"truetype\");font-weight:500;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-SemiBold.ttf) format(\"truetype\");font-weight:600;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Bold.ttf) format(\"truetype\");font-weight:700;font-style:normal}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:100;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Light.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:400;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Regular.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:500;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Medium.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:600;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Semibold.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:700;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Bold.otf) format(\"opentype\")}:host{--w2p-ui-button-width: 20.5rem}.button{display:flex;justify-content:space-between;width:var(--w2p-ui-button-width);padding:var(--spasing-fractional-35, .875rem) var(--Spasing-4, 1rem);align-items:center;gap:var(--Spasing-3, .75rem);background:var(--bg-color);border:1px solid var(--border-color);border-radius:var(--Border-radius-3, .75rem)}.button__icon{color:var(--icon-bg-color);--w2p-ui-icon-size: 1.25rem;width:1.25rem;height:1.25rem}.button__separator{width:1px;height:1.5rem;background:var(--separator-color)}.button__text{display:flex;flex-direction:column;align-items:flex-start;gap:var(--Spasing-2, .5rem);flex:1 0 0}.button__text p{color:var(--label-color);text-box-trim:trim-both;text-box-edge:cap alphabetic;text-box:trim-both cap alphabetic;margin:0;font-family:SF Pro Display;font-size:1.125rem;font-style:normal;font-weight:500;line-height:normal}.button__text span{color:var(--description-color);text-box-trim:trim-both;text-box-edge:cap alphabetic;text-box:trim-both cap alphabetic;margin:0;font-family:SF Pro Display;font-size:.875rem;font-style:normal;font-weight:400;line-height:normal;letter-spacing:.0125rem}.button__action{display:flex;width:1.25rem;height:1.25rem;padding:var(--spasing-fractional-05, .125rem);flex-direction:column;justify-content:center;align-items:center;gap:var(--Spasing-0, 0);flex-shrink:0;aspect-ratio:1/1;background:var(--action-icon-background);border:var(--action-icon-border);border-radius:var(--action-icon-radius);color:var(--action-icon-color)}.button__action w2p-ui-icon-nav-arrow{display:contents;--w2p-ui-icon-size: .75rem}.button__action-icon{display:contents}\n", ".button{--action-icon-radius: var(--Border-radius-999, 62.4375rem)}.button--primary{--bg-color: var(--Brand-Primary-Default, #f3400d);--label-color: var(--White-100, #fff);--description-color: var(--Base-Inverse-80, rgba(255, 255, 255, .8));--border-color: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--icon-bg-color: var(--Base-Inverse-80, rgba(255, 255, 255, .8));--action-icon-color: var(--Base-Inverse-70, rgba(255, 255, 255, .7));--action-icon-radius: var(--Border-radius-999, 62.4375rem);--action-icon-border: .5px solid var(--Base-Inverse-20, rgba(255, 255, 255, .2));--action-icon-background: var(--Base-Inverse-20, rgba(255, 255, 255, .2));--separator-color: var(--Base-Inverse-20, rgba(255, 255, 255, .2))}@media(hover:hover){.button--primary:hover{--bg-color: linear-gradient( 0deg, var(--Brand-Primary-90, rgba(243, 64, 13, .9)) 0%, var(--Brand-Primary-90, rgba(243, 64, 13, .9)) 100% ), var(--Base-Inverse-Default, #fff);--icon-bg-color: var(--Base-Inverse-95, rgba(255, 255, 255, .95));--action-icon-color: var(--Brand-Primary-90, rgba(243, 64, 13, .9));--action-icon-border: .5px solid var(--Base-Inverse-20, rgba(255, 255, 255, .2));--action-icon-background: var(--Base-Inverse-90, rgba(255, 255, 255, .9))}}.button--primary:active{--bg-color: linear-gradient( 0deg, var(--Brand-Primary-70, rgba(243, 64, 13, .7)) 0%, var(--Brand-Primary-70, rgba(243, 64, 13, .7)) 100% ), var(--Base-Base-Default, #0b0b0b);--icon-bg-color: var(--Base-Inverse-50, rgba(255, 255, 255, .5));--label-color: var(--Base-Inverse-50, rgba(255, 255, 255, .5));--description-color: var(--Base-Inverse-30, rgba(255, 255, 255, .3));--action-icon-color: var(--Brand-Primary-70, rgba(243, 64, 13, .7));--action-icon-border: .5px solid var(--Base-Inverse-5, rgba(255, 255, 255, .05));--action-icon-background: var(--Base-Inverse-50, rgba(255, 255, 255, .5))}.button--primary:disabled{--bg-color: linear-gradient( 0deg, var(--Brand-Primary-30, rgba(243, 64, 13, .3)) 0%, var(--Brand-Primary-30, rgba(243, 64, 13, .3)) 100% ), var(--Base-Base-Default, #0b0b0b);--icon-bg-color: var(--Base-Base-40, rgba(11, 11, 11, .4));--label-color: var(--Base-Base-80, rgba(11, 11, 11, .8));--description-color: var(--Base-Base-50, rgba(11, 11, 11, .5));--action-icon-color: var(--Base-Base-40, rgba(11, 11, 11, .4));--action-icon-border: none;--action-icon-background: var(--Base-Base-30, rgba(11, 11, 11, .3));--separator-color: var(--Base-Base-20, rgba(11, 11, 11, .2))}.button--neutral{--bg-color: linear-gradient( 0deg, var(--Base-Inverse-5, rgba(255, 255, 255, .05)) 0%, var(--Base-Inverse-5, rgba(255, 255, 255, .05)) 100% ), var(--Base-Base-Default, #0b0b0b);--border-color: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--label-color: var(--White-100, #fff);--description-color: var(--Base-Inverse-60, rgba(255, 255, 255, .6));--icon-bg-color: var(--Base-Inverse-80, rgba(255, 255, 255, .8));--action-icon-color: var(--Base-Inverse-70, rgba(255, 255, 255, .7));--action-icon-border: .5px solid var(--Base-Inverse-20, rgba(255, 255, 255, .2));--action-icon-background: var(--Base-Inverse-20, rgba(255, 255, 255, .2));--separator-color: var(--Base-Inverse-20, rgba(255, 255, 255, .2))}@media(hover:hover){.button--neutral:hover{--bg-color: linear-gradient( 0deg, var(--Base-Inverse-10, rgba(255, 255, 255, .1)) 0%, var(--Base-Inverse-10, rgba(255, 255, 255, .1)) 100% ), var(--Base-Base-Default, #0b0b0b);--icon-bg-color: var(--Base-Inverse-80, rgba(255, 255, 255, .8));--action-icon-color: var(--Base-Base-Default, #0b0b0b);--action-icon-border: .5px solid var(--Base-Inverse-20, rgba(255, 255, 255, .2));--action-icon-background: var(--Base-Inverse-90, rgba(255, 255, 255, .9));--separator-color: var(--Base-Inverse-20, rgba(255, 255, 255, .2))}}.button--neutral:active{--bg-color: linear-gradient( 0deg, var(--Base-Inverse-5, rgba(255, 255, 255, .05)) 0%, var(--Base-Inverse-5, rgba(255, 255, 255, .05)) 100% ), var(--Base-Base-Default, #0b0b0b);--icon-bg-color: var(--Base-Inverse-50, rgba(255, 255, 255, .5));--label-color: var(--Base-Inverse-50, rgba(255, 255, 255, .5));--description-color: var(--Base-Inverse-30, rgba(255, 255, 255, .3));--action-icon-color: var(--Base-Base-Default, #0b0b0b);--action-icon-border: .5px solid var(--Base-Inverse-5, rgba(255, 255, 255, .05));--action-icon-background: var(--Base-Inverse-50, rgba(255, 255, 255, .5))}.button--neutral:disabled{--bg-color: linear-gradient( 0deg, var(--Base-Inverse-5, rgba(255, 255, 255, .05)) 0%, var(--Base-Inverse-5, rgba(255, 255, 255, .05)) 100% ), var(--Base-Base-Default, #0b0b0b);--icon-bg-color: var(--Base-Inverse-10, rgba(255, 255, 255, .1));--label-color: var(--Base-Inverse-10, rgba(255, 255, 255, .1));--description-color: var(--Base-Inverse-10, rgba(255, 255, 255, .1));--action-icon-color: var(--Base-Base-Default, #0b0b0b);--action-icon-border: none;--action-icon-background: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--separator-color: var(--Base-Base-20, rgba(11, 11, 11, .2))}\n"], dependencies: [{ kind: "component", type: NavArrowIconComponent, selector: "w2p-ui-icon-nav-arrow" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.18", type: W2pButton, isStandalone: true, selector: "w2p-button", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClick: "onClick" }, ngImport: i0, template: "<button [disabled]=\"disabled()\" [class]=\"'button ' + classes()\" (click)=\"onClick.emit()\">\n  <div class=\"button__icon\">\n    <ng-content select=\"[icon]\"></ng-content>\n  </div>\n\n  <div class=\"button__separator\"></div>\n\n  <div class=\"button__text\">\n    <p><ng-content select=\"[label]\"></ng-content></p>\n    <span> <ng-content select=\"[description]\"></ng-content>\n    </span>\n  </div>\n\n  <div class=\"button__action\">\n    <div class=\"button__action-icon\">\n      <w2p-ui-icon-nav-arrow></w2p-ui-icon-nav-arrow>\n    </div>\n  </div>\n</button>", styles: ["@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Regular.ttf) format(\"truetype\");font-weight:400;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Medium.ttf) format(\"truetype\");font-weight:500;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-SemiBold.ttf) format(\"truetype\");font-weight:600;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Bold.ttf) format(\"truetype\");font-weight:700;font-style:normal}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:100;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Light.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:400;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Regular.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:500;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Medium.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:600;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Semibold.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:700;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Bold.otf) format(\"opentype\")}:host{--w2p-ui-button-width: 20.5rem}.button{display:flex;justify-content:space-between;width:var(--w2p-ui-button-width);padding:var(--spasing-fractional-35, .875rem) var(--Spasing-4, 1rem);align-items:center;gap:var(--Spasing-3, .75rem);background:var(--bg-color);border:1px solid var(--border-color);border-radius:var(--Border-radius-3, .75rem)}.button__icon{color:var(--icon-bg-color);--w2p-ui-icon-size: 1.25rem;width:1.25rem;height:1.25rem}.button__separator{width:1px;height:1.5rem;background:var(--separator-color)}.button__text{display:flex;flex-direction:column;align-items:flex-start;gap:var(--Spasing-2, .5rem);flex:1 0 0}.button__text p{color:var(--label-color);text-box-trim:trim-both;text-box-edge:cap alphabetic;text-box:trim-both cap alphabetic;margin:0;font-family:SF Pro Display;font-size:1.125rem;font-style:normal;font-weight:500;line-height:normal}.button__text span{color:var(--description-color);text-box-trim:trim-both;text-box-edge:cap alphabetic;text-box:trim-both cap alphabetic;margin:0;font-family:SF Pro Display;font-size:.875rem;font-style:normal;font-weight:400;line-height:normal;letter-spacing:.0125rem}.button__action{display:flex;width:1.25rem;height:1.25rem;padding:var(--spasing-fractional-05, .125rem);flex-direction:column;justify-content:center;align-items:center;gap:var(--Spasing-0, 0);flex-shrink:0;aspect-ratio:1/1;background:var(--action-icon-background);border:var(--action-icon-border);border-radius:var(--action-icon-radius);color:var(--action-icon-color)}.button__action w2p-ui-icon-nav-arrow{display:contents;--w2p-ui-icon-size: .75rem}.button__action-icon{display:contents}\n", ".button{--action-icon-radius: var(--Border-radius-999, 62.4375rem)}.button--primary{--bg-color: var(--Brand-Primary-Default, #f3400d);--label-color: var(--White-100, #fff);--description-color: var(--Base-Inverse-80, rgba(255, 255, 255, .8));--border-color: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--icon-bg-color: var(--Base-Inverse-80, rgba(255, 255, 255, .8));--action-icon-color: var(--Base-Inverse-70, rgba(255, 255, 255, .7));--action-icon-radius: var(--Border-radius-999, 62.4375rem);--action-icon-border: .5px solid var(--Base-Inverse-20, rgba(255, 255, 255, .2));--action-icon-background: var(--Base-Inverse-20, rgba(255, 255, 255, .2));--separator-color: var(--Base-Inverse-20, rgba(255, 255, 255, .2))}@media(hover:hover){.button--primary:hover{--bg-color: linear-gradient( 0deg, var(--Brand-Primary-90, rgba(243, 64, 13, .9)) 0%, var(--Brand-Primary-90, rgba(243, 64, 13, .9)) 100% ), var(--Base-Inverse-Default, #fff);--icon-bg-color: var(--Base-Inverse-95, rgba(255, 255, 255, .95));--action-icon-color: var(--Brand-Primary-90, rgba(243, 64, 13, .9));--action-icon-border: .5px solid var(--Base-Inverse-20, rgba(255, 255, 255, .2));--action-icon-background: var(--Base-Inverse-90, rgba(255, 255, 255, .9))}}.button--primary:active{--bg-color: linear-gradient( 0deg, var(--Brand-Primary-70, rgba(243, 64, 13, .7)) 0%, var(--Brand-Primary-70, rgba(243, 64, 13, .7)) 100% ), var(--Base-Base-Default, #0b0b0b);--icon-bg-color: var(--Base-Inverse-50, rgba(255, 255, 255, .5));--label-color: var(--Base-Inverse-50, rgba(255, 255, 255, .5));--description-color: var(--Base-Inverse-30, rgba(255, 255, 255, .3));--action-icon-color: var(--Brand-Primary-70, rgba(243, 64, 13, .7));--action-icon-border: .5px solid var(--Base-Inverse-5, rgba(255, 255, 255, .05));--action-icon-background: var(--Base-Inverse-50, rgba(255, 255, 255, .5))}.button--primary:disabled{--bg-color: linear-gradient( 0deg, var(--Brand-Primary-30, rgba(243, 64, 13, .3)) 0%, var(--Brand-Primary-30, rgba(243, 64, 13, .3)) 100% ), var(--Base-Base-Default, #0b0b0b);--icon-bg-color: var(--Base-Base-40, rgba(11, 11, 11, .4));--label-color: var(--Base-Base-80, rgba(11, 11, 11, .8));--description-color: var(--Base-Base-50, rgba(11, 11, 11, .5));--action-icon-color: var(--Base-Base-40, rgba(11, 11, 11, .4));--action-icon-border: none;--action-icon-background: var(--Base-Base-30, rgba(11, 11, 11, .3));--separator-color: var(--Base-Base-20, rgba(11, 11, 11, .2))}.button--neutral{--bg-color: linear-gradient( 0deg, var(--Base-Inverse-5, rgba(255, 255, 255, .05)) 0%, var(--Base-Inverse-5, rgba(255, 255, 255, .05)) 100% ), var(--Base-Base-Default, #0b0b0b);--border-color: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--label-color: var(--White-100, #fff);--description-color: var(--Base-Inverse-60, rgba(255, 255, 255, .6));--icon-bg-color: var(--Base-Inverse-80, rgba(255, 255, 255, .8));--action-icon-color: var(--Base-Inverse-70, rgba(255, 255, 255, .7));--action-icon-border: .5px solid var(--Base-Inverse-5, rgba(255, 255, 255, .05));--action-icon-background: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--separator-color: var(--Base-Inverse-20, rgba(255, 255, 255, .2))}@media(hover:hover){.button--neutral:hover{--bg-color: linear-gradient( 0deg, var(--Base-Inverse-10, rgba(255, 255, 255, .1)) 0%, var(--Base-Inverse-10, rgba(255, 255, 255, .1)) 100% ), var(--Base-Base-Default, #0b0b0b);--icon-bg-color: var(--Base-Inverse-80, rgba(255, 255, 255, .8));--action-icon-color: var(--Base-Base-Default, #0b0b0b);--action-icon-border: .5px solid var(--Base-Inverse-20, rgba(255, 255, 255, .2));--action-icon-background: var(--Base-Inverse-90, rgba(255, 255, 255, .9));--separator-color: var(--Base-Inverse-20, rgba(255, 255, 255, .2))}}.button--neutral:active{--bg-color: linear-gradient( 0deg, var(--Base-Inverse-5, rgba(255, 255, 255, .05)) 0%, var(--Base-Inverse-5, rgba(255, 255, 255, .05)) 100% ), var(--Base-Base-Default, #0b0b0b);--icon-bg-color: var(--Base-Inverse-50, rgba(255, 255, 255, .5));--label-color: var(--Base-Inverse-50, rgba(255, 255, 255, .5));--description-color: var(--Base-Inverse-30, rgba(255, 255, 255, .3));--action-icon-color: var(--Base-Base-Default, #0b0b0b);--action-icon-border: .5px solid var(--Base-Inverse-5, rgba(255, 255, 255, .05));--action-icon-background: var(--Base-Inverse-50, rgba(255, 255, 255, .5))}.button--neutral:disabled{--bg-color: linear-gradient( 0deg, var(--Base-Inverse-5, rgba(255, 255, 255, .05)) 0%, var(--Base-Inverse-5, rgba(255, 255, 255, .05)) 100% ), var(--Base-Base-Default, #0b0b0b);--icon-bg-color: var(--Base-Inverse-10, rgba(255, 255, 255, .1));--label-color: var(--Base-Inverse-10, rgba(255, 255, 255, .1));--description-color: var(--Base-Inverse-10, rgba(255, 255, 255, .1));--action-icon-color: var(--Base-Base-Default, #0b0b0b);--action-icon-border: none;--action-icon-background: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--separator-color: var(--Base-Base-20, rgba(11, 11, 11, .2))}\n"], dependencies: [{ kind: "component", type: NavArrowIconComponent, selector: "w2p-ui-icon-nav-arrow" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: W2pButton, decorators: [{
             type: Component,
-            args: [{ selector: 'w2p-button', imports: [NavArrowIconComponent], template: "<button [disabled]=\"disabled()\" [class]=\"'button ' + classes()\" (click)=\"onClick.emit()\">\n  <div class=\"button__icon\">\n    <ng-content select=\"[icon]\"></ng-content>\n  </div>\n\n  <div class=\"button__separator\"></div>\n\n  <div class=\"button__text\">\n    <p><ng-content select=\"[label]\"></ng-content></p>\n    <span> <ng-content select=\"[description]\"></ng-content>\n    </span>\n  </div>\n\n  <div class=\"button__action\">\n    <div class=\"button__action-icon\">\n      <w2p-ui-icon-nav-arrow></w2p-ui-icon-nav-arrow>\n    </div>\n  </div>\n</button>", styles: ["@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Regular.ttf) format(\"truetype\");font-weight:400;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Medium.ttf) format(\"truetype\");font-weight:500;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-SemiBold.ttf) format(\"truetype\");font-weight:600;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Bold.ttf) format(\"truetype\");font-weight:700;font-style:normal}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:100;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Light.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:400;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Regular.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:500;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Medium.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:600;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Semibold.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:700;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Bold.otf) format(\"opentype\")}:host{--w2p-ui-button-width: 20.5rem}.button{display:flex;justify-content:space-between;width:var(--w2p-ui-button-width);padding:var(--spasing-fractional-35, .875rem) var(--Spasing-4, 1rem);align-items:center;gap:var(--Spasing-3, .75rem);background:var(--bg-color);border:1px solid var(--border-color);border-radius:var(--Border-radius-3, .75rem)}.button__icon{color:var(--icon-bg-color);--w2p-ui-icon-size: 1.25rem;width:1.25rem;height:1.25rem}.button__separator{width:1px;height:1.5rem;background:var(--separator-color)}.button__text{display:flex;flex-direction:column;align-items:flex-start;gap:var(--Spasing-2, .5rem);flex:1 0 0}.button__text p{color:var(--label-color);text-box-trim:trim-both;text-box-edge:cap alphabetic;text-box:trim-both cap alphabetic;margin:0;font-family:SF Pro Display;font-size:1.125rem;font-style:normal;font-weight:500;line-height:normal}.button__text span{color:var(--description-color);text-box-trim:trim-both;text-box-edge:cap alphabetic;text-box:trim-both cap alphabetic;margin:0;font-family:SF Pro Display;font-size:.875rem;font-style:normal;font-weight:400;line-height:normal;letter-spacing:.0125rem}.button__action{display:flex;width:1.25rem;height:1.25rem;padding:var(--spasing-fractional-05, .125rem);flex-direction:column;justify-content:center;align-items:center;gap:var(--Spasing-0, 0);flex-shrink:0;aspect-ratio:1/1;background:var(--action-icon-background);border:var(--action-icon-border);border-radius:var(--action-icon-radius);color:var(--action-icon-color)}.button__action w2p-ui-icon-nav-arrow{display:contents;--w2p-ui-icon-size: .75rem}.button__action-icon{display:contents}\n", ".button{--action-icon-radius: var(--Border-radius-999, 62.4375rem)}.button--primary{--bg-color: var(--Brand-Primary-Default, #f3400d);--label-color: var(--White-100, #fff);--description-color: var(--Base-Inverse-80, rgba(255, 255, 255, .8));--border-color: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--icon-bg-color: var(--Base-Inverse-80, rgba(255, 255, 255, .8));--action-icon-color: var(--Base-Inverse-70, rgba(255, 255, 255, .7));--action-icon-radius: var(--Border-radius-999, 62.4375rem);--action-icon-border: .5px solid var(--Base-Inverse-20, rgba(255, 255, 255, .2));--action-icon-background: var(--Base-Inverse-20, rgba(255, 255, 255, .2));--separator-color: var(--Base-Inverse-20, rgba(255, 255, 255, .2))}@media(hover:hover){.button--primary:hover{--bg-color: linear-gradient( 0deg, var(--Brand-Primary-90, rgba(243, 64, 13, .9)) 0%, var(--Brand-Primary-90, rgba(243, 64, 13, .9)) 100% ), var(--Base-Inverse-Default, #fff);--icon-bg-color: var(--Base-Inverse-95, rgba(255, 255, 255, .95));--action-icon-color: var(--Brand-Primary-90, rgba(243, 64, 13, .9));--action-icon-border: .5px solid var(--Base-Inverse-20, rgba(255, 255, 255, .2));--action-icon-background: var(--Base-Inverse-90, rgba(255, 255, 255, .9))}}.button--primary:active{--bg-color: linear-gradient( 0deg, var(--Brand-Primary-70, rgba(243, 64, 13, .7)) 0%, var(--Brand-Primary-70, rgba(243, 64, 13, .7)) 100% ), var(--Base-Base-Default, #0b0b0b);--icon-bg-color: var(--Base-Inverse-50, rgba(255, 255, 255, .5));--label-color: var(--Base-Inverse-50, rgba(255, 255, 255, .5));--description-color: var(--Base-Inverse-30, rgba(255, 255, 255, .3));--action-icon-color: var(--Brand-Primary-70, rgba(243, 64, 13, .7));--action-icon-border: .5px solid var(--Base-Inverse-5, rgba(255, 255, 255, .05));--action-icon-background: var(--Base-Inverse-50, rgba(255, 255, 255, .5))}.button--primary:disabled{--bg-color: linear-gradient( 0deg, var(--Brand-Primary-30, rgba(243, 64, 13, .3)) 0%, var(--Brand-Primary-30, rgba(243, 64, 13, .3)) 100% ), var(--Base-Base-Default, #0b0b0b);--icon-bg-color: var(--Base-Base-40, rgba(11, 11, 11, .4));--label-color: var(--Base-Base-80, rgba(11, 11, 11, .8));--description-color: var(--Base-Base-50, rgba(11, 11, 11, .5));--action-icon-color: var(--Base-Base-40, rgba(11, 11, 11, .4));--action-icon-border: none;--action-icon-background: var(--Base-Base-30, rgba(11, 11, 11, .3));--separator-color: var(--Base-Base-20, rgba(11, 11, 11, .2))}.button--neutral{--bg-color: linear-gradient( 0deg, var(--Base-Inverse-5, rgba(255, 255, 255, .05)) 0%, var(--Base-Inverse-5, rgba(255, 255, 255, .05)) 100% ), var(--Base-Base-Default, #0b0b0b);--border-color: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--label-color: var(--White-100, #fff);--description-color: var(--Base-Inverse-60, rgba(255, 255, 255, .6));--icon-bg-color: var(--Base-Inverse-80, rgba(255, 255, 255, .8));--action-icon-color: var(--Base-Inverse-70, rgba(255, 255, 255, .7));--action-icon-border: .5px solid var(--Base-Inverse-20, rgba(255, 255, 255, .2));--action-icon-background: var(--Base-Inverse-20, rgba(255, 255, 255, .2));--separator-color: var(--Base-Inverse-20, rgba(255, 255, 255, .2))}@media(hover:hover){.button--neutral:hover{--bg-color: linear-gradient( 0deg, var(--Base-Inverse-10, rgba(255, 255, 255, .1)) 0%, var(--Base-Inverse-10, rgba(255, 255, 255, .1)) 100% ), var(--Base-Base-Default, #0b0b0b);--icon-bg-color: var(--Base-Inverse-80, rgba(255, 255, 255, .8));--action-icon-color: var(--Base-Base-Default, #0b0b0b);--action-icon-border: .5px solid var(--Base-Inverse-20, rgba(255, 255, 255, .2));--action-icon-background: var(--Base-Inverse-90, rgba(255, 255, 255, .9));--separator-color: var(--Base-Inverse-20, rgba(255, 255, 255, .2))}}.button--neutral:active{--bg-color: linear-gradient( 0deg, var(--Base-Inverse-5, rgba(255, 255, 255, .05)) 0%, var(--Base-Inverse-5, rgba(255, 255, 255, .05)) 100% ), var(--Base-Base-Default, #0b0b0b);--icon-bg-color: var(--Base-Inverse-50, rgba(255, 255, 255, .5));--label-color: var(--Base-Inverse-50, rgba(255, 255, 255, .5));--description-color: var(--Base-Inverse-30, rgba(255, 255, 255, .3));--action-icon-color: var(--Base-Base-Default, #0b0b0b);--action-icon-border: .5px solid var(--Base-Inverse-5, rgba(255, 255, 255, .05));--action-icon-background: var(--Base-Inverse-50, rgba(255, 255, 255, .5))}.button--neutral:disabled{--bg-color: linear-gradient( 0deg, var(--Base-Inverse-5, rgba(255, 255, 255, .05)) 0%, var(--Base-Inverse-5, rgba(255, 255, 255, .05)) 100% ), var(--Base-Base-Default, #0b0b0b);--icon-bg-color: var(--Base-Inverse-10, rgba(255, 255, 255, .1));--label-color: var(--Base-Inverse-10, rgba(255, 255, 255, .1));--description-color: var(--Base-Inverse-10, rgba(255, 255, 255, .1));--action-icon-color: var(--Base-Base-Default, #0b0b0b);--action-icon-border: none;--action-icon-background: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--separator-color: var(--Base-Base-20, rgba(11, 11, 11, .2))}\n"] }]
+            args: [{ selector: 'w2p-button', imports: [NavArrowIconComponent], template: "<button [disabled]=\"disabled()\" [class]=\"'button ' + classes()\" (click)=\"onClick.emit()\">\n  <div class=\"button__icon\">\n    <ng-content select=\"[icon]\"></ng-content>\n  </div>\n\n  <div class=\"button__separator\"></div>\n\n  <div class=\"button__text\">\n    <p><ng-content select=\"[label]\"></ng-content></p>\n    <span> <ng-content select=\"[description]\"></ng-content>\n    </span>\n  </div>\n\n  <div class=\"button__action\">\n    <div class=\"button__action-icon\">\n      <w2p-ui-icon-nav-arrow></w2p-ui-icon-nav-arrow>\n    </div>\n  </div>\n</button>", styles: ["@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Regular.ttf) format(\"truetype\");font-weight:400;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Medium.ttf) format(\"truetype\");font-weight:500;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-SemiBold.ttf) format(\"truetype\");font-weight:600;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Bold.ttf) format(\"truetype\");font-weight:700;font-style:normal}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:100;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Light.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:400;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Regular.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:500;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Medium.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:600;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Semibold.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:700;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Bold.otf) format(\"opentype\")}:host{--w2p-ui-button-width: 20.5rem}.button{display:flex;justify-content:space-between;width:var(--w2p-ui-button-width);padding:var(--spasing-fractional-35, .875rem) var(--Spasing-4, 1rem);align-items:center;gap:var(--Spasing-3, .75rem);background:var(--bg-color);border:1px solid var(--border-color);border-radius:var(--Border-radius-3, .75rem)}.button__icon{color:var(--icon-bg-color);--w2p-ui-icon-size: 1.25rem;width:1.25rem;height:1.25rem}.button__separator{width:1px;height:1.5rem;background:var(--separator-color)}.button__text{display:flex;flex-direction:column;align-items:flex-start;gap:var(--Spasing-2, .5rem);flex:1 0 0}.button__text p{color:var(--label-color);text-box-trim:trim-both;text-box-edge:cap alphabetic;text-box:trim-both cap alphabetic;margin:0;font-family:SF Pro Display;font-size:1.125rem;font-style:normal;font-weight:500;line-height:normal}.button__text span{color:var(--description-color);text-box-trim:trim-both;text-box-edge:cap alphabetic;text-box:trim-both cap alphabetic;margin:0;font-family:SF Pro Display;font-size:.875rem;font-style:normal;font-weight:400;line-height:normal;letter-spacing:.0125rem}.button__action{display:flex;width:1.25rem;height:1.25rem;padding:var(--spasing-fractional-05, .125rem);flex-direction:column;justify-content:center;align-items:center;gap:var(--Spasing-0, 0);flex-shrink:0;aspect-ratio:1/1;background:var(--action-icon-background);border:var(--action-icon-border);border-radius:var(--action-icon-radius);color:var(--action-icon-color)}.button__action w2p-ui-icon-nav-arrow{display:contents;--w2p-ui-icon-size: .75rem}.button__action-icon{display:contents}\n", ".button{--action-icon-radius: var(--Border-radius-999, 62.4375rem)}.button--primary{--bg-color: var(--Brand-Primary-Default, #f3400d);--label-color: var(--White-100, #fff);--description-color: var(--Base-Inverse-80, rgba(255, 255, 255, .8));--border-color: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--icon-bg-color: var(--Base-Inverse-80, rgba(255, 255, 255, .8));--action-icon-color: var(--Base-Inverse-70, rgba(255, 255, 255, .7));--action-icon-radius: var(--Border-radius-999, 62.4375rem);--action-icon-border: .5px solid var(--Base-Inverse-20, rgba(255, 255, 255, .2));--action-icon-background: var(--Base-Inverse-20, rgba(255, 255, 255, .2));--separator-color: var(--Base-Inverse-20, rgba(255, 255, 255, .2))}@media(hover:hover){.button--primary:hover{--bg-color: linear-gradient( 0deg, var(--Brand-Primary-90, rgba(243, 64, 13, .9)) 0%, var(--Brand-Primary-90, rgba(243, 64, 13, .9)) 100% ), var(--Base-Inverse-Default, #fff);--icon-bg-color: var(--Base-Inverse-95, rgba(255, 255, 255, .95));--action-icon-color: var(--Brand-Primary-90, rgba(243, 64, 13, .9));--action-icon-border: .5px solid var(--Base-Inverse-20, rgba(255, 255, 255, .2));--action-icon-background: var(--Base-Inverse-90, rgba(255, 255, 255, .9))}}.button--primary:active{--bg-color: linear-gradient( 0deg, var(--Brand-Primary-70, rgba(243, 64, 13, .7)) 0%, var(--Brand-Primary-70, rgba(243, 64, 13, .7)) 100% ), var(--Base-Base-Default, #0b0b0b);--icon-bg-color: var(--Base-Inverse-50, rgba(255, 255, 255, .5));--label-color: var(--Base-Inverse-50, rgba(255, 255, 255, .5));--description-color: var(--Base-Inverse-30, rgba(255, 255, 255, .3));--action-icon-color: var(--Brand-Primary-70, rgba(243, 64, 13, .7));--action-icon-border: .5px solid var(--Base-Inverse-5, rgba(255, 255, 255, .05));--action-icon-background: var(--Base-Inverse-50, rgba(255, 255, 255, .5))}.button--primary:disabled{--bg-color: linear-gradient( 0deg, var(--Brand-Primary-30, rgba(243, 64, 13, .3)) 0%, var(--Brand-Primary-30, rgba(243, 64, 13, .3)) 100% ), var(--Base-Base-Default, #0b0b0b);--icon-bg-color: var(--Base-Base-40, rgba(11, 11, 11, .4));--label-color: var(--Base-Base-80, rgba(11, 11, 11, .8));--description-color: var(--Base-Base-50, rgba(11, 11, 11, .5));--action-icon-color: var(--Base-Base-40, rgba(11, 11, 11, .4));--action-icon-border: none;--action-icon-background: var(--Base-Base-30, rgba(11, 11, 11, .3));--separator-color: var(--Base-Base-20, rgba(11, 11, 11, .2))}.button--neutral{--bg-color: linear-gradient( 0deg, var(--Base-Inverse-5, rgba(255, 255, 255, .05)) 0%, var(--Base-Inverse-5, rgba(255, 255, 255, .05)) 100% ), var(--Base-Base-Default, #0b0b0b);--border-color: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--label-color: var(--White-100, #fff);--description-color: var(--Base-Inverse-60, rgba(255, 255, 255, .6));--icon-bg-color: var(--Base-Inverse-80, rgba(255, 255, 255, .8));--action-icon-color: var(--Base-Inverse-70, rgba(255, 255, 255, .7));--action-icon-border: .5px solid var(--Base-Inverse-5, rgba(255, 255, 255, .05));--action-icon-background: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--separator-color: var(--Base-Inverse-20, rgba(255, 255, 255, .2))}@media(hover:hover){.button--neutral:hover{--bg-color: linear-gradient( 0deg, var(--Base-Inverse-10, rgba(255, 255, 255, .1)) 0%, var(--Base-Inverse-10, rgba(255, 255, 255, .1)) 100% ), var(--Base-Base-Default, #0b0b0b);--icon-bg-color: var(--Base-Inverse-80, rgba(255, 255, 255, .8));--action-icon-color: var(--Base-Base-Default, #0b0b0b);--action-icon-border: .5px solid var(--Base-Inverse-20, rgba(255, 255, 255, .2));--action-icon-background: var(--Base-Inverse-90, rgba(255, 255, 255, .9));--separator-color: var(--Base-Inverse-20, rgba(255, 255, 255, .2))}}.button--neutral:active{--bg-color: linear-gradient( 0deg, var(--Base-Inverse-5, rgba(255, 255, 255, .05)) 0%, var(--Base-Inverse-5, rgba(255, 255, 255, .05)) 100% ), var(--Base-Base-Default, #0b0b0b);--icon-bg-color: var(--Base-Inverse-50, rgba(255, 255, 255, .5));--label-color: var(--Base-Inverse-50, rgba(255, 255, 255, .5));--description-color: var(--Base-Inverse-30, rgba(255, 255, 255, .3));--action-icon-color: var(--Base-Base-Default, #0b0b0b);--action-icon-border: .5px solid var(--Base-Inverse-5, rgba(255, 255, 255, .05));--action-icon-background: var(--Base-Inverse-50, rgba(255, 255, 255, .5))}.button--neutral:disabled{--bg-color: linear-gradient( 0deg, var(--Base-Inverse-5, rgba(255, 255, 255, .05)) 0%, var(--Base-Inverse-5, rgba(255, 255, 255, .05)) 100% ), var(--Base-Base-Default, #0b0b0b);--icon-bg-color: var(--Base-Inverse-10, rgba(255, 255, 255, .1));--label-color: var(--Base-Inverse-10, rgba(255, 255, 255, .1));--description-color: var(--Base-Inverse-10, rgba(255, 255, 255, .1));--action-icon-color: var(--Base-Base-Default, #0b0b0b);--action-icon-border: none;--action-icon-background: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--separator-color: var(--Base-Base-20, rgba(11, 11, 11, .2))}\n"] }]
         }], propDecorators: { onClick: [{ type: i0.Output, args: ["onClick"] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
 
 class W2pActionButton {

package/fesm2022/w2p-ui-kit.mjs

@@ -12,11 +12,11 @@ class W2pButton {
         return `button--${this.variant()}`;
     }, ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: W2pButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.18", type: W2pButton, isStandalone: true, selector: "w2p-button", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClick: "onClick" }, ngImport: i0, template: "<button [disabled]=\"disabled()\" [class]=\"'button ' + classes()\" (click)=\"onClick.emit()\">\n  <div class=\"button__icon\">\n    <ng-content select=\"[icon]\"></ng-content>\n  </div>\n\n  <div class=\"button__separator\"></div>\n\n  <div class=\"button__text\">\n    <p><ng-content select=\"[label]\"></ng-content></p>\n    <span> <ng-content select=\"[description]\"></ng-content>\n    </span>\n  </div>\n\n  <div class=\"button__action\">\n    <div class=\"button__action-icon\">\n      <w2p-ui-icon-nav-arrow></w2p-ui-icon-nav-arrow>\n    </div>\n  </div>\n</button>", styles: ["@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Regular.ttf) format(\"truetype\");font-weight:400;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Medium.ttf) format(\"truetype\");font-weight:500;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-SemiBold.ttf) format(\"truetype\");font-weight:600;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Bold.ttf) format(\"truetype\");font-weight:700;font-style:normal}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:100;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Light.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:400;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Regular.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:500;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Medium.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:600;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Semibold.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:700;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Bold.otf) format(\"opentype\")}:host{--w2p-ui-button-width: 20.5rem}.button{display:flex;justify-content:space-between;width:var(--w2p-ui-button-width);padding:var(--spasing-fractional-35, .875rem) var(--Spasing-4, 1rem);align-items:center;gap:var(--Spasing-3, .75rem);background:var(--bg-color);border:1px solid var(--border-color);border-radius:var(--Border-radius-3, .75rem)}.button__icon{color:var(--icon-bg-color);--w2p-ui-icon-size: 1.25rem;width:1.25rem;height:1.25rem}.button__separator{width:1px;height:1.5rem;background:var(--separator-color)}.button__text{display:flex;flex-direction:column;align-items:flex-start;gap:var(--Spasing-2, .5rem);flex:1 0 0}.button__text p{color:var(--label-color);text-box-trim:trim-both;text-box-edge:cap alphabetic;text-box:trim-both cap alphabetic;margin:0;font-family:SF Pro Display;font-size:1.125rem;font-style:normal;font-weight:500;line-height:normal}.button__text span{color:var(--description-color);text-box-trim:trim-both;text-box-edge:cap alphabetic;text-box:trim-both cap alphabetic;margin:0;font-family:SF Pro Display;font-size:.875rem;font-style:normal;font-weight:400;line-height:normal;letter-spacing:.0125rem}.button__action{display:flex;width:1.25rem;height:1.25rem;padding:var(--spasing-fractional-05, .125rem);flex-direction:column;justify-content:center;align-items:center;gap:var(--Spasing-0, 0);flex-shrink:0;aspect-ratio:1/1;background:var(--action-icon-background);border:var(--action-icon-border);border-radius:var(--action-icon-radius);color:var(--action-icon-color)}.button__action w2p-ui-icon-nav-arrow{display:contents;--w2p-ui-icon-size: .75rem}.button__action-icon{display:contents}\n", ".button{--action-icon-radius: var(--Border-radius-999, 62.4375rem)}.button--primary{--bg-color: var(--Brand-Primary-Default, #f3400d);--label-color: var(--White-100, #fff);--description-color: var(--Base-Inverse-80, rgba(255, 255, 255, .8));--border-color: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--icon-bg-color: var(--Base-Inverse-80, rgba(255, 255, 255, .8));--action-icon-color: var(--Base-Inverse-70, rgba(255, 255, 255, .7));--action-icon-radius: var(--Border-radius-999, 62.4375rem);--action-icon-border: .5px solid var(--Base-Inverse-20, rgba(255, 255, 255, .2));--action-icon-background: var(--Base-Inverse-20, rgba(255, 255, 255, .2));--separator-color: var(--Base-Inverse-20, rgba(255, 255, 255, .2))}@media(hover:hover){.button--primary:hover{--bg-color: linear-gradient( 0deg, var(--Brand-Primary-90, rgba(243, 64, 13, .9)) 0%, var(--Brand-Primary-90, rgba(243, 64, 13, .9)) 100% ), var(--Base-Inverse-Default, #fff);--icon-bg-color: var(--Base-Inverse-95, rgba(255, 255, 255, .95));--action-icon-color: var(--Brand-Primary-90, rgba(243, 64, 13, .9));--action-icon-border: .5px solid var(--Base-Inverse-20, rgba(255, 255, 255, .2));--action-icon-background: var(--Base-Inverse-90, rgba(255, 255, 255, .9))}}.button--primary:active{--bg-color: linear-gradient( 0deg, var(--Brand-Primary-70, rgba(243, 64, 13, .7)) 0%, var(--Brand-Primary-70, rgba(243, 64, 13, .7)) 100% ), var(--Base-Base-Default, #0b0b0b);--icon-bg-color: var(--Base-Inverse-50, rgba(255, 255, 255, .5));--label-color: var(--Base-Inverse-50, rgba(255, 255, 255, .5));--description-color: var(--Base-Inverse-30, rgba(255, 255, 255, .3));--action-icon-color: var(--Brand-Primary-70, rgba(243, 64, 13, .7));--action-icon-border: .5px solid var(--Base-Inverse-5, rgba(255, 255, 255, .05));--action-icon-background: var(--Base-Inverse-50, rgba(255, 255, 255, .5))}.button--primary:disabled{--bg-color: linear-gradient( 0deg, var(--Brand-Primary-30, rgba(243, 64, 13, .3)) 0%, var(--Brand-Primary-30, rgba(243, 64, 13, .3)) 100% ), var(--Base-Base-Default, #0b0b0b);--icon-bg-color: var(--Base-Base-40, rgba(11, 11, 11, .4));--label-color: var(--Base-Base-80, rgba(11, 11, 11, .8));--description-color: var(--Base-Base-50, rgba(11, 11, 11, .5));--action-icon-color: var(--Base-Base-40, rgba(11, 11, 11, .4));--action-icon-border: none;--action-icon-background: var(--Base-Base-30, rgba(11, 11, 11, .3));--separator-color: var(--Base-Base-20, rgba(11, 11, 11, .2))}.button--neutral{--bg-color: linear-gradient( 0deg, var(--Base-Inverse-5, rgba(255, 255, 255, .05)) 0%, var(--Base-Inverse-5, rgba(255, 255, 255, .05)) 100% ), var(--Base-Base-Default, #0b0b0b);--border-color: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--label-color: var(--White-100, #fff);--description-color: var(--Base-Inverse-60, rgba(255, 255, 255, .6));--icon-bg-color: var(--Base-Inverse-80, rgba(255, 255, 255, .8));--action-icon-color: var(--Base-Inverse-70, rgba(255, 255, 255, .7));--action-icon-border: .5px solid var(--Base-Inverse-20, rgba(255, 255, 255, .2));--action-icon-background: var(--Base-Inverse-20, rgba(255, 255, 255, .2));--separator-color: var(--Base-Inverse-20, rgba(255, 255, 255, .2))}@media(hover:hover){.button--neutral:hover{--bg-color: linear-gradient( 0deg, var(--Base-Inverse-10, rgba(255, 255, 255, .1)) 0%, var(--Base-Inverse-10, rgba(255, 255, 255, .1)) 100% ), var(--Base-Base-Default, #0b0b0b);--icon-bg-color: var(--Base-Inverse-80, rgba(255, 255, 255, .8));--action-icon-color: var(--Base-Base-Default, #0b0b0b);--action-icon-border: .5px solid var(--Base-Inverse-20, rgba(255, 255, 255, .2));--action-icon-background: var(--Base-Inverse-90, rgba(255, 255, 255, .9));--separator-color: var(--Base-Inverse-20, rgba(255, 255, 255, .2))}}.button--neutral:active{--bg-color: linear-gradient( 0deg, var(--Base-Inverse-5, rgba(255, 255, 255, .05)) 0%, var(--Base-Inverse-5, rgba(255, 255, 255, .05)) 100% ), var(--Base-Base-Default, #0b0b0b);--icon-bg-color: var(--Base-Inverse-50, rgba(255, 255, 255, .5));--label-color: var(--Base-Inverse-50, rgba(255, 255, 255, .5));--description-color: var(--Base-Inverse-30, rgba(255, 255, 255, .3));--action-icon-color: var(--Base-Base-Default, #0b0b0b);--action-icon-border: .5px solid var(--Base-Inverse-5, rgba(255, 255, 255, .05));--action-icon-background: var(--Base-Inverse-50, rgba(255, 255, 255, .5))}.button--neutral:disabled{--bg-color: linear-gradient( 0deg, var(--Base-Inverse-5, rgba(255, 255, 255, .05)) 0%, var(--Base-Inverse-5, rgba(255, 255, 255, .05)) 100% ), var(--Base-Base-Default, #0b0b0b);--icon-bg-color: var(--Base-Inverse-10, rgba(255, 255, 255, .1));--label-color: var(--Base-Inverse-10, rgba(255, 255, 255, .1));--description-color: var(--Base-Inverse-10, rgba(255, 255, 255, .1));--action-icon-color: var(--Base-Base-Default, #0b0b0b);--action-icon-border: none;--action-icon-background: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--separator-color: var(--Base-Base-20, rgba(11, 11, 11, .2))}\n"], dependencies: [{ kind: "component", type: NavArrowIconComponent, selector: "w2p-ui-icon-nav-arrow" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.18", type: W2pButton, isStandalone: true, selector: "w2p-button", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClick: "onClick" }, ngImport: i0, template: "<button [disabled]=\"disabled()\" [class]=\"'button ' + classes()\" (click)=\"onClick.emit()\">\n  <div class=\"button__icon\">\n    <ng-content select=\"[icon]\"></ng-content>\n  </div>\n\n  <div class=\"button__separator\"></div>\n\n  <div class=\"button__text\">\n    <p><ng-content select=\"[label]\"></ng-content></p>\n    <span> <ng-content select=\"[description]\"></ng-content>\n    </span>\n  </div>\n\n  <div class=\"button__action\">\n    <div class=\"button__action-icon\">\n      <w2p-ui-icon-nav-arrow></w2p-ui-icon-nav-arrow>\n    </div>\n  </div>\n</button>", styles: ["@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Regular.ttf) format(\"truetype\");font-weight:400;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Medium.ttf) format(\"truetype\");font-weight:500;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-SemiBold.ttf) format(\"truetype\");font-weight:600;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Bold.ttf) format(\"truetype\");font-weight:700;font-style:normal}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:100;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Light.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:400;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Regular.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:500;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Medium.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:600;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Semibold.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:700;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Bold.otf) format(\"opentype\")}:host{--w2p-ui-button-width: 20.5rem}.button{display:flex;justify-content:space-between;width:var(--w2p-ui-button-width);padding:var(--spasing-fractional-35, .875rem) var(--Spasing-4, 1rem);align-items:center;gap:var(--Spasing-3, .75rem);background:var(--bg-color);border:1px solid var(--border-color);border-radius:var(--Border-radius-3, .75rem)}.button__icon{color:var(--icon-bg-color);--w2p-ui-icon-size: 1.25rem;width:1.25rem;height:1.25rem}.button__separator{width:1px;height:1.5rem;background:var(--separator-color)}.button__text{display:flex;flex-direction:column;align-items:flex-start;gap:var(--Spasing-2, .5rem);flex:1 0 0}.button__text p{color:var(--label-color);text-box-trim:trim-both;text-box-edge:cap alphabetic;text-box:trim-both cap alphabetic;margin:0;font-family:SF Pro Display;font-size:1.125rem;font-style:normal;font-weight:500;line-height:normal}.button__text span{color:var(--description-color);text-box-trim:trim-both;text-box-edge:cap alphabetic;text-box:trim-both cap alphabetic;margin:0;font-family:SF Pro Display;font-size:.875rem;font-style:normal;font-weight:400;line-height:normal;letter-spacing:.0125rem}.button__action{display:flex;width:1.25rem;height:1.25rem;padding:var(--spasing-fractional-05, .125rem);flex-direction:column;justify-content:center;align-items:center;gap:var(--Spasing-0, 0);flex-shrink:0;aspect-ratio:1/1;background:var(--action-icon-background);border:var(--action-icon-border);border-radius:var(--action-icon-radius);color:var(--action-icon-color)}.button__action w2p-ui-icon-nav-arrow{display:contents;--w2p-ui-icon-size: .75rem}.button__action-icon{display:contents}\n", ".button{--action-icon-radius: var(--Border-radius-999, 62.4375rem)}.button--primary{--bg-color: var(--Brand-Primary-Default, #f3400d);--label-color: var(--White-100, #fff);--description-color: var(--Base-Inverse-80, rgba(255, 255, 255, .8));--border-color: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--icon-bg-color: var(--Base-Inverse-80, rgba(255, 255, 255, .8));--action-icon-color: var(--Base-Inverse-70, rgba(255, 255, 255, .7));--action-icon-radius: var(--Border-radius-999, 62.4375rem);--action-icon-border: .5px solid var(--Base-Inverse-20, rgba(255, 255, 255, .2));--action-icon-background: var(--Base-Inverse-20, rgba(255, 255, 255, .2));--separator-color: var(--Base-Inverse-20, rgba(255, 255, 255, .2))}@media(hover:hover){.button--primary:hover{--bg-color: linear-gradient( 0deg, var(--Brand-Primary-90, rgba(243, 64, 13, .9)) 0%, var(--Brand-Primary-90, rgba(243, 64, 13, .9)) 100% ), var(--Base-Inverse-Default, #fff);--icon-bg-color: var(--Base-Inverse-95, rgba(255, 255, 255, .95));--action-icon-color: var(--Brand-Primary-90, rgba(243, 64, 13, .9));--action-icon-border: .5px solid var(--Base-Inverse-20, rgba(255, 255, 255, .2));--action-icon-background: var(--Base-Inverse-90, rgba(255, 255, 255, .9))}}.button--primary:active{--bg-color: linear-gradient( 0deg, var(--Brand-Primary-70, rgba(243, 64, 13, .7)) 0%, var(--Brand-Primary-70, rgba(243, 64, 13, .7)) 100% ), var(--Base-Base-Default, #0b0b0b);--icon-bg-color: var(--Base-Inverse-50, rgba(255, 255, 255, .5));--label-color: var(--Base-Inverse-50, rgba(255, 255, 255, .5));--description-color: var(--Base-Inverse-30, rgba(255, 255, 255, .3));--action-icon-color: var(--Brand-Primary-70, rgba(243, 64, 13, .7));--action-icon-border: .5px solid var(--Base-Inverse-5, rgba(255, 255, 255, .05));--action-icon-background: var(--Base-Inverse-50, rgba(255, 255, 255, .5))}.button--primary:disabled{--bg-color: linear-gradient( 0deg, var(--Brand-Primary-30, rgba(243, 64, 13, .3)) 0%, var(--Brand-Primary-30, rgba(243, 64, 13, .3)) 100% ), var(--Base-Base-Default, #0b0b0b);--icon-bg-color: var(--Base-Base-40, rgba(11, 11, 11, .4));--label-color: var(--Base-Base-80, rgba(11, 11, 11, .8));--description-color: var(--Base-Base-50, rgba(11, 11, 11, .5));--action-icon-color: var(--Base-Base-40, rgba(11, 11, 11, .4));--action-icon-border: none;--action-icon-background: var(--Base-Base-30, rgba(11, 11, 11, .3));--separator-color: var(--Base-Base-20, rgba(11, 11, 11, .2))}.button--neutral{--bg-color: linear-gradient( 0deg, var(--Base-Inverse-5, rgba(255, 255, 255, .05)) 0%, var(--Base-Inverse-5, rgba(255, 255, 255, .05)) 100% ), var(--Base-Base-Default, #0b0b0b);--border-color: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--label-color: var(--White-100, #fff);--description-color: var(--Base-Inverse-60, rgba(255, 255, 255, .6));--icon-bg-color: var(--Base-Inverse-80, rgba(255, 255, 255, .8));--action-icon-color: var(--Base-Inverse-70, rgba(255, 255, 255, .7));--action-icon-border: .5px solid var(--Base-Inverse-5, rgba(255, 255, 255, .05));--action-icon-background: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--separator-color: var(--Base-Inverse-20, rgba(255, 255, 255, .2))}@media(hover:hover){.button--neutral:hover{--bg-color: linear-gradient( 0deg, var(--Base-Inverse-10, rgba(255, 255, 255, .1)) 0%, var(--Base-Inverse-10, rgba(255, 255, 255, .1)) 100% ), var(--Base-Base-Default, #0b0b0b);--icon-bg-color: var(--Base-Inverse-80, rgba(255, 255, 255, .8));--action-icon-color: var(--Base-Base-Default, #0b0b0b);--action-icon-border: .5px solid var(--Base-Inverse-20, rgba(255, 255, 255, .2));--action-icon-background: var(--Base-Inverse-90, rgba(255, 255, 255, .9));--separator-color: var(--Base-Inverse-20, rgba(255, 255, 255, .2))}}.button--neutral:active{--bg-color: linear-gradient( 0deg, var(--Base-Inverse-5, rgba(255, 255, 255, .05)) 0%, var(--Base-Inverse-5, rgba(255, 255, 255, .05)) 100% ), var(--Base-Base-Default, #0b0b0b);--icon-bg-color: var(--Base-Inverse-50, rgba(255, 255, 255, .5));--label-color: var(--Base-Inverse-50, rgba(255, 255, 255, .5));--description-color: var(--Base-Inverse-30, rgba(255, 255, 255, .3));--action-icon-color: var(--Base-Base-Default, #0b0b0b);--action-icon-border: .5px solid var(--Base-Inverse-5, rgba(255, 255, 255, .05));--action-icon-background: var(--Base-Inverse-50, rgba(255, 255, 255, .5))}.button--neutral:disabled{--bg-color: linear-gradient( 0deg, var(--Base-Inverse-5, rgba(255, 255, 255, .05)) 0%, var(--Base-Inverse-5, rgba(255, 255, 255, .05)) 100% ), var(--Base-Base-Default, #0b0b0b);--icon-bg-color: var(--Base-Inverse-10, rgba(255, 255, 255, .1));--label-color: var(--Base-Inverse-10, rgba(255, 255, 255, .1));--description-color: var(--Base-Inverse-10, rgba(255, 255, 255, .1));--action-icon-color: var(--Base-Base-Default, #0b0b0b);--action-icon-border: none;--action-icon-background: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--separator-color: var(--Base-Base-20, rgba(11, 11, 11, .2))}\n"], dependencies: [{ kind: "component", type: NavArrowIconComponent, selector: "w2p-ui-icon-nav-arrow" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: W2pButton, decorators: [{
             type: Component,
-            args: [{ selector: 'w2p-button', imports: [NavArrowIconComponent], template: "<button [disabled]=\"disabled()\" [class]=\"'button ' + classes()\" (click)=\"onClick.emit()\">\n  <div class=\"button__icon\">\n    <ng-content select=\"[icon]\"></ng-content>\n  </div>\n\n  <div class=\"button__separator\"></div>\n\n  <div class=\"button__text\">\n    <p><ng-content select=\"[label]\"></ng-content></p>\n    <span> <ng-content select=\"[description]\"></ng-content>\n    </span>\n  </div>\n\n  <div class=\"button__action\">\n    <div class=\"button__action-icon\">\n      <w2p-ui-icon-nav-arrow></w2p-ui-icon-nav-arrow>\n    </div>\n  </div>\n</button>", styles: ["@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Regular.ttf) format(\"truetype\");font-weight:400;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Medium.ttf) format(\"truetype\");font-weight:500;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-SemiBold.ttf) format(\"truetype\");font-weight:600;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Bold.ttf) format(\"truetype\");font-weight:700;font-style:normal}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:100;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Light.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:400;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Regular.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:500;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Medium.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:600;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Semibold.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:700;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Bold.otf) format(\"opentype\")}:host{--w2p-ui-button-width: 20.5rem}.button{display:flex;justify-content:space-between;width:var(--w2p-ui-button-width);padding:var(--spasing-fractional-35, .875rem) var(--Spasing-4, 1rem);align-items:center;gap:var(--Spasing-3, .75rem);background:var(--bg-color);border:1px solid var(--border-color);border-radius:var(--Border-radius-3, .75rem)}.button__icon{color:var(--icon-bg-color);--w2p-ui-icon-size: 1.25rem;width:1.25rem;height:1.25rem}.button__separator{width:1px;height:1.5rem;background:var(--separator-color)}.button__text{display:flex;flex-direction:column;align-items:flex-start;gap:var(--Spasing-2, .5rem);flex:1 0 0}.button__text p{color:var(--label-color);text-box-trim:trim-both;text-box-edge:cap alphabetic;text-box:trim-both cap alphabetic;margin:0;font-family:SF Pro Display;font-size:1.125rem;font-style:normal;font-weight:500;line-height:normal}.button__text span{color:var(--description-color);text-box-trim:trim-both;text-box-edge:cap alphabetic;text-box:trim-both cap alphabetic;margin:0;font-family:SF Pro Display;font-size:.875rem;font-style:normal;font-weight:400;line-height:normal;letter-spacing:.0125rem}.button__action{display:flex;width:1.25rem;height:1.25rem;padding:var(--spasing-fractional-05, .125rem);flex-direction:column;justify-content:center;align-items:center;gap:var(--Spasing-0, 0);flex-shrink:0;aspect-ratio:1/1;background:var(--action-icon-background);border:var(--action-icon-border);border-radius:var(--action-icon-radius);color:var(--action-icon-color)}.button__action w2p-ui-icon-nav-arrow{display:contents;--w2p-ui-icon-size: .75rem}.button__action-icon{display:contents}\n", ".button{--action-icon-radius: var(--Border-radius-999, 62.4375rem)}.button--primary{--bg-color: var(--Brand-Primary-Default, #f3400d);--label-color: var(--White-100, #fff);--description-color: var(--Base-Inverse-80, rgba(255, 255, 255, .8));--border-color: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--icon-bg-color: var(--Base-Inverse-80, rgba(255, 255, 255, .8));--action-icon-color: var(--Base-Inverse-70, rgba(255, 255, 255, .7));--action-icon-radius: var(--Border-radius-999, 62.4375rem);--action-icon-border: .5px solid var(--Base-Inverse-20, rgba(255, 255, 255, .2));--action-icon-background: var(--Base-Inverse-20, rgba(255, 255, 255, .2));--separator-color: var(--Base-Inverse-20, rgba(255, 255, 255, .2))}@media(hover:hover){.button--primary:hover{--bg-color: linear-gradient( 0deg, var(--Brand-Primary-90, rgba(243, 64, 13, .9)) 0%, var(--Brand-Primary-90, rgba(243, 64, 13, .9)) 100% ), var(--Base-Inverse-Default, #fff);--icon-bg-color: var(--Base-Inverse-95, rgba(255, 255, 255, .95));--action-icon-color: var(--Brand-Primary-90, rgba(243, 64, 13, .9));--action-icon-border: .5px solid var(--Base-Inverse-20, rgba(255, 255, 255, .2));--action-icon-background: var(--Base-Inverse-90, rgba(255, 255, 255, .9))}}.button--primary:active{--bg-color: linear-gradient( 0deg, var(--Brand-Primary-70, rgba(243, 64, 13, .7)) 0%, var(--Brand-Primary-70, rgba(243, 64, 13, .7)) 100% ), var(--Base-Base-Default, #0b0b0b);--icon-bg-color: var(--Base-Inverse-50, rgba(255, 255, 255, .5));--label-color: var(--Base-Inverse-50, rgba(255, 255, 255, .5));--description-color: var(--Base-Inverse-30, rgba(255, 255, 255, .3));--action-icon-color: var(--Brand-Primary-70, rgba(243, 64, 13, .7));--action-icon-border: .5px solid var(--Base-Inverse-5, rgba(255, 255, 255, .05));--action-icon-background: var(--Base-Inverse-50, rgba(255, 255, 255, .5))}.button--primary:disabled{--bg-color: linear-gradient( 0deg, var(--Brand-Primary-30, rgba(243, 64, 13, .3)) 0%, var(--Brand-Primary-30, rgba(243, 64, 13, .3)) 100% ), var(--Base-Base-Default, #0b0b0b);--icon-bg-color: var(--Base-Base-40, rgba(11, 11, 11, .4));--label-color: var(--Base-Base-80, rgba(11, 11, 11, .8));--description-color: var(--Base-Base-50, rgba(11, 11, 11, .5));--action-icon-color: var(--Base-Base-40, rgba(11, 11, 11, .4));--action-icon-border: none;--action-icon-background: var(--Base-Base-30, rgba(11, 11, 11, .3));--separator-color: var(--Base-Base-20, rgba(11, 11, 11, .2))}.button--neutral{--bg-color: linear-gradient( 0deg, var(--Base-Inverse-5, rgba(255, 255, 255, .05)) 0%, var(--Base-Inverse-5, rgba(255, 255, 255, .05)) 100% ), var(--Base-Base-Default, #0b0b0b);--border-color: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--label-color: var(--White-100, #fff);--description-color: var(--Base-Inverse-60, rgba(255, 255, 255, .6));--icon-bg-color: var(--Base-Inverse-80, rgba(255, 255, 255, .8));--action-icon-color: var(--Base-Inverse-70, rgba(255, 255, 255, .7));--action-icon-border: .5px solid var(--Base-Inverse-20, rgba(255, 255, 255, .2));--action-icon-background: var(--Base-Inverse-20, rgba(255, 255, 255, .2));--separator-color: var(--Base-Inverse-20, rgba(255, 255, 255, .2))}@media(hover:hover){.button--neutral:hover{--bg-color: linear-gradient( 0deg, var(--Base-Inverse-10, rgba(255, 255, 255, .1)) 0%, var(--Base-Inverse-10, rgba(255, 255, 255, .1)) 100% ), var(--Base-Base-Default, #0b0b0b);--icon-bg-color: var(--Base-Inverse-80, rgba(255, 255, 255, .8));--action-icon-color: var(--Base-Base-Default, #0b0b0b);--action-icon-border: .5px solid var(--Base-Inverse-20, rgba(255, 255, 255, .2));--action-icon-background: var(--Base-Inverse-90, rgba(255, 255, 255, .9));--separator-color: var(--Base-Inverse-20, rgba(255, 255, 255, .2))}}.button--neutral:active{--bg-color: linear-gradient( 0deg, var(--Base-Inverse-5, rgba(255, 255, 255, .05)) 0%, var(--Base-Inverse-5, rgba(255, 255, 255, .05)) 100% ), var(--Base-Base-Default, #0b0b0b);--icon-bg-color: var(--Base-Inverse-50, rgba(255, 255, 255, .5));--label-color: var(--Base-Inverse-50, rgba(255, 255, 255, .5));--description-color: var(--Base-Inverse-30, rgba(255, 255, 255, .3));--action-icon-color: var(--Base-Base-Default, #0b0b0b);--action-icon-border: .5px solid var(--Base-Inverse-5, rgba(255, 255, 255, .05));--action-icon-background: var(--Base-Inverse-50, rgba(255, 255, 255, .5))}.button--neutral:disabled{--bg-color: linear-gradient( 0deg, var(--Base-Inverse-5, rgba(255, 255, 255, .05)) 0%, var(--Base-Inverse-5, rgba(255, 255, 255, .05)) 100% ), var(--Base-Base-Default, #0b0b0b);--icon-bg-color: var(--Base-Inverse-10, rgba(255, 255, 255, .1));--label-color: var(--Base-Inverse-10, rgba(255, 255, 255, .1));--description-color: var(--Base-Inverse-10, rgba(255, 255, 255, .1));--action-icon-color: var(--Base-Base-Default, #0b0b0b);--action-icon-border: none;--action-icon-background: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--separator-color: var(--Base-Base-20, rgba(11, 11, 11, .2))}\n"] }]
+            args: [{ selector: 'w2p-button', imports: [NavArrowIconComponent], template: "<button [disabled]=\"disabled()\" [class]=\"'button ' + classes()\" (click)=\"onClick.emit()\">\n  <div class=\"button__icon\">\n    <ng-content select=\"[icon]\"></ng-content>\n  </div>\n\n  <div class=\"button__separator\"></div>\n\n  <div class=\"button__text\">\n    <p><ng-content select=\"[label]\"></ng-content></p>\n    <span> <ng-content select=\"[description]\"></ng-content>\n    </span>\n  </div>\n\n  <div class=\"button__action\">\n    <div class=\"button__action-icon\">\n      <w2p-ui-icon-nav-arrow></w2p-ui-icon-nav-arrow>\n    </div>\n  </div>\n</button>", styles: ["@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Regular.ttf) format(\"truetype\");font-weight:400;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Medium.ttf) format(\"truetype\");font-weight:500;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-SemiBold.ttf) format(\"truetype\");font-weight:600;font-style:normal}@font-face{font-family:Manrope;src:url(/assets/fonts/manrope/Manrope-Bold.ttf) format(\"truetype\");font-weight:700;font-style:normal}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:100;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Light.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:400;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Regular.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:500;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Medium.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:600;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Semibold.otf) format(\"opentype\")}@font-face{font-family:SF Pro Display;font-style:normal;font-weight:700;src:url(/assets/fonts/sf-pro/SF-Pro-Display-Bold.otf) format(\"opentype\")}:host{--w2p-ui-button-width: 20.5rem}.button{display:flex;justify-content:space-between;width:var(--w2p-ui-button-width);padding:var(--spasing-fractional-35, .875rem) var(--Spasing-4, 1rem);align-items:center;gap:var(--Spasing-3, .75rem);background:var(--bg-color);border:1px solid var(--border-color);border-radius:var(--Border-radius-3, .75rem)}.button__icon{color:var(--icon-bg-color);--w2p-ui-icon-size: 1.25rem;width:1.25rem;height:1.25rem}.button__separator{width:1px;height:1.5rem;background:var(--separator-color)}.button__text{display:flex;flex-direction:column;align-items:flex-start;gap:var(--Spasing-2, .5rem);flex:1 0 0}.button__text p{color:var(--label-color);text-box-trim:trim-both;text-box-edge:cap alphabetic;text-box:trim-both cap alphabetic;margin:0;font-family:SF Pro Display;font-size:1.125rem;font-style:normal;font-weight:500;line-height:normal}.button__text span{color:var(--description-color);text-box-trim:trim-both;text-box-edge:cap alphabetic;text-box:trim-both cap alphabetic;margin:0;font-family:SF Pro Display;font-size:.875rem;font-style:normal;font-weight:400;line-height:normal;letter-spacing:.0125rem}.button__action{display:flex;width:1.25rem;height:1.25rem;padding:var(--spasing-fractional-05, .125rem);flex-direction:column;justify-content:center;align-items:center;gap:var(--Spasing-0, 0);flex-shrink:0;aspect-ratio:1/1;background:var(--action-icon-background);border:var(--action-icon-border);border-radius:var(--action-icon-radius);color:var(--action-icon-color)}.button__action w2p-ui-icon-nav-arrow{display:contents;--w2p-ui-icon-size: .75rem}.button__action-icon{display:contents}\n", ".button{--action-icon-radius: var(--Border-radius-999, 62.4375rem)}.button--primary{--bg-color: var(--Brand-Primary-Default, #f3400d);--label-color: var(--White-100, #fff);--description-color: var(--Base-Inverse-80, rgba(255, 255, 255, .8));--border-color: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--icon-bg-color: var(--Base-Inverse-80, rgba(255, 255, 255, .8));--action-icon-color: var(--Base-Inverse-70, rgba(255, 255, 255, .7));--action-icon-radius: var(--Border-radius-999, 62.4375rem);--action-icon-border: .5px solid var(--Base-Inverse-20, rgba(255, 255, 255, .2));--action-icon-background: var(--Base-Inverse-20, rgba(255, 255, 255, .2));--separator-color: var(--Base-Inverse-20, rgba(255, 255, 255, .2))}@media(hover:hover){.button--primary:hover{--bg-color: linear-gradient( 0deg, var(--Brand-Primary-90, rgba(243, 64, 13, .9)) 0%, var(--Brand-Primary-90, rgba(243, 64, 13, .9)) 100% ), var(--Base-Inverse-Default, #fff);--icon-bg-color: var(--Base-Inverse-95, rgba(255, 255, 255, .95));--action-icon-color: var(--Brand-Primary-90, rgba(243, 64, 13, .9));--action-icon-border: .5px solid var(--Base-Inverse-20, rgba(255, 255, 255, .2));--action-icon-background: var(--Base-Inverse-90, rgba(255, 255, 255, .9))}}.button--primary:active{--bg-color: linear-gradient( 0deg, var(--Brand-Primary-70, rgba(243, 64, 13, .7)) 0%, var(--Brand-Primary-70, rgba(243, 64, 13, .7)) 100% ), var(--Base-Base-Default, #0b0b0b);--icon-bg-color: var(--Base-Inverse-50, rgba(255, 255, 255, .5));--label-color: var(--Base-Inverse-50, rgba(255, 255, 255, .5));--description-color: var(--Base-Inverse-30, rgba(255, 255, 255, .3));--action-icon-color: var(--Brand-Primary-70, rgba(243, 64, 13, .7));--action-icon-border: .5px solid var(--Base-Inverse-5, rgba(255, 255, 255, .05));--action-icon-background: var(--Base-Inverse-50, rgba(255, 255, 255, .5))}.button--primary:disabled{--bg-color: linear-gradient( 0deg, var(--Brand-Primary-30, rgba(243, 64, 13, .3)) 0%, var(--Brand-Primary-30, rgba(243, 64, 13, .3)) 100% ), var(--Base-Base-Default, #0b0b0b);--icon-bg-color: var(--Base-Base-40, rgba(11, 11, 11, .4));--label-color: var(--Base-Base-80, rgba(11, 11, 11, .8));--description-color: var(--Base-Base-50, rgba(11, 11, 11, .5));--action-icon-color: var(--Base-Base-40, rgba(11, 11, 11, .4));--action-icon-border: none;--action-icon-background: var(--Base-Base-30, rgba(11, 11, 11, .3));--separator-color: var(--Base-Base-20, rgba(11, 11, 11, .2))}.button--neutral{--bg-color: linear-gradient( 0deg, var(--Base-Inverse-5, rgba(255, 255, 255, .05)) 0%, var(--Base-Inverse-5, rgba(255, 255, 255, .05)) 100% ), var(--Base-Base-Default, #0b0b0b);--border-color: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--label-color: var(--White-100, #fff);--description-color: var(--Base-Inverse-60, rgba(255, 255, 255, .6));--icon-bg-color: var(--Base-Inverse-80, rgba(255, 255, 255, .8));--action-icon-color: var(--Base-Inverse-70, rgba(255, 255, 255, .7));--action-icon-border: .5px solid var(--Base-Inverse-5, rgba(255, 255, 255, .05));--action-icon-background: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--separator-color: var(--Base-Inverse-20, rgba(255, 255, 255, .2))}@media(hover:hover){.button--neutral:hover{--bg-color: linear-gradient( 0deg, var(--Base-Inverse-10, rgba(255, 255, 255, .1)) 0%, var(--Base-Inverse-10, rgba(255, 255, 255, .1)) 100% ), var(--Base-Base-Default, #0b0b0b);--icon-bg-color: var(--Base-Inverse-80, rgba(255, 255, 255, .8));--action-icon-color: var(--Base-Base-Default, #0b0b0b);--action-icon-border: .5px solid var(--Base-Inverse-20, rgba(255, 255, 255, .2));--action-icon-background: var(--Base-Inverse-90, rgba(255, 255, 255, .9));--separator-color: var(--Base-Inverse-20, rgba(255, 255, 255, .2))}}.button--neutral:active{--bg-color: linear-gradient( 0deg, var(--Base-Inverse-5, rgba(255, 255, 255, .05)) 0%, var(--Base-Inverse-5, rgba(255, 255, 255, .05)) 100% ), var(--Base-Base-Default, #0b0b0b);--icon-bg-color: var(--Base-Inverse-50, rgba(255, 255, 255, .5));--label-color: var(--Base-Inverse-50, rgba(255, 255, 255, .5));--description-color: var(--Base-Inverse-30, rgba(255, 255, 255, .3));--action-icon-color: var(--Base-Base-Default, #0b0b0b);--action-icon-border: .5px solid var(--Base-Inverse-5, rgba(255, 255, 255, .05));--action-icon-background: var(--Base-Inverse-50, rgba(255, 255, 255, .5))}.button--neutral:disabled{--bg-color: linear-gradient( 0deg, var(--Base-Inverse-5, rgba(255, 255, 255, .05)) 0%, var(--Base-Inverse-5, rgba(255, 255, 255, .05)) 100% ), var(--Base-Base-Default, #0b0b0b);--icon-bg-color: var(--Base-Inverse-10, rgba(255, 255, 255, .1));--label-color: var(--Base-Inverse-10, rgba(255, 255, 255, .1));--description-color: var(--Base-Inverse-10, rgba(255, 255, 255, .1));--action-icon-color: var(--Base-Base-Default, #0b0b0b);--action-icon-border: none;--action-icon-background: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--separator-color: var(--Base-Base-20, rgba(11, 11, 11, .2))}\n"] }]
         }], propDecorators: { onClick: [{ type: i0.Output, args: ["onClick"] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
 
 class W2pActionButton {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@w2p-ui/kit",
-  "version": "0.1.25",
+  "version": "0.1.26",
   "peerDependencies": {
     "@angular/common": "^21.2.0",
     "@angular/core": "^21.2.0"