futsuno-ui 0.1.0

package/dist/index.js

@@ -0,0 +1,1386 @@
+import React6, { useState } from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+// src/tokens/colors.ts
+var colors = {
+  /** Primary black color - #040404 */
+  black: "#040404",
+  /** Primary white color - #FFFFFF */
+  white: "#FFFFFF",
+  /** Gray scale colors */
+  gray: {
+    /** Dark gray - #464646 - Used for buttons, secondary text */
+    900: "#464646",
+    /** Medium gray - #BDC1C2 - Used for borders */
+    400: "#BDC1C2",
+    /** Light gray - #E5E6E6 - Used for backgrounds */
+    200: "#E5E6E6",
+    /** Lightest gray - #E5E6E6 */
+    100: "#E5E6E6"
+  },
+  /** Background colors */
+  background: {
+    /** Section background gray - #F2F3F1 */
+    gray: "#F2F3F1"
+  },
+  /** Accent colors */
+  accent: {
+    /** Gold accent - #978E5F - Used for badges, premium elements */
+    gold: "#978E5F",
+    /** Blue accent - #457D99 */
+    blue: "#457D99",
+    /** Red accent - #CC5E58 - Used for CTAs, emphasis */
+    red: "#CC5E58"
+  },
+  /** Button colors - semantic aliases */
+  button: {
+    black: "#464646",
+    red: "#CC5E58",
+    gold: "#978E5F",
+    white: "#FFFFFF"
+  },
+  /** Text colors - semantic aliases */
+  text: {
+    primary: "#040404",
+    secondary: "#464646",
+    inverse: "#FFFFFF",
+    accent: "#CC5E58"
+  }
+};
+var colorPalette = {
+  "--color-black": colors.black,
+  "--color-white": colors.white,
+  "--color-gray-900": colors.gray[900],
+  "--color-gray-400": colors.gray[400],
+  "--color-gray-200": colors.gray[200],
+  "--color-gray-100": colors.gray[100],
+  "--color-background-gray": colors.background.gray,
+  "--color-accent-gold": colors.accent.gold,
+  "--color-accent-blue": colors.accent.blue,
+  "--color-accent-red": colors.accent.red
+};
+
+// src/tokens/typography.ts
+var fontFamily = {
+  /** Primary font - Noto Sans JP */
+  primary: '"Noto Sans JP", sans-serif',
+  /** Secondary font for prices - A-OTF Shuei NGo Kin StdN */
+  price: '"A-OTF Shuei NGo Kin StdN", "Noto Sans JP", sans-serif'
+};
+var fontWeight = {
+  regular: 400,
+  medium: 500,
+  bold: 700
+};
+var typography = {
+  /** Heading 1 - 24px */
+  h1: {
+    fontSize: "24px",
+    lineHeight: 1.55,
+    letterSpacing: "0.16em",
+    fontWeight: fontWeight.medium,
+    fontFamily: fontFamily.primary
+  },
+  /** Heading 2 - 22px */
+  h2: {
+    fontSize: "22px",
+    lineHeight: 1.55,
+    letterSpacing: "0.16em",
+    fontWeight: fontWeight.medium,
+    fontFamily: fontFamily.primary
+  },
+  /** Heading 3 - 20px */
+  h3: {
+    fontSize: "20px",
+    lineHeight: 1.35,
+    letterSpacing: "0.16em",
+    fontWeight: fontWeight.medium,
+    fontFamily: fontFamily.primary
+  },
+  /** Heading 4 - 18px */
+  h4: {
+    fontSize: "18px",
+    lineHeight: 1.45,
+    letterSpacing: "0.16em",
+    fontWeight: fontWeight.medium,
+    fontFamily: fontFamily.primary
+  },
+  /** Body large - 16px */
+  bodyLg: {
+    fontSize: "16px",
+    lineHeight: 1.95,
+    letterSpacing: "0.08em",
+    fontWeight: fontWeight.medium,
+    fontFamily: fontFamily.primary
+  },
+  /** Body medium - 15px */
+  bodyMd: {
+    fontSize: "15px",
+    lineHeight: 1.85,
+    letterSpacing: "0.08em",
+    fontWeight: fontWeight.medium,
+    fontFamily: fontFamily.primary
+  },
+  /** Body small - 13px */
+  bodySm: {
+    fontSize: "13px",
+    lineHeight: 1.85,
+    letterSpacing: "0.08em",
+    fontWeight: fontWeight.medium,
+    fontFamily: fontFamily.primary
+  },
+  /** Caption large - 12px */
+  captionLg: {
+    fontSize: "12px",
+    lineHeight: 1.45,
+    letterSpacing: "0.08em",
+    fontWeight: fontWeight.medium,
+    fontFamily: fontFamily.primary
+  },
+  /** Caption medium - 11px */
+  captionMd: {
+    fontSize: "11px",
+    lineHeight: 1.45,
+    letterSpacing: "0.08em",
+    fontWeight: fontWeight.medium,
+    fontFamily: fontFamily.primary
+  },
+  /** Caption small - 10px */
+  captionSm: {
+    fontSize: "10px",
+    lineHeight: 1.45,
+    letterSpacing: "0.08em",
+    fontWeight: fontWeight.medium,
+    fontFamily: fontFamily.primary
+  },
+  /** Caption extra small - 8px */
+  captionXs: {
+    fontSize: "8px",
+    lineHeight: 1.45,
+    letterSpacing: "0.08em",
+    fontWeight: fontWeight.medium,
+    fontFamily: fontFamily.primary
+  },
+  /** Button text - 20px bold */
+  buttonLg: {
+    fontSize: "20px",
+    lineHeight: 1.45,
+    letterSpacing: "0.05em",
+    fontWeight: fontWeight.bold,
+    fontFamily: fontFamily.primary
+  },
+  /** Button text - 18px bold */
+  buttonMd: {
+    fontSize: "18px",
+    lineHeight: 1.45,
+    letterSpacing: "0.05em",
+    fontWeight: fontWeight.bold,
+    fontFamily: fontFamily.primary
+  },
+  /** Price text - 25px */
+  priceLg: {
+    fontSize: "25px",
+    lineHeight: 1.45,
+    letterSpacing: "0.05em",
+    fontWeight: fontWeight.bold,
+    fontFamily: fontFamily.price
+  },
+  /** Price text - 14px */
+  priceSm: {
+    fontSize: "14px",
+    lineHeight: 1.45,
+    letterSpacing: "0.05em",
+    fontWeight: fontWeight.bold,
+    fontFamily: fontFamily.price
+  }
+};
+
+// src/tokens/spacing.ts
+var spacing = {
+  /** 4px */
+  "4": "4px",
+  /** 8px */
+  "8": "8px",
+  /** 12px */
+  "12": "12px",
+  /** 16px */
+  "16": "16px",
+  /** 24px */
+  "24": "24px",
+  /** 32px */
+  "32": "32px",
+  /** 40px */
+  "40": "40px",
+  /** 48px */
+  "48": "48px"
+};
+var spacingValues = {
+  "4": 4,
+  "8": 8,
+  "12": 12,
+  "16": 16,
+  "24": 24,
+  "32": 32,
+  "40": 40,
+  "48": 48
+};
+var borderRadius = {
+  /** Button border radius - 3px */
+  button: "3px",
+  /** Small radius - 2px */
+  sm: "2px",
+  /** Badge radius - 55px (circular) */
+  badge: "55px",
+  /** Full circle */
+  full: "9999px"
+};
+var boxShadow = {
+  /** Button shadow */
+  button: "0px 4px 16px 0px rgba(4, 4, 4, 0.4)",
+  /** None */
+  none: "none"
+};
+
+// src/tokens/index.ts
+var tokens = {
+  colors,
+  typography,
+  spacing,
+  borderRadius,
+  boxShadow
+};
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var variantStyles = {
+  black: "bg-[#464646] text-white border-transparent",
+  red: "bg-[#CC5E58] text-white border-transparent",
+  gold: "bg-[#978E5F] text-white border-transparent",
+  white: "bg-white text-[#464646] border-[#BDC1C2]"
+};
+var sizeStyles = {
+  lg: "px-[24px] py-[24px] text-[20px]",
+  md: "px-[24px] py-[16px] text-[18px]"
+};
+var Button = React6.forwardRef(
+  ({
+    variant = "black",
+    size = "lg",
+    showArrow = true,
+    fullWidth = false,
+    className,
+    children,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref,
+        className: cn(
+          // Base styles
+          "relative inline-flex items-center justify-center",
+          'font-bold font-["Noto_Sans_JP",sans-serif]',
+          "rounded-[3px] border border-solid",
+          "shadow-[0px_4px_16px_0px_rgba(4,4,4,0.4)]",
+          "tracking-[0.05em] leading-[1.45]",
+          "transition-opacity hover:opacity-90",
+          "disabled:opacity-50 disabled:cursor-not-allowed",
+          // Variant styles
+          variantStyles[variant],
+          // Size styles
+          sizeStyles[size],
+          // Full width
+          fullWidth && "w-full",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "flex-1 text-center", children }),
+          showArrow && /* @__PURE__ */ jsx("span", { className: "absolute right-[24px] top-1/2 -translate-y-1/2", children: /* @__PURE__ */ jsx(ArrowIcon, { variant }) })
+        ]
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+function ArrowIcon({ variant }) {
+  const color = variant === "white" ? "#464646" : "#FFFFFF";
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      className: "-rotate-90",
+      children: [
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M12 6L12 17",
+            stroke: color,
+            strokeWidth: "1.5",
+            strokeLinecap: "round"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M7 13L12 18L17 13",
+            stroke: color,
+            strokeWidth: "1.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        )
+      ]
+    }
+  );
+}
+var variantStyles2 = {
+  outline: "bg-white text-[#040404] border-[#464646]",
+  filled: "bg-[#464646] text-white border-[#464646]"
+};
+var AnchorButton = React6.forwardRef(({ variant = "outline", multiline = false, className, children, ...props }, ref) => {
+  return /* @__PURE__ */ jsxs(
+    "a",
+    {
+      ref,
+      className: cn(
+        // Base styles
+        "inline-flex items-center justify-between gap-[16px]",
+        'font-["Noto_Sans_JP",sans-serif] font-bold',
+        "text-[15px] leading-[1.8] tracking-[0.08em]",
+        "px-[16px] py-[16px] md:px-[24px]",
+        "rounded-[3px] border border-solid",
+        "transition-opacity hover:opacity-80",
+        "cursor-pointer no-underline",
+        // Variant styles
+        variantStyles2[variant],
+        // Width handling
+        !multiline && "whitespace-nowrap",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "flex-1", children }),
+        /* @__PURE__ */ jsx(ChevronDownIcon, { variant })
+      ]
+    }
+  );
+});
+AnchorButton.displayName = "AnchorButton";
+function ChevronDownIcon({ variant }) {
+  const color = variant === "outline" ? "#040404" : "#FFFFFF";
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: "12",
+      height: "6",
+      viewBox: "0 0 12 6",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      className: "shrink-0",
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M1 1L6 5L11 1",
+          stroke: color,
+          strokeWidth: "1.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  );
+}
+var aspectRatioStyles = {
+  "1:1": "aspect-square",
+  "4:3": "aspect-[4/3]",
+  "16:9": "aspect-video",
+  auto: ""
+};
+var Image = React6.forwardRef(
+  ({
+    aspectRatio = "auto",
+    objectFit = "cover",
+    placeholderColor = "#D9D9D9",
+    className,
+    style,
+    alt = "",
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "relative overflow-hidden",
+          aspectRatioStyles[aspectRatio],
+          className
+        ),
+        style: { backgroundColor: placeholderColor, ...style },
+        children: /* @__PURE__ */ jsx(
+          "img",
+          {
+            ref,
+            alt,
+            className: cn(
+              "w-full h-full",
+              objectFit === "cover" && "object-cover",
+              objectFit === "contain" && "object-contain",
+              objectFit === "fill" && "object-fill"
+            ),
+            ...props
+          }
+        )
+      }
+    );
+  }
+);
+Image.displayName = "Image";
+var sizeStyles2 = {
+  sm: "w-[90px] h-[90px]",
+  md: "w-[100px] h-[100px]",
+  lg: "w-[130px] h-[130px]"
+};
+var ProductImage = React6.forwardRef(
+  ({
+    productName = "Product",
+    size = "md",
+    circular = false,
+    className,
+    src,
+    ...props
+  }, ref) => {
+    const hasImage = Boolean(src);
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "relative overflow-hidden flex-shrink-0",
+          sizeStyles2[size],
+          circular ? "rounded-full" : "rounded-[2px]",
+          !hasImage && "bg-[#D4D4D4]",
+          className
+        ),
+        children: hasImage && /* @__PURE__ */ jsx(
+          "img",
+          {
+            ref,
+            src,
+            alt: productName,
+            className: "w-full h-full object-cover",
+            ...props
+          }
+        )
+      }
+    );
+  }
+);
+ProductImage.displayName = "ProductImage";
+var iconPaths = {
+  "arrow-right": /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M6 12H17", strokeWidth: "1.5", strokeLinecap: "round" }),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M13 7L18 12L13 17",
+        strokeWidth: "1.5",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    )
+  ] }),
+  "arrow-down": /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M12 6V17", strokeWidth: "1.5", strokeLinecap: "round" }),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M7 13L12 18L17 13",
+        strokeWidth: "1.5",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    )
+  ] }),
+  "chevron-down": /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M6 9L12 15L18 9",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ),
+  "chevron-up": /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M6 15L12 9L18 15",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ),
+  check: /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M5 12L10 17L19 7",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ),
+  plus: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M12 5V19", strokeWidth: "1.5", strokeLinecap: "round" }),
+    /* @__PURE__ */ jsx("path", { d: "M5 12H19", strokeWidth: "1.5", strokeLinecap: "round" })
+  ] }),
+  minus: /* @__PURE__ */ jsx("path", { d: "M5 12H19", strokeWidth: "1.5", strokeLinecap: "round" })
+};
+var Icon = React6.forwardRef(
+  ({ name, size = 24, color = "currentColor", className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "svg",
+      {
+        ref,
+        width: size,
+        height: size,
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: color,
+        xmlns: "http://www.w3.org/2000/svg",
+        className: cn("inline-block", className),
+        ...props,
+        children: iconPaths[name]
+      }
+    );
+  }
+);
+Icon.displayName = "Icon";
+var variantStyles3 = {
+  h1: "text-[24px] leading-[1.55] tracking-[0.16em] font-medium",
+  h2: "text-[22px] leading-[1.55] tracking-[0.16em] font-medium",
+  h3: "text-[20px] leading-[1.35] tracking-[0.16em] font-medium",
+  h4: "text-[18px] leading-[1.45] tracking-[0.16em] font-medium",
+  "body-lg": "text-[16px] leading-[1.95] tracking-[0.08em] font-medium",
+  "body-md": "text-[15px] leading-[1.85] tracking-[0.08em] font-medium",
+  "body-sm": "text-[13px] leading-[1.85] tracking-[0.08em] font-medium",
+  "caption-lg": "text-[12px] leading-[1.45] tracking-[0.08em] font-medium",
+  "caption-md": "text-[11px] leading-[1.45] tracking-[0.08em] font-medium",
+  "caption-sm": "text-[10px] leading-[1.45] tracking-[0.08em] font-medium",
+  "caption-xs": "text-[8px] leading-[1.45] tracking-[0.08em] font-medium"
+};
+var colorStyles = {
+  primary: "text-[#040404]",
+  secondary: "text-[#464646]",
+  inverse: "text-white",
+  accent: "text-[#CC5E58]",
+  gold: "text-[#978E5F]",
+  inherit: "text-inherit"
+};
+var alignStyles = {
+  left: "text-left",
+  center: "text-center",
+  right: "text-right",
+  justify: "text-justify"
+};
+var weightStyles = {
+  regular: "font-normal",
+  medium: "font-medium",
+  bold: "font-bold"
+};
+var defaultTags = {
+  h1: "h1",
+  h2: "h2",
+  h3: "h3",
+  h4: "h4",
+  "body-lg": "p",
+  "body-md": "p",
+  "body-sm": "p",
+  "caption-lg": "span",
+  "caption-md": "span",
+  "caption-sm": "span",
+  "caption-xs": "span"
+};
+var Text = React6.forwardRef(
+  ({
+    variant = "body-md",
+    color = "primary",
+    align = "left",
+    as,
+    weight,
+    className,
+    children,
+    ...props
+  }, ref) => {
+    const Component = as || defaultTags[variant];
+    return React6.createElement(
+      Component,
+      {
+        ref,
+        className: cn(
+          'font-["Noto_Sans_JP",sans-serif]',
+          variantStyles3[variant],
+          colorStyles[color],
+          alignStyles[align],
+          weight && weightStyles[weight],
+          className
+        ),
+        ...props
+      },
+      children
+    );
+  }
+);
+Text.displayName = "Text";
+var UserVoice = React6.forwardRef(
+  ({
+    avatarSrc,
+    userName = "\u304A\u5BA2\u69D8",
+    userAttribute,
+    content,
+    rating = 5,
+    className,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          "flex flex-col gap-[16px] p-[24px]",
+          "bg-white rounded-[2px]",
+          'font-["Noto_Sans_JP",sans-serif]',
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-[12px]", children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "w-[48px] h-[48px] rounded-full flex-shrink-0 overflow-hidden",
+                  !avatarSrc && "bg-[#D4D4D4]"
+                ),
+                children: avatarSrc && /* @__PURE__ */ jsx(
+                  "img",
+                  {
+                    src: avatarSrc,
+                    alt: userName,
+                    className: "w-full h-full object-cover"
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-[4px]", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-[14px] font-medium text-[#040404] leading-[1.45] tracking-[0.08em]", children: userName }),
+              userAttribute && /* @__PURE__ */ jsx("span", { className: "text-[12px] font-medium text-[#464646] leading-[1.45] tracking-[0.08em]", children: userAttribute })
+            ] })
+          ] }),
+          rating > 0 && /* @__PURE__ */ jsx("div", { className: "flex gap-[4px]", children: Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ jsx(StarIcon, { filled: i < rating }, i)) }),
+          /* @__PURE__ */ jsx("p", { className: "text-[13px] font-medium text-[#040404] leading-[1.85] tracking-[0.08em]", children: content })
+        ]
+      }
+    );
+  }
+);
+UserVoice.displayName = "UserVoice";
+function StarIcon({ filled }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: "16",
+      height: "16",
+      viewBox: "0 0 16 16",
+      fill: filled ? "#978E5F" : "none",
+      stroke: filled ? "#978E5F" : "#BDC1C2",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M8 1L10.163 5.279L15 5.94L11.5 9.318L12.326 14L8 11.779L3.674 14L4.5 9.318L1 5.94L5.837 5.279L8 1Z",
+          strokeWidth: "1",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  );
+}
+var FaqParts = React6.forwardRef(
+  ({
+    question,
+    answer,
+    defaultOpen = false,
+    open: controlledOpen,
+    onOpenChange,
+    className,
+    ...props
+  }, ref) => {
+    const [internalOpen, setInternalOpen] = useState(defaultOpen);
+    const isOpen = controlledOpen !== void 0 ? controlledOpen : internalOpen;
+    const handleToggle = () => {
+      const newOpen = !isOpen;
+      setInternalOpen(newOpen);
+      onOpenChange?.(newOpen);
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          "border-b border-[#E5E6E6]",
+          'font-["Noto_Sans_JP",sans-serif]',
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: handleToggle,
+              className: cn(
+                "w-full flex items-center justify-between gap-[16px]",
+                "py-[16px] px-[8px]",
+                "text-left cursor-pointer",
+                "transition-colors hover:bg-[#F2F3F1]"
+              ),
+              "aria-expanded": isOpen,
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-[12px]", children: [
+                  /* @__PURE__ */ jsx("span", { className: "text-[15px] font-bold text-[#978E5F] leading-[1.45] tracking-[0.08em]", children: "Q" }),
+                  /* @__PURE__ */ jsx("span", { className: "text-[15px] font-medium text-[#040404] leading-[1.8] tracking-[0.08em]", children: question })
+                ] }),
+                /* @__PURE__ */ jsx(ChevronIcon, { isOpen })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "grid transition-[grid-template-rows] duration-300 ease-in-out",
+                isOpen ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
+              ),
+              children: /* @__PURE__ */ jsx("div", { className: "overflow-hidden", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-[12px] py-[16px] px-[8px]", children: [
+                /* @__PURE__ */ jsx("span", { className: "text-[15px] font-bold text-[#CC5E58] leading-[1.45] tracking-[0.08em]", children: "A" }),
+                /* @__PURE__ */ jsx("p", { className: "text-[13px] font-medium text-[#464646] leading-[1.85] tracking-[0.08em]", children: answer })
+              ] }) })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+FaqParts.displayName = "FaqParts";
+function ChevronIcon({ isOpen }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "#464646",
+      xmlns: "http://www.w3.org/2000/svg",
+      className: cn(
+        "flex-shrink-0 transition-transform duration-300",
+        isOpen && "rotate-180"
+      ),
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M6 9L12 15L18 9",
+          strokeWidth: "1.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  );
+}
+var KeyVisual = React6.forwardRef(
+  ({
+    backgroundImage,
+    copyLines = [],
+    badges = [],
+    footnotes = [],
+    isVideo = false,
+    videoSrc,
+    className,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          "relative w-full min-h-[548px] overflow-hidden",
+          "flex flex-col",
+          'font-["Noto_Sans_JP",sans-serif]',
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "absolute inset-0", children: isVideo && videoSrc ? /* @__PURE__ */ jsx(
+            "video",
+            {
+              src: videoSrc,
+              autoPlay: true,
+              loop: true,
+              muted: true,
+              playsInline: true,
+              className: "w-full h-full object-cover"
+            }
+          ) : backgroundImage ? /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: backgroundImage,
+              alt: "Key Visual",
+              className: "w-full h-full object-cover"
+            }
+          ) : /* @__PURE__ */ jsx("div", { className: "w-full h-full bg-[#D9D9D9]" }) }),
+          /* @__PURE__ */ jsxs("div", { className: "relative flex-1 flex flex-col justify-between px-[20px] pt-[40px] pb-[20px]", children: [
+            copyLines.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-[8px] items-start", children: copyLines.map((line, index) => /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "bg-white px-[8px] pt-[4px] pb-[8px]",
+                children: /* @__PURE__ */ jsx("span", { className: "text-[24px] font-medium text-[#040404] leading-[1.55] tracking-[0.16em]", children: line })
+              },
+              index
+            )) }),
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-[10px]", children: [
+              badges.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between", children: badges.map((badge, index) => /* @__PURE__ */ jsx(BadgeItem, { badge }, index)) }),
+              footnotes.length > 0 && /* @__PURE__ */ jsx("div", { className: "text-[10px] font-normal text-[#464646] leading-[1.5]", children: footnotes.map((footnote, index) => /* @__PURE__ */ jsx("p", { className: "m-0", children: footnote }, index)) })
+            ] })
+          ] })
+        ]
+      }
+    );
+  }
+);
+KeyVisual.displayName = "KeyVisual";
+function BadgeItem({ badge }) {
+  return /* @__PURE__ */ jsxs("div", { className: "relative flex flex-col gap-[10px] items-start w-[106px]", children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "size-[106px] rounded-full",
+          "bg-white border border-[#978E5F]",
+          "flex flex-col items-center justify-center",
+          "relative"
+        ),
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "absolute inset-[2px] rounded-full border border-dashed border-[#978E5F] opacity-50" }),
+          /* @__PURE__ */ jsx("span", { className: "text-[12px] font-bold text-[#978E5F] leading-[1.45] tracking-[0.05em] text-center", children: badge.title }),
+          /* @__PURE__ */ jsx("div", { className: "text-[15px] font-bold text-[#978E5F] leading-[1.45] tracking-[0.05em] text-center whitespace-pre-line", children: badge.text })
+        ]
+      }
+    ),
+    badge.footnote && /* @__PURE__ */ jsx("span", { className: "absolute -right-[0.5px] top-0 text-[7.7px] font-normal text-[#464646] leading-none tracking-[0.05em]", children: badge.footnote })
+  ] });
+}
+var backgroundStyles = {
+  white: "bg-white",
+  gray: "bg-[#F2F3F1]",
+  gold: "bg-[#978E5F]",
+  custom: ""
+};
+var paddingStyles = {
+  sm: "py-[24px] px-[20px]",
+  md: "py-[48px] px-[20px]",
+  lg: "py-[64px] px-[20px]"
+};
+var maxWidthStyles = {
+  sm: "max-w-[335px]",
+  md: "max-w-[375px]",
+  lg: "max-w-[500px]",
+  full: "max-w-full"
+};
+var Section = React6.forwardRef(
+  ({
+    title,
+    subtitle,
+    background = "white",
+    customBgColor,
+    padding = "md",
+    centered = true,
+    maxWidth = "md",
+    className,
+    style,
+    children,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "section",
+      {
+        ref,
+        className: cn(
+          "w-full",
+          'font-["Noto_Sans_JP",sans-serif]',
+          backgroundStyles[background],
+          paddingStyles[padding],
+          className
+        ),
+        style: {
+          backgroundColor: background === "custom" ? customBgColor : void 0,
+          ...style
+        },
+        ...props,
+        children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "w-full mx-auto",
+              maxWidthStyles[maxWidth],
+              centered && "flex flex-col items-center"
+            ),
+            children: [
+              (title || subtitle) && /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: cn(
+                    "flex flex-col gap-[8px] mb-[24px]",
+                    centered && "items-center text-center"
+                  ),
+                  children: [
+                    title && /* @__PURE__ */ jsx(
+                      "h2",
+                      {
+                        className: cn(
+                          "text-[22px] font-medium leading-[1.55] tracking-[0.16em]",
+                          background === "gold" ? "text-white" : "text-[#040404]"
+                        ),
+                        children: title
+                      }
+                    ),
+                    subtitle && /* @__PURE__ */ jsx(
+                      "p",
+                      {
+                        className: cn(
+                          "text-[13px] font-medium leading-[1.85] tracking-[0.08em]",
+                          background === "gold" ? "text-white" : "text-[#464646]"
+                        ),
+                        children: subtitle
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx("div", { className: cn("w-full", centered && "flex flex-col items-center"), children })
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+Section.displayName = "Section";
+var Spec = React6.forwardRef(
+  ({
+    productName,
+    productImage,
+    items = [],
+    ingredients,
+    notes = [],
+    className,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          "w-full bg-white rounded-[2px] overflow-hidden",
+          'font-["Noto_Sans_JP",sans-serif]',
+          className
+        ),
+        ...props,
+        children: [
+          productImage && /* @__PURE__ */ jsx("div", { className: "w-full aspect-[4/3] bg-[#D9D9D9]", children: /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: productImage,
+              alt: productName || "Product",
+              className: "w-full h-full object-cover"
+            }
+          ) }),
+          /* @__PURE__ */ jsxs("div", { className: "p-[24px] flex flex-col gap-[16px]", children: [
+            productName && /* @__PURE__ */ jsx("h3", { className: "text-[18px] font-medium text-[#040404] leading-[1.45] tracking-[0.16em] text-center", children: productName }),
+            items.length > 0 && /* @__PURE__ */ jsx("table", { className: "w-full border-collapse", children: /* @__PURE__ */ jsx("tbody", { children: items.map((item, index) => /* @__PURE__ */ jsxs("tr", { className: "border-b border-[#E5E6E6]", children: [
+              /* @__PURE__ */ jsx("th", { className: "py-[12px] px-[8px] text-left text-[13px] font-medium text-[#464646] leading-[1.85] tracking-[0.08em] w-[100px]", children: item.label }),
+              /* @__PURE__ */ jsx("td", { className: "py-[12px] px-[8px] text-[13px] font-medium text-[#040404] leading-[1.85] tracking-[0.08em]", children: item.value })
+            ] }, index)) }) }),
+            ingredients && /* @__PURE__ */ jsx("div", { className: "pt-[16px] border-t border-[#E5E6E6]", children: /* @__PURE__ */ jsxs("p", { className: "text-[12px] font-medium text-[#464646] leading-[1.5] tracking-[0.08em]", children: [
+              /* @__PURE__ */ jsx("span", { className: "font-bold", children: "\u539F\u6750\u6599\uFF1A" }),
+              ingredients
+            ] }) }),
+            notes.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-[4px]", children: notes.map((note, index) => /* @__PURE__ */ jsx(
+              "p",
+              {
+                className: "text-[10px] font-medium text-[#464646] leading-[1.5] tracking-[0.08em]",
+                children: note
+              },
+              index
+            )) })
+          ] })
+        ]
+      }
+    );
+  }
+);
+Spec.displayName = "Spec";
+var backgroundStyles2 = {
+  gold: "bg-[#978E5F]",
+  gray: "bg-[#F2F3F1]"
+};
+var Cta = React6.forwardRef(
+  ({
+    background = "gold",
+    productImage,
+    productName,
+    productPrice,
+    productQuantity,
+    features = [],
+    promotionLabel,
+    promotionTitle = [],
+    productOptions = [],
+    note,
+    ctaMessage,
+    buttonText = "\u8CFC\u5165\u3059\u308B",
+    buttonVariant = "red",
+    onButtonClick,
+    footerLinkText,
+    footerLinkHref,
+    className,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          "w-full py-[48px] px-[20px]",
+          'font-["Noto_Sans_JP",sans-serif]',
+          backgroundStyles2[background],
+          className
+        ),
+        ...props,
+        children: /* @__PURE__ */ jsx("div", { className: "w-full max-w-[375px] mx-auto", children: /* @__PURE__ */ jsxs("div", { className: "bg-white rounded-[2px] overflow-hidden", children: [
+          productImage && /* @__PURE__ */ jsx("div", { className: "w-full aspect-[4/3] bg-[#D9D9D9]", children: /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: productImage,
+              alt: productName || "Product",
+              className: "w-full h-full object-cover"
+            }
+          ) }),
+          features.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex justify-center gap-[8px] py-[24px] px-[16px]", children: features.map((feature, index) => /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "flex flex-col items-center gap-[8px] w-[101px]",
+              children: [
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: cn(
+                      "size-[90px] rounded-full",
+                      !feature.image && "bg-[#D4D4D4]"
+                    ),
+                    children: feature.image && /* @__PURE__ */ jsx(
+                      "img",
+                      {
+                        src: feature.image,
+                        alt: "",
+                        className: "w-full h-full object-cover rounded-full"
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { className: "text-[13px] font-medium text-[#040404] leading-[1.2] tracking-[0.08em] text-center", children: feature.text })
+              ]
+            },
+            index
+          )) }),
+          /* @__PURE__ */ jsxs("div", { className: "px-[16px] pb-[24px]", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex gap-[24px] items-center mb-[24px]", children: [
+              productImage && /* @__PURE__ */ jsx("div", { className: "w-[130px] aspect-square bg-[#D9D9D9] flex-shrink-0", children: /* @__PURE__ */ jsx(
+                "img",
+                {
+                  src: productImage,
+                  alt: productName || "",
+                  className: "w-full h-full object-cover"
+                }
+              ) }),
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-[8px]", children: [
+                productName && /* @__PURE__ */ jsx("span", { className: "text-[16px] font-bold text-[#040404] leading-[1.5] tracking-[0.05em]", children: productName }),
+                productPrice && /* @__PURE__ */ jsxs("span", { className: "text-[25px] font-bold text-[#040404] leading-[1.45] tracking-[0.05em]", children: [
+                  productPrice,
+                  /* @__PURE__ */ jsx("span", { className: "text-[12px]", children: "[\u7A0E\u8FBC]" })
+                ] }),
+                productQuantity && /* @__PURE__ */ jsx("span", { className: "text-[13px] font-bold text-[#040404] leading-[1.8] tracking-[0.05em]", children: productQuantity })
+              ] })
+            ] }),
+            (promotionLabel || promotionTitle.length > 0) && /* @__PURE__ */ jsxs("div", { className: "bg-[#F2F3F1] rounded-[2px] p-[16px] mb-[24px]", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-[8px] mb-[16px]", children: [
+                promotionLabel && /* @__PURE__ */ jsx("span", { className: "bg-[#CC5E58] text-white text-[13px] font-bold px-[8px] py-[4px] leading-[1.55] tracking-[0.05em]", children: promotionLabel }),
+                promotionTitle.map((line, index) => /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: cn(
+                      "font-bold leading-[1.55] text-center",
+                      index === 0 ? "text-[18px] text-[#040404] tracking-[0.05em]" : "text-[22px] text-[#CC5E58] tracking-[0.05em]"
+                    ),
+                    children: line
+                  },
+                  index
+                ))
+              ] }),
+              productOptions.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-[16px]", children: productOptions.map((option, index) => /* @__PURE__ */ jsxs("div", { className: "flex gap-[16px] items-center", children: [
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: cn(
+                      "w-[100px] aspect-square flex-shrink-0",
+                      !option.image && "bg-[#D9D9D9]"
+                    ),
+                    children: option.image && /* @__PURE__ */ jsx(
+                      "img",
+                      {
+                        src: option.image,
+                        alt: "",
+                        className: "w-full h-full object-cover"
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-[4px]", children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex gap-[5px] items-start", children: [
+                    /* @__PURE__ */ jsx("span", { className: "text-[14px] font-bold text-[#040404] leading-[1.45] tracking-[0.05em]", children: option.label }),
+                    option.discount && /* @__PURE__ */ jsx("span", { className: "text-[14px] font-bold text-[#CC5E58] leading-[1.45] tracking-[0.05em]", children: option.discount })
+                  ] }),
+                  option.pricePerUnit && /* @__PURE__ */ jsxs("span", { className: "text-[25px] font-bold text-[#040404] leading-[1.45] tracking-[0.05em]", children: [
+                    option.pricePerUnit,
+                    /* @__PURE__ */ jsx("span", { className: "text-[12px]", children: "/\u672C[\u7A0E\u8FBC]" })
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { className: "flex gap-[4px] text-[12px] font-bold text-[#040404] tracking-[0.05em]", children: [
+                    option.quantity && /* @__PURE__ */ jsx("span", { children: option.quantity }),
+                    option.totalPrice && /* @__PURE__ */ jsxs("span", { children: [
+                      option.totalPrice,
+                      /* @__PURE__ */ jsx("span", { className: "text-[9px]", children: "[\u7A0E\u8FBC]" })
+                    ] })
+                  ] })
+                ] })
+              ] }, index)) })
+            ] }),
+            note && /* @__PURE__ */ jsx("p", { className: "text-[12px] font-medium text-[#464646] leading-[1.5] tracking-[0.08em] text-center mb-[16px]", children: note })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "px-[16px] pb-[24px] flex flex-col items-center gap-[16px]", children: [
+            ctaMessage && /* @__PURE__ */ jsx("p", { className: "text-[15px] font-bold text-[#CC5E58] leading-[1.8] tracking-[0.08em] text-center", children: ctaMessage }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: buttonVariant,
+                size: "md",
+                fullWidth: true,
+                onClick: onButtonClick,
+                className: "max-w-[310px]",
+                children: buttonText
+              }
+            ),
+            footerLinkText && /* @__PURE__ */ jsx(
+              "a",
+              {
+                href: footerLinkHref || "#",
+                className: "text-[12px] font-medium text-[#040404] leading-[1.5] tracking-[0.05em] underline",
+                children: footerLinkText
+              }
+            )
+          ] })
+        ] }) })
+      }
+    );
+  }
+);
+Cta.displayName = "Cta";
+var backgroundStyles3 = {
+  white: "bg-white",
+  gray: "bg-[#F2F3F1]"
+};
+var Faq = React6.forwardRef(
+  ({
+    title = "\u3088\u304F\u3042\u308B\u3054\u8CEA\u554F",
+    items = [],
+    background = "white",
+    className,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          "w-full py-[48px] px-[20px]",
+          'font-["Noto_Sans_JP",sans-serif]',
+          backgroundStyles3[background],
+          className
+        ),
+        ...props,
+        children: /* @__PURE__ */ jsxs("div", { className: "w-full max-w-[375px] mx-auto", children: [
+          title && /* @__PURE__ */ jsx("h2", { className: "text-[22px] font-medium text-[#040404] leading-[1.55] tracking-[0.16em] text-center mb-[24px]", children: title }),
+          /* @__PURE__ */ jsx("div", { className: "border-t border-[#E5E6E6]", children: items.map((item, index) => /* @__PURE__ */ jsx(
+            FaqParts,
+            {
+              question: item.question,
+              answer: item.answer,
+              defaultOpen: item.defaultOpen
+            },
+            index
+          )) })
+        ] })
+      }
+    );
+  }
+);
+Faq.displayName = "Faq";
+var sizeStyles3 = {
+  xs: "h-[16px]",
+  sm: "h-[24px]",
+  md: "h-[48px]",
+  lg: "h-[64px]",
+  xl: "h-[96px]"
+};
+var backgroundStyles4 = {
+  transparent: "bg-transparent",
+  white: "bg-white",
+  gray: "bg-[#F2F3F1]"
+};
+var Blank = React6.forwardRef(
+  ({ size = "md", height, background = "transparent", className, style, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          "w-full",
+          !height && sizeStyles3[size],
+          backgroundStyles4[background],
+          className
+        ),
+        style: {
+          height: height ? `${height}px` : void 0,
+          ...style
+        },
+        ...props
+      }
+    );
+  }
+);
+Blank.displayName = "Blank";
+var LpTemplate = React6.forwardRef(
+  ({
+    sections = [],
+    maxWidth = 375,
+    centered = true,
+    className,
+    style,
+    children,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          "min-h-screen bg-white",
+          'font-["Noto_Sans_JP",sans-serif]',
+          className
+        ),
+        ...props,
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "w-full",
+              centered && "mx-auto"
+            ),
+            style: {
+              maxWidth: `${maxWidth}px`,
+              ...style
+            },
+            children: sections.length > 0 ? sections.map((section) => /* @__PURE__ */ jsx("div", { "data-section-id": section.id, children: section.component }, section.id)) : children
+          }
+        )
+      }
+    );
+  }
+);
+LpTemplate.displayName = "LpTemplate";
+var ProductLpTemplate = React6.forwardRef(
+  ({
+    keyVisual,
+    contentSections,
+    cta,
+    faqItems = [],
+    footer,
+    className,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsxs(LpTemplate, { ref, className, ...props, children: [
+      keyVisual && /* @__PURE__ */ jsx(
+        KeyVisual,
+        {
+          backgroundImage: keyVisual.backgroundImage,
+          copyLines: keyVisual.copyLines,
+          badges: keyVisual.badges,
+          footnotes: keyVisual.footnotes
+        }
+      ),
+      contentSections,
+      cta && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Blank, { size: "md" }),
+        /* @__PURE__ */ jsx(
+          Cta,
+          {
+            background: cta.background,
+            productImage: cta.productImage,
+            productName: cta.productName,
+            productPrice: cta.productPrice,
+            productQuantity: cta.productQuantity,
+            promotionLabel: cta.promotionLabel,
+            promotionTitle: cta.promotionTitle,
+            productOptions: cta.productOptions,
+            note: cta.note,
+            ctaMessage: cta.ctaMessage,
+            buttonText: cta.buttonText,
+            onButtonClick: cta.onButtonClick,
+            footerLinkText: cta.footerLinkText,
+            footerLinkHref: cta.footerLinkHref
+          }
+        )
+      ] }),
+      faqItems.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Blank, { size: "md" }),
+        /* @__PURE__ */ jsx(Faq, { items: faqItems })
+      ] }),
+      footer && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Blank, { size: "md" }),
+        footer
+      ] })
+    ] });
+  }
+);
+ProductLpTemplate.displayName = "ProductLpTemplate";
+
+// src/theme/index.ts
+var themeVersion = "0.1.0";
+
+export { AnchorButton, Blank, Button, Cta, Faq, FaqParts, Icon, Image, KeyVisual, LpTemplate, ProductImage, ProductLpTemplate, Section, Spec, Text, UserVoice, borderRadius, boxShadow, cn, colorPalette, colors, fontFamily, fontWeight, spacing, spacingValues, themeVersion, tokens, typography };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map