@wix/patterns-fields 1.79.0 → 1.81.0

package/dist/types/components/text/text-view.st.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"text-view.st.css.d.ts","sourceRoot":"","sources":["../../../../src/components/text/text-view.st.css.ts"],"names":[],"mappings":"AAUA,eAAO,IAAI,SAAS,+BAAwC,CAAC;AAC7D,eAAO,IAAI,KAAK,EAAE,OAAO,mBAAmB,EAAE,UAAoB,CAAC;AACnE,eAAO,IAAI,EAAE,EAAE,OAAO,mBAAmB,EAAE,UAAoB,CAAC;AAEhE,eAAO,IAAI,SAAS,QAAc,CAAC;AACnC,eAAO,IAAI,OAAO;;;CAAgF,CAAC;AACnG,eAAO,IAAI,SAAS,IAAK,CAAC;AAC1B,eAAO,IAAI,MAAM,IAAK,CAAC;AACvB,eAAO,IAAI,UAAU,IAAK,CAAC;AAC3B,eAAO,IAAI,MAAM,IAAK,CAAC;AACvB,eAAO,IAAI,IAAI,IAAK,CAAC"}
+{"version":3,"file":"text-view.st.css.d.ts","sourceRoot":"","sources":["../../../../src/components/text/text-view.st.css.ts"],"names":[],"mappings":"AAUA,eAAO,IAAI,SAAS,+BAAwC,CAAC;AAC7D,eAAO,IAAI,KAAK,EAAE,OAAO,mBAAmB,EAAE,UAAoB,CAAC;AACnE,eAAO,IAAI,EAAE,EAAE,OAAO,mBAAmB,EAAE,UAAoB,CAAC;AAEhE,eAAO,IAAI,SAAS,QAAc,CAAC;AACnC,eAAO,IAAI,OAAO;;;CAA8E,CAAC;AACjG,eAAO,IAAI,SAAS,IAAK,CAAC;AAC1B,eAAO,IAAI,MAAM,IAAK,CAAC;AACvB,eAAO,IAAI,UAAU,IAAK,CAAC;AAC3B,eAAO,IAAI,MAAM,IAAK,CAAC;AACvB,eAAO,IAAI,IAAI,IAAK,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/patterns-fields",
-  "version": "1.79.0",
+  "version": "1.81.0",
   "license": "UNLICENSED",
   "author": {
     "name": "Kobi",
@@ -124,7 +124,7 @@
     "@wix/atlas": "^1.0.35",
     "@wix/data": "^1.0.323",
     "@wix/media": "^1.0.231",
-    "@wix/patterns-fields-utils": "1.60.0",
+    "@wix/patterns-fields-utils": "1.62.0",
     "@wix/rich-content": "1.0.37",
     "@wix/sdk": "^1.17.2",
     "@wix/wix-ui-icons-common": "^3.189.0",
@@ -152,7 +152,7 @@
     "@types/lodash": "^4.17.20",
     "@types/react": "^16.14.68",
     "@wix/babel-cli": "^1.11.0",
-    "@wix/bex-core": "2.357.0",
+    "@wix/bex-core": "2.359.0",
     "@wix/design-system": "^1.314.0",
     "@wix/eslint-config-yoshi": "^6.74.0",
     "@wix/jest-yoshi-preset": "^6.74.0",
@@ -212,5 +212,5 @@
       "optional": true
     }
   },
-  "falconPackageHash": "762e83ede14e81abc9244ed1a945ba63c4c4c3f8c1d5000e9a56a62f"
+  "falconPackageHash": "7f3ac142c92989cd0bc2506f1510478c1b2edc0c549e190447a20f49"
 }

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

@@ -4,11 +4,15 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import { uniTestkitFactoryCreator } from '@wix/wix-ui-test-utils/testing-library';
 
-import { FormCheckboxInput } from '../../components/boolean';
+import {
+  ControlledBooleanRadioGroupInput,
+  FormCheckboxInput,
+} from '../../components/boolean';
 import { ControlledColorInput } from '../../components/color-view';
 import { ControlledInputUniDriver } from '../../components/controlled-input.uni.driver';
 import { DateInput } from '../../components/date-input';
 import { DateTimeInput } from '../../components/datetime-input';
