@telefonica/mistica 12.1.0 → 12.3.0

package/README.md

@@ -1,5 +1,5 @@
-<img alt="Mística for Web" src="https://raw.githubusercontent.com/Telefonica/mistica-web/master/img/mistica-web.svg">
-<br>
+![Mistica for Web](img/mistica-web-light.svg#gh-light-mode-only)
+![Mistica for Web](img/mistica-web-dark.svg#gh-dark-mode-only)
 
 React components library for Telefonica Design System ([Mistica](https://github.com/Telefonica/mistica))
 

package/dist/button-group.d.ts

@@ -1,10 +1,11 @@
 import * as React from 'react';
 import { ButtonLink, ButtonPrimary, ButtonSecondary } from './button';
-import type { RendersNullableElement } from './utils/types';
+import type { DataAttributes, RendersNullableElement } from './utils/types';
 export interface ButtonGroupProps {
     primaryButton?: RendersNullableElement<typeof ButtonPrimary>;
     secondaryButton?: RendersNullableElement<typeof ButtonSecondary>;
     link?: RendersNullableElement<typeof ButtonLink>;
+    dataAttributes?: DataAttributes;
 }
 declare const ButtonGroup: React.FC<ButtonGroupProps>;
 export default ButtonGroup;

package/dist/button-group.js

@@ -7,6 +7,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 var React = _interopRequireWildcard(require("react"));
 var _jss = require("./jss");
 var _classnames = _interopRequireDefault(require("classnames"));
+var _dom = require("./utils/dom");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -33,6 +34,35 @@ function _interopRequireWildcard(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 buttonLayoutSpacing = 16;
 var buttonLinkPadding = 12;
 var useStyles = (0, _jss).createUseStyles(function() {
@@ -65,14 +95,15 @@ var useStyles = (0, _jss).createUseStyles(function() {
     };
 });
 var ButtonGroup = function ButtonGroup(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__*/ (0, _jsxRuntime).jsxs("div", {
-        className: (0, _classnames).default(classes.inline, classes.container),
+    return anyAction ? /*#__PURE__*/ (0, _jsxRuntime).jsxs("div", _objectSpread({
+        className: (0, _classnames).default(classes.inline, classes.container)
+    }, (0, _dom).getPrefixedDataAttributes(dataAttributes), {
         children: [
             (primaryButton || secondaryButton) && /*#__PURE__*/ (0, _jsxRuntime).jsxs("div", {
                 className: (0, _classnames).default(classes.inline, classes.buttons),
@@ -90,7 +121,7 @@ var ButtonGroup = function ButtonGroup(param) {
                 children: link
             })
         ]
-    }) : null;
+    })) : null;
 };
 var _default = ButtonGroup;
 exports.default = _default;

package/dist/button-group.js.flow

@@ -2,11 +2,12 @@
 
 import * as React from "react";
 import { ButtonLink, ButtonPrimary, ButtonSecondary } from "./button";
-import type { RendersNullableElement } from "./utils/types";
+import type { DataAttributes, RendersNullableElement } from "./utils/types";
 export type ButtonGroupProps = {
   primaryButton?: RendersNullableElement<typeof ButtonPrimary>,
   secondaryButton?: RendersNullableElement<typeof ButtonSecondary>,
   link?: RendersNullableElement<typeof ButtonLink>,
+  dataAttributes?: DataAttributes,
 };
 declare var ButtonGroup: React.ComponentType<ButtonGroupProps>;
 declare export default typeof ButtonGroup;

package/dist/button-layout.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { ButtonLink } from './button';
-import type { RendersNullableElement } from './utils/types';
+import type { DataAttributes, RendersNullableElement } from './utils/types';
 import type { NullableButtonElement } from './button';
 declare type MaybeButtonElement = NullableButtonElement | void | false;
 declare type ButtonLayoutProps = {
@@ -8,6 +8,7 @@ declare type ButtonLayoutProps = {
     align?: 'center' | 'left' | 'right' | 'full-width';
     link?: RendersNullableElement<typeof ButtonLink>;
     withMargins?: boolean;
+    dataAttributes?: DataAttributes;
 };
 declare const ButtonLayout: React.FC<ButtonLayoutProps>;
 export default ButtonLayout;

package/dist/button-layout.js

@@ -10,6 +10,7 @@ var _hooks = require("./hooks");
 var _button = require("./button");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _debounce = _interopRequireDefault(require("lodash/debounce"));
+var _dom = require("./utils/dom");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -93,6 +94,22 @@ 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) {
+    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();
 }
@@ -212,7 +229,7 @@ var buttonsRange = [
     _button.ButtonPrimary
 ];
 var ButtonLayout = function ButtonLayout(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 = (0, _hooks).useScreenSize().isTabletOrSmaller;
     var childrenCount = React.Children.count(children);
     var ref = _slicedToArray(React.useState({
@@ -304,9 +321,10 @@ var ButtonLayout = function ButtonLayout(param1) {
         return range1 - range2;
     });
     var needsLinkAlignment = !isTabletOrSmaller && align === "left";
-    var content = /*#__PURE__*/ (0, _jsxRuntime).jsxs("div", {
+    var content = /*#__PURE__*/ (0, _jsxRuntime).jsxs("div", _objectSpread({
         ref: wrapperElRef,
-        className: classes.container,
+        className: classes.container
+    }, (0, _dom).getPrefixedDataAttributes(dataAttributes), {
         children: [
             link ? /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
                 className: (0, _classnames).default(classes.link, _defineProperty({}, classes.linkAlignment, needsLinkAlignment)),
@@ -314,7 +332,7 @@ var ButtonLayout = function ButtonLayout(param1) {
             }) : null,
             sortedButtons
         ]
-    });
+    }));
     return withMargins ? /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
         className: classes.margins,
         children: content

package/dist/button-layout.js.flow

@@ -2,7 +2,7 @@
 
 import * as React from "react";
 import { ButtonLink } from "./button";
-import type { RendersNullableElement } from "./utils/types";
+import type { DataAttributes, RendersNullableElement } from "./utils/types";
 import type { NullableButtonElement } from "./button";
 declare type MaybeButtonElement = NullableButtonElement | void | false;
 declare type ButtonLayoutProps = {
@@ -10,6 +10,7 @@ declare type ButtonLayoutProps = {
   align?: "center" | "left" | "right" | "full-width",
   link?: RendersNullableElement<typeof ButtonLink>,
   withMargins?: boolean,
+  dataAttributes?: DataAttributes,
 };
 declare var ButtonLayout: React.ComponentType<ButtonLayoutProps>;
 declare export default typeof ButtonLayout;

package/dist/button.js

@@ -17,6 +17,7 @@ var _box = _interopRequireDefault(require("./box"));
 var _common = require("./utils/common");
 var _analytics = require("./utils/analytics");
 var _hooks = require("./hooks");
+var _utils = require("./skins/utils");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -122,11 +123,15 @@ var BUTTON_MIN_WIDTH = 136;
 exports.BUTTON_MIN_WIDTH = BUTTON_MIN_WIDTH;
 var transitionTiming = "0.3s cubic-bezier(0.77, 0, 0.175, 1)";
 var BORDER_PX = 1.5;
-var SPINNER_MARGIN_PX = 8;
+var ICON_MARGIN_PX = 8;
 var X_PADDING_PX = 16 - BORDER_PX;
 var Y_PADDING_PX = 12 - BORDER_PX;
 var X_SMALL_PADDING_PX = 12 - BORDER_PX;
 var Y_SMALL_PADDING_PX = 6 - BORDER_PX;
+var ICON_SIZE = 24;
+var SMALL_ICON_SIZE = 20;
+var SPINNER_SIZE = 20;
+var SMALL_SPINNER_SIZE = 16;
 var commonClasses = function commonClasses() {
     return {
         button: {
@@ -134,7 +139,6 @@ var commonClasses = function commonClasses() {
             position: "relative",
             width: "auto",
             minWidth: BUTTON_MIN_WIDTH,
-            textAlign: "center",
             border: "".concat(BORDER_PX, "px solid transparent"),
             borderRadius: 4,
             overflow: "hidden",
@@ -169,6 +173,9 @@ var commonClasses = function commonClasses() {
             }
         },
         textContent: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
             padding: "".concat(Y_PADDING_PX, "px ").concat(X_PADDING_PX, "px"),
             opacity: 1,
             transition: "opacity ".concat(transitionTiming, ", transform ").concat(transitionTiming),
@@ -176,9 +183,7 @@ var commonClasses = function commonClasses() {
                 padding: "".concat(Y_SMALL_PADDING_PX, "px ").concat(X_SMALL_PADDING_PX, "px")
             },
             "& svg": {
-                marginRight: SPINNER_MARGIN_PX,
-                verticalAlign: "bottom",
-                height: "100%"
+                display: "block"
             }
         },
         isLoading: {
@@ -299,6 +304,48 @@ var useDangerButtonStyles = (0, _jss).createUseStyles(function(theme) {
         inverse: dangerButtonStyles(theme)
     });
 });
+var renderButtonContent = function renderButtonContent(param) {
+    var content = param.content, defaultIconSize = param.defaultIconSize, renderText = param.renderText;
+    var childrenArr = (0, _utils).flattenChildren(content);
+    var length = childrenArr.length;
+    var resultChildrenArr = [];
+    var accText = [];
+    var flushAccText = function flushAccText() {
+        resultChildrenArr.push(/*#__PURE__*/ (0, _jsxRuntime).jsx(React.Fragment, {
+            children: renderText(accText)
+        }, resultChildrenArr.length));
+        accText = [];
+    };
+    childrenArr.forEach(function(element, idx) {
+        var isFirstChild = idx === 0;
+        var isLastChild = idx === length - 1;
+        var isIconElement = /*#__PURE__*/ React.isValidElement(element);
+        if (isIconElement) {
+            if (accText.length) {
+                flushAccText();
+            }
+            var _size;
+            var sizeInPx = (_size = element.props.size) !== null && _size !== void 0 ? _size : defaultIconSize;
+            resultChildrenArr.push(/*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
+                style: {
+                    display: "flex",
+                    alignItems: "center",
+                    marginLeft: isFirstChild ? 0 : ICON_MARGIN_PX,
+                    marginRight: isLastChild ? 0 : ICON_MARGIN_PX
+                },
+                children: /*#__PURE__*/ React.cloneElement(element, {
+                    size: (0, _css).pxToRem(sizeInPx)
+                })
+            }, resultChildrenArr.length));
+        } else {
+            accText.push(element);
+            if (isLastChild) {
+                flushAccText();
+            }
+        }
+    });
+    return resultChildrenArr;
+};
 var Button = function Button(props) {
     var eventFormat = (0, _analytics).useTrackingConfig().eventFormat;
     var ref = (0, _formContext).useForm(), formStatus = ref.formStatus, formId = ref.formId;
@@ -321,24 +368,6 @@ var Button = function Button(props) {
         shouldRenderSpinner,
         formStatus
     ]);
-    var spinnerSizeRem = (0, _css).pxToRem(props.small ? 16 : 24);
-    var renderText = function renderText(text) {
-        return props.small ? /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text, {
-            size: 14,
-            lineHeight: 20,
-            weight: "medium",
-            truncate: 1,
-            color: "inherit",
-            as: "div",
-            children: text
-        }) : /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text3, {
-            medium: true,
-            truncate: 1,
-            color: "inherit",
-            as: "div",
-            children: text
-        });
-    };
     var createDefaultTrackingEvent = function createDefaultTrackingEvent() {
         if (eventFormat === "google-analytics-4") {
             return {
@@ -354,6 +383,25 @@ var Button = function Button(props) {
             };
         }
     };
+    var defaultIconSize = props.small ? SMALL_ICON_SIZE : ICON_SIZE;
+    var spinnerSizeRem = (0, _css).pxToRem(props.small ? SMALL_SPINNER_SIZE : SPINNER_SIZE);
+    var renderText = function renderText(element) {
+        return props.small ? /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text, {
+            size: 14,
+            lineHeight: 20,
+            weight: "medium",
+            truncate: 1,
+            color: "inherit",
+            as: "div",
+            children: element
+        }) : /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text3, {
+            medium: true,
+            truncate: 1,
+            color: "inherit",
+            as: "div",
+            children: element
+        });
+    };
     var _trackingEvent;
     var _obj;
     var commonProps = {
@@ -371,16 +419,24 @@ var Button = function Button(props) {
                 /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
                     "aria-hidden": showSpinner ? true : undefined,
                     className: classes.textContent,
-                    children: renderText(props.children)
+                    children: renderButtonContent({
+                        content: props.children,
+                        defaultIconSize: defaultIconSize,
+                        renderText: renderText
+                    })
                 }),
                 /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
                     className: classes.loadingFiller,
                     "aria-hidden": true,
                     style: {
                         paddingLeft: spinnerSizeRem,
-                        paddingRight: SPINNER_MARGIN_PX + 2 * (props.small ? X_SMALL_PADDING_PX : X_PADDING_PX)
+                        paddingRight: ICON_MARGIN_PX + 2 * (props.small ? X_SMALL_PADDING_PX : X_PADDING_PX)
                     },
-                    children: renderText(loadingText)
+                    children: renderButtonContent({
+                        content: loadingText,
+                        defaultIconSize: defaultIconSize,
+                        renderText: renderText
+                    })
                 }),
                 /*#__PURE__*/ (0, _jsxRuntime).jsxs("div", {
                     "aria-hidden": showSpinner ? undefined : true,
@@ -405,7 +461,11 @@ var Button = function Button(props) {
                         }),
                         loadingText ? /*#__PURE__*/ (0, _jsxRuntime).jsx(_box.default, {
                             paddingLeft: 8,
-                            children: renderText(loadingText)
+                            children: renderButtonContent({
+                                content: loadingText,
+                                defaultIconSize: defaultIconSize,
+                                renderText: renderText
+                            })
                         }) : null
                     ]
                 })
@@ -482,6 +542,14 @@ var useButtonLinkStyles = (0, _jss).createUseStyles(function(theme) {
             }),
             "&[disabled]": disabledStyle
         },
+        textContent: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            "& svg": {
+                display: "block"
+            }
+        },
         inverse: {
             color: theme.colors.textLinkInverse,
             "&:enabled:active": {
@@ -518,17 +586,27 @@ var ButtonLink = /*#__PURE__*/ React.forwardRef(function(props, ref) {
             };
         }
     };
+    var renderText = function renderText(element) {
+        return /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text2, {
+            medium: true,
+            truncate: 1,
+            color: "inherit",
+            children: element
+        });
+    };
     var _trackingEvent;
     var _obj;
     var commonProps = {
         className: (0, _classnames).default(classes.link, (_obj = {}, _defineProperty(_obj, classes.inverse, isInverse), _defineProperty(_obj, classes.aligned, props.aligned), _obj)),
         trackingEvent: (_trackingEvent = props.trackingEvent) !== null && _trackingEvent !== void 0 ? _trackingEvent : props.trackEvent ? createDefaultTrackingEvent() : undefined,
         dataAttributes: props.dataAttributes,
-        children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text2, {
-            medium: true,
-            truncate: 1,
-            color: "inherit",
-            children: props.children
+        children: /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
+            className: classes.textContent,
+            children: renderButtonContent({
+                content: props.children,
+                defaultIconSize: SMALL_ICON_SIZE,
+                renderText: renderText
+            })
         }),
         disabled: props.disabled || formStatus === "sending"
     };

