@wix/patterns-fields 1.108.0 → 1.110.0

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

@@ -22,6 +22,200 @@ const setup = (
 };
 
 describe('FormDateTime field', () => {
+  it.each(['reset', 'setValue'] as const)(
+    'clears stale errors on %s, even when restoring the same value',
+    async (method) => {
+      const driver = setup({ initialValue: '2026-09-16T12:00:00.000Z' });
+      const initialText = await driver.tk.getDateText();
+      await driver.tk.enterTimeText('not-a-time');
+      await driver.tk.blurTime();
+      await driver.tk.enterDateText('not-a-date');
+      await driver.tk.blurDate();
+      await driver.submit();
+      expect(driver.onSubmit).not.toHaveBeenCalled();
+
+      await driver[method]('2026-09-16T12:00:00.000Z');
+      expect(await driver.tk.getDateText()).toBe(initialText);
+      expect(await driver.tk.dateHasError()).toBe(false);
+      expect(await driver.tk.timeHasError()).toBe(false);
+      await driver.submit();
+      expect(driver.onSubmit).toHaveBeenCalledTimes(1);
+      expect(driver.onSubmit.mock.calls[0][0][driver.field.id]).toBe(
+        '2026-09-16T12:00:00.000Z',
+      );
+    },
+  );
+
+  it.each(['reset', 'setValue'] as const)(
+    'shows and submits an externally replaced date via %s',
+    async (method) => {
+      const driver = setup({ initialValue: '2026-09-16T12:00:00.000Z' });
+      const initialText = await driver.tk.getDateText();
+      await driver.tk.enterTimeText('not-a-time');
+      await driver.tk.blurTime();
+      await driver.tk.enterDateText('not-a-date');
+      await driver.tk.blurDate();
+
+      await driver[method]('2026-09-18T12:00:00.000Z');
+      expect(await driver.tk.getDateText()).not.toBe(initialText);
+      expect(await driver.tk.getDateText()).not.toBe('not-a-date');
+      expect(await driver.tk.dateHasError()).toBe(false);
+      expect(await driver.tk.timeHasError()).toBe(false);
+      await driver.submit();
+      expect(driver.onSubmit.mock.calls[0][0][driver.field.id]).toBe(
+        '2026-09-18T12:00:00.000Z',
+      );
+    },
+  );
+
+  it('keeps the error when another field is replaced or removed', async () => {
+    const driver = setup({ initialValue: '2026-09-16T12:00:00.000Z' });
+    await driver.tk.enterDateText('not-a-date');
+    await driver.tk.blurDate();
+    await driver.setValue('2026-09-18T12:00:00.000Z', 'anotherField');
+    await driver.unregister('anotherField');
+    await driver.submit();
+    expect(driver.onSubmit).not.toHaveBeenCalled();
+  });
+
+  it.each([false, true])(
+    'resets invalid input to an empty value (required=%s)',
+    async (required) => {
+      const driver = setup({
+        field: makeField({ type: 'DATETIME', validation: { required } }),
+      });
+      await driver.tk.enterDateText('not-a-date');
+      await driver.tk.blurDate();
+      await driver.reset(null);
+      expect(await driver.tk.getDateText()).toBe('');
+      await driver.submit();
+      expect(driver.onSubmit).toHaveBeenCalledTimes(required ? 0 : 1);
+      if (!required) {
+        expect(driver.onSubmit.mock.calls[0][0][driver.field.id]).toBeNull();
+      }
+    },
+  );
+
+  it.each([false, true])(
+    'blocks submit for an invalid date (required=%s)',
+    async (required) => {
+      const driver = setup({
+        field: makeField({ type: 'DATETIME', validation: { required } }),
+        initialValue: '2026-09-16T12:00:00.000Z',
+      });
+      await driver.tk.enterDateText('not-a-date');
+      await driver.tk.blurDate();
+      expect(await driver.tk.dateHasError()).toBe(true);
+      expect(await driver.tk.timeHasError()).toBe(false);
+
+      await driver.submit();
+
+      expect(driver.onSubmit).not.toHaveBeenCalled();
+      expect(await driver.tk.timeHasError()).toBe(false);
+    },
+  );
+
+  it('allows submit after correcting an invalid date', async () => {
+    const driver = setup({ initialValue: '2026-09-16T12:00:00.000Z' });
+    await driver.tk.enterDateText('not-a-date');
+    await driver.tk.blurDate();
+    await driver.submit();
+    expect(driver.onSubmit).not.toHaveBeenCalled();
+
+    await driver.tk.enterDateText('09/17/2026');
+    await driver.tk.blurDate();
+    await driver.submit();
+
+    expect(await driver.tk.dateHasError()).toBe(false);
+    expect(driver.onSubmit).toHaveBeenCalledTimes(1);
+    expect(
+      new Date(driver.onSubmit.mock.calls[0][0][driver.field.id]).getDate(),
+    ).toBe(17);
+  });
+
+  it('blocks an invalid time and allows submit after correcting it', async () => {
+    const driver = setup({ initialValue: '2026-09-16T12:00:00.000Z' });
+    await driver.tk.enterTimeText('not-a-time');
+    await driver.tk.blurTime();
+    expect(await driver.tk.timeHasError()).toBe(true);
+    expect(await driver.tk.dateHasError()).toBe(false);
+    await driver.submit();
+    expect(driver.onSubmit).not.toHaveBeenCalled();
+    expect(await driver.tk.dateHasError()).toBe(false);
+
+    await driver.tk.enterTimeText('14:30');
+    await driver.tk.blurTime();
+    await driver.submit();
+
+    expect(await driver.tk.timeHasError()).toBe(false);
+    expect(driver.onSubmit).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not clear an invalid date when the time changes', async () => {
+    const driver = setup({ initialValue: '2026-09-16T12:00:00.000Z' });
+    await driver.tk.enterDateText('not-a-date');
+    await driver.tk.blurDate();
+    await driver.tk.enterTimeText('14:30');
+    await driver.tk.blurTime();
+
+    expect(await driver.tk.dateHasError()).toBe(true);
+    await driver.submit();
+    expect(driver.onSubmit).not.toHaveBeenCalled();
+  });
+
+  it('shows each input’s own message when both inputs are invalid', async () => {
+    const driver = setup({ initialValue: '2026-09-16T12:00:00.000Z' });
+    await driver.tk.enterDateText('not-a-date');
+    await driver.tk.blurDate();
+    await driver.tk.enterTimeText('not-a-time');
+    await driver.tk.blurTime();
+    await driver.submit();
+
+    expect(driver.onSubmit).not.toHaveBeenCalled();
+    expect(await driver.tk.getDateErrorMessage()).toContain(
+      'cairo.customFields.fieldType.date.invalid.value',
+    );
+    expect(await driver.tk.getTimeErrorMessage()).toBe(
+      'CMS.formTime.invalidMessage',
+    );
+  });
+
+  it('does not clear an invalid time when the date changes', async () => {
+    const driver = setup({ initialValue: '2026-09-16T12:00:00.000Z' });
+    await driver.tk.enterTimeText('not-a-time');
+    await driver.tk.blurTime();
+    await driver.tk.enterDateText('09/17/2026');
+    await driver.tk.blurDate();
+
+    expect(await driver.tk.timeHasError()).toBe(true);
+    await driver.submit();
+    expect(driver.onSubmit).not.toHaveBeenCalled();
+  });
+
+  it.each([false, true])(
+    'handles clearing an invalid date and time (required=%s)',
+    async (required) => {
+      const driver = setup({
+        field: makeField({ type: 'DATETIME', validation: { required } }),
+        initialValue: '2026-09-16T12:00:00.000Z',
+      });
+      await driver.tk.enterDateText('not-a-date');
+      await driver.tk.blurDate();
+      await driver.tk.enterTimeText('');
+      await driver.tk.blurTime();
+      await driver.tk.enterDateText('');
+      await driver.tk.blurDate();
+      await driver.submit();
+
+      expect(driver.onSubmit).toHaveBeenCalledTimes(required ? 0 : 1);
+      if (!required) {
+        expect(driver.onSubmit.mock.calls[0][0][driver.field.id]).toBeNull();
+        expect(await driver.tk.dateHasError()).toBe(false);
+        expect(await driver.tk.timeHasError()).toBe(false);
+      }
+    },
+  );
+
   it('renders the field displayName as the label', async () => {
     const driver = setup();
 

package/src/__tests__/components/rich-content-editor.spec.tsx

@@ -412,6 +412,59 @@ describe('<RichContentEditor/>', () => {
     });
   });
 
+  describe('Enter key', () => {
+    const pressEnterInText = (opts: { shiftKey?: boolean } = {}) => {
+      const text = document.createElement('div');
+      text.setAttribute('contenteditable', 'true');
+      document.body.appendChild(text);
+      fireEvent.keyDown(text, { key: 'Enter', bubbles: true, ...opts });
+      text.remove();
+    };
+
+    it('closes fullscreen on Enter in the text when closeOnEnter is set', async () => {
+      renderWithProps({
+        fullScreenOnly: true,
+        closeOnEnter: true,
+        onExitFullScreen,
+      });
+      await waitFor(() =>
+        expect(screen.getByTestId('fullscreen-modal')).toBeInTheDocument(),
+      );
+
+      pressEnterInText();
+
+      await waitFor(() => expect(onExitFullScreen).toHaveBeenCalled());
+    });
+
+    it('does not close on Shift+Enter', async () => {
+      renderWithProps({
+        fullScreenOnly: true,
+        closeOnEnter: true,
+        onExitFullScreen,
+      });
+      await waitFor(() =>
+        expect(screen.getByTestId('fullscreen-modal')).toBeInTheDocument(),
+      );
+
+      pressEnterInText({ shiftKey: true });
+
+      await nextRender();
+      expect(onExitFullScreen).not.toHaveBeenCalled();
+    });
+
+    it('does not close on Enter without closeOnEnter', async () => {
+      renderWithProps({ fullScreenOnly: true, onExitFullScreen });
+      await waitFor(() =>
+        expect(screen.getByTestId('fullscreen-modal')).toBeInTheDocument(),
+      );
+
+      pressEnterInText();
+
+      await nextRender();
+      expect(onExitFullScreen).not.toHaveBeenCalled();
+    });
+  });
+
   describe('fullscreen mode', () => {
     it('should open fullscreen modal when toggle button is clicked', async () => {
       renderWithProps({

package/src/__tests__/components/text/form-short-text.spec.tsx

@@ -61,6 +61,33 @@ describe('FormShortText field', () => {
     expect(await driver.tk.getCharCountLeft()).toBe(7);
   });
 
+  it.each([undefined, null])(
+    'shows the full character allowance when the initial value is %p',
+    async (initialValue) => {
+      const driver = new FormFieldDriver({
+        Component: FormShortText,
+        UniDriverFactory: FormShortTextDriver,
+        dataHook: (f) => `short-text-field-${f.id}`,
+        field: makeField({
+          validation: { required: true, stringLengthRange: { maxLength: 10 } },
+        }),
+        initialValue: initialValue as unknown as string,
+      });
+      driver.render();
+
+      expect(await driver.tk.getValue()).toBe('');
+      expect(await driver.tk.getCharCountLeft()).toBe(10);
+
+      await driver.tk.enterText('abc');
+
+      expect(await driver.tk.getCharCountLeft()).toBe(7);
+
+      await driver.tk.enterText('');
+
+      expect(await driver.tk.getCharCountLeft()).toBe(10);
+    },
+  );
+
   it('marks the field as required when validation.required is true', async () => {
     const driver = setup({
       field: makeField({ validation: { required: true } }),

package/src/__tests__/form-field.driver.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { act, fireEvent, render, RenderResult } from '@testing-library/react';
 import Chance from 'chance';
 import { useForm } from '@wix/bex-core/form';
-import type { Control, FieldValues } from '@wix/bex-core/form';
+import type { Control, FieldValues, UseFormReturn } from '@wix/bex-core/form';
 import type { Field } from '@wix/bex-core';
 import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
 import type { BaseUniDriver } from '@wix/wix-ui-test-utils/base-driver';
@@ -12,7 +12,6 @@ import { PatternsFieldsTestProvider } from '../testkit/patterns-fields-test-prov
 import type { BaseInputProps } from '../types/base-input';
 
 const chance = new Chance();
-const noop = () => {};
 const SUBMIT_HOOK = 'form-field-driver-submit';
 
 type UniDriverFactory<U> = (
@@ -31,9 +30,11 @@ export interface FormFieldDriverOptions<U extends BaseUniDriver, T> {
 
 export class FormFieldDriver<U extends BaseUniDriver, T> {
   private _renderResult?: RenderResult;
+  private form?: UseFormReturn<FieldValues>;
   readonly field: Field;
   readonly initialValue: T;
   readonly onChange = jest.fn<void, [T]>();
+  readonly onSubmit = jest.fn<void, [FieldValues]>();
   private readonly opts: FormFieldDriverOptions<U, T>;
   private readonly _dataHook: string;
 
@@ -67,6 +68,24 @@ export class FormFieldDriver<U extends BaseUniDriver, T> {
     });
   }
 
+  async reset(value: T): Promise<void> {
+    await act(async () => {
+      this.form!.reset({ [this.field.id]: value });
+    });
+  }
+
+  async setValue(value: T, name = this.field.id): Promise<void> {
+    await act(async () => {
+      this.form!.setValue(name, value, { shouldValidate: true });
+    });
+  }
+
+  async unregister(name: string): Promise<void> {
+    await act(async () => {
+      this.form!.unregister(name);
+    });
+  }
+
   render() {
     const { Component } = this.opts;
     const { field, initialValue, _dataHook: dataHook, onChange } = this;
@@ -74,6 +93,10 @@ export class FormFieldDriver<U extends BaseUniDriver, T> {
       <TestForm
         field={field}
         initialValue={initialValue}
+        onSubmit={this.onSubmit}
+        onFormReady={(form) => {
+          this.form = form;
+        }}
         renderField={(control) => (
           <Component
             field={field}
@@ -93,20 +116,25 @@ export class FormFieldDriver<U extends BaseUniDriver, T> {
 interface TestFormProps<T> {
   field: Field;
   initialValue: T;
+  onSubmit: (values: FieldValues) => void;
+  onFormReady: (form: UseFormReturn<FieldValues>) => void;
   renderField: (control: Control<FieldValues>) => React.ReactElement;
 }
 
 const TestForm = <T,>({
   field,
   initialValue,
+  onSubmit,
+  onFormReady,
   renderField,
 }: TestFormProps<T>) => {
   const methods = useForm<FieldValues>({
     mode: 'onChange',
     defaultValues: { [field.id]: initialValue },
   });
+  onFormReady(methods);
   return (
-    <form onSubmit={methods.handleSubmit(noop)}>
+    <form onSubmit={methods.handleSubmit(onSubmit)}>
       {renderField(methods.control)}
       <button type="submit" data-hook={SUBMIT_HOOK} />
     </form>

package/src/__tests__/hooks/use-field-value-replacement.spec.tsx

@@ -0,0 +1,68 @@
+import '../../testkit/test-polyfills';
+
+import React, { useMemo } from 'react';
+import { render } from '@testing-library/react';
+import { useForm } from '@wix/bex-core/form';
+import type { Control } from '@wix/bex-core/form';
+
+import { FormDateInput } from '../../components/date-input/form-date-input';
+import { FormDateTime } from '../../components/datetime-input/form-date-time';
+import { useFieldValueReplacement } from '../../components/date-input/use-field-value-replacement';
+import { PatternsFieldsTestProvider } from '../../testkit/patterns-fields-test-provider';
+import { makeField } from '../form-field.driver';
+
+describe('useFieldValueReplacement compatibility', () => {
+  it.each([
+    ['Date', FormDateInput, 'DATE'],
+    ['DateTime', FormDateTime, 'DATETIME'],
+  ] as const)(
+    'renders %s without exposed subjects',
+    (_name, Component, type) => {
+      const field = makeField({ type });
+      const Example = () => {
+        const form = useForm();
+        const control = useMemo(() => {
+          const { _subjects, ...rest } = form.control;
+          return rest as Control;
+        }, [form.control]);
+        return (
+          <Component
+            field={field}
+            value={null}
+            onChange={() => {}}
+            data={{}}
+            formControl={control}
+          />
+        );
+      };
+
+      const result = render(<Example />, {
+        wrapper: PatternsFieldsTestProvider,
+      });
+
+      expect(result.getByText(field.displayName)).toBeTruthy();
+      result.unmount();
+    },
+  );
+
+  it.each([
+    undefined,
+    {},
+    { state: {}, array: {} },
+    { state: { subscribe: jest.fn() } },
+    { array: { subscribe: jest.fn() } },
+  ])('skips cleanup for an unsupported subject shape: %p', (subjects) => {
+    const onReplace = jest.fn();
+    const control = { _subjects: subjects } as unknown as Control;
+    const Example = () => {
+      const revision = useFieldValueReplacement(control, 'date', onReplace);
+      return <span>{revision}</span>;
+    };
+
+    const result = render(<Example />);
+
+    expect(result.getByText('0')).toBeTruthy();
+    expect(onReplace).not.toHaveBeenCalled();
+    result.unmount();
+  });
+});

package/src/__tests__/utils/keyboard.spec.ts

@@ -0,0 +1,45 @@
+import { isEnterInEditableText } from '../../utils/keyboard';
+
+const press = (target: HTMLElement, init: KeyboardEventInit = {}) => {
+  let result: boolean | undefined;
+  target.addEventListener('keydown', (e) => {
+    result = isEnterInEditableText(e);
+  });
+  target.dispatchEvent(
+    new KeyboardEvent('keydown', { key: 'Enter', bubbles: true, ...init }),
+  );
+  return result;
+};
+
+describe('isEnterInEditableText', () => {
+  const editable = () => {
+    const outer = document.createElement('div');
+    outer.setAttribute('contenteditable', 'true');
+    const inner = document.createElement('span');
+    outer.appendChild(inner);
+    document.body.appendChild(outer);
+    return inner;
+  };
+
+  it('is true for Enter inside editable text', () => {
+    expect(press(editable())).toBe(true);
+  });
+
+  it('is false for Shift+Enter', () => {
+    expect(press(editable(), { shiftKey: true })).toBe(false);
+  });
+
+  it('is false while composing (IME)', () => {
+    expect(press(editable(), { isComposing: true })).toBe(false);
+  });
+
+  it('is false outside editable text (e.g. a toolbar input)', () => {
+    const input = document.createElement('input');
+    document.body.appendChild(input);
+    expect(press(input)).toBe(false);
+  });
+
+  it('is false for other keys', () => {
+    expect(press(editable(), { key: 'a' })).toBe(false);
+  });
+});

package/src/components/address/input/address-input.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "addressinput1753982187";
+var _namespace_ = "addressinput840205872";
 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":"addressinput1753982187__root","tableAddressInput":"addressinput1753982187__tableAddressInput"};
+export var classes = {"root":"addressinput840205872__root","tableAddressInput":"addressinput840205872__tableAddressInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/audio/actions/actions-menu/actions-menu.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "actionsmenu132710167";
+var _namespace_ = "actionsmenu994746356";
 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":"actionsmenu132710167__root","action":"actionsmenu132710167__action"};
+export var classes = {"root":"actionsmenu994746356__root","action":"actionsmenu994746356__action"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/audio/audio-field/form-audio-field.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "formaudiofield2070924690";
+var _namespace_ = "formaudiofield1744934343";
 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":"formaudiofield2070924690__root","addItem":"formaudiofield2070924690__addItem","mediaTitle":"formaudiofield2070924690__mediaTitle"};
+export var classes = {"root":"formaudiofield1744934343__root","addItem":"formaudiofield1744934343__addItem","mediaTitle":"formaudiofield1744934343__mediaTitle"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/audio/audio-player/audio-player.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "audioplayer3409967597";
+var _namespace_ = "audioplayer2787508242";
 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":"audioplayer3409967597__root"};
+export var classes = {"root":"audioplayer2787508242__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/boolean/cell-checkbox.tsx

@@ -1,4 +1,9 @@
-import React, { useCallback } from 'react';
+import React, {
+  forwardRef,
+  useCallback,
+  useImperativeHandle,
+  useRef,
+} from 'react';
 import type { CheckboxProps } from '@wix/design-system';
 import { Checkbox } from '@wix/design-system';
 
@@ -8,20 +13,37 @@ export interface CellCheckboxProps
   onChange?(checked: boolean): void;
 }
 
+export interface CellCheckboxHandle {
+  focus(): void;
+}
+
 /**
  * Cell-layer Checkbox — fires onChange on toggle. Thin wrapper around
  * WDS Checkbox with cell-friendly prop types (boolean instead of event).
  */
-export const CellCheckbox: React.FC<CellCheckboxProps> = ({
-  checked,
-  onChange,
-  ...props
-}) => {
-  const handleChange = useCallback(() => {
-    onChange?.(!checked);
-  }, [checked, onChange]);
+export const CellCheckbox = forwardRef<CellCheckboxHandle, CellCheckboxProps>(
+  ({ checked, onChange, ...props }, ref) => {
+    // WDS types this ref as an element, but it resolves to the Checkbox,
+    // whose focus() focuses the input and shows the keyboard focus ring.
+    const checkboxRef = useRef<HTMLDivElement>(null);
+
+    useImperativeHandle(ref, () => ({
+      focus: () => checkboxRef.current?.focus(),
+    }));
+
+    const handleChange = useCallback(() => {
+      onChange?.(!checked);
+    }, [checked, onChange]);
 
-  return <Checkbox {...props} checked={checked} onChange={handleChange} />;
-};
+    return (
+      <Checkbox
+        {...props}
+        ref={checkboxRef}
+        checked={checked}
+        onChange={handleChange}
+      />
+    );
+  },
+);
 
 CellCheckbox.displayName = 'CellCheckbox';

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "cellcolorview3646440040";
+var _namespace_ = "cellcolorview1285518022";
 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":"cellcolorview3646440040__root","hashPrefix":"cellcolorview3646440040__hashPrefix"};
+export var classes = {"root":"cellcolorview1285518022__root","hashPrefix":"cellcolorview1285518022__hashPrefix"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "colorview1258591125";
+var _namespace_ = "colorview1355180041";
 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":"colorview1258591125__root","view":"colorview1258591125__view","fillPreview":"colorview1258591125__fillPreview"};
+export var classes = {"root":"colorview1355180041__root","view":"colorview1355180041__view","fillPreview":"colorview1355180041__fillPreview"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};