@telefonica/mistica 15.4.0 → 15.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.
Files changed (50) hide show
  1. package/css/mistica.css +1 -1
  2. package/dist/card.d.ts +4 -0
  3. package/dist/carousel.js +102 -98
  4. package/dist/chip.d.ts +3 -20
  5. package/dist/chip.js +44 -60
  6. package/dist/community/advanced-data-card.css-mistica.js +13 -16
  7. package/dist/community/advanced-data-card.css.d.ts +0 -1
  8. package/dist/community/advanced-data-card.js +25 -26
  9. package/dist/hero.css-mistica.js +7 -23
  10. package/dist/hero.css.d.ts +0 -3
  11. package/dist/hero.js +85 -73
  12. package/dist/highlighted-card.d.ts +5 -35
  13. package/dist/highlighted-card.js +44 -48
  14. package/dist/icon-button.d.ts +190 -118
  15. package/dist/icon-button.js +87 -112
  16. package/dist/image.js +2 -1
  17. package/dist/list.d.ts +15 -21
  18. package/dist/list.js +188 -183
  19. package/dist/logo.d.ts +4 -23
  20. package/dist/logo.js +42 -67
  21. package/dist/package-version.js +1 -1
  22. package/dist/responsive-layout.css-mistica.js +26 -11
  23. package/dist/responsive-layout.css.d.ts +8 -3
  24. package/dist/responsive-layout.d.ts +5 -0
  25. package/dist/responsive-layout.js +36 -17
  26. package/dist/text-link.d.ts +2 -21
  27. package/dist/text-link.js +16 -15
  28. package/dist/text.js +45 -44
  29. package/dist/theme-context-provider.d.ts +1 -0
  30. package/dist/theme-context-provider.js +21 -21
  31. package/dist/touchable.d.ts +18 -48
  32. package/dist-es/carousel.js +102 -98
  33. package/dist-es/chip.js +68 -84
  34. package/dist-es/community/advanced-data-card.css-mistica.js +6 -6
  35. package/dist-es/community/advanced-data-card.js +69 -70
  36. package/dist-es/hero.css-mistica.js +2 -9
  37. package/dist-es/hero.js +122 -110
  38. package/dist-es/highlighted-card.js +61 -65
  39. package/dist-es/icon-button.js +97 -122
  40. package/dist-es/image.js +2 -1
  41. package/dist-es/list.js +248 -243
  42. package/dist-es/logo.js +80 -105
  43. package/dist-es/package-version.js +1 -1
  44. package/dist-es/responsive-layout.css-mistica.js +3 -3
  45. package/dist-es/responsive-layout.js +41 -25
  46. package/dist-es/style.css +1 -1
  47. package/dist-es/text-link.js +25 -24
  48. package/dist-es/text.js +59 -58
  49. package/dist-es/theme-context-provider.js +68 -68
  50. package/package.json +1 -1
package/dist/logo.d.ts CHANGED
@@ -1,32 +1,13 @@
1
1
  import * as React from 'react';
2
- import type { ByBreakpoint, DataAttributes, TrackingEvent } from './utils/types';
3
- import type { ExclusifyUnion } from './utils/utility-types';
2
+ import type { TouchableComponentProps } from './touchable';
3
+ import type { ByBreakpoint, DataAttributes } from './utils/types';
4
4
  type LogoType = 'isotype' | 'imagotype' | 'vertical';
5
- type LogoPropsBase = {
5
+ type LogoProps = TouchableComponentProps<{
6
6
  size?: ByBreakpoint<number>;
7
7
  type?: LogoType;
8
8
  /** "data-" prefix is automatically added. For example, use "testid" instead of "data-testid" */
9
9
  dataAttributes?: DataAttributes;
10
- };
11
- type LogoToProps = LogoPropsBase & {
12
- trackingEvent?: TrackingEvent | ReadonlyArray<TrackingEvent>;
13
- to: string;
14
- fullPageOnWebView?: boolean;
15
- replace?: boolean;
16
- 'aria-label': string;
17
- };
18
- type LogoHrefProps = LogoPropsBase & {
19
- trackingEvent?: TrackingEvent | ReadonlyArray<TrackingEvent>;
20
- href: string;
21
- newTab?: boolean;
22
- 'aria-label': string;
23
- };
24
- type LogoOnPressProps = LogoPropsBase & {
25
- trackingEvent?: TrackingEvent | ReadonlyArray<TrackingEvent>;
26
- onPress: () => void;
27
- 'aria-label': string;
28
- };
29
- type LogoProps = ExclusifyUnion<LogoPropsBase | LogoToProps | LogoHrefProps | LogoOnPressProps>;
10
+ }>;
30
11
  export declare const Logo: React.FC<LogoProps>;
31
12
  export declare const MovistarLogo: React.FC<LogoProps>;
32
13
  export declare const VivoLogo: React.FC<LogoProps>;
