@telefonica/mistica 14.7.1 → 14.9.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 (174) hide show
  1. package/css/mistica.css +1 -1
  2. package/dist/avatar.css-mistica.js +1 -1
  3. package/dist/badge.css-mistica.js +1 -1
  4. package/dist/boxed.js +17 -18
  5. package/dist/button-group.css-mistica.js +3 -3
  6. package/dist/button-layout.css-mistica.js +8 -8
  7. package/dist/button.css-mistica.js +19 -19
  8. package/dist/callout.css-mistica.js +1 -1
  9. package/dist/card.css-mistica.js +11 -8
  10. package/dist/card.css.d.ts +4 -1
  11. package/dist/card.d.ts +29 -7
  12. package/dist/card.js +423 -291
  13. package/dist/carousel.css-mistica.js +13 -13
  14. package/dist/checkbox.css-mistica.js +10 -10
  15. package/dist/chip.css-mistica.js +3 -3
  16. package/dist/circle.css-mistica.js +2 -2
  17. package/dist/circle.d.ts +1 -0
  18. package/dist/circle.js +9 -6
  19. package/dist/credit-card-number-field.css-mistica.js +3 -3
  20. package/dist/cvv-field.css-mistica.js +3 -3
  21. package/dist/dialog.css-mistica.js +6 -6
  22. package/dist/double-field.css-mistica.js +4 -4
  23. package/dist/empty-state-card.css-mistica.js +2 -2
  24. package/dist/empty-state.css-mistica.js +2 -2
  25. package/dist/feedback.css-mistica.js +5 -5
  26. package/dist/fixed-footer-layout.css-mistica.js +2 -2
  27. package/dist/fixed-footer-layout.js +16 -16
  28. package/dist/form.d.ts +1 -1
  29. package/dist/generated/mistica-icons/icon-chevron-left-light.js +11 -11
  30. package/dist/generated/mistica-icons/icon-chevron-left-regular.js +11 -11
  31. package/dist/generated/mistica-icons/icon-chevron-right-light.js +2 -2
  32. package/dist/generated/mistica-icons/icon-chevron-right-regular.js +2 -2
  33. package/dist/hero.css-mistica.js +3 -3
  34. package/dist/highlighted-card.css-mistica.js +4 -4
  35. package/dist/hooks.d.ts +1 -0
  36. package/dist/hooks.js +11 -10
  37. package/dist/horizontal-scroll.css-mistica.js +18 -0
  38. package/dist/horizontal-scroll.css.d.ts +2 -0
  39. package/dist/horizontal-scroll.css.ts.vanilla.js +9 -0
  40. package/dist/horizontal-scroll.d.ts +7 -0
  41. package/dist/horizontal-scroll.js +66 -0
  42. package/dist/icon-button.css-mistica.js +1 -1
  43. package/dist/icon-button.js +24 -20
  44. package/dist/image.css-mistica.js +1 -1
  45. package/dist/image.d.ts +6 -0
  46. package/dist/image.js +67 -52
  47. package/dist/index.d.ts +2 -0
  48. package/dist/index.js +2 -0
  49. package/dist/list.css-mistica.js +8 -8
  50. package/dist/list.js +56 -56
  51. package/dist/loading-bar.css-mistica.js +6 -6
  52. package/dist/maybe-dismissable.css-mistica.js +3 -3
  53. package/dist/menu.css-mistica.js +2 -2
  54. package/dist/navigation-bar.css-mistica.js +14 -14
  55. package/dist/navigation-breadcrumbs.css-mistica.js +2 -2
  56. package/dist/package-version.js +1 -1
  57. package/dist/password-field.css-mistica.js +2 -2
  58. package/dist/popover.css-mistica.js +9 -9
  59. package/dist/progress-bar.css-mistica.js +1 -1
  60. package/dist/radio-button.css-mistica.js +9 -9
  61. package/dist/responsive-layout.css-mistica.js +6 -6
  62. package/dist/screen-reader-only.css-mistica.js +1 -1
  63. package/dist/select.css-mistica.js +12 -12
  64. package/dist/skeletons.css-mistica.js +3 -3
  65. package/dist/skins/blau.js +5 -3
  66. package/dist/skins/movistar-legacy.js +2 -0
  67. package/dist/skins/movistar.js +3 -1
  68. package/dist/skins/o2-classic.js +2 -0
  69. package/dist/skins/o2.js +3 -1
  70. package/dist/skins/skin-contract.css-mistica.js +202 -200
  71. package/dist/skins/skin-contract.css.d.ts +2 -0
  72. package/dist/skins/telefonica.js +4 -2
  73. package/dist/skins/{types.d.ts → types/colors.d.ts} +1 -47
  74. package/dist/skins/types/index.d.ts +48 -0
  75. package/dist/skins/vivo.js +3 -1
  76. package/dist/snackbar.css-mistica.js +5 -5
  77. package/dist/spinner.css-mistica.js +1 -1
  78. package/dist/spinner.js +40 -60
  79. package/dist/sprinkles.css-mistica.js +329 -323
  80. package/dist/stepper.css-mistica.js +8 -8
  81. package/dist/switch-component.css-mistica.js +22 -22
  82. package/dist/tabs.css-mistica.js +15 -15
  83. package/dist/tabs.js +14 -15
  84. package/dist/tag.css-mistica.js +2 -2
  85. package/dist/text-field-base.css-mistica.js +5 -5
  86. package/dist/text-field-components.css-mistica.js +9 -9
  87. package/dist/text-link.css-mistica.js +5 -5
  88. package/dist/tooltip.css-mistica.js +7 -7
  89. package/dist/touchable.css-mistica.js +1 -1
  90. package/dist/utils/aspect-ratio-support.css-mistica.js +2 -2
  91. package/dist/video.css-mistica.js +1 -1
  92. package/dist/video.d.ts +11 -4
  93. package/dist/video.js +116 -37
  94. package/dist-es/avatar.css-mistica.js +1 -1
  95. package/dist-es/badge.css-mistica.js +1 -1
  96. package/dist-es/boxed.js +27 -28
  97. package/dist-es/button-group.css-mistica.js +2 -2
  98. package/dist-es/button-layout.css-mistica.js +6 -6
  99. package/dist-es/button.css-mistica.js +9 -9
  100. package/dist-es/callout.css-mistica.js +1 -1
  101. package/dist-es/card.css-mistica.js +2 -2
  102. package/dist-es/card.js +464 -332
  103. package/dist-es/carousel.css-mistica.js +2 -2
  104. package/dist-es/checkbox.css-mistica.js +6 -6
  105. package/dist-es/chip.css-mistica.js +3 -3
  106. package/dist-es/circle.css-mistica.js +2 -2
  107. package/dist-es/circle.js +12 -9
  108. package/dist-es/credit-card-number-field.css-mistica.js +3 -3
  109. package/dist-es/cvv-field.css-mistica.js +2 -2
  110. package/dist-es/dialog.css-mistica.js +5 -5
  111. package/dist-es/double-field.css-mistica.js +4 -4
  112. package/dist-es/empty-state-card.css-mistica.js +2 -2
  113. package/dist-es/empty-state.css-mistica.js +2 -2
  114. package/dist-es/feedback.css-mistica.js +2 -2
  115. package/dist-es/fixed-footer-layout.css-mistica.js +2 -2
  116. package/dist-es/fixed-footer-layout.js +30 -30
  117. package/dist-es/generated/mistica-icons/icon-chevron-left-light.js +12 -12
  118. package/dist-es/generated/mistica-icons/icon-chevron-left-regular.js +11 -11
  119. package/dist-es/generated/mistica-icons/icon-chevron-right-light.js +2 -2
  120. package/dist-es/generated/mistica-icons/icon-chevron-right-regular.js +2 -2
  121. package/dist-es/hero.css-mistica.js +2 -2
  122. package/dist-es/highlighted-card.css-mistica.js +4 -4
  123. package/dist-es/hooks.js +8 -8
  124. package/dist-es/horizontal-scroll.css-mistica.js +5 -0
  125. package/dist-es/horizontal-scroll.css.ts.vanilla.js +2 -0
  126. package/dist-es/horizontal-scroll.js +15 -0
  127. package/dist-es/icon-button.css-mistica.js +1 -1
  128. package/dist-es/icon-button.js +27 -23
  129. package/dist-es/image.css-mistica.js +1 -1
  130. package/dist-es/image.js +82 -69
  131. package/dist-es/index.js +1708 -1707
  132. package/dist-es/list.css-mistica.js +2 -2
  133. package/dist-es/list.js +75 -75
  134. package/dist-es/loading-bar.css-mistica.js +2 -2
  135. package/dist-es/maybe-dismissable.css-mistica.js +2 -2
  136. package/dist-es/menu.css-mistica.js +2 -2
  137. package/dist-es/navigation-bar.css-mistica.js +11 -11
  138. package/dist-es/navigation-breadcrumbs.css-mistica.js +2 -2
  139. package/dist-es/package-version.js +1 -1
  140. package/dist-es/password-field.css-mistica.js +2 -2
  141. package/dist-es/popover.css-mistica.js +2 -2
  142. package/dist-es/progress-bar.css-mistica.js +1 -1
  143. package/dist-es/radio-button.css-mistica.js +6 -6
  144. package/dist-es/responsive-layout.css-mistica.js +5 -5
  145. package/dist-es/screen-reader-only.css-mistica.js +1 -1
  146. package/dist-es/select.css-mistica.js +9 -9
  147. package/dist-es/skeletons.css-mistica.js +2 -2
  148. package/dist-es/skins/blau.js +5 -3
  149. package/dist-es/skins/movistar-legacy.js +2 -0
  150. package/dist-es/skins/movistar.js +3 -1
  151. package/dist-es/skins/o2-classic.js +2 -0
  152. package/dist-es/skins/o2.js +3 -1
  153. package/dist-es/skins/skin-contract.css-mistica.js +202 -200
  154. package/dist-es/skins/telefonica.js +4 -2
  155. package/dist-es/skins/vivo.js +3 -1
  156. package/dist-es/snackbar.css-mistica.js +2 -2
  157. package/dist-es/spinner.css-mistica.js +1 -1
  158. package/dist-es/spinner.js +68 -88
  159. package/dist-es/sprinkles.css-mistica.js +329 -323
  160. package/dist-es/stepper.css-mistica.js +2 -2
  161. package/dist-es/style.css +1 -1
  162. package/dist-es/switch-component.css-mistica.js +19 -19
  163. package/dist-es/tabs.css-mistica.js +10 -10
  164. package/dist-es/tabs.js +22 -23
  165. package/dist-es/tag.css-mistica.js +2 -2
  166. package/dist-es/text-field-base.css-mistica.js +2 -2
  167. package/dist-es/text-field-components.css-mistica.js +2 -2
  168. package/dist-es/text-link.css-mistica.js +5 -5
  169. package/dist-es/tooltip.css-mistica.js +3 -3
  170. package/dist-es/touchable.css-mistica.js +1 -1
  171. package/dist-es/utils/aspect-ratio-support.css-mistica.js +2 -2
  172. package/dist-es/video.css-mistica.js +1 -1
  173. package/dist-es/video.js +127 -48
  174. package/package.json +2 -2
