@telefonica/mistica 14.17.0 → 14.18.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 (177) hide show
  1. package/css/mistica.css +1 -1
  2. package/dist/avatar.css-mistica.js +3 -3
  3. package/dist/badge.css-mistica.js +3 -3
  4. package/dist/box.d.ts +8 -8
  5. package/dist/box.js +28 -21
  6. package/dist/boxed.css-mistica.js +1 -1
  7. package/dist/button-group.css-mistica.js +1 -1
  8. package/dist/button-layout.css-mistica.js +8 -8
  9. package/dist/button.css-mistica.js +19 -19
  10. package/dist/callout.css-mistica.js +1 -1
  11. package/dist/card.css-mistica.js +27 -18
  12. package/dist/card.css.d.ts +3 -0
  13. package/dist/card.d.ts +37 -14
  14. package/dist/card.js +442 -268
  15. package/dist/carousel.css-mistica.js +16 -16
  16. package/dist/checkbox.css-mistica.js +10 -10
  17. package/dist/chip.css-mistica.js +4 -4
  18. package/dist/circle.css-mistica.js +2 -2
  19. package/dist/circle.d.ts +2 -0
  20. package/dist/circle.js +61 -7
  21. package/dist/community/advanced-data-card.css-mistica.js +69 -0
  22. package/dist/community/advanced-data-card.css.d.ts +20 -0
  23. package/dist/community/advanced-data-card.css.ts.vanilla.css-mistica.js +11 -0
  24. package/dist/community/advanced-data-card.d.ts +39 -0
  25. package/dist/community/advanced-data-card.js +317 -0
  26. package/dist/community/blocks.css-mistica.js +21 -0
  27. package/dist/community/blocks.css.d.ts +2 -0
  28. package/dist/community/blocks.css.ts.vanilla.css-mistica.js +11 -0
  29. package/dist/community/blocks.d.ts +73 -0
  30. package/dist/community/blocks.js +258 -0
  31. package/dist/community/index.d.ts +2 -0
  32. package/dist/community/index.js +31 -3
  33. package/dist/credit-card-number-field.css-mistica.js +3 -3
  34. package/dist/dialog.css-mistica.js +9 -9
  35. package/dist/double-field.css-mistica.js +2 -2
  36. package/dist/empty-state-card.css-mistica.js +1 -1
  37. package/dist/empty-state.css-mistica.js +4 -4
  38. package/dist/empty-state.js +4 -4
  39. package/dist/feedback.css-mistica.js +3 -3
  40. package/dist/fixed-footer-layout.css-mistica.js +2 -2
  41. package/dist/grid.css.d.ts +6 -6
  42. package/dist/header.css-mistica.js +24 -0
  43. package/dist/header.css.d.ts +3 -0
  44. package/dist/header.css.ts.vanilla.css-mistica.js +11 -0
  45. package/dist/header.d.ts +3 -0
  46. package/dist/header.js +121 -101
  47. package/dist/hero.css-mistica.js +4 -4
  48. package/dist/highlighted-card.css-mistica.js +5 -5
  49. package/dist/horizontal-scroll.css-mistica.js +1 -1
  50. package/dist/icon-button.css-mistica.js +1 -1
  51. package/dist/image.css-mistica.js +1 -1
  52. package/dist/image.d.ts +19 -6
  53. package/dist/image.js +64 -61
  54. package/dist/index.d.ts +1 -1
  55. package/dist/index.js +6 -0
  56. package/dist/list.css-mistica.js +14 -11
  57. package/dist/list.css.d.ts +1 -0
  58. package/dist/list.js +61 -59
  59. package/dist/loading-bar.css-mistica.js +5 -5
  60. package/dist/maybe-dismissable.css-mistica.js +1 -1
  61. package/dist/menu.css-mistica.js +2 -2
  62. package/dist/navigation-bar.css-mistica.js +16 -16
  63. package/dist/navigation-breadcrumbs.css-mistica.js +1 -1
  64. package/dist/package-version.js +1 -1
  65. package/dist/password-field.css-mistica.js +2 -2
  66. package/dist/popover.css-mistica.js +11 -11
  67. package/dist/progress-bar.css-mistica.js +3 -3
  68. package/dist/radio-button.css-mistica.js +12 -12
  69. package/dist/responsive-layout.css-mistica.js +2 -2
  70. package/dist/screen-reader-only.css-mistica.js +1 -1
  71. package/dist/select.css-mistica.js +12 -12
  72. package/dist/skeletons.css-mistica.js +3 -3
  73. package/dist/snackbar.css-mistica.js +5 -5
  74. package/dist/spinner.css-mistica.js +1 -1
  75. package/dist/sprinkles.css-mistica.js +648 -336
  76. package/dist/sprinkles.css.d.ts +36 -7
  77. package/dist/stack.css-mistica.js +7 -4
  78. package/dist/stack.css.d.ts +3 -0
  79. package/dist/stack.d.ts +4 -2
  80. package/dist/stack.js +20 -13
  81. package/dist/stacking-group.css-mistica.js +1 -1
  82. package/dist/stepper.css-mistica.js +9 -9
  83. package/dist/switch-component.css-mistica.js +21 -21
  84. package/dist/tabs.css-mistica.js +11 -11
  85. package/dist/tag.css-mistica.js +1 -1
  86. package/dist/text-field-base.css-mistica.js +11 -11
  87. package/dist/text-field-components.css-mistica.js +15 -15
  88. package/dist/text-link.css-mistica.js +5 -5
  89. package/dist/theme.d.ts +2 -0
  90. package/dist/theme.js +49 -41
  91. package/dist/tooltip.css-mistica.js +9 -9
  92. package/dist/touchable.css-mistica.js +3 -3
  93. package/dist/utils/aspect-ratio-support.css-mistica.js +4 -4
  94. package/dist/utils/aspect-ratio-support.d.ts +4 -2
  95. package/dist/utils/aspect-ratio-support.js +17 -16
  96. package/dist/utils/types.d.ts +5 -0
  97. package/dist/utils/utility-types.d.ts +7 -0
  98. package/dist/video.css-mistica.js +2 -2
  99. package/dist/video.js +26 -78
  100. package/dist-es/avatar.css-mistica.js +2 -2
  101. package/dist-es/badge.css-mistica.js +2 -2
  102. package/dist-es/box.js +32 -25
  103. package/dist-es/boxed.css-mistica.js +1 -1
  104. package/dist-es/button-group.css-mistica.js +1 -1
  105. package/dist-es/button-layout.css-mistica.js +7 -7
  106. package/dist-es/button.css-mistica.js +9 -9
  107. package/dist-es/callout.css-mistica.js +1 -1
  108. package/dist-es/card.css-mistica.js +4 -4
  109. package/dist-es/card.js +549 -384
  110. package/dist-es/carousel.css-mistica.js +2 -2
  111. package/dist-es/checkbox.css-mistica.js +6 -6
  112. package/dist-es/chip.css-mistica.js +4 -4
  113. package/dist-es/circle.css-mistica.js +2 -2
  114. package/dist-es/circle.js +66 -12
  115. package/dist-es/community/advanced-data-card.css-mistica.js +7 -0
  116. package/dist-es/community/advanced-data-card.css.ts.vanilla.css-mistica.js +2 -0
  117. package/dist-es/community/advanced-data-card.js +256 -0
  118. package/dist-es/community/blocks.css-mistica.js +4 -0
  119. package/dist-es/community/blocks.css.ts.vanilla.css-mistica.js +2 -0
  120. package/dist-es/community/blocks.js +224 -0
  121. package/dist-es/community/index.js +4 -2
  122. package/dist-es/credit-card-number-field.css-mistica.js +3 -3
  123. package/dist-es/dialog.css-mistica.js +5 -5
  124. package/dist-es/double-field.css-mistica.js +2 -2
  125. package/dist-es/empty-state-card.css-mistica.js +1 -1
  126. package/dist-es/empty-state.css-mistica.js +3 -3
  127. package/dist-es/empty-state.js +11 -11
  128. package/dist-es/feedback.css-mistica.js +2 -2
  129. package/dist-es/fixed-footer-layout.css-mistica.js +2 -2
  130. package/dist-es/header.css-mistica.js +4 -0
  131. package/dist-es/header.css.ts.vanilla.css-mistica.js +2 -0
  132. package/dist-es/header.js +141 -121
  133. package/dist-es/hero.css-mistica.js +2 -2
  134. package/dist-es/highlighted-card.css-mistica.js +5 -5
  135. package/dist-es/horizontal-scroll.css-mistica.js +1 -1
  136. package/dist-es/icon-button.css-mistica.js +1 -1
  137. package/dist-es/image.css-mistica.js +1 -1
  138. package/dist-es/image.js +76 -73
  139. package/dist-es/index.js +1710 -1710
  140. package/dist-es/list.css-mistica.js +2 -2
  141. package/dist-es/list.js +80 -78
  142. package/dist-es/loading-bar.css-mistica.js +2 -2
  143. package/dist-es/maybe-dismissable.css-mistica.js +1 -1
  144. package/dist-es/menu.css-mistica.js +2 -2
  145. package/dist-es/navigation-bar.css-mistica.js +9 -9
  146. package/dist-es/navigation-breadcrumbs.css-mistica.js +1 -1
  147. package/dist-es/package-version.js +1 -1
  148. package/dist-es/password-field.css-mistica.js +2 -2
  149. package/dist-es/popover.css-mistica.js +2 -2
  150. package/dist-es/progress-bar.css-mistica.js +2 -2
  151. package/dist-es/radio-button.css-mistica.js +6 -6
  152. package/dist-es/responsive-layout.css-mistica.js +2 -2
  153. package/dist-es/screen-reader-only.css-mistica.js +1 -1
  154. package/dist-es/select.css-mistica.js +10 -10
  155. package/dist-es/skeletons.css-mistica.js +2 -2
  156. package/dist-es/snackbar.css-mistica.js +2 -2
  157. package/dist-es/spinner.css-mistica.js +1 -1
  158. package/dist-es/sprinkles.css-mistica.js +648 -336
  159. package/dist-es/stack.css-mistica.js +6 -3
  160. package/dist-es/stack.js +27 -20
  161. package/dist-es/stacking-group.css-mistica.js +1 -1
  162. package/dist-es/stepper.css-mistica.js +2 -2
  163. package/dist-es/style.css +1 -1
  164. package/dist-es/switch-component.css-mistica.js +18 -18
  165. package/dist-es/tabs.css-mistica.js +7 -7
  166. package/dist-es/tag.css-mistica.js +1 -1
  167. package/dist-es/text-field-base.css-mistica.js +2 -2
  168. package/dist-es/text-field-components.css-mistica.js +2 -2
  169. package/dist-es/text-link.css-mistica.js +5 -5
  170. package/dist-es/theme.js +52 -44
  171. package/dist-es/tooltip.css-mistica.js +3 -3
  172. package/dist-es/touchable.css-mistica.js +2 -2
  173. package/dist-es/utils/aspect-ratio-support.css-mistica.js +3 -3
  174. package/dist-es/utils/aspect-ratio-support.js +17 -16
  175. package/dist-es/video.css-mistica.js +2 -2
  176. package/dist-es/video.js +36 -88
  177. package/package.json +2 -2
