@topconsultnpm/sdkui-react 6.19.0-dev2.2 → 6.19.0-test.1

package/lib/components/sidebar/TMSidebar.js

@@ -6,31 +6,31 @@ import { ScrollView } from 'devextreme-react';
 import { TMColors } from '../../utils/theme';
 import TMSpinner from '../base/TMSpinner';
 import { TMExceptionBoxManager } from '../base/TMPopUp';
-const StyledTMSidebarContainer = styled.div `
-    top: ${props => props.$top || '53px'};
-    left: ${props => props.$left || '0px'};
-    width: ${props => props.$width || '50px'};
-    height: ${props => props.$height || 'calc(100% - 88px)'};
-    background: ${() => TMColors.primaryColor} 0% 0% no-repeat padding-box;
-    box-shadow: 0px 3px 6px #00000029;
-    border-radius: 0;
-    opacity: 1;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    align-items: center;
-    padding: 10px 0px;
-    position: absolute;
-    border-top-right-radius: 10px;
-    border-bottom-right-radius: 10px;
-    overflow: hidden;
+const StyledTMSidebarContainer = styled.div `
+    top: ${props => props.$top || '53px'};
+    left: ${props => props.$left || '0px'};
+    width: ${props => props.$width || '50px'};
+    height: ${props => props.$height || 'calc(100% - 88px)'};
+    background: ${() => TMColors.primaryColor} 0% 0% no-repeat padding-box;
+    box-shadow: 0px 3px 6px #00000029;
+    border-radius: 0;
+    opacity: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px 0px;
+    position: absolute;
+    border-top-right-radius: 10px;
+    border-bottom-right-radius: 10px;
+    overflow: hidden;
 `;
-const FixedBottomContainer = styled.div `
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    position: relative;
-    bottom: 10px;
+const FixedBottomContainer = styled.div `
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    position: relative;
+    bottom: 10px;
 `;
 const TMSidebar = ({ items, height, borderRightRadius, left, top, width }) => {
     const [canArchive, setCanArhive] = useState(false);

package/lib/components/sidebar/TMSidebarItem.js

@@ -10,27 +10,27 @@ var ApplicationThemeColor;
     // DESIGNER = '#6b173e'
     ApplicationThemeColor["DESIGNER"] = "#482234";
 })(ApplicationThemeColor || (ApplicationThemeColor = {}));
-const StyledTMSidebarItemContainer = styled.div `
-    margin-bottom: 10px;
-    background-color: transparent;
-    padding: 5px 0 0 5px;
-    transition: all 200ms ease;
-    user-select: none;
-    cursor: pointer;
-    color:  ${(props) => props.$isSelected ? TMColors.primaryColor : '#fff'};
-    background-color: ${props => props.$isSelected ? 'white' : 'transparent'} ;
-    border-radius: 3px;
-    width: 32px;
-    height: 32px;
-
-    p {
-        display: none;
-    }
-
-    &:hover {
-        background-color: ${props => !props.$isApp && 'white'};
-        color: ${props => !props.$isApp && TMColors.primaryColor};
-    }
+const StyledTMSidebarItemContainer = styled.div `
+    margin-bottom: 10px;
+    background-color: transparent;
+    padding: 5px 0 0 5px;
+    transition: all 200ms ease;
+    user-select: none;
+    cursor: pointer;
+    color:  ${(props) => props.$isSelected ? TMColors.primaryColor : '#fff'};
+    background-color: ${props => props.$isSelected ? 'white' : 'transparent'} ;
+    border-radius: 3px;
+    width: 32px;
+    height: 32px;
+
+    p {
+        display: none;
+    }
+
+    &:hover {
+        background-color: ${props => !props.$isApp && 'white'};
+        color: ${props => !props.$isApp && TMColors.primaryColor};
+    }
 `;
 const TMSidebarItem = (props) => {
     let app = SDK_Globals.appModule;

package/lib/components/wizard/TMStepIndicator.js

@@ -9,130 +9,130 @@ const COLOR_ERROR = '#d32f2f'; // Rosso per l'errore
 const RHOMBUS_SIZE = 35;
 const LINE_HEIGHT = 3;
 // Contenitore principale, centrato orizzontalmente
-const IndicatorContainer = styled.div `
-    display: flex;
-    flex-direction: column;
-    align-items: center; 
-    padding: 20px 0 20px 0;
-    width: 100%;
-    flex-shrink: 0;
+const IndicatorContainer = styled.div `
+    display: flex;
+    flex-direction: column;
+    align-items: center; 
+    padding: 20px 0 20px 0;
+    width: 100%;
+    flex-shrink: 0;
 `;
 // Titolo dello step corrente sotto la barra
 // AGGIUNGIAMO STILE PER IL TITOLO CON ERRORE
