@wix/patterns 1.430.0 → 1.432.0

package/src/components/CustomFieldModal/CustomFieldFormV2Permissions.tsx

@@ -0,0 +1,212 @@
+import React, { type ReactNode } from 'react';
+import { observer } from 'mobx-react-lite';
+import {
+  Box,
+  Cell,
+  Checkbox,
+  InfoIcon,
+  Layout,
+  Text,
+  TextButton,
+} from '@wix/design-system';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
+import { CustomFieldModalState } from '@wix/bex-core';
+import { Trans } from '../Trans';
+
+export interface CustomFieldFormV2PermissionsProps {
+  state: CustomFieldModalState;
+}
+
+interface PermissionCheckbox {
+  dataHook: string;
+  locked: boolean;
+  checked: boolean;
+  onChange: (value: boolean) => void;
+}
+
+const PermissionCheckboxCell = ({
+  dataHook,
+  locked,
+  checked,
+  onChange,
+  label,
+}: PermissionCheckbox & { label: string }) => (
+  <Cell span={2}>
+    <Checkbox
+      dataHook={dataHook}
+      disabled={locked}
+      size="small"
+      onChange={() => onChange(!checked)}
+      checked={checked}
+    >
+      {label}
+    </Checkbox>
+  </Cell>
+);
+
+interface PermissionRowProps {
+  dataHook: string;
+  label: string;
+  tooltip: ReactNode;
+  read: PermissionCheckbox;
+  write: PermissionCheckbox;
+}
+
+/** One audience: who it is, then its read and write checkboxes. Takes plain
+ *  values, so the observer parent stays the one reading the form fields. */
+const PermissionRow = ({
+  dataHook,
+  label,
+  tooltip,
+  read,
+  write,
+}: PermissionRowProps) => {
+  const { translate: t } = useWixPatternsContainer();
+
+  return (
+    <Box dataHook={dataHook}>
+      <Layout>
+        <Cell span={4}>
+          <Box verticalAlign="middle" gap="SP1">
+            <Text size="small">{label}</Text>
+            <InfoIcon size="small" content={tooltip} />
+          </Box>
+        </Cell>
+        <PermissionCheckboxCell
+          {...read}
+          label={t(
+            'cairo.customFields.addCustomField.modal.advancedSettings.read',
+          )}
+        />
+        <PermissionCheckboxCell
+          {...write}
+          label={t(
+            'cairo.customFields.addCustomField.modal.advancedSettings.write',
+          )}
+        />
+      </Layout>
+    </Box>
+  );
+};
+
+export const _CustomFieldFormV2Permissions = (
+  props: CustomFieldFormV2PermissionsProps,
+) => {
+  const { state } = props;
+  const {
+    form: {
+      $: { readApps, readUsers, writeApps, writeUsers },
+    },
+    disabledFields: { permissions },
+    mode,
+  } = state;
+  const defaultPermissions = state.fieldManagement.permissions;
+
+  const {
+    translate: t,
+    environment: { language },
+  } = useWixPatternsContainer();
+
+  const isEdit = mode === 'edit';
+  const showApps = !defaultPermissions?.installedApps?.hide;
+  const showUsers = !defaultPermissions?.siteVisitors?.hide;
+
+  return (
+    <Box direction="vertical" gap="SP2">
+      {(showApps || showUsers) && (
+        <Box>
+          <Text size="tiny" light secondary>
+            {t(
+              'cairo.customFields.addCustomField.modal.advancedSettings.readPermissions.tooltip',
+            )}
+          </Text>
+        </Box>
+      )}
+      {showApps && (
+        <PermissionRow
+          dataHook="custom-field-modal-apps-section"
+          label={t(
+            'cairo.customFields.addCustomField.modal.advancedSettings.externalApps',
+          )}
+          tooltip={
+            <Trans i18nKey="cairo.customFields.addCustomField.modal.advancedSettings.externalApps.tooltip" />
+          }
+          read={{
+            dataHook: 'custom-field-modal-read-apps',
+            locked: isEdit && permissions.read.apps,
+            checked: readApps.value,
+            onChange: readApps.onChange,
+          }}
+          write={{
+            dataHook: 'custom-field-modal-write-apps',
+            locked: isEdit && permissions.write.apps,
+            checked: writeApps.value,
+            onChange: writeApps.onChange,
+          }}
+        />
+      )}
+      {showUsers && (
+        <>
+          <PermissionRow
+            dataHook="custom-field-modal-users-section"
+            label={t(
+              'cairo.customFields.addCustomField.modal.advancedSettings.siteVisitors',
+            )}
+            tooltip={
+              <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`}
+                    />
+                  ),
+                }}
+              />
+            }
+            read={{
+              dataHook: 'custom-field-modal-read-users',
+              locked: isEdit && permissions.read.users,
+              checked: readUsers.value,
+              onChange: readUsers.onChange,
+            }}
+            write={{
+              dataHook: 'custom-field-modal-write-users',
+              locked: isEdit && permissions.write.users,
+              checked: writeUsers.value,
+              onChange: writeUsers.onChange,
+            }}
+          />
+          <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>
+  );
+};
+
+export const CustomFieldFormV2Permissions = observer(
+  _CustomFieldFormV2Permissions,
+);

package/src/components/CustomFieldModal/CustomFieldModal.tsx

@@ -5,8 +5,21 @@ import { CustomActionModal, MessageActionModal } from '../ActionModal';
 import { CustomFieldForm } from '.';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { CustomFieldModalPrimaryButton } from './CustomFieldModalPrimaryButton';
-import { CustomFieldModalState, Translate } from '@wix/bex-core';
+import {
+  CustomFieldModalState,
+  FieldModalSubtitle,
+  Translate,
+} from '@wix/bex-core';
 import { minimalRequiredWdsRuntimeCheck } from '../../minimalRequiredWdsRuntimeCheck';
+import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
+
+// Lazy so the V2 form (and its subtree) stays out of the main bundle while the
+// flag is off.
+const CustomFieldFormV2 = React.lazy(() =>
+  import(
+    /* webpackChunkName: "CustomFieldFormV2" */ './CustomFieldFormV2'
+  ).then((m) => ({ default: m.CustomFieldFormV2 })),
+);
 
 export const _CustomFieldModal = ({
   state,
@@ -25,6 +38,7 @@ export const _CustomFieldModal = ({
   const {
     translate: t,
     environment: { language },
+    internalExperiments,
   } = useWixPatternsContainer();
 
   const {
@@ -43,19 +57,29 @@ export const _CustomFieldModal = ({
     );
   }
 
+  const { fieldModalText } = state.fieldManagement;
+  const title =
+    mode === 'new' ? fieldModalText.addTitle : fieldModalText.editTitle;
+  const addSubtitle = mode === 'new' ? fieldModalText.addSubtitle : undefined;
+  const useV2Form = internalExperiments?.enabled('newFieldsModal');
+
   return (
     <CustomActionModal
       dataHook="custom-field-modal"
       state={state.modalState}
-      title={
-        mode === 'new'
-          ? t('cairo.customFields.addCustomField.modal.title')
-          : t('cairo.customFields.editCustomField.modal.title')
-      }
+      title={title}
       subtitle={
-        mode === 'new' && <CustomFieldModalSubtitle t={t} language={language} />
+        addSubtitle && <CustomFieldModalSubtitle subtitle={addSubtitle} />
+      }
+      content={
+        useV2Form ? (
+          <React.Suspense fallback={null}>
+            <CustomFieldFormV2 state={state} />
+          </React.Suspense>
+        ) : (
+          <CustomFieldForm state={state} />
+        )
       }
-      content={<CustomFieldForm state={state} />}
       primaryButtonText={
         <CustomFieldModalPrimaryButton
           state={state}
@@ -73,8 +97,10 @@ export const _CustomFieldModal = ({
       secondaryButtonOnClick={() =>
         reportModalEndProcess({ endType: 'Cancel' })
       }
+      showFooterDivider={useV2Form}
+      // V2 has no footnote: whether the toggle row shows is the whole signal.
       footnote={
-        state.fieldManagement.supportsPii ? null : (
+        useV2Form || state.fieldManagement.supportsPii ? null : (
           <Footnote
             language={language}
             reportLearnMoreClick={reportLearnMoreClick}
@@ -99,8 +125,10 @@ const Footnote: React.FC<FootnoteProps> = ({
   reportLearnMoreClick,
   t,
 }) => {
+  const isBmHarmonyTheme = useBmHarmonyTheme();
+
   return (
-    <Text size="small" dataHook="pii-footnote">
+    <Text size={isBmHarmonyTheme ? 'tiny' : 'small'} dataHook="pii-footnote">
       {t('cairo.customFields.addCustomField.modal.PII')}
       &nbsp;
       <a
@@ -116,30 +144,35 @@ const Footnote: React.FC<FootnoteProps> = ({
 };
 
 interface CustomFieldModalSubtitleProps {
-  t: Translate;
-  language: string;
+  subtitle: FieldModalSubtitle;
 }
 
 const CustomFieldModalSubtitle: React.FC<CustomFieldModalSubtitleProps> = ({
-  t,
-  language,
+  subtitle: { text, note, learnMore },
 }) => {
+  const isBmHarmonyTheme = useBmHarmonyTheme();
+  const textSize = isBmHarmonyTheme ? 'small' : 'medium';
+
   return (
     <Box direction="vertical">
-      <Text>{t('cairo.customFields.addCustomField.modal.subtitle')}</Text>
-      <Text>
-        {t('cairo.customFields.addCustomField.modal.subtitle.note')}
-        &nbsp;
-        <TextButton
-          as="a"
-          rel="noopener"
-          target="_blank"
-          href={`https://support.wix.com/${language}/article/about-custom-fields`}
-          dataHook="custom-field-modal-subtitle-learnmore"
-        >
-          {t('cairo.subtitle.learnMore')}
-        </TextButton>
-      </Text>
+      <Text size={textSize}>{text}</Text>
+      {(note || learnMore) && (
+        <Text size={textSize}>
+          {note}
+          {note && learnMore ? ' ' : null}
+          {learnMore && (
+            <TextButton
+              as="a"
+              rel="noopener"
+              target="_blank"
+              href={learnMore.href}
+              dataHook="custom-field-modal-subtitle-learnmore"
+            >
+              {learnMore.label}
+            </TextButton>
+          )}
+        </Text>
+      )}
     </Box>
   );
 };

package/src/components/CustomFieldModal/CustomFieldModal.uni.driver.ts

@@ -1,5 +1,6 @@
 import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
 import {
+  AccordionUniDriver,
   MessageModalLayoutUniDriver,
   DropdownUniDriver,
   FormFieldUniDriver,
@@ -31,6 +32,11 @@ export function CustomFieldModalUniDriver(base: UniDriver, body: UniDriver) {
       body.$('[data-hook="custom-field-modal-settings-button"]'),
       body,
     );
+  const getSettingsAccordion = () =>
+    AccordionUniDriver(
+      body.$('[data-hook="custom-field-modal-settings-accordion"]'),
+      body,
+    );
   const getErrorStateNotification = () =>
     FloatingNotificationUniDriver(
       body.$('[data-hook="custom-field-modal-error-state"]'),
@@ -59,10 +65,19 @@ export function CustomFieldModalUniDriver(base: UniDriver, body: UniDriver) {
       .getSecondaryButtonDriver()
       .then((driver: any) => driver.click());
   const clickAdvancedSettings = () => getSettingsButton().click();
+  const isSettingsVisible = () => getSettingsAccordion().exists();
+  const getSettingsLabel = () => getSettingsAccordion().getItemTitleAt(0);
+  const isSettingsExpanded = () => getSettingsAccordion().isItemExpandedAt(0);
+  const clickSettings = () => getSettingsAccordion().clickItemAt(0);
   const isSubmitting = () => getLoader().exists();
 
   const getFormTypeDriver = () =>
     DropdownUniDriver(body.$('[data-hook="custom-field-modal-type"]'), body);
+  const searchFieldType = (text: string) =>
+    getFormTypeDriver().inputDriver.enterText(text);
+  // Group headers are options too, so their titles come back in this list.
+  const getFieldTypeOptions = () =>
+    getFormTypeDriver().dropdownLayoutDriver.optionsContent();
   const getFormNameDriver = () =>
     InputUniDriver(body.$('[data-hook="custom-field-modal-name"]'), body);
   const getFormKeyDriver = () =>
@@ -234,6 +249,12 @@ export function CustomFieldModalUniDriver(base: UniDriver, body: UniDriver) {
     clickClose,
     clickCancel,
     clickAdvancedSettings,
+    isSettingsVisible,
+    getSettingsLabel,
+    isSettingsExpanded,
+    clickSettings,
+    searchFieldType,
+    getFieldTypeOptions,
     isInstalledAppsSectionVisible: () => getInstalledAppsSection().exists(),
     isSiteVisitorsSectionVisible: () => getSiteVisitorsSection().exists(),
     fillInCustomFieldForm,

package/src/components/CustomFieldModal/CustomFieldTypeDropdownV2.tsx

@@ -0,0 +1,134 @@
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+import {
+  AutoComplete,
+  Box,
+  Input,
+  listItemSectionBuilder,
+  listItemSelectBuilder,
+} from '@wix/design-system';
+import { CustomFieldModalState } from '@wix/bex-core';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
+import { getFieldTypeIcon } from '../../utils/fieldTypePrefixIcons';
+
+export interface CustomFieldTypeDropdownV2Props {
+  state: CustomFieldModalState;
+}
+
+export const _CustomFieldTypeDropdownV2 = (
+  props: CustomFieldTypeDropdownV2Props,
+) => {
+  const {
+    state: {
+      form: {
+        $: { type, name, containsPii },
+      },
+      mode,
+      fieldManagement: { creatableFieldTypes },
+      generateUniqueKey,
+      setKeyFieldIfNotDirty,
+    },
+  } = props;
+
+  const { translate: t } = useWixPatternsContainer();
+
+  const [search, setSearch] = React.useState<string | null>(null);
+  const query = search?.trim().toLowerCase() ?? '';
+
+  const selectedType = creatableFieldTypes.find(
+    (option) => option.id === type.value,
+  );
+
+  const fieldTypeOptions = React.useMemo(() => {
+    const toOption = (option: (typeof creatableFieldTypes)[number]) =>
+      listItemSelectBuilder({
+        dataHook: `custom-field-modal-type-${option.id}`,
+        id: option.id,
+        prefix: (
+          <Box>
+            {getFieldTypeIcon({
+              fieldType: option.patternsType,
+              size: 'medium',
+            })}
+          </Box>
+        ),
+        title: option.label,
+        subtitle: option.subtitle,
+        label: option.label,
+      });
+
+    if (query) {
+      return creatableFieldTypes
+        .filter((option) => option.label.toLowerCase().includes(query))
+        .map(toOption);
+    }
+
+    const groups = creatableFieldTypes.reduce<string[]>((labels, option) => {
+      const label = option.group;
+      if (label && !labels.includes(label)) {
+        labels.push(label);
+      }
+      return labels;
+    }, []);
+
+    if (groups.length === 0) {
+      return creatableFieldTypes.map(toOption);
+    }
+
+    const grouped = groups.flatMap((label) => [
+      listItemSectionBuilder({
+        id: `custom-field-modal-type-group-${label}`,
+        type: 'subheader',
+        title: label,
+      }),
+      ...creatableFieldTypes
+        .filter((option) => option.group === label)
+        .map(toOption),
+    ]);
+    const ungrouped = creatableFieldTypes
+      .filter((option) => !option.group)
+      .map(toOption);
+    return [...grouped, ...ungrouped];
+  }, [creatableFieldTypes, query]);
+
+  return (
+    <AutoComplete
+      dataHook="custom-field-modal-type"
+      disabled={mode === 'edit'}
+      value={search ?? selectedType?.label ?? ''}
+      selectedId={type.value}
+      prefix={
+        search === null && selectedType ? (
+          <Input.IconAffix>
+            {/* WDS paints input affix icons blue; the type icons stay dark. */}
+            <Box color="D10">
+              {getFieldTypeIcon({
+                fieldType: selectedType.patternsType,
+                size: 'medium',
+              })}
+            </Box>
+          </Input.IconAffix>
+        ) : undefined
+      }
+      onChange={(e) => setSearch(e.target.value)}
+      onSelect={({ id }) => {
+        setSearch(null);
+        type.onChange(String(id));
+        // Read off `props.state` — a destructured computed holds the pre-change value.
+        if (!props.state.typeSupportsPii) {
+          containsPii.onChange(false);
+        }
+        setKeyFieldIfNotDirty(generateUniqueKey(name.value));
+      }}
+      onClose={() => setSearch(null)}
+      popoverProps={{ appendTo: 'window', zIndex: 5001 }}
+      placeholder={t(
+        'cairo.customFields.addCustomField.modal.fieldType.placeholder',
+      )}
+      emptyStateMessage={t('cairo.emptyState.subtitle.nothingMatchesCriteria')}
+      options={fieldTypeOptions}
+    />
+  );
+};
+
+export const CustomFieldTypeDropdownV2 = observer(_CustomFieldTypeDropdownV2);

package/src/components/CustomFieldsPanel/FieldManagementModals.tsx

@@ -1,21 +1,16 @@
 import React from 'react';
 import { observer } from 'mobx-react-lite';
-import type { CollectionFieldsSourceState } from '../../state/CollectionFieldsSourceState';
+import type { ManageFieldsSource } from '../../state/ManageFieldsSource';
 import { CustomFieldModal } from '../CustomFieldModal';
 import { ArchiveFieldModal } from './ArchiveFieldModal';
 import { DeleteFieldModal } from './DeleteFieldModal';
 
 /**
  * Renders the field-management modals (add/edit, archive, delete) for any source.
- * The source supplies the modal states on CollectionFieldsSourceState; the modals
- * themselves are the same platform components regardless of which source is behind
- * them.
+ * The source supplies the modal states; the modals themselves are the same
+ * platform components regardless of which source is behind them.
  */
-function _FieldManagementModals({
-  source,
-}: {
-  source: CollectionFieldsSourceState;
-}) {
+function _FieldManagementModals({ source }: { source: ManageFieldsSource }) {
   const { customFieldModal, archiveFieldModal, deleteFieldModal } =
     source.customFieldsPanel;
   return (

package/src/components/CustomFieldsPanel/FieldsSourceAddFieldCTA.tsx

@@ -2,15 +2,13 @@ import React from 'react';
 import { observer } from 'mobx-react-lite';
 import { AddItem, Box, Divider } from '@wix/design-system';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
-import type { CollectionFieldsSourceState } from '../../state/CollectionFieldsSourceState';
+import type { ManageFieldsSource } from '../../state/ManageFieldsSource';
 import { CustomFieldsDisabledHint } from '../CustomFields';
+import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
 
-function _FieldsSourceAddFieldCTA({
-  source,
-}: {
-  source: CollectionFieldsSourceState;
-}) {
+function _FieldsSourceAddFieldCTA({ source }: { source: ManageFieldsSource }) {
   const { translate: t } = useWixPatternsContainer();
+  const isHarmonyTheme = useBmHarmonyTheme();
   const fm = source.fieldsSource.fieldManagement;
 
   if (!fm?.canAddFields) {
@@ -19,7 +17,7 @@ function _FieldsSourceAddFieldCTA({
 
   return (
     <Box direction="vertical" width="100%">
-      <Divider direction="horizontal" />
+      {!isHarmonyTheme && <Divider direction="horizontal" />}
       <Box
         padding="SP4"
         width="100%"

package/src/components/CustomFieldsPanel/ManageFieldsCTAButton.tsx

@@ -5,7 +5,7 @@ import { CustomFieldOrigin, withoutDefaults } from '@wix/bex-core';
 import { observer } from 'mobx-react-lite';
 import { CustomFieldsPanelEntry } from './CustomFieldsPanelEntry';
 import { cairoFiltersPanelUsed } from '@wix/bex-core/bi';
-import { SettingsSmall } from '@wix/wix-ui-icons-common';
+import { SettingsSmall } from '@wix/wix-ui-icons-common/lazy';
 import { CustomFieldsDisabledTooltip } from '../CustomFields';
 
 export interface ManageFieldsCTAButtonProps {

package/src/components/CustomFieldsWidget/ActionButtons.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Box, Button } from '@wix/design-system';
 import { observer } from 'mobx-react-lite';
-import { Add } from '@wix/wix-ui-icons-common';
+import { Add } from '@wix/wix-ui-icons-common/lazy';
 import { CustomFieldsWidgetState } from '../../state';
 import { ManageFieldsCTAButton } from '../CustomFieldsPanel/ManageFieldsCTAButton';
 import { CustomFieldsDisabledTooltip } from '../CustomFields';

package/src/components/CustomFieldsWidget/CustomFieldsViewWidgetSection.tsx

@@ -12,7 +12,7 @@ import React from 'react';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { observer } from 'mobx-react-lite';
 import { FileCardList } from '../FileCard/FileCardList';
-import { getDateWithoutTimezone } from '../../utils/datesUtil';
+import { getDateWithoutTimezone, parseDate } from '../../utils/datesUtil';
 
 interface CustomFieldsViewWidgetSectionProps {
   customFields: CustomField[];
@@ -77,12 +77,18 @@ const _CustomFieldsViewWidgetSection = ({
         const files = Array.isArray(value) ? value : [value];
         return <FileCardList files={files} showDownloadCTA showDetails />;
       }
-      case 'date':
-        newValue = dateFormatters.medium.format(getDateWithoutTimezone(value));
+      // A value that isn't a date renders blank rather than throwing out of
+      // render — see FieldCell's date cases.
+      case 'date': {
+        const date = getDateWithoutTimezone(value);
+        newValue = date ? dateFormatters.medium.format(date) : '';
         break;
-      case 'dateTime':
-        newValue = dateFormatters.mediumTime.format(new Date(value));
+      }
+      case 'dateTime': {
+        const dateTime = parseDate(value);
+        newValue = dateTime ? dateFormatters.mediumTime.format(dateTime) : '';
         break;
+      }
       case 'checkbox':
         newValue = value
           ? t('cairo.customFields.booleanValue.true')

package/src/components/CustomFieldsWidget/CustomFieldsWidgetCard.tsx

@@ -6,7 +6,7 @@ import { Box, Card, InfoIcon } from '@wix/design-system';
 import { Heading } from '../Heading';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { CustomFieldsWidgetContentLazy } from './CustomFieldsWidgetContentLazy';
-import { Refresh } from '@wix/wix-ui-icons-common';
+import { Refresh } from '@wix/wix-ui-icons-common/lazy';
 import { CustomFieldsWidgetProps } from './types';
 import { useWidgetPageStatus } from '../useWidgetPageStatus';
 

package/src/components/CustomFieldsWidget/CustomFieldsWidgetInline.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { observer } from 'mobx-react-lite';
 import type { CustomFieldsWidgetState } from '../../state';
-import { Refresh as RefreshIcon } from '@wix/wix-ui-icons-common';
+import { Refresh as RefreshIcon } from '@wix/wix-ui-icons-common/lazy';
 import { LoadingErrorState } from '../ErrorState';
 import { CustomFieldsWidgetContentLazy } from './CustomFieldsWidgetContentLazy';
 import { CustomFieldsWidgetProps } from './types';

package/src/components/CustomFieldsWidget/ErrorStateContent.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { EmptyState, TextButton } from '@wix/design-system';
 import { observer } from 'mobx-react-lite';
-import { Refresh } from '@wix/wix-ui-icons-common';
+import { Refresh } from '@wix/wix-ui-icons-common/lazy';
 import { CustomFieldsWidgetState } from '../../state';
 import { CustomFieldsViewWidgetState } from '@wix/bex-core';