@wix/auto-patterns 1.45.0 → 1.47.0

package/dist/esm/cms-fields/components/address/input/address-input.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","forwardRef","useImperativeHandle","useCallback","useEffect","useState","useMemo","useRef","isEqual","debounce","AddressInput","WDSAddressInput","addressInputItemBuilder","atlasAddressToAddress","WixAtlasService","useControlledInput","useReverseValue","useClearValue","useSetSelectionOnFocus","useRequestFrameCallback","useTranslations","noop","SEARCH_ADDRESS_DEBOUNCE","_ref","forwardedRef","value","onChange","onInput","readOnly","onFocus","onBlur","status","onSelectAddress","reverseOnEscape","atlasService","props","atlas","t","address","setAddress","prevAddressRef","reverseAddress","clearAddress","triggerOnChange","commonAddress","changedValue","inputValue","setInputValue","prevInputValueRef","formatted","reverseInputValue","clearInputValue","isSearching","setIsSearching","searchResults","setSearchResults","searchResultsError","setSearchResultsError","searchAddress","query","undefined","then","catch","finally","cancel","onInputChange","_ref2","target","trimmedValue","trim","addressInputRef","focus","_addressInputRef$curr","current","clear","isFocusedRef","onSetSelection","onInputFocus","e","onInputBlur","isMountedRef","requestFrameCallback","onSelect","option","index","Number","id","selectedAddress","inputStatus","onMouseDown","tagName","preventDefault","onKeyDown","key","options","map","addr","_addr$formatted","mainLabel","secondaryLabelParts","split","displayLabel","secondaryLabel","join","optionLayout","createElement","_extends","dataHook","ref","disabled","placeholder","clearButton","autoSelect","displayName"],"sources":["../../../../../../src/cms-fields/components/address/input/address-input.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  useImperativeHandle,\n  useCallback,\n  useEffect,\n  useState,\n  useMemo,\n  useRef,\n} from 'react';\n\nimport isEqual from 'lodash/isEqual';\nimport debounce from 'lodash/debounce';\nimport type { Address } from '../../../types/address';\nimport type {\n  AddressInputProps as WDSAddressInputProps,\n  DropdownLayoutValueOption,\n} from '@wix/design-system';\nimport type { AddressInputRef as WDSAddressInputRef } from '@wix/design-system/dist/types/AddressInput/AddressInput';\nimport {\n  AddressInput as WDSAddressInput,\n  addressInputItemBuilder,\n} from '@wix/design-system';\n\nimport type { AtlasAddress, AtlasService } from '../../../services/atlas';\nimport { atlasAddressToAddress } from '../../../services/atlas/utils';\nimport { WixAtlasService } from '../../../services/atlas/wix-atlas-service';\nimport {\n  useControlledInput,\n  useReverseValue,\n  useClearValue,\n  useSetSelectionOnFocus,\n  useRequestFrameCallback,\n  useTranslations,\n} from '../../../hooks';\nimport { noop } from '../../../utils';\n\nconst SEARCH_ADDRESS_DEBOUNCE = 250;\n\nexport interface AddressInputProps\n  extends Omit<\n    WDSAddressInputProps,\n    'value' | 'onChange' | 'onSelect' | 'disabled'\n  > {\n  value?: Address;\n  onChange?: (value?: Address) => void;\n  onInput?: () => void;\n  onSelectAddress?: () => void;\n  readOnly?: boolean;\n  reverseOnEscape?: boolean;\n  /** Optional atlas service for address search. Defaults to WixAtlasService. Useful for testing. */\n  atlasService?: AtlasService;\n}\n\nexport interface AddressInputImperativeHandle {\n  focus: () => void;\n  clear: () => void;\n}\n\nexport const AddressInput = forwardRef<\n  AddressInputImperativeHandle,\n  AddressInputProps\n>(\n  (\n    {\n      value,\n      onChange,\n      onInput,\n      readOnly,\n      onFocus,\n      onBlur,\n      status,\n      onSelectAddress = noop,\n      reverseOnEscape,\n      atlasService,\n      ...props\n    },\n    forwardedRef,\n  ) => {\n    const atlas = useMemo(\n      () => atlasService ?? new WixAtlasService(),\n      [atlasService],\n    );\n    const { t } = useTranslations();\n\n    const [address, setAddress, prevAddressRef] = useControlledInput(value);\n    const reverseAddress = useReverseValue(setAddress, prevAddressRef);\n    const clearAddress = useClearValue(setAddress);\n\n    const triggerOnChange = useCallback(\n      (commonAddress?: AtlasAddress) => {\n        const changedValue =\n          commonAddress && atlasAddressToAddress(commonAddress);\n        !isEqual(value, changedValue) && onChange?.(changedValue);\n      },\n      [value, onChange],\n    );\n\n    const [inputValue, setInputValue, prevInputValueRef] = useControlledInput(\n      address?.formatted ?? '',\n    );\n    const reverseInputValue = useReverseValue(setInputValue, prevInputValueRef);\n    const clearInputValue = useClearValue(setInputValue, '');\n\n    const [isSearching, setIsSearching] = useState(false);\n    const [searchResults, setSearchResults] = useState<AtlasAddress[]>([]);\n    const [searchResultsError, setSearchResultsError] = useState<Error>();\n    const searchAddress = useMemo(\n      () =>\n        debounce((query: string) => {\n          setIsSearching(true);\n          setSearchResultsError(undefined);\n          return atlas\n            .searchAddress(query)\n            .then(setSearchResults)\n            .catch(setSearchResultsError)\n            .finally(() => setIsSearching(false));\n        }, SEARCH_ADDRESS_DEBOUNCE),\n      [atlas],\n    );\n    useEffect(\n      () => () => {\n        searchAddress.cancel();\n      },\n      [searchAddress],\n    );\n\n    const onInputChange = useCallback(\n      ({ target }: React.ChangeEvent<HTMLInputElement>) => {\n        onInput?.();\n        setInputValue(target.value);\n\n        const trimmedValue = target.value.trim();\n\n        if (trimmedValue) {\n          searchAddress(trimmedValue);\n        } else {\n          setAddress(undefined);\n          setSearchResults([]);\n\n          setIsSearching(false);\n          setSearchResultsError(undefined);\n        }\n      },\n      [onInput, setAddress, setInputValue, searchAddress],\n    );\n\n    const addressInputRef = useRef<WDSAddressInputRef>(null);\n    useImperativeHandle(\n      forwardedRef,\n      () => ({\n        focus: () => addressInputRef.current?.focus(),\n        clear: () => {\n          clearAddress();\n          clearInputValue();\n        },\n      }),\n      [clearAddress, clearInputValue],\n    );\n\n    const isFocusedRef = useRef(false);\n    const onSetSelection = useSetSelectionOnFocus();\n    const onInputFocus = useCallback(\n      (e?: React.FocusEvent<HTMLInputElement>) => {\n        isFocusedRef.current = true;\n        onSetSelection(e);\n        onFocus?.(e);\n      },\n      [onSetSelection, onFocus],\n    );\n    const onInputBlur = useCallback(\n      (e: React.FocusEvent<HTMLInputElement>) => {\n        setSearchResultsError(undefined);\n        isFocusedRef.current = false;\n        onBlur?.(e);\n      },\n      [onBlur],\n    );\n\n    const isMountedRef = useRef(true);\n    useEffect(\n      () => () => {\n        isMountedRef.current = false;\n      },\n      [],\n    );\n\n    const requestFrameCallback = useRequestFrameCallback();\n    const onSelect = useCallback(\n      async (option: DropdownLayoutValueOption) => {\n        const index = Number(option.id);\n        const selectedAddress = searchResults[index];\n\n        if (!selectedAddress) {\n          return;\n        }\n\n        onInput?.();\n        setInputValue(selectedAddress.formatted ?? '');\n        triggerOnChange(selectedAddress);\n        requestFrameCallback(onSelectAddress);\n      },\n      [\n        onInput,\n        onSelectAddress,\n        requestFrameCallback,\n        searchResults,\n        setInputValue,\n        triggerOnChange,\n      ],\n    );\n\n    const inputStatus = useMemo(() => {\n      if (isSearching) {\n        return 'loading';\n      }\n\n      if (searchResultsError) {\n        return 'error';\n      }\n\n      return status;\n    }, [isSearching, searchResultsError, status]);\n\n    const onMouseDown = useCallback((e: React.MouseEvent<HTMLDivElement>) => {\n      const target = e.target as HTMLElement;\n\n      if (target.tagName !== 'INPUT') {\n        e.preventDefault();\n      }\n    }, []);\n\n    const onKeyDown = useCallback(\n      (e: React.KeyboardEvent) => {\n        const target = e.target as HTMLInputElement;\n\n        if (target.tagName !== 'INPUT') {\n          return;\n        }\n\n        if (e.key === 'Escape') {\n          if (reverseOnEscape) {\n            reverseAddress();\n            reverseInputValue();\n            return;\n          }\n\n          if (target.value) {\n            triggerOnChange(prevAddressRef.current);\n          } else {\n            triggerOnChange(undefined);\n          }\n\n          onSelectAddress();\n        }\n      },\n      [\n        prevAddressRef,\n        triggerOnChange,\n        onSelectAddress,\n        reverseOnEscape,\n        reverseAddress,\n        reverseInputValue,\n      ],\n    );\n\n    const options = useMemo(\n      () =>\n        searchResults.map((addr, index) => {\n          const [mainLabel, ...secondaryLabelParts] =\n            addr?.formatted?.split(', ') ?? [];\n\n          return addressInputItemBuilder({\n            id: index,\n            displayLabel: addr.formatted ?? '',\n            mainLabel: mainLabel ?? '',\n            secondaryLabel: secondaryLabelParts.join(', '),\n            optionLayout: 'single-line',\n          });\n        }),\n      [searchResults],\n    );\n\n    return (\n      <div onMouseDown={onMouseDown} onKeyDown={onKeyDown}>\n        <WDSAddressInput\n          dataHook=\"address-input\"\n          {...props}\n          ref={addressInputRef}\n          disabled={readOnly}\n          placeholder={t('auto-patterns.fields.field_type_address_placeholder')}\n          options={options}\n          clearButton={false}\n          onSelect={onSelect}\n          value={inputValue}\n          onChange={onInputChange}\n          onFocus={onInputFocus}\n          onBlur={onInputBlur}\n          autoSelect={false}\n          status={inputStatus}\n        />\n      </div>\n    );\n  },\n);\n\nAddressInput.displayName = 'AddressInput';\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/cms-fields/components/address/input/address-input.st.css

@@ -0,0 +1,17 @@
+.tableAddressInput {
+    height: 36px !important;
+    margin-left: -1px;
+    display: flex !important;
+    align-items: center;
+    width: 100%;
+}
+
+.tableAddressInput > div {
+    padding: 0 !important;
+    width: 100%;
+}
+
+.tableAddressInput:focus-within {
+    margin-left: 2px;
+}
+

package/dist/esm/cms-fields/components/address/input/address-input.st.css.js

@@ -0,0 +1,19 @@
+// @ts-nocheck
+
+import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.js";
+var _namespace_ = "addressinput4009507416";
+var _style_ = classesRuntime.bind(null, _namespace_);
+export var cssStates = statesRuntime.bind(null, _namespace_);
+export var style = _style_;
+export var st = _style_;
+export var namespace = _namespace_;
+export var classes = {
+  "root": "addressinput4009507416__root",
+  "tableAddressInput": "addressinput4009507416__tableAddressInput"
+};
+export var keyframes = {};
+export var layers = {};
+export var containers = {};
+export var stVars = {};
+export var vars = {};
+//# sourceMappingURL=address-input.st.css.js.map

package/dist/esm/cms-fields/components/address/input/address-input.st.css.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["classesRuntime","statesRuntime","_namespace_","_style_","bind","cssStates","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../../../src/cms-fields/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_ = \"addressinput4009507416\";\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\":\"addressinput4009507416__root\",\"tableAddressInput\":\"addressinput4009507416__tableAddressInput\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {}; \n\n\n\n\n"],"mappings":"AAAA;;AAGA,SAASA,cAAc,EAAEC,aAAa,QAAQ,qCAAqC;AAInF,IAAIC,WAAW,GAAG,wBAAwB;AAC1C,IAAIC,OAAO,GAAGH,cAAc,CAACI,IAAI,CAAC,IAAI,EAAEF,WAAW,CAAC;AAEpD,OAAO,IAAIG,SAAS,GAAGJ,aAAa,CAACG,IAAI,CAAC,IAAI,EAAEF,WAAW,CAAC;AAC5D,OAAO,IAAII,KAA6C,GAAGH,OAAO;AAClE,OAAO,IAAII,EAA0C,GAAGJ,OAAO;AAE/D,OAAO,IAAIK,SAAS,GAAGN,WAAW;AAClC,OAAO,IAAIO,OAAO,GAAG;EAAC,MAAM,EAAC,8BAA8B;EAAC,mBAAmB,EAAC;AAA2C,CAAC;AAC5H,OAAO,IAAIC,SAAS,GAAG,CAAC,CAAC;AACzB,OAAO,IAAIC,MAAM,GAAG,CAAC,CAAC;AACtB,OAAO,IAAIC,UAAU,GAAG,CAAC,CAAC;AAC1B,OAAO,IAAIC,MAAM,GAAG,CAAC,CAAC;AACtB,OAAO,IAAIC,IAAI,GAAG,CAAC,CAAC","ignoreList":[]}

package/dist/esm/cms-fields/components/address/input/address-input.uni.driver.js

@@ -0,0 +1,8 @@
+import { AddressInputUniDriver as WDSAddressInputUniDriver } from '@wix/design-system/dist/testkit/unidriver';
+export function AddressInputUniDriver(base, body) {
+  const input = () => WDSAddressInputUniDriver(base, body);
+  return {
+    ...input()
+  };
+}
+//# sourceMappingURL=address-input.uni.driver.js.map

package/dist/esm/cms-fields/components/address/input/address-input.uni.driver.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["AddressInputUniDriver","WDSAddressInputUniDriver","base","body","input"],"sources":["../../../../../../src/cms-fields/components/address/input/address-input.uni.driver.ts"],"sourcesContent":["import { UniDriver } from '@wix/wix-ui-test-utils/dist/types/unidriver';\nimport { AddressInputUniDriver as WDSAddressInputUniDriver } from '@wix/design-system/dist/testkit/unidriver';\n\nexport function AddressInputUniDriver(base: UniDriver, body: UniDriver) {\n  const input = () => WDSAddressInputUniDriver(base, body);\n\n  return {\n    ...input(),\n  };\n}\n"],"mappings":"AACA,SAASA,qBAAqB,IAAIC,wBAAwB,QAAQ,2CAA2C;AAE7G,OAAO,SAASD,qBAAqBA,CAACE,IAAe,EAAEC,IAAe,EAAE;EACtE,MAAMC,KAAK,GAAGA,CAAA,KAAMH,wBAAwB,CAACC,IAAI,EAAEC,IAAI,CAAC;EAExD,OAAO;IACL,GAAGC,KAAK,CAAC;EACX,CAAC;AACH","ignoreList":[]}

package/dist/esm/cms-fields/components/address/input/form-address-input.js

@@ -0,0 +1,33 @@
+import React, { useRef } from 'react';
+import { Z_INDEX_MODAL_POPOVER } from '../../common';
+import { useAutoFocus } from '../../../hooks';
+import { AddressInput } from './address-input';
+const popoverProps = {
+  maxWidth: 540,
+  appendTo: 'window',
+  zIndex: Z_INDEX_MODAL_POPOVER
+};
+export const FormAddressInput = _ref => {
+  let {
+    data,
+    onChange,
+    onInput,
+    autoFocus,
+    readOnly,
+    dataHook
+  } = _ref;
+  const inputRef = useRef(null);
+  useAutoFocus(inputRef, autoFocus);
+  return /*#__PURE__*/React.createElement(AddressInput, {
+    ref: inputRef,
+    dataHook: dataHook,
+    value: data,
+    onChange: onChange,
+    onInput: onInput,
+    readOnly: readOnly,
+    border: "standard",
+    popoverProps: popoverProps
+  });
+};
+FormAddressInput.displayName = 'FormAddressInput';
+//# sourceMappingURL=form-address-input.js.map

package/dist/esm/cms-fields/components/address/input/form-address-input.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useRef","Z_INDEX_MODAL_POPOVER","useAutoFocus","AddressInput","popoverProps","maxWidth","appendTo","zIndex","FormAddressInput","_ref","data","onChange","onInput","autoFocus","readOnly","dataHook","inputRef","createElement","ref","value","border","displayName"],"sources":["../../../../../../src/cms-fields/components/address/input/form-address-input.tsx"],"sourcesContent":["import React, { 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}) => {\n  const inputRef = useRef<AddressInputImperativeHandle>(null);\n  useAutoFocus(inputRef, autoFocus);\n\n  return (\n    <AddressInput\n      ref={inputRef}\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\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,MAAM,QAAQ,OAAO;AAIrC,SAASC,qBAAqB,QAAQ,cAAc;AACpD,SAASC,YAAY,QAAQ,gBAAgB;AAG7C,SAASC,YAAY,QAAQ,iBAAiB;AAE9C,MAAMC,YAAY,GAAG;EACnBC,QAAQ,EAAE,GAAG;EACbC,QAAQ,EAAE,QAAQ;EAClBC,MAAM,EAAEN;AACV,CAAU;AAIV,OAAO,MAAMO,gBAAiD,GAAGC,IAAA,IAO3D;EAAA,IAP4D;IAChEC,IAAI;IACJC,QAAQ;IACRC,OAAO;IACPC,SAAS;IACTC,QAAQ;IACRC;EACF,CAAC,GAAAN,IAAA;EACC,MAAMO,QAAQ,GAAGhB,MAAM,CAA+B,IAAI,CAAC;EAC3DE,YAAY,CAACc,QAAQ,EAAEH,SAAS,CAAC;EAEjC,oBACEd,KAAA,CAAAkB,aAAA,CAACd,YAAY;IACXe,GAAG,EAAEF,QAAS;IACdD,QAAQ,EAAEA,QAAS;IACnBI,KAAK,EAAET,IAAK;IACZC,QAAQ,EAAEA,QAAS;IACnBC,OAAO,EAAEA,OAAQ;IACjBE,QAAQ,EAAEA,QAAS;IACnBM,MAAM,EAAC,UAAU;IACjBhB,YAAY,EAAEA;EAAa,CAC5B,CAAC;AAEN,CAAC;AAEDI,gBAAgB,CAACa,WAAW,GAAG,kBAAkB","ignoreList":[]}

package/dist/esm/cms-fields/components/address/input/index.js

@@ -0,0 +1,3 @@
+export * from './address-input';
+export * from './form-address-input';
+//# sourceMappingURL=index.js.map

package/dist/esm/cms-fields/components/address/input/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["../../../../../../src/cms-fields/components/address/input/index.ts"],"sourcesContent":["export * from './address-input';\nexport * from './form-address-input';\n\n"],"mappings":"AAAA,cAAc,iBAAiB;AAC/B,cAAc,sBAAsB","ignoreList":[]}

package/dist/esm/cms-fields/components/address/view/address-view.js

@@ -0,0 +1,18 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { TextView } from '../../text';
+import { useFormattedAddress } from './hooks';
+export const AddressView = _ref => {
+  let {
+    data,
+    ...rest
+  } = _ref;
+  const address = useFormattedAddress(data);
+  return /*#__PURE__*/React.createElement(TextView, _extends({
+    dataHook: "address-view"
+  }, rest, {
+    data: address
+  }));
+};
+AddressView.displayName = 'AddressView';
+//# sourceMappingURL=address-view.js.map

package/dist/esm/cms-fields/components/address/view/address-view.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","TextView","useFormattedAddress","AddressView","_ref","data","rest","address","createElement","_extends","dataHook","displayName"],"sources":["../../../../../../src/cms-fields/components/address/view/address-view.tsx"],"sourcesContent":["import React from 'react';\n\nimport { TextView } from '../../text';\n\nimport { useFormattedAddress } from './hooks';\nimport { Address } from '../../../types/address';\nimport { TextProps } from '@wix/design-system';\n\nexport type AddressViewProps = TextProps & {\n  data?: Address;\n};\n\nexport const AddressView: React.FC<AddressViewProps> = ({ data, ...rest }) => {\n  const address = useFormattedAddress(data);\n  return <TextView dataHook=\"address-view\" {...rest} data={address} />;\n};\n\nAddressView.displayName = 'AddressView';\n"],"mappings":";AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,QAAQ,QAAQ,YAAY;AAErC,SAASC,mBAAmB,QAAQ,SAAS;AAQ7C,OAAO,MAAMC,WAAuC,GAAGC,IAAA,IAAuB;EAAA,IAAtB;IAAEC,IAAI;IAAE,GAAGC;EAAK,CAAC,GAAAF,IAAA;EACvE,MAAMG,OAAO,GAAGL,mBAAmB,CAACG,IAAI,CAAC;EACzC,oBAAOL,KAAA,CAAAQ,aAAA,CAACP,QAAQ,EAAAQ,QAAA;IAACC,QAAQ,EAAC;EAAc,GAAKJ,IAAI;IAAED,IAAI,EAAEE;EAAQ,EAAE,CAAC;AACtE,CAAC;AAEDJ,WAAW,CAACQ,WAAW,GAAG,aAAa","ignoreList":[]}

