@telefonica/mistica 12.2.0 → 12.4.0

package/dist/navigation-breadcrumbs.js

@@ -7,6 +7,15 @@ var _jsxRuntime = require("react/jsx-runtime");
 var React = _interopRequireWildcard(require("react"));
 var _text = require("./text");
 var _hooks = require("./hooks");
+var _jss = require("./jss");
+var _dom = require("./utils/dom");
+var _textLink = _interopRequireDefault(require("./text-link"));
+var _themeVariantContext = require("./theme-variant-context");
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
 function _interopRequireWildcard(obj) {
     if (obj && obj.__esModule) {
         return obj;
@@ -28,41 +37,111 @@ 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 BREADCRUMB_SEPARATOR = " / ";
+var useStyles = (0, _jss).createUseStyles(function() {
+    return {
+        link: {
+            "&:hover": {
+                textDecoration: "underline"
+            }
+        },
+        current: {
+            textDecoration: "none",
+            pointerEvents: "none"
+        },
+        list: {
+            padding: 0,
+            margin: 0,
+            listStyleType: "none",
+            "& > li": {
+                display: "inline"
+            }
+        }
+    };
+});
 var NavigationBreadcrumbs = function NavigationBreadcrumbs(param1) {
-    var title1 = param1.title, breadcrumbs = param1.breadcrumbs;
-    var theme = (0, _hooks).useTheme();
-    var Link = theme.Link;
-    return /*#__PURE__*/ (0, _jsxRuntime).jsxs("div", {
-        children: [
-            breadcrumbs.map(function(param, index) {
-                var title = param.title, url = param.url;
-                return /*#__PURE__*/ (0, _jsxRuntime).jsxs(React.Fragment, {
-                    children: [
-                        /*#__PURE__*/ (0, _jsxRuntime).jsx(Link, {
-                            style: {
-                                textDecoration: "none"
-                            },
-                            to: url,
-                            children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text1, {
+    var title1 = param1.title, breadcrumbs = param1.breadcrumbs, dataAttributes = param1.dataAttributes, tmp = param1["aria-label"], ariaLabel = tmp === void 0 ? "Breadcrumb" : tmp;
+    var colors = (0, _hooks).useTheme().colors;
+    var classes = useStyles();
+    var isInverse = (0, _themeVariantContext).useIsInverseVariant();
+    return /*#__PURE__*/ (0, _jsxRuntime).jsx("nav", _objectSpread({
+        "aria-label": ariaLabel
+    }, (0, _dom).getPrefixedDataAttributes(dataAttributes), {
+        children: /*#__PURE__*/ (0, _jsxRuntime).jsxs("ol", {
+            className: classes.list,
+            children: [
+                breadcrumbs.map(function(param, index) {
+                    var title = param.title, url = param.url;
+                    return /*#__PURE__*/ (0, _jsxRuntime).jsxs("li", {
+                        children: [
+                            /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text1, {
                                 regular: true,
-                                children: title
+                                children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_textLink.default, {
+                                    to: url,
+                                    style: {
+                                        color: isInverse ? colors.textPrimaryInverse : colors.textPrimary
+                                    },
+                                    className: classes.link,
+                                    children: title
+                                })
+                            }),
+                            /*#__PURE__*/ (0, _jsxRuntime).jsx("span", {
+                                role: "presentation",
+                                children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text1, {
+                                    regular: true,
+                                    children: BREADCRUMB_SEPARATOR
+                                })
                             })
-                        }),
-                        /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text1, {
+                        ]
+                    }, index);
+                }),
+                /*#__PURE__*/ (0, _jsxRuntime).jsx("li", {
+                    children: /*#__PURE__*/ (0, _jsxRuntime).jsx("a", {
+                        "aria-current": "page",
+                        href: "#",
+                        className: classes.current,
+                        onClick: function onClick(e) {
+                            e.preventDefault();
+                        },
+                        children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text1, {
                             regular: true,
-                            children: BREADCRUMB_SEPARATOR
+                            color: isInverse ? colors.textSecondaryInverse : colors.textSecondary,
+                            children: title1
                         })
-                    ]
-                }, index);
-            }),
-            /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text1, {
-                regular: true,
-                color: theme.colors.textSecondary,
-                children: title1
-            })
-        ]
-    });
+                    })
+                })
+            ]
+        })
+    }));
 };
 var _default = NavigationBreadcrumbs;
 exports.default = _default;

