@w2p-ui/kit 0.1.0 → 0.1.1

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

@@ -0,0 +1,24 @@
+import * as i0 from '@angular/core';
+import { output, input, computed, Component } from '@angular/core';
+
+class W2pActionButton {
+    onClick = output();
+    variant = input('primary', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    classes = computed(() => {
+        return `action-button--${this.variant()}`;
+    }, ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: W2pActionButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.18", type: W2pActionButton, isStandalone: true, selector: "w2p-action-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]=\"'action-button ' + classes()\" (click)=\"onClick.emit()\">\n  <div class=\"action-button__icon\">\n    <ng-content select=\"[icon]\"></ng-content>\n  </div>\n\n  <ng-content></ng-content>\n</button>", styles: ["@import\"https://fonts.cdnfonts.com/css/sf-pro-display\";:host{--w2p-ui-action-button-width: 18rem}.action-button{display:flex;justify-content:center;width:var(--w2p-ui-action-button-width);align-items:center;height:2.5rem;padding:var(--spasing-fractional-25, .625rem) var(--Spasing-5, 1.25rem) var(--spasing-fractional-25, .625rem) var(--Spasing-4, 1rem);gap:var(--Spasing-1, .25rem);background:var(--bg-color);border:1px solid var(--border-color);border-radius:var(--Border-radius-3, .75rem)}.action-button__icon{color:var(--icon-bg-color);--w2p-ui-icon-size: .875rem;display:contents}.action-button__icon w2p-ui-icon-add-square{display:contents}.action-button{color:var(--label-color);font-family:SF Pro Display;font-size:.875rem;font-style:normal;font-weight:500;line-height:normal;letter-spacing:.0125rem;text-box-trim:trim-both;text-box-edge:cap alphabetic;text-box:trim-both cap alphabetic}\n", ".action-button--primary{--icon-bg-color: var(--Base-Inverse-80, rgba(255, 255, 255, .8));--bg-color: var(--Brand-Primary-Default, #f3400d);--border-color: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--label-color: var(--Base-Inverse-Default, #fff)}@media(hover:hover){.action-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)}}.action-button--primary:active{--label-color: var(--Base-Inverse-50, rgba(255, 255, 255, .5));--icon-bg-color: var(--Base-Inverse-50, rgba(255, 255, 255, .5));--border-color: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--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)}.action-button--primary:disabled{--label-color: var(--Base-Base-80, rgba(11, 11, 11, .8));--icon-bg-color: var(--Base-Base-40, rgba(11, 11, 11, .4));--border-color: var(--Base-Base-30, rgba(11, 11, 11, .3));--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)}.action-button--neutral{--icon-bg-color: var(--Base-Inverse-80, rgba(255, 255, 255, .8));--label-color: var(--Base-Inverse-Default, #fff);--border-color: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--bg-color: linear-gradient( 0deg, var(--Base-Inverse-20, rgba(255, 255, 255, .2)) 0%, var(--Base-Inverse-20, rgba(255, 255, 255, .2)) 100% ), var(--Base-Base-Default, #0b0b0b)}@media(hover:hover){.action-button--neutral:hover{--border-color: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--bg-color: linear-gradient( 0deg, var(--Base-Inverse-30, rgba(255, 255, 255, .3)) 0%, var(--Base-Inverse-30, rgba(255, 255, 255, .3)) 100% ), var(--Base-Base-Default, #0b0b0b)}}.action-button--neutral:active{--border-color: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--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)}.action-button--neutral:disabled{--label-color: var(--Base-Inverse-20, rgba(255, 255, 255, .2));--icon-bg-color: var(--Base-Inverse-20, rgba(255, 255, 255, .2));--border-color: var(--Base-Base-30, rgba(11, 11, 11, .3));--bg-color: var(--Base-Inverse-5, rgba(255, 255, 255, .05))}.action-button--critical{--icon-bg-color: var(--Base-Inverse-90, rgba(255, 255, 255, .9));--label-color: var(--Base-Inverse-Default, #fff);--border-color: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--bg-color: linear-gradient( 0deg, var(--System-Danger-80, rgba(247, 36, 48, .8)) 0%, var(--System-Danger-80, rgba(247, 36, 48, .8)) 100% ), var(--Base-Base-Default, #0b0b0b)}@media(hover:hover){.action-button--critical:hover{--border-color: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--bg-color: linear-gradient( 0deg, var(--System-Danger-Default, #f72430) 0%, var(--System-Danger-Default, #f72430) 100% ), var(--Base-Base-Default, #0b0b0b)}}.action-button--critical:active{--border-color: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--bg-color: linear-gradient( 0deg, var(--System-Danger-60, rgba(247, 36, 48, .6)) 0%, var(--System-Danger-60, rgba(247, 36, 48, .6)) 100% ), var(--Base-Base-Default, #0b0b0b)}.action-button--critical:disabled{--label-color: var(--Base-Inverse-20, rgba(255, 255, 255, .2));--icon-bg-color: var(--Base-Inverse-20, rgba(255, 255, 255, .2));--border-color: var(--Base-Base-30, rgba(11, 11, 11, .3));--bg-color: linear-gradient( 0deg, var(--System-Danger-20, rgba(247, 36, 48, .2)) 0%, var(--System-Danger-20, rgba(247, 36, 48, .2)) 100% ), var(--Base-Base-Default, #0b0b0b)}.action-button--ghost{--icon-bg-color: var(--Base-Inverse-60, rgba(255, 255, 255, .6));--label-color: var(--Base-Inverse-80, rgba(255, 255, 255, .8))}@media(hover:hover){.action-button--ghost:hover{--icon-bg-color: var(--Base-Inverse-80, rgba(255, 255, 255, .8));--label-color: var(--Base-Inverse-Default, #fff)}}.action-button--ghost:active{--icon-bg-color: var(--Base-Inverse-40, rgba(255, 255, 255, .4));--label-color: var(--Base-Inverse-50, rgba(255, 255, 255, .5))}.action-button--ghost:disabled{--icon-bg-color: var(--Base-Inverse-10, rgba(255, 255, 255, .1));--label-color: var(--Base-Inverse-10, rgba(255, 255, 255, .1))}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: W2pActionButton, decorators: [{
+            type: Component,
+            args: [{ selector: 'w2p-action-button', imports: [], template: "<button [disabled]=\"disabled()\" [class]=\"'action-button ' + classes()\" (click)=\"onClick.emit()\">\n  <div class=\"action-button__icon\">\n    <ng-content select=\"[icon]\"></ng-content>\n  </div>\n\n  <ng-content></ng-content>\n</button>", styles: ["@import\"https://fonts.cdnfonts.com/css/sf-pro-display\";:host{--w2p-ui-action-button-width: 18rem}.action-button{display:flex;justify-content:center;width:var(--w2p-ui-action-button-width);align-items:center;height:2.5rem;padding:var(--spasing-fractional-25, .625rem) var(--Spasing-5, 1.25rem) var(--spasing-fractional-25, .625rem) var(--Spasing-4, 1rem);gap:var(--Spasing-1, .25rem);background:var(--bg-color);border:1px solid var(--border-color);border-radius:var(--Border-radius-3, .75rem)}.action-button__icon{color:var(--icon-bg-color);--w2p-ui-icon-size: .875rem;display:contents}.action-button__icon w2p-ui-icon-add-square{display:contents}.action-button{color:var(--label-color);font-family:SF Pro Display;font-size:.875rem;font-style:normal;font-weight:500;line-height:normal;letter-spacing:.0125rem;text-box-trim:trim-both;text-box-edge:cap alphabetic;text-box:trim-both cap alphabetic}\n", ".action-button--primary{--icon-bg-color: var(--Base-Inverse-80, rgba(255, 255, 255, .8));--bg-color: var(--Brand-Primary-Default, #f3400d);--border-color: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--label-color: var(--Base-Inverse-Default, #fff)}@media(hover:hover){.action-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)}}.action-button--primary:active{--label-color: var(--Base-Inverse-50, rgba(255, 255, 255, .5));--icon-bg-color: var(--Base-Inverse-50, rgba(255, 255, 255, .5));--border-color: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--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)}.action-button--primary:disabled{--label-color: var(--Base-Base-80, rgba(11, 11, 11, .8));--icon-bg-color: var(--Base-Base-40, rgba(11, 11, 11, .4));--border-color: var(--Base-Base-30, rgba(11, 11, 11, .3));--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)}.action-button--neutral{--icon-bg-color: var(--Base-Inverse-80, rgba(255, 255, 255, .8));--label-color: var(--Base-Inverse-Default, #fff);--border-color: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--bg-color: linear-gradient( 0deg, var(--Base-Inverse-20, rgba(255, 255, 255, .2)) 0%, var(--Base-Inverse-20, rgba(255, 255, 255, .2)) 100% ), var(--Base-Base-Default, #0b0b0b)}@media(hover:hover){.action-button--neutral:hover{--border-color: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--bg-color: linear-gradient( 0deg, var(--Base-Inverse-30, rgba(255, 255, 255, .3)) 0%, var(--Base-Inverse-30, rgba(255, 255, 255, .3)) 100% ), var(--Base-Base-Default, #0b0b0b)}}.action-button--neutral:active{--border-color: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--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)}.action-button--neutral:disabled{--label-color: var(--Base-Inverse-20, rgba(255, 255, 255, .2));--icon-bg-color: var(--Base-Inverse-20, rgba(255, 255, 255, .2));--border-color: var(--Base-Base-30, rgba(11, 11, 11, .3));--bg-color: var(--Base-Inverse-5, rgba(255, 255, 255, .05))}.action-button--critical{--icon-bg-color: var(--Base-Inverse-90, rgba(255, 255, 255, .9));--label-color: var(--Base-Inverse-Default, #fff);--border-color: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--bg-color: linear-gradient( 0deg, var(--System-Danger-80, rgba(247, 36, 48, .8)) 0%, var(--System-Danger-80, rgba(247, 36, 48, .8)) 100% ), var(--Base-Base-Default, #0b0b0b)}@media(hover:hover){.action-button--critical:hover{--border-color: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--bg-color: linear-gradient( 0deg, var(--System-Danger-Default, #f72430) 0%, var(--System-Danger-Default, #f72430) 100% ), var(--Base-Base-Default, #0b0b0b)}}.action-button--critical:active{--border-color: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--bg-color: linear-gradient( 0deg, var(--System-Danger-60, rgba(247, 36, 48, .6)) 0%, var(--System-Danger-60, rgba(247, 36, 48, .6)) 100% ), var(--Base-Base-Default, #0b0b0b)}.action-button--critical:disabled{--label-color: var(--Base-Inverse-20, rgba(255, 255, 255, .2));--icon-bg-color: var(--Base-Inverse-20, rgba(255, 255, 255, .2));--border-color: var(--Base-Base-30, rgba(11, 11, 11, .3));--bg-color: linear-gradient( 0deg, var(--System-Danger-20, rgba(247, 36, 48, .2)) 0%, var(--System-Danger-20, rgba(247, 36, 48, .2)) 100% ), var(--Base-Base-Default, #0b0b0b)}.action-button--ghost{--icon-bg-color: var(--Base-Inverse-60, rgba(255, 255, 255, .6));--label-color: var(--Base-Inverse-80, rgba(255, 255, 255, .8))}@media(hover:hover){.action-button--ghost:hover{--icon-bg-color: var(--Base-Inverse-80, rgba(255, 255, 255, .8));--label-color: var(--Base-Inverse-Default, #fff)}}.action-button--ghost:active{--icon-bg-color: var(--Base-Inverse-40, rgba(255, 255, 255, .4));--label-color: var(--Base-Inverse-50, rgba(255, 255, 255, .5))}.action-button--ghost:disabled{--icon-bg-color: var(--Base-Inverse-10, rgba(255, 255, 255, .1));--label-color: var(--Base-Inverse-10, rgba(255, 255, 255, .1))}\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 }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { W2pActionButton };
+//# sourceMappingURL=w2p-ui-kit-components-action-button.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"w2p-ui-kit-components-action-button.mjs","sources":["../../../projects/kit/components/action-button/action-button.ts","../../../projects/kit/components/action-button/action-button.html","../../../projects/kit/components/action-button/w2p-ui-kit-components-action-button.ts"],"sourcesContent":["import { Component, output, input, computed } from '@angular/core';\n\n@Component({\n  selector: 'w2p-action-button',\n  imports: [],\n  templateUrl: './action-button.html',\n  styleUrls: ['./action-button.scss', './variants.scss'],\n})\nexport class W2pActionButton {\n  public readonly onClick = output<void>();\n  public readonly variant = input<'primary' | 'neutral' | 'critical' | 'ghost'>('primary');\n  public readonly disabled = input<boolean>(false);\n\n  protected readonly classes = computed((): string => {\n    return `action-button--${this.variant()}`;\n  });\n}\n","<button [disabled]=\"disabled()\" [class]=\"'action-button ' + classes()\" (click)=\"onClick.emit()\">\n  <div class=\"action-button__icon\">\n    <ng-content select=\"[icon]\"></ng-content>\n  </div>\n\n  <ng-content></ng-content>\n</button>","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;MAQa,eAAe,CAAA;IACV,OAAO,GAAG,MAAM,EAAQ;AACxB,IAAA,OAAO,GAAG,KAAK,CAA+C,SAAS,8EAAC;AACxE,IAAA,QAAQ,GAAG,KAAK,CAAU,KAAK,+EAAC;AAE7B,IAAA,OAAO,GAAG,QAAQ,CAAC,MAAa;AACjD,QAAA,OAAO,kBAAkB,IAAI,CAAC,OAAO,EAAE,EAAE;AAC3C,IAAA,CAAC,8EAAC;wGAPS,eAAe,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAf,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,eAAe,yXCR5B,oPAMS,EAAA,MAAA,EAAA,CAAA,q4BAAA,EAAA,80IAAA,CAAA,EAAA,CAAA;;4FDEI,eAAe,EAAA,UAAA,EAAA,CAAA;kBAN3B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,mBAAmB,WACpB,EAAE,EAAA,QAAA,EAAA,oPAAA,EAAA,MAAA,EAAA,CAAA,q4BAAA,EAAA,80IAAA,CAAA,EAAA;;;AEJb;;AAEG;;;;"}

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: ["@import\"https://fonts.cdnfonts.com/css/sf-pro-display\";: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.5rem;width:1.5rem;height:1.5rem}.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:1rem;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:.75rem;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: ["@import\"https://fonts.cdnfonts.com/css/sf-pro-display\";: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.5rem;width:1.5rem;height:1.5rem}.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:1rem;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:.75rem;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" }] });
 }
 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: ["@import\"https://fonts.cdnfonts.com/css/sf-pro-display\";: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.5rem;width:1.5rem;height:1.5rem}.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:1rem;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:.75rem;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: ["@import\"https://fonts.cdnfonts.com/css/sf-pro-display\";: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.5rem;width:1.5rem;height:1.5rem}.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:1rem;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:.75rem;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"] }]
         }], 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

