@wix/patterns-fields 1.111.0 → 1.112.0

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

@@ -2,15 +2,12 @@ import React from 'react';
 import {
   Box,
   FormField,
-  IconButton,
   Input,
+  MultiSelect,
   NumberInput,
   Text,
-  TextButton,
   ToggleSwitch,
-  Tooltip,
 } from '@wix/design-system';
-import { AddSmall, DeleteSmall } from '@wix/wix-ui-icons-common/lazy';
 import { v4 as uuid } from 'uuid';
 import type { ControlledInputProps } from '../../types/controlled-input';
 import type {
@@ -23,6 +20,7 @@ import type {
   SpecificValuesFieldValidationRuleConfig,
 } from '../../types/validation';
 import { getFieldValidationSettingsViolations } from '../../validations/field-validation-settings';
+import { classes } from './field-validation-settings-input.st.css.js';
 
 export interface FieldValidationSettingsInputProps
   extends Omit<
@@ -314,109 +312,96 @@ export const FieldValidationSettingsInput = ({
 
   const renderSpecificValues = (
     rule: SpecificValuesFieldValidationRuleConfig,
-  ) => (
-    <Box key="specificValues" direction="vertical" gap="SP2">
-      <RuleToggle
-        dataHook="field-validation-specific-values"
-        checked={hasSpecificValues}
-        disabled={
-          isRuleDisabled('specificValues') ||
-          isBlockedByExclusivity('specificValues')
-        }
-        label={rule.label}
-        infoContent={rule.tooltip}
-        onChange={() =>
-          update({ specificValues: hasSpecificValues ? undefined : [] })
-        }
-      />
-      {hasSpecificValues && (
-        <Box direction="vertical" gap="SP2">
-          {data.specificValues?.map((option, index) => {
-            const optionViolation = errorViolations.find(
-              (violation) =>
-                violation.rule === 'specificValues' &&
-                'optionId' in violation &&
-                violation.optionId === option.id,
-            );
-            return (
-              <Box key={option.id} verticalAlign="middle" gap="SP1">
-                <Box width="100%">
-                  <Input
-                    dataHook={`field-validation-specific-value-${index}`}
-                    size="small"
-                    value={option.value}
-                    disabled={isRuleDisabled('specificValues')}
-                    status={
-                      optionViolation || hasUnattributedInvalidState
-                        ? 'error'
-                        : undefined
-                    }
-                    statusMessage={
-                      optionViolation?.type === 'blank'
-                        ? rule.blankError
-                        : optionViolation?.type === 'duplicate'
-                        ? rule.duplicateError
-                        : undefined
-                    }
-                    onChange={(event) =>
-                      update({
-                        specificValues: data.specificValues?.map((item) =>
-                          item.id === option.id
-                            ? { ...item, value: event.target.value }
-                            : item,
-                        ),
-                      })
-                    }
-                  />
-                </Box>
-                <Tooltip content={rule.removeButton}>
-                  <IconButton
-                    dataHook={`field-validation-specific-value-remove-${index}`}
-                    size="tiny"
-                    priority="secondary"
-                    disabled={isRuleDisabled('specificValues')}
-                    ariaLabel={rule.removeButton}
-                    onClick={() =>
-                      update({
-                        specificValues: data.specificValues?.filter(
-                          ({ id }) => id !== option.id,
-                        ),
-                      })
-                    }
-                  >
-                    <DeleteSmall />
-                  </IconButton>
-                </Tooltip>
-              </Box>
-            );
-          })}
-          <Box>
-            <TextButton
-              dataHook="field-validation-specific-value-add"
-              size="small"
-              prefixIcon={<AddSmall />}
+  ) => {
+    const valuesViolation = errorViolations.find(
+      (violation) =>
+        violation.rule === 'specificValues' &&
+        violation.type !== 'exclusiveRules',
+    );
+    const hasValuesError = Boolean(
+      valuesViolation || hasUnattributedInvalidState,
+    );
+    let valuesError: string | undefined;
+    if (valuesViolation?.type === 'empty') {
+      valuesError = rule.emptyError;
+    } else if (valuesViolation?.type === 'blank') {
+      valuesError = rule.blankError;
+    } else if (valuesViolation?.type === 'duplicate') {
+      valuesError = rule.duplicateError;
+    }
+    const specificValues = data.specificValues ?? [];
+
+    const addValues = (inputValues: string[]) => {
+      const knownValues = new Set(
+        specificValues.map(({ value }) => value.trim()),
+      );
+      const addedValues = inputValues
+        .map((value) => value.trim())
+        .filter((value) => {
+          if (!value || knownValues.has(value)) {
+            return false;
+          }
+          knownValues.add(value);
+          return true;
+        })
+        .map((value) => ({ id: uuid(), value }));
+
+      if (addedValues.length > 0) {
+        update({ specificValues: [...specificValues, ...addedValues] });
+      }
+    };
+
+    return (
+      <Box key="specificValues" direction="vertical" gap="SP2">
+        <RuleToggle
+          dataHook="field-validation-specific-values"
+          checked={hasSpecificValues}
+          disabled={
+            isRuleDisabled('specificValues') ||
+            isBlockedByExclusivity('specificValues')
+          }
+          label={rule.label}
+          infoContent={rule.tooltip}
+          onChange={() =>
+            update({ specificValues: hasSpecificValues ? undefined : [] })
+          }
+        />
+        {hasSpecificValues && (
+          <FormField
+            dataHook="field-validation-specific-values-field"
+            label={rule.optionsLabel}
+            labelSize="small"
+            stretchContent
+            status={hasValuesError ? 'error' : undefined}
+            statusMessage={hasValuesError ? valuesError : rule.optionsHint}
+          >
+            <MultiSelect
+              dataHook="field-validation-specific-values-input"
+              className={classes.specificValuesInput}
+              tags={specificValues.map(({ id, value }) => ({
+                id,
+                label: value,
+              }))}
               disabled={isRuleDisabled('specificValues')}
-              onClick={() =>
+              onManuallyInput={addValues}
+              onRemoveTag={(tagId) =>
                 update({
-                  specificValues: [
-                    ...(data.specificValues ?? []),
-                    { id: uuid(), value: '' },
-                  ],
+                  specificValues: specificValues.filter(
+                    ({ id }) => id !== tagId,
+                  ),
                 })
               }
-            >
-              {rule.addButton}
-            </TextButton>
-          </Box>
-        </Box>
-      )}
-      {renderExclusiveRulesExplanation(
-        'specificValues',
-        'field-validation-specific-values',
-        rule.exclusiveRulesExplanation,
-      )}
-    </Box>
-  );
+            />
+          </FormField>
+        )}
+        {renderExclusiveRulesExplanation(
+          'specificValues',
+          'field-validation-specific-values',
+          rule.exclusiveRulesExplanation,
+        )}
+      </Box>
+    );
+  };
 
   const renderPattern = (rule: PatternFieldValidationRuleConfig) => {
     const patternViolation = errorViolations.find(

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

@@ -1,9 +1,9 @@
 import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
 import {
-  IconButtonUniDriver,
+  FormFieldUniDriver,
   InputUniDriver,
+  MultiSelectUniDriver,
   NumberInputUniDriver,
-  TextButtonUniDriver,
   ToggleSwitchUniDriver,
 } from '@wix/design-system/dist/testkit/unidriver';
 import { baseUniDriverFactory } from '../../testkit/base-driver';
@@ -17,6 +17,11 @@ export function FieldValidationSettingsUniDriver(
       base.$(`[data-hook="field-validation-${rule}-toggle"]`),
       body,
     );
+  const getSpecificValuesInput = () =>
+    MultiSelectUniDriver(
+      base.$('[data-hook="field-validation-specific-values-input"]'),
+      body,
+    );
 
   return {
     ...baseUniDriverFactory(base),
@@ -34,21 +39,30 @@ export function FieldValidationSettingsUniDriver(
         base.$('[data-hook="field-validation-max-characters"]'),
         body,
       ),
-    getSpecificValueInput: (index: number) =>
-      InputUniDriver(
-        base.$(`[data-hook="field-validation-specific-value-${index}"]`),
-        body,
-      ),
-    getAddSpecificValueButton: () =>
-      TextButtonUniDriver(
-        base.$('[data-hook="field-validation-specific-value-add"]'),
-        body,
-      ),
-    getRemoveSpecificValueButton: (index: number) =>
-      IconButtonUniDriver(
-        base.$(`[data-hook="field-validation-specific-value-remove-${index}"]`),
+    getSpecificValuesField: () =>
+      FormFieldUniDriver(
+        base.$('[data-hook="field-validation-specific-values-field"]'),
         body,
       ),
+    getSpecificValuesInput,
+    addSpecificValues: async (text: string) => {
+      const input = getSpecificValuesInput();
+      await input.inputDriver.enterText(text);
+      await input.driver.pressKey('Enter');
+    },
+    getSpecificValueLabels: async () => {
+      const { driver } = getSpecificValuesInput();
+      const count = await driver.numberOfTags();
+      return Promise.all(
+        Array.from({ length: count }, (_tag, index) =>
+          driver.getTagLabelAt(index),
+        ),
+      );
+    },
+    removeSpecificValue: async (id: string) => {
+      const tag = await getSpecificValuesInput().driver.getTagDriverByTagId(id);
+      await tag.removeTag();
+    },
     getPatternInput: () =>
       InputUniDriver(
         base.$('[data-hook="field-validation-pattern-input"]'),

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "highlightedtext2597848259";
+var _namespace_ = "highlightedtext400718962";
 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":"highlightedtext2597848259__root","substring":"highlightedtext2597848259__substring"};
-export var keyframes = {"highlighted":"highlightedtext2597848259__highlighted","highlighted-match":"highlightedtext2597848259__highlighted-match"}; 
+export var classes = {"root":"highlightedtext400718962__root","substring":"highlightedtext400718962__substring"};
+export var keyframes = {"highlighted":"highlightedtext400718962__highlighted","highlighted-match":"highlightedtext400718962__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_ = "thumbnailreplaceoverlay2287490407";
+var _namespace_ = "thumbnailreplaceoverlay1349976693";
 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":"thumbnailreplaceoverlay2287490407__root","icon":"thumbnailreplaceoverlay2287490407__icon"};
+export var classes = {"root":"thumbnailreplaceoverlay1349976693__root","icon":"thumbnailreplaceoverlay1349976693__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_ = "cellmediaeditshell1493028595";
+var _namespace_ = "cellmediaeditshell3499270915";
 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":"cellmediaeditshell1493028595__root"};
+export var classes = {"root":"cellmediaeditshell3499270915__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_ = "pasteurlbutton4200227506";
+var _namespace_ = "pasteurlbutton3845473653";
 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":"pasteurlbutton4200227506__root","iconButtonTooltip":"pasteurlbutton4200227506__iconButtonTooltip","iconButton":"pasteurlbutton4200227506__iconButton"};
+export var classes = {"root":"pasteurlbutton3845473653__root","iconButtonTooltip":"pasteurlbutton3845473653__iconButtonTooltip","iconButton":"pasteurlbutton3845473653__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_ = "formmediagalleryfield430290838";
+var _namespace_ = "formmediagalleryfield3779153002";
 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":"formmediagalleryfield430290838__root","container":"formmediagalleryfield430290838__container","viewBox":"formmediagalleryfield430290838__viewBox","addItemWrapper":"formmediagalleryfield430290838__addItemWrapper","addItem":"formmediagalleryfield430290838__addItem","overlay":"formmediagalleryfield430290838__overlay","image":"formmediagalleryfield430290838__image","previewImage":"formmediagalleryfield430290838__previewImage","previewVideo":"formmediagalleryfield430290838__previewVideo"};
+export var classes = {"root":"formmediagalleryfield3779153002__root","container":"formmediagalleryfield3779153002__container","viewBox":"formmediagalleryfield3779153002__viewBox","addItemWrapper":"formmediagalleryfield3779153002__addItemWrapper","addItem":"formmediagalleryfield3779153002__addItem","overlay":"formmediagalleryfield3779153002__overlay","image":"formmediagalleryfield3779153002__image","previewImage":"formmediagalleryfield3779153002__previewImage","previewVideo":"formmediagalleryfield3779153002__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_ = "mediaimage1101490151";
+var _namespace_ = "mediaimage3922180827";
 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":"mediaimage1101490151__root"};
+export var classes = {"root":"mediaimage3922180827__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":"--mediaimage1101490151-from","to":"--mediaimage1101490151-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":"--mediaimage3922180827-from","to":"--mediaimage3922180827-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_ = "overlay533257831";
+var _namespace_ = "overlay3193746897";
 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":"overlay533257831__root","iconOverlay":"overlay533257831__iconOverlay"};
+export var classes = {"root":"overlay3193746897__root","iconOverlay":"overlay3193746897__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_ = "mediatag1607856957";
+var _namespace_ = "mediatag1017992439";
 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":"mediatag1607856957__root"};
+export var classes = {"root":"mediatag1017992439__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_ = "cellmultidocumentedit290778729";
+var _namespace_ = "cellmultidocumentedit1603295334";
 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":"cellmultidocumentedit290778729__root","chipTrigger":"cellmultidocumentedit290778729__chipTrigger"};
+export var classes = {"root":"cellmultidocumentedit1603295334__root","chipTrigger":"cellmultidocumentedit1603295334__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_ = "formmultidocument232573991";
+var _namespace_ = "formmultidocument746449936";
 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":"formmultidocument232573991__root","viewRoot":"formmultidocument232573991__viewRoot","singleViewWrapper":"formmultidocument232573991__singleViewWrapper","addDocumentButton":"formmultidocument232573991__addDocumentButton"};
+export var classes = {"root":"formmultidocument746449936__root","viewRoot":"formmultidocument746449936__viewRoot","singleViewWrapper":"formmultidocument746449936__singleViewWrapper","addDocumentButton":"formmultidocument746449936__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_ = "cellmultireferenceinput70067226";
+var _namespace_ = "cellmultireferenceinput2390621674";
 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":"cellmultireferenceinput70067226__root"};
+export var classes = {"root":"cellmultireferenceinput2390621674__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_ = "cellreferenceinput1608182147";
+var _namespace_ = "cellreferenceinput3634608245";
 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":"cellreferenceinput1608182147__root","autocomplete":"cellreferenceinput1608182147__autocomplete"};
+export var classes = {"root":"cellreferenceinput3634608245__root","autocomplete":"cellreferenceinput3634608245__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_ = "richcontentdefaultvalueinput3835248619";
+var _namespace_ = "richcontentdefaultvalueinput1645418117";
 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":"richcontentdefaultvalueinput3835248619__root","richContentEditorContainer":"richcontentdefaultvalueinput3835248619__richContentEditorContainer","editor":"richcontentdefaultvalueinput3835248619__editor"};
+export var classes = {"root":"richcontentdefaultvalueinput1645418117__root","richContentEditorContainer":"richcontentdefaultvalueinput1645418117__richContentEditorContainer","editor":"richcontentdefaultvalueinput1645418117__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_ = "richcontentforminput727263717";
+var _namespace_ = "richcontentforminput466150836";
 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":"richcontentforminput727263717__root","editor":"richcontentforminput727263717__editor"};
+export var classes = {"root":"richcontentforminput466150836__root","editor":"richcontentforminput466150836__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_ = "richcontentformreadonlyinput3423908973";
+var _namespace_ = "richcontentformreadonlyinput2428649347";
 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":"richcontentformreadonlyinput3423908973__root"};
+export var classes = {"root":"richcontentformreadonlyinput2428649347__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_ = "fullscreenmodal3389559131";
+var _namespace_ = "fullscreenmodal1056891884";
 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":"fullscreenmodal3389559131__root","modalContent":"fullscreenmodal3389559131__modalContent"};
+export var classes = {"root":"fullscreenmodal1056891884__root","modalContent":"fullscreenmodal1056891884__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_ = "publishloader134882398";
+var _namespace_ = "publishloader2453444346";
 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":"publishloader134882398__root","publishLoader":"publishloader134882398__publishLoader"};
+export var classes = {"root":"publishloader2453444346__root","publishLoader":"publishloader2453444346__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_ = "togglefullscreenbutton2944895381";
+var _namespace_ = "togglefullscreenbutton1274451813";
 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":"togglefullscreenbutton2944895381__root"};
+export var classes = {"root":"togglefullscreenbutton1274451813__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};