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

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

@@ -89,6 +89,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"],
@@ -172,6 +173,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",
@@ -226,7 +233,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: styles3.iconContainer, ...others }, /* @__PURE__ */ import_react4.default.createElement(
           import_css.WithLocalSvg,
           {
             style: [styles3.icon, style],
@@ -267,24 +274,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 */)):
@@ -304,7 +298,7 @@ var setTypographyColor = (typo = "", inverted = false, loading = false) => {
 };
 
 // components/modal/Modal.native.tsx
-var import_react12 = __toESM(require("react"));
+var import_react11 = __toESM(require("react"));
 var import_react_native6 = require("react-native");
 var import_react_native_modal = __toESM(require("react-native-modal"));
 
@@ -312,22 +306,34 @@ var import_react_native_modal = __toESM(require("react-native-modal"));
 var ColumnsGapValue = [0, 4, 8, 12, 16, 24, 32, 40, 48, 54, 62];
 
 // components/columns/context/index.tsx
-var import_react7 = __toESM(require("react"));
-var ColumnsContext = import_react7.default.createContext({
+var import_react6 = __toESM(require("react"));
+var defaultContextValue2 = {
   scrollable: false,
   width: 0,
   realGap: 16,
   childrensLength: 1
-});
+};
+var ColumnsContext = import_react6.default.createContext(defaultContextValue2);
 
 // components/columns/Columns.native.tsx
-var import_react8 = __toESM(require("react"));
+var import_react7 = __toESM(require("react"));
 var import_react_native3 = require("react-native");
-var Columns = import_react8.default.forwardRef(
+var staticStyles = import_react_native3.StyleSheet.create({
+  centered: {
+    justifyContent: "center"
+  },
+  multiline: {
+    flexWrap: "wrap"
+  },
+  mobile: {
+    flexDirection: "column"
+  }
+});
+var Columns = import_react7.default.forwardRef(
   ({ children, align, gap, verticalAlign, fullBleed, scrollable, multiline, fullheight, ...others }, ref) => {
-    const [width, setWidth] = (0, import_react8.useState)(0);
-    const [enlarge, setEnlarge] = (0, import_react8.useState)(0);
-    const onLayoutHandler = import_react8.default.useCallback(
+    const [width, setWidth] = (0, import_react7.useState)(0);
+    const [enlarge, setEnlarge] = (0, import_react7.useState)(0);
+    const onLayoutHandler = import_react7.default.useCallback(
       (event) => {
         if (!width) {
           const { width: width2 } = event.nativeEvent.layout;
@@ -339,206 +345,215 @@ var Columns = import_react8.default.forwardRef(
       },
       [fullBleed, width]
     );
-    const realGap = import_react8.default.useMemo(() => typeof gap === "undefined" && 16 || ColumnsGapValue[gap], [gap]);
-    const styles3 = import_react_native3.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
-      },
-      mobile: {
-        flexDirection: "column"
-      }
-    });
-    return /* @__PURE__ */ import_react8.default.createElement(
-      ColumnsContext.Provider,
-      {
-        value: {
-          width,
-          realGap,
-          scrollable: scrollable || false,
-          childrensLength: import_react8.default.Children.count(children)
-        }
-      },
-      !scrollable && /* @__PURE__ */ import_react8.default.createElement(
-        import_react_native3.View,
-        {
-          ref,
-          onLayout: onLayoutHandler,
-          style: [
-            styles3.columns,
-            multiline && styles3.multiline,
-            align === "ALIGNED_CENTER" /* ALIGNED_CENTER */ && styles3.centered,
-            verticalAlign && styles3.verticalAlign
-          ],
-          ...others
+    const realGap = import_react7.default.useMemo(() => typeof gap === "undefined" && 16 || ColumnsGapValue[gap], [gap]);
+    const dynamicStyles = import_react7.default.useMemo(
+      () => ({
+        columns: {
+          width: fullBleed && width ? width + enlarge * 2 : "100%",
+          marginHorizontal: -enlarge,
+          paddingHorizontal: enlarge,
+          flexDirection: "row",
+          gap: realGap,
+          height: fullheight ? "100%" : "auto"
         },
-        children
-      ),
-      scrollable && /* @__PURE__ */ import_react8.default.createElement(
-        import_react_native3.View,
-        {
-          onLayout: onLayoutHandler,
-          style: {
-            marginHorizontal: -enlarge
-          }
+        verticalAlign: {
+          alignItems: getAlignStyle(verticalAlign)
         },
-        /* @__PURE__ */ import_react8.default.createElement(
-          import_react_native3.ScrollView,
-          {
-            horizontal: true,
-            contentContainerStyle: styles3.scrollContainer,
-            showsHorizontalScrollIndicator: false
-          },
-          children
-        )
-      )
-    );
-  }
-);
-Columns.displayName = "Columns" /* Columns */;
-var Columns_native_default = Columns;
-
-// components/columns/column/Column.native.tsx
-var import_react9 = __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
+        scrollContainer: {
+          paddingHorizontal: enlarge,
+          gap: realGap
+        }
       }),
-      [size, narrow, width, realGap, childrensLength]
+      [fullBleed, width, enlarge, realGap, fullheight, verticalAlign]
     );
-    const noScrollableStyle = import_react9.default.useMemo(
+    const contextValue = import_react7.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"
+        width,
+        realGap,
+        scrollable: scrollable || false,
+        childrensLength: import_react7.default.Children.count(children)
       }),
-      [size, narrow, width, realGap, childrensLength]
+      [width, realGap, scrollable, children]
     );
-    return /* @__PURE__ */ import_react9.default.createElement(
-      import_react_native4.View,
+    return /* @__PURE__ */ import_react7.default.createElement(ColumnsContext.Provider, { value: contextValue }, !scrollable && /* @__PURE__ */ import_react7.default.createElement(
+      import_react_native3.View,
       {
         ref,
+        onLayout: onLayoutHandler,
         style: [
-          scrollable && scrollableStyle,
-          !scrollable && noScrollableStyle,
-          { justifyContent: getAlignStyle(verticalAlign) }
+          dynamicStyles.columns,
+          multiline && staticStyles.multiline,
+          align === "ALIGNED_CENTER" /* ALIGNED_CENTER */ && staticStyles.centered,
+          verticalAlign && dynamicStyles.verticalAlign
         ],
         ...others
       },
       children
-    );
+    ), scrollable && /* @__PURE__ */ import_react7.default.createElement(
+      import_react_native3.View,
+      {
+        onLayout: onLayoutHandler,
+        style: {
+          marginHorizontal: -enlarge
+        }
+      },
+      /* @__PURE__ */ import_react7.default.createElement(
+        import_react_native3.ScrollView,
+        {
+          horizontal: true,
+          contentContainerStyle: dynamicStyles.scrollContainer,
+          showsHorizontalScrollIndicator: false
+        },
+        children
+      )
+    ));
   }
 );
