@scripso-homepad/ui 0.4.8 → 0.4.10

package/dist/index.js

@@ -1,196 +1,10 @@
-import { colors, buttonTypography, spacing, fontSize, fontWeight, fonts, radii, INPUT_ICON_GAP, useApplyWebClassName, resolveInputVisualState, Label, getInputFieldStyles, inputFieldMetrics } from './chunk-DAOLVE64.js';
-export { Input, Label, brand, buttonTypography, colors, emeraldGreen, fontSize, fontWeight, fonts, labelTypography, navy, radii, rubyRed, shadows, spacing, stormGray } from './chunk-DAOLVE64.js';
+import { spacing, colors, fontSize, fontWeight, fonts, radii, INPUT_ICON_GAP, useApplyWebClassName, resolveInputVisualState, Label, getInputFieldStyles, inputFieldMetrics } from './chunk-YSDLHEJ7.js';
+export { Button, Input, Label, brand, buttonTypography, colors, emeraldGreen, fontSize, fontWeight, fonts, labelTypography, navy, radii, rubyRed, shadows, spacing, stormGray } from './chunk-YSDLHEJ7.js';
 import { createContext, useRef, useState, useMemo, useEffect, useLayoutEffect, useContext, isValidElement, cloneElement } from 'react';
-import { StyleSheet, Platform, TouchableOpacity, Text, View, Animated, Easing, Pressable, Modal, ScrollView, TextInput, Dimensions } from 'react-native';
-import Svg3, { Path } from 'react-native-svg';
+import { Platform, StyleSheet, Animated, Easing, Pressable, Text, View, Modal, ScrollView, TextInput, Dimensions } from 'react-native';
+import Svg2, { Path } from 'react-native-svg';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
-// src/icons/arrowUpRightPath.ts
-var ARROW_UP_RIGHT_PATH = "M14.1667 14.1668V5.8335H5.83333M14.1667 5.8335L5.83333 14.1668";
-function ArrowUpRightIcon({
-  size = 20,
-  color = "#082640",
-  strokeWidth = 2
-}) {
-  return /* @__PURE__ */ jsx(Svg3, { width: size, height: size, viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsx(
-    Path,
-    {
-      d: ARROW_UP_RIGHT_PATH,
-      stroke: color,
-      strokeWidth,
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    }
-  ) });
-}
-var variantConfig = {
-  white: {
-    backgroundColor: colors.white,
-    textColor: colors.slateBlue,
-    iconBadgeBackgroundColor: colors.stormGray150,
-    iconColor: colors.navy
-  },
-  primary: {
-    backgroundColor: colors.navy,
-    textColor: colors.stormGray0,
-    iconBadgeBackgroundColor: colors.white,
-    iconColor: colors.navy
-  },
-  green: {
-    backgroundColor: colors.green,
-    textColor: colors.stormGray0,
-    iconBadgeBackgroundColor: colors.white,
-    iconColor: colors.green
-  },
-  gray: {
-    backgroundColor: colors.stormGray50,
-    textColor: colors.slateBlue,
-    iconBadgeBackgroundColor: colors.stormGray150,
-    iconColor: colors.navy
-  }
-};
-var sizeConfig = {
-  lg: {
-    borderRadius: 16,
-    paddingTop: 8,
-    paddingRight: 8,
-    paddingBottom: 8,
-    paddingLeft: 24,
-    paddingHorizontalCentered: 24,
-    text: buttonTypography.lg,
-    iconContainerSize: 36,
-    iconContainerRadius: 12,
-    iconContainerPadding: 8,
-    iconSize: 20
-  },
-  sm: {
-    borderRadius: 12,
-    paddingTop: 8,
-    paddingRight: 8,
-    paddingBottom: 8,
-    paddingLeft: 16,
-    paddingHorizontalCentered: 16,
-    text: buttonTypography.sm,
-    iconContainerSize: 32,
-    iconContainerRadius: 8,
-    iconContainerPadding: 8,
-    iconSize: 16
-  }
-};
-function Button({
-  title,
-  children,
-  onPress,
-  disabled = false,
-  variant = "primary",
-  size = "lg",
-  showIcon = false,
-  icon,
-  style,
-  textStyle,
-  className,
-  textClassName
-}) {
-  const containerRef = useRef(null);
-  const textRef = useRef(null);
-  const preset = variantConfig[variant];
-  const metrics = sizeConfig[size];
-  useApplyWebClassName(containerRef, className);
-  useApplyWebClassName(textRef, textClassName);
-  const label = typeof children !== "undefined" ? children : title;
-  const hasCustomChildren = typeof children !== "undefined";
-  const customIcon = icon != null && typeof icon !== "boolean" ? icon : void 0;
-  const hasIcon = showIcon || icon === true || customIcon != null;
-  const iconNode = customIcon ?? /* @__PURE__ */ jsx(ArrowUpRightIcon, { size: metrics.iconSize, color: preset.iconColor });
-  const containerStyle = [
-    styles.base,
-    {
-      borderRadius: metrics.borderRadius,
-      backgroundColor: preset.backgroundColor,
-      paddingTop: metrics.paddingTop,
-      paddingBottom: metrics.paddingBottom,
-      paddingLeft: hasIcon ? metrics.paddingLeft : metrics.paddingHorizontalCentered,
-      paddingRight: hasIcon ? metrics.paddingRight : metrics.paddingHorizontalCentered
-    },
-    hasIcon ? styles.withIcon : styles.centered,
-    disabled && styles.disabled,
-    style
-  ];
-  const labelStyle = [
-    styles.label,
-    metrics.text,
-    { color: preset.textColor },
-    Platform.OS === "android" ? styles.labelAndroid : null,
-    !hasIcon && styles.labelCentered,
-    hasIcon && styles.labelWithIcon,
-    textStyle
-  ];
-  return /* @__PURE__ */ jsxs(
-    TouchableOpacity,
-    {
-      ref: containerRef,
-      style: containerStyle,
-      onPress,
-      disabled,
-      activeOpacity: 0.7,
-      accessibilityRole: "button",
-      accessibilityState: { disabled },
-      children: [
-        hasCustomChildren ? children : /* @__PURE__ */ jsx(Text, { ref: textRef, style: labelStyle, children: label }),
-        hasIcon ? /* @__PURE__ */ jsx(
-          View,
-          {
-            style: [
-              styles.iconContainer,
-              {
-                width: metrics.iconContainerSize,
-                height: metrics.iconContainerSize,
-                borderRadius: metrics.iconContainerRadius,
-                padding: metrics.iconContainerPadding,
-                backgroundColor: preset.iconBadgeBackgroundColor
-              }
-            ],
-            children: iconNode
-          }
-        ) : null
-      ]
-    }
-  );
-}
-var styles = StyleSheet.create({
-  base: {
-    flexDirection: "row",
-    alignItems: "center",
-    borderWidth: 0
-  },
-  centered: {
-    justifyContent: "center"
-  },
-  withIcon: {
-    justifyContent: "space-between"
-  },
-  disabled: {
-    opacity: 0.6
-  },
-  label: {},
-  labelAndroid: {
-    includeFontPadding: false
-  },
-  labelCentered: {
-    textAlign: "center"
-  },
-  labelWithIcon: {
-    flex: 1,
-    flexShrink: 1,
-    marginRight: 8
-  },
-  iconContainer: {
-    alignItems: "center",
-    justifyContent: "center",
-    flexShrink: 0
-  }
-});
-
 // src/icons/chevronDownPath.ts
 var CHEVRON_DOWN_PATH = "M4 6L8 10L12 6";
 var CHEVRON_DOWN_PATH_20 = "M5 7.5L10 12.5L15 7.5";