package/dist/esm/cms-fields/components/address/view/address-view.uni.driver.js

@@ -0,0 +1,8 @@
+import { baseUniDriverFactory } from '../../../../components/AutoPatternsApp/AutoPatternsApp.uni.driver';
+export function AddressViewUniDriver(base) {
+  return {
+    ...baseUniDriverFactory(base),
+    getText: () => base.text()
+  };
+}
+//# sourceMappingURL=address-view.uni.driver.js.map

package/dist/esm/cms-fields/components/address/view/address-view.uni.driver.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["baseUniDriverFactory","AddressViewUniDriver","base","getText","text"],"sources":["../../../../../../src/cms-fields/components/address/view/address-view.uni.driver.ts"],"sourcesContent":["import { UniDriver } from '@wix/wix-ui-test-utils/dist/types/unidriver';\nimport { baseUniDriverFactory } from '../../../../components/AutoPatternsApp/AutoPatternsApp.uni.driver';\n\nexport function AddressViewUniDriver(base: UniDriver) {\n  return {\n    ...baseUniDriverFactory(base),\n    getText: () => base.text(),\n  };\n}\n"],"mappings":"AACA,SAASA,oBAAoB,QAAQ,mEAAmE;AAExG,OAAO,SAASC,oBAAoBA,CAACC,IAAe,EAAE;EACpD,OAAO;IACL,GAAGF,oBAAoB,CAACE,IAAI,CAAC;IAC7BC,OAAO,EAAEA,CAAA,KAAMD,IAAI,CAACE,IAAI,CAAC;EAC3B,CAAC;AACH","ignoreList":[]}

