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

package/lib/{chunk-4HVUQDPB.mjs → chunk-7TEPMZRL.mjs}

@@ -1,7 +1,7 @@
 "use client";
 import {
   CardContext
-} from "./chunk-AMKZNB5D.mjs";
+} from "./chunk-IT2ZBSQG.mjs";
 
 // components/card/content/CardContent.native.tsx
 import React, { useContext } from "react";

package/lib/{chunk-JOSZ4COK.mjs → chunk-7VSJ3RTI.mjs}

@@ -10,6 +10,7 @@ var TrilogyColor = /* @__PURE__ */ ((TrilogyColor2) => {
   TrilogyColor2["MAIN"] = "MAIN";
   TrilogyColor2["MAIN_FADE"] = "MAIN_FADE";
   TrilogyColor2["ACCENT"] = "ACCENT";
+  TrilogyColor2["ACCENT_FADE"] = "ACCENT_FADE";
   TrilogyColor2["FONT"] = "FONT";
   TrilogyColor2["FONT_PLACEHOLDER"] = "FONT_PLACEHOLDER";
   TrilogyColor2["SUCCESS"] = "SUCCESS";
@@ -32,6 +33,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"],

package/lib/{chunk-L6H74EAQ.mjs → chunk-7WYOWHKR.mjs}

@@ -1,7 +1,7 @@
 "use client";
 import {
   getColorStyle
-} from "./chunk-VI2KFLCZ.mjs";
+} from "./chunk-E4YRRUI3.mjs";
 
 // components/box/footer/BoxFooter.native.tsx
 import * as React from "react";

package/lib/chunk-AASRNCVH.mjs

@@ -0,0 +1,51 @@
+"use client";
+import {
+  getColorStyle
+} from "./chunk-E4YRRUI3.mjs";
+
+// components/stepper/step/Step.native.tsx
+import * as React from "react";
+import { Animated, Easing, StyleSheet } from "react-native";
+var Step = React.forwardRef(({ active, current, done, error, ...others }, ref) => {
+  const defaultColor = getColorStyle("NEUTRAL" /* NEUTRAL */);
+  const activeColor = getColorStyle("MAIN" /* MAIN */);
+  const errorColor = getColorStyle("ERROR" /* ERROR */);
+  const backgroundColorAnim = React.useRef(new Animated.Value(0)).current;
+  const backgroundColor = backgroundColorAnim.interpolate({
+    inputRange: [0, 1, 2],
+    outputRange: [defaultColor, activeColor, errorColor]
+  });
+  React.useEffect(() => {
+    let targetValue;
+    if (error) {
+      targetValue = 2;
+    } else if (active || current || done) {
+      targetValue = 1;
+    } else {
+      targetValue = 0;
+    }
+    Animated.timing(backgroundColorAnim, {
+      toValue: targetValue,
+      duration: 650,
+      useNativeDriver: false,
+      easing: Easing.linear
+    }).start();
+  }, [active, current, done, error]);
+  const styles = StyleSheet.create({
+    step: {
+      flex: 1,
+      height: 4,
+      marginRight: 8,
+      borderRadius: 4,
+      backgroundColor,
+      zIndex: 1
+    }
+  });
+  return /* @__PURE__ */ React.createElement(Animated.View, { ref, style: styles.step, ...others });
+});
+Step.displayName = "Step" /* Step */;
+var Step_native_default = Step;
+
+export {
+  Step_native_default
+};

package/lib/chunk-ACDIJOLY.mjs

@@ -0,0 +1,113 @@
+"use client";
+import {
+  AnimatedCircularProgress
+} from "./chunk-RF3MTZKP.mjs";
+import {
+  Text_native_default
+} from "./chunk-MVQ252OA.mjs";
+import {
+  getColorStyle
+} from "./chunk-E4YRRUI3.mjs";
+import {
+  isAndroid
+} from "./chunk-R6PFY5VS.mjs";
+import {
+  getAlignStyle
+} from "./chunk-CD6DMMCL.mjs";
+
+// components/progress/radial/ProgressRadial.native.tsx
+import * as React from "react";
+import ContentLoader, { Circle } from "react-content-loader/native";
+import { StyleSheet, View } from "react-native";
+var ProgressRadial = React.forwardRef(({
+  children,
+  value,
+  label,
+  description,
+  status,
+  full,
+  disk,
+  secondValue,
+  secondValueColor,
+  align,
+  skeleton,
+  ...others
+}, ref) => {
+  const color = getColorStyle(status || "MAIN" /* MAIN */);
+  const backgroundColor = getColorStyle("MAIN_FADE" /* MAIN_FADE */);
+  const percentWidth = value || 0;
+  const secondFill = secondValue ? { secondFill: secondValue } : null;
+  const secondFillColor = { secondFillTintColor: getColorStyle(secondValueColor || "MAIN" /* MAIN */) };
+  const progressRadialWidth = 100;
+  const progressRadialSkeletonRadius = 50;
+  const styles = StyleSheet.create({
+    container: {
+      alignSelf: getAlignStyle(align)
+    },
+    label: {
+      textAlign: "center",
+      fontSize: 20,
+      fontWeight: "600",
+      paddingTop: 8
+    },
+    description: {
+      alignSelf: "center",
+      fontWeight: "500"
+    },
+    disk: {
+      width: progressRadialWidth,
+      height: progressRadialWidth,
+      borderRadius: 50,
+      backgroundColor: color
+    },
+    labelDisk: {
+      color: getColorStyle("FONT" /* FONT */),
+      textAlign: "center",
+      fontSize: 20,
+      fontWeight: "500"
+    },
+    descriptionDisk: {
+      color: getColorStyle("FONT" /* FONT */),
+      textAlign: "center",
+      fontWeight: "400"
+    },
+    alignCenter: {
+      alignItems: "center",
+      justifyContent: "center"
+    },
+    skeleton: {
+      width: progressRadialWidth,
+      height: progressRadialWidth,
+      borderRadius: progressRadialSkeletonRadius,
+      backgroundColor: getColorStyle("DISABLED_FADE" /* DISABLED_FADE */),
+      overflow: "hidden"
+    }
+  });
+  const ProgressRadialSkeleton = () => /* @__PURE__ */ React.createElement(ContentLoader, { style: styles.skeleton, ...others }, /* @__PURE__ */ React.createElement(View, { style: { opacity: 0 } }), isAndroid && /* @__PURE__ */ React.createElement(View, null, /* @__PURE__ */ React.createElement(Circle, { cx: "50", cy: "50", r: "50" })));
+  if (skeleton) {
+    return /* @__PURE__ */ React.createElement(ProgressRadialSkeleton, null);
+  }
+  if (disk) {
+    return /* @__PURE__ */ React.createElement(View, { ref, style: styles.container }, /* @__PURE__ */ React.createElement(View, { style: [styles.disk, styles.alignCenter], ...others }, label && typeof label.valueOf() === "string" ? /* @__PURE__ */ React.createElement(Text_native_default, { style: styles.labelDisk, level: 2 /* TWO */ }, label || "") : label, description && typeof description.valueOf() === "string" ? /* @__PURE__ */ React.createElement(Text_native_default, { style: styles.descriptionDisk, level: 3 /* THREE */, typo: "has-text-centered" /* TEXT_CENTERED */ }, description || "") : description));
+  }
+  return /* @__PURE__ */ React.createElement(View, { ref, style: styles.container, ...others }, /* @__PURE__ */ React.createElement(
+    AnimatedCircularProgress,
+    {
+      size: 90,
+      width: 7,
+      fill: !full ? percentWidth : 100,
+      tintColor: color,
+      backgroundColor,
+      rotation: 0,
+      ...secondFill,
+      ...secondFillColor
+    },
+    () => /* @__PURE__ */ React.createElement(View, { style: styles.alignCenter }, label && typeof label.valueOf() === "string" ? /* @__PURE__ */ React.createElement(Text_native_default, { style: styles.label, level: 2 /* TWO */ }, label || "") : /* @__PURE__ */ React.createElement(View, null, label), description && typeof description.valueOf() === "string" ? /* @__PURE__ */ React.createElement(Text_native_default, { style: styles.description, level: 4 /* FOUR */ }, description || "") : /* @__PURE__ */ React.createElement(View, null, description || children))
+  ));
+});
+ProgressRadial.displayName = "ProgressRadial" /* ProgressRadial */;
+var ProgressRadial_native_default = ProgressRadial;
+
+export {
+  ProgressRadial_native_default
+};

package/lib/{chunk-YGG7NOZ7.mjs → chunk-AEV6FHUQ.mjs}

@@ -1,7 +1,7 @@
 "use client";
 import {
   SelectOption_default
-} from "./chunk-TH32WIIV.mjs";
+} from "./chunk-NWBGCS6B.mjs";
 
 // components/select/option/index.ts
 var option_default = SelectOption_default;

