@w2p-ui/kit 0.0.17 → 0.0.23

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (27) hide show
  1. package/.storybook/main.ts +7 -0
  2. package/.storybook/preview.ts +14 -0
  3. package/.storybook/tsconfig.json +11 -0
  4. package/.storybook/typings.d.ts +4 -0
  5. package/components/button/button.html +19 -0
  6. package/components/button/button.scss +93 -0
  7. package/components/button/button.stories.ts +62 -0
  8. package/components/button/button.ts +18 -0
  9. package/components/button/index.ts +1 -0
  10. package/components/button/ng-package.json +5 -0
  11. package/components/button/variants.scss +147 -0
  12. package/components/index.ts +1 -0
  13. package/components/ng-package.json +5 -0
  14. package/index.ts +1 -0
  15. package/ng-package.json +10 -0
  16. package/package.json +5 -25
  17. package/tsconfig.lib.json +13 -0
  18. package/tsconfig.lib.prod.json +11 -0
  19. package/fesm2022/w2p-ui-kit-components-button.mjs +0 -25
  20. package/fesm2022/w2p-ui-kit-components-button.mjs.map +0 -1
  21. package/fesm2022/w2p-ui-kit-components.mjs +0 -6
  22. package/fesm2022/w2p-ui-kit-components.mjs.map +0 -1
  23. package/fesm2022/w2p-ui-kit.mjs +0 -6
  24. package/fesm2022/w2p-ui-kit.mjs.map +0 -1
  25. package/types/w2p-ui-kit-components-button.d.ts +0 -12
  26. package/types/w2p-ui-kit-components.d.ts +0 -1
  27. package/types/w2p-ui-kit.d.ts +0 -1
