@wix/patterns-fields 1.35.0 → 1.36.0

package/dist/types/components/time-input/cell-time-input.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+import { type TimeInputImperativeActions, type TimeInputProps as WSRTimeInputProps } from '@wix/design-system';
+import { type Time } from './hooks';
+export interface CellTimeInputProps {
+    value?: Time | null;
+    onChange?: (value: Time | null) => void;
+    onCommit?: () => void;
+    inputRef?: React.MutableRefObject<{
+        focus: () => void;
+    } | null | undefined>;
+    dataHook?: string;
+    placeholder?: string;
+    step?: WSRTimeInputProps['step'];
+}
+/**
+ * Cell-layer Time input. Wraps WDS `<TimeInput>` with cell-edit semantics:
+ * - `value`/`onChange` use the `Time` string format (`hh:mm:ss.SSS`);
+ *   conversion to/from `Date` for the WDS boundary happens via
+ *   `timeToDate`/`dateToTime`.
+ * - WDS `onChange` (fires on option click and on blur with a parsed custom
+ *   value) forwards a `Time` string to `onChange`, then schedules `onCommit`
+ *   on a microtask so WDS's two-phase change (synchronous blur + async
+ *   selection callback) collapses into a single commit.
+ * - Clear button (X) suffix clears the value and commits.
+ * - Locale is sourced from i18n so the dropdown's 12/24h cycle matches the
+ *   format rendered by `<TimeView>` in view mode.
+ */
+export declare const CellTimeInput: React.ForwardRefExoticComponent<CellTimeInputProps & React.RefAttributes<TimeInputImperativeActions>>;
+//# sourceMappingURL=cell-time-input.d.ts.map

package/dist/types/components/time-input/cell-time-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cell-time-input.d.ts","sourceRoot":"","sources":["../../../../src/components/time-input/cell-time-input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAMN,MAAM,OAAO,CAAC;AACf,OAAO,EAGL,KAAK,0BAA0B,EAC/B,KAAK,cAAc,IAAI,iBAAiB,EACzC,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EAA0B,KAAK,IAAI,EAAE,MAAM,SAAS,CAAC;AAE5D,MAAM,WAAW,kBAAkB;IACjC,KAAK,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAC;IACxC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC;QAAE,KAAK,EAAE,MAAM,IAAI,CAAA;KAAE,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;IAC5E,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,iBAAiB,CAAC,MAAM,CAAC,CAAC;CAClC;AAED;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,aAAa,uGA8DxB,CAAC"}

package/dist/types/components/time-input/index.d.ts

@@ -1,4 +1,5 @@
 export * from './time-input';
+export * from './cell-time-input';
 export * from './form-time-input';
 export * from './hooks';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/components/time-input/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/time-input/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/time-input/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,SAAS,CAAC"}

