@solidxai/core-ui 0.1.7-beta.3 → 0.1.7-beta.5

package/dist/components/core/common/SolidGenericImport/SolidImport.module.css

@@ -20,18 +20,33 @@
 }
 
 :global(.solid-import-dialog-body) {
-    padding: 12px 14px 14px;
+    padding: 14px 16px 16px;
 }
 
 :global(.solid-import-shell) {
     display: flex;
     flex-direction: column;
-    gap: 10px;
+    gap: 12px;
+}
+
+:global(.solid-import-dialog-heading) {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+
+:global(.solid-import-dialog-title) {
+    font-size: 18px;
+    line-height: 1.15;
+    font-weight: 700;
+    letter-spacing: -0.02em;
 }
 
 :global(.solid-import-dialog-subtitle) {
-    max-width: 520px;
-    color: color-mix(in srgb, var(--foreground) 68%, transparent);
+    max-width: 560px;
+    font-size: 12.5px;
+    line-height: 1.55;
+    color: color-mix(in srgb, var(--foreground) 74%, transparent);
 }
 
 :global(.solid-import-stepper) {
@@ -49,7 +64,7 @@
     min-height: 46px;
     border: 1px solid color-mix(in srgb, var(--border) 92%, transparent);
     border-radius: 11px;
-    background: color-mix(in srgb, var(--card) 92%, white 8%);
+    background: color-mix(in srgb, var(--card) 94%, white 6%);
     color: var(--foreground);
     display: flex;
     align-items: center;
@@ -74,7 +89,8 @@
 
 :global(.solid-import-stepper-item.is-active) {
     border-color: color-mix(in srgb, var(--primary) 50%, var(--border));
-    background: color-mix(in srgb, var(--primary) 10%, var(--card));
+    background: color-mix(in srgb, var(--primary) 12%, var(--card));
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
 }
 
 :global(.solid-import-stepper-item.is-complete) {
@@ -122,19 +138,32 @@
 :global(.solid-import-panel-grid) {
     display: grid;
     grid-template-columns: minmax(0, 1.45fr) minmax(240px, 0.85fr);
-    gap: 12px;
-    padding: 12px;
+    gap: 14px;
+    padding: 14px;
 }
 
 :global(.solid-import-panel-grid.is-single-column) {
     grid-template-columns: 1fr;
 }
 
+:global(.solid-import-panel-grid.is-single-column .solid-import-panel) {
+    border: 0;
+    border-radius: 0;
+    background: transparent;
+    box-shadow: none;
+    padding: 0;
+}
+
+:global(.solid-import-panel-grid.is-single-column .solid-import-panel-main) {
+    max-width: 100%;
+}
+
 :global(.solid-import-panel) {
     border: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
-    border-radius: 12px;
-    background: color-mix(in srgb, var(--card) 92%, white 8%);
-    padding: 14px;
+    border-radius: 14px;
+    background: linear-gradient(180deg, color-mix(in srgb, var(--card) 96%, white 4%), color-mix(in srgb, var(--card) 99%, black 1%));
+    padding: 16px;
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
 }
 
 :global(.solid-import-panel.is-full-width) {
@@ -142,21 +171,22 @@
 }
 
 :global(.solid-import-panel-side) {
-    background: color-mix(in srgb, var(--accent) 34%, transparent);
+    background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 26%, var(--card)), color-mix(in srgb, var(--card) 96%, black 4%));
 }
 
 :global(.solid-import-section-title) {
-    margin: 0 0 10px;
-    font-size: 13px;
+    margin: 0 0 12px;
+    font-size: 14px;
     line-height: 1.25;
     font-weight: 700;
+    letter-spacing: -0.01em;
     color: var(--foreground);
 }
 
 :global(.solid-import-section-copy) {
-    font-size: 12px;
-    line-height: 1.5;
-    color: color-mix(in srgb, var(--foreground) 72%, transparent);
+    font-size: 12.5px;
+    line-height: 1.6;
+    color: color-mix(in srgb, var(--foreground) 76%, transparent);
 }
 
 :global(.solid-import-instruction-list) {
@@ -164,7 +194,14 @@
     padding-left: 22px;
     display: flex;
     flex-direction: column;
-    gap: 14px;
+    gap: 16px;
+}
+
+:global(.solid-import-panel-grid.is-single-column .solid-import-instruction-list) {
+    padding-left: 0;
+    gap: 0;
+    list-style: none;
+    counter-reset: solid-import-instruction;
 }
 
 :global(.solid-import-instruction-list li::marker) {
@@ -177,21 +214,98 @@
     line-height: 1.45;
 }
 
+:global(.solid-import-instruction-list > li) {
+    padding-bottom: 14px;
+    border-bottom: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
+}
+
+:global(.solid-import-instruction-list > li:last-child) {
+    padding-bottom: 0;
+    border-bottom: 0;
+}
+
+:global(.solid-import-panel-grid.is-single-column .solid-import-instruction-list > li) {
+    display: grid;
+    grid-template-columns: minmax(150px, 190px) minmax(0, 1fr);
+    gap: 16px;
+    align-items: start;
+    padding: 12px 0;
+    counter-increment: solid-import-instruction;
+}
+
 :global(.solid-import-instruction-title) {
     margin: 0 0 6px;
     font-size: 13px;
-    line-height: 1.35;
-    font-weight: 600;
+    line-height: 1.4;
+    font-weight: 650;
+    letter-spacing: -0.01em;
+    color: color-mix(in srgb, var(--foreground) 96%, transparent);
+}
+
+:global(.solid-import-panel-grid.is-single-column .solid-import-instruction-title) {
+    margin: 0;
+    padding-top: 3px;
+}
+
+:global(.solid-import-panel-grid.is-single-column .solid-import-instruction-title::before) {
+    content: counter(solid-import-instruction) ". ";
+    color: color-mix(in srgb, var(--foreground) 66%, transparent);
+    font-variant-numeric: tabular-nums;
 }
 
 :global(.solid-import-instruction-copy) {
+    font-size: 12px;
+    line-height: 1.65;
+    color: color-mix(in srgb, var(--foreground) 72%, transparent);
+}
+
+:global(.solid-import-template-actions) {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+}
+
+:global(.solid-import-panel-grid.is-single-column .solid-import-template-actions) {
+    justify-content: flex-start;
+}
+
+:global(.solid-import-inline-token-list) {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+}
+
+:global(.solid-import-inline-token) {
+    display: inline-flex;
+    align-items: center;
+    min-height: 26px;
+    padding: 0 10px;
+    border-radius: 999px;
+    border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
+    background: color-mix(in srgb, var(--accent) 28%, transparent);
+    color: color-mix(in srgb, var(--foreground) 86%, transparent);
     font-size: 11.5px;
-    line-height: 1.6;
-    color: color-mix(in srgb, var(--foreground) 66%, transparent);
+    line-height: 1.3;
+    font-weight: 500;
+}
+
+:global(.solid-import-panel-grid.is-single-column .solid-import-inline-token-list) {
+    gap: 9px;
 }
 
 :global(.solid-import-custom-instruction) {
-    margin: 0 0 10px;
+    margin: 0;
+    padding: 10px 12px;
+    border-radius: 10px;
+    border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
+    background: color-mix(in srgb, var(--card) 88%, var(--accent) 12%);
+    font-size: 12px;
+    line-height: 1.65;
+    color: color-mix(in srgb, var(--foreground) 78%, transparent);
+}
+
+:global(.solid-import-custom-instruction + .solid-import-custom-instruction) {
+    margin-top: 10px;
 }
 
 :global(.solid-import-dropzone-shell) {
@@ -326,9 +440,9 @@
 
 :global(.solid-import-actions-copy) {
     margin: 0;
-    font-size: 11px;
-    line-height: 1.45;
-    color: color-mix(in srgb, var(--foreground) 56%, transparent);
+    font-size: 11.5px;
+    line-height: 1.5;
+    color: color-mix(in srgb, var(--foreground) 62%, transparent);
 }
 
 :global(.solid-import-loading-state),
@@ -345,16 +459,16 @@
 
 :global(.solid-import-empty-state h4) {
     margin: 0;
-    font-size: 15px;
+    font-size: 16px;
     line-height: 1.3;
     color: var(--foreground);
 }
 
 :global(.solid-import-empty-state p) {
     margin: 0;
-    font-size: 12px;
-    line-height: 1.5;
-    color: color-mix(in srgb, var(--foreground) 66%, transparent);
+    font-size: 12.5px;
+    line-height: 1.6;
+    color: color-mix(in srgb, var(--foreground) 70%, transparent);
 }
 
 :global(.solid-import-mapping-shell) {
@@ -584,4 +698,13 @@
     :global(.solid-import-mapping-intro) {
         flex-direction: column;
     }
+
+    :global(.solid-import-panel-grid.is-single-column .solid-import-instruction-list > li) {
+        grid-template-columns: 1fr;
+        gap: 8px;
+    }
+
+    :global(.solid-import-panel-grid.is-single-column .solid-import-instruction-title) {
+        padding-top: 0;
+    }
 }

package/dist/components/core/common/SolidGenericImport/SolidImportInstructions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SolidImportInstructions.d.ts","sourceRoot":"","sources":["../../../../../src/components/core/common/SolidGenericImport/SolidImportInstructions.tsx"],"names":[],"mappings":"AASA,eAAO,MAAM,uBAAuB,wCAAyC,GAAG,4CAyI/E,CAAA"}
+{"version":3,"file":"SolidImportInstructions.d.ts","sourceRoot":"","sources":["../../../../../src/components/core/common/SolidGenericImport/SolidImportInstructions.tsx"],"names":[],"mappings":"AASA,eAAO,MAAM,uBAAuB,wCAAyC,GAAG,4CAwI/E,CAAA"}

package/dist/components/core/common/SolidGenericImport/SolidImportInstructions.js

@@ -105,7 +105,7 @@ export var SolidImportInstructions = function (_a) {
     }); };
     var customInstructions = (_c = (_b = importInstructionsData === null || importInstructionsData === void 0 ? void 0 : importInstructionsData.data) === null || _b === void 0 ? void 0 : _b.custom) !== null && _c !== void 0 ? _c : [];
     var standardInstructions = (_e = (_d = importInstructionsData === null || importInstructionsData === void 0 ? void 0 : importInstructionsData.data) === null || _d === void 0 ? void 0 : _d.standard) !== null && _e !== void 0 ? _e : {};