package/lib/{chunk-SGAZRZIK.mjs → chunk-ALGX47MZ.mjs}

@@ -1,10 +1,10 @@
 "use client";
 import {
   getBackgroundClassName
-} from "./chunk-WC3ULY5W.mjs";
+} from "./chunk-XXKEMYTB.mjs";
 import {
   getColorClassName
-} from "./chunk-JOSZ4COK.mjs";
+} from "./chunk-7VSJ3RTI.mjs";
 import {
   has,
   is

package/lib/{chunk-62D2ZNLD.mjs → chunk-AMGZXLNR.mjs}

@@ -1,7 +1,7 @@
 "use client";
 import {
   Icon_default
-} from "./chunk-SGAZRZIK.mjs";
+} from "./chunk-ALGX47MZ.mjs";
 import {
   has,
   is

package/lib/{chunk-JE2Y3RAL.mjs → chunk-ARA7YCBH.mjs}

@@ -4,7 +4,7 @@ import {
 } from "./chunk-7OJ5USHM.mjs";
 import {
   getAlignStyle
-} from "./chunk-HV6TXVFA.mjs";
+} from "./chunk-CD6DMMCL.mjs";
 
 // components/flex-box/flex-item/FlexItem.native.tsx
 import React from "react";

package/lib/{chunk-MOXBCNH3.mjs → chunk-ASZC2OSU.mjs}

