@cakejp/design-system 0.16.0 → 0.17.0

package/dist/components/ec/delivery-calendar.js

@@ -0,0 +1,105 @@
+import { jsxs as g, jsx as t } from "react/jsx-runtime";
+import "react";
+import E from "iconsax-reactjs/dist/esm/ArrowLeft2.js";
+import z from "iconsax-reactjs/dist/esm/ArrowRight2.js";
+import { cn as m } from "../../lib/utils.js";
+import { Button as u } from "../foundations/button.js";
+const A = ["日", "月", "火", "水", "木", "金", "土"];
+function H({
+  year: a,
+  month: r,
+  days: h,
+  onMonthChange: v,
+  onDaySelect: x,
+  selectedDate: c,
+  className: f,
+  ...y
+}) {
+  const b = new Date(a, r - 1, 1), D = new Date(a, r, 0), N = b.getDay(), w = D.getDate(), p = [];
+  let l = Array(N).fill(null);
+  for (let e = 1; e <= w; e++) {
+    const n = new Date(a, r - 1, e), i = h.find(
+      (s) => s.date.getFullYear() === a && s.date.getMonth() === r - 1 && s.date.getDate() === e
+    );
+    l.push(
+      i ?? { date: n, availability: "available" }
+    ), l.length === 7 && (p.push(l), l = []);
+  }
+  if (l.length > 0) {
+    for (; l.length < 7; ) l.push(null);
+    p.push(l);
+  }
+  const k = () => {
+    const e = r === 1 ? { y: a - 1, m: 12 } : { y: a, m: r - 1 };
+    v?.(e.y, e.m);
+  }, T = () => {
+    const e = r === 12 ? { y: a + 1, m: 1 } : { y: a, m: r + 1 };
+    v?.(e.y, e.m);
+  }, C = (e) => c && e.getFullYear() === c.getFullYear() && e.getMonth() === c.getMonth() && e.getDate() === c.getDate();
+  return /* @__PURE__ */ g(
+    "div",
+    {
+      "data-slot": "delivery-calendar",
+      className: m("space-y-2", f),
+      ...y,
+      children: [
+        /* @__PURE__ */ g("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ t(u, { variant: "ghost", size: "icon-sm", onClick: k, "aria-label": "前月", children: /* @__PURE__ */ t(E, { size: 16 }) }),
+          /* @__PURE__ */ g("span", { className: "typo-label-md text-[var(--Text-High-Emphasis)]", children: [
+            r,
+            "月"
+          ] }),
+          /* @__PURE__ */ t(u, { variant: "ghost", size: "icon-sm", onClick: T, "aria-label": "次月", children: /* @__PURE__ */ t(z, { size: 16 }) })
+        ] }),
+        /* @__PURE__ */ t("div", { className: "grid grid-cols-7 text-center", children: A.map((e, n) => /* @__PURE__ */ t(
+          "span",
+          {
+            className: m(
+              "py-1 typo-label-sm",
+              n === 0 && "text-[var(--Text-Caution)]",
+              n === 6 && "text-[var(--Primitive-Sea-600)]",
+              n > 0 && n < 6 && "text-[var(--Text-Medium-Emphasis)]"
+            ),
+            children: e
+          },
+          e
+        )) }),
+        p.map((e, n) => /* @__PURE__ */ t("div", { className: "grid grid-cols-7 text-center", children: e.map((i, s) => {
+          if (!i)
+            return /* @__PURE__ */ t("div", { className: "py-1" }, `empty-${s}`);
+          const o = i.date.getDay(), S = C(i.date), d = i.availability !== "unavailable";
+          return /* @__PURE__ */ g(
+            "button",
+            {
+              type: "button",
+              disabled: !d,
+              onClick: () => d && x?.(i.date),
+              className: m(
+                "flex flex-col items-center gap-0.5 rounded-md py-1.5 typo-body-md transition-colors",
+                d && "cursor-pointer hover:bg-[var(--Surface-Secondary)]",
+                S && "relative z-10 bg-[var(--Brand-Cake-Orange)]/10 ring-1 ring-inset ring-[var(--Brand-Cake-Orange)]",
+                !d && "cursor-default opacity-60",
+                o === 0 && "text-[var(--Text-Caution)]",
+                o === 6 && "text-[var(--Primitive-Sea-600)]",
+                o > 0 && o < 6 && "text-[var(--Text-High-Emphasis)]"
+              ),
+              children: [
+                /* @__PURE__ */ t("span", { children: i.date.getDate() }),
+                /* @__PURE__ */ t(Y, { availability: i.availability })
+              ]
+            },
+            i.date.getDate()
+          );
+        }) }, n))
+      ]
+    }
+  );
+}
+function Y({
+  availability: a
+}) {
+  return a === "available" ? /* @__PURE__ */ t("span", { className: "typo-heading-lg text-[var(--Text-Success)]", children: "○" }) : a === "few" ? /* @__PURE__ */ t("span", { className: "typo-heading-lg text-[var(--Text-Warning)]", children: "△" }) : /* @__PURE__ */ t("span", { className: "typo-heading-lg text-[var(--Text-Low-Emphasis)]", children: "×" });
+}
+export {
+  H as DeliveryCalendar
+};

