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

package/lib/components/choosers/TMDataListItemPicker.js

@@ -3,64 +3,64 @@ import { useEffect, useState } from 'react';
 import styled, { keyframes } from 'styled-components';
 import { DataListCacheService, SDK_Localizator } from '@topconsultnpm/sdk-ts';
 import { SDKUI_Localizator, TMImageLibrary } from '../../helper';
-const PickerContainer = styled.div `
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  padding: 5px;
-  border: 1px solid #ccc;
-  border-radius: 4px;
+const PickerContainer = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 5px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
 `;
-const ItemsContainer = styled.div `
-  display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  gap: 3px;
-  align-items: center;
-  overflow-x: auto;
-  padding: 10px;
+const ItemsContainer = styled.div `
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  gap: 3px;
+  align-items: center;
+  overflow-x: auto;
+  padding: 10px;
 `;
-const slideIn = keyframes `
-  from {
-    opacity: 0;
-    transform: translateX(-50px);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(0);
-  }
+const slideIn = keyframes `
+  from {
+    opacity: 0;
+    transform: translateX(-50px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
 `;
-const StatusItem = styled.div `
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  text-align: center;
-  font-size: 0.8em;
-  padding: 5px 10px;
-  border-radius: 8px;
-  border: 2px solid transparent;
-  transition: all 0.2s ease-in-out;
-  flex-shrink: 0;
-  
-  // Aggiungi l'animazione con un ritardo basato sull'indice
-  animation: ${slideIn} 0.5s ease-out forwards;
-  animation-delay: ${props => props.$index * 0.1}s;
-  opacity: 0; // Inizialmente l'elemento è invisibile
-
-  &:hover {
-    background-color: #f0f0f0;
-  }
-
-  ${props => props.$isSelected && `
-    border-color: #007bff;
-    background-color: #e6f2ff;
-  `}
+const StatusItem = styled.div `
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  text-align: center;
+  font-size: 0.8em;
+  padding: 5px 10px;
+  border-radius: 8px;
+  border: 2px solid transparent;
+  transition: all 0.2s ease-in-out;
+  flex-shrink: 0;
+  
+  // Aggiungi l'animazione con un ritardo basato sull'indice
+  animation: ${slideIn} 0.5s ease-out forwards;
+  animation-delay: ${props => props.$index * 0.1}s;
+  opacity: 0; // Inizialmente l'elemento è invisibile
+
+  &:hover {
+    background-color: #f0f0f0;
+  }
+
+  ${props => props.$isSelected && `
+    border-color: #007bff;
+    background-color: #e6f2ff;
+  `}
 `;
-const Label = styled.div `
-  font-weight: bold;
-  margin-bottom: 5px;
+const Label = styled.div `
+  font-weight: bold;
+  margin-bottom: 5px;
 `;
 const TMDataListItemPicker = ({ dataListID, selectedValue, onItemSelect }) => {
     const [dataList, setDataList] = useState(undefined);

package/lib/components/editors/TMCheckBox.js

@@ -2,32 +2,32 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
 import { FontSize, TMColors } from '../../utils/theme';
 import styled from 'styled-components';
-const StyledCheckBoxContainer = styled.div `
-    display: flex;
-    flex-direction: ${props => props.$labelPosition === 'right' ? 'row-reverse' : 'row'} ;
-    justify-content: flex-start;
-    align-items: center;
-    width: fit-content;
-    cursor: ${props => !props.$disabled && 'pointer'};
+const StyledCheckBoxContainer = styled.div `
+    display: flex;
+    flex-direction: ${props => props.$labelPosition === 'right' ? 'row-reverse' : 'row'} ;
+    justify-content: flex-start;
+    align-items: center;
+    width: fit-content;
+    cursor: ${props => !props.$disabled && 'pointer'};
 `;
-const StyledCheckBoxLabel = styled.div `
-    margin-right:  ${props => props.$labelPosition === 'left' ? '5px' : '0'};
-    margin-left:  ${props => props.$labelPosition === 'right' ? '5px' : '0'};
-    color: ${props => !props.$disabled ? props.$isModifiedWhen ? TMColors.isModified : props.$labelColor ? props.$labelColor : TMColors.text_normal : TMColors.disabled};
-    font-size: ${props => props.$fontSize};
-    user-select: none;
-    &:focus{
-        outline: none;
-        background-image: linear-gradient(white, #E4E9F7);
-        border-bottom: 2px solid;
-        border-bottom-color: ${props => !props.$isModifiedWhen ? TMColors.primary : TMColors.isModified};
-    }
+const StyledCheckBoxLabel = styled.div `
+    margin-right:  ${props => props.$labelPosition === 'left' ? '5px' : '0'};
+    margin-left:  ${props => props.$labelPosition === 'right' ? '5px' : '0'};
+    color: ${props => !props.$disabled ? props.$isModifiedWhen ? TMColors.isModified : props.$labelColor ? props.$labelColor : TMColors.text_normal : TMColors.disabled};
+    font-size: ${props => props.$fontSize};
+    user-select: none;
+    &:focus{
+        outline: none;
+        background-image: linear-gradient(white, #E4E9F7);
+        border-bottom: 2px solid;
+        border-bottom-color: ${props => !props.$isModifiedWhen ? TMColors.primary : TMColors.isModified};
+    }
 `;
-const StyledCheckbox = styled.input `
-    accent-color: ${props => !props.$disabled ? props.$isModifiedWhen ? TMColors.isModified : TMColors.primary : TMColors.disabled};
-    width: 14px;
-    height: 14px;
-    cursor: ${props => !props.$disabled && 'pointer'};
+const StyledCheckbox = styled.input `
+    accent-color: ${props => !props.$disabled ? props.$isModifiedWhen ? TMColors.isModified : TMColors.primary : TMColors.disabled};
+    width: 14px;
+    height: 14px;
+    cursor: ${props => !props.$disabled && 'pointer'};
 `;
 const TMCheckBox = ({ labelColor, isModifiedWhen, elementStyle, disabled = false, label, value, labelPosition = 'right', fontSize = FontSize.defaultFontSize, onValueChanged }) => {
     const [initialValue, setInitialValue] = useState(value);

package/lib/components/editors/TMDropDown.js

@@ -6,53 +6,53 @@ import { StyledEditorContainer, StyledEditorIcon, StyledEditorLabel, TMEditorsDe
 import TMLayoutContainer, { TMLayoutItem } from "../base/TMLayout";
 import TMVilViewer from "../base/TMVilViewer";
 import TMTooltip from "../base/TMTooltip";
-const StyledDropDownWrapper = styled.div `
-  position: relative;
-  width: ${props => props.$width};
-  display: flex;
-  align-items: center;
+const StyledDropDownWrapper = styled.div `
+  position: relative;
+  width: ${props => props.$width};
+  display: flex;
+  align-items: center;
 `;
-const StyledDropDown = styled.select `
-    width: 100%;
-    padding: 5px 35px 3px 9px; /* padding-right leaves space for buttons + custom arrow */
-    border: 1px solid;
-    border-color: ${props => props.$isModified ? TMColors.isModified : TMColors.border_normal};
-    border-bottom: ${props => (props.$vil.length > 0) ? '3px' : '1px'} solid;
-    border-bottom-color: ${props => (props.$vil.length === 0) ? !props.$isModified ? TMColors.border_normal : TMColors.isModified : editorColorManager(props.$vil)};
-    color: ${props => !props.$disabled ? (props.$vil.length === 0 ? (!props.$isModified ? TMColors.text_normal : TMColors.isModified) : editorColorManager(props.$vil)) : TMColors.disabled};
-    border-radius: ${props => props.$borderRadius ?? TMEditorsDefaultBorderRadius};
-    font-size: ${props => props.$fontSize};
-    appearance: none; /* remove native arrow */
-    background-color: white;
-
-    &:focus {
-        outline: none;
-        background-image: linear-gradient(white, #E4E9F7);
-        border: ${props => props.$isModified ? `1px solid ${TMColors.isModified}` : '1px solid rgb(180,180,180)'};
-        border-bottom: 2px solid;
-        border-bottom-color: ${props => (props.$vil.length === 0) ? !props.$isModified ? TMColors.primary : TMColors.isModified : editorColorManager(props.$vil)};
-    }
+const StyledDropDown = styled.select `
+    width: 100%;
+    padding: 5px 35px 3px 9px; /* padding-right leaves space for buttons + custom arrow */
+    border: 1px solid;
+    border-color: ${props => props.$isModified ? TMColors.isModified : TMColors.border_normal};
+    border-bottom: ${props => (props.$vil.length > 0) ? '3px' : '1px'} solid;
+    border-bottom-color: ${props => (props.$vil.length === 0) ? !props.$isModified ? TMColors.border_normal : TMColors.isModified : editorColorManager(props.$vil)};
+    color: ${props => !props.$disabled ? (props.$vil.length === 0 ? (!props.$isModified ? TMColors.text_normal : TMColors.isModified) : editorColorManager(props.$vil)) : TMColors.disabled};
+    border-radius: ${props => props.$borderRadius ?? TMEditorsDefaultBorderRadius};
+    font-size: ${props => props.$fontSize};
+    appearance: none; /* remove native arrow */
+    background-color: white;
+
+    &:focus {
+        outline: none;
+        background-image: linear-gradient(white, #E4E9F7);
+        border: ${props => props.$isModified ? `1px solid ${TMColors.isModified}` : '1px solid rgb(180,180,180)'};
+        border-bottom: 2px solid;
+        border-bottom-color: ${props => (props.$vil.length === 0) ? !props.$isModified ? TMColors.primary : TMColors.isModified : editorColorManager(props.$vil)};
+    }
 `;
-const ButtonsContainer = styled.div `
-    position: absolute;
-    right: 20px; /* adjust depending on arrow size */
-    display: flex;
-    align-items: center;
-    gap: 5px; /* spacing between buttons */
+const ButtonsContainer = styled.div `
+    position: absolute;
+    right: 20px; /* adjust depending on arrow size */
+    display: flex;
+    align-items: center;
+    gap: 5px; /* spacing between buttons */
 `;
-const CustomArrow = styled.div `
-    position: absolute;
-    right: 5px;
-    pointer-events: none;
-    border-left: 5px solid transparent;
-    border-right: 5px solid transparent;
-    border-top: 5px solid ${TMColors.text_normal};
+const CustomArrow = styled.div `
+    position: absolute;
+    right: 5px;
+    pointer-events: none;
+    border-left: 5px solid transparent;
+    border-right: 5px solid transparent;
+    border-top: 5px solid ${TMColors.text_normal};
 `;
-const StyledDropDownEditorButton = styled.div `
-    color: ${TMColors.button_icon};
-    display: flex;
-    align-items: center;
-    cursor: pointer;
+const StyledDropDownEditorButton = styled.div `
+    color: ${TMColors.button_icon};
+    display: flex;
+    align-items: center;
+    cursor: pointer;
 `;
 const TMDropDown = ({ validationItems = [], disabled = false, elementStyle, isModifiedWhen, labelPosition = 'left', label, icon, width = '100%', fontSize = FontSize.defaultFontSize, dataSource, value, onValueChanged, buttons = [], }) => {
     const [isFocused, setIsFocused] = useState(false);

package/lib/components/editors/TMEditorStyled.js

@@ -12,79 +12,79 @@ export const editorColorManager = (validationItems) => {
         return TMColors.info;
     return '';
 };
-export const StyledEditorContainer = styled.div `
-    width: ${props => props.$width};
-    position: relative;
+export const StyledEditorContainer = styled.div `
+    width: ${props => props.$width};
+    position: relative;
 `;
-export const StyledEditor = styled.input `
-width: ${props => props.$width};
-padding: ${props => props.$type === 'password' ? '4px 10px 4px 13px' : props.$type === 'number' ? '4px 4px 5px 13px' : '4px 10px 4px 13px'};
-border: 1px solid;
-border-color: ${props => props.$isModified ? TMColors.isModified : TMColors.border_normal};
-border-bottom: ${props => (props.$vil.length > 0) ? '3px' : '1px'} solid ;
-border-bottom-color: ${props => (props.$vil.length === 0) ? !props.$isModified ? TMColors.border_normal : TMColors.isModified : editorColorManager(props.$vil)};
-color: ${props => props.readOnly ? '#525252' : !props.$disabled ? (props.$vil.length === 0) ? !props.$isModified ? 'black' : TMColors.isModified : editorColorManager(props.$vil) : TMColors.disabled};
-border-radius: ${props => props.$borderRadius ?? TMEditorsDefaultBorderRadius};
-min-width: ${props => props.$isMobile && '70px'};
-background: ${props => props.readOnly ? 'linear-gradient(white 20%, #d6d6d6 80%)' : 'white'};
-&:focus{
-    outline: none;
-    background-image: linear-gradient(white, #E4E9F7);
-    border: ${props => props.$isModified ? `1px solid ${TMColors.isModified}` : '1px solid rgb(180,180,180)'};
-    border-bottom: 2px solid ;
-    border-bottom-color: ${props => (props.$vil.length === 0) ? !props.$isModified ? TMColors.primary : TMColors.isModified : editorColorManager(props.$vil)};
-}
-
-font-size: ${props => props.$fontSize};
-&::placeholder {
-    /* color: ${props => (props.$vil.length === 0) ? 'gray' : editorColorManager(props.$vil)}; */
-    font-size: ${props => props.$fontSize};
-}
+export const StyledEditor = styled.input `
+width: ${props => props.$width};
+padding: ${props => props.$type === 'password' ? '4px 10px 4px 13px' : props.$type === 'number' ? '4px 4px 5px 13px' : '4px 10px 4px 13px'};
+border: 1px solid;
+border-color: ${props => props.$isModified ? TMColors.isModified : TMColors.border_normal};
+border-bottom: ${props => (props.$vil.length > 0) ? '3px' : '1px'} solid ;
+border-bottom-color: ${props => (props.$vil.length === 0) ? !props.$isModified ? TMColors.border_normal : TMColors.isModified : editorColorManager(props.$vil)};
+color: ${props => props.readOnly ? '#525252' : !props.$disabled ? (props.$vil.length === 0) ? !props.$isModified ? 'black' : TMColors.isModified : editorColorManager(props.$vil) : TMColors.disabled};
+border-radius: ${props => props.$borderRadius ?? TMEditorsDefaultBorderRadius};
+min-width: ${props => props.$isMobile && '70px'};
+background: ${props => props.readOnly ? 'linear-gradient(white 20%, #d6d6d6 80%)' : 'white'};
+&:focus{
+    outline: none;
+    background-image: linear-gradient(white, #E4E9F7);
+    border: ${props => props.$isModified ? `1px solid ${TMColors.isModified}` : '1px solid rgb(180,180,180)'};
+    border-bottom: 2px solid ;
+    border-bottom-color: ${props => (props.$vil.length === 0) ? !props.$isModified ? TMColors.primary : TMColors.isModified : editorColorManager(props.$vil)};
+}
+
+font-size: ${props => props.$fontSize};
+&::placeholder {
+    /* color: ${props => (props.$vil.length === 0) ? 'gray' : editorColorManager(props.$vil)}; */
+    font-size: ${props => props.$fontSize};
+}
 `;
-export const StyledEditorIcon = styled.div `
-    color: ${props => !props.$disabled ? (props.$vil.length === 0) ? !props.$isModified ? 'rgb(80,80,80)' : TMColors.tertiary : editorColorManager(props.$vil) : 'rgb(180,180,180)'};
-    width: 25px;
-    height: 25px;
-    margin-right: 2px;
-    font-size: 18px;
-    user-select: none;
-    transform: translateY(18px);
+export const StyledEditorIcon = styled.div `
+    color: ${props => !props.$disabled ? (props.$vil.length === 0) ? !props.$isModified ? 'rgb(80,80,80)' : TMColors.tertiary : editorColorManager(props.$vil) : 'rgb(180,180,180)'};
+    width: 25px;
+    height: 25px;
+    margin-right: 2px;
+    font-size: 18px;
+    user-select: none;
+    transform: translateY(18px);
 `;
-export const StyledEditorLabel = styled.div `
-    font-size: ${props => props.$fontSize ?? TMEditorsDefaultLabelFontSize} ;
-    color:${props => !props.$disabled ? props.$isFocused ? TMColors.primary : props.$color ? props.$color : TMColors.label_normal : TMColors.disabled};
-    padding: 0 3px;
-    user-select: none;
-    transform: ${props => props.$labelPosition === 'left' && 'translateY(5px)'};
-    width: max-content;
-    transform: translate(10px, 6px);
-    background-color: ${TMColors.default_background};
-    position: relative;
-    z-index: 1;
+export const StyledEditorLabel = styled.div `
+    font-size: ${props => props.$fontSize ?? TMEditorsDefaultLabelFontSize} ;
+    color:${props => !props.$disabled ? props.$isFocused ? TMColors.primary : props.$color ? props.$color : TMColors.label_normal : TMColors.disabled};
+    padding: 0 3px;
+    user-select: none;
+    transform: ${props => props.$labelPosition === 'left' && 'translateY(5px)'};
+    width: max-content;
+    transform: translate(10px, 6px);
+    background-color: ${TMColors.default_background};
+    position: relative;
+    z-index: 1;
 `;
-export const StyledTextareaEditor = styled.textarea `
-    width: ${props => props.$width};
-    padding: 4px 5px 4px 13px;
-    border: 1px solid;
-    border-color: ${props => props.$isModified ? TMColors.isModified : TMColors.border_normal};
-    border-bottom: ${props => (props.$vil.length > 0) ? '3px' : '1px'} solid;
-    border-bottom-color: ${props => props.$vil.length === 0 ? !props.$isModified ? TMColors.border_normal : TMColors.isModified : editorColorManager(props.$vil)};
-    color: ${props => props.readOnly ? '#525252' : !props.$disabled ? (props.$vil.length === 0) ? !props.$isModified ? 'black' : TMColors.isModified : editorColorManager(props.$vil) : TMColors.disabled};
-    background: ${props => props.readOnly ? 'linear-gradient(white 20%, #d6d6d6 80%)' : 'white'};
-    border-radius: ${props => props.$borderRadius ?? TMEditorsDefaultBorderRadius}; /* Slightly increased radius for smoother corners */
-    min-width: ${props => (props.$isMobile ? '70px' : '100%')}; /* Adjust for mobile */
-    max-height: ${props => props.$maxHeight ?? 'auto'}; 
-    resize: ${props => (props.$resize === false ? 'none' : 'both')};
-    &:focus {
-        outline: none;
-        background-image: linear-gradient(white, #E4E9F7);
-        border: ${props => props.$isModified ? `1px solid ${TMColors.isModified}` : '1px solid rgb(180,180,180)'};
-        border-bottom: 2px solid;
-        border-bottom-color: ${props => props.$vil.length === 0 ? !props.$isModified ? TMColors.primary : TMColors.isModified : editorColorManager(props.$vil)};
-    }
-    font-size: ${props => props.$fontSize};
-    &::placeholder {
-      color: ${props => (props.$vil.length === 0) ? 'gray' : editorColorManager(props.$vil)};
-      font-size: ${props => props.$fontSize};
-    }
+export const StyledTextareaEditor = styled.textarea `
+    width: ${props => props.$width};
+    padding: 4px 5px 4px 13px;
+    border: 1px solid;
+    border-color: ${props => props.$isModified ? TMColors.isModified : TMColors.border_normal};
+    border-bottom: ${props => (props.$vil.length > 0) ? '3px' : '1px'} solid;
+    border-bottom-color: ${props => props.$vil.length === 0 ? !props.$isModified ? TMColors.border_normal : TMColors.isModified : editorColorManager(props.$vil)};
+    color: ${props => props.readOnly ? '#525252' : !props.$disabled ? (props.$vil.length === 0) ? !props.$isModified ? 'black' : TMColors.isModified : editorColorManager(props.$vil) : TMColors.disabled};
+    background: ${props => props.readOnly ? 'linear-gradient(white 20%, #d6d6d6 80%)' : 'white'};
+    border-radius: ${props => props.$borderRadius ?? TMEditorsDefaultBorderRadius}; /* Slightly increased radius for smoother corners */
+    min-width: ${props => (props.$isMobile ? '70px' : '100%')}; /* Adjust for mobile */
+    max-height: ${props => props.$maxHeight ?? 'auto'}; 
+    resize: ${props => (props.$resize === false ? 'none' : 'both')};
+    &:focus {
+        outline: none;
+        background-image: linear-gradient(white, #E4E9F7);
+        border: ${props => props.$isModified ? `1px solid ${TMColors.isModified}` : '1px solid rgb(180,180,180)'};
+        border-bottom: 2px solid;
+        border-bottom-color: ${props => props.$vil.length === 0 ? !props.$isModified ? TMColors.primary : TMColors.isModified : editorColorManager(props.$vil)};
+    }
+    font-size: ${props => props.$fontSize};
+    &::placeholder {
+      color: ${props => (props.$vil.length === 0) ? 'gray' : editorColorManager(props.$vil)};
+      font-size: ${props => props.$fontSize};
+    }
   `;

package/lib/components/editors/TMHtmlContentDisplay.js

@@ -3,22 +3,22 @@ import { useEffect, useState } from 'react';
 import { UserListCacheService } from '@topconsultnpm/sdk-ts';
 import styled from 'styled-components';
 import { TMColors } from '../../utils/theme';
-const Wrapper = styled.div `
-    * {
-        color: ${(props) => props.$isSelected && '#fff !important'};
-    }
-    ul li {
-        list-style-position: inside;
-    }
-    ol li {
-        list-style-position: inside;
-    }
-    .highlight {
-        background-color: ${(props) => props.$isSelected ? '#6c9023' : 'yellow'};
-    }
-    a {
-        color: ${(props) => (props.$isSelected ? '#fff' : 'rgb(26, 13, 171)')};
-    }
+const Wrapper = styled.div `
+    * {
+        color: ${(props) => props.$isSelected && '#fff !important'};
+    }
+    ul li {
+        list-style-position: inside;
+    }
+    ol li {
+        list-style-position: inside;
+    }
+    .highlight {
+        background-color: ${(props) => props.$isSelected ? '#6c9023' : 'yellow'};
+    }
+    a {
+        color: ${(props) => (props.$isSelected ? '#fff' : 'rgb(26, 13, 171)')};
+    }
 `;
 const convertLinksToAnchors = (markup) => {
     const urlRegex = /(?<!href=["'])(https?:\/\/[^\s"'<>]+[^\s"'<>.,;:!?)])/g;

package/lib/components/editors/TMLocalizedTextBox.js

@@ -26,40 +26,40 @@ const Portal = ({ children, popoverRef }) => {
     }, [popoverRef]);
     return createPortal(children, elRef.current);
 };
-const LocalizedContainer = styled.div `
-  position: relative;
-  width: 100%;
+const LocalizedContainer = styled.div `
+  position: relative;
+  width: 100%;
 `;
-const Popover = styled.div `
-  display: ${props => props.$isVisible ? 'flex' : 'none'};
-  flex-direction: column;
-  position: fixed; /* Usa 'fixed' o 'absolute' a seconda del comportamento desiderato */
-  top: ${props => props.$top}px;
-  left: ${props => props.$left}px;
-  width: ${props => props.$width}px;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-  background-color: #fff;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-  z-index: 2000;
-  padding: 8px;
+const Popover = styled.div `
+  display: ${props => props.$isVisible ? 'flex' : 'none'};
+  flex-direction: column;
+  position: fixed; /* Usa 'fixed' o 'absolute' a seconda del comportamento desiderato */
+  top: ${props => props.$top}px;
+  left: ${props => props.$left}px;
+  width: ${props => props.$width}px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  background-color: #fff;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  z-index: 2000;
+  padding: 8px;
 `;
-const Badge = styled.span `
-  position: absolute;
-  top: -8px; 
-  right: -8px;
-  background-color: #ff9800;
-  color: white;
-  border-radius: 50%;
-  padding: 2px 6px;
-  font-size: 10px;
-  font-weight: bold;
-  pointer-events: none;
+const Badge = styled.span `
+  position: absolute;
+  top: -8px; 
+  right: -8px;
+  background-color: #ff9800;
+  color: white;
+  border-radius: 50%;
+  padding: 2px 6px;
+  font-size: 10px;
+  font-weight: bold;
+  pointer-events: none;
 `;
-const IconContainer = styled.div `
-  position: relative;
-  display: flex;
-  align-items: center;
+const IconContainer = styled.div `
+  position: relative;
+  display: flex;
+  align-items: center;
 `;
 // Helper function to get image path
 export const getCultureIDImg = (cultureID) => {

package/lib/components/editors/TMMetadataValues.js

@@ -508,23 +508,23 @@ const TMMetadataValues = ({ showCheckBoxes = ShowCheckBoxesMode.Never, checkPerm
 };
 export default TMMetadataValues;
 //#region  Styled Components
-const StyledMetadataValuesContainer = styled.div ` 
-    display: flex; 
-    flex-direction: column; 
-    width: 100%; 
-    height: 100%; 
-    overflow: auto;
-    padding: 0 10px 10px 10px;
+const StyledMetadataValuesContainer = styled.div ` 
+    display: flex; 
+    flex-direction: column; 
+    width: 100%; 
+    height: 100%; 
+    overflow: auto;
+    padding: 0 10px 10px 10px;
 `;
-const StyledRow = styled.div ` 
-    display: flex; 
-    flex-direction: row; 
-    width: 100%; 
-    gap: 5px; 
+const StyledRow = styled.div ` 
+    display: flex; 
+    flex-direction: row; 
+    width: 100%; 
+    gap: 5px; 
 `;
-const StyledSeparator = styled.hr `
-    width: 100%;
-    margin: 10px 0;
-    border: none;
-    border-top: 1px solid #e0e0e0;
+const StyledSeparator = styled.hr `
+    width: 100%;
+    margin: 10px 0;
+    border: none;
+    border-top: 1px solid #e0e0e0;
 `;