@oneblink/apps-react 8.14.0 → 9.0.0-beta.10

package/dist/components/receipts/ReceiptButton.js

@@ -1,9 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import clsx from 'clsx';
 function ReceiptButton({ className, label, isDisabled, isLoading, onClick, }) {
-    return (React.createElement("button", { type: "button", className: clsx('button ob-button ob-receipt__button', className, {
+    return (_jsx("button", { type: "button", className: clsx('button ob-button ob-receipt__button', className, {
             'is-loading': isLoading,
-        }), disabled: isLoading || isDisabled, onClick: onClick }, label));
+        }), disabled: isLoading || isDisabled, onClick: onClick, children: label }));
 }
 export default React.memo(ReceiptButton);
 //# sourceMappingURL=ReceiptButton.js.map

package/dist/components/receipts/ReceiptButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ReceiptButton.js","sourceRoot":"","sources":["../../../src/components/receipts/ReceiptButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,IAAI,MAAM,MAAM,CAAA;AAUvB,SAAS,aAAa,CAAC,EACrB,SAAS,EACT,KAAK,EACL,UAAU,EACV,SAAS,EACT,OAAO,GACD;IACN,OAAO,CACL,gCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,IAAI,CAAC,qCAAqC,EAAE,SAAS,EAAE;YAChE,YAAY,EAAE,SAAS;SACxB,CAAC,EACF,QAAQ,EAAE,SAAS,IAAI,UAAU,EACjC,OAAO,EAAE,OAAO,IAEf,KAAK,CACC,CACV,CAAA;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\n\ntype Props = {\n  className: string\n  label: string\n  isDisabled?: boolean\n  isLoading?: boolean\n  onClick: () => unknown\n}\n\nfunction ReceiptButton({\n  className,\n  label,\n  isDisabled,\n  isLoading,\n  onClick,\n}: Props) {\n  return (\n    <button\n      type=\"button\"\n      className={clsx('button ob-button ob-receipt__button', className, {\n        'is-loading': isLoading,\n      })}\n      disabled={isLoading || isDisabled}\n      onClick={onClick}\n    >\n      {label}\n    </button>\n  )\n}\n\nexport default React.memo(ReceiptButton)\n"]}
+{"version":3,"file":"ReceiptButton.js","sourceRoot":"","sources":["../../../src/components/receipts/ReceiptButton.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,IAAI,MAAM,MAAM,CAAA;AAUvB,SAAS,aAAa,CAAC,EACrB,SAAS,EACT,KAAK,EACL,UAAU,EACV,SAAS,EACT,OAAO,GACD;IACN,OAAO,CACL,iBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,IAAI,CAAC,qCAAqC,EAAE,SAAS,EAAE;YAChE,YAAY,EAAE,SAAS;SACxB,CAAC,EACF,QAAQ,EAAE,SAAS,IAAI,UAAU,EACjC,OAAO,EAAE,OAAO,YAEf,KAAK,GACC,CACV,CAAA;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\n\ntype Props = {\n  className: string\n  label: string\n  isDisabled?: boolean\n  isLoading?: boolean\n  onClick: () => unknown\n}\n\nfunction ReceiptButton({\n  className,\n  label,\n  isDisabled,\n  isLoading,\n  onClick,\n}: Props) {\n  return (\n    <button\n      type=\"button\"\n      className={clsx('button ob-button ob-receipt__button', className, {\n        'is-loading': isLoading,\n      })}\n      disabled={isLoading || isDisabled}\n      onClick={onClick}\n    >\n      {label}\n    </button>\n  )\n}\n\nexport default React.memo(ReceiptButton)\n"]}

package/dist/components/receipts/ReceiptList.d.ts

@@ -6,6 +6,6 @@ type Props = {
     warningMessage?: string;
     children: React.ReactNode;
 };
-declare function ReceiptList({ successIconClassName, warningIconClassName, warningMessageClassName, warningMessage, children, }: Props): React.JSX.Element;
+declare function ReceiptList({ successIconClassName, warningIconClassName, warningMessageClassName, warningMessage, children, }: Props): import("react/jsx-runtime").JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof ReceiptList>;
 export default _default;

package/dist/components/receipts/ReceiptList.js

@@ -1,16 +1,9 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import clsx from 'clsx';
 import MaterialIcon from '../MaterialIcon';
 function ReceiptList({ successIconClassName, warningIconClassName, warningMessageClassName, warningMessage, children, }) {
-    return (React.createElement("div", { className: "ob-list has-dividers has-shadow has-margin-bottom-4" },
-        React.createElement("div", { className: "ob-list__item" },
-            React.createElement("div", { className: "ob-list__content-wrapper" },
-                React.createElement("div", { className: "ob-list__content" }, !warningMessage ? (React.createElement("p", { className: "has-text-centered" },
-                    React.createElement(MaterialIcon, { className: clsx('has-text-success icon-x-large', successIconClassName) }, "check_circle_outline"))) : (React.createElement(React.Fragment, null,
-                    React.createElement("p", { className: "has-text-centered" },
-                        React.createElement(MaterialIcon, { className: clsx('has-text-danger icon-x-large', warningIconClassName) }, "warning")),
-                    React.createElement("p", { className: clsx('has-text-centered', warningMessageClassName) }, warningMessage)))))),
-        children));
+    return (_jsxs("div", { className: "ob-list has-dividers has-shadow has-margin-bottom-4", children: [_jsx("div", { className: "ob-list__item", children: _jsx("div", { className: "ob-list__content-wrapper", children: _jsx("div", { className: "ob-list__content", children: !warningMessage ? (_jsx("p", { className: "has-text-centered", children: _jsx(MaterialIcon, { className: clsx('has-text-success icon-x-large', successIconClassName), children: "check_circle_outline" }) })) : (_jsxs(_Fragment, { children: [_jsx("p", { className: "has-text-centered", children: _jsx(MaterialIcon, { className: clsx('has-text-danger icon-x-large', warningIconClassName), children: "warning" }) }), _jsx("p", { className: clsx('has-text-centered', warningMessageClassName), children: warningMessage })] })) }) }) }), children] }));
 }
 export default React.memo(ReceiptList);
 //# sourceMappingURL=ReceiptList.js.map

package/dist/components/receipts/ReceiptList.js.map

@@ -1 +1 @@
-{"version":3,"file":"ReceiptList.js","sourceRoot":"","sources":["../../../src/components/receipts/ReceiptList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,YAAY,MAAM,iBAAiB,CAAA;AAU1C,SAAS,WAAW,CAAC,EACnB,oBAAoB,EACpB,oBAAoB,EACpB,uBAAuB,EACvB,cAAc,EACd,QAAQ,GACF;IACN,OAAO,CACL,6BAAK,SAAS,EAAC,qDAAqD;QAClE,6BAAK,SAAS,EAAC,eAAe;YAC5B,6BAAK,SAAS,EAAC,0BAA0B;gBACvC,6BAAK,SAAS,EAAC,kBAAkB,IAC9B,CAAC,cAAc,CAAC,CAAC,CAAC,CACjB,2BAAG,SAAS,EAAC,mBAAmB;oBAC9B,oBAAC,YAAY,IACX,SAAS,EAAE,IAAI,CACb,+BAA+B,EAC/B,oBAAoB,CACrB,2BAGY,CACb,CACL,CAAC,CAAC,CAAC,CACF;oBACE,2BAAG,SAAS,EAAC,mBAAmB;wBAC9B,oBAAC,YAAY,IACX,SAAS,EAAE,IAAI,CACb,8BAA8B,EAC9B,oBAAoB,CACrB,cAGY,CACb;oBACJ,2BACE,SAAS,EAAE,IAAI,CAAC,mBAAmB,EAAE,uBAAuB,CAAC,IAE5D,cAAc,CACb,CACH,CACJ,CACG,CACF,CACF;QACL,QAAQ,CACL,CACP,CAAA;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\nimport MaterialIcon from '../MaterialIcon'\n\ntype Props = {\n  successIconClassName: string\n  warningIconClassName?: string\n  warningMessageClassName?: string\n  warningMessage?: string\n  children: React.ReactNode\n}\n\nfunction ReceiptList({\n  successIconClassName,\n  warningIconClassName,\n  warningMessageClassName,\n  warningMessage,\n  children,\n}: Props) {\n  return (\n    <div className=\"ob-list has-dividers has-shadow has-margin-bottom-4\">\n      <div className=\"ob-list__item\">\n        <div className=\"ob-list__content-wrapper\">\n          <div className=\"ob-list__content\">\n            {!warningMessage ? (\n              <p className=\"has-text-centered\">\n                <MaterialIcon\n                  className={clsx(\n                    'has-text-success icon-x-large',\n                    successIconClassName,\n                  )}\n                >\n                  check_circle_outline\n                </MaterialIcon>\n              </p>\n            ) : (\n              <>\n                <p className=\"has-text-centered\">\n                  <MaterialIcon\n                    className={clsx(\n                      'has-text-danger icon-x-large',\n                      warningIconClassName,\n                    )}\n                  >\n                    warning\n                  </MaterialIcon>\n                </p>\n                <p\n                  className={clsx('has-text-centered', warningMessageClassName)}\n                >\n                  {warningMessage}\n                </p>\n              </>\n            )}\n          </div>\n        </div>\n      </div>\n      {children}\n    </div>\n  )\n}\n\nexport default React.memo(ReceiptList)\n"]}
+{"version":3,"file":"ReceiptList.js","sourceRoot":"","sources":["../../../src/components/receipts/ReceiptList.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,YAAY,MAAM,iBAAiB,CAAA;AAU1C,SAAS,WAAW,CAAC,EACnB,oBAAoB,EACpB,oBAAoB,EACpB,uBAAuB,EACvB,cAAc,EACd,QAAQ,GACF;IACN,OAAO,CACL,eAAK,SAAS,EAAC,qDAAqD,aAClE,cAAK,SAAS,EAAC,eAAe,YAC5B,cAAK,SAAS,EAAC,0BAA0B,YACvC,cAAK,SAAS,EAAC,kBAAkB,YAC9B,CAAC,cAAc,CAAC,CAAC,CAAC,CACjB,YAAG,SAAS,EAAC,mBAAmB,YAC9B,KAAC,YAAY,IACX,SAAS,EAAE,IAAI,CACb,+BAA+B,EAC/B,oBAAoB,CACrB,qCAGY,GACb,CACL,CAAC,CAAC,CAAC,CACF,8BACE,YAAG,SAAS,EAAC,mBAAmB,YAC9B,KAAC,YAAY,IACX,SAAS,EAAE,IAAI,CACb,8BAA8B,EAC9B,oBAAoB,CACrB,wBAGY,GACb,EACJ,YACE,SAAS,EAAE,IAAI,CAAC,mBAAmB,EAAE,uBAAuB,CAAC,YAE5D,cAAc,GACb,IACH,CACJ,GACG,GACF,GACF,EACL,QAAQ,IACL,CACP,CAAA;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\nimport MaterialIcon from '../MaterialIcon'\n\ntype Props = {\n  successIconClassName: string\n  warningIconClassName?: string\n  warningMessageClassName?: string\n  warningMessage?: string\n  children: React.ReactNode\n}\n\nfunction ReceiptList({\n  successIconClassName,\n  warningIconClassName,\n  warningMessageClassName,\n  warningMessage,\n  children,\n}: Props) {\n  return (\n    <div className=\"ob-list has-dividers has-shadow has-margin-bottom-4\">\n      <div className=\"ob-list__item\">\n        <div className=\"ob-list__content-wrapper\">\n          <div className=\"ob-list__content\">\n            {!warningMessage ? (\n              <p className=\"has-text-centered\">\n                <MaterialIcon\n                  className={clsx(\n                    'has-text-success icon-x-large',\n                    successIconClassName,\n                  )}\n                >\n                  check_circle_outline\n                </MaterialIcon>\n              </p>\n            ) : (\n              <>\n                <p className=\"has-text-centered\">\n                  <MaterialIcon\n                    className={clsx(\n                      'has-text-danger icon-x-large',\n                      warningIconClassName,\n                    )}\n                  >\n                    warning\n                  </MaterialIcon>\n                </p>\n                <p\n                  className={clsx('has-text-centered', warningMessageClassName)}\n                >\n                  {warningMessage}\n                </p>\n              </>\n            )}\n          </div>\n        </div>\n      </div>\n      {children}\n    </div>\n  )\n}\n\nexport default React.memo(ReceiptList)\n"]}

