@wix/patterns-fields 1.55.0 → 1.58.0

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

@@ -0,0 +1,158 @@
+import '../../../testkit/test-polyfills';
+
+import React from 'react';
+import { act, fireEvent, render, RenderResult } from '@testing-library/react';
+import type { Field } from '@wix/bex-core';
+import { useForm } from '@wix/bex-core/form';
+import type { Control, FieldValues } from '@wix/bex-core/form';
+
+import { PatternsFieldsTestProvider } from '../../../testkit/patterns-fields-test-provider';
+import { isActiveElement } from '../../test-utils/active-element';
+import {
+  FormReference,
+  type FormReferenceItem,
+} from '../../../components/reference/form-reference';
+
+const FIELD: Field = {
+  id: 'owner',
+  displayName: 'Owner',
+  type: 'REFERENCE',
+  referenceMetadata: { referencedCollectionId: 'people' },
+} as Field;
+
+const ITEMS: FormReferenceItem[] = [
+  { id: 'p1', name: 'Ada Lovelace' },
+  { id: 'p2', name: 'Alan Turing' },
+];
+
+const DATA_HOOK = 'reference-field';
+
+interface HarnessProps {
+  field?: Field;
+  initialValue?: Record<string, unknown> | null;
+  items?: FormReferenceItem[];
+  searchValue?: string;
+  onSearch?: (q: string) => void;
+}
+
+const Harness = ({
+  field = FIELD,
+  initialValue = null,
+  items = ITEMS,
+  searchValue,
+  onSearch = () => {},
+}: HarnessProps) => {
+  const Inner = () => {
+    const methods = useForm<FieldValues>({
+      mode: 'onChange',
+      defaultValues: { [field.id]: initialValue },
+    });
+    const error = methods.formState.errors[field.id]?.message as
+      | string
+      | undefined;
+    return (
+      <form onSubmit={methods.handleSubmit(() => {})}>
+        <FormReference
+          field={field}
+          value={initialValue}
+          onChange={() => {}}
+          dataHook={DATA_HOOK}
+          formControl={methods.control as Control<FieldValues>}
+          data={{ [field.id]: initialValue }}
+          items={items}
+          idField="_id"
+          displayField="name"
+          searchValue={searchValue}
+          onSearch={onSearch}
+        />
+        <span data-hook="error-out">{error ?? ''}</span>
+        <button type="submit" data-hook="submit" />
+      </form>
+    );
+  };
+  return (
+    <PatternsFieldsTestProvider>
+      <Inner />
+    </PatternsFieldsTestProvider>
+  );
+};
+
+const renderField = (props: HarnessProps = {}): RenderResult =>
+  render(<Harness {...props} />);
+
+const input = (r: RenderResult) =>
+  r.baseElement.querySelector(
+    `[data-hook="reference-input-${FIELD.id}"] input`,
+  ) as HTMLInputElement;
+
+const errorText = (r: RenderResult) =>
+  r.baseElement.querySelector('[data-hook="error-out"]')?.textContent ?? '';
+
+const submit = async (r: RenderResult) => {
+  await act(async () => {
+    fireEvent.click(r.baseElement.querySelector('[data-hook="submit"]')!);
+  });
+};
+
+const requiredField = (): Field =>
+  ({ ...FIELD, validation: { required: true } } as Field);
+
+describe('FormReference', () => {
+  it('renders the field displayName as the label', () => {
+    const r = renderField();
+    expect(
+      r.baseElement.querySelector(`[data-hook="${DATA_HOOK}"]`)?.textContent,
+    ).toContain('Owner');
+  });
+
+  it('shows the selected item label from the form value', () => {
+    const r = renderField({
+      initialValue: { _id: 'p1', name: 'Ada Lovelace' },
+    });
+    expect(input(r).value).toBe('Ada Lovelace');
+  });
+
+  it('prefers the caller search value over the selected label', () => {
+    const r = renderField({
+      initialValue: { _id: 'p1', name: 'Ada Lovelace' },
+      searchValue: 'Al',
+    });
+    expect(input(r).value).toBe('Al');
+  });
+
+  it('reports typing to the caller via onSearch', () => {
+    const onSearch = jest.fn();
+    const r = renderField({ onSearch });
+    fireEvent.change(input(r), { target: { value: 'Al' } });
+    expect(onSearch).toHaveBeenCalledWith('Al');
+  });
+
+  it('marks the field required when validation.required is set', () => {
+    const r = renderField({ field: requiredField() });
+    const asterisk = r.baseElement.querySelector(
+      `[data-hook="${DATA_HOOK}"] [data-hook*="asterisk"]`,
+    );
+    expect(asterisk).toBeTruthy();
+  });
+
+  it('surfaces a required error when submitted empty', async () => {
+    const r = renderField({ field: requiredField(), initialValue: null });
+    await submit(r);
+    expect(errorText(r)).not.toBe('');
+  });
+
+  it('passes validation when a required reference is selected', async () => {
+    const r = renderField({
+      field: requiredField(),
+      initialValue: { _id: 'p1', name: 'Ada Lovelace' },
+    });
+    await submit(r);
+    expect(errorText(r)).toBe('');
+  });
+
+  it('focuses the input when submit is blocked (so the page scrolls to it)', async () => {
+    const r = renderField({ field: requiredField(), initialValue: null });
+    await submit(r);
+    expect(isActiveElement(input(r))).toBe(true);
+  });
+});

