@telefonica/mistica 12.1.0 → 12.2.0

package/dist/grid-layout.js

@@ -6,6 +6,7 @@ exports.default = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var React = _interopRequireWildcard(require("react"));
 var _jss = require("./jss");
+var _dom = require("./utils/dom");
 function _interopRequireWildcard(obj) {
     if (obj && obj.__esModule) {
         return obj;
@@ -40,6 +41,22 @@ function _defineProperty(obj, key, value) {
     }
     return obj;
 }
+function _objectSpread(target) {
+    var _arguments = arguments, _loop = function(i) {
+        var source = _arguments[i] != null ? _arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _defineProperty(target, key, source[key]);
+        });
+    };
+    for(var i = 1; i < arguments.length; i++)_loop(i);
+    return target;
+}
 var useStyles = (0, _jss).createUseStyles(function(theme) {
     var _obj, _obj1, _obj2, _obj3, _obj4, _obj5, _obj6, _obj7;
     return {
@@ -51,58 +68,96 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
         }), _defineProperty(_obj, theme.mq.desktop, {
             gridTemplateColumns: "repeat(12, 1fr)",
             gridColumnGap: 16
-        }), _defineProperty(_obj, theme.mq.tablet, {
-            gridTemplateColumns: "minmax(0, 1fr)",
-            gridColumnGap: 16
-        }), _defineProperty(_obj, theme.mq.mobile, {
+        }), _defineProperty(_obj, theme.mq.tabletOrSmaller, {
             gridTemplateColumns: "minmax(0, 1fr)",
-            gridColumnGap: 16
+            gridColumnGap: 16,
+            gap: function gap(param) {
+                var verticalSpace = param.verticalSpace;
+                return verticalSpace;
+            }
         }), _obj),
         span1: {
-            gridColumn: "span 1"
+            gridColumn: "span 1",
+            gap: function gap(param) {
+                var verticalSpace = param.verticalSpace;
+                return verticalSpace;
+            }
         },
         span3: (_obj1 = {}, _defineProperty(_obj1, theme.mq.desktopOrBigger, {
             gridColumn: "span 3"
         }), _defineProperty(_obj1, theme.mq.tabletOrSmaller, {
-            gridColumn: "span 1"
+            gridColumn: "span 1",
+            gap: function gap(param) {
+                var verticalSpace = param.verticalSpace;
+                return verticalSpace;
+            }
         }), _obj1),
         span4: (_obj2 = {}, _defineProperty(_obj2, theme.mq.desktopOrBigger, {
             gridColumn: "span 4"
         }), _defineProperty(_obj2, theme.mq.tabletOrSmaller, {
-            gridColumn: "span 1"
+            gridColumn: "span 1",
+            gap: function gap(param) {
+                var verticalSpace = param.verticalSpace;
+                return verticalSpace;
+            }
         }), _obj2),
         span5: (_obj3 = {}, _defineProperty(_obj3, theme.mq.desktopOrBigger, {
             gridColumn: "span 5"
         }), _defineProperty(_obj3, theme.mq.tabletOrSmaller, {
-            gridColumn: "span 1"
+            gridColumn: "span 1",
+            gap: function gap(param) {
+                var verticalSpace = param.verticalSpace;
+                return verticalSpace;
+            }
         }), _obj3),
         span6: (_obj4 = {}, _defineProperty(_obj4, theme.mq.desktopOrBigger, {
             gridColumn: "span 6"
         }), _defineProperty(_obj4, theme.mq.tabletOrSmaller, {
-            gridColumn: "span 1"
+            gridColumn: "span 1",
+            gap: function gap(param) {
+                var verticalSpace = param.verticalSpace;
+                return verticalSpace;
+            }
         }), _obj4),
         span8: (_obj5 = {}, _defineProperty(_obj5, theme.mq.desktopOrBigger, {
             gridColumn: "span 8"
         }), _defineProperty(_obj5, theme.mq.tabletOrSmaller, {
-            gridColumn: "span 1"
+            gridColumn: "span 1",
+            gap: function gap(param) {
+                var verticalSpace = param.verticalSpace;
+                return verticalSpace;
+            }
         }), _obj5),
         span9: (_obj6 = {}, _defineProperty(_obj6, theme.mq.desktopOrBigger, {
             gridColumn: "span 9"
         }), _defineProperty(_obj6, theme.mq.tabletOrSmaller, {
-            gridColumn: "span 1"
+            gridColumn: "span 1",
+            gap: function gap(param) {
+                var verticalSpace = param.verticalSpace;
+                return verticalSpace;
+            }
         }), _obj6),
         span10: (_obj7 = {}, _defineProperty(_obj7, theme.mq.desktopOrBigger, {
             gridColumn: "span 10"
         }), _defineProperty(_obj7, theme.mq.tabletOrSmaller, {
-            gridColumn: "span 1"
+            gridColumn: "span 1",
+            gap: function gap(param) {
+                var verticalSpace = param.verticalSpace;
+                return verticalSpace;
+            }
         }), _obj7)
     };
 });
 var GridLayout = function GridLayout(props) {
-    var classes = useStyles();
+    var _verticalSpace;
+    var classes = useStyles({
+        verticalSpace: (_verticalSpace = props.verticalSpace) !== null && _verticalSpace !== void 0 ? _verticalSpace : 0
+    });
+    var dataAttributes = (0, _dom).getPrefixedDataAttributes(props.dataAttributes);
     if (props.template === "6+6") {
-        return /*#__PURE__*/ (0, _jsxRuntime).jsxs("div", {
-            className: classes.grid,
+        return /*#__PURE__*/ (0, _jsxRuntime).jsxs("div", _objectSpread({
+            className: classes.grid
+        }, dataAttributes, {
             children: [
                 /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
                     className: classes.span6,
@@ -113,11 +168,12 @@ var GridLayout = function GridLayout(props) {
                     children: props.right
                 })
             ]
-        });
+        }));
     }
     if (props.template === "8+4") {
-        return /*#__PURE__*/ (0, _jsxRuntime).jsxs("div", {
-            className: classes.grid,
+        return /*#__PURE__*/ (0, _jsxRuntime).jsxs("div", _objectSpread({
+            className: classes.grid
+        }, dataAttributes, {
             children: [
                 /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
                     className: classes.span8,
@@ -128,11 +184,12 @@ var GridLayout = function GridLayout(props) {
                     children: props.right
                 })
             ]
-        });
+        }));
     }
     if (props.template === "4+6") {
-        return /*#__PURE__*/ (0, _jsxRuntime).jsxs("div", {
-            className: classes.grid,
+        return /*#__PURE__*/ (0, _jsxRuntime).jsxs("div", _objectSpread({
+            className: classes.grid
+        }, dataAttributes, {
             children: [
                 /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
                     className: classes.span4,
@@ -149,11 +206,12 @@ var GridLayout = function GridLayout(props) {
                     className: classes.span1
                 })
             ]
-        });
+        }));
     }
     if (props.template === "5+4") {
-        return /*#__PURE__*/ (0, _jsxRuntime).jsxs("div", {
-            className: classes.grid,
+        return /*#__PURE__*/ (0, _jsxRuntime).jsxs("div", _objectSpread({
+            className: classes.grid
+        }, dataAttributes, {
             children: [
                 /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
                     className: classes.span1
@@ -173,11 +231,12 @@ var GridLayout = function GridLayout(props) {
                     className: classes.span1
                 })
             ]
-        });
+        }));
     }
     if (props.template === "3+9") {
-        return /*#__PURE__*/ (0, _jsxRuntime).jsxs("div", {
-            className: classes.grid,
+        return /*#__PURE__*/ (0, _jsxRuntime).jsxs("div", _objectSpread({
+            className: classes.grid
+        }, dataAttributes, {
             children: [
                 /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
                     className: classes.span3,
@@ -188,11 +247,12 @@ var GridLayout = function GridLayout(props) {
                     children: props.right
                 })
             ]
-        });
+        }));
     }
     if (props.template === "10") {
-        return /*#__PURE__*/ (0, _jsxRuntime).jsxs("div", {
-            className: classes.grid,
+        return /*#__PURE__*/ (0, _jsxRuntime).jsxs("div", _objectSpread({
+            className: classes.grid
+        }, dataAttributes, {
             children: [
                 /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
                     className: classes.span1
@@ -205,12 +265,13 @@ var GridLayout = function GridLayout(props) {
                     className: classes.span1
                 })
             ]
-        });
+        }));
     }
