@wix/patterns-fields 1.72.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_ = "addressinput1990163582";
+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": "addressinput1990163582__root",
-  "tableAddressInput": "addressinput1990163582__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_ = \"addressinput1990163582\";\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\":\"addressinput1990163582__root\",\"tableAddressInput\":\"addressinput1990163582__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":[]}
+{"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/address/input/form-address-input.js

@@ -1,13 +1,13 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
 exports.FormAddressInput = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _common = require("../../common");
 var _hooks = require("../../../hooks");
 var _addressInput = require("./address-input");
 var _jsxFileName = "/home/builduser/work/843658b9f44192f0/packages/fields/dist/cjs/components/address/input/form-address-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 popoverProps = {
   maxWidth: 540,
   appendTo: 'window',
@@ -22,21 +22,10 @@ const FormAddressInput = ({
   dataHook,
   inputRef: forwardedRef
 }) => {
-  const inputRef = (0, _react.useRef)(null);
+  const [inputRef, setInputRef] = (0, _hooks.useMergedRef)(forwardedRef);
   (0, _hooks.useAutoFocus)(inputRef, autoFocus);
-
-  // autoFocus reads the handle from here, so a caller's ref has to be filled
-  // alongside it rather than replacing it.
-  const setRef = (0, _react.useCallback)(handle => {
-    inputRef.current = handle;
-    if (typeof forwardedRef === 'function') {
-      forwardedRef(handle);
-    } else if (forwardedRef) {
-      forwardedRef.current = handle;
-    }
-  }, [forwardedRef]);
   return /*#__PURE__*/_react.default.createElement(_addressInput.AddressInput, {
-    ref: setRef,
+    ref: setInputRef,
     dataHook: dataHook,
     value: data,
     onChange: onChange,
@@ -47,7 +36,7 @@ const FormAddressInput = ({
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 48,
+      lineNumber: 33,
       columnNumber: 5
     }
   });

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

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_common","_hooks","_addressInput","_jsxFileName","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","popoverProps","maxWidth","appendTo","zIndex","Z_INDEX_MODAL_POPOVER","FormAddressInput","data","onChange","onInput","autoFocus","readOnly","dataHook","inputRef","forwardedRef","useRef","useAutoFocus","setRef","useCallback","handle","current","createElement","AddressInput","ref","value","border","__self","__source","fileName","lineNumber","columnNumber","exports","displayName"],"sources":["../../../../../src/components/address/input/form-address-input.tsx"],"sourcesContent":["import React, { useCallback, useRef } from 'react';\n\nimport type { Address } from '../../../types/address';\nimport type { FormInputProps } from '../../../types/form-input';\nimport { Z_INDEX_MODAL_POPOVER } from '../../common';\nimport { useAutoFocus } from '../../../hooks';\n\nimport type { AddressInputImperativeHandle } from './address-input';\nimport { AddressInput } from './address-input';\n\nconst popoverProps = {\n  maxWidth: 540,\n  appendTo: 'window',\n  zIndex: Z_INDEX_MODAL_POPOVER,\n} as const;\n\nexport type FormAddressInputProps = FormInputProps<Address>;\n\nexport const FormAddressInput: React.FC<FormAddressInputProps> = ({\n  data,\n  onChange,\n  onInput,\n  autoFocus,\n  readOnly,\n  dataHook,\n  inputRef: forwardedRef,\n}) => {\n  const inputRef = useRef<AddressInputImperativeHandle | null>(null);\n  useAutoFocus(inputRef, autoFocus);\n\n  // autoFocus reads the handle from here, so a caller's ref has to be filled\n  // alongside it rather than replacing it.\n  const setRef = useCallback(\n    (handle: AddressInputImperativeHandle | null) => {\n      inputRef.current = handle;\n      if (typeof forwardedRef === 'function') {\n        forwardedRef(handle);\n      } else if (forwardedRef) {\n        (\n          forwardedRef as React.MutableRefObject<AddressInputImperativeHandle | null>\n        ).current = handle;\n      }\n    },\n    [forwardedRef],\n  );\n\n  return (\n    <AddressInput\n      ref={setRef}\n      dataHook={dataHook}\n      value={data}\n      onChange={onChange}\n      onInput={onInput}\n      readOnly={readOnly}\n      border=\"standard\"\n      popoverProps={popoverProps}\n    />\n  );\n};\n\nFormAddressInput.displayName = 'FormAddressInput';\n"],"mappings":";;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAIA,IAAAC,OAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA;AAGA,IAAAG,aAAA,GAAAH,OAAA;AAA+C,IAAAI,YAAA;AAAA,SAAAL,wBAAAM,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAR,uBAAA,YAAAA,CAAAM,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;AAE/C,MAAMkB,YAAY,GAAG;EACnBC,QAAQ,EAAE,GAAG;EACbC,QAAQ,EAAE,QAAQ;EAClBC,MAAM,EAAEC;AACV,CAAU;AAIH,MAAMC,gBAAiD,GAAGA,CAAC;EAChEC,IAAI;EACJC,QAAQ;EACRC,OAAO;EACPC,SAAS;EACTC,QAAQ;EACRC,QAAQ;EACRC,QAAQ,EAAEC;AACZ,CAAC,KAAK;EACJ,MAAMD,QAAQ,GAAG,IAAAE,aAAM,EAAsC,IAAI,CAAC;EAClE,IAAAC,mBAAY,EAACH,QAAQ,EAAEH,SAAS,CAAC;;EAEjC;EACA;EACA,MAAMO,MAAM,GAAG,IAAAC,kBAAW,EACvBC,MAA2C,IAAK;IAC/CN,QAAQ,CAACO,OAAO,GAAGD,MAAM;IACzB,IAAI,OAAOL,YAAY,KAAK,UAAU,EAAE;MACtCA,YAAY,CAACK,MAAM,CAAC;IACtB,CAAC,MAAM,IAAIL,YAAY,EAAE;MAErBA,YAAY,CACZM,OAAO,GAAGD,MAAM;IACpB;EACF,CAAC,EACD,CAACL,YAAY,CACf,CAAC;EAED,oBACEvC,MAAA,CAAAiB,OAAA,CAAA6B,aAAA,CAACzC,aAAA,CAAA0C,YAAY;IACXC,GAAG,EAAEN,MAAO;IACZL,QAAQ,EAAEA,QAAS;IACnBY,KAAK,EAAEjB,IAAK;IACZC,QAAQ,EAAEA,QAAS;IACnBC,OAAO,EAAEA,OAAQ;IACjBE,QAAQ,EAAEA,QAAS;IACnBc,MAAM,EAAC,UAAU;IACjBxB,YAAY,EAAEA,YAAa;IAAAyB,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAA/C,YAAA;MAAAgD,UAAA;MAAAC,YAAA;IAAA;EAAA,CAC5B,CAAC;AAEN,CAAC;AAACC,OAAA,CAAAzB,gBAAA,GAAAA,gBAAA;AAEFA,gBAAgB,CAAC0B,WAAW,GAAG,kBAAkB","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireDefault","require","_common","_hooks","_addressInput","_jsxFileName","popoverProps","maxWidth","appendTo","zIndex","Z_INDEX_MODAL_POPOVER","FormAddressInput","data","onChange","onInput","autoFocus","readOnly","dataHook","inputRef","forwardedRef","setInputRef","useMergedRef","useAutoFocus","default","createElement","AddressInput","ref","value","border","__self","__source","fileName","lineNumber","columnNumber","exports","displayName"],"sources":["../../../../../src/components/address/input/form-address-input.tsx"],"sourcesContent":["import React from 'react';\n\nimport type { Address } from '../../../types/address';\nimport type { FormInputProps } from '../../../types/form-input';\nimport { Z_INDEX_MODAL_POPOVER } from '../../common';\nimport { useAutoFocus, useMergedRef } from '../../../hooks';\n\nimport type { AddressInputImperativeHandle } from './address-input';\nimport { AddressInput } from './address-input';\n\nconst popoverProps = {\n  maxWidth: 540,\n  appendTo: 'window',\n  zIndex: Z_INDEX_MODAL_POPOVER,\n} as const;\n\nexport type FormAddressInputProps = FormInputProps<Address>;\n\nexport const FormAddressInput: React.FC<FormAddressInputProps> = ({\n  data,\n  onChange,\n  onInput,\n  autoFocus,\n  readOnly,\n  dataHook,\n  inputRef: forwardedRef,\n}) => {\n  const [inputRef, setInputRef] =\n    useMergedRef<AddressInputImperativeHandle>(forwardedRef);\n  useAutoFocus(inputRef, autoFocus);\n\n  return (\n    <AddressInput\n      ref={setInputRef}\n      dataHook={dataHook}\n      value={data}\n      onChange={onChange}\n      onInput={onInput}\n      readOnly={readOnly}\n      border=\"standard\"\n      popoverProps={popoverProps}\n    />\n  );\n};\n\nFormAddressInput.displayName = 'FormAddressInput';\n"],"mappings":";;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAIA,IAAAC,OAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA;AAGA,IAAAG,aAAA,GAAAH,OAAA;AAA+C,IAAAI,YAAA;AAE/C,MAAMC,YAAY,GAAG;EACnBC,QAAQ,EAAE,GAAG;EACbC,QAAQ,EAAE,QAAQ;EAClBC,MAAM,EAAEC;AACV,CAAU;AAIH,MAAMC,gBAAiD,GAAGA,CAAC;EAChEC,IAAI;EACJC,QAAQ;EACRC,OAAO;EACPC,SAAS;EACTC,QAAQ;EACRC,QAAQ;EACRC,QAAQ,EAAEC;AACZ,CAAC,KAAK;EACJ,MAAM,CAACD,QAAQ,EAAEE,WAAW,CAAC,GAC3B,IAAAC,mBAAY,EAA+BF,YAAY,CAAC;EAC1D,IAAAG,mBAAY,EAACJ,QAAQ,EAAEH,SAAS,CAAC;EAEjC,oBACEhB,MAAA,CAAAwB,OAAA,CAAAC,aAAA,CAACpB,aAAA,CAAAqB,YAAY;IACXC,GAAG,EAAEN,WAAY;IACjBH,QAAQ,EAAEA,QAAS;IACnBU,KAAK,EAAEf,IAAK;IACZC,QAAQ,EAAEA,QAAS;IACnBC,OAAO,EAAEA,OAAQ;IACjBE,QAAQ,EAAEA,QAAS;IACnBY,MAAM,EAAC,UAAU;IACjBtB,YAAY,EAAEA,YAAa;IAAAuB,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAA1B,YAAA;MAAA2B,UAAA;MAAAC,YAAA;IAAA;EAAA,CAC5B,CAAC;AAEN,CAAC;AAACC,OAAA,CAAAvB,gBAAA,GAAAA,gBAAA;AAEFA,gBAAgB,CAACwB,WAAW,GAAG,kBAAkB","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_ = "actionsmenu3350107513";
+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": "actionsmenu3350107513__root",
-  "action": "actionsmenu3350107513__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_ = \"actionsmenu3350107513\";\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\":\"actionsmenu3350107513__root\",\"action\":\"actionsmenu3350107513__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":[]}
+{"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.js

@@ -23,14 +23,15 @@ const FormAudioField = ({
   autoFocus,
   readOnly,
   invalid,
-  dataHook
+  dataHook,
+  inputRef: forwardedRef
 }) => {
   const {
     t
   } = (0, _hooks.useTranslations)();
   const onChange = (0, _hooks.useWithCallback)(onChangeAudio, onInput);
   const onClear = (0, _hooks.useWithCallback)(onClearAudio, onInput);
-  const inputRef = (0, _react.useRef)(null);
+  const [inputRef, setInputRef] = (0, _hooks.useMergedRef)(forwardedRef);
   const viewRef = (0, _react.useRef)(null);
   const {
     callMedia,
@@ -91,14 +92,14 @@ const FormAudioField = ({
       __self: void 0,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 88,
+        lineNumber: 89,
         columnNumber: 12
       }
     });
   }
   if (!data) {
     return /*#__PURE__*/_react.default.createElement(_designSystem.AddItem, {
-      ref: inputRef,
+      ref: setInputRef,
       dataHook: dataHook,
       className: (0, _formAudioFieldStCss.style)(_formAudioFieldStCss.classes.addItem, {
         disabled: !!readOnly,
@@ -111,7 +112,7 @@ const FormAudioField = ({
       __self: void 0,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 93,
+        lineNumber: 94,
         columnNumber: 7
       }
     });
@@ -123,7 +124,7 @@ const FormAudioField = ({
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 109,
+      lineNumber: 110,
       columnNumber: 5
     }
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -132,7 +133,7 @@ const FormAudioField = ({
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 110,
+      lineNumber: 111,
       columnNumber: 7
     }
   }, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
@@ -144,7 +145,7 @@ const FormAudioField = ({
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 111,
+      lineNumber: 112,
       columnNumber: 9
     }
   }, /*#__PURE__*/_react.default.createElement(_designSystem.Text, {
@@ -153,7 +154,7 @@ const FormAudioField = ({
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 118,
+      lineNumber: 119,
       columnNumber: 11
     }
   }, (0, _utils.getMediaTitle)(data)), /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
@@ -163,7 +164,7 @@ const FormAudioField = ({
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 124,
+      lineNumber: 125,
       columnNumber: 11
     }
   }, /*#__PURE__*/_react.default.createElement(_designSystem.AudioPlayer, {
@@ -174,7 +175,7 @@ const FormAudioField = ({
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 125,
+      lineNumber: 126,
       columnNumber: 13
     }
   }), /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
@@ -183,7 +184,7 @@ const FormAudioField = ({
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 131,
+      lineNumber: 132,
       columnNumber: 13
     }
   }, /*#__PURE__*/_react.default.createElement(_actionsButton.ActionsButton, {
@@ -194,7 +195,7 @@ const FormAudioField = ({
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 132,
+      lineNumber: 133,
       columnNumber: 15
     }
   }))))));

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

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_autoFieldTypes","_designSystem","_hooks","_utils","_common","_mediaControl","_mediaLoader","_actionsButton","_audioActions","_formAudioFieldStCss","_jsxFileName","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","FormAudioField","data","onChange","onChangeAudio","onClear","onClearAudio","onInput","autoFocus","readOnly","invalid","dataHook","useTranslations","useWithCallback","inputRef","useRef","viewRef","callMedia","onMediaLoad","downloadMedia","loading","useMediaControl","mediaType","MEDIA_TYPES","AUDIO","value","handleReplace","handleDownload","handleDelete","useMediaHandlers","next","actionsMenuProps","useMemo","actions","buildAudioActions","labels","replace","download","delete","dataHooks","onReplace","onDownload","onDelete","appendTo","flip","zIndex","Z_INDEX_MODAL_POPOVER","createElement","MediaLoader","borderStyle","className","classes","addItem","__self","__source","fileName","lineNumber","columnNumber","AddItem","ref","style","disabled","error","theme","onClick","children","Box","direction","gap","tabIndex","verticalAlign","backgroundColor","padding","borderRadius","Text","mediaTitle","getMediaTitle","marginTop","marginBottom","AudioPlayer","src","getMediaURL","onLoad","onLoadError","marginLeft","ActionsButton","priority","skin","exports"],"sources":["../../../../../src/components/audio/audio-field/form-audio-field.tsx"],"sourcesContent":["import type { FC } from 'react';\nimport React, { useRef, useMemo } from 'react';\n\nimport { getMediaURL } from '../../../auto-field-types';\nimport type { AddItemActions } from '@wix/design-system';\nimport { AddItem, AudioPlayer, Box, Text } from '@wix/design-system';\n\nimport { useTranslations, useWithCallback } from '../../../hooks';\nimport { getMediaTitle, MEDIA_TYPES } from '../../../utils';\n\nimport { Z_INDEX_MODAL_POPOVER } from '../../common';\nimport type { FormMediaControlProps } from '../../media-control';\nimport { useMediaControl, useMediaHandlers } from '../../media-control';\nimport { MediaLoader } from '../../media-loader';\nimport { ActionsButton } from '../actions/actions-button';\nimport { buildAudioActions } from '../actions/audio-actions';\n\nimport { style, classes } from './form-audio-field.st.css.js';\n\nexport const FormAudioField: FC<FormMediaControlProps> = ({\n  data,\n  onChange: onChangeAudio,\n  onClear: onClearAudio,\n  onInput,\n  autoFocus,\n  readOnly,\n  invalid,\n  dataHook,\n}) => {\n  const { t } = useTranslations();\n\n  const onChange = useWithCallback(onChangeAudio, onInput);\n  const onClear = useWithCallback(onClearAudio, onInput);\n\n  const inputRef = useRef<AddItemActions>(null);\n  const viewRef = useRef<HTMLDivElement>(null);\n\n  const { callMedia, onMediaLoad, downloadMedia, loading } = useMediaControl({\n    mediaType: MEDIA_TYPES.AUDIO,\n    value: data,\n    onChange,\n    autoFocus,\n    readOnly,\n    inputRef,\n    viewRef,\n  });\n\n  const { handleReplace, handleDownload, handleDelete } = useMediaHandlers({\n    value: data ?? null,\n    callMedia,\n    downloadMedia,\n    onChange: (next) => {\n      if (next === null) {\n        onClear();\n      } else {\n        onChange(next);\n      }\n    },\n  });\n\n  const actionsMenuProps = useMemo(\n    () => ({\n      dataHook: 'fromAudioInput.moreActionsMenu',\n      actions: buildAudioActions({\n        labels: {\n          replace: t('CMS.audio.button.replace'),\n          download: t('CMS.audio.button.download'),\n          delete: t('CMS.audio.button.delete'),\n        },\n        dataHooks: {\n          replace: 'fromAudioInput.button.replace',\n          download: 'fromAudioInput.button.download',\n          delete: 'fromAudioInput.button.delete',\n        },\n        onReplace: handleReplace,\n        onDownload: handleDownload,\n        onDelete: handleDelete,\n        readOnly,\n      }),\n      appendTo: 'window' as const,\n      flip: true,\n      zIndex: Z_INDEX_MODAL_POPOVER,\n    }),\n    [t, readOnly, handleReplace, handleDownload, handleDelete],\n  );\n\n  if (loading) {\n    return <MediaLoader borderStyle=\"dashed\" className={classes.addItem} />;\n  }\n\n  if (!data) {\n    return (\n      <AddItem\n        ref={inputRef}\n        dataHook={dataHook}\n        className={style(classes.addItem, {\n          disabled: !!readOnly,\n          error: invalid,\n        })}\n        theme=\"dashes\"\n        onClick={callMedia}\n        disabled={readOnly}\n        children={t('CMS.audio.button.add')}\n      />\n    );\n  }\n\n  return (\n    <Box dataHook={dataHook} direction=\"vertical\" gap=\"S1\">\n      <div ref={viewRef} tabIndex={0}>\n        <Box\n          direction=\"vertical\"\n          verticalAlign=\"middle\"\n          backgroundColor=\"D70\"\n          padding=\"SP5\"\n          borderRadius={12}\n        >\n          <Text\n            dataHook=\"fromAudioInput.audioName\"\n            className={classes.mediaTitle}\n          >\n            {getMediaTitle(data)}\n          </Text>\n          <Box direction=\"horizontal\" marginTop=\"9px\" marginBottom=\"-3px\">\n            <AudioPlayer\n              dataHook=\"fromAudioInput.player\"\n              src={getMediaURL(data)}\n              onLoad={onMediaLoad}\n              onLoadError={onMediaLoad}\n            />\n            <Box marginLeft=\"SP3\" gap=\"SP1\">\n              <ActionsButton\n                dataHook=\"fromAudioInput.button.more\"\n                actionsMenuProps={actionsMenuProps}\n                priority=\"secondary\"\n                skin=\"inverted\"\n              />\n            </Box>\n          </Box>\n        </Box>\n      </div>\n    </Box>\n  );\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_autoFieldTypes","_designSystem","_hooks","_utils","_common","_mediaControl","_mediaLoader","_actionsButton","_audioActions","_formAudioFieldStCss","_jsxFileName","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","FormAudioField","data","onChange","onChangeAudio","onClear","onClearAudio","onInput","autoFocus","readOnly","invalid","dataHook","inputRef","forwardedRef","useTranslations","useWithCallback","setInputRef","useMergedRef","viewRef","useRef","callMedia","onMediaLoad","downloadMedia","loading","useMediaControl","mediaType","MEDIA_TYPES","AUDIO","value","handleReplace","handleDownload","handleDelete","useMediaHandlers","next","actionsMenuProps","useMemo","actions","buildAudioActions","labels","replace","download","delete","dataHooks","onReplace","onDownload","onDelete","appendTo","flip","zIndex","Z_INDEX_MODAL_POPOVER","createElement","MediaLoader","borderStyle","className","classes","addItem","__self","__source","fileName","lineNumber","columnNumber","AddItem","ref","style","disabled","error","theme","onClick","children","Box","direction","gap","tabIndex","verticalAlign","backgroundColor","padding","borderRadius","Text","mediaTitle","getMediaTitle","marginTop","marginBottom","AudioPlayer","src","getMediaURL","onLoad","onLoadError","marginLeft","ActionsButton","priority","skin","exports"],"sources":["../../../../../src/components/audio/audio-field/form-audio-field.tsx"],"sourcesContent":["import type { FC } from 'react';\nimport React, { useRef, useMemo } from 'react';\n\nimport { getMediaURL } from '../../../auto-field-types';\nimport type { AddItemActions } from '@wix/design-system';\nimport { AddItem, AudioPlayer, Box, Text } from '@wix/design-system';\n\nimport { useMergedRef, useTranslations, useWithCallback } from '../../../hooks';\nimport { getMediaTitle, MEDIA_TYPES } from '../../../utils';\n\nimport { Z_INDEX_MODAL_POPOVER } from '../../common';\nimport type { FormMediaControlProps } from '../../media-control';\nimport { useMediaControl, useMediaHandlers } from '../../media-control';\nimport { MediaLoader } from '../../media-loader';\nimport { ActionsButton } from '../actions/actions-button';\nimport { buildAudioActions } from '../actions/audio-actions';\n\nimport { style, classes } from './form-audio-field.st.css.js';\n\nexport const FormAudioField: FC<FormMediaControlProps> = ({\n  data,\n  onChange: onChangeAudio,\n  onClear: onClearAudio,\n  onInput,\n  autoFocus,\n  readOnly,\n  invalid,\n  dataHook,\n  inputRef: forwardedRef,\n}) => {\n  const { t } = useTranslations();\n\n  const onChange = useWithCallback(onChangeAudio, onInput);\n  const onClear = useWithCallback(onClearAudio, onInput);\n\n  const [inputRef, setInputRef] = useMergedRef<AddItemActions>(forwardedRef);\n  const viewRef = useRef<HTMLDivElement>(null);\n\n  const { callMedia, onMediaLoad, downloadMedia, loading } = useMediaControl({\n    mediaType: MEDIA_TYPES.AUDIO,\n    value: data,\n    onChange,\n    autoFocus,\n    readOnly,\n    inputRef,\n    viewRef,\n  });\n\n  const { handleReplace, handleDownload, handleDelete } = useMediaHandlers({\n    value: data ?? null,\n    callMedia,\n    downloadMedia,\n    onChange: (next) => {\n      if (next === null) {\n        onClear();\n      } else {\n        onChange(next);\n      }\n    },\n  });\n\n  const actionsMenuProps = useMemo(\n    () => ({\n      dataHook: 'fromAudioInput.moreActionsMenu',\n      actions: buildAudioActions({\n        labels: {\n          replace: t('CMS.audio.button.replace'),\n          download: t('CMS.audio.button.download'),\n          delete: t('CMS.audio.button.delete'),\n        },\n        dataHooks: {\n          replace: 'fromAudioInput.button.replace',\n          download: 'fromAudioInput.button.download',\n          delete: 'fromAudioInput.button.delete',\n        },\n        onReplace: handleReplace,\n        onDownload: handleDownload,\n        onDelete: handleDelete,\n        readOnly,\n      }),\n      appendTo: 'window' as const,\n      flip: true,\n      zIndex: Z_INDEX_MODAL_POPOVER,\n    }),\n    [t, readOnly, handleReplace, handleDownload, handleDelete],\n  );\n\n  if (loading) {\n    return <MediaLoader borderStyle=\"dashed\" className={classes.addItem} />;\n  }\n\n  if (!data) {\n    return (\n      <AddItem\n        ref={setInputRef}\n        dataHook={dataHook}\n        className={style(classes.addItem, {\n          disabled: !!readOnly,\n          error: invalid,\n        })}\n        theme=\"dashes\"\n        onClick={callMedia}\n        disabled={readOnly}\n        children={t('CMS.audio.button.add')}\n      />\n    );\n  }\n\n  return (\n    <Box dataHook={dataHook} direction=\"vertical\" gap=\"S1\">\n      <div ref={viewRef} tabIndex={0}>\n        <Box\n          direction=\"vertical\"\n          verticalAlign=\"middle\"\n          backgroundColor=\"D70\"\n          padding=\"SP5\"\n          borderRadius={12}\n        >\n          <Text\n            dataHook=\"fromAudioInput.audioName\"\n            className={classes.mediaTitle}\n          >\n            {getMediaTitle(data)}\n          </Text>\n          <Box direction=\"horizontal\" marginTop=\"9px\" marginBottom=\"-3px\">\n            <AudioPlayer\n              dataHook=\"fromAudioInput.player\"\n              src={getMediaURL(data)}\n              onLoad={onMediaLoad}\n              onLoadError={onMediaLoad}\n            />\n            <Box marginLeft=\"SP3\" gap=\"SP1\">\n              <ActionsButton\n                dataHook=\"fromAudioInput.button.more\"\n                actionsMenuProps={actionsMenuProps}\n                priority=\"secondary\"\n                skin=\"inverted\"\n              />\n            </Box>\n          </Box>\n        </Box>\n      </div>\n    </Box>\n  );\n};\n"],"mappings":";;;;AACA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAEA,IAAAC,eAAA,GAAAD,OAAA;AAEA,IAAAE,aAAA,GAAAF,OAAA;AAEA,IAAAG,MAAA,GAAAH,OAAA;AACA,IAAAI,MAAA,GAAAJ,OAAA;AAEA,IAAAK,OAAA,GAAAL,OAAA;AAEA,IAAAM,aAAA,GAAAN,OAAA;AACA,IAAAO,YAAA,GAAAP,OAAA;AACA,IAAAQ,cAAA,GAAAR,OAAA;AACA,IAAAS,aAAA,GAAAT,OAAA;AAEA,IAAAU,oBAAA,GAAAV,OAAA;AAA8D,IAAAW,YAAA;AAAA,SAAAZ,wBAAAa,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAf,uBAAA,YAAAA,CAAAa,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;AAEvD,MAAMkB,cAAyC,GAAGA,CAAC;EACxDC,IAAI;EACJC,QAAQ,EAAEC,aAAa;EACvBC,OAAO,EAAEC,YAAY;EACrBC,OAAO;EACPC,SAAS;EACTC,QAAQ;EACRC,OAAO;EACPC,QAAQ;EACRC,QAAQ,EAAEC;AACZ,CAAC,KAAK;EACJ,MAAM;IAAE9B;EAAE,CAAC,GAAG,IAAA+B,sBAAe,EAAC,CAAC;EAE/B,MAAMX,QAAQ,GAAG,IAAAY,sBAAe,EAACX,aAAa,EAAEG,OAAO,CAAC;EACxD,MAAMF,OAAO,GAAG,IAAAU,sBAAe,EAACT,YAAY,EAAEC,OAAO,CAAC;EAEtD,MAAM,CAACK,QAAQ,EAAEI,WAAW,CAAC,GAAG,IAAAC,mBAAY,EAAiBJ,YAAY,CAAC;EAC1E,MAAMK,OAAO,GAAG,IAAAC,aAAM,EAAiB,IAAI,CAAC;EAE5C,MAAM;IAAEC,SAAS;IAAEC,WAAW;IAAEC,aAAa;IAAEC;EAAQ,CAAC,GAAG,IAAAC,6BAAe,EAAC;IACzEC,SAAS,EAAEC,kBAAW,CAACC,KAAK;IAC5BC,KAAK,EAAE1B,IAAI;IACXC,QAAQ;IACRK,SAAS;IACTC,QAAQ;IACRG,QAAQ;IACRM;EACF,CAAC,CAAC;EAEF,MAAM;IAAEW,aAAa;IAAEC,cAAc;IAAEC;EAAa,CAAC,GAAG,IAAAC,8BAAgB,EAAC;IACvEJ,KAAK,EAAE1B,IAAI,IAAI,IAAI;IACnBkB,SAAS;IACTE,aAAa;IACbnB,QAAQ,EAAG8B,IAAI,IAAK;MAClB,IAAIA,IAAI,KAAK,IAAI,EAAE;QACjB5B,OAAO,CAAC,CAAC;MACX,CAAC,MAAM;QACLF,QAAQ,CAAC8B,IAAI,CAAC;MAChB;IACF;EACF,CAAC,CAAC;EAEF,MAAMC,gBAAgB,GAAG,IAAAC,cAAO,EAC9B,OAAO;IACLxB,QAAQ,EAAE,gCAAgC;IAC1CyB,OAAO,EAAE,IAAAC,+BAAiB,EAAC;MACzBC,MAAM,EAAE;QACNC,OAAO,EAAExD,CAAC,CAAC,0BAA0B,CAAC;QACtCyD,QAAQ,EAAEzD,CAAC,CAAC,2BAA2B,CAAC;QACxC0D,MAAM,EAAE1D,CAAC,CAAC,yBAAyB;MACrC,CAAC;MACD2D,SAAS,EAAE;QACTH,OAAO,EAAE,+BAA+B;QACxCC,QAAQ,EAAE,gCAAgC;QAC1CC,MAAM,EAAE;MACV,CAAC;MACDE,SAAS,EAAEd,aAAa;MACxBe,UAAU,EAAEd,cAAc;MAC1Be,QAAQ,EAAEd,YAAY;MACtBtB;IACF,CAAC,CAAC;IACFqC,QAAQ,EAAE,QAAiB;IAC3BC,IAAI,EAAE,IAAI;IACVC,MAAM,EAAEC;EACV,CAAC,CAAC,EACF,CAAClE,CAAC,EAAE0B,QAAQ,EAAEoB,aAAa,EAAEC,cAAc,EAAEC,YAAY,CAC3D,CAAC;EAED,IAAIR,OAAO,EAAE;IACX,oBAAOvD,MAAA,CAAAwB,OAAA,CAAA0D,aAAA,CAACzE,YAAA,CAAA0E,WAAW;MAACC,WAAW,EAAC,QAAQ;MAACC,SAAS,EAAEC,4BAAO,CAACC,OAAQ;MAAAC,MAAA;MAAAC,QAAA;QAAAC,QAAA,EAAA7E,YAAA;QAAA8E,UAAA;QAAAC,YAAA;MAAA;IAAA,CAAE,CAAC;EACzE;EAEA,IAAI,CAAC1D,IAAI,EAAE;IACT,oBACElC,MAAA,CAAAwB,OAAA,CAAA0D,aAAA,CAAC9E,aAAA,CAAAyF,OAAO;MACNC,GAAG,EAAE9C,WAAY;MACjBL,QAAQ,EAAEA,QAAS;MACnB0C,SAAS,EAAE,IAAAU,0BAAK,EAACT,4BAAO,CAACC,OAAO,EAAE;QAChCS,QAAQ,EAAE,CAAC,CAACvD,QAAQ;QACpBwD,KAAK,EAAEvD;MACT,CAAC,CAAE;MACHwD,KAAK,EAAC,QAAQ;MACdC,OAAO,EAAE/C,SAAU;MACnB4C,QAAQ,EAAEvD,QAAS;MACnB2D,QAAQ,EAAErF,CAAC,CAAC,sBAAsB,CAAE;MAAAyE,MAAA;MAAAC,QAAA;QAAAC,QAAA,EAAA7E,YAAA;QAAA8E,UAAA;QAAAC,YAAA;MAAA;IAAA,CACrC,CAAC;EAEN;EAEA,oBACE5F,MAAA,CAAAwB,OAAA,CAAA0D,aAAA,CAAC9E,aAAA,CAAAiG,GAAG;IAAC1D,QAAQ,EAAEA,QAAS;IAAC2D,SAAS,EAAC,UAAU;IAACC,GAAG,EAAC,IAAI;IAAAf,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAA7E,YAAA;MAAA8E,UAAA;MAAAC,YAAA;IAAA;EAAA,gBACpD5F,MAAA,CAAAwB,OAAA,CAAA0D,aAAA;IAAKY,GAAG,EAAE5C,OAAQ;IAACsD,QAAQ,EAAE,CAAE;IAAAhB,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAA7E,YAAA;MAAA8E,UAAA;MAAAC,YAAA;IAAA;EAAA,gBAC7B5F,MAAA,CAAAwB,OAAA,CAAA0D,aAAA,CAAC9E,aAAA,CAAAiG,GAAG;IACFC,SAAS,EAAC,UAAU;IACpBG,aAAa,EAAC,QAAQ;IACtBC,eAAe,EAAC,KAAK;IACrBC,OAAO,EAAC,KAAK;IACbC,YAAY,EAAE,EAAG;IAAApB,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAA7E,YAAA;MAAA8E,UAAA;MAAAC,YAAA;IAAA;EAAA,gBAEjB5F,MAAA,CAAAwB,OAAA,CAAA0D,aAAA,CAAC9E,aAAA,CAAAyG,IAAI;IACHlE,QAAQ,EAAC,0BAA0B;IACnC0C,SAAS,EAAEC,4BAAO,CAACwB,UAAW;IAAAtB,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAA7E,YAAA;MAAA8E,UAAA;MAAAC,YAAA;IAAA;EAAA,GAE7B,IAAAmB,oBAAa,EAAC7E,IAAI,CACf,CAAC,eACPlC,MAAA,CAAAwB,OAAA,CAAA0D,aAAA,CAAC9E,aAAA,CAAAiG,GAAG;IAACC,SAAS,EAAC,YAAY;IAACU,SAAS,EAAC,KAAK;IAACC,YAAY,EAAC,MAAM;IAAAzB,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAA7E,YAAA;MAAA8E,UAAA;MAAAC,YAAA;IAAA;EAAA,gBAC7D5F,MAAA,CAAAwB,OAAA,CAAA0D,aAAA,CAAC9E,aAAA,CAAA8G,WAAW;IACVvE,QAAQ,EAAC,uBAAuB;IAChCwE,GAAG,EAAE,IAAAC,2BAAW,EAAClF,IAAI,CAAE;IACvBmF,MAAM,EAAEhE,WAAY;IACpBiE,WAAW,EAAEjE,WAAY;IAAAmC,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAA7E,YAAA;MAAA8E,UAAA;MAAAC,YAAA;IAAA;EAAA,CAC1B,CAAC,eACF5F,MAAA,CAAAwB,OAAA,CAAA0D,aAAA,CAAC9E,aAAA,CAAAiG,GAAG;IAACkB,UAAU,EAAC,KAAK;IAAChB,GAAG,EAAC,KAAK;IAAAf,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAA7E,YAAA;MAAA8E,UAAA;MAAAC,YAAA;IAAA;EAAA,gBAC7B5F,MAAA,CAAAwB,OAAA,CAAA0D,aAAA,CAACxE,cAAA,CAAA8G,aAAa;IACZ7E,QAAQ,EAAC,4BAA4B;IACrCuB,gBAAgB,EAAEA,gBAAiB;IACnCuD,QAAQ,EAAC,WAAW;IACpBC,IAAI,EAAC,UAAU;IAAAlC,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAA7E,YAAA;MAAA8E,UAAA;MAAAC,YAAA;IAAA;EAAA,CAChB,CACE,CACF,CACF,CACF,CACF,CAAC;AAEV,CAAC;AAAC+B,OAAA,CAAA1F,cAAA,GAAAA,cAAA","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_ = "formaudiofield4179309703";
+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": "formaudiofield4179309703__root",
-  "addItem": "formaudiofield4179309703__addItem",
-  "mediaTitle": "formaudiofield4179309703__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_ = \"formaudiofield4179309703\";\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\":\"formaudiofield4179309703__root\",\"addItem\":\"formaudiofield4179309703__addItem\",\"mediaTitle\":\"formaudiofield4179309703__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":[]}
+{"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,10 +47,15 @@ const _FormAudio = props => {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 34,
+      lineNumber: 37,
       columnNumber: 5
     }
-  }, /*#__PURE__*/_react.default.createElement(_formAudioField.FormAudioField, {
+  }, /*#__PURE__*/_react.default.createElement(_formAudioField.FormAudioField
+  // Hand the add button to react-hook-form so
+  // shouldFocusError scrolls to + focuses this field when it
+  // blocks save.
+  , {
+    inputRef: setFieldRef,
     data: controller.field.value,
     onChange: value => controller.field.onChange(value),
     onClear: () => controller.field.onChange(null),
@@ -56,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","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        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,cAAc;IACbjC,IAAI,EAAEI,UAAU,CAACP,KAAK,CAACe,KAAM;IAC7BsB,QAAQ,EAAGtB,KAAK,IAAKR,UAAU,CAACP,KAAK,CAACqC,QAAQ,CAACtB,KAAK,CAAE;IACtDuB,OAAO,EAAEA,CAAA,KAAM/B,UAAU,CAACP,KAAK,CAACqC,QAAQ,CAAC,IAAI,CAAE;IAC/CpC,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,MAAMI,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAG,IAAAE,uBAAQ,EAAC7C,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_ = "audioplayer3525516735";
+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": "audioplayer3525516735__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_ = \"audioplayer3525516735\";\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\":\"audioplayer3525516735__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_ = "cellcolorview2573090781";
+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": "cellcolorview2573090781__root",
-  "hashPrefix": "cellcolorview2573090781__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_ = \"cellcolorview2573090781\";\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\":\"cellcolorview2573090781__root\",\"hashPrefix\":\"cellcolorview2573090781__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
       }
     })))),