@cakejp/design-system 0.22.0 → 0.23.0

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

@@ -12,13 +12,13 @@ function P({
   shopName: a,
   status: n = "available",
   onAcquire: c,
-  acquireLabel: u = "クーポンを獲得する",
+  acquireLabel: h = "クーポンを獲得する",
   layout: p = "vertical",
   limitLabel: f,
   conditionText: b,
   expiryText: x,
   className: m,
-  ...v
+  ...u
 }) {
   return p === "horizontal" ? /* @__PURE__ */ e(
     w,
@@ -30,7 +30,7 @@ function P({
       status: n,
       onAcquire: c,
       className: m,
-      ...v
+      ...u
     }
   ) : /* @__PURE__ */ i(
     "div",
@@ -41,9 +41,9 @@ function P({
         n === "unavailable" && "opacity-50",
         m
       ),
-      ...v,
+      ...u,
       children: [
-        l && /* @__PURE__ */ i("div", { className: "relative aspect-[5/2] w-full overflow-hidden bg-[var(--Surface-Secondary)]", children: [
+        l && /* @__PURE__ */ i("div", { className: "relative aspect-[5/2] w-full overflow-hidden bg-[var(--Surface-Neutral-Secondary)]", children: [
           /* @__PURE__ */ e(
             "img",
             {
@@ -68,7 +68,7 @@ function P({
           t && /* @__PURE__ */ e("p", { className: "mt-1 break-words typo-body-md text-[var(--Text-Medium-Emphasis)]", children: t })
         ] }),
         /* @__PURE__ */ e("div", { className: "px-4 py-3", children: /* @__PURE__ */ e("div", { className: "border-t border-dashed border-[var(--Border-Medium-Emphasis)]" }) }),
-        /* @__PURE__ */ e("div", { className: "px-4 pb-4", children: /* @__PURE__ */ e(h, { status: n, onAcquire: c, label: u, size: "lg" }) })
+        /* @__PURE__ */ e("div", { className: "px-4 pb-4", children: /* @__PURE__ */ e(v, { status: n, onAcquire: c, label: h, size: "lg" }) })
       ]
     }
   );
@@ -100,12 +100,12 @@ function w({
           ] })
         ] }),
         /* @__PURE__ */ e("div", { className: "flex items-stretch justify-center", children: /* @__PURE__ */ e("svg", { width: "2", height: "100%", preserveAspectRatio: "none", className: "text-[var(--Border-Medium-Emphasis)]", children: /* @__PURE__ */ e("line", { x1: "1", y1: "0", x2: "1", y2: "100%", stroke: "currentColor", strokeWidth: "2", strokeDasharray: "4 3" }) }) }),
-        /* @__PURE__ */ e("div", { className: "flex shrink-0 items-center justify-center rounded-r-lg border-b border-r border-t border-[var(--Border-Medium-Emphasis)] bg-[var(--Surface-Primary)] px-3", children: /* @__PURE__ */ e(h, { status: s, onAcquire: a, label: "獲得する", size: "sm" }) })
+        /* @__PURE__ */ e("div", { className: "flex shrink-0 items-center justify-center rounded-r-lg border-b border-r border-t border-[var(--Border-Medium-Emphasis)] bg-[var(--Surface-Primary)] px-3", children: /* @__PURE__ */ e(v, { status: s, onAcquire: a, label: "獲得する", size: "sm" }) })
       ]
     }
   );
 }
-function h({
+function v({
   status: r,
   onAcquire: t,
   label: l,
@@ -126,10 +126,10 @@ function h({
         l
       ]
     }
-  ) : r === "acquiring" ? /* @__PURE__ */ e("div", { className: d(a, "bg-[var(--Brand-Cake-Orange)] text-[var(--Text-on-Inverse)]"), children: /* @__PURE__ */ e(g, { className: "size-5 animate-spin motion-reduce:animate-none" }) }) : r === "acquired" ? /* @__PURE__ */ i("div", { className: d(a, "bg-[var(--Surface-Secondary)] text-[var(--Text-Medium-Emphasis)] animate-in fade-in duration-[var(--Motion-Duration-Slow)] gap-1.5"), children: [
+  ) : r === "acquiring" ? /* @__PURE__ */ e("div", { className: d(a, "bg-[var(--Brand-Cake-Orange)] text-[var(--Text-on-Inverse)]"), children: /* @__PURE__ */ e(g, { className: "size-5 animate-spin motion-reduce:animate-none" }) }) : r === "acquired" ? /* @__PURE__ */ i("div", { className: d(a, "bg-[var(--Surface-Neutral-Secondary)] text-[var(--Text-Medium-Emphasis)] animate-in fade-in duration-[var(--Motion-Duration-Slow)] gap-1.5"), children: [
     /* @__PURE__ */ e(N, { className: "size-4" }),
     "獲得済み"
-  ] }) : /* @__PURE__ */ e("div", { className: d(a, "bg-[var(--Surface-Secondary)] text-[var(--Text-Low-Emphasis)]"), children: "獲得不可" });
+  ] }) : /* @__PURE__ */ e("div", { className: d(a, "bg-[var(--Surface-Neutral-Secondary)] text-[var(--Text-Low-Emphasis)]"), children: "獲得不可" });
 }
 export {
   P as CouponCard

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

@@ -78,7 +78,7 @@ function W({
               onClick: () => g && f?.(i.date),
               className: v(
                 "flex flex-col items-center gap-0.5 rounded-md py-1.5 typo-body-md transition-colors",
-                g && "cursor-pointer hover:bg-[var(--Surface-Secondary)]",
+                g && "cursor-pointer hover:bg-[var(--Surface-Neutral-Secondary)]",
                 d && "relative z-10 bg-[var(--Brand-Cake-Orange)]/10 ring-1 ring-inset ring-[var(--Brand-Cake-Orange)]",
                 // forced-colors（Windows ハイコントラスト）では薄い地が Canvas に、枠（ring = box-shadow）が
                 // 消えて選んだ日が見えなかった。選んだ日だけ OS の選択色で示し、日付と ○△× も

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

@@ -65,7 +65,7 @@ function lr({
       /* @__PURE__ */ r(M, { children: L ? /* @__PURE__ */ r(F, { children: m.label }) : /* @__PURE__ */ r(G, { href: m.href ?? "#", linkComponent: i, children: m.label }) })
     ] }, d);
   }) });
-  return /* @__PURE__ */ a("div", { className: "@container min-h-screen bg-[var(--Surface-Secondary)]", children: [
+  return /* @__PURE__ */ a("div", { className: "@container min-h-screen bg-[var(--Surface-Neutral-Secondary)]", children: [
     k !== !1 && /* @__PURE__ */ r(I, { href: `#${o}` }),
     /* @__PURE__ */ a("div", { className: "@md:hidden bg-[var(--Surface-Primary)]", children: [
       /* @__PURE__ */ r(t, { variant: "back", onBack: S }),

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

@@ -19,7 +19,7 @@ function y({
       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)]",
+        a && "cursor-pointer hover:bg-[var(--Surface-Neutral-Secondary)] hover:border-[var(--Border-High-Emphasis)]",
         m
       ),
       ...d,

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

@@ -7,8 +7,8 @@ import { Separator as y } from "../foundations/separator.js";
 function T({
   className: t,
   lineItems: a,
-  totalLabel: d = "合計（税込）",
-  totalValue: o,
+  totalLabel: o = "合計（税込）",
+  totalValue: d,
   ctaLabel: c,
   onCTAClick: n,
   showSecurityBadge: p = !1,
@@ -31,8 +31,8 @@ function T({
     )),
     a && a.length > 0 && /* @__PURE__ */ e(y, {}),
     /* @__PURE__ */ r("div", { className: "flex items-center justify-between", children: [
-      /* @__PURE__ */ e("span", { className: "typo-heading-md text-[var(--Text-High-Emphasis)]", children: d }),
-      /* @__PURE__ */ e("span", { className: "typo-heading-lg text-[var(--Text-High-Emphasis)]", children: o })
+      /* @__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,
@@ -66,7 +66,9 @@ function T({
       "data-slot": "order-summary",
       className: l(
         // fixed 表示はスクロール内容の上に重なるため地は Surface-Elevated（disableFixed 側はページ内フローなので Surface-Primary のまま）
-        "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-Elevated)]",
+        // bottom: BottomTabBar（高さ 52px + 下端の safe-area）の真上に重ねる。
+        // safe-area の分を足さないと、ホームインジケータのある iPhone（viewport-fit=cover）でタブバーに重なる。safe-area が 0 の環境では 52px のまま
+        "fixed inset-x-0 bottom-[calc(52px+env(safe-area-inset-bottom))] z-[var(--Z-Sticky)] mx-auto max-w-[430px] border-t border-[var(--Border-Low-Emphasis)] bg-[var(--Surface-Elevated)]",
         t
       ),
       ...i,

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

@@ -1,7 +1,8 @@
 import { jsx as e, jsxs as l } from "react/jsx-runtime";
 import "react";
 import { cn as c } from "../../lib/utils.js";
-import { buttonVariants as I } from "../foundations/button.js";
+import { FOCUS_RING_ONLY as $ } from "../../lib/focus-ring.js";
+import { buttonVariants as D } from "../foundations/button.js";
 import { PriceDisplay as B } from "../primitives/price-display.js";
 import { RatingStars as M } from "./rating-stars.js";
 import { Tag as b } from "../primitives/tag.js";
@@ -9,11 +10,11 @@ function j({
   href: a,
   onClick: r,
   name: t,
-  linkComponent: i
+  linkComponent: o
 }) {
-  const o = i ?? "a";
+  const i = o ?? "a";
   return a ? /* @__PURE__ */ e(
-    o,
+    i,
     {
       href: a,
       className: "absolute inset-0 z-[var(--Z-Local-1)]",
@@ -65,11 +66,12 @@ function Z({
     {
       type: "button",
       className: c(
-        "relative z-10 flex items-center justify-center rounded-full border border-[var(--Border-Control,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)]",
+        "relative z-10 flex items-center justify-center rounded-full border border-[var(--Border-Control,var(--Border-Medium-Emphasis))] bg-[var(--Surface-Primary)]/80 backdrop-blur-sm transition-colors hover:border-[var(--Border-High-Emphasis)] hover:bg-[var(--Surface-Neutral-Tertiary)] focus-visible:outline-none",
+        $,
         t === "sm" ? "size-[30px]" : "size-9"
       ),
-      onClick: (i) => {
-        i.preventDefault(), i.stopPropagation(), r();
+      onClick: (o) => {
+        o.preventDefault(), o.stopPropagation(), r();
       },
       "aria-label": a ? "お気に入りから削除" : "お気に入りに追加",
       children: /* @__PURE__ */ e(
@@ -96,39 +98,39 @@ function S({ rank: a }) {
 function q(a, r) {
   return r == null || r <= a ? null : `${Math.round((r - a) / r * 100)}%OFF`;
 }
-function H({
+function O({
   name: a,
   href: r,
   linkComponent: t
 }) {
-  const i = t ?? "a";
+  const o = t ?? "a";
   return r ? /* @__PURE__ */ e(
-    i,
+    o,
     {
       href: r,
       className: "relative z-10 truncate typo-body-sm text-[var(--Text-Low-Emphasis)] hover:text-[var(--Text-Medium-Emphasis)] hover:underline",
-      onClick: (o) => o.stopPropagation(),
+      onClick: (i) => i.stopPropagation(),
       children: a
     }
   ) : /* @__PURE__ */ e("p", { className: "truncate typo-body-sm text-[var(--Text-Low-Emphasis)]", children: a });
 }
-function O(a) {
+function H(a) {
   if (a !== "none")
     return a === "fade" ? "transition-[filter] group-hover:brightness-110" : "transition-transform group-hover:scale-105";
 }
-function Y({
+function A({
   className: a,
   name: r,
   imageUrl: t,
-  imageAlt: i,
-  price: o,
+  imageAlt: o,
+  price: i,
   originalPrice: x,
   caption: h,
   rating: d,
   reviewCount: y,
   shopName: p,
   shopHref: z,
-  hoverEffect: P,
+  hoverEffect: C,
   tags: N = [],
   isFavorite: w = !1,
   onFavoriteToggle: v,
@@ -137,14 +139,14 @@ function Y({
   ranking: n,
   deliveryDate: m,
   orientation: T = "vertical",
-  showDiscountBadge: C = !0,
+  showDiscountBadge: P = !0,
   showCartButton: R = !1,
-  onCartAdd: $,
-  cartButtonLabel: D = "カートに追加",
+  onCartAdd: I,
+  cartButtonLabel: _ = "カートに追加",
   linkComponent: f,
   ...E
 }) {
-  const k = P ?? (T === "horizontal" ? "none" : "zoom"), u = C ? q(o, x) : null;
+  const k = C ?? (T === "horizontal" ? "none" : "zoom"), u = P ? q(i, x) : null;
   return T === "horizontal" ? /* @__PURE__ */ l(
     "div",
     {
@@ -162,14 +164,14 @@ function Y({
         /* @__PURE__ */ e(j, { href: L, onClick: g, name: r, linkComponent: f }),
         n != null && /* @__PURE__ */ e(S, { rank: n }),
         /* @__PURE__ */ l("div", { className: "relative h-auto w-28 shrink-0 overflow-hidden rounded-lg @sm:w-36", children: [
-          /* @__PURE__ */ e("img", { src: t, alt: i ?? r, className: c("h-full w-full object-cover duration-[var(--Motion-Duration-Base)]", O(k)), loading: "lazy" }),
+          /* @__PURE__ */ e("img", { src: t, alt: o ?? r, className: c("h-full w-full object-cover duration-[var(--Motion-Duration-Base)]", H(k)), loading: "lazy" }),
           u && /* @__PURE__ */ e(b, { variant: "sale", size: "sm", className: "absolute bottom-1.5 left-1.5 z-[var(--Z-Local-2)]", children: u }),
           N.length > 0 && /* @__PURE__ */ e("div", { className: "absolute bottom-1.5 left-1.5 z-[var(--Z-Local-2)] flex flex-wrap gap-1", children: !u && N.map((s) => /* @__PURE__ */ e(b, { variant: s.variant, size: "sm", children: s.label }, s.label)) }),
           v && /* @__PURE__ */ e("div", { className: "absolute bottom-1 right-1 z-10", children: /* @__PURE__ */ e(Z, { isFavorite: w, onToggle: v, size: "sm" }) })
         ] }),
         /* @__PURE__ */ l("div", { className: "flex min-w-0 flex-1 flex-col justify-between py-1 pl-3 pr-1", children: [
           /* @__PURE__ */ l("div", { className: "space-y-0.5", children: [
-            p && /* @__PURE__ */ e(H, { name: p, href: z, linkComponent: f }),
+            p && /* @__PURE__ */ e(O, { name: p, href: z, linkComponent: f }),
             /* @__PURE__ */ e("h3", { className: "line-clamp-2 typo-body-md text-[var(--Text-High-Emphasis)]", children: r })
           ] }),
           /* @__PURE__ */ l("div", { className: "mt-1 min-w-0 space-y-0.5", children: [
@@ -180,7 +182,7 @@ function Y({
                 m
               ] })
             ] }),
-            /* @__PURE__ */ e(B, { price: o, originalPrice: x, size: "sm", showTaxLabel: !1 }),
+            /* @__PURE__ */ e(B, { price: i, originalPrice: x, size: "sm", showTaxLabel: !1 }),
             h && /* @__PURE__ */ e("p", { className: "typo-body-xs text-[var(--Text-Medium-Emphasis)]", children: h })
           ] })
         ] })
@@ -207,7 +209,7 @@ function Y({
         n != null && /* @__PURE__ */ e(S, { rank: n }),
         /* @__PURE__ */ l("div", { className: "relative", children: [
           /* @__PURE__ */ l("div", { className: "aspect-square overflow-hidden rounded-lg", children: [
-            /* @__PURE__ */ e("img", { src: t, alt: i ?? r, className: c("h-full w-full object-cover duration-[var(--Motion-Duration-Base)]", O(k)), loading: "lazy" }),
+            /* @__PURE__ */ e("img", { src: t, alt: o ?? r, className: c("h-full w-full object-cover duration-[var(--Motion-Duration-Base)]", H(k)), loading: "lazy" }),
             /* @__PURE__ */ e("div", { className: "absolute inset-x-1 bottom-1 z-[var(--Z-Local-3)] flex items-end", children: /* @__PURE__ */ l("div", { className: "flex flex-wrap gap-1", children: [
               u && /* @__PURE__ */ e(b, { variant: "sale", size: "sm", children: u }),
               N.map((s) => /* @__PURE__ */ e(
@@ -224,7 +226,7 @@ function Y({
           v && /* @__PURE__ */ e("div", { className: "absolute bottom-1.5 right-1.5 z-[var(--Z-Local-4)]", children: /* @__PURE__ */ e(Z, { isFavorite: w, onToggle: v }) })
         ] }),
         /* @__PURE__ */ l("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
-          p && /* @__PURE__ */ e(H, { name: p, href: z, linkComponent: f }),
+          p && /* @__PURE__ */ e(O, { name: p, href: z, linkComponent: f }),
           /* @__PURE__ */ e("h3", { className: "line-clamp-2 min-h-[2lh] typo-body-md text-[var(--Text-High-Emphasis)]", children: r }),
           (d != null || m) && /* @__PURE__ */ l("div", { className: "flex min-w-0 flex-wrap items-center gap-2", children: [
             d != null && /* @__PURE__ */ e(M, { rating: d, reviewCount: y, size: "sm" }),
@@ -233,18 +235,18 @@ function Y({
               m
             ] })
           ] }),
-          /* @__PURE__ */ e(B, { price: o, originalPrice: x, size: "md", showTaxLabel: !1 }),
+          /* @__PURE__ */ e(B, { price: i, originalPrice: x, size: "md", showTaxLabel: !1 }),
           h && /* @__PURE__ */ e("p", { className: "typo-body-xs text-[var(--Text-Medium-Emphasis)]", children: h })
         ] }),
         R && /* @__PURE__ */ e(
           "button",
           {
             type: "button",
-            className: c(I({ variant: "outline", size: "sm" }), "relative z-10 h-9 w-full gap-0.5"),
+            className: c(D({ variant: "outline", size: "sm" }), "relative z-10 h-9 w-full gap-0.5"),
             onClick: (s) => {
-              s.preventDefault(), s.stopPropagation(), $?.();
+              s.preventDefault(), s.stopPropagation(), I?.();
             },
-            children: D
+            children: _
           }
         )
       ]
@@ -253,5 +255,5 @@ function Y({
 }
 export {
   V as BookmarkRibbonIcon,
-  Y as ProductCard
+  A as ProductCard
 };

package/dist/components/ec/product-detail-sidebar.js

@@ -51,7 +51,7 @@ function oe({
     {
       "data-slot": "product-detail-sidebar",
       className: G(
-        "flex w-[400px] max-w-full flex-col rounded-2xl border-2 border-[var(--Surface-Tertiary)] bg-[var(--Surface-Primary)]",
+        "flex w-[400px] max-w-full flex-col rounded-2xl border-2 border-[var(--Surface-Neutral-Tertiary)] bg-[var(--Surface-Primary)]",
         w
       ),
       ...P,

package/dist/components/ec/product-list-item.js

@@ -1,14 +1,15 @@
 import { jsxs as s, jsx as e } from "react/jsx-runtime";
 import "react";
 import { cn as r } from "../../lib/utils.js";
+import { FOCUS_RING_INSET as F } from "../../lib/focus-ring.js";
 import { Button as m } from "../foundations/button.js";
 import { Tag as q } from "../primitives/tag.js";
-import { NumberInput as F } from "../primitives/number-input.js";
+import { NumberInput as U } from "../primitives/number-input.js";
 import { PriceDisplay as D } from "../primitives/price-display.js";
-import { BookmarkRibbonIcon as U } from "./product-card.js";
-function de({
-  name: n,
-  imageUrl: o,
+import { BookmarkRibbonIcon as ee } from "./product-card.js";
+function oe({
+  name: o,
+  imageUrl: n,
   price: p,
   caption: h,
   shopName: f,
@@ -19,11 +20,11 @@ function de({
   statusLabel: x,
   variant: i = "default",
   showCartButton: j = !1,
-  onAddToCart: V,
-  showDetailButton: M = !1,
-  onViewDetail: W,
-  showBookmark: A = !1,
-  href: S,
+  onAddToCart: _,
+  showDetailButton: S = !1,
+  onViewDetail: G,
+  showBookmark: V = !1,
+  href: M,
   orderDate: C,
   deliveryInfo: H,
   totalPrice: v,
@@ -31,25 +32,25 @@ function de({
   optionInfo: B,
   // cart variant props
   quantity: b,
-  onQuantityChange: G,
-  quantitySize: J = "sm",
-  originalPrice: K,
-  priceLabel: g,
-  deliveryText: O,
-  onDelete: N,
+  onQuantityChange: W,
+  quantitySize: A = "sm",
+  originalPrice: J,
+  priceLabel: N,
+  deliveryText: I,
+  onDelete: g,
   onSaveForLater: w,
-  imageSize: Q = "size-20",
-  subtotal: P,
-  subtotalLabel: X = "小計",
+  imageSize: K = "size-20",
+  subtotal: O,
+  subtotalLabel: Q = "小計",
   // slot props
   leftSlot: E,
   rightSlot: $,
-  bottomSlot: I,
-  linkComponent: Y,
-  className: Z,
-  ..._
+  bottomSlot: P,
+  linkComponent: X,
+  className: Y,
+  ...Z
 }) {
-  const T = Y ?? "a", t = i === "small" || i === "xsm", c = i === "review", a = i === "cart", R = a ? Q : i === "xsm" ? "size-10" : t ? "size-14" : "size-[102px]";
+  const T = X ?? "a", t = i === "small" || i === "xsm", c = i === "review", a = i === "cart", R = a ? K : i === "xsm" ? "size-10" : t ? "size-14" : "size-[102px]";
   return /* @__PURE__ */ s(
     "div",
     {
@@ -57,9 +58,9 @@ function de({
       className: r(
         "flex flex-col bg-[var(--Surface-Primary)]",
         i === "lp" && "flex-col rounded-xl bg-[var(--Surface-Secondary)] p-4",
-        Z
+        Y
       ),
-      ..._,
+      ...Z,
       children: [
         /* @__PURE__ */ s("div", { className: r(
           "flex gap-2 px-4 py-2 min-w-0 overflow-hidden",
@@ -67,12 +68,12 @@ function de({
           a && "gap-3 p-4",
           i === "lp" && "gap-3 px-0 py-0"
         ), children: [
-          E ? /* @__PURE__ */ e("div", { className: "shrink-0", children: E }) : o && !a ? /* @__PURE__ */ s(T, { href: S ?? "#", className: "relative shrink-0", children: [
+          E ? /* @__PURE__ */ e("div", { className: "shrink-0", children: E }) : n && !a ? /* @__PURE__ */ s(T, { href: M ?? "#", className: "relative shrink-0", children: [
             /* @__PURE__ */ e(
               "img",
               {
-                src: o,
-                alt: n,
+                src: n,
+                alt: o,
                 className: r(
                   "rounded-lg object-cover",
                   R,
@@ -82,19 +83,19 @@ function de({
             ),
             x && /* @__PURE__ */ e("span", { className: "absolute top-1.5 left-1.5 rounded bg-[var(--Surface-Primary)]/80 px-1.5 py-0.5 typo-label-xs text-[var(--Text-Medium-Emphasis)]", children: x })
           ] }) : null,
-          !E && o && a && /* @__PURE__ */ s(
+          !E && n && a && /* @__PURE__ */ s(
             "div",
             {
               className: r(
-                "relative shrink-0 overflow-hidden rounded-lg bg-[var(--Surface-Secondary)]",
+                "relative shrink-0 overflow-hidden rounded-lg bg-[var(--Surface-Neutral-Secondary)]",
                 R
               ),
               children: [
                 /* @__PURE__ */ e(
                   "img",
                   {
-                    src: o,
-                    alt: n,
+                    src: n,
+                    alt: o,
                     className: "h-full w-full object-cover"
                   }
                 ),
@@ -120,15 +121,15 @@ function de({
               f,
               d && ` / ${d}`
             ] })),
-            a ? /* @__PURE__ */ e("h3", { className: "line-clamp-2 typo-body-md text-[var(--Text-High-Emphasis)] min-w-0 break-words", children: n }) : /* @__PURE__ */ e(
+            a ? /* @__PURE__ */ e("h3", { className: "line-clamp-2 typo-body-md text-[var(--Text-High-Emphasis)] min-w-0 break-words", children: o }) : /* @__PURE__ */ e(
               T,
               {
-                href: S ?? "#",
+                href: M ?? "#",
                 className: r(
                   "block text-[var(--Text-High-Emphasis)]",
                   t ? "truncate typo-body-sm" : "line-clamp-2 typo-label-md"
                 ),
-                children: n
+                children: o
               }
             ),
             u && u.length > 0 && !t && !c && /* @__PURE__ */ e("div", { className: "flex flex-wrap gap-x-1", children: u.map((l) => /* @__PURE__ */ s("span", { className: "typo-body-xs text-[var(--Text-Medium-Emphasis)]", children: [
@@ -136,28 +137,28 @@ function de({
               l
             ] }, l)) }),
             y && y.length > 0 && !t && !c && /* @__PURE__ */ e("div", { className: "flex flex-wrap gap-1", children: y.map((l, k) => /* @__PURE__ */ e(q, { variant: l.variant, size: a ? "sm" : void 0, children: l.label }, k)) }),
-            a && O && /* @__PURE__ */ e("p", { className: "typo-body-sm text-[var(--Text-Low-Emphasis)]", children: O }),
+            a && I && /* @__PURE__ */ e("p", { className: "typo-body-sm text-[var(--Text-Low-Emphasis)]", children: I }),
             a && p !== void 0 && /* @__PURE__ */ s("div", { className: "flex items-center justify-between min-w-0 gap-2 overflow-hidden", children: [
-              g && /* @__PURE__ */ e("span", { className: "typo-body-sm text-[var(--Text-Low-Emphasis)] shrink-0", children: g }),
-              /* @__PURE__ */ e("div", { className: r("min-w-0 shrink-0", !g && "ml-auto"), children: /* @__PURE__ */ e(
+              N && /* @__PURE__ */ e("span", { className: "typo-body-sm text-[var(--Text-Low-Emphasis)] shrink-0", children: N }),
+              /* @__PURE__ */ e("div", { className: r("min-w-0 shrink-0", !N && "ml-auto"), children: /* @__PURE__ */ e(
                 D,
                 {
                   price: p,
-                  originalPrice: K,
+                  originalPrice: J,
                   size: "sm",
                   showTaxLabel: !1
                 }
               ) })
             ] }),
             a && h && /* @__PURE__ */ e("p", { className: "typo-body-xs text-[var(--Text-Medium-Emphasis)]", children: h }),
-            a && (b !== void 0 || N || w) && /* @__PURE__ */ s("div", { className: "flex flex-wrap items-center justify-between gap-2", children: [
+            a && (b !== void 0 || g || w) && /* @__PURE__ */ s("div", { className: "flex flex-wrap items-center justify-between gap-2", children: [
               /* @__PURE__ */ s("div", { className: "flex items-center gap-1", children: [
-                N && /* @__PURE__ */ e(
+                g && /* @__PURE__ */ e(
                   m,
                   {
                     variant: "tertiary",
                     size: "sm",
-                    onClick: N,
+                    onClick: g,
                     "aria-label": "削除",
                     children: "削除"
                   }
@@ -170,7 +171,7 @@ function de({
                     onClick: w,
                     "aria-label": "あとで買う",
                     children: [
-                      /* @__PURE__ */ e(U, { size: 16 }),
+                      /* @__PURE__ */ e(ee, { size: 16 }),
                       "あとで買う"
                     ]
                   }
@@ -178,18 +179,18 @@ function de({
               ] }),
               /* @__PURE__ */ s("div", { className: "flex flex-wrap items-center justify-end gap-2", children: [
                 b !== void 0 && /* @__PURE__ */ e(
-                  F,
+                  U,
                   {
                     value: b,
-                    size: J,
-                    onChange: G
+                    size: A,
+                    onChange: W
                   }
                 ),
-                P !== void 0 && /* @__PURE__ */ s("div", { className: "flex items-baseline gap-1", children: [
-                  /* @__PURE__ */ e("span", { className: "typo-body-sm text-[var(--Text-Low-Emphasis)]", children: X }),
+                O !== void 0 && /* @__PURE__ */ s("div", { className: "flex items-baseline gap-1", children: [
+                  /* @__PURE__ */ e("span", { className: "typo-body-sm text-[var(--Text-Low-Emphasis)]", children: Q }),
                   /* @__PURE__ */ s("span", { className: "typo-label-md text-[var(--Text-High-Emphasis)]", children: [
                     "¥",
-                    P.toLocaleString()
+                    O.toLocaleString()
                   ] })
                 ] })
               ] })
@@ -232,11 +233,11 @@ function de({
               /* @__PURE__ */ e("span", { className: "text-[var(--Text-Medium-Emphasis)]", children: k })
             ] }, l)) })
           ] }),
-          $ ? /* @__PURE__ */ e("div", { className: "shrink-0 self-start", children: $ }) : A && !c && /* @__PURE__ */ e(
+          $ ? /* @__PURE__ */ e("div", { className: "shrink-0 self-start", children: $ }) : V && !c && /* @__PURE__ */ e(
             "button",
             {
               type: "button",
-              className: "flex size-9 shrink-0 items-center justify-center self-start rounded-full border border-[var(--Border-Control,var(--Border-Medium-Emphasis))] bg-[var(--Surface-Secondary)] transition-colors hover:border-[var(--Border-High-Emphasis)] hover:bg-[var(--Surface-Tertiary)]",
+              className: `flex size-9 shrink-0 items-center justify-center self-start rounded-full border border-[var(--Border-Control,var(--Border-Medium-Emphasis))] bg-[var(--Surface-Neutral-Secondary)] transition-colors hover:border-[var(--Border-High-Emphasis)] hover:bg-[var(--Surface-Neutral-Tertiary)] focus-visible:outline-none ${F}`,
               "aria-label": "ブックマーク",
               children: /* @__PURE__ */ e(
                 "svg",
@@ -253,15 +254,15 @@ function de({
             }
           )
         ] }),
-        I ? /* @__PURE__ */ e("div", { className: "px-4 py-3", children: I }) : (j || M || L) && /* @__PURE__ */ s("div", { className: "flex justify-end gap-3.5 px-4 py-3", children: [
-          M && /* @__PURE__ */ e(m, { variant: "tertiary", size: "sm", onClick: W, children: "商品詳細を見る" }),
+        P ? /* @__PURE__ */ e("div", { className: "px-4 py-3", children: P }) : (j || S || L) && /* @__PURE__ */ s("div", { className: "flex justify-end gap-3.5 px-4 py-3", children: [
+          S && /* @__PURE__ */ e(m, { variant: "tertiary", size: "sm", onClick: G, children: "商品詳細を見る" }),
           L && /* @__PURE__ */ e(m, { variant: "secondary", size: "sm", children: "レビューを書く" }),
-          j && /* @__PURE__ */ e(m, { size: "sm", onClick: V, children: "カートに追加" })
+          j && /* @__PURE__ */ e(m, { size: "sm", onClick: _, children: "カートに追加" })
         ] })
       ]
     }
   );
 }
 export {
-  de as ProductListItem
+  oe as ProductListItem
 };