@warmio/ui 1.3.0 → 1.4.0

package/README.md

@@ -1,7 +1,7 @@
 # `@warmio/ui`
 
-Portable React components shared by Warm products. Install `@warmio/ui@1.3.0` with the exact
-`@warmio/design@1.5.0` CSS/primitive contract, import `@warmio/design/globals.css` once, and add
+Portable React components shared by Warm products. Install `@warmio/ui@1.4.0` with the exact
+`@warmio/design@1.6.0` CSS/primitive contract, import `@warmio/design/globals.css` once, and add
 the package's compiled files to Tailwind's source detection:
 
 ## Why these files are separate
@@ -19,9 +19,9 @@ deployment permission to publish packages.
 @source '../node_modules/@warmio/ui/dist';
 ```
 
-The `1.3.0` public UI surface contains the Warm badge, Text and `StackedDisplay`, DropdownMenu,
+The `1.4.0` public UI surface contains the Warm badge, Text and `StackedDisplay`, DropdownMenu,
 Sheet, the complete responsive Sidebar family, and the `ProductHeader` composition. `Button`,
-`ButtonLink`, `Logo`, and `WarmLogoIcon` are directly owned by `@warmio/design@1.5.0` and are
+`ButtonLink`, `Logo`, and `WarmLogoIcon` are directly owned by `@warmio/design@1.6.0` and are
 re-exported through UI where applicable. `ProductHeader` owns the responsive frame,
 breadcrumb/title semantics, leading slot, action slot, and optional portal targets used by Warm
 product shells. Styling is sealed: use documented semantic properties and layout wrappers, never

package/dist/chunks/{chunk-CIYWFBEJ.js → chunk-4RQCHKAW.js}

@@ -6,16 +6,18 @@ import {
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 var textClassNameByVariant = {
-  display: "block text-[1.35rem] font-normal leading-snug tracking-normal [font-family:var(--font-display)] @3xl/main:text-[1.875rem]",
+  display: "block text-3xl font-normal leading-snug tracking-normal [font-family:var(--font-display)]",
   displayCompact: "block text-xl font-normal leading-snug tracking-normal [font-family:var(--font-display)] @3xl/main:text-2xl",
   displayHero: "block text-3xl font-bold leading-tight tracking-normal text-foreground sm:text-4xl lg:text-5xl",
   metricValue: "block text-2xl",
   metricValueLead: "block text-3xl",
   metricDisplay: "block text-5xl font-bold leading-none tracking-tight",
+  metricDisplayCompact: "block text-4xl font-bold leading-none tracking-tight",
   overline: "block font-mono text-xs font-bold uppercase tracking-[0.18em]",
   micro: "text-xs font-normal leading-snug",
   microStrong: "text-xs font-bold leading-snug",
   body: "text-sm",
+  lede: "text-[1.35rem] leading-snug",
   caption: "text-xs",
   helper: "text-xs",
   sectionTitle: "text-base font-bold leading-normal"
@@ -27,10 +29,12 @@ var defaultTextElementByVariant = {
   metricValue: "span",
   metricValueLead: "span",
   metricDisplay: "span",
+  metricDisplayCompact: "span",
   overline: "span",
   micro: "span",
   microStrong: "span",
   body: "p",
+  lede: "p",
   caption: "span",
   helper: "small",
   sectionTitle: "h3"
@@ -53,7 +57,7 @@ var textClassNameByAlign = {
 };
 function Text({
   as,
-  variant = "micro",
+  variant = "caption",
   tone = "default",
   align,
   numeric = false,
@@ -86,8 +90,8 @@ function StackedDisplay({
   presentation = "dashboard",
   secondLine
 }) {
-  const firstLineClassName = presentation === "welcome" ? "block text-muted-foreground font-editorial" : "block text-foreground";
-  const secondLineClassName = presentation === "welcome" ? "block text-foreground" : "block text-muted-foreground font-editorial";
+  const firstLineClassName = presentation === "welcome" ? "block text-muted-foreground" : "block text-foreground";
+  const secondLineClassName = presentation === "welcome" ? "block text-foreground" : "block text-muted-foreground";
   return /* @__PURE__ */ jsxs(Text, { as: "span", variant: "displayCompact", align, children: [
     /* @__PURE__ */ jsx("span", { className: firstLineClassName, children: firstLine }),
     /* @__PURE__ */ jsx("span", { className: secondLineClassName, children: secondLine })

package/dist/chunks/{chunk-LHHUTDZR.js → chunk-FW2EHGRK.js}

@@ -114,8 +114,8 @@ import { MenuIcon, PanelLeftIcon } from "lucide-react";
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var SIDEBAR_COOKIE_NAME = "sidebar_state";
 var SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
-function readSidebarCookie() {
-  const match = document.cookie.match(/(?:^|; )sidebar_state=(true|false)(?:;|$)/);
+function readSidebarCookie(cookie) {
+  const match = cookie.match(/(?:^|; )sidebar_state=(true|false)(?:;|$)/);
   if (!match) return null;
   return match[1] === "true";
 }
@@ -130,24 +130,21 @@ function useSidebar() {
   }
   return context;
 }
+function subscribeToForceIconSidebar(onStoreChange) {
+  const mql = window.matchMedia(TABLET_ICON_SIDEBAR_QUERY);
+  mql.addEventListener("change", onStoreChange);
+  return () => mql.removeEventListener("change", onStoreChange);
+}
+function getForceIconSidebarSnapshot() {
+  return window.matchMedia(TABLET_ICON_SIDEBAR_QUERY).matches;
+}
 function useForceIconSidebar(forceIconAtTablet) {
-  return React4.useSyncExternalStore(
-    React4.useCallback(
-      (onStoreChange) => {
-        if (!forceIconAtTablet) return () => {
-        };
-        const mql = window.matchMedia(TABLET_ICON_SIDEBAR_QUERY);
-        mql.addEventListener("change", onStoreChange);
-        return () => mql.removeEventListener("change", onStoreChange);
-      },
-      [forceIconAtTablet]
-    ),
-    React4.useCallback(() => {
-      if (!forceIconAtTablet) return false;
-      return window.matchMedia(TABLET_ICON_SIDEBAR_QUERY).matches;
-    }, [forceIconAtTablet]),
+  const isTablet = React4.useSyncExternalStore(
+    subscribeToForceIconSidebar,
+    getForceIconSidebarSnapshot,
     getServerForceIconSidebarSnapshot
   );
+  return forceIconAtTablet && isTablet;
 }
 function SidebarProvider({
   defaultOpen = true,
@@ -168,18 +165,19 @@ function SidebarProvider({
     (_, nextOpen) => nextOpen,
     defaultOpen
   );
-  React4.useLayoutEffect(() => {
-    const stored = readSidebarCookie();
-    if (stored === null) return;
-    _setOpen(stored);
-  }, []);
+  const cookieHydratedRef = React4.useRef(false);
+  const hydrateSidebarCookie = (node) => {
+    if (!node || cookieHydratedRef.current) return;
+    cookieHydratedRef.current = true;
+    const stored = readSidebarCookie(document.cookie);
+    if (stored !== null) _setOpen(stored);
+  };
   const open = openProp ?? _open;
   const setOpen = React4.useCallback(
-    (value) => {
+    (openState) => {
       if (!allowUserCollapse) {
         return;
       }
-      const openState = typeof value === "function" ? value(open) : value;
       if (setOpenProp) {
         setOpenProp(openState);
       } else {
@@ -187,29 +185,16 @@ function SidebarProvider({
       }
       document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
     },
-    [allowUserCollapse, setOpenProp, open]
+    [allowUserCollapse, setOpenProp]
   );
   const toggleSidebar = React4.useCallback(() => {
     if (!allowUserCollapse) {
       return;
     }
     setSidebarMotionEnabled(true);
-    return isMobile ? setOpenMobile((open2) => !open2) : setOpen((open2) => !open2);
-  }, [allowUserCollapse, isMobile, setOpen, setOpenMobile]);
+    return isMobile ? setOpenMobile((open2) => !open2) : setOpen(!open);
+  }, [allowUserCollapse, isMobile, open, setOpen]);
   const toggleSidebarEvent = React4.useEffectEvent(toggleSidebar);
-  React4.useEffect(() => {
-    if (!allowUserCollapse) {
-      return;
-    }
-    const handleKeyDown = (event) => {
-      if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
-        event.preventDefault();
-        toggleSidebarEvent();
-      }
-    };
-    window.addEventListener("keydown", handleKeyDown);
-    return () => window.removeEventListener("keydown", handleKeyDown);
-  }, [allowUserCollapse]);
   const state = forceIcon && !isMobile ? "collapsed" : open ? "expanded" : "collapsed";
   const contextValue = React4.useMemo(
     () => ({
@@ -224,9 +209,23 @@ function SidebarProvider({
     }),
     [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar, sidebarMotionEnabled]
   );
+  React4.useEffect(() => {
+    if (!allowUserCollapse) {
+      return;
+    }
+    const handleKeyDown = (event) => {
+      if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
+        event.preventDefault();
+        toggleSidebarEvent();
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [allowUserCollapse]);
   return /* @__PURE__ */ jsx2(SidebarContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx2(
     "div",
     {
+      ref: hydrateSidebarCookie,
       "data-slot": "sidebar-wrapper",
       style,
       className: cn(
@@ -363,7 +362,7 @@ function SidebarInset({ className, ...props }) {
     {
       "data-slot": "sidebar-inset",
       className: cn(
-        "relative flex w-full flex-1 flex-col bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
+        "relative flex min-h-0 w-full flex-1 flex-col bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
         className
       ),
       ...props

package/dist/chunks/chunk-HDCV4ACN.js

@@ -0,0 +1,469 @@
+import {
+  cn
+} from "./chunk-VIB7OX7D.js";
+
+// ../ui/src/warmio/flame-expression-video.tsx
+import { useRef } from "react";
+
+// ../ui/src/warmio/flame-expression-videos.ts
+var FLAME_EXPRESSION_VIDEO_PACK = "v4";
+var FLAME_EXPRESSION_VIDEO_IDS = ["NORMAL", "LUL", "POG", "CRY", "LOVE", "HYPE"];
+var LEGACY_MASCOT_MOOD_TO_EXPRESSION = {
+  calm: "NORMAL",
+  happy: "LUL",
+  focused: "NORMAL",
+  relieved: "LOVE",
+  /** @deprecated Use peekEyes="closed" on auth peek instead. */
+  "password-retry": "NORMAL",
+  frustrated: "CRY"
+};
+function isLegacyMascotMood(expression) {
+  return Object.hasOwn(LEGACY_MASCOT_MOOD_TO_EXPRESSION, expression);
+}
+function isFlameExpressionVideoId(expression) {
+  for (const id of FLAME_EXPRESSION_VIDEO_IDS) {
+    if (id === expression) return true;
+  }
+  return false;
+}
+function getFlameExpressionVideoSrc(expression, theme) {
+  return `/flame-expressions/${FLAME_EXPRESSION_VIDEO_PACK}/${expression}/open_${theme}.mp4`;
+}
+function getFlameMascotPeekVideoSrc(eyes, theme) {
+  return `/mascot/${eyes}_${theme}.mp4`;
+}
+function resolveFlameExpressionVideoId(expression) {
+  if (!expression) return "NORMAL";
+  if (isLegacyMascotMood(expression)) {
+    return LEGACY_MASCOT_MOOD_TO_EXPRESSION[expression];
+  }
+  if (isFlameExpressionVideoId(expression)) {
+    return expression;
+  }
+  return "NORMAL";
+}
+
+// ../ui/src/warmio/flame-expression-video.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var LIGHT_KEY = 247;
+var DARK_KEY = 17;
+var HARD_KEY = 16;
+var SOFT_KEY = 42;
+function prefersReducedMotion() {
+  return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+function isDarkDocument() {
+  return document.documentElement.classList.contains("dark");
+}
+function pixelChannel(pixels, index) {
+  const value = pixels[index];
+  if (value === void 0) throw new Error("Canvas pixel data is unexpectedly sparse");
+  return value;
+}
+function isDarkForRoot(root) {
+  const theme = root.dataset["flameTheme"];
+  if (theme === "dark") return true;
+  if (theme === "light") return false;
+  return isDarkDocument();
+}
+function punchKeyedBackground(context, width, height, dark) {
+  const frame = context.getImageData(0, 0, width, height);
+  const pixels = frame.data;
+  const key = dark ? DARK_KEY : LIGHT_KEY;
+  for (let index = 0; index < pixels.length; index += 4) {
+    const red = pixelChannel(pixels, index);
+    const green = pixelChannel(pixels, index + 1);
+    const blue = pixelChannel(pixels, index + 2);
+    if (!dark) {
+      const minChannel = Math.min(red, green, blue);
+      if (minChannel > LIGHT_KEY) {
+        pixels[index] = 255;
+        pixels[index + 1] = 255;
+        pixels[index + 2] = 255;
+        pixels[index + 3] = 255;
+        continue;
+      }
+    }
+    const distance = Math.max(Math.abs(red - key), Math.abs(green - key), Math.abs(blue - key));
+    if (distance <= HARD_KEY) {
+      pixels[index + 3] = 0;
+      continue;
+    }
+    if (distance < SOFT_KEY) {
+      const alpha = pixelChannel(pixels, index + 3);
+      pixels[index + 3] = Math.round(alpha * ((distance - HARD_KEY) / (SOFT_KEY - HARD_KEY)));
+    }
+  }
+  context.putImageData(frame, 0, 0);
+}
+function syncCanvasSize(canvas, context) {
+  const cssSize = canvas.clientWidth;
+  if (cssSize === 0) return false;
+  const pixelRatio = Math.min(Math.max(window.devicePixelRatio || 1, 2), 3);
+  const nextSize = Math.max(1, Math.round(cssSize * pixelRatio));
+  if (canvas.width !== nextSize || canvas.height !== nextSize) {
+    canvas.width = nextSize;
+    canvas.height = nextSize;
+  }
+  context.imageSmoothingEnabled = true;
+  context.imageSmoothingQuality = "high";
+  return true;
+}
+function drawKeyedFrame(video, canvas, context, dark) {
+  if (!syncCanvasSize(canvas, context) || video.readyState < HTMLMediaElement.HAVE_CURRENT_DATA) {
+    return;
+  }
+  context.drawImage(video, 0, 0, canvas.width, canvas.height);
+  punchKeyedBackground(context, canvas.width, canvas.height, dark);
+}
+function sourceForTheme(video, dark) {
+  return dark ? video.dataset["darkSrc"] : video.dataset["lightSrc"];
+}
+function bindKeyedExpressionVideo(root) {
+  if (root.dataset["bound"] === "true") return () => void 0;
+  root.dataset["bound"] = "true";
+  const video = root.querySelector("[data-flame-expression-video-source]");
+  const canvas = root.querySelector("[data-flame-expression-video-frame]");
+  if (!video || !canvas) {
+    delete root.dataset["bound"];
+    return () => void 0;
+  }
+  const context = canvas.getContext("2d", { willReadFrequently: true });
+  if (!context) {
+    root.hidden = true;
+    delete root.dataset["bound"];
+    return () => void 0;
+  }
+  let dark = isDarkForRoot(root);
+  let playing = false;
+  let visible = true;
+  let frameHandle = 0;
+  let lastVideoTime = -1;
+  const reducedMotion = prefersReducedMotion();
+  let loadedDataListener = null;
+  const drawFrame = () => {
+    const nextDark = isDarkForRoot(root);
+    if (nextDark !== dark) {
+      applyTheme(nextDark);
+      return;
+    }
+    drawKeyedFrame(video, canvas, context, dark);
+  };
+  const stopLoop = () => {
+    cancelAnimationFrame(frameHandle);
+    frameHandle = 0;
+    lastVideoTime = -1;
+  };
+  const loop = () => {
+    if (!playing || reducedMotion) return;
+    if (video.currentTime !== lastVideoTime) {
+      lastVideoTime = video.currentTime;
+      drawFrame();
+    }
+    frameHandle = requestAnimationFrame(loop);
+  };
+  const startLoop = () => {
+    if (playing || reducedMotion) {
+      drawFrame();
+      return;
+    }
+    playing = true;
+    void video.play().catch(() => void 0);
+    loop();
+  };
+  const pauseLoop = () => {
+    playing = false;
+    video.pause();
+    stopLoop();
+  };
+  const playWhenSized = () => {
+    if (root.clientWidth === 0) return;
+    drawFrame();
+    if (!visible || reducedMotion || playing) return;
+    startLoop();
+  };
+  const continueFrom = (resumeAt) => {
+    if (Number.isFinite(resumeAt) && resumeAt > 0) {
+      try {
+        video.currentTime = resumeAt;
+      } catch {
+      }
+    }
+    drawFrame();
+    if (visible && !reducedMotion) {
+      startLoop();
+    }
+  };
+  const waitForData = (resumeAt) => {
+    if (loadedDataListener) {
+      video.removeEventListener("loadeddata", loadedDataListener);
+    }
+    loadedDataListener = () => continueFrom(resumeAt);
+    if (video.readyState >= HTMLMediaElement.HAVE_CURRENT_DATA) {
+      loadedDataListener();
+      loadedDataListener = null;
+      return;
+    }
+    video.addEventListener("loadeddata", loadedDataListener, { once: true });
+    void video.play().catch(() => void 0);
+  };
+  const applyTheme = (nextDark) => {
+    const nextSrc = sourceForTheme(video, nextDark);
+    if (!nextSrc) return;
+    const resumeAt = video.currentTime;
+    dark = nextDark;
+    const assignedSrc = video.getAttribute("src");
+    const alreadyOnSource = video.networkState !== HTMLMediaElement.NETWORK_EMPTY && (video.dataset["activeSrc"] === nextSrc || assignedSrc === nextSrc);
+    if (alreadyOnSource) {
+      video.dataset["activeSrc"] = nextSrc;
+      waitForData(resumeAt);
+      return;
+    }
+    pauseLoop();
+    video.dataset["activeSrc"] = nextSrc;
+    video.src = nextSrc;
+    waitForData(resumeAt);
+  };
+  syncCanvasSize(canvas, context);
+  applyTheme(dark);
+  const visibility = new IntersectionObserver(
+    (entries) => {
+      visible = entries.some((entry) => entry.isIntersecting);
+      if (!visible) {
+        pauseLoop();
+        return;
+      }
+      if (reducedMotion) {
+        drawFrame();
+        return;
+      }
+      startLoop();
+    },
+    { threshold: 0 }
+  );
+  visibility.observe(root);
+  const resize = new ResizeObserver(playWhenSized);
+  resize.observe(root);
+  const themeObserver = new MutationObserver(() => {
+    const nextDark = isDarkForRoot(root);
+    if (nextDark === dark) return;
+    applyTheme(nextDark);
+  });
+  themeObserver.observe(document.documentElement, {
+    attributes: true,
+    attributeFilter: ["class"]
+  });
+  const themeOverrideObserver = new MutationObserver(() => {
+    const nextDark = isDarkForRoot(root);
+    if (nextDark === dark) return;
+    applyTheme(nextDark);
+  });
+  themeOverrideObserver.observe(root, {
+    attributes: true,
+    attributeFilter: ["data-flame-theme"]
+  });
+  return () => {
+    visibility.disconnect();
+    resize.disconnect();
+    themeObserver.disconnect();
+    themeOverrideObserver.disconnect();
+    pauseLoop();
+    if (loadedDataListener) {
+      video.removeEventListener("loadeddata", loadedDataListener);
+    }
+    video.removeAttribute("src");
+    video.load();
+    delete video.dataset["activeSrc"];
+    delete root.dataset["bound"];
+  };
+}
+function readDomVideoTheme() {
+  if (typeof document === "undefined") return "light";
+  const mode = document.documentElement.getAttribute("data-theme-mode");
+  if (mode === "dark") return "dark";
+  if (mode === "light") return "light";
+  if (globalThis.matchMedia?.("(prefers-color-scheme: dark)").matches) return "dark";
+  return "light";
+}
+function WarmFlameExpressionVideo({
+  expression: expressionProp = "NORMAL",
+  size = "default",
+  label = null,
+  theme: themeProp,
+  peekEyes
+}) {
+  const cleanupRef = useRef(void 0);
+  const expression = resolveFlameExpressionVideoId(expressionProp);
+  const videoTheme = themeProp ?? readDomVideoTheme();
+  const lightSrc = peekEyes ? getFlameMascotPeekVideoSrc(peekEyes, "light") : getFlameExpressionVideoSrc(expression, "light");
+  const darkSrc = peekEyes ? getFlameMascotPeekVideoSrc(peekEyes, "dark") : getFlameExpressionVideoSrc(expression, "dark");
+  const source = videoTheme === "dark" ? darkSrc : lightSrc;
+  const setRootRef = useRef(null);
+  if (setRootRef.current === null) {
+    setRootRef.current = (node) => {
+      cleanupRef.current?.();
+      cleanupRef.current = void 0;
+      if (!node) return;
+      cleanupRef.current = bindKeyedExpressionVideo(node);
+    };
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: setRootRef.current,
+      className: cn(
+        "warm-flame-expression-video",
+        "pointer-events-none inline-flex shrink-0 select-none"
+      ),
+      "data-slot": "warm-flame-expression-video",
+      "data-size": size,
+      "data-expression": expression,
+      "data-flame-peek-eyes": peekEyes,
+      "data-flame-theme": videoTheme,
+      role: label ? "img" : void 0,
+      "aria-label": label ?? void 0,
+      "aria-hidden": label ? void 0 : true,
+      children: [
+        /* @__PURE__ */ jsx(
+          "video",
+          {
+            className: "warm-flame-expression-video__source",
+            "data-flame-expression-video-source": "",
+            "data-light-src": lightSrc,
+            "data-dark-src": darkSrc,
+            src: source,
+            muted: true,
+            loop: true,
+            playsInline: true,
+            preload: "auto",
+            disablePictureInPicture: true,
+            "aria-hidden": "true"
+          }
+        ),
+        /* @__PURE__ */ jsx("canvas", { className: "warm-flame-expression-video__frame", "data-flame-expression-video-frame": "" })
+      ]
+    }
+  );
+}
+
+// ../ui/src/warmio/logo.tsx
+import {
+  Logo,
+  WarmLogoIcon
+} from "@warmio/design/logo";
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var brandedLogoShellClassNameBySize = {
+  sm: "size-8",
+  md: "size-10",
+  lg: "size-14"
+};
+var brandedLogoIconClassNameBySize = {
+  sm: "size-5",
+  md: "size-6",
+  lg: "size-8"
+};
+var _WarmLogoGlyph = /* @__PURE__ */ jsxs2(Fragment, { children: [
+  /* @__PURE__ */ jsx2(
+    "path",
+    {
+      d: "M 33.500 40.660 C 20.206 42.744, 0 48.560, -0 50.302 C -0 51.759, 123.955 348.889, 127.738 356.500 C 142.182 385.561, 169.450 410.275, 198.946 421.040 C 218.922 428.330, 243.683 430.825, 264.526 427.648 C 277.151 425.724, 294.628 420.011, 294.194 417.952 C 293.790 416.040, 172.732 124.599, 168.522 115.405 C 161.779 100.679, 149.168 84.171, 135.093 71.646 C 119.358 57.644, 98.880 47.362, 77 42.478 C 69.645 40.836, 40.220 39.606, 33.500 40.660",
+      fill: "currentColor"
+    }
+  ),
+  /* @__PURE__ */ jsx2(
+    "path",
+    {
+      d: "M 229.651 41.597 C 217.916 43.718, 202.443 49.144, 202.744 51.035 C 203.418 55.268, 329.689 356.584, 333.687 363.500 C 340.525 375.327, 345.293 381.483, 355.408 391.538 C 374.603 410.619, 398.878 423.014, 425.907 427.533 C 439.649 429.831, 463.594 429.132, 476 426.072 C 489.892 422.645, 497.188 419.815, 496.703 418.043 C 495.416 413.331, 371.058 116.094, 367.406 109 C 349.467 74.149, 313.008 47.875, 273.752 41.509 C 262.281 39.648, 240.195 39.693, 229.651 41.597",
+      fill: "currentColor"
+    }
+  ),
+  /* @__PURE__ */ jsx2(
+    "path",
+    {
+      d: "M 463 40.593 C 451.670 42.545, 447.288 43.569, 439 46.203 C 433.775 47.864, 429.338 49.372, 429.140 49.555 C 428.942 49.737, 434.670 64.021, 441.868 81.297 C 455.574 114.190, 462.215 131.660, 468.447 151.208 C 475.360 172.892, 486.124 186.213, 503.834 194.997 C 530.956 208.450, 564.982 201.679, 583.654 179.112 C 604.399 154.041, 605.407 121.944, 586.291 95.155 C 567.827 69.280, 539.107 50.114, 508 42.907 C 500.680 41.212, 494.713 40.644, 482 40.434 C 472.925 40.284, 464.375 40.356, 463 40.593",
+      fill: "currentColor"
+    }
+  )
+] });
+function WarmBrandedLogoMark({
+  size = "md",
+  className,
+  logoClassName
+}) {
+  return /* @__PURE__ */ jsxs2(
+    "span",
+    {
+      className: cn(
+        "relative inline-flex shrink-0 items-center justify-center",
+        brandedLogoShellClassNameBySize[size],
+        className
+      ),
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx2("span", { className: "pointer-events-none absolute inset-0 scale-[1.35] opacity-90", children: /* @__PURE__ */ jsx2(WarmFlameExpressionVideo, { expression: "calm", label: null }) }),
+        /* @__PURE__ */ jsx2(
+          "svg",
+          {
+            xmlns: "http://www.w3.org/2000/svg",
+            viewBox: "0 0 600 600",
+            className: cn(
+              "relative z-10 drop-shadow-sm",
+              brandedLogoIconClassNameBySize[size],
+              logoClassName
+            ),
+            "aria-hidden": "true",
+            children: /* @__PURE__ */ jsx2("g", { transform: "translate(0 108)", children: _WarmLogoGlyph })
+          }
+        )
+      ]
+    }
+  );
+}
+function WarmBrandedLogoLink({
+  href,
+  ariaLabel = "Warm home",
+  size = "md",
+  className,
+  logoClassName
+}) {
+  return /* @__PURE__ */ jsx2("a", { href, "aria-label": ariaLabel, className: "inline-flex shrink-0 items-center", children: /* @__PURE__ */ jsx2(
+    WarmBrandedLogoMark,
+    {
+      size,
+      ...className !== void 0 ? { className } : {},
+      ...logoClassName !== void 0 ? { logoClassName } : {}
+    }
+  ) });
+}
+function WarmBrandedLogoMarkStatic({
+  className,
+  logoClassName
+}) {
+  return /* @__PURE__ */ jsxs2("span", { className: cn("relative inline-flex size-8 items-center justify-center", className), children: [
+    /* @__PURE__ */ jsx2(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: "absolute inset-0 rounded-full bg-gradient-to-br from-primary/90 via-warning/80 to-primary/70"
+      }
+    ),
+    /* @__PURE__ */ jsx2(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 600 600",
+        className: cn("relative z-10 size-5 drop-shadow-sm", logoClassName),
+        "aria-hidden": "true",
+        children: /* @__PURE__ */ jsx2("g", { transform: "translate(0 108)", children: _WarmLogoGlyph })
+      }
+    )
+  ] });
+}
+
+export {
+  WarmBrandedLogoMark,
+  WarmBrandedLogoLink,
+  WarmBrandedLogoMarkStatic,
+  Logo,
+  WarmLogoIcon
+};