@reblu/site-next 1.19.0 → 1.20.1

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # @reblu/site-next
 
+## 1.20.1
+
+### Patch Changes
+
+- 146c45a: ESM build imports `next/link.js`, `next/navigation.js` and `next/script.js`, so plain Node ESM (a SITE's vitest) resolves them; the `server.deps.inline` workaround can be removed (REB-929). `CtaButtons` renders an element `icon` as a direct, `aria-hidden` child of the button again, so shadcn's `has-[>svg]` icon padding applies (REB-930).
+- Updated dependencies [146c45a]
+  - @reblu/site-ui@0.7.1
+
+## 1.20.0
+
+### Minor Changes
+
+- 92e0f6f: `CtaButtons` and `EditableCta` gain plug-and-play presentation props. The default markup is unchanged except for one accessibility fix: external CTAs now carry the new-window hint (see `newWindowHint`).
+  - `icon` — leading icon on every CTA, wrapped in an `aria-hidden` span.
+  - `primaryVariant` / `secondaryVariant` — `@reblu/site-ui` Button variant for the first CTA and for the rest (default `'default'`).
+  - `primaryClassName` / `secondaryClassName` — extra class per role, merged after `buttonClassName`, to map CTAs to the SITE's own button styles.
+  - `newWindowHint` — CTAs that open in a new tab now carry a visually-hidden «(se abre en una nueva ventana)» hint (a11y fix; overridable text, pass `''` to opt out, for example on a non-Spanish site). Their accessible name now ends with the hint.
+
+  `EditableCta` forwards every `CtaButtons` presentation prop and accepts the new `header` slot. New exported type: `CtaButtonVariant`.
+
+- b75f066: Deprecate `createShopCheckEmailRoute` (REB-834). The proxied endpoint now always answers `{ exists: false }`, so do not mount it on a new SITE; an existing mount keeps working until the next major removes it. The README's "Wiring a SITE" no longer lists it.
+
+### Patch Changes
+
+- Updated dependencies [92e0f6f]
+- Updated dependencies [b75f066]
+- Updated dependencies [b75f066]
+  - @reblu/site-contracts@1.14.0
+  - @reblu/site-client@5.6.0
+
 ## 1.19.0
 
 ### Minor Changes

package/README.md

@@ -45,6 +45,15 @@ to preserve the `'use client'` directive — R4), so importing anything from
 `@reblu/site-next/auth` pulls in `AuthLogo`'s `next-themes` import at module
 resolution time, even if your code never renders `<AuthLogo/>`.
 
+### Testing a SITE with plain Node ESM (vitest)
+
+Since 1.20.1 the ESM build imports `next/link.js`, `next/navigation.js` and
+`next/script.js` (Next ships no `exports` map, so plain Node ESM needs the
+extension). A SITE's vitest config no longer needs
+`test.server.deps.inline: [/@reblu\/site-next/]` to render SDK components; remove
+that workaround when you upgrade. The same fix ships in `@reblu/site-ui` for
+`./next` and `./pagination`.
+
 ## ISR caching
 
 Wire the adapter once when you build the SDK client — this restores the exact ISR
@@ -80,6 +89,43 @@ import { client } from '@/lib/reblu'
 <EditableCta slot="hero" client={client} fallback={<StaticHeroCta />} />
 ```
 
+Slots: `header`, `hero`, `blog-end`, `services`, `contact`, `sticky-mobile`,
+`footer`. A persistent header CTA, for example:
+
+```tsx
+import { CalendarIcon } from 'lucide-react'
+
+<EditableCta
+  slot="header"
+  client={client}
+  size="sm"
+  icon={<CalendarIcon />}
+  primaryVariant="default"
+  secondaryVariant="outline"
+  primaryClassName="btn-cta" // optional: map the primary CTA to your own button style
+  fallback={<StaticHeaderCta />}
+/>
+```
+
+`EditableCta` forwards every `CtaButtons` presentation prop:
+
+| Prop                 | Default                            | Effect                                                  |
+| -------------------- | ---------------------------------- | ------------------------------------------------------- |
+| `className`          | —                                  | Wrapper class (layout of the button group)              |
+| `buttonClassName`    | —                                  | Class on every button                                   |
+| `size`               | `'lg'`                             | `@reblu/site-ui` Button size                            |
+| `icon`               | —                                  | Leading icon on every CTA, `aria-hidden`; an element icon is a direct child, so `has-[>svg]` padding applies |
+| `primaryVariant`     | `'default'`                        | `@reblu/site-ui` Button variant of the first CTA        |
+| `secondaryVariant`   | `'default'`                        | Button variant of every other CTA                       |
+| `primaryClassName`   | —                                  | Extra class on the first CTA, after `buttonClassName`   |
+| `secondaryClassName` | —                                  | Extra class on every other CTA, after `buttonClassName` |
+| `newWindowHint`      | `'(se abre en una nueva ventana)'` | Visually-hidden text on CTAs that open in a new tab     |
+
+CTAs with an absolute `http(s)` href open in a new tab
+(`target="_blank" rel="noopener noreferrer"`) and carry the `newWindowHint` in a
+`sr-only` span, so screen readers announce the new window. The primary CTA is the
+first one by `sortOrder`.
+
 `CtaButtons` (the `'use client'` renderer) and `StickyMobileCta` are also exported.
 `CtaButtons` is additionally available at the `@reblu/site-next/cta-buttons`
 subpath, which resolves directly to the emitted `'use client'` boundary.
@@ -325,7 +371,7 @@ its own Client Component.
 | `createShopCheckoutRoute(opts?)` | `./shop-route-handlers` | No |
 | `createShopValidateCartRoute()` | `./shop-route-handlers` | No |
 | `createShopApplyDiscountRoute()` | `./shop-route-handlers` | No |
-| `createShopCheckEmailRoute()` | `./shop-route-handlers` | No |
+| `createShopCheckEmailRoute()` — **deprecated** (REB-834) | `./shop-route-handlers` | No |
 | `createShopOrderRoute()` | `./shop-route-handlers` | No |
 | `getShopOrderSummary(client, sessionId)` | `./shop-server` | No |
 | `useShopOrderStatus(sessionId, opts?)` | `./shop` | **Yes** |
@@ -344,7 +390,7 @@ its own Client Component.
    <CartProvider>{children}</CartProvider>
    ```
 