package/src/__tests__/components/time-input/form-time.spec.tsx

@@ -5,6 +5,7 @@ import type { Field } from '@wix/bex-core';
 import { FormTime } from '../../../components/time-input/form-time';
 import { FormTimeDriver } from '../../../components/time-input/form-time.driver';
 import { FormFieldDriver, makeField } from '../../form-field.driver';
+import { containsActiveElement } from '../../test-utils/active-element';
 
 const setup = (overrides: { field?: Field; initialValue?: string } = {}) => {
   const driver = new FormFieldDriver({
@@ -58,4 +59,19 @@ describe('FormTime field', () => {
       'cairo.fieldValidation.requiredField',
     );
   });
+
+  it('focuses the field when submit is blocked (so the page scrolls to it)', async () => {
+    const driver = setup({
+      field: makeField({ type: 'TIME', validation: { required: true } }),
+      initialValue: '',
+    });
+
+    await driver.submit();
+
+    const timeField = document.querySelector<HTMLElement>(
+      `[data-hook="time-${driver.field.id}"]`,
+    );
+    expect(timeField).toBeTruthy();
+    expect(containsActiveElement(timeField)).toBe(true);
+  });
 });

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "addressinput3966931306";
+var _namespace_ = "addressinput3833852092";
 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":"addressinput3966931306__root","tableAddressInput":"addressinput3966931306__tableAddressInput"};
