@telefonica/mistica 12.3.0 → 12.5.0

package/dist/button.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import type { TouchableElement } from './touchable';
 import type { DataAttributes, RendersElement, RendersNullableElement, TrackingEvent } from './utils/types';
 import type { Location } from 'history';
 export declare const BUTTON_MIN_WIDTH = 136;
@@ -84,10 +85,10 @@ interface ButtonLinkToProps extends ButtonLinkCommonProps {
     href?: undefined;
 }
 export declare type ButtonLinkProps = ButtonLinkOnPressProps | ButtonLinkHrefProps | ButtonLinkToProps;
-export declare const ButtonLink: React.ForwardRefExoticComponent<ButtonLinkProps & React.RefAttributes<HTMLAnchorElement | HTMLDivElement | HTMLButtonElement>>;
-export declare const ButtonPrimary: React.FC<ButtonProps>;
-export declare const ButtonSecondary: React.FC<ButtonProps>;
-export declare const ButtonDanger: React.FC<ButtonProps>;
+export declare const ButtonLink: React.ForwardRefExoticComponent<ButtonLinkProps & React.RefAttributes<TouchableElement>>;
+export declare const ButtonPrimary: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<TouchableElement>>;
+export declare const ButtonSecondary: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<TouchableElement>>;
+export declare const ButtonDanger: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<TouchableElement>>;
 export declare type ButtonElement = RendersElement<typeof ButtonPrimary> | RendersElement<typeof ButtonSecondary> | RendersElement<typeof ButtonDanger>;
 export declare type NullableButtonElement = RendersNullableElement<typeof ButtonPrimary> | RendersNullableElement<typeof ButtonSecondary> | RendersNullableElement<typeof ButtonDanger>;
 export {};

package/dist/button.js

@@ -346,9 +346,9 @@ var renderButtonContent = function renderButtonContent(param) {
     });
     return resultChildrenArr;
 };
