@wix/patterns-fields 1.88.0 → 1.89.0

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_ = "actionsmenu3671995341";
+var _namespace_ = "actionsmenu1397751256";
 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":"actionsmenu3671995341__root","action":"actionsmenu3671995341__action"};
+export var classes = {"root":"actionsmenu1397751256__root","action":"actionsmenu1397751256__action"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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_ = "formaudiofield1943540213";
+var _namespace_ = "formaudiofield3743157660";
 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":"formaudiofield1943540213__root","addItem":"formaudiofield1943540213__addItem","mediaTitle":"formaudiofield1943540213__mediaTitle"};
+export var classes = {"root":"formaudiofield3743157660__root","addItem":"formaudiofield3743157660__addItem","mediaTitle":"formaudiofield3743157660__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_ = "audioplayer2417328348";
+var _namespace_ = "audioplayer2787828225";
 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":"audioplayer2417328348__root"};
+export var classes = {"root":"audioplayer2787828225__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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_ = "cellcolorview3557913876";
+var _namespace_ = "cellcolorview4225418284";
 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":"cellcolorview3557913876__root","hashPrefix":"cellcolorview3557913876__hashPrefix"};
+export var classes = {"root":"cellcolorview4225418284__root","hashPrefix":"cellcolorview4225418284__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_ = "colorview3341471977";
+var _namespace_ = "colorview3472694465";
 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":"colorview3341471977__root","view":"colorview3341471977__view","fillPreview":"colorview3341471977__fillPreview"};
+export var classes = {"root":"colorview3472694465__root","view":"colorview3472694465__view","fillPreview":"colorview3472694465__fillPreview"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "deletedialog516047347";
+var _namespace_ = "deletedialog3903000196";
 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":"deletedialog516047347__root","layout":"deletedialog516047347__layout"};
+export var classes = {"root":"deletedialog3903000196__root","layout":"deletedialog3903000196__layout"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "formdocumentfield1759869050";
+var _namespace_ = "formdocumentfield3549365286";
 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":"formdocumentfield1759869050__root","viewWrapper":"formdocumentfield1759869050__viewWrapper","textWidth":"formdocumentfield1759869050__textWidth","documentLoader":"formdocumentfield1759869050__documentLoader","addDocument":"formdocumentfield1759869050__addDocument","addItemWrapper":"formdocumentfield1759869050__addItemWrapper"};
+export var classes = {"root":"formdocumentfield3549365286__root","viewWrapper":"formdocumentfield3549365286__viewWrapper","textWidth":"formdocumentfield3549365286__textWidth","documentLoader":"formdocumentfield3549365286__documentLoader","addDocument":"formdocumentfield3549365286__addDocument","addItemWrapper":"formdocumentfield3549365286__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_ = "exclamation2405445415";
+var _namespace_ = "exclamation627976924";
 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":"exclamation2405445415__root","exclamation":"exclamation2405445415__exclamation","actions":"exclamation2405445415__actions","action":"exclamation2405445415__action"};
+export var classes = {"root":"exclamation627976924__root","exclamation":"exclamation627976924__exclamation","actions":"exclamation627976924__actions","action":"exclamation627976924__action"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/field-validation-settings/field-validation-settings-input.tsx

@@ -15,6 +15,7 @@ import { v4 as uuid } from 'uuid';
 import type { ControlledInputProps } from '../../types/controlled-input';
 import type {
   CharactersLimitFieldValidationRuleConfig,
+  FieldValidationRule,
   FieldValidationRuleConfig,
   FieldValidationSettingsValue,
   PatternFieldValidationRuleConfig,
@@ -29,6 +30,8 @@ export interface FieldValidationSettingsInputProps
     'autoFocus' | 'onBlur'
   > {
   rules: readonly FieldValidationRuleConfig[];
+  /** Rules the caller has fixed and the user can't toggle, independent of `readOnly`. */
+  disabledRules?: readonly FieldValidationRule[];
 }
 
 interface RuleToggleProps {
@@ -73,7 +76,10 @@ export const FieldValidationSettingsInput = ({
   invalid,
   dataHook = 'field-validation-settings',
   rules,
+  disabledRules,
 }: FieldValidationSettingsInputProps) => {
+  const isRuleDisabled = (rule: FieldValidationRule) =>
+    Boolean(readOnly) || Boolean(disabledRules?.includes(rule));
   const supportedRules = rules.map(({ type }) => type);
   const violations = getFieldValidationSettingsViolations(data, supportedRules);
   const supportsSpecificValues = rules.some(
@@ -102,7 +108,7 @@ export const FieldValidationSettingsInput = ({
       key="required"
       dataHook="field-validation-required"
       checked={Boolean(data.required)}
-      disabled={readOnly}
+      disabled={isRuleDisabled('required')}
       label={rule.label}
       infoContent={rule.tooltip}
       onChange={() => update({ required: !data.required })}
@@ -135,7 +141,10 @@ export const FieldValidationSettingsInput = ({
         <RuleToggle
           dataHook="field-validation-characters-limit"
           checked={hasCharactersLimit}
-          disabled={readOnly || (hasSpecificValues && !hasCharactersLimit)}
+          disabled={
+            isRuleDisabled('charactersLimit') ||
+            (hasSpecificValues && !hasCharactersLimit)
+          }
           label={rule.label}
           infoContent={rule.tooltip}
           onChange={() =>
@@ -150,7 +159,7 @@ export const FieldValidationSettingsInput = ({
                   dataHook="field-validation-min-characters"
                   size="small"
                   value={data.charactersLimit?.min}
-                  disabled={readOnly}
+                  disabled={isRuleDisabled('charactersLimit')}
                   status={
                     hasUnattributedInvalidState || minViolation
                       ? 'error'
@@ -184,7 +193,7 @@ export const FieldValidationSettingsInput = ({
                   dataHook="field-validation-max-characters"
                   size="small"
                   value={data.charactersLimit?.max}
-                  disabled={readOnly}
+                  disabled={isRuleDisabled('charactersLimit')}
                   status={
                     hasUnattributedInvalidState ||
                     maxOutOfBoundsViolation ||
@@ -227,7 +236,8 @@ export const FieldValidationSettingsInput = ({
         dataHook="field-validation-specific-values"
         checked={hasSpecificValues}
         disabled={
-          readOnly || ((hasCharactersLimit || hasPattern) && !hasSpecificValues)
+          isRuleDisabled('specificValues') ||
+          ((hasCharactersLimit || hasPattern) && !hasSpecificValues)
         }
         label={rule.label}
         infoContent={rule.tooltip}
@@ -251,7 +261,7 @@ export const FieldValidationSettingsInput = ({
                     dataHook={`field-validation-specific-value-${index}`}
                     size="small"
                     value={option.value}
-                    disabled={readOnly}
+                    disabled={isRuleDisabled('specificValues')}
                     status={
                       optionViolation || hasUnattributedInvalidState
                         ? 'error'
@@ -280,7 +290,7 @@ export const FieldValidationSettingsInput = ({
                     dataHook={`field-validation-specific-value-remove-${index}`}
                     size="tiny"
                     priority="secondary"
-                    disabled={readOnly}
+                    disabled={isRuleDisabled('specificValues')}
                     ariaLabel={rule.removeButton}
                     onClick={() =>
                       update({
@@ -301,7 +311,7 @@ export const FieldValidationSettingsInput = ({
               dataHook="field-validation-specific-value-add"
               size="small"
               prefixIcon={<AddSmall />}
-              disabled={readOnly}
+              disabled={isRuleDisabled('specificValues')}
               onClick={() =>
                 update({
                   specificValues: [
@@ -335,7 +345,9 @@ export const FieldValidationSettingsInput = ({
         <RuleToggle
           dataHook="field-validation-pattern"
           checked={hasPattern}
-          disabled={readOnly || (hasSpecificValues && !hasPattern)}
+          disabled={
+            isRuleDisabled('pattern') || (hasSpecificValues && !hasPattern)
+          }
           label={rule.label}
           infoContent={rule.tooltip}
           onChange={() => update({ pattern: hasPattern ? undefined : '' })}
@@ -346,7 +358,7 @@ export const FieldValidationSettingsInput = ({
               dataHook="field-validation-pattern-input"
               size="small"
               value={data.pattern}
-              disabled={readOnly}
+              disabled={isRuleDisabled('pattern')}
               status={
                 hasUnattributedInvalidState || invalidPatternViolation
                   ? 'error'

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "highlightedtext106472051";
+var _namespace_ = "highlightedtext3674572764";
 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":"highlightedtext106472051__root","substring":"highlightedtext106472051__substring"};
-export var keyframes = {"highlighted":"highlightedtext106472051__highlighted","highlighted-match":"highlightedtext106472051__highlighted-match"}; 
+export var classes = {"root":"highlightedtext3674572764__root","substring":"highlightedtext3674572764__substring"};
+export var keyframes = {"highlighted":"highlightedtext3674572764__highlighted","highlighted-match":"highlightedtext3674572764__highlighted-match"}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {}; 

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "thumbnailreplaceoverlay1401102869";
+var _namespace_ = "thumbnailreplaceoverlay1623114284";
 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":"thumbnailreplaceoverlay1401102869__root","icon":"thumbnailreplaceoverlay1401102869__icon"};
+export var classes = {"root":"thumbnailreplaceoverlay1623114284__root","icon":"thumbnailreplaceoverlay1623114284__icon"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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_ = "cellmediaeditshell2282788607";
+var _namespace_ = "cellmediaeditshell1721400213";
 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":"cellmediaeditshell2282788607__root"};
+export var classes = {"root":"cellmediaeditshell1721400213__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_ = "pasteurlbutton2169628829";
+var _namespace_ = "pasteurlbutton3225979476";
 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":"pasteurlbutton2169628829__root","iconButtonTooltip":"pasteurlbutton2169628829__iconButtonTooltip","iconButton":"pasteurlbutton2169628829__iconButton"};
+export var classes = {"root":"pasteurlbutton3225979476__root","iconButtonTooltip":"pasteurlbutton3225979476__iconButtonTooltip","iconButton":"pasteurlbutton3225979476__iconButton"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -1,4 +1,4 @@
-import React, { useCallback, useRef, useState } from 'react';
+import React, { useCallback, useMemo, useRef, useState } from 'react';
 import {
   AvatarGroup,
   Box,
@@ -53,20 +53,21 @@ export const CellMediaGalleryEdit: React.FC<CellMediaGalleryEditProps> = ({
 }) => {
   const { t } = useTranslations();
   const containerRef = useRef<HTMLDivElement | null>(null);
-  const hasValue = Boolean(value?.length);
+  const items = useMemo(() => (Array.isArray(value) ? value : []), [value]);
+  const hasValue = items.length > 0;
   const [isPreviewOpen, setIsPreviewOpen] = useState(false);
   // Tracks whether a commit happened during the current external-UI session.
   // Prevents calling onCancel() after the user already committed (e.g., clear
   // in the preview modal fires onClear then onClose, but we should not cancel).
   const didCommitRef = useRef(false);
 
-  const avatarItems = (value ?? []).map((item) => ({
+  const avatarItems = items.map((item) => ({
     imgProps: { src: mediaURItoImageURL(item.src, ThumbnailSize.S) },
   }));
 
   const { openMediaGalleryDialog, ...dialogProps } = useMediaGalleryDialog({
     initialOpen: false,
-    items: value ?? [],
+    items,
     onChange: (items: WixCodeGalleryItem[]) => {
       didCommitRef.current = true;
       onChange(items.length > 0 ? items : null);
@@ -112,18 +113,22 @@ export const CellMediaGalleryEdit: React.FC<CellMediaGalleryEditProps> = ({
 
   const onDownloadMedia = useCallback(
     async (mediaUri?: string) => {
-      const uri = mediaUri ?? value?.[0]?.src;
-      if (!uri) return;
+      const uri = mediaUri ?? items[0]?.src;
+      if (!uri) {
+        return;
+      }
       try {
         const result = await files.generateFileDownloadUrl(uri);
         const downloadUrl = result.downloadUrls?.[0]?.url;
-        if (!downloadUrl) throw new Error('No download URL returned');
+        if (!downloadUrl) {
+          throw new Error('No download URL returned');
+        }
         executeDownloading(downloadUrl);
       } catch {
         executeDownloading(getMediaURL(uri));
       }
     },
-    [value],
+    [items],
   );
 
   const { handleContainerFocus, handleContainerBlur } = useCellEditKeyboard({
@@ -210,7 +215,7 @@ export const CellMediaGalleryEdit: React.FC<CellMediaGalleryEditProps> = ({
       <MediaPreviewModal
         isOpen={isPreviewOpen}
         onClose={handlePreviewClose}
-        value={(value ?? []).map((item) => item.src)}
+        value={items.map((item) => item.src)}
         onRequestMedia={handlePreviewRequestMedia}
         onClearMedia={handlePreviewClear}
         onDownloadMedia={onDownloadMedia}

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_ = "formmediagalleryfield1285781073";
+var _namespace_ = "formmediagalleryfield3126291197";
 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":"formmediagalleryfield1285781073__root","container":"formmediagalleryfield1285781073__container","viewBox":"formmediagalleryfield1285781073__viewBox","addItemWrapper":"formmediagalleryfield1285781073__addItemWrapper","addItem":"formmediagalleryfield1285781073__addItem","overlay":"formmediagalleryfield1285781073__overlay","image":"formmediagalleryfield1285781073__image","previewImage":"formmediagalleryfield1285781073__previewImage","previewVideo":"formmediagalleryfield1285781073__previewVideo"};
+export var classes = {"root":"formmediagalleryfield3126291197__root","container":"formmediagalleryfield3126291197__container","viewBox":"formmediagalleryfield3126291197__viewBox","addItemWrapper":"formmediagalleryfield3126291197__addItemWrapper","addItem":"formmediagalleryfield3126291197__addItem","overlay":"formmediagalleryfield3126291197__overlay","image":"formmediagalleryfield3126291197__image","previewImage":"formmediagalleryfield3126291197__previewImage","previewVideo":"formmediagalleryfield3126291197__previewVideo"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/media-image/media-image.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "mediaimage369066312";
+var _namespace_ = "mediaimage2155391907";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,12 +13,12 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"mediaimage369066312__root"};
+export var classes = {"root":"mediaimage2155391907__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {}; 
-export var vars = {"wds-color-red-200":"--wds-color-red-200","wsr-color-R20":"--wsr-color-R20","wds-color-black-550":"--wds-color-black-550","wsr-color-D55":"--wsr-color-D55","from":"--mediaimage369066312-from","to":"--mediaimage369066312-to"}; 
+export var vars = {"wds-color-red-200":"--wds-color-red-200","wsr-color-R20":"--wsr-color-R20","wds-color-black-550":"--wds-color-black-550","wsr-color-D55":"--wsr-color-D55","from":"--mediaimage2155391907-from","to":"--mediaimage2155391907-to"}; 
 
 
 

package/src/components/media-image/overlays/overlay.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "overlay652708390";
+var _namespace_ = "overlay1396694329";
 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":"overlay652708390__root","iconOverlay":"overlay652708390__iconOverlay"};
+export var classes = {"root":"overlay1396694329__root","iconOverlay":"overlay1396694329__iconOverlay"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/media-loader/media-loader.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "medialoader2912078919";
+var _namespace_ = "medialoader1747610086";
 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":"medialoader2912078919__root","loader":"medialoader2912078919__loader"};
+export var classes = {"root":"medialoader1747610086__root","loader":"medialoader1747610086__loader"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/media-tag/web-media-tag/media-tag.st.css.ts

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

package/src/components/multi-document/cell-multi-document-edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "cellmultidocumentedit1848840766";
+var _namespace_ = "cellmultidocumentedit1981091350";
 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":"cellmultidocumentedit1848840766__root","chipTrigger":"cellmultidocumentedit1848840766__chipTrigger"};
+export var classes = {"root":"cellmultidocumentedit1981091350__root","chipTrigger":"cellmultidocumentedit1981091350__chipTrigger"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -61,7 +61,7 @@ export const CellMultiDocumentEdit: React.FC<CellMultiDocumentEditProps> = ({
   const { t } = useTranslations();
   const msid = useWixPatternsContainer()?.environment?.msid;
 
-  const uris = useMemo(() => value ?? [], [value]);
+  const uris = useMemo(() => (Array.isArray(value) ? value : []), [value]);
   const containerRef = useRef<HTMLDivElement | null>(null);
 
   const handleMultiChange = useCallback(

package/src/components/multi-document/multi-document-input/form-multi-document.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "formmultidocument951527975";
+var _namespace_ = "formmultidocument1148866053";
 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":"formmultidocument951527975__root","viewRoot":"formmultidocument951527975__viewRoot","singleViewWrapper":"formmultidocument951527975__singleViewWrapper","addDocumentButton":"formmultidocument951527975__addDocumentButton"};
+export var classes = {"root":"formmultidocument1148866053__root","viewRoot":"formmultidocument1148866053__viewRoot","singleViewWrapper":"formmultidocument1148866053__singleViewWrapper","addDocumentButton":"formmultidocument1148866053__addDocumentButton"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/reference/cell-multi-reference-input.st.css.ts

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

package/src/components/reference/cell-reference-input.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "cellreferenceinput2046600745";
+var _namespace_ = "cellreferenceinput4010207524";
 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":"cellreferenceinput2046600745__root","autocomplete":"cellreferenceinput2046600745__autocomplete"};
+export var classes = {"root":"cellreferenceinput4010207524__root","autocomplete":"cellreferenceinput4010207524__autocomplete"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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_ = "richcontentdefaultvalueinput2000961037";
+var _namespace_ = "richcontentdefaultvalueinput1906630195";
 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":"richcontentdefaultvalueinput2000961037__root","richContentEditorContainer":"richcontentdefaultvalueinput2000961037__richContentEditorContainer","editor":"richcontentdefaultvalueinput2000961037__editor"};
+export var classes = {"root":"richcontentdefaultvalueinput1906630195__root","richContentEditorContainer":"richcontentdefaultvalueinput1906630195__richContentEditorContainer","editor":"richcontentdefaultvalueinput1906630195__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_ = "richcontentforminput2414334911";
+var _namespace_ = "richcontentforminput2136013358";
 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":"richcontentforminput2414334911__root","editor":"richcontentforminput2414334911__editor"};
+export var classes = {"root":"richcontentforminput2136013358__root","editor":"richcontentforminput2136013358__editor"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};