@telefonica/mistica 12.1.0 → 12.2.0

package/dist/skeletons.js

@@ -0,0 +1,232 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+exports.SkeletonRectangle = exports.SkeletonRow = exports.SkeletonCircle = exports.SkeletonText = exports.SkeletonLine = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+var React = _interopRequireWildcard(require("react"));
+var _skeletonBase = _interopRequireDefault(require("./skeleton-base"));
+var _jss = require("./jss");
+var _stack = _interopRequireDefault(require("./stack"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _dom = require("./utils/dom");
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+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;
+}
+var transition = "1.5s linear";
+var useAnimation = (0, _jss).createUseStyles(function() {
+    return {
+        animation: {
+            animation: "$pulse ".concat(transition, " infinite")
+        },
+        "@keyframes pulse": {
+            "0%": {
+                opacity: 1
+            },
+            "50%": {
+                opacity: 0.5
+            },
+            "100%": {
+                opacity: 1
+            }
+        }
+    };
+});
+var useSkeletonStyles = (0, _jss).createUseStyles(function() {
+    return {
+        wrap: {
+            borderRadius: 8,
+            height: function height(param) {
+                var _height = param.height, height1 = _height === void 0 ? 8 : _height;
+                return height1;
+            },
+            width: function width(param) {
+                var _width = param.width, width1 = _width === void 0 ? "100%" : _width;
+                return width1;
+            }
+        }
+    };
+});
+var SkeletonLine = function SkeletonLine(param) {
+    var _width = param.width, width = _width === void 0 ? "100%" : _width, ariaLabel = param.ariaLabel, dataAttributes = param.dataAttributes;
+    var animationClasses = useAnimation();
+    var styleClass = useSkeletonStyles({
+        width: width
+    });
+    return /*#__PURE__*/ (0, _jsxRuntime).jsx("div", _objectSpread({
+        className: "".concat(animationClasses.animation, " ").concat(styleClass.wrap),
+        role: "status",
+        "aria-hidden": ariaLabel === undefined,
+        "aria-busy": ariaLabel !== undefined,
+        "aria-label": ariaLabel
+    }, (0, _dom).getPrefixedDataAttributes(dataAttributes), {
+        children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_skeletonBase.default, {})
+    }));
+};
+exports.SkeletonLine = SkeletonLine;
+var SkeletonText = function SkeletonText(param) {
+    var ariaLabel = param.ariaLabel, dataAttributes = param.dataAttributes;
+    var animationClasses = useAnimation();
+    var styleClass = useSkeletonStyles({
+        height: "fit-content"
+    });
+    return /*#__PURE__*/ (0, _jsxRuntime).jsxs(_stack.default, _objectSpread({
+        className: "".concat(animationClasses.animation, " ").concat(styleClass.wrap),
+        space: 16,
+        role: "status",
+        "aria-hidden": ariaLabel === undefined,
+        "aria-busy": ariaLabel !== undefined,
+        "aria-label": ariaLabel
+    }, (0, _dom).getPrefixedDataAttributes(dataAttributes), {
+        children: [
+            /*#__PURE__*/ (0, _jsxRuntime).jsx(_skeletonBase.default, {}),
+            /*#__PURE__*/ (0, _jsxRuntime).jsx(_skeletonBase.default, {}),
+            /*#__PURE__*/ (0, _jsxRuntime).jsx(_skeletonBase.default, {
+                width: "75%"
+            })
+        ]
+    }));
+};
+exports.SkeletonText = SkeletonText;
+var SkeletonCircle = function SkeletonCircle(param) {
+    var ariaLabel = param.ariaLabel, _size = param.size, size = _size === void 0 ? 40 : _size, dataAttributes = param.dataAttributes;
+    var animationClasses = useAnimation();
+    var styleClass = useSkeletonStyles({
+        width: size,
+        height: size
+    });
+    return /*#__PURE__*/ (0, _jsxRuntime).jsx("div", _objectSpread({
+        className: (0, _classnames).default(animationClasses.animation, styleClass.wrap),
+        role: "status",
+        "aria-hidden": ariaLabel === undefined,
+        "aria-busy": ariaLabel !== undefined,
+        "aria-label": ariaLabel
+    }, (0, _dom).getPrefixedDataAttributes(dataAttributes), {
+        children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_skeletonBase.default, {
+            height: size,
+            width: size,
+            radius: "50%"
+        })
+    }));
+};
+exports.SkeletonCircle = SkeletonCircle;
+var useSkeletonRowStyles = (0, _jss).createUseStyles(function() {
+    return {
+        row: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center"
+        },
+        circle: {
+            flexShrink: 0,
+            flexGrow: 0
+        },
+        line: {
+            flexShrink: 1,
+            marginLeft: 16
+        }
+    };
+});
+var SkeletonRow = function SkeletonRow(param) {
+    var _width = param.width, width = _width === void 0 ? "100%" : _width, ariaLabel = param.ariaLabel, dataAttributes = param.dataAttributes;
+    var animationClasses = useAnimation();
+    var styleClass = useSkeletonStyles({
+        width: width,
+        height: "100%"
+    });
+    var rowClass = useSkeletonRowStyles();
+    return /*#__PURE__*/ (0, _jsxRuntime).jsxs("div", _objectSpread({
+        className: (0, _classnames).default(animationClasses.animation, styleClass.wrap, rowClass.row),
+        role: "status",
+        "aria-hidden": ariaLabel === undefined,
+        "aria-busy": ariaLabel !== undefined,
+        "aria-label": ariaLabel
+    }, (0, _dom).getPrefixedDataAttributes(dataAttributes), {
+        children: [
+            /*#__PURE__*/ (0, _jsxRuntime).jsx(_skeletonBase.default, {
+                height: 40,
+                width: 40,
+                radius: "50%",
+                className: rowClass.circle
+            }),
+            /*#__PURE__*/ (0, _jsxRuntime).jsx(_skeletonBase.default, {
+                width: width,
+                className: rowClass.line
+            })
+        ]
+    }));
+};
+exports.SkeletonRow = SkeletonRow;
+var SkeletonRectangle = function SkeletonRectangle(param) {
+    var _width = param.width, width = _width === void 0 ? "100%" : _width, _height = param.height, height = _height === void 0 ? "100%" : _height, ariaLabel = param.ariaLabel, dataAttributes = param.dataAttributes;
+    var animationClasses = useAnimation();
+    var styleClass = useSkeletonStyles({
+        width: width,
+        height: "100%"
+    });
+    return /*#__PURE__*/ (0, _jsxRuntime).jsx("div", _objectSpread({
+        className: (0, _classnames).default(animationClasses.animation, styleClass.wrap),
+        role: "status",
+        "aria-hidden": true,
+        "aria-busy": true,
+        "aria-label": ariaLabel
+    }, (0, _dom).getPrefixedDataAttributes(dataAttributes), {
+        children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_skeletonBase.default, {
+            height: height,
+            width: width
+        })
+    }));
+};
+exports.SkeletonRectangle = SkeletonRectangle;

