@cakejp/design-system 0.16.0 → 0.17.0

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

@@ -0,0 +1,266 @@
+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({
+  name: n,
+  imageUrl: o,
+  price: p,
+  caption: h,
+  shopName: f,
+  shopHref: z,
+  brandName: d,
+  tags: y,
+  hashTags: u,
+  statusLabel: x,
+  variant: i = "default",
+  showCartButton: k = !1,
+  onAddToCart: R,
+  showDetailButton: j = !1,
+  onViewDetail: V,
+  showBookmark: W = !1,
+  href: M,
+  orderDate: S,
+  deliveryInfo: H,
+  totalPrice: v,
+  showReviewButton: C = !1,
+  optionInfo: L,
+  // cart variant props
+  quantity: b,
+  onQuantityChange: A,
+  quantitySize: G = "sm",
+  originalPrice: J,
+  priceLabel: N,
+  deliveryText: B,
+  onDelete: g,
+  onSaveForLater: w,
+  imageSize: K = "size-20",
+  subtotal: O,
+  subtotalLabel: Q = "小計",
+  // slot props
+  leftSlot: E,
+  rightSlot: P,
+  bottomSlot: $,
+  className: X,
+  ...Y
+}) {
+  const t = i === "small" || i === "xsm", c = i === "review", a = i === "cart", I = a ? K : i === "xsm" ? "size-10" : t ? "size-14" : "size-[102px]";
+  return /* @__PURE__ */ s(
+    "div",
+    {
+      "data-slot": "list-item",
+      className: r(
+        "flex flex-col bg-[var(--Surface-Primary)]",
+        i === "lp" && "flex-col rounded-xl bg-[var(--Surface-Secondary)] p-4",
+        X
+      ),
+      ...Y,
+      children: [
+        /* @__PURE__ */ s("div", { className: r(
+          "flex gap-2 px-4 py-2 min-w-0 overflow-hidden",
+          t && "gap-2 px-3 py-2",
+          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: [
+            /* @__PURE__ */ e(
+              "img",
+              {
+                src: o,
+                alt: n,
+                className: r(
+                  "rounded-lg object-cover",
+                  I,
+                  i === "lp" && "aspect-video w-full size-auto rounded-lg"
+                )
+              }
+            ),
+            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(
+            "div",
+            {
+              className: r(
+                "relative shrink-0 overflow-hidden rounded-lg bg-[var(--Surface-Secondary)]",
+                I
+              ),
+              children: [
+                /* @__PURE__ */ e(
+                  "img",
+                  {
+                    src: o,
+                    alt: n,
+                    className: "h-full w-full object-cover"
+                  }
+                ),
+                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 })
+              ]
+            }
+          ),
+          /* @__PURE__ */ s("div", { className: r(
+            "min-w-0 flex-1",
+            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",
+              {
+                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)]",
+                children: [
+                  f,
+                  d && ` / ${d}`
+                ]
+              }
+            ) : /* @__PURE__ */ s("p", { className: "truncate typo-body-sm text-[var(--Text-Medium-Emphasis)]", children: [
+              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",
+              {
+                href: M ?? "#",
+                className: r(
+                  "block text-[var(--Text-High-Emphasis)]",
+                  t ? "truncate typo-body-sm" : "line-clamp-2 typo-label-md"
+                ),
+                children: n
+              }
+            ),
+            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: [
+              "#",
+              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 }),
+            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,
+                {
+                  price: p,
+                  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 || 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: [
+                g && /* @__PURE__ */ e(
+                  m,
+                  {
+                    variant: "tertiary",
+                    size: "sm",
+                    onClick: g,
+                    "aria-label": "削除",
+                    children: "削除"
+                  }
+                ),
+                w && /* @__PURE__ */ s(
+                  m,
+                  {
+                    variant: "tertiary",
+                    size: "sm",
+                    onClick: w,
+                    "aria-label": "あとで買う",
+                    children: [
+                      /* @__PURE__ */ e(F, { size: 16 }),
+                      "あとで買う"
+                    ]
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ s("div", { className: "flex flex-wrap items-center justify-end gap-2", children: [
+                b !== void 0 && /* @__PURE__ */ e(
+                  _,
+                  {
+                    value: b,
+                    size: G,
+                    onChange: A
+                  }
+                ),
+                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: [
+                    "¥",
+                    O.toLocaleString()
+                  ] })
+                ] })
+              ] })
+            ] }),
+            p !== void 0 && !c && !a && /* @__PURE__ */ s("p", { className: r(
+              "text-[var(--Text-High-Emphasis)]",
+              t ? "typo-label-sm" : "typo-label-md"
+            ), children: [
+              "¥",
+              p.toLocaleString()
+            ] }),
+            h && !a && /* @__PURE__ */ e("p", { className: "typo-body-xs text-[var(--Text-Medium-Emphasis)]", children: h }),
+            c && v !== void 0 && /* @__PURE__ */ s("div", { className: "flex items-center justify-between", children: [
+              /* @__PURE__ */ e("span", { className: "typo-body-sm text-[var(--Text-Low-Emphasis)]", children: "合計" }),
+              /* @__PURE__ */ s("span", { className: "typo-label-md text-[var(--Text-High-Emphasis)]", children: [
+                "¥",
+                v.toLocaleString()
+              ] })
+            ] }),
+            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: [
+                "お届け日:",
+                S
+              ] }),
+              H && /* @__PURE__ */ s("p", { children: [
+                "お届け先:",
+                H
+              ] }),
+              v !== void 0 && /* @__PURE__ */ s("p", { children: [
+                "合計：",
+                /* @__PURE__ */ s("span", { className: "typo-label-sm text-[var(--Text-High-Emphasis)]", children: [
+                  "¥",
+                  v.toLocaleString()
+                ] })
+              ] })
+            ] }),
+            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: [
+              l,
+              "：",
+              /* @__PURE__ */ e("span", { className: "text-[var(--Text-Medium-Emphasis)]", children: T })
+            ] }, l)) })
+          ] }),
+          P ? /* @__PURE__ */ e("div", { className: "shrink-0 self-start", children: P }) : W && !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)]",
+              "aria-label": "ブックマーク",
+              children: /* @__PURE__ */ e(
+                "svg",
+                {
+                  xmlns: "http://www.w3.org/2000/svg",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: 2,
+                  className: "size-4 text-[var(--Object-High-Emphasis)]",
+                  children: /* @__PURE__ */ e("path", { d: "m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z" })
+                }
+              )
+            }
+          )
+        ] }),
+        $ ? /* @__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: "カートに追加" })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  te as ProductListItem
+};

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

@@ -0,0 +1,165 @@
+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 E from "iconsax-reactjs/dist/esm/ExportSquare.js";
+import { cn as N } from "../../lib/utils.js";
+import { Button as h } from "../foundations/button.js";
+import { Input as C } from "../foundations/input.js";
+import { Label as T } from "../foundations/label.js";
+function j({
+  type: r,
+  label: i,
+  required: t = !1,
+  price: a,
+  helpText: o,
+  error: s,
+  children: n,
+  className: b,
+  ...v
+}) {
+  const c = d.useId(), p = o ? `${c}-help` : void 0, u = s ? `${c}-error` : void 0, f = [p, u].filter(Boolean).join(" ") || void 0;
+  return /* @__PURE__ */ l(
+    "div",
+    {
+      "data-slot": "product-option",
+      role: "group",
+      "aria-labelledby": `${c}-label`,
+      className: N(
+        "space-y-2 rounded-lg border border-[var(--Border-Medium-Emphasis)] bg-[var(--Surface-Primary)] p-3",
+        s && "border-[var(--Border-Caution)]",
+        b
+      ),
+      ...v,
+      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: [
+            i,
+            t && /* @__PURE__ */ e("span", { className: "ml-1 text-[var(--Text-Caution)]", "aria-hidden": "true", children: "*" })
+          ] }),
+          t && /* @__PURE__ */ e("span", { className: "sr-only", children: "（必須）" }),
+          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-invalid": s ? !0 : void 0
+        }) : m),
+        o && /* @__PURE__ */ e("p", { id: p, className: "typo-body-sm text-[var(--Text-Low-Emphasis)]", children: o }),
+        s && /* @__PURE__ */ e("p", { id: u, className: "typo-body-sm text-[var(--Text-Caution)]", role: "alert", children: s })
+      ]
+    }
+  );
+}
+function $({
+  value: r,
+  min: i = 0,
+  max: t = 99,
+  onChange: a,
+  ...o
+}) {
+  return /* @__PURE__ */ l("div", { className: "flex items-center gap-2", role: "group", "aria-label": "数量選択", ...o, children: [
+    /* @__PURE__ */ e(
+      h,
+      {
+        variant: "tertiary",
+        size: "icon-sm",
+        onClick: () => a?.(Math.max(i, r - 1)),
+        disabled: r <= i,
+        "aria-label": "減らす",
+        children: /* @__PURE__ */ e(g, { 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 }),
+    /* @__PURE__ */ e(
+      h,
+      {
+        variant: "tertiary",
+        size: "icon-sm",
+        onClick: () => a?.(Math.min(t, r + 1)),
+        disabled: r >= t,
+        "aria-label": "増やす",
+        children: /* @__PURE__ */ e(y, { size: 16 })
+      }
+    )
+  ] });
+}
+function F({
+  value: r,
+  options: i,
+  onChange: t,
+  placeholder: a = "テキスト",
+  ...o
+}) {
+  const s = d.useId();
+  return /* @__PURE__ */ l("div", { className: "relative", ...o, children: [
+    /* @__PURE__ */ l(
+      "select",
+      {
+        id: s,
+        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",
+        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)]" })
+  ] });
+}
+function L({
+  value: r,
+  onChange: i,
+  placeholder: t = "プレイスホルダー",
+  maxLength: a,
+  ...o
+}) {
+  const s = d.useId();
+  return /* @__PURE__ */ l("div", { className: "space-y-1", ...o, children: [
+    /* @__PURE__ */ e(
+      C,
+      {
+        id: s,
+        value: r,
+        onChange: (n) => i?.(n.target.value),
+        placeholder: t,
+        maxLength: a,
+        "aria-label": t
+      }
+    ),
+    a && /* @__PURE__ */ l("p", { className: "text-right typo-body-sm text-[var(--Text-Low-Emphasis)]", "aria-live": "polite", children: [
+      r?.length ?? 0,
+      "/",
+      a
+    ] })
+  ] });
+}
+function P({
+  onUpload: r,
+  ...i
+}) {
+  return /* @__PURE__ */ l(
+    "button",
+    {
+      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",
+      ...i,
+      children: [
+        /* @__PURE__ */ e(E, { size: 24 }),
+        /* @__PURE__ */ e("span", { className: "typo-body-sm", children: "画像を選択" })
+      ]
+    }
+  );
+}
+export {
+  P as OptionImageUpload,
+  $ as OptionQuantity,
+  F as OptionSelect,
+  L as OptionText,
+  j as ProductOption
+};

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

@@ -0,0 +1,74 @@
+import { jsxs as o, jsx as e } from "react/jsx-runtime";
+import "react";
+import { cn as n } from "../../lib/utils.js";
+function g({
+  size: a = 14,
+  className: l
+}) {
+  return /* @__PURE__ */ e(
+    "svg",
+    {
+      width: a,
+      height: a,
+      viewBox: "0 0 16 16",
+      fill: "currentColor",
+      className: l,
+      "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" })
+    }
+  );
+}
+const x = {
+  sm: { iconSize: 12, valueCls: "typo-label-sm", countCls: "typo-body-xs" },
+  md: { iconSize: 14, valueCls: "typo-label-md", countCls: "typo-body-sm" },
+  lg: { iconSize: 18, valueCls: "typo-label-lg", countCls: "typo-body-md" }
+};
+function b({
+  className: a,
+  rating: l,
+  reviewCount: t,
+  size: i = "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];
+  return /* @__PURE__ */ o(
+    "div",
+    {
+      "data-slot": "rating-stars",
+      className: n("inline-flex items-center gap-0.5", a),
+      role: "img",
+      "aria-label": `評価 ${s.toFixed(1)} / 5${t != null ? ` (${t}件)` : ""}`,
+      ...m,
+      children: [
+        /* @__PURE__ */ e(
+          g,
+          {
+            size: d,
+            className: "text-[var(--Brand-Cake-Orange)]"
+          }
+        ),
+        c && /* @__PURE__ */ e(
+          "span",
+          {
+            className: n(
+              "text-[var(--Brand-Cake-Orange)]",
+              p
+            ),
+            children: s.toFixed(2)
+          }
+        ),
+        r && t != null && /* @__PURE__ */ o("span", { className: n("text-[var(--Text-Low-Emphasis)]", u), children: [
+          "(",
+          t.toLocaleString("ja-JP"),
+          ")"
+        ] })
+      ]
+    }
+  );
+}
+export {
+  b as RatingStars,
+  g as SparkleIcon
+};

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

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