import { o as L } from "./rolldown-runtime.js";
import { i as V, n as W, t as A } from "./vendor/react.js";
import { t as b } from "./arrow-left.js";
import { t as C } from "./arrow-right.js";
import { t as D } from "./search.js";
import { t as i } from "./Button.js";
import { t as G } from "./dist.js";
import { t as o } from "./utils.js";
import { t as T } from "./FeaturedIcon.js";
import { t as R } from "./PageBackground.js";
var _ = /* @__PURE__ */ L(V(), 1), e = A(), v = G("flex flex-col items-center w-full bg-background", {
  variants: { variant: {
    simple01: "items-start",
    simple02: "items-start",
    simple03: "items-center text-center",
    simple04: "items-center text-center"
  } },
  defaultVariants: { variant: "simple01" }
}), q = ({ icon: t, title: s, description: l, actionText: a, onClick: r, href: n, layout: c = "vertical" }) => {
  const p = /* @__PURE__ */ (0, e.jsxs)(e.Fragment, { children: [t && /* @__PURE__ */ (0, e.jsx)("span", {
    className: "text-primary [&_svg]:size-6",
    "aria-hidden": "true",
    children: t
  }), /* @__PURE__ */ (0, e.jsxs)("div", {
    className: o("flex flex-col", c === "vertical" ? "gap-4" : "gap-2"),
    children: [/* @__PURE__ */ (0, e.jsxs)("div", {
      className: o("flex flex-col", c === "vertical" ? "gap-2" : "gap-1"),
      children: [/* @__PURE__ */ (0, e.jsx)("h3", {
        className: "text-lg font-semibold text-foreground leading-7",
        children: s
      }), /* @__PURE__ */ (0, e.jsx)("p", {
        className: "text-base text-muted-foreground leading-6",
        children: l
      })]
    }), /* @__PURE__ */ (0, e.jsx)(i, {
      appearance: "link",
      variant: "primary",
      size: "md",
      onClick: r,
      endIcon: /* @__PURE__ */ (0, e.jsx)(C, { className: "size-5 rtl:rotate-180" }),
      children: a
    })]
  })] });
  return n ? /* @__PURE__ */ (0, e.jsx)("a", {
    href: n,
    className: o("flex bg-muted p-5 md:p-6", c === "vertical" ? "flex-col gap-8 md:gap-12" : "flex-col gap-4 items-center text-center"),
    children: p
  }) : /* @__PURE__ */ (0, e.jsx)("div", {
    className: o("flex bg-muted p-5 md:p-6", c === "vertical" ? "flex-col gap-8 md:gap-12" : "flex-col gap-4 items-center text-center"),
    children: p
  });
}, H = ({ title: t, description: s, onClick: l, href: a }) => {
  const r = /* @__PURE__ */ (0, e.jsxs)(e.Fragment, { children: [/* @__PURE__ */ (0, e.jsx)(i, {
    appearance: "link",
    variant: "primary",
    size: "md",
    onClick: l,
    endIcon: /* @__PURE__ */ (0, e.jsx)(C, { className: "size-5 rtl:rotate-180" }),
    children: t
  }), /* @__PURE__ */ (0, e.jsx)("p", {
    className: "text-base text-muted-foreground leading-6",
    children: s
  })] });
  return a ? /* @__PURE__ */ (0, e.jsx)("a", {
    href: a,
    className: "flex flex-col gap-1",
    children: r
  }) : /* @__PURE__ */ (0, e.jsx)("div", {
    className: "flex flex-col gap-1",
    children: r
  });
}, M = ({ icon: t, title: s, description: l, actionText: a, onClick: r }) => /* @__PURE__ */ (0, e.jsxs)("div", {
  className: "flex flex-col gap-4 items-center text-center w-full",
  children: [
    t && /* @__PURE__ */ (0, e.jsx)(T, {
      size: "sm",
      icon: t
    }),
    /* @__PURE__ */ (0, e.jsxs)("div", {
      className: "flex flex-col gap-1 items-center",
      children: [/* @__PURE__ */ (0, e.jsx)("h3", {
        className: "text-lg font-semibold text-foreground leading-7",
        children: s
      }), /* @__PURE__ */ (0, e.jsx)("p", {
        className: "text-base text-muted-foreground leading-6",
        children: l
      })]
    }),
    /* @__PURE__ */ (0, e.jsx)(i, {
      appearance: "link",
      variant: "primary",
      size: "md",
      onClick: r,
      endIcon: /* @__PURE__ */ (0, e.jsx)(C, { className: "size-5 rtl:rotate-180" }),
      children: a
    })
  ]
}), E = {
  simple01: {
    title: "We can't find that page",
    description: "Sorry, the page you are looking for doesn't exist or has been moved."
  },
  simple02: {
    title: "Page not found",
    description: "Sorry, the page you are looking for doesn't exist."
  },
  simple03: {
    title: "Page not found",
    description: `The page you are looking for doesn't exist.
Here are some helpful links:`
  },
  simple04: {
    title: "We lost this page",
    description: `We searched high and low, but couldn't find what you're looking for.
Let's find a better place for you to go.`
  }
}, F = _.forwardRef(({ className: t, variant: s = "simple01", errorLabel: l = "404 error", title: a = "Page not found", description: r = "Sorry, the page you are looking for doesn't exist or has been moved.", primaryActionText: n = "Take me home", onPrimaryAction: c, primaryActionHref: p, secondaryActionText: f = "Go back", onSecondaryAction: k, secondaryActionHref: z, links: m = [], showGridPattern: I = !0, icon: O, ...h }, u) => {
  const y = a === "Page not found" ? E[s || "simple01"].title : a, j = r === "Sorry, the page you are looking for doesn't exist or has been moved." ? E[s || "simple01"].description : r, N = () => {
    p ? typeof window < "u" && (window.location.href = p) : c && c();
  }, w = () => {
    z ? typeof window < "u" && (window.location.href = z) : k ? k() : typeof window < "u" && window.history.back();
  };
  return s === "simple01" ? /* @__PURE__ */ (0, e.jsx)("div", {
    ref: u,
    "data-slot": "not-found-page",
    className: o(v({ variant: s }), "py-16 md:py-24 px-4 md:px-8", t),
    ...h,
    children: /* @__PURE__ */ (0, e.jsx)("div", {
      className: "w-full max-w-[1280px]",
      children: /* @__PURE__ */ (0, e.jsxs)("div", {
        className: "flex flex-col gap-8 md:gap-12 max-w-[768px]",
        children: [/* @__PURE__ */ (0, e.jsxs)("div", {
          className: "flex flex-col gap-4 md:gap-6",
          children: [/* @__PURE__ */ (0, e.jsxs)("div", {
            className: "flex flex-col gap-3",
            children: [/* @__PURE__ */ (0, e.jsx)("span", {
              className: "text-base font-semibold text-primary leading-6 delight-stagger",
              style: { "--delight-delay": "0ms" },
              children: l
            }), /* @__PURE__ */ (0, e.jsx)("h1", {
              className: "text-display-md md:text-display-xl font-semibold text-foreground delight-stagger",
              style: { "--delight-delay": "100ms" },
              children: y
            })]
          }), /* @__PURE__ */ (0, e.jsx)("p", {
            className: "text-lg md:text-xl text-muted-foreground leading-7 md:leading-[30px] max-w-prose whitespace-pre-line delight-stagger",
            style: { "--delight-delay": "200ms" },
            children: j
          })]
        }), /* @__PURE__ */ (0, e.jsxs)("div", {
          className: "flex flex-col md:flex-row gap-3 w-full md:w-auto delight-stagger",
          style: { "--delight-delay": "300ms" },
          children: [/* @__PURE__ */ (0, e.jsx)(i, {
            appearance: "outline",
            variant: "secondary",
            size: "lg",
            startIcon: /* @__PURE__ */ (0, e.jsx)(b, { className: "size-5" }),
            onClick: w,
            className: "w-full md:w-auto md:px-6 md:py-4 md:h-14 md:text-lg",
            children: f
          }), /* @__PURE__ */ (0, e.jsx)(i, {
            appearance: "gradient",
            variant: "primary",
            size: "lg",
            onClick: N,
            className: "w-full md:w-auto md:px-6 md:py-4 md:h-14 md:text-lg",
            children: n
          })]
        })]
      })
    })
  }) : s === "simple02" ? /* @__PURE__ */ (0, e.jsx)("div", {
    ref: u,
    "data-slot": "not-found-page",
    className: o(v({ variant: s }), "py-16 md:py-24 px-4 md:px-8 justify-center", t),
    ...h,
    children: /* @__PURE__ */ (0, e.jsx)("div", {
      className: "w-full max-w-[1280px]",
      children: /* @__PURE__ */ (0, e.jsxs)("div", {
        className: "flex flex-col gap-8 md:gap-12 max-w-[768px]",
        children: [
          /* @__PURE__ */ (0, e.jsxs)("div", {
            className: "flex flex-col gap-4 md:gap-6",
            children: [/* @__PURE__ */ (0, e.jsxs)("div", {
              className: "flex flex-col gap-3 md:gap-4",
              children: [/* @__PURE__ */ (0, e.jsxs)("div", {
                className: "inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-md border border-border bg-background text-sm font-medium text-secondary-foreground delight-stagger",
                style: { "--delight-delay": "0ms" },
                children: [/* @__PURE__ */ (0, e.jsx)("span", { className: "size-1.5 rounded-full bg-primary/10" }), l]
              }), /* @__PURE__ */ (0, e.jsx)("h1", {
                className: "text-display-md md:text-display-xl font-semibold text-foreground delight-stagger",
                style: { "--delight-delay": "100ms" },
                children: y
              })]
            }), /* @__PURE__ */ (0, e.jsx)("p", {
              className: "text-lg md:text-xl text-muted-foreground leading-7 md:leading-[30px] max-w-prose delight-stagger",
              style: { "--delight-delay": "200ms" },
              children: j
            })]
          }),
          /* @__PURE__ */ (0, e.jsxs)("div", {
            className: "flex flex-col md:flex-row gap-3 w-full md:w-auto delight-stagger",
            style: { "--delight-delay": "300ms" },
            children: [/* @__PURE__ */ (0, e.jsx)(i, {
              appearance: "outline",
              variant: "secondary",
              size: "lg",
              startIcon: /* @__PURE__ */ (0, e.jsx)(b, { className: "size-5" }),
              onClick: w,
              className: "w-full md:w-auto md:px-6 md:py-4 md:h-14 md:text-lg",
              children: f
            }), /* @__PURE__ */ (0, e.jsx)(i, {
              appearance: "gradient",
              variant: "primary",
              size: "lg",
              onClick: N,
              className: "w-full md:w-auto md:px-6 md:py-4 md:h-14 md:text-lg",
              children: n === "Take me home" ? "Go home" : n
            })]
          }),
          m.length > 0 && /* @__PURE__ */ (0, e.jsx)("div", {
            className: "flex flex-col gap-6 delight-stagger",
            style: { "--delight-delay": "400ms" },
            children: m.map((d, x) => /* @__PURE__ */ (0, e.jsx)(H, {
              title: d.actionText,
              description: d.description,
              actionText: d.actionText,
              onClick: d.onClick,
              href: d.href
            }, x))
          })
        ]
      })
    })
  }) : s === "simple03" ? /* @__PURE__ */ (0, e.jsx)("div", {
    ref: u,
    "data-slot": "not-found-page",
    className: o(v({ variant: s }), "py-16 md:py-24 px-4 md:px-8", t),
    ...h,
    children: /* @__PURE__ */ (0, e.jsxs)("div", {
      className: "w-full max-w-[1280px] flex flex-col gap-16 md:gap-24 items-center",
      children: [/* @__PURE__ */ (0, e.jsxs)("div", {
        className: "relative w-full flex flex-col items-center md:min-h-[768px]",
        children: [I && /* @__PURE__ */ (0, e.jsx)(R, {
          pattern: "circular",
          offset: "icon-center"
        }), /* @__PURE__ */ (0, e.jsxs)("div", {
          className: "relative z-10 flex flex-col gap-8 md:gap-12 items-center max-w-[768px] flex-1 md:justify-center",
          children: [/* @__PURE__ */ (0, e.jsxs)("div", {
            className: "flex flex-col gap-4 md:gap-6 items-center",
            children: [/* @__PURE__ */ (0, e.jsx)("div", {
              className: "delight-stagger",
              style: { "--delight-delay": "0ms" },
              children: /* @__PURE__ */ (0, e.jsx)(T, {
                size: "lg",
                icon: O || /* @__PURE__ */ (0, e.jsx)(D, {})
              })
            }), /* @__PURE__ */ (0, e.jsxs)("div", {
              className: "flex flex-col gap-4 md:gap-6 items-center",
              children: [/* @__PURE__ */ (0, e.jsx)("h1", {
                className: "text-display-md md:text-display-xl font-semibold text-foreground delight-stagger",
                style: { "--delight-delay": "100ms" },
                children: y
              }), /* @__PURE__ */ (0, e.jsx)("p", {
                className: "text-lg md:text-xl text-muted-foreground leading-7 md:leading-[30px] max-w-prose whitespace-pre-line delight-stagger",
                style: { "--delight-delay": "200ms" },
                children: j
              })]
            })]
          }), /* @__PURE__ */ (0, e.jsxs)("div", {
            className: "flex flex-col md:flex-row gap-3 w-full md:w-auto delight-stagger",
            style: { "--delight-delay": "300ms" },
            children: [/* @__PURE__ */ (0, e.jsx)(i, {
              appearance: "gradient",
              variant: "primary",
              size: "lg",
              onClick: N,
              className: "w-full md:w-auto md:px-6 md:py-4 md:h-14 md:text-lg",
              children: n
            }), /* @__PURE__ */ (0, e.jsx)(i, {
              appearance: "outline",
              variant: "secondary",
              size: "lg",
              startIcon: /* @__PURE__ */ (0, e.jsx)(b, { className: "size-5" }),
              onClick: w,
              className: "w-full md:w-auto md:px-6 md:py-4 md:h-14 md:text-lg",
              children: f
            })]
          })]
        })]
      }), m.length > 0 && /* @__PURE__ */ (0, e.jsx)("div", {
        className: "w-full flex flex-col gap-10 md:hidden",
        children: m.map((d, x) => /* @__PURE__ */ (0, e.jsx)(M, { ...d }, x))
      })]
    })
  }) : s === "simple04" ? /* @__PURE__ */ (0, e.jsx)("div", {
    ref: u,
    "data-slot": "not-found-page",
    className: o(v({ variant: s }), "py-16 md:py-24 px-4 md:px-8", t),
    ...h,
    children: /* @__PURE__ */ (0, e.jsxs)("div", {
      className: "w-full max-w-[1280px] flex flex-col gap-16 md:gap-24 items-center",
      children: [/* @__PURE__ */ (0, e.jsxs)("div", {
        className: "flex flex-col gap-8 md:gap-12 items-center max-w-[768px]",
        children: [/* @__PURE__ */ (0, e.jsxs)("div", {
          className: "flex flex-col gap-4 md:gap-6 items-center",
          children: [/* @__PURE__ */ (0, e.jsxs)("div", {
            className: "flex flex-col gap-3 items-center",
            children: [/* @__PURE__ */ (0, e.jsx)("span", {
              className: "text-base font-semibold text-primary leading-6 delight-stagger",
              style: { "--delight-delay": "0ms" },
              children: l
            }), /* @__PURE__ */ (0, e.jsx)("h1", {
              className: "text-display-md md:text-display-xl font-semibold text-foreground delight-stagger",
              style: { "--delight-delay": "100ms" },
              children: y
            })]
          }), /* @__PURE__ */ (0, e.jsx)("p", {
            className: "text-lg md:text-xl text-muted-foreground leading-7 md:leading-[30px] max-w-prose whitespace-pre-line delight-stagger",
            style: { "--delight-delay": "200ms" },
            children: j
          })]
        }), /* @__PURE__ */ (0, e.jsxs)("div", {
          className: "flex flex-col md:flex-row gap-3 w-full md:w-auto delight-stagger",
          style: { "--delight-delay": "300ms" },
          children: [/* @__PURE__ */ (0, e.jsx)(i, {
            appearance: "gradient",
            variant: "primary",
            size: "lg",
            onClick: N,
            className: "w-full md:w-auto md:px-6 md:py-4 md:h-14 md:text-lg",
            children: n === "Take me home" ? "Go home" : n
          }), /* @__PURE__ */ (0, e.jsx)(i, {
            appearance: "outline",
            variant: "secondary",
            size: "lg",
            startIcon: /* @__PURE__ */ (0, e.jsx)(b, { className: "size-5" }),
            onClick: w,
            className: "w-full md:w-auto md:px-6 md:py-4 md:h-14 md:text-lg",
            children: f
          })]
        })]
      }), m.length > 0 && /* @__PURE__ */ (0, e.jsx)("div", {
        className: "w-full delight-stagger",
        style: { "--delight-delay": "400ms" },
        children: /* @__PURE__ */ (0, e.jsx)("div", {
          className: "flex flex-col md:flex-row md:flex-wrap gap-4 md:gap-8",
          children: m.map((d, x) => /* @__PURE__ */ (0, e.jsx)("div", {
            className: "flex-1 min-w-[280px]",
            children: /* @__PURE__ */ (0, e.jsx)(q, {
              ...d,
              layout: "vertical"
            })
          }, x))
        })
      })]
    })
  }) : null;
});
F.displayName = "NotFoundPage";
var Z = W();
function $(t) {
  return {
    onPrimaryAction: (s) => {
      t.dispatchEvent(new CustomEvent("primary-action", {
        detail: s,
        bubbles: !0,
        composed: !0
      }));
    },
    onSecondaryAction: (s) => {
      t.dispatchEvent(new CustomEvent("secondary-action", {
        detail: s,
        bubbles: !0,
        composed: !0
      }));
    }
  };
}
function B(t) {
  const { _hostElement: s, ...l } = t, a = _.useMemo(() => s ? $(s) : {}, [s]);
  return _.createElement(F, {
    ...l,
    ...a
  });
}
var g = {
  variant: "string",
  size: "string",
  className: "string",
  errorLabel: "string",
  title: "string",
  description: "string",
  primaryActionText: "string",
  primaryActionHref: "string",
  secondaryActionText: "string",
  secondaryActionHref: "string",
  links: "json",
  showGridPattern: "boolean",
  icon: "json"
};
function P(t, s) {
  if (t !== null)
    switch (s) {
      case "number":
        return Number(t);
      case "boolean":
        return t !== "false" && t !== "0";
      case "json":
        try {
          return JSON.parse(t);
        } catch {
          return t;
        }
      default:
        return t;
    }
}
var S = class extends HTMLElement {
  _root = null;
  _childrenContainer = null;
  _props = {};
  _initialized = !1;
  connectedCallback() {
    setTimeout(() => this._initialize(), 0);
  }
  _initialize() {
    if (this._initialized) return;
    this._initialized = !0;
    const t = [];
    for (const l of Array.from(this.childNodes))
      l.nodeType === Node.TEXT_NODE && !l.textContent?.trim() || t.push(l);
    const s = document.createElement("div");
    for (s.style.display = "contents", this._childrenContainer = document.createElement("div"), this._childrenContainer.style.display = "contents", t.forEach((l) => this._childrenContainer.appendChild(l)); this.firstChild; ) this.removeChild(this.firstChild);
    this.appendChild(s), this._root = (0, Z.createRoot)(s), this._render();
  }
  disconnectedCallback() {
    this._root?.unmount(), this._root = null;
  }
  attributeChangedCallback(t, s, l) {
    this._render();
  }
  static get observedAttributes() {
    return Object.keys(g).map((t) => t.replace(/([A-Z])/g, "-$1").toLowerCase());
  }
  _setProp(t, s) {
    const l = g[t] || "string";
    this._props[t] = this._parseValue(s, l), this._render();
  }
  _parseValue(t, s) {
    if (s === "boolean" && typeof t == "boolean" || s === "number" && typeof t == "number" || s === "string" && typeof t == "string") return t;
    if (typeof t == "string") switch (s) {
      case "boolean":
        return t !== "false" && t !== "0" && t !== "";
      case "number":
        return Number(t);
      case "json":
        try {
          return JSON.parse(t);
        } catch {
          return t;
        }
      default:
        return t;
    }
    return t;
  }
  _getProp(t) {
    if (t in this._props) return this._props[t];
    const s = t.replace(/([A-Z])/g, "-$1").toLowerCase(), l = g[t] || "string";
    return P(this.getAttribute(s), l);
  }
  _render() {
    if (!this._root) return;
    const t = {};
    for (const [l, a] of Object.entries(g)) if (l in this._props) t[l] = this._props[l];
    else {
      const r = l.replace(/([A-Z])/g, "-$1").toLowerCase();
      t[l] = P(this.getAttribute(r), a);
    }
    const s = _.createElement(B, {
      ...t,
      _hostElement: this
    });
    this._root.render(s);
  }
};
for (const t of Object.keys(g)) Object.defineProperty(S.prototype, t, {
  get() {
    return this._getProp(t);
  },
  set(s) {
    this._setProp(t, s);
  },
  enumerable: !0,
  configurable: !0
});
typeof customElements < "u" && !customElements.get("hf-not-found-page") && customElements.define("hf-not-found-page", S);
export {
  S as NotFoundPageWC,
  S as default
};

//# sourceMappingURL=hf-not-found-page.js.map