@wix/patterns-fields 1.111.0 → 1.113.0

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_ = "cellcolorview156572190";
+var _namespace_ = "cellcolorview3913512114";
 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":"cellcolorview156572190__root","hashPrefix":"cellcolorview156572190__hashPrefix"};
+export var classes = {"root":"cellcolorview3913512114__root","hashPrefix":"cellcolorview3913512114__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_ = "colorview943355800";
+var _namespace_ = "colorview3138484826";
 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":"colorview943355800__root","view":"colorview943355800__view","fillPreview":"colorview943355800__fillPreview"};
+export var classes = {"root":"colorview3138484826__root","view":"colorview3138484826__view","fillPreview":"colorview3138484826__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_ = "deletedialog3470481623";
+var _namespace_ = "deletedialog644217855";
 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":"deletedialog3470481623__root","layout":"deletedialog3470481623__layout"};
+export var classes = {"root":"deletedialog644217855__root","layout":"deletedialog644217855__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_ = "formdocumentfield2013326977";
+var _namespace_ = "formdocumentfield600942549";
 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":"formdocumentfield2013326977__root","viewWrapper":"formdocumentfield2013326977__viewWrapper","textWidth":"formdocumentfield2013326977__textWidth","documentLoader":"formdocumentfield2013326977__documentLoader","addDocument":"formdocumentfield2013326977__addDocument","addItemWrapper":"formdocumentfield2013326977__addItemWrapper"};
+export var classes = {"root":"formdocumentfield600942549__root","viewWrapper":"formdocumentfield600942549__viewWrapper","textWidth":"formdocumentfield600942549__textWidth","documentLoader":"formdocumentfield600942549__documentLoader","addDocument":"formdocumentfield600942549__addDocument","addItemWrapper":"formdocumentfield600942549__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_ = "exclamation132058364";
+var _namespace_ = "exclamation297875390";
 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":"exclamation132058364__root","exclamation":"exclamation132058364__exclamation","actions":"exclamation132058364__actions","action":"exclamation132058364__action"};
+export var classes = {"root":"exclamation297875390__root","exclamation":"exclamation297875390__exclamation","actions":"exclamation297875390__actions","action":"exclamation297875390__action"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/field-validation-settings/field-validation-settings-input.st.css

@@ -0,0 +1,10 @@
+/* These invisible WDS elements overflow the tags box and give it a horizontal scrollbar. */
+/* The border layer sticks out 1px. */
+.specificValuesInput :global(.wds-input-with-tags__input)::after {
+  inset: 0;
+}
+
+/* The width sizer keeps the last typed text after it becomes tags, so a long comma list stays one unbreakable line. */
+.specificValuesInput :global(.wds-input-with-tags__hidden-div) {
+  overflow: hidden;
+}

package/src/components/field-validation-settings/field-validation-settings-input.st.css.ts

@@ -0,0 +1,25 @@
+// @ts-nocheck
+
+
+import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
+
+
+
+var _namespace_ = "fieldvalidationsettingsinput3420616655";
+var _style_ = classesRuntime.bind(null, _namespace_);
+
+export var cssStates = statesRuntime.bind(null, _namespace_);
+export var style: import("@stylable/runtime").STFunction = _style_;
+export var st: import("@stylable/runtime").STFunction = _style_;
+
+export var namespace = _namespace_;
+export var classes = {"root":"fieldvalidationsettingsinput3420616655__root","specificValuesInput":"fieldvalidationsettingsinput3420616655__specificValuesInput"};
+export var keyframes = {}; 
+export var layers = {};
+export var containers = {};
+export var stVars = {}; 
+export var vars = {}; 
+
+
+
+

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_ = "highlightedtext956603166";
 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":"highlightedtext956603166__root","substring":"highlightedtext956603166__substring"};
+export var keyframes = {"highlighted":"highlightedtext956603166__highlighted","highlighted-match":"highlightedtext956603166__highlighted-match"}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {}; 

package/src/components/image/cell-image-edit.tsx

@@ -82,7 +82,7 @@ export const CellImageEdit: React.FC<CellImageEditProps> = ({
                 padding: 0,
               }}
             >
-              <ImageThumbnail value={value} />
+              <ImageThumbnail value={value} size={24} />
               <ThumbnailReplaceOverlay />
             </button>
           </Box>

package/src/components/image/image-thumbnail.tsx

@@ -19,6 +19,7 @@ export interface ImageThumbnailProps {
   onMouseLeave?: () => void;
   dataHook?: string;
   showVideoIndicator?: boolean;
+  size?: number;
 }
 
 export const ImageThumbnail: React.FC<ImageThumbnailProps> = ({
@@ -29,17 +30,20 @@ export const ImageThumbnail: React.FC<ImageThumbnailProps> = ({
   onMouseLeave,
   dataHook,
   showVideoIndicator = true,
+  size = 36,
 }) => {
   const value = getImageSource(imageValue);
   const src = value ? mediaURItoImageURL(value, ThumbnailSize.S) : undefined;
+  const overlaySize = size <= 24 ? 'tiny' : 'small';
+  const px = `${size}px`;
 
   return (
     <div
       data-hook={dataHook}
       data-empty={!value || undefined}
       style={{
-        width: '36px',
-        height: '36px',
+        width: px,
+        height: px,
         borderRadius: '3px',
         flexShrink: 0,
         position: 'relative',
@@ -52,17 +56,17 @@ export const ImageThumbnail: React.FC<ImageThumbnailProps> = ({
         borderRadius="3px"
         transparent
         size={ThumbnailSize.S}
-        width="36px"
-        height="36px"
+        width={px}
+        height={px}
         onLoad={onLoad}
         onError={onError}
         onMouseEnter={onMouseEnter}
         onMouseLeave={onMouseLeave}
         overlay={
           value && showVideoIndicator && isMediaVideoURI(value) ? (
-            <VideoIndicatorOverlay src={value} size="small" />
+            <VideoIndicatorOverlay src={value} size={overlaySize} />
           ) : (
-            <CustomUrlOverlay src={value} size="small" />
+            <CustomUrlOverlay src={value} size={overlaySize} />
           )
         }
       />

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

@@ -8,11 +8,13 @@ import { ImageThumbnail } from './image-thumbnail';
 export interface ImageViewProps {
   value: ImageSource;
   dataHook?: string;
+  size?: number;
 }
 
 export const ImageView: React.FC<ImageViewProps> = ({
   value: imageValue,
   dataHook,
+  size,
 }) => {
   const value = getImageSource(imageValue);
   const [isPreviewShown, setIsPreviewShown] = useState(false);
@@ -43,6 +45,7 @@ export const ImageView: React.FC<ImageViewProps> = ({
             <Popover.Element>
               <ImageThumbnail
                 value={value}
+                size={size}
                 dataHook="image-thumbnail"
                 onMouseEnter={showPreview}
                 onMouseLeave={hidePreview}
@@ -68,7 +71,7 @@ export const ImageView: React.FC<ImageViewProps> = ({
             </Popover.Content>
           </Popover>
         ) : (
-          <ImageThumbnail value={value} dataHook="image-thumbnail" />
+          <ImageThumbnail value={value} size={size} dataHook="image-thumbnail" />
         )}
       </Box>
     </Box>

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_ = "thumbnailreplaceoverlay3606587190";
 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":"thumbnailreplaceoverlay3606587190__root","icon":"thumbnailreplaceoverlay3606587190__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_ = "cellmediaeditshell1208112184";
 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":"cellmediaeditshell1208112184__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_ = "pasteurlbutton3361801639";
 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":"pasteurlbutton3361801639__root","iconButtonTooltip":"pasteurlbutton3361801639__iconButtonTooltip","iconButton":"pasteurlbutton3361801639__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_ = "formmediagalleryfield167056594";
 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":"formmediagalleryfield167056594__root","container":"formmediagalleryfield167056594__container","viewBox":"formmediagalleryfield167056594__viewBox","addItemWrapper":"formmediagalleryfield167056594__addItemWrapper","addItem":"formmediagalleryfield167056594__addItem","overlay":"formmediagalleryfield167056594__overlay","image":"formmediagalleryfield167056594__image","previewImage":"formmediagalleryfield167056594__previewImage","previewVideo":"formmediagalleryfield167056594__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_ = "mediaimage3684956147";
 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":"mediaimage3684956147__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":"--mediaimage3684956147-from","to":"--mediaimage3684956147-to"};