@telefonica/mistica 12.1.0 → 12.3.0

package/dist/generated/mistica-icons/icon-world-device-regular.js

@@ -0,0 +1,109 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+exports.default = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+var React = _interopRequireWildcard(require("react"));
+var _hooks = require("../../hooks");
+var _themeVariantContext = require("../../theme-variant-context");
+function _interopRequireWildcard(obj) {
+    if (obj && obj.__esModule) {
+        return obj;
+    } else {
+        var newObj = {};
+        if (obj != null) {
+            for(var key in obj){
+                if (Object.prototype.hasOwnProperty.call(obj, key)) {
+                    var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {};
+                    if (desc.get || desc.set) {
+                        Object.defineProperty(newObj, key, desc);
+                    } else {
+                        newObj[key] = obj[key];
+                    }
+                }
+            }
+        }
+        newObj.default = obj;
+        return newObj;
+    }
+}
+function _defineProperty(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        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;
+}
+function _objectWithoutProperties(source, excluded) {
+    if (source == null) return {};
+    var target = _objectWithoutPropertiesLoose(source, excluded);
+    var key, i;
+    if (Object.getOwnPropertySymbols) {
+        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+        for(i = 0; i < sourceSymbolKeys.length; i++){
+            key = sourceSymbolKeys[i];
+            if (excluded.indexOf(key) >= 0) continue;
+            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+            target[key] = source[key];
+        }
+    }
+    return target;
+}
+function _objectWithoutPropertiesLoose(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+    for(i = 0; i < sourceKeys.length; i++){
+        key = sourceKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        target[key] = source[key];
+    }
+    return target;
+}
+var IconWorldDeviceRegular = function IconWorldDeviceRegular(_param) {
+    var color = _param.color, _size = _param.size, size = _size === void 0 ? 24 : _size, children = _param.children, rest = _objectWithoutProperties(_param, [
+        "color",
+        "size",
+        "children"
+    ]);
+    var colors = (0, _hooks).useTheme().colors;
+    var isInverse = (0, _themeVariantContext).useIsInverseVariant();
+    var fillColor = color !== null && color !== void 0 ? color : isInverse ? colors.inverse : colors.neutralHigh;
+    return /*#__PURE__*/ (0, _jsxRuntime).jsx("svg", _objectSpread({
+        width: size,
+        height: size,
+        viewBox: "0 0 24 24",
+        role: "presentation"
+    }, rest, {
+        children: /*#__PURE__*/ (0, _jsxRuntime).jsx("path", {
+            d: "M20.212 2h-3.214c-.786 0-1.429.643-1.429 1.429V5.25a8.8 8.8 0 00-4.285-1.107c-4.929 0-8.929 4-8.929 8.928 0 4.929 4 8.929 8.929 8.929 4.928 0 8.928-4 8.928-8.929 0-.5-.036-.964-.107-1.428h.107c.786 0 1.429-.643 1.429-1.429V3.43c0-.786-.643-1.429-1.429-1.429zm.357 3.036v3.571h-3.928V5.036h3.928zM16.998 3.07h3.214c.179 0 .357.179.357.358v.535h-3.928V3.43c0-.179.178-.358.357-.358zM8.962 5.93c.393.892.607 1.642.464 2 0 0-.5 1.464-2.178 1.357-1.357-.072-1.572.464-1.607.785-.036.572.464.929 2.143 1.465.035 0 .678.178 1.071.928a2.183 2.183 0 002.786.929.304.304 0 01.25 0c.071.036.143.143.143.214 0 .072.214 1.607-1.036 2.143-1 .464-1.179 1.143-1.322 1.679-.071.321-.142.571-.392.75-.179.142-.5.071-.608.035-.785-.25-1.75-1.214-2.035-2.5a5.294 5.294 0 01-.107-1.107c0-.428-.322-2.286-1.25-3-.393-.286-.822-.357-1.25-.214l-.108.036a7.674 7.674 0 015.036-5.5zm2.322 14.642a7.5 7.5 0 01-7.5-7.5c0-.178 0-.321.035-.5.143 0 .286-.035.465-.107l.107-.035c.107-.036.178-.036.285.035.5.393.822 1.822.822 2.143 0 .5.036.929.143 1.357.393 1.786 1.714 2.965 2.75 3.286.25.071.464.107.678.107.393 0 .715-.107.965-.357.464-.429.607-.893.714-1.286.107-.464.178-.714.714-.964 1.536-.714 1.75-2.393 1.643-3.286-.071-.428-.321-.821-.679-1a1.326 1.326 0 00-1.214-.035 1.046 1.046 0 01-1.393-.465c-.571-1.071-1.535-1.393-1.714-1.428-.179-.036-.321-.107-.429-.143 1.679-.107 2.572-1.393 2.822-2.107.25-.715-.072-1.75-.429-2.607a7.08 7.08 0 011.25-.108c1.607 0 3.072.5 4.286 1.358v2.464c-.286-.036-.571 0-.857.107-.857.429-1.429 1.393-1.5 2.429-.072 1.071.428 2.035 1.357 2.642 1.107.715 1.071 1.215 1.036 2-.036.643-.107 1.393.464 2.25-1.357 1.108-3 1.75-4.821 1.75zm7.5-7.5c0 1.929-.75 3.679-1.929 5-.25-.5-.214-.928-.179-1.428.072-.893.143-1.893-1.535-2.964-.822-.536-.893-1.286-.857-1.679.035-.679.392-1.286.892-1.536.072-.035.25-.035.393 0 .143.643.715 1.143 1.393 1.143h1.643c.143.5.179.964.179 1.464zm1.428-2.5h-3.214a.384.384 0 01-.357-.357V9.68h3.928v.535a.384.384 0 01-.357.357z",
+            fill: fillColor
+        })
+    }));
+};
+var _default = IconWorldDeviceRegular;
+exports.default = _default;

