@wix/auto-patterns 1.45.0 → 1.47.0

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

@@ -0,0 +1,83 @@
+import React, { useRef } from 'react';
+import { MEDIA_TYPES } from '../../utils/media-utils';
+import { useTranslations, useWithCallback } from '../../hooks';
+import { PasteURLForm, useMediaControl, usePasteURLForm } from '../media-control';
+import { DocumentControl } from './document-control';
+import { classes } from './form-document-field.st.css.js';
+import { FormDocumentInput } from './form-document-input';
+export { classes as documentClasses } from './form-document-field.st.css.js';
+export const FormDocumentField = _ref => {
+  let {
+    data,
+    onChange: onChangeDocument,
+    onClear: onClearDocument,
+    onInput,
+    autoFocus,
+    readOnly,
+    invalid,
+    dataHook
+  } = _ref;
+  const {
+    t
+  } = useTranslations();
+  const onChange = useWithCallback(onChangeDocument, onInput);
+  const onClear = useWithCallback(onClearDocument, onInput);
+  const inputRef = useRef(null);
+  const viewRef = useRef(null);
+  const {
+    callMedia,
+    loading,
+    downloadMedia
+  } = useMediaControl({
+    mediaType: MEDIA_TYPES.ALL_MEDIA,
+    value: data,
+    onChange,
+    autoFocus,
+    readOnly,
+    inputRef,
+    viewRef
+  });
+  const {
+    isOpen,
+    title,
+    onOpen,
+    onClose,
+    onSave
+  } = usePasteURLForm({
+    onChange
+  });
+  return /*#__PURE__*/React.createElement(React.Fragment, null, !data ? /*#__PURE__*/React.createElement(FormDocumentInput, {
+    dataHook: dataHook,
+    ref: inputRef,
+    theme: "dashes",
+    disabled: readOnly,
+    loading: loading,
+    error: invalid,
+    loaderBorderStyle: "dashed",
+    onAddButtonClick: callMedia,
+    onPasteURLButtonClick: onOpen({
+      title: t('CMS.document.pasteUrl.title')
+    })
+  }) : /*#__PURE__*/React.createElement(DocumentControl, {
+    dataHook: dataHook,
+    ref: viewRef,
+    mediaURI: data,
+    readOnly: readOnly,
+    onReplace: callMedia,
+    onDelete: onClear,
+    onDownload: downloadMedia,
+    className: classes.viewWrapper,
+    loading: loading,
+    loaderBorderStyle: "solid",
+    onOpenPasteURLForm: onOpen({
+      title: t('CMS.document.replaceWithUrl.title')
+    })
+  }), /*#__PURE__*/React.createElement(PasteURLForm, {
+    title: title,
+    value: data,
+    show: isOpen,
+    closeModal: onClose,
+    onSave: onSave
+  }));
+};
+//# sourceMappingURL=form-document-field.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","useRef","MEDIA_TYPES","useTranslations","useWithCallback","PasteURLForm","useMediaControl","usePasteURLForm","DocumentControl","classes","FormDocumentInput","documentClasses","FormDocumentField","_ref","data","onChange","onChangeDocument","onClear","onClearDocument","onInput","autoFocus","readOnly","invalid","dataHook","t","inputRef","viewRef","callMedia","loading","downloadMedia","mediaType","ALL_MEDIA","value","isOpen","title","onOpen","onClose","onSave","createElement","Fragment","ref","theme","disabled","error","loaderBorderStyle","onAddButtonClick","onPasteURLButtonClick","mediaURI","onReplace","onDelete","onDownload","className","viewWrapper","onOpenPasteURLForm","show","closeModal"],"sources":["../../../../../src/cms-fields/components/document/form-document-field.tsx"],"sourcesContent":["import React, { useRef } from 'react';\n\nimport { MEDIA_TYPES } from '../../utils/media-utils';\nimport { useTranslations, useWithCallback } from '../../hooks';\nimport type { AddItemActions } from '@wix/design-system';\n\nimport type { FormMediaControlProps } from '../media-control';\nimport {\n  PasteURLForm,\n  useMediaControl,\n  usePasteURLForm,\n} from '../media-control';\n\nimport { DocumentControl } from './document-control';\nimport { classes } from './form-document-field.st.css.js';\nimport { FormDocumentInput } from './form-document-input';\n\nexport { classes as documentClasses } from './form-document-field.st.css.js';\n\nexport const FormDocumentField: React.FC<FormMediaControlProps> = ({\n  data,\n  onChange: onChangeDocument,\n  onClear: onClearDocument,\n  onInput,\n  autoFocus,\n  readOnly,\n  invalid,\n  dataHook,\n}) => {\n  const { t } = useTranslations();\n\n  const onChange = useWithCallback(onChangeDocument, onInput);\n  const onClear = useWithCallback(onClearDocument, onInput);\n\n  const inputRef = useRef<AddItemActions>(null);\n  const viewRef = useRef<HTMLDivElement>(null);\n\n  const { callMedia, loading, downloadMedia } = useMediaControl({\n    mediaType: MEDIA_TYPES.ALL_MEDIA,\n    value: data,\n    onChange,\n    autoFocus,\n    readOnly,\n    inputRef,\n    viewRef,\n  });\n\n  const { isOpen, title, onOpen, onClose, onSave } = usePasteURLForm({\n    onChange,\n  });\n\n  return (\n    <>\n      {!data ? (\n        <FormDocumentInput\n          dataHook={dataHook}\n          ref={inputRef}\n          theme=\"dashes\"\n          disabled={readOnly}\n          loading={loading}\n          error={invalid}\n          loaderBorderStyle=\"dashed\"\n          onAddButtonClick={callMedia}\n          onPasteURLButtonClick={onOpen({\n            title: t('CMS.document.pasteUrl.title'),\n          })}\n        />\n      ) : (\n        <DocumentControl\n          dataHook={dataHook}\n          ref={viewRef}\n          mediaURI={data}\n          readOnly={readOnly}\n          onReplace={callMedia}\n          onDelete={onClear}\n          onDownload={downloadMedia}\n          className={classes.viewWrapper}\n          loading={loading}\n          loaderBorderStyle=\"solid\"\n          onOpenPasteURLForm={onOpen({\n            title: t('CMS.document.replaceWithUrl.title'),\n          })}\n        />\n      )}\n      <PasteURLForm\n        title={title}\n        value={data}\n        show={isOpen}\n        closeModal={onClose}\n        onSave={onSave}\n      />\n    </>\n  );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,MAAM,QAAQ,OAAO;AAErC,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,eAAe,EAAEC,eAAe,QAAQ,aAAa;AAI9D,SACEC,YAAY,EACZC,eAAe,EACfC,eAAe,QACV,kBAAkB;AAEzB,SAASC,eAAe,QAAQ,oBAAoB;AACpD,SAASC,OAAO,QAAQ,iCAAiC;AACzD,SAASC,iBAAiB,QAAQ,uBAAuB;AAEzD,SAASD,OAAO,IAAIE,eAAe,QAAQ,iCAAiC;AAE5E,OAAO,MAAMC,iBAAkD,GAAGC,IAAA,IAS5D;EAAA,IAT6D;IACjEC,IAAI;IACJC,QAAQ,EAAEC,gBAAgB;IAC1BC,OAAO,EAAEC,eAAe;IACxBC,OAAO;IACPC,SAAS;IACTC,QAAQ;IACRC,OAAO;IACPC;EACF,CAAC,GAAAV,IAAA;EACC,MAAM;IAAEW;EAAE,CAAC,GAAGrB,eAAe,CAAC,CAAC;EAE/B,MAAMY,QAAQ,GAAGX,eAAe,CAACY,gBAAgB,EAAEG,OAAO,CAAC;EAC3D,MAAMF,OAAO,GAAGb,eAAe,CAACc,eAAe,EAAEC,OAAO,CAAC;EAEzD,MAAMM,QAAQ,GAAGxB,MAAM,CAAiB,IAAI,CAAC;EAC7C,MAAMyB,OAAO,GAAGzB,MAAM,CAAiB,IAAI,CAAC;EAE5C,MAAM;IAAE0B,SAAS;IAAEC,OAAO;IAAEC;EAAc,CAAC,GAAGvB,eAAe,CAAC;IAC5DwB,SAAS,EAAE5B,WAAW,CAAC6B,SAAS;IAChCC,KAAK,EAAElB,IAAI;IACXC,QAAQ;IACRK,SAAS;IACTC,QAAQ;IACRI,QAAQ;IACRC;EACF,CAAC,CAAC;EAEF,MAAM;IAAEO,MAAM;IAAEC,KAAK;IAAEC,MAAM;IAAEC,OAAO;IAAEC;EAAO,CAAC,GAAG9B,eAAe,CAAC;IACjEQ;EACF,CAAC,CAAC;EAEF,oBACEf,KAAA,CAAAsC,aAAA,CAAAtC,KAAA,CAAAuC,QAAA,QACG,CAACzB,IAAI,gBACJd,KAAA,CAAAsC,aAAA,CAAC5B,iBAAiB;IAChBa,QAAQ,EAAEA,QAAS;IACnBiB,GAAG,EAAEf,QAAS;IACdgB,KAAK,EAAC,QAAQ;IACdC,QAAQ,EAAErB,QAAS;IACnBO,OAAO,EAAEA,OAAQ;IACjBe,KAAK,EAAErB,OAAQ;IACfsB,iBAAiB,EAAC,QAAQ;IAC1BC,gBAAgB,EAAElB,SAAU;IAC5BmB,qBAAqB,EAAEX,MAAM,CAAC;MAC5BD,KAAK,EAAEV,CAAC,CAAC,6BAA6B;IACxC,CAAC;EAAE,CACJ,CAAC,gBAEFxB,KAAA,CAAAsC,aAAA,CAAC9B,eAAe;IACde,QAAQ,EAAEA,QAAS;IACnBiB,GAAG,EAAEd,OAAQ;IACbqB,QAAQ,EAAEjC,IAAK;IACfO,QAAQ,EAAEA,QAAS;IACnB2B,SAAS,EAAErB,SAAU;IACrBsB,QAAQ,EAAEhC,OAAQ;IAClBiC,UAAU,EAAErB,aAAc;IAC1BsB,SAAS,EAAE1C,OAAO,CAAC2C,WAAY;IAC/BxB,OAAO,EAAEA,OAAQ;IACjBgB,iBAAiB,EAAC,OAAO;IACzBS,kBAAkB,EAAElB,MAAM,CAAC;MACzBD,KAAK,EAAEV,CAAC,CAAC,mCAAmC;IAC9C,CAAC;EAAE,CACJ,CACF,eACDxB,KAAA,CAAAsC,aAAA,CAACjC,YAAY;IACX6B,KAAK,EAAEA,KAAM;IACbF,KAAK,EAAElB,IAAK;IACZwC,IAAI,EAAErB,MAAO;IACbsB,UAAU,EAAEnB,OAAQ;IACpBC,MAAM,EAAEA;EAAO,CAChB,CACD,CAAC;AAEP,CAAC","ignoreList":[]}

