scorer-ui-kit 3.0.4 → 3.0.6

package/dist/index.js

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_LineUIVideoBase = require("./LineUIVideoBase-VxlYHeJG.js");
+const require_LineUIVideoBase = require("./LineUIVideoBase-DmQtfhyc.js");
 let styled_components = require("styled-components");
 styled_components = require_LineUIVideoBase.__toESM(styled_components);
 let react = require("react");
@@ -2972,7 +2972,10 @@ var Tooltip = ({ icon, message, type, tooltipFor, tooltipPosition, maxWidth }) =
 		setVisible(false);
 	}, []);
 	const updateCoords = (0, react.useCallback)(() => {
-		if (tooltipFor?.current) setCoords(tooltipFor.current.getBoundingClientRect());
+		if (tooltipFor?.current) {
+			const rect = tooltipFor.current.getBoundingClientRect();
+			setCoords(rect);
+		}
 	}, [tooltipFor]);
 	(0, react.useEffect)(() => {
 		let currentRef = null;
@@ -4441,8 +4444,10 @@ var nearMark = (value, marks) => {
 */
 var getValidMin = (max, min) => {
 	if (!max && !min) return 0;
-	if (!min) if (max > 0) return 0;
-	else return max - 1;
+	if (!min) {
+		if (max > 0) return 0;
+		else return max - 1;
+	}
 	return min;
 };
 /**
@@ -4465,7 +4470,7 @@ var getMarkAlignment = (value, min, max) => {
 };
 var renderMarks = (markList, min, max, listTag, allMarkCentered) => {
 	const listOptions = [];
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react.Fragment, { children: [markList.map(({ value, label }, index) => {
+	const marksElements = markList.map(({ value, label }, index) => {
 		const left = index === markList.length - 1 ? 100 : valueToPercent(value, min, max);
 		listOptions.push(/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", { children: value }, `option-${value}`));
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Mark, {
@@ -4476,7 +4481,8 @@ var renderMarks = (markList, min, max, listTag, allMarkCentered) => {
 			$alignment: allMarkCentered ? "center" : getMarkAlignment(value, min, max),
 			children: label
 		})] }, `mark-${value}`);
-	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("datalist", {
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react.Fragment, { children: [marksElements, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("datalist", {
 		id: listTag,
 		children: listOptions
 	})] });
@@ -4485,7 +4491,8 @@ var ghostThumbValue = 0;
 var SliderInput = ({ min, max, marks, defaultValue, thumbColor = "info", disabled = false, onlyMarkSelect = false, inputCallback = () => {}, onChangeCallback = () => {}, allMarkCentered = false, showValue: _showValue, children, formAction, ...props }) => {
 	const maxValid = getValidMax(max, min);
 	const minValid = getValidMin(max, min);
-	const [selectedValue, setSelectedValue] = (0, react.useState)(defaultValue && isInsideRange(defaultValue, minValid, maxValid) ? defaultValue : minValid);
+	const initValue = defaultValue && isInsideRange(defaultValue, minValid, maxValid) ? defaultValue : minValid;
+	const [selectedValue, setSelectedValue] = (0, react.useState)(initValue);
 	const [isGhostActive, setIsGhostActive] = (0, react.useState)(false);
 	const thumbValueRef = (0, react.useRef)(thumbLeftPosition(selectedValue, minValid, maxValid));
 	if (marks && onlyMarkSelect) ghostThumbValue = thumbLeftPosition(nearMark(selectedValue, marks), minValid, maxValid);
@@ -5179,13 +5186,15 @@ var ButtonsStack = ({ buttons }) => {
 //#region src/helpers/cropToolHelpers.ts
 var updateCursorStyle = (left, top, width, height, clientX, clientY) => {
 	let cursorStyle = "default";
-	if (clientY - top < 5) if (width - (clientX - left) < 5) cursorStyle = "ne-resize";
-	else if (clientX - left < 5) cursorStyle = "nw-resize";
-	else cursorStyle = "n-resize";
-	else if (height - (clientY - top) < 5) if (width - (clientX - left) < 5) cursorStyle = "se-resize";
-	else if (clientX - left < 5) cursorStyle = "sw-resize";
-	else cursorStyle = "s-resize";
-	else if (width - (clientX - left) < 5) cursorStyle = "e-resize";
+	if (clientY - top < 5) {
+		if (width - (clientX - left) < 5) cursorStyle = "ne-resize";
+		else if (clientX - left < 5) cursorStyle = "nw-resize";
+		else cursorStyle = "n-resize";
+	} else if (height - (clientY - top) < 5) {
+		if (width - (clientX - left) < 5) cursorStyle = "se-resize";
+		else if (clientX - left < 5) cursorStyle = "sw-resize";
+		else cursorStyle = "s-resize";
+	} else if (width - (clientX - left) < 5) cursorStyle = "e-resize";
 	else if (clientX - left < 5) cursorStyle = "w-resize";
 	else cursorStyle = "move";
 	return cursorStyle;
@@ -5277,8 +5286,6 @@ var updateCropValues = (oldSelection, newX, newY) => {
 		case "move":
 			updatedTop = oldSelection.cropTop + diffY;
 			updatedLeft = oldSelection.cropLeft + diffX;
-			break;
-		default: break;
 	}
 	const width = clamp(updatedWidth, 0, oldSelection.imgWidth);
 	const height = clamp(updatedHeight, 0, oldSelection.imgHeight);
@@ -5331,8 +5338,6 @@ var updateCropWithAspect = (oldSelection, newX, newY, aspectRatio) => {
 		case "move":
 			updatedTop = oldSelection.cropTop + diffY;
 			updatedLeft = oldSelection.cropLeft + diffX;
-			break;
-		default: break;
 	}
 	/**img values only change if the image is updated */
 	const imgBoundLeft = clamp(updatedLeft, oldSelection.imgLeft, oldSelection.imgWidth - oldSelection.cropWidth + oldSelection.imgLeft);
@@ -5866,7 +5871,7 @@ var getValueTitle = (value, timeUnit, timeFormat) => {
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Unit, { children: unit })] });
 	}
 	const timeValues = getTimeValues(value, timeUnit);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ValueTitle$1, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TitleTemplate, { children: timeFormat.split(/(\[H+\]|\[M+\]|\[S+\])/).map((part, index) => {
+	const updatedTitle = timeFormat.split(/(\[H+\]|\[M+\]|\[S+\])/).map((part, index) => {
 		switch (part) {
 			case "[HH]": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: timeValues.hours.toString().padStart(2, "0") }, index);
 			case "[H]": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: timeValues.hours }, index);
@@ -5876,7 +5881,8 @@ var getValueTitle = (value, timeUnit, timeFormat) => {
 			case "[S]": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: timeValues.seconds }, index);
 			default: return part.replace(/\s+/g, "\xA0");
 		}
