@laerdal/life-react-components 3.2.1-dev.5 → 3.2.1-dev.6.full
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
|
|
|
4
4
|
Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
|
-
exports.RichTextFieldFormats = exports.RichTextField = void 0;
|
|
7
|
+
exports.RichTextFieldFormats = exports.RichTextFieldContainer = exports.RichTextField = void 0;
|
|
8
8
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
9
9
|
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
10
10
|
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
|
|
@@ -22,7 +22,8 @@ var _excluded = ["readOnly", "disabled", "validationMessage", "note", "size", "s
|
|
|
22
22
|
var _templateObject;
|
|
23
23
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
24
24
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
25
|
-
var
|
|
25
|
+
var RichTextFieldContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n .quill {\n width: 100%;\n margin-bottom: 4px;\n overflow: hidden;\n\n box-shadow: inset 0 0 0 1px ", ";\n border-radius: 4px;\n }\n\n .quill.valid {\n box-shadow: inset 0 0 0 2px ", ";\n }\n\n .quill.invalid {\n box-shadow: inset 0 0 0 2px ", ";\n }\n\n .quill:hover {\n box-shadow: inset 0 0 0 2px ", ";\n }\n\n .quill:focus-within {\n box-shadow: inset 0 0 0 2px ", ";\n }\n\n .ql-editor.ql-blank::before {\n ", "\n }\n\n .ql-toolbar.ql-snow {\n border: none;\n padding: 8px 7px;\n margin: 0 1px;\n border-bottom: 1px solid ", ";\n }\n\n .quill.valid .ql-toolbar,\n .quill.invalid .ql-toolbar,\n .quill:hover .ql-toolbar,\n .quill:focus-within .ql-toolbar {\n padding: 8px 6px;\n margin: 0 2px;\n }\n\n\n .ql-container.ql-snow {\n border: none;\n overflow-y: hidden;\n padding: 8px;\n }\n\n .ql-editor {\n padding: 8px;\n overflow-y: auto;\n\n ", "\n }\n\n &.resizable {\n height: initial;\n\n .quill {\n flex: none;\n overflow: initial;\n }\n\n .ql-container {\n flex: none;\n }\n\n .ql-editor {\n resize: vertical;\n }\n }\n\n &.readonly {\n .quill {\n ", "\n }\n }\n\n &.disabled {\n cursor: not-allowed;\n\n .quill {\n pointer-events: none;\n box-shadow: inset 0 0 0 1px ", ";\n color: ", ";\n\n .ql-editor.ql-blank::before {\n color: ", ";\n }\n }\n }\n\n\n\n"])), _styles.COLORS.neutral_400, _styles.COLORS.correct_500, _styles.COLORS.critical_500, _styles.COLORS.primary_700, _styles.COLORS.primary_800, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.neutral_500), _styles.COLORS.neutral_200, (0, _styles.scrollBarStyling)(_types.Size.Small), _styling.readOnlyState, _styles.COLORS.neutral_100, _styles.COLORS.neutral_300, _styles.COLORS.neutral_300);
|
|
26
|
+
exports.RichTextFieldContainer = RichTextFieldContainer;
|
|
26
27
|
var RichTextFieldFormats;
|
|
27
28
|
exports.RichTextFieldFormats = RichTextFieldFormats;
|
|
28
29
|
(function (RichTextFieldFormats) {
|
|
@@ -67,10 +68,10 @@ var RichTextField = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
|
|
|
67
68
|
resizable = _ref.resizable,
|
|
68
69
|
modules = _ref.modules,
|
|
69
70
|
rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
|
|
70
|
-
var m = _objectSpread(_objectSpread({}, modules), {}, {
|
|
71
|
+
var m = _objectSpread(_objectSpread({}, modules !== null && modules !== void 0 ? modules : {}), {}, {
|
|
71
72
|
toolbar: (_modules$toolbar = modules === null || modules === void 0 ? void 0 : modules.toolbar) !== null && _modules$toolbar !== void 0 ? _modules$toolbar : defaultToolBarOptions
|
|
72
73
|
});
|
|
73
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(
|
|
74
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(RichTextFieldContainer, {
|
|
74
75
|
className: "".concat(resizable ? 'resizable' : '', " ").concat(state || '', " ").concat(readOnly ? 'readonly' : '', " ").concat(disabled ? 'disabled' : ''),
|
|
75
76
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactQuill.default, _objectSpread({
|
|
76
77
|
ref: ref,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RichTextField.cjs","names":["
|
|
1
|
+
{"version":3,"file":"RichTextField.cjs","names":["RichTextFieldContainer","styled","div","COLORS","neutral_400","correct_500","critical_500","primary_700","primary_800","ComponentSStyling","ComponentTextStyle","Italic","neutral_500","neutral_200","scrollBarStyling","Size","Small","readOnlyState","neutral_100","neutral_300","RichTextFieldFormats","defaultToolBarOptions","header","RichTextField","React","forwardRef","ref","readOnly","disabled","validationMessage","note","size","Medium","state","resizable","modules","rest","m","toolbar","States","Invalid","Valid","correct_400","critical_400","icon","message","id","className","placeholder","formats","onKeyDown","onKeyPress","onKeyUp","value","onChange"],"sources":["../../src/InputFields/RichTextField.tsx"],"sourcesContent":["import React from 'react';\nimport ReactQuill, {Range, UnprivilegedEditor} from \"react-quill\";\nimport {TextFieldNote} from \"./types\";\nimport styled from \"styled-components\";\nimport {NoteMessage, readOnlyState, ValidationMessage} from \"./styling\";\nimport {Size, States} from \"../types\";\nimport {COLORS, ComponentSStyling, ComponentTextStyle, scrollBarStyling} from \"../styles\";\nimport {CheckMark, TechnicalWarning} from \"../icons/systemicons\";\nimport {Sources, StringMap} from \"quill\";\nimport 'react-quill/dist/quill.snow.css';\n\nexport const RichTextFieldContainer = styled.div`\n .quill {\n width: 100%;\n margin-bottom: 4px;\n overflow: hidden;\n\n box-shadow: inset 0 0 0 1px ${COLORS.neutral_400};\n border-radius: 4px;\n }\n\n .quill.valid {\n box-shadow: inset 0 0 0 2px ${COLORS.correct_500};\n }\n\n .quill.invalid {\n box-shadow: inset 0 0 0 2px ${COLORS.critical_500};\n }\n\n .quill:hover {\n box-shadow: inset 0 0 0 2px ${COLORS.primary_700};\n }\n\n .quill:focus-within {\n box-shadow: inset 0 0 0 2px ${COLORS.primary_800};\n }\n\n .ql-editor.ql-blank::before {\n ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n }\n\n .ql-toolbar.ql-snow {\n border: none;\n padding: 8px 7px;\n margin: 0 1px;\n border-bottom: 1px solid ${COLORS.neutral_200};\n }\n\n .quill.valid .ql-toolbar,\n .quill.invalid .ql-toolbar,\n .quill:hover .ql-toolbar,\n .quill:focus-within .ql-toolbar {\n padding: 8px 6px;\n margin: 0 2px;\n }\n\n\n .ql-container.ql-snow {\n border: none;\n overflow-y: hidden;\n padding: 8px;\n }\n\n .ql-editor {\n padding: 8px;\n overflow-y: auto;\n\n ${scrollBarStyling(Size.Small)}\n }\n\n &.resizable {\n height: initial;\n\n .quill {\n flex: none;\n overflow: initial;\n }\n\n .ql-container {\n flex: none;\n }\n\n .ql-editor {\n resize: vertical;\n }\n }\n\n &.readonly {\n .quill {\n ${readOnlyState}\n }\n }\n\n &.disabled {\n cursor: not-allowed;\n\n .quill {\n pointer-events: none;\n box-shadow: inset 0 0 0 1px ${COLORS.neutral_100};\n color: ${COLORS.neutral_300};\n\n .ql-editor.ql-blank::before {\n color: ${COLORS.neutral_300};\n }\n }\n }\n\n\n\n`;\n\nexport enum RichTextFieldFormats {\n Background = 'background',\n Bold = 'bold',\n Color = 'color',\n Font = 'font',\n Code = 'code',\n Italic = 'italic',\n Link = 'link',\n Size = 'size',\n Strike = 'strike',\n Script = 'script',\n Underline = 'underline',\n Blockquote = 'blockquote',\n Header = 'header',\n Indent = 'indent',\n List = 'list',\n Align = 'align',\n Direction = 'direction',\n CodeBlock = 'code-block',\n Formula = 'formula',\n Image = 'image',\n Video = 'video'\n}\n\nconst defaultToolBarOptions = [\n [{header: [1, 2, 3, false]}],\n ['bold', 'italic', 'underline', 'strike'],\n [{'list': 'ordered'}, {'list': 'bullet'}],\n ['link'],\n ['clean']\n];\n\nexport interface RichTextFieldProps {\n id?: string;\n className?: string;\n placeholder?: string;\n readOnly?: boolean;\n disabled?: boolean;\n resizable?: boolean;\n\n modules?: StringMap;\n formats?: RichTextFieldFormats[];\n\n onFocus?(selection: Range, source: Sources, editor: UnprivilegedEditor): void;\n\n onBlur?(previousSelection: Range, source: Sources, editor: UnprivilegedEditor): void;\n\n onKeyDown?: React.EventHandler<any>;\n onKeyPress?: React.EventHandler<any>;\n onKeyUp?: React.EventHandler<any>;\n\n value: any;\n onChange: (value: any) => void;\n\n validationMessage?: string;\n note?: TextFieldNote;\n size?: Size.Small | Size.Medium;\n state?: States.Invalid | States.Valid;\n}\n\nexport const RichTextField = React.forwardRef<any, RichTextFieldProps>(({\n readOnly,\n disabled,\n validationMessage,\n note,\n size = Size.Medium,\n state,\n resizable,\n modules,\n ...rest\n }: RichTextFieldProps, ref) => {\n\n let m = {...(modules ?? {}), toolbar: modules?.toolbar ?? defaultToolBarOptions};\n\n return (\n <RichTextFieldContainer\n className={`${resizable ? 'resizable' : ''} ${state || ''} ${readOnly ? 'readonly' : ''} ${disabled ? 'disabled' : ''}`}>\n <ReactQuill ref={ref}\n readOnly={readOnly || disabled}\n modules={m}\n theme={'snow'}\n {...rest}\n />\n {validationMessage && (\n <ValidationMessage className={size || ''} type={state ?? States.Invalid}>\n {\n state === States.Valid\n ? <CheckMark color={COLORS.correct_400}/>\n : <TechnicalWarning color={COLORS.critical_400}/>\n }\n <span>{validationMessage}</span>\n </ValidationMessage>\n )}\n {note && !disabled && (\n <NoteMessage className={size}>\n {note.icon}\n <span>{note.message}</span>\n </NoteMessage>\n )}\n </RichTextFieldContainer>\n )\n});"],"mappings":"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"}
|
|
@@ -4,6 +4,7 @@ import { TextFieldNote } from "./types";
|
|
|
4
4
|
import { Size, States } from "../types";
|
|
5
5
|
import { Sources, StringMap } from "quill";
|
|
6
6
|
import 'react-quill/dist/quill.snow.css';
|
|
7
|
+
export declare const RichTextFieldContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
7
8
|
export declare enum RichTextFieldFormats {
|
|
8
9
|
Background = "background",
|
|
9
10
|
Bold = "bold",
|
|
@@ -16,7 +16,7 @@ import { CheckMark, TechnicalWarning } from "../icons/systemicons";
|
|
|
16
16
|
import 'react-quill/dist/quill.snow.css';
|
|
17
17
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
18
18
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
19
|
-
var
|
|
19
|
+
export var RichTextFieldContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n .quill {\n width: 100%;\n margin-bottom: 4px;\n overflow: hidden;\n\n box-shadow: inset 0 0 0 1px ", ";\n border-radius: 4px;\n }\n\n .quill.valid {\n box-shadow: inset 0 0 0 2px ", ";\n }\n\n .quill.invalid {\n box-shadow: inset 0 0 0 2px ", ";\n }\n\n .quill:hover {\n box-shadow: inset 0 0 0 2px ", ";\n }\n\n .quill:focus-within {\n box-shadow: inset 0 0 0 2px ", ";\n }\n\n .ql-editor.ql-blank::before {\n ", "\n }\n\n .ql-toolbar.ql-snow {\n border: none;\n padding: 8px 7px;\n margin: 0 1px;\n border-bottom: 1px solid ", ";\n }\n\n .quill.valid .ql-toolbar,\n .quill.invalid .ql-toolbar,\n .quill:hover .ql-toolbar,\n .quill:focus-within .ql-toolbar {\n padding: 8px 6px;\n margin: 0 2px;\n }\n\n\n .ql-container.ql-snow {\n border: none;\n overflow-y: hidden;\n padding: 8px;\n }\n\n .ql-editor {\n padding: 8px;\n overflow-y: auto;\n\n ", "\n }\n\n &.resizable {\n height: initial;\n\n .quill {\n flex: none;\n overflow: initial;\n }\n\n .ql-container {\n flex: none;\n }\n\n .ql-editor {\n resize: vertical;\n }\n }\n\n &.readonly {\n .quill {\n ", "\n }\n }\n\n &.disabled {\n cursor: not-allowed;\n\n .quill {\n pointer-events: none;\n box-shadow: inset 0 0 0 1px ", ";\n color: ", ";\n\n .ql-editor.ql-blank::before {\n color: ", ";\n }\n }\n }\n\n\n\n"])), COLORS.neutral_400, COLORS.correct_500, COLORS.critical_500, COLORS.primary_700, COLORS.primary_800, ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500), COLORS.neutral_200, scrollBarStyling(Size.Small), readOnlyState, COLORS.neutral_100, COLORS.neutral_300, COLORS.neutral_300);
|
|
20
20
|
export var RichTextFieldFormats;
|
|
21
21
|
(function (RichTextFieldFormats) {
|
|
22
22
|
RichTextFieldFormats["Background"] = "background";
|
|
@@ -60,10 +60,10 @@ export var RichTextField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
60
60
|
resizable = _ref.resizable,
|
|
61
61
|
modules = _ref.modules,
|
|
62
62
|
rest = _objectWithoutProperties(_ref, _excluded);
|
|
63
|
-
var m = _objectSpread(_objectSpread({}, modules), {}, {
|
|
63
|
+
var m = _objectSpread(_objectSpread({}, modules !== null && modules !== void 0 ? modules : {}), {}, {
|
|
64
64
|
toolbar: (_modules$toolbar = modules === null || modules === void 0 ? void 0 : modules.toolbar) !== null && _modules$toolbar !== void 0 ? _modules$toolbar : defaultToolBarOptions
|
|
65
65
|
});
|
|
66
|
-
return /*#__PURE__*/_jsxs(
|
|
66
|
+
return /*#__PURE__*/_jsxs(RichTextFieldContainer, {
|
|
67
67
|
className: "".concat(resizable ? 'resizable' : '', " ").concat(state || '', " ").concat(readOnly ? 'readonly' : '', " ").concat(disabled ? 'disabled' : ''),
|
|
68
68
|
children: [/*#__PURE__*/_jsx(ReactQuill, _objectSpread({
|
|
69
69
|
ref: ref,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RichTextField.js","names":["React","ReactQuill","styled","NoteMessage","readOnlyState","ValidationMessage","Size","States","COLORS","ComponentSStyling","ComponentTextStyle","scrollBarStyling","CheckMark","TechnicalWarning","
|
|
1
|
+
{"version":3,"file":"RichTextField.js","names":["React","ReactQuill","styled","NoteMessage","readOnlyState","ValidationMessage","Size","States","COLORS","ComponentSStyling","ComponentTextStyle","scrollBarStyling","CheckMark","TechnicalWarning","RichTextFieldContainer","div","neutral_400","correct_500","critical_500","primary_700","primary_800","Italic","neutral_500","neutral_200","Small","neutral_100","neutral_300","RichTextFieldFormats","defaultToolBarOptions","header","RichTextField","forwardRef","ref","readOnly","disabled","validationMessage","note","size","Medium","state","resizable","modules","rest","m","toolbar","Invalid","Valid","correct_400","critical_400","icon","message","id","className","placeholder","formats","onKeyDown","onKeyPress","onKeyUp","value","onChange"],"sources":["../../src/InputFields/RichTextField.tsx"],"sourcesContent":["import React from 'react';\nimport ReactQuill, {Range, UnprivilegedEditor} from \"react-quill\";\nimport {TextFieldNote} from \"./types\";\nimport styled from \"styled-components\";\nimport {NoteMessage, readOnlyState, ValidationMessage} from \"./styling\";\nimport {Size, States} from \"../types\";\nimport {COLORS, ComponentSStyling, ComponentTextStyle, scrollBarStyling} from \"../styles\";\nimport {CheckMark, TechnicalWarning} from \"../icons/systemicons\";\nimport {Sources, StringMap} from \"quill\";\nimport 'react-quill/dist/quill.snow.css';\n\nexport const RichTextFieldContainer = styled.div`\n .quill {\n width: 100%;\n margin-bottom: 4px;\n overflow: hidden;\n\n box-shadow: inset 0 0 0 1px ${COLORS.neutral_400};\n border-radius: 4px;\n }\n\n .quill.valid {\n box-shadow: inset 0 0 0 2px ${COLORS.correct_500};\n }\n\n .quill.invalid {\n box-shadow: inset 0 0 0 2px ${COLORS.critical_500};\n }\n\n .quill:hover {\n box-shadow: inset 0 0 0 2px ${COLORS.primary_700};\n }\n\n .quill:focus-within {\n box-shadow: inset 0 0 0 2px ${COLORS.primary_800};\n }\n\n .ql-editor.ql-blank::before {\n ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n }\n\n .ql-toolbar.ql-snow {\n border: none;\n padding: 8px 7px;\n margin: 0 1px;\n border-bottom: 1px solid ${COLORS.neutral_200};\n }\n\n .quill.valid .ql-toolbar,\n .quill.invalid .ql-toolbar,\n .quill:hover .ql-toolbar,\n .quill:focus-within .ql-toolbar {\n padding: 8px 6px;\n margin: 0 2px;\n }\n\n\n .ql-container.ql-snow {\n border: none;\n overflow-y: hidden;\n padding: 8px;\n }\n\n .ql-editor {\n padding: 8px;\n overflow-y: auto;\n\n ${scrollBarStyling(Size.Small)}\n }\n\n &.resizable {\n height: initial;\n\n .quill {\n flex: none;\n overflow: initial;\n }\n\n .ql-container {\n flex: none;\n }\n\n .ql-editor {\n resize: vertical;\n }\n }\n\n &.readonly {\n .quill {\n ${readOnlyState}\n }\n }\n\n &.disabled {\n cursor: not-allowed;\n\n .quill {\n pointer-events: none;\n box-shadow: inset 0 0 0 1px ${COLORS.neutral_100};\n color: ${COLORS.neutral_300};\n\n .ql-editor.ql-blank::before {\n color: ${COLORS.neutral_300};\n }\n }\n }\n\n\n\n`;\n\nexport enum RichTextFieldFormats {\n Background = 'background',\n Bold = 'bold',\n Color = 'color',\n Font = 'font',\n Code = 'code',\n Italic = 'italic',\n Link = 'link',\n Size = 'size',\n Strike = 'strike',\n Script = 'script',\n Underline = 'underline',\n Blockquote = 'blockquote',\n Header = 'header',\n Indent = 'indent',\n List = 'list',\n Align = 'align',\n Direction = 'direction',\n CodeBlock = 'code-block',\n Formula = 'formula',\n Image = 'image',\n Video = 'video'\n}\n\nconst defaultToolBarOptions = [\n [{header: [1, 2, 3, false]}],\n ['bold', 'italic', 'underline', 'strike'],\n [{'list': 'ordered'}, {'list': 'bullet'}],\n ['link'],\n ['clean']\n];\n\nexport interface RichTextFieldProps {\n id?: string;\n className?: string;\n placeholder?: string;\n readOnly?: boolean;\n disabled?: boolean;\n resizable?: boolean;\n\n modules?: StringMap;\n formats?: RichTextFieldFormats[];\n\n onFocus?(selection: Range, source: Sources, editor: UnprivilegedEditor): void;\n\n onBlur?(previousSelection: Range, source: Sources, editor: UnprivilegedEditor): void;\n\n onKeyDown?: React.EventHandler<any>;\n onKeyPress?: React.EventHandler<any>;\n onKeyUp?: React.EventHandler<any>;\n\n value: any;\n onChange: (value: any) => void;\n\n validationMessage?: string;\n note?: TextFieldNote;\n size?: Size.Small | Size.Medium;\n state?: States.Invalid | States.Valid;\n}\n\nexport const RichTextField = React.forwardRef<any, RichTextFieldProps>(({\n readOnly,\n disabled,\n validationMessage,\n note,\n size = Size.Medium,\n state,\n resizable,\n modules,\n ...rest\n }: RichTextFieldProps, ref) => {\n\n let m = {...(modules ?? {}), toolbar: modules?.toolbar ?? defaultToolBarOptions};\n\n return (\n <RichTextFieldContainer\n className={`${resizable ? 'resizable' : ''} ${state || ''} ${readOnly ? 'readonly' : ''} ${disabled ? 'disabled' : ''}`}>\n <ReactQuill ref={ref}\n readOnly={readOnly || disabled}\n modules={m}\n theme={'snow'}\n {...rest}\n />\n {validationMessage && (\n <ValidationMessage className={size || ''} type={state ?? States.Invalid}>\n {\n state === States.Valid\n ? <CheckMark color={COLORS.correct_400}/>\n : <TechnicalWarning color={COLORS.critical_400}/>\n }\n <span>{validationMessage}</span>\n </ValidationMessage>\n )}\n {note && !disabled && (\n <NoteMessage className={size}>\n {note.icon}\n <span>{note.message}</span>\n </NoteMessage>\n )}\n </RichTextFieldContainer>\n )\n});"],"mappings":"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"}
|