package/dist/esm/cms-fields/components/document/form-document-field.st.css

@@ -0,0 +1,54 @@
+@property st-global(--wds-border-radius-400);
+@property st-global(--wds-border-radius-300);
+@property st-global(--wds-color-blue-300);
+@property st-global(--wds-color-blue-500);
+@property st-global(--wsr-color-B30);
+@property st-global(--wsr-color-B50);
+@property st-global(--wds-input-shadow-focus-standard);
+@property st-global(--wsr-color-R10);
+@property st-global(--wds-color-red-100);
+
+:vars {
+    BorderRadius: 2px;
+    documentViewBorderRadius: var(--wds-border-radius-300, calc(value(BorderRadius) * 3));
+    documentActionsWidth: 196px;
+
+    addItemWSRBorderRadius: var(--wds-border-radius-400, calc(value(BorderRadius) * 4));
+
+    /* single document view has height of 62px, these paddings are calculated based on this value */
+    documentLoaderPadding: 21px;
+    addDocumentPadding: 17px;
+}
+
+.viewWrapper {
+    border-radius: value(documentViewBorderRadius);
+    border: 1px solid var(--wds-color-blue-300, var(--wsr-color-B30));
+}
+
+.viewWrapper:hover {
+    background: var(--wds-color-blue-500, var(--wsr-color-B50));
+    cursor: pointer;
+}
+
+.textWidth {
+    max-width: calc(100% - value(documentActionsWidth));
+}
+
+.documentLoader {
+    padding-top: value(documentLoaderPadding);
+    padding-bottom: value(documentLoaderPadding);
+}
+
+.addDocument {
+    -st-states: error;
+    padding-top: value(addDocumentPadding) !important;
+    padding-bottom: value(addDocumentPadding) !important;
+}
+.addDocument:error {
+    border: 1px solid var(--wds-color-red-100, var(--wsr-color-R10)) !important;
+}
+
+.addItemWrapper:focus-within {
+    box-shadow: var(--wds-input-shadow-focus-standard, 0 0 0 3px var(--wds-color-blue-300, var(--wsr-color-B30)));
+    border-radius: value(addItemWSRBorderRadius);
+}

package/dist/esm/cms-fields/components/document/form-document-field.st.css.js

