@ecohouse/ui 0.1.11 → 0.1.13

package/dist/index.d.cts

@@ -156,6 +156,11 @@ declare function LogOutIcon({ size, color, strokeWidth }: IconProps): react.JSX.
 
 declare function MailIcon({ size, color, strokeWidth }: IconProps): react.JSX.Element;
 
+interface MenuIconProps extends IconProps {
+    open?: boolean;
+}
+declare function MenuIcon({ size, color, strokeWidth, open, }: MenuIconProps): react.JSX.Element;
+
 declare function MinusIcon({ size, color, strokeWidth }: IconProps): react.JSX.Element;
 
 declare function NavigateIcon({ size, color, strokeWidth }: IconProps): react.JSX.Element;
@@ -236,6 +241,7 @@ declare const icons: {
     readonly linkedin: typeof LinkedInIcon;
     readonly logOut: typeof LogOutIcon;
     readonly mail: typeof MailIcon;
+    readonly menu: typeof MenuIcon;
     readonly minus: typeof MinusIcon;
     readonly navigate: typeof NavigateIcon;
     readonly phone: typeof PhoneIcon;
@@ -253,7 +259,7 @@ declare const icons: {
 type IconName = keyof typeof icons;
 declare const iconNames: IconName[];
 declare const iconGroups: {
-    readonly navigation: readonly ["arrowRight", "chevronDown", "chevronLeft", "home", "navigate"];
+    readonly navigation: readonly ["arrowRight", "chevronDown", "chevronLeft", "home", "menu", "navigate"];
     readonly actions: readonly ["show", "bell", "camera", "key", "check", "checkBadge", "search", "calendar", "calendarOutline", "heart", "star", "starFilled", "minus", "plus"];
     readonly objects: readonly ["bag", "building", "clock", "user", "usersAlt", "video"];
     readonly communication: readonly ["mail", "phone"];
@@ -412,6 +418,8 @@ type DatePickerBaseProps = Omit<ViewProps, "style" | "children"> & {
     formatValue?: (date: Date) => string;
     /** First day of the week column (0 = Sunday, 1 = Monday). Defaults to Monday. */
     weekStartsOn?: 0 | 1;
+    /** Styles the calendar popup independently from the trigger width. */
+    calendarStyle?: StyleProp<ViewStyle>;
     style?: StyleProp<ViewStyle>;
     className?: string;
 };
@@ -430,7 +438,10 @@ type DatePickerRangeProps = DatePickerBaseProps & {
 type DatePickerProps = DatePickerSingleProps | DatePickerRangeProps;
 declare const DatePicker: react.ForwardRefExoticComponent<DatePickerProps & react.RefAttributes<View>>;
 
+type StatefulIcon = ReactNode | IconComponent;
+
 type InputSize = "lg" | "sm";
+type InputIcon = StatefulIcon;
 interface InputProps extends Omit<TextInputProps, "style" | "editable"> {
     label?: string;
     showLabel?: boolean;
@@ -441,9 +452,9 @@ interface InputProps extends Omit<TextInputProps, "style" | "editable"> {
     error?: boolean;
     /** External — non-interactive. */
     disabled?: boolean;
-    leftIcon?: ReactNode;
+    leftIcon?: InputIcon;
     showLeftIcon?: boolean;
-    rightIcon?: ReactNode;
+    rightIcon?: InputIcon;
     showRightIcon?: boolean;
     onRightIconPress?: () => void;
     /** Accessible name for the right icon button, when `onRightIconPress` is set. */
@@ -460,6 +471,7 @@ type SelectOption = {
     label: string;
     value: string;
 };
+type SelectIcon = StatefulIcon;
 type SelectBaseProps = Omit<ViewProps, "style" | "children"> & {
     label?: string;
     showLabel?: boolean;
@@ -472,7 +484,7 @@ type SelectBaseProps = Omit<ViewProps, "style" | "children"> & {
     onOpenChange?: (open: boolean) => void;
     disabled?: boolean;
     error?: boolean;
-    leftIcon?: ReactNode;
+    leftIcon?: SelectIcon;
     showLeftIcon?: boolean;
     showSearch?: boolean;
     searchPlaceholder?: string;
@@ -863,4 +875,4 @@ declare const textareaTypography: {
     };
 };
 
-export { ArrowRightIcon, Avatar, type AvatarMenuItem, type AvatarProps, BRAND_LOGO_COLORS, BRAND_LOGO_DEFAULT_HEIGHT, BRAND_LOGO_DEFAULT_WIDTH, Badge, type BadgeProps, type BadgeVariant, BagIcon, BellIcon, BrandLogo, type BrandLogoProps, type BrandLogoVariant, BuildingIcon, Button, type ButtonProps, type ButtonSize, type ButtonVariant, CalendarIcon, CalendarOutlineIcon, CameraIcon, CheckBadgeIcon, CheckIcon, Checkbox, type CheckboxProps, type CheckboxVariant, ChevronDownIcon, ChevronLeftIcon, ClockIcon, CommentCard, type CommentCardProps, Counter, type CounterProps, DatePicker, type DatePickerProps, type DatePickerRangeProps, type DatePickerSingleProps, type DateRange, FacebookIcon, GlobeIcon, type GreyStep, HeartIcon, HelpCircleIcon, HomeIcon, Icon, type IconByNameProps, type IconComponent, type IconGroup, type IconName, type IconProps, Input, type InputProps, type InputSize, InstagramIcon, KeyIcon, type LanguageOption, LanguageSwitcher, type LanguageSwitcherProps, LayoutGridIcon, LinkedInIcon, LogOutIcon, MailIcon, MenuItem, type MenuItemProps, MinusIcon, NavigateIcon, PhoneIcon, PlusIcon, RatingInput, type RatingInputProps, SearchIcon, SegmentedToggle, type SegmentedToggleOption, type SegmentedToggleProps, Select, type SelectMultipleProps, type SelectOption, type SelectProps, type SelectSingleProps, SettingsIcon, ShowIcon, SidebarIcon, StarFilledIcon, StarIcon, type StarIconProps, StatCard, type StatCardProps, Textarea, type TextareaProps, Toggle, type ToggleProps, UserIcon, UsersAltIcon, VideoIcon, avatarTypography, badgeTypography, buttonTypography, colors, commentCardTypography, counterTypography, datePickerTypography, defaultLanguageOptions, fonts, getIconsByGroup, grey, iconGroupNames, iconGroups, iconNames, icons, inputTypography, languageSwitcherTypography, ratingTypography, segmentedToggleTypography, selectTypography, statCardTypography, textareaTypography };
+export { ArrowRightIcon, Avatar, type AvatarMenuItem, type AvatarProps, BRAND_LOGO_COLORS, BRAND_LOGO_DEFAULT_HEIGHT, BRAND_LOGO_DEFAULT_WIDTH, Badge, type BadgeProps, type BadgeVariant, BagIcon, BellIcon, BrandLogo, type BrandLogoProps, type BrandLogoVariant, BuildingIcon, Button, type ButtonProps, type ButtonSize, type ButtonVariant, CalendarIcon, CalendarOutlineIcon, CameraIcon, CheckBadgeIcon, CheckIcon, Checkbox, type CheckboxProps, type CheckboxVariant, ChevronDownIcon, ChevronLeftIcon, ClockIcon, CommentCard, type CommentCardProps, Counter, type CounterProps, DatePicker, type DatePickerProps, type DatePickerRangeProps, type DatePickerSingleProps, type DateRange, FacebookIcon, GlobeIcon, type GreyStep, HeartIcon, HelpCircleIcon, HomeIcon, Icon, type IconByNameProps, type IconComponent, type IconGroup, type IconName, type IconProps, Input, type InputIcon, type InputProps, type InputSize, InstagramIcon, KeyIcon, type LanguageOption, LanguageSwitcher, type LanguageSwitcherProps, LayoutGridIcon, LinkedInIcon, LogOutIcon, MailIcon, MenuIcon, type MenuIconProps, MenuItem, type MenuItemProps, MinusIcon, NavigateIcon, PhoneIcon, PlusIcon, RatingInput, type RatingInputProps, SearchIcon, SegmentedToggle, type SegmentedToggleOption, type SegmentedToggleProps, Select, type SelectIcon, type SelectMultipleProps, type SelectOption, type SelectProps, type SelectSingleProps, SettingsIcon, ShowIcon, SidebarIcon, StarFilledIcon, StarIcon, type StarIconProps, StatCard, type StatCardProps, Textarea, type TextareaProps, Toggle, type ToggleProps, UserIcon, UsersAltIcon, VideoIcon, avatarTypography, badgeTypography, buttonTypography, colors, commentCardTypography, counterTypography, datePickerTypography, defaultLanguageOptions, fonts, getIconsByGroup, grey, iconGroupNames, iconGroups, iconNames, icons, inputTypography, languageSwitcherTypography, ratingTypography, segmentedToggleTypography, selectTypography, statCardTypography, textareaTypography };

package/dist/index.d.ts

@@ -156,6 +156,11 @@ declare function LogOutIcon({ size, color, strokeWidth }: IconProps): react.JSX.
 
 declare function MailIcon({ size, color, strokeWidth }: IconProps): react.JSX.Element;
 
+interface MenuIconProps extends IconProps {
+    open?: boolean;
+}
+declare function MenuIcon({ size, color, strokeWidth, open, }: MenuIconProps): react.JSX.Element;
+
 declare function MinusIcon({ size, color, strokeWidth }: IconProps): react.JSX.Element;
 
 declare function NavigateIcon({ size, color, strokeWidth }: IconProps): react.JSX.Element;
@@ -236,6 +241,7 @@ declare const icons: {
     readonly linkedin: typeof LinkedInIcon;
     readonly logOut: typeof LogOutIcon;
     readonly mail: typeof MailIcon;
+    readonly menu: typeof MenuIcon;
     readonly minus: typeof MinusIcon;
     readonly navigate: typeof NavigateIcon;
     readonly phone: typeof PhoneIcon;
@@ -253,7 +259,7 @@ declare const icons: {
 type IconName = keyof typeof icons;
 declare const iconNames: IconName[];
 declare const iconGroups: {
-    readonly navigation: readonly ["arrowRight", "chevronDown", "chevronLeft", "home", "navigate"];
+    readonly navigation: readonly ["arrowRight", "chevronDown", "chevronLeft", "home", "menu", "navigate"];
     readonly actions: readonly ["show", "bell", "camera", "key", "check", "checkBadge", "search", "calendar", "calendarOutline", "heart", "star", "starFilled", "minus", "plus"];
     readonly objects: readonly ["bag", "building", "clock", "user", "usersAlt", "video"];
     readonly communication: readonly ["mail", "phone"];
@@ -412,6 +418,8 @@ type DatePickerBaseProps = Omit<ViewProps, "style" | "children"> & {
     formatValue?: (date: Date) => string;
     /** First day of the week column (0 = Sunday, 1 = Monday). Defaults to Monday. */
     weekStartsOn?: 0 | 1;
+    /** Styles the calendar popup independently from the trigger width. */
+    calendarStyle?: StyleProp<ViewStyle>;
     style?: StyleProp<ViewStyle>;
     className?: string;
 };
@@ -430,7 +438,10 @@ type DatePickerRangeProps = DatePickerBaseProps & {
 type DatePickerProps = DatePickerSingleProps | DatePickerRangeProps;
 declare const DatePicker: react.ForwardRefExoticComponent<DatePickerProps & react.RefAttributes<View>>;
 
+type StatefulIcon = ReactNode | IconComponent;
+
 type InputSize = "lg" | "sm";
+type InputIcon = StatefulIcon;
 interface InputProps extends Omit<TextInputProps, "style" | "editable"> {
     label?: string;
     showLabel?: boolean;
@@ -441,9 +452,9 @@ interface InputProps extends Omit<TextInputProps, "style" | "editable"> {
     error?: boolean;
     /** External — non-interactive. */
     disabled?: boolean;
-    leftIcon?: ReactNode;
+    leftIcon?: InputIcon;
     showLeftIcon?: boolean;
-    rightIcon?: ReactNode;
+    rightIcon?: InputIcon;
     showRightIcon?: boolean;
     onRightIconPress?: () => void;
     /** Accessible name for the right icon button, when `onRightIconPress` is set. */
@@ -460,6 +471,7 @@ type SelectOption = {
     label: string;
     value: string;
 };
+type SelectIcon = StatefulIcon;
 type SelectBaseProps = Omit<ViewProps, "style" | "children"> & {
     label?: string;
     showLabel?: boolean;
@@ -472,7 +484,7 @@ type SelectBaseProps = Omit<ViewProps, "style" | "children"> & {
     onOpenChange?: (open: boolean) => void;
     disabled?: boolean;
     error?: boolean;
-    leftIcon?: ReactNode;
+    leftIcon?: SelectIcon;
     showLeftIcon?: boolean;
     showSearch?: boolean;
     searchPlaceholder?: string;
@@ -863,4 +875,4 @@ declare const textareaTypography: {
     };
 };
 
-export { ArrowRightIcon, Avatar, type AvatarMenuItem, type AvatarProps, BRAND_LOGO_COLORS, BRAND_LOGO_DEFAULT_HEIGHT, BRAND_LOGO_DEFAULT_WIDTH, Badge, type BadgeProps, type BadgeVariant, BagIcon, BellIcon, BrandLogo, type BrandLogoProps, type BrandLogoVariant, BuildingIcon, Button, type ButtonProps, type ButtonSize, type ButtonVariant, CalendarIcon, CalendarOutlineIcon, CameraIcon, CheckBadgeIcon, CheckIcon, Checkbox, type CheckboxProps, type CheckboxVariant, ChevronDownIcon, ChevronLeftIcon, ClockIcon, CommentCard, type CommentCardProps, Counter, type CounterProps, DatePicker, type DatePickerProps, type DatePickerRangeProps, type DatePickerSingleProps, type DateRange, FacebookIcon, GlobeIcon, type GreyStep, HeartIcon, HelpCircleIcon, HomeIcon, Icon, type IconByNameProps, type IconComponent, type IconGroup, type IconName, type IconProps, Input, type InputProps, type InputSize, InstagramIcon, KeyIcon, type LanguageOption, LanguageSwitcher, type LanguageSwitcherProps, LayoutGridIcon, LinkedInIcon, LogOutIcon, MailIcon, MenuItem, type MenuItemProps, MinusIcon, NavigateIcon, PhoneIcon, PlusIcon, RatingInput, type RatingInputProps, SearchIcon, SegmentedToggle, type SegmentedToggleOption, type SegmentedToggleProps, Select, type SelectMultipleProps, type SelectOption, type SelectProps, type SelectSingleProps, SettingsIcon, ShowIcon, SidebarIcon, StarFilledIcon, StarIcon, type StarIconProps, StatCard, type StatCardProps, Textarea, type TextareaProps, Toggle, type ToggleProps, UserIcon, UsersAltIcon, VideoIcon, avatarTypography, badgeTypography, buttonTypography, colors, commentCardTypography, counterTypography, datePickerTypography, defaultLanguageOptions, fonts, getIconsByGroup, grey, iconGroupNames, iconGroups, iconNames, icons, inputTypography, languageSwitcherTypography, ratingTypography, segmentedToggleTypography, selectTypography, statCardTypography, textareaTypography };
+export { ArrowRightIcon, Avatar, type AvatarMenuItem, type AvatarProps, BRAND_LOGO_COLORS, BRAND_LOGO_DEFAULT_HEIGHT, BRAND_LOGO_DEFAULT_WIDTH, Badge, type BadgeProps, type BadgeVariant, BagIcon, BellIcon, BrandLogo, type BrandLogoProps, type BrandLogoVariant, BuildingIcon, Button, type ButtonProps, type ButtonSize, type ButtonVariant, CalendarIcon, CalendarOutlineIcon, CameraIcon, CheckBadgeIcon, CheckIcon, Checkbox, type CheckboxProps, type CheckboxVariant, ChevronDownIcon, ChevronLeftIcon, ClockIcon, CommentCard, type CommentCardProps, Counter, type CounterProps, DatePicker, type DatePickerProps, type DatePickerRangeProps, type DatePickerSingleProps, type DateRange, FacebookIcon, GlobeIcon, type GreyStep, HeartIcon, HelpCircleIcon, HomeIcon, Icon, type IconByNameProps, type IconComponent, type IconGroup, type IconName, type IconProps, Input, type InputIcon, type InputProps, type InputSize, InstagramIcon, KeyIcon, type LanguageOption, LanguageSwitcher, type LanguageSwitcherProps, LayoutGridIcon, LinkedInIcon, LogOutIcon, MailIcon, MenuIcon, type MenuIconProps, MenuItem, type MenuItemProps, MinusIcon, NavigateIcon, PhoneIcon, PlusIcon, RatingInput, type RatingInputProps, SearchIcon, SegmentedToggle, type SegmentedToggleOption, type SegmentedToggleProps, Select, type SelectIcon, type SelectMultipleProps, type SelectOption, type SelectProps, type SelectSingleProps, SettingsIcon, ShowIcon, SidebarIcon, StarFilledIcon, StarIcon, type StarIconProps, StatCard, type StatCardProps, Textarea, type TextareaProps, Toggle, type ToggleProps, UserIcon, UsersAltIcon, VideoIcon, avatarTypography, badgeTypography, buttonTypography, colors, commentCardTypography, counterTypography, datePickerTypography, defaultLanguageOptions, fonts, getIconsByGroup, grey, iconGroupNames, iconGroups, iconNames, icons, inputTypography, languageSwitcherTypography, ratingTypography, segmentedToggleTypography, selectTypography, statCardTypography, textareaTypography };

package/dist/index.js

@@ -1,4 +1,4 @@
-import { forwardRef, useRef, useMemo, useState, useCallback, useEffect, useLayoutEffect } from 'react';
+import { forwardRef, useRef, useMemo, useState, useCallback, useEffect, useLayoutEffect, isValidElement, cloneElement } from 'react';
 import { Pressable, View, Text, StyleSheet, Platform, Image, Animated, Easing, TouchableOpacity, TextInput, ScrollView } from 'react-native';
 import Svg, { Path } from 'react-native-svg';
 import { jsxs, jsx } from 'react/jsx-runtime';
@@ -615,6 +615,28 @@ function MailIcon({ size = 20, color = colors.primary, strokeWidth = 2 }) {
   ) });
 }
 
+// src/icons/Menu/menuPath.ts
+var MENU_PATH = "M8 12.6667H17.3333M1 6.83332H17.3333M8 0.999985H17.3333";
+var MENU_CLOSE_PATH = "M15 1L1 15M1 1L15 15";
+function MenuIcon({
+  size = 19,
+  color = colors.white,
+  strokeWidth = 2,
+  open = false
+}) {
+  return /* @__PURE__ */ jsx(Svg, { width: size, height: size, viewBox: "0 0 19 19", fill: "none", children: /* @__PURE__ */ jsx(
+    Path,
+    {
+      d: open ? MENU_CLOSE_PATH : MENU_PATH,
+      stroke: color,
+      strokeWidth,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      transform: open ? "translate(1.5 1.5)" : "translate(0 2.5)"
+    }
+  ) });
+}
+
 // src/icons/Minus/minusPath.ts
 var MINUS_PATH = "M3.33337 8H12.6667";
 function MinusIcon({ size = 16, color = colors.white, strokeWidth = 2 }) {
@@ -871,6 +893,7 @@ var icons = {
   linkedin: LinkedInIcon,
   logOut: LogOutIcon,
   mail: MailIcon,
+  menu: MenuIcon,
   minus: MinusIcon,
   navigate: NavigateIcon,
   phone: PhoneIcon,
@@ -887,7 +910,7 @@ var icons = {
 };
 var iconNames = Object.keys(icons);
 var iconGroups = {
-  navigation: ["arrowRight", "chevronDown", "chevronLeft", "home", "navigate"],
+  navigation: ["arrowRight", "chevronDown", "chevronLeft", "home", "menu", "navigate"],
   actions: [
     "show",
     "bell",
@@ -2036,6 +2059,7 @@ var Button = forwardRef(
         paddingRight: hasIcon ? metrics.paddingRightWithIcon : metrics.paddingRight,
         gap: hasIcon ? metrics.gap : 0
       },
+      hasIcon ? styles8.contentWithIcon : styles8.contentWithoutIcon,
       disabled && styles8.disabled,
       style
     ];
@@ -2091,6 +2115,12 @@ var styles8 = StyleSheet.create({
   disabled: {
     opacity: 0.6
   },
+  contentWithIcon: {
+    justifyContent: "space-between"
+  },
+  contentWithoutIcon: {
+    justifyContent: "center"
+  },
   label: {},
   labelAndroid: {
     includeFontPadding: false
@@ -2297,6 +2327,7 @@ var DatePicker = forwardRef(
       weekdayLabels = DEFAULT_WEEKDAY_LABELS,
       formatValue = formatDate,
       weekStartsOn = 1,
+      calendarStyle,
       style,
       className,
       accessibilityLabel,
@@ -2451,7 +2482,7 @@ var DatePicker = forwardRef(
               ]
             }
           ),
-          isOpen ? /* @__PURE__ */ jsxs(View, { style: styles10.menu, children: [
+          isOpen ? /* @__PURE__ */ jsxs(View, { style: [styles10.menu, calendarStyle], children: [
             /* @__PURE__ */ jsxs(View, { style: styles10.calendarHeader, children: [
               /* @__PURE__ */ jsx(
                 Pressable,
@@ -2631,7 +2662,7 @@ var styles10 = StyleSheet.create({
     position: "absolute",
     top: "100%",
     left: 0,
-    right: 0,
+    width: DEFAULT_WIDTH,
     marginTop: 8,
     zIndex: 10,
     borderRadius: MENU_RADIUS2,
@@ -2721,6 +2752,19 @@ var styles10 = StyleSheet.create({
     backgroundColor: colors.primary
   }
 });
+function renderStatefulIcon(icon, FallbackIcon, props) {
+  if (icon == null) {
+    return /* @__PURE__ */ jsx(FallbackIcon, { ...props });
+  }
+  if (typeof icon === "function") {
+    const Icon2 = icon;
+    return /* @__PURE__ */ jsx(Icon2, { ...props });
+  }
+  if (isValidElement(icon)) {
+    return cloneElement(icon, props);
+  }
+  return icon;
+}
 var DEFAULT_WIDTH2 = 308;
 var sizeConfig2 = {
   lg: {
@@ -2800,11 +2844,11 @@ function chromeFor(state) {
   }
 }
 var Input = forwardRef(function Input2({
-  label = "Label",
+  label,
   showLabel = true,
-  hint = "Hint",
+  hint,
   showHint = true,
-  placeholder = "placeholder",
+  placeholder,
   size = "lg",
   disabled = false,
   error = false,
@@ -2841,8 +2885,14 @@ var Input = forwardRef(function Input2({
   const resolvedAccessibilityLabel = accessibilityLabel ?? (showLabel ? void 0 : label);
   const hasLeftIcon = showLeftIcon || leftIcon != null;
   const hasRightIcon = showRightIcon || rightIcon != null;
-  const leftIconNode = leftIcon ?? /* @__PURE__ */ jsx(UserIcon, { size: metrics.iconSize, color: chrome.leftIconColor });
-  const rightIconNode = rightIcon ?? /* @__PURE__ */ jsx(ShowIcon, { size: metrics.iconSize, color: chrome.rightIconColor });
+  const leftIconNode = renderStatefulIcon(leftIcon, UserIcon, {
+    size: metrics.iconSize,
+    color: chrome.leftIconColor
+  });
+  const rightIconNode = renderStatefulIcon(rightIcon, ShowIcon, {
+    size: metrics.iconSize,
+    color: chrome.rightIconColor
+  });
   useApplyWebClassName(rootRef, className);
   useApplyWebClassName(inputRef, inputClassName);
   return /* @__PURE__ */ jsxs(View, { ref: rootRef, style: [styles11.root, disabled && styles11.disabled, style], children: [
@@ -3076,11 +3126,11 @@ function MultiValueChips({ options, disabled, onRemove }) {
 var Select = forwardRef(
   function Select2(props, forwardedRef) {
     const {
-      label = "Label",
+      label,
       showLabel = true,
       hint,
-      showHint = false,
-      placeholder = "placeholder",
+      showHint = true,
+      placeholder,
       options,
       open: openProp,
       defaultOpen = false,
@@ -3277,13 +3327,10 @@ var Select = forwardRef(
       handleSelect,
       setOpen
     ]);
-    const leftIconNode = leftIcon ?? /* @__PURE__ */ jsx(
-      UserIcon,
-      {
-        size: ICON_SIZE7,
-        color: error ? colors.red : isOpen ? colors.primary : colors.grey100
-      }
-    );
+    const leftIconNode = renderStatefulIcon(leftIcon, UserIcon, {
+      size: ICON_SIZE7,
+      color: error ? colors.red : isOpen ? colors.primary : colors.grey100
+    });
     const hasLeftIcon = showLeftIcon || leftIcon != null;
     const triggerBorderColor = error ? colors.redMuted : isOpen ? colors.primaryMuted : colors.grey700;
     const triggerTextColor = hasValue ? error ? colors.red : colors.white : error ? colors.red : colors.grey100;
@@ -4141,6 +4188,6 @@ var styles16 = StyleSheet.create({
   }
 });
 
-export { ArrowRightIcon, Avatar, BRAND_LOGO_COLORS, BRAND_LOGO_DEFAULT_HEIGHT, BRAND_LOGO_DEFAULT_WIDTH, Badge, BagIcon, BellIcon, BrandLogo, BuildingIcon, Button, CalendarIcon, CalendarOutlineIcon, CameraIcon, CheckBadgeIcon, CheckIcon, Checkbox, ChevronDownIcon, ChevronLeftIcon, ClockIcon, CommentCard, Counter, DatePicker, FacebookIcon, GlobeIcon, HeartIcon, HelpCircleIcon, HomeIcon, Icon, Input, InstagramIcon, KeyIcon, LanguageSwitcher, LayoutGridIcon, LinkedInIcon, LogOutIcon, MailIcon, MenuItem, MinusIcon, NavigateIcon, PhoneIcon, PlusIcon, RatingInput, SearchIcon, SegmentedToggle, Select, SettingsIcon, ShowIcon, SidebarIcon, StarFilledIcon, StarIcon, StatCard, Textarea, Toggle, UserIcon, UsersAltIcon, VideoIcon, avatarTypography, badgeTypography, buttonTypography, colors, commentCardTypography, counterTypography, datePickerTypography, defaultLanguageOptions, fonts, getIconsByGroup, grey, iconGroupNames, iconGroups, iconNames, icons, inputTypography, languageSwitcherTypography, ratingTypography, segmentedToggleTypography, selectTypography, statCardTypography, textareaTypography };
+export { ArrowRightIcon, Avatar, BRAND_LOGO_COLORS, BRAND_LOGO_DEFAULT_HEIGHT, BRAND_LOGO_DEFAULT_WIDTH, Badge, BagIcon, BellIcon, BrandLogo, BuildingIcon, Button, CalendarIcon, CalendarOutlineIcon, CameraIcon, CheckBadgeIcon, CheckIcon, Checkbox, ChevronDownIcon, ChevronLeftIcon, ClockIcon, CommentCard, Counter, DatePicker, FacebookIcon, GlobeIcon, HeartIcon, HelpCircleIcon, HomeIcon, Icon, Input, InstagramIcon, KeyIcon, LanguageSwitcher, LayoutGridIcon, LinkedInIcon, LogOutIcon, MailIcon, MenuIcon, MenuItem, MinusIcon, NavigateIcon, PhoneIcon, PlusIcon, RatingInput, SearchIcon, SegmentedToggle, Select, SettingsIcon, ShowIcon, SidebarIcon, StarFilledIcon, StarIcon, StatCard, Textarea, Toggle, UserIcon, UsersAltIcon, VideoIcon, avatarTypography, badgeTypography, buttonTypography, colors, commentCardTypography, counterTypography, datePickerTypography, defaultLanguageOptions, fonts, getIconsByGroup, grey, iconGroupNames, iconGroups, iconNames, icons, inputTypography, languageSwitcherTypography, ratingTypography, segmentedToggleTypography, selectTypography, statCardTypography, textareaTypography };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map