@wix/patterns-fields 1.123.0 → 1.125.0

package/dist/types/components/rich-content/rich-content-input/rich-content-editor/rich-content-toolbar.st.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"rich-content-toolbar.st.css.d.ts","sourceRoot":"","sources":["../../../../../../src/components/rich-content/rich-content-input/rich-content-editor/rich-content-toolbar.st.css.ts"],"names":[],"mappings":"AAUA,eAAO,IAAI,SAAS,+BAAwC,CAAC;AAC7D,eAAO,IAAI,KAAK,EAAE,OAAO,mBAAmB,EAAE,UAAoB,CAAC;AACnE,eAAO,IAAI,EAAE,EAAE,OAAO,mBAAmB,EAAE,UAAoB,CAAC;AAEhE,eAAO,IAAI,SAAS,QAAc,CAAC;AACnC,eAAO,IAAI,OAAO;;;;;CAAkN,CAAC;AACrO,eAAO,IAAI,SAAS,IAAK,CAAC;AAC1B,eAAO,IAAI,MAAM,IAAK,CAAC;AACvB,eAAO,IAAI,UAAU,IAAK,CAAC;AAC3B,eAAO,IAAI,MAAM,IAAK,CAAC;AACvB,eAAO,IAAI,IAAI,IAAK,CAAC"}
+{"version":3,"file":"rich-content-toolbar.st.css.d.ts","sourceRoot":"","sources":["../../../../../../src/components/rich-content/rich-content-input/rich-content-editor/rich-content-toolbar.st.css.ts"],"names":[],"mappings":"AAUA,eAAO,IAAI,SAAS,+BAAwC,CAAC;AAC7D,eAAO,IAAI,KAAK,EAAE,OAAO,mBAAmB,EAAE,UAAoB,CAAC;AACnE,eAAO,IAAI,EAAE,EAAE,OAAO,mBAAmB,EAAE,UAAoB,CAAC;AAEhE,eAAO,IAAI,SAAS,QAAc,CAAC;AACnC,eAAO,IAAI,OAAO;;;;;CAAsN,CAAC;AACzO,eAAO,IAAI,SAAS,IAAK,CAAC;AAC1B,eAAO,IAAI,MAAM,IAAK,CAAC;AACvB,eAAO,IAAI,UAAU,IAAK,CAAC;AAC3B,eAAO,IAAI,MAAM,IAAK,CAAC;AACvB,eAAO,IAAI,IAAI,IAAK,CAAC"}

package/dist/types/components/rich-text/rich-text-input/rich-text-editor/rich-editor.st.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"rich-editor.st.css.d.ts","sourceRoot":"","sources":["../../../../../../src/components/rich-text/rich-text-input/rich-text-editor/rich-editor.st.css.ts"],"names":[],"mappings":"AAUA,eAAO,IAAI,SAAS,+BAAwC,CAAC;AAC7D,eAAO,IAAI,KAAK,EAAE,OAAO,mBAAmB,EAAE,UAAoB,CAAC;AACnE,eAAO,IAAI,EAAE,EAAE,OAAO,mBAAmB,EAAE,UAAoB,CAAC;AAEhE,eAAO,IAAI,SAAS,QAAc,CAAC;AACnC,eAAO,IAAI,OAAO;;;;;;;;;;;;;;;;;;CAAyyB,CAAC;AAC5zB,eAAO,IAAI,SAAS,IAAK,CAAC;AAC1B,eAAO,IAAI,MAAM,IAAK,CAAC;AACvB,eAAO,IAAI,UAAU,IAAK,CAAC;AAC3B,eAAO,IAAI,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAiqK,CAAC;AACnrK,eAAO,IAAI,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAg0E,CAAC"}
+{"version":3,"file":"rich-editor.st.css.d.ts","sourceRoot":"","sources":["../../../../../../src/components/rich-text/rich-text-input/rich-text-editor/rich-editor.st.css.ts"],"names":[],"mappings":"AAUA,eAAO,IAAI,SAAS,+BAAwC,CAAC;AAC7D,eAAO,IAAI,KAAK,EAAE,OAAO,mBAAmB,EAAE,UAAoB,CAAC;AACnE,eAAO,IAAI,EAAE,EAAE,OAAO,mBAAmB,EAAE,UAAoB,CAAC;AAEhE,eAAO,IAAI,SAAS,QAAc,CAAC;AACnC,eAAO,IAAI,OAAO;;;;;;;;;;;;;;;;;;CAA0zB,CAAC;AAC70B,eAAO,IAAI,SAAS,IAAK,CAAC;AAC1B,eAAO,IAAI,MAAM,IAAK,CAAC;AACvB,eAAO,IAAI,UAAU,IAAK,CAAC;AAC3B,eAAO,IAAI,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAiqK,CAAC;AACnrK,eAAO,IAAI,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAg0E,CAAC"}