package/dist/components/receipts/ReceiptListItem.d.ts

@@ -7,6 +7,6 @@ type Props = {
     value: string;
     allowCopyToClipboard?: boolean;
 };
-declare function ReceiptListItem({ className, valueClassName, icon, label, value, allowCopyToClipboard, }: Props): React.JSX.Element;
+declare function ReceiptListItem({ className, valueClassName, icon, label, value, allowCopyToClipboard, }: Props): import("react/jsx-runtime").JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof ReceiptListItem>;
 export default _default;

package/dist/components/receipts/ReceiptListItem.js

@@ -1,19 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import clsx from 'clsx';
 import utilsService from '../../services/utils-service';
 import MaterialIcon from '../MaterialIcon';
 function ReceiptListItem({ className, valueClassName, icon, label, value, allowCopyToClipboard, }) {
-    return (React.createElement("div", { className: clsx('ob-list__item', className) },
-        !!icon && (React.createElement("div", { className: "ob-list__avatar" },
-            React.createElement(MaterialIcon, { className: "icon-medium" }, icon))),
-        React.createElement("div", { className: "ob-list__content-wrapper" },
-            React.createElement("div", { className: "ob-list__content" },
-                React.createElement("div", { className: "ob-list__text-secondary" }, label),
-                React.createElement("div", { className: clsx('ob-list__text-primary', valueClassName) }, value))),
-        allowCopyToClipboard && (React.createElement("div", { className: "ob-list__actions" },
-            React.createElement("button", { type: "button", className: "button ob-button ob-list__button is-small is-white tooltip has-tooltip-left", onClick: () => utilsService.copyToClipboard(value), "data-tooltip": "Copy to clipboard" },
-                React.createElement("span", { className: "icon has-text-grey" },
-                    React.createElement(MaterialIcon, { className: "icon-small ob-icon__copy has-text" }, "file_copy")))))));
+    return (_jsxs("div", { className: clsx('ob-list__item', className), children: [!!icon && (_jsx("div", { className: "ob-list__avatar", children: _jsx(MaterialIcon, { className: "icon-medium", children: icon }) })), _jsx("div", { className: "ob-list__content-wrapper", children: _jsxs("div", { className: "ob-list__content", children: [_jsx("div", { className: "ob-list__text-secondary", children: label }), _jsx("div", { className: clsx('ob-list__text-primary', valueClassName), children: value })] }) }), allowCopyToClipboard && (_jsx("div", { className: "ob-list__actions", children: _jsx("button", { type: "button", className: "button ob-button ob-list__button is-small is-white tooltip has-tooltip-left", onClick: () => utilsService.copyToClipboard(value), "data-tooltip": "Copy to clipboard", children: _jsx("span", { className: "icon has-text-grey", children: _jsx(MaterialIcon, { className: "icon-small ob-icon__copy has-text", children: "file_copy" }) }) }) }))] }));
 }
 export default React.memo(ReceiptListItem);
 //# sourceMappingURL=ReceiptListItem.js.map

package/dist/components/receipts/ReceiptListItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"ReceiptListItem.js","sourceRoot":"","sources":["../../../src/components/receipts/ReceiptListItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,YAAY,MAAM,8BAA8B,CAAA;AACvD,OAAO,YAAY,MAAM,iBAAiB,CAAA;AAW1C,SAAS,eAAe,CAAC,EACvB,SAAS,EACT,cAAc,EACd,IAAI,EACJ,KAAK,EACL,KAAK,EACL,oBAAoB,GACd;IACN,OAAO,CACL,6BAAK,SAAS,EAAE,IAAI,CAAC,eAAe,EAAE,SAAS,CAAC;QAC7C,CAAC,CAAC,IAAI,IAAI,CACT,6BAAK,SAAS,EAAC,iBAAiB;YAC9B,oBAAC,YAAY,IAAC,SAAS,EAAC,aAAa,IAAE,IAAI,CAAgB,CACvD,CACP;QACD,6BAAK,SAAS,EAAC,0BAA0B;YACvC,6BAAK,SAAS,EAAC,kBAAkB;gBAC/B,6BAAK,SAAS,EAAC,yBAAyB,IAAE,KAAK,CAAO;gBACtD,6BAAK,SAAS,EAAE,IAAI,CAAC,uBAAuB,EAAE,cAAc,CAAC,IAC1D,KAAK,CACF,CACF,CACF;QACL,oBAAoB,IAAI,CACvB,6BAAK,SAAS,EAAC,kBAAkB;YAC/B,gCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,6EAA6E,EACvF,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,eAAe,CAAC,KAAK,CAAC,kBACrC,mBAAmB;gBAEhC,8BAAM,SAAS,EAAC,oBAAoB;oBAClC,oBAAC,YAAY,IAAC,SAAS,EAAC,mCAAmC,gBAE5C,CACV,CACA,CACL,CACP,CACG,CACP,CAAA;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\nimport utilsService from '../../services/utils-service'\nimport MaterialIcon from '../MaterialIcon'\n\ntype Props = {\n  className: string\n  valueClassName: string\n  icon?: string\n  label: string\n  value: string\n  allowCopyToClipboard?: boolean\n}\n\nfunction ReceiptListItem({\n  className,\n  valueClassName,\n  icon,\n  label,\n  value,\n  allowCopyToClipboard,\n}: Props) {\n  return (\n    <div className={clsx('ob-list__item', className)}>\n      {!!icon && (\n        <div className=\"ob-list__avatar\">\n          <MaterialIcon className=\"icon-medium\">{icon}</MaterialIcon>\n        </div>\n      )}\n      <div className=\"ob-list__content-wrapper\">\n        <div className=\"ob-list__content\">\n          <div className=\"ob-list__text-secondary\">{label}</div>\n          <div className={clsx('ob-list__text-primary', valueClassName)}>\n            {value}\n          </div>\n        </div>\n      </div>\n      {allowCopyToClipboard && (\n        <div className=\"ob-list__actions\">\n          <button\n            type=\"button\"\n            className=\"button ob-button ob-list__button is-small is-white tooltip has-tooltip-left\"\n            onClick={() => utilsService.copyToClipboard(value)}\n            data-tooltip=\"Copy to clipboard\"\n          >\n            <span className=\"icon has-text-grey\">\n              <MaterialIcon className=\"icon-small ob-icon__copy has-text\">\n                file_copy\n              </MaterialIcon>\n            </span>\n          </button>\n        </div>\n      )}\n    </div>\n  )\n}\n\nexport default React.memo(ReceiptListItem)\n"]}
+{"version":3,"file":"ReceiptListItem.js","sourceRoot":"","sources":["../../../src/components/receipts/ReceiptListItem.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,YAAY,MAAM,8BAA8B,CAAA;AACvD,OAAO,YAAY,MAAM,iBAAiB,CAAA;AAW1C,SAAS,eAAe,CAAC,EACvB,SAAS,EACT,cAAc,EACd,IAAI,EACJ,KAAK,EACL,KAAK,EACL,oBAAoB,GACd;IACN,OAAO,CACL,eAAK,SAAS,EAAE,IAAI,CAAC,eAAe,EAAE,SAAS,CAAC,aAC7C,CAAC,CAAC,IAAI,IAAI,CACT,cAAK,SAAS,EAAC,iBAAiB,YAC9B,KAAC,YAAY,IAAC,SAAS,EAAC,aAAa,YAAE,IAAI,GAAgB,GACvD,CACP,EACD,cAAK,SAAS,EAAC,0BAA0B,YACvC,eAAK,SAAS,EAAC,kBAAkB,aAC/B,cAAK,SAAS,EAAC,yBAAyB,YAAE,KAAK,GAAO,EACtD,cAAK,SAAS,EAAE,IAAI,CAAC,uBAAuB,EAAE,cAAc,CAAC,YAC1D,KAAK,GACF,IACF,GACF,EACL,oBAAoB,IAAI,CACvB,cAAK,SAAS,EAAC,kBAAkB,YAC/B,iBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,6EAA6E,EACvF,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,eAAe,CAAC,KAAK,CAAC,kBACrC,mBAAmB,YAEhC,eAAM,SAAS,EAAC,oBAAoB,YAClC,KAAC,YAAY,IAAC,SAAS,EAAC,mCAAmC,0BAE5C,GACV,GACA,GACL,CACP,IACG,CACP,CAAA;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\nimport utilsService from '../../services/utils-service'\nimport MaterialIcon from '../MaterialIcon'\n\ntype Props = {\n  className: string\n  valueClassName: string\n  icon?: string\n  label: string\n  value: string\n  allowCopyToClipboard?: boolean\n}\n\nfunction ReceiptListItem({\n  className,\n  valueClassName,\n  icon,\n  label,\n  value,\n  allowCopyToClipboard,\n}: Props) {\n  return (\n    <div className={clsx('ob-list__item', className)}>\n      {!!icon && (\n        <div className=\"ob-list__avatar\">\n          <MaterialIcon className=\"icon-medium\">{icon}</MaterialIcon>\n        </div>\n      )}\n      <div className=\"ob-list__content-wrapper\">\n        <div className=\"ob-list__content\">\n          <div className=\"ob-list__text-secondary\">{label}</div>\n          <div className={clsx('ob-list__text-primary', valueClassName)}>\n            {value}\n          </div>\n        </div>\n      </div>\n      {allowCopyToClipboard && (\n        <div className=\"ob-list__actions\">\n          <button\n            type=\"button\"\n            className=\"button ob-button ob-list__button is-small is-white tooltip has-tooltip-left\"\n            onClick={() => utilsService.copyToClipboard(value)}\n            data-tooltip=\"Copy to clipboard\"\n          >\n            <span className=\"icon has-text-grey\">\n              <MaterialIcon className=\"icon-small ob-icon__copy has-text\">\n                file_copy\n              </MaterialIcon>\n            </span>\n          </button>\n        </div>\n      )}\n    </div>\n  )\n}\n\nexport default React.memo(ReceiptListItem)\n"]}

package/dist/components/renderer/AnnotationModal.d.ts

@@ -3,7 +3,7 @@ declare function AnnotationModal({ imageSrc, onClose, onSave, }: {
     imageSrc: string;
     onClose: () => void;
     onSave: (newValue: string) => void;
-}): React.JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof AnnotationModal>;
 export default _default;
 export declare const superimposeAnnotationOnImage: ({ annotationDataUri, attachmentUrl, }: {

package/dist/components/renderer/AnnotationModal.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import clsx from 'clsx';
 import SignatureCanvas from 'react-signature-canvas';
@@ -84,20 +85,11 @@ function AnnotationModal({ imageSrc, onClose, onSave, }) {
             scrollingService.enableScrolling();
         };
     }, [imageSrc]);
