elseware-ui 3.0.12 → 3.0.14

package/dist/index.native.mjs

@@ -1,8 +1,8 @@
-import { Pressable, View, ActivityIndicator, Text, Animated, Easing, TextInput, Modal, ScrollView } from 'react-native';
+import { createContext, forwardRef, useContext, useState, useRef, useEffect } from 'react';
+import { View, ActivityIndicator, Text, Pressable, Animated, Easing, TextInput, Modal, ScrollView } from 'react-native';
 import { twMerge } from 'tailwind-merge';
-import { createContext, useState, useContext, useRef, useEffect } from 'react';
-import { jsx } from 'react/jsx-runtime';
-import { jsx as jsx$1, jsxs } from 'nativewind/jsx-runtime';
+import { jsx as jsx$1 } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'nativewind/jsx-runtime';
 import { Formik, ErrorMessage, useField } from 'formik';
 
 // src/components/data-entry/button/native/Button.native.tsx
@@ -27,6 +27,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",
@@ -49,7 +54,7 @@ var EUIProvider = ({
   children
 }) => {
   const [state, setState] = useState(config);
-  return /* @__PURE__ */ jsx(EUIContext.Provider, { value: { config: state, setConfig: setState }, children });
+  return /* @__PURE__ */ jsx$1(EUIContext.Provider, { value: { config: state, setConfig: setState }, children });
 };
 var useEUIConfig = () => {
   const ctx = useContext(EUIContext);
@@ -146,14 +151,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
@@ -166,164 +163,205 @@ 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,
+    iconPosition = "leading",
+    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__ */ jsx$1(
-    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__ */ jsxs(
-        View,
-        {
-          className: cn(
-            "z-10 flex-row items-center justify-center gap-2",
-            contentClassName
-          ),
-          children: [
-            loading ? /* @__PURE__ */ jsx$1(
-              View,
-              {
-                className: cn(
-                  "shrink-0 items-center justify-center",
-                  metrics.slotClassName
-                ),
-                children: /* @__PURE__ */ jsx$1(ActivityIndicator, { className: labelColorClassName, size: "small" })
-              }
-            ) : null,
-            !loading && resolvedIcon ? /* @__PURE__ */ jsx$1(
-              View,
-              {
-                className: cn(
-                  "shrink-0 items-center justify-center",
-                  metrics.slotClassName
-                ),
-                children: resolvedIcon
-              }
-            ) : null,
-            typeof content === "string" || typeof content === "number" ? /* @__PURE__ */ jsx$1(View, { className: "items-center justify-center", children: /* @__PURE__ */ jsx$1(
-              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,
+    iconPosition,
+    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 = forwardRef(
+  function Button2(props, ref) {
+    const {
+      className,
+      contentClassName,
+      labelClassName,
+      accessibilityLabel,
+      accessibilityRole = "button",
+      testID
+    } = props;
+    const model = useButton(props);
+    const trailing = model.iconPosition === "trailing";
+    const iconSlot = model.loading || model.icon ? /* @__PURE__ */ jsx(
+      View,
+      {
+        className: cn(
+          "shrink-0 items-center justify-center",
+          model.tokens.slot
+        ),
+        children: model.loading ? /* @__PURE__ */ jsx(
+          ActivityIndicator,
+          {
+            className: model.labelColorClassName,
+            size: "small"
+          }
+        ) : model.icon
+      }
+    ) : null;
+    const labelNode = model.hasTextLabel ? /* @__PURE__ */ jsx(
+      Text,
+      {
+        className: cn(
+          "font-bold",
+          model.tokens.text,
+          model.tokens.leading,
+          model.labelColorClassName,
+          labelClassName
+        ),
+        numberOfLines: 1,
+        style: nativeLabelBaseStyle,
+        children: model.label
+      }
+    ) : model.label;
+    return /* @__PURE__ */ jsx(
+      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__ */ jsxs(
+          View,
+          {
+            className: cn(
+              "z-10 flex-row items-center justify-center gap-2",
+              contentClassName
+            ),
+            children: [
+              trailing ? labelNode : iconSlot,
+              trailing ? iconSlot : labelNode
+            ]
+          }
+        )
+      }
+    );
+  }
+);
 var Button_native_default = Button;
 function isMultiCheckbox(props) {
   return Array.isArray(props.options);
@@ -443,7 +481,7 @@ function Tick({
   checkedIconClassName,
   iconClassName
 }) {
-  return /* @__PURE__ */ jsx$1(
+  return /* @__PURE__ */ jsx(
     Text,
     {
       className: cn(
@@ -508,7 +546,7 @@ function Checkbox(checkboxProps) {
         disabled,
         onPress: () => singleHelpers.setValue(!singleChecked),
         children: [
-          /* @__PURE__ */ jsx$1(
+          /* @__PURE__ */ jsx(
             View,
             {
               className: getIndicatorClassName({
@@ -520,7 +558,7 @@ function Checkbox(checkboxProps) {
                 resolvedShape,
                 variantCheckedClassName: variantStyles.checkedClassName
               }),
-              children: singleChecked ? /* @__PURE__ */ jsx$1(
+              children: singleChecked ? /* @__PURE__ */ jsx(
                 Tick,
                 {
                   checkedIconClassName,
@@ -529,11 +567,11 @@ function Checkbox(checkboxProps) {
               ) : null
             }
           ),
-          resolvedLabel ? /* @__PURE__ */ jsx$1(Text, { className: cn(checkboxLabelClassName, labelClassName), children: resolvedLabel }) : null
+          resolvedLabel ? /* @__PURE__ */ jsx(Text, { className: cn(checkboxLabelClassName, labelClassName), children: resolvedLabel }) : null
         ]
       }
     ),
-    isMulti && multiProps ? /* @__PURE__ */ jsx$1(View, { className: "w-full flex-row gap-6", children: optionColumns.map((columnOptions, columnIndex) => /* @__PURE__ */ jsx$1(
+    isMulti && multiProps ? /* @__PURE__ */ jsx(View, { className: "w-full flex-row gap-6", children: optionColumns.map((columnOptions, columnIndex) => /* @__PURE__ */ jsx(
       View,
       {
         className: "min-w-0 flex-1 flex-col gap-2",
@@ -555,7 +593,7 @@ function Checkbox(checkboxProps) {
                 checked ? values.filter((value) => value !== option.value) : [...values, option.value]
               ),
               children: [
-                /* @__PURE__ */ jsx$1(
+                /* @__PURE__ */ jsx(
                   View,
                   {
                     className: getIndicatorClassName({
@@ -567,7 +605,7 @@ function Checkbox(checkboxProps) {
                       resolvedShape,
                       variantCheckedClassName: variantStyles.checkedClassName
                     }),
-                    children: checked ? /* @__PURE__ */ jsx$1(
+                    children: checked ? /* @__PURE__ */ jsx(
                       Tick,
                       {
                         checkedIconClassName,
@@ -576,7 +614,7 @@ function Checkbox(checkboxProps) {
                     ) : null
                   }
                 ),
-                /* @__PURE__ */ jsx$1(
+                /* @__PURE__ */ jsx(
                   Text,
                   {
                     className: cn(
@@ -595,7 +633,7 @@ function Checkbox(checkboxProps) {
       },
       `${multiField.name}-column-${columnIndex}`
     )) }) : null,
-    errorText ? /* @__PURE__ */ jsx$1(Text, { className: "px-2 py-1 text-sm font-medium text-eui-danger-500", children: errorText }) : null
+    errorText ? /* @__PURE__ */ jsx(Text, { className: "px-2 py-1 text-sm font-medium text-eui-danger-500", children: errorText }) : null
   ] });
 }
 
@@ -676,7 +714,7 @@ function InputLabel({
     lineHeight: floating === true ? nativeInputLabelMetrics.floatingFontSize : nativeInputLabelMetrics.restingFontSize,
     top: floating === true ? nativeInputLabelMetrics.floatingTop : nativeInputLabelMetrics.restingTop
   };
-  return /* @__PURE__ */ jsx$1(
+  return /* @__PURE__ */ jsx(
     Animated.Text,
     {
       className: cn(
@@ -740,8 +778,8 @@ function InputResponse({
       }
     ]
   };
-  const content = message ?? /* @__PURE__ */ jsx$1(ErrorMessage, { name, children: (errorMessage) => String(errorMessage) });
-  return /* @__PURE__ */ jsx$1(Animated.View, { className: "w-full", style: animatedStyle, children: /* @__PURE__ */ jsx$1(
+  const content = message ?? /* @__PURE__ */ jsx(ErrorMessage, { name, children: (errorMessage) => String(errorMessage) });
+  return /* @__PURE__ */ jsx(Animated.View, { className: "w-full", style: animatedStyle, children: /* @__PURE__ */ jsx(
     Text,
     {
       className: cn(
@@ -825,7 +863,7 @@ function DateSelector(dateSelectorProps) {
     );
   };
   return /* @__PURE__ */ jsxs(View, { className: inputRootClassName, children: [
-    /* @__PURE__ */ jsx$1(
+    /* @__PURE__ */ jsx(
       View,
       {
         className: cn(
@@ -836,7 +874,7 @@ function DateSelector(dateSelectorProps) {
           className,
           styles
         ),
-        children: /* @__PURE__ */ jsx$1(
+        children: /* @__PURE__ */ jsx(
           TextInput,
           {
             accessibilityLabel: resolvedLabel,
@@ -858,7 +896,7 @@ function DateSelector(dateSelectorProps) {
         )
       }
     ),
-    /* @__PURE__ */ jsx$1(
+    /* @__PURE__ */ jsx(
       InputLabel,
       {
         animatedValue: labelProgress,
@@ -869,7 +907,7 @@ function DateSelector(dateSelectorProps) {
         className: labelClassName
       }
     ),
-    /* @__PURE__ */ jsx$1(
+    /* @__PURE__ */ jsx(
       InputResponse,
       {
         message: errorText,
@@ -921,7 +959,7 @@ function Form({
   onChange,
   onDirtyChange
 }) {
-  return /* @__PURE__ */ jsx$1(
+  return /* @__PURE__ */ jsx(
     Formik,
     {
       initialValues,
@@ -931,7 +969,7 @@ function Form({
         await onSubmit(values, helpers);
       },
       children: (formik) => /* @__PURE__ */ jsxs(View, { className: cn(className), children: [
-        /* @__PURE__ */ jsx$1(
+        /* @__PURE__ */ jsx(
           FormObservers,
           {
             formik,
@@ -939,7 +977,7 @@ function Form({
             onDirtyChange
           }
         ),
-        /* @__PURE__ */ jsx$1(View, { className: cn(contentClassName), children: renderFormChildren(children, formik) })
+        /* @__PURE__ */ jsx(View, { className: cn(contentClassName), children: renderFormChildren(children, formik) })
       ] })
     }
   );
@@ -1012,7 +1050,7 @@ function FormResponse({
     return null;
   }
   const styles = resolveFormResponseStyles({ shape, size, variant });
-  return /* @__PURE__ */ jsx$1(View, { className: cn(styles.rootClassName, className), children: /* @__PURE__ */ jsx$1(Text, { className: cn(styles.textClassName, textClassName), children: text }) });
+  return /* @__PURE__ */ jsx(View, { className: cn(styles.rootClassName, className), children: /* @__PURE__ */ jsx(Text, { className: cn(styles.textClassName, textClassName), children: text }) });
 }
 function resolveInputType({
   passwordVisible,
@@ -1100,7 +1138,7 @@ function Input(inputProps) {
     onFocus?.(event);
   };
   return /* @__PURE__ */ jsxs(View, { className: inputRootClassName, children: [
-    /* @__PURE__ */ jsx$1(
+    /* @__PURE__ */ jsx(
       View,
       {
         className: cn(
@@ -1110,7 +1148,7 @@ function Input(inputProps) {
           disabled && inputFrameDisabledClassName,
           className
         ),
-        children: /* @__PURE__ */ jsx$1(
+        children: /* @__PURE__ */ jsx(
           TextInput,
           {
             accessibilityLabel: resolvedLabel,
@@ -1134,7 +1172,7 @@ function Input(inputProps) {
         )
       }
     ),
-    /* @__PURE__ */ jsx$1(
+    /* @__PURE__ */ jsx(
       InputLabel,
       {
         animatedValue: labelProgress,
@@ -1145,7 +1183,7 @@ function Input(inputProps) {
         className: labelClassName
       }
     ),
-    type === "password" ? /* @__PURE__ */ jsx$1(
+    type === "password" ? /* @__PURE__ */ jsx(
       Pressable,
       {
         accessibilityRole: "button",
@@ -1153,10 +1191,10 @@ function Input(inputProps) {
         className: nativePasswordToggleClassName,
         disabled,
         onPress: () => setPasswordVisible((current) => !current),
-        children: /* @__PURE__ */ jsx$1(Text, { className: nativePasswordToggleTextClassName, children: passwordVisible ? "Hide" : "Show" })
+        children: /* @__PURE__ */ jsx(Text, { className: nativePasswordToggleTextClassName, children: passwordVisible ? "Hide" : "Show" })
       }
     ) : null,
-    /* @__PURE__ */ jsx$1(
+    /* @__PURE__ */ jsx(
       InputResponse,
       {
         message: errorText,
@@ -1240,7 +1278,7 @@ function InputFile(inputFileProps) {
     }
   };
   return /* @__PURE__ */ jsxs(View, { className: inputRootClassName, children: [
-    /* @__PURE__ */ jsx$1(
+    /* @__PURE__ */ jsx(
       Pressable,
       {
         accessibilityLabel: resolvedLabel,
@@ -1257,7 +1295,7 @@ function InputFile(inputFileProps) {
           disabled && inputFrameDisabledClassName,
           className
         ),
-        children: /* @__PURE__ */ jsx$1(
+        children: /* @__PURE__ */ jsx(
           Text,
           {
             numberOfLines: 1,
@@ -1273,7 +1311,7 @@ function InputFile(inputFileProps) {
         )
       }
     ),
-    /* @__PURE__ */ jsx$1(
+    /* @__PURE__ */ jsx(
       InputLabel,
       {
         disabled,
@@ -1283,7 +1321,7 @@ function InputFile(inputFileProps) {
         className: labelClassName
       }
     ),
-    /* @__PURE__ */ jsx$1(
+    /* @__PURE__ */ jsx(
       InputResponse,
       {
         message: errorText,
@@ -1379,7 +1417,7 @@ function Select(selectProps) {
     onFocus?.(event);
   };
   return /* @__PURE__ */ jsxs(View, { className: inputRootClassName, children: [
-    /* @__PURE__ */ jsx$1(
+    /* @__PURE__ */ jsx(
       Pressable,
       {
         accessibilityLabel: resolvedLabel,
@@ -1398,7 +1436,7 @@ function Select(selectProps) {
           className,
           styles
         ),
-        children: /* @__PURE__ */ jsx$1(
+        children: /* @__PURE__ */ jsx(
           Text,
           {
             numberOfLines: 1,
@@ -1414,7 +1452,7 @@ function Select(selectProps) {
         )
       }
     ),
-    /* @__PURE__ */ jsx$1(
+    /* @__PURE__ */ jsx(
       InputLabel,
       {
         disabled,
@@ -1424,7 +1462,7 @@ function Select(selectProps) {
         className: labelClassName
       }
     ),
-    /* @__PURE__ */ jsx$1(
+    /* @__PURE__ */ jsx(
       InputResponse,
       {
         message: errorText,
@@ -1434,7 +1472,7 @@ function Select(selectProps) {
         className: responseClassName
       }
     ),
-    /* @__PURE__ */ jsx$1(
+    /* @__PURE__ */ jsx(
       Modal,
       {
         animationType: "fade",
@@ -1442,7 +1480,7 @@ function Select(selectProps) {
         transparent: true,
         visible: open,
         children: /* @__PURE__ */ jsxs(View, { className: "flex-1 justify-end bg-black/40 px-4 py-6", children: [
-          /* @__PURE__ */ jsx$1(
+          /* @__PURE__ */ jsx(
             Pressable,
             {
               accessibilityLabel: "Close select options",
@@ -1451,9 +1489,9 @@ function Select(selectProps) {
               onPress: closeOptions
             }
           ),
-          /* @__PURE__ */ jsx$1(View, { className: "max-h-[70%] overflow-hidden rounded-lg bg-white shadow-xl dark:bg-eui-dark-500", children: /* @__PURE__ */ jsx$1(ScrollView, { children: options.map((option) => {
+          /* @__PURE__ */ jsx(View, { className: "max-h-[70%] overflow-hidden rounded-lg bg-white shadow-xl dark:bg-eui-dark-500", children: /* @__PURE__ */ jsx(ScrollView, { children: options.map((option) => {
             const selected = option.value === field.value;
-            return /* @__PURE__ */ jsx$1(
+            return /* @__PURE__ */ jsx(
               Pressable,
               {
                 accessibilityRole: "button",
@@ -1468,7 +1506,7 @@ function Select(selectProps) {
                   selected && "bg-eui-secondary-500/10",
                   option.disabled && "opacity-50"
                 ),
-                children: /* @__PURE__ */ jsx$1(Text, { className: "text-base font-medium text-gray-950 dark:text-gray-50", children: String(option.label) })
+                children: /* @__PURE__ */ jsx(Text, { className: "text-base font-medium text-gray-950 dark:text-gray-50", children: String(option.label) })
               },
               option.value
             );
@@ -1621,7 +1659,7 @@ function Tags(tagsProps) {
                 tagClassName
               ),
               children: [
-                /* @__PURE__ */ jsx$1(
+                /* @__PURE__ */ jsx(
                   Text,
                   {
                     className: "shrink text-sm font-medium text-eui-dark-700 dark:text-eui-light-300",
@@ -1630,7 +1668,7 @@ function Tags(tagsProps) {
                     children: tag
                   }
                 ),
-                /* @__PURE__ */ jsx$1(
+                /* @__PURE__ */ jsx(
                   Pressable,
                   {
                     accessibilityLabel: `Remove ${tag}`,
@@ -1642,7 +1680,7 @@ function Tags(tagsProps) {
                     ),
                     disabled,
                     onPress: () => handleRemoveTag(index),
-                    children: /* @__PURE__ */ jsx$1(
+                    children: /* @__PURE__ */ jsx(
                       Text,
                       {
                         className: "text-xs font-bold text-eui-danger-500",
@@ -1656,7 +1694,7 @@ function Tags(tagsProps) {
             },
             `${tag}-${index}`
           )),
-          tags.length < resolvedLimit ? /* @__PURE__ */ jsx$1(
+          tags.length < resolvedLimit ? /* @__PURE__ */ jsx(
             TextInput,
             {
               accessibilityLabel: resolvedLabel,
@@ -1696,7 +1734,7 @@ function Tags(tagsProps) {
         ]
       }
     ),
-    /* @__PURE__ */ jsx$1(
+    /* @__PURE__ */ jsx(
       InputLabel,
       {
         disabled,
@@ -1706,7 +1744,7 @@ function Tags(tagsProps) {
         className: labelClassName
       }
     ),
-    /* @__PURE__ */ jsx$1(
+    /* @__PURE__ */ jsx(
       InputResponse,
       {
         message: errorText,
@@ -1802,7 +1840,7 @@ function TextArea(textAreaProps) {
           styles
         ),
         children: [
-          /* @__PURE__ */ jsx$1(
+          /* @__PURE__ */ jsx(
             TextInput,
             {
               accessibilityLabel: resolvedLabel,
@@ -1827,7 +1865,7 @@ function TextArea(textAreaProps) {
         ]
       }
     ),
-    /* @__PURE__ */ jsx$1(
+    /* @__PURE__ */ jsx(
       InputLabel,
       {
         disabled,
@@ -1837,7 +1875,7 @@ function TextArea(textAreaProps) {
         className: labelClassName
       }
     ),
-    /* @__PURE__ */ jsx$1(
+    /* @__PURE__ */ jsx(
       InputResponse,
       {
         message: errorText,