@@ -0,0 +1,40 @@
+// @ts-nocheck
+
+import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js";
+var _namespace_ = "formdocumentfield2561653091";
+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": "formdocumentfield2561653091__root",
+  "viewWrapper": "formdocumentfield2561653091__viewWrapper",
+  "textWidth": "formdocumentfield2561653091__textWidth",
+  "documentLoader": "formdocumentfield2561653091__documentLoader",
+  "addDocument": "formdocumentfield2561653091__addDocument",
+  "addItemWrapper": "formdocumentfield2561653091__addItemWrapper"
+};
+export var keyframes = {};
+export var layers = {};
+export var containers = {};
+export var stVars = {
+  "BorderRadius": "2px",
+  "documentViewBorderRadius": "var(--wds-border-radius-300, calc(2px * 3))",
+  "documentActionsWidth": "196px",
+  "addItemWSRBorderRadius": "var(--wds-border-radius-400, calc(2px * 4))",
+  "documentLoaderPadding": "21px",
+  "addDocumentPadding": "17px"
+};
+export var vars = {
+  "wds-border-radius-400": "--wds-border-radius-400",
+  "wds-border-radius-300": "--wds-border-radius-300",
+  "wds-color-blue-300": "--wds-color-blue-300",
+  "wds-color-blue-500": "--wds-color-blue-500",
+  "wsr-color-B30": "--wsr-color-B30",
+  "wsr-color-B50": "--wsr-color-B50",
+  "wds-input-shadow-focus-standard": "--wds-input-shadow-focus-standard",
+  "wsr-color-R10": "--wsr-color-R10",
+  "wds-color-red-100": "--wds-color-red-100"
+};
+//# sourceMappingURL=form-document-field.st.css.js.map

package/dist/esm/cms-fields/components/document/form-document-field.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/document/form-document-field.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"formdocumentfield2561653091\";\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\":\"formdocumentfield2561653091__root\",\"viewWrapper\":\"formdocumentfield2561653091__viewWrapper\",\"textWidth\":\"formdocumentfield2561653091__textWidth\",\"documentLoader\":\"formdocumentfield2561653091__documentLoader\",\"addDocument\":\"formdocumentfield2561653091__addDocument\",\"addItemWrapper\":\"formdocumentfield2561653091__addItemWrapper\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {\"BorderRadius\":\"2px\",\"documentViewBorderRadius\":\"var(--wds-border-radius-300, calc(2px * 3))\",\"documentActionsWidth\":\"196px\",\"addItemWSRBorderRadius\":\"var(--wds-border-radius-400, calc(2px * 4))\",\"documentLoaderPadding\":\"21px\",\"addDocumentPadding\":\"17px\"}; \nexport var vars = {\"wds-border-radius-400\":\"--wds-border-radius-400\",\"wds-border-radius-300\":\"--wds-border-radius-300\",\"wds-color-blue-300\":\"--wds-color-blue-300\",\"wds-color-blue-500\":\"--wds-color-blue-500\",\"wsr-color-B30\":\"--wsr-color-B30\",\"wsr-color-B50\":\"--wsr-color-B50\",\"wds-input-shadow-focus-standard\":\"--wds-input-shadow-focus-standard\",\"wsr-color-R10\":\"--wsr-color-R10\",\"wds-color-red-100\":\"--wds-color-red-100\"}; \n\n\n\n\n"],"mappings":"AAAA;;AAGA,SAASA,cAAc,EAAEC,aAAa,QAAQ,kCAAkC;AAIhF,IAAIC,WAAW,GAAG,6BAA6B;AAC/C,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,mCAAmC;EAAC,aAAa,EAAC,0CAA0C;EAAC,WAAW,EAAC,wCAAwC;EAAC,gBAAgB,EAAC,6CAA6C;EAAC,aAAa,EAAC,0CAA0C;EAAC,gBAAgB,EAAC;AAA6C,CAAC;AACtW,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;EAAC,cAAc,EAAC,KAAK;EAAC,0BAA0B,EAAC,6CAA6C;EAAC,sBAAsB,EAAC,OAAO;EAAC,wBAAwB,EAAC,6CAA6C;EAAC,uBAAuB,EAAC,MAAM;EAAC,oBAAoB,EAAC;AAAM,CAAC;AACpR,OAAO,IAAIC,IAAI,GAAG;EAAC,uBAAuB,EAAC,yBAAyB;EAAC,uBAAuB,EAAC,yBAAyB;EAAC,oBAAoB,EAAC,sBAAsB;EAAC,oBAAoB,EAAC,sBAAsB;EAAC,eAAe,EAAC,iBAAiB;EAAC,eAAe,EAAC,iBAAiB;EAAC,iCAAiC,EAAC,mCAAmC;EAAC,eAAe,EAAC,iBAAiB;EAAC,mBAAmB,EAAC;AAAqB,CAAC","ignoreList":[]}

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

