@telefonica/mistica 12.1.0 → 12.3.0

package/dist-es/grid-layout.js

@@ -11,9 +11,27 @@ function _defineProperty(obj, key, value) {
     }
     return obj;
 }
+function _objectSpread(target) {
+    for(var i = 1; i < arguments.length; 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]);
+        });
+    }
+    return target;
+}
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
+import { useScreenSize } from "./hooks";
+import ContainerTypeContext from "./container-type-context";
 import { createUseStyles } from "./jss";
+import { getPrefixedDataAttributes } from "./utils/dom";
 var useStyles = createUseStyles(function(theme) {
     var _obj, _obj1, _obj2, _obj3, _obj4, _obj5, _obj6, _obj7;
     return {
@@ -25,165 +43,246 @@ var useStyles = createUseStyles(function(theme) {
         }), _defineProperty(_obj, theme.mq.desktop, {
             gridTemplateColumns: "repeat(12, 1fr)",
             gridColumnGap: 16
-        }), _defineProperty(_obj, theme.mq.tablet, {
+        }), _defineProperty(_obj, theme.mq.tabletOrSmaller, {
             gridTemplateColumns: "minmax(0, 1fr)",
-            gridColumnGap: 16
-        }), _defineProperty(_obj, theme.mq.mobile, {
-            gridTemplateColumns: "minmax(0, 1fr)",
-            gridColumnGap: 16
+            gridColumnGap: 16,
+            gap: function(param) {
+                var verticalSpace = param.verticalSpace;
+                return verticalSpace;
+            }
         }), _obj),
         span1: {
-            gridColumn: "span 1"
+            gridColumn: "span 1",
+            gap: function(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(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(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(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(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(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(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(param) {
+                var verticalSpace = param.verticalSpace;
+                return verticalSpace;
+            }
         }), _obj7)
     };
 });
 var GridLayout = function(props) {
-    var classes = useStyles();
+    var _verticalSpace;
+    var classes = useStyles({
+        verticalSpace: (_verticalSpace = props.verticalSpace) !== null && _verticalSpace !== void 0 ? _verticalSpace : 0
+    });
+    var dataAttributes = getPrefixedDataAttributes(props.dataAttributes);
+    var ref = useScreenSize(), isMobile = ref.isMobile, isTablet = ref.isTablet;
+    var getContainerType = function(containerType) {
+        return isMobile ? "mobile-column" : isTablet ? "tablet-column" : containerType;
+    };
     if (props.template === "6+6") {
-        return /*#__PURE__*/ _jsxs("div", {
-            className: classes.grid,
+        return /*#__PURE__*/ _jsxs("div", _objectSpread({
+            className: classes.grid
+        }, dataAttributes, {
             children: [
-                /*#__PURE__*/ _jsx("div", {
-                    className: classes.span6,
-                    children: props.left
+                /*#__PURE__*/ _jsx(ContainerTypeContext.Provider, {
+                    value: getContainerType("desktop-medium-column"),
+                    children: /*#__PURE__*/ _jsx("div", {
+                        className: classes.span6,
+                        children: props.left
+                    })
                 }),
-                /*#__PURE__*/ _jsx("div", {
-                    className: classes.span6,
-                    children: props.right
+                /*#__PURE__*/ _jsx(ContainerTypeContext.Provider, {
+                    value: getContainerType("desktop-medium-column"),
+                    children: /*#__PURE__*/ _jsx("div", {
+                        className: classes.span6,
+                        children: props.right
+                    })
                 })
             ]
-        });
+        }));
     }
     if (props.template === "8+4") {
-        return /*#__PURE__*/ _jsxs("div", {
-            className: classes.grid,
+        return /*#__PURE__*/ _jsxs("div", _objectSpread({
+            className: classes.grid
+        }, dataAttributes, {
             children: [
-                /*#__PURE__*/ _jsx("div", {
-                    className: classes.span8,
-                    children: props.left
+                /*#__PURE__*/ _jsx(ContainerTypeContext.Provider, {
+                    value: getContainerType("desktop-medium-column"),
+                    children: /*#__PURE__*/ _jsx("div", {
+                        className: classes.span8,
+                        children: props.left
+                    })
                 }),
-                /*#__PURE__*/ _jsx("div", {
-                    className: classes.span4,
-                    children: props.right
+                /*#__PURE__*/ _jsx(ContainerTypeContext.Provider, {
+                    value: getContainerType("desktop-small-column"),
+                    children: /*#__PURE__*/ _jsx("div", {
+                        className: classes.span4,
+                        children: props.right
+                    })
                 })
             ]
-        });
+        }));
     }
     if (props.template === "4+6") {
-        return /*#__PURE__*/ _jsxs("div", {
-            className: classes.grid,
+        return /*#__PURE__*/ _jsxs("div", _objectSpread({
+            className: classes.grid
+        }, dataAttributes, {
             children: [
-                /*#__PURE__*/ _jsx("div", {
-                    className: classes.span4,
-                    children: props.left
+                /*#__PURE__*/ _jsx(ContainerTypeContext.Provider, {
+                    value: getContainerType("desktop-small-column"),
+                    children: /*#__PURE__*/ _jsx("div", {
+                        className: classes.span4,
+                        children: props.left
+                    })
                 }),
                 /*#__PURE__*/ _jsx("div", {
                     className: classes.span1
                 }),
-                /*#__PURE__*/ _jsx("div", {
-                    className: classes.span6,
-                    children: props.right
+                /*#__PURE__*/ _jsx(ContainerTypeContext.Provider, {
+                    value: getContainerType("desktop-medium-column"),
+                    children: /*#__PURE__*/ _jsx("div", {
+                        className: classes.span6,
+                        children: props.right
+                    })
                 }),
                 /*#__PURE__*/ _jsx("div", {
                     className: classes.span1
                 })
             ]
-        });
+        }));
     }
     if (props.template === "5+4") {
-        return /*#__PURE__*/ _jsxs("div", {
-            className: classes.grid,
+        return /*#__PURE__*/ _jsxs("div", _objectSpread({
+            className: classes.grid
+        }, dataAttributes, {
             children: [
                 /*#__PURE__*/ _jsx("div", {
                     className: classes.span1
                 }),
-                /*#__PURE__*/ _jsx("div", {
-                    className: classes.span5,
-                    children: props.left
+                /*#__PURE__*/ _jsx(ContainerTypeContext.Provider, {
+                    value: getContainerType("desktop-small-column"),
+                    children: /*#__PURE__*/ _jsx("div", {
+                        className: classes.span5,
+                        children: props.left
+                    })
                 }),
                 /*#__PURE__*/ _jsx("div", {
                     className: classes.span1
                 }),
-                /*#__PURE__*/ _jsx("div", {
-                    className: classes.span4,
-                    children: props.right
+                /*#__PURE__*/ _jsx(ContainerTypeContext.Provider, {
+                    value: getContainerType("desktop-small-column"),
+                    children: /*#__PURE__*/ _jsx("div", {
+                        className: classes.span4,
+                        children: props.right
+                    })
                 }),
                 /*#__PURE__*/ _jsx("div", {
                     className: classes.span1
                 })
             ]
-        });
+        }));
     }
     if (props.template === "3+9") {
-        return /*#__PURE__*/ _jsxs("div", {
-            className: classes.grid,
+        return /*#__PURE__*/ _jsxs("div", _objectSpread({
+            className: classes.grid
+        }, dataAttributes, {
             children: [
-                /*#__PURE__*/ _jsx("div", {
-                    className: classes.span3,
-                    children: props.left
+                /*#__PURE__*/ _jsx(ContainerTypeContext.Provider, {
+                    value: getContainerType("desktop-small-column"),
+                    children: /*#__PURE__*/ _jsx("div", {
+                        className: classes.span3,
+                        children: props.left
+                    })
                 }),
-                /*#__PURE__*/ _jsx("div", {
-                    className: classes.span9,
-                    children: props.right
+                /*#__PURE__*/ _jsx(ContainerTypeContext.Provider, {
+                    value: getContainerType("desktop-medium-column"),
+                    children: /*#__PURE__*/ _jsx("div", {
+                        className: classes.span9,
+                        children: props.right
+                    })
                 })
             ]
-        });
+        }));
     }
     if (props.template === "10") {
-        return /*#__PURE__*/ _jsxs("div", {
-            className: classes.grid,
+        return /*#__PURE__*/ _jsxs("div", _objectSpread({
+            className: classes.grid
+        }, dataAttributes, {
             children: [
                 /*#__PURE__*/ _jsx("div", {
                     className: classes.span1
                 }),
-                /*#__PURE__*/ _jsx("div", {
-                    className: classes.span10,
-                    children: props.children
+                /*#__PURE__*/ _jsx(ContainerTypeContext.Provider, {
+                    value: getContainerType("desktop-wide-column"),
+                    children: /*#__PURE__*/ _jsx("div", {
+                        className: classes.span10,
+                        children: props.children
+                    })
                 }),
                 /*#__PURE__*/ _jsx("div", {
                     className: classes.span1
                 })
             ]
-        });
+        }));
     }
-    return /*#__PURE__*/ _jsx("div", {
-        className: classes.grid,
+    return /*#__PURE__*/ _jsx("div", _objectSpread({
+        className: classes.grid
+    }, dataAttributes, {
         children: props.children
-    });
+    }));
 };
 export default GridLayout;

package/dist-es/header.js

@@ -66,7 +66,7 @@ import OverscrollColor from "./overscroll-color-context";
 import { Text8, Text7, Text6, Text3 } from "./text";
 import ButtonGroup from "./button-group";
 var Header = function(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 = useScreenSize().isTabletOrSmaller;
     var theme = useTheme();
     var isInverse = useIsInverseVariant();
@@ -89,6 +89,7 @@ var Header = function(param) {
     };
     return /*#__PURE__*/ _jsxs(Stack, {
         space: isTabletOrSmaller ? 24 : 32,
+        dataAttributes: dataAttributes,
         children: [
             (title || pretitle) && /*#__PURE__*/ _jsx(Box, {
                 paddingRight: 16,
@@ -169,13 +170,14 @@ var useHeaderLayoutStyles = createUseStyles(function(theme) {
     };
 });
 export var HeaderLayout = function(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 = useScreenSize().isTabletOrSmaller;
     return /*#__PURE__*/ _jsx(ResponsiveLayout, {
         className: classes.background,
+        dataAttributes: dataAttributes,
         children: /*#__PURE__*/ _jsxs(ThemeVariant, {
             isInverse: isInverse,
             children: [

package/dist-es/index.js

@@ -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";
@@ -87,6 +87,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 { TrackingConfig, useTrackingConfig } from "./utils/analytics";
@@ -1744,3 +1745,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";