@scripso-homepad/ui 0.4.22 → 0.4.24

package/dist/index.d.cts

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
-import { GestureResponderEvent, StyleProp, ViewStyle, TextStyle, TextInputProps, TextProps } from 'react-native';
+import { GestureResponderEvent, StyleProp, ViewStyle, TextStyle, TextInputProps, ImageStyle, TextProps } from 'react-native';
 
 type ButtonVariant = "white" | "primary" | "green" | "gray";
 type ButtonSize = "lg" | "sm";
@@ -131,6 +131,21 @@ interface CountryCodeSelectorProps {
 }
 declare function CountryCodeSelector({ value, onValueChange, options, disabled, style, className, }: CountryCodeSelectorProps): react.JSX.Element;
 
+type CountryFlagProps = {
+    code: string;
+    style?: StyleProp<ImageStyle>;
+};
+/** Renders a country flag image (works on Windows; emoji flags do not). */
+declare function CountryFlag({ code, style }: CountryFlagProps): react.JSX.Element | null;
+
+/** ISO 3166-1 alpha-2 country code → flag emoji. Prefer CountryFlag images on Windows. */
+declare function countryCodeToFlagEmoji(code: string): string;
+/**
+ * PNG flag URL (flagcdn). Windows does not render regional-indicator flag emoji,
+ * so UI should use images instead of countryCodeToFlagEmoji.
+ */
+declare function getCountryFlagImageUri(code: string): string | null;
+
 type DateRange = {
     start: Date;
     end?: Date;
@@ -507,22 +522,22 @@ declare const shadows: {
         readonly shadowColor: "#082640";
         readonly shadowOffset: {
             readonly width: 0;
-            readonly height: 4;
+            readonly height: 1;
         };
-        readonly shadowOpacity: 0.05;
-        readonly shadowRadius: 20;
-        readonly elevation: 2;
+        readonly shadowOpacity: 0.06;
+        readonly shadowRadius: 4;
+        readonly elevation: 1;
     };
     readonly cardLg: {
         readonly shadowColor: "#082640";
         readonly shadowOffset: {
             readonly width: 0;
-            readonly height: 4;
+            readonly height: 2;
         };
-        readonly shadowOpacity: 0.1;
-        readonly shadowRadius: 20;
-        readonly elevation: 4;
+        readonly shadowOpacity: 0.08;
+        readonly shadowRadius: 6;
+        readonly elevation: 2;
     };
 };
 
-export { Button, type ButtonProps, type ButtonSize, type ButtonVariant, Calendar, CalendarIcon, type CalendarLabels, type CalendarLocale, CalendarLocaleProvider, type CalendarLocaleProviderProps, type CalendarProps, type CalendarRangeProps, type CalendarSingleProps, type CalendarTranslationKey$1 as CalendarTranslationKey, type CalendarTranslations, type Country, CountryCodeSelector, type CountryCodeSelectorProps, DatePicker, type DatePickerProps, type DatePickerRangeProps, type DatePickerSingleProps, type DateRange, type EmeraldGreenStep, Input, type InputProps, Label, type LabelProps, LockIcon, type MultipleSelectProps, type NavyStep, PhoneInput, type PhoneInputProps, type RubyRedStep, Select, type SelectOption, type SelectProps, type SingleSelectProps, type StormGrayStep, brand, buttonTypography, calendarTranslations, colors, countries, defaultCountry, emeraldGreen, findCountry, fontSize, fontWeight, fonts, formatLocalizedCalendarMonthYear, getCalendarMonthLabels, getCalendarTranslations, labelTypography, navy, radii, resolveCalendarLocale, resolveWeekdayLabels, rubyRed, shadows, spacing, stormGray, typographyScale, useCalendarLocale };
+export { Button, type ButtonProps, type ButtonSize, type ButtonVariant, Calendar, CalendarIcon, type CalendarLabels, type CalendarLocale, CalendarLocaleProvider, type CalendarLocaleProviderProps, type CalendarProps, type CalendarRangeProps, type CalendarSingleProps, type CalendarTranslationKey$1 as CalendarTranslationKey, type CalendarTranslations, type Country, CountryCodeSelector, type CountryCodeSelectorProps, CountryFlag, type CountryFlagProps, DatePicker, type DatePickerProps, type DatePickerRangeProps, type DatePickerSingleProps, type DateRange, type EmeraldGreenStep, Input, type InputProps, Label, type LabelProps, LockIcon, type MultipleSelectProps, type NavyStep, PhoneInput, type PhoneInputProps, type RubyRedStep, Select, type SelectOption, type SelectProps, type SingleSelectProps, type StormGrayStep, brand, buttonTypography, calendarTranslations, colors, countries, countryCodeToFlagEmoji, defaultCountry, emeraldGreen, findCountry, fontSize, fontWeight, fonts, formatLocalizedCalendarMonthYear, getCalendarMonthLabels, getCalendarTranslations, getCountryFlagImageUri, labelTypography, navy, radii, resolveCalendarLocale, resolveWeekdayLabels, rubyRed, shadows, spacing, stormGray, typographyScale, useCalendarLocale };

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
-import { GestureResponderEvent, StyleProp, ViewStyle, TextStyle, TextInputProps, TextProps } from 'react-native';
+import { GestureResponderEvent, StyleProp, ViewStyle, TextStyle, TextInputProps, ImageStyle, TextProps } from 'react-native';
 
 type ButtonVariant = "white" | "primary" | "green" | "gray";
 type ButtonSize = "lg" | "sm";
