@wix/patterns-fields 1.55.0 → 1.59.0

package/src/__tests__/components/reference/form-reference.spec.tsx

@@ -0,0 +1,245 @@
+import '../../../testkit/test-polyfills';
+
+import React from 'react';
+import { act, fireEvent, render, RenderResult } from '@testing-library/react';
+import type { Field } from '@wix/bex-core';
+import { useForm } from '@wix/bex-core/form';
+import type { Control, FieldValues } from '@wix/bex-core/form';
+
+import { PatternsFieldsTestProvider } from '../../../testkit/patterns-fields-test-provider';
+import { isActiveElement } from '../../test-utils/active-element';
+import {
+  FormReference,
+  type FormReferenceItem,
+} from '../../../components/reference/form-reference';
+
+const FIELD: Field = {
+  id: 'owner',
+  displayName: 'Owner',
+  type: 'REFERENCE',
+  referenceMetadata: { referencedCollectionId: 'people' },
+} as Field;
+
+const ITEMS: FormReferenceItem[] = [
+  { id: 'p1', name: 'Ada Lovelace' },
+  { id: 'p2', name: 'Alan Turing' },
+];
+
+const DATA_HOOK = 'reference-field';
+
+interface HarnessProps {
+  field?: Field;
+  initialValue?: Record<string, unknown> | null;
+  items?: FormReferenceItem[];
+  searchValue?: string;
+  onSearch?: (q: string) => void;
+  fixedFooter?: React.ReactNode;
+  onOpenCollection?: () => void;
+}
+
+const Harness = ({
+  field = FIELD,
+  initialValue = null,
+  items = ITEMS,
+  searchValue,
+  onSearch = () => {},
+  fixedFooter,
+  onOpenCollection,
+}: HarnessProps) => {
+  const Inner = () => {
+    const methods = useForm<FieldValues>({
+      mode: 'onChange',
+      defaultValues: { [field.id]: initialValue },
+    });
+    const error = methods.formState.errors[field.id]?.message as
+      | string
+      | undefined;
+    return (
+      <form onSubmit={methods.handleSubmit(() => {})}>
+        <FormReference
+          field={field}
+          value={initialValue}
+          onChange={() => {}}
+          dataHook={DATA_HOOK}
+          formControl={methods.control as Control<FieldValues>}
+          data={{ [field.id]: initialValue }}
+          items={items}
+          idField="_id"
+          displayField="name"
+          searchValue={searchValue}
+          onSearch={onSearch}
+          fixedFooter={fixedFooter}
+          onOpenCollection={onOpenCollection}
+        />
+        <span data-hook="error-out">{error ?? ''}</span>
+        <button type="submit" data-hook="submit" />
+      </form>
+    );
+  };
+  return (
+    <PatternsFieldsTestProvider>
+      <Inner />
+    </PatternsFieldsTestProvider>
+  );
+};
+
+const renderField = (props: HarnessProps = {}): RenderResult =>
+  render(<Harness {...props} />);
+
+const input = (r: RenderResult) =>
+  r.baseElement.querySelector(
+    `[data-hook="reference-input-${FIELD.id}"] input`,
+  ) as HTMLInputElement;
+
+const errorText = (r: RenderResult) =>
+  r.baseElement.querySelector('[data-hook="error-out"]')?.textContent ?? '';
+
+const submit = async (r: RenderResult) => {
+  await act(async () => {
+    fireEvent.click(r.baseElement.querySelector('[data-hook="submit"]')!);
+  });
+};
+
+const requiredField = (): Field =>
+  ({ ...FIELD, validation: { required: true } } as Field);
+
+describe('FormReference', () => {
+  it('renders the field displayName as the label', () => {
+    const r = renderField();
+    expect(
+      r.baseElement.querySelector(`[data-hook="${DATA_HOOK}"]`)?.textContent,
+    ).toContain('Owner');
+  });
+
+  it('shows the selected item label from the form value', () => {
+    const r = renderField({
+      initialValue: { _id: 'p1', name: 'Ada Lovelace' },
+    });
+    expect(input(r).value).toBe('Ada Lovelace');
+  });
+
+  // The label is written when the reference is picked, from the referenced
+  // item's display field. If that field is empty the input must still read as
+  // picked rather than blank.
+  it('falls back to the untitled label when the selected reference has none', () => {
+    const r = renderField({ initialValue: { _id: 'p1', name: '' } });
+    expect(input(r).value).toBeTruthy();
+  });
+
+  it('prefers the caller search value over the selected label', () => {
+    const r = renderField({
+      initialValue: { _id: 'p1', name: 'Ada Lovelace' },
+      searchValue: 'Al',
+    });
+    expect(input(r).value).toBe('Al');
+  });
+
+  it('reports typing to the caller via onSearch', () => {
+    const onSearch = jest.fn();
+    const r = renderField({ onSearch });
+    fireEvent.change(input(r), { target: { value: 'Al' } });
+    expect(onSearch).toHaveBeenCalledWith('Al');
+  });
+
+  describe('dropdown options', () => {
+    const openDropdown = (r: RenderResult) => {
+      fireEvent.focus(input(r));
+      fireEvent.click(input(r));
+    };
+
+    const selectedOptionTitle = () =>
+      document.body
+        .querySelector('[data-hook="list-item-select"][data-selected="true"]')
+        ?.querySelector('[data-hook="list-item-select-title"]')?.textContent;
+
+    // The dropdown tracks its own picks only, so the selection has to be handed
+    // to it — otherwise a value loaded from the entity shows no selected row.
+    it('marks the option held by the form value as selected', () => {
+      const r = renderField({
+        initialValue: { _id: 'p2', name: 'Alan Turing' },
+      });
+      openDropdown(r);
+
+      expect(selectedOptionTitle()).toBe('Alan Turing');
+    });
+
+    it('marks the picked option as selected', () => {
+      const r = renderField();
+      openDropdown(r);
+
+      fireEvent.click(
+        document.body.querySelectorAll('[data-hook="list-item-select"]')[0],
+      );
+      openDropdown(r);
+
+      expect(input(r).value).toBe('Ada Lovelace');
+      expect(selectedOptionTitle()).toBe('Ada Lovelace');
+    });
+  });
+
+  it('marks the field required when validation.required is set', () => {
+    const r = renderField({ field: requiredField() });
+    const asterisk = r.baseElement.querySelector(
+      `[data-hook="${DATA_HOOK}"] [data-hook*="asterisk"]`,
+    );
+    expect(asterisk).toBeTruthy();
+  });
+
+  it('surfaces a required error when submitted empty', async () => {
+    const r = renderField({ field: requiredField(), initialValue: null });
+    await submit(r);
+    expect(errorText(r)).not.toBe('');
+  });
+
+  it('passes validation when a required reference is selected', async () => {
+    const r = renderField({
+      field: requiredField(),
+      initialValue: { _id: 'p1', name: 'Ada Lovelace' },
+    });
+    await submit(r);
+    expect(errorText(r)).toBe('');
+  });
+
+  it('focuses the input when submit is blocked (so the page scrolls to it)', async () => {
+    const r = renderField({ field: requiredField(), initialValue: null });
+    await submit(r);
+    expect(isActiveElement(input(r))).toBe(true);
+  });
+
+  describe('dropdown footer', () => {
+    // The footer is portal-mounted with the dropdown, so open it before asserting.
+    const openDropdown = (r: RenderResult) => {
+      fireEvent.focus(input(r));
+      fireEvent.change(input(r), { target: { value: 'A' } });
+    };
+
+    const openCollectionAction = (r: RenderResult) =>
+      r.baseElement.querySelector(
+        '[data-hook="reference-open-collection"]',
+      ) as HTMLElement | null;
+
+    it('renders no open-collection action without an onOpenCollection', () => {
+      const r = renderField();
+      openDropdown(r);
+      expect(openCollectionAction(r)).toBeNull();
+    });
+
+    it('renders the open-collection action and calls it on click', () => {
+      const onOpenCollection = jest.fn();
+      const r = renderField({ onOpenCollection });
+      openDropdown(r);
+      fireEvent.click(openCollectionAction(r)!);
+      expect(onOpenCollection).toHaveBeenCalledTimes(1);
+    });
+
+    it('renders the caller fixedFooter', () => {
+      const r = renderField({
+        fixedFooter: <span data-hook="custom-footer">loading</span>,
+      });
+      openDropdown(r);
+      expect(
+        r.baseElement.querySelector('[data-hook="custom-footer"]'),
+      ).toBeTruthy();
+    });
+  });
+});

