@telefonica/mistica 12.2.0 → 12.4.0

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

@@ -0,0 +1,21 @@
+import * as React from "react";
+import { useScreenSize } from "./hooks";
+var ContainerTypeContext = /*#__PURE__*/ React.createContext(null);
+export var useContainerType = function() {
+    var containerType = React.useContext(ContainerTypeContext);
+    var ref = 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";
+};
+export default ContainerTypeContext;

package/dist-es/grid-layout.js

@@ -28,6 +28,8 @@ function _objectSpread(target) {
 }
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
+import { useScreenSize } from "./hooks";
+import ContainerTypeContext from "./container-type-context";
 import { createUseStyles } from "./jss";
 import { getPrefixedDataAttributes } from "./utils/dom";
 var useStyles = createUseStyles(function(theme) {
@@ -127,18 +129,28 @@ var GridLayout = function(props) {
         verticalSpace: (_verticalSpace = props.verticalSpace) !== null && _verticalSpace !== void 0 ? _verticalSpace : 0
     });
     var dataAttributes = getPrefixedDataAttributes(props.dataAttributes);
+    var ref = useScreenSize(), isMobile = ref.isMobile, isTablet = ref.isTablet;
+    var getContainerType = function(containerType) {
+        return isMobile ? "mobile-column" : isTablet ? "tablet-column" : containerType;
+    };
     if (props.template === "6+6") {
         return /*#__PURE__*/ _jsxs("div", _objectSpread({
             className: classes.grid
         }, dataAttributes, {
             children: [
-                /*#__PURE__*/ _jsx("div", {
-                    className: classes.span6,
-                    children: props.left
+                /*#__PURE__*/ _jsx(ContainerTypeContext.Provider, {
+                    value: getContainerType("desktop-medium-column"),
+                    children: /*#__PURE__*/ _jsx("div", {
+                        className: classes.span6,
+                        children: props.left
+                    })
                 }),
-                /*#__PURE__*/ _jsx("div", {
-                    className: classes.span6,
-                    children: props.right
+                /*#__PURE__*/ _jsx(ContainerTypeContext.Provider, {
+                    value: getContainerType("desktop-medium-column"),
+                    children: /*#__PURE__*/ _jsx("div", {
+                        className: classes.span6,
+                        children: props.right
+                    })
                 })
             ]
         }));
@@ -148,13 +160,19 @@ var GridLayout = function(props) {
             className: classes.grid
         }, dataAttributes, {
             children: [
-                /*#__PURE__*/ _jsx("div", {
-                    className: classes.span8,
-                    children: props.left
+                /*#__PURE__*/ _jsx(ContainerTypeContext.Provider, {
+                    value: getContainerType("desktop-medium-column"),
+                    children: /*#__PURE__*/ _jsx("div", {
+                        className: classes.span8,
+                        children: props.left
+                    })
                 }),
-                /*#__PURE__*/ _jsx("div", {
-                    className: classes.span4,
-                    children: props.right
+                /*#__PURE__*/ _jsx(ContainerTypeContext.Provider, {
+                    value: getContainerType("desktop-small-column"),
+                    children: /*#__PURE__*/ _jsx("div", {
+                        className: classes.span4,
+                        children: props.right
+                    })
                 })
             ]
         }));
@@ -164,16 +182,22 @@ var GridLayout = function(props) {
             className: classes.grid
         }, dataAttributes, {
             children: [
-                /*#__PURE__*/ _jsx("div", {
-                    className: classes.span4,
-                    children: props.left
+                /*#__PURE__*/ _jsx(ContainerTypeContext.Provider, {
+                    value: getContainerType("desktop-small-column"),
+                    children: /*#__PURE__*/ _jsx("div", {
+                        className: classes.span4,
+                        children: props.left
+                    })
                 }),
                 /*#__PURE__*/ _jsx("div", {
                     className: classes.span1
                 }),
-                /*#__PURE__*/ _jsx("div", {
-                    className: classes.span6,
-                    children: props.right
+                /*#__PURE__*/ _jsx(ContainerTypeContext.Provider, {
+                    value: getContainerType("desktop-medium-column"),
+                    children: /*#__PURE__*/ _jsx("div", {
+                        className: classes.span6,
+                        children: props.right
+                    })
                 }),
                 /*#__PURE__*/ _jsx("div", {
                     className: classes.span1
@@ -189,16 +213,22 @@ var GridLayout = function(props) {
                 /*#__PURE__*/ _jsx("div", {
                     className: classes.span1
                 }),
-                /*#__PURE__*/ _jsx("div", {
-                    className: classes.span5,
-                    children: props.left
+                /*#__PURE__*/ _jsx(ContainerTypeContext.Provider, {
+                    value: getContainerType("desktop-small-column"),
+                    children: /*#__PURE__*/ _jsx("div", {
+                        className: classes.span5,
+                        children: props.left
+                    })
                 }),
                 /*#__PURE__*/ _jsx("div", {
                     className: classes.span1
                 }),
-                /*#__PURE__*/ _jsx("div", {
-                    className: classes.span4,
-                    children: props.right
+                /*#__PURE__*/ _jsx(ContainerTypeContext.Provider, {
+                    value: getContainerType("desktop-small-column"),
+                    children: /*#__PURE__*/ _jsx("div", {
+                        className: classes.span4,
+                        children: props.right
+                    })
                 }),
                 /*#__PURE__*/ _jsx("div", {
                     className: classes.span1
@@ -211,13 +241,19 @@ var GridLayout = function(props) {
             className: classes.grid
         }, dataAttributes, {
             children: [
-                /*#__PURE__*/ _jsx("div", {
-                    className: classes.span3,
-                    children: props.left
+                /*#__PURE__*/ _jsx(ContainerTypeContext.Provider, {
+                    value: getContainerType("desktop-small-column"),
+                    children: /*#__PURE__*/ _jsx("div", {
+                        className: classes.span3,
+                        children: props.left
+                    })
                 }),
-                /*#__PURE__*/ _jsx("div", {
-                    className: classes.span9,
-                    children: props.right
+                /*#__PURE__*/ _jsx(ContainerTypeContext.Provider, {
+                    value: getContainerType("desktop-medium-column"),
+                    children: /*#__PURE__*/ _jsx("div", {
+                        className: classes.span9,
+                        children: props.right
+                    })
                 })
             ]
         }));
@@ -230,9 +266,12 @@ var GridLayout = function(props) {
                 /*#__PURE__*/ _jsx("div", {
                     className: classes.span1
                 }),
-                /*#__PURE__*/ _jsx("div", {
-                    className: classes.span10,
-                    children: props.children
+                /*#__PURE__*/ _jsx(ContainerTypeContext.Provider, {
+                    value: getContainerType("desktop-wide-column"),
+                    children: /*#__PURE__*/ _jsx("div", {
+                        className: classes.span10,
+                        children: props.children
+                    })
                 }),
                 /*#__PURE__*/ _jsx("div", {
                     className: classes.span1

package/dist-es/highlighted-card.js

@@ -137,7 +137,6 @@ var Content = function(props) {
                     /*#__PURE__*/ _jsx(Text4, {
                         as: "h1",
                         regular: true,
-                        wordBreak: true,
                         truncate: props.titleLinesMax,
                         children: title
                     }),
@@ -146,7 +145,6 @@ var Content = function(props) {
                         children: /*#__PURE__*/ _jsx(Text2, {
                             regular: true,
                             color: theme.colors.textSecondary,
-                            wordBreak: true,
                             truncate: props.descriptionLinesMax,
                             as: "p",
                             children: description

package/dist-es/list.js

@@ -251,7 +251,6 @@ var Content = function(param) {
                     space: 4,
                     children: [
                         headline && /*#__PURE__*/ _jsx(Text1, {
-                            wordBreak: true,
                             regular: true,
                             color: colors.textPrimary,
                             children: headline
@@ -260,7 +259,6 @@ var Content = function(param) {
                             space: 2,
                             children: [
                                 /*#__PURE__*/ _jsx(Text3, {
-                                    wordBreak: true,
                                     regular: true,
                                     color: colors.textPrimary,
                                     truncate: titleLinesMax,
@@ -268,14 +266,12 @@ var Content = function(param) {
                                     children: title
                                 }),
                                 subtitle && /*#__PURE__*/ _jsx(Text2, {
-                                    wordBreak: true,
                                     regular: true,
                                     color: colors.textSecondary,
                                     truncate: subtitleLinesMax,
                                     children: subtitle
                                 }),
                                 description && /*#__PURE__*/ _jsx(Text2, {
-                                    wordBreak: true,
                                     regular: true,
                                     color: colors.textSecondary,
                                     truncate: descriptionLinesMax,

package/dist-es/navigation-breadcrumbs.js

@@ -1,41 +1,117 @@
+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";
+/**
+ * Figma: https://www.figma.com/file/BctaFHf0PVPX2uwRSl8taf/Breadcrumbs?node-id=2%3A61
+ * Accessibility: https://www.w3.org/WAI/ARIA/apg/example-index/breadcrumb/index.html
+ */ import * as React from "react";
 import { Text1 } from "./text";
 import { useTheme } from "./hooks";
+import { createUseStyles } from "./jss";
+import { getPrefixedDataAttributes } from "./utils/dom";
+import TextLink from "./text-link";
+import { useIsInverseVariant } from "./theme-variant-context";
 var BREADCRUMB_SEPARATOR = " / ";
+var useStyles = 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(param1) {
-    var title1 = param1.title, breadcrumbs = param1.breadcrumbs;
-    var theme = useTheme();
-    var Link = theme.Link;
-    return /*#__PURE__*/ _jsxs("div", {
-        children: [
-            breadcrumbs.map(function(param, index) {
-                var title = param.title, url = param.url;
-                return /*#__PURE__*/ _jsxs(React.Fragment, {
-                    children: [
-                        /*#__PURE__*/ _jsx(Link, {
-                            style: {
-                                textDecoration: "none"
-                            },
-                            to: url,
-                            children: /*#__PURE__*/ _jsx(Text1, {
+    var title1 = param1.title, breadcrumbs = param1.breadcrumbs, dataAttributes = param1.dataAttributes, tmp = param1["aria-label"], ariaLabel = tmp === void 0 ? "Breadcrumb" : tmp;
+    var colors = useTheme().colors;
+    var classes = useStyles();
+    var isInverse = useIsInverseVariant();
+    return /*#__PURE__*/ _jsx("nav", _objectSpread({
+        "aria-label": ariaLabel
+    }, getPrefixedDataAttributes(dataAttributes), {
+        children: /*#__PURE__*/ _jsxs("ol", {
+            className: classes.list,
+            children: [
+                breadcrumbs.map(function(param, index) {
+                    var title = param.title, url = param.url;
+                    return /*#__PURE__*/ _jsxs("li", {
+                        children: [
+                            /*#__PURE__*/ _jsx(Text1, {
                                 regular: true,
-                                children: title
+                                children: /*#__PURE__*/ _jsx(TextLink, {
+                                    to: url,
+                                    style: {
+                                        color: isInverse ? colors.textPrimaryInverse : colors.textPrimary
+                                    },
+                                    className: classes.link,
+                                    children: title
+                                })
+                            }),
+                            /*#__PURE__*/ _jsx("span", {
+                                role: "presentation",
+                                children: /*#__PURE__*/ _jsx(Text1, {
+                                    regular: true,
+                                    children: BREADCRUMB_SEPARATOR
+                                })
                             })
-                        }),
-                        /*#__PURE__*/ _jsx(Text1, {
+                        ]
+                    }, index);
+                }),
+                /*#__PURE__*/ _jsx("li", {
+                    children: /*#__PURE__*/ _jsx("a", {
+                        "aria-current": "page",
+                        href: "#",
+                        className: classes.current,
+                        onClick: function(e) {
+                            e.preventDefault();
+                        },
+                        children: /*#__PURE__*/ _jsx(Text1, {
                             regular: true,
-                            children: BREADCRUMB_SEPARATOR
+                            color: isInverse ? colors.textSecondaryInverse : colors.textSecondary,
+                            children: title1
                         })
-                    ]
-                }, index);
-            }),
-            /*#__PURE__*/ _jsx(Text1, {
-                regular: true,
-                color: theme.colors.textSecondary,
-                children: title1
-            })
-        ]
-    });
+                    })
+                })
+            ]
+        })
+    }));
 };
 export default NavigationBreadcrumbs;

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.2.0";
+export var PACKAGE_VERSION = "12.4.0";

package/dist-es/responsive-layout.js

@@ -32,6 +32,7 @@ import { createUseStyles } from "./jss";
 import classnames from "classnames";
 import { useScreenSize } from "./hooks";
 import { getPrefixedDataAttributes } from "./utils/dom";
+import ContainerTypeContext from "./container-type-context";
 var MOBILE_SIDE_MARGIN = 16;
 var TABLET_SIDE_MARGIN = 32;
 var SMALL_DESKTOP_SIDE_MARGIN = 40;
@@ -76,16 +77,20 @@ var ResponsiveLayout = function(param) {
     var classes = useStyles();
     var ref = 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__*/ _jsx(ResponsiveLayoutMarginContext.Provider, {
         value: sideMargin,
-        children: /*#__PURE__*/ _jsx("div", _objectSpread({
-            className: classnames(classes.container, className)
-        }, getPrefixedDataAttributes(dataAttributes), {
-            children: /*#__PURE__*/ _jsx("div", {
-                className: classnames(classes.layout, _defineProperty({}, classes.layoutFullWidth, fullWidth)),
-                children: children
-            })
-        }))
+        children: /*#__PURE__*/ _jsx(ContainerTypeContext.Provider, {
+            value: containerType,
+            children: /*#__PURE__*/ _jsx("div", _objectSpread({
+                className: classnames(classes.container, className)
+            }, getPrefixedDataAttributes(dataAttributes), {
+                children: /*#__PURE__*/ _jsx("div", {
+                    className: classnames(classes.layout, _defineProperty({}, classes.layoutFullWidth, fullWidth)),
+                    children: children
+                })
+            }))
+        })
     });
 };
 export default ResponsiveLayout;

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

@@ -68,13 +68,15 @@ var ScreenSizeContextProvider = function(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;
@@ -88,6 +90,9 @@ var ScreenSizeContextProvider = function(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];
     useIsomorphicLayoutEffect(function() {
         if (!window.matchMedia) {
             return;
@@ -108,6 +113,10 @@ var ScreenSizeContextProvider = function(param1) {
             [
                 mediaQueries.tabletOrSmaller,
                 setIsTabletOrSmaller
+            ],
+            [
+                mediaQueries.largueDesktop,
+                setIsLargeDesktop
             ], 
         ];
         var cleanupFunctions = entries.map(function(param) {
@@ -131,7 +140,8 @@ var ScreenSizeContextProvider = function(param1) {
         mediaQueries.mobile,
         mediaQueries.tablet,
         mediaQueries.tabletOrBigger,
-        mediaQueries.tabletOrSmaller
+        mediaQueries.tabletOrSmaller,
+        mediaQueries.largueDesktop, 
     ]);
     var value = React.useMemo(function() {
         return {
@@ -139,13 +149,15 @@ var ScreenSizeContextProvider = function(param1) {
             isTablet: isTablet,
             isTabletOrBigger: isTabletOrBigger,
             isTabletOrSmaller: isTabletOrSmaller,
-            isDesktopOrBigger: !isTabletOrSmaller
+            isDesktopOrBigger: !isTabletOrSmaller,
+            isLargeDesktop: isLargeDesktop
         };
     }, [
         isMobile,
         isTablet,
         isTabletOrBigger,
-        isTabletOrSmaller
+        isTabletOrSmaller,
+        isLargeDesktop
     ]);
     return /*#__PURE__*/ _jsx(ScreenSizeContext.Provider, {
         value: value,

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

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

package/dist-es/snackbar.js

@@ -63,7 +63,8 @@ import { createUseStyles } from "./jss";
 import Touchable from "./touchable";
 import classNames from "classnames";
 import { isWebViewBridgeAvailable, nativeMessage } from "@tef-novum/webview-bridge";
-import { useElementDimensions, useScreenSize } from "./hooks";
+import { useElementDimensions, useScreenSize, useTheme } from "./hooks";
+import { Text2 } from "./text";
 var PADDING_Y = 14;
 var PADDING_X = 16;
 var TRANSITION_TIME_IN_MS = 300;
@@ -115,9 +116,6 @@ var useStyles = 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(param) {
                 var isLongButton = param.isLongButton;
@@ -170,6 +168,7 @@ var SnackbarComponent = function(param) {
     var ref1 = useElementDimensions(), buttonWidth = ref1.width, buttonRef = ref1.ref;
     var isDesktopOrBigger = useScreenSize().isDesktopOrBigger;
     var longButtonWidth = isDesktopOrBigger ? 160 : 128;
+    var colors = useTheme().colors;
     var classes = useStyles({
         type: type,
         isOpen: isOpen,
@@ -205,7 +204,9 @@ var SnackbarComponent = function(param) {
             children: /*#__PURE__*/ _jsxs("div", {
                 className: classes.snackbarContent,
                 children: [
-                    /*#__PURE__*/ _jsx("span", {
+                    /*#__PURE__*/ _jsx(Text2, {
+                        regular: true,
+                        color: colors.textPrimaryInverse,
                         children: message
                     }),
                     buttonText && /*#__PURE__*/ _jsx(Touchable, {

package/dist-es/tabs.js

@@ -253,6 +253,7 @@ var Tabs = function(param2) {
                                         /*#__PURE__*/ _jsx(Text3, {
                                             medium: true,
                                             color: "inherit",
+                                            wordBreak: false,
                                             children: text
                                         })
                                     ]

package/dist-es/text-field-base.js

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

package/dist-es/text.js

@@ -96,6 +96,10 @@ var useStyles = createUseStyles(function(theme) {
                     return wordBreak ? "break-word" : "inherit";
                 }
             },
+            hyphens: function(param) {
+                var hyphens = param.hyphens;
+                return hyphens;
+            },
             // Needed to reset the default browser margin that adds to p, h1, h2... elements.
             margin: 0
         }, theme.mq.tabletOrSmaller, {
@@ -129,7 +133,7 @@ var useStyles = createUseStyles(function(theme) {
     };
 });
 export var Text = function(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 = useIsInverseVariant();
     var classes = useStyles({
         isInverse: isInverse,
@@ -142,6 +146,7 @@ export var Text = function(param) {
         decoration: decoration,
         transform: transform,
         wordBreak: wordBreak,
+        hyphens: hyphens,
         letterSpacing: letterSpacing,
         truncate: truncate
     });

package/dist-es/title.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@telefonica/mistica",
-    "version": "12.2.0",
+    "version": "12.4.0",
     "license": "MIT",
     "repository": {
         "type": "git",