-const StepTitle = styled.div `
-    font-weight: bold;
-    text-align: center;
-    font-size: 1.3em;
-    padding-top: 15px;
-    
-    // Cambia colore del titolo se lo step corrente ha un errore
-    color: ${props => (props.$isError ? COLOR_ERROR : COLOR_PRIMARY)}; 
-    
-    // Styling per l'icona di errore accanto al titolo (se presente)
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    
-    .error-icon {
-        margin-left: 8px;
-        font-size: 1.1em;
-    }
+const StepTitle = styled.div `
+    font-weight: bold;
+    text-align: center;
+    font-size: 1.3em;
+    padding-top: 15px;
+    
+    // Cambia colore del titolo se lo step corrente ha un errore
+    color: ${props => (props.$isError ? COLOR_ERROR : COLOR_PRIMARY)}; 
+    
+    // Styling per l'icona di errore accanto al titolo (se presente)
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    
+    .error-icon {
+        margin-left: 8px;
+        font-size: 1.1em;
+    }
 `;
-const StepBar = styled.div `
-    display: flex;
-    justify-content: space-between; 
-    align-items: center;
-    width: 80%; 
-    max-width: 600px;
-    position: relative;
-    padding: 0;
+const StepBar = styled.div `
+    display: flex;
+    justify-content: space-between; 
+    align-items: center;
+    width: 80%; 
+    max-width: 600px;
+    position: relative;
+    padding: 0;
 `;
 // Contenitore per le linee (omesso per brevità, rimane invariato)
-const LineContainer = styled.div `
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    height: ${LINE_HEIGHT}px;
-    z-index: 1;
-
-    /* Calcoliamo il padding per escludere metà rombo da ogni lato */
-    left: ${RHOMBUS_SIZE / 2}px;
-    right: ${RHOMBUS_SIZE / 2}px;
-    width: ${props => props.$numSteps > 1 ? `calc(100% - ${RHOMBUS_SIZE}px)` : '0'};
+const LineContainer = styled.div `
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    height: ${LINE_HEIGHT}px;
+    z-index: 1;
+
+    /* Calcoliamo il padding per escludere metà rombo da ogni lato */
+    left: ${RHOMBUS_SIZE / 2}px;
+    right: ${RHOMBUS_SIZE / 2}px;
+    width: ${props => props.$numSteps > 1 ? `calc(100% - ${RHOMBUS_SIZE}px)` : '0'};
 `;
 // Linea di connessione grigia (base) (omesso per brevità, rimane invariato)
-const BaseLine = styled.div `
-    height: 100%;
-    background-color: ${COLOR_SECONDARY};
-    width: 100%;
-    position: absolute;
-    top: 0;
-    left: 0;
+const BaseLine = styled.div `
+    height: 100%;
+    background-color: ${COLOR_SECONDARY};
+    width: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
 `;
 // Linea di avanzamento colorata (progress bar) (omesso per brevità, rimane invariato)