package/dist/logo.js CHANGED
@@ -14,10 +14,10 @@ _export(exports, {
14
14
  return t1;
15
15
  },
16
16
  Logo: function() {
17
- return Y;
17
+ return X;
18
18
  },
19
19
  MovistarLogo: function() {
20
- return _;
20
+ return Y;
21
21
  },
22
22
  O2Logo: function() {
23
23
  return P;
@@ -32,7 +32,7 @@ _export(exports, {
32
32
  return e1;
33
33
  },
34
34
  VivoLogo: function() {
35
- return T;
35
+ return _;
36
36
  }
37
37
  });
38
38
  const _jsxruntime = require("react/jsx-runtime");
@@ -144,12 +144,12 @@ const V = (t)=>{
144
144
  return t.tablet && (e[_logocssmistica.vars.sizeTablet] = `${t.tablet}px`), e;
145
145
  }, B = (param)=>{
146
146
  let { size: t, type: e } = param;
147
- const { isDarkMode: a } = (0, _hooks.useTheme)(), { colors: r } = (0, _movistar.getMovistarSkin)(), n = (0, _themevariantcontext.useIsInverseVariant)() && !a ? r.inverse : r.brand;
147
+ const { isDarkMode: a } = (0, _hooks.useTheme)(), { colors: o } = (0, _movistar.getMovistarSkin)(), r = (0, _themevariantcontext.useIsInverseVariant)() && !a ? o.inverse : o.brand;
148
148
  return e === "vertical" ? /* @__PURE__ */ (0, _jsxruntime.jsxs)("svg", {
149
149
  className: _logocssmistica.svg,
150
150
  style: (0, _css.applyCssVars)(V(t)),
151
151
  viewBox: "0 0 72 72",
152
- fill: n,
152
+ fill: r,
153
153
  role: "presentation",
154
154
  children: [
155
155
  /* @__PURE__ */ (0, _jsxruntime.jsx)("path", {
@@ -184,7 +184,7 @@ const V = (t)=>{
184
184
  className: _logocssmistica.svg,
185
185
  style: (0, _css.applyCssVars)(V(t)),
186
186
  viewBox: "0 0 195 72",
187
- fill: n,
187
+ fill: r,
188
188
  role: "presentation",
189
189
  children: [
190
190
  /* @__PURE__ */ (0, _jsxruntime.jsx)("path", {
@@ -219,7 +219,7 @@ const V = (t)=>{
219
219
  className: _logocssmistica.svg,
220
220
  style: (0, _css.applyCssVars)(V(t)),
221
221
  viewBox: "0 0 72 72",
222
- fill: n,
222
+ fill: r,
223
223
  role: "presentation",
224
224
  children: /* @__PURE__ */ (0, _jsxruntime.jsx)("path", {
225
225
  d: "M17.2797 17.2124C14.4995 17.2572 9.36782 18.6502 7.02384 28.3781C6.00256 32.6168 5.60793 37.0347 6.4823 42.2938C7.28828 47.1441 8.71635 51.3303 9.67886 53.6376C10.0107 54.4324 10.5244 55.2617 10.9215 55.7719C12.0639 57.239 13.9651 57.1453 14.764 56.7453C15.6348 56.3098 16.6358 55.2581 16.2736 52.8561C16.0983 51.6958 15.5933 49.9981 15.3091 49.0545C14.4367 46.1588 13.2756 42.6649 13.1743 40.176C13.039 36.8468 14.3308 36.4108 15.1885 36.2193C16.6312 35.8965 17.8405 37.5063 18.9894 39.5237C20.3607 41.9314 22.7108 46.1974 24.6277 49.456C26.3582 52.3975 29.5517 55.5469 34.6804 55.3307C39.9089 55.1109 43.763 53.0837 45.7483 46.7014C47.2341 41.9267 48.2468 38.3588 49.8765 34.7048C51.7503 30.5031 54.2498 28.254 56.3547 28.9408C58.3091 29.5781 58.7969 31.5193 58.8202 34.3728C58.841 36.8968 58.5538 39.6792 58.3304 41.7234C58.2493 42.4652 58.1024 43.9576 58.1622 44.7859C58.2802 46.4146 58.9742 48.0414 60.7792 48.3018C62.7017 48.5788 64.2443 47.0174 64.8603 45.1302C65.1034 44.3864 65.3106 43.2482 65.4226 42.4405C65.9874 38.3618 66.1338 35.6206 65.8795 31.4473C65.5811 26.5676 64.6414 22.1178 63.0021 18.2667C61.4337 14.5839 58.9145 12.2236 55.6835 12.0151C52.107 11.7845 48.0026 14.1958 45.8496 18.8741C43.8648 23.1865 42.2772 27.6136 41.3141 29.873C40.3374 32.1643 38.9018 33.5764 36.6946 33.8127C33.996 34.101 31.6708 32.1103 29.9676 29.2718C28.4828 26.7977 25.5401 22.0869 23.9656 20.5039C22.4864 19.0167 20.7969 17.1558 17.2797 17.2124Z"
@@ -227,12 +227,12 @@ const V = (t)=>{
227
227
  });
228
228
  }, y = (param)=>{
229
229
  let { size: t, type: e } = param;
230
- const { isDarkMode: a } = (0, _hooks.useTheme)(), r = (0, _themevariantcontext.useIsInverseVariant)(), { colors: s } = (0, _vivo.getVivoSkin)(), n = r && !a ? s.inverse : s.brand;
230
+ const { isDarkMode: a } = (0, _hooks.useTheme)(), o = (0, _themevariantcontext.useIsInverseVariant)(), { colors: s } = (0, _vivo.getVivoSkin)(), r = o && !a ? s.inverse : s.brand;
231
231
  return e === "vertical" ? /* @__PURE__ */ (0, _jsxruntime.jsxs)("svg", {
232
232
  className: _logocssmistica.svg,
233
233
  style: (0, _css.applyCssVars)(V(t)),
234
234
  viewBox: "0 0 72 72",
235
- fill: n,
235
+ fill: r,
236
236
  role: "presentation",
237
237
  children: [
238
238
  /* @__PURE__ */ (0, _jsxruntime.jsx)("path", {
@@ -258,7 +258,7 @@ const V = (t)=>{
258
258
  className: _logocssmistica.svg,
259
259
  style: (0, _css.applyCssVars)(V(t)),
260
260
  viewBox: "0 0 195 72",
261
- fill: n,
261
+ fill: r,
262
262
  role: "presentation",
263
263
  children: [
264
264
  /* @__PURE__ */ (0, _jsxruntime.jsx)("path", {
@@ -284,20 +284,20 @@ const V = (t)=>{
284
284
  className: _logocssmistica.svg,
285
285
  style: (0, _css.applyCssVars)(V(t)),
286
286
  viewBox: "0 0 72 72",
287
- fill: n,
287
+ fill: r,
288
288
  role: "presentation",
289
289
  children: /* @__PURE__ */ (0, _jsxruntime.jsx)("path", {
290
290
  d: "M46.8016 17.1117C46.8016 19.2508 46.0737 22.5899 43.8127 24.9457C43.0178 25.7738 42.3281 26.2722 41.777 26.6429C40.714 27.3592 39.9446 27.8575 40.3732 29.0552C40.7938 30.2313 42.1074 29.8665 43.3494 29.574C43.7492 29.4753 51.549 27.5301 51.6472 27.5253C53.7419 27.1136 55.7661 28.4943 56.2571 30.6297C56.2594 30.6381 56.8833 33.3526 56.8891 33.3766C57.3836 35.5121 56.182 37.7017 54.137 38.3264C54.0492 38.3673 45.5261 40.5028 45.5111 40.5064C43.8924 40.9361 42.945 41.7727 42.945 43.399C42.945 44.126 43.3483 44.9157 43.8462 45.5705C43.8462 45.5705 53.1064 57.5285 53.1538 57.6212C54.4143 59.4123 54.0931 61.9101 52.4548 63.2944C52.449 63.3004 50.3694 65.0579 50.3486 65.0735C48.7137 66.459 46.3014 66.276 44.8779 64.6221C44.804 64.5571 39.0538 57.1926 38.4426 56.4114C37.8326 55.6314 37.0654 54.4421 35.999 54.4421C34.9326 54.4421 34.1689 55.6302 33.5566 56.4114C32.9477 57.1926 27.194 64.5583 27.1224 64.6221C25.6978 66.2748 23.2854 66.459 21.6494 65.0735C21.6321 65.0579 19.5501 63.3004 19.5444 63.2944C17.9084 61.9101 17.586 59.4123 18.8454 57.6212C18.8927 57.5285 28.153 45.5705 28.153 45.5705C28.6498 44.9157 29.0541 44.126 29.0541 43.399C29.0541 41.7727 28.1079 40.9361 26.4881 40.5064C26.4731 40.5028 17.9511 38.3673 17.8633 38.3264C15.8183 37.7017 14.6179 35.5121 15.1101 33.3766C15.1147 33.3526 15.7409 30.6381 15.7421 30.6297C16.2331 28.4943 18.2561 27.1124 20.352 27.5253C20.4502 27.5301 28.2489 29.4753 28.6486 29.574C29.8929 29.8665 31.2054 30.2313 31.626 29.0552C32.0546 27.8587 31.2851 27.3592 30.2234 26.6429C29.6711 26.2722 28.9814 25.775 28.1865 24.9457C25.9243 22.5887 25.1964 19.2508 25.1964 17.1117C25.1987 10.9751 30.1101 6 36.0002 6C41.8902 6 46.8016 10.9751 46.8016 17.1117Z"
291
291
  })
292
292
  });
293
- }, m = (param)=>{
293
+ }, h = (param)=>{
294
294
  let { size: t, isO2NewSkin: e } = param;
295
- const { isDarkMode: a } = (0, _hooks.useTheme)(), r = (0, _themevariantcontext.useIsInverseVariant)(), { colors: s } = e ? (0, _o2new.getO2NewSkin)() : (0, _o2.getO2Skin)(), n = r && !a ? s.inverse : s.brand;
295
+ const { isDarkMode: a } = (0, _hooks.useTheme)(), o = (0, _themevariantcontext.useIsInverseVariant)(), { colors: s } = e ? (0, _o2new.getO2NewSkin)() : (0, _o2.getO2Skin)(), r = o && !a ? s.inverse : s.brand;
296
296
  return /* @__PURE__ */ (0, _jsxruntime.jsx)("svg", {
297
297
  className: _logocssmistica.svg,
298
298
  style: (0, _css.applyCssVars)(V(t)),
299
299
  viewBox: "0 0 72 72",
300
- fill: n,
300
+ fill: r,
301
301
  role: "presentation",
302
302
  children: /* @__PURE__ */ (0, _jsxruntime.jsx)("path", {
303
303
  d: "M64.6464 48.1005C65.5273 48.3194 66.3797 48.7244 67.0163 49.3673C67.555 49.8826 67.9234 50.5497 68.1381 51.2513C68.3932 52.1193 68.4578 53.0409 68.3406 53.9362C68.2286 54.7438 67.9502 55.5225 67.5851 56.2533C66.899 57.5977 65.9414 58.7894 64.9183 59.9048C63.8168 61.0986 62.6299 62.214 61.4443 63.3281C63.8331 63.3205 66.222 63.3277 68.6108 63.3243C68.7406 63.3231 68.8729 63.3164 69 63.3499V66.1656C68.9276 66.1744 68.8561 66.1841 68.7849 66.187L56.6515 66.1866V63.1532C56.9278 62.8849 57.223 62.6362 57.5061 62.3746C58.7357 61.2826 59.9476 60.1702 61.0896 58.9906C62.1882 57.8312 63.2582 56.619 64.0232 55.2197C64.3697 54.5626 64.6602 53.8473 64.655 53.0979C64.6516 52.5621 64.4529 52.0228 64.0723 51.6312C63.578 51.1099 62.8587 50.8466 62.1481 50.7611C61.1887 50.6609 60.2199 50.855 59.327 51.1913C58.6379 51.4458 57.9983 51.8056 57.3725 52.1792C57.2747 51.1712 57.173 50.1635 57.0791 49.1551C58.6163 48.4104 60.3087 47.9609 62.0261 47.8824C62.9031 47.8313 63.7918 47.895 64.6464 48.1005ZM44.5216 15.9479C46.2174 16.5777 47.8288 17.4272 49.2842 18.4844C51.7084 20.2329 53.6818 22.5547 55.0432 25.1725C56.3106 27.5865 57.064 30.2404 57.3669 32.9308C57.5113 34.2801 57.5716 35.6404 57.4945 36.9961C57.3885 39.1497 56.97 41.2895 56.2443 43.3274C55.1022 46.5373 53.168 49.4901 50.5956 51.7934C48.1348 54.0137 45.0922 55.6109 41.841 56.4164C39.4569 57.011 36.9711 57.1964 34.5189 57.0169C32.0275 56.8353 29.5623 56.2462 27.2864 55.2382C24.6566 54.0787 22.2902 52.3616 20.3927 50.2449C18.0655 47.6619 16.445 44.5002 15.6352 41.1616C15.2392 39.5413 15.0384 37.8792 15 36.2153V35.3469C15.0353 33.9564 15.1603 32.5664 15.4189 31.1973C16.0352 27.8905 17.3992 24.692 19.5312 22.0352C21.1736 19.9734 23.2664 18.2546 25.6285 17.0201C28.6633 15.4237 32.1089 14.6354 35.5471 14.5511C38.5915 14.4593 41.6699 14.8883 44.5216 15.9479ZM35.3058 20.656C34.0556 20.7554 32.817 21.0309 31.6603 21.5068C30.4359 22.0054 29.3042 22.714 28.3199 23.5799C27.0856 24.6597 26.078 25.9726 25.3009 27.397C24.1179 29.5695 23.456 31.9948 23.2715 34.442C23.1655 35.8798 23.2284 37.3286 23.4426 38.7551C23.7215 40.5808 24.2533 42.3768 25.0885 44.0369C25.797 45.4479 26.7296 46.7608 27.8988 47.8476C29.1348 49.0096 30.6453 49.8935 32.2813 50.4072C33.7802 50.8797 35.3705 51.0542 36.9413 50.9883C38.4027 50.9208 39.8611 50.6344 41.2092 50.0734C43.2433 49.2406 44.9767 47.7906 46.2355 46.037C47.8603 43.7815 48.7769 41.0966 49.1372 38.3786C49.613 34.8311 49.0941 31.1331 47.4931 27.8998C46.776 26.4703 45.8494 25.1281 44.6828 24.0085C43.4299 22.7706 41.8862 21.8075 40.1968 21.241C38.632 20.7114 36.9543 20.5386 35.3058 20.656Z"
@@ -305,26 +305,26 @@ const V = (t)=>{
305
305
  });
306
306
  }, I = (param)=>{
307
307
  let { size: t, type: e } = param;
308
- return /* @__PURE__ */ (0, _jsxruntime.jsx)(m, {
308
+ return /* @__PURE__ */ (0, _jsxruntime.jsx)(h, {
309
309
  size: t,
310
310
  type: e,
311
311
  isO2NewSkin: !1
312
312
  });
313
- }, O = (param)=>{
313
+ }, b = (param)=>{
314
314
  let { size: t, type: e } = param;
315
- return /* @__PURE__ */ (0, _jsxruntime.jsx)(m, {
315
+ return /* @__PURE__ */ (0, _jsxruntime.jsx)(h, {
316
316
  size: t,
317
317
  type: e,
318
318
  isO2NewSkin: !0
319
319
  });
320
- }, S = (param)=>{
320
+ }, O = (param)=>{
321
321
  let { size: t, type: e } = param;
322
- const { isDarkMode: a } = (0, _hooks.useTheme)(), r = (0, _themevariantcontext.useIsInverseVariant)(), { colors: s } = (0, _telefonica.getTelefonicaSkin)(), n = r && !a ? s.inverse : s.brand;
322
+ const { isDarkMode: a } = (0, _hooks.useTheme)(), o = (0, _themevariantcontext.useIsInverseVariant)(), { colors: s } = (0, _telefonica.getTelefonicaSkin)(), r = o && !a ? s.inverse : s.brand;
323
323
  return e === "vertical" ? /* @__PURE__ */ (0, _jsxruntime.jsxs)("svg", {
324
324
  className: _logocssmistica.svg,
325
325
  style: (0, _css.applyCssVars)(V(t)),
326
326
  viewBox: "0 0 73 72",
327
- fill: n,
327
+ fill: r,
328
328
  role: "presentation",
329
329
  children: [
330
330
  /* @__PURE__ */ (0, _jsxruntime.jsx)("path", {
@@ -383,7 +383,7 @@ const V = (t)=>{
383
383
  className: _logocssmistica.svg,
384
384
  style: (0, _css.applyCssVars)(V(t)),
385
385
  viewBox: "0 0 195 72",
386
- fill: n,
386
+ fill: r,
387
387
  role: "presentation",
388
388
  children: [
389
389
  /* @__PURE__ */ (0, _jsxruntime.jsx)("path", {
@@ -442,7 +442,7 @@ const V = (t)=>{
442
442
  className: _logocssmistica.svg,
443
443
  style: (0, _css.applyCssVars)(V(t)),
444
444
  viewBox: "0 0 72 72",
445
- fill: n,
445
+ fill: r,
446
446
  role: "presentation",
447
447
  children: [
448
448
  /* @__PURE__ */ (0, _jsxruntime.jsx)("path", {
@@ -498,19 +498,19 @@ const V = (t)=>{
498
498
  })
499
499
  ]
500
500
  });
501
- }, D = (param)=>{
501
+ }, S = (param)=>{
502
502
  let { size: t, type: e } = param;
503
- const { isDarkMode: a } = (0, _hooks.useTheme)(), r = (0, _themevariantcontext.useIsInverseVariant)(), { colors: s } = (0, _blau.getBlauSkin)(), n = r && !a ? s.inverse : s.brand, h = r && !a ? s.inverse : s.promo;
503
+ const { isDarkMode: a } = (0, _hooks.useTheme)(), o = (0, _themevariantcontext.useIsInverseVariant)(), { colors: s } = (0, _blau.getBlauSkin)(), r = o && !a ? s.inverse : s.brand, c = o && !a ? s.inverse : s.promo;
504
504
  return e === "vertical" ? /* @__PURE__ */ (0, _jsxruntime.jsxs)("svg", {
505
505
  className: _logocssmistica.svg,
506
506
  style: (0, _css.applyCssVars)(V(t)),
507
507
  viewBox: "0 0 73 72",
508
- fill: n,
508
+ fill: r,
509
509
  role: "presentation",
510
510
  children: [
511
511
  /* @__PURE__ */ (0, _jsxruntime.jsx)("path", {
512
512
  d: "M56.42 52.2003H18.2V63.0003H56.42V52.2003Z",
513
- fill: h
513
+ fill: c
514
514
  }),
515
515
  /* @__PURE__ */ (0, _jsxruntime.jsx)("path", {
516
516
  d: "M38.8069 36.431H35.0651V31.658H38.8069C40.7615 31.658 41.5432 32.865 41.5432 34.0171C41.5432 35.2789 40.7615 36.431 38.8069 36.431ZM35.121 19.0948H37.9132C40.6496 19.0948 40.4821 23.0447 37.9132 23.0447H35.121V19.0948ZM49.6963 26.2267C52.7119 25.1844 54.3312 22.3864 54.3871 19.369C54.5546 13.7182 50.0316 9 44.3355 9H18.2V19.0398H21.8859V36.7602H18.2V46.8H44.2237C50.925 46.8 56.1188 42.3013 56.3981 35.8276C56.6773 30.89 54.2756 27.9275 49.6963 26.2267Z"
@@ -520,12 +520,12 @@ const V = (t)=>{
520
520
  className: _logocssmistica.svg,
521
521
  style: (0, _css.applyCssVars)(V(t)),
522
522
  viewBox: "0 0 138 72",
523
- fill: n,
523
+ fill: r,
524
524
  role: "presentation",
525
525
  children: [
526
526
  /* @__PURE__ */ (0, _jsxruntime.jsx)("path", {
527
527
  d: "M135.557 54.5729H6.16162V65.184H135.557V54.5729Z",
528
- fill: h
528
+ fill: c
529
529
  }),
530
530
  /* @__PURE__ */ (0, _jsxruntime.jsx)("path", {
531
531
  d: "M37.7269 25.9921C42.1878 27.7129 44.5575 30.6343 44.2869 35.6127C44.0163 42.0913 38.9696 46.5732 32.3623 46.5732H6.83155V36.5296H10.4229V18.8042H6.83155V8.75793H32.47C38.0579 8.75793 42.5215 13.5131 42.3507 19.1299C42.2929 22.1512 40.6877 24.9701 37.7269 25.9921ZM26.1359 17.9477H22.7942V23.2703H26.1359C29.4277 23.2703 29.6484 17.9477 26.1359 17.9477ZM30.3393 34.0259C30.3393 32.4812 29.3437 30.9443 27.0449 30.9443H22.7915V37.1076H27.0423C29.2806 37.1102 30.3393 35.5917 30.3393 34.0259Z"
@@ -544,21 +544,21 @@ const V = (t)=>{
544
544
  className: _logocssmistica.svg,
545
545
  style: (0, _css.applyCssVars)(V(t)),
546
546
  viewBox: "0 0 72 72",
547
- fill: n,
547
+ fill: r,
548
548
  role: "presentation",
549
549
  children: [
550
550
  /* @__PURE__ */ (0, _jsxruntime.jsx)("path", {
551
551
  d: "M55.8 52.2003H18V63.0003H55.8V52.2003Z",
552
- fill: h
552
+ fill: c
553
553
  }),
554
554
  /* @__PURE__ */ (0, _jsxruntime.jsx)("path", {
555
555
  d: "M38.3805 36.431H34.6798V31.658H38.3805C40.3136 31.658 41.0868 32.865 41.0868 34.0171C41.0868 35.2789 40.3136 36.431 38.3805 36.431ZM34.7351 19.0948H37.4966C40.2029 19.0948 40.0373 23.0447 37.4966 23.0447H34.7351V19.0948ZM49.1503 26.2267C52.1327 25.1844 53.7342 22.3864 53.7895 19.369C53.9552 13.7182 49.4819 9 43.8483 9H18V19.0398H21.6454V36.7602H18V46.8H43.7377C50.3654 46.8 55.5022 42.3013 55.7784 35.8276C56.0545 30.89 53.6792 27.9275 49.1503 26.2267Z"
556
556
  })
557
557
  ]
558
558
  });
559
- }, b = (param)=>{
559
+ }, T = (param)=>{
560
560
  let { size: t } = param;
561
- const { isDarkMode: e } = (0, _hooks.useTheme)(), a = (0, _themevariantcontext.useIsInverseVariant)(), { colors: r } = (0, _tu.getTuSkin)(), s = e || a ? r.inverse : r.backgroundBrand;
561
+ const { isDarkMode: e } = (0, _hooks.useTheme)(), a = (0, _themevariantcontext.useIsInverseVariant)(), { colors: o } = (0, _tu.getTuSkin)(), s = e || a ? o.inverse : o.backgroundBrand;
562
562
  return /* @__PURE__ */ (0, _jsxruntime.jsx)("svg", {
563
563
  className: _logocssmistica.svg,
564
564
  style: (0, _css.applyCssVars)(V(t)),
@@ -588,22 +588,22 @@ const V = (t)=>{
588
588
  type: a
589
589
  });
590
590
  case "O2-new":
591
- return /* @__PURE__ */ (0, _jsxruntime.jsx)(O, {
591
+ return /* @__PURE__ */ (0, _jsxruntime.jsx)(b, {
592
592
  size: t,
593
593
  type: a
594
594
  });
595
595
  case "Telefonica":
596
- return /* @__PURE__ */ (0, _jsxruntime.jsx)(S, {
596
+ return /* @__PURE__ */ (0, _jsxruntime.jsx)(O, {
597
597
  size: t,
598
598
  type: a
599
599
  });
600
600
  case "Blau":
601
- return /* @__PURE__ */ (0, _jsxruntime.jsx)(D, {
601
+ return /* @__PURE__ */ (0, _jsxruntime.jsx)(S, {
602
602
  size: t,
603
603
  type: a
604
604
  });
605
605
  case "Tu":
606
- return /* @__PURE__ */ (0, _jsxruntime.jsx)(b, {
606
+ return /* @__PURE__ */ (0, _jsxruntime.jsx)(T, {
607
607
  size: t,
608
608
  type: a
609
609
  });
@@ -612,50 +612,25 @@ const V = (t)=>{
612
612
  }
613
613
  }, M = (t)=>{
614
614
  const e = (0, _dom.getPrefixedDataAttributes)(t.dataAttributes, "Logo");
615
- return t.to ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.default, {
616
- trackingEvent: t.trackingEvent,
617
- to: t.to,
618
- fullPageOnWebView: t.fullPageOnWebView,
619
- replace: t.replace,
620
- "aria-label": t["aria-label"],
621
- className: _logocssmistica.logoContainer,
622
- dataAttributes: e,
623
- children: t.children
624
- }) : t.href ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.default, {
625
- trackingEvent: t.trackingEvent,
626
- href: t.href,
627
- newTab: t.newTab,
628
- replace: t.replace,
629
- "aria-label": t["aria-label"],
630
- className: _logocssmistica.logoContainer,
631
- dataAttributes: e,
632
- children: t.children
633
- }) : t.onPress ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.default, {
634
- trackingEvent: t.trackingEvent,
635
- onPress: t.onPress,
636
- "aria-label": t.href,
637
- className: _logocssmistica.logoContainer,
638
- dataAttributes: e,
639
- children: t.children
640
- }) : /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({
615
+ return t.to || t.href || t.onPress ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.default, _object_spread({}, t)) : /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({
641
616
  className: _logocssmistica.logoContainer
642
617
  }, e), {
643
618
  children: t.children
644
619
  }));
645
- }, Y = (_param)=>{
620
+ }, X = (_param)=>{
646
621
  var { size: t, type: e = "isotype" } = _param, a = _object_without_properties(_param, [
647
622
  "size",
648
623
  "type"
649
624
  ]);
650
- const { skinName: r } = (0, _hooks.useTheme)();
625
+ const { skinName: o } = (0, _hooks.useTheme)();
651
626
  return /* @__PURE__ */ (0, _jsxruntime.jsx)(M, _object_spread_props(_object_spread({}, a), {
652
627
  children: /* @__PURE__ */ (0, _jsxruntime.jsx)(d, {
653
- skinName: r,
628
+ skinName: o,
654
629
  type: e,
655
630
  size: t
656
631
  })
657
632
  }));
658
- }, _ = (_param)=>{
633
+ }, Y = (_param)=>{
659
634
  var { type: t = "isotype", size: e } = _param, a = _object_without_properties(_param, [
660
635
  "type",
661
636
  "size"
@@ -667,7 +642,7 @@ const V = (t)=>{
667
642
  size: e
668
643
  })
669
644
  }));
670
- }, T = (_param)=>{
645
+ }, _ = (_param)=>{
671
646
  var { size: t, type: e = "isotype" } = _param, a = _object_without_properties(_param, [
672
647
  "size",
673
648
  "type"
@@ -8,4 +8,4 @@ Object.defineProperty(exports, "PACKAGE_VERSION", {
8
8
  return o;
9
9
  }
10
10
  });
11
- const o = "15.4.0";
11
+ const o = "15.6.0";
@@ -13,36 +13,51 @@ _export(exports, {
13
13
  return e;
14
14
  },
15
15
  SMALL_DESKTOP_SIDE_MARGIN: function() {
16
- return r;
16
+ return a;
17
17
  },
18
18
  TABLET_SIDE_MARGIN: function() {
19
19
  return n;
20
20
  },
21
21
  backgroundVariant: function() {
22
- return v;
22
+ return t;
23
23
  },
24
- expandedResponsiveLayoutContainerDesktop: function() {
24
+ desktopContainer: function() {
25
25
  return i;
26
26
  },
27
- expandedResponsiveLayoutContainerMobile: function() {
28
- return t;
27
+ forcedMarginDesktopContainer: function() {
28
+ return v;
29
29
  },
30
- fullWidth: function() {
30
+ forcedMarginMobileContainer: function() {
31
31
  return _;
32
32
  },
33
- fullwidthContainer: function() {
33
+ fullWidth: function() {
34
34
  return f;
35
35
  },
36
- responsiveLayout: function() {
36
+ mobileContainer: function() {
37
37
  return l;
38
38
  },
39
- responsiveLayoutContainer: function() {
39
+ resetContainerDesktop: function() {
40
+ return g;
41
+ },
42
+ resetContainerMobile: function() {
43
+ return s;
44
+ },
45
+ resetDesktop: function() {
46
+ return M;
47
+ },
48
+ resetMobile: function() {
40
49
  return p;
50
+ },
51
+ responsiveLayout: function() {
52
+ return C;
53
+ },
54
+ responsiveLayoutContainer: function() {
55
+ return D;
41
56
  }
42
57
  });
43
58
  require("./sprinkles.css.ts.vanilla.css-mistica.js");
44
59
  require("./responsive-layout.css.ts.vanilla.css-mistica.js");
45
- var e = 16, r = 40, n = 32, v = {
60
+ var e = 16, a = 40, n = 32, t = {
46
61
  inverse: "_1y2v1nf3z",
47
62
  alternative: "_1y2v1nf44"
48
- }, i = "_17lofg74", t = "_17lofg73", _ = "_17lofg7a _1y2v1nfi7", f = "_17lofg75", l = "_17lofg78", p = "_17lofg72 _1y2v1nfi7";
63
+ }, i = "_17lofg77", v = "_17lofg78", _ = "_17lofg7a", f = "_17lofg7f _1y2v1nfi7", l = "_17lofg79", g = "_17lofg73", s = "_17lofg72", M = "_17lofg75", p = "_17lofg74", C = "_17lofg7d", D = "_17lofg76";
@@ -5,10 +5,15 @@ export declare const LARGE_DESKTOP_MAX_WIDTH = 1224;
5
5
  export declare const vars: {
6
6
  sideMargin: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
7
7
  };
8
+ export declare const resetContainerMobile: string;
9
+ export declare const resetContainerDesktop: string;
10
+ export declare const resetMobile: string;
11
+ export declare const resetDesktop: string;
8
12
  export declare const responsiveLayoutContainer: string;
9
- export declare const expandedResponsiveLayoutContainerMobile: string;
10
- export declare const expandedResponsiveLayoutContainerDesktop: string;
11
- export declare const fullwidthContainer: string;
13
+ export declare const desktopContainer: string;
14
+ export declare const forcedMarginDesktopContainer: string;
15
+ export declare const mobileContainer: string;
16
+ export declare const forcedMarginMobileContainer: string;
12
17
  export declare const backgroundVariant: {
13
18
  inverse: string;
14
19
  alternative: string;
@@ -15,4 +15,9 @@ export declare const InternalResponsiveLayout: React.FC<Props & {
15
15
  innerDivClassName?: string;
16
16
  }>;
17
17
  declare const ResponsiveLayout: React.FC<Props>;
18
+ export declare const ResetResponsiveLayout: React.FC<{
19
+ children: React.ReactNode;
20
+ skipMobile?: boolean;
21
+ skipDesktop?: boolean;
22
+ }>;
18
23
  export default ResponsiveLayout;
@@ -11,7 +11,10 @@ function _export(target, all) {
11
11
  }
12
12
  _export(exports, {
13
13
  InternalResponsiveLayout: function() {
14
- return C;
14
+ return k;
15
+ },
16
+ ResetResponsiveLayout: function() {
17
+ return q;
15
18
  },
16
19
  default: function() {
17
20
  return w;
@@ -106,32 +109,48 @@ function _object_without_properties_loose(source, excluded) {
106
109
  }
107
110
  return target;
108
111
  }
109
- const C = (param)=>{
110
- let { children: n, isInverse: o = !1, variant: p, backgroundColor: s, className: u, fullWidth: e, dataAttributes: d, shouldExpandWhenNested: i = !1, innerDivClassName: m } = param;
111
- const v = (0, _themevariantcontext.useThemeVariant)(), t = p || o && "inverse" || void 0;
112
+ const k = (param)=>{
113
+ let { children: a, isInverse: e = !1, variant: r, backgroundColor: s, className: d, fullWidth: i, dataAttributes: m, shouldExpandWhenNested: l = !1, innerDivClassName: c } = param;
114
+ const u = (0, _themevariantcontext.useThemeVariant)(), n = r || e && "inverse" || void 0;
112
115
  return /* @__PURE__ */ (0, _jsxruntime.jsx)(_themevariantcontext.ThemeVariant, {
113
- variant: t !== null && t !== void 0 ? t : v,
116
+ variant: n !== null && n !== void 0 ? n : u,
114
117
  children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({
115
- className: (0, _classnames.default)(e ? _responsivelayoutcssmistica.fullwidthContainer : _responsivelayoutcssmistica.responsiveLayoutContainer, u, t && t !== "default" && _responsivelayoutcssmistica.backgroundVariant[t], {
116
- [_responsivelayoutcssmistica.expandedResponsiveLayoutContainerMobile]: i === !0 && !e,
117
- [_responsivelayoutcssmistica.expandedResponsiveLayoutContainerDesktop]: i && !e
118
- }),
118
+ className: (0, _classnames.default)(d, n && n !== "default" && _responsivelayoutcssmistica.backgroundVariant[n], ...i ? [] : [
119
+ l ? _responsivelayoutcssmistica.desktopContainer : _responsivelayoutcssmistica.forcedMarginDesktopContainer,
120
+ l === !0 ? _responsivelayoutcssmistica.mobileContainer : _responsivelayoutcssmistica.forcedMarginMobileContainer,
121
+ _responsivelayoutcssmistica.responsiveLayoutContainer
122
+ ]),
119
123
  style: s ? {
120
124
  background: s
121
125
  } : void 0
122
- }, (0, _dom.getPrefixedDataAttributes)(d)), {
126
+ }, (0, _dom.getPrefixedDataAttributes)(m)), {
123
127
  children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
124
- className: (0, _classnames.default)(e ? _responsivelayoutcssmistica.fullWidth : _responsivelayoutcssmistica.responsiveLayout, m),
125
- children: n
128
+ className: (0, _classnames.default)(i ? _responsivelayoutcssmistica.fullWidth : _responsivelayoutcssmistica.responsiveLayout, c),
129
+ children: a
126
130
  })
127
131
  }))
128
132
  });
129
- }, g = (_param)=>{
130
- var { children: n } = _param, o = _object_without_properties(_param, [
133
+ }, T = (_param)=>{
134
+ var { children: a } = _param, e = _object_without_properties(_param, [
131
135
  "children"
132
136
  ]);
133
- return /* @__PURE__ */ (0, _jsxruntime.jsx)(C, _object_spread_props(_object_spread({}, o), {
137
+ return /* @__PURE__ */ (0, _jsxruntime.jsx)(k, _object_spread_props(_object_spread({}, e), {
134
138
  shouldExpandWhenNested: !0,
135
- children: n
139
+ children: a
136
140
  }));
137
- }, w = g;
141
+ }, q = (param)=>{
142
+ let { children: a, skipMobile: e = !1, skipDesktop: r = !1 } = param;
143
+ return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
144
+ className: (0, _classnames.default)({
145
+ [_responsivelayoutcssmistica.resetContainerMobile]: !e,
146
+ [_responsivelayoutcssmistica.resetContainerDesktop]: !r
147
+ }),
148
+ children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
149
+ className: (0, _classnames.default)({
150
+ [_responsivelayoutcssmistica.resetMobile]: !e,
151
+ [_responsivelayoutcssmistica.resetDesktop]: !r
152
+ }),
153
+ children: a
154
+ })
155
+ });
156
+ }, w = T;
@@ -1,4 +1,5 @@
1
1
  import * as React from 'react';
2
+ import type { AlwaysTouchableComponentProps } from './touchable';
2
3
  import type { TrackingEvent, DataAttributes } from './utils/types';
3
4
  interface CommonProps {
4
5
  children?: React.ReactNode;
@@ -16,26 +17,6 @@ interface CommonProps {
16
17
  /** IMPORTANT: try to avoid using role="link" with onPress and first consider other alternatives like to/href + onNavigate */
17
18
  role?: string;
18
19
  }
19
- export interface HrefProps extends CommonProps {
20
- href: string;
21
- newTab?: boolean;
22
- onPress?: undefined;
23
- to?: undefined;
24
- onNavigate?: () => void | Promise<void>;
25
- }
26
- export interface ToProps extends CommonProps {
27
- to: string;
28
- fullPageOnWebView?: boolean;
29
- href?: undefined;
30
- onPress?: undefined;
31
- onNavigate?: () => void | Promise<void>;
32
- }
33
- export interface OnPressProps extends CommonProps {
34
- onPress: (event: React.MouseEvent<HTMLElement>) => void | boolean;
35
- href?: undefined;
36
- to?: undefined;
37
- onNavigate?: undefined;
38
- }
39
- export type TextLinkProps = HrefProps | ToProps | OnPressProps;
20
+ export type TextLinkProps = AlwaysTouchableComponentProps & CommonProps;
40
21
  declare const TextLink: React.FC<TextLinkProps>;
41
22
  export default TextLink;
package/dist/text-link.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 j;
9
+ return A;
10
10
  }
11
11
  });
12
12
  const _jsxruntime = require("react/jsx-runtime");
@@ -102,30 +102,31 @@ function _object_without_properties_loose(source, excluded) {
102
102
  }
103
103
  return target;
104
104
  }
105
- const E = (_param)=>{
106
- var { children: t, className: r = "", disabled: a, style: s } = _param, e = _object_without_properties(_param, [
105
+ const C = (_param)=>{
106
+ var { children: e, className: r = "", disabled: a, style: s, trackEvent: i } = _param, t = _object_without_properties(_param, [
107
107
  "children",
108
108
  "className",
109
109
  "disabled",
110
- "style"
110
+ "style",
111
+ "trackEvent"
111
112
  ]);
112
- const i = (0, _themevariantcontext.useIsInverseVariant)(), { isDarkMode: m } = (0, _hooks.useTheme)(), { formStatus: c } = (0, _formcontext.useForm)(), { eventFormat: f } = (0, _analytics.useTrackingConfig)(), u = ()=>f === "google-analytics-4" ? {
113
+ const m = (0, _themevariantcontext.useIsInverseVariant)(), { isDarkMode: c } = (0, _hooks.useTheme)(), { formStatus: f } = (0, _formcontext.useForm)(), { eventFormat: u } = (0, _analytics.useTrackingConfig)(), p = ()=>u === "google-analytics-4" ? {
113
114
  name: _analytics.eventNames.userInteraction,
114
115
  component_type: "link",
115
- component_copy: (0, _common.getTextFromChildren)(t)
116
+ component_copy: (0, _common.getTextFromChildren)(e)
116
117
  } : {
117
118
  category: _analytics.eventCategories.userInteraction,
118
119
  action: _analytics.eventActions.linkTapped,
119
- label: (0, _common.getTextFromChildren)(t)
120
+ label: (0, _common.getTextFromChildren)(e)
120
121
  };
121
- var _e_trackingEvent;
122
- return /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread_props(_object_spread({}, e), {
122
+ var _t_trackingEvent;
123
+ return /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread_props(_object_spread({}, t), {
123
124
  stopPropagation: !0,
124
- as: e.onPress ? "a" : void 0,
125
- trackingEvent: (_e_trackingEvent = e.trackingEvent) !== null && _e_trackingEvent !== void 0 ? _e_trackingEvent : e.trackEvent ? u() : void 0,
126
- disabled: a || c === "sending",
127
- className: (0, _classnames.default)(i ? m ? _textlinkcssmistica.variants.inverseDark : _textlinkcssmistica.variants.inverseLight : _textlinkcssmistica.variants.default, r),
125
+ as: t.onPress ? "a" : void 0,
126
+ trackingEvent: (_t_trackingEvent = t.trackingEvent) !== null && _t_trackingEvent !== void 0 ? _t_trackingEvent : i ? p() : void 0,
127
+ disabled: a || f === "sending",
128
+ className: (0, _classnames.default)(m ? c ? _textlinkcssmistica.variants.inverseDark : _textlinkcssmistica.variants.inverseLight : _textlinkcssmistica.variants.default, r),
128
129
  style: s,
129
- children: t
130
+ children: e
130
131
  }));
131
- }, j = E;
132
+ }, A = C;