-    return /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
-        className: classes.grid,
+    return /*#__PURE__*/ (0, _jsxRuntime).jsx("div", _objectSpread({
+        className: classes.grid
+    }, dataAttributes, {
         children: props.children
-    });
+    }));
 };
 var _default = GridLayout;
 exports.default = _default;

package/dist/grid-layout.js.flow

@@ -1,35 +1,67 @@
 // @flow
 
 import * as React from "react";
-declare type PropsChildren = { children: React.Node };
+import type { DataAttributes } from "./utils/types";
+declare type VerticalSpace =
+  | 0
+  | 2
+  | 4
+  | 8
+  | 12
+  | 16
+  | 24
+  | 32
+  | 40
+  | 48
+  | 56
+  | 64
+  | 72
+  | 80;
+declare type PropsChildren = {
+  children: React.Node,
+  verticalSpace?: VerticalSpace,
+  dataAttributes?: DataAttributes,
+};
 declare type PropsTemplate6_6 = {
   template: "6+6",
   left: React.Node,
   right: React.Node,
+  verticalSpace?: VerticalSpace,
+  dataAttributes?: DataAttributes,
 };
 declare type PropsTemplate8_4 = {
   template: "8+4",
   left: React.Node,
   right: React.Node,
+  verticalSpace?: VerticalSpace,
+  dataAttributes?: DataAttributes,
 };
 declare type PropsTemplate4_6 = {
   template: "4+6",
   left: React.Node,
   right: React.Node,
+  verticalSpace?: VerticalSpace,
+  dataAttributes?: DataAttributes,
 };
 declare type PropsTemplate5_4 = {
   template: "5+4",
   left: React.Node,
   right: React.Node,
+  verticalSpace?: VerticalSpace,
+  dataAttributes?: DataAttributes,
 };
 declare type PropsTemplate3_9 = {
   template: "3+9",
   left: React.Node,
   right: React.Node,
+  verticalSpace?: VerticalSpace,
+  dataAttributes?: DataAttributes,
 };
 declare type PropsTemplate10 = {
   template: "10",
   children: React.Node,
+  verticalSpace?: VerticalSpace,
+  dataAttributes?: DataAttributes,
 };
 declare type Props =
   | PropsChildren

