@wix/patterns-fields 1.99.0 → 1.100.0

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

@@ -443,6 +443,150 @@ describe('FieldValidationSettingsInput', () => {
     });
   });
 
+  it('explains the conflict under every rule a both-on field carries', async () => {
+    const { driver } = renderInput({
+      charactersLimit: { min: 2, max: 20 },
+      specificValues: [{ id: 'one', value: 'One' }],
+    });
+
+    expect(
+      await driver.getExclusiveRulesExplanation('specific-values').text(),
+    ).toBe('Disable the active rule first.');
+    expect(
+      await driver.getExclusiveRulesExplanation('characters-limit').text(),
+    ).toBe("You can't limit character count for specific values.");
+    expect(await driver.getExclusiveRulesExplanation('pattern').text()).toBe(
+      "You can't add pattern validation for specific values.",
+    );
+  });
+
+  it('freezes the inputs a both-on field cannot save while leaving toggles live', async () => {
+    const { driver } = renderInput({
+      charactersLimit: { min: 2, max: 20 },
+      specificValues: [{ id: 'one', value: 'One' }],
+    });
+
+    expect(await driver.getMinCharactersInput().isDisabled()).toBe(true);
+    expect(await driver.getMaxCharactersInput().isDisabled()).toBe(true);
+    expect(await driver.getSpecificValueInput(0).isDisabled()).toBe(false);
+    expect(await driver.getCharactersLimitToggle().isDisabled()).toBe(false);
+    expect(await driver.getSpecificValuesToggle().isDisabled()).toBe(false);
+  });
+
+  it('freezes the pattern input when pattern is the conflicting rule', async () => {
+    const { driver } = renderInput({
+      pattern: '^value$',
+      specificValues: [{ id: 'one', value: 'One' }],
+    });
+
+    expect(await driver.getPatternInput().isDisabled()).toBe(true);
+    expect(await driver.getPatternToggle().isDisabled()).toBe(false);
+    expect(await driver.getExclusiveRulesExplanation('pattern').text()).toBe(
+      "You can't add pattern validation for specific values.",
+    );
+  });
+
+  it('stops explaining and unfreezes the limit once the conflict is resolved', async () => {
+    const { driver } = renderInput({
+      charactersLimit: { min: 2, max: 20 },
+      specificValues: [{ id: 'one', value: 'One' }],
+    });
+
+    await driver.getSpecificValuesToggle().click();
+
+    expect(await driver.getMinCharactersInput().isDisabled()).toBe(false);
+    expect(await driver.getMaxCharactersInput().isDisabled()).toBe(false);
+    expect(
+      await driver.getExclusiveRulesExplanation('characters-limit').exists(),
+    ).toBe(false);
+    expect(
+      await driver.getExclusiveRulesExplanation('specific-values').text(),
+    ).toBe('Disable the active rule first.');
+  });
+
+  it('leaves a both-on field alone when specific values are not exclusive', async () => {
+    const { driver } = renderInput(
+      {
+        charactersLimit: { min: 2, max: 20 },
+        specificValues: [{ id: 'one', value: 'One' }],
+      },
+      { exclusiveSpecificValues: false },
+    );
+
+    expect(await driver.getMinCharactersInput().isDisabled()).toBe(false);
+    expect(await driver.getMaxCharactersInput().isDisabled()).toBe(false);
+    expect(await driver.hasExclusiveRulesExplanation()).toBe(false);
+  });
+
+  it('keeps the unattributed invalid styling while rules conflict', async () => {
+    const { driver } = renderInput(
+      {
+        charactersLimit: { min: 2, max: 20 },
+        specificValues: [{ id: 'one', value: 'One' }],
+      },
+      { invalid: true },
+    );
+
+    expect(await driver.getMinCharactersInput().hasStatus('error')).toBe(true);
+    expect(await driver.getMaxCharactersInput().hasStatus('error')).toBe(true);
+  });
+
+  it('drops the blanket highlight once a control owns an error of its own', async () => {
+    const { driver } = renderInput(
+      {
+        charactersLimit: { min: -1 },
+        specificValues: [{ id: 'one', value: 'One' }],
+      },
+      { invalid: true },
+    );
+
+    expect(await driver.getMinCharactersInput().hasStatus('error')).toBe(true);
+    expect(await driver.getMaxCharactersInput().hasStatus('error')).toBe(false);
+  });
+
+  it('freezes both conflicting rules when a field carries all three', async () => {
+    const { driver } = renderInput({
+      charactersLimit: { min: 2, max: 20 },
+      pattern: '^value$',
+      specificValues: [{ id: 'one', value: 'One' }],
+    });
+
+    expect(await driver.getMinCharactersInput().isDisabled()).toBe(true);
+    expect(await driver.getMaxCharactersInput().isDisabled()).toBe(true);
+    expect(await driver.getPatternInput().isDisabled()).toBe(true);
+    expect(
+      await driver.getExclusiveRulesExplanation('specific-values').text(),
+    ).toBe('Disable the active rule first.');
+    expect(
+      await driver.getExclusiveRulesExplanation('characters-limit').text(),
+    ).toBe("You can't limit character count for specific values.");
+    expect(await driver.getExclusiveRulesExplanation('pattern').text()).toBe(
+      "You can't add pattern validation for specific values.",
+    );
+  });
+
+  it('shows a legacy shared explanation once when both rules are on', async () => {
+    const { container } = renderInput(
+      {
+        charactersLimit: { min: 2, max: 20 },
+        specificValues: [{ id: 'one', value: 'One' }],
+      },
+      {
+        rules: [
+          { ...charactersLimitRule, exclusiveRulesExplanation: undefined },
+          specificValuesRule,
+          { ...patternRule, exclusiveRulesExplanation: undefined },
+        ],
+      },
+    );
+
+    expect(
+      Array.from(
+        container.querySelectorAll('[data-hook$="exclusive-help"]'),
+      ).map((node) => node.textContent),
+    ).toEqual(['Disable the active rule first.']);
+  });
+
   it('enables, edits, validates, and disables a string pattern', async () => {
     const { driver, onChange } = renderInput({});
 

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "addressinput1842615891";
+var _namespace_ = "addressinput3751855153";
 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":"addressinput1842615891__root","tableAddressInput":"addressinput1842615891__tableAddressInput"};
+export var classes = {"root":"addressinput3751855153__root","tableAddressInput":"addressinput3751855153__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_ = "actionsmenu488835272";
+var _namespace_ = "actionsmenu2253053106";
 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":"actionsmenu488835272__root","action":"actionsmenu488835272__action"};
+export var classes = {"root":"actionsmenu2253053106__root","action":"actionsmenu2253053106__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_ = "formaudiofield3428099532";
+var _namespace_ = "formaudiofield2277610689";
 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":"formaudiofield3428099532__root","addItem":"formaudiofield3428099532__addItem","mediaTitle":"formaudiofield3428099532__mediaTitle"};
+export var classes = {"root":"formaudiofield2277610689__root","addItem":"formaudiofield2277610689__addItem","mediaTitle":"formaudiofield2277610689__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_ = "audioplayer843647744";
+var _namespace_ = "audioplayer4170845744";
 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":"audioplayer843647744__root"};
+export var classes = {"root":"audioplayer4170845744__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_ = "cellcolorview1406342887";
+var _namespace_ = "cellcolorview2441473951";
 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":"cellcolorview1406342887__root","hashPrefix":"cellcolorview1406342887__hashPrefix"};
+export var classes = {"root":"cellcolorview2441473951__root","hashPrefix":"cellcolorview2441473951__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_ = "colorview3558273599";
+var _namespace_ = "colorview957129943";
 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":"colorview3558273599__root","view":"colorview3558273599__view","fillPreview":"colorview3558273599__fillPreview"};
+export var classes = {"root":"colorview957129943__root","view":"colorview957129943__view","fillPreview":"colorview957129943__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_ = "deletedialog3397577809";
+var _namespace_ = "deletedialog181712075";
 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":"deletedialog3397577809__root","layout":"deletedialog3397577809__layout"};
+export var classes = {"root":"deletedialog181712075__root","layout":"deletedialog181712075__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_ = "formdocumentfield3898225755";
+var _namespace_ = "formdocumentfield2106294429";
 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":"formdocumentfield3898225755__root","viewWrapper":"formdocumentfield3898225755__viewWrapper","textWidth":"formdocumentfield3898225755__textWidth","documentLoader":"formdocumentfield3898225755__documentLoader","addDocument":"formdocumentfield3898225755__addDocument","addItemWrapper":"formdocumentfield3898225755__addItemWrapper"};
+export var classes = {"root":"formdocumentfield2106294429__root","viewWrapper":"formdocumentfield2106294429__viewWrapper","textWidth":"formdocumentfield2106294429__textWidth","documentLoader":"formdocumentfield2106294429__documentLoader","addDocument":"formdocumentfield2106294429__addDocument","addItemWrapper":"formdocumentfield2106294429__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_ = "exclamation2088445520";
+var _namespace_ = "exclamation319191963";
 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":"exclamation2088445520__root","exclamation":"exclamation2088445520__exclamation","actions":"exclamation2088445520__actions","action":"exclamation2088445520__action"};
+export var classes = {"root":"exclamation319191963__root","exclamation":"exclamation319191963__exclamation","actions":"exclamation319191963__actions","action":"exclamation319191963__action"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -104,8 +104,11 @@ export const FieldValidationSettingsInput = ({
   const hasCharactersLimit =
     supportsCharactersLimit && data.charactersLimit !== undefined;
   const hasPattern = supportsPattern && data.pattern !== undefined;
+  // Other violations put an error on a control; `exclusiveRules` renders only as
+  // text under the rule, so it leaves `invalid` unattributed.
   const hasUnattributedInvalidState =
-    Boolean(invalid) && violations.length === 0;
+    Boolean(invalid) &&
+    violations.every(({ type }) => type === 'exclusiveRules');
   const isBlockedByExclusivity = (rule: FieldValidationRule) => {
     if (!exclusiveSpecificValues) {
       return false;
@@ -121,29 +124,40 @@ export const FieldValidationSettingsInput = ({
         return false;
     }
   };
+  // Widening `isBlockedByExclusivity` to cover the both-on state instead would
+  // disable both toggles at once, leaving no way to switch either rule off.
+  const isInExclusiveConflict = (rule: FieldValidationRule) =>
+    violations.some(
+      (violation) =>
+        violation.rule === rule && violation.type === 'exclusiveRules',
+    );
   const specificValuesExplanation = rules.find(
     (rule): rule is SpecificValuesFieldValidationRuleConfig =>
       rule.type === 'specificValues',
   )?.exclusiveRulesExplanation;
   // Callers written before the note moved under the blocked rule put a single
-  // explanation on `specificValues`. Show it once rather than dropping it.
+  // explanation on `specificValues`. Show it once rather than dropping it —
+  // `specificValues` renders that same copy as its own, so both paths count.
   let hasRenderedSharedExplanation = false;
   const renderExclusiveRulesExplanation = (
     rule: FieldValidationRule,
     hook: string,
     explanation?: string,
   ) => {
-    if (!isBlockedByExclusivity(rule)) {
+    if (!isBlockedByExclusivity(rule) && !isInExclusiveConflict(rule)) {
       return null;
     }
 
-    let text = explanation;
+    const text = explanation ?? specificValuesExplanation;
 
     if (!text) {
-      if (hasRenderedSharedExplanation || !specificValuesExplanation) {
+      return null;
+    }
+
+    if (text === specificValuesExplanation) {
+      if (hasRenderedSharedExplanation) {
         return null;
       }
-      text = specificValuesExplanation;
       hasRenderedSharedExplanation = true;
     }
 
@@ -189,6 +203,9 @@ export const FieldValidationSettingsInput = ({
         violation.rule === 'charactersLimit' &&
         violation.type === 'maxBelowMin',
     );
+    const isInputDisabled =
+      isRuleDisabled('charactersLimit') ||
+      isInExclusiveConflict('charactersLimit');
 
     return (
       <Box key="charactersLimit" direction="vertical" gap="SP2">
@@ -213,7 +230,7 @@ export const FieldValidationSettingsInput = ({
                   dataHook="field-validation-min-characters"
                   size="small"
                   value={data.charactersLimit?.min}
-                  disabled={isRuleDisabled('charactersLimit')}
+                  disabled={isInputDisabled}
                   status={
                     hasUnattributedInvalidState || minViolation
                       ? 'error'
@@ -247,7 +264,7 @@ export const FieldValidationSettingsInput = ({
                   dataHook="field-validation-max-characters"
                   size="small"
                   value={data.charactersLimit?.max}
-                  disabled={isRuleDisabled('charactersLimit')}
+                  disabled={isInputDisabled}
                   status={
                     hasUnattributedInvalidState ||
                     maxOutOfBoundsViolation ||
@@ -423,7 +440,9 @@ export const FieldValidationSettingsInput = ({
               dataHook="field-validation-pattern-input"
               size="small"
               value={data.pattern}
-              disabled={isRuleDisabled('pattern')}
+              disabled={
+                isRuleDisabled('pattern') || isInExclusiveConflict('pattern')
+              }
               status={
                 hasUnattributedInvalidState || patternViolation
                   ? 'error'

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "highlightedtext2205306294";
+var _namespace_ = "highlightedtext1183810410";
 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":"highlightedtext2205306294__root","substring":"highlightedtext2205306294__substring"};
-export var keyframes = {"highlighted":"highlightedtext2205306294__highlighted","highlighted-match":"highlightedtext2205306294__highlighted-match"}; 
+export var classes = {"root":"highlightedtext1183810410__root","substring":"highlightedtext1183810410__substring"};
+export var keyframes = {"highlighted":"highlightedtext1183810410__highlighted","highlighted-match":"highlightedtext1183810410__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_ = "thumbnailreplaceoverlay3810574377";
+var _namespace_ = "thumbnailreplaceoverlay142596445";
 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":"thumbnailreplaceoverlay3810574377__root","icon":"thumbnailreplaceoverlay3810574377__icon"};
+export var classes = {"root":"thumbnailreplaceoverlay142596445__root","icon":"thumbnailreplaceoverlay142596445__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_ = "cellmediaeditshell1576869378";
+var _namespace_ = "cellmediaeditshell937768104";
 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":"cellmediaeditshell1576869378__root"};
+export var classes = {"root":"cellmediaeditshell937768104__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_ = "pasteurlbutton2410213275";
+var _namespace_ = "pasteurlbutton1414539464";
 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":"pasteurlbutton2410213275__root","iconButtonTooltip":"pasteurlbutton2410213275__iconButtonTooltip","iconButton":"pasteurlbutton2410213275__iconButton"};
+export var classes = {"root":"pasteurlbutton1414539464__root","iconButtonTooltip":"pasteurlbutton1414539464__iconButtonTooltip","iconButton":"pasteurlbutton1414539464__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_ = "formmediagalleryfield4067745930";
+var _namespace_ = "formmediagalleryfield1202900369";
 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":"formmediagalleryfield4067745930__root","container":"formmediagalleryfield4067745930__container","viewBox":"formmediagalleryfield4067745930__viewBox","addItemWrapper":"formmediagalleryfield4067745930__addItemWrapper","addItem":"formmediagalleryfield4067745930__addItem","overlay":"formmediagalleryfield4067745930__overlay","image":"formmediagalleryfield4067745930__image","previewImage":"formmediagalleryfield4067745930__previewImage","previewVideo":"formmediagalleryfield4067745930__previewVideo"};
+export var classes = {"root":"formmediagalleryfield1202900369__root","container":"formmediagalleryfield1202900369__container","viewBox":"formmediagalleryfield1202900369__viewBox","addItemWrapper":"formmediagalleryfield1202900369__addItemWrapper","addItem":"formmediagalleryfield1202900369__addItem","overlay":"formmediagalleryfield1202900369__overlay","image":"formmediagalleryfield1202900369__image","previewImage":"formmediagalleryfield1202900369__previewImage","previewVideo":"formmediagalleryfield1202900369__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_ = "mediaimage751937972";
+var _namespace_ = "mediaimage553009223";
 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":"mediaimage751937972__root"};
+export var classes = {"root":"mediaimage553009223__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":"--mediaimage751937972-from","to":"--mediaimage751937972-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":"--mediaimage553009223-from","to":"--mediaimage553009223-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_ = "overlay2541288109";
+var _namespace_ = "overlay732625331";
 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":"overlay2541288109__root","iconOverlay":"overlay2541288109__iconOverlay"};
+export var classes = {"root":"overlay732625331__root","iconOverlay":"overlay732625331__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_ = "mediatag2984310725";
+var _namespace_ = "mediatag2827893615";
 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":"mediatag2984310725__root"};
+export var classes = {"root":"mediatag2827893615__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_ = "cellmultidocumentedit2069921304";
+var _namespace_ = "cellmultidocumentedit1559378976";
 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":"cellmultidocumentedit2069921304__root","chipTrigger":"cellmultidocumentedit2069921304__chipTrigger"};
+export var classes = {"root":"cellmultidocumentedit1559378976__root","chipTrigger":"cellmultidocumentedit1559378976__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_ = "formmultidocument3200037661";
+var _namespace_ = "formmultidocument1172689394";
 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":"formmultidocument3200037661__root","viewRoot":"formmultidocument3200037661__viewRoot","singleViewWrapper":"formmultidocument3200037661__singleViewWrapper","addDocumentButton":"formmultidocument3200037661__addDocumentButton"};
+export var classes = {"root":"formmultidocument1172689394__root","viewRoot":"formmultidocument1172689394__viewRoot","singleViewWrapper":"formmultidocument1172689394__singleViewWrapper","addDocumentButton":"formmultidocument1172689394__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_ = "cellmultireferenceinput29376945";
+var _namespace_ = "cellmultireferenceinput3368755835";
 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":"cellmultireferenceinput29376945__root"};
+export var classes = {"root":"cellmultireferenceinput3368755835__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};