package/src/__tests__/components/time-input/form-time.spec.tsx

@@ -5,6 +5,7 @@ import type { Field } from '@wix/bex-core';
 import { FormTime } from '../../../components/time-input/form-time';
 import { FormTimeDriver } from '../../../components/time-input/form-time.driver';
 import { FormFieldDriver, makeField } from '../../form-field.driver';
+import { containsActiveElement } from '../../test-utils/active-element';
 
 const setup = (overrides: { field?: Field; initialValue?: string } = {}) => {
   const driver = new FormFieldDriver({
@@ -58,4 +59,19 @@ describe('FormTime field', () => {
       'cairo.fieldValidation.requiredField',
     );
   });
+
+  it('focuses the field when submit is blocked (so the page scrolls to it)', async () => {
+    const driver = setup({
+      field: makeField({ type: 'TIME', validation: { required: true } }),
+      initialValue: '',
+    });
+
+    await driver.submit();
+
+    const timeField = document.querySelector<HTMLElement>(
+      `[data-hook="time-${driver.field.id}"]`,
+    );
+    expect(timeField).toBeTruthy();
+    expect(containsActiveElement(timeField)).toBe(true);
+  });
 });

package/src/__tests__/utils/get-image-url.spec.ts

@@ -0,0 +1,48 @@
+import { getImageUrl } from '../../utils/get-image-url';
+
+const MEDIA_ID = 'dafa67_9aa1f03ed7274a7795d2f2e18a245ac7~mv2.jpg';
+const WIX_STATIC = `https://static.wixstatic.com/media/${MEDIA_ID}`;
+
+describe('getImageUrl', () => {
+  it('returns undefined for empty values', () => {
+    expect(getImageUrl(undefined)).toBeUndefined();
+    expect(getImageUrl(null)).toBeUndefined();
+    expect(getImageUrl('')).toBeUndefined();
+  });
+
+  it('resolves a wix media URI', () => {
+    expect(
+      getImageUrl(
+        `wix:image://v1/${MEDIA_ID}/cute%20cat.jpg#originWidth=1024&originHeight=1024`,
+      ),
+    ).toBe(WIX_STATIC);
+  });
+
+  it('resolves a legacy media URI (no wix: prefix)', () => {
+    expect(getImageUrl(`image://v1/${MEDIA_ID}/cute%20cat.jpg`)).toBe(
+      WIX_STATIC,
+    );
+  });
+
+  it('resolves a bare media id', () => {
+    expect(getImageUrl(MEDIA_ID)).toBe(WIX_STATIC);
+  });
+
+  it('returns http(s), data and blob urls as-is', () => {
+    const httpUrl = `${WIX_STATIC}/v1/fill/w_100,h_100/cat.jpg`;
+    const dataUrl = 'data:image/png;base64,iVBORw0KGgo=';
+    const blobUrl = 'blob:http://localhost:3000/abc-123';
+
+    expect(getImageUrl(httpUrl)).toBe(httpUrl);
+    expect(getImageUrl(dataUrl)).toBe(dataUrl);
+    expect(getImageUrl(blobUrl)).toBe(blobUrl);
+  });
+
+  it('returns undefined for blank values', () => {
+    expect(getImageUrl('   ')).toBeUndefined();
+  });
+
+  it('does not throw on values that are not media', () => {
+    expect(() => getImageUrl('not an image')).not.toThrow();
+  });
+});