@@ -131,6 +131,21 @@ interface CountryCodeSelectorProps {
 }
 declare function CountryCodeSelector({ value, onValueChange, options, disabled, style, className, }: CountryCodeSelectorProps): react.JSX.Element;
 
+type CountryFlagProps = {
+    code: string;
+    style?: StyleProp<ImageStyle>;
+};
+/** Renders a country flag image (works on Windows; emoji flags do not). */
+declare function CountryFlag({ code, style }: CountryFlagProps): react.JSX.Element | null;
+
+/** ISO 3166-1 alpha-2 country code → flag emoji. Prefer CountryFlag images on Windows. */
+declare function countryCodeToFlagEmoji(code: string): string;
+/**
+ * PNG flag URL (flagcdn). Windows does not render regional-indicator flag emoji,
+ * so UI should use images instead of countryCodeToFlagEmoji.
+ */
+declare function getCountryFlagImageUri(code: string): string | null;
+
 type DateRange = {
     start: Date;
     end?: Date;
@@ -507,22 +522,22 @@ declare const shadows: {
         readonly shadowColor: "#082640";
         readonly shadowOffset: {
             readonly width: 0;
-            readonly height: 4;
+            readonly height: 1;
         };
-        readonly shadowOpacity: 0.05;
-        readonly shadowRadius: 20;
-        readonly elevation: 2;
+        readonly shadowOpacity: 0.06;
+        readonly shadowRadius: 4;
+        readonly elevation: 1;
     };
     readonly cardLg: {
         readonly shadowColor: "#082640";
         readonly shadowOffset: {
             readonly width: 0;
-            readonly height: 4;
+            readonly height: 2;
         };
-        readonly shadowOpacity: 0.1;
-        readonly shadowRadius: 20;
-        readonly elevation: 4;
+        readonly shadowOpacity: 0.08;
+        readonly shadowRadius: 6;
+        readonly elevation: 2;
     };
 };
 
