elseware-ui 3.2.0 → 3.4.0

package/dist/index.native.js

@@ -1,1924 +0,0 @@
-'use strict';
-
-var react = require('react');
-var reactNative = require('react-native');
-var tailwindMerge = require('tailwind-merge');
-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
-
-// node_modules/clsx/dist/clsx.mjs
-function r(e) {
-  var t, f, n = "";
-  if ("string" == typeof e || "number" == typeof e) n += e;
-  else if ("object" == typeof e) if (Array.isArray(e)) {
-    var o = e.length;
-    for (t = 0; t < o; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
-  } else for (f in e) e[f] && (n && (n += " "), n += f);
-  return n;
-}
-function clsx() {
-  for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
-  return n;
-}
-var clsx_default = clsx;
-function cn(...inputs) {
-  return tailwindMerge.twMerge(clsx_default(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",
-  solid,
-  lite,
-  ghost
-}) {
-  switch (appearance) {
-    case "ghost":
-      return ghost[variant];
-    case "lite":
-      return lite[variant];
-    default:
-      return solid[variant];
-  }
-}
-var EUIContext = react.createContext(null);
-var EUIProvider = ({
-  config,
-  children
-}) => {
-  const [state, setState] = react.useState(config);
-  return /* @__PURE__ */ jsxRuntime$1.jsx(EUIContext.Provider, { value: { config: state, setConfig: setState }, children });
-};
-var useEUIConfig = () => {
-  const ctx = react.useContext(EUIContext);
-  if (!ctx) {
-    throw new Error("useEUIConfig must be used inside EUIProvider");
-  }
-  return ctx;
-};
-
-// src/components/eui/resolveGlobalConfigs.tsx
-function resolveWithGlobal(config, props, defaults) {
-  return {
-    ...defaults,
-    ...config?.global ?? {},
-    ...props
-  };
-}
-
-// src/components/data-entry/button/base/Button.config.ts
-var buttonModeAppearance = {
-  contained: "solid",
-  "contained-tonal": "lite",
-  outlined: "ghost",
-  text: "ghost"
-};
-function useResolvedButtonConfig({
-  compact = false,
-  mode,
-  variant,
-  appearance,
-  shape,
-  size
-}) {
-  const eui = useEUIConfig();
-  const configuredSize = size ?? eui?.config?.global?.size ?? "md";
-  return {
-    shape: shape ?? eui?.config?.global?.shape ?? "square",
-    size: compact && configuredSize === "md" ? "sm" : configuredSize,
-    variant: variant ?? eui?.config?.global?.variant ?? "success",
-    appearance: appearance ?? (mode ? buttonModeAppearance[mode] : "solid")
-  };
-}
-
-// src/data/styles.tsx
-var variantsSolid = {
-  ["default" /* default */]: "bg-gray-300 text-gray-900 hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-100 dark:hover:bg-gray-600",
-  ["primary" /* primary */]: "bg-eui-primary-500 text-white hover:bg-eui-primary-600",
-  ["secondary" /* secondary */]: "bg-eui-secondary-500 text-white hover:bg-eui-secondary-600",
-  ["success" /* success */]: "bg-eui-success-500 text-white hover:bg-eui-success-600",
-  ["danger" /* danger */]: "bg-eui-danger-500 text-white hover:bg-eui-danger-600",
-  ["warning" /* warning */]: "bg-eui-warning-500 text-black hover:bg-eui-warning-400",
-  ["info" /* info */]: "bg-eui-info-500 text-white hover:bg-eui-info-600",
-  ["light" /* light */]: "bg-eui-light-400 text-gray-900 hover:bg-eui-light-300 dark:bg-gray-200 dark:text-gray-900 dark:hover:bg-gray-100",
-  ["dark" /* dark */]: "bg-eui-dark-500 text-white hover:bg-eui-dark-400 dark:bg-eui-dark-400 dark:hover:bg-eui-dark-300"
-};
-var variantsLite = {
-  ["default" /* default */]: "bg-gray-500/10 border border-gray-300 text-gray-700 dark:bg-gray-400/10 dark:border-gray-700 dark:text-gray-200",
-  ["primary" /* primary */]: "bg-eui-primary-500/10 border border-eui-primary-500/30 text-eui-primary-400 dark:text-eui-primary-300",
-  ["secondary" /* secondary */]: "bg-eui-secondary-500/10 border border-eui-secondary-500/30 text-eui-secondary-500 dark:text-eui-secondary-400",
-  ["success" /* success */]: "bg-eui-success-500/10 border border-eui-success-500/30 text-eui-success-500 dark:text-eui-success-400",
-  ["danger" /* danger */]: "bg-eui-danger-500/10 border border-eui-danger-500/30 text-eui-danger-500 dark:text-eui-danger-400",
-  ["warning" /* warning */]: "bg-eui-warning-500/10 border border-eui-warning-500/30 text-eui-warning-600 dark:text-eui-warning-400",
-  ["info" /* info */]: "bg-eui-info-500/10 border border-eui-info-500/30 text-eui-info-500 dark:text-eui-info-400",
-  ["light" /* light */]: "bg-white/40 border border-white/30 text-gray-800 dark:bg-white/10 dark:border-white/10 dark:text-gray-100",
-  ["dark" /* dark */]: "bg-eui-dark-500/10 border border-eui-dark-500/30 text-eui-dark-500 dark:text-eui-dark-300"
-};
-var variantsGhost = {
-  ["default" /* default */]: "bg-transparent border border-gray-300 text-gray-700 hover:bg-gray-100 dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-800",
-  ["primary" /* primary */]: "bg-transparent border border-eui-primary-500 text-eui-primary-500 hover:bg-eui-primary-500/10 dark:text-eui-primary-300 dark:border-eui-primary-400",
-  ["secondary" /* secondary */]: "bg-transparent border border-eui-secondary-500 text-eui-secondary-500 hover:bg-eui-secondary-500/10 dark:text-eui-secondary-400 dark:border-eui-secondary-400",
-  ["success" /* success */]: "bg-transparent border border-eui-success-500 text-eui-success-500 hover:bg-eui-success-500/10 dark:text-eui-success-400 dark:border-eui-success-400",
-  ["danger" /* danger */]: "bg-transparent border border-eui-danger-500 text-eui-danger-500 hover:bg-eui-danger-500/10 dark:text-eui-danger-400 dark:border-eui-danger-400",
-  ["warning" /* warning */]: "bg-transparent border border-eui-warning-500 text-eui-warning-600 hover:bg-eui-warning-500/10 dark:text-eui-warning-400 dark:border-eui-warning-400",
-  ["info" /* info */]: "bg-transparent border border-eui-info-500 text-eui-info-500 hover:bg-eui-info-500/10 dark:text-eui-info-400 dark:border-eui-info-400",
-  ["light" /* light */]: "bg-transparent border border-gray-300 text-gray-700 hover:bg-white/10 dark:border-gray-500 dark:text-gray-100 dark:hover:bg-white/5",
-  ["dark" /* dark */]: "bg-transparent border border-eui-dark-500 text-eui-dark-500 hover:bg-eui-dark-500/10 dark:text-eui-dark-300 dark:border-eui-dark-300"
-};
-var textVariants = {
-  ["default" /* default */]: "eui-text-md",
-  ["primary" /* primary */]: "text-blue-500",
-  ["secondary" /* secondary */]: "text-gray-500",
-  ["success" /* success */]: "text-green-500",
-  ["danger" /* danger */]: "text-red-500",
-  ["warning" /* warning */]: "text-yellow-500",
-  ["info" /* info */]: "text-blue-400",
-  ["light" /* light */]: "text-gray-300",
-  ["dark" /* dark */]: "text-gray-900"
-};
-var shapes = {
-  ["square" /* square */]: "rounded-none",
-  ["roundedSquare" /* roundedSquare */]: "rounded-md",
-  ["softRoundedSquare" /* softRoundedSquare */]: "rounded-lg",
-  ["circle" /* circle */]: "rounded-full"
-};
-
-// src/components/data-entry/button/base/Button.styles.ts
-function resolveButtonVariantStyles({
-  appearance,
-  variant
-}) {
-  return resolveAppearanceStyles({
-    appearance,
-    variant,
-    solid: variantsSolid,
-    lite: variantsLite,
-    ghost: variantsGhost
-  });
-}
-
-// src/components/data-entry/button/base/Button.tokens.ts
-var buttonSizeTokens = {
-  xs: {
-    padding: "px-2 py-1",
-    text: "text-xs",
-    icon: 14,
-    minHeight: "min-h-[30px]",
-    leading: "leading-[14px]",
-    slot: "h-[14px] w-[14px]"
-  },
-  sm: {
-    padding: "px-3 py-1.5",
-    text: "text-sm",
-    icon: 16,
-    minHeight: "min-h-9",
-    leading: "leading-4",
-    slot: "h-4 w-4"
-  },
-  md: {
-    padding: "px-4 py-2",
-    text: "text-base",
-    icon: 18,
-    minHeight: "min-h-11",
-    leading: "leading-[18px]",
-    slot: "h-[18px] w-[18px]"
-  },
-  lg: {
-    padding: "px-5 py-3",
-    text: "text-lg",
-    icon: 20,
-    minHeight: "min-h-[50px]",
-    leading: "leading-5",
-    slot: "h-5 w-5"
-  },
-  xl: {
-    padding: "px-6 py-4",
-    text: "text-xl",
-    icon: 22,
-    minHeight: "min-h-14",
-    leading: "leading-[22px]",
-    slot: "h-[22px] w-[22px]"
-  }
-};
-var buttonShapes = shapes;
-var buttonTextModeClassName = "border-transparent bg-transparent";
-
-// src/components/data-entry/button/base/useButton.ts
-function useButton(props) {
-  const {
-    // Consumed by the shared model
-    icon,
-    iconPosition = "leading",
-    text,
-    children,
-    loading = false,
-    disabled = false,
-    block = false,
-    compact = false,
-    mode,
-    variant,
-    appearance,
-    shape,
-    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 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 = react.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__ */ 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
-      }
-    ) : null;
-    const labelNode = 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;
-    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: [
-              trailing ? labelNode : iconSlot,
-              trailing ? iconSlot : labelNode
-            ]
-          }
-        )
-      }
-    );
-  }
-);
-var Button_native_default = Button;
-function isMultiCheckbox(props) {
-  return Array.isArray(props.options);
-}
-function resolveCheckboxColumns(columns) {
-  return columns ?? 1;
-}
-function chunkCheckboxOptions(options, columns) {
-  const resolvedColumns = resolveCheckboxColumns(columns);
-  const chunkSize = Math.ceil(options.length / resolvedColumns);
-  return Array.from(
-    { length: resolvedColumns },
-    (_, columnIndex) => options.slice(columnIndex * chunkSize, (columnIndex + 1) * chunkSize)
-  ).filter((columnOptions) => columnOptions.length > 0);
-}
-function useResolvedCheckboxConfig({
-  label,
-  placeholder,
-  variant,
-  shape
-}) {
-  const eui = useEUIConfig();
-  return {
-    shape: shape ?? eui?.config?.global?.shape ?? "roundedSquare",
-    variant: variant ?? "success",
-    label: label ?? placeholder
-  };
-}
-function useCheckboxFieldState(props) {
-  const isMulti = isMultiCheckbox(props);
-  const [multiField, multiMeta, multiHelpers] = formik.useField(
-    props
-  );
-  const [singleField, singleMeta, singleHelpers] = formik.useField(
-    props
-  );
-  return {
-    isMulti,
-    multiField,
-    multiMeta,
-    multiHelpers,
-    singleField,
-    singleMeta,
-    singleHelpers
-  };
-}
-
-// src/components/data-entry/checkbox/base/Checkbox.styles.ts
-var checkboxShapes = shapes;
-var checkboxGroupClassName = "flex flex-col gap-2";
-var checkboxOptionRowClassName = "flex flex-row items-start gap-3";
-var checkboxLabelClassName = "cursor-pointer select-none text-sm leading-relaxed text-gray-800 dark:text-gray-200";
-var checkboxIndicatorDisabledClassName = "cursor-not-allowed opacity-50";
-
-// src/components/data-entry/checkbox/native/Checkbox.native.styles.ts
-var nativeCheckboxVariants = {
-  default: {
-    checkedClassName: "border-eui-secondary-600 bg-eui-secondary-600 dark:border-eui-secondary-500 dark:bg-eui-secondary-500",
-    iconClassName: "text-white"
-  },
-  primary: {
-    checkedClassName: "border-eui-primary-600 bg-eui-primary-600 dark:border-eui-primary-500 dark:bg-eui-primary-500",
-    iconClassName: "text-white"
-  },
-  secondary: {
-    checkedClassName: "border-eui-secondary-600 bg-eui-secondary-600 dark:border-eui-secondary-500 dark:bg-eui-secondary-500",
-    iconClassName: "text-white"
-  },
-  success: {
-    checkedClassName: "border-eui-success-600 bg-eui-success-600 dark:border-eui-success-500 dark:bg-eui-success-500",
-    iconClassName: "text-white"
-  },
-  danger: {
-    checkedClassName: "border-eui-danger-600 bg-eui-danger-600 dark:border-eui-danger-500 dark:bg-eui-danger-500",
-    iconClassName: "text-white"
-  },
-  warning: {
-    checkedClassName: "border-eui-warning-500 bg-eui-warning-500 dark:border-eui-warning-400 dark:bg-eui-warning-400",
-    iconClassName: "text-black"
-  },
-  info: {
-    checkedClassName: "border-eui-info-600 bg-eui-info-600 dark:border-eui-info-500 dark:bg-eui-info-500",
-    iconClassName: "text-white"
-  },
-  light: {
-    checkedClassName: "border-eui-light-400 bg-eui-light-400 dark:border-gray-200 dark:bg-gray-200",
-    iconClassName: "text-gray-900"
-  },
-  dark: {
-    checkedClassName: "border-eui-dark-500 bg-eui-dark-500 dark:border-eui-dark-300 dark:bg-eui-dark-300",
-    iconClassName: "text-white"
-  }
-};
-function resolveNativeCheckboxVariantStyles(variant) {
-  return nativeCheckboxVariants[variant];
-}
-function getIndicatorClassName({
-  checked,
-  className,
-  disabled,
-  indicatorClassName,
-  checkedIndicatorClassName,
-  resolvedShape,
-  variantCheckedClassName
-}) {
-  return cn(
-    "h-5 w-5 shrink-0 items-center justify-center border-2 border-gray-300 bg-white dark:border-neutral-600 dark:bg-neutral-900",
-    checkboxShapes[resolvedShape],
-    indicatorClassName,
-    className,
-    checked && variantCheckedClassName,
-    checked && checkedIndicatorClassName,
-    disabled && checkboxIndicatorDisabledClassName
-  );
-}
-function Tick({
-  checkedIconClassName,
-  iconClassName
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    reactNative.Text,
-    {
-      className: cn(
-        "text-sm font-bold leading-none",
-        iconClassName,
-        checkedIconClassName
-      ),
-      children: "\u2713"
-    }
-  );
-}
-function Checkbox(checkboxProps) {
-  const {
-    label,
-    placeholder,
-    variant,
-    shape,
-    disabled = false,
-    className,
-    groupClassName,
-    optionClassName,
-    indicatorClassName,
-    checkedIndicatorClassName,
-    checkedIconClassName,
-    labelClassName
-  } = checkboxProps;
-  const {
-    shape: resolvedShape,
-    variant: resolvedVariant,
-    label: resolvedLabel
-  } = useResolvedCheckboxConfig({
-    label,
-    placeholder,
-    variant,
-    shape
-  });
-  const {
-    isMulti,
-    multiField,
-    multiMeta,
-    multiHelpers,
-    singleField,
-    singleMeta,
-    singleHelpers
-  } = useCheckboxFieldState(checkboxProps);
-  const variantStyles = resolveNativeCheckboxVariantStyles(resolvedVariant);
-  const activeMeta = isMulti ? multiMeta : singleMeta;
-  const multiProps = isMultiCheckbox(checkboxProps) ? checkboxProps : null;
-  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.jsxs(reactNative.View, { className: cn(checkboxGroupClassName, groupClassName), children: [
-    !isMulti && /* @__PURE__ */ jsxRuntime.jsxs(
-      reactNative.Pressable,
-      {
-        accessibilityRole: "checkbox",
-        accessibilityState: {
-          checked: singleChecked,
-          disabled
-        },
-        className: cn(checkboxOptionRowClassName, optionClassName),
-        disabled,
-        onPress: () => singleHelpers.setValue(!singleChecked),
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            reactNative.View,
-            {
-              className: getIndicatorClassName({
-                checked: singleChecked,
-                className,
-                disabled,
-                indicatorClassName,
-                checkedIndicatorClassName,
-                resolvedShape,
-                variantCheckedClassName: variantStyles.checkedClassName
-              }),
-              children: singleChecked ? /* @__PURE__ */ jsxRuntime.jsx(
-                Tick,
-                {
-                  checkedIconClassName,
-                  iconClassName: variantStyles.iconClassName
-                }
-              ) : null
-            }
-          ),
-          resolvedLabel ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { className: cn(checkboxLabelClassName, labelClassName), children: resolvedLabel }) : null
-        ]
-      }
-    ),
-    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",
-        children: columnOptions.map((option) => {
-          const values = multiField.value ?? [];
-          const checked = values.includes(option.value);
-          const optionDisabled = disabled || option.disabled === true;
-          return /* @__PURE__ */ jsxRuntime.jsxs(
-            reactNative.Pressable,
-            {
-              accessibilityRole: "checkbox",
-              accessibilityState: {
-                checked,
-                disabled: optionDisabled
-              },
-              className: cn(checkboxOptionRowClassName, optionClassName),
-              disabled: optionDisabled,
-              onPress: () => multiHelpers.setValue(
-                checked ? values.filter((value) => value !== option.value) : [...values, option.value]
-              ),
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  reactNative.View,
-                  {
-                    className: getIndicatorClassName({
-                      checked,
-                      className,
-                      disabled: optionDisabled,
-                      indicatorClassName,
-                      checkedIndicatorClassName,
-                      resolvedShape,
-                      variantCheckedClassName: variantStyles.checkedClassName
-                    }),
-                    children: checked ? /* @__PURE__ */ jsxRuntime.jsx(
-                      Tick,
-                      {
-                        checkedIconClassName,
-                        iconClassName: variantStyles.iconClassName
-                      }
-                    ) : null
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  reactNative.Text,
-                  {
-                    className: cn(
-                      checkboxLabelClassName,
-                      optionDisabled && "opacity-60",
-                      labelClassName
-                    ),
-                    children: option.label
-                  }
-                )
-              ]
-            },
-            option.value
-          );
-        })
-      },
-      `${multiField.name}-column-${columnIndex}`
-    )) }) : null,
-    errorText ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { className: "px-2 py-1 text-sm font-medium text-eui-danger-500", children: errorText }) : null
-  ] });
-}
-
-// src/data/styles/shared.styles.tsx
-var inputShapes = shapes;
-var inputInlineInsetPx = 12;
-var inputInlineInsetClassName = "left-3";
-var inputInlinePaddingXClassName = "px-3";
-var inputRootClassName = "relative w-full";
-var inputFrameClassName = `relative h-14 w-full overflow-hidden border bg-white/95 ${inputInlinePaddingXClassName} dark:bg-eui-primary-300/10`;
-var inputFrameIdleClassName = "border-gray-300 hover:border-gray-400 dark:border-eui-dark-300 dark:hover:border-eui-dark-200";
-var inputFrameActiveClassName = "border-eui-secondary-600";
-var inputFrameErrorClassName = "border-eui-danger-500";
-var inputFrameDisabledClassName = "cursor-not-allowed opacity-60";
-var inputControlClassName = "w-full bg-transparent pt-5 pb-2 text-base font-normal text-gray-950 dark:text-gray-300";
-
-// src/components/data-entry/input/input-label/base/InputLabel.styles.ts
-var inputLabelStaticClassName = "pointer-events-none select-none px-0 text-[13.5px] leading-none text-[#6B7280]";
-var inputLabelBaseClassName = `pointer-events-none absolute ${inputInlineInsetClassName} z-10 select-none bg-transparent px-0 font-medium leading-none`;
-var inputLabelErrorClassName = "text-[#6B7280]";
-var inputLabelDisabledClassName = "opacity-60";
-var nativeInputLabelColors = {
-  default: "#6B7280",
-  disabled: "#9CA3AF"
-};
-var nativeInputLabelStyle = {
-  left: inputInlineInsetPx,
-  position: "absolute",
-  zIndex: 10
-};
-var nativeInputLabelMetrics = {
-  floatingFontSize: 12,
-  floatingTop: 6,
-  restingFontSize: 16,
-  restingTop: 18
-};
-function getLabelColor({ disabled }) {
-  if (disabled) {
-    return nativeInputLabelColors.disabled;
-  }
-  return nativeInputLabelColors.default;
-}
-function InputLabel({
-  text,
-  children,
-  className,
-  floating,
-  errored = false,
-  disabled = false,
-  animatedValue
-}) {
-  const isFloatingLabel = typeof floating === "boolean";
-  const progress = animatedValue;
-  const animatedStyle = progress ? {
-    fontSize: progress.interpolate({
-      inputRange: [0, 1],
-      outputRange: [
-        nativeInputLabelMetrics.restingFontSize,
-        nativeInputLabelMetrics.floatingFontSize
-      ]
-    }),
-    lineHeight: progress.interpolate({
-      inputRange: [0, 1],
-      outputRange: [
-        nativeInputLabelMetrics.restingFontSize,
-        nativeInputLabelMetrics.floatingFontSize
-      ]
-    }),
-    top: progress.interpolate({
-      inputRange: [0, 1],
-      outputRange: [
-        nativeInputLabelMetrics.restingTop,
-        nativeInputLabelMetrics.floatingTop
-      ]
-    })
-  } : {
-    fontSize: floating === true ? nativeInputLabelMetrics.floatingFontSize : nativeInputLabelMetrics.restingFontSize,
-    lineHeight: floating === true ? nativeInputLabelMetrics.floatingFontSize : nativeInputLabelMetrics.restingFontSize,
-    top: floating === true ? nativeInputLabelMetrics.floatingTop : nativeInputLabelMetrics.restingTop
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    reactNative.Animated.Text,
-    {
-      className: cn(
-        isFloatingLabel ? inputLabelBaseClassName : inputLabelStaticClassName,
-        isFloatingLabel && "bg-transparent px-0 dark:bg-transparent",
-        errored && inputLabelErrorClassName,
-        disabled && inputLabelDisabledClassName,
-        className
-      ),
-      style: [
-        isFloatingLabel ? nativeInputLabelStyle : null,
-        isFloatingLabel ? animatedStyle : null,
-        {
-          color: getLabelColor({ disabled }),
-          includeFontPadding: false
-        }
-      ],
-      children: text || children
-    }
-  );
-}
-
-// src/components/data-entry/input/input-response/base/InputResponse.styles.ts
-var inputResponseBaseClassName = `${inputInlinePaddingXClassName} pt-1.5 text-sm font-medium`;
-var inputResponseVariants = textVariants;
-function InputResponse({
-  name,
-  visibility = false,
-  variant = "default",
-  className,
-  message
-}) {
-  const [mounted, setMounted] = react.useState(Boolean(visibility));
-  const progress = react.useRef(new reactNative.Animated.Value(visibility ? 1 : 0)).current;
-  react.useEffect(() => {
-    if (visibility) {
-      setMounted(true);
-    }
-    reactNative.Animated.timing(progress, {
-      duration: visibility ? 180 : 120,
-      easing: visibility ? reactNative.Easing.out(reactNative.Easing.cubic) : reactNative.Easing.in(reactNative.Easing.cubic),
-      toValue: visibility ? 1 : 0,
-      useNativeDriver: true
-    }).start(() => {
-      if (!visibility) {
-        setMounted(false);
-      }
-    });
-  }, [progress, visibility]);
-  if (!mounted) {
-    return null;
-  }
-  const animatedStyle = {
-    opacity: progress,
-    transform: [
-      {
-        translateY: progress.interpolate({
-          inputRange: [0, 1],
-          outputRange: [6, 0]
-        })
-      }
-    ]
-  };
-  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(
-        inputResponseBaseClassName,
-        inputResponseVariants[variant],
-        className
-      ),
-      style: { includeFontPadding: false },
-      children: content
-    }
-  ) });
-}
-
-// src/components/data-entry/input/input/native/Input.native.styles.ts
-var nativeInputControlClassName = "h-full";
-var nativePasswordInputClassName = "pr-16";
-var nativePasswordToggleClassName = "absolute right-3 top-[18px] h-5 items-center justify-center";
-var nativePasswordToggleTextClassName = "text-xs font-semibold text-eui-dark-200";
-var nativeInputControlStyle = {
-  backgroundColor: "transparent",
-  borderBottomWidth: 0,
-  borderColor: "transparent",
-  borderWidth: 0,
-  includeFontPadding: false,
-  outlineColor: "transparent",
-  outlineStyle: "none",
-  textAlignVertical: "center"
-};
-function useResolvedDateSelectorConfig({
-  label,
-  placeholder,
-  shape
-}) {
-  const eui = useEUIConfig();
-  return {
-    label: label ?? placeholder,
-    shape: shape ?? eui?.config?.global?.shape ?? "square"
-  };
-}
-function useDateSelectorFieldState(props) {
-  const [field, meta, helpers] = formik.useField(props);
-  return {
-    field,
-    helpers,
-    meta
-  };
-}
-function DateSelector(dateSelectorProps) {
-  const {
-    disabled = false,
-    inputClassName,
-    label,
-    labelClassName,
-    placeholder,
-    responseClassName,
-    shape,
-    styles,
-    className,
-    onBlur,
-    onFocus
-  } = dateSelectorProps;
-  const { field, helpers, meta } = useDateSelectorFieldState(dateSelectorProps);
-  const [focused, setFocused] = react.useState(false);
-  const labelProgress = react.useRef(new reactNative.Animated.Value(1)).current;
-  const { label: resolvedLabel, shape: resolvedShape } = useResolvedDateSelectorConfig({
-    label,
-    placeholder,
-    shape
-  });
-  const hasError = Boolean(meta.touched && meta.error);
-  const errorText = hasError && typeof meta.error === "string" ? meta.error : null;
-  const handleBlur = (event) => {
-    setFocused(false);
-    helpers.setTouched(true);
-    onBlur?.(event);
-  };
-  const handleFocus = (event) => {
-    setFocused(true);
-    onFocus?.(
-      event
-    );
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { className: inputRootClassName, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      reactNative.View,
-      {
-        className: cn(
-          inputFrameClassName,
-          hasError ? inputFrameErrorClassName : focused ? inputFrameActiveClassName : inputFrameIdleClassName,
-          inputShapes[resolvedShape],
-          disabled && inputFrameDisabledClassName,
-          className,
-          styles
-        ),
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          reactNative.TextInput,
-          {
-            accessibilityLabel: resolvedLabel,
-            className: cn(
-              inputControlClassName,
-              nativeInputControlClassName,
-              inputClassName
-            ),
-            editable: !disabled,
-            keyboardType: "numbers-and-punctuation",
-            onBlur: handleBlur,
-            onChangeText: (value) => helpers.setValue(value),
-            onFocus: handleFocus,
-            placeholder: "",
-            style: nativeInputControlStyle,
-            underlineColorAndroid: "transparent",
-            value: field.value ?? ""
-          }
-        )
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      InputLabel,
-      {
-        animatedValue: labelProgress,
-        disabled,
-        errored: hasError,
-        floating: true,
-        text: resolvedLabel,
-        className: labelClassName
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      InputResponse,
-      {
-        message: errorText,
-        name: field.name,
-        visibility: Boolean(errorText),
-        variant: "danger",
-        className: responseClassName
-      }
-    )
-  ] });
-}
-function renderFormChildren(children, formik) {
-  return typeof children === "function" ? children(formik) : children;
-}
-function FormObservers({
-  formik,
-  onChange,
-  onDirtyChange
-}) {
-  const prevValuesRef = react.useRef(formik.values);
-  react.useEffect(() => {
-    onDirtyChange?.(formik.dirty);
-  }, [formik.dirty, onDirtyChange]);
-  react.useEffect(() => {
-    if (!onChange) return;
-    const currentValues = formik.values;
-    const prevValues = prevValuesRef.current;
-    const changed = {};
-    Object.keys(currentValues).forEach((key) => {
-      if (currentValues[key] !== prevValues[key]) {
-        changed[key] = currentValues[key];
-      }
-    });
-    if (Object.keys(changed).length > 0) {
-      onChange(currentValues, { changed });
-    }
-    prevValuesRef.current = currentValues;
-  }, [formik.values, onChange]);
-  return null;
-}
-function Form({
-  initialValues = {},
-  validationSchema,
-  enableReinitialize,
-  children,
-  className,
-  contentClassName,
-  onSubmit,
-  onChange,
-  onDirtyChange
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    formik.Formik,
-    {
-      initialValues,
-      validationSchema,
-      enableReinitialize,
-      onSubmit: async (values, helpers) => {
-        await onSubmit(values, helpers);
-      },
-      children: (formik) => /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { className: cn(className), children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          FormObservers,
-          {
-            formik,
-            onChange,
-            onDirtyChange
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { className: cn(contentClassName), children: renderFormChildren(children, formik) })
-      ] })
-    }
-  );
-}
-
-// src/components/data-entry/form/form-response/base/FormResponse.styles.ts
-var formResponseSizeStyles = {
-  xs: {
-    root: "px-2 py-1",
-    text: "text-xs"
-  },
-  sm: {
-    root: "px-3 py-2",
-    text: "text-sm"
-  },
-  md: {
-    root: "px-4 py-2",
-    text: "text-base"
-  },
-  lg: {
-    root: "px-5 py-3",
-    text: "text-lg"
-  },
-  xl: {
-    root: "px-6 py-4",
-    text: "text-xl"
-  }
-};
-function isTextClassName(token) {
-  const styleToken = token.split(":").pop() ?? token;
-  return styleToken.startsWith("text-");
-}
-function splitClassName(className) {
-  const tokens = className.split(/\s+/).filter(Boolean);
-  return {
-    root: tokens.filter((token) => !isTextClassName(token)).join(" "),
-    text: tokens.filter(isTextClassName).join(" ")
-  };
-}
-function resolveFormResponseStyles({
-  shape,
-  size,
-  variant
-}) {
-  const variantClassNames = splitClassName(variantsLite[variant]);
-  const sizeClassNames = formResponseSizeStyles[size];
-  return {
-    rootClassName: [
-      "border",
-      variantClassNames.root,
-      shapes[shape],
-      sizeClassNames.root
-    ].filter(Boolean).join(" "),
-    textClassName: [
-      "font-poppins font-light",
-      variantClassNames.text,
-      sizeClassNames.text
-    ].filter(Boolean).join(" ")
-  };
-}
-function FormResponse({
-  text,
-  variant = "default",
-  shape = "roundedSquare",
-  size = "md",
-  className,
-  textClassName
-}) {
-  if (!text) {
-    return null;
-  }
-  const styles = resolveFormResponseStyles({ shape, size, variant });
-  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,
-  type
-}) {
-  return type === "password" && passwordVisible ? "text" : type;
-}
-function useResolvedInputConfig({
-  label,
-  placeholder,
-  shape,
-  type = "text"
-}) {
-  const eui = useEUIConfig();
-  return {
-    shape: shape ?? eui?.config?.global?.shape ?? "square",
-    type,
-    label: label ?? placeholder
-  };
-}
-function useInputFieldState(props) {
-  const [field, meta, helpers] = formik.useField(props);
-  return {
-    field,
-    meta,
-    helpers
-  };
-}
-function Input(inputProps) {
-  const {
-    type = "text",
-    label,
-    placeholder,
-    inputClassName,
-    labelClassName,
-    responseClassName,
-    step: _step,
-    shape,
-    disabled = false,
-    className,
-    onBlur,
-    onFocus,
-    onChange: _onChange,
-    ..._props
-  } = inputProps;
-  const { field, helpers, meta } = useInputFieldState(inputProps);
-  const [focused, setFocused] = react.useState(false);
-  const [passwordVisible, setPasswordVisible] = react.useState(false);
-  const labelProgress = react.useRef(
-    new reactNative.Animated.Value(String(field.value ?? "").length > 0 ? 1 : 0)
-  ).current;
-  const {
-    shape: resolvedShape,
-    type: resolvedType,
-    label: resolvedLabel
-  } = useResolvedInputConfig({
-    label,
-    placeholder,
-    shape,
-    type
-  });
-  const inputType = resolveInputType({
-    passwordVisible,
-    type: resolvedType
-  });
-  const hasError = Boolean(meta.touched && meta.error);
-  const errorText = hasError && typeof meta.error === "string" ? meta.error : null;
-  const hasValue = String(field.value ?? "").length > 0;
-  const floating = focused || hasValue;
-  react.useEffect(() => {
-    reactNative.Animated.timing(labelProgress, {
-      duration: 190,
-      easing: reactNative.Easing.out(reactNative.Easing.cubic),
-      toValue: floating ? 1 : 0,
-      useNativeDriver: false
-    }).start();
-  }, [floating, labelProgress]);
-  const handleBlur = (event) => {
-    setFocused(false);
-    helpers.setTouched(true);
-    onBlur?.(event);
-  };
-  const handleFocus = (event) => {
-    setFocused(true);
-    onFocus?.(event);
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { className: inputRootClassName, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      reactNative.View,
-      {
-        className: cn(
-          inputFrameClassName,
-          hasError ? inputFrameErrorClassName : focused ? inputFrameActiveClassName : inputFrameIdleClassName,
-          inputShapes[resolvedShape],
-          disabled && inputFrameDisabledClassName,
-          className
-        ),
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          reactNative.TextInput,
-          {
-            accessibilityLabel: resolvedLabel,
-            className: cn(
-              inputControlClassName,
-              nativeInputControlClassName,
-              type === "password" && nativePasswordInputClassName,
-              inputClassName
-            ),
-            editable: !disabled,
-            keyboardType: inputType === "number" ? "numeric" : "default",
-            onBlur: handleBlur,
-            onChangeText: (value) => helpers.setValue(value),
-            onFocus: handleFocus,
-            placeholder: "",
-            secureTextEntry: type === "password" && !passwordVisible,
-            style: nativeInputControlStyle,
-            underlineColorAndroid: "transparent",
-            value: field.value ?? ""
-          }
-        )
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      InputLabel,
-      {
-        animatedValue: labelProgress,
-        disabled,
-        errored: hasError,
-        floating,
-        text: resolvedLabel,
-        className: labelClassName
-      }
-    ),
-    type === "password" ? /* @__PURE__ */ jsxRuntime.jsx(
-      reactNative.Pressable,
-      {
-        accessibilityRole: "button",
-        accessibilityLabel: passwordVisible ? "Hide password" : "Show password",
-        className: nativePasswordToggleClassName,
-        disabled,
-        onPress: () => setPasswordVisible((current) => !current),
-        children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { className: nativePasswordToggleTextClassName, children: passwordVisible ? "Hide" : "Show" })
-      }
-    ) : null,
-    /* @__PURE__ */ jsxRuntime.jsx(
-      InputResponse,
-      {
-        message: errorText,
-        name: field.name,
-        visibility: Boolean(errorText),
-        variant: "danger",
-        className: responseClassName
-      }
-    )
-  ] });
-}
-function useResolvedInputFileConfig({
-  label,
-  placeholder,
-  shape
-}) {
-  const eui = useEUIConfig();
-  return {
-    label: label ?? placeholder,
-    shape: shape ?? eui?.config?.global?.shape ?? "square"
-  };
-}
-function useInputFileFieldState(props) {
-  const [field, meta, helpers] = formik.useField(props);
-  return {
-    field,
-    helpers,
-    meta
-  };
-}
-function isNativeInputFileValue(file) {
-  return Boolean(file && typeof file === "object");
-}
-function getInputFileName(file) {
-  if (!isNativeInputFileValue(file)) {
-    return "";
-  }
-  if ("name" in file && file.name) {
-    return file.name;
-  }
-  if ("fileName" in file && file.fileName) {
-    return file.fileName;
-  }
-  if ("uri" in file && file.uri) {
-    return file.uri.split("/").filter(Boolean).pop() ?? "";
-  }
-  return "";
-}
-function InputFile(inputFileProps) {
-  const {
-    disabled = false,
-    inputClassName,
-    label,
-    labelClassName,
-    onFileSelect,
-    placeholder,
-    responseClassName,
-    shape,
-    className
-  } = inputFileProps;
-  const { field, meta, helpers } = useInputFileFieldState(inputFileProps);
-  const [focused, setFocused] = react.useState(false);
-  const { label: resolvedLabel, shape: resolvedShape } = useResolvedInputFileConfig({
-    label,
-    placeholder,
-    shape
-  });
-  const hasError = Boolean(meta.touched && meta.error);
-  const errorText = hasError && typeof meta.error === "string" ? meta.error : null;
-  const fileName = getInputFileName(field.value);
-  const floating = focused || Boolean(fileName);
-  const handlePress = async () => {
-    if (disabled || !onFileSelect) {
-      return;
-    }
-    setFocused(true);
-    const selectedFile = await onFileSelect();
-    if (selectedFile !== void 0) {
-      await helpers.setValue(selectedFile);
-      await helpers.setTouched(true);
-    }
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { className: inputRootClassName, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      reactNative.Pressable,
-      {
-        accessibilityLabel: resolvedLabel,
-        accessibilityRole: "button",
-        disabled,
-        onBlur: () => setFocused(false),
-        onFocus: () => setFocused(true),
-        onPress: () => void handlePress(),
-        className: cn(
-          inputFrameClassName,
-          "justify-center",
-          hasError ? inputFrameErrorClassName : focused ? inputFrameActiveClassName : inputFrameIdleClassName,
-          inputShapes[resolvedShape],
-          disabled && inputFrameDisabledClassName,
-          className
-        ),
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          reactNative.Text,
-          {
-            numberOfLines: 1,
-            className: cn(
-              inputControlClassName,
-              "pt-5 pb-2",
-              !fileName && "text-gray-500 dark:text-gray-300",
-              inputClassName
-            ),
-            style: { includeFontPadding: false },
-            children: fileName
-          }
-        )
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      InputLabel,
-      {
-        disabled,
-        errored: hasError,
-        floating,
-        text: resolvedLabel,
-        className: labelClassName
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      InputResponse,
-      {
-        message: errorText,
-        name: field.name,
-        visibility: Boolean(errorText),
-        variant: "danger",
-        className: responseClassName
-      }
-    )
-  ] });
-}
-function useResolvedSelectConfig({
-  label,
-  placeholder,
-  shape
-}) {
-  const eui = useEUIConfig();
-  return {
-    label: label ?? placeholder,
-    shape: shape ?? eui?.config?.global?.shape ?? "square"
-  };
-}
-function useSelectFieldState(props) {
-  const [field, meta, helpers] = formik.useField(props);
-  return {
-    field,
-    helpers,
-    meta
-  };
-}
-function getSelectOptionLabel(options, value) {
-  const option = options.find((item) => item.value === value);
-  if (!option) {
-    return "";
-  }
-  return String(option.label ?? "");
-}
-function Select(selectProps) {
-  const {
-    disabled = false,
-    inputClassName,
-    label,
-    labelClassName,
-    options,
-    placeholder,
-    responseClassName,
-    shape,
-    styles,
-    className,
-    onBlur,
-    onFocus,
-    ..._props
-  } = selectProps;
-  const { field, helpers, meta } = useSelectFieldState(selectProps);
-  const [focused, setFocused] = react.useState(false);
-  const [open, setOpen] = react.useState(false);
-  const { label: resolvedLabel, shape: resolvedShape } = useResolvedSelectConfig({
-    label,
-    placeholder,
-    shape
-  });
-  const hasError = Boolean(meta.touched && meta.error);
-  const errorText = hasError && typeof meta.error === "string" ? meta.error : null;
-  const selectedLabel = getSelectOptionLabel(options, field.value ?? "");
-  const closeOptions = () => {
-    setOpen(false);
-    setFocused(false);
-    void helpers.setTouched(true);
-  };
-  const handleOpen = () => {
-    if (disabled) {
-      return;
-    }
-    setFocused(true);
-    setOpen(true);
-  };
-  const handleSelect = (option) => {
-    if (option.disabled) {
-      return;
-    }
-    void helpers.setValue(option.value);
-    void helpers.setTouched(true);
-    setOpen(false);
-    setFocused(false);
-  };
-  const handleBlur = (event) => {
-    setFocused(false);
-    void helpers.setTouched(true);
-    onBlur?.(event);
-  };
-  const handleFocus = (event) => {
-    setFocused(true);
-    onFocus?.(event);
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { className: inputRootClassName, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      reactNative.Pressable,
-      {
-        accessibilityLabel: resolvedLabel,
-        accessibilityRole: "button",
-        accessibilityState: { disabled, expanded: open },
-        disabled,
-        onBlur: handleBlur,
-        onFocus: handleFocus,
-        onPress: handleOpen,
-        className: cn(
-          inputFrameClassName,
-          "justify-center",
-          hasError ? inputFrameErrorClassName : focused || open ? inputFrameActiveClassName : inputFrameIdleClassName,
-          inputShapes[resolvedShape],
-          disabled && inputFrameDisabledClassName,
-          className,
-          styles
-        ),
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          reactNative.Text,
-          {
-            numberOfLines: 1,
-            className: cn(
-              inputControlClassName,
-              "pt-5 pb-2",
-              !selectedLabel && "text-gray-500 dark:text-gray-300",
-              inputClassName
-            ),
-            style: { includeFontPadding: false },
-            children: selectedLabel
-          }
-        )
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      InputLabel,
-      {
-        disabled,
-        errored: hasError,
-        floating: true,
-        text: resolvedLabel,
-        className: labelClassName
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      InputResponse,
-      {
-        message: errorText,
-        name: field.name,
-        visibility: Boolean(errorText),
-        variant: "danger",
-        className: responseClassName
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      reactNative.Modal,
-      {
-        animationType: "fade",
-        onRequestClose: closeOptions,
-        transparent: true,
-        visible: open,
-        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",
-              accessibilityRole: "button",
-              className: "absolute inset-0",
-              onPress: closeOptions
-            }
-          ),
-          /* @__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.jsx(
-              reactNative.Pressable,
-              {
-                accessibilityRole: "button",
-                accessibilityState: {
-                  disabled: option.disabled,
-                  selected
-                },
-                disabled: option.disabled,
-                onPress: () => handleSelect(option),
-                className: cn(
-                  "min-h-12 justify-center border-b border-gray-200 px-4 py-3 dark:border-eui-dark-300",
-                  selected && "bg-eui-secondary-500/10",
-                  option.disabled && "opacity-50"
-                ),
-                children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { className: "text-base font-medium text-gray-950 dark:text-gray-50", children: String(option.label) })
-              },
-              option.value
-            );
-          }) }) })
-        ] })
-      }
-    )
-  ] });
-}
-function useResolvedTagsConfig({
-  label,
-  limit = 10,
-  placeholder,
-  shape
-}) {
-  const eui = useEUIConfig();
-  return {
-    label: label ?? placeholder,
-    limit,
-    shape: shape ?? eui?.config?.global?.shape ?? "square"
-  };
-}
-function useTagsFieldState(props) {
-  const [field, meta, helpers] = formik.useField(props);
-  return {
-    field,
-    helpers,
-    meta
-  };
-}
-function getTagsValue(value) {
-  if (!Array.isArray(value)) {
-    return [];
-  }
-  return value.filter((tag) => typeof tag === "string");
-}
-function addTagToList(tags, value, limit) {
-  const trimmed = value.trim();
-  if (!trimmed || tags.includes(trimmed) || tags.length >= limit) {
-    return tags;
-  }
-  return [...tags, trimmed];
-}
-function removeTagFromList(tags, index) {
-  return tags.filter((_, tagIndex) => tagIndex !== index);
-}
-var nativeTagsInputControlStyle = {
-  ...nativeInputControlStyle,
-  minHeight: 28,
-  paddingBottom: 0,
-  paddingTop: 0
-};
-function Tags(tagsProps) {
-  const {
-    disabled = false,
-    inputClassName,
-    label,
-    labelClassName,
-    limit,
-    placeholder,
-    responseClassName,
-    shape,
-    styles,
-    tagClassName,
-    removeButtonClassName,
-    counterClassName,
-    className,
-    onBlur,
-    onFocus,
-    ..._props
-  } = tagsProps;
-  const { field, helpers, meta } = useTagsFieldState(tagsProps);
-  const [input, setInput] = react.useState("");
-  const [focused, setFocused] = react.useState(false);
-  const {
-    label: resolvedLabel,
-    limit: resolvedLimit,
-    shape: resolvedShape
-  } = useResolvedTagsConfig({
-    label,
-    limit,
-    placeholder,
-    shape
-  });
-  const tags = getTagsValue(field.value);
-  const hasError = Boolean(meta.touched && meta.error);
-  const errorText = hasError && typeof meta.error === "string" ? meta.error : null;
-  const floating = focused || input.length > 0 || tags.length > 0;
-  const handleAddTag = (value = input) => {
-    if (disabled) {
-      return;
-    }
-    const nextTags = addTagToList(tags, value, resolvedLimit);
-    if (nextTags !== tags) {
-      void helpers.setValue(nextTags);
-    }
-    if (value.trim()) {
-      void helpers.setTouched(true);
-    }
-    setInput("");
-  };
-  const handleChangeText = (value) => {
-    if (value.endsWith(",")) {
-      handleAddTag(value.slice(0, -1));
-      return;
-    }
-    setInput(value);
-  };
-  const handleKeyPress = (event) => {
-    if (event.nativeEvent?.key === "Backspace" && input === "" && tags.length) {
-      void helpers.setValue(tags.slice(0, -1));
-      void helpers.setTouched(true);
-    }
-  };
-  const handleRemoveTag = (index) => {
-    if (disabled) {
-      return;
-    }
-    void helpers.setValue(removeTagFromList(tags, index));
-    void helpers.setTouched(true);
-  };
-  const handleBlur = (event) => {
-    setFocused(false);
-    void helpers.setTouched(true);
-    onBlur?.(event);
-  };
-  const handleFocus = (event) => {
-    setFocused(true);
-    onFocus?.(event);
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { className: inputRootClassName, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      reactNative.View,
-      {
-        className: cn(
-          inputFrameClassName,
-          "h-auto min-h-14 flex-row flex-wrap items-center gap-2 overflow-visible px-3 pt-6 pb-7",
-          hasError ? inputFrameErrorClassName : focused ? inputFrameActiveClassName : inputFrameIdleClassName,
-          inputShapes[resolvedShape],
-          disabled && inputFrameDisabledClassName,
-          className,
-          styles
-        ),
-        children: [
-          tags.map((tag, index) => /* @__PURE__ */ jsxRuntime.jsxs(
-            reactNative.View,
-            {
-              className: cn(
-                "max-w-full flex-row items-center gap-1 rounded bg-eui-light-300 px-2 py-1 dark:bg-eui-dark-400",
-                tagClassName
-              ),
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  reactNative.Text,
-                  {
-                    className: "shrink text-sm font-medium text-eui-dark-700 dark:text-eui-light-300",
-                    numberOfLines: 1,
-                    style: { includeFontPadding: false },
-                    children: tag
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  reactNative.Pressable,
-                  {
-                    accessibilityLabel: `Remove ${tag}`,
-                    accessibilityRole: "button",
-                    className: cn(
-                      "h-5 w-5 items-center justify-center",
-                      disabled && "opacity-50",
-                      removeButtonClassName
-                    ),
-                    disabled,
-                    onPress: () => handleRemoveTag(index),
-                    children: /* @__PURE__ */ jsxRuntime.jsx(
-                      reactNative.Text,
-                      {
-                        className: "text-xs font-bold text-eui-danger-500",
-                        style: { includeFontPadding: false },
-                        children: "x"
-                      }
-                    )
-                  }
-                )
-              ]
-            },
-            `${tag}-${index}`
-          )),
-          tags.length < resolvedLimit ? /* @__PURE__ */ jsxRuntime.jsx(
-            reactNative.TextInput,
-            {
-              accessibilityLabel: resolvedLabel,
-              className: cn(
-                inputControlClassName,
-                "h-7 w-auto min-w-[120px] flex-1 p-0",
-                inputClassName
-              ),
-              editable: !disabled,
-              onBlur: handleBlur,
-              onChangeText: handleChangeText,
-              onFocus: handleFocus,
-              onKeyPress: handleKeyPress,
-              onSubmitEditing: () => handleAddTag(),
-              placeholder: "",
-              returnKeyType: "done",
-              style: nativeTagsInputControlStyle,
-              underlineColorAndroid: "transparent",
-              value: input
-            }
-          ) : null,
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            reactNative.Text,
-            {
-              className: cn(
-                "absolute bottom-3 right-3 text-xs font-semibold text-eui-dark-50",
-                counterClassName
-              ),
-              style: { includeFontPadding: false },
-              children: [
-                tags.length,
-                "/",
-                resolvedLimit
-              ]
-            }
-          )
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      InputLabel,
-      {
-        disabled,
-        errored: hasError,
-        floating,
-        text: resolvedLabel,
-        className: labelClassName
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      InputResponse,
-      {
-        message: errorText,
-        name: field.name,
-        visibility: Boolean(errorText),
-        variant: "danger",
-        className: responseClassName
-      }
-    )
-  ] });
-}
-function useResolvedTextAreaConfig({
-  label,
-  limit = 1e3,
-  placeholder,
-  shape
-}) {
-  const eui = useEUIConfig();
-  return {
-    label: label ?? placeholder,
-    limit,
-    shape: shape ?? eui?.config?.global?.shape ?? "square"
-  };
-}
-function useTextAreaFieldState(props) {
-  const [field, meta, helpers] = formik.useField(props);
-  return {
-    field,
-    helpers,
-    meta
-  };
-}
-function getTextAreaCharacterCount(value) {
-  return String(value ?? "").length;
-}
-var nativeTextAreaControlStyle = {
-  ...nativeInputControlStyle,
-  minHeight: 128,
-  textAlignVertical: "top"
-};
-function TextArea(textAreaProps) {
-  const {
-    disabled = false,
-    inputClassName,
-    label,
-    labelClassName,
-    limit,
-    placeholder,
-    responseClassName,
-    shape,
-    styles,
-    className,
-    onBlur,
-    onFocus,
-    ..._props
-  } = textAreaProps;
-  const { field, helpers, meta } = useTextAreaFieldState(textAreaProps);
-  const [focused, setFocused] = react.useState(false);
-  const {
-    label: resolvedLabel,
-    limit: resolvedLimit,
-    shape: resolvedShape
-  } = useResolvedTextAreaConfig({
-    label,
-    limit,
-    placeholder,
-    shape
-  });
-  const hasError = Boolean(meta.touched && meta.error);
-  const errorText = hasError && typeof meta.error === "string" ? meta.error : null;
-  const characterCount = getTextAreaCharacterCount(field.value);
-  const floating = focused || characterCount > 0;
-  const handleBlur = (event) => {
-    setFocused(false);
-    void helpers.setTouched(true);
-    onBlur?.(event);
-  };
-  const handleFocus = (event) => {
-    setFocused(true);
-    onFocus?.(event);
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { className: inputRootClassName, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      reactNative.View,
-      {
-        className: cn(
-          inputFrameClassName,
-          "h-auto min-h-32 px-3",
-          hasError ? inputFrameErrorClassName : focused ? inputFrameActiveClassName : inputFrameIdleClassName,
-          inputShapes[resolvedShape],
-          disabled && inputFrameDisabledClassName,
-          className,
-          styles
-        ),
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            reactNative.TextInput,
-            {
-              accessibilityLabel: resolvedLabel,
-              className: cn(inputControlClassName, "min-h-32 pb-8", inputClassName),
-              editable: !disabled,
-              maxLength: resolvedLimit,
-              multiline: true,
-              onBlur: handleBlur,
-              onChangeText: (value) => helpers.setValue(value),
-              onFocus: handleFocus,
-              placeholder: "",
-              style: nativeTextAreaControlStyle,
-              underlineColorAndroid: "transparent",
-              value: field.value ?? ""
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsxs(reactNative.Text, { className: "absolute bottom-3 right-3 text-xs font-semibold text-eui-dark-50", children: [
-            characterCount,
-            "/",
-            resolvedLimit
-          ] })
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      InputLabel,
-      {
-        disabled,
-        errored: hasError,
-        floating,
-        text: resolvedLabel,
-        className: labelClassName
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      InputResponse,
-      {
-        message: errorText,
-        name: field.name,
-        visibility: Boolean(errorText),
-        variant: "danger",
-        className: responseClassName
-      }
-    )
-  ] });
-}
-
-exports.Button = Button_native_default;
-exports.Checkbox = Checkbox;
-exports.DateSelector = DateSelector;
-exports.EUIProvider = EUIProvider;
-exports.Form = Form;
-exports.FormResponse = FormResponse;
-exports.Input = Input;
-exports.InputFile = InputFile;
-exports.InputLabel = InputLabel;
-exports.InputResponse = InputResponse;
-exports.Select = Select;
-exports.Tags = Tags;
-exports.TextArea = TextArea;
-exports.resolveWithGlobal = resolveWithGlobal;
-exports.useEUIConfig = useEUIConfig;
-//# sourceMappingURL=index.native.js.map
-//# sourceMappingURL=index.native.js.map