package/dist/skeletons.js.flow

@@ -0,0 +1,29 @@
+// @flow
+import * as React from "react";
+
+import type { DataAttributes } from "./utils/types";
+declare type SkeletonLineProps = {
+  width?: string | number,
+  ariaLabel?: string,
+  dataAttributes?: DataAttributes,
+};
+declare export var SkeletonLine: (x: SkeletonLineProps) => React.Node;
+declare type SkeletonTextProps = $Diff<SkeletonLineProps, { width: any }>;
+declare export var SkeletonText: (x: SkeletonTextProps) => React.Node;
+declare type SkeletonCircleProps = {
+  ...$Diff<SkeletonLineProps, { width: any }>,
+  ...{
+    size?: number | string,
+  },
+};
+declare export var SkeletonCircle: (x: SkeletonCircleProps) => React.Node;
+declare type SkeletonRowProps = SkeletonLineProps;
+declare export var SkeletonRow: (x: SkeletonRowProps) => React.Node;
+declare type SkeletonRectangleProps = {
+  ...SkeletonLineProps,
+  ...{
+    height: number | string,
+  },
+};
+declare export var SkeletonRectangle: (x: SkeletonRectangleProps) => React.Node;
+declare export {};

package/dist/skins/blau.js

@@ -178,7 +178,7 @@ var getBlauSkin = function getBlauSkin() {
             textLink: palette.blauPurple30,
             textLinkInverse: palette.blauPurple30,
             // CONTROLS
-            control: palette.darkModeGrey,
+            control: palette.darkModeGrey6,
             loadingBar: palette.blauBluePrimary,
             loadingBarBackground: palette.darkModeGrey,
             toggleAndroidInactive: palette.grey5,

package/dist/skins/movistar.js

@@ -60,7 +60,7 @@ var getMovistarSkin = function getMovistarSkin(variant) {
             backgroundContainer: palette.white,
             backgroundBrand: palette.movistarBlue,
             backgroundOverlay: (0, _color).applyAlpha(palette.grey6, 0.6),
-            backgroundSkeleton: palette.grey1,
+            backgroundSkeleton: palette.grey2,
             backgroundSkeletonInverse: palette.movistarBlue55,
             navigationBarBackground: palette.movistarBlue,
             backgroundAlternative: palette.grey1,

package/dist/skins/o2-classic.js

@@ -68,7 +68,7 @@ var getO2ClassicSkin = function getO2ClassicSkin() {
             backgroundContainer: palette.white,
             backgroundBrand: "linear-gradient(to bottom, ".concat(palette.o2Blue, ", ").concat(palette.o2GradientSecond, " 51%, ").concat(palette.o2GradientThird, " 72%, ").concat(palette.o2GradientFourth, ")"),
             backgroundOverlay: (0, _color).applyAlpha(palette.grey6, 0.6),
-            backgroundSkeleton: palette.grey1,
+            backgroundSkeleton: palette.grey2,
             backgroundSkeletonInverse: (0, _color).applyAlpha(palette.white, 0.2),
             navigationBarBackground: palette.o2Blue,
             backgroundAlternative: palette.grey1,

package/dist/skins/o2.js

@@ -58,7 +58,7 @@ var getO2Skin = function getO2Skin() {
             backgroundContainer: palette.white,
             backgroundBrand: palette.o2BluePrimary,
             backgroundOverlay: (0, _color).applyAlpha(palette.grey6, 0.6),
-            backgroundSkeleton: palette.grey1,
+            backgroundSkeleton: palette.grey2,
             backgroundSkeletonInverse: (0, _color).applyAlpha(palette.white, 0.2),
             navigationBarBackground: palette.o2BluePrimary,
             backgroundAlternative: palette.grey1,

package/dist/skins/telefonica.js

@@ -54,7 +54,7 @@ var getTelefonicaSkin = function getTelefonicaSkin() {
             backgroundContainer: palette.white,
             backgroundBrand: palette.telefonicaBlue,
             backgroundOverlay: (0, _color).applyAlpha(palette.grey6, 0.6),
-            backgroundSkeleton: palette.grey1,
+            backgroundSkeleton: palette.grey2,
             backgroundSkeletonInverse: palette.telefonicaBlue70,
             navigationBarBackground: palette.telefonicaBlue,
             backgroundAlternative: palette.grey1,
@@ -177,7 +177,7 @@ var getTelefonicaSkin = function getTelefonicaSkin() {
             textButtonSecondaryInverseSelected: palette.grey4,
             textLink: palette.telefonicaBlue,
             textLinkInverse: palette.telefonicaBlue,
-            control: palette.darkModeGrey,
+            control: palette.darkModeGrey6,
             controlActivated: palette.telefonicaBlue,
             loadingBar: palette.telefonicaBlue,
             loadingBarBackground: (0, _color).applyAlpha(palette.white, 0.05),

package/dist/skins/utils.d.ts

@@ -1,2 +1,4 @@
+import * as React from 'react';
 import type { KnownSkin, KnownSkinName } from './types';
 export declare const getSkinByName: (name: KnownSkinName, variant?: "prominent" | undefined) => KnownSkin;
+export declare const flattenChildren: (children: React.ReactNode) => Array<React.ReactNode>;

package/dist/skins/utils.js

@@ -2,7 +2,8 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-exports.getSkinByName = void 0;
+exports.flattenChildren = exports.getSkinByName = void 0;
+var React = _interopRequireWildcard(require("react"));
 var _constants = require("./constants");
 var _blau = require("./blau");
 var _telefonica = require("./telefonica");
@@ -10,6 +11,27 @@ var _vivo = require("./vivo");
 var _o2 = require("./o2");
 var _o2Classic = require("./o2-classic");
 var _movistar = require("./movistar");
+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;
+    }
+}
 var getSkinByName = function getSkinByName(name, variant) {
     switch(name){
         case _constants.BLAU_SKIN:
@@ -32,3 +54,14 @@ var getSkinByName = function getSkinByName(name, variant) {
     }
 };
 exports.getSkinByName = getSkinByName;
+var flattenChildren = function(children) {
+    var childrenArray = React.Children.toArray(children);
+    return childrenArray.reduce(function(flatChildren, child) {
+        if (child.type === React.Fragment) {
+            return flatChildren.concat(flattenChildren(child.props.children));
+        }
+        flatChildren.push(child);
+        return flatChildren;
+    }, []);
+};
+exports.flattenChildren = flattenChildren;

package/dist/skins/utils.js.flow

@@ -1,7 +1,9 @@
 // @flow
 
+import * as React from "react";
 import type { KnownSkin, KnownSkinName } from "./types";
 declare export var getSkinByName: (
   name: KnownSkinName,
   variant?: "prominent" | void
 ) => KnownSkin;
+declare export var flattenChildren: (children: React.Node) => Array<React.Node>;

package/dist/skins/vivo.js

@@ -52,7 +52,7 @@ var getVivoSkin = function getVivoSkin() {
             backgroundContainer: palette.white,
             backgroundBrand: palette.vivoPurple,
             backgroundOverlay: (0, _color).applyAlpha(palette.grey6, 0.6),
-            backgroundSkeleton: palette.grey1,
+            backgroundSkeleton: palette.grey2,
             backgroundSkeletonInverse: (0, _color).applyAlpha(palette.white, 0.2),
             backgroundFeedbackBottom: palette.vivoPurple,
             navigationBarBackground: palette.vivoPurple,

package/dist/tabs.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { TrackingEvent } from './utils/types';
+import type { DataAttributes, TrackingEvent } from './utils/types';
 export declare type TabsProps = {
     selectedIndex: number;
     onChange: (selectedIndex: number) => void;
@@ -10,6 +10,7 @@ export declare type TabsProps = {
         readonly 'aria-controls'?: string;
     }>;
     children?: void;
+    dataAttributes?: DataAttributes;
 };
 declare const Tabs: React.FC<TabsProps>;
 export default Tabs;

package/dist/tabs.js

@@ -13,6 +13,7 @@ var _hooks = require("./hooks");
 var _text = require("./text");
 var _css = require("./utils/css");
 var _platform = require("./utils/platform");
+var _dom = require("./utils/dom");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -87,6 +88,22 @@ function _iterableToArrayLimit(arr, i) {
 function _nonIterableRest() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
+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 _slicedToArray(arr, i) {
     return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
 }
@@ -189,7 +206,7 @@ var useStyles = (0, _jss).createUseStyles(function(param1) {
     };
 });
 var Tabs = function Tabs(param2) {
-    var selectedIndex = param2.selectedIndex, onChange = param2.onChange, tabs = param2.tabs;
+    var selectedIndex = param2.selectedIndex, onChange = param2.onChange, tabs = param2.tabs, dataAttributes = param2.dataAttributes;
     var id = (0, _hooks).useAriaId();
     var ref = (0, _hooks).useElementDimensions(), width = ref.width, ref1 = ref.ref;
     var animatedLineRef = React.useRef(null);
@@ -225,11 +242,12 @@ var Tabs = function Tabs(param2) {
             }, LINE_ANIMATION_DURATION_MS);
         }
     };
-    return /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
+    return /*#__PURE__*/ (0, _jsxRuntime).jsx("div", _objectSpread({
         id: id,
         role: "tablist",
         ref: ref1,
-        className: classes.outerBorder,
+        className: classes.outerBorder
+    }, (0, _dom).getPrefixedDataAttributes(dataAttributes), {
         children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_responsiveLayout.default, {
             fullWidth: true,
             children: /*#__PURE__*/ (0, _jsxRuntime).jsxs("div", {
@@ -281,7 +299,7 @@ var Tabs = function Tabs(param2) {
                 ]
             })
         })
-    });
+    }));
 };
 var _default = Tabs;
 exports.default = _default;