package/src/components/address/input/address-input.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "addressinput3966931306";
+var _namespace_ = "addressinput3804997623";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"addressinput3966931306__root","tableAddressInput":"addressinput3966931306__tableAddressInput"};
+export var classes = {"root":"addressinput3804997623__root","tableAddressInput":"addressinput3804997623__tableAddressInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/address/view/cell-address-view.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Box } from '@wix/design-system';
-import { LocationSmall } from '@wix/wix-ui-icons-common';
+import { LocationSmall } from '@wix/wix-ui-icons-common/lazy';
 import type { Address } from '../../../types/address';
 import { AddressView } from './address-view';
 

package/src/components/audio/actions/actions-button/actions-button.tsx

@@ -3,7 +3,7 @@ import React, { useCallback } from 'react';
 
 import type { IconButtonProps } from '@wix/design-system';
 import { IconButton } from '@wix/design-system';
-import { More as MoreIcon } from '@wix/wix-ui-icons-common';
+import { More as MoreIcon } from '@wix/wix-ui-icons-common/lazy';
 
 import type { ActionsMenuProps } from '../actions-menu';
 import { ActionsMenu } from '../actions-menu';

package/src/components/audio/actions/actions-menu/actions-menu.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "actionsmenu3197060453";
+var _namespace_ = "actionsmenu2131443507";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"actionsmenu3197060453__root","action":"actionsmenu3197060453__action"};
+export var classes = {"root":"actionsmenu2131443507__root","action":"actionsmenu2131443507__action"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/audio/actions/audio-actions.tsx

@@ -4,7 +4,7 @@ import {
   Download,
   ExternalLink,
   Replace,
-} from '@wix/wix-ui-icons-common';
+} from '@wix/wix-ui-icons-common/lazy';
 
 import { ACTIONS_MENU_DIVIDER, type ActionsMenuItem } from './actions-menu';
 