-    return (React.createElement("div", { className: "modal is-active" },
-        React.createElement("div", { className: "modal-background-faded" }),
-        React.createElement("div", { className: "ob-annotation ob-border-radius" },
-            React.createElement("div", { className: "ob-annotation__buttons ob-annotation__buttons-colours ob-border-radius" }, annotationButtonColours.map((colour, index) => {
-                return (React.createElement("button", { key: index, type: "button", className: clsx('button ob-annotation__button ob-annotation__button-colour cypress-annotation-colour-button', {
-                        'is-selected': penColour === colour,
-                    }), onClick: () => setPenColour(colour), style: { backgroundColor: colour } }));
-            })),
-            React.createElement("div", { ref: annotationContentElementRef, className: "ob-annotation__content" },
-                React.createElement("div", { ref: bmSignaturePadRef, className: "ob-annotation__signature-pad cypress-annotation-signature-pad" },
-                    React.createElement(SignatureCanvas, { ref: signatureCanvasRef, clearOnResize: false, onEnd: setDirty, penColor: penColour }))),
-            React.createElement("div", { className: "ob-annotation__buttons ob-annotation__buttons-actions" },
-                React.createElement("button", { type: "button", className: "button is-light ob-button ob-annotation__button ob-annotation__button-action cypress-annotation-cancel-button", onClick: handleCancelAnnotation }, "Cancel"),
-                React.createElement("button", { type: "button", className: "button is-primary ob-button ob-annotation__button ob-annotation__button-action cypress-annotation-save-button", disabled: !isDirty, onClick: handleSaveAnnotation }, "Save")))));
+    return (_jsxs("div", { className: "modal is-active", children: [_jsx("div", { className: "modal-background-faded" }), _jsxs("div", { className: "ob-annotation ob-border-radius", children: [_jsx("div", { className: "ob-annotation__buttons ob-annotation__buttons-colours ob-border-radius", children: annotationButtonColours.map((colour, index) => {
+                            return (_jsx("button", { type: "button", className: clsx('button ob-annotation__button ob-annotation__button-colour cypress-annotation-colour-button', {
+                                    'is-selected': penColour === colour,
+                                }), onClick: () => setPenColour(colour), style: { backgroundColor: colour } }, index));
+                        }) }), _jsx("div", { ref: annotationContentElementRef, className: "ob-annotation__content", children: _jsx("div", { ref: bmSignaturePadRef, className: "ob-annotation__signature-pad cypress-annotation-signature-pad", children: _jsx(SignatureCanvas, { ref: signatureCanvasRef, clearOnResize: false, onEnd: setDirty, penColor: penColour }) }) }), _jsxs("div", { className: "ob-annotation__buttons ob-annotation__buttons-actions", children: [_jsx("button", { type: "button", className: "button is-light ob-button ob-annotation__button ob-annotation__button-action cypress-annotation-cancel-button", onClick: handleCancelAnnotation, children: "Cancel" }), _jsx("button", { type: "button", className: "button is-primary ob-button ob-annotation__button ob-annotation__button-action cypress-annotation-save-button", disabled: !isDirty, onClick: handleSaveAnnotation, children: "Save" })] })] })] }));
 }
 export default React.memo(AnnotationModal);
 export const superimposeAnnotationOnImage = async ({ annotationDataUri, attachmentUrl, }) => {

package/dist/components/renderer/AnnotationModal.js.map

@@ -1 +1 @@
-{"version":3,"file":"AnnotationModal.js","sourceRoot":"","sources":["../../../src/components/renderer/AnnotationModal.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\nimport SignatureCanvas from 'react-signature-canvas'\n\nimport useBooleanState from '../../hooks/useBooleanState'\nimport scrollingService from '../../services/scrolling-service'\nimport { canvasToBlob } from '../../services/blob-utils'\n\nconst annotationButtonColours = [\n  '#000000',\n  '#ffffff',\n  '#f44336',\n  '#e91e63',\n  '#9c27b0',\n  '#673ab7',\n  '#3f51b5',\n  '#2196f3',\n  '#03a9f4',\n  '#00bcd4',\n  '#009688',\n  '#4caf50',\n  '#8bc34a',\n  '#cddc39',\n  '#ffee58',\n  '#ffca28',\n  '#ffa726',\n  '#ff5722',\n]\n\nfunction AnnotationModal({\n  imageSrc,\n  onClose,\n  onSave,\n}: {\n  imageSrc: string\n  onClose: () => void\n  onSave: (newValue: string) => void\n}) {\n  const annotationContentElementRef = React.useRef<HTMLDivElement>(null)\n  const bmSignaturePadRef = React.useRef<HTMLDivElement>(null)\n  const signatureCanvasRef = React.useRef<SignatureCanvas>(null)\n\n  const [isDirty, setDirty] = useBooleanState(false)\n  const [penColour, setPenColour] = React.useState(annotationButtonColours[0])\n\n  const handleCancelAnnotation = React.useCallback(() => {\n    if (signatureCanvasRef.current) {\n      console.log('Clearing annotation...')\n      signatureCanvasRef.current.clear()\n    }\n    onClose()\n  }, [onClose])\n\n  const handleSaveAnnotation = React.useCallback(() => {\n    if (signatureCanvasRef.current) {\n      onSave(signatureCanvasRef.current.toDataURL())\n    }\n  }, [onSave])\n\n  // SETTING CANVAS FROM PASSED VALUE\n  React.useEffect(() => {\n    const annotationContentElement = annotationContentElementRef.current\n    const bmSignaturePadElement = bmSignaturePadRef.current\n    const signatureCanvas = signatureCanvasRef.current\n    if (\n      !annotationContentElement ||\n      !bmSignaturePadElement ||\n      !signatureCanvas ||\n      typeof imageSrc !== 'string'\n    ) {\n      return\n    }\n    const canvasElement = signatureCanvas.getCanvas()\n\n    // Disable scrolling to allow for smooth drawing\n    scrollingService.disableScrolling()\n\n    const maxWidth = annotationContentElement.clientWidth\n    const maxHeight = annotationContentElement.clientHeight\n\n    const i = new Image()\n    i.onload = function () {\n      const imageWidth = i.width\n      const imageHeight = i.height\n      let canvasWidth = imageWidth\n      let canvasHeight = imageHeight\n\n      if (imageWidth > maxWidth || imageHeight > maxHeight) {\n        const widthRatio = maxWidth / imageWidth\n        const heightRatio = maxHeight / imageHeight\n        const ratio = Math.min(widthRatio, heightRatio)\n\n        canvasWidth = ratio * imageWidth\n        canvasHeight = ratio * imageHeight\n      }\n\n      bmSignaturePadElement.style.width = `${canvasWidth}px`\n      bmSignaturePadElement.style.height = `${canvasHeight}px`\n      bmSignaturePadElement.style.backgroundSize = 'cover'\n      bmSignaturePadElement.style.backgroundImage = `url(${imageSrc})`\n      canvasElement.width = canvasWidth\n      canvasElement.height = canvasHeight\n    }\n    console.log('imageSrc', imageSrc)\n    i.src = imageSrc\n\n    return () => {\n      scrollingService.enableScrolling()\n    }\n  }, [imageSrc])\n\n  return (\n    <div className=\"modal is-active\">\n      <div className=\"modal-background-faded\"></div>\n      <div className=\"ob-annotation ob-border-radius\">\n        <div className=\"ob-annotation__buttons ob-annotation__buttons-colours ob-border-radius\">\n          {annotationButtonColours.map((colour, index) => {\n            return (\n              <button\n                key={index}\n                type=\"button\"\n                className={clsx(\n                  'button ob-annotation__button ob-annotation__button-colour cypress-annotation-colour-button',\n                  {\n                    'is-selected': penColour === colour,\n                  },\n                )}\n                onClick={() => setPenColour(colour)}\n                style={{ backgroundColor: colour }}\n              />\n            )\n          })}\n        </div>\n        <div\n          ref={annotationContentElementRef}\n          className=\"ob-annotation__content\"\n        >\n          <div\n            ref={bmSignaturePadRef}\n            className=\"ob-annotation__signature-pad cypress-annotation-signature-pad\"\n          >\n            <SignatureCanvas\n              ref={signatureCanvasRef}\n              clearOnResize={false}\n              onEnd={setDirty}\n              penColor={penColour}\n            />\n          </div>\n        </div>\n        <div className=\"ob-annotation__buttons ob-annotation__buttons-actions\">\n          <button\n            type=\"button\"\n            className=\"button is-light ob-button ob-annotation__button ob-annotation__button-action cypress-annotation-cancel-button\"\n            onClick={handleCancelAnnotation}\n          >\n            Cancel\n          </button>\n          <button\n            type=\"button\"\n            className=\"button is-primary ob-button ob-annotation__button ob-annotation__button-action cypress-annotation-save-button\"\n            disabled={!isDirty}\n            onClick={handleSaveAnnotation}\n          >\n            Save\n          </button>\n        </div>\n      </div>\n    </div>\n  )\n}\n\nexport default React.memo(AnnotationModal)\n\nexport const superimposeAnnotationOnImage = async ({\n  annotationDataUri,\n  attachmentUrl,\n}: {\n  annotationDataUri: string\n  attachmentUrl: string\n}): Promise<Blob | undefined> => {\n  const canvas = document.createElement('canvas')\n  const ctx = canvas.getContext('2d')\n  if (!ctx) {\n    return\n  }\n\n  const image = new Image()\n  return new Promise<Blob>((resolve, reject) => {\n    image.onload = function () {\n      canvas.width = image.width\n      canvas.height = image.height\n\n      ctx.drawImage(image, 0, 0)\n\n      const annotationImage = new Image()\n      annotationImage.onload = function () {\n        ctx.drawImage(annotationImage, 0, 0, canvas.width, canvas.height)\n        canvasToBlob(canvas).then(resolve).catch(reject)\n      }\n      annotationImage.src = annotationDataUri\n    }\n    image.setAttribute('crossorigin', 'anonymous')\n    image.src = attachmentUrl\n  })\n}\n"]}
+{"version":3,"file":"AnnotationModal.js","sourceRoot":"","sources":["../../../src/components/renderer/AnnotationModal.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\nimport SignatureCanvas from 'react-signature-canvas'\n\nimport useBooleanState from '../../hooks/useBooleanState'\nimport scrollingService from '../../services/scrolling-service'\nimport { canvasToBlob } from '../../services/blob-utils'\n\nconst annotationButtonColours = [\n  '#000000',\n  '#ffffff',\n  '#f44336',\n  '#e91e63',\n  '#9c27b0',\n  '#673ab7',\n  '#3f51b5',\n  '#2196f3',\n  '#03a9f4',\n  '#00bcd4',\n  '#009688',\n  '#4caf50',\n  '#8bc34a',\n  '#cddc39',\n  '#ffee58',\n  '#ffca28',\n  '#ffa726',\n  '#ff5722',\n]\n\nfunction AnnotationModal({\n  imageSrc,\n  onClose,\n  onSave,\n}: {\n  imageSrc: string\n  onClose: () => void\n  onSave: (newValue: string) => void\n}) {\n  const annotationContentElementRef = React.useRef<HTMLDivElement>(null)\n  const bmSignaturePadRef = React.useRef<HTMLDivElement>(null)\n  const signatureCanvasRef = React.useRef<SignatureCanvas>(null)\n\n  const [isDirty, setDirty] = useBooleanState(false)\n  const [penColour, setPenColour] = React.useState(annotationButtonColours[0])\n\n  const handleCancelAnnotation = React.useCallback(() => {\n    if (signatureCanvasRef.current) {\n      console.log('Clearing annotation...')\n      signatureCanvasRef.current.clear()\n    }\n    onClose()\n  }, [onClose])\n\n  const handleSaveAnnotation = React.useCallback(() => {\n    if (signatureCanvasRef.current) {\n      onSave(signatureCanvasRef.current.toDataURL())\n    }\n  }, [onSave])\n\n  // SETTING CANVAS FROM PASSED VALUE\n  React.useEffect(() => {\n    const annotationContentElement = annotationContentElementRef.current\n    const bmSignaturePadElement = bmSignaturePadRef.current\n    const signatureCanvas = signatureCanvasRef.current\n    if (\n      !annotationContentElement ||\n      !bmSignaturePadElement ||\n      !signatureCanvas ||\n      typeof imageSrc !== 'string'\n    ) {\n      return\n    }\n    const canvasElement = signatureCanvas.getCanvas()\n\n    // Disable scrolling to allow for smooth drawing\n    scrollingService.disableScrolling()\n\n    const maxWidth = annotationContentElement.clientWidth\n    const maxHeight = annotationContentElement.clientHeight\n\n    const i = new Image()\n    i.onload = function () {\n      const imageWidth = i.width\n      const imageHeight = i.height\n      let canvasWidth = imageWidth\n      let canvasHeight = imageHeight\n\n      if (imageWidth > maxWidth || imageHeight > maxHeight) {\n        const widthRatio = maxWidth / imageWidth\n        const heightRatio = maxHeight / imageHeight\n        const ratio = Math.min(widthRatio, heightRatio)\n\n        canvasWidth = ratio * imageWidth\n        canvasHeight = ratio * imageHeight\n      }\n\n      bmSignaturePadElement.style.width = `${canvasWidth}px`\n      bmSignaturePadElement.style.height = `${canvasHeight}px`\n      bmSignaturePadElement.style.backgroundSize = 'cover'\n      bmSignaturePadElement.style.backgroundImage = `url(${imageSrc})`\n      canvasElement.width = canvasWidth\n      canvasElement.height = canvasHeight\n    }\n    console.log('imageSrc', imageSrc)\n    i.src = imageSrc\n\n    return () => {\n      scrollingService.enableScrolling()\n    }\n  }, [imageSrc])\n\n  return (\n    <div className=\"modal is-active\">\n      <div className=\"modal-background-faded\"></div>\n      <div className=\"ob-annotation ob-border-radius\">\n        <div className=\"ob-annotation__buttons ob-annotation__buttons-colours ob-border-radius\">\n          {annotationButtonColours.map((colour, index) => {\n            return (\n              <button\n                key={index}\n                type=\"button\"\n                className={clsx(\n                  'button ob-annotation__button ob-annotation__button-colour cypress-annotation-colour-button',\n                  {\n                    'is-selected': penColour === colour,\n                  },\n                )}\n                onClick={() => setPenColour(colour)}\n                style={{ backgroundColor: colour }}\n              />\n            )\n          })}\n        </div>\n        <div\n          ref={annotationContentElementRef}\n          className=\"ob-annotation__content\"\n        >\n          <div\n            ref={bmSignaturePadRef}\n            className=\"ob-annotation__signature-pad cypress-annotation-signature-pad\"\n          >\n            <SignatureCanvas\n              ref={signatureCanvasRef}\n              clearOnResize={false}\n              onEnd={setDirty}\n              penColor={penColour}\n            />\n          </div>\n        </div>\n        <div className=\"ob-annotation__buttons ob-annotation__buttons-actions\">\n          <button\n            type=\"button\"\n            className=\"button is-light ob-button ob-annotation__button ob-annotation__button-action cypress-annotation-cancel-button\"\n            onClick={handleCancelAnnotation}\n          >\n            Cancel\n          </button>\n          <button\n            type=\"button\"\n            className=\"button is-primary ob-button ob-annotation__button ob-annotation__button-action cypress-annotation-save-button\"\n            disabled={!isDirty}\n            onClick={handleSaveAnnotation}\n          >\n            Save\n          </button>\n        </div>\n      </div>\n    </div>\n  )\n}\n\nexport default React.memo(AnnotationModal)\n\nexport const superimposeAnnotationOnImage = async ({\n  annotationDataUri,\n  attachmentUrl,\n}: {\n  annotationDataUri: string\n  attachmentUrl: string\n}): Promise<Blob | undefined> => {\n  const canvas = document.createElement('canvas')\n  const ctx = canvas.getContext('2d')\n  if (!ctx) {\n    return\n  }\n\n  const image = new Image()\n  return new Promise<Blob>((resolve, reject) => {\n    image.onload = function () {\n      canvas.width = image.width\n      canvas.height = image.height\n\n      ctx.drawImage(image, 0, 0)\n\n      const annotationImage = new Image()\n      annotationImage.onload = function () {\n        ctx.drawImage(annotationImage, 0, 0, canvas.width, canvas.height)\n        canvasToBlob(canvas).then(resolve).catch(reject)\n      }\n      annotationImage.src = annotationDataUri\n    }\n    image.setAttribute('crossorigin', 'anonymous')\n    image.src = attachmentUrl\n  })\n}\n"]}

package/dist/components/renderer/AutocompleteDropdown.d.ts

@@ -25,6 +25,6 @@ type Props<T> = {
     branding?: React.ReactNode;
     autoComplete?: string;
 } & IsDirtyProps;
-declare function AutocompleteDropdown<T>({ id, label, value, placeholder, required, disabled, validationMessage, displayValidationMessage, searchDebounceMs, searchMinCharacters, isLoading, hasError, onChangeValue, onChangeLabel, onSearch, isDirty, setIsDirty, branding, autoComplete, ...props }: Props<T>): React.JSX.Element;
+declare function AutocompleteDropdown<T>({ id, label, value, placeholder, required, disabled, validationMessage, displayValidationMessage, searchDebounceMs, searchMinCharacters, isLoading, hasError, onChangeValue, onChangeLabel, onSearch, isDirty, setIsDirty, branding, autoComplete, ...props }: Props<T>): import("react/jsx-runtime").JSX.Element;
 declare const _default: typeof AutocompleteDropdown;
 export default _default;

package/dist/components/renderer/AutocompleteDropdown.js

@@ -1,6 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from 'react';
 import clsx from 'clsx';
-import { Sentry } from '@oneblink/apps';
+import { Sentry } from '../../apps';
 import useBooleanState from '../../hooks/useBooleanState';
 import { LookupNotificationContext } from '../../hooks/useLookupNotification';
 import MaterialIcon from '../MaterialIcon';
@@ -152,40 +153,20 @@ function AutocompleteDropdown({ id, label, value, placeholder, required, disable
     const isShowingLoading = isFetchingOptions || !!isLoading;
     const isShowingValid = !isShowingLoading && value !== undefined;
     const isShowingError = !isShowingLoading && !isLookingUp && !!hasError;
-    return (React.createElement(React.Fragment, null,
-        React.createElement("div", { className: clsx('dropdown', {
-                'is-active': isOpen && Array.isArray(options),
-            }) },
-            React.createElement("div", { className: "field" },
-                React.createElement("div", { className: clsx('cypress-autocomplete-field-control control is-expanded', {
-                        'is-loading': isShowingLoading,
-                        'has-icons-right': isShowingValid || isShowingError,
-                    }) },
-                    React.createElement("input", { type: "text", placeholder: placeholder, id: id, autoComplete: autoComplete !== null && autoComplete !== void 0 ? autoComplete : 'off', className: "cypress-autocomplete-control input ob-input", required: required, value: label, disabled: disabled, onFocus: onFocus, onBlur: () => handleBlur({ label, value }), onKeyDown: onKeyDown, onChange: handleChangeLabel, "aria-describedby": props['aria-describedby'], "aria-required": required }),
-                    isShowingValid && (React.createElement("span", { className: " ob-input-icon icon is-small is-right" },
-                        React.createElement(MaterialIcon, { className: "is-size-5 has-text-success" }, "check"))),
-                    isShowingError && (React.createElement("span", { className: " ob-input-icon icon is-small is-right" },
-                        React.createElement(MaterialIcon, { className: "is-size-5 has-text-danger" }, "error"))))),
-            React.createElement("div", { className: "dropdown-menu" },
-                React.createElement("div", { ref: optionsContainerElement, className: "ob-autocomplete__dropdown-content dropdown-content cypress-autocomplete-dropdown-content" },
-                    error ? (React.createElement("a", { className: "dropdown-item cypress-autocomplete-error ob-autocomplete__drop-down-item-error" },
-                        React.createElement("span", { className: "has-text-danger" }, error.message))) : label.length < searchMinCharacters ? (React.createElement("a", { className: "dropdown-item cypress-max-characters ob-autocomplete__drop-down-item-max-characters" },
-                        React.createElement("i", null,
-                            "Enter at least ",
-                            searchMinCharacters,
-                            " character(s) to search"))) : isShowingLoading ? (React.createElement("a", { className: "dropdown-item cypress-searching-options ob-autocomplete__drop-down-item-searching" },
-                        React.createElement("i", null, "Searching..."))) : options && options.length ? (options.map((option, index) => (React.createElement("a", { key: option.value, className: clsx(`dropdown-item cypress-autocomplete-dropdown-item ob-autocomplete__drop-down-item-${index}`, {
-                            'is-active': currentFocusedOptionIndex === index,
-                        }), onMouseDown: (e) => handleClickOption(e, option), 
-                        // eslint-disable-next-line react/no-danger
-                        dangerouslySetInnerHTML: {
-                            __html: highlightLabel(option.label, label),
-                        } })))) : (React.createElement("a", { className: "dropdown-item cypress-no-matches-found ob-autocomplete__drop-down-item-no-matches" },
-                        React.createElement("i", null, "No matches found"))),
-                    branding))),
-        (isDirty || displayValidationMessage) &&
-            !!validationMessage &&
-            !isShowingLoading && (React.createElement(FormElementValidationMessage, { message: validationMessage }))));
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: clsx('dropdown', {
+                    'is-active': isOpen && Array.isArray(options),
+                }), children: [_jsx("div", { className: "field", children: _jsxs("div", { className: clsx('cypress-autocomplete-field-control control is-expanded', {
+                                'is-loading': isShowingLoading,
+                                'has-icons-right': isShowingValid || isShowingError,
+                            }), children: [_jsx("input", { type: "text", placeholder: placeholder, id: id, autoComplete: autoComplete !== null && autoComplete !== void 0 ? autoComplete : 'off', className: "cypress-autocomplete-control input ob-input", required: required, value: label, disabled: disabled, onFocus: onFocus, onBlur: () => handleBlur({ label, value }), onKeyDown: onKeyDown, onChange: handleChangeLabel, "aria-describedby": props['aria-describedby'], "aria-required": required }), isShowingValid && (_jsx("span", { className: " ob-input-icon icon is-small is-right", children: _jsx(MaterialIcon, { className: "is-size-5 has-text-success", children: "check" }) })), isShowingError && (_jsx("span", { className: " ob-input-icon icon is-small is-right", children: _jsx(MaterialIcon, { className: "is-size-5 has-text-danger", children: "error" }) }))] }) }), _jsx("div", { className: "dropdown-menu", children: _jsxs("div", { ref: optionsContainerElement, className: "ob-autocomplete__dropdown-content dropdown-content cypress-autocomplete-dropdown-content", children: [error ? (_jsx("a", { className: "dropdown-item cypress-autocomplete-error ob-autocomplete__drop-down-item-error", children: _jsx("span", { className: "has-text-danger", children: error.message }) })) : label.length < searchMinCharacters ? (_jsx("a", { className: "dropdown-item cypress-max-characters ob-autocomplete__drop-down-item-max-characters", children: _jsxs("i", { children: ["Enter at least ", searchMinCharacters, " character(s) to search"] }) })) : isShowingLoading ? (_jsx("a", { className: "dropdown-item cypress-searching-options ob-autocomplete__drop-down-item-searching", children: _jsx("i", { children: "Searching..." }) })) : options && options.length ? (options.map((option, index) => (_jsx("a", { className: clsx(`dropdown-item cypress-autocomplete-dropdown-item ob-autocomplete__drop-down-item-${index}`, {
+                                        'is-active': currentFocusedOptionIndex === index,
+                                    }), onMouseDown: (e) => handleClickOption(e, option), 
+                                    // eslint-disable-next-line react/no-danger
+                                    dangerouslySetInnerHTML: {
+                                        __html: highlightLabel(option.label, label),
+                                    } }, option.value)))) : (_jsx("a", { className: "dropdown-item cypress-no-matches-found ob-autocomplete__drop-down-item-no-matches", children: _jsx("i", { children: "No matches found" }) })), branding] }) })] }), (isDirty || displayValidationMessage) &&
+                !!validationMessage &&
+                !isShowingLoading && (_jsx(FormElementValidationMessage, { message: validationMessage }))] }));
 }
 export default React.memo(AutocompleteDropdown);
 function highlightLabel(text, phrase) {

package/dist/components/renderer/AutocompleteDropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"AutocompleteDropdown.js","sourceRoot":"","sources":["../../../src/components/renderer/AutocompleteDropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\nimport { Sentry } from '@oneblink/apps'\n\nimport useBooleanState from '../../hooks/useBooleanState'\nimport { IsDirtyProps } from '../../types/form'\nimport { LookupNotificationContext } from '../../hooks/useLookupNotification'\nimport MaterialIcon from '../MaterialIcon'\nimport FormElementValidationMessage from './FormElementValidationMessage'\n\ntype AutocompleteOption<T> = {\n  label: string\n  value: string\n  data?: T\n}\n\ntype Props<T> = {\n  id: string\n  label: string\n  value: unknown | undefined\n  placeholder: string | undefined\n  required: boolean | undefined\n  disabled: boolean | undefined\n  isLoading?: boolean\n  hasError?: boolean\n  validationMessage: string | undefined\n  displayValidationMessage: boolean\n  searchDebounceMs: number\n  searchMinCharacters: number\n  onChangeValue: (\n    newValue: string | undefined,\n    data?: T,\n  ) => Promise<void> | void\n  onChangeLabel: (newLabel: string) => void\n  onSearch: (\n    label: string,\n    abortSignal: AbortSignal,\n  ) => Promise<AutocompleteOption<T>[]>\n  'aria-describedby'?: string\n  branding?: React.ReactNode\n  autoComplete?: string\n} & IsDirtyProps\n\nfunction AutocompleteDropdown<T>({\n  id,\n  label,\n  value,\n  placeholder,\n  required,\n  disabled,\n  validationMessage,\n  displayValidationMessage,\n  searchDebounceMs,\n  searchMinCharacters,\n  isLoading,\n  hasError,\n  onChangeValue,\n  onChangeLabel,\n  onSearch,\n  isDirty,\n  setIsDirty,\n  branding,\n  autoComplete,\n  ...props\n}: Props<T>) {\n  const optionsContainerElement = React.useRef<HTMLDivElement>(null)\n  const [currentFocusedOptionIndex, setCurrentFocusedOptionIndex] =\n    React.useState(0)\n  const [options, setOptions] = React.useState<AutocompleteOption<T>[]>([])\n  const [error, setError] = React.useState<Error | null>(null)\n  const [isFetchingOptions, setIsFetchingOptions] = React.useState(false)\n  const [isOpen, onOpen, onClose] = useBooleanState(false)\n\n  const onSelectOption = React.useCallback(\n    (option: AutocompleteOption<T>) => {\n      onChangeLabel(option.label)\n      onChangeValue(option.value, option.data)\n      onClose()\n    },\n    [onChangeLabel, onChangeValue, onClose],\n  )\n\n  const handleClickOption = React.useCallback(\n    (\n      event: React.MouseEvent<HTMLAnchorElement, MouseEvent>,\n      option: AutocompleteOption<T>,\n    ) => {\n      console.log('Selected element option in autocomplete', option)\n\n      event.preventDefault()\n      event.stopPropagation()\n\n      onSelectOption(option)\n    },\n    [onSelectOption],\n  )\n\n  const onFocus = React.useCallback(() => {\n    setCurrentFocusedOptionIndex(0)\n    onOpen()\n  }, [onOpen])\n\n  // When moving away from the input, if this is no value remove\n  // the label to show the user they have not selected a value\n  const handleBlur = React.useCallback(\n    (inputOption: { label: string; value: unknown | undefined }) => {\n      setIsDirty()\n      setError(null)\n      onClose()\n\n      if (Array.isArray(options)) {\n        // If there is a label that resembles an option, set that option to be the new value.\n        // UNLESS it was the previously selected label. Else, clear the label and the value.\n        if (inputOption.label) {\n          const lowerCase = inputOption.label.toLowerCase()\n          const option = options.find(\n            (option) => option.label.toLowerCase() === lowerCase,\n          )\n          if (option) {\n            // If the new option is not equal to the option that is currently selected,\n            // we want to update to the new option to ensure that it gets changed.\n            if (inputOption.value !== option.value) {\n              console.log('Setting value after blurring away from autocomplete')\n              onSelectOption(option)\n            }\n            return\n          }\n        }\n\n        console.log('Removing label after blurring away from autocomplete')\n        onChangeValue(undefined)\n        onChangeLabel('')\n      }\n    },\n    [\n      onChangeLabel,\n      onChangeValue,\n      onClose,\n      onSelectOption,\n      options,\n      setIsDirty,\n    ],\n  )\n\n  const onKeyDown = React.useCallback<\n    React.KeyboardEventHandler<HTMLInputElement>\n  >(\n    (event) => {\n      if (!options) {\n        return\n      }\n      const enterPressed = event.keyCode === 13\n      const upArrowPressed = event.keyCode === 38\n      const downArrowPressed = event.keyCode === 40\n      if (!upArrowPressed && !downArrowPressed && !enterPressed) {\n        return\n      }\n\n      event.preventDefault()\n\n      const previousFocusedOptionIndex = currentFocusedOptionIndex\n      let nextFocusedOptionIndex = currentFocusedOptionIndex\n      if (upArrowPressed) {\n        nextFocusedOptionIndex = Math.max(0, currentFocusedOptionIndex - 1)\n      } else if (downArrowPressed) {\n        nextFocusedOptionIndex = Math.min(\n          options.length - 1,\n          currentFocusedOptionIndex + 1,\n        )\n      } else if (enterPressed) {\n        const option = options[nextFocusedOptionIndex]\n        if (option) {\n          onSelectOption(option)\n        }\n      }\n\n      // If the index has changed, need to ensure the active option is visible\n      if (\n        previousFocusedOptionIndex !== nextFocusedOptionIndex &&\n        optionsContainerElement.current\n      ) {\n        const activeStepElement = optionsContainerElement.current.querySelector(\n          `.ob-autocomplete__drop-down-item-${nextFocusedOptionIndex}`,\n        )\n        if (activeStepElement) {\n          activeStepElement.scrollIntoView({\n            behavior: 'smooth',\n            block: 'nearest',\n            inline: 'start',\n          })\n        }\n        setCurrentFocusedOptionIndex(nextFocusedOptionIndex)\n      }\n    },\n    [currentFocusedOptionIndex, options, onSelectOption],\n  )\n\n  const handleChangeLabel = React.useCallback<\n    React.ChangeEventHandler<HTMLInputElement>\n  >(\n    (e) => {\n      const newLabel = e.target.value\n      onOpen()\n      setCurrentFocusedOptionIndex(0)\n\n      onChangeLabel(newLabel)\n    },\n    [onChangeLabel, onOpen],\n  )\n\n  React.useEffect(() => {\n    setError(null)\n\n    if (!isOpen || label.length < searchMinCharacters) {\n      setIsFetchingOptions(false)\n      return\n    }\n\n    setIsFetchingOptions(true)\n\n    let ignore = false\n    const abortController = new AbortController()\n\n    const timeoutId = setTimeout(async () => {\n      let newOptions: AutocompleteOption<T>[] = []\n      let newError = null\n\n      try {\n        newOptions = await onSearch(label, abortController.signal)\n      } catch (error) {\n        // Cancelling will throw an error.\n        if (!abortController.signal.aborted) {\n          console.warn('Error while fetching autocomplete options', error)\n          Sentry.captureException(error)\n          newError = error as Error\n        }\n      }\n      if (!ignore) {\n        setError(newError)\n        setOptions(newOptions)\n        setIsFetchingOptions(false)\n      }\n    }, searchDebounceMs)\n\n    return () => {\n      ignore = true\n      clearTimeout(timeoutId)\n      abortController.abort()\n    }\n  }, [isOpen, label, onSearch, searchDebounceMs, searchMinCharacters])\n\n  React.useEffect(() => {\n    //If there is no value set, we want to clear the label\n    //This is to satisfy lookups that return undefined.\n    if (!value) {\n      onChangeLabel('')\n    }\n  }, [onChangeLabel, value])\n  const { isLookingUp } = React.useContext(LookupNotificationContext)\n\n  const isShowingLoading = isFetchingOptions || !!isLoading\n  const isShowingValid = !isShowingLoading && value !== undefined\n  const isShowingError = !isShowingLoading && !isLookingUp && !!hasError\n\n  return (\n    <>\n      <div\n        className={clsx('dropdown', {\n          'is-active': isOpen && Array.isArray(options),\n        })}\n      >\n        <div className=\"field\">\n          <div\n            className={clsx(\n              'cypress-autocomplete-field-control control is-expanded',\n              {\n                'is-loading': isShowingLoading,\n                'has-icons-right': isShowingValid || isShowingError,\n              },\n            )}\n          >\n            <input\n              type=\"text\"\n              placeholder={placeholder}\n              id={id}\n              autoComplete={autoComplete ?? 'off'}\n              className=\"cypress-autocomplete-control input ob-input\"\n              required={required}\n              value={label}\n              disabled={disabled}\n              onFocus={onFocus}\n              onBlur={() => handleBlur({ label, value })}\n              onKeyDown={onKeyDown}\n              onChange={handleChangeLabel}\n              aria-describedby={props['aria-describedby']}\n              aria-required={required}\n            />\n            {isShowingValid && (\n              <span className=\" ob-input-icon icon is-small is-right\">\n                <MaterialIcon className=\"is-size-5 has-text-success\">\n                  check\n                </MaterialIcon>\n              </span>\n            )}\n            {isShowingError && (\n              <span className=\" ob-input-icon icon is-small is-right\">\n                <MaterialIcon className=\"is-size-5 has-text-danger\">\n                  error\n                </MaterialIcon>\n              </span>\n            )}\n          </div>\n        </div>\n\n        <div className=\"dropdown-menu\">\n          <div\n            ref={optionsContainerElement}\n            className=\"ob-autocomplete__dropdown-content dropdown-content cypress-autocomplete-dropdown-content\"\n          >\n            {error ? (\n              <a className=\"dropdown-item cypress-autocomplete-error ob-autocomplete__drop-down-item-error\">\n                <span className=\"has-text-danger\">{error.message}</span>\n              </a>\n            ) : label.length < searchMinCharacters ? (\n              <a className=\"dropdown-item cypress-max-characters ob-autocomplete__drop-down-item-max-characters\">\n                <i>\n                  Enter at least {searchMinCharacters} character(s) to search\n                </i>\n              </a>\n            ) : isShowingLoading ? (\n              <a className=\"dropdown-item cypress-searching-options ob-autocomplete__drop-down-item-searching\">\n                <i>Searching...</i>\n              </a>\n            ) : options && options.length ? (\n              options.map((option, index) => (\n                <a\n                  key={option.value}\n                  className={clsx(\n                    `dropdown-item cypress-autocomplete-dropdown-item ob-autocomplete__drop-down-item-${index}`,\n                    {\n                      'is-active': currentFocusedOptionIndex === index,\n                    },\n                  )}\n                  onMouseDown={(e) => handleClickOption(e, option)}\n                  // eslint-disable-next-line react/no-danger\n                  dangerouslySetInnerHTML={{\n                    __html: highlightLabel(option.label, label),\n                  }}\n                />\n              ))\n            ) : (\n              <a className=\"dropdown-item cypress-no-matches-found ob-autocomplete__drop-down-item-no-matches\">\n                <i>No matches found</i>\n              </a>\n            )}\n            {branding}\n          </div>\n        </div>\n      </div>\n\n      {(isDirty || displayValidationMessage) &&\n        !!validationMessage &&\n        !isShowingLoading && (\n          <FormElementValidationMessage message={validationMessage} />\n        )}\n    </>\n  )\n}\n\nexport default React.memo(AutocompleteDropdown) as typeof AutocompleteDropdown\n\nfunction highlightLabel(text: string, phrase: string) {\n  if (phrase) {\n    text = text.replace(\n      new RegExp(\n        '(' +\n          phrase.replace(\n            /[`~!@#$%^&*()_|+\\-=?;:'\",.<>{}[\\]\\\\/]/gi,\n            (char: string) => `\\\\${char}`,\n          ) +\n          ')',\n        'gi',\n      ),\n      '<b>$1</b>',\n    )\n  }\n\n  return text\n}\n"]}
+{"version":3,"file":"AutocompleteDropdown.js","sourceRoot":"","sources":["../../../src/components/renderer/AutocompleteDropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\nimport { Sentry } from '../../apps'\n\nimport useBooleanState from '../../hooks/useBooleanState'\nimport { IsDirtyProps } from '../../types/form'\nimport { LookupNotificationContext } from '../../hooks/useLookupNotification'\nimport MaterialIcon from '../MaterialIcon'\nimport FormElementValidationMessage from './FormElementValidationMessage'\n\ntype AutocompleteOption<T> = {\n  label: string\n  value: string\n  data?: T\n}\n\ntype Props<T> = {\n  id: string\n  label: string\n  value: unknown | undefined\n  placeholder: string | undefined\n  required: boolean | undefined\n  disabled: boolean | undefined\n  isLoading?: boolean\n  hasError?: boolean\n  validationMessage: string | undefined\n  displayValidationMessage: boolean\n  searchDebounceMs: number\n  searchMinCharacters: number\n  onChangeValue: (\n    newValue: string | undefined,\n    data?: T,\n  ) => Promise<void> | void\n  onChangeLabel: (newLabel: string) => void\n  onSearch: (\n    label: string,\n    abortSignal: AbortSignal,\n  ) => Promise<AutocompleteOption<T>[]>\n  'aria-describedby'?: string\n  branding?: React.ReactNode\n  autoComplete?: string\n} & IsDirtyProps\n\nfunction AutocompleteDropdown<T>({\n  id,\n  label,\n  value,\n  placeholder,\n  required,\n  disabled,\n  validationMessage,\n  displayValidationMessage,\n  searchDebounceMs,\n  searchMinCharacters,\n  isLoading,\n  hasError,\n  onChangeValue,\n  onChangeLabel,\n  onSearch,\n  isDirty,\n  setIsDirty,\n  branding,\n  autoComplete,\n  ...props\n}: Props<T>) {\n  const optionsContainerElement = React.useRef<HTMLDivElement>(null)\n  const [currentFocusedOptionIndex, setCurrentFocusedOptionIndex] =\n    React.useState(0)\n  const [options, setOptions] = React.useState<AutocompleteOption<T>[]>([])\n  const [error, setError] = React.useState<Error | null>(null)\n  const [isFetchingOptions, setIsFetchingOptions] = React.useState(false)\n  const [isOpen, onOpen, onClose] = useBooleanState(false)\n\n  const onSelectOption = React.useCallback(\n    (option: AutocompleteOption<T>) => {\n      onChangeLabel(option.label)\n      onChangeValue(option.value, option.data)\n      onClose()\n    },\n    [onChangeLabel, onChangeValue, onClose],\n  )\n\n  const handleClickOption = React.useCallback(\n    (\n      event: React.MouseEvent<HTMLAnchorElement, MouseEvent>,\n      option: AutocompleteOption<T>,\n    ) => {\n      console.log('Selected element option in autocomplete', option)\n\n      event.preventDefault()\n      event.stopPropagation()\n\n      onSelectOption(option)\n    },\n    [onSelectOption],\n  )\n\n  const onFocus = React.useCallback(() => {\n    setCurrentFocusedOptionIndex(0)\n    onOpen()\n  }, [onOpen])\n\n  // When moving away from the input, if this is no value remove\n  // the label to show the user they have not selected a value\n  const handleBlur = React.useCallback(\n    (inputOption: { label: string; value: unknown | undefined }) => {\n      setIsDirty()\n      setError(null)\n      onClose()\n\n      if (Array.isArray(options)) {\n        // If there is a label that resembles an option, set that option to be the new value.\n        // UNLESS it was the previously selected label. Else, clear the label and the value.\n        if (inputOption.label) {\n          const lowerCase = inputOption.label.toLowerCase()\n          const option = options.find(\n            (option) => option.label.toLowerCase() === lowerCase,\n          )\n          if (option) {\n            // If the new option is not equal to the option that is currently selected,\n            // we want to update to the new option to ensure that it gets changed.\n            if (inputOption.value !== option.value) {\n              console.log('Setting value after blurring away from autocomplete')\n              onSelectOption(option)\n            }\n            return\n          }\n        }\n\n        console.log('Removing label after blurring away from autocomplete')\n        onChangeValue(undefined)\n        onChangeLabel('')\n      }\n    },\n    [\n      onChangeLabel,\n      onChangeValue,\n      onClose,\n      onSelectOption,\n      options,\n      setIsDirty,\n    ],\n  )\n\n  const onKeyDown = React.useCallback<\n    React.KeyboardEventHandler<HTMLInputElement>\n  >(\n    (event) => {\n      if (!options) {\n        return\n      }\n      const enterPressed = event.keyCode === 13\n      const upArrowPressed = event.keyCode === 38\n      const downArrowPressed = event.keyCode === 40\n      if (!upArrowPressed && !downArrowPressed && !enterPressed) {\n        return\n      }\n\n      event.preventDefault()\n\n      const previousFocusedOptionIndex = currentFocusedOptionIndex\n      let nextFocusedOptionIndex = currentFocusedOptionIndex\n      if (upArrowPressed) {\n        nextFocusedOptionIndex = Math.max(0, currentFocusedOptionIndex - 1)\n      } else if (downArrowPressed) {\n        nextFocusedOptionIndex = Math.min(\n          options.length - 1,\n          currentFocusedOptionIndex + 1,\n        )\n      } else if (enterPressed) {\n        const option = options[nextFocusedOptionIndex]\n        if (option) {\n          onSelectOption(option)\n        }\n      }\n\n      // If the index has changed, need to ensure the active option is visible\n      if (\n        previousFocusedOptionIndex !== nextFocusedOptionIndex &&\n        optionsContainerElement.current\n      ) {\n        const activeStepElement = optionsContainerElement.current.querySelector(\n          `.ob-autocomplete__drop-down-item-${nextFocusedOptionIndex}`,\n        )\n        if (activeStepElement) {\n          activeStepElement.scrollIntoView({\n            behavior: 'smooth',\n            block: 'nearest',\n            inline: 'start',\n          })\n        }\n        setCurrentFocusedOptionIndex(nextFocusedOptionIndex)\n      }\n    },\n    [currentFocusedOptionIndex, options, onSelectOption],\n  )\n\n  const handleChangeLabel = React.useCallback<\n    React.ChangeEventHandler<HTMLInputElement>\n  >(\n    (e) => {\n      const newLabel = e.target.value\n      onOpen()\n      setCurrentFocusedOptionIndex(0)\n\n      onChangeLabel(newLabel)\n    },\n    [onChangeLabel, onOpen],\n  )\n\n  React.useEffect(() => {\n    setError(null)\n\n    if (!isOpen || label.length < searchMinCharacters) {\n      setIsFetchingOptions(false)\n      return\n    }\n\n    setIsFetchingOptions(true)\n\n    let ignore = false\n    const abortController = new AbortController()\n\n    const timeoutId = setTimeout(async () => {\n      let newOptions: AutocompleteOption<T>[] = []\n      let newError = null\n\n      try {\n        newOptions = await onSearch(label, abortController.signal)\n      } catch (error) {\n        // Cancelling will throw an error.\n        if (!abortController.signal.aborted) {\n          console.warn('Error while fetching autocomplete options', error)\n          Sentry.captureException(error)\n          newError = error as Error\n        }\n      }\n      if (!ignore) {\n        setError(newError)\n        setOptions(newOptions)\n        setIsFetchingOptions(false)\n      }\n    }, searchDebounceMs)\n\n    return () => {\n      ignore = true\n      clearTimeout(timeoutId)\n      abortController.abort()\n    }\n  }, [isOpen, label, onSearch, searchDebounceMs, searchMinCharacters])\n\n  React.useEffect(() => {\n    //If there is no value set, we want to clear the label\n    //This is to satisfy lookups that return undefined.\n    if (!value) {\n      onChangeLabel('')\n    }\n  }, [onChangeLabel, value])\n  const { isLookingUp } = React.useContext(LookupNotificationContext)\n\n  const isShowingLoading = isFetchingOptions || !!isLoading\n  const isShowingValid = !isShowingLoading && value !== undefined\n  const isShowingError = !isShowingLoading && !isLookingUp && !!hasError\n\n  return (\n    <>\n      <div\n        className={clsx('dropdown', {\n          'is-active': isOpen && Array.isArray(options),\n        })}\n      >\n        <div className=\"field\">\n          <div\n            className={clsx(\n              'cypress-autocomplete-field-control control is-expanded',\n              {\n                'is-loading': isShowingLoading,\n                'has-icons-right': isShowingValid || isShowingError,\n              },\n            )}\n          >\n            <input\n              type=\"text\"\n              placeholder={placeholder}\n              id={id}\n              autoComplete={autoComplete ?? 'off'}\n              className=\"cypress-autocomplete-control input ob-input\"\n              required={required}\n              value={label}\n              disabled={disabled}\n              onFocus={onFocus}\n              onBlur={() => handleBlur({ label, value })}\n              onKeyDown={onKeyDown}\n              onChange={handleChangeLabel}\n              aria-describedby={props['aria-describedby']}\n              aria-required={required}\n            />\n            {isShowingValid && (\n              <span className=\" ob-input-icon icon is-small is-right\">\n                <MaterialIcon className=\"is-size-5 has-text-success\">\n                  check\n                </MaterialIcon>\n              </span>\n            )}\n            {isShowingError && (\n              <span className=\" ob-input-icon icon is-small is-right\">\n                <MaterialIcon className=\"is-size-5 has-text-danger\">\n                  error\n                </MaterialIcon>\n              </span>\n            )}\n          </div>\n        </div>\n\n        <div className=\"dropdown-menu\">\n          <div\n            ref={optionsContainerElement}\n            className=\"ob-autocomplete__dropdown-content dropdown-content cypress-autocomplete-dropdown-content\"\n          >\n            {error ? (\n              <a className=\"dropdown-item cypress-autocomplete-error ob-autocomplete__drop-down-item-error\">\n                <span className=\"has-text-danger\">{error.message}</span>\n              </a>\n            ) : label.length < searchMinCharacters ? (\n              <a className=\"dropdown-item cypress-max-characters ob-autocomplete__drop-down-item-max-characters\">\n                <i>\n                  Enter at least {searchMinCharacters} character(s) to search\n                </i>\n              </a>\n            ) : isShowingLoading ? (\n              <a className=\"dropdown-item cypress-searching-options ob-autocomplete__drop-down-item-searching\">\n                <i>Searching...</i>\n              </a>\n            ) : options && options.length ? (\n              options.map((option, index) => (\n                <a\n                  key={option.value}\n                  className={clsx(\n                    `dropdown-item cypress-autocomplete-dropdown-item ob-autocomplete__drop-down-item-${index}`,\n                    {\n                      'is-active': currentFocusedOptionIndex === index,\n                    },\n                  )}\n                  onMouseDown={(e) => handleClickOption(e, option)}\n                  // eslint-disable-next-line react/no-danger\n                  dangerouslySetInnerHTML={{\n                    __html: highlightLabel(option.label, label),\n                  }}\n                />\n              ))\n            ) : (\n              <a className=\"dropdown-item cypress-no-matches-found ob-autocomplete__drop-down-item-no-matches\">\n                <i>No matches found</i>\n              </a>\n            )}\n            {branding}\n          </div>\n        </div>\n      </div>\n\n      {(isDirty || displayValidationMessage) &&\n        !!validationMessage &&\n        !isShowingLoading && (\n          <FormElementValidationMessage message={validationMessage} />\n        )}\n    </>\n  )\n}\n\nexport default React.memo(AutocompleteDropdown) as typeof AutocompleteDropdown\n\nfunction highlightLabel(text: string, phrase: string) {\n  if (phrase) {\n    text = text.replace(\n      new RegExp(\n        '(' +\n          phrase.replace(\n            /[`~!@#$%^&*()_|+\\-=?;:'\",.<>{}[\\]\\\\/]/gi,\n            (char: string) => `\\\\${char}`,\n          ) +\n          ')',\n        'gi',\n      ),\n      '<b>$1</b>',\n    )\n  }\n\n  return text\n}\n"]}

