@wix/patterns-fields 1.94.0 → 1.96.0

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

@@ -32,6 +32,9 @@ export interface FieldValidationSettingsInputProps
   rules: readonly FieldValidationRuleConfig[];
   /** 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
+   *  field. Pass `false` for callers that let a field carry both. */
+  exclusiveSpecificValues?: boolean;
 }
 
 interface RuleToggleProps {
@@ -77,11 +80,18 @@ export const FieldValidationSettingsInput = ({
   dataHook = 'field-validation-settings',
   rules,
   disabledRules,
+  exclusiveSpecificValues = true,
 }: FieldValidationSettingsInputProps) => {
   const isRuleDisabled = (rule: FieldValidationRule) =>
     Boolean(readOnly) || Boolean(disabledRules?.includes(rule));
   const supportedRules = rules.map(({ type }) => type);
-  const violations = getFieldValidationSettingsViolations(data, supportedRules);
+  const violations = getFieldValidationSettingsViolations(
+    data,
+    supportedRules,
+    {
+      exclusiveSpecificValues,
+    },
+  );
   const supportsSpecificValues = rules.some(
     ({ type }) => type === 'specificValues',
   );
@@ -96,9 +106,53 @@ export const FieldValidationSettingsInput = ({
   const hasPattern = supportsPattern && data.pattern !== undefined;
   const hasUnattributedInvalidState =
     Boolean(invalid) && violations.length === 0;
-  const showsExclusiveRulesExplanation =
-    (supportsCharactersLimit && (hasSpecificValues || hasCharactersLimit)) ||
-    (supportsPattern && (hasSpecificValues || hasPattern));
+  const isBlockedByExclusivity = (rule: FieldValidationRule) => {
+    if (!exclusiveSpecificValues) {
+      return false;
+    }
+    switch (rule) {
+      case 'charactersLimit':
+        return hasSpecificValues && !hasCharactersLimit;
+      case 'pattern':
+        return hasSpecificValues && !hasPattern;
+      case 'specificValues':
+        return (hasCharactersLimit || hasPattern) && !hasSpecificValues;
+      default:
+        return false;
+    }
+  };
+  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.
+  let hasRenderedSharedExplanation = false;
+  const renderExclusiveRulesExplanation = (
+    rule: FieldValidationRule,
+    hook: string,
+    explanation?: string,
+  ) => {
+    if (!isBlockedByExclusivity(rule)) {
+      return null;
+    }
+
+    let text = explanation;
+
+    if (!text) {
+      if (hasRenderedSharedExplanation || !specificValuesExplanation) {
+        return null;
+      }
+      text = specificValuesExplanation;
+      hasRenderedSharedExplanation = true;
+    }
+
+    return (
+      <Text size="tiny" secondary dataHook={`${hook}-exclusive-help`}>
+        {text}
+      </Text>
+    );
+  };
 
   const update = (next: Partial<FieldValidationSettingsValue>) =>
     onChange({ ...data, ...next });
@@ -143,7 +197,7 @@ export const FieldValidationSettingsInput = ({
           checked={hasCharactersLimit}
           disabled={
             isRuleDisabled('charactersLimit') ||
-            (hasSpecificValues && !hasCharactersLimit)
+            isBlockedByExclusivity('charactersLimit')
           }
           label={rule.label}
           infoContent={rule.tooltip}
@@ -224,6 +278,11 @@ export const FieldValidationSettingsInput = ({
             </Box>
           </Box>
         )}
+        {renderExclusiveRulesExplanation(
+          'charactersLimit',
+          'field-validation-characters-limit',
+          rule.exclusiveRulesExplanation,
+        )}
       </Box>
     );
   };
@@ -237,7 +296,7 @@ export const FieldValidationSettingsInput = ({
         checked={hasSpecificValues}
         disabled={
           isRuleDisabled('specificValues') ||
-          ((hasCharactersLimit || hasPattern) && !hasSpecificValues)
+          isBlockedByExclusivity('specificValues')
         }
         label={rule.label}
         infoContent={rule.tooltip}
@@ -326,10 +385,10 @@ export const FieldValidationSettingsInput = ({
           </Box>
         </Box>
       )}
-      {showsExclusiveRulesExplanation && (
-        <Text size="tiny" secondary dataHook="field-validation-exclusive-help">
-          {rule.exclusiveRulesExplanation}
-        </Text>
+      {renderExclusiveRulesExplanation(
+        'specificValues',
+        'field-validation-specific-values',
+        rule.exclusiveRulesExplanation,
       )}
     </Box>
   );
@@ -352,7 +411,7 @@ export const FieldValidationSettingsInput = ({
           dataHook="field-validation-pattern"
           checked={hasPattern}
           disabled={
-            isRuleDisabled('pattern') || (hasSpecificValues && !hasPattern)
+            isRuleDisabled('pattern') || isBlockedByExclusivity('pattern')
           }
           label={rule.label}
           infoContent={rule.tooltip}
@@ -375,6 +434,11 @@ export const FieldValidationSettingsInput = ({
             />
           </FormField>
         )}
+        {renderExclusiveRulesExplanation(
+          'pattern',
+          'field-validation-pattern',
+          rule.exclusiveRulesExplanation,
+        )}
       </Box>
     );
   };

package/src/components/field-validation-settings/field-validation-settings.uni.driver.ts

@@ -54,7 +54,9 @@ export function FieldValidationSettingsUniDriver(
         base.$('[data-hook="field-validation-pattern-input"]'),
         body,
       ),
+    getExclusiveRulesExplanation: (rule: string) =>
+      base.$(`[data-hook="field-validation-${rule}-exclusive-help"]`),
     hasExclusiveRulesExplanation: () =>
-      base.$('[data-hook="field-validation-exclusive-help"]').exists(),
+      base.$('[data-hook$="exclusive-help"]').exists(),
   };
 }

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "highlightedtext336599750";
+var _namespace_ = "highlightedtext3876074879";
 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":"highlightedtext336599750__root","substring":"highlightedtext336599750__substring"};
-export var keyframes = {"highlighted":"highlightedtext336599750__highlighted","highlighted-match":"highlightedtext336599750__highlighted-match"}; 
+export var classes = {"root":"highlightedtext3876074879__root","substring":"highlightedtext3876074879__substring"};
+export var keyframes = {"highlighted":"highlightedtext3876074879__highlighted","highlighted-match":"highlightedtext3876074879__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_ = "thumbnailreplaceoverlay4087281964";
+var _namespace_ = "thumbnailreplaceoverlay2515140289";
 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":"thumbnailreplaceoverlay4087281964__root","icon":"thumbnailreplaceoverlay4087281964__icon"};
+export var classes = {"root":"thumbnailreplaceoverlay2515140289__root","icon":"thumbnailreplaceoverlay2515140289__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_ = "cellmediaeditshell2326789165";
+var _namespace_ = "cellmediaeditshell1073108108";
 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":"cellmediaeditshell2326789165__root"};
+export var classes = {"root":"cellmediaeditshell1073108108__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_ = "pasteurlbutton1933392353";
+var _namespace_ = "pasteurlbutton2861872181";
 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":"pasteurlbutton1933392353__root","iconButtonTooltip":"pasteurlbutton1933392353__iconButtonTooltip","iconButton":"pasteurlbutton1933392353__iconButton"};
+export var classes = {"root":"pasteurlbutton2861872181__root","iconButtonTooltip":"pasteurlbutton2861872181__iconButtonTooltip","iconButton":"pasteurlbutton2861872181__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_ = "formmediagalleryfield3998473428";
+var _namespace_ = "formmediagalleryfield2262092553";
 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":"formmediagalleryfield3998473428__root","container":"formmediagalleryfield3998473428__container","viewBox":"formmediagalleryfield3998473428__viewBox","addItemWrapper":"formmediagalleryfield3998473428__addItemWrapper","addItem":"formmediagalleryfield3998473428__addItem","overlay":"formmediagalleryfield3998473428__overlay","image":"formmediagalleryfield3998473428__image","previewImage":"formmediagalleryfield3998473428__previewImage","previewVideo":"formmediagalleryfield3998473428__previewVideo"};
+export var classes = {"root":"formmediagalleryfield2262092553__root","container":"formmediagalleryfield2262092553__container","viewBox":"formmediagalleryfield2262092553__viewBox","addItemWrapper":"formmediagalleryfield2262092553__addItemWrapper","addItem":"formmediagalleryfield2262092553__addItem","overlay":"formmediagalleryfield2262092553__overlay","image":"formmediagalleryfield2262092553__image","previewImage":"formmediagalleryfield2262092553__previewImage","previewVideo":"formmediagalleryfield2262092553__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_ = "mediaimage3148041009";
+var _namespace_ = "mediaimage1912006507";
 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":"mediaimage3148041009__root"};
+export var classes = {"root":"mediaimage1912006507__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":"--mediaimage3148041009-from","to":"--mediaimage3148041009-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":"--mediaimage1912006507-from","to":"--mediaimage1912006507-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_ = "overlay2129544777";
+var _namespace_ = "overlay1534127645";
 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":"overlay2129544777__root","iconOverlay":"overlay2129544777__iconOverlay"};
+export var classes = {"root":"overlay1534127645__root","iconOverlay":"overlay1534127645__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_ = "mediatag1682102498";
+var _namespace_ = "mediatag1753723167";
 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":"mediatag1682102498__root"};
+export var classes = {"root":"mediatag1753723167__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_ = "cellmultidocumentedit1914587532";
+var _namespace_ = "cellmultidocumentedit684700786";
 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":"cellmultidocumentedit1914587532__root","chipTrigger":"cellmultidocumentedit1914587532__chipTrigger"};
+export var classes = {"root":"cellmultidocumentedit684700786__root","chipTrigger":"cellmultidocumentedit684700786__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_ = "formmultidocument3094149956";
+var _namespace_ = "formmultidocument4258414100";
 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":"formmultidocument3094149956__root","viewRoot":"formmultidocument3094149956__viewRoot","singleViewWrapper":"formmultidocument3094149956__singleViewWrapper","addDocumentButton":"formmultidocument3094149956__addDocumentButton"};
+export var classes = {"root":"formmultidocument4258414100__root","viewRoot":"formmultidocument4258414100__viewRoot","singleViewWrapper":"formmultidocument4258414100__singleViewWrapper","addDocumentButton":"formmultidocument4258414100__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_ = "cellmultireferenceinput3144614699";
+var _namespace_ = "cellmultireferenceinput802983897";
 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":"cellmultireferenceinput3144614699__root"};
+export var classes = {"root":"cellmultireferenceinput802983897__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/reference/cell-reference-input.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "cellreferenceinput3062114626";
+var _namespace_ = "cellreferenceinput3044213567";
 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":"cellreferenceinput3062114626__root","autocomplete":"cellreferenceinput3062114626__autocomplete"};
+export var classes = {"root":"cellreferenceinput3044213567__root","autocomplete":"cellreferenceinput3044213567__autocomplete"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/rich-content/rich-content-input/default-value-input/rich-content-default-value-input.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "richcontentdefaultvalueinput2404149612";
+var _namespace_ = "richcontentdefaultvalueinput3491047452";
 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":"richcontentdefaultvalueinput2404149612__root","richContentEditorContainer":"richcontentdefaultvalueinput2404149612__richContentEditorContainer","editor":"richcontentdefaultvalueinput2404149612__editor"};
+export var classes = {"root":"richcontentdefaultvalueinput3491047452__root","richContentEditorContainer":"richcontentdefaultvalueinput3491047452__richContentEditorContainer","editor":"richcontentdefaultvalueinput3491047452__editor"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/rich-content/rich-content-input/form-input/rich-content-form-input.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "richcontentforminput1162537413";
+var _namespace_ = "richcontentforminput2743840906";
 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":"richcontentforminput1162537413__root","editor":"richcontentforminput1162537413__editor"};
+export var classes = {"root":"richcontentforminput2743840906__root","editor":"richcontentforminput2743840906__editor"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/rich-content/rich-content-input/form-read-only-input/rich-content-form-read-only-input.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "richcontentformreadonlyinput1239757923";
+var _namespace_ = "richcontentformreadonlyinput756606055";
 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":"richcontentformreadonlyinput1239757923__root"};
+export var classes = {"root":"richcontentformreadonlyinput756606055__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/rich-content/rich-content-input/rich-content-common/fullscreen-modal/fullscreen-modal.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../../stylable-esm-runti
 
 
 
-var _namespace_ = "fullscreenmodal3071761638";
+var _namespace_ = "fullscreenmodal726345974";
 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":"fullscreenmodal3071761638__root","modalContent":"fullscreenmodal3071761638__modalContent"};
+export var classes = {"root":"fullscreenmodal726345974__root","modalContent":"fullscreenmodal726345974__modalContent"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/rich-content/rich-content-input/rich-content-common/publish-loader/publish-loader.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../../stylable-esm-runti
 
 
 
-var _namespace_ = "publishloader2836839240";
+var _namespace_ = "publishloader829581826";
 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":"publishloader2836839240__root","publishLoader":"publishloader2836839240__publishLoader"};
+export var classes = {"root":"publishloader829581826__root","publishLoader":"publishloader829581826__publishLoader"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/rich-content/rich-content-input/rich-content-common/toggle-fullscreen-button/toggle-fullscreen-button.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../../stylable-esm-runti
 
 
 
-var _namespace_ = "togglefullscreenbutton2223387734";
+var _namespace_ = "togglefullscreenbutton2354274614";
 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":"togglefullscreenbutton2223387734__root"};
+export var classes = {"root":"togglefullscreenbutton2354274614__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/rich-content/rich-content-input/rich-content-editor/rich-content-editor.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "richcontenteditor2863737128";
+var _namespace_ = "richcontenteditor1883144263";
 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":"richcontenteditor2863737128__root","toolbarContainer":"richcontenteditor2863737128__toolbarContainer","footerToolbarContainer":"richcontenteditor2863737128__footerToolbarContainer","toolbarAndFullScreenButtonWrapper":"richcontenteditor2863737128__toolbarAndFullScreenButtonWrapper","editor":"richcontenteditor2863737128__editor","modalEditor":"richcontenteditor2863737128__modalEditor"};
+export var classes = {"root":"richcontenteditor1883144263__root","toolbarContainer":"richcontenteditor1883144263__toolbarContainer","footerToolbarContainer":"richcontenteditor1883144263__footerToolbarContainer","toolbarAndFullScreenButtonWrapper":"richcontenteditor1883144263__toolbarAndFullScreenButtonWrapper","editor":"richcontenteditor1883144263__editor","modalEditor":"richcontenteditor1883144263__modalEditor"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/rich-content/rich-content-input/rich-content-editor/rich-content-toolbar.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "richcontenttoolbar2262554924";
+var _namespace_ = "richcontenttoolbar1486095287";
 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":"richcontenttoolbar2262554924__root","toolbar":"richcontenttoolbar2262554924__toolbar","toolbarButton":"richcontenttoolbar2262554924__toolbarButton","separator":"richcontenttoolbar2262554924__separator"};
+export var classes = {"root":"richcontenttoolbar1486095287__root","toolbar":"richcontenttoolbar1486095287__toolbar","toolbarButton":"richcontenttoolbar1486095287__toolbarButton","separator":"richcontenttoolbar1486095287__separator"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/rich-content/rich-content-input/rich-content-viewer/rich-content-viewer.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "richcontentviewer3183431663";
+var _namespace_ = "richcontentviewer2217589463";
 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":"richcontentviewer3183431663__root","viewer":"richcontentviewer3183431663__viewer","modalViewer":"richcontentviewer3183431663__modalViewer"};
+export var classes = {"root":"richcontentviewer2217589463__root","viewer":"richcontentviewer2217589463__viewer","modalViewer":"richcontentviewer2217589463__modalViewer"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/rich-text/rich-text-input/rich-text-editor/rich-editor.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "richeditor1940630501";
+var _namespace_ = "richeditor3799177838";
 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":"richeditor1940630501__root","editor":"richeditor1940630501__editor","header-one":"richeditor1940630501__header-one","header-two":"richeditor1940630501__header-two","header-three":"richeditor1940630501__header-three","header-four":"richeditor1940630501__header-four","header-five":"richeditor1940630501__header-five","header-six":"richeditor1940630501__header-six","paragraph-one":"richeditor1940630501__paragraph-one","unstyled":"richeditor1940630501__unstyled","paragraph-three":"richeditor1940630501__paragraph-three","align-left":"richeditor1940630501__align-left","align-right":"richeditor1940630501__align-right","align-center":"richeditor1940630501__align-center","align-justify":"richeditor1940630501__align-justify","withMargin":"richeditor1940630501__withMargin","dir-rtl":"richeditor1940630501__dir-rtl"};
+export var classes = {"root":"richeditor3799177838__root","editor":"richeditor3799177838__editor","header-one":"richeditor3799177838__header-one","header-two":"richeditor3799177838__header-two","header-three":"richeditor3799177838__header-three","header-four":"richeditor3799177838__header-four","header-five":"richeditor3799177838__header-five","header-six":"richeditor3799177838__header-six","paragraph-one":"richeditor3799177838__paragraph-one","unstyled":"richeditor3799177838__unstyled","paragraph-three":"richeditor3799177838__paragraph-three","align-left":"richeditor3799177838__align-left","align-right":"richeditor3799177838__align-right","align-center":"richeditor3799177838__align-center","align-justify":"richeditor3799177838__align-justify","withMargin":"richeditor3799177838__withMargin","dir-rtl":"richeditor3799177838__dir-rtl"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/rich-text/rich-text-input/rich-text-editor/rich-text-editor.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "richtexteditor667105446";
+var _namespace_ = "richtexteditor956967741";
 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":"richtexteditor667105446__root","nativeInput":"richtexteditor667105446__nativeInput","editor":"richtexteditor667105446__editor"};
+export var classes = {"root":"richtexteditor956967741__root","nativeInput":"richtexteditor956967741__nativeInput","editor":"richtexteditor956967741__editor"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/rich-text/rich-text-input/rich-text-editor/toolbar/toolbar.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../../stylable-esm-runti
 
 
 
-var _namespace_ = "toolbar3247736524";
+var _namespace_ = "toolbar2936617610";
 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":"toolbar3247736524__root","item":"toolbar3247736524__item","separator":"toolbar3247736524__separator","clearFormatting":"toolbar3247736524__clearFormatting","fullScreen":"toolbar3247736524__fullScreen","dropdownItemContent":"toolbar3247736524__dropdownItemContent","dropdownItemTitle":"toolbar3247736524__dropdownItemTitle","dropdownItemSubtitle":"toolbar3247736524__dropdownItemSubtitle","dropdownHeaderOne":"toolbar3247736524__dropdownHeaderOne","dropdownHeaderTwo":"toolbar3247736524__dropdownHeaderTwo","dropdownHeaderThree":"toolbar3247736524__dropdownHeaderThree","dropdownHeaderFour":"toolbar3247736524__dropdownHeaderFour","dropdownHeaderFive":"toolbar3247736524__dropdownHeaderFive","dropdownHeaderSix":"toolbar3247736524__dropdownHeaderSix","dropdownParagraphOne":"toolbar3247736524__dropdownParagraphOne","dropdownNormalText":"toolbar3247736524__dropdownNormalText","dropdownParagraphThree":"toolbar3247736524__dropdownParagraphThree"};
+export var classes = {"root":"toolbar2936617610__root","item":"toolbar2936617610__item","separator":"toolbar2936617610__separator","clearFormatting":"toolbar2936617610__clearFormatting","fullScreen":"toolbar2936617610__fullScreen","dropdownItemContent":"toolbar2936617610__dropdownItemContent","dropdownItemTitle":"toolbar2936617610__dropdownItemTitle","dropdownItemSubtitle":"toolbar2936617610__dropdownItemSubtitle","dropdownHeaderOne":"toolbar2936617610__dropdownHeaderOne","dropdownHeaderTwo":"toolbar2936617610__dropdownHeaderTwo","dropdownHeaderThree":"toolbar2936617610__dropdownHeaderThree","dropdownHeaderFour":"toolbar2936617610__dropdownHeaderFour","dropdownHeaderFive":"toolbar2936617610__dropdownHeaderFive","dropdownHeaderSix":"toolbar2936617610__dropdownHeaderSix","dropdownParagraphOne":"toolbar2936617610__dropdownParagraphOne","dropdownNormalText":"toolbar2936617610__dropdownNormalText","dropdownParagraphThree":"toolbar2936617610__dropdownParagraphThree"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};