@wix/patterns-fields 1.73.0 → 1.75.0

package/dist/cjs/components/address/form-address.js

@@ -10,6 +10,7 @@ var _react2 = require("@wix/bex-core/react");
 var _form = require("@wix/bex-core/form");
 var _value = require("../../validations/value");
 var _formAddressInput = require("./input/form-address-input");
+var _hooks = require("../../hooks");
 var _jsxFileName = "/home/builduser/work/843658b9f44192f0/packages/fields/dist/cjs/components/address/form-address.tsx";
 const _FormAddress = props => {
   var _field$validation2, _controller$fieldStat;
@@ -36,6 +37,7 @@ const _FormAddress = props => {
       }
     }
   });
+  const setFieldRef = (0, _hooks.useFieldRef)(controller.field.ref);
   return /*#__PURE__*/_react.default.createElement(_designSystem.FormField, {
     label: field.displayName,
     required: (_field$validation2 = field.validation) == null ? void 0 : _field$validation2.required,
@@ -45,7 +47,7 @@ const _FormAddress = props => {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 35,
+      lineNumber: 38,
       columnNumber: 5
     }
   }, /*#__PURE__*/_react.default.createElement(_formAddressInput.FormAddressInput, {
@@ -55,13 +57,13 @@ const _FormAddress = props => {
     // Hand the input to react-hook-form so shouldFocusError scrolls to +
     // focuses this field when it blocks save.
     ,
-    inputRef: controller.field.ref,
+    inputRef: setFieldRef,
     dataHook: `address-${field.id}`,
     field: field.id,
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 42,
+      lineNumber: 45,
       columnNumber: 7
     }
   }));

