@cakejp/design-system 0.20.1 → 0.21.0

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

@@ -2,11 +2,11 @@ import { jsxs as s, jsx as e } from "react/jsx-runtime";
 import "react";
 import { cn as r } from "../../lib/utils.js";
 import { Button as m } from "../foundations/button.js";
-import { Tag as Z } from "../primitives/tag.js";
-import { NumberInput as _ } from "../primitives/number-input.js";
-import { PriceDisplay as q } from "../primitives/price-display.js";
-import { BookmarkRibbonIcon as F } from "./product-card.js";
-function te({
+import { Tag as q } from "../primitives/tag.js";
+import { NumberInput as F } 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,
   price: p,
@@ -18,37 +18,38 @@ function te({
   hashTags: u,
   statusLabel: x,
   variant: i = "default",
-  showCartButton: k = !1,
-  onAddToCart: R,
-  showDetailButton: j = !1,
-  onViewDetail: V,
-  showBookmark: W = !1,
-  href: M,
-  orderDate: S,
+  showCartButton: j = !1,
+  onAddToCart: V,
+  showDetailButton: M = !1,
+  onViewDetail: W,
+  showBookmark: A = !1,
+  href: S,
+  orderDate: C,
   deliveryInfo: H,
   totalPrice: v,
-  showReviewButton: C = !1,
-  optionInfo: L,
+  showReviewButton: L = !1,
+  optionInfo: B,
   // cart variant props
   quantity: b,
-  onQuantityChange: A,
-  quantitySize: G = "sm",
-  originalPrice: J,
-  priceLabel: N,
-  deliveryText: B,
-  onDelete: g,
+  onQuantityChange: G,
+  quantitySize: J = "sm",
+  originalPrice: K,
+  priceLabel: g,
+  deliveryText: O,
+  onDelete: N,
   onSaveForLater: w,
-  imageSize: K = "size-20",
-  subtotal: O,
-  subtotalLabel: Q = "小計",
+  imageSize: Q = "size-20",
+  subtotal: P,
+  subtotalLabel: X = "小計",
   // slot props
   leftSlot: E,
-  rightSlot: P,
-  bottomSlot: $,
-  className: X,
-  ...Y
+  rightSlot: $,
+  bottomSlot: I,
+  linkComponent: Y,
+  className: Z,
+  ..._
 }) {
-  const t = i === "small" || i === "xsm", c = i === "review", a = i === "cart", I = a ? K : i === "xsm" ? "size-10" : t ? "size-14" : "size-[102px]";
+  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]";
   return /* @__PURE__ */ s(
     "div",
     {
@@ -56,9 +57,9 @@ function te({
       className: r(
         "flex flex-col bg-[var(--Surface-Primary)]",
         i === "lp" && "flex-col rounded-xl bg-[var(--Surface-Secondary)] p-4",
-        X
+        Z
       ),
-      ...Y,
+      ..._,
       children: [
         /* @__PURE__ */ s("div", { className: r(
           "flex gap-2 px-4 py-2 min-w-0 overflow-hidden",
@@ -66,7 +67,7 @@ function te({
           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("a", { href: M ?? "#", className: "relative shrink-0", children: [
+          E ? /* @__PURE__ */ e("div", { className: "shrink-0", children: E }) : o && !a ? /* @__PURE__ */ s(T, { href: S ?? "#", className: "relative shrink-0", children: [
             /* @__PURE__ */ e(
               "img",
               {
@@ -74,7 +75,7 @@ function te({
                 alt: n,
                 className: r(
                   "rounded-lg object-cover",
-                  I,
+                  R,
                   i === "lp" && "aspect-video w-full size-auto rounded-lg"
                 )
               }
@@ -86,7 +87,7 @@ function te({
             {
               className: r(
                 "relative shrink-0 overflow-hidden rounded-lg bg-[var(--Surface-Secondary)]",
-                I
+                R
               ),
               children: [
                 /* @__PURE__ */ e(
@@ -106,7 +107,7 @@ function te({
             c ? "flex flex-col justify-between self-stretch" : a ? "flex flex-col gap-2" : "space-y-1"
           ), children: [
             (f || d) && !t && !c && (z ? /* @__PURE__ */ s(
-              "a",
+              T,
               {
                 href: z,
                 className: "block truncate typo-body-sm text-[var(--Text-Medium-Emphasis)] underline decoration-[var(--Text-Medium-Emphasis)] hover:text-[var(--Text-High-Emphasis)]",
@@ -120,9 +121,9 @@ function te({
               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",
+              T,
               {
-                href: M ?? "#",
+                href: S ?? "#",
                 className: r(
                   "block text-[var(--Text-High-Emphasis)]",
                   t ? "truncate typo-body-sm" : "line-clamp-2 typo-label-md"
@@ -134,29 +135,29 @@ function te({
               "#",
               l
             ] }, l)) }),
-            y && y.length > 0 && !t && !c && /* @__PURE__ */ e("div", { className: "flex flex-wrap gap-1", children: y.map((l, T) => /* @__PURE__ */ e(Z, { variant: l.variant, size: a ? "sm" : void 0, children: l.label }, T)) }),
-            a && B && /* @__PURE__ */ e("p", { className: "typo-body-sm text-[var(--Text-Low-Emphasis)]", children: B }),
+            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 && p !== void 0 && /* @__PURE__ */ s("div", { className: "flex items-center justify-between min-w-0 gap-2 overflow-hidden", children: [
-              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(
-                q,
+              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(
+                D,
                 {
                   price: p,
-                  originalPrice: J,
+                  originalPrice: K,
                   size: "sm",
                   showTaxLabel: !1
                 }
               ) })
             ] }),
             a && h && /* @__PURE__ */ e("p", { className: "typo-body-xs text-[var(--Text-Medium-Emphasis)]", children: h }),
-            a && (b !== void 0 || g || w) && /* @__PURE__ */ s("div", { className: "flex flex-wrap items-center justify-between gap-2", children: [
+            a && (b !== void 0 || N || 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: [
-                g && /* @__PURE__ */ e(
+                N && /* @__PURE__ */ e(
                   m,
                   {
                     variant: "tertiary",
                     size: "sm",
-                    onClick: g,
+                    onClick: N,
                     "aria-label": "削除",
                     children: "削除"
                   }
@@ -169,7 +170,7 @@ function te({
                     onClick: w,
                     "aria-label": "あとで買う",
                     children: [
-                      /* @__PURE__ */ e(F, { size: 16 }),
+                      /* @__PURE__ */ e(U, { size: 16 }),
                       "あとで買う"
                     ]
                   }
@@ -177,18 +178,18 @@ function te({
               ] }),
               /* @__PURE__ */ s("div", { className: "flex flex-wrap items-center justify-end gap-2", children: [
                 b !== void 0 && /* @__PURE__ */ e(
-                  _,
+                  F,
                   {
                     value: b,
-                    size: G,
-                    onChange: A
+                    size: J,
+                    onChange: G
                   }
                 ),
-                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 }),
+                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 }),
                   /* @__PURE__ */ s("span", { className: "typo-label-md text-[var(--Text-High-Emphasis)]", children: [
                     "¥",
-                    O.toLocaleString()
+                    P.toLocaleString()
                   ] })
                 ] })
               ] })
@@ -209,9 +210,9 @@ function te({
               ] })
             ] }),
             i === "order-history" && /* @__PURE__ */ s("div", { className: "space-y-0.5 typo-body-sm text-[var(--Text-Low-Emphasis)]", children: [
-              S && /* @__PURE__ */ s("p", { children: [
+              C && /* @__PURE__ */ s("p", { children: [
                 "お届け日:",
-                S
+                C
               ] }),
               H && /* @__PURE__ */ s("p", { children: [
                 "お届け先:",
@@ -225,17 +226,17 @@ function te({
                 ] })
               ] })
             ] }),
-            L && /* @__PURE__ */ e("div", { className: "space-y-0.5 typo-body-sm text-[var(--Text-Low-Emphasis)]", children: Object.entries(L).map(([l, T]) => /* @__PURE__ */ s("p", { children: [
+            B && /* @__PURE__ */ e("div", { className: "space-y-0.5 typo-body-sm text-[var(--Text-Low-Emphasis)]", children: Object.entries(B).map(([l, k]) => /* @__PURE__ */ s("p", { children: [
               l,
               "：",
-              /* @__PURE__ */ e("span", { className: "text-[var(--Text-Medium-Emphasis)]", children: T })
+              /* @__PURE__ */ e("span", { className: "text-[var(--Text-Medium-Emphasis)]", children: k })
             ] }, l)) })
           ] }),
-          P ? /* @__PURE__ */ e("div", { className: "shrink-0 self-start", children: P }) : W && !c && /* @__PURE__ */ e(
+          $ ? /* @__PURE__ */ e("div", { className: "shrink-0 self-start", children: $ }) : A && !c && /* @__PURE__ */ e(
             "button",
             {
               type: "button",
-              className: "flex size-9 shrink-0 items-center justify-center self-start rounded-full border border-[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-Secondary)] transition-colors hover:border-[var(--Border-High-Emphasis)] hover:bg-[var(--Surface-Tertiary)]",
               "aria-label": "ブックマーク",
               children: /* @__PURE__ */ e(
                 "svg",
@@ -252,15 +253,15 @@ function te({
             }
           )
         ] }),
-        $ ? /* @__PURE__ */ e("div", { className: "px-4 py-3", children: $ }) : (k || j || C) && /* @__PURE__ */ s("div", { className: "flex justify-end gap-3.5 px-4 py-3", children: [
-          j && /* @__PURE__ */ e(m, { variant: "tertiary", size: "sm", onClick: V, children: "商品詳細を見る" }),
-          C && /* @__PURE__ */ e(m, { variant: "secondary", size: "sm", children: "レビューを書く" }),
-          k && /* @__PURE__ */ e(m, { size: "sm", onClick: R, children: "カートに追加" })
+        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: "商品詳細を見る" }),
+          L && /* @__PURE__ */ e(m, { variant: "secondary", size: "sm", children: "レビューを書く" }),
+          j && /* @__PURE__ */ e(m, { size: "sm", onClick: V, children: "カートに追加" })
         ] })
       ]
     }
   );
 }
 export {
-  te as ProductListItem
+  de as ProductListItem
 };

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

@@ -1,13 +1,14 @@
 "use client";
 import { jsxs as l, jsx as e } from "react/jsx-runtime";
 import * as d from "react";
-import x from "iconsax-reactjs/dist/esm/ArrowDown2.js";
-import y from "iconsax-reactjs/dist/esm/Add.js";
-import g from "iconsax-reactjs/dist/esm/Minus.js";
+import y from "iconsax-reactjs/dist/esm/ArrowDown2.js";
+import g from "iconsax-reactjs/dist/esm/Add.js";
+import N from "iconsax-reactjs/dist/esm/Minus.js";
 import E from "iconsax-reactjs/dist/esm/ExportSquare.js";
-import { cn as N } from "../../lib/utils.js";
+import { cn as b } from "../../lib/utils.js";
+import { FOCUS_RING_ONLY as C, FORCED_COLORS_FOCUS as O } from "../../lib/focus-ring.js";
 import { Button as h } from "../foundations/button.js";
-import { Input as C } from "../foundations/input.js";
+import { Input as B } from "../foundations/input.js";
 import { Label as T } from "../foundations/label.js";
 function j({
   type: r,
@@ -17,22 +18,22 @@ function j({
   helpText: o,
   error: s,
   children: n,
-  className: b,
-  ...v
+  className: v,
+  ...f
 }) {
-  const c = d.useId(), p = o ? `${c}-help` : void 0, u = s ? `${c}-error` : void 0, f = [p, u].filter(Boolean).join(" ") || void 0;
+  const c = d.useId(), p = o ? `${c}-help` : void 0, u = s ? `${c}-error` : void 0, x = [p, u].filter(Boolean).join(" ") || void 0;
   return /* @__PURE__ */ l(
     "div",
     {
       "data-slot": "product-option",
       role: "group",
       "aria-labelledby": `${c}-label`,
-      className: N(
+      className: b(
         "space-y-2 rounded-lg border border-[var(--Border-Medium-Emphasis)] bg-[var(--Surface-Primary)] p-3",
         s && "border-[var(--Border-Caution)]",
-        b
+        v
       ),
-      ...v,
+      ...f,
       children: [
         /* @__PURE__ */ l("div", { className: "flex items-center gap-2", children: [
           /* @__PURE__ */ l(T, { id: `${c}-label`, className: "typo-label-md text-[var(--Text-High-Emphasis)]", children: [
@@ -43,7 +44,7 @@ function j({
           a && /* @__PURE__ */ e("span", { className: "typo-body-sm text-[var(--Text-Medium-Emphasis)]", children: a })
         ] }),
         d.Children.map(n, (m) => d.isValidElement(m) ? d.cloneElement(m, {
-          "aria-describedby": f,
+          "aria-describedby": x,
           "aria-invalid": s ? !0 : void 0
         }) : m),
         o && /* @__PURE__ */ e("p", { id: p, className: "typo-body-sm text-[var(--Text-Low-Emphasis)]", children: o }),
@@ -52,7 +53,7 @@ function j({
     }
   );
 }
-function $({
+function R({
   value: r,
   min: i = 0,
   max: t = 99,
@@ -68,7 +69,7 @@ function $({
         onClick: () => a?.(Math.max(i, r - 1)),
         disabled: r <= i,
         "aria-label": "減らす",
-        children: /* @__PURE__ */ e(g, { size: 16 })
+        children: /* @__PURE__ */ e(N, { size: 16 })
       }
     ),
     /* @__PURE__ */ e("span", { className: "w-8 shrink-0 text-center typo-label-md tabular-nums text-[var(--Text-High-Emphasis)]", "aria-live": "polite", children: r }),
@@ -80,12 +81,12 @@ function $({
         onClick: () => a?.(Math.min(t, r + 1)),
         disabled: r >= t,
         "aria-label": "増やす",
-        children: /* @__PURE__ */ e(y, { size: 16 })
+        children: /* @__PURE__ */ e(g, { size: 16 })
       }
     )
   ] });
 }
-function F({
+function _({
   value: r,
   options: i,
   onChange: t,
@@ -101,17 +102,20 @@ function F({
         value: r,
         onChange: (n) => t?.(n.target.value),
         "aria-label": a,
-        className: "w-full appearance-none rounded-md border border-[var(--Border-High-Emphasis)] bg-[var(--Surface-Primary)] px-3 py-2 pr-8 typo-body-md text-[var(--Text-High-Emphasis)] focus:border-[var(--Focus-High-Emphasis)] focus:outline-none focus:ring-[3px] focus:ring-[var(--Focus-High-Emphasis)]/50",
+        className: b(
+          "w-full appearance-none rounded-md border border-[var(--Border-High-Emphasis)] bg-[var(--Surface-Primary)] px-3 py-2 pr-8 typo-body-md text-[var(--Text-High-Emphasis)] focus:border-[var(--Focus-High-Emphasis)] focus:outline-none focus:ring-[3px] focus:ring-[var(--Focus-High-Emphasis)]/50",
+          O
+        ),
         children: [
           /* @__PURE__ */ e("option", { value: "", disabled: !0, children: a }),
           i.map((n) => /* @__PURE__ */ e("option", { value: n.value, children: n.label }, n.value))
         ]
       }
     ),
-    /* @__PURE__ */ e(x, { size: 16, className: "pointer-events-none absolute right-2 top-1/2 -translate-y-1/2 text-[var(--Text-Low-Emphasis)]" })
+    /* @__PURE__ */ e(y, { size: 16, className: "pointer-events-none absolute right-2 top-1/2 -translate-y-1/2 text-[var(--Text-Low-Emphasis)]" })
   ] });
 }
-function L({
+function P({
   value: r,
   onChange: i,
   placeholder: t = "プレイスホルダー",
@@ -121,7 +125,7 @@ function L({
   const s = d.useId();
   return /* @__PURE__ */ l("div", { className: "space-y-1", ...o, children: [
     /* @__PURE__ */ e(
-      C,
+      B,
       {
         id: s,
         value: r,
@@ -138,7 +142,7 @@ function L({
     ] })
   ] });
 }
-function P({
+function U({
   onUpload: r,
   ...i
 }) {
@@ -148,7 +152,7 @@ function P({
       type: "button",
       onClick: r,
       "aria-label": "画像をアップロード",
-      className: "flex h-24 w-full flex-col items-center justify-center gap-2 rounded-lg border-2 border-dashed border-[var(--Border-Medium-Emphasis)] bg-[var(--Surface-Secondary)] text-[var(--Text-Low-Emphasis)] transition-colors hover:border-[var(--Brand-Cake-Orange)] hover:text-[var(--Brand-Cake-Orange)] focus-visible:ring-[3px] focus-visible:ring-[var(--Focus-High-Emphasis)]/50 focus-visible:outline-none",
+      className: `flex h-24 w-full flex-col items-center justify-center gap-2 rounded-lg border-2 border-dashed border-[var(--Border-Control,var(--Border-Medium-Emphasis))] bg-[var(--Surface-Secondary)] text-[var(--Text-Low-Emphasis)] transition-colors hover:border-[var(--Brand-Cake-Orange)] hover:text-[var(--Brand-Cake-Orange)] ${C} focus-visible:outline-none`,
       ...i,
       children: [
         /* @__PURE__ */ e(E, { size: 24 }),
@@ -158,9 +162,9 @@ function P({
   );
 }
 export {
-  P as OptionImageUpload,
-  $ as OptionQuantity,
-  F as OptionSelect,
-  L as OptionText,
+  U as OptionImageUpload,
+  R as OptionQuantity,
+  _ as OptionSelect,
+  P as OptionText,
   j as ProductOption
 };

package/dist/components/ec/rating-stars.js

@@ -1,20 +1,20 @@
-import { jsxs as o, jsx as e } from "react/jsx-runtime";
+import { jsxs as o, jsx as l } from "react/jsx-runtime";
 import "react";
-import { cn as n } from "../../lib/utils.js";
-function g({
-  size: a = 14,
-  className: l
+import { cn as s } from "../../lib/utils.js";
+function u({
+  size: t = 14,
+  className: e
 }) {
-  return /* @__PURE__ */ e(
+  return /* @__PURE__ */ l(
     "svg",
     {
-      width: a,
-      height: a,
+      width: t,
+      height: t,
       viewBox: "0 0 16 16",
       fill: "currentColor",
-      className: l,
+      className: e,
       "aria-hidden": "true",
-      children: /* @__PURE__ */ e("path", { d: "M8 0C8.4 3.6 12.4 7.6 16 8C12.4 8.4 8.4 12.4 8 16C7.6 12.4 3.6 8.4 0 8C3.6 7.6 7.6 3.6 8 0Z" })
+      children: /* @__PURE__ */ l("path", { d: "M8 0C8.4 3.6 12.4 7.6 16 8C12.4 8.4 8.4 12.4 8 16C7.6 12.4 3.6 8.4 0 8C3.6 7.6 7.6 3.6 8 0Z" })
     }
   );
 }
@@ -24,44 +24,44 @@ const x = {
   lg: { iconSize: 18, valueCls: "typo-label-lg", countCls: "typo-body-md" }
 };
 function b({
-  className: a,
-  rating: l,
-  reviewCount: t,
-  size: i = "sm",
+  className: t,
+  rating: e,
+  reviewCount: a,
+  size: n = "sm",
   showCount: r = !0,
   showValue: c = !0,
   ...m
 }) {
-  const s = Math.max(0, Math.min(5, l)), { iconSize: d, valueCls: p, countCls: u } = x[i];
+  const i = Math.max(0, Math.min(5, e)), { iconSize: d, valueCls: p, countCls: h } = x[n];
   return /* @__PURE__ */ o(
     "div",
     {
       "data-slot": "rating-stars",
-      className: n("inline-flex items-center gap-0.5", a),
+      className: s("inline-flex items-center gap-0.5", t),
       role: "img",
-      "aria-label": `評価 ${s.toFixed(1)} / 5${t != null ? ` (${t}件)` : ""}`,
+      "aria-label": `評価 ${i.toFixed(1)} / 5${a != null ? ` (${a}件)` : ""}`,
       ...m,
       children: [
-        /* @__PURE__ */ e(
-          g,
+        /* @__PURE__ */ l(
+          u,
           {
             size: d,
-            className: "text-[var(--Brand-Cake-Orange)]"
+            className: "text-[var(--Text-High-Emphasis)]"
           }
         ),
-        c && /* @__PURE__ */ e(
+        c && /* @__PURE__ */ l(
           "span",
           {
-            className: n(
-              "text-[var(--Brand-Cake-Orange)]",
+            className: s(
+              "text-[var(--Text-High-Emphasis)]",
               p
             ),
-            children: s.toFixed(2)
+            children: i.toFixed(2)
           }
         ),
-        r && t != null && /* @__PURE__ */ o("span", { className: n("text-[var(--Text-Low-Emphasis)]", u), children: [
+        r && a != null && /* @__PURE__ */ o("span", { className: s("text-[var(--Text-Low-Emphasis)]", h), children: [
           "(",
-          t.toLocaleString("ja-JP"),
+          a.toLocaleString("ja-JP"),
           ")"
         ] })
       ]
@@ -70,5 +70,5 @@ function b({
 }
 export {
   b as RatingStars,
-  g as SparkleIcon
+  u as SparkleIcon
 };

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

@@ -1,57 +1,57 @@
 import { jsxs as a, jsx as e } from "react/jsx-runtime";
 import "react";
-import z from "iconsax-reactjs/dist/esm/Like1.js";
+import E from "iconsax-reactjs/dist/esm/Like1.js";
 import { cn as r } from "../../lib/utils.js";
-import { SparkleIcon as E } from "./rating-stars.js";
-function P({
-  className: f,
-  variant: m = "list",
-  bordered: v = !0,
-  rating: h,
+import { SparkleIcon as z } from "./rating-stars.js";
+function M({
+  className: h,
+  variant: d = "list",
+  bordered: f = !0,
+  rating: v,
   date: u,
   text: s,
-  imageUrl: d,
-  productName: l,
+  imageUrl: m,
+  productName: i,
   productImageUrl: o,
-  helpfulCount: i,
+  helpfulCount: l,
   isLiked: t = !1,
   onLikeClick: g,
-  onMoreClick: y,
-  maxLength: c = 80,
-  ...b
+  onMoreClick: b,
+  maxLength: n = 80,
+  ...y
 }) {
-  const n = m === "pc", p = m === "card", N = s.length > c ? s.slice(0, c) + "..." : s, w = s.length > c, T = n ? "size-64" : "size-20";
+  const c = d === "pc", p = d === "card", N = s.length > n ? s.slice(0, n) + "..." : s, w = s.length > n, T = c ? "size-64" : "size-20";
   return /* @__PURE__ */ a(
     "div",
     {
       "data-slot": "review-card",
       className: r(
         "flex flex-col rounded-lg bg-[var(--Surface-Primary)]",
-        v && "border border-[var(--Border-Medium-Emphasis)]",
-        n ? "w-full max-w-[680px] gap-4 p-6" : "min-w-[240px] w-full gap-2 p-4",
+        f && "border border-[var(--Border-Medium-Emphasis)]",
+        c ? "w-full max-w-[680px] gap-4 p-6" : "min-w-[240px] w-full gap-2 p-4",
         p && "items-center",
-        f
+        h
       ),
-      ...b,
+      ...y,
       children: [
-        p && l && /* @__PURE__ */ a("div", { className: "flex w-full items-center gap-1.5 rounded bg-[var(--Surface-Secondary)] p-2", children: [
+        p && i && /* @__PURE__ */ a("div", { className: "flex w-full items-center gap-1.5 rounded bg-[var(--Surface-Secondary)] p-2", children: [
           o && /* @__PURE__ */ e(
             "img",
             {
               src: o,
-              alt: l,
+              alt: i,
               className: "size-8 shrink-0 rounded object-cover"
             }
           ),
-          /* @__PURE__ */ e("span", { className: "typo-body-sm text-[var(--Text-High-Emphasis)]", children: l })
+          /* @__PURE__ */ e("span", { className: "typo-body-sm text-[var(--Text-High-Emphasis)]", children: i })
         ] }),
         /* @__PURE__ */ a("div", { className: "flex w-full items-center justify-between", children: [
           /* @__PURE__ */ e("div", { className: "flex items-start", children: Array.from({ length: 5 }).map((k, x) => /* @__PURE__ */ e(
-            E,
+            z,
             {
               size: 20,
               className: r(
-                x < h ? "text-[var(--Brand-Cake-Orange)]" : "text-[var(--Border-Low-Emphasis)]"
+                x < v ? "text-[var(--Brand-Cake-Orange)]" : "text-[var(--Border-Low-Emphasis)]"
               )
             },
             x
@@ -63,7 +63,7 @@ function P({
           {
             className: r(
               "flex w-full items-start",
-              n ? "gap-4" : "gap-2"
+              c ? "gap-4" : "gap-2"
             ),
             children: [
               /* @__PURE__ */ a("p", { className: "min-w-0 flex-1 typo-body-md text-[var(--Text-High-Emphasis)]", children: [
@@ -72,16 +72,16 @@ function P({
                   "button",
                   {
                     type: "button",
-                    className: "typo-label-md text-[var(--Text-Accent-Primary)]",
-                    onClick: y,
+                    className: "typo-label-md text-[var(--Text-Medium-Emphasis)] underline underline-offset-4 hover:text-[var(--Text-High-Emphasis)]",
+                    onClick: b,
                     children: "もっと見る"
                   }
                 )
               ] }),
-              d && /* @__PURE__ */ e("div", { className: r("shrink-0 overflow-hidden rounded-lg", T), children: /* @__PURE__ */ e(
+              m && /* @__PURE__ */ e("div", { className: r("shrink-0 overflow-hidden rounded-lg", T), children: /* @__PURE__ */ e(
                 "img",
                 {
-                  src: d,
+                  src: m,
                   alt: "レビュー画像",
                   className: "size-full object-cover"
                 }
@@ -89,7 +89,7 @@ function P({
             ]
           }
         ),
-        i != null && /* @__PURE__ */ a(
+        l != null && /* @__PURE__ */ a(
           "button",
           {
             type: "button",
@@ -97,7 +97,7 @@ function P({
             onClick: g,
             children: [
               /* @__PURE__ */ e(
-                z,
+                E,
                 {
                   size: 16,
                   className: r(
@@ -113,7 +113,7 @@ function P({
                     "typo-label-md",
                     t ? "text-[var(--Text-Accent-Primary)]" : "text-[var(--Text-Medium-Emphasis)]"
                   ),
-                  children: t ? i.toString() : `参考になった ${i}`
+                  children: t ? l.toString() : `参考になった ${l}`
                 }
               )
             ]
@@ -124,5 +124,5 @@ function P({
   );
 }
 export {
-  P as ReviewCard
+  M as ReviewCard
 };