@telefonica/mistica 14.28.1 → 14.29.0
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/css/mistica.css +1 -1
- package/dist/accordion.d.ts +3 -0
- package/dist/accordion.js +71 -70
- package/dist/button-layout.css-mistica.js +11 -19
- package/dist/button-layout.css.d.ts +1 -5
- package/dist/button-layout.js +19 -90
- package/dist/button.css-mistica.js +18 -21
- package/dist/counter.css-mistica.js +48 -0
- package/dist/counter.css.d.ts +11 -0
- package/dist/counter.css.ts.vanilla.css-mistica.js +11 -0
- package/dist/counter.d.ts +19 -0
- package/dist/counter.js +240 -0
- package/dist/generated/mistica-icons/icon-add-more-filled.js +1 -1
- package/dist/generated/mistica-icons/icon-add-more-light.js +1 -1
- package/dist/generated/mistica-icons/icon-add-more-regular.js +2 -2
- package/dist/generated/mistica-icons/icon-subtract-filled.d.ts +4 -0
- package/dist/generated/mistica-icons/icon-subtract-light.js +21 -10
- package/dist/generated/mistica-icons/icon-subtract-regular.js +29 -8
- package/dist/index.d.ts +1 -0
- package/dist/index.js +4 -0
- package/dist/list.d.ts +3 -0
- package/dist/list.js +92 -92
- package/dist/loading-bar.js +5 -4
- package/dist/menu.js +11 -10
- package/dist/navigation-bar.js +27 -26
- package/dist/package-version.js +1 -1
- package/dist/snackbar.css-mistica.js +16 -13
- package/dist/snackbar.css.d.ts +3 -2
- package/dist/snackbar.d.ts +5 -1
- package/dist/snackbar.js +119 -64
- package/dist/theme.d.ts +6 -0
- package/dist/theme.js +52 -28
- package/dist-es/accordion.js +79 -78
- package/dist-es/button-layout.css-mistica.js +4 -6
- package/dist-es/button-layout.js +27 -98
- package/dist-es/button.css-mistica.js +3 -3
- package/dist-es/counter.css-mistica.js +4 -0
- package/dist-es/counter.css.ts.vanilla.css-mistica.js +2 -0
- package/dist-es/counter.js +187 -0
- package/dist-es/generated/mistica-icons/icon-add-more-filled.js +1 -1
- package/dist-es/generated/mistica-icons/icon-add-more-light.js +1 -1
- package/dist-es/generated/mistica-icons/icon-add-more-regular.js +2 -2
- package/dist-es/generated/mistica-icons/icon-subtract-light.js +24 -13
- package/dist-es/generated/mistica-icons/icon-subtract-regular.js +33 -12
- package/dist-es/index.js +1765 -1764
- package/dist-es/list.js +125 -125
- package/dist-es/loading-bar.js +12 -11
- package/dist-es/menu.js +9 -8
- package/dist-es/navigation-bar.js +26 -25
- package/dist-es/package-version.js +1 -1
- package/dist-es/snackbar.css-mistica.js +5 -2
- package/dist-es/snackbar.js +140 -85
- package/dist-es/style.css +1 -1
- package/dist-es/theme.js +56 -32
- package/package.json +1 -1
package/dist/accordion.js
CHANGED
|
@@ -10,19 +10,19 @@ function _export(target, all) {
|
|
|
10
10
|
}
|
|
11
11
|
_export(exports, {
|
|
12
12
|
Accordion: function() {
|
|
13
|
-
return
|
|
13
|
+
return ao;
|
|
14
14
|
},
|
|
15
15
|
AccordionItem: function() {
|
|
16
|
-
return
|
|
16
|
+
return so;
|
|
17
17
|
},
|
|
18
18
|
BoxedAccordion: function() {
|
|
19
|
-
return
|
|
19
|
+
return uo;
|
|
20
20
|
},
|
|
21
21
|
BoxedAccordionItem: function() {
|
|
22
|
-
return
|
|
22
|
+
return lo;
|
|
23
23
|
},
|
|
24
24
|
useAccordionContext: function() {
|
|
25
|
-
return
|
|
25
|
+
return F;
|
|
26
26
|
}
|
|
27
27
|
});
|
|
28
28
|
const _jsxruntime = require("react/jsx-runtime");
|
|
@@ -41,6 +41,7 @@ const _boxed = require("./boxed.js");
|
|
|
41
41
|
const _themevariantcontext = require("./theme-variant-context.js");
|
|
42
42
|
const _hooks = require("./hooks.js");
|
|
43
43
|
const _reacttransitiongroup = require("react-transition-group");
|
|
44
|
+
const _platform = require("./utils/platform.js");
|
|
44
45
|
function _interop_require_default(obj) {
|
|
45
46
|
return obj && obj.__esModule ? obj : {
|
|
46
47
|
default: obj
|
|
@@ -164,59 +165,59 @@ function _object_without_properties_loose(source, excluded) {
|
|
|
164
165
|
}
|
|
165
166
|
return target;
|
|
166
167
|
}
|
|
167
|
-
const
|
|
168
|
+
const z = 400, h = /*#__PURE__*/ _react.createContext({
|
|
168
169
|
index: [],
|
|
169
170
|
toogle: ()=>{}
|
|
170
|
-
}),
|
|
171
|
-
let { value: o , defaultValue: r , onChange: n , singleOpen:
|
|
172
|
-
const
|
|
171
|
+
}), F = ()=>_react.useContext(h), R = (param)=>{
|
|
172
|
+
let { value: o , defaultValue: r , onChange: n , singleOpen: s } = param;
|
|
173
|
+
const u = o !== void 0, d = (e)=>e === void 0 ? [] : typeof e == "number" ? [
|
|
173
174
|
e
|
|
174
|
-
] : e, [i,
|
|
175
|
-
_react.useEffect(()=>
|
|
175
|
+
] : e, [i, a] = _react.useState(d(r));
|
|
176
|
+
_react.useEffect(()=>a(d(r)), [
|
|
176
177
|
r
|
|
177
178
|
]), _react.useEffect(()=>{
|
|
178
|
-
i.length > 1 &&
|
|
179
|
+
i.length > 1 && s && (i.splice(1), a([
|
|
179
180
|
...i
|
|
180
181
|
]));
|
|
181
182
|
}, [
|
|
182
|
-
|
|
183
|
+
s,
|
|
183
184
|
i
|
|
184
185
|
]);
|
|
185
|
-
const p = (e,
|
|
186
|
-
if (!
|
|
186
|
+
const p = (e, l)=>{
|
|
187
|
+
if (!l) return [
|
|
187
188
|
e
|
|
188
189
|
];
|
|
189
|
-
const
|
|
190
|
-
return
|
|
190
|
+
const f = l.indexOf(e);
|
|
191
|
+
return f === -1 ? s ? l = [
|
|
191
192
|
e
|
|
192
|
-
] :
|
|
193
|
-
...
|
|
193
|
+
] : l.push(e) : l.splice(f, 1), [
|
|
194
|
+
...l
|
|
194
195
|
];
|
|
195
|
-
},
|
|
196
|
-
if (
|
|
197
|
-
const
|
|
198
|
-
n(e, !
|
|
196
|
+
}, m = (e)=>{
|
|
197
|
+
if (u || a(p(e, i)), n) {
|
|
198
|
+
const l = (u ? d(o) : i).includes(e);
|
|
199
|
+
n(e, !l);
|
|
199
200
|
}
|
|
200
201
|
};
|
|
201
|
-
return
|
|
202
|
-
|
|
203
|
-
|
|
202
|
+
return u ? [
|
|
203
|
+
d(o),
|
|
204
|
+
m
|
|
204
205
|
] : [
|
|
205
206
|
i,
|
|
206
|
-
|
|
207
|
+
m
|
|
207
208
|
];
|
|
208
|
-
},
|
|
209
|
+
}, H = (o)=>{
|
|
209
210
|
const r = o == null ? void 0 : o.closest("[data-accordion]");
|
|
210
211
|
if (r) return Array.from(r.querySelectorAll("[data-accordion-item]")).filter((n)=>n.closest("[data-accordion]") === r).findIndex((n)=>n === o);
|
|
211
|
-
},
|
|
212
|
-
var { content: o , dataAttributes: r , trackingEvent: n } = _param,
|
|
212
|
+
}, B = /*#__PURE__*/ _react.forwardRef((_param, u)=>{
|
|
213
|
+
var { content: o , dataAttributes: r , trackingEvent: n } = _param, s = _object_without_properties(_param, [
|
|
213
214
|
"content",
|
|
214
215
|
"dataAttributes",
|
|
215
216
|
"trackingEvent"
|
|
216
217
|
]);
|
|
217
|
-
const
|
|
218
|
+
const d = _react.useRef(null), i = _react.useRef(null), { index: a , toogle: p } = F(), m = (0, _themevariantcontext.useIsInverseVariant)(), e = (0, _hooks.useAriaId)(), l = (0, _hooks.useAriaId)(), [f, b] = _react.useState(), I = f !== void 0 && (a == null ? void 0 : a.includes(f));
|
|
218
219
|
return _react.useEffect(()=>{
|
|
219
|
-
b(
|
|
220
|
+
b(H(i.current));
|
|
220
221
|
}, []), /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", _object_spread_props(_object_spread({
|
|
221
222
|
ref: i
|
|
222
223
|
}, (0, _dom.getPrefixedDataAttributes)(_object_spread_props(_object_spread({}, r), {
|
|
@@ -224,27 +225,27 @@ const q = 400, x = /*#__PURE__*/ _react.createContext({
|
|
|
224
225
|
}))), {
|
|
225
226
|
children: [
|
|
226
227
|
/* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, {
|
|
227
|
-
ref:
|
|
228
|
-
className: (0, _classnames.default)(_accordioncssmistica.itemContent,
|
|
228
|
+
ref: u,
|
|
229
|
+
className: (0, _classnames.default)(_accordioncssmistica.itemContent, m ? _accordioncssmistica.touchableBackgroundInverse : _accordioncssmistica.touchableBackground),
|
|
229
230
|
onPress: ()=>{
|
|
230
|
-
|
|
231
|
+
f !== void 0 && p(f);
|
|
231
232
|
},
|
|
232
233
|
trackingEvent: n,
|
|
233
234
|
"aria-expanded": I,
|
|
234
|
-
"aria-controls":
|
|
235
|
+
"aria-controls": l,
|
|
235
236
|
children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
|
|
236
237
|
paddingX: 16,
|
|
237
238
|
children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_list.Content, _object_spread_props(_object_spread({
|
|
238
239
|
labelId: e,
|
|
239
240
|
type: "custom"
|
|
240
|
-
},
|
|
241
|
+
}, s), {
|
|
241
242
|
right: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
|
|
242
243
|
className: _accordioncssmistica.chevronContainer,
|
|
243
244
|
children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconchevron.default, {
|
|
244
245
|
size: 24,
|
|
245
246
|
transitionDuration: 400,
|
|
246
247
|
direction: I ? "up" : "down",
|
|
247
|
-
color:
|
|
248
|
+
color: m ? _skincontractcssmistica.vars.colors.inverse : I ? _skincontractcssmistica.vars.colors.neutralHigh : _skincontractcssmistica.vars.colors.neutralMedium
|
|
248
249
|
})
|
|
249
250
|
})
|
|
250
251
|
}))
|
|
@@ -252,19 +253,19 @@ const q = 400, x = /*#__PURE__*/ _react.createContext({
|
|
|
252
253
|
}),
|
|
253
254
|
/* @__PURE__ */ (0, _jsxruntime.jsx)(_reacttransitiongroup.CSSTransition, {
|
|
254
255
|
in: I,
|
|
255
|
-
timeout:
|
|
256
|
-
nodeRef:
|
|
256
|
+
timeout: (0, _platform.isRunningAcceptanceTest)() ? 0 : z,
|
|
257
|
+
nodeRef: d,
|
|
257
258
|
classNames: _accordioncssmistica.panelTransitionClasses,
|
|
258
259
|
mountOnEnter: !0,
|
|
259
260
|
unmountOnExit: !0,
|
|
260
261
|
children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
|
|
261
262
|
className: _accordioncssmistica.panelContainer,
|
|
262
|
-
ref:
|
|
263
|
+
ref: d,
|
|
263
264
|
children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
|
|
264
265
|
className: _accordioncssmistica.panel,
|
|
265
266
|
role: "region",
|
|
266
267
|
"aria-labelledby": e,
|
|
267
|
-
id:
|
|
268
|
+
id: l,
|
|
268
269
|
children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
|
|
269
270
|
paddingX: 16,
|
|
270
271
|
paddingBottom: 16,
|
|
@@ -275,68 +276,68 @@ const q = 400, x = /*#__PURE__*/ _react.createContext({
|
|
|
275
276
|
})
|
|
276
277
|
]
|
|
277
278
|
}));
|
|
278
|
-
}),
|
|
279
|
+
}), so = /*#__PURE__*/ _react.forwardRef((_param, n)=>/* @__PURE__ */ {
|
|
279
280
|
var { dataAttributes: o } = _param, r = _object_without_properties(_param, [
|
|
280
281
|
"dataAttributes"
|
|
281
282
|
]);
|
|
282
|
-
return (0, _jsxruntime.jsx)(
|
|
283
|
+
return (0, _jsxruntime.jsx)(B, _object_spread_props(_object_spread({}, r), {
|
|
283
284
|
ref: n,
|
|
284
285
|
dataAttributes: _object_spread({
|
|
285
286
|
"component-name": "AccordionItem"
|
|
286
287
|
}, o)
|
|
287
288
|
}));
|
|
288
|
-
}),
|
|
289
|
-
let { children: o , dataAttributes: r ,
|
|
290
|
-
const [
|
|
291
|
-
value:
|
|
292
|
-
defaultValue:
|
|
293
|
-
onChange:
|
|
294
|
-
singleOpen:
|
|
295
|
-
}),
|
|
296
|
-
return /* @__PURE__ */ (0, _jsxruntime.jsx)(
|
|
289
|
+
}), ao = (param)=>{
|
|
290
|
+
let { children: o , dataAttributes: r , index: n , defaultIndex: s , onChange: u , singleOpen: d } = param;
|
|
291
|
+
const [i, a] = R({
|
|
292
|
+
value: n,
|
|
293
|
+
defaultValue: s,
|
|
294
|
+
onChange: u,
|
|
295
|
+
singleOpen: d
|
|
296
|
+
}), p = _react.Children.count(o) - 1;
|
|
297
|
+
return /* @__PURE__ */ (0, _jsxruntime.jsx)(h.Provider, {
|
|
297
298
|
value: {
|
|
298
|
-
index:
|
|
299
|
-
toogle:
|
|
299
|
+
index: i,
|
|
300
|
+
toogle: a
|
|
300
301
|
},
|
|
301
302
|
children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({}, (0, _dom.getPrefixedDataAttributes)(_object_spread_props(_object_spread({}, r), {
|
|
302
303
|
accordion: !0
|
|
303
304
|
}), "Accordion")), {
|
|
304
|
-
children: _react.Children.toArray(o).filter(Boolean).map((
|
|
305
|
+
children: _react.Children.toArray(o).filter(Boolean).map((m, e)=>/* @__PURE__ */ (0, _jsxruntime.jsxs)(_react.Fragment, {
|
|
305
306
|
children: [
|
|
306
|
-
|
|
307
|
-
|
|
307
|
+
m,
|
|
308
|
+
e < p && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
|
|
308
309
|
paddingX: 16,
|
|
309
310
|
children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_divider.default, {})
|
|
310
311
|
})
|
|
311
312
|
]
|
|
312
|
-
},
|
|
313
|
+
}, e))
|
|
313
314
|
}))
|
|
314
315
|
});
|
|
315
|
-
},
|
|
316
|
+
}, lo = /*#__PURE__*/ _react.forwardRef((_param, s)=>/* @__PURE__ */ {
|
|
316
317
|
var { dataAttributes: o , isInverse: r } = _param, n = _object_without_properties(_param, [
|
|
317
318
|
"dataAttributes",
|
|
318
319
|
"isInverse"
|
|
319
320
|
]);
|
|
320
321
|
return (0, _jsxruntime.jsx)(_boxed.Boxed, {
|
|
321
322
|
isInverse: r,
|
|
322
|
-
ref:
|
|
323
|
+
ref: s,
|
|
323
324
|
dataAttributes: _object_spread({
|
|
324
325
|
"component-name": "BoxedAccordionItem"
|
|
325
326
|
}, o),
|
|
326
|
-
children: /* @__PURE__ */ (0, _jsxruntime.jsx)(
|
|
327
|
+
children: /* @__PURE__ */ (0, _jsxruntime.jsx)(B, _object_spread({}, n))
|
|
327
328
|
});
|
|
328
|
-
}),
|
|
329
|
-
let { children: o , dataAttributes: r , index: n , defaultIndex:
|
|
330
|
-
const [i,
|
|
329
|
+
}), uo = (param)=>{
|
|
330
|
+
let { children: o , dataAttributes: r , index: n , defaultIndex: s , onChange: u , singleOpen: d } = param;
|
|
331
|
+
const [i, a] = R({
|
|
331
332
|
value: n,
|
|
332
|
-
defaultValue:
|
|
333
|
-
onChange:
|
|
334
|
-
singleOpen:
|
|
333
|
+
defaultValue: s,
|
|
334
|
+
onChange: u,
|
|
335
|
+
singleOpen: d
|
|
335
336
|
});
|
|
336
|
-
return /* @__PURE__ */ (0, _jsxruntime.jsx)(
|
|
337
|
+
return /* @__PURE__ */ (0, _jsxruntime.jsx)(h.Provider, {
|
|
337
338
|
value: {
|
|
338
339
|
index: i,
|
|
339
|
-
toogle:
|
|
340
|
+
toogle: a
|
|
340
341
|
},
|
|
341
342
|
children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_stack.default, {
|
|
342
343
|
space: 16,
|
|
@@ -9,45 +9,37 @@ function _export(target, all) {
|
|
|
9
9
|
});
|
|
10
10
|
}
|
|
11
11
|
_export(exports, {
|
|
12
|
-
|
|
13
|
-
return
|
|
12
|
+
alignMoreThanOneChildren: function() {
|
|
13
|
+
return l;
|
|
14
14
|
},
|
|
15
15
|
alignVariant: function() {
|
|
16
|
-
return
|
|
16
|
+
return a;
|
|
17
17
|
},
|
|
18
18
|
baseContainer: function() {
|
|
19
|
-
return
|
|
19
|
+
return i;
|
|
20
20
|
},
|
|
21
21
|
container: function() {
|
|
22
|
-
return
|
|
22
|
+
return t;
|
|
23
23
|
},
|
|
24
24
|
fullWidthContainer: function() {
|
|
25
25
|
return v;
|
|
26
26
|
},
|
|
27
27
|
link: function() {
|
|
28
|
-
return h;
|
|
29
|
-
},
|
|
30
|
-
linkAlignment: function() {
|
|
31
28
|
return y;
|
|
32
29
|
},
|
|
33
|
-
|
|
30
|
+
linkAlignment: function() {
|
|
34
31
|
return e;
|
|
35
32
|
},
|
|
36
|
-
|
|
37
|
-
return
|
|
38
|
-
},
|
|
39
|
-
vars: function() {
|
|
40
|
-
return o;
|
|
33
|
+
margins: function() {
|
|
34
|
+
return h;
|
|
41
35
|
}
|
|
42
36
|
});
|
|
43
37
|
require("./sprinkles.css.ts.vanilla.css-mistica.js");
|
|
44
38
|
require("./button.css.ts.vanilla.css-mistica.js");
|
|
45
39
|
require("./button-layout.css.ts.vanilla.css-mistica.js");
|
|
46
|
-
var
|
|
40
|
+
var l = "kfxylhg", a = {
|
|
47
41
|
right: "_1y2v1nfbg",
|
|
48
42
|
left: "_1y2v1nfbe",
|
|
49
43
|
center: "_1y2v1nfbf",
|
|
50
|
-
"full-width": "
|
|
51
|
-
},
|
|
52
|
-
buttonWidth: "var(--kfxylh0)"
|
|
53
|
-
};
|
|
44
|
+
"full-width": "kfxylhf _1y2v1nfbf"
|
|
45
|
+
}, i = "kfxylh5 _1y2v1nfb6", t = "kfxylh6", v = "kfxylh7", y = "kfxylh2 _1y2v1nfb6 _1y2v1nfbt", e = "kfxylh3", h = "kfxylh0";
|
|
@@ -1,12 +1,8 @@
|
|
|
1
|
-
export declare const vars: {
|
|
2
|
-
buttonWidth: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
3
|
-
};
|
|
4
1
|
export declare const margins: string;
|
|
5
2
|
export declare const link: string;
|
|
6
3
|
export declare const linkAlignment: string;
|
|
7
4
|
export declare const baseContainer: string;
|
|
8
5
|
export declare const container: string;
|
|
9
6
|
export declare const fullWidthContainer: string;
|
|
10
|
-
export declare const noButtonWidth: string;
|
|
11
7
|
export declare const alignVariant: Record<"left" | "right" | "center" | "full-width", string>;
|
|
12
|
-
export declare const
|
|
8
|
+
export declare const alignMoreThanOneChildren: string;
|
package/dist/button-layout.js
CHANGED
|
@@ -5,17 +5,13 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
Object.defineProperty(exports, "default", {
|
|
6
6
|
enumerable: true,
|
|
7
7
|
get: function() {
|
|
8
|
-
return
|
|
8
|
+
return T;
|
|
9
9
|
}
|
|
10
10
|
});
|
|
11
11
|
const _jsxruntime = require("react/jsx-runtime");
|
|
12
12
|
const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
|
|
13
|
-
const _dynamic = require("@vanilla-extract/dynamic");
|
|
14
|
-
const _hooks = require("./hooks.js");
|
|
15
13
|
const _button = require("./button.js");
|
|
16
|
-
const _buttoncssmistica = require("./button.css-mistica.js");
|
|
17
14
|
const _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
|
|
18
|
-
const _helpers = require("./utils/helpers.js");
|
|
19
15
|
const _dom = require("./utils/dom.js");
|
|
20
16
|
const _buttonlayoutcssmistica = require("./button-layout.css-mistica.js");
|
|
21
17
|
function _interop_require_default(obj) {
|
|
@@ -114,100 +110,33 @@ function _object_spread_props(target, source) {
|
|
|
114
110
|
}
|
|
115
111
|
return target;
|
|
116
112
|
}
|
|
117
|
-
const
|
|
118
|
-
_react.useEffect(()=>{
|
|
119
|
-
var r, u;
|
|
120
|
-
let e = !1;
|
|
121
|
-
return (u = (r = document.fonts) == null ? void 0 : r.ready) != null && u.then && document.fonts.ready.then(()=>{
|
|
122
|
-
e || t();
|
|
123
|
-
}), ()=>{
|
|
124
|
-
e = !0;
|
|
125
|
-
};
|
|
126
|
-
}, [
|
|
127
|
-
t
|
|
128
|
-
]);
|
|
129
|
-
}, P = (t, e)=>{
|
|
130
|
-
_react.useEffect(()=>{
|
|
131
|
-
if (t) {
|
|
132
|
-
const r = new MutationObserver(e);
|
|
133
|
-
return r.observe(t, {
|
|
134
|
-
childList: !0,
|
|
135
|
-
attributes: !1,
|
|
136
|
-
subtree: !0
|
|
137
|
-
}), ()=>{
|
|
138
|
-
r.disconnect();
|
|
139
|
-
};
|
|
140
|
-
}
|
|
141
|
-
return ()=>{};
|
|
142
|
-
}, [
|
|
143
|
-
e,
|
|
144
|
-
t
|
|
145
|
-
]);
|
|
146
|
-
}, p = [
|
|
113
|
+
const s = [
|
|
147
114
|
_button.ButtonSecondary,
|
|
148
115
|
_button.ButtonDanger,
|
|
149
116
|
_button.ButtonPrimary
|
|
150
|
-
],
|
|
151
|
-
let { children:
|
|
152
|
-
const
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
}),
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
isMeasuring: i,
|
|
159
|
-
buttonWidth: a
|
|
160
|
-
});
|
|
161
|
-
}, c = _react.useRef(null);
|
|
162
|
-
(0, _hooks.useIsomorphicLayoutEffect)(()=>{
|
|
163
|
-
if (s.isMeasuring && c.current) {
|
|
164
|
-
const i = Array.from(c.current.children).map((d)=>d.dataset.link ? 0 : d.offsetWidth + 1), a = Math.ceil(Math.max(...i, _buttoncssmistica.BUTTON_MIN_WIDTH));
|
|
165
|
-
f({
|
|
166
|
-
isMeasuring: !1,
|
|
167
|
-
buttonWidth: a
|
|
168
|
-
});
|
|
169
|
-
}
|
|
170
|
-
}, [
|
|
171
|
-
s.isMeasuring
|
|
172
|
-
]);
|
|
173
|
-
const n = _react.useMemo(()=>(0, _helpers.debounce)(()=>{
|
|
174
|
-
f({
|
|
175
|
-
isMeasuring: !0,
|
|
176
|
-
buttonWidth: 0
|
|
177
|
-
});
|
|
178
|
-
}, 5, {
|
|
179
|
-
maxWait: 50
|
|
180
|
-
}), []);
|
|
181
|
-
P(c.current, n), z(n), _react.useEffect(()=>(window.addEventListener("resize", n), window.addEventListener("focus", n), document.addEventListener("visibilitychange", n), ()=>{
|
|
182
|
-
window.removeEventListener("resize", n), window.removeEventListener("focus", n), document.removeEventListener("visibilitychange", n);
|
|
183
|
-
}), [
|
|
184
|
-
n
|
|
185
|
-
]);
|
|
186
|
-
const g = _react.Children.toArray(t).sort((i, a)=>{
|
|
187
|
-
const d = p.indexOf(i.type), E = p.indexOf(a.type);
|
|
188
|
-
return d - E;
|
|
189
|
-
}), l = /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", _object_spread_props(_object_spread({
|
|
190
|
-
ref: c,
|
|
191
|
-
className: (0, _classnames.default)(_buttonlayoutcssmistica.baseContainer, _buttonlayoutcssmistica.alignVariant[e], s.buttonWidth ? e === "full-width" ? _buttonlayoutcssmistica.fullWidthContainer : _buttonlayoutcssmistica.container : _buttonlayoutcssmistica.noButtonWidth, {
|
|
192
|
-
[_buttonlayoutcssmistica.alignMoreThanOneChildred]: v > 1
|
|
193
|
-
}),
|
|
194
|
-
style: (0, _dynamic.assignInlineVars)({
|
|
195
|
-
[_buttonlayoutcssmistica.vars.buttonWidth]: s.buttonWidth ? `${s.buttonWidth}px` : "auto"
|
|
117
|
+
], w = (param)=>{
|
|
118
|
+
let { children: n , align: t = "full-width" , link: o , withMargins: l = !1 , dataAttributes: u } = param;
|
|
119
|
+
const c = _react.Children.count(n), d = _react.Children.toArray(n).sort((m, f)=>{
|
|
120
|
+
const h = s.indexOf(m.type), p = s.indexOf(f.type);
|
|
121
|
+
return h - p;
|
|
122
|
+
}), r = /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", _object_spread_props(_object_spread({
|
|
123
|
+
className: (0, _classnames.default)(_buttonlayoutcssmistica.baseContainer, _buttonlayoutcssmistica.alignVariant[t], t === "full-width" ? _buttonlayoutcssmistica.fullWidthContainer : _buttonlayoutcssmistica.container, {
|
|
124
|
+
[_buttonlayoutcssmistica.alignMoreThanOneChildren]: c > 1
|
|
196
125
|
})
|
|
197
|
-
}, (0, _dom.getPrefixedDataAttributes)(
|
|
126
|
+
}, (0, _dom.getPrefixedDataAttributes)(u, "ButtonLayout")), {
|
|
198
127
|
children: [
|
|
199
|
-
|
|
128
|
+
o ? /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
|
|
200
129
|
className: (0, _classnames.default)(_buttonlayoutcssmistica.link, {
|
|
201
|
-
[_buttonlayoutcssmistica.linkAlignment]:
|
|
130
|
+
[_buttonlayoutcssmistica.linkAlignment]: t === "left"
|
|
202
131
|
}),
|
|
203
132
|
"data-link": "true",
|
|
204
|
-
children:
|
|
133
|
+
children: o
|
|
205
134
|
}) : null,
|
|
206
|
-
|
|
135
|
+
d
|
|
207
136
|
]
|
|
208
137
|
}));
|
|
209
|
-
return
|
|
138
|
+
return l ? /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
|
|
210
139
|
className: _buttonlayoutcssmistica.margins,
|
|
211
|
-
children:
|
|
212
|
-
}) :
|
|
213
|
-
},
|
|
140
|
+
children: r
|
|
141
|
+
}) : r;
|
|
142
|
+
}, T = w;
|
|
@@ -9,62 +9,59 @@ function _export(target, all) {
|
|
|
9
9
|
});
|
|
10
10
|
}
|
|
11
11
|
_export(exports, {
|
|
12
|
-
BUTTON_MIN_WIDTH: function() {
|
|
13
|
-
return _;
|
|
14
|
-
},
|
|
15
12
|
CHEVRON_MARGIN_LEFT_LINK: function() {
|
|
16
|
-
return
|
|
13
|
+
return _;
|
|
17
14
|
},
|
|
18
15
|
ICON_MARGIN_PX: function() {
|
|
19
|
-
return
|
|
16
|
+
return y;
|
|
20
17
|
},
|
|
21
18
|
ICON_SIZE: function() {
|
|
22
19
|
return f;
|
|
23
20
|
},
|
|
24
21
|
PADDING_X_LINK: function() {
|
|
25
|
-
return
|
|
22
|
+
return r;
|
|
26
23
|
},
|
|
27
24
|
PADDING_Y_LINK: function() {
|
|
28
|
-
return
|
|
25
|
+
return b;
|
|
29
26
|
},
|
|
30
27
|
SMALL_ICON_SIZE: function() {
|
|
31
|
-
return
|
|
28
|
+
return a;
|
|
32
29
|
},
|
|
33
30
|
SMALL_SPINNER_SIZE: function() {
|
|
34
|
-
return
|
|
31
|
+
return p;
|
|
35
32
|
},
|
|
36
33
|
SPINNER_SIZE: function() {
|
|
37
|
-
return
|
|
34
|
+
return e;
|
|
38
35
|
},
|
|
39
36
|
X_PADDING_PX: function() {
|
|
40
|
-
return
|
|
37
|
+
return I;
|
|
41
38
|
},
|
|
42
39
|
X_SMALL_PADDING_PX: function() {
|
|
43
40
|
return i;
|
|
44
41
|
},
|
|
45
42
|
inverseLink: function() {
|
|
46
|
-
return
|
|
43
|
+
return N;
|
|
47
44
|
},
|
|
48
45
|
inverseVariants: function() {
|
|
49
|
-
return
|
|
46
|
+
return d;
|
|
50
47
|
},
|
|
51
48
|
isLoading: function() {
|
|
52
|
-
return
|
|
49
|
+
return t;
|
|
53
50
|
},
|
|
54
51
|
link: function() {
|
|
55
|
-
return
|
|
52
|
+
return o;
|
|
56
53
|
},
|
|
57
54
|
loadingContent: function() {
|
|
58
|
-
return
|
|
55
|
+
return L;
|
|
59
56
|
},
|
|
60
57
|
loadingFiller: function() {
|
|
61
|
-
return
|
|
58
|
+
return l;
|
|
62
59
|
},
|
|
63
60
|
small: function() {
|
|
64
|
-
return
|
|
61
|
+
return s;
|
|
65
62
|
},
|
|
66
63
|
textContent: function() {
|
|
67
|
-
return
|
|
64
|
+
return A;
|
|
68
65
|
},
|
|
69
66
|
textContentLink: function() {
|
|
70
67
|
return P;
|
|
@@ -75,11 +72,11 @@ _export(exports, {
|
|
|
75
72
|
});
|
|
76
73
|
require("./sprinkles.css.ts.vanilla.css-mistica.js");
|
|
77
74
|
require("./button.css.ts.vanilla.css-mistica.js");
|
|
78
|
-
var _ =
|
|
75
|
+
var _ = 2, y = 8, f = 24, r = 12, b = 6, a = 20, p = 16, e = 20, I = 14.5, i = 10.5, N = "rrbrpni _1y2v1nf28", d = {
|
|
79
76
|
primary: "rrbrpno rrbrpn2 _1y2v1nf5z _1y2v1nf78 _1y2v1nf8h _1y2v1nf9q _1y2v1nfba _1y2v1nfb0 _1y2v1nfbu _1y2v1nfdv _1y2v1nfe6 _1y2v1nf21 _1y2v1nf3s",
|
|
80
77
|
secondary: "rrbrpnp rrbrpn2 _1y2v1nf5z _1y2v1nf78 _1y2v1nf8h _1y2v1nf9q _1y2v1nfba _1y2v1nfb0 _1y2v1nfbu _1y2v1nfdv _1y2v1nfe6 _1y2v1nf25 _1y2v1nf5y",
|
|
81
78
|
danger: "rrbrpnq rrbrpn2 _1y2v1nf5z _1y2v1nf78 _1y2v1nf8h _1y2v1nf9q _1y2v1nfba _1y2v1nfb0 _1y2v1nfbu _1y2v1nfdv _1y2v1nfe6 _1y2v1nf20 _1y2v1nf3m"
|
|
82
|
-
},
|
|
79
|
+
}, t = "rrbrpn0", o = "rrbrpng _1y2v1nf8t _1y2v1nfa2 _1y2v1nfba _1y2v1nfbu _1y2v1nfb0 _1y2v1nfdv _1y2v1nfdo _1y2v1nf27 _1y2v1nf5y _1y2v1nfe6 _1y2v1nfd0", L = "rrbrpn7 _1y2v1nfb7 _1y2v1nfb1 _1y2v1nfec _1y2v1nffl _1y2v1nfbf _1y2v1nfbl", l = "rrbrpn4 _1y2v1nfb8 _1y2v1nfcb _1y2v1nfe6", s = "rrbrpn5", A = "rrbrpn9 _1y2v1nfb6 _1y2v1nfbl _1y2v1nfbf", P = "rrbrpnk _1y2v1nfb6 _1y2v1nfbl _1y2v1nfbf", S = {
|
|
83
80
|
primary: "rrbrpnl rrbrpn2 _1y2v1nf5z _1y2v1nf78 _1y2v1nf8h _1y2v1nf9q _1y2v1nfba _1y2v1nfb0 _1y2v1nfbu _1y2v1nfdv _1y2v1nfe6 _1y2v1nf20 _1y2v1nf3r",
|
|
84
81
|
secondary: "rrbrpnm rrbrpn2 _1y2v1nf5z _1y2v1nf78 _1y2v1nf8h _1y2v1nf9q _1y2v1nfba _1y2v1nfb0 _1y2v1nfbu _1y2v1nfdv _1y2v1nfe6 _1y2v1nf23 _1y2v1nf5y",
|
|
85
82
|
danger: "rrbrpnn rrbrpn2 _1y2v1nf5z _1y2v1nf78 _1y2v1nf8h _1y2v1nf9q _1y2v1nfba _1y2v1nfb0 _1y2v1nfbu _1y2v1nfdv _1y2v1nfe6 _1y2v1nf20 _1y2v1nf3m"
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", {
|
|
3
|
+
value: true
|
|
4
|
+
});
|
|
5
|
+
function _export(target, all) {
|
|
6
|
+
for(var name in all)Object.defineProperty(target, name, {
|
|
7
|
+
enumerable: true,
|
|
8
|
+
get: all[name]
|
|
9
|
+
});
|
|
10
|
+
}
|
|
11
|
+
_export(exports, {
|
|
12
|
+
button: function() {
|
|
13
|
+
return r;
|
|
14
|
+
},
|
|
15
|
+
buttonBackground: function() {
|
|
16
|
+
return s;
|
|
17
|
+
},
|
|
18
|
+
buttonContainer: function() {
|
|
19
|
+
return a;
|
|
20
|
+
},
|
|
21
|
+
counter: function() {
|
|
22
|
+
return f;
|
|
23
|
+
},
|
|
24
|
+
decreaseButtonIcon: function() {
|
|
25
|
+
return t;
|
|
26
|
+
},
|
|
27
|
+
defaultButtonIcon: function() {
|
|
28
|
+
return y;
|
|
29
|
+
},
|
|
30
|
+
disabled: function() {
|
|
31
|
+
return _;
|
|
32
|
+
},
|
|
33
|
+
hasTrashIcon: function() {
|
|
34
|
+
return i;
|
|
35
|
+
},
|
|
36
|
+
isButtonDisabled: function() {
|
|
37
|
+
return o;
|
|
38
|
+
},
|
|
39
|
+
trashButtonIcon: function() {
|
|
40
|
+
return b;
|
|
41
|
+
},
|
|
42
|
+
valueContainer: function() {
|
|
43
|
+
return e;
|
|
44
|
+
}
|
|
45
|
+
});
|
|
46
|
+
require("./sprinkles.css.ts.vanilla.css-mistica.js");
|
|
47
|
+
require("./counter.css.ts.vanilla.css-mistica.js");
|
|
48
|
+
var r = "rijsns8 _1y2v1nf5y _1y2v1nfdo _1y2v1nfb1 _1y2v1nfc4 _1y2v1nfck", s = "rijsnse _1y2v1nfc3 _1y2v1nfcj _1y2v1nfb1 _1y2v1nfdv _1y2v1nf5k", a = "rijsns6", f = "rijsns3 _1y2v1nfdv _1y2v1nf31 _1y2v1nfb7 _1y2v1nfe6", t = "rijsnsc rijsnsa _1y2v1nfb1", y = "rijsnsa _1y2v1nfb1", _ = "rijsns4", i = "rijsns0", o = "rijsns1", b = "rijsnsb rijsnsa _1y2v1nfb1", e = "_1y2v1nfb0 _1y2v1nfb6 _1y2v1nfbf";
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
export declare const hasTrashIcon: string;
|
|
2
|
+
export declare const isButtonDisabled: string;
|
|
3
|
+
export declare const counter: string;
|
|
4
|
+
export declare const disabled: string;
|
|
5
|
+
export declare const valueContainer: string;
|
|
6
|
+
export declare const buttonContainer: string;
|
|
7
|
+
export declare const button: string;
|
|
8
|
+
export declare const defaultButtonIcon: string;
|
|
9
|
+
export declare const trashButtonIcon: string;
|
|
10
|
+
export declare const decreaseButtonIcon: string;
|
|
11
|
+
export declare const buttonBackground: string;
|