package/dist/cjs/components/address/form-address.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_designSystem","_mobxReactLite","_react2","_form","_value","_formAddressInput","_jsxFileName","_FormAddress","props","_field$validation2","_controller$fieldStat","field","dataHook","formControl","data","translate","pt","useWixPatternsContainer","controller","useController","name","id","control","defaultValue","rules","validate","value","_field$validation","validation","required","isEmpty","default","createElement","FormField","label","displayName","status","fieldState","error","undefined","statusMessage","message","__self","__source","fileName","lineNumber","columnNumber","FormAddressInput","autoFocus","onChange","inputRef","ref","FormAddress","exports","observer"],"sources":["../../../../src/components/address/form-address.tsx"],"sourcesContent":["import React from 'react';\nimport { FormField } from '@wix/design-system';\nimport { observer } from 'mobx-react-lite';\nimport { useWixPatternsContainer } from '@wix/bex-core/react';\nimport { useController } from '@wix/bex-core/form';\n\nimport { BaseInputProps } from '../../types/base-input';\nimport type { Address } from '../../types/address';\nimport { isEmpty } from '../../validations/value';\n\nimport { FormAddressInput } from './input/form-address-input';\n\nexport interface FormAddressProps extends BaseInputProps<Address> {}\n\nconst _FormAddress = (props: FormAddressProps) => {\n  const { field, dataHook, formControl, data } = props;\n\n  const { translate: pt } = useWixPatternsContainer();\n\n  const controller = useController({\n    name: field.id,\n    control: formControl,\n    defaultValue: data?.[field.id],\n    rules: {\n      validate: (value) => {\n        if (field.validation?.required && isEmpty(value)) {\n          return pt('cairo.fieldValidation.requiredField');\n        }\n        return true;\n      },\n    },\n  });\n\n  return (\n    <FormField\n      label={field.displayName}\n      required={field.validation?.required}\n      status={controller.fieldState.error ? 'error' : undefined}\n      statusMessage={controller.fieldState.error?.message}\n      dataHook={dataHook}\n    >\n      <FormAddressInput\n        autoFocus={false}\n        data={controller.field.value}\n        onChange={(value) => controller.field.onChange?.(value)}\n        // Hand the input to react-hook-form so shouldFocusError scrolls to +\n        // focuses this field when it blocks save.\n        inputRef={controller.field.ref}\n        dataHook={`address-${field.id}`}\n        field={field.id}\n      />\n    </FormField>\n  );\n};\n\nexport const FormAddress = observer(_FormAddress);\n"],"mappings":";;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,aAAA,GAAAD,OAAA;AACA,IAAAE,cAAA,GAAAF,OAAA;AACA,IAAAG,OAAA,GAAAH,OAAA;AACA,IAAAI,KAAA,GAAAJ,OAAA;AAIA,IAAAK,MAAA,GAAAL,OAAA;AAEA,IAAAM,iBAAA,GAAAN,OAAA;AAA8D,IAAAO,YAAA;AAI9D,MAAMC,YAAY,GAAIC,KAAuB,IAAK;EAAA,IAAAC,kBAAA,EAAAC,qBAAA;EAChD,MAAM;IAAEC,KAAK;IAAEC,QAAQ;IAAEC,WAAW;IAAEC;EAAK,CAAC,GAAGN,KAAK;EAEpD,MAAM;IAAEO,SAAS,EAAEC;EAAG,CAAC,GAAG,IAAAC,+BAAuB,EAAC,CAAC;EAEnD,MAAMC,UAAU,GAAG,IAAAC,mBAAa,EAAC;IAC/BC,IAAI,EAAET,KAAK,CAACU,EAAE;IACdC,OAAO,EAAET,WAAW;IACpBU,YAAY,EAAET,IAAI,oBAAJA,IAAI,CAAGH,KAAK,CAACU,EAAE,CAAC;IAC9BG,KAAK,EAAE;MACLC,QAAQ,EAAGC,KAAK,IAAK;QAAA,IAAAC,iBAAA;QACnB,IAAI,CAAAA,iBAAA,GAAAhB,KAAK,CAACiB,UAAU,aAAhBD,iBAAA,CAAkBE,QAAQ,IAAI,IAAAC,cAAO,EAACJ,KAAK,CAAC,EAAE;UAChD,OAAOV,EAAE,CAAC,qCAAqC,CAAC;QAClD;QACA,OAAO,IAAI;MACb;IACF;EACF,CAAC,CAAC;EAEF,oBACEnB,MAAA,CAAAkC,OAAA,CAAAC,aAAA,CAAChC,aAAA,CAAAiC,SAAS;IACRC,KAAK,EAAEvB,KAAK,CAACwB,WAAY;IACzBN,QAAQ,GAAApB,kBAAA,GAAEE,KAAK,CAACiB,UAAU,qBAAhBnB,kBAAA,CAAkBoB,QAAS;IACrCO,MAAM,EAAElB,UAAU,CAACmB,UAAU,CAACC,KAAK,GAAG,OAAO,GAAGC,SAAU;IAC1DC,aAAa,GAAA9B,qBAAA,GAAEQ,UAAU,CAACmB,UAAU,CAACC,KAAK,qBAA3B5B,qBAAA,CAA6B+B,OAAQ;IACpD7B,QAAQ,EAAEA,QAAS;IAAA8B,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAtC,YAAA;MAAAuC,UAAA;MAAAC,YAAA;IAAA;EAAA,gBAEnBjD,MAAA,CAAAkC,OAAA,CAAAC,aAAA,CAAC3B,iBAAA,CAAA0C,gBAAgB;IACfC,SAAS,EAAE,KAAM;IACjBlC,IAAI,EAAEI,UAAU,CAACP,KAAK,CAACe,KAAM;IAC7BuB,QAAQ,EAAGvB,KAAK,IAAKR,UAAU,CAACP,KAAK,CAACsC,QAAQ,oBAAzB/B,UAAU,CAACP,KAAK,CAACsC,QAAQ,CAAGvB,KAAK;IACtD;IACA;IAAA;IACAwB,QAAQ,EAAEhC,UAAU,CAACP,KAAK,CAACwC,GAAI;IAC/BvC,QAAQ,EAAE,WAAWD,KAAK,CAACU,EAAE,EAAG;IAChCV,KAAK,EAAEA,KAAK,CAACU,EAAG;IAAAqB,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAtC,YAAA;MAAAuC,UAAA;MAAAC,YAAA;IAAA;EAAA,CACjB,CACQ,CAAC;AAEhB,CAAC;AAEM,MAAMM,WAAW,GAAAC,OAAA,CAAAD,WAAA,GAAG,IAAAE,uBAAQ,EAAC/C,YAAY,CAAC","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireDefault","require","_designSystem","_mobxReactLite","_react2","_form","_value","_formAddressInput","_hooks","_jsxFileName","_FormAddress","props","_field$validation2","_controller$fieldStat","field","dataHook","formControl","data","translate","pt","useWixPatternsContainer","controller","useController","name","id","control","defaultValue","rules","validate","value","_field$validation","validation","required","isEmpty","setFieldRef","useFieldRef","ref","default","createElement","FormField","label","displayName","status","fieldState","error","undefined","statusMessage","message","__self","__source","fileName","lineNumber","columnNumber","FormAddressInput","autoFocus","onChange","inputRef","FormAddress","exports","observer"],"sources":["../../../../src/components/address/form-address.tsx"],"sourcesContent":["import React from 'react';\nimport { FormField } from '@wix/design-system';\nimport { observer } from 'mobx-react-lite';\nimport { useWixPatternsContainer } from '@wix/bex-core/react';\nimport { useController } from '@wix/bex-core/form';\n\nimport { BaseInputProps } from '../../types/base-input';\nimport type { Address } from '../../types/address';\nimport { isEmpty } from '../../validations/value';\n\nimport { FormAddressInput } from './input/form-address-input';\nimport { useFieldRef } from '../../hooks';\n\nexport interface FormAddressProps extends BaseInputProps<Address> {}\n\nconst _FormAddress = (props: FormAddressProps) => {\n  const { field, dataHook, formControl, data } = props;\n\n  const { translate: pt } = useWixPatternsContainer();\n\n  const controller = useController({\n    name: field.id,\n    control: formControl,\n    defaultValue: data?.[field.id],\n    rules: {\n      validate: (value) => {\n        if (field.validation?.required && isEmpty(value)) {\n          return pt('cairo.fieldValidation.requiredField');\n        }\n        return true;\n      },\n    },\n  });\n\n  const setFieldRef = useFieldRef(controller.field.ref);\n\n  return (\n    <FormField\n      label={field.displayName}\n      required={field.validation?.required}\n      status={controller.fieldState.error ? 'error' : undefined}\n      statusMessage={controller.fieldState.error?.message}\n      dataHook={dataHook}\n    >\n      <FormAddressInput\n        autoFocus={false}\n        data={controller.field.value}\n        onChange={(value) => controller.field.onChange?.(value)}\n        // Hand the input to react-hook-form so shouldFocusError scrolls to +\n        // focuses this field when it blocks save.\n        inputRef={setFieldRef}\n        dataHook={`address-${field.id}`}\n        field={field.id}\n      />\n    </FormField>\n  );\n};\n\nexport const FormAddress = observer(_FormAddress);\n"],"mappings":";;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,aAAA,GAAAD,OAAA;AACA,IAAAE,cAAA,GAAAF,OAAA;AACA,IAAAG,OAAA,GAAAH,OAAA;AACA,IAAAI,KAAA,GAAAJ,OAAA;AAIA,IAAAK,MAAA,GAAAL,OAAA;AAEA,IAAAM,iBAAA,GAAAN,OAAA;AACA,IAAAO,MAAA,GAAAP,OAAA;AAA0C,IAAAQ,YAAA;AAI1C,MAAMC,YAAY,GAAIC,KAAuB,IAAK;EAAA,IAAAC,kBAAA,EAAAC,qBAAA;EAChD,MAAM;IAAEC,KAAK;IAAEC,QAAQ;IAAEC,WAAW;IAAEC;EAAK,CAAC,GAAGN,KAAK;EAEpD,MAAM;IAAEO,SAAS,EAAEC;EAAG,CAAC,GAAG,IAAAC,+BAAuB,EAAC,CAAC;EAEnD,MAAMC,UAAU,GAAG,IAAAC,mBAAa,EAAC;IAC/BC,IAAI,EAAET,KAAK,CAACU,EAAE;IACdC,OAAO,EAAET,WAAW;IACpBU,YAAY,EAAET,IAAI,oBAAJA,IAAI,CAAGH,KAAK,CAACU,EAAE,CAAC;IAC9BG,KAAK,EAAE;MACLC,QAAQ,EAAGC,KAAK,IAAK;QAAA,IAAAC,iBAAA;QACnB,IAAI,CAAAA,iBAAA,GAAAhB,KAAK,CAACiB,UAAU,aAAhBD,iBAAA,CAAkBE,QAAQ,IAAI,IAAAC,cAAO,EAACJ,KAAK,CAAC,EAAE;UAChD,OAAOV,EAAE,CAAC,qCAAqC,CAAC;QAClD;QACA,OAAO,IAAI;MACb;IACF;EACF,CAAC,CAAC;EAEF,MAAMe,WAAW,GAAG,IAAAC,kBAAW,EAACd,UAAU,CAACP,KAAK,CAACsB,GAAG,CAAC;EAErD,oBACErC,MAAA,CAAAsC,OAAA,CAAAC,aAAA,CAACpC,aAAA,CAAAqC,SAAS;IACRC,KAAK,EAAE1B,KAAK,CAAC2B,WAAY;IACzBT,QAAQ,GAAApB,kBAAA,GAAEE,KAAK,CAACiB,UAAU,qBAAhBnB,kBAAA,CAAkBoB,QAAS;IACrCU,MAAM,EAAErB,UAAU,CAACsB,UAAU,CAACC,KAAK,GAAG,OAAO,GAAGC,SAAU;IAC1DC,aAAa,GAAAjC,qBAAA,GAAEQ,UAAU,CAACsB,UAAU,CAACC,KAAK,qBAA3B/B,qBAAA,CAA6BkC,OAAQ;IACpDhC,QAAQ,EAAEA,QAAS;IAAAiC,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAzC,YAAA;MAAA0C,UAAA;MAAAC,YAAA;IAAA;EAAA,gBAEnBrD,MAAA,CAAAsC,OAAA,CAAAC,aAAA,CAAC/B,iBAAA,CAAA8C,gBAAgB;IACfC,SAAS,EAAE,KAAM;IACjBrC,IAAI,EAAEI,UAAU,CAACP,KAAK,CAACe,KAAM;IAC7B0B,QAAQ,EAAG1B,KAAK,IAAKR,UAAU,CAACP,KAAK,CAACyC,QAAQ,oBAAzBlC,UAAU,CAACP,KAAK,CAACyC,QAAQ,CAAG1B,KAAK;IACtD;IACA;IAAA;IACA2B,QAAQ,EAAEtB,WAAY;IACtBnB,QAAQ,EAAE,WAAWD,KAAK,CAACU,EAAE,EAAG;IAChCV,KAAK,EAAEA,KAAK,CAACU,EAAG;IAAAwB,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAzC,YAAA;MAAA0C,UAAA;MAAAC,YAAA;IAAA;EAAA,CACjB,CACQ,CAAC;AAEhB,CAAC;AAEM,MAAMK,WAAW,GAAAC,OAAA,CAAAD,WAAA,GAAG,IAAAE,uBAAQ,EAACjD,YAAY,CAAC","ignoreList":[]}

package/dist/cjs/components/address/input/address-input.st.css.js

@@ -5,15 +5,15 @@ exports.vars = exports.style = exports.stVars = exports.st = exports.namespace =
 var _stylableEsmRuntime = require("../../../stylable-esm-runtime.js");
 // @ts-nocheck
 
-var _namespace_ = "addressinput249613619";
+var _namespace_ = "addressinput1353092921";
 var _style_ = _stylableEsmRuntime.classesRuntime.bind(null, _namespace_);
 var cssStates = exports.cssStates = _stylableEsmRuntime.statesRuntime.bind(null, _namespace_);
 var style = exports.style = _style_;
 var st = exports.st = _style_;
 var namespace = exports.namespace = _namespace_;
 var classes = exports.classes = {
-  "root": "addressinput249613619__root",
-  "tableAddressInput": "addressinput249613619__tableAddressInput"
+  "root": "addressinput1353092921__root",
+  "tableAddressInput": "addressinput1353092921__tableAddressInput"
 };
 var keyframes = exports.keyframes = {};
 var layers = exports.layers = {};

package/dist/cjs/components/address/input/address-input.st.css.js.map

@@ -1 +1 @@
-{"version":3,"names":["_stylableEsmRuntime","require","_namespace_","_style_","classesRuntime","bind","cssStates","exports","statesRuntime","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../../src/components/address/input/address-input.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"addressinput249613619\";\nvar _style_ = classesRuntime.bind(null, _namespace_);\n\nexport var cssStates = statesRuntime.bind(null, _namespace_);\nexport var style: import(\"@stylable/runtime\").STFunction = _style_;\nexport var st: import(\"@stylable/runtime\").STFunction = _style_;\n\nexport var namespace = _namespace_;\nexport var classes = {\"root\":\"addressinput249613619__root\",\"tableAddressInput\":\"addressinput249613619__tableAddressInput\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,uBAAuB;AACzC,IAAIC,OAAO,GAAGC,kCAAc,CAACC,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AAE7C,IAAII,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAGE,iCAAa,CAACH,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AACrD,IAAIO,KAA6C,GAAAF,OAAA,CAAAE,KAAA,GAAGN,OAAO;AAC3D,IAAIO,EAA0C,GAAAH,OAAA,CAAAG,EAAA,GAAGP,OAAO;AAExD,IAAIQ,SAAS,GAAAJ,OAAA,CAAAI,SAAA,GAAGT,WAAW;AAC3B,IAAIU,OAAO,GAAAL,OAAA,CAAAK,OAAA,GAAG;EAAC,MAAM,EAAC,6BAA6B;EAAC,mBAAmB,EAAC;AAA0C,CAAC;AACnH,IAAIC,SAAS,GAAAN,OAAA,CAAAM,SAAA,GAAG,CAAC,CAAC;AAClB,IAAIC,MAAM,GAAAP,OAAA,CAAAO,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,UAAU,GAAAR,OAAA,CAAAQ,UAAA,GAAG,CAAC,CAAC;AACnB,IAAIC,MAAM,GAAAT,OAAA,CAAAS,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,IAAI,GAAAV,OAAA,CAAAU,IAAA,GAAG,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["_stylableEsmRuntime","require","_namespace_","_style_","classesRuntime","bind","cssStates","exports","statesRuntime","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../../src/components/address/input/address-input.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"addressinput1353092921\";\nvar _style_ = classesRuntime.bind(null, _namespace_);\n\nexport var cssStates = statesRuntime.bind(null, _namespace_);\nexport var style: import(\"@stylable/runtime\").STFunction = _style_;\nexport var st: import(\"@stylable/runtime\").STFunction = _style_;\n\nexport var namespace = _namespace_;\nexport var classes = {\"root\":\"addressinput1353092921__root\",\"tableAddressInput\":\"addressinput1353092921__tableAddressInput\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,wBAAwB;AAC1C,IAAIC,OAAO,GAAGC,kCAAc,CAACC,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AAE7C,IAAII,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAGE,iCAAa,CAACH,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AACrD,IAAIO,KAA6C,GAAAF,OAAA,CAAAE,KAAA,GAAGN,OAAO;AAC3D,IAAIO,EAA0C,GAAAH,OAAA,CAAAG,EAAA,GAAGP,OAAO;AAExD,IAAIQ,SAAS,GAAAJ,OAAA,CAAAI,SAAA,GAAGT,WAAW;AAC3B,IAAIU,OAAO,GAAAL,OAAA,CAAAK,OAAA,GAAG;EAAC,MAAM,EAAC,8BAA8B;EAAC,mBAAmB,EAAC;AAA2C,CAAC;AACrH,IAAIC,SAAS,GAAAN,OAAA,CAAAM,SAAA,GAAG,CAAC,CAAC;AAClB,IAAIC,MAAM,GAAAP,OAAA,CAAAO,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,UAAU,GAAAR,OAAA,CAAAQ,UAAA,GAAG,CAAC,CAAC;AACnB,IAAIC,MAAM,GAAAT,OAAA,CAAAS,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,IAAI,GAAAV,OAAA,CAAAU,IAAA,GAAG,CAAC,CAAC","ignoreList":[]}

package/dist/cjs/components/audio/actions/actions-menu/actions-menu.st.css.js

@@ -5,15 +5,15 @@ exports.vars = exports.style = exports.stVars = exports.st = exports.namespace =
 var _stylableEsmRuntime = require("../../../../stylable-esm-runtime.js");
 // @ts-nocheck
 
-var _namespace_ = "actionsmenu101643419";
+var _namespace_ = "actionsmenu1132414098";
 var _style_ = _stylableEsmRuntime.classesRuntime.bind(null, _namespace_);
 var cssStates = exports.cssStates = _stylableEsmRuntime.statesRuntime.bind(null, _namespace_);
 var style = exports.style = _style_;
 var st = exports.st = _style_;
 var namespace = exports.namespace = _namespace_;
 var classes = exports.classes = {
-  "root": "actionsmenu101643419__root",
-  "action": "actionsmenu101643419__action"
+  "root": "actionsmenu1132414098__root",
+  "action": "actionsmenu1132414098__action"
 };
 var keyframes = exports.keyframes = {};
 var layers = exports.layers = {};

package/dist/cjs/components/audio/actions/actions-menu/actions-menu.st.css.js.map

@@ -1 +1 @@
-{"version":3,"names":["_stylableEsmRuntime","require","_namespace_","_style_","classesRuntime","bind","cssStates","exports","statesRuntime","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../../../src/components/audio/actions/actions-menu/actions-menu.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"actionsmenu101643419\";\nvar _style_ = classesRuntime.bind(null, _namespace_);\n\nexport var cssStates = statesRuntime.bind(null, _namespace_);\nexport var style: import(\"@stylable/runtime\").STFunction = _style_;\nexport var st: import(\"@stylable/runtime\").STFunction = _style_;\n\nexport var namespace = _namespace_;\nexport var classes = {\"root\":\"actionsmenu101643419__root\",\"action\":\"actionsmenu101643419__action\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {\"wds-space-100\":\"--wds-space-100\"}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,sBAAsB;AACxC,IAAIC,OAAO,GAAGC,kCAAc,CAACC,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AAE7C,IAAII,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAGE,iCAAa,CAACH,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AACrD,IAAIO,KAA6C,GAAAF,OAAA,CAAAE,KAAA,GAAGN,OAAO;AAC3D,IAAIO,EAA0C,GAAAH,OAAA,CAAAG,EAAA,GAAGP,OAAO;AAExD,IAAIQ,SAAS,GAAAJ,OAAA,CAAAI,SAAA,GAAGT,WAAW;AAC3B,IAAIU,OAAO,GAAAL,OAAA,CAAAK,OAAA,GAAG;EAAC,MAAM,EAAC,4BAA4B;EAAC,QAAQ,EAAC;AAA8B,CAAC;AAC3F,IAAIC,SAAS,GAAAN,OAAA,CAAAM,SAAA,GAAG,CAAC,CAAC;AAClB,IAAIC,MAAM,GAAAP,OAAA,CAAAO,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,UAAU,GAAAR,OAAA,CAAAQ,UAAA,GAAG,CAAC,CAAC;AACnB,IAAIC,MAAM,GAAAT,OAAA,CAAAS,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,IAAI,GAAAV,OAAA,CAAAU,IAAA,GAAG;EAAC,eAAe,EAAC;AAAiB,CAAC","ignoreList":[]}
+{"version":3,"names":["_stylableEsmRuntime","require","_namespace_","_style_","classesRuntime","bind","cssStates","exports","statesRuntime","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../../../src/components/audio/actions/actions-menu/actions-menu.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"actionsmenu1132414098\";\nvar _style_ = classesRuntime.bind(null, _namespace_);\n\nexport var cssStates = statesRuntime.bind(null, _namespace_);\nexport var style: import(\"@stylable/runtime\").STFunction = _style_;\nexport var st: import(\"@stylable/runtime\").STFunction = _style_;\n\nexport var namespace = _namespace_;\nexport var classes = {\"root\":\"actionsmenu1132414098__root\",\"action\":\"actionsmenu1132414098__action\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {\"wds-space-100\":\"--wds-space-100\"}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,uBAAuB;AACzC,IAAIC,OAAO,GAAGC,kCAAc,CAACC,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AAE7C,IAAII,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAGE,iCAAa,CAACH,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AACrD,IAAIO,KAA6C,GAAAF,OAAA,CAAAE,KAAA,GAAGN,OAAO;AAC3D,IAAIO,EAA0C,GAAAH,OAAA,CAAAG,EAAA,GAAGP,OAAO;AAExD,IAAIQ,SAAS,GAAAJ,OAAA,CAAAI,SAAA,GAAGT,WAAW;AAC3B,IAAIU,OAAO,GAAAL,OAAA,CAAAK,OAAA,GAAG;EAAC,MAAM,EAAC,6BAA6B;EAAC,QAAQ,EAAC;AAA+B,CAAC;AAC7F,IAAIC,SAAS,GAAAN,OAAA,CAAAM,SAAA,GAAG,CAAC,CAAC;AAClB,IAAIC,MAAM,GAAAP,OAAA,CAAAO,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,UAAU,GAAAR,OAAA,CAAAQ,UAAA,GAAG,CAAC,CAAC;AACnB,IAAIC,MAAM,GAAAT,OAAA,CAAAS,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,IAAI,GAAAV,OAAA,CAAAU,IAAA,GAAG;EAAC,eAAe,EAAC;AAAiB,CAAC","ignoreList":[]}

package/dist/cjs/components/audio/audio-field/form-audio-field.st.css.js

@@ -5,16 +5,16 @@ exports.vars = exports.style = exports.stVars = exports.st = exports.namespace =
 var _stylableEsmRuntime = require("../../../stylable-esm-runtime.js");
 // @ts-nocheck
 
-var _namespace_ = "formaudiofield606935778";
+var _namespace_ = "formaudiofield4212276772";
 var _style_ = _stylableEsmRuntime.classesRuntime.bind(null, _namespace_);
 var cssStates = exports.cssStates = _stylableEsmRuntime.statesRuntime.bind(null, _namespace_);
 var style = exports.style = _style_;
 var st = exports.st = _style_;
 var namespace = exports.namespace = _namespace_;
 var classes = exports.classes = {
-  "root": "formaudiofield606935778__root",
-  "addItem": "formaudiofield606935778__addItem",
-  "mediaTitle": "formaudiofield606935778__mediaTitle"
+  "root": "formaudiofield4212276772__root",
+  "addItem": "formaudiofield4212276772__addItem",
+  "mediaTitle": "formaudiofield4212276772__mediaTitle"
 };
 var keyframes = exports.keyframes = {};
 var layers = exports.layers = {};

package/dist/cjs/components/audio/audio-field/form-audio-field.st.css.js.map

@@ -1 +1 @@
-{"version":3,"names":["_stylableEsmRuntime","require","_namespace_","_style_","classesRuntime","bind","cssStates","exports","statesRuntime","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../../src/components/audio/audio-field/form-audio-field.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"formaudiofield606935778\";\nvar _style_ = classesRuntime.bind(null, _namespace_);\n\nexport var cssStates = statesRuntime.bind(null, _namespace_);\nexport var style: import(\"@stylable/runtime\").STFunction = _style_;\nexport var st: import(\"@stylable/runtime\").STFunction = _style_;\n\nexport var namespace = _namespace_;\nexport var classes = {\"root\":\"formaudiofield606935778__root\",\"addItem\":\"formaudiofield606935778__addItem\",\"mediaTitle\":\"formaudiofield606935778__mediaTitle\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {\"wds-color-red-100\":\"--wds-color-red-100\",\"wds-color-blue-300\":\"--wds-color-blue-300\",\"wds-border-radius-400\":\"--wds-border-radius-400\",\"wds-input-shadow-focus-standard\":\"--wds-input-shadow-focus-standard\",\"wsr-color-R10\":\"--wsr-color-R10\",\"wsr-color-B30\":\"--wsr-color-B30\"}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,yBAAyB;AAC3C,IAAIC,OAAO,GAAGC,kCAAc,CAACC,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AAE7C,IAAII,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAGE,iCAAa,CAACH,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AACrD,IAAIO,KAA6C,GAAAF,OAAA,CAAAE,KAAA,GAAGN,OAAO;AAC3D,IAAIO,EAA0C,GAAAH,OAAA,CAAAG,EAAA,GAAGP,OAAO;AAExD,IAAIQ,SAAS,GAAAJ,OAAA,CAAAI,SAAA,GAAGT,WAAW;AAC3B,IAAIU,OAAO,GAAAL,OAAA,CAAAK,OAAA,GAAG;EAAC,MAAM,EAAC,+BAA+B;EAAC,SAAS,EAAC,kCAAkC;EAAC,YAAY,EAAC;AAAqC,CAAC;AACtJ,IAAIC,SAAS,GAAAN,OAAA,CAAAM,SAAA,GAAG,CAAC,CAAC;AAClB,IAAIC,MAAM,GAAAP,OAAA,CAAAO,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,UAAU,GAAAR,OAAA,CAAAQ,UAAA,GAAG,CAAC,CAAC;AACnB,IAAIC,MAAM,GAAAT,OAAA,CAAAS,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,IAAI,GAAAV,OAAA,CAAAU,IAAA,GAAG;EAAC,mBAAmB,EAAC,qBAAqB;EAAC,oBAAoB,EAAC,sBAAsB;EAAC,uBAAuB,EAAC,yBAAyB;EAAC,iCAAiC,EAAC,mCAAmC;EAAC,eAAe,EAAC,iBAAiB;EAAC,eAAe,EAAC;AAAiB,CAAC","ignoreList":[]}
+{"version":3,"names":["_stylableEsmRuntime","require","_namespace_","_style_","classesRuntime","bind","cssStates","exports","statesRuntime","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../../src/components/audio/audio-field/form-audio-field.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"formaudiofield4212276772\";\nvar _style_ = classesRuntime.bind(null, _namespace_);\n\nexport var cssStates = statesRuntime.bind(null, _namespace_);\nexport var style: import(\"@stylable/runtime\").STFunction = _style_;\nexport var st: import(\"@stylable/runtime\").STFunction = _style_;\n\nexport var namespace = _namespace_;\nexport var classes = {\"root\":\"formaudiofield4212276772__root\",\"addItem\":\"formaudiofield4212276772__addItem\",\"mediaTitle\":\"formaudiofield4212276772__mediaTitle\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {\"wds-color-red-100\":\"--wds-color-red-100\",\"wds-color-blue-300\":\"--wds-color-blue-300\",\"wds-border-radius-400\":\"--wds-border-radius-400\",\"wds-input-shadow-focus-standard\":\"--wds-input-shadow-focus-standard\",\"wsr-color-R10\":\"--wsr-color-R10\",\"wsr-color-B30\":\"--wsr-color-B30\"}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,0BAA0B;AAC5C,IAAIC,OAAO,GAAGC,kCAAc,CAACC,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AAE7C,IAAII,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAGE,iCAAa,CAACH,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AACrD,IAAIO,KAA6C,GAAAF,OAAA,CAAAE,KAAA,GAAGN,OAAO;AAC3D,IAAIO,EAA0C,GAAAH,OAAA,CAAAG,EAAA,GAAGP,OAAO;AAExD,IAAIQ,SAAS,GAAAJ,OAAA,CAAAI,SAAA,GAAGT,WAAW;AAC3B,IAAIU,OAAO,GAAAL,OAAA,CAAAK,OAAA,GAAG;EAAC,MAAM,EAAC,gCAAgC;EAAC,SAAS,EAAC,mCAAmC;EAAC,YAAY,EAAC;AAAsC,CAAC;AACzJ,IAAIC,SAAS,GAAAN,OAAA,CAAAM,SAAA,GAAG,CAAC,CAAC;AAClB,IAAIC,MAAM,GAAAP,OAAA,CAAAO,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,UAAU,GAAAR,OAAA,CAAAQ,UAAA,GAAG,CAAC,CAAC;AACnB,IAAIC,MAAM,GAAAT,OAAA,CAAAS,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,IAAI,GAAAV,OAAA,CAAAU,IAAA,GAAG;EAAC,mBAAmB,EAAC,qBAAqB;EAAC,oBAAoB,EAAC,sBAAsB;EAAC,uBAAuB,EAAC,yBAAyB;EAAC,iCAAiC,EAAC,mCAAmC;EAAC,eAAe,EAAC,iBAAiB;EAAC,eAAe,EAAC;AAAiB,CAAC","ignoreList":[]}

package/dist/cjs/components/audio/audio-field/form-audio.js

@@ -10,6 +10,7 @@ var _react2 = require("@wix/bex-core/react");
 var _form = require("@wix/bex-core/form");
 var _string = require("../../../validations/string");
 var _formAudioField = require("./form-audio-field");
+var _hooks = require("../../../hooks");
 var _jsxFileName = "/home/builduser/work/843658b9f44192f0/packages/fields/dist/cjs/components/audio/audio-field/form-audio.tsx";
 const _FormAudio = props => {
   var _field$validation2, _controller$fieldStat;
@@ -36,6 +37,7 @@ const _FormAudio = props => {
       }
     }
   });
+  const setFieldRef = (0, _hooks.useFieldRef)(controller.field.ref);
   return /*#__PURE__*/_react.default.createElement(_designSystem.FormField, {
     label: field.displayName,
     required: (_field$validation2 = field.validation) == null ? void 0 : _field$validation2.required,
@@ -45,7 +47,7 @@ const _FormAudio = props => {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 34,
+      lineNumber: 37,
       columnNumber: 5
     }
   }, /*#__PURE__*/_react.default.createElement(_formAudioField.FormAudioField
@@ -53,7 +55,7 @@ const _FormAudio = props => {
   // shouldFocusError scrolls to + focuses this field when it
   // blocks save.
   , {
-    inputRef: controller.field.ref,
+    inputRef: setFieldRef,
     data: controller.field.value,
     onChange: value => controller.field.onChange(value),
     onClear: () => controller.field.onChange(null),
@@ -61,7 +63,7 @@ const _FormAudio = props => {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 41,
+      lineNumber: 44,
       columnNumber: 7
     }
   }));

package/dist/cjs/components/audio/audio-field/form-audio.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_designSystem","_mobxReactLite","_react2","_form","_string","_formAudioField","_jsxFileName","_FormAudio","props","_field$validation2","_controller$fieldStat","field","dataHook","formControl","data","translate","t","useWixPatternsContainer","controller","useController","name","id","control","defaultValue","rules","validate","value","_field$validation","validation","required","isEmpty","default","createElement","FormField","label","displayName","status","fieldState","error","undefined","statusMessage","message","__self","__source","fileName","lineNumber","columnNumber","FormAudioField","inputRef","ref","onChange","onClear","FormAudio","exports","observer"],"sources":["../../../../../src/components/audio/audio-field/form-audio.tsx"],"sourcesContent":["import React from 'react';\nimport { FormField } from '@wix/design-system';\nimport { observer } from 'mobx-react-lite';\nimport { useWixPatternsContainer } from '@wix/bex-core/react';\nimport { useController } from '@wix/bex-core/form';\n\nimport { BaseInputProps } from '../../../types/base-input';\nimport { isEmpty } from '../../../validations/string';\nimport { FormAudioField } from './form-audio-field';\n\nexport interface FormAudioProps extends BaseInputProps<string> {}\n\nconst _FormAudio = (props: FormAudioProps) => {\n  const { field, dataHook, formControl, data } = props;\n\n  const { translate: t } = useWixPatternsContainer();\n\n  const controller = useController({\n    name: field?.id ?? '',\n    control: formControl,\n    defaultValue: data?.[field?.id ?? ''],\n    rules: {\n      validate: (value) => {\n        if (field.validation?.required && isEmpty(value)) {\n          return t('cairo.fieldValidation.requiredField');\n        }\n\n        return true;\n      },\n    },\n  });\n\n  return (\n    <FormField\n      label={field.displayName}\n      required={field.validation?.required}\n      status={controller.fieldState.error ? 'error' : undefined}\n      statusMessage={controller.fieldState.error?.message}\n      dataHook={dataHook}\n    >\n      <FormAudioField\n        // Hand the add button to react-hook-form so\n        // shouldFocusError scrolls to + focuses this field when it\n        // blocks save.\n        inputRef={controller.field.ref}\n        data={controller.field.value}\n        onChange={(value) => controller.field.onChange(value)}\n        onClear={() => controller.field.onChange(null)}\n        dataHook={`audio-${field.id}`}\n      />\n    </FormField>\n  );\n};\n\nexport const FormAudio = observer(_FormAudio);\n"],"mappings":";;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,aAAA,GAAAD,OAAA;AACA,IAAAE,cAAA,GAAAF,OAAA;AACA,IAAAG,OAAA,GAAAH,OAAA;AACA,IAAAI,KAAA,GAAAJ,OAAA;AAGA,IAAAK,OAAA,GAAAL,OAAA;AACA,IAAAM,eAAA,GAAAN,OAAA;AAAoD,IAAAO,YAAA;AAIpD,MAAMC,UAAU,GAAIC,KAAqB,IAAK;EAAA,IAAAC,kBAAA,EAAAC,qBAAA;EAC5C,MAAM;IAAEC,KAAK;IAAEC,QAAQ;IAAEC,WAAW;IAAEC;EAAK,CAAC,GAAGN,KAAK;EAEpD,MAAM;IAAEO,SAAS,EAAEC;EAAE,CAAC,GAAG,IAAAC,+BAAuB,EAAC,CAAC;EAElD,MAAMC,UAAU,GAAG,IAAAC,mBAAa,EAAC;IAC/BC,IAAI,EAAE,CAAAT,KAAK,oBAALA,KAAK,CAAEU,EAAE,KAAI,EAAE;IACrBC,OAAO,EAAET,WAAW;IACpBU,YAAY,EAAET,IAAI,oBAAJA,IAAI,CAAG,CAAAH,KAAK,oBAALA,KAAK,CAAEU,EAAE,KAAI,EAAE,CAAC;IACrCG,KAAK,EAAE;MACLC,QAAQ,EAAGC,KAAK,IAAK;QAAA,IAAAC,iBAAA;QACnB,IAAI,CAAAA,iBAAA,GAAAhB,KAAK,CAACiB,UAAU,aAAhBD,iBAAA,CAAkBE,QAAQ,IAAI,IAAAC,eAAO,EAACJ,KAAK,CAAC,EAAE;UAChD,OAAOV,CAAC,CAAC,qCAAqC,CAAC;QACjD;QAEA,OAAO,IAAI;MACb;IACF;EACF,CAAC,CAAC;EAEF,oBACEnB,MAAA,CAAAkC,OAAA,CAAAC,aAAA,CAAChC,aAAA,CAAAiC,SAAS;IACRC,KAAK,EAAEvB,KAAK,CAACwB,WAAY;IACzBN,QAAQ,GAAApB,kBAAA,GAAEE,KAAK,CAACiB,UAAU,qBAAhBnB,kBAAA,CAAkBoB,QAAS;IACrCO,MAAM,EAAElB,UAAU,CAACmB,UAAU,CAACC,KAAK,GAAG,OAAO,GAAGC,SAAU;IAC1DC,aAAa,GAAA9B,qBAAA,GAAEQ,UAAU,CAACmB,UAAU,CAACC,KAAK,qBAA3B5B,qBAAA,CAA6B+B,OAAQ;IACpD7B,QAAQ,EAAEA,QAAS;IAAA8B,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAtC,YAAA;MAAAuC,UAAA;MAAAC,YAAA;IAAA;EAAA,gBAEnBjD,MAAA,CAAAkC,OAAA,CAAAC,aAAA,CAAC3B,eAAA,CAAA0C;EACC;EACA;EACA;EAAA;IACAC,QAAQ,EAAE9B,UAAU,CAACP,KAAK,CAACsC,GAAI;IAC/BnC,IAAI,EAAEI,UAAU,CAACP,KAAK,CAACe,KAAM;IAC7BwB,QAAQ,EAAGxB,KAAK,IAAKR,UAAU,CAACP,KAAK,CAACuC,QAAQ,CAACxB,KAAK,CAAE;IACtDyB,OAAO,EAAEA,CAAA,KAAMjC,UAAU,CAACP,KAAK,CAACuC,QAAQ,CAAC,IAAI,CAAE;IAC/CtC,QAAQ,EAAE,SAASD,KAAK,CAACU,EAAE,EAAG;IAAAqB,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAtC,YAAA;MAAAuC,UAAA;MAAAC,YAAA;IAAA;EAAA,CAC/B,CACQ,CAAC;AAEhB,CAAC;AAEM,MAAMM,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAG,IAAAE,uBAAQ,EAAC/C,UAAU,CAAC","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireDefault","require","_designSystem","_mobxReactLite","_react2","_form","_string","_formAudioField","_hooks","_jsxFileName","_FormAudio","props","_field$validation2","_controller$fieldStat","field","dataHook","formControl","data","translate","t","useWixPatternsContainer","controller","useController","name","id","control","defaultValue","rules","validate","value","_field$validation","validation","required","isEmpty","setFieldRef","useFieldRef","ref","default","createElement","FormField","label","displayName","status","fieldState","error","undefined","statusMessage","message","__self","__source","fileName","lineNumber","columnNumber","FormAudioField","inputRef","onChange","onClear","FormAudio","exports","observer"],"sources":["../../../../../src/components/audio/audio-field/form-audio.tsx"],"sourcesContent":["import React from 'react';\nimport { FormField } from '@wix/design-system';\nimport { observer } from 'mobx-react-lite';\nimport { useWixPatternsContainer } from '@wix/bex-core/react';\nimport { useController } from '@wix/bex-core/form';\n\nimport { BaseInputProps } from '../../../types/base-input';\nimport { isEmpty } from '../../../validations/string';\nimport { FormAudioField } from './form-audio-field';\nimport { useFieldRef } from '../../../hooks';\n\nexport interface FormAudioProps extends BaseInputProps<string> {}\n\nconst _FormAudio = (props: FormAudioProps) => {\n  const { field, dataHook, formControl, data } = props;\n\n  const { translate: t } = useWixPatternsContainer();\n\n  const controller = useController({\n    name: field?.id ?? '',\n    control: formControl,\n    defaultValue: data?.[field?.id ?? ''],\n    rules: {\n      validate: (value) => {\n        if (field.validation?.required && isEmpty(value)) {\n          return t('cairo.fieldValidation.requiredField');\n        }\n\n        return true;\n      },\n    },\n  });\n\n  const setFieldRef = useFieldRef(controller.field.ref);\n\n  return (\n    <FormField\n      label={field.displayName}\n      required={field.validation?.required}\n      status={controller.fieldState.error ? 'error' : undefined}\n      statusMessage={controller.fieldState.error?.message}\n      dataHook={dataHook}\n    >\n      <FormAudioField\n        // Hand the add button to react-hook-form so\n        // shouldFocusError scrolls to + focuses this field when it\n        // blocks save.\n        inputRef={setFieldRef}\n        data={controller.field.value}\n        onChange={(value) => controller.field.onChange(value)}\n        onClear={() => controller.field.onChange(null)}\n        dataHook={`audio-${field.id}`}\n      />\n    </FormField>\n  );\n};\n\nexport const FormAudio = observer(_FormAudio);\n"],"mappings":";;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,aAAA,GAAAD,OAAA;AACA,IAAAE,cAAA,GAAAF,OAAA;AACA,IAAAG,OAAA,GAAAH,OAAA;AACA,IAAAI,KAAA,GAAAJ,OAAA;AAGA,IAAAK,OAAA,GAAAL,OAAA;AACA,IAAAM,eAAA,GAAAN,OAAA;AACA,IAAAO,MAAA,GAAAP,OAAA;AAA6C,IAAAQ,YAAA;AAI7C,MAAMC,UAAU,GAAIC,KAAqB,IAAK;EAAA,IAAAC,kBAAA,EAAAC,qBAAA;EAC5C,MAAM;IAAEC,KAAK;IAAEC,QAAQ;IAAEC,WAAW;IAAEC;EAAK,CAAC,GAAGN,KAAK;EAEpD,MAAM;IAAEO,SAAS,EAAEC;EAAE,CAAC,GAAG,IAAAC,+BAAuB,EAAC,CAAC;EAElD,MAAMC,UAAU,GAAG,IAAAC,mBAAa,EAAC;IAC/BC,IAAI,EAAE,CAAAT,KAAK,oBAALA,KAAK,CAAEU,EAAE,KAAI,EAAE;IACrBC,OAAO,EAAET,WAAW;IACpBU,YAAY,EAAET,IAAI,oBAAJA,IAAI,CAAG,CAAAH,KAAK,oBAALA,KAAK,CAAEU,EAAE,KAAI,EAAE,CAAC;IACrCG,KAAK,EAAE;MACLC,QAAQ,EAAGC,KAAK,IAAK;QAAA,IAAAC,iBAAA;QACnB,IAAI,CAAAA,iBAAA,GAAAhB,KAAK,CAACiB,UAAU,aAAhBD,iBAAA,CAAkBE,QAAQ,IAAI,IAAAC,eAAO,EAACJ,KAAK,CAAC,EAAE;UAChD,OAAOV,CAAC,CAAC,qCAAqC,CAAC;QACjD;QAEA,OAAO,IAAI;MACb;IACF;EACF,CAAC,CAAC;EAEF,MAAMe,WAAW,GAAG,IAAAC,kBAAW,EAACd,UAAU,CAACP,KAAK,CAACsB,GAAG,CAAC;EAErD,oBACErC,MAAA,CAAAsC,OAAA,CAAAC,aAAA,CAACpC,aAAA,CAAAqC,SAAS;IACRC,KAAK,EAAE1B,KAAK,CAAC2B,WAAY;IACzBT,QAAQ,GAAApB,kBAAA,GAAEE,KAAK,CAACiB,UAAU,qBAAhBnB,kBAAA,CAAkBoB,QAAS;IACrCU,MAAM,EAAErB,UAAU,CAACsB,UAAU,CAACC,KAAK,GAAG,OAAO,GAAGC,SAAU;IAC1DC,aAAa,GAAAjC,qBAAA,GAAEQ,UAAU,CAACsB,UAAU,CAACC,KAAK,qBAA3B/B,qBAAA,CAA6BkC,OAAQ;IACpDhC,QAAQ,EAAEA,QAAS;IAAAiC,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAzC,YAAA;MAAA0C,UAAA;MAAAC,YAAA;IAAA;EAAA,gBAEnBrD,MAAA,CAAAsC,OAAA,CAAAC,aAAA,CAAC/B,eAAA,CAAA8C;EACC;EACA;EACA;EAAA;IACAC,QAAQ,EAAEpB,WAAY;IACtBjB,IAAI,EAAEI,UAAU,CAACP,KAAK,CAACe,KAAM;IAC7B0B,QAAQ,EAAG1B,KAAK,IAAKR,UAAU,CAACP,KAAK,CAACyC,QAAQ,CAAC1B,KAAK,CAAE;IACtD2B,OAAO,EAAEA,CAAA,KAAMnC,UAAU,CAACP,KAAK,CAACyC,QAAQ,CAAC,IAAI,CAAE;IAC/CxC,QAAQ,EAAE,SAASD,KAAK,CAACU,EAAE,EAAG;IAAAwB,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAzC,YAAA;MAAA0C,UAAA;MAAAC,YAAA;IAAA;EAAA,CAC/B,CACQ,CAAC;AAEhB,CAAC;AAEM,MAAMK,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAG,IAAAE,uBAAQ,EAACjD,UAAU,CAAC","ignoreList":[]}

package/dist/cjs/components/audio/audio-player/audio-player.st.css.js

@@ -5,14 +5,14 @@ exports.vars = exports.style = exports.stVars = exports.st = exports.namespace =
 var _stylableEsmRuntime = require("../../../stylable-esm-runtime.js");
 // @ts-nocheck
 
-var _namespace_ = "audioplayer2613344239";
+var _namespace_ = "audioplayer1170338736";
 var _style_ = _stylableEsmRuntime.classesRuntime.bind(null, _namespace_);
 var cssStates = exports.cssStates = _stylableEsmRuntime.statesRuntime.bind(null, _namespace_);
 var style = exports.style = _style_;
 var st = exports.st = _style_;
 var namespace = exports.namespace = _namespace_;
 var classes = exports.classes = {
-  "root": "audioplayer2613344239__root"
+  "root": "audioplayer1170338736__root"
 };
 var keyframes = exports.keyframes = {};
 var layers = exports.layers = {};

package/dist/cjs/components/audio/audio-player/audio-player.st.css.js.map

@@ -1 +1 @@
-{"version":3,"names":["_stylableEsmRuntime","require","_namespace_","_style_","classesRuntime","bind","cssStates","exports","statesRuntime","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../../src/components/audio/audio-player/audio-player.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"audioplayer2613344239\";\nvar _style_ = classesRuntime.bind(null, _namespace_);\n\nexport var cssStates = statesRuntime.bind(null, _namespace_);\nexport var style: import(\"@stylable/runtime\").STFunction = _style_;\nexport var st: import(\"@stylable/runtime\").STFunction = _style_;\n\nexport var namespace = _namespace_;\nexport var classes = {\"root\":\"audioplayer2613344239__root\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,uBAAuB;AACzC,IAAIC,OAAO,GAAGC,kCAAc,CAACC,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AAE7C,IAAII,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAGE,iCAAa,CAACH,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AACrD,IAAIO,KAA6C,GAAAF,OAAA,CAAAE,KAAA,GAAGN,OAAO;AAC3D,IAAIO,EAA0C,GAAAH,OAAA,CAAAG,EAAA,GAAGP,OAAO;AAExD,IAAIQ,SAAS,GAAAJ,OAAA,CAAAI,SAAA,GAAGT,WAAW;AAC3B,IAAIU,OAAO,GAAAL,OAAA,CAAAK,OAAA,GAAG;EAAC,MAAM,EAAC;AAA6B,CAAC;AACpD,IAAIC,SAAS,GAAAN,OAAA,CAAAM,SAAA,GAAG,CAAC,CAAC;AAClB,IAAIC,MAAM,GAAAP,OAAA,CAAAO,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,UAAU,GAAAR,OAAA,CAAAQ,UAAA,GAAG,CAAC,CAAC;AACnB,IAAIC,MAAM,GAAAT,OAAA,CAAAS,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,IAAI,GAAAV,OAAA,CAAAU,IAAA,GAAG,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["_stylableEsmRuntime","require","_namespace_","_style_","classesRuntime","bind","cssStates","exports","statesRuntime","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../../src/components/audio/audio-player/audio-player.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"audioplayer1170338736\";\nvar _style_ = classesRuntime.bind(null, _namespace_);\n\nexport var cssStates = statesRuntime.bind(null, _namespace_);\nexport var style: import(\"@stylable/runtime\").STFunction = _style_;\nexport var st: import(\"@stylable/runtime\").STFunction = _style_;\n\nexport var namespace = _namespace_;\nexport var classes = {\"root\":\"audioplayer1170338736__root\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,uBAAuB;AACzC,IAAIC,OAAO,GAAGC,kCAAc,CAACC,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AAE7C,IAAII,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAGE,iCAAa,CAACH,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AACrD,IAAIO,KAA6C,GAAAF,OAAA,CAAAE,KAAA,GAAGN,OAAO;AAC3D,IAAIO,EAA0C,GAAAH,OAAA,CAAAG,EAAA,GAAGP,OAAO;AAExD,IAAIQ,SAAS,GAAAJ,OAAA,CAAAI,SAAA,GAAGT,WAAW;AAC3B,IAAIU,OAAO,GAAAL,OAAA,CAAAK,OAAA,GAAG;EAAC,MAAM,EAAC;AAA6B,CAAC;AACpD,IAAIC,SAAS,GAAAN,OAAA,CAAAM,SAAA,GAAG,CAAC,CAAC;AAClB,IAAIC,MAAM,GAAAP,OAAA,CAAAO,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,UAAU,GAAAR,OAAA,CAAAQ,UAAA,GAAG,CAAC,CAAC;AACnB,IAAIC,MAAM,GAAAT,OAAA,CAAAS,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,IAAI,GAAAV,OAAA,CAAAU,IAAA,GAAG,CAAC,CAAC","ignoreList":[]}

package/dist/cjs/components/boolean/form-checkbox-input.js

@@ -0,0 +1,40 @@
+"use strict";
+
+exports.__esModule = true;
+exports.FormCheckboxInput = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _designSystem = require("@wix/design-system");
+var _hooks = require("../../hooks");
+var _jsxFileName = "/home/builduser/work/843658b9f44192f0/packages/fields/dist/cjs/components/boolean/form-checkbox-input.tsx";
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const FormCheckboxInput = ({
+  data,
+  onChange,
+  onBlur,
+  readOnly,
+  autoFocus,
+  invalid,
+  dataHook,
+  label
+}) => {
+  const rootRef = (0, _react.useRef)(null);
+  (0, _hooks.useAutoFocus)(rootRef, Boolean(autoFocus));
+  return /*#__PURE__*/_react.default.createElement(_designSystem.Checkbox, {
+    ref: rootRef,
+    checked: data,
+    disabled: readOnly,
+    hasError: invalid,
+    onChange: event => onChange(event.target.checked),
+    onBlur: onBlur,
+    dataHook: dataHook,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 26,
+      columnNumber: 5
+    }
+  }, label);
+};
+exports.FormCheckboxInput = FormCheckboxInput;
+FormCheckboxInput.displayName = 'FormCheckboxInput';
+//# sourceMappingURL=form-checkbox-input.js.map

package/dist/cjs/components/boolean/form-checkbox-input.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_designSystem","_hooks","_jsxFileName","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","FormCheckboxInput","data","onChange","onBlur","readOnly","autoFocus","invalid","dataHook","label","rootRef","useRef","useAutoFocus","Boolean","createElement","Checkbox","ref","checked","disabled","hasError","event","target","__self","__source","fileName","lineNumber","columnNumber","exports","displayName"],"sources":["../../../../src/components/boolean/form-checkbox-input.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport { Checkbox } from '@wix/design-system';\n\nimport { useAutoFocus } from '../../hooks';\nimport type { ControlledInputProps } from '../../types/controlled-input';\n\nexport interface FormCheckboxInputProps extends ControlledInputProps<boolean> {\n  label: React.ReactNode;\n}\n\nexport const FormCheckboxInput: React.FC<FormCheckboxInputProps> = ({\n  data,\n  onChange,\n  onBlur,\n  readOnly,\n  autoFocus,\n  invalid,\n  dataHook,\n  label,\n}) => {\n  const rootRef = useRef<HTMLDivElement>(null);\n\n  useAutoFocus(rootRef, Boolean(autoFocus));\n\n  return (\n    <Checkbox\n      ref={rootRef}\n      checked={data}\n      disabled={readOnly}\n      hasError={invalid}\n      onChange={(event) => onChange(event.target.checked)}\n      onBlur={onBlur}\n      dataHook={dataHook}\n    >\n      {label}\n    </Checkbox>\n  );\n};\n\nFormCheckboxInput.displayName = 'FormCheckboxInput';\n"],"mappings":";;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,aAAA,GAAAD,OAAA;AAEA,IAAAE,MAAA,GAAAF,OAAA;AAA2C,IAAAG,YAAA;AAAA,SAAAJ,wBAAAK,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAP,uBAAA,YAAAA,CAAAK,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAOpC,MAAMkB,iBAAmD,GAAGA,CAAC;EAClEC,IAAI;EACJC,QAAQ;EACRC,MAAM;EACNC,QAAQ;EACRC,SAAS;EACTC,OAAO;EACPC,QAAQ;EACRC;AACF,CAAC,KAAK;EACJ,MAAMC,OAAO,GAAG,IAAAC,aAAM,EAAiB,IAAI,CAAC;EAE5C,IAAAC,mBAAY,EAACF,OAAO,EAAEG,OAAO,CAACP,SAAS,CAAC,CAAC;EAEzC,oBACE9B,MAAA,CAAAgB,OAAA,CAAAsB,aAAA,CAACnC,aAAA,CAAAoC,QAAQ;IACPC,GAAG,EAAEN,OAAQ;IACbO,OAAO,EAAEf,IAAK;IACdgB,QAAQ,EAAEb,QAAS;IACnBc,QAAQ,EAAEZ,OAAQ;IAClBJ,QAAQ,EAAGiB,KAAK,IAAKjB,QAAQ,CAACiB,KAAK,CAACC,MAAM,CAACJ,OAAO,CAAE;IACpDb,MAAM,EAAEA,MAAO;IACfI,QAAQ,EAAEA,QAAS;IAAAc,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAA3C,YAAA;MAAA4C,UAAA;MAAAC,YAAA;IAAA;EAAA,GAElBjB,KACO,CAAC;AAEf,CAAC;AAACkB,OAAA,CAAA1B,iBAAA,GAAAA,iBAAA;AAEFA,iBAAiB,CAAC2B,WAAW,GAAG,mBAAmB","ignoreList":[]}

package/dist/cjs/components/boolean/form-checkbox.js

@@ -4,9 +4,9 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports.FormCheckbox = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _designSystem = require("@wix/design-system");
 var _mobxReactLite = require("mobx-react-lite");
 var _form = require("@wix/bex-core/form");
+var _formCheckboxInput = require("./form-checkbox-input");
 var _jsxFileName = "/home/builduser/work/843658b9f44192f0/packages/fields/dist/cjs/components/boolean/form-checkbox.tsx";
 const _FormCheckbox = props => {
   const {
@@ -20,18 +20,19 @@ const _FormCheckbox = props => {
     control: formControl,
     defaultValue: (data == null ? void 0 : data[field.id]) ?? false
   });
-  return /*#__PURE__*/_react.default.createElement(_designSystem.Checkbox, {
-    checked: !!controller.field.value,
-    onChange: e => controller.field.onChange(e.target.checked),
+  return /*#__PURE__*/_react.default.createElement(_formCheckboxInput.FormCheckboxInput, {
+    data: !!controller.field.value,
+    onChange: controller.field.onChange,
     onBlur: controller.field.onBlur,
     dataHook: dataHook ?? `checkbox-${field.id}`,
+    label: field.displayName,
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
       lineNumber: 20,
       columnNumber: 5
     }
-  }, field.displayName);
+  });
 };
 const FormCheckbox = exports.FormCheckbox = (0, _mobxReactLite.observer)(_FormCheckbox);
 //# sourceMappingURL=form-checkbox.js.map

package/dist/cjs/components/boolean/form-checkbox.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_designSystem","_mobxReactLite","_form","_jsxFileName","_FormCheckbox","props","field","dataHook","formControl","data","controller","useController","name","id","control","defaultValue","default","createElement","Checkbox","checked","value","onChange","e","target","onBlur","__self","__source","fileName","lineNumber","columnNumber","displayName","FormCheckbox","exports","observer"],"sources":["../../../../src/components/boolean/form-checkbox.tsx"],"sourcesContent":["import React from 'react';\nimport { Checkbox } from '@wix/design-system';\nimport { observer } from 'mobx-react-lite';\nimport { useController } from '@wix/bex-core/form';\n\nimport { BaseInputProps } from '../../types/base-input';\n\nexport interface FormCheckboxProps extends BaseInputProps<boolean> {}\n\nconst _FormCheckbox = (props: FormCheckboxProps) => {\n  const { field, dataHook, formControl, data } = props;\n\n  const controller = useController({\n    name: field.id,\n    control: formControl,\n    defaultValue: data?.[field.id] ?? false,\n  });\n\n  return (\n    <Checkbox\n      checked={!!controller.field.value}\n      onChange={(e) => controller.field.onChange(e.target.checked)}\n      onBlur={controller.field.onBlur}\n      dataHook={dataHook ?? `checkbox-${field.id}`}\n    >\n      {field.displayName}\n    </Checkbox>\n  );\n};\n\nexport const FormCheckbox = observer(_FormCheckbox);\n"],"mappings":";;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,aAAA,GAAAD,OAAA;AACA,IAAAE,cAAA,GAAAF,OAAA;AACA,IAAAG,KAAA,GAAAH,OAAA;AAAmD,IAAAI,YAAA;AAMnD,MAAMC,aAAa,GAAIC,KAAwB,IAAK;EAClD,MAAM;IAAEC,KAAK;IAAEC,QAAQ;IAAEC,WAAW;IAAEC;EAAK,CAAC,GAAGJ,KAAK;EAEpD,MAAMK,UAAU,GAAG,IAAAC,mBAAa,EAAC;IAC/BC,IAAI,EAAEN,KAAK,CAACO,EAAE;IACdC,OAAO,EAAEN,WAAW;IACpBO,YAAY,EAAE,CAAAN,IAAI,oBAAJA,IAAI,CAAGH,KAAK,CAACO,EAAE,CAAC,KAAI;EACpC,CAAC,CAAC;EAEF,oBACEhB,MAAA,CAAAmB,OAAA,CAAAC,aAAA,CAACjB,aAAA,CAAAkB,QAAQ;IACPC,OAAO,EAAE,CAAC,CAACT,UAAU,CAACJ,KAAK,CAACc,KAAM;IAClCC,QAAQ,EAAGC,CAAC,IAAKZ,UAAU,CAACJ,KAAK,CAACe,QAAQ,CAACC,CAAC,CAACC,MAAM,CAACJ,OAAO,CAAE;IAC7DK,MAAM,EAAEd,UAAU,CAACJ,KAAK,CAACkB,MAAO;IAChCjB,QAAQ,EAAEA,QAAQ,IAAI,YAAYD,KAAK,CAACO,EAAE,EAAG;IAAAY,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAxB,YAAA;MAAAyB,UAAA;MAAAC,YAAA;IAAA;EAAA,GAE5CvB,KAAK,CAACwB,WACC,CAAC;AAEf,CAAC;AAEM,MAAMC,YAAY,GAAAC,OAAA,CAAAD,YAAA,GAAG,IAAAE,uBAAQ,EAAC7B,aAAa,CAAC","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireDefault","require","_mobxReactLite","_form","_formCheckboxInput","_jsxFileName","_FormCheckbox","props","field","dataHook","formControl","data","controller","useController","name","id","control","defaultValue","default","createElement","FormCheckboxInput","value","onChange","onBlur","label","displayName","__self","__source","fileName","lineNumber","columnNumber","FormCheckbox","exports","observer"],"sources":["../../../../src/components/boolean/form-checkbox.tsx"],"sourcesContent":["import React from 'react';\nimport { observer } from 'mobx-react-lite';\nimport { useController } from '@wix/bex-core/form';\n\nimport { BaseInputProps } from '../../types/base-input';\nimport { FormCheckboxInput } from './form-checkbox-input';\n\nexport interface FormCheckboxProps extends BaseInputProps<boolean> {}\n\nconst _FormCheckbox = (props: FormCheckboxProps) => {\n  const { field, dataHook, formControl, data } = props;\n\n  const controller = useController({\n    name: field.id,\n    control: formControl,\n    defaultValue: data?.[field.id] ?? false,\n  });\n\n  return (\n    <FormCheckboxInput\n      data={!!controller.field.value}\n      onChange={controller.field.onChange}\n      onBlur={controller.field.onBlur}\n      dataHook={dataHook ?? `checkbox-${field.id}`}\n      label={field.displayName}\n    />\n  );\n};\n\nexport const FormCheckbox = observer(_FormCheckbox);\n"],"mappings":";;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,cAAA,GAAAD,OAAA;AACA,IAAAE,KAAA,GAAAF,OAAA;AAGA,IAAAG,kBAAA,GAAAH,OAAA;AAA0D,IAAAI,YAAA;AAI1D,MAAMC,aAAa,GAAIC,KAAwB,IAAK;EAClD,MAAM;IAAEC,KAAK;IAAEC,QAAQ;IAAEC,WAAW;IAAEC;EAAK,CAAC,GAAGJ,KAAK;EAEpD,MAAMK,UAAU,GAAG,IAAAC,mBAAa,EAAC;IAC/BC,IAAI,EAAEN,KAAK,CAACO,EAAE;IACdC,OAAO,EAAEN,WAAW;IACpBO,YAAY,EAAE,CAAAN,IAAI,oBAAJA,IAAI,CAAGH,KAAK,CAACO,EAAE,CAAC,KAAI;EACpC,CAAC,CAAC;EAEF,oBACEhB,MAAA,CAAAmB,OAAA,CAAAC,aAAA,CAACf,kBAAA,CAAAgB,iBAAiB;IAChBT,IAAI,EAAE,CAAC,CAACC,UAAU,CAACJ,KAAK,CAACa,KAAM;IAC/BC,QAAQ,EAAEV,UAAU,CAACJ,KAAK,CAACc,QAAS;IACpCC,MAAM,EAAEX,UAAU,CAACJ,KAAK,CAACe,MAAO;IAChCd,QAAQ,EAAEA,QAAQ,IAAI,YAAYD,KAAK,CAACO,EAAE,EAAG;IAC7CS,KAAK,EAAEhB,KAAK,CAACiB,WAAY;IAAAC,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAvB,YAAA;MAAAwB,UAAA;MAAAC,YAAA;IAAA;EAAA,CAC1B,CAAC;AAEN,CAAC;AAEM,MAAMC,YAAY,GAAAC,OAAA,CAAAD,YAAA,GAAG,IAAAE,uBAAQ,EAAC3B,aAAa,CAAC","ignoreList":[]}

package/dist/cjs/components/boolean/index.js

@@ -19,4 +19,10 @@ Object.keys(_formCheckbox).forEach(function (key) {
   if (key in exports && exports[key] === _formCheckbox[key]) return;
   exports[key] = _formCheckbox[key];
 });
+var _formCheckboxInput = require("./form-checkbox-input");
+Object.keys(_formCheckboxInput).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _formCheckboxInput[key]) return;
+  exports[key] = _formCheckboxInput[key];
+});
 //# sourceMappingURL=index.js.map

package/dist/cjs/components/boolean/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_booleanView","require","Object","keys","forEach","key","exports","_cellCheckbox","_formCheckbox"],"sources":["../../../../src/components/boolean/index.ts"],"sourcesContent":["export * from './boolean-view';\nexport * from './cell-checkbox';\nexport * from './form-checkbox';\n"],"mappings":";;;AAAA,IAAAA,YAAA,GAAAC,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAH,YAAA,EAAAI,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAL,YAAA,CAAAK,GAAA;EAAAC,OAAA,CAAAD,GAAA,IAAAL,YAAA,CAAAK,GAAA;AAAA;AACA,IAAAE,aAAA,GAAAN,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAI,aAAA,EAAAH,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAE,aAAA,CAAAF,GAAA;EAAAC,OAAA,CAAAD,GAAA,IAAAE,aAAA,CAAAF,GAAA;AAAA;AACA,IAAAG,aAAA,GAAAP,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAK,aAAA,EAAAJ,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAG,aAAA,CAAAH,GAAA;EAAAC,OAAA,CAAAD,GAAA,IAAAG,aAAA,CAAAH,GAAA;AAAA","ignoreList":[]}
+{"version":3,"names":["_booleanView","require","Object","keys","forEach","key","exports","_cellCheckbox","_formCheckbox","_formCheckboxInput"],"sources":["../../../../src/components/boolean/index.ts"],"sourcesContent":["export * from './boolean-view';\nexport * from './cell-checkbox';\nexport * from './form-checkbox';\nexport * from './form-checkbox-input';\n"],"mappings":";;;AAAA,IAAAA,YAAA,GAAAC,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAH,YAAA,EAAAI,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAL,YAAA,CAAAK,GAAA;EAAAC,OAAA,CAAAD,GAAA,IAAAL,YAAA,CAAAK,GAAA;AAAA;AACA,IAAAE,aAAA,GAAAN,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAI,aAAA,EAAAH,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAE,aAAA,CAAAF,GAAA;EAAAC,OAAA,CAAAD,GAAA,IAAAE,aAAA,CAAAF,GAAA;AAAA;AACA,IAAAG,aAAA,GAAAP,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAK,aAAA,EAAAJ,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAG,aAAA,CAAAH,GAAA;EAAAC,OAAA,CAAAD,GAAA,IAAAG,aAAA,CAAAH,GAAA;AAAA;AACA,IAAAI,kBAAA,GAAAR,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAM,kBAAA,EAAAL,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAI,kBAAA,CAAAJ,GAAA;EAAAC,OAAA,CAAAD,GAAA,IAAAI,kBAAA,CAAAJ,GAAA;AAAA","ignoreList":[]}

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

@@ -5,15 +5,15 @@ exports.vars = exports.style = exports.stVars = exports.st = exports.namespace =
 var _stylableEsmRuntime = require("../../stylable-esm-runtime.js");
 // @ts-nocheck
 
-var _namespace_ = "cellcolorview1178629535";
+var _namespace_ = "cellcolorview1008266217";
 var _style_ = _stylableEsmRuntime.classesRuntime.bind(null, _namespace_);
 var cssStates = exports.cssStates = _stylableEsmRuntime.statesRuntime.bind(null, _namespace_);
 var style = exports.style = _style_;
 var st = exports.st = _style_;
 var namespace = exports.namespace = _namespace_;
 var classes = exports.classes = {
-  "root": "cellcolorview1178629535__root",
-  "hashPrefix": "cellcolorview1178629535__hashPrefix"
+  "root": "cellcolorview1008266217__root",
+  "hashPrefix": "cellcolorview1008266217__hashPrefix"
 };
 var keyframes = exports.keyframes = {};
 var layers = exports.layers = {};

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

@@ -1 +1 @@
-{"version":3,"names":["_stylableEsmRuntime","require","_namespace_","_style_","classesRuntime","bind","cssStates","exports","statesRuntime","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../src/components/color-view/cell-color-view.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"cellcolorview1178629535\";\nvar _style_ = classesRuntime.bind(null, _namespace_);\n\nexport var cssStates = statesRuntime.bind(null, _namespace_);\nexport var style: import(\"@stylable/runtime\").STFunction = _style_;\nexport var st: import(\"@stylable/runtime\").STFunction = _style_;\n\nexport var namespace = _namespace_;\nexport var classes = {\"root\":\"cellcolorview1178629535__root\",\"hashPrefix\":\"cellcolorview1178629535__hashPrefix\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {\"wsr-color-D40\":\"--wsr-color-D40\"}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,yBAAyB;AAC3C,IAAIC,OAAO,GAAGC,kCAAc,CAACC,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AAE7C,IAAII,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAGE,iCAAa,CAACH,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AACrD,IAAIO,KAA6C,GAAAF,OAAA,CAAAE,KAAA,GAAGN,OAAO;AAC3D,IAAIO,EAA0C,GAAAH,OAAA,CAAAG,EAAA,GAAGP,OAAO;AAExD,IAAIQ,SAAS,GAAAJ,OAAA,CAAAI,SAAA,GAAGT,WAAW;AAC3B,IAAIU,OAAO,GAAAL,OAAA,CAAAK,OAAA,GAAG;EAAC,MAAM,EAAC,+BAA+B;EAAC,YAAY,EAAC;AAAqC,CAAC;AACzG,IAAIC,SAAS,GAAAN,OAAA,CAAAM,SAAA,GAAG,CAAC,CAAC;AAClB,IAAIC,MAAM,GAAAP,OAAA,CAAAO,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,UAAU,GAAAR,OAAA,CAAAQ,UAAA,GAAG,CAAC,CAAC;AACnB,IAAIC,MAAM,GAAAT,OAAA,CAAAS,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,IAAI,GAAAV,OAAA,CAAAU,IAAA,GAAG;EAAC,eAAe,EAAC;AAAiB,CAAC","ignoreList":[]}
+{"version":3,"names":["_stylableEsmRuntime","require","_namespace_","_style_","classesRuntime","bind","cssStates","exports","statesRuntime","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../src/components/color-view/cell-color-view.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"cellcolorview1008266217\";\nvar _style_ = classesRuntime.bind(null, _namespace_);\n\nexport var cssStates = statesRuntime.bind(null, _namespace_);\nexport var style: import(\"@stylable/runtime\").STFunction = _style_;\nexport var st: import(\"@stylable/runtime\").STFunction = _style_;\n\nexport var namespace = _namespace_;\nexport var classes = {\"root\":\"cellcolorview1008266217__root\",\"hashPrefix\":\"cellcolorview1008266217__hashPrefix\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {\"wsr-color-D40\":\"--wsr-color-D40\"}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,yBAAyB;AAC3C,IAAIC,OAAO,GAAGC,kCAAc,CAACC,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AAE7C,IAAII,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAGE,iCAAa,CAACH,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AACrD,IAAIO,KAA6C,GAAAF,OAAA,CAAAE,KAAA,GAAGN,OAAO;AAC3D,IAAIO,EAA0C,GAAAH,OAAA,CAAAG,EAAA,GAAGP,OAAO;AAExD,IAAIQ,SAAS,GAAAJ,OAAA,CAAAI,SAAA,GAAGT,WAAW;AAC3B,IAAIU,OAAO,GAAAL,OAAA,CAAAK,OAAA,GAAG;EAAC,MAAM,EAAC,+BAA+B;EAAC,YAAY,EAAC;AAAqC,CAAC;AACzG,IAAIC,SAAS,GAAAN,OAAA,CAAAM,SAAA,GAAG,CAAC,CAAC;AAClB,IAAIC,MAAM,GAAAP,OAAA,CAAAO,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,UAAU,GAAAR,OAAA,CAAAQ,UAAA,GAAG,CAAC,CAAC;AACnB,IAAIC,MAAM,GAAAT,OAAA,CAAAS,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,IAAI,GAAAV,OAAA,CAAAU,IAAA,GAAG;EAAC,eAAe,EAAC;AAAiB,CAAC","ignoreList":[]}

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

@@ -122,30 +122,31 @@ const ColorInput = exports.ColorInput = /*#__PURE__*/(0, _react.forwardRef)(({
         lineNumber: 133,
         columnNumber: 15
       }
-    }, !colorValue && (isFocused || showPicker) ? /*#__PURE__*/_react.default.createElement(_designSystem.FillButton, {
+    }, !colorValue && isFocused ? /*#__PURE__*/_react.default.createElement(_designSystem.FillButton, {
       onClick: onPreviewClick,
       onMouseDown: e => e.preventDefault(),
       tooltipContent: t('auto-patterns.fields.add_color_tooltip'),
       __self: void 0,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 135,
+        lineNumber: 142,
         columnNumber: 19
       }
     }) : /*#__PURE__*/_react.default.createElement(_designSystem.FillPreview, {
       fill: colorValue,
       onClick: onPreviewClick,
+      onMouseDown: e => e.preventDefault(),
       __self: void 0,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 141,
+        lineNumber: 148,
         columnNumber: 19
       }
     })), /*#__PURE__*/_react.default.createElement(_designSystem.Popover.Content, {
       __self: void 0,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 144,
+        lineNumber: 155,
         columnNumber: 15
       }
     }, /*#__PURE__*/_react.default.createElement(_designSystem.ColorPicker, {
@@ -158,7 +159,7 @@ const ColorInput = exports.ColorInput = /*#__PURE__*/(0, _react.forwardRef)(({
       __self: void 0,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 145,
+        lineNumber: 156,
         columnNumber: 17
       }
     })))),

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

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_designSystem","_color","_interopRequireDefault","_useTranslations","_hex","_jsxFileName","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","safeColorLib","value","ColorLib","undefined","ColorInput","exports","forwardRef","colorValue","onChange","onFocus","onBlur","props","ref","useTranslations","inputValue","setInputValue","useState","omitHash","showPicker","setShowPicker","isFocused","setIsFocused","pickerColor","setPickerColor","onInputChange","useCallback","raw","target","hex","normalizeHex","onInputFocus","onInputBlur","onPickerConfirm","confirmedColor","_confirmedColor$hex","toUpperCase","onPickerCancel","onPreviewClick","prev","createElement","Input","_extends2","prefix","Affix","__self","__source","fileName","lineNumber","columnNumber","suffix","Popover","shown","onClickOutside","animate","flip","fixed","placement","appendTo","moveBy","x","y","zIndex","Element","FillButton","onClick","onMouseDown","preventDefault","tooltipContent","FillPreview","fill","Content","ColorPicker","c","onConfirm","onCancel","showConverter","allowEmpty","displayName"],"sources":["../../../../src/components/color-view/color-input.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useState } from 'react';\nimport type {\n  ColorPickerProps,\n  InputImperativeActions,\n  InputProps,\n} from '@wix/design-system';\nimport {\n  ColorPicker,\n  FillButton,\n  FillPreview,\n  Input,\n  Popover,\n} from '@wix/design-system';\nimport ColorLib, { rgb } from 'color';\n\nimport { useTranslations } from '../../hooks/use-translations';\nimport { normalizeHex, omitHash } from './hex';\n\ntype ColorInstance = ReturnType<typeof rgb>;\n\nconst safeColorLib = (value: string): ColorInstance | undefined => {\n  try {\n    return ColorLib(value);\n  } catch {\n    return undefined;\n  }\n};\n\nexport interface ColorInputProps\n  extends Omit<InputProps, 'value' | 'onChange' | 'prefix' | 'suffix'> {\n  value?: string;\n  onChange?: (hex: string) => void;\n}\n\nexport const ColorInput = forwardRef<InputImperativeActions, ColorInputProps>(\n  ({ value: colorValue, onChange, onFocus, onBlur, ...props }, ref) => {\n    const { t } = useTranslations();\n    const [inputValue, setInputValue] = useState(\n      colorValue ? omitHash(colorValue) : '',\n    );\n    const [showPicker, setShowPicker] = useState(false);\n    const [isFocused, setIsFocused] = useState(false);\n    const [pickerColor, setPickerColor] = useState<ColorInstance | undefined>(\n      colorValue ? safeColorLib(colorValue) : undefined,\n    );\n\n    const onInputChange = useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        const raw = e.target.value;\n        setInputValue(raw);\n\n        const hex = normalizeHex(raw);\n        if (hex) {\n          onChange?.(hex);\n          setPickerColor(safeColorLib(hex));\n        }\n      },\n      [onChange],\n    );\n\n    const onInputFocus = useCallback(\n      (e: React.FocusEvent<HTMLInputElement>) => {\n        setIsFocused(true);\n        onFocus?.(e);\n      },\n      [onFocus],\n    );\n\n    const onInputBlur = useCallback(\n      (e: React.FocusEvent<HTMLInputElement>) => {\n        const hex = normalizeHex(inputValue);\n        if (hex) {\n          onChange?.(hex);\n          setInputValue(omitHash(hex));\n        } else if (colorValue) {\n          setInputValue(omitHash(colorValue));\n        } else {\n          setInputValue('');\n        }\n        setIsFocused(false);\n        onBlur?.(e);\n      },\n      [onChange, onBlur, inputValue, colorValue],\n    );\n\n    const onPickerConfirm = useCallback(\n      (confirmedColor: ColorPickerProps['value']) => {\n        const hex =\n          typeof confirmedColor === 'string'\n            ? confirmedColor\n            : confirmedColor?.hex()?.toUpperCase();\n        if (hex) {\n          onChange?.(hex);\n          setInputValue(omitHash(hex));\n          setPickerColor(safeColorLib(hex));\n        }\n        setShowPicker(false);\n      },\n      [onChange],\n    );\n\n    const onPickerCancel = useCallback(() => {\n      setPickerColor(colorValue ? safeColorLib(colorValue) : undefined);\n      setShowPicker(false);\n    }, [colorValue]);\n\n    const onPreviewClick = useCallback(() => {\n      setShowPicker((prev) => !prev);\n    }, []);\n\n    return (\n      <Input\n        {...props}\n        ref={ref}\n        value={inputValue}\n        onChange={onInputChange}\n        onFocus={onInputFocus}\n        onBlur={onInputBlur}\n        prefix={<Input.Affix>#</Input.Affix>}\n        suffix={\n          <Input.Affix>\n            <Popover\n              shown={showPicker}\n              onClickOutside={() => setShowPicker(false)}\n              animate\n              flip\n              fixed={false}\n              placement=\"left-start\"\n              appendTo=\"scrollParent\"\n              moveBy={{ x: 6, y: 6 }}\n              zIndex={5001}\n            >\n              <Popover.Element>\n                {!colorValue && (isFocused || showPicker) ? (\n                  <FillButton\n                    onClick={onPreviewClick}\n                    onMouseDown={(e) => e.preventDefault()}\n                    tooltipContent={t('auto-patterns.fields.add_color_tooltip')}\n                  />\n                ) : (\n                  <FillPreview fill={colorValue} onClick={onPreviewClick} />\n                )}\n              </Popover.Element>\n              <Popover.Content>\n                <ColorPicker\n                  value={pickerColor as ColorPickerProps['value']}\n                  onChange={\n                    ((c: ColorPickerProps['value']) =>\n                      setPickerColor(\n                        c as ColorInstance | undefined,\n                      )) as ColorPickerProps['onChange']\n                  }\n                  onConfirm={onPickerConfirm}\n                  onCancel={onPickerCancel}\n                  showConverter\n                  allowEmpty\n                />\n              </Popover.Content>\n            </Popover>\n          </Input.Affix>\n        }\n      />\n    );\n  },\n);\n\nColorInput.displayName = 'ColorInput';\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_designSystem","_color","_interopRequireDefault","_useTranslations","_hex","_jsxFileName","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","safeColorLib","value","ColorLib","undefined","ColorInput","exports","forwardRef","colorValue","onChange","onFocus","onBlur","props","ref","useTranslations","inputValue","setInputValue","useState","omitHash","showPicker","setShowPicker","isFocused","setIsFocused","pickerColor","setPickerColor","onInputChange","useCallback","raw","target","hex","normalizeHex","onInputFocus","onInputBlur","onPickerConfirm","confirmedColor","_confirmedColor$hex","toUpperCase","onPickerCancel","onPreviewClick","prev","createElement","Input","_extends2","prefix","Affix","__self","__source","fileName","lineNumber","columnNumber","suffix","Popover","shown","onClickOutside","animate","flip","fixed","placement","appendTo","moveBy","x","y","zIndex","Element","FillButton","onClick","onMouseDown","preventDefault","tooltipContent","FillPreview","fill","Content","ColorPicker","c","onConfirm","onCancel","showConverter","allowEmpty","displayName"],"sources":["../../../../src/components/color-view/color-input.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useState } from 'react';\nimport type {\n  ColorPickerProps,\n  InputImperativeActions,\n  InputProps,\n} from '@wix/design-system';\nimport {\n  ColorPicker,\n  FillButton,\n  FillPreview,\n  Input,\n  Popover,\n} from '@wix/design-system';\nimport ColorLib, { rgb } from 'color';\n\nimport { useTranslations } from '../../hooks/use-translations';\nimport { normalizeHex, omitHash } from './hex';\n\ntype ColorInstance = ReturnType<typeof rgb>;\n\nconst safeColorLib = (value: string): ColorInstance | undefined => {\n  try {\n    return ColorLib(value);\n  } catch {\n    return undefined;\n  }\n};\n\nexport interface ColorInputProps\n  extends Omit<InputProps, 'value' | 'onChange' | 'prefix' | 'suffix'> {\n  value?: string;\n  onChange?: (hex: string) => void;\n}\n\nexport const ColorInput = forwardRef<InputImperativeActions, ColorInputProps>(\n  ({ value: colorValue, onChange, onFocus, onBlur, ...props }, ref) => {\n    const { t } = useTranslations();\n    const [inputValue, setInputValue] = useState(\n      colorValue ? omitHash(colorValue) : '',\n    );\n    const [showPicker, setShowPicker] = useState(false);\n    const [isFocused, setIsFocused] = useState(false);\n    const [pickerColor, setPickerColor] = useState<ColorInstance | undefined>(\n      colorValue ? safeColorLib(colorValue) : undefined,\n    );\n\n    const onInputChange = useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        const raw = e.target.value;\n        setInputValue(raw);\n\n        const hex = normalizeHex(raw);\n        if (hex) {\n          onChange?.(hex);\n          setPickerColor(safeColorLib(hex));\n        }\n      },\n      [onChange],\n    );\n\n    const onInputFocus = useCallback(\n      (e: React.FocusEvent<HTMLInputElement>) => {\n        setIsFocused(true);\n        onFocus?.(e);\n      },\n      [onFocus],\n    );\n\n    const onInputBlur = useCallback(\n      (e: React.FocusEvent<HTMLInputElement>) => {\n        const hex = normalizeHex(inputValue);\n        if (hex) {\n          onChange?.(hex);\n          setInputValue(omitHash(hex));\n        } else if (colorValue) {\n          setInputValue(omitHash(colorValue));\n        } else {\n          setInputValue('');\n        }\n        setIsFocused(false);\n        onBlur?.(e);\n      },\n      [onChange, onBlur, inputValue, colorValue],\n    );\n\n    const onPickerConfirm = useCallback(\n      (confirmedColor: ColorPickerProps['value']) => {\n        const hex =\n          typeof confirmedColor === 'string'\n            ? confirmedColor\n            : confirmedColor?.hex()?.toUpperCase();\n        if (hex) {\n          onChange?.(hex);\n          setInputValue(omitHash(hex));\n          setPickerColor(safeColorLib(hex));\n        }\n        setShowPicker(false);\n      },\n      [onChange],\n    );\n\n    const onPickerCancel = useCallback(() => {\n      setPickerColor(colorValue ? safeColorLib(colorValue) : undefined);\n      setShowPicker(false);\n    }, [colorValue]);\n\n    const onPreviewClick = useCallback(() => {\n      setShowPicker((prev) => !prev);\n    }, []);\n\n    return (\n      <Input\n        {...props}\n        ref={ref}\n        value={inputValue}\n        onChange={onInputChange}\n        onFocus={onInputFocus}\n        onBlur={onInputBlur}\n        prefix={<Input.Affix>#</Input.Affix>}\n        suffix={\n          <Input.Affix>\n            <Popover\n              shown={showPicker}\n              onClickOutside={() => setShowPicker(false)}\n              animate\n              flip\n              fixed={false}\n              placement=\"left-start\"\n              appendTo=\"scrollParent\"\n              moveBy={{ x: 6, y: 6 }}\n              zIndex={5001}\n            >\n              <Popover.Element>\n                {/* Both swatches keep the mousedown default from moving focus.\n                    Without it the press focuses the swatch, and the re-render\n                    that follows the click detaches it — WDS Popover then reads\n                    the click as landing outside itself and closes again, so the\n                    picker only opened on a later click. For the same reason the\n                    branch must not depend on `showPicker`: the swatch has to\n                    survive its own click. */}\n                {!colorValue && isFocused ? (\n                  <FillButton\n                    onClick={onPreviewClick}\n                    onMouseDown={(e) => e.preventDefault()}\n                    tooltipContent={t('auto-patterns.fields.add_color_tooltip')}\n                  />\n                ) : (\n                  <FillPreview\n                    fill={colorValue}\n                    onClick={onPreviewClick}\n                    onMouseDown={(e) => e.preventDefault()}\n                  />\n                )}\n              </Popover.Element>\n              <Popover.Content>\n                <ColorPicker\n                  value={pickerColor as ColorPickerProps['value']}\n                  onChange={\n                    ((c: ColorPickerProps['value']) =>\n                      setPickerColor(\n                        c as ColorInstance | undefined,\n                      )) as ColorPickerProps['onChange']\n                  }\n                  onConfirm={onPickerConfirm}\n                  onCancel={onPickerCancel}\n                  showConverter\n                  allowEmpty\n                />\n              </Popover.Content>\n            </Popover>\n          </Input.Affix>\n        }\n      />\n    );\n  },\n);\n\nColorInput.displayName = 'ColorInput';\n"],"mappings":"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","ignoreList":[]}

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

@@ -5,16 +5,16 @@ exports.vars = exports.style = exports.stVars = exports.st = exports.namespace =
 var _stylableEsmRuntime = require("../../stylable-esm-runtime.js");
 // @ts-nocheck
 
-var _namespace_ = "colorview2624366234";
+var _namespace_ = "colorview3520103020";
 var _style_ = _stylableEsmRuntime.classesRuntime.bind(null, _namespace_);
 var cssStates = exports.cssStates = _stylableEsmRuntime.statesRuntime.bind(null, _namespace_);
 var style = exports.style = _style_;
 var st = exports.st = _style_;
 var namespace = exports.namespace = _namespace_;
 var classes = exports.classes = {
-  "root": "colorview2624366234__root",
-  "view": "colorview2624366234__view",
-  "fillPreview": "colorview2624366234__fillPreview"
+  "root": "colorview3520103020__root",
+  "view": "colorview3520103020__view",
+  "fillPreview": "colorview3520103020__fillPreview"
 };
 var keyframes = exports.keyframes = {};
 var layers = exports.layers = {};

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

@@ -1 +1 @@
-{"version":3,"names":["_stylableEsmRuntime","require","_namespace_","_style_","classesRuntime","bind","cssStates","exports","statesRuntime","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../src/components/color-view/color-view.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"colorview2624366234\";\nvar _style_ = classesRuntime.bind(null, _namespace_);\n\nexport var cssStates = statesRuntime.bind(null, _namespace_);\nexport var style: import(\"@stylable/runtime\").STFunction = _style_;\nexport var st: import(\"@stylable/runtime\").STFunction = _style_;\n\nexport var namespace = _namespace_;\nexport var classes = {\"root\":\"colorview2624366234__root\",\"view\":\"colorview2624366234__view\",\"fillPreview\":\"colorview2624366234__fillPreview\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,qBAAqB;AACvC,IAAIC,OAAO,GAAGC,kCAAc,CAACC,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AAE7C,IAAII,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAGE,iCAAa,CAACH,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AACrD,IAAIO,KAA6C,GAAAF,OAAA,CAAAE,KAAA,GAAGN,OAAO;AAC3D,IAAIO,EAA0C,GAAAH,OAAA,CAAAG,EAAA,GAAGP,OAAO;AAExD,IAAIQ,SAAS,GAAAJ,OAAA,CAAAI,SAAA,GAAGT,WAAW;AAC3B,IAAIU,OAAO,GAAAL,OAAA,CAAAK,OAAA,GAAG;EAAC,MAAM,EAAC,2BAA2B;EAAC,MAAM,EAAC,2BAA2B;EAAC,aAAa,EAAC;AAAkC,CAAC;AACtI,IAAIC,SAAS,GAAAN,OAAA,CAAAM,SAAA,GAAG,CAAC,CAAC;AAClB,IAAIC,MAAM,GAAAP,OAAA,CAAAO,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,UAAU,GAAAR,OAAA,CAAAQ,UAAA,GAAG,CAAC,CAAC;AACnB,IAAIC,MAAM,GAAAT,OAAA,CAAAS,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,IAAI,GAAAV,OAAA,CAAAU,IAAA,GAAG,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["_stylableEsmRuntime","require","_namespace_","_style_","classesRuntime","bind","cssStates","exports","statesRuntime","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../src/components/color-view/color-view.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"colorview3520103020\";\nvar _style_ = classesRuntime.bind(null, _namespace_);\n\nexport var cssStates = statesRuntime.bind(null, _namespace_);\nexport var style: import(\"@stylable/runtime\").STFunction = _style_;\nexport var st: import(\"@stylable/runtime\").STFunction = _style_;\n\nexport var namespace = _namespace_;\nexport var classes = {\"root\":\"colorview3520103020__root\",\"view\":\"colorview3520103020__view\",\"fillPreview\":\"colorview3520103020__fillPreview\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,qBAAqB;AACvC,IAAIC,OAAO,GAAGC,kCAAc,CAACC,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AAE7C,IAAII,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAGE,iCAAa,CAACH,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AACrD,IAAIO,KAA6C,GAAAF,OAAA,CAAAE,KAAA,GAAGN,OAAO;AAC3D,IAAIO,EAA0C,GAAAH,OAAA,CAAAG,EAAA,GAAGP,OAAO;AAExD,IAAIQ,SAAS,GAAAJ,OAAA,CAAAI,SAAA,GAAGT,WAAW;AAC3B,IAAIU,OAAO,GAAAL,OAAA,CAAAK,OAAA,GAAG;EAAC,MAAM,EAAC,2BAA2B;EAAC,MAAM,EAAC,2BAA2B;EAAC,aAAa,EAAC;AAAkC,CAAC;AACtI,IAAIC,SAAS,GAAAN,OAAA,CAAAM,SAAA,GAAG,CAAC,CAAC;AAClB,IAAIC,MAAM,GAAAP,OAAA,CAAAO,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,UAAU,GAAAR,OAAA,CAAAQ,UAAA,GAAG,CAAC,CAAC;AACnB,IAAIC,MAAM,GAAAT,OAAA,CAAAS,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,IAAI,GAAAV,OAAA,CAAAU,IAAA,GAAG,CAAC,CAAC","ignoreList":[]}

package/dist/cjs/components/color-view/form-color.driver.js

@@ -12,8 +12,14 @@ function FormColorDriver(base, body, field) {
     ...(0, _baseDriver.baseUniDriverFactory)(base),
     getLabel: () => (0, _baseDriver.getFormFieldLabelText)(formField),
     getValue: () => input.getValue(),
-    getFillButton: () => (0, _unidriver.FillButtonUniDriver)(base, body),
-    getFillPreview: () => (0, _unidriver.FillPreviewUniDriver)(base, body),
+    // The WDS drivers scope their queries to `base`, but `exists()` comes from
+    // the shared base factory and only reports on `base` itself — which here is
+    // the whole field, so it is true either way. Query the swatch directly.
+    hasFillButton: () => base.$('[data-hook="fillbutton"]').exists(),
+    hasFillPreview: () => base.$('[data-hook="fill-preview-button"]').exists(),
+    clickFillButton: () => (0, _unidriver.FillButtonUniDriver)(base, body).click(),
+    clickFillPreview: () => (0, _unidriver.FillPreviewUniDriver)(base, body).click(),
+    isPickerOpen: () => body.$('[data-hook="color-picker-hsb"]').exists(),
     isRequired: () => formField.isRequired(),
     hasError: () => formField.hasStatus('error'),
     getErrorMessage: () => formField.getStatusMessage()