@godxjp/ui 33.19.0 → 33.21.0

package/dist/components/layout/editorial.js

@@ -0,0 +1,867 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { createPortal } from "react-dom";
+import { useLayoutEffect } from "@react-aria/utils";
+import { ArrowRight, Bookmark, Search } from "lucide-react";
+import { isImeComposing } from "../../lib/ime.js";
+import { useOverlayPortalContainer } from "../../lib/overlay-portal.js";
+import { Slot } from "../../lib/slot.js";
+import { Breadcrumb } from "./breadcrumb.js";
+import { EditorialSearchInline } from "./editorial-account.js";
+import { cn } from "../../lib/utils.js";
+function intoElement(element, className, content, extra) {
+  const props = element.props;
+  return React.cloneElement(
+    element,
+    { ...extra, className: cn(className, props.className) },
+    content
+  );
+}
+function EditorialSection({
+  children,
+  tone = "default",
+  divider = "none",
+  spacing = "none",
+  as: Tag = "section",
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx(
+    Tag,
+    {
+      ...rest,
+      "data-slot": "editorial-section",
+      "data-tone": tone === "default" ? void 0 : tone,
+      "data-divider": divider === "none" ? void 0 : divider,
+      "data-spacing": spacing === "none" ? void 0 : spacing,
+      className: cn("ui-editorial-section", className),
+      children: /* @__PURE__ */ jsx("div", { className: "ui-editorial-section-content", children })
+    }
+  );
+}
+function EditorialHero({
+  eyebrow,
+  title,
+  description,
+  search,
+  footer,
+  media,
+  className
+}) {
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "editorial-hero", className: cn("ui-editorial-hero", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "ui-editorial-hero-copy", children: [
+      eyebrow,
+      /* @__PURE__ */ jsx("h1", { className: "ui-editorial-hero-title", children: title }),
+      description != null && /* @__PURE__ */ jsx("p", { className: "ui-editorial-hero-description", children: description }),
+      search != null && /* @__PURE__ */ jsx("div", { className: "ui-editorial-hero-search", children: search }),
+      footer != null && /* @__PURE__ */ jsx("div", { className: "ui-editorial-hero-footer", children: footer })
+    ] }),
+    media != null && /* @__PURE__ */ jsx("div", { className: "ui-editorial-hero-media", children: media })
+  ] });
+}
+function Eyebrow({ children, variant = "ruled", as: Tag = "p", className }) {
+  return /* @__PURE__ */ jsx(
+    Tag,
+    {
+      "data-slot": "eyebrow",
+      "data-variant": variant,
+      className: cn("ui-editorial-eyebrow", className),
+      children
+    }
+  );
+}
+function EditorialSectionHead({
+  eyebrow,
+  title,
+  description,
+  action,
+  level = 2,
+  scale = "section",
+  titleId,
+  className
+}) {
+  const Heading = level === 3 ? "h3" : "h2";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "editorial-section-head",
+      "data-scale": scale === "module" ? "module" : void 0,
+      className: cn("ui-editorial-section-head", className),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "ui-editorial-section-head-copy", children: [
+          eyebrow,
+          /* @__PURE__ */ jsx(Heading, { id: titleId, className: "ui-editorial-section-head-title", children: title }),
+          description != null && /* @__PURE__ */ jsx("p", { className: "ui-editorial-section-head-description", children: description })
+        ] }),
+        action != null && /* @__PURE__ */ jsx("div", { className: "ui-editorial-section-head-action", children: action })
+      ]
+    }
+  );
+}
+function EditorialBreadcrumb({
+  items,
+  linkComponent,
+  ariaLabel,
+  className
+}) {
+  return /* @__PURE__ */ jsx("div", { "data-slot": "editorial-breadcrumb", className: cn("ui-editorial-breadcrumb", className), children: /* @__PURE__ */ jsx(Breadcrumb, { items, linkComponent, ariaLabel }) });
+}
+function EditorialPageHeader({
+  breadcrumb,
+  linkComponent,
+  breadcrumbLabel,
+  eyebrow,
+  title,
+  description,
+  actions,
+  search,
+  titleId,
+  eyebrowTone = "page",
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "editorial-page-header",
+      "data-eyebrow-tone": eyebrowTone === "page" ? void 0 : eyebrowTone,
+      className: cn("ui-editorial-page-header", className),
+      children: [
+        breadcrumb && breadcrumb.length > 0 && /* @__PURE__ */ jsx(
+          EditorialBreadcrumb,
+          {
+            items: breadcrumb,
+            linkComponent,
+            ariaLabel: breadcrumbLabel
+          }
+        ),
+        /* @__PURE__ */ jsxs("header", { className: "ui-editorial-page-header-row", children: [
+          /* @__PURE__ */ jsxs("div", { className: "ui-editorial-page-header-copy", children: [
+            eyebrow,
+            /* @__PURE__ */ jsx("h1", { id: titleId, className: "ui-editorial-page-header-title", children: title }),
+            description != null && /* @__PURE__ */ jsx("p", { className: "ui-editorial-page-header-description", children: description }),
+            search != null && /* @__PURE__ */ jsx("div", { className: "ui-editorial-page-header-search", children: search })
+          ] }),
+          actions != null && /* @__PURE__ */ jsx("div", { className: "ui-editorial-page-header-actions", children: actions })
+        ] })
+      ]
+    }
+  );
+}
+function EditorialArticle({
+  eyebrow,
+  title,
+  intro,
+  children,
+  titleId,
+  className
+}) {
+  return /* @__PURE__ */ jsxs("article", { "data-slot": "editorial-article", className: cn("ui-editorial-article", className), children: [
+    eyebrow,
+    /* @__PURE__ */ jsx("h1", { id: titleId, className: "ui-editorial-article-title", children: title }),
+    intro != null && /* @__PURE__ */ jsx("p", { className: "ui-editorial-article-intro", children: intro }),
+    children
+  ] });
+}
+function EditorialArticleSection({
+  title,
+  paragraphs,
+  children,
+  titleId,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      "data-slot": "editorial-article-section",
+      "aria-labelledby": titleId,
+      className: cn("ui-editorial-article-section", className),
+      children: [
+        /* @__PURE__ */ jsx("h2", { id: titleId, className: "ui-editorial-article-heading", children: title }),
+        paragraphs?.map((paragraph, index) => /* @__PURE__ */ jsx("p", { className: "ui-editorial-article-paragraph", children: paragraph }, index)),
+        children
+      ]
+    }
+  );
+}
+function EditorialNote({ children, className }) {
+  return /* @__PURE__ */ jsx("div", { role: "note", "data-slot": "editorial-note", className: cn("ui-editorial-note", className), children });
+}
+function EditorialPanel({
+  tag,
+  title,
+  items,
+  children,
+  level = 2,
+  className
+}) {
+  const Heading = level === 3 ? "h3" : "h2";
+  return /* @__PURE__ */ jsxs("article", { "data-slot": "editorial-panel", className: cn("ui-editorial-panel", className), children: [
+    tag != null && /* @__PURE__ */ jsx("span", { className: "ui-editorial-panel-tag", children: tag }),
+    /* @__PURE__ */ jsx(Heading, { className: "ui-editorial-panel-title", children: title }),
+    items && items.length > 0 && /* @__PURE__ */ jsx("ul", { className: "ui-editorial-panel-list", children: items.map((item, index) => /* @__PURE__ */ jsx("li", { children: item }, index)) }),
+    children
+  ] });
+}
+function EditorialTextLink({
+  children,
+  asChild,
+  className,
+  ...rest
+}) {
+  const icon = /* @__PURE__ */ jsx(ArrowRight, { "aria-hidden": true, className: "ui-editorial-text-link-icon" });
+  if (asChild && React.isValidElement(children)) {
+    const child = children;
+    return intoElement(
+      child,
+      cn("ui-editorial-text-link", className),
+      /* @__PURE__ */ jsxs(Fragment, { children: [
+        child.props.children,
+        icon
+      ] }),
+      { ...rest, "data-slot": "editorial-text-link" }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "a",
+    {
+      ...rest,
+      "data-slot": "editorial-text-link",
+      className: cn("ui-editorial-text-link", className),
+      children: [
+        children,
+        icon
+      ]
+    }
+  );
+}
+function EditorialSearch(props) {
+  if (props.variant === "inline") {
+    const { label, id, placeholder, defaultValue, onSearch, debounce, count, className } = props;
+    return /* @__PURE__ */ jsx(
+      EditorialSearchInline,
+      {
+        label,
+        id,
+        placeholder,
+        defaultValue,
+        onSearch: onSearch ? (query) => onSearch(query) : void 0,
+        debounce,
+        count,
+        className
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(EditorialSearchInset, { ...props });
+}
+function EditorialSearchInset({
+  label,
+  placeholder,
+  submitLabel,
+  name = "q",
+  defaultValue,
+  action,
+  onSearch,
+  scope,
+  suggestions,
+  suggestionsFooter,
+  suggestionsLabel,
+  onQueryChange,
+  linkComponent: LinkComponent = "a",
+  id,
+  className
+}) {
+  const reactId = React.useId();
+  const inputId = id ?? `editorial-search-${reactId}`;
+  const listboxId = `${inputId}-suggestions`;
+  const combobox = suggestions !== void 0 || suggestionsFooter !== void 0;
+  const composing = React.useRef(false);
+  const [focused, setFocused] = React.useState(false);
+  const [dismissed, setDismissed] = React.useState(false);
+  const [hasQuery, setHasQuery] = React.useState(Boolean(defaultValue?.trim()));
+  const [active, setActive] = React.useState(-1);
+  const groups = (suggestions ?? []).filter((group) => group.items.length > 0);
+  const rowKeys = [
+    ...groups.flatMap((group) => group.items.map((item) => `${group.id}:${item.id}`)),
+    ...suggestionsFooter ? ["footer"] : []
+  ];
+  const rowsKey = rowKeys.join("|");
+  const open = combobox && focused && !dismissed && hasQuery && rowKeys.length > 0;
+  const formRef = React.useRef(null);
+  const portalContainer = useOverlayPortalContainer();
+  const anchor = usePopupAnchor(formRef, open);
+  const optionId = React.useCallback(
+    (index) => `${listboxId}-option-${index}`,
+    [listboxId]
+  );
+  React.useEffect(() => setActive(-1), [rowsKey]);
+  React.useEffect(() => {
+    if (open && active >= 0) {
+      document.getElementById(optionId(active))?.scrollIntoView?.({ block: "nearest" });
+    }
+  }, [open, active, optionId]);
+  const report = (value) => {
+    setHasQuery(value.trim() !== "");
+    setDismissed(false);
+    onQueryChange?.(value);
+  };
+  const onKeyDown = (event) => {
+    if (isImeComposing(event)) return;
+    if (!open) {
+      if (event.key === "ArrowDown" && hasQuery && rowKeys.length > 0) {
+        event.preventDefault();
+        setDismissed(false);
+      }
+      return;
+    }
+    const count = rowKeys.length;
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      setActive((index) => (index + 1) % count);
+    } else if (event.key === "ArrowUp") {
+      event.preventDefault();
+      setActive((index) => index <= 0 ? count - 1 : index - 1);
+    } else if (event.key === "Escape") {
+      event.preventDefault();
+      setDismissed(true);
+      setActive(-1);
+    } else if (event.key === "Enter" && active >= 0) {
+      event.preventDefault();
+      document.getElementById(optionId(active))?.click();
+    }
+  };
+  let rowIndex = -1;
+  const option = (key, href, rowClass, children) => {
+    rowIndex += 1;
+    const index = rowIndex;
+    return /* @__PURE__ */ jsx(
+      LinkComponent,
+      {
+        id: optionId(index),
+        href,
+        role: "option",
+        "aria-selected": index === active,
+        tabIndex: -1,
+        className: rowClass,
+        onClick: () => {
+          setDismissed(true);
+          setActive(-1);
+        },
+        children
+      },
+      key
+    );
+  };
+  const comboboxProps = combobox ? {
+    role: "combobox",
+    "aria-autocomplete": "list",
+    "aria-expanded": open,
+    "aria-controls": listboxId,
+    "aria-activedescendant": open && active >= 0 ? optionId(active) : void 0,
+    onChange: (event) => {
+      if (!composing.current) report(event.currentTarget.value);
+    },
+    onCompositionStart: () => {
+      composing.current = true;
+    },
+    onCompositionEnd: (event) => {
+      composing.current = false;
+      report(event.currentTarget.value);
+    },
+    onFocus: () => setFocused(true),
+    onBlur: () => {
+      setFocused(false);
+      setActive(-1);
+    },
+    onKeyDown
+  } : {};
+  return /* @__PURE__ */ jsxs(
+    "form",
+    {
+      ref: formRef,
+      role: "search",
+      "aria-label": label,
+      action,
+      "data-slot": "editorial-search",
+      className: cn("ui-editorial-search", className),
+      onSubmit: (event) => {
+        setDismissed(true);
+        if (!onSearch) return;
+        event.preventDefault();
+        const value = new FormData(event.currentTarget).get(name);
+        onSearch(typeof value === "string" ? value.trim() : "");
+      },
+      children: [
+        scope != null && /* @__PURE__ */ jsx("span", { "data-slot": "editorial-search-scope", className: "ui-editorial-search-scope", children: scope }),
+        /* @__PURE__ */ jsx("label", { htmlFor: inputId, className: "sr-only", children: label }),
+        /* @__PURE__ */ jsx(Search, { "aria-hidden": true, className: "ui-editorial-search-icon" }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            id: inputId,
+            name,
+            type: "search",
+            placeholder,
+            defaultValue,
+            autoComplete: "off",
+            className: "ui-editorial-search-input",
+            ...comboboxProps
+          }
+        ),
+        /* @__PURE__ */ jsxs("button", { type: "submit", className: "ui-editorial-search-button ui-focus-ring", children: [
+          submitLabel,
+          /* @__PURE__ */ jsx(ArrowRight, { "aria-hidden": true, className: "ui-editorial-search-button-icon" })
+        ] }),
+        combobox && anchor.mounted && createPortal(
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              "data-slot": "editorial-search-popup",
+              className: "ui-editorial-search-popup",
+              hidden: !open,
+              style: anchor.style,
+              onMouseDown: (event) => event.preventDefault(),
+              children: /* @__PURE__ */ jsxs("div", { role: "listbox", id: listboxId, "aria-label": suggestionsLabel ?? label, children: [
+                groups.map((group) => /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    role: "group",
+                    "aria-labelledby": `${listboxId}-group-${group.id}`,
+                    className: "ui-editorial-search-group",
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          role: "presentation",
+                          id: `${listboxId}-group-${group.id}`,
+                          className: "ui-editorial-search-group-label",
+                          children: group.label
+                        }
+                      ),
+                      group.items.map(
+                        (item) => option(
+                          `${group.id}:${item.id}`,
+                          item.href,
+                          "ui-editorial-search-suggestion",
+                          /* @__PURE__ */ jsxs(Fragment, { children: [
+                            item.media != null && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "ui-editorial-search-suggestion-media", children: item.media }),
+                            /* @__PURE__ */ jsxs("span", { className: "ui-editorial-search-suggestion-text", children: [
+                              /* @__PURE__ */ jsx("span", { className: "ui-editorial-search-suggestion-label", children: item.label }),
+                              item.description != null && /* @__PURE__ */ jsx("span", { className: "ui-editorial-search-suggestion-description", children: item.description })
+                            ] }),
+                            item.meta != null && /* @__PURE__ */ jsx("span", { className: "ui-editorial-search-suggestion-meta", children: item.meta })
+                          ] })
+                        )
+                      )
+                    ]
+                  },
+                  group.id
+                )),
+                suggestionsFooter && option(
+                  "footer",
+                  suggestionsFooter.href,
+                  "ui-editorial-search-suggestions-footer",
+                  /* @__PURE__ */ jsxs(Fragment, { children: [
+                    /* @__PURE__ */ jsx("span", { className: "ui-editorial-search-suggestion-label", children: suggestionsFooter.label }),
+                    /* @__PURE__ */ jsx(
+                      ArrowRight,
+                      {
+                        "aria-hidden": true,
+                        className: "ui-editorial-search-suggestions-footer-icon"
+                      }
+                    )
+                  ] })
+                )
+              ] })
+            }
+          ),
+          portalContainer ?? document.body
+        )
+      ]
+    }
+  );
+}
+function usePopupAnchor(formRef, open) {
+  const [mounted, setMounted] = React.useState(false);
+  const [style, setStyle] = React.useState();
+  React.useEffect(() => setMounted(true), []);
+  useLayoutEffect(() => {
+    const form = formRef.current;
+    if (!open || !form) return;
+    const update = () => {
+      const rect = form.getBoundingClientRect();
+      setStyle({
+        top: rect.bottom,
+        left: rect.left,
+        width: rect.width,
+        ["--editorial-search-popup-room"]: `${Math.max(0, window.innerHeight - rect.bottom)}px`
+      });
+    };
+    update();
+    window.addEventListener("scroll", update, true);
+    window.addEventListener("resize", update);
+    const observer = typeof ResizeObserver === "undefined" ? void 0 : new ResizeObserver(update);
+    observer?.observe(form);
+    return () => {
+      window.removeEventListener("scroll", update, true);
+      window.removeEventListener("resize", update);
+      observer?.disconnect();
+    };
+  }, [formRef, open]);
+  return { mounted, style };
+}
+function EditorialPillNav({ label, children, className, ...rest }) {
+  return /* @__PURE__ */ jsxs(
+    "nav",
+    {
+      ...rest,
+      "data-slot": "editorial-pill-nav",
+      className: cn("ui-editorial-pill-nav", className),
+      children: [
+        label != null && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "ui-editorial-pill-nav-label", children: label }),
+        children
+      ]
+    }
+  );
+}
+function EditorialPillNavItem({
+  children,
+  asChild,
+  icon,
+  className,
+  ...rest
+}) {
+  const marker = icon === "dot" ? /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "ui-editorial-pill-dot" }) : icon != null ? /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "ui-editorial-pill-icon", children: icon }) : null;
+  if (asChild && React.isValidElement(children)) {
+    const child = children;
+    return intoElement(
+      child,
+      cn("ui-editorial-pill ui-focus-ring", className),
+      /* @__PURE__ */ jsxs(Fragment, { children: [
+        marker,
+        child.props.children
+      ] }),
+      { ...rest, "data-slot": "editorial-pill" }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "a",
+    {
+      ...rest,
+      "data-slot": "editorial-pill",
+      className: cn("ui-editorial-pill ui-focus-ring", className),
+      children: [
+        marker,
+        children
+      ]
+    }
+  );
+}
+const FAN_POSITIONS = ["start", "center", "end"];
+function CardShowcase({ preset, items, label, caption, className }) {
+  if (preset === "binder") {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-slot": "card-showcase",
+        "data-preset": "binder",
+        className: cn("ui-card-showcase", className),
+        children: items.map((item, index) => /* @__PURE__ */ jsx("span", { className: "ui-card-showcase-pocket", children: item }, index))
+      }
+    );
+  }
+  const placed = FAN_POSITIONS.map((position, index) => ({ position, item: items[index] })).filter(
+    (entry) => entry.item != null
+  );
+  const painted = [
+    ...placed.filter((entry) => entry.position !== "center"),
+    ...placed.filter((entry) => entry.position === "center")
+  ];
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "card-showcase", "data-preset": "fan", className: cn("ui-card-showcase", className), children: [
+    /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "ui-card-showcase-orbit", "data-orbit": "1" }),
+    /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "ui-card-showcase-orbit", "data-orbit": "2" }),
+    /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "ui-card-showcase-orbit", "data-orbit": "3" }),
+    /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "ui-card-showcase-glow" }),
+    label != null && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "ui-card-showcase-label", children: label }),
+    /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "ui-card-showcase-star", children: "\u2726" }),
+    painted.map(({ position, item }) => /* @__PURE__ */ jsx("div", { className: "ui-card-showcase-card", "data-position": position, children: item }, position)),
+    /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "ui-card-showcase-star", "data-size": "small", children: "\u2726" }),
+    caption && /* @__PURE__ */ jsxs("div", { className: "ui-card-showcase-caption", children: [
+      caption.icon != null && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "ui-card-showcase-caption-icon", children: caption.icon }),
+      /* @__PURE__ */ jsxs("span", { className: "ui-card-showcase-caption-copy", children: [
+        caption.overline != null && /* @__PURE__ */ jsx("small", { className: "ui-card-showcase-caption-overline", children: caption.overline }),
+        /* @__PURE__ */ jsx("strong", { className: "ui-card-showcase-caption-title", children: caption.title })
+      ] })
+    ] })
+  ] });
+}
+function EditorialBanner({
+  eyebrow,
+  title,
+  description,
+  action,
+  media,
+  level = 2,
+  className
+}) {
+  const Heading = level === 3 ? "h3" : "h2";
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "editorial-banner", className: cn("ui-editorial-banner", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "ui-editorial-banner-copy", children: [
+      eyebrow,
+      /* @__PURE__ */ jsx(Heading, { className: "ui-editorial-banner-title", children: title }),
+      description != null && /* @__PURE__ */ jsx("p", { className: "ui-editorial-banner-description", children: description }),
+      action != null && /* @__PURE__ */ jsx("div", { className: "ui-editorial-banner-action", children: action })
+    ] }),
+    media != null && /* @__PURE__ */ jsx("div", { className: "ui-editorial-banner-media", children: media })
+  ] });
+}
+function CatalogCard({
+  variant = "card",
+  media,
+  favorite,
+  overline,
+  title,
+  level = 3,
+  meta,
+  priceLabel,
+  price,
+  change,
+  footer,
+  className
+}) {
+  const Heading = level === 2 ? "h2" : level === 4 ? "h4" : "h3";
+  return /* @__PURE__ */ jsxs(
+    "article",
+    {
+      "data-slot": "catalog-card",
+      "data-variant": variant,
+      className: cn("ui-catalog-card", className),
+      children: [
+        favorite && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-pressed": favorite.pressed,
+            "aria-label": favorite.label,
+            disabled: favorite.disabled,
+            className: "ui-catalog-card-favorite ui-focus-ring",
+            onClick: () => favorite.onPressedChange(!favorite.pressed),
+            children: /* @__PURE__ */ jsx(Bookmark, { "aria-hidden": true, className: "ui-catalog-card-favorite-icon" })
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "ui-catalog-card-media", children: media }),
+        /* @__PURE__ */ jsxs("div", { className: "ui-catalog-card-body", children: [
+          overline != null && /* @__PURE__ */ jsx("p", { className: "ui-catalog-card-overline", children: overline }),
+          /* @__PURE__ */ jsx(Heading, { className: "ui-catalog-card-title", children: title }),
+          meta != null && /* @__PURE__ */ jsx("div", { className: "ui-catalog-card-meta", children: meta }),
+          priceLabel != null && /* @__PURE__ */ jsx("p", { className: "ui-catalog-card-price-label", children: priceLabel }),
+          (price != null || change != null) && /* @__PURE__ */ jsxs("div", { className: "ui-catalog-card-price-line", children: [
+            price != null && /* @__PURE__ */ jsx("span", { className: "ui-catalog-card-price", children: price }),
+            change != null && /* @__PURE__ */ jsx("span", { className: "ui-catalog-card-change", children: change })
+          ] }),
+          footer != null && /* @__PURE__ */ jsx("div", { className: "ui-catalog-card-footer", children: footer })
+        ] })
+      ]
+    }
+  );
+}
+function CatalogCardTag({ children, className }) {
+  return /* @__PURE__ */ jsx("span", { className: cn("ui-catalog-card-tag", className), children });
+}
+function EditorialCard({
+  variant,
+  link,
+  media,
+  overline,
+  title,
+  description,
+  action,
+  level = 3,
+  titleId,
+  className
+}) {
+  const reactId = React.useId();
+  const Heading = level === 2 ? "h2" : level === 4 ? "h4" : "h3";
+  if (variant === "spotlight") {
+    return intoElement(
+      link,
+      cn("ui-editorial-card", className),
+      /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs("div", { className: "ui-editorial-card-copy", children: [
+          overline != null && /* @__PURE__ */ jsx("span", { className: "ui-editorial-card-overline", children: overline }),
+          /* @__PURE__ */ jsx(Heading, { className: "ui-editorial-card-title", children: title }),
+          description != null && /* @__PURE__ */ jsxs("p", { className: "ui-editorial-card-description", children: [
+            description,
+            /* @__PURE__ */ jsx(ArrowRight, { "aria-hidden": true, className: "ui-editorial-card-description-icon" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: "ui-editorial-card-media", children: media })
+      ] }),
+      { "data-slot": "editorial-card", "data-variant": "spotlight" }
+    );
+  }
+  const headingId = titleId ?? `editorial-card-${reactId}`;
+  return /* @__PURE__ */ jsx(
+    "article",
+    {
+      "data-slot": "editorial-card",
+      "data-variant": "journal",
+      className: cn("ui-editorial-card", className),
+      children: intoElement(
+        link,
+        "ui-editorial-card-link ui-focus-ring",
+        /* @__PURE__ */ jsxs(Fragment, { children: [
+          media != null && /* @__PURE__ */ jsx("div", { className: "ui-editorial-card-media", children: media }),
+          /* @__PURE__ */ jsxs("div", { className: "ui-editorial-card-copy", children: [
+            overline != null && /* @__PURE__ */ jsx("span", { className: "ui-editorial-card-overline", children: overline }),
+            /* @__PURE__ */ jsx(Heading, { id: headingId, className: "ui-editorial-card-title", children: title }),
+            description != null && /* @__PURE__ */ jsx("p", { className: "ui-editorial-card-description", children: description }),
+            /* @__PURE__ */ jsxs("span", { className: "ui-editorial-card-footer", children: [
+              /* @__PURE__ */ jsx("span", { children: action }),
+              /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "ui-editorial-card-arrow", children: /* @__PURE__ */ jsx(ArrowRight, { className: "ui-editorial-card-arrow-icon" }) })
+            ] })
+          ] })
+        ] }),
+        { "aria-labelledby": headingId }
+      )
+    }
+  );
+}
+function EditorialMasthead({
+  brand,
+  nav,
+  navLabel,
+  actions,
+  menu,
+  className
+}) {
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "editorial-masthead", className: cn("ui-editorial-masthead", className), children: [
+    /* @__PURE__ */ jsx("div", { className: "ui-editorial-masthead-brand", children: brand }),
+    nav != null && /* @__PURE__ */ jsx(
+      "nav",
+      {
+        "aria-label": navLabel,
+        "data-slot": "editorial-masthead-nav",
+        className: "ui-editorial-masthead-nav",
+        children: nav
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { "data-slot": "editorial-masthead-actions", className: "ui-editorial-masthead-actions", children: [
+      actions,
+      menu != null && /* @__PURE__ */ jsx("span", { className: "ui-editorial-masthead-menu", children: menu })
+    ] })
+  ] });
+}
+function EditorialMastheadLink({
+  children,
+  asChild,
+  className,
+  ...rest
+}) {
+  if (asChild && React.isValidElement(children)) {
+    const child = children;
+    return intoElement(
+      child,
+      cn("ui-editorial-masthead-link ui-focus-ring", className),
+      child.props.children,
+      { ...rest, "data-slot": "editorial-masthead-link" }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "a",
+    {
+      ...rest,
+      "data-slot": "editorial-masthead-link",
+      className: cn("ui-editorial-masthead-link ui-focus-ring", className),
+      children
+    }
+  );
+}
+const EditorialMastheadAction = React.forwardRef(function EditorialMastheadAction2({ children, asChild, variant = "ghost", collapse = false, className, type, ...rest }, ref) {
+  const shared = {
+    "data-slot": "editorial-masthead-action",
+    "data-variant": variant,
+    "data-collapse": collapse ? "" : void 0,
+    className: cn("ui-editorial-masthead-action ui-focus-ring", className)
+  };
+  if (asChild) {
+    return /* @__PURE__ */ jsx(Slot, { ...rest, ...shared, ref, children });
+  }
+  return /* @__PURE__ */ jsx("button", { ...rest, ...shared, ref, type: type ?? "button", children });
+});
+function EditorialFooter({
+  brand,
+  tagline,
+  groups,
+  level = 2,
+  legal,
+  note,
+  className
+}) {
+  const Heading = level === 3 ? "h3" : "h2";
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "editorial-footer", className: cn("ui-editorial-footer", className), children: [
+    /* @__PURE__ */ jsxs("div", { "data-slot": "editorial-footer-top", className: "ui-editorial-footer-top", children: [
+      /* @__PURE__ */ jsxs("div", { "data-slot": "editorial-footer-brand", className: "ui-editorial-footer-brand", children: [
+        brand,
+        tagline != null && /* @__PURE__ */ jsx("p", { className: "ui-editorial-footer-tagline", children: tagline })
+      ] }),
+      groups.map((group, index) => /* @__PURE__ */ jsxs("div", { "data-slot": "editorial-footer-group", className: "ui-editorial-footer-group", children: [
+        /* @__PURE__ */ jsx(Heading, { className: "ui-editorial-footer-heading", children: group.title }),
+        group.links.map((link, linkIndex) => /* @__PURE__ */ jsx(React.Fragment, { children: link }, linkIndex))
+      ] }, index))
+    ] }),
+    (legal != null || note != null) && /* @__PURE__ */ jsxs("div", { "data-slot": "editorial-footer-bottom", className: "ui-editorial-footer-bottom", children: [
+      legal != null && /* @__PURE__ */ jsx("span", { children: legal }),
+      note != null && /* @__PURE__ */ jsx("p", { className: "ui-editorial-footer-note", children: note })
+    ] })
+  ] });
+}
+function EditorialFilterBar({
+  options,
+  value,
+  onValueChange,
+  extra,
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "editorial-filter-bar", className: cn("ui-editorial-filter-bar", className), children: [
+    /* @__PURE__ */ jsx("div", { role: "group", "aria-label": rest["aria-label"], className: "ui-editorial-filter-bar-group", children: options.map((option) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "aria-pressed": option.value === value,
+        className: "ui-editorial-filter-bar-option ui-focus-ring",
+        onClick: () => onValueChange(option.value),
+        children: option.label
+      },
+      option.value
+    )) }),
+    extra != null && /* @__PURE__ */ jsx("span", { className: "ui-editorial-filter-bar-extra", children: extra })
+  ] });
+}
+export {
+  CardShowcase,
+  CatalogCard,
+  CatalogCardTag,
+  EditorialArticle,
+  EditorialArticleSection,
+  EditorialBanner,
+  EditorialBreadcrumb,
+  EditorialCard,
+  EditorialFilterBar,
+  EditorialFooter,
+  EditorialHero,
+  EditorialMasthead,
+  EditorialMastheadAction,
+  EditorialMastheadLink,
+  EditorialNote,
+  EditorialPageHeader,
+  EditorialPanel,
+  EditorialPillNav,
+  EditorialPillNavItem,
+  EditorialSearch,
+  EditorialSection,
+  EditorialSectionHead,
+  EditorialTextLink,
+  Eyebrow
+};