package/dist/navigation-breadcrumbs.js.flow

@@ -1,12 +1,15 @@
 // @flow
 
 import * as React from "react";
+import type { DataAttributes } from "./utils/types";
 export type NavigationBreadcrumbsProps = {
   title: string,
   breadcrumbs: $ReadOnlyArray<{
     +title: string,
     +url: string,
   }>,
+  dataAttributes?: DataAttributes,
+  "aria-label"?: string,
 };
 declare var NavigationBreadcrumbs: React.ComponentType<NavigationBreadcrumbsProps>;
 declare export default typeof NavigationBreadcrumbs;

package/dist/package-version.js

@@ -3,5 +3,5 @@ Object.defineProperty(exports, "__esModule", {
     value: true
 });
 exports.PACKAGE_VERSION = void 0;
-var PACKAGE_VERSION = "12.2.0";
+var PACKAGE_VERSION = "12.4.0";
 exports.PACKAGE_VERSION = PACKAGE_VERSION;

package/dist/responsive-layout.js

@@ -9,6 +9,7 @@ var _jss = require("./jss");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _hooks = require("./hooks");
 var _dom = require("./utils/dom");
+var _containerTypeContext = _interopRequireDefault(require("./container-type-context"));
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -109,16 +110,20 @@ var ResponsiveLayout = function ResponsiveLayout(param) {
     var classes = useStyles();
     var ref = (0, _hooks).useScreenSize(), isMobile = ref.isMobile, isTablet = ref.isTablet;
     var sideMargin = isMobile ? MOBILE_SIDE_MARGIN : isTablet ? TABLET_SIDE_MARGIN : null;
+    var containerType = isMobile ? "mobile-column" : isTablet ? "tablet-column" : "desktop-wide-column";
     return /*#__PURE__*/ (0, _jsxRuntime).jsx(ResponsiveLayoutMarginContext.Provider, {
         value: sideMargin,
-        children: /*#__PURE__*/ (0, _jsxRuntime).jsx("div", _objectSpread({
-            className: (0, _classnames).default(classes.container, className)
-        }, (0, _dom).getPrefixedDataAttributes(dataAttributes), {
-            children: /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
-                className: (0, _classnames).default(classes.layout, _defineProperty({}, classes.layoutFullWidth, fullWidth)),
-                children: children
-            })
-        }))
+        children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_containerTypeContext.default.Provider, {
+            value: containerType,
+            children: /*#__PURE__*/ (0, _jsxRuntime).jsx("div", _objectSpread({
+                className: (0, _classnames).default(classes.container, className)
+            }, (0, _dom).getPrefixedDataAttributes(dataAttributes), {
+                children: /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
+                    className: (0, _classnames).default(classes.layout, _defineProperty({}, classes.layoutFullWidth, fullWidth)),
+                    children: children
+                })
+            }))
+        })
     });
 };
 var _default = ResponsiveLayout;

package/dist/screen-size-context-provider.js