+import { ControlledEmailInput } from '../../components/email';
 import { FormNumberInput } from '../../components/number-input';
 import { FormShortTextInput } from '../../components/text';
 import { FormUrlInput } from '../../components/url';
@@ -51,6 +55,72 @@ describe('controlled inputs', () => {
     expect(onChange).toHaveBeenCalledWith(false);
   });
 
+  it('follows boolean radio-group prop changes and reports user edits', async () => {
+    const onChange = jest.fn();
+    const { container, rerender } = render(
+      <ControlledBooleanRadioGroupInput
+        data={undefined}
+        onChange={onChange}
+        unsetLabel="No default (empty)"
+        falseLabel="False"
+        trueLabel="True"
+        dataHook="boolean-radio-group"
+      />,
+    );
+    const input = getInput(container, 'boolean-radio-group').radioGroup;
+
+    expect(await input.getNumberOfRadios()).toBe(3);
+    expect(await input.getSelectedValue()).toBe('unset');
+
+    rerender(
+      <ControlledBooleanRadioGroupInput
+        data
+        onChange={onChange}
+        unsetLabel="No default (empty)"
+        falseLabel="False"
+        trueLabel="True"
+        dataHook="boolean-radio-group"
+      />,
+    );
+    expect(await input.getSelectedValue()).toBe('true');
+
+    await input.selectByValue('false');
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenCalledWith(false);
+
+    await input.selectByValue('unset');
+    expect(onChange).toHaveBeenCalledTimes(2);
+    expect(onChange).toHaveBeenLastCalledWith(undefined);
+
+    rerender(
+      <ControlledBooleanRadioGroupInput
+        data={null}
+        onChange={onChange}
+        unsetLabel="No default (empty)"
+        falseLabel="False"
+        trueLabel="True"
+        dataHook="boolean-radio-group"
+      />,
+    );
+    expect(await input.getSelectedValue()).toBe('unset');
+  });
+
+  it('hides the unset radio when no unset label is given', async () => {
+    const { container } = render(
+      <ControlledBooleanRadioGroupInput
+        data={false}
+        onChange={jest.fn()}
+        falseLabel="False"
+        trueLabel="True"
+        dataHook="boolean-radio-group-binary"
+      />,
+    );
+    const input = getInput(container, 'boolean-radio-group-binary').radioGroup;
+
+    expect(await input.getNumberOfRadios()).toBe(2);
+    expect(await input.getSelectedValue()).toBe('false');
+  });
+
   it('follows number prop changes and reports user edits', async () => {
     const onChange = jest.fn();
     const { container, rerender } = render(
@@ -121,6 +191,89 @@ describe('controlled inputs', () => {
     expect(onBlur).toHaveBeenCalledTimes(1);
   });
 
+  it('follows email prop changes and reports edits and blur without validating', async () => {
+    const onChange = jest.fn();
+    const onBlur = jest.fn();
+    const { container, rerender } = render(
+      <ControlledEmailInput
+        data="before@example.com"
+        onChange={onChange}
+        onBlur={onBlur}
+        dataHook="email"
+      />,
+    );
+    const input = getInput(container, 'email').text;
+
+    expect(await input.getValue()).toBe('before@example.com');
+    rerender(
+      <ControlledEmailInput
+        data="after@example.com"
+        onChange={onChange}
+        onBlur={onBlur}
+        dataHook="email"
+      />,
+    );
+    expect(await input.getValue()).toBe('after@example.com');
+
+    await input.enterText('not-an-email');
+    await input.blur();
+
+    expect(onChange).toHaveBeenCalledWith('not-an-email');
+    expect(onBlur).toHaveBeenCalledTimes(1);
+    expect(await input.hasStatus('error')).toBe(false);
+  });
+
+  it('shows the error status on email only when the invalid prop is set', async () => {
+    const { container, rerender } = render(
+      <ControlledEmailInput
+        data="valid@example.com"
+        onChange={jest.fn()}
+        invalid
+        dataHook="email-invalid"
+      />,
+    );
+    const input = getInput(container, 'email-invalid').text;
+
+    expect(await input.hasStatus('error')).toBe(true);
+
+    rerender(
+      <ControlledEmailInput
+        data="valid@example.com"
+        onChange={jest.fn()}
+        dataHook="email-invalid"
+      />,
+    );
+    expect(await input.hasStatus('error')).toBe(false);
+  });
+
+  it('forwards readOnly, autoFocus and placeholder to the email input', async () => {
+    const { container } = render(
+      <ControlledEmailInput
+        data=""
+        onChange={jest.fn()}
+        readOnly
+        placeholder="Enter an email"
+        dataHook="email-readonly"
+      />,
+    );
+    const readOnlyInput = getInput(container, 'email-readonly').text;
+
+    expect(await readOnlyInput.getReadOnly()).toBe(true);
+    expect(await readOnlyInput.getPlaceholder()).toBe('Enter an email');
+
+    const { container: focusContainer } = render(
+      <ControlledEmailInput
+        data=""
+        onChange={jest.fn()}
+        autoFocus
+        dataHook="email-focus"
+      />,
+    );
+    const focusedInput = getInput(focusContainer, 'email-focus').text;
+
+    expect(await focusedInput.isFocus()).toBe(true);
+  });
+
   it('uses option IDs as controlled specific values', async () => {
     const onChange = jest.fn();
     const { container } = render(

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "addressinput1071085247";
+var _namespace_ = "addressinput1467036950";
 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":"addressinput1071085247__root","tableAddressInput":"addressinput1071085247__tableAddressInput"};
+export var classes = {"root":"addressinput1467036950__root","tableAddressInput":"addressinput1467036950__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_ = "actionsmenu3841951106";
+var _namespace_ = "actionsmenu1437673280";
 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":"actionsmenu3841951106__root","action":"actionsmenu3841951106__action"};
+export var classes = {"root":"actionsmenu1437673280__root","action":"actionsmenu1437673280__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_ = "formaudiofield3850785794";
+var _namespace_ = "formaudiofield633769055";
 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":"formaudiofield3850785794__root","addItem":"formaudiofield3850785794__addItem","mediaTitle":"formaudiofield3850785794__mediaTitle"};
+export var classes = {"root":"formaudiofield633769055__root","addItem":"formaudiofield633769055__addItem","mediaTitle":"formaudiofield633769055__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_ = "audioplayer2670232272";
+var _namespace_ = "audioplayer1086324460";
 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":"audioplayer2670232272__root"};
+export var classes = {"root":"audioplayer1086324460__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/boolean/form-boolean-radio-group-input.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import { RadioGroup } from '@wix/design-system';
+
+import type { ControlledInputProps } from '../../types/controlled-input';
+
+type BooleanSelection = 'unset' | 'false' | 'true';
+
+// RadioGroup values must be string | number, so the boolean | null | undefined
+// value is mapped to string tokens. Both null and undefined mean "no value" —
+// neither must ever render as a selected "false".
+const toSelection = (value: boolean | null | undefined): BooleanSelection => {
+  if (value == null) {
+    return 'unset';
+  }
+  return value ? 'true' : 'false';
+};
+
+const fromSelection = (
+  selection: string | number | undefined,
+): boolean | undefined => {
+  if (selection === 'true') {
+    return true;
+  }
+  return selection === 'false' ? false : undefined;
+};
+
+export interface BooleanRadioGroupInputProps
+  extends Omit<
+    ControlledInputProps<boolean | null | undefined>,
+    'onBlur' | 'autoFocus' | 'invalid'
+  > {
+  trueLabel: React.ReactNode;
+  falseLabel: React.ReactNode;
+  /**
+   * When provided, renders a third radio (first in the list) that clears the
+   * value back to `undefined`.
+   */
+  unsetLabel?: React.ReactNode;
+}
+
+export const ControlledBooleanRadioGroupInput: React.FC<
+  BooleanRadioGroupInputProps
+> = ({
+  data,
+  onChange,
+  readOnly,
+  dataHook,
+  trueLabel,
+  falseLabel,
+  unsetLabel,
+}) => (
+  <RadioGroup
+    value={toSelection(data)}
+    onChange={(selection) => onChange(fromSelection(selection))}
+    disabled={readOnly}
+    vAlign="top"
+    dataHook={dataHook}
+  >
+    {unsetLabel !== undefined && (
+      <RadioGroup.Radio value="unset">{unsetLabel}</RadioGroup.Radio>
+    )}
+    <RadioGroup.Radio value="false">{falseLabel}</RadioGroup.Radio>
+    <RadioGroup.Radio value="true">{trueLabel}</RadioGroup.Radio>
+  </RadioGroup>
+);
+
+ControlledBooleanRadioGroupInput.displayName =
+  'ControlledBooleanRadioGroupInput';

package/src/components/boolean/index.ts

@@ -2,3 +2,4 @@ export * from './boolean-view';
 export * from './cell-checkbox';
 export * from './form-checkbox';
 export * from './form-checkbox-input';
+export * from './form-boolean-radio-group-input';

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_ = "cellcolorview3462835890";
+var _namespace_ = "cellcolorview1815702415";
 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":"cellcolorview3462835890__root","hashPrefix":"cellcolorview3462835890__hashPrefix"};
+export var classes = {"root":"cellcolorview1815702415__root","hashPrefix":"cellcolorview1815702415__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_ = "colorview3811976686";
+var _namespace_ = "colorview308249970";
 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":"colorview3811976686__root","view":"colorview3811976686__view","fillPreview":"colorview3811976686__fillPreview"};
+export var classes = {"root":"colorview308249970__root","view":"colorview308249970__view","fillPreview":"colorview308249970__fillPreview"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/controlled-input.uni.driver.ts

@@ -5,6 +5,7 @@ import {
   DatePickerUniDriver,
   InputUniDriver,
   NumberInputUniDriver,
+  RadioGroupUniDriver,
 } from '@wix/design-system/dist/testkit/unidriver';
 
 import { baseUniDriverFactory } from '../testkit/base-driver';
@@ -20,5 +21,6 @@ export function ControlledInputUniDriver(base: UniDriver, body: UniDriver) {
     datePicker: DatePickerUniDriver(base, body),
     dateTime: DateTimeInputUniDriver(base, body),
     color: InputUniDriver(base, body),
+    radioGroup: RadioGroupUniDriver(base, body),
   };
 }

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "deletedialog422127738";
+var _namespace_ = "deletedialog928694296";
 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":"deletedialog422127738__root","layout":"deletedialog422127738__layout"};
+export var classes = {"root":"deletedialog928694296__root","layout":"deletedialog928694296__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_ = "formdocumentfield3433034809";
+var _namespace_ = "formdocumentfield998924595";
 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":"formdocumentfield3433034809__root","viewWrapper":"formdocumentfield3433034809__viewWrapper","textWidth":"formdocumentfield3433034809__textWidth","documentLoader":"formdocumentfield3433034809__documentLoader","addDocument":"formdocumentfield3433034809__addDocument","addItemWrapper":"formdocumentfield3433034809__addItemWrapper"};
+export var classes = {"root":"formdocumentfield998924595__root","viewWrapper":"formdocumentfield998924595__viewWrapper","textWidth":"formdocumentfield998924595__textWidth","documentLoader":"formdocumentfield998924595__documentLoader","addDocument":"formdocumentfield998924595__addDocument","addItemWrapper":"formdocumentfield998924595__addItemWrapper"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -2,12 +2,44 @@ import type { FC } from 'react';
 import React, { useRef, useCallback } from 'react';
 
 import type { InputImperativeActions } from '@wix/design-system';
+import { Input } from '@wix/design-system';
 
 import type { FormInputProps } from '../../types';
+import type { ControlledInputProps } from '../../types/controlled-input';
 import { useAutoFocus } from '../../hooks';
 
 import { EmailInput } from './email-input';
 
+export interface ControlledEmailInputProps
+  extends ControlledInputProps<string> {
+  placeholder?: string;
+}
+
+export const ControlledEmailInput: React.FC<ControlledEmailInputProps> = ({
+  data,
+  onChange,
+  onBlur,
+  readOnly,
+  autoFocus,
+  invalid,
+  dataHook,
+  placeholder,
+}) => (
+  <Input
+    type="email"
+    value={data}
+    onChange={(event) => onChange(event.target.value)}
+    onBlur={onBlur}
+    readOnly={readOnly}
+    autoFocus={autoFocus}
+    status={invalid ? 'error' : undefined}
+    placeholder={placeholder}
+    dataHook={dataHook}
+  />
+);
+
+ControlledEmailInput.displayName = 'ControlledEmailInput';
+
 export type FormEmailInputProps = FormInputProps<string>;
 
 export const FormEmailInput: FC<FormEmailInputProps> = ({

package/src/components/exclamation/exclamation.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "exclamation4293267822";
+var _namespace_ = "exclamation3904891972";
 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":"exclamation4293267822__root","exclamation":"exclamation4293267822__exclamation","actions":"exclamation4293267822__actions","action":"exclamation4293267822__action"};
+export var classes = {"root":"exclamation3904891972__root","exclamation":"exclamation3904891972__exclamation","actions":"exclamation3904891972__actions","action":"exclamation3904891972__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_ = "highlightedtext435958164";
+var _namespace_ = "highlightedtext974507702";
 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":"highlightedtext435958164__root","substring":"highlightedtext435958164__substring"};
-export var keyframes = {"highlighted":"highlightedtext435958164__highlighted","highlighted-match":"highlightedtext435958164__highlighted-match"}; 
+export var classes = {"root":"highlightedtext974507702__root","substring":"highlightedtext974507702__substring"};
+export var keyframes = {"highlighted":"highlightedtext974507702__highlighted","highlighted-match":"highlightedtext974507702__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_ = "thumbnailreplaceoverlay1698318961";
+var _namespace_ = "thumbnailreplaceoverlay1007832735";
 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":"thumbnailreplaceoverlay1698318961__root","icon":"thumbnailreplaceoverlay1698318961__icon"};
+export var classes = {"root":"thumbnailreplaceoverlay1007832735__root","icon":"thumbnailreplaceoverlay1007832735__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_ = "cellmediaeditshell2837122242";
+var _namespace_ = "cellmediaeditshell1610593214";
 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":"cellmediaeditshell2837122242__root"};
+export var classes = {"root":"cellmediaeditshell1610593214__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_ = "pasteurlbutton1980130220";
+var _namespace_ = "pasteurlbutton2545295395";
 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":"pasteurlbutton1980130220__root","iconButtonTooltip":"pasteurlbutton1980130220__iconButtonTooltip","iconButton":"pasteurlbutton1980130220__iconButton"};
+export var classes = {"root":"pasteurlbutton2545295395__root","iconButtonTooltip":"pasteurlbutton2545295395__iconButtonTooltip","iconButton":"pasteurlbutton2545295395__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_ = "formmediagalleryfield1500416633";
+var _namespace_ = "formmediagalleryfield943892357";
 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":"formmediagalleryfield1500416633__root","container":"formmediagalleryfield1500416633__container","viewBox":"formmediagalleryfield1500416633__viewBox","addItemWrapper":"formmediagalleryfield1500416633__addItemWrapper","addItem":"formmediagalleryfield1500416633__addItem","overlay":"formmediagalleryfield1500416633__overlay","image":"formmediagalleryfield1500416633__image","previewImage":"formmediagalleryfield1500416633__previewImage","previewVideo":"formmediagalleryfield1500416633__previewVideo"};
+export var classes = {"root":"formmediagalleryfield943892357__root","container":"formmediagalleryfield943892357__container","viewBox":"formmediagalleryfield943892357__viewBox","addItemWrapper":"formmediagalleryfield943892357__addItemWrapper","addItem":"formmediagalleryfield943892357__addItem","overlay":"formmediagalleryfield943892357__overlay","image":"formmediagalleryfield943892357__image","previewImage":"formmediagalleryfield943892357__previewImage","previewVideo":"formmediagalleryfield943892357__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_ = "mediaimage3002696231";
+var _namespace_ = "mediaimage3596369688";
 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":"mediaimage3002696231__root"};
+export var classes = {"root":"mediaimage3596369688__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":"--mediaimage3002696231-from","to":"--mediaimage3002696231-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":"--mediaimage3596369688-from","to":"--mediaimage3596369688-to"};