package/dist/components/ec/mypage-shell.js

@@ -0,0 +1,98 @@
+import { jsx as e, jsxs as a } from "react/jsx-runtime";
+import L from "react";
+import z from "iconsax-reactjs/dist/esm/Home2.js";
+import c from "iconsax-reactjs/dist/esm/SearchNormal1.js";
+import _ from "iconsax-reactjs/dist/esm/Shop.js";
+import w from "iconsax-reactjs/dist/esm/Calendar.js";
+import H from "iconsax-reactjs/dist/esm/Bookmark.js";
+import P from "iconsax-reactjs/dist/esm/User.js";
+import E from "iconsax-reactjs/dist/esm/ShoppingCart.js";
+import { BreadcrumbList as C, BreadcrumbSeparator as T, BreadcrumbItem as j, BreadcrumbPage as A, BreadcrumbLink as M, Breadcrumb as s } from "../foundations/breadcrumb.js";
+import { SkipLink as F } from "../foundations/skip-link.js";
+import { Header as n } from "../primitives/header.js";
+import { SideNav as G } from "../primitives/side-nav.js";
+import { CakeLogo as I } from "./cake-logo.js";
+import { mypageMenuGroups as R } from "./_mypage-menu-data.js";
+import { BottomTabBar as U } from "../primitives/bottom-tab-bar.js";
+const $ = [
+  { icon: /* @__PURE__ */ e(c, { size: 20 }), label: "検索" },
+  { icon: /* @__PURE__ */ e(P, { size: 20 }), label: "マイページ" },
+  { icon: /* @__PURE__ */ e(E, { size: 20 }), label: "カート" }
+], q = [
+  { label: "ホーム", icon: /* @__PURE__ */ e(z, { size: 20 }), href: "/" },
+  { label: "探す", icon: /* @__PURE__ */ e(c, { size: 20 }), href: "/search/" },
+  { label: "店舗受取予約", icon: /* @__PURE__ */ e(_, { size: 20 }), href: "/takeout/" },
+  {
+    label: "記念日",
+    icon: /* @__PURE__ */ e(w, { size: 20 }),
+    href: "/mypage/anniversary/"
+  },
+  {
+    label: "ブックマーク",
+    icon: /* @__PURE__ */ e(H, { size: 20 }),
+    href: "/mypage/bookmark/item_list/"
+  }
+];
+function D(r) {
+  return [
+    { label: "ホーム", href: "/" },
+    { label: "山田 太郎 さまのマイページ", href: "/mypage/" },
+    { label: r }
+  ];
+}
+function le({
+  title: r,
+  activeMenu: t,
+  currentPath: h,
+  activeMatch: p,
+  isActiveMenuItem: b,
+  children: f,
+  breadcrumbs: u,
+  bottomNavItems: g = q,
+  menuGroups: v = R,
+  headerActions: x = $,
+  logo: N = /* @__PURE__ */ e(I, {}),
+  navItems: y,
+  onBack: k,
+  mainId: d = "main-content",
+  skipLink: B
+}) {
+  const o = u ?? D(r), l = /* @__PURE__ */ e(C, { children: o.map((i, m) => {
+    const S = m === o.length - 1;
+    return /* @__PURE__ */ a(L.Fragment, { children: [
+      m > 0 && /* @__PURE__ */ e(T, {}),
+      /* @__PURE__ */ e(j, { children: S ? /* @__PURE__ */ e(A, { children: i.label }) : /* @__PURE__ */ e(M, { href: i.href ?? "#", children: i.label }) })
+    ] }, m);
+  }) });
+  return /* @__PURE__ */ a("div", { className: "@container min-h-screen bg-[var(--Surface-Secondary)]", children: [
+    B !== !1 && /* @__PURE__ */ e(F, { href: `#${d}` }),
+    /* @__PURE__ */ a("div", { className: "@md:hidden bg-[var(--Surface-Primary)]", children: [
+      /* @__PURE__ */ e(n, { variant: "back", onBack: k }),
+      /* @__PURE__ */ e("div", { className: "px-4 pt-3", children: /* @__PURE__ */ e(s, { children: l }) }),
+      /* @__PURE__ */ e("h1", { className: "typo-heading-xl text-[var(--Text-High-Emphasis)] px-4 pt-1 pb-3", children: r })
+    ] }),
+    /* @__PURE__ */ e("div", { className: "hidden @md:block", children: /* @__PURE__ */ e(n, { logo: N, variant: "logo", actions: x, navItems: y }) }),
+    /* @__PURE__ */ e("div", { className: "hidden @md:block bg-[var(--Surface-Primary)] border-b border-[var(--Border-Low-Emphasis)]", children: /* @__PURE__ */ e("div", { className: "max-w-[1280px] mx-auto px-6 py-3", children: /* @__PURE__ */ e(s, { children: l }) }) }),
+    /* @__PURE__ */ a("div", { className: "@md:max-w-[1280px] @md:mx-auto @md:px-6 @md:mt-10 @md:mb-10 @md:grid @md:[grid-template:'side_main'_1fr_/_256px_1fr] @md:gap-6 @md:items-start", children: [
+      /* @__PURE__ */ e("div", { className: "hidden @md:block @md:[grid-area:side] rounded-2xl overflow-hidden shadow-sm", children: /* @__PURE__ */ e(
+        G,
+        {
+          groups: v,
+          activeMenu: t,
+          currentPath: h,
+          activeMatch: p,
+          isActive: b,
+          ariaLabel: "マイページメニュー"
+        }
+      ) }),
+      /* @__PURE__ */ a("main", { id: d, className: "@container @md:[grid-area:main] bg-[var(--Surface-Primary)] @md:rounded-2xl @md:shadow-sm pb-20 @md:pb-8", children: [
+        /* @__PURE__ */ e("div", { className: "hidden @md:flex items-center gap-3 px-6 py-5 border-b border-[var(--Border-Low-Emphasis)]", children: /* @__PURE__ */ e("h1", { className: "typo-heading-lg text-[var(--Text-High-Emphasis)]", children: r }) }),
+        f
+      ] })
+    ] }),
+    /* @__PURE__ */ e(U, { items: g, className: "@md:hidden" })
+  ] });
+}
+export {
+  le as MypageShell
+};