@@ -0,0 +1,28 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { useTranslations } from '../../hooks';
+import { AddDocumentButton } from './add-document-button';
+import { PasteURLButton } from '../media-control';
+export const FormDocumentInput = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    dataHook,
+    disabled,
+    onPasteURLButtonClick,
+    onAddButtonClick,
+    ...addDocumentProps
+  } = _ref;
+  const {
+    t
+  } = useTranslations();
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(AddDocumentButton, _extends({
+    ref: ref,
+    disabled: disabled,
+    dataHook: dataHook,
+    onClick: onAddButtonClick
+  }, addDocumentProps)), /*#__PURE__*/React.createElement(PasteURLButton, {
+    title: t('CMS.document.pasteUrl.button'),
+    disabled: disabled,
+    onClick: onPasteURLButtonClick
+  }));
+});
+//# sourceMappingURL=form-document-input.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","useTranslations","AddDocumentButton","PasteURLButton","FormDocumentInput","forwardRef","_ref","ref","dataHook","disabled","onPasteURLButtonClick","onAddButtonClick","addDocumentProps","t","createElement","Fragment","_extends","onClick","title"],"sources":["../../../../../src/cms-fields/components/document/form-document-input.tsx"],"sourcesContent":["import React from 'react';\n\nimport { useTranslations } from '../../hooks';\nimport type { AddItemActions } from '@wix/design-system';\n\nimport {\n  AddDocumentButton,\n  type AddDocumentButtonProps,\n} from './add-document-button';\nimport { PasteURLButton, type PasteURLButtonProps } from '../media-control';\n\ntype FormDocumentInputProps = Omit<\n  AddDocumentButtonProps,\n  'onClick' | 'disabled'\n> & {\n  onAddButtonClick: AddDocumentButtonProps['onClick'];\n  onPasteURLButtonClick: PasteURLButtonProps['onClick'];\n  disabled?: boolean;\n  error?: boolean;\n};\n\nexport const FormDocumentInput = React.forwardRef<\n  AddItemActions,\n  FormDocumentInputProps\n>(\n  (\n    {\n      dataHook,\n      disabled,\n      onPasteURLButtonClick,\n      onAddButtonClick,\n      ...addDocumentProps\n    },\n    ref,\n  ) => {\n    const { t } = useTranslations();\n\n    return (\n      <>\n        <AddDocumentButton\n          ref={ref}\n          disabled={disabled}\n          dataHook={dataHook}\n          onClick={onAddButtonClick}\n          {...addDocumentProps}\n        />\n        <PasteURLButton\n          title={t('CMS.document.pasteUrl.button')}\n          disabled={disabled}\n          onClick={onPasteURLButtonClick}\n        />\n      </>\n    );\n  },\n);\n"],"mappings":";AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,eAAe,QAAQ,aAAa;AAG7C,SACEC,iBAAiB,QAEZ,uBAAuB;AAC9B,SAASC,cAAc,QAAkC,kBAAkB;AAY3E,OAAO,MAAMC,iBAAiB,gBAAGJ,KAAK,CAACK,UAAU,CAI/C,CAAAC,IAAA,EAQEC,GAAG,KACA;EAAA,IARH;IACEC,QAAQ;IACRC,QAAQ;IACRC,qBAAqB;IACrBC,gBAAgB;IAChB,GAAGC;EACL,CAAC,GAAAN,IAAA;EAGD,MAAM;IAAEO;EAAE,CAAC,GAAGZ,eAAe,CAAC,CAAC;EAE/B,oBACED,KAAA,CAAAc,aAAA,CAAAd,KAAA,CAAAe,QAAA,qBACEf,KAAA,CAAAc,aAAA,CAACZ,iBAAiB,EAAAc,QAAA;IAChBT,GAAG,EAAEA,GAAI;IACTE,QAAQ,EAAEA,QAAS;IACnBD,QAAQ,EAAEA,QAAS;IACnBS,OAAO,EAAEN;EAAiB,GACtBC,gBAAgB,CACrB,CAAC,eACFZ,KAAA,CAAAc,aAAA,CAACX,cAAc;IACbe,KAAK,EAAEL,CAAC,CAAC,8BAA8B,CAAE;IACzCJ,QAAQ,EAAEA,QAAS;IACnBQ,OAAO,EAAEP;EAAsB,CAChC,CACD,CAAC;AAEP,CACF,CAAC","ignoreList":[]}

package/dist/esm/cms-fields/components/document/index.js

@@ -0,0 +1,5 @@
+export * from './document-view';
+
+// NOTE: Heavy exports (FormDocumentField, DocumentControl, etc.) have been moved to './form' to prevent bundle bloat.
+// Import them explicitly: import { FormDocumentField } from '../cms-fields/components/document/form';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["../../../../../src/cms-fields/components/document/index.ts"],"sourcesContent":["export * from './document-view';\n\n// NOTE: Heavy exports (FormDocumentField, DocumentControl, etc.) have been moved to './form' to prevent bundle bloat.\n// Import them explicitly: import { FormDocumentField } from '../cms-fields/components/document/form';\n"],"mappings":"AAAA,cAAc,iBAAiB;;AAE/B;AACA","ignoreList":[]}

package/dist/esm/cms-fields/components/document/utils.js

@@ -0,0 +1,9 @@
+export const openDocument = url => {
+  const link = document.createElement('a');
+  link.href = url;
+  link.target = '_blank';
+  document.body.appendChild(link);
+  link.click();
+  link.remove();
+};
+//# sourceMappingURL=utils.js.map

package/dist/esm/cms-fields/components/document/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["openDocument","url","link","document","createElement","href","target","body","appendChild","click","remove"],"sources":["../../../../../src/cms-fields/components/document/utils.ts"],"sourcesContent":["export const openDocument = (url: string) => {\n  const link = document.createElement('a');\n  link.href = url;\n  link.target = '_blank';\n  document.body.appendChild(link);\n\n  link.click();\n  link.remove();\n};\n"],"mappings":"AAAA,OAAO,MAAMA,YAAY,GAAIC,GAAW,IAAK;EAC3C,MAAMC,IAAI,GAAGC,QAAQ,CAACC,aAAa,CAAC,GAAG,CAAC;EACxCF,IAAI,CAACG,IAAI,GAAGJ,GAAG;EACfC,IAAI,CAACI,MAAM,GAAG,QAAQ;EACtBH,QAAQ,CAACI,IAAI,CAACC,WAAW,CAACN,IAAI,CAAC;EAE/BA,IAAI,CAACO,KAAK,CAAC,CAAC;EACZP,IAAI,CAACQ,MAAM,CAAC,CAAC;AACf,CAAC","ignoreList":[]}

package/dist/esm/cms-fields/components/exclamation/exclamation.js

@@ -0,0 +1,46 @@
+import React, { useMemo } from 'react';
+import { Box, Tooltip } from '@wix/design-system';
+import { StatusAlertFilled, StatusWarningFilled } from '@wix/wix-ui-icons-common';
+import { classes, st } from './exclamation.st.css.js';
+const TOOLTIP_MAX_WIDTH = 230;
+const SMALL_TOOLTIP_MAX_WIDTH = 204;
+const getExclamationIcon = type => type === 'error' ? StatusAlertFilled : StatusWarningFilled;
+export const Exclamation = _ref => {
+  let {
+    className,
+    type = 'warning',
+    size
+  } = _ref;
+  const Icon = useMemo(() => getExclamationIcon(type), [type]);
+  return /*#__PURE__*/React.createElement(Box, {
+    className: st(classes.exclamation, {
+      type
+    }, className)
+  }, /*#__PURE__*/React.createElement(Icon, {
+    size: size,
+    "data-hook": "exclamation-icon"
+  }));
+};
+Exclamation.displayName = 'Exclamation';
+export const DetailedExclamation = _ref2 => {
+  let {
+    onShow,
+    tooltipContent,
+    tooltipSize,
+    boxProps,
+    dataHook,
+    ...exclamationProps
+  } = _ref2;
+  const maxWidth = tooltipSize === 'small' ? SMALL_TOOLTIP_MAX_WIDTH : TOOLTIP_MAX_WIDTH;
+  const tooltipProps = {
+    dataHook,
+    appendTo: 'window',
+    size: tooltipSize,
+    maxWidth,
+    onShow,
+    content: tooltipContent
+  };
+  return /*#__PURE__*/React.createElement(Box, boxProps, /*#__PURE__*/React.createElement(Tooltip, tooltipProps, /*#__PURE__*/React.createElement(Exclamation, exclamationProps)));
+};
+DetailedExclamation.displayName = 'DetailedExclamation';
+//# sourceMappingURL=exclamation.js.map

