@wix/patterns-fields 1.58.0 → 1.60.0

package/src/components/reference/cell-reference-input.tsx

@@ -1,13 +1,8 @@
-import React, { useEffect, useMemo, useRef } from 'react';
-import {
-  AutoComplete,
-  Divider,
-  Input,
-  ListItemAction,
-  listItemSelectBuilder,
-} from '@wix/design-system';
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
+import { AutoComplete, Input, listItemSelectBuilder } from '@wix/design-system';
 import { useTranslations } from '../../hooks/use-translations';
 import { ReferenceAvatar } from './reference-avatar';
+import { useReferenceDropdownFooter } from './reference-dropdown-footer';
 import { st, classes } from './cell-reference-input.st.css.js';
 
 export interface CellReferenceItem {
@@ -104,29 +99,12 @@ export const CellReferenceInput = React.forwardRef<
       // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
-    const combinedFooter = useMemo(() => {
-      if (!fixedFooter && !onOpenCollection) {
-        return undefined;
-      }
-      return (
-        // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-        <div onMouseDown={(e) => e.preventDefault()}>
-          {fixedFooter}
-          {onOpenCollection && <Divider />}
-          {onOpenCollection && (
-            <ListItemAction
-              title={t('patterns-fields.reference.open_collection')}
-              size="small"
-              onClick={() => {
-                acRef.current?.hideOptions?.();
-                onOpenCollection();
-              }}
-              dataHook="reference-open-collection"
-            />
-          )}
-        </div>
-      );
-    }, [fixedFooter, onOpenCollection, t]);
+    const hideOptions = useCallback(() => acRef.current?.hideOptions?.(), []);
+    const combinedFooter = useReferenceDropdownFooter({
+      fixedFooter,
+      onOpenCollection,
+      hideOptions,
+    });
 
     const prefix =
       selectedItem && !value ? (

package/src/components/reference/form-multi-reference.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback, useMemo, useRef } from 'react';
 import {
   Box,
   FormField,
@@ -14,6 +14,7 @@ import { useController } from '@wix/bex-core/form';
 import { BaseInputProps } from '../../types/base-input';
 import { useTranslations } from '../../hooks/use-translations';
 import { ReferenceAvatar } from './reference-avatar';
+import { useReferenceDropdownFooter } from './reference-dropdown-footer';
 import type { FormReferenceItem } from './form-reference';
 
 /** Selected references, each stored as `{ [idField], [displayField] }`. */
@@ -39,10 +40,15 @@ export interface FormMultiReferenceProps
   hasMore?: boolean;
   loadMore?: () => void;
   fixedFooter?: React.ReactNode;
+  /** When set, renders an "Open Collection" action at the bottom of the dropdown. */
   onOpenCollection?: () => void;
   placeholder?: string;
 }
 
+interface MultiSelectHandle {
+  hideOptions?: () => void;
+}
+
 const _FormMultiReference = (props: FormMultiReferenceProps) => {
   const {
     field,
@@ -59,11 +65,13 @@ const _FormMultiReference = (props: FormMultiReferenceProps) => {
     hasMore,
     loadMore,
     fixedFooter,
+    onOpenCollection,
     placeholder,
   } = props;
 
   const { translate: t } = useWixPatternsContainer();
   const { t: tf } = useTranslations();
+  const msRef = useRef<MultiSelectHandle | null>(null);
 
   const controller = useController({
     name: field.id,
@@ -89,7 +97,11 @@ const _FormMultiReference = (props: FormMultiReferenceProps) => {
     () =>
       selectedValues.map((item) => {
         const selectedId = item[idField] as string;
-        const label = item[displayField] as string;
+        // A referenced item with no value in the display field still needs a
+        // readable tag — the dropdown options use the same fallback.
+        const label =
+          (item[displayField] as string) ||
+          tf('patterns-fields.reference.untitled');
         const image = imageField
           ? (item[imageField] as string | undefined)
           : undefined;
@@ -112,7 +124,7 @@ const _FormMultiReference = (props: FormMultiReferenceProps) => {
           dataHook: `multi-reference-tag-${field.id}-${selectedId}`,
         };
       }),
-    [selectedValues, idField, displayField, imageField, field.id],
+    [selectedValues, idField, displayField, imageField, field.id, tf],
   );
 
   const options = useMemo(
@@ -176,6 +188,13 @@ const _FormMultiReference = (props: FormMultiReferenceProps) => {
     onClearSearch?.();
   }, [onClearSearch]);
 
+  const hideOptions = useCallback(() => msRef.current?.hideOptions?.(), []);
+  const combinedFooter = useReferenceDropdownFooter({
+    fixedFooter,
+    onOpenCollection,
+    hideOptions,
+  });
+
   return (
     <FormField
       label={field.displayName}
@@ -185,6 +204,9 @@ const _FormMultiReference = (props: FormMultiReferenceProps) => {
       dataHook={dataHook}
     >
       <MultiSelect
+        ref={(instance: MultiSelectHandle | null) => {
+          msRef.current = instance;
+        }}
         placeholder={
           placeholder ?? tf('auto-patterns.fields.select_placeholder')
         }
@@ -202,7 +224,7 @@ const _FormMultiReference = (props: FormMultiReferenceProps) => {
         infiniteScroll={!!loadMore}
         hasMore={hasMore}
         loadMore={loadMore}
-        fixedFooter={fixedFooter}
+        fixedFooter={combinedFooter}
         dataHook={`multi-reference-input-${field.id}`}
       />
     </FormField>

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

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback, useMemo, useRef } from 'react';
 import {
   AutoComplete,
   FormField,
@@ -13,6 +13,7 @@ import { useController } from '@wix/bex-core/form';
 import { BaseInputProps } from '../../types/base-input';
 import { useTranslations } from '../../hooks/use-translations';
 import { ReferenceAvatar } from './reference-avatar';
+import { useReferenceDropdownFooter } from './reference-dropdown-footer';
 
 export interface FormReferenceItem {
   id: string;
@@ -42,6 +43,7 @@ export interface FormReferenceProps extends BaseInputProps<FormReferenceValue> {
   hasMore?: boolean;
   loadMore?: () => void;
   fixedFooter?: React.ReactNode;
+  /** When set, renders an "Open Collection" action at the bottom of the dropdown. */
   onOpenCollection?: () => void;
   placeholder?: string;
 }
@@ -62,11 +64,13 @@ const _FormReference = (props: FormReferenceProps) => {
     hasMore,
     loadMore,
     fixedFooter,
+    onOpenCollection,
     placeholder,
   } = props;
 
   const { translate: t } = useWixPatternsContainer();
   const { t: tf } = useTranslations();
+  const acRef = useRef<React.ComponentRef<typeof AutoComplete> | null>(null);
 
   const controller = useController({
     name: field.id,
@@ -84,10 +88,18 @@ const _FormReference = (props: FormReferenceProps) => {
 
   const selectedValue = controller.field.value as FormReferenceValue;
   const selectedDisplayValue = (selectedValue?.[displayField] as string) || '';
-  const displayValue = searchValue || selectedDisplayValue;
+  // A reference whose label is empty (the referenced item has no value in the
+  // display field) still has to look picked — an empty input reads as "nothing
+  // happened". Same fallback the options use.
+  const selectedLabel =
+    selectedDisplayValue ||
+    (selectedValue ? tf('patterns-fields.reference.untitled') : '');
+  const displayValue = searchValue || selectedLabel;
+  const selectedId = selectedValue?.[idField]
+    ? String(selectedValue[idField])
+    : undefined;
 
   const selectedImage = useMemo(() => {
-    const selectedId = selectedValue?.[idField];
     if (!selectedId) {
       return undefined;
     }
@@ -98,7 +110,7 @@ const _FormReference = (props: FormReferenceProps) => {
     return imageField
       ? (selectedValue?.[imageField] as string | undefined)
       : undefined;
-  }, [selectedValue, idField, imageField, items]);
+  }, [selectedValue, selectedId, imageField, items]);
 
   const options = useMemo(
     () =>
@@ -113,9 +125,9 @@ const _FormReference = (props: FormReferenceProps) => {
   );
 
   const selectedPrefix =
-    selectedDisplayValue && !searchValue ? (
+    selectedLabel && !searchValue ? (
       <Input.Affix>
-        <ReferenceAvatar name={selectedDisplayValue} image={selectedImage} />
+        <ReferenceAvatar name={selectedLabel} image={selectedImage} />
       </Input.Affix>
     ) : undefined;
 
@@ -150,6 +162,13 @@ const _FormReference = (props: FormReferenceProps) => {
     onClearSearch?.();
   }, [onClearSearch]);
 
+  const hideOptions = useCallback(() => acRef.current?.hideOptions?.(), []);
+  const combinedFooter = useReferenceDropdownFooter({
+    fixedFooter,
+    onOpenCollection,
+    hideOptions,
+  });
+
   return (
     <FormField
       label={field.displayName}
@@ -159,11 +178,17 @@ const _FormReference = (props: FormReferenceProps) => {
       dataHook={dataHook}
     >
       <AutoComplete
+        ref={acRef}
         placeholder={
           placeholder ?? tf('auto-patterns.fields.select_placeholder')
         }
         options={options}
         value={displayValue}
+        // Without this the dropdown tracks its own picks only, so a value that
+        // came from the form (a loaded entity, or a re-opened dropdown) shows no
+        // selected row. `selected` on listItemSelectBuilder does not do this —
+        // the builder drops it.
+        selectedId={selectedId}
         prefix={selectedPrefix}
         onChange={handleChange}
         onSelect={handleSelect}
@@ -173,7 +198,7 @@ const _FormReference = (props: FormReferenceProps) => {
         infiniteScroll={!!loadMore}
         hasMore={hasMore}
         loadMore={loadMore}
-        fixedFooter={fixedFooter}
+        fixedFooter={combinedFooter}
         // Hand the input to react-hook-form so shouldFocusError scrolls to +
         // focuses this field when it blocks save.
         inputRef={controller.field.ref}

package/src/components/reference/reference-dropdown-footer.tsx

@@ -0,0 +1,51 @@
+import React, { useMemo } from 'react';
+import { Divider, ListItemAction } from '@wix/design-system';
+import { useTranslations } from '../../hooks/use-translations';
+
+export interface ReferenceDropdownFooterParams {
+  /** Caller-supplied footer content (loader / empty state / error state). */
+  fixedFooter?: React.ReactNode;
+  /** When set, an "Open Collection" action is appended below the footer. */
+  onOpenCollection?: () => void;
+  /** Closes the dropdown before navigating to the referenced collection. */
+  hideOptions?: () => void;
+}
+
+/**
+ * Footer for a reference dropdown: the caller's content plus an "Open
+ * Collection" action. Returns `undefined` when there is nothing to show, so the
+ * dropdown renders no footer at all.
+ */
+export function useReferenceDropdownFooter({
+  fixedFooter,
+  onOpenCollection,
+  hideOptions,
+}: ReferenceDropdownFooterParams): React.ReactNode | undefined {
+  const { t } = useTranslations();
+
+  return useMemo(() => {
+    if (!fixedFooter && !onOpenCollection) {
+      return undefined;
+    }
+    return (
+      // Pressing inside the footer must not blur the input — that would close
+      // the dropdown before the click lands.
+      // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+      <div onMouseDown={(e) => e.preventDefault()}>
+        {fixedFooter}
+        {onOpenCollection && <Divider />}
+        {onOpenCollection && (
+          <ListItemAction
+            title={t('patterns-fields.reference.open_collection')}
+            size="small"
+            onClick={() => {
+              hideOptions?.();
+              onOpenCollection();
+            }}
+            dataHook="reference-open-collection"
+          />
+        )}
+      </div>
+    );
+  }, [fixedFooter, onOpenCollection, hideOptions, t]);
+}

package/src/components/rich-content/rich-content-input/default-value-input/rich-content-default-value-input.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "richcontentdefaultvalueinput443326018";
+var _namespace_ = "richcontentdefaultvalueinput4286293955";
 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":"richcontentdefaultvalueinput443326018__root","richContentEditorContainer":"richcontentdefaultvalueinput443326018__richContentEditorContainer","editor":"richcontentdefaultvalueinput443326018__editor"};
+export var classes = {"root":"richcontentdefaultvalueinput4286293955__root","richContentEditorContainer":"richcontentdefaultvalueinput4286293955__richContentEditorContainer","editor":"richcontentdefaultvalueinput4286293955__editor"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/rich-content/rich-content-input/form-input/rich-content-form-input.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "richcontentforminput3334825677";
+var _namespace_ = "richcontentforminput2229905372";
 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":"richcontentforminput3334825677__root","editor":"richcontentforminput3334825677__editor"};
+export var classes = {"root":"richcontentforminput2229905372__root","editor":"richcontentforminput2229905372__editor"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/rich-content/rich-content-input/form-read-only-input/rich-content-form-read-only-input.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "richcontentformreadonlyinput2425623005";
+var _namespace_ = "richcontentformreadonlyinput1542852181";
 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":"richcontentformreadonlyinput2425623005__root"};
+export var classes = {"root":"richcontentformreadonlyinput1542852181__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/rich-content/rich-content-input/rich-content-common/fullscreen-modal/fullscreen-modal.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../../stylable-esm-runti
 
 
 
-var _namespace_ = "fullscreenmodal1841647145";
+var _namespace_ = "fullscreenmodal3659031855";
 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":"fullscreenmodal1841647145__root","modalContent":"fullscreenmodal1841647145__modalContent"};
+export var classes = {"root":"fullscreenmodal3659031855__root","modalContent":"fullscreenmodal3659031855__modalContent"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/rich-content/rich-content-input/rich-content-common/publish-loader/publish-loader.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../../stylable-esm-runti
 
 
 
-var _namespace_ = "publishloader1701008763";
+var _namespace_ = "publishloader3606906160";
 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":"publishloader1701008763__root","publishLoader":"publishloader1701008763__publishLoader"};
+export var classes = {"root":"publishloader3606906160__root","publishLoader":"publishloader3606906160__publishLoader"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/rich-content/rich-content-input/rich-content-common/toggle-fullscreen-button/toggle-fullscreen-button.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../../stylable-esm-runti
 
 
 
-var _namespace_ = "togglefullscreenbutton3828783328";
+var _namespace_ = "togglefullscreenbutton906750159";
 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":"togglefullscreenbutton3828783328__root"};
+export var classes = {"root":"togglefullscreenbutton906750159__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/rich-content/rich-content-input/rich-content-common/toggle-fullscreen-button/toggle-fullscreen-button.tsx

@@ -5,7 +5,7 @@ import { IconButton, Tooltip } from '@wix/design-system';
 import {
   DismissSmall as DismissIcon,
   MaximizeSmall as MaximizeIcon,
-} from '@wix/wix-ui-icons-common';
+} from '@wix/wix-ui-icons-common/lazy';
 
 import { useTranslations } from '../../../../../hooks';
 import { classes } from './toggle-fullscreen-button.st.css.js';

package/src/components/rich-content/rich-content-input/rich-content-editor/rich-content-editor.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "richcontenteditor1104792148";
+var _namespace_ = "richcontenteditor2162639041";
 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":"richcontenteditor1104792148__root","toolbarContainer":"richcontenteditor1104792148__toolbarContainer","footerToolbarContainer":"richcontenteditor1104792148__footerToolbarContainer","toolbarAndFullScreenButtonWrapper":"richcontenteditor1104792148__toolbarAndFullScreenButtonWrapper","editor":"richcontenteditor1104792148__editor","modalEditor":"richcontenteditor1104792148__modalEditor"};
+export var classes = {"root":"richcontenteditor2162639041__root","toolbarContainer":"richcontenteditor2162639041__toolbarContainer","footerToolbarContainer":"richcontenteditor2162639041__footerToolbarContainer","toolbarAndFullScreenButtonWrapper":"richcontenteditor2162639041__toolbarAndFullScreenButtonWrapper","editor":"richcontenteditor2162639041__editor","modalEditor":"richcontenteditor2162639041__modalEditor"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/rich-content/rich-content-input/rich-content-editor/rich-content-toolbar.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "richcontenttoolbar1597960395";
+var _namespace_ = "richcontenttoolbar2946613672";
 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":"richcontenttoolbar1597960395__root","toolbar":"richcontenttoolbar1597960395__toolbar","toolbarButton":"richcontenttoolbar1597960395__toolbarButton","separator":"richcontenttoolbar1597960395__separator"};
+export var classes = {"root":"richcontenttoolbar2946613672__root","toolbar":"richcontenttoolbar2946613672__toolbar","toolbarButton":"richcontenttoolbar2946613672__toolbarButton","separator":"richcontenttoolbar2946613672__separator"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/rich-content/rich-content-input/rich-content-viewer/rich-content-viewer.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "richcontentviewer3873042823";
+var _namespace_ = "richcontentviewer94771247";
 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":"richcontentviewer3873042823__root","viewer":"richcontentviewer3873042823__viewer","modalViewer":"richcontentviewer3873042823__modalViewer"};
+export var classes = {"root":"richcontentviewer94771247__root","viewer":"richcontentviewer94771247__viewer","modalViewer":"richcontentviewer94771247__modalViewer"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/rich-text/rich-text-input/rich-text-editor/rich-editor.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "richeditor1957756590";
+var _namespace_ = "richeditor1108877419";
 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":"richeditor1957756590__root","editor":"richeditor1957756590__editor","header-one":"richeditor1957756590__header-one","header-two":"richeditor1957756590__header-two","header-three":"richeditor1957756590__header-three","header-four":"richeditor1957756590__header-four","header-five":"richeditor1957756590__header-five","header-six":"richeditor1957756590__header-six","paragraph-one":"richeditor1957756590__paragraph-one","unstyled":"richeditor1957756590__unstyled","paragraph-three":"richeditor1957756590__paragraph-three","align-left":"richeditor1957756590__align-left","align-right":"richeditor1957756590__align-right","align-center":"richeditor1957756590__align-center","align-justify":"richeditor1957756590__align-justify","withMargin":"richeditor1957756590__withMargin","dir-rtl":"richeditor1957756590__dir-rtl"};
+export var classes = {"root":"richeditor1108877419__root","editor":"richeditor1108877419__editor","header-one":"richeditor1108877419__header-one","header-two":"richeditor1108877419__header-two","header-three":"richeditor1108877419__header-three","header-four":"richeditor1108877419__header-four","header-five":"richeditor1108877419__header-five","header-six":"richeditor1108877419__header-six","paragraph-one":"richeditor1108877419__paragraph-one","unstyled":"richeditor1108877419__unstyled","paragraph-three":"richeditor1108877419__paragraph-three","align-left":"richeditor1108877419__align-left","align-right":"richeditor1108877419__align-right","align-center":"richeditor1108877419__align-center","align-justify":"richeditor1108877419__align-justify","withMargin":"richeditor1108877419__withMargin","dir-rtl":"richeditor1108877419__dir-rtl"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/rich-text/rich-text-input/rich-text-editor/rich-text-editor.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "richtexteditor2252892878";
+var _namespace_ = "richtexteditor413080990";
 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":"richtexteditor2252892878__root","nativeInput":"richtexteditor2252892878__nativeInput","editor":"richtexteditor2252892878__editor"};
+export var classes = {"root":"richtexteditor413080990__root","nativeInput":"richtexteditor413080990__nativeInput","editor":"richtexteditor413080990__editor"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/rich-text/rich-text-input/rich-text-editor/toolbar/align-dropdown.tsx

@@ -7,7 +7,7 @@ import {
   TextAlignCenter as TextAlignCenterIcon,
   TextAlignRight as TextAlignRightIcon,
   TextJustify as TextJustifyIcon,
-} from '@wix/wix-ui-icons-common';
+} from '@wix/wix-ui-icons-common/lazy';
 
 import { preventEvent } from '../../../../../utils';
 import { useTranslations } from '../../../../../hooks';

package/src/components/rich-text/rich-text-input/rich-text-editor/toolbar/link-button.tsx

@@ -3,7 +3,7 @@ import React, { useCallback, useEffect, useRef, useState } from 'react';
 import type { EntityInstance } from 'draft-js';
 import { getValidURL } from '../../../../../auto-field-types';
 import { ToggleButton } from '@wix/design-system';
-import { Link as LinkIcon } from '@wix/wix-ui-icons-common';
+import { Link as LinkIcon } from '@wix/wix-ui-icons-common/lazy';
 
 import { preventEvent, stopEvent } from '../../../../../utils';
 import { useOpenState, useTranslations } from '../../../../../hooks';

package/src/components/rich-text/rich-text-input/rich-text-editor/toolbar/toolbar.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../../stylable-esm-runti
 
 
 
-var _namespace_ = "toolbar273985549";
+var _namespace_ = "toolbar2939290825";
 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":"toolbar273985549__root","item":"toolbar273985549__item","separator":"toolbar273985549__separator","clearFormatting":"toolbar273985549__clearFormatting","fullScreen":"toolbar273985549__fullScreen","dropdownItemContent":"toolbar273985549__dropdownItemContent","dropdownItemTitle":"toolbar273985549__dropdownItemTitle","dropdownItemSubtitle":"toolbar273985549__dropdownItemSubtitle","dropdownHeaderOne":"toolbar273985549__dropdownHeaderOne","dropdownHeaderTwo":"toolbar273985549__dropdownHeaderTwo","dropdownHeaderThree":"toolbar273985549__dropdownHeaderThree","dropdownHeaderFour":"toolbar273985549__dropdownHeaderFour","dropdownHeaderFive":"toolbar273985549__dropdownHeaderFive","dropdownHeaderSix":"toolbar273985549__dropdownHeaderSix","dropdownParagraphOne":"toolbar273985549__dropdownParagraphOne","dropdownNormalText":"toolbar273985549__dropdownNormalText","dropdownParagraphThree":"toolbar273985549__dropdownParagraphThree"};
+export var classes = {"root":"toolbar2939290825__root","item":"toolbar2939290825__item","separator":"toolbar2939290825__separator","clearFormatting":"toolbar2939290825__clearFormatting","fullScreen":"toolbar2939290825__fullScreen","dropdownItemContent":"toolbar2939290825__dropdownItemContent","dropdownItemTitle":"toolbar2939290825__dropdownItemTitle","dropdownItemSubtitle":"toolbar2939290825__dropdownItemSubtitle","dropdownHeaderOne":"toolbar2939290825__dropdownHeaderOne","dropdownHeaderTwo":"toolbar2939290825__dropdownHeaderTwo","dropdownHeaderThree":"toolbar2939290825__dropdownHeaderThree","dropdownHeaderFour":"toolbar2939290825__dropdownHeaderFour","dropdownHeaderFive":"toolbar2939290825__dropdownHeaderFive","dropdownHeaderSix":"toolbar2939290825__dropdownHeaderSix","dropdownParagraphOne":"toolbar2939290825__dropdownParagraphOne","dropdownNormalText":"toolbar2939290825__dropdownNormalText","dropdownParagraphThree":"toolbar2939290825__dropdownParagraphThree"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/rich-text/rich-text-input/rich-text-editor/toolbar/toolbar.tsx

@@ -4,7 +4,7 @@ import type { EditorState, EntityInstance, CharacterMetadata } from 'draft-js';
 import {
   Maximize as MaximizeIcon,
   Minimise as MinimiseIcon,
-} from '@wix/wix-ui-icons-common';
+} from '@wix/wix-ui-icons-common/lazy';
 
 import { isTruthy } from '../../../../../utils';
 import { useTranslations } from '../../../../../hooks';

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "textview1813358791";
+var _namespace_ = "textview1591584834";
 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":"textview1813358791__root","textView":"textview1813358791__textView"};
+export var classes = {"root":"textview1591584834__root","textView":"textview1591584834__textView"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/url/form-url.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { FormField, Input } from '@wix/design-system';
 import { observer } from 'mobx-react-lite';
-import { Link } from '@wix/wix-ui-icons-common';
+import { Link } from '@wix/wix-ui-icons-common/lazy';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { useController } from '@wix/bex-core/form';
 

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Text, Tooltip, IconButton } from '@wix/design-system';
-import { ExternalLinkSmall } from '@wix/wix-ui-icons-common';
+import { ExternalLinkSmall } from '@wix/wix-ui-icons-common/lazy';
 import { useTranslations } from '../../hooks/use-translations';
 
 export interface UrlViewProps {

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

@@ -13,7 +13,7 @@ import {
   Maximize,
   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 { useMediaControl } from '../media-control';