@wix/patterns-fields 1.58.0 → 1.59.0

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

@@ -33,6 +33,8 @@ interface HarnessProps {
   items?: FormReferenceItem[];
   searchValue?: string;
   onSearch?: (q: string) => void;
+  fixedFooter?: React.ReactNode;
+  onOpenCollection?: () => void;
 }
 
 const Harness = ({
@@ -41,6 +43,8 @@ const Harness = ({
   items = ITEMS,
   searchValue,
   onSearch = () => {},
+  fixedFooter,
+  onOpenCollection,
 }: HarnessProps) => {
   const Inner = () => {
     const methods = useForm<FieldValues>({
@@ -64,6 +68,8 @@ const Harness = ({
           displayField="name"
           searchValue={searchValue}
           onSearch={onSearch}
+          fixedFooter={fixedFooter}
+          onOpenCollection={onOpenCollection}
         />
         <span data-hook="error-out">{error ?? ''}</span>
         <button type="submit" data-hook="submit" />
@@ -112,6 +118,14 @@ describe('FormReference', () => {
     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' },
@@ -127,6 +141,42 @@ describe('FormReference', () => {
     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(
@@ -155,4 +205,41 @@ describe('FormReference', () => {
     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__/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_ = "addressinput3833852092";
+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":"addressinput3833852092__root","tableAddressInput":"addressinput3833852092__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_ = "actionsmenu1323400524";
+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":"actionsmenu1323400524__root","action":"actionsmenu1323400524__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_ = "formaudiofield3116593580";
+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":"formaudiofield3116593580__root","addItem":"formaudiofield3116593580__addItem","mediaTitle":"formaudiofield3116593580__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_ = "audioplayer4190226408";
+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":"audioplayer4190226408__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_ = "cellcolorview3170761269";
+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":"cellcolorview3170761269__root","hashPrefix":"cellcolorview3170761269__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_ = "colorview353989494";
+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":"colorview353989494__root","view":"colorview353989494__view","fillPreview":"colorview353989494__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>({});
@@ -83,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/delete-dialog/delete-dialog.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "deletedialog4085980773";
+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":"deletedialog4085980773__root","layout":"deletedialog4085980773__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';
 

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "formdocumentfield818078213";
+var _namespace_ = "formdocumentfield4149950269";
 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":"formdocumentfield818078213__root","viewWrapper":"formdocumentfield818078213__viewWrapper","textWidth":"formdocumentfield818078213__textWidth","documentLoader":"formdocumentfield818078213__documentLoader","addDocument":"formdocumentfield818078213__addDocument","addItemWrapper":"formdocumentfield818078213__addItemWrapper"};
+export var classes = {"root":"formdocumentfield4149950269__root","viewWrapper":"formdocumentfield4149950269__viewWrapper","textWidth":"formdocumentfield4149950269__textWidth","documentLoader":"formdocumentfield4149950269__documentLoader","addDocument":"formdocumentfield4149950269__addDocument","addItemWrapper":"formdocumentfield4149950269__addItemWrapper"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "exclamation2850796433";
+var _namespace_ = "exclamation1041069287";
 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":"exclamation2850796433__root","exclamation":"exclamation2850796433__exclamation","actions":"exclamation2850796433__actions","action":"exclamation2850796433__action"};
+export var classes = {"root":"exclamation1041069287__root","exclamation":"exclamation1041069287__exclamation","actions":"exclamation1041069287__actions","action":"exclamation1041069287__action"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/exclamation/exclamation.tsx

@@ -6,7 +6,7 @@ import { Box, Tooltip } from '@wix/design-system';
 import {
   StatusAlertFilled,
   StatusWarningFilled,
-} from '@wix/wix-ui-icons-common';
+} from '@wix/wix-ui-icons-common/lazy';
 
 import { classes, st } from './exclamation.st.css.js';
 

package/src/components/highlighted-text/highlighted-text.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "highlightedtext338506268";
+var _namespace_ = "highlightedtext2258718189";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,8 +13,8 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"highlightedtext338506268__root","substring":"highlightedtext338506268__substring"};
-export var keyframes = {"highlighted":"highlightedtext338506268__highlighted","highlighted-match":"highlightedtext338506268__highlighted-match"}; 
+export var classes = {"root":"highlightedtext2258718189__root","substring":"highlightedtext2258718189__substring"};
+export var keyframes = {"highlighted":"highlightedtext2258718189__highlighted","highlighted-match":"highlightedtext2258718189__highlighted-match"}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {}; 

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

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

package/src/components/image/thumbnail-replace-overlay.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "thumbnailreplaceoverlay2875188225";
+var _namespace_ = "thumbnailreplaceoverlay3474813363";
 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":"thumbnailreplaceoverlay2875188225__root","icon":"thumbnailreplaceoverlay2875188225__icon"};
+export var classes = {"root":"thumbnailreplaceoverlay3474813363__root","icon":"thumbnailreplaceoverlay3474813363__icon"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/image/thumbnail-replace-overlay.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Replace } from '@wix/wix-ui-icons-common';
+import { Replace } from '@wix/wix-ui-icons-common/lazy';
 import { classes } from './thumbnail-replace-overlay.st.css.js';
 
 export const ThumbnailReplaceOverlay: React.FC = () => (

package/src/components/media-control/cell-media-edit-shell.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "cellmediaeditshell4097080161";
+var _namespace_ = "cellmediaeditshell3322302244";
 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":"cellmediaeditshell4097080161__root"};
+export var classes = {"root":"cellmediaeditshell3322302244__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/media-control/paste-url-button.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "pasteurlbutton3849090191";
+var _namespace_ = "pasteurlbutton3949457792";
 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":"pasteurlbutton3849090191__root","iconButtonTooltip":"pasteurlbutton3849090191__iconButtonTooltip","iconButton":"pasteurlbutton3849090191__iconButton"};
+export var classes = {"root":"pasteurlbutton3949457792__root","iconButtonTooltip":"pasteurlbutton3949457792__iconButtonTooltip","iconButton":"pasteurlbutton3949457792__iconButton"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/media-gallery/cell-media-gallery-edit.tsx

@@ -12,7 +12,7 @@ import {
   Refresh,
   Delete,
   Maximize,
-} from '@wix/wix-ui-icons-common';
+} from '@wix/wix-ui-icons-common/lazy';
 import { files } from '@wix/media';
 import {
   mediaURItoImageURL,

package/src/components/media-gallery/form-media-gallery-field.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "formmediagalleryfield3093550833";
+var _namespace_ = "formmediagalleryfield1376199663";
 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":"formmediagalleryfield3093550833__root","container":"formmediagalleryfield3093550833__container","viewBox":"formmediagalleryfield3093550833__viewBox","addItemWrapper":"formmediagalleryfield3093550833__addItemWrapper","addItem":"formmediagalleryfield3093550833__addItem","overlay":"formmediagalleryfield3093550833__overlay","image":"formmediagalleryfield3093550833__image","previewImage":"formmediagalleryfield3093550833__previewImage","previewVideo":"formmediagalleryfield3093550833__previewVideo"};
+export var classes = {"root":"formmediagalleryfield1376199663__root","container":"formmediagalleryfield1376199663__container","viewBox":"formmediagalleryfield1376199663__viewBox","addItemWrapper":"formmediagalleryfield1376199663__addItemWrapper","addItem":"formmediagalleryfield1376199663__addItem","overlay":"formmediagalleryfield1376199663__overlay","image":"formmediagalleryfield1376199663__image","previewImage":"formmediagalleryfield1376199663__previewImage","previewVideo":"formmediagalleryfield1376199663__previewVideo"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};