@cakejp/design-system 0.17.1 → 0.20.0

package/dist/components/foundations/form.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx as m } from "react/jsx-runtime";
 import * as s from "react";
 import { Slot as f } from "radix-ui";
@@ -7,15 +8,15 @@ import { Label as x } from "./label.js";
 const y = u, c = s.createContext(
   {}
 ), S = ({
-  ...t
-}) => /* @__PURE__ */ m(c.Provider, { value: { name: t.name }, children: /* @__PURE__ */ m(F, { ...t }) }), d = () => {
-  const t = s.useContext(c), e = s.useContext(l), { getFieldState: o } = I(), r = p({ name: t.name }), n = o(t.name, r);
-  if (!t)
+  ...e
+}) => /* @__PURE__ */ m(c.Provider, { value: { name: e.name }, children: /* @__PURE__ */ m(F, { ...e }) }), d = () => {
+  const e = s.useContext(c), t = s.useContext(l), { getFieldState: o } = I(), r = p({ name: e.name }), n = o(e.name, r);
+  if (!e)
     throw new Error("useFormField should be used within <FormField>");
-  const { id: i } = e;
+  const { id: i } = t;
   return {
     id: i,
-    name: t.name,
+    name: e.name,
     formItemId: `${i}-form-item`,
     formDescriptionId: `${i}-form-item-description`,
     formMessageId: `${i}-form-item-message`,
@@ -24,20 +25,20 @@ const y = u, c = s.createContext(
 }, l = s.createContext(
   {}
 );
-function $({ className: t, ...e }) {
+function $({ className: e, ...t }) {
   const o = s.useId();
   return /* @__PURE__ */ m(l.Provider, { value: { id: o }, children: /* @__PURE__ */ m(
     "div",
     {
       "data-slot": "form-item",
-      className: a("grid gap-2", t),
-      ...e
+      className: a("grid gap-2", e),
+      ...t
     }
   ) });
 }
 function D({
-  className: t,
-  ...e
+  className: e,
+  ...t
 }) {
   const { error: o, formItemId: r } = d();
   return /* @__PURE__ */ m(
@@ -45,46 +46,46 @@ function D({
     {
       "data-slot": "form-label",
       "data-error": !!o,
-      className: a("data-[error=true]:text-destructive", t),
+      className: a("data-[error=true]:text-destructive", e),
       htmlFor: r,
-      ...e
+      ...t
     }
   );
 }
-function M({ ...t }) {
-  const { error: e, formItemId: o, formDescriptionId: r, formMessageId: n } = d();
+function M({ ...e }) {
+  const { error: t, formItemId: o, formDescriptionId: r, formMessageId: n } = d();
   return /* @__PURE__ */ m(
     f.Root,
     {
       "data-slot": "form-control",
       id: o,
-      "aria-describedby": e ? `${r} ${n}` : `${r}`,
-      "aria-invalid": !!e,
-      ...t
+      "aria-describedby": t ? `${r} ${n}` : `${r}`,
+      "aria-invalid": !!t,
+      ...e
     }
   );
 }
-function N({ className: t, ...e }) {
+function N({ className: e, ...t }) {
   const { formDescriptionId: o } = d();
   return /* @__PURE__ */ m(
     "p",
     {
       "data-slot": "form-description",
       id: o,
-      className: a("typo-body-sm text-muted-foreground", t),
-      ...e
+      className: a("typo-body-sm text-muted-foreground", e),
+      ...t
     }
   );
 }
-function w({ className: t, ...e }) {
-  const { error: o, formMessageId: r } = d(), n = o ? String(o?.message ?? "") : e.children;
+function w({ className: e, ...t }) {
+  const { error: o, formMessageId: r } = d(), n = o ? String(o?.message ?? "") : t.children;
   return n ? /* @__PURE__ */ m(
     "p",
     {
       "data-slot": "form-message",
       id: r,
-      className: a("typo-body-sm text-destructive", t),
-      ...e,
+      className: a("typo-body-sm text-destructive", e),
+      ...t,
       children: n
     }
   ) : null;

package/dist/components/foundations/pagination.js

@@ -1,120 +1,123 @@
 import { jsx as i, jsxs as e } from "react/jsx-runtime";
 import "react";
-import { MoreHorizontalIcon as l, ChevronRightIcon as c, ChevronLeftIcon as m } from "lucide-react";
+import { MoreHorizontalIcon as c, ChevronRightIcon as p, ChevronLeftIcon as u } from "lucide-react";
 import { cn as t } from "../../lib/utils.js";
-import { buttonVariants as p } from "./button.js";
-function x({ className: a, ...n }) {
+import { resolveLinkComponent as f } from "../../lib/link-component.js";
+import { buttonVariants as d } from "./button.js";
+function v({ className: n, ...a }) {
   return /* @__PURE__ */ i(
     "nav",
     {
       role: "navigation",
       "aria-label": "pagination",
       "data-slot": "pagination",
-      className: t("mx-auto flex w-full justify-center", a),
-      ...n
+      className: t("mx-auto flex w-full justify-center", n),
+      ...a
     }
   );
 }
-function N({
-  className: a,
-  ...n
+function b({
+  className: n,
+  ...a
 }) {
   return /* @__PURE__ */ i(
     "ul",
     {
       "data-slot": "pagination-content",
-      className: t("flex flex-row flex-wrap items-center justify-center gap-0.5 sm:gap-1", a),
-      ...n
+      className: t("flex flex-row flex-wrap items-center justify-center gap-0.5 sm:gap-1", n),
+      ...a
     }
   );
 }
-function P({ ...a }) {
-  return /* @__PURE__ */ i("li", { "data-slot": "pagination-item", ...a });
+function j({ ...n }) {
+  return /* @__PURE__ */ i("li", { "data-slot": "pagination-item", ...n });
 }
 function o({
-  className: a,
-  isActive: n,
+  className: n,
+  isActive: a,
   size: r = "icon",
-  ...s
+  linkComponent: s,
+  ...l
 }) {
+  const m = f(s);
   return /* @__PURE__ */ i(
-    "a",
+    m,
     {
-      "aria-current": n ? "page" : void 0,
+      "aria-current": a ? "page" : void 0,
       "data-slot": "pagination-link",
-      "data-active": n,
+      "data-active": a,
       className: t(
-        p({
-          variant: n ? "secondary" : "ghost",
+        d({
+          variant: a ? "secondary" : "ghost",
           size: r
         }),
         "min-h-9 min-w-9 sm:min-h-10 sm:min-w-10",
-        a
+        n
       ),
-      ...s
+      ...l
     }
   );
 }
-function b({
-  className: a,
-  ...n
+function w({
+  className: n,
+  ...a
 }) {
   return /* @__PURE__ */ e(
     o,
     {
       "aria-label": "前のページへ",
       size: "default",
-      className: t("gap-1 px-2.5 sm:pl-2.5", a),
-      ...n,
+      className: t("gap-1 px-2.5 sm:pl-2.5", n),
+      ...a,
       children: [
-        /* @__PURE__ */ i(m, {}),
+        /* @__PURE__ */ i(u, {}),
         /* @__PURE__ */ i("span", { className: "hidden sm:block", children: "前へ" })
       ]
     }
   );
 }
-function v({
-  className: a,
-  ...n
+function y({
+  className: n,
+  ...a
 }) {
   return /* @__PURE__ */ e(
     o,
     {
       "aria-label": "次のページへ",
       size: "default",
-      className: t("gap-1 px-2.5 sm:pr-2.5", a),
-      ...n,
+      className: t("gap-1 px-2.5 sm:pr-2.5", n),
+      ...a,
       children: [
         /* @__PURE__ */ i("span", { className: "hidden sm:block", children: "次へ" }),
-        /* @__PURE__ */ i(c, {})
+        /* @__PURE__ */ i(p, {})
       ]
     }
   );
 }
-function j({
-  className: a,
-  ...n
+function z({
+  className: n,
+  ...a
 }) {
   return /* @__PURE__ */ e(
     "span",
     {
       "aria-hidden": !0,
       "data-slot": "pagination-ellipsis",
-      className: t("flex size-10 shrink-0 items-center justify-center text-muted-foreground", a),
-      ...n,
+      className: t("flex size-10 shrink-0 items-center justify-center text-muted-foreground", n),
+      ...a,
       children: [
-        /* @__PURE__ */ i(l, { className: "size-4" }),
+        /* @__PURE__ */ i(c, { className: "size-4" }),
         /* @__PURE__ */ i("span", { className: "sr-only", children: "その他のページ" })
       ]
     }
   );
 }
 export {
-  x as Pagination,
-  N as PaginationContent,
-  j as PaginationEllipsis,
-  P as PaginationItem,
+  v as Pagination,
+  b as PaginationContent,
+  z as PaginationEllipsis,
+  j as PaginationItem,
   o as PaginationLink,
-  v as PaginationNext,
-  b as PaginationPrevious
+  y as PaginationNext,
+  w as PaginationPrevious
 };

package/dist/components/foundations/popover.js

@@ -1,18 +1,19 @@
+"use client";
 import { jsx as t } from "react/jsx-runtime";
 import "react";
 import { Popover as e } from "radix-ui";
 import { cn as d } from "../../lib/utils.js";
-function f({
+function l({
   ...o
 }) {
   return /* @__PURE__ */ t(e.Root, { "data-slot": "popover", ...o });
 }
-function l({
+function c({
   ...o
 }) {
   return /* @__PURE__ */ t(e.Trigger, { "data-slot": "popover-trigger", ...o });
 }
-function c({
+function f({
   className: o,
   align: r = "center",
   sideOffset: a = 4,
@@ -32,14 +33,14 @@ function c({
     }
   ) });
 }
-function v({
+function u({
   ...o
 }) {
   return /* @__PURE__ */ t(e.Anchor, { "data-slot": "popover-anchor", ...o });
 }
 export {
-  f as Popover,
-  v as PopoverAnchor,
-  c as PopoverContent,
-  l as PopoverTrigger
+  l as Popover,
+  u as PopoverAnchor,
+  f as PopoverContent,
+  c as PopoverTrigger
 };

package/dist/components/foundations/radio-group.js

@@ -1,9 +1,10 @@
+"use client";
 import { jsx as r, jsxs as s } from "react/jsx-runtime";
 import * as l from "react";
 import { RadioGroup as i } from "radix-ui";
 import { cn as e } from "../../lib/utils.js";
 import { FOCUS_RING as m } from "../../lib/focus-ring.js";
-import { chipVariants as p } from "./chip-variants.js";
+import { chipVariants as u } from "./chip-variants.js";
 const n = l.createContext("tile");
 function x({
   className: o,
@@ -38,7 +39,7 @@ function y({
       className: e(
         // Chip 本体と同一の chipVariants（CVA）を再利用。unselected=filled 意匠。
         // レイアウト・サイズ・角丸・typo・focus リングはここから供給され、Chip 意匠変更に自動追従する。
-        p({ variant: "filled", size: "md", shape: "pill" }),
+        u({ variant: "filled", size: "md", shape: "pill" }),
         "cursor-pointer outline-none",
         // checked = Chip の accent（selected）意匠。Chip accent と同一トークンを参照し、
         // 静止=薄オレンジ / hover=ベタ塗りオレンジ（Text-on-Inverse）まで一致させる。

package/dist/components/foundations/responsive-dialog.js

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

package/dist/components/foundations/separator.js

@@ -1,20 +1,21 @@
+"use client";
 import { jsx as i } from "react/jsx-runtime";
 import "react";
-import { Separator as n } from "radix-ui";
-import { cn as e } from "../../lib/utils.js";
-function d({
+import { Separator as e } from "radix-ui";
+import { cn as n } from "../../lib/utils.js";
+function c({
   className: t,
   orientation: o = "horizontal",
   decorative: r = !0,
   ...a
 }) {
   return /* @__PURE__ */ i(
-    n.Root,
+    e.Root,
     {
       "data-slot": "separator",
       decorative: r,
       orientation: o,
-      className: e(
+      className: n(
         "shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
         t
       ),
@@ -23,5 +24,5 @@ function d({
   );
 }
 export {
-  d as Separator
+  c as Separator
 };

package/dist/components/foundations/sheet.js

@@ -1,27 +1,27 @@
 import { jsx as e, jsxs as i } from "react/jsx-runtime";
 import "react";
-import { XIcon as u } from "lucide-react";
+import { XIcon as h } from "lucide-react";
 import { Dialog as a } from "radix-ui";
 import { cn as r } from "../../lib/utils.js";
-function x({ ...t }) {
+function y({ ...t }) {
   return /* @__PURE__ */ e(a.Root, { "data-slot": "sheet", ...t });
 }
-function b({
+function N({
   ...t
 }) {
   return /* @__PURE__ */ e(a.Trigger, { "data-slot": "sheet-trigger", ...t });
 }
-function y({
+function w({
   ...t
 }) {
   return /* @__PURE__ */ e(a.Close, { "data-slot": "sheet-close", ...t });
 }
-function c({
+function m({
   ...t
 }) {
   return /* @__PURE__ */ e(a.Portal, { "data-slot": "sheet-portal", ...t });
 }
-function f({
+function p({
   className: t,
   ...o
 }) {
@@ -37,34 +37,41 @@ function f({
     }
   );
 }
-function S({
+function D({
   className: t,
   children: o,
-  side: s = "right",
-  showCloseButton: l = !0,
-  ...d
+  side: n = "right",
+  showCloseButton: d = !0,
+  autoFocus: l = !0,
+  onOpenAutoFocus: u,
+  onCloseAutoFocus: c,
+  ...f
 }) {
-  return /* @__PURE__ */ i(c, { children: [
-    /* @__PURE__ */ e(f, {}),
+  return /* @__PURE__ */ i(m, { children: [
+    /* @__PURE__ */ e(p, {}),
     /* @__PURE__ */ i(
       a.Content,
       {
         "data-slot": "sheet-content",
-        onOpenAutoFocus: (n) => n.preventDefault(),
-        onCloseAutoFocus: (n) => n.preventDefault(),
+        onOpenAutoFocus: (s) => {
+          l || s.preventDefault(), u?.(s);
+        },
+        onCloseAutoFocus: (s) => {
+          l || s.preventDefault(), c?.(s);
+        },
         className: r(
-          "fixed z-[var(--Z-Modal)] flex flex-col gap-4 border-[var(--Border-Medium-Emphasis)] bg-background shadow-lg transition ease-in-out data-[state=closed]:animate-out data-[state=closed]:duration-[var(--Motion-Duration-Slow)] data-[state=open]:animate-in data-[state=open]:duration-[var(--Motion-Duration-Slower)]",
-          s === "right" && "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
-          s === "left" && "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
-          s === "top" && "inset-x-0 top-0 h-auto border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
-          s === "bottom" && "inset-x-0 bottom-0 h-auto border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+          "fixed z-[var(--Z-Modal)] flex flex-col gap-4 border-[var(--Border-Medium-Emphasis)] bg-[var(--Surface-Elevated)] shadow-lg transition ease-in-out data-[state=closed]:animate-out data-[state=closed]:duration-[var(--Motion-Duration-Slow)] data-[state=open]:animate-in data-[state=open]:duration-[var(--Motion-Duration-Slower)]",
+          n === "right" && "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
+          n === "left" && "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+          n === "top" && "inset-x-0 top-0 h-auto border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+          n === "bottom" && "inset-x-0 bottom-0 h-auto border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
           t
         ),
-        ...d,
+        ...f,
         children: [
           o,
-          l && /* @__PURE__ */ i(a.Close, { className: "absolute top-2 right-2 flex size-10 items-center justify-center rounded-full text-[var(--Text-Low-Emphasis)] transition-colors hover:bg-[var(--Surface-Tertiary)] hover:text-[var(--Text-High-Emphasis)] focus:ring-2 focus:ring-[var(--Focus-High-Emphasis)] focus:outline-hidden disabled:pointer-events-none", children: [
-            /* @__PURE__ */ e(u, { className: "size-5" }),
+          d && /* @__PURE__ */ i(a.Close, { className: "absolute top-2 right-2 flex size-10 items-center justify-center rounded-full text-[var(--Text-Low-Emphasis)] transition-colors hover:bg-[var(--Surface-Tertiary)] hover:text-[var(--Text-High-Emphasis)] focus:ring-2 focus:ring-[var(--Focus-High-Emphasis)] focus:outline-hidden disabled:pointer-events-none", children: [
+            /* @__PURE__ */ e(h, { className: "size-5" }),
             /* @__PURE__ */ e("span", { className: "sr-only", children: "閉じる" })
           ] })
         ]
@@ -72,7 +79,7 @@ function S({
     )
   ] });
 }
-function N({ className: t, ...o }) {
+function T({ className: t, ...o }) {
   return /* @__PURE__ */ e(
     "div",
     {
@@ -82,7 +89,7 @@ function N({ className: t, ...o }) {
     }
   );
 }
-function w({ className: t, ...o }) {
+function C({ className: t, ...o }) {
   return /* @__PURE__ */ e(
     "div",
     {
@@ -92,7 +99,7 @@ function w({ className: t, ...o }) {
     }
   );
 }
-function D({
+function E({
   className: t,
   ...o
 }) {
@@ -105,7 +112,7 @@ function D({
     }
   );
 }
-function T({
+function M({
   className: t,
   ...o
 }) {
@@ -119,12 +126,12 @@ function T({
   );
 }
 export {
-  x as Sheet,
-  y as SheetClose,
-  S as SheetContent,
-  T as SheetDescription,
-  w as SheetFooter,
-  N as SheetHeader,
-  D as SheetTitle,
-  b as SheetTrigger
+  y as Sheet,
+  w as SheetClose,
+  D as SheetContent,
+  M as SheetDescription,
+  C as SheetFooter,
+  T as SheetHeader,
+  E as SheetTitle,
+  N as SheetTrigger
 };

package/dist/components/foundations/slider.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs as y, jsx as s } from "react/jsx-runtime";
 import * as p from "react";
 import { Slider as i } from "radix-ui";
@@ -6,8 +7,8 @@ import { FOCUS_RING as w } from "../../lib/focus-ring.js";
 import { useFieldLabelling as k } from "../../lib/field-labelling.js";
 function O({
   className: b,
-  defaultValue: t,
-  value: e,
+  defaultValue: e,
+  value: t,
   min: l = 0,
   max: n = 100,
   thumbLabels: d,
@@ -16,8 +17,8 @@ function O({
   ...u
 }) {
   const h = k(), m = p.useMemo(
-    () => Array.isArray(e) ? e : Array.isArray(t) ? t : [l, n],
-    [e, t, l, n]
+    () => Array.isArray(t) ? t : Array.isArray(e) ? e : [l, n],
+    [t, e, l, n]
   ), v = (r, a) => {
     if (d?.[r]) return { "aria-label": d[r] };
     if (c) {
@@ -30,8 +31,8 @@ function O({
     i.Root,
     {
       "data-slot": "slider",
-      defaultValue: t,
-      value: e,
+      defaultValue: e,
+      value: t,
       min: l,
       max: n,
       className: o(

package/dist/components/foundations/social-icon.js

@@ -1,36 +1,56 @@
-import { jsxs as n, jsx as r } from "react/jsx-runtime";
+import { jsxs as h, jsx as r } from "react/jsx-runtime";
 import "react";
 import { cn as v } from "../../lib/utils.js";
-const s = {
+const d = {
   line: "var(--Third-Party-LINE)",
   x: "var(--Third-Party-X)",
   facebook: "var(--Third-Party-Facebook)",
   apple: "var(--Third-Party-Apple)"
-}, d = {
+}, s = {
   line: "M12 2C6.48 2 2 5.81 2 10.4c0 4.17 3.74 7.65 8.78 8.3.34.07.8.22.92.5.1.26.07.67.03.93l-.15.86c-.04.25-.2.98.87.54s5.8-3.41 7.91-5.84C22.14 13.65 22 11.14 22 10.4 22 5.81 17.52 2 12 2zm-3.18 11.1H6.57a.5.5 0 01-.5-.5V8.42a.5.5 0 01.5-.5.5.5 0 01.5.5v3.68h1.75a.5.5 0 01.5.5.5.5 0 01-.5.5zm1.67-.5a.5.5 0 01-.5.5.5.5 0 01-.5-.5V8.42a.5.5 0 01.5-.5.5.5 0 01.5.5v4.18zm4.63 0a.5.5 0 01-.4.49.5.5 0 01-.13.01.5.5 0 01-.4-.21l-2.39-3.24v2.95a.5.5 0 01-.5.5.5.5 0 01-.5-.5V8.42a.5.5 0 01.4-.49h.1a.5.5 0 01.4.21l2.39 3.24V8.42a.5.5 0 01.5-.5.5.5 0 01.5.5v4.18h-.47zm2.7-2.6a.5.5 0 01.5.5.5.5 0 01-.5.5h-1.75v1.1h1.75a.5.5 0 01.5.5.5.5 0 01-.5.5H16.1a.5.5 0 01-.5-.5V8.42a.5.5 0 01.5-.5h2.25a.5.5 0 01.5.5.5.5 0 01-.5.5h-1.75v1.08h1.75z",
   x: "M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z",
   facebook: "M22 12a10 10 0 1 0-11.56 9.88v-6.99H7.9V12h2.54V9.8c0-2.5 1.49-3.89 3.77-3.89 1.09 0 2.23.2 2.23.2v2.46h-1.26c-1.24 0-1.63.77-1.63 1.56V12h2.77l-.44 2.89h-2.33v6.99A10 10 0 0 0 22 12",
   apple: "M16.5 12.8c0-2.2 1.8-3.2 1.9-3.3-1-1.5-2.6-1.7-3.2-1.7-1.3-.1-2.6.8-3.3.8s-1.7-.8-2.8-.8c-1.5 0-2.8.8-3.6 2.2-1.5 2.6-.4 6.5 1.1 8.7.7 1 1.6 2.2 2.7 2.2s1.5-.7 2.8-.7 1.7.7 2.8.7c1.2 0 1.9-1.1 2.6-2.1.8-1.2 1.2-2.4 1.2-2.5 0 0-2.2-.9-2.2-3.5M14.3 6.4c.6-.7 1-1.7.9-2.8-.9 0-1.9.6-2.5 1.3-.6.6-1 1.7-.9 2.7 1 .1 1.9-.5 2.5-1.2"
 };
-function p({ platform: a, size: c = 24, tone: h = "brand", className: t, style: e, ...i }) {
-  const l = h === "mono", o = {
+function u({ platform: a, size: o = 24, tone: n = "brand", className: t, style: e, ...i }) {
+  const l = n === "mono", c = {
     viewBox: "0 0 24 24",
     "aria-hidden": !0,
     className: v("shrink-0", t),
-    style: { width: c, height: c, ...e },
+    style: { width: o, height: o, ...e },
     ...i
   };
-  return a === "google" ? /* @__PURE__ */ n("svg", { ...o, fill: "none", children: [
+  return a === "google" ? /* @__PURE__ */ h("svg", { ...c, fill: "none", children: [
     /* @__PURE__ */ r("path", { fill: l ? "currentColor" : "#4285F4", d: "M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z" }),
     /* @__PURE__ */ r("path", { fill: l ? "currentColor" : "#34A853", d: "M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" }),
     /* @__PURE__ */ r("path", { fill: l ? "currentColor" : "#FBBC05", d: "M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" }),
     /* @__PURE__ */ r("path", { fill: l ? "currentColor" : "#EA4335", d: "M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" })
-  ] }) : a === "amazon" ? /* @__PURE__ */ n("svg", { ...o, fill: "none", children: [
+  ] }) : a === "amazon" ? /* @__PURE__ */ h("svg", { ...c, fill: "none", children: [
     /* @__PURE__ */ r("path", { transform: "translate(-2.4 0) scale(1.2 1)", fill: "currentColor", d: "M13.958 10.09c0 1.232.029 2.256-.591 3.351-.502.891-1.301 1.438-2.186 1.438-1.214 0-1.922-.924-1.922-2.292 0-2.692 2.415-3.182 4.7-3.182v.685zm3.186 7.705a.66.66 0 0 1-.753.077c-1.06-.878-1.25-1.287-1.829-2.126-1.748 1.783-2.988 2.317-5.253 2.317-2.682 0-4.77-1.656-4.77-4.967 0-2.586 1.402-4.347 3.395-5.206 1.728-.762 4.14-.897 5.983-1.107v-.414c0-.762.058-1.664-.39-2.322-.387-.586-1.13-.83-1.788-.83-1.214 0-2.296.623-2.56 1.914-.054.293-.264.58-.553.595l-3.094-.333a.577.577 0 0 1-.481-.675C5.765 1.677 9.16.578 12.232.578c1.553 0 3.583.414 4.808 1.59 1.553 1.44 1.406 3.362 1.406 5.456v4.94c0 1.484.616 2.136 1.195 2.937.203.284.248.624-.01.835l-2.488 2.14v.32z" }),
     /* @__PURE__ */ r("path", { fill: l ? "currentColor" : "#FF9900", d: "M21.397 19.78c-2.768 2.04-6.783 3.13-10.238 3.13-4.84 0-9.198-1.79-12.496-4.764-.259-.234-.029-.553.283-.371 3.558 2.068 7.957 3.316 12.504 3.316 3.067 0 6.44-.636 9.543-1.952.467-.2.862.307.404.641z" }),
     /* @__PURE__ */ r("path", { fill: l ? "currentColor" : "#FF9900", d: "M22.338 18.549c-.363-.464-2.397-.22-3.31-.111-.279.033-.321-.207-.071-.381 1.622-1.14 4.282-.811 4.593-.429.312.387-.082 3.07-1.605 4.352-.234.196-.457.091-.354-.169.343-.855 1.11-2.8.747-3.262z" })
-  ] }) : /* @__PURE__ */ r("svg", { ...o, fill: l ? "currentColor" : s[a], children: /* @__PURE__ */ r("path", { d: d[a] }) });
+  ] }) : a === "hatena" ? /* @__PURE__ */ h("svg", { ...c, fill: "none", children: [
+    !l && /* @__PURE__ */ r(
+      "rect",
+      {
+        x: "1",
+        y: "1",
+        width: "22",
+        height: "22",
+        rx: "4",
+        fill: "var(--Third-Party-Hatena)"
+      }
+    ),
+    /* @__PURE__ */ r(
+      "path",
+      {
+        fillRule: "evenodd",
+        fill: l ? "currentColor" : "#FFFFFF",
+        d: "M6 6h4.4c2 0 3.2 1 3.2 2.7 0 1.1-.6 1.9-1.6 2.3 1.3.4 2.1 1.4 2.1 2.8 0 2-1.4 3.2-3.7 3.2H6V6Zm2.4 4.4h1.7c.85 0 1.3-.38 1.3-1.05s-.45-1.05-1.3-1.05H8.4v2.1Zm0 4.5h2c.95 0 1.45-.42 1.45-1.15s-.5-1.15-1.45-1.15h-2v2.3ZM16.2 6h2.4v6.6h-2.4V6Zm0 8.2h2.4V17h-2.4v-2.8Z"
+      }
+    )
+  ] }) : /* @__PURE__ */ r("svg", { ...c, fill: l ? "currentColor" : d[a], children: /* @__PURE__ */ r("path", { d: s[a] }) });
 }
 export {
-  p as SocialIcon
+  u as SocialIcon
 };