-2. **Route Handlers** — mount the five factories, one file each (mirrors the
+2. **Route Handlers** — mount the four factories, one file each (mirrors the
    `./route-handlers` auth pattern — a one-line file per route):
 
    ```ts
@@ -358,22 +404,37 @@ its own Client Component.
    // app/api/shop/apply-discount/route.ts
    export const POST = createShopApplyDiscountRoute()
 
-   // app/api/shop/check-email/route.ts
-   export const POST = createShopCheckEmailRoute()
-
    // app/api/shop/order/[sessionId]/route.ts
    export const GET = createShopOrderRoute()
    ```
 
-   All five read `REBLU_API_BASE_URL`/`REBLU_API_KEY` lazily from `process.env`
-   (same as `./route-handlers`'s `createProxyRoute`, which they wrap) — the
-   API key never reaches the browser.
+   All of them read `REBLU_API_BASE_URL`/`REBLU_API_KEY` lazily from
+   `process.env` (same as `./route-handlers`'s `createProxyRoute`, which they
+   wrap) — the API key never reaches the browser.
+
+   Do not mount `createShopCheckEmailRoute()` on a new SITE: it is
+   **deprecated** (REB-834) and removed in the next major. Its endpoint used to
+   say whether an email had an account — an enumeration oracle on the
+   tenant's customer list — and now always answers `{ exists: false }`. An
+   existing mount keeps working; remove it at your convenience. The checkout
+   always offers «Iniciar sesión o continuar como invitado», and the server
+   links a guest's order to an existing account after payment.
+
+   **Forward the visitor's IP.** base-api rate-limits some public routes
+   per client IP (check-email, and the auth routes such as login and
+   magic-link), reading the IP from `x-forwarded-for`. A SITE
+   that calls `/api/site/*` from its own server must forward the visitor's
+   `x-forwarded-for` (and `x-real-ip`), or every visitor shares the SITE
+   server's single IP window and one busy page throttles them all.
+   `createProxyRoute` — and therefore every `createShop*Route` factory —
+   already forwards both headers; only hand-written server-side calls need to
+   do it themselves.
 
 3. **Pages** — create `app/shop/cart/page.tsx`, `app/shop/checkout/page.tsx`
    and `app/shop/order-confirmation/page.tsx`. Read the cart with `useCart()`
    from `./cart`, render `@reblu/site-blocks`'s `CartLineList`/`CartSummary`/
    `CheckoutForm`/`OrderConfirmation`, and `fetch` the Route Handlers from
-   step 2 for checkout/validate-cart/apply-discount/check-email/order (never
+   step 2 for checkout/validate-cart/apply-discount/order (never
    call base-api directly from a Client Component — that's what step 2's
    Route Handlers are for). See `apps/demo-site`'s `shop/{cart,checkout,
    order-confirmation}/page.tsx` in this monorepo for a complete, working

package/dist/analytics.js

@@ -1,5 +1,5 @@
 // src/analytics.tsx
-import Script from "next/script";
+import Script from "next/script.js";
 
 // src/json-ld.tsx
 import { jsx } from "react/jsx-runtime";

package/dist/auth.js

@@ -726,7 +726,7 @@ function ResetPasswordRequest(props) {
 
 // src/auth/reset-password-confirm.tsx
 import * as React5 from "react";
-import { useRouter, useSearchParams } from "next/navigation";
+import { useRouter, useSearchParams } from "next/navigation.js";
 import { Button as Button4, Input as Input3, cn as cn5 } from "@reblu/site-ui";
 import { Label as Label3 } from "@reblu/site-ui/label";
 import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
@@ -909,7 +909,7 @@ function ResetPasswordConfirm(props) {
 
 // src/auth/set-password.tsx
 import * as React6 from "react";
-import { useSearchParams as useSearchParams2 } from "next/navigation";
+import { useSearchParams as useSearchParams2 } from "next/navigation.js";
 import { Button as Button5, Input as Input4, cn as cn6 } from "@reblu/site-ui";
 import { Label as Label4 } from "@reblu/site-ui/label";
 import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
@@ -1042,7 +1042,7 @@ function SetPassword(props) {
 
 // src/auth/auth-confirm.tsx
 import * as React7 from "react";
-import { useSearchParams as useSearchParams3 } from "next/navigation";
+import { useSearchParams as useSearchParams3 } from "next/navigation.js";
 import { cn as cn7 } from "@reblu/site-ui";
 import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 var DEFAULT_COPY8 = {

package/dist/consent.js

@@ -121,7 +121,7 @@ function ConsentGate({ category, children }) {
 }
 
 // src/analytics.tsx
-import Script from "next/script";
+import Script from "next/script.js";
 
 // src/json-ld.tsx
 import { jsx as jsx3 } from "react/jsx-runtime";

package/dist/cta-buttons.cjs

@@ -36,23 +36,62 @@ __export(cta_buttons_exports, {
 module.exports = __toCommonJS(cta_buttons_exports);
 var import_site_ui = require("@reblu/site-ui");
 var import_link = __toESM(require("next/link"), 1);
+var import_react = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
+var DEFAULT_NEW_WINDOW_HINT = "(se abre en una nueva ventana)";
 function isExternal(href) {
   return /^https?:\/\//i.test(href);
 }
-function CtaButtons({ ctas, className, buttonClassName, size = "lg" }) {
+function renderLeadingIcon(icon) {
+  if (icon == null || icon === false) return null;
+  if ((0, import_react.isValidElement)(icon) && icon.type !== import_react.Fragment) {
+    const element = icon;
+    return (0, import_react.cloneElement)(element, {
+      "aria-hidden": true,
+      className: (0, import_site_ui.cn)(element.props.className, "shrink-0")
+    });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "aria-hidden": "true", className: "contents", children: icon });
+}
+function CtaButtons({
+  ctas,
+  className,
+  buttonClassName,
+  size = "lg",
+  icon,
+  primaryVariant = "default",
+  secondaryVariant = "default",
+  primaryClassName,
+  secondaryClassName,
+  newWindowHint = DEFAULT_NEW_WINDOW_HINT
+}) {
   if (ctas.length === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className, "data-slot": "cta-buttons", children: ctas.map((cta) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_site_ui.Button,
-    {
-      asChild: true,
-      size,
-      className: buttonClassName,
-      "data-cta-id": cta.analyticsId ?? void 0,
-      children: isExternal(cta.href) ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", { href: cta.href, target: "_blank", rel: "noopener noreferrer", children: cta.label }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_link.default, { href: cta.href, children: cta.label })
-    },
-    cta.id
-  )) });
+  const leadingIcon = renderLeadingIcon(icon);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className, "data-slot": "cta-buttons", children: ctas.map((cta, index) => {
+    const isPrimary = index === 0;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_site_ui.Button,
+      {
+        asChild: true,
+        size,
+        variant: isPrimary ? primaryVariant : secondaryVariant,
+        className: (0, import_site_ui.cn)(buttonClassName, isPrimary ? primaryClassName : secondaryClassName),
+        "data-cta-id": cta.analyticsId ?? void 0,
+        children: isExternal(cta.href) ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("a", { href: cta.href, target: "_blank", rel: "noopener noreferrer", children: [
+          leadingIcon,
+          cta.label,
+          newWindowHint ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+            " ",
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "sr-only", children: newWindowHint })
+          ] }) : null
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_link.default, { href: cta.href, children: [
+          leadingIcon,
+          cta.label
+        ] })
+      },
+      cta.id
+    );
+  }) });
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/cta-buttons.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/cta-buttons.tsx"],"sourcesContent":["'use client'\n\nimport type { Cta } from '@reblu/site-contracts'\nimport { Button } from '@reblu/site-ui'\nimport Link from 'next/link'\n\ntype ButtonSize = 'sm' | 'default' | 'lg'\n\nexport interface CtaButtonsProps {\n  ctas: Cta[]\n  /** Wrapper class (layout of the button group). */\n  className?: string\n  /** Class applied to each button. */\n  buttonClassName?: string\n  size?: ButtonSize\n}\n\n/** External = absolute http(s) URL (e.g. a Klinikare booking link). */\nfunction isExternal(href: string): boolean {\n  return /^https?:\\/\\//i.test(href)\n}\n\n/**\n * Presentational CTA renderer (REB-394, moved to `@reblu/site-next` in REB-418).\n * Pure — takes already-resolved CTAs and renders one styled button-link each.\n * Internal hrefs use `next/link` (client routing); external URLs open in a new,\n * safely-rel tab. `analyticsId` is surfaced as `data-cta-id` on the clickable\n * element for GA `cta_click` tracking. Renders nothing when there are no CTAs.\n *\n * Imports `Button` from `@reblu/site-ui` (public) — never `@reblu/ui` (private).\n */\nexport function CtaButtons({ ctas, className, buttonClassName, size = 'lg' }: CtaButtonsProps) {\n  if (ctas.length === 0) return null\n\n  return (\n    <div className={className} data-slot='cta-buttons'>\n      {ctas.map((cta) => (\n        <Button\n          key={cta.id}\n          asChild\n          size={size}\n          className={buttonClassName}\n          data-cta-id={cta.analyticsId ?? undefined}\n        >\n          {isExternal(cta.href) ? (\n            <a href={cta.href} target='_blank' rel='noopener noreferrer'>\n              {cta.label}\n            </a>\n          ) : (\n            <Link href={cta.href}>{cta.label}</Link>\n          )}\n        </Button>\n      ))}\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAAuB;AACvB,kBAAiB;AAyCL;AA3BZ,SAAS,WAAW,MAAuB;AACzC,SAAO,gBAAgB,KAAK,IAAI;AAClC;AAWO,SAAS,WAAW,EAAE,MAAM,WAAW,iBAAiB,OAAO,KAAK,GAAoB;AAC7F,MAAI,KAAK,WAAW,EAAG,QAAO;AAE9B,SACE,4CAAC,SAAI,WAAsB,aAAU,eAClC,eAAK,IAAI,CAAC,QACT;AAAA,IAAC;AAAA;AAAA,MAEC,SAAO;AAAA,MACP;AAAA,MACA,WAAW;AAAA,MACX,eAAa,IAAI,eAAe;AAAA,MAE/B,qBAAW,IAAI,IAAI,IAClB,4CAAC,OAAE,MAAM,IAAI,MAAM,QAAO,UAAS,KAAI,uBACpC,cAAI,OACP,IAEA,4CAAC,YAAAA,SAAA,EAAK,MAAM,IAAI,MAAO,cAAI,OAAM;AAAA;AAAA,IAX9B,IAAI;AAAA,EAaX,CACD,GACH;AAEJ;","names":["Link"]}
+{"version":3,"sources":["../src/cta-buttons.tsx"],"sourcesContent":["'use client'\n\nimport type { Cta } from '@reblu/site-contracts'\nimport { Button, cn, type ButtonVariantProps } from '@reblu/site-ui'\nimport Link from 'next/link'\nimport { cloneElement, Fragment, isValidElement, type ReactElement, type ReactNode } from 'react'\n\ntype ButtonSize = 'sm' | 'default' | 'lg'\n\n/** A `@reblu/site-ui` Button variant (`default`, `outline`, `secondary`, …). */\nexport type CtaButtonVariant = NonNullable<ButtonVariantProps['variant']>\n\n/** Default screen-reader hint appended to CTAs that open in a new tab. */\nconst DEFAULT_NEW_WINDOW_HINT = '(se abre en una nueva ventana)'\n\nexport interface CtaButtonsProps {\n  ctas: Cta[]\n  /** Wrapper class (layout of the button group). */\n  className?: string\n  /** Class applied to each button. */\n  buttonClassName?: string\n  size?: ButtonSize\n  /**\n   * Leading icon rendered before every CTA label. Decorative: it is marked\n   * `aria-hidden`, so the accessible name stays the label. A custom icon\n   * component must forward `aria-hidden` and `className` to its root element. An element icon (an\n   * `<svg>` or an icon component) is rendered as a direct child of the button,\n   * so shadcn's `has-[>svg]` icon padding still matches; anything else is\n   * wrapped in an `aria-hidden` `display: contents` span.\n   */\n  icon?: ReactNode\n  /** Button variant of the primary CTA (the first one, by `sortOrder`). Default `default`. */\n  primaryVariant?: CtaButtonVariant\n  /** Button variant of every secondary CTA (all but the first). Default `default`. */\n  secondaryVariant?: CtaButtonVariant\n  /**\n   * Extra class for the primary CTA, merged after `buttonClassName`. Lets a SITE\n   * map the primary CTA to its own button style (e.g. a brand `cta` variant).\n   */\n  primaryClassName?: string\n  /** Extra class for every secondary CTA, merged after `buttonClassName`. */\n  secondaryClassName?: string\n  /**\n   * Visually-hidden text appended to CTAs that open in a new tab, so screen\n   * readers announce the context change. Default «(se abre en una nueva ventana)».\n   */\n  newWindowHint?: string\n}\n\n/** External = absolute http(s) URL (e.g. a third-party booking link). */\nfunction isExternal(href: string): boolean {\n  return /^https?:\\/\\//i.test(href)\n}\n\n/**\n * REB-930 — no wrapper around an element icon: `has-[>svg]:px-*` only matches an\n * svg that is a DIRECT child of the button. `display: contents` on the fallback\n * wrapper keeps it out of the flex layout, though a wrapped svg is still not a\n * direct child.\n */\nfunction renderLeadingIcon(icon: ReactNode): ReactNode {\n  if (icon == null || icon === false) return null\n  // A fragment cannot carry aria-hidden, so it takes the wrapper like a non-element.\n  if (isValidElement(icon) && icon.type !== Fragment) {\n    const element = icon as ReactElement<{ 'aria-hidden'?: boolean | 'true'; className?: string }>\n    // shrink-0: the old wrapper kept any icon from shrinking in a narrow button;\n    // shadcn's `[&_svg]:shrink-0` only covers svg.\n    return cloneElement(element, {\n      'aria-hidden': true,\n      className: cn(element.props.className, 'shrink-0'),\n    })\n  }\n  return (\n    <span aria-hidden='true' className='contents'>\n      {icon}\n    </span>\n  )\n}\n\n/**\n * Presentational CTA renderer (REB-394, moved to `@reblu/site-next` in REB-418).\n * Pure — takes already-resolved CTAs and renders one styled button-link each.\n * Internal hrefs use `next/link` (client routing); external URLs open in a new,\n * safely-rel tab and carry a visually-hidden new-window hint. `analyticsId` is\n * surfaced as `data-cta-id` on the clickable element for GA `cta_click`\n * tracking. Renders nothing when there are no CTAs.\n *\n * The first CTA is the primary one; the rest are secondary. Each role takes its\n * own Button variant and extra class, so a SITE maps the CTAs to its own button\n * styles without forking this markup.\n *\n * Imports `Button` from `@reblu/site-ui` (public) — never `@reblu/ui` (private).\n */\nexport function CtaButtons({\n  ctas,\n  className,\n  buttonClassName,\n  size = 'lg',\n  icon,\n  primaryVariant = 'default',\n  secondaryVariant = 'default',\n  primaryClassName,\n  secondaryClassName,\n  newWindowHint = DEFAULT_NEW_WINDOW_HINT,\n}: CtaButtonsProps) {\n  if (ctas.length === 0) return null\n\n  const leadingIcon = renderLeadingIcon(icon)\n\n  return (\n    <div className={className} data-slot='cta-buttons'>\n      {ctas.map((cta, index) => {\n        const isPrimary = index === 0\n        return (\n          <Button\n            key={cta.id}\n            asChild\n            size={size}\n            variant={isPrimary ? primaryVariant : secondaryVariant}\n            className={cn(buttonClassName, isPrimary ? primaryClassName : secondaryClassName)}\n            data-cta-id={cta.analyticsId ?? undefined}\n          >\n            {isExternal(cta.href) ? (\n              <a href={cta.href} target='_blank' rel='noopener noreferrer'>\n                {leadingIcon}\n                {cta.label}\n                {newWindowHint ? (\n                  <>\n                    {' '}\n                    <span className='sr-only'>{newWindowHint}</span>\n                  </>\n                ) : null}\n              </a>\n            ) : (\n              <Link href={cta.href}>\n                {leadingIcon}\n                {cta.label}\n              </Link>\n            )}\n          </Button>\n        )\n      })}\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAAoD;AACpD,kBAAiB;AACjB,mBAA0F;AAoEtF;AA5DJ,IAAM,0BAA0B;AAqChC,SAAS,WAAW,MAAuB;AACzC,SAAO,gBAAgB,KAAK,IAAI;AAClC;AAQA,SAAS,kBAAkB,MAA4B;AACrD,MAAI,QAAQ,QAAQ,SAAS,MAAO,QAAO;AAE3C,UAAI,6BAAe,IAAI,KAAK,KAAK,SAAS,uBAAU;AAClD,UAAM,UAAU;AAGhB,eAAO,2BAAa,SAAS;AAAA,MAC3B,eAAe;AAAA,MACf,eAAW,mBAAG,QAAQ,MAAM,WAAW,UAAU;AAAA,IACnD,CAAC;AAAA,EACH;AACA,SACE,4CAAC,UAAK,eAAY,QAAO,WAAU,YAChC,gBACH;AAEJ;AAgBO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA,iBAAiB;AAAA,EACjB,mBAAmB;AAAA,EACnB;AAAA,EACA;AAAA,EACA,gBAAgB;AAClB,GAAoB;AAClB,MAAI,KAAK,WAAW,EAAG,QAAO;AAE9B,QAAM,cAAc,kBAAkB,IAAI;AAE1C,SACE,4CAAC,SAAI,WAAsB,aAAU,eAClC,eAAK,IAAI,CAAC,KAAK,UAAU;AACxB,UAAM,YAAY,UAAU;AAC5B,WACE;AAAA,MAAC;AAAA;AAAA,QAEC,SAAO;AAAA,QACP;AAAA,QACA,SAAS,YAAY,iBAAiB;AAAA,QACtC,eAAW,mBAAG,iBAAiB,YAAY,mBAAmB,kBAAkB;AAAA,QAChF,eAAa,IAAI,eAAe;AAAA,QAE/B,qBAAW,IAAI,IAAI,IAClB,6CAAC,OAAE,MAAM,IAAI,MAAM,QAAO,UAAS,KAAI,uBACpC;AAAA;AAAA,UACA,IAAI;AAAA,UACJ,gBACC,4EACG;AAAA;AAAA,YACD,4CAAC,UAAK,WAAU,WAAW,yBAAc;AAAA,aAC3C,IACE;AAAA,WACN,IAEA,6CAAC,YAAAA,SAAA,EAAK,MAAM,IAAI,MACb;AAAA;AAAA,UACA,IAAI;AAAA,WACP;AAAA;AAAA,MAtBG,IAAI;AAAA,IAwBX;AAAA,EAEJ,CAAC,GACH;AAEJ;","names":["Link"]}

package/dist/cta-buttons.d.cts

@@ -1,7 +1,11 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { Cta } from '@reblu/site-contracts';
+import { ButtonVariantProps } from '@reblu/site-ui';
+import { ReactNode } from 'react';
 
 type ButtonSize = 'sm' | 'default' | 'lg';
+/** A `@reblu/site-ui` Button variant (`default`, `outline`, `secondary`, …). */
+type CtaButtonVariant = NonNullable<ButtonVariantProps['variant']>;
 interface CtaButtonsProps {
     ctas: Cta[];
     /** Wrapper class (layout of the button group). */
@@ -9,16 +13,46 @@ interface CtaButtonsProps {
     /** Class applied to each button. */
     buttonClassName?: string;
     size?: ButtonSize;
+    /**
+     * Leading icon rendered before every CTA label. Decorative: it is marked
+     * `aria-hidden`, so the accessible name stays the label. A custom icon
+     * component must forward `aria-hidden` and `className` to its root element. An element icon (an
+     * `<svg>` or an icon component) is rendered as a direct child of the button,
+     * so shadcn's `has-[>svg]` icon padding still matches; anything else is
+     * wrapped in an `aria-hidden` `display: contents` span.
+     */
+    icon?: ReactNode;
+    /** Button variant of the primary CTA (the first one, by `sortOrder`). Default `default`. */
+    primaryVariant?: CtaButtonVariant;
+    /** Button variant of every secondary CTA (all but the first). Default `default`. */
+    secondaryVariant?: CtaButtonVariant;
+    /**
+     * Extra class for the primary CTA, merged after `buttonClassName`. Lets a SITE
+     * map the primary CTA to its own button style (e.g. a brand `cta` variant).
+     */
+    primaryClassName?: string;
+    /** Extra class for every secondary CTA, merged after `buttonClassName`. */
+    secondaryClassName?: string;
+    /**
+     * Visually-hidden text appended to CTAs that open in a new tab, so screen
+     * readers announce the context change. Default «(se abre en una nueva ventana)».
+     */
+    newWindowHint?: string;
 }
 /**
  * Presentational CTA renderer (REB-394, moved to `@reblu/site-next` in REB-418).
  * Pure — takes already-resolved CTAs and renders one styled button-link each.
  * Internal hrefs use `next/link` (client routing); external URLs open in a new,
- * safely-rel tab. `analyticsId` is surfaced as `data-cta-id` on the clickable
- * element for GA `cta_click` tracking. Renders nothing when there are no CTAs.
+ * safely-rel tab and carry a visually-hidden new-window hint. `analyticsId` is
+ * surfaced as `data-cta-id` on the clickable element for GA `cta_click`
+ * tracking. Renders nothing when there are no CTAs.
+ *
+ * The first CTA is the primary one; the rest are secondary. Each role takes its
+ * own Button variant and extra class, so a SITE maps the CTAs to its own button
+ * styles without forking this markup.
  *
  * Imports `Button` from `@reblu/site-ui` (public) — never `@reblu/ui` (private).
  */
-declare function CtaButtons({ ctas, className, buttonClassName, size }: CtaButtonsProps): react_jsx_runtime.JSX.Element | null;
+declare function CtaButtons({ ctas, className, buttonClassName, size, icon, primaryVariant, secondaryVariant, primaryClassName, secondaryClassName, newWindowHint, }: CtaButtonsProps): react_jsx_runtime.JSX.Element | null;
 
-export { CtaButtons, type CtaButtonsProps };
+export { type CtaButtonVariant, CtaButtons, type CtaButtonsProps };

package/dist/cta-buttons.d.ts

@@ -1,7 +1,11 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { Cta } from '@reblu/site-contracts';
+import { ButtonVariantProps } from '@reblu/site-ui';
+import { ReactNode } from 'react';
 
 type ButtonSize = 'sm' | 'default' | 'lg';
+/** A `@reblu/site-ui` Button variant (`default`, `outline`, `secondary`, …). */
+type CtaButtonVariant = NonNullable<ButtonVariantProps['variant']>;
 interface CtaButtonsProps {
     ctas: Cta[];
     /** Wrapper class (layout of the button group). */
@@ -9,16 +13,46 @@ interface CtaButtonsProps {
     /** Class applied to each button. */
     buttonClassName?: string;
     size?: ButtonSize;
+    /**
+     * Leading icon rendered before every CTA label. Decorative: it is marked
+     * `aria-hidden`, so the accessible name stays the label. A custom icon
+     * component must forward `aria-hidden` and `className` to its root element. An element icon (an
+     * `<svg>` or an icon component) is rendered as a direct child of the button,
+     * so shadcn's `has-[>svg]` icon padding still matches; anything else is
+     * wrapped in an `aria-hidden` `display: contents` span.
+     */
+    icon?: ReactNode;
+    /** Button variant of the primary CTA (the first one, by `sortOrder`). Default `default`. */
+    primaryVariant?: CtaButtonVariant;
+    /** Button variant of every secondary CTA (all but the first). Default `default`. */
+    secondaryVariant?: CtaButtonVariant;
+    /**
+     * Extra class for the primary CTA, merged after `buttonClassName`. Lets a SITE
+     * map the primary CTA to its own button style (e.g. a brand `cta` variant).
+     */
+    primaryClassName?: string;
+    /** Extra class for every secondary CTA, merged after `buttonClassName`. */
+    secondaryClassName?: string;
+    /**
+     * Visually-hidden text appended to CTAs that open in a new tab, so screen
+     * readers announce the context change. Default «(se abre en una nueva ventana)».
+     */
+    newWindowHint?: string;
 }
 /**
  * Presentational CTA renderer (REB-394, moved to `@reblu/site-next` in REB-418).
  * Pure — takes already-resolved CTAs and renders one styled button-link each.
  * Internal hrefs use `next/link` (client routing); external URLs open in a new,
- * safely-rel tab. `analyticsId` is surfaced as `data-cta-id` on the clickable
- * element for GA `cta_click` tracking. Renders nothing when there are no CTAs.
+ * safely-rel tab and carry a visually-hidden new-window hint. `analyticsId` is
+ * surfaced as `data-cta-id` on the clickable element for GA `cta_click`
+ * tracking. Renders nothing when there are no CTAs.
+ *
+ * The first CTA is the primary one; the rest are secondary. Each role takes its
+ * own Button variant and extra class, so a SITE maps the CTAs to its own button
+ * styles without forking this markup.
  *
  * Imports `Button` from `@reblu/site-ui` (public) — never `@reblu/ui` (private).
  */
-declare function CtaButtons({ ctas, className, buttonClassName, size }: CtaButtonsProps): react_jsx_runtime.JSX.Element | null;
+declare function CtaButtons({ ctas, className, buttonClassName, size, icon, primaryVariant, secondaryVariant, primaryClassName, secondaryClassName, newWindowHint, }: CtaButtonsProps): react_jsx_runtime.JSX.Element | null;
 
-export { CtaButtons, type CtaButtonsProps };
+export { type CtaButtonVariant, CtaButtons, type CtaButtonsProps };

package/dist/cta-buttons.js

@@ -1,25 +1,64 @@
 "use client";
 
 // src/cta-buttons.tsx
-import { Button } from "@reblu/site-ui";
-import Link from "next/link";
-import { jsx } from "react/jsx-runtime";
+import { Button, cn } from "@reblu/site-ui";
+import Link from "next/link.js";
+import { cloneElement, Fragment, isValidElement } from "react";
+import { Fragment as Fragment2, jsx, jsxs } from "react/jsx-runtime";
+var DEFAULT_NEW_WINDOW_HINT = "(se abre en una nueva ventana)";
 function isExternal(href) {
   return /^https?:\/\//i.test(href);
 }
-function CtaButtons({ ctas, className, buttonClassName, size = "lg" }) {
+function renderLeadingIcon(icon) {
+  if (icon == null || icon === false) return null;
+  if (isValidElement(icon) && icon.type !== Fragment) {
+    const element = icon;
+    return cloneElement(element, {
+      "aria-hidden": true,
+      className: cn(element.props.className, "shrink-0")
+    });
+  }
+  return /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "contents", children: icon });
+}
+function CtaButtons({
+  ctas,
+  className,
+  buttonClassName,
+  size = "lg",
+  icon,
+  primaryVariant = "default",
+  secondaryVariant = "default",
+  primaryClassName,
+  secondaryClassName,
+  newWindowHint = DEFAULT_NEW_WINDOW_HINT
+}) {
   if (ctas.length === 0) return null;
-  return /* @__PURE__ */ jsx("div", { className, "data-slot": "cta-buttons", children: ctas.map((cta) => /* @__PURE__ */ jsx(
-    Button,
-    {
-      asChild: true,
-      size,
-      className: buttonClassName,
-      "data-cta-id": cta.analyticsId ?? void 0,
-      children: isExternal(cta.href) ? /* @__PURE__ */ jsx("a", { href: cta.href, target: "_blank", rel: "noopener noreferrer", children: cta.label }) : /* @__PURE__ */ jsx(Link, { href: cta.href, children: cta.label })
-    },
-    cta.id
-  )) });
+  const leadingIcon = renderLeadingIcon(icon);
+  return /* @__PURE__ */ jsx("div", { className, "data-slot": "cta-buttons", children: ctas.map((cta, index) => {
+    const isPrimary = index === 0;
+    return /* @__PURE__ */ jsx(
+      Button,
+      {
+        asChild: true,
+        size,
+        variant: isPrimary ? primaryVariant : secondaryVariant,
+        className: cn(buttonClassName, isPrimary ? primaryClassName : secondaryClassName),
+        "data-cta-id": cta.analyticsId ?? void 0,
+        children: isExternal(cta.href) ? /* @__PURE__ */ jsxs("a", { href: cta.href, target: "_blank", rel: "noopener noreferrer", children: [
+          leadingIcon,
+          cta.label,
+          newWindowHint ? /* @__PURE__ */ jsxs(Fragment2, { children: [
+            " ",
+            /* @__PURE__ */ jsx("span", { className: "sr-only", children: newWindowHint })
+          ] }) : null
+        ] }) : /* @__PURE__ */ jsxs(Link, { href: cta.href, children: [
+          leadingIcon,
+          cta.label
+        ] })
+      },
+      cta.id
+    );
+  }) });
 }
 export {
   CtaButtons

package/dist/cta-buttons.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/cta-buttons.tsx"],"sourcesContent":["'use client'\n\nimport type { Cta } from '@reblu/site-contracts'\nimport { Button } from '@reblu/site-ui'\nimport Link from 'next/link'\n\ntype ButtonSize = 'sm' | 'default' | 'lg'\n\nexport interface CtaButtonsProps {\n  ctas: Cta[]\n  /** Wrapper class (layout of the button group). */\n  className?: string\n  /** Class applied to each button. */\n  buttonClassName?: string\n  size?: ButtonSize\n}\n\n/** External = absolute http(s) URL (e.g. a Klinikare booking link). */\nfunction isExternal(href: string): boolean {\n  return /^https?:\\/\\//i.test(href)\n}\n\n/**\n * Presentational CTA renderer (REB-394, moved to `@reblu/site-next` in REB-418).\n * Pure — takes already-resolved CTAs and renders one styled button-link each.\n * Internal hrefs use `next/link` (client routing); external URLs open in a new,\n * safely-rel tab. `analyticsId` is surfaced as `data-cta-id` on the clickable\n * element for GA `cta_click` tracking. Renders nothing when there are no CTAs.\n *\n * Imports `Button` from `@reblu/site-ui` (public) — never `@reblu/ui` (private).\n */\nexport function CtaButtons({ ctas, className, buttonClassName, size = 'lg' }: CtaButtonsProps) {\n  if (ctas.length === 0) return null\n\n  return (\n    <div className={className} data-slot='cta-buttons'>\n      {ctas.map((cta) => (\n        <Button\n          key={cta.id}\n          asChild\n          size={size}\n          className={buttonClassName}\n          data-cta-id={cta.analyticsId ?? undefined}\n        >\n          {isExternal(cta.href) ? (\n            <a href={cta.href} target='_blank' rel='noopener noreferrer'>\n              {cta.label}\n            </a>\n          ) : (\n            <Link href={cta.href}>{cta.label}</Link>\n          )}\n        </Button>\n      ))}\n    </div>\n  )\n}\n"],"mappings":";;;AAGA,SAAS,cAAc;AACvB,OAAO,UAAU;AAyCL;AA3BZ,SAAS,WAAW,MAAuB;AACzC,SAAO,gBAAgB,KAAK,IAAI;AAClC;AAWO,SAAS,WAAW,EAAE,MAAM,WAAW,iBAAiB,OAAO,KAAK,GAAoB;AAC7F,MAAI,KAAK,WAAW,EAAG,QAAO;AAE9B,SACE,oBAAC,SAAI,WAAsB,aAAU,eAClC,eAAK,IAAI,CAAC,QACT;AAAA,IAAC;AAAA;AAAA,MAEC,SAAO;AAAA,MACP;AAAA,MACA,WAAW;AAAA,MACX,eAAa,IAAI,eAAe;AAAA,MAE/B,qBAAW,IAAI,IAAI,IAClB,oBAAC,OAAE,MAAM,IAAI,MAAM,QAAO,UAAS,KAAI,uBACpC,cAAI,OACP,IAEA,oBAAC,QAAK,MAAM,IAAI,MAAO,cAAI,OAAM;AAAA;AAAA,IAX9B,IAAI;AAAA,EAaX,CACD,GACH;AAEJ;","names":[]}
+{"version":3,"sources":["../src/cta-buttons.tsx"],"sourcesContent":["'use client'\n\nimport type { Cta } from '@reblu/site-contracts'\nimport { Button, cn, type ButtonVariantProps } from '@reblu/site-ui'\nimport Link from 'next/link'\nimport { cloneElement, Fragment, isValidElement, type ReactElement, type ReactNode } from 'react'\n\ntype ButtonSize = 'sm' | 'default' | 'lg'\n\n/** A `@reblu/site-ui` Button variant (`default`, `outline`, `secondary`, …). */\nexport type CtaButtonVariant = NonNullable<ButtonVariantProps['variant']>\n\n/** Default screen-reader hint appended to CTAs that open in a new tab. */\nconst DEFAULT_NEW_WINDOW_HINT = '(se abre en una nueva ventana)'\n\nexport interface CtaButtonsProps {\n  ctas: Cta[]\n  /** Wrapper class (layout of the button group). */\n  className?: string\n  /** Class applied to each button. */\n  buttonClassName?: string\n  size?: ButtonSize\n  /**\n   * Leading icon rendered before every CTA label. Decorative: it is marked\n   * `aria-hidden`, so the accessible name stays the label. A custom icon\n   * component must forward `aria-hidden` and `className` to its root element. An element icon (an\n   * `<svg>` or an icon component) is rendered as a direct child of the button,\n   * so shadcn's `has-[>svg]` icon padding still matches; anything else is\n   * wrapped in an `aria-hidden` `display: contents` span.\n   */\n  icon?: ReactNode\n  /** Button variant of the primary CTA (the first one, by `sortOrder`). Default `default`. */\n  primaryVariant?: CtaButtonVariant\n  /** Button variant of every secondary CTA (all but the first). Default `default`. */\n  secondaryVariant?: CtaButtonVariant\n  /**\n   * Extra class for the primary CTA, merged after `buttonClassName`. Lets a SITE\n   * map the primary CTA to its own button style (e.g. a brand `cta` variant).\n   */\n  primaryClassName?: string\n  /** Extra class for every secondary CTA, merged after `buttonClassName`. */\n  secondaryClassName?: string\n  /**\n   * Visually-hidden text appended to CTAs that open in a new tab, so screen\n   * readers announce the context change. Default «(se abre en una nueva ventana)».\n   */\n  newWindowHint?: string\n}\n\n/** External = absolute http(s) URL (e.g. a third-party booking link). */\nfunction isExternal(href: string): boolean {\n  return /^https?:\\/\\//i.test(href)\n}\n\n/**\n * REB-930 — no wrapper around an element icon: `has-[>svg]:px-*` only matches an\n * svg that is a DIRECT child of the button. `display: contents` on the fallback\n * wrapper keeps it out of the flex layout, though a wrapped svg is still not a\n * direct child.\n */\nfunction renderLeadingIcon(icon: ReactNode): ReactNode {\n  if (icon == null || icon === false) return null\n  // A fragment cannot carry aria-hidden, so it takes the wrapper like a non-element.\n  if (isValidElement(icon) && icon.type !== Fragment) {\n    const element = icon as ReactElement<{ 'aria-hidden'?: boolean | 'true'; className?: string }>\n    // shrink-0: the old wrapper kept any icon from shrinking in a narrow button;\n    // shadcn's `[&_svg]:shrink-0` only covers svg.\n    return cloneElement(element, {\n      'aria-hidden': true,\n      className: cn(element.props.className, 'shrink-0'),\n    })\n  }\n  return (\n    <span aria-hidden='true' className='contents'>\n      {icon}\n    </span>\n  )\n}\n\n/**\n * Presentational CTA renderer (REB-394, moved to `@reblu/site-next` in REB-418).\n * Pure — takes already-resolved CTAs and renders one styled button-link each.\n * Internal hrefs use `next/link` (client routing); external URLs open in a new,\n * safely-rel tab and carry a visually-hidden new-window hint. `analyticsId` is\n * surfaced as `data-cta-id` on the clickable element for GA `cta_click`\n * tracking. Renders nothing when there are no CTAs.\n *\n * The first CTA is the primary one; the rest are secondary. Each role takes its\n * own Button variant and extra class, so a SITE maps the CTAs to its own button\n * styles without forking this markup.\n *\n * Imports `Button` from `@reblu/site-ui` (public) — never `@reblu/ui` (private).\n */\nexport function CtaButtons({\n  ctas,\n  className,\n  buttonClassName,\n  size = 'lg',\n  icon,\n  primaryVariant = 'default',\n  secondaryVariant = 'default',\n  primaryClassName,\n  secondaryClassName,\n  newWindowHint = DEFAULT_NEW_WINDOW_HINT,\n}: CtaButtonsProps) {\n  if (ctas.length === 0) return null\n\n  const leadingIcon = renderLeadingIcon(icon)\n\n  return (\n    <div className={className} data-slot='cta-buttons'>\n      {ctas.map((cta, index) => {\n        const isPrimary = index === 0\n        return (\n          <Button\n            key={cta.id}\n            asChild\n            size={size}\n            variant={isPrimary ? primaryVariant : secondaryVariant}\n            className={cn(buttonClassName, isPrimary ? primaryClassName : secondaryClassName)}\n            data-cta-id={cta.analyticsId ?? undefined}\n          >\n            {isExternal(cta.href) ? (\n              <a href={cta.href} target='_blank' rel='noopener noreferrer'>\n                {leadingIcon}\n                {cta.label}\n                {newWindowHint ? (\n                  <>\n                    {' '}\n                    <span className='sr-only'>{newWindowHint}</span>\n                  </>\n                ) : null}\n              </a>\n            ) : (\n              <Link href={cta.href}>\n                {leadingIcon}\n                {cta.label}\n              </Link>\n            )}\n          </Button>\n        )\n      })}\n    </div>\n  )\n}\n"],"mappings":";;;AAGA,SAAS,QAAQ,UAAmC;AACpD,OAAO,UAAU;AACjB,SAAS,cAAc,UAAU,sBAAyD;AAoEtF,SAsDc,YAAAA,WAtDd,KAsDc,YAtDd;AA5DJ,IAAM,0BAA0B;AAqChC,SAAS,WAAW,MAAuB;AACzC,SAAO,gBAAgB,KAAK,IAAI;AAClC;AAQA,SAAS,kBAAkB,MAA4B;AACrD,MAAI,QAAQ,QAAQ,SAAS,MAAO,QAAO;AAE3C,MAAI,eAAe,IAAI,KAAK,KAAK,SAAS,UAAU;AAClD,UAAM,UAAU;AAGhB,WAAO,aAAa,SAAS;AAAA,MAC3B,eAAe;AAAA,MACf,WAAW,GAAG,QAAQ,MAAM,WAAW,UAAU;AAAA,IACnD,CAAC;AAAA,EACH;AACA,SACE,oBAAC,UAAK,eAAY,QAAO,WAAU,YAChC,gBACH;AAEJ;AAgBO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA,iBAAiB;AAAA,EACjB,mBAAmB;AAAA,EACnB;AAAA,EACA;AAAA,EACA,gBAAgB;AAClB,GAAoB;AAClB,MAAI,KAAK,WAAW,EAAG,QAAO;AAE9B,QAAM,cAAc,kBAAkB,IAAI;AAE1C,SACE,oBAAC,SAAI,WAAsB,aAAU,eAClC,eAAK,IAAI,CAAC,KAAK,UAAU;AACxB,UAAM,YAAY,UAAU;AAC5B,WACE;AAAA,MAAC;AAAA;AAAA,QAEC,SAAO;AAAA,QACP;AAAA,QACA,SAAS,YAAY,iBAAiB;AAAA,QACtC,WAAW,GAAG,iBAAiB,YAAY,mBAAmB,kBAAkB;AAAA,QAChF,eAAa,IAAI,eAAe;AAAA,QAE/B,qBAAW,IAAI,IAAI,IAClB,qBAAC,OAAE,MAAM,IAAI,MAAM,QAAO,UAAS,KAAI,uBACpC;AAAA;AAAA,UACA,IAAI;AAAA,UACJ,gBACC,qBAAAA,WAAA,EACG;AAAA;AAAA,YACD,oBAAC,UAAK,WAAU,WAAW,yBAAc;AAAA,aAC3C,IACE;AAAA,WACN,IAEA,qBAAC,QAAK,MAAM,IAAI,MACb;AAAA;AAAA,UACA,IAAI;AAAA,WACP;AAAA;AAAA,MAtBG,IAAI;AAAA,IAwBX;AAAA,EAEJ,CAAC,GACH;AAEJ;","names":["Fragment"]}

package/dist/index.cjs

@@ -60,23 +60,62 @@ var NextCacheAdapter = class {
 // src/cta-buttons.tsx
 var import_site_ui = require("@reblu/site-ui");
 var import_link = __toESM(require("next/link"), 1);
+var import_react = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
+var DEFAULT_NEW_WINDOW_HINT = "(se abre en una nueva ventana)";
 function isExternal(href) {
   return /^https?:\/\//i.test(href);
 }
-function CtaButtons({ ctas, className, buttonClassName, size = "lg" }) {
+function renderLeadingIcon(icon) {
+  if (icon == null || icon === false) return null;
+  if ((0, import_react.isValidElement)(icon) && icon.type !== import_react.Fragment) {
+    const element = icon;
+    return (0, import_react.cloneElement)(element, {
+      "aria-hidden": true,
+      className: (0, import_site_ui.cn)(element.props.className, "shrink-0")
+    });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "aria-hidden": "true", className: "contents", children: icon });
+}
+function CtaButtons({
+  ctas,
+  className,
+  buttonClassName,
+  size = "lg",
+  icon,
+  primaryVariant = "default",
+  secondaryVariant = "default",
+  primaryClassName,
+  secondaryClassName,
+  newWindowHint = DEFAULT_NEW_WINDOW_HINT
+}) {
   if (ctas.length === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className, "data-slot": "cta-buttons", children: ctas.map((cta) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_site_ui.Button,
-    {
-      asChild: true,
-      size,
-      className: buttonClassName,
-      "data-cta-id": cta.analyticsId ?? void 0,
-      children: isExternal(cta.href) ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", { href: cta.href, target: "_blank", rel: "noopener noreferrer", children: cta.label }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_link.default, { href: cta.href, children: cta.label })
-    },
-    cta.id
-  )) });
+  const leadingIcon = renderLeadingIcon(icon);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className, "data-slot": "cta-buttons", children: ctas.map((cta, index) => {
+    const isPrimary = index === 0;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_site_ui.Button,
+      {
+        asChild: true,
+        size,
+        variant: isPrimary ? primaryVariant : secondaryVariant,
+        className: (0, import_site_ui.cn)(buttonClassName, isPrimary ? primaryClassName : secondaryClassName),
+        "data-cta-id": cta.analyticsId ?? void 0,
+        children: isExternal(cta.href) ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("a", { href: cta.href, target: "_blank", rel: "noopener noreferrer", children: [
+          leadingIcon,
+          cta.label,
+          newWindowHint ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+            " ",
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "sr-only", children: newWindowHint })
+          ] }) : null
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_link.default, { href: cta.href, children: [
+          leadingIcon,
+          cta.label
+        ] })
+      },
+      cta.id
+    );
+  }) });
 }
 
 // src/sticky-mobile-cta.tsx
@@ -96,17 +135,10 @@ function StickyMobileCta({ ctas }) {
 
 // src/editable-cta.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
-async function EditableCta({
-  slot,
-  client,
-  className,
-  buttonClassName,
-  size,
-  fallback = null
-}) {
+async function EditableCta({ slot, client, fallback = null, ...buttonProps }) {
   const { data: ctas } = await client.ctas.list(slot).catch(() => ({ data: [] }));
   if (ctas.length === 0) return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: fallback });
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CtaButtons, { ctas, className, buttonClassName, size });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CtaButtons, { ctas, ...buttonProps });
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {