elseware-ui 3.0.12 → 3.0.13

package/dist/index.native.js

@@ -1,10 +1,10 @@
 'use strict';
 
+var react = require('react');
 var reactNative = require('react-native');
 var tailwindMerge = require('tailwind-merge');
-var react = require('react');
-var jsxRuntime = require('react/jsx-runtime');
-var jsxRuntime$1 = require('nativewind/jsx-runtime');
+var jsxRuntime$1 = require('react/jsx-runtime');
+var jsxRuntime = require('nativewind/jsx-runtime');
 var formik = require('formik');
 
 // src/components/data-entry/button/native/Button.native.tsx
@@ -29,6 +29,11 @@ function cn(...inputs) {
 }
 
 // src/utils/styles.ts
+function extractTextColorClasses(className) {
+  return className.split(/\s+/).filter(
+    (token) => token.startsWith("text-") || token.startsWith("dark:text-") || token.startsWith("disabled:text-")
+  ).join(" ");
+}
 function resolveAppearanceStyles({
   appearance = "solid",
   variant = "default",
@@ -51,7 +56,7 @@ var EUIProvider = ({
   children
 }) => {
   const [state, setState] = react.useState(config);
-  return /* @__PURE__ */ jsxRuntime.jsx(EUIContext.Provider, { value: { config: state, setConfig: setState }, children });
+  return /* @__PURE__ */ jsxRuntime$1.jsx(EUIContext.Provider, { value: { config: state, setConfig: setState }, children });
 };
 var useEUIConfig = () => {
   const ctx = react.useContext(EUIContext);
@@ -148,14 +153,6 @@ var shapes = {
 };
 
 // src/components/data-entry/button/base/Button.styles.ts
-var buttonShapes = shapes;
-var buttonIconSizes = {
-  xs: 14,
-  sm: 16,
-  md: 18,
-  lg: 20,
-  xl: 22
-};
 function resolveButtonVariantStyles({
   appearance,
   variant
@@ -168,164 +165,200 @@ function resolveButtonVariantStyles({
     ghost: variantsGhost
   });
 }
-function getButtonLabelColorClassName(className) {
-  return className.split(/\s+/).filter(
-    (token) => token.startsWith("text-") || token.startsWith("dark:text-") || token.startsWith("disabled:text-")
-  ).join(" ");
-}
 
-// src/components/data-entry/button/native/Button.native.styles.ts
-var nativeButtonSizes = {
+// src/components/data-entry/button/base/Button.tokens.ts
+var buttonSizeTokens = {
   xs: {
-    rootClassName: "min-h-[30px] px-2.5 py-1",
-    labelClassName: "text-xs leading-[14px]",
-    slotClassName: "h-[14px] w-[14px]"
+    padding: "px-2 py-1",
+    text: "text-xs",
+    icon: 14,
+    minHeight: "min-h-[30px]",
+    leading: "leading-[14px]",
+    slot: "h-[14px] w-[14px]"
   },
   sm: {
-    rootClassName: "min-h-9 px-3 py-1.5",
-    labelClassName: "text-sm leading-4",
-    slotClassName: "h-4 w-4"
+    padding: "px-3 py-1.5",
+    text: "text-sm",
+    icon: 16,
+    minHeight: "min-h-9",
+    leading: "leading-4",
+    slot: "h-4 w-4"
   },
   md: {
-    rootClassName: "min-h-11 px-4 py-2",
-    labelClassName: "text-[15px] leading-[18px]",
-    slotClassName: "h-[18px] w-[18px]"
+    padding: "px-4 py-2",
+    text: "text-base",
+    icon: 18,
+    minHeight: "min-h-11",
+    leading: "leading-[18px]",
+    slot: "h-[18px] w-[18px]"
   },
   lg: {
-    rootClassName: "min-h-[50px] px-[18px] py-3",
-    labelClassName: "text-[17px] leading-5",
-    slotClassName: "h-5 w-5"
+    padding: "px-5 py-3",
+    text: "text-lg",
+    icon: 20,
+    minHeight: "min-h-[50px]",
+    leading: "leading-5",
+    slot: "h-5 w-5"
   },
   xl: {
-    rootClassName: "min-h-14 px-[22px] py-4",
-    labelClassName: "text-[19px] leading-[22px]",
-    slotClassName: "h-[22px] w-[22px]"
+    padding: "px-6 py-4",
+    text: "text-xl",
+    icon: 22,
+    minHeight: "min-h-14",
+    leading: "leading-[22px]",
+    slot: "h-[22px] w-[22px]"
   }
 };
-var nativeLabelBaseStyle = {
-  includeFontPadding: false,
-  textAlignVertical: "center"
-};
-function Button({
-  icon,
-  text,
-  children,
-  loading = false,
-  disabled = false,
-  block = false,
-  compact = false,
-  mode,
-  contentClassName,
-  labelClassName,
-  className,
-  variant,
-  appearance,
-  shape,
-  size,
-  accessibilityRole = "button",
-  accessibilityState,
-  type: _type,
-  onClick: _onClick,
-  onMouseMove: _onMouseMove,
-  onPress,
-  ...rest
-}) {
+var buttonShapes = shapes;
+var buttonTextModeClassName = "border-transparent bg-transparent";
+
+// src/components/data-entry/button/base/useButton.ts
+function useButton(props) {
   const {
-    shape: resolvedShape,
-    size: resolvedSize,
-    variant: resolvedVariant,
-    appearance: resolvedAppearance
-  } = useResolvedButtonConfig({
-    compact,
+    // Consumed by the shared model
+    icon,
+    text,
+    children,
+    loading = false,
+    disabled = false,
+    block = false,
+    compact = false,
     mode,
     variant,
     appearance,
     shape,
-    size
-  });
-  const metrics = nativeButtonSizes[resolvedSize];
-  const iconSize = buttonIconSizes[resolvedSize];
-  const variantStyles = resolveButtonVariantStyles({
+    size,
+    accessibilityState,
+    onPress,
+    // Owned by the platform views — pulled out here only so `rootRest` is a
+    // clean pass-through (no library props leak onto the DOM / native root).
+    type: _type,
+    glow: _glow,
+    className: _className,
+    contentClassName: _contentClassName,
+    labelClassName: _labelClassName,
+    accessibilityLabel: _accessibilityLabel,
+    accessibilityRole: _accessibilityRole,
+    testID: _testID,
+    onClick: _onClick,
+    onMouseMove: _onMouseMove,
+    ...rootRest
+  } = props;
+  const { shape: resolvedShape, size: resolvedSize, variant: resolvedVariant, appearance: resolvedAppearance } = useResolvedButtonConfig({ compact, mode, variant, appearance, shape, size });
+  const tokens = buttonSizeTokens[resolvedSize];
+  const variantClassName = resolveButtonVariantStyles({
     appearance: resolvedAppearance,
     variant: resolvedVariant
   });
-  const labelColorClassName = getButtonLabelColorClassName(variantStyles);
-  const content = text ?? children;
-  const resolvedIcon = typeof icon === "function" ? icon({ color: "currentColor", size: iconSize }) : icon;
-  return /* @__PURE__ */ jsxRuntime$1.jsx(
-    reactNative.Pressable,
-    {
-      ...rest,
-      accessibilityRole,
-      accessibilityState: {
-        disabled: disabled || loading,
-        ...accessibilityState
-      },
-      className: cn(
-        "relative items-center justify-center overflow-hidden",
-        variantStyles,
-        buttonShapes[resolvedShape],
-        metrics.rootClassName,
-        block && "w-full",
-        mode === "text" && "border-transparent bg-transparent",
-        (disabled || loading) && "opacity-55",
-        !disabled && !loading && "active:opacity-80",
-        className
-      ),
-      disabled: disabled || loading,
-      onPress,
-      style: ({ pressed }) => [
-        pressed && !disabled && !loading ? { opacity: 0.82 } : null,
-        disabled || loading ? { opacity: 0.55 } : null
-      ],
-      children: /* @__PURE__ */ jsxRuntime$1.jsxs(
-        reactNative.View,
-        {
-          className: cn(
-            "z-10 flex-row items-center justify-center gap-2",
-            contentClassName
-          ),
-          children: [
-            loading ? /* @__PURE__ */ jsxRuntime$1.jsx(
-              reactNative.View,
-              {
-                className: cn(
-                  "shrink-0 items-center justify-center",
-                  metrics.slotClassName
-                ),
-                children: /* @__PURE__ */ jsxRuntime$1.jsx(reactNative.ActivityIndicator, { className: labelColorClassName, size: "small" })
-              }
-            ) : null,
-            !loading && resolvedIcon ? /* @__PURE__ */ jsxRuntime$1.jsx(
-              reactNative.View,
-              {
-                className: cn(
-                  "shrink-0 items-center justify-center",
-                  metrics.slotClassName
-                ),
-                children: resolvedIcon
-              }
-            ) : null,
-            typeof content === "string" || typeof content === "number" ? /* @__PURE__ */ jsxRuntime$1.jsx(reactNative.View, { className: "items-center justify-center", children: /* @__PURE__ */ jsxRuntime$1.jsx(
-              reactNative.Text,
-              {
-                className: cn(
-                  "font-bold",
-                  metrics.labelClassName,
-                  labelColorClassName,
-                  labelClassName
-                ),
-                numberOfLines: 1,
-                style: nativeLabelBaseStyle,
-                children: content
-              }
-            ) }) : content
-          ]
-        }
-      )
-    }
-  );
+  const label = text ?? children;
+  const resolvedIcon = typeof icon === "function" ? icon({ color: "currentColor", size: tokens.icon }) : icon;
+  const isBusy = disabled || loading;
+  return {
+    size: resolvedSize,
+    shape: resolvedShape,
+    tokens,
+    isBusy,
+    isInteractive: !isBusy,
+    isTextMode: mode === "text",
+    block,
+    loading,
+    iconSize: tokens.icon,
+    icon: resolvedIcon,
+    label,
+    hasTextLabel: typeof label === "string" || typeof label === "number",
+    variantClassName,
+    shapeClassName: buttonShapes[resolvedShape],
+    labelColorClassName: extractTextColorClasses(variantClassName),
+    selected: accessibilityState?.selected,
+    onPress,
+    rootRest
+  };
 }
+var NATIVE_ROOT = "relative items-center justify-center overflow-hidden";
+var nativeLabelBaseStyle = {
+  includeFontPadding: false,
+  textAlignVertical: "center"
+};
+var Button = react.forwardRef(
+  function Button2(props, ref) {
+    const {
+      className,
+      contentClassName,
+      labelClassName,
+      accessibilityLabel,
+      accessibilityRole = "button",
+      testID
+    } = props;
+    const model = useButton(props);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      reactNative.Pressable,
+      {
+        ...model.rootRest,
+        ref,
+        accessibilityLabel,
+        accessibilityRole,
+        accessibilityState: { disabled: model.isBusy, selected: model.selected },
+        testID,
+        disabled: model.isBusy,
+        onPress: model.onPress,
+        className: cn(
+          NATIVE_ROOT,
+          model.variantClassName,
+          model.shapeClassName,
+          model.tokens.padding,
+          model.tokens.minHeight,
+          model.block && "w-full",
+          model.isTextMode && buttonTextModeClassName,
+          model.isBusy ? "opacity-55" : "active:opacity-80",
+          className
+        ),
+        style: ({ pressed }) => pressed && model.isInteractive ? { opacity: 0.82 } : null,
+        children: /* @__PURE__ */ jsxRuntime.jsxs(
+          reactNative.View,
+          {
+            className: cn(
+              "z-10 flex-row items-center justify-center gap-2",
+              contentClassName
+            ),
+            children: [
+              (model.loading || model.icon) && /* @__PURE__ */ jsxRuntime.jsx(
+                reactNative.View,
+                {
+                  className: cn(
+                    "shrink-0 items-center justify-center",
+                    model.tokens.slot
+                  ),
+                  children: model.loading ? /* @__PURE__ */ jsxRuntime.jsx(
+                    reactNative.ActivityIndicator,
+                    {
+                      className: model.labelColorClassName,
+                      size: "small"
+                    }
+                  ) : model.icon
+                }
+              ),
+              model.hasTextLabel ? /* @__PURE__ */ jsxRuntime.jsx(
+                reactNative.Text,
+                {
+                  className: cn(
+                    "font-bold",
+                    model.tokens.text,
+                    model.tokens.leading,
+                    model.labelColorClassName,
+                    labelClassName
+                  ),
+                  numberOfLines: 1,
+                  style: nativeLabelBaseStyle,
+                  children: model.label
+                }
+              ) : model.label
+            ]
+          }
+        )
+      }
+    );
+  }
+);
 var Button_native_default = Button;
 function isMultiCheckbox(props) {
   return Array.isArray(props.options);
@@ -445,7 +478,7 @@ function Tick({
   checkedIconClassName,
   iconClassName
 }) {
-  return /* @__PURE__ */ jsxRuntime$1.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     reactNative.Text,
     {
       className: cn(
@@ -497,8 +530,8 @@ function Checkbox(checkboxProps) {
   const optionColumns = multiProps ? chunkCheckboxOptions(multiProps.options, multiProps.columns) : [];
   const singleChecked = singleField.value;
   const errorText = activeMeta.touched && typeof activeMeta.error === "string" ? activeMeta.error : null;
-  return /* @__PURE__ */ jsxRuntime$1.jsxs(reactNative.View, { className: cn(checkboxGroupClassName, groupClassName), children: [
-    !isMulti && /* @__PURE__ */ jsxRuntime$1.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { className: cn(checkboxGroupClassName, groupClassName), children: [
+    !isMulti && /* @__PURE__ */ jsxRuntime.jsxs(
       reactNative.Pressable,
       {
         accessibilityRole: "checkbox",
@@ -510,7 +543,7 @@ function Checkbox(checkboxProps) {
         disabled,
         onPress: () => singleHelpers.setValue(!singleChecked),
         children: [
-          /* @__PURE__ */ jsxRuntime$1.jsx(
+          /* @__PURE__ */ jsxRuntime.jsx(
             reactNative.View,
             {
               className: getIndicatorClassName({
@@ -522,7 +555,7 @@ function Checkbox(checkboxProps) {
                 resolvedShape,
                 variantCheckedClassName: variantStyles.checkedClassName
               }),
-              children: singleChecked ? /* @__PURE__ */ jsxRuntime$1.jsx(
+              children: singleChecked ? /* @__PURE__ */ jsxRuntime.jsx(
                 Tick,
                 {
                   checkedIconClassName,
@@ -531,11 +564,11 @@ function Checkbox(checkboxProps) {
               ) : null
             }
           ),
-          resolvedLabel ? /* @__PURE__ */ jsxRuntime$1.jsx(reactNative.Text, { className: cn(checkboxLabelClassName, labelClassName), children: resolvedLabel }) : null
+          resolvedLabel ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { className: cn(checkboxLabelClassName, labelClassName), children: resolvedLabel }) : null
         ]
       }
     ),
-    isMulti && multiProps ? /* @__PURE__ */ jsxRuntime$1.jsx(reactNative.View, { className: "w-full flex-row gap-6", children: optionColumns.map((columnOptions, columnIndex) => /* @__PURE__ */ jsxRuntime$1.jsx(
+    isMulti && multiProps ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { className: "w-full flex-row gap-6", children: optionColumns.map((columnOptions, columnIndex) => /* @__PURE__ */ jsxRuntime.jsx(
       reactNative.View,
       {
         className: "min-w-0 flex-1 flex-col gap-2",
@@ -543,7 +576,7 @@ function Checkbox(checkboxProps) {
           const values = multiField.value ?? [];
           const checked = values.includes(option.value);
           const optionDisabled = disabled || option.disabled === true;
-          return /* @__PURE__ */ jsxRuntime$1.jsxs(
+          return /* @__PURE__ */ jsxRuntime.jsxs(
             reactNative.Pressable,
             {
               accessibilityRole: "checkbox",
@@ -557,7 +590,7 @@ function Checkbox(checkboxProps) {
                 checked ? values.filter((value) => value !== option.value) : [...values, option.value]
               ),
               children: [
-                /* @__PURE__ */ jsxRuntime$1.jsx(
+                /* @__PURE__ */ jsxRuntime.jsx(
                   reactNative.View,
                   {
                     className: getIndicatorClassName({
@@ -569,7 +602,7 @@ function Checkbox(checkboxProps) {
                       resolvedShape,
                       variantCheckedClassName: variantStyles.checkedClassName
                     }),
-                    children: checked ? /* @__PURE__ */ jsxRuntime$1.jsx(
+                    children: checked ? /* @__PURE__ */ jsxRuntime.jsx(
                       Tick,
                       {
                         checkedIconClassName,
@@ -578,7 +611,7 @@ function Checkbox(checkboxProps) {
                     ) : null
                   }
                 ),
-                /* @__PURE__ */ jsxRuntime$1.jsx(
+                /* @__PURE__ */ jsxRuntime.jsx(
                   reactNative.Text,
                   {
                     className: cn(
@@ -597,7 +630,7 @@ function Checkbox(checkboxProps) {
       },
       `${multiField.name}-column-${columnIndex}`
     )) }) : null,
-    errorText ? /* @__PURE__ */ jsxRuntime$1.jsx(reactNative.Text, { className: "px-2 py-1 text-sm font-medium text-eui-danger-500", children: errorText }) : null
+    errorText ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { className: "px-2 py-1 text-sm font-medium text-eui-danger-500", children: errorText }) : null
   ] });
 }
 
@@ -678,7 +711,7 @@ function InputLabel({
     lineHeight: floating === true ? nativeInputLabelMetrics.floatingFontSize : nativeInputLabelMetrics.restingFontSize,
     top: floating === true ? nativeInputLabelMetrics.floatingTop : nativeInputLabelMetrics.restingTop
   };
-  return /* @__PURE__ */ jsxRuntime$1.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     reactNative.Animated.Text,
     {
       className: cn(
@@ -742,8 +775,8 @@ function InputResponse({
       }
     ]
   };
-  const content = message ?? /* @__PURE__ */ jsxRuntime$1.jsx(formik.ErrorMessage, { name, children: (errorMessage) => String(errorMessage) });
-  return /* @__PURE__ */ jsxRuntime$1.jsx(reactNative.Animated.View, { className: "w-full", style: animatedStyle, children: /* @__PURE__ */ jsxRuntime$1.jsx(
+  const content = message ?? /* @__PURE__ */ jsxRuntime.jsx(formik.ErrorMessage, { name, children: (errorMessage) => String(errorMessage) });
+  return /* @__PURE__ */ jsxRuntime.jsx(reactNative.Animated.View, { className: "w-full", style: animatedStyle, children: /* @__PURE__ */ jsxRuntime.jsx(
     reactNative.Text,
     {
       className: cn(
@@ -826,8 +859,8 @@ function DateSelector(dateSelectorProps) {
       event
     );
   };
-  return /* @__PURE__ */ jsxRuntime$1.jsxs(reactNative.View, { className: inputRootClassName, children: [
-    /* @__PURE__ */ jsxRuntime$1.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { className: inputRootClassName, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
       reactNative.View,
       {
         className: cn(
@@ -838,7 +871,7 @@ function DateSelector(dateSelectorProps) {
           className,
           styles
         ),
-        children: /* @__PURE__ */ jsxRuntime$1.jsx(
+        children: /* @__PURE__ */ jsxRuntime.jsx(
           reactNative.TextInput,
           {
             accessibilityLabel: resolvedLabel,
@@ -860,7 +893,7 @@ function DateSelector(dateSelectorProps) {
         )
       }
     ),
-    /* @__PURE__ */ jsxRuntime$1.jsx(
+    /* @__PURE__ */ jsxRuntime.jsx(
       InputLabel,
       {
         animatedValue: labelProgress,
@@ -871,7 +904,7 @@ function DateSelector(dateSelectorProps) {
         className: labelClassName
       }
     ),
-    /* @__PURE__ */ jsxRuntime$1.jsx(
+    /* @__PURE__ */ jsxRuntime.jsx(
       InputResponse,
       {
         message: errorText,
@@ -923,7 +956,7 @@ function Form({
   onChange,
   onDirtyChange
 }) {
-  return /* @__PURE__ */ jsxRuntime$1.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     formik.Formik,
     {
       initialValues,
@@ -932,8 +965,8 @@ function Form({
       onSubmit: async (values, helpers) => {
         await onSubmit(values, helpers);
       },
-      children: (formik) => /* @__PURE__ */ jsxRuntime$1.jsxs(reactNative.View, { className: cn(className), children: [
-        /* @__PURE__ */ jsxRuntime$1.jsx(
+      children: (formik) => /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { className: cn(className), children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
           FormObservers,
           {
             formik,
@@ -941,7 +974,7 @@ function Form({
             onDirtyChange
           }
         ),
-        /* @__PURE__ */ jsxRuntime$1.jsx(reactNative.View, { className: cn(contentClassName), children: renderFormChildren(children, formik) })
+        /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { className: cn(contentClassName), children: renderFormChildren(children, formik) })
       ] })
     }
   );
@@ -1014,7 +1047,7 @@ function FormResponse({
     return null;
   }
   const styles = resolveFormResponseStyles({ shape, size, variant });
-  return /* @__PURE__ */ jsxRuntime$1.jsx(reactNative.View, { className: cn(styles.rootClassName, className), children: /* @__PURE__ */ jsxRuntime$1.jsx(reactNative.Text, { className: cn(styles.textClassName, textClassName), children: text }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { className: cn(styles.rootClassName, className), children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { className: cn(styles.textClassName, textClassName), children: text }) });
 }
 function resolveInputType({
   passwordVisible,
@@ -1101,8 +1134,8 @@ function Input(inputProps) {
     setFocused(true);
     onFocus?.(event);
   };
-  return /* @__PURE__ */ jsxRuntime$1.jsxs(reactNative.View, { className: inputRootClassName, children: [
-    /* @__PURE__ */ jsxRuntime$1.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { className: inputRootClassName, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
       reactNative.View,
       {
         className: cn(
@@ -1112,7 +1145,7 @@ function Input(inputProps) {
           disabled && inputFrameDisabledClassName,
           className
         ),
-        children: /* @__PURE__ */ jsxRuntime$1.jsx(
+        children: /* @__PURE__ */ jsxRuntime.jsx(
           reactNative.TextInput,
           {
             accessibilityLabel: resolvedLabel,
@@ -1136,7 +1169,7 @@ function Input(inputProps) {
         )
       }
     ),
-    /* @__PURE__ */ jsxRuntime$1.jsx(
+    /* @__PURE__ */ jsxRuntime.jsx(
       InputLabel,
       {
         animatedValue: labelProgress,
@@ -1147,7 +1180,7 @@ function Input(inputProps) {
         className: labelClassName
       }
     ),
-    type === "password" ? /* @__PURE__ */ jsxRuntime$1.jsx(
+    type === "password" ? /* @__PURE__ */ jsxRuntime.jsx(
       reactNative.Pressable,
       {
         accessibilityRole: "button",
@@ -1155,10 +1188,10 @@ function Input(inputProps) {
         className: nativePasswordToggleClassName,
         disabled,
         onPress: () => setPasswordVisible((current) => !current),
-        children: /* @__PURE__ */ jsxRuntime$1.jsx(reactNative.Text, { className: nativePasswordToggleTextClassName, children: passwordVisible ? "Hide" : "Show" })
+        children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { className: nativePasswordToggleTextClassName, children: passwordVisible ? "Hide" : "Show" })
       }
     ) : null,
-    /* @__PURE__ */ jsxRuntime$1.jsx(
+    /* @__PURE__ */ jsxRuntime.jsx(
       InputResponse,
       {
         message: errorText,
@@ -1241,8 +1274,8 @@ function InputFile(inputFileProps) {
       await helpers.setTouched(true);
     }
   };
-  return /* @__PURE__ */ jsxRuntime$1.jsxs(reactNative.View, { className: inputRootClassName, children: [
-    /* @__PURE__ */ jsxRuntime$1.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { className: inputRootClassName, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
       reactNative.Pressable,
       {
         accessibilityLabel: resolvedLabel,
@@ -1259,7 +1292,7 @@ function InputFile(inputFileProps) {
           disabled && inputFrameDisabledClassName,
           className
         ),
-        children: /* @__PURE__ */ jsxRuntime$1.jsx(
+        children: /* @__PURE__ */ jsxRuntime.jsx(
           reactNative.Text,
           {
             numberOfLines: 1,
@@ -1275,7 +1308,7 @@ function InputFile(inputFileProps) {
         )
       }
     ),
-    /* @__PURE__ */ jsxRuntime$1.jsx(
+    /* @__PURE__ */ jsxRuntime.jsx(
       InputLabel,
       {
         disabled,
@@ -1285,7 +1318,7 @@ function InputFile(inputFileProps) {
         className: labelClassName
       }
     ),
-    /* @__PURE__ */ jsxRuntime$1.jsx(
+    /* @__PURE__ */ jsxRuntime.jsx(
       InputResponse,
       {
         message: errorText,
@@ -1380,8 +1413,8 @@ function Select(selectProps) {
     setFocused(true);
     onFocus?.(event);
   };
-  return /* @__PURE__ */ jsxRuntime$1.jsxs(reactNative.View, { className: inputRootClassName, children: [
-    /* @__PURE__ */ jsxRuntime$1.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { className: inputRootClassName, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
       reactNative.Pressable,
       {
         accessibilityLabel: resolvedLabel,
@@ -1400,7 +1433,7 @@ function Select(selectProps) {
           className,
           styles
         ),
-        children: /* @__PURE__ */ jsxRuntime$1.jsx(
+        children: /* @__PURE__ */ jsxRuntime.jsx(
           reactNative.Text,
           {
             numberOfLines: 1,
@@ -1416,7 +1449,7 @@ function Select(selectProps) {
         )
       }
     ),
-    /* @__PURE__ */ jsxRuntime$1.jsx(
+    /* @__PURE__ */ jsxRuntime.jsx(
       InputLabel,
       {
         disabled,
@@ -1426,7 +1459,7 @@ function Select(selectProps) {
         className: labelClassName
       }
     ),
-    /* @__PURE__ */ jsxRuntime$1.jsx(
+    /* @__PURE__ */ jsxRuntime.jsx(
       InputResponse,
       {
         message: errorText,
@@ -1436,15 +1469,15 @@ function Select(selectProps) {
         className: responseClassName
       }
     ),
-    /* @__PURE__ */ jsxRuntime$1.jsx(
+    /* @__PURE__ */ jsxRuntime.jsx(
       reactNative.Modal,
       {
         animationType: "fade",
         onRequestClose: closeOptions,
         transparent: true,
         visible: open,
-        children: /* @__PURE__ */ jsxRuntime$1.jsxs(reactNative.View, { className: "flex-1 justify-end bg-black/40 px-4 py-6", children: [
-          /* @__PURE__ */ jsxRuntime$1.jsx(
+        children: /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { className: "flex-1 justify-end bg-black/40 px-4 py-6", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
             reactNative.Pressable,
             {
               accessibilityLabel: "Close select options",
@@ -1453,9 +1486,9 @@ function Select(selectProps) {
               onPress: closeOptions
             }
           ),
-          /* @__PURE__ */ jsxRuntime$1.jsx(reactNative.View, { className: "max-h-[70%] overflow-hidden rounded-lg bg-white shadow-xl dark:bg-eui-dark-500", children: /* @__PURE__ */ jsxRuntime$1.jsx(reactNative.ScrollView, { children: options.map((option) => {
+          /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { className: "max-h-[70%] overflow-hidden rounded-lg bg-white shadow-xl dark:bg-eui-dark-500", children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.ScrollView, { children: options.map((option) => {
             const selected = option.value === field.value;
-            return /* @__PURE__ */ jsxRuntime$1.jsx(
+            return /* @__PURE__ */ jsxRuntime.jsx(
               reactNative.Pressable,
               {
                 accessibilityRole: "button",
@@ -1470,7 +1503,7 @@ function Select(selectProps) {
                   selected && "bg-eui-secondary-500/10",
                   option.disabled && "opacity-50"
                 ),
-                children: /* @__PURE__ */ jsxRuntime$1.jsx(reactNative.Text, { className: "text-base font-medium text-gray-950 dark:text-gray-50", children: String(option.label) })
+                children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { className: "text-base font-medium text-gray-950 dark:text-gray-50", children: String(option.label) })
               },
               option.value
             );
@@ -1601,8 +1634,8 @@ function Tags(tagsProps) {
     setFocused(true);
     onFocus?.(event);
   };
-  return /* @__PURE__ */ jsxRuntime$1.jsxs(reactNative.View, { className: inputRootClassName, children: [
-    /* @__PURE__ */ jsxRuntime$1.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { className: inputRootClassName, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
       reactNative.View,
       {
         className: cn(
@@ -1615,7 +1648,7 @@ function Tags(tagsProps) {
           styles
         ),
         children: [
-          tags.map((tag, index) => /* @__PURE__ */ jsxRuntime$1.jsxs(
+          tags.map((tag, index) => /* @__PURE__ */ jsxRuntime.jsxs(
             reactNative.View,
             {
               className: cn(
@@ -1623,7 +1656,7 @@ function Tags(tagsProps) {
                 tagClassName
               ),
               children: [
-                /* @__PURE__ */ jsxRuntime$1.jsx(
+                /* @__PURE__ */ jsxRuntime.jsx(
                   reactNative.Text,
                   {
                     className: "shrink text-sm font-medium text-eui-dark-700 dark:text-eui-light-300",
@@ -1632,7 +1665,7 @@ function Tags(tagsProps) {
                     children: tag
                   }
                 ),
-                /* @__PURE__ */ jsxRuntime$1.jsx(
+                /* @__PURE__ */ jsxRuntime.jsx(
                   reactNative.Pressable,
                   {
                     accessibilityLabel: `Remove ${tag}`,
@@ -1644,7 +1677,7 @@ function Tags(tagsProps) {
                     ),
                     disabled,
                     onPress: () => handleRemoveTag(index),
-                    children: /* @__PURE__ */ jsxRuntime$1.jsx(
+                    children: /* @__PURE__ */ jsxRuntime.jsx(
                       reactNative.Text,
                       {
                         className: "text-xs font-bold text-eui-danger-500",
@@ -1658,7 +1691,7 @@ function Tags(tagsProps) {
             },
             `${tag}-${index}`
           )),
-          tags.length < resolvedLimit ? /* @__PURE__ */ jsxRuntime$1.jsx(
+          tags.length < resolvedLimit ? /* @__PURE__ */ jsxRuntime.jsx(
             reactNative.TextInput,
             {
               accessibilityLabel: resolvedLabel,
@@ -1680,7 +1713,7 @@ function Tags(tagsProps) {
               value: input
             }
           ) : null,
-          /* @__PURE__ */ jsxRuntime$1.jsxs(
+          /* @__PURE__ */ jsxRuntime.jsxs(
             reactNative.Text,
             {
               className: cn(
@@ -1698,7 +1731,7 @@ function Tags(tagsProps) {
         ]
       }
     ),
-    /* @__PURE__ */ jsxRuntime$1.jsx(
+    /* @__PURE__ */ jsxRuntime.jsx(
       InputLabel,
       {
         disabled,
@@ -1708,7 +1741,7 @@ function Tags(tagsProps) {
         className: labelClassName
       }
     ),
-    /* @__PURE__ */ jsxRuntime$1.jsx(
+    /* @__PURE__ */ jsxRuntime.jsx(
       InputResponse,
       {
         message: errorText,
@@ -1790,8 +1823,8 @@ function TextArea(textAreaProps) {
     setFocused(true);
     onFocus?.(event);
   };
-  return /* @__PURE__ */ jsxRuntime$1.jsxs(reactNative.View, { className: inputRootClassName, children: [
-    /* @__PURE__ */ jsxRuntime$1.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { className: inputRootClassName, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
       reactNative.View,
       {
         className: cn(
@@ -1804,7 +1837,7 @@ function TextArea(textAreaProps) {
           styles
         ),
         children: [
-          /* @__PURE__ */ jsxRuntime$1.jsx(
+          /* @__PURE__ */ jsxRuntime.jsx(
             reactNative.TextInput,
             {
               accessibilityLabel: resolvedLabel,
@@ -1821,7 +1854,7 @@ function TextArea(textAreaProps) {
               value: field.value ?? ""
             }
           ),
-          /* @__PURE__ */ jsxRuntime$1.jsxs(reactNative.Text, { className: "absolute bottom-3 right-3 text-xs font-semibold text-eui-dark-50", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(reactNative.Text, { className: "absolute bottom-3 right-3 text-xs font-semibold text-eui-dark-50", children: [
             characterCount,
             "/",
             resolvedLimit
@@ -1829,7 +1862,7 @@ function TextArea(textAreaProps) {
         ]
       }
     ),
-    /* @__PURE__ */ jsxRuntime$1.jsx(
+    /* @__PURE__ */ jsxRuntime.jsx(
       InputLabel,
       {
         disabled,
@@ -1839,7 +1872,7 @@ function TextArea(textAreaProps) {
         className: labelClassName
       }
     ),
-    /* @__PURE__ */ jsxRuntime$1.jsx(
+    /* @__PURE__ */ jsxRuntime.jsx(
       InputResponse,
       {
         message: errorText,