Added createable selector to embed in AdminX (#18094)

no issue

Added the ability to create new labels for the embed signup form in the
admin-x-settings app. This involved importing a new component and adding
a prop to the `MultiSelect` component, and enabling the prop in the
`EmbedSignupSidebar` component.

apps/admin-x-settings/src/admin-x-ds/global/form/MultiSelect.tsx

@@ -1,3 +1,4 @@
+import CreatableSelect from 'react-select/creatable';
 import Heading from '../Heading';
 import Hint from '../Hint';
 import React, {useId, useMemo} from 'react';
@@ -20,7 +21,8 @@ interface MultiSelectProps {
     placeholder?: string;
     color?: MultiSelectColor
     hint?: string;
-    onChange: (selected: MultiValue<MultiSelectOption>) => void
+    onChange: (selected: MultiValue<MultiSelectOption>) => void;
+    canCreate?: boolean;
 }
 
 const multiValueColor = (color?: MultiSelectColor) => {
@@ -60,6 +62,7 @@ const MultiSelect: React.FC<MultiSelectProps> = ({
     options,
     values,
     onChange,
+    canCreate = false,
     ...props
 }) => {
     const id = useId();
@@ -84,6 +87,33 @@ const MultiSelect: React.FC<MultiSelectProps> = ({
     return (
         <div className='flex flex-col'>
             {title && <Heading htmlFor={id} grey useLabelTag>{title}</Heading>}
+            {
+                canCreate ?
+                    <CreatableSelect
+                        classNames={{
+                            menuList: () => 'z-50',
+                            valueContainer: () => customClasses.valueContainer,
+                            control: () => customClasses.control,
+                            placeholder: () => customClasses.placeHolder,
+                            menu: () => customClasses.menu,
+                            option: () => customClasses.option,
+                            multiValue: ({data}) => customClasses.multiValue(data.color),
+                            noOptionsMessage: () => customClasses.noOptionsMessage,
+                            groupHeading: () => customClasses.groupHeading
+                        }}
+                        closeMenuOnSelect={false}
+                        components={{DropdownIndicator: dropdownIndicatorComponent, Option}}
+                        inputId={id}
+                        isClearable={false}
+                        options={options}
+                        placeholder={placeholder ? placeholder : ''}
+                        value={values}
+                        isMulti
+                        unstyled
+                        onChange={onChange}
+                        {...props}
+                    />
+                    :
                     <ReactSelect
                         classNames={{
                             menuList: () => 'z-50',
@@ -108,6 +138,7 @@ const MultiSelect: React.FC<MultiSelectProps> = ({
                         onChange={onChange}
                         {...props}
                     />
+            }
             {hint && <Hint color={error ? 'red' : ''}>{hint}</Hint>}
         </div>
     );

apps/admin-x-settings/src/components/settings/membership/embedSignup/EmbedSignupSidebar.tsx

@@ -124,6 +124,7 @@ const EmbedSignupSidebar: React.FC<SidebarProps> = ({selectedLayout,
                     }
 
                     <MultiSelect
+                        canCreate={true}
                         hint='Will be applied to all members signing up via this form'
                         options={labelOptions}
                         placeholder='Pick one or more labels (optional)'