package/dist/tabs.js.flow

@@ -1,7 +1,7 @@
 // @flow
 
 import * as React from "react";
-import type { TrackingEvent } from "./utils/types";
+import type { DataAttributes, TrackingEvent } from "./utils/types";
 export type TabsProps = {
   selectedIndex: number,
   onChange: (selectedIndex: number) => void,
@@ -11,6 +11,7 @@ export type TabsProps = {
     +icon?: React.Node,
     +"aria-controls"?: string,
   }>,
+  dataAttributes?: DataAttributes,
 };
 declare var Tabs: React.ComponentType<TabsProps>;
 declare export default typeof Tabs;

package/dist-es/button-group.js

@@ -1,7 +1,36 @@
+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) {
+    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 { createUseStyles } from "./jss";
 import classNames from "classnames";
+import { getPrefixedDataAttributes } from "./utils/dom";
 var buttonLayoutSpacing = 16;
 var buttonLinkPadding = 12;
 var useStyles = createUseStyles(function() {
@@ -34,14 +63,15 @@ var useStyles = createUseStyles(function() {
     };
 });
 var ButtonGroup = function(param) {
-    var primaryButton = param.primaryButton, secondaryButton = param.secondaryButton, link = param.link;
+    var primaryButton = param.primaryButton, secondaryButton = param.secondaryButton, link = param.link, dataAttributes = param.dataAttributes;
     var anyAction = !!primaryButton || !!secondaryButton || !!link;
     var bothButtons = !!primaryButton && !!secondaryButton;
     var classes = useStyles({
         bothButtons: bothButtons
     });
-    return anyAction ? /*#__PURE__*/ _jsxs("div", {
-        className: classNames(classes.inline, classes.container),
+    return anyAction ? /*#__PURE__*/ _jsxs("div", _objectSpread({
+        className: classNames(classes.inline, classes.container)
+    }, getPrefixedDataAttributes(dataAttributes), {
         children: [
             (primaryButton || secondaryButton) && /*#__PURE__*/ _jsxs("div", {
                 className: classNames(classes.inline, classes.buttons),
@@ -59,6 +89,6 @@ var ButtonGroup = function(param) {
                 children: link
             })
         ]
-    }) : null;
+    })) : null;
 };
 export default ButtonGroup;

package/dist-es/button-layout.js

@@ -55,6 +55,21 @@ function _nonIterableRest() {
 function _nonIterableSpread() {
     throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
+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;
+}
 function _slicedToArray(arr, i) {
     return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
 }
@@ -76,6 +91,7 @@ import { useScreenSize, useIsomorphicLayoutEffect } from "./hooks";
 import { BUTTON_MIN_WIDTH, ButtonPrimary, ButtonSecondary, ButtonDanger } from "./button";
 import classNames from "classnames";
 import debounce from "lodash/debounce";
+import { getPrefixedDataAttributes } from "./utils/dom";
 var buttonLayoutSpacing = 16;
 var useStyles = createUseStyles(function(theme) {
     var _obj;
@@ -181,7 +197,7 @@ var buttonsRange = [
     ButtonPrimary
 ];
 var ButtonLayout = function(param1) {
-    var children = param1.children, _align = param1.align, align = _align === void 0 ? "full-width" : _align, link = param1.link, _withMargins = param1.withMargins, withMargins = _withMargins === void 0 ? false : _withMargins;
+    var children = param1.children, _align = param1.align, align = _align === void 0 ? "full-width" : _align, link = param1.link, _withMargins = param1.withMargins, withMargins = _withMargins === void 0 ? false : _withMargins, dataAttributes = param1.dataAttributes;
     var isTabletOrSmaller = useScreenSize().isTabletOrSmaller;
     var childrenCount = React.Children.count(children);
     var ref = _slicedToArray(React.useState({
@@ -273,9 +289,10 @@ var ButtonLayout = function(param1) {
         return range1 - range2;
     });
     var needsLinkAlignment = !isTabletOrSmaller && align === "left";
-    var content = /*#__PURE__*/ _jsxs("div", {
+    var content = /*#__PURE__*/ _jsxs("div", _objectSpread({
         ref: wrapperElRef,
-        className: classes.container,
+        className: classes.container
+    }, getPrefixedDataAttributes(dataAttributes), {
         children: [
             link ? /*#__PURE__*/ _jsx("div", {
                 className: classNames(classes.link, _defineProperty({}, classes.linkAlignment, needsLinkAlignment)),
@@ -283,7 +300,7 @@ var ButtonLayout = function(param1) {
             }) : null,
             sortedButtons
         ]
-    });
+    }));
     return withMargins ? /*#__PURE__*/ _jsx("div", {
         className: classes.margins,
         children: content