@solidstarters/solid-core-ui 1.1.69 → 1.1.71

package/dist/components/core/chatter/SolidMessageComposer.js

@@ -0,0 +1,119 @@
+"use client";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { InputText } from 'primereact/inputtext';
+import styles from './chatter.module.css';
+import { Button } from 'primereact/button';
+import { useCreateChatterMessageMutation } from '../../../redux/api/solidChatterMessageApi';
+import { useEffect, useState, useRef } from 'react';
+import { useSelector } from 'react-redux';
+export var SolidMessageComposer = function (_a) {
+    var type = _a.type, solidFormViewMetaData = _a.solidFormViewMetaData, refetch = _a.refetch, id = _a.id;
+    var _b = useState(''), message = _b[0], setMessage = _b[1];
+    var _c = useState([]), selectedFiles = _c[0], setSelectedFiles = _c[1];
+    var user = useSelector(function (state) { return state.auth; }).user;
+    var fileInputRef = useRef(null);
+    // const { data: viewLayoutData } = useGetSolidViewLayoutQuery(null);
+    var _d = useCreateChatterMessageMutation(), createChatterMessage = _d[0], _e = _d[1], isLoading = _e.isLoading, isSuccess = _e.isSuccess, isError = _e.isError;
+    var tempEmails = [
+        "johndoe@gmal.com",
+        "tempmail@gmail.com",
+        "example@mail.com"
+    ];
+    var handleFileSelect = function (event) {
+        if (event.target.files) {
+            var files_1 = Array.from(event.target.files);
+            setSelectedFiles(function (prev) { return __spreadArray(__spreadArray([], prev, true), files_1, true); });
+        }
+    };
+    var handleSubmit = function (e) { return __awaiter(void 0, void 0, void 0, function () {
+        var formData_1, error_1;
+        var _a, _b, _c, _d;
+        return __generator(this, function (_e) {
+            switch (_e.label) {
+                case 0:
+                    e.preventDefault();
+                    if (!message.trim() && selectedFiles.length === 0)
+                        return [2 /*return*/];
+                    _e.label = 1;
+                case 1:
+                    _e.trys.push([1, 3, , 4]);
+                    formData_1 = new FormData();
+                    formData_1.append('messageType', "custom");
+                    formData_1.append('messageSubType', "audit_insert");
+                    formData_1.append('messageBody', message);
+                    formData_1.append('coModelEntityId', id);
+                    formData_1.append('coModelName', (_c = (_b = (_a = solidFormViewMetaData === null || solidFormViewMetaData === void 0 ? void 0 : solidFormViewMetaData.data) === null || _a === void 0 ? void 0 : _a.solidView) === null || _b === void 0 ? void 0 : _b.model) === null || _c === void 0 ? void 0 : _c.singularName);
+                    formData_1.append('userId', (_d = user === null || user === void 0 ? void 0 : user.user) === null || _d === void 0 ? void 0 : _d.id);
+                    selectedFiles.forEach(function (file, index) {
+                        formData_1.append("messageAttachments", file);
+                    });
+                    return [4 /*yield*/, createChatterMessage(formData_1).unwrap()];
+                case 2:
+                    _e.sent();
+                    setMessage('');
+                    setSelectedFiles([]);
+                    return [3 /*break*/, 4];
+                case 3:
+                    error_1 = _e.sent();
+                    console.error('Error creating message:', error_1);
+                    return [3 /*break*/, 4];
+                case 4: return [2 /*return*/];
+            }
+        });
+    }); };
+    useEffect(function () {
+        if (isSuccess) {
+            refetch();
+        }
+    }, [isSuccess]);
+    return (_jsxs("form", { className: styles.chatterMessageComposer, onSubmit: handleSubmit, children: [_jsxs("div", { className: 'flex align-items-center gap-2', children: [_jsx(InputText, { type: "text", value: message, onChange: function (e) { return setMessage(e.target.value); }, placeholder: type === 'email' ? 'Send a message to followers' : 'Log an internal note...', className: "p-inputtext-sm w-full p-2 ".concat(styles.chatterMessageInput) }), _jsx("input", { type: "file", ref: fileInputRef, onChange: handleFileSelect, multiple: true, style: { display: 'none' } }), _jsx(Button, { icon: "pi pi-plus", className: "p-button-rounded p-button-text", onClick: function () { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, tooltip: "Attach files", tooltipOptions: { position: 'top' } })] }), selectedFiles.length > 0 && (_jsx("div", { className: 'flex flex-wrap gap-2 mt-2', children: selectedFiles.map(function (file, index) { return (_jsxs("div", { className: 'flex align-items-center gap-2 bg-gray-100 p-2 rounded', children: [_jsx("span", { className: 'text-sm', children: file.name }), _jsx(Button, { icon: "pi pi-times", className: "p-button-rounded p-button-text p-button-sm", onClick: function () { return setSelectedFiles(function (prev) { return prev.filter(function (_, i) { return i !== index; }); }); } })] }, index)); }) })), _jsxs("div", { className: 'mt-3 flex align-items-center gap-2', children: [_jsx(Button, { label: type === 'email' ? 'Send' : 'Log', size: 'small', type: 'submit', loading: isLoading }), _jsx(Button, { label: 'Cancel', size: 'small', type: 'button', text: true, severity: 'contrast', onClick: function () {
+                            setMessage('');
+                            setSelectedFiles([]);
+                        } })] })] }));
+};
+//# sourceMappingURL=SolidMessageComposer.js.map

package/dist/components/core/chatter/SolidMessageComposer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SolidMessageComposer.js","sourceRoot":"","sources":["../../../../src/components/core/chatter/SolidMessageComposer.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACZ,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAA;AAChD,OAAO,MAAM,MAAM,sBAAsB,CAAA;AACzC,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAC1C,OAAO,EAAE,+BAA+B,EAAE,MAAM,oCAAoC,CAAA;AACpF,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAEnD,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AAGzC,MAAM,CAAC,IAAM,oBAAoB,GAAG,UAAC,EAAqH;QAAnH,IAAI,UAAA,EAAE,qBAAqB,2BAAA,EAAE,OAAO,aAAA,EAAE,EAAE,QAAA;IACrE,IAAA,KAAwB,QAAQ,CAAC,EAAE,CAAC,EAAnC,OAAO,QAAA,EAAE,UAAU,QAAgB,CAAC;IACrC,IAAA,KAAoC,QAAQ,CAAS,EAAE,CAAC,EAAvD,aAAa,QAAA,EAAE,gBAAgB,QAAwB,CAAC;IACvD,IAAA,IAAI,GAAK,WAAW,CAAC,UAAC,KAAU,IAAK,OAAA,KAAK,CAAC,IAAI,EAAV,CAAU,CAAC,KAA5C,CAA6C;IACzD,IAAM,YAAY,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IAEpD,qEAAqE;IAC/D,IAAA,KAA4D,+BAA+B,EAAE,EAA5F,oBAAoB,QAAA,EAAE,UAAiC,EAA/B,SAAS,eAAA,EAAE,SAAS,eAAA,EAAE,OAAO,aAAuC,CAAC;IAEpG,IAAM,UAAU,GAAG;QACf,kBAAkB;QAClB,oBAAoB;QACpB,kBAAkB;KACrB,CAAA;IAED,IAAM,gBAAgB,GAAG,UAAC,KAA0C;QAChE,IAAI,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE;YACpB,IAAM,OAAK,GAAG,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;YAC7C,gBAAgB,CAAC,UAAA,IAAI,IAAI,uCAAI,IAAI,SAAK,OAAK,SAAlB,CAAmB,CAAC,CAAC;SACjD;IACL,CAAC,CAAC;IAEF,IAAM,YAAY,GAAG,UAAO,CAAkB;;;;;;oBAC1C,CAAC,CAAC,cAAc,EAAE,CAAC;oBACnB,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,IAAI,aAAa,CAAC,MAAM,KAAK,CAAC;wBAAE,sBAAO;;;;oBAGhD,aAAW,IAAI,QAAQ,EAAE,CAAC;oBAChC,UAAQ,CAAC,MAAM,CAAC,aAAa,EAAE,QAAQ,CAAC,CAAC;oBACzC,UAAQ,CAAC,MAAM,CAAC,gBAAgB,EAAE,cAAc,CAAC,CAAC;oBAClD,UAAQ,CAAC,MAAM,CAAC,aAAa,EAAE,OAAO,CAAC,CAAC;oBACxC,UAAQ,CAAC,MAAM,CAAC,iBAAiB,EAAE,EAAE,CAAC,CAAC;oBACvC,UAAQ,CAAC,MAAM,CAAC,aAAa,EAAE,MAAA,MAAA,MAAA,qBAAqB,aAArB,qBAAqB,uBAArB,qBAAqB,CAAE,IAAI,0CAAE,SAAS,0CAAE,KAAK,0CAAE,YAAY,CAAC,CAAC;oBAC5F,UAAQ,CAAC,MAAM,CAAC,QAAQ,EAAE,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,IAAI,0CAAE,EAAE,CAAC,CAAC;oBAE1C,aAAa,CAAC,OAAO,CAAC,UAAC,IAAI,EAAE,KAAK;wBAC9B,UAAQ,CAAC,MAAM,CAAC,oBAAoB,EAAE,IAAI,CAAC,CAAC;oBAChD,CAAC,CAAC,CAAC;oBAEH,qBAAM,oBAAoB,CAAC,UAAQ,CAAC,CAAC,MAAM,EAAE,EAAA;;oBAA7C,SAA6C,CAAC;oBAC9C,UAAU,CAAC,EAAE,CAAC,CAAC;oBACf,gBAAgB,CAAC,EAAE,CAAC,CAAC;;;;oBAErB,OAAO,CAAC,KAAK,CAAC,yBAAyB,EAAE,OAAK,CAAC,CAAC;;;;;SAEvD,CAAC;IAEF,SAAS,CAAC;QACN,IAAI,SAAS,EAAE;YACX,OAAO,EAAE,CAAA;SACZ;IACL,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,OAAO,CACH,gBAAM,SAAS,EAAE,MAAM,CAAC,sBAAsB,EAAE,QAAQ,EAAE,YAAY,aAsBlE,eAAK,SAAS,EAAC,+BAA+B,aAC1C,KAAC,SAAS,IACN,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,OAAO,EACd,QAAQ,EAAE,UAAC,CAAC,IAAK,OAAA,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAA1B,CAA0B,EAC3C,WAAW,EAAE,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,6BAA6B,CAAC,CAAC,CAAC,yBAAyB,EACzF,SAAS,EAAE,oCAA6B,MAAM,CAAC,mBAAmB,CAAE,GACtE,EACF,gBACI,IAAI,EAAC,MAAM,EACX,GAAG,EAAE,YAAY,EACjB,QAAQ,EAAE,gBAAgB,EAC1B,QAAQ,QACR,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,GAC5B,EACF,KAAC,MAAM,IACH,IAAI,EAAC,YAAY,EACjB,SAAS,EAAC,gCAAgC,EAC1C,OAAO,EAAE,sBAAM,OAAA,MAAA,YAAY,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAA,EAAA,EAC5C,OAAO,EAAC,cAAc,EACtB,cAAc,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE,GACrC,IACA,EACL,aAAa,CAAC,MAAM,GAAG,CAAC,IAAI,CACzB,cAAK,SAAS,EAAC,2BAA2B,YACrC,aAAa,CAAC,GAAG,CAAC,UAAC,IAAI,EAAE,KAAK,IAAK,OAAA,CAChC,eAAiB,SAAS,EAAC,uDAAuD,aAC9E,eAAM,SAAS,EAAC,SAAS,YAAE,IAAI,CAAC,IAAI,GAAQ,EAC5C,KAAC,MAAM,IACH,IAAI,EAAC,aAAa,EAClB,SAAS,EAAC,4CAA4C,EACtD,OAAO,EAAE,cAAM,OAAA,gBAAgB,CAAC,UAAA,IAAI,IAAI,OAAA,IAAI,CAAC,MAAM,CAAC,UAAC,CAAC,EAAE,CAAC,IAAK,OAAA,CAAC,KAAK,KAAK,EAAX,CAAW,CAAC,EAAlC,CAAkC,CAAC,EAA5D,CAA4D,GAC7E,KANI,KAAK,CAOT,CACT,EATmC,CASnC,CAAC,GACA,CACT,EACD,eAAK,SAAS,EAAC,oCAAoC,aAC/C,KAAC,MAAM,IACH,KAAK,EAAE,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,EACxC,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,SAAS,GACpB,EACF,KAAC,MAAM,IACH,KAAK,EAAC,QAAQ,EACd,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,QAAQ,EACb,IAAI,QACJ,QAAQ,EAAC,UAAU,EACnB,OAAO,EAAE;4BACL,UAAU,CAAC,EAAE,CAAC,CAAC;4BACf,gBAAgB,CAAC,EAAE,CAAC,CAAC;wBACzB,CAAC,GACH,IACA,IACH,CACV,CAAA;AACL,CAAC,CAAA"}

package/dist/components/core/chatter/SolidMessageComposer.tsx

@@ -0,0 +1,145 @@
+"use client"
+import { InputText } from 'primereact/inputtext'
+import styles from './chatter.module.css'
+import { Button } from 'primereact/button'
+import { useCreateChatterMessageMutation } from '@/redux/api/solidChatterMessageApi'
+import { useEffect, useState, useRef } from 'react'
+import { useGetSolidViewLayoutQuery } from '@/redux/api/solidViewApi'
+import { useSelector } from 'react-redux'
+import { FileUpload } from 'primereact/fileupload';
+
+export const SolidMessageComposer = ({ type, solidFormViewMetaData, refetch, id }: { type?: string, solidFormViewMetaData?: any, refetch?: any, id?: any }) => {
+    const [message, setMessage] = useState('');
+    const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
+    const { user } = useSelector((state: any) => state.auth);
+    const fileInputRef = useRef<HTMLInputElement>(null);
+
+    // const { data: viewLayoutData } = useGetSolidViewLayoutQuery(null);
+    const [createChatterMessage, { isLoading, isSuccess, isError }] = useCreateChatterMessageMutation();
+
+    const tempEmails = [
+        "johndoe@gmal.com",
+        "tempmail@gmail.com",
+        "example@mail.com"
+    ]
+
+    const handleFileSelect = (event: React.ChangeEvent<HTMLInputElement>) => {
+        if (event.target.files) {
+            const files = Array.from(event.target.files);
+            setSelectedFiles(prev => [...prev, ...files]);
+        }
+    };
+
+    const handleSubmit = async (e: React.FormEvent) => {
+        e.preventDefault();
+        if (!message.trim() && selectedFiles.length === 0) return;
+
+        try {
+            const formData = new FormData();
+            formData.append('messageType', "custom");
+            formData.append('messageSubType', "audit_insert");
+            formData.append('messageBody', message);
+            formData.append('coModelEntityId', id);
+            formData.append('coModelName', solidFormViewMetaData?.data?.solidView?.model?.singularName);
+            formData.append('userId', user?.user?.id);
+
+            selectedFiles.forEach((file, index) => {
+                formData.append(`messageAttachments`, file);
+            });
+
+            await createChatterMessage(formData).unwrap();
+            setMessage('');
+            setSelectedFiles([]);
+        } catch (error) {
+            console.error('Error creating message:', error);
+        }
+    };
+
+    useEffect(() => {
+        if (isSuccess) {
+            refetch()
+        }
+    }, [isSuccess]);
+
+    return (
+        <form className={styles.chatterMessageComposer} onSubmit={handleSubmit}>
+            {/* {type === 'email' &&
+                <div className='flex align-items-center gap-1 text-sm mb-2'>
+                    <span className='font-bold'>To:</span>
+                    <div className={styles.chatterEmails}>
+                        {tempEmails.map((mail, index) => (
+                            <span key={index}>
+                                {mail}
+                            </span>
+                        ))}
+                    </div>
+                    <div className={`pi pi-sort-down-fill text-primary ${styles.emailTooltipIcon}`} style={{ fontSize: 8 }}>
+                        <div className={styles.emailsTooltip}>
+                            {tempEmails.map((mail, index) => (
+                                <span key={index} className='text-color text-sm'>
+                                    {mail}
+                                </span>
+                            ))}
+                        </div>
+                    </div>
+                </div>
+            } */}
+            <div className='flex align-items-center gap-2'>
+                <InputText
+                    type="text"
+                    value={message}
+                    onChange={(e) => setMessage(e.target.value)}
+                    placeholder={type === 'email' ? 'Send a message to followers' : 'Log an internal note...'}
+                    className={`p-inputtext-sm w-full p-2 ${styles.chatterMessageInput}`}
+                />
+                <input
+                    type="file"
+                    ref={fileInputRef}
+                    onChange={handleFileSelect}
+                    multiple
+                    style={{ display: 'none' }}
+                />
+                <Button
+                    icon="pi pi-plus"
+                    className="p-button-rounded p-button-text"
+                    onClick={() => fileInputRef.current?.click()}
+                    tooltip="Attach files"
+                    tooltipOptions={{ position: 'top' }}
+                />
+            </div>
+            {selectedFiles.length > 0 && (
+                <div className='flex flex-wrap gap-2 mt-2'>
+                    {selectedFiles.map((file, index) => (
+                        <div key={index} className='flex align-items-center gap-2 bg-gray-100 p-2 rounded'>
+                            <span className='text-sm'>{file.name}</span>
+                            <Button
+                                icon="pi pi-times"
+                                className="p-button-rounded p-button-text p-button-sm"
+                                onClick={() => setSelectedFiles(prev => prev.filter((_, i) => i !== index))}
+                            />
+                        </div>
+                    ))}
+                </div>
+            )}
+            <div className='mt-3 flex align-items-center gap-2'>
+                <Button
+                    label={type === 'email' ? 'Send' : 'Log'}
+                    size='small'
+                    type='submit'
+                    loading={isLoading}
+                />
+                <Button
+                    label='Cancel'
+                    size='small'
+                    type='button'
+                    text
+                    severity='contrast'
+                    onClick={() => {
+                        setMessage('');
+                        setSelectedFiles([]);
+                    }}
+                />
+            </div>
+        </form>
+    )
+}

package/dist/components/core/chatter/chatter.module.css

@@ -0,0 +1,70 @@
+.chatterTitle {
+    padding: 15px;
+    border-bottom: 1px solid #D8E2EA;
+}
+
+.chatterMessageComposer .chatterMessageInput {
+    background-color: #FEFCFF;
+    border: 1px solid #D8E2EA;
+}
+
+.chatterMessageComposer .chatterMessageInput::placeholder {
+    color: rgba(51, 51, 51, 0.20);
+}
+
+.chatterEmails {
+    max-width: 80%;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+.emailTooltipIcon {
+    position: relative;
+}
+
+.emailsTooltip {
+    visibility: hidden;
+    position: absolute;
+    right: 0px !important;
+    top: 1;
+    background-color: #fff;
+    border: 1px solid #D8E2EA;
+    padding: 8px;
+    border-radius: 8px !important;
+    min-width: 200;
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+}
+
+.emailTooltipIcon:hover .emailsTooltip {
+    visibility: visible !important;
+}
+
+.chatterDatetimeDivider {
+    border-top: 1px dashed #00000026;
+    position: relative;
+    margin: 30px 0;
+}
+
+.chatterDividerContent {
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    border-radius: 6.25rem;
+    border: 1px solid rgba(0, 0, 0, 0.15);
+    background: #FAFAFA;
+    padding: 0.25rem 0.5rem;
+    text-wrap: nowrap;
+    font-size: 0.625rem;
+    font-weight: 600;
+    color: var(--secondary-dark-color);
+}
+
+.solidMessageWrapper {
+    border: 1px solid #D8E2EA;
+    padding: 10px;
+    border-radius: 0.25rem;
+    width: 100%;
+}