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

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

@@ -52,6 +52,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"],
@@ -193,6 +194,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",
@@ -247,7 +254,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: styles4.iconContainer, ...others }, /* @__PURE__ */ import_react4.default.createElement(
           import_css.WithLocalSvg,
           {
             style: [styles4.icon, style],
@@ -279,24 +286,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 */)):
@@ -316,56 +310,64 @@ var setTypographyColor = (typo = "", inverted = false, loading = false) => {
 };
 
 // components/text/Text.native.tsx
-var import_react7 = __toESM(require("react"));
+var import_react6 = __toESM(require("react"));
 var import_native2 = __toESM(require("react-content-loader/native"));
 var import_react_native3 = require("react-native");
-var Text = import_react7.default.forwardRef(
-  ({ children, level, style, inverted, typo, skeleton, accessibilityLabel, numberOfLines = 0, ...others }, ref) => {
-    const statesContext = (0, import_react7.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 styles4 = import_react_native3.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_react7.default.createElement(
-      import_react_native3.Text,
-      {
-        ref,
-        numberOfLines,
-        ellipsizeMode: "tail",
-        maxFontSizeMultiplier: 1.3,
-        accessible: !!textAccessibilityLabel,
-        accessibilityLabel: textAccessibilityLabel,
-        style: [styles4.text, style],
-        ...others
-      },
-      children
-    );
-    if (skeleton) {
-      textView = /* @__PURE__ */ import_react7.default.createElement(import_native2.default, { style: styles4.skeleton }, textView, isAndroid && /* @__PURE__ */ import_react7.default.createElement(import_react_native3.View, null, /* @__PURE__ */ import_react7.default.createElement(import_native2.Rect, { rx: "7", ry: "7", width: "100%", height: "100%" })));
+var Text = import_react6.default.forwardRef(({
+  children,
+  level,
+  style,
+  inverted,
+  typo,
+  skeleton,
+  accessibilityLabel,
+  numberOfLines = 0,
+  ...others
+}, ref) => {
+  const statesContext = (0, import_react6.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 styles4 = import_react_native3.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_react6.default.createElement(
+    import_react_native3.Text,
+    {
+      ref,
+      numberOfLines,
+      ellipsizeMode: "tail",
+      maxFontSizeMultiplier: 1.3,
+      accessible: !!textAccessibilityLabel,
+      accessibilityLabel: textAccessibilityLabel,
+      style: [styles4.text, style],
+      ...others
+    },
+    children
+  );
+  if (skeleton) {
+    textView = /* @__PURE__ */ import_react6.default.createElement(import_native2.default, { style: styles4.skeleton }, textView, isAndroid && /* @__PURE__ */ import_react6.default.createElement(import_react_native3.View, null, /* @__PURE__ */ import_react6.default.createElement(import_native2.Rect, { rx: "7", ry: "7", width: "100%", height: "100%" })));
   }
-);
+  return textView;
+});
 Text.displayName = "Text" /* Text */;
 var Text_native_default = Text;
 
@@ -379,20 +381,20 @@ var STATUS_COLORS = {
 };
 
 // components/input/Input.native.tsx
-var import_react10 = __toESM(require("react"));
+var import_react9 = __toESM(require("react"));
 var import_react_native6 = require("react-native");
 
 // components/spacer/Spacer.native.tsx
-var React5 = __toESM(require("react"));
+var React4 = __toESM(require("react"));
 var import_react_native4 = require("react-native");
-var Spacer = React5.forwardRef(({ size, horizontal }, ref) => {
+var Spacer = React4.forwardRef(({ size, horizontal }, ref) => {
   const styles4 = import_react_native4.StyleSheet.create({
     spacer: {
       marginLeft: horizontal && parseInt(size.toString()) || 0,
       marginTop: !horizontal && parseInt(size.toString()) || 0
     }
   });
-  return /* @__PURE__ */ React5.createElement(import_react_native4.View, { ref, style: styles4.spacer });
+  return /* @__PURE__ */ React4.createElement(import_react_native4.View, { ref, style: styles4.spacer });
 });
 Spacer.displayName = "Spacer" /* Spacer */;
 var Spacer_native_default = Spacer;
@@ -415,39 +417,55 @@ var SpacerSize = /* @__PURE__ */ ((SpacerSize2) => {
 var SpacerSizeValues = `${SpacerSize}`;
 
 // components/input/gauge/InputGauge.native.tsx
-var import_react9 = __toESM(require("react"));
+var import_react8 = __toESM(require("react"));
 var import_react_native5 = require("react-native");
 
 // components/input/gauge/hook/useGauge.native.tsx
-var import_react8 = __toESM(require("react"));
-var useGauge = ({ validationRules, inputValue }) => {
+var import_react7 = __toESM(require("react"));
+var useGauge = ({ validationRules, inputValue, securityRules }) => {
   var _a, _b;
-  const [points, setPoints] = import_react8.default.useState(0);
+  const [points, setPoints] = import_react7.default.useState(0);
   const initStateVerifies = { isVerify: false, color: "NEUTRAL" /* NEUTRAL */ };
-  const [isLengthVerify, setIsLengthVerify] = import_react8.default.useState(initStateVerifies);
-  const [isSpecialCharsVerify, setIsSpecialCharsVerify] = import_react8.default.useState(initStateVerifies);
-  const [isNumberVerify, setIsNumberVerify] = import_react8.default.useState(initStateVerifies);
-  const [isUppercaseVerify, setIsUppercaseVerify] = import_react8.default.useState(initStateVerifies);
-  const [isLowerercaseVerify, setisLowerercaseVerify] = import_react8.default.useState(initStateVerifies);
-  const nbAllVerifies = import_react8.default.useMemo(
-    () => validationRules && Object.values(validationRules).filter((rule) => rule).length || 0,
-    [validationRules]
+  const [isLengthVerify, setIsLengthVerify] = import_react7.default.useState(initStateVerifies);
+  const [isSpecialCharsVerify, setIsSpecialCharsVerify] = import_react7.default.useState(initStateVerifies);
+  const [isNumberVerify, setIsNumberVerify] = import_react7.default.useState(initStateVerifies);
+  const [isUppercaseVerify, setIsUppercaseVerify] = import_react7.default.useState(initStateVerifies);
+  const [isLowerercaseVerify, setisLowerercaseVerify] = import_react7.default.useState(initStateVerifies);
+  const nbAllVerifies = import_react7.default.useMemo(
+    () => validationRules && Object.values(validationRules).filter((rule) => rule).length || securityRules && securityRules.length || 0,
+    [validationRules, securityRules]
+  );
+  const rules = import_react7.default.useMemo(
+    () => securityRules && securityRules.map(({ label, patternValidator, dataAttribute }) => ({
+      label,
+      validate: !!(patternValidator == null ? void 0 : patternValidator.test(inputValue)),
+      dataAttribute
+    })),
+    [inputValue, securityRules]
   );
-  const widthGauge = import_react8.default.useMemo(() => {
-    const calc = Number((points / nbAllVerifies * 100).toFixed(0));
-    if (calc <= 50 && calc > 0) return "50%";
-    if (calc <= 99 && calc > 50) return "75%";
-    if (calc === 100) return "100%";
+  const calcPoints = import_react7.default.useMemo(() => {
+    if (validationRules) {
+      return Number((points / nbAllVerifies * 100).toFixed(0));
+    }
+    if (securityRules) {
+      const pts = (rules == null ? void 0 : rules.filter((rule) => rule.validate).length) || 0;
+      return Number((pts / nbAllVerifies * 100).toFixed(0));
+    }
+    return 0;
+  }, [points, nbAllVerifies, rules, validationRules, securityRules]);
+  const widthGauge = import_react7.default.useMemo(() => {
+    if (calcPoints <= 50 && calcPoints > 0) return "50%";
+    if (calcPoints <= 99 && calcPoints > 50) return "75%";
+    if (calcPoints === 100) return "100%";
     return "0%";
-  }, [points, nbAllVerifies]);
+  }, [calcPoints, nbAllVerifies]);
   const colorGauge = () => {
-    const calc = Number((points / nbAllVerifies * 100).toFixed(0));
-    if (calc <= 50 && calc > 0) return getColorStyle("ERROR" /* ERROR */);
-    if (calc <= 99 && calc > 50) return getColorStyle("WARNING" /* WARNING */);
-    if (calc === 100) return getColorStyle("SUCCESS" /* SUCCESS */);
+    if (calcPoints <= 50 && calcPoints > 0) return getColorStyle("ERROR" /* ERROR */);
+    if (calcPoints <= 99 && calcPoints > 50) return getColorStyle("WARNING" /* WARNING */);
+    if (calcPoints === 100) return getColorStyle("SUCCESS" /* SUCCESS */);
     return getColorStyle("NEUTRAL_FADE" /* NEUTRAL_FADE */);
   };
-  const LengthvalidationRulesText = (0, import_react8.useMemo)(() => {
+  const LengthvalidationRulesText = (0, import_react7.useMemo)(() => {
     var _a2, _b2, _c, _d, _e, _f, _g, _h, _i, _j;
     switch (true) {
       case (((_a2 = validationRules == null ? void 0 : validationRules.length) == null ? void 0 : _a2.min) !== void 0 && ((_b2 = validationRules == null ? void 0 : validationRules.length) == null ? void 0 : _b2.max) !== void 0):
@@ -460,7 +478,7 @@ var useGauge = ({ validationRules, inputValue }) => {
         return "";
     }
   }, [(_a = validationRules == null ? void 0 : validationRules.length) == null ? void 0 : _a.min, (_b = validationRules == null ? void 0 : validationRules.length) == null ? void 0 : _b.max]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     var _a2, _b2;
     const min = ((_a2 = validationRules == null ? void 0 : validationRules.length) == null ? void 0 : _a2.min) || 0;
     const max = ((_b2 = validationRules == null ? void 0 : validationRules.length) == null ? void 0 : _b2.max) || "";
@@ -485,12 +503,14 @@ var useGauge = ({ validationRules, inputValue }) => {
     isLowerercaseVerify,
     isNumberVerify,
     isSpecialCharsVerify,
-    isUppercaseVerify
+    isUppercaseVerify,
+    rules
   };
 };
 
 // components/input/gauge/InputGauge.native.tsx
-var InputGauge = ({ validationRules, inputValue }) => {
+var InputGauge = ({ validationRules, inputValue, securityRules }) => {
+  const id = (0, import_react8.useId)();
   const {
     widthGauge,
     colorGauge,
@@ -499,67 +519,90 @@ var InputGauge = ({ validationRules, inputValue }) => {
     isLowerercaseVerify,
     isNumberVerify,
     isSpecialCharsVerify,
-    isUppercaseVerify
-  } = useGauge({ validationRules, inputValue });
-  return /* @__PURE__ */ import_react9.default.createElement(import_react_native5.View, null, /* @__PURE__ */ import_react9.default.createElement(import_react_native5.View, { style: [styles.containerGauge, { backgroundColor: getColorStyle("MAIN_FADE" /* MAIN_FADE */) }] }, /* @__PURE__ */ import_react9.default.createElement(import_react_native5.View, { style: [styles.gauge, { width: widthGauge, backgroundColor: colorGauge() }] })), /* @__PURE__ */ import_react9.default.createElement(import_react_native5.View, { style: styles.verifies }, /* @__PURE__ */ import_react9.default.createElement(import_react_native5.View, null, /* @__PURE__ */ import_react9.default.createElement(
+    isUppercaseVerify,
+    rules
+  } = useGauge({ validationRules, inputValue, securityRules });
+  return /* @__PURE__ */ import_react8.default.createElement(import_react_native5.View, null, /* @__PURE__ */ import_react8.default.createElement(import_react_native5.View, { style: [styles.containerGauge, { backgroundColor: getColorStyle("MAIN_FADE" /* MAIN_FADE */) }] }, /* @__PURE__ */ import_react8.default.createElement(import_react_native5.View, { style: [styles.gauge, { width: widthGauge, backgroundColor: colorGauge() }] })), /* @__PURE__ */ import_react8.default.createElement(import_react_native5.View, { style: styles.verifies }, validationRules && /* @__PURE__ */ import_react8.default.createElement(import_react8.default.Fragment, null, /* @__PURE__ */ import_react8.default.createElement(
     DataVerify,
     {
       display: !!(validationRules == null ? void 0 : validationRules.length),
       color: isLengthVerify.color,
       iconName: isLengthVerify.isVerify ? "tri-check-circle" /* CHECK_CIRCLE */ : "tri-times" /* TIMES */,
-      type: LengthvalidationRulesText
+      type: LengthvalidationRulesText,
+      index: 1
+    }
+  ), /* @__PURE__ */ import_react8.default.createElement(
+    DataVerify,
+    {
+      display: !!(validationRules == null ? void 0 : validationRules.uppercase),
+      color: isUppercaseVerify.color,
+      iconName: isUppercaseVerify.isVerify ? "tri-check-circle" /* CHECK_CIRCLE */ : "tri-times" /* TIMES */,
+      type: "Majuscule",
+      index: 2
     }
-  ), /* @__PURE__ */ import_react9.default.createElement(
+  ), /* @__PURE__ */ import_react8.default.createElement(
     DataVerify,
     {
       display: !!(validationRules == null ? void 0 : validationRules.specialChars),
       color: isSpecialCharsVerify.color,
       iconName: isSpecialCharsVerify.isVerify ? "tri-check-circle" /* CHECK_CIRCLE */ : "tri-times" /* TIMES */,
-      type: "Caract\xE8res sp\xE9ciaux"
+      type: "Caract\xE8res sp\xE9ciaux",
+      index: 3
     }
-  ), /* @__PURE__ */ import_react9.default.createElement(
+  ), /* @__PURE__ */ import_react8.default.createElement(
     DataVerify,
     {
-      display: !!(validationRules == null ? void 0 : validationRules.number),
-      color: isNumberVerify.color,
-      iconName: isNumberVerify.isVerify ? "tri-check-circle" /* CHECK_CIRCLE */ : "tri-times" /* TIMES */,
-      type: "Chiffre"
+      display: !!(validationRules == null ? void 0 : validationRules.lowercase),
+      color: isLowerercaseVerify.color,
+      iconName: isLowerercaseVerify.isVerify ? "tri-check-circle" /* CHECK_CIRCLE */ : "tri-times" /* TIMES */,
+      type: "Minuscule",
+      index: 4
     }
-  )), /* @__PURE__ */ import_react9.default.createElement(import_react_native5.View, null, /* @__PURE__ */ import_react9.default.createElement(
+  ), /* @__PURE__ */ import_react8.default.createElement(
     DataVerify,
     {
-      display: !!(validationRules == null ? void 0 : validationRules.uppercase),
-      color: isUppercaseVerify.color,
-      iconName: isUppercaseVerify.isVerify ? "tri-check-circle" /* CHECK_CIRCLE */ : "tri-times" /* TIMES */,
-      type: "Majuscule"
+      display: !!(validationRules == null ? void 0 : validationRules.number),
+      color: isNumberVerify.color,
+      iconName: isNumberVerify.isVerify ? "tri-check-circle" /* CHECK_CIRCLE */ : "tri-times" /* TIMES */,
+      type: "Chiffre",
+      index: 5
     }
-  ), /* @__PURE__ */ import_react9.default.createElement(
+  )), securityRules && rules && rules.map((rule, index) => /* @__PURE__ */ import_react8.default.createElement(
     DataVerify,
     {
-      display: !!(validationRules == null ? void 0 : validationRules.lowercase),
-      color: isLowerercaseVerify.color,
-      iconName: isLowerercaseVerify.isVerify ? "tri-check-circle" /* CHECK_CIRCLE */ : "tri-times" /* TIMES */,
-      type: "Minuscule"
+      index: index + 1,
+      key: `${id}_${rule.label}`,
+      display: true,
+      type: rule.label,
+      color: rule.validate ? "SUCCESS" /* SUCCESS */ : "NEUTRAL" /* NEUTRAL */,
+      iconName: rule.validate ? "tri-check-circle" /* CHECK_CIRCLE */ : "tri-times" /* TIMES */
     }
   ))));
 };
-var DataVerify = ({ color, iconName, display, type }) => {
+var DataVerify = ({ color, iconName, display, type, index }) => {
   if (!display) return null;
-  return /* @__PURE__ */ import_react9.default.createElement(import_react_native5.View, { style: styles.verify }, /* @__PURE__ */ import_react9.default.createElement(Icon_native_default, { color, name: iconName, size: "smaller" /* SMALLER */ }), /* @__PURE__ */ import_react9.default.createElement(Text_native_default, { style: styles.textVerify }, type));
+  return /* @__PURE__ */ import_react8.default.createElement(import_react_native5.View, { style: [styles.verify, index % 2 === 0 ? styles.even : void 0] }, /* @__PURE__ */ import_react8.default.createElement(Icon_native_default, { color, name: iconName, size: "smaller" /* SMALLER */ }), /* @__PURE__ */ import_react8.default.createElement(Text_native_default, { style: styles.textVerify }, type));
 };
 var InputGauge_native_default = InputGauge;
 var styles = import_react_native5.StyleSheet.create({
+  even: {
+    justifyContent: "flex-end"
+  },
   verify: {
     flexDirection: "row",
     alignItems: "center",
-    marginBottom: 4
+    marginBottom: 4,
+    flexBasis: "50%",
+    flexGrow: 0,
+    flexShrink: 1
   },
   textVerify: {
     marginLeft: 8
   },
   verifies: {
     flexDirection: "row",
-    justifyContent: "space-between"
+    justifyContent: "space-between",
+    flexWrap: "wrap"
   },
   containerGauge: {
     height: 4,
@@ -574,7 +617,7 @@ var styles = import_react_native5.StyleSheet.create({
 });
 
 // components/input/Input.native.tsx
-var Input = import_react10.default.forwardRef(
+var Input = import_react9.default.forwardRef(
   ({
     defaultValue,
     name,
@@ -602,6 +645,7 @@ var Input = import_react10.default.forwardRef(
     iconNameLeft,
     iconNameRight,
     securityGauge,
+    securityRules,
     validationRules,
     onIconClick,
     required,
@@ -617,14 +661,14 @@ var Input = import_react10.default.forwardRef(
     inputIcon.set("success" /* SUCCESS */, "tri-check-circle" /* CHECK_CIRCLE */);
     inputIcon.set("warning" /* WARNING */, "tri-exclamation-circle" /* EXCLAMATION_CIRCLE */);
     inputIcon.set("error" /* ERROR */, "tri-exclamation-circle" /* EXCLAMATION_CIRCLE */);
-    const [value, setValue] = (0, import_react10.useState)(defaultValue || "");
-    const [email, setEmail] = (0, import_react10.useState)("");
-    const [isFocused, setIsFocused] = (0, import_react10.useState)(false);
-    const [iconPassword, setIconPassword] = (0, import_react10.useState)("tri-eye" /* EYE */);
-    const [dynamicPlaceholder, setDynamicPlaceholder] = (0, import_react10.useState)(false);
-    const [isKeyboardVisible, setKeyboardVisible] = (0, import_react10.useState)(null);
-    const animation = (0, import_react10.useRef)(new import_react_native6.Animated.Value(25)).current;
-    const sizeAnimation = (0, import_react10.useRef)(new import_react_native6.Animated.Value(placeholderDefaultSize)).current;
+    const [value, setValue] = (0, import_react9.useState)(defaultValue || "");
+    const [email, setEmail] = (0, import_react9.useState)("");
+    const [isFocused, setIsFocused] = (0, import_react9.useState)(false);
+    const [iconPassword, setIconPassword] = (0, import_react9.useState)("tri-eye" /* EYE */);
+    const [dynamicPlaceholder, setDynamicPlaceholder] = (0, import_react9.useState)(false);
+    const [isKeyboardVisible, setKeyboardVisible] = (0, import_react9.useState)(null);
+    const animation = (0, import_react9.useRef)(new import_react_native6.Animated.Value(25)).current;
+    const sizeAnimation = (0, import_react9.useRef)(new import_react_native6.Animated.Value(placeholderDefaultSize)).current;
     const paddingTopByPlatform = (os, dynamicPlaceholder2) => {
       if (dynamicPlaceholder2 && type !== "search" /* SEARCH */ && os === "ios") {
         return 10;
@@ -634,7 +678,7 @@ var Input = import_react10.default.forwardRef(
       }
       return 0;
     };
-    const handleChange = (0, import_react10.useCallback)((text) => {
+    const handleChange = (0, import_react9.useCallback)((text) => {
       var _a;
       setValue(text);
       setEmail("");
@@ -656,17 +700,17 @@ var Input = import_react10.default.forwardRef(
       onSubmit == null ? void 0 : onSubmit(e);
       type === "email" /* EMAIL */ && handleClick();
     };
-    (0, import_react10.useEffect)(() => {
+    (0, import_react9.useEffect)(() => {
       setValue(defaultValue || "");
     }, [defaultValue, placeholder]);
-    (0, import_react10.useEffect)(() => {
+    (0, import_react9.useEffect)(() => {
       if (value && value.length > 0 && placeholder && placeholder.length > 0) {
         setDynamicPlaceholder(true);
       } else {
         setDynamicPlaceholder(false);
       }
     }, [placeholder, value]);
-    (0, import_react10.useEffect)(() => {
+    (0, import_react9.useEffect)(() => {
       if (dynamicPlaceholder && type !== "search" /* SEARCH */) {
         import_react_native6.Animated.timing(animation, {
           toValue: 3,
@@ -691,7 +735,7 @@ var Input = import_react10.default.forwardRef(
         }).start();
       }
     }, [dynamicPlaceholder, animation, sizeAnimation]);
-    (0, import_react10.useEffect)(() => {
+    (0, import_react9.useEffect)(() => {
       const keyboardDidShowListener = import_react_native6.Keyboard.addListener("keyboardDidShow", () => setKeyboardVisible(true));
       const keyboardDidHideListener = import_react_native6.Keyboard.addListener("keyboardDidHide", () => setKeyboardVisible(false));
       return () => {
@@ -699,7 +743,7 @@ var Input = import_react10.default.forwardRef(
         keyboardDidShowListener.remove();
       };
     }, []);
-    (0, import_react10.useEffect)(() => {
+    (0, import_react9.useEffect)(() => {
       handleClick();
     }, [isKeyboardVisible]);
     const hasIcon = iconNameLeft || iconNameRight || false;
@@ -782,7 +826,7 @@ var Input = import_react10.default.forwardRef(
         marginBottom: isIOS ? 0 : -3
       }
     });
-    return /* @__PURE__ */ import_react10.default.createElement(
+    return /* @__PURE__ */ import_react9.default.createElement(
       import_react_native6.View,
       {
         style: { width: "100%" },
@@ -790,9 +834,9 @@ var Input = import_react10.default.forwardRef(
         accessibilityLabel: inputAccessibilityLabel,
         testID: inputTestId
       },
-      !dynamicPlaceholder && label && /* @__PURE__ */ import_react10.default.createElement(import_react10.default.Fragment, null, /* @__PURE__ */ import_react10.default.createElement(Text_native_default, { typo: "has-text-main" /* TEXT_MAIN */ }, label, " ", label && required && /* @__PURE__ */ import_react10.default.createElement(Text_native_default, { typo: "has-text-error" /* TEXT_ERROR */ }, "*")), /* @__PURE__ */ import_react10.default.createElement(Spacer_native_default, { size: 12 /* THREE */ })),
-      !dynamicPlaceholder && label && sample && /* @__PURE__ */ import_react10.default.createElement(import_react10.default.Fragment, null, /* @__PURE__ */ import_react10.default.createElement(Text_native_default, { level: 3 /* THREE */, typo: "has-text-main" /* TEXT_MAIN */ }, sample), /* @__PURE__ */ import_react10.default.createElement(Spacer_native_default, { size: 12 /* THREE */ })),
-      /* @__PURE__ */ import_react10.default.createElement(import_react_native6.View, { testID: "input-wrapper-id", style: styles4.inputWrapper }, dynamicPlaceholder && type !== "search" /* SEARCH */ && /* @__PURE__ */ import_react10.default.createElement(import_react_native6.Animated.Text, { style: [styles4.dynamicPlaceholder, { top: animation, fontSize: sizeAnimation }] }, placeholder), /* @__PURE__ */ import_react10.default.createElement(
+      !dynamicPlaceholder && label && /* @__PURE__ */ import_react9.default.createElement(import_react9.default.Fragment, null, /* @__PURE__ */ import_react9.default.createElement(Text_native_default, { typo: "has-text-main" /* TEXT_MAIN */ }, label, " ", label && required && /* @__PURE__ */ import_react9.default.createElement(Text_native_default, { typo: "has-text-error" /* TEXT_ERROR */ }, "*")), /* @__PURE__ */ import_react9.default.createElement(Spacer_native_default, { size: 12 /* THREE */ })),
+      !dynamicPlaceholder && label && sample && /* @__PURE__ */ import_react9.default.createElement(import_react9.default.Fragment, null, /* @__PURE__ */ import_react9.default.createElement(Text_native_default, { level: 3 /* THREE */, typo: "has-text-main" /* TEXT_MAIN */ }, sample), /* @__PURE__ */ import_react9.default.createElement(Spacer_native_default, { size: 12 /* THREE */ })),
+      /* @__PURE__ */ import_react9.default.createElement(import_react_native6.View, { testID: "input-wrapper-id", style: styles4.inputWrapper }, dynamicPlaceholder && type !== "search" /* SEARCH */ && /* @__PURE__ */ import_react9.default.createElement(import_react_native6.Animated.Text, { style: [styles4.dynamicPlaceholder, { top: animation, fontSize: sizeAnimation }] }, placeholder), /* @__PURE__ */ import_react9.default.createElement(
         import_react_native6.TextInput,
         {
           ref,
@@ -834,7 +878,7 @@ var Input = import_react10.default.forwardRef(
           style: styles4.input,
           ...others
         }
-      ), type === "email" && /* @__PURE__ */ import_react10.default.createElement(Text_native_default, { style: styles4.text }, value, /* @__PURE__ */ import_react10.default.createElement(Text_native_default, { style: styles4.domain }, email)), hasIcon && type !== "password" /* PASSWORD */ && type !== "search" /* SEARCH */ && /* @__PURE__ */ import_react10.default.createElement(import_react_native6.View, { style: styles4.inputIconLeft }, /* @__PURE__ */ import_react10.default.createElement(
+      ), type === "email" && /* @__PURE__ */ import_react9.default.createElement(Text_native_default, { style: styles4.text }, value, /* @__PURE__ */ import_react9.default.createElement(Text_native_default, { style: styles4.domain }, email)), hasIcon && type !== "password" /* PASSWORD */ && type !== "search" /* SEARCH */ && /* @__PURE__ */ import_react9.default.createElement(import_react_native6.View, { style: styles4.inputIconLeft }, /* @__PURE__ */ import_react9.default.createElement(
         Icon_native_default,
         {
           align: "ALIGNED_START" /* ALIGNED_START */,
@@ -842,7 +886,7 @@ var Input = import_react10.default.forwardRef(
           size: "small" /* SMALL */,
           color: status && status === "success" && "SUCCESS" /* SUCCESS */ || status && status === "warning" && "WARNING" /* WARNING */ || status && status === "error" && "ERROR" /* ERROR */ || disabled && "DISABLED" /* DISABLED */ || "MAIN" /* MAIN */
         }
-      )), hasIcon && type !== "search" /* SEARCH */ && status && status !== "default" /* DEFAULT */ && type !== "password" /* PASSWORD */ && /* @__PURE__ */ import_react10.default.createElement(
+      )), hasIcon && type !== "search" /* SEARCH */ && status && status !== "default" /* DEFAULT */ && type !== "password" /* PASSWORD */ && /* @__PURE__ */ import_react9.default.createElement(
         import_react_native6.TouchableOpacity,
         {
           style: styles4.inputContainer,
@@ -855,7 +899,7 @@ var Input = import_react10.default.forwardRef(
             });
           }
         },
-        /* @__PURE__ */ import_react10.default.createElement(
+        /* @__PURE__ */ import_react9.default.createElement(
           Icon_native_default,
           {
             testId: "icon-status-id",
@@ -865,7 +909,7 @@ var Input = import_react10.default.forwardRef(
             color: status && status === "success" && "SUCCESS" /* SUCCESS */ || status && status === "warning" && "WARNING" /* WARNING */ || status && status === "error" && "ERROR" /* ERROR */ || status && "MAIN" /* MAIN */ || disabled && "DISABLED" /* DISABLED */ || "MAIN" /* MAIN */
           }
         )
-      ), iconNameRight && !iconNameLeft && type !== "search" /* SEARCH */ && type !== "password" /* PASSWORD */ && (!status || status === "default" /* DEFAULT */) && /* @__PURE__ */ import_react10.default.createElement(
+      ), iconNameRight && !iconNameLeft && type !== "search" /* SEARCH */ && type !== "password" /* PASSWORD */ && (!status || status === "default" /* DEFAULT */) && /* @__PURE__ */ import_react9.default.createElement(
         import_react_native6.TouchableOpacity,
         {
           style: styles4.inputContainerRight,
@@ -878,7 +922,7 @@ var Input = import_react10.default.forwardRef(
             });
           }
         },
-        /* @__PURE__ */ import_react10.default.createElement(
+        /* @__PURE__ */ import_react9.default.createElement(
           Icon_native_default,
           {
             testId: "icon-right-id",
@@ -888,7 +932,7 @@ var Input = import_react10.default.forwardRef(
             color: disabled && "DISABLED" /* DISABLED */ || "MAIN" /* MAIN */
           }
         )
-      ), type === "password" /* PASSWORD */ && /* @__PURE__ */ import_react10.default.createElement(import_react10.default.Fragment, null, iconNameLeft && /* @__PURE__ */ import_react10.default.createElement(import_react_native6.View, { style: [{ paddingLeft: 10 }, styles4.inputContainerLeft] }, /* @__PURE__ */ import_react10.default.createElement(Icon_native_default, { name: iconNameLeft })), /* @__PURE__ */ import_react10.default.createElement(
+      ), type === "password" /* PASSWORD */ && /* @__PURE__ */ import_react9.default.createElement(import_react9.default.Fragment, null, iconNameLeft && /* @__PURE__ */ import_react9.default.createElement(import_react_native6.View, { style: [{ paddingLeft: 10 }, styles4.inputContainerLeft] }, /* @__PURE__ */ import_react9.default.createElement(Icon_native_default, { name: iconNameLeft })), /* @__PURE__ */ import_react9.default.createElement(
         import_react_native6.TouchableOpacity,
         {
           style: styles4.inputContainerRight,
@@ -904,7 +948,7 @@ var Input = import_react10.default.forwardRef(
             }
           }
         },
-        /* @__PURE__ */ import_react10.default.createElement(
+        /* @__PURE__ */ import_react9.default.createElement(
           Icon_native_default,
           {
             testId: "password-id",
@@ -914,7 +958,7 @@ var Input = import_react10.default.forwardRef(
             color: status && status === "success" && "SUCCESS" /* SUCCESS */ || status && status === "warning" && "WARNING" /* WARNING */ || status && status === "error" && "ERROR" /* ERROR */ || status && status === "default" && "MAIN" /* MAIN */ || disabled && "DISABLED" /* DISABLED */ || "MAIN" /* MAIN */
           }
         )
-      )), type === "search" /* SEARCH */ && !status && /* @__PURE__ */ import_react10.default.createElement(import_react10.default.Fragment, null, /* @__PURE__ */ import_react10.default.createElement(import_react_native6.View, { style: styles4.inputContainerLeft }, /* @__PURE__ */ import_react10.default.createElement(
+      )), type === "search" /* SEARCH */ && !status && /* @__PURE__ */ import_react9.default.createElement(import_react9.default.Fragment, null, /* @__PURE__ */ import_react9.default.createElement(import_react_native6.View, { style: styles4.inputContainerLeft }, /* @__PURE__ */ import_react9.default.createElement(
         Icon_native_default,
         {
           align: "ALIGNED_CENTER" /* ALIGNED_CENTER */,
@@ -922,7 +966,7 @@ var Input = import_react10.default.forwardRef(
           size: "small" /* SMALL */,
           color: disabled ? "DISABLED" /* DISABLED */ : "NEUTRAL" /* NEUTRAL */
         }
-      )), value.length > 0 && /* @__PURE__ */ import_react10.default.createElement(
+      )), value.length > 0 && /* @__PURE__ */ import_react9.default.createElement(
         import_react_native6.TouchableOpacity,
         {
           testID: "search-id",
@@ -940,7 +984,7 @@ var Input = import_react10.default.forwardRef(
             setValue("");
           }
         },
-        /* @__PURE__ */ import_react10.default.createElement(
+        /* @__PURE__ */ import_react9.default.createElement(
           Icon_native_default,
           {
             align: "ALIGNED_CENTER" /* ALIGNED_CENTER */,
@@ -950,8 +994,8 @@ var Input = import_react10.default.forwardRef(
           }
         )
       ))),
-      help && /* @__PURE__ */ import_react10.default.createElement(Text_native_default, { testId: "help-id", style: styles4.help }, help),
-      type === "password" /* PASSWORD */ && securityGauge && /* @__PURE__ */ import_react10.default.createElement(InputGauge_native_default, { validationRules, inputValue: value })
+      help && /* @__PURE__ */ import_react9.default.createElement(Text_native_default, { testId: "help-id", style: styles4.help }, help),
+      type === "password" /* PASSWORD */ && securityGauge && /* @__PURE__ */ import_react9.default.createElement(InputGauge_native_default, { securityRules, validationRules, inputValue: value })
     );
   }
 );
@@ -959,7 +1003,7 @@ Input.displayName = "Input" /* Input */;
 var Input_native_default = Input;
 
 // components/modal/Modal.native.tsx
-var import_react16 = __toESM(require("react"));
+var import_react15 = __toESM(require("react"));
 var import_react_native10 = require("react-native");
 var import_react_native_modal = __toESM(require("react-native-modal"));
 
@@ -967,22 +1011,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_react11 = __toESM(require("react"));
-var ColumnsContext = import_react11.default.createContext({
+var import_react10 = __toESM(require("react"));
+var defaultContextValue2 = {
   scrollable: false,
   width: 0,
   realGap: 16,
   childrensLength: 1
-});
+};
+var ColumnsContext = import_react10.default.createContext(defaultContextValue2);
 
 // components/columns/Columns.native.tsx
-var import_react12 = __toESM(require("react"));
+var import_react11 = __toESM(require("react"));
 var import_react_native7 = require("react-native");
-var Columns = import_react12.default.forwardRef(
+var staticStyles = import_react_native7.StyleSheet.create({
+  centered: {
+    justifyContent: "center"
+  },
+  multiline: {
+    flexWrap: "wrap"
+  },
+  mobile: {
+    flexDirection: "column"
+  }
+});
+var Columns = import_react11.default.forwardRef(
   ({ children, align, gap, verticalAlign, fullBleed, scrollable, multiline, fullheight, ...others }, ref) => {
-    const [width, setWidth] = (0, import_react12.useState)(0);
-    const [enlarge, setEnlarge] = (0, import_react12.useState)(0);
-    const onLayoutHandler = import_react12.default.useCallback(
+    const [width, setWidth] = (0, import_react11.useState)(0);
+    const [enlarge, setEnlarge] = (0, import_react11.useState)(0);
+    const onLayoutHandler = import_react11.default.useCallback(
       (event) => {
         if (!width) {
           const { width: width2 } = event.nativeEvent.layout;
@@ -994,206 +1050,215 @@ var Columns = import_react12.default.forwardRef(
       },
       [fullBleed, width]
     );
-    const realGap = import_react12.default.useMemo(() => typeof gap === "undefined" && 16 || ColumnsGapValue[gap], [gap]);
-    const styles4 = import_react_native7.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_react12.default.createElement(
-      ColumnsContext.Provider,
-      {
-        value: {
-          width,
-          realGap,
-          scrollable: scrollable || false,
-          childrensLength: import_react12.default.Children.count(children)
-        }
-      },
-      !scrollable && /* @__PURE__ */ import_react12.default.createElement(
-        import_react_native7.View,
-        {
-          ref,
-          onLayout: onLayoutHandler,
-          style: [
-            styles4.columns,
-            multiline && styles4.multiline,
-            align === "ALIGNED_CENTER" /* ALIGNED_CENTER */ && styles4.centered,
-            verticalAlign && styles4.verticalAlign
-          ],
-          ...others
+    const realGap = import_react11.default.useMemo(() => typeof gap === "undefined" && 16 || ColumnsGapValue[gap], [gap]);
+    const dynamicStyles = import_react11.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_react12.default.createElement(
-        import_react_native7.View,
-        {
-          onLayout: onLayoutHandler,
-          style: {
-            marginHorizontal: -enlarge
-          }
+        verticalAlign: {
+          alignItems: getAlignStyle(verticalAlign)
         },
-        /* @__PURE__ */ import_react12.default.createElement(
-          import_react_native7.ScrollView,
-          {
-            horizontal: true,
-            contentContainerStyle: styles4.scrollContainer,
-            showsHorizontalScrollIndicator: false
-          },
-          children
-        )
-      )
-    );
-  }
-);
-Columns.displayName = "Columns" /* Columns */;
-var Columns_native_default = Columns;
-
-// components/columns/column/Column.native.tsx
-var import_react13 = __toESM(require("react"));
-var import_react_native8 = require("react-native");
-var Column = import_react13.default.forwardRef(
-  ({ children, narrow, size, verticalAlign, ...others }, ref) => {
-    const { width, realGap, scrollable, childrensLength } = import_react13.default.useContext(ColumnsContext);
-    const scrollableStyle = import_react13.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_react13.default.useMemo(
+    const contextValue = import_react11.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_react11.default.Children.count(children)
       }),
-      [size, narrow, width, realGap, childrensLength]
+      [width, realGap, scrollable, children]
     );
-    return /* @__PURE__ */ import_react13.default.createElement(
-      import_react_native8.View,
+    return /* @__PURE__ */ import_react11.default.createElement(ColumnsContext.Provider, { value: contextValue }, !scrollable && /* @__PURE__ */ import_react11.default.createElement(
+      import_react_native7.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_react11.default.createElement(
+      import_react_native7.View,
+      {
+        onLayout: onLayoutHandler,
+        style: {
+          marginHorizontal: -enlarge
+        }
+      },
+      /* @__PURE__ */ import_react11.default.createElement(
+        import_react_native7.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_react12 = __toESM(require("react"));
+var import_react_native8 = require("react-native");
+var Column = import_react12.default.memo(
+  import_react12.default.forwardRef(
+    ({ children, narrow, size, verticalAlign, ...others }, ref) => {
+      const { width, realGap, scrollable, childrensLength } = import_react12.default.useContext(ColumnsContext);
+      const calculatedWidth = import_react12.default.useMemo(
+        () => size ? size / 12 * width - realGap * ((childrensLength - 1) / childrensLength) : null,
+        [size, width, realGap, childrensLength]
+      );
+      const scrollableStyle = import_react12.default.useMemo(
+        () => ({
+          width: calculatedWidth || (narrow ? "auto" : width - 2 * realGap)
+        }),
+        [calculatedWidth, narrow, width, realGap]
+      );
+      const noScrollableStyle = import_react12.default.useMemo(
+        () => ({
+          flex: narrow ? 0 : 1,
+          flexGrow: size || narrow ? 0 : 1,
+          flexShrink: narrow ? 1 : 0,
+          flexBasis: calculatedWidth || "auto"
+        }),
+        [narrow, size, calculatedWidth]
+      );
+      const justifyContentStyle = import_react12.default.useMemo(
+        () => ({
+          justifyContent: getAlignStyle(verticalAlign)
+        }),
+        [verticalAlign]
+      );
+      return /* @__PURE__ */ import_react12.default.createElement(
+        import_react_native8.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 React12 = __toESM(require("react"));
-var import_react14 = require("react");
+var React11 = __toESM(require("react"));
+var import_react13 = require("react");
 var import_native3 = __toESM(require("react-content-loader/native"));
 var import_react_native9 = require("react-native");
-var Title = React12.forwardRef(
-  ({ children, level, style, inverted, typo, onClick, skeleton, accessibilityLabel, subtitle, overline, ...others }, ref) => {
-    const statesContext = (0, import_react14.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 styles4 = import_react_native9.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__ */ React12.createElement(
-      import_react_native9.Text,
-      {
-        ref,
-        maxFontSizeMultiplier: 1.3,
-        accessible: !!titleAccessibilityLabel,
-        accessibilityLabel: titleAccessibilityLabel,
-        style: [styles4.text, style],
-        ...others
-      },
-      children
-    );
-    if (skeleton) {
-      titleView = /* @__PURE__ */ React12.createElement(import_native3.default, { style: styles4.skeleton }, titleView, isAndroid && /* @__PURE__ */ React12.createElement(import_react_native9.View, null, /* @__PURE__ */ React12.createElement(import_native3.Rect, { rx: "15", ry: "15", width: "100%", height: "100%" })));
+var Title = React11.forwardRef(({
+  children,
+  level,
+  style,
+  inverted,
+  typo,
+  onClick,
+  skeleton,
+  accessibilityLabel,
+  subtitle,
+  overline,
+  ...others
+}, ref) => {
+  const statesContext = (0, import_react13.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;
     }
-    return onClick ? /* @__PURE__ */ React12.createElement(import_react_native9.TouchableOpacity, { onPress: onClick, activeOpacity: 0.85 }, titleView) : titleView;
+  };
+  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 styles4 = import_react_native9.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__ */ React11.createElement(
+    import_react_native9.Text,
+    {
+      ref,
+      maxFontSizeMultiplier: 1.3,
+      accessible: !!titleAccessibilityLabel,
+      accessibilityLabel: titleAccessibilityLabel,
+      style: [styles4.text, style],
+      ...others
+    },
+    children
+  );
+  if (skeleton) {
+    titleView = /* @__PURE__ */ React11.createElement(import_native3.default, { style: styles4.skeleton }, titleView, isAndroid && /* @__PURE__ */ React11.createElement(import_react_native9.View, null, /* @__PURE__ */ React11.createElement(import_native3.Rect, { rx: "15", ry: "15", width: "100%", height: "100%" })));
   }
-);
+  return onClick ? /* @__PURE__ */ React11.createElement(import_react_native9.TouchableOpacity, { onPress: onClick, activeOpacity: 0.85 }, titleView) : titleView;
+});
 Title.displayName = "Title" /* Title */;
 var Title_native_default = Title;
 
 // components/modal/context/ModalContext.tsx
-var import_react15 = __toESM(require("react"));
-var ModalContext = import_react15.default.createContext({
+var import_react14 = __toESM(require("react"));
+var ModalContext = import_react14.default.createContext({
   scrollViewRef: null,
   handleOnScroll: () => null,
   isFooter: false,
@@ -1201,7 +1266,7 @@ var ModalContext = import_react15.default.createContext({
 });
 
 // components/modal/Modal.native.tsx
-var Modal = import_react16.default.forwardRef(
+var Modal = import_react15.default.forwardRef(
   ({
     children,
     active = false,
@@ -1213,10 +1278,10 @@ var Modal = import_react16.default.forwardRef(
     title,
     ...others
   }, ref) => {
-    const scrollViewRef = (0, import_react16.useRef)(null);
-    const [scrollOffset, setScrollOffset] = (0, import_react16.useState)(0);
-    const [visible, setVisible] = (0, import_react16.useState)(active || false);
-    const [isFooter, setIsFooter] = (0, import_react16.useState)(active || false);
+    const scrollViewRef = (0, import_react15.useRef)(null);
+    const [scrollOffset, setScrollOffset] = (0, import_react15.useState)(0);
+    const [visible, setVisible] = (0, import_react15.useState)(active || false);
+    const [isFooter, setIsFooter] = (0, import_react15.useState)(active || false);
     const handleOnScroll = (event) => {
       setScrollOffset(event.nativeEvent.contentOffset.y);
     };
@@ -1227,15 +1292,15 @@ var Modal = import_react16.default.forwardRef(
       if (onClose) onClose(e);
       setVisible(false);
     };
-    (0, import_react16.useEffect)(() => {
+    (0, import_react15.useEffect)(() => {
       setVisible(active);
     }, [active]);
-    return /* @__PURE__ */ import_react16.default.createElement(ModalContext.Provider, { value: { scrollViewRef, handleOnScroll, isFooter, setIsFooter } }, trigger, /* @__PURE__ */ import_react16.default.createElement(
+    return /* @__PURE__ */ import_react15.default.createElement(ModalContext.Provider, { value: { scrollViewRef, handleOnScroll, isFooter, setIsFooter } }, trigger, /* @__PURE__ */ import_react15.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,
@@ -1245,7 +1310,7 @@ var Modal = import_react16.default.forwardRef(
         onModalHide,
         ...others
       },
-      /* @__PURE__ */ import_react16.default.createElement(import_react_native10.View, { ref, style: [styles2.body, { backgroundColor: getColorStyle("WHITE" /* BACKGROUND */) }] }, /* @__PURE__ */ import_react16.default.createElement(import_react_native10.View, { style: { paddingVertical: !title && hideCloseButton ? 8 : 16 } }, /* @__PURE__ */ import_react16.default.createElement(Columns_native_default, { verticalAlign: "ALIGNED_CENTER" /* ALIGNED_CENTER */ }, /* @__PURE__ */ import_react16.default.createElement(Column_native_default, null, /* @__PURE__ */ import_react16.default.createElement(Title_native_default, { level: 4 }, title)), !hideCloseButton && /* @__PURE__ */ import_react16.default.createElement(Column_native_default, { narrow: true }, /* @__PURE__ */ import_react16.default.createElement(import_react_native10.TouchableOpacity, { onPress: handleClose }, /* @__PURE__ */ import_react16.default.createElement(Icon_native_default, { name: "tri-times" /* TIMES */, size: "medium" /* MEDIUM */, color: "MAIN" /* MAIN */ }))))), children)
+      /* @__PURE__ */ import_react15.default.createElement(import_react_native10.View, { ref, style: [styles2.body, { backgroundColor: getColorStyle("WHITE" /* BACKGROUND */) }] }, /* @__PURE__ */ import_react15.default.createElement(import_react_native10.View, { style: { paddingVertical: !title && (hideCloseButton || unClosable) ? 8 : 16 } }, /* @__PURE__ */ import_react15.default.createElement(Columns_native_default, { verticalAlign: "ALIGNED_CENTER" /* ALIGNED_CENTER */ }, /* @__PURE__ */ import_react15.default.createElement(Column_native_default, null, /* @__PURE__ */ import_react15.default.createElement(Title_native_default, { level: 4 }, title)), !hideCloseButton && !unClosable && /* @__PURE__ */ import_react15.default.createElement(Column_native_default, { narrow: true }, /* @__PURE__ */ import_react15.default.createElement(import_react_native10.TouchableOpacity, { onPress: handleClose }, /* @__PURE__ */ import_react15.default.createElement(Icon_native_default, { name: "tri-times" /* TIMES */, size: "medium" /* MEDIUM */, color: "MAIN" /* MAIN */ }))))), children)
     ));
   }
 );
@@ -1273,11 +1338,11 @@ var styles2 = import_react_native10.StyleSheet.create({
 });
 
 // components/modal/body/ModalBody.native.tsx
-var React15 = __toESM(require("react"));
+var React14 = __toESM(require("react"));
 var import_react_native11 = require("react-native");
-var ModalBody = React15.forwardRef(({ children, ...others }, ref) => {
-  const { handleOnScroll, scrollViewRef, isFooter } = React15.useContext(ModalContext);
-  return /* @__PURE__ */ React15.createElement(
+var ModalBody = React14.forwardRef(({ children, ...others }, ref) => {
+  const { handleOnScroll, scrollViewRef, isFooter } = React14.useContext(ModalContext);
+  return /* @__PURE__ */ React14.createElement(
     import_react_native11.ScrollView,
     {
       ref: scrollViewRef,
@@ -1285,7 +1350,7 @@ var ModalBody = React15.forwardRef(({ children, ...others }, ref) => {
       onScroll: handleOnScroll,
       showsVerticalScrollIndicator: false
     },
-    /* @__PURE__ */ React15.createElement(
+    /* @__PURE__ */ React14.createElement(
       import_react_native11.View,
       {
         ref,
@@ -1306,20 +1371,18 @@ ModalBody.displayName = "ModalBody" /* ModalBody */;
 var ModalBody_native_default = ModalBody;
 
 // components/modal/footer/ModalFooter.native.tsx
-var React16 = __toESM(require("react"));
+var React15 = __toESM(require("react"));
 var import_react_native12 = require("react-native");
-var ModalFooter = React16.forwardRef(
-  ({ children, ...others }, ref) => {
-    const { setIsFooter } = React16.useContext(ModalContext);
-    React16.useEffect(() => {
-      setIsFooter(true);
-      return () => {
-        setIsFooter(false);
-      };
-    }, []);
-    return /* @__PURE__ */ React16.createElement(import_react_native12.View, { ref, style: [styles3.container], ...others }, /* @__PURE__ */ React16.createElement(import_react_native12.View, { style: [{ backgroundColor: getColorStyle("WHITE" /* BACKGROUND */) }] }, typeof children === "string" && /* @__PURE__ */ React16.createElement(Title_native_default, { level: 3 /* THREE */, style: styles3.title }, children) || children));
-  }
-);
+var ModalFooter = React15.forwardRef(({ children, ...others }, ref) => {
+  const { setIsFooter } = React15.useContext(ModalContext);
+  React15.useEffect(() => {
+    setIsFooter(true);
+    return () => {
+      setIsFooter(false);
+    };
+  }, []);
+  return /* @__PURE__ */ React15.createElement(import_react_native12.View, { ref, style: [styles3.container], ...others }, /* @__PURE__ */ React15.createElement(import_react_native12.View, { style: [{ backgroundColor: getColorStyle("WHITE" /* BACKGROUND */) }] }, typeof children === "string" && /* @__PURE__ */ React15.createElement(Title_native_default, { level: 3 /* THREE */, style: styles3.title }, children) || children));
+});
 ModalFooter.displayName = "ModalFooter" /* ModalFooter */;
 var styles3 = import_react_native12.StyleSheet.create({
   container: {
@@ -1330,51 +1393,49 @@ var styles3 = import_react_native12.StyleSheet.create({
 });
 
 // components/select/Select.native.tsx
-var import_react17 = __toESM(require("react"));
+var import_react16 = __toESM(require("react"));
 var import_react_native14 = require("react-native");
 
 // components/select/option/SelectOption.native.tsx
-var React17 = __toESM(require("react"));
+var React16 = __toESM(require("react"));
 var import_react_native13 = require("react-native");
-var SelectOption = React17.forwardRef(
-  ({ disabled, children, onClick, label, iconName, ...others }, ref) => {
-    const { checked } = others;
-    const styles4 = import_react_native13.StyleSheet.create({
-      container: {
-        backgroundColor: getColorStyle(disabled ? "DISABLED_FADE" /* DISABLED_FADE */ : "transparent"),
-        width: "100%",
-        paddingVertical: checked && !iconName ? 8.5 : 10
-      }
-    });
-    const textColor = React17.useMemo(() => {
-      switch (true) {
-        case disabled === true:
-          return "DISABLED" /* DISABLED */;
-        default:
-          return "MAIN" /* MAIN */;
-      }
-    }, [disabled]);
-    const iconColor = React17.useMemo(() => {
-      switch (true) {
-        case disabled === true:
-          return "DISABLED" /* DISABLED */;
-        default:
-          return "MAIN" /* MAIN */;
-      }
-    }, [disabled]);
-    const columnLabelSize = React17.useMemo(() => {
-      return iconName ? checked && 10 || 11 : checked && 11 || 12;
-    }, [iconName, checked]);
-    return /* @__PURE__ */ React17.createElement(import_react_native13.TouchableOpacity, { ref, style: [styles4.container], ...others, onPress: onClick }, /* @__PURE__ */ React17.createElement(Columns_native_default, { verticalAlign: "ALIGNED_CENTER" /* ALIGNED_CENTER */ }, iconName && /* @__PURE__ */ React17.createElement(Column_native_default, { size: 1 }, /* @__PURE__ */ React17.createElement(Icon_native_default, { size: "small" /* SMALL */, name: iconName, color: iconColor })), /* @__PURE__ */ React17.createElement(Column_native_default, { size: columnLabelSize }, /* @__PURE__ */ React17.createElement(
-      Text_native_default,
-      {
-        typo: [checked && "has-text-weight-semibold" /* TEXT_WEIGHT_SEMIBOLD */],
-        ...{ style: { paddingLeft: 8, color: getColorStyle(textColor) } }
-      },
-      children || label
-    )), checked && /* @__PURE__ */ React17.createElement(Column_native_default, { size: 1 }, /* @__PURE__ */ React17.createElement(Icon_native_default, { size: "small" /* SMALL */, name: "tri-check", color: iconColor }))));
-  }
-);
+var SelectOption = React16.forwardRef(({ disabled, children, onClick, label, iconName, ...others }, ref) => {
+  const { checked } = others;
+  const styles4 = import_react_native13.StyleSheet.create({
+    container: {
+      backgroundColor: getColorStyle(disabled ? "DISABLED_FADE" /* DISABLED_FADE */ : "transparent"),
+      width: "100%",
+      paddingVertical: checked && !iconName ? 8.5 : 10
+    }
+  });
+  const textColor = React16.useMemo(() => {
+    switch (true) {
+      case disabled === true:
+        return "DISABLED" /* DISABLED */;
+      default:
+        return "MAIN" /* MAIN */;
+    }
+  }, [disabled]);
+  const iconColor = React16.useMemo(() => {
+    switch (true) {
+      case disabled === true:
+        return "DISABLED" /* DISABLED */;
+      default:
+        return "MAIN" /* MAIN */;
+    }
+  }, [disabled]);
+  const columnLabelSize = React16.useMemo(() => {
+    return iconName ? checked && 10 || 11 : checked && 11 || 12;
+  }, [iconName, checked]);
+  return /* @__PURE__ */ React16.createElement(import_react_native13.TouchableOpacity, { ref, style: [styles4.container], ...others, onPress: onClick }, /* @__PURE__ */ React16.createElement(Columns_native_default, { verticalAlign: "ALIGNED_CENTER" /* ALIGNED_CENTER */ }, iconName && /* @__PURE__ */ React16.createElement(Column_native_default, { size: 1 }, /* @__PURE__ */ React16.createElement(Icon_native_default, { size: "small" /* SMALL */, name: iconName, color: iconColor })), /* @__PURE__ */ React16.createElement(Column_native_default, { size: columnLabelSize }, /* @__PURE__ */ React16.createElement(
+    Text_native_default,
+    {
+      typo: [checked && "has-text-weight-semibold" /* TEXT_WEIGHT_SEMIBOLD */],
+      ...{ style: { paddingLeft: 8, color: getColorStyle(textColor) } }
+    },
+    children || label
+  )), checked && /* @__PURE__ */ React16.createElement(Column_native_default, { size: 1 }, /* @__PURE__ */ React16.createElement(Icon_native_default, { size: "small" /* SMALL */, name: "tri-check", color: iconColor }))));
+});
 SelectOption.displayName = "SelectOption" /* SelectOption */;
 var SelectOption_native_default = SelectOption;
 
@@ -1382,16 +1443,16 @@ var SelectOption_native_default = SelectOption;
 var index_native_default = SelectOption_native_default;
 
 // components/select/Select.native.tsx
-var Select = import_react17.default.forwardRef(
+var Select = import_react16.default.forwardRef(
   ({ children, id, selected, label, iconName, onChange, disabled, multiple, onBlur, status, ...others }, ref) => {
-    const [selectedValues, setSelectedValues] = (0, import_react17.useState)(selected);
-    const [selectedNames, setSelectedNames] = import_react17.default.useState([]);
-    const [display, setDisplay] = (0, import_react17.useState)(false);
-    const reactId = import_react17.default.useId();
-    (0, import_react17.useEffect)(() => {
+    const [selectedValues, setSelectedValues] = (0, import_react16.useState)(selected);
+    const [selectedNames, setSelectedNames] = import_react16.default.useState([]);
+    const [display, setDisplay] = (0, import_react16.useState)(false);
+    const reactId = import_react16.default.useId();
+    (0, import_react16.useEffect)(() => {
       var _a;
-      const labelSelected = (_a = import_react17.default.Children.map(children, (child) => {
-        if (!import_react17.default.isValidElement(child)) return false;
+      const labelSelected = (_a = import_react16.default.Children.map(children, (child) => {
+        if (!import_react16.default.isValidElement(child)) return false;
         const label2 = child.props.children || child.props.label;
         switch (true) {
           case (Array.isArray(selected) && selected.includes(child.props.value) || !Array.isArray(selected) && child.props.value === selected):
@@ -1403,14 +1464,14 @@ var Select = import_react17.default.forwardRef(
       labelSelected && setSelectedNames(labelSelected);
       setSelectedValues(selected);
     }, [selected]);
-    const handleOpenCloseModal = (0, import_react17.useCallback)(() => {
+    const handleOpenCloseModal = (0, import_react16.useCallback)(() => {
       !disabled && setDisplay((prev) => !prev);
     }, [disabled]);
-    const isChecked = (0, import_react17.useCallback)(
+    const isChecked = (0, import_react16.useCallback)(
       (value) => multiple && selectedValues && typeof selectedValues !== "string" && typeof selectedValues !== "number" ? selectedValues == null ? void 0 : selectedValues.includes(value) : selectedValues === value,
       [multiple, selectedValues]
     );
-    const setNewSelectedValues = (0, import_react17.useCallback)(
+    const setNewSelectedValues = (0, import_react16.useCallback)(
       ({
         isChecked: isChecked2,
         children: children2,
@@ -1455,9 +1516,9 @@ var Select = import_react17.default.forwardRef(
       },
       [multiple]
     );
-    const options = import_react17.default.useMemo(() => {
-      return import_react17.default.Children.map(children, (child, index) => {
-        if (!import_react17.default.isValidElement(child)) return null;
+    const options = import_react16.default.useMemo(() => {
+      return import_react16.default.Children.map(children, (child, index) => {
+        if (!import_react16.default.isValidElement(child)) return null;
         const clickEventValue = (v) => {
           switch (true) {
             case (multiple && (selectedValues == null ? void 0 : selectedValues.includes(child.props.value)) || !multiple && selectedValues === child.props.value):
@@ -1487,16 +1548,16 @@ var Select = import_react17.default.forwardRef(
             if (child.props.onClick) child.props.onClick();
           }
         };
-        return /* @__PURE__ */ import_react17.default.createElement(index_native_default, { ...props, key: `${reactId}_${index}` });
+        return /* @__PURE__ */ import_react16.default.createElement(index_native_default, { ...props, key: `${reactId}_${index}` });
       });
     }, [multiple, selectedValues, children]);
-    return /* @__PURE__ */ import_react17.default.createElement(
+    return /* @__PURE__ */ import_react16.default.createElement(
       Modal_native_default,
       {
         active: display,
         onClose: handleOpenCloseModal,
         unClosable: true,
-        trigger: /* @__PURE__ */ import_react17.default.createElement(import_react_native14.TouchableOpacity, { onPress: handleOpenCloseModal }, /* @__PURE__ */ import_react17.default.createElement(
+        trigger: /* @__PURE__ */ import_react16.default.createElement(import_react_native14.TouchableOpacity, { onPress: handleOpenCloseModal }, /* @__PURE__ */ import_react16.default.createElement(
           Input_native_default,
           {
             status,
@@ -1514,7 +1575,7 @@ var Select = import_react17.default.forwardRef(
           }
         ))
       },
-      /* @__PURE__ */ import_react17.default.createElement(ModalBody_native_default, null, /* @__PURE__ */ import_react17.default.createElement(import_react_native14.View, { style: { paddingBottom: 20 } }, options))
+      /* @__PURE__ */ import_react16.default.createElement(ModalBody_native_default, null, /* @__PURE__ */ import_react16.default.createElement(import_react_native14.View, { style: { paddingBottom: 20 } }, options))
     );
   }
 );