package/dist/esm/cms-fields/components/exclamation/exclamation.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useMemo","Box","Tooltip","StatusAlertFilled","StatusWarningFilled","classes","st","TOOLTIP_MAX_WIDTH","SMALL_TOOLTIP_MAX_WIDTH","getExclamationIcon","type","Exclamation","_ref","className","size","Icon","createElement","exclamation","displayName","DetailedExclamation","_ref2","onShow","tooltipContent","tooltipSize","boxProps","dataHook","exclamationProps","maxWidth","tooltipProps","appendTo","content"],"sources":["../../../../../src/cms-fields/components/exclamation/exclamation.tsx"],"sourcesContent":["import type { FC, ReactNode } from 'react';\nimport React, { useMemo } from 'react';\n\nimport type { BoxProps, TooltipProps } from '@wix/design-system';\nimport { Box, Tooltip } from '@wix/design-system';\nimport {\n  StatusAlertFilled,\n  StatusWarningFilled,\n} from '@wix/wix-ui-icons-common';\n\nimport { classes, st } from './exclamation.st.css.js';\n\nconst TOOLTIP_MAX_WIDTH = 230;\nconst SMALL_TOOLTIP_MAX_WIDTH = 204;\n\ninterface ExclamationProps {\n  size?: number;\n  type?: 'warning' | 'error';\n  className?: string;\n}\n\nconst getExclamationIcon = (type: ExclamationProps['type']) =>\n  type === 'error' ? StatusAlertFilled : StatusWarningFilled;\n\nexport const Exclamation: FC<ExclamationProps> = ({\n  className,\n  type = 'warning',\n  size,\n}) => {\n  const Icon = useMemo(() => getExclamationIcon(type), [type]);\n\n  return (\n    <Box\n      className={st(\n        classes.exclamation,\n        {\n          type,\n        },\n        className,\n      )}\n    >\n      <Icon size={size} data-hook=\"exclamation-icon\" />\n    </Box>\n  );\n};\n\nExclamation.displayName = 'Exclamation';\n\nexport interface DetailedExclamationProps extends ExclamationProps {\n  onShow?: () => void;\n  tooltipContent?: ReactNode;\n  tooltipSize?: TooltipProps['size'];\n  boxProps?: BoxProps;\n  dataHook?: string;\n}\n\nexport const DetailedExclamation: FC<DetailedExclamationProps> = ({\n  onShow,\n  tooltipContent,\n  tooltipSize,\n  boxProps,\n  dataHook,\n  ...exclamationProps\n}) => {\n  const maxWidth =\n    tooltipSize === 'small' ? SMALL_TOOLTIP_MAX_WIDTH : TOOLTIP_MAX_WIDTH;\n\n  const tooltipProps = {\n    dataHook,\n    appendTo: 'window' as const,\n    size: tooltipSize,\n    maxWidth,\n    onShow,\n    content: tooltipContent,\n  };\n\n  return (\n    <Box {...boxProps}>\n      <Tooltip {...tooltipProps}>\n        <Exclamation {...exclamationProps} />\n      </Tooltip>\n    </Box>\n  );\n};\n\nDetailedExclamation.displayName = 'DetailedExclamation';\n"],"mappings":"AACA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AAGtC,SAASC,GAAG,EAAEC,OAAO,QAAQ,oBAAoB;AACjD,SACEC,iBAAiB,EACjBC,mBAAmB,QACd,0BAA0B;AAEjC,SAASC,OAAO,EAAEC,EAAE,QAAQ,yBAAyB;AAErD,MAAMC,iBAAiB,GAAG,GAAG;AAC7B,MAAMC,uBAAuB,GAAG,GAAG;AAQnC,MAAMC,kBAAkB,GAAIC,IAA8B,IACxDA,IAAI,KAAK,OAAO,GAAGP,iBAAiB,GAAGC,mBAAmB;AAE5D,OAAO,MAAMO,WAAiC,GAAGC,IAAA,IAI3C;EAAA,IAJ4C;IAChDC,SAAS;IACTH,IAAI,GAAG,SAAS;IAChBI;EACF,CAAC,GAAAF,IAAA;EACC,MAAMG,IAAI,GAAGf,OAAO,CAAC,MAAMS,kBAAkB,CAACC,IAAI,CAAC,EAAE,CAACA,IAAI,CAAC,CAAC;EAE5D,oBACEX,KAAA,CAAAiB,aAAA,CAACf,GAAG;IACFY,SAAS,EAAEP,EAAE,CACXD,OAAO,CAACY,WAAW,EACnB;MACEP;IACF,CAAC,EACDG,SACF;EAAE,gBAEFd,KAAA,CAAAiB,aAAA,CAACD,IAAI;IAACD,IAAI,EAAEA,IAAK;IAAC,aAAU;EAAkB,CAAE,CAC7C,CAAC;AAEV,CAAC;AAEDH,WAAW,CAACO,WAAW,GAAG,aAAa;AAUvC,OAAO,MAAMC,mBAAiD,GAAGC,KAAA,IAO3D;EAAA,IAP4D;IAChEC,MAAM;IACNC,cAAc;IACdC,WAAW;IACXC,QAAQ;IACRC,QAAQ;IACR,GAAGC;EACL,CAAC,GAAAN,KAAA;EACC,MAAMO,QAAQ,GACZJ,WAAW,KAAK,OAAO,GAAGf,uBAAuB,GAAGD,iBAAiB;EAEvE,MAAMqB,YAAY,GAAG;IACnBH,QAAQ;IACRI,QAAQ,EAAE,QAAiB;IAC3Bf,IAAI,EAAES,WAAW;IACjBI,QAAQ;IACRN,MAAM;IACNS,OAAO,EAAER;EACX,CAAC;EAED,oBACEvB,KAAA,CAAAiB,aAAA,CAACf,GAAG,EAAKuB,QAAQ,eACfzB,KAAA,CAAAiB,aAAA,CAACd,OAAO,EAAK0B,YAAY,eACvB7B,KAAA,CAAAiB,aAAA,CAACL,WAAW,EAAKe,gBAAmB,CAC7B,CACN,CAAC;AAEV,CAAC;AAEDP,mBAAmB,CAACD,WAAW,GAAG,qBAAqB","ignoreList":[]}

package/dist/esm/cms-fields/components/exclamation/exclamation.st.css

