@telefonica/mistica 16.1.0 → 16.2.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.
Files changed (148) hide show
  1. package/css/mistica.css +1 -1
  2. package/dist/accordion.css-mistica.js +12 -9
  3. package/dist/accordion.css.d.ts +1 -0
  4. package/dist/accordion.js +36 -39
  5. package/dist/align.css-mistica.js +12 -0
  6. package/dist/align.css.d.ts +1 -0
  7. package/dist/align.css.ts.vanilla.css-mistica.js +11 -0
  8. package/dist/align.d.ts +12 -0
  9. package/dist/align.js +79 -0
  10. package/dist/box.css-mistica.js +41 -0
  11. package/dist/box.css.d.ts +23 -0
  12. package/dist/box.css.ts.vanilla.css-mistica.js +11 -0
  13. package/dist/box.d.ts +4 -0
  14. package/dist/box.js +39 -31
  15. package/dist/boxed.css-mistica.js +10 -5
  16. package/dist/boxed.css.d.ts +3 -0
  17. package/dist/boxed.js +20 -24
  18. package/dist/callout.css-mistica.js +12 -4
  19. package/dist/callout.css.d.ts +1 -0
  20. package/dist/callout.js +14 -22
  21. package/dist/card.css-mistica.js +26 -23
  22. package/dist/card.css.d.ts +1 -0
  23. package/dist/card.js +17 -23
  24. package/dist/community/advanced-data-card.css-mistica.js +32 -23
  25. package/dist/community/advanced-data-card.css.d.ts +3 -0
  26. package/dist/community/advanced-data-card.js +46 -55
  27. package/dist/empty-state.css-mistica.js +11 -8
  28. package/dist/empty-state.css.d.ts +1 -0
  29. package/dist/empty-state.js +10 -13
  30. package/dist/form.css-mistica.js +12 -0
  31. package/dist/form.css.d.ts +1 -0
  32. package/dist/form.js +8 -10
  33. package/dist/grid.css-mistica.js +143 -126
  34. package/dist/grid.css.d.ts +13 -0
  35. package/dist/grid.js +35 -38
  36. package/dist/hero.css-mistica.js +14 -8
  37. package/dist/hero.css.d.ts +2 -0
  38. package/dist/hero.js +17 -25
  39. package/dist/image.js +23 -25
  40. package/dist/index.d.ts +1 -0
  41. package/dist/index.js +4 -0
  42. package/dist/inline.js +10 -11
  43. package/dist/list.css-mistica.js +12 -9
  44. package/dist/list.css.d.ts +1 -0
  45. package/dist/list.js +43 -46
  46. package/dist/loading-screen.js +16 -16
  47. package/dist/logo-blau.d.ts +1 -1
  48. package/dist/logo-blau.js +10 -10
  49. package/dist/logo-common.d.ts +1 -0
  50. package/dist/logo-movistar.d.ts +1 -1
  51. package/dist/logo-movistar.js +4 -4
  52. package/dist/logo-o2-new.d.ts +1 -1
  53. package/dist/logo-o2-new.js +5 -5
  54. package/dist/logo-o2.d.ts +1 -1
  55. package/dist/logo-o2.js +5 -5
  56. package/dist/logo-telefonica.d.ts +1 -1
  57. package/dist/logo-telefonica.js +4 -4
  58. package/dist/logo-tu.d.ts +1 -1
  59. package/dist/logo-tu.js +5 -5
  60. package/dist/logo-vivo.d.ts +1 -1
  61. package/dist/logo-vivo.js +7 -7
  62. package/dist/logo.d.ts +9 -8
  63. package/dist/logo.js +125 -102
  64. package/dist/navigation-bar.css-mistica.js +23 -20
  65. package/dist/navigation-bar.css.d.ts +1 -0
  66. package/dist/navigation-bar.js +30 -37
  67. package/dist/package-version.js +1 -1
  68. package/dist/phone-number-field.d.ts +1 -4
  69. package/dist/phone-number-field.js +52 -82
  70. package/dist/popover.d.ts +1 -0
  71. package/dist/popover.js +9 -10
  72. package/dist/sheet-common.css-mistica.js +5 -5
  73. package/dist/skeleton-base.js +10 -12
  74. package/dist/skeletons.css-mistica.js +11 -5
  75. package/dist/skeletons.css.d.ts +1 -0
  76. package/dist/snackbar.css-mistica.js +20 -14
  77. package/dist/snackbar.css.d.ts +3 -1
  78. package/dist/snackbar.js +65 -75
  79. package/dist/tag.css-mistica.js +15 -4
  80. package/dist/tag.css.d.ts +2 -0
  81. package/dist/tag.js +20 -24
  82. package/dist/text-field-base.d.ts +1 -1
  83. package/dist/text-field-components.css-mistica.js +16 -10
  84. package/dist/text-field-components.css.d.ts +1 -0
  85. package/dist/text-field-components.js +32 -35
  86. package/dist/timer.js +42 -43
  87. package/dist/tooltip.d.ts +3 -1
  88. package/dist/tooltip.js +106 -106
  89. package/dist/touchable.js +47 -42
  90. package/dist-es/accordion.css-mistica.js +3 -3
  91. package/dist-es/accordion.js +58 -61
  92. package/dist-es/align.css-mistica.js +3 -0
  93. package/dist-es/align.css.ts.vanilla.css-mistica.js +2 -0
  94. package/dist-es/align.js +70 -0
  95. package/dist-es/box.css-mistica.js +24 -0
  96. package/dist-es/box.css.ts.vanilla.css-mistica.js +2 -0
  97. package/dist-es/box.js +43 -35
  98. package/dist-es/boxed.css-mistica.js +5 -3
  99. package/dist-es/boxed.js +28 -32
  100. package/dist-es/callout.css-mistica.js +7 -2
  101. package/dist-es/callout.js +44 -52
  102. package/dist-es/card.css-mistica.js +4 -4
  103. package/dist-es/card.js +11 -17
  104. package/dist-es/community/advanced-data-card.css-mistica.js +7 -7
  105. package/dist-es/community/advanced-data-card.js +90 -99
  106. package/dist-es/empty-state.css-mistica.js +3 -3
  107. package/dist-es/empty-state.js +19 -22
  108. package/dist-es/form.css-mistica.js +3 -0
  109. package/dist-es/form.js +12 -14
  110. package/dist-es/grid.css-mistica.js +123 -112
  111. package/dist-es/grid.js +38 -41
  112. package/dist-es/hero.css-mistica.js +2 -2
  113. package/dist-es/hero.js +36 -44
  114. package/dist-es/image.js +28 -30
  115. package/dist-es/index.js +1844 -1843
  116. package/dist-es/inline.js +19 -20
  117. package/dist-es/list.css-mistica.js +2 -2
  118. package/dist-es/list.js +75 -78
  119. package/dist-es/loading-screen.js +30 -30
  120. package/dist-es/logo-blau.js +11 -11
  121. package/dist-es/logo-movistar.js +5 -5
  122. package/dist-es/logo-o2-new.js +8 -8
  123. package/dist-es/logo-o2.js +8 -8
  124. package/dist-es/logo-telefonica.js +4 -4
  125. package/dist-es/logo-tu.js +8 -8
  126. package/dist-es/logo-vivo.js +16 -16
  127. package/dist-es/logo.js +132 -109
  128. package/dist-es/navigation-bar.css-mistica.js +11 -11
  129. package/dist-es/navigation-bar.js +80 -87
  130. package/dist-es/package-version.js +1 -1
  131. package/dist-es/phone-number-field.js +59 -89
  132. package/dist-es/popover.js +17 -18
  133. package/dist-es/sheet-common.css-mistica.js +2 -2
  134. package/dist-es/skeleton-base.js +15 -17
  135. package/dist-es/skeletons.css-mistica.js +5 -2
  136. package/dist-es/snackbar.css-mistica.js +4 -4
  137. package/dist-es/snackbar.js +93 -103
  138. package/dist-es/style.css +1 -1
  139. package/dist-es/tag.css-mistica.js +2 -2
  140. package/dist-es/tag.js +34 -38
  141. package/dist-es/text-field-components.css-mistica.js +5 -2
  142. package/dist-es/text-field-components.js +48 -51
  143. package/dist-es/timer.js +80 -81
  144. package/dist-es/tooltip.js +148 -148
  145. package/dist-es/touchable.js +55 -50
  146. package/package.json +1 -1
  147. package/dist/sprinkles.css-mistica.js +0 -2494
  148. package/dist-es/sprinkles.css-mistica.js +0 -2485
