@netlify/spark-ui 1.0.2 → 1.0.3-alpha.0

package/dist/components/preact/Modal/Modal.js

@@ -1,5 +1,5 @@
 import { u as l } from "../../../chunks/jsxRuntime.module.Bzuv3cXw.js";
-import { D as d } from "../../../chunks/compat.module.DT16W4Wr.js";
+import { D as d } from "../../../chunks/compat.module.BjTzMHXJ.js";
 const u = d(function({ children: o, className: r, ...a }, t) {
   return /* @__PURE__ */ l("dialog", { ref: t, className: r, role: "dialog", "aria-modal": "true", ...a, children: o });
 });

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

@@ -0,0 +1,2 @@
+declare const Orb: () => import("preact").JSX.Element;
+export default Orb;

package/dist/components/preact/Orb/Orb.js

@@ -0,0 +1,5 @@
+import { u as r } from "../../../chunks/jsxRuntime.module.Bzuv3cXw.js";
+import '../../../assets/Orb.css';const t = () => /* @__PURE__ */ r("div", { class: "orb" });
+export {
+  t as default
+};

package/dist/components/preact/SearchModal/components/SearchInput.d.ts

@@ -2,6 +2,8 @@ interface Props {
     setSearchTerm: (term: string) => void;
     placeholder?: string;
     initialValue?: string;
+    isGeneratingAnswer?: boolean;
+    isPreparingAnswer?: boolean;
 }
 declare const SearchInput: (props: Props) => import("preact").JSX.Element;
 export default SearchInput;

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

@@ -1,6 +1,6 @@
 import { u as e } from "../../../../chunks/jsxRuntime.module.Bzuv3cXw.js";
