@cakejp/design-system 0.17.1 → 0.20.0

package/dist/components/primitives/chat-composer.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs as w, jsx as o } from "react/jsx-runtime";
 import * as s from "react";
 import { SendHorizontal as q } from "lucide-react";

package/dist/components/primitives/combobox.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs as r, jsx as a } from "react/jsx-runtime";
 import * as w from "react";
 import { ChevronsUpDown as N, Check as j } from "lucide-react";

package/dist/components/primitives/content-card.js

@@ -0,0 +1,111 @@
+import { jsxs as l, jsx as t } from "react/jsx-runtime";
+import "react";
+import { cn as s } from "../../lib/utils.js";
+import { FOCUS_RING as v } from "../../lib/focus-ring.js";
+import { resolveLinkComponent as h } from "../../lib/link-component.js";
+import { Tag as u } from "./tag.js";
+const x = {
+  "16/10": "aspect-[16/10]",
+  "16/9": "aspect-[16/9]",
+  "1/1": "aspect-[1/1]"
+}, w = {
+  vertical: "flex-col gap-2",
+  horizontal: "flex-row items-start gap-3",
+  list: "flex-row-reverse items-start gap-3"
+}, g = {
+  vertical: "w-full",
+  horizontal: "w-28 shrink-0",
+  list: "w-24 shrink-0"
+};
+function k({
+  className: a,
+  title: e,
+  href: c,
+  imageSlot: i,
+  tag: r,
+  meta: n,
+  orientation: o = "vertical",
+  aspect: d = "16/10",
+  linkComponent: m,
+  ...p
+}) {
+  const f = h(m);
+  return /* @__PURE__ */ l(
+    f,
+    {
+      "data-slot": "content-card",
+      "data-orientation": o,
+      href: c,
+      className: s(
+        "group flex rounded-lg bg-[var(--card-surface,var(--Surface-Primary))]",
+        w[o],
+        v,
+        a
+      ),
+      ...p,
+      children: [
+        i && /* @__PURE__ */ l(
+          "div",
+          {
+            "data-slot": "content-card-media",
+            className: s(
+              "relative overflow-hidden rounded-lg",
+              x[d],
+              g[o]
+            ),
+            children: [
+              /* @__PURE__ */ t("div", { className: "h-full w-full transition-transform duration-[var(--Motion-Duration-Base)] ease-[var(--Motion-Easing-Standard)] group-hover:scale-[1.02]", children: i }),
+              r && /* @__PURE__ */ t(
+                u,
+                {
+                  variant: r.variant,
+                  className: "absolute bottom-2 left-2 max-w-[calc(100%-1rem)] overflow-hidden text-ellipsis",
+                  children: r.label
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ l("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
+          /* @__PURE__ */ t(
+            "span",
+            {
+              "data-slot": "content-card-title",
+              className: "line-clamp-2 min-h-[2lh] typo-body-md font-medium text-[var(--Text-High-Emphasis)]",
+              children: e
+            }
+          ),
+          n && /* @__PURE__ */ t(
+            "span",
+            {
+              "data-slot": "content-card-meta",
+              className: "mt-auto truncate typo-body-sm text-[var(--Text-Medium-Emphasis)]",
+              children: n
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function M({
+  className: a,
+  ...e
+}) {
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      "data-slot": "content-list",
+      className: s(
+        "flex flex-col divide-y divide-[var(--Border-Low-Emphasis)]",
+        "[&>*]:py-4 [&>*:first-child]:pt-0 [&>*:last-child]:pb-0",
+        a
+      ),
+      ...e
+    }
+  );
+}
+export {
+  k as ContentCard,
+  M as ContentList
+};

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

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs as v, jsx as a, Fragment as z } from "react/jsx-runtime";
 import * as s from "react";
 import F from "iconsax-reactjs/dist/esm/ArrowLeft2.js";
@@ -13,16 +14,16 @@ function M({
   slides: c,
   showDots: b = !0,
   showArrows: y = !0,
-  autoPlay: d = 0,
+  autoPlay: u = 0,
   peek: p = !1,
   itemsPerView: f = 1,
   ariaLabel: g = "コンテンツカルーセル",
   className: w,
   ...E
 }) {
-  const u = s.useRef(null), [o, I] = s.useState(0), t = c.length;
+  const d = s.useRef(null), [o, I] = s.useState(0), t = c.length;
   s.useEffect(() => {
-    const r = u.current;
+    const r = d.current;
     if (!r) return;
     let e = 0;
     const n = () => {
@@ -42,18 +43,18 @@ function M({
     };
   }, [t]);
   function l(r) {
-    const e = u.current;
+    const e = d.current;
     if (!e) return;
     const n = e.children[r];
     n && e.scrollTo({ left: n.offsetLeft, behavior: "smooth" });
   }
   s.useEffect(() => {
-    if (d <= 0 || t <= 1) return;
+    if (u <= 0 || t <= 1) return;
     const r = setInterval(() => {
       l((o + 1) % t);
-    }, d);
+    }, u);
     return () => clearInterval(r);
-  }, [d, o, t]);
+  }, [u, o, t]);
   function N() {
     l(o <= 0 ? t - 1 : o - 1);
   }
@@ -73,7 +74,7 @@ function M({
         /* @__PURE__ */ a(
           "div",
           {
-            ref: u,
+            ref: d,
             className: i(
               "flex snap-x snap-mandatory overflow-x-auto scroll-smooth scrollbar-none",
               p && "pl-4 @[960px]:pl-0",

package/dist/components/primitives/date-picker.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs as n, jsx as r } from "react/jsx-runtime";
 import * as y from "react";
 import v from "iconsax-reactjs/dist/esm/Calendar.js";
@@ -24,12 +25,12 @@ function _({
   max: l,
   disabledDates: p,
   disabled: c,
-  clearable: f = !1,
-  clearLabel: u = "日付をクリア",
+  clearable: u = !1,
+  clearLabel: f = "日付をクリア",
   id: g,
   className: b
 }) {
-  const [m, h] = y.useState(!1), d = V(a, l, p), t = f && !!e && !c;
+  const [m, h] = y.useState(!1), d = V(a, l, p), t = u && !!e && !c;
   return (
     // クリアボタンは trigger の「兄弟」として絶対配置する。trigger の内側に置くと
     // button の入れ子になり a11y 上不正（Chip removable と同じ解決）。
@@ -76,7 +77,7 @@ function _({
           type: "button",
           variant: "ghost",
           size: "icon-sm",
-          "aria-label": u,
+          "aria-label": f,
           onClick: () => o?.(void 0),
           className: "absolute top-1/2 right-1 -translate-y-1/2 text-[var(--Text-Medium-Emphasis)]",
           children: /* @__PURE__ */ r(H, { className: "size-4" })
@@ -93,8 +94,8 @@ function Y({
   minuteLabel: l = "分",
   clearLabel: p = "日時をクリア",
   disabled: c,
-  className: f,
-  ...u
+  className: u,
+  ...f
 }) {
   const g = y.useMemo(
     () => Array.from({ length: 24 }, (t, i) => i),
@@ -122,11 +123,11 @@ function Y({
       e.getMilliseconds()
     ), o?.(i);
   }, d = c || !e;
-  return /* @__PURE__ */ n("div", { className: S("flex items-center gap-2", f), children: [
+  return /* @__PURE__ */ n("div", { className: S("flex items-center gap-2", u), children: [
     /* @__PURE__ */ r(
       _,
       {
-        ...u,
+        ...f,
         value: e,
         onChange: h,
         disabled: c,

package/dist/components/primitives/footer.js

@@ -1,36 +1,38 @@
-import { jsxs as t, Fragment as u, jsx as e } from "react/jsx-runtime";
-import * as h from "react";
-import { cn as c } from "../../lib/utils.js";
-function y({
+"use client";
+import { jsxs as s, Fragment as H, jsx as e } from "react/jsx-runtime";
+import * as v from "react";
+import { cn as d } from "../../lib/utils.js";
+import { resolveLinkComponent as w } from "../../lib/link-component.js";
+function B({
   title: l,
-  children: s
+  children: i
 }) {
-  const [i, a] = h.useState(!1), o = h.useRef(null), [d, m] = h.useState(0);
-  return h.useEffect(() => {
-    o.current && m(o.current.scrollHeight);
-  }, [i]), /* @__PURE__ */ t("div", { "data-slot": "footer-accordion", children: [
-    /* @__PURE__ */ t(
+  const [r, o] = v.useState(!1), t = v.useRef(null), [n, c] = v.useState(0);
+  return v.useEffect(() => {
+    t.current && c(t.current.scrollHeight);
+  }, [r]), /* @__PURE__ */ s("div", { "data-slot": "footer-accordion", children: [
+    /* @__PURE__ */ s(
       "button",
       {
         type: "button",
-        className: c(
+        className: d(
           "flex w-full items-center justify-between",
           "border-t border-[var(--Border-Low-Emphasis)] px-5 py-5",
           "typo-body-md text-[var(--Text-High-Emphasis)]",
           "cursor-pointer"
         ),
-        onClick: () => a(!i),
-        "aria-expanded": i,
+        onClick: () => o(!r),
+        "aria-expanded": r,
         children: [
           /* @__PURE__ */ e("span", { children: l }),
-          /* @__PURE__ */ t("span", { className: "relative size-3 shrink-0", children: [
+          /* @__PURE__ */ s("span", { className: "relative size-3 shrink-0", children: [
             /* @__PURE__ */ e("span", { className: "absolute top-1/2 left-0 block h-px w-3 -translate-y-1/2 bg-[var(--Text-High-Emphasis)] transition-transform duration-[var(--Motion-Duration-Base)]" }),
             /* @__PURE__ */ e(
               "span",
               {
-                className: c(
+                className: d(
                   "absolute top-1/2 left-0 block h-px w-3 -translate-y-1/2 bg-[var(--Text-High-Emphasis)] transition-transform duration-[var(--Motion-Duration-Base)]",
-                  i ? "rotate-0" : "rotate-90"
+                  r ? "rotate-0" : "rotate-90"
                 )
               }
             )
@@ -41,54 +43,71 @@ function y({
     /* @__PURE__ */ e(
       "div",
       {
-        ref: o,
+        ref: t,
         className: "overflow-hidden transition-[max-height] duration-[var(--Motion-Duration-Base)] ease-in-out",
-        style: { maxHeight: i ? `${d}px` : "0px" },
-        children: /* @__PURE__ */ e("div", { className: "bg-[var(--Surface-Secondary)]", children: s })
+        style: { maxHeight: r ? `${n}px` : "0px" },
+        children: /* @__PURE__ */ e("div", { className: "bg-[var(--Surface-Secondary)]", children: i })
       }
     )
   ] });
 }
-function N({ groups: l }) {
-  const s = l.length <= 4 ? "@lg:grid-cols-4" : l.length === 5 ? "@lg:grid-cols-5" : "@lg:grid-cols-6";
-  return /* @__PURE__ */ e("div", { className: c("grid grid-cols-3 gap-6", s), children: l.map((i) => /* @__PURE__ */ t("div", { children: [
-    /* @__PURE__ */ e("h3", { className: "typo-label-md text-[var(--Text-High-Emphasis)] mb-3", children: i.title }),
-    /* @__PURE__ */ e("ul", { className: "space-y-1.5", children: i.links.map((a) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(
-      "a",
+function g({ groups: l, linkComponent: i }) {
+  const r = l.length <= 4 ? "@lg:grid-cols-4" : l.length === 5 ? "@lg:grid-cols-5" : "@lg:grid-cols-6";
+  return /* @__PURE__ */ e("div", { className: d("grid grid-cols-3 gap-6", r), children: l.map((o) => /* @__PURE__ */ s("div", { children: [
+    /* @__PURE__ */ e("h3", { className: "typo-label-md text-[var(--Text-High-Emphasis)] mb-3", children: o.title }),
+    /* @__PURE__ */ e("ul", { className: "space-y-1.5", children: o.links.map((t) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(
+      b,
       {
-        href: a.href,
+        link: t,
+        linkComponent: i,
         className: "typo-body-sm text-[var(--Text-Medium-Emphasis)] hover:text-[var(--Text-High-Emphasis)] transition-colors duration-[var(--Motion-Duration-Fast)]",
-        ...a.external ? { target: "_blank", rel: "noopener noreferrer" } : {},
-        children: a.label
+        children: t.label
       }
-    ) }, a.label)) }),
-    i.subGroups?.map((a) => /* @__PURE__ */ t("div", { className: "mt-4", children: [
-      /* @__PURE__ */ e("h4", { className: "typo-label-md text-[var(--Text-High-Emphasis)] mb-3", children: a.title }),
-      /* @__PURE__ */ e("ul", { className: "space-y-1.5", children: a.links.map((o) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(
-        "a",
+    ) }, t.label)) }),
+    o.subGroups?.map((t) => /* @__PURE__ */ s("div", { className: "mt-4", children: [
+      /* @__PURE__ */ e("h4", { className: "typo-label-md text-[var(--Text-High-Emphasis)] mb-3", children: t.title }),
+      /* @__PURE__ */ e("ul", { className: "space-y-1.5", children: t.links.map((n) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(
+        b,
         {
-          href: o.href,
+          link: n,
+          linkComponent: i,
           className: "typo-body-sm text-[var(--Text-Medium-Emphasis)] hover:text-[var(--Text-High-Emphasis)] transition-colors duration-[var(--Motion-Duration-Fast)]",
-          ...o.external ? { target: "_blank", rel: "noopener noreferrer" } : {},
-          children: o.label
+          children: n.label
         }
-      ) }, o.label)) })
-    ] }, a.title))
-  ] }, i.title)) });
+      ) }, n.label)) })
+    ] }, t.title))
+  ] }, o.title)) });
 }
-function b({ links: l }) {
-  return /* @__PURE__ */ e("ul", { children: l.map((s) => /* @__PURE__ */ e("li", { className: "border-b border-[var(--Border-Low-Emphasis)] last:border-b-0", children: /* @__PURE__ */ t(
-    "a",
+function b({
+  link: l,
+  linkComponent: i,
+  className: r,
+  children: o
+}) {
+  const t = w(i, l.external);
+  return /* @__PURE__ */ e(
+    t,
+    {
+      href: l.href,
+      className: r,
+      ...l.external ? { target: "_blank", rel: "noopener noreferrer" } : {},
+      children: o
+    }
+  );
+}
+function E({ links: l, linkComponent: i }) {
+  return /* @__PURE__ */ e("ul", { children: l.map((r) => /* @__PURE__ */ e("li", { className: "border-b border-[var(--Border-Low-Emphasis)] last:border-b-0", children: /* @__PURE__ */ s(
+    b,
     {
-      href: s.href,
-      className: c(
+      link: r,
+      linkComponent: i,
+      className: d(
         "flex items-center justify-between px-5 py-5",
         "typo-body-sm text-[var(--Text-Medium-Emphasis)]",
         "hover:text-[var(--Text-High-Emphasis)] transition-colors duration-[var(--Motion-Duration-Fast)]"
       ),
-      ...s.external ? { target: "_blank", rel: "noopener noreferrer" } : {},
       children: [
-        /* @__PURE__ */ e("span", { children: s.label }),
+        /* @__PURE__ */ e("span", { children: r.label }),
         /* @__PURE__ */ e(
           "svg",
           {
@@ -102,139 +121,189 @@ function b({ links: l }) {
         )
       ]
     }
-  ) }, s.label)) });
+  ) }, r.label)) });
 }
-function w({
+function D({
   className: l,
-  linkGroups: s = [],
-  copyright: i = "© Cake.jp Co., Ltd.",
-  logo: a,
-  logoHref: o = "/",
-  socialLinks: d = [],
-  description: m,
-  paymentMethods: x = [],
-  trustBadge: n,
-  bottomLinks: v = [],
-  ...f
+  linkGroups: i = [],
+  copyright: r = "© Cake.jp Co., Ltd.",
+  logo: o,
+  logoHref: t = "/",
+  socialLinks: n = [],
+  description: c,
+  paymentMethods: u = [],
+  trustBadge: m,
+  bottomLinks: y = [],
+  variant: T = "default",
+  bottomRightSlot: L,
+  linkComponent: h,
+  ...M
 }) {
-  return /* @__PURE__ */ t(
+  const x = T === "brand-first", N = w(h), p = (o || c) && /* @__PURE__ */ s("div", { "data-slot": "footer-brand", className: "grid content-start gap-4", children: [
+    o && /* @__PURE__ */ e(N, { href: t, className: "block w-fit text-[var(--Text-High-Emphasis)]", children: o }),
+    c && /* @__PURE__ */ e("p", { className: "typo-body-sm text-[var(--Text-Low-Emphasis)]", children: c })
+  ] });
+  return /* @__PURE__ */ s(
     "footer",
     {
       "data-slot": "footer",
       style: { containerType: "inline-size" },
-      className: c(
+      className: d(
         "bg-[var(--Surface-Primary)] text-[var(--Text-Medium-Emphasis)]",
         l
       ),
-      ...f,
+      ...M,
       children: [
-        s.length > 0 && /* @__PURE__ */ t(u, { children: [
-          /* @__PURE__ */ e("nav", { "aria-label": "フッターナビゲーション", "data-slot": "footer-links", className: "border-t border-[var(--Border-Medium-Emphasis)] @lg:hidden", children: s.map((r) => /* @__PURE__ */ t(y, { title: r.title, children: [
-            /* @__PURE__ */ e(b, { links: r.links }),
-            r.subGroups?.map((p) => /* @__PURE__ */ t("div", { children: [
-              /* @__PURE__ */ e("div", { className: "border-t border-[var(--Border-Low-Emphasis)] px-5 py-5 typo-body-md text-[var(--Text-High-Emphasis)]", children: p.title }),
-              /* @__PURE__ */ e(b, { links: p.links })
-            ] }, p.title))
-          ] }, r.title)) }),
+        i.length > 0 && /* @__PURE__ */ s(H, { children: [
+          x && p && /* @__PURE__ */ e("div", { className: "border-t border-[var(--Border-Medium-Emphasis)] px-5 py-8 @lg:hidden", children: p }),
+          /* @__PURE__ */ e("nav", { "aria-label": "フッターナビゲーション", "data-slot": "footer-links", className: d("border-t border-[var(--Border-Medium-Emphasis)] @lg:hidden", x && "border-t-0"), children: i.map((a) => /* @__PURE__ */ s(B, { title: a.title, children: [
+            /* @__PURE__ */ e(E, { links: a.links, linkComponent: h }),
+            a.subGroups?.map((f) => /* @__PURE__ */ s("div", { children: [
+              /* @__PURE__ */ e("div", { className: "border-t border-[var(--Border-Low-Emphasis)] px-5 py-5 typo-body-md text-[var(--Text-High-Emphasis)]", children: f.title }),
+              /* @__PURE__ */ e(E, { links: f.links, linkComponent: h })
+            ] }, f.title))
+          ] }, a.title)) }),
           /* @__PURE__ */ e(
             "nav",
             {
               "aria-label": "フッターナビゲーション",
               "data-slot": "footer-links-pc",
               className: "hidden @lg:block border-t border-[var(--Border-Medium-Emphasis)]",
-              children: /* @__PURE__ */ e("div", { className: "mx-auto max-w-[1065px] px-5 py-16", children: /* @__PURE__ */ e(N, { groups: s }) })
+              children: /* @__PURE__ */ e("div", { className: "mx-auto max-w-[1065px] px-5 py-16", children: x ? (
+                // FooterColumnNav は 1 つの grid 子としてリンク群をまとめて持つ。
+                // auto-fit だと nav 全体が 1 トラックに潰れて中で再分割されるため、
+                // ブランド列と nav 領域の比率を明示する（求人サイトの 1.6 : 3.4 相当）。
+                // brandBlock が無い（logo も description も未指定）ときに 2 カラムへ
+                // すると nav が 1.6fr のブランド側トラックへ入って左に寄るため、
+                // その場合は nav 単独レイアウトにする。
+                /* @__PURE__ */ s(
+                  "div",
+                  {
+                    className: d(
+                      "grid gap-8",
+                      p && "@lg:grid-cols-[minmax(0,1.6fr)_minmax(0,3.4fr)]"
+                    ),
+                    children: [
+                      p,
+                      /* @__PURE__ */ e(g, { groups: i, linkComponent: h })
+                    ]
+                  }
+                )
+              ) : /* @__PURE__ */ e(g, { groups: i, linkComponent: h }) })
             }
           )
         ] }),
-        d.length > 0 && /* @__PURE__ */ e(
+        x && i.length === 0 && p && /* @__PURE__ */ e(
+          "div",
+          {
+            "data-slot": "footer-brand-only",
+            className: "border-t border-[var(--Border-Medium-Emphasis)] px-5 py-8 @lg:py-16",
+            children: /* @__PURE__ */ e("div", { className: "mx-auto max-w-[1065px]", children: p })
+          }
+        ),
+        n.length > 0 && /* @__PURE__ */ e(
           "div",
           {
             "data-slot": "footer-social",
             className: "flex flex-wrap items-center justify-center gap-4 px-4 py-6 @sm:gap-8 @sm:px-0 @sm:py-8",
-            children: d.map((r) => /* @__PURE__ */ e(
+            children: n.map((a) => /* @__PURE__ */ e(
               "a",
               {
-                href: r.href,
-                className: c(
+                href: a.href,
+                className: d(
                   // shrink-0 必須: SNS アイコンの 40px タッチターゲットを flex row で保つ
                   "flex size-10 shrink-0 items-center justify-center",
                   "text-[var(--Text-High-Emphasis)]",
                   "transition-colors duration-[var(--Motion-Duration-Fast)] hover:text-[var(--Text-Medium-Emphasis)]"
                 ),
-                "aria-label": r.label,
+                "aria-label": a.label,
                 target: "_blank",
                 rel: "noopener noreferrer",
-                children: r.icon
+                children: a.icon
               },
-              r.label
+              a.label
             ))
           }
         ),
-        x.length > 0 && /* @__PURE__ */ t(
+        u.length > 0 && /* @__PURE__ */ s(
           "div",
           {
             "data-slot": "footer-payment",
             className: "border-t border-[var(--Border-Low-Emphasis)] px-5 py-6",
             children: [
               /* @__PURE__ */ e("p", { className: "typo-label-sm text-[var(--Text-Low-Emphasis)] text-center mb-3", children: "お支払い方法" }),
-              /* @__PURE__ */ e("div", { className: "flex flex-wrap items-center justify-center gap-1.5 @sm:gap-2", children: x.map((r) => /* @__PURE__ */ e(
+              /* @__PURE__ */ e("div", { className: "flex flex-wrap items-center justify-center gap-1.5 @sm:gap-2", children: u.map((a) => /* @__PURE__ */ e(
                 "div",
                 {
                   className: "flex items-center justify-center",
-                  "aria-label": r.label,
-                  children: r.icon
+                  "aria-label": a.label,
+                  children: a.icon
                 },
-                r.label
+                a.label
               )) })
             ]
           }
         ),
-        n && /* @__PURE__ */ t(
+        m && /* @__PURE__ */ s(
           "div",
           {
             "data-slot": "footer-trust",
             className: "flex items-center gap-3 border-t border-[var(--Border-Low-Emphasis)] px-5 py-5",
             children: [
-              n.href ? /* @__PURE__ */ e(
+              m.href ? /* @__PURE__ */ e(
                 "a",
                 {
-                  href: n.href,
+                  href: m.href,
                   target: "_blank",
                   rel: "noopener noreferrer",
                   className: "shrink-0",
-                  children: n.icon
+                  children: m.icon
                 }
-              ) : /* @__PURE__ */ e("div", { className: "shrink-0", children: n.icon }),
-              n.description && /* @__PURE__ */ e("p", { className: "typo-body-xs text-[var(--Text-Low-Emphasis)]", children: n.description })
+              ) : /* @__PURE__ */ e("div", { className: "shrink-0", children: m.icon }),
+              m.description && /* @__PURE__ */ e("p", { className: "typo-body-xs text-[var(--Text-Low-Emphasis)]", children: m.description })
             ]
           }
         ),
-        v.length > 0 && /* @__PURE__ */ e(
+        y.length > 0 && /* @__PURE__ */ e(
           "div",
           {
             "data-slot": "footer-bottom-links",
             className: "border-t border-[var(--Border-Low-Emphasis)] px-5 py-4",
-            children: /* @__PURE__ */ e("div", { className: "flex flex-wrap items-center justify-center gap-x-3 gap-y-2 @sm:gap-x-4", children: v.map((r) => /* @__PURE__ */ e(
-              "a",
+            children: /* @__PURE__ */ e("div", { className: "flex flex-wrap items-center justify-center gap-x-3 gap-y-2 @sm:gap-x-4", children: y.map((a) => /* @__PURE__ */ e(
+              b,
               {
-                href: r.href,
+                link: a,
+                linkComponent: h,
                 className: "typo-body-xs text-[var(--Text-Low-Emphasis)] hover:text-[var(--Text-Medium-Emphasis)] transition-colors duration-[var(--Motion-Duration-Fast)]",
-                ...r.external ? { target: "_blank", rel: "noopener noreferrer" } : {},
-                children: r.label
+                children: a.label
               },
-              r.label
+              a.label
             )) })
           }
         ),
-        /* @__PURE__ */ t(
+        x ? (
+          // ロゴ・説明文はブランド列で出し済みなので、ここはコピーライトと
+          // bottomRightSlot（Powered by 等）を左右に振り分けるだけにする。
+          /* @__PURE__ */ e(
+            "div",
+            {
+              "data-slot": "footer-bottom",
+              className: "border-t border-[var(--Border-Medium-Emphasis)] px-5 py-5",
+              children: /* @__PURE__ */ s("div", { className: "mx-auto flex max-w-[1065px] flex-col gap-3 typo-body-sm text-[var(--Text-Low-Emphasis)] @lg:flex-row @lg:items-center @lg:justify-between", children: [
+                /* @__PURE__ */ e("p", { children: r }),
+                L
+              ] })
+            }
+          )
+        ) : /* @__PURE__ */ s(
           "div",
           {
             "data-slot": "footer-bottom",
             className: "border-t border-[var(--Border-Medium-Emphasis)] px-5 pt-8 pb-9 text-center",
             children: [
-              a && /* @__PURE__ */ e("div", { className: "mx-auto w-fit max-w-[160px]", children: /* @__PURE__ */ e("a", { href: o, className: "block text-[var(--Text-High-Emphasis)]", children: a }) }),
-              m && /* @__PURE__ */ e("p", { className: "mt-6 typo-body-sm text-[var(--Text-Low-Emphasis)]", children: m }),
-              /* @__PURE__ */ e("p", { className: "mt-5 typo-body-sm text-[var(--Text-Low-Emphasis)]", children: i })
+              o && /* @__PURE__ */ e("div", { className: "mx-auto w-fit max-w-[160px]", children: /* @__PURE__ */ e(N, { href: t, className: "block text-[var(--Text-High-Emphasis)]", children: o }) }),
+              c && /* @__PURE__ */ e("p", { className: "mt-6 typo-body-sm text-[var(--Text-Low-Emphasis)]", children: c }),
+              /* @__PURE__ */ e("p", { className: "mt-5 typo-body-sm text-[var(--Text-Low-Emphasis)]", children: r })
             ]
           }
         )
@@ -243,5 +312,5 @@ function w({
   );
 }
 export {
-  w as Footer
+  D as Footer
 };

package/dist/components/primitives/form-field.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs as c, jsx as e } from "react/jsx-runtime";
 import * as u from "react";
 import { cn as y } from "../../lib/utils.js";