-const ProgressLine = styled.div `
-    height: 100%;
-    background-color: ${COLOR_PRIMARY};
-    width: ${props => props.$widthPercentage}%;
-    transition: width 0.3s ease-in-out;
-    position: absolute;
-    left: 0;
-    top: 0;
-    z-index: 2;
+const ProgressLine = styled.div `
+    height: 100%;
+    background-color: ${COLOR_PRIMARY};
+    width: ${props => props.$widthPercentage}%;
+    transition: width 0.3s ease-in-out;
+    position: absolute;
+    left: 0;
+    top: 0;
+    z-index: 2;
 `;
 // Stile per ogni singolo step (elemento flex) (omesso per brevità, rimane invariato)
-const StepItem = styled.div `
-    display: flex;
-    justify-content: center; 
-    align-items: center;
-    position: relative;
-    z-index: 2; 
-    flex-basis: auto; 
+const StepItem = styled.div `
+    display: flex;
+    justify-content: center; 
+    align-items: center;
+    position: relative;
+    z-index: 2; 
+    flex-basis: auto; 
 `;
 // Il Rombo (il contenitore esterno ruotato)
 // AGGIUNGIAMO $isError
-const StepRhombusContainer = styled.div `
-    width: ${RHOMBUS_SIZE}px;
-    height: ${RHOMBUS_SIZE}px;
-    transform: rotate(45deg);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-shrink: 0;
-    
-    // Gestione colore/bordo in base allo stato di errore
-    background-color: ${props => (props.$isCurrent ? (props.$isError ? COLOR_ERROR : COLOR_PRIMARY) : 'white')};
-    
-    // Bordo in caso di errore (se non completato e non corrente)
+const StepRhombusContainer = styled.div `
+    width: ${RHOMBUS_SIZE}px;
+    height: ${RHOMBUS_SIZE}px;
+    transform: rotate(45deg);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-shrink: 0;
+    
+    // Gestione colore/bordo in base allo stato di errore
+    background-color: ${props => (props.$isCurrent ? (props.$isError ? COLOR_ERROR : COLOR_PRIMARY) : 'white')};
+    
+    // Bordo in caso di errore (se non completato e non corrente)
     border: 2px solid ${props => (props.$isCurrent ? 'transparent' :
     props.$isError ? COLOR_ERROR :
-        props.$isCompleted ? COLOR_PRIMARY : COLOR_SECONDARY)};
-    
-    box-shadow: ${props => (props.$isCompleted && !props.$isCurrent ? `0 0 0 1px ${COLOR_PRIMARY}` : 'none')};
-    
-    ${props => props.$isCurrent && `
-        border: none; 
-        box-shadow: 0 0 0 1px ${props.$isError ? COLOR_ERROR : COLOR_PRIMARY};
-    `}
+        props.$isCompleted ? COLOR_PRIMARY : COLOR_SECONDARY)};
+    
+    box-shadow: ${props => (props.$isCompleted && !props.$isCurrent ? `0 0 0 1px ${COLOR_PRIMARY}` : 'none')};
+    
+    ${props => props.$isCurrent && `
+        border: none; 
+        box-shadow: 0 0 0 1px ${props.$isError ? COLOR_ERROR : COLOR_PRIMARY};
+    `}
 `;
 // Contenuto interno ruotato
 // AGGIUNGIAMO $isError
-const StepContent = styled.div `
-    transform: rotate(-45deg); 
-    font-weight: bold;
-    font-size: 1em;
-    display: flex;
-    align-items: center;
-    
-    // Colore del testo/icona
+const StepContent = styled.div `
+    transform: rotate(-45deg); 
+    font-weight: bold;
+    font-size: 1em;
+    display: flex;
+    align-items: center;
+    
+    // Colore del testo/icona
     color: ${props => (props.$isCurrent ? 'white' :
     props.$isError ? COLOR_ERROR :
-        props.$isCompleted ? COLOR_PRIMARY : COLOR_SECONDARY)};
-    
-    /* Regola la dimensione dell'icona Check per lo step completato */
-    .MuiSvgIcon-root {
-        font-size: 18px; 
-    }
+        props.$isCompleted ? COLOR_PRIMARY : COLOR_SECONDARY)};
+    
+    /* Regola la dimensione dell'icona Check per lo step completato */
+    .MuiSvgIcon-root {
+        font-size: 18px; 
+    }
 `;
 const StepIndicator = ({ steps, currentStepIndex, stepValidityStatuses }) => {
     const numberOfSections = steps.length - 1;

package/lib/components/wizard/TMWizard.js

@@ -5,40 +5,40 @@ import styled from 'styled-components';
 import { ResultTypes } from '@topconsultnpm/sdk-ts';
 import TMButton from '../base/TMButton';
 import StepIndicator from './TMStepIndicator';
-const WizardContainer = styled.div `
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    background-color: white; 
-    padding: 8px;
+const WizardContainer = styled.div `
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    background-color: white; 
+    padding: 8px;
 `;
-const WizardHeader = styled.div `
-    flex-shrink: 0;
-    padding: 0 20px 20px 20px;
+const WizardHeader = styled.div `
+    flex-shrink: 0;
+    padding: 0 20px 20px 20px;
 `;
-const WizardTitle = styled.h2 `
-    font-size: 1.3em;
-    font-weight: bold;
-    margin: 0;
-    color: #333;
+const WizardTitle = styled.h2 `
+    font-size: 1.3em;
+    font-weight: bold;
+    margin: 0;
+    color: #333;
 `;
-const WizardDescription = styled.p `
-    font-size: 1em; 
-    margin-top: 5px;
-    color: #666; 
+const WizardDescription = styled.p `
+    font-size: 1em; 
+    margin-top: 5px;
+    color: #666; 
 `;
-const StepContent = styled.div `
-    flex-grow: 1; 
-    overflow-y: auto;
-    padding: 20px;
+const StepContent = styled.div `
+    flex-grow: 1; 
+    overflow-y: auto;
+    padding: 20px;
 `;
-const ControlsContainer = styled.div `
-    flex-shrink: 0;
-    display: flex;
-    justify-content: flex-end;
-    gap: 15px;
-    padding: 15px 20px;
-    border-top: 1px solid #eee; 
+const ControlsContainer = styled.div `
+    flex-shrink: 0;
+    display: flex;
+    justify-content: flex-end;
+    gap: 15px;
+    padding: 15px 20px;
+    border-top: 1px solid #eee; 
 `;
 const TMWizard = ({ steps, validateOnlyCurrentStep = true, onClose, onFinish, initialData, title, description }) => {
     const [currentStep, setCurrentStep] = useState(0);

package/lib/helper/SDKUI_Globals.d.ts

@@ -32,7 +32,6 @@ export declare class DataGridSettings {
 }
 export declare class ThemeSettings {
     fontSize: string;
-    fontFamily: string;
     gridSettings: DataGridSettings;
     constructor(skipCssUpdate?: boolean);
     /**
@@ -41,7 +40,6 @@ export declare class ThemeSettings {
      */
     toJSON(): {
         fontSize: string;
-        fontFamily: string;
         gridSettings: DataGridSettings;
     };
 }

package/lib/helper/SDKUI_Globals.js

@@ -36,9 +36,8 @@ export class UserSettings {
         // Ensure userID and archiveID are set
         settings.userID = userID;
         settings.archiveID = archiveID;
-        // Update the CSS variables for font size and font family
+        // Update the CSS variable for font size
         document.documentElement.style.setProperty('--base-font-size', settings.themeSettings.fontSize);
-        document.documentElement.style.setProperty('--base-font-family', settings.themeSettings.fontFamily);
         // Wrap the settings object in a Proxy to intercept property updates
         const proxiedSettings = createProxy(settings, UserSettings.SaveSettings);
         // Automatically set the global userSettings
@@ -69,12 +68,10 @@ export class DataGridSettings {
 export class ThemeSettings {
     constructor(skipCssUpdate = false) {
         this.fontSize = FontSize.defaultFontSizeInPixel;
-        this.fontFamily = 'Inter';
         this.gridSettings = new DataGridSettings();
         // Automatically update the CSS variable for font size
         if (!skipCssUpdate) {
             document.documentElement.style.setProperty('--base-font-size', this.fontSize);
-            document.documentElement.style.setProperty('--base-font-family', this.fontFamily);
         }
     }
     /**
@@ -84,7 +81,6 @@ export class ThemeSettings {
     toJSON() {
         return {
             fontSize: this.fontSize,
-            fontFamily: this.fontFamily,
             gridSettings: this.gridSettings,
         };
     }
@@ -152,10 +148,6 @@ function createProxy(obj, saveCallback, rootObj) {
             if (prop === 'fontSize' && root instanceof UserSettings) {
                 document.documentElement.style.setProperty('--base-font-size', value);
             }
-            // Handle specific property (fontFamily) updates
-            if (prop === 'fontFamily' && root instanceof UserSettings) {
-                document.documentElement.style.setProperty('--base-font-family', value);
-            }
             // Handle specific property (invoiceRetrieveFormat, orderRetrieveFormat) updates
             if ((prop === 'invoiceRetrieveFormat' || prop === 'orderRetrieveFormat') && root instanceof UserSettings) {
                 clearDcmtsFileCache();

package/lib/helper/TMIcons.js

@@ -446,7 +446,7 @@ function IconRecursiveOps(props) { return (_jsxs("svg", { fontSize: props.fontSi
 function IconSearchCheck(props) { return (_jsxs("svg", { fontSize: props.fontSize ? props.fontSize : FONTSIZE, fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, viewBox: "0 0 24 24", height: "1em", width: "1em", ...props, children: [" ", _jsx("path", { d: "M8 11l2 2 4-4" }), " ", _jsx("path", { d: "M19 11 A8 8 0 0 1 11 19 A8 8 0 0 1 3 11 A8 8 0 0 1 19 11 z" }), " ", _jsx("path", { d: "M21 21l-4.3-4.3" }), " "] })); }
 function IconSignature(props) { return (_jsxs("svg", { fontSize: props.fontSize ? props.fontSize : FONTSIZE, fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, viewBox: "0 0 24 24", height: "1em", width: "1em", ...props, children: [" ", _jsx("path", { d: "M20 19.5v.5a2 2 0 01-2 2H6a2 2 0 01-2-2V4a2 2 0 012-2h8.5L18 5.5M8 18h1" }), " ", _jsx("path", { d: "M18.42 9.61a2.1 2.1 0 112.97 2.97L16.95 17 13 18l.99-3.95 4.43-4.44z" }), " "] })); }
 function IconSignaturePencil(props) {
-    return (_jsx("svg", { fontSize: props?.fontSize ? props.fontSize : FONTSIZE, viewBox: "0 0 40 40", fill: "currentColor", height: "1em", width: "1em", ...props, children: _jsx("path", { d: "M20,7.9l11.4,10.6l-8.7,13L1.1,39.9l10.2-9.6c1.7,0.6,4.2,0.1,5.5-1.4\r\n           c1.7-1.9,1.6-4.9-0.3-6.6c-1.9-1.7-5-1.7-6.8,0.2c-1.3,1.4-1.7,3.9-1,5.6l0,0L0.5,39.2\r\n           c1.5-6.5,5.8-23.3,5.8-23.3l0,0L20,7.9z\r\n           M28.5,0l10.8,10.4l-5.9,6.1L22.3,5.8L28.5,0z" }) }));
+    return (_jsx("svg", { fontSize: props?.fontSize ? props.fontSize : FONTSIZE, viewBox: "0 0 40 40", fill: "currentColor", height: "1em", width: "1em", ...props, children: _jsx("path", { d: "M20,7.9l11.4,10.6l-8.7,13L1.1,39.9l10.2-9.6c1.7,0.6,4.2,0.1,5.5-1.4\n           c1.7-1.9,1.6-4.9-0.3-6.6c-1.9-1.7-5-1.7-6.8,0.2c-1.3,1.4-1.7,3.9-1,5.6l0,0L0.5,39.2\n           c1.5-6.5,5.8-23.3,5.8-23.3l0,0L20,7.9z\n           M28.5,0l10.8,10.4l-5.9,6.1L22.3,5.8L28.5,0z" }) }));
 }
 function IconSavedQuery(props) { return (_jsxs("svg", { fontSize: props.fontSize ? props.fontSize : FONTSIZE, viewBox: "0 0 24 24", fill: "currentColor", height: "1em", width: "1em", ...props, children: [" ", _jsx("path", { d: "M19 4 A2 2 0 0 1 17 6 A2 2 0 0 1 15 4 A2 2 0 0 1 19 4 z" }), " ", _jsx("path", { d: "M15.777 10.969a2.007 2.007 0 002.148.83l3.316-.829-.483-1.94-3.316.829-1.379-2.067a2.01 2.01 0 00-1.272-.854l-3.846-.77a1.998 1.998 0 00-2.181 1.067l-1.658 3.316 1.789.895 1.658-3.317 1.967.394L7.434 17H3v2h4.434c.698 0 1.355-.372 1.715-.971l1.918-3.196 5.169 1.034 1.816 5.449 1.896-.633-1.815-5.448a2.007 2.007 0 00-1.506-1.33l-3.039-.607 1.772-2.954.417.625z" }), " "] })); }
 function IconSync(props) { return (_jsxs("svg", { fontSize: props.fontSize ? props.fontSize : FONTSIZE, viewBox: "0 0 24 24", fill: "currentColor", height: "1em", width: "1em", ...props, children: [" ", _jsx("path", { d: "M12 18a6 6 0 01-6-6c0-1 .25-1.97.7-2.8L5.24 7.74A7.93 7.93 0 004 12a8 8 0 008 8v3l4-4-4-4m0-11V1L8 5l4 4V6a6 6 0 016 6c0 1-.25 1.97-.7 2.8l1.46 1.46A7.93 7.93 0 0020 12a8 8 0 00-8-8z" }), " "] })); }

package/lib/helper/TMToppyMessage.js

@@ -2,38 +2,38 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styled from 'styled-components';
 import Toppy from '../assets/Toppy-generico.png';
 import TMLayoutContainer from '../components/base/TMLayout';
-const StyledToppyTextContainer = styled.div `
-    padding: 22px 8px;
-    width: 100%;
-    max-width: 300px;
-    border: 1px solid #2559A5;
-    border-radius: 30px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    box-sizing: border-box;
-    min-height: 100px;
+const StyledToppyTextContainer = styled.div `
+    padding: 22px 8px;
+    width: 100%;
+    max-width: 300px;
+    border: 1px solid #2559A5;
+    border-radius: 30px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    min-height: 100px;
 `;
-const StyledToppyText = styled.div `
-    text-align: center;
-    color: #2559A5;
-    font-size: 1rem;
-    user-select: none;
-    margin: 0;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 3;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: normal;
-    word-break: break-word;
-    line-height: 1.2;
+const StyledToppyText = styled.div `
+    text-align: center;
+    color: #2559A5;
+    font-size: 1rem;
+    user-select: none;
+    margin: 0;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: normal;
+    word-break: break-word;
+    line-height: 1.2;
 `;
-const StyledToppyImage = styled.img `
-    width: 100%;
-    max-width: 120px;
-    height: auto;
-    display: block;
+const StyledToppyImage = styled.img `
+    width: 100%;
+    max-width: 120px;
+    height: auto;
+    display: block;
 `;
 const TMToppyMessage = (props) => {
     const { message, titleTooltip } = props;

package/lib/helper/TMUtils.js

@@ -4,26 +4,26 @@ import { TMTooltip } from '../components';
 import { IconKey } from './TMIcons';
 import { DataListCacheService, MetadataDataDomains, PdGs } from '@topconsultnpm/sdk-ts';
 import { SDKUI_Localizator } from './SDKUI_Localizator';
-const StyledIconFileContainer = styled.div ` 
-    height: 22px;
-    width: 18px;
-    border-radius: 5px;
-    background-color: #d2dae2;
-    position: relative;
+const StyledIconFileContainer = styled.div ` 
+    height: 22px;
+    width: 18px;
+    border-radius: 5px;
+    background-color: #d2dae2;
+    position: relative;
 `;
-const StyledIconFileExt = styled.div ` 
-    top: 25%;
-    width: 30px;
-    left: -6px;
-    border-radius: 5px;
-    background-color: ${props => props.$backgroundColor};
-    color: ${props => props.$color};
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 0.7rem;
-    position: absolute;
-    height: 12px;
+const StyledIconFileExt = styled.div ` 
+    top: 25%;
+    width: 30px;
+    left: -6px;
+    border-radius: 5px;
+    background-color: ${props => props.$backgroundColor};
+    color: ${props => props.$color};
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 0.7rem;
+    position: absolute;
+    height: 12px;
 `;
 export const getFileIcon = (fileExtension, fileCount, tooltipContent) => {
     if (!fileExtension)
@@ -174,27 +174,27 @@ export const isCreateCertificateEnabled = (widgetsString) => {
 export const isPdfEditorEnabled = (widgetsString) => {
     return isWidgetEnabled(PDF_EDITOR_ID, widgetsString);
 };
-export const StyledTabItem = styled.div `
-  display: flex;
-  align-items: center;
-  padding: 6px 12px;
-  border-radius: 8px;
-  font-weight: ${({ $isSelected }) => ($isSelected ? 'bold' : 'normal')};
-  color: ${({ $isSelected }) => ($isSelected ? '#fff' : '#000')};
+export const StyledTabItem = styled.div `
+  display: flex;
+  align-items: center;
+  padding: 6px 12px;
+  border-radius: 8px;
+  font-weight: ${({ $isSelected }) => ($isSelected ? 'bold' : 'normal')};
+  color: ${({ $isSelected }) => ($isSelected ? '#fff' : '#000')};
   background: ${({ $isSelected }) => $isSelected
     ? 'linear-gradient(270deg, #46B5A2 16%, #3BAABC 34%, #3BAABC 34%, #3681AD 54%, #3368A5 72%, #2F549D 88%, #304F99 100%)'
-    : 'transparent'};
-  transition: background-color 0.2s ease;
-  font-size: 1rem;
-  &:hover {
-    background: ${({ $isSelected }) => ($isSelected ? null : 'rgba(0, 0, 0, 0.05)')};
-  }
+    : 'transparent'};
+  transition: background-color 0.2s ease;
+  font-size: 1rem;
+  &:hover {
+    background: ${({ $isSelected }) => ($isSelected ? null : 'rgba(0, 0, 0, 0.05)')};
+  }
 `;
-export const StyledTabIcon = styled.i `
-  cursor: pointer;
-  font-size: 16px;
-  color: ${({ $isSelected }) => ($isSelected ? '#fff !important' : '#000 !important')};
-  transition: color 0.2s ease;
+export const StyledTabIcon = styled.i `
+  cursor: pointer;
+  font-size: 16px;
+  color: ${({ $isSelected }) => ($isSelected ? '#fff !important' : '#000 !important')};
+  transition: color 0.2s ease;
 `;
 export const TMCountBadge = styled.div ` background-color: #ff5252; color: white; border-radius: 999px; margin-left: 8px; font-size: 0.7rem; line-height: 1; min-height: 20px; min-width: 20px; display: flex ; align-items: center; justify-content: center; `;
 const taskPdgsIconClassMap = () => {