-export { Button, type ButtonProps, type ButtonSize, type ButtonVariant, Calendar, CalendarIcon, type CalendarLabels, type CalendarLocale, CalendarLocaleProvider, type CalendarLocaleProviderProps, type CalendarProps, type CalendarRangeProps, type CalendarSingleProps, type CalendarTranslationKey$1 as CalendarTranslationKey, type CalendarTranslations, type Country, CountryCodeSelector, type CountryCodeSelectorProps, DatePicker, type DatePickerProps, type DatePickerRangeProps, type DatePickerSingleProps, type DateRange, type EmeraldGreenStep, Input, type InputProps, Label, type LabelProps, LockIcon, type MultipleSelectProps, type NavyStep, PhoneInput, type PhoneInputProps, type RubyRedStep, Select, type SelectOption, type SelectProps, type SingleSelectProps, type StormGrayStep, brand, buttonTypography, calendarTranslations, colors, countries, defaultCountry, emeraldGreen, findCountry, fontSize, fontWeight, fonts, formatLocalizedCalendarMonthYear, getCalendarMonthLabels, getCalendarTranslations, labelTypography, navy, radii, resolveCalendarLocale, resolveWeekdayLabels, rubyRed, shadows, spacing, stormGray, typographyScale, useCalendarLocale };
+export { Button, type ButtonProps, type ButtonSize, type ButtonVariant, Calendar, CalendarIcon, type CalendarLabels, type CalendarLocale, CalendarLocaleProvider, type CalendarLocaleProviderProps, type CalendarProps, type CalendarRangeProps, type CalendarSingleProps, type CalendarTranslationKey$1 as CalendarTranslationKey, type CalendarTranslations, type Country, CountryCodeSelector, type CountryCodeSelectorProps, CountryFlag, type CountryFlagProps, DatePicker, type DatePickerProps, type DatePickerRangeProps, type DatePickerSingleProps, type DateRange, type EmeraldGreenStep, Input, type InputProps, Label, type LabelProps, LockIcon, type MultipleSelectProps, type NavyStep, PhoneInput, type PhoneInputProps, type RubyRedStep, Select, type SelectOption, type SelectProps, type SingleSelectProps, type StormGrayStep, brand, buttonTypography, calendarTranslations, colors, countries, countryCodeToFlagEmoji, defaultCountry, emeraldGreen, findCountry, fontSize, fontWeight, fonts, formatLocalizedCalendarMonthYear, getCalendarMonthLabels, getCalendarTranslations, getCountryFlagImageUri, labelTypography, navy, radii, resolveCalendarLocale, resolveWeekdayLabels, rubyRed, shadows, spacing, stormGray, typographyScale, useCalendarLocale };

package/dist/index.js

@@ -1,7 +1,7 @@
-import { spacing, colors, fontWeight, fontSize, fonts, radii, INPUT_ICON_GAP, useApplyWebClassName, resolveInputVisualState, Label, getInputFieldStyles, inputFieldMetrics } from './chunk-KJYQA5OY.js';
-export { Button, Input, Label, brand, buttonTypography, colors, emeraldGreen, fontSize, fontWeight, fonts, labelTypography, navy, radii, rubyRed, shadows, spacing, stormGray, typographyScale } from './chunk-KJYQA5OY.js';
+import { spacing, colors, fontWeight, fontSize, fonts, radii, INPUT_HEIGHT, INPUT_OUTLINE_WIDTH, INPUT_ICON_GAP, useApplyWebClassName, resolveInputVisualState, Label, getInputFieldStyles, inputFieldMetrics } from './chunk-JNVYKEYT.js';
+export { Button, Input, Label, brand, buttonTypography, colors, emeraldGreen, fontSize, fontWeight, fonts, labelTypography, navy, radii, rubyRed, shadows, spacing, stormGray, typographyScale } from './chunk-JNVYKEYT.js';
 import { createContext, useRef, useState, useMemo, useEffect, useLayoutEffect, useContext, isValidElement, cloneElement } from 'react';
-import { Platform, StyleSheet, Animated, Easing, View, Pressable, Text, Modal, ScrollView, TextInput, Dimensions } from 'react-native';
+import { Platform, StyleSheet, Animated, Easing, View, Pressable, Text, Modal, ScrollView, Image, TextInput, Dimensions } from 'react-native';
 import Svg2, { Path } from 'react-native-svg';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
@@ -65,11 +65,11 @@ var selectValueTypography = {
   letterSpacing: 0,
   textAlign: "left"
 };
