@wix/patterns-fields 1.74.0 → 1.75.0

package/dist/types/components/text/form-short-text-input.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { ControlledInputProps } from '../../types/controlled-input';
+export interface FormShortTextOption {
+    id: string;
+    value: string;
+}
+export interface FormShortTextInputProps extends ControlledInputProps<string> {
+    options?: FormShortTextOption[];
+    required?: boolean;
+    placeholder?: string;
+    emptyStateMessage?: string;
+    inputRef?: React.Ref<HTMLInputElement>;
+}
+export declare const FormShortTextInput: React.FC<FormShortTextInputProps>;
+//# sourceMappingURL=form-short-text-input.d.ts.map

package/dist/types/components/text/form-short-text-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-short-text-input.d.ts","sourceRoot":"","sources":["../../../../src/components/text/form-short-text-input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAQ9D,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,8BAA8B,CAAC;AAEzE,MAAM,WAAW,mBAAmB;IAClC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,uBAAwB,SAAQ,oBAAoB,CAAC,MAAM,CAAC;IAC3E,OAAO,CAAC,EAAE,mBAAmB,EAAE,CAAC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;CACxC;AAED,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CA+FhE,CAAC"}

package/dist/types/components/text/form-short-text.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"form-short-text.d.ts","sourceRoot":"","sources":["../../../../src/components/text/form-short-text.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAa9D,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAIxD,MAAM,WAAW,kBAAmB,SAAQ,cAAc,CAAC,MAAM,CAAC;CAAG;AAsKrE,eAAO,MAAM,aAAa,WAjKK,kBAAkB;;CAiKI,CAAC"}
+{"version":3,"file":"form-short-text.d.ts","sourceRoot":"","sources":["../../../../src/components/text/form-short-text.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAKxD,MAAM,WAAW,kBAAmB,SAAQ,cAAc,CAAC,MAAM,CAAC;CAAG;AAoFrE,eAAO,MAAM,aAAa,WA/EK,kBAAkB;;CA+EI,CAAC"}

package/dist/types/components/text/form-short-text.driver.d.ts

@@ -3,6 +3,7 @@ import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
 export declare function FormShortTextDriver(base: UniDriver, body: UniDriver, field: Field): {
     getLabel: () => Promise<string>;
     getValue: () => Promise<string>;
+    getPlaceholder: () => Promise<string | null>;
     enterText: (value: string) => Promise<void>;
     selectOption: (id: string) => Promise<void>;
     blur: () => Promise<void>;

package/dist/types/components/text/form-short-text.driver.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"form-short-text.driver.d.ts","sourceRoot":"","sources":["../../../../src/components/text/form-short-text.driver.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,SAAS,EAAE,MAAM,kCAAkC,CAAC;AAS7D,wBAAgB,mBAAmB,CACjC,IAAI,EAAE,SAAS,EACf,IAAI,EAAE,SAAS,EACf,KAAK,EAAE,KAAK;;;uBAkBe,MAAM;uBAIZ,MAAM;;;;;;;;;;;;;;;;EAgB5B"}
+{"version":3,"file":"form-short-text.driver.d.ts","sourceRoot":"","sources":["../../../../src/components/text/form-short-text.driver.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,SAAS,EAAE,MAAM,kCAAkC,CAAC;AAS7D,wBAAgB,mBAAmB,CACjC,IAAI,EAAE,SAAS,EACf,IAAI,EAAE,SAAS,EACf,KAAK,EAAE,KAAK;;;;uBAsBe,MAAM;uBAIZ,MAAM;;;;;;;;;;;;;;;;EAgB5B"}

package/dist/types/components/text/index.d.ts

@@ -3,4 +3,5 @@ export * from './cell-text-input';
 export * from './cell-autocomplete-input';
 export * from './form-long-text';
 export * from './form-short-text';
+export * from './form-short-text-input';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/components/text/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/text/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC;AAClC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/text/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC;AAClC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC;AAClC,cAAc,yBAAyB,CAAC"}

package/dist/types/components/url/form-url-input.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { ControlledInputProps } from '../../types/controlled-input';
+export interface FormUrlInputProps extends ControlledInputProps<string> {
+    inputRef?: React.Ref<HTMLInputElement>;
+    placeholder?: string;
+}
+export declare const FormUrlInput: React.FC<FormUrlInputProps>;
+//# sourceMappingURL=form-url-input.d.ts.map

package/dist/types/components/url/form-url-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-url-input.d.ts","sourceRoot":"","sources":["../../../../src/components/url/form-url-input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,8BAA8B,CAAC;AAEzE,MAAM,WAAW,iBAAkB,SAAQ,oBAAoB,CAAC,MAAM,CAAC;IACrE,QAAQ,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IACvC,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA4BpD,CAAC"}

package/dist/types/components/url/form-url.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"form-url.d.ts","sourceRoot":"","sources":["../../../../src/components/url/form-url.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAIxD,MAAM,WAAW,YAAa,SAAQ,cAAc,CAAC,MAAM,CAAC;CAAG;AA+C/D,eAAO,MAAM,OAAO,WA7CK,YAAY;;CA6CI,CAAC"}
+{"version":3,"file":"form-url.d.ts","sourceRoot":"","sources":["../../../../src/components/url/form-url.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAKxD,MAAM,WAAW,YAAa,SAAQ,cAAc,CAAC,MAAM,CAAC;CAAG;AA2C/D,eAAO,MAAM,OAAO,WAzCK,YAAY;;CAyCI,CAAC"}

package/dist/types/components/url/index.d.ts

@@ -1,4 +1,5 @@
 export * from './url-view';
 export * from './cell-url-input';
 export * from './form-url';
+export * from './form-url-input';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/components/url/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/url/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC;AACjC,cAAc,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/url/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC;AACjC,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC"}

package/dist/types/exports/unidriver.d.ts

@@ -1,3 +1,4 @@
 export { FormMediaGalleryFieldUniDriver } from '../components/media-gallery/form-media-gallery-field.uni.driver';
 export { ColorViewUniDriver } from '../components/color-view/color-view.uni.driver';
+export { ControlledInputUniDriver } from '../components/controlled-input.driver';
 //# sourceMappingURL=unidriver.d.ts.map

package/dist/types/exports/unidriver.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"unidriver.d.ts","sourceRoot":"","sources":["../../../src/exports/unidriver.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,8BAA8B,EAAE,MAAM,iEAAiE,CAAC;AACjH,OAAO,EAAE,kBAAkB,EAAE,MAAM,gDAAgD,CAAC"}
+{"version":3,"file":"unidriver.d.ts","sourceRoot":"","sources":["../../../src/exports/unidriver.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,8BAA8B,EAAE,MAAM,iEAAiE,CAAC;AACjH,OAAO,EAAE,kBAAkB,EAAE,MAAM,gDAAgD,CAAC;AACpF,OAAO,EAAE,wBAAwB,EAAE,MAAM,uCAAuC,CAAC"}

package/dist/types/types/controlled-input.d.ts

@@ -0,0 +1,10 @@
+export interface ControlledInputProps<T> {
+    data: T;
+    onChange(data: T): void;
+    onBlur?(): void;
+    readOnly?: boolean;
+    autoFocus?: boolean;
+    invalid?: boolean;
+    dataHook?: string;
+}
+//# sourceMappingURL=controlled-input.d.ts.map

package/dist/types/types/controlled-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"controlled-input.d.ts","sourceRoot":"","sources":["../../../src/types/controlled-input.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,oBAAoB,CAAC,CAAC;IACrC,IAAI,EAAE,CAAC,CAAC;IACR,QAAQ,CAAC,IAAI,EAAE,CAAC,GAAG,IAAI,CAAC;IACxB,MAAM,CAAC,IAAI,IAAI,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/patterns-fields",
-  "version": "1.74.0",
+  "version": "1.75.0",
   "license": "UNLICENSED",
   "author": {
     "name": "Kobi",
@@ -124,7 +124,7 @@
     "@wix/atlas": "^1.0.35",
     "@wix/data": "^1.0.323",
     "@wix/media": "^1.0.231",
-    "@wix/patterns-fields-utils": "1.55.0",
+    "@wix/patterns-fields-utils": "1.56.0",
     "@wix/rich-content": "1.0.37",
     "@wix/sdk": "^1.17.2",
     "@wix/wix-ui-icons-common": "^3.189.0",
@@ -152,7 +152,7 @@
     "@types/lodash": "^4.17.20",
     "@types/react": "^16.14.68",
     "@wix/babel-cli": "^1.11.0",
-    "@wix/bex-core": "2.352.0",
+    "@wix/bex-core": "2.353.0",
     "@wix/design-system": "^1.314.0",
     "@wix/eslint-config-yoshi": "^6.74.0",
     "@wix/jest-yoshi-preset": "^6.74.0",
@@ -212,5 +212,5 @@
       "optional": true
     }
   },
-  "falconPackageHash": "1b0e528bfa32d926d9c296bc86a0aa81ec1be9d1e396f82fd1c6cc78"
+  "falconPackageHash": "a470dba86733802e67d7445900642d5dc5fa498fe8b22f01694beacf"
 }

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

@@ -44,6 +44,12 @@ describe('FormShortText field', () => {
     expect(await driver.tk.getValue()).toBe('typed');
   });
 
+  it('does not show a selection placeholder without specific values', async () => {
+    const driver = setup();
+
+    expect(await driver.tk.getPlaceholder()).toBeNull();
+  });
+
   it('shows charCount left when maxLength is set', async () => {
     const driver = setup({
       field: makeField({
@@ -118,6 +124,18 @@ describe('FormShortText field', () => {
     expect(await driver.tk.getValue()).toBe('Value 1');
   });
 
+  it('shows the selection placeholder for specific values', async () => {
+    const driver = setup({
+      field: makeField({
+        validation: { required: false, specificValues },
+      }),
+    });
+
+    expect(await driver.tk.getPlaceholder()).toBe(
+      'auto-patterns.fields.select_placeholder',
+    );
+  });
+
   it('selects a specific value by id', async () => {
     const driver = setup({
       field: makeField({

package/src/__tests__/exports/controlled-inputs.spec.tsx

@@ -0,0 +1,138 @@
+import '../../testkit/test-polyfills';
+
+import React from 'react';
+import { render } from '@testing-library/react';
+import { uniTestkitFactoryCreator } from '@wix/wix-ui-test-utils/testing-library';
+
+import { FormCheckboxInput } from '../../components/boolean';
+import { ControlledInputUniDriver } from '../../components/controlled-input.driver';
+import { FormNumberInput } from '../../components/number-input';
+import { FormShortTextInput } from '../../components/text';
+import { FormUrlInput } from '../../components/url';
+
+const controlledInputTestkitFactory = uniTestkitFactoryCreator(
+  ControlledInputUniDriver,
+);
+
+const getInput = (container: HTMLElement, dataHook: string) =>
+  controlledInputTestkitFactory({ wrapper: container, dataHook });
+
+describe('controlled inputs', () => {
+  it('follows checkbox prop changes and reports user edits', async () => {
+    const onChange = jest.fn();
+    const { container, rerender } = render(
+      <FormCheckboxInput
+        data={false}
+        onChange={onChange}
+        dataHook="checkbox"
+        label="Default value"
+      />,
+    );
+    const input = getInput(container, 'checkbox').checkbox;
+
+    expect(await input.isChecked()).toBe(false);
+    expect(await input.getLabel()).toBe('Default value');
+    rerender(
+      <FormCheckboxInput
+        data
+        onChange={onChange}
+        dataHook="checkbox"
+        label="Default value"
+      />,
+    );
+    expect(await input.isChecked()).toBe(true);
+
+    await input.click();
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenCalledWith(false);
+  });
+
+  it('follows number prop changes and reports user edits', async () => {
+    const onChange = jest.fn();
+    const { container, rerender } = render(
+      <FormNumberInput data={1} onChange={onChange} dataHook="number" />,
+    );
+    const input = getInput(container, 'number').number;
+
+    expect(await input.getValue()).toBe('1');
+    rerender(
+      <FormNumberInput data={2} onChange={onChange} dataHook="number" />,
+    );
+    expect(await input.getValue()).toBe('2');
+
+    await input.enterText('3');
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenCalledWith(3);
+  });
+
+  it('follows text prop changes and reports user edits', async () => {
+    const onChange = jest.fn();
+    const { container, rerender } = render(
+      <FormShortTextInput data="before" onChange={onChange} dataHook="text" />,
+    );
+    const input = getInput(container, 'text').text;
+
+    expect(await input.getValue()).toBe('before');
+    rerender(
+      <FormShortTextInput data="after" onChange={onChange} dataHook="text" />,
+    );
+    expect(await input.getValue()).toBe('after');
+
+    await input.enterText('typed');
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenCalledWith('typed');
+  });
+
+  it('forwards the placeholder to a plain text input', async () => {
+    const { container } = render(
+      <FormShortTextInput
+        data=""
+        onChange={jest.fn()}
+        placeholder="Enter a value"
+        dataHook="text-placeholder"
+      />,
+    );
+    const input = getInput(container, 'text-placeholder').text;
+
+    expect(await input.getPlaceholder()).toBe('Enter a value');
+  });
+
+  it('reports URL edits and blur without normalizing the value', async () => {
+    const onChange = jest.fn();
+    const onBlur = jest.fn();
+    const { container } = render(
+      <FormUrlInput
+        data=""
+        onChange={onChange}
+        onBlur={onBlur}
+        dataHook="url"
+      />,
+    );
+    const input = getInput(container, 'url').text;
+
+    await input.enterText('example.com');
+    await input.blur();
+
+    expect(onChange).toHaveBeenCalledWith('example.com');
+    expect(onBlur).toHaveBeenCalledTimes(1);
+  });
+
+  it('uses option IDs as controlled specific values', async () => {
+    const onChange = jest.fn();
+    const { container } = render(
+      <FormShortTextInput
+        data="first"
+        onChange={onChange}
+        options={[
+          { id: 'first', value: 'First' },
+          { id: 'second', value: 'Second' },
+        ]}
+        dataHook="specific-value"
+      />,
+    );
+
+    const input = getInput(container, 'specific-value').autocomplete;
+
+    expect(await input.inputDriver.getValue()).toBe('First');
+  });
+});

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "addressinput517975534";
+var _namespace_ = "addressinput1353092921";
 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":"addressinput517975534__root","tableAddressInput":"addressinput517975534__tableAddressInput"};
+export var classes = {"root":"addressinput1353092921__root","tableAddressInput":"addressinput1353092921__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_ = "actionsmenu425944360";
+var _namespace_ = "actionsmenu1132414098";
 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":"actionsmenu425944360__root","action":"actionsmenu425944360__action"};
+export var classes = {"root":"actionsmenu1132414098__root","action":"actionsmenu1132414098__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_ = "formaudiofield4018066963";
+var _namespace_ = "formaudiofield4212276772";
 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":"formaudiofield4018066963__root","addItem":"formaudiofield4018066963__addItem","mediaTitle":"formaudiofield4018066963__mediaTitle"};
+export var classes = {"root":"formaudiofield4212276772__root","addItem":"formaudiofield4212276772__addItem","mediaTitle":"formaudiofield4212276772__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_ = "audioplayer1561698613";
+var _namespace_ = "audioplayer1170338736";
 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":"audioplayer1561698613__root"};
+export var classes = {"root":"audioplayer1170338736__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/boolean/form-checkbox-input.tsx

@@ -0,0 +1,40 @@
+import React, { useRef } from 'react';
+import { Checkbox } from '@wix/design-system';
+
+import { useAutoFocus } from '../../hooks';
+import type { ControlledInputProps } from '../../types/controlled-input';
+
+export interface FormCheckboxInputProps extends ControlledInputProps<boolean> {
+  label: React.ReactNode;
+}
+
+export const FormCheckboxInput: React.FC<FormCheckboxInputProps> = ({
+  data,
+  onChange,
+  onBlur,
+  readOnly,
+  autoFocus,
+  invalid,
+  dataHook,
+  label,
+}) => {
+  const rootRef = useRef<HTMLDivElement>(null);
+
+  useAutoFocus(rootRef, Boolean(autoFocus));
+
+  return (
+    <Checkbox
+      ref={rootRef}
+      checked={data}
+      disabled={readOnly}
+      hasError={invalid}
+      onChange={(event) => onChange(event.target.checked)}
+      onBlur={onBlur}
+      dataHook={dataHook}
+    >
+      {label}
+    </Checkbox>
+  );
+};
+
+FormCheckboxInput.displayName = 'FormCheckboxInput';

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

@@ -1,9 +1,9 @@
 import React from 'react';
-import { Checkbox } from '@wix/design-system';
 import { observer } from 'mobx-react-lite';
 import { useController } from '@wix/bex-core/form';
 
 import { BaseInputProps } from '../../types/base-input';
+import { FormCheckboxInput } from './form-checkbox-input';
 
 export interface FormCheckboxProps extends BaseInputProps<boolean> {}
 
@@ -17,14 +17,13 @@ const _FormCheckbox = (props: FormCheckboxProps) => {
   });
 
   return (
-    <Checkbox
-      checked={!!controller.field.value}
-      onChange={(e) => controller.field.onChange(e.target.checked)}
+    <FormCheckboxInput
+      data={!!controller.field.value}
+      onChange={controller.field.onChange}
       onBlur={controller.field.onBlur}
       dataHook={dataHook ?? `checkbox-${field.id}`}
-    >
-      {field.displayName}
-    </Checkbox>
+      label={field.displayName}
+    />
   );
 };
 

package/src/components/boolean/index.ts

@@ -1,3 +1,4 @@
 export * from './boolean-view';
 export * from './cell-checkbox';
 export * from './form-checkbox';
+export * from './form-checkbox-input';

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_ = "cellcolorview1736640766";
+var _namespace_ = "cellcolorview1008266217";
 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":"cellcolorview1736640766__root","hashPrefix":"cellcolorview1736640766__hashPrefix"};
+export var classes = {"root":"cellcolorview1008266217__root","hashPrefix":"cellcolorview1008266217__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_ = "colorview3482796446";
+var _namespace_ = "colorview3520103020";
 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":"colorview3482796446__root","view":"colorview3482796446__view","fillPreview":"colorview3482796446__fillPreview"};
+export var classes = {"root":"colorview3520103020__root","view":"colorview3520103020__view","fillPreview":"colorview3520103020__fillPreview"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/controlled-input.driver.ts

@@ -0,0 +1,19 @@
+import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
+import {
+  AutoCompleteUniDriver,
+  CheckboxUniDriver,
+  InputUniDriver,
+  NumberInputUniDriver,
+} from '@wix/design-system/dist/testkit/unidriver';
+
+import { baseUniDriverFactory } from '../testkit/base-driver';
+
+export function ControlledInputUniDriver(base: UniDriver, body: UniDriver) {
+  return {
+    ...baseUniDriverFactory(base),
+    checkbox: CheckboxUniDriver(base, body),
+    number: NumberInputUniDriver(base, body),
+    text: InputUniDriver(base, body),
+    autocomplete: AutoCompleteUniDriver(base, body),
+  };
+}

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "deletedialog1207540592";
+var _namespace_ = "deletedialog3550580931";
 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":"deletedialog1207540592__root","layout":"deletedialog1207540592__layout"};
+export var classes = {"root":"deletedialog3550580931__root","layout":"deletedialog3550580931__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_ = "formdocumentfield2347234029";
+var _namespace_ = "formdocumentfield2224721629";
 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":"formdocumentfield2347234029__root","viewWrapper":"formdocumentfield2347234029__viewWrapper","textWidth":"formdocumentfield2347234029__textWidth","documentLoader":"formdocumentfield2347234029__documentLoader","addDocument":"formdocumentfield2347234029__addDocument","addItemWrapper":"formdocumentfield2347234029__addItemWrapper"};
+export var classes = {"root":"formdocumentfield2224721629__root","viewWrapper":"formdocumentfield2224721629__viewWrapper","textWidth":"formdocumentfield2224721629__textWidth","documentLoader":"formdocumentfield2224721629__documentLoader","addDocument":"formdocumentfield2224721629__addDocument","addItemWrapper":"formdocumentfield2224721629__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_ = "exclamation1187432506";
+var _namespace_ = "exclamation2784991636";
 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":"exclamation1187432506__root","exclamation":"exclamation1187432506__exclamation","actions":"exclamation1187432506__actions","action":"exclamation1187432506__action"};
+export var classes = {"root":"exclamation2784991636__root","exclamation":"exclamation2784991636__exclamation","actions":"exclamation2784991636__actions","action":"exclamation2784991636__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_ = "highlightedtext3214489151";
+var _namespace_ = "highlightedtext3503248983";
 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":"highlightedtext3214489151__root","substring":"highlightedtext3214489151__substring"};
-export var keyframes = {"highlighted":"highlightedtext3214489151__highlighted","highlighted-match":"highlightedtext3214489151__highlighted-match"}; 
+export var classes = {"root":"highlightedtext3503248983__root","substring":"highlightedtext3503248983__substring"};
+export var keyframes = {"highlighted":"highlightedtext3503248983__highlighted","highlighted-match":"highlightedtext3503248983__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_ = "thumbnailreplaceoverlay1382391847";
+var _namespace_ = "thumbnailreplaceoverlay394833446";
 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":"thumbnailreplaceoverlay1382391847__root","icon":"thumbnailreplaceoverlay1382391847__icon"};
+export var classes = {"root":"thumbnailreplaceoverlay394833446__root","icon":"thumbnailreplaceoverlay394833446__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_ = "cellmediaeditshell84193258";
+var _namespace_ = "cellmediaeditshell2637278711";
 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":"cellmediaeditshell84193258__root"};
+export var classes = {"root":"cellmediaeditshell2637278711__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};