@wix/patterns-fields 1.137.0 → 1.139.0

package/dist/types/utils/media-utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"media-utils.d.ts","sourceRoot":"","sources":["../../../src/utils/media-utils.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAqBH,eAAO,MAAM,gBAAgB,GAAI,KAAK,MAAM,KAAG,OAK9C,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,KAAK,MAAM,KAAG,OAK3C,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,KAAK,MAAM,KAAG,OAK3C,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,KAAK,MAAM,KAAG,OAK3C,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,KAAK,MAAM,KAAG,OAK5C,CAAC;AAiBF;;;GAGG;AACH,eAAO,MAAM,aAAa,GAAI,KAAK,MAAM,KAAG,MAyC3C,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,KAAK,MAAM,SAc7C,CAAC;AAGF,oBAAY,WAAW;IACrB,SAAS,cAAc;IACvB,KAAK,cAAc;IACnB,KAAK,mBAAmB;IACxB,KAAK,UAAU;IACf,OAAO,gBAAgB;IACvB,UAAU,eAAe;CAC1B;AAED;;GAEG;AACH,eAAO,MAAM,mBAAmB,GAC9B,MAAM,MAAM,GAAG,SAAS,EACxB,MAAM,UAAU,GAAG,OAAO,KACzB,OAeF,CAAC"}
+{"version":3,"file":"media-utils.d.ts","sourceRoot":"","sources":["../../../src/utils/media-utils.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAqBH,eAAO,MAAM,gBAAgB,GAAI,KAAK,MAAM,KAAG,OAK9C,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,KAAK,MAAM,KAAG,OAK3C,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,KAAK,MAAM,KAAG,OAK3C,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,KAAK,MAAM,KAAG,OAK3C,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,KAAK,MAAM,KAAG,OAK5C,CAAC;AAiBF;;;GAGG;AACH,eAAO,MAAM,aAAa,GAAI,KAAK,MAAM,KAAG,MAyC3C,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,KAAK,MAAM,SAc7C,CAAC;AAGF,oBAAY,WAAW;IACrB,SAAS,cAAc;IACvB,KAAK,cAAc;IACnB,KAAK,mBAAmB;IACxB,YAAY,UAAU;IACtB,KAAK,UAAU;IACf,OAAO,gBAAgB;IACvB,UAAU,eAAe;CAC1B;AAED;;GAEG;AACH,eAAO,MAAM,mBAAmB,GAC9B,MAAM,MAAM,GAAG,SAAS,EACxB,MAAM,UAAU,GAAG,OAAO,KACzB,OAeF,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/patterns-fields",
-  "version": "1.137.0",
+  "version": "1.139.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.118.0",
+    "@wix/patterns-fields-utils": "1.120.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.415.0",
+    "@wix/bex-core": "2.417.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": "aa1acc1ed2999ed1d1f86f9a0934a0c73997ba46f6edeb323596a592"
+  "falconPackageHash": "3680dff62ba7b83b76a196607fa20d1cbb6b187c08c71dc983558319"
 }

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

@@ -122,6 +122,10 @@ describe('ControlledMediaImageInput', () => {
     await driver.clickAdd();
     await act(async () => {});
 
+    expect(openMediaManager).toHaveBeenCalledWith({
+      multiSelect: false,
+      category: 'IMAGE',
+    });
     expect(onChange).toHaveBeenCalledWith(
       expect.objectContaining({
         uri,

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

@@ -133,12 +133,17 @@ describe('ControlledMediaVectorArtInput', () => {
   };
 
   it.each([
+    [
+      'an SDK vector payload',
+      { items: [{ media: { vector: { image: uri } } }] },
+    ],
     ['a vector payload', vectorPick(uri)],
     [
       'an uploaded svg',
       uploadedSvgPick(uri, '#originWidth=20&originHeight=20'),
     ],
     ['an uploaded svg without dimensions', uploadedSvgPick(uri)],
+    ['a vector URI payload', { items: [{ media: { vector: uri } }] }],
     ['a shape returned as an image', imageShapedPick(uri)],
   ])(
     'adds vector art from the vector-only media manager, for %s',

package/src/__tests__/exports/controlled-inputs.spec.tsx

@@ -690,7 +690,7 @@ describe('controlled inputs', () => {
 
     expect(openMediaManager).toHaveBeenCalledWith({
       multiSelect: false,
-      category: 'IMAGE',
+      category: 'AUTO_CMS_IMAGE',
     });
     expect(onChange).toHaveBeenCalledWith(IMAGE_URI);
   });

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "addressinput114199444";
+var _namespace_ = "addressinput2919605910";
 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":"addressinput114199444__root","tableAddressInput":"addressinput114199444__tableAddressInput"};
+export var classes = {"root":"addressinput2919605910__root","tableAddressInput":"addressinput2919605910__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_ = "actionsmenu1597087919";
+var _namespace_ = "actionsmenu2855674602";
 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":"actionsmenu1597087919__root","action":"actionsmenu1597087919__action"};
+export var classes = {"root":"actionsmenu2855674602__root","action":"actionsmenu2855674602__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_ = "formaudiofield1348294829";
+var _namespace_ = "formaudiofield534636109";
 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":"formaudiofield1348294829__root","addItem":"formaudiofield1348294829__addItem","mediaTitle":"formaudiofield1348294829__mediaTitle"};
+export var classes = {"root":"formaudiofield534636109__root","addItem":"formaudiofield534636109__addItem","mediaTitle":"formaudiofield534636109__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_ = "audioplayer2999202604";
+var _namespace_ = "audioplayer1914816497";
 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":"audioplayer2999202604__root"};
+export var classes = {"root":"audioplayer1914816497__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_ = "cellcolorview213279799";
+var _namespace_ = "cellcolorview2795548984";
 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":"cellcolorview213279799__root","hashPrefix":"cellcolorview213279799__hashPrefix"};
+export var classes = {"root":"cellcolorview2795548984__root","hashPrefix":"cellcolorview2795548984__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_ = "colorview2229559659";
+var _namespace_ = "colorview3146548517";
 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":"colorview2229559659__root","view":"colorview2229559659__view","fillPreview":"colorview2229559659__fillPreview"};
+export var classes = {"root":"colorview3146548517__root","view":"colorview3146548517__view","fillPreview":"colorview3146548517__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_ = "deletedialog3508369894";
+var _namespace_ = "deletedialog1937483240";
 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":"deletedialog3508369894__root","layout":"deletedialog3508369894__layout"};
+export var classes = {"root":"deletedialog1937483240__root","layout":"deletedialog1937483240__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_ = "formdocumentfield1376510536";
+var _namespace_ = "formdocumentfield351142117";
 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":"formdocumentfield1376510536__root","viewWrapper":"formdocumentfield1376510536__viewWrapper","textWidth":"formdocumentfield1376510536__textWidth","documentLoader":"formdocumentfield1376510536__documentLoader","addDocument":"formdocumentfield1376510536__addDocument","addItemWrapper":"formdocumentfield1376510536__addItemWrapper"};
+export var classes = {"root":"formdocumentfield351142117__root","viewWrapper":"formdocumentfield351142117__viewWrapper","textWidth":"formdocumentfield351142117__textWidth","documentLoader":"formdocumentfield351142117__documentLoader","addDocument":"formdocumentfield351142117__addDocument","addItemWrapper":"formdocumentfield351142117__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_ = "exclamation3161044644";
+var _namespace_ = "exclamation1616867887";
 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":"exclamation3161044644__root","exclamation":"exclamation3161044644__exclamation","actions":"exclamation3161044644__actions","action":"exclamation3161044644__action"};
+export var classes = {"root":"exclamation1616867887__root","exclamation":"exclamation1616867887__exclamation","actions":"exclamation1616867887__actions","action":"exclamation1616867887__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_ = "fieldvalidationsettingsinput269592080";
+var _namespace_ = "fieldvalidationsettingsinput1109279046";
 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":"fieldvalidationsettingsinput269592080__root","specificValuesInput":"fieldvalidationsettingsinput269592080__specificValuesInput"};
+export var classes = {"root":"fieldvalidationsettingsinput1109279046__root","specificValuesInput":"fieldvalidationsettingsinput1109279046__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_ = "highlightedtext1615297528";
+var _namespace_ = "highlightedtext3292884050";
 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":"highlightedtext1615297528__root","substring":"highlightedtext1615297528__substring"};
-export var keyframes = {"highlighted":"highlightedtext1615297528__highlighted","highlighted-match":"highlightedtext1615297528__highlighted-match"}; 
+export var classes = {"root":"highlightedtext3292884050__root","substring":"highlightedtext3292884050__substring"};
+export var keyframes = {"highlighted":"highlightedtext3292884050__highlighted","highlighted-match":"highlightedtext3292884050__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_ = "thumbnailreplaceoverlay715996622";
+var _namespace_ = "thumbnailreplaceoverlay3817806079";
 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":"thumbnailreplaceoverlay715996622__root","icon":"thumbnailreplaceoverlay715996622__icon"};
+export var classes = {"root":"thumbnailreplaceoverlay3817806079__root","icon":"thumbnailreplaceoverlay3817806079__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_ = "cellmediaeditshell1368214456";
+var _namespace_ = "cellmediaeditshell1830227566";
 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":"cellmediaeditshell1368214456__root"};
+export var classes = {"root":"cellmediaeditshell1830227566__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_ = "pasteurlbutton1749037355";
+var _namespace_ = "pasteurlbutton1683619953";
 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":"pasteurlbutton1749037355__root","iconButtonTooltip":"pasteurlbutton1749037355__iconButtonTooltip","iconButton":"pasteurlbutton1749037355__iconButton"};
+export var classes = {"root":"pasteurlbutton1683619953__root","iconButtonTooltip":"pasteurlbutton1683619953__iconButtonTooltip","iconButton":"pasteurlbutton1683619953__iconButton"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/media-control/use-media-control.ts

@@ -63,7 +63,8 @@ export type UseMediaControlReturnType =
   | UseMultiMediaControlReturnType;
 
 const MEDIA_TYPE_TO_CATEGORY: Partial<Record<MEDIA_TYPES, string>> = {
-  [MEDIA_TYPES.IMAGE]: 'IMAGE',
+  [MEDIA_TYPES.IMAGE]: 'AUTO_CMS_IMAGE',
+  [MEDIA_TYPES.RASTER_IMAGE]: 'IMAGE',
   [MEDIA_TYPES.VIDEO]: 'VIDEO',
   [MEDIA_TYPES.AUDIO]: 'MUSIC',
   [MEDIA_TYPES.VECTOR_ART]: 'VECTOR_ART',
@@ -104,6 +105,9 @@ const toVectorUri = (mediaId: string, title?: string): string | undefined => {
 const extractVectorUri = (vector: any): string | undefined => {
   const image = vector?.image;
   if (typeof image === 'string') {
+    if (image.startsWith('wix:vector://')) {
+      return image;
+    }
     const parsed = parseWixImageIdAndTitle(image);
     return parsed ? toVectorUri(parsed.mediaId, parsed.title) : undefined;
   }

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_ = "formmediagalleryfield2164174126";
+var _namespace_ = "formmediagalleryfield2313127835";
 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":"formmediagalleryfield2164174126__root","container":"formmediagalleryfield2164174126__container","viewBox":"formmediagalleryfield2164174126__viewBox","addItemWrapper":"formmediagalleryfield2164174126__addItemWrapper","addItem":"formmediagalleryfield2164174126__addItem","overlay":"formmediagalleryfield2164174126__overlay","image":"formmediagalleryfield2164174126__image","previewImage":"formmediagalleryfield2164174126__previewImage","previewVideo":"formmediagalleryfield2164174126__previewVideo"};
+export var classes = {"root":"formmediagalleryfield2313127835__root","container":"formmediagalleryfield2313127835__container","viewBox":"formmediagalleryfield2313127835__viewBox","addItemWrapper":"formmediagalleryfield2313127835__addItemWrapper","addItem":"formmediagalleryfield2313127835__addItem","overlay":"formmediagalleryfield2313127835__overlay","image":"formmediagalleryfield2313127835__image","previewImage":"formmediagalleryfield2313127835__previewImage","previewVideo":"formmediagalleryfield2313127835__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_ = "mediaimage1622867650";
+var _namespace_ = "mediaimage305131649";
 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":"mediaimage1622867650__root"};
+export var classes = {"root":"mediaimage305131649__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":"--mediaimage1622867650-from","to":"--mediaimage1622867650-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":"--mediaimage305131649-from","to":"--mediaimage305131649-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_ = "overlay1419648388";
+var _namespace_ = "overlay2601228231";
 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":"overlay1419648388__root","iconOverlay":"overlay1419648388__iconOverlay"};
+export var classes = {"root":"overlay2601228231__root","iconOverlay":"overlay2601228231__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_ = "cellmediaimageedit2438545026";
+var _namespace_ = "cellmediaimageedit3119060643";
 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":"cellmediaimageedit2438545026__root","view":"cellmediaimageedit2438545026__view","anchor":"cellmediaimageedit2438545026__anchor","anchorBox":"cellmediaimageedit2438545026__anchorBox","popoverContent":"cellmediaimageedit2438545026__popoverContent","image":"cellmediaimageedit2438545026__image","imageActions":"cellmediaimageedit2438545026__imageActions"};
+export var classes = {"root":"cellmediaimageedit3119060643__root","view":"cellmediaimageedit3119060643__view","anchor":"cellmediaimageedit3119060643__anchor","anchorBox":"cellmediaimageedit3119060643__anchorBox","popoverContent":"cellmediaimageedit3119060643__popoverContent","image":"cellmediaimageedit3119060643__image","imageActions":"cellmediaimageedit3119060643__imageActions"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -80,7 +80,7 @@ export const CellMediaImageEdit: React.FC<CellMediaImageEditProps> = ({
   const [popoverLayer, setPopoverLayer] = useState<PopoverLayer>('popover');
 
   const mediaEdit = useCellMediaEdit({
-    mediaType: MEDIA_TYPES.IMAGE,
+    mediaType: MEDIA_TYPES.RASTER_IMAGE,
     value: image,
     onChange,
     onCommit,

package/src/components/media-image-field/form-media-image-field.tsx

@@ -99,7 +99,7 @@ export const FormMediaImageField: FC<FormMediaImageFieldProps> = ({
   );
 
   const { callMedia, downloadMedia } = useMediaControl({
-    mediaType: MEDIA_TYPES.IMAGE,
+    mediaType: MEDIA_TYPES.RASTER_IMAGE,
     value: getImageSource(image),
     onChange: handlePick,
     autoFocus,

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "mediaimageview3728069080";
+var _namespace_ = "mediaimageview1356205264";
 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":"mediaimageview3728069080__root","altTextPlaceholder":"mediaimageview3728069080__altTextPlaceholder"};
+export var classes = {"root":"mediaimageview1356205264__root","altTextPlaceholder":"mediaimageview1356205264__altTextPlaceholder"};
 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_ = "mediatag2662243549";
+var _namespace_ = "mediatag1902047263";
 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":"mediatag2662243549__root"};
+export var classes = {"root":"mediatag1902047263__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "cellmediavectorartedit1547333802";
+var _namespace_ = "cellmediavectorartedit3063166162";
 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":"cellmediavectorartedit1547333802__root","thumbnailButton":"cellmediavectorartedit1547333802__thumbnailButton"};
+export var classes = {"root":"cellmediavectorartedit3063166162__root","thumbnailButton":"cellmediavectorartedit3063166162__thumbnailButton"};
 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_ = "cellmultidocumentedit1000827811";
+var _namespace_ = "cellmultidocumentedit1968525692";
 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":"cellmultidocumentedit1000827811__root","chipTrigger":"cellmultidocumentedit1000827811__chipTrigger"};
+export var classes = {"root":"cellmultidocumentedit1968525692__root","chipTrigger":"cellmultidocumentedit1968525692__chipTrigger"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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_ = "formmultidocument4280679900";
+var _namespace_ = "formmultidocument1456030943";
 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":"formmultidocument4280679900__root","viewRoot":"formmultidocument4280679900__viewRoot","singleViewWrapper":"formmultidocument4280679900__singleViewWrapper","addDocumentButton":"formmultidocument4280679900__addDocumentButton"};
+export var classes = {"root":"formmultidocument1456030943__root","viewRoot":"formmultidocument1456030943__viewRoot","singleViewWrapper":"formmultidocument1456030943__singleViewWrapper","addDocumentButton":"formmultidocument1456030943__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_ = "cellmultireferenceinput1165773849";
+var _namespace_ = "cellmultireferenceinput4074738577";
 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":"cellmultireferenceinput1165773849__root"};
+export var classes = {"root":"cellmultireferenceinput4074738577__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "cellmultireferenceview2487542658";
+var _namespace_ = "cellmultireferenceview908663567";
 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":"cellmultireferenceview2487542658__root","expanded":"cellmultireferenceview2487542658__expanded"};
+export var classes = {"root":"cellmultireferenceview908663567__root","expanded":"cellmultireferenceview908663567__expanded"};
 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_ = "cellreferenceinput3276349308";
+var _namespace_ = "cellreferenceinput3010251893";
 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":"cellreferenceinput3276349308__root","autocomplete":"cellreferenceinput3276349308__autocomplete"};
+export var classes = {"root":"cellreferenceinput3010251893__root","autocomplete":"cellreferenceinput3010251893__autocomplete"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};