@@ -0,0 +1,18 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", {
3
+ value: true
4
+ });
5
+ function _export(target, all) {
6
+ for(var name in all)Object.defineProperty(target, name, {
7
+ enumerable: true,
8
+ get: all[name]
9
+ });
10
+ }
11
+ _export(exports, {
12
+ noScrollbar: ()=>m,
13
+ scroll: ()=>v
14
+ });
15
+ require("./sprinkles.css.ts.vanilla.js");
16
+ require("./responsive-layout.css.ts.vanilla.js");
17
+ require("./horizontal-scroll.css.ts.vanilla.js");
18
+ var m = "_1gl3gmv2", v = "_1gl3gmv1 _1y2v1nf5q";
@@ -0,0 +1,2 @@
1
+ export declare const scroll: string;
2
+ export declare const noScrollbar: string;
@@ -0,0 +1,9 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", {
3
+ value: true
4
+ });
5
+ Object.defineProperty(exports, "default", {
6
+ enumerable: true,
7
+ get: ()=>l
8
+ });
9
+ const l = "";
@@ -0,0 +1,7 @@
1
+ import * as React from 'react';
2
+ type Props = {
3
+ children: React.ReactNode;
4
+ noScrollbar?: boolean;
5
+ };
6
+ declare const HorizontalScroll: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
7
+ export default HorizontalScroll;
@@ -0,0 +1,66 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", {
3
+ value: true
4
+ });
5
+ Object.defineProperty(exports, "default", {
6
+ enumerable: true,
7
+ get: ()=>n
8
+ });
9
+ const _classnames = /*#__PURE__*/ _interopRequireDefault(require("classnames"));
10
+ const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
11
+ const _horizontalScrollCssMisticaJs = require("./horizontal-scroll.css-mistica.js");
12
+ const _jsxRuntimeJs = require("./_virtual/jsx-runtime.js");
13
+ function _interopRequireDefault(obj) {
14
+ return obj && obj.__esModule ? obj : {
15
+ default: obj
16
+ };
17
+ }
18
+ function _getRequireWildcardCache(nodeInterop) {
19
+ if (typeof WeakMap !== "function") return null;
20
+ var cacheBabelInterop = new WeakMap();
21
+ var cacheNodeInterop = new WeakMap();
22
+ return (_getRequireWildcardCache = function(nodeInterop) {
23
+ return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
24
+ })(nodeInterop);
25
+ }
26
+ function _interopRequireWildcard(obj, nodeInterop) {
27
+ if (!nodeInterop && obj && obj.__esModule) {
28
+ return obj;
29
+ }
30
+ if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
31
+ return {
32
+ default: obj
33
+ };
34
+ }
35
+ var cache = _getRequireWildcardCache(nodeInterop);
36
+ if (cache && cache.has(obj)) {
37
+ return cache.get(obj);
38
+ }
39
+ var newObj = {};
40
+ var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
41
+ for(var key in obj){
42
+ if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
43
+ var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
44
+ if (desc && (desc.get || desc.set)) {
45
+ Object.defineProperty(newObj, key, desc);
46
+ } else {
47
+ newObj[key] = obj[key];
48
+ }
49
+ }
50
+ }
51
+ newObj.default = obj;
52
+ if (cache) {
53
+ cache.set(obj, newObj);
54
+ }
55
+ return newObj;
56
+ }
57
+ const n = /*#__PURE__*/ _react.forwardRef((param, a)=>/* @__PURE__ */ {
58
+ let { children: r , noScrollbar: o } = param;
59
+ return (0, _jsxRuntimeJs.jsx)("div", {
60
+ className: (0, _classnames.default)(_horizontalScrollCssMisticaJs.scroll, {
61
+ [_horizontalScrollCssMisticaJs.noScrollbar]: o
62
+ }),
63
+ ref: a,
64
+ children: r
65
+ });
66
+ });
@@ -8,4 +8,4 @@ Object.defineProperty(exports, "base", {
8
8
  });