package/dist/generated/mistica-icons/icon-world-device-regular.js.flow

@@ -0,0 +1,6 @@
+// @flow
+
+import * as React from "react";
+import type { IconProps } from "../../utils/types";
+declare var IconWorldDeviceRegular: React.ComponentType<IconProps>;
+declare export default typeof IconWorldDeviceRegular;

package/dist/grid-layout.d.ts

@@ -1,41 +1,57 @@
 import * as React from 'react';
+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 = {
     template?: undefined;
     children: React.ReactNode;
+    verticalSpace?: VerticalSpace;
+    dataAttributes?: DataAttributes;
 };
 declare type PropsTemplate6_6 = {
     template: '6+6';
     left: React.ReactNode;
     right: React.ReactNode;
     children?: undefined;
+    verticalSpace?: VerticalSpace;
+    dataAttributes?: DataAttributes;
 };
 declare type PropsTemplate8_4 = {
     template: '8+4';
     left: React.ReactNode;
     right: React.ReactNode;
     children?: undefined;
+    verticalSpace?: VerticalSpace;
+    dataAttributes?: DataAttributes;
 };
 declare type PropsTemplate4_6 = {
     template: '4+6';
     left: React.ReactNode;
     right: React.ReactNode;
     children?: undefined;
+    verticalSpace?: VerticalSpace;
+    dataAttributes?: DataAttributes;
 };
 declare type PropsTemplate5_4 = {
     template: '5+4';
     left: React.ReactNode;
     right: React.ReactNode;
     children?: undefined;
+    verticalSpace?: VerticalSpace;
+    dataAttributes?: DataAttributes;
 };
 declare type PropsTemplate3_9 = {
     template: '3+9';
     left: React.ReactNode;
     right: React.ReactNode;
     children?: undefined;
+    verticalSpace?: VerticalSpace;
+    dataAttributes?: DataAttributes;
 };
 declare type PropsTemplate10 = {
     template: '10';
     children: React.ReactNode;
+    verticalSpace?: VerticalSpace;
+    dataAttributes?: DataAttributes;
 };
 declare type Props = PropsChildren | PropsTemplate6_6 | PropsTemplate8_4 | PropsTemplate4_6 | PropsTemplate5_4 | PropsTemplate3_9 | PropsTemplate10;
 declare const GridLayout: React.FC<Props>;

package/dist/grid-layout.js

@@ -5,7 +5,15 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var React = _interopRequireWildcard(require("react"));
+var _hooks = require("./hooks");
+var _containerTypeContext = _interopRequireDefault(require("./container-type-context"));
 var _jss = require("./jss");