@@ -19,18 +19,18 @@ _export(exports, {
19
19
  return n;
20
20
  },
21
21
  containerMobile: function() {
22
- return _;
22
+ return b;
23
23
  },
24
24
  layout: function() {
25
- return i;
25
+ return _;
26
26
  },
27
27
  vars: function() {
28
- return p;
28
+ return i;
29
29
  }
30
30
  });
31
31
  require("./sprinkles.css.ts.vanilla.css-mistica.js");
32
32
  require("./responsive-layout.css.ts.vanilla.css-mistica.js");
33
33
  require("./hero.css.ts.vanilla.css-mistica.js");
34
- var v = "_16rbpto6 _1y2v1nf64 _1y2v1nf6q _1y2v1nf6k", a = "_16rbpto2 _1y2v1nf64", n = "_1y2v1nf6j _1y2v1nf8w", _ = "_1y2v1nf6a", i = "_16rbpto7", p = {
34
+ var v = "_16rbpto6 _1y2v1nfb4 _1y2v1nfbq _1y2v1nfbk", a = "_16rbpto2 _1y2v1nfb4", n = "_1y2v1nfbj _1y2v1nfc8", b = "_1y2v1nfba", _ = "_16rbpto7", i = {
35
35
  height: "var(--_16rbpto0)"
36
36
  };
@@ -19,12 +19,12 @@ _export(exports, {
19
19
  return _;
20
20
  },
21
21
  touchableContainer: function() {
22
- return r;
22
+ return b;
23
23
  }
24
24
  });
