@wix/patterns-fields 1.32.0 → 1.35.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/patterns-fields",
-  "version": "1.32.0",
+  "version": "1.35.0",
   "license": "UNLICENSED",
   "author": {
     "name": "Kobi",
@@ -112,7 +112,7 @@
     "@wix/atlas": "^1.0.35",
     "@wix/data": "^1.0.323",
     "@wix/media": "^1.0.231",
-    "@wix/patterns-fields-utils": "1.16.0",
+    "@wix/patterns-fields-utils": "1.17.0",
     "@wix/rich-content": "1.0.37",
     "@wix/ricos": "^10.155.2",
     "@wix/wix-ui-icons-common": "^3.100.0",
@@ -123,6 +123,7 @@
     "draftjs-conductor": "^2.0.4",
     "immutable": "^3.8.3",
     "lodash": "^4.17.21",
+    "mobx-react-lite": "^3.4.3",
     "semver": "^7.7.3",
     "uuid": "^8.3.2"
   },
@@ -138,7 +139,7 @@
     "@types/jest": "^27.5.2",
     "@types/lodash": "^4.17.20",
     "@types/react": "^16.14.68",
-    "@wix/bex-core": "2.311.0",
+    "@wix/bex-core": "2.313.0",
     "@wix/design-system": "^1.271.0",
     "@wix/eslint-config-yoshi": "^6.74.0",
     "@wix/jest-yoshi-preset": "^6.74.0",
@@ -155,6 +156,7 @@
   "peerDependencies": {
     "@wix/bex-core": "^2.284.0",
     "@wix/design-system": "^1.204.0",
+    "mobx": "^6.1.8",
     "react": "^16.8.0 || ^18.0.0"
   },
   "publishConfig": {
@@ -191,5 +193,5 @@
       "type": "yoshi-flow-library"
     }
   },
-  "falconPackageHash": "80ac30a0255bdac137b4339a4a19e2a5eaedd932874aa0f4885e10c2"
+  "falconPackageHash": "80f90b4bf1ad97340919b9f771e14ac5094b6378105c43d13edf9f6d"
 }

package/src/__tests__/components/boolean/form-checkbox.spec.tsx

@@ -0,0 +1,45 @@
+import '../../../testkit/test-polyfills';
+
+import { FormCheckbox } from '../../../components/boolean/form-checkbox';
+import { FormCheckboxDriver } from '../../../components/boolean/form-checkbox.driver';
+import { FormFieldDriver, makeField } from '../../form-field.driver';
+
+const setup = (initialValue: boolean) => {
+  const driver = new FormFieldDriver({
+    Component: FormCheckbox,
+    UniDriverFactory: FormCheckboxDriver,
+    dataHook: (f) => `checkbox-${f.id}`,
+    field: makeField({ type: 'BOOLEAN' }),
+    initialValue,
+  });
+  driver.render();
+  return driver;
+};
+
+describe('FormCheckbox field', () => {
+  it('renders the field displayName as the label', async () => {
+    const driver = setup(false);
+
+    expect(await driver.tk.getLabel()).toBe(driver.field.displayName);
+  });
+
+  it('is unchecked when value is false', async () => {
+    const driver = setup(false);
+
+    expect(await driver.tk.isChecked()).toBe(false);
+  });
+
+  it('is checked when value is true', async () => {
+    const driver = setup(true);
+
+    expect(await driver.tk.isChecked()).toBe(true);
+  });
+
+  it('calls onChange with the toggled boolean when clicked', async () => {
+    const driver = setup(false);
+
+    await driver.tk.toggle();
+
+    expect(driver.onChange).toHaveBeenCalledWith(true);
+  });
+});

package/src/__tests__/components/text/form-short-text.spec.tsx