+Columns.displayName = "Columns" /* Columns */;
+var Columns_native_default = Columns;
+
+// components/columns/column/Column.native.tsx
+var import_react8 = __toESM(require("react"));
+var import_react_native4 = require("react-native");
+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/title/Title.native.tsx
-var React7 = __toESM(require("react"));
-var import_react10 = require("react");
+var React6 = __toESM(require("react"));
+var import_react9 = require("react");
 var import_native2 = __toESM(require("react-content-loader/native"));
 var import_react_native5 = require("react-native");
-var Title = React7.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";
-      }
-    };
-    const styles3 = import_react_native5.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__ */ React7.createElement(
-      import_react_native5.Text,
-      {
-        ref,
-        maxFontSizeMultiplier: 1.3,
-        accessible: !!titleAccessibilityLabel,
-        accessibilityLabel: titleAccessibilityLabel,
-        style: [styles3.text, style],
-        ...others
-      },
-      children
-    );
-    if (skeleton) {
-      titleView = /* @__PURE__ */ React7.createElement(import_native2.default, { style: styles3.skeleton }, titleView, isAndroid && /* @__PURE__ */ React7.createElement(import_react_native5.View, null, /* @__PURE__ */ React7.createElement(import_native2.Rect, { rx: "15", ry: "15", width: "100%", height: "100%" })));
+var Title = React6.forwardRef(({
+  children,
+  level,
+  style,
+  inverted,
+  typo,
+  onClick,
+  skeleton,
+  accessibilityLabel,
+  subtitle,
+  overline,
+  ...others
+}, ref) => {
+  const statesContext = (0, import_react9.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 styles3 = import_react_native5.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()
     }
-    return onClick ? /* @__PURE__ */ React7.createElement(import_react_native5.TouchableOpacity, { onPress: onClick, activeOpacity: 0.85 }, titleView) : titleView;
+  });
+  const titleAccessibilityLabel = accessibilityLabel ? accessibilityLabel : typeof children === "string" ? children : void 0;
+  let titleView = /* @__PURE__ */ React6.createElement(
+    import_react_native5.Text,
+    {
+      ref,
+      maxFontSizeMultiplier: 1.3,
+      accessible: !!titleAccessibilityLabel,
+      accessibilityLabel: titleAccessibilityLabel,
+      style: [styles3.text, style],
+      ...others
+    },
+    children
+  );
+  if (skeleton) {
+    titleView = /* @__PURE__ */ React6.createElement(import_native2.default, { style: styles3.skeleton }, titleView, isAndroid && /* @__PURE__ */ React6.createElement(import_react_native5.View, null, /* @__PURE__ */ React6.createElement(import_native2.Rect, { rx: "15", ry: "15", width: "100%", height: "100%" })));
   }
-);
+  return onClick ? /* @__PURE__ */ React6.createElement(import_react_native5.TouchableOpacity, { onPress: onClick, activeOpacity: 0.85 }, titleView) : titleView;
+});
 Title.displayName = "Title" /* Title */;
 var Title_native_default = Title;
 
 // components/modal/context/ModalContext.tsx
