@wix/patterns-fields 1.108.0 → 1.110.0

package/src/components/date-input/cell-date-input.tsx

@@ -7,6 +7,7 @@ import React, {
 import { DatePicker } from '@wix/design-system';
 import {
   closeDatePickerCalendar,
+  typedDateInputProps,
   getDatePickerInputElement,
 } from './date-picker-internals';
 
@@ -29,6 +30,10 @@ export interface CellDateInputProps {
    * after a date pick).
    */
   onChange?: (date: Date) => void;
+  /** Fires when the user empties the input. */
+  onEmpty?: () => void;
+  /** Fires on Enter in the input with the typed date, or `null` when empty. */
+  onEnter?: (date: Date | null) => void;
   /** When set, renders the clear (X) suffix and calls this on click. */
   onClear?: () => void;
   /** Ref object that receives the underlying `<input>` element. Consumers
@@ -62,6 +67,8 @@ export const CellDateInput = forwardRef<
     {
       value,
       onChange,
+      onEmpty,
+      onEnter,
       onClear,
       inputRef,
       dataHook,
@@ -73,6 +80,7 @@ export const CellDateInput = forwardRef<
     forwardedRef,
   ) => {
     const datePickerRef = useRef<DatePicker | null>(null);
+    const inputElementRef = useRef<HTMLInputElement | null>(null);
 
     useImperativeHandle(
       forwardedRef,
@@ -91,6 +99,16 @@ export const CellDateInput = forwardRef<
       [onChange],
     );
 
+    const handleEmptyEnter = useCallback(() => {
+      if (onEnter) {
+        onEnter(null);
+        return;
+      }
+      onEmpty?.();
+    }, [onEnter, onEmpty]);
+
+    const handlesTypedInput = Boolean(onEmpty || onEnter);
+
     const validValue =
       value instanceof Date && !isNaN(value.getTime()) ? value : undefined;
 
@@ -110,7 +128,17 @@ export const CellDateInput = forwardRef<
           border: 'none',
           ...(hidePrefix ? { prefix: <span /> } : {}),
           ...(ariaLabel ? { ariaLabel } : {}),
+          ...(handlesTypedInput
+            ? typedDateInputProps({
+                picker: datePickerRef,
+                input: inputElementRef,
+                onEmpty,
+                onEmptyEnter: handleEmptyEnter,
+                onEnter,
+              })
+            : {}),
           inputRef: (el: HTMLInputElement | null) => {
+            inputElementRef.current = el;
             if (inputRef) {
               inputRef.current = el ?? undefined;
             }

package/src/components/date-input/date-picker-internals.ts

@@ -1,21 +1,34 @@
-import type { DatePicker } from '@wix/design-system';
+import type { KeyboardEvent, RefObject } from 'react';
+import type { DatePicker, InputProps } from '@wix/design-system';
 
 /**
- * WDS `DatePicker` exposes two operations we need that aren't part of its
+ * WDS `DatePicker` exposes operations we need that aren't part of its
  * public type surface:
  *
  *   - `state.inputRef` — the underlying `HTMLInputElement` (used to focus
  *     the input and to programmatically seed it for type-to-edit).
  *   - `_closeCalendar()` — WDS declares `closeCalendar` in its types but
  *     only the underscored form exists at runtime.
+ *   - `_handleInputChange()` / `_handleKeyDown()` — its handlers for typed
+ *     text and keys.
  *
- * Both reaches live behind this helper so the cast happens in exactly one
+ * These reaches live behind this helper so the cast happens in exactly one
  * place. If WDS adds a public surface for these, swap the implementation
  * here and every consumer picks it up automatically.
  */
 type DatePickerWithInternals = DatePicker & {
   state?: { inputRef?: HTMLInputElement };
   _closeCalendar?: () => void;
+  _handleInputChange?: (change: { dateVal: Date }) => void;
+  _handleKeyDown?: (event: KeyboardEvent, date: Date | null) => void;
+  _handleChange?: (date: Date, modifiers?: { disabled?: boolean }) => void;
+};
+
+// The handlers DatePicker's inner DateInput calls. `InputProps` types
+// `onChange` and `onKeyDown` as DOM event handlers, so it can't hold these.
+type DateInputHandlers = {
+  onChange: (change: { dateVal: Date }) => void;
+  onKeyDown: (event: KeyboardEvent, date: Date | null) => void;
 };
 
 export const getDatePickerInputElement = (
@@ -28,3 +41,91 @@ export const closeDatePickerCalendar = (
 ): void => {
   (picker as DatePickerWithInternals | null | undefined)?._closeCalendar?.();
 };
+
+// WDS skips `onChange` when the picked day is the day of its `value` prop.
+// This reports that pick through `onPick` and returns a function that undoes it.
+export const onSameDayCalendarPick = (
+  picker: DatePicker | null | undefined,
+  onPick: (date: Date) => void,
+): (() => void) => {
+  const internals = picker as DatePickerWithInternals | null | undefined;
+  const handleChange = internals?._handleChange;
+  if (!internals || !handleChange) {
+    return () => {};
+  }
+  internals._handleChange = (date, modifiers) => {
+    handleChange(date, modifiers);
+    const { value } = internals.props;
+    // Same guard as WDS `_saveNewValue`.
+    if (value?.toDateString() === date.toDateString() && !modifiers?.disabled) {
+      onPick(date);
+    }
+  };
+  return () => {
+    internals._handleChange = handleChange;
+  };
+};
+
+const isValidDate = (date: Date | null): date is Date =>
+  date !== null && !isNaN(date.getTime());
+
+// WDS parses empty input text as today. These `inputProps` handlers report an
+// emptied input through `onEmpty` and Enter on it through `onEmptyEnter`
+// instead, send typed dates to `onType` when it is given (the picker's
+// `onChange` otherwise), and Enter on a typed date to `onEnter`. An event
+// without its callback goes to the picker as before. Calendar picks don't go
+// through them.
+// WDS thread: https://wix.slack.com/archives/C39FTGUBZ/p1790691851370229
+export const typedDateInputProps = ({
+  picker,
+  input,
+  onEmpty,
+  onEmptyEnter,
+  onType,
+  onEnter,
+}: {
+  picker: RefObject<DatePicker | null>;
+  input: RefObject<HTMLInputElement | null>;
+  onEmpty?: () => void;
+  onEmptyEnter?: () => void;
+  onType?: (date: Date) => void;
+  onEnter?: (date: Date) => void;
+}): Partial<InputProps> => {
+  const internals = () => picker.current as DatePickerWithInternals | null;
+  const isEmpty = () => input.current?.value === '';
+  const takeOverEnter = (event: KeyboardEvent) => {
+    event.preventDefault();
+    closeDatePickerCalendar(picker.current);
+  };
+  const handlers: DateInputHandlers = {
+    onChange: (change) => {
+      if (onEmpty && isEmpty()) {
+        onEmpty();
+        return;
+      }
+      if (onType) {
+        onType(change.dateVal);
+        return;
+      }
+      internals()?._handleInputChange?.(change);
+    },
+    onKeyDown: (event, date) => {
+      if (event.key === 'Enter') {
+        const isInputEmpty = isEmpty();
+        if (isInputEmpty && onEmptyEnter) {
+          takeOverEnter(event);
+          onEmptyEnter();
+          return;
+        }
+        if (!isInputEmpty && onEnter && isValidDate(date)) {
+          takeOverEnter(event);
+          onEnter(date);
+          return;
+        }
+      }
+      internals()?._handleKeyDown?.(event, date);
+    },
+  };
+  // DatePicker passes `inputProps` to its inner DateInput, not to `<Input>`.
+  return handlers as unknown as Partial<InputProps>;
+};

package/src/components/date-input/form-date-input.driver.ts

@@ -25,7 +25,9 @@ export function FormDateInputDriver(
     getLabel: () => getFormFieldLabelText(formField),
     datePickerExists: () => datePickerBase.exists(),
     enterText: (text: string) => datePicker.inputDriver.enterText(text),
+    getValue: () => datePicker.inputDriver.getValue(),
     blur: () => datePicker.inputDriver.blur(),
+    selectDate: (date: Date) => datePicker.calendarDriver.clickDay(date),
     hasError: () => datePicker.inputDriver.hasStatus('error'),
     getErrorMessage: () => datePicker.inputDriver.getStatusMessage(),
     isRequired: () => formField.isRequired(),

package/src/components/date-input/form-date-input.tsx

@@ -8,6 +8,7 @@ import { BaseInputProps, BaseInputRef } from '../../types/base-input';
 import { useTranslations } from '../../hooks';
 import { isEmpty } from '../../validations/string';
 import { calendarPopoverDefaults } from '../popover-defaults';
+import { useFieldValueReplacement } from './use-field-value-replacement';
 import {
   getDateWithoutTimezone,
   getISODateStringWithFixedTimezone,
@@ -19,14 +20,17 @@ const _FormDateInput = (props: FormDateInputProps) => {
   const { field, dataHook, inputRef, formControl, data } = props;
   const { translate: t } = useWixPatternsContainer();
   const { t: tFields } = useTranslations();
+  const inputError = useRef('');
 
   const computeError = (
     value: string | null | undefined,
     format?: string,
     validationType?: 'outOfBoundsError' | 'formatError' | 'valid',
   ): string => {
-    if (field.validation?.required && isEmpty(value)) {
-      return t('cairo.fieldValidation.requiredField');
+    if (isEmpty(value)) {
+      return field.validation?.required
+        ? t('cairo.fieldValidation.requiredField')
+        : '';
     }
     if (validationType === 'formatError' && format) {
       return t('cairo.customFields.fieldType.date.invalid.value', {
@@ -42,7 +46,7 @@ const _FormDateInput = (props: FormDateInputProps) => {
     defaultValue: data?.[field?.id ?? ''],
     rules: {
       validate: (value) => {
-        const error = computeError(value);
+        const error = inputError.current || computeError(value);
         return error || true;
       },
     },
@@ -59,6 +63,16 @@ const _FormDateInput = (props: FormDateInputProps) => {
 
   const ref = useRef<BaseInputRef>({});
   const [errorMessage, setErrorMessage] = useState<string>('');
+  const revision = useFieldValueReplacement(formControl, field.id, (value) => {
+    inputError.current = '';
+    setErrorMessage('');
+    ref.current.invalid = false;
+    const iso =
+      typeof value === 'string'
+        ? getISODateStringWithFixedTimezone(value)
+        : undefined;
+    setDate(iso ? getDateWithoutTimezone(iso) : undefined);
+  });
 
   return (
     <FormField
@@ -68,6 +82,7 @@ const _FormDateInput = (props: FormDateInputProps) => {
       dataHook={dataHook}
     >
       <DatePicker
+        key={revision}
         ref={(internalRef) => {
           inputRef?.(ref.current);
           const inputEl =
@@ -84,6 +99,9 @@ const _FormDateInput = (props: FormDateInputProps) => {
         placeholderText={tFields('CMS.formDate.placeholder')}
         value={date}
         onChange={(newValue: Date) => {
+          inputError.current = '';
+          setErrorMessage('');
+          ref.current.invalid = false;
           setDate(newValue);
           const formattedDate = newValue
             ? getISODateStringWithFixedTimezone(newValue)
@@ -92,12 +110,16 @@ const _FormDateInput = (props: FormDateInputProps) => {
         }}
         onValidate={({ validationType, value: newValue, format }) => {
           const error = computeError(newValue, format, validationType);
+          inputError.current = error;
           setErrorMessage(error);
           ref.current.invalid = !!error;
 
           if (validationType === 'formatError' && newValue === '') {
             setDate(undefined);
             controller.field.onChange(null);
+          } else {
+            // Invalid text does not change the stored date, but must revalidate it.
+            controller.field.onChange(controller.field.value);
           }
         }}
         status={errorMessage ? 'error' : undefined}

package/src/components/date-input/use-field-value-replacement.ts

@@ -0,0 +1,63 @@
+import { useEffect, useRef, useState } from 'react';
+import { get } from '@wix/bex-core/form';
+import type { Control } from '@wix/bex-core/form';
+
+export function useFieldValueReplacement(
+  control: Control,
+  name: string,
+  onReplace: (value: unknown) => void,
+) {
+  const callback = useRef(onReplace);
+  callback.current = onReplace;
+  // A new key discards the picker's draft even when its saved value is unchanged.
+  const [revision, setRevision] = useState(0);
+
+  useEffect(() => {
+    // Control has no public reset listener. Input edits carry a type; setValue
+    // does not. Older RHF releases have a separate values subject.
+    const subjects:
+      | (Partial<Control['_subjects']> & {
+          values?: Pick<Control['_subjects']['state'], 'subscribe'>;
+        })
+      | undefined = control._subjects;
+    const values = subjects?.values ?? subjects?.state;
+    const array = subjects?.array;
+    // Reset cleanup is optional; an incompatible RHF version must not crash the field.
+    if (
+      typeof values?.subscribe !== 'function' ||
+      typeof array?.subscribe !== 'function'
+    ) {
+      return;
+    }
+    const subscription = values.subscribe({
+      next: (update) => {
+        if (
+          !update.values ||
+          !update.name ||
+          update.type ||
+          (update.name !== name && !name.startsWith(`${update.name}.`))
+        ) {
+          return;
+        }
+        callback.current(get(update.values, name));
+        setRevision((value) => value + 1);
+      },
+    });
+    // Reset broadcasts here even for unchanged values. Unlike the state
+    // subject, this does not fire when an unrelated field unregisters.
+    const resets = array.subscribe({
+      next: (update) => {
+        if (!update.name && update.values) {
+          callback.current(get(update.values, name));
+          setRevision((value) => value + 1);
+        }
+      },
+    });
+    return () => {
+      subscription?.unsubscribe?.();
+      resets?.unsubscribe?.();
+    };
+  }, [control, name]);
+
+  return revision;
+}

package/src/components/datetime-input/form-date-time.driver.ts

@@ -32,7 +32,10 @@ export function FormDateTimeDriver(
     dateExists: () => dateBase.exists(),
     timeExists: () => timeBase.exists(),
     enterDateText: (text: string) => datePicker.inputDriver.enterText(text),
+    getDateText: () => datePicker.inputDriver.getValue(),
     blurDate: () => datePicker.inputDriver.blur(),
+    enterTimeText: (text: string) => timeInput.setValue(text),
+    blurTime: () => timeInput.confirmValue(),
     dateHasError: () => datePicker.inputDriver.hasStatus('error'),
     getDateErrorMessage: () => datePicker.inputDriver.getStatusMessage(),
     timeHasError: () =>

package/src/components/datetime-input/form-date-time.tsx

@@ -13,6 +13,7 @@ import { useController } from '@wix/bex-core/form';
 import { BaseInputProps, BaseInputRef } from '../../types/base-input';
 import { useTranslations } from '../../hooks';
 import { isEmpty } from '../../validations/string';
+import { useFieldValueReplacement } from '../date-input/use-field-value-replacement';
 import {
   calendarPopoverDefaults,
   dropdownPopoverDefaults,
@@ -24,6 +25,7 @@ const _FormDateTime = (props: FormDateTimeProps) => {
   const { field, dataHook, inputRef, formControl, data } = props;
   const { translate: t } = useWixPatternsContainer();
   const { t: tFields } = useTranslations();
+  const inputErrors = useRef({ date: '', time: '' });
 
   const controller = useController({
     name: field?.id ?? '',
@@ -31,6 +33,10 @@ const _FormDateTime = (props: FormDateTimeProps) => {
     defaultValue: data?.[field?.id ?? ''],
     rules: {
       validate: (v) => {
+        const inputError = inputErrors.current.date || inputErrors.current.time;
+        if (inputError) {
+          return inputError;
+        }
         if (field?.validation?.required && isEmpty(v)) {
           return t('cairo.fieldValidation.requiredField');
         }
@@ -49,6 +55,19 @@ const _FormDateTime = (props: FormDateTimeProps) => {
 
   const [dateStatusMessage, setDateStatusMessage] = useState('');
   const [timeStatusMessage, setTimeStatusMessage] = useState('');
+  const formError =
+    !dateStatusMessage && !timeStatusMessage
+      ? controller.fieldState.error
+      : undefined;
+
+  const setDateError = (error: string) => {
+    inputErrors.current.date = error;
+    setDateStatusMessage(error);
+  };
+  const setTimeError = (error: string) => {
+    inputErrors.current.time = error;
+    setTimeStatusMessage(error);
+  };
 
   const ref = useRef<BaseInputRef>({});
   const dateRef = useRef<BaseInputRef>({});
@@ -59,6 +78,16 @@ const _FormDateTime = (props: FormDateTimeProps) => {
   const [timeValue, setTimeValue] = useState<number | string | undefined>(
     date?.getTime(),
   );
+  const revision = useFieldValueReplacement(formControl, field.id, (value) => {
+    setDateError('');
+    setTimeError('');
+    ref.current.invalid = false;
+    dateRef.current.invalid = false;
+    timeRef.current.invalid = false;
+    const nextDate = typeof value === 'string' ? new Date(value) : undefined;
+    setDateValue(nextDate?.getDate());
+    setTimeValue(nextDate?.getTime());
+  });
 
   useEffect(() => {
     ref.current.focus = () => {
@@ -81,6 +110,7 @@ const _FormDateTime = (props: FormDateTimeProps) => {
       <Layout gap="12px">
         <Cell span={6}>
           <DatePicker
+            key={revision}
             ref={(internalRef) => {
               const inputEl =
                 // TODO: PR to WSR needed to expose as public API
@@ -99,6 +129,7 @@ const _FormDateTime = (props: FormDateTimeProps) => {
             // onChange is triggered only when you have valid, non-empty value.
             // and onValidate is triggered on every change so we use onValidate
             onValidate={({ validationType, value: newValue, format }) => {
+              let value = controller.field.value;
               if (validationType === 'valid') {
                 const dateWithNewDate = date
                   ? new Date(date)
@@ -107,26 +138,24 @@ const _FormDateTime = (props: FormDateTimeProps) => {
                 dateWithNewDate.setFullYear(_value.getFullYear());
                 dateWithNewDate.setMonth(_value.getMonth());
                 dateWithNewDate.setDate(_value.getDate());
-                controller.field.onChange(dateWithNewDate.toISOString());
+                value = dateWithNewDate.toISOString();
                 setDateValue(new Date(newValue).getDate());
-                setDateStatusMessage('');
+                setDateError('');
                 dateRef.current.invalid = false;
               } else if (validationType === 'formatError' && newValue === '') {
                 if (field.validation?.required) {
-                  setDateStatusMessage(
-                    t('cairo.fieldValidation.requiredField'),
-                  );
+                  setDateError(t('cairo.fieldValidation.requiredField'));
                   dateRef.current.invalid = true;
                 } else {
-                  setDateStatusMessage('');
+                  setDateError('');
                   dateRef.current.invalid = false;
                 }
                 setDateValue(newValue);
                 if (!timeValue) {
-                  controller.field.onChange(null);
+                  value = null;
                 }
               } else {
-                setDateStatusMessage(
+                setDateError(
                   t('cairo.customFields.fieldType.date.invalid.value', {
                     dateFormat: format ?? '',
                   }),
@@ -136,21 +165,17 @@ const _FormDateTime = (props: FormDateTimeProps) => {
 
               ref.current.invalid =
                 dateRef.current.invalid || timeRef.current.invalid;
+              controller.field.onChange(value);
             }}
-            status={
-              controller.fieldState.error || dateStatusMessage
-                ? 'error'
-                : undefined
-            }
-            statusMessage={
-              controller.fieldState.error?.message || dateStatusMessage
-            }
+            status={dateStatusMessage || formError ? 'error' : undefined}
+            statusMessage={dateStatusMessage || formError?.message}
             dataHook={`datetime-date-${field.id}`}
             popoverProps={calendarPopoverDefaults}
           />
         </Cell>
         <Cell span={6}>
           <TimeInput
+            key={revision}
             ref={(internalRef) => {
               timeRef.current.focus = () => internalRef?.focus();
             }}
@@ -159,23 +184,19 @@ const _FormDateTime = (props: FormDateTimeProps) => {
             placeholder={tFields('CMS.formTime.placeholder')}
             invalidMessage={tFields('CMS.formTime.invalidMessage')}
             value={date ?? null}
-            status={
-              controller.fieldState.error || timeStatusMessage
-                ? 'error'
-                : undefined
-            }
-            statusMessage={
-              controller.fieldState.error?.message || timeStatusMessage
-            }
+            status={timeStatusMessage || formError ? 'error' : undefined}
+            statusMessage={timeStatusMessage || formError?.message}
             onInvalid={() => {
               timeRef.current.invalid = true;
-              setTimeStatusMessage(
+              setTimeError(
                 t('cairo.customFields.fieldType.dateAndTime.invalid.value'),
               );
               ref.current.invalid =
                 dateRef.current.invalid || timeRef.current.invalid;
+              controller.field.onChange(controller.field.value);
             }}
             onChange={({ date: newValue }) => {
+              let value = controller.field.value;
               timeRef.current.invalid = false;
               ref.current.invalid =
                 dateRef.current.invalid || timeRef.current.invalid;
@@ -186,28 +207,29 @@ const _FormDateTime = (props: FormDateTimeProps) => {
                 dateWithNewTime.setMinutes(newValue.getMinutes());
                 dateWithNewTime.setSeconds(newValue.getSeconds());
                 dateWithNewTime.setMilliseconds(newValue.getMilliseconds());
-                controller.field.onChange(dateWithNewTime.toISOString());
-                setTimeStatusMessage('');
-                setDateStatusMessage('');
+                value = dateWithNewTime.toISOString();
+                setTimeError('');
+                if (!dateRef.current.invalid) {
+                  setDateError('');
+                }
               } else {
                 if (!newValue) {
                   setTimeValue('');
                   if (field.validation?.required) {
-                    setTimeStatusMessage(
-                      t('cairo.fieldValidation.requiredField'),
-                    );
+                    setTimeError(t('cairo.fieldValidation.requiredField'));
                     timeRef.current.invalid = true;
                   } else {
-                    setTimeStatusMessage('');
+                    setTimeError('');
                     timeRef.current.invalid = false;
                   }
                   if (!ref.current.invalid) {
                     if (!dateValue) {
-                      controller.field.onChange(null);
+                      value = null;
                     }
                   }
                 }
               }
+              controller.field.onChange(value);
             }}
           />
         </Cell>

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "deletedialog744307190";
+var _namespace_ = "deletedialog2793524866";
 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":"deletedialog744307190__root","layout":"deletedialog744307190__layout"};
+export var classes = {"root":"deletedialog2793524866__root","layout":"deletedialog2793524866__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_ = "formdocumentfield2402620674";
+var _namespace_ = "formdocumentfield3083378965";
 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":"formdocumentfield2402620674__root","viewWrapper":"formdocumentfield2402620674__viewWrapper","textWidth":"formdocumentfield2402620674__textWidth","documentLoader":"formdocumentfield2402620674__documentLoader","addDocument":"formdocumentfield2402620674__addDocument","addItemWrapper":"formdocumentfield2402620674__addItemWrapper"};
+export var classes = {"root":"formdocumentfield3083378965__root","viewWrapper":"formdocumentfield3083378965__viewWrapper","textWidth":"formdocumentfield3083378965__textWidth","documentLoader":"formdocumentfield3083378965__documentLoader","addDocument":"formdocumentfield3083378965__addDocument","addItemWrapper":"formdocumentfield3083378965__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_ = "exclamation3341739339";
+var _namespace_ = "exclamation2723601405";
 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":"exclamation3341739339__root","exclamation":"exclamation3341739339__exclamation","actions":"exclamation3341739339__actions","action":"exclamation3341739339__action"};
+export var classes = {"root":"exclamation2723601405__root","exclamation":"exclamation2723601405__exclamation","actions":"exclamation2723601405__actions","action":"exclamation2723601405__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_ = "highlightedtext3372272020";
+var _namespace_ = "highlightedtext38924617";
 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":"highlightedtext3372272020__root","substring":"highlightedtext3372272020__substring"};
-export var keyframes = {"highlighted":"highlightedtext3372272020__highlighted","highlighted-match":"highlightedtext3372272020__highlighted-match"}; 
+export var classes = {"root":"highlightedtext38924617__root","substring":"highlightedtext38924617__substring"};
+export var keyframes = {"highlighted":"highlightedtext38924617__highlighted","highlighted-match":"highlightedtext38924617__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_ = "thumbnailreplaceoverlay2032633141";
+var _namespace_ = "thumbnailreplaceoverlay1453798223";
 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":"thumbnailreplaceoverlay2032633141__root","icon":"thumbnailreplaceoverlay2032633141__icon"};
+export var classes = {"root":"thumbnailreplaceoverlay1453798223__root","icon":"thumbnailreplaceoverlay1453798223__icon"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};