package/dist/types/components/rich-text/rich-text-input/rich-text-editor/toolbar/toolbar.st.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toolbar.st.css.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/rich-text/rich-text-input/rich-text-editor/toolbar/toolbar.st.css.ts"],"names":[],"mappings":"AAUA,eAAO,IAAI,SAAS,+BAAwC,CAAC;AAC7D,eAAO,IAAI,KAAK,EAAE,OAAO,mBAAmB,EAAE,UAAoB,CAAC;AACnE,eAAO,IAAI,EAAE,EAAE,OAAO,mBAAmB,EAAE,UAAoB,CAAC;AAEhE,eAAO,IAAI,SAAS,QAAc,CAAC;AACnC,eAAO,IAAI,OAAO;;;;;;;;;;;;;;;;;;CAA46B,CAAC;AAC/7B,eAAO,IAAI,SAAS,IAAK,CAAC;AAC1B,eAAO,IAAI,MAAM,IAAK,CAAC;AACvB,eAAO,IAAI,UAAU,IAAK,CAAC;AAC3B,eAAO,IAAI,MAAM,IAAK,CAAC;AACvB,eAAO,IAAI,IAAI;;;;;;;;;;;;;CAAojB,CAAC"}
+{"version":3,"file":"toolbar.st.css.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/rich-text/rich-text-input/rich-text-editor/toolbar/toolbar.st.css.ts"],"names":[],"mappings":"AAUA,eAAO,IAAI,SAAS,+BAAwC,CAAC;AAC7D,eAAO,IAAI,KAAK,EAAE,OAAO,mBAAmB,EAAE,UAAoB,CAAC;AACnE,eAAO,IAAI,EAAE,EAAE,OAAO,mBAAmB,EAAE,UAAoB,CAAC;AAEhE,eAAO,IAAI,SAAS,QAAc,CAAC;AACnC,eAAO,IAAI,OAAO;;;;;;;;;;;;;;;;;;CAA67B,CAAC;AACh9B,eAAO,IAAI,SAAS,IAAK,CAAC;AAC1B,eAAO,IAAI,MAAM,IAAK,CAAC;AACvB,eAAO,IAAI,UAAU,IAAK,CAAC;AAC3B,eAAO,IAAI,MAAM,IAAK,CAAC;AACvB,eAAO,IAAI,IAAI;;;;;;;;;;;;;CAAojB,CAAC"}

package/dist/types/utils/detect-field-type.d.ts

@@ -1,7 +1,7 @@
 import { type DetectColumnType, type PatternsFieldType } from '@wix/bex-core';
 /**
  * Media-aware column type detection for the CSV import "create new field" flow.
- * Adds image / video / document / audio on top of core's primitive detection,
+ * Adds image / video / document on top of core's primitive detection,
  * reusing core's sampling + majority logic. Injected into `ImportState` via the
  * `detectColumnType` prop (see `@wix/patterns` ImportButton wiring).
  */

