ferns-ui 1.13.0 → 1.15.0

package/src/DateTimeField.tsx

@@ -262,20 +262,20 @@ export const DateTimeField: FC<DateTimeFieldProps> = ({
       if (type === "date" || type === "datetime") {
         if (fieldIndex === 0) {
           // Month
-          const monthNum = parseInt(fieldValue);
-          if (isNaN(monthNum) || monthNum < 1 || monthNum > 12) {
+          const monthNum = parseInt(fieldValue, 10);
+          if (Number.isNaN(monthNum) || monthNum < 1 || monthNum > 12) {
             return "Month must be between 1 and 12";
           }
         } else if (fieldIndex === 1) {
           // Day
-          const dayNum = parseInt(fieldValue);
-          if (isNaN(dayNum) || dayNum < 1 || dayNum > 31) {
+          const dayNum = parseInt(fieldValue, 10);
+          if (Number.isNaN(dayNum) || dayNum < 1 || dayNum > 31) {
             return "Day must be between 1 and 31";
           }
         } else if (fieldIndex === 2) {
           // Year
-          const yearNum = parseInt(fieldValue);
-          if (isNaN(yearNum) || yearNum < 1900 || yearNum > 2100) {
+          const yearNum = parseInt(fieldValue, 10);
+          if (Number.isNaN(yearNum) || yearNum < 1900 || yearNum > 2100) {
             return "Year must be between 1900 and 2100";
           }
         }
@@ -284,14 +284,14 @@ export const DateTimeField: FC<DateTimeFieldProps> = ({
       if (type === "time" || type === "datetime") {
         if (fieldIndex === (type === "time" ? 0 : 3)) {
           // Hour
-          const hourNum = parseInt(fieldValue);
-          if (isNaN(hourNum) || hourNum < 1 || hourNum > 12) {
+          const hourNum = parseInt(fieldValue, 10);
+          if (Number.isNaN(hourNum) || hourNum < 1 || hourNum > 12) {
             return "Hour must be between 1 and 12";
           }
         } else if (fieldIndex === (type === "time" ? 1 : 4)) {
           // Minute
-          const minuteNum = parseInt(fieldValue);
-          if (isNaN(minuteNum) || minuteNum < 0 || minuteNum > 59) {
+          const minuteNum = parseInt(fieldValue, 10);
+          if (Number.isNaN(minuteNum) || minuteNum < 0 || minuteNum > 59) {
             return "Minute must be between 0 and 59";
           }
         }
@@ -323,7 +323,7 @@ export const DateTimeField: FC<DateTimeFieldProps> = ({
         if (!monthVal || !dayVal || !yearVal || !hour || !minuteVal) {
           return undefined;
         }
-        let hourNum = parseInt(hourVal);
+        let hourNum = parseInt(hourVal, 10);
         if (ampPmVal === "pm" && hourNum !== 12) {
           hourNum += 12;
         } else if (ampPmVal === "am" && hourNum === 12) {
@@ -331,11 +331,11 @@ export const DateTimeField: FC<DateTimeFieldProps> = ({
         }
         date = DateTime.fromObject(
           {
-            year: parseInt(yearVal),
-            month: parseInt(monthVal),
-            day: parseInt(dayVal),
+            year: parseInt(yearVal, 10),
+            month: parseInt(monthVal, 10),
+            day: parseInt(dayVal, 10),
             hour: hourNum,
-            minute: parseInt(minuteVal),
+            minute: parseInt(minuteVal, 10),
             second: 0,
             millisecond: 0,
           },
@@ -349,9 +349,9 @@ export const DateTimeField: FC<DateTimeFieldProps> = ({
         }
         date = DateTime.fromObject(
           {
-            year: parseInt(yearVal),
-            month: parseInt(monthVal),
-            day: parseInt(dayVal),
+            year: parseInt(yearVal, 10),
+            month: parseInt(monthVal, 10),
+            day: parseInt(dayVal, 10),
             hour: 0,
             minute: 0,
             second: 0,
@@ -365,7 +365,7 @@ export const DateTimeField: FC<DateTimeFieldProps> = ({
         if (!hour || !minuteVal) {
           return undefined;
         }
-        let hourNum = parseInt(hour);
+        let hourNum = parseInt(hour, 10);
         if (ampPmVal === "pm" && hourNum !== 12) {
           hourNum += 12;
         } else if (ampPmVal === "am" && hourNum === 12) {
@@ -374,7 +374,7 @@ export const DateTimeField: FC<DateTimeFieldProps> = ({
         date = DateTime.fromObject(
           {
             hour: hourNum,
-            minute: parseInt(minuteVal),
+            minute: parseInt(minuteVal, 10),
             second: 0,
             millisecond: 0,
           },
@@ -404,7 +404,7 @@ export const DateTimeField: FC<DateTimeFieldProps> = ({
         // so it's always a valid time and easier to edit.
         // This lets users freely edit or clear the minute field without breaking the time format.
         const finalValue = numericValue === "" ? "00" : numericValue.slice(-2);
-        const minuteNum = parseInt(finalValue);
+        const minuteNum = parseInt(finalValue, 10);
 
         // Update the minute state so the UI reflects the latest input,
         // even if it's temporarily invalid
@@ -412,7 +412,7 @@ export const DateTimeField: FC<DateTimeFieldProps> = ({
         setMinute(finalValue);
 
         // Only update ref and result if it's a valid minute value
-        if (!isNaN(minuteNum) && minuteNum >= 0 && minuteNum <= 59) {
+        if (!Number.isNaN(minuteNum) && minuteNum >= 0 && minuteNum <= 59) {
           pendingValueRef.current = {minute: finalValue};
           setFieldErrors((prev) => ({...prev, [index]: undefined}));
 

package/src/FernsProvider.tsx

@@ -9,10 +9,7 @@ import {Toast} from "./Toast";
 export const FernsProvider: FC<{
   children: React.ReactNode;
   openAPISpecUrl?: string;
-}> = ({
-  children,
-  openAPISpecUrl,
-}) => {
+}> = ({children, openAPISpecUrl}) => {
   return (
     <ThemeProvider>
       <ToastProvider

package/src/Heading.tsx

@@ -4,7 +4,7 @@ import {
   useFonts,
 } from "@expo-google-fonts/titillium-web";
 import React from "react";
-import {Platform, StyleProp, Text as NativeText, TextStyle} from "react-native";
+import {Text as NativeText, Platform, StyleProp, TextStyle} from "react-native";
 
 import {HeadingProps} from "./Common";
 import {useTheme} from "./Theme";

package/src/Hyperlink.tsx

@@ -111,7 +111,7 @@ class HyperlinkComponent extends React.Component<HyperlinkProps> {
         component.props.children.substring(_lastIndex, component.props.children.length)
       );
       return React.cloneElement(component, componentProps, elements);
-    } catch (error) {
+    } catch (_error) {
       return component;
     }
   };

package/src/IconButton.tsx

@@ -1,7 +1,7 @@
 import FontAwesome6 from "@expo/vector-icons/FontAwesome6";
 import debounce from "lodash/debounce";
 import React, {FC, useState} from "react";
-import {ActivityIndicator, Pressable, Text as NativeText, View} from "react-native";
+import {ActivityIndicator, Text as NativeText, Pressable, View} from "react-native";
 
 import {IconButtonProps} from "./Common";
 import {isMobileDevice} from "./MediaQuery";
@@ -98,7 +98,7 @@ const IconButtonComponent: FC<IconButtonProps> = ({
   return (
     <Pressable
       accessibilityHint={
-        accessibilityHint ?? withConfirmation
+        (accessibilityHint ?? withConfirmation)
           ? `Opens a confirmation dialog to confirm ${accessLabel}`
           : `Press to perform ${accessLabel} action`
       }

package/src/Image.tsx

@@ -3,6 +3,7 @@ import {Dimensions, Image as NativeImage} from "react-native";
 
 import {Box} from "./Box";
 import {ImageProps} from "./Common";
+
 const {width: DEVICE_WIDTH} = Dimensions.get("window");
 
 export class Image extends React.Component<ImageProps, {}> {

package/src/MobileAddressAutoComplete.tsx

@@ -108,7 +108,7 @@ export const MobileAddressAutocomplete = ({
               handleAddressChange(event.nativeEvent.text);
             },
           }}
-          onPress={(data, details = null) => {
+          onPress={(_data, details = null) => {
             const addressComponents = details?.address_components;
             const formattedAddressObject = processAddressComponents(addressComponents, {
               includeCounty,

package/src/Modal.tsx

@@ -1,14 +1,11 @@
 import React, {FC, useEffect, useRef} from "react";
-import {Dimensions, DimensionValue, Modal as RNModal, Pressable, View} from "react-native";
+import {Dimensions, DimensionValue, Pressable, Modal as RNModal, View} from "react-native";
 import ActionSheet, {ActionSheetRef} from "react-native-actions-sheet";
-import {
-  PanGestureHandler,
-  PanGestureHandlerStateChangeEvent,
-  State,
-} from "react-native-gesture-handler";
+import {Gesture, GestureDetector} from "react-native-gesture-handler";
+import {runOnJS} from "react-native-reanimated";
 
 import {Button} from "./Button";
-import {ModalProps} from "./Common";
+import type {ModalProps} from "./Common";
 import {Heading} from "./Heading";
 import {Icon} from "./Icon";
 import {isMobileDevice} from "./MediaQuery";
@@ -129,7 +126,13 @@ const ModalContent: FC<{
         </View>
       )}
       {children && (
-        <View style={{marginTop: text ? 0 : 12, width: "100%", flex: isMobile ? undefined : 1}}>
+        <View
+          style={{
+            marginTop: text ? 0 : 12,
+            width: "100%",
+            flex: isMobile ? undefined : 1,
+          }}
+        >
           {children}
         </View>
       )}
@@ -163,6 +166,7 @@ const ModalContent: FC<{
 
 export const Modal: FC<ModalProps> = ({
   children,
+  persistOnBackgroundClick = false,
   primaryButtonDisabled = false,
   primaryButtonText,
   secondaryButtonText,
@@ -200,11 +204,12 @@ export const Modal: FC<ModalProps> = ({
     }
   };
 
-  const onHandlerStateChange = ({nativeEvent}: PanGestureHandlerStateChangeEvent) => {
-    if (nativeEvent.state === State.END && nativeEvent.translationY > 100) {
-      handleDismiss();
+  const dragToClose = Gesture.Pan().onEnd((event) => {
+    if (event.translationY > 20) {
+      // Gesture callbacks run on the UI thread, runOnJS is required to safely invoke handleDismiss on the JS thread
+      runOnJS(handleDismiss)();
     }
-  };
+  });
 
   // Open the action sheet ref when the visible prop changes.
   useEffect(() => {
@@ -217,6 +222,7 @@ export const Modal: FC<ModalProps> = ({
   const sizePx = getModalSize(size);
 
   const modalContentProps = {
+    persistOnBackgroundClick,
     title,
     subtitle,
     text,
@@ -233,13 +239,22 @@ export const Modal: FC<ModalProps> = ({
 
   if (isMobile) {
     return (
-      <ActionSheet ref={actionSheetRef} onClose={handleDismiss}>
-        <PanGestureHandler onHandlerStateChange={onHandlerStateChange}>
-          <View>
+      <ActionSheet
+        ref={actionSheetRef}
+        closeOnTouchBackdrop={!persistOnBackgroundClick}
+        // Disable ActionSheet's built-in gestures to avoid conflicts with scrolling
+        gestureEnabled={false}
+        onClose={handleDismiss}
+      >
+        <View>
+          {/* Attach our own swipe-to-dismiss gesture to the top handle */}
+          <GestureDetector gesture={dragToClose}>
             <View
               accessibilityHint="Pull down to close the modal"
               aria-label="Pull down bar"
               aria-role="adjustable"
+              // add hitSlop to make the bar easier to hit since it's small
+              hitSlop={{top: 20, bottom: 20, left: 50, right: 50}}
               style={{
                 justifyContent: "center",
                 alignItems: "center",
@@ -252,9 +267,10 @@ export const Modal: FC<ModalProps> = ({
                 marginTop: 10,
               }}
             />
-            <ModalContent {...modalContentProps}>{children}</ModalContent>
-          </View>
-        </PanGestureHandler>
+          </GestureDetector>
+
+          <ModalContent {...modalContentProps}>{children}</ModalContent>
+        </View>
       </ActionSheet>
     );
   } else {
@@ -267,9 +283,14 @@ export const Modal: FC<ModalProps> = ({
             justifyContent: "center",
             alignItems: "center",
           }}
-          onPress={handleDismiss}
+          onPress={persistOnBackgroundClick ? undefined : handleDismiss}
         >
-          <Pressable style={{cursor: "auto"}} onPress={(e) => e.stopPropagation()}>
+          <Pressable
+            style={{cursor: "auto"}}
+            onPress={(e) => {
+              persistOnBackgroundClick ? null : e.stopPropagation();
+            }}
+          >
             <ModalContent {...modalContentProps}>{children}</ModalContent>
           </Pressable>
         </Pressable>

package/src/NumberField.tsx

@@ -24,8 +24,8 @@ export const NumberField: FC<NumberFieldProps> = ({
       if (!v) {
         return;
       }
-      const num = type === "number" ? parseInt(v) : parseFloat(v);
-      if (isNaN(num) || (type === "number" && v.match(/[^0-9]/) !== null)) {
+      const num = type === "number" ? parseInt(v, 10) : parseFloat(v);
+      if (Number.isNaN(num) || (type === "number" && v.match(/[^0-9]/) !== null)) {
         return "Value must be an integer";
       } else if (
         (type === "decimal" && v.match(/[^0-9.]+/) !== null) ||
@@ -47,13 +47,19 @@ export const NumberField: FC<NumberFieldProps> = ({
   // Only return the value if it is a valid number
   const localOnChange = useCallback(
     (v: string) => {
-      setValue(v);
+      if (type === "decimal" && v === ".") {
+        // if type is decimal and dot is the first character add 0 before it
+        setValue("0.");
+        rest.onChange("0.");
+        return;
+      }
       const err = getError(v);
       if (!err) {
+        setValue(v);
         rest.onChange(v);
       }
     },
-    [getError, rest]
+    [getError, rest, type]
   );
 
   return <TextField {...rest} errorText={error} value={value} onChange={localOnChange} />;

package/src/NumberPickerActionSheet.tsx

@@ -9,16 +9,12 @@ import {NumberPickerActionSheetProps} from "./Common";
 
 const PICKER_HEIGHT = 104;
 
-interface NumberPickerActionSheetState {}
+type NumberPickerActionSheetState = {};
 
 export class NumberPickerActionSheet extends React.Component<
   NumberPickerActionSheetProps,
   NumberPickerActionSheetState
 > {
-  constructor(props: NumberPickerActionSheetProps) {
-    super(props);
-  }
-
   render() {
     return (
       <ActionSheet ref={this.props.actionSheetRef} bounceOnOpen gestureEnabled>

package/src/Page.tsx

@@ -47,7 +47,7 @@ export class Page extends React.Component<PageProps, {}> {
             <Button
               text={this.props.rightButton}
               variant="muted"
-              onClick={() => this.props.rightButtonOnClick && this.props.rightButtonOnClick()}
+              onClick={() => this.props.rightButtonOnClick?.()}
             />
           </Box>
         )}

package/src/Pagination.tsx

@@ -11,12 +11,7 @@ const PaginationButton: FC<{
   onClick: () => void;
   totalPages?: number;
   page?: number;
-}> = ({
-  type,
-  onClick,
-  totalPages = 1,
-  page = 1,
-}) => {
+}> = ({type, onClick, totalPages = 1, page = 1}) => {
   let icon: IconName;
   let disabled = false;
 
@@ -56,11 +51,7 @@ const PaginationNumber: FC<{
   number: number | "more";
   current: boolean;
   onClick: () => void;
-}> = ({
-  number,
-  current,
-  onClick,
-}) => {
+}> = ({number, current, onClick}) => {
   // Shortcut to make rendering the number buttons easier.
   if (number === "more") {
     return <PaginationButton type="more" onClick={() => {}} />;

package/src/Permissions.ts

@@ -4,8 +4,8 @@
 // import Permissions from "react-native-permissions";
 import {PermissionKind, PermissionStatus} from "./Common";
 
-export async function requestPermissions(kind: PermissionKind): Promise<PermissionStatus> {
-  return new Promise(async (resolve, reject) => {
+export async function requestPermissions(_kind: PermissionKind): Promise<PermissionStatus> {
+  return new Promise((_resolve, _reject) => {
     return "denied";
   });
   // const userPropertyKey = `PermissionsFor${capitalize(kind)}`;

package/src/PickerSelect.tsx

@@ -201,7 +201,7 @@ export function RNPickerSelect({
       Keyboard.dismiss();
     }
 
-    setAnimationType(modalProps && modalProps?.animationType ? modalProps?.animationType : "slide");
+    setAnimationType(modalProps?.animationType ? modalProps?.animationType : "slide");
 
     triggerOpenCloseCallbacks();
 

package/src/SectionDivider.tsx

@@ -1,6 +1,6 @@
-import {useTheme} from "./Theme";
 import React from "react";
 import {View} from "react-native";
+import {useTheme} from "./Theme";
 
 export const SectionDivider: React.FC<{}> = () => {
   const {theme} = useTheme();

package/src/SegmentedControl.tsx

@@ -24,7 +24,9 @@ export const SegmentedControl: FC<SegmentedControlProps> = ({
   }, []);
 
   const handleNext = useCallback(() => {
-    setStartIndex((prev) => Math.min(items.length - (maxItems ?? items.length), prev + (maxItems ?? 4)));
+    setStartIndex((prev) =>
+      Math.min(items.length - (maxItems ?? items.length), prev + (maxItems ?? 4))
+    );
   }, [items.length, maxItems]);
 
   const visibleItems = maxItems ? items.slice(startIndex, startIndex + maxItems) : items;

package/src/Signature.native.tsx

@@ -21,14 +21,14 @@ export const Signature: FC<Props> = ({onChange, onStart, onEnd}: Props) => {
   };
 
   const onBegin = () => {
-    onStart && onStart();
+    onStart?.();
   };
 
   // Called after end of stroke. Kind of goofy if you ask me,
   // but you need this in order to trigger the 'onOK' callback that gives us the actual image.
   const handleEnd = () => {
     ref.current?.readSignature();
-    onEnd && onEnd();
+    onEnd?.();
   };
 
   return (

package/src/SignatureField.tsx

@@ -64,10 +64,10 @@ export const SignatureField = ({
         <Signature
           onChange={onChange}
           onEnd={() => {
-            onEnd && onEnd();
+            onEnd?.();
           }}
           onStart={() => {
-            onStart && onStart();
+            onStart?.();
           }}
         />
       </View>

package/src/Slider.tsx

@@ -1,6 +1,5 @@
 import SliderComponent from "@react-native-community/slider";
 import React, {FC} from "react";
-import {View} from "react-native";
 
 import {Box} from "./Box";
 import {IconName, SliderProps, ValueMappingItem} from "./Common";
@@ -16,11 +15,11 @@ const getCurrentMapping = (map: ValueMappingItem[], value: number) => {
   if (!map || map.length === 0) {
     return null;
   }
-  
+
   // Find the option with the closest value
   let closestOption = map[0];
   let closestDistance = Math.abs(value - closestOption.value);
-  
+
   for (const option of map) {
     const distance = Math.abs(value - option.value);
     if (distance < closestDistance) {
@@ -28,7 +27,7 @@ const getCurrentMapping = (map: ValueMappingItem[], value: number) => {
       closestOption = option;
     }
   }
-  
+
   return closestOption;
 };
 
@@ -49,9 +48,9 @@ const getCenterContent = (
       </Text>
     );
   }
-  
+
   const currentOption = getCurrentMapping(valueMapping, value);
-  
+
   if (useIcons) {
     return (
       <Icon
@@ -61,7 +60,7 @@ const getCenterContent = (
       />
     );
   }
-  
+
   return (
     <Text align="center" color={disabled ? "secondaryLight" : "primary"} size="2xl">
       {currentOption?.label}
@@ -72,7 +71,7 @@ const getCenterContent = (
 const getSliderContent = (
   slider: React.ReactElement,
   inlineLabels: boolean,
-  labels?: SliderProps['labels']
+  labels?: SliderProps["labels"]
 ): React.ReactElement => {
   if (inlineLabels && labels?.min && labels?.max) {
     return (
@@ -154,9 +153,9 @@ export const Slider: FC<SliderProps> = ({
     thumbStyle: {
       width: 48,
       height: 48,
-      backgroundColor: 'white',
+      backgroundColor: "white",
       borderRadius: 24,
-      shadowColor: '#000',
+      shadowColor: "#000",
       shadowOffset: {
         width: 0,
         height: 2,
@@ -189,11 +188,7 @@ export const Slider: FC<SliderProps> = ({
     <Box>
       {Boolean(title) && <FieldTitle text={title!} />}
       <Box direction="column" gap={showSelection ? 2 : 0}>
-        {showSelection && (
-          <Box alignItems="center">
-            {centerContent}
-          </Box>
-        )}
+        {showSelection && <Box alignItems="center">{centerContent}</Box>}
         {sliderContent}
       </Box>
       {Boolean(helperText && !errorText) && <FieldHelperText text={helperText!} />}
@@ -201,5 +196,3 @@ export const Slider: FC<SliderProps> = ({
     </Box>
   );
 };
-
-

package/src/SplitPage.native.tsx

@@ -9,7 +9,6 @@ import {SplitPageProps} from "./Common";
 import {FlatList} from "./FlatList";
 import {IconButton} from "./IconButton";
 import {Spinner} from "./Spinner";
-import {useTheme} from "./Theme";
 import {Unifier} from "./Unifier";
 
 export const SplitPage = ({
@@ -26,7 +25,6 @@ export const SplitPage = ({
   bottomNavBarHeight,
   showItemList,
 }: SplitPageProps) => {
-  const {theme} = useTheme();
   const [selectedId, setSelectedId] = useState<number | undefined>(undefined);
 
   // flattenChildren is necessary to pull children from a React Fragment. Without this,
@@ -92,7 +90,7 @@ export const SplitPage = ({
           paddingBottom: bottomNavBarHeight,
         }}
       >
-        {renderListViewHeader && renderListViewHeader()}
+        {renderListViewHeader?.()}
         <FlatList
           data={listViewData}
           extraData={listViewExtraData}
@@ -117,7 +115,7 @@ export const SplitPage = ({
             onClick={() => onItemDeselect()}
           />
         </Box>
-        {renderContent && renderContent(selectedId)}
+        {renderContent?.(selectedId)}
       </Box>
     );
   };

package/src/SplitPage.tsx

@@ -95,7 +95,7 @@ export const SplitPage = ({
           flexDirection: "column",
         }}
       >
-        {renderListViewHeader && renderListViewHeader()}
+        {renderListViewHeader?.()}
         <FlatList
           data={listViewData}
           extraData={listViewExtraData}
@@ -109,7 +109,7 @@ export const SplitPage = ({
   const renderListContent = () => {
     return (
       <Box flex="grow" padding={2}>
-        {renderContent && renderContent(selectedId)}
+        {renderContent?.(selectedId)}
       </Box>
     );
   };
@@ -205,7 +205,7 @@ export const SplitPage = ({
           flexDirection: "column",
         }}
       >
-        {renderListViewHeader && renderListViewHeader()}
+        {renderListViewHeader?.()}
         <FlatList
           data={listViewData}
           extraData={listViewExtraData}
@@ -234,7 +234,7 @@ export const SplitPage = ({
             />
           </Box>
         )}
-        {renderContent && renderContent(selectedId)}
+        {renderContent?.(selectedId)}
       </Box>
     );
   };

package/src/TapToEdit.tsx

@@ -13,11 +13,7 @@ const TapToEditTitle: FC<{
   onlyShowHelperTextWhileEditing?: boolean;
   title: string;
   helperText?: string;
-}> = ({
-  title,
-  helperText,
-  onlyShowHelperTextWhileEditing,
-}) => {
+}> = ({title, helperText, onlyShowHelperTextWhileEditing}) => {
   return (
     <View style={{flex: 1, justifyContent: "center"}}>
       <Text bold>{title}</Text>
@@ -117,7 +113,7 @@ export const TapToEdit: FC<TapToEditProps> = ({
         </View>
         <View style={{gap: 16}}>
           <Field
-            grow={fieldProps?.type === "textarea" ? fieldProps.grow ?? true : undefined}
+            grow={fieldProps?.type === "textarea" ? (fieldProps.grow ?? true) : undefined}
             helperText={helperText}
             inputRef={
               ["text", "textarea", "url", "email", "number"].includes(fieldProps?.type)
@@ -210,7 +206,7 @@ export const TapToEdit: FC<TapToEditProps> = ({
         try {
           const url = new URL(value);
           displayValue = url?.hostname ?? value;
-        } catch (error) {
+        } catch (_error) {
           // Don't print an error message for empty values.
           if (value) {
             console.debug(`Invalid URL: $value`);