package/dist/components/renderer/CopyToClipboardButton.d.ts

@@ -3,6 +3,6 @@ type Props = {
     text: string;
     className?: string;
 };
-declare function CopyToClipboardButton({ className, text }: Props): React.JSX.Element;
+declare function CopyToClipboardButton({ className, text }: Props): import("react/jsx-runtime").JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof CopyToClipboardButton>;
 export default _default;

package/dist/components/renderer/CopyToClipboardButton.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import Tooltip from './Tooltip';
 import * as React from 'react';
 import utilsService from '../../services/utils-service';
@@ -6,10 +7,7 @@ function CopyToClipboardButton({ className, text }) {
     const copy = React.useCallback(() => {
         utilsService.copyToClipboard(text);
     }, [text]);
-    return (React.createElement(Tooltip, { title: "Copy to clipboard" },
-        React.createElement("button", { onClick: copy, className: className, type: "button" },
-            React.createElement("span", { className: "icon" },
-                React.createElement(MaterialIcon, null, "file_copy")))));
+    return (_jsx(Tooltip, { title: "Copy to clipboard", children: _jsx("button", { onClick: copy, className: className, type: "button", children: _jsx("span", { className: "icon", children: _jsx(MaterialIcon, { children: "file_copy" }) }) }) }));
 }
 export default React.memo(CopyToClipboardButton);
 //# sourceMappingURL=CopyToClipboardButton.js.map