package/dist/esm/cms-fields/components/address/view/hooks.js

@@ -0,0 +1,4 @@
+export const useFormattedAddress = address => {
+  return (address == null ? void 0 : address.formatted) ?? '';
+};
+//# sourceMappingURL=hooks.js.map

package/dist/esm/cms-fields/components/address/view/hooks.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useFormattedAddress","address","formatted"],"sources":["../../../../../../src/cms-fields/components/address/view/hooks.ts"],"sourcesContent":["import type { Address } from '../../../types/address';\n\nexport const useFormattedAddress = (address?: Address) => {\n  return address?.formatted ?? '';\n};\n\n"],"mappings":"AAEA,OAAO,MAAMA,mBAAmB,GAAIC,OAAiB,IAAK;EACxD,OAAO,CAAAA,OAAO,oBAAPA,OAAO,CAAEC,SAAS,KAAI,EAAE;AACjC,CAAC","ignoreList":[]}

package/dist/esm/cms-fields/components/address/view/index.js

@@ -0,0 +1,2 @@
+export * from './address-view';
+//# sourceMappingURL=index.js.map

package/dist/esm/cms-fields/components/address/view/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["../../../../../../src/cms-fields/components/address/view/index.ts"],"sourcesContent":["export * from './address-view';\n\n"],"mappings":"AAAA,cAAc,gBAAgB","ignoreList":[]}