package/dist/types/components/time-view/hooks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../../../src/components/time-view/hooks.ts"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAS5D,eAAO,MAAM,gBAAgB,UAAW,IAAI,uBAE3C,CAAC"}
+{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../../../src/components/time-view/hooks.ts"],"names":[],"mappings":"AACA,OAAO,EAAc,KAAK,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAS5D,eAAO,MAAM,gBAAgB,UAAW,IAAI,uBAG3C,CAAC"}

package/dist/types/components/url/form-url.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { BaseInputProps } from '../../types/base-input';
+export interface FormUrlProps extends BaseInputProps<string> {
+}
+export declare const FormUrl: ((props: FormUrlProps) => React.JSX.Element) & {
+    displayName: string;
+};
+//# sourceMappingURL=form-url.d.ts.map

package/dist/types/components/url/form-url.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-url.d.ts","sourceRoot":"","sources":["../../../../src/components/url/form-url.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAIxD,MAAM,WAAW,YAAa,SAAQ,cAAc,CAAC,MAAM,CAAC;CAAG;AA+C/D,eAAO,MAAM,OAAO,WA7CK,YAAY;;CA6CI,CAAC"}

package/dist/types/components/url/form-url.driver.d.ts

@@ -0,0 +1,21 @@
+import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
+export declare function FormUrlDriver(base: UniDriver, body: UniDriver): {
+    getLabel: () => Promise<string>;
+    getValue: () => Promise<string>;
+    enterText: (value: string) => Promise<void>;
+    blur: () => Promise<void>;
+    hasError: () => Promise<boolean>;
+    getErrorMessage: () => Promise<string>;
+    isRequired: () => Promise<boolean>;
+    exists: () => Promise<boolean>;
+    click: () => Promise<void>;
+    element: () => Promise<any>;
+    base: UniDriver<any, {
+        parent?: any | undefined;
+        base?: any;
+        selector?: string | Promise<string> | undefined;
+        idx?: number | undefined;
+        timeBudget?: number | undefined;
+    }, any>;
+};
+//# sourceMappingURL=form-url.driver.d.ts.map

package/dist/types/components/url/form-url.driver.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-url.driver.d.ts","sourceRoot":"","sources":["../../../../src/components/url/form-url.driver.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,kCAAkC,CAAC;AAQ7D,wBAAgB,aAAa,CAAC,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS;;;uBAYvC,MAAM;;;;;;;;;;;;;;;EAM5B"}

package/dist/types/components/url/index.d.ts

@@ -1,3 +1,4 @@
 export * from './url-view';
 export * from './cell-url-input';
+export * from './form-url';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/components/url/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/url/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/url/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC;AACjC,cAAc,YAAY,CAAC"}

package/dist/types/validations/number.d.ts

@@ -0,0 +1,3 @@
+export declare const isLessThan: (value: number, min: number) => boolean;
+export declare const isGreaterThan: (value: number, max: number) => boolean;
+//# sourceMappingURL=number.d.ts.map

package/dist/types/validations/number.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"number.d.ts","sourceRoot":"","sources":["../../../src/validations/number.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,UAAU,UAAW,MAAM,OAAO,MAAM,KAAG,OAAsB,CAAC;AAE/E,eAAO,MAAM,aAAa,UAAW,MAAM,OAAO,MAAM,KAAG,OAC9C,CAAC"}

package/dist/types/validations/url.d.ts

@@ -0,0 +1,2 @@
+export declare const isValidUri: (value: string) => boolean;
+//# sourceMappingURL=url.d.ts.map

package/dist/types/validations/url.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"url.d.ts","sourceRoot":"","sources":["../../../src/validations/url.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,UAAU,UAAW,MAAM,KAAG,OAAiC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/patterns-fields",
-  "version": "1.35.0",
+  "version": "1.36.0",
   "license": "UNLICENSED",
   "author": {
     "name": "Kobi",
@@ -139,7 +139,7 @@
     "@types/jest": "^27.5.2",
     "@types/lodash": "^4.17.20",
     "@types/react": "^16.14.68",
-    "@wix/bex-core": "2.313.0",
+    "@wix/bex-core": "2.314.0",
     "@wix/design-system": "^1.271.0",
     "@wix/eslint-config-yoshi": "^6.74.0",
     "@wix/jest-yoshi-preset": "^6.74.0",
@@ -193,5 +193,5 @@
       "type": "yoshi-flow-library"
     }
   },
-  "falconPackageHash": "80f90b4bf1ad97340919b9f771e14ac5094b6378105c43d13edf9f6d"
+  "falconPackageHash": "ba209c34e73bc90996cc51de45ecf6e8d5edc1835fec31c21599ec1d"
 }

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

@@ -0,0 +1,78 @@
+import '../../../testkit/test-polyfills';
+
+import type { Field } from '@wix/bex-core';
+
+import { FormNumber } from '../../../components/number-input/form-number';
+import { FormNumberDriver } from '../../../components/number-input/form-number.driver';
+import { FormFieldDriver, makeField } from '../../form-field.driver';
+
+const setup = (
+  overrides: { field?: Field; initialValue?: number | null } = {},
+) => {
+  const driver = new FormFieldDriver<
+    ReturnType<typeof FormNumberDriver>,
+    number | null
+  >({
+    Component: FormNumber,
+    UniDriverFactory: FormNumberDriver,
+    dataHook: (f) => `number-field-${f.id}`,
+    field: overrides.field ?? makeField({ type: 'NUMBER' }),
+    initialValue: overrides.initialValue ?? null,
+  });
+  driver.render();
+  return driver;
+};
+
+describe('FormNumber 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: 42 });
+
+    expect(await driver.tk.getValue()).toBe('42');
+  });
+
+  it('marks the field as required when validation.required is true', async () => {
+    const driver = setup({
+      field: makeField({ type: 'NUMBER', validation: { required: true } }),
+    });
+
+    expect(await driver.tk.isRequired()).toBe(true);
+  });
+
+  it('shows a minNumber error when value is below the configured min', async () => {
+    const driver = setup({
+      field: makeField({
+        type: 'NUMBER',
+        validation: { required: false, numberRange: { min: 10 } },
+      }),
+    });
+
+    await driver.tk.enterText('5');
+
+    expect(await driver.tk.hasError()).toBe(true);
+    expect(await driver.tk.getErrorMessage()).toBe(
+      'cairo.fieldValidation.minNumber{minAmount=10}',
+    );
+  });
+
+  it('shows a maxNumber error when value is above the configured max', async () => {
+    const driver = setup({
+      field: makeField({
+        type: 'NUMBER',
+        validation: { required: false, numberRange: { max: 100 } },
+      }),
+    });
+
+    await driver.tk.enterText('200');
+
+    expect(await driver.tk.hasError()).toBe(true);
+    expect(await driver.tk.getErrorMessage()).toBe(
+      'cairo.fieldValidation.maxNumber{maxAmount=100}',
+    );
+  });
+});

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

