@getmicdrop/svelte-components 3.1.0 → 4.0.0

package/dist/components/pages/profile/profile-form.stories.svelte

@@ -1,276 +0,0 @@
-<script module>
-  import { defineMeta } from "@storybook/addon-svelte-csf";
-
-    import ProfileForm from "./profile-form.svelte";
-
-  const { Story } = defineMeta({
-    title: "Pages/Profile/ProfileForm",
-    component: ProfileForm,
-    argTypes: {
-      formData: { control: "object" },
-      formErrors: { control: "object" },
-      fields: { control: "object" },
-      isPhoneVerified: { control: "boolean" },
-    },
-  });
-
-  const defaultFields = {
-    basicInfo: [
-      { name: "firstName", label: "First Name", placeholder: "John", required: true },
-      { name: "lastName", label: "Last Name", placeholder: "Doe", required: true },
-      { name: "email", label: "Email address", placeholder: "name@example.com", required: true, type: "email" },
-      { name: "phone", label: "Phone", placeholder: "Enter 10 digit phone number", required: true, type: "tel" },
-    ],
-    extraDetails: [
-      { name: "ethnicity", label: "Ethnicity", placeholder: "Select ethnicity", type: "multiselect" },
-      { name: "gender", label: "Gender", placeholder: "Select gender", required: true, type: "customDropdown" },
-      { name: "location", label: "Location", placeholder: "City, State", required: true, type: "placesAutocomplete" },
-      { name: "bio", label: "Bio", placeholder: "Tell us about yourself", type: "textarea", maxLength: 500 },
-      { name: "introCredits", label: "Intro Credits", placeholder: "Your stage introduction", type: "textarea", maxLength: 200 },
-    ],
-    socialMedia: [
-      { name: "instagram", label: "Instagram", placeholder: "username" },
-      { name: "facebook", label: "Facebook", placeholder: "username" },
-      { name: "twitter", label: "Twitter", placeholder: "username" },
-      { name: "tiktok", label: "TikTok", placeholder: "username" },
-    ],
-  };
-
-</script>
-
-
-<Story
-  name="Empty Profile Form"
-  args={{
-    formData: {
-      basicInfo: {
-        firstName: "",
-        lastName: "",
-        email: "",
-        phone: "",
-        stageName: "",
-        useStageName: false,
-      },
-      extraDetails: {
-        ethnicity: [],
-        gender: "",
-        location: "",
-        googleLocationId: "",
-        googleLocationNameCache: "",
-        bio: "",
-        introCredits: "",
-      },
-      socialMedia: {
-        instagram: "",
-        facebook: "",
-        twitter: "",
-        tiktok: "",
-      },
-    },
-    formErrors: {
-      basicInfo: {},
-      extraDetails: {},
-      socialMedia: {},
-    },
-    fields: defaultFields,
-    isPhoneVerified: false,
-  }}
-/>
-
-<Story
-  name="Partially Filled Profile"
-  args={{
-    formData: {
-      basicInfo: {
-        firstName: "John",
-        lastName: "Smith",
-        email: "john.smith@example.com",
-        phone: "5551234567",
-        stageName: "",
-        useStageName: false,
-      },
-      extraDetails: {
-        ethnicity: [],
-        gender: "",
-        location: "",
-        googleLocationId: "",
-        googleLocationNameCache: "",
-        bio: "",
-        introCredits: "",
-      },
-      socialMedia: {
-        instagram: "",
-        facebook: "",
-        twitter: "",
-        tiktok: "",
-      },
-    },
-    formErrors: {
-      basicInfo: {},
-      extraDetails: {},
-      socialMedia: {},
-    },
-    fields: defaultFields,
-    isPhoneVerified: false,
-  }}
-/>
-
-<Story
-  name="Complete Profile"
-  args={{
-    formData: {
-      basicInfo: {
-        firstName: "Sarah",
-        lastName: "Johnson",
-        email: "sarah.johnson@comedy.com",
-        phone: "5559876543",
-        stageName: "SJ the Comedian",
-        useStageName: true,
-      },
-      extraDetails: {
-        ethnicity: [2, 3],
-        gender: "female",
-        location: "New York, NY",
-        googleLocationId: "ChIJOwg_06VPwokRYv534QaPC8g",
-        googleLocationNameCache: "New York, NY, USA",
-        bio: "Professional comedian with 10 years of experience. Specializing in observational humor and storytelling.",
-        introCredits: "Please welcome to the stage, the hilarious Sarah Johnson!",
-      },
-      socialMedia: {
-        instagram: "sarahjcomedy",
-        facebook: "sarahjohnsoncomedy",
-        twitter: "sjcomedy",
-        tiktok: "sarahjcomedy",
-      },
-    },
-    formErrors: {
-      basicInfo: {},
-      extraDetails: {},
-      socialMedia: {},
-    },
-    fields: defaultFields,
-    isPhoneVerified: true,
-  }}
-/>
-
-<Story
-  name="With Validation Errors"
-  args={{
-    formData: {
-      basicInfo: {
-        firstName: "",
-        lastName: "",
-        email: "invalid-email",
-        phone: "123",
-        stageName: "",
-        useStageName: false,
-      },
-      extraDetails: {
-        ethnicity: [],
-        gender: "",
-        location: "",
-        googleLocationId: "",
-        googleLocationNameCache: "",
-        bio: "",
-        introCredits: "",
-      },
-      socialMedia: {
-        instagram: "",
-        facebook: "",
-        twitter: "",
-        tiktok: "",
-      },
-    },
-    formErrors: {
-      basicInfo: {
-        firstName: "First name is required",
-        lastName: "Last name is required",
-        email: "Please enter a valid email address",
-        phone: "Phone number must be 10 digits",
-      },
-      extraDetails: {
-        gender: "Please select a gender",
-        location: "Location is required",
-      },
-      socialMedia: {},
-    },
-    fields: defaultFields,
-    isPhoneVerified: false,
-  }}
-/>
-
-<Story
-  name="Phone Verified Profile"
-  args={{
-    formData: {
-      basicInfo: {
-        firstName: "Mike",
-        lastName: "Davis",
-        email: "mike.davis@example.com",
-        phone: "5552468135",
-        stageName: "Mikey D",
-        useStageName: true,
-      },
-      extraDetails: {
-        ethnicity: [6],
-        gender: "male",
-        location: "Los Angeles, CA",
-        googleLocationId: "ChIJE9on3F3HwoAR9AhGJW_fL-I",
-        googleLocationNameCache: "Los Angeles, CA, USA",
-        bio: "Stand-up comedian and improv artist based in LA. Love making people laugh!",
-        introCredits: "Give it up for the one and only Mikey D!",
-      },
-      socialMedia: {
-        instagram: "mikeydcomedy",
-        facebook: "mikedaviscomedy",
-        twitter: "mikeyd",
-        tiktok: "mikeydcomedy",
-      },
-    },
-    formErrors: {
-      basicInfo: {},
-      extraDetails: {},
-      socialMedia: {},
-    },
-    fields: defaultFields,
-    isPhoneVerified: true,
-  }}
-/>
-
-<Story
-  name="With Stage Name"
-  args={{
-    formData: {
-      basicInfo: {
-        firstName: "Jennifer",
-        lastName: "Lee",
-        email: "jennifer@example.com",
-        phone: "5551357924",
-        stageName: "Jenny Laughs",
-        useStageName: true,
-      },
-      extraDetails: {
-        ethnicity: [1],
-        gender: "female",
-        location: "Seattle, WA",
-        googleLocationId: "ChIJVTPokywQkFQRmtVEaUZlJRA",
-        googleLocationNameCache: "Seattle, WA, USA",
-        bio: "Comedy is my passion! Performing since 2015.",
-        introCredits: "Putting the funny in Seattle, it's Jenny Laughs!",
-      },
-      socialMedia: {
-        instagram: "jennylaughs",
-        facebook: "",
-        twitter: "jennylaughs",
-        tiktok: "jennylaughs",
-      },
-    },
-    formErrors: {
-      basicInfo: {},
-      extraDetails: {},
-      socialMedia: {},
-    },
-    fields: defaultFields,
-    isPhoneVerified: true,
-  }}
-/>