@@ -1,10 +1,10 @@
 "use client";
 import {
   Icon_default
-} from "./chunk-SGAZRZIK.mjs";
+} from "./chunk-ALGX47MZ.mjs";
 import {
   getButtonVariantClassName
-} from "./chunk-JOSZ4COK.mjs";
+} from "./chunk-7VSJ3RTI.mjs";
 import {
   is
 } from "./chunk-SWVRRUW7.mjs";

package/lib/chunk-B6D5UHOQ.mjs

@@ -0,0 +1,67 @@
+"use client";
+import {
+  Text_native_default
+} from "./chunk-MVQ252OA.mjs";
+import {
+  getColorStyle
+} from "./chunk-E4YRRUI3.mjs";
+
+// components/radio/Radio.native.tsx
+import React from "react";
+import { StyleSheet, TouchableOpacity, View } from "react-native";
+var Radio = React.forwardRef(({
+  id = React.useId(),
+  checked,
+  name,
+  onChange,
+  disabled,
+  readonly,
+  label,
+  value
+}, ref) => {
+  const styles = StyleSheet.create({
+    container: {
+      flexDirection: "row",
+      alignItems: "center"
+    },
+    radio: {
+      alignItems: "center",
+      justifyContent: "center",
+      borderColor: getColorStyle(disabled ? "DISABLED" /* DISABLED */ : checked ? "MAIN" /* MAIN */ : "STROKE" /* STROKE */),
+      borderWidth: 1,
+      width: 18,
+      height: 18,
+      borderRadius: 10,
+      marginRight: 10
+    },
+    icon: {
+      borderRadius: 12,
+      width: 12,
+      height: 12,
+      backgroundColor: getColorStyle("MAIN" /* MAIN */)
+    },
+    label: {
+      paddingTop: 2,
+      color: disabled && getColorStyle("DISABLED" /* DISABLED */) || checked && getColorStyle("MAIN" /* MAIN */) || getColorStyle("MAIN" /* MAIN */)
+    }
+  });
+  const handleClick = (value2) => {
+    if (!readonly) {
+      if (onChange) {
+        onChange({
+          radioId: id,
+          radioValue: value2,
+          radioName: name || "",
+          radioChecked: true
+        });
+      }
+    }
+  };
+  return /* @__PURE__ */ React.createElement(TouchableOpacity, { ref, disabled, style: styles.container, onPress: () => handleClick(value != null ? value : "") }, /* @__PURE__ */ React.createElement(View, { style: styles.radio, testID: id }, checked && /* @__PURE__ */ React.createElement(View, { style: styles.icon })), label && typeof label.valueOf() === "string" ? /* @__PURE__ */ React.createElement(Text_native_default, { style: styles.label }, String(label)) : label);
+});
+Radio.displayName = "Radio" /* Radio */;
+var Radio_native_default = Radio;
+
+export {
+  Radio_native_default
+};