package/dist/components/renderer/CopyToClipboardButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"CopyToClipboardButton.js","sourceRoot":"","sources":["../../../src/components/renderer/CopyToClipboardButton.tsx"],"names":[],"mappings":"AAAA,OAAO,OAAO,MAAM,WAAW,CAAA;AAC/B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,YAAY,MAAM,8BAA8B,CAAA;AACvD,OAAO,YAAY,MAAM,iBAAiB,CAAA;AAO1C,SAAS,qBAAqB,CAAC,EAAE,SAAS,EAAE,IAAI,EAAS;IACvD,MAAM,IAAI,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QAClC,YAAY,CAAC,eAAe,CAAC,IAAI,CAAC,CAAA;IACpC,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAA;IACV,OAAO,CACL,oBAAC,OAAO,IAAC,KAAK,EAAC,mBAAmB;QAChC,gCAAQ,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,IAAI,EAAC,QAAQ;YACxD,8BAAM,SAAS,EAAC,MAAM;gBACpB,oBAAC,YAAY,oBAAyB,CACjC,CACA,CACD,CACX,CAAA;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAA","sourcesContent":["import Tooltip from './Tooltip'\nimport * as React from 'react'\n\nimport utilsService from '../../services/utils-service'\nimport MaterialIcon from '../MaterialIcon'\n\ntype Props = {\n  text: string\n  className?: string\n}\n\nfunction CopyToClipboardButton({ className, text }: Props) {\n  const copy = React.useCallback(() => {\n    utilsService.copyToClipboard(text)\n  }, [text])\n  return (\n    <Tooltip title=\"Copy to clipboard\">\n      <button onClick={copy} className={className} type=\"button\">\n        <span className=\"icon\">\n          <MaterialIcon>file_copy</MaterialIcon>\n        </span>\n      </button>\n    </Tooltip>\n  )\n}\n\nexport default React.memo(CopyToClipboardButton)\n"]}
+{"version":3,"file":"CopyToClipboardButton.js","sourceRoot":"","sources":["../../../src/components/renderer/CopyToClipboardButton.tsx"],"names":[],"mappings":";AAAA,OAAO,OAAO,MAAM,WAAW,CAAA;AAC/B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,YAAY,MAAM,8BAA8B,CAAA;AACvD,OAAO,YAAY,MAAM,iBAAiB,CAAA;AAO1C,SAAS,qBAAqB,CAAC,EAAE,SAAS,EAAE,IAAI,EAAS;IACvD,MAAM,IAAI,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QAClC,YAAY,CAAC,eAAe,CAAC,IAAI,CAAC,CAAA;IACpC,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAA;IACV,OAAO,CACL,KAAC,OAAO,IAAC,KAAK,EAAC,mBAAmB,YAChC,iBAAQ,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,IAAI,EAAC,QAAQ,YACxD,eAAM,SAAS,EAAC,MAAM,YACpB,KAAC,YAAY,4BAAyB,GACjC,GACA,GACD,CACX,CAAA;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAA","sourcesContent":["import Tooltip from './Tooltip'\nimport * as React from 'react'\n\nimport utilsService from '../../services/utils-service'\nimport MaterialIcon from '../MaterialIcon'\n\ntype Props = {\n  text: string\n  className?: string\n}\n\nfunction CopyToClipboardButton({ className, text }: Props) {\n  const copy = React.useCallback(() => {\n    utilsService.copyToClipboard(text)\n  }, [text])\n  return (\n    <Tooltip title=\"Copy to clipboard\">\n      <button onClick={copy} className={className} type=\"button\">\n        <span className=\"icon\">\n          <MaterialIcon>file_copy</MaterialIcon>\n        </span>\n      </button>\n    </Tooltip>\n  )\n}\n\nexport default React.memo(CopyToClipboardButton)\n"]}

