@wix/patterns 1.434.0 → 1.437.0

package/src/components/CmsFieldManagement/CmsFieldModal.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CmsFieldModal1471165315";
+var _namespace_ = "CmsFieldModal1547597840";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"CmsFieldModal1471165315__root","modal":"CmsFieldModal1471165315__modal"};
+export var classes = {"root":"CmsFieldModal1547597840__root","modal":"CmsFieldModal1547597840__modal"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CmsFieldManagement/Sections/ValidationAndDefaultsSection.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "ValidationAndDefaultsSection3796101284";
+var _namespace_ = "ValidationAndDefaultsSection2817891564";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"ValidationAndDefaultsSection3796101284__root","accordionWrapper":"ValidationAndDefaultsSection3796101284__accordionWrapper"};
+export var classes = {"root":"ValidationAndDefaultsSection2817891564__root","accordionWrapper":"ValidationAndDefaultsSection2817891564__accordionWrapper"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CmsFieldManagement/formFields/CharactersLimitInput.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "CharactersLimitInput1565385755";
+var _namespace_ = "CharactersLimitInput156194071";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"CharactersLimitInput1565385755__root","field":"CharactersLimitInput1565385755__field"};
+export var classes = {"root":"CharactersLimitInput156194071__root","field":"CharactersLimitInput156194071__field"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/Collapse/Collapse.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "Collapse2393188252";
+var _namespace_ = "Collapse2872591563";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"Collapse2393188252__root","exit":"Collapse2393188252__exit"};
+export var classes = {"root":"Collapse2872591563__root","exit":"Collapse2872591563__exit"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionPageNew/CollectionPage.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionPage2115536449";
+var _namespace_ = "CollectionPage3588957475";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"CollectionPage2115536449__root"};
+export var classes = {"root":"CollectionPage3588957475__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionSectionHeader/CollectionSectionHeader.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionSectionHeader3526530237";
+var _namespace_ = "CollectionSectionHeader819861804";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"CollectionSectionHeader3526530237__root","summaryIcon":"CollectionSectionHeader3526530237__summaryIcon"};
+export var classes = {"root":"CollectionSectionHeader819861804__root","summaryIcon":"CollectionSectionHeader819861804__summaryIcon"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionTable/CollectionTable.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionTable2481738602";
+var _namespace_ = "CollectionTable3005289616";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"CollectionTable2481738602__root"};
+export var classes = {"root":"CollectionTable3005289616__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionTable/CollectionTableWSRTable.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionTableWSRTable3520584632";
+var _namespace_ = "CollectionTableWSRTable923856083";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"CollectionTableWSRTable3520584632__root"};
+export var classes = {"root":"CollectionTableWSRTable923856083__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionToolbar/CollectionToolbar.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionToolbar3918320737";
+var _namespace_ = "CollectionToolbar1135144868";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"CollectionToolbar3918320737__root","right":"CollectionToolbar3918320737__right","left":"CollectionToolbar3918320737__left","fullWidth":"CollectionToolbar3918320737__fullWidth"};
+export var classes = {"root":"CollectionToolbar1135144868__root","right":"CollectionToolbar1135144868__right","left":"CollectionToolbar1135144868__left","fullWidth":"CollectionToolbar1135144868__fullWidth"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionToolbar/SearchOrCustomFilter.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SearchOrCustomFilter33704318";
+var _namespace_ = "SearchOrCustomFilter2288498038";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"SearchOrCustomFilter33704318__root","search":"SearchOrCustomFilter33704318__search","searchMobile":"SearchOrCustomFilter33704318__searchMobile"};
+export var classes = {"root":"SearchOrCustomFilter2288498038__root","search":"SearchOrCustomFilter2288498038__search","searchMobile":"SearchOrCustomFilter2288498038__searchMobile"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionViewsDropdown/AutoCompleteReadonly.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "AutoCompleteReadonly257985153";
+var _namespace_ = "AutoCompleteReadonly1062036205";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"AutoCompleteReadonly257985153__root"};
+export var classes = {"root":"AutoCompleteReadonly1062036205__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionViewsDropdown/ViewsDropdown.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "ViewsDropdown3946390091";
+var _namespace_ = "ViewsDropdown1304636165";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"ViewsDropdown3946390091__root"};
+export var classes = {"root":"ViewsDropdown1304636165__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CustomFieldModal/CustomFieldForm.tsx

@@ -1,61 +1,48 @@
 import React, { useEffect } from 'react';
 import { observer } from 'mobx-react-lite';
 import {
+  Accordion,
   Box,
   Cell,
-  Checkbox,
-  Collapse,
   Divider,
   FloatingNotification,
   FormField,
-  InfoIcon,
   Input,
   Layout,
   Text,
-  TextButton,
 } from '@wix/design-system';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { CustomFieldModalState } from '@wix/bex-core';
-import { CustomFieldTypeDropdown } from './CustomFieldTypeDropdown';
-import {
-  ChevronDown,
-  ChevronUp,
-  InfoCircle,
-} from '@wix/wix-ui-icons-common/lazy';
-import { Trans } from '../Trans';
+import { InfoCircle } from '@wix/wix-ui-icons-common';
+import { StatusAlertFilledSmall } from '@wix/wix-ui-icons-common/lazy';
 import { runInAction } from 'mobx';
+import { CustomFieldTypeDropdown } from './CustomFieldTypeDropdown';
 import { PiiFormFields } from './CustomFieldFormPiiFields';
+import { CustomFieldFormPermissions } from './CustomFieldFormPermissions';
 
 export interface CustomFieldFormProps {
   state: CustomFieldModalState;
 }
 
+/** Cancels the modal's content padding so the section below spans the full width. */
+const fullBleed =
+  'calc(-1 * var(--wds-custom-modal-content-padding-horizontal, 24px))';
+
 export const _CustomFieldForm = (props: CustomFieldFormProps) => {
   const { state } = props;
   const {
     form: {
-      $: {
-        key,
-        type,
-        name,
-        readApps,
-        readUsers,
-        writeApps,
-        writeUsers,
-        containsPii,
-      },
+      $: { key, type, name, containsPii },
     },
     errorToastConfig,
-    disabledFields: { permissions },
     mode,
     settings,
     customFieldModalBiReporter,
     generateUniqueKey,
     setKeyFieldIfNotDirty,
   } = state;
-  const defaultPermissions = state.fieldManagement.fieldModal.permissions;
-  const { reportAdvancedSettingsClick, reportKeyFormFieldChange } =
-    customFieldModalBiReporter;
+  const { fieldModal } = state.fieldManagement;
+  const SettingsSection = state.settingsSection?.Component;
 
   const {
     translate: t,
@@ -92,9 +79,9 @@ export const _CustomFieldForm = (props: CustomFieldFormProps) => {
           />
         </Box>
       )}
-      <Box paddingLeft="SP1" paddingRight="SP1" direction="vertical">
+      <Box direction="vertical">
         <Layout>
-          <Cell span={6}>
+          <Cell span={12}>
             <FormField
               dataHook="custom-field-modal-field-type"
               required
@@ -132,7 +119,38 @@ export const _CustomFieldForm = (props: CustomFieldFormProps) => {
               />
             </FormField>
           </Cell>
-          {state.fieldManagement.fieldModal.supportsPii && (
+          <Cell span={6}>
+            <FormField
+              dataHook="custom-field-modal-field-key"
+              required
+              label={t(
+                'cairo.customFields.addCustomField.modal.advancedSettings.key.title',
+              )}
+              infoContent={
+                mode === 'new'
+                  ? t(
+                      'cairo.customFields.addCustomField.modal.advancedSettings.key.tooltip',
+                    )
+                  : t('cairo.customFields.editCustomField.fieldKey.tooltip')
+              }
+              status={key.hasError ? 'error' : undefined}
+              statusMessage={key.error}
+            >
+              <Input
+                dataHook="custom-field-modal-key"
+                disabled={mode === 'edit'}
+                value={key.value}
+                onChange={(e) => {
+                  key.onChange(e.target.value.toLowerCase());
+                  customFieldModalBiReporter.reportKeyFormFieldChange();
+                }}
+                placeholder={t(
+                  'cairo.customFields.addCustomField.modal.advancedSettings.key.placeholder',
+                )}
+              />
+            </FormField>
+          </Cell>
+          {state.typeSupportsPii && (
             <PiiFormFields
               containsPii={{
                 value: containsPii.value,
@@ -140,230 +158,66 @@ export const _CustomFieldForm = (props: CustomFieldFormProps) => {
               }}
               mode={mode}
               language={language}
+              piiWarning={state.piiWarning}
             />
           )}
         </Layout>
-        <Box marginTop="SP4">
-          <TextButton
-            dataHook="custom-field-modal-settings-button"
-            size="small"
-            suffixIcon={settings.isOn ? <ChevronUp /> : <ChevronDown />}
-            onClick={() => settings.toggle()}
+      </Box>
+      {state.showSettings && (
+        <>
+          <Box marginTop="SP4" marginLeft={fullBleed} marginRight={fullBleed}>
+            <Divider />
+          </Box>
+          <Box
+            direction="vertical"
+            marginLeft={fullBleed}
+            marginRight={fullBleed}
           >
-            {t('cairo.customFields.addCustomField.modal.advancedSettings')}
-          </TextButton>
-        </Box>
-        <Collapse
-          open={settings.isOn}
-          onExpandAnimationEnd={() => {
-            reportAdvancedSettingsClick('Open');
-          }}
-          onCollapseAnimationEnd={() => {
-            reportAdvancedSettingsClick('Close');
-          }}
-        >
-          {(!defaultPermissions?.installedApps?.hide ||
-            !defaultPermissions?.siteVisitors?.hide) && (
-            <Box marginTop="SP4" direction="vertical" width="320px">
-              <Text size="small">
-                {t(
-                  'cairo.customFields.addCustomField.modal.advancedSettings.readPermissions',
-                )}
-              </Text>
-              <Text size="tiny" light secondary>
-                {t(
-                  'cairo.customFields.addCustomField.modal.advancedSettings.readPermissions.tooltip',
-                )}
-              </Text>
-            </Box>
-          )}
-          {!defaultPermissions?.installedApps?.hide && (
-            <Box marginTop="SP3" dataHook="custom-field-modal-apps-section">
-              <Layout>
-                <Cell span={4}>
-                  <Box verticalAlign="middle" gap="SP1">
-                    <Text size="small">
-                      {t(
-                        'cairo.customFields.addCustomField.modal.advancedSettings.externalApps',
-                      )}
-                    </Text>
-                    <InfoIcon
-                      size="small"
-                      content={
-                        <Trans i18nKey="cairo.customFields.addCustomField.modal.advancedSettings.externalApps.tooltip" />
-                      }
-                    />
-                  </Box>
-                </Cell>
-                <Cell span={2}>
-                  <Checkbox
-                    dataHook="custom-field-modal-read-apps"
-                    disabled={mode === 'edit' && permissions.read.apps}
-                    size="small"
-                    onChange={() => {
-                      readApps.onChange(!readApps.value);
-                    }}
-                    checked={readApps.value}
-                  >
-                    {t(
-                      'cairo.customFields.addCustomField.modal.advancedSettings.read',
-                    )}
-                  </Checkbox>
-                </Cell>
-                <Cell span={2}>
-                  <Checkbox
-                    dataHook="custom-field-modal-write-apps"
-                    disabled={mode === 'edit' && permissions.write.apps}
-                    size="small"
-                    onChange={() => {
-                      writeApps.onChange(!writeApps.value);
-                    }}
-                    checked={writeApps.value}
-                  >
-                    {t(
-                      'cairo.customFields.addCustomField.modal.advancedSettings.write',
-                    )}
-                  </Checkbox>
-                </Cell>
-              </Layout>
-            </Box>
-          )}
-          {!defaultPermissions?.siteVisitors?.hide && (
-            <>
-              <Box marginTop="SP2" dataHook="custom-field-modal-users-section">
-                <Layout>
-                  <Cell span={4}>
-                    <Box verticalAlign="middle" gap="SP1">
-                      <Text size="small">
-                        {t(
-                          'cairo.customFields.addCustomField.modal.advancedSettings.siteVisitors',
-                        )}
-                      </Text>
-                      <InfoIcon
-                        size="small"
-                        content={
-                          <Trans
-                            i18nKey="cairo.customFields.addCustomField.modal.advancedSettings.siteVisitors.tooltip"
-                            components={{
-                              learnMore: (
-                                <TextButton
-                                  underline="always"
-                                  skin="light"
-                                  size="small"
-                                  as="a"
-                                  rel="noopener"
-                                  target="_blank"
-                                  href={`https://support.wix.com/${language}/article/cms-about-datasets`}
-                                />
-                              ),
-                            }}
-                          />
-                        }
-                      />
-                    </Box>
-                  </Cell>
-                  <Cell span={2}>
-                    <Checkbox
-                      dataHook="custom-field-modal-read-users"
-                      disabled={mode === 'edit' && permissions.read.users}
-                      size="small"
-                      onChange={() => {
-                        readUsers.onChange(!readUsers.value);
-                      }}
-                      checked={readUsers.value}
+            <Accordion
+              dataHook="custom-field-modal-settings-accordion"
+              skin="standard"
+              hideShadow
+              horizontalPadding="large"
+              items={[
+                {
+                  title:
+                    fieldModal.text.settingsLabel ??
+                    t(
+                      'cairo.customFields.addCustomField.modal.advancedSettings',
+                    ),
+                  toggleIconPlacement: 'start',
+                  suffix: state.settingsHasError ? (
+                    <Box
+                      verticalAlign="middle"
+                      color="R10"
+                      dataHook="custom-field-modal-settings-error"
                     >
-                      {t(
-                        'cairo.customFields.addCustomField.modal.advancedSettings.read',
+                      <StatusAlertFilledSmall />
+                    </Box>
+                  ) : undefined,
+                  open: settings.isOn,
+                  onToggle: () => {
+                    settings.toggle();
+                    customFieldModalBiReporter.reportAdvancedSettingsClick(
+                      settings.isOn ? 'Open' : 'Close',
+                    );
+                  },
+                  children: (
+                    <Box direction="vertical" gap="SP4">
+                      {fieldModal.permissions && (
+                        <CustomFieldFormPermissions state={state} />
                       )}
-                    </Checkbox>
-                  </Cell>
-                  <Cell span={2}>
-                    <Checkbox
-                      dataHook="custom-field-modal-write-users"
-                      disabled={mode === 'edit' && permissions.write.users}
-                      size="small"
-                      onChange={() => {
-                        writeUsers.onChange(!writeUsers.value);
-                      }}
-                      checked={writeUsers.value}
-                    >
-                      {t(
-                        'cairo.customFields.addCustomField.modal.advancedSettings.write',
+                      {SettingsSection && (
+                        <SettingsSection fieldType={type.value} />
                       )}
-                    </Checkbox>
-                  </Cell>
-                </Layout>
-              </Box>
-              <Box>
-                <Text size="tiny" light secondary dataHook="permissions-note">
-                  <Trans
-                    i18nKey="cairo.customFields.addCustomField.modal.advancedSettings.siteVisitors.note"
-                    components={{
-                      learnMore: (
-                        <TextButton
-                          size="tiny"
-                          as="a"
-                          rel="noopener"
-                          target="_blank"
-                          href={`https://support.wix.com/${language}/article/content-manager-connecting-elements-to-a-collection-using-a-dataset`}
-                        />
-                      ),
-                    }}
-                  />
-                </Text>
-              </Box>
-            </>
-          )}
-          <Box direction="vertical">
-            <Box marginTop="SP3" marginBottom="SP3">
-              <Divider />
-            </Box>
-
-            <FormField
-              dataHook="custom-field-modal-field-key"
-              required
-              label={t(
-                'cairo.customFields.addCustomField.modal.advancedSettings.key.title',
-              )}
-              status={key.hasError ? 'error' : undefined}
-              statusMessage={key.error}
-            >
-              <Layout>
-                <Cell span={6}>
-                  <Input
-                    dataHook="custom-field-modal-key"
-                    disabled={mode === 'edit'}
-                    value={key.value}
-                    onChange={(e) => {
-                      key.onChange(e.target.value.toLowerCase());
-                      reportKeyFormFieldChange();
-                    }}
-                    placeholder={t(
-                      'cairo.customFields.addCustomField.modal.advancedSettings.key.placeholder',
-                    )}
-                  />
-                </Cell>
-              </Layout>
-            </FormField>
-
-            {!key.hasError && (
-              <Box marginTop="SP1">
-                <Text
-                  size="tiny"
-                  secondary
-                  dataHook="custom-field-modal-fieldKey-tooltip"
-                >
-                  {mode === 'new'
-                    ? t(
-                        'cairo.customFields.addCustomField.modal.advancedSettings.key.tooltip',
-                      )
-                    : t('cairo.customFields.editCustomField.fieldKey.tooltip')}
-                </Text>
-              </Box>
-            )}
+                    </Box>
+                  ),
+                },
+              ]}
+            />
           </Box>
-        </Collapse>
-      </Box>
+        </>
+      )}
     </Box>
   );
 };

package/src/components/CustomFieldModal/{CustomFieldFormV2Permissions.tsx → CustomFieldFormPermissions.tsx}

@@ -13,7 +13,7 @@ import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { CustomFieldModalState } from '@wix/bex-core';
 import { Trans } from '../Trans';
 
-export interface CustomFieldFormV2PermissionsProps {
+export interface CustomFieldFormPermissionsProps {
   state: CustomFieldModalState;
 }
 
@@ -89,8 +89,8 @@ const PermissionRow = ({
   );
 };
 
-export const _CustomFieldFormV2Permissions = (
-  props: CustomFieldFormV2PermissionsProps,
+export const _CustomFieldFormPermissions = (
+  props: CustomFieldFormPermissionsProps,
 ) => {
   const { state } = props;
   const {
@@ -207,6 +207,4 @@ export const _CustomFieldFormV2Permissions = (
   );
 };
 
-export const CustomFieldFormV2Permissions = observer(
-  _CustomFieldFormV2Permissions,
-);
+export const CustomFieldFormPermissions = observer(_CustomFieldFormPermissions);