package/dist/esm/cms-fields/components/audio/actions/actions-button/actions-button.js

@@ -0,0 +1,42 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useCallback } from 'react';
+import { IconButton } from '@wix/design-system';
+import { More as MoreIcon } from '@wix/wix-ui-icons-common';
+import { ActionsMenu } from '../actions-menu';
+export const ActionsButton = _ref => {
+  let {
+    actionsMenuProps,
+    priority = 'primary',
+    skin = 'standard',
+    size,
+    dataHook,
+    onClick,
+    disabled,
+    className
+  } = _ref;
+  const handleClick = useCallback(toggle => e => {
+    onClick == null || onClick(e);
+    toggle();
+  }, [onClick]);
+  const renderChildren = useCallback(_ref2 => {
+    let {
+      toggle
+    } = _ref2;
+    return /*#__PURE__*/React.createElement(IconButton, {
+      dataHook: dataHook,
+      priority: priority,
+      onClick: handleClick(toggle),
+      skin: skin,
+      disabled: disabled,
+      size: size,
+      className: className
+    }, /*#__PURE__*/React.createElement(MoreIcon, null));
+  }, [dataHook, priority, skin, size, disabled, handleClick, className]);
+  return /*#__PURE__*/React.createElement(ActionsMenu, _extends({
+    placement: "bottom"
+  }, actionsMenuProps, {
+    children: renderChildren
+  }));
+};
+ActionsButton.displayName = 'ActionsButton';
+//# sourceMappingURL=actions-button.js.map

