@telefonica/mistica 14.18.2 → 14.20.0

package/dist/skins/movistar-legacy.js

@@ -312,9 +312,23 @@ const e = {
             title1: {
                 weight: "medium"
             },
+            title2: {
+                weight: "bold",
+                size: {
+                    mobile: 20,
+                    desktop: 28
+                },
+                lineHeight: {
+                    mobile: 24,
+                    desktop: 32
+                }
+            },
             indicator: {
                 weight: "medium"
             },
+            navigationBar: {
+                weight: "medium"
+            },
             text5: {
                 weight: "bold"
             },

package/dist/skins/movistar.js

@@ -312,9 +312,23 @@ const e = {
             title1: {
                 weight: "medium"
             },
+            title2: {
+                weight: "bold",
+                size: {
+                    mobile: 20,
+                    desktop: 28
+                },
+                lineHeight: {
+                    mobile: 24,
+                    desktop: 32
+                }
+            },
             indicator: {
                 weight: "medium"
             },
+            navigationBar: {
+                weight: "medium"
+            },
             text5: {
                 weight: "bold"
             },

package/dist/skins/o2.js

@@ -312,9 +312,23 @@ const e = {
             title1: {
                 weight: "medium"
             },
+            title2: {
+                weight: "light",
+                size: {
+                    mobile: 20,
+                    desktop: 28
+                },
+                lineHeight: {
+                    mobile: 24,
+                    desktop: 32
+                }
+            },
             indicator: {
                 weight: "medium"
             },
+            navigationBar: {
+                weight: "medium"
+            },
             text5: {
                 weight: "light"
             },

package/dist/skins/telefonica.js

@@ -10,7 +10,7 @@ function _export(target, all) {
 }
 _export(exports, {
     getTelefonicaSkin: function() {
-        return d;
+        return i;
     },
     palette: function() {
         return e;
@@ -54,7 +54,7 @@ const e = {
     darkModeBlack: "#191919",
     darkModeGrey: "#242424",
     darkModeGrey6: "#313235"
-}, d = ()=>({
+}, i = ()=>({
         name: _constants.TELEFONICA_SKIN,
         colors: {
             appBarBackground: e.white,
@@ -306,9 +306,23 @@ const e = {
             title1: {
                 weight: "medium"
             },
+            title2: {
+                weight: "regular",
+                size: {
+                    mobile: 20,
+                    desktop: 28
+                },
+                lineHeight: {
+                    mobile: 24,
+                    desktop: 32
+                }
+            },
             indicator: {
                 weight: "medium"
             },
+            navigationBar: {
+                weight: "medium"
+            },
             text5: {
                 weight: "regular"
             },

package/dist/skins/types/index.d.ts

@@ -13,6 +13,17 @@ export type TextPresetsConfig = {
     button: TextTokenConfig<'regular' | 'medium'>;
     link: TextTokenConfig<'regular' | 'medium'>;
     title1: TextTokenConfig<'regular' | 'medium'>;
+    title2: {
+        weight: FontWeight;
+        size: {
+            mobile: number;
+            desktop: number;
+        };
+        lineHeight: {
+            mobile: number;
+            desktop: number;
+        };
+    };
     indicator: TextTokenConfig<'regular' | 'medium'>;
     tabsLabel: {
         weight: FontWeight;
@@ -25,6 +36,7 @@ export type TextPresetsConfig = {
             desktop: number;
         };
     };
+    navigationBar: TextTokenConfig;
     text5: TextTokenConfig;
     text6: TextTokenConfig;
     text7: TextTokenConfig;

package/dist/skins/vivo-new.js

@@ -60,7 +60,7 @@ const e = {
             background: e.white,
             backgroundAlternative: e.grey1,
             backgroundBrand: e.vivoPurple,
-            backgroundBrandSecondary: e.vivoPurple,
+            backgroundBrandSecondary: e.vivoPurpleLight90,
             backgroundContainer: e.white,
             backgroundContainerHover: (0, _color.applyAlpha)(e.darkModeBlack, 0.03),
             backgroundContainerPressed: (0, _color.applyAlpha)(e.darkModeBlack, 0.05),
@@ -306,9 +306,23 @@ const e = {
             title1: {
                 weight: "regular"
             },
+            title2: {
+                weight: "regular",
+                size: {
+                    mobile: 18,
+                    desktop: 20
+                },
+                lineHeight: {
+                    mobile: 24,
+                    desktop: 28
+                }
+            },
             indicator: {
                 weight: "regular"
             },
+            navigationBar: {
+                weight: "regular"
+            },
             text5: {
                 weight: "regular"
             },

package/dist/skins/vivo.js

@@ -306,9 +306,23 @@ const e = {
             title1: {
                 weight: "medium"
             },
+            title2: {
+                weight: "light",
+                size: {
+                    mobile: 20,
+                    desktop: 28
+                },
+                lineHeight: {
+                    mobile: 24,
+                    desktop: 32
+                }
+            },
             indicator: {
                 weight: "medium"
             },
+            navigationBar: {
+                weight: "medium"
+            },
             text5: {
                 weight: "light"
             },

package/dist/tabs.css-mistica.js

@@ -25,26 +25,22 @@ _export(exports, {
         return e;
     },
     tabSelectionVariants: function() {
-        return o;
+        return r;
     },
     tabVariants: function() {
-        return t;
-    },
-    tabWithIcon: function() {
-        return l;
+        return o;
     },
     tabsContainer: function() {
-        return r;
+        return t;
     }
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./tabs.css.ts.vanilla.css-mistica.js");
-var v = "_1y2v1nfb3 _1y2v1nfb0 _1y2v1nfel _1y2v1nfff _1y2v1nfca _1y2v1nf45", y = "lgofm1m", _ = "lgofm14 _1y2v1nfb0 _1y2v1nfel _1y2v1nff0 _1y2v1nfcn", a = "lgofm12 _1y2v1nfck _1y2v1nfaz _1y2v1nfe4", e = "lgofm10", o = {
+var v = "_1y2v1nfb3 _1y2v1nfb0 _1y2v1nfel _1y2v1nfff _1y2v1nfca _1y2v1nf45", y = "lgofm1g", _ = "lgofm13", a = "lgofm12 _1y2v1nfdf _1y2v1nfbr _1y2v1nfaz", e = "lgofm10", r = {
     noSelected: "_1y2v1nf1y",
-    selected: "_1y2v1nf1w lgofm1h",
-    selectedAnimating: "_1y2v1nf1w lgofm1i"
-}, t = {
-    default: "lgofm17 _1y2v1nfb5 _1y2v1nfbj _1y2v1nfbd _1y2v1nf8w _1y2v1nfa5 _1y2v1nfck _1y2v1nf5y lgofm18",
-    tabs2: "lgofm17 _1y2v1nfb5 _1y2v1nfbj _1y2v1nfbd _1y2v1nf8w _1y2v1nfa5 _1y2v1nfck _1y2v1nf5y lgofm19",
-    tabs3: "lgofm17 _1y2v1nfb5 _1y2v1nfbj _1y2v1nfbd _1y2v1nf8w _1y2v1nfa5 _1y2v1nfck _1y2v1nf5y lgofm1a"
-}, l = "lgofm1e", r = "_1y2v1nfck _1y2v1nfb4";
+    selected: "_1y2v1nf1w lgofm1b",
+    selectedAnimating: "_1y2v1nf1w lgofm1c"
+}, o = {
+    default: "lgofm16 _1y2v1nf8w _1y2v1nfa5 _1y2v1nfb5 _1y2v1nfbm _1y2v1nfbj _1y2v1nfbd _1y2v1nfd3 _1y2v1nfdf _1y2v1nf5y",
+    fullWidth: "lgofm18 lgofm16 _1y2v1nf8w _1y2v1nfa5 _1y2v1nfb5 _1y2v1nfbm _1y2v1nfbj _1y2v1nfbd _1y2v1nfd3 _1y2v1nfdf _1y2v1nf5y"
+}, t = "_1y2v1nfdf _1y2v1nfbr _1y2v1nfb4";

package/dist/tabs.css.d.ts

@@ -2,8 +2,7 @@ export declare const outerBorder: string;
 export declare const outer: string;
 export declare const inner: string;
 export declare const tabsContainer: string;
-export declare const tabVariants: Record<"default" | "tabs2" | "tabs3", string>;
-export declare const tabWithIcon: string;
+export declare const tabVariants: Record<"default" | "fullWidth", string>;
 export declare const tabSelectionVariants: Record<"noSelected" | "selected" | "selectedAnimating", string>;
 export declare const icon: string;
 export declare const animatedLine: string;

package/dist/tabs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return X;
+        return Y;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -18,6 +18,7 @@ const _text = require("./text.js");
 const _platform = require("./utils/platform.js");
 const _dom = require("./utils/dom.js");
 const _tabscssmistica = require("./tabs.css-mistica.js");
+const _inline = /*#__PURE__*/ _interop_require_default(require("./inline.js"));
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -116,25 +117,25 @@ function _object_spread_props(target, source) {
 }
 const d = (0, _platform.isRunningAcceptanceTest)() ? 0 : 300, q = (i)=>{
     switch(i){
+        case 1:
         case 2:
-            return "tabs2";
         case 3:
-            return "tabs3";
+            return "fullWidth";
         default:
             return "default";
     }
 }, C = (param)=>{
-    let { selectedIndex: i , onChange: y , tabs: b , dataAttributes: T  } = param;
-    const { textPresets: r  } = (0, _hooks.useTheme)(), n = (0, _hooks.useAriaId)(), { ref: A  } = (0, _hooks.useElementDimensions)(), u = _react.useRef(null), h = _react.useRef(null), [p, L] = _react.useState(!1), N = (l, c)=>{
-        const t = document.querySelector(`[id='${n}'] [data-tabindex="${l}"]`), o = document.querySelector(`[id='${n}'] [data-tabindex="${c}"]`), e = u.current, a = h.current;
-        t && o && e && a && (L(!0), e.style.display = "block", e.style.width = `${t.offsetWidth}px`, e.style.transform = `translate(${t.offsetLeft - a.scrollLeft}px, 0)`, Promise.resolve().then(()=>{
-            e.style.width = `${o.offsetWidth}px`, e.style.transform = `translate(${o.offsetLeft - a.scrollLeft}px, 0)`, e.style.transition = `transform ${d}ms, width ${d}ms`;
+    let { selectedIndex: i , onChange: y , tabs: u , dataAttributes: T  } = param;
+    const { textPresets: r  } = (0, _hooks.useTheme)(), l = (0, _hooks.useAriaId)(), { ref: A  } = (0, _hooks.useElementDimensions)(), b = _react.useRef(null), h = _react.useRef(null), [p, L] = _react.useState(!1), N = (o, c)=>{
+        const s = document.querySelector(`[id='${l}'] [data-tabindex="${o}"]`), n = document.querySelector(`[id='${l}'] [data-tabindex="${c}"]`), e = b.current, a = h.current;
+        s && n && e && a && (L(!0), e.style.display = "block", e.style.width = `${s.offsetWidth}px`, e.style.transform = `translate(${s.offsetLeft - a.scrollLeft}px, 0)`, Promise.resolve().then(()=>{
+            e.style.transition = `transform ${d}ms, width ${d}ms`, e.style.width = `${n.offsetWidth}px`, e.style.transform = `translate(${n.offsetLeft - a.scrollLeft}px, 0)`;
         }), setTimeout(()=>{
             e.style.transition = "", e.style.display = "none", L(!1);
         }, d));
     };
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({
-        id: n,
+        id: l,
         role: "tablist",
         ref: A,
         className: _tabscssmistica.outerBorder
@@ -149,49 +150,54 @@ const d = (0, _platform.isRunningAcceptanceTest)() ? 0 : 300, q = (i)=>{
                         className: _tabscssmistica.inner,
                         children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                             className: _tabscssmistica.tabsContainer,
-                            children: b.map((param, e)=>{
-                                let { text: l , trackingEvent: c , icon: t , "aria-controls": o  } = param;
+                            children: u.map((param, e)=>{
+                                let { text: o , trackingEvent: c , icon: s , "aria-controls": n  } = param;
                                 const a = e === i;
-                                return /* @__PURE__ */ (0, _jsxruntime.jsxs)(_touchable.BaseTouchable, {
+                                return /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, {
                                     dataAttributes: {
                                         "component-name": "Tab",
                                         tabindex: e
                                     },
-                                    className: (0, _classnames.default)(_tabscssmistica.tabVariants[q(b.length)], a ? p ? _tabscssmistica.tabSelectionVariants.selectedAnimating : _tabscssmistica.tabSelectionVariants.selected : _tabscssmistica.tabSelectionVariants.noSelected, t && _tabscssmistica.tabWithIcon),
+                                    className: (0, _classnames.default)(_tabscssmistica.tabVariants[q(u.length)], a ? p ? _tabscssmistica.tabSelectionVariants.selectedAnimating : _tabscssmistica.tabSelectionVariants.selected : _tabscssmistica.tabSelectionVariants.noSelected),
                                     onPress: ()=>{
                                         !p && i !== e && (y(e), N(i, e));
                                     },
                                     trackingEvent: c,
                                     role: "tab",
-                                    "aria-controls": o,
+                                    "aria-controls": n,
                                     "aria-selected": a ? "true" : "false",
-                                    children: [
-                                        t && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                                            className: _tabscssmistica.icon,
-                                            children: t
-                                        }),
-                                        /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text, {
-                                            desktopSize: r.tabsLabel.size.desktop,
-                                            mobileSize: r.tabsLabel.size.mobile,
-                                            desktopLineHeight: r.tabsLabel.lineHeight.desktop,
-                                            mobileLineHeight: r.tabsLabel.lineHeight.mobile,
-                                            weight: r.tabsLabel.weight,
-                                            color: "inherit",
-                                            wordBreak: !1,
-                                            textAlign: "center",
-                                            children: l
-                                        })
-                                    ]
+                                    children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_inline.default, {
+                                        space: s && o ? 8 : 0,
+                                        alignItems: "center",
+                                        children: [
+                                            s && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                                                className: _tabscssmistica.icon,
+                                                children: s
+                                            }),
+                                            /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text, {
+                                                desktopSize: r.tabsLabel.size.desktop,
+                                                mobileSize: r.tabsLabel.size.mobile,
+                                                desktopLineHeight: r.tabsLabel.lineHeight.desktop,
+                                                mobileLineHeight: r.tabsLabel.lineHeight.mobile,
+                                                weight: r.tabsLabel.weight,
+                                                color: "inherit",
+                                                wordBreak: !1,
+                                                textAlign: "center",
+                                                hyphens: "auto",
+                                                children: o
+                                            })
+                                        ]
+                                    })
                                 }, e);
                             })
                         })
                     }),
                     /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                        ref: u,
+                        ref: b,
                         className: _tabscssmistica.animatedLine
                     })
                 ]
             })
         })
     }));
-}, X = C;
+}, Y = C;

package/dist/theme-context-provider.js

@@ -10,10 +10,10 @@ function _export(target, all) {
 }
 _export(exports, {
     default: function() {
-        return gt;
+        return Ct;
     },
     useIsOsDarkModeEnabled: function() {
-        return Z;
+        return et;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -106,22 +106,22 @@ function _object_spread(target) {
     }
     return target;
 }
-const Y = "(prefers-color-scheme: dark)", Z = ()=>{
+const tt = "(prefers-color-scheme: dark)", et = ()=>{
     const [t, c] = _react.useState(!1);
     return (0, _hooks.useIsomorphicLayoutEffect)(()=>{
         if (!window.matchMedia) return;
-        const o = window.matchMedia(Y), s = ()=>{
+        const o = window.matchMedia(tt), i = ()=>{
             c(o.matches);
         };
-        return o.addListener(s), s(), ()=>o.removeListener(s);
+        return o.addListener(i), i(), ()=>o.removeListener(i);
     }, []), t;
-}, tt = ()=>(t)=>t, et = (t)=>({
+}, rt = ()=>(t)=>t, ot = (t)=>({
         headerMobileHeight: (t == null ? void 0 : t.headerMobileHeight) === "mistica" ? _theme.NAVBAR_HEIGHT_MOBILE : t == null ? void 0 : t.headerMobileHeight
-    }), rt = (param)=>{
+    }), it = (param)=>{
     let { theme: t , children: c , as: o  } = param;
     var _t_colorScheme, _t_skin_borderRadii;
-    const s = _react.useRef(1), E = _react.useCallback(()=>`aria-id-hook-${s.current++}`, []), L = Z(), k = (_t_colorScheme = t.colorScheme) !== null && _t_colorScheme !== void 0 ? _t_colorScheme : "auto", R = t.skin.colors, H = _object_spread({}, t.skin.colors, t.skin.darkModeColors), u = k === "auto" && L || k === "dark", m = u ? H : R, p = _react.useMemo(()=>{
-        var i, n, d, x, f, v, P, g, M, C, T, D;
+    const i = _react.useRef(1), R = _react.useCallback(()=>`aria-id-hook-${i.current++}`, []), H = et(), u = (_t_colorScheme = t.colorScheme) !== null && _t_colorScheme !== void 0 ? _t_colorScheme : "auto", S = t.skin.colors, y = _object_spread({}, t.skin.colors, t.skin.darkModeColors), k = u === "auto" && H || u === "dark", m = k ? y : S, p = _react.useMemo(()=>{
+        var s, n, d, x, f, b, P, g, M, C, T, D, I, E;
         const l = _object_spread({
             platform: (0, _platform.getPlatform)(),
             insideNovumNativeApp: (0, _platform.isInsideNovumNativeApp)()
@@ -136,44 +136,46 @@ const Y = "(prefers-color-scheme: dark)", Z = ()=>{
                 logEvent: ()=>Promise.resolve(),
                 eventFormat: "universal-analytics"
             }, t.analytics),
-            dimensions: _object_spread({}, _theme.dimensions, et(t.dimensions)),
+            dimensions: _object_spread({}, _theme.dimensions, ot(t.dimensions)),
             textPresets: {
-                text5: _object_spread({}, _defaults.defaultTextPresetsConfig.text5, (i = t.skin.textPresets) == null ? void 0 : i.text5),
+                text5: _object_spread({}, _defaults.defaultTextPresetsConfig.text5, (s = t.skin.textPresets) == null ? void 0 : s.text5),
                 text6: _object_spread({}, _defaults.defaultTextPresetsConfig.text6, (n = t.skin.textPresets) == null ? void 0 : n.text6),
                 text7: _object_spread({}, _defaults.defaultTextPresetsConfig.text7, (d = t.skin.textPresets) == null ? void 0 : d.text7),
                 text8: _object_spread({}, _defaults.defaultTextPresetsConfig.text8, (x = t.skin.textPresets) == null ? void 0 : x.text8),
                 text9: _object_spread({}, _defaults.defaultTextPresetsConfig.text9, (f = t.skin.textPresets) == null ? void 0 : f.text9),
-                text10: _object_spread({}, _defaults.defaultTextPresetsConfig.text10, (v = t.skin.textPresets) == null ? void 0 : v.text10),
+                text10: _object_spread({}, _defaults.defaultTextPresetsConfig.text10, (b = t.skin.textPresets) == null ? void 0 : b.text10),
                 cardTitle: _object_spread({}, _defaults.defaultTextPresetsConfig.cardTitle, (P = t.skin.textPresets) == null ? void 0 : P.cardTitle),
                 button: _object_spread({}, _defaults.defaultTextPresetsConfig.button, (g = t.skin.textPresets) == null ? void 0 : g.button),
                 link: _object_spread({}, _defaults.defaultTextPresetsConfig.link, (M = t.skin.textPresets) == null ? void 0 : M.link),
                 title1: _object_spread({}, _defaults.defaultTextPresetsConfig.title1, (C = t.skin.textPresets) == null ? void 0 : C.title1),
-                indicator: _object_spread({}, _defaults.defaultTextPresetsConfig.indicator, (T = t.skin.textPresets) == null ? void 0 : T.indicator),
-                tabsLabel: _object_spread({}, _defaults.defaultTextPresetsConfig.tabsLabel, (D = t.skin.textPresets) == null ? void 0 : D.tabsLabel)
+                title2: _object_spread({}, _defaults.defaultTextPresetsConfig.title2, (T = t.skin.textPresets) == null ? void 0 : T.title2),
+                navigationBar: _object_spread({}, _defaults.defaultTextPresetsConfig.navigationBar, (D = t.skin.textPresets) == null ? void 0 : D.navigationBar),
+                indicator: _object_spread({}, _defaults.defaultTextPresetsConfig.indicator, (I = t.skin.textPresets) == null ? void 0 : I.indicator),
+                tabsLabel: _object_spread({}, _defaults.defaultTextPresetsConfig.tabsLabel, (E = t.skin.textPresets) == null ? void 0 : E.tabsLabel)
             },
             Link: (0, _theme.getMisticaLinkComponent)(t.Link),
-            isDarkMode: u,
+            isDarkMode: k,
             isIos: (0, _platform.getPlatform)(l) === "ios",
-            useHrefDecorator: (_t_useHrefDecorator = t.useHrefDecorator) !== null && _t_useHrefDecorator !== void 0 ? _t_useHrefDecorator : tt,
+            useHrefDecorator: (_t_useHrefDecorator = t.useHrefDecorator) !== null && _t_useHrefDecorator !== void 0 ? _t_useHrefDecorator : rt,
             useId: t.useId
         };
     }, [
         t,
-        u
-    ]), S = Object.fromEntries(Object.entries(m).map((param)=>{
-        let [l, i] = param;
+        k
+    ]), A = Object.fromEntries(Object.entries(m).map((param)=>{
+        let [l, s] = param;
         let n = "";
-        if (i.startsWith("#")) {
-            const [d, x, f] = (0, _color.fromHexToRgb)(i);
+        if (s.startsWith("#")) {
+            const [d, x, f] = (0, _color.fromHexToRgb)(s);
             n = `${d}, ${x}, ${f}`;
         }
         return [
             l,
             n
         ];
-    })), b = (0, _dynamic.assignInlineVars)(_skincontractcssmistica.vars, {
+    })), v = (0, _dynamic.assignInlineVars)(_skincontractcssmistica.vars, {
         colors: m,
-        rawColors: S,
+        rawColors: A,
         borderRadii: (_t_skin_borderRadii = t.skin.borderRadii) !== null && _t_skin_borderRadii !== void 0 ? _t_skin_borderRadii : _defaults.defaultBorderRadiiConfig
     });
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(_tabfocus.default, {
@@ -186,15 +188,15 @@ const Y = "(prefers-color-scheme: dark)", Z = ()=>{
                     children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_aspectratiosupport.AspectRatioSupportProvider, {
                         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_documentvisibility.DocumentVisibilityProvider, {
                             children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_ariaidgettercontext.default.Provider, {
-                                value: E,
+                                value: R,
                                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_screensizecontextprovider.default, {
                                     children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_dialog.default, {
                                         children: o ? /*#__PURE__*/ _react.createElement(o, {
-                                            style: b
+                                            style: v
                                         }, c) : /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
                                             children: [
                                                 (process.env.NODE_ENV !== "test" || process.env.SSR_TEST) && /* @__PURE__ */ (0, _jsxruntime.jsx)("style", {
-                                                    children: `:root {${b}}`
+                                                    children: `:root {${v}}`
                                                 }),
                                                 c
                                             ]
@@ -208,4 +210,4 @@ const Y = "(prefers-color-scheme: dark)", Z = ()=>{
             })
         })
     });
-}, gt = rt;
+}, Ct = it;

package/dist/title.d.ts

@@ -10,4 +10,5 @@ type TitleProps = {
 };
 export declare const Title1: ({ children, as, id, right, dataAttributes }: TitleProps) => React.ReactElement;
 export declare const Title2: ({ children, as, id, right, dataAttributes }: TitleProps) => React.ReactElement;
+export declare const Title3: ({ children, as, id, right, dataAttributes }: TitleProps) => React.ReactElement;
 export {};