@telefonica/mistica 14.34.0 → 14.35.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/avatar.css-mistica.js +1 -1
- package/dist/button.css-mistica.js +7 -7
- package/dist/callout.css-mistica.js +1 -1
- package/dist/callout.js +17 -12
- package/dist/card.js +277 -244
- package/dist/carousel.css-mistica.js +5 -5
- package/dist/carousel.js +54 -52
- package/dist/checkbox.js +18 -18
- package/dist/community/advanced-data-card.css-mistica.js +3 -3
- package/dist/community/advanced-data-card.js +57 -50
- package/dist/community/blocks.js +42 -35
- package/dist/counter.css-mistica.js +1 -1
- package/dist/cvv-field.js +1 -1
- package/dist/dialog.css-mistica.js +3 -3
- package/dist/dialog.js +2 -2
- package/dist/hero.js +34 -30
- package/dist/hooks.d.ts +12 -1
- package/dist/hooks.js +85 -48
- package/dist/image.css-mistica.js +7 -2
- package/dist/image.css.d.ts +3 -0
- package/dist/image.d.ts +1 -7
- package/dist/image.js +55 -66
- package/dist/list.css-mistica.js +1 -1
- package/dist/list.js +80 -75
- package/dist/loading-bar.css-mistica.js +6 -6
- package/dist/maybe-dismissable.css-mistica.js +1 -1
- package/dist/menu.js +32 -32
- package/dist/navigation-bar.css-mistica.js +10 -10
- package/dist/overlay.js +10 -10
- package/dist/package-version.js +1 -1
- package/dist/pin-field.css-mistica.js +3 -3
- package/dist/popover.css-mistica.js +4 -4
- package/dist/radio-button.css-mistica.js +5 -5
- package/dist/radio-button.js +7 -7
- package/dist/screen-reader-only.css-mistica.js +1 -1
- package/dist/select.css-mistica.js +7 -7
- package/dist/select.js +65 -53
- package/dist/sheet.css-mistica.js +8 -8
- package/dist/skeletons.d.ts +9 -1
- package/dist/skeletons.js +3 -0
- package/dist/skins/blau.js +2 -1
- package/dist/skins/defaults.js +2 -1
- package/dist/skins/movistar-legacy.js +2 -1
- package/dist/skins/movistar.js +2 -1
- package/dist/skins/o2.js +2 -1
- package/dist/skins/skin-contract.css-mistica.js +2 -1
- package/dist/skins/skin-contract.css.d.ts +1 -0
- package/dist/skins/telefonica.js +2 -1
- package/dist/skins/types/index.d.ts +1 -0
- package/dist/skins/vivo-new.js +2 -1
- package/dist/skins/vivo.js +2 -1
- package/dist/slider.css-mistica.js +19 -19
- package/dist/slider.css.d.ts +8 -8
- package/dist/slider.d.ts +28 -8
- package/dist/slider.js +226 -106
- package/dist/snackbar.css-mistica.js +5 -5
- package/dist/sprinkles.css-mistica.js +71 -68
- package/dist/stacking-group.js +31 -24
- package/dist/stepper.css-mistica.js +3 -3
- package/dist/switch-component.css-mistica.js +17 -17
- package/dist/switch-component.js +12 -12
- package/dist/tab-focus.js +12 -12
- package/dist/tabs.css-mistica.js +1 -1
- package/dist/text-field-base.css-mistica.js +1 -1
- package/dist/text-field-components.css-mistica.js +7 -7
- package/dist/text-link.css-mistica.js +3 -3
- package/dist/theme-context-provider.js +39 -36
- package/dist/tooltip-context-provider.d.ts +14 -0
- package/dist/tooltip-context-provider.js +90 -0
- package/dist/tooltip.css-mistica.js +25 -54
- package/dist/tooltip.css.d.ts +19 -26
- package/dist/tooltip.d.ts +15 -1
- package/dist/tooltip.js +255 -207
- package/dist/touchable.css-mistica.js +1 -1
- package/dist/touchable.js +8 -8
- package/dist/utils/aspect-ratio-support.css-mistica.js +2 -2
- package/dist/utils/environment.d.ts +1 -0
- package/dist/utils/environment.js +4 -1
- package/dist/utils/keys.d.ts +8 -0
- package/dist/utils/{key-codes.js → keys.js} +6 -6
- package/dist/video.css-mistica.js +1 -1
- package/dist/video.js +33 -31
- package/dist-es/avatar.css-mistica.js +1 -1
- package/dist-es/button.css-mistica.js +7 -7
- package/dist-es/callout.css-mistica.js +1 -1
- package/dist-es/callout.js +33 -28
- package/dist-es/card.js +416 -383
- package/dist-es/carousel.css-mistica.js +2 -2
- package/dist-es/carousel.js +84 -82
- package/dist-es/checkbox.js +18 -18
- package/dist-es/community/advanced-data-card.css-mistica.js +2 -2
- package/dist-es/community/advanced-data-card.js +83 -76
- package/dist-es/community/blocks.js +77 -70
- package/dist-es/counter.css-mistica.js +1 -1
- package/dist-es/cvv-field.js +1 -1
- package/dist-es/dialog.css-mistica.js +3 -3
- package/dist-es/dialog.js +2 -2
- package/dist-es/hero.js +69 -65
- package/dist-es/hooks.js +83 -49
- package/dist-es/image.css-mistica.js +4 -2
- package/dist-es/image.js +74 -79
- package/dist-es/list.css-mistica.js +1 -1
- package/dist-es/list.js +116 -111
- package/dist-es/loading-bar.css-mistica.js +2 -2
- package/dist-es/maybe-dismissable.css-mistica.js +1 -1
- package/dist-es/menu.js +41 -41
- package/dist-es/navigation-bar.css-mistica.js +6 -6
- package/dist-es/overlay.js +14 -14
- package/dist-es/package-version.js +1 -1
- package/dist-es/pin-field.css-mistica.js +2 -2
- package/dist-es/popover.css-mistica.js +2 -2
- package/dist-es/radio-button.css-mistica.js +4 -4
- package/dist-es/radio-button.js +2 -2
- package/dist-es/screen-reader-only.css-mistica.js +1 -1
- package/dist-es/select.css-mistica.js +7 -7
- package/dist-es/select.js +89 -77
- package/dist-es/sheet.css-mistica.js +2 -2
- package/dist-es/skeletons.js +1 -1
- package/dist-es/skins/blau.js +2 -1
- package/dist-es/skins/defaults.js +2 -1
- package/dist-es/skins/movistar-legacy.js +2 -1
- package/dist-es/skins/movistar.js +2 -1
- package/dist-es/skins/o2.js +2 -1
- package/dist-es/skins/skin-contract.css-mistica.js +2 -1
- package/dist-es/skins/telefonica.js +2 -1
- package/dist-es/skins/vivo-new.js +2 -1
- package/dist-es/skins/vivo.js +2 -1
- package/dist-es/slider.css-mistica.js +2 -8
- package/dist-es/slider.js +231 -111
- package/dist-es/snackbar.css-mistica.js +4 -4
- package/dist-es/sprinkles.css-mistica.js +71 -68
- package/dist-es/stacking-group.js +37 -30
- package/dist-es/stepper.css-mistica.js +2 -2
- package/dist-es/style.css +1 -1
- package/dist-es/switch-component.css-mistica.js +13 -13
- package/dist-es/switch-component.js +14 -14
- package/dist-es/tab-focus.js +14 -14
- package/dist-es/tabs.css-mistica.js +1 -1
- package/dist-es/text-field-base.css-mistica.js +1 -1
- package/dist-es/text-field-components.css-mistica.js +2 -2
- package/dist-es/text-link.css-mistica.js +3 -3
- package/dist-es/theme-context-provider.js +53 -50
- package/dist-es/tooltip-context-provider.js +29 -0
- package/dist-es/tooltip.css-mistica.js +16 -9
- package/dist-es/tooltip.js +264 -216
- package/dist-es/touchable.css-mistica.js +1 -1
- package/dist-es/touchable.js +8 -8
- package/dist-es/utils/aspect-ratio-support.css-mistica.js +2 -2
- package/dist-es/utils/environment.js +2 -2
- package/dist-es/utils/keys.js +2 -0
- package/dist-es/video.css-mistica.js +1 -1
- package/dist-es/video.js +41 -39
- package/package.json +1 -1
- package/dist/utils/key-codes.d.ts +0 -8
- package/dist-es/utils/key-codes.js +0 -2
|
@@ -78,24 +78,26 @@ function _object_without_properties_loose(source, excluded) {
|
|
|
78
78
|
}
|
|
79
79
|
return target;
|
|
80
80
|
}
|
|
81
|
-
import { jsx as e, jsxs as
|
|
82
|
-
import * as
|
|
83
|
-
import { Boxed as
|
|
81
|
+
import { jsx as e, jsxs as t, Fragment as P } from "react/jsx-runtime";
|
|
82
|
+
import * as M from "react";
|
|
83
|
+
import { Boxed as U } from "../boxed.js";
|
|
84
84
|
import { sprinkles as C } from "../sprinkles.css-mistica.js";
|
|
85
85
|
import j from "../stack.js";
|
|
86
|
-
import { dataCard as X, touchableContainer as Y, touchableCardOverlay as Z, cardContentStyle as q, minHeight as J, zindex as K, paddingX as Q, touchableArea as $, divider as ee, actions as
|
|
86
|
+
import { dataCard as X, touchableContainer as Y, touchableCardOverlay as Z, cardContentStyle as q, minHeight as J, zindex as K, paddingX as Q, touchableArea as $, divider as ee, actions as re, actionsVariants as te, marginRightButton as ae, buttonMobile as O, footerDirection as ie, marginRightAuto as oe, footerText as se, adjustButtonLink as ne, button as de } from "./advanced-data-card.css-mistica.js";
|
|
87
|
+
import { vars as le } from "../image.css-mistica.js";
|
|
87
88
|
import k from "../divider.js";
|
|
88
89
|
import { Text2 as v, Text as ce } from "../text.js";
|
|
89
|
-
import { vars as
|
|
90
|
+
import { vars as y } from "../skins/skin-contract.css-mistica.js";
|
|
90
91
|
import N from "../box.js";
|
|
91
|
-
import
|
|
92
|
-
import
|
|
93
|
-
import { CardActionsGroup as he, TOP_ACTION_BUTTON_SIZE as
|
|
94
|
-
import { useTheme as
|
|
95
|
-
import { getPrefixedDataAttributes as
|
|
96
|
-
import
|
|
97
|
-
|
|
98
|
-
|
|
92
|
+
import me from "../touchable.js";
|
|
93
|
+
import h from "classnames";
|
|
94
|
+
import { CardActionsGroup as he, TOP_ACTION_BUTTON_SIZE as pe } from "../card.js";
|
|
95
|
+
import { useTheme as ue } from "../hooks.js";
|
|
96
|
+
import { getPrefixedDataAttributes as ge } from "../utils/dom.js";
|
|
97
|
+
import fe from "../inline.js";
|
|
98
|
+
import { applyCssVars as ve } from "../utils/css.js";
|
|
99
|
+
const ye = (_param)=>{
|
|
100
|
+
var { headline: a, pretitle: i, pretitleAs: n = "p", pretitleLinesMax: p, title: d, titleAs: l = "h3", titleLinesMax: c, subtitle: m, subtitleLinesMax: o, description: r, descriptionLinesMax: u, ariaLabel: x } = _param, s = _object_without_properties(_param, [
|
|
99
101
|
"headline",
|
|
100
102
|
"pretitle",
|
|
101
103
|
"pretitleAs",
|
|
@@ -109,23 +111,23 @@ const fe = (_param)=>{
|
|
|
109
111
|
"descriptionLinesMax",
|
|
110
112
|
"ariaLabel"
|
|
111
113
|
]);
|
|
112
|
-
const { textPresets:
|
|
113
|
-
return /* @__PURE__ */
|
|
114
|
+
const { textPresets: T } = ue();
|
|
115
|
+
return /* @__PURE__ */ t(j, {
|
|
114
116
|
space: 4,
|
|
115
117
|
children: [
|
|
116
118
|
a,
|
|
117
|
-
/* @__PURE__ */ e(
|
|
119
|
+
/* @__PURE__ */ e(me, _object_spread_props(_object_spread({
|
|
118
120
|
tabIndex: 0,
|
|
119
121
|
maybe: !0,
|
|
120
|
-
className:
|
|
121
|
-
},
|
|
122
|
+
className: h($)
|
|
123
|
+
}, s), {
|
|
122
124
|
"aria-label": x,
|
|
123
125
|
children: /* @__PURE__ */ e(P, {})
|
|
124
126
|
})),
|
|
125
127
|
i && /* @__PURE__ */ e(v, {
|
|
126
|
-
color:
|
|
128
|
+
color: y.colors.textPrimary,
|
|
127
129
|
truncate: p,
|
|
128
|
-
as:
|
|
130
|
+
as: n,
|
|
129
131
|
regular: !0,
|
|
130
132
|
hyphens: "auto",
|
|
131
133
|
children: i
|
|
@@ -135,82 +137,87 @@ const fe = (_param)=>{
|
|
|
135
137
|
mobileLineHeight: "24px",
|
|
136
138
|
desktopSize: 20,
|
|
137
139
|
desktopLineHeight: "28px",
|
|
138
|
-
truncate:
|
|
139
|
-
weight:
|
|
140
|
-
as:
|
|
140
|
+
truncate: c,
|
|
141
|
+
weight: T.cardTitle.weight,
|
|
142
|
+
as: l,
|
|
141
143
|
hyphens: "auto",
|
|
142
144
|
children: d
|
|
143
145
|
}),
|
|
144
146
|
/* @__PURE__ */ e(v, {
|
|
145
|
-
color:
|
|
147
|
+
color: y.colors.textPrimary,
|
|
146
148
|
truncate: o,
|
|
147
149
|
as: "p",
|
|
148
150
|
regular: !0,
|
|
149
151
|
hyphens: "auto",
|
|
150
|
-
children:
|
|
152
|
+
children: m
|
|
151
153
|
}),
|
|
152
|
-
|
|
154
|
+
r && /* @__PURE__ */ e(v, {
|
|
153
155
|
truncate: u,
|
|
154
156
|
as: "p",
|
|
155
157
|
regular: !0,
|
|
156
|
-
color:
|
|
158
|
+
color: y.colors.textSecondary,
|
|
157
159
|
hyphens: "auto",
|
|
158
|
-
children:
|
|
160
|
+
children: r
|
|
159
161
|
})
|
|
160
162
|
]
|
|
161
163
|
});
|
|
162
|
-
},
|
|
163
|
-
let { button: a, footerImage: i, footerText:
|
|
164
|
-
const
|
|
165
|
-
return /* @__PURE__ */
|
|
164
|
+
}, Ne = (param)=>{
|
|
165
|
+
let { button: a, footerImage: i, footerText: n, footerTextLinesMax: p, buttonLink: d } = param;
|
|
166
|
+
const l = !!a, c = !!i, m = !!n, o = !!d, r = l && (c || m) && o, u = o && !r ? "178px" : "";
|
|
167
|
+
return /* @__PURE__ */ t(P, {
|
|
166
168
|
children: [
|
|
167
169
|
/* @__PURE__ */ e("div", {
|
|
168
170
|
className: ee,
|
|
169
171
|
children: /* @__PURE__ */ e(k, {})
|
|
170
172
|
}),
|
|
171
|
-
/* @__PURE__ */
|
|
172
|
-
className:
|
|
173
|
+
/* @__PURE__ */ t("div", {
|
|
174
|
+
className: h(re, te[r ? "mobile" : "default"]),
|
|
173
175
|
children: [
|
|
174
|
-
|
|
175
|
-
className:
|
|
176
|
+
l && /* @__PURE__ */ e("div", {
|
|
177
|
+
className: h(ae, O),
|
|
176
178
|
children: a
|
|
177
179
|
}),
|
|
178
|
-
/* @__PURE__ */
|
|
179
|
-
className:
|
|
180
|
+
/* @__PURE__ */ t("div", {
|
|
181
|
+
className: h(ie, r ? oe : C({
|
|
180
182
|
paddingTop: 16
|
|
181
183
|
})),
|
|
182
184
|
children: [
|
|
183
|
-
|
|
185
|
+
c && /* @__PURE__ */ e(N, {
|
|
184
186
|
paddingRight: 16,
|
|
185
187
|
className: C({
|
|
186
188
|
alignItems: "center",
|
|
187
189
|
display: "flex"
|
|
188
190
|
}),
|
|
189
|
-
children:
|
|
191
|
+
children: /* @__PURE__ */ e("div", {
|
|
192
|
+
style: ve({
|
|
193
|
+
[le.mediaBorderRadius]: y.borderRadii.mediaSmall
|
|
194
|
+
}),
|
|
195
|
+
children: i
|
|
196
|
+
})
|
|
190
197
|
}),
|
|
191
|
-
|
|
198
|
+
m && /* @__PURE__ */ e("div", {
|
|
192
199
|
style: {
|
|
193
200
|
maxWidth: u
|
|
194
201
|
},
|
|
195
|
-
className:
|
|
202
|
+
className: se,
|
|
196
203
|
children: /* @__PURE__ */ e(v, {
|
|
197
204
|
truncate: p,
|
|
198
205
|
regular: !0,
|
|
199
|
-
children:
|
|
206
|
+
children: n
|
|
200
207
|
})
|
|
201
208
|
})
|
|
202
209
|
]
|
|
203
210
|
}),
|
|
204
211
|
o && /* @__PURE__ */ e("div", {
|
|
205
|
-
className:
|
|
212
|
+
className: h(ne, r ? de : O),
|
|
206
213
|
children: d
|
|
207
214
|
})
|
|
208
215
|
]
|
|
209
216
|
})
|
|
210
217
|
]
|
|
211
218
|
});
|
|
212
|
-
},
|
|
213
|
-
var { stackingGroup: a, headline: i, pretitle:
|
|
219
|
+
}, xe = /*#__PURE__*/ M.forwardRef((_param, _)=>{
|
|
220
|
+
var { stackingGroup: a, headline: i, pretitle: n, pretitleAs: p, pretitleLinesMax: d, title: l, titleAs: c, titleLinesMax: m, subtitle: o, subtitleLinesMax: r, description: u, descriptionLinesMax: x, extra: s, extraDividerPadding: T = 24, button: b, footerImage: A, footerText: B, footerTextLinesMax: z, buttonLink: R, dataAttributes: H, actions: g, "aria-label": S, onClose: w } = _param, f = _object_without_properties(_param, [
|
|
214
221
|
"stackingGroup",
|
|
215
222
|
"headline",
|
|
216
223
|
"pretitle",
|
|
@@ -235,63 +242,63 @@ const fe = (_param)=>{
|
|
|
235
242
|
"aria-label",
|
|
236
243
|
"onClose"
|
|
237
244
|
]);
|
|
238
|
-
const E = !!f.href || !!f.onPress || !!f.to,
|
|
239
|
-
button:
|
|
240
|
-
footerImage:
|
|
245
|
+
const E = !!f.href || !!f.onPress || !!f.to, V = {
|
|
246
|
+
button: b,
|
|
247
|
+
footerImage: A,
|
|
241
248
|
footerText: B,
|
|
242
249
|
footerTextLinesMax: z,
|
|
243
|
-
buttonLink:
|
|
244
|
-
},
|
|
250
|
+
buttonLink: R
|
|
251
|
+
}, D = !!b || !!A || !!B || !!R, I = !!(s != null && s.length), W = ((g == null ? void 0 : g.length) || 0) + (w ? 1 : 0), G = {
|
|
245
252
|
marginRight: -16,
|
|
246
253
|
marginTop: -24,
|
|
247
|
-
width:
|
|
254
|
+
width: pe * W
|
|
248
255
|
};
|
|
249
256
|
return /* @__PURE__ */ e("section", _object_spread_props(_object_spread({
|
|
250
257
|
className: C({
|
|
251
258
|
position: "relative",
|
|
252
259
|
height: "100%"
|
|
253
260
|
})
|
|
254
|
-
},
|
|
261
|
+
}, ge(H, "AdvancedDataCard")), {
|
|
255
262
|
ref: _,
|
|
256
|
-
"aria-label":
|
|
257
|
-
children: /* @__PURE__ */
|
|
263
|
+
"aria-label": S,
|
|
264
|
+
children: /* @__PURE__ */ t(U, {
|
|
258
265
|
className: X,
|
|
259
266
|
children: [
|
|
260
|
-
/* @__PURE__ */
|
|
267
|
+
/* @__PURE__ */ t("div", {
|
|
261
268
|
className: Y,
|
|
262
269
|
children: [
|
|
263
270
|
E && /* @__PURE__ */ e("div", {
|
|
264
271
|
className: Z
|
|
265
272
|
}),
|
|
266
273
|
/* @__PURE__ */ e("div", {
|
|
267
|
-
className:
|
|
274
|
+
className: h(q, !D && !I ? J : ""),
|
|
268
275
|
children: /* @__PURE__ */ e(N, {
|
|
269
276
|
paddingTop: 8,
|
|
270
|
-
children: /* @__PURE__ */
|
|
277
|
+
children: /* @__PURE__ */ t(fe, {
|
|
271
278
|
space: 0,
|
|
272
279
|
children: [
|
|
273
|
-
/* @__PURE__ */
|
|
280
|
+
/* @__PURE__ */ t(j, {
|
|
274
281
|
space: 8,
|
|
275
282
|
children: [
|
|
276
283
|
a,
|
|
277
|
-
/* @__PURE__ */ e(
|
|
284
|
+
/* @__PURE__ */ e(ye, _object_spread({
|
|
278
285
|
headline: i,
|
|
279
|
-
pretitle:
|
|
286
|
+
pretitle: n,
|
|
280
287
|
pretitleAs: p,
|
|
281
288
|
pretitleLinesMax: d,
|
|
282
|
-
title:
|
|
283
|
-
titleAs:
|
|
284
|
-
titleLinesMax:
|
|
289
|
+
title: l,
|
|
290
|
+
titleAs: c,
|
|
291
|
+
titleLinesMax: m,
|
|
285
292
|
subtitle: o,
|
|
286
|
-
subtitleLinesMax:
|
|
293
|
+
subtitleLinesMax: r,
|
|
287
294
|
description: u,
|
|
288
295
|
descriptionLinesMax: x,
|
|
289
|
-
ariaLabel:
|
|
296
|
+
ariaLabel: S
|
|
290
297
|
}, f))
|
|
291
298
|
]
|
|
292
299
|
}),
|
|
293
300
|
!a && /* @__PURE__ */ e("div", {
|
|
294
|
-
style:
|
|
301
|
+
style: G
|
|
295
302
|
})
|
|
296
303
|
]
|
|
297
304
|
})
|
|
@@ -302,19 +309,19 @@ const fe = (_param)=>{
|
|
|
302
309
|
flexGrow: 1
|
|
303
310
|
}
|
|
304
311
|
}),
|
|
305
|
-
|
|
312
|
+
I && /* @__PURE__ */ e(N, {
|
|
306
313
|
paddingTop: 16,
|
|
307
314
|
paddingBottom: 24,
|
|
308
315
|
width: "100%",
|
|
309
316
|
className: K,
|
|
310
|
-
children:
|
|
317
|
+
children: s.map((L, F)=>/* @__PURE__ */ t("div", {
|
|
311
318
|
children: [
|
|
312
319
|
/* @__PURE__ */ e("div", {
|
|
313
320
|
className: Q,
|
|
314
|
-
children:
|
|
321
|
+
children: L
|
|
315
322
|
}),
|
|
316
|
-
F + 1 !==
|
|
317
|
-
paddingY:
|
|
323
|
+
F + 1 !== s.length && /* @__PURE__ */ e(N, {
|
|
324
|
+
paddingY: T,
|
|
318
325
|
children: /* @__PURE__ */ e(k, {})
|
|
319
326
|
})
|
|
320
327
|
]
|
|
@@ -322,14 +329,14 @@ const fe = (_param)=>{
|
|
|
322
329
|
}),
|
|
323
330
|
/* @__PURE__ */ e(he, {
|
|
324
331
|
actions: g,
|
|
325
|
-
onClose:
|
|
332
|
+
onClose: w,
|
|
326
333
|
padding: 7
|
|
327
334
|
})
|
|
328
335
|
]
|
|
329
336
|
}),
|
|
330
|
-
|
|
337
|
+
D && /* @__PURE__ */ e(Ne, _object_spread({}, V))
|
|
331
338
|
]
|
|
332
339
|
})
|
|
333
340
|
}));
|
|
334
|
-
}),
|
|
335
|
-
export {
|
|
341
|
+
}), _e = xe;
|
|
342
|
+
export { xe as AdvancedDataCard, _e as default };
|
|
@@ -1,94 +1,101 @@
|
|
|
1
|
-
import { jsx as r, jsxs as
|
|
2
|
-
import
|
|
1
|
+
import { jsx as r, jsxs as c } from "react/jsx-runtime";
|
|
2
|
+
import g from "../stack.js";
|
|
3
3
|
import { column as x, rightContent as y } from "./blocks.css-mistica.js";
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
4
|
+
import { vars as f } from "../image.css-mistica.js";
|
|
5
|
+
import { Text2 as n, Text5 as v, Text8 as m, Text3 as S } from "../text.js";
|
|
6
|
+
import { vars as o } from "../skins/skin-contract.css-mistica.js";
|
|
6
7
|
import s from "../inline.js";
|
|
7
8
|
import u from "../box.js";
|
|
8
|
-
import { ProgressBar as
|
|
9
|
-
import
|
|
10
|
-
|
|
11
|
-
|
|
9
|
+
import { ProgressBar as B } from "../progress-bar.js";
|
|
10
|
+
import I from "classnames";
|
|
11
|
+
import { applyCssVars as k } from "../utils/css.js";
|
|
12
|
+
const p = (param)=>{
|
|
13
|
+
let { title: a, description: e } = param;
|
|
12
14
|
const l = typeof e == "string" ? [
|
|
13
15
|
e
|
|
14
16
|
] : e;
|
|
15
|
-
return /* @__PURE__ */
|
|
17
|
+
return /* @__PURE__ */ c("div", {
|
|
16
18
|
className: x,
|
|
17
19
|
children: [
|
|
18
|
-
/* @__PURE__ */ r(
|
|
20
|
+
/* @__PURE__ */ r(S, {
|
|
19
21
|
regular: !0,
|
|
20
|
-
color:
|
|
21
|
-
children:
|
|
22
|
+
color: o.colors.textPrimary,
|
|
23
|
+
children: a
|
|
22
24
|
}),
|
|
23
25
|
l && l.map((t, i)=>/* @__PURE__ */ r(n, {
|
|
24
26
|
regular: !0,
|
|
25
|
-
color:
|
|
27
|
+
color: o.colors.textSecondary,
|
|
26
28
|
as: "p",
|
|
27
29
|
children: t
|
|
28
30
|
}, i))
|
|
29
31
|
]
|
|
30
32
|
});
|
|
31
|
-
},
|
|
32
|
-
let { title:
|
|
33
|
+
}, z = (param)=>/* @__PURE__ */ {
|
|
34
|
+
let { title: a, stackingGroup: e, description: l, "aria-label": t } = param;
|
|
33
35
|
return r("div", {
|
|
34
36
|
"aria-label": t,
|
|
35
|
-
children: /* @__PURE__ */
|
|
37
|
+
children: /* @__PURE__ */ c(s, {
|
|
36
38
|
space: "between",
|
|
37
39
|
alignItems: "center",
|
|
38
40
|
children: [
|
|
39
|
-
|
|
41
|
+
a && /* @__PURE__ */ r(u, {
|
|
40
42
|
paddingRight: 32,
|
|
41
43
|
children: /* @__PURE__ */ r(n, {
|
|
42
44
|
regular: !0,
|
|
43
|
-
children:
|
|
45
|
+
children: a
|
|
44
46
|
})
|
|
45
47
|
}),
|
|
46
48
|
e || /* @__PURE__ */ r(n, {
|
|
47
49
|
regular: !0,
|
|
48
|
-
color:
|
|
50
|
+
color: o.colors.textSecondary,
|
|
49
51
|
children: l
|
|
50
52
|
})
|
|
51
53
|
]
|
|
52
54
|
})
|
|
53
55
|
});
|
|
54
|
-
},
|
|
55
|
-
let { image:
|
|
56
|
+
}, A = (param)=>/* @__PURE__ */ {
|
|
57
|
+
let { image: a, description: e, "aria-label": l } = param;
|
|
56
58
|
return r("div", {
|
|
57
59
|
"aria-label": l,
|
|
58
|
-
children: /* @__PURE__ */
|
|
60
|
+
children: /* @__PURE__ */ c(s, {
|
|
59
61
|
space: 16,
|
|
60
62
|
alignItems: "center",
|
|
61
63
|
children: [
|
|
62
|
-
|
|
64
|
+
/* @__PURE__ */ r("div", {
|
|
65
|
+
style: k({
|
|
66
|
+
[f.mediaBorderRadius]: o.borderRadii.mediaSmall
|
|
67
|
+
}),
|
|
68
|
+
children: a
|
|
69
|
+
}),
|
|
63
70
|
/* @__PURE__ */ r(n, {
|
|
64
71
|
regular: !0,
|
|
65
|
-
color:
|
|
72
|
+
color: o.colors.textSecondary,
|
|
66
73
|
children: e
|
|
67
74
|
})
|
|
68
75
|
]
|
|
69
76
|
})
|
|
70
77
|
});
|
|
71
|
-
},
|
|
72
|
-
let { title:
|
|
73
|
-
return
|
|
78
|
+
}, D = (param)=>/* @__PURE__ */ {
|
|
79
|
+
let { title: a, description: e, secondaryValue: l, value: t, valueColor: i = o.colors.textPrimary, "aria-label": d } = param;
|
|
80
|
+
return c(s, {
|
|
74
81
|
space: "between",
|
|
75
82
|
alignItems: "flex-end",
|
|
76
83
|
"aria-label": d,
|
|
77
84
|
children: [
|
|
78
|
-
/* @__PURE__ */ r(
|
|
79
|
-
title:
|
|
85
|
+
/* @__PURE__ */ r(p, {
|
|
86
|
+
title: a,
|
|
80
87
|
description: e
|
|
81
88
|
}),
|
|
82
|
-
/* @__PURE__ */
|
|
83
|
-
className:
|
|
89
|
+
/* @__PURE__ */ c("div", {
|
|
90
|
+
className: I(x, y),
|
|
84
91
|
children: [
|
|
85
92
|
/* @__PURE__ */ r(n, {
|
|
86
93
|
regular: !0,
|
|
87
|
-
color:
|
|
94
|
+
color: o.colors.textSecondary,
|
|
88
95
|
decoration: "line-through",
|
|
89
96
|
children: l
|
|
90
97
|
}),
|
|
91
|
-
/* @__PURE__ */ r(
|
|
98
|
+
/* @__PURE__ */ r(v, {
|
|
92
99
|
color: i,
|
|
93
100
|
children: t
|
|
94
101
|
})
|
|
@@ -96,91 +103,91 @@ const g = (param)=>{
|
|
|
96
103
|
})
|
|
97
104
|
]
|
|
98
105
|
});
|
|
99
|
-
},
|
|
100
|
-
let { headline:
|
|
101
|
-
return
|
|
106
|
+
}, E = (param)=>/* @__PURE__ */ {
|
|
107
|
+
let { headline: a, mainHeading: e, secondHeading: l, secondaryValue: t, title: i, description: d, valueColor: h = o.colors.textPrimary, "aria-label": b } = param;
|
|
108
|
+
return c("div", {
|
|
102
109
|
"aria-label": b,
|
|
103
110
|
children: [
|
|
104
|
-
|
|
111
|
+
a && /* @__PURE__ */ r(u, {
|
|
105
112
|
paddingBottom: 24,
|
|
106
|
-
children:
|
|
113
|
+
children: a
|
|
107
114
|
}),
|
|
108
|
-
/* @__PURE__ */
|
|
115
|
+
/* @__PURE__ */ c(g, {
|
|
109
116
|
space: 2,
|
|
110
117
|
children: [
|
|
111
|
-
/* @__PURE__ */
|
|
118
|
+
/* @__PURE__ */ c(s, {
|
|
112
119
|
space: 8,
|
|
113
120
|
alignItems: "baseline",
|
|
114
121
|
children: [
|
|
115
|
-
/* @__PURE__ */ r(
|
|
116
|
-
color:
|
|
122
|
+
/* @__PURE__ */ r(m, {
|
|
123
|
+
color: h,
|
|
117
124
|
children: e.value
|
|
118
125
|
}),
|
|
119
126
|
/* @__PURE__ */ r(n, {
|
|
120
127
|
regular: !0,
|
|
121
|
-
color:
|
|
128
|
+
color: o.colors.textSecondary,
|
|
122
129
|
children: e.text
|
|
123
130
|
})
|
|
124
131
|
]
|
|
125
132
|
}),
|
|
126
|
-
l && /* @__PURE__ */
|
|
133
|
+
l && /* @__PURE__ */ c(s, {
|
|
127
134
|
space: 8,
|
|
128
135
|
alignItems: "baseline",
|
|
129
136
|
children: [
|
|
130
|
-
/* @__PURE__ */ r(
|
|
131
|
-
color:
|
|
137
|
+
/* @__PURE__ */ r(m, {
|
|
138
|
+
color: h,
|
|
132
139
|
children: l.value
|
|
133
140
|
}),
|
|
134
141
|
/* @__PURE__ */ r(n, {
|
|
135
142
|
regular: !0,
|
|
136
|
-
color:
|
|
143
|
+
color: o.colors.textSecondary,
|
|
137
144
|
children: l.text
|
|
138
145
|
})
|
|
139
146
|
]
|
|
140
147
|
}),
|
|
141
|
-
t && /* @__PURE__ */ r(
|
|
142
|
-
color:
|
|
148
|
+
t && /* @__PURE__ */ r(m, {
|
|
149
|
+
color: o.colors.textSecondary,
|
|
143
150
|
children: t
|
|
144
151
|
})
|
|
145
152
|
]
|
|
146
153
|
}),
|
|
147
154
|
i || d ? /* @__PURE__ */ r(u, {
|
|
148
155
|
paddingTop: 8,
|
|
149
|
-
children: /* @__PURE__ */ r(
|
|
156
|
+
children: /* @__PURE__ */ r(p, {
|
|
150
157
|
title: i,
|
|
151
158
|
description: d
|
|
152
159
|
})
|
|
153
160
|
}) : null
|
|
154
161
|
]
|
|
155
162
|
});
|
|
156
|
-
},
|
|
157
|
-
let { title:
|
|
158
|
-
return
|
|
163
|
+
}, F = (param)=>/* @__PURE__ */ {
|
|
164
|
+
let { title: a, value: e, description: l, valueColor: t = o.colors.textPrimary, "aria-label": i } = param;
|
|
165
|
+
return c("div", {
|
|
159
166
|
"aria-label": i,
|
|
160
167
|
className: x,
|
|
161
168
|
children: [
|
|
162
169
|
/* @__PURE__ */ r(n, {
|
|
163
170
|
regular: !0,
|
|
164
|
-
color:
|
|
165
|
-
children:
|
|
171
|
+
color: o.colors.textPrimary,
|
|
172
|
+
children: a
|
|
166
173
|
}),
|
|
167
|
-
/* @__PURE__ */ r(
|
|
174
|
+
/* @__PURE__ */ r(m, {
|
|
168
175
|
color: t,
|
|
169
176
|
children: e
|
|
170
177
|
}),
|
|
171
|
-
/* @__PURE__ */ r(
|
|
178
|
+
/* @__PURE__ */ r(p, {
|
|
172
179
|
description: l
|
|
173
180
|
})
|
|
174
181
|
]
|
|
175
182
|
});
|
|
176
|
-
},
|
|
177
|
-
let { title:
|
|
183
|
+
}, J = (param)=>/* @__PURE__ */ {
|
|
184
|
+
let { title: a, stackingGroup: e, progressPercent: l, reverse: t, heading: i, description: d, "aria-label": h } = param;
|
|
178
185
|
return r("div", {
|
|
179
|
-
"aria-label":
|
|
180
|
-
children: /* @__PURE__ */
|
|
186
|
+
"aria-label": h,
|
|
187
|
+
children: /* @__PURE__ */ c(g, {
|
|
181
188
|
space: 8,
|
|
182
189
|
children: [
|
|
183
|
-
/* @__PURE__ */
|
|
190
|
+
/* @__PURE__ */ c(s, {
|
|
184
191
|
space: "between",
|
|
185
192
|
alignItems: "flex-end",
|
|
186
193
|
children: [
|
|
@@ -188,38 +195,38 @@ const g = (param)=>{
|
|
|
188
195
|
paddingRight: 32,
|
|
189
196
|
children: /* @__PURE__ */ r(n, {
|
|
190
197
|
regular: !0,
|
|
191
|
-
children:
|
|
198
|
+
children: a
|
|
192
199
|
})
|
|
193
200
|
}),
|
|
194
201
|
e
|
|
195
202
|
]
|
|
196
203
|
}),
|
|
197
|
-
l !== void 0 && /* @__PURE__ */ r(
|
|
204
|
+
l !== void 0 && /* @__PURE__ */ r(B, {
|
|
198
205
|
progressPercent: l,
|
|
199
206
|
reverse: t
|
|
200
207
|
}),
|
|
201
|
-
/* @__PURE__ */
|
|
208
|
+
/* @__PURE__ */ c(s, {
|
|
202
209
|
space: 8,
|
|
203
210
|
alignItems: "baseline",
|
|
204
211
|
children: [
|
|
205
|
-
/* @__PURE__ */ r(
|
|
206
|
-
color: i.valueColor ||
|
|
212
|
+
/* @__PURE__ */ r(m, {
|
|
213
|
+
color: i.valueColor || o.colors.textPrimary,
|
|
207
214
|
children: i.value
|
|
208
215
|
}),
|
|
209
216
|
/* @__PURE__ */ r(n, {
|
|
210
217
|
regular: !0,
|
|
211
|
-
color:
|
|
218
|
+
color: o.colors.textSecondary,
|
|
212
219
|
children: i.text
|
|
213
220
|
})
|
|
214
221
|
]
|
|
215
222
|
}),
|
|
216
223
|
d && /* @__PURE__ */ r(n, {
|
|
217
224
|
regular: !0,
|
|
218
|
-
color:
|
|
225
|
+
color: o.colors.textSecondary,
|
|
219
226
|
children: d
|
|
220
227
|
})
|
|
221
228
|
]
|
|
222
229
|
})
|
|
223
230
|
});
|
|
224
231
|
};
|
|
225
|
-
export {
|
|
232
|
+
export { E as HighlightedValueBlock, D as InformationBlock, J as ProgressBlock, z as RowBlock, A as SimpleBlock, F as ValueBlock };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import "./sprinkles.css.ts.vanilla.css-mistica.js";
|
|
2
2
|
import "./counter.css.ts.vanilla.css-mistica.js";
|
|
3
|
-
var s = "rijsns8 _1y2v1nf62 _1y2v1nfds _1y2v1nfb5 _1y2v1nfc8 _1y2v1nfco", v = "rijsnse _1y2v1nfc7 _1y2v1nfcn _1y2v1nfb5 _1y2v1nfdz _1y2v1nf5o", a = "rijsns6", t = "rijsns3 _1y2v1nfdz _1y2v1nf33 _1y2v1nfbb
|
|
3
|
+
var s = "rijsns8 _1y2v1nf62 _1y2v1nfds _1y2v1nfb5 _1y2v1nfc8 _1y2v1nfco", v = "rijsnse _1y2v1nfc7 _1y2v1nfcn _1y2v1nfb5 _1y2v1nfdz _1y2v1nf5o", a = "rijsns6", t = "rijsns3 _1y2v1nfdz _1y2v1nf33 _1y2v1nfbb _1y2v1nfeb", f = "rijsnsc rijsnsa _1y2v1nfb5", o = "rijsnsa _1y2v1nfb5", y = "rijsns4", _ = "rijsns0", i = "rijsns1", b = "rijsnsb rijsnsa _1y2v1nfb5", e = "_1y2v1nfb4 _1y2v1nfba _1y2v1nfbj";
|
|
4
4
|
export { s as button, v as buttonBackground, a as buttonContainer, t as counter, f as decreaseButtonIcon, o as defaultButtonIcon, y as disabled, _ as hasTrashIcon, i as isButtonDisabled, b as trashButtonIcon, e as valueContainer };
|
package/dist-es/cvv-field.js
CHANGED
|
@@ -187,7 +187,6 @@ const O = (param)=>{
|
|
|
187
187
|
children: /* @__PURE__ */ r(O, {
|
|
188
188
|
acceptedCards: y
|
|
189
189
|
}),
|
|
190
|
-
targetLabel: l.formCreditCardCvvTooltipVisaMcButton,
|
|
191
190
|
target: /* @__PURE__ */ r("div", {
|
|
192
191
|
style: {
|
|
193
192
|
width: 16,
|
|
@@ -204,6 +203,7 @@ const O = (param)=>{
|
|
|
204
203
|
// (40 - 16) / 2
|
|
205
204
|
top: -12
|
|
206
205
|
},
|
|
206
|
+
"aria-label": l.formCreditCardCvvTooltipVisaMcButton,
|
|
207
207
|
children: /* @__PURE__ */ r(N, {
|
|
208
208
|
size: 16,
|
|
209
209
|
color: K.colors.neutralMedium
|