scorer-ui-kit 3.0.4 → 3.0.5

package/dist/index.modern.js

@@ -2,7 +2,7 @@ import { a as Icon, c as animation, d as dimensions, f as fontFamily, i as Spinn
 import styled, { createGlobalStyle, css, keyframes } from "styled-components";
 import React, { Children, Fragment, cloneElement, createContext, isValidElement, useCallback, useContext, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useReducer, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import ReactDom from "react-dom";
+import ReactDOM from "react-dom";
 import { add, addMonths, eachDayOfInterval, eachWeekOfInterval, endOfDay, endOfMonth, endOfWeek, format, intervalToDuration, isAfter, isEqual, isSameDay, isSameMonth, isToday, isWithinInterval, min, set, startOfDay, startOfMonth } from "date-fns";
 import { Link, useLocation, useNavigate } from "react-router-dom";
 import { enUS, ja } from "date-fns/locale";
@@ -2726,7 +2726,7 @@ var Notification = ({ id, type = "info", message, icon = "", isPinned = false, a
 			}
 		};
 	}, []);
-	return message && !dismiss ? ReactDom.createPortal(/* @__PURE__ */ jsxs(Container$71, {
+	return message && !dismiss ? ReactDOM.createPortal(/* @__PURE__ */ jsxs(Container$71, {
 		$type: type,
 		$isClosing: slideUp,
 		$isVisible: isVisible,
@@ -2978,7 +2978,7 @@ var Tooltip = ({ icon, message, type, tooltipFor, tooltipPosition, maxWidth }) =
 		updateCoords
 	]);
 	if (!visible || !coords) return null;
-	return ReactDom.createPortal(/* @__PURE__ */ jsxs(TooltipWrapper, {
+	return ReactDOM.createPortal(/* @__PURE__ */ jsxs(TooltipWrapper, {
 		ref: tooltipRef,
 		$maxWidth: maxWidth,
 		$directionStyle: getDirectionStyle(tooltipPosition || dynamicPosition, coords),
@@ -5724,7 +5724,7 @@ var CropTool = ({ title = "Crop Image", cancelBtnTxt = "Cancel", cropBtnTxt = "C
 		if (!viewDimensions.isResizing) return;
 		viewDimensions.isResizing = false;
 	}, []);
-	return ReactDom.createPortal(/* @__PURE__ */ jsx(Container$57, { children: /* @__PURE__ */ jsxs(InnerContainer$1, { children: [/* @__PURE__ */ jsxs(ToolHeader, { children: [/* @__PURE__ */ jsxs(TextGroup$1, { children: [/* @__PURE__ */ jsx(Icon, {
+	return ReactDOM.createPortal(/* @__PURE__ */ jsx(Container$57, { children: /* @__PURE__ */ jsxs(InnerContainer$1, { children: [/* @__PURE__ */ jsxs(ToolHeader, { children: [/* @__PURE__ */ jsxs(TextGroup$1, { children: [/* @__PURE__ */ jsx(Icon, {
 		icon: "Crop",
 		size: 20,
 		color: "mono"
@@ -6208,7 +6208,7 @@ var Modal = ({ isOpen = false, isCloseEnable = true, closeText = "", width = "",
 		if (dismissCallback) dismissCallback();
 		onDismiss();
 	}, [onDismiss, dismissCallback]);
-	return isOpen ? ReactDom.createPortal(/* @__PURE__ */ jsx(Container$55, { children: /* @__PURE__ */ jsxs(LightBox, {
+	return isOpen ? ReactDOM.createPortal(/* @__PURE__ */ jsx(Container$55, { children: /* @__PURE__ */ jsxs(LightBox, {
 		ref: lightBoxRef,
 		$width: width,
 		$padding: padding,
@@ -12822,19 +12822,20 @@ var Menu = styled.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.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;
@@ -12847,11 +12848,15 @@ var MenuItem = styled.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 && css`
     background-color: var(--grey-4);
@@ -12861,6 +12866,8 @@ var MenuItem = styled.button`
 var CheckSlot = styled.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] = useState(false);
@@ -14996,7 +15003,7 @@ var TopBar = ({ hasNotifications = false, hasLanguage = false, selectedLanguageT
 			})
 		] })] })] }),
 		bottomAreaElement ? /* @__PURE__ */ jsx(BottomArea, { children: bottomAreaElement }) : null,
-		ReactDom.createPortal(/* @__PURE__ */ jsxs(DrawerPortalWrapper, { children: [
+		ReactDOM.createPortal(/* @__PURE__ */ jsxs(DrawerPortalWrapper, { children: [
 			/* @__PURE__ */ jsx(Drawer, {
 				$isOpen: openDrawer === "user",
 				children: /* @__PURE__ */ jsx(UserMenu, {
@@ -15641,7 +15648,7 @@ var MainMenu = ({ content, home = "/", logoMark, logoText, keepOpenText = "Keep
 	}, [focusedContext]);
 	return /* @__PURE__ */ jsx(PushContainer, {
 		$isPinned: menuState.isMenuPinned,
-		children: ReactDom.createPortal(/* @__PURE__ */ jsx(Container$9, {
+		children: ReactDOM.createPortal(/* @__PURE__ */ jsx(Container$9, {
 			$open: menuState.isMenuOpen,
 			$desktopSize: menuState.desktopSize,
 			onPointerEnter: menuState.isMenuPinned ? () => {} : autoMenuOpen,