package/dist/types/utils/detect-field-type.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"detect-field-type.d.ts","sourceRoot":"","sources":["../../../src/utils/detect-field-type.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,gBAAgB,EAErB,KAAK,iBAAiB,EACvB,MAAM,eAAe,CAAC;AAwDvB;;;;;GAKG;AACH,eAAO,MAAM,eAAe,EAAE,gBACsB,CAAC;AAErD,eAAO,MAAM,4BAA4B,GACvC,MAAM,iBAAiB,EACvB,KAAK,MAAM,KACV,OAAO,GAAG,SA8CZ,CAAC"}
+{"version":3,"file":"detect-field-type.d.ts","sourceRoot":"","sources":["../../../src/utils/detect-field-type.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,gBAAgB,EAErB,KAAK,iBAAiB,EACvB,MAAM,eAAe,CAAC;AAsDvB;;;;;GAKG;AACH,eAAO,MAAM,eAAe,EAAE,gBACsB,CAAC;AAErD,eAAO,MAAM,4BAA4B,GACvC,MAAM,iBAAiB,EACvB,KAAK,MAAM,KACV,OAAO,GAAG,SA8CZ,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/patterns-fields",
-  "version": "1.123.0",
+  "version": "1.125.0",
   "license": "UNLICENSED",
   "author": {
     "name": "Kobi",
@@ -125,7 +125,7 @@
     "@wix/atlas": "^1.0.35",
     "@wix/data": "^1.0.323",
     "@wix/media": "^1.0.231",
-    "@wix/patterns-fields-utils": "1.104.0",
+    "@wix/patterns-fields-utils": "1.106.0",
     "@wix/rich-content": "1.0.37",
     "@wix/sdk": "^1.17.2",
     "@wix/wix-ui-icons-common": "^3.189.0",
@@ -153,7 +153,7 @@
     "@types/lodash": "^4.17.20",
     "@types/react": "^16.14.68",
     "@wix/babel-cli": "^1.11.0",
-    "@wix/bex-core": "2.401.0",
+    "@wix/bex-core": "2.403.0",
     "@wix/design-system": "^1.336.0",
     "@wix/eslint-config-yoshi": "^6.74.0",
     "@wix/jest-yoshi-preset": "^6.74.0",
@@ -216,5 +216,5 @@
       "optional": true
     }
   },
-  "falconPackageHash": "fa5b487e8f97998ef62f44ac106e849f0b34badbcc316df64757475b"
+  "falconPackageHash": "f3a2c37866855e949c8cd84c6fb4ddde1f610f344163ab7f1f72d048"
 }

package/src/__tests__/components/media-image-field/form-media-image-input.spec.tsx

