@inf-monkeys-tech/monkeys-design 0.4.37 → 0.4.39

package/dist/index.mjs

@@ -3,6 +3,8 @@ import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import * as ContextMenu from '@radix-ui/react-context-menu';
 import * as DropdownMenu3 from '@radix-ui/react-dropdown-menu';
 import { useSensors, useSensor, PointerSensor, DndContext, DragOverlay, useDroppable, useDraggable } from '@dnd-kit/core';
+import '@dnd-kit/sortable';
+import '@dnd-kit/utilities';
 import { toast as toast$1, Toaster } from 'sonner';
 import * as Tooltip from '@radix-ui/react-tooltip';
 
@@ -20358,6 +20360,12 @@ var createBackgroundImage = (gradient, imageUrl) => {
 };
 var normalizeLogoPosition = (position) => position && LOGIN_LOGO_POSITIONS.includes(position) ? position : "bottom";
 var normalizeLogoScale = (scale) => typeof scale === "number" && Number.isFinite(scale) && scale > 0 ? scale : void 0;
+var resolveLogoUrls = (logo) => {
+  const url = normalizeCssValue(logo?.url);
+  const lightUrl = normalizeCssValue(logo?.lightUrl) || url;
+  const darkUrl = normalizeCssValue(logo?.darkUrl) || url || lightUrl;
+  return { lightUrl, darkUrl };
+};
 function LoginPage({
   className,
   style,
@@ -20387,6 +20395,9 @@ function LoginPage({
   const backgroundMode = backgroundImage ? "custom" : "default";
   const logoPosition = normalizeLogoPosition(logo?.position);
   const logoScale = normalizeLogoScale(logo?.scale);
+  const { lightUrl: logoLightUrl, darkUrl: logoDarkUrl } = resolveLogoUrls(logo);
+  const hasLogo = Boolean(logoLightUrl || logoDarkUrl);
+  const usesSeparateModeLogos = Boolean(logoLightUrl && logoDarkUrl && logoLightUrl !== logoDarkUrl);
   useEffect(() => {
     if (!availableMethods.length) {
       setInternalMethodId(void 0);
@@ -20449,19 +20460,42 @@ function LoginPage({
           }
         ),
         toolbar ? /* @__PURE__ */ jsx("div", { className: "login-page__toolbar", "data-login-part": "toolbar", children: toolbar }) : null,
-        logo?.url ? /* @__PURE__ */ jsx(
+        hasLogo ? /* @__PURE__ */ jsx(
           "div",
           {
             className: `login-page__logo login-page__logo--${logoPosition}`,
             "data-login-part": "logo",
             "data-logo-position": logoPosition,
-            children: /* @__PURE__ */ jsx(
+            children: usesSeparateModeLogos ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(
+                "img",
+                {
+                  className: "login-page__logo-image login-page__logo-image--light",
+                  "data-login-part": "logo-image",
+                  "data-login-logo-mode": "light",
+                  src: logoLightUrl,
+                  alt: logo?.alt ?? "",
+                  style: logoScale ? { transform: `scale(${logoScale})` } : void 0
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "img",
+                {
+                  className: "login-page__logo-image login-page__logo-image--dark",
+                  "data-login-part": "logo-image",
+                  "data-login-logo-mode": "dark",
+                  src: logoDarkUrl,
+                  alt: logo?.alt ?? "",
+                  style: logoScale ? { transform: `scale(${logoScale})` } : void 0
+                }
+              )
+            ] }) : /* @__PURE__ */ jsx(
               "img",
               {
                 className: "login-page__logo-image",
                 "data-login-part": "logo-image",
-                src: logo.url,
-                alt: logo.alt ?? "",
+                src: logoLightUrl || logoDarkUrl,
+                alt: logo?.alt ?? "",
                 style: logoScale ? { transform: `scale(${logoScale})` } : void 0
               }
             )