package/dist/esm/cms-fields/components/audio/actions/actions-button/actions-button.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useCallback","IconButton","More","MoreIcon","ActionsMenu","ActionsButton","_ref","actionsMenuProps","priority","skin","size","dataHook","onClick","disabled","className","handleClick","toggle","e","renderChildren","_ref2","createElement","_extends","placement","children","displayName"],"sources":["../../../../../../../src/cms-fields/components/audio/actions/actions-button/actions-button.tsx"],"sourcesContent":["import type { FC } from 'react';\nimport React, { useCallback } from 'react';\n\nimport type { IconButtonProps } from '@wix/design-system';\nimport { IconButton } from '@wix/design-system';\nimport { More as MoreIcon } from '@wix/wix-ui-icons-common';\n\nimport type { ActionsMenuProps } from '../actions-menu';\nimport { ActionsMenu } from '../actions-menu';\n\nexport type ActionsButtonProps = IconButtonProps & {\n  actionsMenuProps: Omit<ActionsMenuProps, 'children'>;\n  onClick?: React.MouseEventHandler;\n};\n\nexport const ActionsButton: FC<ActionsButtonProps> = ({\n  actionsMenuProps,\n  priority = 'primary',\n  skin = 'standard',\n  size,\n  dataHook,\n  onClick,\n  disabled,\n  className,\n}) => {\n  const handleClick = useCallback<\n    (toggle: () => void) => React.MouseEventHandler\n  >(\n    (toggle) => (e) => {\n      onClick?.(e);\n      toggle();\n    },\n    [onClick],\n  );\n\n  const renderChildren = useCallback(\n    ({ toggle }) => {\n      return (\n        <IconButton\n          dataHook={dataHook}\n          priority={priority}\n          onClick={handleClick(toggle)}\n          skin={skin}\n          disabled={disabled}\n          size={size}\n          className={className}\n        >\n          <MoreIcon />\n        </IconButton>\n      );\n    },\n    [dataHook, priority, skin, size, disabled, handleClick, className],\n  );\n\n  return (\n    <ActionsMenu\n      placement=\"bottom\"\n      {...actionsMenuProps}\n      children={renderChildren}\n    />\n  );\n};\n\nActionsButton.displayName = 'ActionsButton';\n"],"mappings":";AACA,OAAOA,KAAK,IAAIC,WAAW,QAAQ,OAAO;AAG1C,SAASC,UAAU,QAAQ,oBAAoB;AAC/C,SAASC,IAAI,IAAIC,QAAQ,QAAQ,0BAA0B;AAG3D,SAASC,WAAW,QAAQ,iBAAiB;AAO7C,OAAO,MAAMC,aAAqC,GAAGC,IAAA,IAS/C;EAAA,IATgD;IACpDC,gBAAgB;IAChBC,QAAQ,GAAG,SAAS;IACpBC,IAAI,GAAG,UAAU;IACjBC,IAAI;IACJC,QAAQ;IACRC,OAAO;IACPC,QAAQ;IACRC;EACF,CAAC,GAAAR,IAAA;EACC,MAAMS,WAAW,GAAGf,WAAW,CAG5BgB,MAAM,IAAMC,CAAC,IAAK;IACjBL,OAAO,YAAPA,OAAO,CAAGK,CAAC,CAAC;IACZD,MAAM,CAAC,CAAC;EACV,CAAC,EACD,CAACJ,OAAO,CACV,CAAC;EAED,MAAMM,cAAc,GAAGlB,WAAW,CAChCmB,KAAA,IAAgB;IAAA,IAAf;MAAEH;IAAO,CAAC,GAAAG,KAAA;IACT,oBACEpB,KAAA,CAAAqB,aAAA,CAACnB,UAAU;MACTU,QAAQ,EAAEA,QAAS;MACnBH,QAAQ,EAAEA,QAAS;MACnBI,OAAO,EAAEG,WAAW,CAACC,MAAM,CAAE;MAC7BP,IAAI,EAAEA,IAAK;MACXI,QAAQ,EAAEA,QAAS;MACnBH,IAAI,EAAEA,IAAK;MACXI,SAAS,EAAEA;IAAU,gBAErBf,KAAA,CAAAqB,aAAA,CAACjB,QAAQ,MAAE,CACD,CAAC;EAEjB,CAAC,EACD,CAACQ,QAAQ,EAAEH,QAAQ,EAAEC,IAAI,EAAEC,IAAI,EAAEG,QAAQ,EAAEE,WAAW,EAAED,SAAS,CACnE,CAAC;EAED,oBACEf,KAAA,CAAAqB,aAAA,CAAChB,WAAW,EAAAiB,QAAA;IACVC,SAAS,EAAC;EAAQ,GACdf,gBAAgB;IACpBgB,QAAQ,EAAEL;EAAe,EAC1B,CAAC;AAEN,CAAC;AAEDb,aAAa,CAACmB,WAAW,GAAG,eAAe","ignoreList":[]}

package/dist/esm/cms-fields/components/audio/actions/actions-button/index.js

@@ -0,0 +1,2 @@
+export * from './actions-button';
+//# sourceMappingURL=index.js.map

package/dist/esm/cms-fields/components/audio/actions/actions-button/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["../../../../../../../src/cms-fields/components/audio/actions/actions-button/index.ts"],"sourcesContent":["export * from './actions-button';\n"],"mappings":"AAAA,cAAc,kBAAkB","ignoreList":[]}

package/dist/esm/cms-fields/components/audio/actions/actions-menu/actions-menu.js

@@ -0,0 +1,80 @@
+import _extends from "@babel/runtime/helpers/extends";
+import omit from 'lodash/omit';
+import React, { useCallback, useEffect, useState, useRef } from 'react';
+import { Box, PopoverMenu } from '@wix/design-system';
+import { getAppPopoverMaxHeight, preventEvent, stopEvent, isTruthy } from '../../../../utils';
+import { useResizeEffect } from '../../../../hooks';
+import { Z_INDEX_POPOVER } from '../../../common';
+import { classes } from './actions-menu.st.css.js';
+export const ACTIONS_MENU_DIVIDER = 'divider';
+export const actionsFromSections = sections => sections.map(section => section.filter(isTruthy)).filter(section => section.length > 0).flatMap(section => [...section, ACTIONS_MENU_DIVIDER]).slice(0, -1);
+const getActionsMenuOffset = function (showArrow) {
+  if (showArrow === void 0) {
+    showArrow = true;
+  }
+  return {
+    up: showArrow ? 18 : 12,
+    down: showArrow ? 18 : 12
+  };
+};
+export const ActionsMenu = _ref => {
+  let {
+    actions,
+    focusable = false,
+    onKeyDown,
+    children,
+    ...props
+  } = _ref;
+  const anchorRef = useRef(null);
+  const [maxHeight, setMaxHeight] = useState();
+  const updateMaxHeight = useCallback(() => setMaxHeight(getAppPopoverMaxHeight(anchorRef.current, props.flip, getActionsMenuOffset(props.showArrow))), [props.flip, props.showArrow]);
+  useResizeEffect(updateMaxHeight);
+  useEffect(() => {
+    const frameId = requestAnimationFrame(updateMaxHeight);
+    return () => cancelAnimationFrame(frameId);
+  }, [updateMaxHeight]);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: anchorRef,
+    onClick: !focusable ? stopEvent : undefined,
+    onMouseDown: !focusable ? preventEvent : undefined,
+    onKeyDownCapture: onKeyDown
+  }, /*#__PURE__*/React.createElement(PopoverMenu, _extends({
+    placement: "auto",
+    zIndex: Z_INDEX_POPOVER
+  }, props, {
+    triggerElement: children,
+    maxHeight: props.maxHeight ?? maxHeight
+  }), actions.map((action, index) => {
+    if (action === ACTIONS_MENU_DIVIDER) {
+      return /*#__PURE__*/React.createElement(PopoverMenu.Divider, {
+        key: `divider-${index}`
+      });
+    }
+    const itemProps = 'label' in action ? {
+      text: action.label,
+      prefixIcon: action.icon,
+      ...omit(action, 'id', 'label', 'icon')
+    } : {
+      text: action.element,
+      ...omit(action, 'id', 'element')
+    };
+    return /*#__PURE__*/React.createElement(PopoverMenu.MenuItem, _extends({
+      key: action.id ?? `item-${index}`
+    }, itemProps));
+  })));
+};
+ActionsMenu.displayName = 'ActionsMenu';
+ActionsMenu.Action = _ref2 => {
+  let {
+    icon,
+    children,
+    ...props
+  } = _ref2;
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    className: classes.action,
+    verticalAlign: "middle",
+    gap: "SP1"
+  }, props), /*#__PURE__*/React.createElement(Box, null, icon), children);
+};
+ActionsMenu.Action.displayName = 'ActionsMenu.Action';
+//# sourceMappingURL=actions-menu.js.map

