@wix/patterns-fields 1.39.0 → 1.41.0

package/dist/esm/components/color-view/cell-color-input.js

@@ -0,0 +1,104 @@
+import React, { forwardRef, useCallback, useEffect, useState } from 'react';
+import { ColorPicker, FillButton, FillPreview, Input, Popover, } from '@wix/design-system';
+import { useTranslations } from '../../hooks/use-translations';
+import { isValidHex, normalizeHex, omitHash } from './hex';
+/**
+ * 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(({ 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(colorValue && isValidHex(colorValue) ? colorValue : undefined);
+    const onInputChange = useCallback((e) => {
+        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) => {
+        const hex = normalizeHex(inputValue);
+        if (hex) {
+            onChange?.(hex);
+            setInputValue(omitHash(hex));
+        }
+        onBlur?.(e);
+    }, [onChange, onBlur, inputValue]);
+    const onPickerConfirm = useCallback((confirmedColor) => {
+        const hex = typeof confirmedColor === 'string'
+            ? confirmedColor.toUpperCase()
+            : confirmedColor
+                ?.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 };
+        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 = {
+        animate: true,
+        flip: true,
+        fixed: false,
+        placement: 'bottom-start',
+        appendTo: 'window',
+        moveBy: { x: 0, y: 4 },
+        zIndex: 9999,
+    };
+    return (React.createElement(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: React.createElement(Input.Affix, null, "#"), suffix: React.createElement(Input.Affix, null,
+            React.createElement(Popover, { ...popoverDefaults, ...popoverProps, shown: showPicker, onClickOutside: () => setShowPicker(false) },
+                React.createElement(Popover.Element, null, showAddColorButton ? (React.createElement(FillButton, { onClick: togglePicker, tooltipContent: addColorTooltip })) : (React.createElement(FillPreview, { fill: colorValue, onClick: togglePicker }))),
+                React.createElement(Popover.Content, null,
+                    React.createElement(ColorPicker, { value: pickerHex, onChange: ((c) => setPickerHex(typeof c === 'string'
+                            ? c
+                            : c?.hex?.())), onConfirm: onPickerConfirm, onCancel: onPickerCancel, showConverter: true, allowEmpty: true })))) }));
+});
+CellColorInput.displayName = 'CellColorInput';
+//# sourceMappingURL=cell-color-input.js.map

package/dist/esm/components/color-view/cell-color-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cell-color-input.js","sourceRoot":"","sources":["../../../../src/components/color-view/cell-color-input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAO5E,OAAO,EACL,WAAW,EACX,UAAU,EACV,WAAW,EACX,KAAK,EACL,OAAO,GACR,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAC/D,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAa3D;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,UAAU,CAItC,CACE,EAAE,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,EAAE,YAAY,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EACzE,GAAG,EACH,EAAE;IACF,MAAM,EAAE,CAAC,EAAE,GAAG,eAAe,EAAE,CAAC;IAChC,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAC1C,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,EAAE,CACvC,CAAC;IACF,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACpD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CACxC,UAAU,IAAI,UAAU,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAC9D,CAAC;IAEF,MAAM,aAAa,GAAG,WAAW,CAC/B,CAAC,CAAsC,EAAE,EAAE;QACzC,MAAM,GAAG,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;QAC7C,aAAa,CAAC,GAAG,CAAC,CAAC;QAEnB,MAAM,GAAG,GAAG,YAAY,CAAC,GAAG,CAAC,CAAC;QAC9B,IAAI,GAAG,EAAE;YACP,YAAY,CAAC,GAAG,CAAC,CAAC;YAClB,QAAQ,EAAE,CAAC,GAAG,CAAC,CAAC;SACjB;aAAM;YACL,QAAQ,EAAE,CAAC,GAAG,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,GAAG,EAAE,CAAC,CAAC;SACzC;IACH,CAAC,EACD,CAAC,QAAQ,CAAC,CACX,CAAC;IAEF,MAAM,WAAW,GAAG,WAAW,CAC7B,CAAC,CAAqC,EAAE,EAAE;QACxC,MAAM,GAAG,GAAG,YAAY,CAAC,UAAU,CAAC,CAAC;QACrC,IAAI,GAAG,EAAE;YACP,QAAQ,EAAE,CAAC,GAAG,CAAC,CAAC;YAChB,aAAa,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC;SAC9B;QACD,MAAM,EAAE,CAAC,CAAC,CAAC,CAAC;IACd,CAAC,EACD,CAAC,QAAQ,EAAE,MAAM,EAAE,UAAU,CAAC,CAC/B,CAAC;IAEF,MAAM,eAAe,GAAG,WAAW,CACjC,CAAC,cAAyC,EAAE,EAAE;QAC5C,MAAM,GAAG,GACP,OAAO,cAAc,KAAK,QAAQ;YAChC,CAAC,CAAC,cAAc,CAAC,WAAW,EAAE;YAC9B,CAAC,CAAE,cAA4D;gBAC3D,EAAE,GAAG,EAAE,EAAE;gBACT,EAAE,WAAW,EAAE,CAAC;QACxB,IAAI,GAAG,EAAE;YACP,QAAQ,EAAE,CAAC,GAAG,CAAC,CAAC;YAChB,aAAa,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC;YAC7B,YAAY,CAAC,GAAG,CAAC,CAAC;SACnB;aAAM;YACL,QAAQ,EAAE,CAAC,EAAE,CAAC,CAAC;YACf,aAAa,CAAC,EAAE,CAAC,CAAC;YAClB,YAAY,CAAC,SAAS,CAAC,CAAC;SACzB;QACD,aAAa,CAAC,KAAK,CAAC,CAAC;IACvB,CAAC,EACD,CAAC,QAAQ,CAAC,CACX,CAAC;IAEF,MAAM,cAAc,GAAG,WAAW,CAAC,GAAG,EAAE;QACtC,YAAY,CACV,UAAU,IAAI,UAAU,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAC9D,CAAC;QACF,aAAa,CAAC,KAAK,CAAC,CAAC;IACvB,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,MAAM,YAAY,GAAG,WAAW,CAAC,GAAG,EAAE;QACpC,aAAa,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC;IACjC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,UAAU,EAAE;YACf,OAAO;SACR;QACD,MAAM,KAAK,GAAG,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QACzC,MAAM,IAAI,GAAG,EAAE,OAAO,EAAE,IAAI,EAAW,CAAC;QACxC,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,KAAK,EAAE,EAAE,GAAG,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;QACrE,OAAO,GAAG,EAAE,CAAC,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,CAAC;IACjE,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,MAAM,kBAAkB,GAAG,CAAC,UAAU,IAAI,CAAC,UAAU,CAAC,UAAU,CAAC,CAAC;IAClE,MAAM,eAAe,GAAG,CAAC,CAAC,wCAAwC,CAAC,CAAC;IAEpE,MAAM,eAAe,GAA0B;QAC7C,OAAO,EAAE,IAAI;QACb,IAAI,EAAE,IAAI;QACV,KAAK,EAAE,KAAK;QACZ,SAAS,EAAE,cAAc;QACzB,QAAQ,EAAE,QAAQ;QAClB,MAAM,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;QACtB,MAAM,EAAE,IAAI;KACb,CAAC;IAEF,OAAO,CACL,oBAAC,KAAK,OACA,KAAK,EACT,GAAG,EAAE,CAAC,QAAQ,EAAE,EAAE;YAChB,IAAI,QAAQ;gBAAE,QAAQ,CAAC,OAAO,GAAG,QAAQ,CAAC;YAC1C,IAAI,OAAO,GAAG,KAAK,UAAU;gBAAE,GAAG,CAAC,QAAQ,CAAC,CAAC;iBACxC,IAAI,GAAG;gBAAE,GAAG,CAAC,OAAO,GAAG,QAAQ,CAAC;QACvC,CAAC,EACD,KAAK,EAAE,UAAU,EACjB,QAAQ,EAAE,aAAa,EACvB,MAAM,EAAE,WAAW,EACnB,MAAM,EAAE,oBAAC,KAAK,CAAC,KAAK,YAAgB,EACpC,MAAM,EACJ,oBAAC,KAAK,CAAC,KAAK;YACV,oBAAC,OAAO,OACF,eAAe,KACf,YAAY,EAChB,KAAK,EAAE,UAAU,EACjB,cAAc,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC;gBAE1C,oBAAC,OAAO,CAAC,OAAO,QACb,kBAAkB,CAAC,CAAC,CAAC,CACpB,oBAAC,UAAU,IACT,OAAO,EAAE,YAAY,EACrB,cAAc,EAAE,eAAe,GAC/B,CACH,CAAC,CAAC,CAAC,CACF,oBAAC,WAAW,IAAC,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,YAAY,GAAI,CACzD,CACe;gBAClB,oBAAC,OAAO,CAAC,OAAO;oBACd,oBAAC,WAAW,IACV,KAAK,EAAE,SAAsC,EAC7C,QAAQ,EACN,CAAC,CAAC,CAA4B,EAAE,EAAE,CAChC,YAAY,CACV,OAAO,CAAC,KAAK,QAAQ;4BACnB,CAAC,CAAC,CAAC;4BACH,CAAC,CACG,CACD,EAAE,GAAG,EAAE,EAAE,CACf,CAAiC,EAEtC,SAAS,EAAE,eAAe,EAC1B,QAAQ,EAAE,cAAc,EACxB,aAAa,QACb,UAAU,SACV,CACc,CACV,CACE,GAEhB,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,cAAc,CAAC,WAAW,GAAG,gBAAgB,CAAC"}

package/dist/esm/components/color-view/cell-color-view.js

@@ -0,0 +1,25 @@
+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';
+/**
+ * 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 = ({ value }) => {
+    const isValid = !!value && HEX_RE.test(value);
+    const hex = value ? value.replace(/^#/, '').toUpperCase() : '';
+    return (React.createElement(Box, { width: "100%", verticalAlign: "middle", align: "space-between", gap: "SP1", dataHook: "cell-color-view" },
+        React.createElement(Box, { gap: "SP1", verticalAlign: "middle" },
+            React.createElement(Box, { className: classes.hashPrefix, dataHook: "cell-color-view-hash" }, "#"),
+            hex ? (React.createElement(Text, { size: "small", weight: "thin", dataHook: "cell-color-view-text" }, hex)) : null),
+        React.createElement(Box, { width: "24px", height: "24px", flexShrink: 0 },
+            React.createElement(FillPreview, { fill: isValid ? value : undefined, aspectRatio: 1, dataHook: "cell-color-view-fill-preview" }))));
+};
+CellColorView.displayName = 'CellColorView';
+//# sourceMappingURL=cell-color-view.js.map

package/dist/esm/components/color-view/cell-color-view.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cell-color-view.js","sourceRoot":"","sources":["../../../../src/components/color-view/cell-color-view.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,GAAG,EAAE,WAAW,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,EAAE,OAAO,EAAE,MAAM,6BAA6B,CAAC;AACtD,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAM/B;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,aAAa,GAAiC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACvE,MAAM,OAAO,GAAG,CAAC,CAAC,KAAK,IAAI,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC9C,MAAM,GAAG,GAAG,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;IAE/D,OAAO,CACL,oBAAC,GAAG,IACF,KAAK,EAAC,MAAM,EACZ,aAAa,EAAC,QAAQ,EACtB,KAAK,EAAC,eAAe,EACrB,GAAG,EAAC,KAAK,EACT,QAAQ,EAAC,iBAAiB;QAE1B,oBAAC,GAAG,IAAC,GAAG,EAAC,KAAK,EAAC,aAAa,EAAC,QAAQ;YACnC,oBAAC,GAAG,IAAC,SAAS,EAAE,OAAO,CAAC,UAAU,EAAE,QAAQ,EAAC,sBAAsB,QAE7D;YACL,GAAG,CAAC,CAAC,CAAC,CACL,oBAAC,IAAI,IAAC,IAAI,EAAC,OAAO,EAAC,MAAM,EAAC,MAAM,EAAC,QAAQ,EAAC,sBAAsB,IAC7D,GAAG,CACC,CACR,CAAC,CAAC,CAAC,IAAI,CACJ;QACN,oBAAC,GAAG,IAAC,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM,EAAC,UAAU,EAAE,CAAC;YAC3C,oBAAC,WAAW,IACV,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,EACjC,WAAW,EAAE,CAAC,EACd,QAAQ,EAAC,8BAA8B,GACvC,CACE,CACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,aAAa,CAAC,WAAW,GAAG,eAAe,CAAC"}

package/dist/esm/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/dist/esm/components/color-view/cell-color-view.st.css.js

@@ -0,0 +1,15 @@
+// @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 = _style_;
+export var st = _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" };
+//# sourceMappingURL=cell-color-view.st.css.js.map

package/dist/esm/components/color-view/cell-color-view.st.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cell-color-view.st.css.js","sourceRoot":"","sources":["../../../../src/components/color-view/cell-color-view.st.css.ts"],"names":[],"mappings":"AAAA,cAAc;AAGd,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAI9E,IAAI,WAAW,GAAG,yBAAyB,CAAC;AAC5C,IAAI,OAAO,GAAG,cAAc,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;AAErD,MAAM,CAAC,IAAI,SAAS,GAAG,aAAa,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;AAC7D,MAAM,CAAC,IAAI,KAAK,GAA2C,OAAO,CAAC;AACnE,MAAM,CAAC,IAAI,EAAE,GAA2C,OAAO,CAAC;AAEhE,MAAM,CAAC,IAAI,SAAS,GAAG,WAAW,CAAC;AACnC,MAAM,CAAC,IAAI,OAAO,GAAG,EAAC,MAAM,EAAC,+BAA+B,EAAC,YAAY,EAAC,qCAAqC,EAAC,CAAC;AACjH,MAAM,CAAC,IAAI,SAAS,GAAG,EAAE,CAAC;AAC1B,MAAM,CAAC,IAAI,MAAM,GAAG,EAAE,CAAC;AACvB,MAAM,CAAC,IAAI,UAAU,GAAG,EAAE,CAAC;AAC3B,MAAM,CAAC,IAAI,MAAM,GAAG,EAAE,CAAC;AACvB,MAAM,CAAC,IAAI,IAAI,GAAG,EAAC,eAAe,EAAC,iBAAiB,EAAC,CAAC"}

package/dist/esm/components/color-view/color-input.js

@@ -1,15 +1,8 @@
 import React, { forwardRef, useCallback, useState } from 'react';
 import { ColorPicker, FillButton, FillPreview, Input, Popover, } from '@wix/design-system';
 import ColorLib from 'color';
-const omitHash = (value) => value.replace(/^#/, '');
-const isValidHex = (value) => /^#?([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/.test(value);
-const normalizeHex = (value) => {
-    const cleaned = value.startsWith('#') ? value : `#${value}`;
-    if (isValidHex(cleaned)) {
-        return cleaned.toUpperCase();
-    }
-    return undefined;
-};
+import { useTranslations } from '../../hooks/use-translations';
+import { normalizeHex, omitHash } from './hex';
 const safeColorLib = (value) => {
     try {
         return ColorLib(value);
@@ -18,9 +11,11 @@ const safeColorLib = (value) => {
         return undefined;
     }
 };
-export const ColorInput = forwardRef(({ value: colorValue, onChange, onBlur, ...props }, ref) => {
+export const ColorInput = forwardRef(({ 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(colorValue ? safeColorLib(colorValue) : undefined);
     const onInputChange = useCallback((e) => {
         const raw = e.target.value;
@@ -31,6 +26,10 @@ export const ColorInput = forwardRef(({ value: colorValue, onChange, onBlur, ...
             setPickerColor(safeColorLib(hex));
         }
     }, [onChange]);
+    const onInputFocus = useCallback((e) => {
+        setIsFocused(true);
+        onFocus?.(e);
+    }, [onFocus]);
     const onInputBlur = useCallback((e) => {
         const hex = normalizeHex(inputValue);
         if (hex) {
@@ -43,6 +42,7 @@ export const ColorInput = forwardRef(({ value: colorValue, onChange, onBlur, ...
         else {
             setInputValue('');
         }
+        setIsFocused(false);
         onBlur?.(e);
     }, [onChange, onBlur, inputValue, colorValue]);
     const onPickerConfirm = useCallback((confirmedColor) => {
@@ -63,9 +63,9 @@ export const ColorInput = forwardRef(({ value: colorValue, onChange, onBlur, ...
     const onPreviewClick = useCallback(() => {
         setShowPicker((prev) => !prev);
     }, []);
-    return (React.createElement(Input, { ...props, ref: ref, value: inputValue, onChange: onInputChange, onBlur: onInputBlur, prefix: React.createElement(Input.Affix, null, "#"), suffix: React.createElement(Input.Affix, null,
+    return (React.createElement(Input, { ...props, ref: ref, value: inputValue, onChange: onInputChange, onFocus: onInputFocus, onBlur: onInputBlur, prefix: React.createElement(Input.Affix, null, "#"), suffix: React.createElement(Input.Affix, null,
             React.createElement(Popover, { shown: showPicker, onClickOutside: () => setShowPicker(false), animate: true, flip: true, fixed: false, placement: "left-start", appendTo: "scrollParent", moveBy: { x: 6, y: 6 }, zIndex: 5001 },
-                React.createElement(Popover.Element, null, colorValue ? (React.createElement(FillPreview, { fill: colorValue, onClick: onPreviewClick })) : (React.createElement(FillButton, { onClick: onPreviewClick }))),
+                React.createElement(Popover.Element, null, !colorValue && (isFocused || showPicker) ? (React.createElement(FillButton, { onClick: onPreviewClick, onMouseDown: (e) => e.preventDefault(), tooltipContent: t('auto-patterns.fields.add_color_tooltip') })) : (React.createElement(FillPreview, { fill: colorValue, onClick: onPreviewClick }))),
                 React.createElement(Popover.Content, null,
                     React.createElement(ColorPicker, { value: pickerColor, onChange: ((c) => setPickerColor(c)), onConfirm: onPickerConfirm, onCancel: onPickerCancel, showConverter: true, allowEmpty: true })))) }));
 });

package/dist/esm/components/color-view/color-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"color-input.js","sourceRoot":"","sources":["../../../../src/components/color-view/color-input.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"color-input.js","sourceRoot":"","sources":["../../../../src/components/color-view/color-input.tsx"],"names":[],"mappings":"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"}

package/dist/esm/components/color-view/color-view.st.css.js

@@ -1,12 +1,12 @@
 // @ts-nocheck
 import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
-var _namespace_ = "colorview2050727220";
+var _namespace_ = "colorview3463757835";
 var _style_ = classesRuntime.bind(null, _namespace_);
 export var cssStates = statesRuntime.bind(null, _namespace_);
 export var style = _style_;
 export var st = _style_;
 export var namespace = _namespace_;
-export var classes = { "root": "colorview2050727220__root", "view": "colorview2050727220__view", "fillPreview": "colorview2050727220__fillPreview" };
+export var classes = { "root": "colorview3463757835__root", "view": "colorview3463757835__view", "fillPreview": "colorview3463757835__fillPreview" };
 export var keyframes = {};
 export var layers = {};
 export var containers = {};

package/dist/esm/components/color-view/hex.js

@@ -0,0 +1,9 @@
+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) => value.replace(/^#/, '');
+export const isValidHex = (value) => HEX_OPTIONAL_HASH_RE.test(value);
+export const normalizeHex = (value) => {
+    const cleaned = value.startsWith('#') ? value : `#${value}`;
+    return HEX_RE.test(cleaned) ? cleaned.toUpperCase() : undefined;
+};
+//# sourceMappingURL=hex.js.map

package/dist/esm/components/color-view/hex.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hex.js","sourceRoot":"","sources":["../../../../src/components/color-view/hex.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,MAAM,GAAG,oCAAoC,CAAC;AAE3D,MAAM,oBAAoB,GAAG,qCAAqC,CAAC;AAEnE,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAAa,EAAU,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;AAE3E,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,KAAa,EAAW,EAAE,CACnD,oBAAoB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;AAEnC,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,KAAa,EAAsB,EAAE;IAChE,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,KAAK,EAAE,CAAC;IAC5D,OAAO,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC;AAClE,CAAC,CAAC"}

package/dist/esm/components/color-view/index.js

@@ -1,5 +1,8 @@
 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';
 //# sourceMappingURL=index.js.map

package/dist/esm/components/color-view/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/color-view/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/color-view/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,OAAO,CAAC"}

package/dist/esm/components/delete-dialog/delete-dialog.st.css.js

@@ -1,12 +1,12 @@
 // @ts-nocheck
 import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
-var _namespace_ = "deletedialog455934700";
+var _namespace_ = "deletedialog908586734";
 var _style_ = classesRuntime.bind(null, _namespace_);
 export var cssStates = statesRuntime.bind(null, _namespace_);
 export var style = _style_;
 export var st = _style_;
 export var namespace = _namespace_;
-export var classes = { "root": "deletedialog455934700__root", "layout": "deletedialog455934700__layout" };
+export var classes = { "root": "deletedialog908586734__root", "layout": "deletedialog908586734__layout" };
 export var keyframes = {};
 export var layers = {};
 export var containers = {};

package/dist/esm/components/document/form-document-field.st.css.js

@@ -1,12 +1,12 @@
 // @ts-nocheck
 import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
-var _namespace_ = "formdocumentfield4091006645";
+var _namespace_ = "formdocumentfield3681439606";
 var _style_ = classesRuntime.bind(null, _namespace_);
 export var cssStates = statesRuntime.bind(null, _namespace_);
 export var style = _style_;
 export var st = _style_;
 export var namespace = _namespace_;
-export var classes = { "root": "formdocumentfield4091006645__root", "viewWrapper": "formdocumentfield4091006645__viewWrapper", "textWidth": "formdocumentfield4091006645__textWidth", "documentLoader": "formdocumentfield4091006645__documentLoader", "addDocument": "formdocumentfield4091006645__addDocument", "addItemWrapper": "formdocumentfield4091006645__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/dist/esm/components/exclamation/exclamation.st.css.js

@@ -1,12 +1,12 @@
 // @ts-nocheck
 import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
-var _namespace_ = "exclamation1691525640";
+var _namespace_ = "exclamation2363706594";
 var _style_ = classesRuntime.bind(null, _namespace_);
 export var cssStates = statesRuntime.bind(null, _namespace_);
 export var style = _style_;
 export var st = _style_;
 export var namespace = _namespace_;
-export var classes = { "root": "exclamation1691525640__root", "exclamation": "exclamation1691525640__exclamation", "actions": "exclamation1691525640__actions", "action": "exclamation1691525640__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/dist/esm/components/highlighted-text/highlighted-text.st.css.js

@@ -1,13 +1,13 @@
 // @ts-nocheck
 import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
-var _namespace_ = "highlightedtext1920784841";
+var _namespace_ = "highlightedtext3971272452";
 var _style_ = classesRuntime.bind(null, _namespace_);
 export var cssStates = statesRuntime.bind(null, _namespace_);
 export var style = _style_;
 export var st = _style_;
 export var namespace = _namespace_;
-export var classes = { "root": "highlightedtext1920784841__root", "substring": "highlightedtext1920784841__substring" };
-export var keyframes = { "highlighted": "highlightedtext1920784841__highlighted", "highlighted-match": "highlightedtext1920784841__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/dist/esm/components/image/thumbnail-replace-overlay.st.css.js

@@ -1,12 +1,12 @@
 // @ts-nocheck
 import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
-var _namespace_ = "thumbnailreplaceoverlay1049657370";
+var _namespace_ = "thumbnailreplaceoverlay2487678945";
 var _style_ = classesRuntime.bind(null, _namespace_);
 export var cssStates = statesRuntime.bind(null, _namespace_);
 export var style = _style_;
 export var st = _style_;
 export var namespace = _namespace_;
-export var classes = { "root": "thumbnailreplaceoverlay1049657370__root", "icon": "thumbnailreplaceoverlay1049657370__icon" };
+export var classes = { "root": "thumbnailreplaceoverlay2487678945__root", "icon": "thumbnailreplaceoverlay2487678945__icon" };
 export var keyframes = {};
 export var layers = {};
 export var containers = {};

package/dist/esm/components/media-control/cell-media-edit-shell.st.css.js

@@ -1,12 +1,12 @@
 // @ts-nocheck
 import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
-var _namespace_ = "cellmediaeditshell298960076";
+var _namespace_ = "cellmediaeditshell3505962653";
 var _style_ = classesRuntime.bind(null, _namespace_);
 export var cssStates = statesRuntime.bind(null, _namespace_);
 export var style = _style_;
 export var st = _style_;
 export var namespace = _namespace_;
-export var classes = { "root": "cellmediaeditshell298960076__root" };
+export var classes = { "root": "cellmediaeditshell3505962653__root" };
 export var keyframes = {};
 export var layers = {};
 export var containers = {};

package/dist/esm/components/media-control/cell-media-edit-shell.st.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"cell-media-edit-shell.st.css.js","sourceRoot":"","sources":["../../../../src/components/media-control/cell-media-edit-shell.st.css.ts"],"names":[],"mappings":"AAAA,cAAc;AAGd,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAI9E,IAAI,WAAW,GAAG,6BAA6B,CAAC;AAChD,IAAI,OAAO,GAAG,cAAc,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;AAErD,MAAM,CAAC,IAAI,SAAS,GAAG,aAAa,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;AAC7D,MAAM,CAAC,IAAI,KAAK,GAA2C,OAAO,CAAC;AACnE,MAAM,CAAC,IAAI,EAAE,GAA2C,OAAO,CAAC;AAEhE,MAAM,CAAC,IAAI,SAAS,GAAG,WAAW,CAAC;AACnC,MAAM,CAAC,IAAI,OAAO,GAAG,EAAC,MAAM,EAAC,mCAAmC,EAAC,CAAC;AAClE,MAAM,CAAC,IAAI,SAAS,GAAG,EAAE,CAAC;AAC1B,MAAM,CAAC,IAAI,MAAM,GAAG,EAAE,CAAC;AACvB,MAAM,CAAC,IAAI,UAAU,GAAG,EAAE,CAAC;AAC3B,MAAM,CAAC,IAAI,MAAM,GAAG,EAAE,CAAC;AACvB,MAAM,CAAC,IAAI,IAAI,GAAG,EAAE,CAAC"}
+{"version":3,"file":"cell-media-edit-shell.st.css.js","sourceRoot":"","sources":["../../../../src/components/media-control/cell-media-edit-shell.st.css.ts"],"names":[],"mappings":"AAAA,cAAc;AAGd,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAI9E,IAAI,WAAW,GAAG,8BAA8B,CAAC;AACjD,IAAI,OAAO,GAAG,cAAc,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;AAErD,MAAM,CAAC,IAAI,SAAS,GAAG,aAAa,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;AAC7D,MAAM,CAAC,IAAI,KAAK,GAA2C,OAAO,CAAC;AACnE,MAAM,CAAC,IAAI,EAAE,GAA2C,OAAO,CAAC;AAEhE,MAAM,CAAC,IAAI,SAAS,GAAG,WAAW,CAAC;AACnC,MAAM,CAAC,IAAI,OAAO,GAAG,EAAC,MAAM,EAAC,oCAAoC,EAAC,CAAC;AACnE,MAAM,CAAC,IAAI,SAAS,GAAG,EAAE,CAAC;AAC1B,MAAM,CAAC,IAAI,MAAM,GAAG,EAAE,CAAC;AACvB,MAAM,CAAC,IAAI,UAAU,GAAG,EAAE,CAAC;AAC3B,MAAM,CAAC,IAAI,MAAM,GAAG,EAAE,CAAC;AACvB,MAAM,CAAC,IAAI,IAAI,GAAG,EAAE,CAAC"}

package/dist/esm/components/media-control/paste-url-button.st.css.js

@@ -1,12 +1,12 @@
 // @ts-nocheck
 import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
-var _namespace_ = "pasteurlbutton3527200609";
+var _namespace_ = "pasteurlbutton1818112565";
 var _style_ = classesRuntime.bind(null, _namespace_);
 export var cssStates = statesRuntime.bind(null, _namespace_);
 export var style = _style_;
 export var st = _style_;
 export var namespace = _namespace_;
-export var classes = { "root": "pasteurlbutton3527200609__root", "iconButtonTooltip": "pasteurlbutton3527200609__iconButtonTooltip", "iconButton": "pasteurlbutton3527200609__iconButton" };
+export var classes = { "root": "pasteurlbutton1818112565__root", "iconButtonTooltip": "pasteurlbutton1818112565__iconButtonTooltip", "iconButton": "pasteurlbutton1818112565__iconButton" };
 export var keyframes = {};
 export var layers = {};
 export var containers = {};

package/dist/esm/components/media-gallery/form-media-gallery-field.st.css.js

@@ -1,12 +1,12 @@
 // @ts-nocheck
 import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
-var _namespace_ = "formmediagalleryfield3185835316";
+var _namespace_ = "formmediagalleryfield2963289117";
 var _style_ = classesRuntime.bind(null, _namespace_);
 export var cssStates = statesRuntime.bind(null, _namespace_);
 export var style = _style_;
 export var st = _style_;
 export var namespace = _namespace_;
-export var classes = { "root": "formmediagalleryfield3185835316__root", "container": "formmediagalleryfield3185835316__container", "viewBox": "formmediagalleryfield3185835316__viewBox", "addItemWrapper": "formmediagalleryfield3185835316__addItemWrapper", "addItem": "formmediagalleryfield3185835316__addItem", "overlay": "formmediagalleryfield3185835316__overlay", "image": "formmediagalleryfield3185835316__image", "previewImage": "formmediagalleryfield3185835316__previewImage", "previewVideo": "formmediagalleryfield3185835316__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/dist/esm/components/media-image/media-image.st.css.js

@@ -1,15 +1,15 @@
 // @ts-nocheck
 import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
-var _namespace_ = "mediaimage1127028169";
+var _namespace_ = "mediaimage805645738";
 var _style_ = classesRuntime.bind(null, _namespace_);
 export var cssStates = statesRuntime.bind(null, _namespace_);
 export var style = _style_;
 export var st = _style_;
 export var namespace = _namespace_;
-export var classes = { "root": "mediaimage1127028169__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": "--mediaimage1127028169-from", "to": "--mediaimage1127028169-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" };
 //# sourceMappingURL=media-image.st.css.js.map

package/dist/esm/components/media-image/media-image.st.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"media-image.st.css.js","sourceRoot":"","sources":["../../../../src/components/media-image/media-image.st.css.ts"],"names":[],"mappings":"AAAA,cAAc;AAGd,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAI9E,IAAI,WAAW,GAAG,sBAAsB,CAAC;AACzC,IAAI,OAAO,GAAG,cAAc,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;AAErD,MAAM,CAAC,IAAI,SAAS,GAAG,aAAa,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;AAC7D,MAAM,CAAC,IAAI,KAAK,GAA2C,OAAO,CAAC;AACnE,MAAM,CAAC,IAAI,EAAE,GAA2C,OAAO,CAAC;AAEhE,MAAM,CAAC,IAAI,SAAS,GAAG,WAAW,CAAC;AACnC,MAAM,CAAC,IAAI,OAAO,GAAG,EAAC,MAAM,EAAC,4BAA4B,EAAC,CAAC;AAC3D,MAAM,CAAC,IAAI,SAAS,GAAG,EAAE,CAAC;AAC1B,MAAM,CAAC,IAAI,MAAM,GAAG,EAAE,CAAC;AACvB,MAAM,CAAC,IAAI,UAAU,GAAG,EAAE,CAAC;AAC3B,MAAM,CAAC,IAAI,MAAM,GAAG,EAAE,CAAC;AACvB,MAAM,CAAC,IAAI,IAAI,GAAG,EAAC,mBAAmB,EAAC,qBAAqB,EAAC,eAAe,EAAC,iBAAiB,EAAC,qBAAqB,EAAC,uBAAuB,EAAC,eAAe,EAAC,iBAAiB,EAAC,MAAM,EAAC,6BAA6B,EAAC,IAAI,EAAC,2BAA2B,EAAC,CAAC"}
+{"version":3,"file":"media-image.st.css.js","sourceRoot":"","sources":["../../../../src/components/media-image/media-image.st.css.ts"],"names":[],"mappings":"AAAA,cAAc;AAGd,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAI9E,IAAI,WAAW,GAAG,qBAAqB,CAAC;AACxC,IAAI,OAAO,GAAG,cAAc,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;AAErD,MAAM,CAAC,IAAI,SAAS,GAAG,aAAa,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;AAC7D,MAAM,CAAC,IAAI,KAAK,GAA2C,OAAO,CAAC;AACnE,MAAM,CAAC,IAAI,EAAE,GAA2C,OAAO,CAAC;AAEhE,MAAM,CAAC,IAAI,SAAS,GAAG,WAAW,CAAC;AACnC,MAAM,CAAC,IAAI,OAAO,GAAG,EAAC,MAAM,EAAC,2BAA2B,EAAC,CAAC;AAC1D,MAAM,CAAC,IAAI,SAAS,GAAG,EAAE,CAAC;AAC1B,MAAM,CAAC,IAAI,MAAM,GAAG,EAAE,CAAC;AACvB,MAAM,CAAC,IAAI,UAAU,GAAG,EAAE,CAAC;AAC3B,MAAM,CAAC,IAAI,MAAM,GAAG,EAAE,CAAC;AACvB,MAAM,CAAC,IAAI,IAAI,GAAG,EAAC,mBAAmB,EAAC,qBAAqB,EAAC,eAAe,EAAC,iBAAiB,EAAC,qBAAqB,EAAC,uBAAuB,EAAC,eAAe,EAAC,iBAAiB,EAAC,MAAM,EAAC,4BAA4B,EAAC,IAAI,EAAC,0BAA0B,EAAC,CAAC"}

package/dist/esm/components/media-image/overlays/overlay.st.css.js

@@ -1,12 +1,12 @@
 // @ts-nocheck
 import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js";
-var _namespace_ = "overlay2544936598";
+var _namespace_ = "overlay4045146886";
 var _style_ = classesRuntime.bind(null, _namespace_);
 export var cssStates = statesRuntime.bind(null, _namespace_);
 export var style = _style_;
 export var st = _style_;
 export var namespace = _namespace_;
-export var classes = { "root": "overlay2544936598__root", "iconOverlay": "overlay2544936598__iconOverlay" };
+export var classes = { "root": "overlay4045146886__root", "iconOverlay": "overlay4045146886__iconOverlay" };
 export var keyframes = {};
 export var layers = {};
 export var containers = {};

package/dist/esm/components/media-loader/media-loader.st.css.js

@@ -1,12 +1,12 @@
 // @ts-nocheck
 import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
-var _namespace_ = "medialoader3457330724";
+var _namespace_ = "medialoader2381278212";
 var _style_ = classesRuntime.bind(null, _namespace_);
 export var cssStates = statesRuntime.bind(null, _namespace_);
 export var style = _style_;
 export var st = _style_;
 export var namespace = _namespace_;
-export var classes = { "root": "medialoader3457330724__root", "loader": "medialoader3457330724__loader" };
+export var classes = { "root": "medialoader2381278212__root", "loader": "medialoader2381278212__loader" };
 export var keyframes = {};
 export var layers = {};
 export var containers = {};

package/dist/esm/components/media-tag/web-media-tag/media-tag.st.css.js

@@ -1,12 +1,12 @@
 // @ts-nocheck
 import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js";
-var _namespace_ = "mediatag3625691514";
+var _namespace_ = "mediatag1080651885";
 var _style_ = classesRuntime.bind(null, _namespace_);
 export var cssStates = statesRuntime.bind(null, _namespace_);
 export var style = _style_;
 export var st = _style_;
 export var namespace = _namespace_;
-export var classes = { "root": "mediatag3625691514__root" };
+export var classes = { "root": "mediatag1080651885__root" };
 export var keyframes = {};
 export var layers = {};
 export var containers = {};