splatoon-ui 0.1.0

package/dist/chunk-KUURJUBW.js

@@ -0,0 +1,2344 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source2, exclude) => {
+  var target = {};
+  for (var prop in source2)
+    if (__hasOwnProp.call(source2, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source2[prop];
+  if (source2 != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source2)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source2, prop))
+        target[prop] = source2[prop];
+    }
+  return target;
+};
+
+// src/lib/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+function resolveCSSColor(color, el) {
+  if (!color.startsWith("var(")) return color;
+  const prop = color.replace(/^var\(/, "").replace(/\)$/, "").trim();
+  return getComputedStyle(el).getPropertyValue(prop).trim();
+}
+
+// src/components/ui/card-slot.module.css
+var card_slot_default = {};
+
+// src/components/ui/card-slot.tsx
+import { jsx } from "react/jsx-runtime";
+var SLOT_STYLE = {
+  "top-left": { top: 0, left: "15%", transform: "translateY(-50%)" },
+  "top-center": { top: 0, left: "50%", transform: "translate(-50%, -50%)" },
+  "top-right": { top: 0, right: "15%", transform: "translateY(-50%)" },
+  "bottom-left": { bottom: 0, left: "15%", transform: "translateY(50%)" },
+  "bottom-center": { bottom: 0, left: "50%", transform: "translate(-50%, 50%)" },
+  "bottom-right": { bottom: 0, right: "15%", transform: "translateY(50%)" }
+};
+function CardSlot(_a) {
+  var _b = _a, { position, className, style } = _b, props = __objRest(_b, ["position", "className", "style"]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    __spreadValues({
+      "data-slot": position ? `slot-${position}` : "slot",
+      className: cn(card_slot_default.cardSlot, className),
+      style: __spreadValues(__spreadValues({}, position && SLOT_STYLE[position]), style)
+    }, props)
+  );
+}
+
+// src/components/ui/tape-assets.ts
+var TAPE_ASSET_BASE = "/_images/tape-assets";
+function source(fileName, width, height) {
+  const path = `${TAPE_ASSET_BASE}/${fileName}`;
+  const extensionIndex = fileName.lastIndexOf(".");
+  const basename = fileName.slice(0, extensionIndex);
+  const extension = fileName.slice(extensionIndex);
+  return {
+    src: path,
+    pngSrcSet: `${TAPE_ASSET_BASE}/${basename}${extension} 1x, ${TAPE_ASSET_BASE}/${basename}-2x${extension} 2x`,
+    webpSrcSet: `${TAPE_ASSET_BASE}/${basename}.webp 1x, ${TAPE_ASSET_BASE}/${basename}-2x.webp 2x`,
+    width,
+    height
+  };
+}
+function responsiveAsset(fileName, width, height, desktopFileName, desktopWidth, desktopHeight) {
+  return __spreadProps(__spreadValues({}, source(fileName, width, height)), {
+    desktop: source(desktopFileName, desktopWidth, desktopHeight)
+  });
+}
+var tapeImageAssetDefinitions = {
+  "sticker-1": responsiveAsset("sticker-1.png", 110, 110, "sticker-1-medium-up.png", 230, 230),
+  "sticker-2-red": responsiveAsset(
+    "sticker-2-red.png",
+    80,
+    114,
+    "sticker-2-red-medium-up.png",
+    137,
+    194
+  ),
+  "sticker-3": responsiveAsset("sticker-3.png", 100, 65, "sticker-3-medium-up.png", 225, 146),
+  "sticker-4": responsiveAsset("sticker-4.png", 100, 56, "sticker-4-medium-up.png", 203, 113),
+  "sticker-5": responsiveAsset("sticker-5.png", 180, 62, "sticker-5-medium-up.png", 449, 154),
+  "sticker-6": responsiveAsset("sticker-6.png", 112, 98, "sticker-6-medium-up.png", 281, 247),
+  "sticker-7": responsiveAsset("sticker-7.png", 100, 63, "sticker-7-medium-up.png", 152, 95),
+  "sticker-8": responsiveAsset("sticker-8.png", 198, 35, "sticker-8-medium-up.png", 406, 72),
+  "sticker-9": responsiveAsset("sticker-9.png", 96, 31, "sticker-9-medium-up.png", 146, 48),
+  "sticker-10": responsiveAsset("sticker-10.png", 113, 26, "sticker-10-medium-up.png", 225, 51),
+  "sticker-11": responsiveAsset("sticker-11.png", 114, 39, "sticker-11-medium-up.png", 140, 46),
+  "sticker-12": responsiveAsset("sticker-12.png", 416, 58, "sticker-12-medium-up.png", 641, 89),
+  "tape-1": {
+    src: `${TAPE_ASSET_BASE}/tape-1.png`,
+    width: 300,
+    height: 68
+  },
+  "tape-2": responsiveAsset("tape-2.png", 82, 36, "tape-2-medium-up.png", 166, 74),
+  "tape-3": responsiveAsset("tape-3.png", 97, 38, "tape-3-medium-up.png", 202, 78),
+  "tape-4": source("tape-4-medium-up.png", 120, 53),
+  "tape-5": responsiveAsset("tape-5.png", 140, 36, "tape-5-medium-up.png", 276, 70),
+  "tape-6": responsiveAsset("tape-6.png", 103, 44, "tape-6-medium-up.png", 187, 85),
+  "tape-7": source("tape-7.png", 539, 112)
+};
+var tapeImageAssets = tapeImageAssetDefinitions;
+function isTapeImageVariant(value) {
+  return Object.prototype.hasOwnProperty.call(tapeImageAssets, value);
+}
+
+// src/components/ui/tape-picture.tsx
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+function resolveTapeAsset(asset) {
+  return typeof asset === "string" ? tapeImageAssets[asset] : asset;
+}
+function TapeImage(_a) {
+  var _b = _a, {
+    source: source2,
+    alt,
+    className,
+    draggable,
+    fill
+  } = _b, props = __objRest(_b, [
+    "source",
+    "alt",
+    "className",
+    "draggable",
+    "fill"
+  ]);
+  return /* @__PURE__ */ jsx2(
+    "img",
+    __spreadProps(__spreadValues({}, props), {
+      alt,
+      className: cn(fill && "block h-auto w-full", className),
+      draggable,
+      height: source2.height,
+      src: source2.src,
+      srcSet: source2.pngSrcSet,
+      width: source2.width
+    })
+  );
+}
+function TapePicture(_a) {
+  var _b = _a, {
+    asset,
+    alt = "",
+    className,
+    draggable = false,
+    media = "(min-width: 640px)",
+    pictureClassName,
+    fill = true
+  } = _b, props = __objRest(_b, [
+    "asset",
+    "alt",
+    "className",
+    "draggable",
+    "media",
+    "pictureClassName",
+    "fill"
+  ]);
+  var _a2, _b2;
+  const image = resolveTapeAsset(asset);
+  return /* @__PURE__ */ jsxs("picture", { className: pictureClassName, children: [
+    ((_a2 = image.desktop) == null ? void 0 : _a2.webpSrcSet) ? /* @__PURE__ */ jsx2("source", { media, type: "image/webp", srcSet: image.desktop.webpSrcSet }) : null,
+    ((_b2 = image.desktop) == null ? void 0 : _b2.pngSrcSet) ? /* @__PURE__ */ jsx2("source", { media, srcSet: image.desktop.pngSrcSet }) : null,
+    image.webpSrcSet ? /* @__PURE__ */ jsx2("source", { type: "image/webp", srcSet: image.webpSrcSet }) : null,
+    /* @__PURE__ */ jsx2(
+      TapeImage,
+      __spreadProps(__spreadValues({}, props), {
+        alt,
+        className,
+        draggable,
+        fill,
+        source: image
+      })
+    )
+  ] });
+}
+function TapeResponsivePictures(_a) {
+  var _b = _a, {
+    asset,
+    alt = "",
+    className,
+    draggable = false,
+    mobilePictureClassName,
+    desktopPictureClassName,
+    imageClassName
+  } = _b, props = __objRest(_b, [
+    "asset",
+    "alt",
+    "className",
+    "draggable",
+    "mobilePictureClassName",
+    "desktopPictureClassName",
+    "imageClassName"
+  ]);
+  const image = tapeImageAssets[asset];
+  const desktopImage = image.desktop;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("picture", { className: mobilePictureClassName, children: [
+      image.webpSrcSet ? /* @__PURE__ */ jsx2("source", { type: "image/webp", srcSet: image.webpSrcSet }) : null,
+      /* @__PURE__ */ jsx2(
+        TapeImage,
+        __spreadProps(__spreadValues({}, props), {
+          alt,
+          className: cn(imageClassName, className),
+          draggable,
+          fill: true,
+          source: image
+        })
+      )
+    ] }),
+    desktopImage ? /* @__PURE__ */ jsxs("picture", { className: desktopPictureClassName, children: [
+      desktopImage.webpSrcSet ? /* @__PURE__ */ jsx2("source", { type: "image/webp", srcSet: desktopImage.webpSrcSet }) : null,
+      /* @__PURE__ */ jsx2(
+        TapeImage,
+        __spreadProps(__spreadValues({}, props), {
+          alt,
+          className: cn(imageClassName, className),
+          draggable,
+          fill: true,
+          source: desktopImage
+        })
+      )
+    ] }) : null
+  ] });
+}
+
+// src/components/ui/media-decoration.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+function MediaDecoration(_a) {
+  var _b = _a, {
+    asset,
+    responsive = true,
+    media,
+    imageClassName,
+    mobilePictureClassName,
+    desktopPictureClassName,
+    className
+  } = _b, props = __objRest(_b, [
+    "asset",
+    "responsive",
+    "media",
+    "imageClassName",
+    "mobilePictureClassName",
+    "desktopPictureClassName",
+    "className"
+  ]);
+  return /* @__PURE__ */ jsx3(CardSlot, __spreadProps(__spreadValues({ className: cn(className) }, props), { children: responsive ? /* @__PURE__ */ jsx3(
+    TapeResponsivePictures,
+    {
+      asset,
+      mobilePictureClassName,
+      desktopPictureClassName,
+      imageClassName
+    }
+  ) : /* @__PURE__ */ jsx3(TapePicture, { asset, className: imageClassName, media }) }));
+}
+
+// src/components/ui/wide-torn-paper.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+function WideTornPaper({ bgColor = "currentColor" }) {
+  return /* @__PURE__ */ jsx4(
+    "svg",
+    {
+      viewBox: "0 0 515 273",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      className: "h-full w-full",
+      preserveAspectRatio: "none",
+      children: /* @__PURE__ */ jsx4(
+        "path",
+        {
+          d: "m511.365417 8.32919328c-.28777-.42141336-.59704-.83026805-.926156-1.22656406-.426693-.51351033-3.957662-2.69872002-3.957662-2.69872002l-1.012157-.55118636-1.304887-.11023727-1.52485-.10046941-.696271-.29443119.130655-.56932667-.461424-1.14842118s-.208386-.51351033-.603656-.63491087c-.525924-.16047197-1.061771-.30280364-1.607542-.42699499-1.089887-.24698731-2.217812-.41722714-3.373853-.50374247-.578848-.04325766-1.164311-.06418879-1.756389-.06418879h-16.055575l-2.197966.64886495-1.306541 1.32145184-1.480196-.36699243-1.65385.66142362-2.176466-.73538027-1.306542-.80794152-4.243779-.72142619h-103.344116l-5.289012.94190073-4.179279 1.91031422-2.677583-1.23075028h-2.613082l-3.416854.9377145-3.656662-1.61727844-8.206403-.94190073h-149.312874l-7.465478 1.32842888-6.096091 1.32145184-5.224512-1.76240092-3.483007.29303578-3.830317.73538028-4.005624.14651789-1.566196-.88189817-7.336478-1.18051558h-122.4179669c-2.2012742 0-4.3165482.30419905-6.2928988.86515326-.5573474.29722201-1.6240806 1.14283956-1.6240806 1.14283956l-.9840406.59304861-2.1285048.54560472-1.33300299.86515326-1.15273336 1.23354111.03142315 1.04655636-.39030857.59723484-1.20731041.65444658-.91623282 1.2656355s-1.46531098.45350776-1.8936581.81073233c-1.17919495 2.13497497-1.8374272 4.51554187-1.8374272 7.02448637v230.5982305l2.95212201 9.954844 3.6781621 5.398835 4.87554939 3.233162 5.0508575.954459 8.4462113 1.984271 9.9479069.49537 6.2035909 1.322847 7.4439782.385133 6.8353615 1.028416h76.9602502l5.573474-.661424 1.523195-.182798 1.480196-.918179 1.916812.880503 5.876128.881898h107.338165l3.395353-.421413 50.791384-.71724 1.304887-.073957 2.176467.478625 5.594974.312572 36.177965.421413 16.020844-.807942 40.130667-2.20335 2.90416 1.765192 5.659475-.305594 3.83197-.722822 2.601506.37397 4.190855-.227452 2.872737-.954459 12.711491-.733985 5.470935.263732 4.978088.175821 6.08286-.640492 3.306046-.138145 8.112133.265127 9.284713-.994926 4.19251-3.215021 4.55801-1.193075 2.525429-1.982875 2.045812-3.563873 1.741504-1.028416 3.570662.147913 4.149509-4.703922 1.218888-3.768998 2.163235-2.951289 1.218888-4.187621 1.218887-4.113664 1.695196-4.209948v-215.6994535c0-3.0280365-.959233-5.8690881-2.634583-8.31523922",
+          fill: bgColor,
+          fillRule: "evenodd",
+          transform: "translate(.070619 .762599)"
+        }
+      )
+    }
+  );
+}
+
+// src/components/ui/torn-card.module.css
+var torn_card_default = {};
+
+// src/components/ui/torn-card.tsx
+import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+var VARIANT_CONFIG = {
+  a: {
+    rotation: "2deg",
+    tapePosition: "top-right",
+    showSticker: false,
+    tapeAsset: "tape-3"
+  },
+  b: {
+    rotation: "-1.5deg",
+    tapePosition: "top-right",
+    showSticker: false,
+    tapeAsset: "tape-2"
+  },
+  c: {
+    rotation: "3deg",
+    tapePosition: "bottom-center",
+    showSticker: true,
+    tapeAsset: "tape-2",
+    stickerAsset: "sticker-10"
+  }
+};
+function TornCard(_a) {
+  var _b = _a, {
+    ref,
+    className,
+    variant = "a",
+    rotation,
+    background = "#efefef",
+    showTape = true,
+    showSticker,
+    tapePosition,
+    children
+  } = _b, props = __objRest(_b, [
+    "ref",
+    "className",
+    "variant",
+    "rotation",
+    "background",
+    "showTape",
+    "showSticker",
+    "tapePosition",
+    "children"
+  ]);
+  const config = VARIANT_CONFIG[variant];
+  const resolvedRotation = rotation != null ? rotation : config.rotation;
+  const resolvedTapePosition = tapePosition != null ? tapePosition : config.tapePosition;
+  const resolvedShowSticker = showSticker != null ? showSticker : config.showSticker;
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    __spreadProps(__spreadValues({
+      ref,
+      "data-slot": "card",
+      "data-variant": variant,
+      style: {
+        transform: `rotate(${resolvedRotation})`,
+        filter: "drop-shadow(2px 2px 2px rgba(0,0,0,.3))"
+      },
+      className: cn("group/card text-chaos-black relative z-10 w-full text-center", className)
+    }, props), {
+      children: [
+        /* @__PURE__ */ jsx5("div", { className: "pointer-events-none absolute inset-0 z-0 h-full w-full select-none", children: /* @__PURE__ */ jsx5(WideTornPaper, { bgColor: background }) }),
+        /* @__PURE__ */ jsxs2("div", { className: "@container w-full", children: [
+          showTape && /* @__PURE__ */ jsx5(
+            MediaDecoration,
+            {
+              position: resolvedTapePosition,
+              asset: config.tapeAsset,
+              mobilePictureClassName: cn(torn_card_default.tape, torn_card_default.imgMobile),
+              desktopPictureClassName: cn(torn_card_default.tape, torn_card_default.imgDesktop)
+            }
+          ),
+          resolvedShowSticker && config.stickerAsset ? /* @__PURE__ */ jsx5(
+            MediaDecoration,
+            {
+              position: "top-right",
+              asset: config.stickerAsset,
+              mobilePictureClassName: torn_card_default.imgMobile,
+              desktopPictureClassName: torn_card_default.imgDesktop
+            }
+          ) : null,
+          /* @__PURE__ */ jsx5("div", { className: cn(torn_card_default.alertContent, "relative z-10 flex flex-col gap-4"), children: /* @__PURE__ */ jsx5("div", { className: "flex flex-col gap-2", children }) })
+        ] })
+      ]
+    })
+  );
+}
+function isCssColor(value) {
+  return value.startsWith("#") || value.startsWith("rgb") || value.startsWith("var(") || value.startsWith("hsl");
+}
+function TornCardTitle(_a) {
+  var _b = _a, {
+    className,
+    textColor = "text-blue",
+    style
+  } = _b, props = __objRest(_b, [
+    "className",
+    "textColor",
+    "style"
+  ]);
+  const colorStyle = textColor && isCssColor(textColor) ? { color: textColor } : void 0;
+  const twClass = textColor && !isCssColor(textColor) ? textColor : "";
+  return /* @__PURE__ */ jsx5(
+    "h2",
+    __spreadValues({
+      "data-slot": "card-title",
+      className: cn("splat-heading text-2xl", twClass, className),
+      style: colorStyle ? __spreadValues(__spreadValues({}, colorStyle), style) : style
+    }, props)
+  );
+}
+function TornCardDescription(_a) {
+  var _b = _a, {
+    className,
+    textColor,
+    style
+  } = _b, props = __objRest(_b, [
+    "className",
+    "textColor",
+    "style"
+  ]);
+  const colorStyle = textColor && isCssColor(textColor) ? { color: textColor } : void 0;
+  const twClass = textColor && !isCssColor(textColor) ? textColor : "";
+  return /* @__PURE__ */ jsx5(
+    "p",
+    __spreadValues({
+      "data-slot": "card-description",
+      className: cn("text-sm opacity-90", twClass, className),
+      style: colorStyle ? __spreadValues(__spreadValues({}, colorStyle), style) : style
+    }, props)
+  );
+}
+
+// src/components/ui/alert.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+var ALERT_VARIANT_MAP = {
+  default: {
+    tornVariant: "b",
+    background: void 0
+  },
+  destructive: {
+    tornVariant: "c",
+    background: "var(--color-red)"
+  }
+};
+function Alert(_a) {
+  var _b = _a, {
+    variant = "default",
+    showTape = true,
+    background,
+    className,
+    children
+  } = _b, props = __objRest(_b, [
+    "variant",
+    "showTape",
+    "background",
+    "className",
+    "children"
+  ]);
+  const config = ALERT_VARIANT_MAP[variant];
+  return /* @__PURE__ */ jsx6(
+    TornCard,
+    __spreadProps(__spreadValues({
+      variant: config.tornVariant,
+      showTape,
+      background: background != null ? background : config.background,
+      className
+    }, props), {
+      children
+    })
+  );
+}
+function AlertTitle(_a) {
+  var _b = _a, {
+    className,
+    textColor = "text-blue",
+    style
+  } = _b, props = __objRest(_b, [
+    "className",
+    "textColor",
+    "style"
+  ]);
+  return /* @__PURE__ */ jsx6(
+    "h2",
+    __spreadValues({
+      "data-slot": "alert-title",
+      className: cn(
+        "splat-heading text-2xl",
+        (textColor == null ? void 0 : textColor.startsWith("#")) || (textColor == null ? void 0 : textColor.startsWith("rgb")) ? "" : textColor,
+        className
+      ),
+      style: textColor && (textColor.startsWith("#") || textColor.startsWith("rgb")) ? __spreadValues({ color: textColor }, style) : style
+    }, props)
+  );
+}
+function AlertDescription(_a) {
+  var _b = _a, {
+    className,
+    textColor,
+    style
+  } = _b, props = __objRest(_b, [
+    "className",
+    "textColor",
+    "style"
+  ]);
+  return /* @__PURE__ */ jsx6(
+    "p",
+    __spreadValues({
+      "data-slot": "alert-description",
+      className: cn("text-sm opacity-90", className),
+      style: textColor ? __spreadValues({ color: textColor }, style) : style
+    }, props)
+  );
+}
+
+// src/components/ui/asset-image.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+function AssetImage(_a) {
+  var _b = _a, {
+    asset,
+    alt,
+    className,
+    decorative = false,
+    draggable = false,
+    fit,
+    aspectRatio,
+    fill = false,
+    style
+  } = _b, props = __objRest(_b, [
+    "asset",
+    "alt",
+    "className",
+    "decorative",
+    "draggable",
+    "fit",
+    "aspectRatio",
+    "fill",
+    "style"
+  ]);
+  return (
+    // eslint-disable-next-line @next/next/no-img-element -- component library assets use known public dimensions and caller-controlled layout.
+    /* @__PURE__ */ jsx7(
+      "img",
+      __spreadProps(__spreadValues({}, props), {
+        alt: decorative ? "" : alt != null ? alt : asset.alt,
+        "aria-hidden": decorative ? true : props["aria-hidden"],
+        className: cn(fill && "block h-full w-full", className),
+        draggable,
+        height: asset.height,
+        src: asset.src,
+        style: __spreadValues(__spreadValues(__spreadValues({}, fit ? { objectFit: fit } : {}), aspectRatio ? { aspectRatio } : {}), style),
+        width: asset.width
+      })
+    )
+  );
+}
+
+// src/components/ui/black-tape-container.module.css
+var black_tape_container_default = {};
+
+// src/components/ui/black-tape-container.tsx
+import { jsx as jsx8 } from "react/jsx-runtime";
+function BlackTapeContainer(_a) {
+  var _b = _a, {
+    className,
+    children,
+    tapeVariant,
+    noVerticalPadding = false
+  } = _b, props = __objRest(_b, [
+    "className",
+    "children",
+    "tapeVariant",
+    "noVerticalPadding"
+  ]);
+  return /* @__PURE__ */ jsx8(
+    "div",
+    __spreadProps(__spreadValues({
+      className: cn(
+        black_tape_container_default.blackTapeContainer,
+        tapeVariant === "yellow" && black_tape_container_default.tapeYellow,
+        noVerticalPadding && black_tape_container_default.noVerticalPadding,
+        className
+      )
+    }, props), {
+      children: /* @__PURE__ */ jsx8("div", { className: black_tape_container_default.blackTapeContainerInner, children })
+    })
+  );
+}
+
+// src/components/ui/button-arrow.module.css
+var button_arrow_default = {};
+
+// src/components/ui/button-arrow.tsx
+import { jsx as jsx9, jsxs as jsxs3 } from "react/jsx-runtime";
+function ButtonArrow(_a) {
+  var _b = _a, { icon, href, className, children } = _b, props = __objRest(_b, ["icon", "href", "className", "children"]);
+  const iconNode = icon != null ? icon : /* @__PURE__ */ jsx9("svg", { viewBox: "0 0 10 16", className: button_arrow_default.icon, "aria-hidden": "true", focusable: "false", children: /* @__PURE__ */ jsx9("path", { d: "M1 1 L9 8 L1 15", stroke: "currentColor", strokeWidth: "2", fill: "none", strokeLinecap: "round", strokeLinejoin: "round" }) });
+  if (href) {
+    return /* @__PURE__ */ jsxs3("a", __spreadProps(__spreadValues({ className: cn(button_arrow_default.buttonArrow, className), href }, props), { children: [
+      children,
+      /* @__PURE__ */ jsx9("span", { className: button_arrow_default.iconWrap, children: iconNode })
+    ] }));
+  }
+  return /* @__PURE__ */ jsxs3("button", __spreadProps(__spreadValues({ className: cn(button_arrow_default.buttonArrow, className), type: "button" }, props), { children: [
+    children,
+    /* @__PURE__ */ jsx9("span", { className: button_arrow_default.iconWrap, children: iconNode })
+  ] }));
+}
+
+// src/components/ui/button-drip.module.css
+var button_drip_default = {};
+
+// src/components/ui/button-drip.tsx
+import { jsx as jsx10, jsxs as jsxs4 } from "react/jsx-runtime";
+function ButtonDrip(_a) {
+  var _b = _a, {
+    icon,
+    hoverText,
+    accentColors,
+    className,
+    children,
+    type = "button"
+  } = _b, props = __objRest(_b, [
+    "icon",
+    "hoverText",
+    "accentColors",
+    "className",
+    "children",
+    "type"
+  ]);
+  return /* @__PURE__ */ jsxs4(
+    "button",
+    __spreadProps(__spreadValues({
+      type,
+      className: cn(button_drip_default.button, accentColors && button_drip_default.accentColors, className)
+    }, props), {
+      children: [
+        /* @__PURE__ */ jsxs4("span", { className: button_drip_default.content, children: [
+          icon ? /* @__PURE__ */ jsx10("span", { className: button_drip_default.icon, children: icon }) : null,
+          /* @__PURE__ */ jsx10("span", { children })
+        ] }),
+        /* @__PURE__ */ jsx10("span", { className: button_drip_default.hoverContent, children: /* @__PURE__ */ jsx10("span", { children: hoverText != null ? hoverText : children }) })
+      ]
+    })
+  );
+}
+
+// src/components/ui/character-assets.ts
+var CHARACTER_ASSET_BASE = "/_images/characters";
+var characterImageAssets = {
+  inkling: {
+    id: "inkling",
+    src: `${CHARACTER_ASSET_BASE}/char-8.png`,
+    alt: "Inkling character reference artwork",
+    width: 421,
+    height: 451
+  },
+  octoling: {
+    id: "octoling",
+    src: `${CHARACTER_ASSET_BASE}/char-10.png`,
+    alt: "Octoling character reference artwork",
+    width: 425,
+    height: 461
+  },
+  salmonid: {
+    id: "salmonid",
+    src: `${CHARACTER_ASSET_BASE}/salmonid.png`,
+    alt: "Salmonid character reference artwork",
+    width: 331,
+    height: 405
+  },
+  gamePack: {
+    id: "game-pack",
+    src: `${CHARACTER_ASSET_BASE}/game-pack.png`,
+    alt: "Game pack reference artwork",
+    width: 150,
+    height: 243
+  },
+  char2: {
+    id: "char-2",
+    src: `${CHARACTER_ASSET_BASE}/char-2.png`,
+    alt: "Character reference artwork 2",
+    width: 261,
+    height: 220
+  },
+  char3: {
+    id: "char-3",
+    src: `${CHARACTER_ASSET_BASE}/char-3.png`,
+    alt: "Character reference artwork 3",
+    width: 207,
+    height: 238
+  },
+  char4: {
+    id: "char-4",
+    src: `${CHARACTER_ASSET_BASE}/char-4.png`,
+    alt: "Character reference artwork 4",
+    width: 515,
+    height: 390
+  },
+  char5: {
+    id: "char-5",
+    src: `${CHARACTER_ASSET_BASE}/char-5.png`,
+    alt: "Character reference artwork 5",
+    width: 295,
+    height: 104
+  },
+  char7: {
+    id: "char-7",
+    src: `${CHARACTER_ASSET_BASE}/char-7.png`,
+    alt: "Character reference artwork 7",
+    width: 343,
+    height: 300
+  },
+  char11: {
+    id: "char-11",
+    src: `${CHARACTER_ASSET_BASE}/char-11.png`,
+    alt: "Character reference artwork 11",
+    width: 346,
+    height: 507
+  },
+  char12: {
+    id: "char-12",
+    src: `${CHARACTER_ASSET_BASE}/char-12.png`,
+    alt: "Character reference artwork 12",
+    width: 375,
+    height: 303
+  },
+  char13: {
+    id: "char-13",
+    src: `${CHARACTER_ASSET_BASE}/char-13.png`,
+    alt: "Character reference artwork 13",
+    width: 607,
+    height: 555
+  },
+  char14: {
+    id: "char-14",
+    src: `${CHARACTER_ASSET_BASE}/char-14.png`,
+    alt: "Character reference artwork 14",
+    width: 858,
+    height: 430
+  },
+  char15: {
+    id: "char-15",
+    src: `${CHARACTER_ASSET_BASE}/char-15.png`,
+    alt: "Character reference artwork 15",
+    width: 570,
+    height: 188
+  },
+  char17: {
+    id: "char-17",
+    src: `${CHARACTER_ASSET_BASE}/char-17.png`,
+    alt: "Character reference artwork 17",
+    width: 450,
+    height: 276
+  },
+  char18: {
+    id: "char-18",
+    src: `${CHARACTER_ASSET_BASE}/char-18.png`,
+    alt: "Character reference artwork 18",
+    width: 343,
+    height: 310
+  }
+};
+var pageTransitionCharacterAssets = {
+  home: characterImageAssets.inkling,
+  about: characterImageAssets.octoling,
+  weapons: characterImageAssets.salmonid
+};
+
+// src/components/ui/event-assets.ts
+var EVENT_ASSET_BASE = "/_images/events";
+var eventImageAssets = {
+  bigRunCallout: {
+    id: "big-run-callout",
+    src: `${EVENT_ASSET_BASE}/big-run-callout.jpg`,
+    alt: "Event callout reference screenshot",
+    width: 382,
+    height: 215
+  },
+  goldenEgg: {
+    id: "golden-egg",
+    src: `${EVENT_ASSET_BASE}/golden-egg.png`,
+    alt: "Golden egg reference icon",
+    width: 52,
+    height: 46
+  },
+  splatnetBlade: {
+    id: "splatnet-blade",
+    src: `${EVENT_ASSET_BASE}/splatnet-blade.jpg`,
+    alt: "Stage event reference artwork",
+    width: 558,
+    height: 313
+  },
+  splatnetNextPage: {
+    id: "splatnet-next-page",
+    src: `${EVENT_ASSET_BASE}/splatnet-next-page.png`,
+    alt: "Graffiti event panel background",
+    width: 342,
+    height: 221
+  }
+};
+
+// src/components/ui/event-callout.module.css
+var event_callout_default = {};
+
+// src/components/ui/event-callout.tsx
+import { jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
+function EventCallout(_a) {
+  var _b = _a, {
+    className,
+    eyebrow,
+    title,
+    description,
+    media = eventImageAssets.bigRunCallout,
+    background = eventImageAssets.splatnetNextPage,
+    icon = eventImageAssets.goldenEgg,
+    action,
+    mediaPriority = false
+  } = _b, props = __objRest(_b, [
+    "className",
+    "eyebrow",
+    "title",
+    "description",
+    "media",
+    "background",
+    "icon",
+    "action",
+    "mediaPriority"
+  ]);
+  return /* @__PURE__ */ jsxs5("article", __spreadProps(__spreadValues({ className: cn(event_callout_default.callout, className) }, props), { children: [
+    /* @__PURE__ */ jsx11(AssetImage, { asset: background, className: event_callout_default.background, loading: "lazy", decorative: true }),
+    /* @__PURE__ */ jsxs5("div", { className: event_callout_default.content, children: [
+      /* @__PURE__ */ jsxs5("div", { className: event_callout_default.mediaFrame, children: [
+        /* @__PURE__ */ jsx11(
+          AssetImage,
+          {
+            asset: media,
+            className: event_callout_default.media,
+            loading: mediaPriority ? "eager" : "lazy"
+          }
+        ),
+        /* @__PURE__ */ jsx11("span", { className: event_callout_default.iconBadge, "aria-hidden": "true", children: /* @__PURE__ */ jsx11(AssetImage, { asset: icon, loading: "lazy", decorative: true }) })
+      ] }),
+      /* @__PURE__ */ jsxs5("div", { className: event_callout_default.body, children: [
+        eyebrow && /* @__PURE__ */ jsx11("p", { className: event_callout_default.eyebrow, children: eyebrow }),
+        /* @__PURE__ */ jsx11("h3", { className: event_callout_default.title, children: title }),
+        description && /* @__PURE__ */ jsx11("p", { className: event_callout_default.description, children: description }),
+        action && /* @__PURE__ */ jsx11("div", { className: event_callout_default.action, children: action })
+      ] })
+    ] })
+  ] }));
+}
+
+// src/lib/ui-tokens.ts
+var layoutTokens = {
+  bannerDividerClearance: "clamp(8rem,10vw,11.5rem)",
+  demoContentMaxWidth: "64rem",
+  demoNarrowContentMaxWidth: "48rem",
+  feedCarouselItemWidth: "clamp(16.5rem, 19vw, 23rem)",
+  trailerContentMaxWidth: "1440px",
+  trailerMediaWidthLarge: "58.333%",
+  trailerMediaMaxWidth: "840px"
+};
+var motionTokens = {
+  fast: "calc(var(--duration-factor, 1) * 0.2s)",
+  standard: "calc(var(--duration-factor, 1) * 0.4s)",
+  slow: "calc(var(--duration-factor, 1) * 0.6s)",
+  dialogCloseDelayMs: 1200,
+  dialogDurationInMs: 700
+};
+
+// src/components/ui/demo-layout.tsx
+import { jsx as jsx12 } from "react/jsx-runtime";
+function DemoContent(_a) {
+  var _b = _a, { width = "default", className, style } = _b, props = __objRest(_b, ["width", "className", "style"]);
+  return /* @__PURE__ */ jsx12(
+    "div",
+    __spreadValues({
+      className: cn("relative z-20 w-full space-y-16", className),
+      style: __spreadValues({
+        maxWidth: width === "narrow" ? layoutTokens.demoNarrowContentMaxWidth : layoutTokens.demoContentMaxWidth
+      }, style)
+    }, props)
+  );
+}
+function DemoExampleGroup(_a) {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx12("div", __spreadValues({ className: cn("space-y-6", className) }, props));
+}
+
+// src/components/ui/github-mark.tsx
+import { jsx as jsx13 } from "react/jsx-runtime";
+function GitHubMark(props) {
+  return /* @__PURE__ */ jsx13("svg", __spreadProps(__spreadValues({ viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true" }, props), { children: /* @__PURE__ */ jsx13("path", { d: "M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0 0 24 12c0-6.63-5.37-12-12-12z" }) }));
+}
+
+// src/components/ui/heading-tape.module.css
+var heading_tape_default = {};
+
+// src/components/ui/heading-tape.tsx
+import { jsx as jsx14, jsxs as jsxs6 } from "react/jsx-runtime";
+var defaultDecorations = [
+  {
+    id: "sticker-8",
+    position: "bottom-left",
+    rotate: "-2deg",
+    inlineOffset: "-19px",
+    blockOffset: "-17px",
+    safeArea: {
+      inlineStart: "19px",
+      blockEnd: "17px"
+    },
+    mobile: {
+      src: "/_images/tape-assets/sticker-8.png",
+      srcSet: "/_images/tape-assets/sticker-8.webp 1x, /_images/tape-assets/sticker-8-2x.webp 2x",
+      width: 198,
+      height: 35,
+      alt: ""
+    },
+    desktop: {
+      src: "/_images/tape-assets/sticker-8-medium-up.png",
+      srcSet: "/_images/tape-assets/sticker-8-medium-up.webp 1x, /_images/tape-assets/sticker-8-medium-up-2x.webp 2x",
+      width: 406,
+      height: 71.5,
+      alt: ""
+    }
+  },
+  {
+    id: "sticker-12",
+    position: "top-right",
+    rotate: "1deg",
+    inlineOffset: "-17px",
+    blockOffset: "-15px",
+    safeArea: {
+      inlineEnd: "17px",
+      blockStart: "15px"
+    },
+    mobile: {
+      src: "/_images/tape-assets/sticker-12.png",
+      srcSet: "/_images/tape-assets/sticker-12.webp 1x, /_images/tape-assets/sticker-12-2x.webp 2x",
+      width: 416,
+      height: 58,
+      alt: ""
+    },
+    desktop: {
+      src: "/_images/tape-assets/sticker-12-medium-up.png",
+      srcSet: "/_images/tape-assets/sticker-12-medium-up.webp 1x, /_images/tape-assets/sticker-12-medium-up-2x.webp 2x",
+      width: 641,
+      height: 89,
+      alt: ""
+    }
+  }
+];
+var decorationSets = {
+  stickers: defaultDecorations,
+  none: []
+};
+var decorationPositionClassName = {
+  "top-left": heading_tape_default.decorationTopLeft,
+  "top-right": heading_tape_default.decorationTopRight,
+  "bottom-left": heading_tape_default.decorationBottomLeft,
+  "bottom-right": heading_tape_default.decorationBottomRight
+};
+var safeAreaCssVariable = {
+  inlineStart: "--heading-tape-safe-inline-start",
+  inlineEnd: "--heading-tape-safe-inline-end",
+  blockStart: "--heading-tape-safe-block-start",
+  blockEnd: "--heading-tape-safe-block-end"
+};
+function cssMax(values) {
+  const resolvedValues = values.filter((value) => Boolean(value));
+  if (resolvedValues.length === 0) {
+    return "0px";
+  }
+  return resolvedValues.length === 1 ? resolvedValues[0] : `max(${resolvedValues.join(", ")})`;
+}
+function getDecorationSafeAreaStyle(decorations) {
+  return Object.fromEntries(
+    Object.keys(safeAreaCssVariable).map((edge) => [
+      safeAreaCssVariable[edge],
+      cssMax(decorations.map((decoration) => {
+        var _a;
+        return (_a = decoration.safeArea) == null ? void 0 : _a[edge];
+      }))
+    ])
+  );
+}
+function HeadingTapeDecorationSlot({ decoration }) {
+  var _a, _b, _c;
+  return /* @__PURE__ */ jsxs6(
+    "span",
+    {
+      "aria-hidden": "true",
+      "data-slot": "heading-tape-decoration",
+      "data-position": decoration.position,
+      className: cn(
+        heading_tape_default.headingTapeDecoration,
+        decorationPositionClassName[decoration.position],
+        decoration.className
+      ),
+      style: __spreadValues({
+        "--heading-tape-decoration-max-inline-size": decoration.maxInlineSize,
+        "--heading-tape-decoration-inline-size": decoration.inlineSize,
+        "--heading-tape-decoration-inline-offset": decoration.inlineOffset,
+        "--heading-tape-decoration-block-offset": decoration.blockOffset,
+        "--heading-tape-decoration-rotate": (_a = decoration.rotate) != null ? _a : "0deg"
+      }, decoration.style),
+      children: [
+        /* @__PURE__ */ jsx14(
+          "img",
+          {
+            className: cn(
+              heading_tape_default.headingTapeDecorationImage,
+              heading_tape_default.headingTapeDecorationImageMobile,
+              decoration.imageClassName
+            ),
+            alt: (_b = decoration.mobile.alt) != null ? _b : "",
+            src: decoration.mobile.src,
+            srcSet: decoration.mobile.srcSet,
+            width: decoration.mobile.width,
+            height: decoration.mobile.height
+          }
+        ),
+        decoration.desktop && // eslint-disable-next-line @next/next/no-img-element
+        /* @__PURE__ */ jsx14(
+          "img",
+          {
+            className: cn(
+              heading_tape_default.headingTapeDecorationImage,
+              heading_tape_default.headingTapeDecorationImageDesktop,
+              decoration.imageClassName
+            ),
+            alt: (_c = decoration.desktop.alt) != null ? _c : "",
+            src: decoration.desktop.src,
+            srcSet: decoration.desktop.srcSet,
+            width: decoration.desktop.width,
+            height: decoration.desktop.height
+          }
+        )
+      ]
+    }
+  );
+}
+function HeadingTape(_a) {
+  var _b = _a, {
+    children,
+    className,
+    color,
+    decorationSet = "stickers",
+    decorations,
+    overlapTop = false,
+    marginOffset = 5,
+    size = "default",
+    style
+  } = _b, props = __objRest(_b, [
+    "children",
+    "className",
+    "color",
+    "decorationSet",
+    "decorations",
+    "overlapTop",
+    "marginOffset",
+    "size",
+    "style"
+  ]);
+  void color;
+  const resolvedDecorations = decorations === false ? [] : decorations != null ? decorations : decorationSets[decorationSet];
+  const decorationSafeAreaStyle = getDecorationSafeAreaStyle(resolvedDecorations);
+  return /* @__PURE__ */ jsx14(
+    "div",
+    __spreadProps(__spreadValues({
+      "data-slot": "heading-tape",
+      "data-has-decorations": resolvedDecorations.length > 0 ? "true" : "false",
+      "data-size": size,
+      className: cn(
+        heading_tape_default.headingTapeSection,
+        size === "compact" && heading_tape_default.compact,
+        overlapTop && heading_tape_default.overlapTop,
+        className
+      ),
+      style: __spreadValues(__spreadValues({
+        "--margin-offset": String(marginOffset)
+      }, decorationSafeAreaStyle), style)
+    }, props), {
+      children: /* @__PURE__ */ jsxs6("span", { className: heading_tape_default.headingTapeContainer, children: [
+        resolvedDecorations.length > 0 && /* @__PURE__ */ jsx14("span", { className: heading_tape_default.headingTapeDecorations, children: resolvedDecorations.map((decoration) => /* @__PURE__ */ jsx14(HeadingTapeDecorationSlot, { decoration }, decoration.id)) }),
+        /* @__PURE__ */ jsx14("span", { className: heading_tape_default.headingTapeText, children })
+      ] })
+    })
+  );
+}
+
+// src/components/ui/input.tsx
+import { Input as InputPrimitive } from "@base-ui/react/input";
+import { jsx as jsx15 } from "react/jsx-runtime";
+function Input(_a) {
+  var _b = _a, { className, type } = _b, props = __objRest(_b, ["className", "type"]);
+  return /* @__PURE__ */ jsx15(
+    InputPrimitive,
+    __spreadValues({
+      type,
+      "data-slot": "input",
+      className: cn(
+        "field-cut h-10 w-full min-w-0 border-2 border-foreground/30 bg-card px-3 py-2 text-base font-medium transition-all outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground placeholder:uppercase placeholder:text-xs placeholder:tracking-wider focus-visible:border-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive md:text-sm",
+        className
+      )
+    }, props)
+  );
+}
+
+// src/components/ui/news-assets.ts
+var newsStapleAssets = {
+  left: {
+    src: "/_images/news/news-staple-left.png",
+    width: 75,
+    height: 48
+  },
+  right: {
+    src: "/_images/news/news-staple-right.png",
+    width: 45,
+    height: 17
+  }
+};
+
+// src/components/ui/tape.tsx
+import { jsx as jsx16, jsxs as jsxs7 } from "react/jsx-runtime";
+function Tape(_a) {
+  var _b = _a, {
+    className,
+    variant = "tape-1",
+    position = "top-left",
+    children
+  } = _b, props = __objRest(_b, [
+    "className",
+    "variant",
+    "position",
+    "children"
+  ]);
+  const hasCustomPositioning = (className == null ? void 0 : className.includes("top-")) || (className == null ? void 0 : className.includes("bottom-")) || (className == null ? void 0 : className.includes("left-")) || (className == null ? void 0 : className.includes("right-")) || (className == null ? void 0 : className.includes("translate-"));
+  return /* @__PURE__ */ jsxs7(
+    "div",
+    __spreadProps(__spreadValues({
+      "data-slot": "tape",
+      "data-variant": variant,
+      "data-position": position,
+      className: cn(
+        "pointer-events-none absolute z-20 select-none",
+        !hasCustomPositioning && [
+          "w-[35%] max-w-[120px] data-[position=top-left]:-top-3 data-[position=top-left]:-left-2 data-[position=top-left]:rotate-[-8deg]",
+          "w-[35%] max-w-[120px] data-[position=top-right]:-top-3 data-[position=top-right]:-right-2 data-[position=top-right]:rotate-[6deg]",
+          "w-[35%] max-w-[120px] data-[position=center]:top-1/2 data-[position=center]:left-1/2 data-[position=center]:-translate-x-1/2 data-[position=center]:-translate-y-1/2 data-[position=center]:rotate-[-3deg]",
+          "w-[35%] max-w-[120px] data-[position=bottom-left]:-bottom-3 data-[position=bottom-left]:-left-2 data-[position=bottom-left]:rotate-[4deg]",
+          "w-[35%] max-w-[120px] data-[position=bottom-right]:-right-2 data-[position=bottom-right]:-bottom-3 data-[position=bottom-right]:rotate-[-5deg]",
+          "w-[35%] max-w-[120px] data-[position=news]:-top-5 data-[position=news]:left-6 data-[position=news]:origin-center data-[position=news]:[transform:translate(0,-50%)_rotate(-12deg)]",
+          "w-[35%] max-w-[120px] data-[position=event]:-top-5 data-[position=event]:right-6 data-[position=event]:origin-center data-[position=event]:[transform:translate(0,-50%)_rotate(12deg)]"
+        ],
+        className
+      )
+    }, props), {
+      children: [
+        /* @__PURE__ */ jsx16(TapePicture, { asset: variant, className: "drop-shadow-[1px_2px_1.5px_rgba(0,0,0,0.28)]" }),
+        children
+      ]
+    })
+  );
+}
+function Staple(_a) {
+  var _b = _a, { className, position = "left" } = _b, props = __objRest(_b, ["className", "position"]);
+  const asset = position === "left" ? newsStapleAssets.left : newsStapleAssets.right;
+  const hasCustomPositioning = (className == null ? void 0 : className.includes("top-")) || (className == null ? void 0 : className.includes("bottom-")) || (className == null ? void 0 : className.includes("left-")) || (className == null ? void 0 : className.includes("right-")) || (className == null ? void 0 : className.includes("translate-"));
+  return /* @__PURE__ */ jsx16(
+    "div",
+    __spreadProps(__spreadValues({
+      "data-slot": "staple",
+      "data-position": position,
+      className: cn(
+        "pointer-events-none absolute z-30 select-none",
+        !hasCustomPositioning && [
+          "w-[14%] max-w-[90px] data-[position=left]:bottom-0 data-[position=left]:left-[20px]",
+          "w-[10%] max-w-[90px] data-[position=right]:right-[20px] data-[position=right]:bottom-0",
+          "w-[10%] max-w-[90px] rotate-90 data-[position=top]:top-0 data-[position=top]:left-[20px]",
+          "w-[10%] max-w-[90px] rotate-90 data-[position=bottom]:bottom-0 data-[position=bottom]:left-[20px]"
+        ],
+        className
+      )
+    }, props), {
+      children: /* @__PURE__ */ jsx16("picture", { children: /* @__PURE__ */ jsx16(
+        "img",
+        {
+          alt: "",
+          className: cn(
+            "block h-auto w-full",
+            position === "left" ? "drop-shadow-[1px_2px_2px_rgba(0,0,0,0.25)]" : "drop-shadow-[1px_1.5px_1.5px_rgba(0,0,0,0.25)]"
+          ),
+          decoding: "async",
+          draggable: false,
+          height: asset.height,
+          src: asset.src,
+          width: asset.width
+        }
+      ) })
+    })
+  );
+}
+
+// src/components/ui/marquee.tsx
+import { Fragment as Fragment2, jsx as jsx17, jsxs as jsxs8 } from "react/jsx-runtime";
+function Marquee(_a) {
+  var _b = _a, {
+    className,
+    speed = 30,
+    direction = "left",
+    pauseOnHover = true,
+    variant = "default",
+    showEdgeTape = false,
+    tapeVariant = "tape-2",
+    children
+  } = _b, props = __objRest(_b, [
+    "className",
+    "speed",
+    "direction",
+    "pauseOnHover",
+    "variant",
+    "showEdgeTape",
+    "tapeVariant",
+    "children"
+  ]);
+  return /* @__PURE__ */ jsxs8(
+    "div",
+    __spreadProps(__spreadValues({
+      "data-slot": "marquee",
+      "data-variant": variant,
+      className: cn(
+        "group/marquee relative flex overflow-hidden select-none",
+        "data-[variant=tape]:bg-primary data-[variant=tape]:text-primary-foreground data-[variant=tape]:border-foreground data-[variant=tape]:-rotate-[2deg] data-[variant=tape]:border-y-2",
+        "data-[variant=warning]:text-chaos-black data-[variant=warning]:border-foreground data-[variant=warning]:border-y-2 data-[variant=warning]:bg-[repeating-linear-gradient(45deg,var(--color-yellow),var(--color-yellow)_12px,var(--color-black)_12px,var(--color-black)_24px)]",
+        "data-[variant=default]:bg-foreground data-[variant=default]:text-background data-[variant=default]:border-foreground data-[variant=default]:border-y-2",
+        className
+      )
+    }, props), {
+      children: [
+        showEdgeTape && /* @__PURE__ */ jsxs8(Fragment2, { children: [
+          /* @__PURE__ */ jsx17(Tape, { variant: tapeVariant, position: "top-left", className: "z-30" }),
+          /* @__PURE__ */ jsx17(Tape, { variant: tapeVariant, position: "top-right", className: "z-30" })
+        ] }),
+        /* @__PURE__ */ jsxs8(
+          "div",
+          {
+            className: cn(
+              "splat-heading flex w-max items-center gap-8 px-8 py-2 text-sm text-[24px] font-black tracking-widest whitespace-nowrap uppercase",
+              "[animation:marquee_linear_infinite]",
+              pauseOnHover && "group-hover/marquee:[animation-play-state:paused]",
+              direction === "right" && "[animation-direction:reverse]"
+            ),
+            style: { "--marquee-duration": `${speed}s` },
+            children: [
+              children,
+              /* @__PURE__ */ jsx17("span", { "aria-hidden": "true", children })
+            ]
+          }
+        )
+      ]
+    })
+  );
+}
+function MarqueeItem(_a) {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx17(
+    "span",
+    __spreadValues({
+      "data-slot": "marquee-item",
+      className: cn("inline-flex shrink-0 items-center gap-2", className)
+    }, props)
+  );
+}
+
+// src/components/ui/nav-chevron.tsx
+import { jsx as jsx18 } from "react/jsx-runtime";
+function NavChevron({ isHighlighted, className }) {
+  return /* @__PURE__ */ jsx18(
+    "svg",
+    {
+      "data-nav-chevron": "true",
+      "aria-hidden": "true",
+      viewBox: "0 0 7 12",
+      className: cn(
+        "mt-[0.22em] h-[1.1rem] w-[0.65rem] shrink-0 text-current transition-transform duration-200 ease-out md:h-[1.35rem] md:w-[0.8rem]",
+        className
+      ),
+      style: {
+        transform: isHighlighted ? "translateX(5px)" : "translateX(0px)"
+      },
+      children: /* @__PURE__ */ jsx18(
+        "path",
+        {
+          d: "M0,11.23.12,11l.32-.47.3-.12-.16-.35.18-.49.4-.21L1.09,9l.23-.35.26-.21.32-.21L2,7.84l.2-.38v-.3l.47-.47-.05-.38L3,6.08l-.19-.77,0-.26-.26-.3-.1-.31-.42-.25,0-.38-.32-.23L1.5,3.25l0-.32-.05-.26L1,2.37.94,2,.66,1.76.51,1.41.23,1.08.3.66.14.41,0,.13l.7,0L1,.08l.14.14L1.68,0,2,.12,2.21,0l.66.21.26,0h.42l.33.14L4.3.69l0,.38.29.27.14.4L5,2l.07.37,0,.14L5.48,3l.07.09.42.3.1.33L6,4.07l.24.33.42.25,0,.35.1.4.16.47-.11.42-.21.33L6.41,7,6.2,7.2,6,7.6,6,7.93l-.28.31-.3.3,0,.19-.16.37L5,9.43l-.18.14-.23.33-.21.38.09.42-.3.33,0,.18-.66.24-.39.1-.52.09,0-.09-.5-.09-.46.07-.26.09-.4,0-.39-.07-.45.17L0,11.23Z",
+          fill: "currentColor"
+        }
+      )
+    }
+  );
+}
+
+// src/components/ui/paper-tear-edge.tsx
+import { jsx as jsx19 } from "react/jsx-runtime";
+var PAPER_TEAR_EDGE_ASSETS = {
+  top: {
+    src: "/_images/svg/paper-tear-up.svg",
+    width: 448,
+    height: 60
+  },
+  bottom: {
+    src: "/_images/svg/paper-tear-down.svg",
+    width: 448,
+    height: 24
+  }
+};
+function PaperTearEdge(_a) {
+  var _b = _a, {
+    edge = "top",
+    color = "currentColor",
+    className,
+    style
+  } = _b, props = __objRest(_b, [
+    "edge",
+    "color",
+    "className",
+    "style"
+  ]);
+  const asset = PAPER_TEAR_EDGE_ASSETS[edge];
+  const maskUrl = `url("${asset.src}")`;
+  return /* @__PURE__ */ jsx19(
+    "div",
+    __spreadValues({
+      "aria-hidden": "true",
+      "data-slot": "paper-tear-edge",
+      "data-edge": edge,
+      className: cn("block shrink-0", className),
+      style: __spreadValues({
+        aspectRatio: `${asset.width} / ${asset.height}`,
+        backgroundColor: color,
+        maskImage: maskUrl,
+        maskPosition: "center",
+        maskRepeat: "no-repeat",
+        maskSize: "100% 100%",
+        WebkitMaskImage: maskUrl,
+        WebkitMaskPosition: "center",
+        WebkitMaskRepeat: "no-repeat",
+        WebkitMaskSize: "100% 100%"
+      }, style)
+    }, props)
+  );
+}
+
+// src/components/ui/paper-surface.tsx
+import { jsx as jsx20, jsxs as jsxs9 } from "react/jsx-runtime";
+var PAPER_SURFACE_FILL = {
+  white: "var(--color-white)",
+  black: "var(--color-black)",
+  red: "var(--color-red)"
+};
+function PaperSurface(_a) {
+  var _b = _a, {
+    tone = "white",
+    className,
+    topEdgeClassName,
+    bottomEdgeClassName,
+    contentClassName,
+    showTopEdge = true,
+    showBottomEdge = true,
+    children
+  } = _b, props = __objRest(_b, [
+    "tone",
+    "className",
+    "topEdgeClassName",
+    "bottomEdgeClassName",
+    "contentClassName",
+    "showTopEdge",
+    "showBottomEdge",
+    "children"
+  ]);
+  const fill = PAPER_SURFACE_FILL[tone];
+  return /* @__PURE__ */ jsxs9("div", __spreadProps(__spreadValues({ className: cn("relative flex flex-col", className) }, props), { children: [
+    showTopEdge ? /* @__PURE__ */ jsx20(
+      PaperTearEdge,
+      {
+        edge: "top",
+        color: fill,
+        className: cn("pointer-events-none relative z-10 mb-[-2px] w-full select-none", topEdgeClassName)
+      }
+    ) : null,
+    /* @__PURE__ */ jsx20("div", { className: cn("relative z-10", contentClassName), children }),
+    showBottomEdge ? /* @__PURE__ */ jsx20(
+      PaperTearEdge,
+      {
+        edge: "bottom",
+        color: fill,
+        className: cn("pointer-events-none relative z-10 mt-[-2px] w-full select-none", bottomEdgeClassName)
+      }
+    ) : null
+  ] }));
+}
+
+// src/components/ui/photo-frame.module.css
+var photo_frame_default = {};
+
+// src/components/ui/photo-frame.tsx
+import { jsx as jsx21, jsxs as jsxs10 } from "react/jsx-runtime";
+var TAPE_CONFIG = {
+  "tape-2": {
+    asset: "tape-2",
+    rotation: "6deg"
+  },
+  "tape-5": {
+    asset: "tape-5",
+    rotation: "0deg"
+  }
+};
+var DECORATION_CONFIG = {
+  "sticker-9": {
+    asset: "sticker-9"
+  },
+  "sticker-10": {
+    asset: "sticker-10"
+  }
+};
+var VARIANT_CONFIG2 = {
+  /** No tape, no decoration */
+  a: {
+    rotation: "1deg",
+    border: "default",
+    showTape: false,
+    showSticker: false,
+    tapeType: "tape-2",
+    tapePosition: "center",
+    decorationType: "sticker-9",
+    decorationPosition: "bottomLeft"
+  },
+  /** Top-center tape-2 */
+  b: {
+    rotation: "0deg",
+    border: "default",
+    showTape: true,
+    showSticker: false,
+    tapeType: "tape-2",
+    tapePosition: "center",
+    decorationType: "sticker-9",
+    decorationPosition: "bottomLeft"
+  },
+  /** Top-center tape-5 + bottom-left sticker-9 */
+  c: {
+    rotation: "-2deg",
+    border: "medium",
+    showTape: true,
+    showSticker: true,
+    tapeType: "tape-5",
+    tapePosition: "center",
+    decorationType: "sticker-9",
+    decorationPosition: "bottomLeft"
+  },
+  /** Top-right sticker-10 */
+  d: {
+    rotation: "1deg",
+    border: "thin",
+    showTape: false,
+    showSticker: true,
+    tapeType: "tape-2",
+    tapePosition: "center",
+    decorationType: "sticker-10",
+    decorationPosition: "topRight"
+  },
+  /** Top-center tape-5 only (no sticker) */
+  e: {
+    rotation: "-2deg",
+    border: "medium",
+    showTape: true,
+    showSticker: false,
+    tapeType: "tape-5",
+    tapePosition: "center",
+    decorationType: "sticker-9",
+    decorationPosition: "bottomLeft"
+  }
+};
+function PhotoFrame(_a) {
+  var _b = _a, {
+    ref,
+    src,
+    alt,
+    border,
+    variant = "a",
+    showTape,
+    showSticker,
+    tapePosition,
+    rotation,
+    marginOffset,
+    nested = false,
+    fillWidth = false,
+    className,
+    children,
+    style
+  } = _b, props = __objRest(_b, [
+    "ref",
+    "src",
+    "alt",
+    "border",
+    "variant",
+    "showTape",
+    "showSticker",
+    "tapePosition",
+    "rotation",
+    "marginOffset",
+    "nested",
+    "fillWidth",
+    "className",
+    "children",
+    "style"
+  ]);
+  const config = VARIANT_CONFIG2[variant];
+  const resolvedBorder = border != null ? border : config.border;
+  const resolvedShowTape = showTape != null ? showTape : config.showTape;
+  const resolvedShowSticker = showSticker != null ? showSticker : config.showSticker;
+  const resolvedTapePosition = tapePosition != null ? tapePosition : config.tapePosition;
+  const resolvedRotation = rotation != null ? rotation : config.rotation;
+  const resolvedTapeType = config.tapeType;
+  const tapeConfig = TAPE_CONFIG[resolvedTapeType];
+  const resolvedTapeRotation = tapeConfig.rotation;
+  return /* @__PURE__ */ jsxs10(
+    "div",
+    __spreadProps(__spreadValues({
+      ref,
+      "data-slot": "photo-frame",
+      "data-variant": variant,
+      className: cn(
+        photo_frame_default.photoFrame,
+        fillWidth && photo_frame_default.fillWidth,
+        nested && photo_frame_default.nested,
+        resolvedBorder === "thin" && photo_frame_default.thinBorder,
+        resolvedBorder === "medium" && photo_frame_default.mediumBorder,
+        className
+      ),
+      style: __spreadValues({
+        "--end-rotate": resolvedRotation,
+        "--tape-rotation": resolvedTapeRotation,
+        "--margin-offset": marginOffset != null ? marginOffset : 6
+      }, style)
+    }, props), {
+      children: [
+        resolvedShowTape && /* @__PURE__ */ jsx21(PhotoTape, { position: resolvedTapePosition, type: resolvedTapeType }),
+        resolvedShowSticker && /* @__PURE__ */ jsx21(PhotoDecoration, { position: config.decorationPosition, type: config.decorationType }),
+        src ? (
+          // eslint-disable-next-line @next/next/no-img-element
+          /* @__PURE__ */ jsx21("img", { src, alt: alt != null ? alt : "Styled photo", className: photo_frame_default.photo })
+        ) : children
+      ]
+    })
+  );
+}
+var TAPE_POSITION = {
+  center: photo_frame_default.tapeCenter,
+  left: photo_frame_default.tapeLeft,
+  right: photo_frame_default.tapeRight,
+  bottomCenter: photo_frame_default.tapeBottomCenter,
+  bottomLeft: photo_frame_default.tapeBottomLeft,
+  bottomRight: photo_frame_default.tapeBottomRight
+};
+function PhotoTape(_a) {
+  var _b = _a, {
+    position = "center",
+    type = "tape-2",
+    className
+  } = _b, props = __objRest(_b, [
+    "position",
+    "type",
+    "className"
+  ]);
+  const config = TAPE_CONFIG[type];
+  if (!config) return null;
+  return /* @__PURE__ */ jsx21(
+    MediaDecoration,
+    __spreadValues({
+      asset: config.asset,
+      className: cn(photo_frame_default.tape, TAPE_POSITION[position], className),
+      mobilePictureClassName: photo_frame_default.tapeMobile,
+      desktopPictureClassName: photo_frame_default.tapeDesktop
+    }, props)
+  );
+}
+var DECORATION_POSITION = {
+  bottomLeft: photo_frame_default.decorationBottomLeft,
+  topRight: photo_frame_default.decorationTopRight,
+  bottomRight: photo_frame_default.decorationBottomRight,
+  center: photo_frame_default.decorationCenter
+};
+function PhotoDecoration(_a) {
+  var _b = _a, {
+    position = "bottomLeft",
+    type = "sticker-9",
+    className
+  } = _b, props = __objRest(_b, [
+    "position",
+    "type",
+    "className"
+  ]);
+  var _a2;
+  const config = DECORATION_CONFIG[type];
+  const asset = (_a2 = config == null ? void 0 : config.asset) != null ? _a2 : isTapeImageVariant(type) ? type : null;
+  if (!asset) return null;
+  return /* @__PURE__ */ jsx21(
+    MediaDecoration,
+    __spreadValues({
+      asset,
+      className: cn(photo_frame_default.decoration, DECORATION_POSITION[position], className),
+      mobilePictureClassName: photo_frame_default.decorationMobile,
+      desktopPictureClassName: photo_frame_default.decorationDesktop
+    }, props)
+  );
+}
+
+// src/components/ui/tag-hanger.tsx
+import { jsx as jsx22 } from "react/jsx-runtime";
+function TagHanger() {
+  return /* @__PURE__ */ jsx22(
+    "svg",
+    {
+      viewBox: "0 0 566 555",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      className: "h-full w-full",
+      preserveAspectRatio: "none",
+      children: /* @__PURE__ */ jsx22(
+        "path",
+        {
+          d: "m311.748694 27.1685099h-55.497388c-2.987542 0-5.410583-2.41764-5.410583-5.3985227s2.423041-5.3985227 5.410583-5.3985227h21.676089v-.3817326c0-3.3457742 2.719357-6.05906986 6.072605-6.05906986s6.072605 2.71329566 6.072605 6.05906986v.3817326h21.676089c2.987542 0 5.410583 2.41764 5.410583 5.3985227s-2.423041 5.3985227-5.410583 5.3985227m248.671936-18.68057264c-.480108-.68300201-2.89002-2.0040963-2.89002-2.0040963l-1.911052.14595659-1.860415.76907897-1.714133-.13285792-.783925-.39108882.146283-.75785154-.517616-1.52880175s.94146-3.10064198.495111-3.26343972c-.590757-.21332118-1.194642-.40418749-1.807904-.56885647-.613262-.16279774-1.237776-.30314061-1.869792-.41354368-1.265908-.2245486-2.569324-.34243662-3.900871-.34243662h-18.062157l-2.473677.86451213-1.468453 1.75896407-1.665371-.48839322-1.860416.87948204-2.449296-.97865767-1.470329-1.07409083-4.774815-.96181652h-79.04702l-5.950703 1.25560095-4.701675 2.53927047-3.011922-1.63546234h-2.938781l-3.141326 1.01795368 1.157133-1.3847164 2.741862-1.79264636-2.473677.86451213-1.468453 1.75896407-1.665371-.48839322-.748292.35366405-2.361152-1.23314608-3.730208-.5071056-3.715204-.74849535.857066.35927777-2.64434-.35927777h-170.15566l-8.4 1.76832026-6.856531 1.75896407-5.877561-2.34653292-3.91775.39108882-4.309712.97865767-4.506631.19460879-1.762893-1.17326646-8.251842-1.57184023h-160.507435c-1.2377763 0-2.4511722.10104687-3.6345613.29565566-1.1833892.19460879-2.3330208.4827795-3.445144.85515594-.6301407.40231625-1.8266578 1.5213168-1.8266578 1.5213168l-1.106497.78966259-2.39490954.72416925-1.49845948 1.15268284-1.29778968 1.64107605.03563295 1.39220135-.43884796.7952763-1.3596785.87012582-1.02960482 1.6822433s-1.64849297.60441-2.13047555 1.0797046c-1.32592096 2.8405398-2.06671132 6.0066751-2.06671132 9.3449644v499.9200981l3.31949096 13.242754 4.13904889 7.183684 5.48559945 4.300106 5.680643 1.270571 9.5027462 2.640317 11.1906229.658676 6.9784327 1.758964 8.3756195.51272 7.6892164 1.367875h109.36852l6.269524-.877611 1.714133-.245132 1.665372-1.221919 2.154856 1.173267 6.61085 1.171395h175.446216l6.83215-.890709 1.640991-1.307996 1.468453-.097304 3.465774 1.111515 14.361955.258231 31.591427.926263 18.022773-1.074091 7.933021-2.93223 3.268854 2.350275 6.367047-.40793 4.309712-.959945 2.927528.495878 4.712927-.301269 3.233222-1.270571 14.300067-.976787 6.155124.351793 5.6.233905 6.843402-.851414 3.718955-.185252 9.125787.351793 10.446082-1.322966 4.714802-4.27578 5.12927-1.58681 2.839384-2.640317 2.303014-4.739847 1.957937-1.367875 4.017147.19648 4.667917-6.259292 1.370931-5.013048 2.434293-3.925858 1.370931-5.570677 1.370931-5.473372 1.907301-5.600616v-480.0999421c0-4.0287762-1.078366-7.8068065-2.963161-11.0627613-.324448-.5595002-2.246752-2.06771836-2.616209-2.59353634z",
+          fill: "currentColor",
+          fillRule: "evenodd"
+        }
+      )
+    }
+  );
+}
+
+// src/components/ui/rugged-card.tsx
+import { jsx as jsx23, jsxs as jsxs11 } from "react/jsx-runtime";
+var ruggedThemeMap = {
+  yellow: { bg: "text-yellow", fg: "text-black" },
+  blue: { bg: "text-blue", fg: "text-white" },
+  purple: { bg: "text-purple", fg: "text-white" },
+  orange: { bg: "text-orange", fg: "text-white" },
+  green: { bg: "text-green", fg: "text-black" }
+};
+function RuggedCard(_a) {
+  var _b = _a, {
+    ref,
+    className,
+    ruggedTheme = "yellow",
+    ruggedRotation = "2deg",
+    ruggedBackground,
+    children
+  } = _b, props = __objRest(_b, [
+    "ref",
+    "className",
+    "ruggedTheme",
+    "ruggedRotation",
+    "ruggedBackground",
+    "children"
+  ]);
+  var _a2;
+  const theme = (_a2 = ruggedThemeMap[ruggedTheme]) != null ? _a2 : ruggedThemeMap.yellow;
+  const defaultBackground = /* @__PURE__ */ jsx23(TagHanger, {});
+  return /* @__PURE__ */ jsxs11(
+    "div",
+    __spreadProps(__spreadValues({
+      ref,
+      "data-slot": "card",
+      "data-variant": "rugged",
+      style: { transform: `rotate(${ruggedRotation})` },
+      className: cn(
+        "group/card relative w-full pt-[12%] px-[6%] pb-[8%] select-none text-center flex flex-col justify-between gap-4 z-10",
+        theme.fg,
+        className
+      )
+    }, props), {
+      children: [
+        /* @__PURE__ */ jsx23("div", { className: cn("absolute inset-0 w-full h-full z-0 pointer-events-none select-none", theme.bg), children: ruggedBackground != null ? ruggedBackground : defaultBackground }),
+        /* @__PURE__ */ jsx23("div", { className: "relative h-full flex flex-col justify-between gap-4 z-10 text-center", children })
+      ]
+    })
+  );
+}
+
+// src/components/ui/section-background.module.css
+var section_background_default = {};
+
+// src/components/ui/section-background.tsx
+import { jsx as jsx24 } from "react/jsx-runtime";
+var PATTERN_MAP = {
+  "base-bg-pattern": section_background_default.patternBaseBgPattern,
+  "camo-black": section_background_default.patternCamoBlack,
+  "camo-green": section_background_default.patternCamoGreen,
+  "camo-purple": section_background_default.patternCamoPurple,
+  "camo-purple-revised": section_background_default.patternCamoPurpleRevised,
+  "camo-orange": section_background_default.patternCamoOrange,
+  "camo-red": section_background_default.patternCamoRed,
+  "camo-white": section_background_default.patternCamoWhite,
+  "camo-white-outline": section_background_default.patternCamoWhiteOutline,
+  "hardware-background": section_background_default.patternHardwareBackground,
+  "octo-black": section_background_default.patternOctoBlack,
+  "octo-red": section_background_default.patternOctoRed,
+  "octoarrow-green": section_background_default.patternOctoarrowGreen,
+  "octoarrow-orange": section_background_default.patternOctoarrowOrange,
+  "squid-black": section_background_default.patternSquidBlack,
+  "circles-green": section_background_default.patternCirclesGreen,
+  "chip-white": section_background_default.patternChipWhite,
+  "monsters-black": section_background_default.patternMonstersBlack,
+  graffiti: section_background_default.patternGraffiti,
+  "tapes-black": section_background_default.patternTapesBlack,
+  "tapes-green": section_background_default.patternTapesGreen,
+  "tapes-pattern": section_background_default.patternTapesPattern,
+  "tapes-purple": section_background_default.patternTapesPurple
+};
+function SectionBackground(_a) {
+  var _b = _a, {
+    bgColor,
+    darkBgColor,
+    pattern,
+    as: Tag = "div",
+    className,
+    children
+  } = _b, props = __objRest(_b, [
+    "bgColor",
+    "darkBgColor",
+    "pattern",
+    "as",
+    "className",
+    "children"
+  ]);
+  return /* @__PURE__ */ jsx24(
+    Tag,
+    __spreadProps(__spreadValues({
+      className: cn(
+        section_background_default.sectionBackground,
+        bgColor,
+        darkBgColor,
+        pattern && PATTERN_MAP[pattern],
+        className
+      )
+    }, props), {
+      children
+    })
+  );
+}
+
+// src/components/ui/section.tsx
+import { jsxs as jsxs12 } from "react/jsx-runtime";
+function Section(_a) {
+  var _b = _a, {
+    size = "md",
+    headingTape,
+    pattern,
+    bgColor,
+    text,
+    as = "section",
+    bottomOverlayClearance = "none",
+    className,
+    children,
+    style
+  } = _b, props = __objRest(_b, [
+    "size",
+    "headingTape",
+    "pattern",
+    "bgColor",
+    "text",
+    "as",
+    "bottomOverlayClearance",
+    "className",
+    "children",
+    "style"
+  ]);
+  const paddingY = headingTape ? size === "lg" ? "py-28" : "py-24" : size === "lg" ? "py-20" : "py-16";
+  return /* @__PURE__ */ jsxs12(
+    SectionBackground,
+    __spreadProps(__spreadValues({
+      as,
+      pattern,
+      className: cn(
+        paddingY,
+        "relative z-[var(--z-deco)] pr-[calc(1.5rem+var(--section-side-nav-safe-area,0px))] pl-6",
+        bgColor,
+        text,
+        className,
+        bottomOverlayClearance === "banner-divider" && "pb-[var(--section-overlay-clearance)]"
+      ),
+      style: __spreadValues(__spreadValues({}, bottomOverlayClearance === "banner-divider" ? { "--section-overlay-clearance": layoutTokens.bannerDividerClearance } : {}), style)
+    }, props), {
+      children: [
+        headingTape,
+        children
+      ]
+    })
+  );
+}
+
+// src/components/ui/showcase-assets.ts
+var showcaseMediaAssets = {
+  trailerThumbnail: {
+    src: "/_images/screenshots/video-trailer.jpg",
+    alt: "Splatoon UI media dialog preview",
+    width: 748,
+    height: 421
+  },
+  fullscreenPreview: {
+    src: "/_images/gameplay/battle-online/gameplay-battle-online-anarchy-1.jpg",
+    alt: "Fullscreen media dialog reference artwork",
+    width: 658,
+    height: 370
+  },
+  ruggedLookbook: {
+    src: "/_images/home/s3-home-intro-blade.jpg",
+    alt: "Rugged card lookbook reference artwork",
+    width: 558,
+    height: 313
+  },
+  ruggedMode: {
+    src: "/_images/gameplay/gameplay-salmonrun.jpg",
+    alt: "Rugged card mode reference artwork",
+    width: 558,
+    height: 313
+  },
+  ruggedScene: {
+    src: "/_images/gameplay/splatfest/gameplay-splatfest-1.jpg",
+    alt: "Rugged card scene reference artwork",
+    width: 558,
+    height: 313
+  },
+  homeHeader: {
+    src: "/_images/home/header-back.jpg",
+    alt: "Home header background reference artwork",
+    width: 901,
+    height: 1151
+  },
+  homeCharacter: {
+    src: "/_images/home/character.png",
+    alt: "Home character reference artwork",
+    width: 1193,
+    height: 767
+  },
+  turfWarLeft: {
+    src: "/_images/gameplay/battle-online/gameplay-battle-online-turfwar-left-screen.jpg",
+    alt: "Turf war left screen reference artwork",
+    width: 658,
+    height: 370
+  },
+  turfWarRight: {
+    src: "/_images/gameplay/battle-online/gameplay-battle-online-turfwar-right-screen.jpg",
+    alt: "Turf war right screen reference artwork",
+    width: 658,
+    height: 370
+  },
+  splatfestSecondary: {
+    src: "/_images/gameplay/splatfest/gameplay-splatfest-2.jpg",
+    alt: "Splatfest secondary reference artwork",
+    width: 558,
+    height: 313
+  }
+};
+
+// src/components/ui/squid-assets.ts
+var SQUID_ASSET_BASE = "/_images/squid";
+var squidImageAssets = {
+  loader: {
+    id: "loader-ika",
+    src: `${SQUID_ASSET_BASE}/loader_ika.gif`,
+    alt: "Animated squid loading glyph",
+    width: 516,
+    height: 567
+  },
+  mask: {
+    id: "ika",
+    src: `${SQUID_ASSET_BASE}/ika.png`,
+    alt: "Squid mask reference artwork",
+    width: 438,
+    height: 481
+  }
+};
+var squidSpriteAssets = {
+  loaderMorph: {
+    id: "loader-morph-sprite",
+    src: `${SQUID_ASSET_BASE}/loader-morph-sprite.png`,
+    alt: "Frame-animated morphing squid loader sprite",
+    width: 8320,
+    height: 130,
+    frameWidth: 130,
+    frameHeight: 130,
+    frames: 64,
+    durationMs: 8001,
+    sourceUrl: "https://www.spriters-resource.com/media/assets/180/182952.png?updated=1755487320"
+  },
+  loaderSwim: {
+    id: "loader-swim-sprite",
+    src: `${SQUID_ASSET_BASE}/loader-swim-sprite.png`,
+    alt: "Frame-animated swimming squid loader sprite",
+    width: 4030,
+    height: 130,
+    frameWidth: 130,
+    frameHeight: 130,
+    frames: 31,
+    durationMs: 6201,
+    sourceUrl: "https://www.spriters-resource.com/media/assets/180/182953.png?updated=1755487320"
+  }
+};
+
+// src/components/ui/staple-card.module.css
+var staple_card_default = {};
+
+// src/components/ui/staple-card.tsx
+import { Fragment as Fragment3, jsx as jsx25, jsxs as jsxs13 } from "react/jsx-runtime";
+var VARIANT_CONFIG3 = {
+  /** No tape */
+  a: { showTape: false },
+  /** With tape */
+  b: { showTape: true },
+  /** With tape (alt) */
+  c: { showTape: true },
+  /** With tape (alt) */
+  d: { showTape: true }
+};
+function StapleCard(_a) {
+  var _b = _a, {
+    variant = "b",
+    image,
+    title,
+    subtitle,
+    action,
+    surface = "white",
+    showTape,
+    hoverTilt = false,
+    className,
+    children
+  } = _b, props = __objRest(_b, [
+    "variant",
+    "image",
+    "title",
+    "subtitle",
+    "action",
+    "surface",
+    "showTape",
+    "hoverTilt",
+    "className",
+    "children"
+  ]);
+  const config = VARIANT_CONFIG3[variant];
+  const resolvedShowTape = showTape != null ? showTape : config.showTape;
+  const isDark = surface === "dark";
+  return /* @__PURE__ */ jsx25(
+    "div",
+    __spreadProps(__spreadValues({
+      "data-slot": "card",
+      "data-variant": variant,
+      className: cn(staple_card_default.stapleCard, isDark && staple_card_default.surfaceDark, className)
+    }, props), {
+      children: /* @__PURE__ */ jsxs13("div", { className: cn(staple_card_default.card, "@container", hoverTilt && staple_card_default.hoverTilt), children: [
+        /* @__PURE__ */ jsxs13(
+          PaperSurface,
+          {
+            tone: isDark ? "black" : "white",
+            topEdgeClassName: staple_card_default.cardTop,
+            bottomEdgeClassName: staple_card_default.cardBottom,
+            contentClassName: staple_card_default.cardLayout,
+            children: [
+              /* @__PURE__ */ jsx25("div", { className: staple_card_default.stapleLeft, children: /* @__PURE__ */ jsxs13("picture", { children: [
+                /* @__PURE__ */ jsx25(
+                  "img",
+                  {
+                    className: staple_card_default.imgMobile,
+                    alt: "",
+                    src: newsStapleAssets.left.src,
+                    width: newsStapleAssets.left.width,
+                    height: newsStapleAssets.left.height
+                  }
+                ),
+                /* @__PURE__ */ jsx25(
+                  "img",
+                  {
+                    className: staple_card_default.imgDesktop,
+                    alt: "",
+                    src: newsStapleAssets.left.src,
+                    width: newsStapleAssets.left.width,
+                    height: newsStapleAssets.left.height
+                  }
+                )
+              ] }) }),
+              /* @__PURE__ */ jsx25("div", { className: staple_card_default.stapleRight, children: /* @__PURE__ */ jsxs13("picture", { children: [
+                /* @__PURE__ */ jsx25(
+                  "img",
+                  {
+                    className: staple_card_default.imgMobile,
+                    alt: "",
+                    src: newsStapleAssets.right.src,
+                    width: newsStapleAssets.right.width,
+                    height: newsStapleAssets.right.height
+                  }
+                ),
+                /* @__PURE__ */ jsx25(
+                  "img",
+                  {
+                    className: staple_card_default.imgDesktop,
+                    alt: "",
+                    src: newsStapleAssets.right.src,
+                    width: newsStapleAssets.right.width,
+                    height: newsStapleAssets.right.height
+                  }
+                )
+              ] }) }),
+              /* @__PURE__ */ jsx25("div", { className: staple_card_default.image, children: image }),
+              /* @__PURE__ */ jsx25("div", { className: staple_card_default.info, children: children != null ? children : /* @__PURE__ */ jsxs13(Fragment3, { children: [
+                title && /* @__PURE__ */ jsx25("p", { className: staple_card_default.title, children: title }),
+                subtitle && /* @__PURE__ */ jsx25("p", { className: staple_card_default.subtitle, children: subtitle }),
+                action
+              ] }) })
+            ]
+          }
+        ),
+        resolvedShowTape && /* @__PURE__ */ jsx25(
+          MediaDecoration,
+          {
+            position: "top-left",
+            className: staple_card_default.tape,
+            asset: "sticker-9",
+            responsive: false,
+            media: "(min-width: 400px)",
+            imageClassName: staple_card_default.tapeImage,
+            style: {
+              left: "25%",
+              transform: "translate(-50%, -50%) rotate(-10deg)"
+            }
+          }
+        )
+      ] })
+    })
+  );
+}
+function StapleCardTitle(_a) {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx25("p", __spreadValues({ "data-slot": "card-title", className: cn(staple_card_default.title, className) }, props));
+}
+function StapleCardDescription(_a) {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx25("p", __spreadValues({ "data-slot": "card-description", className: cn(staple_card_default.subtitle, className) }, props));
+}
+
+// src/components/ui/stickers/sticker-image.tsx
+import { jsx as jsx26 } from "react/jsx-runtime";
+function StickerImage(_a) {
+  var _b = _a, {
+    asset,
+    alt = "",
+    className,
+    draggable = false
+  } = _b, props = __objRest(_b, [
+    "asset",
+    "alt",
+    "className",
+    "draggable"
+  ]);
+  return /* @__PURE__ */ jsx26(TapePicture, __spreadProps(__spreadValues({}, props), { asset, alt, className, draggable }));
+}
+
+// src/components/ui/stickers/sticker-2-red.tsx
+import { jsx as jsx27 } from "react/jsx-runtime";
+function Sticker2Red(_a) {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx27(StickerImage, __spreadValues({ asset: "sticker-2-red", className }, props));
+}
+Sticker2Red.displayName = "Sticker2Red";
+
+// src/components/ui/stickers/sticker-10.tsx
+import { jsx as jsx28 } from "react/jsx-runtime";
+function Sticker10(_a) {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx28(StickerImage, __spreadValues({ asset: "sticker-10", className }, props));
+}
+Sticker10.displayName = "Sticker10";
+
+// src/components/ui/stickers/sticker-5.tsx
+import { jsx as jsx29 } from "react/jsx-runtime";
+function Sticker5(_a) {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx29(StickerImage, __spreadValues({ asset: "sticker-5", className }, props));
+}
+Sticker5.displayName = "Sticker5";
+
+// src/components/ui/tape-divider.module.css
+var tape_divider_default = {};
+
+// src/components/ui/tape-divider.tsx
+import { jsx as jsx30, jsxs as jsxs14 } from "react/jsx-runtime";
+function TapeDivider(_a) {
+  var _b = _a, {
+    variant = "primary",
+    rotate = "none",
+    overlap = false,
+    className
+  } = _b, props = __objRest(_b, [
+    "variant",
+    "rotate",
+    "overlap",
+    "className"
+  ]);
+  const rotateClass = rotate === "left" ? tape_divider_default.rotateLeft : rotate === "right" ? tape_divider_default.rotateRight : rotate === "strong" ? tape_divider_default.rotateStrong : void 0;
+  return /* @__PURE__ */ jsxs14(
+    "div",
+    __spreadProps(__spreadValues({
+      "aria-hidden": "true",
+      className: cn(
+        tape_divider_default.tapeDivider,
+        variant === "double" && tape_divider_default.double,
+        overlap && tape_divider_default.overlap,
+        className
+      )
+    }, props), {
+      children: [
+        /* @__PURE__ */ jsx30("div", { className: cn(tape_divider_default.tapePrimary, rotateClass) }),
+        variant === "double" && /* @__PURE__ */ jsx30("div", { className: cn(tape_divider_default.tapeSecondary, rotateClass) })
+      ]
+    })
+  );
+}
+
+// src/components/ui/tape-title.module.css
+var tape_title_default = {};
+
+// src/components/ui/tape-title.tsx
+import { jsx as jsx31 } from "react/jsx-runtime";
+function TapeTitle(_a) {
+  var _b = _a, { color = "black", className, children } = _b, props = __objRest(_b, ["color", "className", "children"]);
+  return /* @__PURE__ */ jsx31(
+    "div",
+    __spreadProps(__spreadValues({
+      className: cn(
+        tape_title_default.container,
+        color === "red" && tape_title_default.red,
+        color === "yellow" && tape_title_default.yellow,
+        className
+      )
+    }, props), {
+      children: /* @__PURE__ */ jsx31("h2", { className: tape_title_default.title, children })
+    })
+  );
+}
+
+// src/components/ui/wave-button.tsx
+import * as React from "react";
+
+// src/components/ui/wave-button.module.css
+var wave_button_default = {};
+
+// src/components/ui/wave-button.tsx
+import { jsx as jsx32 } from "react/jsx-runtime";
+var VARIANT_CLASS = {
+  yellow: wave_button_default.yellow,
+  white: wave_button_default.white,
+  ghost: wave_button_default.ghost
+};
+var SIZE_CLASS = {
+  md: wave_button_default.md,
+  lg: wave_button_default.lg
+};
+var WaveButton = React.forwardRef(
+  function WaveButton2(_a, ref) {
+    var _b = _a, {
+      variant = "yellow",
+      size = "md",
+      icon,
+      animation = "morph",
+      className
+    } = _b, props = __objRest(_b, [
+      "variant",
+      "size",
+      "icon",
+      "animation",
+      "className"
+    ]);
+    return /* @__PURE__ */ jsx32(
+      "button",
+      __spreadProps(__spreadValues({
+        ref,
+        className: cn(
+          VARIANT_CLASS[variant],
+          SIZE_CLASS[size],
+          wave_button_default.iconWrap,
+          animation === "morph" && wave_button_default.morph,
+          wave_button_default.pressed,
+          "grid place-content-center cursor-pointer",
+          className
+        )
+      }, props), {
+        children: icon !== null && (icon != null ? icon : /* @__PURE__ */ jsx32("span", { "data-menu-trigger-line": "", className: wave_button_default.icon }))
+      })
+    );
+  }
+);
+
+// src/components/ui/weapons-assets.ts
+var WEAPONS_ASSET_BASE = "/_images/weapons";
+var weaponMarqueeSources = Array.from({ length: 22 }, (_, index) => {
+  const item = index + 1;
+  return {
+    id: `weapon-reference-${item}`,
+    image: `${WEAPONS_ASSET_BASE}/marquee/s3_weapons_social-${item}.jpg`,
+    alt: `Weapon reference artwork ${item}`
+  };
+});
+var weaponShowcaseItems = weaponMarqueeSources.slice(0, 6).map((asset, index) => __spreadProps(__spreadValues({}, asset), {
+  id: `loadout-panel-${index + 1}`,
+  title: `Loadout Panel ${index + 1}`,
+  description: [
+    "Carousel frame using curated weapon reference artwork.",
+    "Rotated media shell with curated source imagery.",
+    "High-contrast gallery card for dense media pages.",
+    "Responsive photo frame with tape and sticker accents.",
+    "Sequential carousel state with fixed image rhythm.",
+    "Reusable feature card for component-heavy sections."
+  ][index]
+}));
+var weaponShopGalleryItems = [
+  {
+    id: "reference-shop-1",
+    image: `${WEAPONS_ASSET_BASE}/shops-gallery/weapons-express-hotlantis-1.jpg`,
+    icon: `${WEAPONS_ASSET_BASE}/shops-gallery/harmony-icon.png`,
+    iconRotate: -14,
+    alt: "Shop reference artwork 1",
+    title: "Media Kit",
+    description: "Frames, carousels, and gallery controls for image-heavy layouts."
+  },
+  {
+    id: "reference-shop-2",
+    image: `${WEAPONS_ASSET_BASE}/shops-gallery/weapons-express-ammo-knights-2.jpg`,
+    icon: `${WEAPONS_ASSET_BASE}/shops-gallery/sheldon-icon.png`,
+    iconRotate: -38,
+    alt: "Shop reference artwork 2",
+    title: "Control Kit",
+    description: "Buttons, pagination, and navigation controls with bold silhouettes."
+  },
+  {
+    id: "reference-shop-3",
+    image: `${WEAPONS_ASSET_BASE}/shops-gallery/weapons-express-naut-couture-3.jpg`,
+    icon: `${WEAPONS_ASSET_BASE}/shops-gallery/jella-icon.png`,
+    iconRotate: -43,
+    alt: "Shop reference artwork 3",
+    title: "Surface Kit",
+    description: "Cards, tags, torn-paper surfaces, and layered content panels."
+  },
+  {
+    id: "reference-shop-4",
+    image: `${WEAPONS_ASSET_BASE}/shops-gallery/weapons-express-manoward-4.jpg`,
+    icon: `${WEAPONS_ASSET_BASE}/shops-gallery/coco-icon.png`,
+    iconRotate: 25,
+    alt: "Shop reference artwork 4",
+    title: "Overlay Kit",
+    description: "Dialogs, sheets, popovers, and full-screen media flows."
+  },
+  {
+    id: "reference-shop-5",
+    image: `${WEAPONS_ASSET_BASE}/shops-gallery/weapons-express-crush-station-5.jpg`,
+    icon: `${WEAPONS_ASSET_BASE}/shops-gallery/eddy-icon.png`,
+    iconRotate: 11,
+    alt: "Shop reference artwork 5",
+    title: "Feedback Kit",
+    description: "Alerts, progress indicators, loaders, and stateful UI feedback."
+  }
+];
+var weaponMarqueeItems = weaponMarqueeSources;
+
+export {
+  __spreadValues,
+  __spreadProps,
+  __objRest,
+  cn,
+  resolveCSSColor,
+  CardSlot,
+  tapeImageAssets,
+  isTapeImageVariant,
+  TapePicture,
+  TapeResponsivePictures,
+  MediaDecoration,
+  WideTornPaper,
+  TornCard,
+  TornCardTitle,
+  TornCardDescription,
+  Alert,
+  AlertTitle,
+  AlertDescription,
+  AssetImage,
+  BlackTapeContainer,
+  ButtonArrow,
+  ButtonDrip,
+  characterImageAssets,
+  pageTransitionCharacterAssets,
+  eventImageAssets,
+  EventCallout,
+  layoutTokens,
+  motionTokens,
+  DemoContent,
+  DemoExampleGroup,
+  GitHubMark,
+  HeadingTape,
+  Input,
+  newsStapleAssets,
+  Tape,
+  Staple,
+  Marquee,
+  MarqueeItem,
+  NavChevron,
+  PaperTearEdge,
+  PaperSurface,
+  photo_frame_default,
+  PhotoFrame,
+  PhotoTape,
+  PhotoDecoration,
+  TagHanger,
+  RuggedCard,
+  SectionBackground,
+  Section,
+  showcaseMediaAssets,
+  squidImageAssets,
+  squidSpriteAssets,
+  StapleCard,
+  StapleCardTitle,
+  StapleCardDescription,
+  Sticker2Red,
+  Sticker10,
+  Sticker5,
+  TapeDivider,
+  TapeTitle,
+  wave_button_default,
+  WaveButton,
+  weaponShowcaseItems,
+  weaponShopGalleryItems,
+  weaponMarqueeItems
+};
+//# sourceMappingURL=chunk-KUURJUBW.js.map