@telefonica/mistica 12.0.0 → 12.2.0

package/dist/generated/mistica-icons/icon-world-device-filled.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 IconWorldDeviceFilled = function IconWorldDeviceFilled(_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.176 12.321c.036.25.036.5.036.75 0 4.929-4 8.929-8.928 8.929-4.929 0-8.929-4-8.929-8.929 0-4.928 4-8.928 8.929-8.928 1.285 0 2.464.286 3.571.75v1.571c-1.071-.571-2.286-.928-3.571-.928a7.08 7.08 0 00-1.25.107c.357.857.678 1.857.428 2.607-.25.714-1.107 2-2.821 2.107.143.036.285.107.428.143a3.064 3.064 0 011.715 1.429c.285.5.892.678 1.392.464a1.326 1.326 0 011.215.036 1.3 1.3 0 01.678 1c.107.892-.107 2.571-1.643 3.285-.535.25-.607.5-.714.965-.107.392-.25.857-.714 1.285-.25.25-.607.357-.964.357-.215 0-.429-.035-.679-.107-1.036-.321-2.357-1.5-2.75-3.285-.107-.429-.143-.858-.143-1.358 0-.321-.321-1.75-.821-2.142-.107-.072-.179-.072-.286-.036-.107.036-.143.071-.179.071a.517.517 0 01-.392.036v.571a7.5 7.5 0 007.5 7.5 7.348 7.348 0 004.892-1.857c-.5-.821-.464-1.535-.428-2.143.036-.785.107-1.392-1.107-2.178-.857-.572-1.322-1.464-1.286-2.464.071-1 .607-1.893 1.393-2.286.036 0 .036 0 .071-.036v.25c0 1.393 1.107 2.5 2.5 2.5h2.5c.143 0 .25 0 .357-.036zM15.57 8.607h6.072V5.036H15.57v3.571zM20.212 2h-3.214c-.786 0-1.429.643-1.429 1.429v.535h6.072V3.43c0-.786-.643-1.429-1.429-1.429zM15.57 9.679v.178c0 1 .786 1.786 1.786 1.786h2.857c.786 0 1.429-.643 1.429-1.429V9.68H15.57z",
+            fill: fillColor
+        })
+    }));
+};
+var _default = IconWorldDeviceFilled;
+exports.default = _default;

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

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

package/dist/generated/mistica-icons/icon-world-device-light.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import type { IconProps } from '../../utils/types';
+declare const IconWorldDeviceLight: React.FC<IconProps>;
+export default IconWorldDeviceLight;

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

@@ -0,0 +1,115 @@
+"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 IconWorldDeviceLight = function IconWorldDeviceLight(_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).jsxs("svg", _objectSpread({
+        width: size,
+        height: size,
+        viewBox: "0 0 24 24",
+        role: "presentation"
+    }, rest, {
+        children: [
+            /*#__PURE__*/ (0, _jsxRuntime).jsx("path", {
+                d: "M14.518 21.643a.714.714 0 110-1.429.714.714 0 010 1.429z",
+                fill: fillColor
+            }),
+            /*#__PURE__*/ (0, _jsxRuntime).jsx("path", {
+                d: "M19.875 2c1 0 1.786.786 1.75 1.786v6.071c0 1-.786 1.786-1.786 1.786h-2.5c-.821 0-1.5-.572-1.714-1.322-.214-.071-.393-.071-.536 0-.571.286-.964.965-1 1.679 0 .429.072 1.25.965 1.821 1.535 1.036 1.5 1.965 1.428 2.822-.036.678-.071 1.357.679 2.178a8.195 8.195 0 002.357-5.75c0-.214.143-.357.357-.357s.357.143.357.357c0 2.858-1.321 5.465-3.571 7.215a.507.507 0 01-.215.071.325.325 0 01-.285-.143.384.384 0 01.071-.5c.143-.107.286-.25.429-.357-.965-1.071-.893-1.964-.857-2.714.071-.822.107-1.393-1.108-2.179A2.608 2.608 0 0113.411 12c.035-1 .607-1.893 1.393-2.286.25-.143.5-.143.785-.107v-3.5a8.18 8.18 0 00-4.285-1.214c-.5 0-.965.071-1.429.143.429.821 1.107 2.321.786 3.25-.25.75-1.215 2.107-3.072 2-.178-.036-.357 0-.464 0 .214.107.607.25 1.286.464 0 0 1 .25 1.607 1.357a1.271 1.271 0 001.643.536c.321-.179.714-.143 1.035.036.322.178.572.535.608.892.107.822-.072 2.393-1.536 3.072-.607.286-.714.607-.822 1.071-.107.393-.214.822-.642 1.215-.215.214-.536.321-.858.321a2 2 0 01-.607-.107c-1-.322-2.25-1.464-2.643-3.179a5.356 5.356 0 01-.142-1.321c0-.393-.322-1.857-.893-2.286-.143-.107-.286-.143-.465-.071-.607.214-.928.107-1.535-.25a9.436 9.436 0 00-.072 1.035 8.215 8.215 0 008.215 8.215c.357 0 .75-.036 1.142-.072.179 0 .358.143.393.322a.419.419 0 01-.321.393c-.393.035-.822.071-1.214.071-4.929 0-8.929-4-8.929-8.929 0-4.928 4-8.928 8.929-8.928 1.5 0 2.964.393 4.285 1.107V3.786c0-1 .786-1.786 1.786-1.786h2.5zM9.982 8c.214-.607-.321-1.893-.821-2.821a8.204 8.204 0 00-5.857 6.107c.714.428.857.428 1.214.321.393-.107.786-.071 1.107.179.857.643 1.179 2.464 1.179 2.857 0 .428.035.786.107 1.143.285 1.393 1.321 2.357 2.143 2.643.178.035.571.142.785-.072.25-.25.357-.536.429-.857.143-.5.286-1.107 1.214-1.536 1.357-.643 1.143-2.285 1.143-2.357-.036-.143-.107-.286-.25-.357a.383.383 0 00-.393-.036c-.964.429-2.071.072-2.571-.821-.429-.786-1.179-1-1.179-1-1.571-.5-2.071-.822-2.036-1.286.036-.571.929-.643 1.429-.607A2.353 2.353 0 009.982 8zm7.393-5.286c-.607 0-1.071.465-1.071 1.072h4.642c0-.607-.464-1.072-1.071-1.072h-2.5zM16.304 4.5v4.643h4.642V4.5h-4.642zm3.571 6.429c.607 0 1.071-.465 1.071-1.072h-4.642c0 .607.464 1.072 1.071 1.072h2.5z",
+                fill: fillColor
+            })
+        ]
+    }));
+};
+var _default = IconWorldDeviceLight;
+exports.default = _default;

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

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

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

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import type { IconProps } from '../../utils/types';
+declare const IconWorldDeviceRegular: React.FC<IconProps>;
+export default IconWorldDeviceRegular;

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

@@ -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;