@@ -0,0 +1,53 @@
+@property st-global(--wds-color-fill-warning-primary);
+@property st-global(--wds-color-fill-destructive-primary);
+@property st-global(--wds-color-blue-100);
+@property st-global(--wds-color-blue-200);
+
+.exclamation {
+  -st-states: type(enum(warning, error)), customSize;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  box-sizing: border-box;
+  border-radius: 3px;
+  cursor: pointer;
+}
+
+.exclamation:type(warning):not(:customSize),
+.exclamation:type(error):not(:customSize) {
+  width: 24px;
+  height: 24px;
+}
+
+.exclamation:type(warning) svg {
+  color: var(--wds-color-fill-warning-primary);
+}
+
+.exclamation:type(error) svg {
+  color: var(--wds-color-fill-destructive-primary);
+}
+
+.actions {
+  margin-top: 20px;
+  display: flex;
+  flex-direction: column;
+}
+
+.action {
+  -st-states: accented;
+  white-space: normal !important;
+  height: auto !important;
+  text-align: left;
+  gap: 6px;
+}
+
+.action + .action {
+  margin-top: 6px;
+}
+
+.action:accented {
+  color: var(--wds-color-blue-100);
+}
+.action:accented:hover {
+  color: var(--wds-color-blue-200);
+}

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

@@ -0,0 +1,26 @@
+// @ts-nocheck
+
+import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js";
+var _namespace_ = "exclamation434051250";
+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": "exclamation434051250__root",
+  "exclamation": "exclamation434051250__exclamation",
+  "actions": "exclamation434051250__actions",
+  "action": "exclamation434051250__action"
+};
+export var keyframes = {};
+export var layers = {};
+export var containers = {};
+export var stVars = {};
+export var vars = {
+  "wds-color-fill-warning-primary": "--wds-color-fill-warning-primary",
+  "wds-color-fill-destructive-primary": "--wds-color-fill-destructive-primary",
+  "wds-color-blue-100": "--wds-color-blue-100",
+  "wds-color-blue-200": "--wds-color-blue-200"
+};
+//# sourceMappingURL=exclamation.st.css.js.map

package/dist/esm/cms-fields/components/exclamation/exclamation.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/exclamation/exclamation.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"exclamation434051250\";\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\":\"exclamation434051250__root\",\"exclamation\":\"exclamation434051250__exclamation\",\"actions\":\"exclamation434051250__actions\",\"action\":\"exclamation434051250__action\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {\"wds-color-fill-warning-primary\":\"--wds-color-fill-warning-primary\",\"wds-color-fill-destructive-primary\":\"--wds-color-fill-destructive-primary\",\"wds-color-blue-100\":\"--wds-color-blue-100\",\"wds-color-blue-200\":\"--wds-color-blue-200\"}; \n\n\n\n\n"],"mappings":"AAAA;;AAGA,SAASA,cAAc,EAAEC,aAAa,QAAQ,kCAAkC;AAIhF,IAAIC,WAAW,GAAG,sBAAsB;AACxC,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,4BAA4B;EAAC,aAAa,EAAC,mCAAmC;EAAC,SAAS,EAAC,+BAA+B;EAAC,QAAQ,EAAC;AAA8B,CAAC;AAC9L,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,gCAAgC,EAAC,kCAAkC;EAAC,oCAAoC,EAAC,sCAAsC;EAAC,oBAAoB,EAAC,sBAAsB;EAAC,oBAAoB,EAAC;AAAsB,CAAC","ignoreList":[]}

package/dist/esm/cms-fields/components/exclamation/index.js

@@ -0,0 +1,3 @@
+export * from './exclamation';
+export * from './type-mismatch-exclamation';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["../../../../../src/cms-fields/components/exclamation/index.ts"],"sourcesContent":["export * from './exclamation';\nexport * from './type-mismatch-exclamation';\n"],"mappings":"AAAA,cAAc,eAAe;AAC7B,cAAc,6BAA6B","ignoreList":[]}

package/dist/esm/cms-fields/components/exclamation/type-mismatch-exclamation.js

@@ -0,0 +1,91 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useCallback } from 'react';
+import { Box, Loader, TextButton } from '@wix/design-system';
+import { DetailedExclamation } from './exclamation';
+import { classes } from './exclamation.st.css.js';
+export const TypeMismatchExclamation = _ref => {
+  let {
+    typeName,
+    isConverted,
+    isConverting,
+    convertedValue,
+    onClear,
+    onChange,
+    readOnly,
+    boxProps,
+    onActionMouseDown,
+    onShow,
+    onConvertClick,
+    onClearClick,
+    convertButtonText,
+    convertDisabledText,
+    clearButtonText,
+    tooltipText
+  } = _ref;
+  const onConvert = useCallback(() => {
+    onChange(convertedValue);
+    onConvertClick == null || onConvertClick();
+  }, [onChange, convertedValue, onConvertClick]);
+  const onClearHandler = useCallback(() => {
+    onClear();
+    onClearClick == null || onClearClick();
+  }, [onClear, onClearClick]);
+  const isConvertAllowed = isConverted && !readOnly;
+  const convertBtn = isConvertAllowed || isConverting ? /*#__PURE__*/React.createElement(TextButton, {
+    className: classes.action,
+    skin: "light",
+    onClick: onConvert,
+    size: "small",
+    underline: "always",
+    disabled: isConverting,
+    suffixIcon: isConverting ? /*#__PURE__*/React.createElement(Loader, {
+      color: "white",
+      size: "tiny"
+    }) : undefined,
+    dataHook: "type-mismatch-exclamation-convert-button"
+  }, convertButtonText) : /*#__PURE__*/React.createElement(TextButton, {
+    className: classes.action,
+    skin: "light",
+    size: "small",
+    underline: "always",
+    disabled: true,
+    dataHook: "type-mismatch-exclamation-convert-disabled-button"
+  }, convertDisabledText);
+  const clearBtn = /*#__PURE__*/React.createElement(TextButton, {
+    className: classes.action,
+    skin: "light",
+    size: "small",
+    underline: "always",
+    disabled: readOnly,
+    onClick: readOnly ? undefined : onClearHandler,
+    dataHook: "type-mismatch-exclamation-clear-button"
+  }, clearButtonText);
+  return /*#__PURE__*/React.createElement(TypeMismatchDetailedExclamation, {
+    boxProps: boxProps,
+    typeName: typeName,
+    tooltipText: tooltipText,
+    tooltipContent: /*#__PURE__*/React.createElement("div", {
+      className: classes.actions,
+      onMouseDown: onActionMouseDown
+    }, convertBtn, clearBtn),
+    onShow: onShow
+  });
+};
+TypeMismatchExclamation.displayName = 'TypeMismatchExclamation';
+export const TypeMismatchDetailedExclamation = _ref2 => {
+  let {
+    typeName,
+    tooltipText,
+    tooltipContent,
+    ...props
+  } = _ref2;
+  return /*#__PURE__*/React.createElement(DetailedExclamation, _extends({}, props, {
+    dataHook: "type-mismatch-detailed-exclamation-tooltip",
+    type: "warning",
+    tooltipContent: /*#__PURE__*/React.createElement(Box, {
+      direction: "vertical"
+    }, tooltipText, tooltipContent)
+  }));
+};
+TypeMismatchDetailedExclamation.displayName = 'TypeMismatchDetailedExclamation';
+//# sourceMappingURL=type-mismatch-exclamation.js.map

