@telefonica/mistica 11.10.2 → 11.12.0

package/dist/highlighted-card.js

@@ -9,12 +9,10 @@ var _jss = require("./jss");
 var _themeVariantContext = require("./theme-variant-context");
 var _box = _interopRequireDefault(require("./box"));
 var _touchable = _interopRequireDefault(require("./touchable"));
-var _iconCloseRegular = _interopRequireDefault(require("./generated/mistica-icons/icon-close-regular"));
-var _color = require("./utils/color");
 var _hooks = require("./hooks");
 var _text = require("./text");
-var _iconButton = _interopRequireDefault(require("./icon-button"));
 var _boxed = require("./boxed");
+var _maybeDismissable = _interopRequireWildcard(require("./maybe-dismissable"));
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -117,35 +115,6 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
             minWidth: 100,
             height: "inherit"
         },
-        dismissableContainer: {
-            position: "relative",
-            display: "flex",
-            flexShrink: 0,
-            width: function width(param) {
-                var width2 = param.width;
-                return width2 || "100%";
-            }
-        },
-        dismissableButton: {
-            position: "absolute",
-            top: 0,
-            right: 0,
-            width: 48,
-            height: 48,
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center"
-        },
-        dismissableCircleContainer: {
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            width: 24,
-            height: 24,
-            margin: "0 0 8px 8px",
-            borderRadius: "50%",
-            backgroundColor: (0, _color).applyAlpha(theme.colors.background, 0.7)
-        },
         textContainer: (_obj = {
             paddingLeft: 16,
             paddingTop: 24,
@@ -165,43 +134,12 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
             display: "flex",
             flexShrink: 0,
             width: function width(param) {
-                var width3 = param.width;
-                return width3 || "100%";
+                var width2 = param.width;
+                return width2 || "100%";
             }
         }
     };
 });
-var Dismissable = function Dismissable(param) {
-    var children = param.children, width = param.width, _onClose = param.onClose, onClose = _onClose === void 0 ? function onClose() {} : _onClose;
-    var isInverse = (0, _themeVariantContext).useIsInverseVariant();
-    var classes = useStyles({
-        isInverse: isInverse,
-        width: width
-    });
-    var ref = (0, _hooks).useTheme(), colors = ref.colors, texts = ref.texts;
-    return /*#__PURE__*/ (0, _jsxRuntime).jsxs("section", {
-        className: classes.dismissableContainer,
-        children: [
-            children,
-            /*#__PURE__*/ (0, _jsxRuntime).jsx(_iconButton.default, {
-                className: classes.dismissableButton,
-                onPress: onClose,
-                "aria-label": texts.closeButtonLabel,
-                style: {
-                    display: "flex",
-                    width: 48,
-                    height: 48
-                },
-                children: /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
-                    className: classes.dismissableCircleContainer,
-                    children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_iconCloseRegular.default, {
-                        color: colors.neutralHigh
-                    })
-                })
-            })
-        ]
-    });
-};
 var Content = function Content(props) {
     var title = props.title, description = props.description, imageUrl = props.imageUrl, imageFit = props.imageFit;
     var isInverseOutside = (0, _themeVariantContext).useIsInverseVariant();
@@ -213,18 +151,24 @@ var Content = function Content(props) {
         width: props.width
     });
     var theme = (0, _hooks).useTheme();
