From d05dc3ef0fbe7de36f2ee4483c21c4f73f3553f9 Mon Sep 17 00:00:00 2001
From: Laura Beatris <48022589+LauraBeatris@users.noreply.github.com>
Date: Thu, 13 Feb 2025 18:46:26 -0300
Subject: [PATCH 01/11] Update input primitive to accept feedbackType prop

---
 packages/clerk-js/src/ui/primitives/Input.tsx | 22 +++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

diff --git a/packages/clerk-js/src/ui/primitives/Input.tsx b/packages/clerk-js/src/ui/primitives/Input.tsx
index 54217d4a3f3..f74ccae8ce5 100644
--- a/packages/clerk-js/src/ui/primitives/Input.tsx
+++ b/packages/clerk-js/src/ui/primitives/Input.tsx
@@ -61,10 +61,23 @@ export type InputProps = PrimitiveProps<'input'> & StyleVariants<typeof applyVar
 export const Input = React.forwardRef<HTMLInputElement, InputProps>((props, ref) => {
   const fieldControl = useFormField() || {};
   // @ts-expect-error Typescript is complaining that `errorMessageId` does not exist. We are clearly passing them from above.
-  const { errorMessageId, ignorePasswordManager, feedbackType, ...fieldControlProps } = sanitizeInputProps(
-    fieldControl,
-    ['errorMessageId', 'ignorePasswordManager', 'feedbackType'],
-  );
+  const { errorMessageId, ignorePasswordManager, ...fieldControlProps } = sanitizeInputProps(fieldControl, [
+    'errorMessageId',
+    'ignorePasswordManager',
+    'feedbackType',
+  ]);
+
+  const getFeedbackType = (fieldControl: ReturnType<typeof useFormField>, hasError: InputProps['hasError']) => {
+    if (!fieldControl) {
+      return null;
+    }
+
+    if (fieldControl.feedbackType) {
+      return fieldControl.feedbackType;
+    }
+
+    return hasError ? 'error' : null;
+  };
 
   const propsWithoutVariants = filterProps({
     ...props,
@@ -75,6 +88,7 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>((props, ref)
   const _disabled = isDisabled || fieldControlProps.isDisabled;
   const _required = isRequired || fieldControlProps.isRequired;
   const _hasError = hasError || fieldControlProps.hasError;
+  const feedbackType = getFeedbackType(fieldControl, hasError);
 
   /**
    * type="email" will not allow characters like this one "ö", instead remove type email and provide a pattern that accepts any character before the "@" symbol

From 4cc45736222a848555de1f317aff7ceb1b98144e Mon Sep 17 00:00:00 2001
From: Laura Beatris <48022589+LauraBeatris@users.noreply.github.com>
Date: Thu, 13 Feb 2025 19:39:41 -0300
Subject: [PATCH 02/11] Introduce field control for min length validation

---
 .changeset/tricky-spiders-jog.md              |  5 ++
 .../OrganizationProfile/MembersActions.tsx    |  2 +-
 .../OrganizationProfile/MembersSearch.tsx     | 49 ++++++++++++++++---
 packages/types/src/elementIds.ts              |  3 +-
 4 files changed, 50 insertions(+), 9 deletions(-)
 create mode 100644 .changeset/tricky-spiders-jog.md

diff --git a/.changeset/tricky-spiders-jog.md b/.changeset/tricky-spiders-jog.md
new file mode 100644
index 00000000000..cedd1886e51
--- /dev/null
+++ b/.changeset/tricky-spiders-jog.md
@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Introduce minimum length for organization memberships search
diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/MembersActions.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/MembersActions.tsx
index a1d5439a0cb..fe911c88f47 100644
--- a/packages/clerk-js/src/ui/components/OrganizationProfile/MembersActions.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationProfile/MembersActions.tsx
@@ -32,8 +32,8 @@ export const MembersActionsRow = ({ actionSlot }: MembersActionsRowProps) => {
               <Button
                 elementDescriptor={descriptors.membersPageInviteButton}
                 aria-label='Invite'
-                textVariant='buttonSmall'
                 localizationKey={localizationKeys('organizationProfile.membersPage.action__invite')}
+                sx={{ height: 'min-content' }}
               />
             </Action.Trigger>
           )}
diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/MembersSearch.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/MembersSearch.tsx
index cbbcbca5dd6..ead87c556c4 100644
--- a/packages/clerk-js/src/ui/components/OrganizationProfile/MembersSearch.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationProfile/MembersSearch.tsx
@@ -3,9 +3,11 @@ import type { GetMembersParams } from '@clerk/types';
 import { useEffect, useRef } from 'react';
 
 import { descriptors, Flex, Icon, localizationKeys, useLocalizations } from '../../../ui/customizables';
-import { Animated, InputWithIcon } from '../../../ui/elements';
+import { InputWithIcon } from '../../../ui/elements';
+import { Field } from '../../../ui/elements/FieldControl';
 import { MagnifyingGlass } from '../../../ui/icons';
 import { Spinner } from '../../../ui/primitives';
+import { useFormControl } from '../../../ui/utils';
 import { ACTIVE_MEMBERS_PAGE_SIZE } from './OrganizationMembers';
 
 type MembersSearchProps = {
@@ -29,11 +31,28 @@ type MembersSearchProps = {
    * Handler for `query` value changes
    */
   onQueryTrigger: (query: string) => void;
+  /**
+   * Minimum search length to trigger query
+   */
+  minLength?: number;
 };
 
 const membersSearchDebounceMs = 500;
 
-export const MembersSearch = ({ query, value, memberships, onSearchChange, onQueryTrigger }: MembersSearchProps) => {
+export const MembersSearch = ({
+  query,
+  value,
+  memberships,
+  onSearchChange,
+  onQueryTrigger,
+  minLength = 3,
+}: MembersSearchProps) => {
+  const searchField = useFormControl('search', '', {
+    type: 'search',
+    label: '',
+    placeholder: localizationKeys('organizationProfile.membersPage.action__search'),
+  });
+
   const { t } = useLocalizations();
 
   const debounceTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
@@ -44,6 +63,7 @@ export const MembersSearch = ({ query, value, memberships, onSearchChange, onQue
 
     const shouldClearQuery = eventValue === '';
     if (shouldClearQuery) {
+      searchField.clearFeedback();
       onQueryTrigger(eventValue);
     }
   };
@@ -55,8 +75,16 @@ export const MembersSearch = ({ query, value, memberships, onSearchChange, onQue
       clearTimeout(debounceTimer.current);
     }
 
+    // Test rollback behavior + add localization key
     debounceTimer.current = setTimeout(() => {
-      onQueryTrigger(value.trim());
+      const isValid = value.trim().length === 0 || value.trim().length >= minLength;
+
+      if (!isValid) {
+        searchField.setInfo('3 character minimum');
+      } else {
+        searchField.clearFeedback();
+        onQueryTrigger(value.trim());
+      }
     }, membersSearchDebounceMs);
   }
 
@@ -76,14 +104,19 @@ export const MembersSearch = ({ query, value, memberships, onSearchChange, onQue
   const isFetchingNewData = value && !!memberships?.isLoading && !!memberships.data?.length;
 
   return (
-    <Animated asChild>
-      <Flex sx={{ width: '100%' }}>
+    <Flex
+      sx={{ minWidth: '50%', position: 'relative' }}
+      direction='col'
+    >
+      <Field.Root {...searchField}>
         <InputWithIcon
+          {...searchField.props}
           value={value}
           type='search'
           autoCapitalize='none'
           spellCheck={false}
           aria-label='Search'
+          minLength={minLength}
           placeholder={t(localizationKeys('organizationProfile.membersPage.action__search'))}
           leftIcon={
             isFetchingNewData ? (
@@ -99,7 +132,9 @@ export const MembersSearch = ({ query, value, memberships, onSearchChange, onQue
           onChange={handleChange}
           elementDescriptor={descriptors.organizationProfileMembersSearchInput}
         />
-      </Flex>
-    </Animated>
+
+        <Field.Feedback />
+      </Field.Root>
+    </Flex>
   );
 };
diff --git a/packages/types/src/elementIds.ts b/packages/types/src/elementIds.ts
index 546fea1d955..07e82315c7d 100644
--- a/packages/types/src/elementIds.ts
+++ b/packages/types/src/elementIds.ts
@@ -21,7 +21,8 @@ export type FieldId =
   | 'enrollmentMode'
   | 'affiliationEmailAddress'
   | 'deleteExistingInvitationsSuggestions'
-  | 'legalAccepted';
+  | 'legalAccepted'
+  | 'search';
 export type ProfileSectionId =
   | 'profile'
   | 'username'

From bf6ccbfca4928668efe05ecc941e816da9cccdcf Mon Sep 17 00:00:00 2001
From: Laura Beatris <48022589+LauraBeatris@users.noreply.github.com>
Date: Thu, 13 Feb 2025 20:23:22 -0300
Subject: [PATCH 03/11] Refactor debounce logic

---
 .../OrganizationProfile/MembersSearch.tsx     | 57 ++++++-------------
 .../OrganizationMembers.tsx                   |  6 +-
 2 files changed, 20 insertions(+), 43 deletions(-)

diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/MembersSearch.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/MembersSearch.tsx
index ead87c556c4..9540b6d067e 100644
--- a/packages/clerk-js/src/ui/components/OrganizationProfile/MembersSearch.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationProfile/MembersSearch.tsx
@@ -1,10 +1,11 @@
 import type { useOrganization } from '@clerk/shared/react';
 import type { GetMembersParams } from '@clerk/types';
-import { useEffect, useRef } from 'react';
+import { useEffect } from 'react';
 
 import { descriptors, Flex, Icon, localizationKeys, useLocalizations } from '../../../ui/customizables';
 import { InputWithIcon } from '../../../ui/elements';
 import { Field } from '../../../ui/elements/FieldControl';
+import { useDebounce } from '../../../ui/hooks';
 import { MagnifyingGlass } from '../../../ui/icons';
 import { Spinner } from '../../../ui/primitives';
 import { useFormControl } from '../../../ui/utils';
@@ -30,63 +31,33 @@ type MembersSearchProps = {
   /**
    * Handler for `query` value changes
    */
-  onQueryTrigger: (query: string) => void;
+  onQueryChange: (query: string) => void;
   /**
    * Minimum search length to trigger query
    */
-  minLength?: number;
+  minLength: number;
 };
 
-const membersSearchDebounceMs = 500;
-
-export const MembersSearch = ({
-  query,
-  value,
-  memberships,
-  onSearchChange,
-  onQueryTrigger,
-  minLength = 3,
-}: MembersSearchProps) => {
+export const MembersSearch = ({ value, memberships, onSearchChange, onQueryChange, minLength }: MembersSearchProps) => {
+  const { t } = useLocalizations();
   const searchField = useFormControl('search', '', {
     type: 'search',
     label: '',
     placeholder: localizationKeys('organizationProfile.membersPage.action__search'),
   });
-
-  const { t } = useLocalizations();
-
-  const debounceTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const query = useDebounce(value, 600);
 
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const eventValue = event.target.value;
     onSearchChange(eventValue);
 
-    const shouldClearQuery = eventValue === '';
-    if (shouldClearQuery) {
-      searchField.clearFeedback();
-      onQueryTrigger(eventValue);
-    }
-  };
-
-  // Debounce the input value changes until the user stops typing
-  // to trigger the `query` param setter
-  function handleKeyUp() {
-    if (debounceTimer.current) {
-      clearTimeout(debounceTimer.current);
+    if (!eventValue || eventValue.length < minLength) {
+      searchField.setInfo('3 character minimum');
+      return;
     }
 
-    // Test rollback behavior + add localization key
-    debounceTimer.current = setTimeout(() => {
-      const isValid = value.trim().length === 0 || value.trim().length >= minLength;
-
-      if (!isValid) {
-        searchField.setInfo('3 character minimum');
-      } else {
-        searchField.clearFeedback();
-        onQueryTrigger(value.trim());
-      }
-    }, membersSearchDebounceMs);
-  }
+    searchField.clearFeedback();
+  };
 
   // If search is not performed on a initial page, resets pagination offset
   // based on the response count
@@ -101,6 +72,10 @@ export const MembersSearch = ({
     }
   }, [query, memberships]);
 
+  useEffect(() => {
+    onQueryChange(query);
+  }, [query, onQueryChange]);
+
   const isFetchingNewData = value && !!memberships?.isLoading && !!memberships.data?.length;
 
   return (
diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationMembers.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationMembers.tsx
index 9daa3e7b041..1cf6a972a25 100644
--- a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationMembers.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationMembers.tsx
@@ -26,6 +26,7 @@ import { OrganizationMembersTabInvitations } from './OrganizationMembersTabInvit
 import { OrganizationMembersTabRequests } from './OrganizationMembersTabRequests';
 
 export const ACTIVE_MEMBERS_PAGE_SIZE = 10;
+const MEMBERS_SEARCH_QUERY_MIN_LENGTH = 3;
 
 export const OrganizationMembers = withCardStateProvider(() => {
   const { organizationSettings } = useEnvironment();
@@ -43,7 +44,7 @@ export const OrganizationMembers = withCardStateProvider(() => {
     memberships: canReadMemberships
       ? {
           keepPreviousData: true,
-          query: query || undefined,
+          query: query && query.length > MEMBERS_SEARCH_QUERY_MIN_LENGTH ? query : undefined,
         }
       : undefined,
   });
@@ -140,11 +141,12 @@ export const OrganizationMembers = withCardStateProvider(() => {
                       <MembersActionsRow
                         actionSlot={
                           <MembersSearch
+                            minLength={MEMBERS_SEARCH_QUERY_MIN_LENGTH}
                             query={query}
                             value={search}
                             memberships={memberships}
                             onSearchChange={query => setSearch(query)}
-                            onQueryTrigger={query => setQuery(query)}
+                            onQueryChange={query => setQuery(query)}
                           />
                         }
                       />

From 851f2d49732401b9f7114b01b84b8818e9ed29a0 Mon Sep 17 00:00:00 2001
From: Laura Beatris <48022589+LauraBeatris@users.noreply.github.com>
Date: Thu, 13 Feb 2025 20:31:06 -0300
Subject: [PATCH 04/11] Add localized key

---
 .../OrganizationProfile/MembersSearch.tsx     | 13 +++++------
 packages/clerk-js/src/ui/primitives/Input.tsx | 22 ++++---------------
 packages/localizations/src/ar-SA.ts           |  2 ++
 packages/localizations/src/be-BY.ts           |  2 ++
 packages/localizations/src/bg-BG.ts           |  2 ++
 packages/localizations/src/ca-ES.ts           |  3 +++
 packages/localizations/src/cs-CZ.ts           |  2 ++
 packages/localizations/src/da-DK.ts           |  2 ++
 packages/localizations/src/de-DE.ts           |  2 ++
 packages/localizations/src/el-GR.ts           |  2 ++
 packages/localizations/src/en-GB.ts           |  3 +++
 packages/localizations/src/en-US.ts           |  3 ++-
 packages/localizations/src/es-ES.ts           |  2 ++
 packages/localizations/src/es-MX.ts           |  2 ++
 packages/localizations/src/fi-FI.ts           |  2 ++
 packages/localizations/src/fr-FR.ts           |  2 ++
 packages/localizations/src/he-IL.ts           |  2 ++
 packages/localizations/src/hr-HR.ts           |  3 +++
 packages/localizations/src/hu-HU.ts           |  2 ++
 packages/localizations/src/id-ID.ts           |  3 +++
 packages/localizations/src/is-IS.ts           |  2 ++
 packages/localizations/src/it-IT.ts           |  2 ++
 packages/localizations/src/ja-JP.ts           |  2 ++
 packages/localizations/src/ko-KR.ts           |  2 ++
 packages/localizations/src/mn-MN.ts           |  2 ++
 packages/localizations/src/nb-NO.ts           |  2 ++
 packages/localizations/src/nl-BE.ts           |  3 +++
 packages/localizations/src/nl-NL.ts           |  2 ++
 packages/localizations/src/pl-PL.ts           |  2 ++
 packages/localizations/src/pt-BR.ts           |  2 ++
 packages/localizations/src/pt-PT.ts           |  2 ++
 packages/localizations/src/ro-RO.ts           |  2 ++
 packages/localizations/src/ru-RU.ts           |  2 ++
 packages/localizations/src/sk-SK.ts           |  2 ++
 packages/localizations/src/sr-RS.ts           |  2 ++
 packages/localizations/src/sv-SE.ts           |  2 ++
 packages/localizations/src/th-TH.ts           |  2 ++
 packages/localizations/src/tr-TR.ts           |  2 ++
 packages/localizations/src/uk-UA.ts           |  2 ++
 packages/localizations/src/vi-VN.ts           |  2 ++
 packages/localizations/src/zh-CN.ts           |  2 ++
 packages/localizations/src/zh-TW.ts           |  2 ++
 packages/types/src/localization.ts            |  1 +
 43 files changed, 96 insertions(+), 26 deletions(-)

diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/MembersSearch.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/MembersSearch.tsx
index 9540b6d067e..e95e734260c 100644
--- a/packages/clerk-js/src/ui/components/OrganizationProfile/MembersSearch.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationProfile/MembersSearch.tsx
@@ -51,14 +51,18 @@ export const MembersSearch = ({ value, memberships, onSearchChange, onQueryChang
     const eventValue = event.target.value;
     onSearchChange(eventValue);
 
-    if (!eventValue || eventValue.length < minLength) {
-      searchField.setInfo('3 character minimum');
+    if (eventValue.length < minLength) {
+      searchField.setInfo(t(localizationKeys('organizationProfile.membersPage.action__search_minLength')));
       return;
     }
 
     searchField.clearFeedback();
   };
 
+  useEffect(() => {
+    onQueryChange(query);
+  }, [query, onQueryChange]);
+
   // If search is not performed on a initial page, resets pagination offset
   // based on the response count
   useEffect(() => {
@@ -72,10 +76,6 @@ export const MembersSearch = ({ value, memberships, onSearchChange, onQueryChang
     }
   }, [query, memberships]);
 
-  useEffect(() => {
-    onQueryChange(query);
-  }, [query, onQueryChange]);
-
   const isFetchingNewData = value && !!memberships?.isLoading && !!memberships.data?.length;
 
   return (
@@ -103,7 +103,6 @@ export const MembersSearch = ({ value, memberships, onSearchChange, onQueryChang
               />
             )
           }
-          onKeyUp={handleKeyUp}
           onChange={handleChange}
           elementDescriptor={descriptors.organizationProfileMembersSearchInput}
         />
diff --git a/packages/clerk-js/src/ui/primitives/Input.tsx b/packages/clerk-js/src/ui/primitives/Input.tsx
index f74ccae8ce5..54217d4a3f3 100644
--- a/packages/clerk-js/src/ui/primitives/Input.tsx
+++ b/packages/clerk-js/src/ui/primitives/Input.tsx
@@ -61,23 +61,10 @@ export type InputProps = PrimitiveProps<'input'> & StyleVariants<typeof applyVar
 export const Input = React.forwardRef<HTMLInputElement, InputProps>((props, ref) => {
   const fieldControl = useFormField() || {};
   // @ts-expect-error Typescript is complaining that `errorMessageId` does not exist. We are clearly passing them from above.
-  const { errorMessageId, ignorePasswordManager, ...fieldControlProps } = sanitizeInputProps(fieldControl, [
-    'errorMessageId',
-    'ignorePasswordManager',
-    'feedbackType',
-  ]);
-
-  const getFeedbackType = (fieldControl: ReturnType<typeof useFormField>, hasError: InputProps['hasError']) => {
-    if (!fieldControl) {
-      return null;
-    }
-
-    if (fieldControl.feedbackType) {
-      return fieldControl.feedbackType;
-    }
-
-    return hasError ? 'error' : null;
-  };
+  const { errorMessageId, ignorePasswordManager, feedbackType, ...fieldControlProps } = sanitizeInputProps(
+    fieldControl,
+    ['errorMessageId', 'ignorePasswordManager', 'feedbackType'],
+  );
 
   const propsWithoutVariants = filterProps({
     ...props,
@@ -88,7 +75,6 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>((props, ref)
   const _disabled = isDisabled || fieldControlProps.isDisabled;
   const _required = isRequired || fieldControlProps.isRequired;
   const _hasError = hasError || fieldControlProps.hasError;
-  const feedbackType = getFeedbackType(fieldControl, hasError);
 
   /**
    * type="email" will not allow characters like this one "ö", instead remove type email and provide a pattern that accepts any character before the "@" symbol
diff --git a/packages/localizations/src/ar-SA.ts b/packages/localizations/src/ar-SA.ts
index 148966b1795..2a3c79153a0 100644
--- a/packages/localizations/src/ar-SA.ts
+++ b/packages/localizations/src/ar-SA.ts
@@ -130,6 +130,7 @@ export const arSA: LocalizationResource = {
     membersPage: {
       action__invite: 'دعوة',
       action__search: undefined,
+      action__search_minLength: undefined,
       activeMembersTab: {
         menuAction__remove: 'إزالة عضو',
         tableHeader__actions: undefined,
@@ -863,6 +864,7 @@ export const arSA: LocalizationResource = {
       passkeysSection: {
         menuAction__destructive: 'إزالة',
         menuAction__rename: 'إعادة تسمية',
+        primaryButton: undefined,
         title: 'مفاتيح المرور',
       },
       passwordSection: {
diff --git a/packages/localizations/src/be-BY.ts b/packages/localizations/src/be-BY.ts
index 44b5e264500..f76cb75a574 100644
--- a/packages/localizations/src/be-BY.ts
+++ b/packages/localizations/src/be-BY.ts
@@ -131,6 +131,7 @@ export const beBY: LocalizationResource = {
     membersPage: {
       action__invite: 'Пригласить',
       action__search: undefined,
+      action__search_minLength: undefined,
       activeMembersTab: {
         menuAction__remove: 'Удалить удзельніка',
         tableHeader__actions: 'Дзеянні',
@@ -878,6 +879,7 @@ export const beBY: LocalizationResource = {
       passkeysSection: {
         menuAction__destructive: 'Выдаліць passkey',
         menuAction__rename: 'Перайменаваць passkey',
+        primaryButton: undefined,
         title: 'Passkeys',
       },
       passwordSection: {
diff --git a/packages/localizations/src/bg-BG.ts b/packages/localizations/src/bg-BG.ts
index 1f57747d9af..65efcc96e9a 100644
--- a/packages/localizations/src/bg-BG.ts
+++ b/packages/localizations/src/bg-BG.ts
@@ -130,6 +130,7 @@ export const bgBG: LocalizationResource = {
     membersPage: {
       action__invite: 'Покани',
       action__search: undefined,
+      action__search_minLength: undefined,
       activeMembersTab: {
         menuAction__remove: 'Премахване на член',
         tableHeader__actions: undefined,
@@ -868,6 +869,7 @@ export const bgBG: LocalizationResource = {
       passkeysSection: {
         menuAction__destructive: undefined,
         menuAction__rename: undefined,
+        primaryButton: undefined,
         title: undefined,
       },
       passwordSection: {
diff --git a/packages/localizations/src/ca-ES.ts b/packages/localizations/src/ca-ES.ts
index edcf8ff502f..46380cbeccd 100644
--- a/packages/localizations/src/ca-ES.ts
+++ b/packages/localizations/src/ca-ES.ts
@@ -129,6 +129,8 @@ export const caES: LocalizationResource = {
     },
     membersPage: {
       action__invite: 'Convida',
+      action__search: undefined,
+      action__search_minLength: undefined,
       activeMembersTab: {
         menuAction__remove: 'Elimina membre',
         tableHeader__actions: undefined,
@@ -874,6 +876,7 @@ export const caES: LocalizationResource = {
       passkeysSection: {
         menuAction__destructive: undefined,
         menuAction__rename: undefined,
+        primaryButton: undefined,
         title: undefined,
       },
       passwordSection: {
diff --git a/packages/localizations/src/cs-CZ.ts b/packages/localizations/src/cs-CZ.ts
index a82483d9e15..c9a358ba7f8 100644
--- a/packages/localizations/src/cs-CZ.ts
+++ b/packages/localizations/src/cs-CZ.ts
@@ -131,6 +131,7 @@ export const csCZ: LocalizationResource = {
     membersPage: {
       action__invite: 'Pozvat',
       action__search: undefined,
+      action__search_minLength: undefined,
       activeMembersTab: {
         menuAction__remove: 'Odstranit člena',
         tableHeader__actions: 'Akce',
@@ -866,6 +867,7 @@ export const csCZ: LocalizationResource = {
       passkeysSection: {
         menuAction__destructive: 'Odstranit',
         menuAction__rename: 'Přejmenovat',
+        primaryButton: undefined,
         title: 'Správa klíčů',
       },
       passwordSection: {
diff --git a/packages/localizations/src/da-DK.ts b/packages/localizations/src/da-DK.ts
index 0b987988a55..c9107006752 100644
--- a/packages/localizations/src/da-DK.ts
+++ b/packages/localizations/src/da-DK.ts
@@ -130,6 +130,7 @@ export const daDK: LocalizationResource = {
     membersPage: {
       action__invite: 'Inviter',
       action__search: undefined,
+      action__search_minLength: undefined,
       activeMembersTab: {
         menuAction__remove: 'Fjern medlem',
         tableHeader__actions: 'Handlinger',
@@ -868,6 +869,7 @@ export const daDK: LocalizationResource = {
       passkeysSection: {
         menuAction__destructive: 'Fjern adgangsnøgle',
         menuAction__rename: 'Omdøb adgangsnøgle',
+        primaryButton: undefined,
         title: 'Adgangsnøgler',
       },
       passwordSection: {
diff --git a/packages/localizations/src/de-DE.ts b/packages/localizations/src/de-DE.ts
index 57b2596142b..11cc606f182 100644
--- a/packages/localizations/src/de-DE.ts
+++ b/packages/localizations/src/de-DE.ts
@@ -133,6 +133,7 @@ export const deDE: LocalizationResource = {
     membersPage: {
       action__invite: 'Einladen',
       action__search: undefined,
+      action__search_minLength: undefined,
       activeMembersTab: {
         menuAction__remove: 'Mitglied entfernen',
         tableHeader__actions: 'Aktionen',
@@ -883,6 +884,7 @@ export const deDE: LocalizationResource = {
       passkeysSection: {
         menuAction__destructive: 'Entfernen',
         menuAction__rename: 'Umbenennen',
+        primaryButton: undefined,
         title: 'Passkeys',
       },
       passwordSection: {
diff --git a/packages/localizations/src/el-GR.ts b/packages/localizations/src/el-GR.ts
index 86c0bb4f977..44d35902df2 100644
--- a/packages/localizations/src/el-GR.ts
+++ b/packages/localizations/src/el-GR.ts
@@ -131,6 +131,7 @@ export const elGR: LocalizationResource = {
     membersPage: {
       action__invite: 'Πρόσκληση',
       action__search: undefined,
+      action__search_minLength: undefined,
       activeMembersTab: {
         menuAction__remove: 'Αφαίρεση μέλους',
         tableHeader__actions: 'Ενέργειες',
@@ -879,6 +880,7 @@ export const elGR: LocalizationResource = {
       passkeysSection: {
         menuAction__destructive: undefined,
         menuAction__rename: undefined,
+        primaryButton: undefined,
         title: undefined,
       },
       passwordSection: {
diff --git a/packages/localizations/src/en-GB.ts b/packages/localizations/src/en-GB.ts
index 5026996513f..01d5bb1a7c7 100644
--- a/packages/localizations/src/en-GB.ts
+++ b/packages/localizations/src/en-GB.ts
@@ -130,6 +130,8 @@ export const enGB: LocalizationResource = {
     },
     membersPage: {
       action__invite: 'Invite',
+      action__search: undefined,
+      action__search_minLength: undefined,
       activeMembersTab: {
         menuAction__remove: 'Remove member',
         tableHeader__actions: 'Actions',
@@ -877,6 +879,7 @@ export const enGB: LocalizationResource = {
       passkeysSection: {
         menuAction__destructive: 'Remove',
         menuAction__rename: 'Rename',
+        primaryButton: undefined,
         title: 'Passkeys',
       },
       passwordSection: {
diff --git a/packages/localizations/src/en-US.ts b/packages/localizations/src/en-US.ts
index 0ba8e0a066f..ffb48b5a29b 100644
--- a/packages/localizations/src/en-US.ts
+++ b/packages/localizations/src/en-US.ts
@@ -119,6 +119,7 @@ export const enUS: LocalizationResource = {
     membersPage: {
       action__invite: 'Invite',
       action__search: 'Search',
+      action__search_minLength: '3 character minimum',
       activeMembersTab: {
         menuAction__remove: 'Remove member',
         tableHeader__actions: 'Actions',
@@ -864,9 +865,9 @@ export const enUS: LocalizationResource = {
         },
       },
       passkeysSection: {
-        primaryButton: 'Add a passkey',
         menuAction__destructive: 'Remove',
         menuAction__rename: 'Rename',
+        primaryButton: 'Add a passkey',
         title: 'Passkeys',
       },
       passwordSection: {
diff --git a/packages/localizations/src/es-ES.ts b/packages/localizations/src/es-ES.ts
index 77cda30dc95..e1a9bea3984 100644
--- a/packages/localizations/src/es-ES.ts
+++ b/packages/localizations/src/es-ES.ts
@@ -131,6 +131,7 @@ export const esES: LocalizationResource = {
     membersPage: {
       action__invite: 'Invitar',
       action__search: 'Buscar',
+      action__search_minLength: undefined,
       activeMembersTab: {
         menuAction__remove: 'Quitar miembro',
         tableHeader__actions: 'Acciones',
@@ -875,6 +876,7 @@ export const esES: LocalizationResource = {
       passkeysSection: {
         menuAction__destructive: 'Eliminar Clave de Acceso',
         menuAction__rename: 'Renombrar Clave de Acceso',
+        primaryButton: undefined,
         title: 'Sección de Claves de Acceso',
       },
       passwordSection: {
diff --git a/packages/localizations/src/es-MX.ts b/packages/localizations/src/es-MX.ts
index c49b39c9121..4d1fe62b134 100644
--- a/packages/localizations/src/es-MX.ts
+++ b/packages/localizations/src/es-MX.ts
@@ -132,6 +132,7 @@ export const esMX: LocalizationResource = {
     membersPage: {
       action__invite: 'Invitar',
       action__search: 'Buscar',
+      action__search_minLength: undefined,
       activeMembersTab: {
         menuAction__remove: 'Eliminar miembro',
         tableHeader__actions: undefined,
@@ -876,6 +877,7 @@ export const esMX: LocalizationResource = {
       passkeysSection: {
         menuAction__destructive: 'Eliminar',
         menuAction__rename: 'Renombrar',
+        primaryButton: undefined,
         title: 'Llaves de acceso',
       },
       passwordSection: {
diff --git a/packages/localizations/src/fi-FI.ts b/packages/localizations/src/fi-FI.ts
index fbf55835a4d..4796a9d130f 100644
--- a/packages/localizations/src/fi-FI.ts
+++ b/packages/localizations/src/fi-FI.ts
@@ -131,6 +131,7 @@ export const fiFI: LocalizationResource = {
     membersPage: {
       action__invite: 'Kutsu',
       action__search: undefined,
+      action__search_minLength: undefined,
       activeMembersTab: {
         menuAction__remove: 'Poista jäsen',
         tableHeader__actions: undefined,
@@ -872,6 +873,7 @@ export const fiFI: LocalizationResource = {
       passkeysSection: {
         menuAction__destructive: 'Poista',
         menuAction__rename: 'Nimeä uudelleen',
+        primaryButton: undefined,
         title: 'Pääsyavaimet',
       },
       passwordSection: {
diff --git a/packages/localizations/src/fr-FR.ts b/packages/localizations/src/fr-FR.ts
index 38f66a2c552..01fd7f60dac 100644
--- a/packages/localizations/src/fr-FR.ts
+++ b/packages/localizations/src/fr-FR.ts
@@ -132,6 +132,7 @@ export const frFR: LocalizationResource = {
     membersPage: {
       action__invite: 'Inviter',
       action__search: undefined,
+      action__search_minLength: undefined,
       activeMembersTab: {
         menuAction__remove: 'Supprimer',
         tableHeader__actions: 'Actions',
@@ -878,6 +879,7 @@ export const frFR: LocalizationResource = {
       passkeysSection: {
         menuAction__destructive: 'Supprimer',
         menuAction__rename: 'Renommer',
+        primaryButton: undefined,
         title: 'Clés de sécurité',
       },
       passwordSection: {
diff --git a/packages/localizations/src/he-IL.ts b/packages/localizations/src/he-IL.ts
index 6a6de9fb265..c5870aae2d1 100644
--- a/packages/localizations/src/he-IL.ts
+++ b/packages/localizations/src/he-IL.ts
@@ -129,6 +129,7 @@ export const heIL: LocalizationResource = {
     membersPage: {
       action__invite: 'הזמן',
       action__search: undefined,
+      action__search_minLength: undefined,
       activeMembersTab: {
         menuAction__remove: 'הסר חבר',
         tableHeader__actions: undefined,
@@ -850,6 +851,7 @@ export const heIL: LocalizationResource = {
       passkeysSection: {
         menuAction__destructive: 'הגדר סיסמה',
         menuAction__rename: 'עדכן סיסמה',
+        primaryButton: undefined,
         title: 'סיסמה',
       },
       passwordSection: {
diff --git a/packages/localizations/src/hr-HR.ts b/packages/localizations/src/hr-HR.ts
index ad9f103cebd..646609d4bc7 100644
--- a/packages/localizations/src/hr-HR.ts
+++ b/packages/localizations/src/hr-HR.ts
@@ -129,6 +129,8 @@ export const hrHR: LocalizationResource = {
     },
     membersPage: {
       action__invite: 'Pozovi',
+      action__search: undefined,
+      action__search_minLength: undefined,
       activeMembersTab: {
         menuAction__remove: 'Ukloni člana',
         tableHeader__actions: undefined,
@@ -874,6 +876,7 @@ export const hrHR: LocalizationResource = {
       passkeysSection: {
         menuAction__destructive: 'Ukloni',
         menuAction__rename: 'Preimenuj',
+        primaryButton: undefined,
         title: 'Pristupni ključevi',
       },
       passwordSection: {
diff --git a/packages/localizations/src/hu-HU.ts b/packages/localizations/src/hu-HU.ts
index 716314ab844..65aa9fbbf7a 100644
--- a/packages/localizations/src/hu-HU.ts
+++ b/packages/localizations/src/hu-HU.ts
@@ -130,6 +130,7 @@ export const huHU: LocalizationResource = {
     membersPage: {
       action__invite: 'Meghívás',
       action__search: undefined,
+      action__search_minLength: undefined,
       activeMembersTab: {
         menuAction__remove: 'Tag eltávolítása',
         tableHeader__actions: undefined,
@@ -873,6 +874,7 @@ export const huHU: LocalizationResource = {
       passkeysSection: {
         menuAction__destructive: 'Eltávolítás',
         menuAction__rename: 'Átnevezés',
+        primaryButton: undefined,
         title: 'Passkey-k',
       },
       passwordSection: {
diff --git a/packages/localizations/src/id-ID.ts b/packages/localizations/src/id-ID.ts
index a4cc0a5f777..baa2a9116a8 100644
--- a/packages/localizations/src/id-ID.ts
+++ b/packages/localizations/src/id-ID.ts
@@ -130,6 +130,8 @@ export const idID: LocalizationResource = {
     },
     membersPage: {
       action__invite: 'Undang',
+      action__search: undefined,
+      action__search_minLength: undefined,
       activeMembersTab: {
         menuAction__remove: 'Hapus anggota',
         tableHeader__actions: undefined,
@@ -869,6 +871,7 @@ export const idID: LocalizationResource = {
       passkeysSection: {
         menuAction__destructive: undefined,
         menuAction__rename: undefined,
+        primaryButton: undefined,
         title: undefined,
       },
       passwordSection: {
diff --git a/packages/localizations/src/is-IS.ts b/packages/localizations/src/is-IS.ts
index bd533ecec5a..ae181c11df1 100644
--- a/packages/localizations/src/is-IS.ts
+++ b/packages/localizations/src/is-IS.ts
@@ -131,6 +131,7 @@ export const isIS: LocalizationResource = {
     membersPage: {
       action__invite: 'Bjóða',
       action__search: undefined,
+      action__search_minLength: undefined,
       activeMembersTab: {
         menuAction__remove: 'Fjarlægja meðlim',
         tableHeader__actions: undefined,
@@ -876,6 +877,7 @@ export const isIS: LocalizationResource = {
       passkeysSection: {
         menuAction__destructive: 'Fjarlægja',
         menuAction__rename: 'Endurnefna',
+        primaryButton: undefined,
         title: 'Lyklar',
       },
       passwordSection: {
diff --git a/packages/localizations/src/it-IT.ts b/packages/localizations/src/it-IT.ts
index e1c03b93799..51308c9af20 100644
--- a/packages/localizations/src/it-IT.ts
+++ b/packages/localizations/src/it-IT.ts
@@ -131,6 +131,7 @@ export const itIT: LocalizationResource = {
     membersPage: {
       action__invite: 'Invita',
       action__search: undefined,
+      action__search_minLength: undefined,
       activeMembersTab: {
         menuAction__remove: 'Rimuovi membro',
         tableHeader__actions: 'Azioni',
@@ -873,6 +874,7 @@ export const itIT: LocalizationResource = {
       passkeysSection: {
         menuAction__destructive: 'Rimuovi chiave di accesso',
         menuAction__rename: 'Rinomina chiave di accesso',
+        primaryButton: undefined,
         title: 'Gestisci le tue chiavi di accesso',
       },
       passwordSection: {
diff --git a/packages/localizations/src/ja-JP.ts b/packages/localizations/src/ja-JP.ts
index d75789d4f6a..c5b54e5017c 100644
--- a/packages/localizations/src/ja-JP.ts
+++ b/packages/localizations/src/ja-JP.ts
@@ -130,6 +130,7 @@ export const jaJP: LocalizationResource = {
     membersPage: {
       action__invite: '招待',
       action__search: undefined,
+      action__search_minLength: undefined,
       activeMembersTab: {
         menuAction__remove: 'メンバーの削除',
         tableHeader__actions: undefined,
@@ -865,6 +866,7 @@ export const jaJP: LocalizationResource = {
       passkeysSection: {
         menuAction__destructive: undefined,
         menuAction__rename: undefined,
+        primaryButton: undefined,
         title: undefined,
       },
       passwordSection: {
diff --git a/packages/localizations/src/ko-KR.ts b/packages/localizations/src/ko-KR.ts
index 87cde26dfd3..e4162be817b 100644
--- a/packages/localizations/src/ko-KR.ts
+++ b/packages/localizations/src/ko-KR.ts
@@ -130,6 +130,7 @@ export const koKR: LocalizationResource = {
     membersPage: {
       action__invite: '초대',
       action__search: undefined,
+      action__search_minLength: undefined,
       activeMembersTab: {
         menuAction__remove: '회원 제거',
         tableHeader__actions: undefined,
@@ -856,6 +857,7 @@ export const koKR: LocalizationResource = {
       passkeysSection: {
         menuAction__destructive: undefined,
         menuAction__rename: undefined,
+        primaryButton: undefined,
         title: undefined,
       },
       passwordSection: {
diff --git a/packages/localizations/src/mn-MN.ts b/packages/localizations/src/mn-MN.ts
index 6532ac5a985..d0f3a6fe7f3 100644
--- a/packages/localizations/src/mn-MN.ts
+++ b/packages/localizations/src/mn-MN.ts
@@ -131,6 +131,7 @@ export const mnMN: LocalizationResource = {
     membersPage: {
       action__invite: 'Урих',
       action__search: undefined,
+      action__search_minLength: undefined,
       activeMembersTab: {
         menuAction__remove: 'Гишүүнийг хасах',
         tableHeader__actions: undefined,
@@ -871,6 +872,7 @@ export const mnMN: LocalizationResource = {
       passkeysSection: {
         menuAction__destructive: undefined,
         menuAction__rename: undefined,
+        primaryButton: undefined,
         title: undefined,
       },
       passwordSection: {
diff --git a/packages/localizations/src/nb-NO.ts b/packages/localizations/src/nb-NO.ts
index 6a0615e2d0e..a5861db5c7c 100644
--- a/packages/localizations/src/nb-NO.ts
+++ b/packages/localizations/src/nb-NO.ts
@@ -130,6 +130,7 @@ export const nbNO: LocalizationResource = {
     membersPage: {
       action__invite: 'Inviter',
       action__search: undefined,
+      action__search_minLength: undefined,
       activeMembersTab: {
         menuAction__remove: 'Fjern medlem',
         tableHeader__actions: undefined,
@@ -870,6 +871,7 @@ export const nbNO: LocalizationResource = {
       passkeysSection: {
         menuAction__destructive: undefined,
         menuAction__rename: undefined,
+        primaryButton: undefined,
         title: undefined,
       },
       passwordSection: {
diff --git a/packages/localizations/src/nl-BE.ts b/packages/localizations/src/nl-BE.ts
index 3fd580e34dd..7b0919ed4cb 100644
--- a/packages/localizations/src/nl-BE.ts
+++ b/packages/localizations/src/nl-BE.ts
@@ -129,6 +129,8 @@ export const nlBE: LocalizationResource = {
     },
     membersPage: {
       action__invite: 'Uitnodigen',
+      action__search: undefined,
+      action__search_minLength: undefined,
       activeMembersTab: {
         menuAction__remove: 'Verwijder lid',
         tableHeader__actions: 'Acties',
@@ -866,6 +868,7 @@ export const nlBE: LocalizationResource = {
       passkeysSection: {
         menuAction__destructive: 'Verwijderen',
         menuAction__rename: 'Hernoemen',
+        primaryButton: undefined,
         title: 'Passkeys',
       },
       passwordSection: {
diff --git a/packages/localizations/src/nl-NL.ts b/packages/localizations/src/nl-NL.ts
index b8748e1f22b..d47e9c03f32 100644
--- a/packages/localizations/src/nl-NL.ts
+++ b/packages/localizations/src/nl-NL.ts
@@ -130,6 +130,7 @@ export const nlNL: LocalizationResource = {
     membersPage: {
       action__invite: 'Uitnodigen',
       action__search: undefined,
+      action__search_minLength: undefined,
       activeMembersTab: {
         menuAction__remove: 'Verwijder lid',
         tableHeader__actions: 'Acties',
@@ -867,6 +868,7 @@ export const nlNL: LocalizationResource = {
       passkeysSection: {
         menuAction__destructive: 'Verwijderen',
         menuAction__rename: 'Hernoemen',
+        primaryButton: undefined,
         title: 'Passkeys',
       },
       passwordSection: {
diff --git a/packages/localizations/src/pl-PL.ts b/packages/localizations/src/pl-PL.ts
index 5b10ec25710..7b09d80eeda 100644
--- a/packages/localizations/src/pl-PL.ts
+++ b/packages/localizations/src/pl-PL.ts
@@ -130,6 +130,7 @@ export const plPL: LocalizationResource = {
     membersPage: {
       action__invite: 'Zaproś',
       action__search: undefined,
+      action__search_minLength: undefined,
       activeMembersTab: {
         menuAction__remove: 'Usuń użytkownika',
         tableHeader__actions: undefined,
@@ -875,6 +876,7 @@ export const plPL: LocalizationResource = {
       passkeysSection: {
         menuAction__destructive: 'Usuń',
         menuAction__rename: 'Zmień nazwę',
+        primaryButton: undefined,
         title: 'Klucze dostępu',
       },
       passwordSection: {
diff --git a/packages/localizations/src/pt-BR.ts b/packages/localizations/src/pt-BR.ts
index b9c5bc3071f..76fc44ea396 100644
--- a/packages/localizations/src/pt-BR.ts
+++ b/packages/localizations/src/pt-BR.ts
@@ -130,6 +130,7 @@ export const ptBR: LocalizationResource = {
     membersPage: {
       action__invite: 'Convidar',
       action__search: 'Pesquisar',
+      action__search_minLength: undefined,
       activeMembersTab: {
         menuAction__remove: 'Remover membro',
         tableHeader__actions: 'Ações',
@@ -877,6 +878,7 @@ export const ptBR: LocalizationResource = {
       passkeysSection: {
         menuAction__destructive: 'Remover',
         menuAction__rename: 'Renomear',
+        primaryButton: undefined,
         title: 'Chaves de acesso',
       },
       passwordSection: {
diff --git a/packages/localizations/src/pt-PT.ts b/packages/localizations/src/pt-PT.ts
index 7b250199275..c357372b712 100644
--- a/packages/localizations/src/pt-PT.ts
+++ b/packages/localizations/src/pt-PT.ts
@@ -129,6 +129,7 @@ export const ptPT: LocalizationResource = {
     membersPage: {
       action__invite: 'Convidar',
       action__search: 'Pesquisar',
+      action__search_minLength: undefined,
       activeMembersTab: {
         menuAction__remove: 'Remover membro',
         tableHeader__actions: 'Ações',
@@ -868,6 +869,7 @@ export const ptPT: LocalizationResource = {
       passkeysSection: {
         menuAction__destructive: 'Remover chave de acesso',
         menuAction__rename: 'Renomear chave de acesso',
+        primaryButton: undefined,
         title: 'Chaves de Acesso',
       },
       passwordSection: {
diff --git a/packages/localizations/src/ro-RO.ts b/packages/localizations/src/ro-RO.ts
index 9626ab46e92..82600f01dbd 100644
--- a/packages/localizations/src/ro-RO.ts
+++ b/packages/localizations/src/ro-RO.ts
@@ -132,6 +132,7 @@ export const roRO: LocalizationResource = {
     membersPage: {
       action__invite: 'Invitați',
       action__search: undefined,
+      action__search_minLength: undefined,
       activeMembersTab: {
         menuAction__remove: 'Îndepărtați membrul',
         tableHeader__actions: undefined,
@@ -878,6 +879,7 @@ export const roRO: LocalizationResource = {
       passkeysSection: {
         menuAction__destructive: undefined,
         menuAction__rename: undefined,
+        primaryButton: undefined,
         title: undefined,
       },
       passwordSection: {
diff --git a/packages/localizations/src/ru-RU.ts b/packages/localizations/src/ru-RU.ts
index 755131d20de..0a90ab24c4d 100644
--- a/packages/localizations/src/ru-RU.ts
+++ b/packages/localizations/src/ru-RU.ts
@@ -134,6 +134,7 @@ export const ruRU: LocalizationResource = {
     membersPage: {
       action__invite: 'Пригласить',
       action__search: undefined,
+      action__search_minLength: undefined,
       activeMembersTab: {
         menuAction__remove: 'Удалить участника',
         tableHeader__actions: 'Действия',
@@ -887,6 +888,7 @@ export const ruRU: LocalizationResource = {
       passkeysSection: {
         menuAction__destructive: 'Удалить',
         menuAction__rename: 'Переименовать',
+        primaryButton: undefined,
         title: 'Ключи доступа',
       },
       passwordSection: {
diff --git a/packages/localizations/src/sk-SK.ts b/packages/localizations/src/sk-SK.ts
index 8a5dd644bb2..69bc97dcb56 100644
--- a/packages/localizations/src/sk-SK.ts
+++ b/packages/localizations/src/sk-SK.ts
@@ -130,6 +130,7 @@ export const skSK: LocalizationResource = {
     membersPage: {
       action__invite: 'Pozvať',
       action__search: undefined,
+      action__search_minLength: undefined,
       activeMembersTab: {
         menuAction__remove: 'Odstrániť člena',
         tableHeader__actions: undefined,
@@ -866,6 +867,7 @@ export const skSK: LocalizationResource = {
       passkeysSection: {
         menuAction__destructive: undefined,
         menuAction__rename: undefined,
+        primaryButton: undefined,
         title: undefined,
       },
       passwordSection: {
diff --git a/packages/localizations/src/sr-RS.ts b/packages/localizations/src/sr-RS.ts
index 28da32d90a4..e2d9f3b0b4a 100644
--- a/packages/localizations/src/sr-RS.ts
+++ b/packages/localizations/src/sr-RS.ts
@@ -130,6 +130,7 @@ export const srRS: LocalizationResource = {
     membersPage: {
       action__invite: 'Pozovi',
       action__search: undefined,
+      action__search_minLength: undefined,
       activeMembersTab: {
         menuAction__remove: 'Ukloni člana',
         tableHeader__actions: undefined,
@@ -869,6 +870,7 @@ export const srRS: LocalizationResource = {
       passkeysSection: {
         menuAction__destructive: 'Ukloni',
         menuAction__rename: 'Preimenuj',
+        primaryButton: undefined,
         title: 'Ključevi za prolaz',
       },
       passwordSection: {
diff --git a/packages/localizations/src/sv-SE.ts b/packages/localizations/src/sv-SE.ts
index 615bea054f4..0f1e6de18d8 100644
--- a/packages/localizations/src/sv-SE.ts
+++ b/packages/localizations/src/sv-SE.ts
@@ -130,6 +130,7 @@ export const svSE: LocalizationResource = {
     membersPage: {
       action__invite: 'Bjud in',
       action__search: undefined,
+      action__search_minLength: undefined,
       activeMembersTab: {
         menuAction__remove: 'Ta bort medlem',
         tableHeader__actions: 'Åtgärder',
@@ -871,6 +872,7 @@ export const svSE: LocalizationResource = {
       passkeysSection: {
         menuAction__destructive: 'Ta bort',
         menuAction__rename: 'Byt namn',
+        primaryButton: undefined,
         title: 'Passkeys',
       },
       passwordSection: {
diff --git a/packages/localizations/src/th-TH.ts b/packages/localizations/src/th-TH.ts
index 3364ac100fd..c465e99eee2 100644
--- a/packages/localizations/src/th-TH.ts
+++ b/packages/localizations/src/th-TH.ts
@@ -130,6 +130,7 @@ export const thTH: LocalizationResource = {
     membersPage: {
       action__invite: 'เชิญ',
       action__search: undefined,
+      action__search_minLength: undefined,
       activeMembersTab: {
         menuAction__remove: 'ลบสมาชิก',
         tableHeader__actions: 'การดำเนินการ',
@@ -863,6 +864,7 @@ export const thTH: LocalizationResource = {
       passkeysSection: {
         menuAction__destructive: 'ลบ',
         menuAction__rename: 'เปลี่ยนชื่อ',
+        primaryButton: undefined,
         title: 'พาสคีย์',
       },
       passwordSection: {
diff --git a/packages/localizations/src/tr-TR.ts b/packages/localizations/src/tr-TR.ts
index 9729f45c595..c3eab271341 100644
--- a/packages/localizations/src/tr-TR.ts
+++ b/packages/localizations/src/tr-TR.ts
@@ -130,6 +130,7 @@ export const trTR: LocalizationResource = {
     membersPage: {
       action__invite: 'Davet et',
       action__search: undefined,
+      action__search_minLength: undefined,
       activeMembersTab: {
         menuAction__remove: 'Üyeyi kaldır',
         tableHeader__actions: undefined,
@@ -871,6 +872,7 @@ export const trTR: LocalizationResource = {
       passkeysSection: {
         menuAction__destructive: 'Kaldır',
         menuAction__rename: 'Yeniden Adlandır',
+        primaryButton: undefined,
         title: 'Geçiş Anahtarları',
       },
       passwordSection: {
diff --git a/packages/localizations/src/uk-UA.ts b/packages/localizations/src/uk-UA.ts
index dc025266881..035d3ca1f3a 100644
--- a/packages/localizations/src/uk-UA.ts
+++ b/packages/localizations/src/uk-UA.ts
@@ -130,6 +130,7 @@ export const ukUA: LocalizationResource = {
     membersPage: {
       action__invite: 'Запросити',
       action__search: undefined,
+      action__search_minLength: undefined,
       activeMembersTab: {
         menuAction__remove: 'Видалити учасника',
         tableHeader__actions: undefined,
@@ -867,6 +868,7 @@ export const ukUA: LocalizationResource = {
       passkeysSection: {
         menuAction__destructive: undefined,
         menuAction__rename: undefined,
+        primaryButton: undefined,
         title: undefined,
       },
       passwordSection: {
diff --git a/packages/localizations/src/vi-VN.ts b/packages/localizations/src/vi-VN.ts
index 89c1578966a..a556a3d8c57 100644
--- a/packages/localizations/src/vi-VN.ts
+++ b/packages/localizations/src/vi-VN.ts
@@ -130,6 +130,7 @@ export const viVN: LocalizationResource = {
     membersPage: {
       action__invite: 'Mời',
       action__search: undefined,
+      action__search_minLength: undefined,
       activeMembersTab: {
         menuAction__remove: 'Gỡ bỏ thành viên',
         tableHeader__actions: undefined,
@@ -867,6 +868,7 @@ export const viVN: LocalizationResource = {
       passkeysSection: {
         menuAction__destructive: undefined,
         menuAction__rename: undefined,
+        primaryButton: undefined,
         title: undefined,
       },
       passwordSection: {
diff --git a/packages/localizations/src/zh-CN.ts b/packages/localizations/src/zh-CN.ts
index 0d206eb3cf4..c2c70209d0f 100644
--- a/packages/localizations/src/zh-CN.ts
+++ b/packages/localizations/src/zh-CN.ts
@@ -127,6 +127,7 @@ export const zhCN: LocalizationResource = {
     membersPage: {
       action__invite: '邀请',
       action__search: undefined,
+      action__search_minLength: undefined,
       activeMembersTab: {
         menuAction__remove: '移除成员',
         tableHeader__actions: undefined,
@@ -841,6 +842,7 @@ export const zhCN: LocalizationResource = {
       passkeysSection: {
         menuAction__destructive: undefined,
         menuAction__rename: undefined,
+        primaryButton: undefined,
         title: undefined,
       },
       passwordSection: {
diff --git a/packages/localizations/src/zh-TW.ts b/packages/localizations/src/zh-TW.ts
index 6b5804f5461..09768a2bddf 100644
--- a/packages/localizations/src/zh-TW.ts
+++ b/packages/localizations/src/zh-TW.ts
@@ -129,6 +129,7 @@ export const zhTW: LocalizationResource = {
     membersPage: {
       action__invite: '邀請',
       action__search: undefined,
+      action__search_minLength: undefined,
       activeMembersTab: {
         menuAction__remove: '移除成員',
         tableHeader__actions: undefined,
@@ -851,6 +852,7 @@ export const zhTW: LocalizationResource = {
       passkeysSection: {
         menuAction__destructive: undefined,
         menuAction__rename: undefined,
+        primaryButton: undefined,
         title: undefined,
       },
       passwordSection: {
diff --git a/packages/types/src/localization.ts b/packages/types/src/localization.ts
index d19932cbee1..286155408d8 100644
--- a/packages/types/src/localization.ts
+++ b/packages/types/src/localization.ts
@@ -761,6 +761,7 @@ type _LocalizationResource = {
       detailsTitle__emptyRow: LocalizationValue;
       action__invite: LocalizationValue;
       action__search: LocalizationValue;
+      action__search_minLength: LocalizationValue;
       start: {
         headerTitle__members: LocalizationValue;
         headerTitle__invitations: LocalizationValue;

From 5e1bc35446a1eee2e40b001cfaaa5e351375dd1c Mon Sep 17 00:00:00 2001
From: Laura Beatris <48022589+LauraBeatris@users.noreply.github.com>
Date: Fri, 14 Feb 2025 07:59:54 -0300
Subject: [PATCH 05/11] Leverage input value state from field control

---
 .../OrganizationProfile/MembersSearch.tsx           | 13 ++++---------
 .../OrganizationProfile/OrganizationMembers.tsx     |  2 --
 2 files changed, 4 insertions(+), 11 deletions(-)

diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/MembersSearch.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/MembersSearch.tsx
index e95e734260c..af8e2b26e70 100644
--- a/packages/clerk-js/src/ui/components/OrganizationProfile/MembersSearch.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationProfile/MembersSearch.tsx
@@ -16,10 +16,6 @@ type MembersSearchProps = {
    * Controlled query param state by parent component
    */
   query: GetMembersParams['query'];
-  /**
-   * Controlled input field value by parent component
-   */
-  value: string;
   /**
    * Paginated organization memberships
    */
@@ -38,18 +34,18 @@ type MembersSearchProps = {
   minLength: number;
 };
 
-export const MembersSearch = ({ value, memberships, onSearchChange, onQueryChange, minLength }: MembersSearchProps) => {
+export const MembersSearch = ({ memberships, onQueryChange, minLength }: MembersSearchProps) => {
   const { t } = useLocalizations();
   const searchField = useFormControl('search', '', {
     type: 'search',
     label: '',
     placeholder: localizationKeys('organizationProfile.membersPage.action__search'),
   });
-  const query = useDebounce(value, 600);
+  const query = useDebounce(searchField.value, 600);
 
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const eventValue = event.target.value;
-    onSearchChange(eventValue);
+    searchField.onChange(event);
 
     if (eventValue.length < minLength) {
       searchField.setInfo(t(localizationKeys('organizationProfile.membersPage.action__search_minLength')));
@@ -76,7 +72,7 @@ export const MembersSearch = ({ value, memberships, onSearchChange, onQueryChang
     }
   }, [query, memberships]);
 
-  const isFetchingNewData = value && !!memberships?.isLoading && !!memberships.data?.length;
+  const isFetchingNewData = searchField.value && !!memberships?.isLoading && !!memberships.data?.length;
 
   return (
     <Flex
@@ -86,7 +82,6 @@ export const MembersSearch = ({ value, memberships, onSearchChange, onQueryChang
       <Field.Root {...searchField}>
         <InputWithIcon
           {...searchField.props}
-          value={value}
           type='search'
           autoCapitalize='none'
           spellCheck={false}
diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationMembers.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationMembers.tsx
index 1cf6a972a25..46a2fdcd780 100644
--- a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationMembers.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationMembers.tsx
@@ -36,7 +36,6 @@ export const OrganizationMembers = withCardStateProvider(() => {
   const isDomainsEnabled = organizationSettings?.domains?.enabled && canManageMemberships;
 
   const [query, setQuery] = useState('');
-  const [search, setSearch] = useState('');
 
   const { membershipRequests, memberships, invitations } = useOrganization({
     membershipRequests: isDomainsEnabled || undefined,
@@ -143,7 +142,6 @@ export const OrganizationMembers = withCardStateProvider(() => {
                           <MembersSearch
                             minLength={MEMBERS_SEARCH_QUERY_MIN_LENGTH}
                             query={query}
-                            value={search}
                             memberships={memberships}
                             onSearchChange={query => setSearch(query)}
                             onQueryChange={query => setQuery(query)}

From e295d164b70d03339a5bc98a31318cd62fcdc8b3 Mon Sep 17 00:00:00 2001
From: Laura Beatris <48022589+LauraBeatris@users.noreply.github.com>
Date: Fri, 14 Feb 2025 08:06:27 -0300
Subject: [PATCH 06/11] Update changeset

---
 .changeset/tricky-spiders-jog.md                              | 4 +++-
 .../src/ui/components/OrganizationProfile/MembersSearch.tsx   | 4 ----
 .../ui/components/OrganizationProfile/OrganizationMembers.tsx | 1 -
 3 files changed, 3 insertions(+), 6 deletions(-)

diff --git a/.changeset/tricky-spiders-jog.md b/.changeset/tricky-spiders-jog.md
index cedd1886e51..0b3797d3c7a 100644
--- a/.changeset/tricky-spiders-jog.md
+++ b/.changeset/tricky-spiders-jog.md
@@ -1,5 +1,7 @@
 ---
-'@clerk/clerk-js': patch
+'@clerk/clerk-js': minor
+'@clerk/types': minor
+'@clerk/localizations': minor
 ---
 
 Introduce minimum length for organization memberships search
diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/MembersSearch.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/MembersSearch.tsx
index af8e2b26e70..6c2f03e5f00 100644
--- a/packages/clerk-js/src/ui/components/OrganizationProfile/MembersSearch.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationProfile/MembersSearch.tsx
@@ -20,10 +20,6 @@ type MembersSearchProps = {
    * Paginated organization memberships
    */
   memberships: ReturnType<typeof useOrganization>['memberships'];
-  /**
-   * Handler for change event on input field
-   */
-  onSearchChange: (value: string) => void;
   /**
    * Handler for `query` value changes
    */
diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationMembers.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationMembers.tsx
index 46a2fdcd780..c209efb6c46 100644
--- a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationMembers.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationMembers.tsx
@@ -143,7 +143,6 @@ export const OrganizationMembers = withCardStateProvider(() => {
                             minLength={MEMBERS_SEARCH_QUERY_MIN_LENGTH}
                             query={query}
                             memberships={memberships}
-                            onSearchChange={query => setSearch(query)}
                             onQueryChange={query => setQuery(query)}
                           />
                         }

From 700f1a72e2bae143e4ce1af794ba0d3b1b4671da Mon Sep 17 00:00:00 2001
From: Laura Beatris <48022589+LauraBeatris@users.noreply.github.com>
Date: Fri, 14 Feb 2025 12:32:40 -0300
Subject: [PATCH 07/11] Remove state sync with effect

---
 .../OrganizationProfile/MembersSearch.tsx     | 26 ++++++++-----------
 .../OrganizationMembers.tsx                   |  6 +++--
 2 files changed, 15 insertions(+), 17 deletions(-)

diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/MembersSearch.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/MembersSearch.tsx
index 6c2f03e5f00..ff6b9aae851 100644
--- a/packages/clerk-js/src/ui/components/OrganizationProfile/MembersSearch.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationProfile/MembersSearch.tsx
@@ -5,7 +5,6 @@ import { useEffect } from 'react';
 import { descriptors, Flex, Icon, localizationKeys, useLocalizations } from '../../../ui/customizables';
 import { InputWithIcon } from '../../../ui/elements';
 import { Field } from '../../../ui/elements/FieldControl';
-import { useDebounce } from '../../../ui/hooks';
 import { MagnifyingGlass } from '../../../ui/icons';
 import { Spinner } from '../../../ui/primitives';
 import { useFormControl } from '../../../ui/utils';
@@ -21,44 +20,41 @@ type MembersSearchProps = {
    */
   memberships: ReturnType<typeof useOrganization>['memberships'];
   /**
-   * Handler for `query` value changes
+   * Handler for value changes
    */
-  onQueryChange: (query: string) => void;
+  onChange: (query: string) => void;
   /**
    * Minimum search length to trigger query
    */
   minLength: number;
 };
 
-export const MembersSearch = ({ memberships, onQueryChange, minLength }: MembersSearchProps) => {
+export const MembersSearch = ({ memberships, onChange, minLength }: MembersSearchProps) => {
   const { t } = useLocalizations();
   const searchField = useFormControl('search', '', {
     type: 'search',
     label: '',
     placeholder: localizationKeys('organizationProfile.membersPage.action__search'),
   });
-  const query = useDebounce(searchField.value, 600);
 
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const eventValue = event.target.value;
+    const value = event.target.value.trim();
+
     searchField.onChange(event);
+    onChange(value);
 
-    if (eventValue.length < minLength) {
-      searchField.setInfo(t(localizationKeys('organizationProfile.membersPage.action__search_minLength')));
+    if (value.length >= minLength) {
+      searchField.clearFeedback();
       return;
     }
 
-    searchField.clearFeedback();
+    searchField.setInfo(t(localizationKeys('organizationProfile.membersPage.action__search_minLength')));
   };
 
-  useEffect(() => {
-    onQueryChange(query);
-  }, [query, onQueryChange]);
-
   // If search is not performed on a initial page, resets pagination offset
   // based on the response count
   useEffect(() => {
-    if (!query || !memberships?.data) {
+    if (!searchField.value || !memberships?.data) {
       return;
     }
 
@@ -66,7 +62,7 @@ export const MembersSearch = ({ memberships, onQueryChange, minLength }: Members
     if (hasOnePageLeft) {
       memberships?.fetchPage?.(1);
     }
-  }, [query, memberships]);
+  }, [searchField.value, memberships]);
 
   const isFetchingNewData = searchField.value && !!memberships?.isLoading && !!memberships.data?.length;
 
diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationMembers.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationMembers.tsx
index c209efb6c46..994ffb985ca 100644
--- a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationMembers.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationMembers.tsx
@@ -1,6 +1,7 @@
 import { useOrganization } from '@clerk/shared/react';
 import { useState } from 'react';
 
+import { useDebounce } from '../../../ui/hooks';
 import { NotificationCountBadge, useProtect } from '../../common';
 import { useEnvironment, useOrganizationProfileContext } from '../../contexts';
 import { Col, descriptors, Flex, localizationKeys } from '../../customizables';
@@ -36,6 +37,7 @@ export const OrganizationMembers = withCardStateProvider(() => {
   const isDomainsEnabled = organizationSettings?.domains?.enabled && canManageMemberships;
 
   const [query, setQuery] = useState('');
+  const debouncedQuery = useDebounce(query, 600);
 
   const { membershipRequests, memberships, invitations } = useOrganization({
     membershipRequests: isDomainsEnabled || undefined,
@@ -43,7 +45,7 @@ export const OrganizationMembers = withCardStateProvider(() => {
     memberships: canReadMemberships
       ? {
           keepPreviousData: true,
-          query: query && query.length > MEMBERS_SEARCH_QUERY_MIN_LENGTH ? query : undefined,
+          query: query.length >= MEMBERS_SEARCH_QUERY_MIN_LENGTH ? debouncedQuery : undefined,
         }
       : undefined,
   });
@@ -143,7 +145,7 @@ export const OrganizationMembers = withCardStateProvider(() => {
                             minLength={MEMBERS_SEARCH_QUERY_MIN_LENGTH}
                             query={query}
                             memberships={memberships}
-                            onQueryChange={query => setQuery(query)}
+                            onChange={query => setQuery(query)}
                           />
                         }
                       />

From d97e4eb65cc5bd9d814e626c1d7582e2d08c02ad Mon Sep 17 00:00:00 2001
From: Laura Beatris <48022589+LauraBeatris@users.noreply.github.com>
Date: Fri, 14 Feb 2025 12:42:12 -0300
Subject: [PATCH 08/11] Add portuguese translation

---
 packages/localizations/src/pt-BR.ts | 2 +-
 packages/localizations/src/pt-PT.ts | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/localizations/src/pt-BR.ts b/packages/localizations/src/pt-BR.ts
index 76fc44ea396..ad27374216a 100644
--- a/packages/localizations/src/pt-BR.ts
+++ b/packages/localizations/src/pt-BR.ts
@@ -130,7 +130,7 @@ export const ptBR: LocalizationResource = {
     membersPage: {
       action__invite: 'Convidar',
       action__search: 'Pesquisar',
-      action__search_minLength: undefined,
+      action__search_minLength: 'Mínimo de 3 caracteres',
       activeMembersTab: {
         menuAction__remove: 'Remover membro',
         tableHeader__actions: 'Ações',
diff --git a/packages/localizations/src/pt-PT.ts b/packages/localizations/src/pt-PT.ts
index c357372b712..b45d1db7de7 100644
--- a/packages/localizations/src/pt-PT.ts
+++ b/packages/localizations/src/pt-PT.ts
@@ -129,7 +129,7 @@ export const ptPT: LocalizationResource = {
     membersPage: {
       action__invite: 'Convidar',
       action__search: 'Pesquisar',
-      action__search_minLength: undefined,
+      action__search_minLength: 'Mínimo de 3 caracteres',
       activeMembersTab: {
         menuAction__remove: 'Remover membro',
         tableHeader__actions: 'Ações',

From 53abf1660254e645b5c1be3afe6641d6a30aa9dd Mon Sep 17 00:00:00 2001
From: Laura Beatris <48022589+LauraBeatris@users.noreply.github.com>
Date: Fri, 14 Feb 2025 12:45:39 -0300
Subject: [PATCH 09/11] Rename `MembersSearch` to `MembersSearchForm`

---
 .../{MembersSearch.tsx => MembersSearchForm.tsx}   | 14 +++++++-------
 .../OrganizationProfile/OrganizationMembers.tsx    |  4 ++--
 2 files changed, 9 insertions(+), 9 deletions(-)
 rename packages/clerk-js/src/ui/components/OrganizationProfile/{MembersSearch.tsx => MembersSearchForm.tsx} (87%)

diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/MembersSearch.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/MembersSearchForm.tsx
similarity index 87%
rename from packages/clerk-js/src/ui/components/OrganizationProfile/MembersSearch.tsx
rename to packages/clerk-js/src/ui/components/OrganizationProfile/MembersSearchForm.tsx
index ff6b9aae851..ca13b9bb1fe 100644
--- a/packages/clerk-js/src/ui/components/OrganizationProfile/MembersSearch.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationProfile/MembersSearchForm.tsx
@@ -2,12 +2,12 @@ import type { useOrganization } from '@clerk/shared/react';
 import type { GetMembersParams } from '@clerk/types';
 import { useEffect } from 'react';
 
-import { descriptors, Flex, Icon, localizationKeys, useLocalizations } from '../../../ui/customizables';
-import { InputWithIcon } from '../../../ui/elements';
-import { Field } from '../../../ui/elements/FieldControl';
-import { MagnifyingGlass } from '../../../ui/icons';
-import { Spinner } from '../../../ui/primitives';
-import { useFormControl } from '../../../ui/utils';
+import { descriptors, Flex, Icon, localizationKeys, useLocalizations } from '../../customizables';
+import { InputWithIcon } from '../../elements';
+import { Field } from '../../elements/FieldControl';
+import { MagnifyingGlass } from '../../icons';
+import { Spinner } from '../../primitives';
+import { useFormControl } from '../../utils';
 import { ACTIVE_MEMBERS_PAGE_SIZE } from './OrganizationMembers';
 
 type MembersSearchProps = {
@@ -29,7 +29,7 @@ type MembersSearchProps = {
   minLength: number;
 };
 
-export const MembersSearch = ({ memberships, onChange, minLength }: MembersSearchProps) => {
+export const MembersSearchForm = ({ memberships, onChange, minLength }: MembersSearchProps) => {
   const { t } = useLocalizations();
   const searchField = useFormControl('search', '', {
     type: 'search',
diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationMembers.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationMembers.tsx
index 994ffb985ca..030323d1660 100644
--- a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationMembers.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationMembers.tsx
@@ -22,7 +22,7 @@ import { mqu } from '../../styledSystem';
 import { ActiveMembersList } from './ActiveMembersList';
 import { MembersActionsRow } from './MembersActions';
 import { MembershipWidget } from './MembershipWidget';
-import { MembersSearch } from './MembersSearch';
+import { MembersSearchForm } from './MembersSearchForm';
 import { OrganizationMembersTabInvitations } from './OrganizationMembersTabInvitations';
 import { OrganizationMembersTabRequests } from './OrganizationMembersTabRequests';
 
@@ -141,7 +141,7 @@ export const OrganizationMembers = withCardStateProvider(() => {
                     >
                       <MembersActionsRow
                         actionSlot={
-                          <MembersSearch
+                          <MembersSearchForm
                             minLength={MEMBERS_SEARCH_QUERY_MIN_LENGTH}
                             query={query}
                             memberships={memberships}

From 43ab18786098ded473a16b2b47648b92277f67c1 Mon Sep 17 00:00:00 2001
From: Laura Beatris <48022589+LauraBeatris@users.noreply.github.com>
Date: Fri, 14 Feb 2025 13:52:12 -0300
Subject: [PATCH 10/11] Sanitize input props

---
 .../OrganizationProfile/MembersSearchForm.tsx         | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/MembersSearchForm.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/MembersSearchForm.tsx
index ca13b9bb1fe..fb321576804 100644
--- a/packages/clerk-js/src/ui/components/OrganizationProfile/MembersSearchForm.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationProfile/MembersSearchForm.tsx
@@ -2,6 +2,7 @@ import type { useOrganization } from '@clerk/shared/react';
 import type { GetMembersParams } from '@clerk/types';
 import { useEffect } from 'react';
 
+import { sanitizeInputProps } from '../../../ui/primitives/hooks';
 import { descriptors, Flex, Icon, localizationKeys, useLocalizations } from '../../customizables';
 import { InputWithIcon } from '../../elements';
 import { Field } from '../../elements/FieldControl';
@@ -36,6 +37,7 @@ export const MembersSearchForm = ({ memberships, onChange, minLength }: MembersS
     label: '',
     placeholder: localizationKeys('organizationProfile.membersPage.action__search'),
   });
+  const { placeholder, ...inputProps } = sanitizeInputProps(searchField);
 
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const value = event.target.value.trim();
@@ -73,13 +75,16 @@ export const MembersSearchForm = ({ memberships, onChange, minLength }: MembersS
     >
       <Field.Root {...searchField}>
         <InputWithIcon
-          {...searchField.props}
           type='search'
-          autoCapitalize='none'
           spellCheck={false}
           aria-label='Search'
+          autoCapitalize='none'
           minLength={minLength}
+          onFocus={inputProps.onFocus}
+          onBlur={inputProps.onBlur}
+          onChange={handleChange}
           placeholder={t(localizationKeys('organizationProfile.membersPage.action__search'))}
+          elementDescriptor={descriptors.organizationProfileMembersSearchInput}
           leftIcon={
             isFetchingNewData ? (
               <Spinner size='xs' />
@@ -90,8 +95,6 @@ export const MembersSearchForm = ({ memberships, onChange, minLength }: MembersS
               />
             )
           }
-          onChange={handleChange}
-          elementDescriptor={descriptors.organizationProfileMembersSearchInput}
         />
 
         <Field.Feedback />

From c264dc2c284ef9d1f6bbec46e76ba033522d83ed Mon Sep 17 00:00:00 2001
From: Laura Beatris <48022589+LauraBeatris@users.noreply.github.com>
Date: Fri, 14 Feb 2025 13:55:13 -0300
Subject: [PATCH 11/11] Add element descriptor for container

---
 .../src/ui/components/OrganizationProfile/MembersSearchForm.tsx  | 1 +
 packages/clerk-js/src/ui/customizables/elementDescriptors.ts     | 1 +
 packages/types/src/appearance.ts                                 | 1 +
 3 files changed, 3 insertions(+)

diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/MembersSearchForm.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/MembersSearchForm.tsx
index fb321576804..2ec9e11bbb7 100644
--- a/packages/clerk-js/src/ui/components/OrganizationProfile/MembersSearchForm.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationProfile/MembersSearchForm.tsx
@@ -72,6 +72,7 @@ export const MembersSearchForm = ({ memberships, onChange, minLength }: MembersS
     <Flex
       sx={{ minWidth: '50%', position: 'relative' }}
       direction='col'
+      elementDescriptor={descriptors.organizationProfileMembersSearchContainer}
     >
       <Field.Root {...searchField}>
         <InputWithIcon
diff --git a/packages/clerk-js/src/ui/customizables/elementDescriptors.ts b/packages/clerk-js/src/ui/customizables/elementDescriptors.ts
index 3ebc8557552..23124694e04 100644
--- a/packages/clerk-js/src/ui/customizables/elementDescriptors.ts
+++ b/packages/clerk-js/src/ui/customizables/elementDescriptors.ts
@@ -155,6 +155,7 @@ export const APPEARANCE_KEYS = containsAllElementsConfigKeys([
   'organizationSwitcherPopoverActionButtonIcon',
   'organizationSwitcherPopoverFooter',
 
+  'organizationProfileMembersSearchContainer',
   'organizationProfileMembersSearchInputIcon',
   'organizationProfileMembersSearchInput',
 
diff --git a/packages/types/src/appearance.ts b/packages/types/src/appearance.ts
index 73d2e73b487..981a7140fb0 100644
--- a/packages/types/src/appearance.ts
+++ b/packages/types/src/appearance.ts
@@ -277,6 +277,7 @@ export type ElementsConfig = {
   organizationSwitcherPopoverActionButtonIcon: WithOptions<'manageOrganization' | 'createOrganization'>;
   organizationSwitcherPopoverFooter: WithOptions;
 
+  organizationProfileMembersSearchContainer: WithOptions;
   organizationProfileMembersSearchInputIcon: WithOptions;
   organizationProfileMembersSearchInput: WithOptions;