-var import_react11 = __toESM(require("react"));
-var ModalContext = import_react11.default.createContext({
+var import_react10 = __toESM(require("react"));
+var ModalContext = import_react10.default.createContext({
   scrollViewRef: null,
   handleOnScroll: () => null,
   isFooter: false,
@@ -546,7 +561,7 @@ var ModalContext = import_react11.default.createContext({
 });
 
 // components/modal/Modal.native.tsx
-var Modal = import_react12.default.forwardRef(
+var Modal = import_react11.default.forwardRef(
   ({
     children,
     active = false,
@@ -558,10 +573,10 @@ var Modal = import_react12.default.forwardRef(
     title,
     ...others
   }, ref) => {
-    const scrollViewRef = (0, import_react12.useRef)(null);
-    const [scrollOffset, setScrollOffset] = (0, import_react12.useState)(0);
-    const [visible, setVisible] = (0, import_react12.useState)(active || false);
-    const [isFooter, setIsFooter] = (0, import_react12.useState)(active || false);
+    const scrollViewRef = (0, import_react11.useRef)(null);
+    const [scrollOffset, setScrollOffset] = (0, import_react11.useState)(0);
+    const [visible, setVisible] = (0, import_react11.useState)(active || false);
+    const [isFooter, setIsFooter] = (0, import_react11.useState)(active || false);
     const handleOnScroll = (event) => {
       setScrollOffset(event.nativeEvent.contentOffset.y);
     };
@@ -572,15 +587,15 @@ var Modal = import_react12.default.forwardRef(
       if (onClose) onClose(e);
       setVisible(false);
     };
-    (0, import_react12.useEffect)(() => {
+    (0, import_react11.useEffect)(() => {
       setVisible(active);
     }, [active]);
-    return /* @__PURE__ */ import_react12.default.createElement(ModalContext.Provider, { value: { scrollViewRef, handleOnScroll, isFooter, setIsFooter } }, trigger, /* @__PURE__ */ import_react12.default.createElement(
+    return /* @__PURE__ */ import_react11.default.createElement(ModalContext.Provider, { value: { scrollViewRef, handleOnScroll, isFooter, setIsFooter } }, trigger, /* @__PURE__ */ import_react11.default.createElement(
       import_react_native_modal.default,
       {
         isVisible: visible,
-        onBackdropPress: () => handleClose({}),
-        onSwipeComplete: handleClose,
+        onBackdropPress: unClosable ? void 0 : () => handleClose({}),
+        onSwipeComplete: unClosable ? void 0 : handleClose,
         swipeDirection: unClosable ? void 0 : ["down"],
         scrollTo: handleScrollTo,
         scrollOffset,
@@ -590,7 +605,7 @@ var Modal = import_react12.default.forwardRef(
         onModalHide,
         ...others
       },
-      /* @__PURE__ */ import_react12.default.createElement(import_react_native6.View, { ref, style: [styles.body, { backgroundColor: getColorStyle("WHITE" /* BACKGROUND */) }] }, /* @__PURE__ */ import_react12.default.createElement(import_react_native6.View, { style: { paddingVertical: !title && hideCloseButton ? 8 : 16 } }, /* @__PURE__ */ import_react12.default.createElement(Columns_native_default, { verticalAlign: "ALIGNED_CENTER" /* ALIGNED_CENTER */ }, /* @__PURE__ */ import_react12.default.createElement(Column_native_default, null, /* @__PURE__ */ import_react12.default.createElement(Title_native_default, { level: 4 }, title)), !hideCloseButton && /* @__PURE__ */ import_react12.default.createElement(Column_native_default, { narrow: true }, /* @__PURE__ */ import_react12.default.createElement(import_react_native6.TouchableOpacity, { onPress: handleClose }, /* @__PURE__ */ import_react12.default.createElement(Icon_native_default, { name: "tri-times" /* TIMES */, size: "medium" /* MEDIUM */, color: "MAIN" /* MAIN */ }))))), children)
+      /* @__PURE__ */ import_react11.default.createElement(import_react_native6.View, { ref, style: [styles.body, { backgroundColor: getColorStyle("WHITE" /* BACKGROUND */) }] }, /* @__PURE__ */ import_react11.default.createElement(import_react_native6.View, { style: { paddingVertical: !title && (hideCloseButton || unClosable) ? 8 : 16 } }, /* @__PURE__ */ import_react11.default.createElement(Columns_native_default, { verticalAlign: "ALIGNED_CENTER" /* ALIGNED_CENTER */ }, /* @__PURE__ */ import_react11.default.createElement(Column_native_default, null, /* @__PURE__ */ import_react11.default.createElement(Title_native_default, { level: 4 }, title)), !hideCloseButton && !unClosable && /* @__PURE__ */ import_react11.default.createElement(Column_native_default, { narrow: true }, /* @__PURE__ */ import_react11.default.createElement(import_react_native6.TouchableOpacity, { onPress: handleClose }, /* @__PURE__ */ import_react11.default.createElement(Icon_native_default, { name: "tri-times" /* TIMES */, size: "medium" /* MEDIUM */, color: "MAIN" /* MAIN */ }))))), children)
     ));
   }
 );
@@ -618,11 +633,11 @@ var styles = import_react_native6.StyleSheet.create({
 });
 
 // components/modal/body/ModalBody.native.tsx
-var React10 = __toESM(require("react"));
+var React9 = __toESM(require("react"));
 var import_react_native7 = require("react-native");
-var ModalBody = React10.forwardRef(({ children, ...others }, ref) => {
-  const { handleOnScroll, scrollViewRef, isFooter } = React10.useContext(ModalContext);
-  return /* @__PURE__ */ React10.createElement(
+var ModalBody = React9.forwardRef(({ children, ...others }, ref) => {
+  const { handleOnScroll, scrollViewRef, isFooter } = React9.useContext(ModalContext);
+  return /* @__PURE__ */ React9.createElement(
     import_react_native7.ScrollView,
     {
       ref: scrollViewRef,
@@ -630,7 +645,7 @@ var ModalBody = React10.forwardRef(({ children, ...others }, ref) => {
       onScroll: handleOnScroll,
       showsVerticalScrollIndicator: false
     },
-    /* @__PURE__ */ React10.createElement(
+    /* @__PURE__ */ React9.createElement(
       import_react_native7.View,
       {
         ref,
@@ -651,20 +666,18 @@ ModalBody.displayName = "ModalBody" /* ModalBody */;
 var ModalBody_native_default = ModalBody;
 
 // components/modal/footer/ModalFooter.native.tsx
-var React11 = __toESM(require("react"));
+var React10 = __toESM(require("react"));
 var import_react_native8 = require("react-native");
-var ModalFooter = React11.forwardRef(
-  ({ children, ...others }, ref) => {
-    const { setIsFooter } = React11.useContext(ModalContext);
-    React11.useEffect(() => {
-      setIsFooter(true);
-      return () => {
-        setIsFooter(false);
-      };
-    }, []);
-    return /* @__PURE__ */ React11.createElement(import_react_native8.View, { ref, style: [styles2.container], ...others }, /* @__PURE__ */ React11.createElement(import_react_native8.View, { style: [{ backgroundColor: getColorStyle("WHITE" /* BACKGROUND */) }] }, typeof children === "string" && /* @__PURE__ */ React11.createElement(Title_native_default, { level: 3 /* THREE */, style: styles2.title }, children) || children));
-  }
-);
+var ModalFooter = React10.forwardRef(({ children, ...others }, ref) => {
+  const { setIsFooter } = React10.useContext(ModalContext);
+  React10.useEffect(() => {
+    setIsFooter(true);
+    return () => {
+      setIsFooter(false);
+    };
+  }, []);
+  return /* @__PURE__ */ React10.createElement(import_react_native8.View, { ref, style: [styles2.container], ...others }, /* @__PURE__ */ React10.createElement(import_react_native8.View, { style: [{ backgroundColor: getColorStyle("WHITE" /* BACKGROUND */) }] }, typeof children === "string" && /* @__PURE__ */ React10.createElement(Title_native_default, { level: 3 /* THREE */, style: styles2.title }, children) || children));
+});
 ModalFooter.displayName = "ModalFooter" /* ModalFooter */;
 var ModalFooter_native_default = ModalFooter;
 var styles2 = import_react_native8.StyleSheet.create({