+    var isDismissable = (0, _maybeDismissable).useIsDismissable();
     var content = /*#__PURE__*/ (0, _jsxRuntime).jsxs(_boxed.Boxed, {
         isInverse: isInverse,
         className: classes.container,
+        dataAttributes: props.dataAttributes,
         children: [
             /*#__PURE__*/ (0, _jsxRuntime).jsxs("div", {
                 // don't create another region when the Content is inside a Dismissable wrapper
-                role: props["aria-label"] ? "region" : undefined,
+                role: !isDismissable ? "region" : undefined,
                 className: classes.textContainer,
-                "aria-label": props["aria-label"],
+                // aria-label is already in Dismisable wrapper
+                "aria-label": !isDismissable ? props["aria-label"] : undefined,
                 children: [
                     /*#__PURE__*/ (0, _jsxRuntime).jsx(_text.Text4, {
+                        as: "h1",
                         regular: true,
+                        wordBreak: true,
+                        truncate: props.titleLinesMax,
                         children: title
                     }),
                     /*#__PURE__*/ (0, _jsxRuntime).jsx(_box.default, {
@@ -232,6 +176,9 @@ 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
                         })
                     }),
@@ -294,14 +241,14 @@ var HighlightedCard = function HighlightedCard(_param) {
         "aria-label"
     ]);
     var label = ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : props.title;
-    return props.onClose ? /*#__PURE__*/ (0, _jsxRuntime).jsx(Dismissable, {
+    return /*#__PURE__*/ (0, _jsxRuntime).jsx(_maybeDismissable.default, {
         onClose: props.onClose,
         "aria-label": label,
         width: props.width,
-        children: /*#__PURE__*/ (0, _jsxRuntime).jsx(Content, _objectSpread({}, props))
-    }) : /*#__PURE__*/ (0, _jsxRuntime).jsx(Content, _objectSpread({}, props, {
-        "aria-label": label
-    }));
+        children: /*#__PURE__*/ (0, _jsxRuntime).jsx(Content, _objectSpread({}, props, {
+            "aria-label": label
+        }))
+    });
 };
 var _default = HighlightedCard;
 exports.default = _default;

package/dist/highlighted-card.js.flow

@@ -2,19 +2,25 @@
 
 import * as React from "react";
 import { ButtonLink } from "./button";
-import type { RendersNullableElement, TrackingEvent } from "./utils/types";
+import type {
+  DataAttributes,
+  RendersNullableElement,
+  TrackingEvent,
+} from "./utils/types";
 import type { NullableButtonElement } from "./button";
 declare type CommonProps = {
   title: string,
+  titleLinesMax?: number,
   description: string,
+  descriptionLinesMax?: number,
   imageUrl?: string,
   imageFit?: "fit" | "fill",
-  backgroundImageUrl?: string,
   onClose?: () => void,
   trackingEvent?: TrackingEvent | $ReadOnlyArray<TrackingEvent>,
   isInverse?: boolean,
   "aria-label"?: string,
   width?: string | number,
+  dataAttributes?: DataAttributes,
 };
 declare type BasicProps = { ...$Exact<CommonProps> };
 declare type ButtonProps = {

package/dist/image.js

@@ -166,7 +166,10 @@ var useStyles = (0, _jss).createUseStyles(function() {
             },
             "$wrapper &": {
                 borderRadius: 0,
-                position: "absolute",
+                position: function position(param) {
+                    var aspectRatio = param.aspectRatio;
+                    return aspectRatio ? "absolute" : "static";
+                },
                 width: "100%",
                 height: "100%",
                 top: 0,
@@ -189,7 +192,7 @@ var useStyles = (0, _jss).createUseStyles(function() {
             paddingTop: function paddingTop(param) {
                 var aspectRatio = param.aspectRatio, width = param.width;
                 if (!aspectRatio) {
-                    return "initial";
+                    return 0;
                 }
                 if (width && typeof width === "string" && width.endsWith("%")) {
                     return "".concat(Number(width.replace("%", "")) / aspectRatio, "%");
@@ -257,10 +260,12 @@ var Image = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
             setIsError(false);
             onLoad === null || onLoad === void 0 ? void 0 : onLoad(event);
         }
-    }, !needsWrapper ? {
+    }, needsWrapper ? {
+        width: "100%"
+    } : {
         width: width,
         height: height
-    } : {}));
+    }));
     if (needsWrapper) {
         return /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
             style: {

package/dist/index.d.ts

@@ -49,7 +49,7 @@ export { default as Inline } from './inline';
 export { default as HighlightedCard } from './highlighted-card';
 export { default as Stepper } from './stepper';
 export { default as ProgressBar } from './progress-bar';
-export { MediaCard, DataCard } from './card';
+export { MediaCard, DataCard, SnapCard } from './card';
 export { default as Divider } from './divider';
 export { default as Menu } from './menu';
 export { default as EmptyState } from './empty-state';

package/dist/index.js

@@ -488,6 +488,12 @@ Object.defineProperty(exports, "DataCard", {
         return _card.DataCard;
     }
 });
+Object.defineProperty(exports, "SnapCard", {
+    enumerable: true,
+    get: function() {
+        return _card.SnapCard;
+    }
+});
 Object.defineProperty(exports, "Divider", {
     enumerable: true,
     get: function() {

package/dist/index.js.flow

@@ -85,7 +85,7 @@ declare export { default as Inline } from "./inline";
 declare export { default as HighlightedCard } from "./highlighted-card";
 declare export { default as Stepper } from "./stepper";
 declare export { default as ProgressBar } from "./progress-bar";
-declare export { MediaCard, DataCard } from "./card";
+declare export { MediaCard, DataCard, SnapCard } from "./card";
 declare export { default as Divider } from "./divider";
 declare export { default as Menu } from "./menu";
 declare export { default as EmptyState } from "./empty-state";

package/dist/maybe-dismissable.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+export declare const useIsDismissable: () => boolean;
+declare type MaybeDismissableProps = {
+    children: React.ReactNode;
+    onClose?: () => void;
+    width?: string | number;
+    'aria-label'?: string;
+};
+declare const MaybeDismissable: ({ children, width, onClose, "aria-label": ariaLabel, }: MaybeDismissableProps) => JSX.Element;
+export default MaybeDismissable;

package/dist/maybe-dismissable.js

@@ -0,0 +1,119 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+exports.default = exports.useIsDismissable = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+var React = _interopRequireWildcard(require("react"));
+var _jss = require("./jss");
+var _iconCloseRegular = _interopRequireDefault(require("./generated/mistica-icons/icon-close-regular"));
+var _hooks = require("./hooks");
+var _iconButton = _interopRequireDefault(require("./icon-button"));
+var _themeVariantContext = require("./theme-variant-context");
+var _color = require("./utils/color");
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function _interopRequireWildcard(obj) {
+    if (obj && obj.__esModule) {
+        return obj;
+    } else {
+        var newObj = {};
+        if (obj != null) {
+            for(var key in obj){
+                if (Object.prototype.hasOwnProperty.call(obj, key)) {
+                    var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {};
+                    if (desc.get || desc.set) {
+                        Object.defineProperty(newObj, key, desc);
+                    } else {
+                        newObj[key] = obj[key];
+                    }
+                }
+            }
+        }
+        newObj.default = obj;
+        return newObj;
+    }
+}
+var DismissableContext = /*#__PURE__*/ React.createContext(false);
+var useIsDismissable = function useIsDismissable() {
+    return React.useContext(DismissableContext);
+};
+exports.useIsDismissable = useIsDismissable;
+var useStyles = (0, _jss).createUseStyles(function(theme) {
+    return {
+        dismissableContainer: {
+            position: "relative",
+            display: "flex",
+            flexShrink: 0,
+            width: function width(param) {
+                var width1 = param.width;
+                return width1 || "100%";
+            }
+        },
+        dismissableButton: {
+            position: "absolute",
+            top: 0,
+            right: 0,
+            width: 48,
+            height: 48,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center"
+        },
+        dismissableCircleContainer: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            width: 24,
+            height: 24,
+            margin: "0 0 8px 8px",
+            borderRadius: "50%",
+            backgroundColor: (0, _color).applyAlpha(theme.colors.background, 0.7)
+        }
+    };
+});
+var MaybeDismissable = function MaybeDismissable(param) {
+    var children = param.children, width = param.width, onClose = param.onClose, ariaLabel = param["aria-label"];
+    var isInverse = (0, _themeVariantContext).useIsInverseVariant();
+    var classes = useStyles({
+        isInverse: isInverse,
+        width: width
+    });
+    var ref = (0, _hooks).useTheme(), colors = ref.colors, texts = ref.texts;
+    if (!onClose) {
+        return /*#__PURE__*/ (0, _jsxRuntime).jsx(_jsxRuntime.Fragment, {
+            children: children
+        });
+    }
+    return /*#__PURE__*/ (0, _jsxRuntime).jsxs("section", {
+        className: classes.dismissableContainer,
+        "aria-label": ariaLabel,
+        children: [
+            /*#__PURE__*/ (0, _jsxRuntime).jsx(DismissableContext.Provider, {
+                value: true,
+                children: children
+            }),
+            /*#__PURE__*/ (0, _jsxRuntime).jsx(_iconButton.default, {
+                className: classes.dismissableButton,
+                onPress: onClose,
+                "aria-label": texts.closeButtonLabel,
+                style: {
+                    display: "flex",
+                    width: 48,
+                    height: 48
+                },
+                children: /*#__PURE__*/ (0, _jsxRuntime).jsx("div", {
+                    className: classes.dismissableCircleContainer,
+                    children: /*#__PURE__*/ (0, _jsxRuntime).jsx(_iconCloseRegular.default, {
+                        color: colors.neutralHigh
+                    })
+                })
+            })
+        ]
+    });
+};
+var _default = MaybeDismissable;
+exports.default = _default;

package/dist/maybe-dismissable.js.flow

@@ -0,0 +1,12 @@
+// @flow
+
+import * as React from "react";
+declare export var useIsDismissable: () => boolean;
+declare type MaybeDismissableProps = {
+  children: React.Node,
+  onClose?: () => void,
+  width?: string | number,
+  "aria-label"?: string,
+};
+declare var MaybeDismissable: (x: MaybeDismissableProps) => React.Node;
+declare export default typeof MaybeDismissable;

package/dist/package-version.js

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

package/dist/skins/types.d.ts

@@ -2,15 +2,29 @@ export declare type SkinVariant = 'prominent';
 export declare type KnownSkinName = 'Movistar' | 'O2' | 'O2-classic' | 'Vivo' | 'Telefonica' | 'Blau';
 export declare type SkinName = KnownSkinName | string;
 export declare type GetKnownSkin = (variant?: SkinVariant) => KnownSkin;
+export declare type FontWeight = 'light' | 'regular' | 'medium';
+declare type TextPresetName = 'text5' | 'text6' | 'text7' | 'text8' | 'text9' | 'text10';
+export declare type TextPresetsConfig = {
+    [preset in TextPresetName]: {
+        weight: FontWeight;
+    };
+};
+declare type PartialTextPresetsConfig = {
+    [preset in TextPresetName]?: {
+        weight?: FontWeight;
+    };
+};
 export declare type Skin = {
     name: SkinName;
     colors: Colors;
     darkModeColors?: Partial<Colors>;
+    textPresets?: PartialTextPresetsConfig;
 };
 export declare type KnownSkin = {
     name: KnownSkinName;
     colors: Colors;
     darkModeColors?: Partial<Colors>;
+    textPresets?: PartialTextPresetsConfig;
 };
 export declare type Colors = {
     appBarBackground: string;
@@ -102,3 +116,4 @@ export declare type Colors = {
     textTagActive: string;
     textTagInactive: string;
 };
+export {};

package/dist/skins/types.js.flow

@@ -10,15 +10,37 @@ export type KnownSkinName =
   | "Blau";
 export type SkinName = KnownSkinName | string;
 export type GetKnownSkin = (variant?: SkinVariant) => KnownSkin;
+export type FontWeight = "light" | "regular" | "medium";
+declare type TextPresetName =
+  | "text5"
+  | "text6"
+  | "text7"
+  | "text8"
+  | "text9"
+  | "text10";
+export type TextPresetsConfig = $ObjMapi<
+  { [k: TextPresetName]: any },
+  <preset>(preset) => {
+    weight: FontWeight,
+  }
+>;
+declare type PartialTextPresetsConfig = $ObjMapi<
+  { [k: TextPresetName]: any },
+  <preset>(preset) => {
+    weight?: FontWeight,
+  }
+>;
 export type Skin = {
   name: SkinName,
   colors: Colors,
   darkModeColors?: $Shape<Colors>,
+  textPresets?: PartialTextPresetsConfig,
 };
 export type KnownSkin = {
   name: KnownSkinName,
   colors: Colors,
   darkModeColors?: $Shape<Colors>,
+  textPresets?: PartialTextPresetsConfig,
 };
 export type Colors = {
   appBarBackground: string,
@@ -110,3 +132,4 @@ export type Colors = {
   textTagActive: string,
   textTagInactive: string,
 };
+declare export {};

package/dist/text.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
+import type { FontWeight } from './skins/types';
 import type { DataAttributes } from './utils/types';
-declare type FontWeight = 'light' | 'regular' | 'medium';
 export interface TextPresetProps {
     color?: string;
     decoration?: 'underline' | 'line-through' | 'inherit' | 'none';

package/dist/text.js

@@ -10,6 +10,7 @@ var _jss = require("./jss");
 var _themeVariantContext = require("./theme-variant-context");
 var _css = require("./utils/css");
 var _dom = require("./utils/dom");
+var _hooks = require("./hooks");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -148,7 +149,7 @@ var useStyles = (0, _jss).createUseStyles(function(theme) {
                     return truncate === 1 || truncate === true ? "break-all" : "normal";
                 }
             },
-            display: "box",
+            display: "-webkit-box",
             boxOrient: "vertical",
             overflow: "hidden"
         }
@@ -190,72 +191,78 @@ var getWeight = function getWeight(props) {
     return props.light && "light" || props.regular && "regular" || props.medium && "medium";
 };
 var Text10 = function Text10(props) {
+    var textPresets = (0, _hooks).useTheme().textPresets;
     return /*#__PURE__*/ (0, _jsxRuntime).jsx(Text, _objectSpread({
         mobileSize: 32,
         mobileLineHeight: "40px",
         desktopSize: 64,
         desktopLineHeight: "72px",
-        weight: "light"
+        weight: textPresets.text10.weight
     }, props, {
         children: props.children
     }));
 };
 exports.Text10 = Text10;
 var Text9 = function Text9(props) {
+    var textPresets = (0, _hooks).useTheme().textPresets;
     return /*#__PURE__*/ (0, _jsxRuntime).jsx(Text, _objectSpread({
         mobileSize: 32,
         mobileLineHeight: "40px",
         desktopSize: 56,
         desktopLineHeight: "64px",
-        weight: "light"
+        weight: textPresets.text9.weight
     }, props, {
         children: props.children
     }));
 };
 exports.Text9 = Text9;
 var Text8 = function Text8(props) {
+    var textPresets = (0, _hooks).useTheme().textPresets;
     return /*#__PURE__*/ (0, _jsxRuntime).jsx(Text, _objectSpread({
         mobileSize: 32,
         mobileLineHeight: "40px",
         desktopSize: 40,
         desktopLineHeight: "48px",
-        weight: "light"
+        weight: textPresets.text8.weight
     }, props, {
         children: props.children
     }));
 };
 exports.Text8 = Text8;
 var Text7 = function Text7(props) {
+    var textPresets = (0, _hooks).useTheme().textPresets;
     return /*#__PURE__*/ (0, _jsxRuntime).jsx(Text, _objectSpread({
         mobileSize: 28,
         mobileLineHeight: "32px",
         desktopSize: 40,
         desktopLineHeight: "48px",
-        weight: "light"
+        weight: textPresets.text7.weight
     }, props, {
         children: props.children
     }));
 };
 exports.Text7 = Text7;
 var Text6 = function Text6(props) {
+    var textPresets = (0, _hooks).useTheme().textPresets;
     return /*#__PURE__*/ (0, _jsxRuntime).jsx(Text, _objectSpread({
         mobileSize: 24,
         mobileLineHeight: "32px",
         desktopSize: 32,
         desktopLineHeight: "40px",
-        weight: "light"
+        weight: textPresets.text6.weight
     }, props, {
         children: props.children
     }));
 };
 exports.Text6 = Text6;
 var Text5 = function Text5(props) {
+    var textPresets = (0, _hooks).useTheme().textPresets;
     return /*#__PURE__*/ (0, _jsxRuntime).jsx(Text, _objectSpread({
         mobileSize: 22,
         mobileLineHeight: "24px",
         desktopSize: 28,
         desktopLineHeight: "32px",
-        weight: "light"
+        weight: textPresets.text5.weight
     }, props, {
         children: props.children
     }));

package/dist/text.js.flow

@@ -1,8 +1,8 @@
 // @flow
 
 import * as React from "react";
+import type { FontWeight } from "./skins/types";
 import type { DataAttributes } from "./utils/types";
-declare type FontWeight = "light" | "regular" | "medium";
 export type TextPresetProps = {
   color?: string,
   decoration?: "underline" | "line-through" | "inherit" | "none",

package/dist/theme-context-provider.js

@@ -167,15 +167,35 @@ var useDefaultHrefDecorator = function useDefaultHrefDecorator() {
         return href;
     };
 };
+var defaultTextPresetsConfig = {
+    text5: {
+        weight: "light"
+    },
+    text6: {
+        weight: "light"
+    },
+    text7: {
+        weight: "light"
+    },
+    text8: {
+        weight: "light"
+    },
+    text9: {
+        weight: "light"
+    },
+    text10: {
+        weight: "light"
+    }
+};
 var ThemeContextProvider = function ThemeContextProvider(param) {
     var theme = param.theme, children = param.children, providerId = param.providerId;
-    var ref = _slicedToArray(React.useState(function() {
+    var ref6 = _slicedToArray(React.useState(function() {
         if (providerId) {
             return providerId;
         } else {
             return (0, _environment).isServerSide() ? 0 : nextJssInstanceId++;
         }
-    }), 1), instanceId = ref[0];
+    }), 1), instanceId = ref6[0];
     var classNamePrefix = React.useMemo(function() {
         return process.env.NODE_ENV === "test" ? "" : "mistica-".concat(_packageVersion.PACKAGE_VERSION.replace(/\./g, "-"), "_").concat(instanceId, "_");
     }, [
@@ -187,6 +207,7 @@ var ThemeContextProvider = function ThemeContextProvider(param) {
     }, []);
     var isOsDarkModeEnabled = useIsOsDarkModeEnabled();
     var contextTheme = React.useMemo(function() {
+        var ref, ref1, ref2, ref3, ref4, ref5;
         var _colorScheme;
         // TODO: In next major version we could change this to "auto" by default
         var colorScheme = (_colorScheme = theme.colorScheme) !== null && _colorScheme !== void 0 ? _colorScheme : "light";
@@ -213,6 +234,14 @@ var ThemeContextProvider = function ThemeContextProvider(param) {
             dimensions: _objectSpread({}, _theme.dimensions, theme.dimensions),
             mq: (0, _mediaQueries).createMediaQueries((_mediaQueries1 = theme.mediaQueries) !== null && _mediaQueries1 !== void 0 ? _mediaQueries1 : _theme.mediaQueriesConfig),
             colors: colors,
+            textPresets: {
+                text5: _objectSpread({}, defaultTextPresetsConfig.text5, (ref = theme.skin.textPresets) === null || ref === void 0 ? void 0 : ref.text5),
+                text6: _objectSpread({}, defaultTextPresetsConfig.text6, (ref1 = theme.skin.textPresets) === null || ref1 === void 0 ? void 0 : ref1.text6),
+                text7: _objectSpread({}, defaultTextPresetsConfig.text7, (ref2 = theme.skin.textPresets) === null || ref2 === void 0 ? void 0 : ref2.text7),
+                text8: _objectSpread({}, defaultTextPresetsConfig.text8, (ref3 = theme.skin.textPresets) === null || ref3 === void 0 ? void 0 : ref3.text8),
+                text9: _objectSpread({}, defaultTextPresetsConfig.text9, (ref4 = theme.skin.textPresets) === null || ref4 === void 0 ? void 0 : ref4.text9),
+                text10: _objectSpread({}, defaultTextPresetsConfig.text10, (ref5 = theme.skin.textPresets) === null || ref5 === void 0 ? void 0 : ref5.text10)
+            },
             Link: (_Link = theme.Link) !== null && _Link !== void 0 ? _Link : _theme.AnchorLink,
             isDarkMode: isDarkModeEnabled,
             isIos: (0, _platform).getPlatform(platformOverrides) === "ios",