@netlify/spark-ui 1.5.0-alpha.8 → 1.5.0

package/dist/components/preact/SearchModal/components/SearchWindow.js

@@ -1,67 +1,48 @@
 import { u as e } from "../../../../chunks/jsxRuntime.module.Bzuv3cXw.js";
-import { T as o } from "../../../../chunks/hooks.module.DGkdD5n9.js";
-import a from "./SearchHeading/SearchHeading.js";
-import s from "./SearchLink/SearchLink.js";
-import { Fragment as m } from "preact";
-const h = {
-  light: "dark",
-  dark: "light"
-}, d = (n) => {
-  document.documentElement.setAttribute("data-theme", n), localStorage.setItem("theme", n);
-}, u = ({
-  searchLoading: n,
+import { T as o } from "../../../../chunks/hooks.module.D9IrxdEh.js";
+import t from "./SearchHeading/SearchHeading.js";
+import a from "./SearchLink/SearchLink.js";
+const h = ({
+  searchLoading: s,
   searchTerm: r,
-  results: t
+  results: n
 }) => {
-  if (n)
-    return /* @__PURE__ */ e(a, { children: [
+  if (s)
+    return /* @__PURE__ */ e(t, { children: [
       "Searching for ",
       /* @__PURE__ */ e("span", { className: "n-search-term", children: r }),
       " ..."
     ] });
-  if (!t || t.length === 0)
-    return /* @__PURE__ */ e(a, { children: [
+  if (!n || n.length === 0)
+    return /* @__PURE__ */ e(t, { children: [
       "0 results for ",
       /* @__PURE__ */ e("span", { className: "n-search-term", children: r })
     ] });
-  const c = o(() => t.map((l, i) => /* @__PURE__ */ e("li", { className: "n-results-list-item", children: /* @__PURE__ */ e(s, { ...l }) }, i)), [t]);
-  return /* @__PURE__ */ e("ul", { className: "n-results-list", role: "list", children: c });
+  const l = o(() => n.map((i, c) => /* @__PURE__ */ e("li", { className: "n-results-list-item", children: /* @__PURE__ */ e(a, { ...i }) }, c)), [n]);
+  return /* @__PURE__ */ e("ul", { className: "n-results-list", role: "list", children: l });
 };
-function N({
-  setModalState: n,
-  searchLoading: r,
-  searchTerm: t,
-  results: c,
+function p({
+  searchLoading: s,
+  searchTerm: r,
+  results: n,
   children: l
 }) {
-  return /* @__PURE__ */ e("div", { className: "n-search-window", children: /* @__PURE__ */ e("div", { className: "n-search-links", children: t && t.length > 1 ? /* @__PURE__ */ e(u, { searchLoading: r, searchTerm: t, results: c }) : l ? /* @__PURE__ */ e(m, { children: [
-    /* @__PURE__ */ e(
-      s,
-      {
-        as: "button",
-        icon: "askNetlify",
-        label: "Ask Netlify AI",
-        onClick: () => {
-          n({ current: "ask" });
-        }
-      }
-    ),
-    l,
-    /* @__PURE__ */ e(a, { children: "Actions" }),
-    /* @__PURE__ */ e(
-      s,
+  return /* @__PURE__ */ e("div", { className: "n-search-window", children: /* @__PURE__ */ e("div", { className: "search-links", children: [
+    /* @__PURE__ */ e(a, { ...{
+      icon: "sparkles",
+      label: "Ask Netlify AI",
+      url: "https://docs.netlify.com/ask-netlify/"
+    } }),
+    r && r.length > 1 ? /* @__PURE__ */ e(
+      h,
       {
-        as: "button",
-        icon: "lightbulb",
-        label: "Toggle theme",
-        onClick: () => {
-          const i = document.documentElement.getAttribute("data-theme");
-          i && d(h[i]);
-        }
+        searchLoading: s,
+        searchTerm: r,
+        results: n
       }
-    )
-  ] }) : null }) });
+    ) : l || null
+  ] }) });
 }
 export {
-  N as default
+  p as default
 };

package/dist/components/preact/SearchModal/hooks/useKeyboardNav.js

@@ -1,6 +1,6 @@
-import { y as f } from "../../../../chunks/hooks.module.DGkdD5n9.js";
-function k(r, t, o, c) {
-  f(() => {
+import { y as l } from "../../../../chunks/hooks.module.D9IrxdEh.js";
+function s(r, t, o, c) {
+  l(() => {
     if (!r) return;
     const u = (e) => {
       if (o) {
@@ -12,8 +12,8 @@ function k(r, t, o, c) {
           e.preventDefault();
           const d = t.current;
           if (!d) return;
-          const n = Array.from(d.querySelectorAll(".n-search-link")), y = n.findIndex((l) => l === document.activeElement), i = e.key === "ArrowDown" ? (y + 1) % n.length : (y - 1 + n.length) % n.length;
-          n[i].focus();
+          const n = Array.from(d.querySelectorAll("a")), y = n.findIndex((i) => i === document.activeElement), f = e.key === "ArrowDown" ? (y + 1) % n.length : (y - 1 + n.length) % n.length;
+          n[f].focus();
         }
       }
     };
@@ -21,5 +21,5 @@ function k(r, t, o, c) {
   }, [r, t, o, c]);
 }
 export {
-  k as useKeyboardNav
+  s as useKeyboardNav
 };

package/dist/components/preact/SearchModal/hooks/useSearch.js

@@ -1,5 +1,5 @@
-import { d as g, A as w } from "../../../../chunks/hooks.module.DGkdD5n9.js";
-import { u as S } from "../../../../chunks/useTimeout.Cq4aqnDe.js";
+import { d as g, A as w } from "../../../../chunks/hooks.module.D9IrxdEh.js";
+import { u as S } from "../../../../chunks/useTimeout.YR4eKwj7.js";
 function x() {
   const [l, r] = g({
     searchTerm: "",

package/dist/components/preact/SearchModal/hooks/useSearchHotkeys.js

@@ -1,4 +1,4 @@
-import { y as u } from "../../../../chunks/hooks.module.DGkdD5n9.js";
+import { y as u } from "../../../../chunks/hooks.module.D9IrxdEh.js";
 function a(t, r, n, o) {
   u(() => {
     if (!t) return;

package/dist/components/preact/SearchModal/hooks/useSearchLogger.js

@@ -1,4 +1,4 @@
-import { A as y, y as h, q as k } from "../../../../chunks/hooks.module.DGkdD5n9.js";
+import { A as y, y as h, q as k } from "../../../../chunks/hooks.module.D9IrxdEh.js";
 class s {
   /**
    * Pushes an event payload into the dataLayer.

package/dist/components/preact/SearchModal/hooks/useSearchParams.js

@@ -1,4 +1,4 @@
-import { y as c } from "../../../../chunks/hooks.module.DGkdD5n9.js";
+import { y as c } from "../../../../chunks/hooks.module.D9IrxdEh.js";
 function n(r, o, a) {
   c(() => {
     if (typeof location > "u" || r) return;

package/dist/components/preact/SearchModal/hooks/useSearchToggles.d.ts

@@ -9,6 +9,4 @@
  *
  * @param onOpen - A function to be called when a toggle element is clicked.
  */
-export declare function useSearchToggles(isPagefindLoaded: boolean, onOpen: () => void, setState: (state: {
-    current: string;
-}) => void): void;
+export declare function useSearchToggles(isPagefindLoaded: boolean, onOpen: () => void): void;

package/dist/components/preact/SearchModal/hooks/useSearchToggles.js

@@ -1,19 +1,16 @@
-import { y as a } from "../../../../chunks/hooks.module.DGkdD5n9.js";
-function s(c, t, l) {
-  a(() => {
+import { y as l } from "../../../../chunks/hooks.module.D9IrxdEh.js";
+function i(c, r) {
+  l(() => {
     if (!c) return;
-    const r = document.querySelectorAll("[data-ntl-search-toggle]");
-    if (r.length)
-      return r.forEach((e) => {
-        const o = e.dataset.ntlSearchToggle ? e.dataset.ntlSearchToggle : "search";
-        e.removeAttribute("disabled"), e.addEventListener("click", () => {
-          t(), l({ current: o });
-        });
+    const t = document.querySelectorAll("[data-ntl-search-toggle]");
+    if (t.length)
+      return t.forEach((e) => {
+        e.removeAttribute("disabled"), e.addEventListener("click", r);
       }), () => {
-        r.forEach((e) => e.removeEventListener("click", t));
+        t.forEach((e) => e.removeEventListener("click", r));
       };
-  }, [c, t]);
+  }, [c, r]);
 }
 export {
-  s as useSearchToggles
+  i as useSearchToggles
 };

package/dist/components/preact/SearchModal/types/search.types.d.ts

@@ -1,18 +1,13 @@
 import { ComponentChildren } from 'preact';
 import { IconName } from '../../Icon';
 export interface SearchLinkProps {
-    as?: any;
     icon: IconName;
     label: string;
     resource?: 'blog' | 'changelog' | 'docs' | 'guide';
-    url?: string;
+    url: string;
     excerpt?: string;
-    onClick?: () => void;
 }
 export interface SearchWindowProps {
-    setModalState: (e: {
-        current: string;
-    }) => void;
     searchLoading: boolean;
     searchTerm?: string;
     results?: SearchLinkProps[];

package/dist/components/preact/index.d.ts

@@ -4,6 +4,5 @@ export { default as Icon } from './Icon';
 export { default as SearchLink } from './SearchModal/components/SearchLink/SearchLink';
 export { default as SearchHeading } from './SearchModal/components/SearchHeading/SearchHeading';
 export { default as SearchToggle } from './SearchModal/components/SearchToggle/SearchToggle';
-export { default as AskNetlify } from './AskNetlify/AskNetlify';
 export { SearchModal } from './SearchModal';
 export { type IconName } from './Icon';

package/dist/components/preact/index.js

@@ -3,18 +3,16 @@ import { default as d } from "./Modal/Modal.js";
 import { default as m } from "./Icon/index.js";
 import { default as s } from "./SearchModal/components/SearchLink/SearchLink.js";
 import { default as x } from "./SearchModal/components/SearchHeading/SearchHeading.js";
-import { default as i } from "./SearchModal/components/SearchToggle/SearchToggle.js";
-import { default as S } from "./AskNetlify/AskNetlify.js";
+import { default as h } from "./SearchModal/components/SearchToggle/SearchToggle.js";
 import "preact";
-import "../../chunks/hooks.module.DGkdD5n9.js";
-import { default as n } from "./SearchModal/components/SearchModal/SearchModal.js";
+import "../../chunks/hooks.module.D9IrxdEh.js";
+import { default as S } from "./SearchModal/components/SearchModal/SearchModal.js";
 export {
-  S as AskNetlify,
   m as Icon,
   t as KeyboardKey,
   d as Modal,
   x as SearchHeading,
   s as SearchLink,
-  n as SearchModal,
-  i as SearchToggle
+  S as SearchModal,
+  h as SearchToggle
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@netlify/spark-ui",
   "description": "Assets, design tokens, components, and utilities",
-  "version": "1.5.0-alpha.8",
+  "version": "1.5.0",
   "type": "module",
   "main": "dist/components/preact/index.js",
   "types": "dist/components/preact/index.d.ts",
@@ -25,20 +25,18 @@
   "exports": {
     "./preact": "./dist/components/preact/index.js",
     "./assets/*.css": "./dist/assets/*.css",
-    "./assets/icons/*.svg": "./packages/assets/icons/*.svg",
     "./logos/*.svg": "./packages/assets/logos/*.svg",
     "./styles/*.css": "./packages/styles/*.css",
+    "./assets/*": "./packages/assets/*",
     "./components": "./packages/components/index.ts",
     "./components/*": "./packages/components/*",
     "./utils": "./packages/utils/index.ts",
     "./analytics": "./packages/analytics/index.ts"
   },
   "dependencies": {
-    "@kapaai/react-sdk": "^0.1.3",
     "@preact/preset-vite": "^2.10.1",
     "@shikijs/transformers": "^3.3.0",
     "glob": "^11.0.1",
-    "marked": "^15.0.11",
     "preact": "^10.26.4",
     "vite": "^6.2.5",
     "vite-plugin-dts": "^4.5.3",
@@ -67,4 +65,4 @@
     "prettier": "^3.5.3",
     "prettier-plugin-astro": "^0.14.1"
   }
-}
+}

package/packages/assets/icons/ai.svg

@@ -0,0 +1,22 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1_5265)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.5164 9.0614H0.844727V20.6468C0.844727 21.5609 1.58572 22.3018 2.49979 22.3018H19.0504C19.9645 22.3018 20.7054 21.5609 20.7054 20.6468V13.6548C20.6996 13.6548 20.6938 13.6548 20.688 13.6548H14.0678C11.5541 13.6548 9.5164 11.6171 9.5164 9.10342V9.0614Z" fill="#382AA4"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.6918 4.13806C9.94647 5.33965 9.5162 6.75717 9.5162 8.27571V9.10323H0.827148V5.79312C0.827148 4.87906 1.56814 4.13806 2.48221 4.13806H10.6918Z" fill="#292142"/>
+<path d="M4.99805 18.1816L7.48063 15.699L4.99805 13.2164" stroke="#775CE7" stroke-width="1.65506" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9.96387 18.1814H12.4465" stroke="#775CE7" stroke-width="1.65506" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8.89555 4.13806H2.48221C2.04325 4.13806 1.62229 4.31244 1.3119 4.62281C1.00152 4.9332 0.827148 5.35416 0.827148 5.79312V20.6886C0.827148 21.1276 1.00152 21.5486 1.3119 21.8589C1.62229 22.1693 2.04325 22.3437 2.48221 22.3437H19.0328C19.9469 22.3437 20.6878 21.6027 20.6878 20.6886V14.4822" stroke="#775CE7" stroke-width="1.65506" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M0.827148 9.10352H8.68867" stroke="#775CE7" stroke-width="1.65506" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12.4131 8.27535C12.4131 5.53317 14.6361 3.31018 17.3783 3.31018C20.1205 3.31018 22.3434 5.53317 22.3434 8.27535V9.10288C22.3434 10.0169 21.6025 10.7579 20.6884 10.7579H14.0681C13.1541 10.7579 12.4131 10.0169 12.4131 9.10288V8.27535Z" fill="#E2D9F7"/>
+<path d="M12.4131 8.27535C12.4131 5.53317 14.6361 3.31018 17.3783 3.31018C20.1205 3.31018 22.3434 5.53317 22.3434 8.27535V9.10288C22.3434 10.0169 21.6025 10.7579 20.6884 10.7579H14.0681C13.1541 10.7579 12.4131 10.0169 12.4131 9.10288V8.27535Z" stroke="#775CE7" stroke-width="1.65506" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15.3093 7.86122C15.0808 7.86122 14.8955 7.67597 14.8955 7.44746C14.8955 7.21894 15.0808 7.03369 15.3093 7.03369" stroke="#775CE7" stroke-width="1.65506" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15.3086 7.86134C15.5371 7.86134 15.7224 7.67609 15.7224 7.44758C15.7224 7.21906 15.5371 7.03381 15.3086 7.03381" stroke="#775CE7" stroke-width="1.65506" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M19.446 7.86122C19.2174 7.86122 19.0322 7.67597 19.0322 7.44746C19.0322 7.21894 19.2174 7.03369 19.446 7.03369" stroke="#775CE7" stroke-width="1.65506" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M19.4463 7.86134C19.6749 7.86134 19.8601 7.67609 19.8601 7.44758C19.8601 7.21906 19.6749 7.03381 19.4463 7.03381" stroke="#775CE7" stroke-width="1.65506" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M17.3779 3.31022V0.827637" stroke="#775CE7" stroke-width="1.65506" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_1_5265">
+<rect width="23.1708" height="23.1708" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/packages/assets/icons/dev.svg

@@ -0,0 +1,8 @@
+<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1.72852 6.04785V20.8685C1.72852 21.7495 2.44265 22.4636 3.32358 22.4636H20.8691C21.7501 22.4636 22.4642 21.7495 22.4642 20.8685V6.04785H1.72852Z" fill="#332213"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M22.4642 6.07901H1.72852V3.32236C1.72852 2.44143 2.44265 1.72729 3.32358 1.72729H20.8691C21.7501 1.72729 22.4642 2.44143 22.4642 3.32236V6.07901Z" fill="#A85D13"/>
+<path d="M20.8691 1.72729H3.32358C2.44265 1.72729 1.72852 2.44143 1.72852 3.32236V20.8679C1.72852 21.7488 2.44265 22.463 3.32358 22.463H20.8691C21.7501 22.463 22.4642 21.7488 22.4642 20.8679V3.32236C22.4642 2.44143 21.7501 1.72729 20.8691 1.72729Z" stroke="#F98E21" stroke-width="1.72798" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M1.72852 6.04785H22.4644" stroke="#F98E21" stroke-width="1.72798" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9.50407 12.0958L6.91211 14.6878L9.50407 17.2798" stroke="#F98E21" stroke-width="1.72798" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14.6885 12.0958L17.2804 14.6878L14.6885 17.2798" stroke="#F98E21" stroke-width="1.72798" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/packages/assets/icons/ecommerce.svg

@@ -0,0 +1,16 @@
+<svg width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.46484 5.33927L4.10951 1.77581C4.37805 1.194 4.96036 0.821411 5.60116 0.821411H17.3999C18.0408 0.821411 18.623 1.194 18.8916 1.77581L20.5363 5.33927H2.46484Z" fill="#D6FFFE"/>
+<path d="M2.46484 5.33923H8.48866V6.43448C8.48866 8.0979 7.14018 9.44638 5.47674 9.44638C3.81332 9.44638 2.46484 8.0979 2.46484 6.43448V5.33923Z" fill="#D6FFFE"/>
+<path d="M8.48926 5.33923H14.5131V6.43448C14.5131 8.0979 13.1646 9.44638 11.5012 9.44638C9.83773 9.44638 8.48926 8.0979 8.48926 6.43448V5.33923Z" fill="#D6FFFE"/>
+<path d="M14.5117 5.33923H20.5355V6.43448C20.5355 8.0979 19.187 9.44638 17.5237 9.44638C15.8602 9.44638 14.5117 8.0979 14.5117 6.43448V5.33923Z" fill="#D6FFFE"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.48964 11.4932C7.60887 12.0185 6.57844 12.3215 5.47766 12.3215C4.64766 12.3215 3.85776 12.1497 3.1416 11.8398V16.3773C3.1416 17.2846 3.87713 18.0201 4.78446 18.0201H18.2176C19.125 18.0201 19.8605 17.2846 19.8605 16.3773V11.8401C19.1445 12.1498 18.355 12.3215 17.5252 12.3215C16.4245 12.3215 15.3941 12.0186 14.5134 11.4933C13.6327 12.0186 12.6023 12.3215 11.5016 12.3215C10.4008 12.3215 9.3704 12.0185 8.48964 11.4932Z" fill="#D6FFFE"/>
+<path d="M8.21484 22.1786L9.8577 18.0714H13.1434L14.7863 22.1786H8.21484Z" fill="#D6FFFE"/>
+<path d="M19.8605 12.3214V16.3772C19.8605 17.2845 19.125 18.0202 18.2176 18.0202H4.78446C3.87713 18.0202 3.1416 17.2845 3.1416 16.3772V12.3214" stroke="#32E6E2" stroke-width="1.64286" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9.8577 18.0714L8.21484 22.1786" stroke="#32E6E2" stroke-width="1.64286" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M13.1436 18.0714L14.7864 22.1786" stroke="#32E6E2" stroke-width="1.64286" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6.57227 22.1786H16.4294" stroke="#32E6E2" stroke-width="1.64286" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M2.46484 5.33927L4.10951 1.77581C4.37805 1.194 4.96036 0.821411 5.60116 0.821411H17.3999C18.0408 0.821411 18.623 1.194 18.8916 1.77581L20.5363 5.33927H2.46484Z" stroke="#32E6E2" stroke-width="1.64286" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M2.46484 5.33923H8.48866V6.43448C8.48866 8.0979 7.14018 9.44638 5.47674 9.44638C3.81332 9.44638 2.46484 8.0979 2.46484 6.43448V5.33923Z" stroke="#32E6E2" stroke-width="1.64286" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8.48926 5.33923H14.5131V6.43448C14.5131 8.0979 13.1646 9.44638 11.5012 9.44638C9.83773 9.44638 8.48926 8.0979 8.48926 6.43448V5.33923Z" stroke="#32E6E2" stroke-width="1.64286" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14.5117 5.33923H20.5355V6.43448C20.5355 8.0979 19.187 9.44638 17.5237 9.44638C15.8602 9.44638 14.5117 8.0979 14.5117 6.43448V5.33923Z" stroke="#32E6E2" stroke-width="1.64286" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/packages/assets/icons/marketing.svg

@@ -0,0 +1,20 @@
+<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1_5250)">
+<path d="M8.64062 22.9532L10.3686 18.6333H13.8246L15.5525 22.9532H8.64062Z" fill="#CDE2FF"/>
+<path d="M22.464 2.21704H1.72825C1.25108 2.21704 0.864258 2.60387 0.864258 3.08103V17.7688C0.864258 18.2459 1.25108 18.6328 1.72825 18.6328H22.464C22.9411 18.6328 23.328 18.2459 23.328 17.7688V3.08103C23.328 2.60387 22.9411 2.21704 22.464 2.21704Z" fill="#2036A1"/>
+<path d="M22.464 2.21704H1.72825C1.25108 2.21704 0.864258 2.60387 0.864258 3.08103V17.7688C0.864258 18.2459 1.25108 18.6328 1.72825 18.6328H22.464C22.9411 18.6328 23.328 18.2459 23.328 17.7688V3.08103C23.328 2.60387 22.9411 2.21704 22.464 2.21704Z" stroke="#2E51ED" stroke-width="1.72798" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10.3686 18.6333L8.64062 22.9532" stroke="#2E51ED" stroke-width="1.72798" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M13.8252 18.6333L15.5532 22.9532" stroke="#2E51ED" stroke-width="1.72798" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6.91211 22.9524H17.28" stroke="#2E51ED" stroke-width="1.72798" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7.87402 12.2764C8.69713 13.1135 10.1509 13.8809 12.0958 13.8809C14.0407 13.8809 15.4944 13.1135 16.3175 12.2764" stroke="#80ABFA" stroke-width="1.72798" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9.073 7.8335C8.83421 7.8335 8.64062 7.63991 8.64062 7.40112C8.64062 7.16233 8.83421 6.96875 9.073 6.96875" stroke="#80ABFA" stroke-width="1.72798" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9.07227 7.8335C9.31105 7.8335 9.50464 7.63991 9.50464 7.40112C9.50464 7.16234 9.31105 6.96875 9.07227 6.96875" stroke="#80ABFA" stroke-width="1.72798" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15.1205 7.83274C14.8819 7.83274 14.6885 7.63933 14.6885 7.40074C14.6885 7.16216 14.8819 6.96875 15.1205 6.96875" stroke="#80ABFA" stroke-width="1.72798" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15.1191 7.83274C15.3577 7.83274 15.5511 7.63933 15.5511 7.40074C15.5511 7.16216 15.3577 6.96875 15.1191 6.96875" stroke="#80ABFA" stroke-width="1.72798" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_1_5250">
+<rect width="24.1917" height="24.1917" fill="white" transform="translate(0 0.489746)"/>
+</clipPath>
+</defs>
+</svg>

package/packages/components/CodeBlock.astro

@@ -20,6 +20,7 @@ interface Props {
   title?: string;
   class?: string;
   showLineNumbers?: boolean;
+  showCopyOnHover?: boolean;
 }
 
 const {
@@ -32,8 +33,9 @@ const {
   theme = 'poimandres',
   wrap = false,
   title = '',
-  class: className,
+  showCopyOnHover,
   showLineNumbers = false,
+  class: className,
   ...rest
 } = Astro.props;
 
@@ -115,6 +117,7 @@ const showNumbers = showLineNumbers && code.split('\n').length > 1;
     frame === 'code' && 'code-frame',
     frame === 'none' && 'no-frame',
     showNumbers && 'with-line-numbers',
+    showCopyOnHover && 'show-copy-on-hover',
     className,
   ]}
   {...rest}

package/packages/components/SectionTabbedContent.astro

@@ -0,0 +1,185 @@
+---
+import { CallToActionProps } from '@utils/types';
+import TabbedContent from '@netlify/spark-ui/components/TabbedContent.astro';
+import Tab from '@netlify/spark-ui/components/Tab.astro';
+import TabList from '@netlify/spark-ui/components/TabList.astro';
+import TabPanel from '@netlify/spark-ui/components/TabPanel.astro';
+import TabPanelGroup from '@netlify/spark-ui/components/TabPanelGroup.astro';
+import Button from '@netlify/spark-ui/components/Button.astro';
+import HeadingBlock from '@netlify/spark-ui/components/HeadingBlock.astro';
+import CodeBlock from './CodeBlock.astro';
+
+interface CodeBlockProps {
+  heading?: string;
+  icon?: string;
+  code: string;
+  lang: string;
+}
+
+interface ItemProps {
+  title: string;
+  icon?: string;
+  isSelected?: boolean;
+  heading?: string;
+  text?: string;
+  list?: string[];
+  ctas?: CallToActionProps[];
+  codeBlock?: CodeBlockProps;
+}
+
+interface Props {
+  class?: string;
+  id?: string;
+  eyebrow?: string;
+  heading?: string;
+  items: ItemProps[];
+}
+
+const { id, eyebrow, heading, items, class: className, ...rest } = Astro.props;
+---
+
+<section id={id} class:list={['n-section-tabbed-content', className]} {...rest}>
+  <HeadingBlock eyebrow={eyebrow} heading={heading} />
+  <TabbedContent>
+    <TabList>
+      {
+        items.map(({ title, icon, isSelected }: ItemProps) => (
+          <Tab isSelected={isSelected}>
+            <img src={`${icon}`} alt="" width="16" height="16" />
+            {title}
+          </Tab>
+        ))
+      }
+    </TabList>
+    <TabPanelGroup isUniformHeight noPadding>
+      {
+        items.map(({ heading, list, text, ctas, codeBlock, isSelected }: ItemProps) => (
+          <TabPanel class="n-section-tabbed-content-panel" isHidden={!isSelected}>
+            <div
+              class:list={[
+                'n-section-tabbed-content-panel-content',
+                codeBlock && 'n-section-tabbed-content-wrapper-split',
+              ]}
+            >
+              <div class="n-section-tabbed-content-body n-flow">
+                {heading && <h3 class="h4">{heading}</h3>}
+                {text && <p set:html={text} />}
+                {list && list.length > 0 && (
+                  <ul data-list-variant="checklist">
+                    {list.map(item => (
+                      <li set:html={item} />
+                    ))}
+                  </ul>
+                )}
+                {ctas && ctas.length > 0 && (
+                  <div class="n-section-tabbed-content-ctas">
+                    {ctas?.map((cta: CallToActionProps) => (
+                      <Button id={cta.id} href={cta.href} variant={cta.variant}>
+                        {cta.text}
+                      </Button>
+                    ))}
+                  </div>
+                )}
+              </div>
+              {codeBlock && (
+                <div class="n-section-tabbed-content-code">
+                  {codeBlock.heading && (
+                    <div class="n-section-tabbed-content-code-heading">
+                      {codeBlock.icon && (
+                        <img
+                          class="n-section-tabbed-content-code-icon"
+                          src={codeBlock.icon}
+                          alt=""
+                          width="16"
+                          height="16"
+                          aria-hidden="true"
+                        />
+                      )}
+                      {codeBlock.heading}
+                    </div>
+                  )}
+                  <CodeBlock
+                    class="n-section-tabbed-content-code-block"
+                    code={codeBlock.code}
+                    lang={codeBlock.lang}
+                    showCopyOnHover
+                  />
+                </div>
+              )}
+            </div>
+          </TabPanel>
+        ))
+      }
+    </TabPanelGroup>
+  </TabbedContent>
+</section>
+
+<style>
+  .n-section-tabbed-content-panel {
+    container-type: inline-size;
+  }
+
+  .n-section-tabbed-content-wrapper-split {
+    display: grid;
+    grid-template-rows: auto 1fr;
+    height: 100%;
+  }
+
+  .n-section-tabbed-content-body {
+    padding: var(--space-xl);
+  }
+
+  .n-section-tabbed-content-code {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .n-section-tabbed-content-code-heading {
+    display: flex;
+    gap: var(--space-xs);
+    align-items: center;
+    margin-block-start: calc(var(--_border-size) * -1); /* overlap the parent border */
+    padding: var(--space-xs);
+    font-family: var(--font-family-mono);
+    font-size: var(--font-size-text-md);
+    text-transform: uppercase;
+    background-color: var(--tabbed-content-code-bg-color);
+    border-block: var(--_border-size) var(--_border-style) var(--tabbed-content-border-color);
+  }
+
+  .n-section-tabbed-content-code-icon {
+    flex-shrink: 0;
+    width: 1em;
+    height: auto;
+  }
+
+  .n-section-tabbed-content-code-block {
+    --n-code-block-border: none;
+    --n-code-block-radius: 0;
+    --n-code-block-bg-color: var(--tabbed-content-code-bg-color);
+    flex-grow: 1;
+  }
+
+  .n-section-tabbed-content-ctas {
+    display: grid;
+    gap: var(--space-s);
+  }
+
+  @media (min-width: 30rem) {
+    .n-section-tabbed-content-ctas {
+      justify-items: start;
+    }
+  }
+
+  @container (width > 55rem) {
+    .n-section-tabbed-content-wrapper-split {
+      grid-template-columns: 1fr 1fr;
+      grid-template-rows: 1fr;
+    }
+
+    .n-section-tabbed-content-code {
+      border-inline-start: var(--_border-size) var(--_border-style)
+        var(--tabbed-content-border-color);
+    }
+  }
+</style>

package/packages/components/Tab.astro

@@ -0,0 +1,12 @@
+---
+interface Props {
+  isSelected?: boolean;
+  class?: string;
+}
+
+const { isSelected, class: className, ...rest } = Astro.props;
+---
+
+<button role="tab" class={className} aria-selected={isSelected} {...rest}>
+  <slot />
+</button>

package/packages/components/TabList.astro

@@ -0,0 +1,7 @@
+---
+const { class: className, ...rest } = Astro.props;
+---
+
+<div role="tablist" class={className} {...rest}>
+  <slot />
+</div>

package/packages/components/TabPanel.astro

@@ -0,0 +1,13 @@
+---
+interface Props {
+  id?: string;
+  class?: string;
+  isHidden?: boolean;
+}
+
+const { id, isHidden, class: className, ...rest } = Astro.props;
+---
+
+<div {id} role="tabpanel" hidden={isHidden} class={className} {...rest}>
+  <slot />
+</div>