@@ -0,0 +1,104 @@
+import '../../../testkit/test-polyfills';
+
+import type { Field } from '@wix/bex-core';
+
+import { FormShortText } from '../../../components/text/form-short-text';
+import { FormShortTextDriver } from '../../../components/text/form-short-text.driver';
+import { FormFieldDriver, makeField } from '../../form-field.driver';
+
+const setup = (overrides: { field?: Field; initialValue?: string } = {}) => {
+  const driver = new FormFieldDriver({
+    Component: FormShortText,
+    UniDriverFactory: FormShortTextDriver,
+    dataHook: (f) => `short-text-field-${f.id}`,
+    field: overrides.field,
+    initialValue: overrides.initialValue ?? '',
+  });
+  driver.render();
+  return driver;
+};
+
+describe('FormShortText field', () => {
+  it('renders the field displayName as the label', async () => {
+    const driver = setup();
+
+    expect(await driver.tk.getLabel()).toBe(driver.field.displayName);
+  });
+
+  it('shows the initial value from data', async () => {
+    const driver = setup({ initialValue: 'hello' });
+
+    expect(await driver.tk.getValue()).toBe('hello');
+  });
+
+  it('updates the displayed value as the user types', async () => {
+    const driver = setup();
+
+    await driver.tk.enterText('typed');
+
+    expect(await driver.tk.getValue()).toBe('typed');
+  });
+
+  it('shows charCount left when maxLength is set', async () => {
+    const driver = setup({
+      field: makeField({
+        validation: { required: false, stringLengthRange: { maxLength: 10 } },
+      }),
+      initialValue: 'abc',
+    });
+
+    expect(await driver.tk.getCharCountLeft()).toBe(7);
+  });
+
+  it('marks the field as required when validation.required is true', async () => {
+    const driver = setup({
+      field: makeField({ validation: { required: true } }),
+    });
+
+    expect(await driver.tk.isRequired()).toBe(true);
+  });
+
+  it('shows a required error when the user clears a required field', async () => {
+    const driver = setup({
+      field: makeField({ validation: { required: true } }),
+      initialValue: 'something',
+    });
+
+    await driver.tk.enterText('');
+
+    expect(await driver.tk.hasError()).toBe(true);
+    expect(await driver.tk.getErrorMessage()).toBe(
+      'cairo.fieldValidation.requiredField',
+    );
+  });
+
+  it('shows a minLength error when the value is too short', async () => {
+    const driver = setup({
+      field: makeField({
+        validation: { required: false, stringLengthRange: { minLength: 5 } },
+      }),
+    });
+
+    await driver.tk.enterText('ab');
+
+    expect(await driver.tk.hasError()).toBe(true);
+    expect(await driver.tk.getErrorMessage()).toBe(
+      'cairo.fieldValidation.minCharacter{charMin=5}',
+    );
+  });
+
+  it('shows a maxLength error when the value is too long', async () => {
+    const driver = setup({
+      field: makeField({
+        validation: { required: false, stringLengthRange: { maxLength: 3 } },
+      }),
+    });
+
+    await driver.tk.enterText('abcd');
+
+    expect(await driver.tk.hasError()).toBe(true);
+    expect(await driver.tk.getErrorMessage()).toBe(
+      'cairo.fieldValidation.maxCharacter{charMax=3}',
+    );
+  });
+});

package/src/__tests__/form-field.driver.tsx

@@ -0,0 +1,96 @@
+import React from 'react';
+import { render, RenderResult } from '@testing-library/react';
+import Chance from 'chance';
+import { useForm } from '@wix/bex-core/form';
+import type { Control, FieldValues } from '@wix/bex-core/form';
+import type { Field } from '@wix/bex-core';
+import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
+import type { BaseUniDriver } from '@wix/wix-ui-test-utils/base-driver';
+import { uniTestkitFactoryCreator } from '@wix/wix-ui-test-utils/testing-library';
+
+import { PatternsFieldsTestProvider } from '../testkit/patterns-fields-test-provider';
+import type { BaseInputProps } from '../types/base-input';
+
+const chance = new Chance();
+
+type UniDriverFactory<U> = (base: UniDriver, body: UniDriver) => U;
+
+export interface FormFieldDriverOptions<U extends BaseUniDriver, T> {
+  Component: React.ComponentType<BaseInputProps<T>>;
+  UniDriverFactory: UniDriverFactory<U>;
+  dataHook: (field: Field) => string;
+  field?: Field;
+  initialValue: T;
+}
+
+export class FormFieldDriver<U extends BaseUniDriver, T> {
+  private _renderResult?: RenderResult;
+  readonly field: Field;
+  readonly initialValue: T;
+  readonly onChange = jest.fn<void, [T]>();
+  private readonly opts: FormFieldDriverOptions<U, T>;
+  private readonly _dataHook: string;
+
+  constructor(opts: FormFieldDriverOptions<U, T>) {
+    this.opts = opts;
+    this.field = opts.field ?? makeField();
+    this.initialValue = opts.initialValue;
+    this._dataHook = opts.dataHook(this.field);
+  }
+
+  get tk(): U {
+    return uniTestkitFactoryCreator(this.opts.UniDriverFactory)({
+      wrapper: this._renderResult!.baseElement,
+      dataHook: this._dataHook,
+    });
+  }
+
+  render() {
+    const { Component } = this.opts;
+    const { field, initialValue, _dataHook: dataHook, onChange } = this;
+    this._renderResult = render(
+      <TestComponent
+        field={field}
+        initialValue={initialValue}
+        renderField={(control) => (
+          <Component
+            field={field}
+            value={initialValue}
+            onChange={onChange}
+            dataHook={dataHook}
+            formControl={control}
+            data={{ [field.id]: initialValue }}
+          />
+        )}
+      />,
+      { wrapper: PatternsFieldsTestProvider },
+    );
+  }
+}
+
+interface TestComponentProps<T> {
+  field: Field;
+  initialValue: T;
+  renderField: (control: Control<FieldValues>) => React.ReactElement;
+}
+
+const TestComponent = <T,>({
+  field,
+  initialValue,
+  renderField,
+}: TestComponentProps<T>) => {
+  const { control } = useForm<FieldValues>({
+    mode: 'onChange',
+    defaultValues: { [field.id]: initialValue },
+  });
+  return renderField(control);
+};
+
+export function makeField(overrides: Partial<Field> = {}): Field {
+  return {
+    id: chance.guid(),
+    displayName: chance.sentence({ words: 3 }),
+    type: 'SHORT_TEXT',
+    ...overrides,
+  } as Field;
+}

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "addressinput1106484384";
+var _namespace_ = "addressinput2425235973";
 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":"addressinput1106484384__root","tableAddressInput":"addressinput1106484384__tableAddressInput"};