package/dist/carousel.js

@@ -20,6 +20,7 @@ var _image = require("./image");
 var _dom = require("./utils/dom");
 var _platform = require("./utils/platform");
 var _documentVisibility = require("./utils/document-visibility");
+var _containerTypeContext = require("./container-type-context");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -218,8 +219,19 @@ var arrowButtonStyle = function arrowButtonStyle(theme) {
         display: "none"
     });
 };
+var arrowButtonSeparation = function arrowButtonSeparation(containerType, isLargeDesktop, sideMargin) {
+    switch(containerType){
+        case "mobile-column":
+        case "tablet-column":
+            return -sideMargin;
+        case "desktop-wide-column":
+            return isLargeDesktop ? -(24 + arrowButtonSize) : -arrowButtonSize / 2;
+        default:
+            return -arrowButtonSize / 2;
+    }
+};
 var useStyles = (0, _jss).createUseStyles(function(theme) {
-    var _obj, _obj1, _obj2;
+    var _obj;
     return {
         carouselContainer: {
             // This value is a workaround to solve an issue when the page is rendered in a hidden webview
@@ -231,26 +243,18 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
             position: "absolute",
             zIndex: 1,
             top: "calc(50% - ".concat(arrowButtonSize / 2, "px)"),
-            "&.prev": (_obj = {
-                left: -arrowButtonSize / 2
-            }, _defineProperty(_obj, theme.mq.tabletOrSmaller, {
+            "&.prev": {
                 left: function left(param) {
-                    var sideMargin = param.sideMargin;
-                    return -sideMargin;
+                    var containerType = param.containerType, isLargeDesktop = param.isLargeDesktop, sideMargin = param.sideMargin;
+                    return arrowButtonSeparation(containerType, isLargeDesktop, sideMargin);
                 }
-            }), _defineProperty(_obj, theme.mq.largeDesktop, {
-                left: -(24 + arrowButtonSize)
-            }), _obj),
-            "&.next": (_obj1 = {
-                right: -arrowButtonSize / 2
-            }, _defineProperty(_obj1, theme.mq.tabletOrSmaller, {
+            },
+            "&.next": {
                 right: function right(param) {
-                    var sideMargin = param.sideMargin;
-                    return -sideMargin;
+                    var containerType = param.containerType, isLargeDesktop = param.isLargeDesktop, sideMargin = param.sideMargin;
+                    return arrowButtonSeparation(containerType, isLargeDesktop, sideMargin);
                 }
-            }), _defineProperty(_obj1, theme.mq.largeDesktop, {
-                right: -(24 + arrowButtonSize)
-            }), _obj1)
+            }
         }),
         hasScroll: {},
         centered: {},
@@ -276,7 +280,7 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
                 width: "25%"
             }
         })),