-	}) }) });
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ValueTitle$1, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TitleTemplate, { children: updatedTitle }) });
 };
 var DurationSlider = ({ max, min, defaultValue = 0, title = "", timeUnit, controlledValue, inputCallback, timeFormat, ...props }) => {
 	const [selectedValue, setSelectedValue] = (0, react.useState)(defaultValue);
@@ -6272,10 +6278,11 @@ var useModal = () => {
 	const { modalProps, setModalProps } = (0, react.useContext)(ModalContext);
 	const setModalOpen = (0, react.useCallback)((newStatus) => {
 		if (newStatus === void 0) return;
-		setModalProps({
+		const updateProps = {
 			...modalProps,
 			isOpen: newStatus
-		});
+		};
+		setModalProps(updateProps);
 	}, [modalProps, setModalProps]);
 	const onDismiss = (0, react.useCallback)(() => {
 		setModalOpen(false);
@@ -6286,7 +6293,7 @@ var useModal = () => {
 				isOpen: true,
 				onDismiss
 			});
-			setModalProps({
+			const updateProps = {
 				isOpen: true,
 				closeText: modal?.closeText,
 				isCloseEnable: modal?.isCloseEnable,
@@ -6295,7 +6302,8 @@ var useModal = () => {
 				dismissCallback: modal?.dismissCallback,
 				customComponent: modal?.customComponent,
 				onDismiss
-			});
+			};
+			setModalProps(updateProps);
 		}, [onDismiss, setModalProps]),
 		isModalOpen: modalProps.isOpen,
 		setModalOpen
@@ -6385,10 +6393,11 @@ var NotificationProvider = ({ children }) => {
 			setActiveNotification(null);
 			showNotification();
 		};
-		setActiveNotification({
+		const displayedNotification = {
 			...nextNotification,
 			closeCallback: updateOnClose
-		});
+		};
+		setActiveNotification(displayedNotification);
 	}, []);
 	const sendNotification = (0, react.useCallback)(async (newNotification) => {
 		const validNotification = {
@@ -8291,11 +8300,14 @@ var DatePicker = ({ dateMode = "interval", timeMode = "interval", dateTimeTextUp
 	*/
 	const onCellClick = (0, react.useCallback)((day) => {
 		const validRange = selectedRange ? selectedRange : TODAY_INTERVAL;
-		if (dateMode === "single") setSelectedRange({
-			start: updateDay(validRange.start, day),
-			end: updateDay(validRange.end, day)
-		});
-		else if (targetedDate === "end" && (0, date_fns.isAfter)(day, validRange.start)) {
+		if (dateMode === "single") {
+			const start = updateDay(validRange.start, day);
+			const end = updateDay(validRange.end, day);
+			setSelectedRange({
+				start,
+				end
+			});
+		} else if (targetedDate === "end" && (0, date_fns.isAfter)(day, validRange.start)) {
 			const end = updateDay(validRange.end, day);
 			setSelectedRange({
 				...validRange,
@@ -8303,9 +8315,11 @@ var DatePicker = ({ dateMode = "interval", timeMode = "interval", dateTimeTextUp
 			});
 			setTargetedDate("done");
 		} else if (targetedDate === "start" || targetedDate === "end" || targetedDate === "done") {
+			const start = updateDay(validRange.start, day);
+			const end = updateDay(validRange.end, day);
 			setSelectedRange({
-				start: updateDay(validRange.start, day),
-				end: updateDay(validRange.end, day)
+				start,
+				end
 			});
 			setTargetedDate("end");
 		}
@@ -8316,9 +8330,10 @@ var DatePicker = ({ dateMode = "interval", timeMode = "interval", dateTimeTextUp
 	]);
 	(0, react.useEffect)(() => {
 		const { start, end } = selectedRange ? selectedRange : TODAY_INTERVAL;
-		if (timeMode === "interval" && (0, date_fns.isAfter)((0, date_fns.add)(start, { minutes: 1 }), end)) if ((0, date_fns.isEqual)(end, (0, date_fns.endOfDay)(start)) && end.getSeconds() > 0) setIsTimeRangeValid(true);
-		else setIsTimeRangeValid(false);
-		else setIsTimeRangeValid(true);
+		if (timeMode === "interval" && (0, date_fns.isAfter)((0, date_fns.add)(start, { minutes: 1 }), end)) {
+			if ((0, date_fns.isEqual)(end, (0, date_fns.endOfDay)(start)) && end.getSeconds() > 0) setIsTimeRangeValid(true);
+			else setIsTimeRangeValid(false);
+		} else setIsTimeRangeValid(true);
 	}, [selectedRange, timeMode]);
 	const updateStartDate = (0, react.useCallback)((start) => {
 		const { end } = selectedRange ? selectedRange : TODAY_INTERVAL;
@@ -8381,10 +8396,11 @@ var DatePicker = ({ dateMode = "interval", timeMode = "interval", dateTimeTextUp
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CalHCell, { children: label }, key);
 		}) }),
 		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CalBody, { children: weeksOfMonth.map((week) => {
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CalRow, { children: (0, date_fns.eachDayOfInterval)({
+			const days = (0, date_fns.eachDayOfInterval)({
 				start: week,
 				end: (0, date_fns.endOfWeek)(week)
-			}).map((day) => {
+			});
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CalRow, { children: days.map((day) => {
 				const dayState = cellState(day, selectedRange);
 				const isTodayValue = (0, date_fns.isToday)(day);
 				return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(CalCellB, {
@@ -8428,10 +8444,12 @@ var cellState = (day, interval, _hoverDate) => {
 	} catch (_error) {
 		isInsideInterval = false;
 	}
-	if (isInsideInterval || (0, date_fns.isSameDay)(interval.start, day)) if (singleDayRange) state = "single";
-	else if ((0, date_fns.isSameDay)(interval.start, day)) state = "start";
-	else if ((0, date_fns.isSameDay)(interval.end, day)) state = "end";
-	else state = "inside";
+	if (isInsideInterval || (0, date_fns.isSameDay)(interval.start, day)) {
+		if (singleDayRange) state = "single";
+		else if ((0, date_fns.isSameDay)(interval.start, day)) state = "start";
+		else if ((0, date_fns.isSameDay)(interval.end, day)) state = "end";
+		else state = "inside";
+	}
 	return state;
 };
 var updateDay = (date, target) => {
@@ -9180,7 +9198,8 @@ var FilterDropdown = ({ buttonIcon, buttonText, list, selected = null, disabled
 			setVisibleList(selectedOrderList(list, maxDisplayedItems, tempSelected, isSortAscending));
 			return;
 		}
-		setVisibleList(selectedOrderList(getFilteredList(list, value), maxDisplayedItems, null, isSortAscending));
+		const newList = getFilteredList(list, value);
+		setVisibleList(selectedOrderList(newList, maxDisplayedItems, null, isSortAscending));
 	}, [
 		isSortAscending,
 		list,
@@ -9482,8 +9501,13 @@ var FilterInputs = ({ hasShowMore = false, searchFilters = [], datePickerFilters
 		setShowMoreDropdowns((prev) => !prev);
 	}, []);
 	const handleVisibleSearch = (0, react.useCallback)((searchId) => {
-		if (visibleSearchInputs.includes(searchId)) setVisibleSearchInputs(visibleSearchInputs.filter((id) => searchId !== id));
-		else setVisibleSearchInputs([...visibleSearchInputs, searchId]);
+		if (visibleSearchInputs.includes(searchId)) {
+			const newVisible = visibleSearchInputs.filter((id) => searchId !== id);
+			setVisibleSearchInputs(newVisible);
+		} else {
+			const newVisible = [...visibleSearchInputs, searchId];
+			setVisibleSearchInputs(newVisible);
+		}
 	}, [visibleSearchInputs]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Container$39, {
 		...props,
@@ -10890,7 +10914,7 @@ var LineUI$1 = ({ ws, onSizeChange = () => {}, onLineMoveEnd = () => {}, onLineC
 	(0, react.useEffect)(() => {
 		if (!frame.current || !loaded) return;
 		const { viewBox } = frame.current;
-		setBoundaries({
+		const bounds = {
 			x: {
 				min: viewBox.baseVal.x + boundaryOffset,
 				max: viewBox.baseVal.x + viewBox.baseVal.width - boundaryOffset
@@ -10899,7 +10923,8 @@ var LineUI$1 = ({ ws, onSizeChange = () => {}, onLineMoveEnd = () => {}, onLineC
 				min: viewBox.baseVal.y + boundaryOffset,
 				max: viewBox.baseVal.y + viewBox.baseVal.height - boundaryOffset
 			}
-		});
+		};
+		setBoundaries(bounds);
 	}, [loaded, boundaryOffset]);
 	const onLoadedMetadata = (0, react.useCallback)(({ target }) => {
 		if (target) {
@@ -11001,7 +11026,7 @@ var IntroductionText = ({ children }) => {
 //#region src/Pages/atoms/PageTitle.tsx
 var ICON_SIZE = 24;
 var GAP_LEFT = 20;
-var ICON_MARGIN_LEFT = -20 - ICON_SIZE;
+var ICON_MARGIN_LEFT = -44;
 var Container$30 = styled_components.default.div`
   position: relative;
   display: flex;
@@ -11778,8 +11803,9 @@ var TypeTableRow = ({ selectable = false, selectCallback, hasStatus, hasThumbnai
 	const wrappedSelectCallback = (0, react.useCallback)((checked) => {
 		if (selectCallback) selectCallback(checked, rowData.id);
 	}, [rowData.id, selectCallback]);
+	const isEmpty = rowData.columns.length === 0;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(RowContainer, {
-		$isEmpty: rowData.columns.length === 0,
+		$isEmpty: isEmpty,
 		children: [
 			selectable ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TypeTableCell, {
 				hideDivider: true,
@@ -12088,9 +12114,10 @@ var TypeTable = ({ columnConfig, selectable, rows = [], closeText, hasStatus = f
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LoadingText, { children: loadingText })] }) : null,
 		isEmptyTable ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(EmptyTableBox, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", { children: emptyTableTitle }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: emptyTableText })] }) : null,
 		rows.map((rowData, key) => {
+			const isLastRow = rows.length - 1 === key;
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TypeTableRow, {
 				rowData,
-				isLastRow: rows.length - 1 === key,
+				isLastRow,
 				selectable,
 				selectCallback,
 				columnConfig,
@@ -12839,19 +12866,20 @@ var Menu = styled_components.default.div`
   flex-direction: column;
   align-items: stretch;
   min-width: 216px;
-  padding: 4px 0;
+  padding: 0;
+  overflow: hidden;
   background: var(--grey-1);
-  border: 1px solid var(--grey-4);
+  border: 1px solid var(--grey-7);
   border-radius: 4px;
   box-shadow: 0px 5px 25px 0px var(--filter-button-shadow-color);
 `;
 var MenuItem = styled_components.default.button`
   display: flex;
   align-items: center;
-  gap: 4px;
+  gap: 12px;
   width: 100%;
   height: var(--button-height, 32px);
-  padding: 3px 8px;
+  padding: 0 8px;
   border: none;
   border-bottom: 1px solid var(--grey-7);
   background: transparent;
@@ -12864,11 +12892,15 @@ var MenuItem = styled_components.default.button`
   text-align: left;
   transition: background-color var(--speed-fast) var(--easing-primary-in-out);
 
-  & svg [stroke] { stroke: var(--grey-12); }
+  & svg [stroke] { stroke: var(--grey-10); }
 
   &:last-child { border-bottom: none; }
   &:hover:enabled { background-color: var(--grey-3); }
-  &:disabled { cursor: not-allowed; opacity: 0.5; }
+  &:disabled {
+    cursor: not-allowed;
+    color: var(--grey-7);
+    & svg [stroke] { stroke: var(--grey-7); }
+  }
 
   ${({ $current }) => $current && styled_components.css`
     background-color: var(--grey-4);
@@ -12878,6 +12910,8 @@ var MenuItem = styled_components.default.button`
 var CheckSlot = styled_components.default.span`
   display: flex;
   margin-left: auto;
+
+  & svg [stroke] { stroke: var(--primary-11); }
 `;
 var ChipDropdown = ({ items, icon = "FilterEllipsis", label, selectedId, checkIcon = "Success", triggerLabel, noDivider = false, disabled = false, onOpenChange, onKeyDown, ...props }) => {
 	const [isOpen, setIsOpen] = (0, react.useState)(false);
@@ -13589,13 +13623,16 @@ var SplitLayout = ({ mainArea, sideArea, layout = "horizontal", reverse, divider
 		};
 	}, [handleMouseLeaveViewport]);
 	const resizeLineArrowDirection = () => {
-		if (sideAreaState === "collapsed" || sideAreaState === "peeking") if (layout === "horizontal") if (!reverse) return "left";
-		else return "right";
-		else if (!reverse) return "up";
-		else return "down";
-		else if (layout === "horizontal") if (!reverse) return "right";
-		else return "left";
-		else if (!reverse) return "down";
+		if (sideAreaState === "collapsed" || sideAreaState === "peeking") {
+			if (layout === "horizontal") {
+				if (!reverse) return "left";
+				else return "right";
+			} else if (!reverse) return "up";
+			else return "down";
+		} else if (layout === "horizontal") {
+			if (!reverse) return "right";
+			else return "left";
+		} else if (!reverse) return "down";
 		else return "up";
 	};
 	const resizeLineState = () => {
@@ -14047,8 +14084,9 @@ var Content$1 = styled_components.default.div`
 `;
 var ContentLayout = ({ layout = "default", HeaderContent = {}, children }) => {
 	const { PageHeaderArea, TabsElementArea, UtilityHeaderOptions } = HeaderContent;
+	const containerClass = `content-layout-${layout}`;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Container$16, {
-		className: `content-layout-${layout}`,
+		className: containerClass,
 		children: [
 			UtilityHeaderOptions ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(UtilityHeader, { ...UtilityHeaderOptions }) : null,
 			PageHeaderArea ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(HeaderArea, { children: PageHeaderArea }) : null,
@@ -14119,6 +14157,7 @@ var CoreStyle = styled_components.css`
   font-weight: 500;
   line-height: 12px; /* 85.714% */
   white-space: nowrap;
+  user-select: none;
 
   transition: opacity var(--speed-fast) var(--easing-primary-out);
 
@@ -14225,46 +14264,47 @@ var TopBarBadge = ({ text, color, linkHref, linkTo, linkText, onClick }) => {
 		defaultTextElement,
 		linkTextElement
 	]);
+	const badgeComponent = (0, react.useMemo)(() => {
+		if (onClick) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ContainerButton, {
+			$themeColor: color,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				onClick,
+				type: "button",
+				children: renderContent
+			})
+		});
+		else if (linkTo) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ContainerLinked, {
+			$themeColor: color,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_router_dom.Link, {
+				to: linkTo,
+				children: renderContent
+			})
+		});
+		else if (linkHref) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ContainerLinked, {
+			$themeColor: color,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
+				href: linkHref,
+				children: renderContent
+			})
+		});
+		else return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ContainerStatic, {
+			$themeColor: color,
+			children: defaultTextElement
+		});
+	}, [
+		onClick,
+		linkTo,
+		linkHref,
+		color,
+		renderContent,
+		defaultTextElement
+	]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Container$15, {
 		$ready: ready,
 		$minWidth: minWidth,
 		onPointerEnter: () => ready && setHover(true),
 		onPointerLeave: () => ready && setHover(false),
-		children: (0, react.useMemo)(() => {
-			if (onClick) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ContainerButton, {
-				$themeColor: color,
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-					onClick,
-					type: "button",
-					children: renderContent
-				})
-			});
-			else if (linkTo) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ContainerLinked, {
-				$themeColor: color,
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_router_dom.Link, {
-					to: linkTo,
-					children: renderContent
-				})
-			});
-			else if (linkHref) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ContainerLinked, {
-				$themeColor: color,
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
-					href: linkHref,
-					children: renderContent
-				})
-			});
-			else return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ContainerStatic, {
-				$themeColor: color,
-				children: defaultTextElement
-			});
-		}, [
-			onClick,
-			linkTo,
-			linkHref,
-			color,
-			renderContent,
-			defaultTextElement
-		])
+		children: badgeComponent
 	});
 };
 //#endregion
@@ -15518,27 +15558,28 @@ var generateSubmenus = (submenu, onClickCallback) => {
 	grouping.push([]);
 	submenu.forEach((item, key) => {
 		const { title, href, isExternalLink } = item;
-		if (href) if (isExternalLink) grouping[grouping.length - 1].push(/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SubmenuItem, {
-			$isActive: false,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(SubmenuItemAnchor, {
-				href,
-				target: "_blank",
-				children: [title, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ExternalIconWrapper, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_LineUIVideoBase.Icon, {
-					icon: "ExternalLink",
-					color: "dimmed",
-					size: 10
-				}) })]
-			})
-		}, key));
-		else grouping[grouping.length - 1].push(/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SubmenuItem, {
-			$isActive: false,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SubmenuItemLink, {
-				to: href,
-				onClick: () => onClickCallback?.(-1),
-				children: title
-			})
-		}, key));
-		else {
+		if (href) {
+			if (isExternalLink) grouping[grouping.length - 1].push(/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SubmenuItem, {
+				$isActive: false,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(SubmenuItemAnchor, {
+					href,
+					target: "_blank",
+					children: [title, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ExternalIconWrapper, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_LineUIVideoBase.Icon, {
+						icon: "ExternalLink",
+						color: "dimmed",
+						size: 10
+					}) })]
+				})
+			}, key));
+			else grouping[grouping.length - 1].push(/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SubmenuItem, {
+				$isActive: false,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SubmenuItemLink, {
+					to: href,
+					onClick: () => onClickCallback?.(-1),
+					children: title
+				})
+			}, key));
+		} else {
 			if (grouping[grouping.length - 1].length > 1) grouping.push([]);
 			grouping[grouping.length - 1].push(/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SubmenuHeader, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SubmenuItemTitle, { children: title }) }, key));
 		}