-var INPUT_OUTLINE_WIDTH = 2;
+var INPUT_OUTLINE_WIDTH2 = 2;
 function createOutlineStyle(ringColor) {
   return {
-    borderRadius: radii.lg + INPUT_OUTLINE_WIDTH,
-    borderWidth: INPUT_OUTLINE_WIDTH,
+    borderRadius: radii.lg + INPUT_OUTLINE_WIDTH2,
+    borderWidth: INPUT_OUTLINE_WIDTH2,
     borderColor: ringColor,
     padding: 0,
     backgroundColor: colors.transparent,
@@ -79,8 +79,8 @@ function createOutlineStyle(ringColor) {
   };
 }
 var defaultOutline = {
-  borderRadius: radii.lg + INPUT_OUTLINE_WIDTH,
-  borderWidth: INPUT_OUTLINE_WIDTH,
+  borderRadius: radii.lg + INPUT_OUTLINE_WIDTH2,
+  borderWidth: INPUT_OUTLINE_WIDTH2,
   borderColor: colors.transparent,
   padding: 0,
   backgroundColor: colors.transparent,
@@ -886,12 +886,41 @@ function countryCodeToFlagEmoji(code) {
     ...upper.split("").map((char) => 127462 - 65 + char.charCodeAt(0))
   );
 }
+function getCountryFlagImageUri(code) {
+  const lower = code.trim().toLowerCase();
+  if (!/^[a-z]{2}$/.test(lower)) return null;
+  return `https://flagcdn.com/w40/${lower}.png`;
+}
+var FLAG_HEIGHT = 18;
+var FLAG_WIDTH = 24;
+function CountryFlag({ code, style }) {
+  const uri = getCountryFlagImageUri(code);
+  if (uri === null) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    Image,
+    {
+      source: { uri },
+      style: [styles2.flag, style],
+      accessibilityIgnoresInvertColors: true,
+      accessibilityLabel: `${code.trim().toUpperCase()} flag`
+    }
+  );
+}
+var styles2 = StyleSheet.create({
+  flag: {
+    width: FLAG_WIDTH,
+    height: FLAG_HEIGHT,
+    borderRadius: 2
+  }
+});
 var DROPDOWN_GAP = 10;
 var DROPDOWN_HEIGHT = 186;
 var DROPDOWN_PADDING = 8;
 var OPTION_GAP = 10;
 var OPTION_HEIGHT = 35;