@@ -10,16 +10,31 @@ 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: ["@import\"https://fonts.cdnfonts.com/css/sf-pro-display\";: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.5rem;width:1.5rem;height:1.5rem}.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:1rem;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:.75rem;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: ["@import\"https://fonts.cdnfonts.com/css/sf-pro-display\";: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.5rem;width:1.5rem;height:1.5rem}.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:1rem;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:.75rem;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" }] });
 }
 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: ["@import\"https://fonts.cdnfonts.com/css/sf-pro-display\";: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.5rem;width:1.5rem;height:1.5rem}.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:1rem;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:.75rem;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: ["@import\"https://fonts.cdnfonts.com/css/sf-pro-display\";: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.5rem;width:1.5rem;height:1.5rem}.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:1rem;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:.75rem;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"] }]
+        }], 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 {
+    onClick = output();
+    variant = input('primary', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    classes = computed(() => {
+        return `action-button--${this.variant()}`;
+    }, ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: W2pActionButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.18", type: W2pActionButton, isStandalone: true, selector: "w2p-action-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]=\"'action-button ' + classes()\" (click)=\"onClick.emit()\">\n  <div class=\"action-button__icon\">\n    <ng-content select=\"[icon]\"></ng-content>\n  </div>\n\n  <ng-content></ng-content>\n</button>", styles: ["@import\"https://fonts.cdnfonts.com/css/sf-pro-display\";:host{--w2p-ui-action-button-width: 18rem}.action-button{display:flex;justify-content:center;width:var(--w2p-ui-action-button-width);align-items:center;height:2.5rem;padding:var(--spasing-fractional-25, .625rem) var(--Spasing-5, 1.25rem) var(--spasing-fractional-25, .625rem) var(--Spasing-4, 1rem);gap:var(--Spasing-1, .25rem);background:var(--bg-color);border:1px solid var(--border-color);border-radius:var(--Border-radius-3, .75rem)}.action-button__icon{color:var(--icon-bg-color);--w2p-ui-icon-size: .875rem;display:contents}.action-button__icon w2p-ui-icon-add-square{display:contents}.action-button{color:var(--label-color);font-family:SF Pro Display;font-size:.875rem;font-style:normal;font-weight:500;line-height:normal;letter-spacing:.0125rem;text-box-trim:trim-both;text-box-edge:cap alphabetic;text-box:trim-both cap alphabetic}\n", ".action-button--primary{--icon-bg-color: var(--Base-Inverse-80, rgba(255, 255, 255, .8));--bg-color: var(--Brand-Primary-Default, #f3400d);--border-color: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--label-color: var(--Base-Inverse-Default, #fff)}@media(hover:hover){.action-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)}}.action-button--primary:active{--label-color: var(--Base-Inverse-50, rgba(255, 255, 255, .5));--icon-bg-color: var(--Base-Inverse-50, rgba(255, 255, 255, .5));--border-color: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--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)}.action-button--primary:disabled{--label-color: var(--Base-Base-80, rgba(11, 11, 11, .8));--icon-bg-color: var(--Base-Base-40, rgba(11, 11, 11, .4));--border-color: var(--Base-Base-30, rgba(11, 11, 11, .3));--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)}.action-button--neutral{--icon-bg-color: var(--Base-Inverse-80, rgba(255, 255, 255, .8));--label-color: var(--Base-Inverse-Default, #fff);--border-color: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--bg-color: linear-gradient( 0deg, var(--Base-Inverse-20, rgba(255, 255, 255, .2)) 0%, var(--Base-Inverse-20, rgba(255, 255, 255, .2)) 100% ), var(--Base-Base-Default, #0b0b0b)}@media(hover:hover){.action-button--neutral:hover{--border-color: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--bg-color: linear-gradient( 0deg, var(--Base-Inverse-30, rgba(255, 255, 255, .3)) 0%, var(--Base-Inverse-30, rgba(255, 255, 255, .3)) 100% ), var(--Base-Base-Default, #0b0b0b)}}.action-button--neutral:active{--border-color: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--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)}.action-button--neutral:disabled{--label-color: var(--Base-Inverse-20, rgba(255, 255, 255, .2));--icon-bg-color: var(--Base-Inverse-20, rgba(255, 255, 255, .2));--border-color: var(--Base-Base-30, rgba(11, 11, 11, .3));--bg-color: var(--Base-Inverse-5, rgba(255, 255, 255, .05))}.action-button--critical{--icon-bg-color: var(--Base-Inverse-90, rgba(255, 255, 255, .9));--label-color: var(--Base-Inverse-Default, #fff);--border-color: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--bg-color: linear-gradient( 0deg, var(--System-Danger-80, rgba(247, 36, 48, .8)) 0%, var(--System-Danger-80, rgba(247, 36, 48, .8)) 100% ), var(--Base-Base-Default, #0b0b0b)}@media(hover:hover){.action-button--critical:hover{--border-color: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--bg-color: linear-gradient( 0deg, var(--System-Danger-Default, #f72430) 0%, var(--System-Danger-Default, #f72430) 100% ), var(--Base-Base-Default, #0b0b0b)}}.action-button--critical:active{--border-color: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--bg-color: linear-gradient( 0deg, var(--System-Danger-60, rgba(247, 36, 48, .6)) 0%, var(--System-Danger-60, rgba(247, 36, 48, .6)) 100% ), var(--Base-Base-Default, #0b0b0b)}.action-button--critical:disabled{--label-color: var(--Base-Inverse-20, rgba(255, 255, 255, .2));--icon-bg-color: var(--Base-Inverse-20, rgba(255, 255, 255, .2));--border-color: var(--Base-Base-30, rgba(11, 11, 11, .3));--bg-color: linear-gradient( 0deg, var(--System-Danger-20, rgba(247, 36, 48, .2)) 0%, var(--System-Danger-20, rgba(247, 36, 48, .2)) 100% ), var(--Base-Base-Default, #0b0b0b)}.action-button--ghost{--icon-bg-color: var(--Base-Inverse-60, rgba(255, 255, 255, .6));--label-color: var(--Base-Inverse-80, rgba(255, 255, 255, .8))}@media(hover:hover){.action-button--ghost:hover{--icon-bg-color: var(--Base-Inverse-80, rgba(255, 255, 255, .8));--label-color: var(--Base-Inverse-Default, #fff)}}.action-button--ghost:active{--icon-bg-color: var(--Base-Inverse-40, rgba(255, 255, 255, .4));--label-color: var(--Base-Inverse-50, rgba(255, 255, 255, .5))}.action-button--ghost:disabled{--icon-bg-color: var(--Base-Inverse-10, rgba(255, 255, 255, .1));--label-color: var(--Base-Inverse-10, rgba(255, 255, 255, .1))}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: W2pActionButton, decorators: [{
+            type: Component,
+            args: [{ selector: 'w2p-action-button', imports: [], template: "<button [disabled]=\"disabled()\" [class]=\"'action-button ' + classes()\" (click)=\"onClick.emit()\">\n  <div class=\"action-button__icon\">\n    <ng-content select=\"[icon]\"></ng-content>\n  </div>\n\n  <ng-content></ng-content>\n</button>", styles: ["@import\"https://fonts.cdnfonts.com/css/sf-pro-display\";:host{--w2p-ui-action-button-width: 18rem}.action-button{display:flex;justify-content:center;width:var(--w2p-ui-action-button-width);align-items:center;height:2.5rem;padding:var(--spasing-fractional-25, .625rem) var(--Spasing-5, 1.25rem) var(--spasing-fractional-25, .625rem) var(--Spasing-4, 1rem);gap:var(--Spasing-1, .25rem);background:var(--bg-color);border:1px solid var(--border-color);border-radius:var(--Border-radius-3, .75rem)}.action-button__icon{color:var(--icon-bg-color);--w2p-ui-icon-size: .875rem;display:contents}.action-button__icon w2p-ui-icon-add-square{display:contents}.action-button{color:var(--label-color);font-family:SF Pro Display;font-size:.875rem;font-style:normal;font-weight:500;line-height:normal;letter-spacing:.0125rem;text-box-trim:trim-both;text-box-edge:cap alphabetic;text-box:trim-both cap alphabetic}\n", ".action-button--primary{--icon-bg-color: var(--Base-Inverse-80, rgba(255, 255, 255, .8));--bg-color: var(--Brand-Primary-Default, #f3400d);--border-color: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--label-color: var(--Base-Inverse-Default, #fff)}@media(hover:hover){.action-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)}}.action-button--primary:active{--label-color: var(--Base-Inverse-50, rgba(255, 255, 255, .5));--icon-bg-color: var(--Base-Inverse-50, rgba(255, 255, 255, .5));--border-color: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--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)}.action-button--primary:disabled{--label-color: var(--Base-Base-80, rgba(11, 11, 11, .8));--icon-bg-color: var(--Base-Base-40, rgba(11, 11, 11, .4));--border-color: var(--Base-Base-30, rgba(11, 11, 11, .3));--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)}.action-button--neutral{--icon-bg-color: var(--Base-Inverse-80, rgba(255, 255, 255, .8));--label-color: var(--Base-Inverse-Default, #fff);--border-color: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--bg-color: linear-gradient( 0deg, var(--Base-Inverse-20, rgba(255, 255, 255, .2)) 0%, var(--Base-Inverse-20, rgba(255, 255, 255, .2)) 100% ), var(--Base-Base-Default, #0b0b0b)}@media(hover:hover){.action-button--neutral:hover{--border-color: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--bg-color: linear-gradient( 0deg, var(--Base-Inverse-30, rgba(255, 255, 255, .3)) 0%, var(--Base-Inverse-30, rgba(255, 255, 255, .3)) 100% ), var(--Base-Base-Default, #0b0b0b)}}.action-button--neutral:active{--border-color: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--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)}.action-button--neutral:disabled{--label-color: var(--Base-Inverse-20, rgba(255, 255, 255, .2));--icon-bg-color: var(--Base-Inverse-20, rgba(255, 255, 255, .2));--border-color: var(--Base-Base-30, rgba(11, 11, 11, .3));--bg-color: var(--Base-Inverse-5, rgba(255, 255, 255, .05))}.action-button--critical{--icon-bg-color: var(--Base-Inverse-90, rgba(255, 255, 255, .9));--label-color: var(--Base-Inverse-Default, #fff);--border-color: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--bg-color: linear-gradient( 0deg, var(--System-Danger-80, rgba(247, 36, 48, .8)) 0%, var(--System-Danger-80, rgba(247, 36, 48, .8)) 100% ), var(--Base-Base-Default, #0b0b0b)}@media(hover:hover){.action-button--critical:hover{--border-color: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--bg-color: linear-gradient( 0deg, var(--System-Danger-Default, #f72430) 0%, var(--System-Danger-Default, #f72430) 100% ), var(--Base-Base-Default, #0b0b0b)}}.action-button--critical:active{--border-color: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--bg-color: linear-gradient( 0deg, var(--System-Danger-60, rgba(247, 36, 48, .6)) 0%, var(--System-Danger-60, rgba(247, 36, 48, .6)) 100% ), var(--Base-Base-Default, #0b0b0b)}.action-button--critical:disabled{--label-color: var(--Base-Inverse-20, rgba(255, 255, 255, .2));--icon-bg-color: var(--Base-Inverse-20, rgba(255, 255, 255, .2));--border-color: var(--Base-Base-30, rgba(11, 11, 11, .3));--bg-color: linear-gradient( 0deg, var(--System-Danger-20, rgba(247, 36, 48, .2)) 0%, var(--System-Danger-20, rgba(247, 36, 48, .2)) 100% ), var(--Base-Base-Default, #0b0b0b)}.action-button--ghost{--icon-bg-color: var(--Base-Inverse-60, rgba(255, 255, 255, .6));--label-color: var(--Base-Inverse-80, rgba(255, 255, 255, .8))}@media(hover:hover){.action-button--ghost:hover{--icon-bg-color: var(--Base-Inverse-80, rgba(255, 255, 255, .8));--label-color: var(--Base-Inverse-Default, #fff)}}.action-button--ghost:active{--icon-bg-color: var(--Base-Inverse-40, rgba(255, 255, 255, .4));--label-color: var(--Base-Inverse-50, rgba(255, 255, 255, .5))}.action-button--ghost:disabled{--icon-bg-color: var(--Base-Inverse-10, rgba(255, 255, 255, .1));--label-color: var(--Base-Inverse-10, rgba(255, 255, 255, .1))}\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 }] }] } });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { W2pButton };
+export { W2pActionButton, W2pButton };
 //# sourceMappingURL=w2p-ui-kit-components.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"w2p-ui-kit-components.mjs","sources":["../../../projects/kit/components/button/button.ts","../../../projects/kit/components/button/button.html","../../../projects/kit/components/w2p-ui-kit-components.ts"],"sourcesContent":["import { Component, computed, input, output } from '@angular/core';\nimport { NavArrowIconComponent } from '@w2p-ui/icons';\n\n@Component({\n  selector: 'w2p-button',\n  imports: [NavArrowIconComponent],\n  templateUrl: './button.html',\n  styleUrls: ['./button.scss', './variants.scss'],\n})\nexport class W2pButton {\n  public readonly onClick = output<void>();\n  public readonly variant = input<'primary' | 'neutral'>('primary');\n  public readonly disabled = input<boolean>(false);\n\n  protected readonly classes = computed((): string => {\n    return `button--${this.variant()}`;\n  });\n}\n","<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>","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;MASa,SAAS,CAAA;IACJ,OAAO,GAAG,MAAM,EAAQ;AACxB,IAAA,OAAO,GAAG,KAAK,CAAwB,SAAS,8EAAC;AACjD,IAAA,QAAQ,GAAG,KAAK,CAAU,KAAK,+EAAC;AAE7B,IAAA,OAAO,GAAG,QAAQ,CAAC,MAAa;AACjD,QAAA,OAAO,WAAW,IAAI,CAAC,OAAO,EAAE,EAAE;AACpC,IAAA,CAAC,8EAAC;wGAPS,SAAS,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;4FAAT,SAAS,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,OAAA,EAAA,SAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECTtB,+jBAkBS,EAAA,MAAA,EAAA,CAAA,8oDAAA,EAAA,+1JAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDbG,qBAAqB,EAAA,QAAA,EAAA,uBAAA,EAAA,CAAA,EAAA,CAAA;;4FAIpB,SAAS,EAAA,UAAA,EAAA,CAAA;kBANrB,SAAS;+BACE,YAAY,EAAA,OAAA,EACb,CAAC,qBAAqB,CAAC,EAAA,QAAA,EAAA,+jBAAA,EAAA,MAAA,EAAA,CAAA,8oDAAA,EAAA,+1JAAA,CAAA,EAAA;;;AELlC;;AAEG;;;;"}
+{"version":3,"file":"w2p-ui-kit-components.mjs","sources":["../../../projects/kit/components/button/button.ts","../../../projects/kit/components/button/button.html","../../../projects/kit/components/action-button/action-button.ts","../../../projects/kit/components/action-button/action-button.html","../../../projects/kit/components/w2p-ui-kit-components.ts"],"sourcesContent":["import { Component, computed, input, output } from '@angular/core';\nimport { NavArrowIconComponent } from '@w2p-ui/icons';\n\n@Component({\n  selector: 'w2p-button',\n  imports: [NavArrowIconComponent],\n  templateUrl: './button.html',\n  styleUrls: ['./button.scss', './variants.scss'],\n})\nexport class W2pButton {\n  public readonly onClick = output<void>();\n  public readonly variant = input<'primary' | 'neutral'>('primary');\n  public readonly disabled = input<boolean>(false);\n\n  protected readonly classes = computed((): string => {\n    return `button--${this.variant()}`;\n  });\n}\n","<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>","import { Component, output, input, computed } from '@angular/core';\n\n@Component({\n  selector: 'w2p-action-button',\n  imports: [],\n  templateUrl: './action-button.html',\n  styleUrls: ['./action-button.scss', './variants.scss'],\n})\nexport class W2pActionButton {\n  public readonly onClick = output<void>();\n  public readonly variant = input<'primary' | 'neutral' | 'critical' | 'ghost'>('primary');\n  public readonly disabled = input<boolean>(false);\n\n  protected readonly classes = computed((): string => {\n    return `action-button--${this.variant()}`;\n  });\n}\n","<button [disabled]=\"disabled()\" [class]=\"'action-button ' + classes()\" (click)=\"onClick.emit()\">\n  <div class=\"action-button__icon\">\n    <ng-content select=\"[icon]\"></ng-content>\n  </div>\n\n  <ng-content></ng-content>\n</button>","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;MASa,SAAS,CAAA;IACJ,OAAO,GAAG,MAAM,EAAQ;AACxB,IAAA,OAAO,GAAG,KAAK,CAAwB,SAAS,8EAAC;AACjD,IAAA,QAAQ,GAAG,KAAK,CAAU,KAAK,+EAAC;AAE7B,IAAA,OAAO,GAAG,QAAQ,CAAC,MAAa;AACjD,QAAA,OAAO,WAAW,IAAI,CAAC,OAAO,EAAE,EAAE;AACpC,IAAA,CAAC,8EAAC;wGAPS,SAAS,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;4FAAT,SAAS,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,OAAA,EAAA,SAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECTtB,+jBAkBS,EAAA,MAAA,EAAA,CAAA,8oDAAA,EAAA,+1JAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDbG,qBAAqB,EAAA,QAAA,EAAA,uBAAA,EAAA,CAAA,EAAA,CAAA;;4FAIpB,SAAS,EAAA,UAAA,EAAA,CAAA;kBANrB,SAAS;+BACE,YAAY,EAAA,OAAA,EACb,CAAC,qBAAqB,CAAC,EAAA,QAAA,EAAA,+jBAAA,EAAA,MAAA,EAAA,CAAA,8oDAAA,EAAA,+1JAAA,CAAA,EAAA;;;MEGrB,eAAe,CAAA;IACV,OAAO,GAAG,MAAM,EAAQ;AACxB,IAAA,OAAO,GAAG,KAAK,CAA+C,SAAS,8EAAC;AACxE,IAAA,QAAQ,GAAG,KAAK,CAAU,KAAK,+EAAC;AAE7B,IAAA,OAAO,GAAG,QAAQ,CAAC,MAAa;AACjD,QAAA,OAAO,kBAAkB,IAAI,CAAC,OAAO,EAAE,EAAE;AAC3C,IAAA,CAAC,8EAAC;wGAPS,eAAe,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAf,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,eAAe,yXCR5B,oPAMS,EAAA,MAAA,EAAA,CAAA,q4BAAA,EAAA,80IAAA,CAAA,EAAA,CAAA;;4FDEI,eAAe,EAAA,UAAA,EAAA,CAAA;kBAN3B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,mBAAmB,WACpB,EAAE,EAAA,QAAA,EAAA,oPAAA,EAAA,MAAA,EAAA,CAAA,q4BAAA,EAAA,80IAAA,CAAA,EAAA;;;AEJb;;AAEG;;;;"}

package/fesm2022/w2p-ui-kit.mjs

@@ -10,16 +10,31 @@ 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: ["@import\"https://fonts.cdnfonts.com/css/sf-pro-display\";: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.5rem;width:1.5rem;height:1.5rem}.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:1rem;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:.75rem;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: ["@import\"https://fonts.cdnfonts.com/css/sf-pro-display\";: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.5rem;width:1.5rem;height:1.5rem}.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:1rem;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:.75rem;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" }] });
 }
 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: ["@import\"https://fonts.cdnfonts.com/css/sf-pro-display\";: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.5rem;width:1.5rem;height:1.5rem}.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:1rem;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:.75rem;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: ["@import\"https://fonts.cdnfonts.com/css/sf-pro-display\";: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.5rem;width:1.5rem;height:1.5rem}.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:1rem;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:.75rem;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"] }]
+        }], 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 {
+    onClick = output();
+    variant = input('primary', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    classes = computed(() => {
+        return `action-button--${this.variant()}`;
+    }, ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: W2pActionButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.18", type: W2pActionButton, isStandalone: true, selector: "w2p-action-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]=\"'action-button ' + classes()\" (click)=\"onClick.emit()\">\n  <div class=\"action-button__icon\">\n    <ng-content select=\"[icon]\"></ng-content>\n  </div>\n\n  <ng-content></ng-content>\n</button>", styles: ["@import\"https://fonts.cdnfonts.com/css/sf-pro-display\";:host{--w2p-ui-action-button-width: 18rem}.action-button{display:flex;justify-content:center;width:var(--w2p-ui-action-button-width);align-items:center;height:2.5rem;padding:var(--spasing-fractional-25, .625rem) var(--Spasing-5, 1.25rem) var(--spasing-fractional-25, .625rem) var(--Spasing-4, 1rem);gap:var(--Spasing-1, .25rem);background:var(--bg-color);border:1px solid var(--border-color);border-radius:var(--Border-radius-3, .75rem)}.action-button__icon{color:var(--icon-bg-color);--w2p-ui-icon-size: .875rem;display:contents}.action-button__icon w2p-ui-icon-add-square{display:contents}.action-button{color:var(--label-color);font-family:SF Pro Display;font-size:.875rem;font-style:normal;font-weight:500;line-height:normal;letter-spacing:.0125rem;text-box-trim:trim-both;text-box-edge:cap alphabetic;text-box:trim-both cap alphabetic}\n", ".action-button--primary{--icon-bg-color: var(--Base-Inverse-80, rgba(255, 255, 255, .8));--bg-color: var(--Brand-Primary-Default, #f3400d);--border-color: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--label-color: var(--Base-Inverse-Default, #fff)}@media(hover:hover){.action-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)}}.action-button--primary:active{--label-color: var(--Base-Inverse-50, rgba(255, 255, 255, .5));--icon-bg-color: var(--Base-Inverse-50, rgba(255, 255, 255, .5));--border-color: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--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)}.action-button--primary:disabled{--label-color: var(--Base-Base-80, rgba(11, 11, 11, .8));--icon-bg-color: var(--Base-Base-40, rgba(11, 11, 11, .4));--border-color: var(--Base-Base-30, rgba(11, 11, 11, .3));--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)}.action-button--neutral{--icon-bg-color: var(--Base-Inverse-80, rgba(255, 255, 255, .8));--label-color: var(--Base-Inverse-Default, #fff);--border-color: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--bg-color: linear-gradient( 0deg, var(--Base-Inverse-20, rgba(255, 255, 255, .2)) 0%, var(--Base-Inverse-20, rgba(255, 255, 255, .2)) 100% ), var(--Base-Base-Default, #0b0b0b)}@media(hover:hover){.action-button--neutral:hover{--border-color: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--bg-color: linear-gradient( 0deg, var(--Base-Inverse-30, rgba(255, 255, 255, .3)) 0%, var(--Base-Inverse-30, rgba(255, 255, 255, .3)) 100% ), var(--Base-Base-Default, #0b0b0b)}}.action-button--neutral:active{--border-color: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--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)}.action-button--neutral:disabled{--label-color: var(--Base-Inverse-20, rgba(255, 255, 255, .2));--icon-bg-color: var(--Base-Inverse-20, rgba(255, 255, 255, .2));--border-color: var(--Base-Base-30, rgba(11, 11, 11, .3));--bg-color: var(--Base-Inverse-5, rgba(255, 255, 255, .05))}.action-button--critical{--icon-bg-color: var(--Base-Inverse-90, rgba(255, 255, 255, .9));--label-color: var(--Base-Inverse-Default, #fff);--border-color: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--bg-color: linear-gradient( 0deg, var(--System-Danger-80, rgba(247, 36, 48, .8)) 0%, var(--System-Danger-80, rgba(247, 36, 48, .8)) 100% ), var(--Base-Base-Default, #0b0b0b)}@media(hover:hover){.action-button--critical:hover{--border-color: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--bg-color: linear-gradient( 0deg, var(--System-Danger-Default, #f72430) 0%, var(--System-Danger-Default, #f72430) 100% ), var(--Base-Base-Default, #0b0b0b)}}.action-button--critical:active{--border-color: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--bg-color: linear-gradient( 0deg, var(--System-Danger-60, rgba(247, 36, 48, .6)) 0%, var(--System-Danger-60, rgba(247, 36, 48, .6)) 100% ), var(--Base-Base-Default, #0b0b0b)}.action-button--critical:disabled{--label-color: var(--Base-Inverse-20, rgba(255, 255, 255, .2));--icon-bg-color: var(--Base-Inverse-20, rgba(255, 255, 255, .2));--border-color: var(--Base-Base-30, rgba(11, 11, 11, .3));--bg-color: linear-gradient( 0deg, var(--System-Danger-20, rgba(247, 36, 48, .2)) 0%, var(--System-Danger-20, rgba(247, 36, 48, .2)) 100% ), var(--Base-Base-Default, #0b0b0b)}.action-button--ghost{--icon-bg-color: var(--Base-Inverse-60, rgba(255, 255, 255, .6));--label-color: var(--Base-Inverse-80, rgba(255, 255, 255, .8))}@media(hover:hover){.action-button--ghost:hover{--icon-bg-color: var(--Base-Inverse-80, rgba(255, 255, 255, .8));--label-color: var(--Base-Inverse-Default, #fff)}}.action-button--ghost:active{--icon-bg-color: var(--Base-Inverse-40, rgba(255, 255, 255, .4));--label-color: var(--Base-Inverse-50, rgba(255, 255, 255, .5))}.action-button--ghost:disabled{--icon-bg-color: var(--Base-Inverse-10, rgba(255, 255, 255, .1));--label-color: var(--Base-Inverse-10, rgba(255, 255, 255, .1))}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: W2pActionButton, decorators: [{
+            type: Component,
+            args: [{ selector: 'w2p-action-button', imports: [], template: "<button [disabled]=\"disabled()\" [class]=\"'action-button ' + classes()\" (click)=\"onClick.emit()\">\n  <div class=\"action-button__icon\">\n    <ng-content select=\"[icon]\"></ng-content>\n  </div>\n\n  <ng-content></ng-content>\n</button>", styles: ["@import\"https://fonts.cdnfonts.com/css/sf-pro-display\";:host{--w2p-ui-action-button-width: 18rem}.action-button{display:flex;justify-content:center;width:var(--w2p-ui-action-button-width);align-items:center;height:2.5rem;padding:var(--spasing-fractional-25, .625rem) var(--Spasing-5, 1.25rem) var(--spasing-fractional-25, .625rem) var(--Spasing-4, 1rem);gap:var(--Spasing-1, .25rem);background:var(--bg-color);border:1px solid var(--border-color);border-radius:var(--Border-radius-3, .75rem)}.action-button__icon{color:var(--icon-bg-color);--w2p-ui-icon-size: .875rem;display:contents}.action-button__icon w2p-ui-icon-add-square{display:contents}.action-button{color:var(--label-color);font-family:SF Pro Display;font-size:.875rem;font-style:normal;font-weight:500;line-height:normal;letter-spacing:.0125rem;text-box-trim:trim-both;text-box-edge:cap alphabetic;text-box:trim-both cap alphabetic}\n", ".action-button--primary{--icon-bg-color: var(--Base-Inverse-80, rgba(255, 255, 255, .8));--bg-color: var(--Brand-Primary-Default, #f3400d);--border-color: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--label-color: var(--Base-Inverse-Default, #fff)}@media(hover:hover){.action-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)}}.action-button--primary:active{--label-color: var(--Base-Inverse-50, rgba(255, 255, 255, .5));--icon-bg-color: var(--Base-Inverse-50, rgba(255, 255, 255, .5));--border-color: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--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)}.action-button--primary:disabled{--label-color: var(--Base-Base-80, rgba(11, 11, 11, .8));--icon-bg-color: var(--Base-Base-40, rgba(11, 11, 11, .4));--border-color: var(--Base-Base-30, rgba(11, 11, 11, .3));--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)}.action-button--neutral{--icon-bg-color: var(--Base-Inverse-80, rgba(255, 255, 255, .8));--label-color: var(--Base-Inverse-Default, #fff);--border-color: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--bg-color: linear-gradient( 0deg, var(--Base-Inverse-20, rgba(255, 255, 255, .2)) 0%, var(--Base-Inverse-20, rgba(255, 255, 255, .2)) 100% ), var(--Base-Base-Default, #0b0b0b)}@media(hover:hover){.action-button--neutral:hover{--border-color: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--bg-color: linear-gradient( 0deg, var(--Base-Inverse-30, rgba(255, 255, 255, .3)) 0%, var(--Base-Inverse-30, rgba(255, 255, 255, .3)) 100% ), var(--Base-Base-Default, #0b0b0b)}}.action-button--neutral:active{--border-color: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--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)}.action-button--neutral:disabled{--label-color: var(--Base-Inverse-20, rgba(255, 255, 255, .2));--icon-bg-color: var(--Base-Inverse-20, rgba(255, 255, 255, .2));--border-color: var(--Base-Base-30, rgba(11, 11, 11, .3));--bg-color: var(--Base-Inverse-5, rgba(255, 255, 255, .05))}.action-button--critical{--icon-bg-color: var(--Base-Inverse-90, rgba(255, 255, 255, .9));--label-color: var(--Base-Inverse-Default, #fff);--border-color: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--bg-color: linear-gradient( 0deg, var(--System-Danger-80, rgba(247, 36, 48, .8)) 0%, var(--System-Danger-80, rgba(247, 36, 48, .8)) 100% ), var(--Base-Base-Default, #0b0b0b)}@media(hover:hover){.action-button--critical:hover{--border-color: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--bg-color: linear-gradient( 0deg, var(--System-Danger-Default, #f72430) 0%, var(--System-Danger-Default, #f72430) 100% ), var(--Base-Base-Default, #0b0b0b)}}.action-button--critical:active{--border-color: var(--Base-Inverse-5, rgba(255, 255, 255, .05));--bg-color: linear-gradient( 0deg, var(--System-Danger-60, rgba(247, 36, 48, .6)) 0%, var(--System-Danger-60, rgba(247, 36, 48, .6)) 100% ), var(--Base-Base-Default, #0b0b0b)}.action-button--critical:disabled{--label-color: var(--Base-Inverse-20, rgba(255, 255, 255, .2));--icon-bg-color: var(--Base-Inverse-20, rgba(255, 255, 255, .2));--border-color: var(--Base-Base-30, rgba(11, 11, 11, .3));--bg-color: linear-gradient( 0deg, var(--System-Danger-20, rgba(247, 36, 48, .2)) 0%, var(--System-Danger-20, rgba(247, 36, 48, .2)) 100% ), var(--Base-Base-Default, #0b0b0b)}.action-button--ghost{--icon-bg-color: var(--Base-Inverse-60, rgba(255, 255, 255, .6));--label-color: var(--Base-Inverse-80, rgba(255, 255, 255, .8))}@media(hover:hover){.action-button--ghost:hover{--icon-bg-color: var(--Base-Inverse-80, rgba(255, 255, 255, .8));--label-color: var(--Base-Inverse-Default, #fff)}}.action-button--ghost:active{--icon-bg-color: var(--Base-Inverse-40, rgba(255, 255, 255, .4));--label-color: var(--Base-Inverse-50, rgba(255, 255, 255, .5))}.action-button--ghost:disabled{--icon-bg-color: var(--Base-Inverse-10, rgba(255, 255, 255, .1));--label-color: var(--Base-Inverse-10, rgba(255, 255, 255, .1))}\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 }] }] } });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { W2pButton };
+export { W2pActionButton, W2pButton };
 //# sourceMappingURL=w2p-ui-kit.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"w2p-ui-kit.mjs","sources":["../../../projects/kit/components/button/button.ts","../../../projects/kit/components/button/button.html","../../../projects/kit/w2p-ui-kit.ts"],"sourcesContent":["import { Component, computed, input, output } from '@angular/core';\nimport { NavArrowIconComponent } from '@w2p-ui/icons';\n\n@Component({\n  selector: 'w2p-button',\n  imports: [NavArrowIconComponent],\n  templateUrl: './button.html',\n  styleUrls: ['./button.scss', './variants.scss'],\n})\nexport class W2pButton {\n  public readonly onClick = output<void>();\n  public readonly variant = input<'primary' | 'neutral'>('primary');\n  public readonly disabled = input<boolean>(false);\n\n  protected readonly classes = computed((): string => {\n    return `button--${this.variant()}`;\n  });\n}\n","<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>","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;MASa,SAAS,CAAA;IACJ,OAAO,GAAG,MAAM,EAAQ;AACxB,IAAA,OAAO,GAAG,KAAK,CAAwB,SAAS,8EAAC;AACjD,IAAA,QAAQ,GAAG,KAAK,CAAU,KAAK,+EAAC;AAE7B,IAAA,OAAO,GAAG,QAAQ,CAAC,MAAa;AACjD,QAAA,OAAO,WAAW,IAAI,CAAC,OAAO,EAAE,EAAE;AACpC,IAAA,CAAC,8EAAC;wGAPS,SAAS,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;4FAAT,SAAS,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,OAAA,EAAA,SAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECTtB,+jBAkBS,EAAA,MAAA,EAAA,CAAA,8oDAAA,EAAA,+1JAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDbG,qBAAqB,EAAA,QAAA,EAAA,uBAAA,EAAA,CAAA,EAAA,CAAA;;4FAIpB,SAAS,EAAA,UAAA,EAAA,CAAA;kBANrB,SAAS;+BACE,YAAY,EAAA,OAAA,EACb,CAAC,qBAAqB,CAAC,EAAA,QAAA,EAAA,+jBAAA,EAAA,MAAA,EAAA,CAAA,8oDAAA,EAAA,+1JAAA,CAAA,EAAA;;;AELlC;;AAEG;;;;"}
+{"version":3,"file":"w2p-ui-kit.mjs","sources":["../../../projects/kit/components/button/button.ts","../../../projects/kit/components/button/button.html","../../../projects/kit/components/action-button/action-button.ts","../../../projects/kit/components/action-button/action-button.html","../../../projects/kit/w2p-ui-kit.ts"],"sourcesContent":["import { Component, computed, input, output } from '@angular/core';\nimport { NavArrowIconComponent } from '@w2p-ui/icons';\n\n@Component({\n  selector: 'w2p-button',\n  imports: [NavArrowIconComponent],\n  templateUrl: './button.html',\n  styleUrls: ['./button.scss', './variants.scss'],\n})\nexport class W2pButton {\n  public readonly onClick = output<void>();\n  public readonly variant = input<'primary' | 'neutral'>('primary');\n  public readonly disabled = input<boolean>(false);\n\n  protected readonly classes = computed((): string => {\n    return `button--${this.variant()}`;\n  });\n}\n","<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>","import { Component, output, input, computed } from '@angular/core';\n\n@Component({\n  selector: 'w2p-action-button',\n  imports: [],\n  templateUrl: './action-button.html',\n  styleUrls: ['./action-button.scss', './variants.scss'],\n})\nexport class W2pActionButton {\n  public readonly onClick = output<void>();\n  public readonly variant = input<'primary' | 'neutral' | 'critical' | 'ghost'>('primary');\n  public readonly disabled = input<boolean>(false);\n\n  protected readonly classes = computed((): string => {\n    return `action-button--${this.variant()}`;\n  });\n}\n","<button [disabled]=\"disabled()\" [class]=\"'action-button ' + classes()\" (click)=\"onClick.emit()\">\n  <div class=\"action-button__icon\">\n    <ng-content select=\"[icon]\"></ng-content>\n  </div>\n\n  <ng-content></ng-content>\n</button>","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;MASa,SAAS,CAAA;IACJ,OAAO,GAAG,MAAM,EAAQ;AACxB,IAAA,OAAO,GAAG,KAAK,CAAwB,SAAS,8EAAC;AACjD,IAAA,QAAQ,GAAG,KAAK,CAAU,KAAK,+EAAC;AAE7B,IAAA,OAAO,GAAG,QAAQ,CAAC,MAAa;AACjD,QAAA,OAAO,WAAW,IAAI,CAAC,OAAO,EAAE,EAAE;AACpC,IAAA,CAAC,8EAAC;wGAPS,SAAS,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;4FAAT,SAAS,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,OAAA,EAAA,SAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECTtB,+jBAkBS,EAAA,MAAA,EAAA,CAAA,8oDAAA,EAAA,+1JAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDbG,qBAAqB,EAAA,QAAA,EAAA,uBAAA,EAAA,CAAA,EAAA,CAAA;;4FAIpB,SAAS,EAAA,UAAA,EAAA,CAAA;kBANrB,SAAS;+BACE,YAAY,EAAA,OAAA,EACb,CAAC,qBAAqB,CAAC,EAAA,QAAA,EAAA,+jBAAA,EAAA,MAAA,EAAA,CAAA,8oDAAA,EAAA,+1JAAA,CAAA,EAAA;;;MEGrB,eAAe,CAAA;IACV,OAAO,GAAG,MAAM,EAAQ;AACxB,IAAA,OAAO,GAAG,KAAK,CAA+C,SAAS,8EAAC;AACxE,IAAA,QAAQ,GAAG,KAAK,CAAU,KAAK,+EAAC;AAE7B,IAAA,OAAO,GAAG,QAAQ,CAAC,MAAa;AACjD,QAAA,OAAO,kBAAkB,IAAI,CAAC,OAAO,EAAE,EAAE;AAC3C,IAAA,CAAC,8EAAC;wGAPS,eAAe,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAf,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,eAAe,yXCR5B,oPAMS,EAAA,MAAA,EAAA,CAAA,q4BAAA,EAAA,80IAAA,CAAA,EAAA,CAAA;;4FDEI,eAAe,EAAA,UAAA,EAAA,CAAA;kBAN3B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,mBAAmB,WACpB,EAAE,EAAA,QAAA,EAAA,oPAAA,EAAA,MAAA,EAAA,CAAA,q4BAAA,EAAA,80IAAA,CAAA,EAAA;;;AEJb;;AAEG;;;;"}

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@w2p-ui/kit",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "peerDependencies": {
     "@angular/common": "^21.2.0",
     "@angular/core": "^21.2.0"
   },
   "dependencies": {
-    "@w2p-ui/icons": "^0.0.11",
+    "@w2p-ui/icons": "*",
     "tslib": "^2.3.0"
   },
   "sideEffects": false,
@@ -24,6 +24,10 @@
       "types": "./types/w2p-ui-kit-components.d.ts",
       "default": "./fesm2022/w2p-ui-kit-components.mjs"
     },
+    "./components/action-button": {
+      "types": "./types/w2p-ui-kit-components-action-button.d.ts",
+      "default": "./fesm2022/w2p-ui-kit-components-action-button.mjs"
+    },
     "./components/button": {
       "types": "./types/w2p-ui-kit-components-button.d.ts",
       "default": "./fesm2022/w2p-ui-kit-components-button.mjs"

package/types/w2p-ui-kit-components-action-button.d.ts

@@ -0,0 +1,12 @@
+import * as _angular_core from '@angular/core';
+
+declare class W2pActionButton {
+    readonly onClick: _angular_core.OutputEmitterRef<void>;
+    readonly variant: _angular_core.InputSignal<"primary" | "neutral" | "critical" | "ghost">;
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    protected readonly classes: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<W2pActionButton, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<W2pActionButton, "w2p-action-button", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "onClick": "onClick"; }, never, ["[icon]", "*"], true, never>;
+}
+
+export { W2pActionButton };

package/types/w2p-ui-kit-components.d.ts

@@ -9,4 +9,13 @@ declare class W2pButton {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<W2pButton, "w2p-button", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "onClick": "onClick"; }, never, ["[icon]", "[label]", "[description]"], true, never>;
 }
 
-export { W2pButton };
+declare class W2pActionButton {
+    readonly onClick: _angular_core.OutputEmitterRef<void>;
+    readonly variant: _angular_core.InputSignal<"primary" | "neutral" | "critical" | "ghost">;
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    protected readonly classes: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<W2pActionButton, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<W2pActionButton, "w2p-action-button", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "onClick": "onClick"; }, never, ["[icon]", "*"], true, never>;
+}
+
+export { W2pActionButton, W2pButton };

package/types/w2p-ui-kit.d.ts

@@ -9,4 +9,13 @@ declare class W2pButton {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<W2pButton, "w2p-button", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "onClick": "onClick"; }, never, ["[icon]", "[label]", "[description]"], true, never>;
 }
 
-export { W2pButton };
+declare class W2pActionButton {
+    readonly onClick: _angular_core.OutputEmitterRef<void>;
+    readonly variant: _angular_core.InputSignal<"primary" | "neutral" | "critical" | "ghost">;
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    protected readonly classes: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<W2pActionButton, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<W2pActionButton, "w2p-action-button", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "onClick": "onClick"; }, never, ["[icon]", "*"], true, never>;
+}
+
+export { W2pActionButton, W2pButton };