@@ -201,7 +15,7 @@ function ChevronDownIcon({
 }) {
   const useLarge = size >= 20;
   return /* @__PURE__ */ jsx(
-    Svg3,
+    Svg2,
     {
       width: size,
       height: size,
@@ -604,7 +418,7 @@ function Select({
   const optionHeight = compact ? SELECT_OPTION_HEIGHT_COMPACT : SELECT_OPTION_HEIGHT;
   const needsScroll = useMemo(
     () => resolveSelectDropdownContentHeight(options.length, optionHeight) > SELECT_DROPDOWN_MAX_HEIGHT - SELECT_DROPDOWN_PADDING * 2,
-    [compact, optionHeight, options.length]
+    [optionHeight, options.length]
   );
   useApplyWebClassName(wrapperRef, className);
   useApplyWebClassName(triggerRef, fieldClassName);
@@ -717,13 +531,13 @@ function Select({
         },
         style: [
           selectDropdownMetrics.option,
-          compact && styles2.optionCompact,
+          compact && styles.optionCompact,
           { height: optionHeight, minHeight: optionHeight, maxHeight: optionHeight },
           isSelected && selectDropdownMetrics.optionSelected,
-          compact && isSelected && styles2.optionSelectedCompact,
+          compact && isSelected && styles.optionSelectedCompact,
           isHighlighted && !isSelected && !option.disabled ? selectDropdownMetrics.optionHighlighted : null,
-          !isLast && styles2.optionSpacing,
-          option.disabled && styles2.optionDisabled
+          !isLast && styles.optionSpacing,
+          option.disabled && styles.optionDisabled
         ],
         children: /* @__PURE__ */ jsx(
           Text,
@@ -731,7 +545,7 @@ function Select({
             style: [
               selectDropdownMetrics.optionLabel,
               isSelected && selectDropdownMetrics.optionLabelSelected,
-              option.disabled && styles2.optionLabelDisabled
+              option.disabled && styles.optionLabelDisabled
             ],
             numberOfLines: 1,
             children: option.label
@@ -742,8 +556,8 @@ function Select({
     );
   });
   const dropdownTop = anchor ? resolveSelectDropdownTop(anchor, dropdownHeight) : 0;
-  return /* @__PURE__ */ jsxs(View, { ref: wrapperRef, style: [styles2.wrapper, containerStyle], children: [
-    label ? /* @__PURE__ */ jsx(Label, { disabled, style: styles2.label, className: labelClassName, children: label }) : null,
+  return /* @__PURE__ */ jsxs(View, { ref: wrapperRef, style: [styles.wrapper, containerStyle], children: [
+    label ? /* @__PURE__ */ jsx(Label, { disabled, style: styles.label, className: labelClassName, children: label }) : null,
     /* @__PURE__ */ jsx(View, { style: fieldStyles.outline, children: /* @__PURE__ */ jsxs(
       Pressable,
       {
@@ -754,11 +568,11 @@ function Select({
         onPress: open ? closeMenu : openMenu,
         style: [selectFieldMetrics.container, fieldStyles.container, fieldStyle],
         children: [
-          leftIcon ? /* @__PURE__ */ jsx(View, { style: styles2.iconSlot, children: renderSelectIcon(leftIcon, fieldStyles.icon) }) : null,
+          leftIcon ? /* @__PURE__ */ jsx(View, { style: styles.iconSlot, children: renderSelectIcon(leftIcon, fieldStyles.icon) }) : null,
           /* @__PURE__ */ jsx(
             View,
             {
-              style: styles2.valueContainer,
+              style: styles.valueContainer,
               onLayout: (event) => {
                 setValueContainerWidth(event.nativeEvent.layout.width);
               },
@@ -779,7 +593,7 @@ function Select({
           /* @__PURE__ */ jsx(
             Animated.View,
             {
-              style: [styles2.iconSlot, { transform: [{ rotate: chevronRotate }] }],
+              style: [styles.iconSlot, { transform: [{ rotate: chevronRotate }] }],
               children: /* @__PURE__ */ jsx(
                 ChevronDownIcon,
                 {
@@ -792,14 +606,14 @@ function Select({
         ]
       }
     ) }),
-    helperMessage ? /* @__PURE__ */ jsx(Text, { ref: helperRef, style: error ? styles2.error : styles2.hint, children: helperMessage }) : null,
-    /* @__PURE__ */ jsx(Modal, { visible: open, transparent: true, animationType: "fade", onRequestClose: closeMenu, children: /* @__PURE__ */ jsx(Pressable, { style: styles2.overlay, onPress: closeMenu, children: anchor ? /* @__PURE__ */ jsx(
+    helperMessage ? /* @__PURE__ */ jsx(Text, { ref: helperRef, style: error ? styles.error : styles.hint, children: helperMessage }) : null,
+    /* @__PURE__ */ jsx(Modal, { visible: open, transparent: true, animationType: "fade", onRequestClose: closeMenu, children: /* @__PURE__ */ jsx(Pressable, { style: styles.overlay, onPress: closeMenu, children: anchor ? /* @__PURE__ */ jsx(
       View,
       {
         ref: menuRef,
         style: [
           selectDropdownMetrics.menu,
-          styles2.dropdown,
+          styles.dropdown,
           {
             top: dropdownTop,
             left: anchor.x,
@@ -811,20 +625,20 @@ function Select({
           ScrollView,
           {
             ref: scrollRef,
-            style: styles2.dropdownScroll,
-            contentContainerStyle: styles2.dropdownContent,
+            style: styles.dropdownScroll,
+            contentContainerStyle: styles.dropdownContent,
             keyboardShouldPersistTaps: "handled",
             showsVerticalScrollIndicator: true,
             bounces: false,
             nestedScrollEnabled: true,
             children: optionList
           }
-        ) : /* @__PURE__ */ jsx(View, { style: styles2.dropdownContent, children: optionList })
+        ) : /* @__PURE__ */ jsx(View, { style: styles.dropdownContent, children: optionList })
       }
     ) : null }) })
   ] });
 }
-var styles2 = StyleSheet.create({
+var styles = StyleSheet.create({
   wrapper: {
     width: "100%",
     gap: SELECT_LABEL_GAP
@@ -1051,13 +865,13 @@ function CountryCodeSelector({
         accessibilityRole: "button",
         onPress: () => handleSelect(item.code),
         style: [
-          styles3.option,
-          isSelected && styles3.optionSelected,
-          !isLast && styles3.optionSpacing
+          styles2.option,
+          isSelected && styles2.optionSelected,
+          !isLast && styles2.optionSpacing
         ],
         children: [
-          /* @__PURE__ */ jsx(Text, { style: styles3.flag, children: countryCodeToFlagEmoji(item.code) }),
-          /* @__PURE__ */ jsx(Text, { style: styles3.optionDialCode, children: item.dialCode })
+          /* @__PURE__ */ jsx(Text, { style: styles2.flag, children: countryCodeToFlagEmoji(item.code) }),
+          /* @__PURE__ */ jsx(Text, { style: styles2.optionDialCode, children: item.dialCode })
         ]
       },
       item.code
@@ -1067,8 +881,8 @@ function CountryCodeSelector({
     ScrollView,
     {
       ref: scrollRef,
-      style: styles3.dropdownScroll,
-      contentContainerStyle: styles3.dropdownContent,
+      style: styles2.dropdownScroll,
+      contentContainerStyle: styles2.dropdownContent,
       keyboardShouldPersistTaps: "handled",
       showsVerticalScrollIndicator: true,
       bounces: false,
@@ -1076,7 +890,7 @@ function CountryCodeSelector({
       children: optionList
     }
   );
-  return /* @__PURE__ */ jsxs(View, { ref: wrapperRef, style: [styles3.root, style], children: [
+  return /* @__PURE__ */ jsxs(View, { ref: wrapperRef, style: [styles2.root, style], children: [
     /* @__PURE__ */ jsxs(
       Pressable,
       {
@@ -1085,13 +899,13 @@ function CountryCodeSelector({
         disabled,
         onPress: handleOpen,
         style: [
-          styles3.trigger,
-          disabled ? styles3.triggerDisabled : styles3.triggerEnabled,
-          Platform.OS === "web" ? styles3.triggerWeb : null
+          styles2.trigger,
+          disabled ? styles2.triggerDisabled : styles2.triggerEnabled,
+          Platform.OS === "web" ? styles2.triggerWeb : null
         ],
         children: [
-          /* @__PURE__ */ jsx(Text, { style: styles3.flag, children: countryCodeToFlagEmoji(selected.code) }),
-          /* @__PURE__ */ jsx(Text, { style: [styles3.dialCode, { color: textColor }], children: selected.dialCode }),
+          /* @__PURE__ */ jsx(Text, { style: styles2.flag, children: countryCodeToFlagEmoji(selected.code) }),
+          /* @__PURE__ */ jsx(Text, { style: [styles2.dialCode, { color: textColor }], children: selected.dialCode }),
           /* @__PURE__ */ jsx(ChevronDownIcon, { size: CHEVRON_SIZE, color: colors.stormGray100 })
         ]
       }
@@ -1103,11 +917,11 @@ function CountryCodeSelector({
         transparent: true,
         animationType: "fade",
         onRequestClose: closeDropdown,
-        children: /* @__PURE__ */ jsx(Pressable, { style: styles3.overlay, onPress: closeDropdown, children: anchor ? /* @__PURE__ */ jsx(
+        children: /* @__PURE__ */ jsx(Pressable, { style: styles2.overlay, onPress: closeDropdown, children: anchor ? /* @__PURE__ */ jsx(
           View,
           {
             style: [
-              styles3.dropdown,
+              styles2.dropdown,
               {
                 top: dropdownTop,
                 left: anchor.x,
@@ -1121,7 +935,7 @@ function CountryCodeSelector({
     )
   ] });
 }
-var styles3 = StyleSheet.create({
+var styles2 = StyleSheet.create({
   root: {
     alignSelf: "flex-start",
     flexShrink: 0
@@ -1242,26 +1056,26 @@ function PhoneInput({
     onBlur?.(event);
   }
   const helperMessage = error ?? hint;
-  return /* @__PURE__ */ jsxs(View, { ref: wrapperRef, style: [styles4.wrapper, containerStyle], children: [
+  return /* @__PURE__ */ jsxs(View, { ref: wrapperRef, style: [styles3.wrapper, containerStyle], children: [
     label ? /* @__PURE__ */ jsx(Label, { disabled: isDisabled, className: labelClassName, children: label }) : null,
-    /* @__PURE__ */ jsxs(View, { style: styles4.row, children: [
+    /* @__PURE__ */ jsxs(View, { style: styles3.row, children: [
       /* @__PURE__ */ jsx(
         CountryCodeSelector,
         {
           value: countryCode,
           onValueChange: onCountryCodeChange,
           disabled: isDisabled,
-          style: styles4.countrySelector
+          style: styles3.countrySelector
         }
       ),
-      /* @__PURE__ */ jsxs(View, { style: styles4.phoneColumn, children: [
-        /* @__PURE__ */ jsx(View, { style: [phoneFieldStyles.outline, styles4.phoneOutline], children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsxs(View, { style: styles3.phoneColumn, children: [
+        /* @__PURE__ */ jsx(View, { style: [phoneFieldStyles.outline, styles3.phoneOutline], children: /* @__PURE__ */ jsx(
           View,
           {
             style: [
               inputFieldMetrics.container,
               phoneFieldStyles.container,
-              styles4.phoneField
+              styles3.phoneField
             ],
             children: /* @__PURE__ */ jsx(
               TextInput,
@@ -1283,12 +1097,12 @@ function PhoneInput({
             )
           }
         ) }),
-        helperMessage ? /* @__PURE__ */ jsx(Text, { ref: helperRef, style: error ? styles4.error : styles4.hint, children: helperMessage }) : null
+        helperMessage ? /* @__PURE__ */ jsx(Text, { ref: helperRef, style: error ? styles3.error : styles3.hint, children: helperMessage }) : null
       ] })
     ] })
   ] });
 }
-var styles4 = StyleSheet.create({
+var styles3 = StyleSheet.create({
   wrapper: {
     width: "100%",
     gap: spacing.sm
@@ -1332,7 +1146,7 @@ function ChevronLeftIcon({
   color = "#151a1e",
   strokeWidth = 2
 }) {
-  return /* @__PURE__ */ jsx(Svg3, { width: size, height: size, viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Svg2, { width: size, height: size, viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsx(
     Path,
     {
       d: CHEVRON_LEFT_PATH,
@@ -1348,7 +1162,7 @@ function ChevronRightIcon({
   color = "#151a1e",
   strokeWidth = 2
 }) {
-  return /* @__PURE__ */ jsx(Svg3, { width: size, height: size, viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Svg2, { width: size, height: size, viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsx(
     Path,
     {
       d: CHEVRON_RIGHT_PATH,
@@ -2328,7 +2142,7 @@ function CalendarIcon({
   color = "#C7CDD1",
   strokeWidth = 2
 }) {
-  return /* @__PURE__ */ jsx(Svg3, { width: size, height: size, viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Svg2, { width: size, height: size, viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsx(
     Path,
     {
       d: CALENDAR_ICON_BODY_PATH,
@@ -2358,6 +2172,8 @@ function DatePicker(props) {
     containerStyle,
     className,
     fieldClassName,
+    fieldStyle,
+    fieldOutlineStyle,
     panelClassName,
     labelClassName,
     errorClassName,
@@ -2451,108 +2267,145 @@ function DatePicker(props) {
       closePicker();
     }
   }
-  return /* @__PURE__ */ jsxs(View, { ref: wrapperRef, style: [styles5.wrapper, containerStyle], children: [
-    label ? /* @__PURE__ */ jsx(Label, { disabled, style: styles5.label, className: labelClassName, children: label }) : null,
-    /* @__PURE__ */ jsx(View, { style: [fieldStyles.outline, styles5.fieldOutline], children: /* @__PURE__ */ jsxs(
-      Pressable,
-      {
-        ref: triggerRef,
-        accessibilityRole: "button",
-        accessibilityState: { disabled, expanded: open },
-        disabled,
-        onPress: openPicker,
-        style: [calendarFieldMetrics.container, fieldStyles.container],
-        children: [
+  const isFluidField = Boolean(fieldStyle) || Boolean(fieldOutlineStyle);
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      ref: wrapperRef,
+      style: [styles4.wrapper, isFluidField && styles4.wrapperFluid, containerStyle],
+      children: [
+        label ? /* @__PURE__ */ jsx(Label, { disabled, style: styles4.label, className: labelClassName, children: label }) : null,
+        /* @__PURE__ */ jsx(
+          View,
+          {
+            style: [
+              fieldStyles.outline,
+              styles4.fieldOutline,
+              isFluidField && styles4.fieldOutlineFluid,
+              fieldOutlineStyle
+            ],
+            children: /* @__PURE__ */ jsxs(
+              Pressable,
+              {
+                ref: triggerRef,
+                accessibilityRole: "button",
+                accessibilityState: { disabled, expanded: open },
+                disabled,
+                onPress: openPicker,
+                style: [
+                  calendarFieldMetrics.container,
+                  isFluidField && styles4.fieldContainerFluid,
+                  fieldStyles.container,
+                  fieldStyle
+                ],
+                children: [
+                  /* @__PURE__ */ jsx(
+                    Text,
+                    {
+                      style: [calendarFieldMetrics.value, valueTextStyle],
+                      numberOfLines: 1,
+                      children: displayValue
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(View, { style: styles4.iconSlot, children: /* @__PURE__ */ jsx(
+                    CalendarIcon,
+                    {
+                      size: CALENDAR_FIELD_ICON_SIZE,
+                      color: disabled ? colors.stormGray200 : colors.stormGray150
+                    }
+                  ) })
+                ]
+              }
+            )
+          }
+        ),
+        helperMessage ? /* @__PURE__ */ jsx(Text, { ref: helperRef, style: error ? styles4.error : styles4.hint, children: helperMessage }) : null,
+        /* @__PURE__ */ jsx(Modal, { visible: open, transparent: true, animationType: "fade", onRequestClose: closePicker, children: /* @__PURE__ */ jsxs(View, { style: styles4.modalRoot, children: [
           /* @__PURE__ */ jsx(
-            Text,
+            Pressable,
             {
-              style: [calendarFieldMetrics.value, valueTextStyle],
-              numberOfLines: 1,
-              children: displayValue
+              style: styles4.backdrop,
+              onPress: closePicker,
+              accessibilityRole: "button",
+              accessibilityLabel: labels?.closeCalendar ?? translations.closeCalendar
             }
           ),
-          /* @__PURE__ */ jsx(View, { style: styles5.iconSlot, children: /* @__PURE__ */ jsx(
-            CalendarIcon,
-            {
-              size: CALENDAR_FIELD_ICON_SIZE,
-              color: disabled ? colors.stormGray200 : colors.stormGray150
-            }
-          ) })
-        ]
-      }
-    ) }),
-    helperMessage ? /* @__PURE__ */ jsx(Text, { ref: helperRef, style: error ? styles5.error : styles5.hint, children: helperMessage }) : null,
-    /* @__PURE__ */ jsx(Modal, { visible: open, transparent: true, animationType: "fade", onRequestClose: closePicker, children: /* @__PURE__ */ jsxs(View, { style: styles5.modalRoot, children: [
-      /* @__PURE__ */ jsx(
-        Pressable,
-        {
-          style: styles5.backdrop,
-          onPress: closePicker,
-          accessibilityRole: "button",
-          accessibilityLabel: labels?.closeCalendar ?? translations.closeCalendar
-        }
-      ),
-      anchor ? /* @__PURE__ */ jsx(
-        View,
-        {
-          style: [
-            styles5.panelPosition,
-            {
-              top: dropdownTop,
-              left: panelLeft,
-              width: panelWidth,
-              height: CALENDAR_PANEL_HEIGHT
-            }
-          ],
-          children: props.mode === "range" ? /* @__PURE__ */ jsx(
-            Calendar,
-            {
-              mode: "range",
-              value: props.value,
-              onChange: handleRangeSelect,
-              viewDate,
-              defaultViewDate: resolvedDefaultViewDate,
-              onViewDateChange,
-              locale: resolvedLocale,
-              labels,
-              minDate,
-              maxDate,
-              today,
-              className: panelClassName
-            }
-          ) : /* @__PURE__ */ jsx(
-            Calendar,
+          anchor ? /* @__PURE__ */ jsx(
+            View,
             {
-              mode: "single",
-              value: props.value,
-              onChange: handleSingleSelect,
-              viewDate,
-              defaultViewDate: resolvedDefaultViewDate,
-              onViewDateChange,
-              locale: resolvedLocale,
-              labels,
-              minDate,
-              maxDate,
-              today,
-              className: panelClassName
+              style: [
+                styles4.panelPosition,
+                {
+                  top: dropdownTop,
+                  left: panelLeft,
+                  width: panelWidth,
+                  height: CALENDAR_PANEL_HEIGHT
+                }
+              ],
+              children: props.mode === "range" ? /* @__PURE__ */ jsx(
+                Calendar,
+                {
+                  mode: "range",
+                  value: props.value,
+                  onChange: handleRangeSelect,
+                  viewDate,
+                  defaultViewDate: resolvedDefaultViewDate,
+                  onViewDateChange,
+                  locale: resolvedLocale,
+                  labels,
+                  minDate,
+                  maxDate,
+                  today,
+                  className: panelClassName
+                }
+              ) : /* @__PURE__ */ jsx(
+                Calendar,
+                {
+                  mode: "single",
+                  value: props.value,
+                  onChange: handleSingleSelect,
+                  viewDate,
+                  defaultViewDate: resolvedDefaultViewDate,
+                  onViewDateChange,
+                  locale: resolvedLocale,
+                  labels,
+                  minDate,
+                  maxDate,
+                  today,
+                  className: panelClassName
+                }
+              )
             }
-          )
-        }
-      ) : null
-    ] }) })
-  ] });
+          ) : null
+        ] }) })
+      ]
+    }
+  );
 }
-var styles5 = StyleSheet.create({
+var styles4 = StyleSheet.create({
   wrapper: {
     width: CALENDAR_FIELD_WIDTH,
     maxWidth: "100%",
     gap: SELECT_LABEL_GAP
   },
+  wrapperFluid: {
+    width: "100%"
+  },
   fieldOutline: {
     width: CALENDAR_FIELD_WIDTH,
     maxWidth: "100%",
     alignSelf: "flex-start"
   },
+  fieldOutlineFluid: {
+    width: "100%",
+    alignSelf: "stretch"
+  },
+  fieldContainerFluid: {
+    width: "100%",
+    minWidth: 0,
+    maxWidth: "100%",
+    alignSelf: "stretch"
+  },
   label: {
     ...calendarLabelTypography
   },
@@ -2593,7 +2446,7 @@ function LockIcon({
   color = "#c7cdd1",
   strokeWidth = 2
 }) {
-  return /* @__PURE__ */ jsx(Svg3, { width: size, height: size, viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Svg2, { width: size, height: size, viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsx(
     Path,
     {
       d: LOCK_ICON_PATH,
@@ -2605,6 +2458,6 @@ function LockIcon({
   ) });
 }
 
-export { Button, Calendar, CalendarIcon, CalendarLocaleProvider, CountryCodeSelector, DatePicker, LockIcon, PhoneInput, Select, calendarTranslations, countries, defaultCountry, findCountry, formatLocalizedCalendarMonthYear, getCalendarMonthLabels, getCalendarTranslations, resolveCalendarLocale, resolveWeekdayLabels, useCalendarLocale };
+export { Calendar, CalendarIcon, CalendarLocaleProvider, CountryCodeSelector, DatePicker, LockIcon, PhoneInput, Select, calendarTranslations, countries, defaultCountry, findCountry, formatLocalizedCalendarMonthYear, getCalendarMonthLabels, getCalendarTranslations, resolveCalendarLocale, resolveWeekdayLabels, useCalendarLocale };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map