@@ -99,13 +99,15 @@ var ScreenSizeContextProvider = function ScreenSizeContextProvider(param1) {
             mobile: stripMedia(theme.mq.mobile),
             tablet: stripMedia(theme.mq.tablet),
             tabletOrBigger: stripMedia(theme.mq.tabletOrBigger),
-            tabletOrSmaller: stripMedia(theme.mq.tabletOrSmaller)
+            tabletOrSmaller: stripMedia(theme.mq.tabletOrSmaller),
+            largueDesktop: stripMedia(theme.mq.largeDesktop)
         };
     }, [
         theme.mq.mobile,
         theme.mq.tablet,
         theme.mq.tabletOrBigger,
-        theme.mq.tabletOrSmaller
+        theme.mq.tabletOrSmaller,
+        theme.mq.largeDesktop, 
     ]);
     var ref1 = _slicedToArray(React.useState(function() {
         return !isServerSide && window.matchMedia(mediaQueries.mobile).matches;
@@ -119,6 +121,9 @@ var ScreenSizeContextProvider = function ScreenSizeContextProvider(param1) {
     var ref4 = _slicedToArray(React.useState(function() {
         return !isServerSide && window.matchMedia(mediaQueries.tabletOrSmaller).matches;
     }), 2), isTabletOrSmaller = ref4[0], setIsTabletOrSmaller = ref4[1];
+    var ref5 = _slicedToArray(React.useState(function() {
+        return !isServerSide && window.matchMedia(mediaQueries.largueDesktop).matches;
+    }), 2), isLargeDesktop = ref5[0], setIsLargeDesktop = ref5[1];
     (0, _hooks).useIsomorphicLayoutEffect(function() {
         if (!window.matchMedia) {
             return;
@@ -139,6 +144,10 @@ var ScreenSizeContextProvider = function ScreenSizeContextProvider(param1) {
             [
                 mediaQueries.tabletOrSmaller,
                 setIsTabletOrSmaller
+            ],
+            [
+                mediaQueries.largueDesktop,
+                setIsLargeDesktop
             ], 
         ];
         var cleanupFunctions = entries.map(function(param) {
@@ -162,7 +171,8 @@ var ScreenSizeContextProvider = function ScreenSizeContextProvider(param1) {
         mediaQueries.mobile,
         mediaQueries.tablet,
         mediaQueries.tabletOrBigger,
-        mediaQueries.tabletOrSmaller
+        mediaQueries.tabletOrSmaller,
+        mediaQueries.largueDesktop, 
     ]);
     var value = React.useMemo(function() {
         return {
@@ -170,13 +180,15 @@ var ScreenSizeContextProvider = function ScreenSizeContextProvider(param1) {
             isTablet: isTablet,
             isTabletOrBigger: isTabletOrBigger,
             isTabletOrSmaller: isTabletOrSmaller,
-            isDesktopOrBigger: !isTabletOrSmaller
+            isDesktopOrBigger: !isTabletOrSmaller,
+            isLargeDesktop: isLargeDesktop
         };
     }, [
         isMobile,
         isTablet,
         isTabletOrBigger,
-        isTabletOrSmaller
+        isTabletOrSmaller,
+        isLargeDesktop
     ]);
     return /*#__PURE__*/ (0, _jsxRuntime).jsx(_screenSizeContext.default.Provider, {
         value: value,

package/dist/screen-size-context.d.ts

@@ -5,6 +5,7 @@ export declare type ScreenSizeContextType = {
     isTabletOrBigger: boolean;
     isTabletOrSmaller: boolean;
     isDesktopOrBigger: boolean;
+    isLargeDesktop: boolean;
 };
 declare const ScreenSizeContext: React.Context<ScreenSizeContextType>;
 export default ScreenSizeContext;

package/dist/screen-size-context.js

@@ -30,7 +30,8 @@ var ScreenSizeContext = /*#__PURE__*/ React.createContext({
     isTablet: false,
     isTabletOrBigger: false,
     isTabletOrSmaller: false,
-    isDesktopOrBigger: false
+    isDesktopOrBigger: false,
+    isLargeDesktop: false
 });
 var _default = ScreenSizeContext;
 exports.default = _default;

package/dist/screen-size-context.js.flow

@@ -7,6 +7,7 @@ export type ScreenSizeContextType = {
   isTabletOrBigger: boolean,
   isTabletOrSmaller: boolean,
   isDesktopOrBigger: boolean,
+  isLargeDesktop: boolean,
 };
 declare var ScreenSizeContext: React.Context<ScreenSizeContextType>;
 declare export default typeof ScreenSizeContext;

package/dist/snackbar.js

@@ -10,6 +10,7 @@ var _touchable = _interopRequireDefault(require("./touchable"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _webviewBridge = require("@tef-novum/webview-bridge");
 var _hooks = require("./hooks");
+var _text = require("./text");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -146,9 +147,6 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
             transition: "transform ".concat(TRANSITION_TIME_IN_MS, "ms ease-in-out, opacity ").concat(TRANSITION_TIME_IN_MS, "ms ease-in-out")
         },
         snackbarContent: {
-            fontSize: 14,
-            lineHeight: "20px",
-            color: theme.colors.textPrimaryInverse,
             display: "flex",
             flexDirection: function flexDirection(param) {
                 var isLongButton = param.isLongButton;
@@ -201,6 +199,7 @@ var SnackbarComponent = function SnackbarComponent(param) {
     var ref1 = (0, _hooks).useElementDimensions(), buttonWidth = ref1.width, buttonRef = ref1.ref;
     var isDesktopOrBigger = (0, _hooks).useScreenSize().isDesktopOrBigger;
     var longButtonWidth = isDesktopOrBigger ? 160 : 128;
+    var colors = (0, _hooks).useTheme().colors;
     var classes = useStyles({
         type: type,
         isOpen: isOpen,
@@ -236,7 +235,9 @@ var SnackbarComponent = function SnackbarComponent(param) {
             children: /*#__PURE__*/ (0, _jsxRuntime).jsxs("div", {
                 className: classes.snackbarContent,
                 children: [
-                    /*#__PURE__*/ (0, _jsxRuntime).jsx("span", {
+                    /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text2, {
+                        regular: true,
+                        color: colors.textPrimaryInverse,
                         children: message
                     }),
                     buttonText && /*#__PURE__*/ (0, _jsxRuntime).jsx(_touchable.default, {

package/dist/tabs.js

@@ -285,6 +285,7 @@ var Tabs = function Tabs(param2) {
                                         /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text3, {
                                             medium: true,
                                             color: "inherit",
+                                            wordBreak: false,
                                             children: text
                                         })
                                     ]

package/dist/text-field-base.js

@@ -435,6 +435,7 @@ var TextFieldBase = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
                 children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text3, {
                     color: colors.textSecondary,
                     regular: true,
+                    wordBreak: false,
                     children: prefix
                 })
             }),

package/dist/text.d.ts

@@ -8,6 +8,7 @@ export interface TextPresetProps {
     children?: React.ReactNode;
     truncate?: boolean | number;
     wordBreak?: boolean;
+    hyphens?: 'auto' | 'manual' | 'none';
     id?: string;
     as?: React.ComponentType<any> | string;
     role?: string;

package/dist/text.js

@@ -128,6 +128,10 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
                     return wordBreak1 ? "break-word" : "inherit";
                 }
             },
+            hyphens: function hyphens(param) {
+                var hyphens1 = param.hyphens;
+                return hyphens1;
+            },
             // Needed to reset the default browser margin that adds to p, h1, h2... elements.
             margin: 0
         }, theme.mq.tabletOrSmaller, {
@@ -161,7 +165,7 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
     };
 });
 var Text = function Text(param) {
-    var weight = param.weight, color = param.color, decoration = param.decoration, truncate = param.truncate, transform = param.transform, wordBreak = param.wordBreak, _as = param.as, as = _as === void 0 ? "span" : _as, children = param.children, size = param.size, _mobileSize = param.mobileSize, mobileSize = _mobileSize === void 0 ? size : _mobileSize, _desktopSize = param.desktopSize, desktopSize = _desktopSize === void 0 ? size : _desktopSize, lineHeight = param.lineHeight, _mobileLineHeight = param.mobileLineHeight, mobileLineHeight = _mobileLineHeight === void 0 ? lineHeight : _mobileLineHeight, _desktopLineHeight = param.desktopLineHeight, desktopLineHeight = _desktopLineHeight === void 0 ? lineHeight : _desktopLineHeight, letterSpacing = param.letterSpacing, id = param.id, role = param.role, ariaLevel = param["aria-level"], dataAttributes = param.dataAttributes;
+    var weight = param.weight, color = param.color, decoration = param.decoration, truncate = param.truncate, transform = param.transform, _wordBreak = param.wordBreak, wordBreak = _wordBreak === void 0 ? true : _wordBreak, hyphens = param.hyphens, _as = param.as, as = _as === void 0 ? "span" : _as, children = param.children, size = param.size, _mobileSize = param.mobileSize, mobileSize = _mobileSize === void 0 ? size : _mobileSize, _desktopSize = param.desktopSize, desktopSize = _desktopSize === void 0 ? size : _desktopSize, lineHeight = param.lineHeight, _mobileLineHeight = param.mobileLineHeight, mobileLineHeight = _mobileLineHeight === void 0 ? lineHeight : _mobileLineHeight, _desktopLineHeight = param.desktopLineHeight, desktopLineHeight = _desktopLineHeight === void 0 ? lineHeight : _desktopLineHeight, letterSpacing = param.letterSpacing, id = param.id, role = param.role, ariaLevel = param["aria-level"], dataAttributes = param.dataAttributes;
     var isInverse = (0, _themeVariantContext).useIsInverseVariant();
     var classes = useStyles({
         isInverse: isInverse,
@@ -174,6 +178,7 @@ var Text = function Text(param) {
         decoration: decoration,
         transform: transform,
         wordBreak: wordBreak,
+        hyphens: hyphens,
         letterSpacing: letterSpacing,
         truncate: truncate
     });

package/dist/text.js.flow

@@ -10,6 +10,7 @@ export type TextPresetProps = {
   children?: React.Node,
   truncate?: boolean | number,
   wordBreak?: boolean,
+  hyphens?: "auto" | "manual" | "none",
   id?: string,
   as?: React.ComponentType<any> | string,
   role?: string,

package/dist/title.js

@@ -66,6 +66,7 @@ var Title1 = function Title1(param) {
             as: as,
             id: id,
             dataAttributes: dataAttributes,
+            wordBreak: false,
             children: children
         }),
         right: right

package/dist/utils/types.d.ts

@@ -10,3 +10,4 @@ export declare type IconProps = {
     className?: string;
     style?: React.CSSProperties;
 };
+export declare type ContainerType = 'desktop-small-column' | 'desktop-medium-column' | 'desktop-wide-column' | 'tablet-column' | 'mobile-column';

package/dist/utils/types.js.flow

@@ -11,5 +11,11 @@ export type IconProps = {
   className?: string,
   style?: CssStyle,
 };
+export type ContainerType =
+  | "desktop-small-column"
+  | "desktop-medium-column"
+  | "desktop-wide-column"
+  | "tablet-column"
+  | "mobile-column";
 
 import { type CssStyle } from "../__css_types__.js.flow";

package/dist-es/card.js

@@ -106,7 +106,6 @@ var CardContent = function(param) {
                                     space: 4,
                                     children: [
                                         pretitle && /*#__PURE__*/ _jsx(Text1, {
-                                            wordBreak: true,
                                             truncate: pretitleLinesMax,
                                             as: "div",
                                             regular: true,
@@ -114,14 +113,12 @@ var CardContent = function(param) {
                                             children: pretitle
                                         }),
                                         /*#__PURE__*/ _jsx(Text4, {
-                                            wordBreak: true,
                                             truncate: titleLinesMax,
                                             as: "h1",
                                             regular: true,
                                             children: title
                                         }),
                                         /*#__PURE__*/ _jsx(Text2, {
-                                            wordBreak: true,
                                             truncate: subtitleLinesMax,
                                             as: "div",
                                             regular: true,
@@ -133,7 +130,6 @@ var CardContent = function(param) {
                         })
                     }),
                     description && /*#__PURE__*/ _jsx(Text2, {
-                        wordBreak: true,
                         truncate: descriptionLinesMax,
                         as: "p",
                         regular: true,
@@ -363,14 +359,12 @@ var SnapCard = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
                                 space: 4,
                                 children: [
                                     title && /*#__PURE__*/ _jsx(Text2, {
-                                        wordBreak: true,
                                         truncate: titleLinesMax,
                                         as: "h1",
                                         regular: true,
                                         children: title
                                     }),
                                     subtitle && /*#__PURE__*/ _jsx(Text2, {
-                                        wordBreak: true,
                                         truncate: subtitleLinesMax,
                                         regular: true,
                                         color: colors.textSecondary,

package/dist-es/carousel.js

@@ -101,6 +101,7 @@ import { DisableBorderRadiusProvider } from "./image";
 import { getPrefixedDataAttributes, listenResize } from "./utils/dom";
 import { isAndroid } from "./utils/platform";
 import { useDocumentVisibility } from "./utils/document-visibility";
+import { useContainerType } from "./container-type-context";
 var useShouldAutoplay = function(autoplay, ref) {
     var isDocumentVisible = useDocumentVisibility();
     var isInViewport = useIsInViewport(ref, false);
@@ -186,8 +187,19 @@ var arrowButtonStyle = function(theme) {
         display: "none"
     }));
 };
+var arrowButtonSeparation = function(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 = 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
@@ -199,26 +211,18 @@ var useStyles = 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(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(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: {},
@@ -244,7 +248,7 @@ var useStyles = createUseStyles(function(theme) {
                 width: "25%"
             }
         })),
-        item: (_obj2 = {
+        item: (_obj = {
             scrollSnapStop: isAndroid(theme.platformOverrides) ? "always" : "normal",
             scrollSnapAlign: "start",
             flexShrink: 0,
@@ -264,7 +268,7 @@ var useStyles = createUseStyles(function(theme) {
                 },
                 scrollMargin: 0
             }
-        }, _defineProperty(_obj2, theme.mq.tabletOrSmaller, {
+        }, _defineProperty(_obj, theme.mq.tabletOrSmaller, {
             width: function(param) {
                 var itemsPerPageConfig = param.itemsPerPageConfig, gap = param.gap;
                 return "calc(".concat(100 / itemsPerPageConfig.mobile, "% + ").concat(gap / itemsPerPageConfig.mobile, "px)");
@@ -319,14 +323,14 @@ var useStyles = createUseStyles(function(theme) {
                     return 0;
                 }
             }
-        }), _defineProperty(_obj2, "&:not(:empty) ~ &:not(:empty)", {
+        }), _defineProperty(_obj, "&:not(:empty) ~ &:not(:empty)", {
             paddingLeft: function(param) {
                 var gap = param.gap;
                 return gap;
             }
-        }), _defineProperty(_obj2, "&:empty", {
+        }), _defineProperty(_obj, "&:empty", {
             display: "none"
-        }), _obj2),
+        }), _obj),
         bullets: {
             display: "flex",
             justifyContent: "center"
@@ -390,9 +394,10 @@ var DEFAULT_AUTOPLAY_TIME = 5000;
 var BaseCarousel = function(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 = useTheme().texts;
+    var containerType = useContainerType();
     var itemsPerPageConfig = normalizeItemsPerPage(itemsPerPage);
     var mobilePageOffsetConfig = normalizeMobilePageOffset(mobilePageOffset);
-    var isDesktopOrBigger = useScreenSize().isDesktopOrBigger;
+    var ref4 = useScreenSize(), isDesktopOrBigger = ref4.isDesktopOrBigger, isLargeDesktop = ref4.isLargeDesktop;
     var gap = gapProp !== null && gapProp !== void 0 ? gapProp : isDesktopOrBigger ? 16 : 8;
     var sideMargin = useResonsiveLayoutMargin();
     var classes = useStyles({
@@ -400,16 +405,18 @@ var BaseCarousel = function(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;
@@ -706,10 +713,10 @@ export var Slideshow = function(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) {