package/dist/components/ec/order-section.js

@@ -0,0 +1,53 @@
+import { jsxs as t, jsx as r } from "react/jsx-runtime";
+import "react";
+import n from "iconsax-reactjs/dist/esm/ArrowRight2.js";
+import { cn as l } from "../../lib/utils.js";
+function y({
+  title: i,
+  status: e = "default",
+  summary: o,
+  editLabel: s = "変更する",
+  onEdit: a,
+  children: c,
+  className: m,
+  ...d
+}) {
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      "data-slot": "order-section",
+      className: l(
+        "flex items-center gap-2 rounded-xl border bg-[var(--Surface-Primary)] p-4 transition-colors duration-[var(--Motion-Duration-Fast)]",
+        e === "error" || e === "empty" ? "border-[var(--Border-Caution)]" : "border-[var(--Border-Medium-Emphasis)]",
+        a && "cursor-pointer hover:bg-[var(--Surface-Secondary)] hover:border-[var(--Border-High-Emphasis)]",
+        m
+      ),
+      ...d,
+      children: [
+        /* @__PURE__ */ t("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [
+          /* @__PURE__ */ r("h3", { className: "typo-label-md text-[var(--Text-High-Emphasis)]", children: i }),
+          e === "empty" ? /* @__PURE__ */ r("p", { className: "typo-body-md text-[var(--Text-Caution)]", children: "未入力" }) : /* @__PURE__ */ t("div", { className: "space-y-2", children: [
+            o && /* @__PURE__ */ r("p", { className: "typo-body-sm text-[var(--Text-High-Emphasis)]", children: o }),
+            /* @__PURE__ */ r("div", { className: "typo-body-sm text-[var(--Text-High-Emphasis)]", children: c })
+          ] }),
+          e === "error" && /* @__PURE__ */ r("p", { className: "mt-1 typo-body-sm text-[var(--Text-Caution)]", children: "入力内容にエラーがあります。確認してください。" })
+        ] }),
+        a && /* @__PURE__ */ t(
+          "button",
+          {
+            type: "button",
+            onClick: a,
+            className: "flex shrink-0 items-center gap-0.5 typo-body-md text-[var(--Text-Accent-Primary)] transition-colors hover:opacity-80",
+            children: [
+              s,
+              /* @__PURE__ */ r(n, { size: 20, className: "text-[var(--Text-Accent-Primary)]" })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  y as OrderSection
+};

package/dist/components/ec/order-summary.js

@@ -0,0 +1,78 @@
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import "react";
+import y from "iconsax-reactjs/dist/esm/ShieldTick.js";
+import { cn as l } from "../../lib/utils.js";
+import { Button as u } from "../foundations/button.js";
+import { Separator as v } from "../foundations/separator.js";
+function T({
+  className: t,
+  lineItems: r,
+  totalLabel: o = "合計（税込）",
+  totalValue: d,
+  ctaLabel: c,
+  onCTAClick: n,
+  showSecurityBadge: p = !1,
+  securityText: h = "SSL暗号化通信で安全にお手続きいただけます",
+  disableFixed: x = !1,
+  ctaDisabled: f = !1,
+  ...i
+}) {
+  const m = /* @__PURE__ */ a("div", { className: "space-y-2 px-4 py-3", children: [
+    r && r.map((s) => /* @__PURE__ */ a(
+      "div",
+      {
+        className: "flex items-center justify-between typo-body-md",
+        children: [
+          /* @__PURE__ */ e("span", { className: "text-[var(--Text-Medium-Emphasis)]", children: s.label }),
+          /* @__PURE__ */ e("span", { className: "text-[var(--Text-High-Emphasis)]", children: s.value })
+        ]
+      },
+      s.label
+    )),
+    r && r.length > 0 && /* @__PURE__ */ e(v, {}),
+    /* @__PURE__ */ a("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ e("span", { className: "typo-heading-md text-[var(--Text-High-Emphasis)]", children: o }),
+      /* @__PURE__ */ e("span", { className: "typo-heading-lg text-[var(--Text-High-Emphasis)]", children: d })
+    ] }),
+    /* @__PURE__ */ e(
+      u,
+      {
+        size: "xl",
+        className: "w-full",
+        onClick: n,
+        disabled: f,
+        children: c
+      }
+    ),
+    p && /* @__PURE__ */ a("p", { className: "flex items-center justify-center gap-1 typo-body-sm text-[var(--Text-Low-Emphasis)]", children: [
+      /* @__PURE__ */ e(y, { size: 12 }),
+      h
+    ] })
+  ] });
+  return x ? /* @__PURE__ */ e(
+    "div",
+    {
+      "data-slot": "order-summary",
+      className: l(
+        "border-t border-[var(--Border-Low-Emphasis)] bg-[var(--Surface-Primary)]",
+        t
+      ),
+      ...i,
+      children: m
+    }
+  ) : /* @__PURE__ */ e(
+    "div",
+    {
+      "data-slot": "order-summary",
+      className: l(
+        "fixed inset-x-0 bottom-[52px] z-[var(--Z-Sticky)] mx-auto max-w-[430px] border-t border-[var(--Border-Low-Emphasis)] bg-[var(--Surface-Primary)]",
+        t
+      ),
+      ...i,
+      children: m
+    }
+  );
+}
+export {
+  T as OrderSummary
+};

