@cakejp/design-system 0.17.1 → 0.19.0

package/dist/components/primitives/header.js

@@ -1,257 +1,301 @@
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
-import * as k from "react";
-import H from "iconsax-reactjs/dist/esm/ArrowDown2.js";
-import j from "iconsax-reactjs/dist/esm/ArrowLeft.js";
-import { cn as d } from "../../lib/utils.js";
-import { Button as z } from "../foundations/button.js";
-import { DropdownMenu as M, DropdownMenuTrigger as L, DropdownMenuContent as P, DropdownMenuItem as T } from "../foundations/dropdown-menu.js";
-function E(n) {
-  return d(
+"use client";
+import { jsx as e, jsxs as s, Fragment as W } from "react/jsx-runtime";
+import * as y from "react";
+import M from "iconsax-reactjs/dist/esm/ArrowDown2.js";
+import D from "iconsax-reactjs/dist/esm/ArrowLeft.js";
+import { cn as f } from "../../lib/utils.js";
+import { Button as k } from "../foundations/button.js";
+import { DropdownMenu as F, DropdownMenuTrigger as G, DropdownMenuContent as Z, DropdownMenuItem as V } from "../foundations/dropdown-menu.js";
+import { containerVariants as q } from "./container.js";
+function E({
+  containerSize: l,
+  shellClass: c,
+  layoutClass: a,
+  containerQuery: u = !1,
+  children: p,
+  ...d
+}) {
+  return l ? /* @__PURE__ */ e("header", { "data-slot": "header", className: c, ...d, children: /* @__PURE__ */ e(
+    "div",
+    {
+      "data-slot": "header-container",
+      "data-container-size": l,
+      className: f(
+        u && "@container",
+        q({ size: l, gutter: "none" }),
+        a
+      ),
+      children: p
+    }
+  ) }) : /* @__PURE__ */ e(
+    "header",
+    {
+      "data-slot": "header",
+      className: f(u && "@container", a, c),
+      ...d,
+      children: p
+    }
+  );
+}
+function R(l) {
+  return f(
     "px-3 py-1.5 typo-body-md rounded-md transition-colors whitespace-nowrap",
-    n ? "text-[var(--Text-High-Emphasis)] font-bold" : "text-[var(--Text-Medium-Emphasis)] hover:text-[var(--Text-High-Emphasis)] hover:bg-[var(--Surface-Secondary)]"
+    l ? "text-[var(--Text-High-Emphasis)] font-bold" : "text-[var(--Text-Medium-Emphasis)] hover:text-[var(--Text-High-Emphasis)] hover:bg-[var(--Surface-Secondary)]"
   );
 }
-const D = 2;
-function V({
-  items: n,
-  overflowLabel: u = "その他"
+const P = 2;
+function J({
+  items: l,
+  overflowLabel: c = "その他"
 }) {
-  const t = k.useRef(null), C = k.useRef(null), [g, m] = k.useState(n.length);
-  k.useEffect(() => {
-    const e = t.current, h = C.current;
-    if (!e || !h) return;
-    const a = () => {
-      const b = Array.from(h.children), w = b.slice(0, n.length).map((s) => s.getBoundingClientRect().width), R = b[n.length]?.getBoundingClientRect().width ?? 0, o = e.clientWidth;
-      if (o === 0 || w.some((s) => s === 0)) {
-        m(n.length);
+  const a = y.useRef(null), u = y.useRef(null), [p, d] = y.useState(l.length);
+  y.useEffect(() => {
+    const r = a.current, m = u.current;
+    if (!r || !m) return;
+    const i = () => {
+      const N = Array.from(m.children), v = N.slice(0, l.length).map((t) => t.getBoundingClientRect().width), z = N[l.length]?.getBoundingClientRect().width ?? 0, w = r.clientWidth;
+      if (w === 0 || v.some((t) => t === 0)) {
+        d(l.length);
         return;
       }
-      if (w.reduce((s, p) => s + p, 0) + D * (n.length - 1) <= o) {
-        m(n.length);
+      if (v.reduce((t, h) => t + h, 0) + P * (l.length - 1) <= w) {
+        d(l.length);
         return;
       }
-      let f = R, N = 0;
-      for (let s = 0; s < n.length; s++) {
-        const p = f + w[s] + D;
-        if (p > o) break;
-        f = p, N = s + 1;
+      let g = z, A = 0;
+      for (let t = 0; t < l.length; t++) {
+        const h = g + v[t] + P;
+        if (h > w) break;
+        g = h, A = t + 1;
       }
-      m(N);
+      d(A);
     };
-    a(), window.addEventListener("resize", a);
-    const v = typeof ResizeObserver < "u" ? new ResizeObserver(a) : null;
-    return v?.observe(e), v?.observe(h), () => {
-      window.removeEventListener("resize", a), v?.disconnect();
+    i(), window.addEventListener("resize", i);
+    const b = typeof ResizeObserver < "u" ? new ResizeObserver(i) : null;
+    return b?.observe(r), b?.observe(m), () => {
+      window.removeEventListener("resize", i), b?.disconnect();
     };
-  }, [n]);
-  const x = n.slice(0, g), c = n.slice(g);
-  return /* @__PURE__ */ i("div", { ref: t, className: "relative min-w-0 flex-1", children: [
-    /* @__PURE__ */ i(
+  }, [l]);
+  const x = l.slice(0, p), o = l.slice(p);
+  return /* @__PURE__ */ s("div", { ref: a, className: "relative min-w-0 flex-1", children: [
+    /* @__PURE__ */ e(
       "div",
       {
-        ref: C,
         "aria-hidden": "true",
-        className: "invisible pointer-events-none absolute top-0 left-0 flex w-max items-center gap-0.5",
-        children: [
-          n.map((e) => /* @__PURE__ */ r("span", { className: E(e.isActive), children: e.label }, e.label)),
-          /* @__PURE__ */ i("span", { className: d(E(!1), "inline-flex items-center gap-1"), children: [
-            u,
-            /* @__PURE__ */ r(H, { size: 16 })
-          ] })
-        ]
+        className: "pointer-events-none absolute top-0 left-0 h-0 w-0 overflow-hidden",
+        children: /* @__PURE__ */ s(
+          "div",
+          {
+            ref: u,
+            className: "invisible flex w-max items-center gap-0.5",
+            children: [
+              l.map((r) => /* @__PURE__ */ e("span", { className: R(r.isActive), children: r.label }, r.label)),
+              /* @__PURE__ */ s("span", { className: f(R(!1), "inline-flex items-center gap-1"), children: [
+                c,
+                /* @__PURE__ */ e(M, { size: 16 })
+              ] })
+            ]
+          }
+        )
       }
     ),
-    /* @__PURE__ */ i("nav", { className: "flex items-center gap-0.5", children: [
-      x.map((e) => {
-        const h = e.href ? "a" : "button", a = e.href ? { href: e.href } : { type: "button", onClick: e.onClick };
-        return /* @__PURE__ */ r(
-          h,
+    /* @__PURE__ */ s("nav", { className: "flex items-center gap-0.5", children: [
+      x.map((r) => {
+        const m = r.href ? "a" : "button", i = r.href ? { href: r.href } : { type: "button", onClick: r.onClick };
+        return /* @__PURE__ */ e(
+          m,
           {
-            className: E(e.isActive),
-            ...a,
-            children: e.label
+            className: R(r.isActive),
+            ...i,
+            children: r.label
           },
-          e.label
+          r.label
         );
       }),
-      c.length > 0 && /* @__PURE__ */ i(M, { children: [
-        /* @__PURE__ */ i(
-          L,
+      o.length > 0 && /* @__PURE__ */ s(F, { children: [
+        /* @__PURE__ */ s(
+          G,
           {
-            className: d(
-              E(c.some((e) => e.isActive)),
+            className: f(
+              R(o.some((r) => r.isActive)),
               "inline-flex items-center gap-1"
             ),
             children: [
-              u,
-              /* @__PURE__ */ r(H, { size: 16, "aria-hidden": "true" })
+              c,
+              /* @__PURE__ */ e(M, { size: 16, "aria-hidden": "true" })
             ]
           }
         ),
-        /* @__PURE__ */ r(P, { align: "end", children: c.map(
-          (e) => e.href ? /* @__PURE__ */ r(T, { asChild: !0, children: /* @__PURE__ */ r(
+        /* @__PURE__ */ e(Z, { align: "end", children: o.map(
+          (r) => r.href ? /* @__PURE__ */ e(V, { asChild: !0, children: /* @__PURE__ */ e(
             "a",
             {
-              href: e.href,
-              onClick: e.onClick,
-              "aria-current": e.isActive ? "page" : void 0,
-              children: e.label
+              href: r.href,
+              onClick: r.onClick,
+              "aria-current": r.isActive ? "page" : void 0,
+              children: r.label
             }
-          ) }, e.label) : /* @__PURE__ */ r(
-            T,
+          ) }, r.label) : /* @__PURE__ */ e(
+            V,
             {
-              onSelect: () => e.onClick?.(),
-              children: e.label
+              onSelect: () => r.onClick?.(),
+              children: r.label
             },
-            e.label
+            r.label
           )
         ) })
       ] })
     ] })
   ] });
 }
-function Z({
-  className: n,
-  variant: u = "logo",
-  logo: t,
-  title: C,
-  onBack: g,
-  backLabel: m = "戻る",
+function S({
+  className: l,
+  variant: c = "logo",
+  logo: a,
+  title: u,
+  onBack: p,
+  backLabel: d = "戻る",
   actions: x,
-  navItems: c,
-  navBreakpoint: e = "md",
-  navOverflowLabel: h,
-  searchSlot: a,
-  rightSlot: v,
-  centerSlot: b,
-  bottomSlot: w,
-  disableSticky: R = !1,
-  ...o
+  navItems: o,
+  navBreakpoint: r = "md",
+  navOverflowLabel: m,
+  searchSlot: i,
+  searchBreakpoint: b,
+  rightSlot: N,
+  centerSlot: v,
+  bottomSlot: z,
+  disableSticky: w = !1,
+  containerSize: C,
+  ...g
 }) {
-  const y = R ? "" : "sticky top-0 z-[var(--Z-Nav)]", f = "border-b border-[var(--Border-Low-Emphasis)] bg-[var(--Surface-Primary)]", N = e === "lg" ? "@[1024px]:hidden" : "@[768px]:hidden", s = e === "lg" ? "hidden @[1024px]:flex" : "hidden @[768px]:flex";
-  if (u === "logo") {
-    const p = typeof t == "string" ? /* @__PURE__ */ r("span", { className: "typo-heading-lg text-[var(--Text-High-Emphasis)]", children: t }) : t ?? null, A = x && x.length > 0 && /* @__PURE__ */ r("div", { className: "flex shrink-0 items-center gap-1", children: x.map(
-      (l) => l.href ? /* @__PURE__ */ r(
-        z,
+  const h = f(w ? "" : "sticky top-0 z-[var(--Z-Nav)]", "border-b border-[var(--Border-Low-Emphasis)] bg-[var(--Surface-Primary)]", l), _ = r === "lg" ? "@[960px]:hidden" : "@[768px]:hidden", B = r === "lg" ? "hidden @[960px]:flex" : "hidden @[768px]:flex", O = b === "lg" ? "hidden @[960px]:block" : b === "md" ? "hidden @[768px]:block" : void 0;
+  if (c === "logo") {
+    const H = typeof a == "string" ? /* @__PURE__ */ e("span", { className: "typo-heading-lg text-[var(--Text-High-Emphasis)]", children: a }) : a ?? null, j = x && x.length > 0 && /* @__PURE__ */ e("div", { className: "flex shrink-0 items-center gap-1", children: x.map((n) => {
+      const L = n.showLabel ? {
+        variant: "ghost",
+        size: "sm",
+        className: "h-10 gap-1.5 rounded-full border border-[var(--Border-Medium-Emphasis)] px-4"
+      } : { variant: "ghost", size: "icon-sm" }, T = /* @__PURE__ */ s(W, { children: [
+        n.badge ? n.badge : n.icon,
+        n.showLabel && /* @__PURE__ */ e("span", { className: "typo-label-sm", children: n.label })
+      ] });
+      return n.href ? /* @__PURE__ */ e(
+        k,
         {
           asChild: !0,
-          variant: "ghost",
-          size: "icon-sm",
-          "aria-label": l.label,
-          children: /* @__PURE__ */ r("a", { href: l.href, onClick: l.onClick, children: l.badge ? l.badge : l.icon })
+          ...L,
+          "aria-label": n.showLabel ? void 0 : n.label,
+          children: /* @__PURE__ */ e("a", { href: n.href, onClick: n.onClick, children: T })
         },
-        l.label
-      ) : /* @__PURE__ */ r(
-        z,
+        n.label
+      ) : /* @__PURE__ */ e(
+        k,
         {
-          variant: "ghost",
-          size: "icon-sm",
-          "aria-label": l.label,
-          onClick: l.onClick,
-          children: l.badge ? l.badge : l.icon
+          ...L,
+          "aria-label": n.showLabel ? void 0 : n.label,
+          onClick: n.onClick,
+          children: T
         },
-        l.label
-      )
-    ) });
-    return /* @__PURE__ */ i(
-      "header",
+        n.label
+      );
+    }) });
+    return /* @__PURE__ */ s(
+      E,
       {
-        "data-slot": "header",
-        className: d(y, f, "@container", n),
-        ...o,
+        containerSize: C,
+        shellClass: h,
+        containerQuery: !0,
+        ...g,
         children: [
-          /* @__PURE__ */ i("div", { className: d(
+          /* @__PURE__ */ s("div", { className: f(
             "flex items-center justify-between px-4 py-3",
-            (c || a) && N
+            (o || i) && _
           ), children: [
-            p,
-            A
+            H,
+            j
           ] }),
-          (c || a) && /* @__PURE__ */ i("div", { className: d(s, "items-center justify-between gap-4 h-14 px-6"), children: [
-            /* @__PURE__ */ i("div", { className: "flex min-w-0 flex-1 items-center gap-6", children: [
-              /* @__PURE__ */ r("div", { className: "shrink-0", children: p }),
-              c && c.length > 0 && /* @__PURE__ */ r(
-                V,
+          (o || i) && /* @__PURE__ */ s("div", { className: f(B, "items-center justify-between gap-4 h-14 px-6"), children: [
+            /* @__PURE__ */ s("div", { className: "flex min-w-0 flex-1 items-center gap-6", children: [
+              /* @__PURE__ */ e("div", { className: "shrink-0", children: H }),
+              o && o.length > 0 && /* @__PURE__ */ e(
+                J,
                 {
-                  items: c,
-                  overflowLabel: h
+                  items: o,
+                  overflowLabel: m
                 }
               )
             ] }),
-            a && /* @__PURE__ */ r("div", { className: "min-w-0 flex-1 max-w-[400px]", children: a }),
-            A
+            i && /* @__PURE__ */ e(
+              "div",
+              {
+                className: f(
+                  "min-w-0 flex-1 max-w-[400px]",
+                  O
+                ),
+                children: i
+              }
+            ),
+            j
           ] }),
-          w
+          z
         ]
       }
     );
   }
-  return u === "logo-center" ? /* @__PURE__ */ r(
-    "header",
+  return c === "logo-center" ? /* @__PURE__ */ e(
+    E,
     {
-      "data-slot": "header",
-      className: d(
-        y,
-        f,
-        "flex items-center justify-center px-4 py-3",
-        n
-      ),
-      ...o,
-      children: typeof t == "string" ? /* @__PURE__ */ r("span", { className: "typo-heading-lg text-[var(--Text-High-Emphasis)]", children: t }) : t ?? null
+      containerSize: C,
+      shellClass: h,
+      layoutClass: "flex items-center justify-center px-4 py-3",
+      ...g,
+      children: typeof a == "string" ? /* @__PURE__ */ e("span", { className: "typo-heading-lg text-[var(--Text-High-Emphasis)]", children: a }) : a ?? null
     }
-  ) : u === "back-search" ? /* @__PURE__ */ r(
-    "header",
+  ) : c === "back-search" ? /* @__PURE__ */ e(
+    E,
     {
-      "data-slot": "header",
-      className: d(
-        y,
-        f,
-        "px-4 py-3",
-        n
-      ),
-      ...o,
-      children: /* @__PURE__ */ i("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ r(
-          z,
+      containerSize: C,
+      shellClass: h,
+      layoutClass: "px-4 py-3",
+      ...g,
+      children: /* @__PURE__ */ s("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ e(
+          k,
           {
             variant: "ghost",
-            size: "icon-sm",
-            "aria-label": m,
-            onClick: g,
-            children: /* @__PURE__ */ r(j, { size: 20 })
+            size: "icon-xl",
+            "aria-label": d,
+            onClick: p,
+            children: /* @__PURE__ */ e(D, { size: 20 })
           }
         ),
-        b && /* @__PURE__ */ r("div", { className: "flex-1", children: b })
+        v && /* @__PURE__ */ e("div", { className: "flex-1", children: v })
       ] })
     }
-  ) : /* @__PURE__ */ i(
-    "header",
+  ) : /* @__PURE__ */ s(
+    E,
     {
-      "data-slot": "header",
-      className: d(
-        y,
-        f,
-        "grid grid-cols-[1fr_auto_1fr] items-center gap-2 px-2 py-3",
-        n
-      ),
-      ...o,
+      containerSize: C,
+      shellClass: h,
+      layoutClass: "grid grid-cols-[1fr_auto_1fr] items-center gap-2 px-2 py-3",
+      ...g,
       children: [
-        /* @__PURE__ */ r("div", { className: "justify-self-start", children: /* @__PURE__ */ r(
-          z,
+        /* @__PURE__ */ e("div", { className: "justify-self-start", children: /* @__PURE__ */ e(
+          k,
           {
             variant: "ghost",
             size: "icon-sm",
-            "aria-label": m,
-            onClick: g,
-            children: /* @__PURE__ */ r(j, { size: 20 })
+            "aria-label": d,
+            onClick: p,
+            children: /* @__PURE__ */ e(D, { size: 20 })
           }
         ) }),
-        /* @__PURE__ */ r("h1", { className: "min-w-0 truncate text-center typo-heading-md text-[var(--Text-High-Emphasis)]", children: C }),
-        /* @__PURE__ */ r("div", { className: "justify-self-end", children: v })
+        /* @__PURE__ */ e("h1", { className: "min-w-0 truncate text-center typo-heading-md text-[var(--Text-High-Emphasis)]", children: u }),
+        /* @__PURE__ */ e("div", { className: "justify-self-end", children: N })
       ]
     }
   );
 }
 export {
-  Z as Header
+  S as Header
 };

package/dist/components/primitives/image-carousel.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs as y, jsx as t, Fragment as T } from "react/jsx-runtime";
 import * as l from "react";
 import k from "iconsax-reactjs/dist/esm/ArrowLeft2.js";
@@ -8,9 +9,9 @@ function B({
   aspectRatio: i = "banner",
   showDots: N = !0,
   showArrows: w = !0,
-  autoPlay: d = 0,
+  autoPlay: u = 0,
   peek: x = !1,
-  pcSlidesPerView: u = 1,
+  pcSlidesPerView: d = 1,
   centeredSlides: h = !1,
   className: j,
   ...z
@@ -40,12 +41,12 @@ function B({
     f && e.scrollTo({ left: f.offsetLeft, behavior: "smooth" });
   }
   l.useEffect(() => {
-    if (d <= 0 || a <= 1) return;
+    if (u <= 0 || a <= 1) return;
     const r = setInterval(() => {
       n((s + 1) % a);
-    }, d);
+    }, u);
     return () => clearInterval(r);
-  }, [d, s, a]);
+  }, [u, s, a]);
   function I() {
     n(s <= 0 ? a - 1 : s - 1);
   }
@@ -75,7 +76,7 @@ function B({
               h && "@[768px]:px-[22.25%] @[960px]:px-0 @[768px]:gap-4",
               // PC 複数枚表示時のスライド間ギャップ（本番 spaceBetween:24 準拠）
               // cascade: @[960px]:gap-6 > @[768px]:gap-4 at 960px+
-              u > 1 && "@[960px]:gap-6"
+              d > 1 && "@[960px]:gap-6"
             ),
             style: { scrollbarWidth: "none", msOverflowStyle: "none" },
             children: c.map((r, e) => /* @__PURE__ */ t(
@@ -87,7 +88,7 @@ function B({
                   "shrink-0 snap-start",
                   // centeredSlides: タブレットで snap-center、PC で snap-start に戻す
                   h && "@[768px]:snap-center @[960px]:snap-start",
-                  x ? u > 1 ? "w-[calc(100%-48px)] pr-3 @[960px]:w-[calc((100%-48px)/3)] @[960px]:pr-0" : "w-[calc(100%-48px)] pr-3 @[960px]:w-full @[960px]:pr-0" : u > 1 ? "w-full @[960px]:w-[calc((100%-48px)/3)]" : "w-full"
+                  x ? d > 1 ? "w-[calc(100%-48px)] pr-3 @[960px]:w-[calc((100%-48px)/3)] @[960px]:pr-0" : "w-[calc(100%-48px)] pr-3 @[960px]:w-full @[960px]:pr-0" : d > 1 ? "w-full @[960px]:w-[calc((100%-48px)/3)]" : "w-full"
                 ),
                 children: r.href ? /* @__PURE__ */ t("a", { href: r.href, className: "block", children: /* @__PURE__ */ t(
                   "img",

package/dist/components/primitives/image-gallery.js

@@ -1,8 +1,9 @@
-import { jsxs as o, jsx as t, Fragment as b } from "react/jsx-runtime";
+"use client";
+import { jsxs as n, jsx as t, Fragment as b } from "react/jsx-runtime";
 import * as x from "react";
 import y from "iconsax-reactjs/dist/esm/ArrowLeft2.js";
 import g from "iconsax-reactjs/dist/esm/ArrowRight2.js";
-import { cn as n } from "../../lib/utils.js";
+import { cn as o } from "../../lib/utils.js";
 function P({
   images: r,
   alts: c,
@@ -24,14 +25,14 @@ function P({
     "16:9": "aspect-video",
     auto: ""
   }[h];
-  return v === "pc-detail" ? /* @__PURE__ */ o(
+  return v === "pc-detail" ? /* @__PURE__ */ n(
     "div",
     {
       "data-slot": "image-gallery",
-      className: n("flex flex-row-reverse gap-6", i),
+      className: o("flex flex-row-reverse gap-6", i),
       ...d,
       children: [
-        /* @__PURE__ */ o("div", { className: n("relative min-w-0 grow overflow-hidden rounded-lg", u), children: [
+        /* @__PURE__ */ n("div", { className: o("relative min-w-0 grow overflow-hidden rounded-lg", u), children: [
           /* @__PURE__ */ t(
             "div",
             {
@@ -48,7 +49,7 @@ function P({
               ))
             }
           ),
-          r.length > 1 && /* @__PURE__ */ o("span", { className: "absolute bottom-2 right-2 rounded-full bg-[var(--Overlay-Medium)] px-2 py-0.5 typo-label-xs text-[var(--Text-on-Inverse)]", children: [
+          r.length > 1 && /* @__PURE__ */ n("span", { className: "absolute bottom-2 right-2 rounded-full bg-[var(--Overlay-Medium)] px-2 py-0.5 typo-label-xs text-[var(--Text-on-Inverse)]", children: [
             a + 1,
             " / ",
             r.length
@@ -60,7 +61,7 @@ function P({
             type: "button",
             onClick: () => s(e),
             onMouseOver: () => s(e),
-            className: n(
+            className: o(
               "size-16 shrink-0 overflow-hidden rounded-lg border-2 transition-colors",
               e === a ? "border-[var(--Border-Accent-Primary)]" : "border-transparent opacity-60 hover:opacity-100"
             ),
@@ -77,14 +78,14 @@ function P({
         )) })
       ]
     }
-  ) : /* @__PURE__ */ o(
+  ) : /* @__PURE__ */ n(
     "div",
     {
       "data-slot": "image-gallery",
-      className: n("space-y-2", i),
+      className: o("space-y-2", i),
       ...d,
       children: [
-        /* @__PURE__ */ o("div", { className: n("relative w-full overflow-hidden", u), children: [
+        /* @__PURE__ */ n("div", { className: o("relative w-full overflow-hidden", u), children: [
           /* @__PURE__ */ t(
             "div",
             {
@@ -101,7 +102,7 @@ function P({
               ))
             }
           ),
-          r.length > 1 && /* @__PURE__ */ o(b, { children: [
+          r.length > 1 && /* @__PURE__ */ n(b, { children: [
             /* @__PURE__ */ t(
               "button",
               {
@@ -123,7 +124,7 @@ function P({
               }
             )
           ] }),
-          r.length > 1 && /* @__PURE__ */ o("span", { className: "absolute bottom-2 right-2 rounded-full bg-[var(--Overlay-Medium)] px-2 py-0.5 typo-label-xs text-[var(--Text-on-Inverse)]", children: [
+          r.length > 1 && /* @__PURE__ */ n("span", { className: "absolute bottom-2 right-2 rounded-full bg-[var(--Overlay-Medium)] px-2 py-0.5 typo-label-xs text-[var(--Text-on-Inverse)]", children: [
             a + 1,
             " / ",
             r.length
@@ -139,7 +140,7 @@ function P({
             children: /* @__PURE__ */ t(
               "span",
               {
-                className: n(
+                className: o(
                   "h-1.5 shrink-0 rounded-full transition-all",
                   e === a ? "w-4 bg-[var(--Brand-Cake-Orange)]" : "w-1.5 bg-[var(--Text-Low-Emphasis)]/30"
                 )
@@ -153,7 +154,7 @@ function P({
           {
             type: "button",
             onClick: () => s(e),
-            className: n(
+            className: o(
               "size-14 shrink-0 overflow-hidden rounded-md border-2 transition-colors",
               e === a ? "border-[var(--Brand-Cake-Orange)]" : "border-transparent opacity-60 hover:opacity-100"
             ),