package/src/components/audio/audio-field/audio-view.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { MusicSmall as MusicSmallIcon } from '@wix/wix-ui-icons-common';
+import { MusicSmall as MusicSmallIcon } from '@wix/wix-ui-icons-common/lazy';
 
 import { getSchemaType, getMediaTitle } from '../../../utils';
 import { smallTooltipCommonProps } from '../../../utils/tooltip';

package/src/components/audio/audio-field/form-audio-field.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "formaudiofield3644797003";
+var _namespace_ = "formaudiofield4237617291";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"formaudiofield3644797003__root","addItem":"formaudiofield3644797003__addItem","mediaTitle":"formaudiofield3644797003__mediaTitle"};
+export var classes = {"root":"formaudiofield4237617291__root","addItem":"formaudiofield4237617291__addItem","mediaTitle":"formaudiofield4237617291__mediaTitle"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/audio/audio-player/audio-player.st.css.ts

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

package/src/components/audio/cell-audio-edit.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback } from 'react';
 import { Box, IconButton, Tag, Tooltip } from '@wix/design-system';
-import { Add, MoreSmall, MusicSmall } from '@wix/wix-ui-icons-common';
+import { Add, MoreSmall, MusicSmall } from '@wix/wix-ui-icons-common/lazy';
 
 import { MEDIA_TYPES, getMediaTitle } from '../../utils';
 import { useTranslations } from '../../hooks';

