@wix/patterns-fields 1.106.0 → 1.108.0

package/src/__tests__/components/field-validation-settings/field-validation-settings-input.spec.tsx

@@ -71,6 +71,7 @@ interface RenderInputOptions {
   rules?: readonly FieldValidationRuleConfig[];
   readOnly?: boolean;
   invalid?: boolean;
+  showValidationErrors?: boolean;
   disabledRules?: readonly FieldValidationRuleConfig['type'][];
   exclusiveSpecificValues?: boolean;
 }
@@ -81,13 +82,18 @@ const renderInput = (
     rules = allRules,
     readOnly,
     invalid,
+    showValidationErrors,
     disabledRules,
     exclusiveSpecificValues,
   }: RenderInputOptions = {},
 ) => {
   const onChange = jest.fn<void, [FieldValidationSettingsValue]>();
 
-  const TestInput = () => {
+  const TestInput = ({
+    showValidationErrors,
+  }: {
+    showValidationErrors?: boolean;
+  }) => {
     const [data, setData] = useState(initialData);
     return (
       <FieldValidationSettingsInput
@@ -96,6 +102,7 @@ const renderInput = (
         rules={rules}
         readOnly={readOnly}
         invalid={invalid}
+        showValidationErrors={showValidationErrors}
         disabledRules={disabledRules}
         exclusiveSpecificValues={exclusiveSpecificValues}
         onChange={(nextData) => {
@@ -106,10 +113,15 @@ const renderInput = (
     );
   };
 
-  const result = render(<TestInput />, { wrapper: PatternsFieldsTestProvider });
+  const result = render(
+    <TestInput showValidationErrors={showValidationErrors} />,
+    { wrapper: PatternsFieldsTestProvider },
+  );
 
   return {
     ...result,
+    setErrorVisibility: (visible: boolean) =>
+      result.rerender(<TestInput showValidationErrors={visible} />),
     driver: testkitFactory({
       wrapper: result.container,
       dataHook: 'validation',
@@ -119,6 +131,114 @@ const renderInput = (
 };
 
 describe('FieldValidationSettingsInput', () => {
+  describe('controlled error visibility', () => {
+    it.each([
+      {
+        label: 'minimum',
+        data: { charactersLimit: { min: -1 } },
+        input: 'min',
+      },
+      { label: 'maximum', data: { charactersLimit: { max: 0 } }, input: 'max' },
+      {
+        label: 'range order',
+        data: { charactersLimit: { min: 20, max: 2 } },
+        input: 'max',
+      },
+      {
+        label: 'blank value',
+        data: { specificValues: [{ id: 'a', value: '' }] },
+        input: 'value',
+      },
+      {
+        label: 'duplicate value',
+        data: {
+          specificValues: [
+            { id: 'a', value: 'same' },
+            { id: 'b', value: 'same' },
+          ],
+        },
+        input: 'duplicate',
+      },
+      { label: 'invalid pattern', data: { pattern: '[' }, input: 'pattern' },
+      {
+        label: 'unsafe pattern',
+        data: { pattern: '^(a+)+$' },
+        input: 'pattern',
+      },
+    ])(
+      'defers $label feedback until requested without changing the draft',
+      async ({ data, input }) => {
+        const { driver, onChange, setErrorVisibility } = renderInput(data, {
+          showValidationErrors: false,
+        });
+        const control =
+          input === 'min'
+            ? driver.getMinCharactersInput()
+            : input === 'max'
+            ? driver.getMaxCharactersInput()
+            : input === 'value' || input === 'duplicate'
+            ? driver.getSpecificValueInput(input === 'duplicate' ? 1 : 0)
+            : driver.getPatternInput();
+        expect(await control.hasStatus('error')).toBe(false);
+        setErrorVisibility(true);
+        expect(await control.hasStatus('error')).toBe(true);
+        setErrorVisibility(false);
+        expect(await control.hasStatus('error')).toBe(false);
+        expect(onChange).not.toHaveBeenCalled();
+      },
+    );
+
+    it('defers the caller-invalid state for empty enabled rules', async () => {
+      const { driver, setErrorVisibility } = renderInput(
+        { charactersLimit: {}, pattern: '' },
+        { invalid: true, showValidationErrors: false },
+      );
+      expect(await driver.getMinCharactersInput().hasStatus('error')).toBe(
+        false,
+      );
+      expect(await driver.getMaxCharactersInput().hasStatus('error')).toBe(
+        false,
+      );
+      expect(await driver.getPatternInput().hasStatus('error')).toBe(false);
+      setErrorVisibility(true);
+      expect(await driver.getMinCharactersInput().hasStatus('error')).toBe(
+        true,
+      );
+      expect(await driver.getMaxCharactersInput().hasStatus('error')).toBe(
+        true,
+      );
+      expect(await driver.getPatternInput().hasStatus('error')).toBe(true);
+    });
+
+    it('keeps rule availability and its explanation when errors are hidden', async () => {
+      const { driver } = renderInput(
+        { specificValues: [{ id: 'a', value: '' }] },
+        { showValidationErrors: false },
+      );
+      expect(await driver.getCharactersLimitToggle().isDisabled()).toBe(true);
+      expect(
+        await driver.getExclusiveRulesExplanation('characters-limit').exists(),
+      ).toBe(true);
+      expect(await driver.getSpecificValueInput(0).hasStatus('error')).toBe(
+        false,
+      );
+    });
+
+    it('updates feedback as a pattern is corrected after errors become visible', async () => {
+      const { driver, setErrorVisibility, onChange } = renderInput(
+        { pattern: '[' },
+        { showValidationErrors: false },
+      );
+      setErrorVisibility(true);
+      expect(await driver.getPatternInput().getStatusMessage()).toBe(
+        'Enter a valid regular expression.',
+      );
+      await driver.getPatternInput().enterText('^valid$');
+      expect(await driver.getPatternInput().hasStatus('error')).toBe(false);
+      expect(onChange).toHaveBeenLastCalledWith({ pattern: '^valid$' });
+    });
+  });
+
   it.each(ruleCombinations)(
     'renders exactly the configured rule combination: %j',
     async (...rules) => {

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

@@ -42,6 +42,19 @@ describe('FormImageInput field', () => {
     );
   });
 
+  it('renders a structured image in the item form', async () => {
+    const image = {
+      uri: 'wix:image://v1/913019_d5425b6817dc4739bd0f3a494d4ec00b~mv2.jpg/photo.jpg#originWidth=4668&originHeight=4669',
+      url: 'https://example.com/fallback.jpg',
+      width: 4668,
+      height: 4669,
+    };
+    const driver = setup({ initialValue: image as unknown as string });
+    expect(await driver.tk.getImageUrl()).toContain(
+      '913019_d5425b6817dc4739bd0f3a494d4ec00b~mv2.jpg',
+    );
+  });
+
   it('renders the image when the value is a bare media id', async () => {
     const driver = setup({
       initialValue: 'dafa67_9aa1f03ed7274a7795d2f2e18a245ac7~mv2.jpg',
@@ -93,5 +106,4 @@ describe('FormImageInput field', () => {
         ?.contains(active),
     ).toBe(true);
   });
-
 });

package/src/__tests__/components/image/image-view-field.spec.tsx

@@ -17,6 +17,16 @@ const renderField = (
   );
 
 describe('ImageViewField', () => {
+  it('renders a structured image in the read-only field', () => {
+    renderField({ value: { uri: WIX_MEDIA_URI }, displayName: 'Photo' });
+    expect(screen.getByAltText('Photo')).toHaveAttribute(
+      'src',
+      expect.stringContaining(
+        'dafa67_9aa1f03ed7274a7795d2f2e18a245ac7~mv2.jpg',
+      ),
+    );
+  });
+
   it('renders a placeholder dash when value is not a string', () => {
     renderField({ value: undefined });
     expect(screen.getByText('-')).toBeInTheDocument();

package/src/__tests__/utils/get-image-url.spec.ts

@@ -4,6 +4,26 @@ const MEDIA_ID = 'dafa67_9aa1f03ed7274a7795d2f2e18a245ac7~mv2.jpg';
 const WIX_STATIC = `https://static.wixstatic.com/media/${MEDIA_ID}`;
 
 describe('getImageUrl', () => {
+  it('resolves a structured image using its URI first', () => {
+    expect(
+      getImageUrl({
+        uri: `wix:image://v1/${MEDIA_ID}/photo.jpg`,
+        url: 'https://example.com/fallback.jpg',
+      }),
+    ).toBe(WIX_STATIC);
+  });
+
+  it('falls back to the URL of a structured image', () => {
+    expect(getImageUrl({ url: WIX_STATIC })).toBe(WIX_STATIC);
+  });
+
+  it.each([{}, 42, false, { uri: 42, url: {} }])(
+    'ignores unsupported image values',
+    (value) => {
+      expect(getImageUrl(value)).toBeUndefined();
+    },
+  );
+
   it('returns undefined for empty values', () => {
     expect(getImageUrl(undefined)).toBeUndefined();
     expect(getImageUrl(null)).toBeUndefined();

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "addressinput3563313791";
+var _namespace_ = "addressinput1753982187";
 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":"addressinput3563313791__root","tableAddressInput":"addressinput3563313791__tableAddressInput"};
+export var classes = {"root":"addressinput1753982187__root","tableAddressInput":"addressinput1753982187__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_ = "actionsmenu569615331";
+var _namespace_ = "actionsmenu132710167";
 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":"actionsmenu569615331__root","action":"actionsmenu569615331__action"};
+export var classes = {"root":"actionsmenu132710167__root","action":"actionsmenu132710167__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_ = "formaudiofield356707707";
+var _namespace_ = "formaudiofield2070924690";
 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":"formaudiofield356707707__root","addItem":"formaudiofield356707707__addItem","mediaTitle":"formaudiofield356707707__mediaTitle"};
+export var classes = {"root":"formaudiofield2070924690__root","addItem":"formaudiofield2070924690__addItem","mediaTitle":"formaudiofield2070924690__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_ = "audioplayer1156907405";
+var _namespace_ = "audioplayer3409967597";
 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":"audioplayer1156907405__root"};
+export var classes = {"root":"audioplayer3409967597__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_ = "cellcolorview4192293911";
+var _namespace_ = "cellcolorview3646440040";
 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":"cellcolorview4192293911__root","hashPrefix":"cellcolorview4192293911__hashPrefix"};
+export var classes = {"root":"cellcolorview3646440040__root","hashPrefix":"cellcolorview3646440040__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_ = "colorview3155115473";
+var _namespace_ = "colorview1258591125";
 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":"colorview3155115473__root","view":"colorview3155115473__view","fillPreview":"colorview3155115473__fillPreview"};
+export var classes = {"root":"colorview1258591125__root","view":"colorview1258591125__view","fillPreview":"colorview1258591125__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_ = "deletedialog4088908994";
+var _namespace_ = "deletedialog744307190";
 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":"deletedialog4088908994__root","layout":"deletedialog4088908994__layout"};
+export var classes = {"root":"deletedialog744307190__root","layout":"deletedialog744307190__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_ = "formdocumentfield567415095";
+var _namespace_ = "formdocumentfield2402620674";
 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":"formdocumentfield567415095__root","viewWrapper":"formdocumentfield567415095__viewWrapper","textWidth":"formdocumentfield567415095__textWidth","documentLoader":"formdocumentfield567415095__documentLoader","addDocument":"formdocumentfield567415095__addDocument","addItemWrapper":"formdocumentfield567415095__addItemWrapper"};
+export var classes = {"root":"formdocumentfield2402620674__root","viewWrapper":"formdocumentfield2402620674__viewWrapper","textWidth":"formdocumentfield2402620674__textWidth","documentLoader":"formdocumentfield2402620674__documentLoader","addDocument":"formdocumentfield2402620674__addDocument","addItemWrapper":"formdocumentfield2402620674__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_ = "exclamation1051403069";
+var _namespace_ = "exclamation3341739339";
 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":"exclamation1051403069__root","exclamation":"exclamation1051403069__exclamation","actions":"exclamation1051403069__actions","action":"exclamation1051403069__action"};
+export var classes = {"root":"exclamation3341739339__root","exclamation":"exclamation3341739339__exclamation","actions":"exclamation3341739339__actions","action":"exclamation3341739339__action"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/field-validation-settings/field-validation-settings-input.tsx

@@ -30,6 +30,9 @@ export interface FieldValidationSettingsInputProps
     'autoFocus' | 'onBlur'
   > {
   rules: readonly FieldValidationRuleConfig[];
+  /** Show error styling/messages, including caller-supplied `invalid` state.
+   *  Defaults to true. Does not alter validity or rule availability. */
+  showValidationErrors?: boolean;
   /** Rules the caller has fixed and the user can't toggle, independent of `readOnly`. */
   disabledRules?: readonly FieldValidationRule[];
   /** Whether `specificValues` rejects `charactersLimit`/`pattern` on the same
@@ -81,6 +84,7 @@ export const FieldValidationSettingsInput = ({
   rules,
   disabledRules,
   exclusiveSpecificValues = true,
+  showValidationErrors = true,
 }: FieldValidationSettingsInputProps) => {
   const isRuleDisabled = (rule: FieldValidationRule) =>
     Boolean(readOnly) || Boolean(disabledRules?.includes(rule));
@@ -92,6 +96,7 @@ export const FieldValidationSettingsInput = ({
       exclusiveSpecificValues,
     },
   );
+  const errorViolations = showValidationErrors ? violations : [];
   const supportsSpecificValues = rules.some(
     ({ type }) => type === 'specificValues',
   );
@@ -107,6 +112,7 @@ export const FieldValidationSettingsInput = ({
   // Other violations put an error on a control; `exclusiveRules` renders only as
   // text under the rule, so it leaves `invalid` unattributed.
   const hasUnattributedInvalidState =
+    showValidationErrors &&
     Boolean(invalid) &&
     violations.every(({ type }) => type === 'exclusiveRules');
   const isBlockedByExclusivity = (rule: FieldValidationRule) => {
@@ -186,19 +192,19 @@ export const FieldValidationSettingsInput = ({
   const renderCharactersLimit = (
     rule: CharactersLimitFieldValidationRuleConfig,
   ) => {
-    const minViolation = violations.find(
+    const minViolation = errorViolations.find(
       (violation) =>
         violation.rule === 'charactersLimit' &&
         violation.type === 'outOfBounds' &&
         violation.bound === 'min',
     );
-    const maxOutOfBoundsViolation = violations.find(
+    const maxOutOfBoundsViolation = errorViolations.find(
       (violation) =>
         violation.rule === 'charactersLimit' &&
         violation.type === 'outOfBounds' &&
         violation.bound === 'max',
     );
-    const maxBelowMinViolation = violations.find(
+    const maxBelowMinViolation = errorViolations.find(
       (violation) =>
         violation.rule === 'charactersLimit' &&
         violation.type === 'maxBelowMin',
@@ -324,7 +330,7 @@ export const FieldValidationSettingsInput = ({
       {hasSpecificValues && (
         <Box direction="vertical" gap="SP2">
           {data.specificValues?.map((option, index) => {
-            const optionViolation = violations.find(
+            const optionViolation = errorViolations.find(
               (violation) =>
                 violation.rule === 'specificValues' &&
                 'optionId' in violation &&
@@ -411,7 +417,7 @@ export const FieldValidationSettingsInput = ({
   );
 
   const renderPattern = (rule: PatternFieldValidationRuleConfig) => {
-    const patternViolation = violations.find(
+    const patternViolation = errorViolations.find(
       (violation) =>
         violation.rule === 'pattern' &&
         (violation.type === 'invalidPattern' ||

package/src/components/highlighted-text/highlighted-text.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "highlightedtext3229524057";
+var _namespace_ = "highlightedtext3372272020";
 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":"highlightedtext3229524057__root","substring":"highlightedtext3229524057__substring"};
-export var keyframes = {"highlighted":"highlightedtext3229524057__highlighted","highlighted-match":"highlightedtext3229524057__highlighted-match"}; 
+export var classes = {"root":"highlightedtext3372272020__root","substring":"highlightedtext3372272020__substring"};
+export var keyframes = {"highlighted":"highlightedtext3372272020__highlighted","highlighted-match":"highlightedtext3372272020__highlighted-match"}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {}; 

package/src/components/image/image-view-field.tsx

@@ -18,8 +18,7 @@ export const ImageViewField: React.FC<ImageViewFieldProps> = ({
   displayName,
   id,
 }) => {
-  const imageValue = typeof value === 'string' ? value : undefined;
-  const imageUrl = getImageUrl(imageValue);
+  const imageUrl = getImageUrl(value);
 
   if (!imageUrl) {
     return <Text>-</Text>;

package/src/components/image/thumbnail-replace-overlay.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "thumbnailreplaceoverlay2008665341";
+var _namespace_ = "thumbnailreplaceoverlay2032633141";
 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":"thumbnailreplaceoverlay2008665341__root","icon":"thumbnailreplaceoverlay2008665341__icon"};
+export var classes = {"root":"thumbnailreplaceoverlay2032633141__root","icon":"thumbnailreplaceoverlay2032633141__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_ = "cellmediaeditshell2419159734";
+var _namespace_ = "cellmediaeditshell235224359";
 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":"cellmediaeditshell2419159734__root"};
+export var classes = {"root":"cellmediaeditshell235224359__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_ = "pasteurlbutton3954228839";
+var _namespace_ = "pasteurlbutton2373892225";
 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":"pasteurlbutton3954228839__root","iconButtonTooltip":"pasteurlbutton3954228839__iconButtonTooltip","iconButton":"pasteurlbutton3954228839__iconButton"};
+export var classes = {"root":"pasteurlbutton2373892225__root","iconButtonTooltip":"pasteurlbutton2373892225__iconButtonTooltip","iconButton":"pasteurlbutton2373892225__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_ = "formmediagalleryfield2517936608";
+var _namespace_ = "formmediagalleryfield668604997";
 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":"formmediagalleryfield2517936608__root","container":"formmediagalleryfield2517936608__container","viewBox":"formmediagalleryfield2517936608__viewBox","addItemWrapper":"formmediagalleryfield2517936608__addItemWrapper","addItem":"formmediagalleryfield2517936608__addItem","overlay":"formmediagalleryfield2517936608__overlay","image":"formmediagalleryfield2517936608__image","previewImage":"formmediagalleryfield2517936608__previewImage","previewVideo":"formmediagalleryfield2517936608__previewVideo"};
+export var classes = {"root":"formmediagalleryfield668604997__root","container":"formmediagalleryfield668604997__container","viewBox":"formmediagalleryfield668604997__viewBox","addItemWrapper":"formmediagalleryfield668604997__addItemWrapper","addItem":"formmediagalleryfield668604997__addItem","overlay":"formmediagalleryfield668604997__overlay","image":"formmediagalleryfield668604997__image","previewImage":"formmediagalleryfield668604997__previewImage","previewVideo":"formmediagalleryfield668604997__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_ = "mediaimage1035920699";
+var _namespace_ = "mediaimage1816130638";
 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":"mediaimage1035920699__root"};
+export var classes = {"root":"mediaimage1816130638__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":"--mediaimage1035920699-from","to":"--mediaimage1035920699-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":"--mediaimage1816130638-from","to":"--mediaimage1816130638-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_ = "overlay1512312462";
+var _namespace_ = "overlay1530238555";
 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":"overlay1512312462__root","iconOverlay":"overlay1512312462__iconOverlay"};
+export var classes = {"root":"overlay1530238555__root","iconOverlay":"overlay1530238555__iconOverlay"};
 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_ = "mediatag1786029818";
+var _namespace_ = "mediatag1357066181";
 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":"mediatag1786029818__root"};
+export var classes = {"root":"mediatag1357066181__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};