@wix/patterns-fields 1.40.0 → 1.41.0

package/src/components/color-view/cell-color-input.tsx

@@ -0,0 +1,200 @@
+import React, { forwardRef, useCallback, useEffect, useState } from 'react';
+import type {
+  ColorPickerProps,
+  InputImperativeActions,
+  InputProps,
+  PopoverProps,
+} from '@wix/design-system';
+import {
+  ColorPicker,
+  FillButton,
+  FillPreview,
+  Input,
+  Popover,
+} from '@wix/design-system';
+import { useTranslations } from '../../hooks/use-translations';
+import { isValidHex, normalizeHex, omitHash } from './hex';
+
+export interface CellColorInputProps
+  extends Omit<
+    InputProps,
+    'value' | 'onChange' | 'prefix' | 'suffix' | 'inputRef'
+  > {
+  value?: string;
+  onChange?: (text: string) => void;
+  popoverProps?: Partial<PopoverProps>;
+  inputRef?: React.MutableRefObject<InputImperativeActions | null | undefined>;
+}
+
+/**
+ * Cell-layer ColorInput for EditableTable. Differs from the form ColorInput in
+ * four ways required by the cell context:
+ *  1. `popoverProps` passthrough so the picker can `appendTo: 'window'` and
+ *     escape the table's scroll container.
+ *  2. The empty-state add-color button appears for invalid values too (not
+ *     only missing) — mid-typing or post-commit bad hex should still expose
+ *     the picker as an escape hatch.
+ *  3. Invalid input on blur is forwarded upward (prefixed with `#`) so the
+ *     cell-level `validate()` can surface the error; we don't silently revert.
+ *  4. Picker closes on any ancestor scroll while open — the portaled popover
+ *     does not follow the trigger.
+ */
+export const CellColorInput = forwardRef<
+  InputImperativeActions,
+  CellColorInputProps
+>(
+  (
+    { value: colorValue, onChange, onBlur, popoverProps, inputRef, ...props },
+    ref,
+  ) => {
+    const { t } = useTranslations();
+    const [inputValue, setInputValue] = useState(
+      colorValue ? omitHash(colorValue) : '',
+    );
+    const [showPicker, setShowPicker] = useState(false);
+    const [pickerHex, setPickerHex] = useState<string | undefined>(
+      colorValue && isValidHex(colorValue) ? colorValue : undefined,
+    );
+
+    const onInputChange = useCallback(
+      (e: React.ChangeEvent<HTMLInputElement>) => {
+        const raw = e.target.value.replace(/^#/, '');
+        setInputValue(raw);
+
+        const hex = normalizeHex(raw);
+        if (hex) {
+          setPickerHex(hex);
+          onChange?.(hex);
+        } else {
+          onChange?.(raw === '' ? '' : `#${raw}`);
+        }
+      },
+      [onChange],
+    );
+
+    const onInputBlur = useCallback(
+      (e: React.FocusEvent<HTMLInputElement>) => {
+        const hex = normalizeHex(inputValue);
+        if (hex) {
+          onChange?.(hex);
+          setInputValue(omitHash(hex));
+        }
+        onBlur?.(e);
+      },
+      [onChange, onBlur, inputValue],
+    );
+
+    const onPickerConfirm = useCallback(
+      (confirmedColor: ColorPickerProps['value']) => {
+        const hex =
+          typeof confirmedColor === 'string'
+            ? confirmedColor.toUpperCase()
+            : (confirmedColor as { hex?: () => string } | null | undefined)
+                ?.hex?.()
+                ?.toUpperCase();
+        if (hex) {
+          onChange?.(hex);
+          setInputValue(omitHash(hex));
+          setPickerHex(hex);
+        } else {
+          onChange?.('');
+          setInputValue('');
+          setPickerHex(undefined);
+        }
+        setShowPicker(false);
+      },
+      [onChange],
+    );
+
+    const onPickerCancel = useCallback(() => {
+      setPickerHex(
+        colorValue && isValidHex(colorValue) ? colorValue : undefined,
+      );
+      setShowPicker(false);
+    }, [colorValue]);
+
+    const togglePicker = useCallback(() => {
+      setShowPicker((prev) => !prev);
+    }, []);
+
+    useEffect(() => {
+      if (!showPicker) {
+        return;
+      }
+      const close = () => setShowPicker(false);
+      const opts = { capture: true } as const;
+      window.addEventListener('scroll', close, { ...opts, passive: true });
+      return () => window.removeEventListener('scroll', close, opts);
+    }, [showPicker]);
+
+    const showAddColorButton = !colorValue || !isValidHex(colorValue);
+    const addColorTooltip = t('auto-patterns.fields.add_color_tooltip');
+
+    const popoverDefaults: Partial<PopoverProps> = {
+      animate: true,
+      flip: true,
+      fixed: false,
+      placement: 'bottom-start',
+      appendTo: 'window',
+      moveBy: { x: 0, y: 4 },
+      zIndex: 9999,
+    };
+
+    return (
+      <Input
+        {...props}
+        ref={(instance) => {
+          if (inputRef) inputRef.current = instance;
+          if (typeof ref === 'function') ref(instance);
+          else if (ref) ref.current = instance;
+        }}
+        value={inputValue}
+        onChange={onInputChange}
+        onBlur={onInputBlur}
+        prefix={<Input.Affix>#</Input.Affix>}
+        suffix={
+          <Input.Affix>
+            <Popover
+              {...popoverDefaults}
+              {...popoverProps}
+              shown={showPicker}
+              onClickOutside={() => setShowPicker(false)}
+            >
+              <Popover.Element>
+                {showAddColorButton ? (
+                  <FillButton
+                    onClick={togglePicker}
+                    tooltipContent={addColorTooltip}
+                  />
+                ) : (
+                  <FillPreview fill={colorValue} onClick={togglePicker} />
+                )}
+              </Popover.Element>
+              <Popover.Content>
+                <ColorPicker
+                  value={pickerHex as ColorPickerProps['value']}
+                  onChange={
+                    ((c: ColorPickerProps['value']) =>
+                      setPickerHex(
+                        typeof c === 'string'
+                          ? c
+                          : (
+                              c as { hex?: () => string } | null | undefined
+                            )?.hex?.(),
+                      )) as ColorPickerProps['onChange']
+                  }
+                  onConfirm={onPickerConfirm}
+                  onCancel={onPickerCancel}
+                  showConverter
+                  allowEmpty
+                />
+              </Popover.Content>
+            </Popover>
+          </Input.Affix>
+        }
+      />
+    );
+  },
+);
+
+CellColorInput.displayName = 'CellColorInput';

package/src/components/color-view/cell-color-view.st.css

@@ -0,0 +1,8 @@
+@property st-global(--wsr-color-D40);
+
+.hashPrefix {
+  color: var(--wsr-color-D40, #868aa5);
+  font-size: 14px;
+  font-weight: 300;
+  line-height: 1;
+}

package/src/components/color-view/cell-color-view.st.css.ts

@@ -0,0 +1,25 @@
+// @ts-nocheck
+
+
+import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
+
+
+
+var _namespace_ = "cellcolorview2526093299";
+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":"cellcolorview2526093299__root","hashPrefix":"cellcolorview2526093299__hashPrefix"};
+export var keyframes = {}; 
+export var layers = {};
+export var containers = {};
+export var stVars = {}; 
+export var vars = {"wsr-color-D40":"--wsr-color-D40"}; 
+
+
+
+

package/src/components/color-view/cell-color-view.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { Box, FillPreview, Text } from '@wix/design-system';
+import { classes } from './cell-color-view.st.css.js';
+import { HEX_RE } from './hex';
+
+export interface CellColorViewProps {
+  value?: string;
+}
+
+/**
+ * Cell-layer color view. Matches the visual layout of CellColorInput so the
+ * View↔Edit transition is seamless.
+ *
+ *   "#"  (placeholder color)   hex digits (thin, uppercase)   [swatch right]
+ *
+ * Empty or invalid values show only the `#` on the left and the empty-state
+ * FillPreview (diagonal-slash placeholder) on the right.
+ */
+export const CellColorView: React.FC<CellColorViewProps> = ({ value }) => {
+  const isValid = !!value && HEX_RE.test(value);
+  const hex = value ? value.replace(/^#/, '').toUpperCase() : '';
+
+  return (
+    <Box
+      width="100%"
+      verticalAlign="middle"
+      align="space-between"
+      gap="SP1"
+      dataHook="cell-color-view"
+    >
+      <Box gap="SP1" verticalAlign="middle">
+        <Box className={classes.hashPrefix} dataHook="cell-color-view-hash">
+          #
+        </Box>
+        {hex ? (
+          <Text size="small" weight="thin" dataHook="cell-color-view-text">
+            {hex}
+          </Text>
+        ) : null}
+      </Box>
+      <Box width="24px" height="24px" flexShrink={0}>
+        <FillPreview
+          fill={isValid ? value : undefined}
+          aspectRatio={1}
+          dataHook="cell-color-view-fill-preview"
+        />
+      </Box>
+    </Box>
+  );
+};
+
+CellColorView.displayName = 'CellColorView';

package/src/components/color-view/color-input.tsx

@@ -13,20 +13,10 @@ import {
 } from '@wix/design-system';
 import ColorLib, { rgb } from 'color';
 
-type ColorInstance = ReturnType<typeof rgb>;
-
-const omitHash = (value: string) => value.replace(/^#/, '');
-
-const isValidHex = (value: string): boolean =>
-  /^#?([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/.test(value);
+import { useTranslations } from '../../hooks/use-translations';
+import { normalizeHex, omitHash } from './hex';
 
-const normalizeHex = (value: string): string | undefined => {
-  const cleaned = value.startsWith('#') ? value : `#${value}`;
-  if (isValidHex(cleaned)) {
-    return cleaned.toUpperCase();
-  }
-  return undefined;
-};
+type ColorInstance = ReturnType<typeof rgb>;
 
 const safeColorLib = (value: string): ColorInstance | undefined => {
   try {
@@ -43,11 +33,13 @@ export interface ColorInputProps
 }
 
 export const ColorInput = forwardRef<InputImperativeActions, ColorInputProps>(
-  ({ value: colorValue, onChange, onBlur, ...props }, ref) => {
+  ({ value: colorValue, onChange, onFocus, onBlur, ...props }, ref) => {
+    const { t } = useTranslations();
     const [inputValue, setInputValue] = useState(
       colorValue ? omitHash(colorValue) : '',
     );
     const [showPicker, setShowPicker] = useState(false);
+    const [isFocused, setIsFocused] = useState(false);
     const [pickerColor, setPickerColor] = useState<ColorInstance | undefined>(
       colorValue ? safeColorLib(colorValue) : undefined,
     );
@@ -66,6 +58,14 @@ export const ColorInput = forwardRef<InputImperativeActions, ColorInputProps>(
       [onChange],
     );
 
+    const onInputFocus = useCallback(
+      (e: React.FocusEvent<HTMLInputElement>) => {
+        setIsFocused(true);
+        onFocus?.(e);
+      },
+      [onFocus],
+    );
+
     const onInputBlur = useCallback(
       (e: React.FocusEvent<HTMLInputElement>) => {
         const hex = normalizeHex(inputValue);
@@ -77,6 +77,7 @@ export const ColorInput = forwardRef<InputImperativeActions, ColorInputProps>(
         } else {
           setInputValue('');
         }
+        setIsFocused(false);
         onBlur?.(e);
       },
       [onChange, onBlur, inputValue, colorValue],
@@ -113,6 +114,7 @@ export const ColorInput = forwardRef<InputImperativeActions, ColorInputProps>(
         ref={ref}
         value={inputValue}
         onChange={onInputChange}
+        onFocus={onInputFocus}
         onBlur={onInputBlur}
         prefix={<Input.Affix>#</Input.Affix>}
         suffix={
@@ -129,10 +131,14 @@ export const ColorInput = forwardRef<InputImperativeActions, ColorInputProps>(
               zIndex={5001}
             >
               <Popover.Element>
-                {colorValue ? (
-                  <FillPreview fill={colorValue} onClick={onPreviewClick} />
+                {!colorValue && (isFocused || showPicker) ? (
+                  <FillButton
+                    onClick={onPreviewClick}
+                    onMouseDown={(e) => e.preventDefault()}
+                    tooltipContent={t('auto-patterns.fields.add_color_tooltip')}
+                  />
                 ) : (
-                  <FillButton onClick={onPreviewClick} />
+                  <FillPreview fill={colorValue} onClick={onPreviewClick} />
                 )}
               </Popover.Element>
               <Popover.Content>

package/src/components/color-view/color-view.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "colorview2799601068";
+var _namespace_ = "colorview3463757835";
 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":"colorview2799601068__root","view":"colorview2799601068__view","fillPreview":"colorview2799601068__fillPreview"};
+export var classes = {"root":"colorview3463757835__root","view":"colorview3463757835__view","fillPreview":"colorview3463757835__fillPreview"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/color-view/hex.ts

@@ -0,0 +1,13 @@
+export const HEX_RE = /^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/;
+
+const HEX_OPTIONAL_HASH_RE = /^#?([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/;
+
+export const omitHash = (value: string): string => value.replace(/^#/, '');
+
+export const isValidHex = (value: string): boolean =>
+  HEX_OPTIONAL_HASH_RE.test(value);
+
+export const normalizeHex = (value: string): string | undefined => {
+  const cleaned = value.startsWith('#') ? value : `#${value}`;
+  return HEX_RE.test(cleaned) ? cleaned.toUpperCase() : undefined;
+};

package/src/components/color-view/index.ts

@@ -1,4 +1,7 @@
 export * from './color-view';
+export * from './cell-color-view';
 export * from './color-input';
+export * from './cell-color-input';
 export * from './form-color';
 export * from './form-color-input';
+export * from './hex';

package/src/components/delete-dialog/delete-dialog.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "deletedialog1666449724";
+var _namespace_ = "deletedialog908586734";
 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":"deletedialog1666449724__root","layout":"deletedialog1666449724__layout"};
+export var classes = {"root":"deletedialog908586734__root","layout":"deletedialog908586734__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_ = "formdocumentfield3954791883";
+var _namespace_ = "formdocumentfield3681439606";
 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":"formdocumentfield3954791883__root","viewWrapper":"formdocumentfield3954791883__viewWrapper","textWidth":"formdocumentfield3954791883__textWidth","documentLoader":"formdocumentfield3954791883__documentLoader","addDocument":"formdocumentfield3954791883__addDocument","addItemWrapper":"formdocumentfield3954791883__addItemWrapper"};
+export var classes = {"root":"formdocumentfield3681439606__root","viewWrapper":"formdocumentfield3681439606__viewWrapper","textWidth":"formdocumentfield3681439606__textWidth","documentLoader":"formdocumentfield3681439606__documentLoader","addDocument":"formdocumentfield3681439606__addDocument","addItemWrapper":"formdocumentfield3681439606__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_ = "exclamation759924886";
+var _namespace_ = "exclamation2363706594";
 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":"exclamation759924886__root","exclamation":"exclamation759924886__exclamation","actions":"exclamation759924886__actions","action":"exclamation759924886__action"};
+export var classes = {"root":"exclamation2363706594__root","exclamation":"exclamation2363706594__exclamation","actions":"exclamation2363706594__actions","action":"exclamation2363706594__action"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "highlightedtext4235751675";
+var _namespace_ = "highlightedtext3971272452";
 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":"highlightedtext4235751675__root","substring":"highlightedtext4235751675__substring"};
-export var keyframes = {"highlighted":"highlightedtext4235751675__highlighted","highlighted-match":"highlightedtext4235751675__highlighted-match"}; 
+export var classes = {"root":"highlightedtext3971272452__root","substring":"highlightedtext3971272452__substring"};
+export var keyframes = {"highlighted":"highlightedtext3971272452__highlighted","highlighted-match":"highlightedtext3971272452__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_ = "thumbnailreplaceoverlay1224436687";
+var _namespace_ = "thumbnailreplaceoverlay2487678945";
 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":"thumbnailreplaceoverlay1224436687__root","icon":"thumbnailreplaceoverlay1224436687__icon"};
+export var classes = {"root":"thumbnailreplaceoverlay2487678945__root","icon":"thumbnailreplaceoverlay2487678945__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_ = "cellmediaeditshell3700849137";
+var _namespace_ = "cellmediaeditshell3505962653";
 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":"cellmediaeditshell3700849137__root"};
+export var classes = {"root":"cellmediaeditshell3505962653__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_ = "pasteurlbutton3831057513";
+var _namespace_ = "pasteurlbutton1818112565";
 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":"pasteurlbutton3831057513__root","iconButtonTooltip":"pasteurlbutton3831057513__iconButtonTooltip","iconButton":"pasteurlbutton3831057513__iconButton"};
+export var classes = {"root":"pasteurlbutton1818112565__root","iconButtonTooltip":"pasteurlbutton1818112565__iconButtonTooltip","iconButton":"pasteurlbutton1818112565__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_ = "formmediagalleryfield299044212";
+var _namespace_ = "formmediagalleryfield2963289117";
 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":"formmediagalleryfield299044212__root","container":"formmediagalleryfield299044212__container","viewBox":"formmediagalleryfield299044212__viewBox","addItemWrapper":"formmediagalleryfield299044212__addItemWrapper","addItem":"formmediagalleryfield299044212__addItem","overlay":"formmediagalleryfield299044212__overlay","image":"formmediagalleryfield299044212__image","previewImage":"formmediagalleryfield299044212__previewImage","previewVideo":"formmediagalleryfield299044212__previewVideo"};
+export var classes = {"root":"formmediagalleryfield2963289117__root","container":"formmediagalleryfield2963289117__container","viewBox":"formmediagalleryfield2963289117__viewBox","addItemWrapper":"formmediagalleryfield2963289117__addItemWrapper","addItem":"formmediagalleryfield2963289117__addItem","overlay":"formmediagalleryfield2963289117__overlay","image":"formmediagalleryfield2963289117__image","previewImage":"formmediagalleryfield2963289117__previewImage","previewVideo":"formmediagalleryfield2963289117__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_ = "mediaimage3603088629";
+var _namespace_ = "mediaimage805645738";
 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":"mediaimage3603088629__root"};
+export var classes = {"root":"mediaimage805645738__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":"--mediaimage3603088629-from","to":"--mediaimage3603088629-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":"--mediaimage805645738-from","to":"--mediaimage805645738-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_ = "overlay3561604361";
+var _namespace_ = "overlay4045146886";
 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":"overlay3561604361__root","iconOverlay":"overlay3561604361__iconOverlay"};
+export var classes = {"root":"overlay4045146886__root","iconOverlay":"overlay4045146886__iconOverlay"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/media-loader/media-loader.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "medialoader3999422864";
+var _namespace_ = "medialoader2381278212";
 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":"medialoader3999422864__root","loader":"medialoader3999422864__loader"};
+export var classes = {"root":"medialoader2381278212__root","loader":"medialoader2381278212__loader"};
 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_ = "mediatag1940239050";
+var _namespace_ = "mediatag1080651885";
 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":"mediatag1940239050__root"};
+export var classes = {"root":"mediatag1080651885__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};