package/.storybook/main.ts ADDED
@@ -0,0 +1,7 @@
1
+ import type { StorybookConfig } from '@storybook/angular';
2
+ const config: StorybookConfig = {
3
+ stories: ['../**/*.stories.@(js|jsx|mjs|ts|tsx)'],
4
+ addons: [],
5
+ framework: '@storybook/angular',
6
+ };
7
+ export default config;
package/.storybook/preview.ts ADDED
@@ -0,0 +1,14 @@
1
+ import type { Preview } from '@storybook/angular';
2
+
3
+ const preview: Preview = {
4
+ parameters: {
5
+ controls: {
6
+ matchers: {
7
+ color: /(background|color)$/i,
8
+ date: /Date$/i,
9
+ },
10
+ },
11
+ },
12
+ };
13
+
14
+ export default preview;
package/.storybook/tsconfig.json ADDED
@@ -0,0 +1,11 @@
1
+ {
2
+ "extends": "../tsconfig.lib.json",
3
+ "compilerOptions": {
4
+ "types": ["node"],
5
+ "allowSyntheticDefaultImports": true,
6
+ "resolveJsonModule": true
7
+ },
8
+ "exclude": ["../test.ts", "../**/*.spec.ts"],
9
+ "include": ["../**/*.ts", "../**/*.stories.*", "./preview.ts"],
10
+ "files": ["./typings.d.ts"]
11
+ }
package/.storybook/typings.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ declare module '*.md' {
2
+ const content: string;
3
+ export default content;
4
+ }
package/components/button/button.html ADDED
@@ -0,0 +1,19 @@
1
+ <button [disabled]="disabled()" [class]="'button ' + classes()" (click)="onClick.emit()">
2
+ <div class="button__icon">
3
+ <ng-content select="[icon]"></ng-content>
4
+ </div>
5
+
6
+ <div class="button__separator"></div>
7
+
8
+ <div class="button__text">
9
+ <p><ng-content select="[label]"></ng-content></p>
10
+ <span> <ng-content select="[description]"></ng-content>
11
+ </span>
12
+ </div>
13
+
14
+ <div class="button__action">
15
+ <div class="button__action-icon">
16
+ <w2p-ui-icon-nav-arrow></w2p-ui-icon-nav-arrow>
17
+ </div>
18
+ </div>
19
+ </button>
package/components/button/button.scss ADDED
@@ -0,0 +1,93 @@
1
+ @import url('https://fonts.cdnfonts.com/css/sf-pro-display');
2
+
3
+ :host {
4
+ --w2p-ui-button-width: 20.5rem;
5
+ }
6
+
7
+ .button {
8
+ display: flex;
9
+ justify-content: space-between;
10
+ width: var(--w2p-ui-button-width);
11
+ padding: var(--spasing-fractional-35, 0.875rem) var(--Spasing-4, 1rem);
12
+ align-items: center;
13
+ gap: var(--Spasing-3, 0.75rem);
14
+
15
+ background: var(--bg-color);
16
+ border: 1px solid var(--border-color);
17
+ border-radius: var(--Border-radius-3, 0.75rem);
18
+
19
+ &__icon {
20
+ color: var(--icon-bg-color);
21
+ --w2p-ui-icon-size: 1.5rem;
22
+ width: 1.5rem;
23
+ height: 1.5rem;
24
+ }
25
+
26
+ &__separator {
27
+ width: 1px;
28
+ height: 1.5rem;
29
+ background: var(--separator-color);
30
+ }
31
+
32
+ &__text {
33
+ display: flex;
34
+ flex-direction: column;
35
+ align-items: flex-start;
36
+ gap: var(--Spasing-2, 0.5rem);
37
+ flex: 1 0 0;
38
+
39
+ p {
40
+ color: var(--label-color);
41
+ text-box-trim: trim-both;
42
+ text-box-edge: cap alphabetic;
43
+ text-box: trim-both cap alphabetic;
44
+ margin: 0;
45
+ font-family: 'SF Pro Display';
46
+ font-size: 1rem;
47
+ font-style: normal;
48
+ font-weight: 500;
49
+ line-height: normal;
50
+ }
51
+
52
+ span {
53
+ color: var(--description-color);
54
+ text-box-trim: trim-both;
55
+ text-box-edge: cap alphabetic;
56
+ text-box: trim-both cap alphabetic;
57
+ margin: 0;
58
+ font-family: 'SF Pro Display';
59
+ font-size: 0.75rem;
60
+ font-style: normal;
61
+ font-weight: 400;
62
+ line-height: normal;
63
+ letter-spacing: 0.0125rem;
64
+ }
65
+ }
66
+
67
+ &__action {
68
+ display: flex;
69
+ width: 1.25rem;
70
+ height: 1.25rem;
71
+ padding: var(--spasing-fractional-05, 0.125rem);
72
+ flex-direction: column;
73
+ justify-content: center;
74
+ align-items: center;
75
+ gap: var(--Spasing-0, 0);
76
+ flex-shrink: 0;
77
+ aspect-ratio: 1/1;
78
+
79
+ background: var(--action-icon-background);
80
+ border: var(--action-icon-border);
81
+ border-radius: var(--action-icon-radius);
82
+ color: var(--action-icon-color);
83
+
84
+ w2p-ui-icon-nav-arrow {
85
+ display: contents;
86
+ --w2p-ui-icon-size: 0.75rem;
87
+ }
88
+ }
89
+
90
+ &__action-icon {
91
+ display: contents;
92
+ }
93
+ }
package/components/button/button.stories.ts ADDED
@@ -0,0 +1,62 @@
1
+ import type { Meta, StoryObj } from '@storybook/angular';
2
+ import { fn } from 'storybook/test';
3
+ import { W2pButton } from './button';
4
+ import { AddSquareIconComponent } from '@w2p-ui/icons';
5
+
6
+ const meta: Meta<W2pButton> = {
7
+ title: 'Buttons/Navigation',
8
+ component: W2pButton,
9
+ tags: ['autodocs'],
10
+ argTypes: {},
11
+ args: { onClick: fn() },
12
+ };
13
+
14
+ export default meta;
15
+ type Story = StoryObj<W2pButton>;
16
+
17
+ export const Primary: Story = {
18
+ argTypes: {
19
+ disabled: { control: { type: 'boolean' }, name: 'Заблокировано' },
20
+ onClick: { name: 'Клик' },
21
+ },
22
+ args: {
23
+ disabled: false,
24
+ },
25
+
26
+ render: (args) => ({
27
+ props: args,
28
+ moduleMetadata: {
29
+ imports: [AddSquareIconComponent],
30
+ },
31
+ template: `
32
+ <w2p-button [disabled]="disabled" variant="primary" (onClick)="onClick()">
33
+ <w2p-ui-icon-add-square icon></w2p-ui-icon-add-square>
34
+ <ng-container label>Button Label</ng-container>
35
+ <ng-container description>Description</ng-container>
36
+ </w2p-button>
37
+ `,
38
+ }),
39
+ };
40
+
41
+ export const Neutral: Story = {
42
+ argTypes: {
43
+ disabled: { control: { type: 'boolean' }, name: 'Заблокировано' },
44
+ onClick: { name: 'Клик' },
45
+ },
46
+ args: {
47
+ disabled: false,
48
+ },
49
+ render: (args) => ({
50
+ props: args,
51
+ moduleMetadata: {
52
+ imports: [AddSquareIconComponent],
53
+ },
54
+ template: `
55
+ <w2p-button [disabled]="disabled" variant="neutral" (onClick)="onClick()">
56
+ <w2p-ui-icon-add-square icon></w2p-ui-icon-add-square>
57
+ <ng-container label>Button Label</ng-container>
58
+ <ng-container description>Description</ng-container>
59
+ </w2p-button>
60
+ `,
61
+ }),
62
+ };
package/components/button/button.ts ADDED
@@ -0,0 +1,18 @@
1
+ import { Component, computed, input, output } from '@angular/core';
2
+ import { NavArrowIconComponent } from '@w2p-ui/icons';
3
+
4
+ @Component({
5
+ selector: 'w2p-button',
6
+ imports: [NavArrowIconComponent],
7
+ templateUrl: './button.html',
8
+ styleUrls: ['./button.scss', './variants.scss'],
9
+ })
10
+ export class W2pButton {
11
+ public readonly onClick = output<void>();
12
+ public readonly variant = input<'primary' | 'neutral'>('primary');
13
+ public readonly disabled = input<boolean>(false);
14
+
15
+ protected readonly classes = computed((): string => {
16
+ return `button--${this.variant()}`;
17
+ });
18
+ }
package/components/button/index.ts ADDED
@@ -0,0 +1 @@
1
+ export * from './button';
package/components/button/ng-package.json ADDED
@@ -0,0 +1,5 @@
1
+ {
2
+ "lib": {
3
+ "entryFile": "index.ts"
4
+ }
5
+ }
package/components/button/variants.scss ADDED
@@ -0,0 +1,147 @@
1
+ .button {
2
+ --action-icon-radius: var(--Border-radius-999, 62.4375rem);
3
+
4
+ &--primary {
5
+ --bg-color: var(--Brand-Primary-Default, #f3400d);
6
+ --label-color: var(--White-100, #fff);
7
+ --description-color: var(--Base-Inverse-80, rgba(255, 255, 255, 0.8));
8
+ --border-color: var(--Base-Inverse-5, rgba(255, 255, 255, 0.05));
9
+ --icon-bg-color: var(--Base-Inverse-80, rgba(255, 255, 255, 0.8));
10
+
11
+ --action-icon-color: var(--Base-Inverse-70, rgba(255, 255, 255, 0.7));
12
+ --action-icon-radius: var(--Border-radius-999, 62.4375rem);
13
+ --action-icon-border: 0.5px solid var(--Base-Inverse-20, rgba(255, 255, 255, 0.2));
14
+ --action-icon-background: var(--Base-Inverse-20, rgba(255, 255, 255, 0.2));
15
+
16
+ --separator-color: var(--Base-Inverse-20, rgba(255, 255, 255, 0.2));
17
+
18
+ &:hover {
19
+ @media (hover: hover) {
20
+ --bg-color:
21
+ linear-gradient(
22
+ 0deg,
23
+ var(--Brand-Primary-90, rgba(243, 64, 13, 0.9)) 0%,
24
+ var(--Brand-Primary-90, rgba(243, 64, 13, 0.9)) 100%
25
+ ),
26
+ var(--Base-Inverse-Default, #fff);
27
+ --icon-bg-color: var(--Base-Inverse-95, rgba(255, 255, 255, 0.95));
28
+ --action-icon-color: var(--Brand-Primary-90, rgba(243, 64, 13, 0.9));
29
+ --action-icon-border: 0.5px solid var(--Base-Inverse-20, rgba(255, 255, 255, 0.2));
30
+ --action-icon-background: var(--Base-Inverse-90, rgba(255, 255, 255, 0.9));
31
+ }
32
+ }
33
+
34
+ &:active {
35
+ --bg-color:
36
+ linear-gradient(
37
+ 0deg,
38
+ var(--Brand-Primary-70, rgba(243, 64, 13, 0.7)) 0%,
39
+ var(--Brand-Primary-70, rgba(243, 64, 13, 0.7)) 100%
40
+ ),
41
+ var(--Base-Base-Default, #0b0b0b);
42
+ --icon-bg-color: var(--Base-Inverse-50, rgba(255, 255, 255, 0.5));
43
+ --label-color: var(--Base-Inverse-50, rgba(255, 255, 255, 0.5));
44
+ --description-color: var(--Base-Inverse-30, rgba(255, 255, 255, 0.3));
45
+ --action-icon-color: var(--Brand-Primary-70, rgba(243, 64, 13, 0.7));
46
+ --action-icon-border: 0.5px solid var(--Base-Inverse-5, rgba(255, 255, 255, 0.05));
47
+ --action-icon-background: var(--Base-Inverse-50, rgba(255, 255, 255, 0.5));
48
+ }
49
+
50
+ &:disabled {
51
+ --bg-color:
52
+ linear-gradient(
53
+ 0deg,
54
+ var(--Brand-Primary-30, rgba(243, 64, 13, 0.3)) 0%,
55
+ var(--Brand-Primary-30, rgba(243, 64, 13, 0.3)) 100%
56
+ ),
57
+ var(--Base-Base-Default, #0b0b0b);
58
+ --icon-bg-color: var(--Base-Base-40, rgba(11, 11, 11, 0.4));
59
+ --label-color: var(--Base-Base-80, rgba(11, 11, 11, 0.8));
60
+ --description-color: var(--Base-Base-50, rgba(11, 11, 11, 0.5));
61
+ --action-icon-color: var(--Base-Base-40, rgba(11, 11, 11, 0.4));
62
+ --action-icon-border: none;
63
+ --action-icon-background: var(--Base-Base-30, rgba(11, 11, 11, 0.3));
64
+ --separator-color: var(--Base-Base-20, rgba(11, 11, 11, 0.2));
65
+ }
66
+ }
67
+
68
+ &--neutral {
69
+ --bg-color:
70
+ linear-gradient(
71
+ 0deg,
72
+ var(--Base-Inverse-5, rgba(255, 255, 255, 0.05)) 0%,
73
+ var(--Base-Inverse-5, rgba(255, 255, 255, 0.05)) 100%
74
+ ),
75
+ var(--Base-Base-Default, #0b0b0b);
76
+ --border-color: var(--Base-Inverse-5, rgba(255, 255, 255, 0.05));
77
+
78
+ --label-color: var(--White-100, #fff);
79
+ --description-color: var(--Base-Inverse-60, rgba(255, 255, 255, 0.6));
80
+
81
+ --icon-bg-color: var(--Base-Inverse-80, rgba(255, 255, 255, 0.8));
82
+
83
+ --action-icon-color: var(--Base-Inverse-70, rgba(255, 255, 255, 0.7));
84
+ --action-icon-border: 0.5px solid var(--Base-Inverse-20, rgba(255, 255, 255, 0.2));
85
+ --action-icon-background: var(--Base-Inverse-20, rgba(255, 255, 255, 0.2));
86
+
87
+ --separator-color: var(--Base-Inverse-20, rgba(255, 255, 255, 0.2));
88
+
89
+ &:hover {
90
+ @media (hover: hover) {
91
+ --bg-color:
92
+ linear-gradient(
93
+ 0deg,
94
+ var(--Base-Inverse-10, rgba(255, 255, 255, 0.1)) 0%,
95
+ var(--Base-Inverse-10, rgba(255, 255, 255, 0.1)) 100%
96
+ ),
97
+ var(--Base-Base-Default, #0b0b0b);
98
+
99
+ --icon-bg-color: var(--Base-Inverse-80, rgba(255, 255, 255, 0.8));
100
+
101
+ --action-icon-color: var(--Base-Base-Default, #0b0b0b);
102
+ --action-icon-border: 0.5px solid var(--Base-Inverse-20, rgba(255, 255, 255, 0.2));
103
+ --action-icon-background: var(--Base-Inverse-90, rgba(255, 255, 255, 0.9));
104
+
105
+ --separator-color: var(--Base-Inverse-20, rgba(255, 255, 255, 0.2));
106
+ }
107
+ }
108
+
109
+ &:active {
110
+ --bg-color:
111
+ linear-gradient(
112
+ 0deg,
113
+ var(--Base-Inverse-5, rgba(255, 255, 255, 0.05)) 0%,
114
+ var(--Base-Inverse-5, rgba(255, 255, 255, 0.05)) 100%
115
+ ),
116
+ var(--Base-Base-Default, #0b0b0b);
117
+
118
+ --icon-bg-color: var(--Base-Inverse-50, rgba(255, 255, 255, 0.5));
119
+
120
+ --label-color: var(--Base-Inverse-50, rgba(255, 255, 255, 0.5));
121
+ --description-color: var(--Base-Inverse-30, rgba(255, 255, 255, 0.3));
122
+
123
+ --action-icon-color: var(--Base-Base-Default, #0b0b0b) --action-icon-border: 0.5px solid
124
+ var(--Base-Inverse-5, rgba(255, 255, 255, 0.05));
125
+ --action-icon-background: var(--Base-Inverse-50, rgba(255, 255, 255, 0.5));
126
+ }
127
+
128
+ &:disabled {
129
+ --bg-color:
130
+ linear-gradient(
131
+ 0deg,
132
+ var(--Base-Inverse-5, rgba(255, 255, 255, 0.05)) 0%,
133
+ var(--Base-Inverse-5, rgba(255, 255, 255, 0.05)) 100%
134
+ ),
135
+ var(--Base-Base-Default, #0b0b0b);
136
+ --icon-bg-color: var(--Base-Inverse-10, rgba(255, 255, 255, 0.1));
137
+ --label-color: var(--Base-Inverse-10, rgba(255, 255, 255, 0.1));
138
+ --description-color: var(--Base-Inverse-10, rgba(255, 255, 255, 0.1));
139
+
140
+ --action-icon-color: var(--Base-Base-Default, #0b0b0b);
141
+ --action-icon-border: none;
142
+ --action-icon-background: var(--Base-Inverse-5, rgba(255, 255, 255, 0.05));
143
+
144
+ --separator-color: var(--Base-Base-20, rgba(11, 11, 11, 0.2));
145
+ }
146
+ }
147
+ }
package/components/index.ts ADDED
@@ -0,0 +1 @@
1
+ export * from './button';
package/components/ng-package.json ADDED
@@ -0,0 +1,5 @@
1
+ {
2
+ "lib": {
3
+ "entryFile": "index.ts"
4
+ }
5
+ }
package/index.ts ADDED
@@ -0,0 +1 @@
1
+ export * from './components';
package/ng-package.json ADDED
@@ -0,0 +1,10 @@
1
+ {
2
+ "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
3
+ "assets": ["styles"],
4
+ "allowedNonPeerDependencies": ["."],
5
+ "dest": "../../dist/kit",
6
+ "inlineStyleLanguage": "scss",
7
+ "lib": {
8
+ "entryFile": "index.ts"
9
+ }
10
+ }
package/package.json CHANGED
@@ -1,33 +1,13 @@
1
1
  {
2
2
  "name": "@w2p-ui/kit",
3
- "version": "0.0.17",
3
+ "version": "0.0.23",
4
4
  "peerDependencies": {
5
5
  "@angular/common": "^21.2.0",
6
- "@angular/core": "^21.2.0",
7
- "@w2p-ui/icons": "^0.0.11"
6
+ "@angular/core": "^21.2.0"
8
7
  },
9
8
  "dependencies": {
9
+ "@w2p-ui/icons": "^0.0.11",
10
10
  "tslib": "^2.3.0"
11
11
  },
12
- "sideEffects": false,
13
- "module": "fesm2022/w2p-ui-kit.mjs",
14
- "typings": "types/w2p-ui-kit.d.ts",
15
- "exports": {
16
- "./package.json": {
17
- "default": "./package.json"
18
- },
19
- ".": {
20
- "types": "./types/w2p-ui-kit.d.ts",
21
- "default": "./fesm2022/w2p-ui-kit.mjs"
22
- },
23
- "./components": {
24
- "types": "./types/w2p-ui-kit-components.d.ts",
25
- "default": "./fesm2022/w2p-ui-kit-components.mjs"
26
- },
27
- "./components/button": {
28
- "types": "./types/w2p-ui-kit-components-button.d.ts",
29
- "default": "./fesm2022/w2p-ui-kit-components-button.mjs"
30
- }
31
- },
32
- "type": "module"
33
- }
12
+ "sideEffects": false
13
+ }
package/tsconfig.lib.json ADDED
@@ -0,0 +1,13 @@
1
+ /* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
2
+ /* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
3
+ {
4
+ "extends": "../../tsconfig.json",
5
+ "compilerOptions": {
6
+ "outDir": "../../out-tsc/lib",
7
+ "declaration": true,
8
+ "declarationMap": true,
9
+ "types": []
10
+ },
11
+ "include": ["src/**/*.ts"],
12
+ "exclude": ["**/*.stories.ts", "**/*.spec.ts"]
13
+ }
package/tsconfig.lib.prod.json ADDED
@@ -0,0 +1,11 @@
1
+ /* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
2
+ /* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
3
+ {
4
+ "extends": "./tsconfig.lib.json",
5
+ "compilerOptions": {
6
+ "declarationMap": false
7
+ },
8
+ "angularCompilerOptions": {
9
+ "compilationMode": "partial"
10
+ }
11
+ }
package/fesm2022/w2p-ui-kit-components-button.mjs DELETED
@@ -1,25 +0,0 @@
1
- import * as i0 from '@angular/core';
2
- import { output, input, computed, Component } from '@angular/core';
3
- import { NavArrowIconComponent } from '@w2p-ui/icons';
4
-
5
- class W2pButton {
6
- onClick = output();
7
- variant = input('primary', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
8
- disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
9
- classes = computed(() => {
10
- return `button--${this.variant()}`;
11
- }, ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
12
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: W2pButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
13
- 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" }] });
14
- }
15
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: W2pButton, decorators: [{
16
- type: Component,
17
- 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"] }]
18
- }], 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 }] }] } });
19
-
20
- /**
21
- * Generated bundle index. Do not edit.
22
- */
23
-
24
- export { W2pButton };
25
- //# sourceMappingURL=w2p-ui-kit-components-button.mjs.map
package/fesm2022/w2p-ui-kit-components-button.mjs.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"w2p-ui-kit-components-button.mjs","sources":["../../../projects/kit/components/button/button.ts","../../../projects/kit/components/button/button.html","../../../projects/kit/components/button/w2p-ui-kit-components-button.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;;;;"}
package/fesm2022/w2p-ui-kit-components.mjs DELETED
@@ -1,6 +0,0 @@
1
- export * from '@w2p-ui/kit/components/button';
2
-
3
- /**
4
- * Generated bundle index. Do not edit.
5
- */
6
- //# sourceMappingURL=w2p-ui-kit-components.mjs.map
package/fesm2022/w2p-ui-kit-components.mjs.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"w2p-ui-kit-components.mjs","sources":["../../../projects/kit/components/w2p-ui-kit-components.ts"],"sourcesContent":["/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;AAAA;;AAEG"}
package/fesm2022/w2p-ui-kit.mjs DELETED
@@ -1,6 +0,0 @@
1
- export * from '@w2p-ui/kit/components/button';
2
-
3
- /**
4
- * Generated bundle index. Do not edit.
5
- */
6
- //# sourceMappingURL=w2p-ui-kit.mjs.map
package/fesm2022/w2p-ui-kit.mjs.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"w2p-ui-kit.mjs","sources":["../../../projects/kit/w2p-ui-kit.ts"],"sourcesContent":["/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;AAAA;;AAEG"}
package/types/w2p-ui-kit-components-button.d.ts DELETED
@@ -1,12 +0,0 @@
1
- import * as _angular_core from '@angular/core';
2
-
3
- declare class W2pButton {
4
- readonly onClick: _angular_core.OutputEmitterRef<void>;
5
- readonly variant: _angular_core.InputSignal<"primary" | "neutral">;
6
- readonly disabled: _angular_core.InputSignal<boolean>;
7
- protected readonly classes: _angular_core.Signal<string>;
8
- static ɵfac: _angular_core.ɵɵFactoryDeclaration<W2pButton, never>;
9
- 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>;
10
- }
11
-
12
- export { W2pButton };
package/types/w2p-ui-kit-components.d.ts DELETED
@@ -1 +0,0 @@
1
- export * from '@w2p-ui/kit/components/button';
package/types/w2p-ui-kit.d.ts DELETED
@@ -1 +0,0 @@
1
- export * from '@w2p-ui/kit/components/button';