@wix/patterns-fields 1.73.0 → 1.74.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_ = "addressinput517975534";
 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": "addressinput517975534__root",
+  "tableAddressInput": "addressinput517975534__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_ = \"addressinput517975534\";\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\":\"addressinput517975534__root\",\"tableAddressInput\":\"addressinput517975534__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":[]}

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_ = "actionsmenu425944360";
 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": "actionsmenu425944360__root",
+  "action": "actionsmenu425944360__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_ = \"actionsmenu425944360\";\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\":\"actionsmenu425944360__root\",\"action\":\"actionsmenu425944360__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":[]}

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_ = "formaudiofield4018066963";
 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": "formaudiofield4018066963__root",
+  "addItem": "formaudiofield4018066963__addItem",
+  "mediaTitle": "formaudiofield4018066963__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_ = \"formaudiofield4018066963\";\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\":\"formaudiofield4018066963__root\",\"addItem\":\"formaudiofield4018066963__addItem\",\"mediaTitle\":\"formaudiofield4018066963__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_ = "audioplayer1561698613";
 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": "audioplayer1561698613__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_ = \"audioplayer1561698613\";\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\":\"audioplayer1561698613__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/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_ = "cellcolorview1736640766";
 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": "cellcolorview1736640766__root",
+  "hashPrefix": "cellcolorview1736640766__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_ = \"cellcolorview1736640766\";\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\":\"cellcolorview1736640766__root\",\"hashPrefix\":\"cellcolorview1736640766__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_ = "colorview3482796446";
 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": "colorview3482796446__root",
+  "view": "colorview3482796446__view",
+  "fillPreview": "colorview3482796446__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_ = \"colorview3482796446\";\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\":\"colorview3482796446__root\",\"view\":\"colorview3482796446__view\",\"fillPreview\":\"colorview3482796446__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()

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