package/dist/timer.js CHANGED
@@ -11,16 +11,15 @@ function _export(target, all) {
11
11
  }
12
12
  _export(exports, {
13
13
  TextTimer: function() {
14
- return Oe;
14
+ return Re;
15
15
  },
16
16
  Timer: function() {
17
- return Ee;
17
+ return _e;
18
18
  }
19
19
  });
20
20
  const _jsxruntime = require("react/jsx-runtime");
21
21
  const _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
22
22
  const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
23
- const _box = /*#__PURE__*/ _interop_require_default(require("./box.js"));
24
23
  const _hooks = require("./hooks.js");
25
24
  const _inline = /*#__PURE__*/ _interop_require_default(require("./inline.js"));
26
25
  const _screenreaderonly = /*#__PURE__*/ _interop_require_default(require("./screen-reader-only.js"));
@@ -129,7 +128,7 @@ function _object_spread_props(target, source) {
129
128
  }
130
129
  return target;
131
130
  }
132
- const $ = 24, V = 60, X = 60, C = 1e3, Z = X * C, P = V * Z, Se = $ * P, H = (s, a, o, i)=>{
131
+ const $ = 24, V = 60, X = 60, C = 1e3, Z = X * C, P = V * Z, ge = $ * P, H = (s, a, o, i)=>{
133
132
  a = i === "none" && a === "days" ? "hours" : a, o = i === "none" && o === "days" ? "hours" : o;
134
133
  const c = [
135
134
  "seconds",
@@ -168,20 +167,20 @@ const $ = 24, V = 60, X = 60, C = 1e3, Z = X * C, P = V * Z, Se = $ * P, H = (s,
168
167
  }, [
169
168
  s
170
169
  ]);
171
- const e = H("days", o, i, a), t = H("hours", o, i, a), p = H("minutes", o, i, a), l = e ? "days" : t ? "hours" : p ? "minutes" : "seconds", g = Math.floor(L / P) % 24, M = Math.floor(L / Z) % 60, D = Math.floor(L / C) % 60, h = Math.floor(L / Se), S = l === "hours" ? g + h * $ : g, f = l === "minutes" ? M + V * (h * $ + S) : M, r = l === "seconds" ? D + X * (h * $ * V + S * V + f) : D, [n, d] = _react.useState(W({
170
+ const e = H("days", o, i, a), t = H("hours", o, i, a), p = H("minutes", o, i, a), l = e ? "days" : t ? "hours" : p ? "minutes" : "seconds", g = Math.floor(L / P) % 24, M = Math.floor(L / Z) % 60, D = Math.floor(L / C) % 60, h = Math.floor(L / ge), S = l === "hours" ? g + h * $ : g, y = l === "minutes" ? M + V * (h * $ + S) : M, n = l === "seconds" ? D + X * (h * $ * V + S * V + y) : D, [r, d] = _react.useState(W({
172
171
  days: h,
173
172
  hours: S,
174
- minutes: f,
175
- seconds: r
173
+ minutes: y,
174
+ seconds: n
176
175
  }, o, i, a));
177
176
  return _react.useEffect(()=>{
178
177
  const u = W({
179
178
  days: h,
180
179
  hours: S,
181
- minutes: f,
182
- seconds: r
180
+ minutes: y,
181
+ seconds: n
183
182
  }, o, i, a);
184
- if (!(0, _helpers.isEqual)(u, n)) {
183
+ if (!(0, _helpers.isEqual)(u, r)) {
185
184
  d(u);
186
185
  const N = {};
187
186
  u.forEach((I)=>N[I.unit] = I.value), c == null || c(N);
@@ -189,15 +188,15 @@ const $ = 24, V = 60, X = 60, C = 1e3, Z = X * C, P = V * Z, Se = $ * P, H = (s,
189
188
  }, [
190
189
  h,
191
190
  S,
192
- f,
193
- r,
191
+ y,
192
+ n,
194
193
  a,
195
194
  o,
196
195
  i,
197
- n,
196
+ r,
198
197
  c
199
- ]), n;
200
- }, Oe = (param)=>{
198
+ ]), r;
199
+ }, Re = (param)=>{
201
200
  let { endTimestamp: s, labelType: a = "none", minTimeUnit: o, maxTimeUnit: i, onProgress: c, dataAttributes: L, "aria-label": b } = param;
202
201
  const { texts: e, t } = (0, _hooks.useTheme)(), p = _react.useId(), l = U({
203
202
  endTimestamp: s,
@@ -220,50 +219,50 @@ const $ = 24, V = 60, X = 60, C = 1e3, Z = X * C, P = V * Z, Se = $ * P, H = (s,
220
219
  hours: e.timerHoursLongLabel || t(_texttokens.timerHoursLongLabel),
221
220
  minutes: e.timerMinutesLongLabel || t(_texttokens.timerMinutesLongLabel),
222
221
  seconds: e.timerSecondsLongLabel || t(_texttokens.timerSecondsLongLabel)
223
- }, h = (r)=>{
224
- const n = Math.max(String(r).length, a === "long" ? 1 : 2);
222
+ }, h = (n)=>{
223
+ const r = Math.max(String(n).length, a === "long" ? 1 : 2);
225
224
  return /* @__PURE__ */ (0, _jsxruntime.jsx)("span", {
226
225
  className: _timercssmistica.unitContainer,
227
226
  style: {
228
- minWidth: `${n}ch`
227
+ minWidth: `${r}ch`
229
228
  },
230
- children: String(r).padStart(n, "0")
229
+ children: String(n).padStart(r, "0")
231
230
  });
232
231
  }, S = ()=>{
233
232
  switch(a){
234
233
  case "none":
235
- return l.map((r, n)=>/* @__PURE__ */ (0, _jsxruntime.jsxs)(_react.Fragment, {
234
+ return l.map((n, r)=>/* @__PURE__ */ (0, _jsxruntime.jsxs)(_react.Fragment, {
236
235
  children: [
237
- n > 0 && ":",
238
- h(r.value)
236
+ r > 0 && ":",
237
+ h(n.value)
239
238
  ]
240
- }, n));
239
+ }, r));
241
240
  case "short":
242
- return l.map((r, n)=>/* @__PURE__ */ (0, _jsxruntime.jsxs)(_react.Fragment, {
241
+ return l.map((n, r)=>/* @__PURE__ */ (0, _jsxruntime.jsxs)(_react.Fragment, {
243
242
  children: [
244
- n > 0 && " ",
243
+ r > 0 && " ",
245
244
  /* @__PURE__ */ (0, _jsxruntime.jsxs)("span", {
246
245
  className: _timercssmistica.shortLabelText,
247
246
  children: [
248
- h(r.value),
249
- ` ${g[r.unit]}`
247
+ h(n.value),
248
+ ` ${g[n.unit]}`
250
249
  ]
251
250
  })
252
251
  ]
253
- }, n));
252
+ }, r));
254
253
  case "long":
255
254
  default:
256
- return l.map((r, n)=>/* @__PURE__ */ (0, _jsxruntime.jsxs)(_react.Fragment, {
255
+ return l.map((n, r)=>/* @__PURE__ */ (0, _jsxruntime.jsxs)(_react.Fragment, {
257
256
  children: [
258
- n > 0 && " ",
259
- h(r.value),
260
- ` ${r.value === 1 ? M[r.unit] : D[r.unit]}`,
261
- n === l.length - 2 && ` ${e.timerAnd || t(_texttokens.timerAnd)}`,
262
- n < l.length - 2 && ","
257
+ r > 0 && " ",
258
+ h(n.value),
259
+ ` ${n.value === 1 ? M[n.unit] : D[n.unit]}`,
260
+ r === l.length - 2 && ` ${e.timerAnd || t(_texttokens.timerAnd)}`,
261
+ r < l.length - 2 && ","
263
262
  ]
264
- }, n));
263
+ }, r));
265
264
  }
266
- }, f = l.map((r, n)=>`${r.value} ${r.value === 1 ? M[r.unit] : D[r.unit]}${n === l.length - 1 ? "" : n === l.length - 2 ? ` ${e.timerAnd || t(_texttokens.timerAnd)} ` : ", "}`).join("");
265
+ }, y = l.map((n, r)=>`${n.value} ${n.value === 1 ? M[n.unit] : D[n.unit]}${r === l.length - 1 ? "" : r === l.length - 2 ? ` ${e.timerAnd || t(_texttokens.timerAnd)} ` : ", "}`).join("");
267
266
  return /* @__PURE__ */ (0, _jsxruntime.jsxs)("span", _object_spread_props(_object_spread({
268
267
  role: "timer",
269
268
  "aria-labelledby": p,
@@ -277,7 +276,7 @@ const $ = 24, V = 60, X = 60, C = 1e3, Z = X * C, P = V * Z, Se = $ * P, H = (s,
277
276
  /* @__PURE__ */ (0, _jsxruntime.jsx)(_screenreaderonly.default, {
278
277
  children: /* @__PURE__ */ (0, _jsxruntime.jsx)("span", {
279
278
  id: p,
280
- children: b ? `${b}. ${f}` : f
279
+ children: b ? `${b}. ${y}` : y
281
280
  })
282
281
  }),
283
282
  /* @__PURE__ */ (0, _jsxruntime.jsx)("span", {
@@ -287,7 +286,7 @@ const $ = 24, V = 60, X = 60, C = 1e3, Z = X * C, P = V * Z, Se = $ * P, H = (s,
287
286
  })
288
287
  ]
289
288
  }));
290
- }, Ee = (param)=>{
289
+ }, _e = (param)=>{
291
290
  let { boxed: s, endTimestamp: a, minTimeUnit: o, maxTimeUnit: i, onProgress: c, dataAttributes: L, "aria-label": b } = param;
292
291
  const { texts: e, t } = (0, _hooks.useTheme)(), p = _react.useId(), l = (0, _themevariantcontext.useThemeVariant)(), g = U({
293
292
  endTimestamp: a,
@@ -314,7 +313,7 @@ const $ = 24, V = 60, X = 60, C = 1e3, Z = X * C, P = V * Z, Se = $ * P, H = (s,
314
313
  hours: e.timerHoursLongLabel || t(_texttokens.timerHoursLongLabel),
315
314
  minutes: e.timerMinutesLongLabel || t(_texttokens.timerMinutesLongLabel),
316
315
  seconds: e.timerSecondsLongLabel || t(_texttokens.timerSecondsLongLabel)
317
- }, f = (d)=>{
316
+ }, y = (d)=>{
318
317
  const u = Math.max(String(d).length, 2);
319
318
  return /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text6, {
320
319
  children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
@@ -325,7 +324,7 @@ const $ = 24, V = 60, X = 60, C = 1e3, Z = X * C, P = V * Z, Se = $ * P, H = (s,
325
324
  children: String(d).padStart(u, "0")
326
325
  })
327
326
  });
328
- }, r = g.map((d, u)=>`${d.value} ${d.value === 1 ? h[d.unit] : S[d.unit]}${u === g.length - 1 ? "" : u === g.length - 2 ? ` ${e.timerAnd || t(_texttokens.timerAnd)} ` : ", "}`).join(""), n = ()=>g.map((d, u)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
327
+ }, n = g.map((d, u)=>`${d.value} ${d.value === 1 ? h[d.unit] : S[d.unit]}${u === g.length - 1 ? "" : u === g.length - 2 ? ` ${e.timerAnd || t(_texttokens.timerAnd)} ` : ", "}`).join(""), r = ()=>g.map((d, u)=>/* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
329
328
  className: (0, _classnames.default)({
330
329
  [_timercssmistica.boxedTimerValueContainer[l]]: s
331
330
  }),
@@ -336,7 +335,7 @@ const $ = 24, V = 60, X = 60, C = 1e3, Z = X * C, P = V * Z, Se = $ * P, H = (s,
336
335
  [_timercssmistica.boxedTimerDisplayValue]: s
337
336
  }),
338
337
  children: [
339
- f(d.value),
338
+ y(d.value),
340
339
  /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
341
340
  regular: !0,
342
341
  children: d.value === 1 ? M[d.unit] : D[d.unit]
@@ -354,7 +353,7 @@ const $ = 24, V = 60, X = 60, C = 1e3, Z = X * C, P = V * Z, Se = $ * P, H = (s,
354
353
  /* @__PURE__ */ (0, _jsxruntime.jsx)(_screenreaderonly.default, {
355
354
  children: /* @__PURE__ */ (0, _jsxruntime.jsx)("span", {
356
355
  id: p,
357
- children: b ? `${b}. ${r}` : r
356
+ children: b ? `${b}. ${n}` : n
358
357
  })
359
358
  }),
360
359
  /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
@@ -362,7 +361,7 @@ const $ = 24, V = 60, X = 60, C = 1e3, Z = X * C, P = V * Z, Se = $ * P, H = (s,
362
361
  children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_inline.default, {
363
362
  space: s ? 8 : 16,
364
363
  wrap: !0,
365
- children: n()
364
+ children: r()
366
365
  })
367
366
  })
368
367
  ]
package/dist/tooltip.d.ts CHANGED
@@ -6,6 +6,7 @@ type Props = {
6
6
  extra?: React.ReactNode;
7
7
  description?: string;
8
8
  target: React.ReactNode;
9
+ targetStyle?: React.CSSProperties;
9
10
  title?: string;
10
11
  position?: Position;
11
12
  width?: number;
@@ -17,6 +18,7 @@ type Props = {
17
18
  type BaseTooltipProps = {
18
19
  content?: React.ReactNode;
19
20
  target: React.ReactNode;
21
+ targetStyle?: React.CSSProperties;
20
22
  position?: Position;
21
23
  width?: number;
22
24
  delay?: boolean;
@@ -28,6 +30,6 @@ type BaseTooltipProps = {
28
30
  closeButtonLabel?: string;
29
31
  trackingEvent?: TrackingEvent | ReadonlyArray<TrackingEvent>;
30
32
  };
31
- export declare const BaseTooltip: ({ content, target, width, position, dataAttributes, delay, centerContent, open, onClose, closeButtonLabel, hasPointerInteractionOnly, trackingEvent, }: BaseTooltipProps) => JSX.Element;
33
+ export declare const BaseTooltip: ({ content, target, targetStyle, width, position, dataAttributes, delay, centerContent, open, onClose, closeButtonLabel, hasPointerInteractionOnly, trackingEvent, }: BaseTooltipProps) => JSX.Element;
32
34
  declare const Tooltip: ({ centerContent, extra, children, dataAttributes, title, description, ...props }: Props) => JSX.Element;
33
35
  export default Tooltip;