-import { d as u, y as h } from "../../../../chunks/hooks.module.CNV9mxng.js";
-import { u as o } from "../../../../chunks/useTimeout.DOkYFG64.js";
+import { d as u, y as h } from "../../../../chunks/hooks.module.DeYLzLnU.js";
+import { u as o } from "../../../../chunks/useTimeout.DYuvQwFN.js";
 import d from "../../Icon/index.js";
 const I = (a) => {
   const [r, t] = u(""), { reset: c, run: i } = o((l) => {

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

@@ -1,5 +1,5 @@
 import { u as a } from "../../../../../chunks/jsxRuntime.module.Bzuv3cXw.js";
-import "../../../../../chunks/hooks.module.CNV9mxng.js";
+import "../../../../../chunks/hooks.module.DeYLzLnU.js";
 import { useSearchLogger as h } from "../../hooks/useSearchLogger.js";
 import c from "../../../Icon/index.js";
 import '../../../../../assets/SearchLink.css';const k = ({ icon: n, label: s, url: r, excerpt: l, resource: e }) => {

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

@@ -1,63 +1,93 @@
 import { u as e } from "../../../../../chunks/jsxRuntime.module.Bzuv3cXw.js";
-import { A as v, y as u, d as S } from "../../../../../chunks/hooks.module.CNV9mxng.js";
-import L from "../../../Modal/Modal.js";
-import d from "../../../KeyboardKey/KeyboardKey.js";
-import k from "../SearchWindow.js";
-import w from "../SearchInput.js";
-import { useSearch as I } from "../../hooks/useSearch.js";
-import { useSearchLogger as b } from "../../hooks/useSearchLogger.js";
-import { useKeyboardNav as O } from "../../hooks/useKeyboardNav.js";
-import { useSearchHotkeys as P } from "../../hooks/useSearchHotkeys.js";
-import { useSearchParams as E } from "../../hooks/useSearchParams.js";
-import { useSearchToggles as K } from "../../hooks/useSearchToggles.js";
-import '../../../../../assets/SearchModal.css';function M(o) {
-  const r = v(null);
+import { A as N, y as u, d as m } from "../../../../../chunks/hooks.module.DeYLzLnU.js";
+import b from "../../../Modal/Modal.js";
+import h from "../../../KeyboardKey/KeyboardKey.js";
+import M from "../SearchWindow.js";
+import O from "../SearchInput.js";
+import { useSearch as P } from "../../hooks/useSearch.js";
+import { useSearchLogger as A } from "../../hooks/useSearchLogger.js";
+import { useKeyboardNav as E } from "../../hooks/useKeyboardNav.js";
+import { useSearchHotkeys as K } from "../../hooks/useSearchHotkeys.js";
+import { useSearchParams as q } from "../../hooks/useSearchParams.js";
+import { useSearchToggles as C } from "../../hooks/useSearchToggles.js";
+import F from "../../../AskNetlify/AskNetlify.js";
+import { Fragment as Q } from "preact";
+import '../../../../../assets/SearchModal.css';function R(c) {
+  const r = N(null);
   return u(() => {
-    function t(i) {
-      r.current && !r.current.contains(i.target) && o();
+    function i(t) {
+      r.current && !r.current.contains(t.target) && c();
     }
-    return document.addEventListener("mousedown", t), () => {
-      document.removeEventListener("mousedown", t);
+    return document.addEventListener("mousedown", i), () => {
+      document.removeEventListener("mousedown", i);
     };
-  }, [o]), r;
+  }, [c]), r;
 }
-function B(o = { className: "", children: null, debug: !1 }) {
-  const [r, t] = S(!1);
+function Z(c = { className: "", children: null, debug: !1 }) {
+  const [r, i] = m(!1), [t, p] = m({ current: "search" }), [k, v] = m("");
   u(() => {
-    let c;
-    const g = () => {
-      window.pagefind && (t(!0), c && clearInterval(c));
+    let a;
+    const o = () => {
+      window.pagefind && (i(!0), a && clearInterval(a));
     };
-    return g(), c = setInterval(g, 100), () => clearInterval(c);
+    return o(), a = setInterval(o, 100), () => clearInterval(a);
   }, []);
-  const { children: i, className: f, debug: N, ...y } = o, { state: a, actions: h } = I(), [n, p] = S(!1), m = () => p(!0), l = () => p(!1), s = v(null), T = M(l);
-  return b(a, N), K(r, m), E(r, h.setSearchTerm, m), P(r, n, m, l), O(r, s, n, l), u(() => {
-    s.current && (n ? s.current.showModal() : s.current.close());
-  }, [n]), /* @__PURE__ */ e(L, { ref: s, className: `n-search-modal ${f || ""}`, ...y, children: /* @__PURE__ */ e("div", { ref: T, className: "n-search-container", children: [
-    /* @__PURE__ */ e(w, { setSearchTerm: h.setSearchTerm, initialValue: a.searchTerm }),
-    /* @__PURE__ */ e(
-      k,
-      {
-        searchLoading: a.isLoading,
-        searchTerm: a.searchTerm,
-        results: a.results,
-        children: i
-      }
-    ),
-    /* @__PURE__ */ e("div", { className: "n-search-footer", children: [
-      /* @__PURE__ */ e("p", { className: "n-search-footer-tip", children: [
-        /* @__PURE__ */ e(d, { keyNames: ["Esc"] }),
-        "to close"
-      ] }),
-      /* @__PURE__ */ e("p", { className: "n-search-footer-tip", children: [
-        /* @__PURE__ */ e(d, { keyNames: ["Tab"] }),
-        /* @__PURE__ */ e("span", { children: "or" }),
-        /* @__PURE__ */ e(d, { keyNames: ["↑", "↓"] }),
-        "to navigate"
+  const { children: T, className: S, debug: L, ...w } = c, { state: n, actions: g } = P(), [l, y] = m(!1), d = () => y(!0), f = () => y(!1), s = N(null), I = R(f);
+  return A(n, L), C(r, d), q(r, g.setSearchTerm, d), K(r, l, d, f), E(r, s, l, f), u(() => {
+    s.current && (l ? s.current.showModal() : s.current.close());
+  }, [l]), u(() => {
+    var o;
+    const a = (o = s.current) == null ? void 0 : o.querySelector("input");
+    a && a.focus(), t.current === "ask" ? setTimeout(() => {
+      s.current.classList.add("n-search-modal-ask");
+    }, 150) : t.current === "search" && setTimeout(() => {
+      s.current.classList.remove("n-search-modal-ask");
+    }, 150);
+  }, [t.current]), /* @__PURE__ */ e(
+    b,
+    {
+      ref: s,
+      className: `n-search-modal ${S || ""}`,
+      "data-state": t.current,
+      ...w,
+      children: /* @__PURE__ */ e("div", { ref: I, className: "n-search-container", children: [
+        t.current === "ask" && /* @__PURE__ */ e(F, { query: k, setModalState: p }),
+        t.current === "search" && /* @__PURE__ */ e(Q, { children: [
+          /* @__PURE__ */ e(
+            O,
+            {
+              setSearchTerm: g.setSearchTerm,
+              setAskNetlifyQuery: v,
+              initialValue: n.searchTerm
+            }
+          ),
+          /* @__PURE__ */ e(
+            M,
+            {
+              setModalState: p,
+              searchLoading: n.isLoading,
+              searchTerm: n.searchTerm,
+              results: n.results,
+              children: T
+            }
+          ),
+          /* @__PURE__ */ e("div", { className: "n-search-footer", children: [
+            /* @__PURE__ */ e("p", { className: "n-search-footer-tip", children: [
+              /* @__PURE__ */ e(h, { keyNames: ["Esc"] }),
+              "to closed"
+            ] }),
+            /* @__PURE__ */ e("p", { className: "n-search-footer-tip", children: [
+              /* @__PURE__ */ e(h, { keyNames: ["Tab"] }),
+              /* @__PURE__ */ e("span", { children: "or" }),
+              /* @__PURE__ */ e(h, { keyNames: ["↑", "↓"] }),
+              "to navigate"
+            ] })
+          ] })
+        ] })
       ] })
-    ] })
-  ] }) });
+    }
+  );
 }
 export {
-  B as default
+  Z as default
 };

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

@@ -1,5 +1,5 @@
 import { u as e } from "../../../../../chunks/jsxRuntime.module.Bzuv3cXw.js";
-import { D as a } from "../../../../../chunks/compat.module.DT16W4Wr.js";
+import { D as a } from "../../../../../chunks/compat.module.BjTzMHXJ.js";
 import o from "../../../Icon/index.js";
 import '../../../../../assets/SearchToggle.css';const s = a(function(r, t) {
   return /* @__PURE__ */ e("button", { id: r.id, ref: t, class: "n-search-toggle button", disabled: !0, "data-ntl-search-toggle": !0, children: [

package/dist/components/preact/SearchModal/components/SearchWindow.d.ts

@@ -1,2 +1,2 @@
 import { SearchWindowProps } from '../types/search.types';
-export default function SearchWindow({ searchLoading, searchTerm, results, children: DefaultWindow, }: SearchWindowProps): import("preact").JSX.Element;
+export default function SearchWindow({ setModalState, searchLoading, searchTerm, results, children: DefaultWindow, }: SearchWindowProps): import("preact").JSX.Element;

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

@@ -1,48 +1,53 @@
-import { u as e } from "../../../../chunks/jsxRuntime.module.Bzuv3cXw.js";
-import { T as o } from "../../../../chunks/hooks.module.CNV9mxng.js";
-import t from "./SearchHeading/SearchHeading.js";
-import a from "./SearchLink/SearchLink.js";
-const h = ({
-  searchLoading: s,
+import { u as n } from "../../../../chunks/jsxRuntime.module.Bzuv3cXw.js";
+import { T as h } from "../../../../chunks/hooks.module.DeYLzLnU.js";
+import s from "./SearchHeading/SearchHeading.js";
+import m from "./SearchLink/SearchLink.js";
+import a from "../../Icon/index.js";
+import { Fragment as o } from "preact";
+const d = ({
+  searchLoading: l,
   searchTerm: r,
-  results: n
+  results: e
 }) => {
-  if (s)
-    return /* @__PURE__ */ e(t, { children: [
+  if (l)
+    return /* @__PURE__ */ n(s, { children: [
       "Searching for ",
-      /* @__PURE__ */ e("span", { className: "n-search-term", children: r }),
+      /* @__PURE__ */ n("span", { className: "n-search-term", children: r }),
       " ..."
     ] });
-  if (!n || n.length === 0)
-    return /* @__PURE__ */ e(t, { children: [
+  if (!e || e.length === 0)
+    return /* @__PURE__ */ n(s, { children: [
       "0 results for ",
-      /* @__PURE__ */ e("span", { className: "n-search-term", children: r })
+      /* @__PURE__ */ n("span", { className: "n-search-term", children: r })
     ] });
-  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 });
+  const c = h(() => e.map((i, t) => /* @__PURE__ */ n("li", { className: "n-results-list-item", children: /* @__PURE__ */ n(m, { ...i }) }, t)), [e]);
+  return /* @__PURE__ */ n("ul", { className: "n-results-list", role: "list", children: c });
 };
-function p({
-  searchLoading: s,
-  searchTerm: r,
-  results: n,
-  children: l
+function S({
+  setModalState: l,
+  searchLoading: r,
+  searchTerm: e,
+  results: c,
+  children: i
 }) {
-  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,
+  return /* @__PURE__ */ n("div", { className: "n-search-window", children: /* @__PURE__ */ n("div", { className: "search-links", children: e && e.length > 1 ? /* @__PURE__ */ n(d, { searchLoading: r, searchTerm: e, results: c }) : i ? /* @__PURE__ */ n(o, { children: [
+    /* @__PURE__ */ n(
+      "button",
       {
-        searchLoading: s,
-        searchTerm: r,
-        results: n
+        class: "btn-ask-netlify n-search-link",
+        onClick: () => {
+          l({ current: "ask" });
+        },
+        children: [
+          /* @__PURE__ */ n("span", { className: "n-search-link-icon", children: /* @__PURE__ */ n(a, { name: "netlify" }) }),
+          /* @__PURE__ */ n("div", { className: "n-search-link-body", children: /* @__PURE__ */ n("p", { className: "n-search-link-title", children: "Ask Netlify AI" }) }),
+          /* @__PURE__ */ n("div", { className: "n-search-link-icon", children: /* @__PURE__ */ n(a, { name: "caretRight" }) })
+        ]
       }
-    ) : l || null
-  ] }) });
+    ),
+    i
+  ] }) : null }) });
 }
 export {
-  p as default
+  S as default
 };

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

@@ -1,6 +1,6 @@
-import { y as l } from "../../../../chunks/hooks.module.CNV9mxng.js";
-function s(r, t, o, c) {
-  l(() => {
+import { y as f } from "../../../../chunks/hooks.module.DeYLzLnU.js";
+function k(r, t, o, c) {
+  f(() => {
     if (!r) return;
     const u = (e) => {
       if (o) {
@@ -12,8 +12,8 @@ function s(r, t, o, c) {
           e.preventDefault();
           const d = t.current;
           if (!d) return;
-          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();
+          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();
         }
       }
     };
@@ -21,5 +21,5 @@ function s(r, t, o, c) {
   }, [r, t, o, c]);
 }
 export {
-  s as useKeyboardNav
+  k 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.CNV9mxng.js";
-import { u as S } from "../../../../chunks/useTimeout.DOkYFG64.js";
+import { d as g, A as w } from "../../../../chunks/hooks.module.DeYLzLnU.js";
+import { u as S } from "../../../../chunks/useTimeout.DYuvQwFN.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.CNV9mxng.js";
+import { y as u } from "../../../../chunks/hooks.module.DeYLzLnU.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.CNV9mxng.js";
+import { A as y, y as h, q as k } from "../../../../chunks/hooks.module.DeYLzLnU.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.CNV9mxng.js";
+import { y as c } from "../../../../chunks/hooks.module.DeYLzLnU.js";
 function n(r, o, a) {
   c(() => {
     if (typeof location > "u" || r) return;

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

@@ -1,4 +1,4 @@
-import { y as l } from "../../../../chunks/hooks.module.CNV9mxng.js";
+import { y as l } from "../../../../chunks/hooks.module.DeYLzLnU.js";
 function i(c, r) {
   l(() => {
     if (!c) return;

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

@@ -8,6 +8,9 @@ export interface SearchLinkProps {
     excerpt?: string;
 }
 export interface SearchWindowProps {
+    setModalState: (e: {
+        current: string;
+    }) => void;
     searchLoading: boolean;
     searchTerm?: string;
     results?: SearchLinkProps[];

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

@@ -4,5 +4,6 @@ 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,16 +3,18 @@ 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 h } from "./SearchModal/components/SearchToggle/SearchToggle.js";
+import { default as i } from "./SearchModal/components/SearchToggle/SearchToggle.js";
+import { default as S } from "./AskNetlify/AskNetlify.js";
 import "preact";
-import "../../chunks/hooks.module.CNV9mxng.js";
-import { default as S } from "./SearchModal/components/SearchModal/SearchModal.js";
+import "../../chunks/hooks.module.DeYLzLnU.js";
+import { default as n } 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,
-  S as SearchModal,
-  h as SearchToggle
+  n as SearchModal,
+  i as SearchToggle
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@netlify/spark-ui",
   "description": "Assets, design tokens, components, and utilities",
-  "version": "1.0.2",
+  "version": "1.0.3-alpha.0",
   "type": "module",
   "main": "dist/components/preact/index.js",
   "types": "dist/components/preact/index.d.ts",
@@ -33,9 +33,11 @@
     "./analytics": "./packages/analytics/index.ts"
   },
   "dependencies": {
+    "@kapaai/react-sdk": "^0.0.5",
     "@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",
@@ -64,4 +66,4 @@
     "prettier": "^3.5.3",
     "prettier-plugin-astro": "^0.14.1"
   }
-}
+}

package/packages/components/index.ts

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

package/packages/components/preact/AskNetlify/AskNetlify.css

@@ -0,0 +1,161 @@
+.chat-container {
+  opacity: 0;
+  animation: appearContainer 350ms ease-in-out forwards;
+  animation-delay: 300ms;
+}
+
+@keyframes appearContainer {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+.conversation {
+  height: calc(var(--n-search-container-height) + var(--n-search-footer-height));
+  padding: var(--n-search-padding-inline);
+  scroll-behavior: smooth;
+  overflow-y: auto;
+  display: grid;
+  align-items: flex-end;
+  gap: var(--space-s);
+}
+
+.message {
+  display: grid;
+  gap: var(--space-s);
+}
+
+.message-bubble {
+  padding: 1rem 1rem;
+  background: var(--neutral-light-100);
+  border-radius: var(--radius-l);
+  width: fit-content;
+  max-width: 85%;
+  font-size: var(--step-0);
+}
+
+.prose {
+  font-size: var(--step--0);
+
+  > * + * {
+    margin-top: var(--flow-space, var(--space-xs));
+  }
+
+  h1,
+  h2,
+  h3 {
+    font-size: var(--step-1);
+  }
+
+  h4,
+  h5,
+  h6 {
+    font-size: var(--step-0);
+  }
+
+  pre {
+    background: var(--neutral-light-700);
+    border-radius: var(--radius-m);
+    max-width: 100%;
+    box-sizing: border-box;
+  }
+
+  code {
+    overflow-x: scroll;
+  }
+
+  code[class*='language-'],
+  pre[class*='language-'] {
+    display: block;
+    padding: var(--space-s);
+  }
+}
+
+.user-message {
+  margin-inline-start: auto;
+  background: var(--blue-000);
+}
+
+.form-wrapper {
+  display: flex;
+  align-items: center;
+  position: relative;
+  height: var(--n-search-input-height);
+}
+
+.form-wrapper::after {
+  content: '';
+  display: block;
+  width: 100%;
+  height: 1px;
+  background: var(--neutral-light-100);
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.form-input {
+  border: none;
+  outline: none;
+  padding-inline: var(--n-search-padding-inline);
+}
+
+.form-submit {
+  border: none;
+  padding: 0.7rem;
+  border-radius: var(--radius-pill);
+  margin-inline-end: var(--space-2xs);
+  border: none;
+  background: var(--blue-600);
+  color: var(--neutral-000);
+  transition: filter 300ms ease-out;
+}
+
+.form-submit > svg {
+  width: 1rem;
+  height: auto;
+  aspect-ratio: 1 / 1;
+  border-radius: 1.5px;
+}
+
+.form-submit[disabled] {
+  filter: saturate(0);
+}
+
+.button-back {
+  width: fit-content;
+  background: transparent;
+  position: absolute;
+  padding: 0.5rem 1rem;
+  background: var(--color-bg);
+  margin: 1rem;
+  border-radius: 7rem;
+  border: 2px solid var(--color-bg-3);
+  border-radius: var(--radius-pill);
+  font-size: var(--step--2);
+  border: 1px solid;
+  cursor: pointer;
+  color: var(--color-text);
+}
+
+.pulsing {
+  display: block;
+  width: 1rem;
+  height: 1rem;
+  clip-path: circle(40%);
+  background: var(--blue-700);
+  animation: pulsing 2.5s infinite ease-in-out;
+}
+
+@keyframes pulsing {
+  0%,
+  100% {
+    transform: scale(0.9);
+  }
+  50% {
+    transform: scale(1.05);
+  }
+}