package/dist/esm/cms-fields/components/audio/actions/actions-menu/actions-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["omit","React","useCallback","useEffect","useState","useRef","Box","PopoverMenu","getAppPopoverMaxHeight","preventEvent","stopEvent","isTruthy","useResizeEffect","Z_INDEX_POPOVER","classes","ACTIONS_MENU_DIVIDER","actionsFromSections","sections","map","section","filter","length","flatMap","slice","getActionsMenuOffset","showArrow","up","down","ActionsMenu","_ref","actions","focusable","onKeyDown","children","props","anchorRef","maxHeight","setMaxHeight","updateMaxHeight","current","flip","frameId","requestAnimationFrame","cancelAnimationFrame","createElement","ref","onClick","undefined","onMouseDown","onKeyDownCapture","_extends","placement","zIndex","triggerElement","action","index","Divider","key","itemProps","text","label","prefixIcon","icon","element","MenuItem","id","displayName","Action","_ref2","className","verticalAlign","gap"],"sources":["../../../../../../../src/cms-fields/components/audio/actions/actions-menu/actions-menu.tsx"],"sourcesContent":["import omit from 'lodash/omit';\nimport React, { useCallback, useEffect, useState, useRef } from 'react';\n\nimport type {\n  BoxProps,\n  PopoverMenuProps,\n  PopoverMenuItemProps,\n} from '@wix/design-system';\nimport { Box, PopoverMenu } from '@wix/design-system';\n\nimport {\n  getAppPopoverMaxHeight,\n  preventEvent,\n  stopEvent,\n  isTruthy,\n} from '../../../../utils';\nimport { useResizeEffect } from '../../../../hooks';\n\nimport { Z_INDEX_POPOVER } from '../../../common';\n\nimport { classes } from './actions-menu.st.css.js';\n\nexport type ActionsMenuAction = Omit<\n  PopoverMenuItemProps,\n  'text' | 'subtitle' | 'prefixIcon'\n> & {\n  id?: string | number;\n} & (\n    | {\n        element: React.ReactElement;\n      }\n    | {\n        icon?: PopoverMenuItemProps['prefixIcon'];\n        label: string;\n      }\n  );\n\nexport type ActionsMenuDivider = 'divider';\nexport type ActionsMenuItem = ActionsMenuAction | ActionsMenuDivider;\n\nexport const ACTIONS_MENU_DIVIDER: ActionsMenuDivider = 'divider';\n\nexport const actionsFromSections = (\n  sections: (ActionsMenuAction | undefined)[][],\n): ActionsMenuItem[] =>\n  sections\n    .map((section) => section.filter(isTruthy) as ActionsMenuAction[])\n    .filter((section) => section.length > 0)\n    .flatMap((section) => [...section, ACTIONS_MENU_DIVIDER] as ActionsMenuItem[])\n    .slice(0, -1);\n\nexport interface ActionsMenuProps\n  extends Omit<PopoverMenuProps, 'triggerElement'> {\n  actions: ActionsMenuItem[];\n  focusable?: boolean;\n  onKeyDown?: React.KeyboardEventHandler;\n  children: PopoverMenuProps['triggerElement'];\n}\n\nexport interface ActionsMenuActionProps extends BoxProps {\n  icon?: React.ReactElement;\n}\n\ntype ActionsMenuFC = React.FC<ActionsMenuProps> & {\n  Action: React.FC<ActionsMenuActionProps>;\n};\n\nconst getActionsMenuOffset = (showArrow = true) => ({\n  up: showArrow ? 18 : 12,\n  down: showArrow ? 18 : 12,\n});\n\nexport const ActionsMenu: ActionsMenuFC = ({\n  actions,\n  focusable = false,\n  onKeyDown,\n  children,\n  ...props\n}) => {\n  const anchorRef = useRef<HTMLDivElement>(null);\n\n  const [maxHeight, setMaxHeight] = useState<number>();\n  const updateMaxHeight = useCallback(\n    () =>\n      setMaxHeight(\n        getAppPopoverMaxHeight(\n          anchorRef.current,\n          props.flip,\n          getActionsMenuOffset(props.showArrow),\n        ),\n      ),\n    [props.flip, props.showArrow],\n  );\n\n  useResizeEffect(updateMaxHeight);\n  useEffect(() => {\n    const frameId = requestAnimationFrame(updateMaxHeight);\n    return () => cancelAnimationFrame(frameId);\n  }, [updateMaxHeight]);\n\n  return (\n    <div\n      ref={anchorRef}\n      onClick={!focusable ? stopEvent : undefined}\n      onMouseDown={!focusable ? preventEvent : undefined}\n      onKeyDownCapture={onKeyDown}\n    >\n      <PopoverMenu\n        placement=\"auto\"\n        zIndex={Z_INDEX_POPOVER}\n        {...props}\n        triggerElement={children}\n        maxHeight={props.maxHeight ?? maxHeight}\n      >\n        {actions.map((action, index) => {\n          if (action === ACTIONS_MENU_DIVIDER) {\n            return <PopoverMenu.Divider key={`divider-${index}`} />;\n          }\n\n          const itemProps =\n            'label' in action\n              ? {\n                  text: action.label,\n                  prefixIcon: action.icon,\n                  ...omit(action, 'id', 'label', 'icon'),\n                }\n              : {\n                  text: action.element,\n                  ...omit(action, 'id', 'element'),\n                };\n\n          return (\n            <PopoverMenu.MenuItem\n              key={action.id ?? `item-${index}`}\n              {...itemProps}\n            />\n          );\n        })}\n      </PopoverMenu>\n    </div>\n  );\n};\n\nActionsMenu.displayName = 'ActionsMenu';\n\nActionsMenu.Action = ({ icon, children, ...props }) => (\n  <Box className={classes.action} verticalAlign=\"middle\" gap=\"SP1\" {...props}>\n    <Box>{icon}</Box>\n    {children}\n  </Box>\n);\n\nActionsMenu.Action.displayName = 'ActionsMenu.Action';\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/cms-fields/components/audio/actions/actions-menu/actions-menu.st.css

@@ -0,0 +1,5 @@
+@property st-global(--wds-space-100);
+
+.action {
+    margin-left: calc(var(--wds-space-100, 6px) * -1);
+}

package/dist/esm/cms-fields/components/audio/actions/actions-menu/actions-menu.st.css.js

@@ -0,0 +1,21 @@
+// @ts-nocheck
+
+import { classesRuntime, statesRuntime } from "../../../../../stylable-esm-runtime.js";
+var _namespace_ = "actionsmenu3711108164";
+var _style_ = classesRuntime.bind(null, _namespace_);
+export var cssStates = statesRuntime.bind(null, _namespace_);
+export var style = _style_;
+export var st = _style_;
+export var namespace = _namespace_;
+export var classes = {
+  "root": "actionsmenu3711108164__root",
+  "action": "actionsmenu3711108164__action"
+};
+export var keyframes = {};
+export var layers = {};
+export var containers = {};
+export var stVars = {};
+export var vars = {
+  "wds-space-100": "--wds-space-100"
+};
+//# sourceMappingURL=actions-menu.st.css.js.map

package/dist/esm/cms-fields/components/audio/actions/actions-menu/actions-menu.st.css.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["classesRuntime","statesRuntime","_namespace_","_style_","bind","cssStates","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../../../../src/cms-fields/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_ = \"actionsmenu3711108164\";\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\":\"actionsmenu3711108164__root\",\"action\":\"actionsmenu3711108164__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":"AAAA;;AAGA,SAASA,cAAc,EAAEC,aAAa,QAAQ,wCAAwC;AAItF,IAAIC,WAAW,GAAG,uBAAuB;AACzC,IAAIC,OAAO,GAAGH,cAAc,CAACI,IAAI,CAAC,IAAI,EAAEF,WAAW,CAAC;AAEpD,OAAO,IAAIG,SAAS,GAAGJ,aAAa,CAACG,IAAI,CAAC,IAAI,EAAEF,WAAW,CAAC;AAC5D,OAAO,IAAII,KAA6C,GAAGH,OAAO;AAClE,OAAO,IAAII,EAA0C,GAAGJ,OAAO;AAE/D,OAAO,IAAIK,SAAS,GAAGN,WAAW;AAClC,OAAO,IAAIO,OAAO,GAAG;EAAC,MAAM,EAAC,6BAA6B;EAAC,QAAQ,EAAC;AAA+B,CAAC;AACpG,OAAO,IAAIC,SAAS,GAAG,CAAC,CAAC;AACzB,OAAO,IAAIC,MAAM,GAAG,CAAC,CAAC;AACtB,OAAO,IAAIC,UAAU,GAAG,CAAC,CAAC;AAC1B,OAAO,IAAIC,MAAM,GAAG,CAAC,CAAC;AACtB,OAAO,IAAIC,IAAI,GAAG;EAAC,eAAe,EAAC;AAAiB,CAAC","ignoreList":[]}

package/dist/esm/cms-fields/components/audio/actions/actions-menu/index.js

@@ -0,0 +1,3 @@
+export * from './actions-menu';
+export * from './types';
+//# sourceMappingURL=index.js.map

package/dist/esm/cms-fields/components/audio/actions/actions-menu/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["../../../../../../../src/cms-fields/components/audio/actions/actions-menu/index.ts"],"sourcesContent":["export * from './actions-menu';\nexport * from './types';\n"],"mappings":"AAAA,cAAc,gBAAgB;AAC9B,cAAc,SAAS","ignoreList":[]}