package/dist/header.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import NavigationBreadcrumbs from './navigation-breadcrumbs';
 import { ButtonPrimary, ButtonSecondary } from './button';
-import type { RendersElement, RendersNullableElement } from './utils/types';
+import type { DataAttributes, RendersElement, RendersNullableElement } from './utils/types';
 import type { TextPresetProps } from './text';
 declare type OverridableTextProps = {
     color?: TextPresetProps['color'];
@@ -20,6 +20,7 @@ declare type HeaderProps = {
     secondaryButton?: RendersNullableElement<typeof ButtonSecondary>;
     subtitle?: RichText;
     isErrorAmount?: boolean;
+    dataAttributes?: DataAttributes;
 };
 export declare const Header: React.FC<HeaderProps>;
 declare type MainSectionHeaderProps = {
@@ -35,6 +36,7 @@ declare type HeaderLayoutProps = {
     extra?: React.ReactNode;
     sideBySideExtraOnDesktop?: boolean;
     children?: void;
+    dataAttributes?: DataAttributes;
 };
 export declare const HeaderLayout: React.FC<HeaderLayoutProps>;
 declare type MainSectionHeaderLayoutProps = {

package/dist/header.js

@@ -98,7 +98,7 @@ function _objectWithoutPropertiesLoose(source, excluded) {
     return target;
 }
 var Header = function Header(param) {
-    var pretitle = param.pretitle, title = param.title, preamount = param.preamount, amount = param.amount, button = param.button, subtitle = param.subtitle, isErrorAmount = param.isErrorAmount, secondaryButton = param.secondaryButton;
+    var pretitle = param.pretitle, title = param.title, preamount = param.preamount, amount = param.amount, button = param.button, subtitle = param.subtitle, isErrorAmount = param.isErrorAmount, secondaryButton = param.secondaryButton, dataAttributes = param.dataAttributes;
     var isTabletOrSmaller = (0, _hooks).useScreenSize().isTabletOrSmaller;
     var theme = (0, _hooks).useTheme();
     var isInverse = (0, _themeVariantContext).useIsInverseVariant();
@@ -121,6 +121,7 @@ var Header = function Header(param) {
     };
     return /*#__PURE__*/ (0, _jsxRuntime).jsxs(_stack.default, {
         space: isTabletOrSmaller ? 24 : 32,
+        dataAttributes: dataAttributes,
         children: [
             (title || pretitle) && /*#__PURE__*/ (0, _jsxRuntime).jsx(_box.default, {
                 paddingRight: 16,
@@ -202,13 +203,14 @@ var useHeaderLayoutStyles = (0, _jss).createUseStyles(function(theme) {
     };
 });
 var HeaderLayout = function HeaderLayout(param) {
-    var _isInverse = param.isInverse, isInverse = _isInverse === void 0 ? true : _isInverse, breadcrumbs = param.breadcrumbs, header = param.header, extra = param.extra, _sideBySideExtraOnDesktop = param.sideBySideExtraOnDesktop, sideBySideExtraOnDesktop = _sideBySideExtraOnDesktop === void 0 ? false : _sideBySideExtraOnDesktop;
+    var _isInverse = param.isInverse, isInverse = _isInverse === void 0 ? true : _isInverse, breadcrumbs = param.breadcrumbs, header = param.header, extra = param.extra, _sideBySideExtraOnDesktop = param.sideBySideExtraOnDesktop, sideBySideExtraOnDesktop = _sideBySideExtraOnDesktop === void 0 ? false : _sideBySideExtraOnDesktop, dataAttributes = param.dataAttributes;
     var classes = useHeaderLayoutStyles({
         isInverse: isInverse
     });
     var isTabletOrSmaller = (0, _hooks).useScreenSize().isTabletOrSmaller;
     return /*#__PURE__*/ (0, _jsxRuntime).jsx(_responsiveLayout.default, {
         className: classes.background,
+        dataAttributes: dataAttributes,
         children: /*#__PURE__*/ (0, _jsxRuntime).jsxs(_themeVariantContext.ThemeVariant, {
             isInverse: isInverse,
             children: [

package/dist/header.js.flow

@@ -3,7 +3,11 @@
 import * as React from "react";
 import NavigationBreadcrumbs from "./navigation-breadcrumbs";
 import { ButtonPrimary, ButtonSecondary } from "./button";
-import type { RendersElement, RendersNullableElement } from "./utils/types";
+import type {
+  DataAttributes,
+  RendersElement,
+  RendersNullableElement,
+} from "./utils/types";
 import type { TextPresetProps } from "./text";
 declare type OverridableTextProps = {
   color?: $PropertyType<TextPresetProps, "color">,
@@ -27,6 +31,7 @@ declare type HeaderProps = {
   secondaryButton?: RendersNullableElement<typeof ButtonSecondary>,
   subtitle?: RichText,
   isErrorAmount?: boolean,
+  dataAttributes?: DataAttributes,
 };
 declare export var Header: React.ComponentType<HeaderProps>;
 declare type MainSectionHeaderProps = {
@@ -43,6 +48,7 @@ declare type HeaderLayoutProps = {
   header: React.Node,
   extra?: React.Node,
   sideBySideExtraOnDesktop?: boolean,
+  dataAttributes?: DataAttributes,
 };
 declare export var HeaderLayout: React.ComponentType<HeaderLayoutProps>;
 declare type MainSectionHeaderLayoutProps = {

package/dist/index.d.ts

@@ -20,7 +20,7 @@ export { FeedbackScreen, ErrorFeedbackScreen, InfoFeedbackScreen, SuccessFeedbac
 export { default as IconButton } from './icon-button';
 export { default as Popover } from './popover';
 export { default as FocusTrap } from './focus-trap';
-export { confirm, alert } from './dialog';
+export { confirm, alert, dialog } from './dialog';
 export { default as Badge } from './badge';
 export { default as TextLink } from './text-link';
 export { default as Overlay } from './overlay';
@@ -86,6 +86,7 @@ export { default as IconChevron } from './icons/icon-chevron';
 export { default as IconError } from './icons/icon-error';
 export { default as IconSuccess } from './icons/icon-success';
 export { default as IconSuccessVivo } from './icons/icon-success-vivo';
+export { SkeletonCircle, SkeletonRow, SkeletonLine, SkeletonRectangle, SkeletonText } from './skeletons';
 export { default as Circle } from './circle';
 export { useTheme, useScreenSize, useElementDimensions, useAriaId, useWindowSize, useWindowHeight, useWindowWidth, useIsInViewport, } from './hooks';
 export type { ThemeConfig, ColorScheme, EventFormat } from './theme';
@@ -1737,3 +1738,6 @@ export { default as IconWorkflowRegular } from './generated/mistica-icons/icon-w
 export { default as IconWorkshopMeetingFilled } from './generated/mistica-icons/icon-workshop-meeting-filled';
 export { default as IconWorkshopMeetingLight } from './generated/mistica-icons/icon-workshop-meeting-light';
 export { default as IconWorkshopMeetingRegular } from './generated/mistica-icons/icon-workshop-meeting-regular';
+export { default as IconWorldDeviceFilled } from './generated/mistica-icons/icon-world-device-filled';
+export { default as IconWorldDeviceLight } from './generated/mistica-icons/icon-world-device-light';
+export { default as IconWorldDeviceRegular } from './generated/mistica-icons/icon-world-device-regular';

package/dist/index.js

@@ -206,6 +206,12 @@ Object.defineProperty(exports, "alert", {
         return _dialog.alert;
     }
 });
+Object.defineProperty(exports, "dialog", {
+    enumerable: true,
+    get: function() {
+        return _dialog.dialog;
+    }
+});
 Object.defineProperty(exports, "Badge", {
     enumerable: true,
     get: function() {
@@ -764,6 +770,36 @@ Object.defineProperty(exports, "IconSuccessVivo", {
         return _iconSuccessVivo.default;
     }
 });
+Object.defineProperty(exports, "SkeletonCircle", {
+    enumerable: true,
+    get: function() {
+        return _skeletons.SkeletonCircle;
+    }
+});
+Object.defineProperty(exports, "SkeletonRow", {
+    enumerable: true,
+    get: function() {
+        return _skeletons.SkeletonRow;
+    }
+});
+Object.defineProperty(exports, "SkeletonLine", {
+    enumerable: true,
+    get: function() {
+        return _skeletons.SkeletonLine;
+    }
+});
+Object.defineProperty(exports, "SkeletonRectangle", {
+    enumerable: true,
+    get: function() {
+        return _skeletons.SkeletonRectangle;
+    }
+});
+Object.defineProperty(exports, "SkeletonText", {
+    enumerable: true,
+    get: function() {
+        return _skeletons.SkeletonText;
+    }
+});
 Object.defineProperty(exports, "Circle", {
     enumerable: true,
     get: function() {
@@ -10724,6 +10760,24 @@ Object.defineProperty(exports, "IconWorkshopMeetingRegular", {
         return _iconWorkshopMeetingRegular.default;
     }
 });
+Object.defineProperty(exports, "IconWorldDeviceFilled", {
+    enumerable: true,
+    get: function() {
+        return _iconWorldDeviceFilled.default;
+    }
+});
+Object.defineProperty(exports, "IconWorldDeviceLight", {
+    enumerable: true,
+    get: function() {
+        return _iconWorldDeviceLight.default;
+    }
+});
+Object.defineProperty(exports, "IconWorldDeviceRegular", {
+    enumerable: true,
+    get: function() {
+        return _iconWorldDeviceRegular.default;
+    }
+});
 var _packageVersion = require("./package-version");
 var _jss = require("./jss");
 var _themeContext = _interopRequireDefault(require("./theme-context"));
@@ -10811,6 +10865,7 @@ var _iconChevron = _interopRequireDefault(require("./icons/icon-chevron"));
 var _iconError = _interopRequireDefault(require("./icons/icon-error"));
 var _iconSuccess = _interopRequireDefault(require("./icons/icon-success"));
 var _iconSuccessVivo = _interopRequireDefault(require("./icons/icon-success-vivo"));
+var _skeletons = require("./skeletons");
 var _circle = _interopRequireDefault(require("./circle"));
 var _hooks = require("./hooks");
 var _analytics = require("./utils/analytics");
@@ -12451,6 +12506,9 @@ var _iconWorkflowRegular = _interopRequireDefault(require("./generated/mistica-i
 var _iconWorkshopMeetingFilled = _interopRequireDefault(require("./generated/mistica-icons/icon-workshop-meeting-filled"));
 var _iconWorkshopMeetingLight = _interopRequireDefault(require("./generated/mistica-icons/icon-workshop-meeting-light"));
 var _iconWorkshopMeetingRegular = _interopRequireDefault(require("./generated/mistica-icons/icon-workshop-meeting-regular"));
+var _iconWorldDeviceFilled = _interopRequireDefault(require("./generated/mistica-icons/icon-world-device-filled"));
+var _iconWorldDeviceLight = _interopRequireDefault(require("./generated/mistica-icons/icon-world-device-light"));
+var _iconWorldDeviceRegular = _interopRequireDefault(require("./generated/mistica-icons/icon-world-device-regular"));
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj

package/dist/index.js.flow

@@ -39,7 +39,7 @@ declare export {
 declare export { default as IconButton } from "./icon-button";
 declare export { default as Popover } from "./popover";
 declare export { default as FocusTrap } from "./focus-trap";
-declare export { confirm, alert } from "./dialog";
+declare export { confirm, alert, dialog } from "./dialog";
 declare export { default as Badge } from "./badge";
 declare export { default as TextLink } from "./text-link";
 declare export { default as Overlay } from "./overlay";
@@ -134,6 +134,13 @@ declare export { default as IconChevron } from "./icons/icon-chevron";
 declare export { default as IconError } from "./icons/icon-error";
 declare export { default as IconSuccess } from "./icons/icon-success";
 declare export { default as IconSuccessVivo } from "./icons/icon-success-vivo";
+declare export {
+  SkeletonCircle,
+  SkeletonRow,
+  SkeletonLine,
+  SkeletonRectangle,
+  SkeletonText,
+} from "./skeletons";
 declare export { default as Circle } from "./circle";
 declare export {
   useTheme,
@@ -1804,3 +1811,6 @@ declare export { default as IconWorkflowRegular } from "./generated/mistica-icon
 declare export { default as IconWorkshopMeetingFilled } from "./generated/mistica-icons/icon-workshop-meeting-filled";
 declare export { default as IconWorkshopMeetingLight } from "./generated/mistica-icons/icon-workshop-meeting-light";
 declare export { default as IconWorkshopMeetingRegular } from "./generated/mistica-icons/icon-workshop-meeting-regular";
+declare export { default as IconWorldDeviceFilled } from "./generated/mistica-icons/icon-world-device-filled";
+declare export { default as IconWorldDeviceLight } from "./generated/mistica-icons/icon-world-device-light";
+declare export { default as IconWorldDeviceRegular } from "./generated/mistica-icons/icon-world-device-regular";