@@ -0,0 +1,63 @@
+import '../../../testkit/test-polyfills';
+
+import type { Field } from '@wix/bex-core';
+
+import { FormLongText } from '../../../components/text/form-long-text';
+import { FormLongTextDriver } from '../../../components/text/form-long-text.driver';
+import { FormFieldDriver, makeField } from '../../form-field.driver';
+
+const setup = (overrides: { field?: Field; initialValue?: string } = {}) => {
+  const driver = new FormFieldDriver({
+    Component: FormLongText,
+    UniDriverFactory: FormLongTextDriver,
+    dataHook: (f) => `long-text-field-${f.id}`,
+    field: overrides.field ?? makeField({ type: 'LONG_TEXT' }),
+    initialValue: overrides.initialValue ?? '',
+  });
+  driver.render();
+  return driver;
+};
+
+describe('FormLongText 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 world' });
+
+    expect(await driver.tk.getValue()).toBe('hello world');
+  });
+
+  it('updates the displayed value as the user types', async () => {
+    const driver = setup();
+
+    await driver.tk.enterText('multi\nline text');
+
+    expect(await driver.tk.getValue()).toBe('multi\nline text');
+  });
+
+  it('marks the field as required when validation.required is true', async () => {
+    const driver = setup({
+      field: makeField({ type: 'LONG_TEXT', 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({ type: 'LONG_TEXT', 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',
+    );
+  });
+});

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

@@ -0,0 +1,82 @@
+import '../../../testkit/test-polyfills';
+
+import type { Field } from '@wix/bex-core';
+
+import { FormUrl } from '../../../components/url/form-url';
+import { FormUrlDriver } from '../../../components/url/form-url.driver';
+import { FormFieldDriver, makeField } from '../../form-field.driver';
+
+const setup = (overrides: { field?: Field; initialValue?: string } = {}) => {
+  const driver = new FormFieldDriver({
+    Component: FormUrl,
+    UniDriverFactory: FormUrlDriver,
+    dataHook: (f) => `url-field-${f.id}`,
+    field: overrides.field ?? makeField({ type: 'URL' }),
+    initialValue: overrides.initialValue ?? '',
+  });
+  driver.render();
+  return driver;
+};
+
+describe('FormUrl 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: 'https://wix.com' });
+
+    expect(await driver.tk.getValue()).toBe('https://wix.com');
+  });
+
+  it('updates the displayed value as the user types', async () => {
+    const driver = setup();
+
+    await driver.tk.enterText('https://example.com');
+
+    expect(await driver.tk.getValue()).toBe('https://example.com');
+  });
+
+  it('marks the field as required when validation.required is true', async () => {
+    const driver = setup({
+      field: makeField({ type: 'URL', 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({ type: 'URL', validation: { required: true } }),
+      initialValue: 'https://wix.com',
+    });
+
+    await driver.tk.enterText('');
+
+    expect(await driver.tk.hasError()).toBe(true);
+    expect(await driver.tk.getErrorMessage()).toBe(
+      'cairo.fieldValidation.requiredField',
+    );
+  });
+
+  it('accepts a valid URL without showing an error', async () => {
+    const driver = setup();
+
+    await driver.tk.enterText('https://example.com/path?query=1');
+
+    expect(await driver.tk.hasError()).toBe(false);
+  });
+
+  it('shows an invalid-URL error when the value is not a URL', async () => {
+    const driver = setup();
+
+    await driver.tk.enterText('not a url');
+
+    expect(await driver.tk.hasError()).toBe(true);
+    expect(await driver.tk.getErrorMessage()).toBe(
+      'cairo.customFields.url-input.error',
+    );
+  });
+});

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "addressinput2425235973";
+var _namespace_ = "addressinput4174358991";
 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":"addressinput2425235973__root","tableAddressInput":"addressinput2425235973__tableAddressInput"};
+export var classes = {"root":"addressinput4174358991__root","tableAddressInput":"addressinput4174358991__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_ = "actionsmenu244569486";
+var _namespace_ = "actionsmenu404510853";
 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":"actionsmenu244569486__root","action":"actionsmenu244569486__action"};
+export var classes = {"root":"actionsmenu404510853__root","action":"actionsmenu404510853__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_ = "formaudiofield3934724193";
+var _namespace_ = "formaudiofield3136717165";
 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":"formaudiofield3934724193__root","addItem":"formaudiofield3934724193__addItem","mediaTitle":"formaudiofield3934724193__mediaTitle"};
+export var classes = {"root":"formaudiofield3136717165__root","addItem":"formaudiofield3136717165__addItem","mediaTitle":"formaudiofield3136717165__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_ = "audioplayer315551720";
+var _namespace_ = "audioplayer222144949";
 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":"audioplayer315551720__root"};
+export var classes = {"root":"audioplayer222144949__root"};
 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_ = "colorview1187221222";
+var _namespace_ = "colorview366587587";
 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":"colorview1187221222__root","view":"colorview1187221222__view","fillPreview":"colorview1187221222__fillPreview"};
+export var classes = {"root":"colorview366587587__root","view":"colorview366587587__view","fillPreview":"colorview366587587__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_ = "deletedialog1598107043";
+var _namespace_ = "deletedialog703678680";
 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":"deletedialog1598107043__root","layout":"deletedialog1598107043__layout"};
+export var classes = {"root":"deletedialog703678680__root","layout":"deletedialog703678680__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_ = "formdocumentfield3746585343";
+var _namespace_ = "formdocumentfield1781643917";
 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":"formdocumentfield3746585343__root","viewWrapper":"formdocumentfield3746585343__viewWrapper","textWidth":"formdocumentfield3746585343__textWidth","documentLoader":"formdocumentfield3746585343__documentLoader","addDocument":"formdocumentfield3746585343__addDocument","addItemWrapper":"formdocumentfield3746585343__addItemWrapper"};
+export var classes = {"root":"formdocumentfield1781643917__root","viewWrapper":"formdocumentfield1781643917__viewWrapper","textWidth":"formdocumentfield1781643917__textWidth","documentLoader":"formdocumentfield1781643917__documentLoader","addDocument":"formdocumentfield1781643917__addDocument","addItemWrapper":"formdocumentfield1781643917__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_ = "exclamation2381589603";
+var _namespace_ = "exclamation2557246513";
 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":"exclamation2381589603__root","exclamation":"exclamation2381589603__exclamation","actions":"exclamation2381589603__actions","action":"exclamation2381589603__action"};
+export var classes = {"root":"exclamation2557246513__root","exclamation":"exclamation2557246513__exclamation","actions":"exclamation2557246513__actions","action":"exclamation2557246513__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_ = "highlightedtext4239267361";
+var _namespace_ = "highlightedtext4048086956";
 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":"highlightedtext4239267361__root","substring":"highlightedtext4239267361__substring"};
-export var keyframes = {"highlighted":"highlightedtext4239267361__highlighted","highlighted-match":"highlightedtext4239267361__highlighted-match"}; 
+export var classes = {"root":"highlightedtext4048086956__root","substring":"highlightedtext4048086956__substring"};
+export var keyframes = {"highlighted":"highlightedtext4048086956__highlighted","highlighted-match":"highlightedtext4048086956__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_ = "thumbnailreplaceoverlay2773158491";
+var _namespace_ = "thumbnailreplaceoverlay3859327744";
 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":"thumbnailreplaceoverlay2773158491__root","icon":"thumbnailreplaceoverlay2773158491__icon"};
+export var classes = {"root":"thumbnailreplaceoverlay3859327744__root","icon":"thumbnailreplaceoverlay3859327744__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_ = "cellmediaeditshell45116818";
+var _namespace_ = "cellmediaeditshell2103765304";
 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":"cellmediaeditshell45116818__root"};
+export var classes = {"root":"cellmediaeditshell2103765304__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_ = "pasteurlbutton1313810729";
+var _namespace_ = "pasteurlbutton323743403";
 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":"pasteurlbutton1313810729__root","iconButtonTooltip":"pasteurlbutton1313810729__iconButtonTooltip","iconButton":"pasteurlbutton1313810729__iconButton"};
+export var classes = {"root":"pasteurlbutton323743403__root","iconButtonTooltip":"pasteurlbutton323743403__iconButtonTooltip","iconButton":"pasteurlbutton323743403__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_ = "formmediagalleryfield216174486";
+var _namespace_ = "formmediagalleryfield3333265392";
 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":"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 classes = {"root":"formmediagalleryfield3333265392__root","container":"formmediagalleryfield3333265392__container","viewBox":"formmediagalleryfield3333265392__viewBox","addItemWrapper":"formmediagalleryfield3333265392__addItemWrapper","addItem":"formmediagalleryfield3333265392__addItem","overlay":"formmediagalleryfield3333265392__overlay","image":"formmediagalleryfield3333265392__image","previewImage":"formmediagalleryfield3333265392__previewImage","previewVideo":"formmediagalleryfield3333265392__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_ = "mediaimage248104267";
+var _namespace_ = "mediaimage83983951";
 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":"mediaimage248104267__root"};
+export var classes = {"root":"mediaimage83983951__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":"--mediaimage248104267-from","to":"--mediaimage248104267-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":"--mediaimage83983951-from","to":"--mediaimage83983951-to"};