@telefonica/mistica 14.28.1 → 14.29.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (55) hide show
  1. package/css/mistica.css +1 -1
  2. package/dist/accordion.d.ts +3 -0
  3. package/dist/accordion.js +71 -70
  4. package/dist/button-layout.css-mistica.js +11 -19
  5. package/dist/button-layout.css.d.ts +1 -5
  6. package/dist/button-layout.js +19 -90
  7. package/dist/button.css-mistica.js +18 -21
  8. package/dist/counter.css-mistica.js +48 -0
  9. package/dist/counter.css.d.ts +11 -0
  10. package/dist/counter.css.ts.vanilla.css-mistica.js +11 -0
  11. package/dist/counter.d.ts +19 -0
  12. package/dist/counter.js +240 -0
  13. package/dist/generated/mistica-icons/icon-add-more-filled.js +1 -1
  14. package/dist/generated/mistica-icons/icon-add-more-light.js +1 -1
  15. package/dist/generated/mistica-icons/icon-add-more-regular.js +2 -2
  16. package/dist/generated/mistica-icons/icon-subtract-filled.d.ts +4 -0
  17. package/dist/generated/mistica-icons/icon-subtract-light.js +21 -10
  18. package/dist/generated/mistica-icons/icon-subtract-regular.js +29 -8
  19. package/dist/index.d.ts +1 -0
  20. package/dist/index.js +4 -0
  21. package/dist/list.d.ts +3 -0
  22. package/dist/list.js +92 -92
  23. package/dist/loading-bar.js +5 -4
  24. package/dist/menu.js +11 -10
  25. package/dist/navigation-bar.js +27 -26
  26. package/dist/package-version.js +1 -1
  27. package/dist/snackbar.css-mistica.js +16 -13
  28. package/dist/snackbar.css.d.ts +3 -2
  29. package/dist/snackbar.d.ts +5 -1
  30. package/dist/snackbar.js +119 -64
  31. package/dist/theme.d.ts +6 -0
  32. package/dist/theme.js +52 -28
  33. package/dist-es/accordion.js +79 -78
  34. package/dist-es/button-layout.css-mistica.js +4 -6
  35. package/dist-es/button-layout.js +27 -98
  36. package/dist-es/button.css-mistica.js +3 -3
  37. package/dist-es/counter.css-mistica.js +4 -0
  38. package/dist-es/counter.css.ts.vanilla.css-mistica.js +2 -0
  39. package/dist-es/counter.js +187 -0
  40. package/dist-es/generated/mistica-icons/icon-add-more-filled.js +1 -1
  41. package/dist-es/generated/mistica-icons/icon-add-more-light.js +1 -1
  42. package/dist-es/generated/mistica-icons/icon-add-more-regular.js +2 -2
  43. package/dist-es/generated/mistica-icons/icon-subtract-light.js +24 -13
  44. package/dist-es/generated/mistica-icons/icon-subtract-regular.js +33 -12
  45. package/dist-es/index.js +1765 -1764
  46. package/dist-es/list.js +125 -125
  47. package/dist-es/loading-bar.js +12 -11
  48. package/dist-es/menu.js +9 -8
  49. package/dist-es/navigation-bar.js +26 -25
  50. package/dist-es/package-version.js +1 -1
  51. package/dist-es/snackbar.css-mistica.js +5 -2
  52. package/dist-es/snackbar.js +140 -85
  53. package/dist-es/style.css +1 -1
  54. package/dist-es/theme.js +56 -32
  55. package/package.json +1 -1
@@ -10,19 +10,19 @@ function _export(target, all) {
10
10
  }
11
11
  _export(exports, {
12
12
  FunnelNavigationBar: function() {
13
- return dn;
13
+ return un;
14
14
  },
15
15
  MainNavigationBar: function() {
16
- return sn;
16
+ return dn;
17
17
  },
18
18
  NavigationBar: function() {
19
- return ln;
19
+ return mn;
20
20
  },
21
21
  NavigationBarAction: function() {
22
- return un;
22
+ return hn;
23
23
  },
24
24
  NavigationBarActionGroup: function() {
25
- return mn;
25
+ return pn;
26
26
  }
27
27
  });