package/src/components/audio/cell-audio-view.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Box, Tag } from '@wix/design-system';
-import { MusicSmall } from '@wix/wix-ui-icons-common';
+import { MusicSmall } from '@wix/wix-ui-icons-common/lazy';
 import { getMediaTitle } from '../../utils';
 
 export interface CellAudioViewProps {

package/src/components/color-view/cell-color-view.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "cellcolorview1664123845";
+var _namespace_ = "cellcolorview3812818132";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"cellcolorview1664123845__root","hashPrefix":"cellcolorview1664123845__hashPrefix"};
+export var classes = {"root":"cellcolorview3812818132__root","hashPrefix":"cellcolorview3812818132__hashPrefix"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/color-view/color-view.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "colorview4045799829";
+var _namespace_ = "colorview743218685";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"colorview4045799829__root","view":"colorview4045799829__view","fillPreview":"colorview4045799829__fillPreview"};
+export var classes = {"root":"colorview743218685__root","view":"colorview743218685__view","fillPreview":"colorview743218685__fillPreview"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/date-input/date-utils.ts

@@ -1,8 +1,25 @@
-export const getDateWithoutTimezone = (date: Date | string) =>
-  new Date(new Date(date).toISOString().slice(0, -1));
+// A stored value that isn't a date (a mistyped field, a value written by
+// another client) must not take the page down: `toISOString` throws on an
+// unparsable date, and these run during render.
+const parseDate = (date: Date | string | number): Date | undefined => {
+  const parsed = new Date(date);
+  return Number.isNaN(parsed.getTime()) ? undefined : parsed;
+};
+
+export const getDateWithoutTimezone = (
+  date: Date | string,
+): Date | undefined => {
+  const parsed = parseDate(date);
+  return parsed && new Date(parsed.toISOString().slice(0, -1));
+};
 
-export const getISODateStringWithFixedTimezone = (date: Date | string) => {
-  const _date = new Date(date);
+export const getISODateStringWithFixedTimezone = (
+  date: Date | string,
+): string | undefined => {
+  const _date = parseDate(date);
+  if (!_date) {
+    return undefined;
+  }
   const userTimezoneOffset = _date.getTimezoneOffset() * 60000;
   return new Date(_date.getTime() - userTimezoneOffset)
     .toISOString()

package/src/components/date-input/form-date-input.tsx

@@ -47,13 +47,13 @@ const _FormDateInput = (props: FormDateInputProps) => {
     },
   });
 
+  // A stored value that isn't a date leaves the picker empty instead of
+  // throwing out of render.
   const [date, setDate] = useState<Date | undefined>(() => {
-    if (controller.field.value) {
-      return getDateWithoutTimezone(
-        getISODateStringWithFixedTimezone(controller.field.value),
-      );
-    }
-    return undefined;
+    const iso = controller.field.value
+      ? getISODateStringWithFixedTimezone(controller.field.value)
+      : undefined;
+    return iso ? getDateWithoutTimezone(iso) : undefined;
   });
 
   const ref = useRef<BaseInputRef>({});
@@ -69,8 +69,13 @@ const _FormDateInput = (props: FormDateInputProps) => {
       <DatePicker
         ref={(internalRef) => {
           inputRef?.(ref.current);
-          // @ts-expect-error: WSR internal API hack for focusing
-          ref.current.focus = () => internalRef?.state?.inputRef?.focus?.();
+          const inputEl =
+            // @ts-expect-error: WSR internal API hack for focusing
+            internalRef?.state?.inputRef as HTMLElement | undefined;
+          ref.current.focus = () => inputEl?.focus?.();
+          // Let react-hook-form's shouldFocusError scroll to + focus this field
+          // when it blocks save.
+          controller.field.ref(inputEl ?? null);
         }}
         dataHook={`date-${field.id}`}
         width="100%"
@@ -78,12 +83,10 @@ const _FormDateInput = (props: FormDateInputProps) => {
         value={date}
         onChange={(newValue: Date) => {
           setDate(newValue);
-          if (newValue) {
-            const formattedDate = getISODateStringWithFixedTimezone(newValue);
-            controller.field.onChange(formattedDate.split('T')[0]);
-          } else {
-            controller.field.onChange(null);
-          }
+          const formattedDate = newValue
+            ? getISODateStringWithFixedTimezone(newValue)
+            : undefined;
+          controller.field.onChange(formattedDate?.split('T')[0] ?? null);
         }}
         onValidate={({ validationType, value: newValue, format }) => {
           const error = computeError(newValue, format, validationType);

package/src/components/datetime-input/form-date-time.tsx

@@ -78,10 +78,15 @@ const _FormDateTime = (props: FormDateTimeProps) => {
         <Cell span={6}>
           <DatePicker
             ref={(internalRef) => {
-              dateRef.current.focus = () =>
+              const inputEl =
                 // TODO: PR to WSR needed to expose as public API
-                // @ts-expect-error
-                internalRef?.state?.inputRef?.focus?.();
+                // @ts-expect-error internal API
+                internalRef?.state?.inputRef as HTMLElement | undefined;
+              dateRef.current.focus = () => inputEl?.focus?.();
+              // Hand the date input to react-hook-form so shouldFocusError can
+              // scroll to and focus this field when it blocks save (the
+              // composite date/time inputs have no single ref to pass directly).
+              controller.field.ref(inputEl ?? null);
             }}
             width="100%"
             placeholderText={tFields('CMS.formDate.placeholder')}

package/src/components/delete-dialog/delete-dialog.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "deletedialog1567006919";
+var _namespace_ = "deletedialog2767667586";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"deletedialog1567006919__root","layout":"deletedialog1567006919__layout"};
+export var classes = {"root":"deletedialog2767667586__root","layout":"deletedialog2767667586__layout"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/document/cell-document-edit.tsx

@@ -10,7 +10,7 @@ import {
   LinkSmall,
   MoreSmall,
   Replace,
-} from '@wix/wix-ui-icons-common';
+} from '@wix/wix-ui-icons-common/lazy';
 import { getMediaTitle, MEDIA_TYPES } from '../../utils/media-utils';
 import { getMediaURL } from '../../auto-field-types';
 import { useTranslations } from '../../hooks';

package/src/components/document/cell-document-view.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Box, Tag } from '@wix/design-system';
-import { DocumentSmall } from '@wix/wix-ui-icons-common';
+import { DocumentSmall } from '@wix/wix-ui-icons-common/lazy';
 
 import { getMediaTitle } from '../../utils/media-utils';
 

package/src/components/document/document-control.tsx

@@ -10,7 +10,7 @@ import {
   Document,
   Link,
   Download,
-} from '@wix/wix-ui-icons-common';
+} from '@wix/wix-ui-icons-common/lazy';
 import { useTranslations } from '../../hooks';
 
 import { classes } from './form-document-field.st.css.js';

package/src/components/document/document-view.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { Badge, Box } from '@wix/design-system';
-import { DocumentSmall } from '@wix/wix-ui-icons-common';
+import { DocumentSmall } from '@wix/wix-ui-icons-common/lazy';
 
 import { getMediaTitle } from '../../utils/media-utils';