+export var classes = {"root":"addressinput2425235973__root","tableAddressInput":"addressinput2425235973__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_ = "actionsmenu2539043764";
+var _namespace_ = "actionsmenu244569486";
 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":"actionsmenu2539043764__root","action":"actionsmenu2539043764__action"};
+export var classes = {"root":"actionsmenu244569486__root","action":"actionsmenu244569486__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_ = "formaudiofield3184549307";
+var _namespace_ = "formaudiofield3934724193";
 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":"formaudiofield3184549307__root","addItem":"formaudiofield3184549307__addItem","mediaTitle":"formaudiofield3184549307__mediaTitle"};
+export var classes = {"root":"formaudiofield3934724193__root","addItem":"formaudiofield3934724193__addItem","mediaTitle":"formaudiofield3934724193__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_ = "audioplayer2286934621";
+var _namespace_ = "audioplayer315551720";
 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":"audioplayer2286934621__root"};
+export var classes = {"root":"audioplayer315551720__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/boolean/form-checkbox.driver.ts

@@ -0,0 +1,13 @@
+import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
+import { CheckboxUniDriver } from '@wix/design-system/dist/testkit/unidriver';
+import { baseUniDriverFactory } from '../../testkit/base-driver';
+
+export function FormCheckboxDriver(base: UniDriver, body: UniDriver) {
+  const checkbox = CheckboxUniDriver(base, body);
+  return {
+    ...baseUniDriverFactory(base),
+    isChecked: () => checkbox.isChecked(),
+    toggle: () => checkbox.click(),
+    getLabel: () => checkbox.getLabel(),
+  };
+}

package/src/components/boolean/form-checkbox.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Checkbox } from '@wix/design-system';
+import { BaseInputProps } from '../../types/base-input';
+
+export interface FormCheckboxProps extends BaseInputProps<boolean> {}
+
+export const FormCheckbox = (props: FormCheckboxProps) => {
+  const { field, onChange, value, dataHook } = props;
+
+  return (
+    <Checkbox
+      checked={value}
+      onChange={(e) => {
+        onChange(e.target.checked);
+      }}
+      dataHook={dataHook ?? `checkbox-${field.id}`}
+    >
+      {field.displayName}
+    </Checkbox>
+  );
+};

package/src/components/boolean/index.ts

@@ -1,2 +1,3 @@
 export * from './boolean-view';
 export * from './cell-checkbox';
+export * from './form-checkbox';

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "colorview2476891254";
+var _namespace_ = "colorview1187221222";
 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":"colorview2476891254__root","view":"colorview2476891254__view","fillPreview":"colorview2476891254__fillPreview"};
+export var classes = {"root":"colorview1187221222__root","view":"colorview1187221222__view","fillPreview":"colorview1187221222__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_ = "deletedialog4190420635";
+var _namespace_ = "deletedialog1598107043";
 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":"deletedialog4190420635__root","layout":"deletedialog4190420635__layout"};
+export var classes = {"root":"deletedialog1598107043__root","layout":"deletedialog1598107043__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_ = "formdocumentfield1222498168";
+var _namespace_ = "formdocumentfield3746585343";
 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":"formdocumentfield1222498168__root","viewWrapper":"formdocumentfield1222498168__viewWrapper","textWidth":"formdocumentfield1222498168__textWidth","documentLoader":"formdocumentfield1222498168__documentLoader","addDocument":"formdocumentfield1222498168__addDocument","addItemWrapper":"formdocumentfield1222498168__addItemWrapper"};
+export var classes = {"root":"formdocumentfield3746585343__root","viewWrapper":"formdocumentfield3746585343__viewWrapper","textWidth":"formdocumentfield3746585343__textWidth","documentLoader":"formdocumentfield3746585343__documentLoader","addDocument":"formdocumentfield3746585343__addDocument","addItemWrapper":"formdocumentfield3746585343__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_ = "exclamation2043409223";
+var _namespace_ = "exclamation2381589603";
 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":"exclamation2043409223__root","exclamation":"exclamation2043409223__exclamation","actions":"exclamation2043409223__actions","action":"exclamation2043409223__action"};
+export var classes = {"root":"exclamation2381589603__root","exclamation":"exclamation2381589603__exclamation","actions":"exclamation2381589603__actions","action":"exclamation2381589603__action"};
 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_ = "highlightedtext3214744979";
+var _namespace_ = "highlightedtext4239267361";
 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":"highlightedtext3214744979__root","substring":"highlightedtext3214744979__substring"};
-export var keyframes = {"highlighted":"highlightedtext3214744979__highlighted","highlighted-match":"highlightedtext3214744979__highlighted-match"}; 
+export var classes = {"root":"highlightedtext4239267361__root","substring":"highlightedtext4239267361__substring"};
+export var keyframes = {"highlighted":"highlightedtext4239267361__highlighted","highlighted-match":"highlightedtext4239267361__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_ = "thumbnailreplaceoverlay3070733555";
+var _namespace_ = "thumbnailreplaceoverlay2773158491";
 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":"thumbnailreplaceoverlay3070733555__root","icon":"thumbnailreplaceoverlay3070733555__icon"};
+export var classes = {"root":"thumbnailreplaceoverlay2773158491__root","icon":"thumbnailreplaceoverlay2773158491__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_ = "cellmediaeditshell217379103";
+var _namespace_ = "cellmediaeditshell45116818";
 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":"cellmediaeditshell217379103__root"};
+export var classes = {"root":"cellmediaeditshell45116818__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_ = "pasteurlbutton1343200640";
+var _namespace_ = "pasteurlbutton1313810729";
 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":"pasteurlbutton1343200640__root","iconButtonTooltip":"pasteurlbutton1343200640__iconButtonTooltip","iconButton":"pasteurlbutton1343200640__iconButton"};
+export var classes = {"root":"pasteurlbutton1313810729__root","iconButtonTooltip":"pasteurlbutton1313810729__iconButtonTooltip","iconButton":"pasteurlbutton1313810729__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_ = "formmediagalleryfield632998718";
+var _namespace_ = "formmediagalleryfield216174486";
 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":"formmediagalleryfield632998718__root","container":"formmediagalleryfield632998718__container","viewBox":"formmediagalleryfield632998718__viewBox","addItemWrapper":"formmediagalleryfield632998718__addItemWrapper","addItem":"formmediagalleryfield632998718__addItem","overlay":"formmediagalleryfield632998718__overlay","image":"formmediagalleryfield632998718__image","previewImage":"formmediagalleryfield632998718__previewImage","previewVideo":"formmediagalleryfield632998718__previewVideo"};
+export var classes = {"root":"formmediagalleryfield216174486__root","container":"formmediagalleryfield216174486__container","viewBox":"formmediagalleryfield216174486__viewBox","addItemWrapper":"formmediagalleryfield216174486__addItemWrapper","addItem":"formmediagalleryfield216174486__addItem","overlay":"formmediagalleryfield216174486__overlay","image":"formmediagalleryfield216174486__image","previewImage":"formmediagalleryfield216174486__previewImage","previewVideo":"formmediagalleryfield216174486__previewVideo"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -2,6 +2,8 @@
 @property st-global(--wsr-color-R20);
 @property st-global(--wds-color-black-550);
 @property st-global(--wsr-color-D55);
+@property --from;
+@property --to;
 
 .root {
   -st-states: error, loading;

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "mediaimage2388108448";
+var _namespace_ = "mediaimage248104267";
 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":"mediaimage2388108448__root"};
+export var classes = {"root":"mediaimage248104267__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":"--mediaimage2388108448-from","to":"--mediaimage2388108448-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":"--mediaimage248104267-from","to":"--mediaimage248104267-to"}; 
 
 
 

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

@@ -1,4 +1,5 @@
 @property st-global(--wds-color-white);
+@property st-global(--wsr-color-D80);
 
 :vars {
     iconShadow: drop-shadow(0 1px 1px rgba(22, 45, 61, 0.6));

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "overlay2441951808";
+var _namespace_ = "overlay1355255452";
 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":"overlay2441951808__root","iconOverlay":"overlay2441951808__iconOverlay"};
+export var classes = {"root":"overlay1355255452__root","iconOverlay":"overlay1355255452__iconOverlay"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {"iconShadow":"drop-shadow(0 1px 1px rgba(22, 45, 61, 0.6))"}; 
-export var vars = {"wds-color-white":"--wds-color-white","wsr-color-D80":"--overlay2441951808-wsr-color-D80"}; 
+export var vars = {"wds-color-white":"--wds-color-white","wsr-color-D80":"--wsr-color-D80"};