package/lib/{chunk-KQV6UPEF.mjs → chunk-BBXAF6LS.mjs}

@@ -2,6 +2,9 @@
 import {
   isRequiredChild
 } from "./chunk-TFRD43SL.mjs";
+import {
+  Text_default
+} from "./chunk-HHE7L3CW.mjs";
 import {
   is
 } from "./chunk-SWVRRUW7.mjs";
@@ -19,9 +22,10 @@ import {
 import clsx from "clsx";
 import * as React from "react";
 var CheckboxList = React.forwardRef(
-  ({ className, id, align, horizontalMobile, verticalDesktop, accessibilityLabelledBy, children, ...others }, ref) => {
+  ({ className, id, align, horizontalMobile, verticalDesktop, accessibilityLabelledBy, children, label, ...others }, ref) => {
     const { styled } = useTrilogyContext();
-    return /* @__PURE__ */ React.createElement(
+    const groupLabelClasses = hashClass(styled, "group-label");
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, label && /* @__PURE__ */ React.createElement("p", { className: groupLabelClasses }, label, isRequiredChild(children) && /* @__PURE__ */ React.createElement(Text_default, { markup: "span" /* SPAN */, typo: "has-text-error" /* TEXT_ERROR */ }, " ", "*")), /* @__PURE__ */ React.createElement(
       "div",
       {
         ref,
@@ -42,7 +46,7 @@ var CheckboxList = React.forwardRef(
         ...others
       },
       children
-    );
+    ));
   }
 );
 CheckboxList.displayName = "CheckboxList" /* CheckboxList */;

package/lib/{chunk-TBFT5WCF.mjs → chunk-BD73QGIH.mjs}

@@ -1,7 +1,7 @@
 "use client";
 import {
   TabsContext
-} from "./chunk-SWFBV5TR.mjs";
+} from "./chunk-OAENQH2X.mjs";
 import {
   is
 } from "./chunk-SWVRRUW7.mjs";

package/lib/{chunk-RZ4YLRVA.mjs → chunk-BIWBGSDJ.mjs}

@@ -1,7 +1,7 @@
 "use client";
 import {
   ListItem_native_default
-} from "./chunk-UESRINZG.mjs";
+} from "./chunk-3I74MN5M.mjs";
 
 // components/list/item/index.native.ts
 var index_native_default = ListItem_native_default;

package/lib/chunk-C3VH34J4.mjs

