@telefonica/mistica 12.0.0 → 12.2.0

package/dist-es/overscroll-color-context.js

@@ -5,24 +5,25 @@ import { useTheme, useScreenSize } from "./hooks";
 import createNestableContext from "./nestable-context";
 import { isInsideNovumNativeApp, getPlatform } from "./utils/platform";
 var ref = createNestableContext(""), Provider = ref.Provider, Getter = ref.Getter, useSetValue = ref.useSetValue;
-var shouldRender = getPlatform() === "ios";
-var OverscrollColorProviderNoOp = function(param) {
-    var children = param.children;
-    return /*#__PURE__*/ _jsx(_Fragment, {
-        children: children || null
-    });
+var shouldRender = function() {
+    return getPlatform() === "ios";
 };
-var OverscrollColorProviderComponent = function(param) {
+export var OverscrollColorProvider = function(param) {
     var children = param.children;
     var platformOverrides = useTheme().platformOverrides;
     var isTabletOrSmaller = useScreenSize().isTabletOrSmaller;
     var theme = useTheme();
-    return isTabletOrSmaller ? /*#__PURE__*/ _jsx(Provider, {
+    if (!shouldRender()) {
+        return /*#__PURE__*/ _jsx(_Fragment, {
+            children: children
+        });
+    }
+    return /*#__PURE__*/ _jsx(Provider, {
         children: /*#__PURE__*/ _jsx(Getter, {
             children: function(color) {
                 return /*#__PURE__*/ _jsxs(_Fragment, {
                     children: [
-                        /*#__PURE__*/ _jsx("div", {
+                        isTabletOrSmaller ? /*#__PURE__*/ _jsx("div", {
                             style: {
                                 position: "absolute",
                                 zIndex: 1,
@@ -33,17 +34,14 @@ var OverscrollColorProviderComponent = function(param) {
                                 marginTop: -500,
                                 transform: "translate3d(0,0,0)"
                             }
-                        }),
+                        }) : null,
                         children
                     ]
                 });
             }
         })
-    }) : /*#__PURE__*/ _jsx(_Fragment, {
-        children: children
     });
 };
-export var OverscrollColorProvider = shouldRender ? OverscrollColorProviderComponent : OverscrollColorProviderNoOp;
 var OverscrollColorComponent = function() {
     var isInverseVariant = useIsInverseVariant();
     var theme = useTheme();
@@ -53,5 +51,5 @@ var OverscrollColorComponent = function() {
 var OverscrollColorNoOp = function() {
     return null;
 };
-var OverscrollColor = shouldRender ? OverscrollColorComponent : OverscrollColorNoOp;
+var OverscrollColor = shouldRender() ? OverscrollColorComponent : OverscrollColorNoOp;
 export default OverscrollColor;

package/dist-es/package-version.js

@@ -1,2 +1,2 @@
 // DO NOT EDIT THIS FILE. It's autogenerated by set-version.js
-export var PACKAGE_VERSION = "12.0.0";
+export var PACKAGE_VERSION = "12.2.0";

package/dist-es/popover.js

@@ -75,9 +75,13 @@ function _unsupportedIterableToArray(o, minLen) {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { createUseStyles } from "./jss";
-import IcnCloseRegular from "./generated/mistica-icons/icon-close-regular";
+import IconCloseRegular from "./generated/mistica-icons/icon-close-regular";
 import IconButton from "./icon-button";
 import { useTheme, useScreenSize } from "./hooks";
+import Stack from "./stack";
+import Box from "./box";
+import Inline from "./inline";
+import { Text3, Text2 } from "./text";
 // Zeplin definition:
 // https://app.zeplin.io/project/5c9b6f097168bc065782b5c3/screen/5d15d87e46571573089f2863
 var defaultPositionDesktop = "bottom";
@@ -99,7 +103,7 @@ var useStyles = createUseStyles(function(theme) {
             top: 0,
             left: "50%",
             transform: "translate(-50%, -50%) rotate(45deg)",
-            border: "1px solid ".concat(theme.colors.divider),
+            border: "1px solid ".concat(theme.colors.border),
             borderRadius: 2,
             boxShadow: function(param) {
                 var position = param.position;
@@ -122,46 +126,27 @@ var useStyles = createUseStyles(function(theme) {
             zIndex: 9,
             boxShadow: "0 2px 4px 0 rgba(0, 0, 0, ".concat(shadowAlpha, ")"),
             backgroundColor: theme.colors.backgroundContainer,
-            border: "1px solid ".concat(theme.colors.divider),
+            border: "1px solid ".concat(theme.colors.border),
             borderRadius: 8
         },
-        title: {
-            marginBottom: 4,
-            color: theme.colors.textPrimary,
-            fontWeight: 400,
-            lineHeight: 1.5,
-            fontSize: 16
-        },
-        boxContainer: {
-            position: "relative",
+        textAlign: {
             display: "flex",
-            justifyContent: "space-between"
+            alignItems: "center",
+            height: "100%"
+        },
+        boxContent: {
+            display: "flex"
         },
         textContent: {
-            display: "flex",
-            flexDirection: "column",
-            margin: 16,
-            marginRight: 8,
-            justifyContent: "center",
+            textAlign: "left",
             width: "100%",
             wordBreak: "break-word"
         },
-        assetContent: {
-            width: 40,
-            minWidth: 40,
-            height: 40,
-            margin: 16,
-            marginRight: 0
-        },
-        text: {
-            color: theme.colors.textSecondary,
-            textAlign: "left",
-            lineHeight: 1.42857142,
-            fontSize: 14
-        },
         closeButtonIcon: {
-            paddingTop: 8,
-            paddingRight: 8
+            position: "absolute",
+            top: 8,
+            right: 8,
+            zIndex: 1
         }
     };
 });
@@ -246,7 +231,7 @@ var getTargetPosition = function(targetWrapper) {
     } : null;
 };
 var Popover = function(param) {
-    var description = param.description, title = param.title, onClose = param.onClose, trackingEvent = param.trackingEvent, position = param.position, width = param.width, target = param.target, asset = param.asset, _isVisible = param.isVisible, isVisible = _isVisible === void 0 ? true : _isVisible;
+    var description = param.description, title = param.title, onClose = param.onClose, trackingEvent = param.trackingEvent, position = param.position, width = param.width, target = param.target, asset = param.asset, _isVisible = param.isVisible, isVisible = _isVisible === void 0 ? true : _isVisible, extra = param.extra;
     var ref = useTheme(), texts = ref.texts, colors = ref.colors, isIos = ref.isIos;
     var isTabletOrSmaller = useScreenSize().isTabletOrSmaller;
     var ref1 = _slicedToArray(React.useState(null), 2), targetPosition = ref1[0], setTargetPosition = ref1[1];
@@ -287,40 +272,50 @@ var Popover = function(param) {
                         className: classes.arrow
                     })
                 }),
-                /*#__PURE__*/ _jsxs("div", {
-                    className: classes.boxContainer,
+                /*#__PURE__*/ _jsxs(Box, {
+                    padding: 16,
                     children: [
-                        asset && /*#__PURE__*/ _jsx("div", {
-                            className: classes.assetContent,
-                            children: asset
-                        }),
-                        /*#__PURE__*/ _jsxs("div", {
-                            className: classes.textContent,
-                            children: [
-                                title && /*#__PURE__*/ _jsx("span", {
-                                    className: classes.title,
-                                    children: title
-                                }),
-                                /*#__PURE__*/ _jsx("span", {
-                                    className: classes.text,
-                                    children: description
-                                })
-                            ]
+                        /*#__PURE__*/ _jsx(Box, {
+                            paddingRight: 24,
+                            className: classes.boxContent,
+                            children: /*#__PURE__*/ _jsxs(Inline, {
+                                space: 16,
+                                children: [
+                                    asset,
+                                    /*#__PURE__*/ _jsx(Box, {
+                                        className: classes.textAlign,
+                                        children: /*#__PURE__*/ _jsxs(Stack, {
+                                            space: 4,
+                                            className: classes.textContent,
+                                            children: [
+                                                title && /*#__PURE__*/ _jsx(Text3, {
+                                                    regular: true,
+                                                    children: title
+                                                }),
+                                                /*#__PURE__*/ _jsx(Text2, {
+                                                    regular: true,
+                                                    color: colors.textSecondary,
+                                                    children: description
+                                                })
+                                            ]
+                                        })
+                                    })
+                                ]
+                            })
                         }),
-                        /*#__PURE__*/ _jsx("div", {
+                        /*#__PURE__*/ _jsx(IconButton, {
                             className: classes.closeButtonIcon,
-                            children: /*#__PURE__*/ _jsx(IconButton, {
-                                onPress: function(e) {
-                                    onClose === null || onClose === void 0 ? void 0 : onClose();
-                                    e.stopPropagation();
-                                },
-                                trackingEvent: trackingEvent,
-                                "aria-label": texts.modalClose,
-                                children: /*#__PURE__*/ _jsx(IcnCloseRegular, {
-                                    color: colors.neutralHigh
-                                })
+                            onPress: function(e) {
+                                onClose === null || onClose === void 0 ? void 0 : onClose();
+                                e.stopPropagation();
+                            },
+                            trackingEvent: trackingEvent,
+                            "aria-label": texts.modalClose,
+                            children: /*#__PURE__*/ _jsx(IconCloseRegular, {
+                                color: colors.neutralHigh
                             })
-                        })
+                        }),
+                        extra
                     ]
                 })
             ]

package/dist-es/skeleton-base.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useIsInverseVariant } from "./theme-variant-context";
+import * as React from "react";
+import { createUseStyles } from "./jss";
+import classnames from "classnames";
+var useSkeletonBaseStyles = createUseStyles(function(param1) {
+    var colors = param1.colors;
+    return {
+        skeletonBase: {
+            borderRadius: function(param) {
+                var radius = param.radius;
+                return radius;
+            },
+            height: function(param) {
+                var height = param.height;
+                return height;
+            },
+            width: function(param) {
+                var width = param.width;
+                return width;
+            },
+            background: function(param) {
+                var isInverse = param.isInverse;
+                return isInverse ? colors.backgroundSkeletonInverse : colors.backgroundSkeleton;
+            }
+        }
+    };
+});
+var SkeletonBase = function(param) {
+    var _width = param.width, width = _width === void 0 ? "100%" : _width, _height = param.height, height = _height === void 0 ? 8 : _height, _radius = param.radius, radius = _radius === void 0 ? 8 : _radius, className = param.className;
+    var isInverse = useIsInverseVariant();
+    var classes = useSkeletonBaseStyles({
+        isInverse: isInverse,
+        width: width,
+        height: height,
+        radius: radius
+    });
+    return /*#__PURE__*/ _jsx("div", {
+        className: classnames(classes.skeletonBase, className),
+        "aria-hidden": true
+    });
+};
+export default SkeletonBase;

package/dist-es/skeletons.js

@@ -0,0 +1,196 @@
+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";
+// https://www.figma.com/file/w7E0mmB92eio0zHw7h9iS2/%5BREADY%5D-Skeletons-Specs?node-id=986%3A1161
+import * as React from "react";
+import SkeletonBase from "./skeleton-base";
+import { createUseStyles } from "./jss";
+import Stack from "./stack";
+import classNames from "classnames";
+import { getPrefixedDataAttributes } from "./utils/dom";
+var transition = "1.5s linear";
+var useAnimation = createUseStyles(function() {
+    return {
+        animation: {
+            animation: "$pulse ".concat(transition, " infinite")
+        },
+        "@keyframes pulse": {
+            "0%": {
+                opacity: 1
+            },
+            "50%": {
+                opacity: 0.5
+            },
+            "100%": {
+                opacity: 1
+            }
+        }
+    };
+});
+var useSkeletonStyles = createUseStyles(function() {
+    return {
+        wrap: {
+            borderRadius: 8,
+            height: function(param) {
+                var _height = param.height, height = _height === void 0 ? 8 : _height;
+                return height;
+            },
+            width: function(param) {
+                var _width = param.width, width = _width === void 0 ? "100%" : _width;
+                return width;
+            }
+        }
+    };
+});
+export var SkeletonLine = function(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__*/ _jsx("div", _objectSpread({
+        className: "".concat(animationClasses.animation, " ").concat(styleClass.wrap),
+        role: "status",
+        "aria-hidden": ariaLabel === undefined,
+        "aria-busy": ariaLabel !== undefined,
+        "aria-label": ariaLabel
+    }, getPrefixedDataAttributes(dataAttributes), {
+        children: /*#__PURE__*/ _jsx(SkeletonBase, {})
+    }));
+};
+export var SkeletonText = function(param) {
+    var ariaLabel = param.ariaLabel, dataAttributes = param.dataAttributes;
+    var animationClasses = useAnimation();
+    var styleClass = useSkeletonStyles({
+        height: "fit-content"
+    });
+    return /*#__PURE__*/ _jsxs(Stack, _objectSpread({
+        className: "".concat(animationClasses.animation, " ").concat(styleClass.wrap),
+        space: 16,
+        role: "status",
+        "aria-hidden": ariaLabel === undefined,
+        "aria-busy": ariaLabel !== undefined,
+        "aria-label": ariaLabel
+    }, getPrefixedDataAttributes(dataAttributes), {
+        children: [
+            /*#__PURE__*/ _jsx(SkeletonBase, {}),
+            /*#__PURE__*/ _jsx(SkeletonBase, {}),
+            /*#__PURE__*/ _jsx(SkeletonBase, {
+                width: "75%"
+            })
+        ]
+    }));
+};
+export var SkeletonCircle = function(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__*/ _jsx("div", _objectSpread({
+        className: classNames(animationClasses.animation, styleClass.wrap),
+        role: "status",
+        "aria-hidden": ariaLabel === undefined,
+        "aria-busy": ariaLabel !== undefined,
+        "aria-label": ariaLabel
+    }, getPrefixedDataAttributes(dataAttributes), {
+        children: /*#__PURE__*/ _jsx(SkeletonBase, {
+            height: size,
+            width: size,
+            radius: "50%"
+        })
+    }));
+};
+var useSkeletonRowStyles = createUseStyles(function() {
+    return {
+        row: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center"
+        },
+        circle: {
+            flexShrink: 0,
+            flexGrow: 0
+        },
+        line: {
+            flexShrink: 1,
+            marginLeft: 16
+        }
+    };
+});
+export var SkeletonRow = function(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__*/ _jsxs("div", _objectSpread({
+        className: classNames(animationClasses.animation, styleClass.wrap, rowClass.row),
+        role: "status",
+        "aria-hidden": ariaLabel === undefined,
+        "aria-busy": ariaLabel !== undefined,
+        "aria-label": ariaLabel
+    }, getPrefixedDataAttributes(dataAttributes), {
+        children: [
+            /*#__PURE__*/ _jsx(SkeletonBase, {
+                height: 40,
+                width: 40,
+                radius: "50%",
+                className: rowClass.circle
+            }),
+            /*#__PURE__*/ _jsx(SkeletonBase, {
+                width: width,
+                className: rowClass.line
+            })
+        ]
+    }));
+};
+export var SkeletonRectangle = function(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__*/ _jsx("div", _objectSpread({
+        className: classNames(animationClasses.animation, styleClass.wrap),
+        role: "status",
+        "aria-hidden": true,
+        "aria-busy": true,
+        "aria-label": ariaLabel
+    }, getPrefixedDataAttributes(dataAttributes), {
+        children: /*#__PURE__*/ _jsx(SkeletonBase, {
+            height: height,
+            width: width
+        })
+    }));
+};

package/dist-es/skins/blau.js

@@ -53,7 +53,7 @@ export var getBlauSkin = function() {
             backgroundBrand: palette.blauBluePrimary,
             backgroundOverlay: applyAlpha(palette.blauBlueSecondary, 0.75),
             backgroundSkeleton: palette.grey2,
-            backgroundSkeletonInverse: palette.white,
+            backgroundSkeletonInverse: applyAlpha(palette.white, 0.2),
             navigationBarBackground: palette.blauBluePrimary,
             backgroundAlternative: palette.blauBluePrimary20,
             backgroundFeedbackBottom: palette.blauBluePrimary,
@@ -174,7 +174,7 @@ export var getBlauSkin = function() {
             textLink: palette.blauPurple30,
             textLinkInverse: palette.blauPurple30,
             // CONTROLS
-            control: palette.darkModeGrey,
+            control: palette.darkModeGrey6,
             loadingBar: palette.blauBluePrimary,
             loadingBarBackground: palette.darkModeGrey,
             toggleAndroidInactive: palette.grey5,

package/dist-es/skins/movistar.js

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

package/dist-es/skins/o2-classic.js

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

package/dist-es/skins/o2.js

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

package/dist-es/skins/telefonica.js

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

package/dist-es/skins/utils.js

@@ -1,3 +1,4 @@
+import * as React from "react";
 import { BLAU_SKIN, TELEFONICA_SKIN, VIVO_SKIN, O2_SKIN, O2_CLASSIC_SKIN, MOVISTAR_SKIN } from "./constants";
 import { getBlauSkin } from "./blau";
 import { getTelefonicaSkin } from "./telefonica";
@@ -26,3 +27,14 @@ export var getSkinByName = function(name, variant) {
             }
     }
 };
+// copied/adapted from https://github.com/gregberge/react-flatten-children/blob/master/src/index.tsx
+export 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;
+    }, []);
+};

package/dist-es/skins/vivo.js

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

package/dist-es/spinner.js

@@ -211,7 +211,6 @@ var Spinner = function(param) {
                 r: "30",
                 role: "presentation",
                 stroke: color,
-                strokeLinecap: "square",
                 strokeWidth: "6"
             })
         ]

package/dist-es/tabs.js

@@ -46,6 +46,21 @@ 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) {
+    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();
 }
@@ -67,6 +82,7 @@ import { useAriaId, useElementDimensions } from "./hooks";
 import { Text3 } from "./text";
 import { pxToRem } from "./utils/css";
 import { isRunningAcceptanceTest } from "./utils/platform";
+import { getPrefixedDataAttributes } from "./utils/dom";
 var TAB_MAX_WIDTH = 284;
 var TAB_HEIGHT = 56;
 var LINE_ANIMATION_DURATION_MS = isRunningAcceptanceTest() ? 0 : 300;
@@ -158,7 +174,7 @@ var useStyles = createUseStyles(function(param1) {
     };
 });
 var Tabs = function(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 = useAriaId();
     var ref = useElementDimensions(), width = ref.width, ref1 = ref.ref;
     var animatedLineRef = React.useRef(null);
@@ -194,11 +210,12 @@ var Tabs = function(param2) {
             }, LINE_ANIMATION_DURATION_MS);
         }
     };
-    return /*#__PURE__*/ _jsx("div", {
+    return /*#__PURE__*/ _jsx("div", _objectSpread({
         id: id,
         role: "tablist",
         ref: ref1,
-        className: classes.outerBorder,
+        className: classes.outerBorder
+    }, getPrefixedDataAttributes(dataAttributes), {
         children: /*#__PURE__*/ _jsx(ResponsiveLayout, {
             fullWidth: true,
             children: /*#__PURE__*/ _jsxs("div", {
@@ -250,6 +267,6 @@ var Tabs = function(param2) {
                 ]
             })
         })
-    });
+    }));
 };
 export default Tabs;