9
9
  require("./sprinkles.css.ts.vanilla.js");
10
10
  require("./icon-button.css.ts.vanilla.js");
11
- var t = "yqt1oe1 _1y2v1nf5s";
11
+ var t = "yqt1oe1 _1y2v1nf5u";
@@ -113,19 +113,21 @@ function _objectSpreadProps(target, source) {
113
113
  }
114
114
  return target;
115
115
  }
116
- const d = 24, b = (e, a, t, n, l)=>{
117
- const m = n ? `${n}px ${n}px` : "100% 100%";
116
+ const s = 24, b = (e, t, a, n, l)=>{
117
+ const u = n ? `${n}px ${n}px` : "100% 100%";
118
118
  return {
119
119
  padding: 0,
120
- backgroundColor: t,
120
+ backgroundColor: a,
121
121
  backgroundImage: e ? `url(${e})` : "initial",
122
- backgroundSize: m,
122
+ backgroundSize: u,
123
123
  cursor: l ? "default" : "pointer",
124
- height: a,
125
- width: a
124
+ height: t,
125
+ width: t,
126
+ verticalAlign: "middle",
127
+ textAlign: "center"
126
128
  };
127
- }, u = (e)=>{
128
- const { icon: a , children: t } = e, n = {
129
+ }, m = (e)=>{
130
+ const { icon: t , children: a } = e, n = {
129
131
  className: e.className || "",
130
132
  disabled: e.disabled,
131
133
  style: e.style,
@@ -139,37 +141,39 @@ const d = 24, b = (e, a, t, n, l)=>{
139
141
  href: e.href,
140
142
  newTab: e.newTab,
141
143
  "aria-label": e["aria-label"],
142
- children: !a && _react.Children.only(t)
144
+ children: !t && _react.Children.only(a)
143
145
  })) : e.to ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_touchableJs.BaseTouchable, _objectSpreadProps(_objectSpread({}, n), {
144
146
  to: e.to,
145
147
  fullPageOnWebView: e.fullPageOnWebView,
146
148
  replace: e.replace,
147
149
  "aria-label": e["aria-label"],
148
- children: !a && _react.Children.only(t)
150
+ children: !t && _react.Children.only(a)
149
151
  })) : e.onPress ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_touchableJs.BaseTouchable, _objectSpreadProps(_objectSpread({}, n), {
150
152
  onPress: (l)=>{
151
153
  l.stopPropagation(), e.onPress(l);
152
154
  },
153
155
  "aria-label": e["aria-label"],
154
- children: !a && _react.Children.only(t)
156
+ children: !t && _react.Children.only(a)
155
157
  })) : /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_touchableJs.BaseTouchable, _objectSpreadProps(_objectSpread({}, n), {
156
158
  maybe: !0,
157
- children: !a && _react.Children.only(t)
159
+ children: !t && _react.Children.only(a)
158
160
  }));