-var TRIGGER_HEIGHT = 52;
+var TRIGGER_HEIGHT = INPUT_HEIGHT;
 var CHEVRON_SIZE = 16;
 function resolveDropdownTop(anchor) {
   const windowHeight = Dimensions.get("window").height;
@@ -951,13 +980,13 @@ function CountryCodeSelector({
         accessibilityRole: "button",
         onPress: () => handleSelect(item.code),
         style: [
-          styles2.option,
-          isSelected && styles2.optionSelected,
-          !isLast && styles2.optionSpacing
+          styles3.option,
+          isSelected && styles3.optionSelected,
+          !isLast && styles3.optionSpacing
         ],
         children: [
-          /* @__PURE__ */ jsx(Text, { style: styles2.flag, children: countryCodeToFlagEmoji(item.code) }),
-          /* @__PURE__ */ jsx(Text, { style: styles2.optionDialCode, children: item.dialCode })
+          /* @__PURE__ */ jsx(CountryFlag, { code: item.code }),
+          /* @__PURE__ */ jsx(Text, { style: styles3.optionDialCode, children: item.dialCode })
         ]
       },
       item.code
@@ -967,8 +996,8 @@ function CountryCodeSelector({
     ScrollView,
     {
       ref: scrollRef,
-      style: styles2.dropdownScroll,
-      contentContainerStyle: styles2.dropdownContent,
+      style: styles3.dropdownScroll,
+      contentContainerStyle: styles3.dropdownContent,
       keyboardShouldPersistTaps: "handled",
       showsVerticalScrollIndicator: true,
       bounces: false,
@@ -976,7 +1005,7 @@ function CountryCodeSelector({
       children: optionList
     }
   );
-  return /* @__PURE__ */ jsxs(View, { ref: wrapperRef, style: [styles2.root, style], children: [
+  return /* @__PURE__ */ jsxs(View, { ref: wrapperRef, style: [styles3.root, style], children: [
     /* @__PURE__ */ jsxs(
       Pressable,
       {
@@ -985,13 +1014,13 @@ function CountryCodeSelector({
         disabled,
         onPress: handleOpen,
         style: [
-          styles2.trigger,
-          disabled ? styles2.triggerDisabled : styles2.triggerEnabled,
-          Platform.OS === "web" ? styles2.triggerWeb : null
+          styles3.trigger,
+          disabled ? styles3.triggerDisabled : styles3.triggerEnabled,
+          Platform.OS === "web" ? styles3.triggerWeb : null
         ],
         children: [
-          /* @__PURE__ */ jsx(Text, { style: styles2.flag, children: countryCodeToFlagEmoji(selected.code) }),
-          /* @__PURE__ */ jsx(Text, { style: [styles2.dialCode, { color: textColor }], children: selected.dialCode }),
+          /* @__PURE__ */ jsx(CountryFlag, { code: selected.code }),
+          /* @__PURE__ */ jsx(Text, { style: [styles3.dialCode, { color: textColor }], children: selected.dialCode }),
           /* @__PURE__ */ jsx(ChevronDownIcon, { size: CHEVRON_SIZE, color: colors.stormGray100 })
         ]
       }
@@ -1003,11 +1032,11 @@ function CountryCodeSelector({
         transparent: true,
         animationType: "fade",
         onRequestClose: closeDropdown,
-        children: /* @__PURE__ */ jsx(Pressable, { style: styles2.overlay, onPress: closeDropdown, children: anchor ? /* @__PURE__ */ jsx(
+        children: /* @__PURE__ */ jsx(Pressable, { style: styles3.overlay, onPress: closeDropdown, children: anchor ? /* @__PURE__ */ jsx(
           View,
           {
             style: [
-              styles2.dropdown,
+              styles3.dropdown,
               {
                 top: dropdownTop,
                 left: anchor.x,
@@ -1021,7 +1050,7 @@ function CountryCodeSelector({
     )
   ] });
 }
-var styles2 = StyleSheet.create({
+var styles3 = StyleSheet.create({
   root: {
     alignSelf: "flex-start",
     flexShrink: 0
@@ -1049,10 +1078,6 @@ var styles2 = StyleSheet.create({
   triggerWeb: {
     width: "max-content"
   },
-  flag: {
-    fontSize: 18,
-    lineHeight: 24
-  },
   dialCode: {
     fontSize: fontSize.md,
     fontWeight: fontWeight.medium,
@@ -1102,6 +1127,13 @@ var styles2 = StyleSheet.create({
     color: colors.slateBlue
   }
 });
+var countryOutlineSlot = {
+  borderRadius: radii.lg + INPUT_OUTLINE_WIDTH,
+  borderWidth: INPUT_OUTLINE_WIDTH,
+  borderColor: colors.transparent,
+  padding: 0,
+  backgroundColor: colors.transparent
+};
 function sanitizePhoneDigits(value) {
   return value.replace(/\D/g, "");
 }
@@ -1151,7 +1183,7 @@ function PhoneInput({
     onChangeText?.(sanitizePhoneDigits(value));
   }
   const helperMessage = error ?? hint;
-  return /* @__PURE__ */ jsxs(View, { ref: wrapperRef, style: [styles3.wrapper, containerStyle], children: [
+  return /* @__PURE__ */ jsxs(View, { ref: wrapperRef, style: [styles4.wrapper, containerStyle], children: [
     label ? /* @__PURE__ */ jsx(
       Label,
       {
@@ -1161,24 +1193,24 @@ function PhoneInput({
         children: label
       }
     ) : null,
-    /* @__PURE__ */ jsxs(View, { style: styles3.row, children: [
-      /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsxs(View, { style: styles4.row, children: [
+      /* @__PURE__ */ jsx(View, { style: [countryOutlineSlot, styles4.countryOutline], children: /* @__PURE__ */ jsx(
         CountryCodeSelector,
         {
           value: countryCode,
           onValueChange: onCountryCodeChange,
           disabled: isDisabled,
-          style: styles3.countrySelector
+          style: styles4.countrySelector
         }
-      ),
-      /* @__PURE__ */ jsx(View, { style: [phoneFieldStyles.outline, styles3.phoneOutline], children: /* @__PURE__ */ jsx(
+      ) }),
+      /* @__PURE__ */ jsx(View, { style: [phoneFieldStyles.outline, styles4.phoneOutline], children: /* @__PURE__ */ jsx(
         View,
         {
           style: [
             inputFieldMetrics.containerBase,
             inputFieldMetrics.container,
             phoneFieldStyles.container,
-            styles3.phoneField
+            styles4.phoneField
           ],
           children: /* @__PURE__ */ jsx(
             TextInput,
@@ -1202,22 +1234,24 @@ function PhoneInput({
         }
       ) })
     ] }),
-    helperMessage ? /* @__PURE__ */ jsx(Text, { ref: helperRef, style: error ? styles3.error : styles3.hint, children: helperMessage }) : null
+    helperMessage ? /* @__PURE__ */ jsx(Text, { ref: helperRef, style: error ? styles4.error : styles4.hint, children: helperMessage }) : null
   ] });
 }
-var styles3 = StyleSheet.create({
+var styles4 = StyleSheet.create({
   wrapper: {
     width: "100%",
     gap: spacing.sm
   },
   row: {
     flexDirection: "row",
-    alignItems: "flex-start",
+    alignItems: "center",
     gap: INPUT_ICON_GAP
   },
+  countryOutline: {
+    flexShrink: 0
+  },
   countrySelector: {
-    flexShrink: 0,
-    alignSelf: "flex-start"
+    flexShrink: 0
   },
   phoneOutline: {
     flex: 1
@@ -2383,16 +2417,16 @@ function DatePicker(props) {
     View,
     {
       ref: wrapperRef,
-      style: [styles4.wrapper, isFluidField && styles4.wrapperFluid, containerStyle],
+      style: [styles5.wrapper, isFluidField && styles5.wrapperFluid, containerStyle],
       children: [
-        label ? /* @__PURE__ */ jsx(Label, { disabled, style: styles4.label, className: labelClassName, children: label }) : null,
+        label ? /* @__PURE__ */ jsx(Label, { disabled, style: styles5.label, className: labelClassName, children: label }) : null,
         /* @__PURE__ */ jsx(
           View,
           {
             style: [
               fieldStyles.outline,
-              styles4.fieldOutline,
-              isFluidField && styles4.fieldOutlineFluid,
+              styles5.fieldOutline,
+              isFluidField && styles5.fieldOutlineFluid,
               fieldOutlineStyle
             ],
             children: /* @__PURE__ */ jsxs(
@@ -2405,7 +2439,7 @@ function DatePicker(props) {
                 onPress: openPicker,
                 style: [
                   calendarFieldMetrics.container,
-                  isFluidField && styles4.fieldContainerFluid,
+                  isFluidField && styles5.fieldContainerFluid,
                   fieldStyles.container,
                   fieldStyle
                 ],
@@ -2418,7 +2452,7 @@ function DatePicker(props) {
                       children: displayValue
                     }
                   ),
-                  /* @__PURE__ */ jsx(View, { style: styles4.iconSlot, children: /* @__PURE__ */ jsx(
+                  /* @__PURE__ */ jsx(View, { style: styles5.iconSlot, children: /* @__PURE__ */ jsx(
                     CalendarIcon,
                     {
                       size: CALENDAR_FIELD_ICON_SIZE,
@@ -2430,12 +2464,12 @@ function DatePicker(props) {
             )
           }
         ),
-        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: [
+        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: styles4.backdrop,
+              style: styles5.backdrop,
               onPress: closePicker,
               accessibilityRole: "button",
               accessibilityLabel: labels?.closeCalendar ?? translations.closeCalendar
@@ -2445,7 +2479,7 @@ function DatePicker(props) {
             View,
             {
               style: [
-                styles4.panelPosition,
+                styles5.panelPosition,
                 {
                   top: dropdownTop,
                   left: panelLeft,
@@ -2493,7 +2527,7 @@ function DatePicker(props) {
     }
   );
 }
-var styles4 = StyleSheet.create({
+var styles5 = StyleSheet.create({
   wrapper: {
     width: CALENDAR_FIELD_WIDTH,
     maxWidth: "100%",
@@ -2569,6 +2603,6 @@ function LockIcon({
   ) });
 }
 
-export { Calendar, CalendarIcon, CalendarLocaleProvider, CountryCodeSelector, DatePicker, LockIcon, PhoneInput, Select, calendarTranslations, countries, defaultCountry, findCountry, formatLocalizedCalendarMonthYear, getCalendarMonthLabels, getCalendarTranslations, resolveCalendarLocale, resolveWeekdayLabels, useCalendarLocale };
+export { Calendar, CalendarIcon, CalendarLocaleProvider, CountryCodeSelector, CountryFlag, DatePicker, LockIcon, PhoneInput, Select, calendarTranslations, countries, countryCodeToFlagEmoji, defaultCountry, findCountry, formatLocalizedCalendarMonthYear, getCalendarMonthLabels, getCalendarTranslations, getCountryFlagImageUri, resolveCalendarLocale, resolveWeekdayLabels, useCalendarLocale };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map