+var _dom = require("./utils/dom");
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
 function _interopRequireWildcard(obj) {
     if (obj && obj.__esModule) {
         return obj;
@@ -40,6 +48,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,166 +75,247 @@ 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);
+    var ref = (0, _hooks).useScreenSize(), isMobile = ref.isMobile, isTablet = ref.isTablet;
+    var getContainerType = function getContainerType(containerType) {
+        return isMobile ? "mobile-column" : isTablet ? "tablet-column" : containerType;
+    };
     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,
-                    children: props.left
+                /*#__PURE__*/ (0, _jsxRuntime).jsx(_containerTypeContext.default.Provider, {
+                    value: getContainerType("desktop-medium-column"),
+                    children: /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
+                        className: classes.span6,
+                        children: props.left
+                    })
                 }),
-                /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
-                    className: classes.span6,
-                    children: props.right
+                /*#__PURE__*/ (0, _jsxRuntime).jsx(_containerTypeContext.default.Provider, {
+                    value: getContainerType("desktop-medium-column"),
+                    children: /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
+                        className: classes.span6,
+                        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,
-                    children: props.left
+                /*#__PURE__*/ (0, _jsxRuntime).jsx(_containerTypeContext.default.Provider, {
+                    value: getContainerType("desktop-medium-column"),
+                    children: /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
+                        className: classes.span8,
+                        children: props.left
+                    })
                 }),
-                /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
-                    className: classes.span4,
-                    children: props.right
+                /*#__PURE__*/ (0, _jsxRuntime).jsx(_containerTypeContext.default.Provider, {
+                    value: getContainerType("desktop-small-column"),
+                    children: /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
+                        className: classes.span4,
+                        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,
-                    children: props.left
+                /*#__PURE__*/ (0, _jsxRuntime).jsx(_containerTypeContext.default.Provider, {
+                    value: getContainerType("desktop-small-column"),
+                    children: /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
+                        className: classes.span4,
+                        children: props.left
+                    })
                 }),
                 /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
                     className: classes.span1
                 }),
-                /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
-                    className: classes.span6,
-                    children: props.right
+                /*#__PURE__*/ (0, _jsxRuntime).jsx(_containerTypeContext.default.Provider, {
+                    value: getContainerType("desktop-medium-column"),
+                    children: /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
+                        className: classes.span6,
+                        children: props.right
+                    })
                 }),
                 /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
                     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
                 }),
-                /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
-                    className: classes.span5,
-                    children: props.left
+                /*#__PURE__*/ (0, _jsxRuntime).jsx(_containerTypeContext.default.Provider, {
+                    value: getContainerType("desktop-small-column"),
+                    children: /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
+                        className: classes.span5,
+                        children: props.left
+                    })
                 }),
                 /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
                     className: classes.span1
                 }),
-                /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
-                    className: classes.span4,
-                    children: props.right
+                /*#__PURE__*/ (0, _jsxRuntime).jsx(_containerTypeContext.default.Provider, {
+                    value: getContainerType("desktop-small-column"),
+                    children: /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
+                        className: classes.span4,
+                        children: props.right
+                    })
                 }),
                 /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
                     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,
-                    children: props.left
+                /*#__PURE__*/ (0, _jsxRuntime).jsx(_containerTypeContext.default.Provider, {
+                    value: getContainerType("desktop-small-column"),
+                    children: /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
+                        className: classes.span3,
+                        children: props.left
+                    })
                 }),
-                /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
-                    className: classes.span9,
-                    children: props.right
+                /*#__PURE__*/ (0, _jsxRuntime).jsx(_containerTypeContext.default.Provider, {
+                    value: getContainerType("desktop-medium-column"),
+                    children: /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
+                        className: classes.span9,
+                        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
                 }),
-                /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
-                    className: classes.span10,
-                    children: props.children
+                /*#__PURE__*/ (0, _jsxRuntime).jsx(_containerTypeContext.default.Provider, {
+                    value: getContainerType("desktop-wide-column"),
+                    children: /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
+                        className: classes.span10,
+                        children: props.children
+                    })
                 }),
                 /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
                     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: [