package/dist/esm/cms-fields/components/exclamation/type-mismatch-exclamation.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useCallback","Box","Loader","TextButton","DetailedExclamation","classes","TypeMismatchExclamation","_ref","typeName","isConverted","isConverting","convertedValue","onClear","onChange","readOnly","boxProps","onActionMouseDown","onShow","onConvertClick","onClearClick","convertButtonText","convertDisabledText","clearButtonText","tooltipText","onConvert","onClearHandler","isConvertAllowed","convertBtn","createElement","className","action","skin","onClick","size","underline","disabled","suffixIcon","color","undefined","dataHook","clearBtn","TypeMismatchDetailedExclamation","tooltipContent","actions","onMouseDown","displayName","_ref2","props","_extends","type","direction"],"sources":["../../../../../src/cms-fields/components/exclamation/type-mismatch-exclamation.tsx"],"sourcesContent":["import type { FC, ReactNode } from 'react';\nimport React, { useCallback } from 'react';\n\nimport type { BoxProps } from '@wix/design-system';\nimport { Box, Loader, TextButton } from '@wix/design-system';\n\nimport type { DetailedExclamationProps } from './exclamation';\nimport { DetailedExclamation } from './exclamation';\nimport { classes } from './exclamation.st.css.js';\n\nexport interface TypeMismatchExclamationProps {\n  /** The translated field type name for display */\n  typeName: string;\n  /** The translated field name for display */\n  fieldName: string;\n  /** Whether the data can be converted to the target type */\n  isConverted: boolean;\n  /** Whether conversion is in progress */\n  isConverting: boolean;\n  /** The converted value to apply on convert click */\n  convertedValue: unknown;\n  /** Handler for converting the value */\n  onChange: (data?: unknown) => void;\n  /** Handler for clearing the value */\n  onClear: () => void;\n  /** Whether the field is read-only */\n  readOnly?: boolean;\n  /** Box props for styling */\n  boxProps?: BoxProps;\n  /** Mouse down handler for action buttons */\n  onActionMouseDown?: React.MouseEventHandler;\n  /** Called when the tooltip is shown */\n  onShow?: () => void;\n  /** Called when the convert action is triggered */\n  onConvertClick?: () => void;\n  /** Called when the clear action is triggered */\n  onClearClick?: () => void;\n  /** Localized text for \"Convert to {typeName}\" button */\n  convertButtonText: string;\n  /** Localized text for disabled convert button */\n  convertDisabledText: string;\n  /** Localized text for \"Clear\" button */\n  clearButtonText: string;\n  /** Localized text for the tooltip message */\n  tooltipText: string;\n}\n\nexport const TypeMismatchExclamation: FC<TypeMismatchExclamationProps> = ({\n  typeName,\n  isConverted,\n  isConverting,\n  convertedValue,\n  onClear,\n  onChange,\n  readOnly,\n  boxProps,\n  onActionMouseDown,\n  onShow,\n  onConvertClick,\n  onClearClick,\n  convertButtonText,\n  convertDisabledText,\n  clearButtonText,\n  tooltipText,\n}) => {\n  const onConvert = useCallback(() => {\n    onChange(convertedValue);\n    onConvertClick?.();\n  }, [onChange, convertedValue, onConvertClick]);\n\n  const onClearHandler = useCallback(() => {\n    onClear();\n    onClearClick?.();\n  }, [onClear, onClearClick]);\n\n  const isConvertAllowed = isConverted && !readOnly;\n  const convertBtn =\n    isConvertAllowed || isConverting ? (\n      <TextButton\n        className={classes.action}\n        skin=\"light\"\n        onClick={onConvert}\n        size=\"small\"\n        underline=\"always\"\n        disabled={isConverting}\n        suffixIcon={\n          isConverting ? <Loader color=\"white\" size=\"tiny\" /> : undefined\n        }\n        dataHook=\"type-mismatch-exclamation-convert-button\"\n      >\n        {convertButtonText}\n      </TextButton>\n    ) : (\n      <TextButton\n        className={classes.action}\n        skin=\"light\"\n        size=\"small\"\n        underline=\"always\"\n        disabled\n        dataHook=\"type-mismatch-exclamation-convert-disabled-button\"\n      >\n        {convertDisabledText}\n      </TextButton>\n    );\n\n  const clearBtn = (\n    <TextButton\n      className={classes.action}\n      skin=\"light\"\n      size=\"small\"\n      underline=\"always\"\n      disabled={readOnly}\n      onClick={readOnly ? undefined : onClearHandler}\n      dataHook=\"type-mismatch-exclamation-clear-button\"\n    >\n      {clearButtonText}\n    </TextButton>\n  );\n\n  return (\n    <TypeMismatchDetailedExclamation\n      boxProps={boxProps}\n      typeName={typeName}\n      tooltipText={tooltipText}\n      tooltipContent={\n        <div className={classes.actions} onMouseDown={onActionMouseDown}>\n          {convertBtn}\n          {clearBtn}\n        </div>\n      }\n      onShow={onShow}\n    />\n  );\n};\n\nTypeMismatchExclamation.displayName = 'TypeMismatchExclamation';\n\ninterface TypeMismatchDetailedExclamationProps\n  extends Omit<DetailedExclamationProps, 'tooltipContent'> {\n  typeName: string;\n  tooltipText: string;\n  tooltipContent?: ReactNode;\n}\n\nexport const TypeMismatchDetailedExclamation: FC<\n  TypeMismatchDetailedExclamationProps\n> = ({ typeName, tooltipText, tooltipContent, ...props }) => {\n  return (\n    <DetailedExclamation\n      {...props}\n      dataHook=\"type-mismatch-detailed-exclamation-tooltip\"\n      type=\"warning\"\n      tooltipContent={\n        <Box direction=\"vertical\">\n          {tooltipText}\n          {tooltipContent}\n        </Box>\n      }\n    />\n  );\n};\n\nTypeMismatchDetailedExclamation.displayName = 'TypeMismatchDetailedExclamation';\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/cms-fields/components/highlighted-text/highlighted-text.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { style, classes } from './highlighted-text.st.css.js';
+export const HighlightedText = _ref => {
+  let {
+    highlight,
+    highlightedBackground = true,
+    className,
+    dataHook
+  } = _ref;
+  return /*#__PURE__*/React.createElement("span", {
+    "data-hook": dataHook,
+    className: style(classes.root, {
+      highlightedBackground
+    }, className)
+  }, highlight.map((_ref2, key) => {
+    let {
+      substring,
+      isHighlighted
+    } = _ref2;
+    return /*#__PURE__*/React.createElement("span", {
+      key: key,
+      className: style(classes.substring, {
+        isHighlighted
+      }),
+      children: substring
+    });
+  }));
+};
+//# sourceMappingURL=highlighted-text.js.map

package/dist/esm/cms-fields/components/highlighted-text/highlighted-text.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","style","classes","HighlightedText","_ref","highlight","highlightedBackground","className","dataHook","createElement","root","map","_ref2","key","substring","isHighlighted","children"],"sources":["../../../../../src/cms-fields/components/highlighted-text/highlighted-text.tsx"],"sourcesContent":["import React from 'react';\n\nimport { style, classes } from './highlighted-text.st.css.js';\n\nimport type { HighlightDescriptor } from '../../utils';\n\nexport interface HighlightTextProps {\n  highlight: HighlightDescriptor;\n  highlightedBackground?: boolean;\n  className?: string;\n  dataHook?: string;\n}\n\nexport const HighlightedText: React.FC<HighlightTextProps> = ({\n  highlight,\n  highlightedBackground = true,\n  className,\n  dataHook,\n}) => (\n  <span\n    data-hook={dataHook}\n    className={style(classes.root, { highlightedBackground }, className)}\n  >\n    {highlight.map(({ substring, isHighlighted }, key) => (\n      <span\n        key={key}\n        className={style(classes.substring, { isHighlighted })}\n        children={substring}\n      />\n    ))}\n  </span>\n);\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,KAAK,EAAEC,OAAO,QAAQ,8BAA8B;AAW7D,OAAO,MAAMC,eAA6C,GAAGC,IAAA;EAAA,IAAC;IAC5DC,SAAS;IACTC,qBAAqB,GAAG,IAAI;IAC5BC,SAAS;IACTC;EACF,CAAC,GAAAJ,IAAA;EAAA,oBACCJ,KAAA,CAAAS,aAAA;IACE,aAAWD,QAAS;IACpBD,SAAS,EAAEN,KAAK,CAACC,OAAO,CAACQ,IAAI,EAAE;MAAEJ;IAAsB,CAAC,EAAEC,SAAS;EAAE,GAEpEF,SAAS,CAACM,GAAG,CAAC,CAAAC,KAAA,EAA+BC,GAAG;IAAA,IAAjC;MAAEC,SAAS;MAAEC;IAAc,CAAC,GAAAH,KAAA;IAAA,oBAC1CZ,KAAA,CAAAS,aAAA;MACEI,GAAG,EAAEA,GAAI;MACTN,SAAS,EAAEN,KAAK,CAACC,OAAO,CAACY,SAAS,EAAE;QAAEC;MAAc,CAAC,CAAE;MACvDC,QAAQ,EAAEF;IAAU,CACrB,CAAC;EAAA,CACH,CACG,CAAC;AAAA,CACR","ignoreList":[]}

package/dist/esm/cms-fields/components/highlighted-text/highlighted-text.st.css

@@ -0,0 +1,39 @@
+@property st-global(--wds-color-yellow-200);
+@property st-global(--wds-color-yellow-400);
+@property st-global(--wsr-color-Y20);
+@property st-global(--wsr-color-Y40);
+
+.root {
+    -st-states: highlightedBackground;
+}
+
+.root:highlightedBackground {
+    animation: highlighted 150ms ease-out 1 forwards;
+}
+
+.substring {
+    -st-states: isHighlighted;
+}
+
+.substring:isHighlighted {
+    animation: highlighted-match 150ms ease-out 50ms 1 forwards;
+}
+
+
+@keyframes highlighted {
+    from {
+        background-color: transparent;
+    }
+    to {
+        background-color: var(--wds-color-yellow-400, var(--wsr-color-Y40));
+    }
+}
+
+@keyframes highlighted-match {
+    from {
+        background-color: transparent;
+    }
+    to {
+        background-color: var(--wds-color-yellow-200, var(--wsr-color-Y20));
+    }
+}

package/dist/esm/cms-fields/components/highlighted-text/highlighted-text.st.css.js

@@ -0,0 +1,27 @@
+// @ts-nocheck
+
+import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js";
+var _namespace_ = "highlightedtext3204350970";
+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": "highlightedtext3204350970__root",
+  "substring": "highlightedtext3204350970__substring"
+};
+export var keyframes = {
+  "highlighted": "highlightedtext3204350970__highlighted",
+  "highlighted-match": "highlightedtext3204350970__highlighted-match"
+};
+export var layers = {};
+export var containers = {};
+export var stVars = {};
+export var vars = {
+  "wds-color-yellow-200": "--wds-color-yellow-200",
+  "wds-color-yellow-400": "--wds-color-yellow-400",
+  "wsr-color-Y20": "--wsr-color-Y20",
+  "wsr-color-Y40": "--wsr-color-Y40"
+};
+//# sourceMappingURL=highlighted-text.st.css.js.map

package/dist/esm/cms-fields/components/highlighted-text/highlighted-text.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/highlighted-text/highlighted-text.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"highlightedtext3204350970\";\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\":\"highlightedtext3204350970__root\",\"substring\":\"highlightedtext3204350970__substring\"};\nexport var keyframes = {\"highlighted\":\"highlightedtext3204350970__highlighted\",\"highlighted-match\":\"highlightedtext3204350970__highlighted-match\"}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {\"wds-color-yellow-200\":\"--wds-color-yellow-200\",\"wds-color-yellow-400\":\"--wds-color-yellow-400\",\"wsr-color-Y20\":\"--wsr-color-Y20\",\"wsr-color-Y40\":\"--wsr-color-Y40\"}; \n\n\n\n\n"],"mappings":"AAAA;;AAGA,SAASA,cAAc,EAAEC,aAAa,QAAQ,kCAAkC;AAIhF,IAAIC,WAAW,GAAG,2BAA2B;AAC7C,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,iCAAiC;EAAC,WAAW,EAAC;AAAsC,CAAC;AAClH,OAAO,IAAIC,SAAS,GAAG;EAAC,aAAa,EAAC,wCAAwC;EAAC,mBAAmB,EAAC;AAA8C,CAAC;AAClJ,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,sBAAsB,EAAC,wBAAwB;EAAC,sBAAsB,EAAC,wBAAwB;EAAC,eAAe,EAAC,iBAAiB;EAAC,eAAe,EAAC;AAAiB,CAAC","ignoreList":[]}