@@ -0,0 +1,91 @@
+"use client";
+import {
+  ViewMarkup
+} from "./chunk-EFIZDE7C.mjs";
+import {
+  getBackgroundClassName
+} from "./chunk-XXKEMYTB.mjs";
+import {
+  has,
+  is
+} from "./chunk-SWVRRUW7.mjs";
+import {
+  hashClass
+} from "./chunk-UFMRE754.mjs";
+import {
+  useTrilogyContext
+} from "./chunk-ZB4OWTDD.mjs";
+import {
+  getLoadingClassName
+} from "./chunk-UTA75ELV.mjs";
+import {
+  getJustifyClassName
+} from "./chunk-L4UDEKQK.mjs";
+import {
+  getAlignClassName
+} from "./chunk-CD6DMMCL.mjs";
+
+// components/view/View.tsx
+import clsx from "clsx";
+import * as React from "react";
+var View = React.forwardRef(({
+  children,
+  style,
+  className,
+  loading,
+  onClick,
+  backgroundColor,
+  backgroundSrc,
+  inverted,
+  fullwidth = true,
+  markup,
+  flexable,
+  justify,
+  align,
+  ...others
+}, ref) => {
+  const { styled } = useTrilogyContext();
+  const isCorrectMarkup = (stringMarkup) => {
+    if (stringMarkup in ViewMarkup || Object.values(ViewMarkup).includes(stringMarkup))
+      return true;
+  };
+  const Tag = markup && isCorrectMarkup(markup) ? markup : "div";
+  const classes = hashClass(
+    styled,
+    clsx(
+      typeof loading === "string" && is(getLoadingClassName(loading)),
+      typeof loading === "boolean" ? is("loading") : is("loaded"),
+      backgroundColor && has(getBackgroundClassName(backgroundColor)),
+      backgroundSrc && has("background"),
+      inverted && is("inverted") || is("base"),
+      fullwidth && is("fullwidth"),
+      flexable && is("flex"),
+      typeof justify === "string" && is(getJustifyClassName(justify)),
+      typeof align === "string" && is(getAlignClassName(align)),
+      className
+    )
+  );
+  return /* @__PURE__ */ React.createElement(
+    Tag,
+    {
+      ref,
+      onClick,
+      style,
+      className: classes,
+      ...backgroundSrc && {
+        style: {
+          backgroundImage: `url(${backgroundSrc})`,
+          backgroundSize: "cover",
+          backgroundPosition: "50%"
+        }
+      },
+      ...others
+    },
+    children
+  );
+});
+var View_default = View;
+
+export {
+  View_default
+};

package/lib/chunk-C4ZXSLQP.mjs

@@ -0,0 +1,12 @@
+"use client";
+
+// components/calendar/Calendar.native.tsx
+import React from "react";
+var Calendar = () => {
+  return /* @__PURE__ */ React.createElement(React.Fragment, null);
+};
+var Calendar_native_default = Calendar;
+
+export {
+  Calendar_native_default
+};

package/lib/{chunk-7GB6GKGD.mjs → chunk-CCIRXOIR.mjs}

@@ -1,21 +1,22 @@
 "use client";
 import {
   useGauge
-} from "./chunk-J4TV7QTJ.mjs";
+} from "./chunk-2SIDIWLZ.mjs";
 import {
   Text_native_default
-} from "./chunk-2AL4D3MJ.mjs";
+} from "./chunk-MVQ252OA.mjs";
 import {
   Icon_native_default
-} from "./chunk-H6FVJB5Z.mjs";
+} from "./chunk-UPP3GX33.mjs";
 import {
   getColorStyle
-} from "./chunk-VI2KFLCZ.mjs";
+} from "./chunk-E4YRRUI3.mjs";
 
 // components/input/gauge/InputGauge.native.tsx
-import React from "react";
+import React, { useId } from "react";
 import { StyleSheet, View } from "react-native";