@@ -1 +1 @@
-{"version":3,"names":["_unidriver","require","_baseDriver","FormColorDriver","base","body","field","formField","FormFieldUniDriver","inputBase","$","id","input","InputUniDriver","baseUniDriverFactory","getLabel","getFormFieldLabelText","getValue","getFillButton","FillButtonUniDriver","getFillPreview","FillPreviewUniDriver","isRequired","hasError","hasStatus","getErrorMessage","getStatusMessage"],"sources":["../../../../src/components/color-view/form-color.driver.ts"],"sourcesContent":["import type { Field } from '@wix/bex-core';\nimport { UniDriver } from '@wix/wix-ui-test-utils/unidriver';\nimport {\n  FillButtonUniDriver,\n  FillPreviewUniDriver,\n  FormFieldUniDriver,\n  InputUniDriver,\n} from '@wix/design-system/dist/testkit/unidriver';\n\nimport {\n  baseUniDriverFactory,\n  getFormFieldLabelText,\n} from '../../testkit/base-driver';\n\nexport function FormColorDriver(\n  base: UniDriver,\n  body: UniDriver,\n  field: Field,\n) {\n  const formField = FormFieldUniDriver(base, body);\n  const inputBase = base.$(`[data-hook=\"color-${field.id}\"]`);\n  const input = InputUniDriver(inputBase, body);\n\n  return {\n    ...baseUniDriverFactory(base),\n    getLabel: () => getFormFieldLabelText(formField),\n    getValue: () => input.getValue(),\n    getFillButton: () => FillButtonUniDriver(base, body),\n    getFillPreview: () => FillPreviewUniDriver(base, body),\n    isRequired: () => formField.isRequired(),\n    hasError: () => formField.hasStatus('error'),\n    getErrorMessage: () => formField.getStatusMessage(),\n  };\n}\n"],"mappings":";;;;AAEA,IAAAA,UAAA,GAAAC,OAAA;AAOA,IAAAC,WAAA,GAAAD,OAAA;AAKO,SAASE,eAAeA,CAC7BC,IAAe,EACfC,IAAe,EACfC,KAAY,EACZ;EACA,MAAMC,SAAS,GAAG,IAAAC,6BAAkB,EAACJ,IAAI,EAAEC,IAAI,CAAC;EAChD,MAAMI,SAAS,GAAGL,IAAI,CAACM,CAAC,CAAC,qBAAqBJ,KAAK,CAACK,EAAE,IAAI,CAAC;EAC3D,MAAMC,KAAK,GAAG,IAAAC,yBAAc,EAACJ,SAAS,EAAEJ,IAAI,CAAC;EAE7C,OAAO;IACL,GAAG,IAAAS,gCAAoB,EAACV,IAAI,CAAC;IAC7BW,QAAQ,EAAEA,CAAA,KAAM,IAAAC,iCAAqB,EAACT,SAAS,CAAC;IAChDU,QAAQ,EAAEA,CAAA,KAAML,KAAK,CAACK,QAAQ,CAAC,CAAC;IAChCC,aAAa,EAAEA,CAAA,KAAM,IAAAC,8BAAmB,EAACf,IAAI,EAAEC,IAAI,CAAC;IACpDe,cAAc,EAAEA,CAAA,KAAM,IAAAC,+BAAoB,EAACjB,IAAI,EAAEC,IAAI,CAAC;IACtDiB,UAAU,EAAEA,CAAA,KAAMf,SAAS,CAACe,UAAU,CAAC,CAAC;IACxCC,QAAQ,EAAEA,CAAA,KAAMhB,SAAS,CAACiB,SAAS,CAAC,OAAO,CAAC;IAC5CC,eAAe,EAAEA,CAAA,KAAMlB,SAAS,CAACmB,gBAAgB,CAAC;EACpD,CAAC;AACH","ignoreList":[]}
+{"version":3,"names":["_unidriver","require","_baseDriver","FormColorDriver","base","body","field","formField","FormFieldUniDriver","inputBase","$","id","input","InputUniDriver","baseUniDriverFactory","getLabel","getFormFieldLabelText","getValue","hasFillButton","exists","hasFillPreview","clickFillButton","FillButtonUniDriver","click","clickFillPreview","FillPreviewUniDriver","isPickerOpen","isRequired","hasError","hasStatus","getErrorMessage","getStatusMessage"],"sources":["../../../../src/components/color-view/form-color.driver.ts"],"sourcesContent":["import type { Field } from '@wix/bex-core';\nimport { UniDriver } from '@wix/wix-ui-test-utils/unidriver';\nimport {\n  FillButtonUniDriver,\n  FillPreviewUniDriver,\n  FormFieldUniDriver,\n  InputUniDriver,\n} from '@wix/design-system/dist/testkit/unidriver';\n\nimport {\n  baseUniDriverFactory,\n  getFormFieldLabelText,\n} from '../../testkit/base-driver';\n\nexport function FormColorDriver(\n  base: UniDriver,\n  body: UniDriver,\n  field: Field,\n) {\n  const formField = FormFieldUniDriver(base, body);\n  const inputBase = base.$(`[data-hook=\"color-${field.id}\"]`);\n  const input = InputUniDriver(inputBase, body);\n\n  return {\n    ...baseUniDriverFactory(base),\n    getLabel: () => getFormFieldLabelText(formField),\n    getValue: () => input.getValue(),\n    // The WDS drivers scope their queries to `base`, but `exists()` comes from\n    // the shared base factory and only reports on `base` itself — which here is\n    // the whole field, so it is true either way. Query the swatch directly.\n    hasFillButton: () => base.$('[data-hook=\"fillbutton\"]').exists(),\n    hasFillPreview: () => base.$('[data-hook=\"fill-preview-button\"]').exists(),\n    clickFillButton: () => FillButtonUniDriver(base, body).click(),\n    clickFillPreview: () => FillPreviewUniDriver(base, body).click(),\n    isPickerOpen: () => body.$('[data-hook=\"color-picker-hsb\"]').exists(),\n    isRequired: () => formField.isRequired(),\n    hasError: () => formField.hasStatus('error'),\n    getErrorMessage: () => formField.getStatusMessage(),\n  };\n}\n"],"mappings":";;;;AAEA,IAAAA,UAAA,GAAAC,OAAA;AAOA,IAAAC,WAAA,GAAAD,OAAA;AAKO,SAASE,eAAeA,CAC7BC,IAAe,EACfC,IAAe,EACfC,KAAY,EACZ;EACA,MAAMC,SAAS,GAAG,IAAAC,6BAAkB,EAACJ,IAAI,EAAEC,IAAI,CAAC;EAChD,MAAMI,SAAS,GAAGL,IAAI,CAACM,CAAC,CAAC,qBAAqBJ,KAAK,CAACK,EAAE,IAAI,CAAC;EAC3D,MAAMC,KAAK,GAAG,IAAAC,yBAAc,EAACJ,SAAS,EAAEJ,IAAI,CAAC;EAE7C,OAAO;IACL,GAAG,IAAAS,gCAAoB,EAACV,IAAI,CAAC;IAC7BW,QAAQ,EAAEA,CAAA,KAAM,IAAAC,iCAAqB,EAACT,SAAS,CAAC;IAChDU,QAAQ,EAAEA,CAAA,KAAML,KAAK,CAACK,QAAQ,CAAC,CAAC;IAChC;IACA;IACA;IACAC,aAAa,EAAEA,CAAA,KAAMd,IAAI,CAACM,CAAC,CAAC,0BAA0B,CAAC,CAACS,MAAM,CAAC,CAAC;IAChEC,cAAc,EAAEA,CAAA,KAAMhB,IAAI,CAACM,CAAC,CAAC,mCAAmC,CAAC,CAACS,MAAM,CAAC,CAAC;IAC1EE,eAAe,EAAEA,CAAA,KAAM,IAAAC,8BAAmB,EAAClB,IAAI,EAAEC,IAAI,CAAC,CAACkB,KAAK,CAAC,CAAC;IAC9DC,gBAAgB,EAAEA,CAAA,KAAM,IAAAC,+BAAoB,EAACrB,IAAI,EAAEC,IAAI,CAAC,CAACkB,KAAK,CAAC,CAAC;IAChEG,YAAY,EAAEA,CAAA,KAAMrB,IAAI,CAACK,CAAC,CAAC,gCAAgC,CAAC,CAACS,MAAM,CAAC,CAAC;IACrEQ,UAAU,EAAEA,CAAA,KAAMpB,SAAS,CAACoB,UAAU,CAAC,CAAC;IACxCC,QAAQ,EAAEA,CAAA,KAAMrB,SAAS,CAACsB,SAAS,CAAC,OAAO,CAAC;IAC5CC,eAAe,EAAEA,CAAA,KAAMvB,SAAS,CAACwB,gBAAgB,CAAC;EACpD,CAAC;AACH","ignoreList":[]}

