@trilogy-ds/react 0.0.17-esm-cjs → 0.0.19-esm-cjs

package/lib/components/modal/body/ModalBody.native.js

@@ -84,6 +84,7 @@ var colors = {
   ["MAIN" /* MAIN */]: ["#3d5d7e", "main", "white"],
   ["MAIN_FADE" /* MAIN_FADE */]: ["#BBC6CD", "main-fade", "white"],
   ["ACCENT" /* ACCENT */]: ["#da641b", "accent", "white"],
+  ["ACCENT_FADE" /* ACCENT_FADE */]: ["#faebe3", "accent-fade", "white"],
   ["FONT" /* FONT */]: ["#3d5d7e", "main", "white"],
   ["FONT_PLACEHOLDER" /* FONT_PLACEHOLDER */]: ["#687a87", "font-placeholder", "white"],
   ["SUCCESS" /* SUCCESS */]: ["#007B52", "success", "white"],
@@ -167,6 +168,12 @@ var Icon = import_react4.default.forwardRef(
       icon: {
         transform: isIOS ? stretched && [{ skewX: "20deg" }] || [{ skewX: "0deg" }] : []
       },
+      iconContainer: {
+        alignItems: "center",
+        justifyContent: "center",
+        width: defaultSize,
+        height: defaultSize
+      },
       stretched: {
         justifyContent: "center",
         alignItems: "center",
@@ -221,7 +228,7 @@ var Icon = import_react4.default.forwardRef(
           }
         ));
       } else {
-        iconView = /* @__PURE__ */ import_react4.default.createElement(import_react_native2.View, { ...others }, /* @__PURE__ */ import_react4.default.createElement(
+        iconView = /* @__PURE__ */ import_react4.default.createElement(import_react_native2.View, { style: styles.iconContainer, ...others }, /* @__PURE__ */ import_react4.default.createElement(
           import_css.WithLocalSvg,
           {
             style: [styles.icon, style],
@@ -256,29 +263,16 @@ var STATUS_COLORS = {
   DEFAULT: { color: "MAIN" /* MAIN */, backgroundColor: "MAIN_FADE" /* MAIN_FADE */ }
 };
 
-// context/providerTheme/index.tsx
-var import_react5 = __toESM(require("react"));
-var defaultTheme2 = {
-  icons: {},
-  colors: {},
-  fontFamily: {}
-};
-var defaultContextValue2 = {
-  theme: defaultTheme2,
-  setTheme: () => void 0
-};
-var TrilogyThemeContext2 = import_react5.default.createContext(defaultContextValue2);
-
-// objects/Typography/TypographyBold/index.tsx
-var import_react6 = require("react");
+// objects/Typography/TypographyBold/index.native.tsx
+var import_react5 = require("react");
 
 // components/modal/body/ModalBody.native.tsx
-var React5 = __toESM(require("react"));
+var React4 = __toESM(require("react"));
 var import_react_native3 = require("react-native");
 
 // components/modal/context/ModalContext.tsx
-var import_react7 = __toESM(require("react"));
-var ModalContext = import_react7.default.createContext({
+var import_react6 = __toESM(require("react"));
+var ModalContext = import_react6.default.createContext({
   scrollViewRef: null,
   handleOnScroll: () => null,
   isFooter: false,
@@ -286,9 +280,9 @@ var ModalContext = import_react7.default.createContext({
 });
 
 // components/modal/body/ModalBody.native.tsx
-var ModalBody = React5.forwardRef(({ children, ...others }, ref) => {
-  const { handleOnScroll, scrollViewRef, isFooter } = React5.useContext(ModalContext);
-  return /* @__PURE__ */ React5.createElement(
+var ModalBody = React4.forwardRef(({ children, ...others }, ref) => {
+  const { handleOnScroll, scrollViewRef, isFooter } = React4.useContext(ModalContext);
+  return /* @__PURE__ */ React4.createElement(
     import_react_native3.ScrollView,
     {
       ref: scrollViewRef,
@@ -296,7 +290,7 @@ var ModalBody = React5.forwardRef(({ children, ...others }, ref) => {
       onScroll: handleOnScroll,
       showsVerticalScrollIndicator: false
     },
-    /* @__PURE__ */ React5.createElement(
+    /* @__PURE__ */ React4.createElement(
       import_react_native3.View,
       {
         ref,

package/lib/components/modal/body/ModalBody.native.mjs

@@ -1,21 +1,23 @@
 "use client";
 import {
   ModalBody_native_default
-} from "../../../chunk-4NONUZBG.mjs";
+} from "../../../chunk-K6DW4JHP.mjs";
 import "../../../chunk-JLQUIKZX.mjs";
 import "../../../chunk-7M6BHGK7.mjs";
 import "../../../chunk-VNWHCGCD.mjs";
-import "../../../chunk-SJ5DUOZ6.mjs";
+import "../../../chunk-X67AAUB2.mjs";
 import "../../../chunk-TFNM3EBG.mjs";
-import "../../../chunk-MKOK7VNZ.mjs";
+import "../../../chunk-YKUYXBXK.mjs";
 import "../../../chunk-ZEJDFWMP.mjs";
-import "../../../chunk-KNRXLZZP.mjs";
+import "../../../chunk-MB55ARZ7.mjs";
 import "../../../chunk-D5HHHZDS.mjs";
-import "../../../chunk-2CYVOYRM.mjs";
+import "../../../chunk-3LXODEBD.mjs";
+import "../../../chunk-WVL5S3CD.mjs";
 import "../../../chunk-7L5452RP.mjs";
-import "../../../chunk-H6FVJB5Z.mjs";
+import "../../../chunk-2K2TD7FH.mjs";
+import "../../../chunk-UPP3GX33.mjs";
+import "../../../chunk-E4YRRUI3.mjs";
 import "../../../chunk-CWIO3GEP.mjs";
-import "../../../chunk-VI2KFLCZ.mjs";
 import "../../../chunk-R6PFY5VS.mjs";
 import "../../../chunk-RXBVZD3M.mjs";
 import "../../../chunk-A2ASOVUR.mjs";
@@ -38,20 +40,17 @@ import "../../../chunk-XIQL4ZTN.mjs";
 import "../../../chunk-UUXUTBLZ.mjs";
 import "../../../chunk-QOEJLTZN.mjs";
 import "../../../chunk-B6WC6WS2.mjs";
-import "../../../chunk-K2VWHGPL.mjs";
+import "../../../chunk-MAX3RSBG.mjs";
 import "../../../chunk-6BTWLQPI.mjs";
 import "../../../chunk-G6BHSMLA.mjs";
 import "../../../chunk-THOTRBD4.mjs";
 import "../../../chunk-ATW7ITPH.mjs";
 import "../../../chunk-IGMJNGTZ.mjs";
-import "../../../chunk-5QUXSOHX.mjs";
 import "../../../chunk-L4UDEKQK.mjs";
-import "../../../chunk-P372ZF3A.mjs";
-import "../../../chunk-HV6TXVFA.mjs";
-import "../../../chunk-CYNSXZSV.mjs";
-import "../../../chunk-YK5HPRX4.mjs";
+import "../../../chunk-CD6DMMCL.mjs";
+import "../../../chunk-RYABO2EX.mjs";
 import "../../../chunk-4UHBBNZ7.mjs";
-import "../../../chunk-NTS75UVH.mjs";
+import "../../../chunk-VDLM4YQP.mjs";
 import "../../../chunk-QIPGVLHJ.mjs";
 export {
   ModalBody_native_default as default

package/lib/components/modal/body/ModalBodyProps.d.mts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { View } from 'react-native';
 import { CommonProps } from '../../../objects/facets/CommonProps';
 /**

package/lib/components/modal/body/ModalBodyProps.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { View } from 'react-native';
 import { CommonProps } from '../../../objects/facets/CommonProps';
 /**

package/lib/components/modal/body/index.native.js

@@ -84,6 +84,7 @@ var colors = {
   ["MAIN" /* MAIN */]: ["#3d5d7e", "main", "white"],
   ["MAIN_FADE" /* MAIN_FADE */]: ["#BBC6CD", "main-fade", "white"],
   ["ACCENT" /* ACCENT */]: ["#da641b", "accent", "white"],
+  ["ACCENT_FADE" /* ACCENT_FADE */]: ["#faebe3", "accent-fade", "white"],
   ["FONT" /* FONT */]: ["#3d5d7e", "main", "white"],
   ["FONT_PLACEHOLDER" /* FONT_PLACEHOLDER */]: ["#687a87", "font-placeholder", "white"],
   ["SUCCESS" /* SUCCESS */]: ["#007B52", "success", "white"],
@@ -167,6 +168,12 @@ var Icon = import_react4.default.forwardRef(
       icon: {
         transform: isIOS ? stretched && [{ skewX: "20deg" }] || [{ skewX: "0deg" }] : []
       },
+      iconContainer: {
+        alignItems: "center",
+        justifyContent: "center",
+        width: defaultSize,
+        height: defaultSize
+      },
       stretched: {
         justifyContent: "center",
         alignItems: "center",
@@ -221,7 +228,7 @@ var Icon = import_react4.default.forwardRef(
           }
         ));
       } else {
-        iconView = /* @__PURE__ */ import_react4.default.createElement(import_react_native2.View, { ...others }, /* @__PURE__ */ import_react4.default.createElement(
+        iconView = /* @__PURE__ */ import_react4.default.createElement(import_react_native2.View, { style: styles.iconContainer, ...others }, /* @__PURE__ */ import_react4.default.createElement(
           import_css.WithLocalSvg,
           {
             style: [styles.icon, style],
@@ -256,29 +263,16 @@ var STATUS_COLORS = {
   DEFAULT: { color: "MAIN" /* MAIN */, backgroundColor: "MAIN_FADE" /* MAIN_FADE */ }
 };
 
-// context/providerTheme/index.tsx
-var import_react5 = __toESM(require("react"));
-var defaultTheme2 = {
-  icons: {},
-  colors: {},
-  fontFamily: {}
-};
-var defaultContextValue2 = {
-  theme: defaultTheme2,
-  setTheme: () => void 0
-};
-var TrilogyThemeContext2 = import_react5.default.createContext(defaultContextValue2);
-
-// objects/Typography/TypographyBold/index.tsx
-var import_react6 = require("react");
+// objects/Typography/TypographyBold/index.native.tsx
+var import_react5 = require("react");
 
 // components/modal/body/ModalBody.native.tsx
-var React5 = __toESM(require("react"));
+var React4 = __toESM(require("react"));
 var import_react_native3 = require("react-native");
 
 // components/modal/context/ModalContext.tsx
-var import_react7 = __toESM(require("react"));
-var ModalContext = import_react7.default.createContext({
+var import_react6 = __toESM(require("react"));
+var ModalContext = import_react6.default.createContext({
   scrollViewRef: null,
   handleOnScroll: () => null,
   isFooter: false,
@@ -286,9 +280,9 @@ var ModalContext = import_react7.default.createContext({
 });
 
 // components/modal/body/ModalBody.native.tsx
-var ModalBody = React5.forwardRef(({ children, ...others }, ref) => {
-  const { handleOnScroll, scrollViewRef, isFooter } = React5.useContext(ModalContext);
-  return /* @__PURE__ */ React5.createElement(
+var ModalBody = React4.forwardRef(({ children, ...others }, ref) => {
+  const { handleOnScroll, scrollViewRef, isFooter } = React4.useContext(ModalContext);
+  return /* @__PURE__ */ React4.createElement(
     import_react_native3.ScrollView,
     {
       ref: scrollViewRef,
@@ -296,7 +290,7 @@ var ModalBody = React5.forwardRef(({ children, ...others }, ref) => {
       onScroll: handleOnScroll,
       showsVerticalScrollIndicator: false
     },
-    /* @__PURE__ */ React5.createElement(
+    /* @__PURE__ */ React4.createElement(
       import_react_native3.View,
       {
         ref,

package/lib/components/modal/body/index.native.mjs

@@ -1,21 +1,23 @@
 "use client";
 import {
   ModalBody_native_default
-} from "../../../chunk-4NONUZBG.mjs";
+} from "../../../chunk-K6DW4JHP.mjs";
 import "../../../chunk-JLQUIKZX.mjs";
 import "../../../chunk-7M6BHGK7.mjs";
 import "../../../chunk-VNWHCGCD.mjs";
-import "../../../chunk-SJ5DUOZ6.mjs";
+import "../../../chunk-X67AAUB2.mjs";
 import "../../../chunk-TFNM3EBG.mjs";
-import "../../../chunk-MKOK7VNZ.mjs";
+import "../../../chunk-YKUYXBXK.mjs";
 import "../../../chunk-ZEJDFWMP.mjs";
-import "../../../chunk-KNRXLZZP.mjs";
+import "../../../chunk-MB55ARZ7.mjs";
 import "../../../chunk-D5HHHZDS.mjs";
-import "../../../chunk-2CYVOYRM.mjs";
+import "../../../chunk-3LXODEBD.mjs";
+import "../../../chunk-WVL5S3CD.mjs";
 import "../../../chunk-7L5452RP.mjs";
-import "../../../chunk-H6FVJB5Z.mjs";
+import "../../../chunk-2K2TD7FH.mjs";
+import "../../../chunk-UPP3GX33.mjs";
+import "../../../chunk-E4YRRUI3.mjs";
 import "../../../chunk-CWIO3GEP.mjs";
-import "../../../chunk-VI2KFLCZ.mjs";
 import "../../../chunk-R6PFY5VS.mjs";
 import "../../../chunk-RXBVZD3M.mjs";
 import "../../../chunk-A2ASOVUR.mjs";
@@ -38,20 +40,17 @@ import "../../../chunk-XIQL4ZTN.mjs";
 import "../../../chunk-UUXUTBLZ.mjs";
 import "../../../chunk-QOEJLTZN.mjs";
 import "../../../chunk-B6WC6WS2.mjs";
-import "../../../chunk-K2VWHGPL.mjs";
+import "../../../chunk-MAX3RSBG.mjs";
 import "../../../chunk-6BTWLQPI.mjs";
 import "../../../chunk-G6BHSMLA.mjs";
 import "../../../chunk-THOTRBD4.mjs";
 import "../../../chunk-ATW7ITPH.mjs";
 import "../../../chunk-IGMJNGTZ.mjs";
-import "../../../chunk-5QUXSOHX.mjs";
 import "../../../chunk-L4UDEKQK.mjs";
-import "../../../chunk-P372ZF3A.mjs";
-import "../../../chunk-HV6TXVFA.mjs";
-import "../../../chunk-CYNSXZSV.mjs";
-import "../../../chunk-YK5HPRX4.mjs";
+import "../../../chunk-CD6DMMCL.mjs";
+import "../../../chunk-RYABO2EX.mjs";
 import "../../../chunk-4UHBBNZ7.mjs";
-import "../../../chunk-NTS75UVH.mjs";
+import "../../../chunk-VDLM4YQP.mjs";
 import "../../../chunk-QIPGVLHJ.mjs";
 
 // components/modal/body/index.native.ts

package/lib/components/modal/footer/ModalFooter.js

@@ -87,11 +87,9 @@ var SSRObject = toArrayObject();
 // components/modal/footer/ModalFooter.tsx
 var import_clsx = __toESM(require("clsx"));
 var React2 = __toESM(require("react"));
-var ModalFooter = React2.forwardRef(
-  ({ children, className, id }, ref) => {
-    const { styled } = useTrilogyContext();
-    return /* @__PURE__ */ React2.createElement("div", { ref, "data-modal-footer": "", id, className: hashClass(styled, (0, import_clsx.default)("modal-footer", className)) }, children);
-  }
-);
+var ModalFooter = React2.forwardRef(({ children, className, id }, ref) => {
+  const { styled } = useTrilogyContext();
+  return /* @__PURE__ */ React2.createElement("div", { ref, "data-modal-footer": "", id, className: hashClass(styled, (0, import_clsx.default)("modal-footer", className)) }, children);
+});
 ModalFooter.displayName = "ModalFooter" /* ModalFooter */;
 var ModalFooter_default = ModalFooter;

package/lib/components/modal/footer/ModalFooter.mjs

@@ -1,14 +1,14 @@
 "use client";
 import {
   ModalFooter_default
-} from "../../../chunk-AOXXQP4V.mjs";
+} from "../../../chunk-SFIOTEMN.mjs";
 import "../../../chunk-Y7CEUBIZ.mjs";
 import "../../../chunk-HU3FAWMX.mjs";
 import "../../../chunk-OGATDHMZ.mjs";
 import "../../../chunk-ODKCJMCG.mjs";
 import "../../../chunk-UFMRE754.mjs";
 import "../../../chunk-ZB4OWTDD.mjs";
-import "../../../chunk-NTS75UVH.mjs";
+import "../../../chunk-VDLM4YQP.mjs";
 import "../../../chunk-QIPGVLHJ.mjs";
 export {
   ModalFooter_default as default

package/lib/components/modal/footer/ModalFooter.native.js

@@ -92,6 +92,7 @@ var colors = {
   ["MAIN" /* MAIN */]: ["#3d5d7e", "main", "white"],
   ["MAIN_FADE" /* MAIN_FADE */]: ["#BBC6CD", "main-fade", "white"],
   ["ACCENT" /* ACCENT */]: ["#da641b", "accent", "white"],
+  ["ACCENT_FADE" /* ACCENT_FADE */]: ["#faebe3", "accent-fade", "white"],
   ["FONT" /* FONT */]: ["#3d5d7e", "main", "white"],
   ["FONT_PLACEHOLDER" /* FONT_PLACEHOLDER */]: ["#687a87", "font-placeholder", "white"],
   ["SUCCESS" /* SUCCESS */]: ["#007B52", "success", "white"],
@@ -167,6 +168,12 @@ var Icon = import_react4.default.forwardRef(
       icon: {
         transform: isIOS ? stretched && [{ skewX: "20deg" }] || [{ skewX: "0deg" }] : []
       },
+      iconContainer: {
+        alignItems: "center",
+        justifyContent: "center",
+        width: defaultSize,
+        height: defaultSize
+      },
       stretched: {
         justifyContent: "center",
         alignItems: "center",
@@ -221,7 +228,7 @@ var Icon = import_react4.default.forwardRef(
           }
         ));
       } else {
-        iconView = /* @__PURE__ */ import_react4.default.createElement(import_react_native2.View, { ...others }, /* @__PURE__ */ import_react4.default.createElement(
+        iconView = /* @__PURE__ */ import_react4.default.createElement(import_react_native2.View, { style: styles2.iconContainer, ...others }, /* @__PURE__ */ import_react4.default.createElement(
           import_css.WithLocalSvg,
           {
             style: [styles2.icon, style],
@@ -261,24 +268,11 @@ var setTypographyAlign = (typo = "left") => {
   return typo && !Array.isArray(typo) && typo === "has-text-centered" /* TEXT_CENTERED */ && "center" || typo && Array.isArray(typo) && typo.includes("has-text-centered" /* TEXT_CENTERED */) && "center" || typo && !Array.isArray(typo) && typo === "has-text-left" /* TEXT_LEFT */ && "left" || typo && Array.isArray(typo) && typo.includes("has-text-left" /* TEXT_LEFT */) && "left" || typo && !Array.isArray(typo) && typo === "has-text-right" /* TEXT_RIGHT */ && "right" || typo && Array.isArray(typo) && typo.includes("has-text-right" /* TEXT_RIGHT */) && "right" || typo && !Array.isArray(typo) && typo === "has-text-justified" /* TEXT_JUSTIFIED */ && "justify" || typo && Array.isArray(typo) && typo.includes("has-text-justified" /* TEXT_JUSTIFIED */) && "justify" || "left";
 };
 
-// context/providerTheme/index.tsx
-var import_react5 = __toESM(require("react"));
-var defaultTheme2 = {
-  icons: {},
-  colors: {},
-  fontFamily: {}
-};
-var defaultContextValue2 = {
-  theme: defaultTheme2,
-  setTheme: () => void 0
-};
-var TrilogyThemeContext2 = import_react5.default.createContext(defaultContextValue2);
-
-// objects/Typography/TypographyBold/index.tsx
-var import_react6 = require("react");
+// objects/Typography/TypographyBold/index.native.tsx
+var import_react5 = require("react");
 var getTypographyBoldStyle = (typo) => {
   var _a, _b, _c, _d;
-  const { theme } = (0, import_react6.useContext)(TrilogyThemeContext2);
+  const { theme } = (0, import_react5.useContext)(TrilogyThemeContext);
   const currentTypo = Array.isArray(typo) ? typo : [typo];
   switch (true) {
     case (typo && currentTypo.includes("has-text-weight-medium" /* TEXT_WEIGHT_MEDIUM */)):
@@ -298,94 +292,104 @@ var setTypographyColor = (typo = "", inverted = false, loading = false) => {
 };
 
 // components/title/Title.native.tsx
-var React4 = __toESM(require("react"));
-var import_react7 = require("react");
+var React3 = __toESM(require("react"));
+var import_react6 = require("react");
 var import_native2 = __toESM(require("react-content-loader/native"));
 var import_react_native3 = require("react-native");
-var Title = React4.forwardRef(
-  ({ children, level, style, inverted, typo, onClick, skeleton, accessibilityLabel, subtitle, overline, ...others }, ref) => {
-    const statesContext = (0, import_react7.useContext)(StatesContext);
-    const color = setTypographyColor(typo, inverted || statesContext.inverted, skeleton);
-    const colorOverline = getColorStyle("MAIN" /* MAIN */);
-    const fontFamily = level && [1 /* ONE */, 2 /* TWO */].includes(level) ? "has-text-weight-bold" /* TEXT_WEIGHT_BOLD */ : "has-text-weight-semibold" /* TEXT_WEIGHT_SEMIBOLD */;
-    const titlesLevels = () => {
-      switch (level) {
-        case 1 /* ONE */:
-          return 32;
-        case 2 /* TWO */:
-          return 28;
-        case 3 /* THREE */:
-          return 22;
-        case 4 /* FOUR */:
-          return 20;
-        case 5 /* FIVE */:
-          return 18;
-        case 6 /* SIX */:
-          return 16;
-        default:
-          return 16;
-      }
-    };
-    const getAlignSelf = () => {
-      switch (true) {
-        case setTypographyAlign(typo) === "left":
-          return "flex-start";
-        case setTypographyAlign(typo) === "center":
-          return "center";
-        case setTypographyAlign(typo) === "right":
-          return "flex-end";
-        default:
-          return "flex-start";
-      }
-    };
-    const styles2 = import_react_native3.StyleSheet.create({
-      text: {
-        fontFamily: getTypographyBoldStyle(fontFamily),
-        fontSize: titlesLevels(),
-        color: (overline || subtitle) && !level && colorOverline || color,
-        textAlign: setTypographyAlign(typo),
-        textTransform: overline && !level ? "uppercase" : void 0,
-        alignSelf: getAlignSelf()
-      },
-      skeleton: {
-        minWidth: 10,
-        alignSelf: getAlignSelf(),
-        borderRadius: 5,
-        borderWidth: 0.1,
-        borderColor: getColorStyle("NEUTRAL_FADE" /* NEUTRAL_FADE */),
-        overflow: "hidden",
-        height: titlesLevels()
-      }
-    });
-    const titleAccessibilityLabel = accessibilityLabel ? accessibilityLabel : typeof children === "string" ? children : void 0;
-    let titleView = /* @__PURE__ */ React4.createElement(
-      import_react_native3.Text,
-      {
-        ref,
-        maxFontSizeMultiplier: 1.3,
-        accessible: !!titleAccessibilityLabel,
-        accessibilityLabel: titleAccessibilityLabel,
-        style: [styles2.text, style],
-        ...others
-      },
-      children
-    );
-    if (skeleton) {
-      titleView = /* @__PURE__ */ React4.createElement(import_native2.default, { style: styles2.skeleton }, titleView, isAndroid && /* @__PURE__ */ React4.createElement(import_react_native3.View, null, /* @__PURE__ */ React4.createElement(import_native2.Rect, { rx: "15", ry: "15", width: "100%", height: "100%" })));
+var Title = React3.forwardRef(({
+  children,
+  level,
+  style,
+  inverted,
+  typo,
+  onClick,
+  skeleton,
+  accessibilityLabel,
+  subtitle,
+  overline,
+  ...others
+}, ref) => {
+  const statesContext = (0, import_react6.useContext)(StatesContext);
+  const color = setTypographyColor(typo, inverted || statesContext.inverted, skeleton);
+  const colorOverline = getColorStyle("MAIN" /* MAIN */);
+  const fontFamily = level && [1 /* ONE */, 2 /* TWO */].includes(level) ? "has-text-weight-bold" /* TEXT_WEIGHT_BOLD */ : "has-text-weight-semibold" /* TEXT_WEIGHT_SEMIBOLD */;
+  const titlesLevels = () => {
+    switch (level) {
+      case 1 /* ONE */:
+        return 32;
+      case 2 /* TWO */:
+        return 28;
+      case 3 /* THREE */:
+        return 22;
+      case 4 /* FOUR */:
+        return 20;
+      case 5 /* FIVE */:
+        return 18;
+      case 6 /* SIX */:
+        return 16;
+      default:
+        return 16;
+    }
+  };
+  const getAlignSelf = () => {
+    switch (true) {
+      case setTypographyAlign(typo) === "left":
+        return "flex-start";
+      case setTypographyAlign(typo) === "center":
+        return "center";
+      case setTypographyAlign(typo) === "right":
+        return "flex-end";
+      default:
+        return "flex-start";
     }
-    return onClick ? /* @__PURE__ */ React4.createElement(import_react_native3.TouchableOpacity, { onPress: onClick, activeOpacity: 0.85 }, titleView) : titleView;
+  };
+  const styles2 = import_react_native3.StyleSheet.create({
+    text: {
+      fontFamily: getTypographyBoldStyle(fontFamily),
+      fontSize: titlesLevels(),
+      color: (overline || subtitle) && !level && colorOverline || color,
+      textAlign: setTypographyAlign(typo),
+      textTransform: overline && !level ? "uppercase" : void 0,
+      alignSelf: getAlignSelf()
+    },
+    skeleton: {
+      minWidth: 10,
+      alignSelf: getAlignSelf(),
+      borderRadius: 5,
+      borderWidth: 0.1,
+      borderColor: getColorStyle("NEUTRAL_FADE" /* NEUTRAL_FADE */),
+      overflow: "hidden",
+      height: titlesLevels()
+    }
+  });
+  const titleAccessibilityLabel = accessibilityLabel ? accessibilityLabel : typeof children === "string" ? children : void 0;
+  let titleView = /* @__PURE__ */ React3.createElement(
+    import_react_native3.Text,
+    {
+      ref,
+      maxFontSizeMultiplier: 1.3,
+      accessible: !!titleAccessibilityLabel,
+      accessibilityLabel: titleAccessibilityLabel,
+      style: [styles2.text, style],
+      ...others
+    },
+    children
+  );
+  if (skeleton) {
+    titleView = /* @__PURE__ */ React3.createElement(import_native2.default, { style: styles2.skeleton }, titleView, isAndroid && /* @__PURE__ */ React3.createElement(import_react_native3.View, null, /* @__PURE__ */ React3.createElement(import_native2.Rect, { rx: "15", ry: "15", width: "100%", height: "100%" })));
   }
-);
+  return onClick ? /* @__PURE__ */ React3.createElement(import_react_native3.TouchableOpacity, { onPress: onClick, activeOpacity: 0.85 }, titleView) : titleView;
+});
 Title.displayName = "Title" /* Title */;
 var Title_native_default = Title;
 
 // components/modal/footer/ModalFooter.native.tsx
-var React6 = __toESM(require("react"));
+var React5 = __toESM(require("react"));
 var import_react_native4 = require("react-native");
 
 // components/modal/context/ModalContext.tsx
-var import_react8 = __toESM(require("react"));
-var ModalContext = import_react8.default.createContext({
+var import_react7 = __toESM(require("react"));
+var ModalContext = import_react7.default.createContext({
   scrollViewRef: null,
   handleOnScroll: () => null,
   isFooter: false,
@@ -393,18 +397,16 @@ var ModalContext = import_react8.default.createContext({
 });
 
 // components/modal/footer/ModalFooter.native.tsx
-var ModalFooter = React6.forwardRef(
-  ({ children, ...others }, ref) => {
-    const { setIsFooter } = React6.useContext(ModalContext);
-    React6.useEffect(() => {
-      setIsFooter(true);
-      return () => {
-        setIsFooter(false);
-      };
-    }, []);
-    return /* @__PURE__ */ React6.createElement(import_react_native4.View, { ref, style: [styles.container], ...others }, /* @__PURE__ */ React6.createElement(import_react_native4.View, { style: [{ backgroundColor: getColorStyle("WHITE" /* BACKGROUND */) }] }, typeof children === "string" && /* @__PURE__ */ React6.createElement(Title_native_default, { level: 3 /* THREE */, style: styles.title }, children) || children));
-  }
-);
+var ModalFooter = React5.forwardRef(({ children, ...others }, ref) => {
+  const { setIsFooter } = React5.useContext(ModalContext);
+  React5.useEffect(() => {
+    setIsFooter(true);
+    return () => {
+      setIsFooter(false);
+    };
+  }, []);
+  return /* @__PURE__ */ React5.createElement(import_react_native4.View, { ref, style: [styles.container], ...others }, /* @__PURE__ */ React5.createElement(import_react_native4.View, { style: [{ backgroundColor: getColorStyle("WHITE" /* BACKGROUND */) }] }, typeof children === "string" && /* @__PURE__ */ React5.createElement(Title_native_default, { level: 3 /* THREE */, style: styles.title }, children) || children));
+});
 ModalFooter.displayName = "ModalFooter" /* ModalFooter */;
 var ModalFooter_native_default = ModalFooter;
 var styles = import_react_native4.StyleSheet.create({