@geckou/ui-react 0.3.0 → 0.5.0

package/dist/components/DateSelector.js

@@ -1,39 +1,43 @@
 "use client";
-import { jsxs as l, jsx as o } from "react/jsx-runtime";
-import { useState as C, useEffect as F } from "react";
-import { splitDate as T, COLOR as I, daysInMonth as $ } from "@geckou/ui-core";
-import { InputBox as z } from "./InputBox.js";
-import { KeyboardArrowDownIcon as f } from "./icons/KeyboardArrowDownIcon.js";
-import { useRegisterValidation as H } from "../hooks/useFormValidation.js";
-const b = { year: "", month: "", day: "" };
-function J({
+import { jsxs as o, jsx as r } from "react/jsx-runtime";
+import { useState as H, useEffect as K, useId as L } from "react";
+import { splitDate as V, COLOR as O, daysInMonth as q } from "@geckou/ui-core";
+import { InputBox as G } from "./InputBox.js";
+import { KeyboardArrowDownIcon as g } from "./icons/KeyboardArrowDownIcon.js";
+import { useRegisterValidation as J } from "../hooks/useFormValidation.js";
+const S = { year: "", month: "", day: "" };
+function ee({
   name: n,
   value: m,
   onChange: s,
   isRequired: c,
-  formValidationStore: Y,
-  type: i = "date"
+  formValidationStore: k,
+  type: d = "date",
+  minYear: B,
+  maxYear: E,
+  ariaLabel: T,
+  ariaLabelledBy: u
 }) {
-  const [r, d] = C(b), g = !!(r.year && r.month && (i === "month" || r.day)), A = !r.year && !r.month && !r.day;
-  H(
-    Y,
+  const [l, p] = H(S), $ = !!(l.year && l.month && (d === "month" || l.day)), Y = !l.year && !l.month && !l.day;
+  J(
+    k,
     n,
-    c ? g : g || A
-  ), F(() => {
-    d(m ? T(m) : b);
+    c ? $ : $ || Y
+  ), K(() => {
+    p(m ? V(m) : S);
   }, [m]);
-  const N = /* @__PURE__ */ new Date(), S = N.getFullYear() - 100, O = N.getFullYear() - 14, k = Array.from(
-    { length: O - S + 1 },
-    (e, a) => (S + a).toString()
-  ).map((e) => ({ label: e, value: e })), E = Array.from({ length: 12 }, (e, a) => {
+  const w = (/* @__PURE__ */ new Date()).getFullYear(), D = B ?? w - 100, _ = E ?? w - 14, j = Array.from(
+    { length: Math.max(_ - D + 1, 0) },
+    (e, a) => (D + a).toString()
+  ).map((e) => ({ label: e, value: e })), C = Array.from({ length: 12 }, (e, a) => {
     const t = (a + 1).toString();
     return { label: t, value: t.padStart(2, "0") };
-  }), w = (e, a) => $(Number(e) || 2e3, Number(a)), M = w(r.year, r.month), _ = Array.from({ length: M }, (e, a) => {
+  }), I = (e, a) => q(Number(e) || 2e3, Number(a)), F = I(l.year, l.month), P = Array.from({ length: F }, (e, a) => {
     const t = (a + 1).toString();
     return { label: t, value: t.padStart(2, "0") };
-  }), D = (e) => {
-    d(e);
-    const a = i === "month" ? [e.year, e.month] : [e.year, e.month, e.day];
+  }), x = (e) => {
+    p(e);
+    const a = d === "month" ? [e.year, e.month] : [e.year, e.month, e.day];
     if (!e.year && !e.month && !e.day)
       s == null || s("");
     else {
@@ -41,89 +45,97 @@ function J({
         return;
       s == null || s(a.join("-"));
     }
-  }, u = (e, a) => {
-    const t = { ...r, [e]: a };
+  }, h = (e, a) => {
+    const t = { ...l, [e]: a };
     if (e !== "day" && t.day && t.month) {
-      const B = w(t.year, t.month);
-      Number(t.day) > B && (t.day = String(B).padStart(2, "0"));
+      const M = I(t.year, t.month);
+      Number(t.day) > M && (t.day = String(M).padStart(2, "0"));
     }
-    D(t);
-  }, p = (e) => {
+    x(t);
+  }, y = (e) => {
     const t = e.currentTarget.firstElementChild;
     t && t.click();
-  }, v = "relative w-max [&:has(select:focus)>svg]:rotate-180", y = "pointer-events-none absolute inset-y-0 right-[var(--sp-small,0.375rem)] m-auto size-[var(--icon-medium,1.125rem)] fill-(--icon-color)", x = "w-[calc(3ch+var(--sp-medium,0.75rem)*2+var(--icon-medium,1.125rem))]! p-[var(--sp-medium,0.75rem)]! pe-[calc(var(--sp-small,0.375rem)*2+var(--icon-medium,1.125rem))]! cursor-pointer", h = { "--icon-color": I.blue }, j = { "--caution-color": I.red };
-  return /* @__PURE__ */ l(z, { className: "flex w-max items-center [&>*:not(:last-of-type)]:after:content-['/']", children: [
-    /* @__PURE__ */ l("div", { className: v, style: h, onClick: p, children: [
-      /* @__PURE__ */ l(
+  }, i = L(), v = (e) => u ? { "aria-labelledby": `${u} ${i}-${e}` } : { "aria-label": `${T ?? n}の${e}` }, f = "relative w-max [&:has(select:focus)>svg]:rotate-180", b = "pointer-events-none absolute inset-y-0 right-[var(--sp-small,0.375rem)] m-auto size-[var(--icon-medium,1.125rem)] fill-(--icon-color)", A = "w-[calc(3ch+var(--sp-medium,0.75rem)*2+var(--icon-medium,1.125rem))]! p-[var(--sp-medium,0.75rem)]! pe-[calc(var(--sp-small,0.375rem)*2+var(--icon-medium,1.125rem))]! cursor-pointer", N = { "--icon-color": O.blue }, z = { "--caution-color": O.red };
+  return /* @__PURE__ */ o(G, { className: "flex w-max items-center [&>*:not(:last-of-type)]:after:content-['/']", children: [
+    /* @__PURE__ */ o("div", { className: f, style: N, onClick: y, children: [
+      /* @__PURE__ */ o(
         "select",
         {
-          value: r.year,
+          value: l.year,
           name: `${n}-year`,
+          ...v("年"),
           required: c,
-          onChange: (e) => u("year", e.target.value),
+          onChange: (e) => h("year", e.target.value),
           className: "w-[calc(5ch+var(--sp-medium,0.75rem)*2+var(--icon-medium,1.125rem))]! cursor-pointer p-[var(--sp-medium,0.75rem)]! pe-[calc(var(--sp-small,0.375rem)*2+var(--icon-medium,1.125rem))]!",
           children: [
-            /* @__PURE__ */ o("option", { disabled: !0, value: "", children: "年" }),
-            k.map((e) => /* @__PURE__ */ o("option", { value: e.value, children: e.label }, e.value))
+            /* @__PURE__ */ r("option", { disabled: !0, value: "", children: "年" }),
+            j.map((e) => /* @__PURE__ */ r("option", { value: e.value, children: e.label }, e.value))
           ]
         }
       ),
-      /* @__PURE__ */ o(f, { className: y })
+      /* @__PURE__ */ r(g, { className: b })
     ] }),
-    /* @__PURE__ */ l("div", { className: v, style: h, onClick: p, children: [
-      /* @__PURE__ */ l(
+    /* @__PURE__ */ o("div", { className: f, style: N, onClick: y, children: [
+      /* @__PURE__ */ o(
         "select",
         {
-          value: r.month,
+          value: l.month,
           name: `${n}-month`,
+          ...v("月"),
           required: c,
-          onChange: (e) => u("month", e.target.value),
-          className: x,
+          onChange: (e) => h("month", e.target.value),
+          className: A,
           children: [
-            /* @__PURE__ */ o("option", { disabled: !0, value: "", children: "月" }),
-            E.map((e) => /* @__PURE__ */ o("option", { value: e.value, children: e.label }, e.value))
+            /* @__PURE__ */ r("option", { disabled: !0, value: "", children: "月" }),
+            C.map((e) => /* @__PURE__ */ r("option", { value: e.value, children: e.label }, e.value))
           ]
         }
       ),
-      /* @__PURE__ */ o(f, { className: y })
+      /* @__PURE__ */ r(g, { className: b })
     ] }),
-    i === "date" && /* @__PURE__ */ l(
+    d === "date" && /* @__PURE__ */ o(
       "div",
       {
-        className: v,
-        style: h,
-        onClick: p,
+        className: f,
+        style: N,
+        onClick: y,
         children: [
-          /* @__PURE__ */ l(
+          /* @__PURE__ */ o(
             "select",
             {
-              value: r.day,
+              value: l.day,
               name: `${n}-day`,
+              ...v("日"),
               required: c,
-              onChange: (e) => u("day", e.target.value),
-              className: x,
+              onChange: (e) => h("day", e.target.value),
+              className: A,
               children: [
-                /* @__PURE__ */ o("option", { disabled: !0, value: "", children: "日" }),
-                _.map((e) => /* @__PURE__ */ o("option", { value: e.value, children: e.label }, e.value))
+                /* @__PURE__ */ r("option", { disabled: !0, value: "", children: "日" }),
+                P.map((e) => /* @__PURE__ */ r("option", { value: e.value, children: e.label }, e.value))
               ]
             }
           ),
-          /* @__PURE__ */ o(f, { className: y })
+          /* @__PURE__ */ r(g, { className: b })
         ]
       }
     ),
-    /* @__PURE__ */ o(
+    u && /* @__PURE__ */ o("span", { className: "sr-only", children: [
+      /* @__PURE__ */ r("span", { id: `${i}-年`, children: "の年" }),
+      /* @__PURE__ */ r("span", { id: `${i}-月`, children: "の月" }),
+      /* @__PURE__ */ r("span", { id: `${i}-日`, children: "の日" })
+    ] }),
+    /* @__PURE__ */ r(
       "button",
       {
         type: "button",
-        style: j,
+        style: z,
         className: "mx-[var(--sp-medium,0.75rem)] inline-flex cursor-pointer items-center gap-[var(--sp-min,0.1875rem)] text-[length:var(--fs-small,0.6875rem)] text-(--caution-color)",
-        onClick: () => D(b),
+        onClick: () => x(S),
         children: "削除"
       }
     )
   ] });
 }
 export {
-  J as DateSelector
+  ee as DateSelector
 };

package/dist/components/ErrorMessage.js

@@ -1,21 +1,22 @@
 import { jsx as n } from "react/jsx-runtime";
 import { COLOR as t } from "@geckou/ui-core";
-function a({ errorMessages: r, cssStyle: o }) {
-  if (!r || !r.length)
+function f({ errorMessages: o, cssStyle: r }) {
+  if (!o || !o.length)
     return null;
   const b = {
-    "--error-text-color": (o == null ? void 0 : o.textColor) || t.white,
-    "--error-background-color": (o == null ? void 0 : o.backgroundColor) || t.red
+    "--error-text-color": (r == null ? void 0 : r.textColor) || t.white,
+    "--error-background-color": (r == null ? void 0 : r.backgroundColor) || t.red
   };
   return /* @__PURE__ */ n(
     "div",
     {
+      role: "alert",
       className: "absolute top-[calc(100%+0.25rem)] flex w-max flex-col gap-2 rounded-sm bg-(--error-background-color) px-3 py-2 text-sm leading-none text-(--error-text-color) shadow-[0_0_0.5rem_0.25rem_#33333322] before:absolute before:bottom-[calc(100%-1px)] before:left-[0.85rem] before:block before:h-[0.53rem] before:w-[0.85rem] before:bg-(--error-background-color) before:content-[''] before:[clip-path:polygon(50%_0%,100%_100%,0%_100%)]",
       style: b,
-      children: r.map((e) => /* @__PURE__ */ n("span", { children: e }, e))
+      children: o.map((e) => /* @__PURE__ */ n("span", { children: e }, e))
     }
   );
 }
 export {
-  a as ErrorMessage
+  f as ErrorMessage
 };

package/dist/components/InputBox.js

@@ -1,72 +1,68 @@
 "use client";
-import { jsx as C } from "react/jsx-runtime";
-import { useRef as a, useState as L, useCallback as E, useEffect as v } from "react";
-import { INPUT_BOX_DEFAULT_STYLES as k } from "@geckou/ui-core";
+import { jsx as y } from "react/jsx-runtime";
+import { useRef as u, useState as C, useCallback as L, useEffect as v } from "react";
+import { INPUT_BOX_DEFAULT_STYLES as E } from "@geckou/ui-core";
 function $({
   cssStyle: m,
-  isErrored: u,
-  isDisabled: n,
+  isErrored: l,
+  isDisabled: s,
   className: _,
-  children: w
+  children: S
 }) {
-  var b, p, h;
-  const l = a(null), [S, t] = L("default"), c = a(u);
-  c.current = u;
-  const r = E(() => {
-    var s;
-    const e = (s = l.current) == null ? void 0 : s.querySelector("input, textarea, select");
-    if (!e)
+  var p, x, h;
+  const c = u(null), [g, t] = C("default"), i = u(l);
+  i.current = l;
+  const r = L(() => {
+    var a;
+    const e = Array.from(
+      ((a = c.current) == null ? void 0 : a.querySelectorAll("input, textarea, select")) ?? []
+    );
+    if (e.length === 0)
       return t("default");
-    if (e.matches(":disabled"))
+    if (e.every((n) => n.matches(":disabled")))
       return t("disabled");
-    if (e.matches(":focus"))
+    if (e.some((n) => n.matches(":focus")))
       return t("focus");
-    if (e.tagName.toLowerCase() === "select") {
-      const x = e;
-      return t(
-        x.required && !x.value ? "error" : "valid"
-      );
-    }
-    if (c.current || e.matches(":invalid"))
+    if (i.current || e.some((n) => n.matches(":invalid")))
       return t("error");
-    if (e.matches(":valid") && e.matches(":not(:placeholder-shown)") && e.matches(":not(:invalid)"))
+    if (e.every((n) => n.value !== ""))
       return t("valid");
     t("default");
   }, []);
   v(() => {
-    const e = l.current;
+    const e = c.current;
     if (!e)
       return;
-    const s = new MutationObserver(r);
-    return s.observe(e, { childList: !0, subtree: !0 }), e.addEventListener("focusin", r, !0), e.addEventListener("blur", r, !0), () => {
-      s.disconnect(), e.removeEventListener("focusin", r, !0), e.removeEventListener("blur", r, !0);
+    const a = new MutationObserver(r);
+    return a.observe(e, { childList: !0, subtree: !0 }), e.addEventListener("focusin", r, !0), e.addEventListener("blur", r, !0), () => {
+      a.disconnect(), e.removeEventListener("focusin", r, !0), e.removeEventListener("blur", r, !0);
     };
   }, [r]);
-  const i = a(!0), d = a(n);
+  const d = u(!0), f = u(s);
   v(() => {
-    const e = d.current !== n;
-    if (d.current = n, i.current) {
-      i.current = !1, n && t("disabled");
+    const e = f.current !== s;
+    if (f.current = s, d.current) {
+      d.current = !1, s && t("disabled");
       return;
     }
     if (e)
-      return t(n ? "disabled" : "default");
+      return t(s ? "disabled" : "default");
     r();
-  }, [n, u, r]);
-  const f = { ...k, ...m }, o = f[S] ?? f.default, g = {
+  }, [s, l, r]);
+  const b = { ...E, ...m }, o = b[g] ?? b.default, w = {
     "--text-color": o.textColor,
     "--placeholder-color": o.placeholderColor,
     "--background-color": o.backgroundColor,
-    "--radius-size": ((b = o.border) == null ? void 0 : b.radius) || ".25rem",
-    "--input-box-shadow": `0 0 0 ${((p = o.border) == null ? void 0 : p.size) || "1px"} ${(h = o.border) == null ? void 0 : h.color} inset, ${o.boxShadow || "0 0 0 0 rgba(0, 0, 0, 0)"}`
+    "--radius-size": ((p = o.border) == null ? void 0 : p.radius) || ".25rem",
+    "--input-box-shadow": `0 0 0 ${((x = o.border) == null ? void 0 : x.size) || "1px"} ${(h = o.border) == null ? void 0 : h.color} inset, ${o.boxShadow || "0 0 0 0 rgba(0, 0, 0, 0)"}`
   };
-  return /* @__PURE__ */ C(
+  return /* @__PURE__ */ y(
     "div",
     {
-      ref: l,
+      ref: c,
       className: `relative inline-flex max-w-full rounded-(--radius-size) bg-(--background-color) text-(--text-color) shadow-(--input-box-shadow) has-[:disabled]:pointer-events-none has-[:disabled]:before:pointer-events-auto has-[:disabled]:before:absolute has-[:disabled]:before:inset-0 has-[:disabled]:before:cursor-not-allowed has-[:disabled]:before:content-[''] [&_*::placeholder]:font-normal [&_*::placeholder]:text-(--placeholder-color) [&_*:focus]:outline-none [&_:is(input,textarea,select)]:w-full [&_:is(input,textarea,select)]:appearance-none [&_:is(input,textarea,select)]:border-none [&_:is(input,textarea,select)]:bg-transparent [&_:is(input,textarea,select)]:p-4 [&_:is(input,textarea,select)]:outline-none ${_ || ""}`,
-      style: g,
-      children: w
+      style: w,
+      children: S
     }
   );
 }

package/dist/components/LabeledCheckbox.js

@@ -1,46 +1,49 @@
 "use client";
-import { jsxs as m, jsx as n } from "react/jsx-runtime";
-import { CheckBox as h } from "./CheckBox.js";
+import { jsxs as b, jsx as t } from "react/jsx-runtime";
+import { useId as h } from "react";
+import { CheckBox as p } from "./CheckBox.js";
 import { COLOR as r } from "@geckou/ui-core";
-function f({
-  name: c,
-  label: l,
-  checked: d,
-  onChange: u,
+function L({
+  name: l,
+  label: d,
+  checked: i,
+  onChange: m,
   isDisabled: e,
   cssStyle: o,
-  isDisableAnimation: x
+  isDisableAnimation: u
 }) {
-  const t = d ?? !1, i = e ? o == null ? void 0 : o.disabled : o == null ? void 0 : o.default, a = {
+  const a = i ?? !1, n = h(), x = e ? o == null ? void 0 : o.disabled : o == null ? void 0 : o.default, c = {
     textColor: e ? r.darkGray : r.black,
     backgroundColor: e ? r.darkGray : r.blue,
-    ...i ?? {}
+    ...x ?? {}
   }, k = {
-    "--text-color": a.textColor,
-    "--checked-color": a.backgroundColor
+    "--text-color": c.textColor,
+    "--checked-color": c.backgroundColor
   };
-  return /* @__PURE__ */ m("label", { className: "inline-flex cursor-pointer items-center gap-[.5em] has-[input:disabled]:cursor-auto", children: [
-    /* @__PURE__ */ n("span", { className: "pointer-events-none", children: /* @__PURE__ */ n(
-      h,
+  return /* @__PURE__ */ b("label", { className: "inline-flex cursor-pointer items-center gap-[.5em] has-[button:disabled]:cursor-auto", children: [
+    /* @__PURE__ */ t("span", { className: "pointer-events-none", children: /* @__PURE__ */ t(
+      p,
       {
-        name: c,
-        checked: t,
-        onChange: u,
+        name: l,
+        checked: a,
+        onChange: m,
         isDisabled: e,
         cssStyle: o,
-        isDisableAnimation: x
+        isDisableAnimation: u,
+        ariaLabelledBy: n
       }
     ) }),
-    /* @__PURE__ */ n(
+    /* @__PURE__ */ t(
       "span",
       {
+        id: n,
         style: k,
-        className: t ? "text-(--text-color)" : "text-(--checked-color)",
-        children: l
+        className: a ? "text-(--text-color)" : "text-(--checked-color)",
+        children: d
       }
     )
   ] });
 }
 export {
-  f as LabeledCheckbox
+  L as LabeledCheckbox
 };

package/dist/components/ModalBox.js

@@ -1,75 +1,94 @@
 "use client";
-import { jsx as e, jsxs as c } from "react/jsx-runtime";
-import { useId as p, useRef as f, useEffect as d } from "react";
-const v = {
+import { jsx as t, jsxs as x } from "react/jsx-runtime";
+import { useId as b, useRef as n, useEffect as d } from "react";
+import { createScrollLock as g, handleTabKey as w } from "@geckou/ui-core";
+const h = {
   small: "max-w-[var(--mobile-lower-width,430px)]",
   medium: "max-w-[var(--desktop-lower-width,1025px)]",
   large: "max-w-[var(--contents-max-width,1440px)]"
 };
-function x() {
-  return /* @__PURE__ */ e(
+function y() {
+  return /* @__PURE__ */ t(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 -960 960 960",
       fill: "currentColor",
-      children: /* @__PURE__ */ e("path", { d: "m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z" })
+      children: /* @__PURE__ */ t("path", { d: "m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z" })
     }
   );
 }
-function w({
+function I({
   isShown: r,
   size: s = "medium",
-  onClose: t,
-  header: l,
-  footer: o,
-  children: u,
-  ariaLabel: n
+  onClose: o,
+  header: m,
+  footer: u,
+  children: p,
+  ariaLabel: f
 }) {
-  const i = p(), m = f(null);
-  return d(() => (r ? document.body.style.overflow = "hidden" : document.body.style.overflow = "", () => {
-    document.body.style.overflow = "";
-  }), [r]), d(() => {
-    var a;
-    r && ((a = m.current) == null || a.focus());
-  }, [r]), /* @__PURE__ */ e(
+  const c = b(), i = n(null), v = n(g());
+  d(() => {
+    const e = v.current;
+    return e.toggle(r), () => e.release();
+  }, [r]);
+  const a = n(null);
+  return d(() => {
+    var e, l;
+    if (r) {
+      a.current ?? (a.current = document.activeElement), (e = i.current) == null || e.focus();
+      return;
+    }
+    (l = a.current) == null || l.focus(), a.current = null;
+  }, [r]), d(() => {
+    if (!r)
+      return;
+    const e = (l) => {
+      if (l.key === "Escape") {
+        o();
+        return;
+      }
+      w(i.current, l, document.activeElement);
+    };
+    return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
+  }, [r, o]), /* @__PURE__ */ t(
     "div",
     {
       className: `fixed top-0 left-0 z-50 flex h-dvh w-dvw cursor-pointer items-center justify-center overflow-hidden bg-[#33333380] p-[var(--sp-larger,3rem)] backdrop-blur-sm transition-opacity duration-100 max-md:px-[var(--sp-large,1.5rem)] ${r ? "pointer-events-auto opacity-100" : "pointer-events-none opacity-0"}`,
       "aria-hidden": !r,
       inert: !r,
-      onClick: (a) => {
-        a.target === a.currentTarget && t();
+      onClick: (e) => {
+        e.target === e.currentTarget && o();
       },
-      children: /* @__PURE__ */ c(
+      children: /* @__PURE__ */ x(
         "div",
         {
-          ref: m,
+          ref: i,
           role: "dialog",
           "aria-modal": "true",
-          "aria-labelledby": l ? i : void 0,
-          "aria-label": l ? void 0 : n ?? "ダイアログ",
+          "aria-labelledby": m ? c : void 0,
+          "aria-label": m ? void 0 : f ?? "ダイアログ",
           tabIndex: -1,
-          className: `relative flex max-h-full w-full cursor-auto flex-col rounded-[var(--radius-small,0.1875rem)] bg-white drop-shadow-[0_0_6px_#33333355] ${v[s]}`,
+          className: `relative flex max-h-full w-full cursor-auto flex-col rounded-[var(--radius-small,0.1875rem)] bg-white drop-shadow-[0_0_6px_#33333355] ${h[s]}`,
           children: [
-            l && /* @__PURE__ */ e(
+            m && /* @__PURE__ */ t(
               "header",
               {
-                id: i,
+                id: c,
                 className: "border-b border-[#eee] px-[var(--sp-large,1.5rem)] py-[var(--sp-medium,0.75rem)] max-md:p-[var(--sp-medium,0.75rem)] [&>h2]:font-bold [&>h2]:text-[var(--fs-large,0.875rem)]",
-                children: l
+                children: m
               }
             ),
-            /* @__PURE__ */ e("div", { className: "flex-auto overflow-auto p-[var(--sp-large,1.5rem)] max-md:p-[var(--sp-medium,0.75rem)]", children: u }),
-            o && /* @__PURE__ */ e("footer", { className: "flex justify-center gap-[var(--sp-large,1.5rem)] border-t border-[#eee] px-[var(--sp-large,1.5rem)] py-[var(--sp-medium,0.75rem)] max-md:gap-[var(--sp-medium,0.75rem)] max-md:p-[var(--sp-medium,0.75rem)] max-md:[&>*]:flex-auto", children: o }),
-            /* @__PURE__ */ e(
+            /* @__PURE__ */ t("div", { className: "flex-auto overflow-auto p-[var(--sp-large,1.5rem)] max-md:p-[var(--sp-medium,0.75rem)]", children: p }),
+            u && /* @__PURE__ */ t("footer", { className: "flex justify-center gap-[var(--sp-large,1.5rem)] border-t border-[#eee] px-[var(--sp-large,1.5rem)] py-[var(--sp-medium,0.75rem)] max-md:gap-[var(--sp-medium,0.75rem)] max-md:p-[var(--sp-medium,0.75rem)] max-md:[&>*]:flex-auto", children: u }),
+            /* @__PURE__ */ t(
               "button",
               {
                 type: "button",
                 "aria-label": "閉じる",
                 className: "absolute bottom-full left-full size-[var(--icon-medium,1.125rem)] cursor-pointer leading-none text-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white [&>*]:size-full",
-                onClick: t,
-                children: /* @__PURE__ */ e(x, {})
+                onClick: o,
+                children: /* @__PURE__ */ t(y, {})
               }
             )
           ]
@@ -79,5 +98,5 @@ function w({
   );
 }
 export {
-  w as ModalBox
+  I as ModalBox
 };