package/dist/esm/cms-fields/components/audio/actions/actions-menu/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/esm/cms-fields/components/audio/actions/actions-menu/types.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["../../../../../../../src/cms-fields/components/audio/actions/actions-menu/types.ts"],"sourcesContent":["export interface UseActionProps {\n  dataHook: string;\n  actionText: string;\n  onAction?: () => void;\n  iconSize?: 'small' | 'medium';\n}\n\nexport interface ActionsMenuTriggerProps {\n  toggle: () => void;\n  isOpen: boolean;\n  open: () => void;\n  close: () => void;\n}\n"],"mappings":"","ignoreList":[]}

package/dist/esm/cms-fields/components/audio/audio-field/audio-view.js

@@ -0,0 +1,37 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { MusicSmall as MusicSmallIcon } from '@wix/wix-ui-icons-common';
+import { getSchemaType, getMediaTitle } from '../../../utils';
+import { smallTooltipCommonProps } from '../../../utils/tooltip';
+import { MediaTag } from '../../media-tag';
+import { HighlightedText } from '../../highlighted-text';
+const audioTagProps = {
+  thumb: /*#__PURE__*/React.createElement(MusicSmallIcon, null),
+  titleTextProps: {
+    tooltipProps: smallTooltipCommonProps
+  }
+};
+export const AudioView = _ref => {
+  let {
+    data
+  } = _ref;
+  return data ? /*#__PURE__*/React.createElement(MediaTag, _extends({}, audioTagProps, {
+    title: getMediaTitle(data)
+  })) : null;
+};
+export const HighlightedAudioView = _ref2 => {
+  let {
+    metadata: {
+      highlight
+    } = {},
+    ...props
+  } = _ref2;
+  return /*#__PURE__*/React.createElement(MediaTag, _extends({}, audioTagProps, {
+    dataHook: `auto-view-highlight.${props.pointer}.${getSchemaType(props.schema)}`,
+    title: /*#__PURE__*/React.createElement(HighlightedText, {
+      highlight: highlight,
+      highlightedBackground: false
+    })
+  }));
+};
+//# sourceMappingURL=audio-view.js.map

package/dist/esm/cms-fields/components/audio/audio-field/audio-view.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","MusicSmall","MusicSmallIcon","getSchemaType","getMediaTitle","smallTooltipCommonProps","MediaTag","HighlightedText","audioTagProps","thumb","createElement","titleTextProps","tooltipProps","AudioView","_ref","data","_extends","title","HighlightedAudioView","_ref2","metadata","highlight","props","dataHook","pointer","schema","highlightedBackground"],"sources":["../../../../../../src/cms-fields/components/audio/audio-field/audio-view.tsx"],"sourcesContent":["import React from 'react';\n\nimport { MusicSmall as MusicSmallIcon } from '@wix/wix-ui-icons-common';\n\nimport { getSchemaType, getMediaTitle } from '../../../utils';\nimport { smallTooltipCommonProps } from '../../../utils/tooltip';\n\nimport { MediaTag } from '../../media-tag';\nimport { HighlightedText } from '../../highlighted-text';\n\nconst audioTagProps = {\n  thumb: <MusicSmallIcon />,\n  titleTextProps: { tooltipProps: smallTooltipCommonProps },\n};\n\nexport const AudioView: React.FC<any> = ({ data }) => {\n  return data ? (\n    <MediaTag {...audioTagProps} title={getMediaTitle(data)} />\n  ) : null;\n};\n\nexport const HighlightedAudioView: React.FC<any> = ({\n  metadata: { highlight } = {},\n  ...props\n}) => {\n  return (\n    <MediaTag\n      {...audioTagProps}\n      dataHook={`auto-view-highlight.${props.pointer}.${getSchemaType(\n        props.schema,\n      )}`}\n      title={\n        <HighlightedText highlight={highlight} highlightedBackground={false} />\n      }\n    />\n  );\n};\n"],"mappings":";AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,UAAU,IAAIC,cAAc,QAAQ,0BAA0B;AAEvE,SAASC,aAAa,EAAEC,aAAa,QAAQ,gBAAgB;AAC7D,SAASC,uBAAuB,QAAQ,wBAAwB;AAEhE,SAASC,QAAQ,QAAQ,iBAAiB;AAC1C,SAASC,eAAe,QAAQ,wBAAwB;AAExD,MAAMC,aAAa,GAAG;EACpBC,KAAK,eAAET,KAAA,CAAAU,aAAA,CAACR,cAAc,MAAE,CAAC;EACzBS,cAAc,EAAE;IAAEC,YAAY,EAAEP;EAAwB;AAC1D,CAAC;AAED,OAAO,MAAMQ,SAAwB,GAAGC,IAAA,IAAc;EAAA,IAAb;IAAEC;EAAK,CAAC,GAAAD,IAAA;EAC/C,OAAOC,IAAI,gBACTf,KAAA,CAAAU,aAAA,CAACJ,QAAQ,EAAAU,QAAA,KAAKR,aAAa;IAAES,KAAK,EAAEb,aAAa,CAACW,IAAI;EAAE,EAAE,CAAC,GACzD,IAAI;AACV,CAAC;AAED,OAAO,MAAMG,oBAAmC,GAAGC,KAAA,IAG7C;EAAA,IAH8C;IAClDC,QAAQ,EAAE;MAAEC;IAAU,CAAC,GAAG,CAAC,CAAC;IAC5B,GAAGC;EACL,CAAC,GAAAH,KAAA;EACC,oBACEnB,KAAA,CAAAU,aAAA,CAACJ,QAAQ,EAAAU,QAAA,KACHR,aAAa;IACjBe,QAAQ,EAAE,uBAAuBD,KAAK,CAACE,OAAO,IAAIrB,aAAa,CAC7DmB,KAAK,CAACG,MACR,CAAC,EAAG;IACJR,KAAK,eACHjB,KAAA,CAAAU,aAAA,CAACH,eAAe;MAACc,SAAS,EAAEA,SAAU;MAACK,qBAAqB,EAAE;IAAM,CAAE;EACvE,EACF,CAAC;AAEN,CAAC","ignoreList":[]}

