Remove default value for country code

Make user specify country code for PhoneNumberInput.

TODO.md

@@ -3,7 +3,7 @@
 - Action
   - [X] ActionButton
 - Blob (choose to extract each preview component to their own library?)
-  - [-] FileSelectBox
+  - [X] FileSelectBox
 - Choice
   - [X] ComboBox
   - [X] DropdownSelect

categories/formatted/react/src/components/PhoneNumberInput/index.tsx

@@ -48,7 +48,7 @@ export interface PhoneNumberInputProps extends Omit<React.HTMLProps<PhoneNumberI
   /**
    * Country where the phone number should be formatted for.
    */
-  country?: Country,
+  country: Country,
   /**
    * Visual length of the input.
    */
@@ -74,7 +74,7 @@ export const PhoneNumberInput = React.forwardRef<
     id: idProp,
     style,
     enhanced = false as const,
-    country = 'PH' as const,
+    country,
     value,
     onChange,
     name,
@@ -247,6 +247,5 @@ PhoneNumberInput.defaultProps = {
   variant: 'default' as const,
   hiddenLabel: false as const,
   enhanced: false as const,
-  country: 'PH' as const,
   length: undefined,
 };

showcases/web-kitchensink-reactnext/src/pages/categories/formatted/index.tsx

@@ -12,6 +12,7 @@ const TemporalPage: NextPage = () => {
       <Section title="PhoneNumberInput">
         <Subsection title="Default">
           <Formatted.PhoneNumberInput
+            country="PH"
             label="Phone"
             name="phone"
             enhanced
@@ -23,6 +24,7 @@ const TemporalPage: NextPage = () => {
         </Subsection>
         <Subsection title="Non-enhanced">
           <Formatted.PhoneNumberInput
+            country="PH"
             label="Phone"
             name="phone"
             border
@@ -33,6 +35,7 @@ const TemporalPage: NextPage = () => {
         </Subsection>
         <Subsection title="With Default Value">
           <Formatted.PhoneNumberInput
+            country="PH"
             label="Phone"
             name="phone2"
             enhanced
@@ -44,6 +47,7 @@ const TemporalPage: NextPage = () => {
           <div className="flex gap-4 flex-wrap">
             <div>
               <Formatted.PhoneNumberInput
+                country="PH"
                 label="Phone"
                 name="phone3"
                 enhanced

showcases/web-kitchensink-reactnext/src/pages/examples/registration-form/index.tsx

@@ -87,6 +87,7 @@ const RegistrationFormPage: NextPage = () => {
               </div>
               <div className="sm:col-span-2">
                 <Formatted.PhoneNumberInput
+                  country="PH"
                   block
                   border
                   label="Phone"