package/dist/cjs/components/datetime-input/form-date-time.driver.js

@@ -25,7 +25,10 @@ function FormDateTimeDriver(base, body, field) {
     // @ts-expect-error
     timeInput.hasStatus('error'),
     getTimeErrorMessage: () => timeInput.getStatusMessage(),
-    isRequired: () => formField.isRequired()
+    isRequired: () => formField.isRequired(),
+    // WDS Layout mirrors its `gap` prop onto `data-gap`; it is the only
+    // element in this field carrying that attribute.
+    getInputsGap: () => base.$('[data-gap]').attr('data-gap')
   };
 }
 //# sourceMappingURL=form-date-time.driver.js.map

package/dist/cjs/components/datetime-input/form-date-time.driver.js.map

@@ -1 +1 @@
-{"version":3,"names":["_unidriver","require","_baseDriver","FormDateTimeDriver","base","body","field","formField","FormFieldUniDriver","dateBase","$","id","timeBase","datePicker","DatePickerUniDriver","timeInput","TimeInputUniDriver","baseUniDriverFactory","getLabel","getFormFieldLabelText","dateExists","exists","timeExists","enterDateText","text","inputDriver","enterText","blurDate","blur","dateHasError","hasStatus","getDateErrorMessage","getStatusMessage","timeHasError","getTimeErrorMessage","isRequired"],"sources":["../../../../src/components/datetime-input/form-date-time.driver.ts"],"sourcesContent":["import type { Field } from '@wix/bex-core';\nimport { UniDriver } from '@wix/wix-ui-test-utils/unidriver';\nimport {\n  DatePickerUniDriver,\n  FormFieldUniDriver,\n  TimeInputUniDriver,\n} from '@wix/design-system/dist/testkit/unidriver';\n\nimport {\n  baseUniDriverFactory,\n  getFormFieldLabelText,\n} from '../../testkit/base-driver';\n\nexport function FormDateTimeDriver(\n  base: UniDriver,\n  body: UniDriver,\n  field: Field,\n) {\n  const formField = FormFieldUniDriver(base, body);\n  const dateBase = base.$(`[data-hook=\"datetime-date-${field.id}\"]`);\n  const timeBase = base.$(`[data-hook=\"datetime-time-${field.id}\"]`);\n  const datePicker = DatePickerUniDriver(dateBase, body);\n  const timeInput = TimeInputUniDriver(timeBase, body);\n\n  return {\n    ...baseUniDriverFactory(base),\n    getLabel: () => getFormFieldLabelText(formField),\n    dateExists: () => dateBase.exists(),\n    timeExists: () => timeBase.exists(),\n    enterDateText: (text: string) => datePicker.inputDriver.enterText(text),\n    blurDate: () => datePicker.inputDriver.blur(),\n    dateHasError: () => datePicker.inputDriver.hasStatus('error'),\n    getDateErrorMessage: () => datePicker.inputDriver.getStatusMessage(),\n    timeHasError: () =>\n      // WDS TimeInput.uni.driver.d.ts types `hasStatus` as no-arg, but the\n      // runtime forwards `status` to Input.hasStatus. See TimeInput.uni.driver.js:43.\n      // @ts-expect-error\n      timeInput.hasStatus('error'),\n    getTimeErrorMessage: () => timeInput.getStatusMessage(),\n    isRequired: () => formField.isRequired(),\n  };\n}\n"],"mappings":";;;;AAEA,IAAAA,UAAA,GAAAC,OAAA;AAMA,IAAAC,WAAA,GAAAD,OAAA;AAKO,SAASE,kBAAkBA,CAChCC,IAAe,EACfC,IAAe,EACfC,KAAY,EACZ;EACA,MAAMC,SAAS,GAAG,IAAAC,6BAAkB,EAACJ,IAAI,EAAEC,IAAI,CAAC;EAChD,MAAMI,QAAQ,GAAGL,IAAI,CAACM,CAAC,CAAC,6BAA6BJ,KAAK,CAACK,EAAE,IAAI,CAAC;EAClE,MAAMC,QAAQ,GAAGR,IAAI,CAACM,CAAC,CAAC,6BAA6BJ,KAAK,CAACK,EAAE,IAAI,CAAC;EAClE,MAAME,UAAU,GAAG,IAAAC,8BAAmB,EAACL,QAAQ,EAAEJ,IAAI,CAAC;EACtD,MAAMU,SAAS,GAAG,IAAAC,6BAAkB,EAACJ,QAAQ,EAAEP,IAAI,CAAC;EAEpD,OAAO;IACL,GAAG,IAAAY,gCAAoB,EAACb,IAAI,CAAC;IAC7Bc,QAAQ,EAAEA,CAAA,KAAM,IAAAC,iCAAqB,EAACZ,SAAS,CAAC;IAChDa,UAAU,EAAEA,CAAA,KAAMX,QAAQ,CAACY,MAAM,CAAC,CAAC;IACnCC,UAAU,EAAEA,CAAA,KAAMV,QAAQ,CAACS,MAAM,CAAC,CAAC;IACnCE,aAAa,EAAGC,IAAY,IAAKX,UAAU,CAACY,WAAW,CAACC,SAAS,CAACF,IAAI,CAAC;IACvEG,QAAQ,EAAEA,CAAA,KAAMd,UAAU,CAACY,WAAW,CAACG,IAAI,CAAC,CAAC;IAC7CC,YAAY,EAAEA,CAAA,KAAMhB,UAAU,CAACY,WAAW,CAACK,SAAS,CAAC,OAAO,CAAC;IAC7DC,mBAAmB,EAAEA,CAAA,KAAMlB,UAAU,CAACY,WAAW,CAACO,gBAAgB,CAAC,CAAC;IACpEC,YAAY,EAAEA,CAAA;IACZ;IACA;IACA;IACAlB,SAAS,CAACe,SAAS,CAAC,OAAO,CAAC;IAC9BI,mBAAmB,EAAEA,CAAA,KAAMnB,SAAS,CAACiB,gBAAgB,CAAC,CAAC;IACvDG,UAAU,EAAEA,CAAA,KAAM5B,SAAS,CAAC4B,UAAU,CAAC;EACzC,CAAC;AACH","ignoreList":[]}
+{"version":3,"names":["_unidriver","require","_baseDriver","FormDateTimeDriver","base","body","field","formField","FormFieldUniDriver","dateBase","$","id","timeBase","datePicker","DatePickerUniDriver","timeInput","TimeInputUniDriver","baseUniDriverFactory","getLabel","getFormFieldLabelText","dateExists","exists","timeExists","enterDateText","text","inputDriver","enterText","blurDate","blur","dateHasError","hasStatus","getDateErrorMessage","getStatusMessage","timeHasError","getTimeErrorMessage","isRequired","getInputsGap","attr"],"sources":["../../../../src/components/datetime-input/form-date-time.driver.ts"],"sourcesContent":["import type { Field } from '@wix/bex-core';\nimport { UniDriver } from '@wix/wix-ui-test-utils/unidriver';\nimport {\n  DatePickerUniDriver,\n  FormFieldUniDriver,\n  TimeInputUniDriver,\n} from '@wix/design-system/dist/testkit/unidriver';\n\nimport {\n  baseUniDriverFactory,\n  getFormFieldLabelText,\n} from '../../testkit/base-driver';\n\nexport function FormDateTimeDriver(\n  base: UniDriver,\n  body: UniDriver,\n  field: Field,\n) {\n  const formField = FormFieldUniDriver(base, body);\n  const dateBase = base.$(`[data-hook=\"datetime-date-${field.id}\"]`);\n  const timeBase = base.$(`[data-hook=\"datetime-time-${field.id}\"]`);\n  const datePicker = DatePickerUniDriver(dateBase, body);\n  const timeInput = TimeInputUniDriver(timeBase, body);\n\n  return {\n    ...baseUniDriverFactory(base),\n    getLabel: () => getFormFieldLabelText(formField),\n    dateExists: () => dateBase.exists(),\n    timeExists: () => timeBase.exists(),\n    enterDateText: (text: string) => datePicker.inputDriver.enterText(text),\n    blurDate: () => datePicker.inputDriver.blur(),\n    dateHasError: () => datePicker.inputDriver.hasStatus('error'),\n    getDateErrorMessage: () => datePicker.inputDriver.getStatusMessage(),\n    timeHasError: () =>\n      // WDS TimeInput.uni.driver.d.ts types `hasStatus` as no-arg, but the\n      // runtime forwards `status` to Input.hasStatus. See TimeInput.uni.driver.js:43.\n      // @ts-expect-error\n      timeInput.hasStatus('error'),\n    getTimeErrorMessage: () => timeInput.getStatusMessage(),\n    isRequired: () => formField.isRequired(),\n    // WDS Layout mirrors its `gap` prop onto `data-gap`; it is the only\n    // element in this field carrying that attribute.\n    getInputsGap: () => base.$('[data-gap]').attr('data-gap'),\n  };\n}\n"],"mappings":";;;;AAEA,IAAAA,UAAA,GAAAC,OAAA;AAMA,IAAAC,WAAA,GAAAD,OAAA;AAKO,SAASE,kBAAkBA,CAChCC,IAAe,EACfC,IAAe,EACfC,KAAY,EACZ;EACA,MAAMC,SAAS,GAAG,IAAAC,6BAAkB,EAACJ,IAAI,EAAEC,IAAI,CAAC;EAChD,MAAMI,QAAQ,GAAGL,IAAI,CAACM,CAAC,CAAC,6BAA6BJ,KAAK,CAACK,EAAE,IAAI,CAAC;EAClE,MAAMC,QAAQ,GAAGR,IAAI,CAACM,CAAC,CAAC,6BAA6BJ,KAAK,CAACK,EAAE,IAAI,CAAC;EAClE,MAAME,UAAU,GAAG,IAAAC,8BAAmB,EAACL,QAAQ,EAAEJ,IAAI,CAAC;EACtD,MAAMU,SAAS,GAAG,IAAAC,6BAAkB,EAACJ,QAAQ,EAAEP,IAAI,CAAC;EAEpD,OAAO;IACL,GAAG,IAAAY,gCAAoB,EAACb,IAAI,CAAC;IAC7Bc,QAAQ,EAAEA,CAAA,KAAM,IAAAC,iCAAqB,EAACZ,SAAS,CAAC;IAChDa,UAAU,EAAEA,CAAA,KAAMX,QAAQ,CAACY,MAAM,CAAC,CAAC;IACnCC,UAAU,EAAEA,CAAA,KAAMV,QAAQ,CAACS,MAAM,CAAC,CAAC;IACnCE,aAAa,EAAGC,IAAY,IAAKX,UAAU,CAACY,WAAW,CAACC,SAAS,CAACF,IAAI,CAAC;IACvEG,QAAQ,EAAEA,CAAA,KAAMd,UAAU,CAACY,WAAW,CAACG,IAAI,CAAC,CAAC;IAC7CC,YAAY,EAAEA,CAAA,KAAMhB,UAAU,CAACY,WAAW,CAACK,SAAS,CAAC,OAAO,CAAC;IAC7DC,mBAAmB,EAAEA,CAAA,KAAMlB,UAAU,CAACY,WAAW,CAACO,gBAAgB,CAAC,CAAC;IACpEC,YAAY,EAAEA,CAAA;IACZ;IACA;IACA;IACAlB,SAAS,CAACe,SAAS,CAAC,OAAO,CAAC;IAC9BI,mBAAmB,EAAEA,CAAA,KAAMnB,SAAS,CAACiB,gBAAgB,CAAC,CAAC;IACvDG,UAAU,EAAEA,CAAA,KAAM5B,SAAS,CAAC4B,UAAU,CAAC,CAAC;IACxC;IACA;IACAC,YAAY,EAAEA,CAAA,KAAMhC,IAAI,CAACM,CAAC,CAAC,YAAY,CAAC,CAAC2B,IAAI,CAAC,UAAU;EAC1D,CAAC;AACH","ignoreList":[]}

package/dist/cjs/components/datetime-input/form-date-time.js

@@ -74,6 +74,7 @@ const _FormDateTime = props => {
       columnNumber: 5
     }
   }, /*#__PURE__*/_react.default.createElement(_designSystem.Layout, {
+    gap: "12px",
     __self: void 0,
     __source: {
       fileName: _jsxFileName,