-var InputGauge = ({ validationRules, inputValue }) => {
+var InputGauge = ({ validationRules, inputValue, securityRules }) => {
+  const id = useId();
   const {
     widthGauge,
     colorGauge,
@@ -24,15 +25,26 @@ var InputGauge = ({ validationRules, inputValue }) => {
     isLowerercaseVerify,
     isNumberVerify,
     isSpecialCharsVerify,
-    isUppercaseVerify
-  } = useGauge({ validationRules, inputValue });
-  return /* @__PURE__ */ React.createElement(View, null, /* @__PURE__ */ React.createElement(View, { style: [styles.containerGauge, { backgroundColor: getColorStyle("MAIN_FADE" /* MAIN_FADE */) }] }, /* @__PURE__ */ React.createElement(View, { style: [styles.gauge, { width: widthGauge, backgroundColor: colorGauge() }] })), /* @__PURE__ */ React.createElement(View, { style: styles.verifies }, /* @__PURE__ */ React.createElement(View, null, /* @__PURE__ */ React.createElement(
+    isUppercaseVerify,
+    rules
+  } = useGauge({ validationRules, inputValue, securityRules });
+  return /* @__PURE__ */ React.createElement(View, null, /* @__PURE__ */ React.createElement(View, { style: [styles.containerGauge, { backgroundColor: getColorStyle("MAIN_FADE" /* MAIN_FADE */) }] }, /* @__PURE__ */ React.createElement(View, { style: [styles.gauge, { width: widthGauge, backgroundColor: colorGauge() }] })), /* @__PURE__ */ React.createElement(View, { style: styles.verifies }, validationRules && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.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__ */ React.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__ */ React.createElement(
     DataVerify,
@@ -40,51 +52,63 @@ var InputGauge = ({ validationRules, inputValue }) => {
       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__ */ React.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__ */ React.createElement(View, null, /* @__PURE__ */ React.createElement(
+  ), /* @__PURE__ */ React.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__ */ React.createElement(
+  )), securityRules && rules && rules.map((rule, index) => /* @__PURE__ */ React.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__ */ React.createElement(View, { style: styles.verify }, /* @__PURE__ */ React.createElement(Icon_native_default, { color, name: iconName, size: "smaller" /* SMALLER */ }), /* @__PURE__ */ React.createElement(Text_native_default, { style: styles.textVerify }, type));
+  return /* @__PURE__ */ React.createElement(View, { style: [styles.verify, index % 2 === 0 ? styles.even : void 0] }, /* @__PURE__ */ React.createElement(Icon_native_default, { color, name: iconName, size: "smaller" /* SMALLER */ }), /* @__PURE__ */ React.createElement(Text_native_default, { style: styles.textVerify }, type));
 };
 var InputGauge_native_default = InputGauge;
 var styles = 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,

package/lib/chunk-CCMHIAAZ.mjs

@@ -0,0 +1,35 @@
+"use client";
+import {
+  getColorStyle
+} from "./chunk-E4YRRUI3.mjs";
+
+// components/section/Section.native.tsx
+import * as React from "react";
+import { ImageBackground, StyleSheet, View } from "react-native";
+var Section = React.forwardRef(({ backgroundColor, backgroundSrc, children, style, ...others }, ref) => {
+  const colorBgc = getColorStyle("WHITE" /* BACKGROUND */);
+  const styles = StyleSheet.create({
+    container: {
+      backgroundColor: backgroundSrc ? void 0 : backgroundColor ? getColorStyle(backgroundColor) : colorBgc,
+      paddingVertical: 32,
+      paddingHorizontal: 24
+    }
+  });
+  if (backgroundSrc) {
+    return /* @__PURE__ */ React.createElement(
+      ImageBackground,
+      {
+        resizeMode: "cover",
+        source: typeof backgroundSrc === "number" ? backgroundSrc : { uri: backgroundSrc }
+      },
+      /* @__PURE__ */ React.createElement(View, { ref, style: [styles.container, style], ...others }, children)
+    );
+  }
+  return /* @__PURE__ */ React.createElement(View, { ref, style: [styles.container, style], ...others }, children);
+});
+Section.displayName = "Section" /* Section */;
+var Section_native_default = Section;
+
+export {
+  Section_native_default
+};