package/dist/components/ec/payment-method.js

@@ -0,0 +1,81 @@
+import { jsx as s, jsxs as e } from "react/jsx-runtime";
+import "react";
+import { cn as o } from "../../lib/utils.js";
+const d = {
+  visa: "Visa",
+  mastercard: "Mastercard",
+  jcb: "JCB",
+  amex: "American Express",
+  diners: "Diners Club"
+}, g = {
+  visa: "https://assets.cake.jp/bp/img/carts/ec/logo/visa.png",
+  mastercard: "https://assets.cake.jp/bp/img/carts/ec/logo/mastercard.png",
+  jcb: "https://assets.cake.jp/bp/img/carts/ec/logo/jcb.png",
+  amex: "https://assets.cake.jp/bp/img/carts/ec/logo/amex.png",
+  diners: "https://assets.cake.jp/bp/img/carts/ec/logo/diners.png"
+};
+function p({ brand: i, className: t, ...a }) {
+  return /* @__PURE__ */ s(
+    "img",
+    {
+      src: g[i],
+      alt: d[i],
+      className: o("h-[30px] w-auto object-contain", t),
+      ...a
+    }
+  );
+}
+function y({
+  method: i,
+  cardBrand: t,
+  cardLast4: a,
+  cardExpiry: m,
+  status: r = "registered",
+  acceptedBrands: c,
+  className: n,
+  ...h
+}) {
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      "data-slot": "payment-method",
+      className: o("space-y-3", n),
+      ...h,
+      children: [
+        r === "registered" && t && /* @__PURE__ */ e("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ s(p, { brand: t }),
+          /* @__PURE__ */ e("div", { children: [
+            /* @__PURE__ */ s("p", { className: "typo-label-sm text-[var(--Text-High-Emphasis)]", children: i }),
+            a && /* @__PURE__ */ e("p", { className: "typo-body-sm text-[var(--Text-Medium-Emphasis)]", children: [
+              "**** **** **** ",
+              a
+            ] }),
+            m && /* @__PURE__ */ e("p", { className: "typo-body-sm text-[var(--Text-Low-Emphasis)]", children: [
+              "有効期限: ",
+              m
+            ] })
+          ] })
+        ] }),
+        r === "unregistered" && /* @__PURE__ */ e("p", { className: "typo-body-sm text-[var(--Text-Low-Emphasis)]", children: [
+          i,
+          "が登録されていません"
+        ] }),
+        r === "expired" && /* @__PURE__ */ e("div", { className: "flex items-center gap-2", children: [
+          t && /* @__PURE__ */ s(p, { brand: t }),
+          /* @__PURE__ */ e("div", { children: [
+            /* @__PURE__ */ s("p", { className: "typo-label-sm text-[var(--Text-Caution)]", children: "有効期限切れ" }),
+            a && /* @__PURE__ */ e("p", { className: "typo-body-sm text-[var(--Text-Low-Emphasis)]", children: [
+              "**** ",
+              a
+            ] })
+          ] })
+        ] }),
+        c && c.length > 0 && /* @__PURE__ */ s("ul", { className: "flex items-center gap-2 list-none p-0 m-0", children: c.map((l) => /* @__PURE__ */ s("li", { children: /* @__PURE__ */ s(p, { brand: l }) }, l)) })
+      ]
+    }
+  );
+}
+export {
+  p as CreditCardIcon,
+  y as PaymentMethodDisplay
+};