-        item: (_obj2 = {
+        item: (_obj = {
             scrollSnapStop: (0, _platform).isAndroid(theme.platformOverrides) ? "always" : "normal",
             scrollSnapAlign: "start",
             flexShrink: 0,
@@ -295,7 +299,7 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
                 },
                 scrollMargin: 0
             }
-        }, _defineProperty(_obj2, theme.mq.tabletOrSmaller, {
+        }, _defineProperty(_obj, theme.mq.tabletOrSmaller, {
             width: function width(param) {
                 var itemsPerPageConfig = param.itemsPerPageConfig, gap = param.gap;
                 return "calc(".concat(100 / itemsPerPageConfig.mobile, "% + ").concat(gap / itemsPerPageConfig.mobile, "px)");
@@ -346,14 +350,14 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
                     return 0;
                 }
             }
-        }), _defineProperty(_obj2, "&:not(:empty) ~ &:not(:empty)", {
+        }), _defineProperty(_obj, "&:not(:empty) ~ &:not(:empty)", {
             paddingLeft: function paddingLeft(param) {
                 var gap = param.gap;
                 return gap;
             }
-        }), _defineProperty(_obj2, "&:empty", {
+        }), _defineProperty(_obj, "&:empty", {
             display: "none"
-        }), _obj2),
+        }), _obj),
         bullets: {
             display: "flex",
             justifyContent: "center"
@@ -417,9 +421,10 @@ var DEFAULT_AUTOPLAY_TIME = 5000;
 var BaseCarousel = function BaseCarousel(param) {
     var items = param.items, itemStyle = param.itemStyle, itemClassName = param.itemClassName, withBullets = param.withBullets, renderBullets = param.renderBullets, itemsPerPage = param.itemsPerPage, itemsToScroll = param.itemsToScroll, _mobilePageOffset = param.mobilePageOffset, mobilePageOffset = _mobilePageOffset === void 0 ? 16 : _mobilePageOffset, gapProp = param.gap, free = param.free, centered = param.centered, autoplay = param.autoplay, onPageChange = param.onPageChange, dataAttributes = param.dataAttributes;
     var texts = (0, _hooks).useTheme().texts;
+    var containerType = (0, _containerTypeContext).useContainerType();
     var itemsPerPageConfig = normalizeItemsPerPage(itemsPerPage);
     var mobilePageOffsetConfig = normalizeMobilePageOffset(mobilePageOffset);
-    var isDesktopOrBigger = (0, _hooks).useScreenSize().isDesktopOrBigger;
+    var ref4 = (0, _hooks).useScreenSize(), isDesktopOrBigger = ref4.isDesktopOrBigger, isLargeDesktop = ref4.isLargeDesktop;
     var gap = gapProp !== null && gapProp !== void 0 ? gapProp : isDesktopOrBigger ? 16 : 8;
     var sideMargin = (0, _responsiveLayout).useResonsiveLayoutMargin();
     var classes = useStyles({
@@ -427,16 +432,18 @@ var BaseCarousel = function BaseCarousel(param) {
         mobilePageOffsetConfig: mobilePageOffsetConfig,
         free: free,
         gap: gap,
-        sideMargin: sideMargin
+        sideMargin: sideMargin,
+        containerType: containerType,
+        isLargeDesktop: isLargeDesktop
     });
     var carouselRef = React.useRef(null);
     var itemsPerPageFloor = isDesktopOrBigger ? Math.floor(itemsPerPageConfig.desktop) : Math.floor(itemsPerPageConfig.mobile);
     var pagesCount = Math.ceil(items.length / itemsPerPageFloor);
-    var ref3 = _slicedToArray(React.useState({
+    var ref1 = _slicedToArray(React.useState({
         scrollLeft: 0,
         scrollRight: 0
-    }), 2), ref1 = ref3[0], scrollLeft1 = ref1.scrollLeft, scrollRight1 = ref1.scrollRight, setScroll = ref3[1];
-    var ref2 = _slicedToArray(React.useState([]), 2), itemScrollPositions = ref2[0], setItemScrollPositions = ref2[1];
+    }), 2), ref2 = ref1[0], scrollLeft1 = ref2.scrollLeft, scrollRight1 = ref2.scrollRight, setScroll = ref1[1];
+    var ref3 = _slicedToArray(React.useState([]), 2), itemScrollPositions = ref3[0], setItemScrollPositions = ref3[1];
     var pagesScrollPositions = calcPagesScrollPositions(itemScrollPositions, pagesCount);
     var scrollPositions = itemsToScroll ? calcPagesScrollPositions(itemScrollPositions, Math.ceil(items.length / itemsToScroll)) : pagesScrollPositions;
     var showNextArrow = scrollRight1 !== 0;
@@ -735,10 +742,10 @@ var Slideshow = function Slideshow(param) {
         sideMargin: sideMargin
     });
     var carouselRef = React.useRef(null);
-    var ref5 = _slicedToArray(React.useState({
+    var ref6 = _slicedToArray(React.useState({
         scrollLeft: 0,
         scrollRight: 0
-    }), 2), ref4 = ref5[0], scrollLeft2 = ref4.scrollLeft, scrollRight2 = ref4.scrollRight, setScroll = ref5[1];
+    }), 2), ref5 = ref6[0], scrollLeft2 = ref5.scrollLeft, scrollRight2 = ref5.scrollRight, setScroll = ref6[1];
     var goPrev = React.useCallback(function() {
         var carouselEl = carouselRef.current;
         if (carouselEl) {

package/dist/container-type-context.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import type { ContainerType } from './utils/types';
+declare const ContainerTypeContext: React.Context<ContainerType | null>;
+export declare const useContainerType: () => ContainerType;
+export default ContainerTypeContext;

package/dist/container-type-context.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+exports.default = exports.useContainerType = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _hooks = require("./hooks");
+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 ContainerTypeContext = /*#__PURE__*/ React.createContext(null);
+var useContainerType = function useContainerType() {
+    var containerType = React.useContext(ContainerTypeContext);
+    var ref = (0, _hooks).useScreenSize(), isTablet = ref.isTablet, isDesktopOrBigger = ref.isDesktopOrBigger, isLargeDesktop = ref.isLargeDesktop;
+    if (containerType) {
+        return containerType;
+    }
+    if (isLargeDesktop) {
+        return "desktop-wide-column";
+    }
+    if (isDesktopOrBigger) {
+        return "desktop-medium-column";
+    }
+    if (isTablet) {
+        return "tablet-column";
+    }
+    return "mobile-column";
+};
+exports.useContainerType = useContainerType;
+var _default = ContainerTypeContext;
+exports.default = _default;

package/dist/container-type-context.js.flow

@@ -0,0 +1,7 @@
+// @flow
+
+import * as React from "react";
+import type { ContainerType } from "./utils/types";
+declare var ContainerTypeContext: React.Context<ContainerType | null>;
+declare export var useContainerType: () => ContainerType;
+declare export default typeof ContainerTypeContext;