-var Button = function Button(props) {
+var Button = /*#__PURE__*/ React.forwardRef(function(props, ref) {
     var eventFormat = (0, _analytics).useTrackingConfig().eventFormat;
-    var ref = (0, _formContext).useForm(), formStatus = ref.formStatus, formId = ref.formId;
+    var _$ref = (0, _formContext).useForm(), formStatus = _$ref.formStatus, formId = _$ref.formId;
     var isInverse = (0, _themeVariantContext).useIsInverseVariant();
     var classes = props.classes, loadingText = props.loadingText;
     var isSubmitButton = !!props.submit;
@@ -358,7 +358,7 @@ var Button = function Button(props) {
     // specially in iPhone). But we want the spinner to be visible during the show/hide animation.
     // * When showSpinner prop is true, state is changed immediately.
     // * When the transition ends this state is updated again if needed
-    var ref1 = _slicedToArray(React.useState(!!showSpinner), 2), shouldRenderSpinner = ref1[0], setShouldRenderSpinner = ref1[1];
+    var _$ref1 = _slicedToArray(React.useState(!!showSpinner), 2), shouldRenderSpinner = _$ref1[0], setShouldRenderSpinner = _$ref1[1];
     React.useEffect(function() {
         if (showSpinner && !shouldRenderSpinner) {
             setShouldRenderSpinner(true);
@@ -405,6 +405,7 @@ var Button = function Button(props) {
     var _trackingEvent;
     var _obj;
     var commonProps = {
+        ref: ref,
         className: (0, _classnames).default(classes.button, props.className, (_obj = {}, _defineProperty(_obj, classes.small, props.small), _defineProperty(_obj, classes.inverse, isInverse), _defineProperty(_obj, classes.light, !isInverse), _defineProperty(_obj, classes.isLoading, showSpinner), _obj)),
         style: _objectSpread({
             cursor: props.fake ? "pointer" : undefined
@@ -518,7 +519,7 @@ var Button = function Button(props) {
         throw Error("Bad button props");
     }
     return null;
-};
+});
 var useButtonLinkStyles = (0, _jss).createUseStyles(function(theme) {
     var paddingY = 6;
     var paddingX = 12;
@@ -645,27 +646,30 @@ var ButtonLink = /*#__PURE__*/ React.forwardRef(function(props, ref) {
     return null;
 });
 exports.ButtonLink = ButtonLink;
-var ButtonPrimary = function ButtonPrimary(props) {
+var ButtonPrimary = /*#__PURE__*/ React.forwardRef(function(props, ref) {
     var classes = usePrimaryButtonStyles();
     return /*#__PURE__*/ (0, _jsxRuntime).jsx(Button, _objectSpread({}, props, {
+        ref: ref,
         classes: classes,
         type: "primary"
     }));
-};
+});
 exports.ButtonPrimary = ButtonPrimary;
-var ButtonSecondary = function ButtonSecondary(props) {
+var ButtonSecondary = /*#__PURE__*/ React.forwardRef(function(props, ref) {
     var classes = useSecondaryButtonStyles();
     return /*#__PURE__*/ (0, _jsxRuntime).jsx(Button, _objectSpread({}, props, {
+        ref: ref,
         classes: classes,
         type: "secondary"
     }));
-};
+});
 exports.ButtonSecondary = ButtonSecondary;
-var ButtonDanger = function ButtonDanger(props) {
+var ButtonDanger = /*#__PURE__*/ React.forwardRef(function(props, ref) {
     var classes = useDangerButtonStyles();
     return /*#__PURE__*/ (0, _jsxRuntime).jsx(Button, _objectSpread({}, props, {
+        ref: ref,
         classes: classes,
         type: "danger"
     }));
-};
+});
 exports.ButtonDanger = ButtonDanger;

package/dist/button.js.flow

@@ -1,6 +1,7 @@
 // @flow
 
 import * as React from "react";
+import type { TouchableElement } from "./touchable";
 import type {
   DataAttributes,
   RendersElement,
@@ -87,10 +88,10 @@ export type ButtonLinkProps =
   | ButtonLinkOnPressProps
   | ButtonLinkHrefProps
   | ButtonLinkToProps;
-declare export var ButtonLink: React.AbstractComponent<ButtonLinkProps, HTMLAnchorElement | HTMLDivElement | HTMLButtonElement>;
-declare export var ButtonPrimary: React.ComponentType<ButtonProps>;
-declare export var ButtonSecondary: React.ComponentType<ButtonProps>;
-declare export var ButtonDanger: React.ComponentType<ButtonProps>;
+declare export var ButtonLink: React.AbstractComponent<ButtonLinkProps, TouchableElement>;
+declare export var ButtonPrimary: React.AbstractComponent<ButtonProps, TouchableElement>;
+declare export var ButtonSecondary: React.AbstractComponent<ButtonProps, TouchableElement>;
+declare export var ButtonDanger: React.AbstractComponent<ButtonProps, TouchableElement>;
 export type ButtonElement =
   | RendersElement<typeof ButtonPrimary>
   | RendersElement<typeof ButtonSecondary>

package/dist/card.js

@@ -138,7 +138,6 @@ var CardContent = function CardContent(param) {
                                     space: 4,
                                     children: [
                                         pretitle && /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text1, {
-                                            wordBreak: true,
                                             truncate: pretitleLinesMax,
                                             as: "div",
                                             regular: true,
@@ -146,14 +145,12 @@ var CardContent = function CardContent(param) {
                                             children: pretitle
                                         }),
                                         /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text4, {
-                                            wordBreak: true,
                                             truncate: titleLinesMax,
                                             as: "h1",
                                             regular: true,
                                             children: title
                                         }),
                                         /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text2, {
-                                            wordBreak: true,
                                             truncate: subtitleLinesMax,
                                             as: "div",
                                             regular: true,
@@ -165,7 +162,6 @@ var CardContent = function CardContent(param) {
                         })
                     }),
                     description && /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text2, {
-                        wordBreak: true,
                         truncate: descriptionLinesMax,
                         as: "p",
                         regular: true,
@@ -396,14 +392,12 @@ var SnapCard = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
                                 space: 4,
                                 children: [
                                     title && /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text2, {
-                                        wordBreak: true,
                                         truncate: titleLinesMax,
                                         as: "h1",
                                         regular: true,
                                         children: title
                                     }),
                                     subtitle && /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text2, {
-                                        wordBreak: true,
                                         truncate: subtitleLinesMax,
                                         regular: true,
                                         color: colors.textSecondary,

package/dist/highlighted-card.js

@@ -169,7 +169,6 @@ var Content = function Content(props) {
                     /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text4, {
                         as: "h1",
                         regular: true,
-                        wordBreak: true,
                         truncate: props.titleLinesMax,
                         children: title
                     }),
@@ -178,7 +177,6 @@ var Content = function Content(props) {
                         children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text2, {
                             regular: true,
                             color: theme.colors.textSecondary,
-                            wordBreak: true,
                             truncate: props.descriptionLinesMax,
                             as: "p",
                             children: description

package/dist/index.d.ts

@@ -3,6 +3,7 @@ export { default as ThemeContext } from './theme-context';
 export { default as ThemeContextProvider } from './theme-context-provider';
 export { default as ScreenReaderOnly } from './screen-reader-only';
 export { default as Touchable } from './touchable';
+export type { TouchableElement } from './touchable';
 export { default as Spinner } from './spinner';
 export { default as FadeIn } from './fade-in';
 export { ButtonPrimary, ButtonSecondary, ButtonDanger, ButtonLink } from './button';

package/dist/index.js.flow

@@ -5,6 +5,7 @@ declare export { default as ThemeContext } from "./theme-context";
 declare export { default as ThemeContextProvider } from "./theme-context-provider";
 declare export { default as ScreenReaderOnly } from "./screen-reader-only";
 declare export { default as Touchable } from "./touchable";
+export type { TouchableElement } from "./touchable";
 declare export { default as Spinner } from "./spinner";
 declare export { default as FadeIn } from "./fade-in";
 declare export {

package/dist/list.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import type { TouchableElement } from './touchable';
 import type { DataAttributes, TrackingEvent } from './utils/types';
 interface CommonProps {
     children?: void;
@@ -107,7 +108,7 @@ interface OnPressRowContentProps extends CommonProps {
     right?: Right;
 }
 declare type RowContentProps = BasicRowContentProps | SwitchRowContentProps | RadioRowContentProps | CheckboxRowContentProps | HrefRowContentProps | ToRowContentProps | OnPressRowContentProps;
-export declare const Row: React.ForwardRefExoticComponent<RowContentProps & React.RefAttributes<HTMLAnchorElement | HTMLDivElement | HTMLButtonElement>>;
+export declare const Row: React.ForwardRefExoticComponent<RowContentProps & React.RefAttributes<TouchableElement>>;
 declare type RowListProps = {
     children: React.ReactNode;
     ariaLabelledby?: string;

package/dist/list.js

@@ -278,7 +278,6 @@ var Content = function Content(param) {
                     space: 4,
                     children: [
                         headline && /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text1, {
-                            wordBreak: true,
                             regular: true,
                             color: colors.textPrimary,
                             children: headline
@@ -287,7 +286,6 @@ var Content = function Content(param) {
                             space: 2,
                             children: [
                                 /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text3, {
-                                    wordBreak: true,
                                     regular: true,
                                     color: colors.textPrimary,
                                     truncate: titleLinesMax,
@@ -295,14 +293,12 @@ var Content = function Content(param) {
                                     children: title
                                 }),
                                 subtitle && /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text2, {
-                                    wordBreak: true,
                                     regular: true,
                                     color: colors.textSecondary,
                                     truncate: subtitleLinesMax,
                                     children: subtitle
                                 }),
                                 description && /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text2, {
-                                    wordBreak: true,
                                     regular: true,
                                     color: colors.textSecondary,
                                     truncate: descriptionLinesMax,

package/dist/list.js.flow

@@ -1,6 +1,7 @@
 // @flow
 
 import * as React from "react";
+import type { TouchableElement } from "./touchable";
 import type { DataAttributes, TrackingEvent } from "./utils/types";
 declare type CommonProps = {
   headline?: string | React.Node,
@@ -76,7 +77,7 @@ declare type RowContentProps =
   | HrefRowContentProps
   | ToRowContentProps
   | OnPressRowContentProps;
-declare export var Row: React.AbstractComponent<RowContentProps, HTMLAnchorElement | HTMLDivElement | HTMLButtonElement>;
+declare export var Row: React.AbstractComponent<RowContentProps, TouchableElement>;
 declare type RowListProps = {
   children: React.Node,
   ariaLabelledby?: string,

package/dist/package-version.js

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

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/touchable.d.ts

@@ -66,5 +66,6 @@ export interface PropsMaybeOnPress extends CommonProps {
     formId?: string;
 }
 export declare type Props = PropsHref | PropsTo | PropsOnPress | PropsMaybeHref | PropsMaybeTo | PropsMaybeOnPress;
-declare const Touchable: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLAnchorElement | HTMLDivElement | HTMLButtonElement>>;
+export declare type TouchableElement = HTMLDivElement | HTMLAnchorElement | HTMLButtonElement;
+declare const Touchable: React.ForwardRefExoticComponent<Props & React.RefAttributes<TouchableElement>>;
 export default Touchable;

package/dist/touchable.js.flow

@@ -71,7 +71,11 @@ export type Props =
   | PropsMaybeHref
   | PropsMaybeTo
   | PropsMaybeOnPress;
-declare var Touchable: React.AbstractComponent<Props, HTMLAnchorElement | HTMLDivElement | HTMLButtonElement>;
+export type TouchableElement =
+  | HTMLDivElement
+  | HTMLAnchorElement
+  | HTMLButtonElement;
+declare var Touchable: React.AbstractComponent<Props, TouchableElement>;
 declare export default typeof Touchable;
 
 import { type CssStyle } from "./__css_types__.js.flow";

package/dist-es/button.js

@@ -313,9 +313,9 @@ var renderButtonContent = function(param) {
     });
     return resultChildrenArr;
 };
-var Button = function(props) {
+var Button = /*#__PURE__*/ React.forwardRef(function(props, ref) {
     var eventFormat = useTrackingConfig().eventFormat;
-    var ref = useForm(), formStatus = ref.formStatus, formId = ref.formId;
+    var _$ref = useForm(), formStatus = _$ref.formStatus, formId = _$ref.formId;
     var isInverse = useIsInverseVariant();
     var classes = props.classes, loadingText = props.loadingText;
     var isSubmitButton = !!props.submit;
@@ -325,7 +325,7 @@ var Button = function(props) {
     // specially in iPhone). But we want the spinner to be visible during the show/hide animation.
     // * When showSpinner prop is true, state is changed immediately.
     // * When the transition ends this state is updated again if needed
-    var ref1 = _slicedToArray(React.useState(!!showSpinner), 2), shouldRenderSpinner = ref1[0], setShouldRenderSpinner = ref1[1];
+    var _$ref1 = _slicedToArray(React.useState(!!showSpinner), 2), shouldRenderSpinner = _$ref1[0], setShouldRenderSpinner = _$ref1[1];
     React.useEffect(function() {
         if (showSpinner && !shouldRenderSpinner) {
             setShouldRenderSpinner(true);
@@ -372,6 +372,7 @@ var Button = function(props) {
     var _trackingEvent;
     var _obj;
     var commonProps = {
+        ref: ref,
         className: classnames(classes.button, props.className, (_obj = {}, _defineProperty(_obj, classes.small, props.small), _defineProperty(_obj, classes.inverse, isInverse), _defineProperty(_obj, classes.light, !isInverse), _defineProperty(_obj, classes.isLoading, showSpinner), _obj)),
         style: _objectSpread({
             cursor: props.fake ? "pointer" : undefined
@@ -485,7 +486,7 @@ var Button = function(props) {
         throw Error("Bad button props");
     }
     return null;
-};
+});
 var useButtonLinkStyles = createUseStyles(function(theme) {
     var paddingY = 6;
     var paddingX = 12;
@@ -611,24 +612,27 @@ export var ButtonLink = /*#__PURE__*/ React.forwardRef(function(props, ref) {
     }
     return null;
 });
-export var ButtonPrimary = function(props) {
+export var ButtonPrimary = /*#__PURE__*/ React.forwardRef(function(props, ref) {
     var classes = usePrimaryButtonStyles();
     return /*#__PURE__*/ _jsx(Button, _objectSpread({}, props, {
+        ref: ref,
         classes: classes,
         type: "primary"
     }));
-};
-export var ButtonSecondary = function(props) {
+});
+export var ButtonSecondary = /*#__PURE__*/ React.forwardRef(function(props, ref) {
     var classes = useSecondaryButtonStyles();
     return /*#__PURE__*/ _jsx(Button, _objectSpread({}, props, {
+        ref: ref,
         classes: classes,
         type: "secondary"
     }));
-};
-export var ButtonDanger = function(props) {
+});
+export var ButtonDanger = /*#__PURE__*/ React.forwardRef(function(props, ref) {
     var classes = useDangerButtonStyles();
     return /*#__PURE__*/ _jsx(Button, _objectSpread({}, props, {
+        ref: ref,
         classes: classes,
         type: "danger"
     }));
-};
+});

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/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/package-version.js

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

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.3.0",
+    "version": "12.5.0",
     "license": "MIT",
     "repository": {
         "type": "git",