28
28
  const _jsxruntime = require("react/jsx-runtime");
@@ -52,6 +52,7 @@ const _sprinklescssmistica = require("./sprinkles.css-mistica.js");
52
52
  const _dom = require("./utils/dom.js");
53
53
  const _stack = /*#__PURE__*/ _interop_require_default(require("./stack.js"));
54
54
  const _box = /*#__PURE__*/ _interop_require_default(require("./box.js"));
55
+ const _platform = require("./utils/platform.js");
55
56
  function _interop_require_default(obj) {
56
57
  return obj && obj.__esModule ? obj : {
57
58
  default: obj
@@ -175,7 +176,7 @@ function _object_without_properties_loose(source, excluded) {
175
176
  }
176
177
  return target;
177
178
  }
178
- const _e = (param)=>/* @__PURE__ */ {
179
+ const ke = (param)=>/* @__PURE__ */ {
179
180
  let { isOpen: n } = param;
180
181
  return (0, _jsxruntime.jsxs)("div", {
181
182
  className: _navigationbarcssmistica.burgerIconContainer,
@@ -192,7 +193,7 @@ const _e = (param)=>/* @__PURE__ */ {
192
193
  })
193
194
  ]
194
195
  });
195
- }, ke = 300, N = (param)=>{
196
+ }, Ee = 300, f = (param)=>{
196
197
  let { children: n , topFixed: o , withBorder: t , isMenuOpen: r , isInverse: a , dataAttributes: c , isBottomRow: d = !1 } = param;
197
198
  const { isDarkMode: s } = (0, _hooks.useTheme)();
198
199
  return /* @__PURE__ */ (0, _jsxruntime.jsx)("header", _object_spread_props(_object_spread({
@@ -210,7 +211,7 @@ const _e = (param)=>/* @__PURE__ */ {
210
211
  }, (0, _dom.getPrefixedDataAttributes)(c)), {
211
212
  children: n
212
213
  }));
213
- }, Ee = 136, Ge = 24, f = (param)=>{
214
+ }, Ge = 136, ye = 24, N = (param)=>{
214
215
  let { right: n , children: o } = param;
215
216
  const { isTabletOrSmaller: t } = (0, _hooks.useScreenSize)();
216
217
  return /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
@@ -220,13 +221,13 @@ const _e = (param)=>/* @__PURE__ */ {
220
221
  n && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
221
222
  className: _navigationbarcssmistica.navigationBarContentRight,
222
223
  style: {
223
- marginLeft: t ? Ge : Ee
224
+ marginLeft: t ? ye : Ge
224
225
  },
225
226
  children: n
226
227
  })
227
228
  ]
228
229
  });