package/dist/esm/cms-fields/components/audio/audio-field/form-audio-field.js

@@ -0,0 +1,131 @@
+import React, { useRef, useMemo } from 'react';
+import { getMediaURL } from '@wix/auto-cms-field-types';
+import { AddItem, AudioPlayer, Box, Text } from '@wix/design-system';
+import { DownloadImport as Download, Delete, Replace } from '@wix/wix-ui-icons-common';
+import { useWithCallback, useTranslations } from '../../../hooks';
+import { getMediaTitle, MEDIA_TYPES } from '../../../utils';
+import { Z_INDEX_MODAL_POPOVER } from '../../common';
+import { useMediaControl } from '../../media-control';
+import { MediaLoader } from '../../media-loader';
+import { ActionsButton } from '../actions/actions-button';
+import { ACTIONS_MENU_DIVIDER } from '../actions/actions-menu';
+import { style, classes } from './form-audio-field.st.css.js';
+export const FormAudioField = _ref => {
+  let {
+    data,
+    onChange: onChangeAudio,
+    onClear: onClearAudio,
+    onInput,
+    autoFocus,
+    readOnly,
+    invalid,
+    dataHook
+  } = _ref;
+  const {
+    t
+  } = useTranslations();
+  const onChange = useWithCallback(onChangeAudio, onInput);
+  const onClear = useWithCallback(onClearAudio, onInput);
+  const inputRef = useRef(null);
+  const viewRef = useRef(null);
+  const {
+    callMedia,
+    onMediaLoad,
+    downloadMedia,
+    loading
+  } = useMediaControl({
+    mediaType: MEDIA_TYPES.AUDIO,
+    value: data,
+    onChange,
+    autoFocus,
+    readOnly,
+    inputRef,
+    viewRef
+  });
+  const actionsMenuProps = useMemo(() => {
+    const replaceAction = {
+      id: 'AUDIO_REPLACE',
+      dataHook: 'fromAudioInput.button.replace',
+      label: t('CMS.audio.button.replace'),
+      disabled: readOnly,
+      icon: /*#__PURE__*/React.createElement(Replace, null),
+      onClick: callMedia
+    };
+    const downloadAction = {
+      id: 'AUDIO_DOWNLOAD',
+      label: t('CMS.audio.button.download'),
+      disabled: false,
+      icon: /*#__PURE__*/React.createElement(Download, null),
+      onClick: downloadMedia
+    };
+    const clearAction = {
+      id: 'AUDIO_CLEAR',
+      dataHook: 'fromAudioInput.button.delete',
+      label: t('CMS.audio.button.delete'),
+      disabled: readOnly,
+      icon: /*#__PURE__*/React.createElement(Delete, null),
+      onClick: onClear
+    };
+    const actions = [replaceAction, downloadAction, ACTIONS_MENU_DIVIDER, clearAction];
+    return {
+      dataHook: 'fromAudioInput.moreActionsMenu',
+      actions,
+      zIndex: Z_INDEX_MODAL_POPOVER
+    };
+  }, [t, readOnly, callMedia, downloadMedia, onClear]);
+  if (loading) {
+    return /*#__PURE__*/React.createElement(MediaLoader, {
+      borderStyle: "dashed",
+      className: classes.addItem
+    });
+  }
+  if (!data) {
+    return /*#__PURE__*/React.createElement(AddItem, {
+      ref: inputRef,
+      dataHook: dataHook,
+      className: style(classes.addItem, {
+        disabled: !!readOnly,
+        error: invalid
+      }),
+      theme: "dashes",
+      onClick: callMedia,
+      disabled: readOnly,
+      children: t('CMS.audio.button.add')
+    });
+  }
+  return /*#__PURE__*/React.createElement(Box, {
+    dataHook: dataHook,
+    direction: "vertical",
+    gap: "S1"
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: viewRef,
+    tabIndex: 0
+  }, /*#__PURE__*/React.createElement(Box, {
+    direction: "vertical",
+    verticalAlign: "middle",
+    backgroundColor: "D70",
+    padding: "SP5",
+    borderRadius: 12
+  }, /*#__PURE__*/React.createElement(Text, {
+    dataHook: "fromAudioInput.audioName",
+    className: classes.mediaTitle
+  }, getMediaTitle(data)), /*#__PURE__*/React.createElement(Box, {
+    direction: "horizontal",
+    marginTop: "9px",
+    marginBottom: "-3px"
+  }, /*#__PURE__*/React.createElement(AudioPlayer, {
+    dataHook: "fromAudioInput.player",
+    src: getMediaURL(data),
+    onLoad: onMediaLoad,
+    onLoadError: onMediaLoad
+  }), /*#__PURE__*/React.createElement(Box, {
+    marginLeft: "SP3",
+    gap: "SP1"
+  }, /*#__PURE__*/React.createElement(ActionsButton, {
+    dataHook: "fromAudioInput.button.more",
+    actionsMenuProps: actionsMenuProps,
+    priority: "secondary",
+    skin: "inverted"
+  }))))));
+};
+//# sourceMappingURL=form-audio-field.js.map