@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.
- package/css/mistica.css +1 -1
- package/dist/avatar.css-mistica.js +3 -3
- package/dist/badge.css-mistica.js +3 -3
- package/dist/box.d.ts +8 -8
- package/dist/box.js +28 -21
- package/dist/boxed.css-mistica.js +1 -1
- package/dist/button-group.css-mistica.js +1 -1
- package/dist/button-layout.css-mistica.js +8 -8
- package/dist/button.css-mistica.js +19 -19
- package/dist/callout.css-mistica.js +1 -1
- package/dist/card.css-mistica.js +27 -18
- package/dist/card.css.d.ts +3 -0
- package/dist/card.d.ts +37 -14
- package/dist/card.js +442 -268
- package/dist/carousel.css-mistica.js +16 -16
- package/dist/checkbox.css-mistica.js +10 -10
- package/dist/chip.css-mistica.js +4 -4
- package/dist/circle.css-mistica.js +2 -2
- package/dist/circle.d.ts +2 -0
- package/dist/circle.js +61 -7
- package/dist/community/advanced-data-card.css-mistica.js +69 -0
- package/dist/community/advanced-data-card.css.d.ts +20 -0
- package/dist/community/advanced-data-card.css.ts.vanilla.css-mistica.js +11 -0
- package/dist/community/advanced-data-card.d.ts +39 -0
- package/dist/community/advanced-data-card.js +317 -0
- package/dist/community/blocks.css-mistica.js +21 -0
- package/dist/community/blocks.css.d.ts +2 -0
- package/dist/community/blocks.css.ts.vanilla.css-mistica.js +11 -0
- package/dist/community/blocks.d.ts +73 -0
- package/dist/community/blocks.js +258 -0
- package/dist/community/index.d.ts +2 -0
- package/dist/community/index.js +31 -3
- package/dist/credit-card-number-field.css-mistica.js +3 -3
- package/dist/dialog.css-mistica.js +9 -9
- package/dist/double-field.css-mistica.js +2 -2
- package/dist/empty-state-card.css-mistica.js +1 -1
- package/dist/empty-state.css-mistica.js +4 -4
- package/dist/empty-state.js +4 -4
- package/dist/feedback.css-mistica.js +3 -3
- package/dist/fixed-footer-layout.css-mistica.js +2 -2
- package/dist/grid.css.d.ts +6 -6
- package/dist/header.css-mistica.js +24 -0
- package/dist/header.css.d.ts +3 -0
- package/dist/header.css.ts.vanilla.css-mistica.js +11 -0
- package/dist/header.d.ts +3 -0
- package/dist/header.js +121 -101
- package/dist/hero.css-mistica.js +4 -4
- package/dist/highlighted-card.css-mistica.js +5 -5
- package/dist/horizontal-scroll.css-mistica.js +1 -1
- package/dist/icon-button.css-mistica.js +1 -1
- package/dist/image.css-mistica.js +1 -1
- package/dist/image.d.ts +19 -6
- package/dist/image.js +64 -61
- package/dist/index.d.ts +1 -1
- package/dist/index.js +6 -0
- package/dist/list.css-mistica.js +14 -11
- package/dist/list.css.d.ts +1 -0
- package/dist/list.js +61 -59
- package/dist/loading-bar.css-mistica.js +5 -5
- package/dist/maybe-dismissable.css-mistica.js +1 -1
- package/dist/menu.css-mistica.js +2 -2
- package/dist/navigation-bar.css-mistica.js +16 -16
- package/dist/navigation-breadcrumbs.css-mistica.js +1 -1
- package/dist/package-version.js +1 -1
- package/dist/password-field.css-mistica.js +2 -2
- package/dist/popover.css-mistica.js +11 -11
- package/dist/progress-bar.css-mistica.js +3 -3
- package/dist/radio-button.css-mistica.js +12 -12
- package/dist/responsive-layout.css-mistica.js +2 -2
- package/dist/screen-reader-only.css-mistica.js +1 -1
- package/dist/select.css-mistica.js +12 -12
- package/dist/skeletons.css-mistica.js +3 -3
- package/dist/snackbar.css-mistica.js +5 -5
- package/dist/spinner.css-mistica.js +1 -1
- package/dist/sprinkles.css-mistica.js +648 -336
- package/dist/sprinkles.css.d.ts +36 -7
- package/dist/stack.css-mistica.js +7 -4
- package/dist/stack.css.d.ts +3 -0
- package/dist/stack.d.ts +4 -2
- package/dist/stack.js +20 -13
- package/dist/stacking-group.css-mistica.js +1 -1
- package/dist/stepper.css-mistica.js +9 -9
- package/dist/switch-component.css-mistica.js +21 -21
- package/dist/tabs.css-mistica.js +11 -11
- package/dist/tag.css-mistica.js +1 -1
- package/dist/text-field-base.css-mistica.js +11 -11
- package/dist/text-field-components.css-mistica.js +15 -15
- package/dist/text-link.css-mistica.js +5 -5
- package/dist/theme.d.ts +2 -0
- package/dist/theme.js +49 -41
- package/dist/tooltip.css-mistica.js +9 -9
- package/dist/touchable.css-mistica.js +3 -3
- package/dist/utils/aspect-ratio-support.css-mistica.js +4 -4
- package/dist/utils/aspect-ratio-support.d.ts +4 -2
- package/dist/utils/aspect-ratio-support.js +17 -16
- package/dist/utils/types.d.ts +5 -0
- package/dist/utils/utility-types.d.ts +7 -0
- package/dist/video.css-mistica.js +2 -2
- package/dist/video.js +26 -78
- package/dist-es/avatar.css-mistica.js +2 -2
- package/dist-es/badge.css-mistica.js +2 -2
- package/dist-es/box.js +32 -25
- package/dist-es/boxed.css-mistica.js +1 -1
- package/dist-es/button-group.css-mistica.js +1 -1
- package/dist-es/button-layout.css-mistica.js +7 -7
- package/dist-es/button.css-mistica.js +9 -9
- package/dist-es/callout.css-mistica.js +1 -1
- package/dist-es/card.css-mistica.js +4 -4
- package/dist-es/card.js +549 -384
- package/dist-es/carousel.css-mistica.js +2 -2
- package/dist-es/checkbox.css-mistica.js +6 -6
- package/dist-es/chip.css-mistica.js +4 -4
- package/dist-es/circle.css-mistica.js +2 -2
- package/dist-es/circle.js +66 -12
- package/dist-es/community/advanced-data-card.css-mistica.js +7 -0
- package/dist-es/community/advanced-data-card.css.ts.vanilla.css-mistica.js +2 -0
- package/dist-es/community/advanced-data-card.js +256 -0
- package/dist-es/community/blocks.css-mistica.js +4 -0
- package/dist-es/community/blocks.css.ts.vanilla.css-mistica.js +2 -0
- package/dist-es/community/blocks.js +224 -0
- package/dist-es/community/index.js +4 -2
- package/dist-es/credit-card-number-field.css-mistica.js +3 -3
- package/dist-es/dialog.css-mistica.js +5 -5
- package/dist-es/double-field.css-mistica.js +2 -2
- package/dist-es/empty-state-card.css-mistica.js +1 -1
- package/dist-es/empty-state.css-mistica.js +3 -3
- package/dist-es/empty-state.js +11 -11
- package/dist-es/feedback.css-mistica.js +2 -2
- package/dist-es/fixed-footer-layout.css-mistica.js +2 -2
- package/dist-es/header.css-mistica.js +4 -0
- package/dist-es/header.css.ts.vanilla.css-mistica.js +2 -0
- package/dist-es/header.js +141 -121
- package/dist-es/hero.css-mistica.js +2 -2
- package/dist-es/highlighted-card.css-mistica.js +5 -5
- package/dist-es/horizontal-scroll.css-mistica.js +1 -1
- package/dist-es/icon-button.css-mistica.js +1 -1
- package/dist-es/image.css-mistica.js +1 -1
- package/dist-es/image.js +76 -73
- package/dist-es/index.js +1710 -1710
- package/dist-es/list.css-mistica.js +2 -2
- package/dist-es/list.js +80 -78
- package/dist-es/loading-bar.css-mistica.js +2 -2
- package/dist-es/maybe-dismissable.css-mistica.js +1 -1
- package/dist-es/menu.css-mistica.js +2 -2
- package/dist-es/navigation-bar.css-mistica.js +9 -9
- package/dist-es/navigation-breadcrumbs.css-mistica.js +1 -1
- package/dist-es/package-version.js +1 -1
- package/dist-es/password-field.css-mistica.js +2 -2
- package/dist-es/popover.css-mistica.js +2 -2
- package/dist-es/progress-bar.css-mistica.js +2 -2
- package/dist-es/radio-button.css-mistica.js +6 -6
- package/dist-es/responsive-layout.css-mistica.js +2 -2
- package/dist-es/screen-reader-only.css-mistica.js +1 -1
- package/dist-es/select.css-mistica.js +10 -10
- package/dist-es/skeletons.css-mistica.js +2 -2
- package/dist-es/snackbar.css-mistica.js +2 -2
- package/dist-es/spinner.css-mistica.js +1 -1
- package/dist-es/sprinkles.css-mistica.js +648 -336
- package/dist-es/stack.css-mistica.js +6 -3
- package/dist-es/stack.js +27 -20
- package/dist-es/stacking-group.css-mistica.js +1 -1
- package/dist-es/stepper.css-mistica.js +2 -2
- package/dist-es/style.css +1 -1
- package/dist-es/switch-component.css-mistica.js +18 -18
- package/dist-es/tabs.css-mistica.js +7 -7
- package/dist-es/tag.css-mistica.js +1 -1
- package/dist-es/text-field-base.css-mistica.js +2 -2
- package/dist-es/text-field-components.css-mistica.js +2 -2
- package/dist-es/text-link.css-mistica.js +5 -5
- package/dist-es/theme.js +52 -44
- package/dist-es/tooltip.css-mistica.js +3 -3
- package/dist-es/touchable.css-mistica.js +2 -2
- package/dist-es/utils/aspect-ratio-support.css-mistica.js +3 -3
- package/dist-es/utils/aspect-ratio-support.js +17 -16
- package/dist-es/video.css-mistica.js +2 -2
- package/dist-es/video.js +36 -88
- package/package.json +2 -2
package/dist/hero.css-mistica.js
CHANGED
|
@@ -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
|
|
25
|
+
return _;
|
|
26
26
|
},
|
|
27
27
|
vars: function() {
|
|
28
|
-
return
|
|
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
|
|
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
|
|
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
|
|
28
|
-
withImage: "wrb8728 wrb8727
|
|
29
|
-
withoutImage: "wrb8729 wrb8727
|
|
30
|
-
},
|
|
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
|
|
22
|
+
var m = "_1gl3gmv2", v = "_1gl3gmv1 _1y2v1nfb4";
|
|
@@ -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
|
|
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
|
-
|
|
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
|
|
13
|
+
return Q;
|
|
14
14
|
},
|
|
15
15
|
ImageError: function() {
|
|
16
|
-
return
|
|
16
|
+
return J;
|
|
17
17
|
},
|
|
18
18
|
MediaBorderRadiusProvider: function() {
|
|
19
|
-
return
|
|
19
|
+
return m1;
|
|
20
20
|
},
|
|
21
21
|
RATIO: function() {
|
|
22
|
-
return
|
|
22
|
+
return I;
|
|
23
23
|
},
|
|
24
24
|
default: function() {
|
|
25
|
-
return
|
|
25
|
+
return u1;
|
|
26
26
|
},
|
|
27
27
|
useMediaBorderRadius: function() {
|
|
28
|
-
return
|
|
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
|
|
168
|
-
let { children: e , value:
|
|
169
|
-
return (0, _jsxruntime.jsx)(
|
|
170
|
-
value:
|
|
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
|
-
},
|
|
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
|
-
},
|
|
188
|
-
let { noBorderRadius: e , withIcon:
|
|
189
|
-
const
|
|
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:
|
|
198
|
+
backgroundColor: s ? _skincontractcssmistica.vars.colors.backgroundSkeletonInverse : _skincontractcssmistica.vars.colors.backgroundSkeleton,
|
|
198
199
|
boxSizing: "border-box",
|
|
199
|
-
border:
|
|
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:
|
|
203
|
-
children:
|
|
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:
|
|
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
|
-
}),
|
|
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
|
-
},
|
|
229
|
-
var { aspectRatio: e =
|
|
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(),
|
|
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
|
-
|
|
243
|
-
}, _imagecssmistica.FADE_IN_DURATION_MS),
|
|
243
|
+
R(!0);
|
|
244
|
+
}, _imagecssmistica.FADE_IN_DURATION_MS), n == null || n();
|
|
244
245
|
}, [
|
|
245
|
-
|
|
246
|
-
]),
|
|
247
|
-
/* @__PURE__ */ (0, _jsxruntime.jsx)("img",
|
|
248
|
-
style: _object_spread_props(_object_spread({},
|
|
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,
|
|
257
|
+
ref: (0, _common.combineRefs)(C, A),
|
|
257
258
|
src: c,
|
|
258
259
|
className: (0, _classnames.default)(_imagecssmistica.image, (0, _sprinklescssmistica.sprinkles)({
|
|
259
|
-
position:
|
|
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:
|
|
263
|
+
alt: a,
|
|
263
264
|
onError: ()=>{
|
|
264
|
-
g(!0), b(!1),
|
|
265
|
+
g(!0), b(!1), R(!0), s == null || s();
|
|
265
266
|
},
|
|
266
|
-
onLoad:
|
|
267
|
-
})
|
|
267
|
+
onLoad: h
|
|
268
|
+
});
|
|
268
269
|
return _react.useEffect(()=>{
|
|
269
|
-
var
|
|
270
|
-
(
|
|
270
|
+
var v;
|
|
271
|
+
(v = C.current) != null && v.complete && h();
|
|
271
272
|
}, [
|
|
272
|
-
|
|
273
|
+
h
|
|
273
274
|
]), /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
|
|
274
275
|
children: [
|
|
275
|
-
w && !
|
|
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)(
|
|
282
|
-
width:
|
|
283
|
-
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 &&
|
|
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)(
|
|
299
|
+
children: /* @__PURE__ */ (0, _jsxruntime.jsx)(J, {
|
|
300
|
+
circular: i.circular,
|
|
295
301
|
noBorderRadius: m,
|
|
296
|
-
border:
|
|
302
|
+
border: i.border
|
|
297
303
|
})
|
|
298
304
|
}),
|
|
299
|
-
!f &&
|
|
305
|
+
!f && T
|
|
300
306
|
]
|
|
301
307
|
});
|
|
302
|
-
}),
|
|
303
|
-
var
|
|
304
|
-
|
|
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:
|
|
313
|
-
height:
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
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
|
-
}),
|
|
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
|
},
|
package/dist/list.css-mistica.js
CHANGED
|
@@ -19,45 +19,48 @@ _export(exports, {
|
|
|
19
19
|
return f;
|
|
20
20
|
},
|
|
21
21
|
content: function() {
|
|
22
|
-
return
|
|
22
|
+
return b;
|
|
23
23
|
},
|
|
24
24
|
detail: function() {
|
|
25
25
|
return r;
|
|
26
26
|
},
|
|
27
27
|
detailRight: function() {
|
|
28
|
-
return
|
|
28
|
+
return a;
|
|
29
29
|
},
|
|
30
30
|
disabled: function() {
|
|
31
|
-
return
|
|
31
|
+
return t;
|
|
32
32
|
},
|
|
33
33
|
dualActionContainer: function() {
|
|
34
|
-
return
|
|
34
|
+
return d;
|
|
35
35
|
},
|
|
36
36
|
dualActionDivider: function() {
|
|
37
37
|
return e;
|
|
38
38
|
},
|
|
39
39
|
dualActionLeft: function() {
|
|
40
|
-
return
|
|
40
|
+
return i;
|
|
41
41
|
},
|
|
42
42
|
dualActionRight: function() {
|
|
43
|
-
return
|
|
43
|
+
return o;
|
|
44
44
|
},
|
|
45
45
|
hoverBackground: function() {
|
|
46
|
-
return
|
|
46
|
+
return c;
|
|
47
47
|
},
|
|
48
48
|
pointer: function() {
|
|
49
|
-
return
|
|
49
|
+
return g;
|
|
50
50
|
},
|
|
51
51
|
right: function() {
|
|
52
|
-
return
|
|
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
|
|
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 _ = "
|
|
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";
|
package/dist/list.css.d.ts
CHANGED
|
@@ -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;
|