229
- }, sn = (param)=>{
230
+ }, dn = (param)=>{
230
231
  let { sections: n , selectedIndex: o , right: t , isInverse: r = !1 , topFixed: a = !0 , withBorder: c = !0 , burgerMenuExtra: d , logo: s , large: p = !1 } = param;
231
232
  const { texts: h , isDarkMode: q } = (0, _hooks.useTheme)(), [l, x] = _react.useState(!1), [_, v] = _react.useState("closed"), k = (0, _hooks.useAriaId)(), J = q ? 1 : 0.2, { isTabletOrSmaller: E } = (0, _hooks.useScreenSize)(), G = (0, _modalcontextprovider.useSetModalState)();
232
233
  if (s = s !== null && s !== void 0 ? s : /* @__PURE__ */ (0, _jsxruntime.jsx)(_logo.Logo, {
@@ -249,7 +250,7 @@ const _e = (param)=>/* @__PURE__ */ {
249
250
  children: [
250
251
  /* @__PURE__ */ (0, _jsxruntime.jsx)(_themevariantcontext.ThemeVariant, {
251
252
  isInverse: r,
252
- children: /* @__PURE__ */ (0, _jsxruntime.jsx)(N, {
253
+ children: /* @__PURE__ */ (0, _jsxruntime.jsx)(f, {
253
254
  topFixed: a,
254
255
  withBorder: c,
255
256
  isMenuOpen: l,
@@ -258,7 +259,7 @@ const _e = (param)=>/* @__PURE__ */ {
258
259
  "component-name": "MainNavigationBar"
259
260
  },
260
261
  children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_responsivelayout.default, {
261
- children: /* @__PURE__ */ (0, _jsxruntime.jsx)(f, {
262
+ children: /* @__PURE__ */ (0, _jsxruntime.jsx)(N, {
262
263
  right: t,
263
264
  children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_inline.default, {
264
265
  space: 24,
@@ -270,7 +271,7 @@ const _e = (param)=>/* @__PURE__ */ {
270
271
  "aria-expanded": l,
271
272
  "aria-controls": k,
272
273
  onPress: l ? b : I,
273
- children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_e, {
274
+ children: /* @__PURE__ */ (0, _jsxruntime.jsx)(ke, {
274
275
  isOpen: l
275
276
  })
276
277
  }),
@@ -307,7 +308,7 @@ const _e = (param)=>/* @__PURE__ */ {
307
308
  v("closed");
308
309
  },
309
310
  in: l,
310
- timeout: ke,
311
+ timeout: (0, _platform.isRunningAcceptanceTest)() ? 0 : Ee,
311
312
  unmountOnExit: !0,
312
313
  children: (K)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
313
314
  children: /* @__PURE__ */ (0, _jsxruntime.jsx)("nav", {
@@ -366,7 +367,7 @@ const _e = (param)=>/* @__PURE__ */ {
366
367
  return /* @__PURE__ */ (0, _jsxruntime.jsxs)(_themevariantcontext.ThemeVariant, {
367
368
  isInverse: r,
368
369
  children: [
369
- /* @__PURE__ */ (0, _jsxruntime.jsx)(N, {
370
+ /* @__PURE__ */ (0, _jsxruntime.jsx)(f, {
370
371
  topFixed: a,
371
372
  withBorder: c && !B,
372
373
  isMenuOpen: l,
@@ -375,7 +376,7 @@ const _e = (param)=>/* @__PURE__ */ {
375
376
  "component-name": "MainNavigationBar"
376
377
  },
377
378
  children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_responsivelayout.default, {
378
- children: /* @__PURE__ */ (0, _jsxruntime.jsx)(f, {
379
+ children: /* @__PURE__ */ (0, _jsxruntime.jsx)(N, {
379
380
  right: t,
380
381
  children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_inline.default, {
381
382
  space: 48,
@@ -391,7 +392,7 @@ const _e = (param)=>/* @__PURE__ */ {
391
392
  })
392
393
  })
393
394
  }),
394
- B && /* @__PURE__ */ (0, _jsxruntime.jsx)(N, {
395
+ B && /* @__PURE__ */ (0, _jsxruntime.jsx)(f, {
395
396
  topFixed: a,
396
397
  withBorder: c,
397
398
  isBottomRow: !0,
@@ -401,7 +402,7 @@ const _e = (param)=>/* @__PURE__ */ {
401
402
  "component-name": "MainNavigationBar"
402
403
  },
403
404
  children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_responsivelayout.default, {
404
- children: /* @__PURE__ */ (0, _jsxruntime.jsx)(f, {
405
+ children: /* @__PURE__ */ (0, _jsxruntime.jsx)(N, {
405
406
  children: y()
406
407
  })
407
408
  })
@@ -411,9 +412,9 @@ const _e = (param)=>/* @__PURE__ */ {
411
412
  })
412
413
  ]
413
414
  });
414
- }, ln = (param)=>{
415
+ }, mn = (param)=>{
415
416
  let { onBack: n , title: o , right: t , isInverse: r = !1 , topFixed: a = !0 , paddingX: c = 0 , withBorder: d = !0 } = param;
416
- const { texts: s } = (0, _hooks.useTheme)(), p = /* @__PURE__ */ (0, _jsxruntime.jsx)(f, {
417
+ const { texts: s } = (0, _hooks.useTheme)(), p = /* @__PURE__ */ (0, _jsxruntime.jsx)(N, {
417
418
  right: t,
418
419
  children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_inline.default, {
419
420
  space: 24,
@@ -438,7 +439,7 @@ const _e = (param)=>/* @__PURE__ */ {
438
439
  return /* @__PURE__ */ (0, _jsxruntime.jsxs)(_themevariantcontext.ThemeVariant, {
439
440
  isInverse: r,
440
441
  children: [
441
- /* @__PURE__ */ (0, _jsxruntime.jsx)(N, {
442
+ /* @__PURE__ */ (0, _jsxruntime.jsx)(f, {
442
443
  topFixed: a,
443
444
  withBorder: d,
444
445
  isInverse: r,
@@ -462,7 +463,7 @@ const _e = (param)=>/* @__PURE__ */ {
462
463
  })
463
464
  ]
464
465
  });
465
- }, dn = (param)=>{
466
+ }, un = (param)=>{
466
467
  let { logo: n , right: o , isInverse: t = !1 , topFixed: r = !0 , withBorder: a = !0 } = param;
467
468
  const { isTabletOrSmaller: c } = (0, _hooks.useScreenSize)();
468
469
  return n = n !== null && n !== void 0 ? n : /* @__PURE__ */ (0, _jsxruntime.jsx)(_logo.Logo, {
@@ -470,7 +471,7 @@ const _e = (param)=>/* @__PURE__ */ {
470
471
  }), /* @__PURE__ */ (0, _jsxruntime.jsxs)(_themevariantcontext.ThemeVariant, {
471
472
  isInverse: t,
472
473
  children: [
473
- /* @__PURE__ */ (0, _jsxruntime.jsx)(N, {
474
+ /* @__PURE__ */ (0, _jsxruntime.jsx)(f, {
474
475
  topFixed: r,
475
476
  withBorder: a,
476
477
  isInverse: t,
@@ -480,7 +481,7 @@ const _e = (param)=>/* @__PURE__ */ {
480
481
  children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_responsivelayout.default, {
481
482
  children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_gridlayout.default, {
482
483
  template: "10",
483
- children: /* @__PURE__ */ (0, _jsxruntime.jsx)(f, {
484
+ children: /* @__PURE__ */ (0, _jsxruntime.jsx)(N, {
484
485
  right: o,
485
486
  children: n
486
487
  })
@@ -492,7 +493,7 @@ const _e = (param)=>/* @__PURE__ */ {
492
493
  })
493
494
  ]
494
495
  });
495
- }, mn = (param)=>/* @__PURE__ */ {
496
+ }, pn = (param)=>/* @__PURE__ */ {
496
497
  let { children: n } = param;
497
498
  return (0, _jsxruntime.jsx)("div", {
498
499
  className: _navigationbarcssmistica.lineHeightFix,
@@ -503,7 +504,7 @@ const _e = (param)=>/* @__PURE__ */ {
503
504
  children: n
504
505
  })
505
506
  });
506
- }, un = (_param)=>{
507
+ }, hn = (_param)=>{
507
508
  var { children: n } = _param, o = _object_without_properties(_param, [
508
509
  "children"
509
510
  ]);
@@ -8,4 +8,4 @@ Object.defineProperty(exports, "PACKAGE_VERSION", {
8
8
  return o;
9
9
  }
10
10
  });
11
- const o = "14.28.1";
11
+ const o = "14.29.0";
@@ -10,31 +10,31 @@ function _export(target, all) {
10
10
  }
11
11
  _export(exports, {
12
12
  TRANSITION_TIME_IN_MS: function() {
13
- return n;
13
+ return b;
14
14
  },
15
15
  button: function() {
16
- return b;
16
+ return f;
17
17
  },
18
- buttonCritical: function() {
19
- return v;
18
+ content: function() {
19
+ return _;
20
20
  },
21
- buttonInfo: function() {
22
- return o;
21
+ dismissButton: function() {
22
+ return r;
23
23
  },
24
- content: function() {
25
- return t;
24
+ dismissIcon: function() {
25
+ return y;
26
26
  },
27
27
  longButton: function() {
28
- return f;
28
+ return a;
29
29
  },
30
30
  snackbar: function() {
31
- return _;
31
+ return o;
32
32
  },
33
33
  snackbarOpen: function() {
34
- return p;
34
+ return t;
35
35
  },
36
36
  wrapper: function() {
37
- return y;
37
+ return p;
38
38
  },
39
39
  wrapperCritical: function() {
40
40
  return e;
@@ -48,4 +48,7 @@ _export(exports, {
48
48
  });
49
49
  require("./sprinkles.css.ts.vanilla.css-mistica.js");
50
50
  require("./snackbar.css.ts.vanilla.css-mistica.js");
51
- var n = 300, b = "o7bjb09", v = "_1y2v1nf1x", o = "_1y2v1nf2a", t = "_1y2v1nfb6 _1y2v1nfbi", f = "o7bjb0a", _ = "o7bjb01 _1y2v1nfbt _1y2v1nfb6 _1y2v1nfbf", p = "o7bjb02", y = "o7bjb04 _1y2v1nfb2 _1y2v1nfdz", e = "_1y2v1nf4g", i = "_1y2v1nf4h", j = "o7bjb07";
51
+ var b = 300, f = "o7bjb0a", _ = "_1y2v1nfb6 _1y2v1nfbi", r = {
52
+ centered: "o7bjb0e _1y2v1nfb6 _1y2v1nfb1 _1y2v1nfbl _1y2v1nfbf _1y2v1nff9",
53
+ topRight: "_1y2v1nfb6 _1y2v1nfb1 _1y2v1nfbl _1y2v1nfbf _1y2v1nff9 _1y2v1nfef"
54
+ }, y = "o7bjb0h _1y2v1nfc3 _1y2v1nfcj _1y2v1nfb6 _1y2v1nfbl _1y2v1nfbf _1y2v1nfdp", a = "o7bjb0b", o = "o7bjb01 _1y2v1nfbt _1y2v1nfb6 _1y2v1nfbf", t = "o7bjb02", p = "o7bjb04 _1y2v1nfb2 _1y2v1nfdz", e = "_1y2v1nf4g", i = "_1y2v1nf4h", j = "o7bjb07";
@@ -6,7 +6,8 @@ export declare const wrapperCritical: string;
6
6
  export declare const wrapperInfo: string;
7
7
  export declare const wrapperOpen: string;
8
8
  export declare const content: string;
9
+ export declare const textContainer: string;
9
10
  export declare const button: string;
10
11
  export declare const longButton: string;
11
- export declare const buttonInfo: string;
12
- export declare const buttonCritical: string;
12
+ export declare const dismissButton: Record<"centered" | "topRight", string>;
13
+ export declare const dismissIcon: string;
@@ -1,14 +1,18 @@
1
1
  import * as React from 'react';
2
2
  import type { DataAttributes } from './utils/types';
3
3
  type SnackbarType = 'INFORMATIVE' | 'CRITICAL';
4
+ type SnackbarCloseHandler = (result: {
5
+ action: 'DISMISS' | 'TIMEOUT' | 'BUTTON' | 'CONSECUTIVE';
6
+ }) => unknown;
4
7
  type Props = {
5
8
  buttonText?: string;
6
9
  duration?: number;
7
10
  message: string;
8
- onClose?: () => unknown;
11
+ onClose?: SnackbarCloseHandler;
9
12
  type?: SnackbarType;
10
13
  children?: void;
11
14
  dataAttributes?: DataAttributes;
15
+ withDismiss?: boolean;
12
16
  };
13
17
  declare const Snackbar: React.FC<Props>;
14
18
  export default Snackbar;
package/dist/snackbar.js CHANGED
@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
5
5
  Object.defineProperty(exports, "default", {
6
6
  enumerable: true,
7
7
  get: function() {
8
- return re;
8
+ return fe;
9
9
  }
10
10
  });
11
11
  const _jsxruntime = require("react/jsx-runtime");
@@ -20,6 +20,8 @@ const _sprinklescssmistica = require("./sprinkles.css-mistica.js");
20
20
  const _skincontractcssmistica = require("./skins/skin-contract.css-mistica.js");
21
21
  const _dom = require("./utils/dom.js");
22
22
  const _portal = require("./portal.js");
23
+ const _iconcloseregular = /*#__PURE__*/ _interop_require_default(require("./generated/mistica-icons/icon-close-regular.js"));
24
+ const _iconbutton = /*#__PURE__*/ _interop_require_default(require("./icon-button.js"));
23
25
  function _interop_require_default(obj) {
24
26
  return obj && obj.__esModule ? obj : {
25
27
  default: obj
@@ -116,97 +118,150 @@ function _object_spread_props(target, source) {
116
118
  }
117
119
  return target;
118
120
  }
119
- const z = (param)=>{
120
- let { message: a , buttonText: e , duration: t = e ? 1e4 : 5e3 , onClose: n = ()=>{} , type: o = "INFORMATIVE" , dataAttributes: c } = param;
121
- const [i, u] = _react.useState(!1), { width: d , ref: h } = (0, _hooks.useElementDimensions)(), { isDesktopOrBigger: I } = (0, _hooks.useScreenSize)(), m = d > (I ? 160 : 128), f = _react.useCallback(()=>{
122
- u(!1), setTimeout(()=>{
123
- n();
121
+ const q = 5e3, G = 1e4, J = (param)=>{
122
+ let { message: l , buttonText: o , duration: r , onClose: n , type: c , withDismiss: m = !1 , dataAttributes: f } = param;
123
+ const { texts: d } = (0, _hooks.useTheme)(), [i, e] = _react.useState(!1), { width: N , ref: v } = (0, _hooks.useElementDimensions)(), { isDesktopOrBigger: B } = (0, _hooks.useScreenSize)(), s = N > (B ? 160 : 128), T = r === 1 / 0 && !o || m, u = _react.useCallback((h)=>{
124
+ e(!1), setTimeout(()=>{
125
+ n == null || n(h);
124
126
  }, _snackbarcssmistica.TRANSITION_TIME_IN_MS);
125
127
  }, [
126
128
  n
127
129
  ]);
128
130
  return _react.useEffect(()=>{
129
- const g = setTimeout(()=>{
130
- u(!0);
131
- }, 50), b = setTimeout(f, t);
131
+ const h = setTimeout(()=>{
132
+ e(!0);
133
+ }, 50), O = setTimeout(()=>{
134
+ u({
135
+ action: "TIMEOUT"
136
+ });
137
+ }, r);
132
138
  return ()=>{
133
- clearTimeout(g), clearTimeout(b);
139
+ clearTimeout(h), clearTimeout(O);
134
140
  };
135
141
  }, [
136
- f,
137
- t
142
+ u,
143
+ r
138
144
  ]), /* @__PURE__ */ (0, _jsxruntime.jsx)(_portal.Portal, {
139
145
  children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
140
146
  className: (0, _classnames.default)(_snackbarcssmistica.snackbar, {
141
147
  [_snackbarcssmistica.snackbarOpen]: i
142
148
  }),
143
- children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({
149
+ children: /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", _object_spread_props(_object_spread({
144
150
  role: "alert",
145
- className: (0, _classnames.default)(_snackbarcssmistica.wrapper, o === "CRITICAL" ? _snackbarcssmistica.wrapperCritical : _snackbarcssmistica.wrapperInfo, {
151
+ className: (0, _classnames.default)(_snackbarcssmistica.wrapper, c === "CRITICAL" ? _snackbarcssmistica.wrapperCritical : _snackbarcssmistica.wrapperInfo, {
146
152
  [_snackbarcssmistica.wrapperOpen]: i
147
153
  })
148
- }, (0, _dom.getPrefixedDataAttributes)(c, "SnackBar")), {
149
- children: /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
150
- className: (0, _classnames.default)(_snackbarcssmistica.content, (0, _sprinklescssmistica.sprinkles)({
151
- flexDirection: m ? "column" : "row",
152
- alignItems: m ? void 0 : "center"
153
- })),
154
- children: [
155
- /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
156
- regular: !0,
157
- color: _skincontractcssmistica.vars.colors.textPrimaryInverse,
158
- children: a
159
- }),
160
- e && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
161
- className: (0, _classnames.default)(_snackbarcssmistica.button, o === "CRITICAL" ? _snackbarcssmistica.buttonCritical : _snackbarcssmistica.buttonInfo, {
162
- [_snackbarcssmistica.longButton]: m
154
+ }, (0, _dom.getPrefixedDataAttributes)(f, "SnackBar")), {
155
+ children: [
156
+ /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
157
+ className: (0, _classnames.default)(_snackbarcssmistica.content, (0, _sprinklescssmistica.sprinkles)({
158
+ flexDirection: s ? "column" : "row",
159
+ alignItems: s ? void 0 : "center"
160
+ })),
161
+ style: T && !s ? {
162
+ paddingRight: 32
163
+ } : void 0,
164
+ children: [
165
+ /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
166
+ style: T && s ? {
167
+ paddingRight: 32
168
+ } : void 0,
169
+ children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
170
+ regular: !0,
171
+ color: _skincontractcssmistica.vars.colors.textPrimaryInverse,
172
+ children: l
173
+ })
163
174
  }),
164
- children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, {
165
- className: (0, _sprinklescssmistica.sprinkles)({
166
- border: "none",
167
- padding: 0,
168
- background: "transparent",
169
- color: "inherit"
175
+ o && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
176
+ className: (0, _classnames.default)(_snackbarcssmistica.button, {
177
+ [_snackbarcssmistica.longButton]: s
170
178
  }),
171
- style: {
172
- lineHeight: "inherit",
173
- fontWeight: "inherit"
174
- },
175
- ref: h,
176
- onPress: f,
177
- children: e
179
+ children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, {
180
+ className: (0, _sprinklescssmistica.sprinkles)({
181
+ paddingY: 4,
182
+ paddingX: 8,
183
+ border: "none",
184
+ padding: 0,
185
+ background: "transparent"
186
+ }),
187
+ ref: v,
188
+ onPress: ()=>{
189
+ u({
190
+ action: "BUTTON"
191
+ });
192
+ },
193
+ children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
194
+ medium: !0,
195
+ forceMobileSizes: !0,
196
+ truncate: !0,
197
+ color: c === "CRITICAL" ? _skincontractcssmistica.vars.colors.textPrimaryInverse : _skincontractcssmistica.vars.colors.textLinkSnackbar,
198
+ children: o
199
+ })
200
+ })
201
+ })
202
+ ]
203
+ }),
204
+ T ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconbutton.default, {
205
+ size: 32,
206
+ onPress: ()=>{
207
+ u({
208
+ action: "DISMISS"
209
+ });
210
+ },
211
+ "aria-label": d.closeButtonLabel,
212
+ className: _snackbarcssmistica.dismissButton[s ? "topRight" : "centered"],
213
+ style: {
214
+ display: "flex"
215
+ },
216
+ children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
217
+ className: _snackbarcssmistica.dismissIcon,
218
+ children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconcloseregular.default, {
219
+ color: _skincontractcssmistica.vars.colors.inverse,
220
+ size: 20
178
221
  })
179
222
  })
180
- ]
181
- })
223
+ }) : null
224
+ ]
182
225
  }))
183
226
  })
184
227
  });
185
- }, H = (param)=>{
186
- let { message: a , buttonText: e , duration: t = e ? 1e4 : 5e3 , onClose: n = ()=>{} , type: o = "INFORMATIVE" } = param;
187
- const c = (0, _webviewbridge.isWebViewBridgeAvailable)(), i = _react.useRef(n);
228
+ }, K = (param)=>{
229
+ let { message: l , buttonText: o , duration: r , onClose: n = ()=>{} , type: c = "INFORMATIVE" , withDismiss: m } = param;
230
+ const f = o ? G : q;
231
+ r = Math.max(r !== null && r !== void 0 ? r : f, f);
232
+ const d = (0, _webviewbridge.isWebViewBridgeAvailable)(), i = _react.useRef(n);
188
233
  return _react.useEffect(()=>{
189
234
  i.current = n;
190
235
  }, [
191
236
  n
192
237
  ]), _react.useEffect(()=>{
193
- c && (0, _webviewbridge.nativeMessage)({
194
- message: a,
195
- duration: t,
196
- buttonText: e,
197
- type: o
198
- }).then(i.current);
238
+ d && (0, _webviewbridge.nativeMessage)({
239
+ message: l,
240
+ // @ts-expect-error duration can be 'PERSISTENT' in new webview-bridge lib versions, and old apps will ignore it
241
+ duration: r === 1 / 0 ? "PERSISTENT" : void 0,
242
+ buttonText: o,
243
+ type: c,
244
+ withDismiss: m
245
+ }).then((e)=>{
246
+ !e || typeof e != "object" || !("action" in e) || typeof e.action != "string" || e.action !== "DISMISS" && e.action !== "TIMEOUT" && e.action !== "BUTTON" ? i.current({
247
+ action: "DISMISS"
248
+ }) : i.current({
249
+ action: e.action
250
+ });
251
+ });
199
252
  }, [
200
- e,
201
- t,
202
- a,
253
+ o,
254
+ r,
255
+ l,
256
+ d,
203
257
  c,
204
- o
205
- ]), c ? null : /* @__PURE__ */ (0, _jsxruntime.jsx)(z, {
206
- message: a,
207
- duration: t,
208
- buttonText: e,
209
- type: o,
210
- onClose: i.current
258
+ m
259
+ ]), d ? null : /* @__PURE__ */ (0, _jsxruntime.jsx)(J, {
260
+ message: l,
261
+ duration: r,
262
+ buttonText: o,
263
+ type: c,
264
+ onClose: i.current,
265
+ withDismiss: m
211
266
  });
212
- }, re = H;
267
+ }, fe = K;
package/dist/theme.d.ts CHANGED
@@ -41,6 +41,12 @@ declare const TEXTS_ES: {
41
41
  progressBarCompletedLabel: string;
42
42
  progressBarStepLabel: string;
43
43
  pinFieldInputLabel: string;
44
+ counterRemoveLabel: string;
45
+ counterIncreaseLabel: string;
46
+ counterDecreaseLabel: string;
47
+ counterQuantity: string;
48
+ counterMinValue: string;
49
+ counterMaxValue: string;
44
50
  };
45
51
  export declare const getTexts: (locale: Locale) => typeof TEXTS_ES;
46
52
  export declare const NAVBAR_HEIGHT_MOBILE = 56;