package/dist/components/renderer/CustomisableButtonInner.js

@@ -1,10 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from 'react';
 import MaterialIcon from '../MaterialIcon';
 const CustomisableButton = ({ label, icon }) => {
-    return (React.createElement(React.Fragment, null,
-        React.createElement("span", { className: "ob-customisable-button-inner" },
-            !!icon && React.createElement(MaterialIcon, null, icon),
-            React.createElement("span", null, label))));
+    return (_jsx(_Fragment, { children: _jsxs("span", { className: "ob-customisable-button-inner", children: [!!icon && _jsx(MaterialIcon, { children: icon }), _jsx("span", { children: label })] }) }));
 };
 export default React.memo(CustomisableButton);
 //# sourceMappingURL=CustomisableButtonInner.js.map

package/dist/components/renderer/CustomisableButtonInner.js.map

@@ -1 +1 @@
-{"version":3,"file":"CustomisableButtonInner.js","sourceRoot":"","sources":["../../../src/components/renderer/CustomisableButtonInner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,YAAY,MAAM,iBAAiB,CAAA;AAO1C,MAAM,kBAAkB,GAAG,CAAC,EAAE,KAAK,EAAE,IAAI,EAAS,EAAE,EAAE;IACpD,OAAO,CACL;QACE,8BAAM,SAAS,EAAC,8BAA8B;YAC3C,CAAC,CAAC,IAAI,IAAI,oBAAC,YAAY,QAAE,IAAI,CAAgB;YAC9C,kCAAO,KAAK,CAAQ,CACf,CACN,CACJ,CAAA;AACH,CAAC,CAAA;AAED,eAAe,KAAK,CAAC,IAAI,CAAQ,kBAAkB,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport MaterialIcon from '../MaterialIcon'\n\ntype Props = {\n  label: string\n  icon?: string\n}\n\nconst CustomisableButton = ({ label, icon }: Props) => {\n  return (\n    <>\n      <span className=\"ob-customisable-button-inner\">\n        {!!icon && <MaterialIcon>{icon}</MaterialIcon>}\n        <span>{label}</span>\n      </span>\n    </>\n  )\n}\n\nexport default React.memo<Props>(CustomisableButton)\n"]}
+{"version":3,"file":"CustomisableButtonInner.js","sourceRoot":"","sources":["../../../src/components/renderer/CustomisableButtonInner.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,YAAY,MAAM,iBAAiB,CAAA;AAO1C,MAAM,kBAAkB,GAAG,CAAC,EAAE,KAAK,EAAE,IAAI,EAAS,EAAE,EAAE;IACpD,OAAO,CACL,4BACE,gBAAM,SAAS,EAAC,8BAA8B,aAC3C,CAAC,CAAC,IAAI,IAAI,KAAC,YAAY,cAAE,IAAI,GAAgB,EAC9C,yBAAO,KAAK,GAAQ,IACf,GACN,CACJ,CAAA;AACH,CAAC,CAAA;AAED,eAAe,KAAK,CAAC,IAAI,CAAQ,kBAAkB,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport MaterialIcon from '../MaterialIcon'\n\ntype Props = {\n  label: string\n  icon?: string\n}\n\nconst CustomisableButton = ({ label, icon }: Props) => {\n  return (\n    <>\n      <span className=\"ob-customisable-button-inner\">\n        {!!icon && <MaterialIcon>{icon}</MaterialIcon>}\n        <span>{label}</span>\n      </span>\n    </>\n  )\n}\n\nexport default React.memo<Props>(CustomisableButton)\n"]}