159
161
  }, I = (e)=>{
160
- const { icon: a , backgroundColor: t = "transparent" , iconSize: n , size: l = d } = e;
161
- return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(u, _objectSpreadProps(_objectSpread({}, e), {
162
+ const { icon: t , backgroundColor: a = "transparent" , iconSize: n , size: l = s } = e;
163
+ return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(m, _objectSpreadProps(_objectSpread({}, e), {
162
164
  className: (0, _classnames.default)(_iconButtonCssMisticaJs.base, e.className),
163
- style: _objectSpread({}, b(a, l, t, n, e.disabled), e.style)
165
+ style: _objectSpread({}, b(t, l, a, n, e.disabled), e.style)
164
166
  }));
165
167
  }, w = (e)=>{
166
- const { size: a = d , disabled: t } = e;
167
- return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(u, _objectSpreadProps(_objectSpread({}, e), {
168
+ const { size: t = s , disabled: a } = e;
169
+ return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(m, _objectSpreadProps(_objectSpread({}, e), {
168
170
  className: (0, _classnames.default)(_iconButtonCssMisticaJs.base, e.className),
169
171
  style: {
170
- height: a,
171
- width: a,
172
- cursor: t ? "default" : "pointer"
172
+ height: t,
173
+ width: t,
174
+ cursor: a ? "default" : "pointer",
175
+ verticalAlign: "middle",
176
+ textAlign: "center"
173
177
  }
174
178
  }));
175
179
  };
@@ -14,4 +14,4 @@ _export(exports, {
14
14
  });
15
15
  require("./sprinkles.css.ts.vanilla.js");
16
16
  require("./image.css.ts.vanilla.js");
17
- var f = 300, n = "_17tt25r1 _1y2v1nfa6 _1y2v1nfak _1y2v1nf5q _1y2v1nf7v _1y2v1nf8b _1y2v1nfbq _1y2v1nf9j _1y2v1nf9k";
17
+ var f = 300, n = "_17tt25r1 _1y2v1nfa8 _1y2v1nfam _1y2v1nf5s _1y2v1nf7x _1y2v1nf8d _1y2v1nfbs _1y2v1nf9l _1y2v1nf9m";
package/dist/image.d.ts CHANGED
@@ -5,6 +5,11 @@ export declare const MediaBorderRadiusProvider: ({ children, value, }: {
5
5
  children: React.ReactNode;
6
6
  value: boolean;
7
7
  }) => JSX.Element;
8
+ type ImageErrorProps = {
9
+ noBorderRadius?: boolean;
10
+ withIcon?: boolean;
11
+ };
12
+ export declare const ImageError: React.ForwardRefExoticComponent<ImageErrorProps & React.RefAttributes<HTMLDivElement>>;
8
13
  export type AspectRatio = '1:1' | '16:9' | '7:10' | '4:3';
9
14
  export declare const RATIO: {
10
15
  '1:1': number;
@@ -29,5 +34,6 @@ export type ImageProps = {
29
34
  loadingFallback?: boolean;
30
35
  errorFallback?: boolean;
31
36
  };
37
+ export declare const ImageContent: React.ForwardRefExoticComponent<ImageProps & React.RefAttributes<HTMLImageElement>>;
32
38
  declare const Image: React.ForwardRefExoticComponent<ImageProps & React.RefAttributes<HTMLImageElement>>;
33
39
  export default Image;
package/dist/image.js CHANGED
@@ -9,10 +9,12 @@ function _export(target, all) {
9
9
  });
10
10
  }
11
11
  _export(exports, {
12
- MediaBorderRadiusProvider: ()=>r1,
13
- RATIO: ()=>U,
14
- default: ()=>s1,
15
- useMediaBorderRadius: ()=>O
12
+ ImageContent: ()=>q,
13
+ ImageError: ()=>Z,
14
+ MediaBorderRadiusProvider: ()=>n1,
15
+ RATIO: ()=>x,
16
+ default: ()=>a1,
17
+ useMediaBorderRadius: ()=>K
16
18
  });
17
19
  const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
18
20
  const _classnames = /*#__PURE__*/ _interopRequireDefault(require("classnames"));
@@ -150,29 +152,29 @@ function _objectWithoutPropertiesLoose(source, excluded) {
150
152
  }
151
153
  return target;
152
154
  }
153
- const k = /*#__PURE__*/ _react.createContext(!0), O = ()=>_react.useContext(k), r1 = (param)=>/* @__PURE__ */ {
154
- let { children: t , value: s } = param;
155
- return (0, _jsxRuntimeJs.jsx)(k.Provider, {
156
- value: s,
157
- children: t
155
+ const I = /*#__PURE__*/ _react.createContext(!0), K = ()=>_react.useContext(I), n1 = (param)=>/* @__PURE__ */ {
156
+ let { children: e , value: r } = param;
157
+ return (0, _jsxRuntimeJs.jsx)(I.Provider, {
158
+ value: r,
159
+ children: e
158
160
  });
159
- }, P = (param)=>/* @__PURE__ */ {
160
- let { style: t } = param;
161
+ }, U = (param)=>/* @__PURE__ */ {
162
+ let { style: e } = param;
161
163
  return (0, _jsxRuntimeJs.jsx)("svg", {
162
164
  width: "48",
163
165
  height: "48",
164
166
  viewBox: "0 0 48 48",
165
167
  fill: "none",
166
- style: t,
168
+ style: e,
167
169
  children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("path", {
168
170
  d: "M24.021 35.7235C24.8145 35.7694 25.0467 36.1913 25.3157 36.5138C25.586 36.8362 29.515 41.551 29.7823 41.8569C30.0475 42.1662 30.7822 42.7329 31.5901 42.8405C32.3967 42.9473 33.282 42.7842 33.8484 42.3748C34.4135 41.965 35.1313 41.4073 35.3833 41.0356C35.6337 40.6638 36.061 40.1302 35.9823 39.2534C35.9028 38.3783 35.7112 37.9204 35.0268 37.1691C34.3433 36.4185 30.2992 31.6657 29.5382 30.7537C29.5382 30.7537 28.8467 29.9423 28.9469 28.7956C29.0476 27.6468 29.567 27.1343 30.6608 26.8487C31.7534 26.5647 36.0267 25.5306 36.0267 25.5306C36.0267 25.5306 38.4728 24.3723 37.9182 22.0776L37.5997 20.904C37.5997 20.904 37.0672 18.2264 33.5519 19.0556C30.0344 19.8869 28.0803 20.377 28.0803 20.377C28.0803 20.377 26.9602 20.4838 26.7999 19.744C26.6417 19.0038 26.8494 18.6218 27.3443 18.4156C27.8387 18.209 30.9611 16.7175 31.3617 12.6853C31.7652 8.65158 28.3882 5.06573 24.0091 5.08104C19.6288 5.0976 16.4594 8.39988 16.4725 11.8185C16.4856 15.2387 18.7033 17.5144 20.4079 18.3638C21.3752 18.8453 21.0656 19.7122 21.0656 19.7122C21.0656 19.7122 20.8334 20.5554 19.8153 20.3311C18.7972 20.1025 13.8657 18.9736 13.8657 18.9736C13.8657 18.9736 10.8914 18.4226 10.1732 21.359C9.4541 24.2978 11.1261 25.4143 12.3532 25.6908C13.5798 25.9669 17.7296 26.9716 17.7296 26.9716C17.7296 26.9716 18.9643 27.581 19.0125 28.8308C19.0425 29.5697 19.0438 30.1824 18.266 31.2832C17.4894 32.3835 12.6598 38.0148 12.6598 38.0148C12.6598 38.0148 10.9997 39.9862 13.4051 41.763C15.8106 43.5401 17.1641 43.1262 18.5921 41.4889C20.0188 39.852 22.8383 36.4243 22.8383 36.4243C22.8383 36.4243 23.2275 35.6788 24.021 35.7235Z",
169
171
  stroke: _skinContractCssMisticaJs.vars.colors.brand,
170
172
  strokeWidth: "2"
171
173
  })
172
174
  });
173
- }, K = (param)=>{
174
- let { noBorderRadius: t } = param;
175
- const s = (0, _themeVariantContextJs.useIsInverseVariant)(), { skinName: c } = (0, _hooksJs.useTheme)();
175
+ }, Z = /*#__PURE__*/ _react.forwardRef((param, a)=>{
176
+ let { noBorderRadius: e , withIcon: r = !0 } = param;
177
+ const o = (0, _themeVariantContextJs.useIsInverseVariant)(), { skinName: d } = (0, _hooksJs.useTheme)();
176
178
  return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
177
179
  style: {
178
180
  height: "100%",
@@ -180,10 +182,11 @@ const k = /*#__PURE__*/ _react.createContext(!0), O = ()=>_react.useContext(k),
180
182
  display: "flex",
181
183
  alignItems: "center",
182
184
  justifyContent: "center",
183
- backgroundColor: s ? _skinContractCssMisticaJs.vars.colors.backgroundSkeletonInverse : _skinContractCssMisticaJs.vars.colors.backgroundSkeleton,
184
- borderRadius: t ? void 0 : _skinContractCssMisticaJs.vars.borderRadii.container
185
+ backgroundColor: o ? _skinContractCssMisticaJs.vars.colors.backgroundSkeletonInverse : _skinContractCssMisticaJs.vars.colors.backgroundSkeleton,
186
+ borderRadius: e ? void 0 : _skinContractCssMisticaJs.vars.borderRadii.container
185
187
  },
186
- children: c === _constantsJs.VIVO_SKIN ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(P, {
188
+ ref: a,
189
+ children: r ? d === _constantsJs.VIVO_SKIN ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(U, {
187
190
  style: {
188
191
  width: "10%",
189
192
  minWidth: 24,
@@ -198,18 +201,18 @@ const k = /*#__PURE__*/ _react.createContext(!0), O = ()=>_react.useContext(k),
198
201
  maxWidth: 48
199
202
  },
200
203
  children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("path", {
201
- fill: s ? _skinContractCssMisticaJs.vars.colors.inverse : _skinContractCssMisticaJs.vars.colors.neutralMedium,
204
+ fill: o ? _skinContractCssMisticaJs.vars.colors.inverse : _skinContractCssMisticaJs.vars.colors.neutralMedium,
202
205
  d: "M20.25 4.622c.832 0 1.591.664 1.591 1.393v11.98c0 .728-.76 1.392-1.591 1.392H3.746c-.863 0-1.591-.639-1.591-1.392V6.015c0-.754.728-1.393 1.59-1.393H20.25zm0 13.558c.193 0 .367-.146.39-.207l-.003-11.956a.555.555 0 00-.384-.182H3.746c-.21 0-.364.132-.387.19v11.973c.014.044.171.182.387.182H20.25zM6.152 9.068c0 .554.451 1.005 1.003 1.005a1.006 1.006 0 000-2.01c-.552 0-1.003.45-1.003 1.005zm1.003 2.215a2.216 2.216 0 010-4.43c1.218 0 2.207.993 2.207 2.215a2.213 2.213 0 01-2.207 2.215zm12.42 1.337l-3.18-2.44a.605.605 0 00-.742.005l-3.636 2.9-.879-.83a.6.6 0 00-.798-.025l-5.168 4.317a.607.607 0 00.386 1.07.59.59 0 00.384-.14l4.759-3.975 3.308 3.123c.241.23.625.221.852-.025a.605.605 0 00-.026-.854l-1.932-1.824 3.131-2.496 2.807 2.154a.603.603 0 00.846-.112.609.609 0 00-.112-.848z"
203
206
  })
204
- })
207
+ }) : void 0
205
208
  });
206
- }, U = {
209
+ }), x = {
207
210
  "1:1": 1,
208
211
  "16:9": 16 / 9,
209
212
  "7:10": 7 / 10,
210
213
  "4:3": 4 / 3
211
- }, s1 = /*#__PURE__*/ _react.forwardRef((_param, x)=>{
212
- var { aspectRatio: t = "1:1" , alt: s = "" , dataAttributes: c , noBorderRadius: l , src: I , onError: d , onLoad: a , loadingFallback: R = !0 , errorFallback: p = !0 } = _param, o = _objectWithoutProperties(_param, [
214
+ }, q = /*#__PURE__*/ _react.forwardRef((_param, p)=>{
215
+ var { aspectRatio: e = "1:1" , alt: r = "" , dataAttributes: a , noBorderRadius: o , src: d , onError: l , onLoad: c , loadingFallback: y = !0 , errorFallback: R = !0 } = _param, n = _objectWithoutProperties(_param, [
213
216
  "aspectRatio",
214
217
  "alt",
215
218
  "dataAttributes",
@@ -220,66 +223,78 @@ const k = /*#__PURE__*/ _react.createContext(!0), O = ()=>_react.useContext(k),
220
223
  "loadingFallback",
221
224
  "errorFallback"
222
225
  ]);
223
- const C = _react.useRef(), y = O(), m = l != null ? l : !y, [u, f] = _react.useState(!1), [S, g] = _react.useState(!0), [M, b] = _react.useState(!1), n = typeof t == "number" ? t : U[t], v = R && !!(n !== 0 || o.width && o.height), H = p && !!(n !== 0 || o.width && o.height), h = _react.useCallback(()=>{
224
- f(!1), g(!1), setTimeout(()=>{
225
- b(!0);
226
- }, _imageCssMisticaJs.FADE_IN_DURATION_MS), a == null || a();
226
+ const C = _react.useRef(), S = K(), m = o != null ? o : !S, [f, g] = _react.useState(!1), [M, b] = _react.useState(!0), [F, v] = _react.useState(!1), h = typeof e == "number" ? e : x[e], w = y && !!(h !== 0 || n.width && n.height), H = R && !!(h !== 0 || n.width && n.height), u = _react.useCallback(()=>{
227
+ g(!1), b(!1), setTimeout(()=>{
228
+ v(!0);
229
+ }, _imageCssMisticaJs.FADE_IN_DURATION_MS), c == null || c();
227
230
  }, [
228
- a
229
- ]), z = /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("img", _objectSpreadProps(_objectSpread({}, (0, _domJs.getPrefixedDataAttributes)(c)), {
230
- style: _objectSpread({}, S && v ? {
231
+ c
232
+ ]), z = /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("img", _objectSpreadProps(_objectSpread({}, (0, _domJs.getPrefixedDataAttributes)(a)), {
233
+ style: _objectSpread({}, M && w ? {
231
234
  opacity: 0
232
235
  } : {
233
236
  opacity: 1
234
237
  }),
235
- ref: (0, _commonJs.combineRefs)(C, x),
236
- src: I,
238
+ ref: (0, _commonJs.combineRefs)(C, p),
239
+ src: d,
237
240
  className: (0, _classnames.default)(_imageCssMisticaJs.image, (0, _sprinklesCssMisticaJs.sprinkles)({
238
- position: n !== 0 ? "absolute" : "static",
241
+ position: h !== 0 ? "absolute" : "static",
239
242
  borderRadius: m ? void 0 : _skinContractCssMisticaJs.vars.borderRadii.container
240
243
  })),
241
- alt: s,
244
+ alt: r,
242
245
  onError: ()=>{
243
- f(!0), g(!1), b(!0), d == null || d();
246
+ g(!0), b(!1), v(!0), l == null || l();
244
247
  },
245
- onLoad: h
248
+ onLoad: u
246
249
  }));
247
250
  return _react.useEffect(()=>{
248
- var w;
249
- (w = C.current) != null && w.complete && h();
251
+ var k;
252
+ (k = C.current) != null && k.complete && u();
250
253
  }, [
251
- h
252
- ]), /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_aspectRatioSupportJs.AspectRatioElement, {
253
- style: {
254
- position: "relative"
255
- },
256
- aspectRatio: n,
257
- width: o.width,
258
- height: o.height,
254
+ u
255
+ ]), /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_jsxRuntimeJs.Fragment, {
259
256
  children: [
260
- v && !M && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
257
+ w && !F && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
261
258
  style: {
262
259
  position: "absolute",
263
260
  width: "100%",
264
261
  height: "100%"
265
262
  },
266
263
  children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_skeletonsJs.SkeletonRectangle, {
267
- width: o.width,
268
- height: o.height,
264
+ width: n.width,
265
+ height: n.height,
269
266
  noBorderRadius: m
270
267
  })
271
268
  }),
272
- u && H && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
269
+ f && H && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
273
270
  style: {
274
271
  position: "absolute",
275
272
  width: "100%",
276
273
  height: "100%"
277
274
  },
278
- children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(K, {
275
+ children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(Z, {
279
276
  noBorderRadius: m
280
277
  })
281
278
  }),
282
- !u && z
279
+ !f && z
283
280
  ]
284
281
  });
282
+ }), a1 = /*#__PURE__*/ _react.forwardRef((_param, a)=>{
283
+ var { aspectRatio: e = "1:1" } = _param, r = _objectWithoutProperties(_param, [
284
+ "aspectRatio"
285
+ ]);
286
+ const o = typeof e == "number" ? e : x[e];
287
+ return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_aspectRatioSupportJs.AspectRatioElement, {
288
+ style: {
289
+ position: "relative"
290
+ },
291
+ aspectRatio: o,
292
+ width: r.width,
293
+ height: r.height,
294
+ children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(q, _objectSpreadProps(_objectSpread({
295
+ aspectRatio: e
296
+ }, r), {
297
+ ref: a
298
+ }))
299
+ });
285
300
  });
package/dist/index.d.ts CHANGED
@@ -47,6 +47,7 @@ export { default as RadioButton, RadioGroup } from './radio-button';
47
47
  export { default as NegativeBox } from './negative-box';
48
48
  export { default as Tabs } from './tabs';
49
49
  export { default as Inline } from './inline';
50
+ export { default as HorizontalScroll } from './horizontal-scroll';
50
51
  export { default as HighlightedCard } from './highlighted-card';
51
52
  export { default as Stepper } from './stepper';
52
53
  export { default as ProgressBar } from './progress-bar';
@@ -89,6 +90,7 @@ export { default as PasswordField } from './password-field';
89
90
  export { default as DoubleField } from './double-field';
90
91
  export { default as IbanField } from './iban-field';
91
92
  export { useForm, useFieldProps } from './form-context';
93
+ export type { FormValues } from './form';
92
94
  export { default as IconInfo } from './icons/icon-info';
93
95
  export { default as IconChevron } from './icons/icon-chevron';
94
96
  export { default as IconError } from './icons/icon-error';
package/dist/index.js CHANGED
@@ -57,6 +57,7 @@ _export(exports, {
57
57
  HeaderLayout: ()=>_headerJs.HeaderLayout,
58
58
  Hero: ()=>_heroJs.default,
59
59
  HighlightedCard: ()=>_highlightedCardJs.default,
60
+ HorizontalScroll: ()=>_horizontalScrollJs.default,
60
61
  IbanField: ()=>_ibanFieldJs.default,
61
62
  Icon2GFilled: ()=>_icon2GFilledJs.default,
62
63
  Icon2GRegular: ()=>_icon2GRegularJs.default,
@@ -1882,6 +1883,7 @@ const _radioButtonJs = /*#__PURE__*/ _interopRequireWildcard(require("./radio-bu
1882
1883
  const _negativeBoxJs = /*#__PURE__*/ _interopRequireDefault(require("./negative-box.js"));
1883
1884
  const _tabsJs = /*#__PURE__*/ _interopRequireDefault(require("./tabs.js"));
1884
1885
  const _inlineJs = /*#__PURE__*/ _interopRequireDefault(require("./inline.js"));
1886
+ const _horizontalScrollJs = /*#__PURE__*/ _interopRequireDefault(require("./horizontal-scroll.js"));
1885
1887
  const _highlightedCardJs = /*#__PURE__*/ _interopRequireDefault(require("./highlighted-card.js"));
1886
1888
  const _stepperJs = /*#__PURE__*/ _interopRequireDefault(require("./stepper.js"));
1887
1889
  const _progressBarJs = /*#__PURE__*/ _interopRequireDefault(require("./progress-bar.js"));
@@ -10,20 +10,20 @@ function _export(target, all) {
10
10
  }
11
11
  _export(exports, {
12
12
  asset: ()=>_,
13
- badge: ()=>f,
14
- center: ()=>y,
13
+ badge: ()=>y,
14
+ center: ()=>f,
15
15
  content: ()=>r,
16
16
  disabled: ()=>a,
17
17
  dualActionContainer: ()=>o,
18
18
  dualActionDivider: ()=>t,
19
- dualActionLeft: ()=>i,
20
- dualActionRight: ()=>e,
21
- hoverBackground: ()=>b,
19
+ dualActionLeft: ()=>d,
20
+ dualActionRight: ()=>i,
21
+ hoverBackground: ()=>e,
22
22
  pointer: ()=>u,
23
- right: ()=>d,
23
+ right: ()=>b,
24
24
  rowBody: ()=>g,
25
- rowContent: ()=>c
25
+ rowContent: ()=>j
26
26
  });
27
27
  require("./sprinkles.css.ts.vanilla.js");
28
28
  require("./list.css.ts.vanilla.js");
29
- var _ = "_1y2v1nf5o _1y2v1nf66 _1y2v1nf68", f = "_1y2v1nf5x _1y2v1nf8w _1y2v1nf8b _1y2v1nf66", y = "_1y2v1nf5o _1y2v1nf63", r = "_1y2v1nf5o _1y2v1nf7v _1y2v1nf9h", a = "_2buj9g0", o = "_1y2v1nf5o _1y2v1nf5t", t = "_2buj9gi _1y2v1nf5o", i = "_1y2v1nf6b _1y2v1nf6p _1y2v1nf73 _1y2v1nf7h _1y2v1nf5q _1y2v1nf9m _1y2v1nf5i _1y2v1nf78 _1y2v1nf7m _1y2v1nf69", e = "_2buj9gk _1y2v1nf6b _1y2v1nf6p _1y2v1nf73 _1y2v1nf7h _1y2v1nf5q _1y2v1nf9m _1y2v1nf5i _1y2v1nf78 _1y2v1nf7m _1y2v1nf5o _1y2v1nf63 _1y2v1nf68 _1y2v1nf7w", b = "_2buj9g1", u = "_1y2v1nfa3", d = "_2buj9gb", g = "_1y2v1nf5o _1y2v1nf5u _1y2v1nf6a", c = "_1y2v1nf6b _1y2v1nf6p _1y2v1nf73 _1y2v1nf7h _1y2v1nf7v _1y2v1nf9m _1y2v1nf5i";
29
+ var _ = "_1y2v1nf5q _1y2v1nf68 _1y2v1nf6a", y = "_1y2v1nf5z _1y2v1nf8y _1y2v1nf8d _1y2v1nf68", f = "_1y2v1nf5q _1y2v1nf65", r = "_1y2v1nf5q _1y2v1nf7x _1y2v1nf9j", a = "_2buj9g0", o = "_1y2v1nf5q _1y2v1nf5v", t = "_2buj9gi _1y2v1nf5q", d = "_1y2v1nf6d _1y2v1nf6r _1y2v1nf75 _1y2v1nf7j _1y2v1nf5s _1y2v1nf9o _1y2v1nf5k _1y2v1nf7a _1y2v1nf7o _1y2v1nf6b", i = "_2buj9gk _1y2v1nf6d _1y2v1nf6r _1y2v1nf75 _1y2v1nf7j _1y2v1nf5s _1y2v1nf9o _1y2v1nf5k _1y2v1nf7a _1y2v1nf7o _1y2v1nf5q _1y2v1nf65 _1y2v1nf6a _1y2v1nf7y", e = "_2buj9g1", u = "_1y2v1nfa5", b = "_2buj9gb", g = "_1y2v1nf5q _1y2v1nf5w _1y2v1nf6c", j = "_1y2v1nf6d _1y2v1nf6r _1y2v1nf75 _1y2v1nf7j _1y2v1nf7x _1y2v1nf9o _1y2v1nf5k";