@justeattakeaway/pie-icon-button 0.21.1 → 0.21.2
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.
- package/dist/index.js +44 -100
- package/dist/react.js +23 -22
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -1,26 +1,27 @@
|
|
|
1
|
-
import { unsafeCSS as m, LitElement as g, html as
|
|
2
|
-
import { property as
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
1
|
+
import { unsafeCSS as m, LitElement as g, html as s } from "lit";
|
|
2
|
+
import { property as l } from "lit/decorators.js";
|
|
3
|
+
import "@justeattakeaway/pie-spinner";
|
|
4
|
+
const h = (i, o, t) => function(r, n) {
|
|
5
|
+
const a = `#${n}`;
|
|
6
|
+
Object.defineProperty(r, n, {
|
|
6
7
|
get() {
|
|
7
8
|
return this[a];
|
|
8
9
|
},
|
|
9
|
-
set(
|
|
10
|
-
const
|
|
11
|
-
o.includes(
|
|
12
|
-
`<${
|
|
10
|
+
set(v) {
|
|
11
|
+
const f = this[a];
|
|
12
|
+
o.includes(v) ? this[a] = v : (console.error(
|
|
13
|
+
`<${i}> Invalid value "${v}" provided for property "${n}".`,
|
|
13
14
|
`Must be one of: ${o.join(" | ")}.`,
|
|
14
15
|
`Falling back to default value: "${t}"`
|
|
15
|
-
), this[a] = t), this.requestUpdate(
|
|
16
|
+
), this[a] = t), this.requestUpdate(n, f);
|
|
16
17
|
}
|
|
17
18
|
});
|
|
18
19
|
};
|
|
19
|
-
function
|
|
20
|
-
customElements.get(
|
|
20
|
+
function p(i, o) {
|
|
21
|
+
customElements.get(i) ? console.warn(`PIE Web Component: "${i}" has already been defined. Please ensure the component is only being defined once in your application.`) : customElements.define(i, o);
|
|
21
22
|
}
|
|
22
|
-
const
|
|
23
|
-
`,
|
|
23
|
+
const u = `:host{--btn-dimension: 48px;--btn-icon-size: 24px}.o-iconBtn{--btn-border-radius: var(--dt-radius-rounded-e);--btn-bg-color: var(--dt-color-interactive-brand);--btn-icon-fill: var(--dt-color-content-interactive-primary);block-size:var(--btn-dimension);inline-size:var(--btn-dimension);border-color:var(--btn-border-color);border-radius:var(--btn-border-radius);background-color:var(--btn-bg-color);color:var(--btn-icon-fill);cursor:pointer;user-select:none;outline:none;border:none;display:flex;align-items:center;justify-content:center}.o-iconBtn:focus-visible{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}.o-iconBtn svg{height:var(--btn-icon-size);width:var(--btn-icon-size)}.o-iconBtn[variant=primary]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + var(--hover-modifier)))}.o-iconBtn[variant=primary]:active:not(:disabled),.o-iconBtn[variant=primary][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + var(--active-modifier)))}.o-iconBtn[variant=secondary]{--btn-bg-color: var(--dt-color-interactive-secondary);--btn-icon-fill: var(--dt-color-content-interactive-secondary)}.o-iconBtn[variant=secondary]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-interactive-secondary-h), var(--dt-color-interactive-secondary-s), calc(var(--dt-color-interactive-secondary-l) + var(--hover-modifier)))}.o-iconBtn[variant=secondary]:active:not(:disabled),.o-iconBtn[variant=secondary][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-interactive-secondary-h), var(--dt-color-interactive-secondary-s), calc(var(--dt-color-interactive-secondary-l) + var(--active-modifier)))}.o-iconBtn[variant=outline]{--btn-bg-color: transparent;--btn-icon-fill: var(--dt-color-content-interactive-brand);border:1px solid var(--dt-color-border-strong)}.o-iconBtn[variant=outline]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier))}.o-iconBtn[variant=outline]:active:not(:disabled),.o-iconBtn[variant=outline][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier))}.o-iconBtn[variant=ghost]{--btn-bg-color: transparent;--btn-icon-fill: var(--dt-color-content-interactive-brand)}.o-iconBtn[variant=ghost]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier))}.o-iconBtn[variant=ghost]:active:not(:disabled),.o-iconBtn[variant=ghost][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier))}.o-iconBtn[variant=ghost-secondary]{--btn-bg-color: transparent;--btn-icon-fill: var(--dt-color-content-interactive-secondary)}.o-iconBtn[variant=ghost-secondary]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier))}.o-iconBtn[variant=ghost-secondary]:active:not(:disabled),.o-iconBtn[variant=ghost-secondary][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier))}.o-iconBtn[variant=inverse]{--btn-bg-color: var(--dt-color-interactive-inverse);--btn-icon-fill: var(--dt-color-content-interactive-brand)}.o-iconBtn[variant=inverse]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-interactive-inverse-h), var(--dt-color-interactive-inverse-s), calc(var(--dt-color-interactive-inverse-l) + var(--hover-modifier)))}.o-iconBtn[variant=inverse]:active:not(:disabled),.o-iconBtn[variant=inverse][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-interactive-inverse-h), var(--dt-color-interactive-inverse-s), calc(var(--dt-color-interactive-inverse-l) + var(--active-modifier)))}.o-iconBtn[variant=ghost-inverse]{--btn-bg-color: transparent;--btn-icon-fill: var(--dt-color-content-inverse)}.o-iconBtn[variant=ghost-inverse]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), var(--dt-color-container-default-l), var(--hover-modifier))}.o-iconBtn[variant=ghost-inverse]:active:not(:disabled),.o-iconBtn[variant=ghost-inverse][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), var(--dt-color-container-default-l), var(--active-modifier))}.o-iconBtn[disabled]{--btn-icon-fill: var(--dt-color-content-disabled);cursor:not-allowed}.o-iconBtn[disabled]:not([variant=ghost],[variant=ghost-secondary],[variant=ghost-inverse]){--btn-bg-color: var(--dt-color-disabled-01)}.o-iconBtn[disabled][variant=outline]{border-color:var(--dt-color-disabled-01)}.o-iconBtn[size=xsmall]{--btn-dimension: 32px}.o-iconBtn[size=small]{--btn-dimension: 40px}.o-iconBtn[size=large]{--btn-dimension: 56px;--btn-icon-size: 28px}
|
|
24
|
+
`, y = ["xsmall", "small", "medium", "large"], B = [
|
|
24
25
|
"primary",
|
|
25
26
|
"secondary",
|
|
26
27
|
"outline",
|
|
@@ -28,71 +29,14 @@ const $ = `:host{--btn-dimension: 48px;--btn-icon-size: 24px}.o-iconBtn{--btn-bo
|
|
|
28
29
|
"ghost-secondary",
|
|
29
30
|
"inverse",
|
|
30
31
|
"ghost-inverse"
|
|
31
|
-
]
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
},
|
|
37
|
-
set(a) {
|
|
38
|
-
const l = this[i];
|
|
39
|
-
o.includes(a) ? this[i] = a : (console.error(
|
|
40
|
-
`<${n}> Invalid value "${a}" provided for property "${r}".`,
|
|
41
|
-
`Must be one of: ${o.join(" | ")}.`,
|
|
42
|
-
`Falling back to default value: "${t}"`
|
|
43
|
-
), this[i] = t), this.requestUpdate(r, l);
|
|
44
|
-
}
|
|
45
|
-
});
|
|
46
|
-
};
|
|
47
|
-
function w(n, o) {
|
|
48
|
-
customElements.get(n) ? console.warn(`PIE Web Component: "${n}" has already been defined. Please ensure the component is only being defined once in your application.`) : customElements.define(n, o);
|
|
49
|
-
}
|
|
50
|
-
const L = `*,*:before,*:after{box-sizing:border-box}@keyframes rotate360{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.c-spinner{--spinner-size: 24px;--spinner-left-color: hsl(var(--spinner-base-color-h), var(--spinner-base-color-s), var(--spinner-base-color-l), 1);--spinner-right-color: hsl(var(--spinner-base-color-h), var(--spinner-base-color-s), var(--spinner-base-color-l), .35);block-size:var(--spinner-size);inline-size:var(--spinner-size);border-radius:var(--dt-radius-rounded-e);border-width:calc(var(--spinner-size) / 8);border-style:solid;border-color:var(--spinner-left-color) var(--spinner-right-color) var(--spinner-right-color) var(--spinner-left-color);will-change:transform;animation:rotate360 1.15s linear infinite;--spinner-base-color-h: var(--dt-color-content-brand-h);--spinner-base-color-s: var(--dt-color-content-brand-s);--spinner-base-color-l: var(--dt-color-content-brand-l)}.c-spinner[variant=secondary]{--spinner-base-color-h: var(--dt-color-content-interactive-secondary-h);--spinner-base-color-s: var(--dt-color-content-interactive-secondary-s);--spinner-base-color-l: var(--dt-color-content-interactive-secondary-l)}.c-spinner[variant=inverse]{--spinner-base-color-h: var(--dt-color-content-inverse-h);--spinner-base-color-s: var(--dt-color-content-inverse-s);--spinner-base-color-l: var(--dt-color-content-inverse-l)}.c-spinner[size=xs]{--spinner-size: 16px}.c-spinner[size=s]{--spinner-size: 20px}.c-spinner[size=l]{--spinner-size: 32px}.c-spinner[size=xl]{--spinner-size: 48px}.c-spinner-label{position:absolute;display:block;height:1px;width:1px;overflow:hidden;padding:1px;white-space:nowrap}
|
|
51
|
-
`, j = ["xs", "s", "m", "l", "xl"], O = ["brand", "secondary", "inverse"];
|
|
52
|
-
var E = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, p = (n, o, t, e) => {
|
|
53
|
-
for (var r = e > 1 ? void 0 : e ? _(o, t) : o, i = n.length - 1, a; i >= 0; i--)
|
|
54
|
-
(a = n[i]) && (r = (e ? a(o, t, r) : a(r)) || r);
|
|
55
|
-
return e && r && E(o, t, r), r;
|
|
56
|
-
};
|
|
57
|
-
const h = "pie-spinner";
|
|
58
|
-
class v extends g {
|
|
59
|
-
constructor() {
|
|
60
|
-
super(...arguments), this.size = "m", this.variant = "brand";
|
|
61
|
-
}
|
|
62
|
-
render() {
|
|
63
|
-
const { variant: o, size: t, aria: e } = this;
|
|
64
|
-
return d`
|
|
65
|
-
<div
|
|
66
|
-
data-test-id="pie-spinner"
|
|
67
|
-
class="c-spinner"
|
|
68
|
-
role="status"
|
|
69
|
-
aria-live="polite"
|
|
70
|
-
size="${t}"
|
|
71
|
-
variant="${o}">
|
|
72
|
-
${e != null && e.label ? d`<span class="c-spinner-label">${e.label}</span>` : z}
|
|
73
|
-
</div>`;
|
|
74
|
-
}
|
|
75
|
-
}
|
|
76
|
-
v.styles = m(L);
|
|
77
|
-
p([
|
|
78
|
-
c({ type: Object })
|
|
79
|
-
], v.prototype, "aria", 2);
|
|
80
|
-
p([
|
|
81
|
-
c(),
|
|
82
|
-
y(h, j, "m")
|
|
83
|
-
], v.prototype, "size", 2);
|
|
84
|
-
p([
|
|
85
|
-
c(),
|
|
86
|
-
y(h, O, "brand")
|
|
87
|
-
], v.prototype, "variant", 2);
|
|
88
|
-
w(h, v);
|
|
89
|
-
var C = Object.defineProperty, I = Object.getOwnPropertyDescriptor, b = (n, o, t, e) => {
|
|
90
|
-
for (var r = e > 1 ? void 0 : e ? I(o, t) : o, i = n.length - 1, a; i >= 0; i--)
|
|
91
|
-
(a = n[i]) && (r = (e ? a(o, t, r) : a(r)) || r);
|
|
92
|
-
return e && r && C(o, t, r), r;
|
|
32
|
+
];
|
|
33
|
+
var z = Object.defineProperty, k = Object.getOwnPropertyDescriptor, d = (i, o, t, e) => {
|
|
34
|
+
for (var r = e > 1 ? void 0 : e ? k(o, t) : o, n = i.length - 1, a; n >= 0; n--)
|
|
35
|
+
(a = i[n]) && (r = (e ? a(o, t, r) : a(r)) || r);
|
|
36
|
+
return e && r && z(o, t, r), r;
|
|
93
37
|
};
|
|
94
|
-
const
|
|
95
|
-
class
|
|
38
|
+
const b = "pie-icon-button";
|
|
39
|
+
class c extends g {
|
|
96
40
|
constructor() {
|
|
97
41
|
super(...arguments), this.size = "medium", this.variant = "primary", this.disabled = !1, this.isLoading = !1;
|
|
98
42
|
}
|
|
@@ -104,7 +48,7 @@ class s extends g {
|
|
|
104
48
|
renderSpinner() {
|
|
105
49
|
const { variant: o, size: t } = this, e = t === "xsmall" ? "s" : "m";
|
|
106
50
|
let r = "brand";
|
|
107
|
-
return o != null && o.includes("secondary") && (r = "secondary"), (o === "primary" || o === "ghost-inverse") && (r = "inverse"),
|
|
51
|
+
return o != null && o.includes("secondary") && (r = "secondary"), (o === "primary" || o === "ghost-inverse") && (r = "inverse"), s`
|
|
108
52
|
<pie-spinner
|
|
109
53
|
size="${e}"
|
|
110
54
|
variant="${r}"
|
|
@@ -117,35 +61,35 @@ class s extends g {
|
|
|
117
61
|
variant: e,
|
|
118
62
|
isLoading: r
|
|
119
63
|
} = this;
|
|
120
|
-
return
|
|
64
|
+
return s`
|
|
121
65
|
<button
|
|
122
66
|
class="o-iconBtn"
|
|
123
67
|
size="${t}"
|
|
124
68
|
variant="${e}"
|
|
125
69
|
?disabled="${o}"
|
|
126
70
|
?isLoading="${r}">
|
|
127
|
-
${r ? this.renderSpinner() :
|
|
71
|
+
${r ? this.renderSpinner() : s`<slot></slot>`}
|
|
128
72
|
</button>`;
|
|
129
73
|
}
|
|
130
74
|
}
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
],
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
],
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
],
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
],
|
|
146
|
-
|
|
75
|
+
c.styles = m(u);
|
|
76
|
+
d([
|
|
77
|
+
l(),
|
|
78
|
+
h(b, y, "medium")
|
|
79
|
+
], c.prototype, "size", 2);
|
|
80
|
+
d([
|
|
81
|
+
l(),
|
|
82
|
+
h(b, B, "primary")
|
|
83
|
+
], c.prototype, "variant", 2);
|
|
84
|
+
d([
|
|
85
|
+
l({ type: Boolean })
|
|
86
|
+
], c.prototype, "disabled", 2);
|
|
87
|
+
d([
|
|
88
|
+
l({ type: Boolean })
|
|
89
|
+
], c.prototype, "isLoading", 2);
|
|
90
|
+
p(b, c);
|
|
147
91
|
export {
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
92
|
+
c as PieIconButton,
|
|
93
|
+
y as sizes,
|
|
94
|
+
B as variants
|
|
151
95
|
};
|
package/dist/react.js
CHANGED
|
@@ -1,32 +1,33 @@
|
|
|
1
1
|
import * as g from "react";
|
|
2
2
|
import { PieIconButton as E } from "./index.js";
|
|
3
|
-
import { sizes as
|
|
3
|
+
import { sizes as k, variants as A } from "./index.js";
|
|
4
4
|
import "lit";
|
|
5
5
|
import "lit/decorators.js";
|
|
6
|
+
import "@justeattakeaway/pie-spinner";
|
|
6
7
|
/**
|
|
7
8
|
* @license
|
|
8
9
|
* Copyright 2018 Google LLC
|
|
9
10
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
10
11
|
*/
|
|
11
|
-
const b = /* @__PURE__ */ new Set(["children", "localName", "ref", "style", "className"]), w = /* @__PURE__ */ new WeakMap(), B = (t,
|
|
12
|
-
const s =
|
|
13
|
-
s === void 0 ||
|
|
12
|
+
const b = /* @__PURE__ */ new Set(["children", "localName", "ref", "style", "className"]), w = /* @__PURE__ */ new WeakMap(), B = (t, o, m, p, d) => {
|
|
13
|
+
const s = d == null ? void 0 : d[o];
|
|
14
|
+
s === void 0 || m === p ? m == null && o in HTMLElement.prototype ? t.removeAttribute(o) : t[o] = m : ((r, n, u) => {
|
|
14
15
|
let a = w.get(r);
|
|
15
16
|
a === void 0 && w.set(r, a = /* @__PURE__ */ new Map());
|
|
16
|
-
let l = a.get(
|
|
17
|
-
u !== void 0 ? l === void 0 ? (a.set(
|
|
18
|
-
})(t, s,
|
|
19
|
-
}, I = (t,
|
|
20
|
-
typeof t == "function" ? t(
|
|
17
|
+
let l = a.get(n);
|
|
18
|
+
u !== void 0 ? l === void 0 ? (a.set(n, l = { handleEvent: u }), r.addEventListener(n, l)) : l.handleEvent = u : l !== void 0 && (a.delete(n), r.removeEventListener(n, l));
|
|
19
|
+
})(t, s, m);
|
|
20
|
+
}, I = (t, o) => {
|
|
21
|
+
typeof t == "function" ? t(o) : t.current = o;
|
|
21
22
|
};
|
|
22
|
-
function M(t = window.React,
|
|
23
|
-
let s, r,
|
|
24
|
-
if (
|
|
23
|
+
function M(t = window.React, o, m, p, d) {
|
|
24
|
+
let s, r, n;
|
|
25
|
+
if (o === void 0) {
|
|
25
26
|
const c = t;
|
|
26
|
-
({ tagName: r, elementClass:
|
|
27
|
+
({ tagName: r, elementClass: n, events: p, displayName: d } = c), s = c.react;
|
|
27
28
|
} else
|
|
28
|
-
s = t,
|
|
29
|
-
const u = s.Component, a = s.createElement, l = new Set(Object.keys(
|
|
29
|
+
s = t, n = m, r = o;
|
|
30
|
+
const u = s.Component, a = s.createElement, l = new Set(Object.keys(p ?? {}));
|
|
30
31
|
class f extends u {
|
|
31
32
|
constructor() {
|
|
32
33
|
super(...arguments), this.o = null;
|
|
@@ -34,7 +35,7 @@ function M(t = window.React, n, d, m, p) {
|
|
|
34
35
|
t(e) {
|
|
35
36
|
if (this.o !== null)
|
|
36
37
|
for (const h in this.i)
|
|
37
|
-
B(this.o, h, this.props[h], e ? e[h] : void 0,
|
|
38
|
+
B(this.o, h, this.props[h], e ? e[h] : void 0, p);
|
|
38
39
|
}
|
|
39
40
|
componentDidMount() {
|
|
40
41
|
var e;
|
|
@@ -50,15 +51,15 @@ function M(t = window.React, n, d, m, p) {
|
|
|
50
51
|
}), this.i = {};
|
|
51
52
|
const v = { ref: this.u };
|
|
52
53
|
for (const [i, y] of Object.entries(h))
|
|
53
|
-
b.has(i) ? v[i === "className" ? "class" : i] = y : l.has(i) || i in
|
|
54
|
+
b.has(i) ? v[i === "className" ? "class" : i] = y : l.has(i) || i in n.prototype ? this.i[i] = y : v[i] = y;
|
|
54
55
|
return v.suppressHydrationWarning = !0, a(r, v);
|
|
55
56
|
}
|
|
56
57
|
}
|
|
57
|
-
f.displayName =
|
|
58
|
+
f.displayName = d ?? n.name;
|
|
58
59
|
const N = s.forwardRef((c, e) => a(f, { ...c, _$Gl: e }, c == null ? void 0 : c.children));
|
|
59
60
|
return N.displayName = f.displayName, N;
|
|
60
61
|
}
|
|
61
|
-
const
|
|
62
|
+
const R = M({
|
|
62
63
|
displayName: "PieIconButton",
|
|
63
64
|
elementClass: E,
|
|
64
65
|
react: g,
|
|
@@ -66,7 +67,7 @@ const L = M({
|
|
|
66
67
|
events: {}
|
|
67
68
|
});
|
|
68
69
|
export {
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
70
|
+
R as PieIconButton,
|
|
71
|
+
k as sizes,
|
|
72
|
+
A as variants
|
|
72
73
|
};
|