+export var classes = {"root":"addressinput3833852092__root","tableAddressInput":"addressinput3833852092__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_ = "actionsmenu3197060453";
+var _namespace_ = "actionsmenu1323400524";
 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":"actionsmenu3197060453__root","action":"actionsmenu3197060453__action"};
+export var classes = {"root":"actionsmenu1323400524__root","action":"actionsmenu1323400524__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_ = "formaudiofield3644797003";
+var _namespace_ = "formaudiofield3116593580";
 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":"formaudiofield3644797003__root","addItem":"formaudiofield3644797003__addItem","mediaTitle":"formaudiofield3644797003__mediaTitle"};
+export var classes = {"root":"formaudiofield3116593580__root","addItem":"formaudiofield3116593580__addItem","mediaTitle":"formaudiofield3116593580__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_ = "audioplayer346939608";
+var _namespace_ = "audioplayer4190226408";
 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":"audioplayer346939608__root"};
+export var classes = {"root":"audioplayer4190226408__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_ = "cellcolorview1664123845";
+var _namespace_ = "cellcolorview3170761269";
 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":"cellcolorview1664123845__root","hashPrefix":"cellcolorview1664123845__hashPrefix"};
+export var classes = {"root":"cellcolorview3170761269__root","hashPrefix":"cellcolorview3170761269__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_ = "colorview4045799829";
+var _namespace_ = "colorview353989494";
 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":"colorview4045799829__root","view":"colorview4045799829__view","fillPreview":"colorview4045799829__fillPreview"};
+export var classes = {"root":"colorview353989494__root","view":"colorview353989494__view","fillPreview":"colorview353989494__fillPreview"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/date-input/form-date-input.tsx

@@ -69,8 +69,13 @@ const _FormDateInput = (props: FormDateInputProps) => {
       <DatePicker
         ref={(internalRef) => {
           inputRef?.(ref.current);
-          // @ts-expect-error: WSR internal API hack for focusing
-          ref.current.focus = () => internalRef?.state?.inputRef?.focus?.();
+          const inputEl =
+            // @ts-expect-error: WSR internal API hack for focusing
+            internalRef?.state?.inputRef as HTMLElement | undefined;
+          ref.current.focus = () => inputEl?.focus?.();
+          // Let react-hook-form's shouldFocusError scroll to + focus this field
+          // when it blocks save.
+          controller.field.ref(inputEl ?? null);
         }}
         dataHook={`date-${field.id}`}
         width="100%"

package/src/components/datetime-input/form-date-time.tsx

@@ -78,10 +78,15 @@ const _FormDateTime = (props: FormDateTimeProps) => {
         <Cell span={6}>
           <DatePicker
             ref={(internalRef) => {
-              dateRef.current.focus = () =>
+              const inputEl =
                 // TODO: PR to WSR needed to expose as public API
-                // @ts-expect-error
-                internalRef?.state?.inputRef?.focus?.();
+                // @ts-expect-error internal API
+                internalRef?.state?.inputRef as HTMLElement | undefined;
+              dateRef.current.focus = () => inputEl?.focus?.();
+              // Hand the date input to react-hook-form so shouldFocusError can
+              // scroll to and focus this field when it blocks save (the
+              // composite date/time inputs have no single ref to pass directly).
+              controller.field.ref(inputEl ?? null);
             }}
             width="100%"
             placeholderText={tFields('CMS.formDate.placeholder')}

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "deletedialog1567006919";
+var _namespace_ = "deletedialog4085980773";
 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":"deletedialog1567006919__root","layout":"deletedialog1567006919__layout"};
+export var classes = {"root":"deletedialog4085980773__root","layout":"deletedialog4085980773__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_ = "formdocumentfield3852970928";
+var _namespace_ = "formdocumentfield818078213";
 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":"formdocumentfield3852970928__root","viewWrapper":"formdocumentfield3852970928__viewWrapper","textWidth":"formdocumentfield3852970928__textWidth","documentLoader":"formdocumentfield3852970928__documentLoader","addDocument":"formdocumentfield3852970928__addDocument","addItemWrapper":"formdocumentfield3852970928__addItemWrapper"};
+export var classes = {"root":"formdocumentfield818078213__root","viewWrapper":"formdocumentfield818078213__viewWrapper","textWidth":"formdocumentfield818078213__textWidth","documentLoader":"formdocumentfield818078213__documentLoader","addDocument":"formdocumentfield818078213__addDocument","addItemWrapper":"formdocumentfield818078213__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_ = "exclamation583468494";
+var _namespace_ = "exclamation2850796433";
 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":"exclamation583468494__root","exclamation":"exclamation583468494__exclamation","actions":"exclamation583468494__actions","action":"exclamation583468494__action"};
+export var classes = {"root":"exclamation2850796433__root","exclamation":"exclamation2850796433__exclamation","actions":"exclamation2850796433__actions","action":"exclamation2850796433__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_ = "highlightedtext3822177940";
+var _namespace_ = "highlightedtext338506268";
 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":"highlightedtext3822177940__root","substring":"highlightedtext3822177940__substring"};
-export var keyframes = {"highlighted":"highlightedtext3822177940__highlighted","highlighted-match":"highlightedtext3822177940__highlighted-match"}; 
+export var classes = {"root":"highlightedtext338506268__root","substring":"highlightedtext338506268__substring"};
+export var keyframes = {"highlighted":"highlightedtext338506268__highlighted","highlighted-match":"highlightedtext338506268__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_ = "thumbnailreplaceoverlay1273774130";
+var _namespace_ = "thumbnailreplaceoverlay2875188225";
 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":"thumbnailreplaceoverlay1273774130__root","icon":"thumbnailreplaceoverlay1273774130__icon"};
+export var classes = {"root":"thumbnailreplaceoverlay2875188225__root","icon":"thumbnailreplaceoverlay2875188225__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_ = "cellmediaeditshell1403338845";
+var _namespace_ = "cellmediaeditshell4097080161";
 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":"cellmediaeditshell1403338845__root"};
+export var classes = {"root":"cellmediaeditshell4097080161__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_ = "pasteurlbutton970421747";
+var _namespace_ = "pasteurlbutton3849090191";
 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":"pasteurlbutton970421747__root","iconButtonTooltip":"pasteurlbutton970421747__iconButtonTooltip","iconButton":"pasteurlbutton970421747__iconButton"};
+export var classes = {"root":"pasteurlbutton3849090191__root","iconButtonTooltip":"pasteurlbutton3849090191__iconButtonTooltip","iconButton":"pasteurlbutton3849090191__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_ = "formmediagalleryfield3678400044";
+var _namespace_ = "formmediagalleryfield3093550833";
 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":"formmediagalleryfield3678400044__root","container":"formmediagalleryfield3678400044__container","viewBox":"formmediagalleryfield3678400044__viewBox","addItemWrapper":"formmediagalleryfield3678400044__addItemWrapper","addItem":"formmediagalleryfield3678400044__addItem","overlay":"formmediagalleryfield3678400044__overlay","image":"formmediagalleryfield3678400044__image","previewImage":"formmediagalleryfield3678400044__previewImage","previewVideo":"formmediagalleryfield3678400044__previewVideo"};
+export var classes = {"root":"formmediagalleryfield3093550833__root","container":"formmediagalleryfield3093550833__container","viewBox":"formmediagalleryfield3093550833__viewBox","addItemWrapper":"formmediagalleryfield3093550833__addItemWrapper","addItem":"formmediagalleryfield3093550833__addItem","overlay":"formmediagalleryfield3093550833__overlay","image":"formmediagalleryfield3093550833__image","previewImage":"formmediagalleryfield3093550833__previewImage","previewVideo":"formmediagalleryfield3093550833__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_ = "mediaimage3529799572";
+var _namespace_ = "mediaimage3652063272";
 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":"mediaimage3529799572__root"};
+export var classes = {"root":"mediaimage3652063272__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":"--mediaimage3529799572-from","to":"--mediaimage3529799572-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":"--mediaimage3652063272-from","to":"--mediaimage3652063272-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_ = "overlay435340716";
+var _namespace_ = "overlay4101971171";
 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":"overlay435340716__root","iconOverlay":"overlay435340716__iconOverlay"};
+export var classes = {"root":"overlay4101971171__root","iconOverlay":"overlay4101971171__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_ = "medialoader4114582661";
+var _namespace_ = "medialoader1984150417";
 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":"medialoader4114582661__root","loader":"medialoader4114582661__loader"};
+export var classes = {"root":"medialoader1984150417__root","loader":"medialoader1984150417__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_ = "mediatag2046061156";
+var _namespace_ = "mediatag3951729463";
 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":"mediatag2046061156__root"};
+export var classes = {"root":"mediatag3951729463__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_ = "cellmultidocumentedit152804971";
+var _namespace_ = "cellmultidocumentedit707944317";
 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":"cellmultidocumentedit152804971__root","chipTrigger":"cellmultidocumentedit152804971__chipTrigger"};
+export var classes = {"root":"cellmultidocumentedit707944317__root","chipTrigger":"cellmultidocumentedit707944317__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_ = "formmultidocument1673269748";
+var _namespace_ = "formmultidocument3225286195";
 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":"formmultidocument1673269748__root","viewRoot":"formmultidocument1673269748__viewRoot","singleViewWrapper":"formmultidocument1673269748__singleViewWrapper","addDocumentButton":"formmultidocument1673269748__addDocumentButton"};
+export var classes = {"root":"formmultidocument3225286195__root","viewRoot":"formmultidocument3225286195__viewRoot","singleViewWrapper":"formmultidocument3225286195__singleViewWrapper","addDocumentButton":"formmultidocument3225286195__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_ = "cellmultireferenceinput1139021014";
+var _namespace_ = "cellmultireferenceinput1040831334";
 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":"cellmultireferenceinput1139021014__root"};
+export var classes = {"root":"cellmultireferenceinput1040831334__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_ = "cellreferenceinput3914857990";
+var _namespace_ = "cellreferenceinput1701177941";
 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":"cellreferenceinput3914857990__root","autocomplete":"cellreferenceinput3914857990__autocomplete"};
+export var classes = {"root":"cellreferenceinput1701177941__root","autocomplete":"cellreferenceinput1701177941__autocomplete"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};