package/dist/components/pages/profile/profile-form.stories.svelte.d.ts

@@ -1,28 +0,0 @@
-export default ProfileForm;
-type ProfileForm = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
-};
-declare const ProfileForm: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-import ProfileForm from "./profile-form.svelte";
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-//# sourceMappingURL=profile-form.stories.svelte.d.ts.map

package/dist/components/pages/profile/profile-form.stories.svelte.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"profile-form.stories.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/pages/profile/profile-form.stories.svelte.js"],"names":[],"mappings":";;;;;;;;AAgRA;;;;mBAAuH;wBA3Q3F,uBAAuB;6CAkQN,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IACtG,eAAe,QAAQ,CAAC"}

package/dist/components/pages/profile/profile-form.svelte

@@ -1,392 +0,0 @@
-<script>
-  import Input from "../../Input/Input.svelte";
-  import Select from "../../Input/Select.svelte";
-  import MultiSelectInput from "../../Input/MultiSelect.svelte";
-  import PlaceAutocomplete from "../../PlaceAutocomplete/PlaceAutocomplete.svelte";
-  import { onMount } from "svelte";
-  import { slide } from "svelte/transition";
-  import { cubicOut } from "svelte/easing";
-  import SectionHeader from "../performers/SectionHeader.svelte";
-  import { ExclamationTriangleOutline } from "../../Icons";
-  import InstagramIcon from "../../Icons/InstagramIcon.svelte";
-  import TiktokIcon from "../../Icons/TiktokIcon.svelte";
-  import FacebookIcon from "../../Icons/FacebookIcon.svelte";
-  import TwitterIcon from "../../Icons/TwitterIcon.svelte";
-  import { GENDER_OPTIONS, ETHNICITY_OPTIONS } from "../../../constants/formOptions";
-
-  export let formData;
-  export let formErrors;
-  export let fields;
-  export let showErrors = false;
-  export let isPhoneVerified = false;
-  export let handleVerifyPhone = () => {};
-
-  let useStageName = false;
-
-  const handlePlaceSelection = (placeData) => {
-    formData.extraDetails.location =
-      placeData.formattedAddress || placeData.text || "";
-    formData.extraDetails.googleLocationId = placeData.id || "";
-    formData.extraDetails.googleLocationNameCache =
-      placeData.formattedAddress || placeData.text || "";
-  };
-
-  $: if (useStageName !== undefined) {
-    formData.basicInfo.useStageName = useStageName;
-  }
-
-  onMount(() => {
-    if (
-      !formData.extraDetails.ethnicity ||
-      !Array.isArray(formData.extraDetails.ethnicity)
-    ) {
-      formData.extraDetails.ethnicity = [];
-    }
-    useStageName =
-      formData.basicInfo.useStageName ||
-      !!formData.basicInfo.stageName ||
-      false;
-  });
-</script>
-
-<div class="flex flex-col gap-8">
-  <!-- Personal Info Section -->
-  <div class="w-full">
-    <SectionHeader title="Personal info" />
-    <div class="w-full grid grid-cols-1 sm:grid-cols-2 gap-4 mt-4">
-      {#each fields.basicInfo as field}
-        <div
-          class={field.name === "firstName" || field.name === "lastName"
-            ? "col-span-1"
-            : "col-span-1 sm:col-span-2"}
-        >
-          {#if field.type === "placesAutocomplete"}
-            <div>
-              <label
-                for={field.name}
-                class="mb-2 block text-sm font-medium text-gray-900 dark:text-white"
-              >
-                {field.label}{#if field.required}<span class="text-red-600 dark:text-red-500"
-                    >*</span
-                  >{/if}
-              </label>
-              <PlaceAutocomplete
-                placeholder={field.placeholder}
-                initialValue={formData.basicInfo[field.name]}
-                onResponse={handlePlaceSelection}
-                onError={(error) => console.error("Places API error:", error)}
-                mode="cityState"
-              />
-              {#if formErrors.basicInfo?.[field.name] && showErrors}
-                <div
-                  transition:slide={{ duration: 300, easing: cubicOut }}
-                  class="validation-error flex items-center gap-1.5 mt-2"
-                  role="alert"
-                >
-                  <ExclamationTriangleOutline class="w-3 h-3 shrink-0 text-red-600 dark:text-red-500" />
-                  <p class="text-sm font-medium text-red-600 dark:text-red-500">
-                    {formErrors.basicInfo[field.name]}
-                  </p>
-                </div>
-              {/if}
-            </div>
-          {:else if field.name === "phone"}
-            <Input
-              id={field.name}
-              name={field.name}
-              type="phoneNumber"
-              label="Phone number"
-              placeholder={field.placeholder}
-              maxlength="12"
-              required={field.required}
-              bind:value={formData.basicInfo[field.name]}
-              errorText={formErrors.basicInfo?.[field.name]}
-              statusText={isPhoneVerified ? "verified" : "unverified"}
-              statusType={isPhoneVerified ? "success" : "error"}
-              controlled
-              buttonText="Verify"
-              onButtonClick={handleVerifyPhone}
-              buttonDisabled={!formData.basicInfo.phone ||
-                formData.basicInfo.phone.replace(/\D/g, "").length < 10}
-              {showErrors}
-            />
-            <div class="mt-4 mb-2 flex items-center gap-2">
-              <input
-                id="useStageName"
-                type="checkbox"
-                bind:checked={useStageName}
-                class="w-4 h-4 rounded"
-              />
-              <label
-                for="useStageName"
-                class="text-sm font-medium text-gray-900 dark:text-white">Use stage name</label
-              >
-            </div>
-            {#if useStageName}
-              <div class="mt-2" transition:slide={{ duration: 300, easing: cubicOut }}>
-                <Input
-                  name="stageName"
-                  placeholder=""
-                  bind:value={formData.basicInfo.stageName}
-                  errorText={formErrors.basicInfo?.stageName}
-                  {showErrors}
-                />
-              </div>
-            {/if}
-          {:else}
-            <Input
-              {...field}
-              bind:value={formData.basicInfo[field.name]}
-              errorText={formErrors.basicInfo?.[field.name]}
-              {showErrors}
-            />
-          {/if}
-        </div>
-      {/each}
-    </div>
-    <div class="w-full flex flex-col gap-4 mt-3">
-      {#each fields.extraDetails as field}
-        {#if field.name === "ethnicity"}
-          <MultiSelectInput
-            items={ETHNICITY_OPTIONS}
-            bind:value={formData.extraDetails.ethnicity}
-            label="Ethnicity"
-            placeholder=""
-            hideClear
-            error={formErrors.extraDetails?.ethnicity}
-            on:change={(event) => {
-              console.log("Ethnicity change event:", event.detail);
-            }}
-          />
-        {:else if field.name === "location"}
-          <div class="relative z-10">
-            <label
-              for={field.name}
-              class="mb-2 block text-sm font-medium text-gray-900 dark:text-white"
-            >
-              {field.label}{#if field.required}<span class="text-red-600 dark:text-red-500"
-                  >*</span
-                >{/if}
-            </label>
-            <PlaceAutocomplete
-              placeholder={field.placeholder}
-              initialValue={formData.extraDetails.location}
-              onResponse={handlePlaceSelection}
-              onError={(error) => console.error("Places API error:", error)}
-              mode="cityState"
-            />
-            {#if formErrors.extraDetails?.location && showErrors}
-              <div
-                transition:slide={{ duration: 300, easing: cubicOut }}
-                class="validation-error flex items-center gap-1.5 mt-2"
-                role="alert"
-              >
-                <ExclamationTriangleOutline class="w-3 h-3 shrink-0 text-red-600 dark:text-red-500" />
-                <p class="text-sm font-medium text-red-600 dark:text-red-500">
-                  {formErrors.extraDetails.location}
-                </p>
-              </div>
-            {/if}
-          </div>
-        {:else if field.type === "customDropdown" && field.name === "gender"}
-          <Select
-            items={GENDER_OPTIONS}
-            bind:value={formData.extraDetails.gender}
-            label={field.label}
-            error={formErrors.extraDetails?.gender}
-            required={field.required}
-            placeholder=""
-            on:change={(event) => {
-              console.log("Gender selected:", event.detail);
-            }}
-          />
-        {:else if field.name === "bio"}
-          <Input
-            {...field}
-            bind:value={formData.extraDetails[field.name]}
-            errorText={formErrors.extraDetails?.[field.name]}
-            maxlength={field.maxLength}
-            {showErrors}
-          />
-          {@const currentLength = formData.extraDetails[field.name]?.length || 0}
-          {@const remaining = field.maxLength - currentLength}
-          {@const isNearLimit = remaining <= 20 && remaining > 0}
-          {@const isAtLimit = remaining === 0}
-          <div
-            class="text-xs text-right mt-1 {isAtLimit ? 'text-red-600 dark:text-red-500' : isNearLimit ? 'text-amber-600' : 'text-gray-500 dark:text-gray-400'}"
-            aria-live={isNearLimit || isAtLimit ? "polite" : "off"}
-            aria-atomic="true"
-          >
-            {currentLength}/{field.maxLength} characters
-            {#if isAtLimit}
-              <span class="sr-only">(limit reached)</span>
-            {:else if isNearLimit}
-              <span class="sr-only">({remaining} remaining)</span>
-            {/if}
-          </div>
-        {:else if field.name === "introCredits"}
-          <div class="relative">
-            <Input
-              {...field}
-              bind:value={formData.extraDetails[field.name]}
-              errorText={formErrors.extraDetails?.[field.name]}
-              maxlength={field.maxLength}
-              {showErrors}
-            />
-            {#if true}
-              {@const currentLength = formData.extraDetails[field.name]?.length || 0}
-              {@const remaining = field.maxLength - currentLength}
-              {@const isNearLimit = remaining <= 10 && remaining > 0}
-              {@const isAtLimit = remaining === 0}
-              <div
-                class="text-xs text-right mt-1 {isAtLimit ? 'text-red-600 dark:text-red-500' : isNearLimit ? 'text-amber-600' : 'text-gray-500 dark:text-gray-400'}"
-                aria-live={isNearLimit || isAtLimit ? "polite" : "off"}
-                aria-atomic="true"
-              >
-                {currentLength}/{field.maxLength} characters
-                {#if isAtLimit}
-                  <span class="sr-only">(limit reached)</span>
-                {:else if isNearLimit}
-                  <span class="sr-only">({remaining} remaining)</span>
-                {/if}
-              </div>
-            {/if}
-          </div>
-        {:else}
-          <Input
-            {...field}
-            bind:value={formData.extraDetails[field.name]}
-            errorText={formErrors.extraDetails?.[field.name]}
-            {showErrors}
-          />
-        {/if}
-      {/each}
-    </div>
-  </div>
-
-  <!-- Section Divider -->
-  <hr class="border-0 border-t border-gray-200 dark:border-gray-700 m-0" />
-
-  <div>
-    <span class="text-sm font-normal flex">
-      <SectionHeader title="Social media" />
-    </span>
-    <div
-      class="mt-1 p-3 font-medium text-sm text-blue-700 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/30 rounded-lg"
-    >
-      Usernames only.
-    </div>
-    <div class="w-full mx-auto flex flex-col gap-4 mt-4">
-      {#each fields.socialMedia as field}
-        <div>
-          <label for={field.name} class="mb-2 flex items-center gap-2 text-sm font-medium text-gray-900 dark:text-white">
-            <span class="inline-flex w-5 h-5 shrink-0 text-gray-500 dark:text-gray-400">
-              {#if field.name === "instagram"}
-                <InstagramIcon size="20" />
-              {:else if field.name === "tiktok"}
-                <TiktokIcon size="20" />
-              {:else if field.name === "facebook"}
-                <FacebookIcon size="20" />
-              {:else if field.name === "twitter"}
-                <TwitterIcon size="20" />
-              {/if}
-            </span>
-            {field.label}
-          </label>
-          <Input
-            {...field}
-            label=""
-            bind:value={formData.socialMedia[field.name]}
-            errorText={formErrors.socialMedia?.[field.name]}
-            {showErrors}
-          />
-        </div>
-      {/each}
-    </div>
-  </div>
-
-  <!-- Accordion Sections
-  <Accordion class="accordion-main" flush>
-    Social Media Section
-    <AccordionItem class="accordion-item">
-      <span slot="header" class="text-sm font-normal flex">
-        <SectionHeader title="Social media" />
-      </span>
-      <div class="w-full mx-auto flex flex-col gap-4 mt-4">
-        {#each fields.socialMedia as field}
-          <Input
-            {...field}
-            bind:value={formData.socialMedia[field.name]}
-            errorText={formErrors.socialMedia?.[field.name]}
-            />
-        {/each}
-      </div>
-    </AccordionItem>
-
-    Extra Details Section
-    <AccordionItem class="accordion-item">
-      <span slot="header" class="text-sm font-normal flex gap-2">
-        <SectionHeader title="Extra details" />
-      </span>
-      <div class="w-full mx-auto flex flex-col gap-4 mt-4">
-        {#each fields.extraDetails as field}
-          {#if field.name === "ethnicity"}
-            <MultiSelectInput
-              items={ETHNICITY_OPTIONS}
-              bind:value={formData.extraDetails.ethnicity}
-              label="Ethnicity"
-              placeholder=""
-              hideClear
-              error={formErrors.extraDetails?.ethnicity}
-            />
-          {:else if field.name === "location"}
-            <div class="relative z-10">
-              <label for={field.name} class="mb-2 block text-sm font-medium text-gray-900 dark:text-white">
-                {field.label}{#if field.required}<span class="text-red-600 dark:text-red-500">*</span>{/if}
-              </label>
-              <PlaceAutocomplete
-                placeholder={field.placeholder}
-                initialValue={formData.extraDetails.location}
-                onResponse={handlePlaceSelection}
-                onError={(error) => console.error("Places API error:", error)}
-                mode="cityState"
-              />
-              {#if formErrors.extraDetails?.location}
-                <p class="mt-2 text-sm text-red-600 dark:text-red-500">{formErrors.extraDetails.location}</p>
-              {/if}
-            </div>
-          {:else if field.type === "customDropdown" && field.name === "gender"}
-            <Select
-              items={GENDER_OPTIONS}
-              bind:value={formData.extraDetails.gender}
-              label={field.label}
-              error={formErrors.extraDetails?.gender}
-              required={field.required}
-              placeholder="Select gender"
-            />
-          {:else if field.name === "bio" || field.name === "introCredits"}
-            <div class="relative">
-              <Input
-                {...field}
-                bind:value={formData.extraDetails[field.name]}
-                errorText={formErrors.extraDetails?.[field.name]}
-                maxlength={field.maxLength}
-              />
-              <div class="text-xs text-gray-500 dark:text-gray-400 text-right mt-1">
-                {formData.extraDetails[field.name]?.length ||
-                  0}/{field.maxLength} characters
-              </div>
-            </div>
-          {:else}
-            <Input
-              {...field}
-              bind:value={formData.extraDetails[field.name]}
-              errorText={formErrors.extraDetails?.[field.name]}
-            />
-          {/if}
-        {/each}
-      </div>
-    </AccordionItem>
-  </Accordion> -->
-</div>
-