@telefonica/mistica 16.4.0 → 16.6.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/css/vivo-new.css +11 -11
- package/dist/accordion.css-mistica.js +16 -13
- package/dist/accordion.css.d.ts +1 -0
- package/dist/accordion.d.ts +4 -0
- package/dist/accordion.js +110 -93
- package/dist/callout.js +27 -15
- package/dist/card.css-mistica.js +5 -5
- package/dist/card.d.ts +9 -1
- package/dist/card.js +611 -475
- package/dist/community/advanced-data-card.css-mistica.js +14 -11
- package/dist/community/advanced-data-card.css.d.ts +1 -0
- package/dist/community/advanced-data-card.d.ts +1 -1
- package/dist/community/advanced-data-card.js +172 -85
- package/dist/cover-hero.css-mistica.js +14 -11
- package/dist/cover-hero.css.d.ts +1 -0
- package/dist/cover-hero.d.ts +1 -0
- package/dist/cover-hero.js +101 -59
- package/dist/empty-state.js +24 -15
- package/dist/header.css-mistica.js +6 -3
- package/dist/header.css.d.ts +1 -0
- package/dist/header.d.ts +3 -2
- package/dist/header.js +148 -79
- package/dist/hero.css-mistica.js +11 -8
- package/dist/hero.css.d.ts +1 -0
- package/dist/hero.d.ts +2 -1
- package/dist/hero.js +102 -68
- package/dist/highlighted-card.js +32 -23
- package/dist/index.d.ts +1 -0
- package/dist/index.js +4 -0
- package/dist/maybe-dismissable.js +8 -5
- package/dist/meter.d.ts +23 -0
- package/dist/meter.js +400 -0
- package/dist/mosaic.d.ts +6 -2
- package/dist/mosaic.js +50 -48
- package/dist/navigation-bar.css-mistica.js +96 -37
- package/dist/navigation-bar.css.d.ts +27 -1
- package/dist/navigation-bar.d.ts +65 -30
- package/dist/navigation-bar.js +818 -193
- package/dist/package-version.js +1 -1
- package/dist/sheet-common.css-mistica.js +16 -10
- package/dist/sheet-common.css.d.ts +3 -1
- package/dist/sheet-common.js +78 -70
- package/dist/sheet-info.css-mistica.js +15 -4
- package/dist/sheet-info.css.d.ts +2 -0
- package/dist/sheet-info.d.ts +3 -0
- package/dist/sheet-info.js +61 -43
- package/dist/sheet-native.js +59 -48
- package/dist/sheet-types.d.ts +6 -1
- package/dist/sheet-web.js +6 -4
- package/dist/skins/blau.js +94 -94
- package/dist/skins/movistar.js +94 -94
- package/dist/skins/o2-new.js +94 -94
- package/dist/skins/o2.js +94 -94
- package/dist/skins/telefonica.js +94 -94
- package/dist/skins/tu.js +94 -94
- package/dist/skins/vivo-new.js +98 -98
- package/dist/skins/vivo.js +94 -94
- package/dist/text-tokens.d.ts +14 -0
- package/dist/text-tokens.js +134 -102
- package/dist/theme-context-provider.js +60 -50
- package/dist/theme.d.ts +3 -2
- package/dist/theme.js +20 -17
- package/dist/utils/headings.d.ts +2 -0
- package/dist/utils/headings.js +11 -0
- package/dist/utils/types.d.ts +1 -0
- package/dist-es/accordion.css-mistica.js +7 -7
- package/dist-es/accordion.js +140 -123
- package/dist-es/callout.js +55 -43
- package/dist-es/card.css-mistica.js +2 -2
- package/dist-es/card.js +721 -588
- package/dist-es/community/advanced-data-card.css-mistica.js +3 -3
- package/dist-es/community/advanced-data-card.js +217 -130
- package/dist-es/cover-hero.css-mistica.js +3 -3
- package/dist-es/cover-hero.js +132 -90
- package/dist-es/empty-state.js +40 -31
- package/dist-es/header.css-mistica.js +2 -2
- package/dist-es/header.js +174 -104
- package/dist-es/hero.css-mistica.js +2 -2
- package/dist-es/hero.js +150 -115
- package/dist-es/highlighted-card.js +36 -27
- package/dist-es/index.js +1839 -1838
- package/dist-es/maybe-dismissable.js +17 -14
- package/dist-es/meter.js +346 -0
- package/dist-es/mosaic.js +73 -71
- package/dist-es/navigation-bar.css-mistica.js +14 -15
- package/dist-es/navigation-bar.js +864 -240
- package/dist-es/package-version.js +1 -1
- package/dist-es/sheet-common.css-mistica.js +2 -2
- package/dist-es/sheet-common.js +124 -116
- package/dist-es/sheet-info.css-mistica.js +2 -2
- package/dist-es/sheet-info.js +74 -56
- package/dist-es/sheet-native.js +59 -48
- package/dist-es/sheet-web.js +10 -8
- package/dist-es/skins/blau.js +94 -94
- package/dist-es/skins/movistar.js +94 -94
- package/dist-es/skins/o2-new.js +94 -94
- package/dist-es/skins/o2.js +94 -94
- package/dist-es/skins/telefonica.js +94 -94
- package/dist-es/skins/tu.js +94 -94
- package/dist-es/skins/vivo-new.js +98 -98
- package/dist-es/skins/vivo.js +94 -94
- package/dist-es/style.css +1 -1
- package/dist-es/text-tokens.js +72 -52
- package/dist-es/theme-context-provider.js +88 -78
- package/dist-es/theme.js +20 -20
- package/dist-es/utils/headings.js +2 -0
- package/package.json +2 -1
|
@@ -13,32 +13,35 @@ _export(exports, {
|
|
|
13
13
|
return e;
|
|
14
14
|
},
|
|
15
15
|
chevronContainer: function() {
|
|
16
|
-
return
|
|
16
|
+
return r;
|
|
17
17
|
},
|
|
18
18
|
itemContent: function() {
|
|
19
|
-
return
|
|
19
|
+
return a;
|
|
20
20
|
},
|
|
21
21
|
panel: function() {
|
|
22
|
-
return
|
|
22
|
+
return v;
|
|
23
23
|
},
|
|
24
24
|
panelContainer: function() {
|
|
25
|
-
return
|
|
25
|
+
return t;
|
|
26
26
|
},
|
|
27
27
|
panelTransitionClasses: function() {
|
|
28
|
-
return
|
|
28
|
+
return _;
|
|
29
29
|
},
|
|
30
|
-
|
|
30
|
+
rightContentContainer: function() {
|
|
31
31
|
return i;
|
|
32
32
|
},
|
|
33
|
-
|
|
33
|
+
touchableBackground: function() {
|
|
34
34
|
return o;
|
|
35
|
+
},
|
|
36
|
+
touchableBackgroundInverse: function() {
|
|
37
|
+
return x;
|
|
35
38
|
}
|
|
36
39
|
});
|
|
37
40
|
require("./sprinkles.css.ts.vanilla.css-mistica.js");
|
|
38
41
|
require("./accordion.css.ts.vanilla.css-mistica.js");
|
|
39
|
-
var e = "_1y2v1nfib",
|
|
40
|
-
enter: "
|
|
41
|
-
enterActive: "
|
|
42
|
-
exit: "
|
|
43
|
-
exitActive: "
|
|
44
|
-
}, i = "
|
|
42
|
+
var e = "_1y2v1nfib", r = "_8s3szx4", a = "_1y2v1nf7h _1y2v1nf8q _1y2v1nf9z _1y2v1nfb8 _1y2v1nfib _1y2v1nfk6 _1y2v1nf7g _1y2v1nfhq _1y2v1nfis", v = "_8s3szxa", t = "_8s3szx5", _ = {
|
|
43
|
+
enter: "_8s3szx6",
|
|
44
|
+
enterActive: "_8s3szx7",
|
|
45
|
+
exit: "_8s3szx8",
|
|
46
|
+
exitActive: "_8s3szx9"
|
|
47
|
+
}, i = "_8s3szx3", o = "_8s3szx1", x = "_8s3szx2";
|
package/dist/accordion.css.d.ts
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
export declare const itemContent: string;
|
|
2
2
|
export declare const touchableBackground: string;
|
|
3
3
|
export declare const touchableBackgroundInverse: string;
|
|
4
|
+
export declare const rightContentContainer: string;
|
|
4
5
|
export declare const chevronContainer: string;
|
|
5
6
|
export declare const panelContainer: string;
|
|
6
7
|
export declare const panelTransitionClasses: {
|
package/dist/accordion.d.ts
CHANGED
|
@@ -12,6 +12,10 @@ interface AccordionItemContentProps {
|
|
|
12
12
|
dataAttributes?: DataAttributes;
|
|
13
13
|
trackingEvent?: TrackingEvent | ReadonlyArray<TrackingEvent>;
|
|
14
14
|
role?: string;
|
|
15
|
+
detail?: string;
|
|
16
|
+
right?: React.ReactNode;
|
|
17
|
+
'aria-label'?: string;
|
|
18
|
+
'aria-labelledby'?: string;
|
|
15
19
|
}
|
|
16
20
|
export declare const AccordionItem: React.ForwardRefExoticComponent<AccordionItemContentProps & React.RefAttributes<TouchableElement>>;
|
|
17
21
|
type AccordionBaseProps = {
|
package/dist/accordion.js
CHANGED
|
@@ -11,16 +11,16 @@ function _export(target, all) {
|
|
|
11
11
|
}
|
|
12
12
|
_export(exports, {
|
|
13
13
|
Accordion: function() {
|
|
14
|
-
return
|
|
14
|
+
return pe;
|
|
15
15
|
},
|
|
16
16
|
AccordionItem: function() {
|
|
17
|
-
return
|
|
17
|
+
return fe;
|
|
18
18
|
},
|
|
19
19
|
BoxedAccordion: function() {
|
|
20
|
-
return
|
|
20
|
+
return xe;
|
|
21
21
|
},
|
|
22
22
|
BoxedAccordionItem: function() {
|
|
23
|
-
return
|
|
23
|
+
return Ie;
|
|
24
24
|
}
|
|
25
25
|
});
|
|
26
26
|
const _jsxruntime = require("react/jsx-runtime");
|
|
@@ -39,6 +39,7 @@ const _boxed = require("./boxed.js");
|
|
|
39
39
|
const _themevariantcontext = require("./theme-variant-context.js");
|
|
40
40
|
const _reacttransitiongroup = require("react-transition-group");
|
|
41
41
|
const _platform = require("./utils/platform.js");
|
|
42
|
+
const _inline = /*#__PURE__*/ _interop_require_default(require("./inline.js"));
|
|
42
43
|
function _interop_require_default(obj) {
|
|
43
44
|
return obj && obj.__esModule ? obj : {
|
|
44
45
|
default: obj
|
|
@@ -164,196 +165,212 @@ function _object_without_properties_loose(source, excluded) {
|
|
|
164
165
|
}
|
|
165
166
|
return target;
|
|
166
167
|
}
|
|
167
|
-
const
|
|
168
|
+
const R = 400, C = /*#__PURE__*/ _react.createContext({
|
|
168
169
|
index: [],
|
|
169
170
|
toggle: ()=>{}
|
|
170
|
-
}),
|
|
171
|
-
let { value:
|
|
172
|
-
const
|
|
171
|
+
}), Q = ()=>_react.useContext(C), N = (param)=>{
|
|
172
|
+
let { value: n, defaultValue: r, onChange: t, singleOpen: c } = param;
|
|
173
|
+
const d = n !== void 0, s = (e)=>e === void 0 ? [] : typeof e == "number" ? [
|
|
173
174
|
e
|
|
174
|
-
] : e, [
|
|
175
|
+
] : e, [a, u] = _react.useState(s(r));
|
|
175
176
|
_react.useEffect(()=>{
|
|
176
|
-
if (
|
|
177
|
+
if (a.length > 1 && c) {
|
|
177
178
|
const e = [
|
|
178
|
-
...
|
|
179
|
+
...a
|
|
179
180
|
];
|
|
180
|
-
e.splice(1),
|
|
181
|
+
e.splice(1), u(e);
|
|
181
182
|
}
|
|
182
183
|
}, [
|
|
183
|
-
|
|
184
|
-
|
|
184
|
+
c,
|
|
185
|
+
a
|
|
185
186
|
]);
|
|
186
|
-
const
|
|
187
|
+
const m = (e, l)=>{
|
|
187
188
|
if (!l) return [
|
|
188
189
|
e
|
|
189
190
|
];
|
|
190
|
-
const
|
|
191
|
+
const p = l.indexOf(e);
|
|
191
192
|
let I = [
|
|
192
193
|
...l
|
|
193
194
|
];
|
|
194
|
-
return
|
|
195
|
+
return p === -1 ? c ? I = [
|
|
195
196
|
e
|
|
196
|
-
] : I.push(e) : I.splice(
|
|
197
|
+
] : I.push(e) : I.splice(p, 1), I;
|
|
197
198
|
}, f = (e)=>{
|
|
198
|
-
if (
|
|
199
|
-
const l = (
|
|
200
|
-
|
|
199
|
+
if (d || u(m(e, a)), t) {
|
|
200
|
+
const l = (d ? s(n) : a).includes(e);
|
|
201
|
+
t(e, !l);
|
|
201
202
|
}
|
|
202
203
|
};
|
|
203
|
-
return
|
|
204
|
-
s(
|
|
204
|
+
return d ? [
|
|
205
|
+
s(n),
|
|
205
206
|
f
|
|
206
207
|
] : [
|
|
207
|
-
|
|
208
|
+
a,
|
|
208
209
|
f
|
|
209
210
|
];
|
|
210
|
-
},
|
|
211
|
-
const r =
|
|
212
|
-
if (r) return Array.from(r.querySelectorAll("[data-accordion-item]")).filter((
|
|
213
|
-
},
|
|
214
|
-
var { content:
|
|
211
|
+
}, W = (n)=>{
|
|
212
|
+
const r = n == null ? void 0 : n.closest("[data-accordion]");
|
|
213
|
+
if (r) return Array.from(r.querySelectorAll("[data-accordion-item]")).filter((t)=>t.closest("[data-accordion]") === r).findIndex((t)=>t === n);
|
|
214
|
+
}, S = /*#__PURE__*/ _react.forwardRef((_param, u)=>{
|
|
215
|
+
var { content: n, dataAttributes: r, trackingEvent: t, right: c, "aria-label": d, "aria-labelledby": s } = _param, a = _object_without_properties(_param, [
|
|
215
216
|
"content",
|
|
216
217
|
"dataAttributes",
|
|
217
|
-
"trackingEvent"
|
|
218
|
+
"trackingEvent",
|
|
219
|
+
"right",
|
|
220
|
+
"aria-label",
|
|
221
|
+
"aria-labelledby"
|
|
218
222
|
]);
|
|
219
|
-
const
|
|
223
|
+
const m = _react.useRef(null), f = _react.useRef(null), { index: e, toggle: l } = Q(), p = (0, _themevariantcontext.useIsInverseOrMediaVariant)(), I = _react.useId(), b = _react.useId(), [x, y] = _react.useState(), h = x !== void 0 && (e == null ? void 0 : e.includes(x));
|
|
220
224
|
return _react.useEffect(()=>{
|
|
221
|
-
|
|
225
|
+
y(W(f.current));
|
|
222
226
|
}, []), /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", _object_spread_props(_object_spread({
|
|
223
|
-
ref:
|
|
227
|
+
ref: f
|
|
224
228
|
}, (0, _dom.getPrefixedDataAttributes)(_object_spread_props(_object_spread({}, r), {
|
|
225
229
|
"accordion-item": !0
|
|
226
230
|
}))), {
|
|
227
231
|
children: [
|
|
228
232
|
/* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, {
|
|
229
|
-
ref:
|
|
230
|
-
className: (0, _classnames.default)(_accordioncssmistica.itemContent,
|
|
233
|
+
ref: u,
|
|
234
|
+
className: (0, _classnames.default)(_accordioncssmistica.itemContent, p ? _accordioncssmistica.touchableBackgroundInverse : _accordioncssmistica.touchableBackground),
|
|
231
235
|
onPress: ()=>{
|
|
232
|
-
|
|
236
|
+
x !== void 0 && l(x);
|
|
233
237
|
},
|
|
234
|
-
trackingEvent:
|
|
235
|
-
"aria-expanded":
|
|
236
|
-
"aria-controls":
|
|
238
|
+
trackingEvent: t,
|
|
239
|
+
"aria-expanded": h,
|
|
240
|
+
"aria-controls": b,
|
|
241
|
+
"aria-label": d,
|
|
242
|
+
"aria-labelledby": s,
|
|
237
243
|
children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
|
|
238
244
|
paddingX: 16,
|
|
239
245
|
children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_list.Content, _object_spread_props(_object_spread({
|
|
240
|
-
labelId:
|
|
241
|
-
},
|
|
242
|
-
right:
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
246
|
+
labelId: I
|
|
247
|
+
}, a), {
|
|
248
|
+
right: (param)=>{
|
|
249
|
+
let { centerY: O } = param;
|
|
250
|
+
return /* @__PURE__ */ (0, _jsxruntime.jsxs)(_inline.default, {
|
|
251
|
+
space: 4,
|
|
252
|
+
alignItems: O ? "center" : void 0,
|
|
253
|
+
className: _accordioncssmistica.rightContentContainer,
|
|
254
|
+
children: [
|
|
255
|
+
c,
|
|
256
|
+
/* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
|
|
257
|
+
className: _accordioncssmistica.chevronContainer,
|
|
258
|
+
children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconchevron.default, {
|
|
259
|
+
size: 24,
|
|
260
|
+
transitionDuration: R,
|
|
261
|
+
direction: h ? "up" : "down",
|
|
262
|
+
color: p ? _skincontractcssmistica.vars.colors.inverse : h ? _skincontractcssmistica.vars.colors.neutralHigh : _skincontractcssmistica.vars.colors.neutralMedium
|
|
263
|
+
})
|
|
264
|
+
})
|
|
265
|
+
]
|
|
266
|
+
});
|
|
267
|
+
}
|
|
251
268
|
}))
|
|
252
269
|
})
|
|
253
270
|
}),
|
|
254
271
|
/* @__PURE__ */ (0, _jsxruntime.jsx)(_reacttransitiongroup.CSSTransition, {
|
|
255
|
-
in:
|
|
256
|
-
timeout: (0, _platform.isRunningAcceptanceTest)() ? 0 :
|
|
257
|
-
nodeRef:
|
|
272
|
+
in: h,
|
|
273
|
+
timeout: (0, _platform.isRunningAcceptanceTest)() ? 0 : R,
|
|
274
|
+
nodeRef: m,
|
|
258
275
|
classNames: _accordioncssmistica.panelTransitionClasses,
|
|
259
276
|
mountOnEnter: !0,
|
|
260
277
|
unmountOnExit: !0,
|
|
261
278
|
children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
|
|
262
279
|
className: _accordioncssmistica.panelContainer,
|
|
263
|
-
ref:
|
|
280
|
+
ref: m,
|
|
264
281
|
children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
|
|
265
282
|
className: _accordioncssmistica.panel,
|
|
266
283
|
role: "region",
|
|
267
|
-
"aria-labelledby":
|
|
268
|
-
id:
|
|
284
|
+
"aria-labelledby": I,
|
|
285
|
+
id: b,
|
|
269
286
|
children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
|
|
270
287
|
paddingX: 16,
|
|
271
288
|
paddingBottom: 16,
|
|
272
|
-
children:
|
|
289
|
+
children: n
|
|
273
290
|
})
|
|
274
291
|
})
|
|
275
292
|
})
|
|
276
293
|
})
|
|
277
294
|
]
|
|
278
295
|
}));
|
|
279
|
-
}),
|
|
280
|
-
var { dataAttributes:
|
|
296
|
+
}), fe = /*#__PURE__*/ _react.forwardRef((_param, c)=>{
|
|
297
|
+
var { dataAttributes: n, role: r } = _param, t = _object_without_properties(_param, [
|
|
281
298
|
"dataAttributes",
|
|
282
299
|
"role"
|
|
283
300
|
]);
|
|
284
301
|
return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
|
|
285
302
|
role: r,
|
|
286
303
|
className: _accordioncssmistica.accordionItem,
|
|
287
|
-
children: /* @__PURE__ */ (0, _jsxruntime.jsx)(
|
|
288
|
-
ref:
|
|
304
|
+
children: /* @__PURE__ */ (0, _jsxruntime.jsx)(S, _object_spread_props(_object_spread({}, t), {
|
|
305
|
+
ref: c,
|
|
289
306
|
dataAttributes: _object_spread({
|
|
290
307
|
"component-name": "AccordionItem"
|
|
291
|
-
},
|
|
308
|
+
}, n)
|
|
292
309
|
}))
|
|
293
310
|
});
|
|
294
|
-
}),
|
|
295
|
-
let { children:
|
|
296
|
-
const [
|
|
297
|
-
value:
|
|
298
|
-
defaultValue:
|
|
299
|
-
onChange:
|
|
311
|
+
}), pe = (param)=>{
|
|
312
|
+
let { children: n, dataAttributes: r, index: t, defaultIndex: c, onChange: d, singleOpen: s, role: a } = param;
|
|
313
|
+
const [u, m] = N({
|
|
314
|
+
value: t,
|
|
315
|
+
defaultValue: c,
|
|
316
|
+
onChange: d,
|
|
300
317
|
singleOpen: s
|
|
301
|
-
}), f = _react.Children.toArray(
|
|
302
|
-
return /* @__PURE__ */ (0, _jsxruntime.jsx)(
|
|
318
|
+
}), f = _react.Children.toArray(n).filter(Boolean), e = f.length - 1;
|
|
319
|
+
return /* @__PURE__ */ (0, _jsxruntime.jsx)(C.Provider, {
|
|
303
320
|
value: {
|
|
304
|
-
index:
|
|
305
|
-
toggle:
|
|
321
|
+
index: u,
|
|
322
|
+
toggle: m
|
|
306
323
|
},
|
|
307
324
|
children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({
|
|
308
|
-
role:
|
|
325
|
+
role: a
|
|
309
326
|
}, (0, _dom.getPrefixedDataAttributes)(_object_spread_props(_object_spread({}, r), {
|
|
310
327
|
accordion: !0
|
|
311
328
|
}), "Accordion")), {
|
|
312
|
-
children: f.map((l,
|
|
329
|
+
children: f.map((l, p)=>/* @__PURE__ */ (0, _jsxruntime.jsxs)(_react.Fragment, {
|
|
313
330
|
children: [
|
|
314
331
|
l,
|
|
315
|
-
|
|
332
|
+
p < e && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
|
|
316
333
|
paddingX: 16,
|
|
317
334
|
children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_divider.default, {})
|
|
318
335
|
})
|
|
319
336
|
]
|
|
320
|
-
},
|
|
337
|
+
}, p))
|
|
321
338
|
}))
|
|
322
339
|
});
|
|
323
|
-
},
|
|
324
|
-
var { dataAttributes:
|
|
340
|
+
}, Ie = /*#__PURE__*/ _react.forwardRef((_param, c)=>{
|
|
341
|
+
var { dataAttributes: n, isInverse: r } = _param, t = _object_without_properties(_param, [
|
|
325
342
|
"dataAttributes",
|
|
326
343
|
"isInverse"
|
|
327
344
|
]);
|
|
328
345
|
return /* @__PURE__ */ (0, _jsxruntime.jsx)(_boxed.Boxed, {
|
|
329
|
-
|
|
330
|
-
ref:
|
|
346
|
+
variant: r ? "inverse" : "default",
|
|
347
|
+
ref: c,
|
|
331
348
|
dataAttributes: _object_spread({
|
|
332
349
|
"component-name": "BoxedAccordionItem"
|
|
333
|
-
},
|
|
334
|
-
children: /* @__PURE__ */ (0, _jsxruntime.jsx)(
|
|
350
|
+
}, n),
|
|
351
|
+
children: /* @__PURE__ */ (0, _jsxruntime.jsx)(S, _object_spread({}, t))
|
|
335
352
|
});
|
|
336
|
-
}),
|
|
337
|
-
let { children:
|
|
338
|
-
const [
|
|
339
|
-
value:
|
|
340
|
-
defaultValue:
|
|
341
|
-
onChange:
|
|
353
|
+
}), xe = (param)=>{
|
|
354
|
+
let { children: n, dataAttributes: r, index: t, defaultIndex: c, onChange: d, singleOpen: s, role: a } = param;
|
|
355
|
+
const [u, m] = N({
|
|
356
|
+
value: t,
|
|
357
|
+
defaultValue: c,
|
|
358
|
+
onChange: d,
|
|
342
359
|
singleOpen: s
|
|
343
360
|
});
|
|
344
|
-
return /* @__PURE__ */ (0, _jsxruntime.jsx)(
|
|
361
|
+
return /* @__PURE__ */ (0, _jsxruntime.jsx)(C.Provider, {
|
|
345
362
|
value: {
|
|
346
|
-
index:
|
|
347
|
-
toggle:
|
|
363
|
+
index: u,
|
|
364
|
+
toggle: m
|
|
348
365
|
},
|
|
349
366
|
children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_stack.default, {
|
|
350
367
|
space: 16,
|
|
351
|
-
role:
|
|
368
|
+
role: a,
|
|
352
369
|
dataAttributes: _object_spread({
|
|
353
370
|
"component-name": "BoxedAccordion",
|
|
354
371
|
accordion: !0
|
|
355
372
|
}, r),
|
|
356
|
-
children:
|
|
373
|
+
children: n
|
|
357
374
|
})
|
|
358
375
|
});
|
|
359
376
|
};
|
package/dist/callout.js
CHANGED
|
@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
Object.defineProperty(exports, "default", {
|
|
7
7
|
enumerable: true,
|
|
8
8
|
get: function() {
|
|
9
|
-
return
|
|
9
|
+
return at;
|
|
10
10
|
}
|
|
11
11
|
});
|
|
12
12
|
const _jsxruntime = require("react/jsx-runtime");
|
|
@@ -84,22 +84,25 @@ function _object_spread_props(target, source) {
|
|
|
84
84
|
return target;
|
|
85
85
|
}
|
|
86
86
|
const W = (param)=>{
|
|
87
|
-
let { title:
|
|
88
|
-
const b = (0, _themevariantcontext.useThemeVariant)(), { texts: x, t:
|
|
87
|
+
let { title: a, titleAs: c = "h2", description: d, asset: o, onClose: r, closeButtonLabel: u, button: i, secondaryButton: s, buttonLink: l, "aria-label": p, dataAttributes: f, role: h } = param;
|
|
88
|
+
const b = (0, _themevariantcontext.useThemeVariant)(), { texts: x, t: B } = (0, _hooks.useTheme)();
|
|
89
89
|
return /* @__PURE__ */ (0, _jsxruntime.jsx)("section", _object_spread_props(_object_spread({
|
|
90
90
|
className: (0, _classnames.default)(_calloutcssmistica.container, _calloutcssmistica.background[b]),
|
|
91
91
|
style: (0, _css.applyCssVars)({
|
|
92
92
|
[_imagecssmistica.vars.mediaBorderRadius]: _skincontractcssmistica.vars.borderRadii.mediaSmall
|
|
93
93
|
}),
|
|
94
|
-
"aria-label":
|
|
94
|
+
"aria-label": p !== null && p !== void 0 ? p : a,
|
|
95
95
|
role: h
|
|
96
96
|
}, (0, _dom.getPrefixedDataAttributes)(f, "Callout")), {
|
|
97
97
|
children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_themevariantcontext.ThemeVariant, {
|
|
98
98
|
isInverse: !1,
|
|
99
99
|
children: [
|
|
100
|
-
|
|
100
|
+
o && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
|
|
101
101
|
paddingRight: 16,
|
|
102
|
-
|
|
102
|
+
dataAttributes: {
|
|
103
|
+
testid: "asset"
|
|
104
|
+
},
|
|
105
|
+
children: o
|
|
103
106
|
}),
|
|
104
107
|
/* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
|
|
105
108
|
className: _calloutcssmistica.content,
|
|
@@ -118,39 +121,48 @@ const W = (param)=>{
|
|
|
118
121
|
/* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
|
|
119
122
|
as: c,
|
|
120
123
|
regular: !0,
|
|
121
|
-
|
|
124
|
+
dataAttributes: {
|
|
125
|
+
testid: "title"
|
|
126
|
+
},
|
|
127
|
+
children: a
|
|
122
128
|
}),
|
|
123
129
|
/* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
|
|
124
130
|
as: "p",
|
|
125
131
|
regular: !0,
|
|
126
132
|
color: _skincontractcssmistica.vars.colors.textSecondary,
|
|
133
|
+
dataAttributes: {
|
|
134
|
+
testid: "description"
|
|
135
|
+
},
|
|
127
136
|
children: d
|
|
128
137
|
})
|
|
129
138
|
]
|
|
130
139
|
}),
|
|
131
|
-
|
|
140
|
+
r && // Create empty div in order to fill space that iconButton occupies.
|
|
132
141
|
// Without this, the content's vertical alignment can be affected
|
|
133
142
|
/* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
|
|
134
143
|
className: _calloutcssmistica.closeButtonContainerSize
|
|
135
144
|
})
|
|
136
145
|
]
|
|
137
146
|
}),
|
|
138
|
-
(i ||
|
|
147
|
+
(i || s || l) && /* @__PURE__ */ (0, _jsxruntime.jsx)(_buttongroup.default, {
|
|
139
148
|
primaryButton: i,
|
|
140
|
-
secondaryButton:
|
|
141
|
-
link:
|
|
149
|
+
secondaryButton: s,
|
|
150
|
+
link: l
|
|
142
151
|
})
|
|
143
152
|
]
|
|
144
153
|
}),
|
|
145
|
-
|
|
154
|
+
r && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
|
|
146
155
|
className: _calloutcssmistica.closeButtonContainer,
|
|
147
156
|
children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconbutton.IconButton, {
|
|
157
|
+
dataAttributes: {
|
|
158
|
+
testid: "closeButton"
|
|
159
|
+
},
|
|
148
160
|
small: !0,
|
|
149
161
|
bleedY: !0,
|
|
150
162
|
bleedRight: !0,
|
|
151
163
|
Icon: _iconcloseregular.default,
|
|
152
|
-
onPress:
|
|
153
|
-
"aria-label":
|
|
164
|
+
onPress: r,
|
|
165
|
+
"aria-label": u || x.closeButtonLabel || B(_texttokens.closeButtonLabel)
|
|
154
166
|
})
|
|
155
167
|
})
|
|
156
168
|
]
|
|
@@ -158,4 +170,4 @@ const W = (param)=>{
|
|
|
158
170
|
]
|
|
159
171
|
})
|
|
160
172
|
}));
|
|
161
|
-
},
|
|
173
|
+
}, at = W;
|
package/dist/card.css-mistica.js
CHANGED
|
@@ -28,10 +28,10 @@ _export(exports, {
|
|
|
28
28
|
return i;
|
|
29
29
|
},
|
|
30
30
|
dataCardTopActionsWithoutIcon: function() {
|
|
31
|
-
return
|
|
31
|
+
return t;
|
|
32
32
|
},
|
|
33
33
|
displayCardBackground: function() {
|
|
34
|
-
return
|
|
34
|
+
return s;
|
|
35
35
|
},
|
|
36
36
|
displayCardContainer: function() {
|
|
37
37
|
return o;
|
|
@@ -55,10 +55,10 @@ _export(exports, {
|
|
|
55
55
|
return p;
|
|
56
56
|
},
|
|
57
57
|
mediaCard: function() {
|
|
58
|
-
return
|
|
58
|
+
return u;
|
|
59
59
|
},
|
|
60
60
|
mediaCardAsset: function() {
|
|
61
|
-
return
|
|
61
|
+
return c;
|
|
62
62
|
},
|
|
63
63
|
mediaCardContent: function() {
|
|
64
64
|
return m;
|
|
@@ -100,7 +100,7 @@ _export(exports, {
|
|
|
100
100
|
require("./sprinkles.css.ts.vanilla.css-mistica.js");
|
|
101
101
|
require("./icon-button.css.ts.vanilla.css-mistica.js");
|
|
102
102
|
require("./card.css.ts.vanilla.css-mistica.js");
|
|
103
|
-
var _ = "_15e54s91 _1y2v1nfho _1y2v1nfia _1y2v1nfi4", y = "_15e54s93 _1y2v1nfho _1y2v1nfhi", e = "_15e54s912", r = "_1y2v1nfho _1y2v1nfia _1y2v1nfi0 _1y2v1nfhu", f = "_15e54s99", i = "_15e54s9m _1y2v1nfae _1y2v1nfbn _1y2v1nf82 _1y2v1nf9b _1y2v1nfho _1y2v1nfia _1y2v1nfhi _1y2v1nfhu _1y2v1nfib",
|
|
103
|
+
var _ = "_15e54s91 _1y2v1nfho _1y2v1nfia _1y2v1nfi4", y = "_15e54s93 _1y2v1nfho _1y2v1nfhi", e = "_15e54s912", r = "_1y2v1nfho _1y2v1nfia _1y2v1nfi0 _1y2v1nfhu", f = "_15e54s99", i = "_15e54s9m _1y2v1nfae _1y2v1nfbn _1y2v1nf82 _1y2v1nf9b _1y2v1nfho _1y2v1nfia _1y2v1nfhi _1y2v1nfhu _1y2v1nfib", t = "_15e54s913", s = "_15e54s9v", o = "_1y2v1nfib _1y2v1nfis _1y2v1nfho _1y2v1nfhi", d = "_15e54s9s", C = "_1y2v1nf7w _1y2v1nf84", h = "_1y2v1nf82", b = "_1y2v1nfak _1y2v1nfbt _1y2v1nf9b", l = "_15e54s9y _1y2v1nf88", p = "_1y2v1nfho _1y2v1nfhu", u = "_1y2v1nfho _1y2v1nfhu _1y2v1nfis _1y2v1nfib _1y2v1nfia", c = "_15e54s9i _1y2v1nfae _1y2v1nfam _1y2v1nf7w _1y2v1nf84", m = "_15e54s9g _1y2v1nfae _1y2v1nfbn _1y2v1nfho _1y2v1nfia _1y2v1nfhi _1y2v1nf7w _1y2v1nf9b _1y2v1nfhu _1y2v1nfi0", O = "_15e54s9k _1y2v1nfho _1y2v1nfia _1y2v1nfhi _1y2v1nfhu _1y2v1nfi0 _1y2v1nf7w _1y2v1nfbn", k = "_1y2v1nfae _1y2v1nfam _1y2v1nfbn _1y2v1nfbv _1y2v1nf9b", w = "_15e54s9o _1y2v1nf7w _1y2v1nf95 _1y2v1nfae _1y2v1nfbn _1y2v1nfho _1y2v1nfhi _1y2v1nfis _1y2v1nfhu _1y2v1nfi0 _1y2v1nfib _1y2v1nfia", W = "_15e54s96", A = "_15e54s9b _15e54s97", M = "_15e54s9c _15e54s97", x = "_15e54s9d _15e54s97", g = "_15e54s95", I = "_15e54s98 _15e54s97", T = "_15e54s9a _15e54s97", B = {
|
|
104
104
|
aspectRatio: "var(--_15e54s910)",
|
|
105
105
|
topActionsCount: "var(--_15e54s911)"
|
|
106
106
|
};
|
package/dist/card.d.ts
CHANGED
|
@@ -2,12 +2,16 @@ import * as React from 'react';
|
|
|
2
2
|
import Tag from './tag';
|
|
3
3
|
import Image from './image';
|
|
4
4
|
import Video from './video';
|
|
5
|
+
import { type DataAttributes, type HeadingType, type IconProps, type RendersElement, type RendersNullableElement, type TrackingEvent } from './utils/types';
|
|
5
6
|
import type { Variant } from './theme-variant-context';
|
|
6
7
|
import type { PressHandler } from './touchable';
|
|
7
8
|
import type { VideoElement, VideoSource } from './video';
|
|
8
9
|
import type { ButtonLink, ButtonPrimary, ButtonSecondary } from './button';
|
|
9
10
|
import type { ExclusifyUnion } from './utils/utility-types';
|
|
10
|
-
|
|
11
|
+
export declare const useInnerText: () => {
|
|
12
|
+
text: string;
|
|
13
|
+
ref: (instance: HTMLElement | null) => void;
|
|
14
|
+
};
|
|
11
15
|
type BaseIconButtonAction = {
|
|
12
16
|
Icon: (props: IconProps) => JSX.Element;
|
|
13
17
|
label: string;
|
|
@@ -73,6 +77,7 @@ interface MediaCardBaseProps {
|
|
|
73
77
|
asset?: React.ReactElement;
|
|
74
78
|
headline?: string | RendersNullableElement<typeof Tag>;
|
|
75
79
|
pretitle?: string;
|
|
80
|
+
pretitleAs?: HeadingType;
|
|
76
81
|
pretitleLinesMax?: number;
|
|
77
82
|
title?: string;
|
|
78
83
|
titleAs?: HeadingType;
|
|
@@ -116,6 +121,7 @@ interface DataCardBaseProps {
|
|
|
116
121
|
asset?: React.ReactElement;
|
|
117
122
|
headline?: string | RendersNullableElement<typeof Tag>;
|
|
118
123
|
pretitle?: string;
|
|
124
|
+
pretitleAs?: HeadingType;
|
|
119
125
|
pretitleLinesMax?: number;
|
|
120
126
|
title?: string;
|
|
121
127
|
titleAs?: HeadingType;
|
|
@@ -168,6 +174,7 @@ interface CommonDisplayCardProps {
|
|
|
168
174
|
dataAttributes?: DataAttributes;
|
|
169
175
|
headline?: React.ReactComponentElement<typeof Tag>;
|
|
170
176
|
pretitle?: string;
|
|
177
|
+
pretitleAs?: HeadingType;
|
|
171
178
|
pretitleLinesMax?: number;
|
|
172
179
|
title: string;
|
|
173
180
|
titleAs?: HeadingType;
|
|
@@ -222,6 +229,7 @@ interface PosterCardBaseProps {
|
|
|
222
229
|
dataAttributes?: DataAttributes;
|
|
223
230
|
headline?: string | RendersNullableElement<typeof Tag>;
|
|
224
231
|
pretitle?: string;
|
|
232
|
+
pretitleAs?: HeadingType;
|
|
225
233
|
pretitleLinesMax?: number;
|
|
226
234
|
title?: string;
|
|
227
235
|
titleAs?: HeadingType;
|