package/dist/components/ec/product-card.js

@@ -0,0 +1,235 @@
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import "react";
+import { cn as x } from "../../lib/utils.js";
+import { PriceDisplay as T } from "../primitives/price-display.js";
+import { RatingStars as k } from "./rating-stars.js";
+import { Tag as p } from "../primitives/tag.js";
+function B({
+  href: l,
+  onClick: a,
+  name: t
+}) {
+  return l ? /* @__PURE__ */ e(
+    "a",
+    {
+      href: l,
+      className: "absolute inset-0 z-[var(--Z-Local-1)]",
+      "aria-label": t,
+      onClick: a,
+      children: /* @__PURE__ */ e("span", { className: "sr-only", children: t })
+    }
+  ) : a ? /* @__PURE__ */ e(
+    "button",
+    {
+      type: "button",
+      className: "absolute inset-0 z-[var(--Z-Local-1)] cursor-pointer",
+      "aria-label": t,
+      onClick: a,
+      children: /* @__PURE__ */ e("span", { className: "sr-only", children: t })
+    }
+  ) : null;
+}
+function O({ size: l = 20, filled: a = !1 }) {
+  return /* @__PURE__ */ e(
+    "svg",
+    {
+      width: l,
+      height: l,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      className: "transition-colors",
+      children: /* @__PURE__ */ e(
+        "path",
+        {
+          d: "M17 3H7a2 2 0 0 0-2 2v16l7-4 7 4V5a2 2 0 0 0-2-2Z",
+          fill: a ? "var(--Brand-Cake-Orange)" : "none",
+          stroke: a ? "var(--Brand-Cake-Orange)" : "var(--Object-High-Emphasis)",
+          strokeWidth: 1.5,
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  );
+}
+function E({
+  isFavorite: l,
+  onToggle: a,
+  size: t = "md"
+}) {
+  return /* @__PURE__ */ e(
+    "button",
+    {
+      type: "button",
+      className: x(
+        "relative z-10 flex items-center justify-center rounded-full border border-[var(--Border-Medium-Emphasis)] bg-[var(--Surface-Primary)]/80 backdrop-blur-sm transition-colors hover:border-[var(--Border-High-Emphasis)] hover:bg-[var(--Surface-Tertiary)]",
+        t === "sm" ? "size-[30px]" : "size-9"
+      ),
+      onClick: (i) => {
+        i.preventDefault(), i.stopPropagation(), a();
+      },
+      "aria-label": l ? "お気に入りから削除" : "お気に入りに追加",
+      children: /* @__PURE__ */ e(
+        O,
+        {
+          size: t === "sm" ? 16 : 20,
+          filled: l
+        }
+      )
+    }
+  );
+}
+function j({ rank: l }) {
+  return /* @__PURE__ */ e(
+    "img",
+    {
+      src: `https://assets.cake.jp/bp/img/common/tags/ranking_${l}.png`,
+      alt: `${l}位`,
+      loading: "lazy",
+      className: "absolute left-1 top-0 z-[var(--Z-Local-2)] h-auto w-[60px]"
+    }
+  );
+}
+function R(l, a) {
+  return a == null || a <= l ? null : `${Math.round((a - l) / a * 100)}%OFF`;
+}
+function M({ name: l, href: a }) {
+  return a ? /* @__PURE__ */ e(
+    "a",
+    {
+      href: a,
+      className: "relative z-10 truncate typo-body-sm text-[var(--Text-Low-Emphasis)] hover:text-[var(--Text-Medium-Emphasis)] hover:underline",
+      onClick: (t) => t.stopPropagation(),
+      children: l
+    }
+  ) : /* @__PURE__ */ e("p", { className: "truncate typo-body-sm text-[var(--Text-Low-Emphasis)]", children: l });
+}
+function _({
+  className: l,
+  name: a,
+  imageUrl: t,
+  imageAlt: i,
+  price: v,
+  originalPrice: f,
+  caption: m,
+  rating: o,
+  reviewCount: y,
+  shopName: u,
+  shopHref: N,
+  tags: b = [],
+  isFavorite: w = !1,
+  onFavoriteToggle: h,
+  onCardClick: g,
+  href: z,
+  ranking: n,
+  deliveryDate: c,
+  orientation: Z = "vertical",
+  showDiscountBadge: P = !0,
+  showCartButton: S = !1,
+  onCartAdd: C,
+  cartButtonLabel: H = "カートに追加",
+  ...L
+}) {
+  const d = P ? R(v, f) : null;
+  return Z === "horizontal" ? /* @__PURE__ */ r(
+    "div",
+    {
+      "data-slot": "product-card",
+      "data-orientation": "horizontal",
+      className: x(
+        // min-w-0: 列トラック（1fr = minmax(auto,1fr)）が nowrap の内容や
+        // 固定 min-width に押し広げられ、カードが列からはみ出すのを防ぐ（#210）
+        "group relative flex min-w-0 rounded-lg bg-[var(--Surface-Primary)]",
+        n != null && "pt-3",
+        l
+      ),
+      ...L,
+      children: [
+        /* @__PURE__ */ e(B, { href: z, onClick: g, name: a }),
+        n != null && /* @__PURE__ */ e(j, { rank: n }),
+        /* @__PURE__ */ r("div", { className: "relative h-auto w-28 shrink-0 overflow-hidden rounded-lg @sm:w-36", children: [
+          /* @__PURE__ */ e("img", { src: t, alt: i ?? a, className: "h-full w-full object-cover", loading: "lazy" }),
+          d && /* @__PURE__ */ e(p, { variant: "sale", size: "sm", className: "absolute bottom-1.5 left-1.5 z-[var(--Z-Local-2)]", children: d }),
+          b.length > 0 && /* @__PURE__ */ e("div", { className: "absolute bottom-1.5 left-1.5 z-[var(--Z-Local-2)] flex flex-wrap gap-1", children: !d && b.map((s) => /* @__PURE__ */ e(p, { variant: s.variant, size: "sm", children: s.label }, s.label)) }),
+          h && /* @__PURE__ */ e("div", { className: "absolute bottom-1 right-1 z-10", children: /* @__PURE__ */ e(E, { isFavorite: w, onToggle: h, size: "sm" }) })
+        ] }),
+        /* @__PURE__ */ r("div", { className: "flex min-w-0 flex-1 flex-col justify-between py-1 pl-3 pr-1", children: [
+          /* @__PURE__ */ r("div", { className: "space-y-0.5", children: [
+            u && /* @__PURE__ */ e(M, { name: u, href: N }),
+            /* @__PURE__ */ e("h3", { className: "line-clamp-2 typo-body-md text-[var(--Text-High-Emphasis)]", children: a })
+          ] }),
+          /* @__PURE__ */ r("div", { className: "mt-1 min-w-0 space-y-0.5", children: [
+            /* @__PURE__ */ r("div", { className: "flex min-w-0 flex-wrap items-center gap-2", children: [
+              o != null && /* @__PURE__ */ e(k, { rating: o, reviewCount: y, size: "sm" }),
+              c && /* @__PURE__ */ r("p", { className: "typo-body-xs text-[var(--Text-Medium-Emphasis)]", children: [
+                "最短 ",
+                c
+              ] })
+            ] }),
+            /* @__PURE__ */ e(T, { price: v, originalPrice: f, size: "sm", showTaxLabel: !1 }),
+            m && /* @__PURE__ */ e("p", { className: "typo-body-xs text-[var(--Text-Medium-Emphasis)]", children: m })
+          ] })
+        ] })
+      ]
+    }
+  ) : /* @__PURE__ */ r(
+    "div",
+    {
+      "data-slot": "product-card",
+      "data-orientation": "vertical",
+      className: x(
+        // max-w: 広いグリッドセルでもカードが膨らみすぎないようカード自身が上限を持つ。
+        // 280px は本番の検索結果グリッド（PC 5列 ≈ カード215px）では未到達＝影響なし。
+        // マイページ等の3列グリッド（実効幅 ~950px）で 3×280+gap が収まる上限として採用。
+        // min-w-0: 旧 min-w-[140px] は列幅より広い床を作り、狭い列でカード・サムネイルが
+        // 列からはみ出す原因だった（#210）。幅は列（minmax(0,1fr)）側が決める。
+        "group relative flex w-full min-w-0 max-w-[280px] flex-col gap-1 bg-[var(--Surface-Primary)]",
+        n != null && "pt-3",
+        l
+      ),
+      ...L,
+      children: [
+        /* @__PURE__ */ e(B, { href: z, onClick: g, name: a }),
+        n != null && /* @__PURE__ */ e(j, { rank: n }),
+        /* @__PURE__ */ r("div", { className: "relative", children: [
+          /* @__PURE__ */ r("div", { className: "aspect-square overflow-hidden rounded-lg", children: [
+            /* @__PURE__ */ e("img", { src: t, alt: i ?? a, className: "h-full w-full object-cover transition-transform duration-[var(--Motion-Duration-Base)] group-hover:scale-105", loading: "lazy" }),
+            /* @__PURE__ */ e("div", { className: "absolute inset-x-1 bottom-1 z-[var(--Z-Local-3)] flex items-end", children: /* @__PURE__ */ r("div", { className: "flex flex-wrap gap-1", children: [
+              d && /* @__PURE__ */ e(p, { variant: "sale", size: "sm", children: d }),
+              b.map((s) => /* @__PURE__ */ e(p, { variant: s.variant, size: "sm", children: s.label }, s.label))
+            ] }) })
+          ] }),
+          h && /* @__PURE__ */ e("div", { className: "absolute bottom-1.5 right-1.5 z-[var(--Z-Local-4)]", children: /* @__PURE__ */ e(E, { isFavorite: w, onToggle: h }) })
+        ] }),
+        /* @__PURE__ */ r("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
+          u && /* @__PURE__ */ e(M, { name: u, href: N }),
+          /* @__PURE__ */ e("h3", { className: "line-clamp-2 min-h-[2lh] typo-body-md text-[var(--Text-High-Emphasis)]", children: a }),
+          (o != null || c) && /* @__PURE__ */ r("div", { className: "flex min-w-0 flex-wrap items-center gap-2", children: [
+            o != null && /* @__PURE__ */ e(k, { rating: o, reviewCount: y, size: "sm" }),
+            c && /* @__PURE__ */ r("p", { className: "typo-body-xs text-[var(--Text-Medium-Emphasis)]", children: [
+              "最短 ",
+              c
+            ] })
+          ] }),
+          /* @__PURE__ */ e(T, { price: v, originalPrice: f, size: "md", showTaxLabel: !1 }),
+          m && /* @__PURE__ */ e("p", { className: "typo-body-xs text-[var(--Text-Medium-Emphasis)]", children: m })
+        ] }),
+        S && /* @__PURE__ */ e(
+          "button",
+          {
+            type: "button",
+            className: "relative z-10 flex h-9 w-full items-center justify-center gap-0.5 rounded-lg bg-[var(--Brand-Cake-Orange)] typo-label-md text-[var(--Text-on-Inverse)] transition-colors hover:bg-[var(--Hover-Primary-Button)] active:bg-[var(--Active-Primary-Button)]",
+            onClick: (s) => {
+              s.preventDefault(), s.stopPropagation(), C?.();
+            },
+            children: H
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  O as BookmarkRibbonIcon,
+  _ as ProductCard
+};