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

package/lib/components/forms/Login/Menu.js

@@ -1,29 +1,29 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useRef } from "react";
 import styled, { keyframes } from "styled-components";
-const fadeIn = keyframes `
-  from {
-    opacity: 0;
-    transform: scale(0.9);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
+const fadeIn = keyframes `
+  from {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
 `;
-const MenuContainer = styled.div `
-  position: absolute;
-  top: ${(props) => (typeof props.$y === "number" ? `${props.$y}px` : props.$y)};
-  left: ${(props) => (typeof props.$x === "number" ? `${props.$x}px` : props.$x)};
-  background: #2559A5 0% 0% no-repeat padding-box;
-  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
-  border-radius: 8px;
-  padding: 10px;
-  opacity: ${(props) => (props.$visible ? 1 : 0)};
-  transform-origin: top left;
-  animation: ${(props) => (props.$visible ? fadeIn : "none")} 0.3s ease-out;
-  transition: opacity 0.2s ease-out;
-  z-index:1000;
+const MenuContainer = styled.div `
+  position: absolute;
+  top: ${(props) => (typeof props.$y === "number" ? `${props.$y}px` : props.$y)};
+  left: ${(props) => (typeof props.$x === "number" ? `${props.$x}px` : props.$x)};
+  background: #2559A5 0% 0% no-repeat padding-box;
+  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
+  border-radius: 8px;
+  padding: 10px;
+  opacity: ${(props) => (props.$visible ? 1 : 0)};
+  transform-origin: top left;
+  animation: ${(props) => (props.$visible ? fadeIn : "none")} 0.3s ease-out;
+  transition: opacity 0.2s ease-out;
+  z-index:1000;
 `;
 const Menu = ({ visible = false, children, x, y, onClose }) => {
     const menuRef = useRef(null);

package/lib/components/forms/Login/SelectBox.js

@@ -4,58 +4,58 @@ import styled from "styled-components";
 import { ResultTypes } from '@topconsultnpm/sdk-ts';
 import { TMColors } from "../../../utils/theme";
 import { SDKUI_Globals } from "../../../helper";
-const Container = styled.div `
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  width: 100%;
-  position: relative;
+const Container = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  width: 100%;
+  position: relative;
 `;
-const Label = styled.label `
-  font-size: 12px;
-  font-weight: 500;
-  color: #313131;
+const Label = styled.label `
+  font-size: 12px;
+  font-weight: 500;
+  color: #313131;
 `;
-const SelectContainer = styled.div `
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  border: 1px solid #99999A;
-  border-radius: 5px;
-  background: ${(props) => (props.$disabled ? "#f0f0f0" : "white")};
-  opacity: ${(props) => (props.$disabled ? 0.6 : 1)};
-  cursor: ${(props) => (props.$disabled ? "not-allowed" : "pointer")};
-  position: relative;
-  border-bottom: ${(props) => (props.$focused ? "2px" : props.$borderThickness)} solid ${(props) => props.$borderColor};
+const SelectContainer = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  border: 1px solid #99999A;
+  border-radius: 5px;
+  background: ${(props) => (props.$disabled ? "#f0f0f0" : "white")};
+  opacity: ${(props) => (props.$disabled ? 0.6 : 1)};
+  cursor: ${(props) => (props.$disabled ? "not-allowed" : "pointer")};
+  position: relative;
+  border-bottom: ${(props) => (props.$focused ? "2px" : props.$borderThickness)} solid ${(props) => props.$borderColor};
 `;
-const Select = styled.select `
-  flex: 1;
-  border: none;
-  outline: none;
-  font-size: ${SDKUI_Globals.userSettings?.themeSettings.fontSize ?? '12px'};
-  padding: 6px 0;
-  background: transparent;
-  color: ${props => props.$color ?? '#313131'};
-  ${(props) => props.$readOnly && "pointer-events: none; background: #f8f8f8;"}
-  cursor: ${props => props.$cursor};
+const Select = styled.select `
+  flex: 1;
+  border: none;
+  outline: none;
+  font-size: ${SDKUI_Globals.userSettings?.themeSettings.fontSize ?? '12px'};
+  padding: 6px 0;
+  background: transparent;
+  color: ${props => props.$color ?? '#313131'};
+  ${(props) => props.$readOnly && "pointer-events: none; background: #f8f8f8;"}
+  cursor: ${props => props.$cursor};
 `;
-const IconWrapper = styled.div `
-  color: ${(props) => props.$color};
-  display: flex;
-  align-items: center;
-  position: absolute;
-  left: -30px;
-  cursor: default;
+const IconWrapper = styled.div `
+  color: ${(props) => props.$color};
+  display: flex;
+  align-items: center;
+  position: absolute;
+  left: -30px;
+  cursor: default;
 `;
-const ValidationMessageContainer = styled.div `
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  margin-top: 2px;
+const ValidationMessageContainer = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  margin-top: 2px;
 `;
-const ValidationMessage = styled.span `
-  font-size: 12px;
-  color: ${(props) => props.$color};
+const ValidationMessage = styled.span `
+  font-size: 12px;
+  color: ${(props) => props.$color};
 `;
 const SelectBox = ({ cursor = 'pointer', onClick, value, onValueChanged, label, icon, additionalIcons = [], options, placeHolder, validationItems = [], disabled, readOnly }) => {
     const [isFocused, setIsFocused] = useState(false);

package/lib/components/forms/Login/TMLoginForm.js

@@ -708,21 +708,21 @@ const StyledForgetPassword = styled.div ` position: absolute; bottom: ${props =>
 const StyledBackButton = styled.div ` position: absolute; top: 20px; left: 20px; `;
 const StyledLanguageChooser = styled.button ` border: none; border-radius: 50px; background-color: transparent; cursor: pointer; `;
 const StyledLangChooser = styled.img ` cursor: pointer; border: 3px solid white; border-radius: 50px; `;
-const StyledSummaryContainer = styled.div ` 
-    display: flex; 
-    align-items: center; 
-    gap: 10px;
+const StyledSummaryContainer = styled.div ` 
+    display: flex; 
+    align-items: center; 
+    gap: 10px;
 `;
-const StyledCredentialContainer = styled.div ` 
-    width: 100%; 
-    display: flex; 
-    flex-direction: ${props => getFlexDirection(props.$isMobile, props.$authMode)}; 
-    gap: 10px; 
-    
-    & > * {
-        flex: ${props => props.$authMode === AuthenticationModes.TopMediaOnBehalfOf && !props.$isMobile ? '1' : 'unset'};
-        min-width: 0;
-    }
+const StyledCredentialContainer = styled.div ` 
+    width: 100%; 
+    display: flex; 
+    flex-direction: ${props => getFlexDirection(props.$isMobile, props.$authMode)}; 
+    gap: 10px; 
+    
+    & > * {
+        flex: ${props => props.$authMode === AuthenticationModes.TopMediaOnBehalfOf && !props.$isMobile ? '1' : 'unset'};
+        min-width: 0;
+    }
 `;
 const StyledCredentialWrapper = styled.div ` width: 100%; display: flex; flex-direction: column; gap: 10px; `;
 const StyledToolbarContainer = styled.div ` display: flex; gap: 10px; align-items: center; position: absolute; top: 20px; right: 20px; `;

package/lib/components/forms/Login/TextBox.js

@@ -5,71 +5,71 @@ import { ResultTypes } from '@topconsultnpm/sdk-ts';
 import { IconShow, IconHide, SDKUI_Globals } from "../../../helper";
 import { TMColors } from "../../../utils/theme";
 import TMTooltip from "../../base/TMTooltip";
-const Container = styled.div `
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  position: relative;
-  gap: 2px;
+const Container = styled.div `
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  position: relative;
+  gap: 2px;
 `;
-const Label = styled.label `
-  font-size: 12px;
-  font-weight: 500;
-  color: #313131;
+const Label = styled.label `
+  font-size: 12px;
+  font-weight: 500;
+  color: #313131;
 `;
-const InputContainer = styled.div `
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  border: 1px solid #99999A;
-  border-radius: 5px;
-  background: ${(props) => (props.$disabled ? "#f0f0f0" : "white")};
-  opacity: ${(props) => (props.$disabled ? 0.6 : 1)};
-  cursor: ${(props) => (props.$disabled ? "not-allowed" : "text")};
-  position: relative;
-  border-bottom: ${(props) => (props.$focused ? "2px" : props.$borderThickness)} solid ${(props) => props.$borderColor};
+const InputContainer = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  border: 1px solid #99999A;
+  border-radius: 5px;
+  background: ${(props) => (props.$disabled ? "#f0f0f0" : "white")};
+  opacity: ${(props) => (props.$disabled ? 0.6 : 1)};
+  cursor: ${(props) => (props.$disabled ? "not-allowed" : "text")};
+  position: relative;
+  border-bottom: ${(props) => (props.$focused ? "2px" : props.$borderThickness)} solid ${(props) => props.$borderColor};
 `;
-const Input = styled.input `
-  flex: 1;
-  border: none;
-  outline: none;
-  font-size: ${SDKUI_Globals.userSettings?.themeSettings.fontSize ?? '12px'};
-  padding: 6px 30px 6px 10px;
-  background: transparent;
-  color: ${props => props.$color ?? '#313131'};
-  ${(props) => props.$readOnly && "pointer-events: none; background: #f8f8f8;"}
-  cursor: ${props => props.$cursor};
+const Input = styled.input `
+  flex: 1;
+  border: none;
+  outline: none;
+  font-size: ${SDKUI_Globals.userSettings?.themeSettings.fontSize ?? '12px'};
+  padding: 6px 30px 6px 10px;
+  background: transparent;
+  color: ${props => props.$color ?? '#313131'};
+  ${(props) => props.$readOnly && "pointer-events: none; background: #f8f8f8;"}
+  cursor: ${props => props.$cursor};
 `;
-const ValidationMessageContainer = styled.div `
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  margin-top: 2px;
+const ValidationMessageContainer = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  margin-top: 2px;
 `;
-const ValidationMessage = styled.span `
-  font-size: 12px;
-  color: ${(props) => props.$color};
+const ValidationMessage = styled.span `
+  font-size: 12px;
+  color: ${(props) => props.$color};
 `;
-const IconWrapper = styled.div `
-  color: ${(props) => props.$color};
-  display: flex;
-  align-items: center;
-  position: absolute;
-  left: -30px;
-  cursor: default;
+const IconWrapper = styled.div `
+  color: ${(props) => props.$color};
+  display: flex;
+  align-items: center;
+  position: absolute;
+  left: -30px;
+  cursor: default;
 `;
-const IconsRow = styled.div `
-  display: flex;
-  align-items: center;
-  gap: 5px;
-  position: absolute;
-  right: 10px;
+const IconsRow = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  position: absolute;
+  right: 10px;
 `;
-const IconButton = styled.div `
-  color: ${(props) => props.$color};
-  display: flex;
-  align-items: center;
-  cursor: ${props => !props.$disabled ? 'pointer' : 'default'};
+const IconButton = styled.div `
+  color: ${(props) => props.$color};
+  display: flex;
+  align-items: center;
+  cursor: ${props => !props.$disabled ? 'pointer' : 'default'};
 `;
 const TextBox = forwardRef(({ label, type, additionalIcons = [], cursor = 'text', disabled, icon, onClick, onKeyDown, onValueChanged, placeHolder, readOnly, showSuccess, validationItems = [], value }, ref) => {
     const [showPassword, setShowPassword] = useState(false);

package/lib/components/grids/TMBlogsPostUtils.js

@@ -200,11 +200,11 @@ export const NewBadge = ({ layoutMode }) => {
             boxShadow: "0 2px 10px rgba(255, 200, 50, 0.45)",
             zIndex: 1,
             animation: "softBlink 2s infinite",
-        }, title: SDKUI_Localizator.NewMale, children: [!isCompact && "NEW", _jsx("style", { children: `
-                @keyframes softBlink {
-                    0%, 100% { opacity: 1; }
-                    50% { opacity: 0.7; }
-                }
+        }, title: SDKUI_Localizator.NewMale, children: [!isCompact && "NEW", _jsx("style", { children: `
+                @keyframes softBlink {
+                    0%, 100% { opacity: 1; }
+                    50% { opacity: 0.7; }
+                }
                 ` })] }));
 };
 export const removeFileExtension = (filename) => {

package/lib/components/grids/TMRecentsManager.js

@@ -11,56 +11,56 @@ import { TMDcmtTypeChooserForm } from '../choosers/TMDcmtTypeChooser';
 import TMTidViewer, { renderDTDTooltipContent, TMDcmtTypeTooltip } from '../viewers/TMTidViewer';
 import { StyledDivHorizontal, StyledOffCanvasPanel } from '../base/Styled';
 import { useOutsideClick } from '../../hooks/useOutsideClick';
-const StyledRecentTidItem = styled.div `
-    display: flex;
-    flex-direction: column;
-    align-items: stretch;
-    min-width: 0;
-    padding: 10px;
-    position: relative;
-    gap: 0;
-
-    &:hover {
-        cursor: pointer;
-        background: linear-gradient(
-            270deg,
-            rgba(70, 181, 162, 0.15) 16%,
-            rgba(59, 170, 188, 0.15) 34%,
-            rgba(59, 170, 188, 0.15) 34%,
-            rgba(54, 129, 173, 0.15) 54%,
-            rgba(51, 104, 165, 0.15) 72%,
-            rgba(47, 84, 157, 0.15) 88%,
-            rgba(48, 79, 153, 0.15) 100%
-        );
-    }
-
-    .info-icon {
-        opacity: 0;
-        pointer-events: none;
-        transition: opacity 0.2s;
-        ${({ $isMobile }) => $isMobile && `
-            display: none !important;
-        `}
-    }
-
-    &:hover .info-icon {
-        opacity: 1;
-        pointer-events: auto;
-    }
-
-    &::after {
-        content: '';
-        display: block;
-        width: 90%;
-        margin: 0 auto;
-        border-bottom: 1px solid #00A99D;
-        margin-top: 8px;
-    }
-
-    &:last-child {
-        border-bottom: none;
-        margin-bottom: 0;
-    }
+const StyledRecentTidItem = styled.div `
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    min-width: 0;
+    padding: 10px;
+    position: relative;
+    gap: 0;
+
+    &:hover {
+        cursor: pointer;
+        background: linear-gradient(
+            270deg,
+            rgba(70, 181, 162, 0.15) 16%,
+            rgba(59, 170, 188, 0.15) 34%,
+            rgba(59, 170, 188, 0.15) 34%,
+            rgba(54, 129, 173, 0.15) 54%,
+            rgba(51, 104, 165, 0.15) 72%,
+            rgba(47, 84, 157, 0.15) 88%,
+            rgba(48, 79, 153, 0.15) 100%
+        );
+    }
+
+    .info-icon {
+        opacity: 0;
+        pointer-events: none;
+        transition: opacity 0.2s;
+        ${({ $isMobile }) => $isMobile && `
+            display: none !important;
+        `}
+    }
+
+    &:hover .info-icon {
+        opacity: 1;
+        pointer-events: auto;
+    }
+
+    &::after {
+        content: '';
+        display: block;
+        width: 90%;
+        margin: 0 auto;
+        border-bottom: 1px solid #00A99D;
+        margin-top: 8px;
+    }
+
+    &:last-child {
+        border-bottom: none;
+        margin-bottom: 0;
+    }
 `;
 const iconDelete = () => ReactDOMServer.renderToString(_jsx(IconDelete, {}));
 const TMRecentsManager = ({ deviceType, mruTIDs, currentMruTID, accessFilter = 'all', onSelectedTID, onDeletedTID }) => {

package/lib/components/grids/TMValidationItemsList.js

@@ -3,60 +3,60 @@ import { useState, useEffect } from 'react';
 import styled from 'styled-components';
 import { TMColors } from '../../utils/theme';
 import { IconCloseCircle, IconWarning } from '../../helper';
-const StyledValidationItemsTabs = styled.div `
-    position: sticky;
-    top: 0px;
-    height: 25px;
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: center;
-    border-bottom: 1px solid $primary;
-    width: 100%;
-    user-select: none;
-    background-color: ${TMColors.primary};
-    z-index: 20;
-    border-top: 1px solid #122C4C;
+const StyledValidationItemsTabs = styled.div `
+    position: sticky;
+    top: 0px;
+    height: 25px;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    border-bottom: 1px solid $primary;
+    width: 100%;
+    user-select: none;
+    background-color: ${TMColors.primary};
+    z-index: 20;
+    border-top: 1px solid #122C4C;
 `;
-const StyledValidationTypeTab = styled.div `
-    padding: 10px;
-    color: ${(props) => props.$isSelected ? 'white' : 'rgb(182, 182, 182)'};
-    font-size: 1rem;
-    cursor: pointer;
-    ${(props) => props.$isSelected ? 'border-bottom: 1px white solid;' : ''};
+const StyledValidationTypeTab = styled.div `
+    padding: 10px;
+    color: ${(props) => props.$isSelected ? 'white' : 'rgb(182, 182, 182)'};
+    font-size: 1rem;
+    cursor: pointer;
+    ${(props) => props.$isSelected ? 'border-bottom: 1px white solid;' : ''};
 `;
-const StyledMessageContainer = styled.div `
-    padding: 2px;
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: center;
-    color: $primary;
-    font-size: 1rem;
-    width: 100%;
-    border-bottom: 1px solid rgb(190, 190, 190);
+const StyledMessageContainer = styled.div `
+    padding: 2px;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    color: $primary;
+    font-size: 1rem;
+    width: 100%;
+    border-bottom: 1px solid rgb(190, 190, 190);
 `;
-const StyledMessageIcon = styled.div `
-    transform: translateY(1.5px);
-    margin-right: 5px;
-    z-index: 5;
+const StyledMessageIcon = styled.div `
+    transform: translateY(1.5px);
+    margin-right: 5px;
+    z-index: 5;
 `;
-const StyledMessageResultType = styled.div `
-    width: 50px;
-    user-select: none;
-    margin-right: 20px;
+const StyledMessageResultType = styled.div `
+    width: 50px;
+    user-select: none;
+    margin-right: 20px;
 `;
-const StyledMessageElement = styled.div `
-    width: 150px;
-    text-align: left;
-    user-select: none;
-    margin-right: 20px;
+const StyledMessageElement = styled.div `
+    width: 150px;
+    text-align: left;
+    user-select: none;
+    margin-right: 20px;
 `;
-const StyledMessageText = styled.div `
-    transform: translateY(1.5px);
-    margin-right: 5px;
-    z-index: 5;
-    margin-right: 20px;
+const StyledMessageText = styled.div `
+    transform: translateY(1.5px);
+    margin-right: 5px;
+    z-index: 5;
+    margin-right: 20px;
 `;
 const TMValidationItemsList = ({ validationItems = [] }) => {
     const [selectedTab, setSelectedTab] = useState(0);

package/lib/components/layout/panelManager/TMPanelManagerContainer.js

@@ -8,20 +8,20 @@ import { IconInfo, SDKUI_Localizator } from '../../../helper';
 import { DeviceType, useDeviceType } from '../../base/TMDeviceProvider';
 import { Gutters } from '../../../utils/theme';
 // Styled Component per il contenitore principale di PanelContainer
-const StyledPanelContainerWrapper = styled.div `
-  display: ${props => (props.$hasVisiblePanels ? 'flex' : 'none')};
-  flex-direction: ${props => (props.$direction === 'vertical' ? 'column' : 'row')};
-  height: 100%;
-  width: 100%;
-  // overflow: hidden;
+const StyledPanelContainerWrapper = styled.div `
+  display: ${props => (props.$hasVisiblePanels ? 'flex' : 'none')};
+  flex-direction: ${props => (props.$direction === 'vertical' ? 'column' : 'row')};
+  height: 100%;
+  width: 100%;
+  // overflow: hidden;
 `;
 // Styled Component per il gutter (separatore)
-const StyledResizerGutter = styled.div `
-  cursor: ${props => (props.$direction === 'horizontal' ? 'col-resize' : 'row-resize')};
-  ${props => (props.$direction === 'horizontal' ? `width: ${Gutters.getGutters()}px;` : `height: ${Gutters.getGutters()}px;`)}
-  flex-shrink: 0;
-  background-color: "transparent";
-  z-index: 10;
+const StyledResizerGutter = styled.div `
+  cursor: ${props => (props.$direction === 'horizontal' ? 'col-resize' : 'row-resize')};
+  ${props => (props.$direction === 'horizontal' ? `width: ${Gutters.getGutters()}px;` : `height: ${Gutters.getGutters()}px;`)}
+  flex-shrink: 0;
+  background-color: "transparent";
+  z-index: 10;
 `;
 const TMPanelManagerContainer = (props) => {
     const { panels, showToolbar, direction, parentId } = props;

package/lib/components/layout/panelManager/TMPanelManagerToolbar.js

@@ -5,41 +5,41 @@ import { useTMPanelManagerContext } from './TMPanelManagerContext';
 import { DeviceType, useDeviceType } from '../../base/TMDeviceProvider';
 import { flattenPanels } from './utils';
 import TMTooltip from '../../base/TMTooltip';
-export const StyledToolbarButton = styled.button `
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 32px;
-  width: 32px;
-  border: none;
-  border-radius: 8px;
-  font-size: 18px;
-  padding: 0px;
-  color: #fff;
-  transition: transform 0.2s ease, box-shadow 0.2s ease;
-  cursor: ${({ $isDisabled }) => ($isDisabled ? 'not-allowed' : 'pointer')};
-  opacity: ${({ $isDisabled }) => ($isDisabled ? 0.6 : 1)};
-  background: ${({ $isActive }) => $isActive ? 'rgba(255,255,255,0.35)' : 'transparent'};
-  position: relative;
-  &:hover {
-    background: ${({ $isDisabled }) => !$isDisabled ? 'rgba(255,255,255,0.35)' : undefined};
-  }
+export const StyledToolbarButton = styled.button `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 32px;
+  width: 32px;
+  border: none;
+  border-radius: 8px;
+  font-size: 18px;
+  padding: 0px;
+  color: #fff;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+  cursor: ${({ $isDisabled }) => ($isDisabled ? 'not-allowed' : 'pointer')};
+  opacity: ${({ $isDisabled }) => ($isDisabled ? 0.6 : 1)};
+  background: ${({ $isActive }) => $isActive ? 'rgba(255,255,255,0.35)' : 'transparent'};
+  position: relative;
+  &:hover {
+    background: ${({ $isDisabled }) => !$isDisabled ? 'rgba(255,255,255,0.35)' : undefined};
+  }
 `;
-const Badge = styled.span `
-  position: absolute;
-  top: 2px;
-  right: 2px;
-  background: ${(props) => props.$background || "#ff5252"};
-  color: white;
-  font-size: 10px;
-  min-width: 14px;
-  height: 14px;
-  padding: 0 4px;
-  border-radius: 999px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  line-height: 1;
+const Badge = styled.span `
+  position: absolute;
+  top: 2px;
+  right: 2px;
+  background: ${(props) => props.$background || "#ff5252"};
+  color: white;
+  font-size: 10px;
+  min-width: 14px;
+  height: 14px;
+  padding: 0 4px;
+  border-radius: 999px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
 `;
 const TMPanelManagerToolbar = (props) => {
     const { panels } = props;