Fixes based on the reviews

Author: dhavalveera

apps/web/content/docs/forms/phone-input.mdx

@@ -3,11 +3,11 @@ title: React Phone Input - Flowbite
 description: Use the phone number input component from Flowbite to set a phone number inside a form field and use sizes
 ---
 
-The phone number input component from Flowbite React can be used to set a phone number inside a form field by using the native type="tel" attribute.
+The phone number input component from Flowbite React, utilizing the native type="tel" attribute, enables users to input phone numbers within form fields.
 
-The examples are built with the utility classes from Tailwind CSS and they are fully responsive, dark mode compatible and support RTL layouts and can be used for any type of web project.
+The examples are built with the utility classes from Tailwind CSS, and they are fully responsive, dark mode compatible, and support RTL layouts, making them suitable for any type of web project.
 
-To start using the component make sure that you have imported it from Flowbite React:
+To start using the component, make sure that you have imported it from Flowbite React:
 
 ```jsx
 import { PhoneInput } from "flowbite-react";

apps/web/examples/phoneInput/phoneInput.root.tsx

@@ -7,21 +7,21 @@ const code = `
 import { PhoneInput } from "flowbite-react";
 
 function Component() {
-    return (
-        <form className="max-w-sm mx-auto">
-            <PhoneInput />
-        </form>
-    )
+  return (
+    <form className="max-w-sm mx-auto">
+      <PhoneInput />
+    </form>
+  )
 }
 `;
 
 const codeRSC = `
 function Component() {
-    return (
-        <form className="max-w-sm mx-auto">
-            <PhoneInput />
-        </form>
-    )
+  return (
+    <form className="max-w-sm mx-auto">
+      <PhoneInput />
+    </form>
+  )
 }
 `;
 

apps/web/examples/phoneInput/phoneInput.withHelperText.tsx

@@ -7,21 +7,21 @@ const code = `
 import { PhoneInput } from "flowbite-react";
 
 function Component() {
-    return (
-        <form className="max-w-sm mx-auto">
-            <PhoneInput helperText="Select a phone number that matches the format." />
-        </form>
-    )
+  return (
+    <form className="max-w-sm mx-auto">
+      <PhoneInput helperText="Select a phone number that matches the format." />
+    </form>
+  )
 }
 `;
 
 const codeRSC = `
 function Component() {
-    return (
-        <form className="max-w-sm mx-auto">
-            <PhoneInput helperText="Select a phone number that matches the format." />
-        </form>
-    )
+  return (
+    <form className="max-w-sm mx-auto">
+      <PhoneInput helperText="Select a phone number that matches the format." />
+    </form>
+  )
 }
 `;
 

apps/web/examples/phoneInput/phoneInput.withRightIcon.tsx

@@ -8,21 +8,21 @@ const code = `
 import { PhoneInput } from "flowbite-react";
 
 function Component() {
-    return (
-        <form className="max-w-sm mx-auto">
-            <PhoneInput helperText="Select a phone number that matches the format."  rightIcon={FaPhoneAlt}/>
-        </form>
-    )
+  return (
+    <form className="max-w-sm mx-auto">
+      <PhoneInput helperText="Select a phone number that matches the format."  rightIcon={FaPhoneAlt} />
+    </form>
+  )
 }
 `;
 
 const codeRSC = `
 function Component() {
-    return (
-        <form className="max-w-sm mx-auto">
-            <PhoneInput helperText="Select a phone number that matches the format." rightIcon={FaPhoneAlt} />
-        </form>
-    )
+  return (
+    <form className="max-w-sm mx-auto">
+      <PhoneInput helperText="Select a phone number that matches the format." rightIcon={FaPhoneAlt} />
+    </form>
+  )
 }
 `;
 

packages/ui/src/components/Flowbite/FlowbiteTheme.ts

@@ -23,7 +23,7 @@ import type { FlowbiteListGroupTheme } from "../ListGroup";
 import type { FlowbiteModalTheme } from "../Modal";
 import type { FlowbiteNavbarTheme } from "../Navbar";
 import type { FlowbitePaginationTheme } from "../Pagination";
-import { FlowbitePhoneInputTheme } from "../PhoneInput/PhoneInput";
+import type { FlowbitePhoneInputTheme } from "../PhoneInput/PhoneInput";
 import type { FlowbitePopoverTheme } from "../Popover";
 import type { FlowbiteProgressTheme } from "../Progress";
 import type { FlowbiteRadioTheme } from "../Radio";

packages/ui/src/components/PhoneInput/PhoneInput.tsx

@@ -4,7 +4,7 @@ import { twMerge } from "tailwind-merge";
 import { mergeDeep } from "../../helpers/merge-deep";
 import { getTheme } from "../../theme-store";
 import type { DeepPartial } from "../../types";
-import { FlowbiteSizes } from "../Flowbite";
+import type { FlowbiteSizes } from "../Flowbite";
 import { HelperText } from "../HelperText";
 
 export interface FlowbitePhoneInputTheme {

packages/ui/src/components/PhoneInput/theme.ts

@@ -5,7 +5,7 @@ export const phoneInputTheme: FlowbitePhoneInputTheme = createTheme({
   root: {
     base: "relative",
     input: {
-      base: "block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 ps-10 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500  dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500",
+      base: "block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 ps-10 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500",
       startIcon: {
         base: "pointer-events-none absolute inset-y-0 start-0 top-0 flex items-center ps-3.5",
         icon: "h-4 w-4 text-gray-500 dark:text-gray-400",