-    return (_jsxs("div", { children: [_jsx("div", { className: styles.SolidImportContextWrapper, children: isLoading ? (_jsx("div", { className: "solid-import-loading-state", children: _jsx(SolidSpinner, { size: 22, label: "Loading import instructions" }) })) : isError ? (_jsxs("div", { className: 'solid-import-empty-state', children: [_jsx("h4", { className: 'text-center px-2', children: "Could not load import instructions" }), _jsx("p", { children: "Try again or continue if you already know the expected format." })] })) : (_jsxs("div", { className: "solid-import-panel-grid ".concat(customInstructions.length === 0 ? 'is-single-column' : ''), children: [_jsxs("div", { className: "solid-import-panel solid-import-panel-main ".concat(customInstructions.length > 0 ? 'has-side-panel' : 'is-full-width'), children: [_jsx("h5", { className: 'solid-primary-black-text solid-import-section-title', children: "Standard Instructions" }), _jsxs("ol", { className: 'solid-import-instruction-list', children: [_jsxs("li", { children: [_jsx("p", { className: 'font-medium solid-primary-black-text solid-import-instruction-title', children: "Download a starter template" }), _jsxs("div", { className: 'flex gap-3 flex-wrap', children: [_jsx(SolidButton, { type: "button", variant: "outline", size: "small", leftIcon: _jsx(Download, { size: 14 }), onClick: function () { return handleTemplateDownload('csv'); }, children: "CSV Template" }), _jsx(SolidButton, { type: "button", variant: "outline", size: "small", leftIcon: _jsx(FileSpreadsheet, { size: 14 }), onClick: function () { return handleTemplateDownload('excel'); }, children: "Excel Template" })] })] }), (function () {
+    return (_jsxs("div", { children: [_jsx("div", { className: styles.SolidImportContextWrapper, children: isLoading ? (_jsx("div", { className: "solid-import-loading-state", children: _jsx(SolidSpinner, { size: 22, label: "Loading import instructions" }) })) : isError ? (_jsxs("div", { className: 'solid-import-empty-state', children: [_jsx("h4", { className: 'text-center px-2', children: "Could not load import instructions" }), _jsx("p", { children: "Try again or continue if you already know the expected format." })] })) : (_jsxs("div", { className: "solid-import-panel-grid ".concat(customInstructions.length === 0 ? 'is-single-column' : ''), children: [_jsxs("div", { className: "solid-import-panel solid-import-panel-main ".concat(customInstructions.length > 0 ? 'has-side-panel' : 'is-full-width'), children: [_jsx("h5", { className: 'solid-import-section-title', children: "Standard Instructions" }), _jsxs("ol", { className: 'solid-import-instruction-list', children: [_jsxs("li", { children: [_jsx("p", { className: 'solid-import-instruction-title', children: "Download a starter template" }), _jsxs("div", { className: 'solid-import-template-actions', children: [_jsx(SolidButton, { type: "button", variant: "outline", size: "sm", leftIcon: _jsx(Download, { size: 14 }), onClick: function () { return handleTemplateDownload('csv'); }, children: "CSV Template" }), _jsx(SolidButton, { type: "button", variant: "outline", size: "sm", leftIcon: _jsx(FileSpreadsheet, { size: 14 }), onClick: function () { return handleTemplateDownload('excel'); }, children: "Excel Template" })] })] }), (function () {
                                             return (Object.entries(standardInstructions)
                                                 .map(function (_a) {
                                                 var key = _a[0], values = _a[1];
@@ -114,14 +114,14 @@ export var SolidImportInstructions = function (_a) {
                                                 var titleCaseKey = key
                                                     .replace(/([A-Z])/g, ' $1')
                                                     .replace(/^./, function (str) { return str.toUpperCase(); });
-                                                var rendered = (_jsxs("li", { className: 'solid-import-instruction-item', children: [_jsx("p", { className: 'font-medium solid-primary-black-text mb-1 solid-import-instruction-title', children: titleCaseKey }), _jsx("div", { className: 'flex flex-wrap solid-import-instruction-copy', children: values.map(function (item, i) { return (_jsxs("span", { className: 'mr-2', children: [typeof item === 'string'
-                                                                        ? item
-                                                                        : (item === null || item === void 0 ? void 0 : item.fieldName)
-                                                                            ? "".concat(item.fieldName, " (Regex: ").concat(item.regexPattern, ")")
-                                                                            : JSON.stringify(item), i < values.length - 1 ? ', ' : ''] }, i)); }) })] }, key));
+                                                var rendered = (_jsxs("li", { className: 'solid-import-instruction-item', children: [_jsx("p", { className: 'solid-import-instruction-title', children: titleCaseKey }), _jsx("div", { className: 'solid-import-instruction-copy solid-import-inline-token-list', children: values.map(function (item, i) { return (_jsx("span", { className: 'solid-import-inline-token', children: typeof item === 'string'
+                                                                    ? item
+                                                                    : (item === null || item === void 0 ? void 0 : item.fieldName)
+                                                                        ? "".concat(item.fieldName, " (Regex: ").concat(item.regexPattern, ")")
+                                                                        : JSON.stringify(item) }, i)); }) })] }, key));
                                                 return rendered;
                                             }));
                                         })()] })] }), customInstructions.length > 0 &&
-                            _jsxs("div", { className: 'solid-import-panel solid-import-panel-side', children: [_jsx("h5", { className: 'solid-primary-black-text solid-import-section-title', children: "Custom Instructions" }), _jsx("div", { className: 'solid-import-instruction-copy', children: customInstructions.map(function (instruction, index) { return (_jsx("p", { className: 'solid-import-custom-instruction', children: typeof instruction === "string" ? instruction : JSON.stringify(instruction) }, index)); }) })] })] })) }), _jsxs("div", { className: 'solid-import-actions', children: [_jsx("p", { className: "solid-import-actions-copy", children: "Review the template guidance before uploading your file." }), _jsx(SolidButton, { type: "button", size: 'small', onClick: function () { return setImportStep(2); }, rightIcon: _jsx(MoveRight, { size: 14 }), children: "Continue" })] })] }));
+                            _jsxs("div", { className: 'solid-import-panel solid-import-panel-side', children: [_jsx("h5", { className: 'solid-primary-black-text solid-import-section-title', children: "Custom Instructions" }), _jsx("div", { className: 'solid-import-instruction-copy', children: customInstructions.map(function (instruction, index) { return (_jsx("p", { className: 'solid-import-custom-instruction', children: typeof instruction === "string" ? instruction : JSON.stringify(instruction) }, index)); }) })] })] })) }), _jsxs("div", { className: 'solid-import-actions', children: [_jsx("p", { className: "solid-import-actions-copy", children: "Review the template guidance before uploading your file." }), _jsx(SolidButton, { type: "button", size: 'sm', onClick: function () { return setImportStep(2); }, rightIcon: _jsx(MoveRight, { size: 14 }), children: "Continue" })] })] }));
 };
 //# sourceMappingURL=SolidImportInstructions.js.map

package/dist/components/core/common/SolidGenericImport/SolidImportInstructions.js.map

@@ -1 +1 @@
-{"version":3,"file":"SolidImportInstructions.js","sourceRoot":"","sources":["../../../../../src/components/core/common/SolidGenericImport/SolidImportInstructions.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,EAAE,QAAQ,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACpE,OAAO,MAAM,MAAM,0BAA0B,CAAA;AAC7C,OAAO,EAAE,iCAAiC,EAAE,MAAM,4CAA4C,CAAC;AAC/F,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAC;AAC7D,OAAO,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AACtE,OAAO,EAAE,GAAG,EAAE,MAAM,0BAA0B,CAAC;AAC/C,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAEhE,MAAM,CAAC,IAAM,uBAAuB,GAAG,UAAC,EAAwC;;QAAtC,aAAa,mBAAA,EAAE,gBAAgB,sBAAA;IAC/D,IAAA,KACF,iCAAiC,EAAE,EADhC,qBAAqB,QAAA,EAAE,UAAoD,EAA5C,sBAAsB,UAAA,EAAE,SAAS,eAAA,EAAE,OAAO,aACzC,CAAC;IAExC,SAAS,CAAC;;QACN,IAAI,gBAAgB,KAAI,MAAA,MAAA,MAAA,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,IAAI,0CAAE,SAAS,0CAAE,KAAK,0CAAE,EAAE,CAAA,EAAE;YAClE,qBAAqB,CAAC,EAAE,EAAE,EAAE,MAAA,MAAA,MAAA,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,IAAI,0CAAE,SAAS,0CAAE,KAAK,0CAAE,EAAE,EAAE,CAAC,CAAC;SAC/E;IACL,CAAC,EAAE,CAAC,gBAAgB,EAAE,qBAAqB,CAAC,CAAC,CAAC;IAE9C,IAAM,sBAAsB,GAAG,UAAO,MAAuB;;;;;;oBACnD,OAAO,GAAG,MAAA,MAAA,MAAA,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,IAAI,0CAAE,SAAS,0CAAE,KAAK,0CAAE,EAAE,CAAC;oBAC7D,IAAI,CAAC,OAAO;wBAAE,sBAAO;;;;oBAEI,qBAAM,UAAU,EAAE,EAAA;;oBAAjC,OAAO,GAAQ,SAAkB;oBACjC,KAAK,GAAG,CAAA,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,0CAAE,WAAW,KAAI,EAAE,CAAC;oBAC/C,IAAI,CAAC,KAAK,EAAE;wBACR,MAAM,IAAI,KAAK,CAAC,cAAc,CAAC,mBAAmB,CAAC,CAAC;qBACvD;oBACgB,qBAAM,KAAK,CACxB,UAAG,GAAG,CAAC,SAAS,CAAC,qDAA2C,OAAO,cAAI,MAAM,CAAE,EAC/E;4BACI,MAAM,EAAE,KAAK;4BACb,OAAO,EAAE;gCACL,aAAa,EAAE,iBAAU,KAAK,CAAE;6BACnC;yBACJ,CACJ,EAAA;;oBARK,QAAQ,GAAG,SAQhB;oBAED,IAAI,CAAC,QAAQ,CAAC,EAAE,EAAE;wBACd,MAAM,IAAI,KAAK,CAAC,cAAc,CAAC,oBAAoB,CAAC,CAAC;qBACxD;oBAEY,qBAAM,QAAQ,CAAC,IAAI,EAAE,EAAA;;oBAA5B,IAAI,GAAG,SAAqB;oBAC5B,GAAG,GAAG,MAAM,CAAC,GAAG,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC;oBAEvC,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;oBACzC,IAAI,CAAC,IAAI,GAAG,GAAG,CAAC;oBAChB,IAAI,CAAC,QAAQ,GAAG,0BAAmB,MAAM,KAAK,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAE,CAAC;oBACvE,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;oBAChC,IAAI,CAAC,KAAK,EAAE,CAAC;oBACb,IAAI,CAAC,MAAM,EAAE,CAAC;oBACd,MAAM,CAAC,GAAG,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC;;;;oBAEhC,OAAO,CAAC,KAAK,CAAC,cAAc,CAAC,eAAe,EAAE,OAAK,CAAC,CAAC;;;;;SAE5D,CAAC;IAEF,IAAM,kBAAkB,GAAG,MAAA,MAAA,sBAAsB,aAAtB,sBAAsB,uBAAtB,sBAAsB,CAAE,IAAI,0CAAE,MAAM,mCAAI,EAAE,CAAC;IACtE,IAAM,oBAAoB,GAAG,MAAA,MAAA,sBAAsB,aAAtB,sBAAsB,uBAAtB,sBAAsB,CAAE,IAAI,0CAAE,QAAQ,mCAAI,EAAE,CAAC;IAE1E,OAAO,CACH,0BACI,cAAK,SAAS,EAAE,MAAM,CAAC,yBAAyB,YAC3C,SAAS,CAAC,CAAC,CAAC,CACT,cAAK,SAAS,EAAC,4BAA4B,YACvC,KAAC,YAAY,IAAC,IAAI,EAAE,EAAE,EAAE,KAAK,EAAC,6BAA6B,GAAG,GAC5D,CACT,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CACV,eAAK,SAAS,EAAC,0BAA0B,aACrC,aAAI,SAAS,EAAC,kBAAkB,mDAAwC,EACxE,yFAAqE,IACnE,CACT,CAAC,CAAC,CAAC,CACA,eAAK,SAAS,EAAE,kCAA2B,kBAAkB,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,EAAE,CAAE,aAClG,eAAK,SAAS,EAAE,qDAA8C,kBAAkB,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,eAAe,CAAE,aAC1H,aAAI,SAAS,EAAC,qDAAqD,sCAA2B,EAC9F,cAAI,SAAS,EAAC,+BAA+B,aACzC,yBACI,YAAG,SAAS,EAAC,qEAAqE,4CAAgC,EAClH,eAAK,SAAS,EAAC,sBAAsB,aACjC,KAAC,WAAW,IAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,OAAO,EAAC,QAAQ,EAAE,KAAC,QAAQ,IAAC,IAAI,EAAE,EAAE,GAAI,EAAE,OAAO,EAAE,cAAM,OAAA,sBAAsB,CAAC,KAAK,CAAC,EAA7B,CAA6B,6BAE1H,EACd,KAAC,WAAW,IAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,OAAO,EAAC,QAAQ,EAAE,KAAC,eAAe,IAAC,IAAI,EAAE,EAAE,GAAI,EAAE,OAAO,EAAE,cAAM,OAAA,sBAAsB,CAAC,OAAO,CAAC,EAA/B,CAA+B,+BAEnI,IACZ,IACL,EACJ,CAAC;4CACE,OAAO,CACH,MAAM,CAAC,OAAO,CAAC,oBAAgD,CAAC;iDAC3D,GAAG,CAAC,UAAC,EAAa;oDAAZ,GAAG,QAAA,EAAE,MAAM,QAAA;gDACd,IAAI,CAAC,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,MAAM,CAAA;oDAAE,OAAO,IAAI,CAAC;gDAEjC,IAAM,YAAY,GAAG,GAAG;qDACnB,OAAO,CAAC,UAAU,EAAE,KAAK,CAAC;qDAC1B,OAAO,CAAC,IAAI,EAAE,UAAA,GAAG,IAAI,OAAA,GAAG,CAAC,WAAW,EAAE,EAAjB,CAAiB,CAAC,CAAC;gDAE7C,IAAM,QAAQ,GAAG,CACb,cAAc,SAAS,EAAC,+BAA+B,aACnD,YAAG,SAAS,EAAC,0EAA0E,YAClF,YAAY,GACb,EACJ,cAAK,SAAS,EAAC,8CAA8C,YACxD,MAAM,CAAC,GAAG,CAAC,UAAC,IAAS,EAAE,CAAC,IAAK,OAAA,CAC1B,gBAAc,SAAS,EAAC,MAAM,aACzB,OAAO,IAAI,KAAK,QAAQ;wEACrB,CAAC,CAAC,IAAI;wEACN,CAAC,CAAC,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,SAAS;4EACb,CAAC,CAAC,UAAG,IAAI,CAAC,SAAS,sBAAY,IAAI,CAAC,YAAY,MAAG;4EACnD,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAC7B,CAAC,GAAG,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,KAN3B,CAAC,CAOL,CACV,EAT6B,CAS7B,CAAC,GACA,KAfD,GAAG,CAgBP,CACR,CAAC;gDACF,OAAO,QAAQ,CAAC;4CACpB,CAAC,CAAC,CACT,CAAC;wCACN,CAAC,CAAC,EAAE,IACH,IACP,EACL,kBAAkB,CAAC,MAAM,GAAG,CAAC;4BAC1B,eAAK,SAAS,EAAC,4CAA4C,aACvD,aAAI,SAAS,EAAC,qDAAqD,oCAAyB,EAC5F,cAAK,SAAS,EAAC,+BAA+B,YACzC,kBAAkB,CAAC,GAAG,CAAC,UAAC,WAAgB,EAAE,KAAa,IAAK,OAAA,CACzD,YAAe,SAAS,EAAC,iCAAiC,YACrD,OAAO,WAAW,KAAK,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,IADxE,KAAK,CAET,CACP,EAJ4D,CAI5D,CAAC,GACA,IACJ,IAER,CACT,GACC,EACN,eAAK,SAAS,EAAC,sBAAsB,aACjC,YAAG,SAAS,EAAC,2BAA2B,yEAA6D,EACrG,KAAC,WAAW,IAAC,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAE,cAAM,OAAA,aAAa,CAAC,CAAC,CAAC,EAAhB,CAAgB,EAAE,SAAS,EAAE,KAAC,SAAS,IAAC,IAAI,EAAE,EAAE,GAAI,yBAE7F,IACZ,IACJ,CACT,CAAA;AACL,CAAC,CAAA","sourcesContent":["import { Download, FileSpreadsheet, MoveRight } from 'lucide-react';\nimport styles from './SolidImport.module.css'\nimport { useLazyGetImportInstructionsQuery } from '../../../../redux/api/importTransactionApi';\nimport { useEffect } from 'react';\nimport { getSession } from \"../../../../adapters/auth/index\";\nimport { ERROR_MESSAGES } from '../../../../constants/error-messages';\nimport { env } from \"../../../../adapters/env\";\nimport { SolidButton, SolidSpinner } from '../../../shad-cn-ui';\n\nexport const SolidImportInstructions = ({ setImportStep, listViewMetaData }: any) => {\n    const [getImportInstructions, { data: importInstructionsData, isLoading, isError }] =\n        useLazyGetImportInstructionsQuery();\n\n    useEffect(() => {\n        if (listViewMetaData && listViewMetaData?.data?.solidView?.model?.id) {\n            getImportInstructions({ id: listViewMetaData?.data?.solidView?.model?.id });\n        }\n    }, [listViewMetaData, getImportInstructions]);\n\n    const handleTemplateDownload = async (format: 'csv' | 'excel') => {\n        const modelId = listViewMetaData?.data?.solidView?.model?.id;\n        if (!modelId) return;\n        try {\n            const session: any = await getSession();\n            const token = session?.user?.accessToken || \"\";\n            if (!token) {\n                throw new Error(ERROR_MESSAGES.NO_AUTH_TOKEN_FOUND);\n            }\n            const response = await fetch(\n                `${env(\"API_URL\")}/api/import-transaction/import-template/${modelId}/${format}`,\n                {\n                    method: 'GET',\n                    headers: {\n                        Authorization: `Bearer ${token}`,\n                    }\n                }\n            );\n\n            if (!response.ok) {\n                throw new Error(ERROR_MESSAGES.FILE_DOWNLOAD_FAILED);\n            }\n\n            const blob = await response.blob();\n            const url = window.URL.createObjectURL(blob);\n\n            const link = document.createElement('a');\n            link.href = url;\n            link.download = `import-template.${format === 'csv' ? 'csv' : 'xlsx'}`;\n            document.body.appendChild(link);\n            link.click();\n            link.remove();\n            window.URL.revokeObjectURL(url);\n        } catch (error) {\n            console.error(ERROR_MESSAGES.DOWNLOAD_FAILED, error);\n        }\n    };\n\n    const customInstructions = importInstructionsData?.data?.custom ?? [];\n    const standardInstructions = importInstructionsData?.data?.standard ?? {};\n\n    return (\n        <div>\n            <div className={styles.SolidImportContextWrapper}>\n                {isLoading ? (\n                    <div className=\"solid-import-loading-state\">\n                        <SolidSpinner size={22} label=\"Loading import instructions\" />\n                    </div>\n                ) : isError ? (\n                    <div className='solid-import-empty-state'>\n                        <h4 className='text-center px-2'>Could not load import instructions</h4>\n                        <p>Try again or continue if you already know the expected format.</p>\n                    </div>\n                ) : (\n                    <div className={`solid-import-panel-grid ${customInstructions.length === 0 ? 'is-single-column' : ''}`}>\n                        <div className={`solid-import-panel solid-import-panel-main ${customInstructions.length > 0 ? 'has-side-panel' : 'is-full-width'}`}>\n                                <h5 className='solid-primary-black-text solid-import-section-title'>Standard Instructions</h5>\n                                <ol className='solid-import-instruction-list'>\n                                    <li>\n                                        <p className='font-medium solid-primary-black-text solid-import-instruction-title'>Download a starter template</p>\n                                        <div className='flex gap-3 flex-wrap'>\n                                            <SolidButton type=\"button\" variant=\"outline\" size=\"small\" leftIcon={<Download size={14} />} onClick={() => handleTemplateDownload('csv')}>\n                                                CSV Template\n                                            </SolidButton>\n                                            <SolidButton type=\"button\" variant=\"outline\" size=\"small\" leftIcon={<FileSpreadsheet size={14} />} onClick={() => handleTemplateDownload('excel')}>\n                                                Excel Template\n                                            </SolidButton>\n                                        </div>\n                                    </li>\n                                    {(() => {\n                                        return (\n                                            Object.entries(standardInstructions as Record<string, string[]>)\n                                                .map(([key, values]) => {\n                                                    if (!values?.length) return null;\n\n                                                    const titleCaseKey = key\n                                                        .replace(/([A-Z])/g, ' $1')\n                                                        .replace(/^./, str => str.toUpperCase());\n\n                                                    const rendered = (\n                                                        <li key={key} className='solid-import-instruction-item'>\n                                                            <p className='font-medium solid-primary-black-text mb-1 solid-import-instruction-title'>\n                                                                {titleCaseKey}\n                                                            </p>\n                                                            <div className='flex flex-wrap solid-import-instruction-copy'>\n                                                                {values.map((item: any, i) => (\n                                                                    <span key={i} className='mr-2'>\n                                                                        {typeof item === 'string'\n                                                                            ? item\n                                                                            : item?.fieldName\n                                                                                ? `${item.fieldName} (Regex: ${item.regexPattern})`\n                                                                                : JSON.stringify(item)}\n                                                                        {i < values.length - 1 ? ', ' : ''}\n                                                                    </span>\n                                                                ))}\n                                                            </div>\n                                                        </li>\n                                                    );\n                                                    return rendered;\n                                                })\n                                        );\n                                    })()}\n                                </ol>\n                        </div>\n                        {customInstructions.length > 0 &&\n                            <div className='solid-import-panel solid-import-panel-side'>\n                                <h5 className='solid-primary-black-text solid-import-section-title'>Custom Instructions</h5>\n                                <div className='solid-import-instruction-copy'>\n                                    {customInstructions.map((instruction: any, index: number) => (\n                                        <p key={index} className='solid-import-custom-instruction'>\n                                            {typeof instruction === \"string\" ? instruction : JSON.stringify(instruction)}\n                                        </p>\n                                    ))}\n                                </div>\n                            </div>\n                        }\n                    </div>\n                )}\n            </div>\n            <div className='solid-import-actions'>\n                <p className=\"solid-import-actions-copy\">Review the template guidance before uploading your file.</p>\n                <SolidButton type=\"button\" size='small' onClick={() => setImportStep(2)} rightIcon={<MoveRight size={14} />}>\n                    Continue\n                </SolidButton>\n            </div>\n        </div>\n    )\n}\n"]}
+{"version":3,"file":"SolidImportInstructions.js","sourceRoot":"","sources":["../../../../../src/components/core/common/SolidGenericImport/SolidImportInstructions.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Download, FileSpreadsheet, MoveRight } from 'lucide-react';\nimport styles from './SolidImport.module.css'\nimport { useLazyGetImportInstructionsQuery } from '../../../../redux/api/importTransactionApi';\nimport { useEffect } from 'react';\nimport { getSession } from \"../../../../adapters/auth/index\";\nimport { ERROR_MESSAGES } from '../../../../constants/error-messages';\nimport { env } from \"../../../../adapters/env\";\nimport { SolidButton, SolidSpinner } from '../../../shad-cn-ui';\n\nexport const SolidImportInstructions = ({ setImportStep, listViewMetaData }: any) => {\n    const [getImportInstructions, { data: importInstructionsData, isLoading, isError }] =\n        useLazyGetImportInstructionsQuery();\n\n    useEffect(() => {\n        if (listViewMetaData && listViewMetaData?.data?.solidView?.model?.id) {\n            getImportInstructions({ id: listViewMetaData?.data?.solidView?.model?.id });\n        }\n    }, [listViewMetaData, getImportInstructions]);\n\n    const handleTemplateDownload = async (format: 'csv' | 'excel') => {\n        const modelId = listViewMetaData?.data?.solidView?.model?.id;\n        if (!modelId) return;\n        try {\n            const session: any = await getSession();\n            const token = session?.user?.accessToken || \"\";\n            if (!token) {\n                throw new Error(ERROR_MESSAGES.NO_AUTH_TOKEN_FOUND);\n            }\n            const response = await fetch(\n                `${env(\"API_URL\")}/api/import-transaction/import-template/${modelId}/${format}`,\n                {\n                    method: 'GET',\n                    headers: {\n                        Authorization: `Bearer ${token}`,\n                    }\n                }\n            );\n\n            if (!response.ok) {\n                throw new Error(ERROR_MESSAGES.FILE_DOWNLOAD_FAILED);\n            }\n\n            const blob = await response.blob();\n            const url = window.URL.createObjectURL(blob);\n\n            const link = document.createElement('a');\n            link.href = url;\n            link.download = `import-template.${format === 'csv' ? 'csv' : 'xlsx'}`;\n            document.body.appendChild(link);\n            link.click();\n            link.remove();\n            window.URL.revokeObjectURL(url);\n        } catch (error) {\n            console.error(ERROR_MESSAGES.DOWNLOAD_FAILED, error);\n        }\n    };\n\n    const customInstructions = importInstructionsData?.data?.custom ?? [];\n    const standardInstructions = importInstructionsData?.data?.standard ?? {};\n\n    return (\n        <div>\n            <div className={styles.SolidImportContextWrapper}>\n                {isLoading ? (\n                    <div className=\"solid-import-loading-state\">\n                        <SolidSpinner size={22} label=\"Loading import instructions\" />\n                    </div>\n                ) : isError ? (\n                    <div className='solid-import-empty-state'>\n                        <h4 className='text-center px-2'>Could not load import instructions</h4>\n                        <p>Try again or continue if you already know the expected format.</p>\n                    </div>\n                ) : (\n                    <div className={`solid-import-panel-grid ${customInstructions.length === 0 ? 'is-single-column' : ''}`}>\n                        <div className={`solid-import-panel solid-import-panel-main ${customInstructions.length > 0 ? 'has-side-panel' : 'is-full-width'}`}>\n                                <h5 className='solid-import-section-title'>Standard Instructions</h5>\n                                <ol className='solid-import-instruction-list'>\n                                    <li>\n                                        <p className='solid-import-instruction-title'>Download a starter template</p>\n                                        <div className='solid-import-template-actions'>\n                                            <SolidButton type=\"button\" variant=\"outline\" size=\"sm\" leftIcon={<Download size={14} />} onClick={() => handleTemplateDownload('csv')}>\n                                                CSV Template\n                                            </SolidButton>\n                                            <SolidButton type=\"button\" variant=\"outline\" size=\"sm\" leftIcon={<FileSpreadsheet size={14} />} onClick={() => handleTemplateDownload('excel')}>\n                                                Excel Template\n                                            </SolidButton>\n                                        </div>\n                                    </li>\n                                    {(() => {\n                                        return (\n                                            Object.entries(standardInstructions as Record<string, string[]>)\n                                                .map(([key, values]) => {\n                                                    if (!values?.length) return null;\n\n                                                    const titleCaseKey = key\n                                                        .replace(/([A-Z])/g, ' $1')\n                                                        .replace(/^./, str => str.toUpperCase());\n\n                                                    const rendered = (\n                                                        <li key={key} className='solid-import-instruction-item'>\n                                                            <p className='solid-import-instruction-title'>\n                                                                {titleCaseKey}\n                                                            </p>\n                                                            <div className='solid-import-instruction-copy solid-import-inline-token-list'>\n                                                                {values.map((item: any, i) => (\n                                                                    <span key={i} className='solid-import-inline-token'>\n                                                                        {typeof item === 'string'\n                                                                            ? item\n                                                                            : item?.fieldName\n                                                                                ? `${item.fieldName} (Regex: ${item.regexPattern})`\n                                                                                : JSON.stringify(item)}\n                                                                    </span>\n                                                                ))}\n                                                            </div>\n                                                        </li>\n                                                    );\n                                                    return rendered;\n                                                })\n                                        );\n                                    })()}\n                                </ol>\n                        </div>\n                        {customInstructions.length > 0 &&\n                            <div className='solid-import-panel solid-import-panel-side'>\n                                <h5 className='solid-primary-black-text solid-import-section-title'>Custom Instructions</h5>\n                                <div className='solid-import-instruction-copy'>\n                                    {customInstructions.map((instruction: any, index: number) => (\n                                        <p key={index} className='solid-import-custom-instruction'>\n                                            {typeof instruction === \"string\" ? instruction : JSON.stringify(instruction)}\n                                        </p>\n                                    ))}\n                                </div>\n                            </div>\n                        }\n                    </div>\n                )}\n            </div>\n            <div className='solid-import-actions'>\n                <p className=\"solid-import-actions-copy\">Review the template guidance before uploading your file.</p>\n                <SolidButton type=\"button\" size='sm' onClick={() => setImportStep(2)} rightIcon={<MoveRight size={14} />}>\n                    Continue\n                </SolidButton>\n            </div>\n        </div>\n    )\n}\n"]}

package/dist/components/core/common/SolidGenericImport/SolidImportInstructions.tsx

@@ -73,15 +73,15 @@ export const SolidImportInstructions = ({ setImportStep, listViewMetaData }: any
                 ) : (
                     <div className={`solid-import-panel-grid ${customInstructions.length === 0 ? 'is-single-column' : ''}`}>
                         <div className={`solid-import-panel solid-import-panel-main ${customInstructions.length > 0 ? 'has-side-panel' : 'is-full-width'}`}>
-                                <h5 className='solid-primary-black-text solid-import-section-title'>Standard Instructions</h5>
+                                <h5 className='solid-import-section-title'>Standard Instructions</h5>
                                 <ol className='solid-import-instruction-list'>
                                     <li>
-                                        <p className='font-medium solid-primary-black-text solid-import-instruction-title'>Download a starter template</p>
-                                        <div className='flex gap-3 flex-wrap'>
-                                            <SolidButton type="button" variant="outline" size="small" leftIcon={<Download size={14} />} onClick={() => handleTemplateDownload('csv')}>
+                                        <p className='solid-import-instruction-title'>Download a starter template</p>
+                                        <div className='solid-import-template-actions'>
+                                            <SolidButton type="button" variant="outline" size="sm" leftIcon={<Download size={14} />} onClick={() => handleTemplateDownload('csv')}>
                                                 CSV Template
                                             </SolidButton>
-                                            <SolidButton type="button" variant="outline" size="small" leftIcon={<FileSpreadsheet size={14} />} onClick={() => handleTemplateDownload('excel')}>
+                                            <SolidButton type="button" variant="outline" size="sm" leftIcon={<FileSpreadsheet size={14} />} onClick={() => handleTemplateDownload('excel')}>
                                                 Excel Template
                                             </SolidButton>
                                         </div>
@@ -98,18 +98,17 @@ export const SolidImportInstructions = ({ setImportStep, listViewMetaData }: any
 
                                                     const rendered = (
                                                         <li key={key} className='solid-import-instruction-item'>
-                                                            <p className='font-medium solid-primary-black-text mb-1 solid-import-instruction-title'>
+                                                            <p className='solid-import-instruction-title'>
                                                                 {titleCaseKey}
                                                             </p>
-                                                            <div className='flex flex-wrap solid-import-instruction-copy'>
+                                                            <div className='solid-import-instruction-copy solid-import-inline-token-list'>
                                                                 {values.map((item: any, i) => (
-                                                                    <span key={i} className='mr-2'>
+                                                                    <span key={i} className='solid-import-inline-token'>
                                                                         {typeof item === 'string'
                                                                             ? item
                                                                             : item?.fieldName
                                                                                 ? `${item.fieldName} (Regex: ${item.regexPattern})`
                                                                                 : JSON.stringify(item)}
-                                                                        {i < values.length - 1 ? ', ' : ''}
                                                                     </span>
                                                                 ))}
                                                             </div>
@@ -138,7 +137,7 @@ export const SolidImportInstructions = ({ setImportStep, listViewMetaData }: any
             </div>
             <div className='solid-import-actions'>
                 <p className="solid-import-actions-copy">Review the template guidance before uploading your file.</p>
-                <SolidButton type="button" size='small' onClick={() => setImportStep(2)} rightIcon={<MoveRight size={14} />}>
+                <SolidButton type="button" size='sm' onClick={() => setImportStep(2)} rightIcon={<MoveRight size={14} />}>
                     Continue
                 </SolidButton>
             </div>

package/dist/components/core/extension/solid-core/media/card/MediaCardWidget.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MediaCardWidget.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/core/extension/solid-core/media/card/MediaCardWidget.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,0BAA0B,EAAE,MAAM,oCAAoC,CAAC;AA6ChF,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EACtC,OAAO,EACP,eAAe,EACf,eAAe,GAChB,EAAE,0BAA0B,2CAwF5B"}
+{"version":3,"file":"MediaCardWidget.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/core/extension/solid-core/media/card/MediaCardWidget.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,0BAA0B,EAAE,MAAM,oCAAoC,CAAC;AA6ChF,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EACtC,OAAO,EACP,eAAe,EACf,eAAe,GAChB,EAAE,0BAA0B,2CA0F5B"}

package/dist/components/core/extension/solid-core/media/card/MediaCardWidget.js

@@ -64,6 +64,6 @@ export default function MediaCardWidget(_a) {
         }
         window.open(fileUrl, "_blank", "noopener,noreferrer");
     };
-    return (_jsxs("div", { className: "solid-media-card-widget", children: [_jsxs("div", { className: "solid-media-card-widget__preview", onClick: handlePreviewClick, children: [fileUrl && isImage(mimeType) && (_jsx("img", { src: fileUrl, alt: fileName, className: "solid-media-card-widget__image" })), fileUrl && isVideo(mimeType) && (_jsx("video", { src: fileUrl, className: "solid-media-card-widget__image", muted: true })), (!fileUrl || (!isImage(mimeType) && !isVideo(mimeType))) && (_jsxs("div", { className: "solid-media-card-widget__file-fallback", children: [_jsx("span", { className: "solid-media-card-widget__file-ext", children: getExtension(rowData) }), _jsx("span", { className: "solid-media-card-widget__file-type", children: mimeLabel })] })), _jsxs("div", { className: "solid-media-card-widget__topline", children: [_jsx("span", { className: "solid-media-card-widget__chip", children: mimeLabel }), _jsx("span", { className: "solid-media-card-widget__size", children: formatFileSize(rowData === null || rowData === void 0 ? void 0 : rowData.fileSize) })] })] }), _jsxs("div", { className: "solid-media-card-widget__body", children: [_jsx("div", { className: "solid-media-card-widget__title", title: fileName, children: fileName }), _jsx("div", { className: "solid-media-card-widget__subtitle", title: renderText(rowData === null || rowData === void 0 ? void 0 : rowData.mimeType, "Unknown mime type"), children: renderText(rowData === null || rowData === void 0 ? void 0 : rowData.mimeType, "Unknown mime type") }), _jsxs("div", { className: "solid-media-card-widget__meta", children: [_jsxs("div", { className: "solid-media-card-widget__meta-item", children: [_jsx("span", { className: "solid-media-card-widget__meta-label", children: "Model" }), _jsx("span", { className: "solid-media-card-widget__meta-value", title: modelName, children: modelName })] }), _jsxs("div", { className: "solid-media-card-widget__meta-item", children: [_jsx("span", { className: "solid-media-card-widget__meta-label", children: "Field" }), _jsx("span", { className: "solid-media-card-widget__meta-value", title: fieldName, children: fieldName })] }), _jsxs("div", { className: "solid-media-card-widget__meta-item", children: [_jsx("span", { className: "solid-media-card-widget__meta-label", children: "Provider" }), _jsx("span", { className: "solid-media-card-widget__meta-value", title: providerName, children: providerName })] }), _jsxs("div", { className: "solid-media-card-widget__meta-item", children: [_jsx("span", { className: "solid-media-card-widget__meta-label", children: "Entity" }), _jsxs("span", { className: "solid-media-card-widget__meta-value", children: ["#", renderText(rowData === null || rowData === void 0 ? void 0 : rowData.entityId)] })] })] }), _jsxs("div", { className: "solid-media-card-widget__footer", children: [_jsxs("span", { className: "solid-media-card-widget__record-id", children: ["Media #", renderText(rowData === null || rowData === void 0 ? void 0 : rowData.id)] }), _jsx("span", { className: "solid-media-card-widget__kind", children: toTitleCase(mimeLabel) })] })] })] }));
+    return (_jsxs("div", { className: "solid-media-card-widget", children: [_jsxs("div", { className: "solid-media-card-widget__preview", onClick: handlePreviewClick, children: [fileUrl && isImage(mimeType) && (_jsx("img", { src: fileUrl, alt: fileName, className: "solid-media-card-widget__image" })), fileUrl && isVideo(mimeType) && (_jsx("video", { src: fileUrl, className: "solid-media-card-widget__image", muted: true })), (!fileUrl || (!isImage(mimeType) && !isVideo(mimeType))) && (_jsxs("div", { className: "solid-media-card-widget__file-fallback", children: [_jsx("span", { className: "solid-media-card-widget__file-ext", children: getExtension(rowData) }), _jsx("span", { className: "solid-media-card-widget__file-type", children: mimeLabel })] })), _jsx("span", { className: "solid-media-card-widget__chip solid-media-card-widget__badge solid-media-card-widget__badge--type", children: mimeLabel }), _jsx("span", { className: "solid-media-card-widget__size solid-media-card-widget__badge solid-media-card-widget__badge--size", children: formatFileSize(rowData === null || rowData === void 0 ? void 0 : rowData.fileSize) })] }), _jsxs("div", { className: "solid-media-card-widget__body", children: [_jsx("div", { className: "solid-media-card-widget__title", title: fileName, children: fileName }), _jsx("div", { className: "solid-media-card-widget__subtitle", title: renderText(rowData === null || rowData === void 0 ? void 0 : rowData.mimeType, "Unknown mime type"), children: renderText(rowData === null || rowData === void 0 ? void 0 : rowData.mimeType, "Unknown mime type") }), _jsxs("div", { className: "solid-media-card-widget__meta", children: [_jsxs("div", { className: "solid-media-card-widget__meta-item", children: [_jsx("span", { className: "solid-media-card-widget__meta-label", children: "Model" }), _jsx("span", { className: "solid-media-card-widget__meta-value", title: modelName, children: modelName })] }), _jsxs("div", { className: "solid-media-card-widget__meta-item", children: [_jsx("span", { className: "solid-media-card-widget__meta-label", children: "Field" }), _jsx("span", { className: "solid-media-card-widget__meta-value", title: fieldName, children: fieldName })] }), _jsxs("div", { className: "solid-media-card-widget__meta-item", children: [_jsx("span", { className: "solid-media-card-widget__meta-label", children: "Provider" }), _jsx("span", { className: "solid-media-card-widget__meta-value", title: providerName, children: providerName })] }), _jsxs("div", { className: "solid-media-card-widget__meta-item", children: [_jsx("span", { className: "solid-media-card-widget__meta-label", children: "Entity" }), _jsxs("span", { className: "solid-media-card-widget__meta-value", children: ["#", renderText(rowData === null || rowData === void 0 ? void 0 : rowData.entityId)] })] })] }), _jsxs("div", { className: "solid-media-card-widget__footer", children: [_jsxs("span", { className: "solid-media-card-widget__record-id", children: ["Media #", renderText(rowData === null || rowData === void 0 ? void 0 : rowData.id)] }), _jsx("span", { className: "solid-media-card-widget__kind", children: toTitleCase(mimeLabel) })] })] })] }));
 }
 //# sourceMappingURL=MediaCardWidget.js.map

package/dist/components/core/extension/solid-core/media/card/MediaCardWidget.js.map

@@ -1 +1 @@
-{"version":3,"file":"MediaCardWidget.js","sourceRoot":"","sources":["../../../../../../../src/components/core/extension/solid-core/media/card/MediaCardWidget.tsx"],"names":[],"mappings":"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","sourcesContent":["import { getMediaTypeFromUrl } from \"../../../../../../helpers/mediaType\";\nimport { SolidKanbanCardWidgetProps } from \"../../../../../../types/solid-core\";\n\nconst renderText = (value: any, fallback = \"--\") => {\n  if (value === null || value === undefined || value === \"\") {\n    return fallback;\n  }\n\n  return String(value);\n};\n\nconst formatFileSize = (value: any) => {\n  const size = Number(value);\n  if (!Number.isFinite(size) || size <= 0) return \"--\";\n  if (size >= 1024 * 1024 * 1024) return `${(size / (1024 * 1024 * 1024)).toFixed(1)} GB`;\n  if (size >= 1024 * 1024) return `${(size / (1024 * 1024)).toFixed(1)} MB`;\n  if (size >= 1024) return `${(size / 1024).toFixed(1)} KB`;\n  return `${size} B`;\n};\n\nconst toTitleCase = (value: any) => {\n  const text = renderText(value, \"\");\n  if (!text) return \"--\";\n  return text\n    .replace(/[_-]+/g, \" \")\n    .replace(/\\b\\w/g, (char) => char.toUpperCase());\n};\n\nconst getFileUrl = (rowData: any) => {\n  return rowData?._full_url || rowData?.fileUrl || rowData?.relativeUri || \"\";\n};\n\nconst getMimeType = (rowData: any) => {\n  return String(rowData?.mimeType || \"\").toLowerCase();\n};\n\nconst isImage = (mimeType: string) => mimeType.startsWith(\"image/\");\nconst isVideo = (mimeType: string) => mimeType.startsWith(\"video/\");\nconst isAudio = (mimeType: string) => mimeType.startsWith(\"audio/\");\n\nconst getExtension = (rowData: any) => {\n  const fileName = renderText(rowData?.originalFileName, \"\");\n  const raw = fileName.split(\".\").pop();\n  return raw ? raw.toUpperCase() : \"FILE\";\n};\n\nexport default function MediaCardWidget({\n  rowData,\n  setLightboxUrls,\n  setOpenLightbox,\n}: SolidKanbanCardWidgetProps) {\n  const fileUrl = getFileUrl(rowData);\n  const mimeType = getMimeType(rowData);\n  const fileName = renderText(rowData?.originalFileName, \"Untitled file\");\n  const providerName = renderText(rowData?.mediaStorageProviderMetadata?.displayName, \"Unknown provider\");\n  const modelName = renderText(rowData?.modelMetadata?.displayName, \"Unknown model\");\n  const fieldName = renderText(rowData?.fieldMetadata?.displayName, \"Unknown field\");\n  const mimeLabel = mimeType ? mimeType.split(\"/\")[0].toUpperCase() : \"FILE\";\n  const showPreview = isImage(mimeType) || isVideo(mimeType);\n\n  const handlePreviewClick = (event: React.MouseEvent) => {\n    event.stopPropagation();\n    if (!fileUrl) return;\n\n    if (showPreview) {\n      const mediaType = getMediaTypeFromUrl(fileUrl);\n      setLightboxUrls?.([{ src: fileUrl, type: mediaType !== \"image\" ? mediaType : undefined }]);\n      setOpenLightbox?.(true);\n      return;\n    }\n\n    window.open(fileUrl, \"_blank\", \"noopener,noreferrer\");\n  };\n\n  return (\n    <div className=\"solid-media-card-widget\">\n      <div className=\"solid-media-card-widget__preview\" onClick={handlePreviewClick}>\n        {fileUrl && isImage(mimeType) && (\n          <img\n            src={fileUrl}\n            alt={fileName}\n            className=\"solid-media-card-widget__image\"\n          />\n        )}\n        {fileUrl && isVideo(mimeType) && (\n          <video\n            src={fileUrl}\n            className=\"solid-media-card-widget__image\"\n            muted\n          />\n        )}\n        {(!fileUrl || (!isImage(mimeType) && !isVideo(mimeType))) && (\n          <div className=\"solid-media-card-widget__file-fallback\">\n            <span className=\"solid-media-card-widget__file-ext\">{getExtension(rowData)}</span>\n            <span className=\"solid-media-card-widget__file-type\">{mimeLabel}</span>\n          </div>\n        )}\n\n        <div className=\"solid-media-card-widget__topline\">\n          <span className=\"solid-media-card-widget__chip\">{mimeLabel}</span>\n          <span className=\"solid-media-card-widget__size\">{formatFileSize(rowData?.fileSize)}</span>\n        </div>\n      </div>\n\n      <div className=\"solid-media-card-widget__body\">\n        <div className=\"solid-media-card-widget__title\" title={fileName}>\n          {fileName}\n        </div>\n        <div className=\"solid-media-card-widget__subtitle\" title={renderText(rowData?.mimeType, \"Unknown mime type\")}>\n          {renderText(rowData?.mimeType, \"Unknown mime type\")}\n        </div>\n\n        <div className=\"solid-media-card-widget__meta\">\n          <div className=\"solid-media-card-widget__meta-item\">\n            <span className=\"solid-media-card-widget__meta-label\">Model</span>\n            <span className=\"solid-media-card-widget__meta-value\" title={modelName}>{modelName}</span>\n          </div>\n          <div className=\"solid-media-card-widget__meta-item\">\n            <span className=\"solid-media-card-widget__meta-label\">Field</span>\n            <span className=\"solid-media-card-widget__meta-value\" title={fieldName}>{fieldName}</span>\n          </div>\n          <div className=\"solid-media-card-widget__meta-item\">\n            <span className=\"solid-media-card-widget__meta-label\">Provider</span>\n            <span className=\"solid-media-card-widget__meta-value\" title={providerName}>{providerName}</span>\n          </div>\n          <div className=\"solid-media-card-widget__meta-item\">\n            <span className=\"solid-media-card-widget__meta-label\">Entity</span>\n            <span className=\"solid-media-card-widget__meta-value\">#{renderText(rowData?.entityId)}</span>\n          </div>\n        </div>\n\n        <div className=\"solid-media-card-widget__footer\">\n          <span className=\"solid-media-card-widget__record-id\">Media #{renderText(rowData?.id)}</span>\n          <span className=\"solid-media-card-widget__kind\">{toTitleCase(mimeLabel)}</span>\n        </div>\n      </div>\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"MediaCardWidget.js","sourceRoot":"","sources":["../../../../../../../src/components/core/extension/solid-core/media/card/MediaCardWidget.tsx"],"names":[],"mappings":"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","sourcesContent":["import { getMediaTypeFromUrl } from \"../../../../../../helpers/mediaType\";\nimport { SolidKanbanCardWidgetProps } from \"../../../../../../types/solid-core\";\n\nconst renderText = (value: any, fallback = \"--\") => {\n  if (value === null || value === undefined || value === \"\") {\n    return fallback;\n  }\n\n  return String(value);\n};\n\nconst formatFileSize = (value: any) => {\n  const size = Number(value);\n  if (!Number.isFinite(size) || size <= 0) return \"--\";\n  if (size >= 1024 * 1024 * 1024) return `${(size / (1024 * 1024 * 1024)).toFixed(1)} GB`;\n  if (size >= 1024 * 1024) return `${(size / (1024 * 1024)).toFixed(1)} MB`;\n  if (size >= 1024) return `${(size / 1024).toFixed(1)} KB`;\n  return `${size} B`;\n};\n\nconst toTitleCase = (value: any) => {\n  const text = renderText(value, \"\");\n  if (!text) return \"--\";\n  return text\n    .replace(/[_-]+/g, \" \")\n    .replace(/\\b\\w/g, (char) => char.toUpperCase());\n};\n\nconst getFileUrl = (rowData: any) => {\n  return rowData?._full_url || rowData?.fileUrl || rowData?.relativeUri || \"\";\n};\n\nconst getMimeType = (rowData: any) => {\n  return String(rowData?.mimeType || \"\").toLowerCase();\n};\n\nconst isImage = (mimeType: string) => mimeType.startsWith(\"image/\");\nconst isVideo = (mimeType: string) => mimeType.startsWith(\"video/\");\nconst isAudio = (mimeType: string) => mimeType.startsWith(\"audio/\");\n\nconst getExtension = (rowData: any) => {\n  const fileName = renderText(rowData?.originalFileName, \"\");\n  const raw = fileName.split(\".\").pop();\n  return raw ? raw.toUpperCase() : \"FILE\";\n};\n\nexport default function MediaCardWidget({\n  rowData,\n  setLightboxUrls,\n  setOpenLightbox,\n}: SolidKanbanCardWidgetProps) {\n  const fileUrl = getFileUrl(rowData);\n  const mimeType = getMimeType(rowData);\n  const fileName = renderText(rowData?.originalFileName, \"Untitled file\");\n  const providerName = renderText(rowData?.mediaStorageProviderMetadata?.displayName, \"Unknown provider\");\n  const modelName = renderText(rowData?.modelMetadata?.displayName, \"Unknown model\");\n  const fieldName = renderText(rowData?.fieldMetadata?.displayName, \"Unknown field\");\n  const mimeLabel = mimeType ? mimeType.split(\"/\")[0].toUpperCase() : \"FILE\";\n  const showPreview = isImage(mimeType) || isVideo(mimeType);\n\n  const handlePreviewClick = (event: React.MouseEvent) => {\n    event.stopPropagation();\n    if (!fileUrl) return;\n\n    if (showPreview) {\n      const mediaType = getMediaTypeFromUrl(fileUrl);\n      setLightboxUrls?.([{ src: fileUrl, type: mediaType !== \"image\" ? mediaType : undefined }]);\n      setOpenLightbox?.(true);\n      return;\n    }\n\n    window.open(fileUrl, \"_blank\", \"noopener,noreferrer\");\n  };\n\n  return (\n    <div className=\"solid-media-card-widget\">\n      <div className=\"solid-media-card-widget__preview\" onClick={handlePreviewClick}>\n        {fileUrl && isImage(mimeType) && (\n          <img\n            src={fileUrl}\n            alt={fileName}\n            className=\"solid-media-card-widget__image\"\n          />\n        )}\n        {fileUrl && isVideo(mimeType) && (\n          <video\n            src={fileUrl}\n            className=\"solid-media-card-widget__image\"\n            muted\n          />\n        )}\n        {(!fileUrl || (!isImage(mimeType) && !isVideo(mimeType))) && (\n          <div className=\"solid-media-card-widget__file-fallback\">\n            <span className=\"solid-media-card-widget__file-ext\">{getExtension(rowData)}</span>\n            <span className=\"solid-media-card-widget__file-type\">{mimeLabel}</span>\n          </div>\n        )}\n\n        <span className=\"solid-media-card-widget__chip solid-media-card-widget__badge solid-media-card-widget__badge--type\">\n          {mimeLabel}\n        </span>\n        <span className=\"solid-media-card-widget__size solid-media-card-widget__badge solid-media-card-widget__badge--size\">\n          {formatFileSize(rowData?.fileSize)}\n        </span>\n      </div>\n\n      <div className=\"solid-media-card-widget__body\">\n        <div className=\"solid-media-card-widget__title\" title={fileName}>\n          {fileName}\n        </div>\n        <div className=\"solid-media-card-widget__subtitle\" title={renderText(rowData?.mimeType, \"Unknown mime type\")}>\n          {renderText(rowData?.mimeType, \"Unknown mime type\")}\n        </div>\n\n        <div className=\"solid-media-card-widget__meta\">\n          <div className=\"solid-media-card-widget__meta-item\">\n            <span className=\"solid-media-card-widget__meta-label\">Model</span>\n            <span className=\"solid-media-card-widget__meta-value\" title={modelName}>{modelName}</span>\n          </div>\n          <div className=\"solid-media-card-widget__meta-item\">\n            <span className=\"solid-media-card-widget__meta-label\">Field</span>\n            <span className=\"solid-media-card-widget__meta-value\" title={fieldName}>{fieldName}</span>\n          </div>\n          <div className=\"solid-media-card-widget__meta-item\">\n            <span className=\"solid-media-card-widget__meta-label\">Provider</span>\n            <span className=\"solid-media-card-widget__meta-value\" title={providerName}>{providerName}</span>\n          </div>\n          <div className=\"solid-media-card-widget__meta-item\">\n            <span className=\"solid-media-card-widget__meta-label\">Entity</span>\n            <span className=\"solid-media-card-widget__meta-value\">#{renderText(rowData?.entityId)}</span>\n          </div>\n        </div>\n\n        <div className=\"solid-media-card-widget__footer\">\n          <span className=\"solid-media-card-widget__record-id\">Media #{renderText(rowData?.id)}</span>\n          <span className=\"solid-media-card-widget__kind\">{toTitleCase(mimeLabel)}</span>\n        </div>\n      </div>\n    </div>\n  );\n}\n"]}

package/dist/components/core/extension/solid-core/media/card/MediaCardWidget.tsx

@@ -96,10 +96,12 @@ export default function MediaCardWidget({
           </div>
         )}
 
-        <div className="solid-media-card-widget__topline">
-          <span className="solid-media-card-widget__chip">{mimeLabel}</span>
-          <span className="solid-media-card-widget__size">{formatFileSize(rowData?.fileSize)}</span>
-        </div>
+        <span className="solid-media-card-widget__chip solid-media-card-widget__badge solid-media-card-widget__badge--type">
+          {mimeLabel}
+        </span>
+        <span className="solid-media-card-widget__size solid-media-card-widget__badge solid-media-card-widget__badge--size">
+          {formatFileSize(rowData?.fileSize)}
+        </span>
       </div>
 
       <div className="solid-media-card-widget__body">

package/dist/components/core/extension/solid-core/mqMessage/kanban/MqMessageKanbanCardWidget.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MqMessageKanbanCardWidget.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/core/extension/solid-core/mqMessage/kanban/MqMessageKanbanCardWidget.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,0BAA0B,EAAE,MAAM,oCAAoC,CAAC;AA0GhF,MAAM,CAAC,OAAO,UAAU,yBAAyB,CAAC,EAChD,OAAO,GACR,EAAE,0BAA0B,2CAoF5B"}
+{"version":3,"file":"MqMessageKanbanCardWidget.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/core/extension/solid-core/mqMessage/kanban/MqMessageKanbanCardWidget.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,0BAA0B,EAAE,MAAM,oCAAoC,CAAC;AA0GhF,MAAM,CAAC,OAAO,UAAU,yBAAyB,CAAC,EAChD,OAAO,GACR,EAAE,0BAA0B,2CAsF5B"}

package/dist/components/core/extension/solid-core/mqMessage/kanban/MqMessageKanbanCardWidget.js

@@ -123,6 +123,6 @@ export default function MqMessageKanbanCardWidget(_a) {
         _b["--mq-card-chip-text"] = tone.chipText,
         _b["--mq-card-avatar-bg"] = tone.avatarBg,
         _b);
-    return (_jsxs("div", { className: "mq-message-kanban-card", style: cardStyle, children: [_jsx("div", { className: "mq-message-kanban-card__accent" }), _jsxs("div", { className: "mq-message-kanban-card__eyebrow", children: [_jsx("span", { className: "mq-message-kanban-card__chip", children: chipLabel }), _jsxs("span", { className: "mq-message-kanban-card__record-id", children: ["#", renderText(rowData === null || rowData === void 0 ? void 0 : rowData.id)] })] }), _jsx("div", { className: "mq-message-kanban-card__title", title: renderText(rowData === null || rowData === void 0 ? void 0 : rowData.messageId), children: renderText(rowData === null || rowData === void 0 ? void 0 : rowData.messageId, "Message without identifier") }), _jsx("div", { className: "mq-message-kanban-card__subtitle", title: brokerLabel, children: brokerLabel }), _jsxs("div", { className: "mq-message-kanban-card__metrics", children: [_jsxs("div", { className: "mq-message-kanban-card__metric", children: [_jsx("div", { className: "mq-message-kanban-card__metric-label", children: "Retry" }), _jsx("div", { className: "mq-message-kanban-card__metric-value", children: retryLabel })] }), _jsxs("div", { className: "mq-message-kanban-card__metric", children: [_jsx("div", { className: "mq-message-kanban-card__metric-label", children: "Elapsed" }), _jsx("div", { className: "mq-message-kanban-card__metric-value", children: formatDuration(rowData === null || rowData === void 0 ? void 0 : rowData.elapsedMillis) })] }), _jsxs("div", { className: "mq-message-kanban-card__metric", children: [_jsx("div", { className: "mq-message-kanban-card__metric-label", children: "Parent" }), _jsx("div", { className: "mq-message-kanban-card__metric-value", title: parentEntity, children: parentEntity })] }), _jsxs("div", { className: "mq-message-kanban-card__metric", children: [_jsx("div", { className: "mq-message-kanban-card__metric-label", children: "Broker" }), _jsx("div", { className: "mq-message-kanban-card__metric-value", title: brokerLabel, children: brokerLabel })] })] }), _jsxs("div", { className: "mq-message-kanban-card__footer", children: [_jsxs("div", { className: "mq-message-kanban-card__timeline", children: [_jsxs("div", { className: "mq-message-kanban-card__timeline-item", children: [_jsx("span", { className: "mq-message-kanban-card__timeline-label", children: "Started" }), _jsx("span", { className: "mq-message-kanban-card__timeline-value", children: formatDate(rowData === null || rowData === void 0 ? void 0 : rowData.startedAt) })] }), _jsxs("div", { className: "mq-message-kanban-card__timeline-item", children: [_jsx("span", { className: "mq-message-kanban-card__timeline-label", children: "Finished" }), _jsx("span", { className: "mq-message-kanban-card__timeline-value", children: formatDate(rowData === null || rowData === void 0 ? void 0 : rowData.finishedAt) })] })] }), _jsx("div", { className: "mq-message-kanban-card__avatar", title: parentEntity, children: getInitials(rowData === null || rowData === void 0 ? void 0 : rowData.parentEntity, rowData === null || rowData === void 0 ? void 0 : rowData.messageBroker, rowData === null || rowData === void 0 ? void 0 : rowData.messageType) })] }), hasError && (_jsxs("div", { className: "mq-message-kanban-card__error", title: renderText(rowData === null || rowData === void 0 ? void 0 : rowData.error), children: [_jsx("span", { className: "mq-message-kanban-card__error-label", children: "Error" }), _jsx("span", { className: "mq-message-kanban-card__error-value", children: errorPreview })] }))] }));
+    return (_jsxs("div", { className: "mq-message-kanban-card", style: cardStyle, children: [_jsx("div", { className: "mq-message-kanban-card__accent" }), _jsxs("span", { className: "mq-message-kanban-card__record-id mq-message-kanban-card__badge mq-message-kanban-card__badge--record-id", children: ["#", renderText(rowData === null || rowData === void 0 ? void 0 : rowData.id)] }), _jsx("div", { className: "mq-message-kanban-card__eyebrow", children: _jsx("span", { className: "mq-message-kanban-card__chip", children: chipLabel }) }), _jsx("div", { className: "mq-message-kanban-card__title", title: renderText(rowData === null || rowData === void 0 ? void 0 : rowData.messageId), children: renderText(rowData === null || rowData === void 0 ? void 0 : rowData.messageId, "Message without identifier") }), _jsx("div", { className: "mq-message-kanban-card__subtitle", title: brokerLabel, children: brokerLabel }), _jsxs("div", { className: "mq-message-kanban-card__metrics", children: [_jsxs("div", { className: "mq-message-kanban-card__metric", children: [_jsx("div", { className: "mq-message-kanban-card__metric-label", children: "Retry" }), _jsx("div", { className: "mq-message-kanban-card__metric-value", children: retryLabel })] }), _jsxs("div", { className: "mq-message-kanban-card__metric", children: [_jsx("div", { className: "mq-message-kanban-card__metric-label", children: "Elapsed" }), _jsx("div", { className: "mq-message-kanban-card__metric-value", children: formatDuration(rowData === null || rowData === void 0 ? void 0 : rowData.elapsedMillis) })] }), _jsxs("div", { className: "mq-message-kanban-card__metric", children: [_jsx("div", { className: "mq-message-kanban-card__metric-label", children: "Parent" }), _jsx("div", { className: "mq-message-kanban-card__metric-value", title: parentEntity, children: parentEntity })] }), _jsxs("div", { className: "mq-message-kanban-card__metric", children: [_jsx("div", { className: "mq-message-kanban-card__metric-label", children: "Broker" }), _jsx("div", { className: "mq-message-kanban-card__metric-value", title: brokerLabel, children: brokerLabel })] })] }), _jsxs("div", { className: "mq-message-kanban-card__footer", children: [_jsxs("div", { className: "mq-message-kanban-card__timeline", children: [_jsxs("div", { className: "mq-message-kanban-card__timeline-item", children: [_jsx("span", { className: "mq-message-kanban-card__timeline-label", children: "Started" }), _jsx("span", { className: "mq-message-kanban-card__timeline-value", children: formatDate(rowData === null || rowData === void 0 ? void 0 : rowData.startedAt) })] }), _jsxs("div", { className: "mq-message-kanban-card__timeline-item", children: [_jsx("span", { className: "mq-message-kanban-card__timeline-label", children: "Finished" }), _jsx("span", { className: "mq-message-kanban-card__timeline-value", children: formatDate(rowData === null || rowData === void 0 ? void 0 : rowData.finishedAt) })] })] }), _jsx("div", { className: "mq-message-kanban-card__avatar", title: parentEntity, children: getInitials(rowData === null || rowData === void 0 ? void 0 : rowData.parentEntity, rowData === null || rowData === void 0 ? void 0 : rowData.messageBroker, rowData === null || rowData === void 0 ? void 0 : rowData.messageType) })] }), hasError && (_jsxs("div", { className: "mq-message-kanban-card__error", title: renderText(rowData === null || rowData === void 0 ? void 0 : rowData.error), children: [_jsx("span", { className: "mq-message-kanban-card__error-label", children: "Error" }), _jsx("span", { className: "mq-message-kanban-card__error-value", children: errorPreview })] }))] }));
 }
 //# sourceMappingURL=MqMessageKanbanCardWidget.js.map