@trilogy-ds/react 0.0.16-esm-cjs → 0.0.18-esm-cjs

package/lib/components/alert/index.native.js

@@ -45,12 +45,13 @@ var ColumnsGapValue = [0, 4, 8, 12, 16, 24, 32, 40, 48, 54, 62];
 
 // components/columns/context/index.tsx
 var import_react = __toESM(require("react"));
-var ColumnsContext = import_react.default.createContext({
+var defaultContextValue = {
   scrollable: false,
   width: 0,
   realGap: 16,
   childrensLength: 1
-});
+};
+var ColumnsContext = import_react.default.createContext(defaultContextValue);
 
 // objects/facets/Alignable/index.ts
 var getAlignStyle = (alignType) => {
@@ -69,6 +70,17 @@ var getAlignStyle = (alignType) => {
 // components/columns/Columns.native.tsx
 var import_react2 = __toESM(require("react"));
 var import_react_native = require("react-native");
+var staticStyles = import_react_native.StyleSheet.create({
+  centered: {
+    justifyContent: "center"
+  },
+  multiline: {
+    flexWrap: "wrap"
+  },
+  mobile: {
+    flexDirection: "column"
+  }
+});
 var Columns = import_react2.default.forwardRef(
   ({ children, align, gap, verticalAlign, fullBleed, scrollable, multiline, fullheight, ...others }, ref) => {
     const [width, setWidth] = (0, import_react2.useState)(0);
@@ -86,76 +98,67 @@ var Columns = import_react2.default.forwardRef(
       [fullBleed, width]
     );
     const realGap = import_react2.default.useMemo(() => typeof gap === "undefined" && 16 || ColumnsGapValue[gap], [gap]);
-    const styles = import_react_native.StyleSheet.create({
-      columns: {
-        width: fullBleed && width ? width + enlarge * 2 : "100%",
-        marginHorizontal: -enlarge,
-        paddingHorizontal: enlarge,
-        flexDirection: "row",
-        gap: realGap,
-        height: fullheight ? "100%" : "auto"
-      },
-      centered: {
-        justifyContent: "center"
-      },
-      verticalAlign: {
-        alignItems: getAlignStyle(verticalAlign)
-      },
-      multiline: {
-        flexWrap: "wrap"
-      },
-      scrollContainer: {
-        paddingHorizontal: enlarge,
-        gap: realGap
+    const dynamicStyles = import_react2.default.useMemo(
+      () => ({
+        columns: {
+          width: fullBleed && width ? width + enlarge * 2 : "100%",
+          marginHorizontal: -enlarge,
+          paddingHorizontal: enlarge,
+          flexDirection: "row",
+          gap: realGap,
+          height: fullheight ? "100%" : "auto"
+        },
+        verticalAlign: {
+          alignItems: getAlignStyle(verticalAlign)
+        },
+        scrollContainer: {
+          paddingHorizontal: enlarge,
+          gap: realGap
+        }
+      }),
+      [fullBleed, width, enlarge, realGap, fullheight, verticalAlign]
+    );
+    const contextValue = import_react2.default.useMemo(
+      () => ({
+        width,
+        realGap,
+        scrollable: scrollable || false,
+        childrensLength: import_react2.default.Children.count(children)
+      }),
+      [width, realGap, scrollable, children]
+    );
+    return /* @__PURE__ */ import_react2.default.createElement(ColumnsContext.Provider, { value: contextValue }, !scrollable && /* @__PURE__ */ import_react2.default.createElement(
+      import_react_native.View,
+      {
+        ref,
+        onLayout: onLayoutHandler,
+        style: [
+          dynamicStyles.columns,
+          multiline && staticStyles.multiline,
+          align === "ALIGNED_CENTER" /* ALIGNED_CENTER */ && staticStyles.centered,
+          verticalAlign && dynamicStyles.verticalAlign
+        ],
+        ...others
       },
-      mobile: {
-        flexDirection: "column"
-      }
-    });
-    return /* @__PURE__ */ import_react2.default.createElement(
-      ColumnsContext.Provider,
+      children
+    ), scrollable && /* @__PURE__ */ import_react2.default.createElement(
+      import_react_native.View,
       {
-        value: {
-          width,
-          realGap,
-          scrollable: scrollable || false,
-          childrensLength: import_react2.default.Children.count(children)
+        onLayout: onLayoutHandler,
+        style: {
+          marginHorizontal: -enlarge
         }
       },
-      !scrollable && /* @__PURE__ */ import_react2.default.createElement(
-        import_react_native.View,
+      /* @__PURE__ */ import_react2.default.createElement(
+        import_react_native.ScrollView,
         {
-          ref,
-          onLayout: onLayoutHandler,
-          style: [
-            styles.columns,
-            multiline && styles.multiline,
-            align === "ALIGNED_CENTER" /* ALIGNED_CENTER */ && styles.centered,
-            verticalAlign && styles.verticalAlign
-          ],
-          ...others
+          horizontal: true,
+          contentContainerStyle: dynamicStyles.scrollContainer,
+          showsHorizontalScrollIndicator: false
         },
         children
-      ),
-      scrollable && /* @__PURE__ */ import_react2.default.createElement(
-        import_react_native.View,
-        {
-          onLayout: onLayoutHandler,
-          style: {
-            marginHorizontal: -enlarge
-          }
-        },
-        /* @__PURE__ */ import_react2.default.createElement(
-          import_react_native.ScrollView,
-          {
-            horizontal: true,
-            contentContainerStyle: styles.scrollContainer,
-            showsHorizontalScrollIndicator: false
-          },
-          children
-        )
       )
-    );
+    ));
   }
 );
 Columns.displayName = "Columns" /* Columns */;
@@ -169,11 +172,11 @@ var defaultTheme = {
   colors,
   fontFamily: { regular: "poppins-regular", medium: "poppins-medium", bold: "poppins-semibold" }
 };
-var defaultContextValue = {
+var defaultContextValue2 = {
   theme: defaultTheme,
   setTheme: () => void 0
 };
-var TrilogyThemeContext = import_react3.default.createContext(defaultContextValue);
+var TrilogyThemeContext = import_react3.default.createContext(defaultContextValue2);
 
 // objects/facets/Color/index.native.tsx
 var import_react4 = require("react");
@@ -182,6 +185,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"],
@@ -295,6 +299,12 @@ var Icon = import_react6.default.forwardRef(
       icon: {
         transform: isIOS ? stretched && [{ skewX: "20deg" }] || [{ skewX: "0deg" }] : []
       },
+      iconContainer: {
+        alignItems: "center",
+        justifyContent: "center",
+        width: defaultSize,
+        height: defaultSize
+      },
       stretched: {
         justifyContent: "center",
         alignItems: "center",
@@ -349,7 +359,7 @@ var Icon = import_react6.default.forwardRef(
           }
         ));
       } else {
-        iconView = /* @__PURE__ */ import_react6.default.createElement(import_react_native3.View, { ...others }, /* @__PURE__ */ import_react6.default.createElement(
+        iconView = /* @__PURE__ */ import_react6.default.createElement(import_react_native3.View, { style: styles.iconContainer, ...others }, /* @__PURE__ */ import_react6.default.createElement(
           import_css.WithLocalSvg,
           {
             style: [styles.icon, style],
@@ -411,24 +421,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_react7 = __toESM(require("react"));
-var defaultTheme2 = {
-  icons: {},
-  colors: {},
-  fontFamily: {}
-};
-var defaultContextValue2 = {
-  theme: defaultTheme2,
-  setTheme: () => void 0
-};
-var TrilogyThemeContext2 = import_react7.default.createContext(defaultContextValue2);
-
-// objects/Typography/TypographyBold/index.tsx
-var import_react8 = require("react");
+// objects/Typography/TypographyBold/index.native.tsx
+var import_react7 = require("react");
 var getTypographyBoldStyle = (typo) => {
   var _a, _b, _c, _d;
-  const { theme } = (0, import_react8.useContext)(TrilogyThemeContext2);
+  const { theme } = (0, import_react7.useContext)(TrilogyThemeContext);
   const currentTypo = Array.isArray(typo) ? typo : [typo];
   switch (true) {
     case (typo && currentTypo.includes("has-text-weight-medium" /* TEXT_WEIGHT_MEDIUM */)):
@@ -448,55 +445,63 @@ var setTypographyColor = (typo = "", inverted = false, loading = false) => {
 };
 
 // components/columns/column/Column.native.tsx
-var import_react9 = __toESM(require("react"));
+var import_react8 = __toESM(require("react"));
 var import_react_native4 = require("react-native");
-var Column = import_react9.default.forwardRef(
-  ({ children, narrow, size, verticalAlign, ...others }, ref) => {
-    const { width, realGap, scrollable, childrensLength } = import_react9.default.useContext(ColumnsContext);
-    const scrollableStyle = import_react9.default.useMemo(
-      () => ({
-        width: size ? size / 12 * width - realGap * ((childrensLength - 1) / childrensLength) : narrow ? "auto" : width - 2 * realGap
-      }),
-      [size, narrow, width, realGap, childrensLength]
-    );
-    const noScrollableStyle = import_react9.default.useMemo(
-      () => ({
-        flex: narrow ? 0 : 1,
-        flexGrow: size || narrow ? 0 : 1,
-        flexShrink: narrow ? 1 : 0,
-        flexBasis: size ? size / 12 * width - realGap * ((childrensLength - 1) / childrensLength) : "auto"
-      }),
-      [size, narrow, width, realGap, childrensLength]
-    );
-    return /* @__PURE__ */ import_react9.default.createElement(
-      import_react_native4.View,
-      {
-        ref,
-        style: [
-          scrollable && scrollableStyle,
-          !scrollable && noScrollableStyle,
-          { justifyContent: getAlignStyle(verticalAlign) }
-        ],
-        ...others
-      },
-      children
-    );
-  }
+var Column = import_react8.default.memo(
+  import_react8.default.forwardRef(
+    ({ children, narrow, size, verticalAlign, ...others }, ref) => {
+      const { width, realGap, scrollable, childrensLength } = import_react8.default.useContext(ColumnsContext);
+      const calculatedWidth = import_react8.default.useMemo(
+        () => size ? size / 12 * width - realGap * ((childrensLength - 1) / childrensLength) : null,
+        [size, width, realGap, childrensLength]
+      );
+      const scrollableStyle = import_react8.default.useMemo(
+        () => ({
+          width: calculatedWidth || (narrow ? "auto" : width - 2 * realGap)
+        }),
+        [calculatedWidth, narrow, width, realGap]
+      );
+      const noScrollableStyle = import_react8.default.useMemo(
+        () => ({
+          flex: narrow ? 0 : 1,
+          flexGrow: size || narrow ? 0 : 1,
+          flexShrink: narrow ? 1 : 0,
+          flexBasis: calculatedWidth || "auto"
+        }),
+        [narrow, size, calculatedWidth]
+      );
+      const justifyContentStyle = import_react8.default.useMemo(
+        () => ({
+          justifyContent: getAlignStyle(verticalAlign)
+        }),
+        [verticalAlign]
+      );
+      return /* @__PURE__ */ import_react8.default.createElement(
+        import_react_native4.View,
+        {
+          ref,
+          style: [scrollable && scrollableStyle, !scrollable && noScrollableStyle, justifyContentStyle],
+          ...others
+        },
+        children
+      );
+    }
+  )
 );
 Column.displayName = "Column" /* Column */;
 var Column_native_default = Column;
 
 // components/spacer/Spacer.native.tsx
-var React7 = __toESM(require("react"));
+var React6 = __toESM(require("react"));
 var import_react_native5 = require("react-native");
-var Spacer = React7.forwardRef(({ size, horizontal }, ref) => {
+var Spacer = React6.forwardRef(({ size, horizontal }, ref) => {
   const styles = import_react_native5.StyleSheet.create({
     spacer: {
       marginLeft: horizontal && parseInt(size.toString()) || 0,
       marginTop: !horizontal && parseInt(size.toString()) || 0
     }
   });
-  return /* @__PURE__ */ React7.createElement(import_react_native5.View, { ref, style: styles.spacer });
+  return /* @__PURE__ */ React6.createElement(import_react_native5.View, { ref, style: styles.spacer });
 });
 Spacer.displayName = "Spacer" /* Spacer */;
 var Spacer_native_default = Spacer;
@@ -519,227 +524,253 @@ var SpacerSize = /* @__PURE__ */ ((SpacerSize2) => {
 var SpacerSizeValues = `${SpacerSize}`;
 
 // components/text/Text.native.tsx
-var import_react10 = __toESM(require("react"));
+var import_react9 = __toESM(require("react"));
 var import_native2 = __toESM(require("react-content-loader/native"));
 var import_react_native6 = require("react-native");
-var Text = import_react10.default.forwardRef(
-  ({ children, level, style, inverted, typo, skeleton, accessibilityLabel, numberOfLines = 0, ...others }, ref) => {
-    const statesContext = (0, import_react10.useContext)(StatesContext);
-    const textLevels = (level2) => {
-      return level2 && level2 == 1 /* ONE */ && 16 || level2 && level2 == 2 /* TWO */ && 14 || level2 && level2 == 3 /* THREE */ && 12 || level2 && level2 == 4 /* FOUR */ && 10 || 14;
-    };
-    const styles = import_react_native6.StyleSheet.create({
-      text: {
-        fontFamily: getTypographyBoldStyle(typo),
-        fontSize: textLevels(level),
-        color: setTypographyColor(typo, inverted || statesContext.inverted, skeleton),
-        textAlign: setTypographyAlign(typo),
-        lineHeight: textLevels(level) * 1.2,
-        textDecorationLine: "none",
-        alignSelf: setTypographyAlign(typo) === "left" && "flex-start" || setTypographyAlign(typo) === "center" && "center" || setTypographyAlign(typo) === "right" && "flex-end" || "flex-start"
-      },
-      skeleton: {
-        minWidth: 10,
-        alignSelf: setTypographyAlign(typo) === "left" && "flex-start" || setTypographyAlign(typo) === "center" && "center" || setTypographyAlign(typo) === "right" && "flex-end" || "flex-start",
-        borderRadius: level && level == 1 /* ONE */ && 7 || level && level == 2 /* TWO */ && 7 || level && level == 3 /* THREE */ && 5 || 3,
-        borderWidth: 0.1,
-        borderColor: getColorStyle("NEUTRAL_FADE" /* NEUTRAL_FADE */),
-        overflow: "hidden",
-        height: textLevels(level)
-      }
-    });
-    const textAccessibilityLabel = accessibilityLabel ? accessibilityLabel : typeof children === "string" ? children : void 0;
-    let textView = /* @__PURE__ */ import_react10.default.createElement(
-      import_react_native6.Text,
-      {
-        ref,
-        numberOfLines,
-        ellipsizeMode: "tail",
-        maxFontSizeMultiplier: 1.3,
-        accessible: !!textAccessibilityLabel,
-        accessibilityLabel: textAccessibilityLabel,
-        style: [styles.text, style],
-        ...others
-      },
-      children
-    );
-    if (skeleton) {
-      textView = /* @__PURE__ */ import_react10.default.createElement(import_native2.default, { style: styles.skeleton }, textView, isAndroid && /* @__PURE__ */ import_react10.default.createElement(import_react_native6.View, null, /* @__PURE__ */ import_react10.default.createElement(import_native2.Rect, { rx: "7", ry: "7", width: "100%", height: "100%" })));
+var Text = import_react9.default.forwardRef(({
+  children,
+  level,
+  style,
+  inverted,
+  typo,
+  skeleton,
+  accessibilityLabel,
+  numberOfLines = 0,
+  ...others
+}, ref) => {
+  const statesContext = (0, import_react9.useContext)(StatesContext);
+  const textLevels = (level2) => {
+    return level2 && level2 == 1 /* ONE */ && 16 || level2 && level2 == 2 /* TWO */ && 14 || level2 && level2 == 3 /* THREE */ && 12 || level2 && level2 == 4 /* FOUR */ && 10 || 14;
+  };
+  const styles = import_react_native6.StyleSheet.create({
+    text: {
+      fontFamily: getTypographyBoldStyle(typo),
+      fontSize: textLevels(level),
+      color: setTypographyColor(typo, inverted || statesContext.inverted, skeleton),
+      textAlign: setTypographyAlign(typo),
+      lineHeight: textLevels(level) * 1.2,
+      textDecorationLine: "none",
+      alignSelf: setTypographyAlign(typo) === "left" && "flex-start" || setTypographyAlign(typo) === "center" && "center" || setTypographyAlign(typo) === "right" && "flex-end" || "flex-start"
+    },
+    skeleton: {
+      minWidth: 10,
+      alignSelf: setTypographyAlign(typo) === "left" && "flex-start" || setTypographyAlign(typo) === "center" && "center" || setTypographyAlign(typo) === "right" && "flex-end" || "flex-start",
+      borderRadius: level && level == 1 /* ONE */ && 7 || level && level == 2 /* TWO */ && 7 || level && level == 3 /* THREE */ && 5 || 3,
+      borderWidth: 0.1,
+      borderColor: getColorStyle("NEUTRAL_FADE" /* NEUTRAL_FADE */),
+      overflow: "hidden",
+      height: textLevels(level)
     }
-    return textView;
+  });
+  const textAccessibilityLabel = accessibilityLabel ? accessibilityLabel : typeof children === "string" ? children : void 0;
+  let textView = /* @__PURE__ */ import_react9.default.createElement(
+    import_react_native6.Text,
+    {
+      ref,
+      numberOfLines,
+      ellipsizeMode: "tail",
+      maxFontSizeMultiplier: 1.3,
+      accessible: !!textAccessibilityLabel,
+      accessibilityLabel: textAccessibilityLabel,
+      style: [styles.text, style],
+      ...others
+    },
+    children
+  );
+  if (skeleton) {
+    textView = /* @__PURE__ */ import_react9.default.createElement(import_native2.default, { style: styles.skeleton }, textView, isAndroid && /* @__PURE__ */ import_react9.default.createElement(import_react_native6.View, null, /* @__PURE__ */ import_react9.default.createElement(import_native2.Rect, { rx: "7", ry: "7", width: "100%", height: "100%" })));
   }
-);
+  return textView;
+});
 Text.displayName = "Text" /* Text */;
 var Text_native_default = Text;
 
 // components/title/Title.native.tsx
-var React9 = __toESM(require("react"));
-var import_react11 = require("react");
+var React8 = __toESM(require("react"));
+var import_react10 = require("react");
 var import_native3 = __toESM(require("react-content-loader/native"));
 var import_react_native7 = require("react-native");
-var Title = React9.forwardRef(
-  ({ children, level, style, inverted, typo, onClick, skeleton, accessibilityLabel, subtitle, overline, ...others }, ref) => {
-    const statesContext = (0, import_react11.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 styles = import_react_native7.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__ */ React9.createElement(
-      import_react_native7.Text,
-      {
-        ref,
-        maxFontSizeMultiplier: 1.3,
-        accessible: !!titleAccessibilityLabel,
-        accessibilityLabel: titleAccessibilityLabel,
-        style: [styles.text, style],
-        ...others
-      },
-      children
-    );
-    if (skeleton) {
-      titleView = /* @__PURE__ */ React9.createElement(import_native3.default, { style: styles.skeleton }, titleView, isAndroid && /* @__PURE__ */ React9.createElement(import_react_native7.View, null, /* @__PURE__ */ React9.createElement(import_native3.Rect, { rx: "15", ry: "15", width: "100%", height: "100%" })));
+var Title = React8.forwardRef(({
+  children,
+  level,
+  style,
+  inverted,
+  typo,
+  onClick,
+  skeleton,
+  accessibilityLabel,
+  subtitle,
+  overline,
+  ...others
+}, ref) => {
+  const statesContext = (0, import_react10.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__ */ React9.createElement(import_react_native7.TouchableOpacity, { onPress: onClick, activeOpacity: 0.85 }, titleView) : titleView;
+  };
+  const styles = import_react_native7.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__ */ React8.createElement(
+    import_react_native7.Text,
+    {
+      ref,
+      maxFontSizeMultiplier: 1.3,
+      accessible: !!titleAccessibilityLabel,
+      accessibilityLabel: titleAccessibilityLabel,
+      style: [styles.text, style],
+      ...others
+    },
+    children
+  );
+  if (skeleton) {
+    titleView = /* @__PURE__ */ React8.createElement(import_native3.default, { style: styles.skeleton }, titleView, isAndroid && /* @__PURE__ */ React8.createElement(import_react_native7.View, null, /* @__PURE__ */ React8.createElement(import_native3.Rect, { rx: "15", ry: "15", width: "100%", height: "100%" })));
   }
-);
+  return onClick ? /* @__PURE__ */ React8.createElement(import_react_native7.TouchableOpacity, { onPress: onClick, activeOpacity: 0.85 }, titleView) : titleView;
+});
 Title.displayName = "Title" /* Title */;
 var Title_native_default = Title;
 
 // components/view/View.native.tsx
-var React10 = __toESM(require("react"));
+var React9 = __toESM(require("react"));
 var import_react_native8 = require("react-native");
-var View7 = React10.forwardRef(
-  ({
-    children,
-    style,
-    onClick,
-    flexable,
-    bottom,
-    backgroundColor,
-    backgroundSrc,
-    id,
-    justify,
-    fullwidth = true,
-    align,
-    ...others
-  }, ref) => {
-    const viewColor = backgroundColor && getColorStyle(backgroundColor) || "transparent";
-    const styles = import_react_native8.StyleSheet.create({
-      view: {
-        flex: flexable ? 1 : 0,
-        backgroundColor: viewColor,
-        width: fullwidth ? "100%" : "auto",
-        ...justify && { justifyContent: getJustifyStyle(justify) },
-        ...align && { alignItems: getAlignStyle(align) }
-      },
-      bottom: {
-        position: "absolute",
-        bottom: 0,
-        width: fullwidth ? "100%" : "auto"
-      },
-      sectionImage: {
-        flex: flexable ? 1 : 0,
-        width: "100%",
-        height: "auto"
-      }
-    });
-    let returnView = /* @__PURE__ */ React10.createElement(import_react_native8.View, { ref, testID: id, nativeID: id, style: [styles.view, bottom && styles.bottom, style], ...others }, children);
-    if (!children) {
-      returnView = /* @__PURE__ */ React10.createElement(
-        import_react_native8.View,
-        {
-          ref,
-          testID: id,
-          nativeID: id,
-          style: [styles.view, bottom && styles.bottom, style],
-          ...others
-        }
-      );
-    }
-    if (onClick) {
-      returnView = /* @__PURE__ */ React10.createElement(
-        import_react_native8.View,
-        {
-          ref,
-          testID: id,
-          nativeID: id,
-          style: [styles.view, bottom && styles.bottom, style],
-          ...others
-        },
-        /* @__PURE__ */ React10.createElement(import_react_native8.TouchableOpacity, { activeOpacity: 1, onPress: onClick }, children)
-      );
+var View7 = React9.forwardRef(({
+  children,
+  style,
+  onClick,
+  flexable,
+  bottom,
+  backgroundColor,
+  backgroundSrc,
+  id,
+  justify,
+  fullwidth = true,
+  align,
+  ...others
+}, ref) => {
+  const viewColor = backgroundColor && getColorStyle(backgroundColor) || "transparent";
+  const styles = import_react_native8.StyleSheet.create({
+    view: {
+      flex: flexable ? 1 : 0,
+      backgroundColor: viewColor,
+      width: fullwidth ? "100%" : "auto",
+      ...justify && { justifyContent: getJustifyStyle(justify) },
+      ...align && { alignItems: getAlignStyle(align) }
+    },
+    bottom: {
+      position: "absolute",
+      bottom: 0,
+      width: fullwidth ? "100%" : "auto"
+    },
+    sectionImage: {
+      flex: flexable ? 1 : 0,
+      width: "100%",
+      height: "auto"
     }
-    return backgroundSrc ? /* @__PURE__ */ React10.createElement(
-      import_react_native8.ImageBackground,
+  });
+  let returnView = /* @__PURE__ */ React9.createElement(
+    import_react_native8.View,
+    {
+      ref,
+      testID: id,
+      nativeID: id,
+      style: [styles.view, bottom && styles.bottom, style],
+      ...others
+    },
+    children
+  );
+  if (!children) {
+    returnView = /* @__PURE__ */ React9.createElement(
+      import_react_native8.View,
+      {
+        ref,
+        testID: id,
+        nativeID: id,
+        style: [styles.view, bottom && styles.bottom, style],
+        ...others
+      }
+    );
+  }
+  if (onClick) {
+    returnView = /* @__PURE__ */ React9.createElement(
+      import_react_native8.View,
       {
-        style: styles.sectionImage,
-        source: typeof backgroundSrc === "number" ? backgroundSrc : { uri: backgroundSrc }
+        ref,
+        testID: id,
+        nativeID: id,
+        style: [styles.view, bottom && styles.bottom, style],
+        ...others
       },
-      returnView
-    ) : returnView;
+      /* @__PURE__ */ React9.createElement(import_react_native8.TouchableOpacity, { activeOpacity: 1, onPress: onClick }, children)
+    );
   }
-);
+  return backgroundSrc ? /* @__PURE__ */ React9.createElement(
+    import_react_native8.ImageBackground,
+    {
+      style: styles.sectionImage,
+      source: typeof backgroundSrc === "number" ? backgroundSrc : { uri: backgroundSrc }
+    },
+    returnView
+  ) : returnView;
+});
 View7.displayName = "View" /* View */;
 var View_native_default = View7;
 
 // components/alert/Alert.native.tsx
-var React14 = __toESM(require("react"));
+var React13 = __toESM(require("react"));
 var import_react_native11 = require("react-native");
 var import_react_native_toast_message = __toESM(require("react-native-toast-message"));
 
 // components/rows/Rows.native.tsx
-var React11 = __toESM(require("react"));
+var React10 = __toESM(require("react"));
 var import_react_native9 = require("react-native");
-var Rows = React11.forwardRef(({ children, gap, ...others }, ref) => {
+var Rows = React10.forwardRef(({ children, gap, ...others }, ref) => {
   const realGap = typeof gap === "undefined" && 16 || ColumnsGapValue[gap];
   const styles = import_react_native9.StyleSheet.create({
     rows: {
@@ -749,22 +780,22 @@ var Rows = React11.forwardRef(({ children, gap, ...others }, ref) => {
       gap: realGap
     }
   });
-  return /* @__PURE__ */ React11.createElement(import_react_native9.View, { ref, style: styles.rows, ...others }, children);
+  return /* @__PURE__ */ React10.createElement(import_react_native9.View, { ref, style: styles.rows, ...others }, children);
 });
 Rows.displayName = "Rows" /* Rows */;
 var Rows_native_default = Rows;
 
 // components/rows/row/Row.native.tsx
-var React12 = __toESM(require("react"));
+var React11 = __toESM(require("react"));
 var import_react_native10 = require("react-native");
-var Row = React12.forwardRef(({ children, narrow, ...others }, ref) => {
+var Row = React11.forwardRef(({ children, narrow, ...others }, ref) => {
   const styles = import_react_native10.StyleSheet.create({
     row: {
       flexGrow: narrow && 0 || 1,
       flexShrink: 1
     }
   });
-  return /* @__PURE__ */ React12.createElement(import_react_native10.View, { ref, style: styles.row, ...others }, children);
+  return /* @__PURE__ */ React11.createElement(import_react_native10.View, { ref, style: styles.row, ...others }, children);
 });
 Row.displayName = "Row" /* Row */;
 var Row_native_default = Row;
@@ -785,9 +816,9 @@ var ToasterAlertFloat = /* @__PURE__ */ ((ToasterAlertFloat2) => {
 })(ToasterAlertFloat || {});
 
 // components/alert/context/ToasterContext.tsx
-var import_react12 = __toESM(require("react"));
+var import_react11 = __toESM(require("react"));
 var emptyFn = () => 0;
-var ToasterContext = import_react12.default.createContext({ show: emptyFn, hide: emptyFn });
+var ToasterContext = import_react11.default.createContext({ show: emptyFn, hide: emptyFn });
 var ToasterContext_default = ToasterContext;
 
 // components/alert/context/index.ts
@@ -806,7 +837,7 @@ var showToast = (params) => {
     props: { title, description, closable, iconName, alert, onClick, status }
   });
 };
-var Alert = React14.forwardRef(
+var Alert = React13.forwardRef(
   ({ banner, status, iconName, title, description, onClick, display = true, ...others }, ref) => {
     const { color, backgroundColor } = getStatusStyle(status);
     let alertView;
@@ -835,11 +866,11 @@ var Alert = React14.forwardRef(
       }
     });
     alertView = // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    /* @__PURE__ */ React14.createElement(View_native_default, { style: [styles.container, others.style], ref }, /* @__PURE__ */ React14.createElement(Columns_native_default, { gap: 2, verticalAlign: "ALIGNED_START" /* ALIGNED_START */ }, /* @__PURE__ */ React14.createElement(Column_native_default, { narrow: true }, /* @__PURE__ */ React14.createElement(View_native_default, { style: { marginTop: -2 } }, /* @__PURE__ */ React14.createElement(Icon_native_default, { name: iconName ? iconName : getStatusIconName(status), color: status || "MAIN" /* MAIN */ }))), /* @__PURE__ */ React14.createElement(Column_native_default, null, /* @__PURE__ */ React14.createElement(Rows_native_default, { gap: description ? 2 : 0 }, /* @__PURE__ */ React14.createElement(index_native_default, null, /* @__PURE__ */ React14.createElement(Text_native_default, { style: [styles.containerTitle], level: 1 /* ONE */, typo: "has-text-weight-semibold" /* TEXT_WEIGHT_SEMIBOLD */ }, title)), /* @__PURE__ */ React14.createElement(index_native_default, null, description && typeof description.valueOf() === "string" ? /* @__PURE__ */ React14.createElement(Text_native_default, { level: 2 /* TWO */, style: styles.description }, description) : /* @__PURE__ */ React14.createElement(View_native_default, { style: styles.description }, description))))));
+    /* @__PURE__ */ React13.createElement(View_native_default, { style: [styles.container, others.style], ref }, /* @__PURE__ */ React13.createElement(Columns_native_default, { gap: 2, verticalAlign: "ALIGNED_START" /* ALIGNED_START */ }, /* @__PURE__ */ React13.createElement(Column_native_default, { narrow: true }, /* @__PURE__ */ React13.createElement(View_native_default, { style: { marginTop: -2 } }, /* @__PURE__ */ React13.createElement(Icon_native_default, { name: iconName ? iconName : getStatusIconName(status), color: status || "MAIN" /* MAIN */ }))), /* @__PURE__ */ React13.createElement(Column_native_default, null, /* @__PURE__ */ React13.createElement(Rows_native_default, { ...{ style: { flexGrow: 1 } }, gap: description ? 2 : 0 }, /* @__PURE__ */ React13.createElement(index_native_default, null, /* @__PURE__ */ React13.createElement(Text_native_default, { style: [styles.containerTitle], level: 1 /* ONE */, typo: "has-text-weight-semibold" /* TEXT_WEIGHT_SEMIBOLD */ }, title)), description && /* @__PURE__ */ React13.createElement(Spacer_native_default, { size: 4 /* ONE */ }), /* @__PURE__ */ React13.createElement(index_native_default, null, description && typeof description.valueOf() === "string" ? /* @__PURE__ */ React13.createElement(Text_native_default, { level: 2 /* TWO */, style: styles.description }, description) : /* @__PURE__ */ React13.createElement(View_native_default, { style: styles.description }, description))))));
     if (onClick && display)
-      return /* @__PURE__ */ React14.createElement(View_native_default, null, /* @__PURE__ */ React14.createElement(import_react_native11.TouchableOpacity, { onPress: onClick, activeOpacity: 0.85 }, alertView));
+      return /* @__PURE__ */ React13.createElement(View_native_default, null, /* @__PURE__ */ React13.createElement(import_react_native11.TouchableOpacity, { onPress: onClick, activeOpacity: 0.85 }, alertView));
     if (!onClick && display) return alertView;
-    return /* @__PURE__ */ React14.createElement(View_native_default, null);
+    return /* @__PURE__ */ React13.createElement(View_native_default, null);
   }
 );
 var ToasterAlert = ({ props }) => {
@@ -857,7 +888,7 @@ var ToasterAlert = ({ props }) => {
       borderRadius: 6
     }
   });
-  return /* @__PURE__ */ React14.createElement(View_native_default, { style: styles.toaster }, /* @__PURE__ */ React14.createElement(import_react_native11.TouchableOpacity, { style: styles.toasterContainer, onPress: onClick }, /* @__PURE__ */ React14.createElement(Columns_native_default, null, /* @__PURE__ */ React14.createElement(Column_native_default, { size: 1 }, iconName && /* @__PURE__ */ React14.createElement(Icon_native_default, { name: iconName, color: status || "MAIN" /* MAIN */ })), /* @__PURE__ */ React14.createElement(Column_native_default, null, title && /* @__PURE__ */ React14.createElement(Title_native_default, { level: 6 /* SIX */ }, title), description && /* @__PURE__ */ React14.createElement(React14.Fragment, null, /* @__PURE__ */ React14.createElement(Spacer_native_default, { size: 8 /* TWO */ }), /* @__PURE__ */ React14.createElement(Text_native_default, { level: 3 /* THREE */ }, description))), closable && /* @__PURE__ */ React14.createElement(Column_native_default, { size: 1 }, /* @__PURE__ */ React14.createElement(
+  return /* @__PURE__ */ React13.createElement(View_native_default, { style: styles.toaster }, /* @__PURE__ */ React13.createElement(import_react_native11.TouchableOpacity, { style: styles.toasterContainer, onPress: onClick }, /* @__PURE__ */ React13.createElement(Columns_native_default, null, /* @__PURE__ */ React13.createElement(Column_native_default, { size: 1 }, iconName && /* @__PURE__ */ React13.createElement(Icon_native_default, { name: iconName, color: status || "MAIN" /* MAIN */ })), /* @__PURE__ */ React13.createElement(Column_native_default, null, title && /* @__PURE__ */ React13.createElement(Title_native_default, { level: 6 /* SIX */ }, title), description && /* @__PURE__ */ React13.createElement(React13.Fragment, null, /* @__PURE__ */ React13.createElement(Spacer_native_default, { size: 8 /* TWO */ }), /* @__PURE__ */ React13.createElement(Text_native_default, { level: 3 /* THREE */ }, description))), closable && /* @__PURE__ */ React13.createElement(Column_native_default, { size: 1 }, /* @__PURE__ */ React13.createElement(
     import_react_native11.TouchableOpacity,
     {
       onPress: (e) => {
@@ -865,14 +896,14 @@ var ToasterAlert = ({ props }) => {
         closable(e);
       }
     },
-    /* @__PURE__ */ React14.createElement(Icon_native_default, { name: "tri-times" /* TIMES */, size: "small" /* SMALL */ })
+    /* @__PURE__ */ React13.createElement(Icon_native_default, { name: "tri-times" /* TIMES */, size: "small" /* SMALL */ })
   )))));
 };
 var ToasterAlertProvider = ({ children }) => {
   const toastConfig = {
     tomatoToast: ToasterAlert
   };
-  return /* @__PURE__ */ React14.createElement(context_default.Provider, { value: { show: showToast, hide: import_react_native_toast_message.default.hide } }, children, /* @__PURE__ */ React14.createElement(import_react_native_toast_message.default, { config: toastConfig }));
+  return /* @__PURE__ */ React13.createElement(context_default.Provider, { value: { show: showToast, hide: import_react_native_toast_message.default.hide } }, children, /* @__PURE__ */ React13.createElement(import_react_native_toast_message.default, { config: toastConfig }));
 };
 Alert.displayName = "Alert" /* Alert */;
 var Alert_native_default = Alert;