package/dist/components/renderer/FormElementLabelContainer.d.ts

@@ -7,14 +7,14 @@ declare function FormElementLabelContainer({ className, element, id, required, c
     required: boolean;
     children: React.ReactNode;
     leading?: React.ReactNode;
-}): React.JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;
 export declare function HintTooltip({ hint, inputId, }: {
     hint: string;
     inputId: string;
-}): React.JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;
 export declare function HintBelowLabel({ hint, inputId, }: {
     hint: string;
     inputId: string;
-}): React.JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof FormElementLabelContainer>;
 export default _default;

package/dist/components/renderer/FormElementLabelContainer.js

@@ -1,29 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import Tooltip from './Tooltip';
 import clsx from 'clsx';
 import useReplaceableText from '../../hooks/useReplaceableText';
 import QuillHTML from '../QuillHTML';
 function FormElementLabelContainer({ className, element, id, required, children, leading, }) {
-    return (React.createElement("div", { className: clsx('ob-form__element', className) },
-        React.createElement("div", { className: "label ob-label__container" },
-            leading,
-            React.createElement("label", { className: clsx('ob-label', {
-                    'ob-label__required is-required': required,
-                }), htmlFor: id, id: `${id}-label` }, element.label),
-            element.hint &&
-                (element.hintPosition === 'TOOLTIP' || !element.hintPosition) && (React.createElement(HintTooltip, { hint: element.hint, inputId: id }))),
-        element.hint && element.hintPosition === 'BELOW_LABEL' && (React.createElement("div", { className: "ob-hint-text__container" },
-            React.createElement(HintBelowLabel, { hint: element.hint, inputId: id }))),
-        children));
+    return (_jsxs("div", { className: clsx('ob-form__element', className), children: [_jsxs("div", { className: "label ob-label__container", children: [leading, _jsx("label", { className: clsx('ob-label', {
+                            'ob-label__required is-required': required,
+                        }), htmlFor: id, id: `${id}-label`, children: element.label }), element.hint &&
+                        (element.hintPosition === 'TOOLTIP' || !element.hintPosition) && (_jsx(HintTooltip, { hint: element.hint, inputId: id }))] }), element.hint && element.hintPosition === 'BELOW_LABEL' && (_jsx("div", { className: "ob-hint-text__container", children: _jsx(HintBelowLabel, { hint: element.hint, inputId: id }) })), children] }));
 }
 export function HintTooltip({ hint, inputId, }) {
     const html = useReplaceableText(hint);
-    return (React.createElement(Tooltip, { title: React.createElement(QuillHTML, { html: html, className: "ob-hint-tooltip" }), arrow: true, enterTouchDelay: 0, leaveTouchDelay: 10000, id: `${inputId}-hint` },
-        React.createElement("i", { className: "material-icons has-text-grey ob-label__hint", role: "tooltip", "aria-label": "More information" }, "info")));
+    return (_jsx(Tooltip, { title: _jsx(QuillHTML, { html: html, className: "ob-hint-tooltip" }), arrow: true, enterTouchDelay: 0, leaveTouchDelay: 10000, id: `${inputId}-hint`, children: _jsx("i", { className: "material-icons has-text-grey ob-label__hint", role: "tooltip", "aria-label": "More information", children: "info" }) }));
 }
 export function HintBelowLabel({ hint, inputId, }) {
     const html = useReplaceableText(hint);
-    return (React.createElement(QuillHTML, { html: html, className: "ob-hint-text", id: `${inputId}-hint` }));
+    return (_jsx(QuillHTML, { html: html, className: "ob-hint-text", id: `${inputId}-hint` }));
 }
 export default React.memo(FormElementLabelContainer);
 //# sourceMappingURL=FormElementLabelContainer.js.map