25
25
  require("./sprinkles.css.ts.vanilla.css-mistica.js");
26
26
  require("./highlighted-card.css.ts.vanilla.css-mistica.js");
27
- var y = "wrb8722 _1y2v1nf64 _1y2v1nf69 _1y2v1nf6g _1y2v1nf6m", f = "wrb8725 _1y2v1nf64", _ = {
28
- withImage: "wrb8728 wrb8727 _1y2v1nf64 _1y2v1nf6a _1y2v1nf6i _1y2v1nf6y _1y2v1nf7d _1y2v1nf7q",
29
- withoutImage: "wrb8729 wrb8727 _1y2v1nf64 _1y2v1nf6a _1y2v1nf6i _1y2v1nf6y _1y2v1nf7d _1y2v1nf7q"
30
- }, r = "_1y2v1nf6r _1y2v1nf76 _1y2v1nf7l _1y2v1nf80 _1y2v1nf64 _1y2v1nf6m _1y2v1nfaa _1y2v1nf8f _1y2v1nf5y";
27
+ var y = "wrb8722 _1y2v1nfb4 _1y2v1nfb9 _1y2v1nfbg _1y2v1nfbm", f = "wrb8725 _1y2v1nfb4", _ = {
28
+ withImage: "wrb8728 wrb8727 _1y2v1nfb4 _1y2v1nfba _1y2v1nfbi _1y2v1nf6k _1y2v1nf7t _1y2v1nf8w",
29
+ withoutImage: "wrb8729 wrb8727 _1y2v1nfb4 _1y2v1nfba _1y2v1nfbi _1y2v1nf6k _1y2v1nf7t _1y2v1nf8w"
30
+ }, b = "_1y2v1nf5z _1y2v1nf78 _1y2v1nf8h _1y2v1nf9q _1y2v1nfb4 _1y2v1nfbm _1y2v1nfdm _1y2v1nfbr _1y2v1nf5y";
@@ -19,4 +19,4 @@ _export(exports, {
19
19
  require("./sprinkles.css.ts.vanilla.css-mistica.js");
20
20
  require("./responsive-layout.css.ts.vanilla.css-mistica.js");
21
21
  require("./horizontal-scroll.css.ts.vanilla.css-mistica.js");
22
- var m = "_1gl3gmv2", v = "_1gl3gmv1 _1y2v1nf64";
22
+ var m = "_1gl3gmv2", v = "_1gl3gmv1 _1y2v1nfb4";
@@ -10,4 +10,4 @@ Object.defineProperty(exports, "base", {
10
10
  });
11
11
  require("./sprinkles.css.ts.vanilla.css-mistica.js");
12
12
  require("./icon-button.css.ts.vanilla.css-mistica.js");
13
- var t = "yqt1oe1 _1y2v1nf68";
13
+ var t = "yqt1oe1 _1y2v1nfb8";
@@ -18,4 +18,4 @@ _export(exports, {
18
18
  });
19
19
  require("./sprinkles.css.ts.vanilla.css-mistica.js");
20
20
  require("./image.css.ts.vanilla.css-mistica.js");
21
- var f = 300, n = "_17tt25r1 _1y2v1nfau _1y2v1nfb9 _1y2v1nf66 _1y2v1nf8f _1y2v1nf8w _1y2v1nfci _1y2v1nfa7 _1y2v1nfa8";
21
+ var f = 300, n = "_17tt25r1 _1y2v1nfe6 _1y2v1nfel _1y2v1nfb6 _1y2v1nfbr _1y2v1nfc8 _1y2v1nffu _1y2v1nfdj _1y2v1nfdk";
package/dist/image.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import * as React from 'react';
2
+ import type { ExclusifyUnion } from './utils/utility-types';
2
3
  import type { DataAttributes } from './utils/types';
3
4
  export declare const useMediaBorderRadius: () => boolean;
4
5
  export declare const MediaBorderRadiusProvider: ({ children, value, }: {
@@ -7,6 +8,7 @@ export declare const MediaBorderRadiusProvider: ({ children, value, }: {
7
8
  }) => JSX.Element;
8
9
  type ImageErrorProps = {
9
10
  noBorderRadius?: boolean;
11
+ circular?: boolean;
10
12
  withIcon?: boolean;
11
13
  border?: boolean;
12
14
  };
@@ -18,13 +20,8 @@ export declare const RATIO: {
18
20
  '7:10': number;
19
21
  '4:3': number;
20
22
  };
21
- export type ImageProps = {
23
+ type CommonImageProps = {
22
24
  src: string;
23
- /** defaults to 100% when no width and no height are given */
24
- width?: string | number;
25
- height?: string | number;
26
- /** defaults to 1:1, if both width and height are given, aspectRatio is ignored. To use original image proportions, set aspectRatio to 0 */
27
- aspectRatio?: AspectRatio | number;
28
25
  /** defaults to empty string */
29
26
  alt?: string;
30
27
  children?: void;
@@ -36,6 +33,22 @@ export type ImageProps = {
36
33
  errorFallback?: boolean;
37
34
  border?: boolean;
38
35
  };
36
+ type RectangularImageProps = {
37
+ /** defaults to 1:1, if both width and height are given, aspectRatio is ignored. To use original image proportions, set aspectRatio to 0 */
38
+ aspectRatio?: AspectRatio | number;
39
+ /** defaults to 100% when no width and no height are given */
40
+ width?: string | number;
41
+ height?: string | number;
42
+ noBorderRadius?: boolean;
43
+ };
44
+ type CircularImageProps = {
45
+ circular?: boolean;
46
+ } & ExclusifyUnion<{
47
+ width?: string | number;
48
+ } | {
49
+ height?: string | number;
50
+ }>;
51
+ type ImageProps = CommonImageProps & ExclusifyUnion<RectangularImageProps | CircularImageProps>;
39
52
  export declare const ImageContent: React.ForwardRefExoticComponent<ImageProps & React.RefAttributes<HTMLImageElement>>;
40
53
  declare const Image: React.ForwardRefExoticComponent<ImageProps & React.RefAttributes<HTMLImageElement>>;
41
54
  export default Image;
package/dist/image.js CHANGED
@@ -10,22 +10,22 @@ function _export(target, all) {
10
10
  }
11
11
  _export(exports, {
12
12
  ImageContent: function() {
13
- return q;
13
+ return Q;
14
14
  },
15
15
  ImageError: function() {
16
- return Z;
16
+ return J;
17
17
  },
18
18
  MediaBorderRadiusProvider: function() {
19
- return a1;
19
+ return m1;
20
20
  },
21
21
  RATIO: function() {
22
- return R;
22
+ return I;
23
23
  },
24
24
  default: function() {
25
- return c1;
25
+ return u1;
26
26
  },
27
27
  useMediaBorderRadius: function() {
28
- return K;
28
+ return q;
29
29
  }
30
30
  });
31
31
  const _jsxruntime = require("react/jsx-runtime");
@@ -41,6 +41,7 @@ const _sprinklescssmistica = require("./sprinkles.css-mistica.js");
41
41
  const _imagecssmistica = require("./image.css-mistica.js");
42
42
  const _skincontractcssmistica = require("./skins/skin-contract.css-mistica.js");
43
43
  const _common = require("./utils/common.js");
44
+ const _skeletonbase = /*#__PURE__*/ _interop_require_default(require("./skeleton-base.js"));
44
45
  function _interop_require_default(obj) {
45
46
  return obj && obj.__esModule ? obj : {
46
47
  default: obj
@@ -164,13 +165,13 @@ function _object_without_properties_loose(source, excluded) {
164
165
  }
165
166
  return target;
166
167
  }
167
- const I = /*#__PURE__*/ _react.createContext(!0), K = ()=>_react.useContext(I), a1 = (param)=>/* @__PURE__ */ {
168
- let { children: e , value: r } = param;
169
- return (0, _jsxruntime.jsx)(I.Provider, {
170
- value: r,
168
+ const x = /*#__PURE__*/ _react.createContext(!0), q = ()=>_react.useContext(x), m1 = (param)=>/* @__PURE__ */ {
169
+ let { children: e , value: a } = param;
170
+ return (0, _jsxruntime.jsx)(x.Provider, {
171
+ value: a,
171
172
  children: e
172
173
  });
173
- }, U = (param)=>/* @__PURE__ */ {
174
+ }, G = (param)=>/* @__PURE__ */ {
174
175
  let { style: e } = param;
175
176
  return (0, _jsxruntime.jsx)("svg", {
176
177
  width: "48",
@@ -184,9 +185,9 @@ const I = /*#__PURE__*/ _react.createContext(!0), K = ()=>_react.useContext(I),
184
185
  strokeWidth: "2"
185
186
  })
186
187
  });
187
- }, Z = /*#__PURE__*/ _react.forwardRef((param, d)=>{
188
- let { noBorderRadius: e , withIcon: r = !0 , border: n } = param;
189
- const c = (0, _themevariantcontext.useIsInverseVariant)(), { skinName: a } = (0, _hooks.useTheme)();
188
+ }, J = /*#__PURE__*/ _react.forwardRef((param, c)=>{
189
+ let { noBorderRadius: e , circular: a , withIcon: d = !0 , border: l } = param;
190
+ const s = (0, _themevariantcontext.useIsInverseVariant)(), { skinName: n } = (0, _hooks.useTheme)();
190
191
  return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
191
192
  style: {
192
193
  height: "100%",
@@ -194,13 +195,13 @@ const I = /*#__PURE__*/ _react.createContext(!0), K = ()=>_react.useContext(I),
194
195
  display: "flex",
195
196
  alignItems: "center",
196
197
  justifyContent: "center",
197
- backgroundColor: c ? _skincontractcssmistica.vars.colors.backgroundSkeletonInverse : _skincontractcssmistica.vars.colors.backgroundSkeleton,
198
+ backgroundColor: s ? _skincontractcssmistica.vars.colors.backgroundSkeletonInverse : _skincontractcssmistica.vars.colors.backgroundSkeleton,
198
199
  boxSizing: "border-box",
199
- border: n ? `1px solid ${_skincontractcssmistica.vars.colors.borderLow}` : "none",
200
- borderRadius: e ? void 0 : _skincontractcssmistica.vars.borderRadii.container
200
+ border: l ? `1px solid ${_skincontractcssmistica.vars.colors.borderLow}` : "none",
201
+ borderRadius: a ? "50%" : e ? void 0 : _skincontractcssmistica.vars.borderRadii.container
201
202
  },
202
- ref: d,
203
- children: r ? a === _constants.VIVO_SKIN ? /* @__PURE__ */ (0, _jsxruntime.jsx)(U, {
203
+ ref: c,
204
+ children: d ? n === _constants.VIVO_SKIN ? /* @__PURE__ */ (0, _jsxruntime.jsx)(G, {
204
205
  style: {
205
206
  width: "10%",
206
207
  minWidth: 24,
@@ -215,18 +216,18 @@ const I = /*#__PURE__*/ _react.createContext(!0), K = ()=>_react.useContext(I),
215
216
  maxWidth: 48
216
217
  },
217
218
  children: /* @__PURE__ */ (0, _jsxruntime.jsx)("path", {
218
- fill: c ? _skincontractcssmistica.vars.colors.inverse : _skincontractcssmistica.vars.colors.neutralMedium,
219
+ fill: s ? _skincontractcssmistica.vars.colors.inverse : _skincontractcssmistica.vars.colors.neutralMedium,
219
220
  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"
220
221
  })
221
222
  }) : void 0
222
223
  });
223
- }), R = {
224
+ }), I = {
224
225
  "1:1": 1,
225
226
  "16:9": 16 / 9,
226
227
  "7:10": 7 / 10,
227
228
  "4:3": 4 / 3
228
- }, q = /*#__PURE__*/ _react.forwardRef((_param, S)=>{
229
- var { aspectRatio: e = "1:1" , alt: r = "" , dataAttributes: n , noBorderRadius: d , src: c , onError: a , onLoad: l , loadingFallback: k = !0 , errorFallback: y = !0 } = _param, s = _object_without_properties(_param, [
229
+ }, k = "1:1", Q = /*#__PURE__*/ _react.forwardRef((_param, A)=>{
230
+ var { aspectRatio: e = k , alt: a = "" , dataAttributes: d , noBorderRadius: l , src: c , onError: s , onLoad: n , loadingFallback: y = !0 , errorFallback: S = !0 } = _param, i = _object_without_properties(_param, [
230
231
  "aspectRatio",
231
232
  "alt",
232
233
  "dataAttributes",
@@ -237,15 +238,15 @@ const I = /*#__PURE__*/ _react.createContext(!0), K = ()=>_react.useContext(I),
237
238
  "loadingFallback",
238
239
  "errorFallback"
239
240
  ]);
240
- const C = _react.useRef(), p = K(), z = s.border ? `1px solid ${_skincontractcssmistica.vars.colors.borderLow}` : "none", m = d !== null && d !== void 0 ? d : !p, [f, g] = _react.useState(!1), [B, b] = _react.useState(!0), [M, v] = _react.useState(!1), h = typeof e == "number" ? e : R[e], w = k && !!(h !== 0 || s.width && s.height), F = y && !!(h !== 0 || s.width && s.height), u = _react.useCallback(()=>{
241
+ const C = _react.useRef(), B = q(), z = i.border ? `1px solid ${_skincontractcssmistica.vars.colors.borderLow}` : "none", m = l !== null && l !== void 0 ? l : !B, [f, g] = _react.useState(!c), [M, b] = _react.useState(!0), [F, R] = _react.useState(!1), u = i.circular ? 1 : typeof e == "number" ? e : I[e], w = y && !!(u !== 0 || i.width && i.height), L = S && !!(u !== 0 || i.width && i.height), h = _react.useCallback(()=>{
241
242
  g(!1), b(!1), setTimeout(()=>{
242
- v(!0);
243
- }, _imagecssmistica.FADE_IN_DURATION_MS), l == null || l();
243
+ R(!0);
244
+ }, _imagecssmistica.FADE_IN_DURATION_MS), n == null || n();
244
245
  }, [
245
- l
246
- ]), H = // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
247
- /* @__PURE__ */ (0, _jsxruntime.jsx)("img", _object_spread_props(_object_spread({}, (0, _dom.getPrefixedDataAttributes)(n)), {
248
- style: _object_spread_props(_object_spread({}, B && w ? {
246
+ n
247
+ ]), T = // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
248
+ /* @__PURE__ */ (0, _jsxruntime.jsx)("img", {
249
+ style: _object_spread_props(_object_spread({}, M && w ? {
249
250
  opacity: 0
250
251
  } : {
251
252
  opacity: 1
@@ -253,68 +254,70 @@ const I = /*#__PURE__*/ _react.createContext(!0), K = ()=>_react.useContext(I),
253
254
  boxSizing: "border-box",
254
255
  border: z
255
256
  }),
256
- ref: (0, _common.combineRefs)(C, S),
257
+ ref: (0, _common.combineRefs)(C, A),
257
258
  src: c,
258
259
  className: (0, _classnames.default)(_imagecssmistica.image, (0, _sprinklescssmistica.sprinkles)({
259
- position: h !== 0 ? "absolute" : "static",
260
- borderRadius: m ? void 0 : _skincontractcssmistica.vars.borderRadii.container
260
+ position: u !== 0 ? "absolute" : "static",
261
+ borderRadius: i.circular ? "50%" : m ? void 0 : _skincontractcssmistica.vars.borderRadii.container
261
262
  })),
262
- alt: r,
263
+ alt: a,
263
264
  onError: ()=>{
264
- g(!0), b(!1), v(!0), a == null || a();
265
+ g(!0), b(!1), R(!0), s == null || s();
265
266
  },
266
- onLoad: u
267
- }));
267
+ onLoad: h
268
+ });
268
269
  return _react.useEffect(()=>{
269
- var x;
270
- (x = C.current) != null && x.complete && u();
270
+ var v;
271
+ (v = C.current) != null && v.complete && h();
271
272
  }, [
272
- u
273
+ h
273
274
  ]), /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
274
275
  children: [
275
- w && !M && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
276
+ w && !F && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
276
277
  style: {
277
278
  position: "absolute",
278
279
  width: "100%",
279
280
  height: "100%"
280
281
  },
281
- children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_skeletons.SkeletonRectangle, {
282
- width: s.width,
283
- height: s.height,
282
+ children: i.circular ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_skeletonbase.default, {
283
+ width: "100%",
284
+ height: "100%",
285
+ radius: "50%"
286
+ }) : /* @__PURE__ */ (0, _jsxruntime.jsx)(_skeletons.SkeletonRectangle, {
287
+ width: i.width,
288
+ height: i.height,
284
289
  noBorderRadius: m
285
290
  })
286
291
  }),
287
- f && F && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
292
+ f && L && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
288
293
  style: {
289
294
  position: "absolute",
290
295
  width: "100%",
291
296
  height: "100%",
292
297
  zIndex: 1
293
298
  },
294
- children: /* @__PURE__ */ (0, _jsxruntime.jsx)(Z, {
299
+ children: /* @__PURE__ */ (0, _jsxruntime.jsx)(J, {
300
+ circular: i.circular,
295
301
  noBorderRadius: m,
296
- border: s.border
302
+ border: i.border
297
303
  })
298
304
  }),
299
- !f && H
305
+ !f && T
300
306
  ]
301
307
  });
302
- }), G = /*#__PURE__*/ _react.forwardRef((_param, n)=>{
303
- var { aspectRatio: e = "1:1" } = _param, r = _object_without_properties(_param, [
304
- "aspectRatio"
305
- ]);
306
- const d = typeof e == "number" ? e : R[e];
307
- return /* @__PURE__ */ (0, _jsxruntime.jsx)(_aspectratiosupport.AspectRatioElement, {
308
+ }), X = /*#__PURE__*/ _react.forwardRef((e, a)=>{
309
+ var _e_aspectRatio;
310
+ const d = e.circular ? 1 : typeof e.aspectRatio == "number" ? e.aspectRatio : I[(_e_aspectRatio = e.aspectRatio) !== null && _e_aspectRatio !== void 0 ? _e_aspectRatio : k];
311
+ return /* @__PURE__ */ (0, _jsxruntime.jsx)(_aspectratiosupport.AspectRatioContainer, {
308
312
  style: {
309
313
  position: "relative"
310
314
  },
311
315
  aspectRatio: d,
312
- width: r.width,
313
- height: r.height,
314
- children: /* @__PURE__ */ (0, _jsxruntime.jsx)(q, _object_spread_props(_object_spread({
315
- aspectRatio: e
316
- }, r), {
317
- ref: n
316
+ width: e.width,
317
+ height: e.height,
318
+ dataAttributes: (0, _dom.getPrefixedDataAttributes)(e.dataAttributes, "Image"),
319
+ children: /* @__PURE__ */ (0, _jsxruntime.jsx)(Q, _object_spread_props(_object_spread({}, e), {
320
+ ref: a
318
321
  }))
319
322
  });
320
- }), c1 = G;
323
+ }), u1 = X;
package/dist/index.d.ts CHANGED
@@ -51,7 +51,7 @@ export { default as HorizontalScroll } from './horizontal-scroll';
51
51
  export { default as HighlightedCard } from './highlighted-card';
52
52
  export { default as Stepper } from './stepper';
53
53
  export { default as ProgressBar } from './progress-bar';
54
- export { MediaCard, DataCard, SnapCard, DisplayDataCard, DisplayMediaCard, PosterCard } from './card';
54
+ export { MediaCard, DataCard, SnapCard, DisplayDataCard, DisplayMediaCard, PosterCard, NakedCard, SmallNakedCard, } from './card';
55
55
  export { default as Hero } from './hero';
56
56
  export { default as Divider } from './divider';
57
57
  export { default as Menu } from './menu';
package/dist/index.js CHANGED
@@ -5175,6 +5175,9 @@ _export(exports, {
5175
5175
  MovistarLogo: function() {
5176
5176
  return _logo.MovistarLogo;
5177
5177
  },
5178
+ NakedCard: function() {
5179
+ return _card.NakedCard;
5180
+ },
5178
5181
  NavigationBar: function() {
5179
5182
  return _navigationbar.NavigationBar;
5180
5183
  },
@@ -5277,6 +5280,9 @@ _export(exports, {
5277
5280
  Slideshow: function() {
5278
5281
  return _carousel.Slideshow;
5279
5282
  },
5283
+ SmallNakedCard: function() {
5284
+ return _card.SmallNakedCard;
5285
+ },
5280
5286
  Snackbar: function() {
5281
5287
  return _snackbar.default;
5282
5288
  },
@@ -19,45 +19,48 @@ _export(exports, {
19
19
  return f;
20
20
  },
21
21
  content: function() {
22
- return a;
22
+ return b;
23
23
  },
24
24
  detail: function() {
25
25
  return r;
26
26
  },
27
27
  detailRight: function() {
28
- return t;
28
+ return a;
29
29
  },
30
30
  disabled: function() {
31
- return o;
31
+ return t;
32
32
  },
33
33
  dualActionContainer: function() {
34
- return i;
34
+ return d;
35
35
  },
36
36
  dualActionDivider: function() {
37
37
  return e;
38
38
  },
39
39
  dualActionLeft: function() {
40
- return d;
40
+ return i;
41
41
  },
42
42
  dualActionRight: function() {
43
- return g;
43
+ return o;
44
44
  },
45
45
  hoverBackground: function() {
46
- return u;
46
+ return c;
47
47
  },
48
48
  pointer: function() {
49
- return b;
49
+ return g;
50
50
  },
51
51
  right: function() {
52
- return l;
52
+ return u;
53
+ },
54
+ rightRestrictedWidth: function() {
55
+ return h;
53
56
  },
54
57
  rowBody: function() {
55
58
  return j;
56
59
  },
57
60
  rowContent: function() {
58
- return c;
61
+ return l;
59
62
  }
60
63
  });
61
64
  require("./sprinkles.css.ts.vanilla.css-mistica.js");
62
65
  require("./list.css.ts.vanilla.css-mistica.js");
63
- var _ = "_1y2v1nf64 _1y2v1nf6m _1y2v1nf6o", y = "_1y2v1nf6d _1y2v1nf9i _1y2v1nf8w _1y2v1nf6m", f = "_1y2v1nf64 _1y2v1nf6j", a = "_1y2v1nf64 _1y2v1nf8f _1y2v1nfa5", r = "_2buj9gd", t = "_2buj9gc", o = "_2buj9g0", i = "_1y2v1nf64 _1y2v1nf69 _1y2v1nf8w", e = "_2buj9gk _1y2v1nf64", d = "_1y2v1nf6r _1y2v1nf76 _1y2v1nf7l _1y2v1nf80 _1y2v1nfaa _1y2v1nf5y _1y2v1nf7q _1y2v1nf85 _1y2v1nf66 _1y2v1nf6p", g = "_2buj9gm _1y2v1nf6r _1y2v1nf76 _1y2v1nf7l _1y2v1nf80 _1y2v1nfaa _1y2v1nf5y _1y2v1nf7q _1y2v1nf85 _1y2v1nf64 _1y2v1nf6j _1y2v1nf6o _1y2v1nf8g _1y2v1nf8w", u = "_2buj9g1", b = "_1y2v1nfar", l = "_2buj9gb", j = "_1y2v1nf64 _1y2v1nf6a _1y2v1nf6q", c = "_1y2v1nf6r _1y2v1nf76 _1y2v1nf7l _1y2v1nf80 _1y2v1nf8f _1y2v1nfaa _1y2v1nf5y _1y2v1nf66 _1y2v1nf8w";
66
+ var _ = "_1y2v1nfb4 _1y2v1nfbm _1y2v1nfbo", y = "_1y2v1nfbd _1y2v1nfcu _1y2v1nfc8 _1y2v1nfbm", f = "_1y2v1nfb4 _1y2v1nfbj", b = "_1y2v1nfb4 _1y2v1nfbr _1y2v1nfdh", r = "_2buj9ge", a = "_2buj9gd", t = "_2buj9g0", d = "_1y2v1nfb4 _1y2v1nfb9 _1y2v1nfc8", e = "_2buj9gl _1y2v1nfb4", i = "_1y2v1nf5z _1y2v1nf78 _1y2v1nf8h _1y2v1nf9q _1y2v1nfdm _1y2v1nf5y _1y2v1nf8w _1y2v1nfa5 _1y2v1nfb6 _1y2v1nfbp", o = "_2buj9gn _1y2v1nf5z _1y2v1nf78 _1y2v1nf8h _1y2v1nf9q _1y2v1nfdm _1y2v1nf5y _1y2v1nf8w _1y2v1nfa5 _1y2v1nfb4 _1y2v1nfbj _1y2v1nfbo _1y2v1nfbs _1y2v1nfc8", c = "_2buj9g1", g = "_1y2v1nfe3", u = "_2buj9gb", h = "_2buj9gc", j = "_1y2v1nfb4 _1y2v1nfba _1y2v1nfbq", l = "_1y2v1nf5z _1y2v1nf78 _1y2v1nf8h _1y2v1nf9q _1y2v1nfbr _1y2v1nfdm _1y2v1nf5y _1y2v1nfb6 _1y2v1nfc8";
@@ -9,6 +9,7 @@ export declare const center: string;
9
9
  export declare const badge: string;
10
10
  export declare const control: string;
11
11
  export declare const right: string;
12
+ export declare const rightRestrictedWidth: string;
12
13
  export declare const detailRight: string;
13
14
  export declare const detail: string;
14
15
  export declare const centeredControl: string;