react-native-better-html 1.0.25 → 1.0.26

package/dist/index.mjs

@@ -1,6 +1,6 @@
 // src/index.ts
 import {
-  useTheme as useTheme16,
+  useTheme as useTheme17,
   useLoader as useLoader2,
   useLoaderControls,
   countries,
@@ -1602,11 +1602,24 @@ function generateAsyncStorage() {
   };
 }
 
+// src/components/Label.tsx
+import { memo as memo11 } from "react";
+import { useTheme as useTheme10 } from "react-better-core";
+import { jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
+function Label({ text, required, isError }) {
+  const theme2 = useTheme10();
+  return /* @__PURE__ */ jsxs5(View_default, { isRow: true, alignItems: "center", gap: 2, children: [
+    text && /* @__PURE__ */ jsx11(Text_default, { fontSize: 14, color: isError ? theme2.colors.error : theme2.colors.textSecondary, children: text }),
+    required && /* @__PURE__ */ jsx11(Text_default, { color: theme2.colors.error, children: "*" })
+  ] });
+}
+var Label_default = memo11(Label);
+
 // src/components/ScreenHolder.tsx
-import { memo as memo11, useCallback as useCallback5, useMemo as useMemo8 } from "react";
+import { memo as memo12, useCallback as useCallback5, useMemo as useMemo8 } from "react";
 import { KeyboardAvoidingView, Platform as Platform4, RefreshControl, ScrollView } from "react-native";
-import { useBooleanState as useBooleanState3, useTheme as useTheme10 } from "react-better-core";
-import { jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
+import { useBooleanState as useBooleanState3, useTheme as useTheme11 } from "react-better-core";
+import { jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
 var ScreenHolderComponent = ({
   noScroll,
   noSideSpace,
@@ -1624,7 +1637,7 @@ var ScreenHolderComponent = ({
   withNoHeader,
   children
 }) => {
-  const theme2 = useTheme10();
+  const theme2 = useTheme11();
   const device = useDevice();
   const keyboard = useKeyboard();
   const [isRefreshing, setIsRefreshing] = useBooleanState3();
@@ -1642,7 +1655,7 @@ var ScreenHolderComponent = ({
       onRefreshEnd?.();
     }, refreshTimeout * 1e3);
   }, [onRefresh, onRefreshEnd, refreshTimeout]);
-  const content = /* @__PURE__ */ jsx11(
+  const content = /* @__PURE__ */ jsx12(
     View_default,
     {
       flex: 1,
@@ -1653,21 +1666,21 @@ var ScreenHolderComponent = ({
     }
   );
   const withRefresh = onRefresh || onRefreshEnd;
-  return /* @__PURE__ */ jsx11(View_default, { flex: 1, backgroundColor: backgroundColor ?? theme2.colors.backgroundBase, children: /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsx12(View_default, { flex: 1, backgroundColor: backgroundColor ?? theme2.colors.backgroundBase, children: /* @__PURE__ */ jsxs6(
     KeyboardAvoidingView,
     {
       style: keyboardAvoidingViewStyle,
       keyboardVerticalOffset: keyboardVerticalOffset ?? (withNoHeader ? Platform4.OS === "ios" ? 0 : theme2.styles.gap : keepFooterOnKeyboardOpened ? Platform4.OS === "ios" ? device.safeArea.afterCalculations.bottom : theme2.styles.gap : void 0),
       behavior: Platform4.OS === "ios" ? "padding" : "height",
       children: [
-        /* @__PURE__ */ jsx11(View_default, { flex: 1, children: noScroll ? content : /* @__PURE__ */ jsx11(
+        /* @__PURE__ */ jsx12(View_default, { flex: 1, children: noScroll ? content : /* @__PURE__ */ jsx12(
           ScrollView,
           {
-            refreshControl: withRefresh ? /* @__PURE__ */ jsx11(RefreshControl, { refreshing: isRefreshing, onRefresh: onRefreshElement }) : void 0,
+            refreshControl: withRefresh ? /* @__PURE__ */ jsx12(RefreshControl, { refreshing: isRefreshing, onRefresh: onRefreshElement }) : void 0,
             children: content
           }
         ) }),
-        keepFooterOnKeyboardOpened || (Platform4.OS === "ios" ? !keyboard.willOpen : !keyboard.isOpened) ? footer && /* @__PURE__ */ jsx11(View_default, { children: footer }) : !withNoHeader && /* @__PURE__ */ jsx11(
+        keepFooterOnKeyboardOpened || (Platform4.OS === "ios" ? !keyboard.willOpen : !keyboard.isOpened) ? footer && /* @__PURE__ */ jsx12(View_default, { children: footer }) : !withNoHeader && /* @__PURE__ */ jsx12(
           View_default,
           {
             width: "100%",
@@ -1685,10 +1698,10 @@ ScreenHolderComponent.footer = function Footer({
   withNoHeader,
   children
 }) {
-  const theme2 = useTheme10();
+  const theme2 = useTheme11();
   const device = useDevice();
   const keyboard = useKeyboard();
-  return /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx12(
     View_default,
     {
       backgroundColor: backgroundColor ?? theme2.colors.backgroundBase,
@@ -1699,14 +1712,14 @@ ScreenHolderComponent.footer = function Footer({
     }
   );
 };
-var ScreenHolder = memo11(ScreenHolderComponent);
+var ScreenHolder = memo12(ScreenHolderComponent);
 ScreenHolder.footer = ScreenHolderComponent.footer;
 var ScreenHolder_default = ScreenHolder;
 
 // src/components/InputField.tsx
 import {
   forwardRef,
-  memo as memo12,
+  memo as memo13,
   useCallback as useCallback6,
   useEffect as useEffect6,
   useImperativeHandle,
@@ -1726,9 +1739,9 @@ import {
   lightenColor,
   useBetterCoreContext as useBetterCoreContext4,
   useBooleanState as useBooleanState4,
-  useTheme as useTheme11
+  useTheme as useTheme12
 } from "react-better-core";
-import { Fragment as Fragment4, jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
 var InputFieldComponent = forwardRef(
   ({
     flex,
@@ -1780,7 +1793,7 @@ var InputFieldComponent = forwardRef(
     onPressEnter,
     ...props
   }, ref) => {
-    const theme2 = useTheme11();
+    const theme2 = useTheme12();
     const { colorTheme } = useBetterCoreContext4();
     const textInputRef = useRef3(null);
     const [internalValue, setInternalValue] = useState3(value?.toString() || defaultValue || "");
@@ -1898,12 +1911,9 @@ var InputFieldComponent = forwardRef(
     }, []);
     const withPressInputField = !!onPress || type === "date" || type === "time";
     const prefixSuffixBackgroundColor = colorTheme === "light" ? darkenColor(theme2.colors.backgroundContent, 0.03) : lightenColor(theme2.colors.backgroundContent, 0.1);
-    const labelComponent = label && /* @__PURE__ */ jsxs6(View_default, { isRow: true, alignItems: "center", gap: 2, children: [
-      /* @__PURE__ */ jsx12(Text_default, { fontSize: 14, color: isError ? theme2.colors.error : theme2.colors.textSecondary, children: label }),
-      required && /* @__PURE__ */ jsx12(Text_default, { color: theme2.colors.error, children: "*" })
-    ] });
+    const labelComponent = label ? /* @__PURE__ */ jsx13(Label_default, { text: label, isError, required }) : void 0;
     const borderColor = isFocused ? theme2.colors.primary : isError ? theme2.colors.error : theme2.colors.border;
-    return /* @__PURE__ */ jsxs6(
+    return /* @__PURE__ */ jsxs7(
       Animate_default.View,
       {
         flex,
@@ -1913,8 +1923,8 @@ var InputFieldComponent = forwardRef(
         ...props,
         children: [
           isIOSDateTime && !iOSDateTimeFullSize ? void 0 : labelComponent,
-          /* @__PURE__ */ jsxs6(View_default, { isRow: true, position: "relative", alignItems: "center", height: readyHeight, children: [
-            prefix && /* @__PURE__ */ jsxs6(
+          /* @__PURE__ */ jsxs7(View_default, { isRow: true, position: "relative", alignItems: "center", height: readyHeight, children: [
+            prefix && /* @__PURE__ */ jsxs7(
               View_default,
               {
                 isRow: true,
@@ -1932,8 +1942,8 @@ var InputFieldComponent = forwardRef(
                 zIndex: 1,
                 onPress: onPressPrefix,
                 children: [
-                  typeof prefix === "string" ? /* @__PURE__ */ jsx12(Text_default, { fontWeight: 700, lineHeight, children: prefix }) : prefix,
-                  /* @__PURE__ */ jsx12(
+                  typeof prefix === "string" ? /* @__PURE__ */ jsx13(Text_default, { fontWeight: 700, lineHeight, children: prefix }) : prefix,
+                  /* @__PURE__ */ jsx13(
                     Animate_default.View,
                     {
                       position: "absolute",
@@ -1948,9 +1958,9 @@ var InputFieldComponent = forwardRef(
                 ]
               }
             ),
-            isIOSDateTime ? /* @__PURE__ */ jsxs6(Fragment4, { children: [
+            isIOSDateTime ? /* @__PURE__ */ jsxs7(Fragment4, { children: [
               !iOSDateTimeFullSize ? labelComponent : void 0,
-              /* @__PURE__ */ jsx12(
+              /* @__PURE__ */ jsx13(
                 RNDateTimePicker,
                 {
                   value: internalDateValue ?? /* @__PURE__ */ new Date(),
@@ -1962,7 +1972,7 @@ var InputFieldComponent = forwardRef(
                   onValueChange: onValueChangeRNDateTimePicker
                 }
               )
-            ] }) : /* @__PURE__ */ jsx12(
+            ] }) : /* @__PURE__ */ jsx13(
               View_default,
               {
                 flex: 1,
@@ -1973,7 +1983,7 @@ var InputFieldComponent = forwardRef(
                 borderBottomRightRadius: suffix ? 0 : theme2.styles.borderRadius,
                 pressStrength: 1,
                 onPress: Platform5.OS === "android" ? editable === false || withPressInputField ? onPressInputField : void 0 : void 0,
-                children: /* @__PURE__ */ jsxs6(
+                children: /* @__PURE__ */ jsxs7(
                   Animate_default.View,
                   {
                     position: "relative",
@@ -1991,7 +2001,7 @@ var InputFieldComponent = forwardRef(
                     animateBorderColor: borderColor,
                     overflow: "hidden",
                     children: [
-                      leftIcon && /* @__PURE__ */ jsx12(
+                      leftIcon && /* @__PURE__ */ jsx13(
                         Icon_default,
                         {
                           position: "absolute",
@@ -2004,7 +2014,7 @@ var InputFieldComponent = forwardRef(
                           onPress: onPressLeftIcon
                         }
                       ),
-                      /* @__PURE__ */ jsx12(
+                      /* @__PURE__ */ jsx13(
                         TextInput2,
                         {
                           style: textInputStyle,
@@ -2037,7 +2047,7 @@ var InputFieldComponent = forwardRef(
                           ref: textInputRef
                         }
                       ),
-                      rightIcon && /* @__PURE__ */ jsx12(
+                      rightIcon && /* @__PURE__ */ jsx13(
                         Icon_default,
                         {
                           position: "absolute",
@@ -2055,7 +2065,7 @@ var InputFieldComponent = forwardRef(
                 )
               }
             ),
-            suffix && /* @__PURE__ */ jsxs6(
+            suffix && /* @__PURE__ */ jsxs7(
               View_default,
               {
                 isRow: true,
@@ -2073,8 +2083,8 @@ var InputFieldComponent = forwardRef(
                 zIndex: 1,
                 onPress: onPressSuffix,
                 children: [
-                  typeof suffix === "string" ? /* @__PURE__ */ jsx12(Text_default, { fontWeight: 700, lineHeight, children: suffix }) : suffix,
-                  /* @__PURE__ */ jsx12(
+                  typeof suffix === "string" ? /* @__PURE__ */ jsx13(Text_default, { fontWeight: 700, lineHeight, children: suffix }) : suffix,
+                  /* @__PURE__ */ jsx13(
                     Animate_default.View,
                     {
                       position: "absolute",
@@ -2090,7 +2100,7 @@ var InputFieldComponent = forwardRef(
               }
             )
           ] }),
-          infoMessage && /* @__PURE__ */ jsx12(
+          infoMessage && /* @__PURE__ */ jsx13(
             Animate_default.Text,
             {
               fontSize: 14,
@@ -2102,7 +2112,7 @@ var InputFieldComponent = forwardRef(
               children: infoMessage
             }
           ),
-          errorMessage && /* @__PURE__ */ jsx12(
+          errorMessage && /* @__PURE__ */ jsx13(
             Animate_default.Text,
             {
               fontSize: 14,
@@ -2120,7 +2130,7 @@ var InputFieldComponent = forwardRef(
   }
 );
 InputFieldComponent.email = forwardRef(function Email(props, ref) {
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx13(
     InputFieldComponent,
     {
       placeholder: "your@email.here",
@@ -2143,7 +2153,7 @@ InputFieldComponent.password = forwardRef(function Password(props, ref) {
   useImperativeHandle(ref, () => {
     return inputFieldRef.current;
   }, []);
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx13(
     InputFieldComponent,
     {
       secureTextEntry: !showPassword,
@@ -2159,11 +2169,11 @@ InputFieldComponent.password = forwardRef(function Password(props, ref) {
   );
 });
 InputFieldComponent.search = forwardRef(function Search(props, ref) {
-  return /* @__PURE__ */ jsx12(InputFieldComponent, { placeholder: "Search...", leftIcon: "magnifyingGlass", ...props, ref });
+  return /* @__PURE__ */ jsx13(InputFieldComponent, { placeholder: "Search...", leftIcon: "magnifyingGlass", ...props, ref });
 });
 InputFieldComponent.code = forwardRef(function Password2({ isSmall, ...props }, ref) {
-  const theme2 = useTheme11();
-  return /* @__PURE__ */ jsx12(
+  const theme2 = useTheme12();
+  return /* @__PURE__ */ jsx13(
     InputFieldComponent,
     {
       flex: 1,
@@ -2178,7 +2188,7 @@ InputFieldComponent.code = forwardRef(function Password2({ isSmall, ...props },
     }
   );
 });
-var InputField = memo12(InputFieldComponent);
+var InputField = memo13(InputFieldComponent);
 InputField.email = InputFieldComponent.email;
 InputField.password = InputFieldComponent.password;
 InputField.search = InputFieldComponent.search;
@@ -2186,12 +2196,12 @@ InputField.code = InputFieldComponent.code;
 var InputField_default = InputField;
 
 // src/components/Switch.tsx
-import { memo as memo13, useCallback as useCallback7, useEffect as useEffect7, useMemo as useMemo10 } from "react";
+import { memo as memo14, useCallback as useCallback7, useEffect as useEffect7, useMemo as useMemo10 } from "react";
 import { Switch as NativeSwitch, Platform as Platform6 } from "react-native";
-import { useBooleanState as useBooleanState5, useTheme as useTheme12 } from "react-better-core";
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { useBooleanState as useBooleanState5, useTheme as useTheme13 } from "react-better-core";
+import { jsx as jsx14 } from "react/jsx-runtime";
 function Switch({ isEnabled, defaultIsEnabled, disabled, onChange }) {
-  const theme2 = useTheme12();
+  const theme2 = useTheme13();
   const [enabled, setEnabled] = useBooleanState5(isEnabled ?? defaultIsEnabled);
   const onPressElement = useCallback7(() => {
     onChange?.(!enabled);
@@ -2211,7 +2221,7 @@ function Switch({ isEnabled, defaultIsEnabled, disabled, onChange }) {
   const ballSize = 26;
   const ballGap = 3;
   const holderWidth = ballSize * 2.1;
-  return Platform6.OS === "ios" ? /* @__PURE__ */ jsx13(
+  return Platform6.OS === "ios" ? /* @__PURE__ */ jsx14(
     NativeSwitch,
     {
       trackColor,
@@ -2220,7 +2230,7 @@ function Switch({ isEnabled, defaultIsEnabled, disabled, onChange }) {
       value: enabled,
       disabled
     }
-  ) : /* @__PURE__ */ jsx13(
+  ) : /* @__PURE__ */ jsx14(
     View_default,
     {
       width: holderWidth,
@@ -2228,7 +2238,7 @@ function Switch({ isEnabled, defaultIsEnabled, disabled, onChange }) {
       pressStrength: pressStrength().p05,
       disabled,
       onPress: !disabled ? onPressElement : void 0,
-      children: /* @__PURE__ */ jsx13(
+      children: /* @__PURE__ */ jsx14(
         Animate_default.View,
         {
           width: "100%",
@@ -2238,7 +2248,7 @@ function Switch({ isEnabled, defaultIsEnabled, disabled, onChange }) {
           animateBackgroundColor: enabled ? theme2.colors.primary : theme2.colors.border,
           initialOpacity: 1,
           animateOpacity: disabled ? 0.6 : 1,
-          children: /* @__PURE__ */ jsx13(
+          children: /* @__PURE__ */ jsx14(
             Animate_default.View,
             {
               width: ballSize,
@@ -2258,15 +2268,23 @@ function Switch({ isEnabled, defaultIsEnabled, disabled, onChange }) {
     }
   );
 }
-var Switch_default = memo13(Switch);
+var Switch_default = memo14(Switch);
 
 // src/components/CheckBox.tsx
-import { memo as memo14, useCallback as useCallback8, useEffect as useEffect8 } from "react";
+import { memo as memo15, useCallback as useCallback8, useEffect as useEffect8 } from "react";
 import { Platform as Platform7 } from "react-native";
-import { useBooleanState as useBooleanState6, useTheme as useTheme13 } from "react-better-core";
-import { jsx as jsx14 } from "react/jsx-runtime";
-function CheckBox({ isChecked, defaultIsChecked, size = 36, disabled, onChange }) {
-  const theme2 = useTheme13();
+import { useBooleanState as useBooleanState6, useTheme as useTheme14 } from "react-better-core";
+import { Fragment as Fragment5, jsx as jsx15, jsxs as jsxs8 } from "react/jsx-runtime";
+function CheckBox({
+  isChecked,
+  defaultIsChecked,
+  size = 36,
+  text,
+  required,
+  disabled,
+  onChange
+}) {
+  const theme2 = useTheme14();
   const [checked, setChecked] = useBooleanState6(isChecked ?? defaultIsChecked);
   const onPressElement = useCallback8(() => {
     onChange?.(!checked);
@@ -2276,7 +2294,7 @@ function CheckBox({ isChecked, defaultIsChecked, size = 36, disabled, onChange }
     if (isChecked === void 0) return;
     setChecked.setState(isChecked);
   }, [isChecked]);
-  return /* @__PURE__ */ jsx14(
+  const checkBox = /* @__PURE__ */ jsx15(
     View_default,
     {
       width: size,
@@ -2284,7 +2302,7 @@ function CheckBox({ isChecked, defaultIsChecked, size = 36, disabled, onChange }
       pressStrength: pressStrength().p05,
       disabled,
       onPress: !disabled ? onPressElement : void 0,
-      children: /* @__PURE__ */ jsx14(
+      children: /* @__PURE__ */ jsx15(
         Animate_default.View,
         {
           width: "100%",
@@ -2297,7 +2315,7 @@ function CheckBox({ isChecked, defaultIsChecked, size = 36, disabled, onChange }
           animateBorderColor: checked ? theme2.colors.primary : theme2.colors.border,
           initialOpacity: 1,
           animateOpacity: disabled ? 0.6 : 1,
-          children: /* @__PURE__ */ jsx14(
+          children: /* @__PURE__ */ jsx15(
             Animate_default.View,
             {
               width: "100%",
@@ -2309,7 +2327,7 @@ function CheckBox({ isChecked, defaultIsChecked, size = 36, disabled, onChange }
               transitionStiffness: 230,
               initialScale: 0,
               animateScale: checked ? 1 : 0,
-              children: /* @__PURE__ */ jsx14(
+              children: /* @__PURE__ */ jsx15(
                 Icon_default,
                 {
                   name: "check",
@@ -2324,17 +2342,34 @@ function CheckBox({ isChecked, defaultIsChecked, size = 36, disabled, onChange }
       )
     }
   );
+  return text ? /* @__PURE__ */ jsx15(Fragment5, { children: /* @__PURE__ */ jsxs8(View_default, { isRow: true, alignItems: "center", gap: theme2.styles.gap, children: [
+    checkBox,
+    /* @__PURE__ */ jsx15(
+      View_default,
+      {
+        width: "100%",
+        flexShrink: 1,
+        pressType: "opacity",
+        pressStrength: pressStrength().p3,
+        onPress: onPressElement,
+        children: /* @__PURE__ */ jsxs8(View_default, { isRow: true, alignItems: "flex-start", gap: 2, children: [
+          /* @__PURE__ */ jsx15(View_default, { flexShrink: 1, children: typeof text === "string" ? /* @__PURE__ */ jsx15(Text_default, { children: text }) : text }),
+          required && /* @__PURE__ */ jsx15(Label_default, { required: true })
+        ] })
+      }
+    )
+  ] }) }) : checkBox;
 }
-var CheckBox_default = memo14(CheckBox);
+var CheckBox_default = memo15(CheckBox);
 
 // src/components/StatusBar.tsx
-import { memo as memo15 } from "react";
-import { useTheme as useTheme14 } from "react-better-core";
+import { memo as memo16 } from "react";
+import { useTheme as useTheme15 } from "react-better-core";
 import { StatusBar as NativeStatusBar, Platform as Platform8 } from "react-native";
-import { jsx as jsx15 } from "react/jsx-runtime";
+import { jsx as jsx16 } from "react/jsx-runtime";
 function StatusBar({ darkStatusBar, hidden, barStyle, androidBarStyle, iOSBarStyle }) {
-  const theme2 = useTheme14();
-  return /* @__PURE__ */ jsx15(
+  const theme2 = useTheme15();
+  return /* @__PURE__ */ jsx16(
     NativeStatusBar,
     {
       backgroundColor: darkStatusBar ? theme2.colors.backgroundSecondary : void 0,
@@ -2343,12 +2378,12 @@ function StatusBar({ darkStatusBar, hidden, barStyle, androidBarStyle, iOSBarSty
     }
   );
 }
-var StatusBar_default = memo15(StatusBar);
+var StatusBar_default = memo16(StatusBar);
 
 // src/components/ListItem.tsx
-import { memo as memo16 } from "react";
-import { useTheme as useTheme15 } from "react-better-core";
-import { Fragment as Fragment5, jsx as jsx16, jsxs as jsxs7 } from "react/jsx-runtime";
+import { memo as memo17 } from "react";
+import { useTheme as useTheme16 } from "react-better-core";
+import { Fragment as Fragment6, jsx as jsx17, jsxs as jsxs9 } from "react/jsx-runtime";
 function ListItem({
   icon,
   iconIOS,
@@ -2366,10 +2401,10 @@ function ListItem({
   checkBoxIsChecked,
   checkBoxOnChange
 }) {
-  const theme2 = useTheme15();
+  const theme2 = useTheme16();
   const device = useDevice();
   const sideSpace = theme2.styles.space;
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx17(
     View_default,
     {
       width: insideScreenHolder ? device.windowDimensions.width : "100%",
@@ -2379,15 +2414,15 @@ function ListItem({
       paddingHorizontal: sideSpace,
       pressStrength: pressStrength().p05,
       onPress,
-      children: /* @__PURE__ */ jsxs7(View_default, { isRow: true, alignItems: "center", gap: theme2.styles.space, children: [
-        icon && /* @__PURE__ */ jsx16(Icon_default, { name: icon, nameIOS: iconIOS, size: 22, color: theme2.colors.primary }),
-        /* @__PURE__ */ jsx16(View_default, { flex: 1, flexDirection: "row", alignItems: "center", gap: theme2.styles.gap, children: /* @__PURE__ */ jsxs7(View_default, { flex: 1, children: [
-          title && /* @__PURE__ */ jsx16(Text_default, { fontSize: 20, fontWeight: 700, children: title }),
-          description && /* @__PURE__ */ jsx16(Text_default.body, { selectable: descriptionSelectable, children: description })
+      children: /* @__PURE__ */ jsxs9(View_default, { isRow: true, alignItems: "center", gap: theme2.styles.space, children: [
+        icon && /* @__PURE__ */ jsx17(Icon_default, { name: icon, nameIOS: iconIOS, size: 22, color: theme2.colors.primary }),
+        /* @__PURE__ */ jsx17(View_default, { flex: 1, flexDirection: "row", alignItems: "center", gap: theme2.styles.gap, children: /* @__PURE__ */ jsxs9(View_default, { flex: 1, children: [
+          title && /* @__PURE__ */ jsx17(Text_default, { fontSize: 20, fontWeight: 700, children: title }),
+          description && /* @__PURE__ */ jsx17(Text_default.body, { selectable: descriptionSelectable, children: description })
         ] }) }),
-        rightElement ? /* @__PURE__ */ jsx16(Fragment5, { children: rightValue !== void 0 || rightElement === "arrow" ? /* @__PURE__ */ jsxs7(View_default, { isRow: true, alignItems: "center", gap: theme2.styles.gap / 2, children: [
-          rightValue !== void 0 && /* @__PURE__ */ jsx16(Text_default, { fontSize: 14, fontWeight: 700, selectable: rightValueSelectable, children: rightValue }),
-          rightElement === "arrow" && /* @__PURE__ */ jsx16(
+        rightElement ? /* @__PURE__ */ jsx17(Fragment6, { children: rightValue !== void 0 || rightElement === "arrow" ? /* @__PURE__ */ jsxs9(View_default, { isRow: true, alignItems: "center", gap: theme2.styles.gap / 2, children: [
+          rightValue !== void 0 && /* @__PURE__ */ jsx17(Text_default, { fontSize: 14, fontWeight: 700, selectable: rightValueSelectable, children: rightValue }),
+          rightElement === "arrow" && /* @__PURE__ */ jsx17(
             Icon_default,
             {
               name: "chevronRight",
@@ -2395,12 +2430,12 @@ function ListItem({
               color: rightValue !== void 0 ? theme2.colors.textPrimary : theme2.colors.textSecondary
             }
           )
-        ] }) : rightElement === "switch" ? /* @__PURE__ */ jsx16(Switch_default, { isEnabled: switchIsEnabled, onChange: switchOnChange }) : rightElement === "checkBox" ? /* @__PURE__ */ jsx16(CheckBox_default, { isChecked: checkBoxIsChecked, onChange: checkBoxOnChange }) : void 0 }) : void 0
+        ] }) : rightElement === "switch" ? /* @__PURE__ */ jsx17(Switch_default, { isEnabled: switchIsEnabled, onChange: switchOnChange }) : rightElement === "checkBox" ? /* @__PURE__ */ jsx17(CheckBox_default, { isChecked: checkBoxIsChecked, onChange: checkBoxOnChange }) : void 0 }) : void 0
       ] })
     }
   );
 }
-var ListItem_default = memo16(ListItem);
+var ListItem_default = memo17(ListItem);
 export {
   Animate_default as Animate,
   BetterComponentsProvider_default as BetterComponentsProvider,
@@ -2409,6 +2444,7 @@ export {
   Icon_default as Icon,
   Image_default as Image,
   InputField_default as InputField,
+  Label_default as Label,
   ListItem_default as ListItem,
   Loader_default as Loader,
   ScreenHolder_default as ScreenHolder,
@@ -2447,6 +2483,6 @@ export {
   useKeyboard,
   useLoader2 as useLoader,
   useLoaderControls,
-  useTheme16 as useTheme
+  useTheme17 as useTheme
 };
 //# sourceMappingURL=index.mjs.map