package/dist/components/renderer/FormElementLabelContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormElementLabelContainer.js","sourceRoot":"","sources":["../../../src/components/renderer/FormElementLabelContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,OAAO,MAAM,WAAW,CAAA;AAC/B,OAAO,IAAI,MAAM,MAAM,CAAA;AAEvB,OAAO,kBAAkB,MAAM,gCAAgC,CAAA;AAC/D,OAAO,SAAS,MAAM,cAAc,CAAA;AAEpC,SAAS,yBAAyB,CAAC,EACjC,SAAS,EACT,OAAO,EACP,EAAE,EACF,QAAQ,EACR,QAAQ,EACR,OAAO,GAQR;IACC,OAAO,CACL,6BAAK,SAAS,EAAE,IAAI,CAAC,kBAAkB,EAAE,SAAS,CAAC;QACjD,6BAAK,SAAS,EAAC,2BAA2B;YACvC,OAAO;YACR,+BACE,SAAS,EAAE,IAAI,CAAC,UAAU,EAAE;oBAC1B,gCAAgC,EAAE,QAAQ;iBAC3C,CAAC,EACF,OAAO,EAAE,EAAE,EACX,EAAE,EAAE,GAAG,EAAE,QAAQ,IAEhB,OAAO,CAAC,KAAK,CACR;YACP,OAAO,CAAC,IAAI;gBACX,CAAC,OAAO,CAAC,YAAY,KAAK,SAAS,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,IAAI,CAC/D,oBAAC,WAAW,IAAC,IAAI,EAAE,OAAO,CAAC,IAAI,EAAE,OAAO,EAAE,EAAE,GAAI,CACjD,CACC;QACL,OAAO,CAAC,IAAI,IAAI,OAAO,CAAC,YAAY,KAAK,aAAa,IAAI,CACzD,6BAAK,SAAS,EAAC,yBAAyB;YACtC,oBAAC,cAAc,IAAC,IAAI,EAAE,OAAO,CAAC,IAAI,EAAE,OAAO,EAAE,EAAE,GAAI,CAC/C,CACP;QACA,QAAQ,CACL,CACP,CAAA;AACH,CAAC;AAED,MAAM,UAAU,WAAW,CAAC,EAC1B,IAAI,EACJ,OAAO,GAIR;IACC,MAAM,IAAI,GAAG,kBAAkB,CAAC,IAAI,CAAC,CAAA;IAErC,OAAO,CACL,oBAAC,OAAO,IACN,KAAK,EAAE,oBAAC,SAAS,IAAC,IAAI,EAAE,IAAI,EAAE,SAAS,EAAC,iBAAiB,GAAG,EAC5D,KAAK,QACL,eAAe,EAAE,CAAC,EAClB,eAAe,EAAE,KAAK,EACtB,EAAE,EAAE,GAAG,OAAO,OAAO;QAGrB,2BACE,SAAS,EAAC,6CAA6C,EACvD,IAAI,EAAC,SAAS,gBACH,kBAAkB,WAG3B,CACI,CACX,CAAA;AACH,CAAC;AAED,MAAM,UAAU,cAAc,CAAC,EAC7B,IAAI,EACJ,OAAO,GAIR;IACC,MAAM,IAAI,GAAG,kBAAkB,CAAC,IAAI,CAAC,CAAA;IAErC,OAAO,CACL,oBAAC,SAAS,IAAC,IAAI,EAAE,IAAI,EAAE,SAAS,EAAC,cAAc,EAAC,EAAE,EAAE,GAAG,OAAO,OAAO,GAAI,CAC1E,CAAA;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,yBAAyB,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport Tooltip from './Tooltip'\nimport clsx from 'clsx'\nimport { FormTypes } from '@oneblink/types'\nimport useReplaceableText from '../../hooks/useReplaceableText'\nimport QuillHTML from '../QuillHTML'\n\nfunction FormElementLabelContainer({\n  className,\n  element,\n  id,\n  required,\n  children,\n  leading,\n}: {\n  className: string\n  element: FormTypes.FormElementBase\n  id: string\n  required: boolean\n  children: React.ReactNode\n  leading?: React.ReactNode\n}) {\n  return (\n    <div className={clsx('ob-form__element', className)}>\n      <div className=\"label ob-label__container\">\n        {leading}\n        <label\n          className={clsx('ob-label', {\n            'ob-label__required is-required': required,\n          })}\n          htmlFor={id}\n          id={`${id}-label`}\n        >\n          {element.label}\n        </label>\n        {element.hint &&\n          (element.hintPosition === 'TOOLTIP' || !element.hintPosition) && (\n            <HintTooltip hint={element.hint} inputId={id} />\n          )}\n      </div>\n      {element.hint && element.hintPosition === 'BELOW_LABEL' && (\n        <div className=\"ob-hint-text__container\">\n          <HintBelowLabel hint={element.hint} inputId={id} />\n        </div>\n      )}\n      {children}\n    </div>\n  )\n}\n\nexport function HintTooltip({\n  hint,\n  inputId,\n}: {\n  hint: string\n  inputId: string\n}) {\n  const html = useReplaceableText(hint)\n\n  return (\n    <Tooltip\n      title={<QuillHTML html={html} className=\"ob-hint-tooltip\" />}\n      arrow\n      enterTouchDelay={0}\n      leaveTouchDelay={10000}\n      id={`${inputId}-hint`}\n    >\n      {/* Tooltip does not work with the MaterialIcon component - it must remain an i tag*/}\n      <i\n        className=\"material-icons has-text-grey ob-label__hint\"\n        role=\"tooltip\"\n        aria-label=\"More information\"\n      >\n        info\n      </i>\n    </Tooltip>\n  )\n}\n\nexport function HintBelowLabel({\n  hint,\n  inputId,\n}: {\n  hint: string\n  inputId: string\n}) {\n  const html = useReplaceableText(hint)\n\n  return (\n    <QuillHTML html={html} className=\"ob-hint-text\" id={`${inputId}-hint`} />\n  )\n}\n\nexport default React.memo(FormElementLabelContainer)\n"]}
+{"version":3,"file":"FormElementLabelContainer.js","sourceRoot":"","sources":["../../../src/components/renderer/FormElementLabelContainer.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,OAAO,MAAM,WAAW,CAAA;AAC/B,OAAO,IAAI,MAAM,MAAM,CAAA;AAEvB,OAAO,kBAAkB,MAAM,gCAAgC,CAAA;AAC/D,OAAO,SAAS,MAAM,cAAc,CAAA;AAEpC,SAAS,yBAAyB,CAAC,EACjC,SAAS,EACT,OAAO,EACP,EAAE,EACF,QAAQ,EACR,QAAQ,EACR,OAAO,GAQR;IACC,OAAO,CACL,eAAK,SAAS,EAAE,IAAI,CAAC,kBAAkB,EAAE,SAAS,CAAC,aACjD,eAAK,SAAS,EAAC,2BAA2B,aACvC,OAAO,EACR,gBACE,SAAS,EAAE,IAAI,CAAC,UAAU,EAAE;4BAC1B,gCAAgC,EAAE,QAAQ;yBAC3C,CAAC,EACF,OAAO,EAAE,EAAE,EACX,EAAE,EAAE,GAAG,EAAE,QAAQ,YAEhB,OAAO,CAAC,KAAK,GACR,EACP,OAAO,CAAC,IAAI;wBACX,CAAC,OAAO,CAAC,YAAY,KAAK,SAAS,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,IAAI,CAC/D,KAAC,WAAW,IAAC,IAAI,EAAE,OAAO,CAAC,IAAI,EAAE,OAAO,EAAE,EAAE,GAAI,CACjD,IACC,EACL,OAAO,CAAC,IAAI,IAAI,OAAO,CAAC,YAAY,KAAK,aAAa,IAAI,CACzD,cAAK,SAAS,EAAC,yBAAyB,YACtC,KAAC,cAAc,IAAC,IAAI,EAAE,OAAO,CAAC,IAAI,EAAE,OAAO,EAAE,EAAE,GAAI,GAC/C,CACP,EACA,QAAQ,IACL,CACP,CAAA;AACH,CAAC;AAED,MAAM,UAAU,WAAW,CAAC,EAC1B,IAAI,EACJ,OAAO,GAIR;IACC,MAAM,IAAI,GAAG,kBAAkB,CAAC,IAAI,CAAC,CAAA;IAErC,OAAO,CACL,KAAC,OAAO,IACN,KAAK,EAAE,KAAC,SAAS,IAAC,IAAI,EAAE,IAAI,EAAE,SAAS,EAAC,iBAAiB,GAAG,EAC5D,KAAK,QACL,eAAe,EAAE,CAAC,EAClB,eAAe,EAAE,KAAK,EACtB,EAAE,EAAE,GAAG,OAAO,OAAO,YAGrB,YACE,SAAS,EAAC,6CAA6C,EACvD,IAAI,EAAC,SAAS,gBACH,kBAAkB,qBAG3B,GACI,CACX,CAAA;AACH,CAAC;AAED,MAAM,UAAU,cAAc,CAAC,EAC7B,IAAI,EACJ,OAAO,GAIR;IACC,MAAM,IAAI,GAAG,kBAAkB,CAAC,IAAI,CAAC,CAAA;IAErC,OAAO,CACL,KAAC,SAAS,IAAC,IAAI,EAAE,IAAI,EAAE,SAAS,EAAC,cAAc,EAAC,EAAE,EAAE,GAAG,OAAO,OAAO,GAAI,CAC1E,CAAA;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,yBAAyB,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport Tooltip from './Tooltip'\nimport clsx from 'clsx'\nimport { FormTypes } from '@oneblink/types'\nimport useReplaceableText from '../../hooks/useReplaceableText'\nimport QuillHTML from '../QuillHTML'\n\nfunction FormElementLabelContainer({\n  className,\n  element,\n  id,\n  required,\n  children,\n  leading,\n}: {\n  className: string\n  element: FormTypes.FormElementBase\n  id: string\n  required: boolean\n  children: React.ReactNode\n  leading?: React.ReactNode\n}) {\n  return (\n    <div className={clsx('ob-form__element', className)}>\n      <div className=\"label ob-label__container\">\n        {leading}\n        <label\n          className={clsx('ob-label', {\n            'ob-label__required is-required': required,\n          })}\n          htmlFor={id}\n          id={`${id}-label`}\n        >\n          {element.label}\n        </label>\n        {element.hint &&\n          (element.hintPosition === 'TOOLTIP' || !element.hintPosition) && (\n            <HintTooltip hint={element.hint} inputId={id} />\n          )}\n      </div>\n      {element.hint && element.hintPosition === 'BELOW_LABEL' && (\n        <div className=\"ob-hint-text__container\">\n          <HintBelowLabel hint={element.hint} inputId={id} />\n        </div>\n      )}\n      {children}\n    </div>\n  )\n}\n\nexport function HintTooltip({\n  hint,\n  inputId,\n}: {\n  hint: string\n  inputId: string\n}) {\n  const html = useReplaceableText(hint)\n\n  return (\n    <Tooltip\n      title={<QuillHTML html={html} className=\"ob-hint-tooltip\" />}\n      arrow\n      enterTouchDelay={0}\n      leaveTouchDelay={10000}\n      id={`${inputId}-hint`}\n    >\n      {/* Tooltip does not work with the MaterialIcon component - it must remain an i tag*/}\n      <i\n        className=\"material-icons has-text-grey ob-label__hint\"\n        role=\"tooltip\"\n        aria-label=\"More information\"\n      >\n        info\n      </i>\n    </Tooltip>\n  )\n}\n\nexport function HintBelowLabel({\n  hint,\n  inputId,\n}: {\n  hint: string\n  inputId: string\n}) {\n  const html = useReplaceableText(hint)\n\n  return (\n    <QuillHTML html={html} className=\"ob-hint-text\" id={`${inputId}-hint`} />\n  )\n}\n\nexport default React.memo(FormElementLabelContainer)\n"]}

package/dist/components/renderer/FormElementOptions.d.ts

@@ -6,6 +6,6 @@ type Props = {
     conditionallyShownOptionsElement: FormElementConditionallyShownElement | undefined;
     children: React.ReactNode;
 };
-declare function FormElementOptions({ options, children, conditionallyShownOptionsElement, }: Props): React.JSX.Element;
+declare function FormElementOptions({ options, children, conditionallyShownOptionsElement, }: Props): import("react/jsx-runtime").JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof FormElementOptions>;
 export default _default;