@wix/patterns-fields 1.110.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<
@@ -229,12 +227,12 @@ export const FieldValidationSettingsInput = ({
           }
         />
         {hasCharactersLimit && (
-          <Box verticalAlign="middle" gap="SP2">
-            <Box width="112px">
+          <Box verticalAlign="bottom" gap="SP2">
+            <Box width="100px">
               <FormField stretchContent label={rule.minLabel}>
                 <NumberInput
                   dataHook="field-validation-min-characters"
-                  size="small"
+                  size="medium"
                   value={data.charactersLimit?.min}
                   disabled={isInputDisabled}
                   status={
@@ -261,14 +259,16 @@ export const FieldValidationSettingsInput = ({
                 />
               </FormField>
             </Box>
-            <Text size="small" secondary>
-              {rule.separator}
-            </Text>
-            <Box width="112px">
+            <Box height="36px" verticalAlign="middle">
+              <Text size="small" secondary>
+                {rule.separator}
+              </Text>
+            </Box>
+            <Box width="100px">
               <FormField stretchContent label={rule.maxLabel}>
                 <NumberInput
                   dataHook="field-validation-max-characters"
-                  size="small"
+                  size="medium"
                   value={data.charactersLimit?.max}
                   disabled={isInputDisabled}
                   status={
@@ -312,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_ = "highlightedtext38924617";
+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":"highlightedtext38924617__root","substring":"highlightedtext38924617__substring"};
-export var keyframes = {"highlighted":"highlightedtext38924617__highlighted","highlighted-match":"highlightedtext38924617__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_ = "thumbnailreplaceoverlay1453798223";
+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":"thumbnailreplaceoverlay1453798223__root","icon":"thumbnailreplaceoverlay1453798223__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_ = "cellmediaeditshell1470238779";
+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":"cellmediaeditshell1470238779__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_ = "pasteurlbutton863819561";
+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":"pasteurlbutton863819561__root","iconButtonTooltip":"pasteurlbutton863819561__iconButtonTooltip","iconButton":"pasteurlbutton863819561__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_ = "formmediagalleryfield3652448579";
+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":"formmediagalleryfield3652448579__root","container":"formmediagalleryfield3652448579__container","viewBox":"formmediagalleryfield3652448579__viewBox","addItemWrapper":"formmediagalleryfield3652448579__addItemWrapper","addItem":"formmediagalleryfield3652448579__addItem","overlay":"formmediagalleryfield3652448579__overlay","image":"formmediagalleryfield3652448579__image","previewImage":"formmediagalleryfield3652448579__previewImage","previewVideo":"formmediagalleryfield3652448579__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_ = "mediaimage669594612";
+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":"mediaimage669594612__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":"--mediaimage669594612-from","to":"--mediaimage669594612-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_ = "overlay269699703";
+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":"overlay269699703__root","iconOverlay":"overlay269699703__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_ = "mediatag1278659247";
+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":"mediatag1278659247__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_ = "cellmultidocumentedit1445614662";
+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":"cellmultidocumentedit1445614662__root","chipTrigger":"cellmultidocumentedit1445614662__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_ = "formmultidocument3031168304";
+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":"formmultidocument3031168304__root","viewRoot":"formmultidocument3031168304__viewRoot","singleViewWrapper":"formmultidocument3031168304__singleViewWrapper","addDocumentButton":"formmultidocument3031168304__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_ = "cellmultireferenceinput1272302448";
+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":"cellmultireferenceinput1272302448__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_ = "cellreferenceinput3677663516";
+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":"cellreferenceinput3677663516__root","autocomplete":"cellreferenceinput3677663516__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_ = "richcontentdefaultvalueinput3250840748";
+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":"richcontentdefaultvalueinput3250840748__root","richContentEditorContainer":"richcontentdefaultvalueinput3250840748__richContentEditorContainer","editor":"richcontentdefaultvalueinput3250840748__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_ = "richcontentforminput1502891660";
+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":"richcontentforminput1502891660__root","editor":"richcontentforminput1502891660__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_ = "richcontentformreadonlyinput517963887";
+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":"richcontentformreadonlyinput517963887__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_ = "fullscreenmodal4194047848";
+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":"fullscreenmodal4194047848__root","modalContent":"fullscreenmodal4194047848__modalContent"};
+export var classes = {"root":"fullscreenmodal1056891884__root","modalContent":"fullscreenmodal1056891884__modalContent"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};