@@ -84,7 +84,8 @@ describe('FormMediaImageInput', () => {
 describe('ControlledMediaImageInput', () => {
   const renderInput = (
     data: MediaImageValue | null,
-    openMediaManager: jest.Mock,
+    openMediaManager: jest.Mock = jest.fn(),
+    { readOnly = false } = {},
   ) => {
     const onChange = jest.fn();
     const { container } = render(
@@ -101,6 +102,7 @@ describe('ControlledMediaImageInput', () => {
           <ControlledMediaImageInput
             data={data}
             onChange={onChange}
+            readOnly={readOnly}
             dataHook="media-image-input"
           />
         </WixPatternsContainerProvider>
@@ -136,7 +138,6 @@ describe('ControlledMediaImageInput', () => {
       openMediaManager,
     );
 
-    await driver.simulateImageLoad();
     await driver.clickReplace();
     await act(async () => {});
 
@@ -148,4 +149,70 @@ describe('ControlledMediaImageInput', () => {
       }),
     );
   });
+
+  it('closes the preview when the image is replaced from it', async () => {
+    const openMediaManager = jest.fn().mockResolvedValue(pick(otherUri));
+    const { driver, onChange } = renderInput(
+      mediaManagerImage,
+      openMediaManager,
+    );
+
+    await driver.openPreview();
+    await driver.clickPreviewReplace();
+    await act(async () => {});
+
+    expect(await driver.isPreviewOpen()).toBe(false);
+    expect(onChange).toHaveBeenCalledWith(
+      expect.objectContaining({ uri: otherUri }),
+    );
+  });
+
+  it('replaces the image with a URL and keeps the alt text', async () => {
+    const { driver, onChange } = renderInput(mediaManagerImage);
+
+    await driver.replaceWithUrl('https://example.com/dog.png');
+
+    expect(onChange).toHaveBeenCalledWith({
+      url: 'https://example.com/dog.png',
+      altText: 'A cat',
+    });
+  });
+
+  it('opens the preview from the more actions menu', async () => {
+    const { driver } = renderInput(mediaManagerImage);
+
+    await driver.openPreview();
+
+    expect(await driver.isPreviewOpen()).toBe(true);
+  });
+
+  it('closes the preview on Escape', async () => {
+    const { driver } = renderInput(mediaManagerImage);
+    await driver.openPreview();
+
+    await driver.pressEscapeInPreview();
+
+    expect(await driver.isPreviewOpen()).toBe(false);
+  });
+
+  it('deletes the image from the more actions menu', async () => {
+    const { driver, onChange } = renderInput(mediaManagerImage);
+
+    await driver.clickDelete();
+
+    expect(onChange).toHaveBeenCalledWith(null);
+  });
+
+  it('keeps preview but not editing when read-only', async () => {
+    const { driver, onChange } = renderInput(mediaManagerImage, jest.fn(), {
+      readOnly: true,
+    });
+
+    expect(await driver.isReplaceDisabled()).toBe(true);
+    await driver.clickDelete();
+    expect(onChange).not.toHaveBeenCalled();
+
+    await driver.openPreview();
+    expect(await driver.isPreviewOpen()).toBe(true);
+  });
 });

package/src/__tests__/utils/detect-field-type.spec.ts

@@ -18,15 +18,15 @@ describe('detectFieldType (media-aware column detection)', () => {
     expect(detectFieldType([IMAGE_URI])).toBe('image');
     expect(detectFieldType([VIDEO_URI])).toBe('video');
     expect(detectFieldType([DOCUMENT_URI])).toBe('document');
-    expect(detectFieldType([AUDIO_URI])).toBe('audio');
+    expect(detectFieldType([AUDIO_URI])).toBe('document');
   });
 
-  it('detects audio (a superset beyond cm-import)', () => {
-    expect(detectFieldType([AUDIO_URI, AUDIO_URI])).toBe('audio');
+  it('detects audio through the document validator, as cm-import does', () => {
+    expect(detectFieldType([AUDIO_URI, AUDIO_URI])).toBe('document');
   });
 
-  it('treats a Wix vector (SVG) URI as image', () => {
-    expect(detectFieldType([VECTOR_URI])).toBe('image');
+  it('leaves vector URIs as text, as cm-import detection does', () => {
+    expect(detectFieldType([VECTOR_URI])).toBe('text');
   });
 
   it('detects an external image URL as image (media wins over url)', () => {

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "addressinput1084459100";
+var _namespace_ = "addressinput1402141888";
 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":"addressinput1084459100__root","tableAddressInput":"addressinput1084459100__tableAddressInput"};
+export var classes = {"root":"addressinput1402141888__root","tableAddressInput":"addressinput1402141888__tableAddressInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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_ = "actionsmenu583491998";
+var _namespace_ = "actionsmenu2035467994";
 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":"actionsmenu583491998__root","action":"actionsmenu583491998__action"};
+export var classes = {"root":"actionsmenu2035467994__root","action":"actionsmenu2035467994__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_ = "formaudiofield2001278846";
+var _namespace_ = "formaudiofield7270336";
 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":"formaudiofield2001278846__root","addItem":"formaudiofield2001278846__addItem","mediaTitle":"formaudiofield2001278846__mediaTitle"};
+export var classes = {"root":"formaudiofield7270336__root","addItem":"formaudiofield7270336__addItem","mediaTitle":"formaudiofield7270336__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_ = "audioplayer1176791793";
+var _namespace_ = "audioplayer3867044052";
 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":"audioplayer1176791793__root"};
+export var classes = {"root":"audioplayer3867044052__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_ = "cellcolorview592802812";
+var _namespace_ = "cellcolorview4152626303";
 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":"cellcolorview592802812__root","hashPrefix":"cellcolorview592802812__hashPrefix"};
+export var classes = {"root":"cellcolorview4152626303__root","hashPrefix":"cellcolorview4152626303__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_ = "colorview665258541";
+var _namespace_ = "colorview3477523682";
 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":"colorview665258541__root","view":"colorview665258541__view","fillPreview":"colorview665258541__fillPreview"};
+export var classes = {"root":"colorview3477523682__root","view":"colorview3477523682__view","fillPreview":"colorview3477523682__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_ = "deletedialog3726304062";
+var _namespace_ = "deletedialog2775773807";
 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":"deletedialog3726304062__root","layout":"deletedialog3726304062__layout"};
+export var classes = {"root":"deletedialog2775773807__root","layout":"deletedialog2775773807__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_ = "formdocumentfield3714463201";
+var _namespace_ = "formdocumentfield2041694607";
 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":"formdocumentfield3714463201__root","viewWrapper":"formdocumentfield3714463201__viewWrapper","textWidth":"formdocumentfield3714463201__textWidth","documentLoader":"formdocumentfield3714463201__documentLoader","addDocument":"formdocumentfield3714463201__addDocument","addItemWrapper":"formdocumentfield3714463201__addItemWrapper"};
+export var classes = {"root":"formdocumentfield2041694607__root","viewWrapper":"formdocumentfield2041694607__viewWrapper","textWidth":"formdocumentfield2041694607__textWidth","documentLoader":"formdocumentfield2041694607__documentLoader","addDocument":"formdocumentfield2041694607__addDocument","addItemWrapper":"formdocumentfield2041694607__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_ = "exclamation1440793630";
+var _namespace_ = "exclamation495129048";
 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":"exclamation1440793630__root","exclamation":"exclamation1440793630__exclamation","actions":"exclamation1440793630__actions","action":"exclamation1440793630__action"};
+export var classes = {"root":"exclamation495129048__root","exclamation":"exclamation495129048__exclamation","actions":"exclamation495129048__actions","action":"exclamation495129048__action"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/field-validation-settings/field-validation-settings-input.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "fieldvalidationsettingsinput3638817165";
+var _namespace_ = "fieldvalidationsettingsinput722089932";
 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":"fieldvalidationsettingsinput3638817165__root","specificValuesInput":"fieldvalidationsettingsinput3638817165__specificValuesInput"};
+export var classes = {"root":"fieldvalidationsettingsinput722089932__root","specificValuesInput":"fieldvalidationsettingsinput722089932__specificValuesInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "highlightedtext1238120851";
+var _namespace_ = "highlightedtext1092630885";
 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":"highlightedtext1238120851__root","substring":"highlightedtext1238120851__substring"};
-export var keyframes = {"highlighted":"highlightedtext1238120851__highlighted","highlighted-match":"highlightedtext1238120851__highlighted-match"}; 
+export var classes = {"root":"highlightedtext1092630885__root","substring":"highlightedtext1092630885__substring"};
+export var keyframes = {"highlighted":"highlightedtext1092630885__highlighted","highlighted-match":"highlightedtext1092630885__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_ = "thumbnailreplaceoverlay2826730868";
+var _namespace_ = "thumbnailreplaceoverlay3362007242";
 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":"thumbnailreplaceoverlay2826730868__root","icon":"thumbnailreplaceoverlay2826730868__icon"};
+export var classes = {"root":"thumbnailreplaceoverlay3362007242__root","icon":"thumbnailreplaceoverlay3362007242__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_ = "cellmediaeditshell4284857621";
+var _namespace_ = "cellmediaeditshell2595876078";
 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":"cellmediaeditshell4284857621__root"};
+export var classes = {"root":"cellmediaeditshell2595876078__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_ = "pasteurlbutton871688670";
+var _namespace_ = "pasteurlbutton3722309293";
 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":"pasteurlbutton871688670__root","iconButtonTooltip":"pasteurlbutton871688670__iconButtonTooltip","iconButton":"pasteurlbutton871688670__iconButton"};
+export var classes = {"root":"pasteurlbutton3722309293__root","iconButtonTooltip":"pasteurlbutton3722309293__iconButtonTooltip","iconButton":"pasteurlbutton3722309293__iconButton"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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_ = "formmediagalleryfield1779683996";
+var _namespace_ = "formmediagalleryfield2443479833";
 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":"formmediagalleryfield1779683996__root","container":"formmediagalleryfield1779683996__container","viewBox":"formmediagalleryfield1779683996__viewBox","addItemWrapper":"formmediagalleryfield1779683996__addItemWrapper","addItem":"formmediagalleryfield1779683996__addItem","overlay":"formmediagalleryfield1779683996__overlay","image":"formmediagalleryfield1779683996__image","previewImage":"formmediagalleryfield1779683996__previewImage","previewVideo":"formmediagalleryfield1779683996__previewVideo"};
+export var classes = {"root":"formmediagalleryfield2443479833__root","container":"formmediagalleryfield2443479833__container","viewBox":"formmediagalleryfield2443479833__viewBox","addItemWrapper":"formmediagalleryfield2443479833__addItemWrapper","addItem":"formmediagalleryfield2443479833__addItem","overlay":"formmediagalleryfield2443479833__overlay","image":"formmediagalleryfield2443479833__image","previewImage":"formmediagalleryfield2443479833__previewImage","previewVideo":"formmediagalleryfield2443479833__previewVideo"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/media-gallery/media-preview-modal.tsx

@@ -59,7 +59,7 @@ export const MediaPreviewModal: React.FC<MediaPreviewProps> = ({
   }
 
   return (
-    <Modal isOpen screen="full">
+    <Modal isOpen screen="full" onRequestClose={onClose}>
       <MediaPreviewLayout
         src={value}
         onClose={onClose}
@@ -143,6 +143,7 @@ const MediaPreviewLayout: React.FC<MediaPreviewLayoutProps> = ({
               size="small"
               skin="light"
               prefixIcon={<Replace />}
+              dataHook="preview-modal-replace-button"
               onClick={onReplace}
               disabled={readOnly}
             >

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "mediaimage59134252";
+var _namespace_ = "mediaimage3563739252";
 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":"mediaimage59134252__root"};
+export var classes = {"root":"mediaimage3563739252__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":"--mediaimage59134252-from","to":"--mediaimage59134252-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":"--mediaimage3563739252-from","to":"--mediaimage3563739252-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_ = "overlay279034460";
+var _namespace_ = "overlay1797606365";
 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":"overlay279034460__root","iconOverlay":"overlay279034460__iconOverlay"};
+export var classes = {"root":"overlay1797606365__root","iconOverlay":"overlay1797606365__iconOverlay"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/media-image-field/cell-media-image-edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "cellmediaimageedit2205193049";
+var _namespace_ = "cellmediaimageedit3927008540";
 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":"cellmediaimageedit2205193049__root","view":"cellmediaimageedit2205193049__view","anchor":"cellmediaimageedit2205193049__anchor","anchorBox":"cellmediaimageedit2205193049__anchorBox","popoverContent":"cellmediaimageedit2205193049__popoverContent","image":"cellmediaimageedit2205193049__image","imageActions":"cellmediaimageedit2205193049__imageActions"};
+export var classes = {"root":"cellmediaimageedit3927008540__root","view":"cellmediaimageedit3927008540__view","anchor":"cellmediaimageedit3927008540__anchor","anchorBox":"cellmediaimageedit3927008540__anchorBox","popoverContent":"cellmediaimageedit3927008540__popoverContent","image":"cellmediaimageedit3927008540__image","imageActions":"cellmediaimageedit3927008540__imageActions"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};